:root{
  --bg:#eef8ec;--panel:#f8fff6;--card:#fff;--text:#9a4e00;--text-dark:#6f3600;--muted:#a66a32;
  --accent:#ed7d24;--accent-dark:#cc5f08;--accent-soft:#fff0df;--green:#d8efd3;--green-strong:#b9dfb1;
  --border:#cfe7ca;--danger:#c74a36;--success:#4f7f38;--shadow:0 10px 28px rgba(75,110,62,.10);
}
*{box-sizing:border-box}body{margin:0;font-family:Inter,"PingFang SC","Microsoft YaHei",Arial,sans-serif;background:var(--bg);color:var(--text)}
button,input,select,textarea{font:inherit}button{cursor:pointer}.app{max-width:1500px;margin:0 auto;padding:24px}
.hero{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;margin-bottom:18px}.hero-actions{display:flex;flex-direction:column;align-items:flex-end;gap:10px}
h1{margin:0;color:var(--accent-dark);font-size:40px}.subtitle{margin:8px 0 0;color:var(--muted);font-size:20px}
.install-btn{border:0;background:var(--accent);color:#fff;padding:11px 18px;border-radius:999px;font-weight:800}.install-btn:hover{background:var(--accent-dark)}
.save-pill{background:var(--green);border:1px solid var(--green-strong);padding:9px 15px;border-radius:999px;font-size:14px;color:var(--success);font-weight:700}.sound-row{display:flex;gap:12px;color:var(--text-dark);font-size:14px;font-weight:700}.sound-row input{width:auto;margin:0 5px 0 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:18px}.stat{background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:22px;box-shadow:var(--shadow)}.stat .label{font-size:15px;color:var(--muted)}.stat .value{font-size:38px;font-weight:800;margin-top:6px;color:var(--accent-dark)}.subline{margin-top:6px;color:var(--muted);font-size:13px}.compact-stats{margin-bottom:0}
.tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:22px;padding:10px;background:rgba(255,255,255,.55);border:1px solid var(--border);border-radius:24px}.tab{border:0;background:transparent;color:var(--text);padding:13px 18px;border-radius:18px;font-weight:800;font-size:18px}.tab.active{background:var(--accent);color:white}
.page{display:none}.page.active{display:block}.panel{background:var(--panel);border:1px solid var(--border);border-radius:28px;padding:26px;box-shadow:var(--shadow);margin-bottom:20px}.panel h2{margin:0 0 8px;color:var(--accent-dark);font-size:24px}.helper{font-size:16px;color:var(--muted);margin:0 0 16px;line-height:1.7}.grid{display:grid;gap:16px}.grid-3{grid-template-columns:repeat(3,1fr)}
label{display:block;font-size:16px;font-weight:800;color:var(--text-dark)}input,select,textarea{width:100%;margin-top:6px;border:1px solid var(--border);border-radius:14px;background:white;color:var(--text-dark);padding:12px 14px;outline:none}input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(237,125,36,.14)}textarea{min-height:180px;resize:vertical}
.btn{border:0;border-radius:16px;padding:12px 18px;font-weight:800;background:var(--accent);color:white}.btn:hover{background:var(--accent-dark)}.btn.secondary{background:white;color:var(--accent-dark);border:1px solid var(--accent)}.btn.secondary:hover{background:var(--accent-soft)}.btn.danger{background:var(--danger)}.btn.full{width:100%}.button-row{display:flex;gap:10px;flex-wrap:wrap}.button-row.right{justify-content:flex-end}.button-row.center{justify-content:center}.button-row.align-end{align-items:end}.top-gap{margin-top:16px}.hidden{display:none!important}
.quiz-card,.flashcard{background:var(--card);border:1px solid var(--border);border-radius:28px;padding:28px;box-shadow:var(--shadow)}.badges{display:flex;flex-wrap:wrap;gap:8px}.badge{background:var(--accent-soft);color:var(--accent-dark);border:1px solid #ffd4aa;border-radius:999px;padding:6px 10px;font-size:13px;font-weight:800}.progress-meta{display:flex;justify-content:flex-end;margin-top:10px;color:var(--muted);font-weight:700}.progress{height:10px;background:var(--green);border-radius:999px;overflow:hidden;margin:16px 0}.progress>div{height:100%;background:var(--accent);width:0;transition:.2s}.question-label{font-size:15px;color:var(--muted);margin-top:14px}.question{font-size:32px;font-weight:800;color:var(--text-dark);margin:10px 0 22px;line-height:1.4}.choices{display:grid;gap:10px}.choice{text-align:left;background:#fff;border:1px solid var(--border);border-radius:14px;padding:14px;color:var(--text-dark);font-weight:700}.choice:hover{border-color:var(--accent);background:var(--accent-soft)}.choice.correct{border-color:var(--success);background:#eef8e9;color:var(--success)}.choice.wrong{border-color:var(--danger);background:#fff0ed;color:var(--danger)}.feedback{margin-top:18px;padding:14px;border-radius:14px;background:var(--accent-soft);border-left:5px solid var(--accent);color:var(--text-dark);line-height:1.7}
.flashcard{min-height:320px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}.flash-en{font-size:36px;font-weight:900;color:var(--accent-dark);margin:22px 0}.flash-zh{font-size:24px;color:var(--text-dark);margin-bottom:12px}.example{color:var(--muted);line-height:1.7}.empty{text-align:center;padding:40px;color:var(--muted);background:white;border:1px dashed var(--green-strong);border-radius:20px;font-size:18px}
.list{display:grid;gap:12px}.item{background:white;border:1px solid var(--border);border-radius:18px;padding:16px;display:flex;justify-content:space-between;gap:14px;align-items:flex-start}.item-title{font-weight:800;color:var(--accent-dark);line-height:1.5}.item-sub{margin-top:4px;color:var(--text-dark)}.item-note{margin-top:5px;font-size:13px;color:var(--muted);line-height:1.6}.status{font-size:14px;margin-top:10px;color:var(--success);font-weight:700}
.builder-panel{border-color:#efc69d}.builder-head,.topic-manager-head,.library-head{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;flex-wrap:wrap}.step-badge{background:var(--accent);color:#fff;padding:7px 11px;border-radius:999px;font-size:13px;font-weight:800}.builder-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.builder-step{position:relative;background:#fff;border:1px solid var(--border);border-radius:20px;padding:18px 18px 18px 58px}.wide-step{grid-column:1/-1}.step-number{position:absolute;left:16px;top:16px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#fff;font-weight:900}.format-row{display:grid;grid-template-columns:220px 1fr;gap:14px;align-items:end;margin-top:12px}.check-line{display:flex;gap:8px;align-items:center;padding-bottom:12px}.check-line input{width:auto;margin:0}.preview-wrap{margin-top:16px;background:#fff;border:1px solid var(--border);border-radius:18px;padding:14px;overflow:auto}.preview-table{width:100%;border-collapse:collapse;color:var(--text-dark)}.preview-table th,.preview-table td{padding:10px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}.preview-table th{color:var(--accent-dark)}
.topic-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.topic-card{background:#fff;border:1px solid var(--border);border-radius:18px;padding:16px;text-align:left;color:var(--text-dark)}.topic-card:hover,.topic-card.active{border-color:var(--accent);background:var(--accent-soft)}.topic-card strong{display:block;color:var(--accent-dark);font-size:17px}.topic-card span{display:block;margin-top:6px;color:var(--muted);font-size:13px} .topic-card{cursor:default}.topic-main{cursor:pointer}.topic-actions{display:flex;gap:7px;margin-top:12px}.topic-action{border:1px solid var(--border);background:#fff;color:var(--accent-dark);border-radius:9px;padding:6px 10px;font-size:12px;font-weight:700;cursor:pointer}.topic-action:hover{border-color:var(--accent);background:var(--accent-soft)}.search-block{min-width:300px}.advanced-panel summary{cursor:pointer;color:var(--accent-dark);font-size:18px;font-weight:800}.footer-note{font-size:16px;color:var(--muted);text-align:center;margin:18px 0 4px}.file-label{display:inline-flex;align-items:center}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:grid;place-items:center;padding:16px;z-index:50}.modal-card{width:min(620px,100%);background:var(--panel);border:1px solid var(--border);border-radius:24px;padding:22px;box-shadow:0 25px 70px rgba(0,0,0,.22)}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h2{margin:0;color:var(--accent-dark)}.icon-btn{border:0;background:transparent;color:var(--accent-dark);font-size:28px}.install-instructions{margin-top:16px;color:var(--text-dark);line-height:1.8}.install-instructions ol{padding-left:22px}.install-instructions .install-now{margin-top:12px}
@media(max-width:900px){.stats{grid-template-columns:repeat(2,1fr)}.grid-3,.builder-grid,.topic-cards{grid-template-columns:1fr}.wide-step{grid-column:auto}.format-row{grid-template-columns:1fr}.hero{flex-direction:column}.hero-actions{align-items:flex-start}.app{padding:14px}h1{font-size:30px}.subtitle{font-size:16px}.question{font-size:24px}.stat .value{font-size:30px}.search-block{min-width:100%}}

/* Cloud Sync */
.cloud-panel{border:1px solid var(--border);}
.cloud-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.cloud-head h2{margin-bottom:6px}.cloud-status{padding:8px 13px;border-radius:999px;background:var(--green);border:1px solid var(--green-strong);color:var(--success);font-weight:800;white-space:nowrap}.cloud-status.error{background:#fff0ed;color:var(--danger);border-color:#f0b9af}.cloud-status.syncing{background:var(--accent-soft);color:var(--accent-dark);border-color:#ffd4aa}.cloud-login-grid{display:grid;grid-template-columns:1fr 1fr auto;gap:14px;align-items:end}.cloud-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.cloud-user-line{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;font-weight:800;color:var(--text-dark)}.small-btn{padding:8px 12px}.cloud-panel .check-line{display:flex;align-items:center;gap:7px;margin:0}.cloud-panel .check-line input{width:auto;margin:0}@media(max-width:900px){.cloud-login-grid{grid-template-columns:1fr}.cloud-head{flex-direction:column}.cloud-actions{display:grid;grid-template-columns:1fr}.cloud-actions .btn{width:100%}}

/* ===== Cloud 3.2 Mobile / iPhone responsive patch ===== */
html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}
body{
  overflow-x:hidden;
}
img,svg,canvas{
  max-width:100%;
}

/* iPhone portrait */
@media (max-width: 640px){
  body{
    font-size:15px;
  }

  .app{
    width:100%;
    max-width:none;
    padding:
      max(12px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      calc(88px + env(safe-area-inset-bottom))
      max(12px, env(safe-area-inset-left));
  }

  .hero{
    display:block;
    margin-bottom:14px;
  }
  .hero > div:first-child{
    width:100%;
  }
  h1{
    font-size:clamp(28px, 9vw, 38px);
    line-height:1.08;
    letter-spacing:-.5px;
    white-space:normal;
  }
  h1 span{
    display:inline-block;
    margin-top:5px;
  }
  .subtitle{
    margin-top:8px;
    font-size:15px;
    line-height:1.55;
  }

  .hero-actions{
    width:100%;
    margin-top:14px;
    align-items:stretch;
    gap:9px;
  }
  .install-btn{
    width:100%;
    min-height:48px;
    font-size:16px;
  }
  .save-pill{
    align-self:flex-start;
    padding:8px 12px;
    font-size:13px;
  }
  .sound-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
    width:100%;
  }
  .sound-row label{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:42px;
    border:1px solid var(--border);
    border-radius:14px;
    background:rgba(255,255,255,.65);
    font-size:14px;
  }
  .sound-row input{
    width:20px;
    height:20px;
  }

  .stats{
    grid-template-columns:1fr 1fr;
    gap:10px;
    margin-bottom:14px;
  }
  .stat{
    min-width:0;
    padding:15px 14px;
    border-radius:18px;
  }
  .stat .label{
    font-size:13px;
  }
  .stat .value{
    font-size:30px;
    margin-top:4px;
  }
  .subline{
    font-size:11px;
  }

  .panel,
  .quiz-card,
  .flashcard{
    border-radius:20px;
    padding:17px 14px;
    margin-bottom:14px;
  }
  .panel h2{
    font-size:21px;
  }
  .helper{
    font-size:14px;
    line-height:1.6;
    margin-bottom:12px;
  }

  /* Cloud login becomes a compact single-column mobile card */
  .cloud-panel{
    padding:17px 14px;
  }
  .cloud-head{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .cloud-head > div:first-child{
    min-width:0;
  }
  .cloud-head .helper{
    margin-bottom:0;
  }
  .cloud-status{
    flex:0 0 auto;
    padding:7px 10px;
    font-size:12px;
  }
  .cloud-login-grid{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
    margin-top:14px;
  }
  .cloud-login-grid label{
    width:100%;
  }
  .cloud-login-grid .button-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:9px;
  }
  .cloud-login-grid .btn{
    width:100%;
    min-height:46px;
  }
  .cloud-user-line{
    align-items:flex-start;
  }
  .cloud-user-line span{
    overflow-wrap:anywhere;
  }
  .cloud-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:9px;
  }
  .cloud-actions .btn{
    width:100%;
    min-height:47px;
  }
  .cloud-panel .check-line{
    min-height:44px;
    padding:8px 4px;
  }

  /* Main navigation stays reachable while studying */
  .tabs{
    position:sticky;
    bottom:max(8px, env(safe-area-inset-bottom));
    z-index:30;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:5px;
    margin:0 0 14px;
    padding:6px;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(75,110,62,.18);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
  }
  .tab{
    min-width:0;
    padding:11px 4px;
    border-radius:13px;
    font-size:13px;
    line-height:1.15;
    white-space:normal;
  }

  .grid-3,
  .builder-grid,
  .topic-cards{
    grid-template-columns:1fr;
  }
  .format-row{
    grid-template-columns:1fr;
  }
  .builder-step{
    padding:16px 13px 16px 50px;
    border-radius:16px;
  }
  .step-number{
    left:12px;
    top:13px;
  }

  label{
    font-size:14px;
  }
  input,
  select,
  textarea{
    font-size:16px; /* prevents iOS zoom on focus */
    padding:12px 12px;
    border-radius:12px;
  }
  textarea{
    min-height:150px;
  }
  .btn{
    min-height:44px;
    padding:11px 13px;
    border-radius:13px;
  }
  .button-row{
    gap:8px;
  }

  .question{
    font-size:24px;
    line-height:1.35;
    overflow-wrap:anywhere;
  }
  .choice{
    padding:13px 12px;
    line-height:1.45;
  }
  .flash-en{
    font-size:28px;
    overflow-wrap:anywhere;
  }
  .flash-zh{
    font-size:21px;
  }

  .topic-card{
    padding:14px;
  }
  .topic-card strong{
    font-size:16px;
  }
  .topic-actions{
    flex-wrap:wrap;
  }
  .topic-action{
    min-height:38px;
    flex:1 1 120px;
  }

  .library-head,
  .builder-head,
  .topic-manager-head{
    display:block;
  }
  .library-head .search-block{
    margin-top:12px;
  }
  .search-block{
    min-width:0;
    width:100%;
  }
  .item{
    display:block;
    padding:14px;
  }
  .item > .btn{
    margin-top:10px;
    width:100%;
  }

  .preview-wrap{
    padding:8px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .preview-table{
    min-width:620px;
  }

  .footer-note{
    display:none;
  }

  .modal{
    align-items:end;
    padding:0;
  }
  .modal-card{
    width:100%;
    max-height:82vh;
    overflow:auto;
    border-radius:24px 24px 0 0;
    padding:18px 16px calc(18px + env(safe-area-inset-bottom));
  }
}

/* Narrow iPhones */
@media (max-width: 390px){
  .app{
    padding-left:10px;
    padding-right:10px;
  }
  h1{
    font-size:27px;
  }
  .stats{
    gap:8px;
  }
  .stat{
    padding:13px 11px;
  }
  .stat .value{
    font-size:27px;
  }
  .sound-row label{
    font-size:13px;
  }
  .tab{
    font-size:12px;
    padding-left:2px;
    padding-right:2px;
  }
}

/* Landscape phones: avoid overly tall controls */
@media (max-width: 900px) and (orientation: landscape){
  .app{padding:12px 18px 70px}
  .hero{display:flex;flex-direction:row}
  .hero-actions{width:auto;margin-top:0;align-items:flex-end}
  .stats{grid-template-columns:repeat(4,1fr)}
  .cloud-login-grid{grid-template-columns:1fr 1fr auto}
}
/* Cloud 3.3 compact sync menu */
.cloud-modal-card{max-width:760px;width:min(92vw,760px)}
.cloud-modal-card .cloud-panel{border:0;padding:0;margin:0;box-shadow:none;background:transparent}
.cloud-menu-btn{min-width:132px}
.cloud-advanced{margin-top:14px;border-top:1px solid var(--border);padding-top:12px}
.cloud-advanced summary{cursor:pointer;font-weight:800;color:var(--accent-dark)}
@media(max-width:640px){.hero{position:relative;padding-top:2px}.hero-actions{position:static;margin-top:12px}.cloud-menu-btn{position:absolute;right:0;top:0;width:auto!important;min-width:108px;min-height:42px!important;padding:8px 12px;font-size:14px!important}.hero>div:first-child{padding-right:118px}.hero h1{font-size:clamp(26px,8vw,34px)}.cloud-modal-card{width:94vw;max-height:86vh;overflow:auto}.cloud-modal-card .cloud-actions{display:grid;grid-template-columns:1fr}.cloud-modal-card .cloud-actions .btn{width:100%}}