:root{
    --bg:#0f1720; --card:#182430; --accent:#e0333f; --accent2:#2fae6a;
    --text:#eef2f5; --muted:#8fa3b3; --warn:#e0a733; --border:#26364a;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;background:var(--bg);color:var(--text);
    font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;
    min-height:100vh;}
  #app{max-width:520px;margin:0 auto;padding:14px 14px 90px;min-height:100vh;}
  h1{font-size:1.15rem;margin:6px 0 14px;display:flex;align-items:center;gap:8px;}
  h1 .flag{font-size:1.3rem;}
  .card{background:var(--card);border:1px solid var(--border);border-radius:14px;
    padding:16px;margin-bottom:14px;}
  .muted{color:var(--muted);font-size:.85rem;}
  .row{display:flex;gap:8px;align-items:center;}
  .row.wrap{flex-wrap:wrap;}
  .space-between{justify-content:space-between;}
  button{font-family:inherit;font-size:1rem;border:none;border-radius:10px;
    padding:12px 16px;cursor:pointer;font-weight:600;}
  .btn-primary{background:var(--accent);color:#fff;width:100%;}
  .btn-secondary{background:#233245;color:var(--text);}
  .btn-ghost{background:transparent;color:var(--muted);border:1px solid var(--border);}
  .btn-small{padding:8px 12px;font-size:.85rem;border-radius:8px;}
  button:disabled{opacity:.45;}
  input[type=text]{width:100%;padding:13px;border-radius:10px;border:1px solid var(--border);
    background:#0d1720;color:var(--text);font-size:1.05rem;}
  .select-input{padding:10px;border-radius:10px;border:1px solid var(--border);
    background:#0d1720;color:var(--text);font-size:.85rem;}
  .btn-ghost.lang-active{background:var(--accent2);color:#fff;border-color:var(--accent2);}
  .settings-subtab-btn.active{background:var(--accent2);color:#fff;border-color:var(--accent2);}
  .word-row{display:flex;justify-content:space-between;align-items:center;
    padding:9px 0;border-bottom:1px solid var(--border);}
  .word-row:last-child{border-bottom:none;}
  .word-row-tr{font-weight:700;}
  .word-row-trans{color:var(--muted);font-size:.8rem;margin-top:1px;}
  .word-row-score{font-size:.75rem;font-weight:700;white-space:nowrap;padding-left:10px;}
  table.vocab-word-list{width:100%;border-collapse:collapse;margin:8px 0;font-size:.85rem;}
  table.vocab-word-list td{padding:5px 8px;border-bottom:1px solid var(--border);}
  table.vocab-word-list td:first-child{width:45%;}
  table.vocab-word-list tr:last-child td{border-bottom:none;}
  .cefr-section{border:1px solid var(--border);border-radius:10px;margin-bottom:8px;overflow:hidden;}
  .cefr-section summary{list-style:none;cursor:pointer;padding:10px 12px;display:flex;
    justify-content:space-between;align-items:center;background:#0d1720;font-weight:700;font-size:.85rem;}
  .cefr-section summary::-webkit-details-marker{display:none;}
  .cefr-section summary::after{content:"▸";color:var(--muted);transition:transform .15s;margin-left:8px;}
  .cefr-section[open] summary::after{transform:rotate(90deg);}
  .cefr-section .cefr-section-body{padding:0 12px;}
  .cefr-section .word-row{padding:8px 0;}
  textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);
    background:#0d1720;color:var(--text);font-size:.95rem;font-family:inherit;resize:vertical;}
  .tabbar{position:fixed;bottom:0;left:0;right:0;background:#101b26;border-top:1px solid var(--border);
    display:flex;max-width:520px;margin:0 auto;}
  .tabbar button{flex:1;background:transparent;color:var(--muted);border-radius:0;padding:12px 4px;
    font-size:.75rem;display:flex;flex-direction:column;align-items:center;gap:3px;font-weight:500;}
  .tabbar button.active{color:var(--accent);}
  .tabbar .ic{font-size:1.25rem;}
  .hidden{display:none !important;}
  .badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.72rem;font-weight:700;}
  .badge-word{background:#1d3a2e;color:var(--accent2);}
  .badge-sentence{background:#3a2a1d;color:var(--warn);}
  .badge-question{background:#1d2f3a;color:#5fc4e8;}
  .tr-word{font-size:1.7rem;font-weight:700;margin:10px 0 4px;line-height:1.3;}
  .tr-word.sentence{font-size:1.3rem;}
  .level-bar{height:6px;border-radius:4px;background:#0d1720;overflow:hidden;margin-top:8px;}
  .word-chip{display:inline-block;padding:2px 8px;border-radius:12px;background:#233245;
    cursor:pointer;margin:2px 2px 2px 0;font-size:.8rem;}
  .word-chip:active{background:#2c3d54;}
  .word-chip.revealed{background:#3a2a1d;color:var(--warn);cursor:default;}
  .cefr-macro{margin-bottom:18px;}
  .cefr-macro-title{font-weight:700;font-size:.95rem;margin-bottom:6px;}
  .cefr-bars{display:flex;gap:6px;}
  .cefr-bar{flex:1;display:flex;flex-direction:column;align-items:center;}
  .cefr-track{width:100%;height:70px;background:#0d1720;border-radius:4px;position:relative;overflow:hidden;}
  .cefr-fill{position:absolute;bottom:0;left:0;right:0;border-radius:0 0 4px 4px;}
  .cefr-pct{font-size:.68rem;color:var(--muted);margin-top:3px;}
  .cefr-lbl{font-size:.6rem;color:var(--muted);text-align:center;margin-top:1px;line-height:1.15;}
  .level-bar-fill{height:100%;background:linear-gradient(90deg,#e0333f,#e0a733,#2fae6a);}
  .feedback{border-radius:10px;padding:12px;margin-top:10px;font-size:.95rem;}
  .feedback.correct{background:#123322;color:#7be3a5;}
  .feedback.wrong{background:#331515;color:#f3a3a3;}
  .feedback.pending{background:#221f14;color:var(--warn);}
  .accepted-list{font-size:.85rem;color:var(--muted);margin-top:4px;}
  .statbar{display:flex;align-items:flex-end;gap:4px;height:120px;margin:26px 0 6px;}
  .statbar .col{flex:1;background:#233245;border-radius:4px 4px 0 0;position:relative;min-height:2px;}
  .statbar .col.words{background:#2fae6a;}
  .statbar .col.sentences{background:#e0a733;}
  .statlbl{display:flex;gap:4px;font-size:.65rem;color:var(--muted);}
  .statlbl div{flex:1;text-align:center;}
  .kpi{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;}
  .kpi .box{background:#0d1720;border-radius:10px;padding:12px;text-align:center;}
  .kpi .box .num{font-size:1.5rem;font-weight:700;}
  .kpi .box .lbl{font-size:.72rem;color:var(--muted);}
  .modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;
    justify-content:center;z-index:50;}
  .modal{background:var(--card);border-radius:16px 16px 0 0;padding:18px;width:100%;max-width:520px;
    max-height:80vh;overflow-y:auto;}
  .modal h3{margin-top:0;}
  .chatline{margin:8px 0;padding:10px 12px;border-radius:10px;font-size:.9rem;line-height:1.4;}
  .chatline.user{background:#1d2b3a;}
  .chatline.ai{background:#122333;}
  a{color:var(--accent2);}
  .peak-tab{position:fixed;top:0;right:14px;z-index:70;padding:3px 10px;border-radius:0 0 8px 8px;
    font-size:.65rem;font-weight:700;letter-spacing:.02em;color:#fff;cursor:default;
    box-shadow:0 2px 6px rgba(0,0,0,.3);}
  .peak-tab.peak{background:var(--accent);}
  .peak-tab.dal{background:var(--accent2);}
  .toplink{background:none;border:none;color:var(--muted);font-size:.8rem;text-decoration:underline;padding:0;}