/* Vocabulary B1–B2
   Ranglar rasmdan: qirmizi baxmal — fon, teal devor — panel, guruch-oltin — detallar. */

:root{
  color-scheme: dark;

  --ground:#8e2225;        /* divan qirmizi — sahifa foni */
  --ground-deep:#711a1d;   /* qirmizi soya — kartochkalar */
  --ground-deeper:#5c1417; /* eng to'q — qidiruv maydoni */

  --bar:#3e7175;           /* teal devor — yuqori panel */
  --accent:#2f5b5f;        /* to'q teal — tugmalar */
  --accent-hi:#3d7276;

  --gold:#dfbe72;
  --gold-line:#c09a45;

  --cream:#f6f0e7;         /* asosiy matn */
  --cream-dim:#eecbc6;     /* ikkilamchi matn (iliq) */
  --line:rgba(246,240,231,.18);

  --ok:#8fd8ae; --ok-bg:rgba(143,216,174,.16);
  --no:#ffc7c2; --no-bg:rgba(255,199,194,.14);

  --radius:16px;
  --shadow:0 2px 4px rgba(0,0,0,.22), 0 14px 34px rgba(0,0,0,.3);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--ground); color:var(--cream);
  font-family:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
.wrap{max-width:820px; margin:0 auto; padding:0 22px}

/* ---------- yuqori panel: teal ---------- */
.topbar{background:var(--bar); position:sticky; top:0; z-index:10;
  border-bottom:1px solid var(--gold-line)}
.topbar .wrap{display:flex; align-items:center; justify-content:space-between;
  height:64px; gap:14px}
.brand{background:none; border:0; padding:0; cursor:pointer; text-decoration:none;
  font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto;
  font-size:20px; font-weight:600; color:var(--cream); letter-spacing:-.005em}
.brand-dim{color:var(--gold); font-style:italic}
.counter{font-size:12.5px; letter-spacing:.11em; text-transform:uppercase;
  color:#d5e6e4; font-variant-numeric:tabular-nums}

/* ---------- sarlavhalar ---------- */
h1,h2{font-family:"Fraunces",Georgia,serif; font-optical-sizing:auto;
  color:var(--cream); letter-spacing:-.02em; text-wrap:balance; margin:0}
h1{font-size:clamp(32px,5.4vw,46px); font-weight:600; line-height:1.1}
h2{font-size:clamp(26px,4vw,34px); font-weight:600; line-height:1.15}
.eyebrow{font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700; margin:0 0 12px}
.lead{color:#f4dedb; margin:12px 0 0; max-width:56ch}
#home{padding:52px 0 20px}
.rule{height:1px; border:0; margin:30px 0 26px;
  background:linear-gradient(to right,var(--gold-line),transparent)}

/* ---------- bo'lim kartochkalari ---------- */
.tiles{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; padding-bottom:56px}
@media (max-width:600px){ .tiles{grid-template-columns:1fr} }
.tile{position:relative; background:var(--ground-deep); border:1px solid var(--line);
  border-radius:var(--radius); padding:26px 24px 22px; text-align:left;
  font:inherit; color:inherit; cursor:pointer; overflow:hidden;
  transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease}
.tile::before{content:""; position:absolute; inset:0 0 auto 0; height:3px;
  background:linear-gradient(to right,var(--bar),var(--gold) 65%,var(--gold-line))}
.tile:hover:not(:disabled){transform:translateY(-3px); box-shadow:var(--shadow);
  border-color:var(--gold-line)}
.tile .name{font-family:"Fraunces",Georgia,serif; font-size:23px; font-weight:600;
  color:var(--cream); letter-spacing:-.015em; line-height:1.2}
.tile .meta{margin-top:8px; font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--cream-dim); font-variant-numeric:tabular-nums}
.tile:disabled{cursor:default; opacity:.5}
.tile:disabled::before{background:var(--line)}

/* ---------- ro'yxat ---------- */
.back{background:none; border:0; padding:22px 0 0; font:inherit; font-size:14.5px;
  color:var(--gold); cursor:pointer}
.back:hover{text-decoration:underline}
.listhead{display:flex; align-items:flex-end; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin:14px 0 20px}
.search{width:100%; padding:13px 16px; border:1px solid var(--line); border-radius:12px;
  font:inherit; font-size:15.5px; background:var(--ground-deeper); color:var(--cream);
  margin-bottom:20px}
.search::placeholder{color:var(--cream-dim); opacity:.85}
.search:focus{outline:none; border-color:var(--gold);
  box-shadow:0 0 0 3px rgba(223,190,114,.25)}

/* ---------- so'z kartochkalari ---------- */
.cards{display:grid; gap:14px; padding-bottom:64px}
.card{background:var(--ground-deep); border:1px solid var(--line);
  border-radius:var(--radius); padding:22px 24px}
.card .head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
  padding-bottom:12px; border-bottom:1px solid var(--gold-line)}
.card .w{font-family:"Fraunces",Georgia,serif; font-size:25px; font-weight:600;
  color:var(--gold); letter-spacing:-.015em; line-height:1.15}
.card .pos{font-size:13px; color:var(--cream-dim); font-style:italic}
.card .uz{margin-left:auto; color:var(--cream); font-weight:700; font-size:16px}
.card .def{margin:14px 0; color:var(--cream)}
.card ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:9px}
.card li{position:relative; padding-left:18px; color:#f7e6e3; font-size:15.5px}
.card li::before{content:""; position:absolute; left:0; top:.72em; width:8px; height:1px;
  background:var(--gold-line)}
.empty{color:var(--cream-dim); padding:26px 0}

/* ---------- tugmalar ---------- */
.btn{display:inline-block; background:var(--accent); color:var(--cream); border:0;
  border-radius:11px; padding:12px 22px; font:inherit; font-size:15px; font-weight:700;
  cursor:pointer; text-decoration:none;
  transition:background .14s ease, transform .14s ease}
.btn:hover{background:var(--accent-hi)}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:transparent; color:var(--gold); border:1px solid var(--gold-line)}
.btn-ghost:hover{background:rgba(223,190,114,.14)}

/* ---------- test ---------- */
.qbar{display:flex; justify-content:space-between; align-items:baseline; margin:26px 0 10px;
  font-size:12.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--cream-dim);
  font-variant-numeric:tabular-nums}
.qtrack{height:3px; background:var(--line); border-radius:99px; overflow:hidden}
.qfill{height:100%; width:0; background:linear-gradient(to right,var(--gold),var(--bar));
  transition:width .3s ease}
.qtype{margin:34px 0 10px; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--gold); font-weight:700}
.qtext{font-family:"Fraunces",Georgia,serif; font-size:clamp(24px,4.2vw,32px);
  font-weight:600; line-height:1.3; color:var(--cream); letter-spacing:-.02em;
  margin:0 0 26px; text-wrap:balance}
.opts{display:grid; gap:11px}
.opt{background:var(--ground-deep); border:1px solid var(--line); border-radius:13px;
  padding:15px 18px; font:inherit; font-size:16px; text-align:left; color:var(--cream);
  cursor:pointer; transition:border-color .14s ease, background .14s ease}
.opt:hover:not(:disabled){border-color:var(--gold); background:var(--ground-deeper)}
.opt:disabled{cursor:default}
.opt.is-right{border-color:var(--ok); background:var(--ok-bg); color:var(--ok); font-weight:700}
.opt.is-wrong{border-color:var(--no); background:var(--no-bg); color:var(--no)}
.qfoot{display:flex; align-items:center; justify-content:space-between; gap:16px;
  margin:22px 0 56px; min-height:48px; flex-wrap:wrap}
.qfeedback{margin:0; font-size:15px}
.qfeedback.ok{color:var(--ok); font-weight:700}
.qfeedback.bad{color:var(--no)}

/* ---------- natija ---------- */
.result{padding:34px 0 60px}
.rscore{font-family:"Fraunces",Georgia,serif; font-size:64px; font-weight:600;
  color:var(--gold); letter-spacing:-.04em; line-height:1; margin:10px 0 8px;
  font-variant-numeric:tabular-nums}
.rline{color:#f4dedb; margin:0 0 30px; max-width:52ch}
.rsub{font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold);
  font-weight:700; margin:0 0 14px}
.ractions{display:flex; gap:12px; flex-wrap:wrap; margin-top:30px}

/* ---------- pastki qism ---------- */
.foot{color:var(--cream-dim); font-size:13px; letter-spacing:.06em; text-transform:uppercase;
  padding:26px 22px 48px; border-top:1px solid var(--line)}

/* ---------- qulaylik ---------- */
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none !important; animation:none !important}}
@media (max-width:520px){
  .wrap{padding:0 18px}
  .card{padding:18px}
  .card .uz{margin-left:0; flex-basis:100%}
}