:root {
    color-scheme: light;
    --paper: #fbfaf7;
    --paper-strong: #ffffff;
    --canvas: #f3eee6;
    --canvas-deep: #eae2d7;
    --ink: #171916;
    --ink-soft: #5f625c;
    --ink-faint: #898b84;
    --line: #ded8ce;
    --line-strong: #c8beb0;
    --gold: #b89055;
    --gold-deep: #8e6938;
    --gold-soft: #efe2cd;
    --rose: #b4745e;
    --green: #55766c;
    --green-soft: #dce8e3;
    --red: #a74949;
    --red-soft: #f3dddd;
    --purple: #725f91;
    --blue: #4b7082;
    --shadow: 0 16px 40px rgba(37, 31, 24, .10);
    --shadow-soft: 0 7px 20px rgba(37, 31, 24, .07);
    --radius: 18px;
    --radius-sm: 11px;
    --sidebar-width: 236px;
    --topbar-height: 72px;
    --ease: 180ms cubic-bezier(.2, .7, .2, 1);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

html[data-theme="dark"] {
    color-scheme: dark;
    --paper: #1a1c19;
    --paper-strong: #232622;
    --canvas: #111310;
    --canvas-deep: #0b0d0b;
    --ink: #f7f2e9;
    --ink-soft: #c1c0b9;
    --ink-faint: #898e86;
    --line: #383c36;
    --line-strong: #4c524a;
    --gold: #d6b173;
    --gold-deep: #edc88b;
    --gold-soft: #443925;
    --green: #8ab5a7;
    --green-soft: #243b34;
    --red: #e08a8a;
    --red-soft: #482727;
    --purple: #ae96d0;
    --blue: #83afc2;
    --shadow: 0 18px 46px rgba(0, 0, 0, .30);
    --shadow-soft: 0 7px 20px rgba(0, 0, 0, .22);
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { background: var(--canvas); color: var(--ink); overflow-x: hidden; }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img { display: block; max-width: 100%; }
.hidden { display: none !important; }
.muted { color: var(--ink-soft); }
.tiny { font-size: .76rem; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.skip-link { position: fixed; z-index: 9999; left: 12px; top: -100px; background: var(--ink); color: var(--paper); padding: 10px 16px; border-radius: 8px; }
.skip-link:focus { top: 12px; }

.launch-screen { min-height: 100vh; display: grid; place-content: center; gap: 20px; text-align: center; color: var(--ink-soft); }
.launch-logo { width: min(420px, 76vw); padding: 24px; border-radius: 20px; background: #fbfaf7; box-shadow: var(--shadow); }
.launch-rule { width: 70px; height: 2px; margin: auto; background: var(--gold); }

.login-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(350px, 42%) 1fr; }
.login-panel { display: grid; align-content: center; gap: 28px; padding: clamp(32px, 6vw, 88px); background: var(--paper); }
.login-brand { width: min(430px, 100%); padding: 18px 20px; border-radius: 16px; background: #fbfaf7; }
.login-copy h1 { margin: 0 0 10px; font-family: Georgia, "Times New Roman", serif; font-weight: 500; font-size: clamp(2rem, 4vw, 3.7rem); line-height: 1; }
.login-copy p { color: var(--ink-soft); margin: 0; max-width: 580px; }
.login-form { max-width: 440px; display: grid; gap: 15px; }
.login-visual { position: relative; overflow: hidden; display: grid; align-content: end; padding: clamp(32px, 6vw, 88px); background:
    radial-gradient(circle at 20% 20%, rgba(230, 202, 163, .75), transparent 28%),
    radial-gradient(circle at 75% 35%, rgba(181, 107, 134, .36), transparent 33%),
    radial-gradient(circle at 60% 82%, rgba(85, 118, 108, .43), transparent 32%),
    linear-gradient(135deg, #ddc9aa, #806d61 48%, #29322d);
}
.login-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 45%, rgba(10, 13, 11, .72)); }
.login-visual-copy { position: relative; z-index: 1; max-width: 650px; color: #fff; }
.login-visual-copy h2 { font-family: Georgia, serif; font-size: clamp(2.3rem, 5vw, 5.3rem); font-weight: 400; line-height: .95; margin: 0 0 18px; }
.login-visual-copy p { font-size: 1.08rem; max-width: 580px; color: rgba(255,255,255,.78); }

.field { display: grid; gap: 7px; }
.field > span, .field label { font-weight: 680; font-size: .82rem; letter-spacing: .01em; }
.field input, .field select, .field textarea, .input { width: 100%; min-height: 46px; padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--paper-strong); color: var(--ink); outline: none; transition: border var(--ease), box-shadow var(--ease); }
.field textarea { min-height: 98px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 20%, transparent); }
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.field-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.check-field { display: flex; align-items: center; gap: 8px; min-height: 42px; }
.check-field input { width: 18px; height: 18px; accent-color: var(--gold-deep); }

.button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 15px; border-radius: 11px; border: 1px solid transparent; background: var(--paper-strong); color: var(--ink); font-weight: 720; cursor: pointer; transition: transform var(--ease), border var(--ease), background var(--ease), color var(--ease); text-decoration: none; }
.button:hover { transform: translateY(-1px); }
.button:active { transform: translateY(0); }
.button:focus-visible { outline: 3px solid color-mix(in srgb, var(--gold) 42%, transparent); outline-offset: 2px; }
.button.primary { background: var(--ink); color: var(--paper-strong); }
html[data-theme="dark"] .button.primary { background: var(--gold); color: #171916; }
.button.gold { background: var(--gold); color: #171916; }
.button.ghost { background: transparent; border-color: var(--line); }
.button.soft { background: var(--gold-soft); color: var(--gold-deep); }
.button.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 40%, var(--line)); background: var(--red-soft); }
.button.small { min-height: 36px; padding: 6px 10px; font-size: .8rem; }
.button.icon { width: 44px; padding: 0; }
.button[disabled] { opacity: .5; pointer-events: none; }

.app-shell { height: 100dvh; display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); grid-template-rows: var(--topbar-height) minmax(0, 1fr); overflow: hidden; }
.sidebar { grid-row: 1 / -1; position: relative; z-index: 30; display: flex; flex-direction: column; min-width: 0; background: #151713; color: #f7f2e9; border-right: 1px solid rgba(255,255,255,.07); }
.brand-block { height: var(--topbar-height); flex: 0 0 var(--topbar-height); display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.brand-block img { width: 100%; height: 51px; object-fit: contain; padding: 7px 9px; border-radius: 10px; background: #fbfaf7; }
.nav-list { flex: 1; min-height: 0; overflow-y: auto; padding: 12px 9px; display: grid; align-content: start; gap: 3px; scrollbar-width: thin; }
.nav-group-label { margin: 14px 10px 5px; color: rgba(255,255,255,.43); font-size: .65rem; letter-spacing: .15em; text-transform: uppercase; font-weight: 800; }
.nav-button { position: relative; width: 100%; min-height: 42px; display: grid; grid-template-columns: 27px 1fr auto; align-items: center; gap: 9px; padding: 8px 11px; border: 0; border-radius: 10px; color: rgba(255,255,255,.68); background: transparent; text-align: left; font-weight: 660; cursor: pointer; }
.nav-button:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-button.active { color: #171916; background: #e5c58f; }
.nav-icon { width: 24px; height: 24px; display: grid; place-items: center; font-size: 1rem; }
.nav-count { min-width: 22px; height: 22px; display: inline-grid; place-items: center; padding: 0 5px; border-radius: 99px; background: rgba(255,255,255,.11); font-size: .69rem; }
.nav-button.active .nav-count { background: rgba(0,0,0,.12); }
.sidebar-foot { padding: 12px; border-top: 1px solid rgba(255,255,255,.08); display: grid; gap: 9px; }
.demo-badge { padding: 8px 10px; border: 1px solid rgba(229,197,143,.25); border-radius: 10px; color: #e5c58f; background: rgba(229,197,143,.08); font-size: .72rem; line-height: 1.35; }

.topbar { grid-column: 2; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 10px 18px; background: color-mix(in srgb, var(--paper) 94%, transparent); border-bottom: 1px solid var(--line); backdrop-filter: blur(16px); }
.menu-toggle { display: none; }
.topbar-title { min-width: 0; flex: 1; }
.topbar-title h1 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 1.42rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-title p { margin: 2px 0 0; color: var(--ink-soft); font-size: .72rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar-actions { display: flex; align-items: center; gap: 7px; }
.location-chip { max-width: 210px; display: flex; align-items: center; gap: 7px; min-height: 38px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 99px; background: var(--paper-strong); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 17%, transparent); }
.user-menu { min-width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--ink); color: var(--paper); font-size: .75rem; font-weight: 800; cursor: pointer; }

.workspace { grid-column: 2; min-width: 0; min-height: 0; overflow: hidden; }
.view { width: 100%; height: 100%; overflow: auto; padding: 18px; }
.view.fixed { overflow: hidden; }
.view-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 17px; }
.view-header h2 { margin: 0; font-family: Georgia, serif; font-size: clamp(1.55rem, 3vw, 2.2rem); font-weight: 500; }
.view-header p { margin: 5px 0 0; color: var(--ink-soft); font-size: .88rem; }
.header-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.eyebrow { margin: 0 0 8px; color: var(--gold-deep); font-size: .68rem; letter-spacing: .16em; font-weight: 850; text-transform: uppercase; }
.section-title { margin: 0 0 11px; font-size: 1rem; }
.surface { border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); box-shadow: var(--shadow-soft); }
.surface-head { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 15px; border-bottom: 1px solid var(--line); }
.surface-head h3 { margin: 0; font-size: .92rem; }
.surface-body { padding: 15px; }

.metric-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 11px; margin-bottom: 16px; }
.metric { position: relative; min-height: 105px; padding: 14px; overflow: hidden; }
.metric::after { content: ""; position: absolute; width: 80px; height: 80px; right: -24px; bottom: -30px; border-radius: 50%; background: var(--gold-soft); opacity: .8; }
.metric-label { color: var(--ink-soft); font-size: .73rem; font-weight: 690; }
.metric-value { margin: 9px 0 2px; font-family: Georgia, serif; font-size: 2rem; line-height: 1; }
.metric-meta { color: var(--ink-faint); font-size: .7rem; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .8fr); gap: 15px; }
.agenda { display: grid; gap: 8px; }
.agenda-row { display: grid; grid-template-columns: 72px 1fr auto; gap: 11px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper-strong); }
.agenda-time { font-weight: 800; font-size: .82rem; }
.agenda-main strong { display: block; font-size: .88rem; }
.agenda-main span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .73rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.badge { display: inline-flex; align-items: center; gap: 5px; min-height: 24px; padding: 3px 8px; border-radius: 99px; background: var(--canvas-deep); color: var(--ink-soft); font-size: .68rem; font-weight: 750; text-transform: capitalize; white-space: nowrap; }
.badge.success, .badge.active, .badge.completed, .badge.verified, .badge.approved { background: var(--green-soft); color: var(--green); }
.badge.pending, .badge.submitted, .badge.in_progress, .badge.preparing, .badge.arrived, .badge.checked_in { background: var(--gold-soft); color: var(--gold-deep); }
.badge.danger, .badge.blocked, .badge.expired, .badge.cancelled, .badge.recalled { background: var(--red-soft); color: var(--red); }
.badge.clinical { background: color-mix(in srgb, var(--purple) 16%, var(--paper)); color: var(--purple); }

.data-toolbar { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.search-box { position: relative; flex: 1; min-width: 150px; }
.search-box input { width: 100%; height: 43px; padding: 9px 39px 9px 13px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-strong); color: var(--ink); outline: 0; }
.search-box::after { content: "⌕"; position: absolute; right: 13px; top: 9px; color: var(--ink-faint); font-size: 1.2rem; }
.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); }
.data-table { width: 100%; border-collapse: collapse; font-size: .79rem; }
.data-table th { position: sticky; top: 0; z-index: 2; padding: 10px 12px; background: var(--canvas-deep); color: var(--ink-soft); text-align: left; font-size: .66rem; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.data-table td { padding: 11px 12px; border-top: 1px solid var(--line); vertical-align: middle; }
.data-table tbody tr { background: var(--paper); cursor: default; }
.data-table tbody tr:hover { background: color-mix(in srgb, var(--gold-soft) 38%, var(--paper)); }
.primary-cell strong { display: block; font-size: .83rem; }
.primary-cell span { display: block; color: var(--ink-soft); font-size: .7rem; margin-top: 2px; }
.empty-state { min-height: 220px; display: grid; place-content: center; gap: 8px; padding: 30px; text-align: center; color: var(--ink-soft); }
.empty-state strong { color: var(--ink); font-family: Georgia, serif; font-size: 1.4rem; font-weight: 500; }

.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.entity-card { padding: 14px; }
.entity-card-head { display: flex; align-items: center; gap: 11px; }
.avatar { flex: 0 0 auto; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 13px; background: var(--avatar-color, var(--gold)); color: #fff; font-weight: 850; font-size: .78rem; }
.entity-card h3 { margin: 0; font-size: .92rem; }
.entity-card p { margin: 4px 0 0; color: var(--ink-soft); font-size: .73rem; }
.entity-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 7px; margin-top: 13px; }
.entity-stat { padding: 8px; border-radius: 9px; background: var(--canvas); }
.entity-stat strong { display: block; font-size: .85rem; }
.entity-stat span { color: var(--ink-soft); font-size: .66rem; }

.pos-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(330px, 390px); gap: 12px; }
.pos-catalog { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr); overflow: hidden; }
.pos-toolbar { display: flex; align-items: center; gap: 8px; padding: 10px; border-bottom: 1px solid var(--line); }
.provider-strip { display: flex; gap: 8px; padding: 10px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.provider-button { flex: 0 0 118px; min-height: 75px; padding: 8px; display: grid; grid-template-columns: 31px 1fr; align-content: center; gap: 7px; border: 1px solid var(--line); border-radius: 13px; background: var(--paper-strong); cursor: pointer; text-align: left; }
.provider-button:hover, .provider-button.active { border-color: var(--provider-color, var(--gold)); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--provider-color, var(--gold)) 34%, transparent); background: color-mix(in srgb, var(--provider-color, var(--gold)) 8%, var(--paper)); }
.provider-button .avatar { width: 31px; height: 31px; border-radius: 9px; grid-row: span 2; }
.provider-button strong { font-size: .72rem; line-height: 1.12; }
.provider-button span { color: var(--ink-soft); font-size: .62rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.products-button { --provider-color: var(--gold); }
.catalog-scroll { min-height: 0; overflow-y: auto; padding: 10px; }
.category-strip { display: flex; gap: 7px; overflow-x: auto; margin-bottom: 9px; padding-bottom: 2px; }
.category-button { flex: 0 0 auto; min-height: 35px; padding: 6px 11px; border-radius: 99px; border: 1px solid var(--line); background: var(--paper-strong); font-size: .71rem; font-weight: 750; cursor: pointer; }
.category-button.active { background: var(--gold-soft); color: var(--gold-deep); border-color: var(--gold); }
.tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 8px; align-content: start; }
.item-tile { position: relative; min-height: 125px; padding: 11px; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; overflow: hidden; border: 1px solid var(--line); border-radius: 13px; background: var(--paper-strong); cursor: pointer; text-align: left; }
.item-tile::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--tile-color, var(--gold)); }
.item-tile:hover { border-color: var(--tile-color, var(--gold)); transform: translateY(-1px); box-shadow: var(--shadow-soft); }
.item-tile strong { font-size: .78rem; line-height: 1.2; }
.item-tile p { margin: 4px 0 0; color: var(--ink-soft); font-size: .64rem; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-price { display: flex; align-items: flex-end; justify-content: space-between; gap: 5px; }
.tile-price b { font-family: Georgia, serif; font-size: 1rem; }
.tile-meta { color: var(--ink-faint); font-size: .6rem; }

.cart-panel { min-width: 0; min-height: 0; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
.cart-head { padding: 11px 13px; border-bottom: 1px solid var(--line); }
.cart-head-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.cart-head h3 { margin: 0; font-size: .94rem; }
.customer-picker { width: 100%; margin-top: 9px; min-height: 39px; border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--paper-strong); color: var(--ink); }
.cart-lines { min-height: 0; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 7px; }
.cart-line { padding: 9px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-strong); }
.cart-line-top { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.cart-line-title { min-width: 0; }
.cart-line-title strong { display: block; font-size: .76rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cart-line-title span { display: block; margin-top: 3px; color: var(--ink-soft); font-size: .64rem; }
.cart-line-total { font-weight: 820; font-size: .78rem; }
.cart-line-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 7px; }
.quantity-control { display: flex; align-items: center; gap: 4px; }
.quantity-control button { width: 29px; height: 29px; border: 1px solid var(--line); border-radius: 7px; background: var(--canvas); cursor: pointer; }
.quantity-value { min-width: 31px; height: 29px; display: grid; place-items: center; border-radius: 7px; background: var(--ink); color: var(--paper); font-size: .7rem; font-weight: 800; }
.requirement-pill { min-height: 26px; padding: 4px 8px; border-radius: 8px; border: 0; font-size: .64rem; font-weight: 800; cursor: pointer; }
.requirement-pill.pending, .requirement-pill.blocked { background: var(--red-soft); color: var(--red); }
.requirement-pill.verified { background: var(--green-soft); color: var(--green); }
.cart-empty { min-height: 100%; display: grid; place-content: center; gap: 6px; text-align: center; color: var(--ink-soft); }
.cart-empty strong { font-family: Georgia, serif; color: var(--ink); font-weight: 500; font-size: 1.2rem; }
.cart-summary { padding: 11px 13px 13px; border-top: 1px solid var(--line); background: var(--paper); }
.summary-line { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 5px; color: var(--ink-soft); font-size: .72rem; }
.summary-total { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 9px 0 10px; border-top: 1px solid var(--line); margin-top: 7px; }
.summary-total strong { font-size: .86rem; }
.summary-total b { font-family: Georgia, serif; font-size: 1.55rem; }
.checkout-button { width: 100%; min-height: 48px; }

.calendar-layout { height: calc(100% - 0px); display: grid; grid-template-rows: auto minmax(0,1fr); gap: 12px; }
.calendar-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.date-controls { display: flex; align-items: center; gap: 6px; }
.calendar-board { min-height: 0; overflow: auto; padding: 10px; }
.calendar-day { min-width: 740px; display: grid; grid-template-columns: 74px repeat(var(--provider-count,5), minmax(150px,1fr)); align-items: stretch; }
.calendar-corner, .calendar-provider-head { position: sticky; top: 0; z-index: 7; min-height: 58px; padding: 8px; border-bottom: 1px solid var(--line); background: var(--paper); }
.calendar-provider-head { display: flex; align-items: center; gap: 7px; border-left: 1px solid var(--line); }
.calendar-provider-head strong { font-size: .73rem; }
.time-label { min-height: 60px; padding: 5px 8px; border-bottom: 1px solid var(--line); color: var(--ink-soft); font-size: .65rem; text-align: right; }
.time-cell { position: relative; min-height: 60px; border-left: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(to bottom, transparent 49%, color-mix(in srgb,var(--line) 45%,transparent) 50%, transparent 51%); }
.appointment-card { position: absolute; z-index: 3; inset: 3px 4px auto; min-height: 52px; padding: 6px 7px; overflow: hidden; border-left: 4px solid var(--appt-color,var(--gold)); border-radius: 8px; background: color-mix(in srgb,var(--appt-color,var(--gold)) 14%,var(--paper-strong)); box-shadow: var(--shadow-soft); cursor: pointer; }
.appointment-card strong { display: block; font-size: .67rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.appointment-card span { display: block; color: var(--ink-soft); font-size: .59rem; margin-top: 2px; }

.booking-layout { display: grid; grid-template-columns: minmax(260px,.8fr) minmax(0,1.4fr); gap: 14px; }
.service-select-list { max-height: 380px; overflow: auto; display: grid; gap: 7px; }
.service-select { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-strong); cursor: pointer; }
.service-select input { width: 18px; height: 18px; accent-color: var(--gold); }
.service-select strong { font-size: .78rem; }
.service-select span { display: block; color: var(--ink-soft); font-size: .66rem; margin-top: 2px; }
.itinerary-results { display: grid; gap: 9px; max-height: 530px; overflow: auto; }
.itinerary-card { padding: 13px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-strong); }
.itinerary-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.itinerary-top h4 { margin: 0; font-size: .9rem; }
.itinerary-top p { margin: 3px 0 0; color: var(--ink-soft); font-size: .68rem; }
.itinerary-segments { display: grid; gap: 5px; margin: 10px 0; }
.itinerary-segment { display: grid; grid-template-columns: 62px 1fr auto; gap: 8px; align-items: center; padding: 7px 8px; border-radius: 8px; background: var(--canvas); font-size: .68rem; }

.workflow-board { display: grid; grid-template-columns: repeat(auto-fit,minmax(210px,1fr)); gap: 11px; align-items: start; }
.workflow-column { padding: 10px; }
.workflow-column h3 { margin: 2px 2px 10px; font-size: .8rem; display: flex; justify-content: space-between; }
.workflow-card { padding: 10px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-strong); }
.workflow-card strong { display: block; font-size: .76rem; }
.workflow-card p { margin: 4px 0 8px; color: var(--ink-soft); font-size: .66rem; }

.modal-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(9, 11, 9, .58); backdrop-filter: blur(7px); animation: fade-in var(--ease); }
.modal { width: min(760px, 100%); max-height: min(90dvh, 900px); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 30px 90px rgba(0,0,0,.28); animation: modal-in var(--ease); }
.modal.wide { width: min(1080px, 100%); }
.modal-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-family: Georgia, serif; font-weight: 500; font-size: 1.5rem; }
.modal-head p { margin: 4px 0 0; color: var(--ink-soft); font-size: .76rem; }
.modal-body { overflow: auto; padding: 17px 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--line); background: var(--canvas); }
.modal-close { width: 37px; height: 37px; border-radius: 50%; border: 1px solid var(--line); background: transparent; cursor: pointer; }

.payment-grid { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 14px; }
.payment-due { padding: 18px; text-align: center; background: var(--ink); color: var(--paper); border-radius: 16px; }
.payment-due span { display: block; font-size: .72rem; color: color-mix(in srgb,var(--paper) 65%,transparent); }
.payment-due strong { display: block; margin-top: 5px; font-family: Georgia,serif; font-size: 2.6rem; }
.tip-options { display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; margin: 10px 0; }
.tip-option { min-height: 47px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-strong); cursor: pointer; font-weight: 750; }
.tip-option.active { border-color: var(--gold); background: var(--gold-soft); color: var(--gold-deep); }
.tender-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; }
.tender { min-height: 70px; display: grid; place-content: center; gap: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-strong); cursor: pointer; text-align: center; }
.tender.active { border-color: var(--gold); background: var(--gold-soft); }
.paybotx { padding: 14px; border-radius: 14px; background: linear-gradient(145deg,#0c1723,#102f45); color: white; }
.paybotx-mark { font-weight: 900; letter-spacing: .08em; }
.paybotx-countdown { width: 80px; height: 80px; display: grid; place-items: center; margin: 22px auto; border: 6px solid rgba(255,255,255,.16); border-top-color: #57d5ff; border-radius: 50%; font-size: 1.35rem; font-weight: 850; }

.toast-region { position: fixed; z-index: 2000; right: 18px; bottom: 18px; width: min(380px, calc(100vw - 36px)); display: grid; gap: 8px; pointer-events: none; }
.toast { padding: 12px 14px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 12px; background: var(--paper-strong); box-shadow: var(--shadow); font-size: .78rem; animation: toast-in 240ms ease; }
.toast.error { border-left-color: var(--red); }

.loading-bar { height: 3px; background: linear-gradient(90deg,transparent,var(--gold),transparent); background-size: 220% 100%; animation: loading 1.2s infinite linear; }
.skeleton { color: transparent !important; border-radius: 7px; background: linear-gradient(90deg,var(--canvas-deep),var(--paper),var(--canvas-deep)); background-size: 200% 100%; animation: loading 1.3s infinite linear; }

@keyframes loading { to { background-position: -200% 0; } }
@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { transform: translateY(12px) scale(.985); opacity: .6; } }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

@media (max-width: 1220px) {
    :root { --sidebar-width: 210px; }
    .metric-grid { grid-template-columns: repeat(3,1fr); }
    .pos-layout { grid-template-columns: minmax(0,1fr) 340px; }
}

@media (max-width: 900px) {
    :root { --sidebar-width: 230px; --topbar-height: 64px; }
    .app-shell { grid-template-columns: minmax(0,1fr); grid-template-rows: var(--topbar-height) minmax(0,1fr); }
    .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-width); transform: translateX(-105%); transition: transform var(--ease); box-shadow: 12px 0 50px rgba(0,0,0,.25); }
    .app-shell.menu-open .sidebar { transform: translateX(0); }
    .app-shell.menu-open::after { content:""; position:fixed; z-index:20; inset:0; background:rgba(0,0,0,.4); }
    .topbar, .workspace { grid-column: 1; }
    .menu-toggle { display: inline-flex; }
    .topbar { padding: 8px 11px; }
    .location-chip { display:none; }
    .view { padding: 12px; }
    .dashboard-grid { grid-template-columns: 1fr; }
    .pos-layout { grid-template-columns: minmax(0,1fr) 320px; }
    .booking-layout, .payment-grid { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .login-shell { grid-template-columns: 1fr; }
    .login-panel { padding: 28px 22px; }
    .login-visual { display: none; }
    .metric-grid { grid-template-columns: repeat(2,1px); grid-template-columns: repeat(2,minmax(0,1fr)); }
    .view-header { align-items: stretch; flex-direction: column; }
    .header-actions { justify-content:flex-start; }
    .field-row, .field-row.three { grid-template-columns: 1fr; }
    .pos-layout { display: grid; grid-template-columns: 1fr; grid-template-rows: minmax(0,1fr) 48%; gap: 8px; }
    .provider-strip { padding: 7px; }
    .provider-button { flex-basis: 104px; min-height: 66px; }
    .tile-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
    .item-tile { min-height: 108px; padding: 9px; }
    .cart-panel { border-radius: 14px; }
    .calendar-day { min-width: 670px; }
    .modal-backdrop { align-items: end; padding: 0; }
    .modal { width:100%; max-height:94dvh; border-radius:20px 20px 0 0; }
    .payment-grid { gap: 10px; }
    .data-toolbar { flex-wrap: wrap; }
}

@media (max-width: 430px) {
    .topbar-title p { display:none; }
    .topbar-title h1 { font-size:1.15rem; }
    .topbar-actions .button:not(.icon) { display:none; }
    .metric { min-height:90px; padding:11px; }
    .metric-value { font-size:1.65rem; }
    .tile-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .agenda-row { grid-template-columns:60px 1fr; }
    .agenda-row .badge { display:none; }
    .tip-options { grid-template-columns:repeat(2,1fr); }
    .tender-grid { grid-template-columns:1fr 1fr; }
}

/* Governed reporting and expanded Med Spa */
.report-shell{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start}
.report-library{position:sticky;top:0;max-height:calc(100dvh - 150px);overflow:hidden}
.report-library-scroll{padding:4px 10px 14px;max-height:calc(100dvh - 225px);overflow-y:auto;overscroll-behavior:contain}
.report-group{display:grid;gap:5px;margin:10px 0 16px}
.report-group>span{padding:0 8px;color:var(--muted);font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase}
.report-link{display:grid;gap:3px;width:100%;padding:10px;border:1px solid transparent;border-radius:12px;background:transparent;color:var(--ink);text-align:left;cursor:pointer}
.report-link small{color:var(--muted);font-size:.72rem;line-height:1.3}
.report-link:hover{background:var(--soft)}
.report-link.active{border-color:color-mix(in srgb,var(--gold) 52%,transparent);background:color-mix(in srgb,var(--gold) 12%,var(--surface));box-shadow:inset 3px 0 var(--gold)}
.report-main{display:grid;gap:14px;min-width:0}
.report-toolbar{display:grid;grid-template-columns:minmax(260px,1fr) auto;gap:18px;padding:18px}
.report-toolbar h2,.report-cover h2{margin:2px 0 5px;font-family:var(--display);font-size:1.65rem}
.report-toolbar p,.report-cover p,.report-section .surface-head p{margin:0;color:var(--muted)}
.report-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.report-controls .field{min-width:140px}
.report-output{display:grid;gap:14px}
.report-cover{display:grid;grid-template-columns:1fr auto;gap:18px;padding:20px;border-radius:18px;color:#fff;background:linear-gradient(130deg,#1b3430,#31574e);box-shadow:var(--shadow)}
.report-cover p,.report-cover .eyebrow{color:#d9e4dd}
.report-meta{display:grid;align-content:center;gap:4px;text-align:right;font-size:.8rem;color:#eaf0ec}
.report-kpis{display:grid;grid-template-columns:repeat(6,minmax(120px,1fr));gap:10px}
.report-kpi{display:grid;gap:5px;padding:14px;min-height:105px}
.report-kpi span,.report-kpi small{color:var(--muted)}
.report-kpi span{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.05em}
.report-kpi strong{font-family:var(--display);font-size:1.45rem;color:var(--ink)}
.report-kpi small{font-size:.72rem;line-height:1.3}
.report-chart{padding-bottom:14px;overflow:hidden}
.report-bars{display:grid;gap:8px;padding:2px 16px 4px}
.report-bar-row{display:grid;grid-template-columns:minmax(90px,160px) minmax(100px,1fr) 100px;gap:10px;align-items:center;font-size:.76rem}
.report-bar-row>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--muted)}
.report-bar-row>div{height:12px;overflow:hidden;border-radius:999px;background:var(--soft)}
.report-bar-row i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--sage),var(--gold))}
.report-bar-row strong{text-align:right}
.report-section{overflow:hidden}
.report-section>.surface-head{align-items:flex-start}
.report-table{min-width:720px}
.report-table td.numeric,.report-table th.numeric{text-align:right;font-variant-numeric:tabular-nums}
.report-signoff{display:flex;justify-content:space-between;gap:12px;padding:10px 4px;color:var(--muted);font-size:.72rem}
.report-signoff strong{color:var(--gold);text-transform:uppercase;letter-spacing:.05em}
.medspa-grid{align-items:start;margin:14px 0}
.danger-soft{background:color-mix(in srgb,#b54b4b 10%,var(--surface));color:#a03939;border-color:color-mix(in srgb,#b54b4b 28%,transparent)}

@media (max-width:1180px){
  .report-kpis{grid-template-columns:repeat(3,minmax(120px,1fr))}
  .report-toolbar{grid-template-columns:1fr}
  .report-controls{justify-content:flex-start}
}
@media (max-width:900px){
  .report-shell{grid-template-columns:1fr}
  .report-library{position:static;max-height:none}
  .report-library-scroll{display:flex;gap:8px;max-height:none;overflow-x:auto;padding:8px 12px 14px}
  .report-group{display:flex;min-width:max-content;margin:0}
  .report-group>span{display:none}
  .report-link{width:190px}
}
@media (max-width:680px){
  .report-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .report-cover{grid-template-columns:1fr}
  .report-meta{text-align:left}
  .report-controls{display:grid;grid-template-columns:1fr 1fr}
  .report-controls .button{width:100%}
  .report-bar-row{grid-template-columns:90px minmax(70px,1fr) 76px;gap:6px}
  .report-signoff{display:grid}
}

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