/* MIQA parents app – calm theme (design "Entwurf 3"): petrol sidebar, cream banner, sage accents.
   On top of Bootstrap 5.3. Components only use the tokens; dark mode swaps the tokens.
   Fonts are self-hosted (SIL OFL, see static/fonts). */

@font-face { font-family: "Nunito"; src: url("../fonts/nunito-latin.woff2") format("woff2"); font-weight: 400 800; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("../fonts/dmsans-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root, [data-bs-theme="light"] {
  --m-ground: #FBFBF8; --m-card: #FFFFFF; --m-ink: #1F2A27; --m-muted: #5F6B66; --m-line: #E7E8E2;
  --m-side: #173A36; --m-side-ink: #E6EFEB; --m-side-muted: #A3B9B1; --m-side-label: #94ADA4; --m-side-hover: #21483F;
  --m-side-line: rgba(255, 255, 255, .12);
  --m-pill: #D7ECDD; --m-pill-ink: #173A36; --m-badge: #2E5A50;
  --m-primary: #2F6B5F; --m-on-primary: #FFFFFF; --m-primary-soft: #EAF4E7; --m-primary-line: #CFE5CC;
  --m-hero: #F0EEDF; --m-hero-ink: #2B3A33; --m-frame: #F7F2E5;
  --m-peach: #F6E7D6; --m-peach-ink: #8A4F1A; --m-lilac: #ECE6F5; --m-lilac-ink: #5E4598;
  --m-sky: #E3ECF1; --m-sky-ink: #365F79; --m-mint: #DDEFE6; --m-mint-ink: #24614F;
  --m-sun: #FBF0CF; --m-sun-ink: #7A5700; --m-rose: #F8E3DF; --m-rose-ink: #A1402F;
  --m-spark: #2F6B5F; --m-spark-peach: #C08A4E; --m-spark-lilac: #9580C8; --m-spark-sky: #6F93AA;
  --m-brand: #0E7C7B; --m-robot-face: #22333F; --m-robot-eye: #8EF0E6; --m-coral: #E9785F; --m-leaf: #8DB59A; --m-leaf-ink: #5B8A6F;
  --m-shadow: 0 1px 2px rgba(31, 42, 39, .05); --m-pop: 0 14px 34px -14px rgba(31, 42, 39, .28);
  --bs-body-bg: var(--m-ground); --bs-body-color: var(--m-ink); --bs-border-color: var(--m-line);
  --bs-secondary-color: var(--m-muted); --bs-emphasis-color: var(--m-ink); --bs-tertiary-bg: var(--m-ground);
  --bs-link-color-rgb: 47, 107, 95; --bs-link-hover-color-rgb: 31, 42, 39;
  --bs-body-font-family: "DM Sans", "Segoe UI", system-ui, sans-serif; --bs-body-font-size: .9rem; --bs-body-line-height: 1.5;
  --bs-focus-ring-color: rgba(47, 107, 95, .35);
  color-scheme: light;
}
[data-bs-theme="dark"] {
  --m-ground: #101614; --m-card: #17201D; --m-ink: #E7EEEA; --m-muted: #9DAEA7; --m-line: #26322E;
  --m-side: #0C1513; --m-side-hover: #16241F;
  --m-pill: #2B4A40; --m-pill-ink: #E7EEEA; --m-badge: #24423A;
  --m-primary: #7FC4B2; --m-on-primary: #0E1A17; --m-primary-soft: #1C2C26; --m-primary-line: #2C443B;
  --m-hero: #1D2621; --m-hero-ink: #E7EEEA; --m-frame: #2A332D;
  --m-peach: #3A2E22; --m-peach-ink: #E9BE8C; --m-lilac: #2E283B; --m-lilac-ink: #C7B6EE;
  --m-sky: #22303A; --m-sky-ink: #A9C8DB; --m-mint: #1F3A30; --m-mint-ink: #9ED8C1;
  --m-sun: #383017; --m-sun-ink: #F1D27C; --m-rose: #3B2421; --m-rose-ink: #F2A89A;
  --m-spark: #7FC4B2; --m-brand: #5FC7C4; --m-robot-face: #0E1820;
  --m-shadow: none; --m-pop: 0 14px 34px -14px rgba(0, 0, 0, .7);
  --bs-link-color-rgb: 127, 196, 178; --bs-link-hover-color-rgb: 231, 238, 234;
  --bs-focus-ring-color: rgba(127, 196, 178, .4);
  color-scheme: dark;
}

body { background: var(--m-ground); color: var(--m-ink); min-height: 100vh; }
h1, h2, h3, .disp { font-family: "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif; font-weight: 800; letter-spacing: -.01em; }
h1 { font-size: clamp(1.55rem, 1.2rem + 1vw, 1.9rem); margin: 0; }
h2 { font-size: 1.06rem; margin: 0; } h3 { font-size: .95rem; margin: 0; }
a { font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
.text-muted-m { color: var(--m-muted) !important; }
.small-m { font-size: .82rem; }
.min-w-0 { min-width: 0; }
.ic { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--m-primary); outline-offset: 2px; }
.visually-hidden-focusable:focus { background: var(--m-card); padding: .5rem 1rem; border-radius: 10px; z-index: 2000; }

/* ---------- tones ---------- */
.t-peach { background: var(--m-peach); color: var(--m-peach-ink); } .t-lilac { background: var(--m-lilac); color: var(--m-lilac-ink); }
.t-sky { background: var(--m-sky); color: var(--m-sky-ink); } .t-mint { background: var(--m-mint); color: var(--m-mint-ink); }
.t-sun { background: var(--m-sun); color: var(--m-sun-ink); } .t-rose { background: var(--m-rose); color: var(--m-rose-ink); }
.t-line { background: var(--m-line); color: var(--m-muted); } .t-primary { background: var(--m-primary-soft); color: var(--m-primary); }
.ink-primary { color: var(--m-primary); } .ink-rose { color: var(--m-rose-ink); }
.fill-spark { background: var(--m-spark); } .fill-sky { background: var(--m-spark-sky); } .fill-peach { background: var(--m-spark-peach); }
.fill-line { background: var(--m-line); }

/* ---------- building blocks ---------- */
.m-card { background: var(--m-card); border: 1px solid var(--m-line); border-radius: 16px; box-shadow: var(--m-shadow); }
.m-card-hi { background: var(--m-primary-soft); border-color: var(--m-primary-line); }
.card-pad { padding: 1.25rem 1.4rem; }
.card-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.card-sub { margin: .1rem 0 0; color: var(--m-muted); font-size: .82rem; }
.chip-ic { width: 30px; height: 30px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; }
.thumb { width: 40px; height: 40px; border-radius: 10px; display: inline-grid; place-items: center; flex: none; }
.thumb-lg { width: 56px; height: 56px; border-radius: 14px; }
.tag { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .6rem; border-radius: 7px; font-size: .78rem; font-weight: 700; }
.eyebrow { font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--m-muted); }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: inline-grid; place-items: center; font-family: "Nunito", sans-serif; font-weight: 800; font-size: .8rem; flex: none; background: var(--m-pill); color: var(--m-pill-ink); }
.avatar-sm { width: 32px; height: 32px; font-size: .75rem; }
.avatar-lg { width: 56px; height: 56px; font-size: 1.1rem; }
.bar { height: 6px; border-radius: 9px; background: var(--m-line); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 9px; }
.list-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 1px solid var(--m-line); }
.list-row:last-child { border-bottom: 0; }
.list-row.top { align-items: flex-start; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-line); flex: none; }
.status-dot.on { background: var(--m-spark); }
.card-foot { display: flex; justify-content: center; align-items: center; gap: .4rem; padding: .75rem 0; border-top: 1px solid var(--m-line); font-size: .82rem; color: var(--m-ink); }
.empty { border: 1.5px dashed var(--m-line); border-radius: 16px; padding: 2rem; text-align: center; color: var(--m-muted); }

/* Buttons */
.btn { --bs-btn-font-weight: 700; --bs-btn-font-size: .88rem; border-radius: 10px; min-height: 40px; padding-inline: 1rem; display: inline-flex; align-items: center; justify-content: center; gap: .45rem; }
.btn-lg { min-height: 48px; --bs-btn-font-size: .95rem; }
.btn-miqa { --bs-btn-bg: var(--m-primary); --bs-btn-color: var(--m-on-primary); --bs-btn-border-color: var(--m-primary);
  --bs-btn-hover-bg: var(--m-primary); --bs-btn-hover-color: var(--m-on-primary); --bs-btn-hover-border-color: var(--m-primary);
  --bs-btn-active-bg: var(--m-primary); --bs-btn-active-color: var(--m-on-primary); --bs-btn-active-border-color: var(--m-primary); }
.btn-miqa:hover { filter: brightness(1.08); }
.btn-soft { --bs-btn-bg: var(--m-card); --bs-btn-color: var(--m-ink); --bs-btn-border-color: var(--m-line);
  --bs-btn-hover-bg: var(--m-ground); --bs-btn-hover-color: var(--m-ink); --bs-btn-hover-border-color: var(--m-line);
  --bs-btn-active-bg: var(--m-primary-soft); --bs-btn-active-color: var(--m-ink); --bs-btn-active-border-color: var(--m-primary-line); font-weight: 500; }
.btn-hi { --bs-btn-bg: var(--m-primary-soft); --bs-btn-color: var(--m-ink); --bs-btn-border-color: var(--m-primary-line);
  --bs-btn-hover-bg: var(--m-primary-soft); --bs-btn-hover-color: var(--m-ink); --bs-btn-hover-border-color: var(--m-primary); font-weight: 500; }
.btn-danger-soft { --bs-btn-bg: var(--m-card); --bs-btn-color: var(--m-rose-ink); --bs-btn-border-color: var(--m-line);
  --bs-btn-hover-bg: var(--m-rose); --bs-btn-hover-color: var(--m-rose-ink); --bs-btn-hover-border-color: var(--m-rose);
  --bs-btn-active-bg: var(--m-rose); --bs-btn-active-color: var(--m-rose-ink); }
.btn-danger-m { --bs-btn-bg: var(--m-rose-ink); --bs-btn-color: #fff; --bs-btn-border-color: var(--m-rose-ink);
  --bs-btn-hover-bg: var(--m-rose-ink); --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--m-rose-ink); --bs-btn-active-color: #fff; }
[data-bs-theme="dark"] .btn-danger-m { --bs-btn-color: #2A0B07; --bs-btn-hover-color: #2A0B07; --bs-btn-active-color: #2A0B07; }
.iconbtn { width: 36px; height: 36px; border-radius: 9px; border: 0; background: transparent; color: var(--m-muted); display: inline-grid; place-items: center; padding: 0; }
.iconbtn:hover { background: var(--m-ground); color: var(--m-ink); }
.date-chip { height: 40px; display: inline-flex; align-items: center; gap: .45rem; padding: 0 .8rem; border-radius: 10px; border: 1px solid var(--m-line); background: var(--m-card); font-size: .85rem; }

/* Forms */
.form-label { font-weight: 700; font-size: .82rem; margin-bottom: .35rem; }
.input-m { display: flex; align-items: center; gap: .55rem; min-height: 46px; padding: 0 .35rem 0 .8rem; border-radius: 10px; border: 1px solid var(--m-line); background: var(--m-card); color: var(--m-muted); }
.input-m:focus-within { border-color: var(--m-primary); box-shadow: 0 0 0 3px var(--bs-focus-ring-color); }
.input-m input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: .95rem; color: var(--m-ink); outline: none; min-height: 44px; }
.input-m.is-invalid { border-color: var(--m-rose-ink); }
.input-m .iconbtn { width: 38px; height: 38px; }
.form-check-input:checked { background-color: var(--m-primary); border-color: var(--m-primary); }
.code-input { font-family: "Nunito", ui-monospace, monospace; font-weight: 800; font-size: 1.25rem; letter-spacing: .14em; text-transform: uppercase; }
.form-select { border-radius: 9px; border-color: var(--m-line); background-color: var(--m-card); color: var(--m-ink); font-size: .85rem; min-height: 36px; }
.alert { border-radius: 12px; border: 1px solid transparent; display: flex; gap: .6rem; align-items: flex-start; font-size: .88rem; }
.alert-success { background: var(--m-mint); color: var(--m-ink); border-color: var(--m-primary-line); } .alert-success .ic { color: var(--m-mint-ink); }
.alert-danger { background: var(--m-rose); color: var(--m-ink); } .alert-danger .ic { color: var(--m-rose-ink); }
.alert-info { background: var(--m-sky); color: var(--m-ink); } .alert-info .ic { color: var(--m-sky-ink); }
.strength { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin-top: .4rem; }
.strength span { height: 4px; border-radius: 9px; background: var(--m-line); }
.strength[data-level="1"] span:nth-child(-n+1), .strength[data-level="2"] span:nth-child(-n+2) { background: var(--m-spark-peach); }
.strength[data-level="3"] span:nth-child(-n+3), .strength[data-level="4"] span { background: var(--m-spark); }

/* ---------- app shell ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar { --bs-offcanvas-bg: var(--m-side); --bs-offcanvas-color: var(--m-side-ink); --bs-offcanvas-width: 280px; background: var(--m-side); color: var(--m-side-ink); }
.sidebar .offcanvas-body { display: flex; flex-direction: column; padding: 1.1rem .75rem .75rem; min-height: 100%; }
@media (min-width: 992px) {
  /* offcanvas-lg makes itself transparent from lg up – the sidebar keeps its petrol ground */
  .sidebar { flex: 0 0 256px; position: sticky; top: 0; height: 100vh; overflow-y: auto; background-color: var(--m-side) !important; }
  .sidebar .offcanvas-body { flex-grow: 1; }
}
.brand { display: flex; align-items: center; gap: .6rem; color: inherit; text-decoration: none; }
.brand:hover { color: inherit; text-decoration: none; }
.side-brand { display: flex; align-items: center; justify-content: space-between; padding: .25rem .4rem 1.25rem; margin-bottom: .75rem; border-bottom: 1px solid var(--m-side-line); }
.brand-tile { width: 44px; height: 44px; border-radius: 12px; background: var(--m-pill); display: grid; place-items: center; flex: none; }
[data-bs-theme="dark"] .brand-tile { background: #E6EFEB; }
.brand-word { font-family: "Nunito", ui-rounded, sans-serif; font-weight: 800; font-size: 1.5rem; letter-spacing: -.01em; }
.side-label { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 700; color: var(--m-side-label); padding: 1.1rem .75rem .45rem; }
.side-link { display: flex; align-items: center; gap: .65rem; min-height: 40px; padding: 0 .65rem; white-space: nowrap; border-radius: 10px; color: var(--m-side-ink); font-size: .88rem; font-weight: 500; text-decoration: none; }
.side-link:hover { background: var(--m-side-hover); color: var(--m-side-ink); text-decoration: none; }
.side-link[aria-current="page"] { background: var(--m-pill); color: var(--m-pill-ink); font-weight: 700; }
.side-count { margin-left: auto; min-width: 24px; height: 22px; padding: 0 .45rem; border-radius: 7px; background: var(--m-badge); color: var(--m-side-ink); font-size: .74rem; font-weight: 700; display: grid; place-items: center; }
.side-link[aria-current="page"] .side-count { background: var(--m-card); color: var(--m-pill-ink); }
.side-foot { border-top: 1px solid var(--m-side-line); padding-top: .4rem; margin-top: .4rem; }
.side-user { display: flex; align-items: center; gap: .6rem; padding: .6rem .5rem .2rem; }
.side-user .iconbtn { color: var(--m-side-muted); } .side-user .iconbtn:hover { background: var(--m-side-hover); color: var(--m-side-ink); }
.text-side-muted { color: var(--m-side-muted); }
.sidebar .btn-close { filter: invert(1) grayscale(1) brightness(2); }

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 1020; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .65rem 1.75rem; background: var(--m-card); border-bottom: 1px solid var(--m-line); }
.crumbs { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--m-muted); }
.crumbs b { color: var(--m-ink); }
.top-sep { width: 1px; height: 24px; background: var(--m-line); margin: 0 .25rem; }
.lang-btn, .profile-btn { height: 36px; display: inline-flex; align-items: center; gap: .3rem; border: 0; background: transparent; color: var(--m-muted); padding: 0 .4rem; border-radius: 9px; font-size: .85rem; }
.lang-btn:hover, .profile-btn:hover { background: var(--m-ground); color: var(--m-ink); }
.dropdown-menu { --bs-dropdown-bg: var(--m-card); --bs-dropdown-color: var(--m-ink); --bs-dropdown-border-color: var(--m-line);
  --bs-dropdown-link-color: var(--m-ink); --bs-dropdown-link-hover-bg: var(--m-ground); --bs-dropdown-link-hover-color: var(--m-ink);
  --bs-dropdown-link-active-bg: var(--m-primary-soft); --bs-dropdown-link-active-color: var(--m-ink); --bs-dropdown-divider-bg: var(--m-line);
  --bs-dropdown-link-disabled-color: var(--m-muted); border-radius: 14px; padding: .5rem; box-shadow: var(--m-pop); min-width: 240px; font-size: .88rem; }
.dropdown-item { border-radius: 8px; min-height: 40px; display: flex; align-items: center; gap: .6rem; }
.dropdown-item.danger { color: var(--m-rose-ink); }
.content { flex: 1 1 auto; width: 100%; max-width: 1240px; padding: 1.6rem 1.75rem 2rem; display: flex; flex-direction: column; gap: 1.25rem; }
@media (max-width: 575.98px) { .content { padding: 1.1rem 1rem 1.5rem; } .topbar { padding: .6rem 1rem; } }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .8rem; }
.page-head > .grow { flex: 1 1 320px; min-width: 0; }
.page-head p { margin: .1rem 0 0; color: var(--m-muted); font-size: .85rem; }
.tabs-m { display: flex; flex-wrap: wrap; gap: 1.6rem; border-bottom: 1px solid var(--m-line); }
.tabs-m a { display: inline-flex; align-items: center; gap: .45rem; min-height: 40px; color: var(--m-muted); font-weight: 500; font-size: .88rem; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.tabs-m a:hover { color: var(--m-ink); text-decoration: none; }
.tabs-m a[aria-current="true"] { color: var(--m-ink); font-weight: 700; border-color: var(--m-primary); }
.footer { border-top: 1px solid var(--m-line); color: var(--m-muted); font-size: .78rem; }
.footer-inner { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; padding: 1rem 1.75rem calc(1rem + env(safe-area-inset-bottom, 0px)); }
.footer a { color: var(--m-muted); font-weight: 500; }

/* ---------- dashboard parts ---------- */
.hero { position: relative; overflow: hidden; border-radius: 18px; background: var(--m-hero); color: var(--m-hero-ink); border: 1px solid var(--m-line); padding: 1.6rem 1.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem; }
.hero-text { flex: 1 1 320px; min-width: 0; }
.hero-title { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.15rem); line-height: 1.12; margin: .6rem 0; }
.hero-art { flex: 0 1 360px; width: 360px; max-width: 100%; }
.hero a { color: var(--m-hero-ink); }
.kpi { padding: 1rem 1rem .9rem; display: flex; flex-direction: column; gap: .35rem; height: 100%; }
.kpi-top { display: flex; justify-content: space-between; align-items: center; font-size: .82rem; color: var(--m-muted); }
.kpi-val { font-family: "Nunito", sans-serif; font-weight: 800; font-size: 1.6rem; line-height: 1.15; }
.kpi-sub { font-size: .76rem; color: var(--m-muted); display: flex; gap: .3rem; align-items: center; }
.spark { fill: none; stroke-width: 1.6; stroke-linejoin: round; stroke-linecap: round; }
.chart svg { width: 100%; height: auto; display: block; }
.chart .grid line { stroke: var(--m-line); stroke-dasharray: 3 4; }
.chart .base { stroke: var(--m-line); }
.chart .axis { fill: var(--m-muted); font-size: 11px; font-family: "DM Sans", sans-serif; }
.chart .area { fill: var(--m-spark); opacity: .12; }
.chart .line { fill: none; stroke: var(--m-spark); stroke-width: 2.4; stroke-linecap: round; }
.chart .pt { fill: var(--m-spark); stroke: var(--m-card); stroke-width: 2; }
.legend { display: flex; gap: .9rem; font-size: .76rem; color: var(--m-muted); }
.legend i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: .3rem; vertical-align: middle; }
.day { width: 46px; font-size: .82rem; line-height: 1.25; flex: none; }
.example { color: var(--m-ink); white-space: nowrap; }
.example s { color: var(--m-rose-ink); }
.table-view summary { cursor: pointer; font-weight: 700; color: var(--m-primary); min-height: 40px; display: flex; align-items: center; font-size: .85rem; }
.table-view table { --bs-table-bg: transparent; --bs-table-color: var(--m-ink); --bs-table-border-color: var(--m-line); font-size: .85rem; }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.plan-day { min-height: 160px; padding: .85rem; display: flex; flex-direction: column; gap: .55rem; }
.plan-free { flex: 1 1 auto; border: 1.5px dashed var(--m-line); border-radius: 10px; display: grid; place-items: center; color: var(--m-muted); font-size: .8rem; padding: .5rem; text-align: center; }
.goal-day { width: 38px; height: 38px; border-radius: 10px; display: inline-grid; place-items: center; font-weight: 700; font-size: .8rem; border: 1px solid var(--m-line); color: var(--m-muted); }
.goal-day.on { background: var(--m-primary); border-color: var(--m-primary); color: var(--m-on-primary); }
.device-card { padding: 0; }
.device-head { display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem .9rem 1.15rem; }
.device-head h2 { margin: 0; }
.device-rename { padding: 0 1.15rem 1rem; }
.device-parts { list-style: none; margin: 0; padding: .7rem 1.15rem; border-top: 1px solid var(--m-line); display: flex; flex-wrap: wrap; gap: .4rem .5rem; }
.part-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; border: 1px solid transparent; background: var(--m-primary-soft); color: var(--m-ink); font-size: .82rem; font-weight: 600; cursor: help; }
.part-chip > .ic { width: 16px; height: 16px; color: var(--m-primary); }
.part-chip .mark { display: inline-grid; color: var(--m-primary); }
.part-chip .mark .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.part-chip.missing, .part-chip.unavailable { background: transparent; border: 1px dashed var(--m-line); color: var(--m-muted); }
.part-chip.missing > .ic, .part-chip.unavailable > .ic, .part-chip.missing .mark, .part-chip.unavailable .mark { color: var(--m-muted); }
.iconbtn-danger:hover { color: var(--m-rose-ink); }
.child-checks { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.child-checks legend { float: none; width: 100%; }
.child-check { display: flex; align-items: center; gap: .6rem; min-height: 44px; cursor: pointer; }
.child-check .form-check-input { margin: 0; width: 1.2rem; height: 1.2rem; flex: none; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--m-muted); display: inline-block; }
.live-dot.on { background: var(--m-spark); box-shadow: 0 0 0 4px var(--m-primary-soft); }
.public { min-height: 100vh; display: flex; flex-direction: column; }
.public-top { display: flex; align-items: center; gap: .6rem; padding: .8rem 1.75rem; background: var(--m-side); color: var(--m-side-ink); }
.public-top .brand { color: var(--m-side-ink); }
.public-top .iconbtn { color: var(--m-side-muted); } .public-top .iconbtn:hover { background: var(--m-side-hover); color: var(--m-side-ink); }
.public-content { margin: 0 auto; max-width: 960px; }
.kind-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .9rem; }
.kind { display: flex; flex-direction: column; gap: .45rem; padding: 1.1rem; border-width: 2px; color: var(--m-ink); font-weight: 500; text-decoration: none; }
.kind:hover { border-color: var(--m-primary-line); text-decoration: none; color: var(--m-ink); }
.kind[aria-current="true"] { border-color: var(--m-primary); background: var(--m-primary-soft); }
.modal-content { background: var(--m-card); color: var(--m-ink); border-radius: 16px; border: 1px solid var(--m-line); }

/* ---------- auth pages ---------- */
.auth { min-height: 100vh; display: flex; flex-wrap: wrap; }
.auth-side { flex: 1 1 460px; min-height: 420px; position: relative; overflow: hidden; background: var(--m-side); color: var(--m-side-ink); padding: 2rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem; }
.auth-side .brand { color: var(--m-side-ink); }
.auth-banner { background: var(--m-hero); color: var(--m-hero-ink); border-radius: 18px; padding: 1.6rem 1.6rem 1rem; display: flex; flex-direction: column; gap: .5rem; margin-top: auto; }
.auth-banner .eyebrow { color: var(--m-muted); }
.auth-banner h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); line-height: 1.12; color: var(--m-hero-ink); }
.auth-points { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; font-size: .88rem; color: var(--m-side-ink); }
.auth-points li { display: flex; gap: .6rem; align-items: center; }
.auth-points .chip-ic { background: rgba(255, 255, 255, .08); color: var(--m-pill); }
.auth-main { flex: 1 1 420px; display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 2rem 1.25rem; background: var(--m-ground); }
.auth-box { width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 1.1rem; }
.auth-box h2 { font-size: 1.7rem; }
.auth-tabs { display: flex; gap: 1.6rem; border-bottom: 1px solid var(--m-line); }
.auth-tabs a { min-height: 40px; display: inline-flex; align-items: center; color: var(--m-muted); font-weight: 500; border-bottom: 2px solid transparent; margin-bottom: -1px; text-decoration: none; }
.auth-tabs a[aria-current="page"] { color: var(--m-ink); font-weight: 700; border-color: var(--m-primary); }
.auth-foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; font-size: .78rem; color: var(--m-muted); }
.auth-foot a { color: var(--m-muted); font-weight: 500; }

/* theme toggle shows the theme you switch to */
.theme-icon-light { display: none; }
[data-bs-theme="dark"] .theme-icon-light { display: inline-flex; }
[data-bs-theme="dark"] .theme-icon-dark { display: none; }
.theme-icon-dark, .theme-icon-light { align-items: center; }

@keyframes blink { 0%, 92%, 100% { transform: scaleY(1); } 96% { transform: scaleY(.1); } }
.eye { animation: blink 5s infinite; transform-origin: center; transform-box: fill-box; }
@media (prefers-reduced-motion: reduce) { .eye { animation: none; } }
@media (forced-colors: active) { .bar > span { background: CanvasText; } .side-link[aria-current="page"] { outline: 2px solid CanvasText; } }
form .form-select { min-height: 44px; }
.subject-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; align-items: start; }
.topic-list { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: .55rem; }
.topic-list li::marker { color: var(--m-muted); font-weight: 700; }
.topic-list b { display: block; font-size: .9rem; }
.topic-list span { display: block; font-size: .8rem; color: var(--m-muted); }