:root{
  --bg:#050b14; --bg2:#07111d; --panel:#0c1727; --panel2:#0f1d31; --line:#1d314e;
  --text:#edf4ff; --muted:#8ea3c2; --accent:#4da0ff; --accent2:#75d6ff;
  --green:#16d17a; --red:#ff6577; --amber:#ffb347; --purple:#9a89ff; --cyan:#5fe1ff;
  --radius:18px; --radius2:24px; --shadow:0 18px 48px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:
radial-gradient(1200px 500px at 10% 0%, rgba(77,160,255,.10), transparent 55%),
radial-gradient(1000px 450px at 100% 0%, rgba(154,137,255,.08), transparent 55%),
linear-gradient(180deg,#040914,#07101b 35%,#06101a 100%);
color:var(--text);font-family:Inter,Arial,sans-serif}
a{text-decoration:none;color:inherit}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
.small{font-size:12px;color:var(--muted)}
.footer-note{margin-top:14px;color:var(--muted);font-size:12px;line-height:1.6}
.status{padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700}
.status.high{background:rgba(255,101,119,.14);color:#ffc0c8}
.status.med{background:rgba(255,179,71,.14);color:#ffdcae}
.status.low{background:rgba(22,209,122,.14);color:#baf6d6}
.status.info{background:rgba(77,160,255,.14);color:#d1e8ff}
.badge{padding:3px 8px;border-radius:999px;font-size:11px}
.badge.blue{background:rgba(77,160,255,.14);color:#d2e8ff}
.badge.red{background:rgba(255,101,119,.14);color:#ffc0c8}
.badge.green{background:rgba(22,209,122,.14);color:#baf6d6}
.badge.amber{background:rgba(255,179,71,.14);color:#ffdcae}
.dot{width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 0 18px rgba(77,160,255,.7)}

.login-page{min-height:100vh;display:grid;grid-template-columns:1.15fr .85fr}
.login-left{padding:42px 48px;border-right:1px solid rgba(255,255,255,.06);position:relative;overflow:hidden}
.login-brand{display:flex;gap:12px;align-items:center;font-weight:700}
.login-hero{font-size:56px;line-height:1.02;max-width:760px;margin:56px 0 16px}
.login-sub{max-width:700px;color:var(--muted);font-size:17px;line-height:1.7}
.login-grid{margin-top:30px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:760px}
.lcard{padding:18px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow)}
.lcard h4{margin:0 0 8px;font-size:14px;color:#dceaff}
.lcard p{margin:0;color:var(--muted);font-size:13px;line-height:1.65}
.glow1,.glow2{position:absolute;border-radius:50%;filter:blur(40px)}
.glow1{right:-120px;top:-40px;width:320px;height:320px;background:rgba(77,160,255,.18)}
.glow2{right:140px;bottom:-120px;width:340px;height:340px;background:rgba(154,137,255,.14)}
.login-right{display:flex;align-items:center;justify-content:center;padding:26px}
.login-card{width:min(520px,92%);padding:30px;border-radius:28px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.08);box-shadow:var(--shadow);backdrop-filter:blur(14px)}
.login-card h1{margin:8px 0 6px;font-size:32px}
.login-card p{margin:0 0 18px;color:var(--muted);line-height:1.65}
.lang-row,.role-row{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:18px 0}
.role-row{grid-template-columns:repeat(4,1fr)}
.lang,.role-pill{padding:11px;border-radius:14px;background:#0a1523;border:1px solid rgba(255,255,255,.08);text-align:center;cursor:pointer}
.lang.active,.role-pill.active{background:linear-gradient(180deg,rgba(77,160,255,.26),rgba(77,160,255,.10));border-color:rgba(148,201,255,.4)}
.field{margin:12px 0}.label{display:block;font-size:13px;color:#d8e6fb;margin-bottom:8px}
.input,.select,.textarea{width:100%;padding:14px;border-radius:14px;background:#091421;color:var(--text);border:1px solid rgba(255,255,255,.08)}
.row{display:flex;justify-content:space-between;gap:10px;align-items:center;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 16px;border:none;border-radius:16px;background:linear-gradient(135deg,#308fff,#72d7ff);color:#fff;font-weight:800;cursor:pointer;box-shadow:0 12px 32px rgba(77,160,255,.35)}
.btn.full{width:100%}
.btn.secondary{background:#0d1a2c;box-shadow:none;border:1px solid rgba(255,255,255,.08)}
.ghost{padding:10px 12px;border-radius:14px;background:#0d1a2c;border:1px solid rgba(255,255,255,.08);color:var(--text)}
.ghost.active{background:linear-gradient(180deg,rgba(77,160,255,.18),rgba(77,160,255,.07));border-color:rgba(148,201,255,.28)}

.app-shell{display:grid;grid-template-columns:300px 1fr;min-height:100vh}
.sidebar{position:sticky;top:0;height:100vh;background:linear-gradient(180deg,#081321,#0a1626 52%,#08111d);border-right:1px solid rgba(255,255,255,.06);padding:18px 14px;overflow:auto}
.side-brand{display:flex;gap:12px;align-items:center;padding:8px 10px 16px}
.side-brand h2{margin:0;font-size:18px}
.side-brand small{display:block;color:var(--muted);margin-top:2px}
.section{margin:16px 8px 8px;color:#7f95b8;text-transform:uppercase;letter-spacing:.14em;font-size:11px}
.nav a{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px;border-radius:14px;color:#dbe8fb}
.nav a span:first-child{display:flex;align-items:center;gap:10px}
.nav a:hover,.nav a.active{background:linear-gradient(180deg,rgba(77,160,255,.16),rgba(77,160,255,.08));border:1px solid rgba(148,201,255,.16)}
.exec{margin-top:18px;padding:14px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08)}
.exec h4{margin:0 0 8px}
.exec p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

.menu-btn{display:none;position:fixed;top:12px;left:12px;z-index:1005;background:#0f2136;border:1px solid rgba(255,255,255,.1);color:#fff;border-radius:14px;padding:11px 13px;box-shadow:var(--shadow)}
.main{min-width:0}
.topbar{position:sticky;top:0;z-index:40;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 22px;background:rgba(5,11,20,.78);backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.06)}
.topbar h1{margin:0;font-size:22px}
.topbar p{margin:4px 0 0;color:var(--muted);font-size:13px}
.actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.pill{padding:10px 12px;border-radius:14px;background:#0d1a2c;border:1px solid rgba(255,255,255,.08)}
.content{padding:22px}
.grid-2,.grid-3,.grid-4,.hero-grid,.dense-grid,.triple{display:grid;gap:18px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.hero-grid{grid-template-columns:1.35fr .95fr}
.dense-grid{grid-template-columns:1.1fr .9fr}
.triple{grid-template-columns:1fr .9fr .9fr}
.panel{background:linear-gradient(180deg,rgba(255,255,255,.045),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.08);padding:18px;border-radius:24px;box-shadow:var(--shadow);min-width:0}
.panel h3{margin:0 0 4px;font-size:16px}
.sub{color:var(--muted);font-size:13px;margin-bottom:14px}
.metric{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}.value{font-size:30px;font-weight:800}
.up{color:var(--green)} .down{color:var(--red)} .warn{color:var(--amber)}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:16px}
table{width:100%;border-collapse:collapse;min-width:780px}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid rgba(255,255,255,.06);font-size:13px}
th{background:rgba(255,255,255,.02);color:#a9bdd9;position:sticky;top:0}
td{color:#e0ebfb}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.info{padding:16px;border-radius:18px;background:#0b1728;border:1px solid rgba(255,255,255,.07)}
.small-list{display:grid;gap:10px}
.item{display:flex;justify-content:space-between;gap:12px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.timeline{display:flex;gap:12px;overflow:auto;padding-bottom:4px}
.step{min-width:186px;padding:14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:7px 10px;border-radius:999px;background:rgba(255,255,255,.05);font-size:12px;border:1px solid rgba(255,255,255,.07)}
.heatmap{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.hm{min-height:78px;padding:10px;border-radius:16px;border:1px solid rgba(255,255,255,.06);display:flex;flex-direction:column;justify-content:space-between;font-size:12px}
.hm.pos{background:linear-gradient(180deg,rgba(22,209,122,.22),rgba(22,209,122,.08))}
.hm.mid{background:linear-gradient(180deg,rgba(255,179,71,.18),rgba(255,179,71,.08))}
.hm.neg{background:linear-gradient(180deg,rgba(255,101,119,.2),rgba(255,101,119,.08))}
.mobile-cards{display:none;gap:12px}
.mob-card{padding:14px;border-radius:16px;background:#0b1728;border:1px solid rgba(255,255,255,.07)}
.workflow{display:grid;gap:10px}
.wf-row{display:grid;grid-template-columns:160px 1fr 110px 110px;gap:12px;align-items:center;padding:12px 14px;border-radius:16px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06)}
.wf-log{display:grid;gap:8px}
.log{padding:10px 12px;border-radius:14px;background:#0a1524;border:1px solid rgba(255,255,255,.06);font-size:13px;color:#d9e7fb}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.kpi{padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02));border:1px solid rgba(255,255,255,.06)}
.spark{height:52px;width:100%}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.toast{position:fixed;right:18px;bottom:18px;background:#0f2136;border:1px solid rgba(255,255,255,.1);padding:12px 14px;border-radius:14px;box-shadow:var(--shadow);display:none}
.toast.show{display:block}

@media(max-width:1180px){
  .grid-4,.cards,.grid-3,.dense-grid,.hero-grid,.triple,.kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .heatmap{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:920px){
  .login-page{grid-template-columns:1fr}
  .login-left{display:none}
  .app-shell{grid-template-columns:1fr}
  .menu-btn{display:block}
  .sidebar{position:fixed;left:-308px;top:0;width:292px;z-index:1003;transition:left .28s ease}
  .sidebar.open{left:0}
  .topbar{padding-left:64px}
  .grid-2,.grid-3,.grid-4,.cards,.dense-grid,.hero-grid,.triple,.kpi-grid,.form-grid{grid-template-columns:1fr}
  .heatmap{grid-template-columns:repeat(2,1fr)}
  .content{padding:16px}
}
@media(max-width:760px){
  table{display:none}
  .mobile-cards{display:grid}
  .table-wrap{border:none;background:none;padding:0}
  .wf-row{grid-template-columns:1fr}
}


/* VFINAL mobile polish */
.topbar{min-height:72px}
.actions{justify-content:flex-end}
.btn,.ghost,.pill{white-space:nowrap}
.input,.select,.textarea{font-size:16px}
.table-wrap{background:transparent}
.mobile-cards .mob-card{display:grid;gap:6px}
.item strong,.item span{word-break:break-word}
.login-card .btn.full{margin-top:4px}

@media(max-width:920px){
  .topbar{
    padding:12px 14px 12px 62px;
    align-items:flex-start;
    flex-direction:column;
  }
  .topbar h1{font-size:20px;line-height:1.2}
  .topbar p{font-size:12px}
  .actions{
    width:100%;
    justify-content:flex-start;
    gap:8px;
  }
  .pill,.ghost,.btn.secondary{
    padding:9px 11px;
    font-size:12px;
  }
  .content{padding:14px}
  .panel{
    padding:14px;
    border-radius:18px;
  }
  .kpi .value,.value{font-size:24px}
  .small-list,.timeline,.wf-log{gap:8px}
  .timeline{
    display:grid;
    grid-template-columns:1fr;
    overflow:visible;
  }
  .step{
    min-width:0;
    width:100%;
  }
  .wf-row{
    padding:12px;
  }
  .form-grid{
    grid-template-columns:1fr;
  }
  .row{
    align-items:stretch;
  }
  .row > .input,
  .row > .select,
  .row > .btn,
  .row > .btn.secondary{
    width:100%;
  }
  .table-wrap{
    overflow:visible;
    border:none;
  }
  .mobile-cards{
    grid-template-columns:1fr;
  }
  .menu-btn{
    top:10px;
    left:10px;
    padding:10px 12px;
  }
  .sidebar{
    width:286px;
    left:-302px;
    padding-bottom:28px;
  }
  .side-brand{
    padding-top:6px;
  }
  .nav a{
    padding:12px 11px;
    font-size:14px;
  }
  .exec{
    margin-top:14px;
    padding:12px;
  }
  .login-card{
    width:min(94%, 520px);
    padding:22px;
    border-radius:22px;
  }
  .lang-row{
    grid-template-columns:repeat(3,1fr);
  }
  .role-row{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:760px){
  .content{padding:12px}
  .panel{padding:13px}
  .kpi-grid,.grid-2,.grid-3,.grid-4,.hero-grid,.dense-grid,.triple,.cards,.form-grid{
    gap:12px;
  }
  .actions .ghost.role-btn{
    flex:1 1 calc(50% - 8px);
    text-align:center;
  }
  .actions .pill,
  .actions .ghost:not(.role-btn){
    flex:1 1 100%;
  }
  .item{
    align-items:flex-start;
    flex-direction:column;
  }
  .item strong{
    align-self:flex-start;
  }
  .toolbar{
    gap:8px;
  }
  .toolbar .ghost,
  .toolbar .btn{
    flex:1 1 calc(50% - 8px);
    text-align:center;
  }
  .heatmap{
    grid-template-columns:1fr 1fr;
    gap:8px;
  }
  .hm{
    min-height:68px;
    padding:9px;
  }
  .mob-card{
    padding:12px;
    border-radius:14px;
  }
  .login-card h1{font-size:28px}
  .login-card p{font-size:14px}
}

@media(max-width:520px){
  .topbar{
    padding-left:58px;
  }
  .topbar h1{font-size:18px}
  .actions{
    gap:7px;
  }
  .actions .ghost.role-btn{
    flex:1 1 100%;
  }
  .lang-row{
    grid-template-columns:repeat(2,1fr);
  }
  .role-row{
    grid-template-columns:1fr;
  }
  .heatmap{
    grid-template-columns:1fr;
  }
  .btn,.ghost,.pill{
    font-size:12px;
  }
  .sidebar{
    width:100%;
    left:-104%;
  }
  .sidebar.open{
    left:0;
  }
  .menu-btn{
    border-radius:12px;
  }
}


/* Mobile collapsible top actions */
.mobile-actions-toggle{display:none}
@media(max-width:760px){
  .topbar{
    position:sticky;
  }
  .topbar .actions{
    display:none;
    width:100%;
    padding-top:8px;
  }
  .topbar.actions-open .actions{
    display:flex;
  }
  .mobile-actions-toggle{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:9px 11px;
    border-radius:12px;
    background:#0d1a2c;
    border:1px solid rgba(255,255,255,.08);
    color:var(--text);
  }
  .topbar-header-row{
    width:100%;
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:10px;
  }
  .topbar-header-row .title-wrap{
    min-width:0;
    flex:1;
  }
  .topbar-header-row .title-wrap h1{
    margin-right:8px;
  }
}


/* FINAL mobile nav fix */
@media(max-width:760px){
  .topbar{
    z-index:20;
  }
  .sidebar{
    z-index:9999;
    top:0;
    height:100vh;
    overflow:auto;
    background:linear-gradient(180deg,#081321,#0a1626 52%,#08111d);
    box-shadow:0 18px 48px rgba(0,0,0,.45);
  }
  .sidebar:not(.open){
    left:-110% !important;
  }
  .sidebar.open{
    left:0 !important;
  }
  .menu-btn{
    z-index:10000;
  }
  .topbar-header-row{
    align-items:center !important;
  }
  .topbar-header-row .title-wrap{
    padding-right:8px;
  }
  .topbar-header-row .title-wrap p{
    margin-top:2px;
  }
  .mobile-actions-toggle{
    flex:0 0 auto;
  }
  .content{
    position:relative;
    z-index:1;
  }
}

/* hide accidental duplicate nav title blocks if any legacy markup remains */
.legacy-mobile-nav,
.mobile-duplicate-nav,
.top-duplicate-nav{
  display:none !important;
}