/* Inner pages (home, health). Theme A tokens from tokens.css. No inline styles anywhere (CSP). */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { min-height: 100%; }
body { font-family: var(--font); color: var(--ink); background: var(--canvas); }
[hidden] { display: none !important; }
a { color: var(--pri); font-weight: 700; }

.shell { display: grid; grid-template-columns: 232px 1fr; min-height: 100vh; }
.side { background: var(--side); color: var(--sideink); padding: 18px 14px; border-right: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 18px; margin: 2px 6px 18px; }
.brand i { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; font-style: normal; color: #fff; background: linear-gradient(135deg, var(--pri), var(--pri2)); }
.nav { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 11px; font-size: 14px; font-weight: 700; color: inherit; text-decoration: none; }
.nav.on { background: var(--navon); }
.side .more { margin-top: auto; font-size: 12px; opacity: .7; padding: 10px 12px; }
.main { padding: 22px 28px; }
.top { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.top .grow { flex: 1; }
.chip { height: 42px; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; gap: 8px; padding: 0 12px; font-size: 13px; font-weight: 700; }
button.chip { cursor: pointer; font-family: inherit; color: var(--ink); }
.hello h1 { font-family: var(--font-display); font-size: 28px; font-weight: 800; }
.hello p { color: var(--muted); font-size: 14px; margin-top: 3px; font-weight: 700; }
.banner { margin: 16px 0; padding: 12px 16px; border-radius: 14px; font-weight: 800; font-size: 14px; background: #fff4e5; color: #8a4b00; border: 1px solid #ffd8a8; }
.banner.danger { background: #fdecec; color: #8f1d1d; border-color: #f6c1c1; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin-top: 18px; }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; position: relative; overflow: hidden; }
.card .ic { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 900; margin-bottom: 12px; background: var(--pri); }
.card b { display: block; font-size: 16px; }
a.card { display: block; color: inherit; text-decoration: none; }
a.card:hover { border-color: var(--pri); }
.card span { color: var(--muted); font-size: 13px; font-weight: 700; }
.card.acc-pri .ic { background: var(--pri); }
.card.acc-fees .ic { background: var(--mod-fees); }
.card.acc-attendance .ic { background: var(--mod-attendance); }
.card.acc-admission .ic { background: var(--mod-admission); }
.card.acc-exams .ic { background: var(--mod-exams); }
.card.acc-comms .ic { background: var(--mod-comms); }
.empty { color: var(--muted); font-weight: 700; margin-top: 18px; }

.health { max-width: 760px; margin: 40px auto; padding: 0 16px; }
.health h1 { font-family: var(--font-display); font-size: 30px; margin-bottom: 6px; }
.checks { display: grid; gap: 10px; margin-top: 18px; }
.check { display: flex; justify-content: space-between; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; font-weight: 800; }
.check small { color: var(--muted); font-weight: 700; display: block; }
.pill { font-size: 12px; font-weight: 900; padding: 4px 10px; border-radius: 999px; color: #fff; background: var(--ok); }
.pill.bad { background: var(--danger); }
.pill.warn { background: var(--warn); }

/* Settings (Phase 1 S0): scope picker, one card per group, a typed control per setting. */
.set-scope { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 18px 0; font-weight: 800; }
.set-scope select { min-width: 280px; }
.set-input, .set-scope select { height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); padding: 0 12px; font: inherit; font-weight: 700; }
.set-input:focus, .set-scope select:focus { outline: 2px solid var(--pri); outline-offset: 1px; }
.set-key { max-width: 160px; }
.set-check { width: 22px; height: 22px; accent-color: var(--pri); }
.set-groups { display: grid; gap: 18px; }
.set-group { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.set-group h2 { font-family: var(--font-display); font-size: 20px; margin-bottom: 10px; }
.set-group.set-warn { background: #fff7e6; border-color: #f3c97a; color: #6b3d00; }
.set-group.set-warn p { margin-bottom: 8px; font-weight: 700; }
.set-group.set-warn ul { margin: 0 0 0 20px; font-weight: 800; }
.set-group.set-warn.set-bad { background: #fde8e8; border-color: #e08080; color: #7a1010; }
.set-item { border-top: 1px solid var(--line); padding: 14px 0; }
.set-head { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.set-head b { font-size: 15px; }
.set-src { font-size: 12px; font-weight: 900; padding: 3px 10px; border-radius: 999px; background: var(--soft); color: var(--muted); }
.set-src.src-org { background: #eef0ff; color: #4338ca; }
.set-src.src-institute { background: #e9f8f3; color: #0f7a5c; }
.set-src.src-class { background: #fff4e5; color: #8a4b00; }
.set-body { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.set-fields { display: flex; flex-wrap: wrap; gap: 12px; }
.set-field { display: grid; gap: 4px; font-size: 13px; font-weight: 800; color: var(--muted); }
.set-unit { display: inline-flex; gap: 6px; align-items: center; }
.set-unit .set-input { width: 130px; }
.set-list, .set-rows { display: grid; gap: 8px; }
.set-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; padding: 8px; border: 1px dashed var(--line); border-radius: 12px; }
.set-choices { display: flex; flex-wrap: wrap; gap: 12px; }
.set-choice { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.set-link { background: none; border: 0; color: var(--pri); font: inherit; font-weight: 800; cursor: pointer; min-height: 44px; padding: 0 6px; }
.set-muted { color: var(--muted); font-weight: 700; }
.set-save { margin-top: 12px; height: 46px; padding: 0 22px; border: 0; border-radius: 12px; color: #fff; font: inherit; font-weight: 900; cursor: pointer; background: linear-gradient(135deg, var(--pri), var(--pri2)); }
.set-save:disabled { opacity: .6; cursor: wait; }
.set-toast { position: fixed; right: 20px; bottom: 20px; max-width: 420px; padding: 12px 16px; border-radius: 14px; font-weight: 800; background: #e9f8f3; color: #0f5e47; border: 1px solid #bfe9da; }
.set-toast.bad { background: #fdecec; color: #8f1d1d; border-color: #f6c1c1; }

@media (max-width: 860px) {
  .shell { grid-template-columns: 1fr; }
  .side { flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--line); }
  .side .more { display: none; }
}
/* H3 Part A: the WhatsApp (QR) pairing card (Settings, owner only) */
.set-group.set-wa .set-wa-state { font-weight: 800; margin-bottom: 8px; }
.set-group.set-wa .set-wa-qr { display: block; width: 264px; height: 264px; max-width: 100%; margin: 10px 0; background: #fff; image-rendering: pixelated; }
.set-group.set-wa .set-wa-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.set-group.set-wa .set-wa-actions .set-input { max-width: 220px; }
.set-group.set-wa .set-wa-limit { color: var(--muted, #555); margin-bottom: 8px; }

/* UI consistency (2026-10-23): "← Home" on the settings and health pages; the settings search box. */
.back-home { display: inline-flex; align-items: center; gap: .3em; min-height: 44px; color: var(--pri); font-weight: 800; text-decoration: none; }
.back-home:hover { text-decoration: underline; }
.set-scope .set-search { flex: 1 1 200px; min-width: 0; max-width: 100%; }
@media (max-width: 480px) { .set-scope select { min-width: 0; width: 100%; } }

/* UAT S1: the first-time setup page (/setup) */
.setup-page { max-width: 560px; margin: 32px auto; padding: 0 16px; }
.setup-page .form { display: grid; gap: 10px; padding: 16px; }
.setup-page .fld { display: grid; gap: 4px; }
.setup-page .err { color: #b91c1c; min-height: 1em; }

/* MASTER LOGIN (docs/MASTER_LOGIN_DESIGN.md §9): the founder's platform page (/master). Desktop look, theme A tokens only. */
.master-page { max-width: 1300px; margin: 0 auto; padding: 20px 24px 40px; }
.master-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.master-head .brand { margin: 0; }
.master-head .grow, .master-page .page-head .grow { flex: 1; }
.master-narrow { max-width: 560px; margin: 0 auto 16px; }
.master-page .form { display: grid; gap: 12px; padding: 20px; }
.master-page .form h1, .master-page h2 { font-family: var(--font-display); font-weight: 800; }
.master-page .form .actions, .master-temp .actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.master-page .err { min-height: 1em; }
.master-msg { max-width: 560px; margin: 0 auto 14px; padding: 12px 16px; border-radius: 14px; font-weight: 800; background: var(--soft); color: var(--pri); border: 1px solid var(--line); }
.master-msg.ok { color: var(--ink); }
.master-card { padding: 0; }
.master-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.master-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 900; padding: 12px 14px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.master-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.master-table tr:last-child td { border-bottom: 0; }
.master-table code { font-weight: 800; color: var(--ink); white-space: nowrap; }
.master-tag { margin-left: 8px; }
.master-num { white-space: nowrap; font-weight: 800; }
/* UI polish 2026-11-02 (founder: "chip lag raha hai"): the link stays on ONE line with Copy beside it, the row's
   buttons sit in ONE row on the right, names never squeeze. */
.master-table td:first-child { min-width: 210px; }
.master-table th, .master-table td { padding-left: 12px; padding-right: 12px; }
.master-table td:first-child b { display: block; line-height: 1.35; }
.master-tag { margin: 6px 0 0; display: inline-block; }
.master-link { white-space: nowrap; }
.master-link .muted { display: inline-block; vertical-align: middle; max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; margin-right: 8px; }
.master-table td:last-child { width: 1%; white-space: nowrap; }
.master-actions { display: flex; gap: 8px; flex-wrap: nowrap; justify-content: flex-end; align-items: center; }
.master-page .list-search { width: 260px; }
.master-page .page-head { align-items: center; margin-bottom: 6px; }
.master-page .page-head h1 { font-size: 24px; }
.master-page > section > .muted { margin-bottom: 14px; font-size: 14px; }
.master-table tbody tr:hover td { background: #fffaf7; }
.master-kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 14px; margin: 14px 0; }
.master-kv dt { color: var(--muted); font-weight: 800; }
.master-kv dd { font-weight: 800; word-break: break-all; }
.master-secret { font-size: 20px; letter-spacing: .06em; color: var(--pri); }

/* UI POLISH 2026-11-02 (founder: "akdum proper, inline, professional and modern"): pages that load app.css
   (master, settings, setup, health). ".main" is also the page column's class, so a ".btn.main" took the column's
   22px 28px padding and grew to 64 px: the button sets its own size here. One control height (40 px) everywhere. */
.btn.main { padding: 0 18px; }
.btn.main.small { padding: 0 12px; }
.set-input, .set-scope select { height: 40px; border-radius: 10px; font-size: 14px; font-weight: 600; }
textarea.set-input { height: auto; min-height: 84px; padding: 9px 12px; }
.set-save { height: 40px; padding: 0 20px; border-radius: 10px; font-weight: 800; }
.set-link { min-height: 32px; font-size: 13.5px; }
.set-row .set-link { align-self: flex-end; min-height: 40px; }
.set-row { align-items: flex-end; }
.set-unit { gap: 8px; color: var(--muted); font-weight: 800; }
.set-group { border-radius: 14px; }
.set-group h2 { font-size: 19px; }
.setup-page .fld .input, .setup-page .input { height: 40px; border-radius: 10px; }

/* SETTINGS LAYOUT 2026-11-02 (founder: "niche niche scroll karna padta he"): the attention strip, a left list of
   groups by topic with a status dot, one group at a time on the right. Layout only; the cards inside are unchanged. */
.set-attn { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; padding: 10px 14px; background: #fff7e6; border: 1px solid #f3c97a; border-radius: 14px; color: #6b3d00; }
.set-attn-title { margin-right: 6px; font-size: 14.5px; }
.set-attn-chip { height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid #f3c97a; background: #fff; color: #6b3d00; font: inherit; font-size: 13.5px; font-weight: 800; cursor: pointer; }
.set-attn-chip:hover { background: #fdebc8; }
.set-attn-chip.set-bad { border-color: #e08080; color: #7a1010; }
.set-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
.set-nav { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 8px; }
.set-nav-block { padding: 4px 0 6px; }
.set-nav-block + .set-nav-block { border-top: 1px solid var(--line); }
.set-nav-topic { padding: 8px 10px 4px; font-size: 11.5px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.set-nav-item { display: flex; width: 100%; align-items: center; gap: 9px; min-height: 34px; padding: 0 10px; border: 0; border-radius: 9px; background: none; color: var(--ink); font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer; }
.set-nav-item:hover { background: var(--soft); }
.set-nav-item.on { background: #ffece6; color: var(--pri); font-weight: 900; }
.set-nav-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-dot { flex: none; width: 14px; font-size: 11px; line-height: 1; text-align: center; }
.set-dot.dot-ok { color: #16a34a; }
.set-dot.dot-warn { color: #d97706; }
.set-dot.dot-unset { color: #9ca3af; }
.set-nav-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 4px 0 0; padding: 8px 10px 4px; border-top: 1px solid var(--line); font-size: 12px; font-weight: 700; color: var(--muted); }
.set-legend-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; margin-right: 8px; }
.set-group.set-off { display: none; }
.set-note { margin: 0 0 14px; padding: 12px 14px; background: #fff7e6; border: 1px solid #f3c97a; border-radius: 12px; color: #6b3d00; }
.set-note h3 { font-size: 15px; margin-bottom: 6px; }
.set-note p { margin-bottom: 6px; font-weight: 700; }
.set-note ul { margin: 0 0 0 20px; font-weight: 800; }
.set-note.set-bad { background: #fde8e8; border-color: #e08080; color: #7a1010; }
@media (max-width: 860px) {
  .set-layout { grid-template-columns: 1fr; }
  .set-nav { position: static; max-height: none; }
}

/* SETTINGS TABS 2026-11-02 (founder: "long scroll he usme under bhi TAB dedo"): one tab per setting in a long group;
   list rows (fee reminder steps, ...) sit side by side instead of one under the other. */
.set-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 6px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.set-tab { display: inline-flex; align-items: center; gap: 5px; max-width: 280px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; font-size: 13px; font-weight: 700; cursor: pointer; }
.set-tab:hover { background: var(--soft); }
.set-tab.on { background: #ffece6; border-color: var(--pri); color: var(--pri); font-weight: 900; }
.set-tab-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.set-group.has-tabs > .set-item { border-top: 0; }
.set-item.set-tab-off { display: none; }
.set-rows { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }

/* SETTINGS MENU 2026-11-02 (founder: "menu jesa bana do, click kare tab open ho"): each topic opens / closes on a click. */
button.set-nav-topic { display: flex; width: 100%; padding: 0 10px; align-items: center; gap: 6px; min-height: 34px; border: 0; border-radius: 9px; background: none; font-family: inherit; cursor: pointer; text-align: left; }
button.set-nav-topic:hover { background: var(--soft); color: var(--ink); }
.set-nav-topic-name { flex: 1; }
.set-nav-topic-warn { color: #d97706; font-size: 11px; letter-spacing: 0; }
.set-nav-chev { font-size: 15px; line-height: 1; transition: transform .15s; }
.set-nav-block.open .set-nav-chev { transform: rotate(90deg); }
.set-nav-block:not(.open) .set-nav-item { display: none; }
.set-nav-block:not(.open) { padding-bottom: 4px; }
/* Founder 2026-11-02: the Settings page has no side menu (its links only left Settings); the page uses the full width. */
.shell.set-shell { grid-template-columns: 1fr; }