/* Generated by scripts/build_frontend_assets.php. Edit source layers, not this bundle. */

/* ---- public/assets/css/app.css ---- */
:root {
  --primary: #001f5f;
  --primary-dark: #00153f;
  --primary-soft: #e9effb;
  --accent: #00a55a;
  --accent-strong: #8fd72d;
  --bg: #f4f7fc;
  --bg-deep: #ecf1f8;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --surface-muted: #f7f9fd;
  --text: #142349;
  --text-strong: #07112b;
  --muted: #62708b;
  --border: #d9e2ef;
  --border-strong: #c5d1e2;
  --danger: #c43227;
  --danger-soft: #fff0ee;
  --warning: #a35c00;
  --warning-soft: #fff6df;
  --success: #008b4e;
  --success-soft: #e8fbf2;
  --sidebar: #07183f;
  --sidebar-raised: #0c265d;
  --sidebar-text: #edf3ff;
  --sidebar-muted: #9eb2d7;
  --shadow-sm: 0 5px 18px rgba(0, 31, 95, 0.06);
  --shadow: 0 16px 45px rgba(0, 31, 95, 0.09);
  --shadow-lg: 0 28px 70px rgba(0, 21, 63, 0.16);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --sidebar-width: 278px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color-scheme: light;
}

html[data-theme="dark"] {
  --bg: #07112b;
  --bg-deep: #0a1736;
  --surface: #0d1b3a;
  --surface-raised: #102247;
  --surface-muted: #0b1833;
  --text: #edf3ff;
  --text-strong: #ffffff;
  --muted: #9cb0d6;
  --border: #20365f;
  --border-strong: #2d4675;
  --primary-soft: #122a58;
  --success-soft: #10382a;
  --warning-soft: #3a2a10;
  --danger-soft: #3d1e1b;
  --shadow-sm: 0 5px 18px rgba(0, 0, 0, 0.22);
  --shadow: 0 18px 48px rgba(0, 0, 0, 0.28);
  --shadow-lg: 0 28px 70px rgba(0, 0, 0, 0.38);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); scroll-behavior: smooth; }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); line-height: 1.55; text-rendering: optimizeLegibility; }
body::selection { background: rgba(0, 165, 90, 0.24); color: var(--text-strong); }
img { max-width: 100%; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: none; }
h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.15; letter-spacing: -0.025em; margin-top: 0; }
h1 { font-size: clamp(2rem, 3.5vw, 3rem); margin-bottom: 0.35rem; }
h2 { font-size: clamp(1.15rem, 2vw, 1.42rem); }
h3 { font-size: 1rem; }
p { margin-top: 0; }
hr { border: 0; border-top: 1px solid var(--border); margin: 20px 0; }
.muted { color: var(--muted); }
.tiny { font-size: 0.78rem; color: var(--muted); }
.center { text-align: center; }
.stack { display: grid; gap: 20px; }
.inline, .button-row, .action-group { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.span-2 { grid-column: 1 / -1; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
label { display: grid; gap: 8px; color: var(--text); font-size: 0.83rem; font-weight: 750; }
input, select, textarea {
  width: 100%;
  min-height: 46px;
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  padding: 10px 13px;
  color: var(--text);
  background: var(--surface);
  outline: none;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
textarea { min-height: 108px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: color-mix(in srgb, var(--primary) 40%, var(--border-strong)); }
input:focus, select:focus, textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
input[type="color"] { padding: 5px; height: 46px; }
input[type="file"] { padding: 8px; }
.check { display: flex; align-items: center; grid-template-columns: auto 1fr; gap: 10px; min-height: 44px; }
.check input { width: auto; min-height: auto; accent-color: var(--primary); }

/* Buttons */
.button, .nav-button, .icon-button, .chip-button {
  border: 0;
  cursor: pointer;
  font: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.button {
  min-height: 44px;
  padding: 10px 17px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff;
  font-weight: 820;
  box-shadow: 0 8px 20px color-mix(in srgb, var(--primary) 24%, transparent);
}
.button:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px color-mix(in srgb, var(--primary) 30%, transparent); }
.button:active { transform: translateY(0) scale(0.985); }
.button.secondary { background: var(--surface); color: var(--primary); border: 1px solid var(--border-strong); box-shadow: var(--shadow-sm); }
.button.secondary:hover { background: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.button.warning, .nav-button.warning { background: var(--warning-soft); color: var(--warning); box-shadow: none; }
.button.danger { background: var(--danger-soft); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 28%, var(--border)); box-shadow: none; }
.button.small { min-height: 34px; padding: 6px 10px; border-radius: 9px; font-size: 0.78rem; }
.button.large { min-height: 50px; padding: 13px 20px; }
.button.full { width: 100%; }
.button:disabled { opacity: 0.46; cursor: not-allowed; transform: none; box-shadow: none; }
.text-link { display: inline-flex; align-items: center; gap: 7px; font-size: 0.86rem; font-weight: 800; }
.text-link:hover { gap: 10px; }
.icon-button { width: 42px; height: 42px; border-radius: 12px; display: inline-grid; place-items: center; background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.icon-button:hover { background: var(--surface-muted); transform: translateY(-1px); }
.icon-button svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Alerts */
.alert { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: start; gap: 11px; padding: 14px 15px; margin-bottom: 18px; border: 1px solid; border-radius: 14px; box-shadow: var(--shadow-sm); animation: alert-in 0.3s ease both; }
.alert.success { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 24%, var(--border)); }
.alert.error { color: var(--danger); background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 24%, var(--border)); }
.alert-dot { width: 9px; height: 9px; margin-top: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 12%, transparent); }
.alert button { border: 0; padding: 0 3px; color: currentColor; background: transparent; cursor: pointer; font-size: 1.25rem; line-height: 1; opacity: 0.68; }
.alert.is-leaving { animation: alert-out 0.22s ease forwards; }

/* Application shell */
.owner-body { overflow-x: hidden; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); transition: grid-template-columns 0.24s ease; }
.sidebar {
  position: sticky;
  top: 0;
  z-index: 30;
  height: 100vh;
  padding: 18px 16px;
  color: var(--sidebar-text);
  background:
    radial-gradient(circle at 20% 0%, rgba(183, 239, 69, 0.12), transparent 26%),
    linear-gradient(180deg, #0b3027 0%, #071f1a 100%);
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.sidebar::-webkit-scrollbar { width: 5px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.14); border-radius: 999px; }
.sidebar-head { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.brand { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 5px 7px; color: #fff; font-size: 1.08rem; font-weight: 920; letter-spacing: -0.03em; }
.brand:hover { color: #fff; }
.brand-mark { position: relative; width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(135deg, var(--accent), #f2ff99); box-shadow: 0 7px 20px rgba(183, 239, 69, 0.18); }
.brand-mark::before { content: ""; width: 18px; height: 18px; border: 3px solid #0a3328; border-radius: 50%; }
.brand-mark span:first-child { position: absolute; width: 3px; height: 26px; border-radius: 999px; background: #0a3328; transform: rotate(42deg); }
.brand-mark span:last-child { position: absolute; width: 6px; height: 6px; right: 4px; top: 3px; border-radius: 50%; background: #0a3328; }
.brand-copy { min-width: 0; display: grid; line-height: 1.05; }
.brand-copy small, .brand small { margin-top: 5px; color: var(--sidebar-muted); font-size: 0.66rem; font-weight: 650; letter-spacing: 0.02em; }
.sidebar-collapse { width: 34px; height: 34px; color: var(--sidebar-muted); border-color: rgba(255, 255, 255, 0.08); background: rgba(255, 255, 255, 0.05); }
.workspace-card { min-height: 66px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 15px; background: rgba(255, 255, 255, 0.055); }
.workspace-avatar, .profile-avatar { display: grid; place-items: center; border-radius: 12px; font-weight: 900; }
.workspace-avatar { width: 39px; height: 39px; background: rgba(183, 239, 69, 0.14); color: var(--accent); border: 1px solid rgba(183, 239, 69, 0.18); }
.workspace-copy, .profile-copy { min-width: 0; display: grid; line-height: 1.22; }
.workspace-copy strong, .profile-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.82rem; }
.workspace-copy small, .profile-copy small { color: var(--sidebar-muted); font-size: 0.68rem; margin-top: 4px; }
.workspace-status { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(183, 239, 69, 0.1); }
.sidebar-nav, .sidebar nav { display: grid; gap: 14px; }
.nav-group { display: grid; gap: 3px; }
.nav-section-title { padding: 0 11px 4px; color: #70958a; font-size: 0.62rem; font-weight: 850; letter-spacing: 0.12em; text-transform: uppercase; }
.nav-link, .sidebar nav > a { position: relative; min-height: 42px; display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 11px; color: #c4d9d2; font-size: 0.82rem; font-weight: 720; transition: 0.18s ease; }
.nav-link::after { content: ""; position: absolute; right: 8px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); opacity: 0; transform: scale(0); transition: 0.18s ease; }
.nav-link:hover, .sidebar nav > a:hover { color: #fff; background: rgba(255, 255, 255, 0.07); transform: translateX(2px); }
.nav-link.active { color: #fff; background: linear-gradient(90deg, rgba(183, 239, 69, 0.17), rgba(183, 239, 69, 0.07)); box-shadow: inset 3px 0 0 var(--accent); }
.nav-link.active::after { opacity: 1; transform: scale(1); }
.nav-icon { width: 19px; height: 19px; flex: 0 0 auto; display: inline-grid; place-items: center; }
.nav-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sidebar-footer { margin-top: auto; display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.booking-link { min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 11px; color: var(--accent); background: rgba(183, 239, 69, 0.09); font-size: 0.78rem; font-weight: 800; }
.booking-link:hover { color: #e8ffad; background: rgba(183, 239, 69, 0.14); }
.sidebar form { margin: 0; }
.nav-button { width: 100%; padding: 10px 12px; border-radius: 11px; text-align: left; color: var(--sidebar-muted); background: transparent; font-weight: 750; }
.nav-button:hover { color: #fff; background: rgba(255, 255, 255, 0.07); }
.sidebar-backdrop { display: none; }
.main { min-width: 0; background: radial-gradient(circle at 85% -10%, rgba(183, 239, 69, 0.08), transparent 23%), var(--bg); }
.topbar { position: sticky; top: 0; z-index: 20; min-height: 72px; padding: 0 28px; display: flex; align-items: center; justify-content: space-between; gap: 18px; background: color-mix(in srgb, var(--surface) 88%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent); backdrop-filter: blur(18px); }
.topbar-leading, .topbar-actions { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-title { min-width: 0; display: grid; line-height: 1.2; }
.topbar-title strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.95rem; }
.breadcrumb { color: var(--muted); font-size: 0.66rem; font-weight: 650; margin-bottom: 3px; }
.profile-chip { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 5px 8px 5px 5px; border-radius: 13px; color: var(--text); border: 1px solid transparent; }
.profile-chip:hover { color: var(--text); background: var(--surface-muted); border-color: var(--border); }
.profile-avatar { width: 35px; height: 35px; flex: 0 0 auto; color: #123126; background: linear-gradient(135deg, var(--accent), #eaff98); font-size: 0.7rem; }
.profile-copy small { color: var(--muted); }
.topbar-logout-form { margin: 0; }
.topbar-logout { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 11px; border: 1px solid var(--border); border-radius: 11px; color: var(--muted); background: var(--surface); font-size: 0.74rem; font-weight: 850; transition: color .18s ease, border-color .18s ease, background .18s ease, transform .18s ease; }
.topbar-logout:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); background: var(--danger-soft); transform: translateY(-1px); }
.topbar-logout:focus-visible { outline: 3px solid color-mix(in srgb, var(--danger) 20%, transparent); outline-offset: 2px; }
.topbar-logout-icon { width: 17px; height: 17px; display: grid; place-items: center; }
.topbar-logout-icon svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.mobile-menu { display: none; padding: 0; border: 0; background: transparent; }
.mobile-menu span { width: 19px; height: 2px; display: block; margin: 3px 0; border-radius: 99px; background: currentColor; }
.content { width: min(100%, 1640px); margin: 0 auto; padding: 30px; opacity: 0; transform: translateY(8px); }
.content.is-ready { animation: page-in 0.42s cubic-bezier(.2,.8,.2,1) forwards; }
.sidebar-collapsed .app-shell { --sidebar-width: 88px; }
.sidebar-collapsed .brand-copy, .sidebar-collapsed .workspace-copy, .sidebar-collapsed .workspace-status, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-section-title, .sidebar-collapsed .booking-link span:last-child, .sidebar-collapsed .nav-button { display: none; }
.sidebar-collapsed .sidebar-head { justify-content: center; flex-wrap: wrap; }
.sidebar-collapsed .brand { padding: 5px; }
.sidebar-collapsed .workspace-card { grid-template-columns: 1fr; justify-items: center; padding: 9px; }
.sidebar-collapsed .nav-link { justify-content: center; padding: 10px; }
.sidebar-collapsed .nav-link::after { right: 4px; }
.sidebar-collapsed .booking-link { justify-content: center; }
.sidebar-collapsed .sidebar-collapse svg { transform: rotate(180deg); }

/* Page structure */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 22px; margin-bottom: 24px; }
.page-head h1 { margin-bottom: 7px; }
.page-head p { max-width: 760px; margin-bottom: 0; color: var(--muted); }
.page-head-actions { display: flex; align-items: center; gap: 10px; padding-top: 5px; }
.eyebrow, .card-kicker { display: block; margin-bottom: 7px; color: var(--primary); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; }
.card { margin-bottom: 20px; padding: 22px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card:hover { border-color: color-mix(in srgb, var(--primary) 14%, var(--border)); }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 15px; }
.card-head h2, .card > h2 { margin-bottom: 6px; }
.card-head-rich { align-items: flex-start; }
.card-head-rich p { margin: 0; color: var(--muted); font-size: 0.84rem; }
.form-card summary { cursor: pointer; padding: 2px 0 17px; }
.form-card form { padding-top: 20px; border-top: 1px solid var(--border); }
.status-pill { display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
.status-pill > span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.status-pill.ready { color: var(--success); background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 20%, var(--border)); }
.status-pill.attention { color: var(--warning); background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 20%, var(--border)); }
.step-badge { display: grid; place-items: center; min-width: 44px; height: 34px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 0.75rem; font-weight: 900; }

/* Data */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: 15px; margin-bottom: 22px; }
.stats article { padding: 19px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface); box-shadow: var(--shadow-sm); }
.stats span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 0.78rem; }
.stats strong { font-size: 1.5rem; }
.table-wrap { overflow-x: auto; border-radius: 12px; }
table { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; }
th, td { padding: 13px 12px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; font-size: 0.84rem; }
th { position: sticky; top: 0; z-index: 1; color: var(--muted); background: var(--surface-muted); font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; }
thead th:first-child { border-radius: 10px 0 0 0; }
thead th:last-child { border-radius: 0 10px 0 0; }
tbody tr { transition: background 0.15s ease; }
tbody tr:hover { background: color-mix(in srgb, var(--primary-soft) 42%, transparent); }
.empty { padding: 38px; color: var(--muted); text-align: center; }
.badge { display: inline-flex; align-items: center; width: max-content; padding: 5px 9px; border-radius: 999px; background: var(--surface-muted); color: var(--muted); font-size: 0.67rem; font-weight: 850; text-transform: capitalize; }
.badge.active, .badge.confirmed, .badge.completed, .badge.fully_paid, .badge.complimentary { background: var(--success-soft); color: var(--success); }
.badge.trial, .badge.pending_approval, .badge.warning, .badge.awaiting_payment, .badge.partially_paid, .badge.rescheduled { background: var(--warning-soft); color: var(--warning); }
.badge.suspended, .badge.cancelled, .badge.cancelled_customer, .badge.cancelled_venue, .badge.no_show, .badge.expired, .badge.payment_failed { background: var(--danger-soft); color: var(--danger); }
.plan-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
.price { margin: 15px 0; font-size: 1.85rem; font-weight: 920; }
.price small { color: var(--muted); font-size: 0.78rem; font-weight: 550; }
.plain-list { padding-left: 18px; color: var(--muted); }
code { padding: 3px 6px; border-radius: 7px; background: var(--surface-muted); font-size: 0.76rem; }
.mini-stack { display: grid; gap: 10px; width: 240px; }
.mini-stack form { display: grid; gap: 7px; }

/* Dashboard */
.dashboard-hero { position: relative; min-height: 255px; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr); gap: 24px; align-items: center; margin-bottom: 20px; padding: clamp(25px, 4vw, 42px); border-radius: var(--radius-lg); color: #eafff7; background: radial-gradient(circle at 80% 10%, rgba(183, 239, 69, 0.22), transparent 30%), linear-gradient(135deg, #0a382c, #0b5f47); box-shadow: var(--shadow-lg); }
.dashboard-hero::after { content: ""; position: absolute; width: 330px; height: 330px; right: -170px; bottom: -205px; border: 42px solid rgba(255, 255, 255, 0.055); border-radius: 50%; }
.dashboard-hero-copy { position: relative; z-index: 1; max-width: 780px; }
.dashboard-hero .eyebrow { color: var(--accent); }
.dashboard-hero h1 { color: #fff; font-size: clamp(2rem, 4vw, 3.25rem); }
.dashboard-hero p { max-width: 690px; color: #cfe6dd; }
.dashboard-hero .button { background: linear-gradient(135deg, var(--accent), #d8ff7c); color: #173225; box-shadow: 0 10px 25px rgba(183, 239, 69, 0.18); }
.dashboard-hero .button.secondary { color: #fff; background: rgba(255, 255, 255, 0.09); border-color: rgba(255, 255, 255, 0.16); box-shadow: none; }
.dashboard-hero-panel { position: relative; z-index: 1; justify-self: end; width: min(100%, 330px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 16px; padding: 18px; border: 1px solid rgba(255, 255, 255, 0.13); border-radius: 19px; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(14px); }
.dashboard-hero-panel .plan-line { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.dashboard-hero-panel .status-pill { color: var(--accent); background: rgba(183, 239, 69, 0.1); border-color: rgba(183, 239, 69, 0.2); text-transform: capitalize; }
.dashboard-hero-panel strong { color: #fff; font-size: 0.85rem; }
.dashboard-hero-panel small { display: block; margin-top: 5px; color: #b7d1c7; font-size: 0.7rem; }
.setup-progress-ring { --progress: 0%; position: relative; width: 66px; height: 66px; display: grid; place-items: center; border-radius: 50%; background: conic-gradient(var(--accent) var(--progress), rgba(255,255,255,.12) 0); }
.setup-progress-ring::before { content: ""; position: absolute; width: 51px; height: 51px; border-radius: 50%; background: #145541; }
.setup-progress-ring span { position: relative; z-index: 1; color: #fff; font-size: 0.78rem; font-weight: 900; }
.metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-bottom: 20px; }
.metric-card { min-width: 0; display: flex; align-items: center; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); transition: transform 0.2s ease, box-shadow 0.2s ease; }
.metric-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.metric-icon { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: var(--primary); background: var(--primary-soft); font-size: 1rem; font-weight: 950; }
.pending-icon { color: var(--warning); background: var(--warning-soft); }
.revenue-icon { color: #506915; background: #effbd4; }
.metric-copy { min-width: 0; display: grid; }
.metric-copy span { color: var(--muted); font-size: 0.72rem; font-weight: 720; }
.metric-copy strong { overflow: hidden; margin: 2px 0; color: var(--text-strong); font-size: clamp(1.35rem, 2vw, 1.75rem); text-overflow: ellipsis; white-space: nowrap; }
.metric-copy small { color: var(--muted); font-size: 0.67rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(300px, 0.65fr); gap: 20px; }
.dashboard-side-stack { display: grid; align-content: start; gap: 20px; }
.dashboard-side-stack .card { margin: 0; }
.booking-list { display: grid; }
.booking-list-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 15px 0; border-top: 1px solid var(--border); }
.booking-list-item:first-child { border-top: 0; }
.booking-date-tile { width: 49px; height: 53px; display: grid; place-items: center; align-content: center; border-radius: 13px; color: var(--primary); background: var(--primary-soft); line-height: 1; }
.booking-date-tile strong { font-size: 1.15rem; }
.booking-date-tile span { margin-top: 4px; font-size: 0.63rem; font-weight: 850; text-transform: uppercase; }
.booking-primary { min-width: 0; }
.booking-primary > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.booking-primary p { overflow: hidden; margin: 4px 0 1px; color: var(--muted); font-size: 0.78rem; text-overflow: ellipsis; white-space: nowrap; }
.booking-primary small { color: var(--muted); font-size: 0.7rem; }
.booking-amount { display: grid; justify-items: end; }
.booking-amount small { margin-top: 4px; color: var(--muted); font-size: 0.67rem; text-transform: capitalize; }
.progress-number { color: var(--primary); }
.progress-track { height: 7px; overflow: hidden; margin-bottom: 16px; border-radius: 999px; background: var(--surface-muted); }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--accent-strong)); transition: width 0.5s ease; }
.checklist { display: grid; gap: 7px; }
.checklist-item { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 10px; border-radius: 11px; color: var(--text); font-size: 0.78rem; font-weight: 720; }
.checklist-item:hover { color: var(--text); background: var(--surface-muted); }
.check-mark { width: 23px; height: 23px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 8px; color: #fff; font-size: 0.7rem; }
.checklist-item.done .check-mark { border-color: var(--primary); background: var(--primary); }
.checklist-item.done { color: var(--muted); }
.snapshot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.snapshot-grid div { padding: 12px; border-radius: 12px; background: var(--surface-muted); }
.snapshot-grid strong, .snapshot-grid span { display: block; }
.snapshot-grid strong { color: var(--text-strong); font-size: 1.25rem; }
.snapshot-grid span { margin-top: 3px; color: var(--muted); font-size: 0.67rem; }
.empty-state { display: grid; justify-items: center; padding: 42px 20px; text-align: center; }
.empty-state h3 { margin: 10px 0 4px; }
.empty-state p { max-width: 430px; color: var(--muted); }
.empty-illustration { width: 55px; height: 55px; display: grid; place-items: center; border-radius: 17px; color: var(--primary); background: var(--primary-soft); font-size: 1.35rem; }
.compact-empty { min-height: 320px; }

/* Business hours */
.hours-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.55fr); gap: 20px; align-items: start; }
.hours-editor { padding: 0; overflow: hidden; }
.hours-editor > .card-head { padding: 23px 23px 18px; margin: 0; border-bottom: 1px solid var(--border); background: linear-gradient(180deg, var(--surface), var(--surface-muted)); }
.hours-form { display: grid; }
.form-section { margin: 0; padding: 23px; border: 0; border-bottom: 1px solid var(--border); }
.form-section legend { width: 100%; display: flex; align-items: center; gap: 10px; margin-bottom: 16px; color: var(--text-strong); font-size: 0.88rem; font-weight: 850; }
.form-section legend > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 0.72rem; }
.scope-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.scope-option { cursor: pointer; }
.scope-option.is-disabled { cursor: not-allowed; opacity: 0.48; }
.scope-option.is-disabled .scope-option-body { transform: none; }
.scope-option input { position: absolute; opacity: 0; pointer-events: none; }
.scope-option-body { min-height: 84px; display: grid; align-content: center; gap: 4px; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); transition: 0.18s ease; }
.scope-option-body strong { font-size: 0.8rem; }
.scope-option-body small { color: var(--muted); font-size: 0.66rem; font-weight: 550; }
.scope-option:hover .scope-option-body { border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); transform: translateY(-1px); }
.scope-option input:checked + .scope-option-body { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary), 0 7px 20px color-mix(in srgb, var(--primary) 10%, transparent); }
.scope-selectors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; padding: 14px; border-radius: 13px; background: var(--surface-muted); }
.day-presets { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 13px; }
.chip-button { min-height: 32px; padding: 5px 11px; border: 1px solid var(--border); border-radius: 999px; color: var(--primary); background: var(--surface); font-size: 0.7rem; font-weight: 800; }
.chip-button:hover, .chip-button.is-active { color: #fff; border-color: var(--primary); background: var(--primary); }
.chip-button.subtle { color: var(--muted); }
.day-selector { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
.day-chip { cursor: pointer; }
.day-chip input { position: absolute; opacity: 0; pointer-events: none; }
.day-chip span { min-height: 67px; display: grid; place-items: center; align-content: center; gap: 3px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); transition: 0.18s ease; }
.day-chip strong { font-size: 0.78rem; }
.day-chip small { color: var(--muted); font-size: 0.58rem; font-weight: 550; }
.day-chip:hover span { transform: translateY(-1px); border-color: color-mix(in srgb, var(--primary) 30%, var(--border)); }
.day-chip input:checked + span { color: #fff; border-color: var(--primary); background: linear-gradient(145deg, var(--primary), var(--primary-dark)); box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 22%, transparent); }
.day-chip input:checked + span small { color: #cde8de; }
.time-setting-row { display: grid; grid-template-columns: minmax(130px, 1fr) auto minmax(130px, 1fr) minmax(210px, 1.3fr); gap: 12px; align-items: end; }
.time-arrow { display: grid; place-items: center; height: 46px; color: var(--muted); font-weight: 900; }
.switch-control { min-height: 46px; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; background: var(--surface-muted); }
.switch-control > input { position: absolute; opacity: 0; pointer-events: none; }
.switch-track { width: 38px; height: 22px; flex: 0 0 auto; display: flex; align-items: center; padding: 3px; border-radius: 999px; background: var(--border-strong); transition: 0.18s ease; }
.switch-track > span { width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.15); transition: transform 0.18s ease; }
.switch-control input:checked + .switch-track { background: var(--danger); }
.switch-control input:checked + .switch-track > span { transform: translateX(16px); }
.switch-control > span:last-child { display: grid; line-height: 1.2; }
.switch-control strong { font-size: 0.74rem; }
.switch-control small { margin-top: 3px; color: var(--muted); font-size: 0.6rem; font-weight: 550; }
.schedule-preview { display: flex; align-items: center; gap: 12px; margin: 18px 23px 0; padding: 13px; border: 1px solid color-mix(in srgb, var(--success) 20%, var(--border)); border-radius: 13px; background: var(--success-soft); color: var(--success); }
.preview-icon { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: var(--success); font-weight: 900; }
.schedule-preview strong { font-size: 0.78rem; }
.schedule-preview p { margin: 2px 0 0; color: color-mix(in srgb, var(--success) 80%, var(--muted)); font-size: 0.7rem; }
.form-actions { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 18px 23px 23px; }
.form-actions p { margin: 0; color: var(--muted); font-size: 0.7rem; }
.hours-guide { position: sticky; top: 93px; overflow: hidden; padding: 24px; }
.guide-visual { position: relative; height: 145px; overflow: hidden; margin: -24px -24px 22px; background: radial-gradient(circle at center, rgba(183,239,69,.18), transparent 50%), linear-gradient(135deg, #0a382d, #126148); }
.guide-ring { position: absolute; border: 2px solid rgba(255,255,255,.17); border-radius: 50%; }
.ring-one { width: 165px; height: 165px; left: 35px; top: -12px; }
.ring-two { width: 88px; height: 88px; right: 34px; bottom: -24px; }
.guide-ball { position: absolute; width: 34px; height: 34px; right: 28%; top: 28%; border-radius: 50%; background: var(--accent); box-shadow: inset -8px -8px 0 rgba(0,0,0,.08), 0 10px 25px rgba(183,239,69,.25); }
.guide-ball::before { content: ""; position: absolute; inset: 4px; border: 1px solid rgba(21,51,38,.35); border-radius: 50%; }
.hours-guide > p { color: var(--muted); font-size: 0.83rem; }
.priority-list { display: grid; gap: 9px; padding: 0; margin: 20px 0; list-style: none; }
.priority-list li { display: flex; align-items: center; gap: 11px; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.priority-list li > span { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: 0.7rem; font-weight: 900; }
.priority-list li div { display: grid; }
.priority-list strong { font-size: 0.74rem; }
.priority-list small { color: var(--muted); font-size: 0.62rem; }
.guide-note { padding: 13px; border-radius: 13px; background: linear-gradient(135deg, #effbd3, #f8ffe9); color: #3d5513; }
html[data-theme="dark"] .guide-note { background: #263416; color: #dfffa2; }
.guide-note strong { font-size: 0.72rem; }
.guide-note p { margin: 4px 0 0; color: inherit; opacity: 0.78; font-size: 0.67rem; }
.week-overview { padding: 0; overflow-x: auto; }
.week-overview > .card-head { padding: 22px; margin: 0; border-bottom: 1px solid var(--border); }
.schedule-legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 0.65rem; font-weight: 700; }
.schedule-legend span { display: inline-flex; align-items: center; gap: 5px; }
.schedule-legend i { width: 7px; height: 7px; border-radius: 50%; }
.legend-open { background: var(--success); }
.legend-closed { background: var(--danger); }
.legend-inherited { background: var(--border-strong); }
.week-board { min-width: 1040px; overflow-x: auto; }
.week-board-row { display: grid; grid-template-columns: 235px repeat(7, minmax(112px, 1fr)); border-bottom: 1px solid var(--border); }
.week-board-row:last-child { border-bottom: 0; }
.week-board-row > div { min-width: 0; padding: 12px 10px; border-right: 1px solid var(--border); }
.week-board-row > div:last-child { border-right: 0; }
.week-board-header { color: var(--muted); background: var(--surface-muted); font-size: 0.65rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; }
.scope-cell { display: grid; align-content: center; gap: 3px; padding-left: 20px !important; }
.scope-cell strong { overflow: hidden; font-size: 0.76rem; text-overflow: ellipsis; white-space: nowrap; }
.scope-cell small { color: var(--muted); font-size: 0.59rem; }
.scope-type-badge { width: max-content; padding: 3px 6px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: 0.53rem; font-weight: 900; text-transform: uppercase; }
.scope-type-badge.court { color: #6b4c00; background: #fff5cd; }
.scope-type-badge.branch { color: #315d8c; background: #e9f3ff; }
html[data-theme="dark"] .scope-type-badge.court { background: #3b3013; color: #ffdc78; }
html[data-theme="dark"] .scope-type-badge.branch { background: #152d45; color: #aacef3; }
.schedule-cell { min-height: 83px; display: grid; align-content: center; gap: 5px; }
.schedule-time { display: flex; align-items: center; justify-content: space-between; gap: 5px; padding: 6px 7px; border-radius: 9px; font-size: 0.61rem; font-weight: 820; }
.schedule-time.is-open { color: var(--success); background: var(--success-soft); }
.schedule-time.is-closed { color: var(--danger); background: var(--danger-soft); }
.schedule-time form { display: contents; }
.schedule-remove { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 6px; color: currentColor; background: transparent; cursor: pointer; font-weight: 900; opacity: 0.62; }
.schedule-remove:hover { background: color-mix(in srgb, currentColor 12%, transparent); opacity: 1; }
.inherited-time { color: var(--muted); font-size: 0.61rem; font-style: italic; }

/* Guest and error pages */
.guest-body { min-height: 100vh; display: grid; place-items: center; padding: 25px; background: radial-gradient(circle at 15% 5%, rgba(183,239,69,.16), transparent 28%), radial-gradient(circle at 90% 90%, rgba(19,121,91,.14), transparent 30%), var(--bg); }
.guest-shell { width: min(100%, 470px); }
.auth-card { padding: clamp(25px, 5vw, 43px); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.auth-card::before { content: ""; display: block; width: 45px; height: 5px; margin-bottom: 24px; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--accent)); }
.error-code { color: var(--primary); font-size: 4.3rem; font-weight: 950; letter-spacing: -0.06em; }

/* Public booking */
.public-body { background: radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 30%), #eef5f1; }
.public-shell { width: min(1220px, calc(100% - 32px)); margin: 22px auto; }
.booking-hero { position: relative; min-height: 325px; overflow: hidden; display: flex; align-items: flex-end; margin-bottom: 20px; padding: clamp(30px, 6vw, 72px); border-radius: 28px; color: #fff; background: radial-gradient(circle at 85% 10%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 25%), linear-gradient(135deg, #082b22, var(--primary)); background-position: center; background-size: cover; box-shadow: var(--shadow-lg); }
.booking-hero::after { content: ""; position: absolute; right: -70px; bottom: -145px; width: 300px; height: 300px; border: 38px solid rgba(255,255,255,.08); border-radius: 50%; }
.booking-hero > div { position: relative; z-index: 1; }
.booking-hero .eyebrow { color: var(--accent); }
.booking-hero h1 { max-width: 850px; margin: 0 0 10px; color: #fff; font-size: clamp(2.4rem, 6vw, 4.6rem); }
.booking-hero p { max-width: 680px; color: #ddf1e9; font-size: 1rem; }
.booking-logo { width: 78px; height: 78px; object-fit: contain; margin-bottom: 18px; padding: 8px; border-radius: 18px; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.18); }
.booking-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; }
.booking-main { grid-column: 1; }
.booking-aside { position: sticky; top: 20px; grid-column: 2; grid-row: 1 / span 2; height: max-content; }
.step { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 20px; }
.step > span { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); font-weight: 900; box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 22%, transparent); }
.step h2 { margin: 0 0 4px; }
.step p { margin: 0; color: var(--muted); font-size: 0.82rem; }
.slot-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: 9px; margin-top: 12px; }
.slot { padding: 11px; border: 1px solid var(--border-strong); border-radius: 12px; color: var(--text); background: var(--surface); text-align: center; cursor: pointer; transition: 0.18s ease; }
.slot:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.slot.selected { color: var(--primary); border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.slot strong, .slot small { display: block; }
.slot small { margin-top: 3px; color: var(--muted); }
.hold-timer { margin-top: 12px; padding: 11px; border-radius: 11px; color: var(--warning); background: var(--warning-soft); font-weight: 750; }
.addon-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin-bottom: 18px; }
.addon { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.addon small { display: block; color: var(--muted); font-weight: 450; }
.addon input { width: 75px; }
.policy { margin-bottom: 10px; padding: 12px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface-muted); }
.policy summary { cursor: pointer; font-weight: 820; }
.policy > div { padding-top: 10px; color: var(--muted); font-size: 0.86rem; }
.policy-accept { padding: 16px 0; }
.public-footer { padding: 19px; color: var(--muted); text-align: center; font-size: 0.75rem; }
.confirmation-card { max-width: 800px; margin: 50px auto; padding: clamp(25px, 6vw, 52px); text-align: center; }
.success-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 20px; color: var(--success); background: var(--success-soft); font-size: 2rem; font-weight: 900; transform: rotate(-4deg); }
.confirmation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 24px 0; text-align: left; }
.confirmation-grid > div { padding: 12px; border: 1px solid var(--border); border-radius: 12px; }
.confirmation-grid span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.68rem; }
.confirmation-card .button-row { justify-content: center; }
.two-col { max-width: 900px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin: 0 auto; }
.toast { position: fixed; right: 22px; bottom: 22px; z-index: 100; max-width: 390px; padding: 14px 18px; border-radius: 13px; color: #fff; background: #0c3027; box-shadow: var(--shadow-lg); animation: toast-in 0.28s ease both; }
.toast.error { background: #8f231c; }

/* Motion */
@keyframes page-in { to { opacity: 1; transform: translateY(0); } }
@keyframes alert-in { from { opacity: 0; transform: translateY(-8px); } }
@keyframes alert-out { to { opacity: 0; transform: translateY(-7px); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.97); } }

/* Responsive */
@media (max-width: 1180px) {
  .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .dashboard-side-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hours-layout { grid-template-columns: 1fr; }
  .hours-guide { position: relative; top: auto; }
}

@media (max-width: 980px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 auto 0 0; width: min(88vw, 290px); transform: translateX(-105%); transition: transform 0.24s cubic-bezier(.2,.8,.2,1); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: translateX(0); }
  .sidebar-backdrop { position: fixed; inset: 0; z-index: 25; display: block; border: 0; pointer-events: none; opacity: 0; background: rgba(4, 18, 14, 0.52); backdrop-filter: blur(2px); transition: opacity 0.2s ease; }
  body.menu-open .sidebar-backdrop { pointer-events: auto; opacity: 1; }
  .sidebar-collapse { display: none; }
  .mobile-menu { display: inline-grid; }
  .content { padding: 22px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-main, .booking-aside { grid-column: 1; }
  .booking-aside { position: static; grid-row: auto; }
  .two-col { grid-template-columns: 1fr; }
  .sidebar-collapsed .app-shell { --sidebar-width: 1fr; }
  .sidebar-collapsed .brand-copy, .sidebar-collapsed .workspace-copy, .sidebar-collapsed .workspace-status, .sidebar-collapsed .nav-label, .sidebar-collapsed .nav-section-title, .sidebar-collapsed .booking-link span:last-child, .sidebar-collapsed .nav-button { display: initial; }
  .sidebar-collapsed .workspace-card { grid-template-columns: auto minmax(0, 1fr) auto; justify-items: initial; }
  .sidebar-collapsed .nav-link, .sidebar-collapsed .booking-link { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .topbar { min-height: 64px; padding: 0 15px; }
  .breadcrumb, .profile-copy { display: none; }
  .topbar-actions { gap: 7px; }
  .profile-chip { padding-right: 5px; }
  .topbar-logout { width: 40px; padding: 8px; }
  .topbar-logout-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .content { padding: 16px; }
  .page-head { display: grid; margin-bottom: 18px; }
  .page-head-actions { padding-top: 0; }
  .card { padding: 17px; border-radius: 15px; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .dashboard-hero { grid-template-columns: 1fr; padding: 25px; border-radius: 20px; }
  .dashboard-hero-panel { justify-self: stretch; width: 100%; }
  .dashboard-side-stack { grid-template-columns: 1fr; }
  .booking-list-item { grid-template-columns: auto minmax(0, 1fr); }
  .booking-amount { grid-column: 2; justify-items: start; }
  .scope-options { grid-template-columns: 1fr; }
  .scope-option-body { min-height: 68px; }
  .day-selector { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .time-setting-row { grid-template-columns: 1fr auto 1fr; }
  .switch-control { grid-column: 1 / -1; }
  .form-actions { align-items: stretch; flex-direction: column; }
  .form-actions .button { width: 100%; }
  .week-overview { overflow-x: auto; }
  .scope-selectors { grid-template-columns: 1fr; }
  .confirmation-grid { grid-template-columns: 1fr; }
  .button-row { align-items: stretch; }
  .button-row .button { width: 100%; }
  .public-shell { width: min(100% - 18px, 1180px); margin: 9px auto; }
  .booking-hero { min-height: 250px; padding: 27px; border-radius: 20px; }
  .mini-stack { width: 210px; }
}

@media (max-width: 480px) {
  h1 { font-size: 1.85rem; }
  .metric-grid { grid-template-columns: 1fr; }
  .metric-card { padding: 15px; }
  .day-selector { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .time-setting-row { grid-template-columns: 1fr; }
  .time-arrow { display: none; }
  .schedule-legend { display: none; }
  .topbar-actions > .icon-button { display: none; }
  .toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

@media print {
  .sidebar, .topbar, .button, .public-footer, .two-col, .sidebar-backdrop { display: none !important; }
  .app-shell { display: block; }
  .content, .confirmation-card { padding: 0; margin: 0; border: 0; box-shadow: none; opacity: 1; transform: none; }
  .public-body { background: #fff; }
}

/* Premium public reservation experience */
.public-body { background: #f4f7f5; }
.booking-hero-premium { min-height: 360px; margin-bottom: 28px; border-radius: 32px; isolation: isolate; }
.booking-hero-premium::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, rgba(3, 17, 13, .28)); }
.booking-hero-premium::after { right: -105px; bottom: -190px; width: 420px; height: 420px; border-width: 54px; }
.booking-hero-content { width: 100%; }
.booking-brand-line { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
.booking-brand-line .booking-logo { width: 58px; height: 58px; margin: 0; border-radius: 16px; }
.booking-venue-name { margin: 3px 0 0; color: #fff; font-weight: 850; }
.booking-hero-premium h1 { max-width: 720px; font-size: clamp(2.7rem, 6vw, 5rem); }
.booking-hero-premium > div > p { max-width: 720px; margin-bottom: 20px; font-size: 1.02rem; }
.hero-trust-row { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-trust-row span { padding: 8px 11px; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: #eaf8f3; background: rgba(255,255,255,.08); backdrop-filter: blur(10px); font-size: .76rem; font-weight: 760; }
.public-notice-card { max-width: 760px; margin: 40px auto; }

.premium-booking-form { display: grid; gap: 26px; }
.court-picker-section { padding: clamp(22px, 4vw, 38px); border: 1px solid var(--border); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow); }
.section-heading-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 22px; margin-bottom: 24px; }
.section-heading-row h2 { margin: 3px 0 7px; font-size: clamp(1.6rem, 3vw, 2.25rem); }
.section-heading-row p { max-width: 680px; margin: 0; color: var(--muted); }
.branch-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.branch-chip { min-height: 38px; padding: 8px 13px; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); background: var(--surface-muted); cursor: pointer; font-weight: 760; }
.branch-chip:hover, .branch-chip.active { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 32%, var(--border)); background: var(--primary-soft); }
.court-card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(285px, 1fr)); gap: 18px; }
.court-choice-card { overflow: hidden; border: 1px solid var(--border); border-radius: 21px; background: var(--surface); box-shadow: 0 10px 28px rgba(19,48,38,.06); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; }
.court-choice-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); box-shadow: var(--shadow); }
.court-choice-card.selected { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow); }
.court-choice-card[hidden] { display: none; }
.court-card-media { position: relative; height: 205px; overflow: hidden; background: linear-gradient(135deg, var(--primary-soft), #d9ece5); }
.court-card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.court-choice-card:hover .court-card-media img { transform: scale(1.045); }
.court-image-placeholder { height: 100%; display: grid; place-items: center; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.65), transparent 30%), linear-gradient(135deg, var(--primary), var(--primary-dark)); }
.court-image-placeholder span { width: 72px; height: 72px; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.55); border-radius: 24px; color: #fff; font-size: 1.4rem; font-weight: 950; transform: rotate(-6deg); }
.court-availability-badge, .court-type-badge { position: absolute; top: 13px; padding: 7px 10px; border-radius: 999px; font-size: .68rem; font-weight: 820; backdrop-filter: blur(9px); }
.court-availability-badge { left: 13px; display: inline-flex; align-items: center; gap: 6px; color: #0c5e43; background: rgba(237,255,247,.92); }
.court-availability-badge i, .live-badge i { width: 7px; height: 7px; border-radius: 50%; background: #18a56d; box-shadow: 0 0 0 4px rgba(24,165,109,.12); }
.court-type-badge { right: 13px; color: #fff; background: rgba(7,25,20,.7); }
.court-card-body { padding: 18px; }
.court-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.court-title-row small { color: var(--muted); font-size: .69rem; font-weight: 740; }
.court-title-row h3 { margin: 3px 0 0; font-size: 1.16rem; }
.court-rate { display: grid; justify-items: end; flex: 0 0 auto; }
.court-rate strong { color: var(--primary); font-size: 1rem; }
.court-rate span { color: var(--muted); font-size: .66rem; }
.court-card-body > p { min-height: 48px; margin: 12px 0; color: var(--muted); font-size: .8rem; }
.court-feature-row { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }
.court-feature-row span { padding: 6px 8px; border-radius: 8px; color: var(--muted); background: var(--surface-muted); font-size: .67rem; font-weight: 700; }
.court-select-button { box-shadow: none; }
.court-choice-card.selected .court-select-button { background: var(--success-soft); color: var(--success); }

.booking-workspace { display: grid; gap: 20px; animation: premium-stage-in .35s ease both; }
.booking-workspace[hidden] { display: none; }
.booking-stepper { display: grid; grid-template-columns: auto minmax(30px, 1fr) auto minmax(30px, 1fr) auto; align-items: center; padding: 16px 20px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,255,255,.88); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); }
.booking-step { display: flex; align-items: center; gap: 10px; border: 0; padding: 0; color: var(--muted); background: transparent; text-align: left; cursor: pointer; }
.booking-step > span { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border-strong); border-radius: 11px; background: var(--surface-muted); font-size: .78rem; font-weight: 900; }
.booking-step div { display: grid; line-height: 1.1; }
.booking-step strong { color: var(--text); font-size: .8rem; }
.booking-step small { margin-top: 4px; font-size: .65rem; }
.booking-step.active > span, .booking-step.complete > span { color: #fff; border-color: var(--primary); background: linear-gradient(135deg, var(--primary), var(--primary-dark)); box-shadow: 0 7px 18px color-mix(in srgb, var(--primary) 20%, transparent); }
.booking-step.active strong { color: var(--primary); }
.booking-step.complete > span { font-size: 0; }
.booking-step.complete > span::after { content: "✓"; font-size: .8rem; }
.step-connector { height: 2px; margin: 0 14px; background: linear-gradient(90deg, var(--border), var(--border-strong)); }
.booking-layout-modern { display: grid; grid-template-columns: minmax(0, 1fr) 355px; gap: 22px; align-items: start; }
.booking-flow-column { min-width: 0; }
.booking-stage { padding: clamp(20px, 4vw, 34px); border: 1px solid var(--border); border-radius: 25px; background: var(--surface); box-shadow: var(--shadow); }
.booking-stage[hidden] { display: none; }
.booking-stage.active { animation: premium-stage-in .3s ease both; }
.stage-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.stage-heading > div:first-child { display: flex; align-items: flex-start; gap: 14px; }
.stage-number { color: var(--primary); font-size: .68rem; font-weight: 950; letter-spacing: .12em; }
.stage-heading h2 { margin: 0 0 5px; font-size: clamp(1.35rem, 2.7vw, 1.9rem); }
.stage-heading p { margin: 0; color: var(--muted); font-size: .83rem; }

.book-again-card { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 18px; padding: 14px; border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 16px; background: linear-gradient(135deg, var(--primary-soft), #f9fffc); }
.book-again-card[hidden] { display: none; }
.book-again-card > div { display: flex; align-items: center; gap: 12px; }
.book-again-card p { margin: 2px 0 0; color: var(--muted); font-size: .75rem; }
.book-again-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; color: var(--primary); background: #fff; font-size: 1.2rem; }

.calendar-card { overflow: hidden; border: 1px solid var(--border); border-radius: 19px; background: var(--surface-muted); }
.calendar-toolbar { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 14px; padding: 16px 18px; border-bottom: 1px solid var(--border); background: var(--surface); text-align: center; }
.calendar-toolbar span { color: var(--muted); font-size: .66rem; font-weight: 760; text-transform: uppercase; letter-spacing: .09em; }
.calendar-toolbar h3 { margin: 3px 0 0; font-size: 1.15rem; }
.calendar-nav { width: 42px; height: 42px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 12px; color: var(--text); background: var(--surface-muted); cursor: pointer; font-weight: 900; }
.calendar-nav:hover:not(:disabled) { color: var(--primary); border-color: var(--primary); transform: translateY(-1px); }
.calendar-nav:disabled { opacity: .35; cursor: not-allowed; }
.calendar-weekdays, .availability-calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.calendar-weekdays { padding: 10px 12px 0; }
.calendar-weekdays span { padding: 6px; color: var(--muted); text-align: center; font-size: .63rem; font-weight: 860; text-transform: uppercase; }
.availability-calendar { gap: 7px; min-height: 430px; padding: 8px 12px 14px; }
.calendar-day { position: relative; min-height: 92px; display: grid; align-content: space-between; gap: 3px; padding: 10px; border: 1px solid var(--border); border-radius: 13px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; overflow: hidden; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.calendar-day::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--border-strong); }
.calendar-day.blank { visibility: hidden; }
.calendar-day:hover:not(:disabled) { transform: translateY(-2px); border-color: var(--primary); box-shadow: var(--shadow-sm); }
.calendar-day.selected { z-index: 1; transform: scale(1.035); border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 12%, transparent), var(--shadow-sm); }
.calendar-day:disabled { cursor: not-allowed; opacity: .62; }
.calendar-date-number { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.calendar-date-number strong { font-size: 1rem; }
.calendar-date-number em, .mobile-date-card em { padding: 3px 5px; border-radius: 5px; color: #7b4b00; background: #fff0ba; font-size: .52rem; font-style: normal; font-weight: 900; text-transform: uppercase; }
.calendar-day > span { font-size: .67rem; font-weight: 830; }
.calendar-day > small { color: var(--muted); font-size: .58rem; }
.calendar-day > b { color: var(--warning); font-size: .54rem; text-transform: uppercase; }
.calendar-day.status-available::before { background: #1aa56e; }
.calendar-day.status-limited::before { background: #f1a522; }
.calendar-day.status-fully_booked::before { background: #da443a; }
.calendar-day.status-elapsed::before { background: #62756f; }
.calendar-day.status-closed::before, .calendar-day.status-unavailable::before { background: #8d9a95; }
.calendar-day.status-available { background: linear-gradient(145deg, #fff, #f5fff9); }
.calendar-day.status-limited { background: linear-gradient(145deg, #fff, #fffaf0); }
.calendar-day.status-fully_booked { color: var(--danger); background: var(--danger-soft); }
.calendar-day.status-elapsed { color: #52635e; background: #edf1f0; }
.calendar-day.status-closed, .calendar-day.status-unavailable { color: var(--muted); background: #f0f3f2; }
.calendar-skeleton { min-height: 92px; border-radius: 13px; background: linear-gradient(90deg, #e8efec 25%, #f5f8f7 50%, #e8efec 75%); background-size: 220% 100%; animation: booking-shimmer 1.25s linear infinite; }
.calendar-error { grid-column: 1 / -1; align-self: center; padding: 30px; color: var(--muted); text-align: center; }
.calendar-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; padding: 12px 16px 15px; border-top: 1px solid var(--border); background: var(--surface); }
.calendar-legend span { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: .65rem; font-weight: 730; }
.calendar-legend i { width: 8px; height: 8px; border-radius: 50%; }
.calendar-legend i.available { background: #1aa56e; }
.calendar-legend i.limited { background: #f1a522; }
.calendar-legend i.fully-booked { background: #da443a; }
.calendar-legend i.elapsed { background: #62756f; }
.calendar-legend i.closed { background: #8d9a95; }
.mobile-date-strip { display: none; }

.slot-urgency { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 12px 14px; border: 1px solid #f2d8a3; border-radius: 14px; color: #875100; background: #fff8e8; }
.slot-urgency[hidden] { display: none; }
.slot-urgency > span { font-size: 1.25rem; }
.slot-urgency div { display: grid; }
.slot-urgency small { font-size: .67rem; }
.timeline-panel { overflow: hidden; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); }
.timeline-header-row { display: grid; grid-template-columns: 150px 1fr; padding: 10px 15px; color: var(--muted); background: var(--surface-muted); font-size: .62rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.slot-loading-message { padding: 28px; color: var(--muted); text-align: center; }
.visual-timeline { display: grid; }
.timeline-slot { position: relative; display: grid; grid-template-columns: 125px 34px minmax(0, 1fr); align-items: stretch; min-height: 68px; border: 0; border-top: 1px solid var(--border); padding: 0 16px 0 15px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; transition: background .17s ease, transform .17s ease; }
.timeline-slot:first-child { border-top: 0; }
.timeline-slot:hover:not(:disabled) { z-index: 1; background: var(--primary-soft); }
.timeline-slot:disabled { cursor: not-allowed; }
.timeline-time, .timeline-status { align-self: center; display: grid; }
.timeline-time strong { font-size: .86rem; }
.timeline-time small { color: var(--muted); font-size: .62rem; }
.timeline-track { position: relative; display: grid; place-items: center; }
.timeline-track::before { content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--border-strong); }
.timeline-track i { position: relative; z-index: 1; width: 12px; height: 12px; border: 3px solid var(--surface); border-radius: 50%; background: var(--border-strong); box-shadow: 0 0 0 1px var(--border-strong); }
.timeline-status { grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 12px 0; }
.timeline-status strong { font-size: .77rem; }
.timeline-status small { color: var(--primary); font-size: .72rem; font-weight: 820; }
.timeline-status em { grid-column: 1 / -1; width: max-content; margin-top: 3px; padding: 3px 6px; border-radius: 6px; color: #8b5600; background: #fff2ca; font-size: .55rem; font-style: normal; font-weight: 850; }
.timeline-slot.status-booked, .timeline-slot.status-blocked, .timeline-slot.status-held, .timeline-slot.status-past { color: var(--muted); background: #f7f9f8; }
.timeline-slot.status-booked .timeline-track i { background: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.timeline-slot.status-blocked .timeline-track i, .timeline-slot.status-past .timeline-track i { background: #929e99; box-shadow: 0 0 0 1px #929e99; }
.timeline-slot.status-held .timeline-track i { background: var(--warning); box-shadow: 0 0 0 1px var(--warning); }
.timeline-slot.selected { color: var(--primary-dark); background: linear-gradient(90deg, var(--primary-soft), #f7fffb); }
.timeline-slot.selected .timeline-track::before { width: 5px; background: var(--primary); }
.timeline-slot.selected .timeline-track i { width: 16px; height: 16px; background: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 14%, transparent); }
.timeline-slot.selected .timeline-status strong::before { content: "Selected · "; }
.timeline-slot.selection-start { border-top-left-radius: 12px; border-top-right-radius: 12px; }
.timeline-slot.selection-end { border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; }
.slot-skeleton { height: 68px; border-top: 1px solid var(--border); background: linear-gradient(90deg, #edf2f0 25%, #f8faf9 50%, #edf2f0 75%); background-size: 220% 100%; animation: booking-shimmer 1.25s linear infinite; }
.selection-help { display: flex; gap: 9px; margin-top: 13px; color: var(--muted); font-size: .72rem; }
.selection-help span { height: max-content; padding: 3px 7px; border-radius: 6px; color: var(--primary); background: var(--primary-soft); font-size: .6rem; font-weight: 900; text-transform: uppercase; }
.mobile-stage-action { display: none; margin-top: 17px; }

.details-card { margin-bottom: 16px; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-muted); }
.details-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.details-card-head span { color: var(--muted); font-size: .63rem; font-weight: 830; text-transform: uppercase; letter-spacing: .08em; }
.details-card-head h3 { margin: 3px 0 0; font-size: 1.08rem; }
.details-card-head .secure-note { color: var(--success); text-transform: none; letter-spacing: 0; }
.modern-form-grid label { font-size: .75rem; }
.modern-form-grid input, .modern-form-grid textarea { background: var(--surface); }
.premium-addon-grid { margin: 0; }
.premium-addon { background: var(--surface); }
.compact-details-card { padding-bottom: 14px; }
.promo-input-wrap { display: grid; grid-template-columns: 1fr auto; }
.promo-input-wrap input { border-radius: 12px 0 0 12px; }
.promo-input-wrap button { border: 1px solid var(--primary); border-left: 0; border-radius: 0 12px 12px 0; padding: 0 14px; color: #fff; background: var(--primary); cursor: pointer; font-weight: 820; }
.marketing-check { align-self: end; padding-bottom: 2px; font-weight: 620; }
.policy-stack { display: grid; gap: 9px; margin-top: 18px; }
.premium-policy { margin: 0; background: var(--surface); }
.premium-policy summary { display: flex; align-items: center; justify-content: space-between; }
.premium-policy summary span { color: var(--primary); font-size: .68rem; }
.premium-policy-accept { padding: 15px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); }
.confirm-booking-button { margin-top: 16px; }
.modern-hold-timer { display: flex; align-items: center; gap: 12px; margin: 0 0 16px; }
.modern-hold-timer div { display: grid; }
.modern-hold-timer small { font-size: .67rem; font-weight: 570; }

.booking-summary-card { position: sticky; top: 18px; padding: 22px; border: 1px solid var(--border); border-radius: 23px; background: var(--surface); box-shadow: var(--shadow); }
.summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 17px; border-bottom: 1px solid var(--border); }
.summary-head span { color: var(--muted); font-size: .63rem; font-weight: 850; text-transform: uppercase; letter-spacing: .08em; }
.summary-head h2 { margin: 4px 0 0; font-size: 1.12rem; }
.summary-head .live-badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 999px; color: var(--success); background: var(--success-soft); letter-spacing: 0; }
.summary-court { display: flex; align-items: center; gap: 12px; padding: 22px 0; }
.summary-empty-icon { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; color: var(--primary); background: var(--primary-soft); font-size: 1.4rem; }
.summary-court p { margin: 2px 0 0; color: var(--muted); font-size: .71rem; }
.summary-details { padding: 17px 0 4px; }
.summary-details[hidden] { display: none; }
.summary-row { display: grid; grid-template-columns: 82px minmax(0, 1fr); align-items: start; gap: 10px; padding: 8px 0; }
.summary-row span { color: var(--muted); font-size: .7rem; }
.summary-row strong { text-align: right; font-size: .73rem; }
.summary-divider { height: 1px; margin: 10px 0; background: var(--border); }
.price-breakdown { display: grid; gap: 7px; }
.price-breakdown > div { display: flex; justify-content: space-between; gap: 10px; color: var(--muted); font-size: .7rem; }
.price-breakdown strong { color: var(--text); }
.summary-total { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.summary-total span { font-size: .78rem; font-weight: 850; }
.summary-total strong { color: var(--primary); font-size: 1.45rem; letter-spacing: -.04em; }
.summary-price-note { margin: 5px 0 15px; color: var(--muted); font-size: .62rem; text-align: right; }
.summary-back-button { width: 100%; border: 0; margin-top: 8px; padding: 8px; color: var(--muted); background: transparent; cursor: pointer; font-size: .72rem; font-weight: 760; }
.summary-security { display: flex; align-items: flex-start; gap: 9px; margin-top: 15px; padding-top: 15px; border-top: 1px solid var(--border); }
.summary-security p { display: grid; margin: 0; }
.summary-security strong { font-size: .7rem; }
.summary-security small { margin-top: 2px; color: var(--muted); font-size: .62rem; }

@keyframes premium-stage-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes booking-shimmer { to { background-position: -220% 0; } }

@media (max-width: 980px) {
  .booking-layout-modern { grid-template-columns: 1fr; }
  .booking-summary-card { position: static; }
  .section-heading-row { align-items: flex-start; flex-direction: column; }
  .branch-filter { justify-content: flex-start; }
}

@media (max-width: 720px) {
  .booking-hero-premium { min-height: 305px; margin-bottom: 14px; padding: 25px; border-radius: 23px; }
  .booking-brand-line { margin-bottom: 20px; }
  .booking-hero-premium h1 { font-size: 2.55rem; }
  .hero-trust-row span:nth-child(2) { display: none; }
  .court-picker-section { padding: 18px; border-radius: 20px; }
  .court-card-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; margin-right: -18px; padding-right: 18px; padding-bottom: 8px; }
  .court-choice-card { min-width: min(84vw, 340px); scroll-snap-align: start; }
  .booking-stepper { grid-template-columns: repeat(3, 1fr); gap: 7px; padding: 12px; }
  .booking-step { justify-content: center; }
  .booking-step div, .step-connector { display: none; }
  .booking-step > span { width: 38px; height: 38px; }
  .booking-stage { padding: 18px; border-radius: 19px; }
  .stage-heading { gap: 10px; }
  .stage-heading > div:first-child { gap: 9px; }
  .stage-heading .text-link { font-size: .7rem; }
  .calendar-weekdays, .availability-calendar { display: none; }
  .mobile-date-strip { display: flex; gap: 9px; overflow-x: auto; padding: 14px; scroll-snap-type: x mandatory; }
  .mobile-date-card { position: relative; min-width: 76px; min-height: 105px; display: grid; place-items: center; align-content: center; gap: 4px; border: 1px solid var(--border); border-radius: 14px; color: var(--text); background: var(--surface); scroll-snap-align: start; cursor: pointer; }
  .mobile-date-card > span { color: var(--muted); font-size: .64rem; font-weight: 800; text-transform: uppercase; }
  .mobile-date-card > strong { font-size: 1.25rem; }
  .mobile-date-card > small { font-size: .56rem; font-weight: 800; }
  .mobile-date-card.selected { color: #fff; border-color: var(--primary); background: linear-gradient(145deg, var(--primary), var(--primary-dark)); box-shadow: 0 9px 18px color-mix(in srgb, var(--primary) 24%, transparent); }
  .mobile-date-card.selected > span, .mobile-date-card.selected > small { color: #e7fff6; }
  .mobile-date-card:disabled { opacity: .48; cursor: not-allowed; }
  .mobile-date-skeleton { min-width: 76px; height: 105px; border-radius: 14px; background: linear-gradient(90deg, #e8efec 25%, #f5f8f7 50%, #e8efec 75%); background-size: 220% 100%; animation: booking-shimmer 1.25s linear infinite; }
  .calendar-legend { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .timeline-header-row { grid-template-columns: 110px 1fr; }
  .timeline-slot { grid-template-columns: 92px 28px minmax(0, 1fr); min-height: 65px; padding: 0 10px; }
  .timeline-status { grid-template-columns: 1fr; }
  .timeline-status small { margin-top: 2px; }
  .timeline-status em { display: none; }
  .mobile-stage-action { display: block; }
  .booking-summary-card #continueButton { display: none; }
  .booking-summary-card { border-radius: 19px; }
  .modern-form-grid { grid-template-columns: 1fr; }
  .marketing-check { padding-top: 8px; }
  .book-again-card { align-items: stretch; flex-direction: column; }
  .book-again-card .button { width: 100%; }
}

@media (max-width: 480px) {
  .booking-hero-premium h1 { font-size: 2.2rem; }
  .booking-hero-premium > div > p { font-size: .88rem; }
  .hero-trust-row { gap: 6px; }
  .hero-trust-row span { padding: 6px 8px; font-size: .65rem; }
  .court-card-media { height: 185px; }
  .section-heading-row h2 { font-size: 1.55rem; }
  .stage-heading h2 { font-size: 1.25rem; }
  .timeline-time strong { font-size: .75rem; }
  .timeline-status strong { font-size: .7rem; }
  .summary-row { grid-template-columns: 68px minmax(0, 1fr); }
}
.waitlist-panel { display: grid; gap: 14px; margin-top: 16px; padding: 18px; border: 1px solid #efd49c; border-radius: 17px; background: linear-gradient(145deg, #fffaf0, #fff); }
.waitlist-panel[hidden] { display: none; }
.waitlist-copy { display: flex; align-items: flex-start; gap: 11px; }
.waitlist-copy > span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: #fff0c9; }
.waitlist-copy p { margin: 3px 0 0; color: var(--muted); font-size: .72rem; }
.waitlist-fields { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.waitlist-fields label { font-size: .7rem; }
.waitlist-fields input { min-height: 42px; background: #fff; }
#waitlistMessage .alert { margin: 0; }
@media (max-width: 720px) { .waitlist-fields { grid-template-columns: 1fr; } }

/* Owner live calendar preview */
.owner-calendar-card { margin-bottom: 20px; }
.owner-calendar-stats { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; margin-bottom: 18px; }
.owner-calendar-stats > div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); }
.owner-calendar-stats strong { font-size: 1.15rem; }
.owner-calendar-stats span { color: var(--muted); font-size: .65rem; }
.owner-calendar-layout { display: grid; grid-template-columns: minmax(0,1fr) 245px; gap: 18px; align-items: start; }
.owner-calendar-weekdays, .owner-calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
.owner-calendar-weekdays { margin-bottom: 6px; }
.owner-calendar-weekdays span { color: var(--muted); text-align: center; font-size: .61rem; font-weight: 850; text-transform: uppercase; }
.owner-calendar-day { min-height: 72px; display: grid; align-content: center; gap: 2px; padding: 8px; border: 1px solid var(--border); border-radius: 11px; color: var(--text); background: var(--surface); text-align: left; cursor: pointer; }
.owner-calendar-day.blank { visibility: hidden; }
.owner-calendar-day strong { font-size: .84rem; }
.owner-calendar-day span { font-size: .58rem; font-weight: 800; }
.owner-calendar-day small { color: var(--muted); font-size: .53rem; }
.owner-calendar-day:hover, .owner-calendar-day.selected { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb,var(--primary) 10%,transparent); }
.owner-calendar-day.status-available { background: #f4fff9; }
.owner-calendar-day.status-limited { background: #fff9ed; }
.owner-calendar-day.status-fully_booked { color: var(--danger); background: var(--danger-soft); }
.owner-calendar-day.status-elapsed { color: #52635e; background: #edf1f0; }
.owner-calendar-day.status-closed, .owner-calendar-day.status-unavailable { color: var(--muted); background: #f1f4f3; }
.owner-calendar-actions { position: sticky; top: 84px; padding: 16px; border: 1px solid var(--border); border-radius: 15px; background: var(--surface-muted); }
.calendar-action-date { display: grid; margin-bottom: 14px; }
.calendar-action-date span { color: var(--muted); font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; }
.calendar-action-date strong { margin-top: 4px; }
.calendar-action-date small { margin-top: 3px; color: var(--muted); }
.calendar-action-links { display: grid; gap: 8px; }
@media (max-width: 980px) { .owner-calendar-layout { grid-template-columns: 1fr; } .owner-calendar-actions { position: static; } }
@media (max-width: 720px) { .owner-calendar-stats { grid-template-columns: repeat(2,minmax(0,1fr)); } .owner-calendar-grid, .owner-calendar-weekdays { min-width: 650px; } .owner-calendar-layout > div:first-child { overflow-x: auto; } }
[hidden] { display: none !important; }

/* Pricing clarity improvements */
.dynamic-rate { max-width: 150px; }
.dynamic-rate strong { font-size: .88rem; line-height: 1.15; text-align: right; }
.dynamic-rate span { font-size: .65rem; }
.dynamic-rate small { margin-top: 3px; color: var(--muted); font-size: .61rem; font-weight: 700; text-align: right; }

.pricing-explainer { margin-bottom: 18px; }
.pricing-explainer > p { margin: 5px 0 14px; color: var(--muted); }
.pricing-explainer-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pricing-explainer-grid span { padding: 12px 14px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-soft, rgba(23,107,77,.035)); color: var(--muted); font-size: .78rem; line-height: 1.55; }
.pricing-explainer-grid b { color: var(--text); }

.weekday-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
.weekday-fieldset legend { margin-bottom: 8px; font-size: .78rem; font-weight: 800; }
.weekday-picker { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; }
.weekday-option { display: block !important; }
.weekday-option input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-option span { display: grid; place-items: center; min-height: 42px; border: 1px solid var(--border); border-radius: 11px; background: var(--surface); color: var(--muted); font-size: .72rem; font-weight: 850; cursor: pointer; transition: transform .18s ease, border-color .18s ease, background .18s ease, color .18s ease; }
.weekday-option input:checked + span { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 10%, transparent); }
.weekday-option span:hover { transform: translateY(-1px); border-color: var(--primary); }
.weekday-fieldset small, .pricing-rule-form label > small { display: block; margin-top: 6px; color: var(--muted); font-size: .66rem; line-height: 1.45; }
.pricing-stack-option { align-self: end; min-height: 48px; }

@media (max-width: 900px) {
  .pricing-explainer-grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .weekday-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dynamic-rate { max-width: 125px; }
}
.court-rate-form { flex-wrap: nowrap; min-width: 190px; }
.court-rate-form input { width: 100px; min-width: 90px; }

/* Selectable pricing plans */
.pricing-mode-note {
  padding: 12px 14px;
  border: 1px dashed var(--border);
  border-radius: 13px;
  background: var(--surface-soft, rgba(23,107,77,.035));
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.5;
}

.pricing-plan-card { overflow: hidden; }
.pricing-plan-intro { margin: -4px 0 14px; }
.customer-pricing-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.customer-pricing-plan {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  min-height: 96px;
  width: 100%;
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--surface, #fff);
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.customer-pricing-plan:hover {
  transform: translateY(-2px);
  border-color: rgba(23,107,77,.45);
  box-shadow: 0 12px 26px rgba(20,60,46,.10);
}
.customer-pricing-plan.selected {
  border-color: var(--primary, #176b4d);
  background: rgba(23,107,77,.055);
  box-shadow: 0 0 0 3px rgba(23,107,77,.10);
}
.pricing-plan-check {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--primary, #176b4d);
  color: #fff;
  font-size: .72rem;
  opacity: 0;
  transform: scale(.75);
  transition: opacity .2s ease, transform .2s ease;
}
.customer-pricing-plan.selected .pricing-plan-check { opacity: 1; transform: scale(1); }
.pricing-plan-copy,
.pricing-plan-price { display: flex; flex-direction: column; gap: 5px; }
.pricing-plan-copy strong { font-size: .95rem; }
.pricing-plan-copy small,
.pricing-plan-price small { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.pricing-plan-price { align-items: flex-end; padding-right: 18px; text-align: right; }
.pricing-plan-price strong { color: var(--primary, #176b4d); font-size: 1.02rem; white-space: nowrap; }

@media (max-width: 720px) {
  .customer-pricing-plan-grid { grid-template-columns: 1fr; }
  .customer-pricing-plan { min-height: 88px; }
}

/* Plan-first booking flow and editable pricing rows */
.pricing-plan-picker-section {
  padding: clamp(22px, 4vw, 38px);
  border: 1px solid var(--border);
  border-radius: 28px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.server-verified-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 11px;
  border-radius: 999px;
  color: var(--success);
  background: var(--success-soft);
  font-size: .7rem;
  font-weight: 850;
  white-space: nowrap;
}
.customer-pricing-plan-grid-first .customer-pricing-plan { min-height: 116px; }
.pricing-plan-copy em {
  color: var(--primary);
  font-size: .64rem;
  font-style: normal;
  font-weight: 760;
  line-height: 1.35;
}
.plan-player-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(170px, auto);
  align-items: center;
  gap: 18px;
  margin-top: 16px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--primary) 32%, var(--border));
  border-radius: 18px;
  background: linear-gradient(135deg, var(--primary-soft), var(--surface));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--primary) 7%, transparent);
}
.plan-player-count[hidden] { display: none; }
.plan-player-count-copy { display: grid; gap: 5px; min-width: 0; }
.player-count-kicker { color: var(--primary); font-size: .62rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-player-count label { display: grid; gap: 4px; }
.plan-player-count label strong { font-size: .94rem; color: var(--text); }
.plan-player-count label span { color: var(--muted); font-size: .7rem; line-height: 1.4; }
.player-count-stepper {
  display: grid;
  grid-template-columns: 42px 62px 42px;
  align-items: stretch;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  overflow: hidden;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 4%, transparent);
}
.player-count-button {
  border: 0;
  background: var(--surface-muted);
  color: var(--text);
  font-size: 1.2rem;
  font-weight: 850;
  cursor: pointer;
}
.player-count-button:hover:not(:disabled) { background: var(--primary-soft); color: var(--primary); }
.player-count-button:disabled { opacity: .38; cursor: not-allowed; }
.plan-player-count input {
  width: 62px;
  min-width: 0;
  padding: 0 4px;
  border: 0;
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  border-radius: 0;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
  font-weight: 900;
  text-align: center;
  appearance: textfield;
}
.plan-player-count input::-webkit-inner-spin-button,
.plan-player-count input::-webkit-outer-spin-button { appearance: none; margin: 0; }
.player-count-price {
  justify-self: end;
  max-width: 220px;
  color: var(--primary);
  font-size: .72rem;
  font-weight: 850;
  line-height: 1.35;
  text-align: right;
}
.player-count-price:empty { display: none; }
.selected-plan-rate small { max-width: 120px; text-align: right; }
.court-plan-empty {
  margin-top: 14px;
  padding: 18px;
  border: 1px dashed var(--border);
  border-radius: 14px;
  color: var(--muted);
  background: var(--surface-muted);
  text-align: center;
}
.selected-plan-confirmation { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--primary-soft); }
.pricing-row-actions, .pricing-form-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pricing-row-actions form { margin: 0; }
.editing-row { background: color-mix(in srgb, var(--primary) 6%, var(--surface)); }

@media (max-width: 720px) {
  .pricing-plan-picker-section { padding: 18px; border-radius: 20px; }
  .plan-player-count { grid-template-columns: 1fr; gap: 12px; }
  .player-count-stepper { justify-self: start; }
  .player-count-price { justify-self: start; max-width: none; text-align: left; }
  .customer-pricing-plan-grid-first .customer-pricing-plan { min-height: 104px; }
}

/* 2026 platform design refresh and tenant-wide branding */
.owner-body .sidebar {
  background-image:
    linear-gradient(180deg, rgba(5, 30, 24, .90), rgba(3, 20, 16, .97)),
    var(--workspace-cover, none),
    radial-gradient(circle at 20% 0%, rgba(183, 239, 69, .14), transparent 28%),
    linear-gradient(180deg, #0b3027, #071f1a);
  background-size: cover, cover, auto, auto;
  background-position: center, center, center, center;
}
.owner-body .dashboard-hero {
  background-image:
    linear-gradient(105deg, rgba(4, 30, 23, .94) 0%, rgba(5, 53, 39, .82) 58%, rgba(7, 46, 35, .62) 100%),
    var(--workspace-cover, linear-gradient(135deg, #0a382c, #0b5f47));
  background-size: cover;
  background-position: center;
}
.owner-body .workspace-card {
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
  backdrop-filter: blur(16px);
}
.workspace-avatar-logo { overflow: hidden; padding: 0; background: rgba(255,255,255,.96); }
.workspace-avatar-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.owner-body .topbar { box-shadow: 0 10px 35px rgba(13, 45, 35, .035); }
.owner-body .card { transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease; }
.owner-body .card:hover { border-color: color-mix(in srgb, var(--primary) 17%, var(--border)); box-shadow: 0 20px 50px rgba(13, 45, 35, .08); }

/* Superadmin shell */
.admin-body { overflow-x: hidden; }
.admin-shell { --sidebar-width: 286px; }
.admin-body .main {
  background:
    radial-gradient(circle at 92% 0%, rgba(78, 91, 213, .09), transparent 22%),
    radial-gradient(circle at 70% 30%, rgba(183, 239, 69, .07), transparent 25%),
    var(--bg);
}
.admin-sidebar {
  background:
    radial-gradient(circle at 18% 0%, rgba(183,239,69,.13), transparent 25%),
    radial-gradient(circle at 95% 35%, rgba(108,92,231,.14), transparent 28%),
    linear-gradient(180deg, #091f1a 0%, #071713 100%);
}
.admin-role-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr) auto;
  align-items: center;
  gap: 11px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  background: rgba(255,255,255,.055);
  backdrop-filter: blur(15px);
}
.admin-role-icon {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  color: #14271f;
  background: linear-gradient(135deg, var(--accent), #eaff9a);
  font-size: .68rem;
  font-weight: 950;
  letter-spacing: .04em;
}
.admin-role-card > span:nth-child(2) { display: grid; line-height: 1.2; }
.admin-role-card strong { color: #fff; font-size: .82rem; }
.admin-role-card small { margin-top: 4px; color: var(--sidebar-muted); font-size: .66rem; }
.admin-role-card i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px rgba(183,239,69,.1); }
.platform-health { display: grid; gap: 4px; padding: 10px 11px; color: var(--sidebar-muted); font-size: .68rem; }
.platform-health span { display: flex; align-items: center; gap: 8px; color: #d8e9e3; font-weight: 800; }
.platform-health i { width: 7px; height: 7px; border-radius: 50%; background: #37d795; box-shadow: 0 0 0 4px rgba(55,215,149,.1); }
.admin-topbar { min-height: 76px; }
.admin-profile-chip { pointer-events: none; }
.admin-content { width: min(100%, 1540px); padding: clamp(22px, 3vw, 38px); }
.admin-page-head { margin-bottom: 24px; }
.admin-page-head .eyebrow { margin-bottom: 7px; color: var(--primary); }
.admin-page-head h1 { margin-bottom: 7px; font-size: clamp(2.15rem, 4vw, 3.5rem); }
.admin-page-head p { max-width: 720px; color: var(--muted); }
.admin-search { min-width: min(100%, 430px); display: grid; grid-template-columns: 1fr auto; gap: 9px; }
.admin-search input { min-width: 0; }

/* Modern form sections */
.admin-create-panel { margin-bottom: 24px; overflow: hidden; padding: 0; }
.admin-create-panel > summary {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 21px;
  list-style: none;
  cursor: pointer;
  background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 5%, var(--surface)), var(--surface));
}
.admin-create-panel > summary::-webkit-details-marker { display: none; }
.admin-create-panel > summary > span:first-child { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; }
.admin-create-panel > summary strong { font-size: 1rem; }
.admin-create-panel > summary small { grid-column: 2; color: var(--muted); font-size: .72rem; }
.summary-icon { grid-row: 1 / 3; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); font-size: 1.25rem; box-shadow: 0 10px 25px color-mix(in srgb, var(--primary) 20%, transparent); }
.summary-chevron { color: var(--muted); font-size: 1.25rem; transition: transform .2s ease; }
.admin-create-panel[open] .summary-chevron { transform: rotate(180deg); }
.admin-organization-form, .plan-editor-form { padding: 0 22px 24px; border-top: 1px solid var(--border); }
.form-section { padding: 23px 0 2px; }
.card.form-section { padding: 23px; }
.form-section + .form-section { border-top: 1px solid var(--border); }
.card.form-section + .card.form-section { border-top: 1px solid var(--border); }
.form-section-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; margin-bottom: 18px; }
.form-section-head > div { display: flex; align-items: center; gap: 10px; }
.form-section-head > div > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--primary); background: var(--primary-soft); font-size: .63rem; font-weight: 950; }
.form-section-head h2 { margin: 0; font-size: 1.05rem; }
.form-section-head p { max-width: 470px; margin: 3px 0 0; color: var(--muted); font-size: .74rem; text-align: right; }
.compact-grid { margin-top: 16px; }
.single-form-grid { display: grid; gap: 15px; }
.form-actions { display: flex; justify-content: flex-end; padding-top: 6px; }
.field-hint { color: var(--muted); font-size: .66rem; font-weight: 600; }
.input-prefix { display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; overflow: hidden; border: 1px solid var(--border-strong); border-radius: 12px; background: var(--surface); }
.input-prefix:focus-within { border-color: var(--primary); box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 14%, transparent); }
.input-prefix span { padding: 0 0 0 12px; color: var(--muted); font-size: .76rem; font-weight: 750; }
.input-prefix input { border: 0; box-shadow: none !important; }

/* Image upload slots */
.brand-upload-grid { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(180px,.55fr) minmax(180px,.5fr); gap: 14px; }
.upload-card { position: relative; min-height: 172px; display: block; overflow: hidden; border: 1px dashed color-mix(in srgb, var(--primary) 40%, var(--border)); border-radius: 18px; background: color-mix(in srgb, var(--primary) 4%, var(--surface)); cursor: pointer; }
.upload-card:hover { border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.upload-card input { position: absolute; inset: 0; z-index: 2; opacity: 0; cursor: pointer; }
.upload-preview { min-height: 172px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 20px; color: var(--text); background-size: cover; background-position: center; text-align: center; }
.upload-preview::after { content: ''; position: absolute; inset: 0; z-index: -1; }
.upload-preview.compact { min-height: 172px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.upload-card.has-existing .upload-preview { color: #fff; text-shadow: 0 1px 8px rgba(0,0,0,.45); }
.upload-card.has-existing .upload-preview.compact { color: var(--text); text-shadow: none; background-color: var(--surface); }
.upload-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, var(--surface)); font-size: 1.15rem; box-shadow: var(--shadow-sm); }
.upload-preview strong { font-size: .84rem; }
.upload-preview small { max-width: 300px; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.upload-card.has-existing .upload-preview:not(.compact) small { color: #e7f1ed; }
.brand-color-card { display: grid; align-content: center; gap: 14px; padding: 17px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-muted); }
.brand-color-card label { grid-template-columns: 1fr 46px; align-items: center; }
.brand-color-card input[type=color] { width: 46px; border-radius: 11px; }
.remove-brand-options { margin-top: 13px; }

/* Organization cards */
.admin-organization-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; }
.organization-card { overflow: hidden; border: 1px solid var(--border); border-radius: 22px; background: var(--surface); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.organization-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); box-shadow: var(--shadow); }
.organization-cover { min-height: 185px; display: flex; flex-direction: column; justify-content: space-between; padding: 18px; color: #fff; background: radial-gradient(circle at 80% 10%, rgba(183,239,69,.24), transparent 30%), linear-gradient(135deg, #0b392d, #155c48); background-size: cover; background-position: center; }
.organization-cover-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.organization-plan-pill { padding: 6px 9px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; background: rgba(255,255,255,.1); backdrop-filter: blur(12px); font-size: .66rem; font-weight: 800; }
.organization-brand { display: flex; align-items: center; gap: 13px; }
.organization-brand > img, .organization-brand > span { width: 50px; height: 50px; flex: 0 0 auto; border-radius: 15px; object-fit: contain; padding: 5px; background: rgba(255,255,255,.94); color: #15372d; display: grid; place-items: center; font-weight: 950; }
.organization-brand h2 { margin: 0 0 4px; color: #fff; font-size: 1.28rem; }
.organization-brand a { color: #dff2eb; font-size: .7rem; font-weight: 720; }
.organization-card-body { padding: 18px; }
.organization-meta-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 12px; }
.organization-meta-grid > div { min-width: 0; display: grid; }
.organization-meta-grid small { color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.organization-meta-grid strong { margin-top: 5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.organization-meta-grid span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: .68rem; }
.organization-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--border); }
.organization-actions form { margin: 0; }

/* Organization edit */
.edit-organization-hero { min-height: 190px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding: 24px; color: #fff; background-image: linear-gradient(105deg,rgba(3,25,19,.92),rgba(4,49,36,.68)), var(--edit-cover, linear-gradient(135deg,#0b392d,#155c48)); background-size: cover; background-position: center; }
.edit-org-brand { display: flex; align-items: center; gap: 15px; }
.edit-org-brand > img, .edit-org-brand > span { width: 64px; height: 64px; display: grid; place-items: center; object-fit: contain; padding: 6px; border-radius: 19px; color: #11352a; background: rgba(255,255,255,.95); font-size: 1.35rem; font-weight: 950; }
.edit-org-brand h2 { margin: 7px 0 3px; color: #fff; font-size: 1.55rem; }
.edit-org-brand p { margin: 0; color: #d8ebe4; font-size: .72rem; }
.edit-org-stat { display: grid; min-width: 175px; padding: 14px 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 15px; background: rgba(255,255,255,.09); backdrop-filter: blur(12px); }
.edit-org-stat small { color: #cbe1d9; font-size: .62rem; }
.edit-org-stat strong { margin-top: 4px; color: #fff; }
.admin-edit-grid { display: grid; grid-template-columns: minmax(0,1.7fr) minmax(310px,.65fr); gap: 20px; align-items: start; }
.admin-edit-side .sticky-card { position: sticky; top: 100px; }

/* Plan management */
.plan-editor-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.plan-editor-grid .form-section + .form-section { border-top: 0; border-left: 1px solid var(--border); padding-left: 28px; }
.feature-check-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; margin-top: 17px; }
.feature-check { min-height: 64px; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); cursor: pointer; }
.feature-check:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--border)); }
.feature-check input { width: 18px; min-height: 18px; }
.feature-check span { display: grid; }
.feature-check strong { font-size: .73rem; }
.feature-check small { margin-top: 3px; color: var(--muted); font-size: .61rem; }
.subscription-plan-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.subscription-plan-card { display: flex; flex-direction: column; min-width: 0; padding: 22px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--primary) 2%,var(--surface))); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.subscription-plan-card:hover { transform: translateY(-3px); border-color: color-mix(in srgb,var(--primary) 25%,var(--border)); box-shadow: var(--shadow); }
.subscription-plan-card.is-inactive { opacity: .68; }
.plan-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.plan-card-top > div { display: flex; align-items: center; gap: 8px; }
.plan-code { color: var(--primary); font-size: .63rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); }
.status-dot.active { background: #20b77b; box-shadow: 0 0 0 4px rgba(32,183,123,.1); }
.plan-org-count { color: var(--muted); font-size: .63rem; }
.subscription-plan-card h2 { margin: 18px 0 7px; font-size: 1.5rem; }
.subscription-plan-card > p { min-height: 48px; color: var(--muted); font-size: .75rem; }
.plan-price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 12px 0 17px; }
.plan-price-row strong { font-size: 1.8rem; letter-spacing: -.05em; }
.plan-price-row span, .plan-price-row small { color: var(--muted); font-size: .66rem; }
.plan-price-row small { flex-basis: 100%; }
.plan-limit-row { display: grid; grid-template-columns: repeat(3,1fr); gap: 7px; }
.plan-limit-row span { display: grid; padding: 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); text-align: center; }
.plan-limit-row strong { font-size: .95rem; }
.plan-limit-row small { color: var(--muted); font-size: .57rem; }
.plan-feature-pills { display: flex; flex-wrap: wrap; gap: 6px; min-height: 54px; margin-top: 14px; align-content: flex-start; }
.plan-feature-pills span { padding: 5px 8px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: .58rem; font-weight: 800; }
.plan-edit-details { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--border); }
.plan-edit-details > summary { display: flex; justify-content: space-between; align-items: center; list-style: none; color: var(--primary); cursor: pointer; font-size: .74rem; font-weight: 850; }
.plan-edit-details > summary::-webkit-details-marker { display: none; }
.plan-edit-details[open] > summary span { transform: rotate(180deg); }
.plan-inline-editor { margin-top: 16px; }
.plan-inline-editor .form-grid { grid-template-columns: 1fr; gap: 11px; }
.compact-features { grid-template-columns: 1fr; }
.compact-features .feature-check { min-height: 44px; }

/* Dashboard refinements */
.admin-body .stats { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 13px; margin-bottom: 20px; }
.admin-body .stats article { position: relative; overflow: hidden; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface); box-shadow: var(--shadow-sm); }
.admin-body .stats article::after { content: ''; position: absolute; right: -24px; bottom: -26px; width: 80px; height: 80px; border: 14px solid color-mix(in srgb,var(--primary) 6%,transparent); border-radius: 50%; }
.admin-body .stats span { color: var(--muted); font-size: .67rem; font-weight: 750; }
.admin-body .stats strong { display: block; margin-top: 8px; font-size: 1.5rem; letter-spacing: -.04em; }
.admin-body table tbody tr { transition: background .18s ease; }
.admin-body table tbody tr:hover { background: color-mix(in srgb,var(--primary) 3%,var(--surface)); }

@media (max-width: 1250px) {
  .subscription-plan-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .admin-body .stats { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .brand-upload-grid { grid-template-columns: 1fr 1fr; }
  .brand-upload-grid .upload-card-wide { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .admin-organization-grid, .admin-edit-grid, .plan-editor-grid { grid-template-columns: 1fr; }
  .plan-editor-grid .form-section + .form-section { border-left: 0; border-top: 1px solid var(--border); padding-left: 0; }
  .admin-edit-side .sticky-card { position: static; }
  .admin-search { width: 100%; }
}
@media (max-width: 720px) {
  .admin-content { padding: 18px 14px 30px; }
  .admin-page-head { align-items: stretch; }
  .admin-search { grid-template-columns: 1fr; }
  .admin-create-panel > summary { padding: 15px; }
  .admin-create-panel > summary small { display: none; }
  .admin-organization-form, .plan-editor-form { padding: 0 15px 18px; }
  .form-section-head { display: grid; }
  .form-section-head p { text-align: left; }
  .brand-upload-grid, .subscription-plan-grid, .admin-body .stats { grid-template-columns: 1fr; }
  .brand-upload-grid .upload-card-wide { grid-column: auto; }
  .organization-meta-grid { grid-template-columns: 1fr; }
  .edit-organization-hero { align-items: flex-start; flex-direction: column; }
  .edit-org-stat { width: 100%; }
  .feature-check-grid { grid-template-columns: 1fr; }
  .plan-limit-row { grid-template-columns: 1fr 1fr 1fr; }
}

/* Modern owner settings */
.settings-brand-hero {
  min-height: 190px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  padding: 24px;
  color: #fff;
  background-image: linear-gradient(105deg,rgba(3,25,19,.92),rgba(4,49,36,.62)), var(--settings-cover, linear-gradient(135deg,#0b392d,#155c48));
  background-size: cover;
  background-position: center;
}
.settings-brand-copy { display: flex; align-items: center; gap: 14px; }
.settings-brand-copy > img, .settings-brand-copy > span { width: 62px; height: 62px; display: grid; place-items: center; object-fit: contain; padding: 6px; border-radius: 18px; color: #11352a; background: rgba(255,255,255,.96); font-size: 1.3rem; font-weight: 950; }
.settings-brand-copy small { color: #cce1da; font-size: .64rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.settings-brand-copy h2 { margin: 5px 0 2px; color: #fff; font-size: 1.5rem; }
.settings-brand-copy p { margin: 0; color: #dbece6; font-size: .7rem; }
.settings-control-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 16px; }
.settings-toggle-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 20px; }
.settings-save-bar { position: sticky; bottom: 14px; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 14px 16px; border: 1px solid color-mix(in srgb,var(--primary) 20%,var(--border)); border-radius: 17px; background: color-mix(in srgb,var(--surface) 90%,transparent); box-shadow: 0 18px 55px rgba(7,38,29,.16); backdrop-filter: blur(20px); }
.settings-save-bar > div { display: grid; }
.settings-save-bar strong { font-size: .82rem; }
.settings-save-bar small { color: var(--muted); font-size: .65rem; }
@media (max-width: 980px) { .settings-control-grid, .settings-toggle-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 720px) {
  .settings-brand-hero, .settings-save-bar { align-items: flex-start; flex-direction: column; }
  .settings-control-grid, .settings-toggle-grid { grid-template-columns: 1fr; }
  .settings-save-bar { bottom: 8px; }
  .settings-save-bar .button { width: 100%; }
}

/* Yearly billing and subscription lifecycle */
.plan-strategy-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; margin: -4px 0 14px; }
.plan-strategy-grid article { position: relative; overflow: hidden; display: grid; gap: 7px; padding: 18px; border: 1px solid var(--border); border-radius: 18px; background: linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--primary) 4%,var(--surface))); box-shadow: var(--shadow-sm); }
.plan-strategy-grid article::after { content: ''; position: absolute; right: -34px; bottom: -42px; width: 100px; height: 100px; border: 18px solid color-mix(in srgb,var(--primary) 7%,transparent); border-radius: 50%; }
.plan-strategy-grid article.recommended { border-color: color-mix(in srgb,var(--primary) 42%,var(--border)); box-shadow: 0 16px 38px color-mix(in srgb,var(--primary) 12%,transparent); }
.plan-strategy-grid span { position: relative; z-index: 1; color: var(--primary); font-size: .64rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.plan-strategy-grid strong { position: relative; z-index: 1; font-size: 1.15rem; }
.plan-strategy-grid small { position: relative; z-index: 1; color: var(--muted); font-size: .66rem; }
.plan-policy-note { margin-bottom: 18px; padding: 13px 15px; border: 1px solid color-mix(in srgb,var(--primary) 18%,var(--border)); border-radius: 14px; color: var(--muted); background: color-mix(in srgb,var(--primary) 4%,var(--surface)); font-size: .7rem; }
.plan-policy-note strong { color: var(--text); }
.plan-trial-pill { margin-top: 13px; padding: 8px 10px; border: 1px solid color-mix(in srgb,var(--accent) 30%,var(--border)); border-radius: 11px; color: color-mix(in srgb,var(--primary) 82%,var(--text)); background: color-mix(in srgb,var(--accent) 10%,var(--surface)); font-size: .62rem; font-weight: 850; text-align: center; }
.subscription-admin-summary { display: grid; gap: 4px; margin: 4px 0 12px; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); }
.subscription-admin-summary span { color: var(--muted); font-size: .61rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.subscription-admin-summary strong { font-size: .86rem; }
.subscription-admin-summary small { color: var(--muted); font-size: .65rem; }
.subscription-restart-check { margin-bottom: 13px; }
.edit-org-stat span { margin-top: 3px; color: #cbe1d9; font-size: .62rem; text-transform: capitalize; }
.organization-meta-grid { grid-template-columns: 1.15fr .7fr .8fr; }

.subscription-lifecycle-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,1.25fr) auto minmax(150px,.45fr); gap: 22px; align-items: center; margin-bottom: 20px; padding: 20px 22px; border: 1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius: 21px; background: linear-gradient(120deg,color-mix(in srgb,var(--primary) 6%,var(--surface)),var(--surface)); box-shadow: var(--shadow-sm); }
.subscription-lifecycle-card::after { content: ''; position: absolute; width: 180px; height: 180px; right: -105px; top: -100px; border: 26px solid color-mix(in srgb,var(--primary) 6%,transparent); border-radius: 50%; pointer-events: none; }
.subscription-lifecycle-card.status-trial { border-color: color-mix(in srgb,#e8a51b 34%,var(--border)); background: linear-gradient(120deg,color-mix(in srgb,#f5b82e 8%,var(--surface)),var(--surface)); }
.subscription-lifecycle-card.status-expired { border-color: color-mix(in srgb,#d94b55 35%,var(--border)); background: linear-gradient(120deg,color-mix(in srgb,#d94b55 8%,var(--surface)),var(--surface)); }
.subscription-lifecycle-copy { position: relative; z-index: 1; min-width: 0; }
.subscription-kicker { color: var(--primary); font-size: .62rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.status-trial .subscription-kicker { color: #9b6500; }
.status-expired .subscription-kicker { color: #b73541; }
.subscription-lifecycle-copy h2 { margin: 6px 0 5px; font-size: clamp(1.1rem,2vw,1.45rem); }
.subscription-lifecycle-copy p { margin: 0; color: var(--muted); font-size: .7rem; line-height: 1.55; }
.subscription-countdown { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(4,minmax(58px,1fr)); gap: 7px; }
.subscription-countdown div { min-width: 58px; display: grid; place-items: center; gap: 2px; padding: 11px 8px; border: 1px solid var(--border); border-radius: 13px; background: color-mix(in srgb,var(--surface) 86%,transparent); }
.subscription-countdown strong { font-size: 1.15rem; font-variant-numeric: tabular-nums; letter-spacing: -.03em; }
.subscription-countdown span { color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.subscription-plan-summary { position: relative; z-index: 1; min-width: 145px; display: grid; justify-items: end; padding-left: 20px; border-left: 1px solid var(--border); text-align: right; }
.subscription-plan-summary span { color: var(--muted); font-size: .62rem; font-weight: 800; }
.subscription-plan-summary strong { margin-top: 5px; font-size: 1.2rem; }
.subscription-plan-summary small { color: var(--muted); font-size: .61rem; }
.subscription-expired-action { position: relative; z-index: 1; display: grid; max-width: 290px; gap: 4px; padding: 12px 14px; border: 1px solid color-mix(in srgb,#d94b55 30%,var(--border)); border-radius: 13px; background: color-mix(in srgb,#d94b55 7%,var(--surface)); }
.subscription-expired-action strong { color: #b73541; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; }
.subscription-expired-action span { color: var(--muted); font-size: .64rem; line-height: 1.45; }

@media (max-width: 1100px) {
  .subscription-lifecycle-card { grid-template-columns: 1fr auto; }
  .subscription-plan-summary { grid-column: 1 / -1; justify-items: start; padding: 13px 0 0; border-left: 0; border-top: 1px solid var(--border); text-align: left; }
  .organization-meta-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 780px) {
  .plan-strategy-grid { grid-template-columns: 1fr; }
  .subscription-lifecycle-card { grid-template-columns: 1fr; padding: 18px; }
  .subscription-countdown { width: 100%; grid-template-columns: repeat(4,1fr); }
  .subscription-plan-summary { grid-column: auto; }
}
@media (max-width: 520px) {
  .subscription-countdown { grid-template-columns: repeat(2,1fr); }
  .organization-meta-grid { grid-template-columns: 1fr; }
}

/* Platform payments, purchases, and owner billing */
.nav-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; margin-left: auto; padding: 0 6px; border-radius: 999px; color: #fff; background: #d95b55; font-size: .6rem; font-weight: 900; }
.admin-settings-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(320px,.65fr); gap: 20px; align-items: start; }
.payment-qr-admin-card { position: sticky; top: 100px; }
.payment-qr-upload { min-height: 330px; margin-bottom: 14px; }
.payment-qr-upload .upload-preview { min-height: 330px; background-size: contain; background-repeat: no-repeat; background-position: center; }
.remove-qr-check { margin: 0 0 16px; }
.support-settings-grid { grid-template-columns: minmax(0,1fr) minmax(300px,.58fr); }
.support-preview-card, .billing-support-card { display: flex; flex-direction: column; align-items: flex-start; min-height: 310px; padding: 26px; }
.support-preview-icon { width: 52px; height: 52px; display: grid; place-items: center; margin: 18px 0 13px; border-radius: 17px; color: var(--primary); background: var(--primary-soft); font-size: 1.35rem; font-weight: 950; }
.support-preview-card h2, .billing-support-card h2 { margin: 0 0 8px; }
.support-preview-card > p, .billing-support-card > p { color: var(--muted); }
.support-preview-links { display: grid; width: 100%; gap: 9px; margin-top: auto; }
.support-preview-links span { padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); font-size: .73rem; font-weight: 750; }

.purchase-filter-tabs { display: flex; gap: 8px; margin-bottom: 18px; padding: 6px; overflow-x: auto; border: 1px solid var(--border); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-sm); }
.purchase-filter-tabs a { min-width: 112px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 13px; border-radius: 11px; color: var(--muted); font-size: .72rem; font-weight: 850; }
.purchase-filter-tabs a:hover, .purchase-filter-tabs a.active { color: var(--primary); background: var(--primary-soft); }
.purchase-filter-tabs strong { min-width: 25px; height: 25px; display: grid; place-items: center; padding: 0 6px; border-radius: 999px; background: var(--surface); font-size: .62rem; }
.purchase-review-list { display: grid; gap: 18px; }
.purchase-review-card { overflow: hidden; padding: 0; border-left: 4px solid var(--border); }
.purchase-review-card.status-pending { border-left-color: #d59d2a; }
.purchase-review-card.status-approved { border-left-color: #1f9c6b; }
.purchase-review-card.status-rejected { border-left-color: #d95b55; }
.purchase-review-head { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 22px; border-bottom: 1px solid var(--border); background: linear-gradient(180deg,var(--surface),var(--surface-muted)); }
.purchase-org-identity { display: flex; align-items: center; gap: 13px; min-width: 0; }
.purchase-org-avatar { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; color: var(--primary); background: var(--primary-soft); font-size: 1rem; font-weight: 950; }
.purchase-org-identity h2 { margin: 5px 0 2px; font-size: 1.1rem; }
.purchase-org-identity p { margin: 0; color: var(--muted); font-size: .68rem; }
.purchase-review-price { display: grid; flex: 0 0 auto; text-align: right; }
.purchase-review-price strong { font-size: 1.3rem; }
.purchase-review-price span { color: var(--muted); font-size: .66rem; }
.purchase-review-grid { display: grid; grid-template-columns: minmax(260px,.62fr) minmax(0,1.38fr); }
.purchase-proof-panel { min-height: 310px; padding: 18px; border-right: 1px solid var(--border); background: var(--surface-muted); }
.purchase-proof-panel a { height: 100%; min-height: 274px; position: relative; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 17px; background: var(--surface); }
.purchase-proof-panel img { width: 100%; height: 100%; max-height: 420px; object-fit: contain; }
.purchase-proof-panel span { position: absolute; right: 10px; bottom: 10px; padding: 7px 9px; border-radius: 9px; color: #fff; background: rgba(5,29,22,.82); font-size: .62rem; font-weight: 850; backdrop-filter: blur(8px); }
.purchase-detail-panel { display: grid; align-content: start; gap: 18px; padding: 22px; }
.purchase-detail-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 0; }
.purchase-detail-list > div { min-width: 0; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); }
.purchase-detail-list dt { color: var(--muted); font-size: .58rem; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.purchase-detail-list dd { margin: 5px 0 0; overflow-wrap: anywhere; font-size: .76rem; font-weight: 820; }
.purchase-review-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.purchase-review-actions form { margin: 0; }
.purchase-reject-details { border: 1px solid color-mix(in srgb,#d95b55 30%,var(--border)); border-radius: 13px; overflow: hidden; }
.purchase-reject-details summary { padding: 12px 14px; list-style: none; color: #b9423c; cursor: pointer; font-size: .72rem; font-weight: 900; text-align: center; }
.purchase-reject-details summary::-webkit-details-marker { display: none; }
.purchase-reject-details form { display: grid; gap: 10px; padding: 13px; border-top: 1px solid var(--border); background: var(--surface-muted); }
.purchase-decision-note { padding: 15px; border-radius: 14px; }
.purchase-decision-note strong { display: block; margin-bottom: 4px; }
.purchase-decision-note p { margin: 0; font-size: .72rem; }
.purchase-decision-note.approved { color: #0c6848; background: rgba(31,156,107,.1); }
.purchase-decision-note.rejected { color: #9d342f; background: rgba(217,91,85,.1); }
.button.danger { color: #fff; background: #c94f49; border-color: #c94f49; }
.button.danger:hover { background: #ad3f3a; }

.topbar-buy-button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 15px; border-radius: 12px; color: #09271f; background: var(--accent); font-size: .69rem; font-weight: 900; box-shadow: 0 8px 20px color-mix(in srgb,var(--accent) 25%,transparent); }
.topbar-buy-button:hover { transform: translateY(-1px); filter: brightness(.98); }
.owner-support-card { display: grid; gap: 4px; margin: 10px 0; padding: 12px; border: 1px solid rgba(255,255,255,.1); border-radius: 13px; background: rgba(255,255,255,.05); }
.owner-support-card span { color: rgba(255,255,255,.56); font-size: .58rem; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.owner-support-card a { overflow: hidden; color: rgba(255,255,255,.9); font-size: .64rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }

.subscription-lifecycle-card.has-purchase-action { grid-template-columns: minmax(0,1.2fr) auto minmax(150px,.35fr) auto; }
.subscription-buy-action { display: grid; gap: 5px; min-width: 130px; align-content: center; }
.subscription-buy-action small { max-width: 150px; color: var(--muted); font-size: .58rem; line-height: 1.4; }
.dashboard-purchase-notice { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 18px; padding: 15px 18px; border: 1px solid var(--border); border-radius: 16px; }
.dashboard-purchase-notice.pending { border-color: rgba(213,157,42,.35); background: rgba(213,157,42,.08); }
.dashboard-purchase-notice.rejected { border-color: rgba(217,91,85,.35); background: rgba(217,91,85,.08); }
.dashboard-purchase-notice strong { display: block; margin-bottom: 3px; }
.dashboard-purchase-notice p { margin: 0; color: var(--muted); font-size: .7rem; }
.dashboard-purchase-notice a { flex: 0 0 auto; color: var(--primary); font-size: .69rem; font-weight: 900; }

.billing-hero { min-height: 220px; display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 24px; align-items: center; margin-bottom: 20px; padding: 28px; overflow: hidden; border-radius: 24px; color: #fff; background-image: linear-gradient(110deg,rgba(4,32,24,.94),rgba(8,78,57,.72)), var(--workspace-cover,linear-gradient(135deg,#0b392d,#155c48)); background-size: cover; background-position: center; box-shadow: var(--shadow); }
.billing-hero h1 { max-width: 700px; margin: 7px 0 8px; color: #fff; font-size: clamp(1.8rem,3vw,2.7rem); }
.billing-hero > div > p { max-width: 680px; margin: 0; color: #d9ebe5; }
.current-plan-card { display: grid; gap: 8px; padding: 20px; border: 1px solid rgba(255,255,255,.17); border-radius: 19px; background: rgba(255,255,255,.1); backdrop-filter: blur(14px); }
.current-plan-card > span { color: #c9dfd7; font-size: .61rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.current-plan-card > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.current-plan-card > div > strong { color: #fff; font-size: 1.35rem; }
.current-plan-card p { margin: 0; color: #fff; font-weight: 850; }
.current-plan-card small { color: #d8ebe4; }
.purchase-status-banner { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 14px; margin-bottom: 20px; padding: 16px 18px; border-radius: 17px; border: 1px solid var(--border); }
.purchase-status-banner.pending { border-color: rgba(213,157,42,.35); background: rgba(213,157,42,.08); }
.purchase-status-banner.rejected { border-color: rgba(217,91,85,.35); background: rgba(217,91,85,.08); }
.purchase-status-icon { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px; background: var(--surface); font-weight: 950; }
.purchase-status-banner strong { display: block; margin-bottom: 3px; }
.purchase-status-banner p { margin: 0; color: var(--muted); font-size: .7rem; }
.purchase-status-banner > a, .purchase-status-banner > span:last-child { color: var(--primary); font-size: .66rem; font-weight: 850; }
.owner-plan-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px; margin-bottom: 20px; }
.owner-plan-card { display: flex; flex-direction: column; min-width: 0; padding: 23px; border: 1px solid var(--border); border-radius: 22px; background: linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--primary) 2%,var(--surface))); box-shadow: var(--shadow-sm); }
.owner-plan-card.is-current { border-color: color-mix(in srgb,var(--primary) 45%,var(--border)); box-shadow: 0 0 0 3px var(--primary-soft),var(--shadow-sm); }
.owner-plan-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.owner-plan-card-head h2 { margin: 8px 0 0; font-size: 1.45rem; }
.current-plan-badge { padding: 6px 9px; border-radius: 999px; color: var(--primary); background: var(--primary-soft); font-size: .58rem; font-weight: 900; }
.owner-plan-card > p { min-height: 44px; color: var(--muted); font-size: .74rem; }
.owner-plan-prices { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin: 10px 0 16px; }
.owner-plan-prices > div { display: grid; padding: 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); }
.owner-plan-prices strong { font-size: 1.05rem; }
.owner-plan-prices span { color: var(--muted); font-size: .6rem; }
.owner-plan-card > .button, .owner-plan-card > .payment-not-configured, .owner-purchase-checkout { margin-top: auto; }
.payment-not-configured { padding: 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); background: var(--surface-muted); font-size: .68rem; line-height: 1.5; }
.owner-purchase-checkout { border-top: 1px solid var(--border); padding-top: 16px; }
.owner-purchase-checkout > summary { list-style: none; cursor: pointer; }
.owner-purchase-checkout > summary::-webkit-details-marker { display: none; }
.owner-purchase-checkout[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.purchase-checkout-form { display: grid; gap: 13px; padding: 17px; border: 1px solid var(--border); border-top: 0; border-radius: 0 0 15px 15px; background: var(--surface-muted); }
.checkout-plan-summary { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.checkout-plan-summary span { color: var(--muted); font-size: .65rem; }
.billing-cycle-options { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.billing-cycle-options label { position: relative; display: block; cursor: pointer; }
.billing-cycle-options input { position: absolute; opacity: 0; pointer-events: none; }
.billing-cycle-options span { display: grid; padding: 11px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.billing-cycle-options input:checked + span { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-soft); }
.billing-cycle-options strong { font-size: .72rem; }
.billing-cycle-options small { color: var(--muted); font-size: .62rem; }
.checkout-payment-box { display: grid; grid-template-columns: 130px minmax(0,1fr); gap: 14px; align-items: center; padding: 13px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
.checkout-qr { aspect-ratio: 1; display: grid; place-items: center; overflow: hidden; border: 1px solid var(--border); border-radius: 12px; background: #fff; }
.checkout-qr img { width: 100%; height: 100%; object-fit: contain; }
.checkout-payment-box span { color: var(--muted); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.checkout-payment-box h3 { margin: 3px 0 7px; }
.checkout-payment-box p { margin: 3px 0; font-size: .67rem; }
.checkout-payment-box small { display: block; margin-top: 7px; color: var(--muted); font-size: .61rem; line-height: 1.45; }
.proof-upload-field input[type=file] { padding: 9px; background: var(--surface); }
.proof-upload-field small { color: var(--muted); }
.billing-bottom-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(280px,.55fr); gap: 18px; align-items: start; }
.owner-purchase-history { display: grid; }
.owner-purchase-history article { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 14px; padding: 15px 0; border-top: 1px solid var(--border); }
.owner-purchase-history article:first-child { border-top: 0; }
.owner-purchase-history article > div { display: grid; gap: 4px; }
.owner-purchase-history article > div:last-of-type { text-align: right; }
.owner-purchase-history small { color: var(--muted); font-size: .61rem; }
.owner-purchase-history a { color: var(--primary); font-size: .62rem; font-weight: 850; }
.purchase-history-reason { grid-column: 1 / -1; margin: 0; padding: 10px 12px; border-radius: 11px; color: #9d342f; background: rgba(217,91,85,.09); font-size: .68rem; }
.support-contact-link { width: 100%; display: grid; gap: 3px; margin-top: 9px; padding: 12px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); }
.support-contact-link span { color: var(--muted); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.support-contact-link strong { overflow-wrap: anywhere; font-size: .72rem; }

@media (max-width: 1100px) {
  .admin-settings-grid, .support-settings-grid, .billing-bottom-grid { grid-template-columns: 1fr; }
  .payment-qr-admin-card { position: static; }
  .subscription-lifecycle-card, .subscription-lifecycle-card.has-purchase-action { grid-template-columns: minmax(0,1fr) auto; }
  .subscription-plan-summary, .subscription-buy-action { min-width: 0; }
  .purchase-review-grid { grid-template-columns: 1fr; }
  .purchase-proof-panel { border-right: 0; border-bottom: 1px solid var(--border); }
}
@media (max-width: 820px) {
  .billing-hero, .owner-plan-grid { grid-template-columns: 1fr; }
  .purchase-review-head, .dashboard-purchase-notice { align-items: flex-start; flex-direction: column; }
  .purchase-review-price { text-align: left; }
  .purchase-detail-list, .purchase-review-actions { grid-template-columns: 1fr; }
  .purchase-status-banner { grid-template-columns: auto minmax(0,1fr); }
  .purchase-status-banner > a, .purchase-status-banner > span:last-child { grid-column: 2; }
}
@media (max-width: 620px) {
  .topbar-buy-button { width: 38px; min-width: 38px; padding: 0; }
  .topbar-buy-button span { font-size: 0; }
  .topbar-buy-button span::before { content: '₱'; font-size: .85rem; }
  .billing-hero { padding: 20px; border-radius: 18px; }
  .owner-plan-card { padding: 18px; }
  .owner-plan-prices, .billing-cycle-options, .checkout-payment-box { grid-template-columns: 1fr; }
  .checkout-qr { width: min(100%,220px); margin: auto; }
  .owner-purchase-history article { grid-template-columns: 1fr; }
  .owner-purchase-history article > div:last-of-type { text-align: left; }
  .purchase-review-head { padding: 17px; }
  .purchase-detail-panel, .purchase-proof-panel { padding: 15px; }
  .subscription-lifecycle-card, .subscription-lifecycle-card.has-purchase-action { grid-template-columns: 1fr; }
}

/* Subscription marketplace and dedicated checkout */
.billing-hero-marketplace { min-height: 238px; }
.plan-marketplace { margin-bottom: 22px; padding: 25px; border: 1px solid var(--border); border-radius: 24px; background: color-mix(in srgb,var(--surface) 94%,var(--primary) 6%); box-shadow: var(--shadow-sm); }
.plan-marketplace-toolbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.plan-marketplace-toolbar h2 { margin: 5px 0 5px; font-size: clamp(1.45rem,2.5vw,2rem); }
.plan-marketplace-toolbar p { margin: 0; color: var(--muted); font-size: .78rem; }
.billing-switch { display: inline-grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); box-shadow: inset 0 1px 2px rgba(7,24,18,.05); }
.billing-switch button { min-width: 104px; min-height: 39px; padding: 8px 14px; border: 0; border-radius: 10px; color: var(--muted); background: transparent; cursor: pointer; font-weight: 850; transition: .18s ease; }
.billing-switch button:hover { color: var(--text); }
.billing-switch button.active { color: #fff; background: linear-gradient(135deg,var(--primary),var(--primary-dark)); box-shadow: 0 8px 18px color-mix(in srgb,var(--primary) 24%,transparent); }
.hostinger-plan-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(250px,320px)); justify-content: center; align-items: stretch; gap: 14px; }
.hostinger-plan-card { position: relative; min-width: 0; min-height: 650px; display: flex; flex-direction: column; padding: 24px 22px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--surface); box-shadow: 0 9px 28px rgba(20,48,39,.07); transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.hostinger-plan-card:hover { transform: translateY(-4px); border-color: color-mix(in srgb,var(--primary) 36%,var(--border)); box-shadow: 0 20px 45px rgba(13,49,38,.12); }
.hostinger-plan-card.is-current { box-shadow: 0 0 0 3px var(--primary-soft),0 16px 36px rgba(13,49,38,.1); }
.hostinger-plan-card.is-featured { color: #effaf6; border-color: #172f28; background: linear-gradient(160deg,#15392f 0%,#071b15 68%,#050f0c 100%); box-shadow: 0 24px 54px rgba(5,23,17,.25); }
.hostinger-plan-card.is-featured h3,.hostinger-plan-card.is-featured .market-plan-price strong,.hostinger-plan-card.is-featured .market-plan-feature-heading { color: #fff; }
.hostinger-plan-card.is-featured p,.hostinger-plan-card.is-featured .market-plan-price span,.hostinger-plan-card.is-featured .market-plan-price small { color: #bdd3cb; }
.hostinger-plan-card-top { min-height: 145px; }
.plan-card-label-row { min-height: 28px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hostinger-plan-card .plan-code { color: var(--primary); font-size: .58rem; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.hostinger-plan-card.is-featured .plan-code { color: var(--accent); }
.hostinger-plan-card h3 { margin: 13px 0 8px; font-size: 1.32rem; }
.hostinger-plan-card p { margin: 0; color: var(--muted); font-size: .71rem; line-height: 1.55; }
.popular-plan-badge,.current-plan-badge { padding: 6px 9px; border-radius: 999px; font-size: .56rem; font-weight: 950; white-space: nowrap; }
.popular-plan-badge { color: #082b21; background: var(--accent); }
.hostinger-plan-card.is-featured .current-plan-badge { color: #0b3026; background: #dcff9c; }
.market-plan-price { min-height: 92px; display: grid; grid-template-columns: auto 1fr; align-items: end; gap: 0 5px; margin: 10px 0 16px; }
.market-plan-price strong { color: var(--text-strong); font-size: clamp(1.45rem,2.2vw,2rem); line-height: 1; letter-spacing: -.04em; }
.market-plan-price span { align-self: end; padding-bottom: 2px; color: var(--muted); font-size: .67rem; }
.market-plan-price small { grid-column: 1 / -1; align-self: start; margin-top: 9px; color: var(--muted); font-size: .59rem; }
.market-plan-cta { width: 100%; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border: 1px solid var(--primary); border-radius: 11px; color: var(--primary); background: transparent; cursor: pointer; font-weight: 900; transition: .18s ease; }
.market-plan-cta:hover { color: #fff; background: var(--primary); transform: translateY(-1px); }
.hostinger-plan-card.is-featured .market-plan-cta { color: #08291f; border-color: var(--accent); background: var(--accent); box-shadow: 0 10px 24px rgba(183,239,69,.17); }
.hostinger-plan-card.is-featured .market-plan-cta:hover { background: #d7ff86; }
.market-plan-cta:disabled,.market-plan-cta.is-disabled { opacity: .52; cursor: not-allowed; transform: none; }
.hostinger-plan-card .market-plan-cta.is-current-plan { color: color-mix(in srgb,var(--primary) 72%,var(--text)); border-color: color-mix(in srgb,var(--primary) 24%,var(--border)); background: color-mix(in srgb,var(--primary) 10%,var(--surface)); box-shadow: none; cursor: default; opacity: 1; }
.hostinger-plan-card .market-plan-cta.is-current-plan:hover { color: color-mix(in srgb,var(--primary) 72%,var(--text)); background: color-mix(in srgb,var(--primary) 10%,var(--surface)); transform: none; }
.market-plan-divider { height: 1px; margin: 22px 0 18px; background: var(--border); }
.hostinger-plan-card.is-featured .market-plan-divider { background: rgba(255,255,255,.12); }
.market-plan-feature-heading { margin-bottom: 12px; color: var(--text-strong); font-size: .66rem; font-weight: 900; }
.market-plan-features { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.market-plan-features li { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 8px; align-items: start; color: var(--text); font-size: .66rem; line-height: 1.35; }
.market-plan-features .feature-state { color: #0ba26b; font-weight: 950; }
.market-plan-features li.not-included { color: color-mix(in srgb,var(--muted) 73%,transparent); }
.market-plan-features li.not-included .feature-state { color: var(--muted); }
.hostinger-plan-card.is-featured .market-plan-features li { color: #e0eee9; }
.hostinger-plan-card.is-featured .market-plan-features li.not-included { color: #789087; }
.hostinger-plan-card.is-featured .market-plan-features .feature-state { color: var(--accent); }

.checkout-back-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; color: var(--muted); font-size: .69rem; }
.checkout-back-row a { font-weight: 900; }
.subscription-checkout-hero { display: grid; grid-template-columns: minmax(0,1fr) minmax(420px,.8fr); gap: 28px; align-items: center; margin-bottom: 20px; padding: 27px 29px; border: 1px solid color-mix(in srgb,var(--primary) 22%,var(--border)); border-radius: 24px; background: linear-gradient(125deg,color-mix(in srgb,var(--primary) 9%,var(--surface)),var(--surface)); box-shadow: var(--shadow-sm); }
.subscription-checkout-hero h1 { margin: 6px 0 8px; font-size: clamp(1.8rem,3vw,2.55rem); }
.subscription-checkout-hero p { max-width: 720px; margin: 0; color: var(--muted); }
.checkout-progress { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.checkout-progress li { display: grid; grid-template-columns: 35px minmax(0,1fr); gap: 10px; align-items: center; padding: 9px 11px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface); }
.checkout-progress li > span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); background: var(--surface-muted); font-size: .66rem; font-weight: 950; }
.checkout-progress li div { display: grid; }
.checkout-progress strong { font-size: .67rem; }
.checkout-progress small { color: var(--muted); font-size: .57rem; }
.checkout-progress li.done > span { color: #fff; background: var(--primary); }
.checkout-progress li.active { border-color: color-mix(in srgb,var(--primary) 45%,var(--border)); box-shadow: 0 0 0 3px var(--primary-soft); }
.checkout-progress li.active > span { color: #0a2e24; background: var(--accent); }
.checkout-pending-banner { margin-bottom: 20px; }
.subscription-checkout-layout { display: grid; grid-template-columns: minmax(0,1.15fr) minmax(370px,.75fr); gap: 20px; align-items: start; }
.checkout-main-column,.checkout-sidebar-column { display: grid; gap: 18px; min-width: 0; }
.checkout-sidebar-column { position: sticky; top: 88px; }
.checkout-plan-panel,.checkout-payment-form-panel,.large-qr-card,.checkout-support-panel { padding: 23px; }
.checkout-section-heading,.large-qr-card-heading { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 12px; align-items: start; }
.checkout-section-heading { margin-bottom: 19px; }
.checkout-section-number { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; color: var(--primary); background: var(--primary-soft); font-size: .6rem; font-weight: 950; }
.checkout-section-heading h2,.large-qr-card-heading h2 { margin: 4px 0 5px; }
.checkout-section-heading p { margin: 0; color: var(--muted); font-size: .7rem; }
.checkout-cycle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.checkout-cycle-option { position: relative; display: block; cursor: pointer; }
.checkout-cycle-option input { position: absolute; opacity: 0; pointer-events: none; }
.checkout-cycle-option > span { min-height: 82px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); transition: .18s ease; }
.checkout-cycle-option > span > span { display: grid; }
.checkout-cycle-option strong { font-size: .76rem; }
.checkout-cycle-option small { color: var(--muted); font-size: .59rem; }
.checkout-cycle-option b { font-size: .85rem; white-space: nowrap; }
.checkout-cycle-option input:checked + span { border-color: var(--primary); background: color-mix(in srgb,var(--primary) 6%,var(--surface)); box-shadow: 0 0 0 3px var(--primary-soft); }
.checkout-cycle-option input:disabled + span { opacity: .45; cursor: not-allowed; }
.checkout-included-list { margin-top: 18px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-muted); }
.checkout-included-list > strong { font-size: .7rem; }
.checkout-included-list ul { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px 16px; margin: 13px 0 0; padding: 0; list-style: none; }
.checkout-included-list li { display: grid; grid-template-columns: 17px minmax(0,1fr); gap: 7px; color: var(--muted); font-size: .65rem; }
.checkout-included-list li span { color: var(--success); font-weight: 950; }
.dedicated-checkout-form { display: grid; gap: 16px; }
.checkout-order-total { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 18px; border: 1px solid color-mix(in srgb,var(--primary) 28%,var(--border)); border-radius: 15px; background: linear-gradient(135deg,var(--primary-soft),var(--surface)); }
.checkout-order-total > div { display: grid; }
.checkout-order-total span { font-size: .66rem; font-weight: 900; }
.checkout-order-total small { color: var(--muted); font-size: .58rem; }
.checkout-order-total > strong { color: var(--primary); font-size: 1.45rem; letter-spacing: -.035em; }
.checkout-form-grid { gap: 14px; }
.checkout-confirmation-check { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 10px; align-items: start; padding: 13px; border: 1px solid var(--border); border-radius: 13px; background: var(--surface-muted); font-size: .66rem; font-weight: 700; }
.checkout-confirmation-check input { width: 17px; min-height: 17px; margin-top: 2px; accent-color: var(--primary); }
.checkout-submit-button { min-height: 50px; }
.checkout-unavailable { margin-top: 5px; }
.large-qr-card { overflow: hidden; }
.large-qr-card-heading { margin-bottom: 16px; }
.large-checkout-qr { width: min(100%,430px); aspect-ratio: 1; display: grid; place-items: center; margin: 0 auto; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 10px #fff,0 15px 40px rgba(7,34,25,.1); }
.large-checkout-qr img { width: 100%; height: 100%; object-fit: contain; padding: 10px; }
.large-checkout-qr.is-empty { color: var(--muted); background: var(--surface-muted); font-size: .72rem; font-weight: 850; }
.checkout-payment-destination { display: grid; gap: 9px; margin-top: 17px; }
.checkout-payment-destination > div { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-muted); }
.checkout-payment-destination span { color: var(--muted); font-size: .58rem; font-weight: 850; text-transform: uppercase; }
.checkout-payment-destination strong { overflow-wrap: anywhere; text-align: right; font-size: .73rem; }
.checkout-payment-destination .checkout-destination-total { border-color: color-mix(in srgb,var(--primary) 34%,var(--border)); background: var(--primary-soft); }
.checkout-payment-destination .checkout-destination-total strong { color: var(--primary); font-size: 1rem; }
.checkout-payment-instructions { margin: 14px 0 0; padding: 13px; border-radius: 12px; color: var(--muted); background: var(--surface-muted); font-size: .64rem; line-height: 1.55; }
.checkout-support-panel h3 { margin: 7px 0; }
.checkout-support-panel > p { color: var(--muted); font-size: .68rem; }

@media (max-width: 1180px) {
  .subscription-checkout-hero { grid-template-columns: 1fr; }
  .checkout-progress { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .checkout-progress li { grid-template-columns: 30px minmax(0,1fr); }
  .subscription-checkout-layout { grid-template-columns: 1fr; }
  .checkout-sidebar-column { position: static; grid-template-columns: minmax(0,1fr) minmax(280px,.55fr); align-items: start; }
}
@media (max-width: 820px) {
  .plan-marketplace { padding: 18px; border-radius: 19px; }
  .plan-marketplace-toolbar { align-items: stretch; flex-direction: column; }
  .billing-switch { align-self: flex-start; }
  .hostinger-plan-grid { grid-template-columns: repeat(auto-fit,minmax(240px,1fr)); }
  .hostinger-plan-card { min-height: 0; }
  .subscription-checkout-hero { padding: 21px; border-radius: 19px; }
  .checkout-progress { grid-template-columns: 1fr; }
  .checkout-sidebar-column { grid-template-columns: 1fr; }
  .checkout-included-list ul { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .checkout-back-row { align-items: flex-start; flex-direction: column; }
  .billing-switch { width: 100%; }
  .billing-switch button { min-width: 0; }
  .hostinger-plan-grid { grid-template-columns: 1fr; }
  .hostinger-plan-card { padding: 21px; }
  .checkout-plan-panel,.checkout-payment-form-panel,.large-qr-card,.checkout-support-panel { padding: 18px; }
  .checkout-cycle-grid,.checkout-form-grid { grid-template-columns: 1fr; }
  .checkout-order-total { align-items: flex-start; flex-direction: column; }
  .checkout-order-total > strong { font-size: 1.3rem; }
  .large-checkout-qr { width: 100%; border-radius: 16px; }
}

/* Live validation */
.field-feedback {
  display: block;
  min-height: 1.15rem;
  margin-top: .38rem;
  font-size: .76rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--muted, #687873);
}
.field-feedback[hidden] { display: none; }
.field-feedback.valid { color: #087a55; }
.field-feedback.invalid { color: #c9362b; }
.field-feedback.checking { color: #8a6500; }
.field-feedback.warning { color: #8a6500; }
label.is-valid > input:not([type="checkbox"]):not([type="radio"]),
label.is-valid > select,
label.is-valid > textarea,
label.is-valid .input-prefix input,
input.is-valid,
select.is-valid,
textarea.is-valid {
  border-color: #31a77b !important;
  box-shadow: 0 0 0 3px rgba(49, 167, 123, .10);
}
label.is-invalid > input:not([type="checkbox"]):not([type="radio"]),
label.is-invalid > select,
label.is-invalid > textarea,
label.is-invalid .input-prefix input,
input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #dc5b50 !important;
  box-shadow: 0 0 0 3px rgba(220, 91, 80, .11);
}
label.is-checking > input:not([type="checkbox"]):not([type="radio"]),
label.is-checking > select,
label.is-checking > textarea,
label.is-checking .input-prefix input,
input.is-checking,
select.is-checking,
textarea.is-checking {
  border-color: #d9a514 !important;
  box-shadow: 0 0 0 3px rgba(217, 165, 20, .11);
}
label.is-warning > input:not([type="checkbox"]):not([type="radio"]),
label.is-warning > select,
label.is-warning > textarea,
label.is-warning .input-prefix input,
input.is-warning,
select.is-warning,
textarea.is-warning { border-color: #d9a514 !important; }

.password-requirements {
  padding: .9rem 1rem;
  border: 1px solid var(--border, #d5e2dd);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface, #fff) 92%, #dceee7 8%);
}
.password-requirements > strong {
  display: block;
  margin-bottom: .65rem;
  font-size: .82rem;
}
.password-requirements ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem .8rem;
  padding: 0;
  margin: 0;
  list-style: none;
}
.password-requirements li {
  display: flex;
  align-items: center;
  gap: .48rem;
  color: var(--muted, #687873);
  font-size: .77rem;
  line-height: 1.3;
  transition: color .18s ease;
}
.password-requirements li span {
  display: inline-grid;
  width: 1.25rem;
  height: 1.25rem;
  place-items: center;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #edf2f0;
  color: #71817b;
  font-size: .86rem;
  font-weight: 900;
}
.password-requirements li.met { color: #087a55; }
.password-requirements li.met span { background: #dff5ec; color: #087a55; }
.password-requirements li.unmet { color: #b43c33; }
.password-requirements li.unmet span { background: #fde9e7; color: #c9362b; }
.password-requirements li.neutral { color: var(--muted, #687873); }
.password-requirements .tiny { margin: .75rem 0 0; }

@media (max-width: 620px) {
  .password-requirements ul { grid-template-columns: 1fr; }
}

/* Annual subscription promotion */
.annual-promo-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin: 0 0 18px;
  padding: 16px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 58%, var(--border));
  border-radius: 18px;
  background: linear-gradient(120deg, color-mix(in srgb, var(--accent) 20%, var(--surface)), color-mix(in srgb, var(--primary) 7%, var(--surface)));
  box-shadow: var(--shadow-sm);
}
.annual-promo-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  color: #10271c;
  background: var(--accent);
  font-size: 1.05rem;
  font-weight: 950;
}
.annual-promo-banner strong { display: block; color: var(--text-strong); font-size: .9rem; }
.annual-promo-banner p { margin: 4px 0 0; color: var(--muted); font-size: .68rem; }
.annual-promo-banner button {
  min-height: 40px;
  padding: 9px 14px;
  border: 0;
  border-radius: 11px;
  color: #fff;
  background: var(--primary);
  cursor: pointer;
  font-weight: 900;
}
.billing-switch button[data-plan-cycle="yearly"] { display: inline-flex; align-items: center; gap: 7px; }
.billing-switch button[data-plan-cycle="yearly"] span {
  padding: 3px 6px;
  border-radius: 999px;
  color: #18301f;
  background: var(--accent);
  font-size: .52rem;
  font-weight: 950;
  white-space: nowrap;
}
.market-annual-promo {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 20px;
  margin-bottom: 2px;
}
.market-annual-promo[hidden] { display: none; }
.market-annual-promo del { color: var(--muted); font-size: .67rem; }
.market-annual-promo span {
  padding: 3px 7px;
  border-radius: 999px;
  color: #16301f;
  background: var(--accent);
  font-size: .5rem;
  font-weight: 950;
  letter-spacing: .04em;
}
.hostinger-plan-card.is-featured .market-annual-promo del { color: #91a79f; }
.hostinger-plan-card.is-featured .market-annual-promo span { color: #10271c; }
.checkout-annual-offer {
  width: fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: 7px 12px;
  align-items: center;
  margin-top: 14px;
  padding: 8px 11px;
  border-radius: 11px;
  color: #18301f;
  background: var(--accent);
  font-size: .62rem;
}
.checkout-annual-offer strong { font-weight: 950; }
.checkout-cycle-option.is-promoted em {
  display: inline-flex;
  margin-left: 5px;
  padding: 3px 6px;
  border-radius: 999px;
  color: #18301f;
  background: var(--accent);
  font-size: .48rem;
  font-style: normal;
  font-weight: 950;
  vertical-align: middle;
}
.checkout-cycle-option.is-promoted del { opacity: .72; }
.checkout-price-summary { display: grid; gap: 10px; }
.checkout-annual-breakdown {
  display: grid;
  gap: 7px;
  padding: 13px 15px;
  border: 1px dashed color-mix(in srgb, var(--accent) 70%, var(--border));
  border-radius: 13px;
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
}
.checkout-annual-breakdown[hidden] { display: none; }
.checkout-annual-breakdown > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--muted);
  font-size: .63rem;
}
.checkout-annual-breakdown strong { color: var(--primary); }
.checkout-annual-breakdown del { color: var(--muted); }
.plan-price-row del { margin-right: 5px; color: var(--muted); }

@media (max-width: 620px) {
  .annual-promo-banner { grid-template-columns: auto minmax(0, 1fr); }
  .annual-promo-banner button { grid-column: 1 / -1; width: 100%; }
  .billing-switch button[data-plan-cycle="yearly"] { justify-content: center; }
}

/* Login reliability controls */
.password-input-wrap{position:relative;display:block}
.password-input-wrap>input{width:100%;padding-right:5.25rem}
.password-visibility{position:absolute;right:.55rem;top:50%;transform:translateY(-50%);border:0;background:transparent;color:var(--primary,#117858);font:inherit;font-size:.78rem;font-weight:800;padding:.45rem .55rem;border-radius:.55rem;cursor:pointer}
.password-visibility:hover,.password-visibility:focus-visible{background:rgba(17,120,88,.09);outline:none}
[data-login-submit][aria-busy="true"]{cursor:wait;opacity:.78}

/* Partner usage billing */
.usage-plan-price .usage-zero-fee{display:inline-flex;padding:.38rem .65rem;border-radius:999px;background:rgba(183,239,69,.16);color:var(--primary,#176b4d);font-weight:800;font-size:.76rem;margin-bottom:.65rem}.partner-checkout-hero{background:linear-gradient(135deg,#082b23,#164c3c);color:#fff}.partner-rate-lockup{min-width:240px;padding:1.25rem 1.4rem;border:1px solid rgba(255,255,255,.18);border-radius:22px;background:rgba(255,255,255,.09);backdrop-filter:blur(12px);display:grid;gap:.25rem}.partner-rate-lockup span,.partner-rate-lockup small{color:rgba(255,255,255,.72)}.partner-rate-lockup strong{font-size:2.4rem;line-height:1}.partner-feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:.75rem;margin-top:1.25rem}.partner-feature-grid>div{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border:1px solid var(--line);border-radius:14px;background:var(--surface-soft)}.partner-feature-grid span,.partner-rule-list>li>span{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:rgba(23,107,77,.12);color:#176b4d;font-weight:900}.partner-rule-list{list-style:none;padding:0;margin:1.2rem 0 0;display:grid;gap:.8rem}.partner-rule-list li{display:flex;gap:.8rem;align-items:flex-start;padding:.95rem 0;border-bottom:1px solid var(--line)}.partner-rule-list li:last-child{border-bottom:0}.partner-rule-list small{display:block;color:var(--muted);margin-top:.2rem}.partner-activation-card h2{font-size:2.5rem;margin:.4rem 0}.partner-activation-summary{display:grid;gap:.65rem;margin:1.15rem 0}.partner-activation-summary div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem;border-radius:12px;background:var(--surface-soft)}
.usage-billing-hero,.partner-dashboard-card,.usage-admin-hero{display:flex;justify-content:space-between;align-items:center;gap:2rem;padding:clamp(1.4rem,3vw,2.3rem);border-radius:26px;background:linear-gradient(135deg,#082b23,#176b4d);color:#fff;box-shadow:0 24px 55px rgba(8,43,35,.18);margin-bottom:1.35rem}.usage-billing-hero h1,.usage-admin-hero h1,.partner-dashboard-card h2{color:#fff;margin:.35rem 0}.usage-billing-hero p,.usage-admin-hero p,.partner-dashboard-card p{color:rgba(255,255,255,.76);max-width:720px}.usage-rate-card{min-width:230px;padding:1.15rem 1.3rem;border:1px solid rgba(255,255,255,.2);border-radius:20px;background:rgba(255,255,255,.09);display:grid;gap:.2rem}.usage-rate-card strong{font-size:2.25rem}.usage-rate-card span,.usage-rate-card small{color:rgba(255,255,255,.72)}.usage-summary-grid,.usage-admin-metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:1.2rem}.usage-summary-grid article,.usage-admin-metrics article{padding:1.15rem 1.2rem;border:1px solid var(--line);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm);display:grid;gap:.35rem}.usage-summary-grid article strong,.usage-admin-metrics article strong{font-size:1.75rem}.usage-summary-grid article span,.usage-summary-grid article small,.usage-admin-metrics article span{color:var(--muted)}.usage-summary-grid article.featured{background:linear-gradient(145deg,#efffe8,#f8fff5);border-color:rgba(23,107,77,.2)}.partner-billing-rules-mini{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-bottom:1.2rem}.partner-billing-rules-mini>div{display:flex;gap:.75rem;align-items:flex-start}.partner-billing-rules-mini>div>span{font-weight:900;color:#176b4d}.invoice-action-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.2rem;border-radius:18px;margin-bottom:1.2rem;border:1px solid rgba(226,146,32,.25);background:#fff8eb}.invoice-action-banner>div{display:grid;gap:.2rem}.invoice-action-banner small{color:var(--muted)}.usage-invoice-table-wrap{overflow:auto}.usage-invoice-table td small,.usage-admin-list td small,.invoice-items-table td small{display:block;color:var(--muted);margin-top:.2rem}.invoice-document{background:#fff;color:#15201c;border:1px solid #dfe8e3;border-radius:24px;padding:clamp(1.2rem,3vw,2.2rem);box-shadow:0 18px 50px rgba(20,45,35,.1);margin-bottom:1.2rem}.invoice-document-head{display:flex;justify-content:space-between;gap:2rem;align-items:flex-start;padding-bottom:1.4rem;border-bottom:2px solid #edf2ef}.invoice-document-head>div:last-child{text-align:right;display:grid;gap:.35rem;justify-items:end}.invoice-document-head>div:last-child>strong{font-size:2rem}.invoice-meta-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem;margin:1.25rem 0}.invoice-meta-grid>div{display:grid;gap:.25rem;padding:.9rem;background:#f6f9f7;border-radius:14px}.invoice-meta-grid span{font-size:.78rem;color:#64736c;text-transform:uppercase;letter-spacing:.06em}.invoice-items-wrap{overflow:auto}.invoice-total-block{margin-left:auto;margin-top:1.2rem;max-width:440px;display:grid;gap:.55rem}.invoice-total-block>div{display:flex;justify-content:space-between;padding:.65rem .8rem;border-bottom:1px solid #e6ece8}.invoice-total-block .grand{font-size:1.15rem;border:0;border-radius:12px;background:#0b342a;color:#fff}.invoice-payment-layout,.admin-review-grid{margin-top:1.2rem}.status-filter-tabs.usage-filter-tabs{margin-bottom:1rem}.partner-dashboard-card{display:grid;grid-template-columns:minmax(280px,1.3fr) minmax(300px,1fr) auto}.partner-dashboard-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem}.partner-dashboard-metrics>div{padding:.8rem;border-radius:14px;background:rgba(255,255,255,.09);display:grid;gap:.25rem}.partner-dashboard-metrics span{color:rgba(255,255,255,.68);font-size:.78rem}.partner-dashboard-metrics strong{font-size:1.35rem}.partner-dashboard-metrics .featured{background:rgba(183,239,69,.16)}.partner-dashboard-action{display:grid;gap:.45rem;align-content:center}.partner-dashboard-action small{color:rgba(255,255,255,.7);max-width:190px}.badge.payment_submitted{background:#fff4d8;color:#8b5b00}.badge.overdue,.badge.rejected{background:#ffebe9;color:#a5291e}.badge.paid,.badge.approved{background:#e7f8ef;color:#176b4d}.badge.issued{background:#eef3ff;color:#315aaa}
@media(max-width:1000px){.partner-dashboard-card{grid-template-columns:1fr}.partner-dashboard-action{justify-items:start}.usage-billing-hero,.usage-admin-hero{align-items:flex-start;flex-direction:column}.usage-rate-card{width:100%}}
@media(max-width:700px){.partner-dashboard-metrics{grid-template-columns:1fr}.invoice-document-head{flex-direction:column}.invoice-document-head>div:last-child{text-align:left;justify-items:start}.usage-billing-hero,.partner-dashboard-card,.usage-admin-hero{border-radius:20px}.usage-summary-grid{grid-template-columns:1fr}}
@media print{.sidebar,.topbar,.checkout-back-row,.alert,.invoice-payment-layout,.admin-review-grid,.purchase-status-banner{display:none!important}.main,.content{margin:0!important;padding:0!important}.invoice-document{box-shadow:none;border:0;border-radius:0;margin:0;padding:0}.invoice-items-table{font-size:10pt}body{background:#fff!important}}

/* Partner usage billing reliability and invoice preview hotfix */
.usage-admin-actions,
.usage-hero-side {
  display: grid;
  gap: .75rem;
  justify-items: stretch;
  min-width: min(100%, 260px);
}
.usage-admin-actions form,
.usage-admin-actions .button,
.usage-hero-side .button { width: 100%; }
.usage-admin-hero .button.secondary,
.usage-billing-hero .button.secondary {
  color: #fff;
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.1);
}
.usage-admin-hero .button.secondary:hover,
.usage-billing-hero .button.secondary:hover { background: rgba(255,255,255,.18); }

.status-filter-tabs.usage-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .65rem;
  margin: 1rem 0;
}
.status-filter-tabs.usage-filter-tabs a {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 42px;
  padding: .65rem .85rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--muted);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
  font-size: .82rem;
  font-weight: 800;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, color .18s ease, background .18s ease;
}
.status-filter-tabs.usage-filter-tabs a:hover {
  transform: translateY(-1px);
  color: var(--primary);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--line));
}
.status-filter-tabs.usage-filter-tabs a strong {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 .4rem;
  border-radius: 999px;
  color: var(--primary);
  background: var(--primary-soft);
  font-size: .74rem;
}
.status-filter-tabs.usage-filter-tabs a.active {
  color: #fff;
  border-color: var(--primary);
  background: var(--primary);
}
.status-filter-tabs.usage-filter-tabs a.active strong {
  color: var(--primary);
  background: #fff;
}

.usage-accrual-preview,
.usage-current-statement { margin-bottom: 1.2rem; }
.usage-admin-metrics article small { color: var(--muted); }
.usage-preview-table tfoot th {
  border-top: 2px solid var(--line);
  background: var(--surface-muted);
  font-weight: 900;
}
.usage-preview-table td,
.usage-preview-table th { vertical-align: top; }
.usage-preview-table td small { display: block; margin-top: .2rem; color: var(--muted); }
.usage-current-statement .card-head,
.usage-accrual-preview .card-head { align-items: center; }

@media (max-width: 860px) {
  .usage-admin-hero,
  .usage-billing-hero { align-items: stretch; flex-direction: column; }
  .usage-admin-actions,
  .usage-hero-side { min-width: 0; width: 100%; }
  .usage-rate-card { min-width: 0; }
}

@media print {
  .print-action,
  .usage-admin-actions,
  .status-filter-tabs.usage-filter-tabs { display: none !important; }
  .usage-accrual-preview,
  .usage-current-statement,
  .usage-admin-list,
  .usage-invoice-list-card { break-inside: avoid; }
}


/* Current statement print reliability hotfix */
.print-only { display: none; }

@media print {
  body.printing-selection .sidebar,
  body.printing-selection .topbar,
  body.printing-selection .sidebar-backdrop,
  body.printing-selection .content > *:not(.print-target) {
    display: none !important;
  }

  body.printing-selection .app-shell,
  body.printing-selection .main,
  body.printing-selection .content,
  body.printing-selection .print-target {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  body.printing-selection .print-target {
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
    color: #15201c !important;
  }

  body.printing-selection .print-target .print-only {
    display: block !important;
  }

  body.printing-selection .print-target .card-head {
    padding-top: 0 !important;
  }

  body.printing-selection .print-target .usage-invoice-table-wrap {
    overflow: visible !important;
  }

  body.printing-selection .print-target table {
    width: 100% !important;
    font-size: 9.5pt;
  }

  .print-statement-heading {
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 2px solid #dfe8e3;
  }

  .print-statement-heading span {
    color: #176b4d;
    font-size: 9pt;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .print-statement-heading h1 {
    margin: 5px 0 3px;
    color: #15201c;
    font-size: 22pt;
  }

  .print-statement-heading p {
    margin: 0;
    color: #64736c;
  }
}

/* Partner invoice payment deadline and operational lock */
.account-disabled-banner{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.15rem;margin-bottom:1rem;border:1px solid #e8a59d;border-radius:16px;background:#fff0ed;color:#8d241c;box-shadow:0 12px 28px rgba(145,42,31,.08)}
.account-disabled-banner>div{display:grid;gap:.2rem}.account-disabled-banner strong{font-size:1rem}.account-disabled-banner span{font-size:.88rem;line-height:1.45}.account-disabled-banner .button{flex:0 0 auto}
.partner-payment-policy-card{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1rem 0}.partner-payment-policy-card>div{display:grid;grid-template-columns:42px 1fr;gap:.75rem;align-items:start;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface)}.partner-payment-policy-card>div>span{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;background:#e7f6ef;color:#0c7658;font-weight:900;font-size:1.1rem}.partner-payment-policy-card p{margin:0;color:var(--muted);font-size:.88rem;line-height:1.5}.partner-payment-policy-card strong{display:block;color:var(--text);margin-bottom:.2rem}
.invoice-due-banner{display:grid;grid-template-columns:1fr 1fr auto;align-items:center;gap:1rem;padding:1rem 1.15rem;margin:1rem 0;border:1px solid #cfe1d8;border-radius:18px;background:#f2faf6}.invoice-due-banner>div{display:grid;gap:.2rem}.invoice-due-banner span{text-transform:uppercase;letter-spacing:.06em;font-size:.72rem;color:#65766e}.invoice-due-banner strong{font-size:1.05rem}.invoice-due-banner small{color:var(--muted);line-height:1.4}.invoice-due-banner.is-overdue{background:#fff0ed;border-color:#e8a59d}.invoice-due-banner.is-overdue strong{color:#a52d22}.invoice-pay-form .form-assurance{display:block;text-align:center;color:var(--muted);line-height:1.45}.invoice-payment-layout:target{scroll-margin-top:90px;animation:invoicePayFocus 1.2s ease}@keyframes invoicePayFocus{0%{box-shadow:0 0 0 6px rgba(245,184,36,.35)}100%{box-shadow:none}}
@media(max-width:900px){.partner-payment-policy-card{grid-template-columns:1fr}.invoice-due-banner{grid-template-columns:1fr}.invoice-due-banner .button{width:100%}.account-disabled-banner{align-items:flex-start;flex-direction:column}.account-disabled-banner .button{width:100%}}
@media print{.invoice-due-banner,.account-disabled-banner,.partner-payment-policy-card{box-shadow:none}.invoice-due-banner .button{display:none!important}}


/* Manual Partner invoice issuance */
.usage-admin-actions form { display: grid; gap: .45rem; }
.usage-action-note {
  display: block;
  color: rgba(255,255,255,.72);
  font-size: .76rem;
  line-height: 1.35;
  text-align: center;
}


/* Phone-first owner workflow and unified access */
.unified-login-card{max-width:470px}.unified-login-brand{display:flex;margin-bottom:1rem}.unified-login-brand .brand-mark{width:46px;height:46px}.login-help-row{display:flex;justify-content:space-between;gap:1rem;margin-top:1rem;color:var(--muted);font-size:.78rem}.login-help-row a{font-weight:800}.login-primary{min-height:50px}
.mobile-owner-nav{display:none}.mobile-action-center{margin-bottom:1rem}.verification-queue{display:grid;gap:.75rem}.verification-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:1rem;padding:.85rem;border:1px solid var(--border);border-radius:16px;background:var(--surface-soft)}.verification-time{display:grid;min-width:72px;padding:.65rem;border-radius:12px;background:var(--primary-soft);text-align:center}.verification-time strong{font-size:.9rem}.verification-time span{font-size:.72rem;color:var(--muted)}.verification-main{display:grid;gap:.2rem}.verification-main>span,.verification-main>small{color:var(--muted)}.all-caught-up{display:flex;align-items:center;gap:.8rem;padding:1rem;border-radius:16px;background:#effaf4}.all-caught-up>span{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900}.all-caught-up>div{display:grid}.all-caught-up small{color:var(--muted)}.verification-view-all{display:inline-flex;margin-top:1rem}
.booking-filter-bar{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:.8rem;margin-bottom:1rem}.manual-booking-panel{margin-bottom:1rem}.manual-booking-panel summary{display:flex;justify-content:space-between;gap:1rem}.manual-booking-panel summary span{color:var(--muted);font-weight:500}.booking-mobile-list{display:grid;gap:.9rem}.booking-operation-card{padding:1rem}.booking-operation-card.needs-verification{border-color:rgba(245,184,36,.7);box-shadow:0 12px 30px rgba(245,184,36,.10)}.booking-operation-top{display:flex;justify-content:space-between;gap:1rem}.booking-operation-top h2{margin:.18rem 0;font-size:1.12rem}.booking-operation-top p{margin:0;color:var(--muted)}.booking-ref{font-size:.72rem;font-weight:900;letter-spacing:.04em;color:var(--primary)}.booking-operation-price{display:grid;justify-items:end;gap:.35rem}.booking-operation-schedule{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem;margin:1rem 0}.booking-operation-schedule>div{display:grid;gap:.2rem;padding:.7rem;border-radius:12px;background:var(--surface-soft)}.booking-operation-schedule span{font-size:.68rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}.booking-operation-schedule strong{font-size:.82rem}.booking-primary-action{margin:.8rem 0}.booking-more-actions{border-top:1px solid var(--line);padding-top:.75rem}.booking-more-actions>summary{color:var(--primary);font-weight:800}
.report-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:.45rem;padding:.35rem;margin-bottom:1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.report-presets a{padding:.7rem;text-align:center;border-radius:10px;font-weight:800;color:var(--muted)}.report-presets a.active{background:var(--primary);color:#fff}.report-date-form{display:grid;grid-template-columns:1fr 1fr auto;align-items:end;gap:.75rem;margin-bottom:1rem}.consolidated-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-bottom:1rem}.report-kpi{display:grid;gap:.3rem;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}.report-kpi span,.report-kpi small{color:var(--muted)}.report-kpi strong{font-size:1.55rem}.report-kpi.primary{background:linear-gradient(145deg,#0b342a,#176b4d);color:#fff}.report-kpi.primary span,.report-kpi.primary small{color:rgba(255,255,255,.7)}.report-kpi.warning{background:#fff8e8;border-color:#f2d88a}.daily-report-bars{display:grid;gap:.75rem}.daily-report-row{display:grid;grid-template-columns:62px minmax(80px,1fr) 32px 105px;align-items:center;gap:.65rem}.daily-report-row>div{height:9px;border-radius:999px;background:var(--surface-muted);overflow:hidden}.daily-report-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--primary),var(--accent))}.daily-report-row small{text-align:right;color:var(--muted)}.court-report-list{display:grid}.court-report-list article{display:flex;justify-content:space-between;gap:1rem;padding:.85rem 0;border-bottom:1px solid var(--line)}.court-report-list article:last-child{border-bottom:0}.court-report-list article>div{display:grid;gap:.2rem}.court-report-list article>div:last-child{text-align:right}.court-report-list span{color:var(--muted);font-size:.78rem}
@media(max-width:980px){body.owner-body{padding-bottom:74px}.owner-body .content{padding-bottom:95px}.mobile-owner-nav{position:fixed;z-index:80;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);height:72px;padding:6px max(8px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 94%,transparent);box-shadow:0 -10px 30px rgba(7,39,31,.12);backdrop-filter:blur(18px)}.mobile-owner-nav a,.mobile-owner-nav button{position:relative;display:grid;place-items:center;align-content:center;gap:3px;min-width:0;border:0;border-radius:12px;background:transparent;color:var(--muted);font:inherit;text-decoration:none}.mobile-owner-nav span{display:grid;width:22px;height:22px}.mobile-owner-nav svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.8}.mobile-owner-nav strong{font-size:.67rem}.mobile-owner-nav .active{color:var(--primary);background:var(--primary-soft)}.mobile-owner-nav em{position:absolute;top:2px;right:20%;display:grid;place-items:center;min-width:18px;height:18px;padding:0 4px;border-radius:999px;background:#e0443e;color:#fff;font-size:.62rem;font-style:normal}.topbar .profile-copy,.topbar-logout-label{display:none}.mobile-page-head{align-items:flex-start}.verification-card{grid-template-columns:auto minmax(0,1fr)}.verification-card form{grid-column:1/-1}.verify-booking-button{width:100%}.consolidated-summary{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.guest-shell{padding:20px 14px}.auth-card{padding:26px 22px}.login-help-row{align-items:flex-start;flex-direction:column}.dashboard-hero{padding:1.2rem}.dashboard-hero h1{font-size:clamp(1.7rem,8vw,2.35rem)}.mobile-action-center .card-head,.mobile-page-head{display:grid;gap:.8rem}.mobile-action-center .button,.mobile-page-head .button{width:100%}.verification-card{grid-template-columns:62px minmax(0,1fr);gap:.7rem}.verification-time{min-width:0}.booking-filter-bar,.report-date-form{grid-template-columns:1fr}.manual-booking-panel summary span{display:none}.booking-operation-top{align-items:flex-start}.booking-operation-price strong{font-size:.9rem}.booking-operation-schedule{grid-template-columns:1fr 1fr}.booking-operation-schedule>div:last-child{grid-column:1/-1}.consolidated-summary{grid-template-columns:1fr 1fr}.report-kpi{padding:.85rem}.report-kpi strong{font-size:1.25rem}.daily-report-row{grid-template-columns:52px minmax(60px,1fr) 25px}.daily-report-row small{grid-column:2/-1;text-align:left}.court-report-list article{align-items:flex-start;flex-direction:column}.court-report-list article>div:last-child{text-align:left}}

.locked-feature{display:flex;align-items:flex-start;gap:.75rem;padding:1rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft)}.locked-check{display:grid;place-items:center;flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:var(--primary);color:#fff;font-weight:900}.locked-feature>span:last-child{display:grid;gap:.2rem}.locked-feature small{color:var(--muted)}

/* User-friendly creation, onboarding, gallery, and player accounts */
.compact-creator{overflow:hidden;margin-bottom:1rem}.compact-creator>summary,.business-hours-summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:72px;padding:1rem 1.2rem;cursor:pointer;list-style:none}.compact-creator>summary::-webkit-details-marker,.business-hours-summary::-webkit-details-marker{display:none}.compact-creator>summary:after{content:'+';display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--primary-soft);color:var(--primary);font-size:1.35rem;font-weight:900}.compact-creator[open]>summary:after{content:'−'}.compact-creator>form,.business-hours-creator>form{border-top:1px solid var(--line);padding:1.2rem}.business-hours-summary span{display:grid;gap:.2rem}.business-hours-summary small{color:var(--muted);font-weight:500}.business-hours-summary em{margin-left:auto;color:var(--primary);font-style:normal;font-size:.78rem;font-weight:900}.business-hours-creator>.card-head{margin-top:1rem;padding:0 1.2rem}.hours-layout{align-items:start}
.login-register-divider{display:flex;align-items:center;gap:.8rem;margin:1.1rem 0 .8rem;color:var(--muted);font-size:.76rem;font-weight:800}.login-register-divider:before,.login-register-divider:after{content:'';height:1px;flex:1;background:var(--line)}.register-court-button{min-height:48px}.login-partner-note{text-align:center;color:var(--muted);font-size:.75rem;margin:.65rem 0 0}.venue-register-card{width:min(760px,100%);max-width:760px}.registration-plan-note{display:flex;justify-content:space-between;gap:1rem;padding:.9rem 1rem;margin:1rem 0;border-radius:14px;background:#effaf4}.registration-plan-note span{color:var(--muted);font-size:.8rem}.registration-grid{grid-template-columns:1fr 1fr}.auth-back-link{display:inline-flex;margin-bottom:1rem;font-weight:800}
.owner-dashboard-compact{display:grid;gap:1rem}.compact-dashboard-header{display:flex;align-items:flex-end;justify-content:space-between;gap:1.5rem;padding:.25rem 0}.compact-dashboard-header h1{margin:.25rem 0;font-size:clamp(1.75rem,3.4vw,2.8rem)}.compact-dashboard-header p{max-width:680px;margin:0;color:var(--muted)}.compact-header-actions{display:flex;gap:.65rem;flex-wrap:wrap}.dashboard-category-bar{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 1rem}.dashboard-category-bar>div{display:grid;gap:.15rem}.dashboard-category-bar span{color:var(--muted);font-size:.78rem}.dashboard-category-select{display:flex;align-items:center;gap:.65rem;font-size:.75rem;color:var(--muted)}.dashboard-category-select select{min-width:190px}.dashboard-category-panel{display:grid;gap:1rem}.compact-metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem}.compact-metric{display:grid;gap:.2rem;padding:1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm);color:var(--text)}.compact-metric:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--primary) 35%,var(--border))}.compact-metric span,.compact-metric small{color:var(--muted)}.compact-metric strong{font-size:1.35rem;line-height:1.1}.compact-metric.attention{background:#fff8e8;border-color:#efd481}.compact-action-card,.compact-upcoming-card{padding:1rem}.compact-verification-queue{grid-template-columns:repeat(2,minmax(0,1fr))}.compact-upcoming-list{display:grid}.compact-upcoming-list article{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--line)}.compact-upcoming-list article:last-child{border-bottom:0}.compact-upcoming-list article>div:nth-child(2),.compact-upcoming-list article>div:last-child{display:grid;gap:.15rem}.compact-upcoming-list article>div:last-child{text-align:right}.compact-upcoming-list span,.compact-upcoming-list small{color:var(--muted);font-size:.75rem}.guided-onboarding-card{padding:1.1rem}.onboarding-heading{display:flex;justify-content:space-between;gap:1rem;align-items:start}.onboarding-heading h2{margin:.2rem 0}.onboarding-heading p{margin:0;color:var(--muted)}.setup-progress-compact{display:grid;place-items:center;width:72px;height:72px;border-radius:50%;background:var(--primary-soft);color:var(--primary)}.setup-progress-compact strong{font-size:1.15rem}.setup-progress-compact span{font-size:.68rem}.onboarding-steps{display:grid;gap:.65rem;margin-top:1rem}.onboarding-step{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.85rem;border:1px solid var(--border);border-radius:14px;background:var(--surface)}.onboarding-step-number{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--primary-soft);color:var(--primary);font-weight:900}.onboarding-step.complete .onboarding-step-number{background:var(--primary);color:#fff}.onboarding-step>div{display:grid;gap:.12rem}.onboarding-step p{margin:0;color:var(--muted);font-size:.78rem}.onboarding-step.locked{opacity:.58;background:var(--surface-soft)}.onboarding-complete-actions{display:flex;gap:.65rem;margin-top:1rem;flex-wrap:wrap}.venue-setup-metrics{margin-top:0}.compact-access-summary,.report-callout{display:flex;align-items:center;justify-content:space-between;gap:1.2rem;padding:1.15rem}.compact-access-summary>div:first-child,.report-callout>div{max-width:650px}.compact-access-summary h2,.report-callout h2{margin:.2rem 0}.compact-access-summary p,.report-callout p{margin:0;color:var(--muted)}
.booking-gallery-settings{display:grid;grid-template-columns:minmax(240px,.75fr) 1.5fr;gap:1rem;margin-top:1.2rem;padding-top:1.2rem;border-top:1px solid var(--line)}.gallery-settings-copy h3{margin:.2rem 0}.gallery-settings-copy p{margin:0;color:var(--muted)}.booking-gallery-upload-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem}.gallery-upload-card .upload-preview{min-height:190px}
.booking-visual-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,.9fr);gap:2rem;align-items:center;margin:0 auto 1.25rem;max-width:1500px;padding:clamp(1.4rem,4vw,3.5rem);border-radius:30px;background:linear-gradient(145deg,#f7fbf9,#eef5f1);border:1px solid var(--border);overflow:hidden}.booking-visual-copy{display:grid;align-content:center}.booking-visual-copy h1{font-size:clamp(2.4rem,5vw,5.2rem);line-height:.95;margin:.8rem 0 1rem;max-width:760px}.booking-visual-copy>p{font-size:1.02rem;line-height:1.65;color:var(--muted);max-width:640px}.player-account-actions{display:flex;align-items:center;gap:.65rem;flex-wrap:wrap;margin-top:1.2rem}.player-account-actions>span{color:var(--muted);font-size:.78rem}.booking-photo-gallery{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;min-height:480px}.gallery-photo{margin:0;overflow:hidden;border-radius:20px;background:var(--surface-muted)}.gallery-photo img{width:100%;height:100%;object-fit:cover;display:block}.gallery-photo-1{grid-row:1/3}.gallery-photo-2{margin-top:45px}.gallery-photo-3{margin-bottom:45px}.booking-photo-gallery.single-photo{grid-template-columns:1fr}.booking-photo-gallery.single-photo .gallery-photo{grid-row:auto}.gallery-placeholder{display:grid;place-items:center;align-content:center;text-align:center;gap:.35rem;grid-column:1/-1;border:1px dashed var(--border);border-radius:22px;background:var(--surface)}.gallery-placeholder span{font-size:2.4rem;color:var(--primary)}.gallery-placeholder small{color:var(--muted)}.signed-in-player-note{display:flex;align-items:center;gap:.75rem;padding:.8rem;margin-bottom:.9rem;border-radius:14px;background:#effaf4}.signed-in-player-note>span{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--primary);color:#fff}.signed-in-player-note>div{display:grid}.signed-in-player-note small{color:var(--muted)}.create-player-account-toggle{display:flex;align-items:flex-start;gap:.75rem}.create-player-account-toggle input{margin-top:.25rem}.create-player-account-toggle span{display:grid;gap:.15rem}.create-player-account-toggle small{color:var(--muted)}.player-account-password-fields{margin-top:1rem;padding-top:1rem;border-top:1px solid var(--line)}.password-criteria,.password-requirements{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem}.password-criteria span,.password-requirements>span{display:flex;align-items:center;gap:.4rem;color:var(--muted);font-size:.76rem}.password-criteria span>span,.password-requirements b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff0ee;color:#b93a31;font-weight:900}.password-criteria .met,.password-requirements .met{color:#126e52}.password-criteria .met>span,.password-requirements .met b{background:#e8f8f0;color:#126e52}
.player-account-shell{display:grid;place-items:center;min-height:70vh;padding:1.5rem}.player-account-card{width:min(520px,100%);padding:clamp(1.35rem,4vw,2.5rem);border:1px solid var(--border);border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}.player-account-card h1{margin:.35rem 0}.player-account-card>p{color:var(--muted)}.account-switch{text-align:center;margin-top:1rem}.customer-account-page{max-width:1100px;margin:0 auto;padding:1rem}.customer-account-hero{display:flex;align-items:end;justify-content:space-between;gap:1rem;padding:1.2rem;margin-bottom:1rem;border-radius:22px;background:linear-gradient(145deg,#0b342a,#176b4d);color:#fff}.customer-account-hero h1{margin:.2rem 0}.customer-account-hero p{margin:0;color:rgba(255,255,255,.74)}.customer-account-actions{display:flex;gap:.6rem;flex-wrap:wrap}.customer-booking-list{display:grid;gap:.75rem}.customer-booking-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem;align-items:center;padding:1rem;border:1px solid var(--border);border-radius:18px;background:var(--surface);box-shadow:var(--shadow-sm)}.customer-booking-date{display:grid;place-items:center;width:64px;height:64px;border-radius:16px;background:var(--primary-soft)}.customer-booking-date span{font-size:.7rem;color:var(--muted)}.customer-booking-main h2{margin:.3rem 0}.customer-booking-main p{margin:0;color:var(--muted)}.customer-booking-main small{color:var(--muted)}
@media(max-width:1100px){.booking-visual-hero{grid-template-columns:1fr}.booking-photo-gallery{min-height:360px}.booking-gallery-settings{grid-template-columns:1fr}.compact-verification-queue{grid-template-columns:1fr}.compact-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){.compact-dashboard-header{align-items:stretch;flex-direction:column}.compact-header-actions .button{flex:1}.dashboard-category-bar{align-items:stretch;flex-direction:column}.dashboard-category-select{display:grid;gap:.35rem}.dashboard-category-select select{width:100%;min-width:0}.compact-metric-grid{grid-template-columns:1fr 1fr}.compact-metric{padding:.85rem}.onboarding-heading{align-items:flex-start}.setup-progress-compact{flex:0 0 62px;width:62px;height:62px}.onboarding-step{grid-template-columns:auto minmax(0,1fr)}.onboarding-step>a,.onboarding-step>.badge{grid-column:1/-1;width:100%;text-align:center}.compact-upcoming-list article{grid-template-columns:auto minmax(0,1fr)}.compact-upcoming-list article>div:last-child{grid-column:2;text-align:left}.compact-access-summary,.report-callout{align-items:stretch;flex-direction:column}.compact-access-summary .button,.report-callout .button{width:100%}.registration-grid{grid-template-columns:1fr}.registration-grid .span-2{grid-column:auto}.registration-plan-note{align-items:flex-start;flex-direction:column}.booking-gallery-upload-grid{grid-template-columns:1fr}.gallery-upload-card .upload-preview{min-height:220px}.booking-visual-hero{padding:1.1rem;border-radius:20px}.booking-visual-copy h1{font-size:clamp(2rem,12vw,3.2rem)}.booking-photo-gallery{min-height:300px;grid-template-columns:1.2fr .8fr}.gallery-photo-2{margin-top:24px}.gallery-photo-3{margin-bottom:24px}.player-account-actions .button{flex:1}.password-criteria,.password-requirements{grid-template-columns:1fr}.customer-account-hero{align-items:stretch;flex-direction:column}.customer-account-actions .button,.customer-account-actions form{flex:1}.customer-account-actions form .button{width:100%}.customer-booking-card{grid-template-columns:auto minmax(0,1fr)}.customer-booking-actions{grid-column:1/-1}.customer-booking-actions details,.customer-booking-actions summary{width:100%}.compact-creator>summary{min-height:62px}}

/* Public booking hero readability and accessible contrast */
.booking-visual-hero {
  color: #0b211a;
}
.booking-visual-hero .booking-brand-line .eyebrow {
  color: #0b6f52;
  text-shadow: none;
}
.booking-visual-hero .booking-venue-name {
  color: #29483e !important;
  text-shadow: none;
  font-weight: 800;
}
.booking-visual-hero .booking-visual-copy h1 {
  color: #071c15;
  text-wrap: balance;
}
.booking-visual-hero .booking-visual-copy > p {
  color: #3f5d53;
  font-weight: 500;
}
.booking-visual-hero .hero-trust-row span {
  color: #155b46;
  background: rgba(255, 255, 255, .92);
  border-color: #c9ded5;
  box-shadow: 0 5px 16px rgba(11, 63, 48, .07);
  backdrop-filter: none;
}
.booking-visual-hero .player-account-actions > span {
  color: #355148;
  font-weight: 650;
}
.booking-visual-hero .player-account-actions .button.secondary {
  color: #0b6f52;
  background: #ffffff;
  border-color: #b9d4c9;
}
.booking-visual-hero .player-account-actions .button.secondary:hover,
.booking-visual-hero .player-account-actions .button.secondary:focus-visible {
  color: #074c39;
  background: #f1f8f5;
  border-color: #82b8a5;
}
.booking-visual-hero .booking-logo {
  background: #ffffff;
  border: 1px solid #d5e5de;
  box-shadow: 0 12px 24px rgba(9, 55, 42, .12);
}

@media (max-width: 720px) {
  .booking-visual-hero .hero-trust-row span {
    font-size: .72rem;
    line-height: 1.25;
  }
  .booking-visual-hero .booking-visual-copy > p {
    font-size: .96rem;
  }
}

@media (prefers-contrast: more) {
  .booking-visual-hero {
    border-color: #8ba99e;
  }
  .booking-visual-hero .booking-venue-name,
  .booking-visual-hero .booking-visual-copy > p {
    color: #132f26 !important;
  }
  .booking-visual-hero .hero-trust-row span {
    color: #083f2f;
    border-color: #6d9d8c;
    background: #ffffff;
  }
}

/* Usability hotfix: readable accounts, persistent sign-in, and clearer creators */
.compact-creator>summary:after{
  content:'＋  ⌄';
  width:58px;
  min-width:58px;
  font-size:1rem;
  letter-spacing:.08em;
  transition:transform .2s ease,background .2s ease;
}
.compact-creator[open]>summary:after{content:'−  ⌃';background:color-mix(in srgb,var(--primary) 18%,#fff)}
.compact-creator>summary:hover:after,.compact-creator>summary:focus-visible:after{transform:translateY(-1px);background:color-mix(in srgb,var(--primary) 22%,#fff)}
.compact-creator>summary strong:after{content:' · tap to open';font-size:.72rem;font-weight:600;color:var(--muted)}
.compact-creator[open]>summary strong:after{content:' · tap to close'}

.remember-toggle{display:grid!important;grid-template-columns:auto auto minmax(0,1fr);align-items:center;gap:.65rem;padding:.72rem .78rem;border:1px solid var(--border);border-radius:14px;background:var(--surface-soft);cursor:pointer}
.remember-toggle>input{position:absolute;opacity:0;pointer-events:none}
.remember-switch{position:relative;display:block;width:42px;height:24px;border-radius:999px;background:#cbd8d2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.05);transition:.2s ease}
.remember-switch:after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18);transition:.2s ease}
.remember-toggle>input:checked+.remember-switch{background:var(--primary)}
.remember-toggle>input:checked+.remember-switch:after{transform:translateX(18px)}
.remember-toggle>input:focus-visible+.remember-switch{outline:3px solid color-mix(in srgb,var(--primary) 22%,transparent);outline-offset:2px}
.remember-toggle>span:last-child{display:grid;gap:.08rem}
.remember-toggle strong{font-size:.82rem}
.remember-toggle small{color:var(--muted);font-size:.7rem;line-height:1.35}

.business-link-preview{display:grid;gap:.28rem;padding:.85rem 1rem;border:1px solid color-mix(in srgb,var(--primary) 22%,var(--border));border-radius:14px;background:var(--primary-soft);overflow-wrap:anywhere}
.business-link-preview>span{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:900}
.business-link-preview strong{color:var(--primary);font-size:.9rem}
.business-link-preview output{font:inherit;color:inherit}
.business-link-preview small{color:var(--muted);line-height:1.4}

.customer-account-hero,.customer-account-hero *{color:#fff}
.customer-account-hero .eyebrow{color:#baf0d8}
.customer-account-hero h1{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.16)}
.customer-account-hero p{color:rgba(255,255,255,.84)!important}
.customer-account-actions .customer-account-book{background:#fff;color:#0d5d45;border-color:#fff}
.customer-account-actions .customer-account-book:hover{background:#f1fff8;color:#084833}
.customer-account-actions .customer-account-logout{background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.55)}
.customer-account-actions .customer-account-logout:hover{background:#fff;color:#a7332c}

.player-account-card .password-visibility,.venue-register-card .password-visibility{min-width:54px;cursor:pointer}
.player-account-card .field-feedback,.venue-register-card .field-feedback{font-size:.72rem;line-height:1.35}

@media(max-width:620px){
  .compact-creator>summary strong:after{display:block;margin-top:.15rem}
  .business-link-preview strong{font-size:.78rem}
  .customer-account-actions{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .customer-account-actions>a,.customer-account-actions form,.customer-account-actions button{width:100%}
}


/* Booking checkout account toggle: keep the checkbox compact and predictable. */
.create-player-account-toggle {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  cursor: pointer;
}
.create-player-account-toggle > input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 22px !important;
  height: 22px !important;
  min-width: 22px !important;
  min-height: 22px !important;
  max-width: 22px !important;
  margin: 2px 0 0 !important;
  padding: 0 !important;
  border: 2px solid var(--border-strong);
  border-radius: 6px;
  background: var(--surface);
  display: grid;
  place-items: center;
  flex: 0 0 22px;
  cursor: pointer;
}
.create-player-account-toggle > input[type="checkbox"]::after {
  content: '';
  width: 5px;
  height: 10px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transform-origin: center;
  transition: transform .14s ease;
}
.create-player-account-toggle > input[type="checkbox"]:checked {
  border-color: var(--primary);
  background: var(--primary);
}
.create-player-account-toggle > input[type="checkbox"]:checked::after {
  transform: rotate(45deg) scale(1);
}
.create-player-account-toggle > input[type="checkbox"]:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--primary) 24%, transparent);
  outline-offset: 3px;
}
.create-player-account-toggle > span {
  min-width: 0;
}


.brand-logo-full{display:block;max-width:100%;height:auto;width:min(170px,100%)}
.sidebar .brand{gap:0;display:flex;align-items:center}
.sidebar .brand .brand-logo-full{width:170px;max-width:100%}
.sidebar.is-collapsed .brand .brand-logo-full,.sidebar-collapsed .sidebar .brand .brand-logo-full{width:44px;object-fit:contain}
.unified-login-brand{display:flex;justify-content:center;align-items:center;margin-bottom:1rem}
.auth-logo{display:block;width:min(220px,80%);height:auto}

/* ---- Per-head player count visibility + corrected booking order (2026-08-08d) ----
 * Step 1 must remain before Step 2. Per-head quantity controls are attached
 * directly to the selected pricing-plan card so the multiplier cannot be missed.
 */
.premium-booking-form .pricing-plan-picker-section,
.premium-booking-form .optional-booking-options { order: 1; }
.premium-booking-form .court-picker-section { order: 2; }
.premium-booking-form .booking-workspace { order: 3; }

.customer-pricing-plan-shell {
  display: grid;
  align-self: start;
  gap: .55rem;
  min-width: 0;
}
.customer-pricing-plan-shell .customer-pricing-plan { height: 100%; }
.customer-pricing-plan-shell.selected-plan-shell .customer-pricing-plan { border-color: var(--primary); }
.player-count-required-badge {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: .3rem;
  padding: .22rem .45rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: color-mix(in srgb, var(--primary) 82%, var(--text));
  font-size: .59rem;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.2;
  text-transform: uppercase;
}
.customer-pricing-plan-shell.player-count-active {
  padding: .35rem;
  border: 1px solid color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: 20px;
  background: color-mix(in srgb, var(--primary) 4%, var(--surface));
  box-shadow: 0 12px 30px color-mix(in srgb, var(--primary) 8%, transparent);
}
.customer-pricing-plan-shell.player-count-active .customer-pricing-plan { box-shadow: none; }
.customer-pricing-plan-shell .plan-player-count {
  grid-template-columns: 1fr;
  gap: .7rem;
  margin-top: 0;
  padding: .8rem;
  border-radius: 15px;
  background: color-mix(in srgb, var(--accent) 6%, var(--surface));
  box-shadow: none;
}
.customer-pricing-plan-shell .player-count-stepper { justify-self: start; }
.customer-pricing-plan-shell .player-count-price {
  justify-self: start;
  max-width: none;
  text-align: left;
}
.customer-pricing-plan-shell .plan-player-count-copy label strong { font-size: .88rem; }
.customer-pricing-plan-shell .plan-player-count-copy label span { font-size: .66rem; }

@media (max-width: 760px) {
  .customer-pricing-plan-shell .plan-player-count { padding: .75rem; }
}

/* ---- Per-head player selector: permanently visible and non-fragile (2026-08-08e) ----
 * Do not move #playersField between plan cards. The selector lives directly below
 * the plan grid so it cannot disappear when a plan is selected or the DOM reflows.
 */
.player-count-plan-summary {
  display: inline-flex;
  width: max-content;
  max-width: 100%;
  align-items: center;
  gap: .28rem;
  margin-top: .05rem;
  padding: .28rem .5rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 24%, var(--border));
  border-radius: 9px;
  background: color-mix(in srgb, var(--secondary) 8%, var(--surface));
  color: var(--text);
  font-size: .66rem;
  font-weight: 760;
  line-height: 1.2;
}
.player-count-plan-summary b { color: var(--secondary); }
.booking-options-always-visible #playersField {
  margin-top: .8rem;
  border-width: 2px;
}
.booking-options-always-visible #playersField.is-awaiting-plan {
  border-style: dashed;
  border-color: color-mix(in srgb, var(--secondary) 26%, var(--border));
  background: color-mix(in srgb, var(--secondary) 3%, var(--surface));
}
.booking-options-always-visible #playersField.is-awaiting-plan .player-count-stepper {
  opacity: .6;
}
.booking-options-always-visible #playersField.is-awaiting-plan .player-count-price {
  color: var(--muted);
}
.booking-options-always-visible #playersField.is-active {
  border-color: color-mix(in srgb, var(--secondary) 48%, var(--border));
  background: linear-gradient(135deg, color-mix(in srgb, var(--secondary) 8%, var(--surface)), var(--surface));
  box-shadow: 0 12px 28px color-mix(in srgb, var(--secondary) 9%, transparent);
}
.booking-options-always-visible #playersField.is-active .player-count-kicker,
.booking-options-always-visible #playersField.is-active .player-count-price {
  color: var(--secondary);
}
@media (max-width: 760px) {
  .player-count-plan-summary { font-size: .64rem; }
  .booking-options-always-visible #playersField { margin-top: .65rem; }
}


/* ---- public/assets/css/uiux.css ---- */
/* Courtiva UI/UX system layer
 * Purpose: readability, responsive data cards, progressive disclosure,
 * accessible focus states, and a simplified booking journey.
 */
:root {
  --ui-space-1: .25rem;
  --ui-space-2: .5rem;
  --ui-space-3: .75rem;
  --ui-space-4: 1rem;
  --ui-space-5: 1.25rem;
  --ui-space-6: 1.5rem;
  --ui-radius-sm: 10px;
  --ui-radius-md: 14px;
  --ui-radius-lg: 20px;
  --ui-focus: 0 0 0 3px color-mix(in srgb, var(--primary, #176b4d) 28%, transparent);
  --primary-contrast: #fff;
  --accent-contrast: #10221b;
}

html { scroll-behavior: smooth; }
body { font-size: 16px; line-height: 1.55; }
button, input, select, textarea { font: inherit; }
label { font-size: .875rem; }
small, .tiny, .muted { line-height: 1.45; }
.tiny { font-size: .75rem !important; }
.badge { font-size: .75rem; }
.button { min-height: 42px; font-size: .875rem; }
.button.small { min-height: 36px; font-size: .8125rem; }
input, select, textarea { min-height: 44px; }
textarea { min-height: 110px; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid color-mix(in srgb, var(--primary, #176b4d) 72%, #fff);
  outline-offset: 3px;
  box-shadow: var(--ui-focus);
}

.skip-link {
  position: fixed;
  top: .5rem;
  left: .5rem;
  z-index: 10000;
  transform: translateY(-150%);
  padding: .7rem 1rem;
  border-radius: var(--ui-radius-sm);
  background: #071c15;
  color: #fff;
  font-weight: 800;
}
.skip-link:focus { transform: translateY(0); }

/* Workspace navigation */
.owner-workspace-tabs {
  display: flex;
  align-items: center;
  gap: .4rem;
  overflow-x: auto;
  margin-bottom: 1rem;
  padding: .35rem;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-md);
  background: var(--surface);
  scrollbar-width: thin;
}
.owner-workspace-tabs a {
  flex: 0 0 auto;
  padding: .65rem .9rem;
  border-radius: 10px;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 800;
}
.owner-workspace-tabs a:hover { background: var(--surface-soft); color: var(--text); }
.owner-workspace-tabs a.active { background: var(--primary); color: var(--primary-contrast); }

/* Dashboard tabs on desktop, select on mobile */
.dashboard-category-tabs { display: flex; align-items: center; gap: .35rem; }
.dashboard-category-tabs button {
  min-height: 40px;
  padding: .55rem .8rem;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--muted);
  font-weight: 800;
  cursor: pointer;
}
.dashboard-category-tabs button:hover { background: var(--surface-soft); color: var(--text); }
.dashboard-category-tabs button.active,
.dashboard-category-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 25%, var(--border));
  background: var(--primary-soft);
  color: var(--primary);
}
.tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.35rem;
  height: 1.35rem;
  margin-left: .35rem;
  padding: 0 .3rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast) !important;
  font-size: .68rem !important;
}
.dashboard-category-select { display: none; }

/* Progressive forms */
.compact-creator > summary { gap: 1rem; }
.compact-creator .summary-help { margin-left: auto; color: var(--muted); font-size: .78rem; }
.optional-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  padding: .16rem .42rem;
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.advanced-fields {
  border: 1px dashed color-mix(in srgb, var(--primary) 25%, var(--border));
  border-radius: var(--ui-radius-md);
  background: var(--surface-soft);
}
.advanced-fields > summary {
  min-height: 48px;
  padding: .75rem 1rem;
  cursor: pointer;
  color: var(--primary);
  font-weight: 850;
}
.advanced-fields-grid { padding: .25rem 1rem 1rem; }
.form-actions { display: flex; justify-content: flex-end; }

/* Row action menu */
.row-actions-menu { position: relative; }
.row-actions-menu > summary { list-style: none; cursor: pointer; }
.row-actions-menu > summary::-webkit-details-marker { display: none; }
.row-actions-menu[open] > form {
  position: absolute;
  right: 0;
  top: calc(100% + .4rem);
  z-index: 40;
  width: min(280px, 82vw);
  padding: .8rem;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-md);
  background: var(--surface);
  box-shadow: 0 16px 45px rgba(8, 35, 27, .16);
}

/* Confirmation dialog */
.ui-confirm-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(4, 20, 15, .62);
  backdrop-filter: blur(4px);
}
.ui-confirm-dialog {
  width: min(480px, 100%);
  padding: 1.25rem;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--ui-radius-lg);
  background: var(--surface, #fff);
  color: var(--text, #10221b);
  box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.ui-confirm-dialog h2 { margin: 0 0 .45rem; font-size: 1.3rem; }
.ui-confirm-dialog p { margin: 0; color: var(--muted); }
.ui-confirm-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: 1.2rem; }

/* Contrast preview in settings */
.brand-contrast-preview {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: .75rem;
  margin-top: .75rem;
}
.brand-preview-swatch {
  display: grid;
  min-height: 88px;
  place-items: center;
  padding: .75rem;
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-md);
  font-weight: 850;
  text-align: center;
}
.brand-contrast-warning { margin-top: .55rem; color: #9c2d25; font-size: .8rem; font-weight: 700; }

/* Booking flow ordering and hierarchy */
.premium-booking-form { display: flex; flex-direction: column; gap: 1.15rem; }
.court-picker-section { order: 1; }
.optional-booking-options { order: 2; }
.booking-workspace { order: 3; }
.standard-plan-default { display: none !important; }
.optional-booking-options {
  border: 1px solid var(--border);
  border-radius: var(--ui-radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.optional-booking-options > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 70px;
  padding: 1rem 1.15rem;
  list-style: none;
  cursor: pointer;
}
.optional-booking-options > summary::-webkit-details-marker { display: none; }
.optional-booking-options > summary > span:first-child { display: grid; gap: .15rem; }
.optional-booking-options > summary small { color: var(--muted); }
.optional-booking-options-body { padding: 0 1.15rem 1.15rem; }
.booking-time-subsection {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.four-step-booking .booking-step { min-width: 0; }
.four-step-booking .booking-step > div { min-width: 0; }
.four-step-booking .booking-step strong,
.four-step-booking .booking-step small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.booking-step.complete span:first-child { background: var(--primary); color: var(--primary-contrast); }
.court-choice-card.selected { outline: 3px solid color-mix(in srgb, var(--primary) 30%, transparent); }
.court-choice-card .court-rate strong { color: var(--primary); }
.review-confirmation-card { border-color: color-mix(in srgb, var(--primary) 25%, var(--border)); background: var(--primary-soft); }
.review-hold-copy { display: flex !important; }

/* Owner-selected brand colors remain readable */
.button:not(.secondary):not(.danger),
.nav-link.active,
.owner-workspace-tabs a.active,
.booking-step.active > span,
.branch-chip.active,
.customer-pricing-plan.selected .pricing-plan-check {
  color: var(--primary-contrast, #fff);
}

/* Responsive table-to-card system */
@media (max-width: 720px) {
  body { font-size: 15px; }
  input, select, textarea { font-size: 16px; }
  .dashboard-category-tabs { display: none; }
  .dashboard-category-select { display: grid; width: 100%; gap: .35rem; }
  .dashboard-category-select select { width: 100%; appearance: auto; }
  .compact-creator .summary-help { display: none; }
  .form-actions .button { width: 100%; }

  .responsive-table-wrap { overflow: visible; }
  .responsive-data-table,
  .responsive-data-table tbody,
  .responsive-data-table tr,
  .responsive-data-table td { display: block; width: 100%; }
  .responsive-data-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .responsive-data-table tbody { display: grid; gap: .8rem; }
  .responsive-data-table tr {
    padding: .9rem;
    border: 1px solid var(--border);
    border-radius: var(--ui-radius-md);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
  }
  .responsive-data-table td {
    display: grid;
    grid-template-columns: minmax(90px, .38fr) minmax(0, .62fr);
    align-items: start;
    gap: .75rem;
    padding: .5rem 0;
    border: 0;
    border-bottom: 1px solid var(--line);
    text-align: left !important;
  }
  .responsive-data-table td:last-child { border-bottom: 0; }
  .responsive-data-table td::before {
    content: attr(data-label);
    color: var(--muted);
    font-size: .72rem;
    font-weight: 850;
    text-transform: uppercase;
    letter-spacing: .04em;
  }
  .responsive-data-table td[colspan] { display: block; }
  .responsive-data-table td[colspan]::before { content: none; }
  .responsive-data-table .inline { align-items: stretch; flex-direction: column; }
  .responsive-data-table .inline input,
  .responsive-data-table .inline select,
  .responsive-data-table .inline .button { width: 100%; }
  .row-actions-menu[open] > form { position: static; width: 100%; margin-top: .45rem; box-shadow: none; }

  .booking-visual-hero { min-height: 0; padding: 1rem; }
  .booking-photo-gallery { min-height: 210px !important; grid-template-columns: 1fr !important; }
  .booking-photo-gallery > :not(:first-child) { display: none; }
  .booking-visual-copy h1 { font-size: clamp(2rem, 10vw, 2.8rem) !important; }
  .hero-trust-row { display: none; }
  .player-account-actions { gap: .45rem; }
  .player-account-actions .button { min-height: 40px; font-size: .8rem; }

  .four-step-booking { gap: .25rem; overflow-x: auto; padding-bottom: .35rem; }
  .four-step-booking .step-connector { min-width: 14px; }
  .four-step-booking .booking-step { flex: 0 0 112px; padding: .55rem; }
  .four-step-booking .booking-step small { display: none; }
  .booking-layout-modern { display: block; }
  .booking-summary-card { position: static; margin-top: 1rem; }
  .booking-time-subsection { scroll-margin-top: .75rem; }
  .calendar-legend { gap: .45rem; }
  .calendar-legend span { font-size: .7rem; }

  .mobile-booking-bar {
    position: fixed;
    left: .65rem;
    right: .65rem;
    bottom: max(.65rem, env(safe-area-inset-bottom));
    z-index: 120;
    display: grid;
    grid-template-columns: minmax(0,1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .7rem;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 16px;
    background: #092f25;
    color: #fff;
    box-shadow: 0 18px 45px rgba(0,0,0,.28);
  }
  .mobile-booking-bar[hidden] { display: none; }
  .mobile-booking-bar-copy { min-width: 0; display: grid; }
  .mobile-booking-bar-copy strong,
  .mobile-booking-bar-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mobile-booking-bar-copy span { color: rgba(255,255,255,.72); font-size: .75rem; }
  .mobile-booking-bar .button { min-width: 116px; background: var(--accent); color: var(--accent-contrast); border-color: transparent; }
  .public-body.has-mobile-booking-bar { padding-bottom: 92px; }
}

@media (max-width: 430px) {
  .brand-contrast-preview { grid-template-columns: 1fr; }
  .court-card-grid { grid-template-columns: 1fr !important; }
  .customer-pricing-plan { grid-template-columns: auto minmax(0,1fr); }
  .customer-pricing-plan .pricing-plan-price { grid-column: 2; text-align: left; }
  .stage-heading { align-items: flex-start; flex-direction: column; }
  .availability-calendar { display: none; }
  .mobile-date-strip { display: flex !important; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

.optional-setup-extension {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1rem;
  padding: 1rem;
  border: 1px dashed color-mix(in srgb, var(--primary) 28%, var(--border));
  border-radius: var(--ui-radius-md);
  background: var(--surface-soft);
}
.optional-setup-extension > div { display: grid; gap: .25rem; }
.optional-setup-extension p { margin: 0; color: var(--muted); font-size: .82rem; }
@media (max-width: 720px) {
  .optional-setup-extension { align-items: stretch; flex-direction: column; }
  .optional-setup-extension .button { width: 100%; }
}

@media (max-width: 720px) {
  .booking-photo-gallery {
    display: flex !important;
    gap: .65rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .booking-photo-gallery > * {
    display: block !important;
    flex: 0 0 min(88%, 430px);
    min-height: 210px;
    scroll-snap-align: center;
  }
}

/* Booking QR payment workflow */
.payment-settings-status-card { display:grid; gap:18px; }
.payment-enable-toggle { padding:0; border:0; background:transparent; align-items:flex-start; }
.payment-enable-toggle input { width:22px; height:22px; flex:0 0 22px; margin-top:2px; }
.payment-workflow-summary { display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:16px; border:1px solid var(--border); border-radius:16px; background:var(--surface-soft); }
.payment-workflow-summary span { display:flex; align-items:center; gap:8px; font-weight:700; }
.payment-workflow-summary b { width:28px; height:28px; display:grid; place-items:center; border-radius:50%; background:var(--primary); color:#fff; }
.payment-workflow-summary i { color:var(--muted); font-style:normal; }
.payment-settings-layout { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(300px,.7fr); gap:20px; align-items:start; }
.payment-settings-fields,.payment-qr-settings-card { min-width:0; }
.payment-policy-note { display:grid; gap:4px; margin-top:18px; }
.payment-qr-settings-card { display:grid; gap:12px; position:sticky; top:92px; }
.payment-qr-upload { display:block; cursor:pointer; }
.payment-qr-upload input { position:absolute; opacity:0; pointer-events:none; }
.payment-qr-preview { min-height:320px; border:2px dashed color-mix(in srgb,var(--primary) 32%,var(--border)); border-radius:20px; background-color:var(--surface-soft); background-size:contain; background-position:center; background-repeat:no-repeat; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; text-align:center; padding:24px; overflow:hidden; }
.payment-qr-preview b { font-size:42px; line-height:1; color:var(--primary); }
.payment-qr-upload.has-qr .payment-qr-preview { justify-content:flex-end; background-color:#fff; }
.payment-qr-upload.has-qr .payment-qr-preview strong,.payment-qr-upload.has-qr .payment-qr-preview small { background:rgba(255,255,255,.94); padding:5px 10px; border-radius:999px; }
.payment-settings-save-bar { position:sticky; bottom:14px; z-index:20; }

.booking-payment-checkout-card { border-color:color-mix(in srgb,var(--primary) 35%,var(--border)); background:linear-gradient(180deg,color-mix(in srgb,var(--primary) 5%,#fff),#fff); }
.booking-payment-checkout-grid { display:grid; grid-template-columns:minmax(240px,.75fr) minmax(0,1.25fr); gap:22px; align-items:start; }
.booking-payment-qr-panel { display:grid; gap:14px; }
.booking-payment-qr-panel img { display:block; width:min(100%,320px); aspect-ratio:1; object-fit:contain; padding:10px; background:#fff; border:1px solid var(--border); border-radius:18px; margin-inline:auto; }
.booking-payment-destination { display:grid; gap:4px; text-align:center; padding:14px; border-radius:16px; background:var(--surface-soft); border:1px solid var(--border); }
.booking-payment-destination span { color:var(--muted); font-size:.82rem; text-transform:uppercase; letter-spacing:.08em; font-weight:800; }
.booking-payment-destination strong { font-size:1.55rem; color:var(--primary); }
.booking-payment-destination small { overflow-wrap:anywhere; }
.booking-payment-proof-fields { display:grid; gap:14px; }
.booking-payment-instructions { margin:0; padding:14px; border-radius:14px; background:var(--surface-soft); color:var(--text); line-height:1.55; }
.proof-upload-field { display:grid; gap:8px; }
.proof-upload-field input[type="file"] { padding:12px; background:#fff; }
.payment-confirm-check { align-items:flex-start; padding:14px; border:1px solid var(--border); border-radius:14px; background:#fff; }
.payment-confirm-check input { width:22px; height:22px; flex:0 0 22px; }

.booking-operation-card.has-payment-proof { border-color:color-mix(in srgb,var(--primary) 42%,var(--border)); box-shadow:0 18px 42px rgba(10,55,42,.11); }
.booking-payment-review-panel { margin-top:18px; padding:18px; border-radius:18px; border:1px solid color-mix(in srgb,var(--primary) 35%,var(--border)); background:color-mix(in srgb,var(--primary) 5%,#fff); display:grid; gap:16px; }
.booking-payment-review-head { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.booking-payment-review-head h3 { margin:3px 0 0; }
.booking-payment-review-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)) auto; gap:12px; align-items:end; }
.booking-payment-review-details > div { display:grid; gap:4px; min-width:0; }
.booking-payment-review-details span { color:var(--muted); font-size:.82rem; }
.booking-payment-review-details strong { overflow-wrap:anywhere; }
.booking-payment-review-actions { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(240px,.8fr); gap:12px; align-items:start; }
.booking-payment-review-actions form { margin:0; }
.payment-reject-panel { border:1px solid var(--border); border-radius:14px; background:#fff; overflow:hidden; }
.payment-reject-panel summary { padding:14px; cursor:pointer; font-weight:800; color:var(--danger); }
.payment-reject-panel form { padding:0 14px 14px; display:grid; gap:10px; }

/* Booking QR upload preview: hide the empty-state plus once an image is selected. */
.payment-qr-upload.has-qr .payment-qr-preview > b { display: none; }


/* ---- public/assets/css/mobile.css ---- */
/*
 * Courtiva responsive stabilization layer
 * Loaded after app.css and uiux.css so mobile rules have one predictable source
 * of truth. This file focuses on preventing overlap, clipped controls, and
 * desktop-sized grids on narrow screens.
 */

/* Four-step booking progress: the legacy component was built for three steps. */
.four-step-booking {
  grid-template-columns: auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto minmax(16px, 1fr) auto;
}

/* Long tenant names, emails, prices, and generated URLs must never force a box wider. */
:where(
  .main, .content, .card, .card-head, .page-head, .page-head-actions,
  .booking-visual-hero, .booking-visual-copy, .booking-workspace,
  .booking-flow-column, .booking-stage, .details-card, .court-choice-card,
  .compact-dashboard-header, .dashboard-category-bar, .onboarding-step,
  .customer-booking-card, .customer-booking-main, .responsive-data-table td,
  .admin-organization-card, .subscription-lifecycle-card, .billing-hero,
  .checkout-section, .invoice-document, .auth-card
) {
  min-width: 0;
}

:where(
  h1, h2, h3, h4, p, small, strong, span, a, button, label, td, th,
  .business-link-preview, .booking-venue-name, .workspace-copy,
  .customer-booking-main, .pricing-plan-copy, .pricing-plan-price
) {
  overflow-wrap: anywhere;
}

img, video, svg { max-width: 100%; }

@media (max-width: 980px) {
  .owner-body,
  .admin-body,
  .public-body,
  .guest-body {
    overflow-x: clip;
  }

  .content {
    width: 100%;
    max-width: 100vw;
  }

  .page-head,
  .admin-page-head,
  .compact-dashboard-header,
  .section-heading-row,
  .card-head-rich {
    align-items: stretch;
  }

  .page-head-actions,
  .compact-header-actions,
  .customer-account-actions,
  .pricing-row-actions,
  .pricing-form-actions {
    flex-wrap: wrap;
  }

  .booking-layout-modern,
  .booking-grid,
  .hours-layout,
  .admin-settings-grid,
  .support-settings-grid,
  .billing-bottom-grid,
  .purchase-review-grid,
  .subscription-checkout-layout,
  .subscription-checkout-hero,
  .booking-gallery-settings {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .booking-summary-card,
  .booking-aside,
  .hours-guide,
  .owner-calendar-actions,
  .checkout-sidebar-column {
    position: static !important;
    top: auto !important;
  }
}

@media (max-width: 720px) {
  :root {
    --mobile-page-gutter: 14px;
  }

  html { -webkit-text-size-adjust: 100%; }

  body {
    min-width: 0;
    font-size: 15px;
  }

  .content {
    padding: var(--mobile-page-gutter) !important;
  }

  .public-shell {
    width: calc(100% - 16px) !important;
    margin: 8px auto !important;
  }

  .guest-shell,
  .player-account-shell,
  .customer-account-page {
    width: 100%;
    max-width: 100%;
    padding: 14px !important;
  }

  .card,
  .booking-stage,
  .court-picker-section,
  .pricing-plan-picker-section,
  .details-card,
  .auth-card,
  .player-account-card,
  .venue-register-card {
    max-width: 100%;
    padding: 16px !important;
    border-radius: 16px !important;
  }

  .page-head,
  .admin-page-head,
  .card-head,
  .card-head-rich,
  .section-heading-row,
  .details-card-head,
  .stage-heading,
  .book-again-card,
  .registration-plan-note,
  .annual-promo-banner,
  .purchase-status-banner,
  .subscription-lifecycle-card,
  .owner-plan-card-head,
  .invoice-document-head,
  .partner-activation-summary div {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .page-head-actions,
  .compact-header-actions,
  .button-row,
  .action-group,
  .pricing-row-actions,
  .pricing-form-actions,
  .customer-account-actions,
  .player-account-actions,
  .onboarding-complete-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
    gap: 8px;
  }

  :where(
    .page-head-actions, .compact-header-actions, .button-row, .action-group,
    .pricing-row-actions, .pricing-form-actions, .customer-account-actions,
    .player-account-actions, .onboarding-complete-actions
  ) > :where(a, button, form, details) {
    width: 100%;
    min-width: 0;
  }

  :where(
    .page-head-actions, .compact-header-actions, .button-row, .action-group,
    .pricing-row-actions, .pricing-form-actions, .customer-account-actions,
    .player-account-actions, .onboarding-complete-actions
  ) .button,
  :where(
    .page-head-actions, .compact-header-actions, .button-row, .action-group,
    .pricing-row-actions, .pricing-form-actions, .customer-account-actions,
    .player-account-actions, .onboarding-complete-actions
  ) button {
    width: 100%;
    justify-content: center;
  }

  .form-grid,
  .modern-form-grid,
  .registration-grid,
  .settings-control-grid,
  .settings-toggle-grid,
  .admin-edit-grid,
  .plan-editor-grid,
  .feature-check-grid,
  .brand-upload-grid,
  .booking-gallery-upload-grid,
  .purchase-detail-list,
  .purchase-review-actions,
  .owner-plan-prices,
  .billing-cycle-options,
  .checkout-cycle-grid,
  .checkout-form-grid,
  .checkout-included-list ul,
  .organization-meta-grid,
  .plan-limit-row,
  .partner-payment-policy-card,
  .invoice-due-banner,
  .booking-operation-schedule,
  .report-date-form,
  .booking-filter-bar {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .span-2,
  .span-3 {
    grid-column: auto !important;
  }

  /* Owner topbar: preserve the page title and remove competing identity chips. */
  .topbar {
    min-height: 60px;
    padding: 8px 12px !important;
    gap: 8px;
  }

  .topbar-leading { flex: 1 1 auto; min-width: 0; gap: 8px; }
  .topbar-title { flex: 1 1 auto; min-width: 0; }
  .topbar-title strong {
    max-width: 100%;
    font-size: .88rem;
  }
  .topbar-actions { flex: 0 0 auto; gap: 5px; }
  .topbar .profile-chip { display: none; }
  .topbar-buy-button {
    min-height: 38px;
    padding: 0 10px;
    font-size: .68rem;
    white-space: nowrap;
  }

  /* The old three-step mobile grid caused the new four-step controls to wrap. */
  .four-step-booking {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 6px !important;
    overflow: visible !important;
    padding: 8px !important;
  }
  .four-step-booking .step-connector { display: none !important; }
  .four-step-booking .booking-step {
    min-width: 0 !important;
    width: 100%;
    padding: 6px 2px !important;
    justify-content: center;
  }
  .four-step-booking .booking-step > span {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
  }
  .four-step-booking .booking-step > div { display: none !important; }

  .booking-visual-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 14px !important;
    padding: 16px !important;
    border-radius: 18px !important;
  }
  .booking-visual-copy h1 {
    margin: 10px 0 !important;
    font-size: clamp(1.9rem, 10vw, 2.75rem) !important;
    line-height: 1.04 !important;
  }
  .booking-brand-line {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .booking-logo { flex: 0 0 auto; }
  .booking-photo-gallery {
    min-height: 0 !important;
    margin: 0;
  }
  .booking-photo-gallery > * {
    flex-basis: 88% !important;
    min-height: 190px !important;
    max-height: 260px;
  }
  .gallery-photo-1,
  .gallery-photo-2,
  .gallery-photo-3 {
    margin: 0 !important;
    grid-row: auto !important;
  }

  .court-card-grid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow: visible !important;
  }
  .court-choice-card {
    width: 100%;
    min-width: 0 !important;
  }
  .court-title-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .court-rate {
    justify-items: start;
    width: 100%;
  }
  .court-card-body > p { min-height: 0; }

  .optional-booking-options > summary,
  .compact-creator > summary,
  .business-hours-summary {
    align-items: flex-start;
    min-width: 0;
    padding: 14px !important;
  }
  .optional-booking-options > summary > span:first-child,
  .compact-creator > summary > :first-child,
  .business-hours-summary > span {
    min-width: 0;
  }
  .compact-creator > summary::after {
    content: '⌄' !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
  }
  .compact-creator[open] > summary::after { content: '⌃' !important; }
  .compact-creator > summary strong::after { display: none !important; }
  .compact-creator > form,
  .business-hours-creator > form { padding: 14px !important; }

  .customer-pricing-plan {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: start;
    padding: 14px 42px 14px 14px;
  }
  .pricing-plan-price {
    align-items: flex-start;
    padding-right: 0;
    text-align: left;
  }
  .pricing-plan-price strong { white-space: normal; }
  .server-verified-pill { width: fit-content; white-space: normal; }

  .calendar-toolbar {
    grid-template-columns: 40px minmax(0, 1fr) 40px;
    gap: 6px;
    padding: 12px 10px;
  }
  .calendar-toolbar h3 { font-size: 1rem; overflow-wrap: normal; }
  .calendar-nav { width: 40px; height: 40px; }
  .calendar-legend {
    width: 100%;
    padding-bottom: 6px;
    scrollbar-width: thin;
  }

  .timeline-header-row {
    grid-template-columns: 72px minmax(0, 1fr) !important;
  }
  .timeline-slot {
    grid-template-columns: 68px 24px minmax(0, 1fr) !important;
    min-height: 62px;
    padding: 0 8px;
  }
  .timeline-time,
  .timeline-status { min-width: 0; }

  .promo-input-wrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .promo-input-wrap button { width: 100%; min-height: 44px; }

  .responsive-data-table tr { overflow: visible; }
  .responsive-data-table td {
    grid-template-columns: minmax(105px, .42fr) minmax(0, .58fr) !important;
  }
  .responsive-data-table td > * { min-width: 0; max-width: 100%; }
  .responsive-data-table td :where(input, select, textarea, .button, details, form) {
    max-width: 100%;
  }

  .row-actions-menu[open] > form {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
  }

  .alert {
    grid-template-columns: auto minmax(0, 1fr) auto;
    padding: 12px;
  }

  .mobile-booking-bar {
    left: 8px !important;
    right: 8px !important;
    bottom: max(8px, env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 16px);
  }
  .mobile-booking-bar .button {
    min-width: 104px !important;
    padding-inline: 12px;
  }

  .ui-confirm-dialog {
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    padding: 18px;
  }
  .ui-confirm-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .ui-confirm-actions .button { width: 100%; }

  .mobile-owner-nav {
    height: calc(68px + env(safe-area-inset-bottom)) !important;
  }
  .mobile-owner-nav strong {
    max-width: 100%;
    font-size: .64rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .password-input-wrap > input { padding-right: 4.7rem; }
  .password-visibility {
    right: .35rem;
    max-width: 4.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  :root { --mobile-page-gutter: 10px; }

  h1 { font-size: clamp(1.65rem, 9vw, 2.1rem); }
  h2 { line-height: 1.15; }

  .card,
  .booking-stage,
  .court-picker-section,
  .pricing-plan-picker-section,
  .details-card,
  .auth-card,
  .player-account-card,
  .venue-register-card {
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .topbar-buy-button { display: none; }

  .compact-metric-grid,
  .metric-grid,
  .dashboard-side-stack,
  .owner-calendar-stats,
  .consolidated-summary,
  .subscription-countdown,
  .customer-account-actions,
  .brand-contrast-preview {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .onboarding-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }
  .setup-progress-compact { justify-self: start; }

  .onboarding-step,
  .compact-upcoming-list article,
  .customer-booking-card,
  .verification-card,
  .responsive-data-table td {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  .onboarding-step-number,
  .customer-booking-date,
  .verification-time {
    justify-self: start;
  }
  .compact-upcoming-list article > div:last-child,
  .customer-booking-actions,
  .verification-card form {
    grid-column: auto !important;
  }

  .responsive-data-table td {
    gap: 4px;
    padding: 10px 0;
  }
  .responsive-data-table td::before {
    font-size: .68rem;
  }

  .four-step-booking .booking-step > span {
    width: 34px;
    height: 34px;
    flex-basis: 34px;
  }

  .booking-visual-copy h1 {
    font-size: clamp(1.75rem, 11vw, 2.35rem) !important;
  }
  .booking-visual-copy > p { font-size: .92rem !important; }
  .booking-photo-gallery > * {
    flex-basis: 94% !important;
    min-height: 175px !important;
  }

  .mobile-date-card,
  .mobile-date-skeleton {
    min-width: 70px !important;
  }

  .timeline-header-row {
    grid-template-columns: 62px minmax(0, 1fr) !important;
  }
  .timeline-slot {
    grid-template-columns: 58px 20px minmax(0, 1fr) !important;
    padding: 0 6px;
  }

  .mobile-booking-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
    padding: 7px;
  }
  .mobile-booking-bar .button {
    min-width: 92px !important;
    padding-inline: 10px;
    font-size: .78rem;
  }

  .remember-toggle {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }
  .remember-toggle > span:last-child { grid-column: 2; }
}

@media (max-width: 360px) {
  .topbar-title strong { font-size: .8rem; }

  .four-step-booking { gap: 3px !important; }
  .four-step-booking .booking-step > span {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
  }

  .calendar-toolbar {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
  }
  .calendar-nav { width: 36px; height: 36px; }

  .mobile-booking-bar {
    grid-template-columns: minmax(0, 1fr);
  }
  .mobile-booking-bar .button { width: 100%; }
  .public-body.has-mobile-booking-bar { padding-bottom: 132px !important; }

  .mobile-owner-nav strong { font-size: .58rem !important; }
}

@media print {
  .mobile-owner-nav,
  .mobile-booking-bar { display: none !important; }
}

@media (max-width: 760px) {
  .payment-settings-layout,
  .booking-payment-checkout-grid,
  .booking-payment-review-actions { grid-template-columns:1fr !important; }
  .payment-qr-settings-card { position:static; }
  .payment-workflow-summary { justify-content:flex-start; }
  .payment-workflow-summary i { display:none; }
  .payment-workflow-summary span { width:calc(50% - 6px); font-size:.86rem; }
  .payment-qr-preview { min-height:280px; }
  .booking-payment-review-details { grid-template-columns:1fr !important; }
  .booking-payment-review-head { flex-direction:column; }
  .booking-payment-qr-panel img { width:min(100%,280px); }
  .payment-settings-save-bar { position:static; }
}

@media (max-width: 420px) {
  .payment-workflow-summary span { width:100%; }
  .booking-payment-review-panel { padding:14px; }
}


/* ---- public/assets/css/courtiva-system.css ---- */
/* Courtiva visual system
 * Final cascade layer for consistent brand sizing, spacing, responsive behavior,
 * accessibility, and layout resilience across Owner, Superadmin, guest and public UI.
 */
:root {
  --courtiva-navy-950: #00153f;
  --courtiva-navy-900: #001f5f;
  --courtiva-navy-800: #07337b;
  --courtiva-green-600: #00a55a;
  --courtiva-green-700: #00884a;
  --courtiva-lime-500: #98df32;
  --courtiva-page: #f4f7fc;
  --courtiva-surface: #ffffff;
  --courtiva-ink: #10204a;
  --courtiva-muted: #66748f;
  --courtiva-line: #dbe3ef;
  --courtiva-radius-sm: 10px;
  --courtiva-radius-md: 14px;
  --courtiva-radius-lg: 20px;
  --courtiva-content-max: 1540px;
  --courtiva-topbar-height: 68px;
  --sidebar-width: 264px;
  --shadow-sm: 0 5px 18px rgba(0,31,95,.055);
  --shadow: 0 16px 44px rgba(0,31,95,.085);
  --shadow-lg: 0 28px 72px rgba(0,21,63,.14);
}

html { text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
img { height: auto; }

/* Never leave the application invisible when JavaScript fails or is delayed. */
.content,
.content.is-ready { opacity: 1; transform: none; }
.content.is-ready { animation: none; }

/* App chrome: Courtiva itself stays branded while venue colors can style workspace actions. */
.owner-body .sidebar,
.admin-body .sidebar {
  padding: 16px 14px;
  gap: 14px;
  background:
    radial-gradient(circle at 18% -5%, rgba(152,223,50,.13), transparent 26%),
    linear-gradient(180deg, var(--courtiva-navy-900) 0%, var(--courtiva-navy-950) 100%);
  border-right: 1px solid rgba(255,255,255,.05);
}

.sidebar-head {
  min-height: 54px;
  padding: 0 4px 4px;
  gap: 8px;
}
.sidebar .brand {
  min-height: 48px;
  flex: 1 1 auto;
  padding: 4px 2px;
  overflow: hidden;
}
.brand-logo-full {
  display: block;
  width: min(174px, 100%);
  max-width: 100%;
  height: auto;
  object-fit: contain;
  object-position: left center;
}
.brand-logo-icon {
  display: none;
  width: 42px;
  height: 42px;
  object-fit: contain;
}
.sidebar-collapse {
  flex: 0 0 34px;
  border: 1px solid rgba(255,255,255,.09);
  color: #b8c8e9;
  background: rgba(255,255,255,.055);
}
.sidebar-collapse:hover { color: #fff; background: rgba(255,255,255,.1); }

.workspace-card,
.admin-role-card {
  min-height: 64px;
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
  box-shadow: inset 0 1px rgba(255,255,255,.025);
}
.workspace-avatar {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  color: #16305f;
  background: var(--courtiva-lime-500);
  border-color: rgba(255,255,255,.12);
}
.workspace-avatar-logo { background: #fff; }
.workspace-avatar-logo img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.workspace-copy strong { color: #fff; font-size: .82rem; }
.workspace-copy small { color: #a9badb; }
.workspace-status { background: var(--courtiva-lime-500); box-shadow: 0 0 0 5px rgba(152,223,50,.11); }

.nav-section-title { color: #8196bd; }
.nav-link,
.sidebar nav > a { color: #c3cfea; }
.nav-link:hover,
.sidebar nav > a:hover { color: #fff; background: rgba(255,255,255,.075); }
.nav-link.active {
  color: #fff;
  background: linear-gradient(90deg, rgba(0,165,90,.28), rgba(0,165,90,.10));
  box-shadow: inset 3px 0 0 var(--courtiva-lime-500);
}
.nav-link::after { background: var(--courtiva-lime-500); }
.booking-link {
  color: #e6ffc3;
  background: rgba(0,165,90,.16);
  border: 1px solid rgba(152,223,50,.1);
}
.booking-link:hover { color: #fff; background: rgba(0,165,90,.24); }
.sidebar-footer { border-top-color: rgba(255,255,255,.08); }

/* Collapsed navigation uses the square Courtiva mark instead of shrinking the wordmark. */
body.sidebar-collapsed { --sidebar-width: 76px; }
body.sidebar-collapsed .sidebar { padding-inline: 11px; }
body.sidebar-collapsed .sidebar-head { justify-content: center; padding-inline: 0; }
body.sidebar-collapsed .brand { flex: 0 0 auto; justify-content: center; overflow: visible; }
body.sidebar-collapsed .brand-logo-full { display: none; }
body.sidebar-collapsed .brand-logo-icon { display: block; }
body.sidebar-collapsed .sidebar-collapse { width: 40px; height: 32px; }
body.sidebar-collapsed .workspace-card { padding-inline: 6px; }

.main { min-width: 0; background: var(--bg); }
.topbar {
  min-height: var(--courtiva-topbar-height);
  padding: 0 clamp(18px, 2.25vw, 32px);
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border-bottom-color: color-mix(in srgb, var(--border) 84%, transparent);
  box-shadow: 0 4px 20px rgba(0,31,95,.035);
}
.topbar-title strong { font-size: .98rem; letter-spacing: -.015em; }
.breadcrumb { color: var(--muted); font-size: .69rem; }
.profile-chip { min-height: 42px; padding: 4px 9px 4px 5px; }
.profile-avatar { width: 34px; height: 34px; border-radius: 11px; }
.topbar-logout { min-height: 40px; }

.content {
  width: min(100%, var(--courtiva-content-max));
  padding: clamp(22px, 2.4vw, 34px);
}
.page-head,
.admin-page-head { margin-bottom: 22px; }
.page-head h1,
.admin-page-head h1 {
  margin-bottom: 7px;
  font-size: clamp(1.65rem, 2.2vw, 2.15rem);
  letter-spacing: -.035em;
}
.page-head p,
.admin-page-head p { color: var(--muted); line-height: 1.62; }

.card,
.auth-card,
.booking-stage,
.court-picker-section,
.optional-booking-options,
.details-card {
  border-color: color-mix(in srgb, var(--border) 94%, #fff);
  border-radius: var(--courtiva-radius-lg);
  box-shadow: var(--shadow-sm);
}
.card { padding: clamp(18px, 1.8vw, 24px); }
.owner-body .card:hover { transform: none; box-shadow: var(--shadow); }
.card-head,
.card-head-rich { gap: 14px; }
.card-head h2,
.card-head-rich h2 { letter-spacing: -.025em; }

/* More consistent controls and action hierarchy. */
input,
select,
textarea {
  min-height: 46px;
  border-radius: 12px;
  border-color: var(--border-strong);
  background: var(--surface);
}
input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 13%, transparent);
}
.button { min-height: 44px; border-radius: 12px; font-weight: 800; }
.button.small { min-height: 36px; }
.icon-button { border-radius: 11px; }

.stats { gap: 14px; }
.stats article {
  min-width: 0;
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
}
.stats span { line-height: 1.35; }
.stats strong { letter-spacing: -.035em; }
.table-wrap { border: 1px solid var(--border); border-radius: 14px; background: var(--surface); }
th { top: -1px; }
tbody tr:last-child td { border-bottom: 0; }

/* Auth and onboarding: same wordmark scale everywhere. */
.guest-body {
  padding: clamp(18px, 4vw, 34px);
  background:
    radial-gradient(circle at 12% 8%, rgba(0,165,90,.10), transparent 26%),
    radial-gradient(circle at 90% 88%, rgba(0,31,95,.10), transparent 30%),
    var(--courtiva-page);
}
.guest-shell { width: min(100%, 500px); }
.auth-card { padding: clamp(24px, 5vw, 42px); }
.auth-card::before { display: none; }
.unified-login-brand { margin: 4px 0 22px; }
.auth-logo {
  display: block;
  width: min(250px, 78vw);
  max-height: 72px;
  object-fit: contain;
}
.auth-back-link { color: var(--muted); font-size: .8rem; }
.auth-back-link:hover { color: var(--primary); }
.unified-login-card h1 { margin-bottom: 8px; font-size: clamp(1.75rem, 5vw, 2.25rem); }
.login-help-row { align-items: center; }

/* Venue logos can be square or horizontal; never force one fixed square size. */
.booking-brand-line .booking-logo,
.booking-visual-hero .booking-logo {
  width: auto;
  max-width: 190px;
  height: 58px;
  max-height: 58px;
  margin: 0;
  padding: 5px 7px;
  object-fit: contain;
  object-position: left center;
  border-radius: 14px;
}
.booking-brand-line { min-width: 0; }
.booking-brand-line > * { min-width: 0; }
.booking-visual-copy h1 { overflow-wrap: anywhere; }
.booking-photo-gallery img,
.court-card-media img { display: block; }

/* Uploads and imagery should not shift layout while loading. */
.upload-preview,
.payment-qr-preview { background-position: center; background-repeat: no-repeat; }
.payment-qr-preview { background-size: contain; }

/* Avoid over-animation; preserve clear hover/focus without making admin screens feel jumpy. */
@media (prefers-reduced-motion: no-preference) {
  .button:hover { transform: translateY(-1px); }
  .nav-link:hover { transform: translateX(1px); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

@media (max-width: 1180px) {
  :root { --sidebar-width: 246px; }
  .content { padding: 24px; }
}

@media (max-width: 980px) {
  :root { --courtiva-topbar-height: 62px; }
  .app-shell { grid-template-columns: minmax(0,1fr); }
  body.sidebar-collapsed { --sidebar-width: 264px; }
  body.sidebar-collapsed .sidebar { padding-inline: 14px; }
  body.sidebar-collapsed .brand-logo-full { display: block; }
  body.sidebar-collapsed .brand-logo-icon { display: none; }
  .sidebar { width: min(86vw, 292px); }
  .brand-logo-full { width: 168px; }
  .content { padding: 20px; }
  .topbar { padding-inline: 16px; }
}

@media (max-width: 720px) {
  :root { --courtiva-radius-lg: 16px; }
  .topbar { min-height: 60px; padding: 8px 12px; }
  .topbar-title strong { font-size: .9rem; }
  .content { padding: 14px !important; }
  .page-head,
  .admin-page-head { gap: 12px; margin-bottom: 16px; }
  .page-head h1,
  .admin-page-head h1 { font-size: 1.62rem; }
  .card { padding: 16px; margin-bottom: 14px; }
  .stats { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
  .stats article { padding: 14px; }
  .stats strong { font-size: 1.3rem; }
  .auth-card { padding: 22px 18px !important; }
  .auth-logo { width: min(220px, 74vw); max-height: 64px; }
  .login-help-row { align-items: flex-start; flex-direction: column; gap: 7px; }
  .booking-brand-line .booking-logo,
  .booking-visual-hero .booking-logo {
    width: auto !important;
    max-width: 150px !important;
    height: 48px !important;
    max-height: 48px !important;
    padding: 4px 6px !important;
  }
}

@media (max-width: 430px) {
  .stats { grid-template-columns: minmax(0,1fr); }
  .topbar-buy-button { max-width: 104px; overflow: hidden; text-overflow: ellipsis; }
}

/* True-mobile booking layer loaded before this file uses a square tenant logo.
   Override it so horizontal venue marks remain legible without making square marks oversized. */
html.mobile-device .booking-logo {
  width: auto !important;
  max-width: 150px !important;
  height: 48px !important;
  max-height: 48px !important;
  padding: 4px 6px !important;
  object-fit: contain !important;
}


/* Courtiva brand token unification + circle/honeycomb decor */

:root {
  --brand-primary: var(--courtiva-navy-900);
  --brand-secondary: var(--courtiva-green-600);
  --brand-accent: var(--courtiva-lime-500);
  --secondary: var(--brand-secondary);
  --accent: var(--brand-accent);
  --accent-strong: #b7ef45;
  --primary-soft: #edf3ff;
  --secondary-soft: #eaf8f1;
  --accent-soft: #f4ffd9;
  --theme-honeycomb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='138' viewBox='0 0 160 138'%3E%3Cg fill='none' stroke='%2300a55a' stroke-opacity='.14' stroke-width='2'%3E%3Cpath d='M40 2 74 22v40L40 82 6 62V22Zm80 0 34 20v40l-34 20-34-20V22Zm-40 54 34 20v40l-34 20-34-20V76Z'/%3E%3C/g%3E%3C/svg%3E");
}

html, body {
  background-color: var(--courtiva-page);
}

.owner-body,
.admin-body,
.guest-body,
.public-body,
.marketing-body {
  position: relative;
  isolation: isolate;
}

.owner-body::before,
.admin-body::before,
.guest-body::before,
.public-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(circle at 8% 10%, color-mix(in srgb, var(--brand-accent) 18%, transparent) 0, transparent 20%),
    radial-gradient(circle at 92% 14%, color-mix(in srgb, var(--brand-secondary) 12%, transparent) 0, transparent 18%),
    radial-gradient(circle at 88% 88%, color-mix(in srgb, var(--brand-primary) 8%, transparent) 0, transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.72));
}

.owner-body::after,
.admin-body::after,
.guest-body::after,
.public-body::after {
  content: "";
  position: fixed;
  top: -20px;
  right: -12px;
  width: min(36vw, 360px);
  height: min(32vw, 280px);
  z-index: -1;
  pointer-events: none;
  opacity: .6;
  background-image: var(--theme-honeycomb);
  background-size: 190px 164px;
  background-repeat: repeat;
  filter: saturate(1.05);
  mask-image: linear-gradient(135deg, #000 50%, transparent 100%);
  -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 100%);
}

.app-shell,
.public-shell,
.guest-shell,
.marketing-site,
.marketing-body > * {
  position: relative;
  z-index: 1;
}

.topbar,
.public-shell,
.auth-card,
.marketing-header.is-scrolled {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.page-head h1,
.admin-page-head h1,
.auth-card h1,
.auth-card h2,
.public-booking-shell h1,
.customer-account-hero h1 {
  color: var(--brand-primary);
}

.eyebrow,
.card-kicker,
.breadcrumb,
.public-hero-copy .eyebrow,
.customer-account-hero .eyebrow {
  color: var(--brand-secondary);
}

.button:not(.secondary):not(.danger),
.status-pill.status-success,
.mobile-booking-bar .button,
.public-hero-actions .button,
.customer-account-actions .button:not(.secondary) {
  background: linear-gradient(135deg, var(--brand-primary), color-mix(in srgb, var(--brand-secondary) 68%, var(--brand-primary)));
  border-color: transparent;
  color: #fff;
}

.button.secondary,
.public-hero-actions .button.secondary,
.customer-account-actions .button.secondary {
  color: var(--brand-primary);
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border));
  background:
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(255,255,255,.9)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-accent) 18%, transparent), transparent 28%);
}
.button.secondary:hover {
  background:
    linear-gradient(180deg, rgba(255,255,255,1), rgba(246,249,255,.96)),
    radial-gradient(circle at 0% 0%, color-mix(in srgb, var(--brand-accent) 22%, transparent), transparent 32%);
}

.card,
.auth-card,
.booking-stage,
.court-picker-section,
.optional-booking-options,
.details-card,
.stats article,
.customer-booking-card,
.table-wrap {
  position: relative;
  overflow: clip;
}
.card::before,
.auth-card::before,
.booking-stage::before,
.customer-booking-card::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--brand-accent) 16%, transparent), transparent 68%);
  transform: translate(-42%, -42%);
  pointer-events: none;
}
.card::after,
.auth-card::after,
.booking-stage::after,
.customer-booking-card::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 110px;
  height: 96px;
  background-image: var(--theme-honeycomb);
  background-size: 150px 129px;
  background-repeat: no-repeat;
  opacity: .24;
  transform: translate(22%, 26%);
  pointer-events: none;
}

.dashboard-hero,
.customer-account-hero,
.booking-visual-hero,
.final-cta {
  position: relative;
  overflow: hidden;
}
.dashboard-hero::before,
.customer-account-hero::before,
.booking-visual-hero::before {
  content: "";
  position: absolute;
  right: -90px;
  top: -70px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(152,223,50,.28), transparent 66%);
}
.dashboard-hero::after,
.customer-account-hero::after,
.booking-visual-hero::after {
  content: "";
  position: absolute;
  inset: auto 24px 18px auto;
  width: 180px;
  height: 130px;
  background-image: var(--theme-honeycomb);
  background-size: 180px 155px;
  background-repeat: no-repeat;
  opacity: .18;
}

.status-pill,
.booking-link,
.subscription-badge,
.plan-chip,
.metric-icon,
.empty-illustration,
.customer-booking-date {
  box-shadow: 0 10px 26px rgba(0,31,95,.08);
}

.form-section legend > span,
.step-badge,
.booking-date-tile,
.metric-icon,
.empty-illustration,
.customer-booking-date {
  background: linear-gradient(180deg, var(--primary-soft), #fff);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 10%, var(--border));
}

.public-body .alert.success,
.owner-body .alert.success,
.admin-body .alert.success,
.guest-body .alert.success {
  border-color: color-mix(in srgb, var(--brand-secondary) 24%, var(--border));
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand-secondary) 8%, #fff), #fff);
}

.public-body .alert.error,
.owner-body .alert.error,
.admin-body .alert.error,
.guest-body .alert.error {
  border-color: color-mix(in srgb, #d64352 22%, var(--border));
}

@media (max-width: 900px) {
  .owner-body::after,
  .admin-body::after,
  .guest-body::after,
  .public-body::after {
    width: 220px;
    height: 180px;
    opacity: .42;
  }

  .dashboard-hero::after,
  .customer-account-hero::after,
  .booking-visual-hero::after,
  .card::after,
  .auth-card::after,
  .booking-stage::after,
  .customer-booking-card::after {
    opacity: .12;
  }
}

@media (prefers-reduced-motion: reduce) {
  .owner-body::before,
  .owner-body::after,
  .admin-body::before,
  .admin-body::after,
  .guest-body::before,
  .guest-body::after,
  .public-body::before,
  .public-body::after,
  .dashboard-hero::before,
  .dashboard-hero::after,
  .customer-account-hero::before,
  .customer-account-hero::after,
  .booking-visual-hero::before,
  .booking-visual-hero::after,
  .card::before,
  .card::after,
  .auth-card::before,
  .auth-card::after,
  .booking-stage::before,
  .booking-stage::after,
  .customer-booking-card::before,
  .customer-booking-card::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---- Courtiva modern owner + booking refinement (2026-08-08) ---- */
.owner-body {
  --owner-green-deep: color-mix(in srgb, var(--secondary) 58%, #062d20);
  --owner-green-dark: color-mix(in srgb, var(--secondary) 36%, #082a22);
  --owner-lime-soft: color-mix(in srgb, var(--accent) 16%, #fff);
  --owner-green-soft: color-mix(in srgb, var(--secondary) 9%, #fff);
  --bg: color-mix(in srgb, var(--secondary) 3%, #f7faf7);
  --surface-muted: color-mix(in srgb, var(--secondary) 3%, #f8fbf9);
}
.owner-body .sidebar {
  background:
    radial-gradient(circle at 15% -8%, color-mix(in srgb, var(--accent) 24%, transparent), transparent 28%),
    linear-gradient(165deg, var(--owner-green-deep) 0%, var(--owner-green-dark) 100%);
  border-right-color: color-mix(in srgb, var(--accent) 12%, transparent);
}
.owner-body .workspace-avatar { color: #17301e; background: var(--accent); }
.owner-body .nav-link.active {
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--secondary) 26%, transparent));
  box-shadow: inset 3px 0 0 var(--accent);
}
.owner-body .booking-link {
  color: #f4ffe7;
  background: color-mix(in srgb, var(--secondary) 42%, transparent);
  border-color: color-mix(in srgb, var(--accent) 22%, transparent);
}
.owner-body .topbar {
  background: color-mix(in srgb, #fff 92%, var(--owner-green-soft));
  box-shadow: 0 5px 24px color-mix(in srgb, var(--secondary) 9%, transparent);
}
.owner-body .button:not(.secondary):not(.danger):not(.warning) {
  background: linear-gradient(135deg, var(--secondary), color-mix(in srgb, var(--secondary) 72%, var(--primary)));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--secondary) 24%, transparent);
}
.owner-body .button:not(.secondary):not(.danger):not(.warning):hover {
  box-shadow: 0 14px 30px color-mix(in srgb, var(--secondary) 30%, transparent);
}
.owner-body .button.secondary {
  color: color-mix(in srgb, var(--primary) 74%, var(--secondary));
  border-color: color-mix(in srgb, var(--secondary) 20%, var(--border));
  background: #fff;
}
.owner-body .button.secondary:hover { background: var(--owner-green-soft); }
.owner-body .content::before {
  content: "";
  position: fixed;
  z-index: -1;
  width: 420px;
  height: 420px;
  right: 3vw;
  top: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 9%, transparent), transparent 68%);
  pointer-events: none;
}

/* Dashboard: use the whole brand palette without a blue-heavy surface. */
.owner-dashboard-compact { gap: .85rem; }
.compact-dashboard-header {
  position: relative;
  overflow: hidden;
  padding: 1.15rem 1.25rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 15%, var(--border));
  border-radius: 20px;
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--secondary) 9%, #fff), #fff 52%, color-mix(in srgb, var(--accent) 10%, #fff));
}
.compact-dashboard-header::after {
  content: "";
  position: absolute;
  width: 170px;
  height: 170px;
  right: -55px;
  top: -70px;
  border: 22px solid color-mix(in srgb, var(--accent) 25%, transparent);
  border-radius: 50%;
  pointer-events: none;
}
.dashboard-category-bar { padding: .65rem .8rem; border-color: color-mix(in srgb, var(--secondary) 14%, var(--border)); }
.dashboard-category-tabs button.active,
.dashboard-category-tabs button[aria-selected="true"] {
  background: var(--owner-green-soft);
  color: var(--secondary);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--secondary) 16%, transparent);
}
.compact-metric-grid { gap: .65rem; }
.compact-metric {
  min-height: 108px;
  padding: .9rem 1rem;
  border-top: 3px solid var(--primary);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--primary) 2.5%, #fff));
}
.compact-metric:nth-child(3n+2) { border-top-color: var(--secondary); background: linear-gradient(180deg, #fff, var(--owner-green-soft)); }
.compact-metric:nth-child(3n) { border-top-color: var(--accent); background: linear-gradient(180deg, #fff, var(--owner-lime-soft)); }
.compact-metric.attention {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--border));
  border-top-color: var(--accent);
  background: linear-gradient(180deg, #fff, color-mix(in srgb, var(--accent) 18%, #fff));
}
.compact-action-card,
.compact-upcoming-card { padding: .9rem 1rem; }
.verification-card { padding: .7rem .75rem; background: color-mix(in srgb, var(--secondary) 4%, #fff); }
.verification-time { background: color-mix(in srgb, var(--accent) 18%, #fff); }

/* Court inventory: visual, editable court boxes. */
.court-page-head { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.court-count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 13px;
  border-radius: 999px;
  background: var(--owner-green-soft);
  color: var(--secondary);
  font-size: .76rem;
  font-weight: 900;
}
.court-create-panel { margin-bottom: 1.15rem; }
.court-inventory-section { display: grid; gap: .85rem; }
.court-inventory-heading { display: flex; align-items: end; justify-content: space-between; gap: 1rem; }
.court-inventory-heading h2 { margin: .15rem 0 0; }
.court-inventory-heading p { max-width: 520px; margin: 0; color: var(--muted); font-size: .82rem; text-align: right; }
.owner-court-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 1rem; }
.owner-court-card {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--secondary) 12%, var(--border));
  border-radius: 20px;
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}
.owner-court-card.is-inactive { opacity: .78; }
.owner-court-card.is-maintenance { border-color: color-mix(in srgb, var(--accent) 48%, var(--border)); }
.owner-court-media { position: relative; height: 180px; overflow: hidden; background: linear-gradient(135deg, var(--owner-green-deep), var(--secondary)); }
.owner-court-media img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .35s ease; }
.owner-court-card:hover .owner-court-media img { transform: scale(1.035); }
.owner-court-media-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 38%, rgba(5,31,23,.48)); }
.owner-court-placeholder { height: 100%; display: grid; place-items: center; align-content: center; gap: .4rem; color: #fff; background: radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 36%, transparent), transparent 24%); }
.owner-court-placeholder span { display: grid; place-items: center; width: 62px; height: 62px; border-radius: 18px; border: 2px solid rgba(255,255,255,.5); font-weight: 950; }
.owner-court-placeholder small { color: rgba(255,255,255,.78); }
.owner-court-type,
.owner-court-status { position: absolute; top: 12px; padding: 6px 9px; border-radius: 999px; font-size: .65rem; font-weight: 900; backdrop-filter: blur(10px); }
.owner-court-type { left: 12px; color: #fff; background: rgba(8,39,28,.68); }
.owner-court-status { right: 12px; color: #17301e; background: color-mix(in srgb, var(--accent) 82%, #fff); }
.owner-court-content { padding: 1rem; }
.owner-court-title-row { display: flex; justify-content: space-between; gap: 1rem; align-items: start; }
.owner-court-title-row > div:first-child { min-width: 0; }
.owner-court-title-row span,
.owner-court-title-row small { color: var(--muted); font-size: .7rem; }
.owner-court-title-row h3 { margin: .18rem 0 .1rem; font-size: 1.22rem; }
.owner-court-price { display: grid; justify-items: end; flex: 0 0 auto; }
.owner-court-price strong { color: var(--secondary); font-size: 1.05rem; }
.owner-court-price span { color: var(--muted); font-size: .67rem; }
.owner-court-content > p { min-height: 40px; margin: .75rem 0; color: var(--muted); font-size: .78rem; }
.owner-court-facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.owner-court-facts span { padding: 6px 8px; border-radius: 9px; background: var(--surface-muted); color: var(--muted); font-size: .68rem; }
.owner-court-facts b { color: var(--text); }
.owner-court-actions { display: grid; grid-template-columns: 1fr auto; gap: .5rem; margin-top: .9rem; padding-top: .85rem; border-top: 1px solid var(--line); }
.owner-court-actions details > summary { width: 100%; list-style: none; cursor: pointer; }
.owner-court-actions details > summary::-webkit-details-marker { display: none; }
.court-edit-panel[open] { grid-column: 1 / -1; }
.court-edit-panel[open] > summary { margin-bottom: .7rem; }
.court-edit-form { padding: .9rem; border-radius: 14px; background: var(--surface-muted); }
.court-edit-form textarea { min-height: 82px; }
.court-edit-submit { display: flex; justify-content: flex-end; }
.court-status-panel { position: relative; }
.court-status-panel .compact-form { position: absolute; z-index: 20; right: 0; top: calc(100% + 7px); width: 260px; padding: .75rem; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); box-shadow: var(--shadow); }
.court-status-panel:not([open]) .compact-form { display: none; }

/* Bookings: denser operations cards with the important actions still visible. */
.booking-filter-bar { grid-template-columns: minmax(160px,.8fr) minmax(190px,1fr) auto; padding: .8rem .9rem; }
.booking-filter-bar label { gap: 4px; }
.manual-booking-panel > summary { min-height: 58px; padding-block: .8rem; }
.booking-mobile-list { gap: .65rem; }
.booking-operation-card { padding: .8rem .9rem; }
.booking-operation-top h2 { font-size: 1rem; }
.booking-operation-top p { font-size: .76rem; }
.booking-operation-price strong { font-size: .96rem; }
.booking-operation-schedule { display: flex; flex-wrap: wrap; gap: .4rem; margin: .65rem 0; }
.booking-operation-schedule > div { min-width: 0; flex: 1 1 150px; padding: .48rem .6rem; border-radius: 10px; }
.booking-operation-schedule span { font-size: .61rem; }
.booking-operation-schedule strong { font-size: .76rem; }
.booking-primary-action { margin: .55rem 0; }
.booking-more-actions { padding-top: .55rem; }
.booking-payment-review-panel { margin-top: .65rem; padding: .8rem; gap: .7rem; border-radius: 14px; background: var(--owner-green-soft); }
.booking-payment-review-details { gap: .6rem; }
.booking-payment-review-details span { font-size: .7rem; }
.booking-payment-review-actions { gap: .6rem; }

/* Availability: compact editor and schedule board. */
.hours-layout { grid-template-columns: minmax(0,1fr) 260px; gap: .8rem; }
.business-hours-creator > .card-head { margin-top: .6rem; }
.business-hours-creator > form { padding: .9rem; }
.form-section { padding: .8rem !important; margin-bottom: .7rem !important; }
.scope-options { gap: .5rem !important; }
.scope-option { min-height: 72px; padding: .65rem !important; }
.day-selector { gap: .4rem !important; }
.day-chip span { min-height: 60px !important; padding: .55rem .35rem !important; }
.hours-guide { padding: .9rem; }
.hours-guide .guide-visual { min-height: 80px; transform: scale(.72); transform-origin: center; margin: -18px 0 -10px; }
.hours-guide h2 { font-size: 1rem; margin-bottom: .4rem; }
.hours-guide > p,
.hours-guide .priority-list small,
.hours-guide .guide-note p { font-size: .72rem; }
.priority-list { gap: .45rem !important; }
.week-overview > .card-head { padding: .9rem 1rem; }
.week-board-row { min-height: 0 !important; }
.week-board-row > div { padding: .58rem .5rem !important; }
.schedule-time { padding: .45rem .55rem !important; }

/* Reports: real operating + commercial detail without wasting space. */
.report-toolbar { display: grid; grid-template-columns: minmax(320px,.7fr) minmax(420px,1fr); gap: .7rem; align-items: end; margin-bottom: .75rem; }
.report-presets { margin: 0; }
.report-date-form { margin: 0; padding: .65rem .75rem; }
.report-signal-strip {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 1px;
  overflow: hidden;
  margin-bottom: .75rem;
  border: 1px solid color-mix(in srgb, var(--secondary) 15%, var(--border));
  border-radius: 15px;
  background: var(--border);
}
.report-signal-strip > div { display: grid; gap: .15rem; padding: .7rem .8rem; background: var(--surface); }
.report-signal-strip span { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; }
.report-signal-strip strong { font-size: .82rem; }
.report-signal-strip .positive { color: var(--secondary); }
.report-signal-strip .negative { color: var(--danger); }
.report-kpi-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: .65rem; }
.report-kpi { min-height: 118px; padding: .85rem .9rem; }
.report-kpi strong { font-size: 1.35rem; }
.report-kpi.primary { background: linear-gradient(145deg, var(--owner-green-deep), color-mix(in srgb, var(--secondary) 72%, #082c23)); }
.report-kpi.accent { background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 48%, #fff), color-mix(in srgb, var(--accent) 16%, #fff)); border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.report-kpi.accent strong { color: color-mix(in srgb, var(--primary) 55%, #16331f); }
.report-insight-grid { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(300px,.8fr); gap: .75rem; margin-bottom: .75rem; }
.three-column-report-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.report-activity-card,
.report-breakdown-card,
.report-finance-card,
.report-customer-card,
.court-performance-card { padding: .9rem 1rem; }
.report-breakdown-list { display: grid; }
.report-breakdown-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .1rem .7rem; align-items: center; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.report-breakdown-list > div:last-child { border-bottom: 0; }
.report-breakdown-list span { color: var(--text); font-size: .76rem; font-weight: 750; }
.report-breakdown-list strong { font-size: .8rem; }
.report-breakdown-list small { grid-column: 1 / -1; color: var(--muted); font-size: .66rem; }
.finance-detail-list { display: grid; gap: .25rem; }
.finance-detail-list > div { display: flex; justify-content: space-between; gap: .8rem; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.finance-detail-list span { color: var(--muted); font-size: .74rem; }
.finance-detail-list strong { font-size: .8rem; }
.enhanced-court-report-list article { padding: .68rem 0; }
.enhanced-court-report-list small { color: var(--muted); font-size: .66rem; }
.top-customer-list { display: grid; }
.top-customer-list article { display: grid; grid-template-columns: auto minmax(0,1fr) auto; gap: .65rem; align-items: center; padding: .62rem 0; border-bottom: 1px solid var(--line); }
.top-customer-list article:last-child { border-bottom: 0; }
.customer-rank { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; background: var(--owner-lime-soft); color: color-mix(in srgb, var(--primary) 50%, #233f25); font-size: .7rem; font-weight: 950; }
.top-customer-list article > div { display: grid; }
.top-customer-list article > div:last-child { text-align: right; }
.top-customer-list small { color: var(--muted); font-size: .66rem; }

/* Public booking: polished imagery + booking choices are never hidden. */
.booking-visual-hero {
  align-items: stretch;
  background:
    radial-gradient(circle at 8% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 26%),
    linear-gradient(145deg, color-mix(in srgb, var(--secondary) 6%, #fff), #fff);
}
.booking-photo-gallery { position: relative; grid-template-columns: minmax(0,1.6fr) minmax(150px,.8fr); grid-template-rows: 1fr 1fr; gap: .55rem; min-height: 430px; }
.booking-photo-gallery .gallery-photo { position: relative; margin: 0 !important; border-radius: 18px; box-shadow: 0 14px 34px rgba(7,39,31,.10); }
.booking-photo-gallery .gallery-photo-1 { grid-row: 1 / 3; }
.booking-photo-gallery .gallery-photo-2 { grid-column: 2; grid-row: 1; }
.booking-photo-gallery .gallery-photo-3 { grid-column: 2; grid-row: 2; }
.booking-photo-gallery img { width: 100%; height: 100%; object-fit: cover; object-position: center; }
.booking-photo-gallery figcaption { position: absolute; inset: auto 0 0; display: grid; gap: .12rem; padding: 3.5rem 1rem .9rem; color: #fff; background: linear-gradient(180deg, transparent, rgba(5,30,22,.75)); }
.booking-photo-gallery figcaption span { font-weight: 900; }
.booking-photo-gallery figcaption small { color: rgba(255,255,255,.78); }
.booking-gallery-count { position: absolute; right: 12px; bottom: 12px; z-index: 3; padding: 6px 9px; border-radius: 999px; color: #fff; background: rgba(5,31,23,.68); backdrop-filter: blur(10px); font-size: .66rem; font-weight: 850; }
.booking-photo-gallery.single-photo { display: block; min-height: 430px; }
.booking-photo-gallery.single-photo .gallery-photo { height: 430px; }
.booking-photo-gallery .gallery-placeholder { min-height: 430px; border-style: solid; background: linear-gradient(145deg, color-mix(in srgb, var(--secondary) 12%, #fff), color-mix(in srgb, var(--accent) 12%, #fff)); }
.booking-photo-gallery .gallery-placeholder img { width: 92px; height: 92px; object-fit: contain; }
.booking-options-always-visible { padding: 1rem 1rem .9rem; }
.booking-options-always-visible > .booking-options-header { display: flex; align-items: end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.booking-options-header h2 { margin: .2rem 0; }
.booking-options-header p { margin: 0; color: var(--muted); font-size: .8rem; }
.booking-options-always-visible .optional-booking-options-body { padding: 0; }
.booking-options-always-visible .customer-pricing-plan-grid { grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: .65rem; }
.booking-options-always-visible .customer-pricing-plan { min-height: 104px; padding: .85rem; }
.court-card-media { aspect-ratio: 16 / 9; height: auto; }
.court-card-media img { object-position: center; }

@media (max-width: 1100px) {
  .report-kpi-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .three-column-report-grid { grid-template-columns: 1fr 1fr; }
  .three-column-report-grid > :last-child { grid-column: 1 / -1; }
  .report-toolbar { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .court-page-head,
  .court-inventory-heading { align-items: flex-start; flex-direction: column; }
  .court-inventory-heading p { text-align: left; }
  .owner-court-grid { grid-template-columns: 1fr; }
  .owner-court-media { height: 165px; }
  .owner-court-actions { grid-template-columns: 1fr 1fr; }
  .court-status-panel .compact-form { position: fixed; left: 14px; right: 14px; bottom: 90px; top: auto; width: auto; }
  .hours-layout { grid-template-columns: 1fr; }
  .hours-guide { display: none; }
  .report-signal-strip { grid-template-columns: 1fr 1fr; }
  .report-insight-grid,
  .three-column-report-grid { grid-template-columns: 1fr; }
  .three-column-report-grid > :last-child { grid-column: auto; }
  .booking-photo-gallery,
  .booking-photo-gallery.single-photo { min-height: 260px; height: 260px; display: block; }
  .booking-photo-gallery > :not(:first-child) { display: none !important; }
  .booking-photo-gallery .gallery-photo:first-child { height: 260px; }
  .booking-options-always-visible > .booking-options-header { align-items: flex-start; flex-direction: column; }
  .booking-options-always-visible .customer-pricing-plan-grid { grid-template-columns: 1fr; }
}

/* ---- Brand-safe owner theme correction (2026-08-08b) ----
 * Custom venue colors are accents, not full-page paint. Avoid mixing arbitrary
 * tenant colors with a fixed green/blue hue: that produced muddy olive surfaces.
 */
.owner-body {
  --owner-ink: #232326;
  --owner-ink-strong: #17171a;
  --owner-muted: #6f7077;
  --owner-canvas: #f7f6f2;
  --owner-canvas-deep: #f1f0eb;
  --owner-surface: #ffffff;
  --owner-border: #e3e1da;
  --owner-border-strong: #d4d1c8;
  --owner-primary-soft: color-mix(in srgb, var(--primary) 7%, #fff);
  --owner-secondary-soft: color-mix(in srgb, var(--secondary) 8%, #fff);
  --owner-accent-soft: color-mix(in srgb, var(--accent) 11%, #fff);
  --owner-sidebar: color-mix(in srgb, #1a1a1e 91%, var(--primary));
  --owner-sidebar-deep: #17171a;

  /* Compatibility aliases used by the refreshed court/report components. */
  --owner-green-deep: var(--owner-sidebar);
  --owner-green-dark: var(--owner-sidebar-deep);
  --owner-green-soft: var(--owner-secondary-soft);
  --owner-lime-soft: var(--owner-accent-soft);

  --bg: var(--owner-canvas);
  --bg-deep: var(--owner-canvas-deep);
  --surface: var(--owner-surface);
  --surface-raised: var(--owner-surface);
  --surface-muted: #faf9f6;
  --surface-soft: #faf9f6;
  --text: var(--owner-ink);
  --text-strong: var(--owner-ink-strong);
  --muted: var(--owner-muted);
  --border: var(--owner-border);
  --border-strong: var(--owner-border-strong);
  --line: var(--owner-border);
  --primary-soft: var(--owner-primary-soft);
  --shadow-sm: 0 5px 18px rgba(24,24,27,.055);
  --shadow: 0 16px 42px rgba(24,24,27,.09);
  --shadow-lg: 0 28px 68px rgba(24,24,27,.13);
}

.owner-body::before {
  background:
    radial-gradient(circle at 86% 9%, color-mix(in srgb, var(--primary) 5%, transparent), transparent 21%),
    radial-gradient(circle at 12% 92%, color-mix(in srgb, var(--secondary) 4%, transparent), transparent 24%),
    linear-gradient(180deg, rgba(255,255,255,.3), rgba(255,255,255,.3));
}
.owner-body::after { display: none; }
.owner-body .main { background: var(--owner-canvas); }
.owner-body .content::before { display: none; }

/* Large decorative brand washes were fighting tenant palettes. Keep owner UI clean. */
.owner-body .card::before,
.owner-body .card::after,
.owner-body .booking-stage::before,
.owner-body .booking-stage::after,
.owner-body .customer-booking-card::before,
.owner-body .customer-booking-card::after { display: none; }

.owner-body .sidebar {
  background:
    radial-gradient(circle at 18% -8%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 28%),
    linear-gradient(180deg, var(--owner-sidebar) 0%, var(--owner-sidebar-deep) 100%);
  border-right: 1px solid rgba(255,255,255,.055);
  box-shadow: 14px 0 40px rgba(24,24,27,.06);
}
.owner-body .sidebar-collapse {
  color: rgba(255,255,255,.72);
  border-color: rgba(255,255,255,.1);
  background: rgba(255,255,255,.055);
}
.owner-body .sidebar-collapse:hover { color:#fff; background:rgba(255,255,255,.1); }
.owner-body .workspace-card {
  border-color: rgba(255,255,255,.09);
  background: rgba(255,255,255,.055);
}
.owner-body .workspace-avatar {
  color: var(--on-accent, #18181b);
  background: var(--accent);
  border-color: color-mix(in srgb, var(--accent) 58%, transparent);
}
.owner-body .workspace-copy strong { color:#fff; }
.owner-body .workspace-copy small { color:rgba(255,255,255,.58); }
.owner-body .workspace-status {
  background: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 15%, transparent);
}
.owner-body .nav-section-title {
  color: color-mix(in srgb, var(--secondary) 58%, #d8d8dd);
}
.owner-body .nav-link,
.owner-body .sidebar nav > a { color: rgba(255,255,255,.72); }
.owner-body .nav-link:hover,
.owner-body .sidebar nav > a:hover { color:#fff; background:rgba(255,255,255,.065); }
.owner-body .nav-link.active {
  color:#fff;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--primary) 24%, transparent), rgba(255,255,255,.055));
  box-shadow: inset 3px 0 0 var(--primary);
}
.owner-body .nav-link::after { background: var(--accent); }
.owner-body .booking-link {
  color:#fff;
  background: color-mix(in srgb, var(--secondary) 17%, rgba(255,255,255,.045));
  border-color: color-mix(in srgb, var(--secondary) 24%, rgba(255,255,255,.1));
  box-shadow:none;
}
.owner-body .booking-link .nav-icon { color: var(--accent); }
.owner-body .booking-link:hover {
  color:#fff;
  background: color-mix(in srgb, var(--secondary) 23%, rgba(255,255,255,.06));
}
.owner-body .owner-support-card {
  color:rgba(255,255,255,.72);
  border-color:rgba(255,255,255,.09);
  background:rgba(255,255,255,.045);
}
.owner-body .owner-support-card a { color:#fff; }

.owner-body .topbar {
  background: color-mix(in srgb, #fff 96%, transparent);
  border-bottom-color: var(--owner-border);
  box-shadow: 0 5px 22px rgba(24,24,27,.04);
}
.owner-body .breadcrumb { color: color-mix(in srgb, var(--primary) 78%, var(--owner-ink)); }
.owner-body .profile-avatar {
  color: var(--on-accent, #18181b);
  background: var(--accent);
}
.owner-body .profile-copy strong { color: var(--owner-ink-strong); }
.owner-body .profile-copy small { color: var(--owner-muted); }

/* Primary / Secondary / Accent get distinct jobs instead of being blended together. */
.owner-body .button:not(.secondary):not(.danger):not(.warning) {
  color: var(--on-primary, #fff);
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 9px 22px color-mix(in srgb, var(--primary) 18%, transparent);
}
.owner-body .button:not(.secondary):not(.danger):not(.warning):hover {
  color: var(--on-primary, #fff);
  background: color-mix(in srgb, var(--primary) 90%, #000);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 22%, transparent);
}
.owner-body .button.secondary {
  color: var(--owner-ink-strong);
  background:#fff;
  border-color: color-mix(in srgb, var(--secondary) 38%, var(--owner-border));
  box-shadow: var(--shadow-sm);
}
.owner-body .button.secondary:hover {
  color: var(--owner-ink-strong);
  background: var(--owner-secondary-soft);
  border-color: color-mix(in srgb, var(--secondary) 54%, var(--owner-border));
}
.owner-body input:focus,
.owner-body select:focus,
.owner-body textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 12%, transparent);
}

/* Dashboard: neutral canvas, crisp cards, brand palette only where it carries meaning. */
.owner-body .owner-dashboard-compact { gap:.85rem; }
.owner-body .compact-dashboard-header {
  position:relative;
  overflow:hidden;
  padding:1.18rem 1.25rem 1.12rem;
  border:1px solid var(--owner-border);
  border-radius:18px;
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.owner-body .compact-dashboard-header::before {
  content:"";
  position:absolute;
  inset:0 0 auto;
  height:4px;
  background:linear-gradient(90deg, var(--primary) 0 48%, var(--secondary) 48% 79%, var(--accent) 79% 100%);
}
.owner-body .compact-dashboard-header::after {
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  right:-95px;
  top:-105px;
  border-radius:50%;
  background:color-mix(in srgb, var(--accent) 8%, transparent);
  border:1px solid color-mix(in srgb, var(--accent) 15%, transparent);
  pointer-events:none;
}
.owner-body .compact-dashboard-header .eyebrow { color:var(--secondary); }
.owner-body .compact-dashboard-header h1 { color:var(--owner-ink-strong); }
.owner-body .compact-dashboard-header p { color:var(--owner-muted); }
.owner-body .compact-header-actions { position:relative; z-index:1; }

.owner-body .dashboard-category-bar {
  padding:.55rem .65rem;
  border:1px solid var(--owner-border);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.owner-body .dashboard-category-tabs button { color:var(--owner-muted); }
.owner-body .dashboard-category-tabs button.active,
.owner-body .dashboard-category-tabs button[aria-selected="true"] {
  color:var(--on-primary, #fff);
  background:var(--primary);
  border-color:var(--primary);
  box-shadow:none;
}
.owner-body .dashboard-category-tabs button.active:hover,
.owner-body .dashboard-category-tabs button[aria-selected="true"]:hover { color:var(--on-primary, #fff); }

.owner-body .compact-metric-grid { gap:.65rem; }
.owner-body .compact-metric,
.owner-body .compact-metric:nth-child(3n+2),
.owner-body .compact-metric:nth-child(3n),
.owner-body .compact-metric.attention {
  min-height:104px;
  padding:.88rem 1rem;
  border:1px solid var(--owner-border);
  border-top:3px solid var(--primary);
  background:#fff;
  box-shadow:var(--shadow-sm);
}
.owner-body .compact-metric:nth-child(3n+2) { border-top-color:var(--secondary); }
.owner-body .compact-metric:nth-child(3n) { border-top-color:var(--accent); }
.owner-body .compact-metric:nth-child(4n) { border-top-color:color-mix(in srgb, var(--primary) 62%, var(--secondary)); }
.owner-body .compact-metric.attention {
  border-color:var(--owner-border);
  border-top-color:var(--secondary);
}
.owner-body .compact-metric span,
.owner-body .compact-metric small { color:var(--owner-muted); }
.owner-body .compact-metric strong { color:var(--owner-ink-strong); }

.owner-body .compact-action-card,
.owner-body .compact-upcoming-card {
  border-color:var(--owner-border);
  background:#fff;
}
.owner-body .verification-card {
  border:1px solid var(--owner-border);
  border-left:3px solid var(--secondary);
  background:#fff;
}
.owner-body .verification-time { background:var(--owner-accent-soft); }
.owner-body .verification-card .success-icon,
.owner-body .verification-card > span:first-child { color:var(--on-secondary, #18181b); background:var(--secondary); }

/* Common cards and report/court components inherit neutral surfaces. */
.owner-body .card,
.owner-body .owner-court-card,
.owner-body .report-kpi,
.owner-body .report-activity-card,
.owner-body .report-breakdown-card,
.owner-body .report-finance-card,
.owner-body .report-customer-card,
.owner-body .court-performance-card {
  border-color:var(--owner-border);
}
.owner-body .owner-court-media {
  background:linear-gradient(135deg, color-mix(in srgb, var(--primary) 86%, #17171a), color-mix(in srgb, var(--secondary) 58%, #17171a));
}
.owner-body .owner-court-placeholder {
  background:radial-gradient(circle at 25% 20%, color-mix(in srgb, var(--accent) 20%, transparent), transparent 28%);
}
.owner-body .owner-court-price strong { color:var(--primary); }
.owner-body .court-count-pill {
  color:var(--owner-ink-strong);
  background:var(--owner-secondary-soft);
  border:1px solid color-mix(in srgb, var(--secondary) 22%, var(--owner-border));
}
.owner-body .report-signal-strip { border-color:var(--owner-border); background:var(--owner-border); }
.owner-body .report-signal-strip .positive { color:var(--primary); }
.owner-body .report-kpi.primary {
  color:var(--owner-ink-strong);
  background:#fff;
  border-top:3px solid var(--primary);
}
.owner-body .report-kpi.primary span,
.owner-body .report-kpi.primary small { color:var(--owner-muted); }
.owner-body .report-kpi.primary strong { color:var(--owner-ink-strong); }
.owner-body .report-kpi.accent {
  background:#fff;
  border-color:var(--owner-border);
  border-top:3px solid var(--accent);
}
.owner-body .report-kpi.accent strong { color:var(--owner-ink-strong); }
.owner-body .customer-rank { color:var(--owner-ink-strong); background:var(--owner-accent-soft); }

/* Theme settings now show three independent palette roles. */
.owner-body .brand-color-card {
  grid-template-columns:repeat(3,minmax(0,1fr));
  align-items:end;
}
.owner-body .brand-color-card label {
  grid-template-columns:1fr;
  gap:7px;
  min-width:0;
}
.owner-body .brand-color-card input[type="color"] {
  width:100%;
  height:44px;
  padding:4px;
}

/* Mobile navigation should not reintroduce a blue-tinted shadow. */
@media (max-width:980px) {
  .owner-body .mobile-owner-nav {
    border-top-color:var(--owner-border);
    background:color-mix(in srgb, #fff 95%, transparent);
    box-shadow:0 -10px 30px rgba(24,24,27,.09);
  }
  .owner-body .mobile-owner-nav .active {
    color:var(--owner-ink-strong);
    background:var(--owner-primary-soft);
  }
}
@media (max-width:720px) {
  .owner-body .brand-color-card { grid-template-columns:1fr; }
}

/* Dark mode remains neutral and lets the venue palette act as accents. */
html[data-theme="dark"] .owner-body {
  --owner-ink:#e8e7e3;
  --owner-ink-strong:#fff;
  --owner-muted:#aaa9a4;
  --owner-canvas:#141416;
  --owner-canvas-deep:#101012;
  --owner-surface:#1b1b1e;
  --owner-border:#2d2d31;
  --owner-border-strong:#3a3a3f;
  --surface-muted:#202024;
  --surface-soft:#202024;
}
html[data-theme="dark"] .owner-body .topbar,
html[data-theme="dark"] .owner-body .compact-dashboard-header,
html[data-theme="dark"] .owner-body .dashboard-category-bar,
html[data-theme="dark"] .owner-body .compact-metric,
html[data-theme="dark"] .owner-body .compact-action-card,
html[data-theme="dark"] .owner-body .compact-upcoming-card,
html[data-theme="dark"] .owner-body .verification-card,
html[data-theme="dark"] .owner-body .button.secondary,
html[data-theme="dark"] .owner-body .report-kpi.primary,
html[data-theme="dark"] .owner-body .report-kpi.accent { background:var(--owner-surface); }

/* ---- High-contrast sidebar brand lockup (2026-08-08c) ----
 * The original navy wordmark disappears on dark owner/admin navigation.
 * Keep the full-color mark on a light tile and render the product name as live
 * high-contrast text so it stays legible at every sidebar width and DPI.
 */
.owner-body .sidebar .sidebar-brand-lockup,
.admin-body .sidebar .sidebar-brand-lockup {
  display: flex;
  align-items: center;
  gap: 9px;
  width: auto;
  max-width: 100%;
  min-width: 0;
  height: 46px;
  overflow: visible;
}
.sidebar-brand-symbol {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  padding: 3px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 18px rgba(0,0,0,.13);
}
.sidebar-brand-symbol img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.sidebar-brand-name {
  min-width: 0;
  color: #ffffff;
  font-size: 1.55rem;
  line-height: 1;
  font-weight: 850;
  letter-spacing: -.055em;
  white-space: nowrap;
  text-shadow: 0 1px 1px rgba(0,0,0,.14);
}
.owner-body .sidebar .brand:hover .sidebar-brand-name,
.admin-body .sidebar .brand:hover .sidebar-brand-name { color: #fff; }
.owner-body .sidebar .brand-logo-icon,
.admin-body .sidebar .brand-logo-icon {
  padding: 3px;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 7px 18px rgba(0,0,0,.13);
}
body.sidebar-collapsed.owner-body .sidebar .sidebar-brand-lockup,
body.sidebar-collapsed.admin-body .sidebar .sidebar-brand-lockup { display: none; }

@media (max-width: 980px) {
  body.sidebar-collapsed.owner-body .sidebar .sidebar-brand-lockup,
  body.sidebar-collapsed.admin-body .sidebar .sidebar-brand-lockup { display: flex; }
  body.sidebar-collapsed.owner-body .sidebar .brand-logo-icon,
  body.sidebar-collapsed.admin-body .sidebar .brand-logo-icon { display: none; }
}



/* ---- Public booking sequence + compact court cards (2026-08-08c) ----
 * Pricing is a required first decision because it controls court eligibility.
 * Court cards use compact horizontal thumbnails so a single court never turns
 * into a full-width 16:9 billboard.
 */
#pricingPlanPickerSection {
  scroll-margin-top: 18px;
}
#courtPickerSection {
  scroll-margin-top: 18px;
}
#courtPickerSection[hidden] {
  display: none !important;
}
.booking-options-always-visible .customer-pricing-plan {
  cursor: pointer;
}
.booking-options-always-visible .customer-pricing-plan:not(.selected):hover {
  border-color: color-mix(in srgb, var(--primary) 34%, var(--border));
  transform: translateY(-1px);
}
.court-card-grid {
  grid-template-columns: repeat(auto-fill, minmax(360px, 460px));
  align-items: stretch;
  justify-content: start;
  gap: 12px;
}
.court-choice-card {
  display: grid;
  grid-template-columns: 148px minmax(0, 1fr);
  min-height: 172px;
  border-radius: 18px;
}
.court-card-media {
  width: 148px;
  height: 100%;
  min-height: 172px;
  aspect-ratio: auto;
}
.court-card-media img {
  min-width: 100%;
  min-height: 100%;
}
.court-card-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 14px;
}
.court-title-row {
  gap: 10px;
}
.court-title-row h3 {
  font-size: 1rem;
}
.court-rate strong {
  font-size: .88rem;
}
.court-card-body > p {
  min-height: 0;
  margin: 8px 0;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  font-size: .73rem;
  line-height: 1.45;
}
.court-feature-row {
  gap: 5px;
  margin: auto 0 9px;
}
.court-feature-row span {
  padding: 4px 6px;
  font-size: .61rem;
}
.court-select-button {
  min-height: 38px;
  padding: 8px 11px;
  font-size: .72rem;
}
.court-availability-badge,
.court-type-badge {
  top: 9px;
  padding: 5px 7px;
  font-size: .58rem;
}
.court-availability-badge { left: 9px; }
.court-type-badge { right: 9px; }

@media (max-width: 760px) {
  .court-card-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    overflow: visible !important;
  }
  .court-choice-card,
  html.mobile-device .court-choice-card {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: 116px minmax(0, 1fr) !important;
    min-height: 150px !important;
  }
  .court-card-media,
  html.mobile-device .court-card-media {
    width: 116px !important;
    height: 100% !important;
    min-height: 150px !important;
    aspect-ratio: auto !important;
  }
  .court-card-body,
  html.mobile-device .court-card-body {
    padding: 11px !important;
  }
  .court-title-row {
    display: grid;
    gap: 5px;
  }
  .court-rate,
  html.mobile-device .court-rate {
    width: auto !important;
    justify-items: start !important;
    text-align: left !important;
  }
  .court-feature-row span:nth-child(n+3) {
    display: none;
  }
  /* Keep the selected booking plan visible throughout the public flow. */
  html.mobile-device body.booking-in-progress #pricingPlanPickerSection {
    display: block !important;
  }
}