/* ============================================================
   Maturski EIT — stilovi
   Tema: auto (prefers-color-scheme) sa ručnim override-om.
   Paleta inspirisana Claude aplikacijom (topli papir / koral).
   ============================================================ */

/* ---- LIGHT (podrazumevano) ---- */
:root {
  --bg:           #f1efe7;
  --bg-tint:      #e9e6db;
  --surface:      #faf9f5;
  --surface-2:    #ffffff;
  --text:         #211f1b;
  --text-2:       #57544b;
  --muted:        #8b8779;
  --border:       #e3e0d4;
  --border-2:     #d4d0c0;
  --accent:       #bd5d39;
  --accent-2:     #a64e2e;
  --accent-soft:  #f3e4dc;
  --on-accent:    #fdfbf4;
  --ok:           #4d7c2f;
  --ok-soft:      #e6eedd;
  --err:          #b3402c;
  --err-soft:     #f4e0db;
  --code-bg:      #2b2926;
  --code-text:    #ece6d6;
  --code-border:  #423e38;
  --shadow:       0 1px 2px rgba(40,33,24,.06), 0 8px 24px -12px rgba(40,33,24,.18);
  --shadow-sm:    0 1px 2px rgba(40,33,24,.08);
}

/* ---- DARK preko sistemske postavke ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --bg:           #262624;
    --bg-tint:      #201f1d;
    --surface:      #2f2e2b;
    --surface-2:    #35332f;
    --text:         #f2f0e7;
    --text-2:       #bbb7a8;
    --muted:        #8d8a7c;
    --border:       #3c3a35;
    --border-2:     #4a473f;
    --accent:       #d97757;
    --accent-2:     #e08a6a;
    --accent-soft:  #3a2d27;
    --on-accent:    #211f1b;
    --ok:           #84b65f;
    --ok-soft:      #2c3322;
    --err:          #e2785f;
    --err-soft:     #3a2722;
    --code-bg:      #1c1b19;
    --code-text:    #e6e1d2;
    --code-border:  #322f2a;
    --shadow:       0 1px 2px rgba(0,0,0,.3), 0 10px 28px -14px rgba(0,0,0,.6);
    --shadow-sm:    0 1px 2px rgba(0,0,0,.35);
  }
}

/* ---- DARK ručno ---- */
:root[data-theme="dark"] {
  --bg:#262624; --bg-tint:#201f1d; --surface:#2f2e2b; --surface-2:#35332f;
  --text:#f2f0e7; --text-2:#bbb7a8; --muted:#8d8a7c; --border:#3c3a35; --border-2:#4a473f;
  --accent:#d97757; --accent-2:#e08a6a; --accent-soft:#3a2d27; --on-accent:#211f1b;
  --ok:#84b65f; --ok-soft:#2c3322; --err:#e2785f; --err-soft:#3a2722;
  --code-bg:#1c1b19; --code-text:#e6e1d2; --code-border:#322f2a;
  --shadow:0 1px 2px rgba(0,0,0,.3),0 10px 28px -14px rgba(0,0,0,.6);
  --shadow-sm:0 1px 2px rgba(0,0,0,.35);
}
/* ---- LIGHT ručno ---- */
:root[data-theme="light"] {
  --bg:#f1efe7; --bg-tint:#e9e6db; --surface:#faf9f5; --surface-2:#ffffff;
  --text:#211f1b; --text-2:#57544b; --muted:#8b8779; --border:#e3e0d4; --border-2:#d4d0c0;
  --accent:#bd5d39; --accent-2:#a64e2e; --accent-soft:#f3e4dc; --on-accent:#fdfbf4;
  --ok:#4d7c2f; --ok-soft:#e6eedd; --err:#b3402c; --err-soft:#f4e0db;
  --code-bg:#2b2926; --code-text:#ece6d6; --code-border:#423e38;
  --shadow:0 1px 2px rgba(40,33,24,.06),0 8px 24px -12px rgba(40,33,24,.18);
  --shadow-sm:0 1px 2px rgba(40,33,24,.08);
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color .25s ease, color .25s ease;
  overflow-x: hidden;
}

:root {
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", "Roboto Mono", "DejaVu Sans Mono", Consolas, monospace;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; font-size: 16px; }
svg { width: 20px; height: 20px; display: block; }

/* atmosfera */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background:
    radial-gradient(900px 500px at 88% -8%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%),
    radial-gradient(700px 460px at -8% 102%, var(--bg-tint), transparent 72%);
  opacity: .85;
}

#app { position: relative; z-index: 1; }

/* ---------------- layout ---------------- */
.wrap { max-width: 540px; margin: 0 auto; padding: 0 18px; }
.screen { min-height: 100dvh; padding-bottom: 40px; }

/* ---------------- top bar ---------------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 0 14px;
}
.brand { display: flex; align-items: baseline; gap: 7px; }
.brand .mark {
  font-family: var(--mono); font-weight: 700; font-size: 19px; letter-spacing: -.5px;
  color: var(--text);
}
.brand .mark b { color: var(--accent); }
.brand .sub {
  font-family: var(--mono); font-size: 11px; color: var(--muted); letter-spacing: .5px;
}

.iconbtn {
  width: 40px; height: 40px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text-2); transition: transform .12s ease, background-color .15s ease;
}
.iconbtn:active { transform: scale(.92); }
.iconbtn svg { width: 19px; height: 19px; }

/* ---------------- cards ---------------- */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}

/* hero / progress */
.hero {
  padding: 22px 20px; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow);
}
.hero-top { display: flex; justify-content: space-between; align-items: flex-end; }
.hero-num {
  font-family: var(--mono); font-weight: 700; letter-spacing: -1.5px;
  font-size: 46px; line-height: 1; color: var(--text);
}
.hero-num small { font-size: 19px; color: var(--muted); font-weight: 600; }
.hero-label { font-size: 13px; color: var(--text-2); margin-top: 6px; }
.hero-pct {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--accent); background: var(--accent-soft);
  padding: 5px 10px; border-radius: 8px;
}
.bar {
  height: 9px; border-radius: 99px; background: var(--bg-tint);
  overflow: hidden; margin-top: 16px; border: 1px solid var(--border);
}
.bar > i {
  display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2));
  transition: width .6s cubic-bezier(.2,.7,.2,1);
}

/* section heading */
.sec-h {
  font-family: var(--mono); font-size: 11px; font-weight: 700;
  letter-spacing: 1.3px; text-transform: uppercase; color: var(--muted);
  margin: 26px 4px 10px;
}

/* resume banner */
.resume {
  display: flex; align-items: center; gap: 13px;
  padding: 14px 16px; margin-top: 16px;
  background: var(--accent-soft); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 14px; transition: transform .12s ease;
}
.resume:active { transform: scale(.985); }
.resume .play {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  background: var(--accent); color: var(--on-accent);
  display: grid; place-items: center;
}
.resume .play svg { width: 16px; height: 16px; }
.resume .rt { flex: 1; min-width: 0; }
.resume .rt b { font-size: 14px; }
.resume .rt span { display: block; font-size: 12px; color: var(--text-2); margin-top: 1px; }
.resume .chev { color: var(--accent); }

/* install banner */
.install {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 12px 11px 14px; margin-top: 12px;
  background: var(--surface); border: 1px dashed var(--border-2);
  border-radius: 12px; transition: transform .12s ease, border-color .15s ease;
  cursor: pointer;
}
.install:active { transform: scale(.99); }
.install:hover { border-color: var(--accent); }
.install .ico {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  background: var(--bg-tint); color: var(--accent);
  display: grid; place-items: center;
}
.install .ico svg { width: 16px; height: 16px; }
.install .it { flex: 1; min-width: 0; }
.install .it b { font-size: 13.5px; display: block; }
.install .it span { display: block; font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.install-x {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  color: var(--muted); display: grid; place-items: center;
  background: transparent;
}
.install-x:hover { color: var(--text-2); background: var(--bg-tint); }
.install-x svg { width: 14px; height: 14px; }

/* subject list */
.subj { display: flex; flex-direction: column; gap: 8px; }
.subj-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 14px; border-radius: 13px;
  background: var(--surface); border: 1.5px solid var(--border);
  transition: border-color .15s ease, transform .1s ease, background-color .15s ease;
}
.subj-row:active { transform: scale(.99); }
.subj-row.on {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 70%, var(--surface));
}
.dot { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.subj-mid { flex: 1; min-width: 0; }
.subj-name { font-size: 14.5px; font-weight: 600; }
.subj-mini {
  height: 5px; border-radius: 99px; background: var(--bg-tint);
  margin-top: 7px; overflow: hidden;
}
.subj-mini > i { display: block; height: 100%; border-radius: 99px; transition: width .5s ease; }
.subj-count {
  font-family: var(--mono); font-size: 12px; font-weight: 600;
  color: var(--text-2); flex: none; white-space: nowrap;
}
.subj-check {
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; color: var(--on-accent);
  background: var(--accent);
}
.subj-check svg { width: 12px; height: 12px; }

/* mode buttons */
.modes { display: flex; flex-direction: column; gap: 11px; margin-top: 22px; }
.mbtn {
  display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 16px 18px; border-radius: 15px;
  transition: transform .12s ease, filter .15s ease;
}
.mbtn:active { transform: scale(.98); }
.mbtn .mi {
  width: 44px; height: 44px; border-radius: 12px; flex: none;
  display: grid; place-items: center;
}
.mbtn .mi svg { width: 22px; height: 22px; }
.mbtn .mt { flex: 1; }
.mbtn .mt b { font-size: 16px; display: block; }
.mbtn .mt span { font-size: 12.5px; opacity: .8; }
.mbtn .arr { opacity: .55; }
.mbtn.primary {
  background: var(--accent); color: var(--on-accent);
  box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--accent) 70%, transparent);
}
.mbtn.primary .mi { background: rgba(255,255,255,.16); }
.mbtn.secondary {
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border-2);
}
.mbtn.secondary .mi { background: var(--bg-tint); color: var(--accent); }
.mbtn[disabled] { opacity: .5; pointer-events: none; }

/* footer */
.foot {
  margin-top: 30px; text-align: center;
  font-family: var(--mono); font-size: 11px; color: var(--muted);
}
.foot button { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; font-size: 11px; }
.foot button:active { color: var(--err); }

/* ---------------- QUIZ ---------------- */
.q-top {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 0 12px;
}
.q-top .back {
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  display: grid; place-items: center; background: var(--surface);
  border: 1px solid var(--border); color: var(--text-2);
}
.q-top .back:active { transform: scale(.92); }
.q-top .qi { flex: 1; min-width: 0; }
.q-top .qi b { font-size: 13.5px; font-weight: 700; }
.q-top .qi span { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.q-score {
  font-family: var(--mono); font-size: 12px; font-weight: 700;
  padding: 5px 9px; border-radius: 8px;
  background: var(--ok-soft); color: var(--ok);
}

.q-progress {
  height: 6px; border-radius: 99px; background: var(--bg-tint);
  overflow: hidden; border: 1px solid var(--border); margin-bottom: 18px;
}
.q-progress > i {
  display: block; height: 100%; background: var(--accent);
  border-radius: 99px; transition: width .45s cubic-bezier(.2,.7,.2,1);
}

.qcard {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 18px; box-shadow: var(--shadow); padding: 20px 18px;
  animation: qin .3s cubic-bezier(.2,.7,.2,1);
}
@keyframes qin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 14px; }
.chip {
  font-family: var(--mono); font-size: 10.5px; font-weight: 700;
  letter-spacing: .6px; text-transform: uppercase;
  padding: 4px 9px; border-radius: 7px;
}
.chip.subj { color: #fff; }
.chip.type { background: var(--bg-tint); color: var(--text-2); }

.stem { font-size: 16px; line-height: 1.6; color: var(--text); }
.stem p { margin-bottom: 11px; }
.stem p:last-child { margin-bottom: 0; }

.code {
  background: var(--code-bg); color: var(--code-text);
  border: 1px solid var(--code-border); border-radius: 11px;
  padding: 13px 14px; margin: 11px 0;
  font-family: var(--mono); font-size: 13px; line-height: 1.55;
  white-space: pre; overflow-x: auto; -webkit-overflow-scrolling: touch;
}

/* options */
.opts { display: flex; flex-direction: column; gap: 9px; margin-top: 17px; }
.opt {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 13px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1.5px solid var(--border);
  text-align: left; transition: border-color .13s ease, background-color .13s ease, transform .1s ease;
  font-size: 14.5px; line-height: 1.5; color: var(--text);
}
.opt:active { transform: scale(.99); }
.opt .box {
  width: 22px; height: 22px; flex: none; margin-top: 1px;
  border: 2px solid var(--border-2); display: grid; place-items: center;
  color: transparent; transition: all .13s ease;
}
.opt .box.radio { border-radius: 50%; }
.opt .box.check { border-radius: 7px; }
.opt .box svg { width: 12px; height: 12px; }
.opt.sel { border-color: var(--accent); background: var(--accent-soft); }
.opt.sel .box { border-color: var(--accent); background: var(--accent); color: var(--on-accent); }
.opt.ok { border-color: var(--ok); background: var(--ok-soft); }
.opt.ok .box { border-color: var(--ok); background: var(--ok); color: #fff; }
.opt.bad { border-color: var(--err); background: var(--err-soft); }
.opt.bad .box { border-color: var(--err); background: var(--err); color: #fff; }
.opt.locked { pointer-events: none; }
.opt-mono { font-family: var(--mono); font-size: 13px; }

/* match rows */
.match { display: flex; flex-direction: column; gap: 10px; margin-top: 17px; }
.mrow {
  border: 1.5px solid var(--border); border-radius: 12px;
  background: var(--surface-2); padding: 12px 13px;
}
.mrow.ok { border-color: var(--ok); background: var(--ok-soft); }
.mrow.bad { border-color: var(--err); background: var(--err-soft); }
.mrow .mq { font-size: 14px; line-height: 1.5; margin-bottom: 9px; }
.mrow .mq .num {
  font-family: var(--mono); font-weight: 700; color: var(--accent); margin-right: 6px;
}
.selwrap { position: relative; }
.selwrap select {
  width: 100%; appearance: none; -webkit-appearance: none;
  padding: 10px 34px 10px 12px; border-radius: 9px;
  border: 1.5px solid var(--border-2); background: var(--surface);
  color: var(--text); font-size: 14px; font-weight: 500;
}
.selwrap::after {
  content: ""; position: absolute; right: 13px; top: 50%;
  width: 8px; height: 8px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); transform: translateY(-65%) rotate(45deg);
  pointer-events: none;
}
.selwrap select:disabled { opacity: 1; color: var(--text-2); }
.mfix {
  font-size: 12.5px; margin-top: 8px; color: var(--ok);
  font-weight: 600;
}
.mfix.wrong { color: var(--err); }

/* fill */
.fill { display: flex; flex-direction: column; gap: 13px; margin-top: 17px; }
.fillrow .fl { font-size: 13.5px; color: var(--text-2); margin-bottom: 6px; line-height: 1.45; }
.fillrow input {
  width: 100%; padding: 11px 13px; border-radius: 10px;
  border: 1.5px solid var(--border-2); background: var(--surface-2);
  color: var(--text); font-family: var(--mono); font-size: 14px;
}
.fillrow input:focus { outline: none; border-color: var(--accent); }
.fillrow input.ok { border-color: var(--ok); background: var(--ok-soft); }
.fillrow input.bad { border-color: var(--err); background: var(--err-soft); }
.fillrow .fans {
  font-family: var(--mono); font-size: 12.5px; margin-top: 5px; font-weight: 600;
}
.fillrow .fans.ok { color: var(--ok); }
.fillrow .fans.bad { color: var(--err); }

/* feedback */
.fb {
  margin-top: 18px; border-radius: 14px; overflow: hidden;
  animation: qin .25s ease;
}
.fb-banner {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 15px; font-weight: 700; font-size: 15px;
}
.fb-banner svg { width: 19px; height: 19px; flex: none; }
.fb.good .fb-banner { background: var(--ok-soft); color: var(--ok); }
.fb.bad  .fb-banner { background: var(--err-soft); color: var(--err); }
.fb-exp {
  padding: 13px 15px; background: var(--surface-2);
  border: 1px solid var(--border); border-top: none;
  border-radius: 0 0 14px 14px;
}
.fb-exp .el {
  font-family: var(--mono); font-size: 10px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--muted);
  margin-bottom: 5px;
}
.fb-exp .et { font-size: 14px; line-height: 1.6; color: var(--text); }

/* primary action */
.act {
  width: 100%; padding: 15px; border-radius: 14px; margin-top: 18px;
  font-size: 15.5px; font-weight: 700;
  background: var(--accent); color: var(--on-accent);
  transition: transform .12s ease, filter .15s ease;
  box-shadow: 0 6px 18px -9px color-mix(in srgb, var(--accent) 75%, transparent);
}
.act:active { transform: scale(.985); }
.act[disabled] { opacity: .42; pointer-events: none; box-shadow: none; }
.act.ghost {
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--border-2); box-shadow: none;
}

/* done / empty */
.done { text-align: center; padding: 38px 22px; }
.done .big { font-size: 52px; line-height: 1; }
.done .big svg { width: 58px; height: 58px; margin: 0 auto; }
.done h2 { font-size: 21px; margin: 16px 0 7px; }
.done p { font-size: 14px; color: var(--text-2); }
.done-stats {
  display: flex; gap: 10px; margin: 22px 0 6px;
}
.done-stats .ds {
  flex: 1; background: var(--surface-2); border: 1px solid var(--border);
  border-radius: 12px; padding: 13px 8px;
}
.done-stats .ds b {
  font-family: var(--mono); font-size: 24px; display: block; color: var(--accent);
}
.done-stats .ds span { font-size: 11px; color: var(--muted); }

.empty { text-align: center; padding: 30px 16px; color: var(--text-2); font-size: 14px; }

.fadein { animation: fadeUp .5s cubic-bezier(.2,.7,.2,1) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 360px) {
  .hero-num { font-size: 40px; }
  .wrap { padding: 0 14px; }
}