:root{
    --sidebar-bg:#14161f;
    --sidebar-bg-2:#1b1e2b;
    --red:#e8112d;
    --red-dark:#c00d24;
    --page-bg:#f4f5fa;
    --card-bg:#ffffff;
    --text-dark:#14161f;
    --text-mid:#6b7080;
    --text-light:#9aa0b0;
    --border:#ececf3;
    --blue:#3b7dfb;
    --purple:#8b5cf6;
    --green:#22c55e;
    --amber:#f5a524;
    --shadow: 0 1px 3px rgba(20,22,31,.06), 0 8px 24px rgba(20,22,31,.04);
    --radius:16px;
  }
  *{box-sizing:border-box;}
  html,body{overflow-x:hidden;max-width:100%;}
  body{margin:0;font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--page-bg);color:var(--text-dark);}
  a{text-decoration:none;color:inherit;}
  button{font-family:inherit;cursor:pointer;}
  ::-webkit-scrollbar{width:8px;height:8px;}
  ::-webkit-scrollbar-thumb{background:#d7d9e4;border-radius:4px;}
  img.brand-logo-img{display:block;}

  /* ---------------- LOGIN SCREEN ---------------- */
  #loginScreen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 20% 20%,#1b1e2b,#0c0d13 65%);padding:20px;}
  .login-card{background:#fff;border-radius:22px;width:420px;max-width:100%;padding:38px 34px;box-shadow:0 30px 80px rgba(0,0,0,.35);text-align:center;}
  .login-card img{width:190px;margin:0 auto 22px;}
  .login-card h1{font-size:19px;margin:0 0 4px;}
  .login-card .sub{font-size:13px;color:var(--text-mid);margin-bottom:26px;}
  .login-field{text-align:left;margin-bottom:14px;}
  .login-field label{font-size:12.5px;font-weight:700;color:var(--text-mid);display:block;margin-bottom:6px;}
  .login-field input{width:100%;padding:12px 14px;border:1px solid var(--border);border-radius:11px;font-size:13.5px;font-family:inherit;outline:none;}
  .login-field input:focus{border-color:var(--red);}
  .login-btn{width:100%;padding:13px;border:none;border-radius:12px;background:var(--red);color:#fff;font-weight:700;font-size:14px;margin-top:6px;}
  .login-btn:hover{background:var(--red-dark);}

  .app{display:flex;min-height:100vh;}

  /* SIDEBAR */
  .sidebar{width:264px;background:var(--sidebar-bg);color:#fff;flex-shrink:0;display:flex;flex-direction:column;padding:22px 16px;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:95;}
  .brand{padding:2px 8px 14px;display:flex;justify-content:center;}
  .brand-sub{font-size:11px;color:#8b8fa3;padding:0 8px 20px;letter-spacing:.2px;text-align:center;}
  .nav{display:flex;flex-direction:column;gap:2px;flex:1;}
  .nav-section-label{font-size:10.5px;font-weight:700;letter-spacing:.6px;color:#5c6079;text-transform:uppercase;padding:14px 14px 6px;}
  .nav-item{display:flex;align-items:center;gap:12px;padding:11px 14px;border-radius:10px;color:#b7bacb;font-size:14.5px;font-weight:500;transition:background .15s,color .15s;border:none;background:none;width:100%;text-align:left;}
  .nav-item:hover{background:#20232f;color:#fff;}
  .nav-item.active{background:linear-gradient(135deg,var(--red),var(--red-dark));color:#fff;box-shadow:0 4px 14px rgba(232,17,45,.35);}
  .sidebar-bottom{margin-top:14px;padding-top:14px;border-top:1px solid #262939;}
  .user-card{display:flex;align-items:center;gap:10px;padding:8px;}
  .user-avatar{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#3b7dfb,#8b5cf6);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;}
  .user-avatar.role-admin{background:linear-gradient(135deg,#e8112d,#c00d24);}
  .user-name{font-size:13px;font-weight:600;color:#fff;}
  .user-role{font-size:11px;color:#8b8fa3;}
  .sidebar-icons{display:flex;gap:6px;padding:10px 4px 0;}
  .sidebar-icons button{background:none;border:none;color:#8b8fa3;padding:6px 10px;border-radius:8px;font-size:11.5px;font-weight:700;}
  .sidebar-icons button:hover{background:#20232f;color:#fff;}

  .sidebar-backdrop{position:fixed;inset:0;background:rgba(10,10,15,.5);z-index:90;display:none;}
  .sidebar-backdrop.show{display:block;}

  /* MAIN */
  .main{flex:1;min-width:0;}
  .topbar{display:flex;align-items:center;gap:16px;padding:18px 32px;background:var(--page-bg);position:sticky;top:0;z-index:20;flex-wrap:wrap;}
  .hamburger{display:none;background:#fff;border:1px solid var(--border);width:42px;height:42px;border-radius:12px;align-items:center;justify-content:center;flex-shrink:0;}
  .search{flex:1;max-width:520px;display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:11px 16px;color:var(--text-light);font-size:14px;}
  .search svg{flex-shrink:0;opacity:.6;}
  .search input{border:none;outline:none;flex:1;font-size:14px;font-family:inherit;background:transparent;min-width:0;}
  .btn{display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:11px 18px;font-size:14px;font-weight:600;border:none;white-space:nowrap;}
  .btn-primary{background:var(--red);color:#fff;box-shadow:0 4px 14px rgba(232,17,45,.3);}
  .btn-primary:hover{background:var(--red-dark);}
  .btn-secondary{background:#fff;border:1px solid var(--border);color:var(--text-dark);}
  .btn-secondary:hover{background:#f7f7fb;}
  .btn-ghost{background:#f4f0ff;color:var(--purple);}
  .btn-danger{background:#fdeaec;color:var(--red-dark);}
  .icon-btn{position:relative;width:42px;height:42px;border-radius:12px;background:#fff;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
  .icon-btn:hover{background:#f7f7fb;}
  .badge-dot{position:absolute;top:-4px;right:-4px;background:var(--red);color:#fff;font-size:10px;font-weight:700;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;}

  .content{padding:8px 32px 48px;}
  .view{display:none;}
  .view.active{display:block;animation:fadein .2s ease;}
  .fin-panel{display:none;}
  .fin-panel.active{display:block;animation:fadein .2s ease;}
  @keyframes fadein{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:translateY(0);}}

  h1.page-title{font-size:22px;margin:6px 0 20px;}
  .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
  .row h2{font-size:16px;margin:0;}
  .link-btn{font-size:13px;font-weight:600;color:var(--text-mid);background:#f4f5fa;border-radius:8px;padding:6px 12px;border:none;}
  .link-btn:hover{background:#eceef5;}

  .kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
  .kpi-grid > *{min-width:0;}
  .kpi-card{background:var(--card-bg);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow);display:flex;justify-content:space-between;align-items:flex-start;}
  .kpi-card .lbl{font-size:13px;color:var(--text-mid);margin-bottom:6px;}
  .kpi-card .val{font-size:26px;font-weight:800;}
  .kpi-card .delta{font-size:12px;color:var(--green);font-weight:600;margin-top:4px;}
  .kpi-icon{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}

  .grid-2{display:grid;grid-template-columns:1.1fr 1.5fr;gap:16px;margin-bottom:16px;}
  .grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;margin-bottom:16px;}
  .grid-2 > *,.grid-3 > *{min-width:0;}
  .card{background:var(--card-bg);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow);min-width:0;}

  .legend-item{display:flex;align-items:center;justify-content:space-between;font-size:13px;padding:7px 0;}
  .legend-dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:8px;flex-shrink:0;}
  .legend-left{display:flex;align-items:center;color:var(--text-mid);}
  .legend-val{font-weight:700;color:var(--text-dark);}

  .donut-wrap{display:flex;align-items:center;gap:22px;flex-wrap:wrap;}
  .donut-wrap > *{min-width:0;}
  .donut{position:relative;width:150px;height:150px;flex-shrink:0;}
  .donut .center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .donut .center b{font-size:26px;}
  .donut .center span{font-size:12px;color:var(--text-mid);}

  .bar-item{margin-bottom:14px;}
  .bar-item .bi-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px;gap:8px;}
  .bar-item .bi-top .name{font-weight:600;}
  .bar-track{height:8px;background:#eef0f7;border-radius:5px;overflow:hidden;}
  .bar-fill{height:100%;border-radius:5px;}

  .gantt-row{display:flex;align-items:center;margin-bottom:16px;}
  .gantt-label{width:190px;font-size:13px;font-weight:600;flex-shrink:0;}
  .gantt-track{flex:1;position:relative;height:26px;}
  .gantt-bar{position:absolute;height:12px;border-radius:6px;top:7px;}

  .milestone-row{display:flex;gap:14px;overflow-x:auto;padding-bottom:6px;}
  .m-card{min-width:190px;background:#fafafd;border:1px solid var(--border);border-radius:14px;padding:14px;flex-shrink:0;cursor:pointer;transition:box-shadow .15s;}
  .m-card:hover{box-shadow:0 6px 18px rgba(20,22,31,.08);}
  .m-date{display:flex;align-items:baseline;gap:6px;margin-bottom:8px;}
  .m-date b{font-size:20px;}
  .m-date span{font-size:11px;color:var(--text-mid);font-weight:700;letter-spacing:.5px;}
  .m-title{font-size:13.5px;font-weight:700;margin-bottom:2px;}
  .m-sub{font-size:12px;color:var(--text-mid);margin-bottom:10px;}
  .m-d{font-size:11px;font-weight:700;color:var(--red);background:#fdeaec;display:inline-block;padding:3px 8px;border-radius:6px;}

  .activity-item,.alert-item{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid #f4f4f9;}
  .activity-item:last-child,.alert-item:last-child{border-bottom:none;}
  .a-icon{width:34px;height:34px;border-radius:9px;flex-shrink:0;display:flex;align-items:center;justify-content:center;}
  .a-title{font-size:13px;font-weight:700;}
  .a-sub{font-size:12.5px;color:var(--text-mid);}
  .a-time{font-size:11px;color:var(--text-light);white-space:nowrap;}

  .chip{font-size:11px;font-weight:700;padding:4px 10px;border-radius:20px;display:inline-block;white-space:nowrap;}
  .chip-green{background:#e6f8ee;color:#159a48;}
  .chip-amber{background:#fef3e0;color:#b6790a;}
  .chip-red{background:#fdeaec;color:var(--red-dark);}
  .chip-blue{background:#e9f0ff;color:#2160e0;}
  .chip-gray{background:#eef0f7;color:var(--text-mid);}

  .table-scroll{overflow-x:auto;}
  table{width:100%;border-collapse:collapse;}
  th{text-align:left;font-size:12px;color:var(--text-mid);font-weight:700;padding:10px 12px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.3px;white-space:nowrap;}
  td{padding:13px 12px;font-size:13.5px;border-bottom:1px solid #f4f4f9;white-space:nowrap;}
  tr.tr-hover:hover{background:#fafafd;cursor:pointer;}
  .pic-avatar{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#3b7dfb,#8b5cf6);color:#fff;font-size:10.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;margin-right:6px;flex-shrink:0;}
  .table-compact th{padding:8px 8px;font-size:11px;}
  .table-compact td{padding:9px 8px;font-size:12.5px;}
  .table-compact .pic-avatar{width:22px;height:22px;font-size:9.5px;}

  .toolbar{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
  .filter-chip{background:#fff;border:1px solid var(--border);padding:8px 14px;border-radius:10px;font-size:13px;font-weight:600;color:var(--text-mid);}
  .filter-chip.active{background:var(--text-dark);color:#fff;border-color:var(--text-dark);}

  .overlay{position:fixed;inset:0;background:rgba(15,16,25,.55);display:none;align-items:center;justify-content:center;z-index:100;padding:20px;}
  .overlay.show{display:flex;}
  .modal{background:#fff;border-radius:18px;width:560px;max-width:100%;max-height:90vh;overflow-y:auto;padding:26px;position:relative;}
  .modal.modal-lg{width:720px;}
  .modal h3{margin:0 0 4px;font-size:18px;}
  .modal .m-desc{font-size:13px;color:var(--text-mid);margin-bottom:18px;}
  .field{margin-bottom:14px;}
  .field label{font-size:12.5px;font-weight:700;display:block;margin-bottom:6px;color:var(--text-mid);}
  .field input,.field select,.field textarea{width:100%;padding:11px 13px;border:1px solid var(--border);border-radius:10px;font-size:13.5px;font-family:inherit;outline:none;}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--red);}
  .field input:disabled,.field select:disabled{background:#f7f7fb;color:var(--text-light);}
  .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
  .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;flex-wrap:wrap;}
  .close-x{position:absolute;top:16px;right:16px;background:#f4f5fa;border:none;width:30px;height:30px;border-radius:8px;font-size:16px;}
  .modal-section{border-top:1px solid var(--border);margin-top:18px;padding-top:16px;}
  .modal-section h4{font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;color:var(--text-mid);margin:0 0 12px;}
  .sub-row{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid #f4f4f9;font-size:13px;flex-wrap:wrap;}
  .sub-row:last-child{border-bottom:none;}
  .sub-row select{padding:6px 8px;border-radius:7px;border:1px solid var(--border);font-size:12.5px;font-family:inherit;}
  .sub-row input[type=date]{padding:6px 8px;border-radius:7px;border:1px solid var(--border);font-size:12.5px;font-family:inherit;}
  .sub-name{flex:1;min-width:120px;font-weight:600;}
  .drag-handle{cursor:grab;color:var(--text-light);font-size:16px;padding:4px 6px;touch-action:none;user-select:none;flex-shrink:0;}
  .drag-handle:active{cursor:grabbing;}
  .sub-row.dragging{opacity:.5;background:#faf7ff;border-radius:8px;}
  .ai-suggest-box{background:#faf7ff;border:1px dashed #c9b8f5;border-radius:12px;padding:12px 14px;margin-top:8px;}
  .ai-sugg-row{display:flex;justify-content:space-between;align-items:center;padding:6px 0;font-size:13px;gap:10px;}
  .checklist{display:flex;flex-direction:column;gap:8px;max-height:140px;overflow-y:auto;border:1px solid var(--border);border-radius:10px;padding:10px;}
  .checklist label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:400;}
  .checklist input[type=checkbox]{width:auto;flex-shrink:0;padding:0;border:none;border-radius:0;}
  .small-btn{font-size:12px;font-weight:700;background:#f4f0ff;color:var(--purple);border:none;padding:5px 10px;border-radius:7px;}
  .small-btn.danger{background:#fdeaec;color:var(--red-dark);}
  .small-btn.green{background:#e6f8ee;color:#159a48;}

  .toast{position:fixed;bottom:26px;right:26px;left:26px;max-width:420px;margin-left:auto;background:var(--text-dark);color:#fff;padding:14px 20px;border-radius:12px;font-size:13.5px;font-weight:600;display:flex;align-items:center;gap:10px;z-index:200;box-shadow:0 10px 30px rgba(0,0,0,.25);opacity:0;transform:translateY(10px);transition:all .25s;pointer-events:none;}
  .toast.show{opacity:1;transform:translateY(0);}
  .toast .tdot{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;}

  .report-doc{background:#fff;border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);}
  .report-doc h2{margin-top:0;}
  .report-doc .r-meta{color:var(--text-mid);font-size:13px;margin-bottom:22px;}
  .report-doc .r-section{margin-bottom:22px;}
  .report-doc .r-section h4{font-size:13px;text-transform:uppercase;letter-spacing:.4px;color:var(--text-mid);margin-bottom:10px;}

  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;}
  .cal-day{background:#fff;border-radius:10px;min-height:96px;padding:8px;font-size:12px;color:var(--text-mid);border:1px solid var(--border);cursor:pointer;transition:box-shadow .15s;}
  .cal-day:hover{box-shadow:0 4px 14px rgba(20,22,31,.08);}
  .cal-day.today{border-color:var(--red);border-width:2px;background:#fff5f6;}
  .cal-day-empty{background:transparent;border:none;cursor:default;}
  .cal-day .dnum{font-weight:700;color:var(--text-dark);margin-bottom:6px;display:flex;justify-content:space-between;align-items:center;}
  .cal-evt{font-size:10.5px;font-weight:700;padding:2px 6px;border-radius:5px;margin-bottom:3px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .cal-more{font-size:10px;color:var(--text-light);font-weight:700;}

  .badge-pill{font-size:10.5px;font-weight:800;padding:2px 8px;border-radius:20px;}

  /* ================= RESPONSIVE ================= */
  @media (max-width:1200px){
    .kpi-grid{grid-template-columns:repeat(2,1fr);}
    .grid-2{grid-template-columns:1fr;}
    .grid-3{grid-template-columns:1fr;}
  }
  @media (max-width:1024px){
    .hamburger{display:flex;}
    .sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;z-index:96;}
    .sidebar.mobile-open{transform:translateX(0);box-shadow:0 0 40px rgba(0,0,0,.35);}
    .topbar{padding:14px 16px;}
    .search{order:3;flex:1 1 100%;max-width:100%;}
    .content{padding:6px 16px 40px;}
    .profile .profile-name,.profile .profile-role{display:none;}
    .profile{padding:6px;}
    .field-row{grid-template-columns:1fr;}
    table{min-width:640px;}
    .kpi-grid{grid-template-columns:repeat(2,1fr);}
    .grid-2,.grid-3{grid-template-columns:1fr;}
  }
  @media (max-width:520px){
    .kpi-grid{grid-template-columns:1fr;}
    .modal{padding:18px;}
    .demo-row{flex-direction:column;}
    .field-row{grid-template-columns:1fr;}
    #welcomeBanner > div{padding:22px 20px !important;}
    #welcomeBannerText{font-size:18px !important;}
    .gantt-label{width:110px;font-size:12px;}
  }