/* OVYEL Redesign — stage 1: tokens, background, grouped header, home page, catalog, footer, mobile dock.
   Visual layer only: loaded last, no markup or behaviour changes. Monochrome (white/gray/black) only. */

/* ---------- Tokens: neutral grays, both themes ---------- */
html:root{
  --bg:#ececec;--bg2:#e2e2e2;
  --surface:rgba(255,255,255,.62);--surface-strong:rgba(255,255,255,.86);
  --text:#0b0b0b;--muted:#6b6b6b;--line:rgba(0,0,0,.09);
  --accent:#0b0b0b;--accent2:#7a7a7a;--good:#3a3a3a;
  --shadow:0 2px 6px rgba(0,0,0,.05),0 24px 60px -24px rgba(0,0,0,.28);
  --ios-glass:rgba(255,255,255,.55);--ios-glass-strong:rgba(255,255,255,.8);--ios-edge:rgba(0,0,0,.08);
  --ios-highlight:rgba(255,255,255,.9);--ios-shadow:0 18px 50px -20px rgba(0,0,0,.25);--ios-deep-shadow:0 30px 80px -30px rgba(0,0,0,.3);
  --ov-card:#ffffff;--ov-card-2:#f4f4f4;--ov-line-2:rgba(0,0,0,.16);--ov-faint:#9a9a9a;
  --ov-inv:#0b0b0b;--ov-inv-ink:#f5f5f5;--ov-inv-line:transparent;--ov-emph:#0d0d0d;--ov-emph-ink:#f5f5f5;--ov-emph-line:transparent;
  --ov-blob-a:#c4c4c4;--ov-blob-b:#9a9a9a;
  --ov-serif:"Iowan Old Style","Palatino Linotype",Georgia,"Times New Roman",serif;
  --ov-mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}
html[data-theme="dark"]:root{
  --bg:#0b0b0b;--bg2:#141414;
  --surface:rgba(30,30,30,.6);--surface-strong:rgba(26,26,26,.9);
  --text:#f2f2f2;--muted:#8f8f8f;--line:rgba(255,255,255,.08);
  --accent:#f2f2f2;--accent2:#9a9a9a;--good:#d0d0d0;
  --shadow:0 2px 6px rgba(0,0,0,.5),0 30px 70px -24px rgba(0,0,0,.8);
  --ios-glass:rgba(38,38,38,.45);--ios-glass-strong:rgba(30,30,30,.72);--ios-edge:rgba(255,255,255,.1);
  --ios-highlight:rgba(255,255,255,.12);--ios-shadow:0 20px 56px -20px rgba(0,0,0,.7);--ios-deep-shadow:0 34px 90px -30px rgba(0,0,0,.8);
  --ov-card:#151515;--ov-card-2:#1d1d1d;--ov-line-2:rgba(255,255,255,.16);--ov-faint:#5e5e5e;
  --ov-inv:#303030;--ov-inv-ink:#f4f4f4;--ov-inv-line:rgba(255,255,255,.16);--ov-emph:#1d1d1d;--ov-emph-ink:#f1f1f1;--ov-emph-line:rgba(255,255,255,.1);
  --ov-blob-a:#383838;--ov-blob-b:#4e4e4e;
}

/* ---------- Background: calm gray depth instead of decorative shapes ---------- */
html body{background:var(--bg)!important;color:var(--text)}
html body .ios-wallpaper,html body .ambient{display:none!important}
html body::before{content:none!important}
html body::after{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}

/* Decorative layer (added by ovyel-redesign.js) */
html:root{--ovr-dot:rgba(0,0,0,.14);--ovr-ring:rgba(0,0,0,.13);--ovr-blob-1:#c2c2c2;--ovr-blob-2:#9d9d9d;--ovr-blob-3:#d4d4d4}
html[data-theme="dark"]:root{--ovr-dot:rgba(255,255,255,.12);--ovr-ring:rgba(255,255,255,.12);--ovr-blob-1:#353535;--ovr-blob-2:#444444;--ovr-blob-3:#2b2b2b}
html body .ovr-bg{position:fixed;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
html body .ovr-bg i{position:absolute;display:block}
html body .ovr-bg-grid{inset:0;background-image:radial-gradient(var(--ovr-dot) 1.1px,transparent 1.3px);background-size:26px 26px;
  mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%);-webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 0%,#000 0%,rgba(0,0,0,.55) 45%,transparent 80%)}
html body .ovr-bg-blob{border-radius:50%;filter:blur(90px);opacity:.7;will-change:transform}
html body .ovr-bg-blob.b1{width:640px;height:640px;background:var(--ovr-blob-1);top:-220px;right:-140px;animation:ovr-drift 34s ease-in-out infinite}
html body .ovr-bg-blob.b2{width:520px;height:520px;background:var(--ovr-blob-2);top:42%;left:-220px;opacity:.45;animation:ovr-drift 40s ease-in-out infinite reverse}
html body .ovr-bg-blob.b3{width:560px;height:560px;background:var(--ovr-blob-3);bottom:-260px;right:18%;animation:ovr-drift 46s ease-in-out infinite}
@keyframes ovr-drift{50%{transform:translate(50px,70px) scale(1.08)}}
html body .ovr-bg-rings{border-radius:50%;animation:ovr-turn 160s linear infinite}
html body .ovr-bg-rings b{position:absolute;border-radius:50%;border:1.5px solid var(--ovr-ring)}
html body .ovr-bg-rings.r1{width:900px;height:900px;top:-380px;right:-300px}
html body .ovr-bg-rings.r1 b:nth-child(1){inset:0;border-style:dashed}
html body .ovr-bg-rings.r1 b:nth-child(2){inset:110px}
html body .ovr-bg-rings.r1 b:nth-child(3){inset:230px}
html body .ovr-bg-rings.r2{width:620px;height:620px;bottom:-300px;left:-200px;animation-direction:reverse;animation-duration:200s}
html body .ovr-bg-rings.r2 b:nth-child(1){inset:0}
html body .ovr-bg-rings.r2 b:nth-child(2){inset:90px;border-style:dashed}
@keyframes ovr-turn{to{transform:rotate(360deg)}}
html body .ovr-bg-cross{width:18px;height:18px;opacity:1;
  background:linear-gradient(var(--ovr-ring),var(--ovr-ring)) center/1px 100% no-repeat,linear-gradient(var(--ovr-ring),var(--ovr-ring)) center/100% 1px no-repeat;filter:contrast(2)}
html body .ovr-bg-cross.c1{top:22%;left:7%}html body .ovr-bg-cross.c2{top:64%;right:9%}html body .ovr-bg-cross.c3{top:88%;left:46%}
@media (max-width:760px){html body .ovr-bg-rings.r1{width:560px;height:560px;top:-240px;right:-260px}html body .ovr-bg-rings.r2{display:none}html body .ovr-bg-blob{filter:blur(70px)}}
@media (prefers-reduced-motion:reduce){html body .ovr-bg-blob,html body .ovr-bg-rings{animation:none!important}}

/* ---------- No glare: remove glossy highlight layers ---------- */
html body .ios-interactive::after{background-image:none!important}
html body #page-home .hero-info-card::before{content:none!important}

/* ---------- Header ---------- */
html body header.topbar{background:var(--surface-strong)!important;backdrop-filter:blur(22px) saturate(160%)!important;-webkit-backdrop-filter:blur(22px) saturate(160%)!important;
  border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:var(--shadow)!important;padding:8px!important;gap:10px!important}
html body header.topbar .brand{gap:10px;font-weight:700;letter-spacing:.22em;font-size:13px}
html body header.topbar .brand-mark{width:34px!important;height:34px!important;border-radius:11px!important;background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;display:grid!important;place-items:center!important;font-weight:800}
html body .main-nav{flex:1 1 auto;min-width:0;overflow-x:auto!important;scrollbar-width:none;gap:2px!important;
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
html body .main-nav::-webkit-scrollbar{display:none}
html body .main-nav .nav-btn{flex:0 0 auto!important;padding:9px 14px!important;border-radius:14px!important;font-size:14px!important;color:var(--muted)!important;background:transparent!important;border:0!important;box-shadow:none!important;white-space:nowrap}
html body .main-nav .nav-btn:hover{color:var(--text)!important;background:var(--line)!important}
html body .main-nav .nav-btn.active{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important}
html body .main-nav .nav-btn span{font-size:10px!important;padding:1px 6px!important;border-radius:999px!important;border:1px solid currentColor!important;background:transparent!important;color:inherit!important;opacity:.6}
html body .header-actions{gap:6px!important;flex:none}
html body .header-actions .icon-btn{width:40px!important;height:40px!important;border-radius:14px!important;border:1px solid var(--line)!important;background:transparent!important;color:var(--muted)!important;box-shadow:none!important}
html body .header-actions .icon-btn:hover{color:var(--text)!important;border-color:var(--ov-line-2)!important}
html body .auth-btn{border-radius:14px!important;border:1px solid var(--line)!important;background:transparent!important;color:var(--text)!important;box-shadow:none!important}
html body .auth-btn.primary{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border-color:transparent!important}

/* ---------- Header: grouped navigation ---------- */
html body header.topbar nav.main-nav{display:flex!important;justify-self:stretch!important;width:100%!important;margin:0!important;max-width:none!important;justify-content:stretch!important;gap:4px!important;mask-image:none!important;-webkit-mask-image:none!important}
html body header.topbar nav.main-nav > .nav-btn:not(.ovr-sub):not(.active){border:1px solid var(--line)!important}
html body header.topbar nav.main-nav > .nav-btn:not(.ovr-sub):not(.active):hover{border-color:var(--ov-line-2)!important}
html body header.topbar nav.main-nav > .nav-btn:not(.ovr-sub){flex:1 1 auto!important;min-width:max-content!important;width:auto!important;justify-content:center!important;text-align:center!important}
html body .main-nav .nav-btn.ovr-sub{display:none!important}
html body .main-nav .nav-btn .ovr-badge,html body .main-nav .nav-btn #games-count-pill{margin-left:6px}

/* Header layout: brand | menu (takes the rest, scrolls if needed) | actions (never clipped) */
html body header.topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;flex-wrap:nowrap!important}
html body header.topbar::after,html body header.topbar::before{content:none!important;background:none!important}
html body header.topbar > .brand{min-width:0}
html body header.topbar nav.main-nav{min-width:0!important;width:auto!important;overflow-x:auto!important;overflow-y:hidden!important}
html body header.topbar .header-actions,html body header.topbar .auth-actions{flex:0 0 auto!important;min-width:max-content!important;flex-wrap:nowrap!important}
html body header.topbar .auth-btn{white-space:nowrap!important}

@media (max-width:980px){html body header.topbar{grid-template-columns:auto minmax(0,1fr)!important}html body header.topbar .header-actions{justify-self:end}}

/* ---------- Section sub-navigation (Работа / Учёба) ---------- */
html body .ovr-subnav{display:flex;justify-content:flex-end;padding-top:22px;margin-bottom:-6px;position:relative;z-index:5}
html body .ovr-subnav-inner{display:inline-flex;gap:4px;padding:5px;border-radius:16px;background:var(--surface-strong);border:1px solid var(--line);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);box-shadow:var(--shadow);max-width:100%;overflow-x:auto;scrollbar-width:none}
html body .ovr-subnav-inner::-webkit-scrollbar{display:none}
html body .ovr-subnav button{padding:9px 16px;border-radius:12px;font-size:14px;color:var(--muted);background:transparent;border:0;white-space:nowrap;cursor:pointer}
html body .ovr-subnav button:hover{color:var(--text)}
html body .ovr-subnav button[aria-current="page"]{background:var(--ov-inv);color:var(--ov-inv-ink)}
html body #page-work > .ovr-subnav{width:min(1240px,calc(100% - 24px));margin:0 auto 12px}

/* ---------- Home: hero ---------- */
html body #page-home .ovr-hero{display:grid;grid-template-columns:minmax(0,1.18fr) minmax(0,.82fr);gap:44px;align-items:center;padding:70px 0 34px}
html body #page-home .ovr-hero-copy{min-width:0}
html body #page-home .ovr-hero h1{font-size:clamp(44px,5.7vw,86px)!important;max-width:none!important;line-height:.92!important;letter-spacing:-.055em!important;font-weight:800!important;margin:0 0 22px!important}
html body #page-home .ovr-hero h1 em{font-family:var(--ov-serif);font-weight:400;font-style:italic;letter-spacing:-.03em}
html body #page-home .ovr-hero h1 .ovr-outline{color:transparent;-webkit-text-stroke:1.5px var(--text)}
html body #page-home .ovr-hero .accent-dot{color:var(--text)!important}
html body #page-home .hero-sub{font-size:18px!important;color:var(--muted)!important;max-width:470px;margin:0 0 26px!important}
html body #page-home .hero-search{display:flex!important;align-items:center;gap:12px;max-width:560px;border-radius:22px!important;background:var(--surface-strong)!important;
  border:1px solid var(--line)!important;box-shadow:var(--shadow)!important;padding:8px 10px 8px 20px!important;min-height:60px;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important}
html body #page-home .hero-search > span{color:var(--muted)!important;font-size:18px}
html body #page-home .hero-search input{flex:1;min-width:0;font-size:17px!important;color:var(--text)!important;background:transparent!important;border:0!important;outline:none}
html body #page-home .hero-search kbd{font-family:var(--ov-mono)!important;font-size:11px!important;padding:3px 7px!important;border:1px solid var(--ov-line-2)!important;border-radius:6px!important;background:transparent!important;color:var(--muted)!important}
html body #page-home .mode-switcher{display:flex!important;flex-wrap:wrap;gap:8px!important;margin-top:18px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important;backdrop-filter:none!important}
html body #page-home .mode-switcher-label{display:none!important}
html body #page-home .mode-pill{padding:8px 14px!important;border-radius:12px!important;font-size:13px!important;border:1px solid var(--line)!important;background:var(--surface)!important;color:var(--muted)!important;box-shadow:none!important;backdrop-filter:blur(10px)!important}
html body #page-home .mode-pill:hover{color:var(--text)!important}
html body #page-home .mode-pill.active{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border-color:transparent!important}
html body #page-home .mode-inline-help{max-width:560px;margin-top:14px!important;border-radius:18px!important;background:var(--ov-card)!important;border:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body #page-home .stats-row{display:grid!important;grid-template-columns:repeat(3,max-content);column-gap:44px!important;margin-top:30px!important;padding-top:22px!important;border-top:1px solid var(--line);max-width:560px}
html body #page-home .stats-row strong{display:block;font-size:32px!important;letter-spacing:-.04em!important;font-weight:700!important;line-height:1.1;font-variant-numeric:tabular-nums}
html body #page-home .stats-row span{font-size:12px!important;color:var(--muted)!important}

/* Widgets */
html body #page-home .hero-visual{height:auto!important;min-height:0!important;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:56px 0 0!important;display:block!important;border-radius:0!important}
html body #page-home .hero-visual::before,html body #page-home .hero-visual::after{content:none!important}
html body #page-home .hero-widget-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:16px!important;height:auto!important}
html body #page-home .hero-info-card{min-height:168px!important;border-radius:24px!important;padding:20px!important;background:var(--surface)!important;
  backdrop-filter:blur(22px) saturate(160%)!important;-webkit-backdrop-filter:blur(22px) saturate(160%)!important;border:1px solid var(--line)!important;
  box-shadow:var(--shadow),inset 0 1px 0 var(--ios-highlight)!important;animation:ovr-bob 8s ease-in-out infinite}
html body #page-home .hero-info-card:nth-child(2){animation-delay:-2s}
html body #page-home .hero-info-card:nth-child(3){animation-delay:-4s}
html body #page-home .hero-info-card:nth-child(4){animation-delay:-6s}
@keyframes ovr-bob{50%{transform:translateY(-6px)}}
html body #page-home .hero-info-card:hover,html body #page-home .hero-info-card:focus-within{animation-play-state:paused}
html body #page-home .hero-info-card::before,html body #page-home .hero-info-card::after{content:none!important}
html body #page-home .hero-info-card small{font-size:11px!important;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)!important;font-weight:600}
html body #page-home .time-card strong,html body #page-home .weather-card strong,html body #page-home .focus-card strong{font-weight:200!important;letter-spacing:-.05em!important;font-variant-numeric:tabular-nums;color:var(--text)!important}
html body #page-home .time-card strong{font-size:52px!important}
html body #page-home .weather-card strong{font-size:48px!important}
html body #page-home .focus-card strong{font-size:40px!important}
html body #page-home #focus-timer-toggle{border-radius:12px!important;background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border:0!important;padding:8px 14px!important;box-shadow:none!important}
html body #page-home .currency-line{border-radius:12px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;box-shadow:none!important}

/* Marquee */
html body #page-home .ovr-marquee{overflow:hidden;border-block:1px solid var(--line);padding:18px 0;margin:10px auto 0;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
html body #page-home .ovr-track{display:flex;width:max-content;animation:ovr-slide 48s linear infinite}
html body #page-home .ovr-track span{display:flex;align-items:center;gap:34px;padding-right:34px;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--ov-faint);white-space:nowrap}
html body #page-home .ovr-track span::after{content:"✦";font-size:11px;color:var(--ov-line-2)}
@keyframes ovr-slide{to{transform:translateX(-50%)}}

/* Section heads */
html body #page-home .ovr-shead,html body #page-home #catalog-section .section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin:64px 0 22px!important}
html body #page-home .section-head h2{font-size:clamp(30px,4vw,48px)!important;letter-spacing:-.045em!important;line-height:1!important;font-weight:800!important;margin:0!important}
html body #page-home .section-head h2 em{font-family:var(--ov-serif);font-weight:400;font-style:italic}
html body #page-home .ovr-more{font-size:14px;color:var(--muted);text-decoration:none}
html body #page-home .ovr-more:hover{color:var(--text)}

/* Bento */
html body #page-home .ovr-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
html body #page-home .ovr-tile{position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:300px;padding:26px;border-radius:28px;
  background:var(--ov-card);border:1px solid var(--line);transition:transform .25s ease,box-shadow .25s ease}
html body #page-home .ovr-tile:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
html body #page-home .ovr-c7{grid-column:span 7}html body #page-home .ovr-c5{grid-column:span 5}
html body #page-home .ovr-c4{grid-column:span 4}html body #page-home .ovr-c6{grid-column:span 6}
html body #page-home .ovr-thead{padding-right:54px;margin-bottom:18px}
html body #page-home .ovr-thead h3{font-size:24px;letter-spacing:-.035em;line-height:1.1;margin:0 0 6px;font-weight:700}
html body #page-home .ovr-thead p:not(.eyebrow){margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
html body #page-home .ovr-tfoot{margin-top:auto}
html body #page-home .ovr-go{position:absolute;top:22px;right:22px;width:40px;height:40px;border-radius:13px;border:1px solid var(--line);background:transparent;color:var(--text);
  display:grid;place-items:center;font-size:16px;cursor:pointer;transition:transform .2s,background .2s,color .2s}
html body #page-home .ovr-tile:hover .ovr-go{background:var(--ov-inv);color:var(--ov-inv-ink);border-color:transparent;transform:rotate(-45deg)}
html body #page-home .ovr-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:14px}
html body #page-home .ovr-chips button{padding:8px 13px;border-radius:12px;border:1px solid var(--line);background:var(--ov-card-2);color:var(--text);font-size:13px;cursor:pointer}
html body #page-home .ovr-chips button:hover{border-color:var(--ov-line-2)}

/* Dark Splash tile: stays dark in both themes */
html body #page-home .ovr-dark{background:var(--ov-emph);color:var(--ov-emph-ink);border-color:var(--ov-emph-line)}
html body #page-home .ovr-dark .eyebrow,html body #page-home .ovr-dark .ovr-thead p:not(.eyebrow){color:color-mix(in srgb,var(--ov-emph-ink) 58%,transparent)!important}
html body #page-home .ovr-dark .ovr-go{color:var(--ov-emph-ink);border-color:color-mix(in srgb,var(--ov-emph-ink) 22%,transparent)}
html body #page-home .ovr-dark:hover .ovr-go{background:var(--ov-emph-ink);color:var(--ov-emph)}
html body #page-home .ovr-chat{display:flex;flex-direction:column;gap:10px}
html body #page-home .ovr-msg{padding:12px 15px;border-radius:18px;font-size:14px;line-height:1.5;max-width:86%}
html body #page-home .ovr-msg i{font-family:var(--ov-serif);font-size:16px}
html body #page-home .ovr-me{align-self:flex-end;background:color-mix(in srgb,var(--ov-emph-ink) 13%,transparent);border-bottom-right-radius:6px}
html body #page-home .ovr-ai{align-self:flex-start;border:1px solid color-mix(in srgb,var(--ov-emph-ink) 18%,transparent);border-bottom-left-radius:6px}
html body #page-home .ovr-composer{width:100%;margin-top:16px;display:flex;align-items:center;gap:10px;padding:8px 8px 8px 16px;border-radius:18px;cursor:pointer;
  background:transparent;color:inherit;border:1px solid color-mix(in srgb,var(--ov-emph-ink) 20%,transparent);text-align:left;font-size:14px}
html body #page-home .ovr-composer span{flex:1;opacity:.6}
html body #page-home .ovr-composer b{width:36px;height:36px;border-radius:12px;background:var(--ov-emph-ink);color:var(--ov-emph);display:grid;place-items:center}

/* Today tile */
html body #page-home .orbit-today-list{display:flex;flex-direction:column;gap:6px;background:transparent!important;border:0!important;padding:0!important;box-shadow:none!important}
html body #page-home .orbit-today-empty{padding:18px!important;border-radius:16px!important;border:1px dashed var(--ov-line-2)!important;background:transparent!important;color:var(--muted)!important;text-align:center}
html body #page-home .orbit-today-list > *:not(.orbit-today-empty){border-radius:14px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;box-shadow:none!important}

/* Games preview inside tile */
html body #page-home .preview-games{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important}
html body #page-home .preview-games > *{border-radius:16px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;box-shadow:none!important;min-width:0;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;justify-content:flex-start!important;gap:6px!important;padding:12px!important;min-height:0!important;height:auto!important;text-align:left!important}
html body #page-home .preview-games > *::before,html body #page-home .preview-games > *::after{content:none!important}
html body #page-home .preview-games strong{font-size:14px!important;line-height:1.2!important;color:var(--text)!important;overflow-wrap:anywhere}
html body #page-home .preview-games span{font-size:12px!important;line-height:1.4!important;color:var(--muted)!important;display:-webkit-box!important;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* Work slides */
html body #page-home .ovr-slides{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;align-items:end}
html body #page-home .ovr-slides span{aspect-ratio:16/10;border-radius:12px;padding:10px;display:flex;flex-direction:column;justify-content:flex-end;gap:4px;box-shadow:0 10px 24px -12px rgba(0,0,0,.35)}
html body #page-home .ovr-slides span:nth-child(1){background:var(--ov-emph);box-shadow:inset 0 0 0 1px var(--ov-emph-line),0 10px 24px -12px rgba(0,0,0,.35)}
html body #page-home .ovr-slides span:nth-child(2){background:repeating-linear-gradient(135deg,var(--ov-card-2) 0 8px,var(--ov-card) 8px 16px);border:1px solid var(--line)}
html body #page-home .ovr-slides span:nth-child(3){background:var(--ov-card-2);border:1px solid var(--line)}
html body #page-home .ovr-slides i{display:block;height:4px;border-radius:3px;background:var(--ov-faint);width:70%}
html body #page-home .ovr-slides i+i{width:42%}
html body #page-home .ovr-slides span:nth-child(1) i{background:var(--ov-emph-ink)}

/* Places globe */
html body #page-home .ovr-globe{display:flex;justify-content:center;color:var(--text)}
html body #page-home .ovr-globe svg{width:min(190px,100%);height:auto;animation:ovr-spin 60s linear infinite}
@keyframes ovr-spin{to{transform:rotate(360deg)}}

/* Frequent */
html body #page-home .frequent-list{display:flex!important;flex-wrap:wrap;gap:8px!important;background:transparent!important;border:0!important;padding:0!important}
html body #page-home .frequent-list > *{border-radius:14px!important}
html body #page-home .frequent-list .site-domain{color:var(--muted)!important;font-size:14px}

/* Study links */
html body #page-home .ovr-study{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
html body #page-home .ovr-study button{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;border:1px solid var(--line);background:var(--ov-card-2);color:var(--text);font-size:14px;cursor:pointer;text-align:left}
html body #page-home .ovr-study button:hover{border-color:var(--ov-line-2)}
html body #page-home .ovr-study i{font-style:normal;width:30px;height:30px;flex:none;border-radius:10px;display:grid;place-items:center;font-size:13px;background:var(--ov-emph);color:var(--ov-emph-ink);box-shadow:inset 0 0 0 1px var(--ov-emph-line)}

/* Catalog & cards */
html body .section-card{border-radius:24px!important;background:var(--ov-card)!important;border:1px solid var(--line)!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
html body .section-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)!important;border-color:var(--ov-line-2)!important}
html body .section-card .section-icon{width:44px!important;height:44px!important;border-radius:14px!important;background:var(--ov-emph)!important;color:var(--ov-emph-ink)!important;box-shadow:inset 0 0 0 1px var(--ov-emph-line)!important}
html body .section-card .section-count{font-variant-numeric:tabular-nums;border:1px solid var(--line)!important;background:transparent!important;color:var(--muted)!important}
html body .section-card .section-hint,html body .section-card .section-meta{color:var(--muted)!important}
html body .section-mini-site{border-radius:14px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important}
html body .site-card{border-radius:22px!important;background:var(--ov-card)!important;border:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body .site-card:hover{box-shadow:var(--shadow)!important;border-color:var(--ov-line-2)!important}
html body .category-btn,html body .chip,html body .collection-chip{border-radius:12px!important}
html body .category-btn.active,html body .chip.active,html body .collection-chip.active{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border-color:transparent!important}
html body .glass-btn,html body .ghost-btn,html body .add-collection-btn{border-radius:14px!important}
html body .glass-btn{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border:0!important;box-shadow:none!important}
html body .ghost-btn,html body .add-collection-btn{background:transparent!important;border:1px solid var(--ov-line-2)!important;color:var(--text)!important}
html body .mode-dashboard .mode-card{border-radius:24px!important;background:var(--ov-card)!important;border:1px solid var(--line)!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body .mode-dashboard .mode-card::before,html body .mode-dashboard .mode-card::after{content:none!important}

/* Responsive */
@media (max-width:1060px){
  html body header.topbar nav.main-nav{justify-content:flex-start!important}
  html body #page-home .ovr-hero{grid-template-columns:minmax(0,1fr);gap:28px;padding-top:48px}
  html body #page-home .hero-visual{max-width:600px;width:100%;margin:0 auto}
  html body #page-home .ovr-c7,html body #page-home .ovr-c5,html body #page-home .ovr-c6{grid-column:span 12}
  html body #page-home .ovr-c4{grid-column:span 6}
  html body #page-home .ovr-c4:nth-of-type(5){grid-column:span 12}
}
@media (max-width:640px){
  html body #page-home .ovr-hero{padding-top:30px}
  html body #page-home .hero-sub{font-size:16px!important}
  html body #page-home .hero-search{min-height:54px;padding-left:16px!important}
  html body #page-home .hero-search kbd{display:none!important}
  html body #page-home .stats-row{column-gap:26px!important}
  html body #page-home .stats-row strong{font-size:26px!important}
  html body #page-home .hero-widget-grid{gap:12px!important}
  html body #page-home .hero-info-card{min-height:140px!important;padding:16px!important;border-radius:20px!important}
  html body #page-home .time-card strong{font-size:40px!important}
  html body #page-home .weather-card strong{font-size:38px!important}
  html body #page-home .focus-card strong{font-size:32px!important}
  html body #page-home .ovr-shead,html body #page-home #catalog-section .section-head{flex-direction:column;align-items:flex-start;margin:48px 0 18px!important}
  html body #page-home .ovr-c4{grid-column:span 12}
  html body #page-home .ovr-tile{min-height:0;padding:22px}
  html body .ovr-subnav{justify-content:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html body #page-home .hero-info-card,html body #page-home .ovr-track,html body #page-home .ovr-globe svg{animation:none!important}
  html body #page-home .ovr-tile,html body .section-card{transition:none!important}
}

/* ================= Sections (all pages except home) ================= */
/* Page heads */
html body .page:not(#page-home) .subhero,html body .page .rules-hero,html body .page .books-hero{padding-top:30px!important;padding-bottom:22px!important}
html body .page:not(#page-home) .subhero h1,html body .page .rules-hero h1,html body .page .books-hero h1,html body #page-places .placesv6-title{
  font-size:clamp(40px,5.6vw,76px)!important;line-height:.95!important;letter-spacing:-.05em!important;font-weight:800!important;color:var(--text)!important}
html body .page:not(#page-home) .accent-dot{color:var(--text)!important}
html body .page:not(#page-home) .subhero > p:not(.eyebrow),html body .page .rules-hero p:not(.eyebrow),html body .page .books-hero p:not(.eyebrow){color:var(--muted)!important;max-width:620px}

/* Panels & cards: solid surfaces, no glossy layers */
html body .page:not(#page-home):not(#page-places) .glass,
html body .page .calendar-card,html body .page .task-sidebar,html body .page .task-create,html body .page .work-sidebar,html body .page .editor-topbar,
html body .page .slides-rail,html body .page .canvas-tools,html body .page .rules-research,html body .page .rules-syllabus-note,html body .page .books-source-note,html body .page .books-reading-note{
  background:var(--ov-card)!important;border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body .page:not(#page-home):not(#page-places) .glass::before,html body .page:not(#page-home):not(#page-places) .glass::after{background-image:none!important}

/* Stat tiles */
html body .page .task-stat,html body .page .calendar-metric,html body .page .books-stat,html body .page .orbit-game-stat,html body .page .rules-count{
  background:var(--ov-card)!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body .page .task-stat strong,html body .page .calendar-metric strong,html body .page .books-stat strong,html body .page .orbit-game-stat strong,html body .page .rules-count strong{
  font-size:32px!important;font-weight:700!important;letter-spacing:-.04em!important;font-variant-numeric:tabular-nums;color:var(--text)!important}
html body .page .task-stat span,html body .page .calendar-metric span,html body .page .books-stat span,html body .page .orbit-game-stat span,html body .page .rules-count span{color:var(--muted)!important}
html body #page-games:not(#page-home) .orbit-random-game.glass,html body #page-games:not(#page-home) .games-special.glass,html body #page-games:not(#page-home) .orbit-random-game,html body #page-games:not(#page-home) .games-special{background:var(--ov-emph)!important;color:var(--ov-emph-ink)!important;border:1px solid var(--ov-emph-line)!important;border-radius:26px!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html body #page-games .games-special::before,html body #page-games .games-special::after,html body #page-games .orbit-random-game::before,html body #page-games .orbit-random-game::after{content:none!important}
html body .page .orbit-random-game *,html body .page .games-special h2{color:var(--ov-emph-ink)!important}
html body .page .games-special p,html body .page .games-special .eyebrow,html body .page .orbit-random-game small{color:color-mix(in srgb,var(--ov-emph-ink) 60%,transparent)!important}
html body .page .games-special .glass-btn{background:var(--ov-emph-ink)!important;color:var(--ov-emph)!important}
html body .page .games-special-icon{background:color-mix(in srgb,var(--ov-emph-ink) 12%,transparent)!important;color:var(--ov-emph-ink)!important;border-radius:20px!important}

html body #page-games .orbit-game-overview{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;margin-top:22px!important}
html body #page-games .orbit-game-overview > *{min-height:96px;padding:18px 20px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;text-align:left!important}
@media (max-width:760px){html body #page-games .orbit-game-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important}}

/* Item cards with hover lift */
html body .page .game-card,html body .page .tool-card,html body .page .book-card,html body .page .rule-subject-card{
  background:var(--ov-card)!important;border:1px solid var(--line)!important;border-radius:22px!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important}
html body .page .game-card:hover,html body .page .tool-card:hover,html body .page .book-card:hover,html body .page .rule-subject-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)!important;border-color:var(--ov-line-2)!important}
html body .page .game-card::before,html body .page .game-card::after,html body .page .tool-card::before,html body .page .tool-card::after,html body .page .rule-subject-card::before,html body .page .rule-subject-card::after{background-image:none!important}

/* Icons in dark squares */
html body .page .game-icon,html body .page .tool-icon,html body .page .rule-subject-icon,html body .page .metric-icon,html body .page .ai-orb-logo,html body .page .ai-welcome-mark{
  background:var(--ov-emph)!important;color:var(--ov-emph-ink)!important;border-radius:12px!important;box-shadow:inset 0 0 0 1px var(--ov-emph-line)!important;border:0!important}

/* Fields */
html body .page:not(#page-home) input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]),
html body .page:not(#page-home) textarea,html body .page:not(#page-home) select,
html body .page .orbit-select-button,html body .page .orbit-date-button{
  background:var(--ov-card-2)!important;border:1px solid var(--line)!important;border-radius:14px!important;color:var(--text)!important;box-shadow:none!important}
html body .page:not(#page-home) input:focus,html body .page:not(#page-home) textarea:focus,html body .page:not(#page-home) select:focus{border-color:var(--text)!important;outline:none!important}
html body .page .rules-search,html body .page .books-search,html body .page .mini-search,html body .page .ai-chat-search-wrap{
  background:var(--ov-card-2)!important;border:1px solid var(--line)!important;border-radius:14px!important;box-shadow:none!important;backdrop-filter:none!important}
html body .page .rules-search input,html body .page .books-search input,html body .page .mini-search input,html body .page .ai-chat-search-wrap input{background:transparent!important;border:0!important}

/* Primary buttons */
html body .page .calendar-btn,html body .page .task-create button,html body .page .books-add-btn,html body .page .ai-new-chat,
html body .page .side-action.primary,html body .page .ai-send-btn,html body .page .book-actions .primary{
  background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border:0!important;border-radius:14px!important;box-shadow:none!important}
/* Secondary buttons */
html body .page .side-action:not(.primary),html body .page .template-btn,html body .page .calendar-chip-btn,html body .page .ai-mini-btn,
html body .page .ai-attach-btn,html body .page .editor-actions button,html body .page .book-icon-btn,html body .page .game-fav-btn,html body .page .placesv6-mini-btn{
  background:var(--ov-card-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;border-radius:12px!important;box-shadow:none!important}
html body .page .side-action:not(.primary):hover,html body .page .template-btn:hover,html body .page .calendar-chip-btn:hover,html body .page .editor-actions button:hover{border-color:var(--ov-line-2)!important}

/* Filters / chips: black active state */
html body .page .chip,html body .page .rules-filter,html body .page .rules-grade-btn,html body .page .books-filter,html body .page .tool-filter-chip,
html body .page .task-cat,html body .page .fraction-mode-btn,html body .page .placesv6-chip,html body .page .placesv6-nav-btn{
  border-radius:12px!important;border:1px solid var(--line)!important;background:var(--ov-card)!important;color:var(--muted)!important;box-shadow:none!important}
html body .page .chip:hover,html body .page .rules-filter:hover,html body .page .books-filter:hover,html body .page .tool-filter-chip:hover,html body .page .task-cat:hover{color:var(--text)!important}
html body .page .chip.active,html body .page .rules-filter.active,html body .page .rules-grade-btn.active,html body .page .books-filter.active,html body .page .tool-filter-chip.active,
html body .page .task-cat.active,html body .page .fraction-mode-btn.active,html body .page .placesv6-chip.active,html body .page .placesv6-nav-btn.active{
  background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border-color:transparent!important}
html body .page .game-badge,html body .page .book-badge,html body .page .rule-grade-chip,html body .page .rule-topic{border-radius:999px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;color:var(--muted)!important}

/* Splash AI */
html body #page-ai .ai-workspace{border-radius:28px!important;overflow:hidden}
html body #page-ai .ai-sidebar{background:color-mix(in srgb,var(--ov-card) 60%,var(--ov-card-2))!important;border-right:1px solid var(--line)!important}
html body #page-ai .ai-chat-row{border-radius:12px!important}
html body #page-ai .ai-chat-row.active,html body #page-ai .ai-chat-row.active .ai-chat-open{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important}
html body #page-ai .ai-topbar{border-bottom:1px solid var(--line)!important;background:transparent!important}
html body #page-ai .ai-mode-tabs{background:var(--ov-card-2)!important;border-radius:13px!important;padding:4px!important;border:0!important;box-shadow:none!important}
html body #page-ai .ai-mode-btn{border-radius:10px!important;background:transparent!important;color:var(--muted)!important;border:0!important;box-shadow:none!important}
html body #page-ai .ai-mode-btn.active{background:var(--ov-card)!important;color:var(--text)!important;box-shadow:0 1px 3px rgba(0,0,0,.14)!important}
html body #page-ai .ai-composer{border-radius:20px!important;border:1px solid var(--ov-line-2)!important;background:var(--ov-card)!important;box-shadow:none!important}
html body #page-ai .ai-composer textarea{background:transparent!important;border:0!important}
html body #page-ai .ai-starter{border-radius:16px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html body #page-ai .ai-local-badge{border-radius:999px!important;border:1px solid var(--line)!important;background:transparent!important;color:var(--muted)!important}

/* Studio */
html body #page-work .slide-thumb{border-radius:12px!important}
html body #page-work .slide-thumb.active{box-shadow:0 0 0 2px var(--text)!important}
html body #page-work .slide-canvas{border-radius:22px!important;box-shadow:var(--shadow)!important}

/* Places: keep translucent glass over the map, without glare */
html body #page-places .glass,html body #page-places .liquid-glass{background:var(--surface-strong)!important;border:1px solid var(--line)!important;box-shadow:var(--shadow)!important}
html body #page-places .glass::before,html body #page-places .glass::after,html body #page-places .liquid-glass::before,html body #page-places .liquid-glass::after{background-image:none!important}
html body #page-places .placesv6-panel,html body #page-places .placesv6-nav,html body #page-places .placesv6-card{border-radius:24px!important}

/* Favourite star: no yellow — filled black/white instead */
html body .fav-btn.active,html body .game-fav-btn.active,html body .book-icon-btn.active{color:var(--text)!important}


/* ================= Polish: accents, Splash controls, emoji, header spacing ================= */
/* Inverted accents get a hairline in dark theme so they read without glare */
html body :is(.main-nav .nav-btn.active,.ovr-subnav button[aria-current="page"],.mode-pill.active,.glass-btn,.auth-btn.primary,.brand-mark,
  .page .chip.active,.page .rules-filter.active,.page .rules-grade-btn.active,.page .books-filter.active,.page .tool-filter-chip.active,.page .task-cat.active,
  .page .fraction-mode-btn.active,.page .placesv6-chip.active,.page .placesv6-nav-btn.active,.page .calendar-btn,.page .task-create button[type=submit],.page .books-add-btn,
  .page .ai-new-chat,.page .side-action.primary,.page .ai-send-btn,.page .book-actions .primary,#page-ai .ai-chat-row.active,.ovyel-mobile-dock .nav-btn.active,
  .category-btn.active,.collection-chip.active,#page-home #focus-timer-toggle){box-shadow:inset 0 0 0 1px var(--ov-inv-line)!important}

/* Emoji inside controls follow the monochrome palette */
html body :is(.page button,.page .metric-icon,.page .calendar-card h2,.page .calendar-card h3,.page .ai-chat-pin,.mode-pill,.section-icon,.mini-icon,.ovyel-mobile-dock b){filter:grayscale(1)}

/* Splash: one height, one radius for every control */
html body #page-ai .ai-new-chat{height:44px!important;border-radius:14px!important;font-size:15px!important}
html body #page-ai .ai-sidebar button:not(.ai-new-chat):not(.ai-chat-open):not(.ai-chat-pin):not(.ai-chat-rename):not(.ai-chat-delete){
  height:38px!important;border-radius:12px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;box-shadow:none!important;
  display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;font-size:13px!important}
html body #page-ai .ai-chat-row{border-radius:12px!important;overflow:hidden!important;min-height:40px;align-items:center}
html body #page-ai .ai-chat-row .ai-chat-open{background:transparent!important;color:inherit!important;border-radius:0!important;box-shadow:none!important}
html body #page-ai .ai-chat-row:not(.active):hover{background:var(--line)!important}
html body #page-ai :is(.ai-chat-pin,.ai-chat-rename,.ai-chat-delete){width:28px!important;height:28px!important;border-radius:8px!important;display:inline-grid!important;place-items:center!important;color:inherit!important;opacity:.7;background:transparent!important;border:0!important}
html body #page-ai :is(.ai-chat-pin,.ai-chat-rename,.ai-chat-delete):hover{opacity:1;background:color-mix(in srgb,currentColor 12%,transparent)!important}
html body #page-ai .ai-mode-tabs{padding:4px!important;gap:2px!important}
html body #page-ai .ai-mode-btn{height:32px!important;padding:0 14px!important;font-size:13px!important}
html body #page-ai :is(.ai-attach-btn,.ai-splash3-control,.ai-mini-btn){height:36px!important;padding:0 12px!important;border-radius:12px!important;font-size:12.5px!important;
  display:inline-flex!important;align-items:center!important;gap:6px!important;background:var(--ov-card-2)!important;border:1px solid var(--line)!important;color:var(--text)!important;box-shadow:none!important}
html body #page-ai :is(.ai-attach-btn,.ai-splash3-control,.ai-mini-btn):hover{border-color:var(--ov-line-2)!important}
html body #page-ai .ai-splash3-control[aria-pressed="true"],html body #page-ai .ai-splash3-control.active{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border-color:transparent!important}
html body #page-ai .ai-send-btn{width:40px!important;height:40px!important;border-radius:13px!important}
html body #page-ai .ai-local-badge{height:28px;display:inline-flex!important;align-items:center;padding:0 12px!important;font-size:11px!important}
html body #page-ai .ai-orb-logo,html body #page-ai .ai-welcome-mark{border-radius:12px!important}

/* Header: roomier, never wider than the screen */
html body header.topbar{width:min(1920px,calc(100% - 24px))!important;max-width:calc(100% - 24px)!important;box-sizing:border-box!important;margin-left:auto!important;margin-right:auto!important}
html body header.topbar nav.main-nav > .nav-btn{padding:10px clamp(7px,.75vw,16px)!important;font-size:clamp(12.5px,.8vw,14px)!important}
html body header.topbar .header-actions .icon-btn{width:42px!important;height:42px!important;border-radius:14px!important;font-size:15px!important}
html body header.topbar .auth-btn{height:42px!important;padding:0 14px!important;border-radius:14px!important}
@media (max-width:1440px){
  html body header.topbar{gap:8px!important}
  html body header.topbar nav.main-nav{gap:2px!important}
  html body header.topbar .header-actions{gap:4px!important}
  html body header.topbar .header-actions .icon-btn{width:36px!important;height:36px!important;border-radius:12px!important}
  html body header.topbar .auth-btn{height:36px!important;padding:0 10px!important;font-size:12px!important}
  html body .main-nav .nav-btn span{margin-left:4px!important}
}
@media (max-width:1180px){
  html body header.topbar .brand > span:not(.brand-mark){display:none!important}
  html body header.topbar nav.main-nav > .nav-btn{padding:9px 6px!important;font-size:12.5px!important}
  html body header.topbar .header-actions .icon-btn{width:34px!important;height:34px!important}
  html body header.topbar .auth-btn{padding:0 8px!important;font-size:11.5px!important}
}

/* Calculator keys: operator keys follow the accent instead of bright white */
html body .page .calc-key{border-radius:14px!important;background:var(--ov-card-2)!important;color:var(--text)!important;border:1px solid var(--line)!important;box-shadow:none!important}
html body .page .calc-key.op,html body .page .calc-key.equals,html body .page .calc-key.eq{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important;border-color:transparent!important;box-shadow:inset 0 0 0 1px var(--ov-inv-line)!important}

/* ---------- Footer ---------- */
html body footer.ovyel-footer-legal{border-top:1px solid var(--line)}
html body .ovyel-footer-legal__links a{color:var(--muted)!important}
html body .ovyel-footer-legal__links a:hover{color:var(--text)!important}

/* ---------- Mobile dock ---------- */
@media (max-width:980px){
  html body .ovyel-mobile-dock{background:var(--surface-strong)!important;backdrop-filter:blur(22px) saturate(160%)!important;-webkit-backdrop-filter:blur(22px) saturate(160%)!important;
    border:1px solid var(--line)!important;border-radius:24px!important;box-shadow:var(--shadow)!important}
  html body .ovyel-mobile-dock .nav-btn{border-radius:16px!important;color:var(--muted)!important;background:transparent!important}
  html body .ovyel-mobile-dock .nav-btn.active{background:var(--ov-inv)!important;color:var(--ov-inv-ink)!important}
  html body .ovyel-mobile-dock .nav-btn.ovr-sub{display:none!important}
  html body .ovyel-mobile-dock{justify-content:space-around;overflow-x:visible!important}
  html body .ovyel-mobile-dock .nav-btn{flex:1 1 0;min-width:0}
  html body .ovyel-mobile-dock .nav-btn{padding:6px 2px!important;gap:2px!important}
  html body .ovyel-mobile-dock .nav-btn small{font-size:10px!important;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:clip;max-width:100%}
}
@media (max-width:440px){html body .ovyel-mobile-dock{left:4px!important;right:4px!important;padding:5px 3px!important;gap:1px!important}html body .ovyel-mobile-dock .nav-btn{padding:6px 0!important;border-radius:13px!important}html body .ovyel-mobile-dock .nav-btn small{font-size:8.6px!important;letter-spacing:-.03em!important}html body .ovyel-mobile-dock .nav-btn b{font-size:16px!important}}
@media (prefers-reduced-motion:reduce){html body .section-card,html body .site-card{transition:none!important}}

/* ---------- Header on tablets and phones ----------
   The mobile dock (visible up to 980px) already holds the sections, so the top bar keeps only
   the logo and actions in one row; the profile buttons stay inside the bar instead of floating. */
@media (max-width:980px){
  html body header.topbar{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;align-items:center!important;row-gap:0!important;background:var(--surface-strong)!important}
  html body header.topbar nav.main-nav{display:none!important}
  html body header.topbar .header-actions{justify-self:end!important;display:flex!important;align-items:center!important;gap:6px!important;min-width:0!important}
  html body header.topbar .auth-actions{position:static!important;inset:auto!important;transform:none!important;margin:0 0 0 2px!important;padding:0!important;
    background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;display:flex!important;gap:6px!important}
}
@media (max-width:640px){
  html body header.topbar{padding:8px 10px!important;gap:8px!important}
  html body header.topbar .brand{min-width:0!important;width:auto!important;padding:0!important}
  html body header.topbar .header-actions{gap:4px!important}
  html body header.topbar #auth-login{display:none!important}
  html body header.topbar .auth-btn,html body header.topbar .auth-profile{height:36px!important;padding:0 12px!important;font-size:13px!important;white-space:nowrap!important}
  html body header.topbar .auth-profile{max-width:120px!important;overflow:hidden!important;text-overflow:ellipsis!important}
}
/* ---------- Account & sync ---------- */
html body .ov-account{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
html body .ov-account-tabs{display:flex;gap:4px;padding:4px;border-radius:14px;background:var(--ov-card-2)}
html body .ov-account-tabs button{flex:1;border:0;border-radius:10px;padding:9px;font-weight:600;background:transparent;color:var(--muted);cursor:pointer}
html body .ov-account-tabs button.active{background:var(--ov-inv);color:var(--ov-inv-ink)}
html body .ov-account-form{display:flex;flex-direction:column;gap:8px}
html body .ov-account-form input{border:1px solid var(--ov-line-2);border-radius:12px;padding:11px 13px;background:var(--ov-card);color:var(--text);font:inherit}
html body .ov-account-form input:focus{outline:2px solid var(--text);outline-offset:1px}
html body .ov-account-error{margin:0;min-height:1em;font-size:12.5px;color:var(--text);font-weight:600}
html body .ov-account-error:empty{display:none}
html body .ov-account .ov-account-on strong{overflow-wrap:anywhere}
html body .ov-account .ov-account-on span{display:block}
html body #sync-btn{position:relative}
html body #sync-btn.is-synced::after{content:"";position:absolute;right:5px;top:5px;width:7px;height:7px;border-radius:50%;background:var(--text);box-shadow:0 0 0 2px var(--surface-strong)}
html body .ov-sync-banner{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(92px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:center;gap:8px;
  padding:9px 10px 9px 16px;border-radius:16px;background:var(--ov-inv);color:var(--ov-inv-ink);box-shadow:var(--shadow);font-size:13px;max-width:calc(100vw - 32px)}
html body .ov-sync-banner button{border:0;border-radius:10px;padding:7px 11px;font-weight:700;cursor:pointer;background:var(--ov-inv-ink);color:var(--ov-inv)}
html body .ov-sync-banner button:last-child{background:transparent;color:var(--ov-inv-ink);padding:7px 8px}
@media (min-width:981px){html body .ov-sync-banner{bottom:24px}}