/* CLEAN SMART PRO — PREMIUM EDITION VISUAL V2 (2026-10-29)
   PRESENTATION ONLY. No HTML, JavaScript, routing, storage, role, API, timer,
   attendance, APK, notification or Q-AS algorithm changes.
   All existing elements and click handlers remain in place. */
#app.csp-dashboard-premium{
  --csp-premium-dark:#061832;
  --csp-premium-navy:#082b59;
  --csp-premium-royal:#0966be;
  --csp-premium-cyan:#21c8df;
  --csp-premium-gold:#eac66e;
  --csp-premium-shadow:0 14px 36px rgba(12,50,96,.13);
  color:#142f50;
}
#app.csp-dashboard-premium > main{
  background:radial-gradient(ellipse at 96% 0%,#d7edff 0%,transparent 34%),
             linear-gradient(170deg,#e9f4ff 0%,#f3f8ff 42%,#fbfdff 100%)!important;
  min-width:0!important;
}
#app.csp-dashboard-premium > aside{
  background:linear-gradient(160deg,#06172e 0%,#082c5b 55%,#061932 100%)!important;
  border-inline-end:1px solid rgba(84,181,241,.21)!important;
}
#app.csp-dashboard-premium > aside .brand{
  border:1px solid rgba(61,192,251,.28);
  border-radius:18px;
  padding:11px;
  background:linear-gradient(115deg,rgba(22,105,204,.27),rgba(11,37,87,.09));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.13);
}
#app.csp-dashboard-premium > aside nav button{
  border-radius:13px!important;
  font-weight:750!important;
  min-height:43px;
  transition:background .18s ease,border-color .18s ease!important;
}
#app.csp-dashboard-premium > aside nav button.active{
  background:linear-gradient(105deg,#0677e8,#0a58ba)!important;
  color:#fff!important;
  border:1px solid #3b9cf8!important;
  box-shadow:0 6px 20px rgba(0,82,209,.29)!important;
}
#app.csp-dashboard-premium > main > header{
  position:relative!important;
  isolation:isolate;
  overflow:hidden!important;
  gap:24px!important;
  padding:clamp(22px,3vw,40px)!important;
  border:1px solid rgba(86,200,247,.66)!important;
  border-radius:30px!important;
  background:
    radial-gradient(circle at 88% 14%,rgba(18,193,233,.24),transparent 35%),
    radial-gradient(circle at 84% 95%,rgba(0,111,234,.25),transparent 31%),
    linear-gradient(125deg,#041630 0%,#082e67 54%,#06628e 100%)!important;
  box-shadow:0 20px 48px rgba(6,42,87,.24),inset 0 1px 0 rgba(255,255,255,.17)!important;
}
#app.csp-dashboard-premium > main > header::before{
  right:-108px!important;top:-146px!important;
  width:min(530px,70vw)!important;height:min(530px,70vw)!important;
  background:repeating-radial-gradient(circle,
    transparent 0 59px,rgba(71,207,247,.30) 60px 62px,transparent 63px 105px)!important;
  opacity:.8!important;
  transform:none!important;
  pointer-events:none;
}
#app.csp-dashboard-premium > main > header::after{
  content:""!important;
  position:absolute!important;right:-40px!important;bottom:-110px!important;
  width:420px!important;height:280px!important;
  background:radial-gradient(ellipse,rgba(0,224,204,.14),transparent 67%)!important;
  pointer-events:none!important;
}
#app.csp-dashboard-premium > main > header .page-heading{
  position:relative!important;z-index:1!important;min-width:0!important;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow{
  color:#70eee6!important;
  font-size:clamp(10px,.94vw,13px)!important;
  letter-spacing:.15em!important;
  font-weight:900!important;
  line-height:1.6!important;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow::before{
  content:""!important;width:10px!important;height:10px!important;
  background:#0ce9c0!important;box-shadow:0 0 0 6px rgba(16,227,190,.13),0 0 15px rgba(16,227,190,.6)!important;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow::after{
  content:"AUTOSTADT · PREMIUM"!important;
  color:#ffe2a5!important;
  letter-spacing:.045em!important;
  border-inline-start:1px solid rgba(255,255,255,.3)!important;
}
#app.csp-dashboard-premium .page-heading h1{
  color:#fff!important;
  font-size:clamp(25px,2.8vw,44px)!important;
  font-weight:950!important;
  letter-spacing:-.035em!important;
  line-height:1.2!important;
  text-wrap:balance;
  text-shadow:0 3px 18px rgba(0,6,28,.28)!important;
}
#app.csp-dashboard-premium .page-heading p{
  margin:8px 0 0!important;
}
#app.csp-dashboard-premium .page-heading p b{
  color:#42d4ff!important;
  font-weight:900!important;
  font-size:clamp(14px,1.4vw,18px)!important;
}
#app.csp-dashboard-premium .csp-dashboard-date{
  color:#ecf5ff!important;
  font-size:clamp(12px,1.1vw,15px)!important;
  margin:13px 0 0!important;
  font-weight:750!important;
}
#app.csp-dashboard-premium > main > header .header-actions{
  position:relative!important;z-index:2!important;
  align-items:stretch!important;
  gap:10px!important;
}
#app.csp-dashboard-premium > main > header .header-actions > .internet-status{
  background:linear-gradient(145deg,#edfff6,#f7fffb)!important;
  color:#087448!important;border:1px solid #72e5b0!important;
  border-radius:16px!important;
  box-shadow:0 9px 22px rgba(0,18,49,.13)!important;
  font-weight:850!important;white-space:normal!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button,
#app.csp-dashboard-premium > main > header .header-actions > select{
  background:rgba(255,255,255,.11)!important;
  color:#f7fbff!important;
  border:1px solid rgba(193,224,253,.38)!important;
  border-radius:15px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1)!important;
  min-height:51px!important;
  font-weight:850!important;
  padding:11px 14px!important;
  text-align:center!important;
  transition:background .18s ease,border-color .18s ease!important;
}
#app.csp-dashboard-premium > main > header .header-actions > select{
  background:#f8fbff!important;
  color:#0d3b74!important;
  border-color:#c7e2ff!important;
  text-align:start!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button:hover{
  background:rgba(255,255,255,.20)!important;
}
#app.csp-dashboard-premium > main > header .header-actions > .bell{
  background:linear-gradient(110deg,rgba(15,130,224,.35),rgba(0,181,202,.22))!important;
  border-color:rgba(131,218,255,.65)!important;
}
#app.csp-dashboard-premium > main > header .header-actions .bell-count{
  box-shadow:0 0 0 3px rgba(255,255,255,.15)!important;
}
#app.csp-dashboard-premium #cspRealVersionPanel{
  display:flex!important;gap:7px!important;flex-wrap:wrap!important;
  margin-top:14px!important;
}
#app.csp-dashboard-premium #cspRealVersionPanel span{
  color:#e7f5ff!important;
  background:rgba(16,103,172,.34)!important;
  border:1px solid rgba(126,205,244,.38)!important;
  box-shadow:none!important;
  font-weight:750!important;
  min-height:33px!important;
  padding:7px 11px!important;
  border-radius:999px!important;
}
#app.csp-dashboard-premium #cspRealVersionPanel span:nth-child(2){
  color:#072e56!important;
  background:linear-gradient(120deg,#e8f9ff,#b8eafb)!important;
  border-color:#a1e0fa!important;
  font-weight:900!important;
}
#app.csp-dashboard-premium .csp-dash-toolbar{
  background:transparent!important;
  border:0!important;
  padding:12px 0 14px!important;
  margin-bottom:3px!important;
}
#app.csp-dashboard-premium .csp-dash-heading strong{
  color:#092f59!important;
  font-size:clamp(19px,2.2vw,25px)!important;
  font-weight:950!important;
}
#app.csp-dashboard-premium .csp-dash-heading small{
  color:#637b96!important;
  font-size:12px!important;
}
#app.csp-dashboard-premium .csp-dash-shortcuts{gap:9px!important}
#app.csp-dashboard-premium .csp-dash-shortcut{
  min-height:46px!important;
  border-radius:14px!important;
  border:1px solid #b9d7ee!important;
  background:#fff!important;
  color:#07588e!important;
  box-shadow:0 6px 19px rgba(22,73,139,.1)!important;
  font-weight:850!important;
}
#app.csp-dashboard-premium .csp-dash-shortcut.primary{
  background:linear-gradient(120deg,#097cea,#0063c7)!important;
  color:#fff!important;
  border-color:#339bed!important;
}
#app.csp-dashboard-premium .csp-dashboard-metrics{
  gap:13px!important;
  margin-bottom:23px!important;
}
#app.csp-dashboard-premium .dashboard-stat-card{
  border:1px solid #cbdff2!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff,#f5faff)!important;
  box-shadow:var(--csp-premium-shadow)!important;
  min-height:130px!important;
  padding:18px!important;
  transform:none!important;
  transition:box-shadow .16s,border-color .16s!important;
}
#app.csp-dashboard-premium .dashboard-stat-card::after{
  width:145px!important;height:145px!important;
  top:-70px!important;right:-64px!important;
  background:radial-gradient(circle,rgba(48,167,239,.16),transparent 70%)!important;
  opacity:1!important;
}
#app.csp-dashboard-premium .dashboard-stat-card > span{
  border-radius:16px!important;
  width:46px!important;height:46px!important;flex:0 0 46px!important;
  background:linear-gradient(135deg,#d4edff,#eff9ff)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.94)!important;
  font-size:24px!important;
}
#app.csp-dashboard-premium .dashboard-stat-card b{
  color:#0a2c55!important;
  font-size:clamp(25px,2.5vw,34px)!important;
  font-weight:950!important;
}
#app.csp-dashboard-premium .dashboard-stat-card small{
  color:#526f8b!important;
  font-size:12px!important;
}
#app.csp-dashboard-premium .csp-kpi-work > span{background:linear-gradient(135deg,#fff2d9,#fffaf0)!important}
#app.csp-dashboard-premium .csp-kpi-re > span,
#app.csp-dashboard-premium .csp-kpi-over > span{background:linear-gradient(135deg,#ffe2e9,#fff6f7)!important}
#app.csp-dashboard-premium .csp-kpi-ok > span{background:linear-gradient(135deg,#d6fbea,#f4fff8)!important}
#app.csp-dashboard-premium .csp-dashboard-operations{margin-top:15px!important}
#app.csp-dashboard-premium .csp-dash-ops-grid{gap:16px!important}
#app.csp-dashboard-premium .csp-dash-ops-grid .panel,
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-self,
#app.csp-dashboard-premium .csp-dash-ops-grid .attendance-summary button{
  background:linear-gradient(145deg,#fff,#f7fbff)!important;
  border:1px solid #cbdff2!important;
  border-radius:23px!important;
  box-shadow:0 10px 29px rgba(18,64,116,.09)!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .live-online-panel{
  background:linear-gradient(145deg,#e9fff6,#fff 75%)!important;
  border-color:#a9ebd2!important;
}
#app.csp-dashboard-premium .csp-dashboard-operations .csp-dash-toolbar{
  padding-top:16px!important;
  border-top:1px solid #d5e4f3!important;
}
@media(min-width:1181px){
 #app.csp-dashboard-premium > main > header{align-items:flex-start!important}
 #app.csp-dashboard-premium .page-heading{flex:1 1 480px!important}
 #app.csp-dashboard-premium > main > header .header-actions{max-width:540px!important}
}
@media(max-width:800px){
 #app.csp-dashboard-premium > main{padding:13px 12px 105px!important}
 #app.csp-dashboard-premium > main > header{
   display:block!important;
   padding:23px 17px 21px!important;
   border-radius:27px!important;
   margin-bottom:24px!important;
 }
 #app.csp-dashboard-premium > main > header::before{
   right:-120px!important;top:-105px!important;width:330px!important;height:330px!important;
 }
 #app.csp-dashboard-premium .page-heading h1{
   font-size:clamp(25px,6vw,33px)!important;
   line-height:1.22!important;
 }
 #app.csp-dashboard-premium .csp-dashboard-eyebrow{
   font-size:10px!important;letter-spacing:.10em!important;
 }
 #app.csp-dashboard-premium .csp-dashboard-eyebrow::after{
   font-size:9px!important;
   padding-inline-start:8px!important;
   margin-inline-start:4px!important;
 }
 #app.csp-dashboard-premium .csp-dashboard-date{font-size:13px!important}
 #app.csp-dashboard-premium > main > header .header-actions{
   display:grid!important;
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:10px!important;
   width:100%!important;max-width:100%!important;
   margin-top:23px!important;
   grid-auto-flow:row!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > *{
   min-width:0!important;max-width:100%!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > button,
 #app.csp-dashboard-premium > main > header .header-actions > select{
   width:100%!important;min-height:65px!important;
   padding:12px 10px!important;
   font-size:12px!important;
   line-height:1.3!important;
   justify-content:center!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > .internet-status{
   width:100%!important;min-height:65px!important;
   justify-content:center!important;
 }
 #app.csp-dashboard-premium > main > header .header-actions > .bell{
   grid-column:1 / -1!important;
   min-height:58px!important;
 }
 #app.csp-dashboard-premium .csp-dash-toolbar{
   gap:12px!important;
   padding-top:9px!important;
 }
 #app.csp-dashboard-premium .csp-dash-shortcuts{width:100%!important}
 #app.csp-dashboard-premium .csp-dash-shortcut{min-height:50px!important;flex:1!important}
 #app.csp-dashboard-premium .csp-dashboard-metrics{
   grid-template-columns:repeat(2,minmax(0,1fr))!important;
   gap:10px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card{
   min-height:130px!important;
   display:flex!important;
   flex-direction:column!important;
   align-items:flex-start!important;
   gap:10px!important;
   padding:14px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card > span{
   width:40px!important;height:40px!important;flex:0 0 40px!important;
   font-size:20px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card b{font-size:28px!important}
 #app.csp-dashboard-premium .dashboard-stat-card small{font-size:11px!important}
 #app.csp-dashboard-premium .csp-dash-ops-grid{
   grid-template-columns:minmax(0,1fr)!important;
 }
 #app.csp-dashboard-premium .csp-dash-ops-grid .panel{padding:17px!important}
}
@media(max-width:420px){
 #app.csp-dashboard-premium > main{padding:9px 9px 99px!important}
 #app.csp-dashboard-premium > main > header{padding:19px 14px!important;border-radius:24px!important}
 #app.csp-dashboard-premium .page-heading h1{font-size:clamp(24px,6.1vw,29px)!important}
 #app.csp-dashboard-premium > main > header .header-actions{gap:8px!important}
 #app.csp-dashboard-premium > main > header .header-actions > button,
 #app.csp-dashboard-premium > main > header .header-actions > select{
   min-height:58px!important;
 }
 #app.csp-dashboard-premium .dashboard-stat-card{min-height:120px!important;padding:13px!important}
}
@media(prefers-reduced-motion:reduce){
 #app.csp-dashboard-premium .dashboard-stat-card,
 #app.csp-dashboard-premium > aside nav button,
 #app.csp-dashboard-premium > main > header .header-actions button{
   transition:none!important;animation:none!important;
 }
}
@media print{
 #app.csp-dashboard-premium > main{background:#fff!important}
 #app.csp-dashboard-premium > main > header{
   background:#fff!important;border:1px solid #cbd5e1!important;
   box-shadow:none!important;
 }
 #app.csp-dashboard-premium > main > header .page-heading h1{color:#12243b!important}
}


/* ==========================================================================
   CLEAN SMART PRO · AUTOSTADT PREMIUM VISUAL V3
   Strict CSS-only redesign, scoped to dashboard. No markup, scripts, routes,
   API calls, roles, workflows, Q-AS formulas, persistence, or releases changed.
   This block intentionally has no animation or hidden functional elements.
   ========================================================================== */
#app.csp-dashboard-premium{
  --csp-premium-gold:#e4be71;
  --csp-premium-glow:#78e5f7;
  --csp-premium-ink:#091a33;
  --csp-premium-card:#fff;
  --csp-premium-stroke:#d8e2ef;
  color:#172b47!important;
}
#app.csp-dashboard-premium > main{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(211,230,248,.68),transparent 39%),
    linear-gradient(160deg,#e9eef6 0%,#f6f8fc 51%,#edf2f9 100%)!important;
}
#app.csp-dashboard-premium > aside{
  background:linear-gradient(155deg,#050e20 0%,#092546 58%,#06172d 100%)!important;
  border-inline-end:1px solid rgba(222,188,111,.28)!important;
  box-shadow:4px 0 28px rgba(3,18,40,.22)!important;
}
#app.csp-dashboard-premium > aside .brand{
  background:linear-gradient(110deg,rgba(255,255,255,.07),rgba(228,190,113,.09))!important;
  border:1px solid rgba(228,190,113,.38)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16)!important;
}
#app.csp-dashboard-premium > aside nav button{
  border:1px solid transparent!important;
  color:#dfebfa!important;
}
#app.csp-dashboard-premium > aside nav button.active{
  background:linear-gradient(120deg,#f8f2e3,#e4eef9)!important;
  border-color:#e0bd77!important;
  color:#102847!important;
  box-shadow:0 5px 15px rgba(2,8,20,.22)!important;
}
#app.csp-dashboard-premium > main > header{
  background:
    radial-gradient(ellipse at 98% 8%,rgba(44,179,218,.30),transparent 39%),
    radial-gradient(ellipse at 75% 110%,rgba(10,98,185,.35),transparent 38%),
    linear-gradient(121deg,#050f22 0%,#082444 47%,#0a3658 100%)!important;
  border:1px solid rgba(228,190,113,.65)!important;
  border-radius:25px!important;
  box-shadow:0 22px 50px rgba(7,28,61,.20),inset 0 1px 0 rgba(255,255,255,.16)!important;
  padding:clamp(22px,3.4vw,42px)!important;
}
#app.csp-dashboard-premium > main > header::before{
  right:-80px!important;top:-130px!important;
  width:min(430px,70vw)!important;height:min(430px,70vw)!important;
  border-radius:50%!important;
  background:repeating-radial-gradient(circle,transparent 0 62px,rgba(116,213,242,.23) 64px 65px,transparent 67px 110px)!important;
  opacity:.65!important;
}
#app.csp-dashboard-premium > main > header::after{
  right:0!important;bottom:0!important;top:auto!important;
  width:min(580px,75%)!important;height:7px!important;
  border-radius:100% 0 22px 0!important;
  background:linear-gradient(90deg,transparent,rgba(228,190,113,.8) 65%,#9ce9fa)!important;
  transform:none!important;opacity:.95!important;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow{
  color:#b9f0f6!important;letter-spacing:.13em!important;
  font-weight:850!important;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow::before{
  background:#e4be71!important;
  box-shadow:0 0 0 5px rgba(228,190,113,.14),0 0 17px rgba(228,190,113,.48)!important;
}
#app.csp-dashboard-premium .csp-dashboard-eyebrow::after{
  content:"AUTOSTADT · PREMIUM EDITION"!important;
  color:#f3d797!important;
  font-size:10px!important;letter-spacing:.08em!important;
}
#app.csp-dashboard-premium .page-heading h1,
#app.csp-dashboard-premium .page-heading .csp-dashboard-greeting{
  color:#fff!important;
  font-size:clamp(26px,2.9vw,42px)!important;
  font-weight:900!important;
  text-shadow:0 3px 20px rgba(1,6,17,.23)!important;
}
#app.csp-dashboard-premium .page-heading p b{
  color:#e4be71!important;font-weight:800!important;font-size:15px!important;
}
#app.csp-dashboard-premium .csp-dashboard-date{
  color:#d9e6f6!important;letter-spacing:.01em!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button{
  border:1px solid rgba(185,219,246,.39)!important;
  border-radius:15px!important;
  background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.07))!important;
  color:#f8fbff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
  font-weight:760!important;
  backdrop-filter:none!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button:hover{
  background:rgba(255,255,255,.23)!important;
}
#app.csp-dashboard-premium > main > header .header-actions > button:focus-visible,
#app.csp-dashboard-premium > aside nav button:focus-visible{
  outline:3px solid #f2d38d!important;outline-offset:2px!important;
}
#app.csp-dashboard-premium > main > header .header-actions > select{
  background:#fff!important;color:#122c4d!important;
  border:1px solid #d9e5f3!important;border-radius:15px!important;
}
#app.csp-dashboard-premium #cspRealVersionPanel{
  border:1px solid rgba(228,190,113,.45)!important;
  background:rgba(255,255,255,.10)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12)!important;
  border-radius:16px!important;
}
#app.csp-dashboard-premium .csp-dash-toolbar{
  padding:17px 4px 15px!important;
}
#app.csp-dashboard-premium .csp-dash-heading strong{
  color:#0d294b!important;letter-spacing:-.025em!important;
}
#app.csp-dashboard-premium .csp-dash-shortcut{
  border:1px solid #bdcde0!important;
  border-radius:14px!important;
  background:linear-gradient(135deg,#fff,#eef4fb)!important;
  color:#103354!important;
  box-shadow:0 7px 16px rgba(9,38,79,.08)!important;
}
#app.csp-dashboard-premium .csp-dash-shortcut.primary{
  color:#fff!important;
  background:linear-gradient(120deg,#09264a,#155c94)!important;
  border-color:#1b639a!important;
}
#app.csp-dashboard-premium .dashboard-stat-card,
#app.csp-dashboard-premium .csp-dash-ops-grid .panel{
  border:1px solid #d6e1ef!important;
  border-radius:22px!important;
  background:linear-gradient(145deg,#fff,#f7f9fc)!important;
  box-shadow:0 12px 30px rgba(12,45,91,.09)!important;
}
#app.csp-dashboard-premium .dashboard-stat-card{
  border-top:3px solid #d8b774!important;
}
#app.csp-dashboard-premium .dashboard-stat-card b{
  color:#092747!important;
}
#app.csp-dashboard-premium .dashboard-stat-card > span{
  background:linear-gradient(135deg,#e9eff8,#fff)!important;
  border:1px solid #dfebf6!important;
}
#app.csp-dashboard-premium .csp-dash-ops-grid .live-online-panel{
  background:linear-gradient(140deg,#edfbf5,#fff)!important;
  border:1px solid #b9e8d1!important;
}
/* The monthly Q-AS summary is injected later by its existing JS.
   Higher specificity deliberately overrides ONLY its visual rules.
   The values, urgency, counters, live updates and accessible role remain. */
#app.csp-dashboard-premium #cs268-qas-dashboard{
  border:1px solid #b9cfe4!important;
  border-inline-start:5px solid #3bcca0!important;
  border-radius:23px!important;
  background:linear-gradient(116deg,#081c37,#103b63 60%,#0b263f)!important;
  box-shadow:0 15px 34px rgba(7,31,64,.22)!important;
  color:#fff!important;
  gap:15px!important;
  padding:20px!important;
  animation:none!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-icon{
  width:55px!important;height:55px!important;
  border:1px solid rgba(218,237,255,.35)!important;
  border-radius:16px!important;
  background:rgba(255,255,255,.13)!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-main small{
  color:#e3c37e!important;font-size:11px!important;
  letter-spacing:.14em!important;line-height:1.6!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard h2{
  color:#fff!important;font-size:clamp(20px,2.2vw,26px)!important;
  line-height:1.3!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard h2 b{
  color:#a5f5c6!important;font-size:clamp(28px,3vw,36px)!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard p{
  color:#d0e4f2!important;font-size:13px!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-kpis{
  gap:9px!important;align-items:stretch!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-kpis span{
  min-width:94px!important;
  background:rgba(255,255,255,.95)!important;
  border:1px solid #d7e3ef!important;
  border-radius:14px!important;
  padding:11px 12px!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-kpis b{
  color:#123052!important;font-size:17px!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-kpis small{
  color:#5e7186!important;font-size:10px!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard.caution{
  border-inline-start-color:#f0c451!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard.caution h2 b{
  color:#f4d484!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard.danger,
#app.csp-dashboard-premium #cs268-qas-dashboard.critical{
  border-inline-start-color:#fb6b6b!important;
  box-shadow:0 0 0 2px rgba(239,68,68,.17),0 16px 36px rgba(7,31,64,.23)!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard.danger h2 b,
#app.csp-dashboard-premium #cs268-qas-dashboard.critical h2 b{
  color:#ff9999!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-alarm,
#app.csp-dashboard-premium #cs268-qas-dashboard .cs268-advisory{
  color:#fff!important;
  border-radius:12px!important;
}
@media(max-width:800px){
  #app.csp-dashboard-premium > aside{
    gap:8px!important;
    padding:9px 11px!important;
    border-bottom:2px solid #d7b56e!important;
  }
  #app.csp-dashboard-premium > aside nav{
    min-width:0!important;
    overflow-x:auto!important;
    scrollbar-width:thin;
    scroll-snap-type:x proximity;
  }
  #app.csp-dashboard-premium > aside nav button{
    flex:0 0 auto!important;
    scroll-snap-align:start;
    border-radius:12px!important;
    padding:10px 12px!important;
  }
  #app.csp-dashboard-premium > main{
    padding:12px 11px 94px!important;
  }
  #app.csp-dashboard-premium > main > header{
    border-radius:23px!important;
    padding:22px 17px 20px!important;
    margin-bottom:17px!important;
  }
  #app.csp-dashboard-premium .page-heading h1,
  #app.csp-dashboard-premium .page-heading .csp-dashboard-greeting{
    font-size:clamp(23px,5.8vw,32px)!important;
  }
  #app.csp-dashboard-premium .csp-dashboard-eyebrow::after{
    display:inline-block!important;
    color:#f5d797!important;
    font-size:9px!important;
  }
  #app.csp-dashboard-premium > main > header .header-actions{
    grid-template-columns:repeat(2,minmax(0,1fr))!important;
    gap:9px!important;
    margin-top:17px!important;
  }
  #app.csp-dashboard-premium > main > header .header-actions > button,
  #app.csp-dashboard-premium > main > header .header-actions > select{
    min-height:58px!important;
    border-radius:13px!important;
    font-size:12px!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard{
    grid-template-columns:50px minmax(0,1fr)!important;
    gap:10px 12px!important;
    padding:18px 14px!important;
    border-radius:20px!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-icon{
    width:46px!important;height:46px!important;
    grid-column:1!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-main{
    min-width:0!important;grid-column:2!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-kpis{
    grid-column:1 / -1!important;
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    justify-content:stretch!important;
    gap:8px!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-kpis span{
    min-width:0!important;padding:9px 5px!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-alarm,
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-advisory{
    grid-column:1 / -1!important;
  }
}
@media(max-width:420px){
  #app.csp-dashboard-premium > main{padding:9px 8px 92px!important}
  #app.csp-dashboard-premium > main > header{padding:18px 13px 17px!important}
  #app.csp-dashboard-premium .csp-dashboard-eyebrow{gap:5px!important}
  #app.csp-dashboard-premium .csp-dashboard-eyebrow::after{font-size:8px!important}
  #app.csp-dashboard-premium #cs268-qas-dashboard h2{font-size:20px!important}
  #app.csp-dashboard-premium #cs268-qas-dashboard h2 b{font-size:29px!important}
  #app.csp-dashboard-premium #cs268-qas-dashboard .cs268-main small{font-size:9px!important}
}
@media print{
  #app.csp-dashboard-premium #cs268-qas-dashboard{
    color:#123052!important;background:#fff!important;
    box-shadow:none!important;border:1px solid #bdcbdc!important;
  }
  #app.csp-dashboard-premium #cs268-qas-dashboard h2,
  #app.csp-dashboard-premium #cs268-qas-dashboard h2 b,
  #app.csp-dashboard-premium #cs268-qas-dashboard p{
    color:#123052!important;
  }
}
