:root{
  --bg:#f3f6f9;--surface:#fff;--surface2:#eef3f7;--ink:#172433;--muted:#687789;--line:#dbe3ea;
  --navy:#17375e;--navy2:#254d79;--teal:#0e8a7c;--teal2:#65d6c6;--blue:#3f7cc5;--purple:#7d63c8;
  --green:#2d8a57;--greenBg:#eaf7f0;--amber:#a66b18;--amberBg:#fff5e1;--red:#b54242;--redBg:#fff0f0;
  --shadow:0 10px 30px rgba(25,48,72,.08);--radius:18px;--radiusSm:12px;--sidebar:246px;--tap:44px;
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
:root[data-theme="dark"]{
  --bg:#0e1621;--surface:#151f2c;--surface2:#1c2938;--ink:#edf4fa;--muted:#9babbc;--line:#2a3a4b;
  --shadow:0 10px 30px rgba(0,0,0,.26);--greenBg:#153426;--amberBg:#3a2b12;--redBg:#3b1e22;
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{font-size:15px;line-height:1.45}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid rgba(101,214,198,.35);outline-offset:2px}
a{color:var(--blue)}
#appShell{display:grid;grid-template-columns:var(--sidebar) minmax(0,1fr);min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#102b4b,#17375e 55%,#13304f);color:#fff;padding:18px 13px;display:flex;flex-direction:column;z-index:20;border-right:1px solid rgba(255,255,255,.06)}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px}.brand img{width:42px;height:42px;background:#fff;border-radius:12px;padding:4px}.brandText strong{display:block;font-size:14px}.brandText span{font-size:10px;color:#b9cde0}
.navSection{font-size:9px;text-transform:uppercase;letter-spacing:.15em;color:#86a5c6;margin:18px 10px 7px;font-weight:800}
.navBtn{width:100%;border:0;background:transparent;color:#dce8f5;display:flex;align-items:center;gap:10px;border-radius:12px;padding:10px 11px;text-align:left;min-height:42px}
.navBtn:hover{background:rgba(255,255,255,.08)}.navBtn.active{background:#fff;color:#17375e;font-weight:800}.navBtn .count{margin-left:auto;border-radius:999px;background:rgba(255,255,255,.15);padding:2px 7px;font-size:10px}.navBtn.active .count{background:#edf3f9}
.navIcon{width:22px;height:22px;display:inline-grid;place-items:center;font-size:16px}
.sidebarFoot{margin-top:auto;padding:13px 10px 0;border-top:1px solid rgba(255,255,255,.08);font-size:10px;color:#9eb3c9}
.appColumn{min-width:0}
.topbar{position:sticky;top:0;background:color-mix(in srgb,var(--bg) 94%,transparent);backdrop-filter:blur(12px);z-index:18;border-bottom:1px solid var(--line)}
.topbarMain{display:flex;align-items:center;gap:18px;padding:13px clamp(14px,2vw,28px)}
.pageIdentity{min-width:190px}.eyebrow{font-size:9px;letter-spacing:.14em;color:var(--teal);font-weight:900}.pageIdentity h1{font-size:23px;margin:3px 0 0;line-height:1.1}
.topActions{display:flex;gap:8px;align-items:center;margin-left:auto}
.searchTrigger{min-width:min(430px,34vw);height:42px;border:1px solid var(--line);background:var(--surface);border-radius:13px;padding:0 12px;display:flex;align-items:center;gap:8px;color:var(--muted);text-align:left}.searchTrigger kbd{margin-left:auto;border:1px solid var(--line);border-radius:6px;background:var(--surface2);padding:2px 6px;font-size:9px}
.iconBtn,.ghostBtn,.primaryBtn,.secondaryBtn,.dangerBtn{border:1px solid transparent;border-radius:12px;min-height:var(--tap);padding:0 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;font-weight:750}
.iconBtn{width:44px;padding:0;background:var(--surface);border-color:var(--line);color:var(--ink)}.primaryBtn{background:var(--navy);color:#fff}.primaryBtn:hover{background:#0f2d4e}.secondaryBtn{background:var(--surface);border-color:var(--line);color:var(--ink)}.ghostBtn{background:transparent;color:var(--blue)}.dangerBtn{background:var(--redBg);border-color:#e7bbbb;color:var(--red)}.compact{min-height:36px;padding:0 11px;font-size:12px}
.operationBar{border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:6px clamp(14px,2vw,28px);font-size:11px;background:var(--surface)}.opState{display:flex;gap:7px;align-items:center;white-space:nowrap}.statusDot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(45,138,87,.1)}.operationBar.working .statusDot{background:var(--amber);animation:pulse 1.1s infinite}.operationBar.error{background:var(--redBg)}.operationBar.error .statusDot{background:var(--red)}.opDetail{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}.operationBar .ghostBtn:first-of-type{margin-left:auto}
@keyframes pulse{50%{opacity:.35}}
main{padding:22px clamp(14px,2.3vw,32px) 90px;max-width:1760px;width:100%;margin:0 auto}
.pageHead{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;margin-bottom:18px}.pageHead h2{font-size:24px;margin:0}.pageHead p{margin:5px 0 0;color:var(--muted);max-width:860px}.pageActions{display:flex;gap:8px;flex-wrap:wrap}
.grid{display:grid;gap:15px}.grid2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid3{grid-template-columns:repeat(3,minmax(0,1fr))}.grid4{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:17px;min-width:0}.card.tight{padding:13px}.card h3{margin:0;font-size:16px}.cardHead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:13px}.cardSub{font-size:11px;color:var(--muted)}
.kpi{display:flex;flex-direction:column;gap:2px}.kpiLabel{font-size:10px;color:var(--muted);font-weight:800;text-transform:uppercase;letter-spacing:.05em}.kpiValue{font-size:27px;font-weight:900;letter-spacing:-.03em}.kpiHint{font-size:10px;color:var(--muted)}
.metricGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.metric{border:1px solid var(--line);border-radius:13px;padding:12px;background:var(--surface)}.metric .value{font-size:20px;font-weight:900}.metric .label{font-size:10px;text-transform:uppercase;color:var(--muted);font-weight:800}.metric .foot{font-size:10px;color:var(--muted);margin-top:4px}
.statStrip{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-bottom:15px}.statStrip>div{background:var(--surface);padding:15px}
.badge{display:inline-flex;align-items:center;gap:4px;border-radius:999px;padding:4px 8px;font-size:10px;font-weight:800;background:var(--surface2);color:var(--navy2)}.badge.green{background:var(--greenBg);color:var(--green)}.badge.amber{background:var(--amberBg);color:var(--amber)}.badge.red{background:var(--redBg);color:var(--red)}.badge.blue{background:#e9f2ff;color:#306cae}.badge.purple{background:#f0ecfb;color:#684db5}
:root[data-theme="dark"] .badge.blue{background:#17304d;color:#9dc8fa}:root[data-theme="dark"] .badge.purple{background:#2c2546;color:#c6b8f1}
.progressBar{height:8px;background:var(--surface2);border-radius:99px;overflow:hidden}.progressBar>span{display:block;height:100%;background:linear-gradient(90deg,var(--teal),var(--blue));border-radius:inherit}
.list{display:flex;flex-direction:column;gap:8px}.listRow{display:flex;align-items:center;gap:11px;border:1px solid var(--line);border-radius:13px;padding:11px;background:var(--surface)}.listRow:hover{border-color:#b8c7d6}.listMain{flex:1;min-width:0}.listTitle{font-weight:850}.listMeta{font-size:10px;color:var(--muted);margin-top:2px}.rowActions{display:flex;gap:6px;flex-wrap:wrap}
.avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,var(--navy2),var(--teal));color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block}.dot.low{background:#7d91a4}.dot.medium{background:#3f7cc5}.dot.high{background:#e19029}.dot.critical{background:#c64949}
.tableWrap{width:100%;overflow:auto;border:1px solid var(--line);border-radius:14px}.dataTable{width:100%;border-collapse:collapse;min-width:780px}.dataTable th,.dataTable td{padding:10px 11px;border-bottom:1px solid var(--line);text-align:left;vertical-align:middle}.dataTable th{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);background:var(--surface2)}.dataTable tr:last-child td{border-bottom:0}.dataTable tbody tr:hover{background:color-mix(in srgb,var(--surface2) 60%,transparent)}
.formGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.field{display:flex;flex-direction:column;gap:5px}.field.full{grid-column:1/-1}.field label{font-size:11px;font-weight:800;color:color-mix(in srgb,var(--ink) 78%,var(--muted))}.field small{font-size:9px;color:var(--muted)}.field input,.field select,.field textarea,.searchInput{width:100%;border:1px solid var(--line);border-radius:11px;background:var(--surface);color:var(--ink);min-height:44px;padding:9px 10px}.field textarea{min-height:90px;resize:vertical}
.toolbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:13px}.toolbar .searchInput{max-width:330px}.toolbarSpacer{flex:1}
.segmented{display:inline-flex;background:var(--surface2);border-radius:11px;padding:3px;gap:2px}.segBtn{border:0;background:transparent;border-radius:8px;padding:7px 10px;font-size:11px;color:var(--muted);font-weight:750}.segBtn.active{background:var(--surface);color:var(--navy2);box-shadow:0 1px 3px rgba(0,0,0,.08)}
.empty{padding:32px 18px;text-align:center;border:1px dashed #bcc9d5;border-radius:15px;background:color-mix(in srgb,var(--surface) 78%,var(--surface2))}.emptyIcon{font-size:32px;margin-bottom:7px}.empty h3{margin:0 0 5px}.empty p{max-width:560px;margin:0 auto 13px;color:var(--muted)}
.projectCard{display:flex;flex-direction:column;gap:11px;min-height:235px}.projectTop{display:flex;align-items:flex-start;gap:11px}.projectCode{width:48px;height:48px;border-radius:13px;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;display:grid;place-items:center;font-size:11px;font-weight:900}.projectCard .rowActions{margin-top:auto}
.health{display:inline-flex;align-items:center;gap:5px}.health::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green)}.health.watch::before{background:var(--amber)}.health.risk::before{background:var(--red)}
.kanban{display:grid;grid-template-columns:repeat(4,minmax(250px,1fr));gap:12px;overflow:auto;padding-bottom:4px}.kanbanCol{background:var(--surface2);border:1px solid var(--line);border-radius:15px;padding:10px;min-height:480px}.kanbanHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:12px;font-weight:850}.taskCard{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:10px;margin-bottom:8px;box-shadow:0 2px 7px rgba(0,0,0,.04)}.taskCard:hover{border-color:#aebfd0}.taskCard .title{font-weight:850}.taskCard .meta{font-size:9px;color:var(--muted);margin-top:4px}.taskCard .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}
.projectLayout{display:grid;grid-template-columns:270px minmax(0,1fr);gap:14px}.projectSide{position:sticky;top:113px;align-self:start}.projectTab{display:flex;width:100%;border:0;background:transparent;color:var(--ink);padding:9px 10px;border-radius:10px;text-align:left;font-weight:700}.projectTab.active{background:var(--surface2);color:var(--navy2)}
.timeline{display:flex;flex-direction:column;gap:8px}.timelineRow{display:grid;grid-template-columns:140px minmax(0,1fr) 100px;gap:10px;align-items:center}.timelineTrack{height:18px;border-radius:99px;background:var(--surface2);position:relative;overflow:hidden}.timelineBar{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--blue),var(--teal));min-width:4px}
.calendarGrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px}.calHead{font-size:9px;text-transform:uppercase;text-align:center;color:var(--muted);font-weight:850}.calDay{min-height:102px;border:1px solid var(--line);border-radius:11px;background:var(--surface);padding:6px}.calDay.muted{opacity:.43}.calDay.today{outline:2px solid var(--teal)}.calNum{font-size:10px;font-weight:850}.calItem{display:block;width:100%;border:0;border-radius:7px;margin-top:4px;padding:4px 5px;background:#eaf2fb;color:#244f7a;font-size:9px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.calItem.due{background:#fff0e0;color:#8b591b}.calItem.overdue{background:#ffe5e5;color:#a33c3c}
:root[data-theme="dark"] .calItem{background:#1d3550;color:#b9d6f5}:root[data-theme="dark"] .calItem.due{background:#3b2c16;color:#efc783}:root[data-theme="dark"] .calItem.overdue{background:#3d2023;color:#f0a9a9}
.chart{width:100%;height:220px;display:block}.chart text{fill:var(--muted);font-size:9px}.donutWrap{display:grid;place-items:center;min-height:220px}.donut{width:180px;height:180px;border-radius:50%;display:grid;place-items:center;position:relative}.donut::after{content:"";position:absolute;width:112px;height:112px;border-radius:50%;background:var(--surface)}.donutCenter{position:relative;z-index:1;text-align:center}.donutCenter b{display:block;font-size:24px}.donutCenter span{font-size:10px;color:var(--muted)}
.infoBtn{border:1px solid var(--line);background:var(--surface);color:var(--blue);border-radius:50%;width:21px;height:21px;padding:0;font-size:10px;font-weight:900}
.notice{border-radius:13px;padding:10px 12px;background:#eaf7f5;color:#17685f;font-size:11px}.notice.warn{background:var(--amberBg);color:var(--amber)}.notice.error{background:var(--redBg);color:var(--red)}
.noteCard{border-left:4px solid var(--teal)}.noteCard.pinned{border-left-color:var(--purple)}.noteBody{white-space:pre-wrap;color:var(--muted);font-size:12px}
.modalBackdrop{position:fixed;inset:0;background:rgba(10,21,34,.48);z-index:80;display:grid;place-items:center;padding:16px}.modal{width:min(840px,100%);max-height:min(89vh,920px);overflow:auto;background:var(--surface);border-radius:22px;box-shadow:0 24px 90px rgba(0,0,0,.28)}.modal.wide{width:min(1120px,100%)}.modalHead{display:flex;align-items:flex-start;gap:12px;padding:17px 19px;border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--surface);z-index:2}.modalTitle{font-size:19px;font-weight:900}.modalSub{font-size:10px;color:var(--muted)}.modalHead .iconBtn{margin-left:auto}.modalBody{padding:19px}.modalFoot{display:flex;justify-content:flex-end;gap:8px;padding:13px 19px;border-top:1px solid var(--line);position:sticky;bottom:0;background:var(--surface)}
.searchModalInput{font-size:17px;border:0!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;padding:13px 0!important}.searchResults{display:flex;flex-direction:column;gap:5px;margin-top:10px}.searchResult{border:0;background:var(--surface);border-radius:10px;padding:10px;text-align:left;display:flex;gap:9px;align-items:center;color:var(--ink)}.searchResult:hover{background:var(--surface2)}
.toastRoot{position:fixed;right:16px;bottom:16px;z-index:120;display:flex;flex-direction:column;gap:8px}.toast{background:#122a43;color:#fff;padding:10px 13px;border-radius:12px;box-shadow:var(--shadow);font-size:11px;max-width:360px}.toast.error{background:#7b2d33}
.activityItem{border-left:3px solid var(--line);padding:8px 0 8px 11px}.activityItem.ok{border-color:var(--green)}.activityItem.error{border-color:var(--red)}.activityItem .time{font-size:9px;color:var(--muted)}
.helpBlock{padding:12px 0;border-bottom:1px solid var(--line)}.helpBlock:last-child{border-bottom:0}.helpBlock h4{margin:0 0 4px}.helpBlock p{margin:0;color:var(--muted)}
.ganttLegend{display:flex;gap:10px;flex-wrap:wrap;font-size:10px;color:var(--muted)}
.gmailItem{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--surface)}.gmailSubject{font-weight:850}.gmailMeta{font-size:9px;color:var(--muted)}.gmailSnippet{font-size:11px;color:var(--muted);margin-top:5px}
.mobileOnly,.mobileNav{display:none}
.footerNote{text-align:center;color:var(--muted);font-size:9px;margin-top:22px}
@media(max-width:1180px){
  :root{--sidebar:215px}.grid4,.metricGrid{grid-template-columns:repeat(2,minmax(0,1fr))}.statStrip{grid-template-columns:repeat(3,minmax(0,1fr))}.searchTrigger{min-width:140px}.searchText{display:none}
}
@media(max-width:860px){
  :root{--tap:46px}.sidebar{display:none}#appShell{display:block}.mobileOnly{display:inline-flex}.appColumn{width:100%}
  .topbarMain{padding:9px 11px;gap:7px}.pageIdentity{min-width:0;flex:1}.eyebrow{display:none}.pageIdentity h1{font-size:18px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topActions{margin-left:0}.searchTrigger{width:44px;min-width:44px;padding:0;justify-content:center}.searchTrigger kbd,.searchText{display:none}.primaryBtn.compact{width:44px;padding:0}.primaryBtn.compact .actionText{display:none}
  .operationBar{padding:5px 11px}.opDetail{font-size:10px}.activityText{display:none}
  main{padding:13px 11px calc(92px + env(safe-area-inset-bottom))}
  .pageHead{flex-direction:column;margin-bottom:13px}.pageHead h2{font-size:21px}.pageActions{width:100%}.pageActions>*{flex:1}
  .grid2,.grid3,.grid4,.metricGrid{grid-template-columns:1fr}.statStrip{grid-template-columns:repeat(2,1fr)}
  .formGrid{grid-template-columns:1fr}.field.full{grid-column:auto}.toolbar{align-items:stretch}.toolbar .searchInput{max-width:none;flex:1 1 100%}
  .projectLayout{grid-template-columns:1fr}.projectSide{position:static}.projectSide .list{display:grid;grid-template-columns:repeat(2,1fr)}
  .kanban{grid-template-columns:repeat(4,minmax(82vw,1fr));scroll-snap-type:x mandatory}.kanbanCol{scroll-snap-align:start}
  .timelineRow{grid-template-columns:95px minmax(0,1fr) 70px}
  .calendarGrid{gap:3px}.calDay{min-height:76px;padding:4px}.calItem{font-size:8px;padding:3px}
  .mobileNav{position:fixed;display:grid;grid-template-columns:repeat(5,1fr);left:0;right:0;bottom:0;z-index:60;background:color-mix(in srgb,var(--surface) 97%,transparent);border-top:1px solid var(--line);padding:5px 5px calc(5px + env(safe-area-inset-bottom));box-shadow:0 -8px 28px rgba(25,50,75,.1)}
  .mobileNavBtn{border:0;background:transparent;min-height:55px;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--muted);font-size:8px;font-weight:800}.mobileNavBtn .navIcon{font-size:17px}.mobileNavBtn.active{color:var(--navy2);background:var(--surface2)}
  .modalBackdrop{padding:0;align-items:end}.modal,.modal.wide{width:100%;max-height:93dvh;border-radius:22px 22px 0 0}.modalHead{padding:13px}.modalBody{padding:13px}.modalFoot{padding:10px 13px calc(10px + env(safe-area-inset-bottom))}
  input,select,textarea{font-size:16px!important}
  .dataTable{min-width:680px}.toastRoot{left:10px;right:10px;bottom:calc(80px + env(safe-area-inset-bottom))}.toast{max-width:none}
}
@media(max-width:430px){.statStrip{grid-template-columns:1fr 1fr}.kpiValue{font-size:23px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation:none!important;transition:none!important}}