/* ============================================================
   BLUEPRINT CONSOLE — deptzy automated marketing department
   DWG NO DL-MA-2900 · REV C
   ============================================================ */

:root{
  --bg:        #0B2330;
  --panel:     #0F2D3D;
  --panel-2:   #123549;
  --ink:       #EAF6FB;
  --sec:       #CFE6EE;
  --cyan:      #5BD0EE;
  --cyan-dim:  rgba(91,208,238,.55);
  --amber:     #FFC24B;
  --amber-dim: rgba(255,194,75,.16);
  --hair:      rgba(207,230,238,.18);
  --hair-soft: rgba(207,230,238,.09);
  --good:      #6FE3B2;
  --chan-blog:   #5BD0EE;
  --chan-social: #6FE3B2;
  --chan-email:  #C7A6F5;
  --chan-video:  #F58FB4;
  --chan-ad:     #FFC24B;
  --disp: "Saira", sans-serif;
  --body: "Inter", sans-serif;
  --mono: "Spline Sans Mono", monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html{ scrollbar-color: var(--cyan-dim) var(--bg); }

body{
  font-family: var(--body);
  background:
    repeating-linear-gradient(0deg,  rgba(91,208,238,.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(90deg, rgba(91,208,238,.05) 0 1px, transparent 1px 120px),
    repeating-linear-gradient(0deg,  rgba(91,208,238,.022) 0 1px, transparent 1px 24px),
    repeating-linear-gradient(90deg, rgba(91,208,238,.022) 0 1px, transparent 1px 24px),
    var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.55;
  min-height: 100vh;
  overflow-x: hidden;
}

a{ color: var(--cyan); text-decoration: none; }
a:hover{ text-decoration: underline; }

:focus-visible{ outline: 2px solid var(--cyan); outline-offset: 2px; border-radius: 2px; }

/* ---------- layout frame ---------- */

.frame{ display:flex; min-height:100vh; }

.sidebar{
  width: 236px; flex-shrink: 0;
  background: linear-gradient(180deg, var(--panel) 0%, var(--bg) 100%);
  border-right: 1px solid var(--hair);
  display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
  padding: 22px 0 18px;
}

.brand{ display:flex; align-items:center; gap:11px; padding: 0 20px 20px; border-bottom: 1px solid var(--hair-soft); }
.brand-text{ display:flex; flex-direction:column; }
.brand-name{ font-family: var(--disp); font-weight:700; font-size:21px; letter-spacing:.02em; line-height:1.1; }
.brand-sub{ font-family: var(--mono); font-size:9.5px; letter-spacing:.24em; color: var(--cyan); margin-top:3px; }

.nav{ display:flex; flex-direction:column; padding: 16px 12px; gap:2px; flex:1; }
.nav-caption{ font-family: var(--mono); font-size:9.5px; letter-spacing:.22em; color: rgba(207,230,238,.5); padding: 0 10px 10px; }
.nav a{
  display:flex; align-items:center; gap:10px;
  font-family: var(--disp); font-weight:500; font-size:14.5px; letter-spacing:.02em;
  color: var(--sec); padding: 9px 10px; border-left: 2px solid transparent; border-radius: 0 3px 3px 0;
}
.nav a:hover{ text-decoration:none; color: var(--ink); background: var(--hair-soft); }
.nav a.active{ color: var(--ink); border-left-color: var(--cyan); background: linear-gradient(90deg, rgba(91,208,238,.12), transparent 80%); }
.nav-num{ font-family: var(--mono); font-size:9.5px; color: var(--cyan-dim); letter-spacing:.08em; width:44px; flex-shrink:0; }
.nav a.active .nav-num{ color: var(--cyan); }
.nav a.nav-gate.active{ border-left-color: var(--amber); background: linear-gradient(90deg, rgba(255,194,75,.13), transparent 80%); }

.gate-badge{
  margin-left:auto; font-family: var(--mono); font-size:11px;
  background: var(--amber); color: #16130A; min-width:20px; height:20px;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius: 10px; padding: 0 6px; font-weight:500;
}
.gate-badge.zero{ background: transparent; color: var(--sec); border:1px solid var(--hair); }

.sidebar-foot{ padding: 14px 20px 0; border-top: 1px solid var(--hair-soft); display:flex; flex-direction:column; gap:10px; }
.client-chip{ display:flex; align-items:baseline; gap:8px; }
.chip-label{ font-family: var(--mono); font-size:9.5px; letter-spacing:.2em; color: rgba(207,230,238,.5); }
.chip-value{ font-family: var(--disp); font-weight:600; font-size:15px; color: var(--cyan); }
.back-link{ font-family: var(--mono); font-size:11.5px; color: var(--sec); }
.back-link:hover{ color: var(--cyan); }

.stage{ flex:1; display:flex; flex-direction:column; min-width:0; }

.topbar{
  display:flex; align-items:center; gap:16px;
  padding: 14px 28px; border-bottom: 1px solid var(--hair);
  background: rgba(15,45,61,.72); backdrop-filter: blur(6px);
  position: sticky; top:0; z-index: 40;
}
.topbar-title{ font-family: var(--disp); font-weight:600; font-size:17px; letter-spacing:.02em; }
.plan-badge{
  margin-left:auto; display:flex; align-items:center; gap:7px;
  font-family: var(--mono); font-size:11.5px; color: var(--sec);
  border: 1px solid var(--hair); padding: 6px 12px; border-radius: 3px;
  background: rgba(11,35,48,.6); white-space: nowrap;
}
.plan-price{ color: var(--ink); font-weight:500; }
.plan-sep{ color: rgba(207,230,238,.35); }
.live-dot{ width:7px; height:7px; border-radius:50%; background: var(--good); box-shadow: 0 0 6px var(--good); animation: pulse 2.4s ease-in-out infinite; }
.live-word{ color: var(--good); }
@keyframes pulse{ 0%,100%{opacity:1} 50%{opacity:.45} }

.menu-btn{ display:none; }

.main{ flex:1; padding: 26px 28px 40px; max-width: 1280px; width:100%; }

.app-foot{
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  padding: 16px 28px 22px; border-top: 1px solid var(--hair-soft);
  color: rgba(207,230,238,.55); font-size: 12.5px;
}
.foot-mono{ font-family: var(--mono); font-size: 10px; letter-spacing:.14em; color: rgba(91,208,238,.5); }
.foot-back{ margin-left:auto; font-family: var(--mono); font-size:11.5px; }

/* ---------- panels: numbered drawings with corner ticks ---------- */

.panel{
  position: relative;
  background: var(--panel);
  border: 1px solid var(--hair);
  border-radius: 3px;
  padding: 18px 20px;
}
.panel::before, .panel::after{
  content:""; position:absolute; width:9px; height:9px; pointer-events:none;
}
.panel::before{ top:-1px; left:-1px; border-top:2px solid var(--cyan); border-left:2px solid var(--cyan); }
.panel::after{ bottom:-1px; right:-1px; border-bottom:2px solid var(--cyan); border-right:2px solid var(--cyan); }
.panel.gate::before{ border-color: var(--amber); }
.panel.gate::after{ border-color: var(--amber); }
.panel.gate{ border-color: rgba(255,194,75,.35); }

.panel-eyebrow{
  font-family: var(--mono); font-size: 10px; letter-spacing:.2em;
  color: var(--cyan); margin-bottom: 6px; display:flex; align-items:center; gap:8px;
}
.panel.gate .panel-eyebrow{ color: var(--amber); }
.panel-eyebrow .rule{ flex:1; height:1px; background: var(--hair-soft); }
.panel h2{ font-family: var(--disp); font-weight:600; font-size: 18px; letter-spacing:.01em; margin-bottom: 4px; }
.panel h3{ font-family: var(--disp); font-weight:600; font-size: 15px; }
.panel-sub{ color: var(--sec); font-size: 13px; margin-bottom: 14px; }

.view-head{ margin-bottom: 22px; }
.view-head .panel-eyebrow{ margin-bottom: 8px; }
.view-head h1{ font-family: var(--disp); font-weight:700; font-size: 26px; letter-spacing:.01em; line-height:1.15; }
.view-head p{ color: var(--sec); font-size: 14px; margin-top: 6px; max-width: 68ch; }

/* ---------- grids ---------- */

.grid{ display:grid; gap: 16px; }
.grid.kpi{ grid-template-columns: repeat(4, 1fr); }
.grid.two{ grid-template-columns: 1.6fr 1fr; }
.grid.roles{ grid-template-columns: repeat(2, 1fr); }
.grid.charts{ grid-template-columns: repeat(2, 1fr); }
.mt{ margin-top: 16px; }

/* ---------- KPI cards ---------- */

.kpi-card .kpi-label{ font-family: var(--mono); font-size: 10px; letter-spacing:.18em; color: var(--sec); }
.kpi-card .kpi-value{ font-family: var(--disp); font-weight:700; font-size: 30px; margin: 6px 0 2px; letter-spacing:.01em; }
.kpi-card .kpi-trend{ font-family: var(--mono); font-size: 11.5px; }
.kpi-trend.up{ color: var(--good); }
.kpi-trend.down{ color: var(--chan-video); }
.kpi-note{ color: rgba(207,230,238,.55); font-size: 11.5px; margin-top: 4px; }
.kpi-spark{ margin-top: 10px; display:block; }

/* ---------- activity feed ---------- */

.feed{ list-style:none; display:flex; flex-direction:column; }
.feed li{
  display:flex; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--hair-soft);
  font-size: 13.5px; color: var(--sec); align-items:baseline;
}
.feed li:last-child{ border-bottom:none; }
.feed .t{ font-family: var(--mono); font-size: 10px; color: rgba(207,230,238,.5); white-space:nowrap; width:88px; flex-shrink:0; letter-spacing:.04em; }
.feed .who{ color: var(--cyan); font-family: var(--mono); font-size: 11px; letter-spacing:.04em; }
.feed .who.human{ color: var(--amber); }
.feed li strong{ color: var(--ink); font-weight:600; }

/* ---------- next actions ---------- */

.next-item{
  display:flex; align-items:center; gap:12px; padding: 11px 12px; margin-bottom: 8px;
  border:1px solid rgba(255,194,75,.3); background: var(--amber-dim); border-radius: 3px;
}
.next-item .ni-type{ font-family: var(--mono); font-size: 9.5px; letter-spacing:.16em; color: var(--amber); width: 62px; flex-shrink:0; }
.next-item .ni-title{ font-size: 13.5px; flex:1; color: var(--ink); }
.next-item a{ font-family: var(--mono); font-size: 11px; white-space:nowrap; }
.all-clear{ color: var(--good); font-size: 13.5px; padding: 10px 0; }
.all-clear .tick{ font-family: var(--mono); }

/* ---------- buttons ---------- */

.btn{
  font-family: var(--mono); font-size: 11.5px; letter-spacing:.06em;
  background: transparent; color: var(--cyan); border: 1px solid var(--cyan-dim);
  padding: 7px 14px; border-radius: 3px; cursor: pointer; transition: background .15s, color .15s;
}
.btn:hover{ background: rgba(91,208,238,.12); }
.btn.primary{ background: var(--cyan); color: #06202C; border-color: var(--cyan); font-weight:500; }
.btn.primary:hover{ background: #7cdcf4; }
.btn.approve{ background: var(--amber); color:#16130A; border-color: var(--amber); font-weight:500; }
.btn.approve:hover{ background: #ffd27a; }
.btn.ghost-amber{ color: var(--amber); border-color: rgba(255,194,75,.45); }
.btn.ghost-amber:hover{ background: rgba(255,194,75,.1); }
.btn.small{ padding: 5px 10px; font-size: 10.5px; }
.btn:disabled{ opacity:.4; cursor: default; }

/* ---------- department roles ---------- */

.role-card .role-head{ display:flex; align-items:flex-start; gap: 12px; margin-bottom: 4px; }
.role-card .role-head h3{ font-size: 16.5px; }
.role-icon{ flex-shrink:0; margin-top:2px; }
.role-desc{ color: var(--sec); font-size: 12.5px; margin-bottom: 12px; }
.role-items{ list-style:none; }
.role-items li{
  padding: 9px 0 9px 14px; border-bottom: 1px dashed var(--hair-soft); font-size: 13px;
  position: relative;
}
.role-items li::before{
  content:""; position:absolute; left:0; top: 16px; width: 6px; height:1px; background: var(--cyan-dim);
}
.role-items li:last-child{ border-bottom:none; }
.role-items .ri-title{ color: var(--ink); font-weight: 500; }
.role-items .ri-meta{ font-family: var(--mono); font-size: 10px; color: rgba(207,230,238,.55); margin-top: 2px; letter-spacing:.04em; }
.role-foot{ display:flex; align-items:center; justify-content:space-between; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hair-soft); }
.set-tag{ font-family: var(--mono); font-size: 9.5px; letter-spacing:.14em; color: rgba(207,230,238,.5); }

/* ---------- status chips ---------- */

.status{
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.1em;
  padding: 2px 7px; border-radius: 2px; display:inline-block; white-space:nowrap;
}
.status.published{ color: var(--good); border:1px solid rgba(111,227,178,.4); }
.status.scheduled{ color: var(--cyan); border:1px solid rgba(91,208,238,.4); }
.status.draft{ color: var(--sec); border:1px solid var(--hair); }
.status.pending{ color: var(--amber); border:1px solid rgba(255,194,75,.45); background: var(--amber-dim); }
.status.approved{ color: var(--good); border:1px solid rgba(111,227,178,.4); }
.status.changes{ color: var(--chan-video); border:1px solid rgba(245,143,180,.4); }
.status.auto{ color: var(--chan-email); border:1px solid rgba(199,166,245,.4); }

/* ---------- calendar ---------- */

.cal-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.cal-day{ background: var(--panel); border:1px solid var(--hair); border-radius:3px; padding: 10px; min-height: 170px; }
.cal-day.today{ border-color: var(--cyan-dim); box-shadow: inset 0 0 0 1px rgba(91,208,238,.25); }
.cal-day-head{ font-family: var(--mono); font-size: 10px; letter-spacing:.14em; color: var(--sec); margin-bottom: 8px; display:flex; justify-content:space-between; }
.cal-day.today .cal-day-head{ color: var(--cyan); }
.cal-item{
  display:block; width:100%; text-align:left; cursor:pointer; border:none; border-left: 3px solid var(--cyan);
  background: var(--panel-2); color: var(--ink); font-family: var(--body); font-size: 11.5px; line-height: 1.35;
  padding: 6px 7px; border-radius: 2px; margin-bottom: 6px;
}
.cal-item:hover{ background: rgba(91,208,238,.14); }
.cal-item .ci-time{ font-family: var(--mono); font-size: 9px; color: rgba(207,230,238,.6); display:block; margin-top:2px; letter-spacing:.06em; }
.cal-legend{ display:flex; gap: 16px; flex-wrap:wrap; margin-top: 14px; font-family: var(--mono); font-size: 10px; letter-spacing:.1em; color: var(--sec); }
.cal-legend span{ display:flex; align-items:center; gap:6px; }
.cal-legend i{ width: 10px; height: 10px; border-radius: 2px; display:inline-block; }

/* ---------- approvals ---------- */

.gate-banner{
  display:flex; align-items:center; gap: 14px; margin-bottom: 18px;
  border: 1px solid rgba(255,194,75,.4); background: var(--amber-dim);
  padding: 13px 16px; border-radius: 3px;
}
.gate-count{ font-family: var(--disp); font-weight:700; font-size: 30px; color: var(--amber); line-height:1; }
.gate-words{ font-size: 13px; color: var(--sec); }
.gate-words strong{ color: var(--ink); display:block; font-family: var(--disp); font-size: 14.5px; letter-spacing:.02em; }

.appr{ margin-bottom: 14px; }
.appr-head{ display:flex; align-items:center; gap: 10px; flex-wrap:wrap; }
.appr-head h3{ flex:1; min-width: 200px; }
.appr-type{ font-family: var(--mono); font-size: 9.5px; letter-spacing:.16em; color: var(--amber); border:1px solid rgba(255,194,75,.4); padding: 2px 8px; border-radius:2px; }
.appr-body{
  margin: 12px 0; padding: 12px 14px; background: rgba(11,35,48,.55);
  border-left: 2px solid var(--hair); font-size: 13px; color: var(--sec); white-space: pre-line;
}
.appr-body em{ color: var(--ink); font-style: normal; font-weight: 600; }
.appr-meta{ font-family: var(--mono); font-size: 10px; color: rgba(207,230,238,.5); letter-spacing:.06em; margin-bottom: 4px; }
.appr-actions{ display:flex; gap: 10px; align-items:center; flex-wrap:wrap; }
.appr-resolved{ font-family: var(--mono); font-size: 11px; }
.appr-resolved.ok{ color: var(--good); }
.appr-resolved.chg{ color: var(--chan-video); }

/* ---------- charts ---------- */

.chart-panel svg{ display:block; width: 100%; height: auto; }
.legend{ display:flex; gap: 16px; flex-wrap: wrap; margin-top: 10px; font-family: var(--mono); font-size: 10px; letter-spacing:.08em; color: var(--sec); }
.legend span{ display:flex; align-items:center; gap: 6px; }
.legend i{ width: 10px; height: 10px; border-radius: 2px; display:inline-block; }

/* ---------- library table ---------- */

.lib-tools{ display:flex; gap: 10px; margin-bottom: 14px; flex-wrap:wrap; }
.lib-tools input, .lib-tools select{
  background: var(--panel); border: 1px solid var(--hair); color: var(--ink);
  font-family: var(--mono); font-size: 12px; padding: 8px 11px; border-radius: 3px;
}
.lib-tools input{ flex: 1; min-width: 180px; }
.lib-tools input::placeholder{ color: rgba(207,230,238,.45); }
.lib-count{ font-family: var(--mono); font-size: 10.5px; color: var(--sec); align-self:center; letter-spacing:.08em; }

.table-wrap{ overflow-x:auto; border: 1px solid var(--hair); border-radius: 3px; }
table.lib{ width: 100%; border-collapse: collapse; min-width: 640px; }
table.lib th{
  font-family: var(--mono); font-size: 9.5px; letter-spacing:.16em; text-align:left;
  color: var(--cyan); padding: 10px 14px; border-bottom: 1px solid var(--hair);
  background: rgba(11,35,48,.6); white-space:nowrap;
}
table.lib td{ padding: 10px 14px; border-bottom: 1px solid var(--hair-soft); font-size: 13px; color: var(--sec); }
table.lib tr:last-child td{ border-bottom: none; }
table.lib tbody tr{ cursor: pointer; }
table.lib tbody tr:hover td{ background: rgba(91,208,238,.07); }
table.lib td.t-title{ color: var(--ink); font-weight: 500; }
.chan-dot{ width: 8px; height: 8px; border-radius: 2px; display:inline-block; margin-right: 7px; vertical-align: 1px; }

/* ---------- connections ---------- */

.conn-meter{ margin-bottom: 18px; }
.conn-meter .cm-label{ font-family: var(--mono); font-size: 11px; letter-spacing:.1em; color: var(--sec); margin-bottom: 8px; display:flex; justify-content:space-between; }
.cm-bar{ height: 8px; background: rgba(11,35,48,.8); border: 1px solid var(--hair); border-radius: 4px; overflow: hidden; }
.cm-fill{ height: 100%; background: linear-gradient(90deg, var(--cyan-dim), var(--cyan)); transition: width .35s ease; }

.conn-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.conn-row{
  display:flex; align-items:center; gap: 14px; padding: 13px 16px;
  background: var(--panel); border: 1px solid var(--hair); border-radius: 3px;
}
.conn-info{ flex: 1; min-width: 0; }
.conn-name{ font-family: var(--disp); font-weight: 600; font-size: 14.5px; }
.conn-desc{ font-size: 12px; color: rgba(207,230,238,.6); }
.conn-state{ font-family: var(--mono); font-size: 9.5px; letter-spacing:.14em; width: 92px; text-align:right; }
.conn-state.on{ color: var(--good); }
.conn-state.off{ color: rgba(207,230,238,.4); }

.switch{ position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.switch input{ opacity: 0; width: 100%; height: 100%; position:absolute; cursor:pointer; z-index:1; margin:0; }
.switch .track{
  position:absolute; inset:0; border-radius: 12px; background: rgba(11,35,48,.9);
  border: 1px solid var(--hair); transition: background .2s, border-color .2s;
}
.switch .track::after{
  content:""; position:absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: var(--sec); transition: transform .2s, background .2s;
}
.switch input:checked + .track{ background: rgba(91,208,238,.25); border-color: var(--cyan-dim); }
.switch input:checked + .track::after{ transform: translateX(20px); background: var(--cyan); }
.switch input:focus-visible + .track{ outline: 2px solid var(--cyan); outline-offset: 2px; }

/* ---------- settings ---------- */

.form-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.field{ display:flex; flex-direction:column; gap: 5px; }
.field.wide{ grid-column: 1 / -1; }
.field label{ font-family: var(--mono); font-size: 10px; letter-spacing:.16em; color: var(--cyan); }
.field input, .field textarea{
  background: rgba(11,35,48,.7); border: 1px solid var(--hair); color: var(--ink);
  font-family: var(--body); font-size: 13.5px; padding: 9px 12px; border-radius: 3px; resize: vertical;
}
.field textarea{ min-height: 68px; }
.field input:focus, .field textarea:focus{ outline: none; border-color: var(--cyan-dim); }

.bill-row{ display:flex; justify-content:space-between; align-items:baseline; padding: 9px 0; border-bottom: 1px dashed var(--hair-soft); font-size: 13px; color: var(--sec); gap: 10px; flex-wrap: wrap; }
.bill-row:last-child{ border-bottom: none; }
.bill-row .inv{ font-family: var(--mono); font-size: 11px; color: var(--cyan); }
.bill-row .amt{ font-family: var(--mono); color: var(--ink); }
.bill-row .paid{ font-family: var(--mono); font-size: 10px; color: var(--good); letter-spacing:.1em; }
.plan-line{ display:flex; align-items:baseline; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.plan-line .big{ font-family: var(--disp); font-weight: 700; font-size: 26px; }
.human-note{
  margin-top: 12px; padding: 10px 13px; border: 1px solid rgba(255,194,75,.35);
  background: var(--amber-dim); border-radius: 3px; font-size: 12.5px; color: var(--sec);
}
.human-note strong{ color: var(--amber); font-family: var(--mono); font-size: 10.5px; letter-spacing:.12em; }

/* ---------- modal + toast ---------- */

.modal-scrim{
  position: fixed; inset: 0; background: rgba(4,16,23,.72); z-index: 90;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
/* An author display value overrides the [hidden] attribute, so the empty modal
   would sit centered on every view. Hide it explicitly when not open. */
.modal-scrim[hidden]{ display: none; }
.modal{ max-width: 560px; width: 100%; max-height: 82vh; overflow-y: auto; box-shadow: 0 18px 60px rgba(0,0,0,.5); }
.modal .modal-close{ position: absolute; top: 12px; right: 12px; }
.modal .appr-body{ white-space: pre-line; }

.toast{
  position: fixed; bottom: 26px; left: 50%; transform: translate(-50%, 16px);
  background: var(--panel-2); border: 1px solid var(--cyan-dim); color: var(--ink);
  font-family: var(--mono); font-size: 12px; letter-spacing:.04em;
  padding: 11px 20px; border-radius: 3px; z-index: 99;
  opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s;
  box-shadow: 0 8px 30px rgba(0,0,0,.45); max-width: min(92vw, 480px); text-align:center;
}
.toast.show{ opacity: 1; transform: translate(-50%, 0); }
.toast.amber{ border-color: rgba(255,194,75,.6); }

/* ---------- this week summary ---------- */

.week-stats{ display:flex; gap: 22px; flex-wrap: wrap; }
.week-stat{ min-width: 110px; }
.week-stat .ws-n{ font-family: var(--disp); font-weight: 700; font-size: 24px; color: var(--cyan); }
.week-stat .ws-l{ font-family: var(--mono); font-size: 9.5px; letter-spacing:.14em; color: var(--sec); }

/* ---------- responsive ---------- */

@media (max-width: 1080px){
  .grid.kpi{ grid-template-columns: repeat(2, 1fr); }
  .grid.two{ grid-template-columns: 1fr; }
  .grid.roles{ grid-template-columns: 1fr; }
  .grid.charts{ grid-template-columns: 1fr; }
  .conn-grid{ grid-template-columns: 1fr; }
  .cal-grid{ grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 760px){
  .frame{ flex-direction: column; }
  .sidebar{
    position: fixed; inset: 0 auto 0 0; z-index: 80; height: 100vh; width: 250px;
    transform: translateX(-100%); transition: transform .25s ease;
    background: var(--panel); box-shadow: 8px 0 40px rgba(0,0,0,.5);
  }
  .sidebar.open{ transform: translateX(0); }
  .menu-btn{
    display: flex; flex-direction: column; gap: 4px; justify-content: center;
    background: transparent; border: 1px solid var(--hair); border-radius: 3px;
    width: 38px; height: 34px; padding: 0 8px; cursor: pointer;
  }
  .menu-btn span{ height: 1.5px; background: var(--cyan); display:block; }
  .topbar{ padding: 12px 16px; }
  .plan-badge{ font-size: 10px; padding: 5px 8px; }
  .main{ padding: 18px 14px 32px; }
  .app-foot{ padding: 14px 16px 20px; }
  .grid.kpi{ grid-template-columns: 1fr 1fr; }
  .cal-grid{ grid-template-columns: 1fr 1fr; }
  .cal-day{ min-height: 0; }
  .form-grid{ grid-template-columns: 1fr; }
  .view-head h1{ font-size: 21px; }
}

@media (max-width: 430px){
  .grid.kpi{ grid-template-columns: 1fr; }
  .cal-grid{ grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation: none !important; transition: none !important; }
}