/* User portal visual theme — no external font/CDN dependency.
   Same system sans-serif stack as the original public Smartiko website. */
body[data-page="login"],body[data-page="portal"]{--ink:#0b1715;--muted:#71817b;--green:#0b3027;--lime:#b9f43b;--line:#dce4df;--paper:#f5f7f3;background:var(--paper);color:var(--ink);font-family:Inter,"Segoe UI",Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:15px;line-height:1.5}
:is([data-page="login"],[data-page="portal"]) :is(button,input,textarea){font:inherit}
:is([data-page="login"],[data-page="portal"]) h1,:is([data-page="login"],[data-page="portal"]) h2{letter-spacing:-.045em;line-height:1.12}
:is([data-page="login"],[data-page="portal"]) .eyebrow{font-size:11px;letter-spacing:.19em;font-weight:750;color:#596e64}
:is([data-page="login"],[data-page="portal"]) button{border-radius:999px;transition:background .18s,box-shadow .18s,transform .18s}
:is([data-page="login"],[data-page="portal"]) button:focus-visible,:is([data-page="login"],[data-page="portal"]) a:focus-visible{outline:3px solid #87ac35;outline-offset:5px}
:is([data-page="login"],[data-page="portal"]) button:disabled{cursor:not-allowed}
:is([data-page="login"],[data-page="portal"]) .secondary{color:var(--ink);border:1px solid #cbd6cf;background:transparent;font-size:13px;font-weight:600;padding:12px 22px;min-height:44px}
:is([data-page="login"],[data-page="portal"]) .secondary:hover{background:#e8eee4}
:is([data-page="login"],[data-page="portal"]) .brand{font-size:19px;letter-spacing:.04em}
:is([data-page="login"],[data-page="portal"]) .brand span{font-size:10px;letter-spacing:.14em}
:is([data-page="login"],[data-page="portal"]) .notice{border:1px solid #dce5cf;border-radius:15px;background:#edf3e4;color:#536342;padding:16px 20px;font-size:13px;line-height:1.65}
:is([data-page="login"],[data-page="portal"]) .notice.error{background:#fff1e8;border-color:#ebc9ad;color:#803c23}
:is([data-page="login"],[data-page="portal"]) .demo-banner{background:#eaf2da;color:#465f33;font-size:11px;line-height:1.6}
:is([data-page="login"],[data-page="portal"]) .text-button{font-size:11px;background:none;color:#36502a}
/* Two-column login */
[data-page="login"] .client-header{padding:25px max(28px,5vw);background:transparent;border-bottom:1px solid #e2e8e1;min-height:80px}
[data-page="login"] .back-home{font-size:12px;color:#53675f;text-decoration:none}
[data-page="login"] .login-layout{max-width:1520px;margin:0 auto;padding:60px max(28px,5vw) 55px;min-height:calc(100vh - 155px);display:grid;grid-template-columns:1.13fr 1fr;gap:clamp(40px,7vw,115px);align-items:center}
[data-page="login"] .login-intro .eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:.16em}
.signal-dot{display:inline-block;width:9px;height:9px;background:var(--lime);border-radius:50%;box-shadow:0 0 0 7px #eaf2d8;flex-shrink:0}
[data-page="login"] .login-intro h1{font-size:clamp(46px,5.3vw,86px);font-weight:850;letter-spacing:-.06em;line-height:1.07;margin:38px 0 36px}
[data-page="login"] .login-intro h1 span{font-weight:350;color:#75857d;letter-spacing:-.06em}
[data-page="login"] .login-intro>p{font-size:18px;line-height:1.85;max-width:520px;color:#687b72;margin:0}
.login-steps{list-style:none;padding:0;margin:40px 0 0;display:grid;gap:22px;font-size:15px;color:#344d41}
.login-steps li{display:flex;align-items:center;gap:25px}.login-steps li span{font:11px ui-monospace,monospace;color:#8a988e}
[data-page="login"] .login-card{background:white;border:1px solid #dce5df;border-radius:30px;padding:clamp(30px,4vw,55px);box-shadow:0 22px 75px #183c2910}
.login-pill{display:inline-block;padding:9px 14px;background:#edf4df;color:#52683b;border-radius:999px;font-weight:800;text-transform:uppercase;font-size:10px;letter-spacing:.16em}
[data-page="login"] .login-card h2{font-size:40px;font-weight:750;margin:29px 0 18px}
[data-page="login"] .login-card>p{font-size:15px;color:#71817a;margin-bottom:30px}
[data-page="login"] label{font-size:14px;font-weight:600;margin-top:24px}
[data-page="login"] input{border:1px solid #d0dbd3;background:#fbfcf9;padding:17px 18px;border-radius:13px;min-height:60px;margin-top:10px;font-size:15px;color:var(--ink)}
[data-page="login"] input::placeholder{color:#89928d;font-weight:400}
[data-page="login"] input:focus{outline:2px solid #90b854;outline-offset:2px}
[data-page="login"] .login-submit{display:flex;align-items:center;justify-content:center;gap:18px;background:var(--lime);color:#102315;width:100%;margin-top:28px;min-height:58px;font-weight:750;box-shadow:0 12px 28px #9ccf3520}
[data-page="login"] .login-submit:hover{background:#a8e22b;transform:translateY(-1px)}
[data-page="login"] .login-submit span{font-size:23px;font-weight:400}
[data-page="login"] .demo-link{font-size:12px;font-weight:550;color:#234d3a;margin:24px 0 0;text-underline-offset:4px}
[data-page="login"] .login-footnote{font-size:11px;margin-top:19px;color:#7b8880;line-height:1.6}
[data-page="login"] footer{font-size:9px;letter-spacing:.16em;padding:20px;color:#7e8b83}
/* Horizontal workspace navigation */
body[data-page="portal"].workspace{display:flex;flex-direction:column}
[data-page="portal"].workspace>header{order:-3;margin:0;padding:21px max(28px,4vw);background:transparent;border-bottom:1px solid var(--line);min-height:78px}
[data-page="portal"].workspace>.demo-banner{order:-4}
[data-page="portal"] .sidebar{position:static;order:-2;inset:auto;width:auto;padding:0 max(28px,4vw);background:transparent;display:block;border-bottom:1px solid var(--line)}
[data-page="portal"] .sidebar>.eyebrow,[data-page="portal"] .sidebar .sidebar-note{display:none}
[data-page="portal"] .sidebar nav{display:flex;flex-direction:row;gap:26px;overflow:auto}
[data-page="portal"] .sidebar nav a{border-radius:0;padding:16px 0;margin:0;color:#76847c;font-size:12px;white-space:nowrap;border-bottom:2px solid transparent}
[data-page="portal"] .sidebar nav a.active{background:none;color:#153d2b;box-shadow:none;border-bottom-color:#89b331;font-weight:650}
[data-page="portal"] .sidebar nav a:hover{color:#163b28;background:none}
[data-page="portal"].workspace>main.wrap{margin:0 auto;padding:36px max(28px,4vw) 70px;width:100%;max-width:1740px}
[data-page="portal"] header nav{font-size:11px;color:#6d7f74}
[data-page="portal"] header .badge{display:none}.portal-context{display:flex;gap:15px;flex-wrap:wrap;font-size:11px;color:#809086;margin:0 0 20px}.portal-context #company{color:#4e6658;font-weight:650}
[data-page="portal"] .portal-heading{align-items:flex-start;gap:20px;margin-bottom:25px}
[data-page="portal"] .portal-heading h1{font-size:clamp(39px,4.3vw,66px);font-weight:800;margin:0;letter-spacing:-.055em}
[data-page="portal"] .portal-heading h1 span{font-weight:350;color:#75867b}
[data-page="portal"] .portal-heading p{font-size:14px;margin:14px 0 0}
.portal-stats{display:grid;grid-template-columns:repeat(4,1fr);margin:35px 0 45px;gap:0}
.portal-stats>div{padding:0 28px;border-left:1px solid #dfe6de}.portal-stats>div:first-child{padding-left:0;border:0}.portal-stats strong{display:block;font-size:44px;font-weight:350;line-height:1.2;letter-spacing:-.055em;margin:15px 0 6px;font-variant-numeric:tabular-nums}.portal-stats small{font-size:10px;color:#829086;margin:0}
[data-page="portal"] h2{font-size:22px;font-weight:600}
.locker-selection{margin:0 0 30px}.locker-selection .toolbar{margin-bottom:14px}.locker-selection .toolbar h2{margin:0}.locker-selection .toolbar small{font-size:10px}
[data-page="portal"] #lockers{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
[data-page="portal"] .locker-card{text-align:left;color:#0d2017;background:#fff;border:1px solid #dbe4dc;border-radius:24px;padding:25px 28px;min-height:225px;display:flex;flex-direction:column;width:100%;min-width:0}
.locker-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;width:100%;gap:12px}.locker-glyph{font-size:29px;color:#708d7b;line-height:1}.device-badge{border-radius:99px;background:#f0f3ef;color:#78847d;font-weight:400;font-size:10px;padding:6px 10px}
[data-page="portal"] .locker-card strong{font-size:20px;font-weight:600;letter-spacing:-.025em;line-height:1.3;overflow-wrap:anywhere}
.locker-code{font:10px ui-monospace,monospace;letter-spacing:.03em;color:#829185;display:block;margin:13px 0 25px}
.locker-card-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;border-top:1px solid #e8ede7;padding-top:17px;margin-top:auto;width:100%;font-size:11px;font-weight:400;color:#6b7f72}.card-arrow{font-size:27px;line-height:1}
[data-page="portal"] .locker-card:hover{border-color:#88a58a;transform:translateY(-2px)}
[data-page="portal"] .locker-card.is-selected{background:#0b3027;border-color:#0b3027;color:#fff;box-shadow:0 15px 34px #122e2615}.locker-card.is-selected .locker-glyph,.locker-card.is-selected .card-arrow{color:var(--lime)}.locker-card.is-selected .device-badge{background:#264638;color:#c9e59a}.locker-card.is-selected .locker-code{color:#9fb8a9}.locker-card.is-selected .locker-card-footer{color:#becfc3;border-color:#375347}
/* Logical compartment grid and inspector */
.compartment-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(265px,.36fr);gap:24px;align-items:stretch}
.compartment-panel{min-width:0;background:#fff;border:1px solid #dce4df;border-radius:26px;padding:28px}
[data-page="portal"] #locker-name{font-size:26px;margin:14px 0 4px}
#device-state{font-size:11px;margin:9px 0 20px}.box-legend{display:flex;flex-wrap:wrap;gap:18px;font-size:10px;margin:20px 0}.box-legend span:first-child{color:#528322}.box-legend span:nth-child(2){color:#a66a00}.box-legend span:nth-child(3){color:#b13f27}.box-legend span:nth-child(4){color:#315f9c}
[data-page="portal"] #boxes{display:grid;grid-template-columns:repeat(auto-fill,minmax(115px,1fr));gap:11px}
[data-page="portal"] .box-tile{border:1px solid #b8d28d;background:#e5f2cf;border-radius:13px;color:#3f6720;padding:15px;min-height:130px;text-align:left;font-weight:400;display:flex;flex-direction:column;width:100%;min-width:0}
.tile-top{display:flex;justify-content:space-between;align-items:center;width:100%;margin-bottom:20px;gap:8px}.tile-top strong{font-size:22px;letter-spacing:-.06em;font-weight:500;color:#152c20}.tile-icon{font-size:18px;line-height:1;color:#8aa276}.tile-caption{font-size:10px;opacity:.75}.tile-status{font-size:10px;margin-top:3px}
[data-page="portal"] .box-tile.state-2{background:#f9e6b9;border-color:#dfb65d;color:#875800}[data-page="portal"] .box-tile.state-3{background:#f7d2c8;border-color:#dd8f7a;color:#9f321c}[data-page="portal"] .box-tile.state-4{background:#dce9fa;border-color:#91b3df;color:#28578f}[data-page="portal"] .box-tile.state-0{background:#e4e7e5;border-color:#bec6c0;color:#536158}
[data-page="portal"] .box-tile:hover{border-color:#87a65a;box-shadow:0 3px 12px #2444260b}[data-page="portal"] .box-tile.is-selected{outline:2px solid #6d9542;outline-offset:1px;background:#eaf3da}
.box-inspector{background:#0b3027;border-radius:26px;padding:30px;color:#fff;min-width:0;overflow-wrap:anywhere}
[data-page="portal"] .box-inspector .eyebrow{color:#a8c2b2;font-size:9px;font-weight:400}
.inspector-symbol{width:64px;height:64px;border:1px solid #47624a;background:#1f4330;color:var(--lime);border-radius:20px;margin:34px 0 28px;display:grid;place-items:center;font-size:35px}
[data-page="portal"] .box-inspector h2{font-size:28px;line-height:1.2;color:#fff;letter-spacing:-.035em;margin:0 0 15px}
.box-inspector p{color:#acc2b4;font-size:12px;line-height:1.9}.box-inspector dl{margin:27px 0}.box-inspector dt{text-transform:uppercase;font-size:9px;letter-spacing:.12em;color:#8da999;margin-top:18px}.box-inspector dd{margin:5px 0 0;font-size:12px;color:#d9e6dd}
[data-page="portal"] #selected-open{background:var(--lime);color:#163020;width:100%;font-weight:650;font-size:12px;padding:15px}.box-inspector small{color:#96af9e;font-size:10px;line-height:1.7;margin-top:18px}
.freshness,.layout-note{font-size:10px;line-height:1.6!important;color:#7d8c81!important}.freshness{margin-top:24px}.layout-note{padding-top:12px;border-top:1px solid #e6ebe3}
[data-page="portal"] .panel{border:1px solid #dce4df;border-radius:24px;padding:28px;box-shadow:none;margin-top:26px}[data-page="portal"] .panel p{font-size:12px;max-width:850px}[data-page="portal"] th{font-size:10px;text-transform:uppercase;letter-spacing:.09em;font-weight:600;color:#6c8072}[data-page="portal"] td{font-size:12px;padding:17px 10px;color:#344f3e}[data-page="portal"] .panel input{border-radius:12px;border-color:#d6e1d7;background:#fbfcf9}[data-page="portal"] .panel label{font-size:12px}[data-page="portal"] dialog{border-radius:24px;padding:30px}[data-page="portal"] #confirm-open{background:var(--lime);color:#122d1d}
@media(min-width:1500px){[data-page="portal"] #boxes{grid-template-columns:repeat(5,minmax(0,1fr))}.compartment-panel{padding:35px}.box-tile{min-height:145px!important}}
@media(max-width:1000px){[data-page="login"] .login-layout{gap:35px;padding:40px 28px;grid-template-columns:1fr 1fr}[data-page="login"] .login-intro h1{font-size:53px}[data-page="login"] .login-intro>p{font-size:15px}[data-page="login"] .login-card{padding:28px}.compartment-layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.compartment-panel,.box-inspector{padding:22px}[data-page="portal"] .locker-card{padding:22px}.portal-stats>div{padding:0 18px}}
@media(max-width:760px){[data-page="login"] .login-layout{grid-template-columns:1fr;gap:30px;padding:35px 22px}[data-page="login"] .login-intro h1{font-size:clamp(44px,9vw,64px);margin:26px 0 20px}[data-page="login"] .login-intro .eyebrow{font-size:9px}.login-steps{display:none}[data-page="login"] .login-card{max-width:560px;width:100%;margin:auto}[data-page="login"] .login-card h2{font-size:34px}[data-page="portal"].workspace>main.wrap{padding:26px 20px 45px}[data-page="portal"].workspace>header{padding:18px 20px}[data-page="portal"] .sidebar{padding:0 20px}[data-page="portal"] .sidebar nav{gap:23px}.compartment-layout{grid-template-columns:1fr}.box-inspector{min-height:0}.inspector-symbol{margin:22px 0;height:48px;width:48px;font-size:28px}.portal-stats{grid-template-columns:repeat(2,1fr);row-gap:25px;margin:25px 0 35px}.portal-stats>div:nth-child(3){padding-left:0;border:0}.portal-stats strong{font-size:37px;margin-top:10px}.portal-heading .secondary{min-height:40px;font-size:11px}.portal-context{font-size:10px;gap:5px}.portal-context #description{width:100%}[data-page="portal"] #lockers{grid-template-columns:repeat(auto-fit,minmax(235px,1fr))}.locker-selection .toolbar small{max-width:190px}[data-page="portal"] .locker-card{min-height:200px}.locker-card-top{margin-bottom:22px}[data-page="portal"] #boxes{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}[data-page="portal"] .box-tile{min-height:120px;padding:12px}[data-page="portal"] .panel{padding:21px}[data-page="portal"] header nav{gap:12px;flex-wrap:wrap}[data-page="portal"] .brand span{display:block}.box-inspector dl{display:grid;grid-template-columns:1fr 1fr;gap:12px 18px}.box-inspector dt{margin:0}.box-inspector dd{margin:0}}
@media(prefers-reduced-motion:reduce){:is([data-page="login"],[data-page="portal"]) button{transition:none!important;transform:none!important}}

/* v3: compact login card; navigation remains in normal document flow,
   including when an older workspace script generates only .sidebar. */
@media(min-width:901px){
 [data-page="login"] .login-card{width:80%;justify-self:end;padding:clamp(24px,3.2vw,44px);border-radius:24px}
 [data-page="login"] .login-card h2{font-size:32px;margin:23px 0 14px}
 [data-page="login"] .login-card>p{font-size:13px;margin-bottom:24px}
 [data-page="login"] .login-card .login-pill{padding:7px 11px;font-size:9px}
 [data-page="login"] .login-card label{font-size:12px;margin-top:19px}
 [data-page="login"] .login-card input{min-height:48px;padding:13px 14px;margin-top:8px;font-size:13px;border-radius:10px}
 [data-page="login"] .login-card .login-submit{min-height:46px;margin-top:22px;font-size:13px}
 [data-page="login"] .login-card .demo-link{margin-top:19px;font-size:11px}
 [data-page="login"] .login-card .login-footnote{margin-top:15px;font-size:10px}
 [data-page="login"] .login-card .notice{padding:12px 15px;font-size:11px}
}

/* Structural v4 fix: no fixed-position sidebar exists in user pages.
   Defensive suppression also covers an accidentally injected legacy sidebar. */
body.portal-layout-v4>.sidebar{display:none!important}
body.portal-layout-v4 .portal-topnav-v4{position:static!important;inset:auto!important;order:-2;display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;width:100%;padding:0 max(20px,4vw);background:transparent;border-bottom:1px solid #dce4df;z-index:auto}
body.portal-layout-v4 .portal-topnav-v4 a{display:block;position:static;padding:16px 0;color:#71817b;text-decoration:none;font-size:13px;border-bottom:2px solid transparent}
body.portal-layout-v4 .portal-topnav-v4 a[aria-current="page"]{color:#163e2c;border-bottom-color:#92b53e;font-weight:650}
body.portal-layout-v4 .portal-topnav-v4 a:hover{color:#163e2c}
body.portal-layout-v4>header,body.portal-layout-v4>main.wrap{margin-left:0!important}
body.portal-layout-v4>main.wrap{width:100%;max-width:1740px;align-self:center}
[data-page="portal"] #boxes{display:flex;align-items:flex-start;gap:11px;overflow-x:auto;padding-bottom:8px}
[data-page="portal"] #boxes>.box-column{display:flex;flex:1 0 115px;min-width:96px;flex-direction:column;gap:11px}
@media(max-width:760px){[data-page="portal"] #boxes>.box-column{flex-basis:96px}}