:root{
  --bg:#f4f1ea;
  --panel:#fbfaf7;
  --panel-2:#f0ece5;
  --panel-3:#e6e1d8;
  --text:#23211d;
  --muted:#6d6a64;
  --faint:#9b978f;
  --line:#d8d2c8;
  --primary:#0e6b6f;
  --primary-2:#0a5659;
  --accent:#2f7d32;
  --warn:#a66b12;
  --danger:#9d2f63;
  --blue:#2f6599;
  --shadow:0 10px 30px rgba(36,29,18,.08);
  --radius:16px;
  --radius-sm:10px;
  --radius-xs:8px;
  --space-1:4px;
  --space-2:8px;
  --space-3:12px;
  --space-4:16px;
  --space-5:20px;
  --space-6:24px;
  --space-8:32px;
  --space-10:40px;
  --space-12:48px;
  --content:1280px;
}
html[data-theme="dark"]{
  --bg:#171614;
  --panel:#1f1d1a;
  --panel-2:#252320;
  --panel-3:#2e2b28;
  --text:#e7e2d9;
  --muted:#b2aca1;
  --faint:#837d74;
  --line:#3a352f;
  --primary:#57a0a8;
  --primary-2:#7cb6bc;
  --accent:#73b26d;
  --warn:#d79e4a;
  --danger:#d16ba1;
  --blue:#78a8d8;
  --shadow:0 10px 30px rgba(0,0,0,.26);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.55;
}
a{color:inherit}
button,input,select,textarea{font:inherit}
.app{
  max-width:var(--content);
  margin:0 auto;
  padding:0 var(--space-4) var(--space-12);
}
.skip{
  position:absolute; left:-9999px; top:auto;
}
.skip:focus{
  left:16px; top:16px; background:var(--panel); border:1px solid var(--line);
  padding:10px 14px; border-radius:10px; z-index:1000;
}

.topbar{
  position:sticky; top:0; z-index:200;
  backdrop-filter:blur(10px);
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  border-bottom:1px solid var(--line);
}
.topbar-inner{
  max-width:var(--content);
  margin:0 auto;
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 16px;
}
.brand{
  display:flex; align-items:center; gap:12px; text-decoration:none;
  min-width:0;
}
.logo{
  width:38px; height:38px; border-radius:12px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,var(--primary),var(--blue));
  color:#fff; box-shadow:var(--shadow);
  flex:0 0 auto;
}
.brand-meta{min-width:0}
.brand-title{font-weight:800; letter-spacing:.02em}
.brand-sub{font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.global-search{
  position:relative;
  min-width:0;
}
.global-search input{
  width:100%; height:46px; border-radius:14px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); padding:0 44px 0 44px;
  outline:none;
}
.global-search svg{
  position:absolute; top:50%; transform:translateY(-50%);
  opacity:.65;
}
.global-search .icon-left{left:14px}
.global-search .kbd{
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  font-size:12px; color:var(--muted); border:1px solid var(--line);
  border-radius:8px; padding:4px 7px; background:var(--panel-2);
}

.top-actions{
  display:flex; gap:10px; align-items:center;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:42px; padding:0 14px; border-radius:12px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); cursor:pointer; text-decoration:none;
  transition:.18s ease;
}
.btn:hover{transform:translateY(-1px); box-shadow:var(--shadow)}
.btn.primary{
  background:var(--primary); border-color:transparent; color:#fff;
}
.btn.ghost{
  background:transparent;
}
.btn.small{min-height:34px; border-radius:10px; padding:0 10px; font-size:14px}

.hero{
  padding:28px 0 18px;
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:18px;
}
.hero-main, .hero-side, .card, .panel{
  background:var(--panel);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  border-radius:var(--radius);
}
.hero-main{
  padding:26px;
  background:
    radial-gradient(circle at top right, color-mix(in srgb,var(--primary) 12%, transparent), transparent 32%),
    linear-gradient(180deg, color-mix(in srgb,var(--panel) 85%, var(--panel-2)), var(--panel));
}
.eyebrow{
  display:inline-flex; gap:8px; align-items:center;
  padding:7px 10px; border-radius:999px; background:var(--panel-2);
  border:1px solid var(--line); color:var(--muted); font-size:13px;
  margin-bottom:14px;
}
h1{
  margin:0 0 10px;
  font-size:clamp(32px,4vw,56px);
  line-height:1.04;
  letter-spacing:-.03em;
}
.lead{
  color:var(--muted);
  max-width:74ch;
  font-size:17px;
}
.hero-actions{
  display:flex; flex-wrap:wrap; gap:12px; margin-top:20px;
}
.hero-grid{
  margin-top:22px;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
}
.metric{
  background:var(--panel-2);
  border:1px solid var(--line);
  border-radius:14px;
  padding:14px;
}
.metric .k{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
}
.metric .v{
  margin-top:6px; font-size:28px; font-weight:800;
}
.metric .s{
  margin-top:6px; font-size:13px; color:var(--muted);
}

.hero-side{
  padding:18px;
  display:flex; flex-direction:column; gap:12px;
}
.mini-status{
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 14px; border-radius:12px; background:var(--panel-2); border:1px solid var(--line);
}
.dot{
  width:10px; height:10px; border-radius:999px; display:inline-block; vertical-align:middle;
  margin-right:8px;
}
.ok{background:var(--accent)}
.warn{background:var(--warn)}
.bad{background:var(--danger)}
.info{background:var(--blue)}
.status-pill{
  font-size:12px; padding:5px 9px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel);
  white-space:nowrap;
}

.layout{
  display:grid;
  grid-template-columns:270px 1fr;
  gap:18px;
  align-items:start;
  margin-top:8px;
}
.sidebar{
  position:sticky; top:78px;
  display:flex; flex-direction:column; gap:14px;
}
.sidebar .panel{
  padding:16px;
}
.side-title{
  font-size:12px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin-bottom:10px;
}
.side-nav{
  display:grid; gap:8px;
}
.side-nav a{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  text-decoration:none; padding:10px 12px; border-radius:12px; color:var(--text);
  border:1px solid transparent;
}
.side-nav a:hover,.side-nav a.active{
  background:var(--panel-2); border-color:var(--line);
}

.content{
  display:grid; gap:18px;
}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:18px}
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:18px}
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:18px}

.card, .panel{padding:18px}
.card h2, .panel h2{
  margin:0 0 12px; font-size:20px; letter-spacing:-.02em;
}
.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px;
}
.muted{color:var(--muted)}
.tiny{font-size:12px; color:var(--muted)}
.faint{color:var(--faint)}
.divider{
  height:1px; background:var(--line); margin:14px 0;
}

.service-list,.incident-list,.task-list,.doc-list,.faq-list,.activity-list{
  display:grid; gap:10px;
}
.row{
  display:flex; gap:12px; align-items:flex-start; justify-content:space-between;
  padding:12px 14px; border:1px solid var(--line); background:var(--panel-2); border-radius:12px;
}
.row-left{min-width:0}
.row-title{
  font-weight:700;
  display:flex; align-items:center; gap:8px;
  flex-wrap:wrap;
}
.row-desc{margin-top:4px; color:var(--muted); font-size:14px}
.badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 9px; border-radius:999px; border:1px solid var(--line);
  font-size:12px; background:var(--panel);
  white-space:nowrap;
}
.badge.green{color:var(--accent)}
.badge.orange{color:var(--warn)}
.badge.red{color:var(--danger)}
.badge.blue{color:var(--blue)}

.toolbar{
  display:flex; flex-wrap:wrap; gap:10px;
  align-items:center;
}
.toolbar input,.toolbar select,.toolbar textarea,
.field input,.field select,.field textarea{
  width:100%;
  min-height:42px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--panel);
  color:var(--text);
  padding:10px 12px;
  outline:none;
}
.toolbar .search-sm{
  min-width:220px; flex:1 1 240px;
}
.toolbar .filter{
  width:auto; min-width:160px;
}

.fields{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.fields-3{
  display:grid; grid-template-columns:repeat(3,1fr); gap:12px;
}
.field label{
  display:block; margin-bottom:6px; font-weight:600; font-size:14px;
}
.field.full{grid-column:1/-1}
.inline-check{
  display:flex; flex-wrap:wrap; gap:14px;
  padding:12px 0 2px;
}
.inline-check label{
  display:inline-flex; align-items:center; gap:8px; font-weight:500; margin:0;
}

.table-wrap{
  overflow:auto;
  border:1px solid var(--line);
  border-radius:14px;
}
table{
  width:100%;
  border-collapse:collapse;
  min-width:780px;
}
th,td{
  text-align:left;
  padding:12px 14px;
  border-bottom:1px solid var(--line);
  vertical-align:top;
}
th{
  position:sticky; top:0;
  background:var(--panel-2);
  z-index:1;
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  color:var(--muted);
}
tr:hover td{
  background:color-mix(in srgb,var(--panel-2) 74%, transparent);
}

.tabs{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px;
}
.tab{
  min-height:38px; padding:0 12px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel); color:var(--text); cursor:pointer;
}
.tab.active{
  background:var(--primary); color:#fff; border-color:transparent;
}
.tab-panel{display:none}
.tab-panel.active{display:block}

.timeline{
  position:relative; padding-left:20px; display:grid; gap:12px;
}
.timeline::before{
  content:""; position:absolute; left:7px; top:2px; bottom:2px; width:2px; background:var(--line);
}
.event{
  position:relative; padding:0 0 0 16px;
}
.event::before{
  content:""; position:absolute; left:-1px; top:5px; width:10px; height:10px; border-radius:999px;
  background:var(--primary); box-shadow:0 0 0 4px color-mix(in srgb,var(--primary) 16%, transparent);
}
.event time{
  display:block; font-size:12px; color:var(--muted); margin-bottom:4px;
}

.progress{
  height:10px; border-radius:999px; background:var(--panel-3); overflow:hidden; border:1px solid var(--line);
}
.progress > span{
  display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--blue));
}

.notice{
  display:flex; gap:12px; align-items:flex-start;
  padding:14px; border-radius:14px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--primary) 8%, var(--panel));
}

.calendar{
  display:grid; grid-template-columns:repeat(7,1fr); gap:8px;
}
.calendar .dayname{
  text-align:center; color:var(--muted); font-size:12px; text-transform:uppercase; padding-bottom:6px;
}
.calendar .day{
  min-height:88px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2);
  padding:8px; font-size:13px;
}
.calendar .day b{display:block; margin-bottom:6px}
.calendar .task{
  margin-top:4px; padding:4px 6px; border-radius:8px; background:var(--panel);
  border:1px solid var(--line); font-size:12px;
}

.chart{
  display:flex; align-items:end; gap:10px; height:220px; padding:10px 0 0;
}
.bar{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:8px;
}
.bar .col{
  width:100%; max-width:52px; border-radius:12px 12px 8px 8px;
  background:linear-gradient(180deg,var(--primary-2),var(--primary));
  border:1px solid color-mix(in srgb,var(--primary) 40%, var(--line));
  min-height:20px;
}
.bar .lab{font-size:12px; color:var(--muted)}
.bar .num{font-size:12px; font-weight:700}

.footer{
  margin-top:18px;
  padding:18px 0 0;
  color:var(--muted);
}
.footer-grid{
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:18px;
}
.footer ul{list-style:none; padding:0; margin:0; display:grid; gap:8px}
.footer a{text-decoration:none}
.footer a:hover{text-decoration:underline}

.toast-wrap{
  position:fixed; right:16px; bottom:16px; z-index:500;
  display:grid; gap:10px; width:min(360px,calc(100vw - 32px));
}
.toast{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  padding:14px;
  animation:slideIn .18s ease;
}
.toast.leaving{opacity:0; transform:translateY(6px); transition:.18s ease}

.mt-6{margin-top:6px}
.mt-10{margin-top:10px}
.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.mt-18{margin-top:18px}
.progress-9994{width:99.94%}
.progress-72{width:72%}
.progress-58{width:58%}
.progress-31{width:31%}
.chart-height-29{height:29%}
.chart-height-35{height:35%}
.chart-height-42{height:42%}
.chart-height-49{height:49%}
.chart-height-54{height:54%}
.chart-height-58{height:58%}
.chart-height-66{height:66%}
@keyframes slideIn{
  from{transform:translateY(8px); opacity:0}
  to{transform:translateY(0); opacity:1}
}

.hidden{display:none !important}
.mobile-nav-toggle{display:none}

@media (max-width: 1080px){
  .hero{grid-template-columns:1fr}
  .layout{grid-template-columns:1fr}
  .sidebar{position:static}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media (max-width: 720px){
  .topbar-inner{grid-template-columns:1fr auto}
  .global-search{grid-column:1/-1; order:3}
  .grid-2,.grid-3,.grid-4,.fields,.fields-3{grid-template-columns:1fr}
  .hero-grid{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr}
  .mobile-nav-toggle{display:inline-flex}
  .sidebar{display:none}
  .sidebar.open{display:flex}
  .calendar .day{min-height:72px}
}