:root {
      --bg: #100e0c;
      --surface: #241f1b;
      --raised: #322c26;
      --fg: #f6f1e8;
      --muted: #c3b8aa;
      --primary: #e07a3d;
      --ink: #1a100a;
      --border: rgba(255,255,255,.08);
      --danger: #e08a82;
      --edge: #070605;
    }
    * { box-sizing: border-box; }
    html, body { margin: 0; color: var(--fg); font-family: system-ui, sans-serif; }
    body {
      background:
        radial-gradient(900px 420px at 50% -80px, rgba(224,122,61,.22), transparent 60%),
        radial-gradient(700px 380px at 110% 110%, rgba(90,48,22,.35), transparent 55%),
        var(--bg);
    }
    button, input { font: inherit; color: inherit; }
    button { cursor: pointer; border: 0; background: transparent; -webkit-tap-highlight-color: transparent; }
    header {
      position: sticky; top: 0; z-index: 6;
      display: grid;
      grid-template-columns: 1fr auto;
      grid-template-areas:
        "brand side"
        "backup backup"
        "search search";
      align-items: center;
      column-gap: 12px;
      padding: calc(12px + env(safe-area-inset-top)) 16px 8px;
      background: #100e0c;
      box-shadow: 0 1px 0 #2a241f;
    }
    .brand { grid-area: brand; }
    .head-side { grid-area: side; }
    .kicker { color: var(--primary); letter-spacing: 0.16em; text-transform: uppercase; font-size: 11px; font-weight: 700; margin: 0; text-shadow: 0 1px 0 #000; }
    h1 { font-family: Georgia, "Noto Serif", serif; font-size: 30px; line-height: 1; margin: 2px 0 0; font-weight: 650; text-shadow: 0 2px 0 #000, 0 10px 24px rgba(0,0,0,.45); }
    .row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
    .count { color: var(--muted); font-size: 12px; text-align: right; line-height: 1.25; max-width: 7.2rem; }
    .quiet {
      grid-area: backup; justify-self: start;
      margin-top: 8px; padding: 8px 14px; border-radius: 999px; color: var(--fg); font-size: 14px;
      background: linear-gradient(180deg, #4a4038, #26211c);
      box-shadow: 0 4px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .backup-ico { display: none; width: 18px; height: 18px; }
    .search { grid-area: search; }
    .quiet:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.12); }
    .search {
      margin-top: 8px; display: flex; align-items: center; height: 42px; border-radius: 999px; padding: 0 16px;
      background: linear-gradient(180deg, #0c0b0a, #1b1714);
      box-shadow: inset 0 3px 8px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06);
    }
    .search input { flex: 1; border: 0; background: transparent; outline: none; font-size: 16px; }
    .trays { padding: 4px 16px 8px; }
    main { padding: 0 16px 110px; }
    #list-title { margin: 0; }
    .tray-label { margin: 8px 6px 0; color: var(--muted); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
    .chips { display: flex; gap: 8px; overflow-x: auto; margin-top: 8px; padding: 10px; border-radius: 20px;
      background: linear-gradient(180deg, #181410, #0e0c0b);
      box-shadow: inset 0 3px 8px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.05);
    }
    .chips.city { background: linear-gradient(180deg, #120f0d, #0a0908); }
    .chips button {
      flex: none; height: 40px; border-radius: 999px; padding: 0 14px; color: var(--fg); font-size: 14px;
      background: linear-gradient(180deg, #4a4038, #2a241f);
      box-shadow: 0 4px 0 #070605, inset 0 1px 0 rgba(255,255,255,.16);
    }
    .chips button.on {
      color: var(--ink); font-weight: 700;
      background: linear-gradient(180deg, #ffc191, #e07a3d 45%, #b85a22);
      box-shadow: 0 3px 0 #6a3014, inset 0 1px 0 rgba(255,255,255,.55);
      transform: translateY(1px);
    }
    .chips.city button { height: 34px; font-size: 12px; }
    .health {
      display: flex; flex-direction: column; align-items: stretch; gap: 4px;
      margin: 0 16px 8px; color: var(--muted); font-size: 13px;
    }
    .health-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 36px; }
    .health-who {
      margin: 0; color: var(--danger); font-size: 13px; line-height: 1.35;
      max-height: 7.2em; overflow: auto; white-space: pre-wrap;
    }
    .health button {
      flex: none; height: 32px; border-radius: 999px; padding: 0 12px; color: var(--fg); font-size: 13px;
      background: linear-gradient(180deg, #4a4038, #2a241f);
      box-shadow: 0 3px 0 #070605, inset 0 1px 0 rgba(255,255,255,.16);
    }
    .health button.on { color: var(--ink); font-weight: 700; background: linear-gradient(180deg, #ffc191, #e07a3d 45%, #b85a22); }
    h2 { color: var(--muted); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; margin: 16px 0 10px; }
    #featured-wrap h2 { margin: 8px 0 4px; }
    .featured { display: flex; gap: 10px; overflow-x: auto; padding: 2px 2px 10px; }
    .card {
      flex: none; width: 210px; min-height: 0; text-align: left; border-radius: 16px; padding: 7px 8px;
      display: flex; flex-direction: row; align-items: center; gap: 8px; color: var(--fg);
      background: linear-gradient(160deg, #3d352e, #1c1815 62%);
      box-shadow: 0 4px 0 #070605, inset 0 1px 0 rgba(255,255,255,.14);
      content-visibility: auto;
      contain-intrinsic-size: auto 58px;
    }
    .card.on {
      background: linear-gradient(160deg, #5a4032, #241810 62%);
      box-shadow: 0 4px 0 #6a3014, inset 0 1px 0 rgba(255,255,255,.2);
    }
    .card-top { min-height: 0; display: flex; }
    .card-copy { min-width: 0; flex: 1; display: flex; flex-direction: column; }
    .card .eq { flex: none; height: 12px; }
    .plate {
      flex: none; padding: 4px; border-radius: 16px;
      background: linear-gradient(165deg, #8a796a 0%, #3c342e 46%, #161310 100%);
      box-shadow: 0 4px 0 #070605, 0 8px 14px rgba(0,0,0,.4), inset 0 1px 0 rgba(255,255,255,.45);
    }
    .card .eq { visibility: hidden; }
    .card.on.live .eq { visibility: visible; }
    .play, .round { display: grid; place-items: center; }
    .play .ico, .round .ico { width: 22px; height: 22px; fill: currentColor; }
    .controls .play .ico { width: 28px; height: 28px; }
    .play .ico-pause { display: none; }
    .play.on .ico-play { display: none; }
    .play.on .ico-pause { display: block; }
    .round.on { color: var(--primary); }
    .tile { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #1a100a; }
    .tile b { font-family: Georgia, serif; font-size: 20px; line-height: 1; }
    .tile.t0 { background: #e8a06a; }
    .tile.t1 { background: #e07a3d; }
    .tile.t2 { background: #c9844a; }
    .tile.t3 { background: #d7b08a; }
    .tile.t4 { background: #f0c09a; }
    .tile.t5 { background: #c46a32; }
    .logo {
      display: block; width: 40px; height: 40px; object-fit: contain; border-radius: 12px;
      background: radial-gradient(circle at 35% 30%, #3a332c, #100e0c);
      box-shadow: inset 0 3px 6px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.16);
    }
    .card .plate { padding: 3px; border-radius: 12px; }
    .card .logo { width: 36px; height: 36px; border-radius: 10px; }
    .card .tile { width: 36px; height: 36px; border-radius: 10px; }
    .dial .plate {
      padding: 6px; border-radius: 50%;
      background: linear-gradient(160deg, #c4a48a, #4a3b32 42%, #161310 78%);
      box-shadow: 0 8px 0 #070605, inset 0 2px 0 rgba(255,255,255,.55), inset 0 -8px 10px rgba(0,0,0,.45);
    }
    .dial .logo { width: 84px; height: 84px; border-radius: 22px; }
    .head-tools { display: flex; align-items: center; gap: 8px; }
    .refresh {
      width: 40px; height: 40px; border-radius: 14px; color: var(--fg);
      display: grid; place-items: center;
      background: linear-gradient(180deg, #4a4038, #26211c);
      box-shadow: 0 4px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.18);
    }
    .refresh svg { width: 20px; height: 20px; }
    .refresh:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--edge), inset 0 1px 0 rgba(255,255,255,.12); }
    .refresh.busy svg { animation: turn .9s linear infinite; }
    @keyframes turn { to { transform: rotate(360deg); } }
    .lang {
      display: flex; padding: 3px; border-radius: 999px;
      background: linear-gradient(180deg, #0c0b0a, #1b1714);
      box-shadow: inset 0 3px 6px rgba(0,0,0,.65), 0 1px 0 rgba(255,255,255,.08);
    }
    .lang button {
      height: 28px; min-width: 36px; padding: 0 8px; border-radius: 999px;
      font-size: 12px; font-weight: 700; letter-spacing: 0.04em; color: var(--muted);
    }
    .lang button.on {
      color: var(--ink);
      background: linear-gradient(180deg, #ffc191, #e07a3d 46%, #b85a22);
      box-shadow: 0 2px 0 #6a3014, inset 0 1px 0 rgba(255,255,255,.55);
    }
    .eq { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
    .eq i { display: block; width: 4px; height: 100%; border-radius: 3px; transform-origin: bottom; animation: pulse 0.9s ease-in-out infinite;
      background: linear-gradient(180deg, #ffd0a8, #e07a3d); box-shadow: 0 2px 0 #6a3014; }
    .eq i:nth-child(2) { animation-delay: 0.15s; }
    .eq i:nth-child(3) { animation-delay: 0.3s; }
    @keyframes pulse { 50% { transform: scaleY(0.35); } }
    .card b {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1;
      margin: 0; font-size: 13px; line-height: 1.2; white-space: normal; overflow: hidden;
    }
    .card span, .meta { color: var(--muted); font-size: 12px; }
    .station {
      position: relative; display: flex; align-items: center; gap: 10px; margin: 8px 0; padding: 8px 8px 8px 12px; border-radius: 16px;
      background: linear-gradient(180deg, #2a241f, #171410);
      box-shadow: 0 4px 0 #070605, inset 0 1px 0 rgba(255,255,255,.08);
      content-visibility: auto;
      contain-intrinsic-size: auto 72px;
    }
    .station.on {
      background: linear-gradient(90deg, #4a3428, #1c1714 72%);
      box-shadow: inset 4px 0 0 #e07a3d, 0 4px 0 #070605;
    }
    .grow { flex: 1; min-width: 0; text-align: left; }
    .grow b {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;
      font-weight: 600; white-space: normal; overflow: hidden; line-height: 1.3;
    }
    .heart {
      width: 44px; height: 44px; border-radius: 14px; color: var(--muted); font-size: 18px;
      background: linear-gradient(180deg, #3a332c, #1c1815);
      box-shadow: 0 3px 0 #070605, inset 0 1px 0 rgba(255,255,255,.12);
    }
    .heart.on { color: #ffd7b8; font-size: 22px; background: linear-gradient(180deg, #8a4e2c, #3a2218); box-shadow: 0 3px 0 #6a3014, inset 0 1px 0 rgba(255,255,255,.25); }
    .empty { border-radius: 18px; padding: 28px 16px; text-align: center; background: linear-gradient(180deg, #2a241f, #161310); box-shadow: inset 0 3px 10px rgba(0,0,0,.45); }
    .empty p { font-family: Georgia, serif; font-size: 22px; margin: 0; }
    .bar, .sheet { position: fixed; z-index: 8; }
    .bar {
      left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom));
      display: flex; align-items: center; gap: 10px; border-radius: 22px; padding: 10px;
      background: linear-gradient(180deg, #3a322c, #141210);
      box-shadow: 0 8px 0 #070605, 0 18px 30px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
    }
    .dot { width: 10px; height: 10px; margin-left: 6px; border-radius: 999px; background: #3a342c; flex: none; box-shadow: inset 0 2px 3px rgba(0,0,0,.6); }
    .dot.on { background: radial-gradient(circle at 35% 35%, #ffd0a8, #e07a3d); box-shadow: 0 0 0 5px rgba(224,122,61,.22), 0 2px 0 #6a3014; }
    .bar .grow b, .bar .meta, .bar .now { display: block; }
    .now {
      color: #ffd0a8; font-size: 13px; margin-top: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }
    #sheet-track { white-space: normal; text-align: center; margin: 8px 0 0; }
    .play {
      width: 52px; height: 52px; border-radius: 999px; color: var(--ink); font-size: 18px;
      background: radial-gradient(circle at 32% 28%, #ffe0c4, #f0a15f 36%, #c45e24 70%, #8a3e16);
      box-shadow: 0 5px 0 #6a3014, inset 0 2px 0 rgba(255,255,255,.55), 0 10px 16px rgba(0,0,0,.35);
    }
    .play:active { transform: translateY(2px); box-shadow: 0 2px 0 #6a3014, inset 0 2px 0 rgba(255,255,255,.4); }
    .sheet {
      top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column;
      padding: calc(18px + env(safe-area-inset-top)) 18px calc(28px + env(safe-area-inset-bottom));
      background:
        radial-gradient(420px 280px at 50% 42%, rgba(224,122,61,.2), transparent 70%),
        linear-gradient(180deg, #1a1613, #0c0b0a);
    }
    .privacy-body {
      overflow: auto; margin: 12px 0 0; font-size: 16px; line-height: 1.5; white-space: pre-wrap;
    }
    .sheet h3 {
      font-family: Georgia, serif; font-size: 28px; line-height: 1.2; margin: 22px 0 6px;
      max-width: 18rem; overflow-wrap: anywhere;
    }
    .dial {
      width: 128px; height: 128px; border-radius: 50%; display: grid; place-items: center;
      background: radial-gradient(circle at 34% 30%, #3a3028, #161310 72%);
      box-shadow: 0 0 0 8px #2a211c, 0 0 0 12px #6a5040, 0 0 0 16px #120f0d, 0 16px 0 #070605, inset 0 8px 12px rgba(255,255,255,.08);
    }
    .stage .eq { height: 22px; margin-top: 28px; }
    .stage .eq i { width: 6px; }
    .controls { display: flex; justify-content: center; align-items: center; gap: 14px; padding-bottom: 8px; }
    .controls .play { width: 76px; height: 76px; font-size: 26px; }
    .round {
      width: 52px; height: 52px; border-radius: 18px; color: var(--fg);
      background: linear-gradient(180deg, #4a4038, #241f1b);
      box-shadow: 0 5px 0 #070605, inset 0 1px 0 rgba(255,255,255,.16);
    }
    .round:active { transform: translateY(2px); box-shadow: 0 2px 0 #070605; }
    .err { color: var(--danger); min-height: 20px; font-size: 14px; text-shadow: 0 1px 0 #000; }
    .sleep-wrap { margin-top: 14px; }
    .sleep-title {
      margin: 0 0 8px; color: var(--primary); letter-spacing: 0.14em;
      text-transform: uppercase; font-size: 11px; font-weight: 700; text-align: center;
    }
    .sleep { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; }
    .sleep button {
      height: 36px; min-width: 52px; padding: 0 12px; border-radius: 999px;
      color: var(--fg); font-size: 13px; font-weight: 700;
      background: linear-gradient(180deg, #4a4038, #2a241f);
      box-shadow: 0 3px 0 #070605, inset 0 1px 0 rgba(255,255,255,.16);
      -webkit-tap-highlight-color: transparent;
    }
    .sleep button.on {
      color: var(--ink);
      background: linear-gradient(180deg, #ffc191, #e07a3d 46%, #b85a22);
      box-shadow: 0 2px 0 #6a3014, inset 0 1px 0 rgba(255,255,255,.55);
    }
    .sleep button:focus { outline: none; }
    #sleep-off {
      color: var(--muted); background: transparent; min-width: 0;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
    }
    .sleep button:active { transform: translateY(2px); }
    #sleep-left { text-align: center; min-height: 18px; margin: 8px 0 0; }
    .menu {
      position: absolute; left: 16px; right: 16px; top: calc(100% - 4px); z-index: 20; padding: 10px; border-radius: 20px;
      background: linear-gradient(180deg, #3a322c, #141210);
      box-shadow: 0 10px 0 #070605, 0 22px 36px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.14);
    }
    .menu button {
      display: block; width: 100%; text-align: left; margin-bottom: 8px; padding: 12px 14px; border-radius: 14px; font-size: 15px;
      background: linear-gradient(180deg, #4a4038, #26211c);
      box-shadow: 0 4px 0 #070605, inset 0 1px 0 rgba(255,255,255,.14);
    }
    .menu button:active { transform: translateY(2px); box-shadow: 0 2px 0 #070605; }
    .menu p { margin: 0; padding: 2px 8px 6px; }
    @media (orientation: landscape) {
      header {
        padding-top: calc(8px + env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
      }
      .trays, main {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
      }
      .bar {
        left: max(12px, env(safe-area-inset-left));
        right: max(12px, env(safe-area-inset-right));
      }
      .sheet {
        padding-left: max(18px, env(safe-area-inset-left));
        padding-right: max(18px, env(safe-area-inset-right));
      }
      h1 { font-size: 30px; }
    }
    @media (orientation: landscape) and (max-height: 520px) {
      h1 { font-size: 26px; }
      .quiet, .search { margin-top: 8px; }
      .search { height: 42px; }
      .dial {
        width: 96px; height: 96px;
        box-shadow: 0 0 0 6px #2a211c, 0 0 0 9px #6a5040, 0 0 0 12px #120f0d, 0 10px 0 #070605;
      }
      .dial .logo { width: 62px; height: 62px; }
      .sheet {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-rows: auto minmax(0, 1fr);
        align-items: center;
        column-gap: 18px;
      }
      .sheet > .row { grid-column: 1 / -1; }
      .stage { grid-column: 1; min-height: 0; }
      .controls { grid-column: 2; flex-direction: column; padding: 0; }
      .sheet h3 { font-size: 22px; margin: 8px 0 4px; max-width: 28rem; }
      .stage .eq { margin-top: 10px; }
      .controls .play { width: 64px; height: 64px; }
    }
    @media (min-width: 700px) {
      #list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; align-items: stretch; }
      .station { margin: 0; height: 100%; }
      .empty { grid-column: 1 / -1; }
    }
    @media (min-width: 840px) {
      header, .trays, main {
        padding-left: max(24px, env(safe-area-inset-left), calc((100% - 1120px) / 2));
        padding-right: max(24px, env(safe-area-inset-right), calc((100% - 1120px) / 2));
      }
      .featured {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
        overflow: visible;
      }
      .card { width: auto; }
      .bar {
        left: 50%; right: auto; width: min(760px, calc(100% - 48px));
        transform: translateX(-50%);
      }
      .menu { right: auto; width: min(440px, calc(100% - 48px)); }
      .sheet h3 { max-width: 36rem; font-size: 34px; }
      .dial { width: 168px; height: 168px; }
      .dial .logo { width: 110px; height: 110px; }
    }
    @media (min-width: 1200px) {
      #list { grid-template-columns: 1fr 1fr 1fr; }
    }
    @media (orientation: landscape) and (max-height: 700px) {
      header {
        grid-template-columns: auto auto minmax(0, 1fr) auto;
        grid-template-areas: "brand backup search side";
        column-gap: 8px;
        padding-bottom: 8px;
      }
      .kicker, .count { display: none; }
      h1 { font-size: 22px; margin: 0; white-space: nowrap; }
      .head-side { flex-direction: row; align-items: center; }
      .quiet {
        margin-top: 0; width: 40px; height: 40px; padding: 0;
        display: grid; place-items: center; border-radius: 14px;
      }
      .backup-ico { display: block; }
      #backup-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
      }
      .search { margin-top: 0; height: 40px; min-width: 0; padding: 0 12px; }
      .search input { min-width: 0; }
    }
    .hidden { display: none; }
    @media (prefers-reduced-motion: reduce) {
      .eq i { animation: none; }
      .quiet:active, .play:active, .round:active, .menu button:active, .chips button.on, .sleep button:active, .refresh:active { transform: none; }
      .refresh.busy svg { animation: none; }
    }

    /* ============================================================
       GRwave — επίπεδο γυαλίσματος (μόνο προσθήκες, καμία αλλαγή διάταξης)
       ============================================================ */
    :root { color-scheme: dark; --ease: cubic-bezier(.2, .8, .2, 1); --glow: rgba(224, 122, 61, .42); }
    html { -webkit-text-size-adjust: 100%; }
    body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
    ::selection { background: rgba(224, 122, 61, .45); color: #fff; }
    .count, .meta, #shown { font-variant-numeric: tabular-nums; }

    /* Πιο απαλή αίσθηση πατήματος */
    .quiet, .refresh, .chips button, .health button, .card, .heart, .round, .play, .sleep button, .menu button, .lang button, .grow {
      transition: transform .14s var(--ease), box-shadow .18s var(--ease), opacity .15s ease, color .2s ease;
    }
    .card:active { transform: translateY(2px); box-shadow: 0 2px 0 #070605, inset 0 1px 0 rgba(255, 255, 255, .1); }
    .chips button:active, .health button:active, .heart:active { transform: translateY(2px); }
    .grow:active { opacity: .72; }

    /* Κεφαλίδα: ζεστή λάμψη στο πάνω μέρος και απαλή σκιά προς τα κάτω */
    header {
      background: linear-gradient(180deg, #181310, #100e0c 70%);
      box-shadow: 0 1px 0 #2a241f, 0 12px 20px -14px rgba(0, 0, 0, .9);
    }
    /* Ένδειξη «ζωντανά» δίπλα στο kicker της κεφαλίδας */
    .brand .kicker::before {
      content: ""; display: inline-block; vertical-align: middle; margin: -2px 7px 0 0;
      width: 6px; height: 6px; border-radius: 50%; background: var(--primary);
      box-shadow: 0 0 0 3px rgba(224, 122, 61, .2), 0 0 10px var(--glow);
      animation: beacon 2.4s ease-in-out infinite;
    }
    @keyframes beacon { 50% { opacity: .35; box-shadow: 0 0 0 1px rgba(224, 122, 61, .1), 0 0 4px var(--glow); } }

    /* Αναζήτηση: ευκρινής εστίαση */
    .search { transition: box-shadow .2s var(--ease); }
    .search:focus-within {
      box-shadow: inset 0 3px 8px rgba(0, 0, 0, .7), 0 0 0 2px rgba(224, 122, 61, .6), 0 0 20px rgba(224, 122, 61, .22);
    }
    .search input::placeholder { color: #8d8174; opacity: 1; }

    /* Chips και featured: καθαρό scroll χωρίς μπάρες */
    .chips, .featured { scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
    .chips::-webkit-scrollbar, .featured::-webkit-scrollbar { display: none; }
    .chips button.on {
      box-shadow: 0 3px 0 #6a3014, 0 0 18px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .55);
    }
    .health button.on { box-shadow: 0 3px 0 #6a3014, 0 0 14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .55); }

    /* Κάρτες και σταθμοί: βάθος και λάμψη στον ενεργό */
    .card { box-shadow: 0 4px 0 #070605, 0 10px 16px -8px rgba(0, 0, 0, .55), inset 0 1px 0 rgba(255, 255, 255, .14); }
    .card.on { box-shadow: 0 4px 0 #6a3014, 0 0 20px -4px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .2); }
    .card.on:active { box-shadow: 0 2px 0 #6a3014, 0 0 20px -4px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .2); }
    .station { box-shadow: 0 4px 0 #070605, 0 10px 16px -10px rgba(0, 0, 0, .5), inset 0 1px 0 rgba(255, 255, 255, .09); }
    .station.on { box-shadow: inset 4px 0 0 #e07a3d, 0 4px 0 #070605, 0 0 24px -8px var(--glow); }
    .tile { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -3px 5px rgba(0, 0, 0, .18); }
    .heart.on { text-shadow: 0 0 10px rgba(255, 190, 140, .6); }

    /* Κουμπί αναπαραγωγής: λάμψη όταν παίζει */
    .play.on { box-shadow: 0 5px 0 #6a3014, inset 0 2px 0 rgba(255, 255, 255, .55), 0 0 26px var(--glow); }
    .play.on:active { box-shadow: 0 2px 0 #6a3014, inset 0 2px 0 rgba(255, 255, 255, .4), 0 0 26px var(--glow); }
    .bar { box-shadow: 0 8px 0 #070605, 0 18px 30px rgba(0, 0, 0, .5), 0 0 0 1px rgba(255, 255, 255, .04), inset 0 1px 0 rgba(255, 255, 255, .16); }

    /* Έλεγχος σταθμών: το εικονίδιο ζεσταίνεται όσο τρέχει */
    .refresh.busy { color: #ffc191; box-shadow: 0 4px 0 var(--edge), 0 0 16px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .18); }
    .health-who {
      padding: 8px 10px; border-radius: 12px;
      background: rgba(224, 138, 130, .07); box-shadow: inset 0 0 0 1px rgba(224, 138, 130, .16);
    }

    /* Ομαλές εμφανίσεις πάνελ (μόνο σε στοιχεία που εμφανίζονται/κρύβονται, ποτέ σε λίστες) */
    @keyframes rise { from { opacity: 0; transform: translateY(14px); } }
    @keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
    @keyframes soft { from { opacity: 0; } }
    .sheet:not(.hidden) { animation: rise .28s var(--ease) backwards; }
    .menu:not(.hidden) { animation: drop .18s var(--ease) backwards; }
    .bar:not(.hidden), .health:not(.hidden) { animation: soft .25s ease backwards; }

    /* Προσβασιμότητα: ορατός δακτύλιος εστίασης για πληκτρολόγιο */
    button:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

    @media (prefers-reduced-motion: reduce) {
      .brand .kicker::before { animation: none; }
      .sheet:not(.hidden), .menu:not(.hidden), .bar:not(.hidden), .health:not(.hidden) { animation: none; }
      .quiet, .refresh, .chips button, .health button, .card, .heart, .round, .play, .sleep button, .menu button, .lang button, .grow { transition: none; }
      .card:active, .chips button:active, .health button:active, .heart:active { transform: none; }
    }

    /* Ευκολότερη ανάγνωση και πάτημα — χωρίς αλλαγή στο σχέδιο */
    .kicker, .tray-label, .sleep-title { font-size: 12px; }
    .count, .card span, .meta, h2 { font-size: 13px; }
    .chips.city button { font-size: 13px; }
    .health, .health-who { font-size: 14px; }
    .health button { font-size: 14px; }
    .lang button { font-size: 13px; }
    .sleep button { font-size: 14px; }
    .health-prog { height: 3px; border-radius: 3px; background: rgba(255,255,255,.1); overflow: hidden; }
    .health-prog i { display: block; height: 100%; width: 0; border-radius: 3px; background: var(--primary); transition: width .25s ease; }
    .health-prog.hidden { display: none; }
    @media (orientation: portrait) {
      .chips.city button { height: 40px; }
      .health-top { min-height: 44px; }
      .health button { height: 40px; }
      .sleep button { height: 44px; }
      .lang button { height: 34px; min-width: 40px; }
      .refresh { width: 44px; height: 44px; }
      .quiet { padding: 11px 16px; }
    }
    @media (prefers-reduced-motion: reduce) { .health-prog i { transition: none; } }

    /* ---- Βελτιώσεις εμφάνισης (ίδιο στυλ, λιγότερος θόρυβος) ---- */
    /* 1. Ονόματα σταθμών στις μεγάλες κάρτες: μέχρι 2 γραμμές, το eq μόνο όταν παίζει */
    .card b { -webkit-line-clamp: 2; line-height: 1.2; }
    .card .eq { display: none; }
    .card.on.live .eq { display: flex; }
    /* 3. Ενιαίο λεπτό πλαίσιο στα λογότυπα */
    .logo { outline: 1px solid rgba(255, 255, 255, .13); outline-offset: -1px; }
    /* 4. Ετικέτα στο κουμπί ελέγχου */
    .refresh-label { display: none; font-size: 13px; font-weight: 600; letter-spacing: .01em; }
    @media (orientation: portrait) {
      .refresh { width: auto; min-width: 44px; padding: 0 12px; gap: 6px; grid-auto-flow: column; }
      .refresh-label { display: inline; }
    }
    /* 2. Κουμπί αντιγράφου ως εικονίδιο δίπλα στην αναζήτηση (κάθετη προβολή) */
    @media (orientation: portrait) {
      header {
        grid-template-areas: none;
        grid-template-columns: minmax(0, 1fr) 44px;
      }
      .brand { grid-area: auto; grid-column: 1; grid-row: 1; }
      .head-side { grid-area: auto; grid-column: 1 / -1; grid-row: 1; justify-self: end; align-items: flex-end; }
      header .search { grid-area: auto; grid-column: 1; grid-row: 2; min-width: 0; }
      .quiet {
        grid-area: auto; grid-column: 2; grid-row: 2; justify-self: end; margin-top: 8px; padding: 0;
        width: 44px; height: 42px; display: grid; place-items: center; border-radius: 16px;
      }
      .backup-ico { display: block; }
      #backup-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
      }
      header .search { margin-right: 8px; }
    }
    /* 5. Ελαφρύτερες σκιές στα δευτερεύοντα στοιχεία */
    .chips button:not(.on), .quiet, .refresh:not(.busy), .heart:not(.on), .sleep button:not(.on), .health button:not(.on), .lang {
      box-shadow: 0 2px 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, .14);
    }
    .station:not(.on), .card:not(.on) {
      box-shadow: 0 2px 0 #070605, inset 0 1px 0 rgba(255, 255, 255, .1);
    }
    .chips button:not(.on):active, .quiet:active, .refresh:not(.busy):active, .heart:not(.on):active,
    .sleep button:not(.on):active, .health button:not(.on):active, .card:not(.on):active {
      transform: translateY(1px); box-shadow: 0 1px 0 var(--edge), inset 0 1px 0 rgba(255, 255, 255, .1);
    }
    /* 6. Πιο καθαρός ο σταθμός που παίζει + απαλή εμφάνιση στην εκκίνηση */
    .station.on .grow b, .card.on b { color: #ffd0a8; }
    .dot.on { animation: dotpulse 1.8s ease-in-out infinite; }
    @keyframes dotpulse { 50% { box-shadow: 0 0 0 8px rgba(224, 122, 61, .08), 0 2px 0 #6a3014; } }
    @keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
    body.fresh .card, body.fresh .station { animation: rise .32s var(--ease) backwards; }
    body.fresh .station:nth-child(2) { animation-delay: .04s; }
    body.fresh .station:nth-child(3) { animation-delay: .08s; }
    body.fresh .station:nth-child(4) { animation-delay: .12s; }
    @media (prefers-reduced-motion: reduce) {
      .dot.on { animation: none; }
      body.fresh .card, body.fresh .station { animation: none; }
    }

    /* =====================================================================
       GRwave — Σύγχρονο θέμα: επίπεδες επιφάνειες, λεπτά περιγράμματα,
       μαλακές σκιές. Ίδια παλέτα (σκούρο ζεστό + πορτοκαλί).
       ===================================================================== */
    :root {
      --bg: #0f0d0c; --surface: #1b1714; --raised: #26211d; --line: rgba(255,255,255,.08);
      --primary: #ec8a4f; --muted: #c0b5a8; --glow: rgba(236,138,79,.35); --r: 20px;
    }
    body { background: radial-gradient(900px 360px at 50% -140px, rgba(236,138,79,.13), transparent 70%), var(--bg); }
    body h1, body .kicker, body .err { text-shadow: none; }
    body header { background: var(--bg); box-shadow: none; border-bottom: 1px solid var(--line); }
    body .search {
      background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: 16px;
    }
    body .search:focus-within { box-shadow: inset 0 0 0 1.5px var(--primary); }

    /* Κουμπιά: επίπεδα, με περίγραμμα */
    body .quiet, body .refresh, body .chips button, body .health button, body .round, body .sleep button,
    body .menu button, body .heart, body .lang {
      background: var(--raised) !important; box-shadow: inset 0 0 0 1px var(--line) !important;
    }
    body .quiet { border-radius: 16px; }
    body .refresh { border-radius: 16px; }
    body .chips button, body .health button, body .sleep button { border-radius: 999px; }
    body .round { border-radius: 50%; }
    body .menu button { border-radius: 14px; }
    body .heart { border-radius: 50%; background: transparent !important; box-shadow: none !important; }
    body .heart.on { background: rgba(236,138,79,.16) !important; color: #ffc9a3; text-shadow: none; }
    body .lang { background: var(--surface) !important; }
    body .lang button, body .lang button.on { box-shadow: none !important; }
    body .lang button.on { background: var(--primary) !important; color: var(--ink); }
    body .chips button.on, body .health button.on, body .sleep button.on, body .round.on {
      background: var(--primary) !important; color: var(--ink); box-shadow: none !important; transform: none;
    }
    body .round.on { background: rgba(236,138,79,.16) !important; color: var(--primary); }
    body #sleep-off { background: transparent !important; }
    body .refresh.busy { color: #ffc9a3; box-shadow: inset 0 0 0 1px var(--primary) !important; }

    /* Δίσκοι φίλτρων χωρίς «βαθούλωμα» */
    body .chips, body .chips.city { background: transparent; box-shadow: none; padding: 8px 2px; margin-top: 2px; }
    body .chips.city button { height: 36px; }

    /* Πάτημα: ήπιο scale αντί για βύθιση */
    body .quiet:active, body .refresh:active, body .chips button:active, body .health button:active, body .round:active,
    body .sleep button:active, body .menu button:active, body .heart:active, body .card:active, body .play:active {
      transform: scale(.96) !important;
    }

    /* Κάρτες και σειρές */
    body .card, body .station {
      background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); border-radius: var(--r);
    }
    body .card { width: 236px; padding: 10px; gap: 12px; }
    body .station { padding: 10px 10px 10px 12px; gap: 14px; margin: 10px 0; }
    body .card.on, body .station.on {
      background: linear-gradient(135deg, rgba(236,138,79,.16), rgba(236,138,79,.04) 70%), var(--surface);
      box-shadow: inset 0 0 0 1.5px rgba(236,138,79,.6), 0 0 22px -8px var(--glow);
    }
    body .card:not(.on):active { box-shadow: inset 0 0 0 1px var(--line); }
    body .station.on .grow b, body .card.on b { color: #ffd9bd; }

    /* Λογότυπα: καθαρά, χωρίς «πλάκες» */
    body .plate { padding: 0; background: none; box-shadow: none; border-radius: 14px; }
    body .logo { width: 52px; height: 52px; border-radius: 14px; background: var(--raised); box-shadow: none;
      outline: 1px solid var(--line); outline-offset: -1px; }
    body .tile { width: 52px; height: 52px; border-radius: 14px; }
    body .card .logo, body .card .tile { width: 48px; height: 48px; border-radius: 14px; }
    body .card .plate, body .bar .plate { border-radius: 14px; padding: 0; }
    body .bar .logo { width: 44px; height: 44px; }

    /* Κάτω μπάρα: επιπλέουσα, με θόλωμα */
    body .bar {
      border-radius: 26px; padding: 10px 12px 10px 10px;
      background: rgba(34,28,24,.88);
      -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 14px 34px rgba(0,0,0,.5);
    }

    /* Play: συμπαγές πορτοκαλί */
    body .play {
      background: var(--primary); box-shadow: 0 8px 20px -6px var(--glow);
    }
    body .play.on { box-shadow: 0 8px 26px -4px var(--glow); }
    body .play:active { box-shadow: 0 4px 12px -4px var(--glow); }

    /* Πλήρες παράθυρο αναπαραγωγής */
    body .sheet {
      background: radial-gradient(520px 360px at 50% 28%, rgba(236,138,79,.2), transparent 70%), linear-gradient(180deg, #17120f, #0d0b0a);
    }
    body .dial {
      border-radius: 26%; background: var(--surface);
      box-shadow: inset 0 0 0 1px var(--line), 0 24px 50px -12px rgba(0,0,0,.65), 0 0 60px -20px var(--glow);
    }
    body .dial .plate { padding: 0; background: none; box-shadow: none; border-radius: 22%; }
    body .dial .logo { width: 100%; height: 100%; border-radius: 22%; outline: 0; }
    body .sheet h3 { font-size: 26px; }
    @media (orientation: portrait) {
      body .dial { width: min(64vw, 260px); height: min(64vw, 260px); }
      body .dial .plate { width: 100%; height: 100%; display: block; }
      body .dial .logo { width: 100%; height: 100%; }
      body .controls .play { width: 72px; height: 72px; }
    }
    @media (orientation: landscape) and (max-height: 520px) {
      body .dial { width: 110px; height: 110px; box-shadow: inset 0 0 0 1px var(--line), 0 14px 30px -10px rgba(0,0,0,.6); }
      body .dial .plate { width: 100%; height: 100%; }
      body .dial .logo { width: 100%; height: 100%; }
    }

    /* Μενού και κενή κατάσταση */
    body .menu {
      border-radius: 20px; background: #221c18;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 20px 40px rgba(0,0,0,.55);
    }
    body .empty { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
    body .health-prog i { background: var(--primary); }
    @media (orientation: portrait) {
      body .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
      body .stage .sleep-wrap { width: 100%; }
      body .sheet h3 { margin: 26px 0 6px; }
    }

    /* ---- Animation εκκίνησης: κύμα ήχου → GRwave ---- */
    .splash {
      position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
      background: radial-gradient(520px 360px at 50% 46%, rgba(224,122,61,.24), transparent 70%), #0d0b0a;
      animation: splashOut .55s ease 2.1s forwards; pointer-events: auto;
    }
    .splash-in { display: flex; flex-direction: column; align-items: center; }
    .splash-wave { display: flex; align-items: center; gap: 6px; height: 74px; }
    .splash-wave i {
      display: block; width: 7px; height: 100%; border-radius: 4px; background: var(--primary);
      box-shadow: 0 0 18px -2px var(--glow, rgba(224,122,61,.4));
      transform: scaleY(.08); opacity: 0;
      animation: bar 1.5s cubic-bezier(.3,.7,.2,1) forwards, barIdle 1.1s ease-in-out 1.5s infinite;
    }
    .splash-wave i:nth-child(1) { animation-delay: 0s, 1.5s; }
    .splash-wave i:nth-child(2) { animation-delay: .06s, 1.56s; }
    .splash-wave i:nth-child(3) { animation-delay: .12s, 1.62s; }
    .splash-wave i:nth-child(4) { animation-delay: .18s, 1.68s; }
    .splash-wave i:nth-child(5) { animation-delay: .24s, 1.74s; }
    .splash-wave i:nth-child(6) { animation-delay: .18s, 1.68s; }
    .splash-wave i:nth-child(7) { animation-delay: .12s, 1.62s; }
    .splash-wave i:nth-child(8) { animation-delay: .06s, 1.56s; }
    .splash-wave i:nth-child(9) { animation-delay: 0s, 1.5s; }
    @keyframes bar {
      0% { transform: scaleY(.08); opacity: 0; }
      20% { opacity: 1; }
      45% { transform: scaleY(1); }
      70% { transform: scaleY(.35); }
      100% { transform: scaleY(.55); opacity: 1; }
    }
    @keyframes barIdle { 50% { transform: scaleY(.3); } }
    .splash-title {
      display: flex; margin-top: 22px; font-family: Georgia, "Noto Serif", serif;
      font-size: 46px; font-weight: 650; line-height: 1; color: var(--fg, #f6f1e8);
    }
    .splash-title span { opacity: 0; transform: translateY(14px); animation: letter .5s var(--ease, ease) forwards; }
    .splash-title span:nth-child(1) { animation-delay: .75s; }
    .splash-title span:nth-child(2) { animation-delay: .82s; }
    .splash-title span:nth-child(3) { animation-delay: .89s; }
    .splash-title span:nth-child(4) { animation-delay: .96s; }
    .splash-title span:nth-child(5) { animation-delay: 1.03s; }
    .splash-title span:nth-child(6) { animation-delay: 1.1s; }
    @keyframes letter { to { opacity: 1; transform: none; } }
    .splash-sub {
      margin-top: 12px; color: var(--primary); font-size: 12px; font-weight: 700; letter-spacing: .32em;
      opacity: 0; animation: letter .6s ease 1.35s forwards;
    }
    @keyframes splashOut { to { opacity: 0; visibility: hidden; pointer-events: none; } }
    @media (prefers-reduced-motion: reduce) {
      .splash { animation: splashOut .3s ease .5s forwards; }
      .splash-wave i, .splash-title span, .splash-sub { animation: none; opacity: 1; transform: none; }
      .splash-wave i { transform: scaleY(.55); }
    }

    /* ---- Μόνιμο animation στον τίτλο GRwave ---- */
    h1 { display: flex; align-items: center; gap: .32em; }
    .hwave { display: inline-flex; align-items: center; gap: .1em; height: .8em; }
    .hwave i {
      display: block; width: .13em; height: 100%; border-radius: .1em; background: var(--primary);
      transform: scaleY(.3); transform-origin: center;
      animation: hwIdle 2.4s ease-in-out infinite;
    }
    .hwave i:nth-child(1) { animation-delay: 0s; }
    .hwave i:nth-child(2) { animation-delay: .25s; }
    .hwave i:nth-child(3) { animation-delay: .5s; }
    .hwave i:nth-child(4) { animation-delay: .75s; }
    .hwave i:nth-child(5) { animation-delay: 1s; }
    @keyframes hwIdle { 0%, 100% { transform: scaleY(.28); opacity: .7; } 50% { transform: scaleY(.62); opacity: 1; } }
    body.playing .hwave i { animation: hwPlay .9s ease-in-out infinite; box-shadow: 0 0 10px -1px var(--glow, rgba(224,122,61,.45)); }
    body.playing .hwave i:nth-child(2) { animation-delay: .12s; }
    body.playing .hwave i:nth-child(3) { animation-delay: .27s; }
    body.playing .hwave i:nth-child(4) { animation-delay: .06s; }
    body.playing .hwave i:nth-child(5) { animation-delay: .2s; }
    @keyframes hwPlay { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
    @media (prefers-reduced-motion: reduce) {
      .hwave i, body.playing .hwave i { animation: none; transform: scaleY(.55); box-shadow: none; }
    }

    /* ---- Κινούμενα γράμματα στον τίτλο GRwave ---- */
    .wm { display: inline-flex; }
    .wm span { display: inline-block; animation: wmIdle 3s ease-in-out infinite; will-change: transform; }
    .wm span:nth-child(1) { animation-delay: 0s; }
    .wm span:nth-child(2) { animation-delay: .18s; }
    .wm span:nth-child(3) { animation-delay: .36s; }
    .wm span:nth-child(4) { animation-delay: .54s; }
    .wm span:nth-child(5) { animation-delay: .72s; }
    .wm span:nth-child(6) { animation-delay: .9s; }
    @keyframes wmIdle { 0%, 55%, 100% { transform: translateY(0); } 25% { transform: translateY(-.1em); } }
    body.playing .wm span { animation: wmPlay 1.2s ease-in-out infinite; }
    body.playing .wm span:nth-child(2) { animation-delay: .1s; }
    body.playing .wm span:nth-child(3) { animation-delay: .2s; }
    body.playing .wm span:nth-child(4) { animation-delay: .3s; }
    body.playing .wm span:nth-child(5) { animation-delay: .4s; }
    body.playing .wm span:nth-child(6) { animation-delay: .5s; }
    @keyframes wmPlay {
      0%, 100% { transform: translateY(0); color: var(--fg, #f6f1e8); }
      40% { transform: translateY(-.16em); color: #ffd0a8; }
    }
    @media (prefers-reduced-motion: reduce) { .wm span, body.playing .wm span { animation: none; } }


    /* ── Οθόνη σταθμού: όλα στο κέντρο, όπως στην εφαρμογή (και σε οριζόντιες/μεγάλες οθόνες) ── */
    @media (orientation: landscape) and (min-height: 521px) {
      body .stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 0; }
      body .stage .sleep-wrap { width: 100%; }
      body .sheet h3 { margin: 26px auto 6px; }
      body .dial { width: min(34vh, 260px); height: min(34vh, 260px); }
      body .dial .plate { width: 100%; height: 100%; display: block; }
      body .dial .logo { width: 100%; height: 100%; }
      body .controls .play { width: 72px; height: 72px; }
    }

    /* ── Μπάρα αναπαραγωγής σε μεγάλες οθόνες: δεμένη στο κάτω μέρος, δεν «πέφτει» πάνω στους σταθμούς ── */
    @media (min-width: 840px) {
      main { padding-bottom: 130px; }
      body .bar {
        left: 0; right: 0; bottom: 0; width: auto; transform: none;
        border-radius: 0;
        padding: 12px max(24px, calc((100% - 1120px) / 2)) calc(12px + env(safe-area-inset-bottom));
        background: #1a1613;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        box-shadow: 0 -1px 0 rgba(255,255,255,.1), 0 -14px 30px rgba(0,0,0,.55);
      }
      .bar:not(.hidden) { animation: none; }
    }

    /* ── Κουμπί «Αντίγραφο»: εικονίδιο δίπλα στην αναζήτηση και σε μεγάλες οθόνες, όπως στο κινητό ── */
    @media (orientation: landscape) and (min-height: 701px) {
      header {
        grid-template-areas: none;
        grid-template-columns: minmax(0, 1fr) 44px;
      }
      .brand { grid-area: auto; grid-column: 1; grid-row: 1; }
      .head-side { grid-area: auto; grid-column: 1 / -1; grid-row: 1; justify-self: end; align-items: flex-end; }
      header .search { grid-area: auto; grid-column: 1; grid-row: 2; min-width: 0; margin-right: 8px; }
      .quiet {
        grid-area: auto; grid-column: 2; grid-row: 2; justify-self: end; margin-top: 8px; padding: 0;
        width: 44px; height: 42px; display: grid; place-items: center; border-radius: 16px;
      }
      .backup-ico { display: block; }
      #backup-label {
        position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
        overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
      }
    }
    /* Το υπομενού «Αντίγραφο» ανοίγει ΜΕΣΑ στην κεφαλίδα και σπρώχνει τη σελίδα προς τα κάτω —
       δεν επικαλύπτει ποτέ τους σταθμούς */
    body .menu:not(.hidden) {
      position: static; grid-area: auto; grid-column: 1 / -1; grid-row: 3;
      width: auto; margin: 10px 0 2px; left: auto; right: auto; top: auto;
      display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.1);
    }
    body .menu button { width: auto; margin: 0; flex: 1 1 auto; text-align: center; }
    body .menu p { flex: 1 1 100%; padding: 2px 6px 0; }
    @media (orientation: landscape) and (max-height: 700px) {
      body .menu:not(.hidden) { grid-row: 2; }
    }


    /* ── Ιστοσελίδα: το «Έλεγχος» δουλεύει μόνο στην εφαρμογή, οπότε δεν εμφανίζεται ── */
    html.web #refresh { display: none; }

    /* ── Αρχική οθόνη: σύντομη από τη δεύτερη επίσκεψη και μετά ── */
    html.quick-splash .splash { animation: splashOut .3s ease .35s forwards; }
    html.quick-splash .splash-wave i { animation: none; transform: scaleY(.55); opacity: 1; }
    html.quick-splash .splash-title span, html.quick-splash .splash-sub { animation: none; opacity: 1; transform: none; }

    /* ── Σταθμοί χωρίς λογότυπο: αρχικά + συχνότητα ── */
    .tile { line-height: 1; text-align: center; }
    .tile b { letter-spacing: -.02em; }
    .tile.has-fm { grid-template-rows: auto auto; align-content: center; gap: 1px; }
    .tile.has-fm b { font-size: 17px; }
    .tile small {
      display: block; font: 700 9.5px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      letter-spacing: -.01em; opacity: .78;
    }
    .card .tile b { font-size: 17px; }
    .card .tile.has-fm b { font-size: 15px; }
    .card .tile small { font-size: 8.5px; }

    /* ═══════════ Νέες λειτουργίες ═══════════ */
    .offscreen { position: fixed; left: -9999px; top: 0; opacity: 0; }
    .linkish {
      color: var(--muted); font-size: 13px; padding: 6px 4px; text-decoration: underline;
      text-decoration-color: rgba(255,255,255,.2); text-underline-offset: 3px;
    }
    .linkish:hover { color: var(--fg); }
    #recent-wrap { margin-bottom: 6px; }
    #recent-wrap .row { margin-top: 4px; }
    #recent-wrap h2 { margin-bottom: 0; }

    /* Χάρτης: chip */
    .chips .map-chip { color: #ffd0a8; }

    /* Οθόνη σταθμού: σύνδεσμοι τραγουδιού + εργαλεία */
    .track-links { display: flex; justify-content: center; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
    .track-links a {
      font-size: 12px; font-weight: 600; color: var(--fg); text-decoration: none;
      padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.06);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .track-links a:hover { background: rgba(255,255,255,.12); }
    .sheet-tools { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
    .sheet-tools button {
      font-size: 13px; padding: 8px 14px; border-radius: 999px; color: var(--fg);
      background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
    }
    .sheet-tools button:hover { background: rgba(255,255,255,.1); }
    .sheet-tools button.warn { color: #ffd0a8; box-shadow: inset 0 0 0 1px rgba(224,122,61,.6); }
    .sheet-tools button:disabled { opacity: .5; }
    @media (orientation: landscape) and (max-height: 520px) {
      .sheet-tools { margin-top: 8px; }
      .track-links { margin-top: 4px; }
    }

    /* Ιστορικό τραγουδιών */
    #history, #mapsheet { overflow: hidden; }
    .history-list { overflow: auto; margin-top: 12px; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
    .history-empty { text-align: center; margin-top: 40px; font-size: 15px; }
    .song {
      display: flex; align-items: center; gap: 12px; padding: 12px 4px;
      border-bottom: 1px solid rgba(255,255,255,.07);
    }
    .song-copy { flex: 1; min-width: 0; }
    .song-copy b { display: block; font-size: 15px; overflow-wrap: anywhere; }
    .song-copy .meta { display: block; margin-top: 3px; }
    .song .track-links { margin: 0; flex: none; }
    .history-clear { display: block; margin: 18px auto 0; }
    @media (max-width: 520px) {
      .song { flex-direction: column; align-items: stretch; gap: 8px; }
      .song .track-links { justify-content: flex-start; }
    }
    @media (min-width: 840px) {
      .history-list, .map-wrap-inner { width: min(760px, 100%); margin-left: auto; margin-right: auto; }
    }

    /* Χάρτης σταθμών */
    .map-hint { margin: 4px 0 8px; }
    .map-box { flex: 1; min-height: 0; display: grid; place-items: center; }
    .map-svg { width: 100%; height: 100%; max-height: 100%; display: block; }
    .map-svg .land { fill: #2a231e; stroke: #4a3c32; stroke-width: 1.2; stroke-linejoin: round; }
    .map-svg .inset { fill: none; stroke: rgba(255,255,255,.18); stroke-width: 1.5; stroke-dasharray: 6 6; }
    .map-svg .city { cursor: pointer; outline: none; }
    .map-svg .hit { fill: transparent; }
    .map-svg .dot { fill: rgba(224,122,61,.55); stroke: #f0a15f; stroke-width: 2; transition: fill .15s ease; }
    .map-svg .city:hover .dot, .map-svg .city:focus-visible .dot { fill: #e07a3d; }
    .map-svg .city.on .dot { fill: #e07a3d; stroke: #ffe0c4; stroke-width: 3; }
    .map-svg .city.live .dot { fill: #e07a3d; animation: mapPulse 1.6s ease-in-out infinite; }
    @keyframes mapPulse { 50% { stroke-width: 7; stroke: rgba(240,161,95,.45); } }
    .map-svg text {
      fill: #f6f1e8; font: 600 22px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      paint-order: stroke; stroke: #100e0c; stroke-width: 5px; stroke-linejoin: round; pointer-events: none;
    }
    .map-svg text tspan { fill: #f0a15f; }
    #mapsheet .tray-label { margin-top: 10px; }
    #map-abroad { padding-bottom: 6px; }
    @media (prefers-reduced-motion: reduce) { .map-svg .city.live .dot { animation: none; } }

    /* Μήνυμα (toast) */
    .toast {
      position: fixed; left: 50%; transform: translateX(-50%); z-index: 120;
      bottom: calc(96px + env(safe-area-inset-bottom)); max-width: min(92vw, 420px);
      padding: 11px 16px; border-radius: 14px; font-size: 14px; text-align: center;
      background: #f6f1e8; color: #1a1613; box-shadow: 0 12px 30px rgba(0,0,0,.5);
    }
    .toast:not(.hidden) { animation: soft .2s ease backwards; }

    /* Οθόνη σταθμού σε μικρά κινητά: μικρότερο λογότυπο ώστε να χωράνε όλα */
    @media (orientation: portrait) and (max-height: 760px) {
      body .dial { width: min(56vw, 27vh, 260px); height: min(56vw, 27vh, 260px); }
      body .sheet h3 { margin: 12px 0 4px; font-size: 24px; }
      body .stage .eq { margin-top: 8px; }
      body .stage .sleep-wrap { margin-top: 6px; }
      .sheet-tools { margin-top: 8px; }
      .sheet-tools button { padding: 7px 12px; }
      body .controls .play { width: 64px; height: 64px; }
    }

    /* ═══════════ Ξυπνητήρι / υπενθυμίσεις ═══════════ */
    #plan { overflow: hidden; }
    .plan-body { overflow: auto; min-height: 0; flex: 1; padding: 6px 0 16px; width: min(560px, 100%); margin: 0 auto; }
    .plan-station { font-family: Georgia, serif; font-size: 22px; margin: 6px 0 4px; }
    .plan-status { white-space: pre-line; margin: 0 0 14px; }
    .plan-time-wrap { display: block; margin: 4px 0 14px; }
    #plan-time, #plan-label {
      width: 100%; border: 0; outline: none; color: var(--fg); color-scheme: dark;
      background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
      border-radius: 18px; padding: 10px 16px;
    }
    #plan-time { font-size: 40px; font-weight: 700; letter-spacing: .02em; text-align: center; height: 76px; }
    #plan-time:focus, #plan-label:focus { box-shadow: inset 0 0 0 1.5px var(--primary); }
    #plan-label { font-size: 16px; height: 46px; }
    .plan-label { display: block; margin: 12px 0 0; }
    .plan-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
    .plan-days button, .plan-quick button {
      height: 40px; border-radius: 14px; color: var(--fg); font-weight: 600;
      background: rgba(255,255,255,.05); box-shadow: inset 0 0 0 1px rgba(255,255,255,.12);
    }
    .plan-days button.on, .plan-quick button.on { background: var(--primary); color: #1a100a; box-shadow: none; }
    .plan-quick { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
    .plan-quick button { height: 34px; padding: 0 12px; font-size: 13px; font-weight: 500; }
    .plan-note { margin: 12px 0 0; color: #ffd0a8; }
    .plan-actions { display: flex; align-items: center; gap: 14px; margin-top: 16px; flex-wrap: wrap; }
    .plan-save {
      height: 48px; padding: 0 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
      background: var(--primary); color: #1a100a;
    }
    .plan-list { margin-top: 18px; }
    .plan-list .song .linkish { flex: none; }

    /* ═══════════ Οθόνη σταθμού σε οριζόντιο κινητό: λογότυπο αριστερά, στοιχεία στη μέση, κουμπιά δεξιά ═══════════ */
    @media (orientation: landscape) and (max-height: 520px) {
      #sheet { padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: calc(8px + env(safe-area-inset-bottom)); row-gap: 4px; }
      #sheet .stage {
        display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 18px; row-gap: 0;
        align-content: center; align-items: start; text-align: left;
        min-height: 0; max-height: 100%; overflow-y: auto; overscroll-behavior: contain;
      }
      #sheet .stage > * { grid-column: 2; }
      #sheet .stage > .dial { grid-column: 1; grid-row: 1 / span 12; align-self: center; }
      #sheet .stage > .eq { display: none; }
      #sheet h3 { margin: 0 0 2px; font-size: 20px; max-width: none; }
      #sheet #sheet-track { text-align: left; margin: 2px 0 0; }
      #sheet .track-links, #sheet .sheet-tools, #sheet .sleep { justify-content: flex-start; }
      #sheet .track-links { margin-top: 6px; }
      #sheet #sheet-meta, #sheet #sheet-err { margin: 4px 0 0; }
      #sheet #sheet-err:empty { display: none; }
      #sheet .sleep-wrap { margin-top: 6px; }
      #sheet .sleep-title { text-align: left; margin-bottom: 4px; }
      #sheet .sleep button { height: 34px; }
      #sheet #sleep-left:empty { display: none; }
      #sheet .sheet-tools { margin-top: 8px; }
      #sheet .controls { gap: 10px; }
      #sheet .controls .round { width: 44px; height: 44px; }
      /* Οι υπόλοιπες οθόνες (τραγούδια, χάρτης, ξυπνητήρι, απόρρητο) σε μία στήλη */
      #history:not(.hidden), #mapsheet:not(.hidden), #plan:not(.hidden), #privacy:not(.hidden) { display: flex; flex-direction: column; }
      #plan-time { height: 56px; font-size: 30px; }
    }
    /* Οι τίτλοι των οθονών (π.χ. «Στον αέρα») να φαίνονται και σε οριζόντιο κινητό */
    @media (orientation: landscape) and (max-height: 700px) {
      .sheet .kicker { display: block; }
      .sheet > .row { width: 100%; }
    }

    /* Κουμπιά εργαλείων σε μία γραμμή που κυλάει οριζόντια — ποτέ πάνω στα χειριστήρια */
    .sheet-tools {
      flex-wrap: nowrap; overflow-x: auto; max-width: 100%; justify-content: safe center;
      scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 2px 4px;
      mask-image: linear-gradient(90deg, transparent 0, #000 12px, #000 calc(100% - 12px), transparent 100%);
    }
    .sheet-tools::-webkit-scrollbar { display: none; }
    .sheet-tools button { flex: none; white-space: nowrap; }
    @media (orientation: portrait) {
      body .stage { justify-content: safe center; overflow-y: auto; overflow-x: hidden; }
    }
    @media (orientation: portrait) and (max-height: 700px) {
      body .dial { width: min(44vw, 20vh, 220px); height: min(44vw, 20vh, 220px); }
      body .stage .eq { display: none; }
      body .sheet h3 { margin: 10px 0 2px; font-size: 22px; }
      #sheet-err:empty, #sleep-left:empty { display: none; }
      body .sleep button { height: 36px; }
      .sleep-title { margin-bottom: 4px; }
    }

    /* ═══════════════════════ v5.8 — διάταξη που αντέχει μεγάλα γράμματα συστήματος ═══════════════════════ */

    /* Κεφαλίδα σε κάθετη θέση: «Έλεγχος» μόνο με εικονίδιο, σε δική του στήλη — ποτέ πάνω στο λογότυπο */
    @media (orientation: portrait) {
      header {
        grid-template-areas: none;
        grid-template-columns: minmax(0, 1fr) auto 44px;
        column-gap: 8px;
      }
      .brand { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; }
      .brand h1 { white-space: nowrap; }
      .head-side { grid-column: 2 / 4; grid-row: 1; justify-self: end; align-items: flex-end; min-width: 0; }
      header .search { grid-column: 1 / 3; grid-row: 2; margin-right: 0; min-width: 0; }
      .quiet { grid-column: 3; grid-row: 2; }
      .refresh { width: 44px; min-width: 44px; padding: 0; gap: 0; }
      .refresh-label { display: none; }
    }
    .count { max-width: none; white-space: nowrap; }

    /* Μπάρα αναπαραγωγής: όνομα σε μία γραμμή */
    .bar .grow { min-width: 0; text-align: left; }
    .bar .grow b, .bar .grow .meta, .bar .grow .now { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

    /* Οθόνη σταθμού: τίποτα δεν «ζουλιέται» — αν δεν χωρά, κυλάει */
    #sheet .stage > * { flex-shrink: 0; }
    #sheet h3 {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
      max-width: min(22rem, 100%); font-size: 26px; line-height: 1.18;
    }
    #sheet #sheet-track {
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
      white-space: normal; max-width: min(24rem, 100%); line-height: 1.3;
    }
    #sheet #sheet-track.hidden { display: none; }
    @media (orientation: portrait) {
      body .dial { width: min(56vw, 26vh, 240px); height: min(56vw, 26vh, 240px); }
    }
    @media (orientation: portrait) and (max-height: 760px) {
      body .dial { width: min(46vw, 21vh, 200px); height: min(46vw, 21vh, 200px); }
      body .stage .eq { display: none; }
      #sheet h3 { font-size: 22px; margin-top: 10px; }
    }

    /* Χρονοδιακόπτης και εργαλεία: ίδια κουμπιά, ίδιο πλάτος, συμμετρικά */
    #sheet .sleep, #sheet .sheet-tools {
      display: grid; gap: 8px; width: min(100%, 360px); margin-left: auto; margin-right: auto;
      overflow: visible; mask-image: none; -webkit-mask-image: none; padding: 0;
    }
    #sheet .sleep { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    #sheet .sheet-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 12px; }
    #sheet .sleep button, #sheet .sheet-tools button {
      height: auto; min-height: 44px; min-width: 0; padding: 6px 10px; border-radius: 999px;
      font-size: 13px; font-weight: 700; line-height: 1.2; color: var(--fg);
      display: flex; align-items: center; justify-content: center; gap: 7px; white-space: normal; text-align: center;
    }
    #sheet .sheet-tools button {
      background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
    }
    #sheet .sheet-tools button:active { transform: scale(.96); }
    #sheet .sheet-tools button svg { width: 18px; height: 18px; flex: none; }
    #sheet .sheet-tools button .lbl { min-width: 0; overflow-wrap: anywhere; }
    /* μονό τελευταίο κουμπί: σε όλο το πλάτος */
    #sheet .sheet-tools > button.span2 { grid-column: 1 / -1; }
    #sheet .report-link { display: block; margin: 6px auto 0; font-size: 13px; }
    #sheet .report-link.hidden { display: none; }
    #sheet .report-link.warn { color: #ffd0a8; }

    /* Οριζόντιο κινητό: εργαλεία σε μία σειρά των 4 */
    @media (orientation: landscape) and (max-height: 520px) {
      #sheet .sleep, #sheet .sheet-tools { width: min(100%, 520px); margin-left: 0; margin-right: 0; }
      #sheet .sheet-tools { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); margin-top: 8px; }
      #sheet .sleep button, #sheet .sheet-tools button { min-height: 36px; padding: 4px 10px; }
      #sheet .report-link { margin-left: 0; }
    }

    /* κρυφά κουμπιά να μένουν κρυφά (τα #id κανόνες είναι πιο «δυνατοί» από το .hidden) */
    #sheet .sheet-tools button.hidden, #sheet .report-round.hidden { display: none; }
    /* Αναφορά «δεν παίζει»: στρογγυλό κουμπί δίπλα στο ✕ */
    #sheet > .row { gap: 10px; }
    #sheet .report-round { margin-left: auto; display: grid; place-items: center; color: var(--muted); }
    #sheet .report-round svg { width: 20px; height: 20px; }
    #sheet .report-round.warn { color: #ffd0a8; box-shadow: inset 0 0 0 1.5px var(--primary) !important; }
    /* λιγότερα κενά */
    #sheet .stage > .eq { display: none; }
    #sheet #sheet-meta { margin: 6px 0 0; }
    #sheet #sheet-err { margin: 6px 0 0; min-height: 0; }
    #sheet #sheet-err:empty, #sheet #sleep-left:empty { display: none; }
    #sheet .sleep-wrap { margin-top: 14px; }
    #sheet .sleep-title { margin: 0 0 6px; }
    @media (orientation: portrait) {
      body .dial { width: min(56vw, 24vh, 240px); height: min(56vw, 24vh, 240px); }
      #sheet h3 { margin: 20px 0 4px; }
    }
    @media (orientation: portrait) and (max-height: 760px) {
      body .dial { width: min(46vw, 20vh, 200px); height: min(46vw, 20vh, 200px); }
      #sheet h3 { margin: 12px 0 2px; }
      #sheet .sleep-wrap { margin-top: 10px; }
      #sheet .sheet-tools { margin-top: 10px; }
    }
    /* Μεγάλες οθόνες: ίδια λογική στηλών στην κεφαλίδα, χωρίς επικαλύψεις */
    @media (orientation: landscape) and (min-height: 701px) {
      header { grid-template-areas: none; grid-template-columns: minmax(0, 1fr) auto 44px; column-gap: 8px; }
      .brand { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; }
      .brand h1 { white-space: nowrap; }
      .head-side { grid-column: 2 / 4; grid-row: 1; justify-self: end; }
      header .search { grid-column: 1 / 3; grid-row: 2; margin-right: 0; min-width: 0; }
      .quiet { grid-column: 3; grid-row: 2; }
    }
    /* Αναζήτηση: να μικραίνει κι αυτή με μεγάλα γράμματα */
    .search { min-width: 0; overflow: hidden; }
    .search input { min-width: 0; width: 0; flex: 1 1 0; }
    /* Ετικέτες κουμπιών: ποτέ σπάσιμο στη μέση της λέξης */
    #sheet .sheet-tools button .lbl { overflow-wrap: normal; word-break: keep-all; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    /* Μεγάλα ονόματα σταθμών: λίγο μικρότερα γράμματα και έως 3 γραμμές, για να φαίνεται όλο το όνομα */
    #sheet h3.long { font-size: 21px; -webkit-line-clamp: 3; }
    @media (orientation: portrait) and (max-height: 760px) { #sheet h3.long { font-size: 19px; } }
    @media (orientation: landscape) and (max-height: 520px) {
      #sheet h3.long { font-size: 18px; -webkit-line-clamp: 2; }
      #sheet .sleep, #sheet .sheet-tools { width: min(100%, 640px); }
      #sheet .sheet-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    }
    @media (orientation: landscape) and (max-height: 520px) and (max-width: 819px) {
      #sheet .sheet-tools { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    }
    @media (orientation: landscape) and (max-height: 520px) {
      #sheet .stage { align-content: safe center; }
    }
    @media (orientation: landscape) and (max-height: 520px) and (max-width: 819px) {
      #sheet .sheet-tools { grid-template-columns: repeat(4, minmax(0, 1fr)); }
      #sheet .sheet-tools button svg { display: none; }
      #sheet .sheet-tools button { padding: 4px 6px; }
    }

    /* ═══════════ Τι παίζει τώρα · Δημοφιλή ═══════════ */
    .np-line {
      display: block; margin-top: 3px; font-size: 12.5px; color: #ffd0a8; font-weight: 500;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }
    .np-line:empty { display: none; }
    .station .grow { min-width: 0; }
    .card .card-copy { min-width: 0; }
    .card .np-line { font-size: 11.5px; margin-top: 2px; }
    .card-top { position: relative; }
    .rank {
      position: absolute; left: -6px; top: -6px; z-index: 1; min-width: 20px; height: 20px; padding: 0 5px;
      border-radius: 999px; display: grid; place-items: center;
      font: 800 11px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
      background: var(--primary); color: #1a100a; box-shadow: 0 0 0 2px var(--bg, #100e0c);
    }
    .chips button[data-f="np"]:not(.on) { color: #ffd0a8; }
    /* «Ακύρωση» λίγο πιο φαρδύ από τα 15′/30′/60′ ώστε να χωρά πάντα */
    #sheet .sleep { grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(0, 1.35fr); }
    #sheet .sleep button { padding-left: 6px; padding-right: 6px; }
    .nw { white-space: nowrap; }
    @media (orientation: landscape) and (max-height: 520px) {
      #sheet .sheet-tools button svg { display: none; }
      #sheet .sheet-tools button { padding: 4px 6px; }
    }

    /* Διάγνωση ήχου */
    #diag { overflow: hidden; }
    .diag-hint { margin: 6px 0 10px; }
    .diag-text {
      flex: 1; min-height: 0; overflow: auto; margin: 0; padding: 12px; border-radius: 14px;
      background: rgba(0,0,0,.35); box-shadow: inset 0 0 0 1px var(--line);
      font: 11.5px/1.45 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: pre-wrap; overflow-wrap: anywhere;
      color: #e9dfd2; -webkit-user-select: text; user-select: text;
    }
    .diag-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
    .diag-actions button {
      min-height: 44px; border-radius: 999px; font-weight: 700; font-size: 13px; color: var(--fg);
      background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
    }
    @media (orientation: landscape) and (max-height: 700px) { #diag:not(.hidden) { display: flex; flex-direction: column; } }

    /* Χάρτης: στυλ ανά τελεία (οι ζώνες αφής είναι ξεχωριστή στρώση) */
    .map-svg .dots .dot { cursor: pointer; outline: none; }
    .map-svg .hits .hit { fill: transparent; cursor: pointer; }
    .map-svg .dots .dot:hover, .map-svg .dots .dot:focus-visible { fill: #e07a3d; }
    .map-svg .dots .dot.on { fill: #e07a3d; stroke: #ffe0c4; stroke-width: 3; }
    .map-svg .dots .dot.live { fill: #e07a3d; animation: mapPulse 1.6s ease-in-out infinite; }
    @media (prefers-reduced-motion: reduce) { .map-svg .dots .dot.live { animation: none; } }

    /* ── v6.1 Κάτω μπάρα: δεμένη από άκρη σε άκρη σε όλες τις οθόνες, με σβήσιμο από πάνω.
          Οι σταθμοί δεν φαίνονται πια γύρω/κάτω από τη μπάρα· «σβήνουν» λίγο πριν φτάσουν σε αυτήν. ── */
    body .bar::before {
      content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 36px; pointer-events: none;
      background: linear-gradient(to bottom, rgba(23,19,16,0), #171310);
    }
    /* --barh: πραγματικό ύψος της μπάρας (από app.js)· + σβήσιμο 36px + 16px αέρας */
    body main { padding-bottom: max(calc(var(--barh, 92px) + 52px), calc(28px + env(safe-area-inset-bottom))); }
    @media (max-width: 839px) {
      body .bar {
        left: 0; right: 0; bottom: 0; width: auto; transform: none; border-radius: 0;
        padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
        background: #171310;
        -webkit-backdrop-filter: none; backdrop-filter: none;
        box-shadow: 0 -1px 0 rgba(255,255,255,.09);
      }
    }
    @media (min-width: 840px) {
      body .bar { background: #171310; box-shadow: 0 -1px 0 rgba(255,255,255,.09); }
    }

    /* ═══════════════════════ v6.2 ═══════════════════════ */

    /* Μπάρα «παίζει τώρα» μέσα στην κεφαλίδα, κάτω από την αναζήτηση.
       Σε κάθετη θέση, tablet και υπολογιστή είναι μέρος της κεφαλίδας (που μένει σταθερή πάνω):
       οι σταθμοί περνούν κάτω της όπως κάτω από την αναζήτηση — δεν σκεπάζεται τίποτα.
       Σε χαμηλή οριζόντια οθόνη (κινητό πλαγιαστό) μένει δεμένη κάτω, όπως στην 6.1. */
    @media (orientation: portrait), (min-height: 701px) {
      header > .bar {
        position: static; grid-column: 1 / -1; grid-row: 3; z-index: auto;
        left: auto; right: auto; top: auto; bottom: auto; width: auto; transform: none;
        margin: 10px 0 0; border-radius: 16px; padding: 8px 8px 8px 10px; gap: 10px;
        background: #221c18; -webkit-backdrop-filter: none; backdrop-filter: none;
        box-shadow: inset 0 0 0 1px rgba(255,255,255,.09);
      }
      header > .bar::before { display: none; }
      header > .bar .logo { width: 40px; height: 40px; border-radius: 12px; }
      header > .bar .play { width: 44px; height: 44px; flex: none; }
      header > .bar .play .ico { width: 18px; height: 18px; }
      body .menu:not(.hidden) { grid-row: 4; }
      body main { padding-bottom: calc(28px + env(safe-area-inset-bottom)); }
    }

    /* «Δημοφιλείς σταθμοί»: μία σειρά που κυλά οριζόντια παντού — και στον υπολογιστή δεν γίνεται πια πλέγμα 46 σταθμών */
    body .featured { display: flex; overflow-x: auto; overflow-y: hidden; }
    body .featured > .card { flex: none; }
    #featured-wrap .row { margin-top: 4px; }
    #featured-wrap h2 { margin-bottom: 4px; }
    .row-nav { display: none; gap: 6px; flex: none; }
    @media (hover: hover) and (pointer: fine) {
      .row-nav:not(.hidden) { display: flex; }
    }
    .row-nav button {
      width: 32px; height: 32px; border-radius: 999px; display: grid; place-items: center;
      font-size: 20px; line-height: 1; padding: 0 0 2px; color: var(--fg);
      background: var(--raised); box-shadow: inset 0 0 0 1px var(--line);
    }
    .row-nav button:not(:disabled):hover { background: #3a312a; }
    .row-nav button:disabled { opacity: .35; cursor: default; }