/* ---------- Theme ---------- */
  :root {
    --bg: #0f1420;
    --panel: #182033;
    --panel-hover: #1f2a42;
    --line: #2a3550;
    --text: #e8ecf5;
    --muted: #94a0ba;
    --film: #f5a623;
    --tv: #4cc2ff;
    --music: #b388ff;
    --wish: #6ee7a0;
    --accent: var(--film);
    --radius: 14px;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; background: var(--bg); color: var(--text);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
  body { min-height: 100vh; padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
  button { font: inherit; color: inherit; cursor: pointer; }
  [hidden] { display: none !important; }

  /* ---------- Loading screen (your icon, pulsing) ---------- */
  #loader { position: fixed; inset: 0; z-index: 100; background: #ffffff; display: flex; align-items: center; justify-content: center;
    transition: opacity .25s ease; }
  #loader.dark { background: var(--bg); }          /* used when opening a big section, so it does not flash white */
  #loader.hide { opacity: 0; pointer-events: none; }
  #loader img { width: 120px; height: 120px; border-radius: 26px; animation: pulse 1.2s ease-in-out infinite; }
  @keyframes pulse { 0%, 100% { transform: scale(.93); opacity: .7; } 50% { transform: scale(1); opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { #loader img { animation: none; } }

  /* ---------- Home ---------- */
  .home { max-width: 900px; margin: 0 auto; padding: 8vh 20px 40px; text-align: center; }
  .home h1 { font-size: clamp(1.8rem, 5vw, 2.8rem); margin: 0 0 6px; letter-spacing: .5px; }
  .home p.sub { color: var(--muted); margin: 0 0 40px; }
  .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 18px; }
  .tile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
    padding: 36px 20px; transition: transform .15s, background .15s, border-color .15s; }
  .tile:hover, .tile:focus-visible { transform: translateY(-3px); background: var(--panel-hover); border-color: var(--c); outline: none; }
  .tile .icon { font-size: 3rem; line-height: 1; display: block; margin-bottom: 14px; }
  .tile .name { font-size: 1.5rem; font-weight: 700; color: var(--c); display: block; }
  .tile .count { color: var(--muted); font-size: .95rem; margin-top: 6px; display: block; }
  .tile[data-go="film"]  { --c: var(--film); }
  .tile[data-go="tv"]    { --c: var(--tv); }
  .tile[data-go="music"] { --c: var(--music); }
  .tile[data-go="wish"]  { --c: var(--wish); }

  /* ---------- Section pages ---------- */
  .page { max-width: 960px; margin: 0 auto; padding: 0 16px 60px; }
  .bar { position: sticky; top: 0; z-index: 5; background: var(--bg); padding: 14px 0 12px; border-bottom: 1px solid var(--line); }
  .bar-top { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
  .back { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 14px; }
  .back:hover { background: var(--panel-hover); }
  .bar h2 { margin: 0; font-size: 1.4rem; color: var(--accent); flex: 1; }
  .meta { color: var(--muted); font-size: .9rem; white-space: nowrap; }
  .search-row { display: flex; gap: 10px; }
  .search { flex: 1; background: var(--panel); border: 2px solid var(--line); border-radius: 12px;
    color: var(--text); padding: 13px 16px; font-size: 1.1rem; min-width: 0; }
  .search:focus { outline: none; border-color: var(--accent); }
  .clear { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; }
  .sorts { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; color: var(--muted); font-size: .85rem; }
  .sorts button { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 4px 12px; color: var(--muted); }
  .sorts button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
  .hint { margin-left: auto; }
  @media (hover: none) { .hint { display: none; } }
  .more { display: block; width: 100%; margin: 14px 0; padding: 12px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; color: var(--muted); }

  ul.list { list-style: none; margin: 0; padding: 0; }
  ul.list li { display: flex; align-items: baseline; gap: 12px; padding: 11px 6px; border-bottom: 1px solid var(--line); }
  ul.list li:hover { background: var(--panel); }
  .t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
  .s { color: var(--muted); font-size: .88rem; white-space: nowrap; }
  .y { color: var(--accent); font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: right; }
  .y.none { color: var(--muted); opacity: .6; }
  mark { background: color-mix(in srgb, var(--accent) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
  .addbar { padding: 12px 0 4px; }
  .addwish { width: 100%; text-align: left; background: color-mix(in srgb, var(--wish) 12%, var(--panel)); border: 1px dashed var(--wish);
    color: var(--text); border-radius: 12px; padding: 12px 14px; overflow-wrap: anywhere; }
  .addwish:hover, .addwish:focus-visible { background: color-mix(in srgb, var(--wish) 22%, var(--panel)); outline: none; }
  .addwish strong { color: var(--wish); }
  .addwish.strong { border-style: solid; font-size: 1.02rem; }     /* nothing matched, so make the option prominent */

  /* Phones: put the artist, album or season text on its own line under the title */
  @media (max-width: 640px) {
    ul.list li { flex-wrap: wrap; row-gap: 2px; }
    ul.list .t { flex: 1 1 0; }
    ul.list .y { order: 2; }
    ul.list .s { order: 3; flex: 1 1 100%; white-space: normal; }
  }
  .empty { text-align: center; color: var(--muted); padding: 60px 20px; }
  .empty strong { display: block; font-size: 1.2rem; color: var(--text); margin-bottom: 8px; }

  /* ---------- Wishlist ---------- */
  #view-wish { --accent: var(--wish); }
  .q { font-size: 1.15rem; margin: 22px 0 12px; }
  .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; }
  .choice { background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 18px 10px; font-size: 1.05rem; }
  .choice:hover, .choice:focus-visible { border-color: var(--c); outline: none; background: var(--panel-hover); }
  .choice span { display: block; font-size: 1.8rem; margin-bottom: 4px; }
  .choice[data-type="film"] { --c: var(--film); } .choice[data-type="tv"] { --c: var(--tv); } .choice[data-type="music"] { --c: var(--music); }
  .wform { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; margin-top: 18px; }
  .formhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
  .formhead h3 { margin: 0; color: var(--c); }
  .linkbtn { background: none; border: none; color: var(--muted); text-decoration: underline; padding: 4px; }
  .field { display: block; margin-top: 12px; }
  .field span { display: block; color: var(--muted); font-size: .85rem; margin-bottom: 4px; }
  .field input, .field textarea { width: 100%; background: var(--bg); border: 2px solid var(--line); border-radius: 10px;
    color: var(--text); padding: 11px 12px; font: inherit; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--c); }
  .warn { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: color-mix(in srgb, var(--film) 18%, transparent); border: 1px solid var(--film); }
  .actions { display: flex; gap: 10px; margin-top: 16px; }
  .primary { background: var(--c); color: #0f1420; border: none; border-radius: 10px; padding: 11px 20px; font-weight: 700; }
  .secondary { background: transparent; border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; }
  .wtools { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 22px 0 6px; }
  .wtools button { background: transparent; border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; color: var(--muted); }
  .wtools button[aria-pressed="true"] { border-color: var(--wish); color: var(--wish); }
  .wtools .grow { margin-left: auto; }
  .wlist { list-style: none; margin: 0; padding: 0; }
  .wlist li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 6px; border-bottom: 1px solid var(--line); }
  .wlist .body { flex: 1; min-width: 0; }
  .wlist .wt { font-weight: 600; overflow-wrap: anywhere; }
  .wlist .wd { color: var(--muted); font-size: .88rem; margin-top: 2px; overflow-wrap: anywhere; }
  .wlist li.done .wt { text-decoration: line-through; opacity: .55; }
  .badge { font-size: .72rem; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px;
    color: #0f1420; background: var(--c); margin-top: 2px; }
  .badge.film { --c: var(--film); } .badge.tv { --c: var(--tv); } .badge.music { --c: var(--music); }
  .wlist .row-actions { display: flex; gap: 6px; }
  .wlist .row-actions button { background: transparent; border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px; color: var(--muted); font-size: .85rem; }
  .wlist .row-actions button:hover { color: var(--text); border-color: var(--muted); }
  .note { color: var(--muted); font-size: .85rem; margin-top: 18px; }

  #view-film  { --accent: var(--film); }
  #view-tv    { --accent: var(--tv); }
  #view-music { --accent: var(--music); }

  /* Connection status, settings and import messages */
  .status { color: var(--muted); font-size: .85rem; margin: 18px 0 0; min-height: 1.2em; }
  .settings-link { display: block; margin: 10px auto 0; }
  .importmsg, .msg { color: var(--muted); font-size: .9rem; margin: 8px 0 0; min-height: 1.2em; }
  .sform { --c: var(--wish); }