:root{
  color-scheme:dark;
  --bg:#0b0f17; --surface:rgba(255,255,255,.045); --surface-h:rgba(255,255,255,.085);
  --border:rgba(255,255,255,.09); --border-h:rgba(110,168,254,.45);
  --text:#e8edf5; --muted:#8a94a8; --accent:#6ea8fe; --accent2:#a78bfa; --glow3:#34d399;
  --on-accent:#fff; --danger:#f87171; --ok:#34d399; --input:rgba(255,255,255,.06);
  --logo-bg:rgba(255,255,255,.94); --shadow:0 14px 34px -12px rgba(0,0,0,.55);
  --letter-l:72%; --r:16px;
}
/* ---- светлая база: auto (светлая система), light, latte, mint, sakura */
@media (prefers-color-scheme: light){
  :root[data-theme="auto"]{ color-scheme:light;
    --bg:#eef1f7; --surface:rgba(255,255,255,.72); --surface-h:#fff;
    --border:rgba(15,23,42,.08); --border-h:rgba(59,130,246,.45);
    --text:#0f172a; --muted:#64748b; --accent:#3b82f6; --accent2:#8b5cf6; --glow3:#34d399;
    --input:#fff; --logo-bg:#fff; --shadow:0 14px 34px -14px rgba(15,23,42,.25); --letter-l:42%; }
}
:root[data-theme="light"],:root[data-theme="latte"],:root[data-theme="mint"],:root[data-theme="sakura"],:root[data-theme="white"]{ color-scheme:light;
    --bg:#eef1f7; --surface:rgba(255,255,255,.72); --surface-h:#fff;
    --border:rgba(15,23,42,.08); --border-h:rgba(59,130,246,.45);
    --text:#0f172a; --muted:#64748b; --accent:#3b82f6; --accent2:#8b5cf6; --glow3:#34d399;
    --input:#fff; --logo-bg:#fff; --shadow:0 14px 34px -14px rgba(15,23,42,.25); --letter-l:42%; }

/* ---- тёмные темы */
:root[data-theme="ocean"]{ --bg:#06141f; --text:#e0f2fe; --muted:#7f9bb0; --accent:#22d3ee; --accent2:#3b82f6; --glow3:#14b8a6;
  --border:rgba(125,211,252,.10); --border-h:rgba(34,211,238,.5); --surface:rgba(125,211,252,.05); --surface-h:rgba(125,211,252,.10); }
:root[data-theme="sunset"]{ --bg:#170c12; --text:#fde8e4; --muted:#b08a8f; --accent:#fb923c; --accent2:#f43f5e; --glow3:#a855f7;
  --border:rgba(253,186,116,.10); --border-h:rgba(251,146,60,.5); --surface:rgba(253,186,116,.05); --surface-h:rgba(253,186,116,.10); }
:root[data-theme="forest"]{ --bg:#08130e; --text:#e3f5ea; --muted:#83a491; --accent:#34d399; --accent2:#a3e635; --glow3:#0ea5e9;
  --border:rgba(134,239,172,.10); --border-h:rgba(52,211,153,.5); --surface:rgba(134,239,172,.05); --surface-h:rgba(134,239,172,.10); }
:root[data-theme="neon"]{ --bg:#0c0518; --text:#f5e8ff; --muted:#a08bb8; --accent:#e879f9; --accent2:#22d3ee; --glow3:#f43f5e;
  --border:rgba(232,121,249,.14); --border-h:rgba(232,121,249,.6); --surface:rgba(232,121,249,.05); --surface-h:rgba(232,121,249,.11);
  --shadow:0 0 28px -6px rgba(232,121,249,.45); }
:root[data-theme="graphite"]{ --bg:#101010; --text:#f4f4f5; --muted:#8f8f96; --accent:#f4f4f5; --accent2:#a1a1aa; --glow3:#52525b;
  --on-accent:#111; --border:rgba(255,255,255,.09); --border-h:rgba(255,255,255,.35); --surface:rgba(255,255,255,.04); --surface-h:rgba(255,255,255,.08); }

/* ---- светлые темы (поверх светлой базы) */
:root[data-theme="latte"]{ --bg:#f5efe6; --text:#2b2118; --muted:#8a7765; --accent:#c2410c; --accent2:#d97706; --glow3:#a16207;
  --surface:rgba(255,252,247,.75); --surface-h:#fffdf9; --border:rgba(87,56,24,.10); --border-h:rgba(194,65,12,.45); --input:#fffdf9; }
:root[data-theme="mint"]{ --bg:#ecf7f2; --text:#0f2a24; --muted:#5f8279; --accent:#0d9488; --accent2:#10b981; --glow3:#0ea5e9;
  --border:rgba(15,80,64,.10); --border-h:rgba(13,148,136,.45); }
:root[data-theme="sakura"]{ --bg:#fdf1f5; --text:#3b1028; --muted:#9a6a82; --accent:#db2777; --accent2:#a855f7; --glow3:#fb7185;
  --border:rgba(120,20,70,.09); --border-h:rgba(219,39,119,.4); }
/* ---- однотонные классические темы */
:root[data-theme="amoled"]{ --bg:#000; --surface:#0e0e0e; --surface-h:#181818; --border:#222; --border-h:#3b82f6;
  --text:#eaeaea; --muted:#8a8a8a; --accent:#3b82f6; --accent2:#3b82f6; --glow3:#3b82f6; --input:#111; --shadow:none; }
:root[data-theme="slate"]{ --bg:#1e1f22; --surface:#2b2d31; --surface-h:#313338; --border:#3a3c42; --border-h:#5b7cfa;
  --text:#e3e5e8; --muted:#949ba4; --accent:#5b7cfa; --accent2:#5b7cfa; --glow3:#5b7cfa; --input:#232428; --shadow:0 8px 24px -10px rgba(0,0,0,.6); }
:root[data-theme="navy"]{ --bg:#0f1b2d; --surface:#16263d; --surface-h:#1c3050; --border:#23395a; --border-h:#4f9cf9;
  --text:#e6eefa; --muted:#8aa0bd; --accent:#4f9cf9; --accent2:#4f9cf9; --glow3:#4f9cf9; --input:#122135; --shadow:0 8px 24px -10px rgba(0,0,0,.6); }
:root[data-theme="nord"]{ --bg:#2e3440; --surface:#3b4252; --surface-h:#434c5e; --border:#4c566a; --border-h:#88c0d0;
  --text:#eceff4; --muted:#a3acbd; --accent:#88c0d0; --accent2:#81a1c1; --glow3:#88c0d0; --on-accent:#2e3440; --input:#353c4a;
  --shadow:0 8px 24px -10px rgba(0,0,0,.45); }
:root[data-theme="white"]{ --bg:#fff; --surface:#f6f7f9; --surface-h:#eef0f3; --border:rgba(17,24,39,.09); --border-h:#2563eb;
  --text:#111827; --muted:#6b7280; --accent:#2563eb; --accent2:#2563eb; --glow3:#2563eb; --input:#fff; --shadow:0 8px 22px -12px rgba(17,24,39,.25); }

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;background:var(--bg);color:var(--text);
  font:15px/1.45 Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased}
body::before{content:"";position:fixed;inset:-10%;z-index:-1;pointer-events:none;
  background:
    radial-gradient(38% 32% at 12% 8%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 70%),
    radial-gradient(32% 30% at 88% 14%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 70%),
    radial-gradient(45% 40% at 50% 105%,color-mix(in srgb,var(--glow3) 13%,transparent),transparent 70%)}
a{color:inherit}
[hidden]{display:none!important}

.wrap{max-width:1200px;margin:0 auto;padding:48px 24px 64px}
.top{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;justify-content:space-between;margin-bottom:12px}
.hello{color:var(--muted);font-size:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.hello .dot{opacity:.5}
.clock{font-variant-numeric:tabular-nums;color:var(--text);font-weight:600}
h1{margin:6px 0 0;font-size:clamp(28px,4.4vw,42px);line-height:1.1;letter-spacing:-.025em;font-weight:750;
  background:linear-gradient(95deg,var(--text) 30%,var(--accent) 75%,var(--accent2));-webkit-background-clip:text;background-clip:text;color:transparent}
.sub{color:var(--muted);margin-top:8px}

.search{position:relative;flex:1 1 300px;max-width:400px;display:block}
.search input{width:100%;height:48px;padding:0 44px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
  color:var(--text);font:inherit;outline:none;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:border-color .2s,box-shadow .2s}
.search input::-webkit-search-cancel-button{display:none}
.search input:focus{border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.search svg{position:absolute;left:15px;top:50%;transform:translateY(-50%);color:var(--muted)}
.search kbd{position:absolute;right:12px;top:50%;transform:translateY(-50%);font:12px ui-monospace,monospace;color:var(--muted);
  border:1px solid var(--border);border-radius:6px;padding:2px 7px}

.group{margin-top:36px}
.group-title{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:12.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.group-title::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--border),transparent)}
.count{font-size:11px;letter-spacing:0;padding:1px 8px;border-radius:99px;background:var(--surface);border:1px solid var(--border);color:var(--muted);font-weight:600}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.card{position:relative;display:flex;align-items:center;gap:14px;min-width:0;padding:14px 16px;border-radius:var(--r);
  background:var(--surface);border:1px solid var(--border);text-decoration:none;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  transition:transform .18s ease,background .18s,border-color .18s,box-shadow .18s;animation:rise .4s ease both}
.card:hover,.card:focus-visible{transform:translateY(-3px);background:var(--surface-h);border-color:var(--border-h);box-shadow:var(--shadow);outline:none}
.card:active{transform:translateY(-1px) scale(.99)}
.card .arrow{position:absolute;top:12px;right:12px;color:var(--muted);opacity:0;transform:translate(-3px,3px);transition:.18s}
.card:hover .arrow{opacity:.8;transform:none}
@keyframes rise{from{opacity:0;transform:translateY(6px)}}

.logo{flex:none;width:50px;height:50px;border-radius:13px;display:grid;place-items:center;overflow:hidden;
  background:var(--logo-bg);box-shadow:0 1px 2px rgba(0,0,0,.12),inset 0 0 0 1px rgba(0,0,0,.05)}
.logo img{width:72%;height:72%;object-fit:contain}
.logo.letter{background:linear-gradient(135deg,hsl(var(--h) 75% 58% / .28),hsl(calc(var(--h) + 40) 75% 58% / .16));
  color:hsl(var(--h) 75% var(--letter-l));font-weight:750;font-size:21px;box-shadow:inset 0 0 0 1px hsl(var(--h) 70% 60% / .25)}
.logo.sm{width:40px;height:40px;border-radius:11px;font-size:17px}
.meta{min-width:0;display:flex;flex-direction:column;flex:1}
.name{font-weight:620;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.desc{font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.empty{color:var(--muted);text-align:center;padding:40px 10px}
.empty.big{margin-top:60px;font-size:17px}

/* ---------------- mobile */
@media (max-width:640px){
  .wrap{padding:26px 14px calc(40px + env(safe-area-inset-bottom))}
  .top{gap:16px}
  .search{max-width:none;flex-basis:100%}
  .search kbd{display:none}
  .group{margin-top:26px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  .card{flex-direction:column;text-align:center;gap:10px;padding:16px 10px 14px}
  .card .meta{align-items:center;width:100%}
  .card .name{font-size:14px;max-width:100%}
  .card .desc{font-size:11.5px;max-width:100%}
  .card .arrow{display:none}
  .card .logo{width:54px;height:54px;border-radius:15px}
}

/* ---------------- forms / admin */
.panel{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:20px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.panel h3{margin:0 0 14px;font-size:15px;display:flex;align-items:center;gap:8px}
.muted{color:var(--muted)} .small{font-size:13px}
.input{width:100%;height:40px;padding:0 12px;border-radius:10px;border:1px solid var(--border);background:var(--input);
  color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .15s,box-shadow .15s;min-width:0}
.input:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)}
.input.sm{height:34px}
.input.file{height:auto;padding:7px 8px;font-size:13px}
select.input{appearance:auto}
select.input option{background:var(--bg);color:var(--text)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:40px;padding:0 16px;border-radius:10px;border:1px solid var(--border);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px;font-weight:550;cursor:pointer;text-decoration:none;white-space:nowrap;transition:.15s}
.btn:hover{background:var(--surface-h);border-color:var(--border-h)}
.btn.primary{background:linear-gradient(135deg,var(--accent),var(--accent2));border-color:transparent;color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.primary:disabled{opacity:.6;cursor:wait}
.btn.sm{height:34px;min-width:34px;padding:0 10px}
.btn.danger:hover{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 50%,transparent)}
.btn.wide{width:100%}
form.inline{display:inline}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.nowrap{flex-wrap:nowrap}
.grow{flex:1;min-width:0}
.stack{display:flex;flex-direction:column;gap:12px}
.field{display:flex;flex-direction:column;gap:5px}
.field>span{font-size:12px;color:var(--muted);font-weight:550}
.checks{display:flex;flex-direction:column;gap:7px}
.check{display:flex;gap:8px;align-items:center;font-size:13.5px;cursor:pointer}
.check input{width:16px;height:16px;accent-color:var(--accent)}
.logo-fields{display:flex;flex-direction:column;gap:10px;padding:12px;border:1px dashed var(--border);border-radius:12px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.badge{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;padding:2px 7px;border-radius:6px;
  background:color-mix(in srgb,var(--muted) 20%,transparent);color:var(--muted);vertical-align:middle}

.flashes{display:flex;flex-direction:column;gap:8px;margin:0 0 16px}
.flash{padding:11px 14px;border-radius:11px;font-size:14px;border:1px solid;transition:opacity .6s}
.flash.ok{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.flash.error{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent)}
.flash.fade{opacity:0}

body.center{display:grid;place-items:center;padding:20px}
.login{width:100%;max-width:360px;display:flex;flex-direction:column;gap:12px;text-align:center;padding:30px 26px}
.login h2{margin:4px 0 0}
.login p{margin:0 0 6px}
.login .lock{width:56px;height:56px;margin:0 auto;border-radius:16px;display:grid;place-items:center;color:var(--on-accent);
  background:linear-gradient(135deg,var(--accent),var(--accent2))}
.login .back{text-decoration:none;margin-top:4px}

.adm-top{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-end;justify-content:space-between;margin-bottom:24px}
.adm-top h1{font-size:clamp(24px,3.5vw,32px)}
.adm-grid{display:grid;grid-template-columns:360px 1fr;gap:20px;align-items:start}
.col{display:flex;flex-direction:column;gap:20px;min-width:0}
.glist,.slist{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:6px}
.glist li{display:flex;gap:6px;align-items:center}
.slist{margin-top:0}
.slist li{border-radius:12px;padding:8px;margin:0 -8px;transition:background .3s}
.slist li:hover{background:var(--surface)}
.slist li.flashrow{animation:hl 2s ease}
@keyframes hl{0%,40%{background:color-mix(in srgb,var(--accent) 16%,transparent)}}
.srow{display:flex;align-items:center;gap:12px;min-width:0}
.link{text-decoration:none}.link:hover{color:var(--accent)}
.actions{display:flex;gap:4px;flex:none}
.edit{margin-top:12px;padding:14px;border-radius:12px;background:var(--surface);border:1px solid var(--border)}

@media (max-width:900px){ .adm-grid{grid-template-columns:1fr} }
@media (max-width:640px){
  .panel{padding:16px}
  .two{grid-template-columns:1fr}
  .srow{flex-wrap:wrap}
  .srow .meta{flex-basis:calc(100% - 56px)}
  .actions{width:100%;justify-content:flex-end}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------------- PIN */
.lockbtn{flex:none;height:48px;min-width:48px;padding:0 14px;border-radius:14px;border:1px solid var(--border);background:var(--surface);
  color:var(--muted);display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer;font:inherit;font-weight:650;
  font-variant-numeric:tabular-nums;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.15s}
.lockbtn:hover{color:var(--text);border-color:var(--border-h)}
.lockbtn span:empty{display:none}
.lockbtn span{color:var(--danger)}
.top .search+.lockbtn{margin-left:-14px}
body.locking .wrap{filter:blur(10px);opacity:.4;transition:.25s}

.pinbox{width:100%;max-width:330px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.pinbox .lock{width:60px;height:60px;border-radius:18px;display:grid;place-items:center;color:var(--on-accent);margin-bottom:6px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 60%,transparent)}
.pinbox h2{margin:0;font-size:22px;letter-spacing:-.01em}
.pinbox p{margin:0;min-height:20px;font-size:14px}
.pinbox p.err{color:var(--danger)}
.dots{display:flex;gap:14px;margin:18px 0 26px}
.dots i{width:14px;height:14px;border-radius:50%;border:2px solid var(--muted);transition:.15s}
.dots i.on{background:var(--accent);border-color:var(--accent);transform:scale(1.1)}
.pinbox.ok .dots i{background:var(--ok);border-color:var(--ok)}
.pad{display:grid;grid-template-columns:repeat(3,76px);gap:16px 22px;justify-content:center}
.pad button{width:76px;height:76px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);
  font:inherit;font-size:28px;font-weight:450;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:background .12s,transform .08s;-webkit-tap-highlight-color:transparent;user-select:none}
.pad button:hover{background:var(--surface-h)}
.pad button:active{transform:scale(.93);background:color-mix(in srgb,var(--accent) 22%,transparent)}
.pad button.fn{background:transparent;border-color:transparent;color:var(--muted)}
.pinbox.blocked .pad{opacity:.35;pointer-events:none}
.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}

.state{font-size:13px;padding:9px 12px;border-radius:10px;margin-bottom:14px;border:1px solid}
.state.on{background:color-mix(in srgb,var(--ok) 12%,transparent);border-color:color-mix(in srgb,var(--ok) 35%,transparent)}
.state.off{background:color-mix(in srgb,var(--muted) 12%,transparent);border-color:var(--border);color:var(--muted)}
@media (max-width:640px){
  .top .search{flex-basis:auto;flex:1}
  .top .search+.lockbtn{margin-left:-8px}
  .pad{grid-template-columns:repeat(3,72px);gap:14px 20px}
  .pad button{width:72px;height:72px}
}
@media (max-width:640px){ .top .head{flex-basis:100%} }

/* ---------------- выбор темы */
.themes{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:8px}
.theme{position:relative;cursor:pointer;display:flex;flex-direction:column;gap:5px;font-size:12px;text-align:center;color:var(--muted)}
.theme input{position:absolute;opacity:0;pointer-events:none}
.theme .sw{position:relative;height:54px;border-radius:10px;border:2px solid var(--border);display:flex;flex-direction:column;
  justify-content:flex-end;gap:4px;padding:8px;transition:.15s;overflow:hidden}
.theme .sw i{position:absolute;top:8px;left:8px;width:22px;height:22px;border-radius:7px;background:linear-gradient(90deg,var(--a1),var(--a2))}
.theme .sw b{display:block;height:4px;width:65%;border-radius:3px;opacity:.75}
.theme:hover .sw{border-color:var(--border-h)}
.theme input:checked + .sw{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}
.theme input:checked ~ .tn{color:var(--text);font-weight:600}
.theme input:focus-visible + .sw{outline:2px solid var(--accent);outline-offset:2px}

/* ---------------- однотонный стиль: без градиентов и подсветки */
:root[data-flat="1"] body::before{display:none}
:root[data-flat="1"] h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text)}
:root[data-flat="1"] .group-title::after{background:var(--border)}
:root[data-flat="1"] .logo.letter{background:hsl(var(--h) 70% 55% / .2)}
:root[data-flat="1"] .btn.primary,
:root[data-flat="1"] .login .lock,
:root[data-flat="1"] .pinbox .lock{background:var(--accent);box-shadow:none}
:root[data-flat="1"] .theme .sw i{background:var(--a1)}
:root[data-flat="1"] .card,
:root[data-flat="1"] .panel,
:root[data-flat="1"] .search input,
:root[data-flat="1"] .lockbtn,
:root[data-flat="1"] .pad button{backdrop-filter:none;-webkit-backdrop-filter:none}

.saved{margin-left:auto;font-size:12px;font-weight:600;color:var(--ok)}

/* ---------------- telegram + журнал */
.hint{color:var(--muted);line-height:1.4}
.err{color:var(--danger)}
.state .err{margin-top:4px}
.tgmsg{padding:9px 12px;border-radius:10px;border:1px solid var(--border)}
.tgmsg.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 35%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.tgmsg.err{color:var(--danger);border-color:color-mix(in srgb,var(--danger) 40%,transparent);background:color-mix(in srgb,var(--danger) 10%,transparent)}
.spacer{flex:1}
.logfilter{margin:-4px 0 12px;gap:6px}
.chip{height:30px;padding:0 12px;border-radius:99px;border:1px solid var(--border);background:transparent;color:var(--muted);
  font:inherit;font-size:12.5px;cursor:pointer}
.chip.on{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.log{list-style:none;margin:0;padding:0;max-height:520px;overflow:auto}
.ev{display:grid;grid-template-columns:10px 112px 1fr auto;gap:10px;align-items:center;padding:8px 4px;border-top:1px solid var(--border);font-size:13px}
.ev:first-child{border-top:0}
.evdot{width:8px;height:8px;border-radius:50%;background:var(--muted)}
.ev.pin_fail .evdot,.ev.admin_fail .evdot{background:#f59e0b}
.ev.block .evdot{background:var(--danger)}
.ev.admin_login .evdot,.ev.pin_ok .evdot{background:var(--ok)}
.ev.security .evdot{background:var(--accent2)}
.ev.change .evdot{background:var(--accent)}
.ev.block .evtext{color:var(--danger);font-weight:600}
.evtime{color:var(--muted);font-variant-numeric:tabular-nums}
.evip{color:var(--muted);font-size:12px;text-align:right}
@media (max-width:640px){
  .ev{grid-template-columns:10px 1fr;row-gap:2px}
  .ev .evtime,.ev .evip{grid-column:2;text-align:left}
  .ev .evtext{grid-column:2;grid-row:1}
}

/* ================================================================ гоночные темы F1 */
:root[data-theme="f1_redbull"]{ --bg:#0a1030; --text:#eef1ff; --muted:#8e97c2; --accent:#e8002d; --accent2:#ffc906; --on-accent:#fff; }
:root[data-theme="f1_mercedes"]{ --bg:#0b0d0f; --text:#eef3f4; --muted:#8c979a; --accent:#00d2be; --accent2:#c0c4c8; --on-accent:#00201d; }
:root[data-theme="f1_ferrari"]{ --bg:#1a0405; --text:#fff1ef; --muted:#b58c88; --accent:#e10600; --accent2:#ffd400; --on-accent:#fff; }
:root[data-theme="f1_mclaren"]{ --bg:#121212; --text:#fff4ea; --muted:#a39587; --accent:#ff8000; --accent2:#47c7fc; --on-accent:#1a0d00; }
:root[data-theme="f1_aston"]{ --bg:#021f1b; --text:#eaf6f2; --muted:#7fa59b; --accent:#cedc00; --accent2:#00a19b; --on-accent:#0f1500; }
:root[data-theme="f1_williams"]{ --bg:#03122e; --text:#eaf3ff; --muted:#8197bd; --accent:#00a3e0; --accent2:#ffffff; --on-accent:#fff; }
:root[data-theme="f1_haas"]{ --bg:#0d0d0d; --text:#f2f2f2; --muted:#8f8f8f; --accent:#e6002b; --accent2:#b6babd; --on-accent:#fff; }
:root[data-theme^="f1_"]{ color-scheme:dark; --r:4px; --glow3:var(--accent);
  --border:rgba(255,255,255,.10); --border-h:var(--accent);
  --surface:color-mix(in srgb,var(--bg),#fff 5%); --surface-h:color-mix(in srgb,var(--bg),#fff 9%);
  --input:color-mix(in srgb,var(--bg),#fff 6%); --logo-bg:rgba(255,255,255,.95); --shadow:none; --letter-l:72%; }

/* фон: без цветных пятен */
:root[data-theme^="f1_"] body::before{display:none}

/* скоростные линии */
.speed,.livery,.finish{display:none}
:root[data-theme^="f1_"] .speed{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.speed i{position:absolute;top:var(--y);left:100%;width:var(--w);height:2px;border-radius:2px;background:var(--accent);
  opacity:0;animation:streak var(--d) linear var(--dl) infinite}
.speed i:nth-child(3n){background:var(--accent2);height:1px}
.speed i:nth-child(4n){background:var(--text);height:1px}
@keyframes streak{0%{transform:translateX(0);opacity:0}15%{opacity:.35}85%{opacity:.25}100%{transform:translateX(calc(-100vw - 100%));opacity:0}}

/* полосы ливреи в правом нижнем углу, над финишным флагом */
:root[data-theme^="f1_"] .livery{display:block;position:fixed;z-index:-1;pointer-events:none;bottom:-40px;right:120px;width:22px;height:300px;
  background:var(--accent);transform:rotate(28deg);transform-origin:bottom;box-shadow:32px 0 0 var(--accent2),64px 0 0 var(--accent),90px 0 0 -6px var(--accent2)}
:root[data-theme^="f1_"] .search input,:root[data-theme^="f1_"] .lockbtn{backdrop-filter:none;-webkit-backdrop-filter:none}

/* финишный флаг по нижнему краю */
:root[data-theme^="f1_"] .finish{display:block;position:fixed;left:0;right:0;bottom:0;height:12px;z-index:5;pointer-events:none;
  background:repeating-conic-gradient(var(--text) 0 25%,#000 0 50%) 0 0/12px 12px;opacity:.9}
:root[data-theme^="f1_"] .wrap{padding-bottom:72px}

/* заголовок — курсив, наклон, полосы под ним */
:root[data-theme^="f1_"] h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);
  font-style:italic;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;transform:skewX(-8deg);transform-origin:left bottom}
:root[data-theme^="f1_"] .head h1::after{content:"";display:block;width:84px;height:5px;margin-top:10px;background:var(--accent);
  box-shadow:94px 0 0 var(--accent2);transform:skewX(-30deg)}
:root[data-theme^="f1_"] .sub{font-style:italic}

/* часы — как табло хронометража */
:root[data-theme^="f1_"] .clock{background:var(--accent);color:var(--on-accent);padding:1px 9px;font-style:italic;font-family:ui-monospace,Menlo,Consolas,monospace;
  transform:skewX(-12deg);display:inline-block}

/* группы — курсив + клетчатый маркер */
:root[data-theme^="f1_"] .group-title{font-style:italic;color:var(--text);letter-spacing:.2em}
:root[data-theme^="f1_"] .group-title::before{content:"";flex:none;width:16px;height:16px;transform:skewX(-14deg);
  background:repeating-conic-gradient(var(--text) 0 25%,transparent 0 50%) 0 0/8px 8px}
:root[data-theme^="f1_"] .group-title::after{background:var(--accent);height:2px;opacity:.6}

/* плитки: срезанный угол, полоса слева, влетают справа, рывок при наведении */
:root[data-theme^="f1_"] .card{border-radius:3px;border-left:3px solid var(--accent);backdrop-filter:none;-webkit-backdrop-filter:none;
  clip-path:polygon(0 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%);
  transition:transform .12s cubic-bezier(.2,.9,.3,1.2),background .12s,border-color .12s;
  animation:dash .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 45ms)}
:root[data-theme^="f1_"] .card:hover,:root[data-theme^="f1_"] .card:focus-visible{transform:translateX(8px) skewX(-4deg);background:var(--surface-h);
  border-color:var(--border);border-left-color:var(--accent2)}
:root[data-theme^="f1_"] .card:active{transform:translateX(14px) skewX(-6deg)}
@keyframes dash{from{opacity:0;transform:translateX(60px) skewX(-12deg)}}
:root[data-theme^="f1_"] .logo{border-radius:4px}
:root[data-theme^="f1_"] .name{font-style:italic;font-weight:750}

/* поля и кнопки — острые углы */
:root[data-theme^="f1_"] .search input,:root[data-theme^="f1_"] .lockbtn,:root[data-theme^="f1_"] .btn,
:root[data-theme^="f1_"] .input,:root[data-theme^="f1_"] .panel,:root[data-theme^="f1_"] .chip{border-radius:3px}
:root[data-theme^="f1_"] .btn.primary{background:var(--accent);font-style:italic;text-transform:uppercase;letter-spacing:.04em}
:root[data-theme^="f1_"] .panel{backdrop-filter:none;-webkit-backdrop-filter:none;border-top:3px solid var(--accent)}

/* экран PIN */
:root[data-theme^="f1_"] .pinbox .lock,:root[data-theme^="f1_"] .login .lock{background:var(--accent);border-radius:4px;transform:skewX(-8deg);box-shadow:8px 0 0 var(--accent2)}
:root[data-theme^="f1_"] .pinbox h2{font-style:italic;text-transform:uppercase}
:root[data-theme^="f1_"] .dots i{border-radius:2px;transform:skewX(-14deg)}
:root[data-theme^="f1_"] .dots i.on{background:var(--accent);border-color:var(--accent);transform:skewX(-14deg) scale(1.15)}

@media (max-width:640px){
  :root[data-theme^="f1_"] .livery{right:-10px;height:200px;opacity:.5}
}

/* превью в выборе темы */
.tsep{grid-column:1/-1;font-size:12px;font-weight:650;color:var(--muted);margin-top:6px}
.theme.f1 .sw::after{content:"";position:absolute;top:-14px;right:22px;width:9px;height:90px;background:var(--a1);
  transform:rotate(28deg);box-shadow:13px 0 0 var(--a2)}
.theme.f1 .sw::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background:repeating-conic-gradient(#fff 0 25%,#000 0 50%) 0 0/6px 6px;opacity:.8}
.theme.f1 .sw b{display:none}

/* ---------------- статусы сервисов */
.lw{position:relative;flex:none;display:inline-flex}
.st{position:absolute;right:-4px;bottom:-4px;width:14px;height:14px;border-radius:50%;background:var(--muted);
  border:3px solid var(--bg);box-sizing:border-box}
.logo.sm + .st{width:12px;height:12px;border-width:2px;right:-3px;bottom:-3px}
.st.up{background:#22c55e}
.st.down{background:#ef4444;animation:stpulse 1.4s ease-in-out infinite}
.st.unknown,.st.skip{background:var(--muted);opacity:.7}
@keyframes stpulse{0%,100%{box-shadow:0 0 0 0 rgba(239,68,68,.55)}50%{box-shadow:0 0 0 6px rgba(239,68,68,0)}}
.card.is-down .logo{filter:grayscale(.7);opacity:.65}
.card.is-down .desc{color:#ef4444}
.svcsum{font-weight:600;color:#22c55e}
.svcsum.bad{color:#ef4444}
.svcsum:empty{display:none}
.sttext{font-size:12px;margin-top:2px;color:var(--muted)}
.sttext.up{color:#22c55e}
.sttext.down{color:#ef4444}
.state.bad{background:color-mix(in srgb,var(--danger) 12%,transparent);border-color:color-mix(in srgb,var(--danger) 40%,transparent);color:var(--danger)}
.ev.svc_down .evdot{background:#ef4444}
.ev.svc_up .evdot{background:#22c55e}
.ev.svc_down .evtext{color:#ef4444}
@media (max-width:640px){
  .card .lw{margin:0 auto}
}

/* ---------------- «Часто используемые» */
.top5{margin:6px 0 10px;text-align:center}
.top5-title{font-size:12px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.top5-row{display:flex;justify-content:center;gap:14px;flex-wrap:wrap}
.fav{position:relative;width:132px;display:flex;flex-direction:column;align-items:center;gap:10px;padding:18px 10px 14px;
  border-radius:var(--r);background:var(--surface);border:1px solid var(--border);text-decoration:none;color:inherit;
  transition:transform .18s ease,background .18s,border-color .18s,box-shadow .18s;animation:rise .4s ease both;animation-delay:calc(var(--i,0) * 50ms)}
.fav:hover,.fav:focus-visible{transform:translateY(-4px);background:var(--surface-h);border-color:var(--border-h);box-shadow:var(--shadow);outline:none}
.fav .logo{width:58px;height:58px;border-radius:16px;font-size:24px}
.fav .fname{font-size:13.5px;font-weight:620;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fav .rank{position:absolute;top:7px;left:9px;font-size:11px;font-weight:700;color:var(--muted);opacity:.7}
.fav:first-child .rank{color:var(--accent);opacity:1}
.fav.is-down .logo{filter:grayscale(.7);opacity:.65}
.hits{font-size:12px;color:var(--muted);margin-top:2px}
.btn.wide.sm{width:100%}
@media (max-width:640px){
  .top5-row{gap:8px;flex-wrap:nowrap}
  .fav{width:auto;flex:1 1 0;min-width:0;max-width:96px;padding:12px 4px 10px;gap:7px}
  .fav .logo{width:46px;height:46px;border-radius:13px;font-size:19px}
  .fav .fname{font-size:11.5px}
  .fav .rank{top:4px;left:6px;font-size:10px}
}
/* гоночные темы */
:root[data-theme^="f1_"] .fav{border-radius:3px;border-bottom:3px solid var(--accent);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  animation:dash .45s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 60ms)}
:root[data-theme^="f1_"] .fav:hover{transform:translateY(-4px) skewX(-4deg);border-bottom-color:var(--accent2)}
:root[data-theme^="f1_"] .fav .fname{font-style:italic;font-weight:750}
:root[data-theme^="f1_"] .fav .rank{font-style:italic;font-size:13px;color:var(--text)}
:root[data-theme^="f1_"] .fav:first-child .rank{color:var(--accent)}
:root[data-theme^="f1_"] .fav .logo{border-radius:4px}
:root[data-theme^="f1_"] .top5-title{font-style:italic;color:var(--text);letter-spacing:.2em}

/* ================================================================ игровые темы */
:root[data-theme^="game_"]{ color-scheme:dark; --shadow:none; --letter-l:72%; --logo-bg:rgba(255,255,255,.94);
  --serif:Georgia,"Noto Serif","PT Serif","Times New Roman",serif; }
:root[data-theme^="game_"] body::before{display:none}
:root[data-theme^="game_"] .speed{display:block;position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
:root[data-theme^="game_"] .livery,:root[data-theme^="game_"] .finish{display:block;pointer-events:none}
:root[data-theme^="game_"] h1{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:var(--text);font-family:var(--serif);font-weight:700}
:root[data-theme^="game_"] .card,:root[data-theme^="game_"] .fav,:root[data-theme^="game_"] .panel,
:root[data-theme^="game_"] .search input,:root[data-theme^="game_"] .lockbtn{backdrop-filter:none;-webkit-backdrop-filter:none}
:root[data-theme^="game_"] .name,:root[data-theme^="game_"] .fname,:root[data-theme^="game_"] .group-title,
:root[data-theme^="game_"] .top5-title,:root[data-theme^="game_"] .pinbox h2{font-family:var(--serif)}
:root[data-theme^="game_"] .wrap{padding-bottom:80px}

/* ---------------- Северная сага: камень, огонь, бронза */
:root[data-theme="game_norse"]{ --bg:#0f0d0c; --surface:#1a1715; --surface-h:#221d1a; --border:#3a312a; --border-h:#c1121f;
  --text:#ece6dc; --muted:#9c8f80; --accent:#c1121f; --accent2:#c9a25a; --on-accent:#fff; --input:#161311; --r:4px; }
/* искры снизу вверх и редкие снежинки */
:root[data-theme="game_norse"] .speed i{top:auto;bottom:-12px;left:var(--y);width:4px;height:4px;border-radius:50%;
  background:#ff7a1a;box-shadow:0 0 8px 2px rgba(255,90,20,.55);opacity:0;
  animation:ember calc(var(--d) * 4.5) linear calc(var(--dl) * 3) infinite}
:root[data-theme="game_norse"] .speed i:nth-child(3n){background:#ffb347;width:3px;height:3px}
:root[data-theme="game_norse"] .speed i:nth-child(5n){top:-12px;bottom:auto;background:#dcefff;box-shadow:0 0 6px rgba(200,230,255,.6);
  width:3px;height:3px;animation:snow calc(var(--d) * 8) linear calc(var(--dl) * 4) infinite}
@keyframes ember{0%{transform:translate(0,0);opacity:0}8%{opacity:.95}45%{transform:translate(28px,-45vh);opacity:.8}
  70%{transform:translate(-12px,-70vh);opacity:.5}100%{transform:translate(18px,-105vh);opacity:0}}
@keyframes snow{0%{transform:translate(0,0);opacity:0}10%{opacity:.8}100%{transform:translate(-40px,105vh);opacity:0}}
/* резной орнамент по низу */
:root[data-theme="game_norse"] .finish{position:fixed;left:0;right:0;bottom:0;height:18px;z-index:5;background:#0f0d0c;
  border-top:1px solid #3a312a;
  background-image:linear-gradient(135deg,var(--accent2) 25%,transparent 25%),linear-gradient(225deg,var(--accent2) 25%,transparent 25%);
  background-size:18px 18px;background-position:0 0,0 0;opacity:.55}
:root[data-theme="game_norse"] h1{text-transform:uppercase;letter-spacing:.14em;font-size:clamp(26px,4vw,40px)}
:root[data-theme="game_norse"] .head h1::after{content:"";display:block;width:220px;max-width:70vw;height:2px;margin-top:12px;
  background:var(--accent2);opacity:.7;box-shadow:0 0 0 0 transparent}
:root[data-theme="game_norse"] .head h1::before{content:"";position:absolute;width:9px;height:9px;margin-top:calc(1.1em + 8px);margin-left:105px;
  background:var(--accent);transform:rotate(45deg);outline:3px solid var(--bg)}
:root[data-theme="game_norse"] .head{position:relative}
:root[data-theme="game_norse"] .sub{font-family:var(--serif);font-style:italic}
:root[data-theme="game_norse"] .clock{border:1px solid var(--accent2);color:var(--accent2);padding:0 8px;border-radius:2px;font-family:var(--serif)}
:root[data-theme="game_norse"] .group-title{color:var(--accent2);letter-spacing:.22em}
:root[data-theme="game_norse"] .group-title::before{content:"";flex:none;width:8px;height:8px;background:var(--accent);transform:rotate(45deg)}
:root[data-theme="game_norse"] .group-title::after{background:#3a312a;height:1px}
/* каменные плитки с бронзовыми уголками */
:root[data-theme="game_norse"] .card,:root[data-theme="game_norse"] .fav{border-radius:3px;background:var(--surface);
  box-shadow:inset 0 0 0 3px #12100e,inset 0 0 0 4px rgba(201,162,90,.18)}
:root[data-theme="game_norse"] .card::before,:root[data-theme="game_norse"] .card::after,
:root[data-theme="game_norse"] .fav::before,:root[data-theme="game_norse"] .fav::after{content:"";position:absolute;width:10px;height:10px;pointer-events:none;transition:.2s}
:root[data-theme="game_norse"] .card::before,:root[data-theme="game_norse"] .fav::before{top:5px;left:5px;border-top:2px solid var(--accent2);border-left:2px solid var(--accent2)}
:root[data-theme="game_norse"] .card::after,:root[data-theme="game_norse"] .fav::after{bottom:5px;right:5px;border-bottom:2px solid var(--accent2);border-right:2px solid var(--accent2)}
:root[data-theme="game_norse"] .card:hover,:root[data-theme="game_norse"] .fav:hover{transform:translateY(-3px);border-color:var(--accent);
  box-shadow:inset 0 0 0 3px #12100e,inset 0 0 0 4px rgba(193,18,31,.5),0 10px 28px -12px rgba(193,18,31,.6)}
:root[data-theme="game_norse"] .card:hover::before,:root[data-theme="game_norse"] .card:hover::after,
:root[data-theme="game_norse"] .fav:hover::before,:root[data-theme="game_norse"] .fav:hover::after{border-color:var(--accent);width:16px;height:16px}
:root[data-theme="game_norse"] .name,:root[data-theme="game_norse"] .fname{letter-spacing:.03em}
:root[data-theme="game_norse"] .logo{border-radius:4px}
:root[data-theme="game_norse"] .panel{border-radius:3px;border-top:2px solid var(--accent2)}
:root[data-theme="game_norse"] .btn,:root[data-theme="game_norse"] .input,:root[data-theme="game_norse"] .search input,
:root[data-theme="game_norse"] .lockbtn,:root[data-theme="game_norse"] .chip{border-radius:3px}
:root[data-theme="game_norse"] .btn.primary{background:var(--accent);font-family:var(--serif);letter-spacing:.06em;text-transform:uppercase}
:root[data-theme="game_norse"] .top5-title{color:var(--accent2);letter-spacing:.24em}
:root[data-theme="game_norse"] .fav:first-child .rank{color:var(--accent2)}
:root[data-theme="game_norse"] .pinbox .lock,:root[data-theme="game_norse"] .login .lock{background:var(--accent);border-radius:4px;
  box-shadow:0 0 0 3px var(--bg),0 0 0 4px var(--accent2)}
:root[data-theme="game_norse"] .pinbox h2{text-transform:uppercase;letter-spacing:.14em}
:root[data-theme="game_norse"] .dots i.on{background:var(--accent);border-color:var(--accent);box-shadow:0 0 10px rgba(193,18,31,.8)}

/* ---------------- Путь самурая: тушь, алое солнце, листья на ветру */
:root[data-theme="game_samurai"]{ --bg:#121015; --surface:#1b181d; --surface-h:#231f25; --border:rgba(212,160,23,.20); --border-h:var(--accent);
  --text:#f2ece0; --muted:#a39c8f; --accent:#c8102e; --accent2:#d4a017; --on-accent:#fff; --input:#18151a; --r:10px; }
/* солнце, разрезанное облаками */
:root[data-theme="game_samurai"] .livery{position:fixed;z-index:-1;top:-140px;right:-90px;width:440px;height:440px;border-radius:50%;
  background:repeating-linear-gradient(to bottom,var(--accent) 0 46px,transparent 46px 54px);opacity:.55}
/* листья и лепестки */
:root[data-theme="game_samurai"] .speed i{top:-24px;left:var(--y);width:13px;height:8px;border-radius:0 100% 0 100%;background:var(--accent);
  opacity:0;animation:leaf calc(var(--d) * 6) linear calc(var(--dl) * 4) infinite}
:root[data-theme="game_samurai"] .speed i:nth-child(3n){background:var(--accent2);width:10px;height:6px}
:root[data-theme="game_samurai"] .speed i:nth-child(4n){background:#f2ece0;width:8px;height:8px;border-radius:50% 0 50% 50%}
@keyframes leaf{0%{transform:translate(0,0) rotate(0);opacity:0}8%{opacity:.85}
  35%{transform:translate(9vw,32vh) rotate(160deg)}60%{transform:translate(20vw,58vh) rotate(300deg);opacity:.75}
  100%{transform:translate(34vw,106vh) rotate(560deg);opacity:0}}
/* узор волн сэйгайха по низу */
:root[data-theme="game_samurai"] .finish{position:fixed;left:0;right:0;bottom:0;height:26px;z-index:5;background-color:var(--bg);
  background-image:radial-gradient(circle at 50% 100%,transparent 0 5px,var(--accent2) 5px 6.5px,transparent 6.5px 9.5px,var(--accent2) 9.5px 11px,transparent 11px 13px);
  background-size:26px 13px;opacity:.5}
:root[data-theme="game_samurai"] h1{letter-spacing:.06em;font-size:clamp(28px,4.4vw,44px)}
/* мазок кисти под заголовком */
:root[data-theme="game_samurai"] .head h1::after{content:"";display:block;width:170px;max-width:60vw;height:9px;margin-top:10px;background:var(--accent);
  border-radius:60% 15% 70% 10% / 80% 30% 90% 40%;transform:rotate(-1.5deg);opacity:.9}
:root[data-theme="game_samurai"] .sub{font-family:var(--serif);font-style:italic;letter-spacing:.03em}
:root[data-theme="game_samurai"] .clock{background:var(--accent);color:#fff;padding:1px 8px;border-radius:3px;font-family:var(--serif)}
:root[data-theme="game_samurai"] .group-title{color:var(--text);letter-spacing:.24em}
:root[data-theme="game_samurai"] .group-title::before{content:"";flex:none;width:10px;height:10px;border-radius:50%;background:var(--accent)}
:root[data-theme="game_samurai"] .group-title::after{background:var(--border);height:1px}
:root[data-theme="game_samurai"] .card,:root[data-theme="game_samurai"] .fav{background:var(--surface);border-color:var(--border);
  transition:transform .25s cubic-bezier(.2,.8,.2,1),background .2s,border-color .2s}
:root[data-theme="game_samurai"] .card{border-left:3px solid transparent}
:root[data-theme="game_samurai"] .card:hover,:root[data-theme="game_samurai"] .fav:hover{transform:translate(5px,-2px);background:var(--surface-h);
  border-color:rgba(212,160,23,.45)}
:root[data-theme="game_samurai"] .card:hover{border-left-color:var(--accent)}
:root[data-theme="game_samurai"] .name,:root[data-theme="game_samurai"] .fname{letter-spacing:.02em}
:root[data-theme="game_samurai"] .btn.primary{background:var(--accent);font-family:var(--serif);letter-spacing:.05em}
:root[data-theme="game_samurai"] .panel{border-top:2px solid var(--accent)}
:root[data-theme="game_samurai"] .top5-title{letter-spacing:.26em;color:var(--accent2)}
:root[data-theme="game_samurai"] .fav:first-child .rank{color:var(--accent)}
:root[data-theme="game_samurai"] .pinbox .lock,:root[data-theme="game_samurai"] .login .lock{background:var(--accent);border-radius:50%}
:root[data-theme="game_samurai"] .pad button{border-color:rgba(212,160,23,.3)}
:root[data-theme="game_samurai"] .dots i.on{background:var(--accent);border-color:var(--accent)}
@media (max-width:640px){
  :root[data-theme="game_samurai"] .livery{width:260px;height:260px;top:-90px;right:-70px;opacity:.4;
    background:repeating-linear-gradient(to bottom,var(--accent) 0 28px,transparent 28px 33px)}
}

/* превью игровых тем в админке */
.theme.game .sw b{display:none}
.theme.game_norse .sw::after{content:"";position:absolute;left:18px;bottom:10px;width:4px;height:4px;border-radius:50%;background:#ff7a1a;
  box-shadow:14px -12px 0 #ffb347,30px -4px 0 #ff7a1a,46px -16px 0 #ff7a1a,62px -6px 0 #dcefff}
.theme.game_norse .sw::before{content:"";position:absolute;left:0;right:0;bottom:0;height:6px;
  background-image:linear-gradient(135deg,#c9a25a 25%,transparent 25%),linear-gradient(225deg,#c9a25a 25%,transparent 25%);background-size:6px 6px;opacity:.7}
.theme.game_samurai .sw::after{content:"";position:absolute;top:-14px;right:-10px;width:46px;height:46px;border-radius:50%;
  background:repeating-linear-gradient(to bottom,#c8102e 0 8px,transparent 8px 10px);opacity:.85}
.theme.game_samurai .sw::before{content:"";position:absolute;left:30px;bottom:12px;width:9px;height:6px;border-radius:0 100% 0 100%;background:#c8102e;
  box-shadow:18px -8px 0 #d4a017,36px 2px 0 #f2ece0;transform:rotate(25deg)}
:root[data-theme="game_norse"] .fav .rank{top:11px;left:20px}

/* ---------------- гонка болидов (гоночные темы) */
.race{position:fixed;left:0;right:0;bottom:12px;height:86px;z-index:4;pointer-events:none;overflow:hidden;
  background:color-mix(in srgb,var(--bg),#000 40%);border-top:3px solid transparent;
  border-image:repeating-linear-gradient(90deg,var(--accent) 0 18px,#fff 18px 36px) 3}
body.racing .livery{display:none!important}
.race[hidden]{display:none}
.race .kerb{position:absolute;left:0;right:0;bottom:0;height:3px;opacity:.9;
  background:repeating-linear-gradient(90deg,var(--accent) 0 18px,#fff 18px 36px)}
.race .fline{position:absolute;bottom:0;top:4px;left:88%;width:8px;opacity:.9;
  background:repeating-conic-gradient(#fff 0 25%,#000 0 50%) 0 0/8px 8px}
.car{position:absolute;left:0;width:150px;height:32px;transform-origin:left bottom;will-change:transform}
.car svg{display:block;width:100%;height:100%;overflow:visible}
.car .b{fill:var(--c1)}
.car .a{fill:var(--c2)}
.car .d{fill:#111}
.car .h{fill:var(--c3)}
.car .tr{fill:var(--c2);opacity:.55}
.car .spin{animation:wheel .2s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes wheel{to{transform:rotate(360deg)}}
.car .p1{position:absolute;left:38%;bottom:100%;margin-bottom:4px;padding:2px 7px;border-radius:2px;
  font:italic 800 13px/1.1 ui-sans-serif,system-ui,sans-serif;letter-spacing:.04em;color:#111;background:#ffd400;
  opacity:0;transform:translateY(6px) skewX(-10deg);transition:opacity .25s,transform .25s;white-space:nowrap}
.car.win .p1{opacity:1;transform:translateY(0) skewX(-10deg)}
:root[data-theme^="f1_"] .wrap{padding-bottom:130px}
:root[data-theme^="f1_"] .livery{bottom:40px}
@media (max-width:640px){
  .race{height:62px}
  .car{width:100px;height:21px}
  .car .p1{font-size:10px}
}
/* фоновые слои не должны расширять страницу на телефонах */
.speed,.race,.finish,.livery{contain:layout paint}
html,body{overflow-x:clip}

/* ---------------- iOS: без зума по двойному тапу и при фокусе на поле */
html,body{touch-action:pan-x pan-y;-webkit-text-size-adjust:100%}
a,button,label,input,select,.pad button,.card,.fav{touch-action:pan-x pan-y}
.pad button{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
@media (max-width:640px){
  .input,select.input,.search input,input[type=password],input[type=number],input[type=time]{font-size:16px}
}