/* ═══ BACKWARD COMPATIBILITY — Old variable names → New values ═══ */
:root{
  --text:var(--tx);--text2:var(--t2);--text3:var(--t3);--text4:var(--t4);
  --surface:var(--sf);--surface2:var(--sf2);--surface3:var(--sf3);
  --border:var(--bd);--border2:var(--bd);
  --accent:var(--ac);--accent2:var(--ac2);
  --green:var(--gn);--blue:var(--bl);--amber:var(--am);--rose:var(--rs);--red:var(--rs);--violet:var(--vi);
  --font:var(--fn);--font-serif:var(--se);
  --ease:var(--ez);
  --radius-sm:var(--r);--radius:var(--rl);--radius-xl:var(--rx);
}
/* ════════════════════════════════════════════════════════════════════════════
   ARCADIA CONTENT ENGINE — Executive Design System (Phase 4)
   Aesthetic: Luxury editorial × precision tooling
   Font: DM Sans (UI) + Instrument Serif (display)
   ════════════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600;9..40,700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* Warm charcoal base */
  --bg:#07080a;--bg2:#0c0d0f;--bg3:#101113;
  --sf:#141312;--sf2:#181716;--sf3:#1c1b1a;
  /* Borders — warm parchment undertone */
  --bd:rgba(240,225,205,.035);--bd2:rgba(240,225,205,.015);--bdh:rgba(240,225,205,.065);--bda:rgba(184,114,74,.12);
  /* Text — warm cream */
  --tx:#e8e2d8;--t2:#948f84;--t3:#5a564e;--t4:#332f2a;
  /* Accent — muted terracotta */
  --ac:#b8724a;--ac2:#c4825c;--acs:rgba(184,114,74,.05);--acg:rgba(184,114,74,.1);
  /* Semantic — all softened */
  --gn:#349858;--gns:rgba(52,152,88,.05);
  --bl:#4a82c0;--bls:rgba(74,130,192,.05);
  --am:#b89a3c;--ams:rgba(184,154,60,.05);
  --rs:#b84848;--rss:rgba(184,72,72,.035);
  --vi:#7a5aaa;--vis:rgba(122,90,170,.05);
  /* Type */
  --fn:'DM Sans',system-ui,sans-serif;
  --se:'Instrument Serif',Georgia,serif;
  /* Radii */
  --r:8px;--rl:12px;--rx:16px;
  /* Motion */
  --ez:cubic-bezier(.16,1,.3,1);
  --fast:.12s;--med:.2s;
}

/* ── Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--fn);background:var(--bg);color:var(--tx);font-size:13px;line-height:1.5;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow:hidden;height:100vh}

/* Grain texture */
body::after{content:'';position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.006;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
/* Warm ambient glow */
body::before{content:'';position:fixed;top:-30%;left:-15%;width:55%;height:55%;background:radial-gradient(circle,rgba(184,114,74,.015),transparent 60%);pointer-events:none;z-index:0}

::-webkit-scrollbar{width:2px;height:2px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(184,114,74,.06);border-radius:4px}
::-webkit-scrollbar-thumb:hover{background:rgba(184,114,74,.12)}

/* ── SVG icon base ── */
.ic-svg{width:16px;height:16px;stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0;opacity:.4}

/* ════════════════════════════════════════════════════════════════════════════
   API / LOGIN SCREENS
   ════════════════════════════════════════════════════════════════════════════ */
#api-screen,#login-screen{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:40px;position:relative;z-index:1}
.api-box{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rx);padding:56px 48px;max-width:420px;width:100%;text-align:center;box-shadow:0 12px 64px rgba(0,0,0,.4),0 0 0 1px rgba(240,225,205,.01)}
.api-logo{font-size:9px;letter-spacing:5px;color:var(--ac);text-transform:uppercase;margin-bottom:18px;font-weight:500}
.api-h1{font-family:var(--se);font-size:28px;color:var(--tx);margin-bottom:10px;font-style:italic;letter-spacing:-.5px}
.api-sub{font-size:13px;color:var(--t2);line-height:1.75;margin-bottom:32px;font-weight:300}
.api-note{font-size:11px;color:var(--t3);margin-top:18px;line-height:1.7}
.api-note a{color:var(--ac);text-decoration:none}
.api-note a:hover{text-decoration:underline}

/* ════════════════════════════════════════════════════════════════════════════
   APP LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
#app{display:none;position:relative;z-index:1}
.app-shell{display:flex;height:100vh}

/* ════════════════════════════════════════════════════════════════════════════
   SIDEBAR
   ════════════════════════════════════════════════════════════════════════════ */
.sb{width:220px;background:var(--bg2);border-right:1px solid var(--bd);display:flex;flex-direction:column;flex-shrink:0}
.sb-top{padding:28px 20px 24px}
.sb-logo{display:flex;align-items:center;gap:11px}
.sb-mark{width:30px;height:30px;border-radius:8px;background:var(--ac);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff}
.sb-name{font-size:15px;font-weight:600;color:var(--tx);letter-spacing:-.4px}
.sb-ver{font-size:7px;color:var(--t4);font-weight:600;letter-spacing:3px;text-transform:uppercase;margin-top:4px;padding-left:41px}

.sb-nav{flex:1;overflow-y:auto;padding:0 10px;position:relative}
.sb-nav::after{content:'';position:sticky;bottom:0;left:0;right:0;height:40px;background:linear-gradient(transparent,var(--bg2));pointer-events:none;display:block}

.sb-gl{font-size:9px;letter-spacing:2.5px;color:var(--t4);text-transform:uppercase;font-weight:500;padding:24px 10px 8px}

.sb-lk{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:7px;color:var(--t3);font-size:12.5px;font-weight:400;cursor:pointer;transition:all .2s var(--ez);position:relative;margin-bottom:0;border:none;background:none;width:100%;text-align:left;font-family:var(--fn)}
.sb-lk:hover{color:var(--t2);background:rgba(240,225,205,.012)}
.sb-lk.on{color:var(--tx);background:rgba(240,225,205,.025);font-weight:500}
.sb-lk.on::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:1.5px;height:14px;background:var(--ac);border-radius:1px;transition:all .2s var(--ez)}
.sb-lk .i{font-size:13px;width:16px;text-align:center;opacity:.4;transition:opacity .15s}
.sb-lk:hover .i{opacity:.5}
.sb-lk.on .i{opacity:.7}
.sb-lk .n{margin-left:auto;font-size:9px;font-weight:600;color:var(--t4);background:rgba(240,225,205,.025);padding:1px 6px;border-radius:4px;font-variant-numeric:tabular-nums}
.sb-lk.on .n{color:var(--ac);background:var(--acs)}

.sb-ft{padding:16px 14px;border-top:1px solid var(--bd)}
.sb-u{display:flex;align-items:center;gap:10px;padding:2px 0}
.sb-av{width:30px;height:30px;border-radius:8px;background:var(--sf3);border:1px solid var(--bd);display:flex;align-items:center;justify-content:center;color:var(--t2);font-size:10px;font-weight:600}
.sb-un{font-size:12px;font-weight:500;color:var(--tx)}
.sb-ur{font-size:10px;color:var(--t4)}
.sb-dot{width:6px;height:6px;border-radius:50%;background:var(--gn);margin-left:auto;box-shadow:0 0 4px rgba(52,152,88,.25)}

/* ════════════════════════════════════════════════════════════════════════════
   TOPBAR
   ════════════════════════════════════════════════════════════════════════════ */
.mn{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tb{height:52px;background:var(--bg);border-bottom:1px solid var(--bd);display:flex;align-items:center;padding:0 32px;gap:14px;flex-shrink:0;z-index:10}
.tb-t{font-size:13px;font-weight:500;color:var(--t2)}
.tb-t span{color:var(--t4);font-weight:300;margin-left:6px;font-size:11px}
.tb-s{flex:1}
.tb-cmd{display:flex;align-items:center;gap:6px;background:var(--sf);border:1px solid var(--bd);border-radius:6px;padding:5px 14px;color:var(--t4);font-size:11px;cursor:pointer;min-width:170px;transition:all .12s}
.tb-cmd:hover{border-color:var(--bdh);color:var(--t3)}
.tb-cmd:focus{border-color:rgba(184,114,74,.12);box-shadow:0 0 0 2px rgba(184,114,74,.06)}
.tb-cmd kbd{font-size:9px;background:rgba(240,225,205,.02);padding:1px 5px;border-radius:3px;font-family:var(--fn);color:var(--t4);border:1px solid var(--bd);margin-left:auto}
.tb-ic{width:32px;height:32px;border-radius:6px;display:flex;align-items:center;justify-content:center;color:var(--t4);font-size:14px;cursor:pointer;transition:all .12s;border:none;background:none;font-family:var(--fn)}
.tb-ic:hover{background:rgba(240,225,205,.02);color:var(--t3)}

/* ════════════════════════════════════════════════════════════════════════════
   CONTENT AREA
   ════════════════════════════════════════════════════════════════════════════ */
#main{flex:1;overflow-y:auto;padding:36px 40px 80px}

/* Panel system with stagger */
.panel{display:none}
.panel.on{display:block;animation:panelIn .4s var(--ez)}
@keyframes panelIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ════════════════════════════════════════════════════════════════════════════
   FORMS
   ════════════════════════════════════════════════════════════════════════════ */
label.lbl{display:block;font-size:9px;font-weight:500;letter-spacing:2px;color:var(--t4);text-transform:uppercase;margin-bottom:6px}
input,select,textarea{width:100%;background:var(--bg);border:1px solid var(--bd);border-radius:var(--r);padding:10px 14px;color:var(--tx);font-size:12px;font-family:var(--fn);outline:none;transition:border-color var(--fast),box-shadow var(--fast)}
input:focus,select:focus,textarea:focus{border-color:rgba(184,114,74,.18);box-shadow:0 0 0 2px rgba(184,114,74,.04)}
input::placeholder,textarea::placeholder{color:var(--t4)}
select{cursor:pointer}
select option{background:var(--bg2);color:var(--tx)}
textarea{resize:vertical;min-height:72px;line-height:1.7}

/* ════════════════════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════════════════════ */
.btn-go{display:flex;align-items:center;justify-content:center;gap:8px;background:var(--ac);border:none;border-radius:var(--r);padding:13px 20px;color:#fff;font-size:12px;font-weight:600;cursor:pointer;font-family:var(--fn);width:100%;transition:all var(--med) var(--ez);box-shadow:0 2px 16px rgba(184,114,74,.12)}
.btn-go:hover{background:#a06638;transform:translateY(-1px);box-shadow:0 8px 28px rgba(184,114,74,.15)}
.btn-go:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}

.btn-api{background:var(--ac);border:none;border-radius:var(--r);padding:14px 20px;color:#fff;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--fn);width:100%;transition:all var(--med);box-shadow:0 2px 16px rgba(184,114,74,.12)}
.btn-api:hover{background:#a06638;transform:translateY(-1px)}

.btn-sm{background:transparent;border:1px solid var(--bd);border-radius:6px;padding:5px 12px;color:var(--t2);font-size:11px;font-weight:400;cursor:pointer;font-family:var(--fn);transition:all var(--fast);white-space:nowrap}
.btn-sm:hover{color:var(--tx);border-color:var(--bdh);background:rgba(240,225,205,.01)}

.btn-key{font-size:11px;font-weight:400;color:var(--t3);cursor:pointer;background:transparent;border:1px solid var(--bd);border-radius:6px;padding:5px 12px;font-family:var(--fn);transition:all var(--fast)}
.btn-key:hover{color:var(--t2);border-color:var(--bdh)}

.btn-icon{background:transparent;border:1px solid var(--bd);border-radius:6px;padding:5px 9px;color:var(--t2);font-size:12px;cursor:pointer;font-family:var(--fn);transition:all var(--fast)}
.btn-icon:hover{color:var(--ac);border-color:var(--bda);background:var(--acs)}

.btn-save{background:var(--acs);border:1px solid rgba(184,114,74,.12);border-radius:6px;padding:5px 12px;color:var(--ac);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--fn);transition:all var(--fast)}
.btn-save:hover{background:var(--acg)}

.btn-green{background:var(--gns);border:1px solid rgba(52,152,88,.1);border-radius:6px;padding:5px 12px;color:var(--gn);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--fn);transition:all var(--fast)}
.btn-green:hover{background:rgba(52,152,88,.08)}

.btn-blue{background:var(--bls);border:1px solid rgba(74,130,192,.1);border-radius:6px;padding:5px 12px;color:var(--bl);font-size:11px;font-weight:500;cursor:pointer;font-family:var(--fn);transition:all var(--fast)}
.btn-blue:hover{background:rgba(74,130,192,.08)}

/* ════════════════════════════════════════════════════════════════════════════
   LAYOUT
   ════════════════════════════════════════════════════════════════════════════ */
.two-col{display:grid;grid-template-columns:340px 1fr;gap:24px}
.three-col{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.two-eq{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.two-sm{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.fcol{display:flex;flex-direction:column;gap:14px}
@media(max-width:1000px){.two-col,.two-eq,.three-col{grid-template-columns:1fr}}

/* ════════════════════════════════════════════════════════════════════════════
   CARDS
   ════════════════════════════════════════════════════════════════════════════ */
.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:20px;margin-bottom:12px;transition:border-color var(--med) var(--ez)}
.card:hover{border-color:var(--bdh)}

.post-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:18px;margin-bottom:12px;transition:all var(--med) var(--ez);border-top-width:2px}
.post-card:hover{border-color:rgba(184,114,74,.1);box-shadow:0 4px 24px rgba(0,0,0,.2)}
.post-hdr{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;gap:12px}
.post-pill{font-size:9px;font-weight:700;letter-spacing:2px;text-transform:uppercase}
.post-meta{font-size:11px;color:var(--t3);margin-top:3px}
.post-body{font-size:13px;color:var(--t2);line-height:1.85;white-space:pre-wrap}
.post-actions{display:flex;gap:5px;flex-wrap:wrap;align-items:center}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{background:transparent;border:1px solid var(--bd);border-radius:100px;padding:4px 14px;font-size:11px;color:var(--t3);cursor:pointer;font-family:var(--fn);font-weight:400;transition:all var(--fast)}
.chip:hover,.chip.on{background:var(--acs);border-color:rgba(184,114,74,.1);color:var(--ac)}

/* Pillar buttons */
.pbtn{width:100%;background:transparent;border:1px solid var(--bd);border-left:2.5px solid transparent;border-radius:var(--r);padding:11px 14px;cursor:pointer;display:flex;align-items:center;gap:10px;text-align:left;font-family:var(--fn);margin-bottom:5px;transition:all var(--fast) var(--ez)}
.pbtn:hover{background:rgba(240,225,205,.008)}

/* Dashboard stats */
.dash-stat{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:24px 22px;text-align:center;transition:all var(--med) var(--ez)}
.dash-stat:hover{border-color:var(--bdh)}
.dash-stat:hover .dash-n{color:var(--ac2)}
.dash-n{font-family:var(--se);font-size:28px;color:var(--tx);line-height:1;letter-spacing:-1.2px;transition:color var(--med)}
.dash-l{font-size:9px;font-weight:500;color:var(--t3);letter-spacing:1.5px;text-transform:uppercase;margin-top:8px}

/* Health rows */
.health-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-bottom:1px solid var(--bd2);cursor:pointer;transition:all .1s;border-radius:6px}
.health-row:last-child{border-bottom:none}
.health-row:hover{background:rgba(240,225,205,.006)}
.health-dot{width:4px;height:4px;border-radius:50%;flex-shrink:0}

/* Queue items */
.queue-item{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:14px 16px;margin-bottom:8px;border-left:3px solid var(--ac);transition:all var(--fast) var(--ez)}
.queue-item:hover{box-shadow:0 2px 12px rgba(0,0,0,.15)}
.queue-status-draft{border-left-color:var(--t3)}
.queue-status-approved{border-left-color:var(--gn)}
.queue-status-needs-edit{border-left-color:var(--rs)}

/* Facility cards */
.fac-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:16px;transition:all var(--med) var(--ez)}
.fac-card:hover{border-color:rgba(184,114,74,.1);transform:translateY(-1px);box-shadow:0 4px 20px rgba(0,0,0,.15)}

/* Calendar */
.cal-year-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.cal-month-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rl);padding:16px}
.cal-month-name{font-size:10px;font-weight:700;color:var(--tx);margin-bottom:12px;letter-spacing:2px;text-transform:uppercase}
.cal-event{display:flex;align-items:flex-start;gap:10px;padding:6px 0;border-bottom:1px solid var(--bd2);cursor:pointer;transition:all var(--fast)}
.cal-event:last-child{border-bottom:none}
.cal-event:hover .cal-event-name{color:var(--ac)}
.cal-event-day{font-size:10px;color:var(--ac);font-weight:700;min-width:28px;flex-shrink:0}
.cal-event-name{font-size:11px;color:var(--t2);line-height:1.5}
.cal-event-badge{font-size:9px;border-radius:3px;padding:1px 5px;margin-left:4px}

/* ════════════════════════════════════════════════════════════════════════════
   MODALS
   ════════════════════════════════════════════════════════════════════════════ */
.modal-bg{display:none;position:fixed;inset:0;background:rgba(0,0,0,.65);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:100;align-items:center;justify-content:center;padding:20px}
.modal-bg.open{display:flex;animation:fadeIn .2s ease}
.modal{background:var(--bg3);border:1px solid var(--bdh);border-radius:var(--rx);padding:28px;max-width:640px;width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 16px 64px rgba(0,0,0,.5)}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

/* ════════════════════════════════════════════════════════════════════════════
   MISC COMPONENTS
   ════════════════════════════════════════════════════════════════════════════ */
.empty{min-height:200px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--bd);border-radius:var(--rl);color:var(--t4);gap:10px;font-size:12px}
.loading-box{min-height:200px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(184,114,74,.08);border-radius:var(--rl);background:rgba(184,114,74,.015);text-align:center;color:var(--ac)}
@keyframes spin{to{transform:rotate(360deg)}}
.spinner{display:inline-block;animation:spin 1.2s linear infinite;font-size:22px;margin-bottom:8px}

.season-banner{background:var(--vis);border:1px solid rgba(122,90,170,.1);border-radius:var(--r);padding:14px 18px;margin-bottom:18px}

.ht-chip{background:var(--bls);border:1px solid rgba(74,130,192,.08);border-radius:100px;padding:3px 10px;font-size:10px;font-weight:500;color:var(--bl);cursor:pointer;display:inline-block;margin:2px;transition:all var(--fast)}
.ht-chip:hover{background:rgba(74,130,192,.1)}

.vault-text{font-size:12px;color:var(--t2);line-height:1.75;max-height:78px;overflow:hidden;position:relative}
.vault-text.expanded{max-height:none}
.vault-fade{position:absolute;bottom:0;left:0;right:0;height:30px;background:linear-gradient(transparent,var(--sf))}

.review-link{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:500;color:var(--bl);text-decoration:none;background:var(--bls);border:1px solid rgba(74,130,192,.08);border-radius:6px;padding:4px 10px;cursor:pointer;transition:all var(--fast)}
.review-link:hover{background:rgba(74,130,192,.1)}

.ibox{border-radius:var(--r);padding:16px}
.ibox-blue{background:var(--bls);border:1px solid rgba(74,130,192,.1)}
.ibox-orange{background:var(--acs);border:1px solid rgba(184,114,74,.1)}
.ibox-green{background:var(--gns);border:1px solid rgba(52,152,88,.1)}
.ibox-purple{background:var(--vis);border:1px solid rgba(122,90,170,.1)}

.ai-topic-card{border-radius:var(--r);padding:12px 14px;cursor:pointer;transition:all var(--fast) var(--ez);border:1px solid var(--bd);border-left-width:2.5px;background:transparent;margin-bottom:6px}
.ai-topic-card:hover{background:rgba(240,225,205,.008);transform:translateX(2px)}

/* ════════════════════════════════════════════════════════════════════════════
   TOAST NOTIFICATIONS
   ════════════════════════════════════════════════════════════════════════════ */
#toast-container{position:fixed;bottom:32px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;flex-direction:column;gap:8px;pointer-events:none;align-items:center}
.toast{background:var(--sf2);border:1px solid var(--bd);border-radius:10px;padding:10px 20px;font-size:11px;font-weight:500;color:var(--tx);max-width:340px;box-shadow:0 12px 40px rgba(0,0,0,.5);border-left:2px solid var(--ac);animation:slideUp .3s var(--ez);pointer-events:auto}
.toast.success{border-left-color:var(--gn);color:var(--gn)}
.toast.error{border-left-color:var(--rs);color:var(--rs)}
.toast.info{border-left-color:var(--bl);color:var(--bl)}
@keyframes slideUp{from{transform:translateY(8px);opacity:0}to{transform:translateY(0);opacity:1}}

/* ════════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .sb{width:54px}
  .sb-top,.sb-gl,.sb-lk span:not(.i),.sb-ft .sb-un,.sb-ft .sb-ur,.sb-ft .sb-dot,.sb-ver,.sb-name,.sb-lk .n{display:none}
  .sb-lk{justify-content:center;padding:10px}
  .sb-lk .i{margin:0;font-size:15px}
  #main{padding:20px 16px}
}

/* Collapsible sidebar sections */
.sb-grp{overflow:hidden;transition:max-height .3s var(--ez);max-height:500px}
.sb-gl.closed+.sb-grp{max-height:0}
.sb-gl.closed .arr{transform:rotate(-90deg)}
.sb-gl .arr{transition:transform .2s var(--ez)}

/* ═══ PHASE 4 — EXECUTIVE REFINEMENTS ═══ */

/* #1 — Stagger animation class */
.stg{opacity:0;animation:stgIn .45s var(--ez) forwards}
@keyframes stgIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* #6 — Serif stat numbers */
.dash-n{font-family:var(--se);letter-spacing:-1.2px}

/* #7 — Quieter card headers */
.card>div:first-child{font-weight:400}

/* #8 — Tight number tracking */
[style*="font-variant-numeric"]{letter-spacing:-.3px}

/* #10 — Stat hover: number shifts to accent */
.dash-stat:hover .dash-n{color:var(--ac2)}

/* #12 — Card header gradient */
.card>div:first-child,.post-card .post-hdr{background:linear-gradient(90deg,rgba(184,114,74,.02) 0%,transparent 35%)}

/* #14 — Meeting hover lift */
.health-row:hover{transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.1)}

/* #15 — Quick action hover arrow */
.qa-item{position:relative}
.qa-item::after{content:'→';position:absolute;right:12px;opacity:0;transform:translateX(-4px);transition:all .12s var(--ez);font-size:11px;color:var(--t4)}
.qa-item:hover::after{opacity:1;transform:translateX(0)}

/* #16 — Empty state warm welcome */
.empty-welcome{min-height:240px;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1px dashed var(--bd);border-radius:var(--rl);padding:40px;text-align:center}
.empty-welcome h3{font-family:var(--se);font-size:20px;font-style:italic;color:var(--tx);margin-bottom:8px}
.empty-welcome p{font-size:12px;color:var(--t3);font-weight:300;line-height:1.6;max-width:360px}
.empty-welcome .actions{display:flex;gap:8px;margin-top:20px}

/* #17 — Dismissible notice */
.notice{background:var(--sf);border:1px solid var(--bd);border-radius:10px;padding:12px 18px;margin-bottom:16px;display:flex;align-items:center;gap:12px;transition:opacity .3s,max-height .3s,margin .3s,padding .3s}
.notice-dot{width:5px;height:5px;border-radius:50%;background:var(--rs);flex-shrink:0}
.notice-txt{font-size:11px;color:var(--t2);flex:1;font-weight:300}
.notice-txt b{color:var(--tx);font-weight:500}
.notice-link{font-size:10px;color:var(--ac);cursor:pointer;font-weight:500;border:none;background:none;font-family:var(--fn)}
.notice-x{font-size:11px;color:var(--t4);cursor:pointer;border:none;background:none;padding:2px 4px;font-family:var(--fn);transition:color .1s}
.notice-x:hover{color:var(--t3)}

/* #18 — Keyboard hint on hover */
.kb-hint{margin-left:auto;font-size:9px;color:var(--t4);opacity:0;transition:opacity .12s;font-family:var(--fn);padding-right:16px}
.qa-item:hover .kb-hint{opacity:1}

/* #19 — Smooth sidebar transitions (already in base .sb-lk) */

/* #20 — Focus ring on command palette */
.tb-cmd:focus{border-color:rgba(184,114,74,.12);box-shadow:0 0 0 2px rgba(184,114,74,.06);outline:none}

/* ═══ iPAD + iPHONE OPTIMIZATIONS ═══ */

/* iOS viewport fix */
html{-webkit-text-size-adjust:100%;height:-webkit-fill-available}
body{min-height:-webkit-fill-available;overscroll-behavior:none}

/* Smooth momentum scrolling on iOS */
#main,.sb-nav,.ct{-webkit-overflow-scrolling:touch}

/* Prevent iOS zoom on input focus */
input,select,textarea{font-size:16px !important}
@media(min-width:901px){input,select,textarea{font-size:12px !important}}

/* iPad landscape (1024px-1366px) */
@media(max-width:1100px){
  .sb{width:200px}
  #main{padding:24px 28px 60px}
  .two-col{grid-template-columns:1fr}
  .three-col{grid-template-columns:1fr 1fr}
}

/* iPad portrait + large phones (768px-900px) */
@media(max-width:900px){
  .app-shell{flex-direction:column}
  .sb{width:100%;height:auto;max-height:none;border-right:none;border-bottom:1px solid var(--bd);flex-direction:row;overflow:visible}
  .sb-top{padding:12px 16px;flex-shrink:0}
  .sb-logo{gap:8px}
  .sb-mark{width:26px;height:26px;font-size:11px}
  .sb-name{font-size:13px}
  .sb-ver{display:none}
  .sb-nav{flex:1;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 8px 8px;gap:2px;-webkit-overflow-scrolling:touch;display:flex;flex-wrap:nowrap}
  .sb-nav::after{display:none}
  .sb-gl,.sb-grp{display:none}
  .sb-lk{white-space:nowrap;padding:6px 12px;border-radius:6px;font-size:11px;flex-shrink:0}
  .sb-lk .ic-svg{width:14px;height:14px}
  .sb-lk.on::before{display:none}
  .sb-lk.on{background:var(--acs);border:1px solid rgba(184,114,74,.1)}
  .sb-ft{display:none}
  .sb-lk .n{display:none}
  .sb-lk span.lbl{display:inline}
  
  .mn{height:calc(100vh - 56px)}
  .tb{height:44px;padding:0 16px;gap:8px}
  .tb-cmd{min-width:0;flex:1}
  .tb-cmd kbd{display:none}
  #main{padding:20px 16px 100px}
  
  .card{padding:16px;margin-bottom:10px}
  .post-card{padding:14px}
  .dash-stat{padding:16px 14px}
  .dash-n{font-size:22px}
  
  .two-col,.two-eq,.three-col{grid-template-columns:1fr}
  .cal-year-grid{grid-template-columns:repeat(2,1fr)}
  
  /* Larger touch targets */
  .btn-go{padding:14px 20px;font-size:14px;min-height:44px}
  .btn-sm{padding:8px 14px;font-size:12px;min-height:36px}
  .btn-icon{min-height:36px;min-width:36px}
  .chip{padding:6px 16px;font-size:12px;min-height:36px;display:flex;align-items:center}
  .sb-lk{min-height:36px}
  .health-row{padding:12px 14px}
  .queue-item{padding:14px}
  
  /* Toast positioning for mobile */
  #toast-container{bottom:80px;left:16px;right:16px;transform:none}
  .toast{max-width:none;width:100%}
}

/* iPhone (max-width: 480px) */
@media(max-width:480px){
  .sb-nav{padding:0 4px 6px}
  .sb-lk{padding:5px 10px;font-size:10px}
  .sb-lk span.lbl{display:none}
  .sb-lk .ic-svg{width:16px;height:16px;opacity:.6}
  .sb-lk.on .ic-svg{opacity:1}
  
  .tb{height:40px;padding:0 12px}
  .tb-greet,.tb-status{display:none}
  .tb-cmd{font-size:10px;padding:4px 10px}
  .tb-ic{width:28px;height:28px}
  
  #main{padding:16px 12px 100px}
  .card{padding:14px;border-radius:10px}
  .post-card{padding:12px}
  .post-body{font-size:12px}
  .dash-stat{padding:14px 12px}
  .dash-n{font-size:20px}
  .dash-l{font-size:8px}
  
  .api-box{padding:32px 24px}
  .api-h1{font-size:22px}
  .api-sub{font-size:12px}
  
  .cal-year-grid{grid-template-columns:1fr}
  
  .btn-go{padding:14px;font-size:13px;border-radius:10px}
  .gen-btn{padding:14px;font-size:13px;border-radius:10px}
  
  /* Full-width modals on phone */
  .modal-bg{padding:0;align-items:flex-end}
  .modal{max-width:100%;border-radius:16px 16px 0 0;max-height:90vh;padding:20px}
}

/* Safe area support for iPhone notch/dynamic island */
@supports(padding: max(0px)){
  @media(max-width:480px){
    .sb{padding-top:max(0px,env(safe-area-inset-top))}
    #main{padding-bottom:max(100px,calc(80px + env(safe-area-inset-bottom)))}
    #toast-container{bottom:max(80px,calc(60px + env(safe-area-inset-bottom)))}
  }
}

/* PWA standalone mode */
@media(display-mode: standalone){
  .sb{padding-top:env(safe-area-inset-top,0)}
}

/* Screenshot Insights drop zones */
.insights-drop{border:1.5px dashed rgba(240,225,205,.12);border-radius:6px;padding:10px;text-align:center;cursor:pointer;transition:all .15s;margin-top:8px;background:rgba(240,225,205,.01)}
.insights-drop:hover{border-color:rgba(184,114,74,.2);background:rgba(184,114,74,.015)}
.insights-drop-label{font-size:9px;color:var(--text4);letter-spacing:.5px}
.fac-metrics{display:flex;gap:12px;flex-wrap:wrap;margin-top:8px}
.fac-metric{font-size:10px;color:var(--text3)}
.fac-metric b{color:var(--text);font-weight:500;font-family:var(--font-serif)}


/* ═══════════════════════════════════════════════════════════════════════
   SESSION 4D: MOBILE / iPAD RESPONSIVE FIXES
   ═══════════════════════════════════════════════════════════════════════ */

/* iPad landscape — slight adjustments */
@media(max-width:1024px){
  .sb{width:180px;font-size:11px}
  .main{margin-left:180px}
  .two-eq{grid-template-columns:1fr}
  .stat-row,.stat-grid{flex-wrap:wrap}
}

/* iPad portrait — sidebar collapses to top bar */
@media(max-width:768px){
  .sb{
    position:fixed;top:0;left:0;right:0;bottom:auto;
    width:100%;height:auto;max-height:50vh;
    flex-direction:row;flex-wrap:wrap;
    padding:8px 12px;gap:4px;
    overflow-y:auto;z-index:999;
    border-right:none;border-bottom:1px solid var(--border);
    display:none;
  }
  .sb.open{display:flex}
  .sb .sb-gl{display:none}
  .sb .sb-lk{padding:6px 10px;font-size:10px;white-space:nowrap}
  .sb .sb-ft{
    position:static;width:auto;padding:4px;
    border-top:none;display:flex;gap:4px;
  }
  .main{margin-left:0;padding-top:10px}
  .tb{
    position:sticky;top:0;z-index:998;
    padding:8px 12px;
  }
  body::before{
    content:'';display:block;height:0;
  }
  .two-eq,.three-eq{grid-template-columns:1fr}
  .card{padding:12px}
  .fac-grid{grid-template-columns:1fr !important}
  .stat-row{flex-direction:column}
  textarea{min-height:80px}
  .btn-go,.btn-sm{min-height:44px;font-size:12px}
  select,input[type="text"],input[type="password"],input[type="number"]{
    min-height:44px;font-size:16px;
  }
}

/* Mobile */
@media(max-width:480px){
  .main{padding:8px}
  .tb{padding:6px 10px}
  .tb h1,.tb .tb-title{font-size:13px}
  .panel{padding:8px}
  .card{padding:10px}
  h2{font-size:14px}
  .btn-go{width:100%;padding:12px}
  .stat-row .stat{min-width:calc(50% - 8px)}
  .insights-drop{min-height:60px}
  .morning-card{padding:10px 12px}
  select{width:100%}
}

/* Mobile menu toggle */
.mobile-menu-btn{
  display:none;
  position:fixed;bottom:16px;right:16px;
  width:48px;height:48px;
  border-radius:50%;
  background:var(--accent);color:#fff;
  border:none;font-size:20px;
  z-index:1000;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.3);
  align-items:center;justify-content:center;
}
@media(max-width:768px){
  .mobile-menu-btn{display:flex}
}


/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM UI UPGRADE — Luxury SaaS Visual Layer
   ═══════════════════════════════════════════════════════════════════════ */

/* Refined card surfaces */
.panel .fcol,
.panel .two-eq > div,
.panel .three-eq > div {
  background: var(--sf);
  border: 1px solid var(--bd);
  border-radius: 12px;
  padding: 18px;
  transition: border-color 0.2s ease;
}
.panel .fcol:hover,
.panel .two-eq > div:hover {
  border-color: rgba(240,225,205,0.1);
}

/* KPI stat cards */
.dash-stat {
  background: var(--sf) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 12px !important;
  padding: 16px 18px !important;
  transition: border-color 0.2s;
}
.dash-stat:hover {
  border-color: rgba(240,225,205,0.1);
}
.dash-stat .n {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: -0.5px;
  color: var(--ac);
}

/* Sidebar refinement */
.sb {
  background: var(--sf) !important;
  border-right-color: var(--bd) !important;
}
.sb-mark {
  background: linear-gradient(135deg, var(--ac), hsl(var(--ach,24),var(--acs,43%),41%)) !important;
  border-radius: 8px !important;
  font-weight: 700 !important;
}
.sb-name {
  font-weight: 600 !important;
  letter-spacing: -0.3px !important;
}
.sb-ver {
  font-size: 7px !important;
  letter-spacing: 2px !important;
  opacity: 0.35;
}
.sb-lk {
  border-radius: 8px !important;
  padding: 8px 10px !important;
  font-size: 12px !important;
  font-weight: 450 !important;
  transition: all 0.15s ease !important;
}
.sb-lk.on {
  background: rgba(184,114,74,0.08) !important;
  color: var(--ac) !important;
}
.sb-lk:not(.on):hover {
  background: rgba(240,225,205,0.02);
}
.sb-ft {
  border-top: 1px solid var(--bd) !important;
}
.sb-gl {
  font-size: 8px !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase;
  opacity: 0.3;
  padding: 12px 8px 6px !important;
}

/* Topbar refinement */
.tb {
  border-bottom: 1px solid var(--bd) !important;
  background: rgba(14,16,19,0.85) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Button hierarchy */
.btn-go {
  background: linear-gradient(135deg, var(--ac), hsl(var(--ach,24),var(--acs,43%),38%)) !important;
  border: none !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px;
  transition: opacity 0.15s, transform 0.1s !important;
  box-shadow: 0 2px 8px rgba(184,114,74,0.15);
}
.btn-go:hover {
  opacity: 0.92;
}
.btn-go:active {
  transform: scale(0.98);
}

.btn-sm {
  border-radius: 6px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
  border: 1px solid var(--bd) !important;
}
.btn-sm:hover {
  border-color: rgba(240,225,205,0.12);
  background: rgba(240,225,205,0.03);
}

/* Form inputs — premium feel */
select, 
input[type="text"], 
input[type="password"], 
input[type="number"],
textarea {
  background: var(--bg2, #141619) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 8px !important;
  color: var(--tx) !important;
  font-family: var(--fn) !important;
  transition: border-color 0.2s ease !important;
}
select:focus, 
input[type="text"]:focus, 
input[type="password"]:focus, 
textarea:focus {
  border-color: rgba(184,114,74,0.3) !important;
  outline: none !important;
}

/* Section headings */
.panel h2 {
  font-size: 15px !important;
  font-weight: 600 !important;
  letter-spacing: -0.2px;
  color: var(--tx) !important;
}

/* Labels */
.lbl {
  font-size: 9px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase;
  color: var(--t4) !important;
  font-weight: 500 !important;
}

/* Post cards — cleaner edges */
.panel [style*="border-radius:10px"],
.panel [style*="border-radius: 10px"] {
  border-radius: 12px !important;
}

/* Morning view cards */
.morning-card,
[style*="morning"] {
  border-radius: 10px;
}

/* Modal refinement */
.modal {
  background: var(--sf) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 14px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5) !important;
}
.modal-bg {
  background: rgba(0,0,0,0.6) !important;
  backdrop-filter: blur(4px);
}

/* Command palette refinement */
#cmd-palette {
  border-radius: 14px !important;
  border: 1px solid rgba(240,225,205,0.08) !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5) !important;
}

/* Scrollbar styling */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(240,225,205,0.08);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(240,225,205,0.15);
}

/* Toast refinement */
.toast {
  border-radius: 10px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3) !important;
  backdrop-filter: blur(12px);
}

/* Facility grid cards */
.fac-card {
  border-radius: 12px !important;
  transition: border-color 0.2s ease !important;
}
.fac-card:hover {
  border-color: rgba(240,225,205,0.1) !important;
}

/* Loading spinner refinement */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  animation: spin 0.8s linear infinite;
}

/* Status chips — universal */
[style*="border-radius:4px"][style*="padding:3px"] {
  font-weight: 500 !important;
  letter-spacing: 0.3px;
}

/* Insights drop zone */
.insights-drop {
  border-radius: 12px !important;
  border-style: dashed !important;
  transition: border-color 0.2s !important;
}
.insights-drop:hover {
  border-color: rgba(184,114,74,0.3) !important;
}

/* Print improvements for reports */
@media print {
  body { font-size: 12px !important; }
  h1 { font-size: 20px !important; }
  h2 { font-size: 14px !important; }
}

/* Smooth transitions on panel switches */
.panel {
  animation: panelFade 0.2s ease-out;
}
@keyframes panelFade {
  from { opacity: 0.8; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Login screen refinement */
#login-screen {
  backdrop-filter: blur(20px);
}
#login-screen input {
  border-radius: 10px !important;
}
#login-screen button {
  border-radius: 10px !important;
  font-weight: 600 !important;
}

/* API key screen */
#api-screen .api-box {
  border-radius: 16px !important;
  border: 1px solid var(--bd) !important;
  box-shadow: 0 16px 64px rgba(0,0,0,0.3) !important;
}


/* ═══════════════════════════════════════════════════════════════════════
   PREMIUM POLISH PASS — Unified Design System
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. UNIFIED CARD SYSTEM ── */
.card-premium,
.panel .fcol,
.panel .two-eq > div,
.panel .three-eq > div {
  background: var(--sf) !important;
  border: 1px solid var(--bd) !important;
  border-radius: 14px !important;
  padding: 18px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.card-premium:hover,
.panel .fcol:hover,
.panel .two-eq > div:hover {
  border-color: rgba(240,225,205,0.1) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,0.15);
}

/* Post output cards */
[style*="border-radius:10px"][style*="background:var(--sf)"],
[style*="border-radius:10px"][style*="background:var(--surface)"] {
  border-radius: 14px !important;
  transition: border-color 0.2s ease !important;
}

/* Facility cards */
.fac-card {
  border-radius: 14px !important;
  padding: 16px !important;
  transition: border-color 0.2s ease, transform 0.15s ease !important;
}
.fac-card:hover {
  border-color: rgba(240,225,205,0.1) !important;
  transform: translateY(-1px);
}

/* ── 2. STATUS CHIP SYSTEM ── */
.chip {
  display: inline-flex;
  align-items: center;
  font-size: 9px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 5px;
  letter-spacing: 0.3px;
  line-height: 1;
  white-space: nowrap;
}
.chip-approved {
  background: rgba(90,154,62,0.1);
  color: var(--gn);
  border: 1px solid rgba(90,154,62,0.2);
}
.chip-info {
  background: rgba(74,122,184,0.08);
  color: var(--bl);
  border: 1px solid rgba(74,122,184,0.15);
}
.chip-low, .chip-muted {
  background: rgba(240,225,205,0.03);
  color: var(--t3);
  border: 1px solid var(--bd);
}
.chip-medium, .chip-warning {
  background: rgba(229,185,78,0.08);
  color: var(--am);
  border: 1px solid rgba(229,185,78,0.15);
}
.chip-high {
  background: rgba(217,79,79,0.06);
  color: var(--rs);
  border: 1px solid rgba(217,79,79,0.12);
}
.chip-critical {
  background: rgba(217,79,79,0.1);
  color: var(--rs);
  border: 1px solid rgba(217,79,79,0.2);
  font-weight: 600;
}

/* ── 3. WARNING CARD SYSTEM ── */
.warning-card {
  padding: 10px 14px;
  border-radius: 10px;
  margin: 6px 0;
  font-size: 11px;
  line-height: 1.5;
  border: 1px solid var(--bd);
  border-left: 3px solid var(--t4);
  background: rgba(240,225,205,0.02);
}
.warning-card.info {
  border-left-color: var(--bl);
  background: rgba(74,122,184,0.03);
  color: var(--bl);
}
.warning-card.success {
  border-left-color: var(--gn);
  background: rgba(90,154,62,0.03);
  color: var(--gn);
}
.warning-card.warning {
  border-left-color: var(--am);
  background: rgba(229,185,78,0.03);
  color: var(--am);
}
.warning-card.high {
  border-left-color: var(--rs);
  background: rgba(217,79,79,0.03);
  color: var(--rs);
}
.warning-card.critical {
  border-left-color: var(--rs);
  background: rgba(217,79,79,0.05);
  color: var(--rs);
  font-weight: 500;
}

/* ── 4. FORM LABEL SYSTEM ── */
.form-label,
.lbl {
  font-size: 9px !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 1px !important;
  color: var(--t4) !important;
  margin-bottom: 5px !important;
  display: block;
}

/* Apply to common inline label patterns */
[style*="text-transform:uppercase"][style*="letter-spacing"] {
  font-size: 9px !important;
  font-weight: 500 !important;
  color: rgba(240,225,205,0.25) !important;
}

/* Form inputs refinement */
select, input[type="text"], input[type="password"], input[type="number"], textarea {
  border-radius: 10px !important;
  padding: 10px 12px !important;
  font-size: 12px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}
select:focus, input:focus, textarea:focus {
  border-color: rgba(184,114,74,0.3) !important;
  box-shadow: 0 0 0 3px rgba(184,114,74,0.06) !important;
  outline: none !important;
}

/* ── 5. EMPTY STATE WARMTH ── */
[style*="border:1px dashed"] {
  border: 1px solid rgba(240,225,205,0.06) !important;
  border-radius: 14px !important;
  background: var(--sf) !important;
  padding: 28px 20px !important;
}

/* Section headers */
.panel h2,
[style*="font-family:var(--font-serif)"] {
  font-weight: 600 !important;
  letter-spacing: -0.3px;
}

/* Dividers */
hr, [style*="border-bottom:1px solid"] {
  border-color: var(--bd) !important;
}

/* Buttons — secondary refinement */
.btn-sm {
  border-radius: 8px !important;
  padding: 6px 14px !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: 0.2px;
  transition: all 0.15s ease !important;
}
.btn-sm:hover {
  background: rgba(240,225,205,0.04) !important;
  border-color: rgba(240,225,205,0.12) !important;
}
.btn-sm:active {
  transform: scale(0.97);
}

/* KPI stat cards */
.dash-stat {
  border-radius: 14px !important;
  transition: border-color 0.2s ease, transform 0.15s ease !important;
}
.dash-stat:hover {
  transform: translateY(-1px);
  border-color: rgba(240,225,205,0.1) !important;
}

/* Toast refinement */
.toast {
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35) !important;
  border: 1px solid rgba(240,225,205,0.06);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* Command palette */
#cmd-palette {
  border-radius: 16px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5) !important;
  border: 1px solid rgba(240,225,205,0.08) !important;
}
#cmd-palette input {
  border-radius: 10px !important;
}

/* Login screen */
#login-screen .login-box,
#login-screen [style*="border-radius"] {
  border-radius: 18px !important;
}

/* Selection/active states */
::selection {
  background: rgba(184,114,74,0.25);
  color: #f0e1cd;
}

/* Smooth page transitions */
.panel {
  animation: panelReveal 0.25s ease-out;
}
@keyframes panelReveal {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Mobile polish */
@media(max-width:768px){
  .card-premium, .panel .fcol, .fac-card {
    border-radius: 10px !important;
    padding: 14px !important;
  }
  .btn-sm {
    min-height: 44px;
    padding: 10px 16px !important;
  }
}


/* Agent tab styling */
.agent-tab.active{background:rgba(184,114,74,.08)!important;color:var(--ac)!important;border-color:rgba(184,114,74,.15)!important}
.agent-tab:not(.active){background:transparent!important;color:var(--t3)!important}
.agent-tab:hover:not(.active){background:rgba(240,225,205,.03)!important}
@media(max-width:768px){#agent-drawer{width:100vw!important;max-width:100vw!important}}

/* Landing page classes */
.landing-shell{position:fixed;inset:0;background:#07080a;color:#f0e1cd;overflow-y:auto;z-index:9999;font-family:'DM Sans',system-ui,sans-serif}
.landing-container{max-width:900px;margin:0 auto;padding:60px 24px}
.landing-kicker{font-size:11px;letter-spacing:3px;color:#b8724a;text-transform:uppercase;margin-bottom:12px;text-align:center}
.landing-title{font-size:clamp(28px,5vw,44px);font-weight:600;line-height:1.15;margin-bottom:16px;color:#f0e1cd;text-align:center}
.landing-subtitle{font-size:16px;color:rgba(240,225,205,.6);max-width:640px;margin:0 auto 28px;line-height:1.6;text-align:center}
.landing-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.landing-section{margin-bottom:48px;padding:32px;background:rgba(240,225,205,.02);border:1px solid rgba(240,225,205,.06);border-radius:12px}
.landing-section h2{font-size:18px;font-weight:600;margin-bottom:12px;color:#f0e1cd}
.landing-section p{font-size:13px;color:rgba(240,225,205,.5);line-height:1.7}
.landing-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px;margin-bottom:48px}
.landing-feature{padding:16px;background:rgba(240,225,205,.02);border:1px solid rgba(240,225,205,.06);border-radius:8px}
.landing-feature-title{font-size:12px;font-weight:500;color:#b8724a;margin-bottom:4px}
.landing-feature-text{font-size:11px;color:rgba(240,225,205,.4);line-height:1.5}
.landing-footer{text-align:center;padding:24px 0;border-top:1px solid rgba(240,225,205,.06)}
@media(max-width:768px){.landing-container{padding:32px 16px}.landing-grid{grid-template-columns:1fr}}




/* ═══ V5.3 DAILY-USE POLISH (additive, CSS-only) ═══ */
.btn-go,.btn-sm{transition:transform .12s ease,opacity .12s ease,background .15s ease;}
.btn-go:hover,.btn-sm:hover{transform:translateY(-1px);}
.btn-go:active,.btn-sm:active{transform:translateY(0);opacity:.85;}
.btn-go:focus-visible,.btn-sm:focus-visible,button:focus-visible{outline:2px solid var(--ac);outline-offset:2px;}
.chip{transition:background .15s ease;}
/* Subtle card lift for scannability on dashboard */
#next-best-action,#quick-launch-bar{animation:acefadein .25s ease;}
@keyframes acefadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}
/* Tighter, more intentional mobile spacing */
@media (max-width:480px){
  #quick-launch-bar{gap:6px !important;}
  #quick-launch-bar button{flex:1 1 calc(50% - 6px);text-align:center;}
  #next-best-action button{width:100%;margin-top:8px;}
}


/* V5.3 Final QA: prevent mobile horizontal scroll */
html,body{max-width:100%;overflow-x:hidden;}
@media (max-width:480px){
  *{max-width:100%;}
  pre,code{white-space:pre-wrap;word-break:break-word;}
}


/* V5.4 ZONE LAYOUT */
#zone-command-strip,#zone-priority-grid,#zone-planning,#zone-detailed-work,#zone-system-health{margin-bottom:18px;}
@media (max-width:480px){
  #priority-work-grid > div > div{flex:1 1 100% !important;min-width:0 !important;}
}