/* V10 Enterprise Suite - full redesign from scratch */

:root{
  --bg:#f4f1ea;
  --canvas:#f7f5ef;
  --surface:#ffffff;
  --surface2:#fbfaf7;
  --ink:#16181d;
  --muted:#6b7280;
  --line:#e6e1d7;
  --primary:#2c3038;
  --primary2:#111318;
  --accent:#b8872d;
  --accent2:#e3b35a;
  --side:#111318;
  --side2:#23262d;
  --success:#15803d;
  --warning:#b45309;
  --danger:#b91c1c;
  --shadow:0 18px 44px rgba(30,35,45,.075);
  --soft-shadow:0 8px 20px rgba(30,35,45,.055);
  --radius:22px;
  --chart-opex:#d4a63c;
  --chart-capex:#374151;
  --chart-other:#c8ced7;
}
html[data-theme="obsidian"]{--bg:#f4f1ea;--canvas:#f7f5ef;--surface:#fff;--surface2:#fbfaf7;--primary:#2c3038;--primary2:#111318;--accent:#b8872d;--accent2:#e3b35a;--side:#111318;--side2:#23262d;--chart-opex:#d4a63c;--chart-capex:#475569;--chart-other:#d7cfc0;}
html[data-theme="ivory"]{--bg:#f6f2ea;--canvas:#fcfaf5;--surface:#fffdfa;--surface2:#fffefb;--primary:#44403c;--primary2:#1c1917;--accent:#b5955a;--accent2:#e8d4aa;--side:#1f2937;--side2:#374151;--chart-opex:#c69c4a;--chart-capex:#6b7280;--chart-other:#ded7ca;}
html[data-theme="graphite"]{--bg:#f3f4f6;--canvas:#f9fafb;--surface:#fff;--surface2:#f8fafc;--primary:#334155;--primary2:#0f172a;--accent:#64748b;--accent2:#cbd5e1;--side:#0f172a;--side2:#1e293b;--chart-opex:#4f46e5;--chart-capex:#0f172a;--chart-other:#cbd5e1;}
html[data-theme="emerald"]{--bg:#eff8f2;--canvas:#f7fcf9;--surface:#fff;--surface2:#f8fcfa;--primary:#0f766e;--primary2:#073b36;--accent:#7cae55;--accent2:#d6f1c0;--side:#073b36;--side2:#0f3f3a;--chart-opex:#0f766e;--chart-capex:#84cc16;--chart-other:#cbd5c0;}
html[data-theme="forest"]{--bg:#eef4ef;--canvas:#f6faf6;--surface:#fff;--surface2:#f8fbf8;--primary:#285943;--primary2:#173528;--accent:#8a9b4f;--accent2:#d6e39b;--side:#173528;--side2:#244636;--chart-opex:#3f7d52;--chart-capex:#8a9b4f;--chart-other:#d7ded6;}
html[data-theme="teal"]{--bg:#eef8f8;--canvas:#f8fcfc;--surface:#fff;--surface2:#f9fdfd;--primary:#0f766e;--primary2:#134e4a;--accent:#15b8a6;--accent2:#9ce7df;--side:#134e4a;--side2:#0f766e;--chart-opex:#14b8a6;--chart-capex:#155e75;--chart-other:#c9e7e6;}
html[data-theme="cobalt"]{--bg:#eff4fb;--canvas:#f8fbff;--surface:#fff;--surface2:#f9fbff;--primary:#1d4ed8;--primary2:#1e3a8a;--accent:#60a5fa;--accent2:#bfdbfe;--side:#1e3a8a;--side2:#1d4ed8;--chart-opex:#2563eb;--chart-capex:#1e40af;--chart-other:#cfdcf8;}
html[data-theme="arctic"]{--bg:#f1f5f9;--canvas:#fbfdff;--surface:#fff;--surface2:#f9fcff;--primary:#0f172a;--primary2:#334155;--accent:#38bdf8;--accent2:#bae6fd;--side:#0f172a;--side2:#1e293b;--chart-opex:#38bdf8;--chart-capex:#6366f1;--chart-other:#d6e3ee;}
html[data-theme="indigo"]{--bg:#f2f2fb;--canvas:#fbfbff;--surface:#fff;--surface2:#fcfcff;--primary:#4338ca;--primary2:#312e81;--accent:#818cf8;--accent2:#c7d2fe;--side:#312e81;--side2:#4338ca;--chart-opex:#6366f1;--chart-capex:#4338ca;--chart-other:#d7d9f2;}
html[data-theme="plum"]{--bg:#f6f1f8;--canvas:#fcf9ff;--surface:#fff;--surface2:#fdfbff;--primary:#6b21a8;--primary2:#3b0764;--accent:#c084fc;--accent2:#e9d5ff;--side:#3b0764;--side2:#581c87;--chart-opex:#a855f7;--chart-capex:#6d28d9;--chart-other:#e6d7ef;}
html[data-theme="crimson"]{--bg:#faf2f2;--canvas:#fff9f9;--surface:#fff;--surface2:#fffafa;--primary:#991b1b;--primary2:#450a0a;--accent:#dc2626;--accent2:#fecaca;--side:#450a0a;--side2:#7f1d1d;--chart-opex:#ef4444;--chart-capex:#991b1b;--chart-other:#efd7d7;}
html[data-theme="sand"]{--bg:#f5f1ea;--canvas:#faf8f3;--surface:#fff;--surface2:#fffdf9;--primary:#57534e;--primary2:#292524;--accent:#c4a46b;--accent2:#eed9b3;--side:#292524;--side2:#44403c;--chart-opex:#c49a49;--chart-capex:#78716c;--chart-other:#e1d8c9;}
html[data-theme="copper"]{--bg:#f7f1ed;--canvas:#fcf8f5;--surface:#fff;--surface2:#fffcfa;--primary:#7c2d12;--primary2:#431407;--accent:#c2410c;--accent2:#fdba74;--side:#431407;--side2:#7c2d12;--chart-opex:#ea580c;--chart-capex:#9a3412;--chart-other:#edd7cb;}


*{box-sizing:border-box}
body{
  margin:0;
  font-family:Inter,Segoe UI,Tahoma,Arial,sans-serif;
  background:
    radial-gradient(circle at 20% -10%, color-mix(in srgb,var(--accent) 9%, transparent), transparent 36rem),
    linear-gradient(180deg,var(--bg),var(--canvas));
  color:var(--ink);
}
button,input,select,textarea{font:inherit}
.hidden{display:none!important}

/* Splash / login */
.splash{
  position:fixed;inset:0;z-index:60;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--primary2),var(--primary));
  color:#fff;text-align:center;
}
.splash.hide{opacity:0;pointer-events:none;transition:.45s}
.splash img,.auth-card img{width:150px;background:#fff;border-radius:18px;padding:9px}
.auth-screen{
  min-height:100vh;display:grid;place-items:center;
  background:
    radial-gradient(circle at 30% 0,color-mix(in srgb,var(--accent) 12%,transparent),transparent 32rem),
    linear-gradient(180deg,var(--bg),var(--canvas));
}
.auth-card{
  width:min(470px,92vw);background:#fff;border:1px solid var(--line);
  border-radius:30px;padding:30px;box-shadow:var(--shadow);
}
.auth-card.wide{width:min(780px,94vw)}
.auth-card input{width:100%;margin:8px 0;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.auth-actions{display:flex;gap:10px;margin-top:10px}
.msg{color:var(--danger);font-weight:850}
pre{white-space:pre-wrap;background:#111318;color:#f3f4f6;padding:14px;border-radius:16px}

/* Layout */
.app{display:grid;grid-template-columns:318px minmax(0,1fr);min-height:100vh}
.side{
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--side) 96%,#000),var(--side2));
  color:#fff;padding:18px;height:100vh;position:sticky;top:0;overflow:auto;
  border-right:1px solid rgba(255,255,255,.10);
}
.brand{
  display:grid;grid-template-columns:116px 1fr;gap:14px;align-items:center;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:26px;padding:16px;margin-bottom:18px;
}
.brand img{width:116px;background:#fff;border-radius:16px;padding:7px}
.brand b{font-size:18px;line-height:1.16;letter-spacing:-.03em}
.brand span{display:block;color:rgba(255,255,255,.66);font-size:12px;font-weight:750;margin-top:5px}
.brand:after{
  content:"ENTERPRISE ELECTRICAL SYSTEM";
  grid-column:1/-1;
  color:color-mix(in srgb,var(--accent2) 80%,#fff);
  font-size:10px;font-weight:950;letter-spacing:.12em;
  padding-top:10px;border-top:1px solid rgba(255,255,255,.10);
}
.nav-title{
  margin:20px 8px 9px;color:rgba(255,255,255,.56);
  font-weight:950;font-size:11px;letter-spacing:.12em;
}
.nav-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:10px;
  min-height:50px;margin:7px 0;padding:12px 14px;border-radius:16px;
  background:transparent;color:#fff;border:1px solid transparent;font-weight:850;text-align:left;
}
.nav-btn:hover{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.08)}
.nav-btn.active{
  background:rgba(255,255,255,.10);
  border-color:color-mix(in srgb,var(--accent) 48%,rgba(255,255,255,.10));
  box-shadow:inset 4px 0 0 var(--accent),0 12px 28px rgba(0,0,0,.16);
}
.nav-btn small{
  background:rgba(255,255,255,.13);color:#fff;border-radius:999px;
  padding:4px 8px;font-size:12px;
}
.user-card{
  margin-top:20px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);border-radius:18px;padding:14px;
}
.user-card span{display:block;color:rgba(255,255,255,.64);font-weight:800}
.logout{
  width:100%;margin-top:10px;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);box-shadow:none;
}

.main{min-width:0}
.top{
  position:sticky;top:0;z-index:10;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-bottom:1px solid var(--line);
  display:flex;justify-content:space-between;gap:16px;align-items:center;
  padding:16px 28px;box-shadow:0 6px 18px rgba(22,24,29,.04);
}
.top h1{margin:0;font-size:25px;letter-spacing:-.04em;color:var(--ink)}
.top p{margin:4px 0 0;color:var(--muted)}
.top-actions{display:flex;gap:10px;flex-wrap:wrap}
.top button,.top select,.menu-btn{
  background:#fff;color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:11px 15px;font-weight:850;box-shadow:var(--soft-shadow);
}
.top select{min-width:170px}

.content{padding:28px;display:grid;gap:20px}

/* Hero */
.hero{
  position:relative;display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:22px;align-items:stretch;
  min-height:260px;background:linear-gradient(135deg,#fff,var(--surface2));
  border:1px solid var(--line);border-radius:30px;box-shadow:var(--shadow);
  padding:30px;overflow:hidden;
}
.hero:before{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(90deg,rgba(17,24,39,.026) 1px,transparent 1px),
    linear-gradient(0deg,rgba(17,24,39,.020) 1px,transparent 1px);
  background-size:46px 46px;pointer-events:none;
}
.hero-copy,.hero-panel{position:relative;z-index:1}
.eyebrow{
  display:inline-flex;padding:8px 12px;border-left:4px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 11%,#fff);color:var(--primary);
  border-radius:0 12px 12px 0;font-size:12px;font-weight:950;letter-spacing:.10em;
}
.hero h2{
  margin:20px 0 12px;max-width:850px;
  font-size:44px;line-height:1.06;letter-spacing:-.055em;color:var(--ink);
}
.hero p{max-width:820px;color:#56657a;font-size:17px;line-height:1.7}
.hero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.hero-meta span{
  padding:9px 11px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:#4b5563;font-weight:850;font-size:12px;
}
.hero-panel{
  align-self:stretch;border-radius:24px;
  background:linear-gradient(160deg,var(--primary2),var(--primary));
  color:#fff;padding:22px;display:flex;flex-direction:column;justify-content:flex-end;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
}
.hero-panel:before{
  content:"";width:74px;height:74px;border-radius:22px;margin-bottom:auto;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 14px 34px color-mix(in srgb,var(--accent) 28%,transparent);
}
.hero-panel b{font-size:22px;line-height:1.16}
.hero-panel small{color:rgba(255,255,255,.66);margin-top:8px;line-height:1.55}

/* Grids and cards */
.grid{display:grid;gap:16px}
.grid.kpi{grid-template-columns:repeat(4,1fr)}
.grid.two{grid-template-columns:1fr 1fr}
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:24px;
  padding:20px;box-shadow:var(--shadow);
}
.kpi-card{
  min-height:136px;display:flex;flex-direction:column;justify-content:space-between;
  border-top:0;position:relative;overflow:hidden;
}
.kpi-card:before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;background:var(--accent);
}
.kpi-card span{color:var(--muted);font-weight:900}
.kpi-card b{display:block;font-size:40px;margin:10px 0;color:var(--ink);letter-spacing:-.04em}
.kpi-card small{color:var(--muted)}

/* Folder tiles */
.folder-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:16px}
.folder-card{
  min-height:176px;background:#fff!important;color:var(--ink)!important;
  border:1px solid var(--line);border-radius:22px;padding:18px;box-shadow:var(--soft-shadow);
  cursor:pointer;text-align:left;position:relative;overflow:hidden;
}
.folder-card:before{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
}
.folder-card:after{
  content:"";position:absolute;right:-45px;bottom:-45px;width:130px;height:130px;border-radius:50%;
  background:color-mix(in srgb,var(--accent) 8%,transparent);
}
.folder-card:hover{
  transform:translateY(-4px);transition:.18s;
  border-color:color-mix(in srgb,var(--primary) 32%,var(--line));
  box-shadow:0 20px 38px rgba(22,24,29,.09);
}
.folder-card.active{
  border-color:var(--primary);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent),var(--soft-shadow);
}
.folder-icon{
  width:58px;height:58px;display:grid;place-items:center;border-radius:18px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  border:1px solid color-mix(in srgb,var(--accent) 28%,var(--line));
  color:var(--primary);font-size:14px;font-weight:950;letter-spacing:.04em;
}
.folder-card b{display:block;margin:13px 0 8px;color:var(--ink);font-size:16px;line-height:1.25}
.folder-card small{display:block;color:var(--muted);line-height:1.45}

/* Tables/forms */
.toolbar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.toolbar input,.toolbar select{padding:11px 13px;border:1px solid var(--line);border-radius:14px;background:#fff}
.tablewrap{overflow:auto;border:1px solid var(--line);border-radius:18px}
table{width:100%;border-collapse:collapse;background:#fff}
th,td{padding:12px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
th{background:#fafafa;color:#525b69;text-transform:uppercase;font-size:12px;letter-spacing:.045em}
td{color:var(--ink)}
tr:hover td{background:color-mix(in srgb,var(--accent) 4%,#fff)}
.badge{display:inline-flex;padding:5px 9px;border-radius:999px;background:#f3f4f6;color:#374151;font-weight:900;font-size:12px}
.badge.ok{background:#dcfce7;color:#166534}
.badge.warn{background:#fef3c7;color:#92400e}
.badge.bad{background:#fee2e2;color:#991b1b}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-grid label{display:grid;gap:6px;font-weight:850;color:#374151}
.form-grid input,.form-grid select,.form-grid textarea{
  padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff;color:var(--ink)
}
.form-grid .full{grid-column:1/-1}
.audit-json{max-width:460px;max-height:150px;overflow:auto;white-space:pre-wrap;color:#4b5563;font-size:12px}


.folder-card.active{
  border-color:color-mix(in srgb,var(--accent) 45%, var(--line));
  box-shadow:0 16px 34px rgba(15,23,42,.08), inset 0 0 0 1px color-mix(in srgb,var(--accent) 20%, transparent);
}
.folder-card.compact{min-height:140px}
.kpi-secondary .kpi-card{min-height:124px}
.kpi-card.compact b{font-size:34px}
.budget-grid,.recent-grid{align-items:start}
.chart-card{min-height:100%}
.budget-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:18px;align-items:center}
.chart-summary{display:grid;gap:12px}
.summary-box{background:var(--surface2);border:1px solid var(--line);border-radius:18px;padding:14px 16px}
.summary-box span{display:block;color:var(--muted);font-weight:850;font-size:12px;margin-bottom:6px}
.summary-box b{font-size:28px;letter-spacing:-.03em}
.stat-pill{display:inline-flex;align-items:center;padding:7px 12px;border-radius:999px;background:color-mix(in srgb,var(--accent) 10%, #fff);color:var(--primary);font-weight:900;font-size:12px;border:1px solid color-mix(in srgb,var(--accent) 18%, var(--line));}
.ring-chart{width:190px;height:190px;border-radius:50%;margin:auto;display:grid;place-items:center;background:conic-gradient(var(--chart-opex) 0 var(--pct), color-mix(in srgb,var(--chart-capex) 75%, #fff) var(--pct) 100%);position:relative;box-shadow:inset 0 0 0 1px rgba(255,255,255,.5)}
.ring-chart:before{content:"";position:absolute;inset:18px;background:var(--surface);border-radius:50%;box-shadow:inset 0 0 0 1px var(--line)}
.ring-inner{position:relative;z-index:1;text-align:center;padding:0 18px}
.ring-inner b{display:block;font-size:32px;letter-spacing:-.04em;color:var(--ink)}
.ring-inner small{display:block;color:var(--muted);font-weight:800}
.ring-legend{display:grid;gap:10px;margin-top:16px}
.ring-legend div{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:var(--surface2);border:1px solid var(--line);border-radius:14px;color:var(--ink);font-weight:800}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;margin-right:8px;flex:0 0 auto}
.dot-a{background:var(--chart-opex)} .dot-b{background:var(--chart-capex)}
.bar-chart{display:grid;gap:16px;margin-top:8px}
.bar-row{display:grid;grid-template-columns:150px 1fr 48px;align-items:center;gap:12px}
.bar-label{font-weight:850;color:var(--ink)}
.bar-track{height:14px;border-radius:999px;background:color-mix(in srgb,var(--primary) 10%, #eef2f7);overflow:hidden;position:relative}
.bar-fill{height:100%;border-radius:999px;background:var(--chart-opex);box-shadow:0 8px 18px color-mix(in srgb,var(--chart-opex) 28%, transparent)}
.bar-fill.capex{background:var(--chart-capex)}
.bar-fill.other{background:var(--chart-other)}
.bar-fill.opex{background:var(--chart-opex)}
.mini-note{margin-top:16px;color:var(--muted);font-size:13px;line-height:1.6}
.compact-folder-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.dashboard-hero .hero-panel{min-height:220px}

.app.sidebar-hidden{grid-template-columns:1fr}
.app.sidebar-hidden .side{display:none}
.top .menu-btn{display:inline-flex}
.hr-kpi .kpi-card b{font-size:36px}

/* Buttons */
button,.btn{
  border:0;border-radius:14px;background:linear-gradient(135deg,var(--primary),var(--primary2));
  color:#fff;padding:11px 15px;font-weight:900;cursor:pointer;
  box-shadow:0 12px 24px color-mix(in srgb,var(--primary) 16%,transparent);
}
button.folder-card{background:#fff!important;box-shadow:var(--soft-shadow)!important}
.secondary,.btn.secondary{
  background:#fff!important;color:var(--ink)!important;border:1px solid var(--line)!important;box-shadow:none!important
}
button.danger{background:var(--danger)}

.footer{
  margin:0 28px 28px;background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:16px;display:flex;justify-content:space-between;color:var(--muted);box-shadow:none
}
.footer b{color:var(--ink)}
.toast{position:fixed;right:18px;bottom:18px;background:#111318;color:#fff;padding:12px 16px;border-radius:14px}

/* Responsive */

@media(max-width:1280px){
  .grid.kpi{grid-template-columns:repeat(2,1fr)}
  .budget-hero{grid-template-columns:1fr}
}
@media(max-width:1080px){
  .app{grid-template-columns:1fr}
  .side{position:fixed;left:-330px;width:min(318px,84vw);z-index:20;transition:.25s;box-shadow:18px 0 44px rgba(15,23,42,.18)}
  .side.open{left:0}
  .grid.two{grid-template-columns:1fr}
  .hero{grid-template-columns:1fr}
  .hero-panel{min-height:170px}
  .form-grid{grid-template-columns:1fr}
  .footer{display:block}
  .menu-btn{display:inline-flex}
  .top{padding:14px 18px}
}

@media(min-width:1081px){.menu-btn{display:inline-flex}}

@media(max-width:720px){
  .content{padding:14px}
  .top{padding:14px 14px;align-items:flex-start;flex-direction:column}
  .top-actions{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .top-actions > *{width:100%}
  .top select{min-width:unset}
  .hero{padding:20px;min-height:auto}
  .hero h2{font-size:30px}
  .folder-grid,.compact-folder-grid{grid-template-columns:1fr}
  .grid.kpi{grid-template-columns:1fr}
  .bar-row{grid-template-columns:1fr;gap:8px}
  .bar-row b{text-align:right}
  .ring-chart{width:160px;height:160px}
  .footer{margin:0 14px 14px;padding:14px}
  .tablewrap table{min-width:760px}
}
@media(max-width:520px){
  .brand{grid-template-columns:92px 1fr;padding:14px}
  .brand img{width:92px}
  .top-title-wrap .title h1{font-size:22px}
  .top-actions{grid-template-columns:1fr}
}

@media print{
  .side,.top,.footer,.toolbar button{display:none!important}
  .content{padding:0}
  .card,.hero{box-shadow:none}
}


/* V11 Premium Splash + Name Update */
.splash{
  position:fixed !important;
  inset:0 !important;
  z-index:9999 !important;
  display:grid !important;
  place-items:center !important;
  background:
    radial-gradient(circle at 22% 8%, color-mix(in srgb,var(--accent) 22%, transparent), transparent 30rem),
    radial-gradient(circle at 82% 18%, rgba(255,255,255,.08), transparent 26rem),
    linear-gradient(135deg,var(--primary2),var(--primary)) !important;
  color:#fff !important;
  text-align:center !important;
  overflow:hidden !important;
}
.splash:before{
  content:"";
  position:absolute;
  inset:-30%;
  background:
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(0deg,rgba(255,255,255,.026) 1px,transparent 1px);
  background-size:58px 58px;
  transform:rotate(-8deg);
  opacity:.6;
}
.splash.hide{
  opacity:0 !important;
  pointer-events:none !important;
  transition:opacity .55s ease, visibility .55s ease !important;
  visibility:hidden !important;
}
.splash-shell{
  position:relative;
  width:min(460px,88vw);
  min-height:390px;
  border-radius:34px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:34px 30px;
  background:rgba(255,255,255,.085);
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 30px 90px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.12);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.splash-shell:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 45%,rgba(255,255,255,.06));
  pointer-events:none;
}
.splash-logo-wrap{
  position:relative;
  width:174px;
  height:96px;
  border-radius:24px;
  display:grid;
  place-items:center;
  background:#fff;
  padding:10px;
  box-shadow:0 18px 44px rgba(0,0,0,.22);
  z-index:2;
}
.splash-logo-wrap img{
  width:150px !important;
  max-height:76px;
  object-fit:contain;
  border-radius:0 !important;
  padding:0 !important;
  background:transparent !important;
}
.splash-orbit{
  position:absolute;
  width:250px;
  height:250px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.12);
  top:30px;
  left:50%;
  transform:translateX(-50%);
}
.splash-orbit:before{
  content:"";
  position:absolute;
  inset:18px;
  border-radius:50%;
  border:2px solid transparent;
  border-top-color:var(--accent);
  border-right-color:rgba(255,255,255,.35);
  animation:splashSpin 1.8s linear infinite;
}
.splash-kicker{
  position:relative;
  z-index:2;
  margin-top:28px;
  color:color-mix(in srgb,var(--accent2) 86%, #fff);
  font-size:12px;
  font-weight:950;
  letter-spacing:.16em;
}
.splash h1{
  position:relative;
  z-index:2;
  margin:10px 0 8px;
  font-size:34px;
  line-height:1.1;
  letter-spacing:-.04em;
}
.splash p{
  position:relative;
  z-index:2;
  margin:0;
  color:rgba(255,255,255,.72);
  font-weight:750;
}
.splash-progress{
  position:relative;
  z-index:2;
  width:230px;
  height:8px;
  border-radius:999px;
  margin-top:26px;
  overflow:hidden;
  background:rgba(255,255,255,.14);
}
.splash-progress span{
  display:block;
  width:42%;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,var(--accent),var(--accent2),#fff);
  animation:splashLoad 1.45s ease-in-out infinite;
}
@keyframes splashSpin{
  to{transform:rotate(360deg)}
}
@keyframes splashLoad{
  0%{transform:translateX(-115%)}
  55%{transform:translateX(80%)}
  100%{transform:translateX(260%)}
}
@media(max-width:720px){
  .splash-shell{
    min-height:360px;
    border-radius:28px;
  }
  .splash h1{
    font-size:29px;
  }
}



/* V12 Electrical icon + User Approvals polishing */
.top-title-wrap{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.top-site-icon{
  width:46px;
  height:46px;
  border-radius:15px;
  flex:0 0 auto;
  box-shadow:0 10px 22px rgba(17,19,24,.10);
}
.top-title-wrap .title{
  min-width:0;
}
.brand-elec-mark{
  display:inline-flex;
  margin-top:8px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  color:color-mix(in srgb,var(--accent2) 84%,#fff);
  font-style:normal;
  font-size:10px;
  font-weight:950;
  letter-spacing:.08em;
}
.nav-btn span{
  display:flex;
  align-items:center;
  gap:8px;
}
.nav-btn span::first-letter{
  letter-spacing:0;
}
@media(max-width:720px){
  .top-site-icon{
    width:40px;
    height:40px;
    border-radius:13px;
  }
  .top-title-wrap{
    gap:10px;
  }
}



/* V13 Access Level UI */
.access-level-pill{
  display:inline-flex;
  padding:6px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 12%,#fff);
  color:var(--primary);
  font-weight:950;
  font-size:12px;
}
td select{
  min-width:160px;
  padding:8px 10px;
  border-radius:12px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--ink);
  font-weight:750;
}
.user-card span{
  line-height:1.45;
}



/* V14 Standard Subfolders */
.folder-card b{
  text-transform:none;
}
.folder-card small:last-child{
  font-weight:850;
}
.subfolder-note{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.subfolder-note span{
  display:inline-flex;
  padding:7px 10px;
  border-radius:999px;
  background:color-mix(in srgb,var(--accent) 10%,#fff);
  color:var(--primary);
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  font-weight:900;
  font-size:12px;
}



/* V15 Drill-down subfolders */
.hero-meta span{
  white-space:nowrap;
}
.toolbar .muted{
  margin:6px 0 0;
}
.folder-card .folder-icon{
  font-size:13px;
  letter-spacing:.08em;
}
.btn.secondary + .btn{
  margin-left:8px;
}
@media(max-width:720px){
  .toolbar > div:last-child{
    display:flex;
    flex-direction:column;
    gap:8px;
    width:100%;
  }
  .btn.secondary + .btn{
    margin-left:0;
  }
}



/* V16 Hero Logo Panel
   Removes black hero card and replaces it with Electrical Department logo card.
*/
.hero-panel{
  background:
    linear-gradient(145deg,#ffffff 0%,var(--surface2) 100%) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
  box-shadow:0 16px 38px rgba(22,24,29,.07) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-align:center !important;
  padding:24px !important;
  overflow:hidden !important;
}
.hero-panel:before{
  content:"" !important;
  width:150px !important;
  height:150px !important;
  border-radius:34px !important;
  margin:0 auto 14px !important;
  background:
    url("electrical_department_icon.svg?v=40") center/contain no-repeat !important;
  box-shadow:0 18px 42px rgba(22,24,29,.10) !important;
}
.hero-panel b{
  color:var(--ink) !important;
  font-size:24px !important;
  line-height:1.12 !important;
}
.hero-panel small{
  color:var(--muted) !important;
  font-weight:850 !important;
}
.hero-panel.hero-logo-panel:after{
  content:"";
  position:absolute;
  inset:auto 28px 18px 28px;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--primary),var(--accent));
  opacity:.75;
}
@media(max-width:1080px){
  .hero-panel{
    min-height:210px !important;
  }
}
@media(max-width:720px){
  .hero-panel:before{
    width:118px !important;
    height:118px !important;
    border-radius:28px !important;
  }
}



/* V17 Compact Hero
   Reduces the large hero area and logo panel size.
*/
.content{
  gap:16px !important;
}
.hero{
  min-height:190px !important;
  padding:22px 26px !important;
  grid-template-columns:minmax(0,1fr) 250px !important;
  gap:18px !important;
  border-radius:26px !important;
}
.hero h2{
  font-size:36px !important;
  margin:14px 0 8px !important;
}
.hero p{
  font-size:15.5px !important;
  line-height:1.55 !important;
  max-width:780px !important;
}
.eyebrow{
  padding:7px 11px !important;
  font-size:11px !important;
}
.hero-meta{
  margin-top:14px !important;
}
.hero-meta span{
  padding:7px 10px !important;
  font-size:11.5px !important;
}
.hero-panel{
  min-height:0 !important;
  padding:18px !important;
  border-radius:22px !important;
}
.hero-panel:before{
  width:104px !important;
  height:104px !important;
  border-radius:26px !important;
  margin-bottom:12px !important;
}
.hero-panel b{
  font-size:21px !important;
}
.hero-panel small{
  font-size:13px !important;
  line-height:1.45 !important;
}
.kpi-card{
  min-height:118px !important;
}
.card{
  border-radius:22px !important;
}
@media(max-width:1080px){
  .hero{
    grid-template-columns:1fr !important;
    min-height:0 !important;
  }
  .hero-panel{
    min-height:150px !important;
  }
}
@media(max-width:720px){
  .hero{
    padding:20px !important;
  }
  .hero h2{
    font-size:30px !important;
  }
  .hero-panel:before{
    width:86px !important;
    height:86px !important;
  }
}


.page-qr{position:fixed;right:18px;bottom:18px;background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px;box-shadow:0 12px 28px rgba(0,0,0,.12);z-index:30;text-align:center}.page-qr img{width:96px;height:96px;display:block}.page-qr small{display:block;margin-top:6px;color:var(--muted);font-weight:700}@media(max-width:900px){.page-qr{right:10px;bottom:10px;padding:8px}.page-qr img{width:72px;height:72px}}

/* V22 Dashboard-only homepage + floating QR */
.compact-dashboard-hero{
  min-height:190px !important;
}
.dashboard-only-charts{
  margin-bottom:8px;
}
.floating-qr-card{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  width:124px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(15,23,42,.14);
  backdrop-filter:blur(12px);
  text-align:center;
}
.floating-qr-card .qr-title{
  font-size:11px;
  font-weight:950;
  color:var(--primary);
  margin-bottom:7px;
  letter-spacing:.04em;
}
.floating-qr-card canvas{
  width:94px;
  height:94px;
  display:block;
  margin:auto;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
}
@media(max-width:720px){
  .floating-qr-card{
    width:92px;
    padding:7px;
    right:10px;
    bottom:10px;
    border-radius:14px;
  }
  .floating-qr-card canvas{
    width:72px;
    height:72px;
  }
  .floating-qr-card .qr-title{
    font-size:9px;
    margin-bottom:5px;
  }
}
@media print{
  .floating-qr-card{display:none!important}
}



/* V23 Mobile Layout Fix */
html, body{
  max-width:100%;
  overflow-x:hidden !important;
}
.main, .content, .top, .footer{
  max-width:100%;
}

/* Desktop: keep normal */
.top{
  width:100%;
}
.top-title-wrap{
  flex:1 1 auto;
}

/* QR less intrusive on mobile */
.floating-qr-card{
  right:16px;
  bottom:16px;
}

/* Mobile dashboard professional layout */
@media(max-width:720px){
  body{
    background:linear-gradient(180deg,var(--bg),var(--canvas)) !important;
  }

  .app{
    display:block !important;
    width:100% !important;
  }

  .main{
    width:100% !important;
    min-width:0 !important;
  }

  .top{
    position:sticky !important;
    top:0 !important;
    z-index:30 !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    width:100% !important;
    padding:10px 10px !important;
    border-radius:0 !important;
    box-shadow:0 8px 24px rgba(15,23,42,.08) !important;
  }

  .top-title-wrap{
    width:100% !important;
    display:grid !important;
    grid-template-columns:40px minmax(0,1fr) !important;
    gap:10px !important;
    align-items:center !important;
  }

  .top-site-icon{
    width:40px !important;
    height:40px !important;
    border-radius:12px !important;
  }

  .top-title-wrap .title{
    min-width:0 !important;
  }

  .top h1{
    font-size:18px !important;
    line-height:1.15 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
  }

  .top p{
    font-size:11px !important;
    line-height:1.35 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  .menu-btn{
    position:absolute !important;
    top:10px !important;
    right:10px !important;
    width:auto !important;
    padding:7px 9px !important;
    font-size:11px !important;
    border-radius:10px !important;
    z-index:2 !important;
  }

  .top-actions{
    width:100% !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    gap:8px !important;
  }

  .top-actions select{
    grid-column:1/-1 !important;
  }

  .top-actions select,
  .top-actions button{
    min-width:0 !important;
    width:100% !important;
    padding:9px 10px !important;
    font-size:12px !important;
    border-radius:12px !important;
  }

  .content{
    width:100% !important;
    padding:12px 10px 88px !important;
    gap:12px !important;
  }

  .hero{
    grid-template-columns:1fr !important;
    padding:16px !important;
    min-height:0 !important;
    border-radius:20px !important;
  }

  .hero h2{
    font-size:26px !important;
    line-height:1.08 !important;
    margin:12px 0 8px !important;
  }

  .hero p{
    font-size:13px !important;
    line-height:1.55 !important;
  }

  .eyebrow{
    font-size:9px !important;
    padding:6px 8px !important;
  }

  .hero-meta{
    gap:6px !important;
    margin-top:10px !important;
  }

  .hero-meta span{
    font-size:9px !important;
    padding:6px 7px !important;
  }

  .hero-panel{
    min-height:120px !important;
    padding:14px !important;
    border-radius:18px !important;
  }

  .hero-panel:before{
    width:66px !important;
    height:66px !important;
    border-radius:16px !important;
    margin-bottom:8px !important;
  }

  .hero-panel b{
    font-size:16px !important;
  }

  .hero-panel small{
    font-size:10px !important;
    line-height:1.3 !important;
  }

  .grid.kpi,
  .grid.two,
  .kpi-secondary,
  .budget-grid{
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .card{
    padding:14px !important;
    border-radius:18px !important;
  }

  .kpi-card{
    min-height:104px !important;
  }

  .kpi-card b{
    font-size:32px !important;
    margin:7px 0 !important;
  }

  .kpi-card span{
    font-size:12px !important;
  }

  .kpi-card small{
    font-size:11px !important;
  }

  .budget-hero{
    grid-template-columns:1fr !important;
    gap:12px !important;
  }

  .ring-chart{
    width:135px !important;
    height:135px !important;
  }

  .ring-chart:before{
    inset:14px !important;
  }

  .ring-inner b{
    font-size:24px !important;
  }

  .bar-row{
    grid-template-columns:1fr !important;
    gap:6px !important;
  }

  .bar-row b{
    text-align:right !important;
  }

  .toolbar{
    align-items:flex-start !important;
    gap:8px !important;
  }

  .toolbar h3{
    font-size:16px !important;
    margin:0 0 4px !important;
  }

  .toolbar p,
  .muted,
  .mini-note{
    font-size:11px !important;
  }

  .footer{
    margin:0 10px 12px !important;
    padding:12px !important;
    font-size:11px !important;
    border-radius:16px !important;
  }

  .side{
    width:min(300px,86vw) !important;
    left:-320px !important;
  }
  .side.open{
    left:0 !important;
  }

  .floating-qr-card{
    width:74px !important;
    right:8px !important;
    bottom:8px !important;
    padding:6px !important;
    border-radius:12px !important;
    opacity:.96 !important;
  }
  .floating-qr-card .qr-title{
    font-size:8px !important;
    margin-bottom:4px !important;
  }
  .floating-qr-card canvas{
    width:60px !important;
    height:60px !important;
    border-radius:8px !important;
  }
}

@media(max-width:390px){
  .top-actions{
    grid-template-columns:1fr !important;
  }
  .hero h2{
    font-size:24px !important;
  }
  .content{
    padding-left:8px !important;
    padding-right:8px !important;
  }
}


/* V24 Loading fix */
.splash.hide{opacity:0!important;visibility:hidden!important;pointer-events:none!important;transition:opacity .35s ease,visibility .35s ease!important}


/* V25 dashboard render fix */
#view{
  min-height:360px;
}
.compact-dashboard-hero{
  min-height:190px !important;
}
.dashboard-only-charts{
  margin-bottom:8px;
}
.floating-qr-card{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:50;
  width:124px;
  padding:10px;
  border-radius:18px;
  background:rgba(255,255,255,.92);
  border:1px solid var(--line);
  box-shadow:0 18px 44px rgba(15,23,42,.14);
  backdrop-filter:blur(12px);
  text-align:center;
}
.floating-qr-card .qr-title{
  font-size:11px;
  font-weight:950;
  color:var(--primary);
  margin-bottom:7px;
  letter-spacing:.04em;
}
.floating-qr-card canvas{
  width:94px;
  height:94px;
  display:block;
  margin:auto;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
}
@media(max-width:720px){
  .floating-qr-card{
    width:74px !important;
    right:8px !important;
    bottom:8px !important;
    padding:6px !important;
    border-radius:12px !important;
  }
  .floating-qr-card canvas{
    width:60px !important;
    height:60px !important;
  }
  .floating-qr-card .qr-title{
    font-size:8px !important;
    margin-bottom:4px !important;
  }
}



/* V26 QR hotfix polish */
.floating-qr-card{
  pointer-events:none;
}
.floating-qr-card canvas{
  background:#fff;
}
.msg:empty{
  display:none;
}



/* V28 Real QR image */
.floating-qr-card{
  pointer-events:auto !important;
}
.floating-qr-card canvas{
  display:none !important;
}
.floating-qr-card img,
#floatingQrImage{
  width:94px;
  height:94px;
  display:block;
  margin:auto;
  border-radius:10px;
  border:1px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  background:#fff;
  object-fit:contain;
}
.floating-qr-card a{
  display:block;
  text-decoration:none;
}
.qr-caption{
  margin-top:5px;
  font-size:9px;
  font-weight:850;
  color:var(--muted);
}
@media(max-width:720px){
  .floating-qr-card img,
  #floatingQrImage{
    width:60px !important;
    height:60px !important;
    border-radius:8px !important;
  }
  .qr-caption{
    display:none;
  }
}



/* V29 HR manager field */
#managerWrap input{
  border-color:color-mix(in srgb,var(--accent) 24%,var(--line));
}



/* V30 Section distinction */
.section-grid{
  grid-template-columns:repeat(auto-fill,minmax(245px,1fr));
  align-items:stretch;
}
.section-card{
  --section-accent:#b8872d;
  --section-accent-2:#1d3557;
  border-left:7px solid var(--section-accent) !important;
  background:
    radial-gradient(circle at 92% 10%, color-mix(in srgb,var(--section-accent) 16%, transparent), transparent 34%),
    linear-gradient(145deg, color-mix(in srgb,var(--section-accent) 8%, #fff), #fff 56%) !important;
}
.section-card:before{
  height:7px !important;
  background:linear-gradient(90deg,var(--section-accent),var(--section-accent-2)) !important;
}
.section-card:after{
  background:color-mix(in srgb,var(--section-accent) 12%, transparent) !important;
}
.section-card .folder-icon{
  background:color-mix(in srgb,var(--section-accent) 14%, #fff) !important;
  border-color:color-mix(in srgb,var(--section-accent) 34%, var(--line)) !important;
  color:var(--section-accent-2) !important;
}
.section-card b{
  padding-right:74px;
}
.section-ribbon{
  position:absolute;
  top:15px;
  right:15px;
  z-index:2;
  padding:6px 9px;
  border-radius:999px;
  background:color-mix(in srgb,var(--section-accent) 13%, #fff);
  border:1px solid color-mix(in srgb,var(--section-accent) 30%, var(--line));
  color:var(--section-accent-2);
  font-size:10px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}
.section-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-top:14px;
  padding-top:12px;
  border-top:1px solid color-mix(in srgb,var(--section-accent) 18%, var(--line));
}
.section-footer span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  border:1px solid color-mix(in srgb,var(--section-accent) 18%, var(--line));
  color:var(--ink);
  font-size:11px;
  font-weight:900;
}
.section-card:hover{
  border-color:color-mix(in srgb,var(--section-accent) 58%, var(--line)) !important;
  box-shadow:0 22px 42px color-mix(in srgb,var(--section-accent) 14%, rgba(22,24,29,.08)) !important;
}
.section-card.active{
  box-shadow:0 0 0 3px color-mix(in srgb,var(--section-accent) 18%, transparent), var(--soft-shadow) !important;
}
.section-hero{
  border-top:7px solid var(--section-accent,#b8872d);
}
.section-hero .hero-meta span{
  border-color:color-mix(in srgb,var(--section-accent,#b8872d) 26%, rgba(255,255,255,.18));
}

/* Section color map */
.section-power{--section-accent:#d97706;--section-accent-2:#7c2d12}
.section-light{--section-accent:#0ea5e9;--section-accent-2:#075985}
.section-chiller{--section-accent:#06b6d4;--section-accent-2:#155e75}
.section-hvac{--section-accent:#14b8a6;--section-accent-2:#115e59}
.section-utilities{--section-accent:#22c55e;--section-accent-2:#166534}
.section-procurement{--section-accent:#a855f7;--section-accent-2:#581c87}
.section-projects{--section-accent:#f97316;--section-accent-2:#7c2d12}
.section-hr{--section-accent:#ec4899;--section-accent-2:#831843}
.section-wh{--section-accent:#64748b;--section-accent-2:#334155}
.section-production{--section-accent:#ef4444;--section-accent-2:#7f1d1d}
.section-ups{--section-accent:#eab308;--section-accent-2:#713f12}
.section-kpi{--section-accent:#6366f1;--section-accent-2:#312e81}
.section-ppm{--section-accent:#10b981;--section-accent-2:#065f46}
.section-shutdown{--section-accent:#f43f5e;--section-accent-2:#881337}
.section-backup{--section-accent:#475569;--section-accent-2:#1e293b}
.section-books{--section-accent:#8b5cf6;--section-accent-2:#4c1d95}
.section-monthly{--section-accent:#0891b2;--section-accent-2:#164e63}
.section-qms{--section-accent:#84cc16;--section-accent-2:#365314}

@media(max-width:720px){
  .section-grid{grid-template-columns:1fr}
  .section-ribbon{top:12px;right:12px;font-size:9px;padding:5px 8px}
  .section-card b{padding-right:66px}
  .section-footer{flex-wrap:wrap}
}


/* V32 GMP Engineering Command Theme */
:root,.theme-gmp-command{--bg:#f6f8fb;--surface:#fff;--surface-2:#f8fafc;--ink:#111827;--muted:#64748b;--line:#dbe3ee;--primary:#0f2742;--primary-2:#12385e;--accent:#e21f2f;--accent-2:#f7c948;--good:#0f9f6e;--warn:#c27b00;--bad:#c81e3a;--soft-shadow:0 18px 42px rgba(15,39,66,.10)}
body.theme-gmp-command,.theme-gmp-command body{background:radial-gradient(circle at 12% 8%,rgba(226,31,47,.065),transparent 26%),radial-gradient(circle at 88% 0%,rgba(15,39,66,.08),transparent 28%),linear-gradient(180deg,#f7f9fc,#f2f6fa)!important}
.theme-gmp-command .sidebar,body.theme-gmp-command .sidebar{background:linear-gradient(180deg,#0b1624 0%,#10243b 48%,#0b1624 100%)!important;border-right:1px solid rgba(255,255,255,.10)!important}
.theme-gmp-command .brand img,body.theme-gmp-command .brand img,.theme-gmp-command .login-card img,body.theme-gmp-command .login-card img{object-fit:contain!important;background:#fff!important;padding:8px!important;border-radius:12px!important}
.theme-gmp-command .brand-title,body.theme-gmp-command .brand-title{color:#fff!important}.theme-gmp-command .brand-sub,body.theme-gmp-command .brand-sub{color:#cbd5e1!important}
.theme-gmp-command .pill,body.theme-gmp-command .pill{background:rgba(226,31,47,.12)!important;color:#fff!important;border:1px solid rgba(226,31,47,.26)!important}
.theme-gmp-command .nav button.active,body.theme-gmp-command .nav button.active{background:linear-gradient(90deg,rgba(226,31,47,.23),rgba(247,201,72,.11))!important;border-color:rgba(247,201,72,.44)!important;box-shadow:inset 4px 0 0 var(--accent-2)!important}
.theme-gmp-command .topbar,body.theme-gmp-command .topbar{background:rgba(255,255,255,.94)!important;border-bottom:1px solid var(--line)!important;backdrop-filter:blur(14px)!important}
.theme-gmp-command .enterprise-hero,body.theme-gmp-command .enterprise-hero{background:linear-gradient(90deg,rgba(255,255,255,.95),rgba(255,255,255,.78)),repeating-linear-gradient(90deg,rgba(15,39,66,.035) 0,rgba(15,39,66,.035) 1px,transparent 1px,transparent 52px),repeating-linear-gradient(0deg,rgba(15,39,66,.025) 0,rgba(15,39,66,.025) 1px,transparent 1px,transparent 52px)!important;border:1px solid var(--line)!important;border-top:6px solid var(--accent)!important;box-shadow:var(--soft-shadow)!important}
.theme-gmp-command .eyebrow,body.theme-gmp-command .eyebrow{color:#7f1d1d!important;background:rgba(226,31,47,.09)!important;border-left:4px solid var(--accent)!important}
.theme-gmp-command .kpi-card,body.theme-gmp-command .kpi-card{border-left:5px solid var(--accent)!important;box-shadow:0 14px 34px rgba(15,39,66,.08)!important}
.theme-gmp-command .card,body.theme-gmp-command .card{border-color:var(--line)!important;box-shadow:0 12px 30px rgba(15,39,66,.07)!important}
.theme-gmp-command .section-card,body.theme-gmp-command .section-card{box-shadow:0 12px 28px rgba(15,39,66,.08)!important}
.theme-gmp-command .hero-logo-panel img,body.theme-gmp-command .hero-logo-panel img{max-width:100%;object-fit:contain}

/* V33 Home Screen */
.gmp-home-hero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) 390px;
  gap:28px;
  align-items:stretch;
  padding:34px;
  border-radius:28px;
  border:1px solid var(--line);
  border-top:7px solid var(--accent);
  background:
    linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.82)),
    radial-gradient(circle at 86% 18%,rgba(226,31,47,.09),transparent 30%),
    repeating-linear-gradient(90deg,rgba(15,39,66,.035) 0,rgba(15,39,66,.035) 1px,transparent 1px,transparent 54px),
    repeating-linear-gradient(0deg,rgba(15,39,66,.025) 0,rgba(15,39,66,.025) 1px,transparent 1px,transparent 54px);
  box-shadow:var(--soft-shadow);
}
.home-hero-copy h1{
  margin:18px 0 12px;
  font-size:clamp(34px,4.2vw,64px);
  line-height:.98;
  letter-spacing:-.045em;
  color:var(--ink);
}
.home-hero-copy p{
  max-width:780px;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}
.home-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 18px;
}
.home-actions button{
  min-height:46px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:950;
  cursor:pointer;
}
.home-actions button.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(15,39,66,.18);
}
.home-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.home-trust span{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(226,31,47,.075);
  border:1px solid rgba(226,31,47,.16);
  color:#7f1d1d;
  font-size:12px;
  font-weight:950;
}
.home-hero-brand{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-radius:24px;
  padding:24px;
  background:rgba(255,255,255,.86);
  border:1px solid var(--line);
  box-shadow:0 22px 46px rgba(15,39,66,.08);
}
.home-hero-brand img{
  width:100%;
  max-width:310px;
  height:auto;
  object-fit:contain;
}
.home-hero-brand b{
  font-size:24px;
  margin-top:10px;
  color:var(--ink);
}
.home-hero-brand small{
  color:var(--muted);
  font-weight:900;
}
.brand-divider{
  width:78%;
  height:4px;
  margin:18px 0 8px;
  border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent-2),var(--primary));
}
.home-kpi-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.home-kpi{
  min-height:118px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--accent);
  box-shadow:0 12px 28px rgba(15,39,66,.07);
}
.home-kpi span{
  color:var(--muted);
  font-size:12px;
  font-weight:950;
}
.home-kpi b{
  display:block;
  margin:8px 0 6px;
  font-size:34px;
  color:var(--ink);
}
.home-kpi small{
  color:var(--muted);
  font-weight:750;
}
.home-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
  margin-top:18px;
}
.home-module{
  position:relative;
  min-height:160px;
  text-align:left;
  padding:22px;
  border-radius:24px;
  border:1px solid var(--line);
  background:
    radial-gradient(circle at 90% 10%,rgba(226,31,47,.07),transparent 32%),
    #fff;
  box-shadow:0 14px 32px rgba(15,39,66,.075);
  cursor:pointer;
  overflow:hidden;
}
.home-module:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:6px;
  background:var(--module-accent,var(--accent));
}
.home-module span{
  display:inline-flex;
  width:42px;
  height:42px;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:color-mix(in srgb,var(--module-accent,var(--accent)) 12%,#fff);
  color:var(--module-accent,var(--accent));
  font-weight:1000;
  border:1px solid color-mix(in srgb,var(--module-accent,var(--accent)) 22%,var(--line));
}
.home-module b{
  display:block;
  margin:16px 0 8px;
  font-size:19px;
  color:var(--ink);
}
.home-module small{
  color:var(--muted);
  font-weight:760;
  line-height:1.55;
}
.home-module:hover{
  transform:translateY(-2px);
  box-shadow:0 24px 46px rgba(15,39,66,.11);
}
.module-dashboard{--module-accent:#0f2742}
.module-sections{--module-accent:#d97706}
.module-upload{--module-accent:#0ea5e9}
.module-proc{--module-accent:#a855f7}
.module-hr{--module-accent:#ec4899}
.module-validation{--module-accent:#22c55e}
.home-bottom-grid{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:16px;
  margin-top:18px;
}
.home-status-card p{
  color:var(--muted);
  line-height:1.7;
}
.home-status-list,.quick-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}
.home-status-list span,.quick-links button{
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:900;
  color:var(--ink);
}
.quick-links button{
  cursor:pointer;
}
@media(max-width:1180px){
  .gmp-home-hero{grid-template-columns:1fr}
  .home-kpi-grid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:820px){
  .home-module-grid,.home-bottom-grid{grid-template-columns:1fr}
  .home-kpi-grid{grid-template-columns:repeat(2,1fr)}
  .gmp-home-hero{padding:22px}
}
@media(max-width:520px){
  .home-kpi-grid{grid-template-columns:1fr}
  .home-hero-copy h1{font-size:34px}
}

/* V34 Intro Home + Electrical Organization Chart */
.intro-landing{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) 390px;
  gap:28px;
  align-items:stretch;
  padding:34px;
  border-radius:30px;
  border:1px solid var(--line);
  border-top:7px solid var(--accent);
  background:
    linear-gradient(90deg,rgba(255,255,255,.96),rgba(255,255,255,.84)),
    radial-gradient(circle at 86% 18%,rgba(226,31,47,.09),transparent 30%),
    repeating-linear-gradient(90deg,rgba(15,39,66,.035) 0,rgba(15,39,66,.035) 1px,transparent 1px,transparent 54px),
    repeating-linear-gradient(0deg,rgba(15,39,66,.025) 0,rgba(15,39,66,.025) 1px,transparent 1px,transparent 54px);
  box-shadow:var(--soft-shadow);
}
.intro-copy h1{
  margin:18px 0 12px;
  font-size:clamp(36px,4.4vw,66px);
  line-height:.96;
  letter-spacing:-.05em;
  color:var(--ink);
}
.intro-copy p{
  max-width:850px;
  color:var(--muted);
  font-size:16px;
  line-height:1.75;
}
.intro-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin:24px 0 18px;
}
.intro-actions button{
  min-height:46px;
  padding:12px 18px;
  border-radius:14px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:950;
  cursor:pointer;
}
.intro-actions button.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
  box-shadow:0 14px 30px rgba(15,39,66,.18);
}
.intro-badges{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.intro-badges span{
  padding:8px 11px;
  border-radius:999px;
  background:rgba(226,31,47,.075);
  border:1px solid rgba(226,31,47,.16);
  color:#7f1d1d;
  font-size:12px;
  font-weight:950;
}
.intro-logo-panel{
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-radius:24px;
  padding:24px;
  background:rgba(255,255,255,.90);
  border:1px solid var(--line);
  box-shadow:0 22px 46px rgba(15,39,66,.08);
}
.intro-logo-panel img{
  width:100%;
  max-width:315px;
  height:auto;
  object-fit:contain;
}
.intro-logo-panel b{
  margin-top:18px;
  color:var(--ink);
  font-size:24px;
}
.intro-logo-panel small{
  color:var(--muted);
  font-weight:900;
}
.intro-kpis{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.intro-kpis div{
  min-height:118px;
  padding:18px;
  border-radius:20px;
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--accent);
  box-shadow:0 12px 28px rgba(15,39,66,.07);
}
.intro-kpis span{
  color:var(--muted);
  font-size:12px;
  font-weight:950;
}
.intro-kpis b{
  display:block;
  margin:8px 0 6px;
  font-size:34px;
  color:var(--ink);
}
.intro-kpis small{
  color:var(--muted);
  font-weight:760;
}
.org-section{
  margin-top:18px;
  padding:26px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--line);
  box-shadow:0 16px 38px rgba(15,39,66,.08);
}
.org-header{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}
.org-header h2{
  margin:10px 0 6px;
  font-size:30px;
  letter-spacing:-.03em;
}
.org-header p{
  margin:0;
  color:var(--muted);
}
.org-header button{
  white-space:nowrap;
  border:0;
  border-radius:14px;
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  padding:12px 16px;
  font-weight:950;
  cursor:pointer;
}
.org-chart{
  position:relative;
  padding:8px 0 4px;
}
.org-level{
  display:flex;
  justify-content:center;
  gap:18px;
  position:relative;
  z-index:2;
}
.org-node{
  width:min(100%,520px);
  padding:18px 20px;
  border-radius:22px;
  background:
    linear-gradient(135deg,#fff,#f8fafc);
  border:1px solid var(--line);
  border-left:6px solid var(--accent);
  box-shadow:0 12px 28px rgba(15,39,66,.075);
  text-align:center;
}
.org-node b{
  display:block;
  color:var(--ink);
  font-size:18px;
}
.org-node small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-weight:900;
  direction:rtl;
}
.org-rank{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:42px;
  height:30px;
  margin-bottom:10px;
  border-radius:999px;
  background:rgba(226,31,47,.09);
  color:#7f1d1d;
  border:1px solid rgba(226,31,47,.18);
  font-size:11px;
  font-weight:1000;
}
.top-node{
  border-left-color:var(--primary);
  background:
    radial-gradient(circle at 90% 12%,rgba(247,201,72,.15),transparent 30%),
    linear-gradient(135deg,#fff,#f8fafc);
}
.team-level{
  max-width:880px;
  margin-inline:auto;
}
.team-node{
  width:min(100%,390px);
  border-left-color:#d97706;
}
.technicians-level .org-node{
  width:min(100%,720px);
  border-left-color:#0f9f6e;
}
.org-connector{
  height:34px;
  width:2px;
  background:linear-gradient(180deg,var(--accent),rgba(15,39,66,.18));
  margin:0 auto;
}
.org-connector.split{
  position:relative;
  width:min(520px,70%);
  height:42px;
  background:none;
  border-top:2px solid rgba(15,39,66,.18);
  border-left:2px solid rgba(15,39,66,.18);
  border-right:2px solid rgba(15,39,66,.18);
  margin-top:16px;
}
.org-connector.split:before{
  content:"";
  position:absolute;
  left:50%;
  top:-18px;
  width:2px;
  height:18px;
  background:rgba(15,39,66,.18);
}
.org-connector.split.lower{
  border-left:0;
  border-right:0;
  border-top:0;
  width:2px;
  height:34px;
  background:linear-gradient(180deg,rgba(15,39,66,.18),var(--good));
  margin-top:0;
}
.intro-modules{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:14px;
  margin-top:18px;
}
.intro-modules button{
  text-align:left;
  min-height:132px;
  padding:18px;
  border-radius:22px;
  background:#fff;
  border:1px solid var(--line);
  border-top:5px solid var(--accent);
  box-shadow:0 12px 28px rgba(15,39,66,.07);
  cursor:pointer;
}
.intro-modules b{
  display:block;
  font-size:17px;
  color:var(--ink);
  margin-bottom:8px;
}
.intro-modules small{
  color:var(--muted);
  line-height:1.55;
  font-weight:760;
}
@media(max-width:1180px){
  .intro-landing{grid-template-columns:1fr}
  .intro-kpis{grid-template-columns:repeat(2,1fr)}
  .intro-modules{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .intro-landing,.org-section{padding:20px}
  .org-header{flex-direction:column}
  .team-level{flex-direction:column}
  .org-node,.team-node{width:100%}
  .org-connector.split{width:2px;height:28px;border:0;background:rgba(15,39,66,.18);margin:0 auto}
  .org-connector.split:before{display:none}
}
@media(max-width:560px){
  .intro-kpis,.intro-modules{grid-template-columns:1fr}
  .intro-copy h1{font-size:34px}
}

/* V36 Organization Photo Frames */
.org-node{
  display:flex;
  flex-direction:column;
  align-items:center;
}
.org-photo-frame{
  width:112px;
  height:112px;
  padding:7px;
  margin-bottom:12px;
  border-radius:26px;
  background:
    linear-gradient(#fff,#fff) padding-box,
    linear-gradient(135deg,var(--accent),var(--accent-2),var(--primary)) border-box;
  border:3px solid transparent;
  box-shadow:0 14px 32px rgba(15,39,66,.14);
}
.org-photo-frame img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  border-radius:18px;
  background:#fff;
}
.top-node .org-photo-frame{
  width:132px;
  height:132px;
  border-radius:30px;
}
.team-node .org-photo-frame{
  width:104px;
  height:104px;
}
.technicians-photo{
  width:126px;
  height:126px;
}
.org-node b{
  max-width:100%;
}
.org-node small{
  font-size:13px;
}
@media(max-width:760px){
  .org-photo-frame{width:96px;height:96px}
  .top-node .org-photo-frame{width:108px;height:108px}
}

/* V37 Login Fix */
.auth-screen .msg:empty{display:none}
.auth-screen .msg{
  margin-top:12px;
  font-weight:900;
}

/* V38 Editable Organization Chart */
.org-editor-card{
  border-top:6px solid var(--accent);
}
.actions-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
.actions-row button{
  min-height:42px;
  padding:10px 14px;
  border-radius:13px;
  border:1px solid var(--line);
  background:#fff;
  font-weight:950;
  cursor:pointer;
}
.actions-row button.primary{
  background:linear-gradient(135deg,var(--primary),var(--primary-2));
  color:#fff;
  border-color:transparent;
}
.editable-org-chart .org-level.multi{
  flex-wrap:wrap;
}
.editable-org-node{
  min-width:260px;
}
.editable-org-node .org-person-meta{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
  margin-top:10px;
}
.editable-org-node .org-person-meta em{
  font-style:normal;
  font-size:11px;
  font-weight:850;
  color:var(--muted);
  background:#f8fafc;
  border:1px solid var(--line);
  padding:5px 8px;
  border-radius:999px;
}
.mini-avatar{
  width:44px;
  height:44px;
  object-fit:cover;
  border-radius:12px;
  border:2px solid color-mix(in srgb,var(--accent) 24%,var(--line));
  background:#fff;
}
.org-editor-card textarea{
  min-height:96px;
}
@media(max-width:760px){
  .editable-org-node{min-width:100%}
}

/* V39 Editable Sections */
.section-editor-card{
  border-top:6px solid var(--accent);
}
.section-mini-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:38px;
  height:34px;
  padding:0 8px;
  border-radius:12px;
  background:rgba(226,31,47,.08);
  color:#7f1d1d;
  border:1px solid rgba(226,31,47,.18);
  font-weight:1000;
  font-size:12px;
}
.section-editor-card textarea{
  min-height:96px;
}
.section-editor-card code{
  font-size:12px;
  background:#f8fafc;
  border:1px solid var(--line);
  padding:3px 6px;
  border-radius:8px;
}

/* V40 Admin-only editor pages */
.admin-editor-note{
  color:var(--muted);
  font-weight:850;
}

/* V44 Global Enterprise Redesign
   Enterprise Light + GYPTO Red Identity
*/
:root,
.theme-gmp-command,
body.theme-gmp-command{
  --v44-bg:#f4f6fa;
  --v44-panel:#ffffff;
  --v44-panel-2:#f8fafc;
  --v44-ink:#0f172a;
  --v44-muted:#667085;
  --v44-line:#d9e2ee;
  --v44-red:#e21f2f;
  --v44-red-dark:#a91420;
  --v44-navy:#0b1624;
  --v44-navy-2:#13263d;
  --v44-gold:#d6a23c;
  --v44-green:#138a63;
  --v44-amber:#b7791f;
  --v44-radius:22px;
  --v44-shadow:0 22px 55px rgba(15,23,42,.10);
  --v44-shadow-soft:0 10px 28px rgba(15,23,42,.07);
  --bg:var(--v44-bg);
  --surface:var(--v44-panel);
  --surface-2:var(--v44-panel-2);
  --ink:var(--v44-ink);
  --muted:var(--v44-muted);
  --line:var(--v44-line);
  --primary:var(--v44-navy);
  --primary-2:var(--v44-navy-2);
  --accent:var(--v44-red);
  --accent-2:var(--v44-gold);
  --soft-shadow:var(--v44-shadow);
}

html{
  scroll-behavior:smooth;
}
body{
  background:
    radial-gradient(circle at 3% 0%, rgba(226,31,47,.060), transparent 28%),
    radial-gradient(circle at 96% 4%, rgba(15,23,42,.075), transparent 30%),
    linear-gradient(180deg,#f7f9fc 0%,#eef3f8 100%) !important;
  color:var(--v44-ink) !important;
  letter-spacing:-.01em;
}

/* Main application frame */
.app,
.shell,
.main{
  background:transparent !important;
}
.content,
#view{
  background:transparent !important;
}

/* Sidebar: global enterprise dark rail */
.sidebar{
  background:
    linear-gradient(180deg,#090f19 0%,#0e1726 48%,#111827 100%) !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
  box-shadow:16px 0 50px rgba(15,23,42,.18) !important;
}
.brand{
  border-radius:24px !important;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.035)) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08) !important;
}
.brand img{
  background:#fff !important;
  border-radius:16px !important;
  padding:8px !important;
  box-shadow:0 16px 32px rgba(0,0,0,.18) !important;
  object-fit:contain !important;
}
.brand-title{
  color:#f8fafc !important;
  font-weight:1000 !important;
  letter-spacing:-.035em !important;
}
.brand-sub{
  color:#b8c2d3 !important;
}
.sidebar .eyebrow,
.nav-group-title,
.nav h4{
  color:#9aa7bd !important;
  letter-spacing:.12em !important;
  font-weight:1000 !important;
}
.nav button,
.sidebar button{
  border-radius:16px !important;
  color:#f8fafc !important;
  background:transparent !important;
  border:1px solid transparent !important;
  font-weight:900 !important;
}
.nav button:hover{
  background:rgba(255,255,255,.060) !important;
  border-color:rgba(255,255,255,.10) !important;
}
.nav button.active{
  background:
    linear-gradient(90deg,rgba(226,31,47,.28),rgba(214,162,60,.09)) !important;
  border-color:rgba(226,31,47,.34) !important;
  box-shadow:inset 4px 0 0 var(--v44-red),0 12px 24px rgba(0,0,0,.18) !important;
}
.sidebar .badge,
.nav .badge{
  background:rgba(255,255,255,.12) !important;
  color:#f8fafc !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

/* Topbar */
.topbar{
  height:82px !important;
  background:rgba(255,255,255,.88) !important;
  backdrop-filter:blur(18px) !important;
  border-bottom:1px solid rgba(217,226,238,.86) !important;
  box-shadow:0 8px 28px rgba(15,23,42,.045) !important;
}
.topbar h1,
.topbar h2,
#pageTitle{
  font-size:28px !important;
  letter-spacing:-.04em !important;
  color:var(--v44-ink) !important;
}
.topbar p,
#pageSubtitle{
  color:var(--v44-muted) !important;
}
.topbar button,
.topbar select{
  border-radius:16px !important;
  border:1px solid var(--v44-line) !important;
  background:#fff !important;
  box-shadow:0 10px 24px rgba(15,23,42,.06) !important;
  font-weight:950 !important;
}
.topbar select{
  min-width:210px !important;
}

/* Cards */
.card,
.kpi-card,
.chart-card,
.home-kpi,
.intro-kpis div,
.org-section,
.section-editor-card,
.org-editor-card{
  border-radius:24px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(255,255,255,.92)) !important;
  border:1px solid rgba(217,226,238,.92) !important;
  box-shadow:var(--v44-shadow-soft) !important;
}
.card:hover,
.kpi-card:hover,
.home-kpi:hover,
.intro-kpis div:hover{
  box-shadow:var(--v44-shadow) !important;
}

/* Home / intro hero */
.intro-landing,
.gmp-home-hero,
.enterprise-hero{
  position:relative;
  overflow:hidden;
  border-radius:34px !important;
  border:1px solid rgba(217,226,238,.98) !important;
  border-top:8px solid var(--v44-red) !important;
  background:
    linear-gradient(110deg,rgba(255,255,255,.98) 0%,rgba(255,255,255,.88) 58%,rgba(248,250,252,.78) 100%),
    radial-gradient(circle at 86% 24%,rgba(226,31,47,.12),transparent 30%),
    radial-gradient(circle at 18% 10%,rgba(15,23,42,.05),transparent 35%),
    repeating-linear-gradient(90deg,rgba(15,23,42,.035) 0,rgba(15,23,42,.035) 1px,transparent 1px,transparent 64px),
    repeating-linear-gradient(0deg,rgba(15,23,42,.025) 0,rgba(15,23,42,.025) 1px,transparent 1px,transparent 64px) !important;
  box-shadow:0 28px 80px rgba(15,23,42,.12) !important;
}
.intro-landing:before,
.gmp-home-hero:before,
.enterprise-hero:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:5px;
  background:linear-gradient(180deg,var(--v44-red),var(--v44-gold),var(--v44-navy));
  opacity:.95;
}
.intro-copy h1,
.home-hero-copy h1,
.enterprise-hero h2{
  color:var(--v44-ink) !important;
  font-weight:1000 !important;
  letter-spacing:-.07em !important;
}
.intro-copy p,
.home-hero-copy p,
.enterprise-hero p{
  color:#536176 !important;
  max-width:820px !important;
}

/* Logo panel */
.intro-logo-panel,
.home-hero-brand,
.hero-logo-panel{
  background:
    linear-gradient(180deg,#fff,#f8fafc) !important;
  border:1px solid rgba(217,226,238,.96) !important;
  box-shadow:0 24px 60px rgba(15,23,42,.10) !important;
}
.intro-logo-panel img,
.home-hero-brand img,
.hero-logo-panel img{
  object-fit:contain !important;
  filter:drop-shadow(0 16px 28px rgba(15,23,42,.08));
}
.intro-logo-panel b,
.home-hero-brand b,
.hero-logo-panel b{
  color:var(--v44-ink) !important;
  font-weight:1000 !important;
}
.intro-logo-panel small,
.home-hero-brand small,
.hero-logo-panel small{
  color:var(--v44-muted) !important;
}

/* Buttons */
button,
.btn,
.intro-actions button,
.home-actions button,
.actions-row button{
  transition:.18s ease !important;
}
button:hover,
.btn:hover,
.intro-actions button:hover,
.home-actions button:hover,
.actions-row button:hover{
  transform:translateY(-1px);
}
button.primary,
.btn.primary,
.intro-actions button.primary,
.home-actions button.primary,
.actions-row button.primary,
.org-header button{
  background:linear-gradient(135deg,#0b1624,#17304d) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:0 18px 34px rgba(11,22,36,.22) !important;
}
.intro-actions button:not(.primary),
.home-actions button:not(.primary),
.actions-row button:not(.primary){
  background:#fff !important;
  color:var(--v44-ink) !important;
  border:1px solid var(--v44-line) !important;
}

/* Badges */
.eyebrow{
  border-radius:999px !important;
  padding:9px 12px !important;
  border:1px solid rgba(226,31,47,.14) !important;
  border-left:4px solid var(--v44-red) !important;
  background:rgba(226,31,47,.075) !important;
  color:#8b101b !important;
  letter-spacing:.10em !important;
  font-weight:1000 !important;
}
.intro-badges span,
.home-trust span,
.hero-meta span{
  background:#fff !important;
  color:#8b101b !important;
  border:1px solid rgba(226,31,47,.16) !important;
  box-shadow:0 8px 18px rgba(15,23,42,.045) !important;
}

/* KPIs */
.intro-kpis,
.home-kpi-grid,
.kpi{
  gap:18px !important;
}
.kpi-card,
.home-kpi,
.intro-kpis div{
  position:relative;
  overflow:hidden;
  border-left:0 !important;
  border-top:5px solid var(--v44-red) !important;
  min-height:132px !important;
}
.kpi-card:after,
.home-kpi:after,
.intro-kpis div:after{
  content:"";
  position:absolute;
  right:-28px;
  bottom:-34px;
  width:118px;
  height:118px;
  border-radius:999px;
  background:rgba(226,31,47,.055);
}
.kpi-card span,
.home-kpi span,
.intro-kpis span{
  color:#697586 !important;
  font-weight:1000 !important;
  letter-spacing:.02em !important;
}
.kpi-card b,
.home-kpi b,
.intro-kpis b{
  color:var(--v44-ink) !important;
  font-weight:1000 !important;
}

/* Main section tiles */
.section-grid,
.folder-grid{
  gap:20px !important;
}
.section-card,
.folder-card{
  border-radius:26px !important;
  border:1px solid rgba(217,226,238,.95) !important;
  border-top:0 !important;
  border-left:0 !important;
  min-height:210px !important;
  padding:22px !important;
  background:
    linear-gradient(180deg,#fff,#f8fafc) !important;
  box-shadow:0 14px 36px rgba(15,23,42,.08) !important;
}
.section-card:before,
.folder-card:before{
  height:5px !important;
  background:linear-gradient(90deg,var(--section-accent,var(--v44-red)),color-mix(in srgb,var(--section-accent,var(--v44-red)) 35%,var(--v44-navy))) !important;
}
.section-card .folder-icon,
.folder-card .folder-icon{
  border-radius:18px !important;
  background:#fff !important;
  color:var(--section-accent,var(--v44-red)) !important;
  border:1px solid color-mix(in srgb,var(--section-accent,var(--v44-red)) 25%,var(--v44-line)) !important;
  box-shadow:0 12px 26px color-mix(in srgb,var(--section-accent,var(--v44-red)) 14%,transparent) !important;
}
.section-ribbon{
  background:#fff !important;
  border-color:color-mix(in srgb,var(--section-accent,var(--v44-red)) 24%,var(--v44-line)) !important;
  color:color-mix(in srgb,var(--section-accent,var(--v44-red)) 70%,#0f172a) !important;
}
.section-footer span{
  background:#fff !important;
  color:#475467 !important;
}

/* Forms */
input,
select,
textarea{
  border-radius:16px !important;
  border:1px solid #d6e0ed !important;
  background:#fff !important;
  box-shadow:inset 0 1px 0 rgba(15,23,42,.025) !important;
}
input:focus,
select:focus,
textarea:focus{
  outline:none !important;
  border-color:rgba(226,31,47,.45) !important;
  box-shadow:0 0 0 4px rgba(226,31,47,.08) !important;
}
label span{
  color:#344054 !important;
  font-weight:950 !important;
}

/* Tables */
.tablewrap{
  border-radius:22px !important;
  border:1px solid var(--v44-line) !important;
  overflow:auto !important;
  background:#fff !important;
  box-shadow:0 12px 30px rgba(15,23,42,.06) !important;
}
table{
  border-collapse:separate !important;
  border-spacing:0 !important;
}
thead th{
  position:sticky;
  top:0;
  background:#f8fafc !important;
  color:#475467 !important;
  font-weight:1000 !important;
  text-transform:uppercase;
  letter-spacing:.06em;
  font-size:11px !important;
  border-bottom:1px solid var(--v44-line) !important;
  z-index:2;
}
tbody td{
  border-bottom:1px solid #edf1f6 !important;
  color:#1f2937 !important;
}
tbody tr:hover{
  background:#fbfcfe !important;
}

/* Organization chart */
.org-section{
  border-top:6px solid var(--v44-red) !important;
}
.org-node{
  border-radius:24px !important;
  border:1px solid rgba(217,226,238,.95) !important;
  border-left:0 !important;
  border-top:5px solid var(--v44-red) !important;
  background:linear-gradient(180deg,#fff,#f8fafc) !important;
  box-shadow:0 14px 34px rgba(15,23,42,.08) !important;
}
.org-photo-frame{
  border-radius:28px !important;
  box-shadow:0 20px 40px rgba(15,23,42,.16) !important;
}
.org-rank{
  background:rgba(226,31,47,.08) !important;
  color:#8b101b !important;
}

/* QR minimal */
.floating-qr-card{
  width:112px !important;
  padding:9px !important;
  border-radius:20px !important;
  background:rgba(255,255,255,.92) !important;
  box-shadow:0 22px 55px rgba(15,23,42,.18) !important;
}
.floating-qr-card img,
#floatingQrImage{
  width:78px !important;
  height:78px !important;
  border-radius:12px !important;
}

/* Print / mobile */
@media(max-width:1180px){
  .intro-landing,
  .gmp-home-hero{
    grid-template-columns:1fr !important;
  }
  .intro-kpis,
  .home-kpi-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:720px){
  .topbar{
    height:auto !important;
    padding:10px !important;
  }
  .intro-landing,
  .gmp-home-hero,
  .enterprise-hero{
    padding:22px !important;
    border-radius:24px !important;
  }
  .intro-copy h1,
  .home-hero-copy h1{
    font-size:34px !important;
    letter-spacing:-.05em !important;
  }
  .intro-kpis,
  .home-kpi-grid,
  .home-module-grid,
  .intro-modules{
    grid-template-columns:1fr !important;
  }
  .floating-qr-card{
    width:72px !important;
    border-radius:14px !important;
  }
  .floating-qr-card img,
  #floatingQrImage{
    width:54px !important;
    height:54px !important;
  }
}

/* V44 utility: hide accidental empty buttons */
button:empty{
  display:none !important;
}

/* V45 Complete Layout Redesign - visibly different global enterprise UI */
:root,
body.v45-global-enterprise{
  --v45-bg:#eef3f8;
  --v45-paper:#ffffff;
  --v45-ink:#101828;
  --v45-muted:#667085;
  --v45-red:#ed1c2e;
  --v45-red-2:#b31323;
  --v45-navy:#07111f;
  --v45-blue:#142f52;
  --v45-gold:#d8a247;
  --v45-green:#0f8a63;
  --v45-amber:#bd7b1f;
  --v45-line:#d8e1ed;
  --v45-radius:28px;
  --v45-shadow:0 28px 80px rgba(8,20,36,.14);
}

body.v45-global-enterprise{
  background:
    linear-gradient(120deg,rgba(237,28,46,.055),transparent 34%),
    radial-gradient(circle at 100% 0%,rgba(20,47,82,.10),transparent 30%),
    linear-gradient(180deg,#f8fafc 0%,#eef3f8 100%) !important;
}

/* Change whole layout rhythm */
.v45-global-enterprise #view{
  padding-top:8px !important;
}
.v45-global-enterprise .topbar{
  height:86px !important;
  background:rgba(255,255,255,.80) !important;
  backdrop-filter:blur(20px) !important;
  border-bottom:1px solid rgba(216,225,237,.88) !important;
}
.v45-global-enterprise .topbar h1,
.v45-global-enterprise #pageTitle{
  font-size:30px !important;
  font-weight:1000 !important;
  letter-spacing:-.05em !important;
}

/* Sidebar complete refresh */
.v45-global-enterprise .sidebar{
  background:
    radial-gradient(circle at 30% 0%,rgba(237,28,46,.20),transparent 28%),
    linear-gradient(180deg,#07111f 0%,#0a1424 48%,#050a12 100%) !important;
  border-right:1px solid rgba(255,255,255,.10) !important;
}
.v45-global-enterprise .brand{
  border-radius:30px !important;
  background:rgba(255,255,255,.075) !important;
  border:1px solid rgba(255,255,255,.12) !important;
  padding:18px !important;
}
.v45-global-enterprise .brand img{
  width:120px !important;
  max-width:120px !important;
  height:auto !important;
  background:#fff !important;
  border-radius:18px !important;
  padding:9px !important;
}
.v45-global-enterprise .nav button{
  height:48px !important;
  border-radius:18px !important;
  margin:3px 0 !important;
}
.v45-global-enterprise .nav button.active{
  background:linear-gradient(90deg,rgba(237,28,46,.34),rgba(216,162,71,.12)) !important;
  border:1px solid rgba(237,28,46,.42) !important;
  box-shadow:inset 4px 0 0 var(--v45-red) !important;
}

/* Completely new home */
.v45-landing{
  display:grid;
  grid-template-columns:minmax(0,1.3fr) 380px;
  gap:26px;
  padding:34px;
  border-radius:36px;
  background:
    linear-gradient(120deg,#07111f 0%,#101d31 50%,#162d4a 100%);
  color:#fff;
  box-shadow:var(--v45-shadow);
  position:relative;
  overflow:hidden;
  min-height:450px;
}
.v45-landing:before{
  content:"";
  position:absolute;
  width:520px;
  height:520px;
  border-radius:999px;
  right:-180px;
  top:-220px;
  background:radial-gradient(circle,rgba(237,28,46,.46),transparent 68%);
}
.v45-landing:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.045) 0,rgba(255,255,255,.045) 1px,transparent 1px,transparent 72px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.030) 0,rgba(255,255,255,.030) 1px,transparent 1px,transparent 72px);
  pointer-events:none;
}
.v45-hero-left,
.v45-command-panel{
  position:relative;
  z-index:2;
}
.v45-system-pill{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:9px 13px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.16);
  color:#f8fafc;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.09em;
}
.v45-system-pill span{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--v45-red);
  box-shadow:0 0 0 6px rgba(237,28,46,.18);
}
.v45-hero-left h1{
  margin:26px 0 16px;
  font-size:clamp(48px,5.7vw,86px);
  line-height:.88;
  letter-spacing:-.08em;
  color:#fff;
}
.v45-hero-left h1 em{
  font-style:normal;
  color:#ffe3e6;
}
.v45-lead{
  max-width:840px;
  color:#c9d4e5;
  font-size:17px;
  line-height:1.75;
}
.v45-actions{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  margin:26px 0 22px;
}
.v45-actions button{
  min-height:50px;
  padding:13px 18px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:16px;
  background:rgba(255,255,255,.10);
  color:#fff;
  font-weight:1000;
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.v45-actions .v45-primary{
  background:#fff;
  color:var(--v45-navy);
  border-color:#fff;
  box-shadow:0 18px 40px rgba(0,0,0,.22);
}
.v45-meta-row{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  max-width:720px;
}
.v45-meta-row div{
  padding:14px;
  border-radius:18px;
  background:rgba(255,255,255,.095);
  border:1px solid rgba(255,255,255,.13);
}
.v45-meta-row b{
  display:block;
  font-size:20px;
  color:#fff;
}
.v45-meta-row span{
  color:#c9d4e5;
  font-size:12px;
  font-weight:900;
}

/* Right command panel */
.v45-command-panel{
  align-self:stretch;
  padding:24px;
  border-radius:30px;
  background:rgba(255,255,255,.96);
  color:var(--v45-ink);
  box-shadow:0 32px 70px rgba(0,0,0,.22);
  border:1px solid rgba(255,255,255,.20);
}
.v45-logo-box{
  border-radius:24px;
  padding:24px;
  background:linear-gradient(180deg,#fff,#f8fafc);
  border:1px solid var(--v45-line);
  text-align:center;
}
.v45-logo-box img{
  width:100%;
  max-width:260px;
  height:auto;
  object-fit:contain;
}
.v45-panel-title{
  margin:18px 0 14px;
  font-size:24px;
  font-weight:1000;
  letter-spacing:-.04em;
}
.v45-status-list{
  display:grid;
  gap:10px;
}
.v45-status-list div{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:13px 14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid var(--v45-line);
}
.v45-status-list span{
  color:var(--v45-muted);
  font-weight:900;
}
.v45-status-list b{
  color:var(--v45-ink);
}

/* KPI strip redesigned */
.v45-kpi-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:18px;
  margin:22px 0;
}
.v45-kpi{
  position:relative;
  min-height:150px;
  padding:22px;
  border-radius:28px;
  background:#fff;
  border:1px solid var(--v45-line);
  box-shadow:0 16px 42px rgba(8,20,36,.08);
  overflow:hidden;
}
.v45-kpi:before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:7px;
  background:var(--v45-blue);
}
.v45-kpi i{
  position:absolute;
  right:-22px;
  bottom:-30px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:rgba(20,47,82,.07);
}
.v45-kpi.green:before{background:var(--v45-green)}
.v45-kpi.green i{background:rgba(15,138,99,.08)}
.v45-kpi.amber:before{background:var(--v45-amber)}
.v45-kpi.amber i{background:rgba(189,123,31,.08)}
.v45-kpi.red:before{background:var(--v45-red)}
.v45-kpi.red i{background:rgba(237,28,46,.08)}
.v45-kpi span{
  color:var(--v45-muted);
  font-size:12px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}
.v45-kpi b{
  display:block;
  margin:10px 0 8px;
  font-size:42px;
  color:var(--v45-ink);
  font-weight:1000;
}
.v45-kpi small{
  color:#536176;
  font-weight:850;
}

/* Workspace split */
.v45-workspace{
  display:grid;
  grid-template-columns:minmax(0,1fr) 340px;
  gap:22px;
  margin-bottom:22px;
}
.v45-work-main,
.v45-side-card,
.v45-org-preview{
  border-radius:30px;
  background:#fff;
  border:1px solid var(--v45-line);
  box-shadow:0 16px 46px rgba(8,20,36,.08);
}
.v45-work-main{
  padding:24px;
}
.v45-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin-bottom:18px;
}
.v45-mini-label{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.11em;
  color:var(--v45-red);
  text-transform:uppercase;
}
.v45-section-head h2{
  margin:8px 0 0;
  font-size:31px;
  letter-spacing:-.05em;
  color:var(--v45-ink);
}
.v45-section-head button,
.v45-side-card button{
  border:0;
  border-radius:15px;
  padding:12px 15px;
  background:var(--v45-navy);
  color:#fff;
  font-weight:1000;
  cursor:pointer;
}
.v45-module-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:16px;
}
.v45-module{
  min-height:180px;
  text-align:left;
  border:1px solid var(--v45-line);
  border-radius:24px;
  background:
    linear-gradient(180deg,#fff,#f8fafc);
  padding:20px;
  cursor:pointer;
  box-shadow:0 10px 28px rgba(8,20,36,.06);
  position:relative;
  overflow:hidden;
}
.v45-module:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--module-color,var(--v45-red));
}
.v45-module span{
  display:inline-flex;
  width:44px;
  height:44px;
  align-items:center;
  justify-content:center;
  border-radius:15px;
  background:color-mix(in srgb,var(--module-color,var(--v45-red)) 12%,#fff);
  color:var(--module-color,var(--v45-red));
  font-weight:1000;
}
.v45-module b{
  display:block;
  margin:16px 0 8px;
  font-size:18px;
  color:var(--v45-ink);
}
.v45-module small{
  color:var(--v45-muted);
  line-height:1.55;
  font-weight:780;
}
.v45-module:hover{
  transform:translateY(-3px);
  box-shadow:0 22px 50px rgba(8,20,36,.11);
}
.v45-module.m1{--module-color:#142f52}
.v45-module.m2{--module-color:#ed1c2e}
.v45-module.m3{--module-color:#7c3aed}
.v45-module.m4{--module-color:#0f8a63}
.v45-module.m5{--module-color:#bd7b1f}
.v45-module.m6{--module-color:#0891b2}

.v45-side-stack{
  display:grid;
  gap:18px;
}
.v45-side-card{
  padding:22px;
  min-height:190px;
  border-top:6px solid var(--v45-blue);
}
.v45-side-card.danger{
  border-top-color:var(--v45-red);
}
.v45-side-card h3{
  margin:10px 0 8px;
  color:var(--v45-ink);
  font-size:24px;
  letter-spacing:-.04em;
}
.v45-side-card p{
  color:var(--v45-muted);
  line-height:1.65;
}

/* Org preview */
.v45-org-preview{
  padding:24px;
  margin-bottom:30px;
  border-top:6px solid var(--v45-red);
}

/* Existing elements become more premium too */
.card,
.org-section,
.tablewrap,
.section-card,
.folder-card,
.kpi-card,
.chart-card{
  border-radius:28px !important;
  box-shadow:0 18px 45px rgba(8,20,36,.08) !important;
}
.tablewrap thead th{
  background:#f1f5f9 !important;
}
button:empty{
  display:none !important;
}

/* QR less intrusive */
.floating-qr-card{
  width:104px !important;
  padding:8px !important;
  border-radius:18px !important;
  background:rgba(255,255,255,.92) !important;
}
.floating-qr-card img,
#floatingQrImage{
  width:72px !important;
  height:72px !important;
}

/* Responsive */
@media(max-width:1200px){
  .v45-landing,
  .v45-workspace{
    grid-template-columns:1fr;
  }
  .v45-kpi-strip{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:900px){
  .v45-module-grid{
    grid-template-columns:1fr;
  }
}
@media(max-width:640px){
  .v45-landing{
    padding:22px;
    border-radius:26px;
  }
  .v45-hero-left h1{
    font-size:40px;
  }
  .v45-meta-row,
  .v45-kpi-strip{
    grid-template-columns:1fr;
  }
  .v45-section-head{
    flex-direction:column;
  }
}

/* V46 User Notifications */
.notification-stack{
  position:fixed;
  left:calc(var(--sidebar-w, 286px) + 22px);
  bottom:22px;
  z-index:1000;
  display:grid;
  gap:10px;
  width:min(440px,calc(100vw - 340px));
  pointer-events:none;
}
.notification-stack.hidden{
  display:none;
}
.user-notification{
  pointer-events:auto;
  display:grid;
  grid-template-columns:10px 1fr 32px;
  gap:12px;
  align-items:start;
  padding:14px 14px;
  border-radius:20px;
  background:rgba(255,255,255,.96);
  border:1px solid var(--line);
  box-shadow:0 24px 60px rgba(8,20,36,.20);
  backdrop-filter:blur(14px);
  overflow:hidden;
  position:relative;
}
.user-notification:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:4px;
  background:var(--notif-color,#142f52);
}
.user-notification.info{--notif-color:#142f52}
.user-notification.warning{--notif-color:#bd7b1f}
.user-notification.critical{--notif-color:#ed1c2e}
.user-notification.success{--notif-color:#0f8a63}
.notif-dot{
  width:10px;
  height:10px;
  margin-top:5px;
  border-radius:50%;
  background:var(--notif-color,#142f52);
  box-shadow:0 0 0 6px color-mix(in srgb,var(--notif-color,#142f52) 14%,transparent);
}
.notif-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}
.notif-top b{
  color:var(--ink);
  font-size:14px;
}
.notif-top span{
  padding:4px 7px;
  border-radius:999px;
  color:var(--notif-color,#142f52);
  background:color-mix(in srgb,var(--notif-color,#142f52) 10%,#fff);
  border:1px solid color-mix(in srgb,var(--notif-color,#142f52) 20%,var(--line));
  font-size:10px;
  font-weight:1000;
  text-transform:uppercase;
}
.notif-body p{
  margin:6px 0;
  color:#475467;
  line-height:1.5;
  font-weight:750;
}
.notif-body small{
  color:var(--muted);
  font-size:11px;
  font-weight:800;
}
.notif-close{
  width:32px;
  height:32px;
  border:0;
  border-radius:12px;
  background:#f1f5f9;
  color:#0f172a;
  cursor:pointer;
  font-size:20px;
  line-height:1;
}
.notification-admin-card{
  border-top:6px solid var(--accent);
}
.notification-admin-card textarea{
  min-height:120px;
}
@media(max-width:1080px){
  .notification-stack{
    left:16px;
    right:16px;
    width:auto;
    bottom:14px;
  }
}
@media(max-width:720px){
  .notification-stack{
    bottom:88px;
  }
  .user-notification{
    grid-template-columns:8px 1fr 28px;
    padding:12px;
  }
}


/* V52 Home Typography Fix - reduce oversized landing text */
.v45-landing{
  min-height:360px !important;
  padding:28px 32px !important;
  grid-template-columns:minmax(0,1.25fr) 340px !important;
  gap:24px !important;
}
.v45-hero-left h1{
  font-size:clamp(38px,4.2vw,58px) !important;
  line-height:1.02 !important;
  letter-spacing:-.055em !important;
  margin:22px 0 14px !important;
  max-width:850px !important;
}
.v45-lead{
  font-size:15.5px !important;
  line-height:1.65 !important;
  max-width:780px !important;
}
.v45-system-pill{
  font-size:11px !important;
  padding:8px 12px !important;
  letter-spacing:.07em !important;
}
.v45-actions button{
  padding:13px 18px !important;
  font-size:13px !important;
}
.v45-meta-row{
  margin-top:20px !important;
  gap:12px !important;
}
.v45-meta-row div{
  min-height:72px !important;
  padding:16px !important;
}
.v45-meta-row b{
  font-size:18px !important;
}
.v45-command-panel{
  padding:24px !important;
  border-radius:28px !important;
}
.v45-logo-box img{
  max-width:210px !important;
}
.v45-panel-title{
  font-size:19px !important;
  margin-top:16px !important;
}
.v45-status-list div{
  min-height:43px !important;
  padding:0 14px !important;
}
@media(max-width:1200px){
  .v45-landing{grid-template-columns:1fr !important;}
  .v45-command-panel{max-width:520px !important;}
}
@media(max-width:640px){
  .v45-landing{padding:22px !important;border-radius:24px !important;}
  .v45-hero-left h1{font-size:34px !important;line-height:1.05 !important;}
  .v45-lead{font-size:13.5px !important;}
}


/* V53 Fixed Header No Overlap
   Keep the top command bar visible while scrolling and stop page sections from sliding underneath it. */
:root{--v53-top-height:86px;}
.app:not(.sidebar-hidden) .top{
  position:fixed !important;
  top:0 !important;
  left:318px !important;
  right:0 !important;
  width:auto !important;
  z-index:5000 !important;
  min-height:var(--v53-top-height) !important;
  background:rgba(255,255,255,.96) !important;
  border-bottom:1px solid rgba(217,226,238,.96) !important;
  box-shadow:0 12px 30px rgba(15,23,42,.08) !important;
}
.app.sidebar-hidden .top{
  position:fixed !important;
  top:0 !important;
  left:0 !important;
  right:0 !important;
  width:auto !important;
  z-index:5000 !important;
  min-height:var(--v53-top-height) !important;
}
.main{
  padding-top:var(--v53-top-height) !important;
}
.content{
  scroll-margin-top:calc(var(--v53-top-height) + 18px) !important;
}
.v45-landing,.card,.section-card,.org-section,.data-card{
  scroll-margin-top:calc(var(--v53-top-height) + 20px) !important;
}
@media(max-width:900px){
  :root{--v53-top-height:150px;}
  .app:not(.sidebar-hidden) .top,.app.sidebar-hidden .top{
    left:0 !important;
    min-height:var(--v53-top-height) !important;
  }
  .main{padding-top:var(--v53-top-height) !important;}
}
@media(max-width:520px){
  :root{--v53-top-height:185px;}
}


/* V55 Definitive Scroll Layout Fix
   The app uses one internal scroll area. The top header stays inside the normal layout,
   so page sections cannot slide underneath it while scrolling. */
html,body{
  height:100% !important;
  min-height:100% !important;
  overflow:hidden !important;
}
#app.app{
  height:100vh !important;
  min-height:100vh !important;
  max-height:100vh !important;
  overflow:hidden !important;
  display:grid !important;
  grid-template-columns:318px minmax(0,1fr) !important;
}
#app.app.sidebar-hidden{
  grid-template-columns:0 minmax(0,1fr) !important;
}
#app .side{
  height:100vh !important;
  max-height:100vh !important;
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  z-index:50 !important;
}
#app .main{
  height:100vh !important;
  max-height:100vh !important;
  min-height:0 !important;
  overflow-y:auto !important;
  overflow-x:hidden !important;
  padding-top:0 !important;
  scroll-behavior:smooth !important;
}
#app .top{
  position:sticky !important;
  top:0 !important;
  left:auto !important;
  right:auto !important;
  width:100% !important;
  min-height:auto !important;
  z-index:1000 !important;
  background:rgba(255,255,255,.97) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  border-bottom:1px solid rgba(217,226,238,.96) !important;
  box-shadow:0 10px 24px rgba(15,23,42,.07) !important;
}
#app .content{
  padding-top:28px !important;
  scroll-margin-top:120px !important;
}
#app .hero,
#app .card,
#app .section-card,
#app .v45-landing,
#app .org-section,
#app .data-card{
  scroll-margin-top:120px !important;
}
#app .footer{
  margin-top:0 !important;
}
@media(max-width:900px){
  html,body{overflow:auto !important;}
  #app.app{
    display:block !important;
    height:auto !important;
    min-height:100vh !important;
    max-height:none !important;
    overflow:visible !important;
  }
  #app .main{
    height:auto !important;
    max-height:none !important;
    min-height:100vh !important;
    overflow:visible !important;
  }
  #app .top{
    position:sticky !important;
    top:0 !important;
  }
}


/* V55 Live Electrical Notice Bar */
#app .live-notice-ticker{
  position:sticky !important;
  top:78px !important;
  z-index:999 !important;
  display:flex !important;
  align-items:center !important;
  gap:12px !important;
  margin:0 !important;
  padding:8px 28px !important;
  border-bottom:1px solid rgba(217,226,238,.95) !important;
  background:linear-gradient(90deg,#0b1220 0%,#10233d 55%,#0f766e 100%) !important;
  color:#fff !important;
  box-shadow:0 8px 18px rgba(15,23,42,.10) !important;
  overflow:hidden !important;
}
#app .ticker-label{
  flex:0 0 auto !important;
  font-size:11px !important;
  letter-spacing:.14em !important;
  font-weight:950 !important;
  padding:7px 10px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.24) !important;
  color:#fff !important;
  white-space:nowrap !important;
}
#app .ticker-viewport{
  flex:1 1 auto !important;
  min-width:0 !important;
  overflow:hidden !important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
#app .ticker-track{
  display:inline-flex !important;
  align-items:center !important;
  gap:34px !important;
  white-space:nowrap !important;
  animation:v55TickerScroll 34s linear infinite !important;
  will-change:transform !important;
  font-size:13px !important;
  font-weight:850 !important;
  color:#fff !important;
}
#app .ticker-track span{
  display:inline-flex !important;
  align-items:center !important;
  gap:6px !important;
  opacity:.96 !important;
}
#app .ticker-track span::after{
  content:"";
  width:5px;height:5px;border-radius:999px;
  background:rgba(255,255,255,.45);
  margin-left:20px;
}
#app .live-notice-ticker:hover .ticker-track{
  animation-play-state:paused !important;
}
@keyframes v55TickerScroll{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}
#app .content{
  padding-top:22px !important;
}
@media(max-width:900px){
  #app .live-notice-ticker{
    position:sticky !important;
    top:0 !important;
    padding:7px 14px !important;
  }
  #app .ticker-label{font-size:10px;padding:6px 8px !important;}
  #app .ticker-track{font-size:12px;gap:24px;animation-duration:28s !important;}
}
@media(prefers-reduced-motion:reduce){
  #app .ticker-track{animation:none !important;}
}


/* V56 Remove Home Command Box
   The right white Enterprise Command panel was stretching the hero height and making the landing block oversized.
   It is removed visually on the Home dashboard and the hero is converted to a clean single-column banner. */
#app .v45-landing{
  grid-template-columns:1fr !important;
  min-height:auto !important;
  padding:26px 30px !important;
  align-items:center !important;
}
#app .v45-command-panel{
  display:none !important;
}
#app .v45-hero-left h1{
  max-width:920px !important;
  font-size:clamp(34px,3.8vw,54px) !important;
  line-height:1.04 !important;
  margin:18px 0 12px !important;
}
#app .v45-lead{
  max-width:900px !important;
}
#app .v45-actions{
  margin:22px 0 18px !important;
}
#app .v45-meta-row{
  max-width:760px !important;
}
@media(max-width:900px){
  #app .v45-landing{padding:22px !important;}
  #app .v45-hero-left h1{font-size:32px !important;}
}


/* V57 Mobile Login Clean Fix
   Keep login/setup/pending screens as a full overlay so dashboard content and QR never appear underneath on mobile. */
.auth-screen{
  position:fixed !important;
  inset:0 !important;
  z-index:80 !important;
  min-height:100dvh !important;
  width:100vw !important;
  overflow:auto !important;
  padding:28px 16px !important;
  box-sizing:border-box !important;
  display:grid !important;
  place-items:center !important;
}
.auth-screen.hidden{display:none !important;}
.auth-screen:not(.hidden) ~ #app,
body:has(.auth-screen:not(.hidden)) #app{
  visibility:hidden !important;
  pointer-events:none !important;
}
.auth-screen:not(.hidden) ~ .page-qr,
body:has(.auth-screen:not(.hidden)) .page-qr{
  display:none !important;
}
@media(max-width:720px){
  .auth-screen{
    place-items:start center !important;
    padding:18px 14px 28px !important;
  }
  .auth-card{
    width:min(92vw,430px) !important;
    border-radius:26px !important;
    padding:22px !important;
    margin:0 auto !important;
  }
  .auth-card img{
    width:128px !important;
    max-height:74px !important;
    object-fit:contain !important;
    display:block !important;
    margin:0 auto 14px !important;
    padding:7px !important;
  }
  .auth-card h2{
    font-size:30px !important;
    line-height:1.12 !important;
    margin:10px 0 20px !important;
  }
  .auth-card input{
    padding:13px 16px !important;
    border-radius:18px !important;
    margin:9px 0 !important;
  }
  .auth-actions{
    display:flex !important;
    gap:10px !important;
    flex-wrap:wrap !important;
  }
  .auth-actions button{
    min-height:50px !important;
  }
}
@media(max-width:390px){
  .auth-card{padding:18px !important;border-radius:22px !important;}
  .auth-card img{width:112px !important;max-height:64px !important;}
  .auth-card h2{font-size:26px !important;}
}

/* V58 Mobile Navigation Fix
   Clean mobile drawer: no ugly half-page layout, no QR overlap, no horizontal overflow. */
@media(max-width:900px){
  html,body{
    width:100% !important;
    max-width:100% !important;
    overflow-x:hidden !important;
  }
  #app.app{
    width:100vw !important;
    max-width:100vw !important;
    display:block !important;
    overflow-x:hidden !important;
  }
  #app .main{
    width:100vw !important;
    max-width:100vw !important;
    overflow-x:hidden !important;
  }
  #app .side{
    position:fixed !important;
    top:0 !important;
    left:0 !important;
    bottom:0 !important;
    width:min(82vw,310px) !important;
    max-width:310px !important;
    height:100dvh !important;
    max-height:100dvh !important;
    z-index:9000 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    transform:translateX(-105%) !important;
    transition:transform .24s ease !important;
    box-shadow:26px 0 55px rgba(2,6,23,.34) !important;
    border-radius:0 24px 24px 0 !important;
    padding:16px 14px 26px !important;
  }
  #app .side.open{
    transform:translateX(0) !important;
    left:0 !important;
  }
  #app:has(.side.open)::after{
    content:"";
    position:fixed;
    inset:0;
    z-index:8990;
    background:rgba(15,23,42,.46);
    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);
  }
  #app .side.open ~ .main{
    pointer-events:none !important;
  }
  #app .side .brand{
    grid-template-columns:88px 1fr !important;
    gap:10px !important;
    padding:12px !important;
    border-radius:20px !important;
    margin-bottom:14px !important;
  }
  #app .side .brand img{
    width:88px !important;
    border-radius:14px !important;
  }
  #app .side .brand b{
    font-size:15px !important;
    line-height:1.08 !important;
  }
  #app .nav-title{
    margin:18px 8px 8px !important;
    font-size:10px !important;
    letter-spacing:.14em !important;
  }
  #app .nav-btn{
    min-height:46px !important;
    margin:6px 0 !important;
    padding:11px 12px !important;
    font-size:14px !important;
    border-radius:15px !important;
  }
  #app .nav-btn small{
    font-size:11px !important;
    padding:3px 8px !important;
  }
  #app .user-card,
  #app .logout{
    font-size:13px !important;
  }
  #floatingQrCard,
  #pageQrDock,
  .floating-qr-card,
  .page-qr{
    display:none !important;
  }
  #app .top{
    position:sticky !important;
    top:0 !important;
    z-index:1200 !important;
    width:100% !important;
    max-width:100vw !important;
  }
  #app .live-notice-ticker{
    max-width:100vw !important;
    overflow:hidden !important;
  }
  #app .content{
    max-width:100vw !important;
    overflow-x:hidden !important;
  }
}
@media(max-width:430px){
  #app .side{width:84vw !important;max-width:300px !important;}
  #app .side .brand{grid-template-columns:78px 1fr !important;}
  #app .side .brand img{width:78px !important;}
  #app .nav-btn{font-size:13px !important;}
}


/* V61 QR / desktop safe visibility fix */
body:not(.app-ready) #floatingQrCard,
body:not(.app-ready) #pageQrDock,
body:not(.app-ready) .floating-qr-card,
body:not(.app-ready) .page-qr{
  display:none !important;
}
body.app-ready #floatingQrCard{
  display:block;
}
@media(max-width:900px){
  body.app-ready #floatingQrCard,
  body.app-ready #pageQrDock,
  body.app-ready .floating-qr-card,
  body.app-ready .page-qr{display:none !important;}
}

/* V62 Mobile SOP Table Scroll Fix */
@media(max-width:900px){
  html,body{max-width:100% !important;overflow-x:hidden !important;}
  #app,.app,.main,.content{min-width:0 !important;max-width:100vw !important;}
  .content{padding-left:14px !important;padding-right:14px !important;}
  .card,.section-card{max-width:100% !important;overflow:visible !important;}
  .tablewrap{
    width:100% !important;
    max-width:calc(100vw - 28px) !important;
    overflow-x:auto !important;
    overflow-y:visible !important;
    -webkit-overflow-scrolling:touch !important;
    touch-action:pan-x pan-y !important;
    display:block !important;
    position:relative !important;
    border-radius:18px !important;
  }
  .tablewrap::before{
    content:"Swipe right / left to view all columns";
    display:block;
    position:sticky;
    left:0;
    top:0;
    z-index:5;
    padding:8px 12px;
    background:#fff7ed;
    color:#9a3412;
    border-bottom:1px solid #fed7aa;
    font-size:12px;
    font-weight:900;
    letter-spacing:.02em;
  }
  .tablewrap table{
    width:max-content !important;
    min-width:980px !important;
  }
  .tablewrap th,.tablewrap td{
    white-space:normal !important;
    word-break:break-word !important;
    overflow-wrap:anywhere !important;
  }
  .tablewrap th:last-child,
  .tablewrap td:last-child{
    position:sticky !important;
    right:0 !important;
    z-index:4 !important;
    background:#fff !important;
    box-shadow:-10px 0 18px rgba(15,23,42,.10) !important;
    min-width:120px !important;
  }
  .tablewrap th:last-child{background:#f1f5f9 !important;z-index:6 !important;}
  .tablewrap button,.tablewrap .btn{min-height:38px !important;margin:3px !important;padding:8px 10px !important;}
}

@media(max-width:520px){
  .tablewrap{max-width:calc(100vw - 24px) !important;}
  .tablewrap table{min-width:1040px !important;}
}


/* V69 CLEAN NO TICKER + RESPONSIVE LAYOUT RESET */
#liveNoticeTicker,.live-notice-ticker,.ticker-label,.ticker-viewport,.ticker-track{
  display:none!important;visibility:hidden!important;opacity:0!important;height:0!important;max-height:0!important;min-height:0!important;padding:0!important;margin:0!important;border:0!important;overflow:hidden!important;
}
html,body{width:100%!important;max-width:100%!important;overflow-x:hidden!important;}
#app{min-height:100vh!important;}
#app .main{min-width:0!important;max-width:100%!important;overflow-x:hidden!important;background:#eef4f9!important;}
#app .content{padding-top:22px!important;}
#app .top{z-index:1000!important;}
@media(max-width:1080px){
  #app.app{display:block!important;grid-template-columns:none!important;width:100%!important;max-width:100%!important;}
  #app .main{display:block!important;width:100%!important;margin:0!important;padding:0!important;min-height:100dvh!important;}
  #app .side{display:block!important;visibility:visible!important;opacity:1!important;position:fixed!important;top:0!important;left:0!important;bottom:0!important;width:min(340px,86vw)!important;max-width:86vw!important;height:100dvh!important;z-index:9999!important;transform:translateX(-110%)!important;transition:transform .22s ease!important;overflow-y:auto!important;box-shadow:28px 0 70px rgba(15,23,42,.28)!important;}
  #app .side.open{transform:translateX(0)!important;pointer-events:auto!important;}
  #app.mobile-menu-open:before{content:""!important;position:fixed!important;inset:0!important;background:rgba(15,23,42,.48)!important;z-index:9990!important;backdrop-filter:blur(2px)!important;}
  body.mobile-menu-open{overflow:hidden!important;}
  #floatingQrCard,.floating-qr-card,#pageQrDock,.page-qr{display:none!important;}
  #app .top{position:sticky!important;top:0!important;background:rgba(255,255,255,.96)!important;backdrop-filter:blur(12px)!important;}
  #app .top-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:10px!important;width:100%!important;}
  #app .top-actions select{grid-column:1/-1!important;width:100%!important;}
}


/* V72: record action buttons visible and clean */
.tablewrap td:last-child{white-space:nowrap !important;min-width:220px !important;}
.tablewrap td:last-child .btn,.tablewrap td:last-child .danger{display:inline-flex !important;align-items:center !important;justify-content:center !important;margin:2px 4px 2px 0 !important;padding:8px 12px !important;border-radius:12px !important;font-size:13px !important;font-weight:900 !important;line-height:1 !important;}
.tablewrap td:last-child .danger{background:#c1121f !important;color:#fff !important;border:1px solid #c1121f !important;}
.tablewrap td:last-child .view-btn{background:#fff !important;color:#061226 !important;border:1px solid var(--line) !important;}
@media(max-width:900px){.tablewrap td:last-child{position:sticky !important;right:0 !important;background:#fff !important;z-index:3 !important;box-shadow:-8px 0 14px rgba(15,23,42,.08) !important;min-width:190px !important;}}


/* V73 Mobile selection overlay fix: close/dim issues on mobile */
@media(max-width:1080px){
  #app.mobile-menu-open::before,
  #app.mobile-menu-open::after{
    display:none !important;
    content:none !important;
  }
  #app .side.open::after{display:none !important;content:none !important;}
  .mobile-menu-backdrop{display:none !important;}
  body.mobile-menu-open #app::after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    background:rgba(15,23,42,.18) !important;
    z-index:8990 !important;
    pointer-events:none !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }
  #app .side{z-index:9000 !important;}
  #app .main{filter:none !important;opacity:1 !important;}
  body:not(.mobile-menu-open) #app::after{display:none !important;content:none !important;}
}


/* V76 Step-by-Step Upload Wizard */
.upload-wizard-card{position:relative;}
.upload-wizard-steps{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:10px;
  margin:18px 0 14px;
}
.wizard-step-pill{
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #d7e0ea;
  background:#fff;
  color:#172033;
  border-radius:16px;
  padding:12px 12px;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 10px 26px rgba(15,23,42,.06);
}
.wizard-step-pill b{
  width:30px;height:30px;border-radius:999px;
  display:grid;place-items:center;
  background:#eaf1f7;color:#0f172a;
  flex:0 0 auto;
}
.wizard-step-pill span{font-size:13px;line-height:1.15;text-align:left;}
.wizard-step-pill.active{
  border-color:#0f766e;
  background:linear-gradient(135deg,#0b1220,#0f766e);
  color:#fff;
}
.wizard-step-pill.active b{background:#fff;color:#0f766e;}
.wizard-step-pill.done{border-color:#8fd5cc;background:#f1fbf9;}
.wizard-step-subtitle{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:12px 14px;
  margin:0 0 16px;
  border-radius:16px;
  background:#f4f8fb;
  border:1px solid #d9e3ec;
  color:#334155;
}
.wizard-step-subtitle b{color:#0f172a;}
.wizard-step-subtitle span{color:#64748b;font-weight:700;}
.form-grid label.wizard-hidden{display:none !important;}
.upload-wizard-controls{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin:16px 0 0;
}
#wizardSaveBtn{background:#0f766e !important;color:#fff !important;}
@media(max-width:900px){
  .upload-wizard-steps{grid-template-columns:1fr;gap:8px;}
  .wizard-step-pill{padding:11px 12px;border-radius:14px;}
  .wizard-step-pill span{font-size:14px;}
  .upload-wizard-controls{justify-content:stretch;}
  .upload-wizard-controls .btn{flex:1;}
}


/* V77 SAFE MENU FIX - definitive no blank screen */
#app.app.sidebar-hidden{display:grid !important;grid-template-columns:280px 1fr !important;}
#app.app.sidebar-hidden .side{display:flex !important;visibility:visible !important;opacity:1 !important;}
#app.desktop-sidebar-hidden{grid-template-columns:1fr !important;}
#app.desktop-sidebar-hidden .side{display:none !important;}
.mobile-menu-backdrop{display:none;}
#app.mobile-menu-open::before,#app.mobile-menu-open::after,body.mobile-menu-open #app::after,#app:has(.side.open)::after{display:none !important;content:none !important;}
@media(max-width:1080px){
  #app.app,#app.app.sidebar-hidden,#app.desktop-sidebar-hidden{display:block !important;grid-template-columns:none !important;width:100% !important;max-width:100% !important;}
  #app .main{display:block !important;width:100% !important;min-height:100dvh !important;opacity:1 !important;visibility:visible !important;filter:none !important;pointer-events:auto !important;background:#eef4f9 !important;}
  #app .side,#app.app.sidebar-hidden .side,#app.desktop-sidebar-hidden .side{
    display:flex !important;visibility:visible !important;opacity:1 !important;position:fixed !important;top:0 !important;left:0 !important;bottom:0 !important;width:min(330px,86vw) !important;max-width:86vw !important;height:100dvh !important;z-index:10020 !important;transform:translateX(-110%) !important;transition:transform .22s ease !important;overflow-y:auto !important;overflow-x:hidden !important;box-shadow:28px 0 70px rgba(15,23,42,.28) !important;border-radius:0 22px 22px 0 !important;
  }
  #app .side.open{transform:translateX(0) !important;left:0 !important;pointer-events:auto !important;}
  .mobile-menu-backdrop{position:fixed !important;inset:0 !important;background:rgba(15,23,42,.22) !important;z-index:10010 !important;display:none !important;opacity:0 !important;pointer-events:none !important;}
  .mobile-menu-backdrop.show{display:block !important;opacity:1 !important;pointer-events:auto !important;}
  body.mobile-menu-open{overflow:hidden !important;}
  body.mobile-menu-open #app .main{opacity:1 !important;visibility:visible !important;filter:none !important;}
}