/* KosBumul 4.8 — two deliberate visual systems.
   Light adapts the supplied Channel Analytics reference: a dark slim rail,
   warm glass surfaces, broad corner radii and a spacious feature panel.
   Dark retains the Cryptox composition. Theme never changes permissions. */
@media screen {
  .theme-toggle {
    display:inline-flex; align-items:center; justify-content:center; gap:8px;
    min-width:44px; min-height:44px; flex-shrink:0; padding:10px 13px;
    border:1px solid var(--control-border); border-radius:999px;
    background:var(--panel-raised); color:var(--ink); font:inherit;
    font-size:12px; line-height:1.4; font-weight:550; cursor:pointer;
  }
  .theme-toggle:hover { border-color:var(--accent-readable); }
  .theme-toggle:focus-visible { outline:2px solid var(--accent-readable); outline-offset:4px; }
  .theme-toggle svg { width:18px; height:18px; flex-shrink:0; }
  .theme-toggle .theme-icon-sun { display:none; }
  .theme-toggle .theme-icon-moon { display:block; }
  html[data-theme="light"] .theme-toggle .theme-icon-sun { display:block; }
  html[data-theme="light"] .theme-toggle .theme-icon-moon { display:none; }

  html[data-theme="light"] {
    color-scheme:light;
    --bg:#edeae4; --panel:rgba(255,255,255,.79); --panel-raised:#fff;
    --ink:#252820; --muted:#61645a; --line:rgba(79,78,62,.2);
    --accent:#bd4a20; --accent-text:#fff; --accent-readable:#9b3919;
    --green:#286247; --green-light:#e7f1e7;
    --red:#9f3036; --red-light:#fae8e6;
    --amber:#785016; --amber-light:#f7eed9;
    --paper:var(--panel); --canvas:var(--bg); --navy:#242722;
    --citron:#f0c8aa; --blue:var(--accent); --blue-dark:#953714;
    --soft:#e7e6df; --input-bg:#fffefa; --control-border:#88897d;
    --radius:28px;
    scrollbar-color:#a8a99b #edeae4;
  }
  html[data-theme="light"] body {
    color:var(--ink);
    background:radial-gradient(ellipse at 67% 0%,#f2d1bb4a,transparent 50%),var(--bg);
  }
  html[data-theme="light"] ::selection { color:#241f1b; background:#f4c8a7; }
  html[data-theme="light"] :focus-visible { outline-color:var(--accent-readable); }
  html[data-theme="light"] input,
  html[data-theme="light"] select,
  html[data-theme="light"] textarea,
  html[data-theme="light"] dialog { color-scheme:light; }
  html[data-theme="light"] input::placeholder,
  html[data-theme="light"] textarea::placeholder { color:#717266; }
  html[data-theme="light"] select option,
  html[data-theme="light"] select optgroup { color:var(--ink); background:#fffefa; }
  html[data-theme="light"] .btn {
    color:var(--ink); background:rgba(255,255,255,.7); border-color:#939386;
    border-radius:13px; box-shadow:inset 0 1px 0 #ffffff8f;
  }
  html[data-theme="light"] .btn:hover:not(:disabled) {
    color:var(--ink); background:#fffefa; border-color:#64695a;
  }
  html[data-theme="light"] .btn:active:not(:disabled) { background:#e7e7db; }
  html[data-theme="light"] .btn.primary {
    background:#282b24; color:#fff; border-color:#282b24; box-shadow:none;
  }
  html[data-theme="light"] .btn.primary:hover:not(:disabled) {
    background:#414738; color:#fff; border-color:#414738;
  }
  html[data-theme="light"] .btn.primary:active:not(:disabled) { background:#171b15; }
  html[data-theme="light"] .btn.ghost { background:transparent; border-color:transparent; }
  html[data-theme="light"] .btn.danger { color:var(--red); border-color:#b56565; background:transparent; }
  html[data-theme="light"] .btn.danger:hover:not(:disabled) { color:#8d242b; border-color:#a33c43; background:var(--red-light); }
  html[data-theme="light"] .btn.primary.danger { color:#fff; border-color:var(--red); background:var(--red); }
  html[data-theme="light"] .btn.primary.danger:hover:not(:disabled) { color:#fff; border-color:#7e2028; background:#7e2028; }
  html[data-theme="light"] .text-button { color:var(--accent-readable); }
  html[data-theme="light"] .text-button:hover { color:#75270c; }
  html[data-theme="light"] .theme-toggle { background:#fffdf9; color:var(--ink); }
  html[data-theme="light"] .brandmark { background:#282b24; color:#fff5e8; }
  html[data-theme="light"] .brand-dot,
  html[data-theme="light"] .brand .muted { color:var(--accent); }
  html[data-theme="light"] .skip-link { background:#282b24; color:#fff; }
  html[data-theme="light"] .boot { color:var(--muted); background:var(--bg); }

  /* Shared working surface and type. */
  html[data-theme="light"] .shell {
    background:radial-gradient(ellipse at 42% 13%,#f0c3a052,transparent 36%),
      linear-gradient(130deg,#e9e9e1,#e8e3dc 48%,#e5e5dc);
  }
  html[data-theme="light"] .topbar { background:transparent; border-color:var(--line); }
  html[data-theme="light"] .crumb b { color:var(--ink); }
  html[data-theme="light"] .top-actions .btn { background:transparent; }
  html[data-theme="light"] .top-actions .btn:hover { background:#fff9; }
  html[data-theme="light"] .page-heading .eyebrow { color:#6b6b5c; }
  html[data-theme="light"] .page-heading .eyebrow span { color:#767667; }
  html[data-theme="light"] .bottom-note { color:var(--muted); }
  html[data-theme="light"] .panel,
  html[data-theme="light"] .metric,
  html[data-theme="light"] .summary-grid .metric,
  html[data-theme="light"] .resident-card,
  html[data-theme="light"] .settings-card,
  html[data-theme="light"] .occupancy-stats article,
  html[data-theme="light"] .payment-info {
    color:var(--ink); background:var(--panel); border-color:#ffffffbc;
    border-radius:28px; box-shadow:inset 0 1px 0 #ffffffc7,0 5px 18px #3e352c04;
  }
  html[data-theme="light"] .metric-top { color:#5d6154; }
  html[data-theme="light"] .metric-foot { color:var(--muted); }
  html[data-theme="light"] .metric-icon { color:var(--green); background:#e1ebda; border-radius:10px; }
  html[data-theme="light"] .metric.out .metric-icon { color:#78513c; background:#f1e3d8; }
  html[data-theme="light"] .metric.pending .metric-icon { color:var(--amber); background:#f3e9ce; }
  html[data-theme="light"] .balance {
    color:#2e3028; border-color:#f8e9d9; border-radius:30px;
    background:radial-gradient(ellipse at 88% 26%,#f0b380b0,transparent 65%),
      linear-gradient(120deg,#f9eadb,#f2d2b8);
    box-shadow:inset 0 1px 0 #ffffffb8;
  }
  html[data-theme="light"] .balance:before {
    inset:auto -95px -235px auto; width:490px; height:490px;
    border:1px solid #9b6b4833; border-radius:50%; opacity:1;
    background:linear-gradient(120deg,#f8efd833,transparent);
    box-shadow:0 0 0 38px #af765b0a,0 0 0 80px #af765b09;
  }
  html[data-theme="light"] .balance:after { border-color:#9b6b4829; }
  html[data-theme="light"] .balance-label { color:#62513e; }
  html[data-theme="light"] .balance-label>svg { color:#785135; }
  html[data-theme="light"] .balance-footer { color:#685a49; }
  html[data-theme="light"] .balance-footer span { background:#6d7854; }
  html[data-theme="light"] .balance-context>p { color:#66503e; }
  html[data-theme="light"] .balance-symbol { color:#765138; border-color:#a8805859; background:#fff6; }
  html[data-theme="light"] .balance-link { color:#543a27; }
  html[data-theme="light"] .chart text { fill:#626858; }
  html[data-theme="light"] .chart .grid { stroke:#c8cdc0; }
  html[data-theme="light"] .chart .bar-in { fill:#607451; }
  html[data-theme="light"] .chart .bar-out { fill:#b36943; }
  html[data-theme="light"] .chart .last { fill:#f1ebe0; }
  html[data-theme="light"] .legend i { background:#607451; }
  html[data-theme="light"] .legend i.expense { background:#b36943; }
  html[data-theme="light"] .progress-track { stroke:#dfdfd3; }
  html[data-theme="light"] .progress-fill { stroke:#607451; }

  /* Forms retain native affordances and 16px input text. */
  html[data-theme="light"] .field input,
  html[data-theme="light"] .field select,
  html[data-theme="light"] .field textarea,
  html[data-theme="light"] .toolbar select,
  html[data-theme="light"] .month-field,
  html[data-theme="light"] .search-box {
    background:var(--input-bg); border-color:var(--control-border); color:var(--ink);
    border-radius:12px;
  }
  html[data-theme="light"] .month-field input,
  html[data-theme="light"] .search-box input { color:var(--ink); background:transparent; }
  html[data-theme="light"] .field label { color:#44493d; }
  html[data-theme="light"] .field input[readonly],
  html[data-theme="light"] .field textarea[readonly] { background:#f0f0e9; color:#505546; border-color:#bcbfaf; }
  html[data-theme="light"] .field input:disabled,
  html[data-theme="light"] .field select:disabled,
  html[data-theme="light"] .field textarea:disabled { background:#e9e9e2; color:#686e60; border-color:#bcbfaf; }
  html[data-theme="light"] .field input[aria-invalid="true"],
  html[data-theme="light"] .field select[aria-invalid="true"],
  html[data-theme="light"] .field textarea[aria-invalid="true"],
  html[data-theme="light"] .field input:user-invalid,
  html[data-theme="light"] .field select:user-invalid,
  html[data-theme="light"] .field textarea:user-invalid { border-color:var(--red); }
  html[data-theme="light"] .field input:focus-visible,
  html[data-theme="light"] .field select:focus-visible,
  html[data-theme="light"] .field textarea:focus-visible,
  html[data-theme="light"] .toolbar select:focus-visible,
  html[data-theme="light"] .month-field:focus-within,
  html[data-theme="light"] .search-box:focus-within { border-color:var(--accent-readable); }
  html[data-theme="light"] .announcement { color:#604f3e; background:#f7ede1; border-color:#dbcbb7; border-left-color:var(--accent); border-radius:18px; }
  html[data-theme="light"] .announcement strong { color:var(--ink); }
  html[data-theme="light"] .form-note,
  html[data-theme="light"] .resident-confirm,
  html[data-theme="light"] .deadline-preview { background:#eeeee5; color:#5d6354; border-color:#c6c9ba; border-radius:14px; }
  html[data-theme="light"] .notice { color:var(--amber); background:var(--amber-light); border-color:#c7ab75; border-radius:14px; }
  html[data-theme="light"] .form-error { color:var(--red); background:var(--red-light); border-color:#d6a2a2; border-radius:14px; }
  html[data-theme="light"] .deadline-card { background:#edeee4; border-color:#c8cbbd; border-radius:22px; }
  html[data-theme="light"] .deadline-icon { color:#5d664b; background:#fffdf7; border-color:#cacfbf; border-radius:13px; }
  html[data-theme="light"] .deadline-leading .eyebrow,
  html[data-theme="light"] .deadline-leading p:last-child,
  html[data-theme="light"] .deadline-status p { color:#616854; }
  html[data-theme="light"] .deadline-link { color:#49513f; background:transparent; border-color:#8f9880; }
  html[data-theme="light"] .deadline-card.late { background:#f6eddc; border-color:#d8c39c; }
  html[data-theme="light"] .deadline-card.late .deadline-icon { color:var(--amber); background:#fff9ec; border-color:#cfb580; }
  html[data-theme="light"] .deadline-card.late .deadline-leading .eyebrow,
  html[data-theme="light"] .deadline-card.late .deadline-leading p:last-child,
  html[data-theme="light"] .deadline-card.late .deadline-status p { color:#74542a; }
  html[data-theme="light"] .deadline-card.complete { background:#e7eee1; border-color:#b8c9ac; }
  html[data-theme="light"] .deadline-card.complete .deadline-icon { color:var(--green); background:#f6faf0; border-color:#b1c39f; }
  html[data-theme="light"] .badge { border-radius:7px; }
  html[data-theme="light"] .badge.paid { color:var(--green); background:var(--green-light); border-color:#b4c7ad; }
  html[data-theme="light"] .badge.unpaid { color:var(--amber); background:var(--amber-light); border-color:#d8c19a; }
  html[data-theme="light"] .badge.neutral { color:#525848; background:#eeeee7; border-color:#c8ccbd; }
  html[data-theme="light"] .badge.danger { color:var(--red); background:var(--red-light); border-color:#d8aaaa; }

  /* Calm ledger surfaces, with readable labels in mobile cards. */
  html[data-theme="light"] .filter-pills { color:var(--ink); background:#dfdfd5; border-color:#c8cbbd; border-radius:14px; }
  html[data-theme="light"] .filter-pill { color:#535b49; border-radius:10px; }
  html[data-theme="light"] .filter-pill:hover { color:var(--ink); background:#f6f6ee; }
  html[data-theme="light"] .filter-pill[aria-pressed="true"] { color:#fff; background:#30382c; border-color:#30382c; }
  html[data-theme="light"] .pill-count { color:#535b49; background:#d1d5c7; }
  html[data-theme="light"] .filter-pill[aria-pressed="true"] .pill-count { color:#2d3527; background:#e2eccf; }
  html[data-theme="light"] .table-wrap { scrollbar-color:#aaaE9c #f4f4ec; }
  html[data-theme="light"] th { color:#59634e; background:#eeefe6; border-color:#d9ddd0; }
  html[data-theme="light"] td { color:#444c3c; border-color:#dedfd5; }
  html[data-theme="light"] tbody tr:hover { background:#f0f1e8; }
  html[data-theme="light"] .transaction-cell strong,
  html[data-theme="light"] .person strong { color:var(--ink); }
  html[data-theme="light"] .tx-icon { color:var(--green); background:#e5eddc; }
  html[data-theme="light"] .tx-icon.out { color:#80523a; background:#f3e6d9; }
  html[data-theme="light"] .income-text { color:var(--green); }
  html[data-theme="light"] .expense-text { color:#55503d; }
  html[data-theme="light"] .voided td,
  html[data-theme="light"] .voided .transaction-cell strong,
  html[data-theme="light"] .voided .amount { color:var(--muted); }
  html[data-theme="light"] .helper-detail summary { color:#515b45; }
  html[data-theme="light"] .helper-detail summary:hover { color:var(--accent-readable); }
  html[data-theme="light"] .empty svg { color:#787e6e; }
  html[data-theme="light"] .resident-card.exited { background:#e9eae1; }
  html[data-theme="light"] .resident-card:hover { border-color:#a5ae94; }
  html[data-theme="light"] .resident-card:focus-within { border-color:#7e8a6c; }
  html[data-theme="light"] .resident-top .avatar,
  html[data-theme="light"] .resident-confirm .avatar,
  html[data-theme="light"] .person .avatar { color:#4e5b3b; background:#e8ebd9; border-color:#c5cbb4; border-radius:13px; }
  html[data-theme="light"] .occupancy-icon { color:var(--green); background:#e5eddc; border-radius:13px; }
  html[data-theme="light"] .occupancy-icon.future { color:#80523a; background:#f3e6d9; }
  html[data-theme="light"] .occupancy-icon.exited { color:#656c59; background:#e5e6dc; }
  html[data-theme="light"] .stay-period dd { color:#414d35; }
  html[data-theme="light"] .resident-actions .btn { border-radius:11px; }
  html[data-theme="light"] .payment-info-icon,
  html[data-theme="light"] .settings-icon { color:#885233; background:#f6e6d7; border-color:#d4bba2; border-radius:13px; }
  html[data-theme="light"] .payment-info p strong { color:#414d35; }
  html[data-theme="light"] .settings-list dd { color:#414d35; }
  html[data-theme="light"] .date-setting { background:#ebeee1; border-color:#c6ccbb; border-radius:14px; }

  /* Native modal behavior and QRIS quiet zone are preserved. */
  html[data-theme="light"] dialog {
    color:var(--ink); background:#fafaf3; border-color:#cacdbf; border-radius:24px;
    box-shadow:0 24px 96px #252a2845; scrollbar-color:#9da58e #fafaf3;
  }
  html[data-theme="light"] dialog::backdrop { background:#232820a6; }
  html[data-theme="light"] .modal-head { background:#f1f2e9; border-color:#d2d7c6; }
  html[data-theme="light"] .modal-head h2 { color:var(--ink); }
  html[data-theme="light"] .qris-payment-amount { background:#e9eddf; border-color:#c4cdb7; color:var(--ink); border-radius:18px; }
  html[data-theme="light"] .qris-payment-amount span { color:#546345; }
  html[data-theme="light"] .qris-image { background:#fff; border-color:#fff; }
  html[data-theme="light"] .qris-preview { background:#f2f3e9; border-color:#949c83; border-radius:14px; }
  html[data-theme="light"] .qris-steps { color:#566349; }
  html[data-theme="light"] .field input[type="file"] { background:#fffefa; }
  html[data-theme="light"] .field input[type="file"]::file-selector-button { color:#3e4c32; background:#e9eddf; border-color:#929e80; border-radius:8px; }
  html[data-theme="light"] .field input[type="file"]::file-selector-button:hover { background:#dce3cd; }
  html[data-theme="light"] #wa-preview { color:#38452f; background:#f2f4e9; }
  html[data-theme="light"] #wa-status { color:var(--green); }
  html[data-theme="light"] #captcha-status { color:var(--muted); }
  html[data-theme="light"] #captcha-status[data-status="verified"] { color:var(--green); }
  html[data-theme="light"] #captcha-status[data-status="error"],
  html[data-theme="light"] #captcha-status[data-status="expired"] { color:var(--red); }
  html[data-theme="light"] .toast { color:#fffdf3; background:#30382a; border-color:#818a73; box-shadow:0 12px 36px #30332533; border-radius:14px; }

  /* Legacy access elements are covered as well as the dedicated login route. */
  html[data-theme="light"] .access-nav { color:var(--ink); background:#ffffff8f; border-color:#c6c8b9; box-shadow:inset 0 1px 0 #fff; }
  html[data-theme="light"] .access-nav a,
  html[data-theme="light"] .access-nav button { color:#555e49; }
  html[data-theme="light"] .access-nav a { color:#4b553d; background:#e8ecde; }
  html[data-theme="light"] .access-nav button:hover { color:#303c26; background:#e7ebdc; }
  html[data-theme="light"] .access-header-note svg { color:#69735a; }
  html[data-theme="light"] .access-story h1,
  html[data-theme="light"] .access-story h1 span { color:var(--ink); }
  html[data-theme="light"] .access-story h1+p { color:var(--muted); }
  html[data-theme="light"] .access-kicker { color:#795038; }
  html[data-theme="light"] .access-orbit { opacity:.2; }
  html[data-theme="light"] .access-card {
    background:#fffdf5ed; border-color:#fffdf8; border-radius:28px;
    box-shadow:0 16px 64px #6458490d,inset 0 1px 0 #fff;
  }
  html[data-theme="light"] .access-icon { color:#825036; background:#f7e6d6; border-color:#d4b69a; border-radius:14px; }
  html[data-theme="light"] .access-card-heading .eyebrow { color:#6d735f; }
  html[data-theme="light"] .access-description,
  html[data-theme="light"] .access-help { color:var(--muted); }
  html[data-theme="light"] .role-switch { background:#eaece0; border-color:#d0d5c1; border-radius:14px; }
  html[data-theme="light"] .role-switch button { color:#5a644c; border-radius:10px; }
  html[data-theme="light"] .role-switch button.active { color:#fff; background:#30382a; box-shadow:none; }
  html[data-theme="light"] .access-footer { color:#626a55; border-color:#c7cdbb; }
}

/* A vertical charcoal rail follows the uploaded reference only in light desktop.
   Accessible link names remain in the DOM; native title also aids discoverability. */
@media screen and (min-width:1200px) {
  html[data-theme="light"] .shell {
    position:relative; max-width:1536px; min-height:calc(100dvh - 48px);
    margin:24px max(24px,calc((100vw - 1536px)/2));
    border:1px solid #ffffff80; border-radius:34px;
    box-shadow:0 24px 70px #49432e0a; isolation:isolate;
  }
  html[data-theme="light"] .sidebar {
    position:fixed; inset:40px auto 40px max(40px,calc((100vw - 1536px)/2 + 16px));
    width:76px; min-height:0; height:calc(100dvh - 80px); margin:0;
    padding:20px 12px 17px; display:flex; flex-direction:column;
    align-items:center; justify-content:flex-start; gap:0;
    color:#f6f4ed; background:#252824; border:1px solid #41463b;
    border-radius:25px; overflow:visible;
  }
  html[data-theme="light"] .sidebar .brand { min-width:0; width:48px; min-height:48px; padding:0; margin-bottom:30px; display:grid; place-items:center; }
  html[data-theme="light"] .sidebar .brandmark { width:44px; height:44px; color:#fff7e8; background:transparent; }
  html[data-theme="light"] .sidebar .brandmark svg { width:28px; height:28px; }
  html[data-theme="light"] .sidebar .brand>div,
  html[data-theme="light"] .sidebar .nav a>span,
  html[data-theme="light"] .sidebar .side-footer>div:last-child {
    position:absolute; width:1px; height:1px; padding:0; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  html[data-theme="light"] .sidebar .nav {
    display:flex; flex-direction:column; gap:10px; width:100%; margin:0;
    padding:0; border:0; border-radius:0; background:transparent;
  }
  html[data-theme="light"] .sidebar .nav a {
    position:relative; width:50px; min-height:50px; padding:13px;
    display:flex; justify-content:center; gap:0; border:1px solid transparent;
    border-radius:15px; color:#d6dbcE; background:transparent;
  }
  html[data-theme="light"] .sidebar .nav a svg { width:21px; height:21px; }
  html[data-theme="light"] .sidebar .nav a:hover { color:#fff; border-color:#626956; background:#373e31; }
  html[data-theme="light"] .sidebar .nav a.active { color:#fff; background:#494f41; border-color:#828b74; box-shadow:inset 0 1px 0 #ffffff0d; }
  html[data-theme="light"] .sidebar .nav a.active:after { content:""; position:absolute; width:4px; height:4px; right:-7px; top:50%; border-radius:50%; background:#eabe97; transform:translateY(-50%); }
  html[data-theme="light"] .sidebar :focus-visible { outline-color:#edc3a0; }
  html[data-theme="light"] .side-bottom { margin-top:auto; min-width:0; padding-top:28px; }
  html[data-theme="light"] .side-footer { padding:0; }
  html[data-theme="light"] .side-footer .avatar { width:42px; height:42px; color:#fff3dd; background:#505c41; border-color:#768562; }
  html[data-theme="light"] .workspace { margin:0 0 0 106px; }
  html[data-theme="light"] .topbar { margin:0 32px; min-height:94px; padding:20px 0; }
  html[data-theme="light"] .main { margin:0 32px; padding:12px 0 32px; max-width:none; }
  html[data-theme="light"] .page-heading { margin-bottom:30px; }
  html[data-theme="light"] .page-heading h1 { font-size:40px; font-weight:550; }
  html[data-theme="light"] .page-heading .eyebrow { display:none; }
  html[data-theme="light"] .summary-grid { grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr)); gap:18px; }
  html[data-theme="light"] .summary-grid .balance { grid-column:1; grid-row:1/3; min-height:362px; display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; gap:26px; padding:32px; }
  html[data-theme="light"] .balance-main { flex:0 1 auto; width:100%; }
  html[data-theme="light"] .balance-value { font-size:clamp(34px,3.2vw,49px); margin:34px 0 15px; }
  html[data-theme="light"] .balance-value.long-value { font-size:clamp(26px,2.5vw,38px); }
  html[data-theme="light"] .balance-context { align-items:flex-start; min-width:0; width:100%; text-align:left; }
  html[data-theme="light"] .balance-symbol { display:none; }
  html[data-theme="light"] .balance-link { width:100%; justify-content:space-between; border-top:1px solid #af886645; padding-top:17px; }
  html[data-theme="light"] .summary-grid .metric { min-height:171px; padding:25px; }
  html[data-theme="light"] .summary-grid .metric-value { font-size:clamp(24px,2.3vw,34px); margin:21px 0 10px; }
  html[data-theme="light"] .summary-grid .metric-value.long-value { font-size:24px; }
  html[data-theme="light"] .summary-grid .metric.pending { grid-column:2/4; background:#f2f3e8d9; }
  html[data-theme="light"] .summary-grid .metric.pending .metric-value { font-size:34px; }
  html[data-theme="light"] .overview-grid { gap:20px; }
}
@media screen and (min-width:1200px) and (max-height:660px) {
  /* Let a short desktop window scroll to every rail item. */
  html[data-theme="light"] .sidebar {
    position:absolute; inset:16px auto auto 16px;
    height:auto; min-height:430px;
  }
}
@media screen and (min-width:768px) and (max-width:1199px) {
  html[data-theme="light"] .shell { margin:12px; border:1px solid #fff9; border-radius:28px; min-height:calc(100dvh - 24px); }
  html[data-theme="light"] .sidebar { border-color:#c8ccbb; }
  html[data-theme="light"] .nav { background:#252824; border-color:#454d3c; border-radius:18px; }
  html[data-theme="light"] .nav a { color:#d6dbcd; border-radius:12px; }
  html[data-theme="light"] .nav a:hover { color:#fff; background:#3c4335; }
  html[data-theme="light"] .nav a.active { color:#fff; background:#515b43; }
  html[data-theme="light"] .side-footer .avatar { color:#3e5130; background:#e0e7d3; border-color:#a8b398; }
  html[data-theme="light"] .main { padding-top:16px; }
  html[data-theme="light"] .summary-grid .metric { padding:22px 19px; border-radius:24px; }
  html[data-theme="light"] .balance { min-height:235px; }
}
@media screen and (max-width:767px) {
  .top-actions .theme-toggle { padding:10px; width:44px; }
  .top-actions .theme-toggle [data-theme-label] { display:none; }
  html[data-theme="light"] .topbar { background:#edeae4ed; border-color:#d5d7c9; }
  html[data-theme="light"] .shell { background:radial-gradient(ellipse at 55% 6%,#f0c3a03b,transparent 25%),#edeae4; }
  html[data-theme="light"] .summary-grid .metric,
  html[data-theme="light"] .panel,
  html[data-theme="light"] .resident-card,
  html[data-theme="light"] .settings-card,
  html[data-theme="light"] .payment-info { border-radius:23px; }
  html[data-theme="light"] .balance { border-radius:27px; }
  html[data-theme="light"] .balance-value { font-size:42px; }
  html[data-theme="light"] .balance-value.long-value { font-size:30px; }
  html[data-theme="light"] .balance-context { margin-top:22px; }
  html[data-theme="light"] .balance-link { border-top:1px solid #bfa4836b; padding-top:13px; justify-content:space-between; }
  html[data-theme="light"] .occupancy-stats article { border-radius:19px; }
  html[data-theme="light"] .mobile-nav { color:#525b45; background:#fafbf3; border-color:#b7c0a8; box-shadow:0 -6px 32px #38432c0a; }
  html[data-theme="light"] .mobile-nav a { color:#5d6650; border-radius:12px; }
  html[data-theme="light"] .mobile-nav a.active { color:#314326; background:#e2e9d5; }
  html[data-theme="light"] .mobile-nav a:focus-visible { outline-color:#52683f; }
  html[data-theme="light"][data-platform="ios"] .mobile-nav { border-color:#b7c0a8; box-shadow:0 9px 30px #38432c26; }
  html[data-theme="light"][data-platform="android"] .mobile-nav a.active { color:#314326; background:transparent; }
  html[data-theme="light"][data-platform="android"] .mobile-nav a.active svg { background:#dfe8ce; }
  html[data-theme="light"] .dues-table td,
  html[data-theme="light"] .transaction-table td,
  html[data-theme="light"] .recent-table td { color:#444c3c; }
  html[data-theme="light"] .dues-table .income-text,
  html[data-theme="light"] .transaction-table .income-text,
  html[data-theme="light"] .recent-table .income-text { color:var(--green); }
  html[data-theme="light"] .dues-table .voided td,
  html[data-theme="light"] .transaction-table .voided td,
  html[data-theme="light"] .recent-table .voided td { color:var(--muted); }
}

/* QRIS loading: only the decorative ring moves; the payment code stays static. */
@media screen {
  .qris-loading {
    min-height:300px; display:flex; flex-direction:column;
    align-items:center; justify-content:center; gap:12px;
    padding:32px 18px; text-align:center;
    color:var(--ink); background:var(--panel-raised);
    border:1px solid var(--line); border-radius:14px;
  }
  .qris-loading-spinner {
    display:block; width:40px; height:40px; box-sizing:border-box;
    margin-bottom:10px; flex-shrink:0; border:3px solid var(--line);
    border-top-color:var(--accent-readable); border-radius:50%;
    animation:qris-loading-spin .85s linear infinite;
  }
  .qris-loading .qris-loading-title {
    margin:0; color:var(--ink); font-size:15px; font-weight:600; line-height:1.6;
  }
  .qris-loading-note { color:var(--muted); font-size:13px; line-height:1.7; }
  .qris-preview .qris-loading { min-height:220px; }
}
@keyframes qris-loading-spin { to { transform:rotate(360deg); } }
@media screen and (max-width:600px) {
  .qris-display .qris-loading { min-height:260px; }
}
@media (prefers-reduced-motion:reduce) {
  .qris-loading-spinner { animation:none; }
}