:root{
    --ink:#10233B; --ink-2:#1B3A5C; --paper:#F6F3EA; --card:#FFFFFF;
    --brass:#A9812F; --brass-light:#F3EAD3; --teal:#146B67; --teal-light:#E4F1EF;
    --amber:#B8791C; --amber-light:#FBF0DD; --red:#AE3327; --red-light:#FBEAE7;
    --green:#1D7A46; --green-light:#E7F5EC; --indigo:#3B4C8C; --indigo-light:#EBEDF7;
    --muted:#63697A; --line:#E6E0D1; --bg:var(--paper); --navy:var(--ink); --navy-light:var(--ink-2);
    --teal-light2:var(--teal-light); --radius:12px;
    --serif:'Fraunces',Georgia,serif; --sans:'Inter',-apple-system,'Segoe UI',Arial,sans-serif; --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
    --blueprint: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px),
                 repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 1px, transparent 1px 42px);
  }
  *{box-sizing:border-box;}
  body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--ink);}
  h1,h2,h3{font-family:var(--serif);letter-spacing:-.01em;}
  .topbar{background:var(--ink);background-image:var(--blueprint);color:#fff;padding:16px 24px;display:flex;justify-content:space-between;align-items:center;border-bottom:3px solid var(--brass);}
  .topbar .brand{display:flex;align-items:center;gap:12px;font-weight:600;font-size:19px;font-family:var(--serif);}
  .topbar .brand .tag{background:var(--brass);color:var(--ink);font-family:var(--mono);font-size:10.5px;padding:4px 9px;border-radius:20px;font-weight:600;letter-spacing:.6px;}
  .topbar .who{font-size:13px;opacity:.92;display:flex;align-items:center;gap:12px;font-family:var(--sans);}
  .topbar button{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.35);color:#fff;padding:7px 14px;border-radius:7px;cursor:pointer;font-size:12px;font-family:var(--sans);}
  .topbar button:hover{background:var(--brass);border-color:var(--brass);color:var(--ink);}
  .wrap{max-width:1180px;margin:0 auto;padding:22px;}
  .app-shell{display:flex;min-height:100vh;align-items:stretch;background:var(--paper);}
  .sidebar{
    flex:0 0 264px;width:264px;color:var(--ink);display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;
    background:
      radial-gradient(520px 300px at 12% -10%, rgba(212,168,90,.10), transparent 60%),
      radial-gradient(420px 260px at 105% 105%, rgba(60,130,140,.08), transparent 55%),
      linear-gradient(180deg, #ffffff 0%, #fbf9f3 100%);
    border-right:1px solid var(--line);
    box-shadow: 6px 0 24px rgba(16,35,59,.05);
  }
  .sidebar::-webkit-scrollbar{width:6px;}
  .sidebar::-webkit-scrollbar-track{background:transparent;}
  .sidebar::-webkit-scrollbar-thumb{background:rgba(16,35,59,.14);border-radius:10px;}
  .sb-brand{display:flex;align-items:center;gap:12px;padding:22px 20px 18px;}
  .sb-logo{
    flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
    font-family:var(--serif);font-weight:700;font-size:14px;color:#fff;
    background:linear-gradient(135deg, #e6c37a 0%, var(--brass) 55%, #b8842e 100%);
    box-shadow:0 4px 14px rgba(212,168,90,.3), inset 0 1px 0 rgba(255,255,255,.4);
  }
  .sb-brand-name{font-weight:600;font-size:15.5px;font-family:var(--serif);letter-spacing:-.01em;color:var(--ink);line-height:1.25;}
  .sb-brand .tag{display:inline-block;margin-top:6px;background:var(--brass-light);color:#8a6420;font-family:var(--mono);font-size:9.5px;padding:3px 8px;border-radius:20px;font-weight:600;letter-spacing:.6px;border:1px solid rgba(169,129,47,.25);}
  .sb-nav{flex:1;display:flex;flex-direction:column;gap:2px;padding:10px 12px;overflow-y:auto;}
  .sb-nav button{
    display:flex;align-items:center;gap:11px;text-align:left;background:transparent;border:none;
    color:#000;padding:9px 12px;border-radius:10px;cursor:pointer;font-size:13.2px;font-weight:800;
    font-family:var(--sans);transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .sb-icon{width:16.5px;height:16.5px;flex:0 0 auto;opacity:.9;}
  .sb-nav button:hover{background:var(--brass-light);color:#000;transform:translateX(2px);}
  .sb-nav button:hover .sb-icon{opacity:1;}
  .sb-nav button.active{
    background:linear-gradient(135deg, var(--brass) 0%, #c9a24b 100%);
    color:#fff;box-shadow:0 4px 14px rgba(169,129,47,.32);
  }
  .sb-nav button.active .sb-icon{opacity:1;color:#fff;}
  .sb-who{display:flex;align-items:center;gap:10px;padding:16px 18px;margin:6px 12px 0;border-top:1px solid var(--line);}
  .sb-avatar{
    width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;
    font-weight:700;font-size:13.5px;flex:0 0 auto;font-family:var(--sans);color:#fff;
    background:linear-gradient(135deg, #e6c37a, #b8842e);box-shadow:0 2px 8px rgba(212,168,90,.3);
  }
  .sb-who-info{min-width:0;overflow:hidden;}
  .sb-name{font-size:12.8px;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .sb-role{font-size:10.5px;color:var(--muted);text-transform:capitalize;}
  .sb-logout{
    margin:10px 16px 18px;background:#fff;border:1px solid var(--line);color:var(--ink-2);
    padding:9px 14px;border-radius:9px;cursor:pointer;font-size:12px;font-weight:600;font-family:var(--sans);transition:all .15s ease;
  }
  .sb-logout:hover{background:#fdecec;border-color:#f0b8b8;color:var(--red);}
  .main{flex:1;min-width:0;}
  @media (max-width: 760px){
    .app-shell{flex-direction:column;}
    .sidebar{position:static;height:auto;width:100%;flex:0 0 auto;}
    .sb-nav{flex-direction:row;flex-wrap:nowrap;overflow-x:auto;}
    .sb-nav button{white-space:nowrap;}
    .sb-nav button:hover{transform:none;}
  }
  .tabs{display:flex;flex-direction:row;flex-wrap:nowrap;gap:6px;margin-bottom:20px;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:4px;}
  .tabs button{flex:0 0 auto;white-space:nowrap;background:var(--card);border:1px solid var(--line);padding:9px 17px;border-radius:8px;cursor:pointer;font-size:13.5px;color:var(--muted);font-weight:600;font-family:var(--sans);transition:all .15s;}
  .tabs button:hover{border-color:var(--brass);color:var(--ink);}
  .tabs button.active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 0 0 2px var(--brass-light);}
  .card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;margin-bottom:16px;box-shadow:0 1px 2px rgba(16,35,59,.04);}
  .card h3{margin:0 0 4px;font-size:17px;font-weight:600;color:var(--ink);padding-bottom:10px;border-bottom:2px solid var(--brass-light);}
  .card .sub{color:var(--muted);font-size:12.5px;margin:10px 0 14px;}
  .grid{display:grid;gap:14px;}
  .g2{grid-template-columns:1fr 1fr;} .g3{grid-template-columns:repeat(3,1fr);} .g4{grid-template-columns:repeat(4,1fr);}
  @media(max-width:800px){.g2,.g3,.g4{grid-template-columns:1fr;}}
  label{display:block;font-size:11.5px;font-weight:600;color:var(--muted);margin-bottom:5px;text-transform:uppercase;letter-spacing:.3px;}
  select,input,textarea{width:100%;padding:9px 10px;border:1px solid var(--line);border-radius:7px;font-size:13.5px;font-family:var(--sans);background:#fff;color:var(--ink);}
  select:focus,input:focus,textarea:focus{outline:2px solid var(--brass);outline-offset:1px;border-color:var(--brass);}
  textarea{resize:vertical;min-height:60px;}
  .btn{background:var(--ink);color:#fff;border:none;padding:10px 18px;border-radius:7px;cursor:pointer;font-weight:600;font-size:13.5px;font-family:var(--sans);transition:transform .1s;}
  .btn:hover{background:var(--ink-2);}
  .btn:active{transform:scale(.98);}
  .btn.teal{background:var(--teal);} .btn.teal:hover{background:#0f5652;}
  .btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--ink);}
  .btn.ghost:hover{background:var(--brass-light);border-color:var(--brass);}
  .btn.red{background:var(--red);} .btn.sm{padding:6px 12px;font-size:12px;}
  table{width:100%;border-collapse:collapse;font-size:13px;}
  th{text-align:left;color:var(--muted);font-size:10.5px;text-transform:uppercase;letter-spacing:.5px;font-family:var(--mono);font-weight:600;padding:9px 10px;border-bottom:2px solid var(--brass-light);}
  td{padding:11px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
  tr:hover td{background:var(--brass-light);background:#FBF8F1;}
  .pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:10.5px;font-weight:700;font-family:var(--mono);letter-spacing:.2px;}
  .p-open{background:var(--red-light);color:var(--red);}
  .p-attended{background:var(--amber-light);color:var(--amber);}
  .p-vendor{background:var(--indigo-light);color:var(--indigo);}
  .p-resolved{background:var(--teal-light);color:var(--teal);}
  .p-closed{background:var(--green-light);color:var(--green);}
  .p-esc{background:var(--red);color:#fff;}
  .kpi{display:flex;flex-direction:column;gap:2px;}
  .kpi .num{font-size:30px;font-weight:700;color:var(--ink);font-family:var(--serif);}
  .kpi .lbl{font-size:11px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px;}
  .kpi.sm .num{font-size:22px;}
  .barchart{margin-top:6px;}
  .bar-row{display:flex;align-items:center;gap:12px;margin:13px 0;}
  .bar-row:first-child{margin-top:2px;}
  .bar-label{width:150px;flex-shrink:0;font-size:12.5px;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .bar-track{flex:1;background:#EFEAE0;border-radius:7px;height:15px;overflow:hidden;position:relative;}
  .bar-fill{height:100%;border-radius:7px;transition:width .4s ease;}
  .bar-value{min-width:44px;flex-shrink:0;text-align:right;font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink);white-space:nowrap;}
  .chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin:2px 0 4px;}
  .chart-legend .lg-item{display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--muted);font-weight:600;}
  .chart-legend .lg-dot{width:9px;height:9px;border-radius:3px;display:inline-block;}
  .login-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--ink);background-image:var(--blueprint),radial-gradient(circle at 30% 20%, rgba(169,129,47,.18), transparent 55%);}
  .login-box{background:#fff;padding:36px 34px 30px;border-radius:16px;width:390px;box-shadow:0 24px 60px rgba(0,0,0,.35);border-top:4px solid var(--brass);}
  .login-box h2{margin:0 0 3px;font-size:23px;color:var(--ink);}
  .login-box .sub{color:var(--muted);font-size:12.5px;margin-bottom:22px;}
  .login-box label{margin-top:12px;}
  .err{color:var(--red);font-size:12.5px;margin-top:10px;}
  .note{background:var(--amber-light);color:#6b4d0f;border:1px solid #e8d3a0;padding:11px 13px;border-radius:8px;font-size:12px;margin-top:12px;}
  .role-switch{margin-top:18px;border-top:1px solid var(--line);padding-top:14px;}
  .role-switch a{font-size:11.5px;color:var(--muted);cursor:pointer;text-decoration:underline;}
  .empty{text-align:center;padding:34px;color:var(--muted);font-size:13px;}
  .badge-common{background:var(--indigo-light);color:var(--indigo);padding:2px 8px;border-radius:5px;font-size:10px;font-weight:700;margin-left:6px;font-family:var(--mono);}
  .flow{display:flex;gap:0;align-items:center;font-size:11.5px;color:var(--muted);margin-top:4px;}
  .sla-ok{color:var(--green);font-weight:700;} .sla-warn{color:var(--amber);font-weight:700;} .sla-bad{color:var(--red);font-weight:700;}