:root {
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #263238;
  background: #f5f7f6;
}
* { box-sizing: border-box; }
body { margin: 0; display: flex; min-height: 100vh; }
aside { width: 244px; flex: 0 0 244px; background: #163b35; color: white; padding: 28px 18px; display: flex; flex-direction: column; }
aside h1 { margin: 0 12px 36px; font-size: 28px; }
nav { display: grid; gap: 8px; }
nav a { color: #d6ebe4; text-decoration: none; padding: 13px 14px; border-radius: 10px; }
nav a:hover, nav a.active { background: #24574d; color: #fff; }
aside form { margin-top: auto; }
button { border: 0; border-radius: 9px; padding: 11px 16px; cursor: pointer; background: #e7efeb; color: #26463e; font-weight: 700; }
button:hover { filter: brightness(.97); }
aside button { width: 100%; background: #24574d; color: white; }
main { flex: 1; min-width: 0; }
header { height: 68px; background: white; border-bottom: 1px solid #e3e9e6; padding: 0 38px; display: flex; align-items: center; justify-content: space-between; color: #60736d; }
h2 { margin: 0; font-size: 28px; }
.page-heading, .detail-head { margin: 32px 38px 20px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.page-heading .muted, .detail-head .muted { margin: 8px 0 0; }
.date-chip { background: #e7f3ec; color: #247155; border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; }
.cards { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; margin: 0 38px 24px; }
.cards div, .panel { background: white; border-radius: 16px; padding: 22px; box-shadow: 0 5px 20px #173b3510; }
.cards b { display: block; font-size: 28px; color: #163b35; }
.cards span { display: block; color: #72817c; margin-top: 3px; }
.cards small { display: block; color: #9aa7a2; margin-top: 12px; font-size: 12px; }
.cards a, .panel a { color: #1b745b; }
.panel { margin: 0 38px 24px; overflow: auto; }
.panel h3 { margin: 0 0 16px; color: #25483f; }
.panel-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.trend-chart { height: 180px; display: flex; align-items: flex-end; justify-content: space-around; gap: 14px; padding: 16px 12px 0; background: linear-gradient(to top, #f0f5f2 1px, transparent 1px); background-size: 100% 25%; }
.trend-col { height: 100%; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; }
.trend-bars { height: 145px; display: flex; align-items: flex-end; gap: 4px; }
.trend-bar { display: block; width: 12px; min-height: 8px; border-radius: 6px 6px 2px 2px; }
.active-bar { background: #1c6956; }
.feed-bar { background: #d7a83d; }
.new-bar { background: #8eb8a4; }
.trend-col small { color: #7e8d87; font-size: 11px; }
.chart-legend { display: flex; gap: 18px; margin: 8px 0 20px; color: #74837d; font-size: 12px; }
.chart-legend i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 5px; }
.active-dot { background: #1c6956; }
.feed-dot { background: #d7a83d; }
.new-dot { background: #8eb8a4; }
.split-panels { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 24px; margin: 0 38px 24px; }
.split-panels .panel { margin: 0; }
.quick-panel { display: flex; flex-direction: column; gap: 12px; }
.quick-panel h3 { margin-bottom: 2px; }
.quick-panel a { display: flex; justify-content: space-between; gap: 15px; padding: 14px 0; border-bottom: 1px solid #edf1ef; text-decoration: none; font-weight: 800; }
.quick-panel a:last-child { border: 0; }
.quick-panel span { color: #8a9993; font-size: 12px; font-weight: 500; text-align: right; }
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 18px; }
.filters input, .filters select, .inline-form select { min-height: 40px; padding: 8px 11px; border: 1px solid #d4dfda; border-radius: 9px; background: white; color: #354941; }
.filters input { min-width: 150px; }
.filters button { background: #1c6956; color: white; }
.clear-link { padding: 10px; }
.inline-form { display: inline-flex; align-items: center; gap: 6px; margin-left: 8px; }
.inline-form button { padding: 7px 10px; font-size: 12px; }
.user-link { font-weight: 800; text-decoration: none; }
.user-link + small { display: block; color: #98a49f; font-size: 11px; margin-top: 4px; }
.status, .badge, .tag { display: inline-block; border-radius: 999px; padding: 4px 9px; font-size: 12px; font-weight: 800; }
.status.active, .status.handled, .badge.high, .tag { background: #e4f4ec; color: #19704c; }
.status.disabled, .status.rejected, .badge.dormant { background: #ffebe8; color: #a3483e; }
.status.pending, .badge.medium { background: #fff4d7; color: #986d1e; }
.badge.low { background: #edf0f0; color: #64746f; }
table { border-collapse: collapse; width: 100%; min-width: 760px; }
th, td { text-align: left; padding: 14px; border-bottom: 1px solid #edf1ef; font-size: 14px; vertical-align: top; }
th { color: #65756f; background: #fbfcfc; white-space: nowrap; }
.long-text { max-width: 320px; white-space: normal; word-break: break-word; }
.empty { text-align: center; color: #8b9894; padding: 34px; }
.pager { margin-top: 18px; color: #6e7d78; }
.pager a { color: #1b745b; text-decoration: none; margin: 0 8px; }
.detail-head { align-items: center; }
.detail-head h2 { margin-top: 10px; }
.back-link { color: #1b745b; text-decoration: none; font-size: 14px; }
.detail-metrics { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.profile-summary .summary-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.summary-grid div { display: flex; flex-direction: column; gap: 6px; }
.summary-grid span { color: #82908b; font-size: 13px; }
.summary-grid strong { font-size: 15px; color: #2d453d; }
.muted { color: #82908b; font-size: 13px; }
.danger { background: #b94c43; color: white; }
.primary { background: #1c6956; color: white; }
.login { display: grid; place-items: center; background: #eaf2ef; }
.login-card { width: min(420px, calc(100% - 32px)); background: white; padding: 36px; border-radius: 20px; box-shadow: 0 12px 40px #163b3520; }
.login-card h1 { margin-top: 0; }
.login-card label { display: block; margin: 18px 0; color: #54635f; }
.login-card input { display: block; width: 100%; padding: 12px; margin-top: 7px; border: 1px solid #d4dfda; border-radius: 9px; }
.login-card .primary { width: 100%; font-size: 16px; }
.error { background: #fff0ef; color: #b33b35; padding: 10px; border-radius: 8px; }
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)); gap: 12px; align-items: end; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; color: #60736d; font-size: 13px; }
.form-grid input:not([type="checkbox"]) { min-height: 40px; width: 100%; padding: 8px 11px; border: 1px solid #d4dfda; border-radius: 9px; background: white; color: #354941; }
.form-grid .wide { grid-column: span 2; }
.form-grid .check { flex-direction: row; align-items: center; min-height: 40px; }
.form-grid button { background: #1c6956; color: white; min-height: 40px; }
.sound-card { border: 1px solid #e1eae5; border-radius: 13px; padding: 16px; margin-top: 14px; }
.sound-card-title { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 14px; color: #25483f; }
@media (max-width: 1100px) { .form-grid { grid-template-columns: repeat(2, minmax(130px, 1fr)); } }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } .form-grid .wide { grid-column: auto; } }
@media (max-width: 1000px) { .cards, .detail-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); } .split-panels { grid-template-columns: 1fr; } }
@media (max-width: 760px) { body { display: block; } aside { width: 100%; padding: 14px; display: block; } aside h1 { display: inline; margin: 0 15px 0 0; } nav { display: flex; overflow: auto; margin-top: 10px; } aside form { display: none; } header { padding: 0 18px; } .page-heading, .detail-head { margin: 24px 18px 18px; align-items: flex-start; flex-direction: column; } .panel { margin-left: 18px; margin-right: 18px; padding: 16px; } .cards { grid-template-columns: repeat(2, 1fr); margin: 0 18px 18px; gap: 10px; } .cards div { padding: 16px; } .split-panels { display: block; margin: 0 18px 18px; } .split-panels .panel { margin: 0 0 18px; } .profile-summary .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } h2 { font-size: 24px; } }