/* ===== styles/00-base.css ===== */
:root{
    --ink:#20345F; --ink-soft:#4C5F82; --ink-2:#182A50;
    --paper:#FAF9F6; --paper-raised:#FFFFFF; --line:#DED8CC;
    --app-bg-color:#FAF9F6;
    --app-bg:
      radial-gradient(circle at 12% 9%, rgba(219,229,255,.28) 0%, rgba(219,229,255,0) 34%),
      radial-gradient(circle at 88% 78%, rgba(255,226,216,.20) 0%, rgba(255,226,216,0) 35%),
      linear-gradient(180deg, #FCFBF8 0%, #F8F7F3 55%, #FBFAF7 100%);
    --stamp:#B85F4B; --stamp-soft:#F3DFD8;
    --sage:#5C7A5B; --sage-soft:#DFE7DB;
    --gold:#B98B25; --gold-soft:#F1E4C4;
    --text:#24304A; --text-muted:#706D66;
    --radius:16px;
    --shadow: 0 10px 35px rgba(15,23,42,0.06);
  }
  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0; padding:0; height:100%; background:#E9E4D8;}
  body{
    font-family:'Inter',sans-serif; color:var(--text);
    display:flex; justify-content:center;
    min-height:100vh;
  }
  #phone{
    width:100%; max-width:430px; min-height:100vh;
    background-color:var(--app-bg-color);
    background-image:var(--app-bg);
    background-repeat:no-repeat;
    background-size:100% 100%;
    position:relative; overflow-x:hidden;
    box-shadow: var(--shadow);
    display:flex; flex-direction:column;
  }
  @media(min-width:460px){
    body{ padding:32px 12px; align-items:flex-start; }
    #phone{ min-height:calc(100vh - 64px); border-radius:28px; margin:0 auto; }
  }
  main,.screen-enter{background:transparent;}
  h1,h2,h3,.display{font-family:'Fraunces',serif;}
  .mono{font-family:'IBM Plex Mono',monospace;}
  a{color:inherit;}
  ::-webkit-scrollbar{display:none;}

/* ===== styles/10-topbar.css ===== */
  /* ---------- top bar ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px 10px;
  }
  .topbar .brand{display:flex; align-items:center; gap:8px;}
  .brand-mark{
    width:26px; height:26px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .brand-mark svg{width:100%; height:100%;}
  .brand-name{font-family:'Fraunces',serif; font-weight:600; font-size:15px; color:var(--ink); white-space:nowrap;}
  .topbar .role-chip, .topbar .role-toggle-chip{
    font-size:11px; text-transform:uppercase; letter-spacing:.06em; line-height:1;
    color:var(--ink-soft); background:var(--paper-raised); border:1px solid var(--line);
    padding:5px 10px; border-radius:999px; cursor:pointer;
    display:inline-flex; align-items:center; gap:3px;
  }
  .topbar .role-chip .chip-ic, .topbar .role-toggle-chip .chip-ic{width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.72;}

  main{flex:1; padding:18px 20px 140px; overflow-y:auto;}
  .screen-enter{animation:screenFadeIn .28s ease both;}
  @keyframes screenFadeIn{from{opacity:0;} to{opacity:1;}}
  @keyframes fadeUp{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);}}

/* ===== styles/20-welcome-forms.css ===== */
  /* ---------- welcome ---------- */
  .welcome-hero{padding:36px 4px 12px;}
  .welcome-hero .eyebrow{
    font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.12em;
    color:var(--stamp); text-transform:uppercase; margin-bottom:10px;
  }
  .welcome-hero h1{font-size:34px; line-height:1.08; margin:0 0 12px; color:var(--ink); font-weight:600;}
  .welcome-hero p{font-size:14.5px; color:var(--text-muted); line-height:1.55; margin:0 0 28px;}
  .role-cards{display:flex; flex-direction:column; gap:12px;}
  .role-card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
    padding:18px 18px; display:flex; align-items:center; gap:14px; cursor:pointer;
    box-shadow:var(--shadow); transition:transform .15s ease;
  }
  .role-card:active{transform:scale(0.98);}
  .role-card .icon{
    width:44px; height:44px; border-radius:12px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; font-size:19px;
  }
  .role-card.teacher .icon{background:var(--ink); color:var(--paper);}
  .role-card.student .icon{background:var(--stamp); color:#fff;}
  .role-card h3{margin:0 0 3px; font-size:16px; color:var(--ink);}
  .role-card p{margin:0; font-size:12.5px; color:var(--text-muted);}
  .role-card .arrow{margin-left:auto; color:var(--text-muted); font-size:18px;}

  .auth-restore-note{
    display:flex; align-items:flex-start; gap:9px; margin-top:11px; padding:10px 12px;
    border:1px solid var(--line); border-radius:12px; background:var(--paper-raised);
    color:var(--text-muted); font-size:12.5px; line-height:1.45;
  }
  .auth-spinner{
    width:14px; height:14px; margin-top:2px; flex:0 0 14px; border-radius:50%;
    border:2px solid var(--line); border-top-color:var(--ink); animation:authSpin .8s linear infinite;
  }
  @keyframes authSpin{to{transform:rotate(360deg);}}

  /* ---------- forms ---------- */
  .field{margin-bottom:14px;}
  .field label{display:block; font-size:12px; color:var(--text-muted); margin-bottom:6px; font-weight:500;}
  .field input, .field textarea, .field select{
    width:100%; padding:12px 14px; border-radius:11px; border:1px solid var(--line);
    background:var(--paper-raised); font-family:'Inter',sans-serif; font-size:14.5px; color:var(--text);
  }
  .field textarea{min-height:110px; resize:vertical; line-height:1.5;}
  .field input:focus, .field textarea:focus, .field select:focus{outline:2px solid var(--ink); outline-offset:1px;}
  .btn{
    display:inline-flex; align-items:center; justify-content:center; gap:6px;
    padding:13px 18px; border-radius:11px; border:none; font-family:'Inter',sans-serif;
    font-weight:600; font-size:14.5px; cursor:pointer; width:100%;
  }
  .btn-primary{background:var(--ink); color:var(--paper);}
  .btn-primary:active{background:var(--ink-2);}
  .btn-stamp{background:var(--stamp); color:#fff;}
  .btn-ghost{background:transparent; color:var(--ink); border:1px solid var(--line);}
  .btn-sm{width:auto; padding:8px 14px; font-size:13px; border-radius:9px;}
  .btn:disabled{opacity:.45;}
  .error-note{color:var(--stamp); font-size:12.5px; margin:-6px 0 14px;}
  .back-link{
    display:inline-flex; align-items:center; gap:4px; font-size:13px; color:var(--text-muted);
    background:none; border:none; padding:0; margin-bottom:16px; cursor:pointer; font-family:'Inter',sans-serif;
  }

/* ===== styles/30-lessons.css ===== */
  /* ---------- section heads ---------- */
  .section-head{display:flex; align-items:baseline; justify-content:space-between; margin:22px 0 12px;}
  .section-head h2{font-size:18px; margin:0; color:var(--ink); font-weight:600;}
  .section-head .count{font-size:12px; color:var(--text-muted); font-family:'IBM Plex Mono',monospace;}
  .page-title{font-size:24px; color:var(--ink); font-weight:600; margin:4px 0 16px;}
  .page-sub{font-size:13px; color:var(--text-muted); margin:0 0 16px;}

  /* ---------- lesson list ---------- */
  .lesson-item{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; margin-bottom:10px; cursor:pointer; box-shadow:var(--shadow);
  }
  .lesson-item .topic-tag{
    font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; font-family:'IBM Plex Mono',monospace;
    color:var(--ink-soft); background:#EDEAE0; padding:3px 8px; border-radius:999px; display:inline-block; margin-bottom:8px;
  }
  .lesson-item h3{margin:0 0 4px; font-size:15.5px; color:var(--ink);}
  .lesson-item .meta{font-size:12px; color:var(--text-muted); display:flex; gap:10px; align-items:center;}
  .due-badge{
    background:var(--stamp-soft); color:var(--stamp); font-size:11px; font-weight:600;
    padding:2px 8px; border-radius:999px; font-family:'IBM Plex Mono',monospace;
  }
  .new-badge{
    background:#E6EDFB; color:#2F6FE8; font-size:11px; font-weight:600;
    padding:2px 8px; border-radius:999px; font-family:'IBM Plex Mono',monospace;
  }
  .empty-state{
    text-align:center; padding:50px 14px; color:var(--text-muted);
  }
  .empty-state .stamp-mark{
    width:56px; height:56px; border-radius:50%; border:2px dashed var(--line); margin:0 auto 16px;
    display:flex; align-items:center; justify-content:center; font-size:22px; color:var(--line);
  }
  .empty-state p{font-size:13.5px; line-height:1.6; margin:0 0 18px;}

  /* ---------- lesson-list footer illustration ---------- */
  /* Keep the Lessons tab within the visible viewport. The artwork stays in
     normal flow, so long lesson lists can scroll without the image covering
     a lesson card. */
  .student-lessons-screen{
    height:100dvh;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

  .student-lessons-screen > main{
    flex:1 1 auto;
    min-height:0;
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    overscroll-behavior-y:contain;
    padding-bottom:calc(70px + env(safe-area-inset-bottom));
  }

  .lesson-footer-illustration{
    display:block;
    width:clamp(210px, 43%, 310px);
    height:auto;
    object-fit:contain;
    object-position:right bottom;

    /* Consume unused vertical space, then sit in the lower-right corner
       just above the bottom navigation, matching the reference layout. */
    align-self:flex-end;
    margin-top:auto;
    margin-right:8px;
    margin-bottom:8px;
    margin-left:auto;
    flex:0 0 auto;

    background:transparent;
    box-sizing:border-box;
    pointer-events:none;
    user-select:none;
    -webkit-user-drag:none;
  }

  @media (max-width:420px){
    .student-lessons-screen > main{
      padding-bottom:calc(68px + env(safe-area-inset-bottom));
    }
    .lesson-footer-illustration{
      width:clamp(190px, 50vw, 235px);
      margin-right:6px;
      margin-bottom:6px;
    }
  }

  /* The desktop shell adds 32px body padding above and below. */
  @media (min-width:460px){
    .student-lessons-screen{
      height:calc(100dvh - 64px);
    }
    .lesson-footer-illustration{
      width:clamp(230px, 38%, 320px);
      margin-right:10px;
      margin-bottom:10px;
    }
  }

/* ===== styles/40-navigation.css ===== */
  /* ---------- bottom nav ---------- */
  .bottom-fixed-wrap{
    position:fixed; left:50%; transform:translateX(-50%); bottom:0;
    width:100%; max-width:430px; z-index:40;
  }
  .bottomnav{
    display:flex;
    background:rgba(255,255,255,.90);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
    backdrop-filter:blur(18px) saturate(135%);
    border-top:1px solid rgba(32,52,95,.07);
    box-shadow:0 -10px 30px rgba(32,52,95,.045);
    padding:8px 8px calc(10px + env(safe-area-inset-bottom));
  }
  .navbtn{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:3px;
    background:none; border:none; padding:6px 4px; cursor:pointer; color:var(--text-muted);
    font-family:'Inter',sans-serif; font-size:10.5px; font-weight:500; border-radius:14px;
    transition:background .15s, color .15s;
  }
  .navbtn .ic{width:20px; height:20px; opacity:.62; transition:opacity .15s; object-fit:contain; display:block;}
  .navbtn .ic:not(img){fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
  .navbtn.active{color:var(--ink); background:rgba(47,111,232,0.16); font-weight:700;}
  .navbtn.active .ic{opacity:1;}
  .fab{
    position:absolute; right:18px; bottom:76px;
    width:52px; height:52px; border-radius:50%; background:#2F6FE8; color:#fff;
    border:none; font-size:24px; box-shadow:0 6px 18px rgba(47,111,232,0.4); cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .fab-inline{
    width:64px; height:64px; border-radius:50%; background:#2F6FE8; color:#fff;
    border:none; font-size:30px; box-shadow:0 6px 18px rgba(47,111,232,0.4); cursor:pointer;
    display:flex; align-items:center; justify-content:center; margin:22px auto 0;
  }

/* ===== styles/50-lesson-review.css ===== */
  /* ---------- lesson detail ---------- */
  .content-block{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
    padding:16px 18px; font-size:14px; line-height:1.7; white-space:pre-wrap; color:var(--text);
    margin-bottom:16px;
  }
  .vocab-row{
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 4px; border-bottom:1px solid var(--line); font-size:14px;
  }
  .vocab-row:last-child{border-bottom:none;}
  .vocab-row .w{font-weight:600; color:var(--ink);}
  .vocab-row .ipa{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-muted); margin-left:6px;}

  .browse-vocab-row{justify-content:flex-start; gap:10px; min-width:0;}
  .browse-vocab-row .vocab-row-copy{display:flex; align-items:baseline; gap:2px; min-width:0;}
  .browse-vocab-row .vocab-row-copy .w{overflow-wrap:anywhere;}
  .browse-vocab-row .vocab-row-actions{margin-left:auto; display:flex; align-items:center; gap:4px; flex:0 0 auto;}
  .vocab-icon-btn{
    width:34px; height:34px; padding:0; border:0; border-radius:10px; background:transparent;
    color:var(--ink-soft); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:16px; line-height:1; transition:background .15s ease, color .15s ease, transform .15s ease;
  }
  .vocab-icon-btn:hover{background:var(--paper); color:var(--ink);}
  .vocab-icon-btn:active{transform:scale(.94);}
  .vocab-card-btn svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}

  /* ---------- flashcard ---------- */
  .review-progress{display:flex; align-items:center; gap:10px; margin-bottom:22px;}
  .review-bar{flex:1; height:5px; background:var(--line); border-radius:99px; overflow:hidden;}
  .review-bar-fill{height:100%; background:var(--stamp); transition:width .25s ease;}
  .review-count{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--text-muted);}

  .card-stage{perspective:1200px; margin-bottom:22px;}
  .flashcard{
    position:relative; width:100%; min-height:340px; cursor:pointer;
    transform-style:preserve-3d; transition:transform .5s cubic-bezier(.4,.2,.2,1);
  }
  .flashcard.flipped{transform:rotateY(180deg);}
  .face{
    position:absolute; inset:0; backface-visibility:hidden;
    background:var(--paper-raised); border:none; border-radius:28px;
    box-shadow:var(--shadow); padding:28px 24px; display:flex; flex-direction:column;
  }
  .face .hole{
    width:14px; height:14px; border-radius:50%; background:var(--paper);
    border:1px solid var(--line); position:absolute; top:14px; left:14px;
  }
  .face .stamp-corner{
    position:absolute; top:14px; right:16px; font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:.08em; color:var(--text-muted); text-transform:uppercase;
  }
  .face-front{align-items:center; justify-content:flex-start; text-align:center; overflow-y:auto;}
  .face-front .word{font-family:'Fraunces',serif; font-size:40px; color:var(--ink); font-weight:700; letter-spacing:-0.02em; margin-bottom:12px; line-height:1.15;}
  .face-front .ipa{font-family:'IBM Plex Mono',monospace; color:var(--text-muted); margin-top:8px; font-size:14px;}
  .speak-inline{
    background:none; border:none; color:var(--ink-soft); font-size:14px; cursor:pointer; padding:2px 6px; flex-shrink:0;
  }
  .face-front .tap-hint{margin-top:16px; text-align:center; font-size:11px; color:var(--text-muted);}

  .cloze-sentence{font-size:17px; line-height:1.5; color:var(--ink); text-align:center; font-weight:500;}
  .cloze-sentence .blank{color:var(--stamp); font-weight:700; letter-spacing:.02em;}
  .cloze-sentence .fill{color:var(--stamp); font-weight:700;}
  .collapsible{
    border:1px solid var(--line); border-radius:18px; margin-top:18px; width:100%; overflow:hidden; background:var(--paper-raised);
  }
  .collapsible-head{
    padding:10px 14px; font-size:12.5px; font-weight:600; color:var(--ink-soft); cursor:pointer;
    text-align:center; user-select:none;
  }
  .collapsible-body{
    padding:12px 14px; border-top:1px solid var(--line); font-size:13.5px; color:var(--text); line-height:1.5;
  }
  .collapsible-body ol{margin:0; padding-left:18px;}
  .collapsible-body li{margin-bottom:8px;}
  .info-box{margin-top:26px; width:100%;}
  .info-box + .info-box{border-top:1px solid var(--line); padding-top:22px;}
  .info-box-head{
    font-size:16px; font-weight:700; color:var(--ink); text-align:left;
    display:flex; align-items:center; gap:8px;
  }
  .info-box-body{
    padding:0; margin-top:10px; font-size:15px; color:var(--text); line-height:1.75;
  }
  .info-box-body .vi{color:var(--ink-soft); margin-top:4px;}
  .info-box-body ol{margin:0; padding-left:20px;}
  .info-box-body li{margin-bottom:12px; line-height:1.7;}
  .guess-input{
    width:100%; margin-top:14px; padding:12px 14px; border-radius:16px; border:1px solid var(--line);
    background:var(--paper-raised); font-family:'Inter',sans-serif; font-size:14.5px; color:var(--text); text-align:center;
  }
  .guess-input:focus{outline:2px solid var(--ink); outline-offset:1px;}
  .answer-check{
    border-radius:12px; padding:12px 16px; margin-top:6px; text-align:center; border:1px solid;
  }
  .answer-check.ok{ background:var(--sage-soft); border-color:var(--sage); }
  .answer-check.no{ background:var(--stamp-soft); border-color:var(--stamp); }
  .answer-check-line{ font-size:17px; display:flex; align-items:center; justify-content:center; gap:8px; }
  .answer-check-line .mono{ font-family:'IBM Plex Mono',monospace; letter-spacing:.02em; font-size:15px; }
  .speak-dot-row{display:flex; gap:18px; justify-content:center; margin:12px 0 30px;}
  .speak-dot{
    width:52px; height:52px; padding:0; border:none; border-radius:50%; background:transparent; cursor:pointer;
    display:flex; align-items:center; justify-content:center; transition:transform .2s, filter .2s;
  }
  .speak-dot .speaker-icon-svg{width:40px; height:40px; display:block; pointer-events:none;}
  .speak-dot:hover{transform:translateY(-2px); filter:drop-shadow(0 7px 10px rgba(32,52,95,.14));}
  .speak-dot:active{transform:scale(.94);}
  .back-word-box{
    text-align:center; margin-top:2px;
  }
  .back-word-box .ipa{font-family:'IBM Plex Mono',monospace; color:var(--text-muted); font-size:13px; margin-top:2px;}
  .answer-card{
    position:relative; background:var(--paper-raised); border:1px solid var(--line); border-radius:26px;
    box-shadow:var(--shadow); padding:26px 22px 22px; margin-bottom:22px; animation:fadeUp .25s ease both;
  }
  .answer-card .hole{
    width:14px; height:14px; border-radius:50%; background:var(--paper);
    border:1px solid var(--line); position:absolute; top:14px; left:14px;
  }

  .rate-fixed-wrap{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:calc(100vw - 16px);
    max-width:414px;
    z-index:120;
    background:rgba(255,255,255,.94);
    -webkit-backdrop-filter:blur(18px) saturate(135%);
    backdrop-filter:blur(18px) saturate(135%);
    border:1px solid rgba(32,52,95,.07);
    border-radius:18px;
    box-shadow:0 -8px 28px rgba(32,52,95,.08);
    padding:8px 10px;
  }
  /* #phone only grows to 640px on the desktop breakpoint (>=900px).
     Matching that breakpoint prevents the rating bar from becoming wider
     than the app shell on tablets / medium browser windows. */
  @media(min-width:900px){
    .rate-fixed-wrap{
      width:calc(100vw - 24px);
      max-width:616px;
      bottom:12px;
    }
  }
  .rate-row{display:flex; gap:8px; width:100%; min-width:0;}
  .rate-btn{
    flex:1 1 0; min-width:0; border:none; border-radius:14px; padding:11px 4px; font-family:'Inter',sans-serif;
    font-weight:600; font-size:12.5px; line-height:1.15; cursor:pointer; color:#fff;
    white-space:normal; overflow-wrap:anywhere;
  }
  @media(max-width:380px){
    .rate-fixed-wrap{width:calc(100vw - 10px); padding:7px 6px;}
    .rate-row{gap:5px;}
    .rate-btn{font-size:11.5px; padding:10px 2px;}
  }
  .rate-again{background:var(--stamp);}
  .rate-hard{background:var(--gold);}
  .rate-good{background:var(--sage);}
  .rate-easy{background:var(--ink);}

  .review-done{text-align:center; padding:50px 10px;}
  .review-done .badge-big{font-family:'Fraunces',serif; font-size:44px; color:var(--gold);}

/* ===== styles/60-progress-teacher.css ===== */
  /* ---------- progress / gauge ---------- */
  .gauge-wrap{display:flex; flex-direction:column; align-items:center; padding:18px 0 8px;}
  .gauge-label{font-size:12px; color:var(--text-muted); margin-top:8px; text-transform:uppercase; letter-spacing:.06em;}
  .gauge-number{font-family:'Fraunces',serif; font-size:15px; color:var(--ink); margin-top:2px;}
  .stat-grid{display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; margin:22px 0 18px;}
  .stat-card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:14px 10px;
  }
  .stat-card .num{font-family:'Fraunces',serif; font-size:24px; color:var(--ink);}
  .stat-card .lbl{font-size:11.5px; color:var(--text-muted); margin-top:2px;}

  /* ---------- teacher: student list ---------- */
  .student-row{
    display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line);
  }
  .student-row:last-child{border-bottom:none;}
  .avatar{
    width:36px; height:36px; border-radius:50%; background:var(--gold-soft); color:var(--gold);
    display:flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; flex-shrink:0;
  }
  .student-row .em{font-size:13.5px; font-weight:500; word-break:break-all;}
  .student-row .sub{font-size:11.5px; color:var(--text-muted);}
  .student-row .del{margin-left:auto; background:none; border:none; color:var(--text-muted); font-size:18px; cursor:pointer; padding:4px;}
  .add-email-row{display:flex; gap:8px; margin-top:14px;}
  .add-email-row input{flex:1;}

  .chip{
    padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised);
    font-size:13px; cursor:pointer; color:var(--text-muted);
  }
  .chip.selected{background:var(--ink); color:var(--paper); border-color:var(--ink);}

  /* vocab editor rows */
  .vocab-editor-card{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px; padding:14px; margin-bottom:10px; position:relative;
  }
  .vocab-editor-card .rm{
    position:absolute; top:10px; right:10px; background:none; border:none; color:var(--text-muted); font-size:16px; cursor:pointer;
  }
  .two-col{display:grid; grid-template-columns:1fr 1fr; gap:10px;}

  .toast{
    position:absolute; left:16px; right:16px; bottom:96px; background:var(--ink); color:var(--paper);
    padding:12px 16px; border-radius:11px; font-size:13px; text-align:center; box-shadow:var(--shadow);
    animation:fadeUp .2s ease both; z-index:50;
  }
  .hint-banner{
    background:var(--gold-soft); border:1px solid var(--gold); color:#7A5C1A; font-size:12px;
    border-radius:12px; padding:10px 12px; margin-bottom:16px; line-height:1.5;
  }
  .loading-wrap{display:flex; align-items:center; justify-content:center; min-height:60vh; color:var(--text-muted); font-size:13px;}

/* ===== styles/70-responsive-learning-path.css ===== */
  /* ---------- wider layout on laptop/desktop screens ---------- */
  @media(min-width:900px){
    #phone{ max-width:640px; }
    body{ padding:40px 20px; }
    main{ padding-left:32px; padding-right:32px; }
    .flashcard, .answer-card{ padding:28px 32px; }
    .cloze-sentence{ font-size:19px; }
    .word{ font-size:26px; }
    h1{ font-size:30px; }
    .bottom-fixed-wrap{ max-width:640px; }
    .bottomnav{ padding-left:32px; padding-right:32px; }
  }
  /* ===== Lesson detail "learning path" screen — scoped classes (lp- prefix)
     so these never collide with the app's existing global .page-title,
     .btn-primary, etc. used everywhere else. Values match the reference
     design exactly. ===== */
  /* Refined palette for this screen, from the detailed reference */
  .lp-topic-crumb{font-size:13px; color:var(--text-muted);}
  .lp-title{font-size:clamp(24px, 7vw, 36px); font-weight:700; margin:14px 0 4px; color:var(--ink); font-family:'Fraunces',serif; letter-spacing:-0.02em;}
  .lp-subtitle{font-size:16px; color:var(--text-muted); margin:0;}
  .lp-image{width:172px; height:172px; border-radius:999px; object-fit:cover; margin:28px auto; display:block; background:#DFE7DB; box-shadow:0 0 0 1px var(--line), 0 8px 24px rgba(29,42,55,.08);}
  .lp-image-fallback{width:172px; height:172px; border-radius:999px; margin:28px auto; display:flex; align-items:center; justify-content:center; background:#DFE7DB; color:#5C7A5B; font-family:'Fraunces',serif; font-weight:600; font-size:56px; box-shadow:0 0 0 1px var(--line), 0 8px 24px rgba(29,42,55,.08);}
  .lp-action-card{background:transparent; padding:0; margin-top:16px; display:grid; gap:14px;}
  .lp-btn-primary{width:100%; height:56px; border:1px solid var(--ink); border-radius:12px; background:var(--ink); color:#fff; font-size:16px; font-weight:650; cursor:pointer; font-family:'Inter',sans-serif; box-shadow:0 7px 16px rgba(32,52,95,.16); transition:background .15s, box-shadow .15s, transform .15s, border-color .15s;}
  .lp-btn-primary:hover{background:var(--ink-2); border-color:var(--ink-2); box-shadow:0 9px 20px rgba(32,52,95,.2); transform:translateY(-1px);}
  .lp-btn-primary:active{transform:translateY(0) scale(.995);}
  .lp-btn-primary:disabled{opacity:.45; cursor:default; transform:none;}
  .lp-btn-secondary{width:100%; height:52px; border-radius:12px; background:rgba(255,255,255,.4); border:1px solid var(--ink); font-size:15px; font-weight:650; color:var(--ink); display:flex; align-items:center; justify-content:space-between; padding:0 20px; cursor:pointer; font-family:'Inter',sans-serif; transition:background .15s;}
  .lp-btn-secondary:hover{background:rgba(255,255,255,.85);}
  .lp-section-title{margin-top:34px; margin-bottom:16px; font-size:21px; font-weight:700; color:var(--ink); font-family:'Fraunces',serif;}
  .lp-timeline{position:relative; padding-left:34px;}
  .lp-timeline:before{content:""; position:absolute; left:11px; top:8px; bottom:8px; width:1px; background:var(--line);}
  .lp-timeline-item{position:relative; margin-bottom:16px;}
  .lp-timeline-dot{position:absolute; left:-30px; top:24px; width:14px; height:14px; border-radius:50%; background:#F7F4ED; border:2px solid var(--ink);}
  .lp-timeline-dot.current{background:var(--ink); box-shadow:0 0 0 4px #F7F4ED, 0 0 0 5px var(--ink);}
  .lp-timeline-dot.done{background:#22C55E; border-color:#22C55E;}
  .lp-timeline-dot.locked{border-color:var(--line);}
  .lp-part-card{background:#fff; border-radius:20px; border:1px solid #E2DFD6; padding:16px; display:flex; justify-content:space-between; align-items:center; box-shadow:0 12px 30px rgba(28,39,55,.07), 0 2px 6px rgba(28,39,55,.03); cursor:pointer; gap:10px;}
  .lp-part-left{display:flex; gap:14px; align-items:center; min-width:0;}
  .lp-part-icon{width:34px; height:34px; border-radius:8px; flex-shrink:0; display:flex; align-items:center; justify-content:center; font-size:15px; color:#fff;}
  .picker-icon-img{position:relative; flex-shrink:0; overflow:hidden; display:flex; align-items:center; justify-content:center;}
  .picker-icon-img img{width:100%; height:100%; object-fit:cover; display:block;}
  .picker-icon-img .picker-check-badge{
    position:absolute; right:-3px; bottom:-3px; width:16px; height:16px; border-radius:50%;
    background:var(--ink); color:#fff; font-size:9px; font-weight:700; line-height:1;
    display:flex; align-items:center; justify-content:center; border:2px solid var(--paper);
  }
  .lp-part-title{font-size:16px; font-weight:650; color:var(--ink);}
  .lp-part-sub{margin-top:3px; color:var(--text-muted); font-size:13px;}
  .lp-part-status{text-align:right; line-height:1.6; font-size:13px; flex-shrink:0;}
  .lp-new-count{color:var(--ink-soft); font-weight:600;}
  .lp-due-count{color:var(--stamp); font-weight:600;}

/* ===== styles/80-study-feature-cards.css ===== */
  /* ---------- Study/Practice feature cards (Review & Audio tabs) ---------- */
  .feature-card{
    border-radius:22px; padding:24px; margin-bottom:18px; position:relative; overflow:hidden;
  }
  .feature-card.study{background:#E6EDFB;}
  .feature-card.practice{background:var(--stamp-soft);}
  .feature-card h2{margin:0 0 6px; font-family:'Fraunces',serif; font-size:24px; color:var(--ink);}
  .feature-card p{margin:0 0 16px; font-size:13.5px; color:var(--text-muted); line-height:1.5; max-width:78%;}
  .fc-illustration{position:absolute; right:14px; top:10px; width:72px; height:auto; z-index:0;}
  .fc-content{position:relative; z-index:1;}

  /* Compact hero layout for Review & Audio.
     Keeps the current blue/pink card colors and large artwork, but removes
     unnecessary empty space above/below the content. */
  .feature-card-hero{
    display:grid;
    grid-template-columns:minmax(0, 1.12fr) minmax(190px, .88fr);
    align-items:center;
    gap:12px;
    min-height:0;
    padding:14px 28px;
  }
  .feature-card-hero .fc-content{
    min-width:0;
    align-self:center;
  }
  .feature-card-hero h2{
    font-size:27px;
    margin-bottom:7px;
  }
  .feature-card-hero p{
    max-width:100%;
    margin-bottom:16px;
    font-size:13.5px;
    line-height:1.5;
  }
  .fc-artwork{
    position:relative;
    z-index:0;
    width:100%;
    min-width:0;
    min-height:145px;
    display:flex;
    align-items:center;
    justify-content:center;
    pointer-events:none;
    user-select:none;
  }
  .fc-artwork img{
    display:block;
    width:100%;
    max-width:300px;
    max-height:205px;
    object-fit:contain;
    object-position:center;
  }
  .fc-artwork-reviewStudy img,
  .fc-artwork-reviewPractice img,
  .fc-artwork-audioStudy img,
  .fc-artwork-audioPractice img{
    max-width:305px;
  }
  /* The Listen (audioStudy) artwork is drawn with far less internal padding
     than the other feature-card illustrations, so an equal max-width/max-height
     box still renders it visibly larger. Cap its height tighter to match how
     much visual space the others actually occupy. */
  .fc-artwork-audioStudy img{
    max-height:133px;
  }

  .fc-outline-btn{
    display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--stamp);
    border:1.5px solid var(--stamp); border-radius:14px; padding:12px 18px; cursor:pointer;
    font-size:14px; font-weight:700; max-width:280px;
  }
  .fc-outline-btn-full{
    width:100%; max-width:320px; min-height:56px; height:auto; justify-content:center; font-size:15px;
    white-space:normal; overflow:visible; text-overflow:clip; text-align:center; line-height:1.25;
    padding:10px 14px; overflow-wrap:anywhere; text-wrap:balance;
  }
  .fc-nothing-due{font-size:13px; color:var(--text-muted); margin:0;}
  .fc-review-btn{
    width:100%; max-width:320px; min-height:56px; height:auto; border:1px solid var(--ink); border-radius:12px;
    background:var(--ink); color:#fff; font-size:15px; font-weight:700; cursor:pointer; font-family:'Inter',sans-serif;
    box-shadow:0 7px 16px rgba(32,52,95,.16); transition:background .15s, box-shadow .15s, transform .15s, border-color .15s;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
    white-space:normal; overflow:visible; text-overflow:clip; padding:9px 12px;
    text-align:center; line-height:1.15; overflow-wrap:anywhere;
  }
  .fc-btn-main{display:block; font-size:15px; font-weight:700; line-height:1.15;}
  .fc-btn-count{display:block; font-size:12.5px; font-weight:600; line-height:1.15; opacity:.9; white-space:normal;}
  .fc-review-btn:hover{background:var(--ink-2); border-color:var(--ink-2); box-shadow:0 9px 20px rgba(32,52,95,.2); transform:translateY(-1px);}
  .fc-review-btn:active{transform:translateY(0) scale(.995);}
  .fc-choose-text{
    display:inline-block; margin-top:14px; margin-left:14px; font-size:13px; font-weight:600; color:#2F6FE8;
    text-decoration:none; background:none; border:none; cursor:pointer; padding:0;
  }

  @media(max-width:680px){
    .feature-card-hero{
      grid-template-columns:minmax(0,1.08fr) minmax(150px,.82fr);
      gap:6px;
      padding:12px 18px;
    }
    .feature-card-hero h2{
      font-size:25px;
      margin-bottom:6px;
    }
    .feature-card-hero p{
      font-size:13px;
      margin-bottom:14px;
      line-height:1.45;
    }
    .fc-artwork{
      min-height:130px;
    }
    .fc-artwork img{
      max-width:230px;
      max-height:180px;
    }
    .fc-artwork-audioStudy img{
      max-height:117px;
    }
    .fc-review-btn,
    .fc-outline-btn-full{
      max-width:100%;
      min-height:52px;
      height:auto;
    }
    .fc-choose-text{
      margin-top:11px;
      margin-left:10px;
    }
  }

  /* Keep the phone layout side-by-side too, matching the reference design.
     Only extremely narrow screens stack vertically. */
  @media(max-width:430px){
    .feature-card-hero{
      grid-template-columns:minmax(0,1.12fr) minmax(118px,.78fr);
      gap:3px;
      padding:10px 14px;
      border-radius:20px;
    }
    .feature-card-hero h2{
      font-size:23px;
    }
    .feature-card-hero p{
      font-size:12.5px;
      margin-bottom:12px;
    }
    .fc-artwork{
      min-height:118px;
    }
    .fc-artwork img{
      max-width:180px;
      max-height:155px;
    }
    .fc-artwork-audioStudy img{
      max-height:101px;
    }
    .fc-review-btn,
    .fc-outline-btn-full{
      min-height:50px;
      height:auto;
      font-size:13.5px;
      padding:8px 10px;
    }
    .fc-btn-main{font-size:13.5px;}
    .fc-btn-count{font-size:11.5px;}
    .fc-choose-text{
      margin-top:10px;
      margin-left:6px;
      font-size:12.5px;
    }
  }

  @media(max-width:330px){
    .feature-card-hero{
      grid-template-columns:1fr;
      gap:4px;
    }
    .feature-card-hero .fc-artwork{
      min-height:120px;
      margin-top:0;
    }
    .feature-card-hero .fc-artwork img{
      max-width:190px;
      max-height:145px;
    }
  }

/* ===== styles/90-audio-performance.css ===== */
  /* ---------- Audio Review: single white card + auto-advance pill ---------- */
  .ar-card{
    background:var(--paper-raised); border-radius:24px; box-shadow:var(--shadow);
    padding:40px 30px; text-align:center;
  }
  .ar-card .ar-word{font-family:'Fraunces',serif; font-size:32px; color:var(--ink); margin-bottom:22px;}
  .ar-quote{text-align:center;}
  .ar-quote .ar-quote-mark{
    display:block; font-family:'Fraunces',serif; font-size:30px; font-weight:700; color:#2F6FE8;
    line-height:1; margin-bottom:6px;
  }
  .ar-quote p{margin:0 auto; max-width:92%; font-size:17px; line-height:1.65; color:var(--ink);}
  .ar-audio-icon{display:flex; align-items:center; justify-content:center; margin-top:26px; min-height:56px;}
  .ar-audio-badge{
    width:56px; height:56px; border-radius:50%; background:#EEF3FD;
    display:flex; align-items:center; justify-content:center; font-size:24px;
  }
  .btn-audio-play{background:#2F6FE8; color:#fff;}
  .ar-transport-btn{white-space:nowrap;}
  .ar-repeat-btn{
    width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:11px;
    background:transparent; color:var(--ink); display:inline-flex; align-items:center;
    justify-content:center; cursor:pointer; font-size:18px; flex-shrink:0;
  }
  .ar-repeat-btn.active{background:#2F6FE8; color:#fff; border-color:#2F6FE8;}
  .ar-advance-pill{
    display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
    background:var(--gold-soft); border-radius:999px; padding:9px 16px; margin-top:14px;
    font-size:12.5px; color:var(--text-muted);
  }
  .ar-advance-pill .ar-pill-sep{color:var(--line);}
  .ar-advance-pill strong{color:#7A5C1A; font-weight:700;}
  /* ---------- Performance: streak / active-days / lessons-completed ---------- */
  .streak-card{
    background:linear-gradient(135deg, var(--stamp) 0%, #C97258 100%); border-radius:20px;
    padding:20px; color:#fff; display:flex; align-items:center; gap:16px; margin:4px 0 18px;
    box-shadow:0 10px 24px rgba(184,95,75,0.28); position:relative; overflow:hidden;
  }
  .streak-card .streak-deco{position:absolute; inset:0; z-index:0; pointer-events:none;}
  .streak-card .streak-content{position:relative; z-index:1; display:flex; align-items:center; gap:16px;}
  .streak-badge{
    width:52px; height:52px; border-radius:50%; background:rgba(255,255,255,0.92);
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .streak-flame{font-size:28px; line-height:1;}
  .streak-num{font-family:'Fraunces',serif; font-size:32px; font-weight:700; line-height:1;}
  .streak-label{font-size:12.5px; opacity:.9; margin-top:2px;}
  .streak-sub{font-size:11.5px; opacity:.8; margin-top:3px;}
  .perf-card{background:var(--paper-raised); border-radius:18px; padding:16px 16px 14px; margin-bottom:18px; box-shadow:var(--shadow);}
  .perf-card-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; flex-wrap:wrap;}
  .perf-card-title{font-size:13.5px; font-weight:700; color:var(--ink);}
  .period-toggle{display:flex; background:var(--paper); border-radius:999px; padding:3px; gap:2px;}
  .period-btn{border:none; background:none; font-size:11px; font-weight:600; color:var(--text-muted); padding:5px 10px; border-radius:999px; cursor:pointer; font-family:'Inter',sans-serif;}
  .period-btn.active{background:var(--ink); color:#fff;}
  .active-days-num{font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--ink);}
  .active-days-num small{font-size:14px; color:var(--text-muted); font-weight:500;}
  .active-days-sub{font-size:12px; color:var(--text-muted); margin-bottom:10px;}
  .retention-num{font-family:'Fraunces',serif; font-size:24px; font-weight:700; color:var(--ink);}
  .retention-sub{font-size:12px; color:var(--text-muted);}
  .dot-row{display:flex; gap:3px; flex-wrap:wrap;}
  .dot{width:8px; height:8px; border-radius:2px; background:var(--line);}
  .dot.on{background:var(--sage);}
  .lesson-frac{font-family:'Fraunces',serif; font-size:15px; font-weight:700; color:var(--ink); white-space:nowrap;}
  .lesson-progress-row{display:flex; align-items:center; gap:4px; margin-bottom:8px;}
  .lesson-pip{flex:1; height:8px; border-radius:4px; background:var(--line);}
  .lesson-pip.done{box-shadow:0 0 0 1.5px var(--sage);}
  .lesson-list-item{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--line); font-size:12.5px;}
  .lesson-list-item:last-child{border-bottom:none;}
  .lesson-check{width:18px; height:18px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:10px; flex-shrink:0;}
  .lesson-check.done{background:var(--sage-soft); color:var(--sage);}
  .lesson-check.wip{background:#E6EDFB; color:#2F6FE8;}
  .lesson-name{flex:1; color:var(--ink);}
  .lesson-pct{color:var(--text-muted); font-size:11.5px;}