/* =====================================================================
   Gamblers Traders — brand skin (loaded after app.css, always dark)
   ===================================================================== */

/* ---------- fonts (local) ---------- */
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/unbounded-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/unbounded-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/unbounded-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Unbounded"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/unbounded-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 400; font-display: swap; src: url("./vendor/fonts/manrope-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/manrope-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 600; font-display: swap; src: url("./vendor/fonts/manrope-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/manrope-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/manrope-cyrillic-800-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Manrope"; font-weight: 800; font-display: swap; src: url("./vendor/fonts/manrope-latin-800-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 500; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-cyrillic-700-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "JetBrains Mono"; font-weight: 700; font-display: swap; src: url("./vendor/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- tokens ---------- */
:root, :root.dark {
  --ink-0: #07080F;
  --ink-1: #0B0C18;
  --ink-2: #0E1024;
  --ink-3: #141733;
  --ink-4: #1B1F42;

  --bg: var(--ink-0);
  --card: rgb(20 23 51 / 72%);
  --card-solid: #12142B;
  --text: #F5F6FF;
  --hint: #9AA0B4;
  --sub: #B8BDD0;
  --link: #9EA4FF;
  --accent: #7C83FF;
  --accent-deep: #5B5FEF;
  --accent-text: #0B0C1A;
  --header: #8C93C9;
  --danger: #FF5A64;
  --sep: rgb(124 131 255 / 12%);
  --soft: rgb(124 131 255 / 9%);
  --accent-soft: rgb(124 131 255 / 16%);
  --line: rgb(124 131 255 / 16%);

  --ok: #2EE59D;
  --ok-soft: rgb(46 229 157 / 14%);
  --warn: #FFB547;
  --warn-soft: rgb(255 181 71 / 14%);
  --bad: #FF5A64;
  --bad-soft: rgb(255 90 100 / 14%);
  --info: #7C83FF;
  --info-soft: rgb(124 131 255 / 16%);
  --gold: #FFB547;

  --radius: 20px;
  --radius-sm: 14px;
  --shadow: 0 1px 0 rgb(255 255 255 / 3%) inset, 0 10px 30px rgb(0 0 0 / 35%);
  --glow: 0 8px 28px rgb(124 131 255 / 35%);
  --font-display: "Unbounded", "Manrope", system-ui, sans-serif;
  --font-body: "Manrope", "Inter", -apple-system, system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "IBM Plex Mono", ui-monospace, Menlo, monospace;
  color-scheme: dark;
}

html, body {
  background: var(--ink-0);
  color: var(--text);
}
body {
  font-family: var(--font-body);
  font-size: 15px;
  letter-spacing: -0.005em;
  background:
    radial-gradient(120% 60% at 100% -10%, rgb(91 95 239 / 22%) 0%, transparent 55%),
    radial-gradient(90% 50% at -10% 30%, rgb(124 131 255 / 8%) 0%, transparent 60%),
    linear-gradient(180deg, #07080F 0%, #0B0C1A 45%, #0E1024 100%);
  background-attachment: fixed;
}
::selection { background: rgb(124 131 255 / 40%); }

/* ---------- boot ---------- */
.boot { background: var(--ink-0); flex-direction: column; gap: 18px; }
.boot-logo { display: none; }
.boot-brand { display: flex; flex-direction: column; align-items: center; gap: 18px; animation: bootin .6s var(--ease); }
.boot-brand img { height: 46px; filter: drop-shadow(0 6px 24px rgb(124 131 255 / 35%)); }
.boot-bar { width: 120px; height: 3px; border-radius: 2px; background: rgb(124 131 255 / 15%); overflow: hidden; position: relative; }
.boot-bar::after { content: ""; position: absolute; inset: 0; width: 40%; border-radius: 2px; background: var(--accent); box-shadow: var(--glow); animation: bootbar 1.1s ease-in-out infinite; }
@keyframes bootbar { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }
@keyframes bootin { from { opacity: 0; transform: scale(.96); } }

/* ---------- type ---------- */
.large-title, .detail-title, .brand-title, .hero-title, .sheet-title, .empty-title, .big-num, .push-hero-num, .rating-avg {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
}
.large-title { font-size: 26px; font-weight: 800; line-height: 1.1; }
.detail-title { font-size: 24px; font-weight: 800; line-height: 1.15; }
.title-sub { color: var(--hint); font-size: 14px; }
.brand-title { margin: 0; font-weight: 800; font-size: 28px; line-height: 1.04; color: var(--text); }
.brand-title.md { font-size: 22px; }
.brand-title .brand-accent { display: block; }
.tone-accent { --tone: #7C83FF; --tone-rgb: 124 131 255; }
.tone-red { --tone: #FF5A64; --tone-rgb: 255 90 100; }
.tone-green { --tone: #2EE59D; --tone-rgb: 46 229 157; }
.tone-amber { --tone: #FFB547; --tone-rgb: 255 181 71; }
.tone-mute { --tone: #9AA0B4; --tone-rgb: 154 160 180; }
.brand-accent { color: var(--tone, var(--accent)); }

/* tag pill: «● СКОРО СТРИМ» */
.tag {
  display: inline-flex; align-items: center; gap: 8px; height: 28px; padding: 0 12px; border-radius: 999px;
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--tone); border: 1px solid rgb(var(--tone-rgb) / 55%); background: rgb(var(--tone-rgb) / 8%);
  white-space: nowrap;
}
.tag-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--tone); box-shadow: 0 0 10px var(--tone); flex: none; }
.tag-dot.pulse { animation: blink 1.2s infinite; }

/* ---------- top bar ---------- */
.topbar { margin: 6px 2px 18px; align-items: flex-end; }
.topbar .tag { margin-bottom: 12px; }
.topbar-main { min-width: 0; }
.brand-row { display: flex; align-items: center; justify-content: space-between; margin: 4px 2px 18px; }
.brand-logo { display: block; }
.icon-btn { background: var(--card); color: var(--accent); border: 1px solid var(--line); box-shadow: none; backdrop-filter: blur(12px); }

/* ---------- cards & sections ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.section-title {
  font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .16em; color: var(--header);
  display: inline-flex; align-items: center; gap: 8px;
}
.section-title::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent); }
.section-action { color: var(--link); }
.section-foot { color: var(--hint); }
.row-title { font-weight: 600; }
.row + .row::before, .field + .field::before, .row + .field::before, .field + .row::before, .target + .target::before,
.file-row::before, .check-row + .check-row::before, .btn-edit::before, .rating-comment + .rating-comment::before { background: var(--sep); }
button.row:active, .row.tap:active, .step-main:active, .push-main:active { background: rgb(124 131 255 / 8%); }
.chev { color: rgb(154 160 180 / 55%); }

/* row icons: dark tiles with coloured glyph + inner glow */
:where(.row-icon) { --c: 124 131 255; }
.row-icon {
  background: radial-gradient(120% 120% at 30% 20%, rgb(var(--c) / 30%), rgb(var(--c) / 10%));
  color: rgb(var(--c)); border: 1px solid rgb(var(--c) / 30%); box-shadow: 0 0 18px rgb(var(--c) / 14%);
}
.t-blue { --c: 124 131 255; }
.t-purple { --c: 167 139 250; }
.t-gold { --c: 255 181 71; }
.t-green { --c: 46 229 157; }
.t-red { --c: 255 90 100; }
.t-teal { --c: 94 214 230; }
.t-pink { --c: 255 120 190; }
.t-gray { --c: 154 160 180; }

/* ---------- fields ---------- */
.field-label { color: var(--hint); font-weight: 600; }
.field-input { color: var(--text); }
.field-input::placeholder { color: rgb(154 160 180 / 55%); }
select.field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA0B4' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); }
select.field-input option { background: #12142B; color: var(--text); }
input[type="datetime-local"], input[type="time"] { color-scheme: dark; }
.inline-btn { background: var(--accent-soft); color: var(--link); border: 1px solid rgb(124 131 255 / 22%); }
.inline-btn.danger { background: var(--bad-soft); color: var(--bad); border-color: rgb(255 90 100 / 25%); }

/* ---------- buttons (banner CTA) ---------- */
.btn {
  height: 54px; border-radius: 16px; font-weight: 700; font-size: 16px;
  background: linear-gradient(180deg, #8A90FF 0%, #7C83FF 55%, #6E75FA 100%);
  color: var(--accent-text); box-shadow: 0 10px 30px rgb(124 131 255 / 32%), 0 1px 0 rgb(255 255 255 / 30%) inset;
}
.btn::after { content: "→"; font-weight: 700; margin-left: 2px; }
.btn.no-arrow::after, .btn.secondary::after, .btn.danger::after { content: none; }
.btn.secondary { background: var(--card); color: var(--link); border: 1px solid var(--line); box-shadow: none; }
.btn.danger { background: rgb(255 90 100 / 8%); color: var(--bad); border: 1px solid rgb(255 90 100 / 28%); box-shadow: none; }
.save-bar .btn { box-shadow: 0 12px 36px rgb(124 131 255 / 45%); }
.action-tile { background: var(--card); border: 1px solid var(--line); box-shadow: none; color: var(--text); }
.fab {
  background: linear-gradient(180deg, #8A90FF, #6E75FA); color: var(--accent-text);
  border-radius: 20px; box-shadow: 0 12px 34px rgb(124 131 255 / 50%), 0 1px 0 rgb(255 255 255 / 35%) inset;
}

/* ---------- segmented / chips / toggles ---------- */
.segmented { background: rgb(20 23 51 / 70%); border: 1px solid var(--line); border-radius: 14px; }
.segmented button { color: var(--hint); font-weight: 700; border-radius: 10px; }
.segmented button.on { background: var(--accent); color: var(--accent-text); box-shadow: 0 6px 18px rgb(124 131 255 / 35%); }
.chip { background: rgb(124 131 255 / 8%); color: var(--sub); border: 1px solid var(--line); font-family: var(--font-mono); font-weight: 500; }
.chip.on { background: var(--accent); color: var(--accent-text); border-color: transparent; box-shadow: 0 4px 14px rgb(124 131 255 / 35%); }
.toggle { background: rgb(154 160 180 / 22%); }
.toggle.on { background: var(--accent); box-shadow: 0 0 16px rgb(124 131 255 / 45%); }
.toggle::after { background: #F5F6FF; }
.stepper { background: rgb(124 131 255 / 10%); border: 1px solid var(--line); }
.stepper button { color: var(--link); }
.radio.on { border-color: var(--accent); }
.radio.on::after { background: var(--accent); box-shadow: 0 0 10px var(--accent); }

/* ---------- badges & status ---------- */
.badge { border: 1px solid transparent; font-weight: 700; }
.b-ok { background: var(--ok-soft); color: var(--ok); border-color: rgb(46 229 157 / 25%); }
.b-warn { background: var(--warn-soft); color: var(--warn); border-color: rgb(255 181 71 / 25%); }
.b-bad { background: var(--bad-soft); color: var(--bad); border-color: rgb(255 90 100 / 25%); }
.b-info { background: var(--info-soft); color: var(--link); border-color: rgb(124 131 255 / 28%); }
.b-mute { background: rgb(154 160 180 / 10%); color: var(--hint); border-color: rgb(154 160 180 / 18%); }
.b-gold { background: var(--warn-soft); color: var(--warn); }
.d-ok { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.d-bad { background: var(--bad); box-shadow: 0 0 8px var(--bad); }
.d-warn { background: var(--warn); }
.step-mini { background: rgb(154 160 180 / 9%); color: var(--hint); border: 1px solid rgb(154 160 180 / 14%); }
.step-mini.ok { background: var(--ok-soft); color: var(--ok); border-color: rgb(46 229 157 / 22%); }
.step-mini.bad { background: var(--bad-soft); color: var(--bad); border-color: rgb(255 90 100 / 22%); }
.step-mini.run { background: var(--info-soft); color: var(--link); border-color: rgb(124 131 255 / 25%); }
.step-mini.warn { background: var(--warn-soft); color: var(--warn); border-color: rgb(255 181 71 / 22%); }
.gchip { background: rgb(124 131 255 / 8%); color: var(--sub); border: 1px solid var(--line); }
.wait.b-ok { color: var(--ok); }

/* ---------- hero = push banner ---------- */
.hero, .banner {
  position: relative; overflow: hidden; border-radius: 26px; color: var(--text);
  padding: 20px 18px 18px; margin-bottom: 18px; min-height: 196px;
  --tone: #7C83FF; --tone-rgb: 124 131 255;
  background:
    radial-gradient(90% 120% at 100% 100%, rgb(var(--tone-rgb) / 30%) 0%, transparent 55%),
    radial-gradient(70% 90% at 0% 0%, rgb(var(--tone-rgb) / 14%) 0%, transparent 60%),
    linear-gradient(160deg, #0B0C18 0%, #0E1024 60%, #121535 100%);
  border: 1px solid rgb(var(--tone-rgb) / 22%);
  box-shadow: 0 18px 50px rgb(0 0 0 / 45%), 0 0 0 1px rgb(255 255 255 / 2%) inset;
}
.hero::after { content: none; }
.hero.tone-red, .banner.tone-red { --tone: #FF5A64; --tone-rgb: 255 90 100; }
.hero.tone-green, .banner.tone-green { --tone: #2EE59D; --tone-rgb: 46 229 157; }
.hero.tone-amber, .banner.tone-amber { --tone: #FFB547; --tone-rgb: 255 181 71; }
.banner-body { position: relative; z-index: 2; max-width: 64%; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.banner-sub { color: var(--sub); font-size: 13.5px; line-height: 1.4; }
.banner-sub b { color: var(--text); }
.banner .mascot-art { position: absolute; right: -34px; bottom: -18px; height: 112%; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 10px 30px rgb(0 0 0 / 50%)); animation: float 5s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-6px); } }
.banner-cta { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 13px; font-weight: 700; font-size: 14px;
  background: var(--tone); color: var(--accent-text); box-shadow: 0 8px 22px rgb(var(--tone-rgb) / 38%); }
.banner-stats { position: relative; z-index: 2; display: flex; gap: 8px; margin-top: 14px; }
.banner-stat { padding: 7px 10px; border-radius: 12px; background: rgb(7 8 15 / 55%); border: 1px solid rgb(255 255 255 / 6%); backdrop-filter: blur(8px); }
.banner-stat b { font-family: var(--font-display); font-size: 15px; font-weight: 800; display: block; color: var(--text); }
.banner-stat span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--hint); }
.hero-brand { font-family: var(--font-mono); color: var(--tone); letter-spacing: .16em; font-weight: 500; font-size: 11px; position: relative; z-index: 2; }
.hero-brand .dot { background: var(--tone); box-shadow: 0 0 10px var(--tone); }
.hero-sub { color: var(--sub); position: relative; z-index: 2; }
.hero-stat { background: rgb(7 8 15 / 55%); border-color: rgb(255 255 255 / 6%); }
.hero-stat b { font-family: var(--font-display); }
.hero-cta { color: var(--tone); }

/* ---------- mascots ---------- */
.mascot { display: block; object-fit: contain; flex: none; }
.mascot.render { object-fit: cover; object-position: 50% 30%; border-radius: 50%; }
.mascot-art { display: block; }
.mascot-tile { position: relative; flex: none; display: grid; place-items: center; border-radius: 18px;
  --tone-rgb: 124 131 255;
  background: radial-gradient(80% 80% at 50% 60%, rgb(var(--tone-rgb) / 26%), rgb(var(--tone-rgb) / 6%) 70%);
  border: 1px solid rgb(var(--tone-rgb) / 26%); box-shadow: 0 0 22px rgb(var(--tone-rgb) / 16%); overflow: hidden; }
.mascot-tile.tone-red { --tone-rgb: 255 90 100; }
.mascot-tile.tone-green { --tone-rgb: 46 229 157; }
.mascot-tile.tone-amber { --tone-rgb: 255 181 71; }
.mascot-tile.off { filter: grayscale(.9) brightness(.7); }

/* ---------- lessons ---------- */
.date-tile { background: rgb(124 131 255 / 10%); color: var(--link); border: 1px solid var(--line); }
.date-tile b { font-family: var(--font-display); font-weight: 800; }
.date-tile span { font-family: var(--font-mono); font-weight: 500; letter-spacing: .14em; }
.date-tile.today { background: linear-gradient(160deg, #8A90FF, #5B5FEF); color: var(--accent-text); border-color: transparent; box-shadow: var(--glow); }
.date-tile.live { background: linear-gradient(160deg, #FF7A82, #E2404B); color: #1A0A0C; border-color: transparent; box-shadow: 0 8px 26px rgb(255 90 100 / 40%); }
.date-tile.past { background: rgb(154 160 180 / 8%); color: var(--hint); }
.lesson-title { font-weight: 700; letter-spacing: -0.01em; }
.month-label { font-family: var(--font-mono); font-weight: 500; letter-spacing: .18em; color: var(--header); font-size: 11px; }

/* timeline with mascots */
.tl-step { grid-template-columns: 46px 1fr; }
.tl-step:not(:last-child)::after { left: 22px; top: 54px; background: var(--sep); }
.tl-step.done:not(:last-child)::after { background: linear-gradient(var(--ok), rgb(46 229 157 / 20%)); }
.tl-icon { width: 46px; height: 46px; border-radius: 15px; background: rgb(124 131 255 / 10%); border: 1px solid var(--line); overflow: hidden; }
.tl-icon .mascot { width: 40px !important; height: 40px !important; }
.tl-step.done .tl-icon { background: var(--ok-soft); border-color: rgb(46 229 157 / 40%); box-shadow: 0 0 18px rgb(46 229 157 / 25%); color: inherit; }
.tl-step.run .tl-icon { background: var(--info-soft); border-color: rgb(124 131 255 / 45%); box-shadow: 0 0 18px rgb(124 131 255 / 30%); color: inherit; }
.tl-step.bad .tl-icon { background: var(--bad-soft); border-color: rgb(255 90 100 / 45%); box-shadow: 0 0 18px rgb(255 90 100 / 25%); color: inherit; }
.tl-step.warn .tl-icon { background: var(--warn-soft); border-color: rgb(255 181 71 / 40%); color: inherit; }
.tl-title { font-weight: 700; }
.tl-time { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
.detail-kicker { font-family: var(--font-mono); font-weight: 500; font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  background: rgb(124 131 255 / 8%); color: var(--link); border: 1px solid rgb(124 131 255 / 45%); height: 28px; padding: 0 12px; }
.detail-kicker .ic { width: 13px; height: 13px; }
.file-thumb { background: linear-gradient(160deg, #FF7A82, #D6363B); }
.file-thumb.none, .media-thumb.none { background: rgb(124 131 255 / 6%); border-color: rgb(124 131 255 / 30%); color: var(--hint); }

/* ---------- people ---------- */
.avatar { box-shadow: 0 0 0 2px rgb(7 8 15 / 80%); }
.av0 { background: linear-gradient(145deg, #FF8A7A, #E2404B); }
.av1 { background: linear-gradient(145deg, #FFC56B, #F08A24); }
.av2 { background: linear-gradient(145deg, #9EA4FF, #5B5FEF); }
.av3 { background: linear-gradient(145deg, #5BF0B6, #17B57A); }
.av4 { background: linear-gradient(145deg, #6FE3F0, #1B9DB5); }
.av5 { background: linear-gradient(145deg, #A78BFA, #6D4AE8); }
.av6 { background: linear-gradient(145deg, #FF8FCB, #D9478F); }
.stack .avatar { border-color: var(--ink-2); }

/* ---------- unread ---------- */
.count-pill { background: var(--accent); color: var(--accent-text); font-family: var(--font-mono); box-shadow: 0 0 14px rgb(124 131 255 / 40%); }

/* ---------- callouts / empty / skeleton / toast ---------- */
.callout { border: 1px solid transparent; }
.callout.info { background: rgb(124 131 255 / 9%); color: #C9CCFF; border-color: rgb(124 131 255 / 22%); }
.callout.warn { background: rgb(255 181 71 / 8%); color: #FFD9A0; border-color: rgb(255 181 71 / 25%); }
.callout.bad { background: rgb(255 90 100 / 8%); color: #FFB3B8; border-color: rgb(255 90 100 / 28%); }
.empty-art { background: none; border: 0; width: auto; height: auto; }
.empty-art::after { content: none; }
.empty-mascot { width: 104px; height: 104px; margin: 0 auto 14px; display: grid; place-items: center; border-radius: 30px; position: relative;
  background: radial-gradient(60% 60% at 50% 55%, rgb(124 131 255 / 30%), transparent 70%); }
.empty.success .empty-mascot { background: radial-gradient(60% 60% at 50% 55%, rgb(46 229 157 / 28%), transparent 70%); }
.empty-title { font-size: 17px; font-weight: 800; }
.sk { background: linear-gradient(90deg, rgb(124 131 255 / 7%) 0%, rgb(124 131 255 / 15%) 50%, rgb(124 131 255 / 7%) 100%); background-size: 200% 100%; }
.toast { background: rgb(14 16 36 / 92%); border: 1px solid var(--line); box-shadow: 0 14px 40px rgb(0 0 0 / 50%), 0 0 24px rgb(124 131 255 / 18%); font-weight: 600; }
.toast.ok .ic { color: var(--ok); } .toast.err .ic { color: var(--bad); }

/* ---------- sheet ---------- */
.sheet-backdrop { background: rgb(3 4 10 / 66%); backdrop-filter: blur(4px); }
.sheet { background: linear-gradient(180deg, #11132B 0%, #0B0C18 100%); border-top: 1px solid var(--line); box-shadow: 0 -20px 60px rgb(0 0 0 / 55%); }
.sheet-grip { background: rgb(154 160 180 / 30%); }
.sheet-title { font-size: 18px; font-weight: 800; }
.sheet-close { background: rgb(124 131 255 / 10%); color: var(--hint); }

/* ---------- tab bar ---------- */
.tabbar {
  background: rgb(9 10 20 / 82%); border-top: 1px solid var(--line);
  backdrop-filter: saturate(160%) blur(22px); -webkit-backdrop-filter: saturate(160%) blur(22px);
  box-shadow: 0 -12px 40px rgb(0 0 0 / 40%);
}
.tab { color: rgb(154 160 180 / 75%); font-family: var(--font-mono); font-weight: 500; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.tab.on { color: var(--text); }
.tab.on .ic { color: var(--accent); filter: drop-shadow(0 0 8px rgb(124 131 255 / 70%)); }
.tab.on::before { content: ""; position: absolute; top: -7px; left: 50%; width: 26px; height: 3px; margin-left: -13px; border-radius: 0 0 3px 3px; background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.tab .tab-badge { background: var(--bad); border-color: var(--ink-1); font-family: var(--font-mono); }
.web-back { color: var(--link); font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }

/* ---------- telegram preview (always the dark chat) ---------- */
.tg-chat {
  background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 5%) 0 2px, transparent 3px) 0 0 / 34px 34px,
    radial-gradient(80% 80% at 100% 0%, rgb(91 95 239 / 25%), transparent 60%),
    linear-gradient(160deg, #0F1220 0%, #151A33 55%, #0E1024 100%);
  border: 1px solid var(--line);
}
.tg-bubble { background: #1C2033; color: #F5F6FF; }
.tg-btn { background: rgb(124 131 255 / 22%); border: 1px solid rgb(124 131 255 / 25%); }
.tg-time { color: #9AA0B4; }

/* ---------- marketing / pushes / ratings tweaks ---------- */
.push-hero-icon { background: none; box-shadow: none; width: auto; height: auto; }
.push-card .mascot-tile { width: 54px; height: 54px; }
.fbar-track, .hist-track, .progress-track, .dist-bar { background: rgb(124 131 255 / 9%); }
.stars-bg { color: rgb(154 160 180 / 25%); }
.stars-fg { color: #FFB547; text-shadow: 0 0 10px rgb(255 181 71 / 35%); }
.rating-badge, .emoji-cell, .emoji-tile, .weekdays .chip { background: rgb(124 131 255 / 8%); }
.emoji-cell.on { background: var(--accent-soft); box-shadow: 0 0 0 2px var(--accent), 0 0 18px rgb(124 131 255 / 30%); }
.ph-chip { background: rgb(124 131 255 / 12%); color: var(--link); border: 1px solid rgb(124 131 255 / 22%); }
.fmt-btn { background: rgb(124 131 255 / 8%); color: var(--sub); border: 1px solid var(--line); }
.fmt-emoji { color: var(--link); background: var(--accent-soft); }
.step-num { background: linear-gradient(145deg, #8A90FF, #5B5FEF); color: var(--accent-text); font-family: var(--font-display); box-shadow: 0 0 14px rgb(124 131 255 / 35%); }
.step-delay { color: var(--link); font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
.mono { font-family: var(--font-mono); }
.check-mark.ok { background: var(--ok-soft); color: var(--ok); }
.check-mark.bad { background: var(--bad-soft); color: var(--bad); }
.stat-tile { text-align: center; }
.stat-tile b { font-family: var(--font-display); }

/* banner: keep the mascot on the right and the copy readable */
.banner .mascot-art { right: -64px; bottom: -14px; height: 104%; z-index: 0; }
.banner::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(11 12 24 / 94%) 0%, rgb(11 12 24 / 78%) 40%, rgb(11 12 24 / 10%) 66%, transparent 80%); }
.banner-body, .banner-stats { z-index: 2; }

/* =====================================================================
   v2 — official UI kit (brand/components): neutral near-black, #111219 cards,
   28px radii, light segmented, gradient icon squares, boxed inputs with mono labels
   ===================================================================== */
:root, :root.dark {
  --ink-0: #0A0B0F;
  --ink-1: #0D0E13;
  --ink-2: #111219;
  --ink-3: #171923;
  --ink-4: #1E2030;
  --bg: #0A0B0F;
  --card: #111219;
  --card-solid: #111219;
  --accent: #7C8CFF;
  --accent-deep: #5B66F0;
  --link: #9AA6FF;
  --text: #F5F6FA;
  --hint: #8A8F9E;
  --sub: #B4B8C5;
  --header: #6E7383;
  --sep: rgb(255 255 255 / 6%);
  --line: rgb(255 255 255 / 7%);
  --soft: rgb(255 255 255 / 4%);
  --accent-soft: rgb(124 140 255 / 14%);
  --info: #7C8CFF;
  --info-soft: rgb(124 140 255 / 14%);
  --radius: 28px;
  --radius-sm: 16px;
  --shadow: none;
  --glow: 0 10px 32px rgb(124 140 255 / 35%);
}
body { background: #0A0B0F; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: -1;
  background: radial-gradient(70% 40% at 100% 0%, rgb(124 140 255 / 7%), transparent 60%); }

/* cards: flat #111219, hairline border, big radius */
.card { background: #111219; border: 1px solid rgb(255 255 255 / 7%); box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 28px; }
.row { min-height: 60px; padding: 13px 18px; }
.row + .row::before { left: 72px; }
.row.no-icon + .row::before, .row.no-icon::before { left: 18px; }

/* section label: mono caps grey, no dot */
.section-title { color: #6E7383; font-size: 11px; letter-spacing: .2em; }
.section-title::before { content: none; }
.section-head { margin: 0 6px 10px; }
.month-label { color: #6E7383; letter-spacing: .2em; }

/* list icon: gradient square with white glyph */
.row-icon, .action-tile .row-icon {
  width: 40px; height: 40px; border-radius: 12px; border: 0; box-shadow: 0 6px 16px rgb(var(--c) / 22%);
  color: #fff; background: linear-gradient(150deg, rgb(var(--c) / 100%) 0%, rgb(var(--c-deep, var(--c)) / 100%) 100%);
}
.row-icon .ic { width: 20px; height: 20px; }
:where(.row-icon) { --c: 124 140 255; --c-deep: 91 102 240; }
.t-blue { --c: 124 140 255; --c-deep: 91 102 240; }
.t-purple { --c: 167 120 250; --c-deep: 124 77 232; }
.t-teal { --c: 45 212 191; --c-deep: 14 165 160; }
.t-gold { --c: 255 189 89; --c-deep: 240 146 36; }
.t-pink { --c: 255 120 170; --c-deep: 226 72 128; }
.t-green { --c: 52 211 153; --c-deep: 16 170 110; }
.t-red { --c: 255 99 110; --c-deep: 226 64 75; }
.t-gray { --c: 120 126 142; --c-deep: 86 92 108; }

/* tags: translucent fill + coloured text, small radius, normal case */
.badge { height: 24px; padding: 0 9px; border-radius: 8px; border: 0; font-weight: 600; font-size: 12.5px; }
.b-ok { background: rgb(52 211 153 / 14%); color: #34D399; }
.b-warn, .b-gold { background: rgb(255 181 71 / 14%); color: #FFB547; }
.b-bad { background: rgb(255 99 110 / 14%); color: #FF636E; }
.b-info { background: rgb(124 140 255 / 16%); color: #9AA6FF; }
.b-mute { background: rgb(255 255 255 / 6%); color: #A3A8B6; }
.gchip { background: rgb(255 255 255 / 5%); border: 0; border-radius: 8px; color: #A3A8B6; }
.step-mini { border: 0; border-radius: 8px; background: rgb(255 255 255 / 5%); }
.step-mini.ok { background: rgb(52 211 153 / 14%); } .step-mini.bad { background: rgb(255 99 110 / 14%); }
.step-mini.run { background: rgb(124 140 255 / 16%); } .step-mini.warn { background: rgb(255 181 71 / 14%); }

/* status chip «● НАБОР ОТКРЫТ»: dark pill, hairline, mono grey, coloured dot */
.tag { background: #111219; border: 1px solid rgb(255 255 255 / 9%); color: #A3A8B6; letter-spacing: .18em; height: 30px; padding: 0 14px; }
.tag .tag-dot { background: var(--tone); box-shadow: 0 0 8px var(--tone); }
.tag.tone-red, .tag.tone-amber { color: var(--tone); border-color: rgb(var(--tone-rgb) / 35%); }
.detail-kicker { background: #111219; border: 1px solid rgb(255 255 255 / 9%); color: #9AA6FF; border-radius: 999px; }

/* segmented: dark container, active segment lighter */
.segmented { background: #111219; border: 1px solid rgb(255 255 255 / 6%); border-radius: 16px; padding: 4px; }
.segmented button { height: 38px; border-radius: 12px; color: #6E7383; }
.segmented button.on { background: #1F2130; color: #F5F6FA; box-shadow: 0 1px 0 rgb(255 255 255 / 6%) inset, 0 4px 12px rgb(0 0 0 / 35%); border: 1px solid rgb(255 255 255 / 8%); }

/* buttons: UI kit — filled accent / dark secondary, 16px radius */
.btn { height: 56px; border-radius: 16px; background: #7C8CFF; color: #0A0B12; box-shadow: 0 10px 30px rgb(124 140 255 / 30%); font-size: 16px; }
.btn::after { content: none; }
.btn.secondary { background: #111219; color: #F5F6FA; border: 1px solid rgb(255 255 255 / 10%); }
.btn.danger { background: #111219; color: #FF636E; border: 1px solid rgb(255 99 110 / 30%); }
.banner-cta { border-radius: 999px; height: 42px; padding: 0 18px; }
.save-bar .btn { box-shadow: 0 14px 40px rgb(124 140 255 / 40%); }
.inline-btn { background: rgb(124 140 255 / 14%); color: #9AA6FF; border: 0; border-radius: 10px; }
.inline-btn.danger { background: rgb(255 99 110 / 14%); color: #FF636E; border: 0; }
.action-tile { background: #111219; border: 1px solid rgb(255 255 255 / 7%); border-radius: 24px; }

/* FAB: rounded square with glow */
.fab { width: 60px; height: 60px; border-radius: 18px; background: #7C8CFF; color: #0A0B12;
  box-shadow: 0 0 0 6px rgb(124 140 255 / 10%), 0 14px 36px rgb(124 140 255 / 50%); }
.fab .ic { stroke-width: 2.8; width: 28px; height: 28px; }

/* toggles */
.toggle { width: 52px; height: 32px; background: #2A2C38; }
.toggle.on { background: #7C8CFF; box-shadow: 0 0 14px rgb(124 140 255 / 40%); }
.toggle::after { width: 28px; height: 28px; background: #fff; }

/* inputs: mono label on top, boxed field, accent border on focus */
.field { padding: 14px 18px; }
.field-label { font-family: var(--font-mono); font-weight: 500; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: #6E7383; margin-bottom: 8px; }
.field-label .ic { display: none; }
.field-input:not(.msg-text) {
  background-color: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); border-radius: 14px; padding: 13px 14px; min-height: 50px; font-size: 15.5px;
  transition: border-color .15s, box-shadow .15s;
}
textarea.field-input.msg-text { background: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); border-radius: 14px; padding: 12px 14px; }
.field-input:focus, textarea.field-input.msg-text:focus { outline: none; border-color: #7C8CFF; box-shadow: 0 0 0 3px rgb(124 140 255 / 18%); }
select.field-input { background-position: right 14px center; padding-right: 36px; }
.field-row .field-input { min-height: 46px; }
.btn-edit-fields { background: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); }
.btn-edit-fields .field-input { border: 0; background: transparent; padding: 4px 0; min-height: 0; }
.btn-edit-fields .field-input:focus { box-shadow: none; }
.hours .chip, .chips .chip, .weekdays .chip { background: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); color: #A3A8B6; border-radius: 12px; }
.hours .chip.on, .chips .chip.on, .weekdays .chip.on { background: #7C8CFF; color: #0A0B12; border-color: transparent; }
.stepper { background: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); border-radius: 12px; }

/* avatars: gradient circles */
.av0 { background: linear-gradient(145deg, #8A98FF, #5B66F0); }
.av1 { background: linear-gradient(145deg, #C084FC, #8B5CF6); }
.av2 { background: linear-gradient(145deg, #5EEAD4, #14B8A6); }
.av3 { background: linear-gradient(145deg, #FFC56B, #F59E0B); }
.av4 { background: linear-gradient(145deg, #FF8FB8, #EC4899); }
.av5 { background: linear-gradient(145deg, #7DD3FC, #3B82F6); }
.av6 { background: linear-gradient(145deg, #A5B4FC, #6366F1); }
.avatar { box-shadow: none; }

/* tab bar: active = icon in a lit plaque + accent label */
.tabbar { background: rgb(13 14 19 / 92%); border-top: 1px solid rgb(255 255 255 / 6%); box-shadow: none; padding-top: 8px; }
.tab { font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; color: #6E7383; gap: 4px; }
.tab .ic { width: 22px; height: 22px; padding: 0; box-sizing: content-box; }
.tab-icon { display: grid; place-items: center; width: 52px; height: 30px; border-radius: 12px; transition: background .2s; }
.tab.on .tab-icon { background: rgb(124 140 255 / 18%); }
.tab.on { color: #9AA6FF; }
.tab.on .ic { color: #9AA6FF; filter: none; transform: none; }
.tab.on::before { content: none; }
.tab .tab-badge { top: -2px; margin-left: 8px; background: #FF5A64; border: 2px solid #0D0E13; font-family: var(--font-body); font-weight: 700; }

/* banners: neutral black with a mascot glow on the right */
.hero, .banner {
  border-radius: 28px; border: 1px solid rgb(255 255 255 / 7%); box-shadow: none;
  background:
    radial-gradient(70% 110% at 92% 70%, rgb(var(--tone-rgb) / 24%) 0%, transparent 60%),
    linear-gradient(160deg, #0F1017 0%, #111219 100%);
}
.banner::before { background: linear-gradient(90deg, rgb(15 16 23 / 96%) 0%, rgb(15 16 23 / 80%) 42%, rgb(15 16 23 / 10%) 68%, transparent 82%); }
.banner .mascot-art { right: -54px; bottom: -6px; height: 100%; }
.banner-stat { background: rgb(10 11 15 / 70%); border: 1px solid rgb(255 255 255 / 7%); border-radius: 14px; }
.banner-stat b { font-family: var(--font-body); font-weight: 800; font-size: 17px; }
.big-num, .push-hero-num, .rating-avg, .stat-tile b { font-family: var(--font-body); font-weight: 800; letter-spacing: -0.035em; }
.big-num { font-size: 46px; }

/* misc surfaces */
.icon-btn { background: #111219; border: 1px solid rgb(255 255 255 / 8%); color: #9AA6FF; backdrop-filter: none; }
.sheet { background: #0F1017; border-top: 1px solid rgb(255 255 255 / 8%); }
.toast { background: #171923; border: 1px solid rgb(255 255 255 / 8%); box-shadow: 0 14px 40px rgb(0 0 0 / 55%); }
.callout.info { background: rgb(124 140 255 / 8%); border-color: rgb(124 140 255 / 18%); color: #C7CDFF; }
.date-tile { background: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); color: #9AA6FF; border-radius: 16px; }
.date-tile.today { background: #7C8CFF; color: #0A0B12; }
.mascot-tile { border-radius: 16px; }
.tl-icon { border-radius: 16px; background: #0B0C11; border-color: rgb(255 255 255 / 8%); }
.tg-chat { background: radial-gradient(circle at 20% 20%, rgb(255 255 255 / 4%) 0 2px, transparent 3px) 0 0 / 34px 34px, linear-gradient(160deg, #0E1018, #141826); border-color: rgb(255 255 255 / 7%); border-radius: 24px; }
.tg-bubble { background: #1C1F2B; }
.sk { background: linear-gradient(90deg, #111219 0%, #1A1C26 50%, #111219 100%); background-size: 200% 100%; }
.empty-mascot { width: 128px; height: 128px; background: radial-gradient(60% 60% at 50% 55%, rgb(124 140 255 / 22%), transparent 70%); }
.empty-mascot .mascot.render { border-radius: 24px; object-fit: cover; }
.count-pill { background: rgb(124 140 255 / 18%); color: #9AA6FF; box-shadow: none; }
.web-back { color: #9AA6FF; }
.brand-row .tag { height: 28px; }
select.field-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A8F9E' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: 14px; background-position: right 14px center; }
/* local 3D render inside small tiles: crop to the head */
.mascot.render { border-radius: 0; object-fit: cover; object-position: 58% 16%; transform: scale(1.75); transform-origin: 50% 30%; }
.mascot-tile, .tl-icon, .push-hero-icon { overflow: hidden; }
.push-hero-icon { width: 56px; height: 56px; border-radius: 18px; background: #0B0C11; border: 1px solid rgb(255 255 255 / 8%); display: grid; place-items: center; }
.empty-mascot { overflow: hidden; border-radius: 32px; border: 1px solid rgb(255 255 255 / 6%); background: radial-gradient(70% 70% at 50% 60%, rgb(124 140 255 / 22%), #0B0C11 75%); }
.empty-mascot .mascot.render { transform: scale(1.35); object-position: 58% 30%; }

/* =====================================================================
   v3 — custom duotone icons + one-palette brand tiles + centred layout
   ===================================================================== */
.ic .s { fill: none; stroke: var(--ic-s, currentColor); stroke-width: 2.1; }
.ic .a { fill: none; stroke: var(--ic-a, url(#gt-duo)); stroke-width: 2.1; }
.ic .d { fill: var(--ic-d, url(#gt-duo)); stroke: none; }
.ic-sm .s, .ic-sm .a { stroke-width: 2.3; }

/* semantic tones only: live red, ok green, reminder amber */
.tone-red, .t-red, .tl-step.bad, .b-bad, .callout.bad, .danger, .row.danger { --ic-d: url(#gt-duo-red); --ic-a: url(#gt-duo-red); }
.tone-green, .t-green, .tl-step.done, .b-ok, .toast.ok { --ic-d: url(#gt-duo-green); --ic-a: url(#gt-duo-green); }
.tone-amber, .t-gold, .tl-step.warn, .b-warn, .callout.warn { --ic-d: url(#gt-duo-amber); --ic-a: url(#gt-duo-amber); }

/* inline icons inside text/chips follow the text colour */
.badge .ic, .step-mini .ic, .gchip .ic, .lesson-meta .ic, .detail-sub .ic, .detail-kicker .ic, .section-action .ic,
.inline-btn .ic, .chip .ic, .web-back .ic, .tl-time .ic, .run-stats .ic, .step-meta .ic, .step-delay .ic, .when-line .ic,
.field-label .ic, .btn.secondary .ic, .btn.danger .ic, .toast .ic, .callout .ic, .tg-btn .ic, .row-right .ic {
  --ic-d: currentColor; --ic-a: currentColor;
}
.badge .ic .d, .step-mini .ic .d, .gchip .ic .d, .lesson-meta .ic .d, .detail-sub .ic .d, .detail-kicker .ic .d, .section-action .ic .d,
.inline-btn .ic .d, .chip .ic .d, .when-line .ic .d, .step-meta .ic .d, .step-delay .ic .d, .btn.secondary .ic .d, .btn.danger .ic .d,
.toast .ic .d, .callout .ic .d, .row-right .ic .d { opacity: .28; }
/* on the accent fill (primary buttons, FAB, active chips) */
.btn:not(.secondary):not(.danger) .ic, .fab .ic, .banner-cta .ic, .chip.on .ic, .segmented button.on .ic { --ic-d: rgb(10 11 18 / 28%); --ic-a: currentColor; }

/* brand tiles: dark plate, indigo hairline + soft glow, chrome stroke */
.row-icon, .action-tile .row-icon {
  --tile-rgb: 124 140 255;
  width: 42px; height: 42px; border-radius: 13px; color: #EEF0FA;
  background: linear-gradient(160deg, #1A1D30 0%, #141726 100%);
  border: 1px solid rgb(var(--tile-rgb) / 34%);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 2%) inset, 0 1px 0 rgb(255 255 255 / 7%) inset, 0 6px 22px rgb(var(--tile-rgb) / 18%);
  --ic-s: url(#gt-chrome);
}
.row-icon .ic { width: 22px; height: 22px; filter: drop-shadow(0 0 6px rgb(var(--tile-rgb) / 35%)); }
.t-blue, .t-purple, .t-teal, .t-pink { --tile-rgb: 124 140 255; }
.row-icon.t-red { --tile-rgb: 255 90 100; }
.row-icon.t-green { --tile-rgb: 46 229 157; }
.row-icon.t-gold { --tile-rgb: 255 181 71; }
.row-icon.t-gray { --tile-rgb: 138 143 158; box-shadow: 0 1px 0 rgb(255 255 255 / 6%) inset; border-color: rgb(255 255 255 / 10%); }
.row-icon.has-emoji .emoji-ic { display: block; object-fit: contain; }
.row-icon.has-emoji .ic { width: 22px; height: 22px; }
.action-tile .row-icon { width: 48px; height: 48px; border-radius: 15px; }
.emoji-ic { flex: none; }

/* timeline step plate */
.tl-icon { --tile-rgb: 124 140 255; background: linear-gradient(160deg, #1A1D30, #141726); border: 1px solid rgb(var(--tile-rgb) / 30%); color: #EEF0FA; --ic-s: url(#gt-chrome); }
.tl-icon .ic { width: 24px; height: 24px; }
.tl-step.done .tl-icon { --tile-rgb: 46 229 157; background: linear-gradient(160deg, #13261F, #111a17); }
.tl-step.run .tl-icon { --tile-rgb: 124 140 255; box-shadow: 0 0 20px rgb(124 140 255 / 30%); }
.tl-step.bad .tl-icon { --tile-rgb: 255 90 100; background: linear-gradient(160deg, #2A1519, #1A1113); }
.tl-step.warn .tl-icon { --tile-rgb: 255 181 71; }

/* tab bar icons: duotone dims when inactive */
.tab { --ic-d: rgb(138 143 158 / 30%); --ic-a: currentColor; }
.tab.on { --ic-d: url(#gt-duo); --ic-a: url(#gt-duo); --ic-s: #EEF0FA; }
.tab.on .tab-icon { background: rgb(124 140 255 / 16%); box-shadow: 0 0 0 1px rgb(124 140 255 / 22%) inset, 0 0 18px rgb(124 140 255 / 18%); }

/* empty-state / chevron / misc */
.chev { --ic-s: rgb(138 143 158 / 55%); }
.icon-btn { --ic-a: url(#gt-duo); }

/* ---------- centred container (Telegram Desktop / wide windows) ---------- */
:root { --app-w: 600px; --gutter: 16px; --safe-b: var(--tg-safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)); }
#app { width: 100%; }
.screen-wrap { width: 100%; }
.screen {
  box-sizing: border-box; width: 100%; max-width: var(--app-w); margin-left: auto; margin-right: auto;
  padding-left: var(--gutter); padding-right: var(--gutter);
}
.web-back { display: flex; width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--app-w) - 2 * var(--gutter)); margin: 12px auto 0; padding-left: 0; }
.tabbar { padding-left: max(8px, calc((100% - var(--app-w)) / 2 + 8px)); padding-right: max(8px, calc((100% - var(--app-w)) / 2 + 8px)); }
.fab { right: max(18px, calc((100vw - var(--app-w)) / 2 + 18px)); }
.sheet { left: 0; right: 0; margin-left: auto; margin-right: auto; max-width: var(--app-w); box-sizing: border-box; }
.toast-wrap { left: 0; right: 0; margin: 0 auto; max-width: var(--app-w); }
.boot { left: 0; right: 0; }

/* ---------- roles ---------- */
.team-only { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: 8vh; }
.report-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: rgb(255 255 255 / 6%); border-bottom: 1px solid rgb(255 255 255 / 6%); }
.report-row > div { background: #111219; padding: 12px 10px; text-align: center; }
.report-row b { display: block; font-weight: 800; font-size: 18px; letter-spacing: -.02em; }
.report-row span { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: #6E7383; }
.row.question { align-items: flex-start; }
.q-num { width: 26px; height: 26px; border-radius: 9px; flex: none; display: grid; place-items: center; font-weight: 800; font-size: 12.5px;
  background: rgb(124 140 255 / 14%); color: #9AA6FF; margin-top: 1px; }
.q-text { font-size: 15px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }