/* TeslAppstore FE2 · one CSS file · no zoom/transform scaling · rem sizes tied to viewport via clamp() */
:root {
  --bg: #05060d; --panel: #0d1220; --panel2: #141b2e; --line: rgba(255,255,255,.12);
  --text: #f2f5ff; --muted: rgba(242,245,255,.62); --accent: #3fd8ff; --warm: #ffb36b;
  --gap: clamp(.5rem, .9vw, 1rem); --radius: .9rem; --tap: 3.5rem; /* >= 56px */
}
* { box-sizing: border-box; }
html { font-size: clamp(16px, calc(.62vw + 8px), 22px); height: 100%; }
body {
  margin: 0; height: 100%; overflow: hidden; background: var(--bg); color: var(--text);
  font-family: system-ui, "Segoe UI", Roboto, sans-serif; line-height: 1.35;
  -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
button, a, input { font: inherit; color: inherit; }
button { cursor: pointer; }
.muted { color: var(--muted); }

/* App shell: one grid, every row/column reserves its own space (no overlays) */
.app {
  height: 100vh; height: 100dvh; display: grid; gap: var(--gap); padding: var(--gap);
  grid-template-columns: clamp(14rem, 21vw, 21rem) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-areas: "top top" "nav pane" "player player";
}
.top { grid-area: top; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--gap); min-height: 3rem; padding: 0 .5rem; }
.top__brand { font-weight: 750; font-size: 1.15rem; letter-spacing: .03em; white-space: nowrap; }
.top__tag { font-size: .7rem; font-weight: 800; color: var(--bg); background: var(--accent); border-radius: .4rem; padding: .1rem .4rem; vertical-align: middle; }
.top__clock { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 600; color: #bdf6ff; }
.top__right { justify-self: end; display: flex; align-items: center; gap: .9rem; min-width: 0; }
.top__stamp { font-size: .72rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top__classic { font-size: .85rem; color: #9ae8ff; text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: .55rem .9rem; min-height: 2.75rem; display: inline-flex; align-items: center; white-space: nowrap; }

/* Scroll panes: exactly one native scroll container per pane */
.nav, .pane {
  min-height: 0; overflow-y: auto; overflow-x: hidden; touch-action: pan-y;
  overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.nav { grid-area: nav; display: grid; align-content: start; gap: var(--gap); padding-right: .15rem; }
.pane { grid-area: pane; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(.75rem, 1.4vw, 1.5rem); outline: none; }

/* Main buttons (the live site's pinned tiles) */
.nb {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); align-items: center; gap: .75rem;
  min-height: 4.25rem; padding: .6rem .9rem; border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--panel); text-align: left; text-decoration: none; touch-action: manipulation;
  border-left: .3rem solid var(--c, var(--accent));
}
.nb__icon { font-size: 1.6rem; text-align: center; line-height: 1; }
.nb__label { font-weight: 700; font-size: 1.02rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb__meta { display: block; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 600; }
.nb[aria-current="true"] { background: var(--panel2); border-color: rgba(63,216,255,.55); box-shadow: inset 0 0 0 1px rgba(63,216,255,.25); }
.nb:active { background: var(--panel2); }
.nav__group { font-size: .7rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; margin: .4rem .2rem -.2rem; }

/* Pane content */
.ph { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--gap); margin-bottom: var(--gap); }
.ph h1 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.ph p { margin: .2rem 0 0; color: var(--muted); font-size: .9rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 var(--gap); }
.chip { min-height: var(--tap); padding: 0 1.1rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-weight: 650; font-size: .9rem; touch-action: manipulation; }
.chip[aria-pressed="true"] { background: rgba(63,216,255,.18); border-color: rgba(63,216,255,.6); color: #c9f7ff; }

.hero { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--gap); margin-bottom: calc(var(--gap) * 1.5); align-items: center; }
.hero__img { width: 100%; max-height: 32vh; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: #000; border: 1px solid var(--line); display: block; }
.hero__art { display: grid; place-items: center; width: 100%; max-height: 32vh; aspect-ratio: 16 / 9; border-radius: var(--radius); border: 1px dashed var(--line); background: rgba(0,0,0,.3); }
.hero__art:has(img) { border: 0; }
.hero__show { min-height: var(--tap); padding: 0 1.4rem; border-radius: 999px; border: 1px solid var(--line); background: var(--panel2); font-weight: 650; touch-action: manipulation; }
.hero__body h2 { margin: 0 0 .35rem; font-size: 1.25rem; line-height: 1.25; }
.hero__body p { margin: 0 0 .9rem; color: var(--muted); font-size: .9rem; }
.big { min-height: var(--tap); padding: 0 1.6rem; border-radius: 999px; border: 1px solid rgba(63,216,255,.6); background: rgba(63,216,255,.2); font-weight: 750; font-size: 1.05rem; touch-action: manipulation; }

.list { display: grid; gap: .5rem; }
.ep {
  display: grid; grid-template-columns: 9.5rem 4rem minmax(0, 1fr) auto; align-items: center; gap: .75rem;
  width: 100%; min-height: var(--tap); padding: .55rem .9rem; text-align: left; border-radius: .7rem;
  border: 1px solid var(--line); background: rgba(255,255,255,.035); touch-action: manipulation;
}
.ep:active, .ep.is-on { background: rgba(63,216,255,.14); border-color: rgba(63,216,255,.55); }
.ep__when, .ep__len { font-variant-numeric: tabular-nums; color: var(--muted); font-size: .85rem; white-space: nowrap; }
.ep__title { font-weight: 620; font-size: .98rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ep__tag { font-size: .7rem; font-weight: 750; letter-spacing: .06em; text-transform: uppercase; border-radius: 999px; padding: .25rem .6rem; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.ep__tag--new { color: var(--bg); background: var(--accent); border-color: var(--accent); }
.sec { margin: calc(var(--gap) * 1.5) 0 var(--gap); font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .1em; }

/* Hub feed cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: var(--gap); }
.card { display: grid; align-content: start; gap: .4rem; min-height: var(--tap); padding: .9rem 1rem; border-radius: var(--radius); border: 1px solid var(--line); background: rgba(255,255,255,.035); text-decoration: none; touch-action: manipulation; }
.card__who { font-weight: 700; color: #bdf6ff; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card__text { font-size: .98rem; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; }
.card__when { font-size: .78rem; color: var(--muted); }
.card__thumb { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: .6rem; background: #111; display: block; }

/* Docked player: a normal grid row, never floats over content */
.player {
  grid-area: player; display: grid; grid-template-columns: var(--tap) minmax(0, 1fr) minmax(8rem, 28vw) auto;
  align-items: center; gap: var(--gap); padding: .5rem .9rem; border-radius: var(--radius); background: var(--panel2); border: 1px solid var(--line);
}
.player__btn { width: var(--tap); height: var(--tap); border-radius: 50%; border: 1px solid rgba(63,216,255,.6); background: rgba(63,216,255,.2); font-size: 1.3rem; touch-action: manipulation; }
.player__btn:disabled, .player__seek:disabled { opacity: .45; }
.player__info { min-width: 0; }
.player__title { font-weight: 700; font-size: .95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__sub { font-size: .78rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.player__seek { width: 100%; height: var(--tap); margin: 0; accent-color: var(--accent); }
.player__time { font-variant-numeric: tabular-nums; font-size: .85rem; color: var(--muted); white-space: nowrap; }

/* Narrow / portrait split: nav becomes a wrapping button grid above the pane */
@media (max-width: 900px), (orientation: portrait) {
  .app { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-areas: "top" "nav" "pane" "player"; }
  .nav { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); max-height: 34vh; }
  .nav__group { display: none; }
  .nb { min-height: var(--tap); }
  .hero { grid-template-columns: minmax(0, 1fr); }
  .ep { grid-template-columns: 7.5rem 3.2rem minmax(0, 1fr); }
  .ep__tag { display: none; }
  .player { grid-template-columns: var(--tap) minmax(0, 1fr) auto; }
  .player__seek { grid-column: 1 / -1; grid-row: 2; height: 2.5rem; }
  .top__stamp { display: none; }
}
@media (max-width: 560px) { .top { grid-template-columns: 1fr auto; } .top__clock { display: none; } }