/* ============================================================
   ULS Agency CRM — brand stylesheet (executive top-nav system)
   Palette: metallic dark teal · eggshell surfaces · charcoal ink
   Typography: Inter (professional, tabular numerals for figures)
   ============================================================ */

:root{
  --teal-900:#073F3E; --teal-800:#0B5C5A; --teal-700:#0E6B68;
  --teal-600:#118883; --teal-500:#14A39E; --teal-100:#DDEEEC; --teal-050:#EFF7F6;
  --egg:#F6F4EE; --card:#FFFFFF; --ink:#23282A; --ink-2:#4A5457; --ink-3:#7A8487;
  --line:#E6E2D8; --line-2:#EDEAE1;
  --good:#16A34A; --good-bg:#EAF7EF; --warn:#B45309; --warn-bg:#FDF3E3;
  --bad:#C2372E;  --bad-bg:#FBEFED;  --info:#1D5FA8; --info-bg:#EBF2FA;
  --shadow:0 1px 2px rgba(20,32,34,.05),0 4px 16px rgba(20,32,34,.06);
  --shadow-lg:0 8px 30px rgba(15,40,42,.14);
  --r:12px; --r-sm:8px;
  --font:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); font-size:14px; line-height:1.5; color:var(--ink);
  background:var(--egg); -webkit-font-smoothing:antialiased;
}
a{color:var(--teal-700); text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{margin:0; font-weight:700; letter-spacing:-.015em}

.ico{width:18px;height:18px;flex:none;vertical-align:-3px}
.ico-xs{width:13px;height:13px}
.ico-lg{width:22px;height:22px}

/* ---------------- Top navigation ---------------- */
.topnav{
  position:sticky; top:0; z-index:60; background:#fff;
  border-bottom:1px solid var(--line);
}
.topnav-inner{
  max-width:1320px; margin:0 auto; padding:0 28px; height:64px;
  display:flex; align-items:center; gap:18px;
}
.brand{display:flex;align-items:center; margin-right:6px}
.brand img{height:36px; width:auto; display:block}
.nav{display:flex; align-items:center; gap:2px; flex:1; min-width:0}
.nav-link{
  display:inline-flex; align-items:center; gap:5px;
  padding:8px 14px; border-radius:999px; border:0; background:transparent;
  font:600 14px/1 var(--font); color:var(--ink-2); cursor:pointer; white-space:nowrap;
}
.nav-link:hover{color:var(--teal-800); background:var(--teal-050); text-decoration:none}
.nav-link.active, .nav-drop.active>.nav-link{
  background:linear-gradient(180deg,var(--teal-600),var(--teal-800)); color:#fff;
}
.nav-drop{position:relative}
.drop-menu{
  position:absolute; top:calc(100% + 8px); left:0; min-width:228px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:6px; display:none; z-index:70;
}
.nav-drop.right .drop-menu{left:auto; right:0}
.nav-drop.open .drop-menu{display:block}
.drop-item{
  display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--r-sm); color:var(--ink); font-weight:500; font-size:13.5px;
}
.drop-item .ico{color:var(--teal-700)}
.drop-item:hover{background:var(--teal-050); text-decoration:none}
.drop-item.active{background:var(--teal-100)}
.drop-item.off{color:var(--ink-3); cursor:default}
.drop-item.off .ico{color:var(--ink-3)}
.drop-item .phase{
  margin-left:auto; font:700 10px/1 var(--font); letter-spacing:.04em;
  background:var(--egg); border:1px solid var(--line); color:var(--ink-3);
  padding:3px 7px; border-radius:999px;
}
.drop-id{padding:10px 12px 8px; border-bottom:1px solid var(--line-2); margin-bottom:4px}
.drop-id-name{font-weight:700}
.drop-id-sub{font-size:12px; color:var(--ink-3)}

.top-actions{display:flex; align-items:center; gap:8px}
.icon-btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:999px; border:0; background:transparent;
  color:var(--ink-2); cursor:pointer;
}
.icon-btn:hover{background:var(--teal-050); color:var(--teal-800)}
.bell-badge{
  position:absolute; top:2px; right:2px; min-width:17px; height:17px; padding:0 4px;
  background:var(--bad); color:#fff; font:700 10.5px/17px var(--font);
  border-radius:999px; text-align:center; border:2px solid #fff;
}
.avatar{
  width:38px; height:38px; border-radius:999px; border:0; cursor:pointer;
  background:linear-gradient(180deg,var(--teal-600),var(--teal-900));
  color:#fff; font:700 13px/1 var(--font); letter-spacing:.02em;
  display:inline-flex; align-items:center; justify-content:center;
}
.nav-toggle{display:none}

/* search */
.search{position:relative; display:flex; align-items:center}
.search input{
  width:0; opacity:0; padding:0; border:0; transition:width .18s ease,opacity .18s ease,padding .18s ease;
  height:38px; border-radius:999px; background:var(--egg); font:500 13.5px var(--font); color:var(--ink);
  outline:none;
}
.search.open input{width:300px; opacity:1; padding:0 14px; border:1px solid var(--line)}
.search input:focus{border-color:var(--teal-500)}
.search-pop{
  display:none; position:absolute; top:calc(100% + 8px); right:0; width:380px; max-height:420px; overflow:auto;
  background:#fff; border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-lg); z-index:80; padding:6px;
}
.search-pop.open{display:block}
.search-pop .sr-kind{font:700 10.5px var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); padding:8px 12px 2px}
.search-pop a{display:block; padding:8px 12px; border-radius:var(--r-sm); color:var(--ink); font-size:13.5px}
.search-pop a:hover{background:var(--teal-050); text-decoration:none}
.search-pop .sr-none{padding:14px; color:var(--ink-3)}

/* ---------------- Page scaffolding ---------------- */
.content{max-width:1320px; margin:0 auto; padding:26px 28px 40px}
.app-foot{
  max-width:1320px; margin:0 auto; padding:14px 28px 26px;
  color:var(--ink-3); font-size:12px; border-top:1px solid var(--line-2);
}
.page-head{display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin:6px 0 22px; flex-wrap:wrap}
.page-title{font-size:28px; font-weight:800; letter-spacing:-.022em}
.page-sub{margin:4px 0 0; color:var(--ink-3); font-size:14.5px}
.page-actions{display:flex; align-items:center; gap:10px}

.btn{
  display:inline-flex; align-items:center; gap:8px; border-radius:10px; cursor:pointer;
  font:600 14px/1 var(--font); padding:11px 16px; border:1px solid var(--line);
  background:#fff; color:var(--ink);
}
.btn:hover{border-color:var(--teal-500); color:var(--teal-800); text-decoration:none}
.btn-primary{
  background:linear-gradient(180deg,var(--teal-500),var(--teal-800));
  border-color:var(--teal-800); color:#fff;
}
.btn-primary:hover{filter:brightness(1.06); color:#fff}
.btn-sm{padding:7px 12px; font-size:13px}
.btn[disabled]{opacity:.5; cursor:not-allowed}
.link-btn{border:0;background:none;color:var(--teal-700);font:600 12.5px var(--font);cursor:pointer;padding:4px}
.link-btn:hover{text-decoration:underline}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:10px;
  border:1px solid var(--line); background:#fff; font:600 13.5px var(--font); color:var(--ink-2);
}

/* ---------------- Cards & grid ---------------- */
.grid{display:grid; gap:18px; min-width:0}
.grid > *{min-width:0}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-main{grid-template-columns:minmax(0,1fr) 360px}
/* Grouped-bands detail layout (staff, consumer) — full-width identity
   then horizontal bands, each holding N cards side by side. Cards top-
   align and share the row; a new feature joins its band. */
.band-label{font:800 10.5px var(--font);letter-spacing:.9px;text-transform:uppercase;color:var(--teal-800);margin:22px 2px 10px;display:flex;align-items:center;gap:12px}
.band-label::after{content:'';flex:1;height:1px;background:var(--line-2)}
.band-label:first-of-type{margin-top:4px}
.band-group{display:grid;gap:18px;align-items:start}
.band-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.band-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.band-group > .card{margin:0}
@media(max-width:980px){.band-3{grid-template-columns:1fr 1fr}}
@media(max-width:720px){.band-2,.band-3{grid-template-columns:1fr}}
.card{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow);
}
.card-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:16px 18px 0;
}
.card-title{font-size:15px; font-weight:700}
.card-sub{font-size:12.5px; color:var(--ink-3); margin-top:2px}
.card-body{padding:16px 18px 18px}
.card-body.flush{padding:8px 0 6px; overflow-x:auto}

/* ---------------- Stat cards (design-system StatCard) ---------------- */
.stat-card{position:relative; padding:16px 18px}
.stat-label{font:600 13px var(--font); color:var(--ink-2)}
.stat-row{display:flex; align-items:flex-end; justify-content:space-between; gap:10px; margin-top:8px}
.stat-value{
  font-size:32px; font-weight:800; letter-spacing:-.03em; line-height:1;
  font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums;
}
.stat-sub{font-size:12.5px; color:var(--ink-3); margin-top:8px}
.stat-spark{width:118px; height:40px; flex:none}
.spark-line{fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.spark-up .spark-line{stroke:var(--good)} .spark-up .spark-fill{fill:url(#sgUp)}
.spark-down .spark-line{stroke:var(--bad)} .spark-down .spark-fill{fill:url(#sgDown)}
.stat-dots{position:absolute; top:12px; right:12px; color:var(--ink-3)}

/* ---------------- Tables ---------------- */
table.tbl{width:100%; border-collapse:collapse}
.tbl th{
  text-align:left; font:700 11px var(--font); letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3); padding:10px 18px; border-bottom:1px solid var(--line-2); white-space:nowrap;
}
.tbl td{padding:12px 18px; border-bottom:1px solid var(--line-2); vertical-align:middle; font-size:13.5px}
.tbl tr:last-child td{border-bottom:0}
.tbl tr:hover td{background:var(--teal-050)}
.tbl .ref{font-weight:700; white-space:nowrap}
.tbl .muted{color:var(--ink-3)}
.t-right{text-align:right}
.nowrap{white-space:nowrap}

.badge{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font:600 11.5px/1.3 var(--font); white-space:nowrap;
  background:var(--egg); color:var(--ink-2); border:1px solid var(--line);
}
.badge.good{background:var(--good-bg); color:var(--good); border-color:transparent}
.badge.grey{background:#EEF0F0;color:#82898d}
.badge.grey{background:#EEF0F0;color:#82898d}
.badge.grey{background:#EEF0F0;color:#82898d}
.badge.warn{background:var(--warn-bg); color:var(--warn); border-color:transparent}
.badge.bad{background:var(--bad-bg); color:var(--bad); border-color:transparent}
.badge.info{background:var(--info-bg); color:var(--info); border-color:transparent}
.badge.teal{background:var(--teal-100); color:var(--teal-800); border-color:transparent}
.flag-noterp{color:var(--bad); font-weight:700; font-size:12px; letter-spacing:.03em}

/* ---------------- Tabs (Task Board) ---------------- */
.tabs{display:flex; gap:6px; padding:14px 18px 0; flex-wrap:wrap}
.tab{
  display:inline-flex; align-items:center; gap:7px; padding:8px 13px; border-radius:999px;
  border:1px solid var(--line); background:#fff; cursor:pointer;
  font:600 13px var(--font); color:var(--ink-2);
}
.tab:hover{border-color:var(--teal-500); color:var(--teal-800)}
.tab.active{background:linear-gradient(180deg,var(--teal-600),var(--teal-800)); border-color:var(--teal-800); color:#fff}
.tab .cnt{
  min-width:20px; padding:1px 6px; border-radius:999px; text-align:center;
  font:700 11px/1.5 var(--font); background:var(--egg); color:var(--ink-2);
}
.tab.active .cnt{background:rgba(255,255,255,.22); color:#fff}
.tab .cnt.c-red{background:var(--bad-bg); color:var(--bad)}
.tab .cnt.c-amber{background:var(--warn-bg); color:var(--warn)}
.tab .cnt.c-blue{background:var(--info-bg); color:var(--info)}
.tab.active .cnt.c-red,.tab.active .cnt.c-amber,.tab.active .cnt.c-blue{background:rgba(255,255,255,.25); color:#fff}
.tab-empty{padding:26px 18px; color:var(--ink-3)}

/* ---------------- KV list (Financial snapshot) ---------------- */
.kv{list-style:none; margin:0; padding:0}
.kv li{display:flex; justify-content:space-between; gap:14px; padding:9px 0; border-bottom:1px solid var(--line-2); font-size:13.5px}
.kv li:last-child{border-bottom:0}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:700; font-feature-settings:"tnum" 1; font-variant-numeric:tabular-nums}
.kv .v.bad{color:var(--bad)} .kv .v.good{color:var(--good)}

/* ---------------- People rows (Top interpreters, Online now) ---------------- */
.person{display:flex; align-items:center; gap:12px; padding:9px 0; border-bottom:1px solid var(--line-2)}
.person:last-child{border-bottom:0}
.p-avatar{
  width:34px; height:34px; border-radius:999px; flex:none;
  background:var(--teal-100); color:var(--teal-800);
  font:700 12px/34px var(--font); text-align:center;
}
.p-main{flex:1; min-width:0}
.p-name{font-weight:600; font-size:13.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.p-sub{font-size:12px; color:var(--ink-3)}
.p-val{font-weight:800; font-size:15px; font-variant-numeric:tabular-nums}
.p-star{display:inline-flex; align-items:center; gap:3px; color:var(--warn); font-weight:700; font-size:12.5px}
.p-star .ico{width:13px; height:13px; fill:currentColor; stroke:none}
.dot-on{width:8px; height:8px; border-radius:99px; background:var(--good); display:inline-block; margin-right:6px}

/* ---------------- Line chart ---------------- */
.chart-wrap{padding:6px 10px 4px}
.chart-legend{display:flex; gap:16px; padding:0 18px 10px; font-size:12.5px; color:var(--ink-2)}
.chart-legend .sw{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:6px; vertical-align:-1px}
.linechart .grid-line{stroke:var(--line-2); stroke-width:1}
.linechart .axis-lbl{font:500 10.5px var(--font); fill:var(--ink-3)}
.linechart .l-req{fill:none; stroke:var(--teal-600); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.linechart .l-com{fill:none; stroke:var(--good); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.linechart .a-req{fill:url(#gReq)} .linechart .dot{fill:#fff; stroke-width:2}

/* ---------------- US choropleth ---------------- */
.usmap{width:100%; height:auto; display:block}
.usmap-state{fill:var(--teal-050); stroke:#fff; stroke-width:1.1; transition:filter .12s}
.usmap-state:hover{filter:brightness(.93)}
.usmap-state.v-low{fill:#CDE6E3}
.usmap-state.v-mid{fill:#58AFA9}
.usmap-state.v-high{fill:var(--teal-800)}
.usmap-label{font:600 10.5px var(--font); fill:var(--ink-3); text-anchor:middle; pointer-events:none}
.usmap-label.sm{font-size:8.5px}
.usmap-state.v-mid + * .usmap-label{fill:#fff}
.map-legend{display:flex; align-items:center; gap:12px; padding:8px 18px 2px; font-size:12px; color:var(--ink-3)}
.map-legend .sw{width:14px; height:10px; border-radius:2px; display:inline-block; margin-right:5px; vertical-align:-1px}

/* ---------------- Compliance alerts ---------------- */
.cred{display:flex; align-items:center; gap:12px; padding:10px 0; border-bottom:1px solid var(--line-2)}
.cred:last-child{border-bottom:0}
.cred .days{margin-left:auto}

/* ---------------- Task list ---------------- */
.task{padding:11px 14px; border:1px solid var(--line-2); border-radius:10px; margin-bottom:10px; background:#fff}
.task.pri-high{border-left:3px solid var(--bad); background:var(--bad-bg)}
.task.pri-normal{border-left:3px solid var(--line)}
.task .t-title{font-weight:600; font-size:13.5px}
.task .t-sub{font-size:12px; color:var(--ink-3); margin-top:2px}
.task .t-pri{float:right; font:700 11px var(--font); color:var(--bad)}

/* ---------------- Build progress ---------------- */
.build li{display:flex; align-items:center; gap:10px; padding:7px 0; font-size:13px}
.build{list-style:none; margin:0; padding:0}
.build .ph{font-weight:800; width:26px; color:var(--teal-800)}
.build .badge{margin-left:auto}

/* ---------------- Modals ---------------- */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(12,26,27,.45); z-index:100;
  display:none; align-items:flex-start; justify-content:center; padding:6vh 16px; overflow:auto;
}
.modal-backdrop.open{display:flex}
.modal{
  width:100%; max-width:620px; background:#fff; border-radius:16px; box-shadow:var(--shadow-lg);
  animation:mIn .16s ease;
}
@keyframes mIn{from{transform:translateY(8px); opacity:0} to{transform:none; opacity:1}}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line-2)}
.modal-title{font-size:17px; font-weight:800; letter-spacing:-.015em}
.modal-body{padding:20px 22px}
.modal-foot{display:flex; justify-content:flex-end; gap:10px; padding:16px 22px; border-top:1px solid var(--line-2)}
.modal .close-x{border:0; background:none; cursor:pointer; color:var(--ink-3); padding:6px; border-radius:8px}
.modal .close-x:hover{background:var(--egg); color:var(--ink)}

.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.form-grid .full{grid-column:1 / -1}
.f-label{display:block; font:600 12.5px var(--font); color:var(--ink-2); margin-bottom:6px}
.f-input,.f-select,.f-textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px;
  font:500 13.5px var(--font); color:var(--ink); background:#fff; outline:none;
}
.f-input:focus,.f-select:focus,.f-textarea:focus{border-color:var(--teal-500); box-shadow:0 0 0 3px rgba(20,163,158,.14)}
.f-textarea{min-height:76px; resize:vertical}
.f-err{color:var(--bad); font-size:12.5px; margin-top:6px; display:none}
.f-err.show{display:block}

.detail-kv{display:grid; grid-template-columns:150px 1fr; gap:8px 16px; font-size:13.5px}
.detail-kv dt{color:var(--ink-3); font-weight:600}
.detail-kv dd{margin:0; font-weight:500}

/* ---------------- Flash / login / errors ---------------- */
.flash{padding:12px 16px; border-radius:10px; margin-bottom:16px; font-weight:600; font-size:13.5px}
.flash.success{background:var(--good-bg); color:var(--good)}
.flash.error{background:var(--bad-bg); color:var(--bad)}
.flash.info{background:var(--info-bg); color:var(--info)}

.auth-wrap{
  min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  background:
    radial-gradient(1100px 500px at 85% -10%, rgba(20,163,158,.16), transparent 60%),
    radial-gradient(900px 480px at -10% 110%, rgba(11,92,90,.14), transparent 55%),
    var(--egg);
}
.auth-card{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:var(--shadow-lg); overflow:hidden;
}
.auth-brand{
  background:linear-gradient(160deg,var(--teal-700) 0%,var(--teal-900) 70%);
  padding:30px 28px; text-align:center;
}
.auth-brand .logo-box{display:inline-block; background:#fff; border-radius:12px; padding:12px 22px}
.auth-brand img{height:44px; display:block}
.auth-brand .sub{color:#CFE7E5; font:600 11.5px var(--font); letter-spacing:.22em; text-transform:uppercase; margin-top:14px}
.auth-body{padding:26px 28px 30px}
.auth-body h1{font-size:19px; margin-bottom:4px}
.auth-body .hint{color:var(--ink-3); font-size:13px; margin:0 0 18px}
.auth-body .f-label{margin-top:14px}
.auth-body .btn{width:100%; justify-content:center; margin-top:20px; padding:12px}
.auth-foot{padding:0 28px 24px; color:var(--ink-3); font-size:12px; text-align:center}

.err-wrap{max-width:520px; margin:12vh auto; text-align:center; padding:0 20px}
.err-code{font-size:56px; font-weight:800; color:var(--teal-800); letter-spacing:-.03em}

/* ---------------- Permission matrix ---------------- */
.matrix-legend{display:flex; align-items:center; gap:16px; color:var(--ink-3); font-size:12.5px; flex-wrap:wrap}
.matrix-legend .ico{color:var(--teal-700)}
.matrix-wrap{overflow:auto; border:1px solid var(--line); border-radius:var(--r); background:#fff; box-shadow:var(--shadow)}
.matrix{border-collapse:collapse; width:100%; min-width:980px}
.matrix th,.matrix td{border-bottom:1px solid var(--line-2); padding:10px 12px; font-size:13px}
.matrix thead th{
  position:sticky; top:0; background:#FBFAF6; z-index:5; text-align:center;
  font:700 12px var(--font); color:var(--ink-2); border-bottom:1px solid var(--line);
}
.matrix thead th:first-child{text-align:left; min-width:280px}
.matrix thead th .locked{display:block; font:600 10px var(--font); color:var(--ink-3); letter-spacing:.06em; text-transform:uppercase}
.matrix td.cat{
  background:var(--teal-050); font:700 11.5px var(--font); letter-spacing:.08em;
  text-transform:uppercase; color:var(--teal-800);
}
.matrix .perm-name{display:flex; align-items:center; gap:9px; font-weight:500}
.matrix .perm-name .ops{display:inline-flex; gap:3px; color:var(--teal-700)}
.matrix .perm-name .ops .ico{width:14px; height:14px}
.matrix .perm-key{display:block; font:500 11px ui-monospace,Menlo,Consolas,monospace; color:var(--ink-3); background:var(--egg); border-radius:5px; padding:2px 7px; margin-top:4px; width:max-content}
.matrix td.cell{text-align:center}
.matrix input[type=checkbox]{width:16px; height:16px; accent-color:var(--teal-700); cursor:pointer}
.matrix input[type=checkbox]:disabled{cursor:not-allowed; opacity:.45}
.savebar{
  position:sticky; bottom:0; z-index:20; display:flex; align-items:center; gap:14px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-lg); padding:12px 16px; margin-top:16px;
}
.savebar .status{color:var(--ink-3); font-size:13px}
.savebar .status.dirty{color:var(--warn); font-weight:700}

/* ---------------- Responsive ---------------- */
@media (max-width:1120px){
  .grid-main{grid-template-columns:minmax(0,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1000px){
  .nav-toggle{display:inline-flex}
  .nav{
    display:none; position:absolute; top:64px; left:0; right:0;
    background:#fff; border-bottom:1px solid var(--line); box-shadow:var(--shadow-lg);
    flex-direction:column; align-items:stretch; padding:10px 16px 16px; gap:4px;
  }
  .nav.open{display:flex}
  .nav-drop{width:100%}
  .nav-link{width:100%; justify-content:space-between; border-radius:10px}
  .drop-menu{position:static; box-shadow:none; border:0; padding-left:14px; min-width:0}
  .search.open input{width:170px}
}
@media (max-width:640px){
  .grid-3{grid-template-columns:1fr}
  .content{padding:18px 16px 32px}
  .topnav-inner{padding:0 14px}
  .page-title{font-size:23px}
  .form-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}

/* ---------------- Notifications menu ---------------- */
.notif-menu{width:340px; padding:0}
.notif-head{display:flex; align-items:center; justify-content:space-between; padding:12px 14px; border-bottom:1px solid var(--line-2)}
.notif-list{max-height:340px; overflow:auto; padding:6px}
.notif-item{padding:10px 10px; border-radius:var(--r-sm)}
.notif-item.unread{background:var(--teal-050)}
.notif-item + .notif-item{margin-top:4px}
.notif-title{font-weight:600; font-size:13px}
.notif-body{font-size:12.5px; color:var(--ink-2); margin-top:2px}
.notif-time{font-size:11.5px; color:var(--ink-3); margin-top:3px}
.notif-empty{padding:22px 14px; color:var(--ink-3); text-align:center; font-size:13px}

.tz-alt{color:var(--ink-3); font-size:.92em; white-space:normal}
.tbl td.when{white-space:normal; min-width:170px}

.muted{color:var(--ink-3)}

/* ---- in-page document viewer ---- */
.docv-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:24px}
.docv{background:#fff;border-radius:12px;width:min(1100px,96vw);height:min(90vh,940px);display:flex;flex-direction:column;box-shadow:0 24px 64px rgba(15,23,42,.35)}
.docv-head{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line)}
.docv-title{font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.docv-body{flex:1;background:#f1f5f9;border-radius:0 0 12px 12px;overflow:auto;display:flex}
.docv-body iframe{border:0;width:100%;height:100%;flex:1}
.docv-body img{max-width:100%;max-height:100%;margin:auto;display:block}
.docv-meta{font-size:12px;white-space:nowrap}
.docv-zoom{display:inline-flex;align-items:center;gap:6px;margin:0 4px}
.docv-zoom-pct{font-size:12px;min-width:38px;text-align:center}
.docv-foot{padding:8px 16px;font-size:11.5px;border-top:1px solid var(--line);border-radius:0 0 12px 12px;background:#fff}

/* ---- network map + directory tooling (2E Part 21) ---- */
.map-tabs{display:flex;gap:6px;flex-wrap:wrap}
.mapTab{padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;color:#4A5457;background:#F6F4EE;border:1px solid var(--line);text-decoration:none}
.mapTab.on{background:linear-gradient(180deg,var(--teal-600),var(--teal-800));border-color:var(--teal-800);color:#fff}
.mapTab.on span{color:#fff;opacity:.85}
.mapTab span{opacity:.75;font-weight:700}
[data-uls-map]{position:relative}
[data-uls-map] svg{width:100%;height:auto;display:block}
.ulsm-peg:hover path{filter:brightness(1.15)}
.ulsm-pulse{animation:ulsmp 1.6s ease-out infinite}
@keyframes ulsmp{0%{r:4;opacity:.9}100%{r:14;opacity:0}}
.ulsm-tip{position:absolute;z-index:30;width:222px;background:#fff;border:1px solid var(--line);border-radius:10px;box-shadow:0 6px 20px rgba(20,32,34,.14);padding:10px 12px;pointer-events:none;font-size:12px;line-height:1.45}
.ulsm-name{font-weight:700;font-size:12.5px}
.ulsm-code{color:var(--ink-3);font-weight:600;font-size:11px}
.ulsm-meta{color:#4A5457}
.ulsm-live{color:#B45309;font-weight:700;margin-top:2px}
.ulsm-oon{color:#7C3AED;font-weight:700;margin-top:2px}
.ulsm-go{color:var(--teal-700);font-weight:700;margin-top:4px}
.az-strip{display:flex;gap:4px;flex-wrap:wrap;padding:8px 16px;border-top:1px solid var(--line-2)}
.az-strip a{min-width:24px;text-align:center;padding:3px 6px;border-radius:6px;font-size:12px;font-weight:600;color:#4A5457;text-decoration:none;border:1px solid transparent}
.az-strip a:hover{background:#F6F4EE}
.az-strip a.on{background:linear-gradient(180deg,var(--teal-600),var(--teal-800));color:#fff}
.pager{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--line-2);font-size:12.5px;color:#4A5457}
.pager a{color:var(--teal-700);font-weight:700;text-decoration:none}
.pager a.dis{color:var(--ink-3);pointer-events:none;font-weight:600}
.pager .f-select{width:auto;padding:4px 8px;font-size:12px}

/* ---- map v2: zoom controls, sourcing panel, folded A-Z (2E Part 21B) ---- */
.ulsm-ctl{position:absolute;top:10px;left:10px;display:flex;gap:6px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:5px 7px;box-shadow:0 2px 8px rgba(20,32,34,.10);z-index:20;white-space:nowrap}
.ulsm-ctl button{height:26px;border-radius:6px;border:1px solid var(--line);background:#F6F4EE;font-weight:700;cursor:pointer;font-size:11.5px;line-height:1;padding:0 10px;width:auto;flex:none;font-family:inherit;color:#23282A}
.ulsm-ctl button.ulsm-sq{width:26px;padding:0;font-size:15px;font-weight:800}
.ulsm-ctl button:hover{background:var(--teal-700);color:#fff;border-color:var(--teal-700)}
.ulsm-sep{width:1px;height:18px;background:var(--line-2);flex:none}
.ulsm-z{font-size:11px;font-weight:700;color:#4A5457;min-width:32px;text-align:center;flex:none}
.ulsm-panel{position:absolute;top:10px;right:10px;width:264px;max-height:88%;overflow:auto;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 8px 26px rgba(20,32,34,.16);z-index:25;font-size:12px}
.ulsm-phead{display:flex;flex-direction:column;gap:2px;padding:10px 12px 6px;position:relative;border-bottom:1px solid var(--line-2)}
.ulsm-px{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:6px;border:1px solid var(--line);background:#F6F4EE;cursor:pointer;font-size:14px;line-height:1}
.ulsm-psub{padding:7px 12px;color:#7A8487;font-size:11px;border-bottom:1px solid var(--line-2)}
.ulsm-prow{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line-2)}
.ulsm-prow:last-child{border-bottom:0}
.ulsm-prank{width:18px;height:18px;border-radius:50%;background:var(--teal-700);color:#fff;font-size:10px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.ulsm-pmain{flex:1;line-height:1.35}
.ulsm-pmi{font-weight:800;color:#073F3E;flex:none}
.ulsm-popen{color:var(--teal-700);font-weight:700;text-decoration:none;flex:none}
.az-fold{display:inline-block;margin:0}
.az-fold>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px;padding:5px 11px;border-radius:999px;font-size:12px;font-weight:600;color:#4A5457;background:#F6F4EE;border:1px solid var(--line);user-select:none}
.az-fold>summary::-webkit-details-marker{display:none}
.az-fold>summary:after{content:'\25BE';font-size:10px;opacity:.7}
.az-fold[open]>summary{background:linear-gradient(180deg,var(--teal-600),var(--teal-800));border-color:var(--teal-800);color:#fff}
.az-fold[open]>summary:after{content:'\25B4'}
.az-fold .az-strip{border-top:0;padding:8px 2px 2px}
.az-on{background:var(--teal-100);color:#0B534F;border-radius:6px;padding:2px 7px;font-weight:700;font-size:11px}

/* ---- map v3: satellite stage (2E Part 21C) ---- */
.ulsm-sat{position:absolute;inset:0;overflow:hidden;background:#0b1b1a;border-radius:inherit;cursor:grab}
.ulsm-sat:active{cursor:grabbing}
.ulsm-tiles{position:absolute;inset:0}
.ulsm-tile{position:absolute;width:256px;height:256px;user-select:none;pointer-events:none}
.ulsm-lines{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}
.ulsm-satpegs{position:absolute;inset:0;z-index:9}
.ulsm-dpeg{position:absolute;transform:translate(-50%,-100%);cursor:pointer;filter:drop-shadow(0 2px 3px rgba(0,0,0,.45))}
.ulsm-dpeg.big{z-index:3}
.ulsm-attr{position:absolute;right:6px;bottom:4px;z-index:10;font-size:9.5px;color:#fff;background:rgba(7,31,30,.55);border-radius:6px;padding:2px 7px;pointer-events:none}
.ulsm-line{stroke:#C2372E;stroke-width:2;stroke-dasharray:5 4;opacity:.9}
.ulsm-mi{font-size:11px;font-weight:800;fill:#fff;stroke:#7a2c22;stroke-width:3;paint-order:stroke;text-anchor:middle}
[data-uls-map]{min-height:300px}

/* ---- map v4: Google hybrid stage + control polish (2E Part 21D) ---- */
.ulsm-g{cursor:default}
.ulsm-gcard{font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.45;max-width:220px}
.ulsm-gcard .ulsm-go{cursor:pointer}
.ulsm-gmi{color:#fff;font-size:11.5px;font-weight:800;text-shadow:0 0 3px #7a2c22,0 0 3px #7a2c22,0 1px 2px rgba(0,0,0,.7)}
.ulsm-load{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#cfe3e0;font-size:12px;font-weight:600;z-index:1;pointer-events:none}

/* ---- Dispatch Desk (2E Part 22) ---- */
.dd-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:10px;margin-bottom:14px}
.dd-tile{display:flex;flex-direction:column;gap:2px;padding:11px 13px;border:1px solid var(--line-2);border-radius:11px;text-decoration:none;color:inherit;background:#fff}
.dd-tile b{font-size:22px;font-weight:800;color:var(--teal-800);line-height:1}
.dd-tile span{font-size:11.3px;color:var(--ink-3);font-weight:600}
.dd-tile.warn{border-color:#F1D9BE;background:#FDF7EE}
.dd-tile.warn b{color:#B45309}
.dd-tile.good{border-color:#CFE9DA;background:#F3FBF6}
.dd-tile.good b{color:#16A34A}
a.dd-tile:hover{border-color:var(--teal-600)}
.dd-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:900px){.dd-cols{grid-template-columns:1fr}}
.dd-h{font-size:10.8px;font-weight:800;letter-spacing:.5px;color:var(--ink-3);margin-bottom:8px}
.dd-empty{font-size:12.5px;color:var(--ink-3);padding:14px;border:1px dashed var(--line);border-radius:10px}
.dd-job{display:block;padding:9px 11px;border:1px solid var(--line-2);border-radius:10px;margin-bottom:8px;text-decoration:none;color:inherit}
.dd-job:hover{border-color:var(--teal-600)}
.dd-job-top{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap;font-size:12.6px}
.dd-exp{margin-left:auto;font-size:11px;font-weight:700;color:#B45309}
.dd-bar{display:flex;height:8px;border-radius:5px;overflow:hidden;background:var(--line-2);margin:7px 0 5px}
.dd-bar i{display:block;height:100%}
.dd-job-sub{font-size:11.3px;color:var(--ink-3)}
.dd-resp{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line-2);font-size:12.4px;line-height:1.5}
.dd-resp:last-child{border-bottom:0}
.dd-dot{width:9px;height:9px;border-radius:50%;background:#9AA4A6;margin-top:5px;flex:none}
.dd-dot.ok{background:#16A34A}.dd-dot.no{background:#C2372E}
.dd-resp-main{flex:1}
.dd-note{color:#7A3B33;font-style:italic}
.dd-resp-meta{font-size:11px;color:var(--ink-3);white-space:nowrap;font-weight:600}

/* ---- Dispatch home + slim dashboard alert (2E Part 22B) ---- */
.da-alert{display:flex;align-items:center;gap:10px;margin:0 0 16px;padding:11px 15px;border:1px solid #F1D9BE;border-left:4px solid #B45309;background:#FDF7EE;border-radius:11px;text-decoration:none;color:#5b4632;font-size:13px}
.da-alert b{color:#8a4d06}
.da-dot{width:9px;height:9px;border-radius:50%;background:#B45309;flex:none;animation:daPulse 2s infinite}
@keyframes daPulse{0%,100%{box-shadow:0 0 0 0 rgba(180,83,9,.35)}50%{box-shadow:0 0 0 6px rgba(180,83,9,0)}}
.da-go{margin-left:auto;font-weight:700;color:#0B534F;white-space:nowrap}
.da-alert:hover{border-color:#B45309}
.dp-strip{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 16px}
.dp-chip{display:inline-flex;gap:6px;align-items:baseline;padding:7px 13px;border:1px solid var(--line-2);border-radius:999px;background:#fff;font-size:12px;color:var(--ink-3);font-weight:600}
.dp-chip b{font-size:15px;color:var(--teal-800);font-weight:800}
.dp-chip.warn{border-color:#F1D9BE;background:#FDF7EE}.dp-chip.warn b{color:#B45309}
.dp-chip.good{border-color:#CFE9DA;background:#F3FBF6}.dp-chip.good b{color:#16A34A}
.dp-split{display:grid;grid-template-columns:5fr 7fr;gap:16px;align-items:start}
@media (max-width:1100px){.dp-split{grid-template-columns:1fr}}
.dp-left .card-body,.dp-right .card-body{max-height:66vh;overflow:auto}
.dp-row{display:flex;gap:12px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-2);border-left:3px solid transparent;cursor:pointer}
.dp-row:last-child{border-bottom:0}
.dp-row.sev-none{border-left-color:#C2372E;background:#FDF6F5}
.dp-row.sev-hot{border-left-color:#B45309}
.dp-row.sev-out{border-left-color:#D9C9A8}
.dp-row.sev-part{border-left-color:#16A34A}
.dp-row.is-sel{outline:2px solid var(--teal-600);outline-offset:-2px;border-radius:8px}
.dp-row-when{width:96px;flex:none;line-height:1.35}
.dp-row-when b{display:block;font-size:12.2px;color:var(--ink)}
.dp-row-when span{font-size:11px;color:var(--ink-3);font-weight:600}
.dp-row-main{flex:1;min-width:0}
.dp-row-top{display:flex;gap:7px;align-items:baseline;font-size:12.8px;flex-wrap:wrap}
.dp-row-top .chip{font-size:10.5px}
.dp-row-sub{font-size:11.6px;color:var(--ink-3);margin-top:2px}
.dp-none{color:#C2372E}
.dp-exp{color:#B45309;font-weight:700}
.dp-row .dd-bar{margin:6px 0 0;max-width:280px}
.dp-row-act{flex:none}
.btn-sm{padding:6px 11px;font-size:12px}
.dp-wknav{display:flex;gap:6px}
.wk-grid{display:grid;grid-template-columns:repeat(7,1fr);min-height:380px}
.wk-day{border-right:1px solid var(--line-2);display:flex;flex-direction:column;min-width:0}
.wk-day:last-child{border-right:0}
.wk-day.today{background:#FBFAF6}
.wk-head{display:flex;gap:5px;align-items:baseline;padding:9px 10px;border-bottom:1px solid var(--line-2);font-size:12px;position:sticky;top:0;background:inherit;z-index:2}
.wk-day.today .wk-head b{color:var(--teal-800)}
.wk-head span{color:var(--ink-3)}
.wk-need{margin-left:auto;font-style:normal;font-size:10.3px;font-weight:800;color:#B45309;background:#FDF3E3;border-radius:6px;padding:1px 6px}
.wk-col{padding:8px;display:flex;flex-direction:column;gap:6px}
.wk-quiet{color:var(--line);text-align:center;padding:16px 0}
.wk-blk{display:flex;gap:6px;align-items:baseline;padding:6px 8px;border-radius:8px;border:1px solid var(--line-2);border-left-width:4px;font-size:11.3px;text-decoration:none;color:var(--ink);background:#fff;min-width:0}
.wk-blk b{font-weight:800;font-size:10.8px;white-space:nowrap}
.wk-blk span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2);font-weight:600}
.wk-blk i{margin-left:auto;font-style:normal;font-size:9px;font-weight:800;color:#7C3AED}
.wk-blk.is-sel{outline:2px solid var(--teal-600);outline-offset:-1px}
.wk-none{border-left-color:#C2372E;background:#FDF6F5}
.wk-out{border-left-color:#B45309;background:#FDF9F0}
.wk-part{border-left-color:#65B48B;background:#F6FBF8}
.wk-set{border-left-color:var(--teal-600);background:#F2F8F7}
.wk-live{border-left-color:#7C3AED;background:#F8F5FE}
.wk-done{border-left-color:#C8CFD0;background:#FAFAF9;opacity:.75}
.wk-key{display:inline-block;border-radius:5px;padding:1px 7px;font-size:10.3px;font-weight:700;border-left:3px solid;margin-right:2px}

/* ---- 22C: calendar-primary layout, engine chips, client-notice flow ---- */
.dp-split{grid-template-columns:minmax(0,1fr) 380px}
@media (max-width:1100px){.dp-split{grid-template-columns:1fr}}
.dp-row{position:relative}
.dp-row-hit{position:absolute;inset:0;z-index:1}
.dp-row-act,.dq-chips,.dp-row .chip{position:relative;z-index:2}
.dp-row.compact{padding:9px 12px}
.dp-row.compact .dp-row-when{width:76px}
.dp-row.compact .dp-row-when b{font-size:11.4px}
.card-foot{padding:10px 14px;border-top:1px solid var(--line-2);text-align:center}
.dq-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px;position:relative}
.dqc{display:inline-flex;align-items:center;border-radius:6px;padding:2.5px 8px;font-size:10.6px;font-weight:700;letter-spacing:.15px}
.dqc.bad{background:#FDF6F5;color:#C2372E;border:1px solid #F1D3CF}
.dqc.ok{background:#F3FBF6;color:#16A34A;border:1px solid #CFE9DA}
.dqc.wave{background:var(--teal-100,#DDEEEC);color:var(--teal-800,#0B534F);border:1px solid #C6E0DD}
.dqc.next{background:#FDF3E3;color:#B45309;border:1px solid #F1D9BE}
.dqc.note{background:#F4F3EF;color:var(--ink-3);border:1px solid var(--line-2)}
.dqc.noted{background:#F3FBF6;color:#15803D;border:1px solid #CFE9DA}
.dqc.act{background:#0E6B68;color:#fff;border:1px solid #0E6B68;cursor:pointer}
.dqc.act:hover{background:#0B534F}
.cn-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;z-index:30;background:#fff;border:1px solid var(--line-2);border-radius:10px;box-shadow:0 10px 28px rgba(20,32,34,.16);padding:10px;min-width:220px;flex-direction:column;gap:5px}
.cn-menu.open{display:flex}
.cn-menu b{font-size:10.6px;color:var(--ink-3);font-weight:700;margin-bottom:2px}
.cn-menu button{text-align:left;padding:7px 10px;border:1px solid var(--line-2);border-radius:8px;background:#fff;font-size:12px;font-weight:600;color:var(--ink);cursor:pointer;font-family:inherit}
.cn-menu button:hover{border-color:var(--teal-600);background:#F6FBFA}

/* ---- 22D: the Jobber pattern — calendar dominant, 1/3 alert rail ---- */
.dp-shell{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,32%);gap:18px;align-items:start}
@media (max-width:1100px){.dp-shell{grid-template-columns:1fr}}
.dp-stage .card{margin:0}
.dp-stage .wk-grid{min-height:560px}
.dp-stage .wk-head{padding:11px 10px;font-size:12.6px}
.dp-stage .wk-head b{font-size:13px}
.dp-stage .wk-head span{font-size:12px}
.dp-stage .wk-day{background:linear-gradient(180deg,#fff 0,#fff 42px,#FBFAF7 42px)}
.dp-stage .wk-day.today{background:linear-gradient(180deg,#F4FAF9 0,#F4FAF9 42px,#EFF7F6 42px)}
.dp-stage .wk-blk{padding:7px 9px;font-size:11.7px}
.dp-rail{display:flex;flex-direction:column;gap:16px;min-width:0}
.dp-rail .card{margin:0}
.dp-rail .card-body{max-height:none}
.rail-count{display:inline-block;min-width:20px;text-align:center;background:#FDF3E3;color:#B45309;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:800;vertical-align:2px;margin-left:4px}
.rr{display:flex;gap:10px;align-items:flex-start;padding:11px 14px;border-bottom:1px solid var(--line-2);text-decoration:none;color:inherit}
.rr:last-child{border-bottom:0}
.rr:hover{background:#FBFAF7}
.rr.is-sel{outline:2px solid var(--teal-600);outline-offset:-2px;border-radius:8px}
.rr-dot{width:9px;height:9px;border-radius:50%;flex:none;margin-top:5px}
.rr-dot.red{background:#C2372E;box-shadow:0 0 0 3px #FDF6F5}
.rr-dot.amber{background:#B45309;box-shadow:0 0 0 3px #FDF3E3}
.rr-dot.green{background:#16A34A;box-shadow:0 0 0 3px #F3FBF6}
.rr-main{flex:1;min-width:0;line-height:1.45}
.rr-main b{display:block;font-size:12.6px;color:var(--ink)}
.rr-main span{display:block;font-size:11.6px;color:var(--ink-3)}
.rr-chev{color:var(--line);font-size:20px;line-height:1;margin-top:2px}
.rr:hover .rr-chev{color:var(--teal-700)}
.dp-rail .dd-resp{padding:9px 0}

/* ---- 22D.1: the calendar is the stage — full-height, unmissable ---- */
.dp-shell{grid-template-columns:minmax(0,1fr) 320px}
@media (max-width:860px){.dp-shell{grid-template-columns:1fr !important}}
.dp-stage .wk-grid{min-height:70vh}
.dp-stage .wk-head{padding:13px 12px}
.dp-stage .wk-head b{font-size:15px}
.dp-stage .wk-head span{font-size:13.5px}
.dp-stage .wk-col{padding:10px;gap:8px}
.dp-stage .wk-blk{padding:9px 11px;font-size:12.4px;border-left-width:5px}
.dp-stage .wk-blk b{font-size:12px}
.dp-stage .card-title{font-size:16px}
.dp-rail .card-head{padding-bottom:2px}

/* ---- 22E: the band under the calendar — runboard, notebook, pulse ---- */
.dp-pulse{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.dp-pulse .dp-chip b{margin-right:4px;color:var(--teal-800)}
.dp-band{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:14px}
@media (max-width:980px){.dp-band{grid-template-columns:1fr}}
.dp-band .card{margin:0}
.rb-row{display:flex;gap:12px;align-items:center;padding:10px 14px;border-bottom:1px solid var(--line-2);text-decoration:none;color:inherit}
.rb-row:last-child{border-bottom:0}
.rb-row:hover{background:#FBFAF7}
.rb-time{width:64px;flex:none;font-size:12.4px;color:var(--teal-800)}
.rb-main{flex:1;min-width:0;line-height:1.4}
.rb-main>b{display:block;font-size:12.6px}
.rb-main span{display:block;font-size:11.6px;color:var(--ink-3)}
.rb-pill{flex:none;font-size:10.6px;font-weight:800;padding:3px 9px;border-radius:999px;background:#F4F3EF;color:var(--ink-3);border:1px solid var(--line-2)}
.rb-pill.ok{background:#F3FBF6;color:#15803D;border-color:#CFE9DA}
.rb-pill.live{background:#F3EEFB;color:#6D28D9;border-color:#E2D8F5}
.rb-pill.done{background:#F4F3EF;color:#7A8487}
.rb-pill.open{background:#FDF6F5;color:#C2372E;border-color:#F1D3CF}
.dn-form{display:flex;gap:8px;padding:10px 14px;border-bottom:1px solid var(--line-2)}
.dn-form select{flex:0 0 180px;max-width:40%;padding:7px 9px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:12px;background:#fff}
.dn-form input{flex:1;min-width:0;padding:7px 11px;border:1px solid var(--line-2);border-radius:8px;font:inherit;font-size:12.4px}
.dn-form input:focus,.dn-form select:focus{outline:none;border-color:var(--teal-600)}
.dn-row{padding:10px 14px;border-bottom:1px solid var(--line-2)}
.dn-row:last-child{border-bottom:0}
.dn-top{display:flex;justify-content:space-between;gap:10px;font-size:11.4px;margin-bottom:3px}
.dn-top b{color:var(--teal-800);font-size:12px}
.dn-top span{color:var(--ink-3)}
.dn-body{font-size:12.6px;line-height:1.5;color:var(--ink)}