/* общее для всех вкладок: палитра, шрифты, шапка, нижняя панель */
/* шрифты локально: без похода в Google Fonts, работают офлайн и в APK */
@font-face { font-family: "Unbounded"; font-weight: 300 900; font-display: swap; src: url(fonts/Unbounded-cyrillic.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: 300 900; font-display: swap; src: url(fonts/Unbounded-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-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap; src: url(fonts/GolosText-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 600; font-display: swap; src: url(fonts/GolosText-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-face { font-family: "JetBrains Mono"; font-weight: 500 700; font-display: swap; src: url(fonts/JetBrainsMono-cyrillic.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 700; font-display: swap; src: url(fonts/JetBrainsMono-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; }
:root {
  /* палитра печатного постера: чёрная бумага, кремовая краска, малиновый и янтарь */
  --paper: #0f0e0d;      /* фон */
  --concrete: #1c1a17;
  --line: #3b3630;
  --ink: #efe5cf;        /* кремовая краска: текст, линии, светлые плашки */
  --ink-mute: #6f6656;   /* приглушённый текст на кремовом */
  --mute: #9a917f;
  --claret: #c8102e;     /* малиновый — заливки, крем на нём читается */
  --claret-2: #ff3355;   /* он же для текста на чёрном */
  --amber: #e9a23b;      /* янтарь — «скоро», стикеры */
  --halftone: radial-gradient(circle, #5a0514 1.3px, transparent 1.7px) 0 0/5px 5px;  /* растр на малиновом */
  --display: "Unbounded", sans-serif;
  --body: "Golos Text", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --pad: 16px;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--paper); color: var(--ink); }
body { font: 15px/1.4 var(--body); max-width: 480px; margin: 0 auto; min-height: 100dvh;
  padding-bottom: calc(76px + var(--safe-area-inset-bottom, env(safe-area-inset-bottom))); overflow-x: hidden; }
/* зерно бетона */
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .14; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.mono { font: 500 10.5px/1.3 var(--mono); letter-spacing: .07em; text-transform: uppercase; }
.mute { color: var(--mute); }
/* иконки из icons.svg: штрих — цвет текста, сплошной блок — --ic-accent */
.ic { width: 20px; height: 20px; display: inline-block; vertical-align: middle; flex: none; overflow: visible; }

.top { display: flex; justify-content: space-between; padding: calc(10px + var(--safe-area-inset-top, env(safe-area-inset-top))) var(--pad) 8px; border-bottom: 2px solid var(--ink); position: relative; margin-bottom: 8px; }
/* шахматная лента под шапкой, как на постере */
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 8px;
  background: repeating-conic-gradient(var(--ink) 0 25%, transparent 0 50%) 0 0/8px 8px; }

.label { display: flex; justify-content: space-between; align-items: baseline; margin: 22px var(--pad) 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); }
.label h2 { font: 800 13px/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.label h2::before { content: "✦"; color: var(--claret-2); margin-right: 7px; font-size: 11px; vertical-align: 1px; }

/* ── нижняя панель ── */
.tabs { position: fixed; z-index: 40; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  display: grid; grid-template-columns: repeat(4, 1fr); background: var(--paper); border-top: 2px solid var(--ink);
  padding-bottom: var(--safe-area-inset-bottom, env(safe-area-inset-bottom)); }
.tabs a { padding: 10px 0 11px; display: grid; justify-items: center; gap: 5px; border-right: 1px solid var(--line); }
.tabs a:last-child { border: 0; }
.tabs a { color: var(--mute); }
.tabs .ic { width: 23px; height: 23px; }
.tabs [aria-current] { color: var(--claret-2); }
.tabs [aria-current] .ic { color: var(--ink); --ic-accent: var(--claret-2); filter: drop-shadow(2px 2px 0 var(--claret)); }

@media (min-width: 481px) { body { border-left: 2px solid var(--ink); border-right: 2px solid var(--ink); } }