:root{
    --bg:#FEF8F4;
    --surface:#FFFFFF;
    --surface-2:#F8F2EF;
    --surface-3:#F3EDE9;
    --border:#E7E1DE;
    --text:#1D1B19;
    --text-muted:#584140;
    --text-faint:#8C706F;
    --focus:#1D1B19;
    --mark-bg:#FFE066; --mark-text:#1D1B19;
    --accent-rtve:#AE2F34; --accent-rtve-bg:#FF6B6B; --accent-rtve-soft:#FFE2E0; --accent-rtve-on:#6D0010;
    --accent-3cat:#705D00; --accent-3cat-bg:#FDD73B; --accent-3cat-soft:#FFF3C4; --accent-3cat-on:#554500;
    --accent-agalega:#006A65; --accent-agalega-bg:#1EADA5; --accent-agalega-soft:#D3F3EF; --accent-agalega-on:#003A37;
    --scrim: linear-gradient(180deg, rgba(20,10,10,0) 0%, rgba(20,10,10,.72) 100%);
    color-scheme: light;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1A1A2E; --surface:#22223A; --surface-2:#282844; --surface-3:#32324E;
      --border:#3A3A56; --text:#FEF8F4; --text-muted:#C9C2BE; --text-faint:#8F8AA8; --focus:#FEF8F4;
      --mark-bg:#6B5A00; --mark-text:#FFE9A8;
      --accent-rtve:#FFB3B0; --accent-rtve-bg:#AE2F34; --accent-rtve-soft:#3A2027; --accent-rtve-on:#FFDAD8;
      --accent-3cat:#E8C426; --accent-3cat-bg:#554500; --accent-3cat-soft:#332C10; --accent-3cat-on:#FFE173;
      --accent-agalega:#5DD9D0; --accent-agalega-bg:#00504C; --accent-agalega-soft:#0F2E2C; --accent-agalega-on:#7CF6EC;
      --scrim: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
      color-scheme: dark;
    }
  }
  :root[data-theme="dark"]{
    --bg:#1A1A2E; --surface:#22223A; --surface-2:#282844; --surface-3:#32324E;
    --border:#3A3A56; --text:#FEF8F4; --text-muted:#C9C2BE; --text-faint:#8F8AA8; --focus:#FEF8F4;
    --mark-bg:#6B5A00; --mark-text:#FFE9A8;
    --accent-rtve:#FFB3B0; --accent-rtve-bg:#AE2F34; --accent-rtve-soft:#3A2027; --accent-rtve-on:#FFDAD8;
    --accent-3cat:#E8C426; --accent-3cat-bg:#554500; --accent-3cat-soft:#332C10; --accent-3cat-on:#FFE173;
    --accent-agalega:#5DD9D0; --accent-agalega-bg:#00504C; --accent-agalega-soft:#0F2E2C; --accent-agalega-on:#7CF6EC;
    --scrim: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.8) 100%);
    color-scheme: dark;
  }

  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  html{ scroll-behavior:auto; }
  body{
    background:var(--bg); color:var(--text); min-height:100vh;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "SF Pro Rounded", Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  ::selection{ background:var(--accent-rtve-bg); color:#fff; }
  mark{ background:var(--mark-bg); color:var(--mark-text); border-radius:3px; padding:0 1px; }
  .num{ font-variant-numeric: tabular-nums; }
  a{ color:inherit; }
  button{ font:inherit; cursor:pointer; }
  input,select{ font:inherit; }
  :focus-visible{ outline:3px solid var(--focus); outline-offset:2px; }
  @media (prefers-reduced-motion: reduce){ *{ animation-duration:.001ms !important; transition-duration:.001ms !important; } }

  .skip-link{
    position:absolute; left:12px; top:-60px; z-index:100; background:var(--text); color:var(--bg);
    padding:12px 18px; border-radius:9999px; font-weight:800; font-size:13px; transition:top .15s ease;
  }
  .skip-link:focus{ top:12px; }

  /* ---------- top bar ---------- */
  .topbar{ position:sticky; top:0; z-index:30; background:var(--bg); border-bottom:1px solid var(--border); }
  .topbar-inner{ max-width:1280px; margin:0 auto; padding:22px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .brand{ display:flex; align-items:center; gap:14px; }
  .brand-mark{ width:52px; height:52px; border-radius:9999px; flex:none; background:var(--accent-rtve-bg); display:flex; align-items:center; justify-content:center; box-shadow:0 8px 20px -4px rgba(174,47,52,.45); }
  .brand-mark svg{ width:26px; height:26px; color:#fff; }
  .brand-text{ display:flex; flex-direction:column; gap:2px; }
  .eyebrow{ font-size:11.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--text-faint); font-weight:700; margin:0; }
  h1{ font-size:clamp(24px,3vw,32px); font-weight:800; letter-spacing:-.01em; margin:0; color:var(--accent-rtve); text-wrap:balance; }

  .stat-pills{ display:flex; gap:10px; flex-wrap:wrap; }
  .stat-pill{ display:flex; align-items:center; gap:8px; background:var(--surface-2); border-radius:9999px; padding:10px 18px; box-shadow:0 6px 16px -8px rgba(0,0,0,.15); }
  .stat-pill .n{ font-size:18px; font-weight:800; }
  .stat-pill .l{ font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); font-weight:700; }
  .stat-pill.a .n{ color:var(--accent-rtve); } .stat-pill.b .n{ color:var(--accent-3cat); } .stat-pill.c .n{ color:var(--accent-agalega); }

  /* ---------- controls ---------- */
  main.page{ max-width:1280px; margin:0 auto; padding:26px 28px 90px; display:flex; flex-direction:column; gap:30px; }

  .stations{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; min-height:112px; }
  .station{
    appearance:none; border:none; border-radius:20px; padding:20px; min-height:112px; text-align:left; position:relative; overflow:hidden;
    display:flex; flex-direction:column; justify-content:space-between; background:var(--surface-2); color:var(--text-muted);
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease;
  }
  .station:hover{ transform:translateY(-2px); }
  .station .name{ font-size:19px; font-weight:800; }
  .station .sub{ font-size:11px; letter-spacing:.08em; text-transform:uppercase; font-weight:700; opacity:.75; }
  .station .ct{ position:absolute; top:16px; right:18px; font-size:13px; font-weight:800; opacity:.55; }
  .station .picked-flag{
    position:absolute; top:14px; left:18px; background:rgba(255,255,255,.9); color:var(--text); border-radius:9999px;
    font-size:11px; font-weight:800; padding:2px 8px; display:none; align-items:center; gap:4px;
  }
  .station .picked-flag.show{ display:inline-flex; }
  .station[aria-pressed="false"]{ opacity:.55; }
  .station[data-src="rtve"][aria-pressed="true"]{ background:var(--accent-rtve-bg); color:var(--accent-rtve-on); box-shadow:0 14px 30px -10px rgba(174,47,52,.5); opacity:1; }
  .station[data-src="tres_cat"][aria-pressed="true"]{ background:var(--accent-3cat-bg); color:var(--accent-3cat-on); box-shadow:0 14px 30px -10px rgba(232,196,38,.5); opacity:1; }
  .station[data-src="agalega"][aria-pressed="true"]{ background:var(--accent-agalega-bg); color:var(--accent-agalega-on); box-shadow:0 14px 30px -10px rgba(30,173,165,.5); opacity:1; }
  .station[data-src="rtve"][aria-pressed="true"] .picked-flag{ color:var(--accent-rtve); }
  .station[data-src="tres_cat"][aria-pressed="true"] .picked-flag{ color:var(--accent-3cat); }
  .station[data-src="agalega"][aria-pressed="true"] .picked-flag{ color:var(--accent-agalega); }
  .station[data-src="rtve"][aria-pressed="false"]{ box-shadow:inset 0 0 0 2px var(--accent-rtve-soft); }
  .station[data-src="tres_cat"][aria-pressed="false"]{ box-shadow:inset 0 0 0 2px var(--accent-3cat-soft); }
  .station[data-src="agalega"][aria-pressed="false"]{ box-shadow:inset 0 0 0 2px var(--accent-agalega-soft); }
  .stations-hint{ font-size:11.5px; color:var(--text-faint); margin:8px 2px 0; }

  .search-block{ display:flex; flex-direction:column; gap:14px; }
  .search-wrap{ position:relative; }
  .search-wrap svg.icon{ position:absolute; left:22px; top:50%; transform:translateY(-50%); opacity:.5; pointer-events:none; }
  .search-wrap input{ width:100%; background:var(--surface-2); border:2px solid var(--border); border-radius:9999px; padding:17px 90px 17px 54px; color:var(--text); font-size:16px; outline:none; }
  .search-wrap input:focus-visible{ border-color:var(--accent-rtve); outline:none; box-shadow:0 0 0 3px var(--accent-rtve-soft); }
  .search-wrap input::placeholder{ color:var(--text-faint); }
  .search-kbd{
    position:absolute; right:48px; top:50%; transform:translateY(-50%); font-size:11px; font-weight:700; color:var(--text-faint);
    background:var(--surface-3); border-radius:8px; padding:3px 7px; pointer-events:none;
  }
  .search-wrap input:focus ~ .search-kbd, .search-clear.show ~ .search-kbd{ display:none; }
  .search-clear{
    position:absolute; right:14px; top:50%; transform:translateY(-50%); width:30px; height:30px; border-radius:9999px;
    background:var(--surface-3); border:none; color:var(--text-faint); display:none; align-items:center; justify-content:center;
  }
  .search-clear.show{ display:flex; }

  .toolbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
  .toolbar select{
    appearance:none; background:var(--surface-2); border:2px solid var(--border); border-radius:9999px; padding:8px 34px 8px 16px;
    color:var(--text); font-size:12.5px; font-weight:700; cursor:pointer;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23584140' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 12px center; background-size:13px;
  }
  .poster-toggle{ display:flex; gap:0; border:2px solid var(--border); border-radius:9999px; overflow:hidden; }
  .poster-toggle button{ appearance:none; border:none; background:var(--surface-2); color:var(--text-muted); padding:8px 14px; font-size:12.5px; font-weight:700; }
  .poster-toggle button[aria-pressed="true"]{ background:var(--text); color:var(--bg); }
  .clear-filters{
    appearance:none; border:2px solid transparent; background:none; color:var(--accent-rtve); font-size:12.5px; font-weight:800;
    padding:8px 10px; display:none; align-items:center; gap:6px;
  }
  .clear-filters.show{ display:inline-flex; }

  .result-row{ display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; margin:0 4px; }
  .result-count{ font-size:12px; color:var(--text-faint); font-weight:700; }
  .src-line{ font-size:12.5px; color:var(--text-faint); margin:0; }
  .src-line b{ color:var(--text-muted); font-weight:700; }

  .chiprow{ display:flex; gap:10px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .chiprow::-webkit-scrollbar{ display:none; }
  .chip{ appearance:none; border:2px solid var(--border); background:var(--surface); color:var(--text-muted); border-radius:9999px; padding:9px 18px; font-size:12.5px; font-weight:700; letter-spacing:.02em; white-space:nowrap; flex:none; }
  .chip b{ font-weight:800; opacity:.55; margin-left:6px; }
  .chip[aria-pressed="true"]{ background:var(--chip-strong,var(--text)); border-color:var(--chip-strong,var(--text)); color:#fff; }

  /* ---------- station blocks + grid ---------- */
  .station-block{ display:flex; flex-direction:column; gap:18px; }
  .station-block-head{ display:flex; align-items:center; gap:10px; }
  .station-block-head .sw{ width:14px; height:14px; border-radius:9999px; flex:none; }
  .station-block[data-src="rtve"] .sw{ background:var(--accent-rtve-bg); }
  .station-block[data-src="tres_cat"] .sw{ background:var(--accent-3cat-bg); }
  .station-block[data-src="agalega"] .sw{ background:var(--accent-agalega-bg); }
  .station-block-head h2{ font-size:21px; font-weight:800; margin:0; }
  .station-block-head .n{ font-size:12.5px; color:var(--text-faint); font-weight:700; }

  .cat-section{ display:flex; flex-direction:column; gap:14px; }
  .cat-head{ display:flex; align-items:baseline; gap:10px; }
  .cat-head h3{ font-size:16px; font-weight:800; margin:0; }
  .cat-head .n{ font-size:12px; color:var(--text-faint); font-weight:700; }
  .cat-note{ font-size:12.5px; color:var(--text-faint); margin:-6px 0 0; max-width:82ch; line-height:1.5; }
  .cat-note b{ color:var(--text-muted); font-weight:700; }

  .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(232px,1fr)); gap:18px; }
  .card{ display:flex; flex-direction:column; gap:10px; cursor:pointer; }
  .poster{ position:relative; aspect-ratio:16/10; border-radius:18px; overflow:hidden; background:var(--surface-3); box-shadow:0 10px 24px -12px rgba(20,10,10,.28); transition:transform .25s ease, box-shadow .25s ease; }
  .card:hover .poster, .card:focus-visible .poster{ transform:translateY(-3px) scale(1.015); box-shadow:0 16px 32px -12px rgba(20,10,10,.35); }
  .poster img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease, opacity .25s ease; }
  .poster img.loading{ opacity:0; }
  .poster img:not(.loading){ opacity:1; }
  .card:hover .poster img{ transform:scale(1.05); }
  .poster .fallback{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:8px;
    background:var(--src-soft,var(--surface-3)); border:2px solid var(--src-strong,var(--border));
    color:var(--src-strong,var(--text-faint)); font-size:36px; font-weight:800;
  }
  .poster .fallback svg{ width:22px; height:22px; opacity:.55; }
  .station-block[data-src="rtve"] .fallback{ --src-soft:var(--accent-rtve-soft); --src-strong:var(--accent-rtve); }
  .station-block[data-src="tres_cat"] .fallback{ --src-soft:var(--accent-3cat-soft); --src-strong:var(--accent-3cat); }
  .station-block[data-src="agalega"] .fallback{ --src-soft:var(--accent-agalega-soft); --src-strong:var(--accent-agalega); }
  .poster .scrim{ position:absolute; inset:0; background:var(--scrim); pointer-events:none; }
  .poster .badges{ position:absolute; left:10px; top:10px; display:flex; gap:6px; }
  .poster .badge{ padding:4px 10px; border-radius:9999px; font-size:10px; font-weight:800; letter-spacing:.02em; backdrop-filter:blur(3px); }
  .poster .badge.kind{ background:rgba(20,10,10,.55); color:#fff; }
  .station-block[data-src="rtve"] .poster .badge.src{ background:var(--accent-rtve); color:#fff; }
  .station-block[data-src="tres_cat"] .poster .badge.src{ background:var(--accent-3cat-bg); color:var(--accent-3cat-on); }
  .station-block[data-src="agalega"] .poster .badge.src{ background:var(--accent-agalega); color:#fff; }
  .poster .ep{ position:absolute; right:10px; bottom:10px; font-size:10.5px; color:#fff; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.6); }
  .poster .ttl{ position:absolute; left:12px; right:12px; bottom:9px; color:#fff; font-weight:800; font-size:14px; line-height:1.28; text-shadow:0 1px 4px rgba(0,0,0,.5); }
  .poster .ep ~ .ttl{ right:44px; }

  .pick-heart{ position:absolute; right:9px; top:9px; z-index:2; width:32px; height:32px; border-radius:9999px; border:none; background:rgba(255,255,255,.92); color:var(--text-faint); display:flex; align-items:center; justify-content:center; box-shadow:0 4px 10px rgba(0,0,0,.2); transition:transform .12s ease, color .15s ease; }
  .pick-heart:hover{ transform:scale(1.1); }
  .pick-heart svg{ width:16px; height:16px; }
  .card.picked .pick-heart{ color:var(--accent-rtve); }
  .card.picked .pick-heart svg{ fill:currentColor; }
  .pick-heart.bump{ animation:bump .32s ease; }
  @keyframes bump{ 0%{transform:scale(1);} 40%{transform:scale(1.35);} 100%{transform:scale(1);} }

  .card-body p{ margin:0; font-size:12.5px; line-height:1.5; color:var(--text-muted); padding:0 2px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

  .empty{ color:var(--text-faint); font-size:14px; padding:50px 20px; text-align:center; display:flex; flex-direction:column; gap:10px; align-items:center; }
  .empty button{ appearance:none; border:2px solid var(--border); background:var(--surface); border-radius:9999px; padding:9px 18px; font-weight:700; font-size:13px; color:var(--text); }

  footer{ max-width:1280px; margin:0 auto; padding:6px 28px 60px; color:var(--text-faint); font-size:12px; line-height:1.6; }
  footer strong{ color:var(--text-muted); font-weight:700; }
  .noscript-banner{ background:#3a1f1f; color:#fff; padding:14px 20px; text-align:center; font-weight:700; font-size:14px; }
  .status-banner{
    display:none; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;
    padding:10px 20px; text-align:center; font-weight:700; font-size:13px;
  }
  .status-banner.show{ display:flex; }
  .status-banner.offline{ background:var(--surface-3); color:var(--text-muted); }
  .status-banner.update{ background:var(--accent-rtve-bg); color:#fff; }
  .status-banner button{
    appearance:none; border:2px solid rgba(255,255,255,.6); background:transparent; color:inherit;
    border-radius:9999px; padding:6px 14px; font-weight:800; font-size:12.5px;
  }
  .privacy-note{ font-size:11px; color:var(--text-faint); margin:2px 0 0; line-height:1.5; }

  /* ---------- FAB + back-to-top ---------- */
  .fab-stack{ position:fixed; right:24px; bottom:24px; z-index:50; display:flex; flex-direction:column; align-items:flex-end; gap:12px; }
  .fab{ display:flex; align-items:center; gap:10px; background:var(--accent-rtve-bg); color:#fff; border:none; border-radius:9999px; padding:16px 24px 16px 20px; box-shadow:0 12px 28px -8px rgba(174,47,52,.55); font-weight:800; font-size:15px; opacity:0; pointer-events:none; transform:translateY(10px) scale(.95); transition:opacity .18s, transform .18s; }
  .fab.show{ opacity:1; pointer-events:auto; transform:translateY(0) scale(1); }
  .fab:hover{ transform:translateY(-2px) scale(1.02); }
  .fab .badge{ background:rgba(255,255,255,.25); border-radius:9999px; min-width:24px; height:24px; padding:0 7px; display:flex; align-items:center; justify-content:center; font-size:13px; }
  .totop{
    width:46px; height:46px; border-radius:9999px; border:none; background:var(--surface); color:var(--text);
    box-shadow:0 8px 20px -6px rgba(0,0,0,.25); display:flex; align-items:center; justify-content:center;
    opacity:0; pointer-events:none; transform:translateY(10px); transition:opacity .18s, transform .18s;
  }
  .totop.show{ opacity:1; pointer-events:auto; transform:translateY(0); }

  .overlay{ position:fixed; inset:0; background:rgba(20,10,10,.45); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .drawer{ position:fixed; right:0; top:0; bottom:0; width:min(420px,92vw); background:var(--surface); z-index:61; border-radius:24px 0 0 24px; box-shadow:-20px 0 50px rgba(0,0,0,.25); transform:translateX(100%); transition:transform .25s cubic-bezier(.2,.8,.3,1); display:flex; flex-direction:column; }
  .drawer.show{ transform:translateX(0); }
  .drawer-head{ padding:24px 24px 16px; display:flex; align-items:center; justify-content:space-between; }
  .drawer-head h3{ margin:0; font-size:19px; font-weight:800; }
  .drawer-head p{ margin:2px 0 0; font-size:12px; color:var(--text-faint); }
  .drawer-close{ appearance:none; background:var(--surface-2); border:none; border-radius:9999px; width:36px; height:36px; color:var(--text-faint); cursor:pointer; display:flex; align-items:center; justify-content:center; flex:none; }
  .drawer-body{ flex:1; overflow-y:auto; padding:8px 24px; }
  .drawer-group{ margin-bottom:18px; }
  .drawer-group h4{ font-size:12px; letter-spacing:.04em; font-weight:800; margin:0 0 9px; display:flex; align-items:center; gap:7px; }
  .drawer-group h4 .dot{ width:10px; height:10px; border-radius:9999px; }
  .drawer-group[data-src="rtve"] h4{ color:var(--accent-rtve); } .drawer-group[data-src="rtve"] .dot{ background:var(--accent-rtve); }
  .drawer-group[data-src="tres_cat"] h4{ color:var(--accent-3cat); } .drawer-group[data-src="tres_cat"] .dot{ background:var(--accent-3cat-bg); }
  .drawer-group[data-src="agalega"] h4{ color:var(--accent-agalega); } .drawer-group[data-src="agalega"] .dot{ background:var(--accent-agalega); }
  .drawer-item{ display:flex; justify-content:space-between; align-items:flex-start; gap:8px; padding:8px 0; font-size:13px; border-bottom:1px solid var(--border); }
  .drawer-item .cat{ display:block; font-size:10.5px; color:var(--text-faint); margin-top:2px; }
  .drawer-item button{ appearance:none; background:none; border:none; color:var(--text-faint); cursor:pointer; font-size:17px; line-height:1; padding:2px 4px; }
  .drawer-item button:hover{ color:var(--accent-rtve); }
  .drawer-empty{ color:var(--text-faint); font-size:13px; padding:40px 10px; text-align:center; }

  .drawer-foot{ padding:14px 24px 24px; display:flex; flex-direction:column; gap:12px; }
  .drawer-foot .label{ font-size:12px; font-weight:800; color:var(--text-muted); }
  .prompt-box{ width:100%; min-height:150px; resize:vertical; background:var(--surface-2); border:2px solid var(--border); border-radius:16px; padding:14px; color:var(--text); font-size:12.5px; line-height:1.5; }
  .drawer-actions{ display:flex; gap:10px; }
  .drawer-actions-2{ display:flex; gap:10px; }
  .btn{ appearance:none; border:2px solid var(--border); background:var(--surface); color:var(--text); cursor:pointer; border-radius:9999px; padding:12px 16px; font-size:13.5px; font-weight:800; flex:1; display:flex; align-items:center; justify-content:center; gap:8px; }
  .btn.primary{ background:var(--accent-rtve-bg); color:#fff; border-color:var(--accent-rtve-bg); box-shadow:0 8px 20px -8px rgba(174,47,52,.5); }
  .btn.small{ padding:9px 14px; font-size:12px; }
  .btn:active{ transform:translateY(1px); }
  .import-status{ font-size:11.5px; color:var(--text-faint); margin:0; min-height:14px; }

  /* ---------- detail modal ---------- */
  .detail{
    position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.96); width:min(560px,92vw); max-height:86vh;
    background:var(--surface); border-radius:24px; box-shadow:0 30px 70px rgba(0,0,0,.35); z-index:71; display:flex; flex-direction:column;
    opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease; overflow:hidden;
  }
  .detail.show{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
  .detail-overlay{ position:fixed; inset:0; background:rgba(20,10,10,.55); z-index:70; opacity:0; pointer-events:none; transition:opacity .2s ease; }
  .detail-overlay.show{ opacity:1; pointer-events:auto; }
  .detail-poster{ position:relative; aspect-ratio:16/9; background:var(--surface-3); flex:none; }
  .detail-poster img{ width:100%; height:100%; object-fit:cover; display:block; }
  .detail-poster .fallback{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:48px; font-weight:800; background:var(--src-soft,var(--surface-3)); color:var(--src-strong,var(--text-faint)); }
  .detail-close{ position:absolute; right:14px; top:14px; z-index:2; width:38px; height:38px; border-radius:9999px; border:none; background:rgba(20,10,10,.55); color:#fff; display:flex; align-items:center; justify-content:center; }
  .detail-body{ padding:22px 24px 24px; overflow-y:auto; display:flex; flex-direction:column; gap:12px; }
  .detail-badges{ display:flex; gap:8px; flex-wrap:wrap; }
  .detail-badges span{ padding:5px 12px; border-radius:9999px; font-size:11px; font-weight:800; }
  .detail-title{ font-size:24px; font-weight:800; margin:0; text-wrap:balance; }
  .detail-desc{ font-size:14.5px; line-height:1.6; color:var(--text-muted); margin:0; }
  .detail-meta{ font-size:12.5px; color:var(--text-faint); font-weight:700; }
  .detail-note{ font-size:12px; color:var(--text-faint); font-style:italic; }
  .detail-actions{ display:flex; gap:10px; margin-top:6px; }

  @media (max-width:760px){
    .stations{ grid-template-columns:1fr; min-height:calc(112px * 3 + 16px * 2); }
    .grid{ grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
    .detail{ left:0; top:auto; bottom:0; transform:translateY(20px); width:100%; max-height:92vh; border-radius:24px 24px 0 0; }
    .detail.show{ transform:translateY(0); }
  }