:root {
  color-scheme: dark;
  --bg: var(--tg-theme-bg-color, #101116);
  --text: var(--tg-theme-text-color, #f5f4fa);
  --muted: var(--tg-theme-hint-color, #9696a5);
  --accent: var(--tg-theme-button-color, #a78bfa);
  --panel: color-mix(in srgb, var(--text) 5%, var(--bg));
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); }
.app-shell { width: min(100%, 560px); min-height: 100vh; margin: 0 auto; padding: max(22px, env(safe-area-inset-top)) 20px calc(78px + env(safe-area-inset-bottom)); }
.topbar { display: flex; align-items: center; gap: 12px; padding: 8px 2px 20px; }
.eyebrow { margin: 0 0 3px; color: var(--muted); font-size: 11px; }
h1 { margin: 0; font-size: 22px; font-weight: 700; }
.back-button { width: 38px; height: 38px; border: 0; border-radius: 12px; background: var(--panel); color: var(--text); font: inherit; font-size: 25px; cursor: pointer; }
.back-button[hidden] { display: none; }
.section-intro { padding: 0 2px 14px; }
.section-description, .character-description, .story-character-description, .story-description, .empty-state-description { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.character-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.character-card { overflow: hidden; padding: 0; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 18px; background: var(--panel); color: var(--text); text-align: left; font: inherit; cursor: pointer; transition: transform .15s ease, border-color .15s ease; }
.character-card:active { transform: scale(.98); }
.character-card:focus-visible, .back-button:focus-visible, .tab-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.character-image { display: block; width: 100%; aspect-ratio: 1.15; object-fit: cover; background: var(--panel); }
.character-card-body { position: relative; display: grid; gap: 5px; min-height: 62px; padding: 12px 36px 13px 13px; }
.character-name { font-size: 15px; font-weight: 650; }
.character-description { font-size: 12px; }
.card-arrow { position: absolute; top: 50%; right: 13px; color: var(--accent); font-size: 20px; transform: translateY(-50%); }
.story-character { display: flex; align-items: center; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 18px; background: var(--panel); }
.story-character-image { width: 76px; height: 76px; flex: 0 0 auto; border-radius: 14px; object-fit: cover; background: var(--bg); }
.story-character-details { display: grid; gap: 5px; }
.story-character-name { margin: 0; font-size: 17px; }
.list-heading { margin: 25px 2px 12px; font-size: 17px; }
.empty-state { display: grid; justify-items: center; gap: 8px; margin-top: 18px; padding: 28px 18px; border: 1px dashed color-mix(in srgb, var(--text) 16%, transparent); border-radius: 18px; text-align: center; }
.empty-state-mark { color: var(--accent); font-size: 23px; }
.empty-state-title { margin: 0; font-size: 16px; }
.empty-state-description { max-width: 290px; font-size: 13px; }
.story-list { display: grid; gap: 10px; }
.story-card { padding: 15px; border: 1px solid color-mix(in srgb, var(--text) 8%, transparent); border-radius: 16px; background: var(--panel); }
.story-title { margin: 0; font-size: 15px; }
.story-description { margin-top: 6px; font-size: 13px; }
.tabbar { position: fixed; z-index: 2; right: 0; bottom: 0; left: 0; display: flex; justify-content: center; gap: 8px; padding: 10px 18px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid rgba(255, 255, 255, .08); background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(18px); }
.tab-button { width: min(50%, 250px); padding: 11px 8px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font: inherit; font-size: 13px; cursor: pointer; }
.tab-button.active { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
section[hidden] { display: none; }

@media (max-width: 360px) {
  .app-shell { padding-right: 14px; padding-left: 14px; }
  .character-grid { gap: 9px; }
}