:root{
    /* Tells the browser to draw everything it draws itself - scrollbars, the
       dropdown list of a <select>, checkboxes, the overscroll gutter - in its
       dark palette. Without this one line those parts stay light no matter
       what the rest of the stylesheet says, because they are painted by the
       browser rather than by us. */
    color-scheme:dark;

    --bg:#000000;
    --card:#16181c;
    --card-hover:#1c1f23;
    --accent:#1d9bf0;
    --accent-hover:#1a8cd8;
    --text:#e7e9ea;
    --muted:#71767b;
    --border:#2f3336;
    --input:#202327;
    --scroll-thumb:#3a3f44;
    --scroll-thumb-hover:#4d5359;
  }
  *{box-sizing:border-box;}
  html{-webkit-text-size-adjust:100%;}

  /* Firefox and current Chrome. The track is the page background rather than
     a lighter grey, so the bar reads as part of the page instead of a strip
     glued to the edge. */
  html, body, *{
    scrollbar-color:var(--scroll-thumb) var(--bg);
  }
  /* WebKit and older Chrome, which ignore the property above. */
  ::-webkit-scrollbar{ width:10px; height:10px; }
  ::-webkit-scrollbar-track{ background:var(--bg); }
  ::-webkit-scrollbar-thumb{
    background:var(--scroll-thumb);
    border-radius:8px;
    border:2px solid var(--bg);
  }
  ::-webkit-scrollbar-thumb:hover{ background:var(--scroll-thumb-hover); }
  ::-webkit-scrollbar-corner{ background:var(--bg); }
  body{
    margin:0;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Sans","Yu Gothic","Noto Sans",sans-serif;
    background:var(--bg);
    color:var(--text);
    padding:16px;
    padding-top:max(16px, env(safe-area-inset-top));
    padding-bottom:max(16px, env(safe-area-inset-bottom));
    -webkit-font-smoothing:antialiased;
  }
  @media (min-width:640px){
    body{ padding:24px; }
  }
  /* ---------------------------------------------------------------
     Layout shell
       phones  : one column, settings collapse behind a button
       desktop : sticky settings sidebar on the left, timeline centre
  ---------------------------------------------------------------- */
  .shell{
    max-width:600px;
    margin:0 auto;
  }
  .brand-name{
    font-size:1.5rem;
    font-weight:800;
    letter-spacing:0.02em;
    color:var(--text);
  }
  /* Two brand elements, never both on screen: the h1 in the topbar is what a
     phone shows, the plain span in the sidebar is what desktop shows. Only one
     of them is a heading, so the document still has exactly one h1. */
  .topbar-brand{ display:none; }
  .sidebar-brand{ display:block; margin-bottom:10px; }

  .quickbar{
    display:flex;
    align-items:flex-end;
    gap:10px;
  }
  .quick-field{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;
  }
  .quick-label{
    font-size:0.66rem;
    color:var(--muted);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .quickbar select{ width:100%; }
  h1{
    font-size:1.5rem;
    margin:0 0 2px;
    color:var(--text);
    font-weight:800;
    letter-spacing:0.02em;
  }
  .settings-toggle{
    flex-shrink:0;
    font-size:0.82rem;
    padding:8px 14px;
    min-height:36px;
  }
  .settings-panel{ display:block; }
  .settings-panel.collapsed{ display:none; }

  /* Phones: the brand and the flags sit at the very top in normal flow, so
     they scroll away and give the phrases the whole screen. What stays under
     the thumb is the bar along the bottom edge - repeat count, speed, MENU -
     the three things a reader reaches for while audio is looping. The panel
     is the sibling directly above the quickbar, so it opens upward from it
     with no reordering needed. */
  @media (max-width:999px){
    body{ padding-bottom:calc(62px + env(safe-area-inset-bottom)); }
    /* Brand on its own line, the language flags on the next one. Six flags
       need the full width to stay one row; sharing a line with the brand
       squeezed them. Both scroll away together.
       Note: the base .topbar rule sits further down this file, so anything it
       also sets - display, justify-content, margin-bottom - wins here on
       source order. Only properties it does not touch belong in this block. */
    .topbar{
      flex-direction:column;
      align-items:flex-start;
      gap:8px;
    }
    .topbar-brand{ display:block; }
    .sidebar-brand{ display:none; }
    .topbar h1{ font-size:1.25rem; }
    .flag-bar{ justify-content:flex-start; width:100%; }

    .sidebar{
      position:fixed;
      left:0;
      right:0;
      bottom:0;
      z-index:30;
      display:flex;
      flex-direction:column;
      background:var(--bg);
      margin:0;
      padding:8px 16px;
      padding-bottom:max(8px, env(safe-area-inset-bottom));
      border-top:1px solid var(--border);
      box-shadow:0 -8px 24px rgba(0,0,0,0.55);
    }
    /* an open menu scrolls on its own rather than growing past the screen */
    .settings-panel{
      max-height:calc(100vh - 112px);
      max-height:calc(100dvh - 112px);
      overflow-y:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:10px;
    }

    /* One row, always. The labels would stack above the selects and make the
       bar read as two lines, so they come off the screen - but stay in the
       accessibility tree, since the label is the select's accessible name.
       The option text carries the meaning on its own: "3x", "Normal (1.0x)". */
    .quickbar{ align-items:center; gap:8px; flex-wrap:nowrap; }
    .quick-field{ flex:1 1 0; min-width:0; }
    .quick-label{
      position:absolute;
      width:1px; height:1px;
      margin:-1px; padding:0; border:0;
      overflow:hidden;
      clip:rect(0 0 0 0);
      clip-path:inset(50%);
      white-space:nowrap;
    }
    .quickbar select{
      min-height:40px;
      padding:6px 10px;
      font-size:0.82rem;
      text-overflow:ellipsis;
    }
    .quickbar .settings-toggle{
      flex:0 0 auto;
      min-height:40px;
      padding:8px 12px;
    }

    /* nothing overlaps the top of the page now, so jump targets need only a
       small breathing gap */
    .sub-head, .card{ scroll-margin-top:16px; }
  }
  @media (min-width:640px) and (max-width:999px){
    .sidebar{ padding:8px 24px; }
  }
  /* Narrow phones: trim the padding rather than let anything wrap. */
  @media (max-width:359px){
    .quickbar{ gap:6px; }
    .quickbar select{ padding:6px 6px; font-size:0.78rem; }
    .quickbar .settings-toggle{ padding:8px 9px; font-size:0.76rem; }
  }

  /* Floating stop button - reachable with a thumb while audio loops */
  .stop-fab{
    position:fixed;
    right:16px;
    bottom:calc(16px + env(safe-area-inset-bottom));
    z-index:20;
    display:none;
    box-shadow:0 6px 20px rgba(0,0,0,0.5);
    background:var(--card);
    color:var(--text);
    border:1px solid var(--border);
    padding:10px 18px;
  }
  .stop-fab:hover{ background:var(--card-hover); }
  body.is-playing .stop-fab{ display:block; }
  /* on phones it has to sit above the fixed bottom bar */
  @media (max-width:999px){
    .stop-fab{ bottom:calc(66px + env(safe-area-inset-bottom)); }
  }

  @media (min-width:1000px){
    body{ padding:24px 32px; }
    .shell{
      max-width:1060px;
      display:grid;
      grid-template-columns:300px minmax(0,1fr);
      gap:0 32px;
      align-items:start;
    }
    .topbar{ grid-column:1 / -1; justify-content:flex-end; }
    .sidebar{
      position:sticky;
      top:24px;
      max-height:calc(100vh - 48px);
      overflow-y:auto;
      scrollbar-width:thin;
      display:flex;
      flex-direction:column;
    }
    /* The markup puts the quickbar last so that it lands on the bottom bar of
       a phone. Desktop has no bottom bar, so lift it back under the brand -
       otherwise the playback controls end up below the whole nav tree. */
    .sidebar-brand{ order:0; }
    .quickbar{ order:1; margin-bottom:14px; }
    .settings-panel{ order:2; }
    .quickbar{ flex-direction:column; align-items:stretch; gap:8px; }
    /* On desktop the settings are always visible - no toggle needed. */
    .settings-toggle{ display:none; }
    .settings-panel.collapsed{ display:block; }
    .sidebar .controls{
      flex-direction:column;
      align-items:stretch;
    }
    .sidebar .controls label{
      width:100%;
      justify-content:space-between;
    }
    .sidebar .controls select,
    .sidebar .controls input[type="text"]{ width:100%; }
    .sidebar #langControls{ flex-direction:column; align-items:flex-start; }
    .sidebar #langControls label{ justify-content:flex-start; }
    h1{ font-size:1.9rem; }
    .stop-fab{ right:auto; left:32px; bottom:32px; }
  }
  .controls{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    background:var(--card);
    border:1px solid var(--border);
    border-radius:16px;
    padding:12px 14px;
    margin-bottom:12px;
  }
  .controls label{
    font-size:0.85rem;
    color:var(--muted);
    display:flex;
    align-items:center;
    gap:6px;
  }
  select, input[type="text"], input[type="password"]{
    padding:9px 12px;
    border-radius:9999px;
    border:1px solid var(--border);
    font-size:16px;
    background:var(--input);
    color:var(--text);
    min-height:40px;
    outline:none;
  }
  select:focus, input[type="text"]:focus, input[type="password"]:focus{
    border-color:var(--accent);
  }
  input::placeholder{ color:var(--muted); }
  input[type="text"]{
    flex:1;
    min-width:160px;
  }
  input[type="checkbox"]{
    accent-color:var(--accent);
    width:16px;
    height:16px;
  }
  /* X-style single-column timeline: never two cards side by side */
  .grid{
    display:flex;
    flex-direction:column;
    border:1px solid var(--border);
    border-radius:16px;
    overflow:hidden;
    background:var(--card);
  }
  .card{
    background:transparent;
    border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
    padding:16px 18px 14px;
    display:flex;
    flex-direction:column;
    gap:6px;
    transition:background .15s ease;
  }
  .card:last-child{ border-bottom:none; }
  .card:hover{
    background:var(--card-hover);
  }
  /* Phrase block: play button floats over it at the phrase's own height */
  .phrase-block{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:6px;
    padding:18px 4px 16px;
    min-height:118px;   /* keeps the tap area consistent across short and long phrases */
  }
  .hanzi{
    font-size:2.15rem;
    font-weight:700;
    letter-spacing:0.01em;
    color:var(--text);
    line-height:1.3;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:balance;   /* spreads long sentences evenly over 2-3 lines */
  }
  .pinyin{
    color:var(--text);
    font-size:1.2rem;
    opacity:0.82;
    line-height:1.45;
    max-width:100%;
    overflow-wrap:break-word;
    text-wrap:balance;
  }
  /* Longer sentences step down in size so they stay within about three lines */
  .hanzi.len-long{  font-size:1.6rem;  line-height:1.35; }
  .hanzi.len-xlong{ font-size:1.35rem; line-height:1.4; }
  .pinyin.len-long{  font-size:1.02rem; }
  .pinyin.len-xlong{ font-size:0.92rem; }
  .meaning{
    font-size:0.88rem;
    color:var(--text);
  }
  .meaning .label{
    color:var(--muted);
    font-size:0.72rem;
    margin-right:5px;
  }
  .tag-row{
    display:flex;
    align-items:center;
    gap:6px;
    flex-wrap:wrap;
    margin-bottom:4px;
  }
  .cat-tag{
    display:inline-block;
    font-size:0.7rem;
    color:var(--accent);
    background:rgba(29,155,240,0.12);
    border-radius:9999px;
    padding:3px 10px;
    width:fit-content;
  }
  .hd-tag{
    display:inline-block;
    font-size:0.62rem;
    font-weight:800;
    letter-spacing:0.06em;
    color:#0f9d58;
    background:rgba(15,157,88,0.14);
    border-radius:4px;
    padding:2px 6px;
    width:fit-content;
  }
  .lang-tag{
    display:inline-block;
    font-size:0.68rem;
    font-weight:700;
    letter-spacing:0.03em;
    color:var(--muted);
    background:rgba(231,233,234,0.07);
    border:1px solid var(--border);
    border-radius:9999px;
    padding:2px 9px;
    width:fit-content;
  }
  /* English phrases run longer per character, so they start smaller */
  .hanzi.lang-en{
    font-size:1.5rem;
    line-height:1.35;
  }
  .hanzi.lang-en.len-long{  font-size:1.22rem; line-height:1.4; }
  .hanzi.lang-en.len-xlong{ font-size:1.06rem; line-height:1.45; }
  button{
    cursor:pointer;
    border:none;
    border-radius:9999px;
    padding:10px 16px;
    font-size:0.9rem;
    font-weight:600;
    background:var(--accent);
    color:#fff;
    transition:background .15s ease, opacity .15s ease;
    min-height:40px;
    touch-action:manipulation;
  }
  button:hover{ background:var(--accent-hover); }
  button.secondary{
    background:transparent;
    color:var(--text);
    border:1px solid var(--border);
  }
  button.secondary:hover{ background:rgba(239,243,244,0.1); }
  button:disabled{opacity:0.45; cursor:not-allowed;}

  /* --- Faint triangle play button, overlaid at the phrase's height --- */
  .play-btn{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:100%;
    height:100%;
    border-radius:0;
    background:transparent;
    border:none;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0;
    min-height:0;
    transition:opacity .2s ease;
  }
  .play-btn:hover{ background:transparent; }
  .play-btn svg{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    width:56px;
    height:56px;
    display:block;
    transition:opacity .2s ease;
    pointer-events:none;
  }
  .play-btn .icon-play{ opacity:0.28; }
  .play-btn:hover .icon-play{ opacity:0.55; }
  .play-btn:active .icon-play{ opacity:0.7; }
  .play-btn .play-tri,
  .play-btn .pause-bar{ fill:var(--text); }

  /* While playing, the button is completely invisible - even on hover.
     The area still responds to clicks so the phrase can be stopped. */
  .card.playing .play-btn .icon-play,
  .card.playing .play-btn:hover .icon-play,
  .card.playing .play-btn:active .icon-play{ opacity:0; }

  /* Pause icon: invisible until a click flashes it for a moment */
  .play-btn .icon-pause{ opacity:0; }
  .play-btn.flash-pause .icon-pause{
    animation:pauseFlash .55s ease-out;
  }
  @keyframes pauseFlash{
    0%   { opacity:0;    transform:translate(-50%,-50%) scale(0.9); }
    22%  { opacity:0.75; transform:translate(-50%,-50%) scale(1); }
    60%  { opacity:0.75; transform:translate(-50%,-50%) scale(1); }
    100% { opacity:0;    transform:translate(-50%,-50%) scale(1.06); }
  }
  @media (prefers-reduced-motion: reduce){
    .play-btn.flash-pause .icon-pause{ animation-duration:.01s; }
  }

  .card.playing{
    background:rgba(29,155,240,0.06);
  }
  .empty{
    color:var(--muted);
    padding:30px;
    text-align:center;
    line-height:1.6;
  }
  /* Scrolling this into view loads the next page of cards */
  .sentinel{
    height:1px;
    display:none;
  }

  /* --- favourites / history / feedback --- */
  .card-footer{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:10px;
    padding-top:10px;
    border-top:1px solid var(--border);
  }
  .fav-btn{
    background:transparent;
    border:none;
    color:var(--muted);
    font-size:1.15rem;
    line-height:1;
    padding:4px 6px;
    min-height:0;
    border-radius:8px;
    transition:color .15s ease, background .15s ease;
  }
  .fav-btn:hover{ background:rgba(231,233,234,0.08); color:var(--text); }
  .fav-btn.on{ color:#f5b301; }
  .play-count{
    font-size:0.72rem;
    color:var(--muted);
  }
  .play-count[hidden]{ display:none; }
  .report-link{
    margin-left:auto;
    font-size:0.72rem;
    color:var(--muted);
    text-decoration:none;
  }
  .report-link:hover{ color:var(--accent); text-decoration:underline; }

  /* Share and copy-link, sat next to the favourite star */
  .share-btn, .copy-btn{
    background:transparent;
    border:none;
    color:var(--muted);
    padding:5px 6px;
    min-height:0;
    line-height:0;
    border-radius:8px;
    transition:color .15s ease, background .15s ease;
  }
  .share-btn:hover, .copy-btn:hover{
    background:rgba(231,233,234,0.08);
    color:var(--text);
  }
  .copy-btn.copied{ color:var(--accent); }
  .copy-btn.copied::after{
    content:"✓";
    font-size:0.7rem;
    margin-left:3px;
    vertical-align:middle;
  }

  /* ---------- subcategory pages ---------- */
  /* Table of contents on a category page. Every entry is a real page, so
     these links are also how a crawler reaches the 257 subcategories. */
  /* The subcategory index reads as a run of links rather than a wall of
     cards: ten boxes cost four rows of screen and still gave no hint that
     they were tappable, where blue text says "link" in any language. The
     vertical padding is there to keep each one a thumb-sized target. */
  .topic-index{ margin:0 0 18px; }
  .topic-index ul{
    list-style:none;
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    align-items:baseline;
  }
  .topic-index li{ display:flex; align-items:baseline; }
  .topic-index li + li::before{
    content:"·";
    color:var(--border);
    padding:0 9px;
  }
  .topic-index a{
    display:inline-flex;
    align-items:baseline;
    gap:5px;
    padding:7px 0;
    color:var(--accent);
    text-decoration:none;
    font-size:0.95rem;
    line-height:1.45;
  }
  .topic-index a:hover{ text-decoration:underline; }
  .topic-n{
    font-size:0.72rem;
    color:var(--muted);
  }

  .crumb{
    font-size:0.78rem;
    color:var(--muted);
    margin-bottom:8px;
  }
  .crumb a{ color:var(--muted); text-decoration:none; }
  .crumb a:hover{ color:var(--accent); text-decoration:underline; }

  .topic-intro{
    margin:0 0 16px;
    color:var(--muted);
    font-size:0.86rem;
    line-height:1.7;
  }

  /* Previous / up / next, at the foot of a subcategory page. This is the
     link that turns one page view into a session. */
  .seq{
    display:flex;
    align-items:stretch;
    gap:8px;
    margin:24px 0 8px;
  }
  .seq-link{
    display:flex;
    align-items:center;
    gap:8px;
    flex:1;
    padding:12px 14px;
    border:1px solid var(--border);
    border-radius:12px;
    background:var(--card);
    color:var(--text);
    text-decoration:none;
    font-size:0.86rem;
    font-weight:600;
    transition:background .15s ease, border-color .15s ease;
  }
  .seq-link:hover{ background:var(--card-hover); border-color:var(--accent); }
  .seq-link.next{ justify-content:flex-end; text-align:right; }
  .seq-link.up{
    flex:0 0 auto;
    color:var(--muted);
    font-weight:500;
  }
  .seq-dir{ color:var(--muted); font-size:1rem; }
  @media (max-width:480px){
    .seq{ flex-wrap:wrap; }
    .seq-link.up{ order:3; flex:1 0 100%; justify-content:center; }
  }

  /* "Continue where you left off" bar */
  .resume-bar{
    width:100%;
    text-align:left;
    background:rgba(29,155,240,0.10);
    border:1px solid rgba(29,155,240,0.35);
    color:var(--text);
    border-radius:14px;
    padding:12px 16px;
    margin-bottom:12px;
    font-size:0.88rem;
    font-weight:600;
  }
  .resume-bar:hover{ background:rgba(29,155,240,0.18); }
  .resume-bar[hidden]{ display:none; }

  /* brief highlight after jumping to a heading */
  .sub-head.just-resumed{
    animation:resumeGlow 1.2s ease-out;
  }
  /* brief highlight after jumping back to a phrase */
  .card.just-resumed{
    animation:resumeGlow 1.8s ease-out;
  }
  @keyframes resumeGlow{
    0%   { background:rgba(29,155,240,0.28); }
    100% { background:transparent; }
  }
  @media (prefers-reduced-motion: reduce){
    .card.just-resumed{ animation:none; background:rgba(29,155,240,0.12); }
  }
  .voice-tip{
    color:var(--muted);
    font-size:0.75rem;
    line-height:1.55;
    margin:-4px 0 12px;
    padding:0 4px;
  }
  .voice-warning{
    background:rgba(255,212,0,0.08);
    border:1px solid rgba(255,212,0,0.3);
    color:#f0c987;
    padding:10px 14px;
    border-radius:12px;
    font-size:0.85rem;
    margin-bottom:12px;
    display:none;
  }
  @media (max-width:480px){
    .controls{ padding:10px 12px; }
    .controls label{ width:100%; }
    select, input[type="text"], input[type="password"]{ width:100%; }
  }

  /* --- Ad placeholder styling (mockup only, no real ads served) --- */
  .ad-banner{
    display:flex;
    align-items:center;
    justify-content:center;
    background:rgba(231,233,234,0.03);
    border:1px dashed var(--border);
    border-radius:12px;
    color:var(--muted);
    font-size:0.75rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    height:90px;
    margin-bottom:12px;
  }
  /* In-feed ad sits as its own row in the timeline */
  .ad-infeed{
    margin:0;
    border:none;
    border-bottom:1px solid var(--border);
    border-radius:0;
    background:rgba(231,233,234,0.02);
  }
  /* Ad slot directly beneath the play button */
  .ad-under-play{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:rgba(231,233,234,0.03);
    border:1px dashed var(--border);
    border-radius:10px;
    padding:9px 12px;
    margin-top:2px;
    font-size:0.75rem;
    color:var(--muted);
    text-decoration:none;
    transition:background .15s ease, border-color .15s ease;
  }
  .ad-under-play:hover{
    background:rgba(231,233,234,0.06);
    border-color:#3d4145;
  }
  .ad-under-play .ad-label{
    font-size:0.6rem;
    text-transform:uppercase;
    letter-spacing:0.06em;
    background:rgba(231,233,234,0.08);
    color:var(--muted);
    border-radius:4px;
    padding:2px 5px;
    flex-shrink:0;
  }
  .ad-under-play .ad-chip-text{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

/* ---------------- menu screens ---------------- */
.menu{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
}
@media (min-width:560px){
  .menu{ grid-template-columns:1fr 1fr; }
}
.menu-tile{
  display:flex;
  flex-direction:column;
  gap:4px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:18px 20px;
  text-decoration:none;
  color:var(--text);
  transition:background .15s ease, border-color .15s ease;
}
.menu-tile:hover{ background:var(--card-hover); border-color:#3d4145; }
.menu-title{ font-size:1.15rem; font-weight:700; }
.lang-tile .menu-title{ font-size:1.6rem; }
.menu-sub{ font-size:0.8rem; color:var(--muted); }

.lead{
  color:var(--muted);
  font-size:0.9rem;
  margin:0 0 14px;
}

/* breadcrumb */
.crumbs{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  font-size:0.82rem;
  color:var(--muted);
  margin-bottom:10px;
}
.crumbs a{ color:var(--muted); text-decoration:none; }
.crumbs a:hover{ color:var(--accent); text-decoration:underline; }
.crumbs .sep{ opacity:0.5; }
.crumbs strong{ color:var(--text); font-weight:600; }

/* the brand is a link on every page */
.brand-link{ text-decoration:none; color:inherit; }

/* ---------------- sidebar navigation ---------------- */
/* Styled as rounded rows in the same dark card language as the phrase list,
   rather than a bare list of blue links. */
.nav{ margin-bottom:14px; }
.nav-lang{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:10px;
  margin-bottom:10px;
}
.nav-lang-name{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  padding:2px 10px 8px;
}
.nav-lang-name::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
}
.nav-list{
  list-style:none;
  margin:0;
  padding:0;
}
.nav-list li{ margin:2px 0; }
.nav-list a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--text);
  text-decoration:none;
  font-size:0.95rem;
  font-weight:500;
  transition:background .15s ease, color .15s ease;
}
.nav-list a::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--muted);
  flex-shrink:0;
  transition:background .15s ease, transform .15s ease;
}
.nav-list a:hover{
  background:rgba(231,233,234,0.06);
}
.nav-list a:hover::before{ background:var(--accent); }
.nav-list a.current{
  background:rgba(29,155,240,0.14);
  color:var(--text);
  font-weight:700;
}
.nav-list a.current::before{
  background:var(--accent);
  transform:scale(1.3);
}
.nav-count{
  margin-left:auto;
  font-size:0.72rem;
  color:var(--muted);
  background:rgba(231,233,234,0.06);
  border-radius:9999px;
  padding:2px 8px;
  flex-shrink:0;
}
.nav-list a.current + .nav-count{
  color:var(--accent);
  background:rgba(29,155,240,0.14);
}

/* Folding groups: 日常会話3000 > 初級1000 > あいさつ100.
   Each level is a <details>, so the tree folds without any script. */
.nav-group > details > summary{
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
  font-size:0.88rem;
  font-weight:700;
  letter-spacing:0.02em;
  cursor:pointer;
  list-style:none;
  user-select:none;
  transition:background .15s ease, color .15s ease;
}
.nav-group > details > summary::-webkit-details-marker{ display:none; }
.nav-group > details > summary::before{
  content:"";
  width:0;
  height:0;
  border-left:5px solid currentColor;
  border-top:4px solid transparent;
  border-bottom:4px solid transparent;
  flex-shrink:0;
  transition:transform .15s ease;
}
.nav-group > details[open] > summary::before{ transform:rotate(90deg); }
.nav-group > details > summary:hover{
  background:rgba(231,233,234,0.06);
  color:var(--text);
}
/* indent each level, with a hairline so the nesting reads at a glance */
.nav-nested{
  margin:2px 0 6px 18px;
  padding-left:10px;
  border-left:1px solid var(--line, rgba(231,233,234,0.12));
}
.nav-nested a{ font-size:0.92rem; }

/* page + home headings */
.page-head{
  display:flex;
  align-items:baseline;
  gap:10px;
  flex-wrap:wrap;
  margin:0 0 12px;
}
.page-title{
  font-size:1.35rem;
  margin:0;
  font-weight:800;
  letter-spacing:-0.01em;
}
.page-count{
  font-size:0.8rem;
  color:var(--muted);
}
.home-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}
.home-title{
  font-size:1.15rem;
  margin:0;
  font-weight:800;
}
#shuffleBtn{ font-size:0.82rem; padding:8px 14px; min-height:36px; }

.static-list{ color:var(--muted); line-height:1.7; }

/* ---------------- top language bar ---------------- */
.topbar{
  display:flex;
  justify-content:flex-start;
  margin-bottom:12px;
}
.flag-bar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:9999px;
  padding:5px 7px;
}
.flag-btn{
  display:inline-flex;
  align-items:center;
  gap:5px;
  background:transparent;
  border:1px solid transparent;
  border-radius:9999px;
  color:var(--muted);
  padding:5px 10px;
  min-height:0;
  font-size:0.78rem;
  font-weight:600;
  line-height:1;
  transition:background .15s ease, color .15s ease, border-color .15s ease;
}
.flag-btn:hover{ background:rgba(231,233,234,0.08); color:var(--text); }
.flag-btn.on{
  background:rgba(29,155,240,0.15);
  border-color:rgba(29,155,240,0.45);
  color:var(--text);
}
.flag-btn .flag{
  font-size:1.05rem;
  line-height:1;
  /* fall back to a colour emoji font where one exists */
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji",sans-serif;
}
@media (max-width:480px){
  .flag-btn .flag-label{ display:none; }   /* flags only, to fit one row */
  .flag-btn{ padding:6px 9px; }
  .flag-btn .flag{ font-size:1.25rem; }
}

/* the nav sits inside the collapsible menu on phones */
.settings-panel .nav{ margin-bottom:12px; }

/* ---------------- subcategories ---------------- */
/* Heading that separates one subcategory from the next inside a page */
.sub-head{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0;
  padding:14px 18px 10px;
  font-size:0.78rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(231,233,234,0.03);
  border-bottom:1px solid var(--border);
}
.sub-head::after{
  content:"";
  flex:1;
  height:1px;
  background:var(--border);
  order:1;
}
.sub-count{
  order:2;
  font-size:0.7rem;
  font-weight:600;
  letter-spacing:0;
  text-transform:none;
  color:var(--muted);
  background:rgba(231,233,234,0.06);
  border-radius:9999px;
  padding:2px 8px;
}
.grid > .sub-head:first-child{ border-top:none; }

/* Jump links for those subcategories, nested under the current section */
.nav-sub{
  list-style:none;
  margin:2px 0 6px;
  padding:0 0 0 16px;
  border-left:1px solid var(--border);
}
.nav-sub li{ margin:0; }
.nav-sub a{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:8px;
  color:var(--muted);
  text-decoration:none;
  font-size:0.85rem;
  font-weight:400;
}
.nav-sub a::before{ content:none; }
.nav-sub a:hover{ background:rgba(231,233,234,0.06); color:var(--text); }
.nav-sub a.dim{ opacity:0.4; }

/* ---- site footer (every page) and the three standing documents ---- */

.site-footer{
  margin:48px 0 0;
  padding:20px 0 8px;
  border-top:1px solid var(--border);
  color:var(--muted);
  font-size:0.86rem;
}
.footer-links{
  display:flex; flex-wrap:wrap; gap:18px;
}
.footer-links a{ color:var(--accent); text-decoration:none; }
.footer-links a:hover{ text-decoration:underline; }

.doc{ max-width:44rem; }
.doc-title{ margin-bottom:18px; }
.doc-body{ line-height:1.75; color:var(--text); }
.doc-body h2{
  margin:32px 0 10px; font-size:1.05rem; font-weight:700; color:var(--text);
}
.doc-body h2:first-child{ margin-top:8px; }
.doc-body p{ margin:0 0 14px; }
.doc-body ul{ margin:0 0 16px; padding-left:20px; }
.doc-body li{ margin:0 0 7px; }

@media (max-width:999px){
  /* the bottom bar already reserves space; keep the footer clear of it */
  .site-footer{ margin-top:36px; }
}