/* Fișa Service v1.4 – teme (skins), plăcuțe pe țări, ceas, galeria de teme.
   Tema activă e pusă ca data-skin pe <html> de prefs.js. Efectele de fundal stau în #skinFx (sub interfață). */

/* ================= COMUN ================= */
:root{--accentB:#ffb347;--on-accent:#1a0e02;--fx-o:1}
.brand-mark{background:linear-gradient(135deg,var(--accent),var(--accentB));color:var(--on-accent)}
.btn.primary{background:linear-gradient(120deg,var(--accent),var(--accentB));color:var(--on-accent)}
.icon-btn:hover{color:var(--on-accent)}
.lg-check input{accent-color:var(--accent)}

#skinFx{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;opacity:var(--fx-o);display:none}
#skinFx i{position:absolute;display:block}
.app{position:relative;z-index:1}
.titlebar{background:var(--bg);transition:background .4s,color .4s}
html[data-skin]:not([data-skin="atelier"]) #skinFx{display:block}

/* tranziția circulară la schimbarea temei */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}

@media (prefers-reduced-motion:reduce){#skinFx *,#skinFx{animation:none!important}}

/* ================= CEAS ================= */
.tb-clock{display:flex;align-items:center;gap:10px;margin-right:6px;font:600 12px var(--f-mono);letter-spacing:.06em;color:var(--mute);white-space:nowrap;text-transform:none}
.tb-clock .tbc-d{text-transform:capitalize}
.tb-clock .tbc-t{color:var(--fg);font-size:13px;padding:2px 8px;border-radius:6px;background:color-mix(in srgb,var(--accent) 12%,transparent);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.tb-clock .tbc-t i{font-style:normal;animation:tbBlink 1s steps(1) infinite}
@keyframes tbBlink{50%{opacity:.2}}
@media (max-width:1100px){.tb-clock .tbc-d{display:none}}

/* ================= SETĂRI: TEME + ȚARĂ ================= */
.set-top{grid-column:1/-1;min-width:0}
.skins-panel,.country-panel{display:flex;flex-direction:column;gap:14px}
.skins{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px;perspective:900px}
.skin-card{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:column;gap:8px;padding:10px 10px 12px;border-radius:14px;border:1px solid var(--line);background:var(--panel2);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateZ(0);transform-style:preserve-3d;transition:transform .25s ease,border-color .25s,box-shadow .3s;position:relative}
.skin-card:hover{border-color:var(--s2);box-shadow:0 18px 34px -16px var(--s2),0 0 0 1px var(--s2)}
.skin-card:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.skin-card.on{border-color:var(--s2);box-shadow:0 0 0 2px var(--s2),0 14px 30px -14px var(--s2)}
.skin-card small{color:var(--mute);font-size:12px;line-height:1.4}
.skin-t{display:flex;align-items:center;justify-content:space-between;gap:8px}
.skin-t b{font:600 15px var(--f-display);color:var(--fg)}
.skin-t .chip{font-size:10px}
/* mini-previzualizare */
.sp{position:relative;display:block;aspect-ratio:16/10;border-radius:10px;overflow:hidden;background:var(--s0);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transform:translateZ(24px)}
.sp i{position:absolute;display:block}
.sp-fx{inset:0}
.sp-side{left:0;top:0;bottom:0;width:22%;background:var(--s1);box-shadow:1px 0 0 rgba(255,255,255,.06)}
.sp-side::after{content:"";position:absolute;left:14%;top:14%;width:34%;aspect-ratio:1;border-radius:4px;background:linear-gradient(135deg,var(--s2),var(--s3))}
.sp-top{left:28%;top:10%;width:40%;height:7%;border-radius:3px;background:var(--s2);opacity:.85}
.sp-k{top:26%;width:20%;height:24%;border-radius:5px;background:var(--s1);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.sp-k:nth-of-type(4){left:28%}.sp-k:nth-of-type(5){left:51%}.sp-k:nth-of-type(6){left:74%}
.sp-k::after{content:"";position:absolute;left:12%;bottom:18%;width:55%;height:14%;border-radius:2px;background:var(--s3);opacity:.7}
.sp-btn{right:6%;bottom:9%;width:26%;height:12%;border-radius:4px;background:linear-gradient(90deg,var(--s2),var(--s3));transition:transform .3s}
.skin-card:hover .sp-btn{transform:scale(1.08)}
/* efectele în miniatură */
.sp-neon .sp-fx{background:linear-gradient(transparent 55%,rgba(255,47,208,.0) 55%),
  repeating-linear-gradient(90deg,rgba(255,47,208,.55) 0 1px,transparent 1px 14px),repeating-linear-gradient(0deg,rgba(45,226,255,.45) 0 1px,transparent 1px 10px);
  -webkit-mask:linear-gradient(transparent 52%,#000 100%);mask:linear-gradient(transparent 52%,#000 100%);animation:spNeon 1.2s linear infinite}
@keyframes spNeon{to{background-position:0 0,0 0,0 10px}}
.sp-neon::before{content:"";position:absolute;left:50%;top:22%;width:34%;aspect-ratio:1;translate:-50% 0;border-radius:50%;background:linear-gradient(#ffd23f,#ff2fd0);
  -webkit-mask:repeating-linear-gradient(#000 0 4px,transparent 4px 6px);mask:repeating-linear-gradient(#000 0 4px,transparent 4px 6px);opacity:.75}
.sp-carbon .sp-fx{background:linear-gradient(27deg,#151515 3px,transparent 3px) 0 3px,linear-gradient(207deg,#151515 3px,transparent 3px) 6px 0,linear-gradient(27deg,#252525 3px,transparent 3px) 0 6px,linear-gradient(207deg,#252525 3px,transparent 3px) 6px 3px,linear-gradient(90deg,#1b1b1b 6px,transparent 6px),linear-gradient(#1d1d1d 25%,#1a1a1a 25% 50%,transparent 50% 75%,#262626 75%);background-color:#131313;background-size:12px 12px}
.sp-carbon .sp-fx::after{content:"";position:absolute;left:0;right:0;bottom:0;height:5%;background:#e10600;box-shadow:0 0 14px 2px #e10600}
.sp-glacier .sp-fx{background:radial-gradient(closest-side,rgba(0,184,163,.55),transparent) 10% 20%/70% 90% no-repeat,radial-gradient(closest-side,rgba(10,132,255,.5),transparent) 90% 80%/80% 100% no-repeat,radial-gradient(closest-side,rgba(168,120,255,.45),transparent) 60% 0/60% 70% no-repeat;animation:spAur 6s ease-in-out infinite alternate}
@keyframes spAur{to{background-position:40% 60%,40% 10%,10% 90%}}
.sp-glacier .sp-side,.sp-glacier .sp-k{background:rgba(255,255,255,.65);box-shadow:inset 0 0 0 1px rgba(255,255,255,.9)}
.sp-green .sp-fx{background:radial-gradient(circle at 70% 30%,rgba(201,162,39,.18),transparent 60%),repeating-linear-gradient(135deg,transparent 0 9px,rgba(201,162,39,.12) 9px 10px)}
.sp-green .sp-k{box-shadow:inset 0 0 0 1px rgba(201,162,39,.45)}
.sp-scope .sp-fx{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='40'%3E%3Cpath d='M0 20 Q10 2 20 20 T40 20 T60 20 T80 20' fill='none' stroke='%23ffb000' stroke-width='1.6'/%3E%3C/svg%3E") 0 68%/50% 40% repeat-x,
  repeating-linear-gradient(90deg,rgba(255,176,0,.16) 0 1px,transparent 1px 12.5%),repeating-linear-gradient(0deg,rgba(255,176,0,.16) 0 1px,transparent 1px 12.5%);filter:drop-shadow(0 0 3px #ffb000);animation:spScope 1.6s linear infinite}
@keyframes spScope{to{background-position:-50% 68%,0 0,0 0}}
.sp-scope::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.35) 2px 3px)}

.country-row{display:grid;grid-template-columns:minmax(200px,1fr) auto auto;gap:22px;align-items:end}
.country-prev,.country-cur{display:flex;flex-direction:column;gap:8px}
.country-prev .plate{font-size:19px;animation:plateIn .5s cubic-bezier(.2,.9,.3,1.2)}
@keyframes plateIn{from{transform:rotateX(80deg);opacity:0}}
.country-cur b{font-size:22px;color:var(--accent)}
@media (max-width:760px){.country-row{grid-template-columns:1fr}}

/* ================= PLĂCUȚE PE ȚĂRI ================= */
.plate{background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,0) 55%,rgba(0,0,0,.08) 100%),var(--pbg,#fff);border-color:var(--pbd,#0d0d0d);color:var(--pfg,#0b0b0b)}
.plate .pn{color:var(--pfg,#0b0b0b)}
.plate .eu,.plate .rb,.plate .sh{flex:none}
.plate .eu.fl{justify-content:space-between}
.plate .eu.fl svg{width:1em;height:.68em;border-radius:1px;margin-top:.12em}
.plate .rb{display:grid;place-items:center;width:1.25em;font:700 .55em/1 Arial,Helvetica,sans-serif;padding:0 .15em;width:2.3em}
.plate .rb:empty{width:1.25em;padding:0}
.plate .sh{display:grid;place-items:center;width:1.2em}
.plate .sh svg{width:.78em;height:.78em}
.plate .stk{display:inline-flex;flex-direction:column;justify-content:center;gap:.08em;margin:0 .22em;vertical-align:middle;font-style:normal}
.plate .stk b{display:block;width:.5em;height:.5em;border-radius:50%}
.plate .stk b:first-child{background:conic-gradient(#e94f8a 0 25%,#4a9bd9 0 50%,#f2c230 0 75%,#56b447 0)}
.plate .stk b:last-child{background:radial-gradient(circle,#d9b23b 0 30%,#f4f4f4 31% 60%,#9aa0a6 61%)}
.plate .pn{display:flex;align-items:center}
.plate.pl-stripes .pn{border-top:.17em solid #c8102e;border-bottom:.17em solid #c8102e}
.plate.pl-redrim{box-shadow:inset 0 0 0 .09em #fff,inset 0 0 0 .17em #c8102e,0 .12em .35em rgba(0,0,0,.45)}
.plate.pl-noband .pn{padding-left:.3em}

/* ================= TEME ================= */

/* ---------- 1. NIGHT DRIVE (synthwave) ---------- */
html[data-skin="neon"]{
  --bg:#0b0820;--panel:rgba(22,16,52,.78);--panel2:#1e1745;--line:#3a2b6e;--fg:#f6ecff;--mute:#a99bd0;
  --accent:#ff2fd0;--accent2:#2de2ff;--accentB:#8f5bff;--on-accent:#fff;--ok:#3dffb0;--warn:#ffd23f;--bad:#ff4d6d;
  --glow:rgba(255,47,208,.5);--shadow:0 18px 44px -16px rgba(255,47,208,.35);color-scheme:dark}
html[data-skin="neon"] body{background:radial-gradient(120% 70% at 50% 100%,#2a0b4a 0%,#0b0820 60%) fixed,#0b0820}
html[data-skin="neon"] #skinFx .sky{inset:0;background:radial-gradient(60% 40% at 50% 64%,rgba(255,47,208,.28),transparent 70%),linear-gradient(#0b0820 0%,#1a0b3d 45%,#3b0f5c 64%,#0b0820 64.2%)}
html[data-skin="neon"] #skinFx .sun{left:50%;top:64%;width:min(38vw,460px);aspect-ratio:1;translate:-50% -100%;border-radius:50%;
  background:linear-gradient(#ffe45c 10%,#ff8a3d 45%,#ff2fd0 85%);box-shadow:0 0 80px 10px rgba(255,47,208,.45);
  -webkit-mask:linear-gradient(#000 45%,transparent 45% 49%,#000 49% 58%,transparent 58% 63%,#000 63% 70%,transparent 70% 76%,#000 76% 82%,transparent 82% 89%,#000 89%);
  mask:linear-gradient(#000 45%,transparent 45% 49%,#000 49% 58%,transparent 58% 63%,#000 63% 70%,transparent 70% 76%,#000 76% 82%,transparent 82% 89%,#000 89%);
  opacity:.8;animation:neonSun 6s ease-in-out infinite alternate}
@keyframes neonSun{to{box-shadow:0 0 130px 26px rgba(255,47,208,.6);filter:saturate(1.3)}}
html[data-skin="neon"] #skinFx .floor{left:-60%;right:-60%;top:64%;bottom:0;perspective:260px;perspective-origin:50% 0;overflow:hidden;
  -webkit-mask:linear-gradient(transparent,#000 22%);mask:linear-gradient(transparent,#000 22%)}
html[data-skin="neon"] #skinFx .floor::before{content:"";position:absolute;left:0;right:0;top:0;height:200%;transform-origin:50% 0;transform:rotateX(62deg);
  background:repeating-linear-gradient(90deg,rgba(255,47,208,.75) 0 2px,transparent 2px 70px),repeating-linear-gradient(0deg,rgba(45,226,255,.7) 0 2px,transparent 2px 70px);
  animation:neonRun 1.1s linear infinite;will-change:transform}
@keyframes neonRun{from{transform:rotateX(62deg) translateY(-70px)}to{transform:rotateX(62deg) translateY(0)}}
html[data-skin="neon"] #skinFx .stars{inset:0 0 40% 0;background:radial-gradient(1px 1px at 12% 18%,#fff,transparent),radial-gradient(1px 1px at 28% 8%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 26%,#ffd6ff,transparent),radial-gradient(1px 1px at 63% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 78% 30%,#c8f6ff,transparent),radial-gradient(1px 1px at 90% 6%,#fff,transparent),radial-gradient(1px 1px at 5% 40%,#fff,transparent),radial-gradient(1px 1px at 55% 40%,#fff,transparent);animation:twinkle 3.5s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.35}to{opacity:1}}
html[data-skin="neon"] #skinFx{--fx-o:.62}
html[data-skin="neon"] .side{background:rgba(14,9,36,.82);backdrop-filter:blur(14px);border-right-color:rgba(255,47,208,.35);box-shadow:1px 0 24px -6px rgba(255,47,208,.45)}
html[data-skin="neon"] .panel,html[data-skin="neon"] .kpi,html[data-skin="neon"] .car{backdrop-filter:blur(12px) saturate(1.3);border-color:rgba(143,91,255,.35)}
html[data-skin="neon"] .kpi:hover,html[data-skin="neon"] .car:hover{border-color:var(--accent2);box-shadow:0 0 0 1px var(--accent2),0 0 28px -4px rgba(45,226,255,.55),0 0 60px -20px var(--accent)}
html[data-skin="neon"] .topbar h2{background:linear-gradient(90deg,#ffe45c,#ff2fd0 45%,#2de2ff);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 12px rgba(255,47,208,.55));background-size:200% 100%;animation:neonTitle 6s ease-in-out infinite alternate}
@keyframes neonTitle{to{background-position:100% 0}}
html[data-skin="neon"] .brand h1{text-shadow:0 0 10px rgba(255,47,208,.8),0 0 22px rgba(45,226,255,.4)}
html[data-skin="neon"] .nav button.on{background:linear-gradient(90deg,rgba(255,47,208,.28),transparent);text-shadow:0 0 8px rgba(255,47,208,.8)}
html[data-skin="neon"] .nav button.on::before{box-shadow:0 0 12px 2px var(--accent)}
html[data-skin="neon"] .btn.primary{box-shadow:0 0 18px -2px rgba(255,47,208,.6)}
html[data-skin="neon"] .kpi .val{text-shadow:0 0 14px rgba(45,226,255,.55)}
html[data-skin="neon"] .modal{background:#140f33;box-shadow:0 0 0 1px rgba(255,47,208,.4),0 0 60px -10px rgba(255,47,208,.5)}
html[data-skin="neon"] .modal-h,html[data-skin="neon"] .modal-f{background:#140f33}
html[data-skin="neon"] .titlebar{border-bottom-color:rgba(255,47,208,.35)}

/* ---------- 2. CARBON RACING ---------- */
html[data-skin="carbon"]{
  --bg:#0b0b0d;--panel:rgba(20,20,23,.92);--panel2:#1c1c20;--line:#2e2e35;--fg:#f2f2f4;--mute:#90929b;
  --accent:#e10600;--accent2:#c9ccd1;--accentB:#ff4d2e;--on-accent:#fff;--ok:#2fd27a;--warn:#ffc400;--bad:#ff3b3b;
  --glow:rgba(225,6,0,.5);--shadow:0 20px 44px -18px rgba(0,0,0,.9);color-scheme:dark}
html[data-skin="carbon"] #skinFx .weave{inset:0;background:linear-gradient(27deg,#141414 5px,transparent 5px) 0 5px,linear-gradient(207deg,#141414 5px,transparent 5px) 10px 0,linear-gradient(27deg,#232323 5px,transparent 5px) 0 10px,linear-gradient(207deg,#232323 5px,transparent 5px) 10px 5px,linear-gradient(90deg,#1a1a1a 10px,transparent 10px),linear-gradient(#1c1c1c 25%,#181818 25% 50%,transparent 50% 75%,#222 75%);background-color:#121212;background-size:20px 20px}
html[data-skin="carbon"] #skinFx .vig{inset:0;background:radial-gradient(120% 90% at 60% 40%,transparent 30%,rgba(0,0,0,.85))}
html[data-skin="carbon"] #skinFx .sheen{top:-50%;bottom:-50%;width:30vw;left:-40vw;background:linear-gradient(90deg,transparent,rgba(255,255,255,.07) 45%,rgba(255,255,255,.12) 50%,rgba(255,255,255,.07) 55%,transparent);transform:rotate(18deg);animation:carbSheen 7s cubic-bezier(.6,0,.4,1) infinite}
@keyframes carbSheen{0%,25%{translate:0 0}100%{translate:180vw 0}}
html[data-skin="carbon"] #skinFx .speed{left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(225,6,0,.9),transparent);width:40vw;animation:carbSpeed 2.4s linear infinite;opacity:.7}
html[data-skin="carbon"] #skinFx .speed:nth-child(4){top:22%;animation-delay:-.6s}
html[data-skin="carbon"] #skinFx .speed:nth-child(5){top:58%;animation-delay:-1.5s;background:linear-gradient(90deg,transparent,rgba(255,255,255,.6),transparent);animation-duration:3.1s}
html[data-skin="carbon"] #skinFx .speed:nth-child(6){top:83%;animation-delay:-2.1s;animation-duration:1.9s}
@keyframes carbSpeed{from{transform:translateX(110vw)}to{transform:translateX(-50vw)}}
html[data-skin="carbon"] .side{background:linear-gradient(90deg,#0f0f11,#151518);border-right:0;box-shadow:inset -3px 0 0 #e10600,inset -5px 0 0 #0b0b0d,inset -6px 0 0 #fff,6px 0 30px -10px rgba(225,6,0,.6)}
html[data-skin="carbon"] .panel,html[data-skin="carbon"] .kpi,html[data-skin="carbon"] .car{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 1px,transparent 1px 3px),linear-gradient(180deg,#1b1b1f,#141417);border-color:#2a2a30;border-radius:6px 16px 6px 16px}
html[data-skin="carbon"] .kpi::before,html[data-skin="carbon"] .panel::before{content:"";position:absolute;left:0;top:0;height:3px;width:42px;background:#e10600;border-radius:0 0 3px 0;transition:width .45s cubic-bezier(.2,.8,.2,1)}
html[data-skin="carbon"] .panel{position:relative}
html[data-skin="carbon"] .kpi:hover::before,html[data-skin="carbon"] .panel:hover::before{width:100%}
html[data-skin="carbon"] .kpi:hover,html[data-skin="carbon"] .car:hover{border-color:#e10600;box-shadow:0 22px 40px -18px rgba(225,6,0,.7)}
html[data-skin="carbon"] .topbar h2,html[data-skin="carbon"] .brand h1{font-style:italic;text-transform:uppercase;letter-spacing:.06em}
html[data-skin="carbon"] .topbar h2{position:relative;padding-bottom:6px}
html[data-skin="carbon"] .topbar h2::after{content:"";position:absolute;left:0;bottom:0;height:3px;width:64px;background:linear-gradient(90deg,#e10600 0 60%,#fff 60% 75%,#e10600 75%);transform:skewX(-30deg);animation:carbBar .8s cubic-bezier(.2,.8,.2,1) both}
@keyframes carbBar{from{width:0}}
html[data-skin="carbon"] .btn{border-radius:4px 12px 4px 12px}
html[data-skin="carbon"] .btn.primary{background:linear-gradient(120deg,#e10600,#ff4d2e);box-shadow:0 10px 24px -10px rgba(225,6,0,.9)}
html[data-skin="carbon"] .btn.primary::after{background:linear-gradient(120deg,#fff,#c9ccd1)}
html[data-skin="carbon"] .btn.primary:hover{color:#111}
html[data-skin="carbon"] .brand-mark{border-radius:4px 12px 4px 12px;transform:skewX(-8deg)}
html[data-skin="carbon"] .nav button{border-radius:4px 10px 4px 10px}
html[data-skin="carbon"] .nav button.on{background:linear-gradient(90deg,rgba(225,6,0,.3),transparent)}
html[data-skin="carbon"] .modal{background:#141417;border-radius:6px 20px 6px 20px;border-top:3px solid #e10600}
html[data-skin="carbon"] .modal-h,html[data-skin="carbon"] .modal-f{background:#141417}
html[data-skin="carbon"] .titlebar{border-bottom:1px solid #e10600}

/* ---------- 3. GLACIER (luminoasă) ---------- */
html[data-skin="glacier"]{
  --bg:#eaf2f7;--panel:rgba(255,255,255,.62);--panel2:rgba(255,255,255,.78);--line:rgba(18,48,73,.13);--fg:#0f2a3f;--mute:#56718a;
  --accent:#0a84ff;--accent2:#00b8a3;--accentB:#5ac8fa;--on-accent:#fff;--ok:#0f9d6b;--warn:#b77d00;--bad:#e0364c;
  --glow:rgba(10,132,255,.3);--shadow:0 22px 44px -22px rgba(15,42,63,.35);color-scheme:light}
html[data-skin="glacier"] body{background:#eaf2f7}
html[data-skin="glacier"] #skinFx .a1,html[data-skin="glacier"] #skinFx .a2,html[data-skin="glacier"] #skinFx .a3,html[data-skin="glacier"] #skinFx .a4{width:70vw;height:70vw;border-radius:50%;will-change:transform}
html[data-skin="glacier"] #skinFx .a1{left:-15vw;top:-30vw;background:radial-gradient(closest-side,rgba(0,200,180,.42),transparent);animation:aur1 18s ease-in-out infinite alternate}
html[data-skin="glacier"] #skinFx .a2{right:-20vw;top:-10vw;background:radial-gradient(closest-side,rgba(10,132,255,.38),transparent);animation:aur2 22s ease-in-out infinite alternate}
html[data-skin="glacier"] #skinFx .a3{left:20vw;bottom:-40vw;background:radial-gradient(closest-side,rgba(150,110,255,.32),transparent);animation:aur3 26s ease-in-out infinite alternate}
html[data-skin="glacier"] #skinFx .a4{right:-10vw;bottom:-35vw;width:50vw;height:50vw;background:radial-gradient(closest-side,rgba(255,150,200,.25),transparent);animation:aur1 20s ease-in-out infinite alternate-reverse}
@keyframes aur1{to{transform:translate(18vw,14vw) scale(1.2)}}
@keyframes aur2{to{transform:translate(-22vw,18vw) scale(.85)}}
@keyframes aur3{to{transform:translate(-14vw,-20vw) scale(1.15)}}
html[data-skin="glacier"] #skinFx .frost{inset:0;background:radial-gradient(1.5px 1.5px at 20% 30%,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 70% 20%,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 40% 70%,rgba(255,255,255,.8),transparent),radial-gradient(1.5px 1.5px at 85% 60%,rgba(255,255,255,.9),transparent),radial-gradient(2px 2px at 10% 85%,rgba(255,255,255,.8),transparent);background-size:340px 340px;animation:snow 14s linear infinite}
@keyframes snow{to{background-position:60px 340px}}
html[data-skin="glacier"] .side{background:rgba(255,255,255,.5);backdrop-filter:blur(22px) saturate(1.6);border-right-color:rgba(255,255,255,.8)}
html[data-skin="glacier"] .panel,html[data-skin="glacier"] .kpi,html[data-skin="glacier"] .car{backdrop-filter:blur(18px) saturate(1.5);border-color:rgba(255,255,255,.85);box-shadow:0 10px 30px -18px rgba(15,42,63,.35),inset 0 1px 0 rgba(255,255,255,.9)}
html[data-skin="glacier"] .kpi:hover,html[data-skin="glacier"] .car:hover{border-color:#fff;box-shadow:0 26px 50px -22px rgba(10,132,255,.45),inset 0 1px 0 #fff}
html[data-skin="glacier"] .field input,html[data-skin="glacier"] .field select,html[data-skin="glacier"] .field textarea,html[data-skin="glacier"] .search input{background:rgba(255,255,255,.75);border-color:rgba(18,48,73,.14)}
html[data-skin="glacier"] .topbar h2{background:linear-gradient(90deg,#0f2a3f,#0a84ff 60%,#00b8a3);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-skin="glacier"] .btn:hover{color:#fff}
html[data-skin="glacier"] .nav button.on{background:rgba(255,255,255,.75);box-shadow:0 6px 18px -10px rgba(10,132,255,.5)}
html[data-skin="glacier"] .modal{background:rgba(250,253,255,.92);backdrop-filter:blur(24px)}
html[data-skin="glacier"] .modal-h,html[data-skin="glacier"] .modal-f{background:rgba(250,253,255,.95)}
html[data-skin="glacier"] .lang-list{background:rgba(255,255,255,.95)}
html[data-skin="glacier"] .titlebar{border-bottom-color:rgba(18,48,73,.1)}
html[data-skin="glacier"] .toast{background:rgba(255,255,255,.92);backdrop-filter:blur(16px)}
html[data-skin="glacier"] .make-chip.bmw{background:rgba(255,255,255,.7)}

/* ---------- 4. RACING GREEN ---------- */
html[data-skin="green"]{
  --bg:#0a1712;--panel:rgba(16,35,27,.94);--panel2:#163026;--line:#25473a;--fg:#f2ead2;--mute:#a3b6aa;
  --accent:#c9a227;--accent2:#7fb89a;--accentB:#f0d67a;--on-accent:#1c1503;--ok:#6fd39a;--warn:#e7b84a;--bad:#e0614f;
  --glow:rgba(201,162,39,.38);--shadow:0 20px 44px -18px rgba(0,0,0,.8);color-scheme:dark;
  --f-display:"Fraunces",Georgia,serif}
html[data-skin="green"] #skinFx .leather{inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E"),radial-gradient(120% 90% at 30% 20%,#123326,#07130e 75%);opacity:1}
html[data-skin="green"] #skinFx .pin{inset:0;background:repeating-linear-gradient(135deg,transparent 0 46px,rgba(201,162,39,.07) 46px 47px,transparent 47px 50px,rgba(201,162,39,.05) 50px 51px);
  -webkit-mask:radial-gradient(70% 60% at 100% 100%,#000,transparent);mask:radial-gradient(70% 60% at 100% 100%,#000,transparent)}
html[data-skin="green"] #skinFx .dust{inset:-10% 0 0 0;background:radial-gradient(2px 2px at 15% 20%,rgba(240,214,122,.7),transparent),radial-gradient(1.5px 1.5px at 45% 60%,rgba(240,214,122,.6),transparent),radial-gradient(2px 2px at 75% 35%,rgba(240,214,122,.6),transparent),radial-gradient(1.5px 1.5px at 85% 80%,rgba(240,214,122,.5),transparent),radial-gradient(1.5px 1.5px at 30% 90%,rgba(240,214,122,.5),transparent);background-size:480px 480px;animation:dust 40s linear infinite}
@keyframes dust{to{background-position:-120px -480px}}
html[data-skin="green"] #skinFx .lamp{left:50%;top:-30vh;width:120vw;height:90vh;translate:-50% 0;background:radial-gradient(closest-side,rgba(240,214,122,.10),transparent);animation:lamp 9s ease-in-out infinite alternate}
@keyframes lamp{to{transform:scale(1.15);opacity:.6}}
html[data-skin="green"] h1,html[data-skin="green"] h2,html[data-skin="green"] h3{font-family:"Fraunces",Georgia,serif;font-weight:600;letter-spacing:.005em}
html[data-skin="green"] .topbar h2{font-style:italic;font-weight:500;background:linear-gradient(100deg,#c9a227 0%,#f6e3a1 40%,#c9a227 60%,#8a6d14 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:gold 5s ease-in-out infinite}
@keyframes gold{0%,100%{background-position:100% 0}50%{background-position:0 0}}
html[data-skin="green"] .side{background:linear-gradient(180deg,#0f241b,#0b1a14);border-right:1px solid rgba(201,162,39,.3);box-shadow:inset -4px 0 0 #0b1a14,inset -5px 0 0 rgba(201,162,39,.35)}
html[data-skin="green"] .panel,html[data-skin="green"] .kpi,html[data-skin="green"] .car{border-color:rgba(201,162,39,.28);box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 5px rgba(201,162,39,.14)}
html[data-skin="green"] .kpi:hover,html[data-skin="green"] .car:hover{border-color:#c9a227;box-shadow:inset 0 0 0 4px var(--panel),inset 0 0 0 5px rgba(201,162,39,.4),0 22px 40px -18px rgba(201,162,39,.4)}
html[data-skin="green"] .brand-mark{border-radius:50%;box-shadow:inset 0 0 0 2px #0a1712,inset 0 0 0 3px rgba(28,21,3,.5);font-family:"Fraunces",Georgia,serif;font-style:italic}
html[data-skin="green"] .btn.primary::after{background:linear-gradient(120deg,#2f6b4f,#7fb89a)}
html[data-skin="green"] .nav button.on{background:linear-gradient(90deg,rgba(201,162,39,.2),transparent)}
html[data-skin="green"] .modal{background:#10231b;border-color:rgba(201,162,39,.35)}
html[data-skin="green"] .modal-h,html[data-skin="green"] .modal-f{background:#10231b}
html[data-skin="green"] .titlebar{border-bottom-color:rgba(201,162,39,.25)}

/* ---------- 5. OSCILLOSCOPE ---------- */
html[data-skin="scope"]{
  --bg:#050403;--panel:rgba(14,10,4,.9);--panel2:#160f06;--line:#3d2c0d;--fg:#ffcf6a;--mute:#b8893e;
  --accent:#ffb000;--accent2:#ffd27a;--accentB:#ffd27a;--on-accent:#120b00;--ok:#c8ff5c;--warn:#ffe14d;--bad:#ff5a36;
  --glow:rgba(255,176,0,.45);--shadow:0 0 30px -10px rgba(255,176,0,.35);color-scheme:dark;
  --f-display:"JetBrains Mono",ui-monospace,monospace;--f-body:"JetBrains Mono",ui-monospace,monospace}
html[data-skin="scope"] body{font-size:14px;text-shadow:0 0 6px rgba(255,176,0,.35)}
html[data-skin="scope"] #skinFx .grat{inset:0;background:
  linear-gradient(rgba(255,176,0,.16),rgba(255,176,0,.16)) 50% 0/1px 100% no-repeat,linear-gradient(90deg,rgba(255,176,0,.16),rgba(255,176,0,.16)) 0 50%/100% 1px no-repeat,
  repeating-linear-gradient(90deg,rgba(255,176,0,.075) 0 1px,transparent 1px 10%),repeating-linear-gradient(0deg,rgba(255,176,0,.075) 0 1px,transparent 1px 12.5%);
  -webkit-mask:radial-gradient(90% 90% at 50% 50%,#000 50%,transparent);mask:radial-gradient(90% 90% at 50% 50%,#000 50%,transparent)}
html[data-skin="scope"] #skinFx .trace{left:0;top:36%;height:28%;width:200%;opacity:.55;filter:drop-shadow(0 0 6px #ffb000) drop-shadow(0 0 2px #ffb000);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='200' viewBox='0 0 600 200'%3E%3Cpath d='M0 100 C40 100 50 20 75 20 S110 180 150 180 S190 20 225 20 S260 100 300 100 L330 100 L340 60 L352 150 L362 100 L400 100 C430 100 440 40 465 40 S500 160 525 160 S560 100 600 100' fill='none' stroke='%23ffb000' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") 0 50%/50% 100% repeat-x;
  animation:trace 4s linear infinite;will-change:transform}
@keyframes trace{to{transform:translateX(-50%)}}
html[data-skin="scope"] #skinFx .beam{top:0;bottom:0;width:120px;left:-140px;background:linear-gradient(90deg,transparent,rgba(255,176,0,.10),rgba(255,210,122,.22) 92%,transparent);animation:beam 4s linear infinite}
@keyframes beam{to{transform:translateX(calc(100vw + 160px))}}
html[data-skin="scope"] #skinFx .glow{inset:0;background:radial-gradient(80% 70% at 50% 50%,rgba(255,176,0,.06),transparent 70%)}
/* linii de scanare peste tot ecranul */
html[data-skin="scope"] body::after{content:"";position:fixed;inset:0;z-index:2147483000;pointer-events:none;
  background:repeating-linear-gradient(transparent 0 2px,rgba(0,0,0,.22) 2px 3px),radial-gradient(130% 100% at 50% 50%,transparent 60%,rgba(0,0,0,.55));animation:flicker 5s steps(1) infinite}
@keyframes flicker{0%,100%{opacity:1}47%{opacity:.88}48%{opacity:1}82%{opacity:.93}}
html[data-skin="scope"] .panel,html[data-skin="scope"] .kpi,html[data-skin="scope"] .car,html[data-skin="scope"] .btn,html[data-skin="scope"] .modal,html[data-skin="scope"] .icon-btn,html[data-skin="scope"] .field input,html[data-skin="scope"] .field select,html[data-skin="scope"] .field textarea{border-radius:3px}
html[data-skin="scope"] .panel,html[data-skin="scope"] .kpi,html[data-skin="scope"] .car{border-color:rgba(255,176,0,.3);box-shadow:inset 0 0 24px -12px rgba(255,176,0,.35)}
html[data-skin="scope"] .kpi:hover,html[data-skin="scope"] .car:hover{border-color:#ffb000;box-shadow:inset 0 0 30px -10px rgba(255,176,0,.5),0 0 22px -6px rgba(255,176,0,.6)}
html[data-skin="scope"] .kpi .val,html[data-skin="scope"] .topbar h2{text-shadow:0 0 10px rgba(255,176,0,.8),0 0 2px #ffd27a}
html[data-skin="scope"] .topbar h2{text-transform:uppercase;letter-spacing:.08em}
html[data-skin="scope"] .topbar h2::after{content:"_";animation:tbBlink 1s steps(1) infinite;margin-left:4px}
html[data-skin="scope"] .btn{text-transform:uppercase;letter-spacing:.06em;font-size:13px}
html[data-skin="scope"] .btn.sm{font-size:11px}
html[data-skin="scope"] .side-foot .btn{letter-spacing:0;font-size:10.5px}
html[data-skin="scope"] .chip{white-space:nowrap;letter-spacing:0}
html[data-skin="scope"] .btn.primary{background:#ffb000;box-shadow:0 0 16px -2px rgba(255,176,0,.7);text-shadow:none}
html[data-skin="scope"] .btn.primary::after{background:#ffd27a}
html[data-skin="scope"] .btn:hover{color:#120b00;text-shadow:none}
html[data-skin="scope"] .btn::after{background:#ffb000}
html[data-skin="scope"] .side{background:rgba(8,6,2,.92);border-right-color:rgba(255,176,0,.35)}
html[data-skin="scope"] .nav button.on{background:rgba(255,176,0,.14);box-shadow:inset 0 0 0 1px rgba(255,176,0,.35)}
html[data-skin="scope"] .brand-mark{border-radius:3px;box-shadow:0 0 18px rgba(255,176,0,.6);text-shadow:none}
html[data-skin="scope"] .plate,html[data-skin="scope"] .plate *{text-shadow:none}
html[data-skin="scope"] .modal{background:#0b0803;box-shadow:0 0 0 1px rgba(255,176,0,.45),0 0 50px -10px rgba(255,176,0,.45)}
html[data-skin="scope"] .modal-h,html[data-skin="scope"] .modal-f{background:#0b0803}
html[data-skin="scope"] .titlebar{border-bottom-color:rgba(255,176,0,.3)}

/* ---------- ecranul de autentificare urmează tema ---------- */
html[data-skin] #login .stripes span:nth-child(1){background:var(--accent)}
html[data-skin] #login .stripes span:nth-child(3){background:var(--accent2)}
html[data-skin] .lg-bar i{background:linear-gradient(90deg,var(--accent2),var(--accent))}
html[data-skin] .lg-bgbtns button:hover{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
html[data-skin] .lg-user .av{background:linear-gradient(135deg,var(--accent2),var(--accent))}
html[data-skin] .padlock{color:var(--accent);filter:drop-shadow(0 0 10px var(--glow))}
html[data-skin] .lg-link:hover{color:var(--accent)}
html[data-skin="glacier"] #login .stripes span:nth-child(2){background:#fff}

/* ================= SETĂRI: ASPECT DEVIZ (v1.5) ================= */
.dz-panel{display:flex;flex-direction:column;gap:16px}
.dz-tpls{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
.dz-tpl{display:flex;flex-direction:column;gap:6px;min-width:0}
.dz-pick{all:unset;cursor:pointer;display:block;border-radius:10px;padding:8px;background:var(--panel2);border:1px solid var(--line);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s,border-color .25s}
.dz-pick:hover{transform:translateY(-6px) rotate(-.6deg);border-color:var(--accent);box-shadow:0 22px 34px -18px var(--glow)}
.dz-pick:focus-visible{outline:2px solid var(--accent2);outline-offset:3px}
.dz-tpl.on .dz-pick{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent),0 16px 30px -16px var(--glow)}
.dz-paper{display:block;position:relative;aspect-ratio:794/1123;overflow:hidden;background:#fff;border-radius:3px;box-shadow:0 6px 16px -6px rgba(0,0,0,.45);--k:.2}
.dz-frame{position:absolute;left:0;top:0;width:794px;height:1123px;border:0;transform:scale(var(--k));transform-origin:0 0;pointer-events:none;background:#fff}
.dz-meta{display:flex;align-items:center;gap:8px}
.dz-meta b{font:600 14px var(--f-display);color:var(--fg)}
.dz-meta .chip{font-size:10px}
.dz-zoom{margin-left:auto;width:28px;height:28px}
.dz-zoom svg{width:15px;height:15px}
.dz-tpl small{color:var(--mute);font-size:12px;line-height:1.4}
.dz-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:24px;align-items:start}
@media (max-width:980px){.dz-row{grid-template-columns:1fr}}
.dz-col{display:flex;flex-direction:column;gap:10px;min-width:0}
.dz-sw{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.dz-c{all:unset;cursor:pointer;width:28px;height:28px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 2px rgba(255,255,255,.18);transition:transform .2s,box-shadow .2s;position:relative}
.dz-c:hover{transform:scale(1.15)}
.dz-c.on{box-shadow:0 0 0 2px var(--panel),0 0 0 4px var(--c)}
.dz-c.on::after{content:"";position:absolute;left:10px;top:6px;width:6px;height:11px;border:solid #fff;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.dz-custom{background:conic-gradient(#ff3b3b,#ffd23f,#3dff8a,#2de2ff,#5b6bff,#ff2fd0,#ff3b3b);overflow:hidden}
.dz-custom input{opacity:0;width:100%;height:100%;cursor:pointer;border:0;padding:0}
.dz-drop{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:14px;border:1.5px dashed var(--line);border-radius:12px;background:var(--panel2);transition:border-color .2s,background .2s}
.dz-drop.over{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,var(--panel2))}
.dz-drop.busy{opacity:.6;pointer-events:none}
.dz-logo-empty{display:flex;gap:12px;align-items:center;flex:1;min-width:220px;color:var(--mute)}
.dz-logo-empty svg{width:36px;height:36px;flex:none;color:var(--accent)}
.dz-logo-empty b,.dz-logo-info b{display:block;color:var(--fg);font-size:13px}
.dz-logo-empty small,.dz-logo-info small{display:block;font-size:11.5px;line-height:1.4;margin-top:2px;color:var(--mute)}
.dz-logo-prev{flex:none;display:grid;place-items:center;width:170px;height:76px;border-radius:8px;padding:8px;
  background:linear-gradient(45deg,#eef0f3 25%,transparent 25% 75%,#eef0f3 75%) 0 0/14px 14px,linear-gradient(45deg,#eef0f3 25%,transparent 25% 75%,#eef0f3 75%) 7px 7px/14px 14px,#fff}
.dz-logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.dz-logo-info{flex:1;min-width:180px}
.dz-logo-act{display:flex;gap:8px}
.dz-logo-act label{cursor:pointer}
.dz-size{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.dz-size .lbl-s{margin-right:4px}
.dz-big{align-items:center;background:var(--panel2)}
.dz-big .dz-paper{width:min(640px,100%)}

.dz-brand{margin-top:4px}.dz-brand textarea{resize:vertical;min-height:58px}.dz-brand small{font-size:11.5px}
.dz-fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;padding-top:14px;border-top:1px solid var(--line)}
.dz-grp{display:flex;flex-direction:column;gap:8px}
.dz-chk{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:14px;padding:3px 0}
.dz-chk input{width:18px;height:18px;accent-color:var(--accent);flex:none;margin:0}
.dz-vat-opts{display:flex;flex-direction:column;gap:10px;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line)}
.dz-vat-opts small{font-size:11.5px;line-height:1.4}