/* ---- base ---- */
body { margin: 0; font-family: var(--font-sans); font-size: 15px; line-height: 22px; font-weight: 500; background: var(--paper); color: var(--ink); -webkit-font-smoothing: antialiased; }
.tk-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-4); }
.tk-col { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); max-width: 393px; }
.tk-icon { flex: none; display: block; }
.tk-hand { font-family: var(--font-hand); font-size: 21px; line-height: 24px; font-weight: 600; }
.tk-mono { font-family: var(--font-mono); font-size: 14px; line-height: 20px; font-weight: 500; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---- Button ---- */
.tk-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--button-h-md); padding: 0 var(--space-5); border-radius: var(--radius-md); border: 2px solid transparent; font-family: var(--font-sans); font-size: 15px; font-weight: 700; letter-spacing: .005em; cursor: pointer; transition: transform 120ms ease, box-shadow 120ms ease, background-color 120ms ease; -webkit-tap-highlight-color: transparent; }
.tk-btn-lg { min-height: var(--button-h-lg); padding: 0 var(--space-6); font-size: 17px; border-radius: var(--radius-lg); }
.tk-btn-block { display: flex; width: 100%; }
.tk-btn-primary { background: var(--highlighter); color: var(--on-highlighter); border-color: var(--on-highlighter); box-shadow: var(--shadow-sticker); }
.tk-btn-primary:active { transform: translate(2px, 2px); box-shadow: var(--shadow-sticker-pressed); }
.tk-btn-secondary { background: var(--paper-raised); color: var(--ink); border-color: var(--line-strong); }
.tk-btn-secondary:active { background: var(--paper-sunken); }
.tk-btn-ghost { background: transparent; color: var(--ink); }
.tk-btn-ghost:active { background: var(--paper-sunken); }
.tk-btn-danger { background: var(--critical); color: var(--on-critical); }
.tk-btn:disabled { background: var(--paper-sunken); color: var(--ink-faint); border-color: var(--line); box-shadow: none; cursor: not-allowed; transform: none; }

/* ---- ShutterButton ---- */
.tk-shutter { position: relative; width: var(--shutter); height: var(--shutter); border-radius: 50%; border: 4px solid var(--ink); background: var(--paper-raised); padding: 0; cursor: pointer; display: grid; place-items: center; -webkit-tap-highlight-color: transparent; }
.tk-shutter-core { width: 56px; height: 56px; border-radius: 50%; background: var(--highlighter); border: 2px solid var(--on-highlighter); transition: transform 150ms ease; }
.tk-shutter:active .tk-shutter-core { transform: scale(.88); }
.tk-shutter-ready { border-color: var(--mint); box-shadow: 0 0 0 6px var(--mint-soft); }
.tk-shutter-busy .tk-shutter-core { background: var(--paper-sunken); border-color: var(--line-strong); }
.tk-shutter-busy::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 4px solid transparent; border-top-color: var(--highlighter); animation: tk-spin 900ms linear infinite; }
@keyframes tk-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tk-shutter-busy::after { animation-duration: 3s; } .tk-btn, .tk-density-thumb, .tk-meter-fill { transition: none; } }

/* ---- SubjectChip ---- */
.tk-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: 0 var(--space-3) 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--line-strong); background: var(--paper-raised); color: var(--ink); font-size: 14px; font-weight: 700; cursor: pointer; }
.tk-chip.is-selected { background: var(--highlighter-soft); border-color: var(--ink); }
.tk-chip-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; display: inline-block; }

/* ---- StatusBadge ---- */
.tk-badge { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: 12px; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.tk-badge-draft { background: var(--paper-sunken); color: var(--ink-muted); }
.tk-badge-done { background: var(--mint-soft); color: var(--mint-text); }
.tk-badge-printed { background: var(--highlighter-soft); color: var(--ink); }
.tk-badge-check { background: var(--highlighter-soft); color: var(--ink); border: 1.5px dashed var(--ink); }
.tk-badge-test { background: var(--coral-soft); color: var(--coral-text); }

/* ---- DensitySlider ---- */
.tk-density { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 361px; }
.tk-density-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-2); }
.tk-density-label { font-size: 14px; font-weight: 700; }
.tk-density-hint { font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.tk-density-track { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); padding: 4px; border-radius: var(--radius-pill); background: var(--paper-sunken); border: 1.5px solid var(--line); }
.tk-density-thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / 3); border-radius: var(--radius-pill); background: var(--highlighter); border: 2px solid var(--on-highlighter); box-sizing: border-box; transition: transform 220ms cubic-bezier(.3, 1.4, .5, 1); }
.tk-density-opt { position: relative; z-index: 1; min-height: 44px; border: 0; background: none; border-radius: var(--radius-pill); font-size: 14px; font-weight: 700; color: var(--ink-muted); cursor: pointer; }
.tk-density-opt.is-on { color: var(--on-highlighter); }

/* ---- Tahakometr ---- */
.tk-meter { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; max-width: 361px; padding: var(--space-3) var(--space-4); border-radius: var(--radius-lg); background: var(--paper-raised); border: 1px solid var(--line); box-sizing: border-box; }
.tk-meter-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); }
.tk-meter-title { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 14px; font-weight: 700; }
.tk-meter-msg { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.tk-meter-fit .tk-meter-msg { color: var(--mint-text); }
.tk-meter-over .tk-meter-msg { color: var(--critical); }
.tk-meter-track { height: 12px; border-radius: var(--radius-pill); background: var(--paper-sunken); border: 1px solid var(--line); overflow: hidden; }
.tk-meter-fill { height: 100%; border-radius: var(--radius-pill); background: var(--highlighter); transition: width 300ms ease; }
.tk-meter-fit .tk-meter-fill { background: var(--mint); }
.tk-meter-over .tk-meter-fill { background: repeating-linear-gradient(-45deg, var(--critical) 0 6px, var(--coral) 6px 12px); }
.tk-meter-fix { align-self: flex-start; min-height: 36px; padding: 0 var(--space-3); border-radius: var(--radius-pill); border: 1.5px solid var(--ink); background: var(--highlighter-soft); font-size: 13px; font-weight: 700; cursor: pointer; }

/* ---- ContentBlock ---- */
.tk-block { position: relative; display: flex; flex-direction: column; gap: var(--space-1); max-width: 361px; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--paper-raised); border: 1.5px solid var(--line); box-shadow: var(--shadow-card); box-sizing: border-box; }
.tk-block.is-pinned { border-color: var(--ink); }
.tk-block.is-uncertain { background: var(--highlighter-soft); border: 1.5px dashed var(--ink); }
.tk-block.is-muted { opacity: .55; box-shadow: none; }
.tk-block-head { display: flex; align-items: center; gap: var(--space-2); }
.tk-block-type { font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-muted); }
.tk-block-spacer { flex: 1; }
.tk-icon-btn { display: grid; place-items: center; width: var(--tap-min); height: var(--tap-min); margin: -12px -8px -12px 0; border: 0; border-radius: var(--radius-md); background: none; color: var(--ink-faint); cursor: pointer; }
.tk-icon-btn.is-on { color: var(--ink); }
.tk-icon-btn.is-on .tk-icon { fill: var(--highlighter); }
.tk-block-title { margin: 0; font-size: 17px; line-height: 22px; font-weight: 700; }
.tk-block-body { font-size: 15px; line-height: 22px; }
.tk-block-src { display: inline-flex; align-items: center; gap: var(--space-1); font-size: 12px; font-weight: 600; color: var(--ink-muted); }

/* ---- CheatCard ---- */
.tk-card { display: flex; gap: var(--space-3); width: 100%; max-width: 361px; padding: var(--space-3); border-radius: var(--radius-lg); background: var(--paper-raised); border: 1px solid var(--line); box-shadow: var(--shadow-card); box-sizing: border-box; cursor: pointer; }
.tk-card-thumb { flex: none; width: 64px; height: 84px; border-radius: var(--radius-sm); background: var(--subj); display: grid; place-items: center; }
.tk-card-sheet { width: 44px; height: 62px; border-radius: 3px; background: var(--print-paper); display: flex; flex-direction: column; gap: 4px; padding: 6px 5px; box-sizing: border-box; transform: rotate(-4deg); box-shadow: 2px 2px 0 rgba(0, 0, 0, .18); }
.tk-card-sheet i { display: block; height: 3px; border-radius: 2px; background: #c9c9c9; }
.tk-card-sheet i:nth-child(1) { width: 70%; background: #777777; }
.tk-card-sheet i:nth-child(3) { width: 80%; background: var(--print-highlight); }
.tk-card-sheet i:nth-child(5) { width: 55%; }
.tk-card-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; flex: 1; }
.tk-card-meta { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--ink-muted); }
.tk-card-sep { color: var(--ink-faint); }
.tk-card-title { font-size: 17px; line-height: 22px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tk-card-foot { display: flex; align-items: center; gap: var(--space-2); margin-top: auto; flex-wrap: wrap; }
.tk-countdown { display: inline-flex; align-items: center; gap: var(--space-1); height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-pill); background: var(--paper-sunken); color: var(--ink-muted); font-size: 12px; font-weight: 700; }
.tk-countdown.is-soon { background: var(--coral-soft); color: var(--coral-text); }

/* ---- FormatPicker ---- */
.tk-formats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-2); max-width: 361px; }
.tk-format { position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: var(--space-3) var(--space-1) var(--space-2); border-radius: var(--radius-md); border: 1.5px solid var(--line); background: var(--paper-raised); cursor: pointer; }
.tk-format.is-on { border: 2px solid var(--ink); background: var(--highlighter-soft); box-shadow: var(--shadow-sticker); }
.tk-format-pic { height: 62px; display: flex; align-items: flex-end; justify-content: center; }
.tk-format-sheet { display: block; border-radius: 2px; background: var(--print-paper); border: 1.5px solid var(--ink-muted); box-sizing: border-box; }
.tk-format.is-on .tk-format-sheet { border-color: var(--ink); background: var(--highlighter); }
.tk-format-id { font-family: var(--font-display); font-size: 17px; font-weight: 800; margin-top: var(--space-1); }
.tk-format-name { font-size: 12px; line-height: 14px; font-weight: 700; text-align: center; }
.tk-format-per { font-size: 11px; line-height: 14px; font-weight: 600; color: var(--ink-muted); }
.tk-format-tag { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); padding: 0 6px; height: 18px; line-height: 18px; border-radius: var(--radius-pill); background: var(--coral); color: var(--on-highlighter); font-size: 10.5px; font-weight: 800; white-space: nowrap; }

/* ---- TabBar ---- */
.tk-tabbar { display: grid; grid-template-columns: 1fr 1fr 88px 1fr 1fr; align-items: center; height: var(--tabbar-h); max-width: 393px; padding: 0 var(--space-2); background: var(--paper-raised); border-top: 1px solid var(--line); box-shadow: var(--shadow-sheet); box-sizing: border-box; }
.tk-tab { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: var(--tap-min); border: 0; background: none; color: var(--ink-muted); font-size: 11px; font-weight: 700; cursor: pointer; }
.tk-tab.is-on { color: var(--ink); }
.tk-tab.is-on .tk-icon { fill: var(--highlighter); }
.tk-tab-fab { justify-self: center; display: grid; place-items: center; width: 64px; height: 64px; margin-top: -28px; border-radius: 50%; border: 2px solid var(--on-highlighter); background: var(--highlighter); color: var(--on-highlighter); box-shadow: var(--shadow-sticker); cursor: pointer; }
.tk-tab-fab:active { transform: translate(2px, 2px); box-shadow: var(--shadow-sticker-pressed); }

/* ---- MascotTip ---- */
.tk-mascot { display: flex; align-items: flex-end; gap: var(--space-2); max-width: 361px; }
.tk-raccoon { flex: none; }
.tk-rc-fur { fill: var(--raccoon-fur); }
.tk-rc-face { fill: var(--paper-raised); }
.tk-rc-mask { fill: var(--raccoon-mask); }
.tk-rc-eye { fill: #ffffff; }
.tk-rc-pupil { fill: var(--raccoon-mask); }
.tk-rc-mouth { fill: none; stroke: var(--raccoon-mask); stroke-width: 2; stroke-linecap: round; }
.tk-rc-mouth-fill { fill: var(--coral); stroke: var(--raccoon-mask); stroke-width: 1.5; stroke-linejoin: round; }
.tk-mascot-bubble { position: relative; display: flex; flex-direction: column; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-lg) var(--radius-lg) var(--radius-lg) 4px; background: var(--highlighter-soft); color: var(--ink); }
.tk-mascot-oops .tk-mascot-bubble { background: var(--coral-soft); }
.tk-mascot-text { font-size: 14px; line-height: 20px; font-weight: 600; }

/* ---- AchievementBadge ---- */
.tk-ach { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); width: 112px; text-align: center; }
.tk-ach-medal { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--radius-xl); transform: rotate(-6deg); }
.tk-ach.is-earned .tk-ach-medal { background: var(--coral); color: var(--on-highlighter); border: 2px solid var(--on-highlighter); box-shadow: var(--shadow-sticker); }
.tk-ach.is-locked .tk-ach-medal { background: var(--paper-sunken); color: var(--ink-faint); border: 2px dashed var(--line-strong); transform: none; }
.tk-ach-title { font-size: 14px; line-height: 18px; font-weight: 700; margin-top: var(--space-2); }
.tk-ach.is-locked .tk-ach-title { color: var(--ink-muted); }
.tk-ach-desc { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--ink-muted); }

/* ---- CheatSheetPrint ---- */
.tk-print { width: 280px; aspect-ratio: 105 / 148; padding: 10px 11px; box-sizing: border-box; background: var(--print-paper); color: var(--print-ink); font-family: var(--font-print); border-radius: 2px; box-shadow: 0 2px 10px rgba(0, 0, 0, .18); overflow: hidden; }
.tk-print-a4 { width: 320px; aspect-ratio: 210 / 297; }
.tk-print-a7 { width: 200px; aspect-ratio: 74 / 105; }
.tk-print-head { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; padding-bottom: 4px; margin-bottom: 6px; border-bottom: 2px solid var(--subj); }
.tk-print-bw .tk-print-head { border-bottom-color: var(--print-ink); }
.tk-print-title { font-size: 13.33px; line-height: 15px; font-weight: 700; }
.tk-print-meta { font-size: 8.67px; color: var(--print-muted); white-space: nowrap; }
.tk-print-cols { column-count: 2; column-gap: 10px; column-rule: 0.5px solid var(--print-rule); }
.tk-print-block { break-inside: avoid; margin-bottom: 6px; }
.tk-print-h { font-size: 10.67px; line-height: 12.5px; font-weight: 700; margin-bottom: 1px; }
.tk-print-color .tk-print-h { color: var(--print-ink); text-decoration: underline; text-decoration-color: var(--subj); text-decoration-thickness: 2px; text-underline-offset: 2px; }
.tk-print-t { font-size: 8.67px; line-height: 10.5px; }
.tk-print-a4 .tk-print-t, .tk-print-a5 .tk-print-t { font-size: 9.33px; line-height: 11.5px; }
.tk-print-a7 .tk-print-t { font-size: 8px; line-height: 9.5px; }
.tk-print mark { background: var(--print-highlight); color: var(--print-ink); font-weight: 700; padding: 0 1px; }
.tk-print-bw mark { background: none; text-decoration: underline; }