/* Токени взяті з diia-open-source/android-diia: ui_base/.../theme/Color.kt, Type.kt, drawable/*.xml */
@font-face { font-family: "e-Ukraine"; src: url(fonts/e_ukraine_regular.otf) format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "e-Ukraine"; src: url(fonts/e_ukraine_medium.otf) format("opentype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "e-Ukraine Head"; src: url(fonts/e_ukraine_head_regular.otf) format("opentype"); font-display: swap; }

:root {
  --ink: #000;
  --paper: #fff;
  --squeeze: #E2ECF4;        /* BlackSqueeze — дільники */
  --grey: #D1D1D1;
  --green: #19BE6F;
  --muted: rgba(0, 0, 0, .54);
  --w40: rgba(255, 255, 255, .4);
  --ticker: linear-gradient(90deg, #A7ED96, #8ED0D0);  /* TickerType.POSITIVE */
  --ticker-fg: #000;
  --dot-on: var(--ink);
  /* bg_blue_yellow_gradient.xml */
  --bg-app:
    radial-gradient(60% 45% at 82% 82%, #DEF1D5, transparent),
    radial-gradient(45% 35% at 5% 91%, #C5E5DD, transparent),
    radial-gradient(50% 25% at 82% 16%, rgba(167, 203, 227, .41), transparent),
    radial-gradient(50% 25% at 18% 34%, rgba(255, 255, 255, .18), transparent),
    #B2D3E9;
  --bg-desk: var(--bg-app);
  --desk-fg: var(--ink);
  --text: var(--ink);        /* колір тексту на фоні застосунку; у картках завжди --ink */
  --head: "e-Ukraine Head", "e-Ukraine", system-ui, sans-serif;
}

/* Тема «Копірайтер+» — палітра заміряна зі скріншотів Резерв+ (App Store) */
:root[data-theme="kplus"] {
  --ink: #23221E;
  --paper: #EFEFE5;
  --squeeze: #E1DECB;
  --grey: #C3C0AD;
  --muted: rgba(35, 34, 30, .6);
  --ticker: #6A4A1C;
  --ticker-fg: #EFEFE5;
  --dot-on: #F98E0E;
  --accent: #F98E0E;
  --olive: #51503E;
  --panel: #D4D2BD;
  --bg-app: #E1DECB;
  --bg-desk: radial-gradient(50% 60% at 60% 45%, #34322B, transparent), #23221E;
  --desk-fg: #E1DECB;
  --desk-icon: invert(1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: "e-Ukraine", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg-app);
  min-height: 100dvh;
  -webkit-font-smoothing: antialiased;
}
body::before { content: ""; position: fixed; inset: 0; z-index: -1; background: var(--bg-app); }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; text-align: inherit; }
:focus-visible { outline: 2px solid var(--focus, var(--ink)); outline-offset: 2px; border-radius: 8px; }
.ic { width: 24px; height: 24px; flex: none; }
.ic.sm { width: 16px; height: 16px; }

/* DiiaTypography */
.greet { font: 38px/44px var(--head); }
.hero { font-size: 29px; line-height: 32px; }
.h1 { font: 23px/28px var(--head); }
.h3 { font-size: 18px; line-height: 24px; }
.h4 { font-size: 16px; line-height: 24px; font-weight: 400; }
.t1 { font-size: 14px; line-height: 16px; }
.t2 { font-size: 12px; line-height: 16px; }
.t3 { font-size: 12px; line-height: 18px; }
.t4 { font-size: 11px; line-height: 16px; }
.t5 { font-size: 10px; line-height: 16px; }
.num { font-size: 30px; line-height: 32px; display: block; }
.muted { color: var(--muted); }
.center { text-align: center; }

.app { max-width: 430px; margin: 0 auto; min-height: 100dvh; }
#screen { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.status, .desk-note { display: none; }
.pager, .hscroll, .chips { user-select: none; -webkit-user-select: none; }
img { -webkit-user-drag: none; }

/* Top bar */
.top { display: flex; align-items: center; gap: 8px; padding: 16px 16px 8px 24px; min-height: 64px; }
.top h1 { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top.has-back { padding-left: 12px; }
.top-r { display: flex; gap: 4px; margin-left: auto; }
.icon-btn { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; flex: none; }

/* Cards / lists (ListItemGroupOrg: White, radius 16, padding 24 зовні) */
.card { background: var(--paper); border-radius: 16px; margin: 16px 24px 0; padding: 16px; }
.card > .h4 + * { margin-top: 8px; }
.list { padding: 0; overflow: hidden; }
.li { display: flex; align-items: center; gap: 16px; width: 100%; padding: 16px; }
.li + .li { border-top: 1px solid var(--squeeze); }
.li > span:not(.end) { flex: 1; min-width: 0; }
.li .end { color: var(--muted); }
.sec { margin: 24px 24px 0; }

/* Status chip (ChipStatusAtm: radius 10, 11/16) */
.chip-status { display: inline-block; padding: 2px 8px; border-radius: 10px; background: var(--grey); font-size: 11px; line-height: 16px; align-self: flex-start; }
.chip-status.pos { background: var(--green); color: var(--paper); }
.chip-status.white { background: var(--paper); }

/* Feed */
.hello { padding: 8px 24px 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.hscroll { display: flex; gap: 8px; overflow-x: auto; padding: 8px 24px 4px; scroll-snap-type: x mandatory; scroll-padding: 24px; scrollbar-width: none; }
.hscroll::-webkit-scrollbar { display: none; }
.half { flex: 0 0 168px; aspect-ratio: 1; border-radius: 16px; padding: 16px; display: flex; flex-direction: column; justify-content: space-between; scroll-snap-align: start; }
.quick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 24px 0; }
.tile { background: var(--paper); border-radius: 16px; padding: 16px; display: flex; flex-direction: column; gap: 24px; min-height: 112px; }
.tile .ic { width: 32px; height: 32px; }
.news { display: flex; flex-direction: column; gap: 4px; }

/* Document → кейс (DocOrg: aspectRatio .7, radius 24, WhiteAlpha40) */
.pager { display: flex; gap: 12px; overflow-x: auto; padding: 8px 32px 16px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.pager::-webkit-scrollbar { display: none; }
.doc { flex: 0 0 100%; aspect-ratio: .7; scroll-snap-align: center; perspective: 1400px; cursor: pointer; }
.doc-flip { position: relative; height: 100%; transition: transform .6s cubic-bezier(.2, .7, .2, 1); transform-style: preserve-3d; }
.doc.flipped .doc-flip { transform: rotateY(180deg); }
.face { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; display: flex; flex-direction: column; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: 0 8px 24px rgba(40, 80, 120, .12); }
.front { padding-top: 20px; }
.front .chip-status { margin: 0 16px; }
.doc-title { padding: 8px 16px 0; }
.doc-mid { display: flex; gap: 16px; padding: 16px; }
.doc-photo { width: 44%; aspect-ratio: .78; border-radius: 12px; background: var(--w40); display: grid; place-items: center; overflow: hidden; flex: none; }
.doc-photo img { width: 100%; height: 100%; object-fit: cover; }
.doc-photo b { font: 64px/1 var(--head); opacity: .5; }
.fields { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.fields dt { color: rgba(0, 0, 0, .6); }
.doc-name { margin-top: auto; padding: 0 16px 12px; }
.doc-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px 20px; }
.ellipse { width: 32px; height: 32px; display: grid; place-items: center; flex: none; }
.ellipse .ic { width: 32px; height: 32px; }
.back { transform: rotateY(180deg); background: rgba(255, 255, 255, .55); padding: 20px 16px; gap: 4px; }
.metric { padding: 12px 0; border-bottom: 1px solid rgba(0, 0, 0, .08); }
.back .btn { margin-top: auto; }
.back .h3 + .back-text { margin-top: 8px; }

/* Картка кейсу: бульбашки → фото (притиснуте догори) → назва → клієнт і рік */
.case-front { padding: 0; }
.bubbles { display: flex; flex-wrap: wrap; gap: 6px; padding: 16px 16px 12px; }
.bubble { padding: 4px 10px; border-radius: 40px; background: var(--paper); color: var(--ink); font-size: 12px; line-height: 16px; text-shadow: none; }
.case-photo { flex: 1; min-height: 0; display: flex; align-items: flex-start; justify-content: center; padding: 0 16px; }
.case-photo img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; }
.case-photo:first-child { padding-top: 16px; }
.case-name { padding: 16px 16px 0; }
.case-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 12px 12px 16px; }
.case-info .fields { flex-direction: row; gap: 24px; }
.case-info .fields dt { color: inherit; opacity: .6; }

/* TickerAtm: висота 24, бігучий рядок */
.ticker { height: 24px; background: var(--ticker); color: var(--ticker-fg); overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; white-space: nowrap; animation: tick 20s linear infinite; }
.ticker-track span { padding-right: 24px; }
@keyframes tick { to { transform: translateX(-50%); } }

.dots { display: flex; justify-content: center; gap: 6px; padding: 4px 0 8px; }
.dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(0, 0, 0, .2); transition: width .2s; }
.dots i.on { background: var(--dot-on); width: 16px; }

/* Кольори карток — градієнти з doc_background.xml та Color.kt (GradientAlternative*) */
.g0 { background: radial-gradient(110% 70% at 95% 90%, #D8EBA5, transparent 65%), radial-gradient(70% 50% at 0% 100%, #89C9C4, transparent 70%), #79B9E3; }
.g1 { background: linear-gradient(160deg, #B5D39D 0%, #F1ACAC 55%, #BF98C6 100%); }
.g2 { background: radial-gradient(100% 70% at 100% 100%, #FAF7BA, transparent 60%), linear-gradient(160deg, #F1ACAC, #BF98C6); }
.g3 { background: radial-gradient(90% 60% at 0% 0%, #E2F2FE, transparent 70%), linear-gradient(160deg, #A9CEE7, #BED9F5 45%, #7179EF); }

/* Деталі кейсу */
.cover { margin: 8px 24px 0; border-radius: 24px; padding: 20px 16px; min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; }
.cover .chip-status { margin-bottom: auto; }
.row { display: flex; justify-content: space-between; gap: 16px; padding: 12px 0; }
.row + .row { border-top: 1px solid var(--squeeze); }
.row span:last-child { text-align: right; }
.table { padding-top: 4px; padding-bottom: 4px; }
.metrics { display: grid; gap: 12px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag { padding: 8px 12px; border-radius: 40px; background: var(--squeeze); font-size: 12px; line-height: 16px; }
.actions { display: grid; gap: 12px; margin: 24px 24px 0; }

/* Обкладинка кейсу — фото з підписом поверх */
.cover { position: relative; overflow: hidden; padding: 0; min-height: 0; aspect-ratio: 4 / 3; }
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-text { position: absolute; inset: auto 0 0; display: flex; flex-direction: column; gap: 4px; padding: 56px 16px 16px; color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.cover-text .chip-status { margin: 0 0 4px; color: #000; text-shadow: none; }
.prose h2 { margin-top: 16px; }
.prose h2:first-child { margin-top: 0; }
.prose h2 + p { margin-top: 4px; }
.prose p + p { margin-top: 8px; }
.lead { font-size: 15px; line-height: 22px; }
.result .h3 { margin-top: 4px; }
.quote blockquote { font-style: italic; }
.quote p { margin-top: 8px; }
.back-text { display: -webkit-box; -webkit-line-clamp: 9; -webkit-box-orient: vertical; overflow: hidden; }
.link { text-decoration: underline; text-underline-offset: 3px; }
.case-link { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: 12px; background: var(--squeeze); }
.case-link img { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex: none; }
.case-link > span { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }

/* Галерея: фото, відео з папки, Vimeo */
.gallery { display: grid; gap: 12px; margin: 16px 24px 0; }
.gallery img, .gallery video { display: block; width: 100%; height: auto; border-radius: 16px; background: var(--squeeze); }
.vimeo { position: relative; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: #000; }
.vimeo iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Плитки кейсів у стрічці з фото */
.half.has-img { position: relative; overflow: hidden; }
.half.has-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.half.has-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(rgba(0, 0, 0, .25), rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, .72)); }
.half.has-img > span, .half.has-img > b { position: relative; z-index: 1; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .5); }

/* Сервіси (SearchInputMlc: h40, radius 16; ChipMlc: radius 40, 12/16) */
.search { display: flex; align-items: center; gap: 8px; margin: 8px 24px 0; height: 40px; background: var(--paper); border-radius: 16px; padding: 0 12px; }
.search:focus-within { box-shadow: 0 0 0 2px var(--ink); }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 12px; line-height: 18px; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 16px 24px 0; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 32px; padding: 0 16px; border-radius: 40px; background: var(--paper); font-size: 12px; line-height: 16px; white-space: nowrap; }
.chip.on { background: var(--ink); color: var(--paper); }
.empty { padding: 24px 16px; }

/* Меню */
.profile { display: flex; align-items: center; gap: 16px; }
.ava { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; font: 23px/1 var(--head); flex: none; }
.foot { margin: 24px 24px 0; }

/* Кнопки (BtnPrimaryDefaultAtm: чорна, t1) */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; border-radius: 40px; background: var(--ink); color: var(--paper); font-size: 14px; line-height: 16px; padding: 0 32px; width: 100%; }
.btn.ghost { background: transparent; color: var(--ink); border: 2px solid var(--ink); }

/* Tab bar (HomeBottomBar: Black, іконка 24, підпис t5 White) */
.tabbar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: min(100%, 430px); background: var(--ink); display: flex; padding: 8px 0 calc(8px + env(safe-area-inset-bottom)); z-index: 5; }
.tabbar a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--paper); }

/* Bottom sheet: немодальний <dialog> + власний scrim, щоб на ПК він жив усередині телефона */
.sheet { position: fixed; z-index: 9; inset: auto 0 0; margin: 0 auto; width: min(100%, 430px); max-height: 88%; border: 0; border-radius: 24px 24px 0 0; padding: 8px 0 calc(24px + env(safe-area-inset-bottom)); background: var(--paper); color: var(--ink); overflow: auto; }
.scrim { display: none; position: fixed; inset: 0; z-index: 8; background: rgba(0, 0, 0, .5); }
.sheet[open] ~ .scrim { display: block; }
.sheet[open] { animation: up .25s ease-out; }
@keyframes up { from { transform: translateY(100%); } }
.grab { width: 40px; height: 4px; border-radius: 2px; background: var(--grey); margin: 0 auto 8px; }
.sheet .pad { padding: 8px 24px; display: flex; flex-direction: column; gap: 12px; }
.sheet .list .li { padding: 16px 24px; }
.sheet ul { padding-left: 18px; display: grid; gap: 6px; }
.tl { display: grid; gap: 2px; padding: 12px 0; }
.tl + .tl { border-top: 1px solid var(--squeeze); }

.toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom)); transform: translate(-50%, 16px); background: var(--ink); color: var(--paper); border-radius: 16px; padding: 12px 16px; font-size: 12px; line-height: 16px; opacity: 0; transition: .2s; pointer-events: none; z-index: 10; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Теми: службові елементи, що потрібні лише «Копірайтер+» */
.doc-body { display: contents; }
.ellipse .plus, .doc-role { display: none; }
.swatch { width: 24px; height: 24px; border-radius: 50%; flex: none; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.plus-mark { color: var(--accent); }

/* ===== «Копірайтер+»: картка як «Резерв ID» — оливкова рамка, беж-панель, коричневий тікер, кнопка «+» ===== */
:root[data-theme="kplus"] .g0 { background: var(--panel); }
:root[data-theme="kplus"] .g1 { background: var(--grey); }
:root[data-theme="kplus"] .g2 { background: #B8B39E; }
:root[data-theme="kplus"] .g3 { background: #A0957F; }
:root[data-theme="kplus"] .front,
:root[data-theme="kplus"] .cover { background: var(--olive); color: var(--paper); }
:root[data-theme="kplus"] .cover .chip-status { background: var(--panel); color: var(--ink); }
:root[data-theme="kplus"] .front { padding: 20px 12px 12px; }
:root[data-theme="kplus"] .front .chip-status { display: none; }
:root[data-theme="kplus"] .doc-title { text-align: center; font: 29px/32px var(--head); padding: 4px 0 20px; }
:root[data-theme="kplus"] .doc-body { display: flex; flex-direction: column; flex: 1; position: relative; background: var(--panel); color: var(--ink); border-radius: 16px; overflow: hidden; }
:root[data-theme="kplus"] .doc-mid { padding: 12px; }
:root[data-theme="kplus"] .ticker { order: 1; }
:root[data-theme="kplus"] .doc-role { display: block; order: 2; margin-top: auto; padding: 0 16px; color: var(--muted); }
:root[data-theme="kplus"] .doc-name { order: 3; margin-top: auto; font-size: 21px; line-height: 26px; padding: 4px 64px 16px 16px; }
:root[data-theme="kplus"] .doc-role + .doc-name { margin-top: 0; }
:root[data-theme="kplus"] .case-name { font-size: 21px; line-height: 26px; }
:root[data-theme="kplus"] .doc-foot { position: absolute; right: 12px; bottom: 12px; padding: 0; }
:root[data-theme="kplus"] .doc-foot .t2,
:root[data-theme="kplus"] .ellipse svg { display: none; }
:root[data-theme="kplus"] .ellipse { width: 40px; height: 40px; }
:root[data-theme="kplus"] .ellipse .plus { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--grey); font-size: 28px; line-height: 1; }
:root[data-theme="kplus"] .back { background: var(--panel); }

/* ===== «Прайд»: веселковий тікер — TickerType.RAINBOW з Color.kt, пастельні картки, смужка прапора над таб-баром ===== */
:root[data-theme="pride"] {
  --bg-app:
    radial-gradient(55% 35% at 85% 8%, rgba(255, 150, 200, .55), transparent),
    radial-gradient(50% 35% at 8% 38%, rgba(255, 214, 110, .5), transparent),
    radial-gradient(60% 40% at 92% 68%, rgba(130, 225, 165, .5), transparent),
    radial-gradient(60% 40% at 12% 96%, rgba(150, 165, 255, .55), transparent),
    #F4EFFF;
  --ticker: linear-gradient(90deg, #FC2C78, #FFD15C, #4EE89E, #993FC3);
  --flag: linear-gradient(90deg, #E40303, #FF8C00, #FFED00, #008026, #24408E, #732982);
  --dot-on: var(--flag);
}
:root[data-theme="pride"] .g0 { background: linear-gradient(160deg, #FFB3C7, #FFD8A8 22%, #FFF2A6 42%, #BDEFC9 62%, #B5D3FF 80%, #D9C2FF); }
:root[data-theme="pride"] .g1 { background: linear-gradient(160deg, #FFB3C7, #FFD8A8); }
:root[data-theme="pride"] .g2 { background: linear-gradient(160deg, #BDEFC9, #B5D3FF); }
:root[data-theme="pride"] .g3 { background: linear-gradient(160deg, #B5D3FF, #D9C2FF); }
:root[data-theme="pride"] .tabbar { background: var(--flag) top / 100% 4px no-repeat, #000; }
:root[data-theme="pride"] .chip.on { background: var(--flag); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }

/* ===== «Новорічна»: нічне небо, сніг, кучки снігу на картках і таб-барі ===== */
:root[data-theme="ny"] {
  --text: #fff;
  --ink: #0B1E40;
  --muted: rgba(255, 255, 255, .72);
  --squeeze: #E3ECF7;
  --ticker: linear-gradient(90deg, #FFD86B, #FFF1C7);
  --dot-on: #fff;
  --focus: #FFD86B;
  --bg-app:
    radial-gradient(70% 40% at 85% 0%, rgba(120, 170, 255, .35), transparent),
    radial-gradient(60% 40% at 0% 100%, rgba(90, 150, 230, .3), transparent),
    linear-gradient(180deg, #0B1E40, #1B3A6B);
  --desk-fg: #fff;
  --desk-icon: invert(1);
  --cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath fill='white' d='M0 16C2 10 8 8 14 9C20 3 32 2 38 8C44 5 52 5 56 9C64 2 80 1 88 8C94 5 102 5 106 9C114 3 128 2 136 8C142 5 150 5 154 9C162 3 176 3 182 9C190 7 198 10 200 16C196 19 190 17 186 18C180 20 176 17 170 18C160 19 150 17 140 18C132 19 124 16 116 18C106 20 96 17 86 18C76 19 66 16 56 18C46 20 36 17 26 18C16 19 8 17 0 16Z'/%3E%3C/svg%3E");
}
:root[data-theme="ny"] .g0 { background: linear-gradient(160deg, #EAF4FF, #B9D5F7); }
:root[data-theme="ny"] .g1 { background: linear-gradient(160deg, #FFE1E1, #F29A9A); }
:root[data-theme="ny"] .g2 { background: linear-gradient(160deg, #DDF2E1, #8CC79A); }
:root[data-theme="ny"] .g3 { background: linear-gradient(160deg, #FFF4D1, #F2C94C); }
/* Світлі поверхні на темному фоні: повертаємо темний текст і темний --muted */
:root[data-theme="ny"] :is(.card, .tile, .search, .chip, .sheet, .face, .half, .cover) { color: var(--ink); --muted: rgba(0, 0, 0, .54); }
:root[data-theme="ny"] .chip.on { background: #FFD86B; }
:root[data-theme="ny"] :is(.top, .status) .ic { filter: invert(1); }
:root[data-theme="ny"] .dots i:not(.on) { background: rgba(255, 255, 255, .3); }
:root[data-theme="ny"] .actions .btn { background: var(--paper); color: var(--ink); }
:root[data-theme="ny"] .actions .btn.ghost { background: transparent; color: var(--paper); border-color: var(--paper); }
:root[data-theme="ny"] .tabbar { background: #08142A; }
:root[data-theme="ny"] :is(.pager, .hscroll) { padding-top: 16px; }
:root[data-theme="ny"] :is(.card, .half, .doc) { position: relative; }
:root[data-theme="ny"] :is(.card, .half, .doc)::before,
:root[data-theme="ny"] .tabbar::before {
  content: ""; position: absolute; z-index: 2; left: 12px; right: 12px; top: -8px; height: 16px;
  background: var(--cap) center / 100% 100% no-repeat; pointer-events: none;
  filter: drop-shadow(0 2px 2px rgba(0, 20, 60, .25));
}
:root[data-theme="ny"] .tabbar::before { left: 0; right: 0; top: -10px; height: 14px; }

.snow { position: fixed; inset: 0; z-index: 4; pointer-events: none; overflow: hidden; container-type: size; }
.snow i { position: absolute; top: -8px; left: var(--x); width: var(--s); height: var(--s); border-radius: 50%; background: #fff; opacity: var(--o); animation: fall var(--d) linear var(--t) infinite; }
@keyframes fall { to { transform: translate(var(--w), calc(100cqh + 16px)); } }

/* ===== «Nokia S40»: іконки меню й шпалера — з прошивки Nokia 6233 (RM-145 v05.60).
   Смуги скіна в прошивці — напівпрозорі накладки поверх шпалери; кольори заміряні з PNG:
   заголовок 02fd070 (білий 70% → 0), підсвічування 0303ba8 (#330099 40% → 16%),
   попап 030370c (#fff → #B1C9E4), кнопка 0313afc (#B4D7E6 → #0077AA).
   Шрифт — вільний Fira Sans (OFL, fonts/FiraSans-OFL.txt) замість закритого Nokia Sans:
   той самий автор (Ерік Шпікерманн), найближчий за характером. ===== */
@font-face { font-family: "Fira Sans"; src: url(fonts/FiraSans-400-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Fira Sans"; src: url(fonts/FiraSans-400-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
@font-face { font-family: "Fira Sans Title"; src: url(fonts/FiraSans-600-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; font-display: swap; }
@font-face { font-family: "Fira Sans Title"; src: url(fonts/FiraSans-600-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; font-display: swap; }
:root[data-theme="s40"] {
  --ink: #0A1446;
  --text: #fff;
  --muted: rgba(255, 255, 255, .85);
  --squeeze: rgba(10, 30, 90, .12);
  --popup: linear-gradient(#fff, #B1C9E4);
  --hl: linear-gradient(rgba(51, 0, 153, .4), rgba(51, 0, 153, .16));
  --btn: linear-gradient(#B4D7E6, #0077AA);
  --ticker: var(--hl);
  --ticker-fg: #000;
  --dot-on: #fff;
  --focus: #FFD200;
  --bg-app: url(nokia/wallpaper.jpg) center / cover no-repeat, #2B54C8;
  --bg-desk: radial-gradient(50% 60% at 60% 45%, #1F3E9E, transparent), #0E1A4A;
  --desk-fg: #fff;
  --desk-icon: invert(1);
  --head: "Fira Sans Title", "Fira Sans", system-ui, sans-serif;
}
:root[data-theme="s40"] body { font-family: "Fira Sans", system-ui, sans-serif; }
:root[data-theme="s40"] #screen { text-shadow: 0 1px 2px rgba(0, 0, 40, .55); }
:root[data-theme="s40"] .top { background: linear-gradient(rgba(255, 255, 255, .7) 55%, rgba(255, 255, 255, 0)); color: #000; text-shadow: none; }
:root[data-theme="s40"] :is(.card, .tile, .half, .search, .chip, .sheet, .face, .cover, .g0, .g1, .g2, .g3) {
  background: var(--popup); color: #000; text-shadow: none; --muted: rgba(0, 0, 0, .6);
}
:root[data-theme="s40"] :is(.card, .tile, .half, .search, .chip, .cover) { border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .8), 0 2px 6px rgba(0, 10, 60, .25); }
:root[data-theme="s40"] :is(.li, .chip):hover,
:root[data-theme="s40"] .li:focus-visible { background: var(--hl); }
:root[data-theme="s40"] .chip.on,
:root[data-theme="s40"] .btn { background: var(--btn); color: #fff; text-shadow: 0 1px 1px rgba(0, 0, 0, .4); border-radius: 4px; }
:root[data-theme="s40"] .btn.ghost { background: var(--popup); color: #000; border: 1px solid #7FA3D0; text-shadow: none; }
:root[data-theme="s40"] .face { border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .9), 0 6px 18px rgba(0, 10, 60, .35); }
:root[data-theme="s40"] .front { padding-top: 0; }
:root[data-theme="s40"] .front .chip-status { display: none; }
:root[data-theme="s40"] .doc-title { background: var(--btn); color: #fff; padding: 10px 16px; font: 16px/20px var(--head); text-shadow: 0 1px 1px rgba(0, 0, 0, .4); }
:root[data-theme="s40"] .status { color: #fff; }
:root[data-theme="s40"] .status .ic { filter: invert(1); }
/* Софт-клавіші замість таб-бару: лише підписи, як «Опції / Вибрати / Назад» */
:root[data-theme="s40"] .tabbar { background: linear-gradient(rgba(10, 20, 70, 0), rgba(10, 20, 70, .85) 35%); }
:root[data-theme="s40"] .tabbar .ic { display: none; }
:root[data-theme="s40"] .tabbar a { justify-content: center; min-height: 40px; text-shadow: 0 1px 2px #000; }
:root[data-theme="s40"] .tabbar .t5 { font: 15px/22px var(--head); padding: 0 8px; border-radius: 4px; }
:root[data-theme="s40"] .tabbar [aria-current] .t5 { background: var(--btn); }

/* Сітка головного меню та екран очікування — рендеряться лише в темі S40 */
.grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px 12px; }
.cell { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 2px; border-radius: 6px; font: 13px/16px var(--head); text-align: center; }
.cell:hover, .cell:focus-visible { background: rgba(255, 255, 255, .3); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .85); outline: none; }
.cell img { width: 74px; height: 61px; }
.idle { text-align: center; padding: 4px 24px 8px; }
.idle .op { font: 18px/24px var(--head); }
.idle .clock { font: 72px/1.1 var(--head); letter-spacing: 1px; }

/* ===== «Vista»: Aero за мотивами Windows Vista. Без файлів Microsoft — шпалера, скло, кнопки й сфера в CSS;
   шрифт системний (на Windows це Segoe UI). Кольори кнопок і виділення — як у стандартних контролах Vista. ===== */
:root[data-theme="vista"] {
  --ink: #000;
  --text: #fff;
  --muted: rgba(255, 255, 255, .8);
  --squeeze: #E5E5E5;
  --gloss: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .14) 50%, rgba(255, 255, 255, 0) 50%);
  --glass: linear-gradient(rgba(255, 255, 255, .5), rgba(255, 255, 255, .18) 36px, rgba(160, 205, 250, .22)), rgba(45, 105, 175, .42);
  --vbtn: linear-gradient(#F2F2F2, #EBEBEB 50%, #DDDDDD 50%, #CFCFCF);
  --vbtn-on: linear-gradient(#EAF6FD, #D9F0FC 50%, #BEE6FD 50%, #A7D9F5);
  --ticker: linear-gradient(#A6F19C, #47D43D 45%, #1FAE1F 50%, #44C93A);  /* зелений прогрес-бар */
  --ticker-fg: #0B3A0B;
  --dot-on: #6FD0FF;
  --focus: #6FD0FF;
  /* «Полярне сяйво»: зелено-сині смуги світла на темно-синьому */
  --bg-app:
    linear-gradient(118deg, transparent 36%, rgba(190, 255, 225, .35) 46%, transparent 54%),
    linear-gradient(128deg, transparent 52%, rgba(120, 220, 255, .28) 60%, transparent 67%),
    radial-gradient(110% 55% at 18% 30%, rgba(60, 215, 120, .8), transparent 62%),
    radial-gradient(90% 50% at 85% 58%, rgba(30, 140, 240, .85), transparent 62%),
    radial-gradient(70% 40% at 40% 95%, rgba(100, 235, 205, .5), transparent 70%),
    #031432;
  --bg-desk: radial-gradient(60% 70% at 30% 40%, rgba(40, 150, 110, .35), transparent), radial-gradient(60% 70% at 80% 60%, rgba(30, 100, 200, .35), transparent), #020A18;
  --desk-fg: #fff;
  --desk-icon: invert(1);
  --head: "Segoe UI", Selawik, Tahoma, system-ui, sans-serif;
}
:root[data-theme="vista"] body { font-family: "Segoe UI", Selawik, Tahoma, system-ui, sans-serif; }
:root[data-theme="vista"] #screen { text-shadow: 0 1px 3px rgba(0, 0, 0, .6); }
/* Скляний заголовок вікна: чорний текст із білим сяйвом */
:root[data-theme="vista"] .top { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .35), 0 1px 0 rgba(0, 0, 0, .45); color: #000; text-shadow: 0 0 8px #fff, 0 0 2px #fff; }
/* Білі області вмісту в скляній рамці */
:root[data-theme="vista"] :is(.card, .tile, .search, .sheet) { background: #fff; color: #000; text-shadow: none; --muted: rgba(0, 0, 0, .55); }
:root[data-theme="vista"] :is(.card, .tile) { border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .55), 0 0 0 5px rgba(170, 205, 240, .28), 0 6px 18px rgba(0, 0, 0, .45); }
:root[data-theme="vista"] .search { border-radius: 3px; box-shadow: inset 0 0 0 1px #ABADB3; }
:root[data-theme="vista"] .sheet { box-shadow: 0 0 0 6px rgba(160, 200, 240, .45), 0 -8px 30px rgba(0, 0, 0, .5); }
/* Глянцеві плитки (як гаджети бічної панелі) */
:root[data-theme="vista"] .g0 { background: var(--gloss), linear-gradient(#4AA3DF, #1B5C9E); }
:root[data-theme="vista"] .g1 { background: var(--gloss), linear-gradient(#5FCF6A, #23853A); }
:root[data-theme="vista"] .g2 { background: var(--gloss), linear-gradient(#3FC6C2, #157A86); }
:root[data-theme="vista"] .g3 { background: var(--gloss), linear-gradient(#A7B4C4, #5B6B80); }
:root[data-theme="vista"] :is(.half, .cover) { color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); border-radius: 6px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 0, 0, .5), 0 6px 16px rgba(0, 0, 0, .4); --muted: rgba(255, 255, 255, .85); }
/* Картка = вікно Vista: скляна рамка, заголовок, червона кнопка «✕», білий вміст */
:root[data-theme="vista"] .front { background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); padding: 0 6px 6px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 1px rgba(0, 0, 0, .6), 0 10px 30px rgba(0, 0, 0, .5); }
:root[data-theme="vista"] .front .chip-status { display: none; }
:root[data-theme="vista"] .doc-title { position: relative; font-size: 14px; line-height: 20px; padding: 8px 56px 8px 4px; color: #000; text-shadow: 0 0 8px #fff, 0 0 2px #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:root[data-theme="vista"] .doc-title::after {
  content: "✕"; position: absolute; right: 0; top: 0; width: 44px; height: 20px; border-radius: 0 0 4px 4px;
  background: linear-gradient(#E8A493, #D0705E 50%, #B8382A 50%, #C7584A); color: #fff; font-size: 12px; line-height: 20px; text-align: center;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5), 0 0 0 1px rgba(60, 0, 0, .6); text-shadow: 0 0 2px #000;
}
:root[data-theme="vista"] .doc-body { display: flex; flex-direction: column; flex: 1; background: #fff; color: #000; text-shadow: none; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0, 0, 0, .45); --muted: rgba(0, 0, 0, .55); }
:root[data-theme="vista"] .doc-photo { background: #EEF3F8; }
:root[data-theme="vista"] .back { background: #fff; color: #000; text-shadow: none; --muted: rgba(0, 0, 0, .55); }
/* Кнопки, чипи, виділення рядка — як у Провіднику Vista */
:root[data-theme="vista"] :is(.btn, .chip) { background: var(--vbtn); color: #000; border: 1px solid #707070; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .7); text-shadow: none; }
:root[data-theme="vista"] :is(.btn, .chip):hover,
:root[data-theme="vista"] .chip.on { background: var(--vbtn-on); border-color: #3C7FB1; }
:root[data-theme="vista"] .li:hover,
:root[data-theme="vista"] .li:focus-visible { background: linear-gradient(#FAFBFD, #EBF3FD); box-shadow: inset 0 0 0 1px #B8D6FB; border-radius: 3px; outline: none; }
:root[data-theme="vista"] .toast { background: #FFFFE1; color: #000; border: 1px solid #767676; border-radius: 4px; box-shadow: 0 3px 8px rgba(0, 0, 0, .35); }
:root[data-theme="vista"] .dots i:not(.on) { background: rgba(255, 255, 255, .35); }
:root[data-theme="vista"] .dots i.on { box-shadow: 0 0 6px #6FD0FF; }
:root[data-theme="vista"] .status { color: #fff; }
:root[data-theme="vista"] .status .ic { filter: invert(1); }
/* Таскбар: чорне глянцеве скло + кругла сфера «Пуск» без логотипа */
:root[data-theme="vista"] .tabbar {
  background: linear-gradient(rgba(255, 255, 255, .22), rgba(255, 255, 255, .06) 50%, rgba(0, 0, 0, .25) 50%, rgba(0, 0, 0, .45)), rgba(10, 14, 20, .82);
  -webkit-backdrop-filter: blur(12px) saturate(150%); backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35); padding-left: 56px;
}
:root[data-theme="vista"] .tabbar::before {
  content: ""; position: absolute; left: 10px; top: 8px; width: 38px; height: 38px; border-radius: 50%;
  background: radial-gradient(circle at 50% 28%, rgba(255, 255, 255, .85), rgba(255, 255, 255, 0) 45%), radial-gradient(circle at 50% 75%, #7FE0FF, #1D6FBF 55%, #0B2E5C);
  box-shadow: 0 0 10px rgba(80, 180, 255, .7), inset 0 0 0 1px rgba(255, 255, 255, .5);
}
:root[data-theme="vista"] .tabbar a { margin: 0 2px; border-radius: 3px; }
:root[data-theme="vista"] .tabbar [aria-current] { background: linear-gradient(rgba(255, 255, 255, .35), rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, .05) 50%, rgba(120, 180, 255, .25)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4), 0 0 8px rgba(120, 190, 255, .6); }

/* ===== ПК: мокап телефона (390×844, як iPhone 14) — екран всередині скролиться сам ===== */
@media (min-width: 768px) and (hover: hover) {
  body { height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 64px; }
  .phone {
    zoom: var(--z, 1); position: relative; flex: none;
    padding: 12px; border-radius: 66px; background: #111;
    box-shadow: inset 0 0 0 2px #333, 0 0 0 1px rgba(0, 0, 0, .25), 0 40px 100px rgba(20, 50, 80, .35);
  }
  .phone::before { content: ""; position: absolute; z-index: 20; top: 23px; left: 50%; translate: -50%; width: 122px; height: 36px; border-radius: 20px; background: #000; }
  .app {
    position: relative; isolation: isolate; width: 390px; height: 844px; min-height: 0; border-radius: 54px; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--bg-app);
  }
  body::before { background: var(--bg-desk); }
  .desk-note { color: var(--desk-fg); }
  .desk-note .muted { color: inherit; opacity: .7; }
  .desk-note .ic { filter: var(--desk-icon, none); }
  .status { display: flex; justify-content: space-between; align-items: center; flex: none; height: 54px; padding: 6px 30px 0 44px; font-size: 16px; font-weight: 500; }
  .status span:last-child { display: flex; gap: 6px; }
  .status .ic { width: 18px; height: 18px; }
  .status .ic:last-child { width: 26px; }
  #screen { flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; padding-bottom: 104px; }
  #screen::-webkit-scrollbar { display: none; }
  .tabbar { position: absolute; left: 0; transform: none; width: 100%; padding-bottom: 28px; }
  .sheet, .scrim, .toast, .snow { position: absolute; }
  .sheet { width: 100%; padding-bottom: 40px; }
  .toast { bottom: 108px; }
  .pager, .hscroll, .chips { cursor: grab; }
  .desk-note { display: flex; flex-direction: column; gap: 12px; width: 280px; }
  .desk-note .greet { font-size: 32px; line-height: 38px; }
  .desk-note .hint { display: flex; align-items: center; gap: 8px; margin-top: 12px; }
}
@media (min-width: 768px) and (max-width: 1023px) and (hover: hover) { .desk-note { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .sheet[open] { animation: none; }
  .snow { display: none; }
  .doc-flip, .toast, .dots i { transition: none; }
}