@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400;14..32,500;14..32,600;14..32,700;14..32,800&family=JetBrains+Mono:wght@400;600&display=swap');

  :root, [data-theme="dark"]{
    --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', sans-serif;
    --font-mono: 'JetBrains Mono', 'SF Mono', SFMono-Regular, Menlo, Consolas, monospace;
    --bg: #1A1C28;
    --bg-2: #202330;
    --surface: #262938;
    --surface-2: #2C2F40;
    --border: rgba(255,255,255,0.06);
    --border-light: rgba(255,255,255,0.10);
    --ink: #E8EDF5;
    --ink-soft: #8B95AD;
    --pencil: #5B677F;
    --accent: #6C5CE7;
    --accent-glow: rgba(108,92,231,0.35);
    --accent-soft: rgba(108,92,231,0.12);
    --green: #00D2A0;
    --green-glow: rgba(0,210,160,0.3);
    --green-soft: rgba(0,210,160,0.10);
    --orange: #FF8A5C;
    --orange-glow: rgba(255,138,92,0.3);
    --orange-soft: rgba(255,138,92,0.10);
    --red: #FF5252;
    --red-soft: rgba(255,82,82,0.12);
    --yellow: #FFD93D;
    --card-shadow: 0 1px 0 rgba(255,255,255,0.04), 0 8px 32px -8px rgba(0,0,0,0.4);
    --auth-bg: linear-gradient(135deg, #1A1C28 0%, #2C214A 50%, #1A1C28 100%);
    --topbar-bg: rgba(108,92,231,0.15);
    --nav-bg: rgba(26,28,40,0.82);
    --nav-active: rgba(255,255,255,0.04);
    --glass-bg: rgba(38, 41, 56, 0.72);
    --glass-border: rgba(255,255,255,0.06);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.4);
  }

  [data-theme="light"]{
    --bg: #F2F3F8;
    --bg-2: #EAEBF0;
    --surface: #FFFFFF;
    --surface-2: #F0F1F6;
    --border: rgba(0,0,0,0.06);
    --border-light: rgba(0,0,0,0.10);
    --ink: #1A1D2E;
    --ink-soft: #6B7280;
    --pencil: #9CA3AF;
    --accent: #6C5CE7;
    --accent-glow: rgba(108,92,231,0.25);
    --accent-soft: rgba(108,92,231,0.08);
    --green: #00B88A;
    --green-glow: rgba(0,184,138,0.2);
    --green-soft: rgba(0,184,138,0.08);
    --orange: #E67A4A;
    --orange-glow: rgba(230,122,74,0.2);
    --orange-soft: rgba(230,122,74,0.08);
    --red: #E04848;
    --red-soft: rgba(224,72,72,0.08);
    --yellow: #E6C035;
    --card-shadow: 0 1px 0 rgba(0,0,0,0.02), 0 8px 32px -8px rgba(0,0,0,0.08);
    --auth-bg: linear-gradient(135deg, #F2F3F8 0%, #E8E3F5 50%, #F2F3F8 100%);
    --topbar-bg: rgba(108,92,231,0.08);
    --nav-bg: rgba(255,255,255,0.85);
    --nav-active: rgba(0,0,0,0.04);
    --glass-bg: rgba(255,255,255,0.75);
    --glass-border: rgba(0,0,0,0.06);
    --glass-shadow: 0 8px 32px rgba(0,0,0,0.08);
  }

  *{ box-sizing: border-box; margin:0; padding:0; }

  /* ---------- Lucide base ---------- */
  i[data-lucide]{ display:inline-block; vertical-align:middle; }
  svg.lucide{ display:inline-block; vertical-align:middle; }

  body{
    margin:0;
    font-family: var(--font-sans);
    background: var(--bg);
    background-image:
      radial-gradient(ellipse at 20% 10%, rgba(108,92,231,0.10) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 90%, rgba(0,210,160,0.06) 0%, transparent 50%);
    color: var(--ink);
    min-height:100vh;
    display:flex;
    justify-content:center;
    -webkit-font-smoothing: antialiased;
  }

  .device{
    width:100%;
    max-width:430px;
    min-height:100vh;
    position:relative;
    display:flex;
    flex-direction:column;
    overflow-x:hidden;
  }

  /* ---------- Top bar ---------- */
  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding: 16px 20px 8px;
    position:sticky;
    top:0;
    z-index:30;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: var(--topbar-bg);
    border-bottom: 1px solid var(--border);
  }
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:700;
    font-size: 17px;
    letter-spacing: -0.3px;
    color: var(--ink);
  }
  .brand .mark{
    width:22px;height:22px;
    flex-shrink:0;
  }
  #topbarUser{ cursor:pointer; transition:color .15s; }
  #topbarUser:hover{ color:var(--ink); }
  #topbarUser:hover .topbar-avatar-fallback{ background:var(--accent); color:#fff; }
  .topbar-avatar, .topbar-avatar-fallback{
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    object-fit:cover;
  }
  .topbar-avatar-fallback{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent);
    font:600 13px var(--font-sans);
  }
  .settings-avatar-preview, .settings-avatar-fallback{
    width:56px; height:56px; border-radius:50%; flex-shrink:0;
    object-fit:cover;
  }
  .settings-avatar-fallback{
    display:inline-flex; align-items:center; justify-content:center;
    background:var(--accent-soft); color:var(--accent);
    font:600 28px var(--font-sans);
  }

  /* ---------- Screens ---------- */
  .screen{
    display:none;
    flex-direction:column;
    flex:1;
    padding: 8px 20px 100px;
    animation: fadeIn .4s cubic-bezier(0.16,1,0.3,1);
  }
  .screen.active{ display:flex; }
  @keyframes fadeIn{ from{opacity:0; transform:translateY(12px);} to{opacity:1; transform:translateY(0);} }

  .page-title{
    font-weight:700;
    font-size: 28px;
    margin: 10px 0 4px;
    letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--ink) 0%, var(--accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
  }
  .page-sub{
    font-size:13px;
    color: var(--ink-soft);
    margin-bottom: 20px;
    line-height:1.5;
  }

  /* ---------- HOME ---------- */
  .home-task-list{ display:flex; flex-direction:column; gap:12px; margin-top:4px; }
  .task-card{
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding:18px 18px 16px;
    box-shadow: var(--glass-shadow);
    display:flex; flex-direction:column; gap:8px;
    transition: transform .2s ease, border-color .2s ease;
  }
  .task-card:active{ transform: scale(0.98); }
  .task-card .task-header{ display:flex; align-items:center; gap:12px; }
  .task-card .task-icon{
    width:44px; height:44px; border-radius:14px;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; color:var(--accent);
    border: 1px solid var(--border-light);
  }
  .task-card .task-title{ font-weight:600; font-size:15px; }
  .task-card .task-desc{ font-size:12.5px; color:var(--ink-soft); line-height:1.5; }
  .task-card .task-action{ margin-top:4px; }
  .task-card .task-action .btn{
    flex:none; width:auto; min-width:120px; padding:10px 18px; font-size:13px;
  }
  .task-card .task-meta{
    display:flex; align-items:center; gap:12px;
    font-size:12px; color:var(--ink-soft);
  }
  .task-card .task-meta .num{ font-weight:700; color:var(--yellow); font-size:15px; }

  .btn{
    flex:1;
    border:none;
    border-radius: 12px;
    padding: 13px 10px;
    font-family:var(--font-sans);
    font-weight:600;
    font-size:14px;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center; gap:6px;
    transition: transform .15s ease, box-shadow .2s ease;
  }
  .btn:active{ transform: scale(0.96); }
  .btn-primary{
    background: linear-gradient(135deg, var(--accent), #8B7CF7);
    color: #fff;
    box-shadow: 0 4px 16px -4px var(--accent-glow);
    border: 1px solid rgba(255,255,255,0.08);
  }
  .btn-primary:hover{ box-shadow: 0 6px 24px -4px var(--accent-glow); }
  .btn-sm{ flex:none; padding:8px 14px; font-size:12px; border-radius:10px; }
  .btn-ghost{
    background: var(--surface-2);
    color: var(--ink-soft);
    border: 1px solid var(--border);
  }
  .btn-ghost:hover{ color: var(--ink); border-color: var(--border-light); }

  #fileInput{
    position:absolute;
    top:-9999px; left:-9999px;
    width:1px; height:1px; opacity:0;
  }

  .capture-zone{
    margin-top: 8px;
    border: 1.5px dashed var(--border-light);
    border-radius: 18px;
    padding: 0;
    text-align:center;
    position:relative;
    background: var(--surface);
    transition: border-color .2s;
    overflow:hidden;
    min-height: 200px;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
  }
  .capture-zone:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
  .capture-zone .lens{
    width:56px; height:56px;
    margin: 0 auto 12px;
    border-radius:50%;
    background: linear-gradient(135deg, var(--surface-2), var(--surface));
    display:flex; align-items:center; justify-content:center;
    position:relative;
    border: 2px solid var(--border-light);
  }
  .capture-zone .lens::before{
    content:"";
    width: 22px; height:22px;
    border-radius:50%;
    background: linear-gradient(145deg, var(--accent), #A78BFA);
    box-shadow: 0 0 16px var(--accent-glow);
  }
  .capture-zone h3{
    font-size:16px;
    margin: 0 0 4px;
    font-weight:600;
  }
  .capture-zone p{
    font-size:12px;
    color: var(--ink-soft);
    margin:0;
  }

  .crop-sheet{ max-width: 430px; padding: 16px 16px calc(20px + env(safe-area-inset-bottom)); background: var(--surface); }
  .crop-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
  .crop-title{ font-weight:700; font-size:16px; }
  .crop-hint{ font-size:12px; color:var(--ink-soft); margin-bottom:10px; }
  .crop-stage{ border-radius:14px; overflow:hidden; background:#000; position:relative; height:55vh; min-height:300px; width:100%; touch-action:none; }
  #cropCanvas{ position:absolute; top:0; left:0; width:100%; height:100%; display:block; touch-action:none; cursor:crosshair; }
  .crop-actions{ display:flex; gap:10px; margin-top:12px; }

  .btn-row{
    display:flex; gap:10px;
    margin-top:18px;
  }

  .recent-head{
    display:flex; justify-content:space-between; align-items:baseline;
    margin: 24px 0 10px;
  }
  .recent-head h4{
    font-size:15px; margin:0; font-weight:600;
  }
  .recent-head span{
    font-size:11.5px; color: var(--ink-soft);
  }

  .batch-card{
    display:flex; align-items:center; gap:12px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border:1px solid var(--glass-border);
    border-radius:14px;
    padding: 12px 14px;
    margin-bottom:10px;
    cursor:pointer;
    box-shadow: var(--glass-shadow);
    transition: transform .2s ease;
  }
  .batch-card:active{ transform: scale(0.98); }
  .batch-thumb{
    width:46px; height:46px; border-radius:12px;
    background: linear-gradient(135deg, var(--accent), #A78BFA);
    flex-shrink:0;
    display:flex;align-items:center;justify-content:center;
    color:#fff;
    box-shadow: 0 0 16px var(--accent-glow);
  }
  .batch-info{ flex:1; min-width:0; }
  .batch-info .t{ font-weight:600; font-size:13.5px; }
  .batch-info .s{ font-size:11.5px; color: var(--ink-soft); margin-top:2px; }
  .batch-count{
    font-family:var(--font-mono);
    font-size:11px;
    background: var(--surface-2);
    padding: 4px 8px;
    border-radius: 8px;
    color: var(--ink-soft);
  }

  .stat-strip{
    display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;
  }
  .stat-box{
    flex:1 1 calc(50% - 4px); min-width:0;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border:1px solid var(--glass-border);
    border-radius:14px;
    padding: 14px;
    box-shadow: var(--glass-shadow);
  }
  .stat-box.clickable{ cursor:pointer; transition:transform .15s; }
  .stat-box.clickable:active{ transform:scale(0.96); }

  .stat-box .num{
    font-size:24px; font-weight:700;
  }
  .stat-box .lab{
    font-size:11px; color: var(--ink-soft); margin-top:3px;
  }

  /* ---------- SCANNING ---------- */
  .scan-frame{
    border-radius: 20px;
    overflow:hidden;
    position:relative;
    background: linear-gradient(145deg, #0a0e1a, #12182b 40%, #0a0e1a);
    aspect-ratio: 4/5;
    margin-top:8px;
    box-shadow: 0 0 0 1px var(--border), 0 20px 60px -16px rgba(0,0,0,0.8);
    isolation: isolate;
  }
  .scan-frame::before{
    content:''; position:absolute; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 28px 28px;
    z-index:0;
    pointer-events:none;
  }
  .scan-frame::after{
    content:''; position:absolute; inset:0;
    background: radial-gradient(ellipse at 50% 30%, transparent 20%, rgba(0,0,0,0.6) 100%);
    z-index:1;
    pointer-events:none;
  }

  .scan-bg-particles{
    position:absolute; inset:0; z-index:2; overflow:hidden; pointer-events:none;
  }
  .scan-bg-particles::before,
  .scan-bg-particles::after{
    content:''; position:absolute;
    width:4px; height:4px; border-radius:50%;
    background:rgba(108,92,231,0.3);
    box-shadow: 0 0 12px 2px rgba(108,92,231,0.2);
    animation: particleFloat 4s ease-in-out infinite;
  }
  .scan-bg-particles::before{ top:18%; left:22%; animation-delay:0s; }
  .scan-bg-particles::after{ top:62%; left:68%; animation-delay:2s; }
  @keyframes particleFloat{
    0%,100%{ transform:translateY(0) scale(1); opacity:0.2; }
    50%{ transform:translateY(-24px) scale(1.8); opacity:0.7; }
  }
  .particle-extra{
    position:absolute; width:2px; height:2px; border-radius:50%;
    background:rgba(108,92,231,0.25);
    animation: particleFloat 5s ease-in-out infinite;
  }

  .scan-line-wrap{
    position:absolute; left:0; right:0; height:2px; z-index:4;
    animation: scan 2.4s cubic-bezier(0.45,0.05,0.55,0.95) infinite;
    pointer-events:none;
  }
  .scan-line-beam{
    height:100%;
    background: linear-gradient(90deg, transparent 5%, var(--accent) 30%, #A78BFA 50%, var(--accent) 70%, transparent 95%);
    box-shadow: 0 0 20px 6px var(--accent-glow), 0 0 60px 12px rgba(108,92,231,0.12);
    border-radius:2px;
  }
  .scan-line-wrap::after{
    content:''; position:absolute; top:1px; left:0; right:0; height:32px;
    background: linear-gradient(180deg, rgba(108,92,231,0.06) 0%, transparent 100%);
    pointer-events:none;
  }
  @keyframes scan{
    0%{ top:-2px; } 15%{ top:6%; } 50%{ top:88%; } 85%{ top:6%; } 100%{ top:-2px; }
  }

  .scan-radar{
    position:absolute; inset:0; z-index:3;
    display:flex; align-items:center; justify-content:center;
    pointer-events:none;
  }
  .radar-ring{
    position:absolute;
    width:120px; height:120px;
    border-radius:50%;
    border: 1px solid rgba(108,92,231,0.15);
    animation: radarRing 3s ease-out infinite;
  }
  .radar-ring:nth-child(2){ width:200px; height:200px; animation-delay:1s; }
  .radar-ring:nth-child(3){ width:280px; height:280px; animation-delay:2s; }
  @keyframes radarRing{
    0%{ transform:scale(0.3); opacity:0.8; }
    100%{ transform:scale(1.2); opacity:0; }
  }
  .radar-sweep{
    position:absolute;
    width:140px; height:140px;
    border-radius:50%;
    background: conic-gradient(rgba(108,92,231,0.08) 0deg, rgba(108,92,231,0.25) 60deg, transparent 80deg);
    animation: radarSweep 2.4s linear infinite;
    mask: radial-gradient(circle, transparent 30%, #000 31%);
    -webkit-mask: radial-gradient(circle, transparent 30%, #000 31%);
  }
  @keyframes radarSweep{
    from{ transform:rotate(0deg); }
    to{ transform:rotate(360deg); }
  }
  .radar-center{
    width:6px; height:6px;
    border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 16px 4px var(--accent-glow);
    animation: radarPulse 1.6s ease-in-out infinite;
  }
  @keyframes radarPulse{
    0%,100%{ transform:scale(1); opacity:1; }
    50%{ transform:scale(1.5); opacity:0.6; }
  }

  .scan-status{
    position:absolute; bottom:14px; left:14px; right:14px; z-index:5;
    background: rgba(26,28,40,0.82);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255,255,255,0.06);
    color:#bbb;
    padding:11px 16px;
    border-radius:14px;
    font-size:13px;
    display:flex; align-items:center; gap:10px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.4);
  }
  .scan-status.bad{ background: rgba(255,82,82,0.2); border-color: rgba(255,82,82,0.15); color: var(--red); }
  .sparkle-dot{
    width:8px;height:8px;border-radius:50%;
    background: var(--accent);
    box-shadow: 0 0 12px 2px var(--accent-glow);
    animation: sparkle 1.2s ease-in-out infinite;
    flex-shrink:0;
  }
  @keyframes sparkle{
    0%,100%{ opacity:0.2; transform:scale(0.8); box-shadow: 0 0 4px 1px var(--accent-glow); }
    50%{ opacity:1; transform:scale(1.2); box-shadow: 0 0 16px 4px var(--accent-glow); }
  }

  /* ---------- WORD SELECT ---------- */
  .word-chip-grid{
    display:flex; flex-wrap:wrap; gap:8px;
    margin-top: 6px;
  }
  .confirm-progress-bar {
    width:100%; height:6px; background:var(--surface-2); border-radius:3px; overflow:hidden;
  }
  .confirm-progress-fill {
    height:100%; background: linear-gradient(90deg, var(--accent), var(--green)); border-radius:3px; transition:width .3s ease; box-shadow: 0 0 8px var(--accent-glow);
  }
  .confirm-progress-text {
    font:12px var(--font-sans); color:var(--ink-soft); margin-top:6px; text-align:center;
  }
  .confirm-done-title {
    font:600 18px var(--font-sans); color:var(--correct); margin-top:8px;
  }
  .confirm-done-sub {
    font:13px var(--font-sans); color:var(--ink-soft); margin-top:4px;
  }

  .word-chip{
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 10px;
    padding: 9px 13px;
    font-size: 14px;
    font-weight:500;
    cursor:pointer;
    display:flex; align-items:center; gap:6px;
    position:relative;
    transition: all .2s;
    color: var(--ink-soft);
  }
  .word-chip:hover{ border-color: var(--border-light); }
  .word-chip.selected{
    background: var(--accent-soft);
    color: var(--ink);
    border-color: var(--accent);
    box-shadow: 0 0 12px var(--accent-glow);
  }
  .word-chip .check{
    width:16px;height:16px;
    border-radius:50%;
    border: 1.5px solid var(--pencil);
    display:flex; align-items:center; justify-content:center;
    font-size:10px;
    flex-shrink:0;
    transition: all .2s;
  }
  .word-chip.selected .check{
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 0 8px var(--accent-glow);
  }

  .low-conf{
    font-size: 11px;
    color: var(--orange);
    background: var(--orange-soft);
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 2px;
  }

  .select-section-label{
    font:600 12px var(--font-sans); color:var(--ink-soft);
    margin:8px 0 4px;
  }
  .confirmed-word-rows{
    margin-top:4px;
  }

  .fp-item{
    display:flex; align-items:center; gap:10px;
    padding:10px 12px; border-radius:12px;
    cursor:pointer; transition:background .15s;
    font:14px var(--font-sans); color:var(--ink);
  }
  .fp-item:hover{ background:var(--surface-2); }
  .fp-item .fp-check{
    width:18px;height:18px; border-radius:50%;
    border:2px solid var(--pencil);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0; transition:all .2s;
  }
  .fp-item.selected .fp-check{
    background:var(--accent); border-color:var(--accent);
  }
  .fp-item.selected .fp-check::after{
    content:''; width:6px;height:6px; border-radius:50%;
    background:#fff;
  }
  .fp-item .fp-icon{ font-size:18px; }
  .fp-item .fp-name{ flex:1; }
  .fp-item .fp-count{ font-size:12px; color:var(--ink-soft); }

  /* ---------- WORDBOOK ---------- */
  .folder-section-title{
    font-size: 12.5px;
    font-weight:600;
    color: var(--pencil);
    margin: 22px 0 10px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
  }
  .folder-grid{
    display:grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
  .folder-card{
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border:1px solid var(--glass-border);
    border-radius:16px;
    padding: 14px;
    box-shadow: var(--glass-shadow);
    cursor:pointer;
    position:relative;
    display:flex; flex-direction:column; gap:10px;
    transition: transform .2s ease, border-color .2s ease;
  }
  .folder-card:active{ transform: scale(0.97); }
  .fc-row{
    display:flex; align-items:center; gap:12px;
  }
  .folder-card .fc-body{ flex:1; min-width:0; }
  .folder-card .fc-actions{
    position:absolute; top:8px; right:8px;
    display:flex; gap:4px; opacity:0;
    transition:opacity .2s;
  }
  .folder-card:hover .fc-actions,
  .folder-card:focus-within .fc-actions{ opacity:1; }
  .fc-actions span{
    width:28px; height:28px; border-radius:8px;
    display:flex; align-items:center; justify-content:center;
    font-size:13px; cursor:pointer; background:var(--surface-2);
    color:var(--ink-soft); transition:background .15s, color .15s;
  }
  .fc-act-rename:hover{ background:var(--accent-soft); color:var(--accent); }
  .fc-act-delete:hover{ background:var(--red-soft); color:var(--red); }
  .folder-card .ficon{
    width:36px; height:36px;
    border-radius:10px;
    flex-shrink:0;
    display:flex; align-items:center; justify-content:center;
    color:var(--accent);
    border: 1px solid var(--border);
  }
  .folder-card .fname{
    font-weight:600; font-size:13.5px;
    line-height:1.3;
  }
  .folder-card .fcount{
    font-family:var(--font-mono);
    font-size:11px;
    color: var(--ink-soft);
  }
  .folder-card.new-folder{
    border: 1.5px dashed var(--border);
    background: rgba(22,28,43,0.3);
    align-items:center;
    justify-content:center;
    flex-direction: row;
    gap:6px;
    box-shadow:none;
    min-height:auto;
    padding: 16px;
  }
  .folder-card.new-folder .fname{
    color: var(--pencil);
    font-weight:500;
  }

  .pending-banner{
    display:flex; align-items:center; gap:10px;
    background: var(--accent-soft);
    border: 1px solid rgba(108,92,231,0.2);
    border-radius:12px;
    padding: 10px 14px;
    margin: 8px 0;
    font-size:13px;
    color: var(--ink);
  }
  .pending-banner span{ flex:1; }

.batch-folder-row{
  display:flex; align-items:center; gap:12px;
  background: var(--glass-bg);
  backdrop-filter: blur(16px);
  border:1px solid var(--glass-border);
  border-radius:14px;
  padding: 11px 14px;
  margin-bottom: 9px;
  cursor:pointer;
  box-shadow: var(--glass-shadow);
  transition: transform .2s ease;
}
.batch-folder-row:active{ transform: scale(0.98); }
.batch-folder-row.delete-pending{ opacity:.5; }
.batch-del-btn{
  margin-left:auto; flex:none; width:28px; height:28px; border-radius:50%;
  border:1px solid var(--border); background:var(--surface-2);
  color:var(--ink-soft); font-size:16px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s,color .15s;
}
.batch-del-btn:hover{ background:var(--wrong); color:#fff; border-color:var(--wrong); }
.batch-scroll-sentinel{ height:1px; }

  /* folder detail ---*/
  .folder-header-bar{
    display:flex; align-items:center; gap:10px;
    margin-bottom: 4px;
  }
  .back-btn{
    width:36px; height:36px;
    border-radius:50%;
    border:1px solid var(--border);
    background: var(--surface);
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    font-size:16px;
    flex-shrink:0;
    color: var(--ink-soft);
    transition: background .15s, color .15s;
  }
  .back-btn:hover{ background: var(--surface-2); color: var(--ink); }
  .folder-title-group .ft{
    font-size:20px; font-weight:700;
  }
  .folder-title-group .fs{
    font-size:11.5px; color: var(--ink-soft); margin-top:2px;
  }

  #folderWordListBox{
    flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .folder-search-wrap{ margin:12px 0 8px; flex-shrink:0; position:relative; }
  .word-list-loader{
    text-align:center; padding:16px; font:12px var(--font-sans); color:var(--pencil);
  }

  .folder-search{
    width:100%; padding:10px 14px; font:14px var(--font-sans);
    border:1px solid var(--border); border-radius:12px;
    background:var(--surface); color:var(--ink);
    outline:none; transition:border-color .2s;
  }
  .folder-search:focus{ border-color:var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .folder-search::placeholder{ color:var(--pencil); }

  .filter-tabs{
    display:flex; gap:8px;
    margin: 16px 0 4px;
  }
  .filter-tab{
    font-size:12px;
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--ink-soft);
    cursor:pointer;
    transition: all .2s;
  }
  .filter-tab.active{
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
  }

  .word-row{
    display:flex; align-items:center; gap:12px;
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border:1px solid var(--glass-border);
    border-radius:14px;
    padding: 12px 14px;
    margin-bottom:9px;
    cursor:pointer;
    box-shadow: var(--glass-shadow);
    position:relative;
    overflow:hidden;
    transition: transform .2s ease, border-color .2s ease;
  }
  .word-row:active{ transform: scale(0.98); border-color: var(--accent); }
  .word-row .wr-main{ flex:1; min-width:0; }
  .corner-new-badge{
    position:absolute;
    top:8px;
    right:8px;
    background: linear-gradient(135deg, var(--orange), #FF6B6B);
    color:#fff;
    font-size:10px;
    font-weight:700;
    padding: 3px 6px;
    border-radius:999px;
    letter-spacing:0.02em;
    box-shadow: 0 4px 10px rgba(255,138,92,0.3);
  }
  .word-row .wr-word{
    font-weight:700; font-size:15.5px;
  }
  .word-row .wr-def{
    font-size:12px; color: var(--ink-soft);
    margin-top:2px;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .wr-badge{
    font-size:10px;
    padding: 3px 8px;
    border-radius: 8px;
    font-weight:600;
    flex-shrink:0;
  }
  .wr-badge.mastered{ background: var(--green-soft); color: var(--green); }
  .wr-badge.due{ background: rgba(255,217,61,0.12); color: var(--yellow); }
  .wr-badge.now{ background: var(--red-soft); color: var(--red); }
  .wr-badge.new{ background: var(--accent-soft); color: var(--accent); }

  /* ---------- MODAL ---------- */
  .modal-overlay{
    position:fixed; inset:0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
    display:none;
    align-items:flex-end;
    justify-content:center;
    z-index: 200;
  }
  .modal-overlay.show{ display:flex; }
  .modal-card{
    background: var(--surface);
    width:100%; max-width:360px;
    border-radius: 20px;
    padding: 24px 22px;
    animation: fadeScale .25s ease;
    box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  }
  @keyframes fadeScale{ from{ opacity:0; transform:scale(0.92); } to{ opacity:1; transform:scale(1); } }
  .modal-sheet{
    background: var(--surface);
    width:100%; max-width:430px;
    border-radius: 22px 22px 0 0;
    padding: 22px 20px calc(24px + env(safe-area-inset-bottom));
    animation: slideUp .3s cubic-bezier(0.16,1,0.3,1);
    border-top: 1px solid var(--border-light);
  }
  @keyframes slideUp{ from{ transform:translateY(30px); opacity:0;} to{transform:translateY(0); opacity:1;} }
  .modal-sheet h4{
    font-size:17px; margin: 0 0 14px; font-weight:700;
  }
  .modal-input{
    width:100%;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px 14px;
    font-family:var(--font-sans);
    font-size:14px;
    background: var(--surface-2);
    color: var(--ink);
    margin-bottom: 12px;
    outline:none;
    transition: border-color .2s;
  }
  .modal-input:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .modal-input::placeholder{ color: var(--pencil); }
  .color-pick-row{
    display:flex; gap:10px; margin-bottom:18px;
  }
  .color-dot{
    width:28px;height:28px;border-radius:50%;
    cursor:pointer;
    border: 2px solid transparent;
    transition: border-color .2s;
  }
  .color-dot.active{ border-color: var(--accent); box-shadow: 0 0 8px var(--accent-glow); }

  /* ---------- WORD CARD ---------- */
  .word-hero{
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 24px 20px;
    margin-top: 6px;
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
  }
  .word-hero .headword{
    font-size: 32px;
    font-weight:700;
    display:flex; align-items:baseline; gap:10px;
    flex-wrap:wrap;
  }
  .word-hero .pos-tag{
    font-size:11px;
    background: var(--accent-soft);
    color: var(--accent);
    padding: 3px 8px;
    border-radius: 6px;
    font-weight:600;
  }
  .word-hero .phon{
    font-family:var(--font-mono);
    color: var(--ink-soft);
    font-size: 14px;
    margin-top: 6px;
    display:flex; align-items:center; gap:8px;
  }
  .speaker-btn{
    background:none; border:none; cursor:pointer;
    padding:4px; border-radius:50%; color:var(--ink-soft);
    display:inline-flex;align-items:center;justify-content:center;
    transition:background 0.15s, color 0.15s;
  }
  .speaker-btn:hover{ color:var(--ink); }
  .speaker-btn:active{ background:var(--surface-2); }
  .def-list{
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
  }
  .def-item{
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
    color: var(--ink-soft);
  }
  .def-item b{ color: var(--ink); }

  .section-block{
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border-radius:18px;
    padding: 18px 18px;
    margin-top: 14px;
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
  }
  .section-block h5{
    font-size: 14px;
    margin: 0 0 10px;
    display:flex; align-items:center; gap:7px;
    font-weight:600;
  }
  .section-block h5 .ico{
    width:20px;height:20px;
    background: linear-gradient(135deg, var(--accent), #A78BFA);
    border-radius:5px;
    color:#fff;
    padding:4px;
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .mnemonic-text{
    font-size: 13.5px;
    line-height: 1.75;
    color: var(--ink-soft);
  }
  .mnemonic-text .root{
    color: var(--accent);
    font-weight:700;
    background: var(--accent-soft);
    padding: 0 4px;
    border-radius: 3px;
  }
  .example-box{
    background: var(--surface-2);
    border-radius: 12px;
    padding: 12px 14px;
    margin-top: 4px;
    border: 1px solid var(--border);
  }
  .example-box .en{
    font-size:13.5px; font-style:italic; line-height:1.55;
  }
  .example-box .cn{
    font-size:12px; color: var(--ink-soft); margin-top:4px;
  }
  .family-row{
    display:flex; gap:8px; flex-wrap:wrap;
  }
  .family-tag{
    font-family:var(--font-mono);
    font-size:10.5px;
    background: var(--surface-2);
    padding:4px 7px;
    border-radius:6px;
    color: var(--ink-soft);
  }

  .card-nav{
    display:flex; justify-content:space-between; align-items:center;
    margin-top:16px;
  }
  .card-nav .idx{
    font-family:var(--font-mono);
    font-size:12px; color: var(--ink-soft);
  }
  .nav-btn{
    width:40px;height:40px;
    border-radius:50%;
    border:1px solid var(--border);
    background: var(--surface);
    cursor:pointer;
    font-size:17px;
    display:flex;align-items:center;justify-content:center;
    color: var(--ink-soft);
    transition: background .15s, color .15s, border-color .15s;
  }
  .nav-btn:hover{ background: var(--surface-2); color: var(--ink); border-color: var(--border-light); }
  .nav-btn:disabled{ opacity:0.3; cursor:default; }

  /* ---------- PRACTICE ---------- */
  .progress-track{
    height:4px;
    background: var(--surface-2);
    border-radius:10px;
    overflow:hidden;
    margin: 4px 0 20px;
  }
  .progress-fill{
    height:100%;
    background: linear-gradient(90deg, var(--accent), #A78BFA);
    border-radius:10px;
    transition: width .4s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .practice-card{
    background: var(--glass-bg);
    backdrop-filter: blur(16px);
    border-radius: 20px;
    padding: 30px 22px;
    text-align:center;
    box-shadow: var(--glass-shadow);
    border: 1px solid var(--glass-border);
    min-height: 200px;
    display:flex; flex-direction:column; justify-content:center;
  }
  .practice-mode-label{
    font-family:var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--pencil);
    margin-bottom: 14px;
  }
  .practice-prompt{
    font-size: 20px;
    line-height:1.5;
  }
  .practice-prompt .blank{
    display:inline-block;
    border-bottom: 2px solid var(--accent);
    min-width: 70px;
  }
  .prompt-word{
    font-size: 30px;
    font-weight:700;
  }

  .card-preview{ padding: 4px 0; text-align:center; }

  /* AI chat learning */
  .ai-chat{
    display:flex; flex-direction:column; gap:16px;
    max-height:60vh; overflow-y:auto; padding:4px 0;
  }
  .ai-msg{
    display:flex; gap:10px; align-items:flex-start;
    animation: aiFadeIn .35s ease;
  }
  @keyframes aiFadeIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
  .ai-avatar{
    width:34px; height:34px; border-radius:50%;
    background:linear-gradient(135deg,var(--accent),#A78BFA);
    color:#fff; font:700 15px var(--font-sans);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .ai-avatar.rv{
    background:linear-gradient(135deg,#F59E0B,#FB923C);
  }
  .ai-bubble{
    background:var(--surface-2); border-radius:4px 14px 14px 14px;
    padding:12px 14px; font-size:13.5px; line-height:1.65;
    color:var(--ink); text-align:left;
    max-width:85%;
  }
  .ai-bubble .cp-headword{ font-size:24px; }
  .ai-bubble .cp-speak-btn{ display:inline-flex; vertical-align:middle; }
  .ai-word-list{
    display:flex; flex-wrap:wrap; gap:6px; margin:10px 0 4px;
  }
  .ai-word-tag{
    background:var(--accent-soft); color:var(--accent);
    padding:3px 10px; border-radius:14px;
    font:600 13px var(--font-sans);
  }
  .ai-section-title{
    font-weight:600; font-size:14px; margin-bottom:6px;
    color:var(--accent);
  }
  .ai-bubble-root{ border-left:3px solid var(--accent); }
  .ai-bubble-mne{ border-left:3px solid #A78BFA; }
  .cp-toggle{
    margin-top:10px; padding:8px 10px; border-radius:8px;
    background:var(--surface-2); font-size:12.5px; font-weight:500;
    cursor:pointer; user-select:none; display:flex; align-items:center; gap:6px;
    text-align:left;
    color: var(--ink-soft);
    transition: background .15s;
  }
  .cp-toggle:hover{ background:var(--border); }
  .cp-toggle-arrow{ width:16px; height:16px; color:var(--pencil); transition:transform .2s; }
  .cp-toggle-arrow.open{ transform:rotate(90deg); }
  .cp-toggle-content{
    display:none; margin-top:4px; padding:8px 12px;
    font-size:12.5px; line-height:1.5; color:var(--ink-soft);
    background:var(--surface-2); border-radius:0 0 8px 8px;
    text-align:left;
  }
  .cp-toggle-content.open{ display:block; }
  .family-item{
    display:inline-block; margin:2px 4px 2px 0;
    background:var(--surface-2); padding:2px 8px; border-radius:4px;
    font-size:12px;
    color: var(--ink-soft);
  }
  .cp-headword-row{
    display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;
  }
  .cp-headword{
    font-size:28px; font-weight:700;
  }
  .cp-speak-btn{
    background:none; border:none; cursor:pointer;
    padding:4px; border-radius:50%; color:var(--ink-soft);
    transition:background 0.15s, color 0.15s;
  }
  .cp-speak-btn:active{ background:var(--surface-2); }
  .cp-phonetic{
    font-family:var(--font-mono); font-size:12px; color:var(--pencil);
    margin-bottom:12px;
  }
  .cp-defs{ margin:10px 0 12px; text-align:left; }
  .cp-defs .def-item{ font-size:13.5px; margin-bottom:2px; }
  .cp-example{ font-size:13px; color:var(--ink-soft); margin-top:6px; font-style:italic; text-align:left; }
  .cp-example-cn{ font-size:12px; color:var(--pencil); margin-top:2px; text-align:left; }

  .option-list{
    display:flex; flex-direction:column; gap:9px;
    margin-top: 18px;
  }
  .option-item{
    background: var(--surface);
    border:1px solid var(--border);
    border-radius:12px;
    padding: 14px 16px;
    font-size:14px;
    text-align:left;
    cursor:pointer;
    display:flex; align-items:center; gap:10px;
    transition: border-color .2s, background .2s;
    color: var(--ink-soft);
  }
  .option-item:hover{ border-color: var(--border-light); }
  .option-item .lab{
    font-family:var(--font-mono);
    font-size:11px;
    color: var(--pencil);
    width:16px;
  }
  .option-item.active-pick{
    border-color: var(--accent);
    background: var(--accent-soft);
    color: var(--ink);
  }
  .option-item.correct{
    background: var(--green-soft);
    border-color: var(--green);
    color: var(--green);
  }
  .option-item.wrong{
    background: var(--red-soft);
    border-color: var(--red);
    color: var(--red);
  }

  .spell-input-row{
    margin-top:20px;
    display:flex; gap:6px; justify-content:center;
    max-width:320px; margin-left:auto; margin-right:auto;
  }
  .spell-box{
    flex:1; min-width:0; height:44px;
    border: 1px solid var(--border);
    border-radius:10px;
    text-align:center;
    font-family:var(--font-mono);
    font-size:18px;
    background: var(--surface-2);
    color: var(--ink);
    text-transform:lowercase;
    transition: border-color .2s;
    outline:none;
    padding:0;
  }
  .spell-box:focus{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
  .spell-box.spell-space{ border-color:transparent; background:transparent; flex:0 0 14px; min-width:14px; }
  .spell-box.spell-space:focus{ box-shadow:none; }
  .spell-translation{
    margin-top:8px;
    font-size:13px;
    color:var(--ink-soft);
    line-height:1.4;
  }
  .spell-meaning{
    margin-top:6px;
    font-size:13px;
    line-height:1.4;
  }
  .spell-def-red{ color: var(--red); }

  .feedback-banner{
    margin-top: 16px;
    padding: 12px 14px;
    border-radius: 12px;
    font-size: 13px;
    display:none;
    align-items:center; gap:8px;
    backdrop-filter: blur(8px);
  }
  .feedback-banner.show{ display:flex; }
  .feedback-banner.ok{ background: var(--green-soft); color: var(--green); border: 1px solid rgba(0,210,160,0.2); }
  .feedback-banner.bad{ background: var(--red-soft); color: var(--red); border: 1px solid rgba(255,82,82,0.2); }

  /* ---------- Bottom Nav ---------- */
  .bottom-nav{
    position:fixed;
    bottom:0; left:50%; transform:translateX(-50%);
    width:100%; max-width:430px;
    background: var(--nav-bg);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid var(--border);
    display:flex;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    z-index: 50;
  }
  .nav-item{
    flex:1;
    display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none;
    color: var(--pencil);
    font-family:var(--font-sans);
    font-size: 10px;
    cursor:pointer;
    padding: 6px 0;
    border-radius: 12px;
    transition: all .2s;
    position:relative;
  }
  .nav-item .nav-ico{
    width: 20px;
    height: 20px;
    transition: transform .2s;
  }
  .nav-item.active{
    color: var(--ink);
    background: var(--nav-active);
  }
  .nav-item.active .nav-ico{
    transform: scale(1.1);
  }
  .nav-item::after{
    content:'';
    position:absolute;
    bottom: -2px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    width: 20px;
    height: 2px;
    background: var(--accent);
    border-radius: 2px;
    transition: transform .2s cubic-bezier(0.16,1,0.3,1);
    box-shadow: 0 0 8px var(--accent-glow);
  }
  .nav-item.active::after{
    transform: translateX(-50%) scaleX(1);
  }

  .fixed-cta{
    position:sticky;
    bottom: 0;
    margin-top:auto;
    padding-top:14px;
  }

  ::-webkit-scrollbar{ display:none; }

  /* ---------- Loading / Empty / Toast ---------- */
  .loading-spinner{
    width:20px; height:20px;
    border-radius:50%;
    border: 2.5px solid var(--border);
    border-top-color: var(--accent);
    animation: spin .8s linear infinite;
    margin: 0 auto;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  .loading-row{
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding: 28px 0;
    color: var(--ink-soft);
    font-size:13px;
  }
  .loading-row .loading-spinner{ width:16px; height:16px; margin:0; }

  .empty-state{
    text-align:center;
    padding: 40px 16px;
    color: var(--ink-soft);
  }
  .empty-state .es-icon{ width:34px; height:34px; margin-bottom:10px; }
  .empty-state .es-title{
    font-size:15px; font-weight:600; color: var(--ink);
    margin-bottom: 4px;
  }
  .empty-state .es-sub{ font-size:12.5px; line-height:1.6; }

  .toast{
    position: fixed;
    left:50%; top: 18px;
    transform: translateX(-50%) translateY(-12px);
    max-width: 380px;
    width: calc(100% - 40px);
    background: var(--surface);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border-light);
    color: var(--ink);
    padding: 12px 16px;
    border-radius: 14px;
    font-size: 13px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 300;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s ease;
  }
  .toast.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  .toast.error{ background: var(--red-soft); border-color: rgba(255,82,82,0.2); color: var(--red); }

  .disabled-cta{ opacity:0.35; pointer-events:none; }

  #confirmSelectionBtn, #practiceNextBtn{
    flex:none;
    padding: 10px 18px;
    font-size:13px;
    border-radius:12px;
  }
  #confirmSelectionBtn{ margin:20px auto 0; }
  #practiceNextBtn{ margin-top:10px; }

  /* focus */
  button:focus-visible,
  .word-chip:focus-visible,
  .folder-card:focus-visible,
  .option-item:focus-visible,
  .spell-box:focus-visible,
  input:focus-visible{
    outline: 2px solid var(--accent);
    outline-offset: 2px;
  }

  /* login / register / profile */
  #screen-login, #screen-register{
    justify-content: center;
    background: var(--auth-bg);
  }
  #screen-login .modal-input, #screen-register .modal-input{
    background: var(--surface-2); margin-bottom:10px;
  }
  #settingsSaveBtn{ margin-top:14px; }

  /* ---------- 学习日历 ---------- */
  .cal-stats{
    display:flex; gap:16px; margin:4px 0 16px;
    font-size:13px; color:var(--ink-soft);
  }
  .cal-stats span{ font-weight:600; color:var(--ink); }
  .cal-nav{
    display:flex; align-items:center; justify-content:space-between;
    margin-bottom:12px;
  }
  .cal-nav-btn{
    width:32px; height:32px; border-radius:50%;
    border:1px solid var(--border); background:var(--surface);
    color:var(--ink-soft); cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s,color .15s;
  }
  .cal-nav-btn:hover{ background:var(--surface-2); color:var(--ink); }
  .cal-nav-title{ font-weight:600; font-size:15px; }
  .cal-grid{
    display:grid;
    grid-template-columns:repeat(7,1fr);
    gap:2px;
    text-align:center;
    font-size:13px;
  }
  .cal-grid .cal-hd{
    padding:6px 0; color:var(--pencil); font-size:11px; font-weight:600;
  }
  .cal-grid .cal-day{
    aspect-ratio:1; border-radius:10px;
    display:flex;align-items:center;justify-content:center;
    color:var(--ink-soft); font-size:13px;
    position:relative;
  }
  .cal-grid .cal-day.other{ color:var(--pencil); opacity:0.3; }
  .cal-grid .cal-day.today{
    border:1.5px solid var(--accent);
    color:var(--accent); font-weight:700;
  }
  .cal-grid .cal-day.filled::after{
    content:''; position:absolute; bottom:4px;
    width:5px; height:5px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 6px var(--green-glow);
  }
  .cal-legend{
    display:flex; align-items:center;
    margin-top:12px; font-size:12px; color:var(--ink-soft);
  }
  .cal-legend-dot{
    width:8px; height:8px; border-radius:50%;
    background:var(--surface-2); margin-right:4px;
  }
  .cal-legend-dot.filled{ background:var(--green); box-shadow:0 0 6px var(--green-glow); }
  .cal-legend-dot.today{ border:1.5px solid var(--accent); background:none; }

  .profile-summary{
    display:grid; grid-template-columns:1fr 1fr; gap:10px;
    margin-bottom:18px;
  }
  .ps-card{
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:14px 12px;
    display:flex; flex-direction:column; align-items:center; gap:4px;
  }
  .ps-num{
    font-size:22px; font-weight:700; color:var(--accent);
  }
  .ps-lab{
    font-size:11px; color:var(--ink-soft);
  }
  .bottom-nav{ display:flex; }

  .capture-zone .capture-overlay{
    position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; padding: 34px 20px; z-index:2; pointer-events:none;
  }

  .crop-box{ position:absolute; border:2px solid var(--accent); border-radius:2px; box-shadow:0 0 0 9999px rgba(0,0,0,0.6); z-index:3; pointer-events:none; }
  .crop-handle{ position:absolute; width:20px; height:20px; margin:-10px 0 0 -10px; z-index:4; }
  .crop-handle::before{ content:''; position:absolute; inset:3px; border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 0 8px var(--accent-glow); }
  .crop-handle.edge::before{ border-radius:0; width:8px; height:8px; inset:6px; }
  .crop-handle.edge.tm, .crop-handle.edge.bm{ cursor:ns-resize; }
  .crop-handle.edge.lm, .crop-handle.edge.rm{ cursor:ew-resize; }
  .crop-handle.corner.tl, .crop-handle.corner.br{ cursor:nwse-resize; }
  .crop-handle.corner.tr, .crop-handle.corner.bl{ cursor:nesw-resize; }
  .capture-inline-btn{
    width:auto;
    min-width: 172px;
    margin-top:14px;
    pointer-events:auto;
    background: linear-gradient(135deg, var(--accent), #8B7CF7);
    color: #fff;
    padding: 13px 16px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 700;
    box-shadow: 0 8px 24px -8px var(--accent-glow);
    border: 1px solid rgba(255,255,255,0.1);
  }

  /* ---------- Admin cards ---------- */
  .admin-card{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:16px;
    cursor:pointer; transition:background .15s;
  }
  .admin-card:hover{ background:var(--surface-2); }
  .admin-card-icon{
    width:44px; height:44px; border-radius:12px;
    display:flex; align-items:center; justify-content:center; flex-shrink:0;
  }
  .admin-card-body{ flex:1; min-width:0; }
  .admin-card-title{ font-weight:600; font-size:15px; }
  .admin-card-sub{ font-size:12px; color:var(--pencil); margin-top:2px; }

  /* ---------- Admin user table ---------- */
  .admin-user-row{
    display:flex; align-items:center; gap:10px;
    padding:12px 0; border-bottom:1px solid var(--border);
  }
  .admin-user-info{ flex:1; min-width:0; }
  .admin-user-name{ font-weight:600; font-size:14px; }
  .admin-user-meta{ font-size:11.5px; color:var(--pencil); margin-top:1px; }
  .admin-user-actions{ display:flex; gap:6px; flex-shrink:0; }
  .admin-user-actions .btn{ font-size:11px; padding:6px 10px; }

  /* ---------- Accuracy bar ---------- */
  .acc-bar-bg{
    flex:1; height:8px; border-radius:4px; background:var(--border);
    overflow:hidden;
  }
  .acc-bar-fill{
    height:100%; border-radius:4px; transition:width .3s;
  }

  /* ---------- Admin word list ---------- */
  .admin-word-row{
    padding:12px 0; border-bottom:1px solid var(--border);
  }
  .admin-word-headword{ font-weight:600; font-size:14px; }
  .admin-word-def{ font-size:12px; color:var(--pencil); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  .copyright{
    margin-top:24px; margin-bottom:16px; text-align:center;
    font:11px var(--font-sans); color:var(--pencil);
  }

  /* ---------- Toggle switch ---------- */
  .toggle-switch{ position:relative; display:inline-flex; align-items:center; cursor:pointer; flex-shrink:0; }
  .toggle-switch input{ position:absolute; opacity:0; width:0; height:0; }
  .toggle-slider{
    width:40px; height:22px; background:var(--border); border-radius:11px;
    transition:background .2s; position:relative;
  }
  .toggle-slider::after{
    content:''; position:absolute; top:2px; left:2px;
    width:18px; height:18px; border-radius:50%; background:#fff;
    transition:transform .2s;
  }
  .toggle-switch input:checked + .toggle-slider{ background:var(--green); }
  .toggle-switch input:checked + .toggle-slider::after{ transform:translateX(18px); }
  #adminRegToggleCard{ display:flex; align-items:center; gap:12px; }
  #adminRegToggleCard .admin-card-body{ flex:1; }

  @media (prefers-reduced-motion: reduce){
    *{ animation-duration: 0.001s !important; transition-duration: 0.001s !important; }
  }