/* ==========================================================================
   Arer — client-area theme, ported from panel-tasarim.html (brief v3)
   ==========================================================================
   panel-tasarim.html is the literal target: its <style> block is copied
   below almost verbatim, with `[data-theme="light"]` swapped for
   FOSSBilling's own `[data-bs-theme='light']` attribute (the page always
   renders data-bs-theme explicitly server-side, so the prefers-color-scheme
   fallback the mockup needed for a standalone preview is dropped here).

   Two audiences share this one file:
   1. The theme shell + the ONE overridden module (mod_index_dashboard) use
      the mockup's own classes (.shell, .rail, .menu, .service, .block …)
      exactly as designed.
   2. Every OTHER module template (invoices, orders, support, profile …)
      still renders stock Bootstrap classes (.card, .btn, .table, .badge,
      .alert, .form-control, .dropdown-menu, .pagination) — untouched, per
      brief section 6. Section 2 of this file repoints Bootstrap's own
      variables at the same tokens so those pages read as the same product
      without any template surgery.
   ========================================================================== */

/* ---------- 1. Design tokens (verbatim from panel-tasarim.html) --------- */

:root {
  --bg: #0b1626; --surface: #11213a; --raised: #182d4d; --sunken: #091220;
  --line: rgba(122, 141, 171, .20); --line-strong: rgba(122, 141, 171, .34);
  --ink: #e8eef8; --muted: #93aac9; --faint: #6b82a3;
  --accent: #1a6aff; --accent-soft: rgba(26, 106, 255, .16); --cyan: #35d6d0;
  --ok: #3ec98a; --ok-soft: rgba(62, 201, 138, .14);
  --warn: #e6ad45; --warn-soft: rgba(230, 173, 69, .14);
  --crit: #ef5f74; --crit-soft: rgba(239, 95, 116, .14);
  --shadow: 0 18px 44px rgba(0, 0, 0, .34);
  --r-s: 9px; --r-m: 13px; --r-l: 18px;
  --display: 'Space Grotesk', 'Segoe UI', system-ui, sans-serif;
  --body: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}

[data-bs-theme='light'] {
  --bg: #eaeff7; --surface: #ffffff; --raised: #f4f7fc; --sunken: #e2e9f4;
  --line: #dbe3ef; --line-strong: #c3d0e2;
  --ink: #16233a; --muted: #54698a; --faint: #7d8fab;
  --accent: #0d47bd; --accent-soft: rgba(13, 71, 189, .09); --cyan: #0f6f6b;
  --ok: #12885a; --ok-soft: rgba(18, 136, 90, .11);
  --warn: #9a6a10; --warn-soft: rgba(154, 106, 16, .12);
  --crit: #c0344a; --crit-soft: rgba(192, 52, 74, .10);
  --shadow: 0 10px 28px rgba(14, 27, 46, .09);
}

.num { font-variant-numeric: tabular-nums; }

/* ---------- 2. Bootstrap bridge (for every module page not overridden) -- */

:root {
  --bs-font-sans-serif: var(--body);
  --bs-body-bg: var(--bg);
  --bs-tertiary-bg: var(--raised);
  --bs-secondary-bg: var(--sunken);
  --bs-body-color: var(--ink);
  --bs-secondary-color: var(--muted);
  --bs-emphasis-color: var(--ink);
  --bs-border-color: var(--line-strong);

  --bs-primary: var(--accent);
  --bs-primary-rgb: 26, 106, 255;
  --bs-link-color: var(--accent);
  --bs-link-hover-color: var(--cyan);
  --bs-success: var(--ok);
  --bs-warning: var(--warn);
  --bs-danger: var(--crit);
  --bs-info: var(--cyan);

  --bs-border-radius: var(--r-l);
  --bs-border-radius-sm: var(--r-s);
  --bs-border-radius-lg: var(--r-l);
  --bs-box-shadow: var(--shadow);
}

[data-bs-theme='light'] { --bs-primary-rgb: 13, 71, 189; }

body { font-family: var(--body); margin: 0; }

h1, h2, h3, h4, h5, .h1, .h2, .h3, .h4, .h5,
.card-header h1, .card-header h2, .card-header h3 {
  font-family: var(--display);
  letter-spacing: -.018em;
}

.icon {
  height: 20px; width: 20px; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

[data-bs-theme='light'] .hide-theme-light,
[data-bs-theme='dark'] .hide-theme-dark { display: none !important; }

.card {
  --bs-card-bg: var(--surface);
  --bs-card-border-color: var(--line-strong);
  box-shadow: var(--shadow);
}

.card-header { background-color: var(--raised); }
.card-header h6 { font-size: 1rem; font-weight: 600; margin: 0; font-family: var(--display); }

.btn { font-family: var(--body); font-weight: 500; border-radius: var(--r-s); }

.btn-primary {
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff;
  --bs-btn-border-radius: var(--r-s);
}

.btn-outline-primary {
  --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent);
  --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent);
  --bs-btn-border-radius: var(--r-s);
}

.form-control, .form-select {
  border-radius: var(--r-s);
  border-color: var(--line-strong);
  background-color: var(--sunken);
}

.form-control:focus, .form-select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}

.badge[class*="bg-"], .badge[class*="text-bg-"] {
  color: #fff !important; font-weight: 600; border-radius: 999px;
}

.badge:empty { display: none; }

.alert {
  align-items: center; flex-direction: column !important;
  border-radius: var(--r-s);
}

.alert p { margin-bottom: 0; }

.alert-danger {
  --bs-alert-bg: var(--crit-soft); --bs-alert-border-color: color-mix(in srgb, var(--crit) 30%, transparent);
  --bs-alert-color: var(--crit);
}

.alert-warning {
  --bs-alert-bg: var(--warn-soft); --bs-alert-border-color: color-mix(in srgb, var(--warn) 30%, transparent);
  --bs-alert-color: var(--warn);
}

.alert-info {
  --bs-alert-bg: var(--accent-soft); --bs-alert-border-color: color-mix(in srgb, var(--accent) 20%, transparent);
  --bs-alert-color: var(--accent);
}

.pagination .page-link { border-radius: var(--r-s); }

/* Ledger look, not a cage (brief v4 §3) — applies to every stock module
   page that still uses Bootstrap's .table/.table-bordered (invoice list,
   service list, support tickets) since those templates aren't overridden;
   recoloring the existing classes, per the standing rule, rather than
   editing those templates. --bs-border-width:0 kills every vertical AND
   horizontal border-bordered adds, then a plain border-bottom brings back
   only the row separator. */
.table-bordered { --bs-border-width: 0; }
.table > :not(caption) > * > * {
  border-bottom: 1px solid var(--line-strong);
  padding: 14px 18px;
}
.table > thead > tr > th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--faint); font-weight: 600; background: transparent;
  border-bottom-color: var(--line-strong);
}
.table > tbody > tr:last-child > * { border-bottom: 0; }
.table-hover > tbody > tr:hover > * {
  --bs-table-accent-bg: color-mix(in srgb, var(--muted) 8%, transparent);
}
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

.dropdown-menu {
  background-color: var(--surface); border: 1px solid var(--line-strong);
  box-shadow: var(--shadow); border-radius: var(--r-s);
}

.modal-content { background-color: var(--surface); border: 1px solid var(--line-strong); }

.spinner-border { color: var(--accent); }

/* ---------- 3. Ported utility widgets ------------------------------------ */

.ts-input { color: inherit; }
.ts-wrapper.form-select { background-color: inherit; }
.ts-wrapper .ts-control { font-size: 14px; width: 100%; color: inherit; }
.ts-wrapper .ts-control.locale { width: 205px; }
.ts-wrapper .ts-dropdown { font-size: 14px; background-color: var(--surface); border-color: var(--line-strong); }
.ts-wrapper .ts-dropdown .active { background-color: color-mix(in srgb, var(--muted) 10%, transparent); color: inherit; }
.ts-wrapper .ts-dropdown .selected { background-color: color-mix(in srgb, var(--muted) 16%, transparent); }

/* Compact language switcher — a bare <select> otherwise sizes itself to
   its widest <option> text (a language's own native name can be long),
   which was making it one of the largest elements in the topline. */
.js-locale-selector, .ts-wrapper.js-locale-selector { width: auto; max-width: 130px; }
@media (max-width: 768px) { .ts-wrapper.js-locale-selector { width: 130px; } }

.invoice-gateway { border: 1px solid var(--line-strong); border-radius: var(--r-s); }
.invoice-gateway:hover, .invoice-gateway:has(.btn-check:checked) { border-color: var(--accent); }
.invoice-gateway .btn-check:checked + .btn { border-color: transparent; }

.fb-phone-country-code { width: 5.5rem; flex: 0 0 5.5rem; max-width: 5.5rem; }

.iti {
  --iti-border-color: var(--line-strong);
  --iti-country-selector-bg: var(--bs-body-bg);
  --iti-hover-color: color-mix(in srgb, var(--accent) 8%, transparent);
  --iti-icon-color: var(--muted);
  width: 100%;
}

.iti__country-selector, .iti__search-input { color: var(--bs-body-color); }
.iti__search-input { background-color: var(--bs-body-bg); }

.email-list { border-radius: 0; }
.email-list .list-group-item { border: 0; border-bottom: 1px solid var(--line); border-left: 2px solid transparent; }
.email-list .list-group-item.active {
  border-left: 2px solid var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--ink);
}

.db-avatar {
  display: inline-block; flex-shrink: 0; vertical-align: middle;
  background-color: var(--raised); background-size: 100% 100%;
  background-position: center; background-repeat: no-repeat;
  border-radius: 50%; overflow: hidden;
}

.fs-7 { font-size: .875rem; }

/* ---------- 4. Theme shell (panel-tasarim.html, verbatim) ---------------- */

.shell { display: grid; grid-template-columns: 236px 1fr; min-height: 100vh; }
.rail {
  --bs-offcanvas-width: 260px;
  background: var(--surface); border-right: 1px solid var(--line);
  padding: 22px 14px; display: flex; flex-direction: column; gap: 26px;
}
.rail .offcanvas-header { display: none; padding: 0 0 14px; }
@media (max-width: 767.98px) { .rail .offcanvas-header { display: flex; } }
.rail .btn-close { filter: var(--bs-btn-close-white-filter, none); }
[data-bs-theme='dark'] .rail .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.wordmark {
  padding: 0 10px; display: flex; align-items: center; gap: 10px;
  text-decoration: none;
}
.wordmark .mark { width: 28px; height: 28px; flex: none; display: block; }
.wordmark-text {
  font-family: var(--display); font-weight: 600; font-size: 17px;
  letter-spacing: -.018em; color: var(--ink); white-space: nowrap;
}
.wordmark-text b { color: var(--cyan); font-weight: 500; }
nav.menu { display: flex; flex-direction: column; gap: 1px; }
.menu a {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px;
  border-radius: var(--r-s); color: var(--muted); text-decoration: none;
  font-weight: 500; border-left: 2px solid transparent;
}
.menu a:hover { background: var(--raised); color: var(--ink); }
.menu a[aria-current] {
  background: var(--accent-soft); color: var(--accent);
  border-left-color: var(--accent); font-weight: 600;
}
.menu svg {
  width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.railfoot {
  margin-top: auto; padding: 13px 11px; border-top: 1px solid var(--line);
  font-size: 12px; color: var(--faint);
}
.railfoot b { display: block; color: var(--muted); font-weight: 600; margin-bottom: 2px; }

.main { padding: 26px 30px 44px; display: flex; flex-direction: column; gap: 22px; min-width: 0; }
/* Sticky footer: .shell is min-height:100vh and .main stretches to fill
   its row (grid default), so pushing the footer with margin-top:auto
   pins it to the viewport bottom on short pages without pulling it out
   of flow on long ones. */
.main #footer { margin-top: auto; }
.topline { display: flex; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.topline h1 { font-size: 22px; font-weight: 600; }
.topline p { margin: 3px 0 0; color: var(--muted); font-size: 13px; }
.who {
  margin-left: auto; display: flex; align-items: center; gap: 9px;
  background: var(--surface); border: 1px solid var(--line);
  padding: 6px 12px 6px 7px; border-radius: 999px; font-size: 13px;
  color: var(--ink); text-decoration: none;
  max-width: 260px;
}
/* Never let a long name push the chip across the topline; it truncates
   instead. Fixed sizing (not em-based) so the chip is the same physical
   size on a 1280 laptop and a 1920 monitor. */
.who-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.who-company { font-style: normal; color: var(--muted); margin-left: 4px; }
@media (max-width: 1199.98px) { .who-company { display: none; } }
@media (max-width: 575.98px) {
  .who { padding: 5px; gap: 0; max-width: none; }
  .who-name { display: none; }
}
.avatar {
  width: 26px; height: 26px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-size: 11px;
  font-weight: 600; font-family: var(--display); flex: none;
}

.railtoggle {
  display: none; border: 1px solid var(--line-strong); background: var(--surface);
  color: var(--ink); border-radius: var(--r-s); width: 36px; height: 36px;
  align-items: center; justify-content: center;
}

.status {
  display: flex; align-items: center; gap: 11px; padding: 11px 16px;
  border-radius: var(--r-m); font-size: 13px;
}
.status.is-ok { background: var(--ok-soft); border: 1px solid color-mix(in srgb, var(--ok) 34%, transparent); }
.status.is-warn { background: var(--warn-soft); border: 1px solid color-mix(in srgb, var(--warn) 34%, transparent); }
.status.is-crit { background: var(--crit-soft); border: 1px solid color-mix(in srgb, var(--crit) 34%, transparent); }
.status.is-ok b { color: var(--ok); font-weight: 600; }
.status.is-warn b { color: var(--warn); font-weight: 600; }
.status.is-crit b { color: var(--crit); font-weight: 600; }
.status a { color: inherit; text-decoration: underline; }
.dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.status.is-ok .dot { background: var(--ok); box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 55%, transparent); animation: pulse 2.6s ease-out infinite; }
.status.is-warn .dot { background: var(--warn); }
.status.is-crit .dot { background: var(--crit); }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }
@media (prefers-reduced-motion: reduce) { .dot { animation: none; } }

.service { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; box-shadow: var(--shadow); }
.service-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 19px 22px; border-bottom: 1px solid var(--line); }
.service-head h2 { font-size: 18px; font-weight: 600; }
.service-domain { padding: 13px 22px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.pill { font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.pill.is-ok { background: var(--ok-soft); color: var(--ok); }
.pill.is-warn { background: var(--warn-soft); color: var(--warn); }
.pill.is-crit { background: var(--crit-soft); color: var(--crit); }
.actions { margin-left: auto; display: flex; gap: 8px; }
.btn2 {
  border: 1px solid var(--line-strong); background: transparent; color: var(--ink);
  padding: 7px 13px; border-radius: var(--r-s); font-size: 13px; font-weight: 500;
  text-decoration: none; display: inline-flex; align-items: center;
}
.btn2:hover { border-color: var(--accent); color: var(--accent); }
.btn2.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn2.primary:hover { filter: brightness(1.1); color: #fff; }
.btn2:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

/* Dormant — no live metering source exists yet (CyberPanel's manager
   throws on synchronizeAccount()). Kept for when phase 2 adds it; the
   dashboard override does not render any element using these classes. */
.meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 1px; background: var(--line); }
.meter { background: var(--surface); padding: 17px 22px; }
.meter .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: var(--faint); font-weight: 600; }
.meter .v { font-family: var(--display); font-size: 20px; font-weight: 600; margin: 5px 0 9px; }
.meter .v small { font-size: 13px; color: var(--muted); font-weight: 500; }
.track { height: 4px; border-radius: 99px; background: var(--sunken); overflow: hidden; }
.fill { height: 100%; border-radius: 99px; background: var(--accent); }
.fill.warn { background: var(--warn); }
.meter .note { font-size: 12px; color: var(--muted); margin-top: 7px; }

.service-foot {
  display: flex; gap: 22px; flex-wrap: wrap; padding: 15px 22px;
  background: var(--raised); border-top: 1px solid var(--line); font-size: 13px; color: var(--muted);
}
.service-foot b { color: var(--ink); font-weight: 600; }

.cols { display: grid; grid-template-columns: 1.35fr 1fr; gap: 22px; align-items: start; }

/* .rail is also a Bootstrap .offcanvas-md — that class (not this file)
   turns it into a slide-in panel below 768px, with its own JS-driven
   show/hide and backdrop; this breakpoint just matches the same width
   so .main reclaims the full row once the rail stops being a column. */
@media (max-width: 767.98px) {
  .cols { grid-template-columns: 1fr; }
  .shell { grid-template-columns: 1fr; }
}
.railtoggle { display: inline-flex; }
@media (min-width: 768px) { .railtoggle { display: none; } }

.block { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-m); }
.block-head { display: flex; align-items: center; gap: 10px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
.block-head h3 { font-size: 15px; font-weight: 600; }
.block-head a { margin-left: auto; font-size: 12px; color: var(--accent); text-decoration: none; font-weight: 500; }
.block-head a:hover { text-decoration: underline; }
.block-head .pill { margin-left: auto; }
/* Tabs sitting in a block header (invoice unpaid/paid) — flush with the
   header's own bottom border instead of drawing a second line. */
.block-head .nav-tabs { border-bottom: 0; margin-bottom: -15px; }
.block-head .nav-tabs .nav-link {
  border: 0; border-bottom: 2px solid transparent; color: var(--muted);
  font-size: 13px; font-weight: 500; padding: 6px 14px 13px;
}
.block-head .nav-tabs .nav-link.active {
  background: transparent; color: var(--ink); border-bottom-color: var(--accent);
}

/* Key/value rows for the service detail page's SERVICE / RESOURCES /
   ACCESS blocks — the same ledger idea as the tables, one line per fact,
   label left and value right, no grid. */
.factlist > div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 18px; padding: 13px 18px; border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.factlist > div:last-child { border-bottom: 0; }
.factlist span { color: var(--muted); }
.factlist b { color: var(--ink); font-weight: 600; text-align: right; }
.factlist b em { font-style: normal; color: var(--muted); font-weight: 400; margin-left: 6px; }
.factlist a { color: var(--accent); text-decoration: none; }
.factlist a:hover { text-decoration: underline; }

/* Four short numeric facts read better as tiles than as label-left/
   value-right rows, where a "3 GB" ends up marooned at the far edge
   (brief A4 §4). The 1px gap over a line-coloured background gives the
   hairline separators without drawing four borders. Long-text facts
   (package, domain, IP, username) stay in .factlist. */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); }
.stat { background: var(--surface); padding: 14px 18px; }
.stat-k {
  display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600;
}
.stat-v {
  display: block; font-family: var(--display); font-size: 21px; font-weight: 600;
  color: var(--ink); margin-top: 3px; line-height: 1.15;
}
.stat-v small { font-size: 13px; color: var(--muted); font-weight: 500; }
@media (max-width: 767.98px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* Line under the service card head for an order that isn't live yet. */
.service-note { padding: 14px 22px; color: var(--muted); font-size: 13px; }

/* Domain sits on the title line rather than its own row — denser, and it
   reads as one identity ("Professional · tech2clash.com"). */
.service-head-domain { color: var(--muted); font-weight: 400; font-size: 14px; }
.service-head-domain::before { content: "·"; margin: 0 8px; color: var(--faint); }

/* Several service cards in a column (dashboard, My Sites). */
.cardlist { display: flex; flex-direction: column; gap: 18px; }
.cardlist + nav { margin-top: 18px; }

.seeall {
  align-self: flex-start; font-size: 13px; font-weight: 500;
  color: var(--accent); text-decoration: none;
}
.seeall:hover { text-decoration: underline; }

/* The one visible route to /order once Order left the sidebar. */
.newservice {
  display: flex; align-items: center; gap: 14px; padding: 15px 20px;
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r-m); text-decoration: none; color: var(--ink);
  transition: border-color .15s ease;
}
.newservice:hover { border-color: var(--accent); }
.newservice svg { width: 20px; height: 20px; flex: none; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; }
.newservice b { display: block; font-size: 14px; font-weight: 600; }
.newservice em { font-style: normal; font-size: 13px; color: var(--muted); }

.block-form { padding: 18px; border-top: 1px solid var(--line); }
.block-form h4 { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
.hint { font-size: 12.5px; color: var(--muted); line-height: 1.5; margin: 0 0 14px; max-width: 62ch; }
.block-form form + .hint { margin: 12px 0 0; }
.hint-foot { padding: 0 18px 15px; margin: -2px 0 0; }

/* Narrow screens: a long label next to a long value (an IP, a domain, a
   date plus "N days left") has nowhere to go on one line, so the fact
   rows stack and the service card's fact strip tightens up. */
@media (max-width: 575.98px) {
  .factlist > div { flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 16px; }
  .factlist b { text-align: left; }
  .service-foot { gap: 6px 16px; padding: 13px 16px; }
  .service-head, .block-head, .block-form, .block-actions { padding-left: 16px; padding-right: 16px; }
  .main { padding: 20px 16px 32px; }
  .block-actions .btn2 { flex: 1 1 auto; justify-content: center; }
}
.block-form .form-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.block-form .form-control, .block-form .form-select {
  width: 100%; padding: 10px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink); font: inherit;
}
.block-form .form-control:focus, .block-form .form-select:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}

.block-actions {
  display: flex; flex-wrap: wrap; gap: 8px; padding: 15px 18px;
  border-top: 1px solid var(--line); background: var(--raised);
}
.btn2.danger { border-color: color-mix(in srgb, var(--crit) 45%, transparent); color: var(--crit); }
.btn2.danger:hover { background: var(--crit-soft); border-color: var(--crit); color: var(--crit); }

.block table { width: 100%; border-collapse: collapse; font-size: 13px; }
.block th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; padding: 10px 18px; border-bottom: 1px solid var(--line);
}
.block td { padding: 14px 18px; border-bottom: 1px solid var(--line); }
.block tr:last-child td { border-bottom: 0; }
.block tbody tr:hover td { background: color-mix(in srgb, var(--muted) 6%, transparent); }
.block td.money { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.block-empty {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 36px 20px; text-align: center; color: var(--muted);
}
.block-empty svg { width: 28px; height: 28px; stroke: var(--faint); fill: none; stroke-width: 1.5; }
.block-empty b { color: var(--ink); font-size: 14px; }
.block-empty span { font-size: 13px; }
.tag { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.tag.paid { background: var(--ok-soft); color: var(--ok); }
.tag.due { background: var(--warn-soft); color: var(--warn); }
.tag.late { background: var(--crit-soft); color: var(--crit); }

.next { background: linear-gradient(160deg, var(--accent) 0%, #0f3fb0 100%); color: #fff; border-radius: var(--r-m); padding: 20px; box-shadow: var(--shadow); }
.next .k { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; opacity: .78; font-weight: 600; }
.next .amt { font-family: var(--display); font-size: 32px; font-weight: 600; margin: 6px 0 2px; font-variant-numeric: tabular-nums; }
.next .sub { opacity: .85; font-size: 13px; }
.next hr { border: 0; border-top: 1px solid rgba(255, 255, 255, .24); margin: 16px 0 13px; }
.next .lock { display: flex; gap: 9px; align-items: flex-start; font-size: 12.5px; line-height: 1.5; opacity: .92; }
.next .lock svg { width: 15px; height: 15px; flex: none; margin-top: 2px; stroke: currentColor; fill: none; stroke-width: 1.8; }

.support { padding: 18px; }
.support p { margin: 0 0 13px; color: var(--muted); font-size: 13px; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 40px 20px; }
.loginbox { width: 100%; max-width: 380px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-l); padding: 30px; box-shadow: var(--shadow); }
.loginbox .wordmark { padding: 0; margin-bottom: 22px; }
.loginbox .wordmark .mark { width: 32px; height: 32px; }
.loginbox .wordmark-text { font-size: 19px; }
.loginbox h2 { font-size: 19px; font-weight: 600; margin-bottom: 5px; }
.loginbox p.lead { color: var(--muted); font-size: 13px; margin: 0 0 22px; }
.loginbox label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 6px; }
.loginbox input, .loginbox .form-control, .loginbox .form-select {
  width: 100%; padding: 10px 13px; border-radius: var(--r-s);
  border: 1px solid var(--line-strong); background: var(--bg); color: var(--ink);
  font: inherit; margin-bottom: 15px;
}
.loginbox input:focus, .loginbox .form-control:focus, .loginbox .form-select:focus {
  outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.loginbox .form-check { margin-bottom: 15px; }
.loginbox small.form-hint { display: block; margin: -10px 0 15px; font-size: 12px; }
.loginbox .btn2.primary { width: 100%; padding: 11px; font-size: 14px; font-weight: 600; justify-content: center; }
.loginbox .alt { margin: 17px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.loginbox .alt a { color: var(--accent); text-decoration: none; font-weight: 500; }

[hidden] { display: none !important; }