/* ===================================================================
   English Mind · Vocabulario 3000 — Estilo Apple minimalista
=================================================================== */

:root{
  --ink:#1c1c1e;
  --ink-soft:#6b6b70;
  --ink-faint:#a3a3a8;
  --cream:#FBF8F2;
  --card:#ffffff;
  --line:rgba(28,28,30,0.08);

  --indigo:#404db3;
  --indigo-soft:rgba(64,77,179,0.10);
  --indigo-deep:#2e3785;
  --yellow:#fed271;
  --yellow-soft:rgba(254,210,113,0.22);
  --coral:#f7593c;
  --coral-soft:rgba(247,89,60,0.12);
  --mint:#6cf68e;
  --mint-deep:#1f9a4a;
  --mint-soft:rgba(108,246,142,0.16);

  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:11px;
  --shadow-card:0 1px 2px rgba(28,28,30,0.04), 0 8px 24px rgba(28,28,30,0.06);
  --shadow-pop:0 12px 32px rgba(28,28,30,0.12);
}

:root[data-theme="dark"]{
  --ink:#f2f1ec;
  --ink-soft:#b8b8bd;
  --ink-faint:#7c7c82;
  --cream:#141416;
  --card:#1e1e21;
  --line:rgba(255,255,255,0.08);
  --indigo-soft:rgba(107,124,224,0.18);
  --yellow-soft:rgba(254,210,113,0.14);
  --coral-soft:rgba(247,89,60,0.16);
  --mint-soft:rgba(108,246,142,0.12);
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#f2f1ec;
    --ink-soft:#b8b8bd;
    --ink-faint:#7c7c82;
    --cream:#141416;
    --card:#1e1e21;
    --line:rgba(255,255,255,0.08);
    --indigo-soft:rgba(107,124,224,0.18);
    --yellow-soft:rgba(254,210,113,0.14);
    --coral-soft:rgba(247,89,60,0.16);
    --mint-soft:rgba(108,246,142,0.12);
  }
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  background:var(--cream);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Helvetica,Arial,sans-serif;
  font-size:16px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

#app{max-width:560px;margin:0 auto;min-height:100vh;display:flex;flex-direction:column;padding-bottom:92px;position:relative}

/* ---------- Header ---------- */
.topbar{padding:22px 22px 10px;display:flex;align-items:center;justify-content:space-between}
.brandmark{display:flex;align-items:center;gap:9px}
.brandmark .dot{width:9px;height:9px;border-radius:50%;background:var(--indigo)}
.brandmark span{font-size:12.5px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--ink-soft)}
.streakpill{display:flex;align-items:center;gap:5px;background:var(--yellow-soft);color:#8a5c00;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:700}
:root[data-theme="dark"] .streakpill,@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .streakpill{color:var(--yellow)}}

main{flex:1;padding:6px 20px 24px}
.view{display:none;animation:rise .35s cubic-bezier(.16,1,.3,1)}
.view.active{display:block}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

h1{font-size:28px;font-weight:700;letter-spacing:-0.02em;margin-bottom:6px}
h2{font-size:21px;font-weight:700;letter-spacing:-0.01em;margin-bottom:4px}
h3{font-size:16px;font-weight:700}
p{color:var(--ink-soft);font-size:15px}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--indigo);margin-bottom:8px}
.lede{color:var(--ink-soft);font-size:15.5px;margin-bottom:22px;max-width:46ch}

/* ---------- Cards & layout ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);padding:22px;margin-bottom:16px;box-shadow:var(--shadow-card)}
.card.tight{padding:16px 18px}
.stack{display:flex;flex-direction:column;gap:14px}
.row{display:flex;gap:12px}
.row.wrap{flex-wrap:wrap}
.spread{display:flex;align-items:center;justify-content:space-between}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;
  border-radius:14px;padding:15px 22px;font-size:16px;font-weight:600;font-family:inherit;
  transition:transform .1s ease, filter .15s ease, opacity .15s ease;letter-spacing:-0.005em}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.4;cursor:default;pointer-events:none}
.btn-primary{background:var(--indigo);color:#fff;width:100%;box-shadow:0 6px 18px rgba(64,77,179,.28)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary{background:var(--indigo-soft);color:var(--indigo);width:100%}
:root[data-theme="dark"] .btn-secondary,@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .btn-secondary{color:#a9b4ea}}
.btn-ghost{background:transparent;color:var(--ink-soft);border:1px solid var(--line)}
.btn-sm{padding:9px 16px;font-size:13.5px;border-radius:11px}
.btn-block{width:100%}
.row .btn{flex:1}

/* grading buttons */
.grade-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:18px}
.grade-btn{padding:13px 6px;font-size:13.5px;border-radius:13px;border:1.5px solid transparent;font-weight:700;cursor:pointer;font-family:inherit}
.g-fail{background:var(--coral-soft);color:var(--coral)}
.g-mid{background:var(--yellow-soft);color:#8a5c00}
:root[data-theme="dark"] .g-mid,@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .g-mid{color:var(--yellow)}}
.g-pass{background:var(--mint-soft);color:var(--mint-deep)}
.grade-btn:active{transform:scale(.96)}

/* ---------- Progress bar ---------- */
.progress-track{height:6px;background:var(--line);border-radius:99px;overflow:hidden;margin-bottom:20px}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--indigo),#6c7ae0);border-radius:99px;transition:width .35s ease}

/* ---------- Ring ---------- */
.ringwrap{display:flex;align-items:center;gap:20px}
.ring{position:relative;width:104px;height:104px;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring .ringnum{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .ringnum b{font-size:22px;color:var(--indigo);letter-spacing:-0.02em}
.ring .ringnum span{font-size:10px;color:var(--ink-faint);text-transform:uppercase;letter-spacing:.5px}
.stat-list{flex:1;display:flex;flex-direction:column;gap:9px}
.stat-line{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-soft)}
.stat-line b{color:var(--ink);font-size:15px}

/* ---------- Day grid ---------- */
.daygrid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-top:14px}
.daycell{aspect-ratio:1;border-radius:11px;background:var(--indigo-soft);display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:700;color:var(--indigo);cursor:pointer;border:1.5px solid transparent}
.daycell.done{background:var(--mint-soft);color:var(--mint-deep)}
.daycell.current{border-color:var(--indigo);background:var(--indigo);color:#fff}
.daycell.locked{background:var(--line);color:var(--ink-faint);cursor:default}

/* ---------- Flashcard ---------- */
.flashwrap{margin-bottom:6px}
.flashcard{position:relative;border-radius:26px;cursor:pointer}
.flash-face{border-radius:26px;padding:28px 26px;display:flex;flex-direction:column;min-height:280px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-pop)}
.flash-front{align-items:center;justify-content:center;text-align:center;gap:14px}
.flash-back{justify-content:flex-start;gap:14px}
.flip-hint{text-align:center;font-size:11.5px;color:var(--ink-faint);
  text-transform:uppercase;letter-spacing:1px;margin-top:auto;padding-top:14px}

.dayflag{font-size:11.5px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--indigo-deep);
  background:var(--indigo-soft);padding:4px 12px;border-radius:999px;display:inline-block}
.card-image{width:100%;max-width:280px;height:160px;object-fit:cover;border-radius:18px;
  box-shadow:0 6px 20px rgba(28,28,30,.12);margin:2px 0}
.photo-credit{font-size:11px;color:var(--ink-faint);text-align:center;margin-top:8px}
.photo-credit a{color:var(--ink-faint);text-decoration:underline}
.word-en{font-size:40px;font-weight:800;letter-spacing:-0.02em;color:var(--ink)}
.word-pos{font-size:12.5px;color:var(--ink-faint);font-style:italic}
.speak-btn{width:52px;height:52px;border-radius:50%;background:var(--indigo);color:#fff;border:none;font-size:20px;
  display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 6px 16px rgba(64,77,179,.3)}
.speak-btn:active{transform:scale(.92)}
.speak-btn.small{width:36px;height:36px;font-size:14px;box-shadow:none;background:var(--indigo-soft);color:var(--indigo)}

.word-es{font-size:22px;font-weight:600;color:var(--indigo-deep)}
:root[data-theme="dark"] .word-es,@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .word-es{color:#a9b4ea}}
.example-box{background:var(--cream);border-radius:14px;padding:14px 16px;font-size:15px}
.example-box .en{color:var(--ink);font-weight:600;margin-bottom:2px;display:flex;align-items:center;gap:8px}
.example-box .es{color:var(--ink-soft);font-size:13.5px}

.colloc{display:flex;flex-direction:column;gap:10px}
.colloc-item{border-left:3px solid var(--yellow);padding-left:12px}
.colloc-item .phrase{font-weight:700;font-size:14.5px;color:var(--ink)}
.colloc-item .ex{font-size:13.5px;color:var(--ink-soft)}
.colloc-item .exs{font-size:12.5px;color:var(--ink-faint)}

.section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--ink-faint);margin-bottom:8px}

/* ---------- Placement test ---------- */
.qcounter{font-size:13px;color:var(--ink-faint);margin-bottom:6px}
.opt-list{display:flex;flex-direction:column;gap:10px;margin-top:16px}
.opt-btn{background:var(--card);border:1.5px solid var(--line);border-radius:14px;padding:15px 16px;font-size:15.5px;
  font-family:inherit;text-align:left;cursor:pointer;color:var(--ink)}
.opt-btn:active{transform:scale(.985)}
.opt-btn.correct{background:var(--mint-soft);border-color:var(--mint-deep);color:var(--mint-deep)}
.opt-btn.wrong{background:var(--coral-soft);border-color:var(--coral);color:var(--coral)}

/* ---------- Bottom nav ---------- */
.navbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;
  background:var(--card);border-top:1px solid var(--line);display:flex;justify-content:space-around;
  padding:10px 8px calc(10px + env(safe-area-inset-bottom));z-index:50}
.navbtn{background:none;border:none;font-family:inherit;color:var(--ink-faint);font-size:11px;font-weight:600;
  display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;padding:4px 10px;border-radius:12px}
.navbtn .ic{font-size:20px}
.navbtn.on{color:var(--indigo)}
.navbtn.on .ic{filter:none}

/* ---------- Misc ---------- */
.center{text-align:center}
.big-emoji{font-size:46px}
.tag{display:inline-block;background:var(--indigo-soft);color:var(--indigo);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:700}
.tag.mint{background:var(--mint-soft);color:var(--mint-deep)}
.tag.coral{background:var(--coral-soft);color:var(--coral)}
.divider{height:1px;background:var(--line);margin:18px 0}
input[type=text],input[type=email]{width:100%;background:var(--cream);border:1.5px solid var(--line);border-radius:13px;
  color:var(--ink);font-size:16px;padding:14px 16px;font-family:inherit;outline:none}
input:focus{border-color:var(--indigo)}
label{font-size:13px;font-weight:600;color:var(--ink-soft);margin-bottom:6px;display:block}
.field{margin-bottom:16px}
.note{font-size:12.5px;color:var(--ink-faint);text-align:center;margin-top:10px}
a{color:var(--indigo)}
.searchchip{display:inline-flex;align-items:center;gap:6px;background:var(--card);border:1.5px solid var(--line);
  border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;margin:4px 6px 4px 0}
.searchchip:hover{border-color:var(--indigo)}
.explore-item{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--line)}
.explore-item:last-child{border-bottom:none}
.explore-thumb{width:44px;height:44px;border-radius:10px;object-fit:cover;flex-shrink:0}
.explore-info{flex:1;min-width:0}
.explore-item .en{font-weight:700;font-size:15px}
.explore-item .es{font-size:13px;color:var(--ink-faint)}
.status-mastered{color:var(--mint-deep);font-size:12px;font-weight:700}
.status-progress{color:var(--indigo);font-size:12px;font-weight:700}
.status-new{color:var(--ink-faint);font-size:12px;font-weight:700}

/* ---------- Insignias ---------- */
.badge-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 16px}
.badge-cell{background:var(--card);border:1.5px solid var(--line);border-radius:16px;padding:14px 8px;text-align:center;opacity:.5}
.badge-cell.earned{opacity:1;border-color:var(--yellow);background:var(--yellow-soft);box-shadow:0 4px 14px rgba(254,210,113,.25)}
.badge-cell-emoji{font-size:26px;margin-bottom:4px;line-height:1}
.badge-cell-n{font-size:13px;font-weight:800;color:var(--ink)}
.badge-cell-label{font-size:10px;color:var(--ink-faint);margin-top:2px;line-height:1.3}
.badge-cell.earned .badge-cell-label{color:#8a5c00;font-weight:600}
:root[data-theme="dark"] .badge-cell.earned .badge-cell-label,@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .badge-cell.earned .badge-cell-label{color:var(--yellow)}}

.badge-overlay{position:fixed;inset:0;background:rgba(28,28,30,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:100;padding:24px}
.badge-modal{background:var(--card);border-radius:28px;padding:36px 28px 28px;max-width:340px;width:100%;
  text-align:center;box-shadow:var(--shadow-pop);animation:badgepop .4s cubic-bezier(.16,1,.3,1)}
@keyframes badgepop{from{opacity:0;transform:scale(.85) translateY(10px)}to{opacity:1;transform:none}}
.badge-modal-emoji{font-size:64px;margin-bottom:10px;animation:badgebounce .6s ease .1s 1 both}
@keyframes badgebounce{0%{transform:scale(0)}60%{transform:scale(1.15)}100%{transform:scale(1)}}
.badge-modal-tag{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--coral);margin-bottom:6px}
.badge-modal h2{margin-bottom:6px}
.badge-modal p{margin-bottom:22px;font-size:14.5px}

.spinner{width:28px;height:28px;border-radius:50%;border:3px solid var(--indigo-soft);border-top-color:var(--indigo);
  animation:spin .8s linear infinite;margin:40px auto}
@keyframes spin{to{transform:rotate(360deg)}}

.toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);background:var(--ink);color:var(--cream);
  padding:11px 20px;border-radius:12px;font-size:13.5px;font-weight:600;z-index:80;opacity:0;pointer-events:none;
  transition:opacity .25s ease}
.toast.show{opacity:1}