/* ===== 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{
    position:relative;
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 20px 10px;
  }
  .my-account-wrap{position:relative;}
  .my-account-overlay{position:fixed; inset:0; z-index:59; background:transparent; border:none; padding:0;}
  .my-account-menu{
    position:absolute; top:100%; left:0; right:0; margin-top:4px; z-index:60;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:12px;
    box-shadow:var(--shadow); padding:6px; display:flex; flex-direction:column;
    animation:screenFadeIn .15s ease both;
  }
  .my-account-menu-item{
    display:block; width:100%; text-align:left;
    background:none; border:none; padding:10px 12px; border-radius:8px; cursor:pointer;
    font-family:'Inter',sans-serif; font-size:13.5px; color:var(--ink); font-weight:500;
  }
  .my-account-menu-item:hover{background:var(--paper);}
  .topbar .brand{display:flex; align-items:center; gap:6px;}
  .brand-mark{height:28px; display:flex; align-items:center; flex-shrink:0;}
  .brand-mark img{height:100%; width:auto; display:block;}
  .brand-wordmark{height:20px; display:flex; align-items:center; flex-shrink:0;}
  .brand-wordmark img{height:100%; width:auto; display:block;}
  .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:135px 4px 12px; position:relative;}
  .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-screen{position:relative;}
  .welcome-screen > .topbar, .welcome-screen > main{position:relative; z-index:1;}
  .welcome-banner{position:absolute; top:0; left:0; right:0; height:320px; z-index:0; overflow:hidden; pointer-events:none; user-select:none;}
  .welcome-banner svg{display:block; position:absolute;}
  .welcome-banner .wb-bg{inset:0; width:100%; height:100%;}
  .welcome-banner .wb-art{top:0; right:0; width:min(400px, 100%); height:auto;}
  .welcome-hero h1{position:relative; z-index:1; font-size:32px; line-height:1.15; margin:0 0 26px; color:var(--ink); font-weight:700;}
  .welcome-hero h1 .accent{color:#2F6FE8;}
  .welcome-hero p{font-size:14.5px; color:var(--text-muted); line-height:1.55; margin:0 0 28px;}
  .google-icon-badge{
    width:26px; height:26px; border-radius:50%; background:#fff; flex-shrink:0;
    display:flex; align-items:center; justify-content:center; box-shadow:0 1px 3px rgba(15,23,42,.2);
  }
  .login-features{display:flex; margin-top:32px; align-items:flex-start;}
  .login-feature{flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:6px; text-align:left; padding:0 9px; position:relative;}
  .login-feature:first-child{padding-left:0;}
  .login-feature:last-child{padding-right:0;}
  .login-feature:not(:last-child)::after{content:''; position:absolute; right:0; top:2px; bottom:2px; width:1px; background:var(--line);}
  .login-feature-header{display:flex; align-items:center; gap:8px;}
  .login-feature-icon-wrap{
    width:34px; height:34px; border-radius:10px; flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
  }
  .login-feature-blue{background:#EFF4FE; color:#1247E0;}
  .login-feature-green{background:var(--sage-soft); color:var(--sage);}
  .login-feature-gold{background:var(--gold-soft); color:#8A6A1C;}
  .login-feature h4{font-family:'Fraunces',serif; font-weight:700; font-size:12px; line-height:1.28; margin:0; color:var(--ink);}
  .login-feature p{font-size:10px; line-height:1.4; color:var(--text-muted); margin:0;}
  .login-bio-link{
    color:#2F6FE8; font-weight:600; text-decoration:underline; text-underline-offset:2px;
    display:inline-flex; align-items:center; gap:2px; white-space:nowrap;
  }
  .login-bio-link .login-bio-arrow{flex-shrink:0;}
  .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-accent{background:#2F6FE8; 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:env(safe-area-inset-bottom);
  }

  .lesson-footer-illustration{
    display:block;
    flex:1 1 auto;
    min-height:130px;
    margin:0 -20px;
    position:relative;
    background:transparent;
    box-sizing:border-box;
    pointer-events:none;
    user-select:none;
  }
  .lesson-footer-illustration svg{
    display:block;
    position:absolute;
    left:0; right:0; bottom:0;
    width:100%;
    height:100%;
  }

  @media (max-width:420px){
    .lesson-footer-illustration{
      min-height:110px;
    }
  }

  /* The desktop shell adds 32px body padding above and below. */
  @media (min-width:460px){
    .student-lessons-screen{
      height:calc(100dvh - 64px);
    }
    .lesson-footer-illustration{
      min-height:150px;
    }
  }

/* ===== 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{
    /* bottom is relative to .bottom-fixed-wrap, whose height equals .bottomnav's
       (this button is out of flow) — 100% clears the nav bar on any device,
       including tall safe-area-inset-bottom, instead of guessing a fixed px. */
    position:absolute; right:18px; bottom:calc(100% + 14px); z-index:1;
    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:#2F6FE8; 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-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 ul{margin:0; padding-left:20px; list-style:disc;}
  .info-box-body li{margin-bottom:12px; line-height:1.7;}

  .note-section{margin-top:26px; padding-top:22px; border-top:1px solid var(--line);}
  .note-section .info-box{margin-top:0;}
  .note-add-link{
    display:inline-flex; align-items:center; gap:6px; background:none; border:none; padding:0;
    font-family:'Inter',sans-serif; font-size:13.5px; font-weight:600; color:var(--text-muted); cursor:pointer;
  }
  .note-add-link:hover{color:var(--ink);}
  .note-edit-label{font-size:16px; font-weight:700; color:var(--ink); margin-bottom:10px;}
  .note-input-wrap{position:relative;}
  .note-textarea{
    width:100%; min-height:80px; resize:vertical; padding:12px 14px 26px; border-radius:16px;
    border:1px solid var(--line); background:var(--paper); font-family:'Inter',sans-serif;
    font-size:14.5px; color:var(--text); line-height:1.5;
  }
  .note-textarea:focus{outline:2px solid var(--ink); outline-offset:1px;}
  .note-counter{
    position:absolute; right:12px; bottom:9px; font-family:'IBM Plex Mono',monospace;
    font-size:11px; color:var(--text-muted); pointer-events:none;
  }
  .note-save-btn{margin-top:12px;}
  .note-edit-btn{
    background:none; border:none; cursor:pointer; font-size:14px; line-height:1; padding:2px; margin-left:auto;
    color:var(--text-muted);
  }
  .note-edit-btn:hover{color:var(--ink);}
  .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;}
  .guess-textarea{
    text-align:left; resize:none; line-height:1.5; font-size:15px;
  }
  .guess-textarea:disabled, .guess-textarea:read-only{opacity:.7;}
  .lt-hint-row{
    display:flex; align-items:flex-start; gap:8px; margin-top:14px; min-height:24px;
  }
  .lt-hint{
    flex:1; min-width:0; font-size:12.5px; line-height:1.5; text-align:left; word-wrap:break-word; font-style:italic;
  }
  .lt-sent-badge{
    font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-muted);
    background:var(--paper); border:1px solid var(--line); border-radius:999px;
    padding:2px 8px; white-space:nowrap; flex-shrink:0; margin-top:2px;
  }
  .lt-reveal-btn{
    width:28px; height:28px; padding:0; flex-shrink:0; margin-top:1px;
    border:1px solid var(--line); border-radius:50%; background:var(--paper-raised); color:var(--text-muted);
    display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s;
  }
  .lt-reveal-btn:hover{background:var(--sage-soft); color:var(--sage);}
  .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;
  }

  .rate-fixed-wrap{
    position:fixed;
    left:50%;
    transform:translateX(-50%);
    bottom:calc(8px + env(safe-area-inset-bottom));
    width:calc(100vw - 40px);
    max-width:390px;
    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 - 64px);
      max-width:576px;
      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:52px 10px 10px;}
  .rd-badge{position:relative; width:150px; height:150px; margin:0 auto;}
  .rd-badge-deco{position:absolute; inset:0; width:100%; height:100%; pointer-events:none;}
  .rd-badge-circle{
    position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
    width:68px; height:68px; border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #ffffff 0%, #F3F7FF 68%, #E9F0FF 100%);
    box-shadow:0 0 0 10px rgba(47,111,232,.07), 0 14px 34px rgba(47,111,232,.24);
    display:flex; align-items:center; justify-content:center; color:#2F6FE8;
  }
  .rd-check-icon{width:46px; height:46px;}
  .rd-title{font-family:'Fraunces',serif; font-weight:700; font-size:30px; line-height:1.16; margin:12px 0 10px; color:var(--ink);}
  .rd-title span{color:#2F6FE8;}
  .review-done .rd-sub{color:var(--text-muted); font-size:13.5px; line-height:1.55; max-width:280px; margin:0 auto;}

/* ===== 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; }
    .face, .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-footer-illustration{ margin-left:-32px; margin-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:100%; aspect-ratio:35/12; border-radius:20px; object-fit:cover; margin:22px 0 8px; display:block; background:#DFE7DB; box-shadow:0 14px 32px rgba(28,39,55,.10), 0 2px 8px rgba(28,39,55,.05);}
  .lp-image-fallback{width:100%; aspect-ratio:35/12; border-radius:20px; margin:22px 0 8px; display:flex; align-items:center; justify-content:center; background:#DFE7DB; color:#5C7A5B; font-family:'Fraunces',serif; font-weight:600; font-size:42px; box-shadow:0 14px 32px rgba(28,39,55,.10), 0 2px 8px rgba(28,39,55,.05);}
  .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;
  }
  /* One shared box for every feature-card illustration (Review, Practice,
     Listen, Listen & Type) so all cards render at the same height instead of
     each image's own aspect ratio driving a different card size. */
  .fc-artwork img{
    display:block;
    width:100%;
    max-width:305px;
    max-height:133px;
    object-fit:contain;
    object-position:center;
  }

  .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{
    display:flex; align-items:center; justify-content:center; gap:6px;
    width:100%; max-width:320px; min-height:56px; height:auto;
    font-size:15px; font-weight:700; color:var(--ink);
    background:#fff; border:1.5px solid var(--ink);
    border-radius:14px; padding:10px 14px; margin:0;
    text-align:center; line-height:1.25;
  }
  .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;
  }

  .search-entry-card{
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--paper-raised); border:1px solid var(--line); border-radius:14px;
    padding:14px 16px; cursor:pointer; text-align:left; font-family:'Inter',sans-serif;
    transition:border-color .15s ease, transform .15s ease;
  }
  .search-entry-card:hover{border-color:#2F6FE8;}
  .search-entry-card:active{transform:scale(.995);}
  .search-entry-icon{
    width:40px; height:40px; border-radius:50%; background:#E6EDFB; color:#2F6FE8;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .search-entry-icon svg{width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;}
  .search-entry-copy{flex:1; min-width:0;}
  .search-entry-title{display:block; font-size:14.5px; font-weight:700; color:var(--ink);}
  .search-entry-sub{display:block; font-size:12.5px; color:var(--text-muted); margin-top:2px;}
  .search-entry-chevron{color:var(--text-muted); font-size:18px; flex-shrink: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:117px;
    }
    .fc-review-btn,
    .fc-outline-btn-full,
    .fc-nothing-due{
      max-width:100%;
      min-height:52px;
      height:auto;
    }
    .fc-choose-text{
      margin-top:11px;
      margin-left:10px;
    }
    .search-entry-card{
      padding:12px 14px;
    }
    .search-entry-icon{
      width:36px; height:36px;
    }
    .search-entry-title{font-size:14px;}
    .search-entry-sub{font-size:12px;}
  }

  /* 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:101px;
    }
    .fc-review-btn,
    .fc-outline-btn-full,
    .fc-nothing-due{
      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;
    }
    .search-entry-card{
      padding:10px 12px; gap:10px;
    }
    .search-entry-icon{
      width:32px; height:32px;
    }
    .search-entry-icon svg{width:16px; height:16px;}
    .search-entry-title{font-size:13.5px;}
    .search-entry-sub{font-size:11.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; margin-bottom:14px; min-height:56px;}
  /* On Listen & Type the icon is the card's first thing (no word/quote above
     it), so it doesn't need the same top offset those screens use to clear
     text above it — sit it closer to the card's own top padding instead. */
  .ar-card > .ar-audio-icon:first-child{margin-top:4px;}
  .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:#EEF3FD; border-radius:999px; padding:9px 16px; margin-top:14px;
    font-size:12.5px; color:#2F6FE8;
  }
  .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, #2F6FE8 0%, #1E4FBE 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(37,73,168,0.32); position:relative; overflow:hidden;
  }
  .streak-card .streak-deco{position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;}
  .streak-card .streak-rocket{position:absolute; left:82.75%; top:42.5%; height:52px; width:auto; transform:translate(-59%,-50%); z-index:0; pointer-events:none; user-select:none;}
  .streak-card .streak-badge{position:relative; z-index:1; width:52px; height:52px; flex-shrink:0;}
  .streak-card .streak-badge svg{width:100%; height:100%;}
  .streak-card .streak-content{position:relative; z-index:1; min-width:0;}
  .streak-num{font-family:'Fraunces',serif; font-size:32px; font-weight:700; line-height:1; text-shadow:0 1px 3px rgba(8,18,46,.4);}
  .streak-label{font-size:12.5px; opacity:.98; margin-top:2px; text-shadow:0 1px 2px rgba(8,18,46,.35);}
  .streak-sub{font-size:11.5px; opacity:.92; margin-top:3px; text-shadow:0 1px 2px rgba(8,18,46,.35);}
  .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;}

/* ===== styles/100-account.css ===== */
  /* ---------- account / settings ---------- */
  .account-section{
    background:var(--paper-raised); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 16px; margin-bottom:14px; box-shadow:var(--shadow);
  }
  .account-section-title{font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); margin-bottom:8px;}
  .account-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:8px 0; border-bottom:1px solid var(--line); font-size:14px;
  }
  .account-row:last-child{border-bottom:none;}
  .account-row-label{color:var(--text-muted);}
  .account-row-value{color:var(--ink); font-weight:600; text-align:right; word-break:break-word;}
  .account-row-title{color:var(--ink);}
  .account-row-tag{
    font-size:11px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line);
    padding:2px 8px; border-radius:999px;
  }
  .account-row-empty{color:var(--text-muted); font-size:13.5px; padding:4px 0;}
  .account-row-link{
    width:100%; text-align:left; background:none; border:none; padding:8px 0;
    font-family:'Inter',sans-serif; color:var(--ink); text-decoration:none; font-weight:600; cursor:pointer;
  }
  .account-actions-list{display:flex; flex-direction:column; gap:8px;}
  .account-delete-btn{color:var(--stamp); border-color:var(--stamp-soft);}
  .account-delete-warning{font-size:13px; color:var(--text-muted); margin:2px 0 0;}
  .account-delete-actions{display:flex; gap:8px;}
  .account-section-danger{border-color:var(--stamp-soft);}
  .account-section-danger .account-section-title{color:var(--stamp);}

  /* ---------- Privacy Policy / Terms of Service (in-app) ---------- */
  .legal-section p{margin:0 0 10px; font-size:13.5px; line-height:1.6; color:var(--text);}
  .legal-section p:last-child{margin-bottom:0;}
  .legal-section ul{margin:0 0 10px; padding-left:18px;}
  .legal-section li{margin-bottom:6px; font-size:13.5px; line-height:1.55; color:var(--text);}
  .legal-section li:last-child{margin-bottom:0;}
  .legal-section a{color:var(--ink); font-weight:600;}