@font-face {
    font-family: "Vazirmatn";
    src: url("fonts/Vazirmatn-Variable.woff2") format("woff2-variations");
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}

:root {
    color-scheme: light;
    --ink: #102a43;
    --ink-soft: #334e68;
    --text-primary: #f5f8fc;
    --text-secondary: #b7c6d9;
    --text-muted: #8fa3bd;
    --text-faint: #6e84a0;
    --text-muted-dark: #40576d;
    --aria-font-body: 1rem;
    --aria-font-control: .875rem;
    --aria-font-helper: .8125rem;
    --aria-font-mobile-nav: .75rem;
    --surface-canvas: #f4f7fb;
    --surface-card: #ffffff;
    --surface-soft: #f8fafc;
    --surface-deep: #07192f;
    --line: rgba(36, 64, 91, .10);
    --line-strong: rgba(27, 60, 89, .17);
    --brand: #087f8c;
    --brand-strong: #075f73;
    --brand-soft: rgba(8, 127, 140, .09);
    --gold: #d6a43b;
    --gold-light: #f5d77e;
    --success: #35d099;
    --success-dark: #16835f;
    --warning: #f6be4c;
    --danger: #d95663;
    --info: #4d8fce;
    --shadow-sm: 0 .35rem 1.25rem rgba(17, 47, 72, .055);
    --shadow-md: 0 1rem 2.8rem rgba(17, 47, 72, .09);
    --shadow-lg: 0 1.75rem 4.8rem rgba(12, 35, 57, .15);
    font-family: Vazirmatn, IRANSansX, "Segoe UI", Tahoma, Arial, sans-serif;
    font-synthesis: none;
    text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }

html {
    min-height: 100%;
    background: var(--surface-canvas);
    scroll-behavior: smooth;
    scrollbar-gutter: stable;
}

body {
    min-width: min(20rem, 100%);
    min-height: 100dvh;
    margin: 0;
    overflow-x: hidden;
    color: var(--ink);
    background:
        radial-gradient(circle at 8% 2%, rgba(32, 164, 173, .075), transparent 30rem),
        radial-gradient(circle at 88% 90%, rgba(219, 169, 61, .055), transparent 34rem),
        var(--surface-canvas);
    font-size: var(--aria-font-body);
    -webkit-font-smoothing: antialiased;
}

button,
input,
select,
textarea { font: inherit; }

button,
a {
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}

main,
section,
article,
form,
fieldset,
.panel,
.card,
.modal-body {
    min-width: 0;
}

img,
svg,
video,
canvas,
input,
select,
textarea { max-width: 100%; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 3px solid rgba(27, 119, 145, .2);
    outline-offset: 2px;
}

button:disabled,
input:disabled,
select:disabled,
textarea:disabled { opacity: .68; cursor: not-allowed; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .boot-orbit::before,
    .spinner,
    .skeleton::after { animation: none !important; }
}

h1,
h2,
h3,
h4,
p { margin-top: 0; }

h1,
h2,
h3 { letter-spacing: -.025em; }

h1 { margin-bottom: .5rem; font-size: clamp(1.25rem, 2.8vw, 1.85rem); line-height: 1.55; }
h2 { font-size: 1rem; }
h3 { font-size: .86rem; }

a { color: var(--brand); }

h1[tabindex="-1"]:focus,
h1:focus { outline: none; }

.app-icon { display: block; width: 1.25rem; height: 1.25rem; }

.boot-screen {
    position: fixed;
    z-index: 9999;
    inset: 0;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: .45rem;
    color: #edf5fb;
    background:
        radial-gradient(circle at 50% 35%, rgba(26, 109, 139, .35), transparent 26rem),
        #06182d;
}
.boot-screen strong { margin-top: .8rem; font-size: 1rem; }
.boot-screen small { color: #8fa5c0; font-size: .75rem; }
.boot-orbit { position: relative; display: grid; width: 5.25rem; height: 5.25rem; place-items: center; border: 1px solid rgba(238, 197, 96, .18); border-radius: 50%; }
.boot-orbit::before { position: absolute; width: .55rem; height: .55rem; content: ""; background: var(--gold-light); border-radius: 50%; box-shadow: 0 0 1rem rgba(242, 198, 86, .65); animation: orbit 1.6s linear infinite; transform-origin: 2.6rem 0; }
.boot-logo { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; color: #10273b; background: linear-gradient(145deg, #ffe59a, #ca8d24); border-radius: 1rem; font-size: 1.7rem; font-weight: 950; }
.boot-screen-timeout { padding: 1.5rem; text-align: center; }
.boot-screen-timeout .boot-orbit::before { animation-duration: 4s; }
.boot-screen-timeout small { max-width: 24rem; color: #f4cf78; font-size: .82rem; line-height: 1.9; }
.boot-recovery-actions { display: flex; width: min(100%, 24rem); flex-wrap: wrap; justify-content: center; gap: .65rem; margin-top: 1rem; }
.boot-recovery-button { min-height: 3rem; padding: .7rem 1rem; color: #edf5fb; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); border-radius: .9rem; font-family: inherit; font-size: .82rem; font-weight: 850; cursor: pointer; }
.boot-recovery-button.primary { color: #10273b; background: linear-gradient(145deg, #ffe59a, #ca8d24); border-color: transparent; }
.boot-recovery-button:focus-visible { outline: 3px solid rgba(255, 225, 143, .45); outline-offset: 3px; }
@keyframes orbit { to { transform: rotate(360deg); } }

.muted { color: var(--text-muted-dark); line-height: 1.95; }
.eyebrow { display: inline-flex; align-items: center; gap: .4rem; margin-bottom: .35rem; color: #9b6c13; font-size: .75rem; font-weight: 800; }
.eyebrow::before { width: 1.2rem; height: 1px; content: ""; background: linear-gradient(90deg, transparent, var(--gold)); }
.ltr { direction: ltr; text-align: left; }
.nowrap { white-space: nowrap; }
.money { direction: rtl; white-space: nowrap; font-variant-numeric: tabular-nums; }
.danger-text { color: var(--danger) !important; }
.success-text { color: var(--success-dark) !important; }
.warning-text { color: #a16b08 !important; }

.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.15rem;
}
.page-header h1 { margin-bottom: .2rem; color: var(--ink); }
.page-header p { max-width: 48rem; margin-bottom: 0; color: var(--text-muted-dark); font-size: .75rem; line-height: 1.9; }
.page-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }

.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.success-button,
.icon-text-button,
.period-button {
    display: inline-flex;
    min-height: 2.65rem;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: 0 .9rem;
    border-radius: .72rem;
    cursor: pointer;
    font-weight: 750;
    font-size: var(--aria-font-control);
    text-decoration: none;
    transition: transform .14s ease, filter .14s ease, background .14s ease, border-color .14s ease, box-shadow .14s ease;
}
.primary-button { color: #fff; background: linear-gradient(145deg, #1a7991, #10556f); border: 1px solid #0e5971; box-shadow: 0 .45rem 1.25rem rgba(15, 90, 116, .16); }
.primary-button.gold { color: #193044; background: linear-gradient(145deg, #f4d57c, #d6a23a); border-color: #d09a2c; }
.secondary-button { color: var(--brand-strong); background: var(--surface-card); border: 1px solid rgba(19, 99, 124, .2); }
.ghost-button { color: #50677c; background: transparent; border: 1px solid var(--line-strong); }
.danger-button { color: #fff; background: linear-gradient(145deg, #df6873, #bd3e4b); border: 1px solid #b83a47; }
.success-button { color: #fff; background: linear-gradient(145deg, #2eb887, #148462); border: 1px solid #16805f; }
.icon-text-button { color: #536b80; background: #f5f7f8; border: 1px solid var(--line); }
.primary-button:hover:not(:disabled),
.secondary-button:hover:not(:disabled),
.ghost-button:hover:not(:disabled),
.danger-button:hover:not(:disabled),
.success-button:hover:not(:disabled),
.icon-text-button:hover:not(:disabled),
.period-button:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.03); }
.primary-button.compact,
.secondary-button.compact,
.ghost-button.compact { min-height: 2.3rem; padding-inline: .75rem; font-size: .75rem; }
.button-icon { width: 1rem; height: 1rem; }

.surface-card,
.panel-card,
.metric-card,
.filter-card,
.form-card,
.empty-state,
.quick-stats,
.data-table-card,
.toolbar-card {
    background: rgba(255, 255, 255, .95);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
}

.surface-card,
.panel-card,
.form-card,
.filter-card,
.data-table-card,
.toolbar-card { border-radius: 1rem; }

.panel-card,
.form-card { padding: clamp(.9rem, 2vw, 1.15rem); }

.panel-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .8rem;
    padding-bottom: .75rem;
    border-bottom: 1px solid var(--line);
}
.panel-heading h2 { margin-bottom: .18rem; color: var(--ink); }
.panel-heading p { margin: 0; color: var(--text-muted-dark); font-size: .75rem; line-height: 1.8; }
.panel-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }

.cards-grid,
.metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .75rem;
}

.metric-card {
    position: relative;
    min-height: 8.2rem;
    padding: 1rem;
    overflow: hidden;
    border-radius: .95rem;
}
.metric-card::after { position: absolute; width: 5rem; height: 5rem; inset: auto auto -2.5rem -2rem; content: ""; background: radial-gradient(circle, rgba(23, 107, 130, .09), transparent 70%); border-radius: 50%; }
.metric-card > span,
.metric-card > small { position: relative; z-index: 1; display: block; color: var(--text-muted-dark); font-size: .75rem; }
.metric-card > strong { position: relative; z-index: 1; display: block; margin: .78rem 0 .48rem; color: var(--ink); font-size: clamp(.95rem, 1.7vw, 1.23rem); font-variant-numeric: tabular-nums; }
.metric-card.highlight { color: #fff; background: linear-gradient(145deg, #123e58, #0a293f); border-color: rgba(222, 178, 78, .35); box-shadow: 0 .9rem 2.4rem rgba(9, 42, 64, .18); }
.metric-card.highlight::after { background: radial-gradient(circle, rgba(229, 181, 72, .28), transparent 68%); }
.metric-card.highlight > span,
.metric-card.highlight > small { color: #a9bed0; }
.metric-card.highlight > strong { color: #f6d77e; }
.metric-card.positive > strong { color: var(--success-dark); }
.metric-card.negative > strong { color: var(--danger); }
.metric-icon { display: grid; width: 2.1rem; height: 2.1rem; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: .65rem; }

.quick-stats { display: grid; margin: .75rem 0; overflow: hidden; grid-template-columns: repeat(3, 1fr); border-radius: .95rem; }
.quick-stats > div { position: relative; padding: .85rem; text-align: center; }
.quick-stats > div + div::before { position: absolute; inset: 20% 0 20% auto; width: 1px; content: ""; background: var(--line); }
.quick-stats span,
.quick-stats strong { display: block; }
.quick-stats span { color: var(--text-muted-dark); font-size: .75rem; }
.quick-stats strong { margin-top: .28rem; color: var(--brand-strong); font-size: 1.05rem; }

.data-grid-layout {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}

/* Dashboard launchpad and premium motion */
.dashboard-launchpad { margin:1rem 0; padding:1rem; background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(247,250,252,.94)); border:1px solid var(--line); border-radius:1.15rem; box-shadow:var(--shadow-sm); animation:aria-rise .5s both; }
.launchpad-heading { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; margin-bottom:.9rem; }
.launchpad-heading h2 { margin:0 0 .16rem; color:var(--ink); font-size:1.02rem; }
.launchpad-heading p { margin:0; color:var(--text-muted-dark); font-size:.75rem; }
.launchpad-all { display:inline-flex; align-items:center; gap:.35rem; color:var(--brand-strong); text-decoration:none; font-size:.75rem; font-weight:750; }
.launchpad-all .app-icon { width:.75rem; transform:rotate(180deg); }
.launchpad-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
.launch-card { position:relative; display:flex; min-height:4.7rem; align-items:center; gap:.65rem; padding:.72rem; overflow:hidden; color:var(--ink); background:#fff; border:1px solid rgba(37,69,96,.095); border-radius:.9rem; box-shadow:0 .35rem 1.1rem rgba(16,47,74,.045); text-decoration:none; transition:transform .2s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .2s; }
.launch-card::after { position:absolute; inset:auto -2rem -3rem auto; width:5rem; height:5rem; content:""; background:radial-gradient(circle,rgba(13,121,142,.1),transparent 68%); border-radius:50%; }
.launch-card:hover { transform:translateY(-4px); border-color:rgba(13,119,140,.23); box-shadow:0 .85rem 2rem rgba(13,50,78,.1); }
.launch-card.accent { color:#f7fbff; background:linear-gradient(145deg,#123e59,#08293f); border-color:rgba(218,173,70,.3); }
.launch-card.accent::after { background:radial-gradient(circle,rgba(229,181,72,.3),transparent 68%); }
.launch-icon { position:relative; z-index:1; display:grid; width:2.35rem; height:2.35rem; flex:0 0 auto; place-items:center; color:var(--brand); background:var(--brand-soft); border-radius:.72rem; }
.launch-card.accent .launch-icon { color:#f5d478; background:rgba(237,190,83,.12); }
.launch-icon.danger { color:var(--danger); background:rgba(217,86,99,.09); }
.launch-icon.success { color:var(--success-dark); background:rgba(33,164,118,.09); }
.launch-card > span:nth-child(2) { position:relative; z-index:1; min-width:0; flex:1; }
.launch-card strong,.launch-card small { display:block; }
.launch-card strong { font-size:.75rem; }
.launch-card small { margin-top:.18rem; overflow:hidden; color:var(--text-muted-dark); font-size:.75rem; text-overflow:ellipsis; white-space:nowrap; }
.launch-card.accent small { color:#9eb5c8; }
.launch-card kbd { position:relative; z-index:1; align-self:flex-start; padding:.16rem .3rem; color:#8796a4; background:#f3f6f8; border:1px solid var(--line); border-radius:.35rem; font-family:inherit; font-size:.75rem; direction:ltr; }
.launch-card.accent kbd { color:#e8c976; background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.09); }
.dashboard-hero,.dashboard-metrics,.dashboard-quick-stats,.data-grid-layout { animation:aria-rise .48s both; }
.dashboard-metrics { animation-delay:.06s; }.dashboard-quick-stats { animation-delay:.1s; }.dashboard-launchpad { animation-delay:.14s; }.data-grid-layout { animation-delay:.18s; }
@keyframes aria-rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
@media (max-width:1100px){.launchpad-grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (max-width:620px){.launchpad-grid{grid-template-columns:1fr}.launchpad-heading{align-items:flex-start;flex-direction:column}.dashboard-launchpad{padding:.8rem}}
@media (prefers-reduced-motion:reduce){.dashboard-hero,.dashboard-metrics,.dashboard-quick-stats,.dashboard-launchpad,.data-grid-layout{animation:none}.launch-card,.nav-item{transition:none!important}}
.full-width { grid-column: 1 / -1; }

.period-tabs,
.segmented-control {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 1rem;
    padding: .26rem;
    overflow-x: auto;
    background: rgba(225, 231, 235, .76);
    border: 1px solid rgba(40, 70, 96, .08);
    border-radius: .78rem;
}
.period-button,
.segment-button { min-height: 2.15rem; padding: 0 .8rem; color: #6e8090; background: transparent; border: 0; border-radius: .58rem; white-space: nowrap; cursor: pointer; font-size: .75rem; }
.period-button.active,
.segment-button.active { color: var(--ink); background: #fff; box-shadow: 0 .18rem .65rem rgba(24, 52, 76, .09); font-weight: 800; }

.badge,
.status-badge,
.count-badge {
    display: inline-flex;
    min-height: 1.65rem;
    align-items: center;
    justify-content: center;
    gap: .28rem;
    padding: .18rem .48rem;
    color: #5b6f81;
    background: #edf1f4;
    border: 1px solid rgba(42, 69, 94, .07);
    border-radius: 2rem;
    font-size: .75rem;
    font-weight: 700;
    white-space: nowrap;
}
.badge.warning,
.status-badge.warning { color: #8a5a05; background: #fff5d9; border-color: #f5dfaa; }
.badge.success,
.status-badge.success { color: #117653; background: #e3f7ef; border-color: #c4ecdc; }
.badge.danger,
.status-badge.danger { color: #a3333e; background: #fdebed; border-color: #f5cbd0; }
.badge.info,
.status-badge.info { color: #296a9c; background: #e9f3fb; border-color: #cfe5f6; }

.feature-icon { display: grid; width: 3rem; height: 3rem; place-items: center; color: var(--brand); background: var(--brand-soft); border: 1px solid rgba(23, 107, 130, .1); border-radius: .9rem; }
.feature-icon.gold { color: #9d6c10; background: rgba(223, 172, 62, .13); border-color: rgba(213, 155, 38, .18); }
.feature-icon.danger { color: var(--danger); background: rgba(217, 86, 99, .09); border-color: rgba(217, 86, 99, .13); }

.module-hero {
    position: relative;
    display: flex;
    min-height: 11rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
    padding: clamp(1.15rem, 3vw, 1.8rem);
    overflow: hidden;
    color: #edf5fb;
    background:
        radial-gradient(circle at 8% 20%, rgba(222, 175, 69, .18), transparent 18rem),
        linear-gradient(125deg, #0d344e, #0a263d 65%, #071c31);
    border: 1px solid rgba(209, 168, 74, .2);
    border-radius: 1.15rem;
    box-shadow: 0 1rem 2.8rem rgba(8, 35, 55, .16);
}
.module-hero::after { position: absolute; inset: auto -3rem -7rem auto; width: 18rem; height: 18rem; content: ""; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; box-shadow: 0 0 0 3rem rgba(255,255,255,.025), 0 0 0 6rem rgba(255,255,255,.018); }
.module-hero > * { position: relative; z-index: 1; }
.module-hero h1 { margin-bottom: .25rem; color: #fff; }
.module-hero p { max-width: 42rem; margin: 0; color: #9db3c7; font-size: .75rem; line-height: 1.9; }
.hero-kicker { display: inline-flex; margin-bottom: .45rem; color: #f0ca6e; font-size: .75rem; font-weight: 800; }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }

.module-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .7rem;
}
.module-card {
    position: relative;
    display: flex;
    min-height: 8.8rem;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    overflow: hidden;
    color: var(--ink);
    background: var(--surface-card);
    border: 1px solid var(--line);
    border-radius: .95rem;
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.module-card:hover { transform: translateY(-2px); border-color: rgba(19, 107, 132, .22); box-shadow: var(--shadow-md); }
.module-card-copy { min-width: 0; flex: 1; }
.module-card h3 { margin: .1rem 0 .3rem; }
.module-card p { margin: 0; color: var(--text-muted-dark); font-size: .75rem; line-height: 1.8; }
.module-card .card-arrow { align-self: center; width: .9rem; color: #9ba8b4; transform: rotate(180deg); }

.filter-card,
.toolbar-card { margin-bottom: .75rem; padding: .72rem; }
.filters-grid,
.form-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.form-grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field { min-width: 0; }
.field.span-2 { grid-column: span 2; }
.field.span-full { grid-column: 1 / -1; }
.field label { display: block; margin: 0 0 .32rem; color: #546b7f; font-size: var(--aria-font-control); font-weight: 700; }
.field-hint { display: block; margin-top: .26rem; color: var(--text-muted-dark); font-size: var(--aria-font-helper); line-height: 1.7; }
.text-input,
.select-input,
.textarea-input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
    width: 100%;
    min-height: 2.55rem;
    padding: .5rem .68rem;
    color: var(--ink);
    background: #fbfcfd;
    border: 1px solid rgba(37, 67, 92, .14);
    border-radius: .65rem;
    outline: none;
    font-size: var(--aria-font-control);
    transition: border-color .14s ease, box-shadow .14s ease, background .14s ease;
}
.textarea-input,
.field textarea { min-height: 5rem; resize: vertical; }
.text-input:focus,
.select-input:focus,
.textarea-input:focus,
.field input:focus,
.field select:focus,
.field textarea:focus { background: #fff; border-color: rgba(20, 115, 142, .45); box-shadow: 0 0 0 .2rem rgba(20, 115, 142, .07); }
.field input[type="date"],
.field input[type="number"],
.field input[type="tel"],
.field input[type="email"] { direction: ltr; text-align: left; }
.checkbox-field { display: flex; min-height: 2.55rem; align-items: center; gap: .45rem; color: #53697d; font-size: .75rem; }
.checkbox-field input { width: 1rem; height: 1rem; accent-color: var(--brand); }
.form-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: .45rem; margin-top: .9rem; padding-top: .8rem; border-top: 1px solid var(--line); }

.toolbar-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .6rem; }
.toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: .4rem; }
.search-field { position: relative; min-width: min(100%, 16rem); }
.search-field .app-icon { position: absolute; inset: 50% .65rem auto auto; width: .9rem; color: #8597a7; transform: translateY(-50%); pointer-events: none; }
.search-field input { width: 100%; min-height: 2.45rem; padding: .45rem 2rem .45rem .65rem; background: #f8fafb; border: 1px solid var(--line); border-radius: .65rem; outline: none; font-size: .75rem; }

.data-table-card { overflow: hidden; }
.table-scroll { width: 100%; overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: .75rem; }
.data-table th { padding: .72rem .75rem; color: #667b8d; background: #f5f7f8; border-bottom: 1px solid var(--line); font-weight: 750; text-align: right; white-space: nowrap; }
.data-table td { padding: .75rem; color: #324f64; border-bottom: 1px solid rgba(35, 67, 94, .075); vertical-align: middle; }
.data-table tbody tr { transition: background .12s ease; }
.data-table tbody tr:hover { background: rgba(21, 105, 130, .035); }
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table .numeric { direction: rtl; text-align: left; white-space: nowrap; font-variant-numeric: tabular-nums; }
.data-table .actions-cell { text-align: left; white-space: nowrap; }
.row-title { display: block; color: var(--ink); font-weight: 750; }
.row-subtitle { display: block; margin-top: .16rem; color: #8596a5; font-size: .75rem; }
.row-actions { display: inline-flex; align-items: center; gap: .3rem; }
.table-action { display: inline-grid; width: 2rem; height: 2rem; place-items: center; color: #557085; background: #f6f8f9; border: 1px solid var(--line); border-radius: .55rem; cursor: pointer; }
.table-action:hover:not(:disabled) { color: var(--brand); border-color: rgba(21, 105, 130, .22); }
.table-action.danger { color: var(--danger); }
.table-action .app-icon { width: .85rem; height: .85rem; }

.mobile-table { margin-top: .45rem; }
.table-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .72rem .15rem; border-bottom: 1px solid var(--line); }
.table-row:last-child { border-bottom: 0; }
.table-row strong,
.table-row small { display: block; }
.table-row strong { color: var(--ink); font-size: .75rem; }
.table-row small { margin-top: .18rem; color: var(--text-muted-dark); font-size: .75rem; }
.table-number { min-width: 7.5rem; text-align: left; }
.table-number strong { color: var(--brand-strong); font-size: .75rem; }

.pagination { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .65rem .75rem; color: var(--text-muted-dark); background: #fafbfc; border-top: 1px solid var(--line); font-size: .75rem; }
.pagination-actions { display: flex; gap: .3rem; }

.empty-state {
    width: min(100%, 38rem);
    margin: 2.2rem auto;
    padding: clamp(1.5rem, 4vw, 2.4rem);
    border-radius: 1rem;
    text-align: center;
}
.empty-state.compact { width: 100%; margin: .6rem 0 0; padding: 1.4rem; background: #fafbfc; box-shadow: none; }
.empty-state h1,
.empty-state h2 { color: var(--ink); }
.empty-state p,
.empty-line { color: var(--text-muted-dark); font-size: .75rem; line-height: 1.9; }
.empty-line { padding: 1.25rem .2rem .35rem; text-align: center; }
.empty-illustration { display: grid; width: 3.3rem; height: 3.3rem; margin: 0 auto .8rem; place-items: center; color: #7790a4; background: #eef3f5; border-radius: 1rem; }

.loading-state { display: grid; min-height: 12rem; place-content: center; justify-items: center; gap: .65rem; color: var(--text-muted-dark); font-size: .75rem; }
.spinner { width: 1.8rem; height: 1.8rem; border: 2px solid rgba(21, 105, 130, .15); border-top-color: var(--brand); border-radius: 50%; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.skeleton { position: relative; overflow: hidden; color: transparent !important; background: #e9eef1 !important; border-radius: .4rem; }
.skeleton::after { position: absolute; inset: 0; content: ""; background: linear-gradient(90deg, transparent, rgba(255,255,255,.7), transparent); animation: shimmer 1.2s infinite; transform: translateX(-100%); }
@keyframes shimmer { to { transform: translateX(100%); } }

.form-message,
.alert-banner {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
    margin: .75rem 0;
    padding: .7rem .8rem;
    color: #3f6681;
    background: #edf5fa;
    border: 1px solid #d8e9f3;
    border-radius: .72rem;
    font-size: .75rem;
    line-height: 1.8;
}
.form-message.error,
.alert-banner.error { color: #9d3540; background: #fdf0f1; border-color: #f4d1d5; }
.form-message.success,
.alert-banner.success { color: #126f52; background: #eaf8f3; border-color: #cdece0; }
.form-message.warning,
.alert-banner.warning { color: #855c0b; background: #fff7e3; border-color: #f3e2b7; }
.form-message.info { color: #3f6681; }

.login-wrap {
    display: grid;
    width: 100%;
    min-height: min(43rem, calc(100dvh - 8rem));
    place-items: center;
    padding: 1.2rem;
}
.login-card {
    position: relative;
    width: min(100%, 27rem);
    padding: clamp(1.35rem, 4vw, 2.25rem);
    overflow: hidden;
    color: #edf4fa;
    background: linear-gradient(150deg, rgba(12, 40, 62, .92), rgba(6, 25, 45, .94));
    border: 1px solid rgba(175, 199, 221, .17);
    border-radius: 1.25rem;
    box-shadow: 0 2rem 5rem rgba(1, 10, 23, .36), inset 0 1px rgba(255,255,255,.04);
    backdrop-filter: blur(22px);
}
.login-card::before { position: absolute; width: 12rem; height: 12rem; inset: -6rem auto auto -6rem; content: ""; background: radial-gradient(circle, rgba(218, 168, 58, .15), transparent 70%); border-radius: 50%; }
.login-card > * { position: relative; z-index: 1; }
.login-emblem { display: grid; width: 3.4rem; height: 3.4rem; place-items: center; margin-bottom: 1rem; color: #14283a; background: linear-gradient(145deg, #ffe59a, #c88820); border: 1px solid rgba(255,235,166,.7); border-radius: 1rem; box-shadow: 0 .75rem 2rem rgba(207, 149, 31, .23); font-size: 1.65rem; font-weight: 950; }
.login-card h1 { margin-bottom: .25rem; color: #fff; }
.login-card .muted { color: #8ea5bb; font-size: .75rem; }
.login-card label { display: block; margin: .85rem 0 .35rem; color: #b5c5d5; font-size: .75rem; font-weight: 700; }
.login-card input { width: 100%; min-height: 2.85rem; padding: 0 .75rem; color: #f3f7fb; background: rgba(3, 16, 31, .65); border: 1px solid rgba(139, 171, 201, .22); border-radius: .7rem; outline: none; direction: ltr; text-align: left; }
.login-card input:focus { border-color: rgba(232, 190, 87, .62); box-shadow: 0 0 0 .2rem rgba(226, 179, 62, .08); }
.login-card .primary-button { width: 100%; margin-top: 1rem; color: #173047; background: linear-gradient(145deg, #f6d984, #d5a23c); border-color: #dbab47; }
.login-card .form-message { background: rgba(20, 70, 94, .35); border-color: rgba(111, 166, 191, .2); color: #bcd1df; }
.login-card .form-message.error { color: #ffc6ca; background: rgba(111, 36, 44, .4); border-color: rgba(224, 100, 111, .26); }
.login-card .form-message.success { color: #aff0d5; background: rgba(28, 103, 77, .35); border-color: rgba(71, 194, 148, .2); }

.modal-backdrop,
.sheet-backdrop {
    position: fixed;
    z-index: 100;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 1rem;
    background: rgba(3, 15, 28, .58);
    backdrop-filter: blur(4px);
    animation: fade-in .15s ease;
}
.modal-card { width: min(100%, 38rem); max-height: calc(100dvh - 2rem); overflow-y: auto; background: #fff; border: 1px solid rgba(255,255,255,.4); border-radius: 1.05rem; box-shadow: 0 2rem 6rem rgba(3, 16, 30, .35); animation: modal-in .18s ease; }
.modal-card.wide { width: min(100%, 58rem); }
.modal-head { position: sticky; z-index: 1; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .9rem 1rem; background: rgba(255,255,255,.96); border-bottom: 1px solid var(--line); backdrop-filter: blur(12px); }
.modal-head h2 { margin: 0; }
.modal-head p { margin: .15rem 0 0; color: var(--text-muted-dark); font-size: .75rem; }
.modal-close { display: grid; width: 2rem; height: 2rem; place-items: center; color: #687d90; background: #f4f6f7; border: 1px solid var(--line); border-radius: .55rem; cursor: pointer; }
.modal-close .app-icon { width: .85rem; }
.modal-body { padding: 1rem; }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(.5rem) scale(.985); } }

.danger-zone { margin-top: 1rem; padding: .9rem; background: #fff6f7; border: 1px solid #f4d6da; border-radius: .8rem; }
.danger-zone h3 { color: #a83d48; }
.danger-zone p { color: #8d6870; font-size: .75rem; line-height: 1.8; }
.code-box { padding: .75rem; overflow-wrap: anywhere; color: #d8e7f2; background: #0a263b; border: 1px solid #173c54; border-radius: .7rem; direction: ltr; text-align: left; font-family: Consolas, monospace; font-size: .75rem; line-height: 1.8; }

.stats-strip { display: flex; align-items: stretch; flex-wrap: wrap; gap: .55rem; margin-bottom: .8rem; }
.stat-chip { min-width: 8.5rem; flex: 1; padding: .7rem .8rem; background: #fff; border: 1px solid var(--line); border-radius: .75rem; box-shadow: var(--shadow-sm); }
.stat-chip span,
.stat-chip strong { display: block; }
.stat-chip span { color: var(--text-muted-dark); font-size: .75rem; }
.stat-chip strong { margin-top: .2rem; color: var(--ink); font-size: .82rem; }

.two-column-workspace { display: grid; grid-template-columns: minmax(17rem, .8fr) minmax(0, 1.8fr); gap: .75rem; align-items: start; }
.sticky-panel { position: sticky; top: 6.1rem; }
.line-editor { display: grid; grid-template-columns: minmax(10rem, 2fr) repeat(3, minmax(6rem, 1fr)) auto; gap: .45rem; align-items: end; padding: .65rem; background: #f7f9fa; border: 1px solid var(--line); border-radius: .75rem; }

/* Shared workspaces */
.content-split { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(17rem, .75fr); gap: .8rem; align-items: start; }
.summary-card,
.subsection-card { padding: 1rem; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.subsection-card { margin-top: .75rem; background: #fafcfd; box-shadow: none; }
.summary-card h2,
.subsection-card h3 { margin: .15rem 0 .55rem; color: var(--ink); }
.summary-card > p,
.subsection-card > p { color: var(--text-muted-dark); font-size: .75rem; line-height: 1.9; }
.sticky-summary { position: sticky; top: 6rem; }
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: .8rem; }
.section-heading h2 { margin: .08rem 0 0; color: var(--ink); }
.section-heading > .app-icon { width: 1.5rem; height: 1.5rem; color: var(--brand); }
.detail-list { display: grid; gap: 0; margin: .65rem 0; }
.detail-list > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: .62rem 0; border-bottom: 1px dashed var(--line); }
.detail-list > div:last-child { border-bottom: 0; }
.detail-list dt { color: var(--text-muted-dark); font-size: .75rem; }
.detail-list dd { max-width: 65%; margin: 0; color: var(--ink); text-align: left; font-size: .75rem; font-weight: 750; overflow-wrap: anywhere; }
.success-panel { display: flex; align-items: flex-start; gap: .75rem; margin-top: .8rem; padding: .85rem; color: #126b50; background: linear-gradient(145deg, #ebfaf4, #e2f5ed); border: 1px solid #c8eadd; border-radius: .85rem; }
.success-panel.large { padding: 1.1rem; }
.success-panel > .app-icon { flex: 0 0 auto; width: 1.4rem; height: 1.4rem; padding: .25rem; color: #fff; background: #24a579; border-radius: 50%; }
.success-panel strong,
.success-panel span,
.success-panel small { display: block; }
.success-panel span { margin-top: .16rem; color: #397863; font-size: .75rem; line-height: 1.8; }
.success-panel small { margin-top: .2rem; color: #6a9284; font-size: .75rem; }
.amount-emphasis { color: var(--brand-strong) !important; font-size: .83rem !important; }
.status-badge.info { color: #176581; background: #e7f4f8; border-color: #c8e5ee; }
.danger-text { color: var(--danger) !important; }
.field.flex-grow,
.flex-grow { flex: 1 1 13rem; }
.muted { color: var(--text-muted-dark); }
.ltr-inline { direction: ltr; unicode-bidi: isolate; }
.compact-modal { width: min(100%, 30rem); }
.warning-button { display: inline-flex; min-height: 2.65rem; align-items: center; justify-content: center; gap: .4rem; padding: 0 .9rem; color: #7b5508; background: #fff5d9; border: 1px solid #ebd49e; border-radius: .72rem; cursor: pointer; font-size: .75rem; font-weight: 750; }
.warning-button.compact { min-height: 2.3rem; padding-inline: .7rem; }
.ghost-button.full-width,
.primary-button.full-width { width: 100%; }
.inline-number { width: 6.2rem !important; min-height: 2.1rem !important; padding-inline: .4rem !important; }
.copy-field { position: relative; display: flex; align-items: stretch; }
.copy-field > input,
.copy-field > textarea { padding-left: 2.7rem; }
.copy-field > button { position: absolute; inset: .32rem auto .32rem .32rem; display: grid; width: 2rem; place-items: center; color: var(--brand); background: #edf5f8; border: 0; border-radius: .5rem; cursor: pointer; }
.copy-field .app-icon { width: .85rem; }
.divider-label { display: flex; align-items: center; gap: .6rem; margin: 1rem 0; color: #8493a0; font-size: .75rem; }
.divider-label::before,
.divider-label::after { height: 1px; flex: 1; content: ""; background: var(--line); }
.empty-actions { display: flex; justify-content: center; margin: -.8rem 0 1.2rem; }

/* Membership, access and reservations */
.module-tabs .segment-button.active { color: var(--brand-strong); }
.receipt-brand { display: flex; align-items: center; gap: .65rem; margin-bottom: .8rem; }
.receipt-brand strong,
.receipt-brand span { display: block; }
.receipt-brand span { color: var(--text-muted-dark); font-size: .75rem; }
.brand-mark.small { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; color: #142e42; background: linear-gradient(145deg, #f8da82, #d2a13d); border-radius: .72rem; font-size: 1.05rem; font-weight: 950; }
.scan-input { min-height: 3.45rem !important; color: var(--brand-strong) !important; background: linear-gradient(145deg, #f5fbfc, #edf6f8) !important; border-color: rgba(21,105,130,.26) !important; font-size: 1rem !important; font-weight: 800; letter-spacing: .03em; }
.checkin-result { display: flex; align-items: center; gap: .9rem; margin-top: 1rem; padding: 1rem; border-radius: .9rem; }
.checkin-result.success { color: #126a4d; background: radial-gradient(circle at 0 0, rgba(50,183,137,.15), transparent 45%), #edf9f4; border: 1px solid #caeadf; }
.checkin-result-icon { display: grid; width: 3.1rem; height: 3.1rem; flex: 0 0 auto; place-items: center; color: #fff; background: linear-gradient(145deg, #39bd8e, #168260); border-radius: 50%; box-shadow: 0 .65rem 1.4rem rgba(27,141,103,.2); }
.checkin-result-icon .app-icon { width: 1.25rem; }
.checkin-result span,
.checkin-result strong,
.checkin-result p,
.checkin-result small { display: block; margin: 0; }
.checkin-result span { font-size: .75rem; }
.checkin-result strong { margin: .12rem 0; color: var(--ink); font-size: .92rem; }
.checkin-result p,
.checkin-result small { color: #5b8274; font-size: .75rem; line-height: 1.7; }
.live-dot { display: flex; align-items: center; gap: .36rem; color: #29795f; font-size: .75rem; }
.live-dot span { width: .52rem; height: .52rem; background: #28b883; border-radius: 50%; box-shadow: 0 0 0 .3rem rgba(40,184,131,.12); animation: live-pulse 1.7s ease-in-out infinite; }
@keyframes live-pulse { 50% { box-shadow: 0 0 0 .55rem rgba(40,184,131,0); } }
.member-profile { text-align: center; }
.avatar.large { display: grid; width: 4rem; height: 4rem; margin: .25rem auto .65rem; place-items: center; color: #fff; background: linear-gradient(145deg, #1d8198, #104c6a); border-radius: 1.15rem; box-shadow: 0 .8rem 2rem rgba(18,79,104,.18); font-size: 1.1rem; font-weight: 900; }
.member-profile > h2 { margin-bottom: .1rem; }
.member-profile > span { display: block; margin-bottom: .5rem; color: var(--text-muted-dark); font-size: .75rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.entity-card { display: flex; min-height: 14rem; flex-direction: column; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.entity-card-head { display: flex; align-items: center; justify-content: space-between; }
.entity-icon { display: grid; width: 2.5rem; height: 2.5rem; place-items: center; color: var(--brand); background: var(--brand-soft); border-radius: .75rem; }
.entity-card h2 { margin: .72rem 0 .1rem; }
.entity-card > p,
.entity-card > small { color: var(--text-muted-dark); font-size: .75rem; line-height: 1.8; }
.entity-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin: .7rem 0; }
.entity-metrics div { padding: .5rem .35rem; background: #f6f9fa; border-radius: .55rem; text-align: center; }
.entity-metrics span,
.entity-metrics strong { display: block; }
.entity-metrics span { color: #81909b; font-size: .75rem; }
.entity-metrics strong { margin-top: .18rem; color: #314d61; font-size: .75rem; }
.entity-card-actions { display: flex; justify-content: flex-end; margin-top: auto; padding-top: .7rem; }
.reservation-hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding: .9rem; color: #dce9f2; background: linear-gradient(145deg, #123e58, #092b43); border-radius: .85rem; }
.reservation-hero h3 { margin: .45rem 0 .15rem; color: #fff; }
.reservation-hero p { margin: 0; color: #9db4c6; font-size: .75rem; }
.reservation-hero > strong { color: #f2ce6b; font-size: .95rem; }
.action-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0; }
.action-tile { display: grid; min-height: 5.1rem; place-items: center; gap: .32rem; padding: .55rem; color: #476277; background: #f7f9fa; border: 1px solid var(--line); border-radius: .72rem; cursor: pointer; font-size: .75rem; }
.action-tile .app-icon { width: 1.15rem; color: var(--brand); }
.action-tile.success { color: #176c51; background: #ebf8f3; border-color: #cce9de; }
.action-tile.danger { color: #a13c48; background: #fff2f3; border-color: #f1d3d6; }

/* Dedicated cafe / pool point of sale */
.pool-command-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem; }
.pool-command-card { position: relative; display: grid; min-height: 8.2rem; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .15rem .65rem; padding: .9rem; overflow: hidden; color: #294b5e; background: linear-gradient(145deg, #fff, #f1f8f8); border: 1px solid #d7e8e9; border-radius: 1rem; box-shadow: var(--shadow-sm); text-align: right; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.pool-command-card::after { position: absolute; width: 5.5rem; height: 5.5rem; inset: auto auto -2.8rem -2.3rem; content: ""; background: radial-gradient(circle, rgba(16,142,151,.12), transparent 70%); border-radius: 50%; }
.pool-command-card:hover { transform: translateY(-3px); border-color: rgba(14,126,139,.34); box-shadow: 0 .9rem 2rem rgba(23,72,91,.13); }
.pool-command-card > span { display: grid; width: 2.7rem; height: 2.7rem; grid-row: 1 / 3; place-items: center; color: #fff; background: linear-gradient(145deg, #157c92, #16a29e); border-radius: .8rem; box-shadow: 0 .45rem 1rem rgba(17,125,142,.22); font-size: 1.2rem; }
.pool-command-card > strong { align-self: end; color: var(--ink); font-size: .75rem; }
.pool-command-card > small { align-self: start; color: var(--text-muted-dark); font-size: .75rem; }
.pool-command-card > .app-icon { width: .8rem; grid-column: 3; grid-row: 1 / 3; color: #6b8997; }
.pool-command-card.cashier { color: #fff; background: linear-gradient(140deg, #123f5a, #0e6d78); border-color: transparent; }
.pool-command-card.cashier > strong { color: #fff; }
.pool-command-card.cashier > small,
.pool-command-card.cashier > .app-icon { color: rgba(255,255,255,.7); }
.pool-command-card.cashier > span { color: #183f51; background: linear-gradient(145deg, #f5d47d, #d7a940); }
.outlet-hero { position: relative; display: flex; min-height: 8.7rem; align-items: center; justify-content: space-between; gap: 1rem; margin: -1.2rem -1.2rem 1rem; padding: 1.3rem 1.5rem; overflow: hidden; color: #fff; border-radius: 0 0 1.4rem 1.4rem; box-shadow: 0 1rem 2.5rem rgba(12,45,66,.16); }
.outlet-hero::before { position: absolute; width: 20rem; height: 20rem; inset: -11rem auto auto -5rem; content: ""; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 68%); border-radius: 50%; }
.outlet-hero.cafe-theme { background: linear-gradient(125deg, #52392f, #8a5639 54%, #bc8150); }
.outlet-hero.pool-theme { background: linear-gradient(125deg, #073f5c, #08788d 54%, #19a0a2); }
.outlet-hero.vip-theme { background: linear-gradient(125deg, #173650, #2b5570 54%, #916c48); }
.vip-pos .pos-product-card.disabled { opacity: 1; color: #425568; background: #f5f7f8; border-style: dashed; }
.vip-pos .pos-product-card.disabled .product-thumb { color: #60788a; background: #e8eef0; }
.vip-reference-card { margin: 1rem 0 1.5rem; padding: 1rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.vip-reference-card > summary { display: flex; align-items: center; gap: .6rem; color: #173650; font-size: 1rem; font-weight: 750; cursor: pointer; }
.vip-reference-card > summary span { margin-inline-start: auto; color: #607184; font-size: .78rem; font-weight: 500; }
.vip-reference-card > summary:focus-visible { outline: 3px solid #3d94bc; outline-offset: .3rem; border-radius: .3rem; }
.vip-tariff-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: .8rem; margin-top: 1rem; }
.vip-tariff-group { min-width: 0; padding: .8rem; background: #f7f9fa; border: 1px solid #dce5e9; border-radius: .8rem; }
.vip-tariff-group h2 { margin: 0 0 .6rem; color: #173650; font-size: 1rem; }
.vip-tariff-list { display: grid; gap: .35rem; }
.vip-tariff-row { display: flex; align-items: flex-start; justify-content: space-between; gap: .5rem; padding: .55rem .15rem; border-top: 1px solid #e0e8ec; }
.vip-tariff-row strong { display: block; font-size: .8rem; }
.vip-tariff-row small { display: flex; flex-wrap: wrap; gap: .35rem; color: #617487; font-size: .72rem; }
.vip-tariff-price { flex: none; color: #174c61; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.vip-tariff-pending { flex: none; padding: .15rem .4rem; color: #765514; background: #fff2d5; border-radius: .4rem; font-size: .72rem; }
.vip-reference-note { margin: .8rem 0 0; color: #566a7c; font-size: .78rem; line-height: 1.8; }
@media (max-width: 1050px) { .vip-tariff-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .vip-tariff-grid { grid-template-columns: minmax(0, 1fr); } .vip-reference-card > summary { flex-wrap: wrap; } .vip-reference-card > summary span { margin-inline-start: 0; width: 100%; } }
.outlet-hero-copy,
.outlet-status { position: relative; z-index: 1; display: flex; align-items: center; gap: .85rem; }
.outlet-symbol { display: grid; width: 4rem; height: 4rem; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 1.15rem; backdrop-filter: blur(12px); font-size: 1.8rem; }
.outlet-hero h1 { margin: .06rem 0 .12rem; color: #fff; font-size: 1.45rem; }
.outlet-hero p { margin: 0; color: rgba(255,255,255,.72); font-size: .75rem; }
.outlet-hero .eyebrow { color: rgba(255,255,255,.62); }
.secondary-button.inverse { color: #fff; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); backdrop-filter: blur(10px); }
.outlet-pos-layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(19rem, .72fr); gap: .8rem; align-items: start; }
.pos-product-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.pos-product-card { position: relative; display: flex; min-height: 11.5rem; flex-direction: column; align-items: stretch; padding: .75rem; color: inherit; background: #fff; border: 1px solid var(--line); border-radius: .9rem; box-shadow: var(--shadow-sm); text-align: right; cursor: pointer; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.pos-product-card:hover:not(:disabled) { transform: translateY(-3px); border-color: rgba(21,105,130,.22); box-shadow: 0 .85rem 2rem rgba(29,62,86,.12); }
.pos-product-card.disabled { opacity: .52; cursor: not-allowed; }
.product-thumb { position: relative; display: grid; height: 4.5rem; place-items: center; margin-bottom: .62rem; color: #527489; background: linear-gradient(145deg, #f3f7f8, #e8f0f2); border-radius: .7rem; }
.product-thumb .app-icon { width: 1.55rem; }
.stock-dot { position: absolute; width: .55rem; height: .55rem; inset: .55rem auto auto .55rem; border: 2px solid #fff; border-radius: 50%; }
.stock-dot.success { background: #2ab684; }
.stock-dot.warning { background: #e4aa2e; }
.stock-dot.danger { background: #d95360; }
.pos-product-card > strong { color: var(--ink); font-size: .75rem; }
.pos-product-card > span { margin: .12rem 0 auto; color: var(--text-muted-dark); font-size: .75rem; }
.pos-product-card > div b { color: var(--brand-strong); font-size: .8rem; }
.pos-product-card > div small { color: #7b8c98; font-size: .75rem; }
.pos-product-card > em { margin-top: .22rem; color: #83909a; font-size: .75rem; font-style: normal; }
.pos-cart-card { position: sticky; top: 5.7rem; max-height: calc(100dvh - 7rem); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 1rem 2.8rem rgba(27,59,82,.1); }
.pos-cart-card > .section-heading { padding: .9rem .9rem .65rem; border-bottom: 1px solid var(--line); }
.cart-lines { min-height: 11rem; max-height: 38dvh; padding: .4rem .75rem; overflow-y: auto; }
.cart-line { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: .5rem; padding: .6rem 0; border-bottom: 1px dashed var(--line); }
.cart-line > div:first-child strong,
.cart-line > div:first-child span { display: block; }
.cart-line > div:first-child strong { color: var(--ink); font-size: .75rem; }
.cart-line > div:first-child span { color: #81909b; font-size: .75rem; }
.cart-line > strong { color: var(--brand-strong); font-size: .75rem; white-space: nowrap; }
.quantity-stepper { display: flex; align-items: center; overflow: hidden; background: #f5f7f8; border: 1px solid var(--line); border-radius: .5rem; }
.quantity-stepper button { width: 1.65rem; height: 1.65rem; color: var(--brand); background: transparent; border: 0; cursor: pointer; }
.quantity-stepper b { min-width: 1.5rem; text-align: center; font-size: .75rem; }
.cart-checkout { padding: .8rem .9rem .9rem; background: #f8fafb; border-top: 1px solid var(--line); }
.checkout-breakdown { display: flex; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; color: var(--text-muted-dark); font-size: .75rem; }
.checkout-breakdown span { display: flex; gap: .25rem; }
.checkout-breakdown b { color: var(--ink); }
.checkout-total { display: flex; align-items: center; justify-content: space-between; margin-bottom: .65rem; padding-bottom: .6rem; border-bottom: 1px dashed var(--line-strong); }
.checkout-total span { color: var(--text-muted-dark); font-size: .75rem; }
.checkout-total strong { color: var(--ink); font-size: 1rem; }
.checkout-button { width: 100%; margin-top: .55rem; }
.receipt-modal { width: min(100%, 29rem); }
.receipt-paper { text-align: center; }
.receipt-paper .receipt-brand { justify-content: center; }
.receipt-paper > h2 { margin-bottom: .15rem; }
.receipt-paper > p { color: var(--text-muted-dark); font-size: .75rem; }
.receipt-lines { margin: .8rem 0; border-block: 1px dashed var(--line-strong); }
.receipt-lines > div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; font-size: .75rem; }
.receipt-total { display: flex; justify-content: space-between; gap: 1rem; color: var(--ink); font-size: .76rem; }
.receipt-footer { margin-top: .8rem !important; padding-top: .65rem; border-top: 1px dashed var(--line); }
.compact-receipt {
    width: min(100%, 32rem);
    margin-inline: auto;
    color: #132d3c;
    background: #fff;
    font-variant-numeric: tabular-nums;
}
.compact-receipt-frame {
    overflow: hidden;
    padding: 1rem;
    background: linear-gradient(180deg, #fff, #fbfdfd);
    border: 2px solid #183f51;
    border-radius: 1rem;
    box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 4px rgba(24, 63, 81, .16);
}
.compact-receipt-header { padding: .1rem .4rem .8rem; text-align: center; border-bottom: 1px solid rgba(24, 63, 81, .22); }
.compact-receipt-header span,
.compact-receipt-header h2,
.compact-receipt-header small { display: block; margin: 0; }
.compact-receipt-header span { color: #a87513; font-size: .72rem; font-weight: 900; letter-spacing: .14em; }
.compact-receipt-header h2 { margin-top: .18rem; color: #102f40; font-size: 1.18rem; line-height: 1.55; }
.compact-receipt-header small { margin-top: .12rem; color: #6b7f89; font-size: .7rem; }
.compact-receipt-band {
    margin: .8rem 0 .55rem;
    padding: .62rem .75rem;
    text-align: center;
    background: linear-gradient(135deg, #fff9eb, #fff);
    border: 1px solid #c9942c;
    border-radius: .7rem;
}
.compact-receipt-band span,
.compact-receipt-band strong { display: block; }
.compact-receipt-band span { color: #765612; font-size: .68rem; }
.compact-receipt-band strong { margin-top: .14rem; color: #17384a; font-size: 1.2rem; line-height: 1.45; overflow-wrap: anywhere; }
.compact-receipt-time { display: block; margin: .55rem 0 .3rem; color: #70818a; font-size: .68rem; text-align: center; }
.compact-receipt-lines,
.compact-receipt-groups { margin-top: .55rem; border-top: 1px solid rgba(24, 63, 81, .22); }
.compact-receipt-line { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .62rem .2rem; border-bottom: 1px dashed rgba(24, 63, 81, .2); }
.compact-receipt-line > span { min-width: 0; text-align: right; }
.compact-receipt-line b,
.compact-receipt-line small { display: block; }
.compact-receipt-line b { color: #183a4b; font-size: .76rem; line-height: 1.65; overflow-wrap: anywhere; }
.compact-receipt-line small { margin-top: .08rem; color: #788992; font-size: .65rem; }
.compact-receipt-line > strong { flex: 0 0 auto; color: #183a4b; font-size: .74rem; white-space: nowrap; }
.compact-receipt-group { padding-top: .45rem; border-bottom: 1px solid rgba(24, 63, 81, .28); }
.compact-receipt-group > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .45rem .2rem; color: #17394a; }
.compact-receipt-group > header strong { font-size: .73rem; }
.compact-receipt-group > header b { color: #9b6d11; font-size: .72rem; white-space: nowrap; }
.compact-receipt-total,
.compact-receipt-summary > div { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.compact-receipt-total { margin-top: .75rem; padding: .72rem .2rem .2rem; border-top: 2px solid #183f51; font-size: .85rem; }
.compact-receipt-total strong { font-size: 1rem; }
.compact-receipt-summary { margin-top: .75rem; padding: .55rem .65rem; background: #f4f8f8; border: 1px solid rgba(24, 63, 81, .28); border-radius: .62rem; }
.compact-receipt-summary > div { padding: .35rem 0; color: #506975; font-size: .72rem; }
.compact-receipt-summary > div + div { border-top: 1px dashed rgba(24, 63, 81, .2); }
.compact-receipt-summary strong { color: #17394a; white-space: nowrap; }
.compact-receipt-note,
.compact-receipt-thanks,
.compact-receipt-empty { margin: .75rem 0 0; color: #647983; font-size: .68rem; line-height: 1.8; text-align: center; }
.compact-receipt-note { padding-top: .65rem; border-top: 1px dashed rgba(24, 63, 81, .24); }
.compact-receipt-thanks { color: #17394a; font-weight: 800; }
.pool-tab-detail > .modal-head { position: sticky; top: 0; z-index: 5; }
.pool-tab-detail .modal-close { position: relative; z-index: 6; touch-action: manipulation; }
.print-only { display: none; }
.pool-tab-detail { width: min(100%, 58rem) !important; }
.pool-receipt-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: .75rem; }
.pool-receipt-group { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: .8rem; }
.pool-receipt-group > header { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .65rem .75rem; background: linear-gradient(135deg, #f3f8f9, #fff); border-bottom: 1px solid var(--line); }
.pool-receipt-group > header strong,
.pool-receipt-group > header small { display: block; }
.pool-receipt-group > header strong { color: var(--ink); font-size: .75rem; }
.pool-receipt-group > header small { margin-top: .1rem; color: #80919d; font-size: .75rem; }
.pool-receipt-group > header b { color: var(--brand-strong); font-size: .75rem; white-space: nowrap; }
.receipt-line { display: flex; align-items: center; justify-content: space-between; gap: .7rem; padding: .52rem .75rem; border-bottom: 1px dashed var(--line); font-size: .75rem; }
.receipt-line:last-child { border-bottom: 0; }
.receipt-line span { color: #536b7b; }
.receipt-line strong { color: var(--ink); white-space: nowrap; }

/* Personnel consumption report */
.personnel-report-layout { grid-template-columns: minmax(0, 1.8fr) minmax(15rem, .58fr); align-items: start; }
.personnel-summary { position: sticky; top: 5.7rem; }
.compact-field { min-width: 7rem; }
.compact-field input,
.compact-field select { min-height: 2.25rem; }
.clickable-row { cursor: pointer; transition: background .15s ease; }
.clickable-row:hover { background: #f3f8f9; }
.clickable-row.selected { background: #e8f5f4; box-shadow: inset -3px 0 #1a938e; }
.wrap-text { max-width: 25rem; white-space: normal; line-height: 1.7; }
.donut-ring { --value: 0; position: relative; display: grid; width: 8.5rem; height: 8.5rem; place-items: center; margin: 1.1rem auto .2rem; background: conic-gradient(#1e9b83 calc(var(--value) * 1%), #e2ecef 0); border-radius: 50%; box-shadow: 0 .7rem 1.7rem rgba(26,80,92,.12); }
.donut-ring::before { position: absolute; width: 6rem; height: 6rem; content: ""; background: #fff; border-radius: 50%; }
.donut-ring > div { position: relative; z-index: 1; text-align: center; }
.donut-ring strong,
.donut-ring span { display: block; }
.donut-ring strong { color: var(--ink); font-size: 1.05rem; }
.donut-ring span { color: var(--text-muted-dark); font-size: .75rem; }

/* Server administration */
.role-selector { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; margin: .75rem 0; }
.role-option { display: flex; align-items: flex-start; gap: .55rem; padding: .65rem; background: #f8fafb; border: 1px solid var(--line); border-radius: .7rem; cursor: pointer; }
.role-option input { width: 1rem; height: 1rem; flex: 0 0 auto; margin-top: .1rem; accent-color: var(--brand); }
.role-option strong,
.role-option span { display: block; }
.role-option strong { color: var(--ink); font-size: .75rem; }
.role-option span { margin-top: .12rem; color: var(--text-muted-dark); font-size: .75rem; line-height: 1.65; }
.role-list { color: #4d6477; font-size: .75rem; line-height: 1.8; }
.license-hero,
.database-health { display: flex; align-items: center; gap: 1rem; margin-bottom: .8rem; padding: 1.1rem; color: #dce9f2; background: linear-gradient(145deg, #123e58, #092b43); border: 1px solid rgba(255,255,255,.08); border-radius: 1rem; box-shadow: 0 1rem 2.5rem rgba(9,42,64,.16); }
.license-hero.valid { background: linear-gradient(145deg, #125044, #0a352f); }
.license-hero.invalid { background: linear-gradient(145deg, #623941, #3d252b); }
.license-hero > div:nth-child(2),
.database-health > div:nth-child(2) { flex: 1; }
.license-hero h2,
.database-health h2 { margin: .08rem 0; color: #fff; }
.license-hero p,
.database-health p { margin: 0; color: #aac0cf; font-size: .75rem; }
.license-seal,
.database-pulse { position: relative; display: grid; width: 3.7rem; height: 3.7rem; flex: 0 0 auto; place-items: center; color: #f0cf72; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12); border-radius: 1rem; }
.license-seal .app-icon,
.database-pulse .app-icon { width: 1.55rem; }
.license-code { min-height: 8rem !important; font-family: Consolas, monospace; font-size: .75rem !important; }
.license-tools { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .55rem; margin-top: .65rem; }
.license-file-button { position: relative; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; cursor: pointer; }
.license-file-button input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.database-health.healthy .database-pulse { color: #60d4ab; }
.database-health.unhealthy { background: linear-gradient(145deg, #623943, #3d252c); }
.database-pulse > span { position: absolute; width: .55rem; height: .55rem; inset: .4rem .4rem auto auto; background: #35c18f; border: 2px solid #174356; border-radius: 50%; }
.database-health.unhealthy .database-pulse > span { background: #e2616d; }
.health-meta { text-align: left; }
.health-meta span,
.health-meta strong { display: block; }
.health-meta span { color: #91aabe; font-size: .75rem; }
.health-meta strong { margin-top: .2rem; color: #e6c563; font-size: .75rem; }
.danger-zone.prominent { margin: 0; padding: 1rem; }
.danger-zone.prominent h2 { color: #9d3540; }
.change-log { padding: .85rem; white-space: pre-line; color: #d7e4ed; background: #0c2b40; border-radius: .75rem; font-family: Consolas, monospace; font-size: .75rem; line-height: 1.9; }
.export-preview { margin-top: .8rem; }
.table-footer { padding: .65rem .8rem; color: var(--text-muted-dark); background: #f8fafb; border-top: 1px solid var(--line); font-size: .75rem; text-align: center; }
.upload-zone { position: relative; display: grid; min-height: 11rem; place-content: center; justify-items: center; gap: .35rem; margin-bottom: .7rem; overflow: hidden; color: #668094; background: repeating-linear-gradient(135deg, #f7fafb 0, #f7fafb 10px, #f3f7f8 10px, #f3f7f8 20px); border: 1.5px dashed #b9ced8; border-radius: .9rem; text-align: center; }
.upload-zone.has-file { color: #176b53; background: #eef9f5; border-color: #82ccb1; }
.upload-zone .app-icon { width: 2rem; height: 2rem; }
.upload-zone strong { color: var(--ink); font-size: .75rem; }
.upload-zone span { font-size: .75rem; }
.upload-zone input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.import-readiness { display: grid; gap: .25rem; margin-top: .75rem; padding: .75rem; border-radius: .72rem; }
.import-readiness.ready { color: #176b52; background: #eaf8f2; border: 1px solid #c7e8dc; }
.import-readiness.blocked { color: #9b3a45; background: #fff0f1; border: 1px solid #f0d1d5; }
.import-readiness strong { font-size: .75rem; }
.import-readiness span { font-size: .75rem; line-height: 1.8; }
.import-readiness small { font-family: Consolas, monospace; font-size: .75rem; }
.step-list { display: grid; gap: .7rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.step-list li { display: flex; gap: .6rem; }
.step-list li > span { display: grid; width: 1.7rem; height: 1.7rem; flex: 0 0 auto; place-items: center; color: var(--brand-strong); background: var(--brand-soft); border-radius: .5rem; font-size: .75rem; font-weight: 850; }
.step-list strong,
.step-list p { display: block; margin: 0; }
.step-list strong { color: var(--ink); font-size: .75rem; }
.step-list p { margin-top: .1rem; color: var(--text-muted-dark); font-size: .75rem; line-height: 1.7; }

/* Compact data visualization */
.trend-chart { display: flex; height: 14rem; align-items: flex-end; gap: .28rem; padding: 1rem .4rem .4rem; overflow-x: auto; border-bottom: 1px solid var(--line); }
.trend-column { display: flex; min-width: 1.35rem; height: 100%; flex: 1; flex-direction: column; justify-content: flex-end; align-items: center; }
.trend-bars { display: flex; width: 100%; max-width: 2rem; height: calc(100% - 1.7rem); align-items: flex-end; justify-content: center; gap: 2px; }
.trend-bars > span { width: 42%; min-height: 2px; border-radius: .25rem .25rem 0 0; transition: height .35s ease; }
.revenue-bar { background: linear-gradient(to top, #176c88, #31a9bd); }
.profit-bar { background: linear-gradient(to top, #23855f, #49c091); }
.profit-bar.negative { background: linear-gradient(to top, #b93e4b, #e06a74); }
.trend-column small { width: 4.2rem; margin-top: .35rem; overflow: hidden; color: #7e8f9c; font-size: .75rem; text-align: center; text-overflow: ellipsis; white-space: nowrap; transform: rotate(-30deg); }
.chart-legend { display: flex; justify-content: center; gap: 1rem; padding: .65rem; color: var(--text-muted-dark); font-size: .75rem; }
.chart-legend span { display: flex; align-items: center; gap: .3rem; }
.chart-legend i { width: .7rem; height: .35rem; border-radius: .2rem; }
.legend-revenue { background: #248ba5; }
.legend-profit { background: #31a879; }

/* Pool billiards: dedicated hourly-rental workspace */
.billiards-hero { overflow: hidden; position: relative; background: linear-gradient(135deg, #effaf8 0%, #f7fbff 52%, #fff 100%); }
.billiards-hero::after { position: absolute; inset: auto -2rem -3.8rem auto; width: 10rem; height: 10rem; content: ""; background: radial-gradient(circle, rgba(22, 142, 134, .16), transparent 67%); border-radius: 50%; pointer-events: none; }
.billiards-hero > * { position: relative; z-index: 1; }
.billiards-metrics .metric-card.highlight { background: linear-gradient(145deg, #0f6f70, #16948b); }
.billiards-metrics .metric-card.highlight span,
.billiards-metrics .metric-card.highlight strong,
.billiards-metrics .metric-card.highlight small { color: #fff; }
.billiards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: .85rem; margin-top: .85rem; }
.billiards-table-card { overflow: hidden; padding: .9rem; background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: 0 .65rem 1.8rem rgba(27, 62, 76, .07); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.billiards-table-card:hover { transform: translateY(-2px); box-shadow: 0 .9rem 2.2rem rgba(27, 62, 76, .11); }
.billiards-table-card.occupied { border-color: #f2c982; box-shadow: inset 0 3px #e9a836, 0 .65rem 1.8rem rgba(27, 62, 76, .07); }
.billiards-table-card.available { border-color: #a9dfcc; box-shadow: inset 0 3px #33a779, 0 .65rem 1.8rem rgba(27, 62, 76, .07); }
.billiards-table-card.disabled { opacity: .72; background: #f6f8f9; }
.billiards-table-card > header { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .65rem; }
.billiards-table-card > header h2,
.billiards-table-card > header span { display: block; margin: 0; }
.billiards-table-card > header h2 { color: var(--ink); font-size: .75rem; }
.billiards-table-card > header div > span { margin-top: .1rem; color: #7c8e9b; font-family: Consolas, monospace; font-size: .75rem; }
.billiards-ball { display: grid; width: 2.25rem; height: 2.25rem; flex: 0 0 auto; place-items: center; color: #fff; background: radial-gradient(circle at 34% 30%, #2ab6aa, #0b5558 72%); border: 3px solid #e8faf7; border-radius: 50%; box-shadow: 0 .3rem .75rem rgba(10, 93, 93, .22); font-size: .75rem; font-weight: 900; }
.billiards-customer { display: flex; align-items: center; gap: .55rem; margin-top: .8rem; padding: .65rem .7rem; color: #17645f; background: #edf9f6; border-radius: .72rem; }
.billiards-customer svg { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }
.billiards-customer strong,
.billiards-customer span { display: block; }
.billiards-customer strong { font-size: .75rem; }
.billiards-customer span { margin-top: .1rem; color: #66857f; font-size: .75rem; }
.table-live-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .35rem; margin-top: .65rem; }
.table-live-metrics > div { min-width: 0; padding: .55rem .4rem; background: #f7f9fa; border-radius: .62rem; text-align: center; }
.table-live-metrics span,
.table-live-metrics strong { display: block; }
.table-live-metrics span { color: #7c8d99; font-size: .75rem; }
.table-live-metrics strong { margin-top: .17rem; overflow: hidden; color: var(--ink); font-size: .75rem; text-overflow: ellipsis; white-space: nowrap; }
.billiards-actions { display: flex; gap: .45rem; margin-top: .7rem; }
.billiards-actions > * { flex: 1; }
.billiards-empty-table { display: grid; min-height: 8.2rem; place-items: center; align-content: center; gap: .28rem; color: #7d909b; text-align: center; }
.billiards-empty-table svg { width: 1.55rem; height: 1.55rem; color: #2a9a8f; }
.billiards-empty-table strong { color: var(--ink); font-size: .75rem; }
.billiards-empty-table span { max-width: 17rem; font-size: .75rem; line-height: 1.75; }
.settings-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }

/* Aria Modern UI — shared visual system */
::selection { color: #fff; background: rgba(8, 112, 129, .88); }

body::-webkit-scrollbar,
*::-webkit-scrollbar { width: .65rem; height: .65rem; }
body::-webkit-scrollbar-thumb,
*::-webkit-scrollbar-thumb { background: rgba(54, 83, 109, .25); border: 2px solid transparent; border-radius: 1rem; background-clip: padding-box; }
body::-webkit-scrollbar-track,
*::-webkit-scrollbar-track { background: transparent; }

.page-header:not(.dashboard-hero) {
    margin-bottom: 1.35rem;
    padding: .2rem .15rem;
}
.page-header:not(.dashboard-hero) h1 { font-size: clamp(1.55rem, 2.6vw, 2.15rem); }
.page-header:not(.dashboard-hero) p { font-size: .78rem; }

.dashboard-hero {
    position: relative;
    isolation: isolate;
    min-height: 12.25rem;
    align-items: center;
    margin-bottom: 1rem;
    padding: clamp(1.35rem, 3.2vw, 2.15rem);
    overflow: hidden;
    color: #f4f8fc;
    background:
        radial-gradient(circle at 12% 18%, rgba(37, 194, 199, .28), transparent 21rem),
        radial-gradient(circle at 88% 110%, rgba(231, 182, 68, .24), transparent 19rem),
        linear-gradient(125deg, #07324c 0%, #092b43 48%, #071d33 100%);
    border: 1px solid rgba(176, 211, 226, .16);
    border-radius: 1.55rem;
    box-shadow: 0 1.35rem 3.6rem rgba(7, 31, 51, .2);
    animation: aria-panel-in .48s cubic-bezier(.2,.8,.2,1) both;
}
.dashboard-hero::before {
    position: absolute;
    z-index: -1;
    width: 18rem;
    height: 18rem;
    inset: -10rem auto auto -7rem;
    content: "";
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 50%;
    box-shadow: 0 0 0 3.2rem rgba(255,255,255,.025), 0 0 0 6.4rem rgba(255,255,255,.015);
}
.dashboard-hero::after {
    position: absolute;
    z-index: -1;
    width: 28rem;
    height: 100%;
    inset: 0 auto 0 8%;
    content: "";
    background: linear-gradient(110deg, transparent, rgba(255,255,255,.045), transparent);
    transform: skewX(-18deg);
}
.dashboard-hero-copy { max-width: 48rem; }
.dashboard-hero .eyebrow { margin-bottom: .55rem; color: #f4cf72; font-size: .75rem; }
.dashboard-hero .eyebrow::before { background: linear-gradient(90deg, transparent, #f4cf72); }
.dashboard-hero h1 { margin-bottom: .25rem; color: #fff; font-size: clamp(1.75rem, 3.2vw, 2.55rem); line-height: 1.45; }
.dashboard-hero p { max-width: 43rem; color: #aec2d2; font-size: .8rem; line-height: 2; }
.dashboard-trust-row { display: flex; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; margin-top: .8rem; color: #91a9bc; font-size: .75rem; }
.dashboard-trust-row span { display: inline-flex; align-items: center; gap: .4rem; }
.dashboard-trust-row i { width: .45rem; height: .45rem; background: #4ee0a5; border-radius: 50%; box-shadow: 0 0 0 .28rem rgba(78,224,165,.1), 0 0 1rem rgba(78,224,165,.4); animation: aria-live 2.2s ease infinite; }
.dashboard-hero-actions { display: flex; min-width: 12rem; align-items: flex-end; flex-direction: column; gap: .7rem; }
.dashboard-date { color: #8fa9bd; font-size: .75rem; direction: rtl; }
.dashboard-refresh { color: #eef6fb; background: rgba(255,255,255,.075); border-color: rgba(203,222,235,.2); backdrop-filter: blur(10px); }
.dashboard-refresh:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,.12); border-color: rgba(238,203,113,.35); }
.dashboard-refresh .app-icon { width: 1rem; height: 1rem; }
.dashboard-refresh:disabled .app-icon { animation: spin .8s linear infinite; }

.period-tabs {
    margin-right: auto;
    margin-bottom: 1.1rem;
    padding: .32rem;
    background: rgba(255,255,255,.72);
    border-color: rgba(31, 72, 99, .1);
    border-radius: .9rem;
    box-shadow: 0 .4rem 1.4rem rgba(18, 46, 71, .055);
    backdrop-filter: blur(14px);
}
.period-button { min-height: 2.4rem; padding-inline: 1rem; font-size: .75rem; }
.period-button.active { color: #fff; background: linear-gradient(145deg, #0a7885, #075b70); box-shadow: 0 .35rem 1rem rgba(7, 101, 117, .2); }

.dashboard-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
.dashboard-metrics .metric-card {
    min-height: 10.5rem;
    padding: 1.15rem 1.2rem;
    background: rgba(255,255,255,.94);
    border-color: rgba(29, 65, 91, .09);
    border-radius: 1.2rem;
    box-shadow: 0 .55rem 1.8rem rgba(18, 48, 72, .065);
    transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
    animation: aria-card-in .48s cubic-bezier(.2,.8,.2,1) both;
}
.dashboard-metrics .metric-card:nth-child(2) { animation-delay: .04s; }
.dashboard-metrics .metric-card:nth-child(3) { animation-delay: .08s; }
.dashboard-metrics .metric-card:nth-child(4) { animation-delay: .12s; }
.dashboard-metrics .metric-card:nth-child(5) { animation-delay: .16s; }
.dashboard-metrics .metric-card:nth-child(6) { animation-delay: .2s; }
.dashboard-metrics .metric-card:hover { transform: translateY(-4px); border-color: rgba(8, 127, 140, .2); box-shadow: 0 1.2rem 2.8rem rgba(18, 48, 72, .12); }
.dashboard-metrics .metric-card::before { position: absolute; inset: 0 0 auto; height: 3px; content: ""; background: linear-gradient(90deg, #1592a0, #78d3d1); opacity: .82; }
.dashboard-metrics .metric-expense::before { background: linear-gradient(90deg, #e2766f, #f2b16c); }
.dashboard-metrics .metric-gross::before { background: linear-gradient(90deg, #6557c7, #9a8bea); }
.dashboard-metrics .metric-net::before { background: linear-gradient(90deg, #209b70, #70cf9b); }
.dashboard-metrics .metric-cash::before { background: linear-gradient(90deg, #2d7ac8, #71b7e8); }
.dashboard-metrics .metric-inventory::before { background: linear-gradient(90deg, #cb9330, #e6c46c); }
.metric-card-head { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.metric-card-head > span:first-child { color: #526d82; font-size: .76rem; font-weight: 750; }
.dashboard-metrics .metric-icon { width: 2.45rem; height: 2.45rem; color: #087f8c; background: rgba(8,127,140,.09); border: 1px solid rgba(8,127,140,.1); border-radius: .78rem; }
.dashboard-metrics .metric-expense .metric-icon { color: #c85c55; background: rgba(213,93,84,.09); border-color: rgba(213,93,84,.1); }
.dashboard-metrics .metric-gross .metric-icon { color: #6255bd; background: rgba(98,85,189,.09); border-color: rgba(98,85,189,.1); }
.dashboard-metrics .metric-net .metric-icon { color: #16835f; background: rgba(22,131,95,.09); border-color: rgba(22,131,95,.1); }
.dashboard-metrics .metric-cash .metric-icon { color: #286fae; background: rgba(40,111,174,.09); border-color: rgba(40,111,174,.1); }
.dashboard-metrics .metric-inventory .metric-icon { color: #aa791d; background: rgba(202,150,47,.1); border-color: rgba(202,150,47,.12); }
.dashboard-metrics .metric-icon .app-icon { width: 1.18rem; height: 1.18rem; }
.dashboard-metrics .metric-card > strong { margin: .9rem 0 .4rem; font-size: clamp(1.15rem, 2vw, 1.55rem); letter-spacing: -.035em; }
.dashboard-metrics .metric-card > small { font-size: .75rem; }
.dashboard-metrics .metric-card.highlight { background: linear-gradient(145deg, #0d4058, #082b42); border-color: rgba(223,180,76,.32); box-shadow: 0 1rem 2.6rem rgba(8,42,63,.18); }
.dashboard-metrics .metric-card.highlight::before { background: linear-gradient(90deg, #f3d477, #cf922b); }
.dashboard-metrics .metric-card.highlight .metric-card-head > span:first-child { color: #d7e4ec; }
.dashboard-metrics .metric-card.highlight .metric-icon { color: #f3d477; background: rgba(243,212,119,.12); border-color: rgba(243,212,119,.18); }

.dashboard-quick-stats {
    gap: .9rem;
    margin: .9rem 0;
    overflow: visible;
    background: transparent;
    border: 0;
    box-shadow: none;
}
.dashboard-quick-stats > div { display: grid; min-height: 5.2rem; padding: .8rem 1rem; grid-template-columns: auto 1fr auto; align-items: center; gap: .7rem; background: rgba(255,255,255,.9); border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow-sm); text-align: right; transition: transform .18s ease, box-shadow .18s ease; }
.dashboard-quick-stats > div:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dashboard-quick-stats > div + div::before { display: none; }
.dashboard-quick-stats .quick-stat-icon { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; color: #b37a16; background: #fff5d9; border-radius: .72rem; }
.dashboard-quick-stats .quick-stat-icon.cash { color: #176e91; background: #e8f5fa; }
.dashboard-quick-stats .quick-stat-icon.users { color: #187a5b; background: #e8f7f1; }
.dashboard-quick-stats .quick-stat-icon .app-icon { width: 1rem; height: 1rem; }
.dashboard-quick-stats span:not(.quick-stat-icon) { font-size: .75rem; }
.dashboard-quick-stats strong { margin: 0; font-size: 1.3rem; }

.data-grid-layout { gap: .9rem; }
.panel-card {
    border-radius: 1.2rem;
    box-shadow: 0 .5rem 1.8rem rgba(18,48,72,.055);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    animation: aria-card-in .5s .12s cubic-bezier(.2,.8,.2,1) both;
}
.panel-card:hover { border-color: rgba(8,127,140,.16); box-shadow: 0 1rem 2.6rem rgba(18,48,72,.09); }
.panel-heading { align-items: center; padding-bottom: .9rem; }
.panel-heading h2 { font-size: 1.02rem; }
.panel-heading p { font-size: .75rem; }
.panel-title { display: flex; align-items: center; gap: .7rem; }
.panel-title-icon { display: grid; width: 2.4rem; height: 2.4rem; flex: 0 0 auto; place-items: center; color: #087f8c; background: rgba(8,127,140,.09); border-radius: .75rem; }
.panel-title-icon.warning { color: #a87313; background: #fff5d9; }
.panel-title-icon.danger { color: #bd5058; background: #fdebed; }
.panel-title-icon .app-icon { width: 1.05rem; height: 1.05rem; }
.mobile-table { display: grid; gap: .35rem; margin-top: .65rem; }
.table-row { padding: .7rem .75rem; background: #f8fafc; border: 1px solid rgba(38,70,96,.07); border-radius: .72rem; transition: background .16s ease, transform .16s ease; }
.table-row:hover { background: #f3f8fa; transform: translateX(-2px); }
.table-row strong { font-size: .75rem; }
.table-row small { font-size: .75rem; }

.surface-card,
.panel-card,
.metric-card,
.filter-card,
.form-card,
.empty-state,
.data-table-card,
.toolbar-card,
.summary-card,
.subsection-card { backdrop-filter: blur(12px); }
.module-card { min-height: 9.5rem; padding: 1.15rem; border-radius: 1.15rem; }
.module-card h3 { font-size: .92rem; }
.module-card p { font-size: .75rem; }
.module-card:hover { transform: translateY(-4px); box-shadow: 0 1.1rem 2.7rem rgba(17,47,72,.11); }
.filter-card,
.toolbar-card { padding: .9rem; border-radius: 1.1rem; }
.text-input,
.select-input,
.textarea-input,
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea { min-height: 2.85rem; padding-inline: .8rem; background: rgba(248,250,252,.9); border-radius: .75rem; font-size: .75rem; }
.field label { font-size: .75rem; }
.primary-button,
.secondary-button,
.ghost-button,
.danger-button,
.success-button,
.icon-text-button { min-height: 2.8rem; padding-inline: 1rem; border-radius: .78rem; font-size: .75rem; }
.data-table { font-size: .75rem; }
.data-table th { padding: .85rem; }
.data-table td { padding: .85rem; }
.row-title { font-size: .75rem; }
.row-subtitle { font-size: .75rem; }

@keyframes aria-panel-in {
    from { opacity: 0; transform: translateY(.7rem) scale(.992); }
    to { opacity: 1; transform: none; }
}
@keyframes aria-card-in {
    from { opacity: 0; transform: translateY(.85rem); }
    to { opacity: 1; transform: none; }
}
@keyframes aria-live {
    50% { box-shadow: 0 0 0 .5rem rgba(78,224,165,0), 0 0 1rem rgba(78,224,165,.2); }
}

@media (max-width: 1120px) {
    .metrics-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters-grid,
    .form-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .action-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pool-command-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
    .metrics-grid,
    .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .filters-grid,
    .form-grid,
    .form-grid.three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .two-column-workspace { grid-template-columns: 1fr; }
    .content-split,
    .outlet-pos-layout,
    .personnel-report-layout,
    .settings-split { grid-template-columns: 1fr; }
    .sticky-panel { position: static; }
    .sticky-summary,
    .pos-cart-card { position: static; max-height: none; }
    .line-editor { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pos-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pool-command-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .personnel-summary { position: static; }
}

@media (max-width: 640px) {
    h1 { font-size: 1.18rem; }
    .page-header { align-items: stretch; flex-direction: column; }
    .dashboard-hero { min-height: 0; margin-inline: -.1rem; padding: 1.25rem; border-radius: 1.25rem; }
    .dashboard-hero h1 { font-size: 1.55rem; }
    .dashboard-hero-actions { width: 100%; align-items: stretch; }
    .dashboard-date { display: none; }
    .dashboard-refresh { width: 100%; }
    .dashboard-trust-row { gap: .4rem .7rem; }
    .page-actions > * { flex: 1; }
    .module-hero { min-height: 9rem; align-items: flex-start; flex-direction: column; }
    .module-hero .hero-actions { width: 100%; }
    .module-hero .hero-actions > * { flex: 1; }
    .module-grid,
    .metrics-grid,
    .cards-grid,
    .data-grid-layout,
    .filters-grid,
    .form-grid,
    .form-grid.two,
    .form-grid.three { grid-template-columns: 1fr; }
    .field.span-2,
    .field.span-full,
    .full-width { grid-column: auto; }
    .quick-stats { grid-template-columns: 1fr; }
    .dashboard-quick-stats { gap: .55rem; }
    .dashboard-quick-stats > div { grid-template-columns: auto 1fr auto; }
    .quick-stats > div + div::before { inset: 0 10% auto; width: auto; height: 1px; }
    .table-row { align-items: flex-start; flex-direction: column; }
    .table-number { min-width: 0; text-align: right; }
    .data-table.responsive-table thead { display: none; }
    .data-table.responsive-table,
    .data-table.responsive-table tbody,
    .data-table.responsive-table tr,
    .data-table.responsive-table td { display: block; width: 100%; }
    .data-table.responsive-table tr { padding: .65rem .7rem; border-bottom: 1px solid var(--line); }
    .data-table.responsive-table td { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; padding: .32rem 0; border: 0; text-align: left; }
    .data-table.responsive-table td::before { flex: 0 0 auto; content: attr(data-label); color: #7d8f9f; font-size: .75rem; text-align: right; }
    .data-table.responsive-table .actions-cell { justify-content: flex-end; padding-top: .55rem; }
    .data-table.responsive-table .actions-cell::before { display: none; }
    .modal-backdrop { align-items: end; padding: 0; }
    .modal-card,
    .modal-card.wide { width: 100%; max-height: 92dvh; border-radius: 1.15rem 1.15rem 0 0; }
    .stats-strip { display: grid; grid-template-columns: repeat(2, 1fr); }
    .stat-chip { min-width: 0; }
    .line-editor { grid-template-columns: 1fr; }
    .outlet-hero { align-items: flex-start; flex-direction: column; margin-inline: -.75rem; padding: 1rem; }
    .outlet-hero-copy { align-items: flex-start; }
    .outlet-symbol { width: 3rem; height: 3rem; font-size: 1.25rem; }
    .outlet-status { width: 100%; justify-content: space-between; }
    .pos-product-grid,
    .card-grid,
    .role-selector,
    .pool-command-grid,
    .pool-receipt-groups { grid-template-columns: 1fr; }
    .action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .entity-metrics { grid-template-columns: 1fr; }
    .reservation-hero { flex-direction: column; }
    .health-meta { display: none; }
    .license-hero,
    .database-health { align-items: flex-start; }
    .license-tools { grid-template-columns: 1fr; }
    .cart-line { grid-template-columns: minmax(0, 1fr) auto; }
    .cart-line > strong { grid-column: 1 / -1; text-align: left; }
    .billiards-grid { grid-template-columns: 1fr; }
    .billiards-actions { flex-direction: column; }
    .table-live-metrics { grid-template-columns: 1fr; }
}

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

@media print {
    body { background: #fff; }
    .page-actions,
    .period-tabs,
    .toolbar-card,
    button { display: none !important; }
    .panel-card,
    .metric-card,
    .data-table-card { box-shadow: none; break-inside: avoid; }
    .no-print,
    .app-sidebar,
    .outlet-hero,
    .outlet-tabs { display: none !important; }
    .receipt-modal { width: 100%; max-height: none; box-shadow: none; }
    body:has(.receipt-backdrop) > * { visibility: hidden !important; }
    .receipt-backdrop,
    .receipt-backdrop * { visibility: visible !important; }
    .receipt-backdrop {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        padding: 0 !important;
        background: #fff !important;
    }
    .thermal-receipt-80 .receipt-modal {
        width: 74mm !important;
        max-width: 74mm !important;
        margin: 0 auto !important;
        color: #000 !important;
        background: #fff !important;
        border: 0 !important;
        border-radius: 0 !important;
    }
    .thermal-receipt-80 .receipt-paper { padding: 2mm !important; font-size: 9pt !important; }
    .thermal-receipt-80 .receipt-lines > div { gap: 2mm; padding: 2mm 0; font-size: 9pt; }
    .thermal-receipt-80 .receipt-total { font-size: 10pt; }
    .thermal-receipt-80 .print-only { display: grid !important; gap: 1mm; margin-bottom: 3mm; text-align: center; }
    .thermal-receipt-80 .print-only h2 { margin: 0; font-size: 12pt; }
    .thermal-receipt-80 .stats-strip { grid-template-columns: 1fr !important; gap: 1mm !important; }
    .thermal-receipt-80 .stat-chip { padding: 1.5mm 0 !important; border: 0 !important; border-bottom: 1px dashed #555 !important; }
    .thermal-receipt-80 .pool-receipt-groups { display: block !important; }
    .thermal-receipt-80 .pool-receipt-group { margin-top: 2mm; border: 0 !important; border-top: 1px dashed #555 !important; border-radius: 0 !important; break-inside: avoid; }
}

.unit-conversion-panel {
    margin-top: .35rem;
    padding: .9rem;
    border-radius: 16px;
    border: 1px solid rgba(227, 178, 78, .34);
    background: linear-gradient(145deg, rgba(227, 178, 78, .09), rgba(14, 31, 51, .82));
}
.unit-conversion-heading { display: flex; align-items: baseline; justify-content: space-between; gap: .7rem; margin-bottom: .7rem; }
.unit-conversion-heading strong { color: #f0c76e; }
.unit-conversion-heading span { color: #a5b5c7; font-size: .8rem; }
.conversion-warning { margin-top: .65rem; padding: .65rem .75rem; border-radius: 12px; color: #d6dfE8; background: rgba(255, 255, 255, .04); line-height: 1.8; font-size: .82rem; }
@media (max-width: 720px) { .unit-conversion-heading { align-items: flex-start; flex-direction: column; } }

.purchase-line-editor { display: grid; grid-template-columns: minmax(210px, 1.8fr) repeat(7, minmax(110px, 1fr)) auto; gap: .6rem; align-items: end; }
.purchase-line-editor .field { min-width: 0; }
.purchase-line-editor small { color: #8fa4b9; line-height: 1.55; }
.purchase-lines-card select { min-width: 145px; }
.purchase-lines-card .inline-number { min-width: 105px; }
@media (max-width: 1450px) { .purchase-line-editor { grid-template-columns: repeat(4, minmax(150px, 1fr)); } .purchase-product-field { grid-column: span 2; } }
@media (max-width: 820px) { .purchase-line-editor { grid-template-columns: 1fr 1fr; } .purchase-product-field { grid-column: 1 / -1; } }
@media (max-width: 520px) { .purchase-line-editor { grid-template-columns: 1fr; } .purchase-product-field { grid-column: auto; } }

.customer-delete-modal { width: min(620px, calc(100% - 1rem)); }
.danger-head { background: radial-gradient(circle at 15% 10%, rgba(214, 70, 84, .17), transparent 42%); }
.customer-delete-checklist { margin-bottom: .8rem; padding: .8rem; border-radius: 14px; border: 1px solid rgba(208, 80, 94, .23); background: rgba(208, 80, 94, .07); display: grid; gap: .42rem; }
.customer-delete-checklist span { color: #b9c7d5; padding-right: 1.1rem; position: relative; }
.customer-delete-checklist span::before { content: "•"; position: absolute; right: .2rem; color: #ef9a9f; }

/* Backup and disaster-recovery command center */
.backup-command-center { display: grid; gap: .8rem; }
.backup-hero-card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 1.2rem;
    align-items: center;
    padding: clamp(1rem, 2.4vw, 1.45rem);
    overflow: hidden;
    color: #eef7fb;
    background:
        radial-gradient(circle at 8% 12%, rgba(226, 178, 73, .2), transparent 34%),
        linear-gradient(135deg, #123e58, #0a253b 72%);
    border: 1px solid rgba(226, 178, 73, .28);
    border-radius: 1.25rem;
    box-shadow: 0 1rem 2.8rem rgba(8, 39, 61, .18);
}
.backup-hero-copy { position: relative; z-index: 1; min-width: 0; }
.backup-hero-copy .eyebrow { color: #e7c16e; }
.backup-hero-copy h2 { margin: .3rem 0 .4rem; color: #fff; font-size: clamp(1.05rem, 2vw, 1.35rem); }
.backup-hero-copy p { max-width: 58rem; margin: 0; color: #cad9e5; font-size: .78rem; line-height: 2; }
.backup-component-list { display: flex; flex-wrap: wrap; gap: .42rem; margin-top: .8rem; }
.backup-component-list span { padding: .32rem .58rem; color: #eef7fb; background: rgba(255,255,255,.075); border: 1px solid rgba(255,255,255,.1); border-radius: 2rem; font-size: .7rem; }
.backup-create-button { min-width: 13.5rem; min-height: 3.1rem; box-shadow: 0 .7rem 1.8rem rgba(0,0,0,.18); }
.backup-health-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .65rem; }
.backup-health-grid article { min-width: 0; padding: .85rem .9rem; background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: .95rem; box-shadow: var(--shadow-sm); }
.backup-health-grid span,
.backup-health-grid strong { display: block; }
.backup-health-grid span { color: #718598; font-size: .7rem; }
.backup-health-grid strong { margin-top: .38rem; overflow-wrap: anywhere; color: var(--ink); font-size: .82rem; line-height: 1.7; }
.backup-storage-card { display: grid; grid-template-columns: minmax(12rem, .7fr) minmax(18rem, 1.3fr); gap: 1rem; align-items: center; padding: .85rem 1rem; background: #f8fbfc; border: 1px solid rgba(24, 101, 129, .16); border-radius: 1rem; box-shadow: var(--shadow-sm); }
.backup-storage-card span,
.backup-storage-card small { display: block; }
.backup-storage-card span { color: var(--ink); font-size: .78rem; font-weight: 800; }
.backup-storage-card small { margin-top: .2rem; color: #6f8496; font-size: .7rem; line-height: 1.75; }
.backup-storage-card code { width: 100%; padding: .7rem .8rem; overflow-x: auto; color: #eff8fc; background: #102c41; border: 1px solid rgba(28, 112, 143, .3); border-radius: .75rem; text-align: left; white-space: nowrap; user-select: all; }
.backup-busy-state { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; color: #23495f; background: #eaf6fa; border: 1px solid #c8e5ee; border-radius: .9rem; }
.backup-busy-state strong,
.backup-busy-state small { display: block; }
.backup-busy-state small { margin-top: .16rem; color: #56788d; font-size: .7rem; line-height: 1.7; }
.backup-table-card { border-radius: 1rem; }
.backup-row-detail { display: block; max-width: 24rem; margin-top: .22rem; color: #7a8e9f; font-size: .68rem; line-height: 1.7; white-space: normal; }

@media (max-width: 980px) {
    .backup-hero-card { grid-template-columns: 1fr; }
    .backup-create-button { width: 100%; }
    .backup-health-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .backup-storage-card { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .backup-hero-card { padding: 1rem; border-radius: 1rem; }
    .backup-component-list { display: grid; grid-template-columns: 1fr; }
    .backup-health-grid { grid-template-columns: 1fr; }
    .backup-storage-card { padding: .75rem; }
    .backup-storage-card code { font-size: .68rem; }
    .backup-busy-state { align-items: flex-start; }
    .backup-table-card .row-actions { width: 100%; justify-content: flex-start; flex-wrap: wrap; }
}
.vip-section-navigation { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.vip-section-navigation a { min-height:44px; display:inline-flex; align-items:center; gap:8px; }