:root{
    --bg:#EEF1F3;
    --panel:#FFFFFF;
    --sidebar:#0E1A1B;
    --sidebar-soft:#16292A;
    --accent:#0F7173;
    --accent-dark:#0B5153;
    --accent-soft:#E4F2F1;
    --warm:#C9700B;
    --warm-soft:#FBEBD8;
    --danger:#B3382C;
    --danger-soft:#FBE9E6;
    --good:#2E7D46;
    --good-soft:#E6F4EA;
    --text:#182226;
    --text-mute:#5B6B70;
    --border:#DCE2E4;
    --radius:10px;
  }
  *{box-sizing:border-box;}
  body{margin:0;background:var(--bg);color:var(--text);font-family:'Inter',system-ui,sans-serif;font-size:14px;}
  h1,h2,h3,.disp{font-family:'Space Grotesk',system-ui,sans-serif;}
  .mono{font-family:'JetBrains Mono',monospace;}
  .layout{display:flex;min-height:100vh;}
  .sidebar{width:222px;background:var(--sidebar);color:#CFE3E2;flex-shrink:0;display:flex;flex-direction:column;padding:20px 0;}
  .brand{padding:0 20px 18px 20px;border-bottom:1px solid #223335;margin-bottom:8px;}
  .brand .tag{font-size:10px;letter-spacing:2px;color:#6FA9A6;text-transform:uppercase;}
  .brand .title{font-size:19px;font-weight:700;color:#F2F7F6;margin-top:2px;}
  .nav{display:flex;flex-direction:column;gap:2px;padding:8px 10px;}
  .nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;color:#B7CBC9;font-size:13.5px;font-weight:500;border-left:3px solid transparent;}
  .nav-item .dot{width:6px;height:6px;border-radius:50%;background:#3E5C5A;flex-shrink:0;}
  .nav-item:hover{background:var(--sidebar-soft);color:#fff;}
  .nav-item.active{background:var(--sidebar-soft);color:#fff;border-left:3px solid var(--accent);}
  .nav-item.active .dot{background:var(--accent);}
  .sidebar-foot{margin-top:auto;padding:14px 20px;font-size:10.5px;color:#527C79;border-top:1px solid #223335;}
  .main{flex:1;display:flex;flex-direction:column;min-width:0;}
  .topbar{background:var(--panel);border-bottom:1px solid var(--border);padding:14px 28px;display:flex;align-items:center;justify-content:space-between;gap:16px;}
  .topbar h1{font-size:17px;margin:0;font-weight:700;}
  .topbar .sub{font-size:12px;color:var(--text-mute);margin-top:2px;}
  .admin-picker{display:flex;align-items:center;gap:8px;background:var(--accent-soft);border:1px solid #CDE7E5;padding:6px 12px;border-radius:20px;}
  .admin-picker label{font-size:11px;color:var(--accent-dark);font-weight:600;text-transform:uppercase;letter-spacing:.5px;}
  .admin-picker select{border:none;background:transparent;font-weight:600;color:var(--accent-dark);font-size:13px;}
  .content{padding:24px 28px 60px 28px;overflow-y:auto;}
  .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;}
  .card h2{font-size:15px;margin:0 0 14px 0;display:flex;align-items:center;gap:8px;}
  .card h2 .idx{font-family:'JetBrains Mono',monospace;font-size:11px;background:var(--accent);color:#fff;padding:2px 7px;border-radius:5px;}
  .form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}
  .field{display:flex;flex-direction:column;gap:5px;}
  .field.span2{grid-column:span 2;}
  .field label{font-size:11.5px;font-weight:600;color:var(--text-mute);text-transform:uppercase;letter-spacing:.4px;}
  input[type=text],input[type=date],input[type=number],select,textarea{
    border:1px solid var(--border);border-radius:7px;padding:8px 10px;font-size:13.5px;font-family:inherit;background:#FCFDFD;color:var(--text);
  }
  textarea{resize:vertical;min-height:56px;}
  input:focus,select:focus,textarea:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent);}
  .check-row{display:flex;flex-wrap:wrap;gap:12px;}
  .check-pill{display:flex;align-items:center;gap:6px;border:1px solid var(--border);padding:6px 10px;border-radius:20px;font-size:12.5px;cursor:pointer;user-select:none;}
  .check-pill input{margin:0;}
  .check-pill.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-dark);font-weight:600;}
  .radio-row{display:flex;gap:14px;align-items:center;}
  .radio-row label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:500;}
  .btn{border:none;border-radius:7px;padding:9px 16px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;}
  .btn-primary{background:var(--accent);color:#fff;}
  .btn-primary:hover{background:var(--accent-dark);}
  .btn-ghost{background:#fff;border:1px solid var(--border);color:var(--text);}
  .btn-ghost:hover{background:#F3F5F6;}
  .btn-danger{background:var(--danger-soft);color:var(--danger);}
  .btn-danger:hover{background:#F6D9D4;}
  .btn-sm{padding:5px 10px;font-size:11.5px;border-radius:6px;}
  .row-actions{display:flex;gap:6px;}
  .form-actions{margin-top:16px;display:flex;gap:10px;}
  table{width:100%;border-collapse:collapse;font-size:12.8px;}
  th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-mute);border-bottom:1px solid var(--border);padding:8px 10px;background:#FAFBFC;}
  td{padding:9px 10px;border-bottom:1px solid #EEF0F1;vertical-align:top;}
  tr:hover td{background:#FAFDFD;}
  .badge{display:inline-block;padding:2px 8px;border-radius:12px;font-size:10.8px;font-weight:700;letter-spacing:.3px;text-transform:uppercase;}
  .b-good{background:var(--good-soft);color:var(--good);}
  .b-warm{background:var(--warm-soft);color:var(--warm);}
  .b-danger{background:var(--danger-soft);color:var(--danger);}
  .b-mute{background:#EEF1F2;color:var(--text-mute);}
  .b-accent{background:var(--accent-soft);color:var(--accent-dark);}
  .empty{padding:26px;text-align:center;color:var(--text-mute);font-size:13px;border:1px dashed var(--border);border-radius:8px;}
  .thumb-link{color:var(--accent-dark);font-weight:600;font-size:12px;text-decoration:none;border-bottom:1px dashed var(--accent);}
  .subtabs{display:flex;gap:6px;margin-bottom:16px;}
  .subtab{padding:7px 14px;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text-mute);border:1px solid var(--border);background:#fff;}
  .subtab.active{background:var(--sidebar);color:#fff;border-color:var(--sidebar);}
  .dyn-row{display:flex;gap:8px;margin-bottom:8px;align-items:center;}
  .dyn-row input{flex:1;}
  .stat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin-bottom:20px;}
  .stat-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;position:relative;overflow:hidden;}
  .stat-card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent);}
  .stat-card .num{font-family:'Space Grotesk';font-size:26px;font-weight:700;}
  .stat-card .lbl{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.4px;margin-top:2px;}
  .hint{font-size:11.5px;color:var(--text-mute);margin-top:4px;}
  .toast{position:fixed;bottom:20px;right:20px;background:var(--sidebar);color:#fff;padding:12px 18px;border-radius:8px;font-size:13px;box-shadow:0 8px 24px rgba(0,0,0,.2);z-index:999;max-width:340px;}
  .toast.err{background:var(--danger);}
  .req-id{background:#F3F1EC;border:1px solid var(--border);padding:8px 10px;border-radius:7px;font-family:'JetBrains Mono';font-size:12px;color:var(--text-mute);}
  .id-badge{font-family:'JetBrains Mono';font-size:11.5px;background:#EEF1F2;padding:2px 6px;border-radius:5px;}
  .audit-block{border:1px solid var(--border);border-radius:8px;padding:12px;margin-top:10px;background:#FAFBFC;}
  ::placeholder{color:#A8B3B5;}
  .hidden{display:none !important;}
  .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--sidebar);}
  .login-card{background:var(--panel);width:380px;border-radius:14px;padding:30px 28px;box-shadow:0 20px 50px rgba(0,0,0,.35);}
  .login-card .tag{font-size:10px;letter-spacing:2px;color:var(--accent);text-transform:uppercase;font-weight:700;}
  .login-card h1{font-size:20px;margin:4px 0 18px 0;}
  .login-tabs{display:flex;gap:6px;margin-bottom:18px;background:#F1F3F4;border-radius:8px;padding:4px;}
  .login-tab{flex:1;text-align:center;padding:8px;border-radius:6px;font-size:12.5px;font-weight:600;cursor:pointer;color:var(--text-mute);}
  .login-tab.active{background:#fff;color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08);}
  .login-pane{display:flex;flex-direction:column;gap:12px;}
  .login-err{color:var(--danger);font-size:12.5px;min-height:16px;}
  .role-badge{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;padding:4px 10px;border-radius:12px;background:var(--sidebar);color:#CFE3E2;}

  /* ---------- Team alert scrolling banner ---------- */
  .alert-banner{background:var(--danger-soft);border-bottom:1px solid #F1C9C1;overflow:hidden;position:relative;height:34px;display:flex;align-items:center;}
  .alert-banner-track{white-space:nowrap;display:inline-block;padding-left:100%;color:var(--danger);font-weight:700;font-size:13px;letter-spacing:.2px;animation:dp-marquee 22s linear infinite;}
  .alert-banner-track b{margin:0 6px;}
  @keyframes dp-marquee{0%{transform:translateX(0);}100%{transform:translateX(-100%);}}

  /* ---------- Dashboard welcome ---------- */
  .welcome-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
  .welcome-row .hello{font-family:'Space Grotesk';font-size:19px;font-weight:700;}
  .welcome-row .hello span{color:var(--accent-dark);}
  .welcome-row .today-date{font-size:12.5px;color:var(--text-mute);background:var(--panel);border:1px solid var(--border);padding:7px 12px;border-radius:20px;font-weight:600;}

  /* ---------- Reports ---------- */
  .filter-bar{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;margin-bottom:6px;}
  .filter-bar .field{min-width:150px;}
  .report-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:18px 0;}
  .report-chart-row{display:flex;gap:28px;flex-wrap:wrap;align-items:flex-start;}
  .pie-legend{display:flex;flex-direction:column;gap:8px;padding-top:6px;}
  .pie-legend-item{display:flex;align-items:center;gap:8px;font-size:12.8px;}
  .pie-swatch{width:11px;height:11px;border-radius:3px;flex-shrink:0;}
  .rank-list{list-style:none;margin:0;padding:0;counter-reset:rank;}
  .rank-list li{counter-increment:rank;display:flex;align-items:center;justify-content:space-between;padding:8px 4px;border-bottom:1px solid #EEF0F1;font-size:13px;}
  .rank-list li:last-child{border-bottom:none;}
  .rank-list li::before{content:counter(rank);width:20px;height:20px;border-radius:50%;background:var(--accent-soft);color:var(--accent-dark);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;margin-right:10px;flex-shrink:0;}
  .rank-name{flex:1;font-weight:600;}
  .rank-val{font-family:'JetBrains Mono';color:var(--text-mute);font-size:12px;}
  .top-boards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px;}

  /* ---------- KRA / KPI ---------- */
  .kra-goal-card{border:1px solid var(--border);border-radius:8px;padding:14px 16px;margin-bottom:14px;background:#FAFBFC;}
  .kra-goal-card h3{margin:0 0 4px 0;font-size:14.5px;}
  .kra-goal-card .sub-count{font-size:11px;color:var(--text-mute);text-transform:uppercase;letter-spacing:.4px;margin-bottom:10px;}
  .kra-subgoal{border-top:1px dashed var(--border);padding:10px 0;}
  .kra-subgoal .q{font-size:13px;font-weight:600;margin-bottom:8px;}
  .kra-answer-list{list-style:none;margin:0 0 8px 0;padding:0;}
  .kra-answer-list li{background:var(--accent-soft);color:var(--accent-dark);border-radius:6px;padding:6px 10px;font-size:12.5px;margin-bottom:5px;display:flex;justify-content:space-between;gap:8px;align-items:center;}
  .kra-answer-add{display:flex;gap:8px;}
  .kra-answer-add input{flex:1;}

  /* ---------- Print (PDF export) ---------- */
  @media print{
    .sidebar, .topbar, .alert-banner, .no-print { display:none !important; }
    .main, .content { padding:0 !important; margin:0 !important; }
    .card { break-inside: avoid; border:1px solid #ccc; }
    body { background:#fff; }
  }