:root {
  --ink:#17233c; --muted:#6f7b91; --line:#e6eaf1; --paper:#ffffff; --canvas:#f4f7fb;
  --brand:#2f6fed; --brand-dark:#1d4fc0; --soft:#edf3ff; --success:#17845b; --warn:#b46a0a; --danger:#b83a4b;
  --shadow:0 12px 32px rgba(30,49,86,.08);
}
*{box-sizing:border-box} body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,Segoe UI,Arial,sans-serif}
button,select,input,textarea{font:inherit}.sidebar{position:fixed;inset:0 auto 0 0;width:260px;background:#10223f;color:#fff;padding:22px 16px;display:flex;flex-direction:column;z-index:4}
.brand{display:flex;gap:12px;align-items:center;padding:0 8px 26px}.brand-mark{width:38px;height:38px;border-radius:11px;background:linear-gradient(145deg,#4d8bff,#7b5cff);display:grid;place-items:center;font-weight:800;font-size:20px}.brand strong,.brand small,.sidebar-footer strong,.sidebar-footer small{display:block}.brand small,.sidebar-footer small{color:#9fb0ca;margin-top:3px;font-size:12px}
nav{display:grid;gap:5px}.nav-item{border:0;background:transparent;color:#bac7db;text-align:left;padding:11px 13px;border-radius:9px;cursor:pointer;display:flex;gap:11px;align-items:center}.nav-item:hover,.nav-item.active{background:#203a61;color:#fff}.nav-icon{width:20px;text-align:center}.sidebar-footer{margin-top:auto;border-top:1px solid rgba(255,255,255,.12);padding:18px 8px 0;display:flex;align-items:center;gap:10px}.avatar{width:35px;height:35px;border-radius:50%;display:grid;place-items:center;background:#406ca7;font-size:12px;font-weight:800}
.shell{margin-left:260px;min-height:100vh}.topbar{height:74px;background:var(--paper);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:3}.company-select-wrap label{display:block;font-size:11px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.08em;margin-bottom:3px}.company-select-wrap select{border:0;color:var(--ink);font-weight:700;background:transparent;min-width:380px}.top-actions{display:flex;align-items:center;gap:8px}.icon-button,.search-button{border:1px solid var(--line);background:#fff;border-radius:9px;height:38px;cursor:pointer}.icon-button{width:38px;position:relative}.icon-button b{position:absolute;top:-5px;right:-5px;background:var(--danger);color:#fff;width:17px;height:17px;border-radius:50%;font-size:10px;display:grid;place-items:center}.search-button{padding:0 14px;color:var(--muted)}.mobile-menu{display:none}
.workspace{padding:28px}.page-heading{display:flex;justify-content:space-between;gap:25px;align-items:flex-end;margin-bottom:24px}.eyebrow{font-size:11px;letter-spacing:.12em;color:var(--brand);font-weight:800;margin:0 0 8px}.page-heading h1{font-size:29px;margin:0}.page-heading p{color:var(--muted);margin:7px 0 0}.heading-actions{display:flex;gap:10px}.primary,.secondary{border-radius:9px;padding:10px 15px;font-weight:700;cursor:pointer}.primary{border:1px solid var(--brand);background:var(--brand);color:#fff}.primary:hover{background:var(--brand-dark)}.secondary{border:1px solid var(--line);background:#fff;color:var(--ink)}
.view{display:none}.view.active{display:block}.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:15px;margin-bottom:17px}.metric{background:#fff;border:1px solid var(--line);border-radius:13px;padding:18px;box-shadow:var(--shadow)}.metric-top{display:flex;justify-content:space-between;color:var(--muted);font-size:13px}.metric-icon{background:var(--soft);color:var(--brand);width:32px;height:32px;border-radius:8px;display:grid;place-items:center}.metric strong{display:block;font-size:25px;margin:18px 0 5px}.trend{font-size:12px;color:var(--success)}.trend.down{color:var(--danger)}
.content-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:17px}.panel{background:#fff;border:1px solid var(--line);border-radius:13px;padding:20px;box-shadow:var(--shadow)}.panel.wide{grid-column:span 1}.panel-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:18px}.panel h2{margin:0;font-size:17px}.panel-head p{margin:5px 0 0;color:var(--muted);font-size:13px}.text-button{border:0;background:transparent;color:var(--brand);font-weight:700;cursor:pointer}.pill,.status-draft{background:#fff4dd;color:var(--warn);padding:6px 9px;border-radius:999px;font-size:12px;font-weight:700}
.performance-row{display:grid;grid-template-columns:1.6fr .8fr .8fr .7fr;align-items:center;padding:13px 0;border-top:1px solid var(--line);font-size:13px}.performance-row.header{font-size:11px;color:var(--muted);text-transform:uppercase;font-weight:800;border-top:0}.company-cell{display:flex;align-items:center;gap:10px;font-weight:700}.company-logo{width:31px;height:31px;border-radius:8px;background:var(--soft);color:var(--brand);display:grid;place-items:center;font-size:11px}.status-good{color:var(--success);font-weight:700}.status-watch{color:var(--warn);font-weight:700}
.approval-item,.activity-item{display:flex;gap:12px;padding:12px 0;border-top:1px solid var(--line)}.approval-item:first-child,.activity-item:first-child{border-top:0}.approval-icon,.activity-dot{width:34px;height:34px;border-radius:9px;background:var(--soft);display:grid;place-items:center;color:var(--brand);flex:none}.approval-item strong,.activity-item strong{font-size:13px}.approval-item p,.activity-item p{font-size:12px;color:var(--muted);margin:4px 0}.approval-meta{font-size:11px;color:var(--muted)}
.project-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.project-card{border:1px solid var(--line);border-radius:11px;padding:15px}.project-card h3{font-size:14px;margin:0 0 6px}.project-card p{font-size:12px;color:var(--muted);min-height:30px}.progress{height:7px;border-radius:10px;background:#edf0f5;overflow:hidden;margin:14px 0 7px}.progress span{display:block;height:100%;background:linear-gradient(90deg,var(--brand),#7667f5)}.project-foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted)}
.org-panel{min-height:560px}.org-chart{text-align:center;padding:28px 10px}.org-node{display:inline-flex;flex-direction:column;padding:13px 18px;border:1px solid #cbd6ea;border-radius:10px;background:#fff;box-shadow:0 6px 20px rgba(31,54,94,.08)}.org-node.executive{border-color:var(--brand);background:var(--soft)}.org-node span{font-size:11px;color:var(--muted);margin-top:4px}.connector{height:38px;width:2px;background:#9caac1;margin:0 auto}.org-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}.org-row:before{content:"";position:absolute;top:-20px;left:12.5%;right:12.5%;height:2px;background:#9caac1}.department-node{position:relative;padding:13px 8px;border:1px solid var(--line);border-radius:9px;background:#fff;font-size:12px;font-weight:700}.department-node:before{content:"";position:absolute;top:-20px;left:50%;height:20px;width:2px;background:#9caac1}.department-node small{display:block;color:var(--muted);font-weight:400;margin-top:5px}.legend{display:flex;gap:25px;color:var(--muted);font-size:12px;margin-top:30px}.legend i{display:inline-block;width:30px;vertical-align:middle;margin-right:7px}.solid-line{border-top:2px solid #8997ae}.dotted-line{border-top:2px dotted var(--brand)}
.filters{display:flex;gap:7px}.chip{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 10px;font-size:12px}.chip.active{background:var(--soft);color:var(--brand);border-color:#cbdafe}.approval-table-row{display:grid;grid-template-columns:1.2fr 1.8fr .8fr .8fr .8fr;align-items:center;padding:14px 0;border-top:1px solid var(--line);font-size:12px}.approval-table-row.header{border:0;color:var(--muted);font-size:11px;text-transform:uppercase;font-weight:800}.approve-actions{display:flex;gap:6px}.small-approve,.small-reject{border:0;border-radius:7px;padding:6px 8px;color:#fff;cursor:pointer}.small-approve{background:var(--success)}.small-reject{background:var(--danger)}
.form-panel{max-width:1050px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.form-grid label{font-size:12px;font-weight:700;color:var(--ink)}.form-grid input,.form-grid select,.form-grid textarea,.line-row input,.line-row select{width:100%;border:1px solid var(--line);border-radius:8px;padding:10px;margin-top:7px;background:#fff}.form-grid textarea{min-height:90px;resize:vertical}.span-2{grid-column:span 2}.line-heading{display:flex;justify-content:space-between;align-items:center;margin:24px 0 10px}.line-heading h3{font-size:15px}.line-row{display:grid;grid-template-columns:2.3fr .6fr .65fr .9fr .9fr 34px;gap:9px;align-items:end;margin-bottom:9px}.line-row label{font-size:11px;color:var(--muted)}.remove-line{height:38px;border:1px solid #f0c7cd;background:#fff5f6;color:var(--danger);border-radius:8px;cursor:pointer}.form-total{display:flex;justify-content:flex-end;gap:30px;border-top:1px solid var(--line);padding:18px 0;font-size:16px}.form-actions{display:flex;justify-content:flex-end;gap:10px}.toast{position:fixed;right:24px;bottom:24px;background:#10223f;color:#fff;padding:13px 18px;border-radius:10px;box-shadow:var(--shadow);transform:translateY(100px);opacity:0;transition:.25s;z-index:10}.toast.show{transform:translateY(0);opacity:1}
@media(max-width:1050px){.metric-grid{grid-template-columns:repeat(2,1fr)}.content-grid{grid-template-columns:1fr}.project-cards{grid-template-columns:1fr 1fr}.org-row{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.sidebar{transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.shell{margin-left:0}.mobile-menu{display:block}.topbar{padding:0 14px}.company-select-wrap select{min-width:170px;max-width:210px}.search-button span{display:none}.workspace{padding:18px}.page-heading{align-items:flex-start;flex-direction:column}.metric-grid{grid-template-columns:1fr}.project-cards{grid-template-columns:1fr}.org-row{grid-template-columns:1fr}.org-row:before{display:none}.department-node:before{display:none}.form-grid{grid-template-columns:1fr}.span-2{grid-column:auto}.line-row{grid-template-columns:1fr 1fr}.approval-table-row{grid-template-columns:1fr;gap:5px}.approval-table-row.header{display:none}}
.auth-options{display:flex;align-items:center;justify-content:space-between;gap:16px}.auth-options a,.auth-link{color:#3858e9;font-size:12px;font-weight:750}.auth-link{display:inline-block;margin-top:20px}
/* HTG Laravel Blade compatibility layer */
.shell{min-height:100vh;display:grid;grid-template-columns:245px 1fr}.sidebar{position:sticky;top:0;height:100vh;background:#11192b;color:#d9e1f0;padding:22px 16px;display:flex;flex-direction:column}.brand{display:flex;gap:11px;align-items:center;color:#fff;padding:0 8px 24px}.brand>b,.auth-brand>b{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:linear-gradient(135deg,#5973ff,#804cff);font-size:18px}.brand span,.auth-brand div,.who div{display:flex;flex-direction:column}.brand small,.auth-brand small,.who small{font-size:11px;color:#94a1ba}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar nav a{padding:11px 12px;border-radius:10px;color:#acb8ce;display:flex;align-items:center;gap:8px}.sidebar nav a:hover,.sidebar nav a.active{background:#202b42;color:#fff}.sidebar nav a.active{box-shadow:inset 3px 0 #7185ff}.sidebar nav a.disabled{opacity:.6;cursor:not-allowed}.sidebar nav em{margin-left:auto;font-style:normal;font-size:9px;background:#2d3850;padding:3px 5px;border-radius:5px}.sidebar-foot{margin-top:auto;border-top:1px solid #283249;padding:16px 7px 0}.who{display:flex;align-items:center;gap:9px}.who>span{width:34px;height:34px;border-radius:50%;background:#31405d;display:grid;place-items:center;font-weight:800}.sidebar-foot form button{border:0;background:none;color:#94a1ba;padding:12px 0;cursor:pointer}.topbar{height:76px;background:#fff;border-bottom:1px solid var(--border,#e5e9f0);display:flex;align-items:center;padding:0 28px;position:sticky;top:0;z-index:20}.switcher{display:flex;align-items:center;gap:10px}.switcher label{font-size:12px;color:#687489}.switcher select{min-width:350px}.actions{margin-left:auto;display:flex;gap:10px}.content{padding:28px;max-width:1500px;margin:auto}.menu{display:none;border:0;background:#eef1f6;border-radius:8px;padding:8px;margin-right:8px}.btn{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:9px;padding:10px 14px;font-weight:750;cursor:pointer}.btn.primary{background:#3858e9;color:#fff}.btn.ghost{background:#fff;border-color:#e5e9f0}.btn.danger{background:#fff0f2;border-color:#ffd1d8;color:#c93649}.btn.wide{width:100%;padding:12px}.flash{padding:12px 15px;border-radius:10px;margin-bottom:16px}.flash.good{background:#e8f7f0;color:#0e6c49}.flash.bad{background:#fff0f2;color:#a12635}.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:22px}.page-head h1{font-size:29px;letter-spacing:-.03em;margin:4px 0}.page-head p{margin:0;color:#687489}.eyebrow{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:#3858e9;font-weight:850}.date{background:#fff;border:1px solid #e5e9f0;border-radius:10px;padding:10px 13px;color:#687489}.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.metrics article{background:#fff;border:1px solid #e5e9f0;border-radius:14px;padding:18px;min-height:125px;display:flex;flex-direction:column;box-shadow:0 10px 30px rgba(28,42,73,.07)}.metrics span{color:#687489;font-weight:650}.metrics strong{font-size:31px;margin:12px 0 3px}.metrics small{color:#8994a6}.metrics .accent{border:0;background:linear-gradient(135deg,#3858e9,#6d4aff);color:#fff}.metrics .accent span,.metrics .accent small{color:#e5e9ff}.grid{display:grid;grid-template-columns:minmax(0,2fr) minmax(300px,1fr);gap:18px}.panel{background:#fff;border:1px solid #e5e9f0;border-radius:14px;padding:20px;box-shadow:0 10px 30px rgba(28,42,73,.07);min-width:0}.table{overflow:auto}.record{color:#3858e9;font-weight:800}.status{display:inline-block;border-radius:999px;padding:5px 8px;background:#fff3d8;color:#826000;font-size:10px;font-weight:800;text-transform:capitalize;white-space:nowrap}.status.big{font-size:12px;padding:8px 12px}.right{text-align:right}.empty{text-align:center;color:#687489;padding:26px}.governance>div:not(.panel-head){display:grid;grid-template-columns:32px 1fr;gap:10px;padding:12px 0;border-bottom:1px solid #e5e9f0}.governance b{width:27px;height:27px;border-radius:8px;background:#edf0ff;color:#3858e9;display:grid;place-items:center;font-size:10px}.governance p{margin:0;color:#687489;font-size:12px}.governance p strong{display:block;color:#162033;font-size:13px}.org{padding:28px}.node{border:1px solid #dfe5ee;border-radius:12px;padding:15px;min-height:105px;display:flex;flex-direction:column;justify-content:center}.node span{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#3858e9;font-weight:850}.node strong{margin:4px 0;font-size:15px}.node small{color:#687489;line-height:1.35}.node.chief{max-width:360px;margin:auto;text-align:center;background:linear-gradient(135deg,#17213a,#2c3d67);color:#fff;border:0}.node.chief small{color:#bac5da}.org>i{display:block;width:2px;height:28px;background:#d9e0ea;margin:auto}.org h3{font-size:11px;color:#687489;text-transform:uppercase;letter-spacing:.08em;text-align:center;margin:22px 0 15px}.org-grid{display:grid;gap:13px}.org-grid.five{grid-template-columns:repeat(5,1fr)}.org-grid.three{grid-template-columns:repeat(3,1fr)}.org-grid.four{grid-template-columns:repeat(4,1fr)}.note{margin-top:22px;padding:13px;background:#f5f7ff;border:1px solid #e2e7ff;border-radius:10px;color:#536077}.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-bottom:23px}.form label,.stack label{display:flex;flex-direction:column;gap:7px;color:#465268;font-size:12px;font-weight:700}.form label.wide{grid-column:span 2}.items{border:1px solid #e5e9f0;border-radius:11px;overflow:auto}.item{display:grid;grid-template-columns:minmax(240px,2fr) 80px 90px 120px minmax(130px,1fr) 110px 38px;gap:8px;padding:9px;border-bottom:1px solid #e5e9f0;align-items:center;min-width:900px}.item.head{background:#f6f8fb;font-size:10px;color:#788499;text-transform:uppercase;font-weight:800}.item output{text-align:right;font-weight:800}.item button{border:0;border-radius:8px;width:29px;height:29px;background:#fff0f2;color:#c93649;cursor:pointer}.total{display:flex;justify-content:flex-end;gap:20px;align-items:center;margin:20px 0}.form-actions{display:flex;justify-content:flex-end;gap:9px}.details{display:grid;grid-template-columns:repeat(3,1fr);gap:13px;margin-bottom:20px}.details>div{background:#f8f9fc;border-radius:10px;padding:12px}.details span{display:block;font-size:10px;text-transform:uppercase;color:#687489;margin-bottom:4px}.decision{width:100%;display:flex;gap:10px;align-items:flex-end}.decision div{display:flex;gap:7px}.timeline>div{display:grid;grid-template-columns:15px 1fr;gap:8px;padding-bottom:17px}.timeline b{width:10px;height:10px;border-radius:50%;background:#3858e9;margin-top:4px}.timeline p{display:flex;flex-direction:column;margin:0}.timeline small,.timeline span{color:#687489;font-size:11px;margin-top:3px}.auth{min-height:100vh;display:grid;grid-template-columns:480px 1fr;background:#fff}.auth>section{padding:60px 70px;display:flex;flex-direction:column;justify-content:center}.auth-brand{display:flex;gap:12px;align-items:center;margin-bottom:50px}.auth h1{font-size:34px;letter-spacing:-.04em;margin:0 0 8px}.auth section>p{color:#687489;margin:0 0 24px}.stack{display:flex;flex-direction:column;gap:15px}.check{flex-direction:row!important;align-items:center}.check input{width:auto}.demo{margin-top:20px;padding:12px;background:#f5f7fb;border-radius:9px;color:#687489;font-size:12px}.auth>aside{background:radial-gradient(circle at 75% 20%,rgba(126,93,255,.55),transparent 30%),linear-gradient(135deg,#121b31,#304ab4);color:#fff;padding:75px;display:flex;align-items:center}.auth aside span{font-size:11px;letter-spacing:.12em;color:#bec8ff}.auth h2{font-size:50px;line-height:1.08;letter-spacing:-.05em;margin:10px 0 22px}.auth aside p{font-size:17px;line-height:1.6;color:#d8dff5;max-width:650px}@media(max-width:1100px){.metrics{grid-template-columns:repeat(2,1fr)}.org-grid.five,.org-grid.four{grid-template-columns:repeat(2,1fr)}}@media(max-width:800px){.shell{grid-template-columns:1fr}.sidebar{position:fixed;z-index:40;width:245px;transform:translateX(-100%);transition:.2s}.sidebar.open{transform:translateX(0)}.menu{display:block}.topbar{padding:0 15px}.switcher label{display:none}.switcher select{min-width:0;max-width:45vw}.actions .ghost{display:none}.content{padding:18px}.grid{grid-template-columns:1fr}.org-grid.five,.org-grid.three,.org-grid.four{grid-template-columns:1fr}.form-grid,.details{grid-template-columns:1fr}.form label.wide{grid-column:auto}.auth{grid-template-columns:1fr}.auth>aside{display:none}.auth>section{max-width:520px;width:100%;margin:auto;padding:28px}.page-head{flex-direction:column}.decision{flex-direction:column;align-items:stretch}}@media(max-width:520px){.metrics{grid-template-columns:1fr}.switcher select{max-width:43vw}}

/* Security shell and two-factor authentication */
.shell{margin-left:0}
.auth-brand-icon{width:46px;height:46px;border-radius:50%;object-fit:cover;flex:0 0 46px;box-shadow:0 7px 20px rgba(30,54,110,.16)}
.sidebar-security{display:flex;align-items:center;gap:8px;margin:0 0 13px;padding:9px 0;color:#b7c3d8;font-size:12px;font-weight:700}
.sidebar-security:hover{color:#fff}.sidebar-security em{margin-left:auto;border-radius:999px;background:#26344f;padding:4px 7px;color:#cbd5e8;font-size:9px;font-style:normal;text-transform:uppercase}
.security-auth{grid-template-columns:minmax(610px,760px) 1fr}.security-auth>section{padding:46px 64px;justify-content:flex-start;overflow-y:auto}.security-auth .auth-brand{margin-bottom:30px}
.security-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-bottom:22px}.security-heading h1{margin-top:4px}.security-kicker{display:block;margin-bottom:7px;color:#3858e9;font-size:11px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}
.security-card{margin-top:16px;border:1px solid #e1e6ef;border-radius:14px;background:#fff;padding:20px;box-shadow:0 10px 28px rgba(28,42,73,.06)}
.security-card h2{margin:7px 0;font-size:19px;letter-spacing:-.02em}.security-card p{margin:0 0 17px!important;color:#687489;line-height:1.55}.security-state{display:inline-flex;border-radius:999px;padding:5px 9px;font-size:10px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.security-state.enabled{background:#e7f7ef;color:#0e704a}.security-state.pending{background:#fff3d8;color:#826000}
.setup-key{display:grid;grid-template-columns:100px minmax(0,1fr);gap:9px 14px;margin:17px 0;padding:15px;border-radius:11px;background:#f5f7fb}.setup-key span{color:#687489;font-size:11px;font-weight:750;text-transform:uppercase}.setup-key strong,.setup-key code{overflow-wrap:anywhere;font-size:13px}.setup-key code{font-weight:850;letter-spacing:.08em}
.recovery-card{border-color:#b8e4cf;background:#f5fcf8}.recovery-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:15px}.recovery-grid code{border:1px solid #d7e5de;border-radius:8px;background:#fff;padding:9px;text-align:center;font-weight:800;letter-spacing:.04em}
.security-actions-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.security-actions-grid .security-card{align-self:start}.danger-zone{border-color:#f2cdd3}.danger-zone h2{color:#a12635}
@media(max-width:800px){.security-auth{display:block}.security-auth>section{max-width:620px;padding:28px}.security-heading{flex-direction:column}.security-actions-grid{grid-template-columns:1fr}.recovery-grid{grid-template-columns:1fr}.setup-key{grid-template-columns:1fr}.auth-brand-icon{width:44px;height:44px;flex-basis:44px}}
.stack input{width:100%;min-height:43px;border:1px solid #dfe5ee;border-radius:8px;background:#fff;padding:10px 11px;color:#162033;outline:none}.stack input:focus{border-color:#7185ff;box-shadow:0 0 0 3px rgba(89,115,255,.12)}
.stack .password-control{width:100%}