/* Bazar Ki Samaj platform pages: same paper, ink and amber as the course page and the lessons. */
:root{
  --bg:#edf0ee; --card:#fbfcfb; --ink:#1a1f21; --ink2:#465055; --muted:#5f686c; --rule:#d5dbd8; --chip:#e3e7e5;
  --accent:#c4730c; --accent-ink:#8c4f00; --accent-soft:#f7e9cf; --ok:#1a7543; --ok-soft:#dcefe3; --bad:#b33a30; --bad-soft:#f7e2df;
  --btn:#1a1f21; --btn-ink:#ffffff; --shadow:0 1px 0 rgba(26,31,33,.04), 0 10px 30px -18px rgba(26,31,33,.35);
  --display:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --body:"Hind","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){
  --bg:#0f1212; --card:#161a1a; --ink:#e2e6e4; --ink2:#b1b9b6; --muted:#879190; --rule:#2a302f; --chip:#212727;
  --accent:#f0a33c; --accent-ink:#f6c27c; --accent-soft:#33260f; --ok:#4cc483; --ok-soft:#12291c; --bad:#ef6f64; --bad-soft:#2e1614;
  --btn:#e2e6e4; --btn-ink:#0f1212; --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 30px -18px rgba(0,0,0,.8); color-scheme:dark } }
:root[data-theme="dark"]{
  --bg:#0f1212; --card:#161a1a; --ink:#e2e6e4; --ink2:#b1b9b6; --muted:#879190; --rule:#2a302f; --chip:#212727;
  --accent:#f0a33c; --accent-ink:#f6c27c; --accent-soft:#33260f; --ok:#4cc483; --ok-soft:#12291c; --bad:#ef6f64; --bad-soft:#2e1614;
  --btn:#e2e6e4; --btn-ink:#0f1212; --shadow:0 1px 0 rgba(0,0,0,.2), 0 10px 30px -18px rgba(0,0,0,.8); color-scheme:dark }

*{box-sizing:border-box}
@media (prefers-reduced-motion: reduce){ *{transition:none!important;animation:none!important} }
html,body{margin:0}
body{background:var(--bg); color:var(--ink); font:400 18px/1.55 var(--body); -webkit-font-smoothing:antialiased;
  padding-left:max(16px, env(safe-area-inset-left, 0px)); padding-right:max(16px, env(safe-area-inset-right, 0px))}
a{color:inherit}
[hidden]{display:none!important}
.wrap{max-width:1040px; margin:0 auto}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums}
.eyebrow{font:500 13px/1.4 var(--mono); letter-spacing:.09em; text-transform:uppercase; color:var(--ink2); margin:0}
h1,h2,h3{font-family:var(--display); font-weight:700; line-height:1.04; letter-spacing:.005em; text-wrap:balance; margin:0}
h1{font-size:clamp(38px, 6vw, 56px)}
h2{font-size:clamp(28px, 4vw, 38px); font-weight:600}
h3{font-size:24px; font-weight:600}
p{margin:0}
.muted{color:var(--ink2)}
.small{font-size:15px}

/* top bar */
.top{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(6px);
  margin-inline:calc(-1 * max(16px, env(safe-area-inset-left, 0px))); padding-inline:max(16px, env(safe-area-inset-left, 0px)); border-bottom:1px solid var(--rule)}
.top .wrap{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:64px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-height:44px}
.brand b{font:700 24px/1 var(--display); letter-spacing:.01em; white-space:nowrap}
.mark{display:flex; align-items:flex-end; gap:3px; height:22px}
.mark i{display:block; width:6px; border-radius:2px; background:var(--accent)}
.mark i:nth-child(1){height:9px; opacity:.55} .mark i:nth-child(2){height:15px; opacity:.8} .mark i:nth-child(3){height:22px}
.top nav{display:flex; align-items:center; gap:8px; min-width:0}
.top nav .who{font:500 14px/1.2 var(--mono); color:var(--ink2); max-width:16ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
@media (max-width: 420px){ .brand b{font-size:20px} .top nav .who{display:none} }

/* buttons, fields */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 18px; border-radius:12px;
  font:600 17px/1 var(--body); text-decoration:none; border:2px solid var(--rule); cursor:pointer; background:var(--card); color:var(--ink)}
.btn.primary{background:var(--btn); color:var(--btn-ink); border-color:var(--btn)}
.btn.accent{background:var(--accent-soft); color:var(--accent-ink); border-color:var(--accent-ink)}
.btn.small{min-height:44px; padding:6px 12px; font-size:15px}
.btn.link{border-color:transparent; background:transparent; padding-inline:8px; text-decoration:underline; text-underline-offset:3px}
.btn[disabled]{opacity:.55; cursor:progress}
.btn:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible,button:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
label.field{display:grid; gap:6px; font:600 15px/1.3 var(--body)}
label.field small{font:400 14px/1.35 var(--body); color:var(--ink2)}
input,select{font:400 18px/1.3 var(--body); color:var(--ink); background:var(--card); border:2px solid var(--rule); border-radius:12px; padding:12px 14px; min-height:52px; width:100%}
input:focus{border-color:var(--accent)}
.hp{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden}

/* cards and layout */
.card{background:var(--card); border:1px solid var(--rule); border-radius:18px; padding:clamp(16px, 3vw, 24px); box-shadow:var(--shadow); min-width:0}
.stack{display:grid; gap:16px}
.row{display:flex; flex-wrap:wrap; gap:10px; align-items:center}
.grid2{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:16px}
.grid3{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px}
@media (max-width: 760px){ .grid2, .grid3{grid-template-columns:minmax(0, 1fr)} }
main{padding-block:clamp(20px, 4vw, 40px) 56px}
.msg{padding:12px 14px; border-radius:12px; font-size:16px; line-height:1.45}
.msg.err{background:var(--bad-soft); color:var(--bad)}
.msg.ok{background:var(--ok-soft); color:var(--ok)}
.msg.info{background:var(--accent-soft); color:var(--accent-ink)}
.chip{display:inline-block; font:600 12px/1 var(--mono); letter-spacing:.07em; text-transform:uppercase; padding:5px 8px; border-radius:6px; background:var(--chip); color:var(--ink2); white-space:nowrap}
.chip.ok{background:var(--ok-soft); color:var(--ok)}
.chip.acc{background:var(--accent-soft); color:var(--accent-ink)}
.chip.bad{background:var(--bad-soft); color:var(--bad)}
.tabs{display:flex; gap:6px; border-bottom:1px solid var(--rule); margin-bottom:16px; overflow-x:auto}
.tabs button{font:600 16px/1 var(--body); background:none; border:0; border-bottom:3px solid transparent; padding:12px 10px; min-height:48px; color:var(--ink2); cursor:pointer; white-space:nowrap}
.tabs button[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--accent)}

/* lessons list (dashboard) */
.lvl{display:grid; gap:10px}
.lvl > header{display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap}
.ll{list-style:none; padding:0; margin:0; display:grid; gap:6px}
.ll a, .ll .row-l{display:grid; grid-template-columns:3.2em minmax(0, 1fr) auto; gap:10px; align-items:center; padding:10px 12px; border-radius:12px;
  background:var(--card); border:1px solid var(--rule); text-decoration:none; min-height:56px}
.ll a:hover{border-color:var(--accent)}
.ll .id{font:500 13px/1 var(--mono); color:var(--ink2)}
.ll .t{font-size:17px; line-height:1.3}
.ll .t small{display:block; font:500 13px/1.3 var(--mono); color:var(--ink2); margin-top:3px}
.ll .locked{opacity:.75}
.stars{font:600 14px/1 var(--mono); color:var(--accent-ink); letter-spacing:.06em}

/* stat tiles */
.tiles{display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:12px}
.tile{background:var(--card); border:1px solid var(--rule); border-radius:16px; padding:14px 16px; display:grid; gap:4px; min-width:0}
.tile b{font:600 clamp(26px, 4vw, 34px)/1.05 var(--mono); letter-spacing:-.01em}
.tile span{font:500 13px/1.3 var(--mono); color:var(--ink2); text-transform:uppercase; letter-spacing:.06em}
@media (max-width: 760px){ .tiles{grid-template-columns:repeat(2, minmax(0, 1fr))} }

/* tables (admin) */
.tablewrap{overflow-x:auto; border:1px solid var(--rule); border-radius:14px; background:var(--card)}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--rule); vertical-align:top; white-space:nowrap}
th{font:600 12px/1.2 var(--mono); letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); background:var(--bg); position:sticky; top:0}
td.wrap-ok{white-space:normal; min-width:14ch}
tr:last-child td{border-bottom:0}

/* plan cards */
.plans{display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:12px}
.plan{border:2px solid var(--rule); border-radius:16px; padding:16px; display:grid; gap:10px; background:var(--card)}
.plan.best{border-color:var(--accent)}
.plan .amt{font:600 36px/1 var(--mono)}
.plan ul{margin:0; padding-left:20px; color:var(--ink2); font-size:16px}
@media (max-width: 640px){ .plans{grid-template-columns:minmax(0, 1fr)} }

/* footer */
.foot{border-top:1px solid var(--rule); padding-block:24px 40px; color:var(--ink2); font-size:15px; display:grid; gap:10px}
.foot nav{display:flex; flex-wrap:wrap; gap:4px 16px}
.foot a{display:inline-flex; align-items:center; min-height:44px}

/* doc pages */
.doc{max-width:760px}
.doc h2{margin-top:28px}
.doc p,.doc li{color:var(--ink); font-size:17px}
.doc p+p{margin-top:10px}
.doc ul{padding-left:22px}

/* spinner */
.spin{width:28px; height:28px; border-radius:50%; border:3px solid var(--rule); border-top-color:var(--accent); animation:sp 0.9s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}