/* DMS AUTO — teme vizuale (27.09.2026). Tema „Actual” = style.css neschimbat; celelalte suprascriu tokenii si cateva reguli
   pe html[data-theme=...]. Alegerea sta in localStorage (dms.tema) sau ?tema=; comutatorul e in bara de sus (tema.js).
   Fonturile vin de la Google Fonts cand exista internet; altfel ramane fontul de sistem. */

/* ===== comutatorul de teme (bulinele din antet) ===== */
.tema-bar { display: flex; align-items: center; gap: .35rem; margin-right: .2rem; }
.tema-bar button { width: 18px; height: 18px; padding: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.45); background: var(--tb, #2C3342); cursor: pointer; box-shadow: none; }
.tema-bar button:hover { border-color: #fff; } .tema-bar button.on { border-color: #fff; box-shadow: 0 0 0 2px rgba(255,255,255,.35); }
.tema-bar button[data-tema=""] { --tb: linear-gradient(135deg, #1C5699, #2C3342); }
.tema-bar button[data-tema="r1"] { --tb: linear-gradient(135deg, #2a6ebb, #1b2130); }
.tema-bar button[data-tema="r2"] { --tb: linear-gradient(135deg, #6ba8ee, #0f1420); }
.tema-bar button[data-tema="h1"] { --tb: linear-gradient(135deg, #10b981, #050505); }
.tema-bar button[data-tema="h2"] { --tb: linear-gradient(135deg, #ffffff, #c9d0dc); }
@media (max-width: 800px) { .tema-bar { display: none; } }

/* ===== R1 — Rafinat: aceeasi lume, font Manrope, un accent, carduri fara borduri, umbre in nuanta fundalului ===== */
html[data-theme="r1"] { --bg: #1b2130; --surface: #232a3a; --surface-2: #1b2130; --side: #151a26; --ink: #e6e9f0; --ink-2: #9aa5bb; --line: rgba(255,255,255,.07); --accent: #2a6ebb; --accent-2: #8dbdf4; --topbar1: #162a4a; --topbar2: #1d3a66; --shadow: 0 10px 30px rgba(0,8,30,.35); }
html[data-theme="r1"] body { font-family: Manrope, "Segoe UI", system-ui, sans-serif; }
html[data-theme="r1"] h1 { font-size: 1.65rem; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
html[data-theme="r1"] .card { border-radius: .9rem; }
html[data-theme="r1"] #nav a.active { box-shadow: 0 6px 18px rgba(42,110,187,.35); }
html[data-theme="r1"] .step b { font-weight: 800; letter-spacing: -.02em; }
html[data-theme="r1"] .chip, html[data-theme="r1"] .ost { font-weight: 600; }
html[data-theme="r1"] th { letter-spacing: .1em; }

/* ===== R2 — Fara sidebar: navigare sus, continut pe latime limitata, font Outfit, granulatie fina ===== */
html[data-theme="r2"] { --bg: #0f1420; --surface: #151b2a; --surface-2: #0f1420; --side: #0f1420; --ink: #e8ebf2; --ink-2: #95a0b8; --line: rgba(255,255,255,.07); --accent: #2f6fc4; --accent-2: #6ba8ee; --topbar1: #0f1420; --topbar2: #0f1420; --shadow: 0 20px 50px rgba(5,10,30,.5); }
html[data-theme="r2"] body { font-family: Outfit, "Segoe UI", system-ui, sans-serif; }
html[data-theme="r2"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.6'/></svg>"); }
html[data-theme="r2"] .topbar { border-bottom: 1px solid rgba(255,255,255,.07); }
html[data-theme="r2"] .layout, html[data-theme="h1"] .layout { flex-direction: column; }
html[data-theme="r2"] .side, html[data-theme="h1"] .side { width: auto; flex: none; position: static; height: auto; overflow: visible; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 0 1rem; padding: 0 1.2rem; }
html[data-theme="r2"] .side > *:first-child, html[data-theme="h1"] .side > *:first-child { display: none; }        /* cartea contului (e in subsol) */
html[data-theme="r2"] #nav, html[data-theme="h1"] #nav { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: .2rem; padding: .4rem 0; flex: 1; }
html[data-theme="r2"] .nav-grp, html[data-theme="h1"] .nav-grp, html[data-theme="r2"] .nav-gi, html[data-theme="h1"] .nav-gi { flex-direction: row; flex-wrap: wrap; }
html[data-theme="r2"] .nav-gh, html[data-theme="h1"] .nav-gh { display: none; }
html[data-theme="r2"] .nav-bottom, html[data-theme="h1"] .nav-bottom { margin: 0; padding: 0; border: none; flex-direction: row; }
html[data-theme="r2"] .side-foot, html[data-theme="h1"] .side-foot { margin: 0; padding: .3rem 0; border: none; font-size: .78rem; }
html[data-theme="r2"] .side-foot #foot-info, html[data-theme="h1"] .side-foot #foot-info { display: none; }
html[data-theme="r2"] #nav a { padding: .4rem .7rem; border-radius: 0; border-bottom: 2px solid transparent; }
html[data-theme="r2"] #nav a.active { background: none; color: #fff; box-shadow: none; border-bottom-color: var(--accent-2); }
html[data-theme="r2"] .main { max-width: 1180px; margin: 0 auto; padding: 2rem 2.5rem 4rem; width: 100%; }
html[data-theme="r2"] h1 { font-size: 2.2rem; font-weight: 800; letter-spacing: -.04em; color: var(--ink); }
html[data-theme="r2"] .card { border: 1px solid rgba(255,255,255,.07); border-radius: .9rem; }
html[data-theme="r2"] .step-n { border-radius: .4rem; background: var(--accent-2); color: #0f1420; }
html[data-theme="r2"] .tabs button { border-radius: 0; background: none; border: none; border-bottom: 2px solid transparent; color: var(--ink-2); }
html[data-theme="r2"] .tabs button.on { background: none; color: #fff; border-bottom-color: var(--accent-2); }

/* ===== H1 — Sticla: negru OLED, lumini difuze, carduri de sticla cu contur dublu, meniu insula, butoane pastila ===== */
html[data-theme="h1"] { --bg: #050505; --surface: rgba(18,20,28,.72); --surface-2: rgba(255,255,255,.06); --side: transparent; --ink: #eceff5; --ink-2: #9aa3b5; --line: rgba(255,255,255,.09); --accent: #10b981; --accent-2: #5ce0a5; --topbar1: #050505; --topbar2: #050505; --info-bg: rgba(16,185,129,.12); --info-ink: #8ab4ff; --shadow: inset 0 1px 1px rgba(255,255,255,.12), 0 30px 60px rgba(0,0,0,.5); }
html[data-theme="h1"] body { font-family: "Space Grotesk", "Segoe UI", system-ui, sans-serif; }
html[data-theme="h1"] body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(600px 400px at 15% 10%, rgba(16,185,129,.16), transparent 60%), radial-gradient(700px 500px at 85% 30%, rgba(59,130,246,.14), transparent 60%), radial-gradient(500px 400px at 50% 100%, rgba(139,92,246,.1), transparent 60%); }
html[data-theme="h1"] .topbar { background: transparent; border: none; position: relative; z-index: 2; }
html[data-theme="h1"] .layout { position: relative; z-index: 1; }
html[data-theme="h1"] .side { position: sticky; top: .8rem; z-index: 5; margin: .4rem auto 1.4rem; width: max-content; max-width: calc(100% - 2rem); border-radius: 999px; background: rgba(255,255,255,.06); backdrop-filter: blur(24px); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 1px rgba(255,255,255,.15); padding: .3rem .8rem; }
html[data-theme="h1"] #nav a { border-radius: 999px; padding: .4rem .8rem; }
html[data-theme="h1"] #nav a.active { background: #fff; color: #000; box-shadow: none; }
html[data-theme="h1"] .main { max-width: 1200px; margin: 0 auto; padding: 1rem 2rem 5rem; width: 100%; }
html[data-theme="h1"] h1 { font-size: 2.6rem; font-weight: 700; letter-spacing: -.045em; color: #fff; }
html[data-theme="h1"] .card { border-radius: 1.6rem; border: 1px solid rgba(255,255,255,.08); padding: 1.3rem 1.5rem; backdrop-filter: blur(20px); }
html[data-theme="h1"] button, html[data-theme="h1"] .btn-lnk, html[data-theme="h1"] .tabs a { border-radius: 999px; border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.06); color: #fff; }
html[data-theme="h1"] button.primary, html[data-theme="h1"] .tabs button.on, html[data-theme="h1"] .tabs a.on, html[data-theme="h1"] button.swap-car { background: #fff; border-color: #fff; color: #000; }
html[data-theme="h1"] .step-n { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); }
html[data-theme="h1"] .chip { border-radius: 999px; }
html[data-theme="h1"] .vin-pill .vp { background: rgba(255,255,255,.08); color: #fff; border: 1px solid rgba(255,255,255,.12); box-shadow: none; }
html[data-theme="h1"] .vin-pill .vp-m { color: #9aa3b5; } html[data-theme="h1"] .vin-pill .vp .chip { background: rgba(255,255,255,.08); color: #fff; }
html[data-theme="h1"] th { letter-spacing: .18em; font-size: .62rem; }

/* ===== H2 — Moale: fundal deschis, titlu masiv, carduri albe plutitoare, butoane negre ===== */
html[data-theme="h2"] { --bg: #eef0f4; --surface: #ffffff; --surface-2: #f1f3f7; --side: #ffffff; --ink: #14171f; --ink-2: #5c6577; --line: rgba(20,30,60,.08); --accent: #14171f; --accent-2: #2450b8; --topbar1: #ffffff; --topbar2: #ffffff; --focus: #2450b8;
  --good: #137a49; --good-bg: #e3f7ec; --warn: #e0a83a; --warn-bg: #fff2d6; --crit: #d9534f; --crit-bg: #fde3e1; --info-bg: #e4ecff; --on-color: #ffffff; --crit-ink: #a32620; --info-ink: #2450b8; --warn-ink: #7a4f00; --shadow: 0 30px 80px rgba(20,30,60,.10), 0 2px 6px rgba(20,30,60,.04); }
html[data-theme="h2"] body { font-family: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif; }
html[data-theme="h2"] .topbar { color: var(--ink); box-shadow: 0 1px 0 rgba(20,30,60,.06); }
html[data-theme="h2"] .brand-mark { background: #14171f; color: #fff; } html[data-theme="h2"] .brand-name { color: var(--ink); }
html[data-theme="h2"] .vin-pill { color: var(--ink-2); } html[data-theme="h2"] .vin-pill .vp { background: #f1f3f7; color: #14171f; box-shadow: none; }
html[data-theme="h2"] .fisa-btn, html[data-theme="h2"] .bell { background: #f1f3f7; border-color: rgba(20,30,60,.08); color: #14171f; } html[data-theme="h2"] .fisa-btn span { background: #14171f; color: #fff; }
html[data-theme="h2"] .topbar-marca { content: url("logo-allview-auto.png"); }
html[data-theme="h2"] .tema-bar button { border-color: rgba(20,30,60,.25); } html[data-theme="h2"] .tema-bar button.on { border-color: #14171f; box-shadow: 0 0 0 2px rgba(20,30,60,.2); }
html[data-theme="h2"] .side { box-shadow: 0 10px 40px rgba(20,30,60,.06); }
html[data-theme="h2"] #nav a:hover, html[data-theme="h2"] .nav-gh:hover { background: #f1f3f7; }
html[data-theme="h2"] #nav a.active { background: #14171f; color: #fff; box-shadow: none; } html[data-theme="h2"] #nav a.active .nav-c { background: rgba(255,255,255,.2); }
html[data-theme="h2"] h1 { font-size: 2.4rem; font-weight: 800; letter-spacing: -.05em; color: var(--ink); }
html[data-theme="h2"] .card { border-radius: 1.4rem; padding: 1.3rem 1.5rem; }
html[data-theme="h2"] button { background: #f1f3f7; border-color: transparent; color: #14171f; border-radius: 999px; }
html[data-theme="h2"] button.primary, html[data-theme="h2"] .tabs button.on, html[data-theme="h2"] .tabs a.on, html[data-theme="h2"] button.swap-car, html[data-theme="h2"] .step-n { background: #14171f; border-color: #14171f; color: #fff; }
html[data-theme="h2"] button.primary:hover { background: #2a2f3c; border-color: #2a2f3c; }
html[data-theme="h2"] a { color: var(--accent-2); }
html[data-theme="h2"] .chip { background: #f1f3f7; color: #3a4356; border-color: transparent; font-weight: 600; }
html[data-theme="h2"] .chip.good { background: var(--good-bg); color: var(--good); } html[data-theme="h2"] .chip.warn { background: var(--warn-bg); color: var(--warn-ink); } html[data-theme="h2"] .chip.crit { background: var(--crit-bg); color: var(--crit-ink); } html[data-theme="h2"] .chip.info { background: var(--info-bg); color: var(--info-ink); }
html[data-theme="h2"] .ost.st-proc { background: #fff2d6; color: #7a4f00; } html[data-theme="h2"] .ost.st-prep { background: #e4ecff; color: #2450b8; } html[data-theme="h2"] .ost.st-ship { background: #efe6ff; color: #5b34b8; } html[data-theme="h2"] .ost.st-done { background: #e3f7ec; color: #137a49; } html[data-theme="h2"] .ost.st-fin { background: #f1f3f7; color: #5c6577; }
html[data-theme="h2"] th { background: var(--surface); color: var(--ink-2); }
html[data-theme="h2"] .thumb { background: #f7f8fa; } html[data-theme="h2"] .explode { background: #fff; border: 1px solid var(--line); }
html[data-theme="h2"] .veh-strip, html[data-theme="h2"] .in { background: #fff; }
html[data-theme="h2"] input, html[data-theme="h2"] select, html[data-theme="h2"] textarea { background: #fff; color: var(--ink); border-color: rgba(20,30,60,.14); }
html[data-theme="h2"] .swap-car { border-color: #14171f; } html[data-theme="h2"] .pdi, html[data-theme="h2"] .advice { color: var(--ink); }
html[data-theme="h2"] .kc, html[data-theme="h2"] .tile { box-shadow: var(--shadow); }
/* temele fara sidebar: toate grupurile raman vizibile pe rand (nu doar grupa paginii curente), despartite de o linie */
html[data-theme="r2"] .nav-grp.closed .nav-gi, html[data-theme="h1"] .nav-grp.closed .nav-gi { display: flex; }
html[data-theme="r2"] .nav-grp + .nav-grp, html[data-theme="h1"] .nav-grp + .nav-grp { border-left: 1px solid var(--line); padding-left: .5rem; margin-left: .3rem; }
html[data-theme="r2"] .nav-bottom, html[data-theme="h1"] .nav-bottom { border-left: 1px solid var(--line); padding-left: .5rem; margin-left: .3rem; }

/* ===== viteza (27.09): fara straturi fixe peste tot ecranul, fara estompare pe continutul care se deruleaza, umbre mai mici =====
   Masurat fara accelerare grafica (Edge, 60 de pasi de derulare): Sticla era de 12–14 ori mai lenta decat Actual, Fara sidebar ~1,7×, Moale ~1,4×. */
/* R2: granulatia trece pe fundalul paginii (se deseneaza o data, se deruleaza cu pagina), nu pe un strat fix deasupra */
html[data-theme="r2"] body::after { content: none; }
html[data-theme="r2"] body { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)' opacity='.035'/></svg>"); }
html[data-theme="r2"] { --shadow: 0 8px 22px rgba(5,10,30,.4); }
/* H1: luminile pe fundalul paginii (nu strat fix), carduri opace fara estompare, meniul-insula fara estompare */
html[data-theme="h1"] body::before { content: none; }
html[data-theme="h1"] body { background: radial-gradient(900px 520px at 12% 0, rgba(16,185,129,.16), transparent 62%) no-repeat, radial-gradient(900px 600px at 88% 120px, rgba(59,130,246,.14), transparent 62%) no-repeat, #050505; }
html[data-theme="h1"] { --surface: #0f1117; --surface-2: #171a22; --shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.45); }
html[data-theme="h1"] .card { backdrop-filter: none; background: #0f1117; }
html[data-theme="h1"] .side { backdrop-filter: none; background: #12151c; }
/* H2: umbre mai mici (aceeasi impresie de carduri care plutesc) */
html[data-theme="h2"] { --shadow: 0 6px 20px rgba(20,30,60,.08), 0 1px 3px rgba(20,30,60,.05); }
html[data-theme="h2"] .side { box-shadow: 1px 0 0 rgba(20,30,60,.06); }
html[data-theme="h2"] .topbar { box-shadow: 0 1px 0 rgba(20,30,60,.08); }
/* granulatia (R2) scoasa: costa la fiecare desenare de bucata de pagina; luminile (H1) doar in primii 900 px, nu pe toata pagina */
html[data-theme="r2"] body { background-image: none; }
html[data-theme="h1"] body { background: #050505; }
html[data-theme="h1"] .layout { background: radial-gradient(900px 520px at 12% 0, rgba(16,185,129,.14), transparent 62%) no-repeat, radial-gradient(900px 600px at 88% 60px, rgba(59,130,246,.12), transparent 62%) no-repeat; background-size: 100% 900px; }