/* my.idicto.com: само частите на site.css и макетите, които страниците ползват. Бутоните са оранжеви (--btn). Шрифтовете: Geologica и Golos Text (само кирилица и латиница), после системните. */
@font-face { font-family: "Geologica"; font-weight: 300 600; font-display: swap; src: url("/fonts/geologica-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F; }
@font-face { font-family: "Geologica"; font-weight: 300 600; font-display: swap; src: url("/fonts/geologica-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap; src: url("/fonts/golos-text-cyrillic.woff2") format("woff2"); unicode-range: U+0400-045F; }
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap; src: url("/fonts/golos-text-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
:root {
  --paper: oklch(98.4% 0.005 85);
  --paper-2: oklch(95.8% 0.01 82);
  --card: oklch(99.6% 0.002 85);
  --ink: oklch(22% 0.012 65);
  --ink-2: oklch(37% 0.012 65);
  --muted: oklch(49% 0.013 70);
  --faint: oklch(62% 0.012 75);
  --line: oklch(90% 0.01 80);
  --line-2: oklch(83% 0.013 78);
  --gold: oklch(78% 0.15 72);
  --gold-ink: oklch(47% 0.11 62);
  --gold-soft: oklch(90.5% 0.065 82);
  --gold-wash: oklch(96% 0.035 85);
  --drench: oklch(83% 0.13 80);
  --drench-ink: oklch(22% 0.04 60);
  --drench-2: oklch(36% 0.06 60);
  --btn: oklch(54% 0.15 58);
  --btn-hi: oklch(49% 0.14 56);
  --btn-ink: oklch(99% 0.004 85);
  --night: oklch(16.5% 0.008 60);
  --night-2: oklch(21% 0.01 62);
  --night-3: oklch(26% 0.012 62);
  --night-ink: oklch(95.5% 0.008 85);
  --night-dim: oklch(72% 0.012 78);
  --night-line: oklch(100% 0 0 / 0.1);
  --ok: oklch(50% 0.11 150); --ok-wash: oklch(94% 0.03 150); --ok-line: oklch(84% 0.06 150);
  --err: oklch(53% 0.18 28); --err-wash: oklch(95.5% 0.025 28); --err-line: oklch(86% 0.06 28);
  /* replicas of the real app: fixed in both themes on purpose (they are screenshots) */
  --ip-bg: oklch(17.2% 0.004 286); --ip-ink: oklch(96% 0.006 85); --ip-dim: oklch(68% 0.01 80);
  --ip-line: oklch(100% 0 0 / 0.14); --ip-pline: oklch(100% 0 0 / 0.24); --ip-partial: oklch(96% 0.006 85 / 0.72); --ip-acc: oklch(79% 0.145 74);
  --w-bg: oklch(99.4% 0.002 85); --w-bar: oklch(96.6% 0.006 82); --w-ink: oklch(24% 0.012 65); --w-dim: oklch(49% 0.013 70); --w-line: oklch(90.5% 0.01 80);
  --w-side: oklch(96.2% 0.01 82); --w-gold: oklch(92.4% 0.055 82); --w-goldink: oklch(49% 0.11 62); --w-bub: oklch(92.4% 0.055 82); --w-bubin: oklch(96% 0.006 82);
  --shadow: 0 24px 60px oklch(20% 0.03 60 / 0.18), 0 3px 10px oklch(20% 0.03 60 / 0.08);
  --shadow-night: 0 30px 70px oklch(0% 0 0 / 0.5), 0 3px 10px oklch(0% 0 0 / 0.35);
  --display: "Geologica", "Segoe UI Variable Display", "Segoe UI", system-ui, sans-serif;
  --font: "Golos Text", "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --app: "Segoe UI Variable Text", "Segoe UI", "Golos Text", system-ui, sans-serif;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --max: 1160px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: oklch(19% 0.007 65); --paper-2: oklch(22.5% 0.009 65); --card: oklch(24% 0.009 65);
    --ink: oklch(95% 0.008 85); --ink-2: oklch(86% 0.01 80); --muted: oklch(73% 0.012 78); --faint: oklch(60% 0.011 75);
    --line: oklch(30% 0.009 70); --line-2: oklch(38% 0.011 70);
    --gold: oklch(80% 0.145 74); --gold-ink: oklch(84% 0.11 80); --gold-soft: oklch(36% 0.06 70); --gold-wash: oklch(26% 0.035 72);
    --drench: oklch(80% 0.13 78); --drench-ink: oklch(20% 0.04 60); --drench-2: oklch(32% 0.06 60);
    --night: oklch(12.5% 0.006 60); --night-2: oklch(17% 0.008 62); --night-3: oklch(22% 0.01 62);
    --ok: oklch(72% 0.12 150); --ok-wash: oklch(26% 0.04 150); --ok-line: oklch(38% 0.07 150);
    --err: oklch(72% 0.16 28); --err-wash: oklch(29% 0.05 28); --err-line: oklch(42% 0.09 28);
    --shadow: 0 24px 60px oklch(0% 0 0 / 0.45), 0 3px 10px oklch(0% 0 0 / 0.3);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --paper: oklch(19% 0.007 65); --paper-2: oklch(22.5% 0.009 65); --card: oklch(24% 0.009 65);
  --ink: oklch(95% 0.008 85); --ink-2: oklch(86% 0.01 80); --muted: oklch(73% 0.012 78); --faint: oklch(60% 0.011 75);
  --line: oklch(30% 0.009 70); --line-2: oklch(38% 0.011 70);
  --gold: oklch(80% 0.145 74); --gold-ink: oklch(84% 0.11 80); --gold-soft: oklch(36% 0.06 70); --gold-wash: oklch(26% 0.035 72);
  --drench: oklch(80% 0.13 78); --drench-ink: oklch(20% 0.04 60); --drench-2: oklch(32% 0.06 60);
  --night: oklch(12.5% 0.006 60); --night-2: oklch(17% 0.008 62); --night-3: oklch(22% 0.01 62);
  --ok: oklch(72% 0.12 150); --ok-wash: oklch(26% 0.04 150); --ok-line: oklch(38% 0.07 150);
  --err: oklch(72% 0.16 28); --err-wash: oklch(29% 0.05 28); --err-line: oklch(42% 0.09 28);
  --shadow: 0 24px 60px oklch(0% 0 0 / 0.45), 0 3px 10px oklch(0% 0 0 / 0.3);
  color-scheme: dark;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 16.5px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--night); }
/* Футърът стои долу и на висок екран */
body { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
body > main { flex: 1 0 auto; }
/* Цветната лента стига до футъра: секцията в „bare“ страниците се разтяга */
body > main:not(.my) { display: flex; flex-direction: column; }
body > main:not(.my) > section { flex: 1 0 auto; }
a { color: inherit; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
h1, h2, h3 { margin: 0; text-wrap: balance; font-family: var(--display); font-weight: 500; letter-spacing: -0.02em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: max(20px, env(safe-area-inset-left, 0px)); padding-right: max(20px, env(safe-area-inset-right, 0px)); }
/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 24px; border-radius: 14px; border: 1px solid transparent; background: var(--btn); color: var(--btn-ink); font-weight: 600; font-size: 16.5px; text-decoration: none; white-space: nowrap; transition: background .18s var(--ease), transform .18s var(--ease); box-shadow: inset 0 1px 0 oklch(100% 0 0 / 0.18), 0 6px 16px oklch(45% 0.12 58 / 0.25); }
.btn:hover { background: var(--btn-hi); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); border-color: var(--line-2); font-weight: 500; box-shadow: none; }
.btn.ghost:hover { background: var(--paper-2); }
.btn.ghost.on-night { color: var(--night-ink); border-color: var(--night-line); }
.btn.ghost.on-night:hover { background: oklch(100% 0 0 / 0.06); }
.btn.wide { width: 100%; }
.btn.sm { min-height: 42px; font-size: 15px; padding: 0 16px; border-radius: 12px; }
.hint { font-size: 14px; color: var(--muted); line-height: 1.45; }
/* ---------- site header (on the night hero) ---------- */
.site-head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; background: var(--night); color: var(--night-ink); border-bottom: 1px solid var(--night-line); }
.site-head .wrap { display: flex; align-items: center; gap: 16px; height: 66px; }
.brand { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -.02em; text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.brand .mark { width: 24px; height: 24px; border-radius: 7px; background: var(--ip-bg); border: 1px solid var(--ip-pline); display: grid; place-items: center; }
.brand .mark i { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 10px oklch(79% 0.145 74 / 0.7); }
.site-nav { display: none; gap: 28px; margin-left: 30px; font-size: 15.5px; color: var(--night-dim); }
.site-nav a { text-decoration: none; }
.site-nav a:hover, .site-nav a.on { color: var(--night-ink); }
.site-nav a.on { text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 8px; }
.head-r { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; border: 1px solid var(--night-line); border-radius: 10px; padding: 2px; }
.lang a { text-decoration: none; border: 0; background: none; border-radius: 8px; padding: 4px 9px; font-size: 13px; font-weight: 500; color: var(--night-dim); }
.lang a.on { background: var(--night-ink); color: var(--night); }
.foot { padding-block: 34px 46px; font-size: 14px; color: var(--night-dim); background: var(--night); border-top: 1px solid var(--night-line); }
.foot .wrap { display: grid; gap: 14px; }
.foot .links { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.foot a { text-decoration: none; color: var(--night-ink); }
.foot .mail { color: var(--night-ink); user-select: all; }

/* Табло / рамка */
.myhead .wrap { flex-wrap: wrap; height: auto; min-height: 66px; }
.head-r .who { font-size: 14px; color: var(--night-dim); white-space: nowrap; }
.head-r .out { font-size: 14px; color: var(--night-ink); text-decoration: none; }

.my { background: var(--paper-2); padding-block: 34px 60px; min-height: 620px; }
.my .wrap { max-width: 1060px; }
.my-hello h1 { font-size: clamp(28px, 4.2vw, 40px); line-height: 1.08; letter-spacing: -0.03em; }
.head-r form { margin: 0; }
.head-r .out { all: unset; cursor: pointer; font-size: 14px; color: var(--night-ink); text-decoration: underline; text-underline-offset: 3px; }
.head-r .out:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* Вход и съгласие */
.auth { padding-block: 44px 64px; background: var(--paper-2); }
.auth .wrap { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); align-items: start; max-width: 1000px; }
.auth-card { background: var(--card); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 30px 30px 24px; display: grid; gap: 16px; }
.auth-card h1 { font-size: clamp(28px, 4vw, 38px); line-height: 1.08; letter-spacing: -0.03em; }
.auth-card .sub { color: var(--ink-2); font-size: 16.5px; }
.gbtn { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; border-radius: 14px; border: 1.5px solid var(--ink-2); background: #fff; color: #1f1f1f; font: 600 16.5px/1 var(--font); box-shadow: 0 2px 8px oklch(20% 0.02 60 / 0.08); }
.gbtn:hover { background: #f7f7f7; }
.gbtn svg { width: 22px; height: 22px; }
.auth-or { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13.5px; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.auth-card input[type=email] { height: 52px; border-radius: 14px; border: 1px solid var(--line-2); padding: 0 16px; font: inherit; background: var(--paper); color: var(--ink); width: 100%; }
.auth-card .chk { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--ink-2); }
.auth-card .chk input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--btn); flex: none; }
.auth-card .legal { font-size: 13px; color: var(--muted); }
.auth-card .legal a { color: var(--ink-2); }
.auth-card form, .auth-card #s2 { display: grid; gap: 16px; }
.auth-card a.gbtn { text-decoration: none; }
.auth-card .err { margin: 0; padding: 10px 14px; border-radius: 12px; border: 1px solid var(--err-line); background: var(--err-wash); color: var(--err); font-size: 14.5px; }
.auth-card .code6 { display: flex; gap: 8px; }
.auth-card .code6 input { width: 48px; height: 56px; padding: 0; text-align: center; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); color: var(--ink); font: 600 24px/1 ui-monospace, Consolas, monospace; }
.auth-card .code6 input:focus { border-color: var(--btn); box-shadow: 0 0 0 3px var(--gold-soft); outline: none; }
.auth-card .code6 span { width: 48px; height: 56px; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--paper); display: grid; place-items: center; font: 600 24px/1 ui-monospace, Consolas, monospace; }
.auth-card .code6 span.on { border-color: var(--btn); box-shadow: 0 0 0 3px var(--gold-soft); }
.terms { padding: 18px 4px 0; display: grid; gap: 16px; align-content: start; }
.terms h2 { font-size: 20px; color: var(--ink); }
.terms dl { margin: 0; display: grid; gap: 11px; }
.terms dl div { display: grid; gap: 3px; }
.terms dt { font-weight: 600; font-size: 15px; color: var(--ink); }
.terms dd { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-2); max-width: 40ch; }
.terms dd b { color: var(--ink); font-weight: 600; }
.terms .more { font-size: 14px; color: var(--muted); }
.terms .more a { color: var(--ink-2); }
.head-r .who { font-size: 14px; color: var(--night-dim); white-space: nowrap; }
.brcard { width: min(420px, 100%); border-radius: 12px; overflow: hidden; border: 1px solid #c9c6bd; background: var(--paper); box-shadow: var(--shadow); font-family: var(--font); }
.brcard .in { padding: 22px; display: grid; gap: 12px; color: var(--ink); }
.brcard h4 { margin: 0; font: 500 21px/1.2 var(--display); letter-spacing: -0.02em; }
.brcard p { color: var(--ink-2); font-size: 14.5px; }
.brcard .btn { min-height: 44px; font-size: 15px; justify-self: start; }
.consent { width: min(400px, 100%); }
.consent .in { gap: 12px; padding: 22px 24px 18px; }
.consent .pair { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 2px; }
.consent .app { width: 44px; height: 44px; border-radius: 12px; background: var(--ip-bg); display: grid; place-items: center; }
.consent .app::after { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--ip-acc); }
.consent .dots3 { color: var(--faint); letter-spacing: 2px; }
.consent .av { width: 44px; height: 44px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-ink); display: grid; place-items: center; font: 600 18px/1 var(--display); }
.consent .av.sm { width: 32px; height: 32px; font-size: 14px; }
.consent h4 { text-align: center; font-size: 19px; }
.consent .acct { display: flex; align-items: center; gap: 10px; border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; font-size: 14px; }
.consent .acct span:nth-child(2) { display: grid; flex: 1; }
.consent .acct small { color: var(--muted); font-size: 12.5px; }
.consent .acct a { font-size: 13px; color: var(--gold-ink); }
.consent .dev { font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { .auth .wrap { grid-template-columns: minmax(0, 1fr); } .my-grid { grid-template-columns: minmax(0, 1fr); } }

/* /razreshi: картата е сама в средата */
.auth.solo .wrap { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.consent .acct form { margin: 0; }
.consent .acct button.lnk { font: inherit; font-size: 13px; color: var(--gold-ink); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.consent .can { font-size: 13.5px; color: var(--ink-2); }
.consent ul { display: grid; gap: 5px; font-size: 13.5px; color: var(--ink-2); padding-left: 2px; }
.consent ul li::before { content: "✓ "; color: var(--gold-ink); font-weight: 700; }
.consent .acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.consent .acts .btn { width: 100%; min-height: 48px; font-size: 15.5px; padding: 0 12px; cursor: pointer; font-family: inherit; }
.consent .acts .btn:disabled { opacity: .6; cursor: default; }
.consent .fine { font-size: 12px; color: var(--muted); text-align: center; }
.consent .err { color: #a3321f; font-size: 13.5px; }