/* World Capitals — styles. Colours come from themes.js (CSS variables set on <html>). */
:root {
  /* Fallbacks only (Sweden, light) in case themes.js fails to load. */
  --bg-base:#EEF6FB; --bg-surface:#FFFFFF; --text-main:#0A2540; --text-muted:#4F6B84; --primary:#006AA7; --secondary:#0E9F8E;
  --accent:#A87800; --danger:#DC2626; --sun:#FECC02; --ink:#00456F; --border-color:#CFE3F1;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 10px 28px -12px rgba(0,70,120,.2); --radius-lg:28px; --radius-md:20px;
  --chrome-bg:color-mix(in srgb,var(--bg-surface) 84%,transparent);
  --progress-fill:linear-gradient(90deg,#006AA7,#FECC02); --progress-bg:color-mix(in srgb,var(--primary) 12%,transparent);
  --card-back-grad:linear-gradient(165deg,#0A7DC4,#004E7C); --primary-btn-grad:linear-gradient(135deg,#006AA7,#1984C6);
  --primary-panel-grad:linear-gradient(135deg,#004E7C,#006AA7); --test-grad:linear-gradient(135deg,#006AA7,#3B4FD8);
  --good-grad:linear-gradient(135deg,#0B8577,#2DD4BF); --retry-grad:linear-gradient(135deg,#DC2626,#F87171);
  --hard-grad:linear-gradient(135deg,#C2710C,#FBBF24); --easy-grad:linear-gradient(135deg,#2563EB,#60A5FA);
  --due-grad:linear-gradient(135deg,#F59E0B,#E11D48);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--bg-base); }
body { margin: 0; min-height: 100vh; min-height: 100dvh; background: var(--bg-base); color: var(--text-main);
  font-family: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; line-height: 1.45;
  padding-top: env(safe-area-inset-top, 0px); transition: background .25s ease, color .25s ease; }
h1,h2,h3,.fc-big,.hm-ring-num,.brand-pill .mark,.hm-hero-status,.res-score { font-family: 'Bricolage Grotesque','Figtree',system-ui,sans-serif; letter-spacing: -0.02em; }
h2 { margin: 0 0 4px; font-size: 1.35rem; } h3 { margin: 0 0 10px; font-size: 1.05rem; }
button { font: inherit; color: inherit; cursor: pointer; }
.flag { font-family: 'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif; }
.muted { color: var(--text-muted); } .small { font-size: .82rem; }

/* header */
.app-header { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 10px 16px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); margin-top: calc(-1 * env(safe-area-inset-top, 0px));
  background: var(--chrome-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--border-color); }
.brand-pill .mark { font-weight: 800; font-size: 1.25rem; } .brand-pill .hl { color: var(--primary); }
.due-pill { display: inline-flex; align-items: center; gap: 6px; padding: 7px 14px; border: 0; border-radius: 999px; color: #fff; font-weight: 800; background: var(--due-grad); box-shadow: 0 6px 16px -8px rgba(225,29,72,.6); }
.due-pill.zero { background: var(--progress-bg); color: var(--text-muted); box-shadow: none; }
.pill-label { font-weight: 600; font-size: .8rem; opacity: .9; }

/* layout */
.app-shell { max-width: 560px; margin: 0 auto; padding: 16px 16px calc(96px + env(safe-area-inset-bottom, 0px)); }
.view { display: none; animation: fade .2s ease; } .view.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.boot { padding: 60px 0; text-align: center; color: var(--text-muted); }
.panel { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 14px; box-shadow: var(--shadow); }
.row { display: flex; align-items: center; gap: 10px; } .row.between { justify-content: space-between; } .wrap { flex-wrap: wrap; }
.stack > * + * { margin-top: 10px; }

/* nav */
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; justify-content: center; gap: 4px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--chrome-bg); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-top: 1px solid var(--border-color); }
.bottom-nav button { flex: 1; max-width: 100px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 4px; border: 0; background: transparent; border-radius: 14px; color: var(--text-muted); }
.bottom-nav .ni { font-size: 1.25rem; filter: grayscale(.9); opacity: .75; transition: transform .15s; } .bottom-nav .nl { font-size: .7rem; font-weight: 700; }
.bottom-nav button.active { color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); }
.bottom-nav button.active .ni { filter: none; opacity: 1; transform: translateY(-1px) scale(1.08); }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 16px; border: 2px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font-weight: 800; transition: transform .1s; }
.btn:active { transform: scale(.97); }
.btn-primary { border: 0; color: #fff; background: var(--primary-btn-grad); }
.btn-block { width: 100%; } .btn-lg { padding: 15px 20px; font-size: 1.05rem; } .btn-sm { padding: 8px 12px; font-size: .85rem; border-radius: 12px; }
.btn-danger { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 40%, transparent); }
.btn[disabled] { opacity: .5; pointer-events: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1.5px solid var(--border-color); background: var(--bg-surface); font-weight: 700; font-size: .82rem; color: var(--text-muted); }
button.chip.on { background: color-mix(in srgb, var(--primary) 14%, transparent); border-color: var(--primary); color: var(--primary); }
.tag { display: inline-block; padding: 3px 9px; border-radius: 999px; font-size: .72rem; font-weight: 800; background: var(--progress-bg); color: var(--text-muted); }
.tag.new { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); }
.tag.mastered { background: color-mix(in srgb, var(--secondary) 20%, transparent); color: var(--secondary); }
.tag.due { background: color-mix(in srgb, var(--danger) 16%, transparent); color: var(--danger); }
.bar { height: 9px; border-radius: 99px; background: var(--progress-bg); overflow: hidden; } .bar > i { display: block; height: 100%; border-radius: 99px; background: var(--progress-fill); transition: width .35s ease; }

/* home hero (country themes draw their flag motif on .hm-hero::before) */
.hm-hero { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-lg); padding: 20px; margin-bottom: 14px; background: var(--ink); color: #fff; box-shadow: var(--shadow); }
[data-mode="dark"] .hm-hero { background: color-mix(in srgb, var(--primary) 30%, var(--bg-surface)); }
.hm-hero-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.hm-ring { position: relative; width: 92px; height: 92px; flex: 0 0 auto; } .hm-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hm-ring .track { stroke: rgba(255,255,255,.22); } .cal-ring-bar { stroke: var(--sun); transition: stroke-dashoffset .6s ease; }
.hm-ring-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 1.4rem; line-height: 1; }
.hm-ring-num small { font-family: 'Figtree'; font-size: .62rem; font-weight: 700; opacity: .8; margin-top: 3px; letter-spacing: 0; }
.hm-hero-status { font-size: 1.35rem; font-weight: 800; line-height: 1.15; } .hm-hero-sub { opacity: .85; font-size: .9rem; margin-top: 4px; }
.btn-hero { width: 100%; border: 0; border-radius: 16px; padding: 14px; font-weight: 800; font-size: 1.02rem; background: #fff; color: #0A2540; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.stat { background: var(--bg-surface); border: 1px solid var(--border-color); border-radius: var(--radius-md); padding: 12px 8px; text-align: center; box-shadow: var(--shadow); }
.stat b { display: block; font-size: 1.35rem; font-family: 'Bricolage Grotesque','Figtree'; } .stat span { font-size: .72rem; font-weight: 700; color: var(--text-muted); }
.cont-row + .cont-row { margin-top: 12px; } .cont-row .row { margin-bottom: 5px; font-weight: 700; font-size: .9rem; }

/* flashcard */
.fc-scene { perspective: 1200px; margin: 6px 0 14px; }
.fc { position: relative; min-height: 330px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3,.8,.3,1); cursor: pointer; }
.fc.flipped { transform: rotateY(180deg); }
.fc-face { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 22px; text-align: center; border-radius: var(--radius-lg); backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--shadow); }
.fc-front { background: var(--bg-surface); border: 1px solid var(--border-color); }
.fc-back { transform: rotateY(180deg); color: #fff; background: var(--back-grad, var(--card-back-grad)); }
.fc-flag { font-size: 4.2rem; line-height: 1.1; } .fc-label { font-size: .85rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .7; }
.fc-big { font-size: 2.1rem; font-weight: 800; line-height: 1.12; word-break: break-word; } .fc-note { margin-top: 8px; font-size: .82rem; opacity: .9; max-width: 28ch; }
.fc-tools { position: absolute; top: 12px; right: 12px; display: flex; gap: 6px; }
.icon-btn { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; border: 0; background: rgba(255,255,255,.2); color: inherit; font-size: 1.05rem; }
.fc-front .icon-btn { background: var(--progress-bg); }
.fc-hint { text-align: center; font-size: .8rem; color: var(--text-muted); margin-top: -4px; margin-bottom: 8px; }
.rate { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.rate button { border: 0; border-radius: 16px; padding: 11px 4px; color: #fff; font-weight: 800; display: flex; flex-direction: column; gap: 2px; align-items: center; }
.rate small { font-size: .7rem; font-weight: 600; opacity: .9; }
.rate .r0 { background: var(--retry-grad); } .rate .r1 { background: var(--hard-grad); } .rate .r2 { background: var(--good-grad); } .rate .r3 { background: var(--easy-grad); }
.sess-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; } .sess-top .bar { flex: 1; }
.empty { text-align: center; padding: 28px 10px; } .empty .big { font-size: 3rem; } .res-score { font-size: 2.6rem; font-weight: 800; }

/* quiz */
.opt { width: 100%; text-align: left; padding: 14px 16px; margin-top: 10px; border-radius: 16px; border: 2px solid var(--border-color); background: var(--bg-surface); font-weight: 700; font-size: 1.02rem; display: flex; align-items: center; gap: 10px; }
.opt:active { transform: scale(.985); } .opt .k { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: var(--progress-bg); font-size: .8rem; color: var(--text-muted); }
.opt.right { border-color: #16A34A; background: color-mix(in srgb, #16A34A 16%, var(--bg-surface)); }
.opt.wrong { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, var(--bg-surface)); }
.q-card { text-align: center; padding: 26px 16px; } .q-card .fc-flag { font-size: 3.4rem; } .q-card .fc-big { font-size: 1.9rem; }
.input { width: 100%; padding: 14px 16px; border-radius: 16px; border: 2px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font: inherit; font-size: 1.1rem; font-weight: 700; }
.input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.fb { margin-top: 12px; padding: 12px 14px; border-radius: 14px; font-weight: 700; } .fb.ok { background: color-mix(in srgb, #16A34A 16%, transparent); color: #15803D; } .fb.bad { background: color-mix(in srgb, var(--danger) 13%, transparent); color: var(--danger); }
[data-mode="dark"] .fb.ok { color: #4ADE80; }
.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; padding: 4px; border-radius: 16px; background: var(--progress-bg); }
.seg button { border: 0; border-radius: 12px; padding: 10px 6px; background: transparent; font-weight: 800; font-size: .85rem; color: var(--text-muted); }
.seg button.on { background: var(--bg-surface); color: var(--text-main); box-shadow: var(--shadow); }
.missed li { padding: 8px 0; border-bottom: 1px solid var(--border-color); display: flex; justify-content: space-between; gap: 10px; } .missed { list-style: none; padding: 0; margin: 8px 0 0; }
.timer { font-weight: 800; font-variant-numeric: tabular-nums; }

/* browse */
.search { width: 100%; padding: 12px 16px; border-radius: 16px; border: 2px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font: inherit; }
.search:focus { outline: none; border-color: var(--primary); }
.filters { display: flex; gap: 6px; overflow-x: auto; padding: 10px 0 4px; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filters .chip { white-space: nowrap; flex: 0 0 auto; }
.list-row { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; margin-top: 8px; border: 1px solid var(--border-color); border-radius: 16px; background: var(--bg-surface); text-align: left; }
.list-row .flag { font-size: 1.7rem; } .list-row .t { flex: 1; min-width: 0; } .list-row .t b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .list-row .t span { color: var(--text-muted); font-size: .88rem; }
.count-line { margin: 10px 2px 0; font-size: .82rem; color: var(--text-muted); font-weight: 700; }

/* sheet */
.sheet-back { position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end; justify-content: center; background: rgba(8,16,28,.5); animation: fadeb .2s ease; }
@keyframes fadeb { from { opacity: 0; } to { opacity: 1; } }
.sheet { width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto; background: var(--bg-surface); border-radius: 28px 28px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom, 0px)); animation: up .25s ease; }
@keyframes up { from { transform: translateY(40px); } to { transform: none; } }
.sheet .fc-flag { font-size: 3.2rem; text-align: center; } .sheet h2 { text-align: center; } .sheet .cap { text-align: center; font-size: 1.5rem; font-weight: 800; color: var(--primary); font-family: 'Bricolage Grotesque'; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 14px 0; } .kv div { padding: 10px; border-radius: 12px; background: var(--progress-bg); font-size: .82rem; } .kv b { display: block; font-size: .95rem; }

/* settings */
.field { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-color); } .field:last-child { border: 0; }
.select { padding: 9px 12px; border-radius: 12px; border: 2px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font: inherit; font-weight: 700; }
.st-mode { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 4px; border-radius: 16px; background: var(--progress-bg); }
.st-mode-btn { border: 0; border-radius: 12px; padding: 10px 6px; font-weight: 700; font-size: .86rem; color: var(--text-muted); background: transparent; }
.st-mode-btn.active { background: var(--bg-surface); color: var(--text-main); box-shadow: var(--shadow); }
.st-hint { margin: 8px 2px 0; font-size: .78rem; color: var(--text-muted); }
.st-country-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin: 16px 0 10px; font-size: .9rem; } .st-count { margin: 0; }
.st-dd { position: relative; }
.st-dd-btn { width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 16px; border: 2px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); text-align: left; }
.st-dd.open .st-dd-btn { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent); }
.st-dd-name { flex: 1; min-width: 0; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-dd-caret { color: var(--text-muted); transition: transform .15s; } .st-dd.open .st-dd-caret { transform: rotate(180deg); }
.st-dd-panel { margin-top: 8px; padding: 10px; border-radius: 18px; border: 1px solid var(--border-color); background: var(--bg-surface); box-shadow: var(--shadow); } .st-dd-panel[hidden] { display: none; }
.st-country-search { width: 100%; padding: 10px 14px; margin-bottom: 8px; border-radius: 12px; border: 1px solid var(--border-color); background: var(--bg-base); color: var(--text-main); font: inherit; }
.st-dd-list { display: flex; flex-direction: column; gap: 2px; max-height: 280px; overflow-y: auto; overscroll-behavior: contain; }
.st-country { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; border: 0; background: transparent; text-align: left; } .st-country[hidden] { display: none; }
.st-country:hover { background: color-mix(in srgb, var(--primary) 8%, transparent); } .st-country.active { background: color-mix(in srgb, var(--primary) 14%, transparent); }
.st-flag { flex: 0 0 auto; width: 38px; height: 26px; border-radius: 6px; border: 1px solid rgba(128,128,128,.35); box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.st-country-name { flex: 1; min-width: 0; font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-country-dots { display: flex; gap: 4px; } .st-country-dots i { width: 13px; height: 13px; border-radius: 50%; border: 1px solid rgba(128,128,128,.4); }
.st-country-check { visibility: hidden; font-weight: 900; color: var(--primary); width: 16px; text-align: center; } .st-country.active .st-country-check { visibility: visible; }

.toast { position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; pointer-events: none; z-index: 80; padding: 11px 18px; border-radius: 14px; background: var(--ink); color: #fff; font-weight: 700; font-size: .9rem; transition: all .25s ease; max-width: 90vw; }
[data-mode="dark"] .toast { background: var(--text-main); color: var(--bg-base); } .toast.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* account panel */
.or { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: .8rem; font-weight: 700; }
.or::before, .or::after { content: ""; flex: 1; height: 1px; background: var(--border-color); }
.avatar { flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; color: #fff; background: var(--primary-btn-grad); }
.home-btn { width: 38px; height: 38px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--text-main); background: var(--progress-bg); }
.home-btn svg { width: 20px; height: 20px; }