/* Clean Smart Pro Premium Reference V4 | UI ONLY
 * Inspired by the approved Autostadt screenshot; preserves markup state,
 * existing routes, security, Q-AS algorithms, and Android app signing.
 * Radial artwork is expressly decorative, not simulated Q-AS evidence. */
#app.csp-dashboard-premium{
  --ref-navy:#06172e;--ref-dark:#031328;--ref-blue:#0875e6;
  --ref-cyan:#18c8ef;--ref-gold:#ffd470;--ref-radius:20px;
  background:#061f3d;color:#eff6ff;
}
#app.csp-dashboard-premium>aside{
  background:linear-gradient(180deg,#06172e 0%,#052a50 58%,#03152d 100%)!important;
  border-right:1px solid rgba(36,168,246,.35)!important;
  box-shadow:inset -1px 0 rgba(255,255,255,.04)!important;
}
#app.csp-dashboard-premium>aside .brand{
  min-height:94px;padding:14px 9px!important;margin:0 0 14px!important;
  background:radial-gradient(ellipse at 16% 0%,rgba(43,171,244,.28),transparent 65%),linear-gradient(145deg,#071a36,#071f40)!important;
  border:1px solid rgba(49,173,250,.4)!important;border-radius:22px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.11),0 8px 25px rgba(2,12,28,.28)!important;
}
#app.csp-dashboard-premium>aside .brand b{
  font-size:17px!important;line-height:1.18!important;font-weight:900!important;color:#fff!important;
}
#app.csp-dashboard-premium>aside .brand b::after{
  content:"♛  PREMIUM";display:block;font-weight:950;letter-spacing:.07em;
  font-size:11px;color:var(--ref-gold);margin-top:5px;
}
#app.csp-dashboard-premium>aside .brand .logo{background:#fff!important;border-radius:17px!important;overflow:hidden!important}
#app.csp-dashboard-premium>aside nav{
  display:flex!important;flex-direction:column!important;gap:5px!important;
  overflow-y:auto;max-height:calc(100dvh - 225px);padding:0 3px 8px;
}
#app.csp-dashboard-premium>aside nav button{
  flex:0 0 auto!important;display:block!important;width:100%!important;
  min-height:45px!important;padding:11px 12px!important;
  border:1px solid transparent!important;border-radius:13px!important;
  color:#cde0f2!important;font-weight:650!important;text-align:left!important;
  background:transparent!important;box-shadow:none!important;transition:background .15s ease!important;
  white-space:normal!important;
}
#app.csp-dashboard-premium>aside nav button:hover{background:rgba(42,143,217,.23)!important;color:#fff!important}
#app.csp-dashboard-premium>aside nav button.active{
  background:linear-gradient(100deg,#117eea,#0266d8)!important;color:#fff!important;
  border:1px solid #49b1ff!important;box-shadow:0 5px 16px rgba(0,120,242,.31)!important
}
#app.csp-dashboard-premium>main{
  margin-left:255px!important;max-width:none!important;min-width:0!important;
  padding:12px 16px 42px!important;color:#e8f5ff!important;
  background:linear-gradient(140deg,#052044 0%,#093e75 49%,#052a52 100%)!important;
}
#app.csp-dashboard-premium>main>header{
  display:flex!important;align-items:center!important;justify-content:flex-end!important;
  min-height:75px!important;padding:9px 20px!important;margin-bottom:12px!important;
  background:linear-gradient(100deg,#031733,#08244b)!important;
  border:1px solid #0f548c!important;border-radius:21px!important;
  box-shadow:inset 0 1px rgba(255,255,255,.07),0 7px 19px rgba(0,7,23,.14)!important;
}
#app.csp-dashboard-premium>main>header:before,#app.csp-dashboard-premium>main>header:after{display:none!important}
#app.csp-dashboard-premium>main>header .page-heading{display:none!important}
#app.csp-dashboard-premium>main>header .header-actions{
  display:flex!important;justify-content:flex-end!important;align-items:center!important;
  flex-wrap:wrap!important;gap:9px!important;margin:0!important;max-width:none!important;
}
#app.csp-dashboard-premium>main>header .header-actions>button,
#app.csp-dashboard-premium>main>header .header-actions>select{
  min-height:38px!important;min-width:0!important;width:auto!important;flex:0 1 auto!important;
  padding:8px 12px!important;border-radius:30px!important;
  color:#f5fbff!important;background:rgba(10,91,157,.22)!important;
  border:1px solid rgba(73,191,249,.4)!important;font-size:12px!important;
  box-shadow:none!important;
}
#app.csp-dashboard-premium>main>header .header-actions>select{
  background:#113e6b!important;color:#fff!important;
}
#app.csp-dashboard-premium #cspRealVersionPanel{
  margin:0 8px 0 0!important;display:flex!important;flex-wrap:wrap!important;gap:5px!important;
}
#app.csp-dashboard-premium #cspRealVersionPanel span{
  font-size:10px!important;min-height:26px!important;padding:4px 8px!important;
  color:#d2e9fb!important;border:1px solid rgba(105,174,225,.25)!important;
  background:rgba(5,24,49,.50)!important;border-radius:8px!important
}
#app.csp-dashboard-premium .csp-v4-reference{
  display:grid;grid-template-columns:minmax(0,2.3fr) minmax(270px,1fr);
  gap:15px;align-items:stretch;margin:0 0 18px;
  color:#0d2343;
}
#app.csp-dashboard-premium .csp-v4-main-col,
#app.csp-dashboard-premium .csp-v4-side-col{
  min-width:0;display:flex;flex-direction:column;gap:13px;
}
#app.csp-dashboard-premium .csp-v4-welcome{
  min-height:235px;position:relative;overflow:hidden;isolation:isolate;
  display:flex;align-items:flex-end;padding:25px 22px;
  background:linear-gradient(90deg,rgba(1,14,35,.91),rgba(3,28,55,.62) 47%,rgba(3,24,45,.10)),linear-gradient(140deg,#071933,#135084 80%);
  border:1px solid rgba(106,199,255,.34);border-radius:21px;
  box-shadow:0 15px 26px rgba(0,15,39,.22);color:#fff;
}
#app.csp-dashboard-premium .csp-v4-skyline{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(180deg,rgba(13,43,86,0) 50%,rgba(2,12,32,.5) 100%),
    radial-gradient(ellipse at 72% 91%,rgba(255,211,123,.4),transparent 35%),
    linear-gradient(170deg,#102342 0%,#a35476 58%,#1b416d 100%);
}
#app.csp-dashboard-premium .csp-v4-skyline:after{
  content:"";position:absolute;inset:auto 0 0;height:30px;
  background:repeating-linear-gradient(90deg,rgba(221,188,120,.18) 0 9px,rgba(13,94,160,.39) 9px 22px);
}
#app.csp-dashboard-premium .csp-v4-tower{
  position:absolute;bottom:18px;width:125px;height:180px;
  border:3px solid rgba(129,203,247,.55);border-radius:60px 60px 10px 10px;
  background:
   repeating-linear-gradient(90deg,transparent 0 18px,rgba(192,222,245,.28) 19px 20px),
   repeating-linear-gradient(0deg,rgba(255,192,103,.34) 0 9px,rgba(3,26,53,.32) 10px 13px),
   linear-gradient(90deg,#092947,#1b6383,#052138);
  box-shadow:inset 11px 0 25px rgba(0,0,0,.42),0 0 30px rgba(27,153,255,.3);
}
#app.csp-dashboard-premium .csp-v4-tower.a{right:33%;height:186px;bottom:20px}
#app.csp-dashboard-premium .csp-v4-tower.b{right:15%;height:137px;bottom:18px;width:109px}
#app.csp-dashboard-premium .csp-v4-hall{
  position:absolute;right:0;bottom:18px;width:55%;height:78px;
  background:repeating-linear-gradient(90deg,rgba(153,220,244,.25) 0 8px,rgba(4,32,70,.34) 10px 20px),linear-gradient(#cca66c,#164568);
  border:2px solid rgba(221,196,151,.6);border-radius:80% 20% 5px 5px;
}
#app.csp-dashboard-premium .csp-v4-sign{
  position:absolute;right:3%;top:9%;display:flex;flex-direction:column;
  align-items:center;justify-content:center;width:76px;height:136px;
  font-size:80px;line-height:.93;font-weight:950;color:#f9dfab;
  text-shadow:0 0 20px #ffbc7e;letter-spacing:-.07em;
  background:#101c36;border:1px solid rgba(255,225,166,.24);
  box-shadow:0 0 25px rgba(16,26,41,.6);
}
#app.csp-dashboard-premium .csp-v4-sign small{
  font-size:8px;letter-spacing:.14em;font-weight:900;margin-top:10px;
}
#app.csp-dashboard-premium .csp-v4-welcome-copy{position:relative;z-index:2;max-width:74%;text-shadow:0 2px 6px #021324}
#app.csp-dashboard-premium .csp-v4-overline{font-size:10px;letter-spacing:.17em;font-weight:900;color:#bdeafd}
#app.csp-dashboard-premium .csp-v4-welcome h2{
  color:#fff!important;font-size:clamp(26px,2.9vw,45px)!important;line-height:1.11!important;
  margin:11px 0 12px!important;font-weight:900;letter-spacing:-.035em;
}
#app.csp-dashboard-premium .csp-v4-welcome h2 span{display:block;color:#33d1ff}
#app.csp-dashboard-premium .csp-v4-welcome p{margin:0 0 7px;font-size:15px}
#app.csp-dashboard-premium .csp-v4-welcome p strong{color:#ffd268}
#app.csp-dashboard-premium .csp-v4-date{color:#c6e0fb;font-size:11px}
#app.csp-dashboard-premium .csp-v4-numbers{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px;
}
#app.csp-dashboard-premium .csp-v4-numbers>button,
#app.csp-dashboard-premium .csp-v4-numbers>div{
  position:relative;min-width:0;min-height:94px;display:grid;grid-template-columns:42px 1fr;
  grid-template-rows:44px 20px;align-items:center;padding:12px 10px;gap:1px 7px;
  background:linear-gradient(155deg,#fff,#eff7ff)!important;border:1px solid #d2e9ff!important;
  border-radius:16px!important;color:#102144!important;text-align:left!important;
  box-shadow:0 8px 20px rgba(0,14,39,.19)!important;transform:none!important;
}
#app.csp-dashboard-premium .csp-v4-numbers>button:focus-visible{outline:3px solid #27b6ff}
#app.csp-dashboard-premium .csp-v4-numbers span{
  grid-row:1/-1;grid-column:1;display:grid;place-items:center;
  border-radius:12px;width:39px;height:39px;font-size:23px;font-weight:800;
  color:#0871e2;background:#e0f1ff;
}
#app.csp-dashboard-premium .csp-v4-numbers>button:nth-child(2) span{color:#00a884;background:#d9fff1}
#app.csp-dashboard-premium .csp-v4-numbers>button:nth-child(3) span{color:#9125e8;background:#f2e5ff}
#app.csp-dashboard-premium .csp-v4-numbers>div:last-child span{color:#f28c23;background:#fff0d9}
#app.csp-dashboard-premium .csp-v4-numbers b{font-size:26px;line-height:1.05}
#app.csp-dashboard-premium .csp-v4-numbers small{font-size:10px;color:#52627b;font-weight:650}
#app.csp-dashboard-premium .csp-v4-functions{
  border:1px solid #c4e4ff;background:linear-gradient(145deg,#f7fbff,#e5f2ff)!important;
  border-radius:20px;padding:15px 14px;box-shadow:0 9px 21px rgba(0,17,38,.2);
}
#app.csp-dashboard-premium .csp-v4-functions h2{
  color:#0c2450!important;margin:0 0 13px!important;font-size:20px!important;font-weight:900;
}
#app.csp-dashboard-premium .csp-v4-functions h2 span{color:#0876e6}
#app.csp-dashboard-premium .csp-v4-tiles{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;
}
#app.csp-dashboard-premium .csp-v4-tile{
  position:relative;display:flex;flex-direction:column;gap:7px;align-items:center;justify-content:center;
  min-height:101px;min-width:0;padding:13px 5px;border-radius:13px!important;
  border:1px solid rgba(255,255,255,.7)!important;font-weight:800;font-size:12px;line-height:1.26;
  background:linear-gradient(140deg,#c5eaff,#eaf6ff)!important;color:#081d3d!important;
  box-shadow:none!important;text-align:center!important;
}
#app.csp-dashboard-premium .csp-v4-tile:nth-child(4n+2){background:linear-gradient(145deg,#b8f6e8,#e0fff5)!important}
#app.csp-dashboard-premium .csp-v4-tile:nth-child(4n+3){background:linear-gradient(145deg,#e1d5ff,#f2ecff)!important}
#app.csp-dashboard-premium .csp-v4-tile:nth-child(4n+4){background:linear-gradient(145deg,#ffe4c4,#fff1df)!important}
#app.csp-dashboard-premium .csp-v4-tile:nth-child(9){background:linear-gradient(145deg,#ffe9ad,#fff8e4)!important}
#app.csp-dashboard-premium .csp-v4-tile-icon{font-size:29px;line-height:1.1;color:#057be6}
#app.csp-dashboard-premium .csp-v4-chevron{position:absolute;right:6px;top:4px;font-size:21px;color:#5f8ba9}
#app.csp-dashboard-premium .csp-v4-values{
  display:flex;flex-wrap:wrap;justify-content:space-around;gap:6px;
  background:linear-gradient(120deg,#06172d,#033365);border-radius:17px;
  border:1px solid #14518a;padding:21px 12px;color:#fff;
  box-shadow:inset 0 1px rgba(255,255,255,.12);
  font-size:12px;font-weight:750;
}
#app.csp-dashboard-premium .csp-v4-values span:first-child::first-letter{color:#ffd15c}
#app.csp-dashboard-premium .csp-v4-radar,
#app.csp-dashboard-premium .csp-v4-forecast,
#app.csp-dashboard-premium .csp-v4-current{
  overflow:hidden;border:1px solid #1c6ba2;border-radius:19px;
  background:linear-gradient(150deg,#05182f,#09366a)!important;color:#fff!important;
  box-shadow:0 10px 22px rgba(0,14,38,.17);
}
#app.csp-dashboard-premium .csp-v4-rail-head{
  padding:13px 16px 10px;display:flex;justify-content:space-between;gap:8px;align-items:center;
}
#app.csp-dashboard-premium .csp-v4-rail-head h2{font-size:17px!important;line-height:1.2!important;color:inherit!important;margin:0!important}
#app.csp-dashboard-premium .csp-v4-rail-head>span,
#app.csp-dashboard-premium .csp-v4-rail-head>b{
  background:#1077df;color:#fff;padding:4px 7px;border-radius:999px;font-size:10px
}
#app.csp-dashboard-premium .csp-v4-radar-body{display:flex;justify-content:center;align-items:center;gap:12px;padding:5px 14px 12px}
#app.csp-dashboard-premium .csp-v4-radar-disc{
  width:min(178px,62%);aspect-ratio:1;flex:0 1 178px;position:relative;border-radius:50%;
  border:1px solid #67dafa;box-shadow:0 0 21px rgba(0,199,246,.22);
  background:
   linear-gradient(90deg,transparent calc(50% - .5px),#8ad5f8 50%,transparent calc(50% + .5px)),
   linear-gradient(0deg,transparent calc(50% - .5px),#8ad5f8 50%,transparent calc(50% + .5px)),
   repeating-radial-gradient(circle,transparent 0 20px,rgba(82,209,255,.7) 21px,transparent 22px 37px),
   conic-gradient(from 45deg,rgba(20,199,151,.72),rgba(10,170,240,.55),rgba(22,117,218,.25),rgba(20,199,151,.72));
}
#app.csp-dashboard-premium .csp-v4-radar-disc i{
  position:absolute;left:50%;top:50%;width:4px;height:4px;border-radius:50%;background:#eeff70;box-shadow:0 0 11px #e3f76a
}
#app.csp-dashboard-premium .csp-v4-radar-legend{display:grid;gap:12px}
#app.csp-dashboard-premium .csp-v4-radar-legend small{font-size:11px;color:#c8e9ff}
#app.csp-dashboard-premium .csp-v4-rail-link{
  display:block;margin:0 12px 12px auto;padding:9px 13px!important;
  font-size:12px!important;color:#fff!important;background:#0356a1!important;
  border:1px solid #57bdf8!important;border-radius:22px!important;
}
#app.csp-dashboard-premium .csp-v4-forecast-inner{
  margin:0 10px 11px;padding:13px;border-radius:13px;background:linear-gradient(155deg,#e6f4ff,#fff);
  color:#164063;
}
#app.csp-dashboard-premium .csp-v4-forecast-inner p{font-size:12px;line-height:1.5;margin:8px 0;color:#516989}
#app.csp-dashboard-premium .csp-v4-forecast-inner button{
  border-radius:12px;background:#1473c6!important;color:#fff!important;
  padding:9px 13px!important;font-size:12px!important;
}
#app.csp-dashboard-premium .csp-v4-current{background:#fff!important;color:#12314d!important;border:1px solid #d9e7f5!important}
#app.csp-dashboard-premium .csp-v4-current .csp-v4-rail-head{border-bottom:1px solid #e3ebf5}
#app.csp-dashboard-premium .csp-v4-task{
  display:flex;width:100%;gap:10px;align-items:center;padding:12px 13px!important;
  background:#fff!important;border:0!important;border-bottom:1px solid #e2eaf4!important;
  box-shadow:none!important;text-align:left!important;color:#10304d!important;
}
#app.csp-dashboard-premium .csp-v4-task-dot{width:28px;height:28px;border-radius:9px;background:#0dbd85;flex:0 0 28px}
#app.csp-dashboard-premium .csp-v4-task:nth-child(3) .csp-v4-task-dot{background:#1976e2}
#app.csp-dashboard-premium .csp-v4-task:nth-child(4) .csp-v4-task-dot{background:#f1a91d}
#app.csp-dashboard-premium .csp-v4-task:nth-child(5) .csp-v4-task-dot{background:#e65365}
#app.csp-dashboard-premium .csp-v4-task-copy{flex:1;min-width:0;display:grid;gap:3px}
#app.csp-dashboard-premium .csp-v4-task b{overflow-wrap:anywhere;font-size:12px;font-weight:800}
#app.csp-dashboard-premium .csp-v4-task small{font-size:10px;color:#718297}
#app.csp-dashboard-premium .csp-v4-empty{padding:14px;color:#6c7a8c;font-size:12px}
#app.csp-dashboard-premium .csp-dash-toolbar,
#app.csp-dashboard-premium .csp-dashboard-metrics,
#app.csp-dashboard-premium .csp-dashboard-operations{
  border-radius:19px;background:rgba(248,252,255,.98)!important;
  padding:14px!important;color:#0b2b52!important;margin-top:13px!important;
}
#app.csp-dashboard-premium .csp-dashboard-metrics{padding:12px!important}
#app.csp-dashboard-premium #cs268-qas-dashboard{
  background:linear-gradient(130deg,#103e64,#092c52)!important;border:1px solid #58c18e!important;
  border-left:4px solid #4bda9b!important;color:#fff!important;border-radius:19px!important;
  box-shadow:0 5px 22px rgba(0,10,30,.2)!important;
}
#app.csp-dashboard-premium #cs268-qas-dashboard h2{color:#fff!important}
#app.csp-dashboard-premium #cs268-qas-dashboard h2 b{color:#a9ffcb!important}
#app.csp-dashboard-premium #cs268-qas-dashboard small,
#app.csp-dashboard-premium #cs268-qas-dashboard p{color:#d5eeff!important}
@media(max-width:1150px){
 #app.csp-dashboard-premium .csp-v4-reference{grid-template-columns:minmax(0,1fr)}
 #app.csp-dashboard-premium .csp-v4-side-col{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
 #app.csp-dashboard-premium .csp-v4-current{grid-column:1/-1}
}
@media(max-width:800px){
 #app.csp-dashboard-premium>aside{
   height:auto!important;padding:10px!important;gap:10px!important;
   position:sticky!important;top:0!important;z-index:12!important;
   display:flex!important;align-items:center!important;flex-wrap:nowrap!important;
 }
 #app.csp-dashboard-premium>aside .brand{min-height:49px!important;padding:4px!important;margin:0!important;flex:0 0 45px!important}
 #app.csp-dashboard-premium>aside .brand .logo{width:39px!important;height:39px!important}
 #app.csp-dashboard-premium>aside nav{
   display:flex!important;flex-direction:row!important;align-items:center!important;min-width:0!important;
   overflow-x:auto!important;overflow-y:hidden!important;max-height:52px!important;
   padding:3px!important;flex:1 1 auto!important;scrollbar-width:none!important;
 }
 #app.csp-dashboard-premium>aside nav button{
   width:auto!important;white-space:nowrap!important;min-height:41px!important;
   flex:0 0 auto!important;padding:9px 12px!important;font-size:12px!important;
 }
 #app.csp-dashboard-premium>main{margin-left:0!important;padding:11px 10px 105px!important}
 #app.csp-dashboard-premium>main>header{
   min-height:0!important;padding:8px 10px!important;border-radius:17px!important;
   margin-bottom:11px!important;justify-content:stretch!important;
 }
 #app.csp-dashboard-premium>main>header .header-actions{width:100%!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
 #app.csp-dashboard-premium>main>header .header-actions>button,
 #app.csp-dashboard-premium>main>header .header-actions>select{width:100%!important;min-height:42px!important}
 #app.csp-dashboard-premium .csp-v4-reference{gap:11px}
 #app.csp-dashboard-premium .csp-v4-numbers{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app.csp-dashboard-premium .csp-v4-tiles{grid-template-columns:repeat(3,minmax(0,1fr))}
 #app.csp-dashboard-premium .csp-v4-welcome{min-height:220px;padding:18px}
 #app.csp-dashboard-premium .csp-v4-welcome-copy{max-width:78%}
}
@media(max-width:490px){
 #app.csp-dashboard-premium .csp-v4-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
 #app.csp-dashboard-premium .csp-v4-side-col{display:flex;flex-direction:column}
 #app.csp-dashboard-premium .csp-v4-welcome-copy{max-width:90%}
 #app.csp-dashboard-premium .csp-v4-welcome h2{font-size:27px!important}
 #app.csp-dashboard-premium .csp-v4-sign{width:55px;height:100px;font-size:57px;opacity:.78}
 #app.csp-dashboard-premium .csp-v4-tower.a{right:20%}
 #app.csp-dashboard-premium .csp-v4-radar-body{justify-content:space-around}
 #app.csp-dashboard-premium .csp-v4-values span{width:100%;text-align:center}
}
@media(prefers-reduced-motion:reduce){
 #app.csp-dashboard-premium .csp-v4-tile,
 #app.csp-dashboard-premium .csp-v4-numbers button{transition:none!important;animation:none!important}
}
