:root{
    --navy:#0B1220; --navy2:#16213A; --navy3:#1E2A45;
    --teal:#14B8A6; --teal-d:#0F9488;
    --amber:#F59E0B; --blue:#3B82F6; --red:#EF4444; --green:#22C55E; --purple:#8B5CF6;
    --bg:#F1F5F9; --card:#FFFFFF; --text:#0F172A; --muted:#64748B; --border:#E2E8F0;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased;}
  .mono{font-family:'JetBrains Mono',monospace;}
  button{font-family:inherit;cursor:pointer;}
  input,select,textarea{font-family:inherit;}
  input[type=checkbox]{accent-color:var(--teal);width:15px;height:15px;}
  ::selection{background:rgba(20,184,166,.28);color:var(--text);}

  #loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%, #16213A 0%, #0B1220 55%, #060A12 100%);}
  .loginCard{width:400px;background:var(--card);border-radius:14px;padding:36px 32px;box-shadow:0 20px 60px rgba(0,0,0,.35);}
  .loginBrand{display:flex;align-items:center;justify-content:center;margin-bottom:14px;}
  .loginBrandLogo{height:68px;width:auto;display:block;}
  .loginCard h2{margin:2px 0 22px;font-size:21px;font-weight:800;}
  .field{margin-bottom:14px;}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--muted);margin-bottom:6px;}
  .field input:not([type=checkbox]):not([type=radio]),.field select,.field textarea{width:100%;padding:10px 12px;border:1.5px solid var(--border);border-radius:8px;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;background:#fff;color:var(--text);}
  .field input:not([type=checkbox]):not([type=radio]):hover,.field select:hover,.field textarea:hover{border-color:#CBD5E1;}
  .field input:not([type=checkbox]):not([type=radio]):focus,.field select:focus,.field textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,184,166,.16);}
  .field input[type=checkbox],.field input[type=radio]{width:15px;height:15px;flex-shrink:0;}
  .btnPrimary{background:var(--navy);color:#fff;border:none;padding:11px 18px;border-radius:8px;font-weight:600;font-size:14px;width:100%;transition:background .15s,transform .1s;}
  .btnPrimary:hover{background:var(--navy2);}
  .btnPrimary:active{transform:scale(.98);}
  .btnPrimary:focus-visible{outline:2px solid var(--teal);outline-offset:2px;}
  .loginErr{background:#FEF2F2;color:#B91C1C;border:1px solid #FECACA;padding:8px 10px;border-radius:8px;font-size:12.5px;margin-bottom:14px;}
  .loginHint{margin-top:16px;font-size:11.5px;color:var(--muted);text-align:center;line-height:1.6;}

  #appScreen{display:none;min-height:100vh;flex-direction:column;}
  header.topbar{background:var(--navy);color:#fff;padding:14px 24px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
  .brandRow{display:flex;align-items:center;gap:12px;}
  .brandLogo{height:52px;width:auto;display:block;background:#fff;border-radius:8px;padding:5px 10px;}
  .brandRow h1{font-size:14px;letter-spacing:.12em;margin:0;font-weight:800;text-transform:uppercase;}
  .roleTag{padding:2px 8px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
  .clockBox{text-align:right;}
  .clockBox .time{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;color:#fff;letter-spacing:.03em;}
  .clockBox .date{font-size:10px;color:#94A3B8;margin-top:2px;letter-spacing:.05em;text-transform:uppercase;}
  .avatarWrap{position:relative;}
  .avatarBtn{width:36px;height:36px;border-radius:50%;background:#1E2A45;border:1px solid #2C3A5A;display:flex;align-items:center;justify-content:center;cursor:pointer;color:#B6C2D9;padding:0;}
  .avatarBtn:hover{background:#26314D;color:#fff;}
  .avatarMenu{display:none;position:absolute;top:46px;right:0;background:#fff;border-radius:10px;border:1px solid var(--border);box-shadow:0 8px 24px rgba(0,0,0,.18);min-width:180px;padding:6px;z-index:50;}
  .avatarMenu.show{display:block;}
  .avatarMenuHeader{padding:8px 10px;border-bottom:1px solid var(--border);margin-bottom:4px;}
  .avatarMenuName{font-size:13px;font-weight:700;color:var(--text);}
  .avatarMenuRole{font-size:11px;color:var(--muted);margin-top:2px;}
  .avatarMenu button{width:100%;text-align:left;background:none;border:none;padding:9px 10px;border-radius:6px;font-size:13px;color:var(--text);cursor:pointer;font-family:inherit;}
  .avatarMenu button:hover{background:#F1F5F9;}

  nav.tabs{background:var(--navy2);display:flex;gap:4px;padding:10px 20px;overflow-x:auto;}
  nav.tabs button{background:transparent;border:none;color:#B6C2D9;padding:9px 16px;font-size:13px;font-weight:600;border-radius:7px;white-space:nowrap;transition:background .15s,color .15s;}
  nav.tabs button:hover{color:#fff;background:rgba(255,255,255,.06);}
  nav.tabs button.active{color:#fff;background:var(--amber);font-weight:700;box-shadow:0 0 16px rgba(245,158,11,.55);}
  nav.tabs button:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}

  main{flex:1;padding:24px;max-width:1320px;width:100%;margin:0 auto;}
  h2.pageTitle{font-size:20px;font-weight:800;margin:0 0 4px;}
  p.pageSub{color:var(--muted);font-size:13px;margin:0 0 20px;}

  .grid{display:grid;gap:16px;}
  .cols4{grid-template-columns:repeat(4,1fr);}
  .cols3{grid-template-columns:repeat(3,1fr);}
  .cols2{grid-template-columns:1.4fr 1fr;}
  @media(max-width:900px){.cols4{grid-template-columns:repeat(2,1fr);}.cols2,.cols3{grid-template-columns:1fr;}}

  .card{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:18px 20px;}
  .card h3{margin:0 0 4px;font-size:14px;font-weight:700;}
  .card .sub{color:var(--muted);font-size:12px;margin-bottom:14px;}

  .statCard{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:16px 18px;text-align:center;}
  .statCard .label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.04em;}
  .statCard .num{font-family:'JetBrains Mono',monospace;font-size:28px;font-weight:700;margin-top:6px;}
  .statCard .delta{font-size:11.5px;margin-top:4px;color:var(--muted);}
  .tdNum{text-align:right;font-family:'JetBrains Mono',monospace;}

  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:left;color:var(--muted);font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.03em;padding:8px 10px;border-bottom:2px solid var(--border);}
  td{padding:10px 10px;border-bottom:1px solid var(--border);vertical-align:top;transition:background .1s;}
  tbody tr{position:relative;}
  tbody tr:hover td{background:#EEFBF8;}
  tbody tr:hover td:first-child{box-shadow:inset 3px 0 0 var(--teal);}
  .idTag{font-family:'JetBrains Mono',monospace;font-weight:700;font-size:12px;}

  .badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;}
  .b-ontrack{background:#DCFCE7;color:#166534;}
  .b-delayed{background:#FEF3C7;color:#92400E;}
  .b-atrisk{background:#FEE2E2;color:#991B1B;}
  .b-completed{background:#DBEAFE;color:#1E40AF;}
  .b-zonal{background:#FEF3C7;color:#92400E;}
  .b-ops{background:#DBEAFE;color:#1E40AF;}
  .b-mgmt{background:#EDE9FE;color:#5B21B6;}
  .b-resolved{background:#CCFBF1;color:#0F766E;}
  .b-closed{background:#E2E8F0;color:#475569;}
  .p-low{background:#F1F5F9;color:#475569;}
  .p-medium{background:#DBEAFE;color:#1E40AF;}
  .p-high{background:#FFEDD5;color:#9A3412;}
  .p-critical{background:#FEE2E2;color:#991B1B;}
  .zoneDot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:6px;flex-shrink:0;vertical-align:-1px;}
  .zoneLegend{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
  .zoneLegendChip{display:flex;align-items:center;gap:6px;background:#fff;border:1px solid var(--border);border-radius:20px;padding:4px 10px 4px 8px;font-size:11.5px;font-weight:600;color:var(--text);}

  .hierMap{display:flex;flex-direction:column;gap:14px;}
  .hierZone{border:1.5px solid var(--border);border-radius:10px;overflow:hidden;}
  .hierZoneHead{padding:10px 14px;color:#fff;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px;font-weight:700;font-size:13.5px;}
  .hierZoneSub{font-weight:500;font-size:11.5px;opacity:.9;}
  .hierCities{display:flex;gap:12px;flex-wrap:wrap;padding:12px 14px;background:#FAFBFC;}
  .hierCity{background:#fff;border:1px solid var(--border);border-radius:8px;padding:10px 12px;min-width:160px;flex:1;}
  .hierCityName{font-weight:700;font-size:12.5px;margin-bottom:6px;padding-bottom:6px;border-bottom:1px solid var(--border);}
  .hierPerson{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12px;padding:3px 0;}
  .hierGrade{color:var(--muted);font-size:10.5px;margin-left:5px;}
  .hierRole{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;flex-shrink:0;}

  .taskCard{border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:10px;}
  .taskCard:last-child{margin-bottom:0;}
  .taskCardHead{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;flex-wrap:wrap;font-size:13.5px;}
  .taskDesc{font-size:12.5px;color:var(--muted);margin-top:6px;}
  .taskFields{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px;}
  .taskFieldChip{background:#F1F5F9;border-radius:6px;padding:4px 9px;font-size:11.5px;color:var(--text);}
  .taskSubtasks{margin-top:10px;padding-top:10px;border-top:1px solid var(--border);}
  .actItem{display:flex;align-items:center;gap:9px;padding:5px 0;font-size:12.5px;}
  .actItem.done .txt{text-decoration:line-through;color:var(--muted);}

  .btnRow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
  .btnSm{padding:7px 12px;border-radius:7px;border:1.5px solid var(--border);background:#fff;font-size:12.5px;font-weight:600;color:var(--text);transition:border-color .15s,background .15s,transform .1s;}
  .btnSm:hover{border-color:var(--navy);background:#F8FAFC;}
  .btnSm:active{transform:scale(.96);}
  .btnSm:focus-visible{outline:2px solid var(--teal);outline-offset:1px;}
  .btnTeal{background:var(--teal);border-color:var(--teal);color:#fff;}
  .btnTeal:hover{background:var(--teal-d);border-color:var(--teal-d);box-shadow:0 2px 8px rgba(20,184,166,.35);}
  .btnGhostRed{color:#B91C1C;border-color:#FECACA;}
  .btnGhostRed:hover{background:#FEF2F2;border-color:#FCA5A5;}
  .btnGhostBlue{color:#1E40AF;border-color:#BFDBFE;}
  .btnGhostBlue:hover{background:#EFF6FF;border-color:#93C5FD;}

  .filterBar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center;}
  .filterBar select,.filterBar input{padding:8px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:12.5px;background:#fff;transition:border-color .15s,box-shadow .15s;}
  .filterBar select:hover,.filterBar input:hover{border-color:#CBD5E1;}
  .filterBar select:focus,.filterBar input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(20,184,166,.16);}

  .formGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  @media(max-width:700px){.formGrid{grid-template-columns:1fr;}}
  .checkRow{display:flex;align-items:center;gap:8px;font-size:13px;padding:4px 0;}

  .bar{height:10px;border-radius:6px;background:#E2E8F0;overflow:hidden;display:flex;}
  .bar span{height:100%;}
  .barLegend{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11.5px;color:var(--muted);}
  .barLegend .dot{width:8px;height:8px;border-radius:2px;display:inline-block;margin-right:5px;}

  .empty{color:var(--muted);font-size:13px;padding:20px 4px;text-align:center;}
  .logRow{display:flex;gap:10px;padding:9px 0;border-bottom:1px solid var(--border);font-size:12.5px;}
  .logRow:last-child{border-bottom:none;}
  .logRow .t{color:var(--muted);white-space:nowrap;font-family:'JetBrains Mono',monospace;font-size:11px;padding-top:1px;}

  .pendingRow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:13px;}
  .pendingRow:last-child{border-bottom:none;}
  .pendingRow .dotWarn{width:7px;height:7px;border-radius:50%;background:var(--amber);flex-shrink:0;}

  .toast{position:fixed;bottom:20px;right:20px;background:var(--navy);color:#fff;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:999;opacity:0;transform:translateY(8px);transition:all .25s;max-width:360px;}
  .toast.show{opacity:1;transform:translateY(0);}

  .modalBg{display:none;position:fixed;inset:0;background:rgba(11,18,32,.55);align-items:center;justify-content:center;z-index:500;padding:20px;}
  .modalBg.show{display:flex;}
  .modalCard{background:#fff;border-radius:12px;padding:22px 24px;width:480px;max-width:92vw;max-height:85vh;overflow-y:auto;}
  .modalCard h3{margin:0 0 14px;font-size:16px;}
  .closeX{float:right;background:none;border:none;font-size:18px;color:var(--muted);}

  .loading{display:flex;align-items:center;justify-content:center;min-height:100vh;color:var(--muted);font-size:13px;}
  .trail{border-left:2px solid var(--border);padding-left:14px;margin:14px 0;}
  .trailItem{position:relative;padding-bottom:14px;font-size:12.5px;}
  .trailItem:before{content:'';position:absolute;left:-19px;top:3px;width:8px;height:8px;border-radius:50%;background:var(--teal);}
  .trailItem:last-child{padding-bottom:0;}