/* ============================ WORD BANK PAGE (/wordbank) ============================ */
    body.wordbank-mode > .aurora,
    body.wordbank-mode > .wrap,
    body.wordbank-mode > section:not(#wordbank-page){ display:none !important; }
    body.wordbank-mode{ position:relative; }
    body.wordbank-mode::before{
      content:""; position:fixed; inset:0; z-index:0; pointer-events:none;
      background:
        radial-gradient(640px 520px at 85% 18%, rgba(124, 92, 255, .18), transparent 60%),
        radial-gradient(560px 460px at 12% 78%, rgba(198,242, 78, .12), transparent 60%);
      animation:nebulaDrift 30s ease-in-out infinite alternate;
    }
    body.wordbank-mode > header   { position:relative; z-index:50; }
    body.wordbank-mode > footer,
    body.wordbank-mode > .admin-fab,
    body.wordbank-mode > #wordbank-page{ position:relative; z-index:1; }
    .wordbank-page{ max-width:1120px; margin:0 auto; padding:42px 24px 90px; }
    .wordbank-head{ margin-bottom:30px; text-align:center; }
    .wordbank-head .eyebrow{
      font-size:11.5px; font-weight:800; letter-spacing:3px; opacity:.8;
      color:#c6f24e; text-transform:uppercase;
    }
    .wordbank-head h2{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:clamp(32px, 5vw, 46px); letter-spacing:-1.5px;
      margin:6px 0 10px;
      background:linear-gradient(120deg, #fff 0%, #7c5cff 50%, #c6f24e 100%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    :root[data-theme="light"] .wordbank-head h2{
      background:linear-gradient(120deg, #14080d 0%, #6235e0 100%);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .wordbank-head p{ color:var(--muted); font-size:15.5px; max-width:560px; margin:0 auto 22px; }
    .wordbank-actions{
      display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:8px;
    }
    .wordbank-actions button{
      background:rgba(255,255,255,.04); border:1px solid var(--glass-line); color:var(--text);
      padding:9px 16px; border-radius:10px; font-weight:700; font-size:13px;
      cursor:pointer; transition:all .2s;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      backdrop-filter:blur(8px);
    }
    .wordbank-actions button:hover{ border-color:rgba(198,242,78,.5); color:var(--lime); }
    .wordbank-actions button.primary{
      background:linear-gradient(135deg, var(--lime), #7eea3a);
      color:var(--on-lime); border-color:var(--lime);
      box-shadow:0 6px 22px -6px rgba(198,242,78,.5);
    }
    /* Equal-width tiles on a grid, not a centred flex-wrap — see the note on
       .sh-hero-stats in 25-shadowing.css. Content-sized flex items made each
       tile a different width and centred each wrapped row on its own, so the
       stats read as ragged on phones. */
    .wordbank-stats{
      display:grid; grid-template-columns:repeat(auto-fit, 152px);
      justify-content:center; gap:14px;
      margin:18px 0 24px;
    }
    .wb-stat{
      background:rgba(20,16,28,.55); border:1px solid var(--glass-line);
      border-radius:12px; padding:10px 18px; min-width:120px;
      backdrop-filter:blur(8px); text-align:center;
    }
    :root[data-theme="light"] .wb-stat{ background:rgba(255,255,255,.7); }
    .wb-stat-num{ font-size:22px; font-weight:800; color:var(--text); }
    .wb-stat-lbl{ font-size:11.5px; color:var(--muted); font-weight:600; letter-spacing:.6px; text-transform:uppercase; }

    .wordbank-grid{
      display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
      gap:18px; margin-top:14px;
    }
    .wb-card{
      background:linear-gradient(180deg, rgba(20,16,28,.85), rgba(20,16,28,.6));
      border:1px solid var(--glass-line); border-radius:18px;
      padding:18px 18px 16px;
      display:flex; flex-direction:column;
      transition:transform .25s, box-shadow .25s, border-color .25s;
      animation:ac-rise .5s cubic-bezier(.2,.8,.2,1) backwards;
      backdrop-filter:blur(10px);
      position:relative;
    }
    :root[data-theme="light"] .wb-card{
      background:#ffffff;
      border-color:rgba(20,8,13,.10);
      box-shadow:0 6px 20px -10px rgba(30,40,80,.12);
    }
    .wb-card:hover{
      transform:translateY(-3px);
      border-color:rgba(124,92,255,.5);
      box-shadow:0 20px 44px -16px rgba(124,92,255,.35);
    }
    :root[data-theme="light"] .wb-card:hover{
      border-color:rgba(109,40,217,.5);
      box-shadow:0 20px 44px -16px rgba(109,40,217,.25);
    }
    :root[data-theme="light"] .wb-def{ color:#0f172a; opacity:1; }
    :root[data-theme="light"] .wb-def-empty{ color:#64748b; }
    :root[data-theme="light"] .wb-context{
      background:#f8fafc; color:#475569;
      border-left-color:rgba(109,40,217,.6);
    }
    :root[data-theme="light"] .wb-source{ color:#64748b; }
    :root[data-theme="light"] .wb-source a{ color:#3f6212; }
    :root[data-theme="light"] .wb-card-actions button{
      border-color:rgba(20,8,13,.14); color:#475569;
    }
    :root[data-theme="light"] .wb-card-actions button:hover{
      color:#0f172a; border-color:rgba(101,163,13,.5);
    }
    :root[data-theme="light"] .wb-stat{
      background:#ffffff; border-color:rgba(20,8,13,.10);
      box-shadow:0 4px 12px -6px rgba(30,40,80,.10);
    }
    :root[data-theme="light"] .wb-stat-lbl{ color:#64748b; }
    :root[data-theme="light"] .wordbank-actions button{
      background:#ffffff; border-color:rgba(20,8,13,.10); color:#0f172a;
    }
    :root[data-theme="light"] .wordbank-actions button:hover{ border-color:rgba(101,163,13,.5); }
    :root[data-theme="light"] .wordbank-actions button.primary{
      background:#65a30d; color:#fff; border-color:#65a30d;
    }
    :root[data-theme="light"] .wordbank-empty{
      background:#ffffff; border-color:rgba(20,8,13,.14); color:#475569;
    }
    .wb-word{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:22px; font-weight:800; letter-spacing:-.3px; line-height:1.2;
      color:var(--text); margin-bottom:6px;
      background:linear-gradient(120deg, #c6f24e, #7c5cff);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .wb-def{
      font-size:14px; line-height:1.55; color:var(--text); opacity:.9;
      margin-bottom:8px;
    }
    .wb-def-empty{
      font-size:13px; color:var(--muted); font-style:italic; margin-bottom:8px;
    }
    .wb-context{
      font-size:13px; line-height:1.5; color:var(--muted);
      padding:8px 10px; background:rgba(255,255,255,.04);
      border-left:2px solid rgba(124,92,255,.6);
      border-radius:0 8px 8px 0;
      margin-bottom:10px;
      max-height:64px; overflow:hidden;
    }
    /* The saved word, glowing inside the context snippet so it's instantly findable. */
    .wb-ctx-mark{
      background:linear-gradient(120deg, rgba(198,242,78,.40), rgba(124,92,255,.30));
      color:var(--text);
      padding:1px 6px; border-radius:6px;
      font-weight:800;
      box-shadow:0 0 0 1px rgba(198,242,78,.30), 0 0 12px rgba(198,242,78,.35);
      animation:wbCtxPulse 2.6s ease-in-out infinite;
    }
    :root[data-theme="light"] .wb-ctx-mark{
      background:linear-gradient(120deg, rgba(101,163,13,.28), rgba(109,40,217,.22));
      color:#0f172a;
      box-shadow:0 0 0 1px rgba(101,163,13,.30), 0 0 10px rgba(101,163,13,.30);
    }
    @keyframes wbCtxPulse{
      0%,100%{ box-shadow:0 0 0 1px rgba(198,242,78,.30), 0 0 12px rgba(198,242,78,.35); }
      50%   { box-shadow:0 0 0 1px rgba(198,242,78,.55), 0 0 20px rgba(198,242,78,.65); }
    }
    :root[data-theme="light"] .wb-ctx-mark{
      animation:wbCtxPulseLight 2.6s ease-in-out infinite;
    }
    @keyframes wbCtxPulseLight{
      0%,100%{ box-shadow:0 0 0 1px rgba(101,163,13,.30), 0 0 10px rgba(101,163,13,.30); }
      50%   { box-shadow:0 0 0 1px rgba(101,163,13,.55), 0 0 16px rgba(101,163,13,.55); }
    }

    /* Define-a-word modal — auto-fetches from 3 dictionaries before falling back to manual entry */
    .wb-def-overlay{
      position:fixed; inset:0; z-index:95;
      background:rgba(8,4,16,.72); backdrop-filter:blur(10px);
      display:none; align-items:flex-start; justify-content:center; padding:24px;
      /* `overflow-y:auto` ALONE does not undo the centred-and-clipped trap, which
         is what this used to pair with `align-items:center`. A flex child taller
         than its container centres by overflowing BOTH ends, and the half above
         the top edge sits before scrollTop:0 — unreachable, because scrolling
         cannot go negative. Measured at 844x390 (landscape phone): the modal is
         400px tall and its first 5px had no way to be reached.
         flex-start + `margin-block:auto` on the child is the pair that works —
         auto margins still centre it whenever it fits, and collapse to 0 when it
         does not. Same fix as `.overlay` in core/42-responsive-system.css. */
      overflow-y:auto;
    }
    .wb-def-overlay.open{ display:flex; animation:popIn .25s cubic-bezier(.2,.9,.3,1.2); }
    .wb-def-modal{
      margin-block:auto;
      width:min(560px, 100%);
      background:linear-gradient(180deg, rgba(28,22,42,.97), rgba(20,16,30,.96));
      border:1px solid var(--glass-line); border-radius:18px;
      padding:24px 24px 20px;
      box-shadow:0 30px 60px -20px rgba(0,0,0,.65);
      animation:popIn .3s cubic-bezier(.2,.9,.3,1.1);
    }
    :root[data-theme="light"] .wb-def-modal{
      background:#ffffff;
      border:1px solid rgba(20,8,13,.10);
      box-shadow:0 30px 60px -20px rgba(30,40,80,.35);
    }
    .wb-def-modal .wd-eyebrow{
      font-size:11px; font-weight:800; letter-spacing:1.6px;
      color:var(--lime); text-transform:uppercase; opacity:.9;
    }
    .wb-def-modal .wd-word{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      font-size:28px; font-weight:800; letter-spacing:-.5px; line-height:1.15;
      margin:6px 0 16px;
      background:linear-gradient(120deg, #c6f24e, #7c5cff);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .wb-def-modal .wd-actions-top{
      display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px;
    }
    .wb-def-modal .wd-fetch{
      background:linear-gradient(135deg, #7c5cff, #10b9e5);
      color:#fff; border:none; cursor:pointer;
      padding:9px 16px; border-radius:10px; font-weight:700; font-size:13px;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      display:inline-flex; align-items:center; gap:8px;
      transition:transform .2s, box-shadow .2s, opacity .2s;
      box-shadow:0 6px 18px -6px rgba(124,92,255,.5);
    }
    .wb-def-modal .wd-fetch:hover{ transform:translateY(-1px); box-shadow:0 10px 22px -6px rgba(124,92,255,.6); }
    .wb-def-modal .wd-fetch:disabled{ opacity:.65; cursor:wait; transform:none; }
    .wb-def-modal .wd-fetch .wd-spin{
      width:14px; height:14px; border-radius:50%;
      border:2px solid rgba(255,255,255,.4); border-top-color:#fff;
      animation:wdSpin .8s linear infinite;
      display:none;
    }
    .wb-def-modal .wd-fetch.busy .wd-spin{ display:inline-block; }
    .wb-def-modal .wd-fetch.busy .wd-fetch-ico{ display:none; }
    @keyframes wdSpin{ to{ transform:rotate(360deg); } }
    .wb-def-modal .wd-status{
      font-size:12.5px; color:var(--muted); margin-bottom:10px;
      min-height:18px;
    }
    .wb-def-modal .wd-status.ok    { color:#84cc16; }
    .wb-def-modal .wd-status.fail  { color:#fb7185; }
    :root[data-theme="light"] .wb-def-modal .wd-status.ok  { color:#3f6212; }
    :root[data-theme="light"] .wb-def-modal .wd-status.fail{ color:#dc2626; }
    .wb-def-modal label{
      display:block; font-size:11.5px; font-weight:800; letter-spacing:1px;
      color:var(--muted); text-transform:uppercase; margin-bottom:6px;
    }
    .wb-def-modal textarea{
      width:100%; min-height:120px; resize:vertical;
      background:rgba(255,255,255,.04); color:var(--text);
      border:1px solid var(--glass-line); border-radius:10px;
      padding:12px 14px; font-size:14.5px; line-height:1.55;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
      transition:border-color .2s;
    }
    .wb-def-modal textarea:focus{ outline:none; border-color:rgba(198,242,78,.5); }
    :root[data-theme="light"] .wb-def-modal textarea{
      background:#f8fafc; color:#0f172a; border-color:rgba(20,8,13,.12);
    }
    :root[data-theme="light"] .wb-def-modal textarea:focus{ border-color:rgba(101,163,13,.6); background:#fff; }
    .wb-def-modal .wd-controls{
      display:flex; gap:10px; justify-content:flex-end; margin-top:16px; flex-wrap:wrap;
    }
    .wb-def-modal .wd-controls button{
      background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:var(--text);
      padding:9px 18px; border-radius:10px; font-weight:700; font-size:13px;
      cursor:pointer; transition:all .2s;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
    }
    .wb-def-modal .wd-controls button:hover{ border-color:rgba(198,242,78,.5); }
    .wb-def-modal .wd-controls .wd-save{
      background:linear-gradient(135deg, var(--lime), #7eea3a);
      color:var(--on-lime); border-color:var(--lime);
      box-shadow:0 6px 18px -6px rgba(198,242,78,.5);
    }
    :root[data-theme="light"] .wb-def-modal .wd-controls button{
      background:#fff; border-color:rgba(20,8,13,.12); color:#0f172a;
    }
    :root[data-theme="light"] .wb-def-modal .wd-controls .wd-save{
      background:#65a30d; color:#fff; border-color:#65a30d;
    }
    .wb-source{
      font-size:11.5px; color:var(--muted); margin-bottom:10px;
      display:flex; gap:8px; align-items:center; flex-wrap:wrap;
    }
    .wb-source a{
      color:var(--lime); text-decoration:none; font-weight:600;
    }
    .wb-source a:hover{ text-decoration:underline; }
    .wb-card-actions{
      display:flex; gap:6px; flex-wrap:wrap; margin-top:auto;
    }
    .wb-card-actions button{
      background:transparent; border:1px solid var(--glass-line); color:var(--muted);
      padding:6px 10px; border-radius:7px; font-weight:600; font-size:11.5px;
      cursor:pointer; transition:all .2s;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
    }
    .wb-card-actions button:hover{ color:var(--text); border-color:rgba(198,242,78,.5); }
    .wb-card-actions button.danger:hover{ color:#f87171; border-color:#f87171; }
    .wordbank-empty{
      text-align:center; padding:60px 20px; grid-column:1/-1;
      background:rgba(20,16,28,.5); border:1px dashed var(--glass-line); border-radius:18px;
      color:var(--muted); backdrop-filter:blur(8px);
    }
    :root[data-theme="light"] .wordbank-empty{ background:rgba(255,255,255,.6); }

    /* Flashcard study modal */
    .wb-study-overlay{
      position:fixed; inset:0; z-index:90;
      background:rgba(8,4,16,.75); backdrop-filter:blur(8px);
      display:none; align-items:flex-start; justify-content:center; padding:24px;
      /* Centred flex children get clipped symmetrically top AND bottom once the
         stack is taller than the viewport (a real risk on landscape phones).
         `overflow-y:auto` on its own only recovers the BOTTOM half: the top half
         lies before scrollTop:0, and scrolling cannot go negative. Measured at
         844x390 the card stack was 429px tall and its first 19px — which is the
         "x of y" counter — could not be reached at all.
         flex-start + `margin-block:auto` on the child is the working pair: the
         auto margins still centre it whenever it fits. */
      overflow-y:auto;
    }
    .wb-study-overlay.open{ display:flex; }
    .wb-study-overlay > *{ margin-block:auto; }
    .wb-flashcard{
      width:min(520px, 100%); height:340px; perspective:1200px; cursor:pointer;
      animation:popIn .35s cubic-bezier(.2,.9,.3,1.2);
    }
    .wb-flashcard-inner{
      position:relative; width:100%; height:100%;
      transition:transform .65s cubic-bezier(.2,.7,.2,1.05);
      transform-style:preserve-3d;
    }
    .wb-flashcard.flipped .wb-flashcard-inner{ transform:rotateY(180deg); }
    .wb-flashcard-face{
      position:absolute; inset:0;
      backface-visibility:hidden;
      background:linear-gradient(135deg, rgba(28,22,42,.95), rgba(20,16,30,.95));
      border:1px solid var(--glass-line);
      border-radius:22px; padding:40px 30px;
      display:flex; flex-direction:column; justify-content:center;
      box-shadow:0 30px 60px -20px rgba(0,0,0,.6);
      /* The faces are absolutely positioned so the 3D flip works, which means
         they can never grow past the card's fixed height — a long definition
         used to spill out invisibly. Scroll inside the face instead. */
      overflow-y:auto; overscroll-behavior:contain;
    }
    .wb-flashcard-back{ transform:rotateY(180deg); }
    .wb-flashcard-face .wb-fc-word{
      font-family:'Bricolage Grotesque', 'Native Emoji', sans-serif;
      /* 42px overflowed a phone card by ~81px on long words. */
      font-size:clamp(26px, 8vw, 42px); font-weight:800; letter-spacing:-1px;
      overflow-wrap:anywhere;
      text-align:center; line-height:1.1; margin-bottom:14px;
      background:linear-gradient(120deg, #c6f24e, #7c5cff);
      -webkit-background-clip:text; background-clip:text;
      -webkit-text-fill-color:transparent;
    }
    .wb-flashcard-face .wb-fc-tap{
      text-align:center; font-size:12.5px; color:var(--muted);
      letter-spacing:1px; text-transform:uppercase;
    }
    .wb-flashcard-face .wb-fc-def{
      font-size:16.5px; line-height:1.55; color:var(--text);
      margin-bottom:16px; text-align:center;
    }
    .wb-flashcard-face .wb-fc-ctx{
      font-size:13px; line-height:1.5; color:var(--muted);
      padding:10px 12px; background:rgba(255,255,255,.06);
      border-radius:10px; text-align:center; font-style:italic;
    }
    .wb-study-controls{
      display:flex; gap:10px; justify-content:center; margin-top:18px; flex-wrap:wrap;
    }
    .wb-study-controls button{
      background:rgba(255,255,255,.05); border:1px solid var(--glass-line); color:var(--text);
      padding:9px 18px; border-radius:10px; font-weight:700; font-size:13px;
      cursor:pointer; transition:all .2s;
      font-family:'Hanken Grotesk', 'Native Emoji', sans-serif;
    }
    .wb-study-controls button:hover{ border-color:rgba(198,242,78,.5); }
    .wb-study-controls .wb-close{ background:rgba(220,38,38,.15); border-color:rgba(220,38,38,.4); }
    .wb-study-progress{
      text-align:center; color:var(--muted); font-size:12.5px;
      letter-spacing:.6px; margin-top:14px;
    }

    /* ---- phones: reclaim the padding the modals spend on a 375px screen ---- */
    @media (max-width:560px){
      .wb-study-overlay, .wb-def-overlay{ padding:14px; }
      .wb-flashcard-face{ padding:26px 18px; }
      .wb-def-modal{ padding:20px 18px 16px; }
      /* 6px block padding + 11.5px text = a 28px tall tap target on the two
         controls a learner uses most on this page (Define / Remove, one pair
         per saved word). Pad them out to ~40px; the row still fits one line. */
      .wb-card-actions button{ padding:12px 13px; }
    }