/* Word Assistant 3 — mobile first, light and dark */
:root {
  /* light: soft blue page, white boxes, blue header */
  --bg: #e9f0fa; --fg: #1b2433; --muted: #5d6a80; --box: #ffffff; --line: #cfdcee; --inset: #f2f6fc;
  --title: #1e4483; --accent: #2563c9; --new: #1d6fd8; --repeat: #6b7280; --red: #d23b3b; --learnt: #198754;
  --right: #198754; --wrong: #c93434; --radius: 12px;
  --head-bg: linear-gradient(90deg, #1f55b0, #2f76d8); --head-fg: #ffffff; --head-line: rgba(255,255,255,.55);
  --shadow: 0 1px 3px rgba(30, 64, 128, .10), 0 4px 14px rgba(30, 64, 128, .06);
  --ok-bg: #e7f6ec; --ok-fg: #135c33; --ok-line: #bfe5cc; --err-bg: #fdecec; --err-fg: #8a1f1f; --err-line: #f5c2c2;
  color-scheme: light;
}
/* dark (a dim slate blue, not black): chosen in My account, or automatic when the device is in dark mode */
:root[data-theme="dark"] {
  --bg: #2a3446; --fg: #f2f5fa; --muted: #c3ccda; --box: #37445c; --line: #62738f; --inset: #2f3a4e;
  --title: #dce8ff; --accent: #93bdff; --new: #93bdff; --repeat: #c8cfda; --red: #ff8585; --learnt: #66d9a0;
  --head-bg: linear-gradient(90deg, #2d4673, #3a5c94); --head-fg: #f4f7fc; --head-line: rgba(244,247,252,.5);
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(150, 190, 255, .10);
  --ok-bg: #24483a; --ok-fg: #c8f5dd; --ok-line: #3c7a5c; --err-bg: #563040; --err-fg: #ffd6d6; --err-line: #8a4b5c;
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
  --bg: #2a3446; --fg: #f2f5fa; --muted: #c3ccda; --box: #37445c; --line: #62738f; --inset: #2f3a4e;
  --title: #dce8ff; --accent: #93bdff; --new: #93bdff; --repeat: #c8cfda; --red: #ff8585; --learnt: #66d9a0;
  --head-bg: linear-gradient(90deg, #2d4673, #3a5c94); --head-fg: #f4f7fc; --head-line: rgba(244,247,252,.5);
  --shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 1px rgba(150, 190, 255, .10);
  --ok-bg: #24483a; --ok-fg: #c8f5dd; --ok-line: #3c7a5c; --err-bg: #563040; --err-fg: #ffd6d6; --err-line: #8a4b5c;
  color-scheme: dark;
  }
}

/* ---- more color themes (My account → Colors) ---- */
/* light ones: only what differs from the light blue default */
:root[data-theme="ocean"] {
  --bg: #e4f3f5; --line: #bfdfe4; --inset: #f0f9fa; --title: #0f5560; --accent: #0e7c8a; --new: #0e7c8a;
  --head-bg: linear-gradient(90deg, #0d6b78, #15959f); --shadow: 0 1px 3px rgba(14, 90, 100, .12), 0 4px 14px rgba(14, 90, 100, .06);
}
:root[data-theme="forest"] {
  --bg: #e9f3e6; --line: #c9e0c2; --inset: #f3f9f1; --title: #285a2b; --accent: #2e7d32; --new: #2e7d32;
  --head-bg: linear-gradient(90deg, #2c6a30, #449340); --shadow: 0 1px 3px rgba(40, 90, 40, .12), 0 4px 14px rgba(40, 90, 40, .06);
}
:root[data-theme="sunset"] {
  --bg: #fdeee3; --line: #f0d2bd; --inset: #fff7f0; --title: #8a3a10; --accent: #c0531a; --new: #c0531a;
  --head-bg: linear-gradient(90deg, #bf4f17, #e5833a); --shadow: 0 1px 3px rgba(150, 70, 20, .12), 0 4px 14px rgba(150, 70, 20, .06);
}
:root[data-theme="lavender"] {
  --bg: #efeafa; --line: #d9cff0; --inset: #f8f5fd; --title: #4a2e89; --accent: #6943c3; --new: #6943c3;
  --head-bg: linear-gradient(90deg, #5636a6, #8160d9); --shadow: 0 1px 3px rgba(80, 50, 150, .12), 0 4px 14px rgba(80, 50, 150, .06);
}
:root[data-theme="rose"] {
  --bg: #fbeaf0; --line: #efcddb; --inset: #fdf5f8; --title: #87224e; --accent: #bf326d; --new: #bf326d;
  --head-bg: linear-gradient(90deg, #a92860, #d65088); --shadow: 0 1px 3px rgba(150, 40, 90, .12), 0 4px 14px rgba(150, 40, 90, .06);
}
:root[data-theme="sand"] {
  --bg: #f3ead9; --box: #fffaf0; --fg: #3a3126; --muted: #77684f; --line: #e2d3b4; --inset: #faf2e2; --title: #6a4c1d;
  --accent: #97661b; --new: #97661b; --head-bg: linear-gradient(90deg, #7a5722, #a27c3c);
  --shadow: 0 1px 3px rgba(110, 80, 30, .12), 0 4px 14px rgba(110, 80, 30, .06);
}
:root[data-theme="slate"] {
  --bg: #eceff3; --line: #d4d9e0; --inset: #f6f7f9; --title: #2e3949; --accent: #45618c; --new: #3c6cb2;
  --head-bg: linear-gradient(90deg, #3b485c, #57667e); --shadow: 0 1px 3px rgba(40, 50, 70, .12), 0 4px 14px rgba(40, 50, 70, .06);
}
/* dark ones: every color */
:root[data-theme="midnight"] {
  --bg: #18202e; --fg: #e8edf5; --muted: #a9b4c6; --box: #263248; --line: #4a5a76; --inset: #1d2638;
  --title: #cfe0ff; --accent: #82b4ff; --new: #82b4ff; --repeat: #b5bdca; --red: #ff7676; --learnt: #55cf95;
  --head-bg: linear-gradient(90deg, #1d2d4d, #24406e); --head-fg: #eef3fb; --head-line: rgba(238,243,251,.45);
  --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 0 0 1px rgba(130, 180, 255, .08);
  --ok-bg: #173523; --ok-fg: #b6f0cd; --ok-line: #24553a; --err-bg: #3d1d1d; --err-fg: #ffc9c9; --err-line: #6b2b2b;
  color-scheme: dark;
}
:root[data-theme="graphite"] {
  --bg: #242628; --fg: #eceef0; --muted: #b5babf; --box: #323539; --line: #5b6066; --inset: #2a2d30;
  --title: #f2f3f5; --accent: #9ec5ff; --new: #9ec5ff; --repeat: #c5c9ce; --red: #ff8a80; --learnt: #7ddc9f;
  --head-bg: linear-gradient(90deg, #2e3135, #42464c); --head-fg: #f2f3f5; --head-line: rgba(242,243,245,.45);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 0 0 1px rgba(255, 255, 255, .05);
  --ok-bg: #1f3a2a; --ok-fg: #c4f0d4; --ok-line: #33603f; --err-bg: #4a2626; --err-fg: #ffd3d3; --err-line: #7a3b3b;
  color-scheme: dark;
}
:root[data-theme="contrast"] {
  --bg: #000000; --fg: #ffffff; --muted: #e6e6e6; --box: #000000; --line: #ffffff; --inset: #111111;
  --title: #ffff4d; --accent: #ffff00; --new: #6cd3ff; --repeat: #ffffff; --red: #ff7070; --learnt: #6dff9d;
  --right: #007a36; --wrong: #c62828;
  --head-bg: #000000; --head-fg: #ffff00; --head-line: #ffff00; --shadow: none;
  --ok-bg: #002b12; --ok-fg: #ffffff; --ok-line: #6dff9d; --err-bg: #3a0000; --err-fg: #ffffff; --err-line: #ff7070;
  color-scheme: dark;
}
:root[data-theme="contrast"] .top { border-bottom: 2px solid #ffff00; }
:root[data-theme="contrast"] .btn.primary { color: #000000; }
:root[data-theme="contrast"] a { text-decoration: underline; }
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 17px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans", "Noto Sans Arabic", sans-serif;
       min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: .4em 0 .6em; color: var(--title); }
h2 { font-size: 1.15rem; margin: 1.2em 0 .5em; color: var(--title); }

/* header + menu */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 1rem;
       background: var(--head-bg); color: var(--head-fg); position: sticky; top: 0; z-index: 10; box-shadow: 0 2px 8px rgba(20, 50, 110, .18); }
.brand { font-weight: 700; text-decoration: none; color: var(--head-fg); letter-spacing: .01em; }
.guest a { margin-left: 1rem; color: var(--head-fg); }
.menu { position: relative; }
.menu summary { list-style: none; cursor: pointer; padding: .35rem .8rem; border: 1px solid var(--head-line); border-radius: 8px;
                user-select: none; color: var(--head-fg); }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::before { content: "☰ "; }
.menu nav { position: absolute; right: 0; top: 2.6rem; background: var(--box); border: 1px solid var(--line); border-radius: var(--radius);
            box-shadow: 0 8px 24px rgba(0,0,0,.15); min-width: 14rem; padding: .4rem 0; display: flex; flex-direction: column; }
.menu nav a, .menu nav .linklike { padding: .55rem 1rem; text-decoration: none; color: var(--fg); text-align: left; }
.menu nav a:hover, .menu nav .linklike:hover { background: var(--bg); }
.menu nav form { margin: 0; border-top: 1px solid var(--line); }
.linklike { background: none; border: 0; font: inherit; cursor: pointer; width: 100%; }

.page { width: 100%; max-width: 46rem; margin: 0 auto; padding: 1rem; flex: 1; }
.foot { text-align: center; color: var(--muted); font-size: .85rem; padding: 1.2rem 1rem 1.6rem; }
.foot a { color: var(--muted); }
.box { background: var(--box); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin: 0 0 1rem; box-shadow: var(--shadow); }
.small, .hint { color: var(--muted); font-size: .88rem; }
.hint { font-weight: normal; }
.center { text-align: center; }
.flash { padding: .7rem 1rem; border-radius: 10px; background: var(--ok-bg); color: var(--ok-fg); border: 1px solid var(--ok-line); }
.flash.error { background: var(--err-bg); color: var(--err-fg); border-color: var(--err-line); }

/* buttons + forms */
.btn { display: inline-block; padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid var(--line); background: var(--box); color: var(--fg);
       font: inherit; text-decoration: none; cursor: pointer; margin: .2rem .2rem .2rem 0; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.danger { background: var(--wrong); border-color: var(--wrong); color: #fff; }
.btn:disabled, form.busy .btn { opacity: .6; }
.form label { display: block; margin: 0 0 .9rem; font-weight: 600; }
.form label.choice { font-weight: normal; display: flex; gap: .55rem; align-items: baseline; }
.form input:not([type=checkbox]):not([type=radio]), .form select, .form textarea {
  display: block; width: 100%; margin-top: .3rem; padding: .6rem .7rem; font: inherit; font-size: 16px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--inset); color: var(--fg); }
.form textarea { resize: vertical; }
.form fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 0 0 1rem; padding: .6rem .9rem; }
.form legend { font-weight: 600; padding: 0 .3rem; }
.row { display: flex; gap: 1rem; flex-wrap: wrap; } .row > label { flex: 1 1 10rem; }
.searchbar { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; }
.searchbar input { flex: 2 1 12rem; margin: 0 !important; } .searchbar select { flex: 1 1 8rem; margin: 0 !important; width: auto !important; }
.captcha { display: flex; gap: .6rem; align-items: center; margin-top: .3rem; }
.captcha img { border-radius: 8px; cursor: pointer; flex: none; }
.captcha input { margin: 0 !important; max-width: 9rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.inline { display: inline; }
.danger-zone summary { cursor: pointer; color: var(--wrong); font-weight: 600; }
.danger-zone form { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .3rem; }
.replace-only { display: none !important; }
form.replace .replace-only { display: block !important; }

/* tables */
table.list { width: 100%; border-collapse: collapse; background: var(--box); border-radius: var(--radius); overflow: hidden; margin-bottom: 1rem;
             box-shadow: var(--shadow); }
.list th, .list td { padding: .5rem .6rem; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; overflow-wrap: break-word; }
.list th { font-size: .85rem; color: var(--muted); background: var(--inset); }
.list td:first-child { min-width: 7rem; }
.clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* "My cards" on a phone: one stacked row per card (word, then the meaning, then the box) */
@media (max-width: 600px) {
  table.cards thead { display: none; }
  table.cards, table.cards tbody, table.cards tr { display: block; width: 100%; }
  table.cards tr { padding: .6rem .85rem; border-bottom: 1px solid var(--line); }
  table.cards td { display: block; border: 0; padding: 0; min-width: 0; }
  table.cards tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .7rem; }
  table.cards td.pick { grid-row: 1 / span 3; padding-top: .2rem; }
  table.cards td:nth-child(2) { font-weight: 600; font-size: 1.05rem; }
  table.cards td:nth-child(3) { color: var(--muted); font-size: .92rem; margin-top: .1rem; }
  table.cards td.nowrap { font-size: .78rem; color: var(--muted); margin-top: .15rem; }
}
.nowrap { white-space: nowrap; } .num { text-align: right; }
.pager { text-align: center; }
table.bars { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
.bars th { text-align: left; font-weight: normal; font-size: .9rem; white-space: nowrap; padding: .15rem .6rem .15rem 0; width: 1%; }
.bars td { padding: .15rem 0; } .bars td.num { width: 3rem; padding-left: .5rem; font-size: .9rem; }
progress { width: 100%; height: .9rem; appearance: none; border: 0; border-radius: 6px; background: var(--line); overflow: hidden; }
progress::-webkit-progress-bar { background: var(--line); border-radius: 6px; }
progress::-webkit-progress-value { background: var(--accent); border-radius: 6px; }
progress::-moz-progress-bar { background: var(--accent); border-radius: 6px; }
progress.red::-webkit-progress-value { background: var(--red); } progress.red::-moz-progress-bar { background: var(--red); }
progress.learnt::-webkit-progress-value { background: var(--learnt); } progress.learnt::-moz-progress-bar { background: var(--learnt); }

/* study page */
.tip { background: var(--box); border: 1px dashed var(--line); border-radius: 10px; padding: .5rem .8rem; font-size: .92rem; color: var(--muted); }
.counters { list-style: none; padding: 0; margin: 0 0 .8rem; display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.counters li { background: var(--box); border: 1px solid var(--line); border-radius: 10px; padding: .35rem .3rem; text-align: center;
               font-size: .72rem; color: var(--muted); line-height: 1.25; box-shadow: var(--shadow); }
.counters b { display: block; font-size: 1.15rem; }
.counters .new b { color: var(--new); } .counters .repeat b { color: var(--repeat); }
.counters .red b { color: var(--red); } .counters .learnt b { color: var(--learnt); }
.card { background: var(--box); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem .6rem; box-shadow: var(--shadow); }
.word { font-size: 2rem; margin: .1rem 0 .7rem; text-align: center; overflow-wrap: anywhere; }
.word a { text-decoration: none; }
.word.new a { color: var(--new); } .word.repeat a { color: var(--repeat); } .word.red a { color: var(--red); }
[hidden] { display: none !important; }
.wordrow { display: flex; align-items: center; justify-content: center; gap: .5rem; }
.speak { flex: none; width: 2.6rem; height: 2.6rem; margin-bottom: .6rem; border: 1px solid var(--line); border-radius: 999px;
         background: var(--inset); color: var(--fg); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.speak:hover, .speak:focus-visible { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); outline: none; }
.wordinfo .speak { margin: 0 .3rem 0 0; vertical-align: middle; }
.speak.speaking { border-color: var(--accent); background: var(--box); }
.speak-note { font-size: .85rem; color: var(--muted); margin: -.3rem 0 .6rem; text-align: center; } .speak-note:empty { display: none; }
.today { margin: 0 0 .5rem; text-align: center; font-size: .92rem; color: var(--muted); }
.today b { color: var(--fg); } .today .met, .today .met b { color: var(--learnt); } .today .streak { color: var(--fg); }
.bulkbar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .6rem 0; }
.bulkbar select, .bulkbar input[type=password] { width: auto !important; margin: 0 !important; font-size: 16px; }   /* 16px: no zoom on iPhone */
.bulkbar .tickall { display: inline-flex; gap: .35rem; align-items: center; margin: 0; }
.bulkbar .pw { display: inline-flex; gap: .4rem; align-items: center; }
form.ready:not(.deleting) .bulkbar .pw, form.ready:not(.moving) .bulkbar .lvl { display: none; }
.list th.pick, .list td.pick { width: 2rem; min-width: 0 !important; padding-right: 0; }
.meaning { position: relative; min-height: 32vh; max-height: 50vh; overflow: auto; border-radius: 10px; background: var(--inset); border: 1px solid var(--line);
           padding: .8rem 1rem; font-size: 1.05rem; cursor: pointer; white-space: normal; }
.meaning .text { visibility: hidden; }
.meaning .cover { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: .95rem; }
.meaning.shown { cursor: auto; } .meaning.shown .text { visibility: visible; } .meaning.shown .cover { display: none; }
.cardlinks { text-align: center; margin: .6rem 0 0; }
.answer { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; margin-top: 1rem; }
.answer form { margin: 0; }
.answer .btn { width: 100%; margin: 0; min-height: 3.6rem; font-size: 1.15rem; font-weight: 700; color: #fff; border: 0; }
.answer .btn.wrong { background: var(--wrong); } .answer .btn.right { background: var(--right); }
.flipped { min-width: 2.4rem; text-align: center; font-weight: 700; color: var(--learnt); }
@media (max-width: 600px) {
  body.study .page { padding-bottom: 6.5rem; }
  body.study .answer { position: fixed; left: 0; right: 0; bottom: 0; padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
                       background: var(--box); border-top: 1px solid var(--line); margin: 0; z-index: 5; }
  .word { font-size: 1.7rem; }
}
.done { text-align: center; }
.wordinfo { text-align: center; } .wordinfo audio { width: 100%; max-width: 22rem; margin: .4rem 0 1rem; }
.links { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.links a { display: inline-block; padding: .45rem .8rem; border: 1px solid var(--line); border-radius: 999px; text-decoration: none; }
.prose ul { padding-left: 1.2rem; }

/* Install the app */
.install { margin-top: 1rem; } .install p { margin: .4rem 0; }
.hidden-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }