/* Stage 5 — premium SOC UI layer. Additive only; existing functional classes are preserved. */
:root{
 --ui-bg:#040811;--ui-panel:#081321;--ui-panel-hi:#0c1a2a;--ui-line:#1b3149;--ui-line-hi:#2b4c6d;
 --ui-cyan:#63ddff;--ui-teal:#5ee5c1;--ui-blue:#69aaff;--ui-red:#ff7187;--ui-amber:#ffc875;
 --ui-text:#f1f7ff;--ui-muted:#8da1b9;--ui-radius:16px;--ui-shadow:0 18px 60px rgba(0,0,0,.34)
}
html{scrollbar-color:#29445e #050b14}
body{font-size:14px;letter-spacing:.01em}
/* premium surfaces */
.card,.panel,.stat-card,.stat,.sidebar{transition:transform .22s ease,border-color .22s ease,box-shadow .22s ease,background .22s ease}
.card:hover,.panel:hover,.stat-card:hover,.stat:hover{border-color:#294661;box-shadow:0 22px 70px rgba(0,0,0,.36)}
.stat-card:hover,.stat:hover{transform:translateY(-2px)}
.card,.panel{background:linear-gradient(145deg,rgba(12,27,43,.96),rgba(6,15,26,.98));border-color:#1c344c}
.card-head h2,.sectionhead h2{font-size:17px;color:#f5f9ff}
.card-head p,.sectionhead p{font-size:11px;line-height:1.6}
.eyebrow{font-size:10px;letter-spacing:2px}
.hero h1{font-size:clamp(30px,3vw,42px);font-weight:850}
.hero p{font-size:13px;max-width:780px}
.stat-card strong,.stat b{font-size:30px}
.btn,.mini-btn,.wide-btn,.outline-btn,.mini{min-height:38px;border-radius:10px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,filter .16s ease}
.btn:hover,.mini-btn:hover,.wide-btn:hover,.outline-btn:hover,.mini:hover{transform:translateY(-1px);box-shadow:0 8px 22px rgba(0,0,0,.2)}
.btn.primary,.wide-btn.primary{box-shadow:0 10px 28px rgba(77,204,210,.16)}
.btn:active,.mini-btn:active,.wide-btn:active,.outline-btn:active,.mini:active{transform:translateY(0)}
.input,textarea,select{min-height:42px;font-size:13px!important;border-radius:10px!important;background:rgba(4,12,21,.9)!important}
.input::placeholder,textarea::placeholder{color:#61768e}
.input:focus,textarea:focus,select:focus{border-color:#3e9fc6!important;box-shadow:0 0 0 3px rgba(61,166,202,.10)}
.table{font-size:12px}.table th{font-size:9px}.table td,.table th{padding:13px 11px}.table tr{transition:background .15s}.table tr:hover td{background:rgba(23,48,70,.32)}
.table-wrap,.tablewrap{border-radius:12px}
/* chart polish */
.chart-area,.chart{position:relative;background:linear-gradient(180deg,rgba(6,15,26,.7),rgba(4,11,19,.85));border-color:#193049}
.chart-area:after,.chart:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(91,178,255,.04),transparent 35%)}
.bar{transition:height .45s cubic-bezier(.2,.8,.2,1),filter .18s,transform .18s}.barcol:hover .bar{transform:scaleX(1.08);filter:brightness(1.18)}
/* status / state UI */
.alert{animation:ui-slide-in .25s ease both}.alert.error{box-shadow:0 10px 30px rgba(255,70,100,.08)}
.empty{border:1px dashed #243b52;border-radius:12px;background:rgba(7,17,29,.55);min-height:110px;display:grid;place-items:center;padding:20px}
.empty:before{content:"◌";display:block;font-size:24px;color:#45627f;margin-bottom:5px}
.ui-loading{position:relative;pointer-events:none;opacity:.65}.ui-loading:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(100deg,transparent 20%,rgba(105,170,255,.08) 45%,transparent 70%);background-size:200% 100%;animation:ui-shimmer 1.1s infinite}
.ui-spinner{width:18px;height:18px;border:2px solid #28445d;border-top-color:var(--ui-cyan);border-radius:50%;display:inline-block;animation:ui-spin .75s linear infinite;vertical-align:-4px}
button.is-loading{position:relative;color:transparent!important}.is-loading:after{content:"";position:absolute;width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:ui-spin .7s linear infinite}
.reveal{opacity:0;transform:translateY(8px)}.reveal.ui-visible{opacity:1;transform:none;transition:opacity .45s ease,transform .45s ease}
/* client SOC mobile: preserve all functionality, make navigation usable */
@media(max-width:900px){
 .sidebar{position:sticky;top:0;width:100%;height:auto;max-height:none;padding:12px;z-index:45;overflow:auto}
 .page{margin-left:0;width:100%}.topbar{padding:0 18px}.content{width:min(100% - 28px,1240px)}
 .stats-grid{grid-template-columns:repeat(2,1fr)}.two-col,.three-col{grid-template-columns:1fr}.hero{align-items:flex-start}.hero-actions{flex-wrap:wrap}
 .nav-label{margin-top:8px}.side-nav{flex-direction:row;overflow:auto}.nav-item{min-width:max-content}.sidebar-spacer,.system-card,.account-card,.logout-link{display:none}
}
@media(max-width:620px){
 body{font-size:13px}.content{width:calc(100% - 20px);padding-top:20px}.topbar{height:58px}.stats-grid{grid-template-columns:1fr 1fr;gap:8px}.stat-card{min-height:105px;padding:12px}.stat-card strong{font-size:24px}.hero h1{font-size:28px}.hero{padding:18px}.card,.panel{padding:14px;border-radius:13px}.table-wrap,.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}.table{min-width:720px}.form-grid,.formgrid{grid-template-columns:1fr!important}.checks{grid-template-columns:1fr}.chart{height:200px}.score-ring{width:145px;height:145px}
}
@media(max-width:420px){.stats-grid{grid-template-columns:1fr}.hero-actions,.hero-actions .btn{width:100%}.top-context{display:none}.top-actions{gap:6px}.admin-pill{font-size:8px}.nav-item{height:38px}.nav-item i{display:none}}
/* SaaS admin */
.saas-wrap{max-width:1600px!important}.saas-nav{scrollbar-width:none}.saas-nav a{font-size:11px;padding:10px 13px}.saas-nav a.active{box-shadow:0 0 0 1px rgba(94,229,193,.08),0 8px 24px rgba(0,0,0,.18)}
.saas-wrap .stats{gap:12px}.saas-wrap .stat{min-height:105px;padding:17px}.saas-wrap .stat b{font-size:30px}.saas-wrap .panel{padding:20px}.saas-wrap .table{font-size:12px}.saas-wrap .table th{font-size:9px}
/* portal */
.portal .card{margin-top:14px}.portal .stat{min-height:110px}.portal .btn{min-height:40px}.portal .nav{font-size:12px}.portal .notice{font-size:12px}.portal .table{font-size:12px}.portal .package{transition:transform .2s,border-color .2s,box-shadow .2s}.portal .package:hover{transform:translateY(-3px);border-color:#2d5c7a;box-shadow:0 16px 40px rgba(0,0,0,.25)}
@keyframes ui-spin{to{transform:rotate(360deg)}}
@keyframes ui-shimmer{to{background-position:-200% 0}}
@keyframes ui-slide-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}