:root {
    --cjf-red: #ef3438;
    --cjf-blue: #0f4c9a;
    --cjf-navy: #172033;
    --app-bg: #eef3f8;
    --card: #ffffff;
    --muted: #657086;
    --line: #dfe6ee;
    --success: #16805b;
    --shadow: 0 10px 30px rgba(23, 32, 51, .08);
    font-family: Arial, Helvetica, sans-serif;
    color: var(--cjf-navy);
    background: var(--app-bg);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--app-bg); }
body { padding: 72px 0 88px; }
button, a { font: inherit; }
button { color: inherit; }

.app-header {
    position: fixed;
    inset: 0 0 auto;
    z-index: 20;
    height: 64px;
    padding: 0 max(14px, env(safe-area-inset-right)) 0 max(14px, env(safe-area-inset-left));
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    background: #fff;
    border-bottom: 1px solid var(--line);
}

.app-identity { display: flex; justify-content: center; align-items: center; gap: 9px; min-width: 0; }
.app-identity img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.app-identity div { display: flex; flex-direction: column; min-width: 0; }
.app-identity strong { font-size: 15px; letter-spacing: .02em; }
.app-identity small { margin-top: 2px; color: var(--muted); font-size: 10px; text-align: center; }
.icon-button { width: 44px; height: 44px; border: 0; background: transparent; border-radius: 50%; font-size: 21px; cursor: pointer; }
.icon-button-link { display: grid; place-items: center; color: var(--cjf-navy); text-decoration: none; }
.change-station-link { color: var(--muted); font-size: 18px; }

.app-main { width: min(100% - 28px, 920px); margin: 0 auto; }
.welcome-card, .station-section, .prototype-note { background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 12px; }
.welcome-card { margin-top: 16px; padding: 24px; text-align: center; }
.welcome-logo { width: 76px; height: 76px; object-fit: contain; border-radius: 50%; }
.eyebrow { margin: 12px 0 5px; color: var(--cjf-red); font-size: 12px; line-height: 1.2; font-weight: 800; letter-spacing: .04em; }
h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 8px; font-size: clamp(24px, 5vw, 34px); }
h2 { margin-bottom: 0; font-size: clamp(19px, 3vw, 25px); }
.lead { margin-bottom: 0; color: var(--muted); line-height: 1.5; }
.home-login-button { display: inline-flex; align-items: center; justify-content: center; width: min(100%, 360px); margin-top: 20px; text-decoration: none; }

.station-section { margin-top: 14px; padding: 20px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.section-heading .eyebrow { margin-top: 0; }
.status-pill { flex: 0 0 auto; padding: 7px 10px; color: var(--success); background: #eaf8f2; border-radius: 999px; font-size: 11px; font-weight: 700; }
.status-pill span { display: inline-block; width: 7px; height: 7px; margin-right: 4px; background: var(--success); border-radius: 50%; }
.status-pill-error { color: #b42318; background: #fff0ee; }
.status-pill-error span { background: #b42318; }
.station-grid { display: grid; gap: 10px; }
.station-card { width: 100%; display: grid; grid-template-columns: 48px 1fr 24px; align-items: center; gap: 12px; padding: 13px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.station-card:hover, .station-card:focus-visible { border-color: var(--cjf-red); box-shadow: 0 5px 18px rgba(23, 32, 51, .08); outline: none; }
.station-card.is-selected { border-color: var(--success); box-shadow: 0 0 0 2px rgba(22,128,91,.12); }
.station-select-form { margin: 0; }
.change-point-form { margin: 14px 0 0; }
.station-card > span:nth-child(2) { display: flex; flex-direction: column; gap: 3px; }
.station-card strong { font-size: 15px; }
.station-card small { color: var(--muted); font-size: 12px; }
.station-icon { display: grid; place-items: center; width: 44px; height: 44px; color: #fff; border-radius: 50%; font-size: 20px; font-weight: 800; }
.station-icon-red { background: var(--cjf-red); }
.station-icon-blue { background: var(--cjf-blue); }
.station-icon-orange { background: #d97706; }
.station-arrow { color: #9aa5b5; font-size: 28px; text-align: right; }
.empty-state { grid-column: 1 / -1; margin: 0; padding: 24px; color: var(--muted); text-align: center; background: #f7f9fc; border-radius: 10px; }
.prototype-note { display: flex; gap: 8px 12px; margin: 14px 0; padding: 13px 16px; color: var(--muted); font-size: 12px; }
.prototype-note strong { color: var(--cjf-navy); }

.app-footer {
    position: fixed;
    inset: auto 0 0;
    z-index: 20;
    min-height: 72px;
    padding: 7px max(8px, env(safe-area-inset-right)) max(7px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    background: #fff;
    border-top: 1px solid var(--line);
}
.app-footer a, .app-footer button { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; min-width: 0; color: var(--cjf-navy); text-decoration: none; background: transparent; border: 0; cursor: pointer; }
.app-footer span { font-size: 21px; line-height: 1; }
.app-footer small { font-size: 10px; }
.app-footer .active { color: var(--cjf-red); }

.install-sheet { position: fixed; inset: 0; z-index: 50; display: none; align-items: flex-end; }
.install-sheet.is-open { display: flex; }
.install-backdrop { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(7, 21, 47, .55); }
.install-panel { position: relative; width: min(100%, 520px); margin: 0 auto; padding: 28px 22px max(22px, env(safe-area-inset-bottom)); text-align: center; background: #fff; border-radius: 22px 22px 0 0; box-shadow: 0 -12px 45px rgba(7, 21, 47, .22); }
.install-panel > img { width: 82px; height: 82px; object-fit: contain; border-radius: 50%; }
.install-panel h2 { margin-bottom: 10px; font-size: 25px; }
.install-panel p:not(.eyebrow) { color: var(--muted); line-height: 1.5; }
.install-close { position: absolute; top: 13px; right: 13px; width: 38px; height: 38px; font-size: 25px; background: #f4f7fb; border: 0; border-radius: 50%; cursor: pointer; }
.primary-button, .secondary-button { width: 100%; min-height: 48px; margin-top: 9px; border-radius: 9px; font-weight: 800; cursor: pointer; }
.primary-button { color: #fff; background: var(--cjf-red); border: 1px solid var(--cjf-red); }
.secondary-button { background: #f4f7fb; border: 1px solid var(--line); }
.install-ios { margin: 12px 0; padding: 12px; color: var(--cjf-navy); background: #eef5ff; border-radius: 9px; font-size: 13px; line-height: 1.45; }

.auth-body { padding-bottom: 20px; }
.auth-main { width: min(100% - 28px, 520px); margin: 28px auto; }
.auth-card { padding: 28px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); }
.app-form { display: grid; gap: 14px; margin-top: 22px; text-align: left; }
.app-form label { display: grid; gap: 7px; font-size: 13px; font-weight: 700; }
.app-form label small { color: var(--muted); font-weight: 400; }
.app-form input:not([type=checkbox]), .app-form select { width: 100%; min-height: 46px; padding: 10px 12px; color: var(--cjf-navy); background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.app-form input:focus, .app-form select:focus { border-color: var(--cjf-blue); outline: 3px solid rgba(15,76,154,.12); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.alert { margin: 16px 0; padding: 12px 14px; border-radius: 9px; font-size: 13px; text-align: left; }
.alert p { margin: 0; }
.alert p + p { margin-top: 5px; }
.alert-error { color: #912018; background: #fff0ee; border: 1px solid #ffc9c4; }
.alert-success { color: #116047; background: #eaf8f2; border: 1px solid #bcebd8; }

.admin-main { padding-top: 18px; }
.admin-title { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding: 22px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.admin-title h1 { margin-bottom: 6px; }
.compact-button { width: auto; min-height: 42px; margin: 0; padding: 0 16px; }
.admin-title-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.admin-title-link { display: inline-flex; align-items: center; justify-content: center; color: var(--cjf-navy); text-decoration: none; }
.user-initial { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; color: #fff; background: var(--cjf-blue); border: 0; border-radius: 50%; font-weight: 800; cursor: pointer; list-style: none; }
.user-initial::-webkit-details-marker { display: none; }
.account-menu { position: relative; justify-self: end; }
.account-menu[open] .user-initial { box-shadow: 0 0 0 3px rgba(15,76,154,.15); }
.account-menu-popup { position: absolute; top: calc(100% + 10px); right: 0; width: min(280px, calc(100vw - 28px)); padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 16px 40px rgba(23,32,51,.2); }
.account-menu-identity { display: grid; gap: 3px; padding: 10px 11px 12px; border-bottom: 1px solid var(--line); }
.account-menu-identity small { color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.account-menu-identity strong { font-size: 14px; }
.account-menu-identity span { color: var(--muted); font-size: 12px; }
.account-menu-popup form { margin: 8px 0 0; }
.account-menu-links { display:grid; gap:2px; padding:7px 0; border-bottom:1px solid var(--line); }
.account-menu-links a { padding:9px 11px; color:var(--cjf-navy); text-decoration:none; border-radius:7px; font-size:12px; font-weight:800; }
.account-menu-links a:hover { background:#f4f7fb; }
.account-menu-popup button { width: 100%; min-height: 42px; padding: 0 11px; color: #b42318; text-align: left; background: #fff0ee; border: 0; border-radius: 8px; font-weight: 800; cursor: pointer; }
.admin-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.admin-card { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: start; padding: 16px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.admin-card.is-disabled { opacity: .62; }
.admin-card-content { display: grid; gap: 3px; }
.admin-card-content strong { font-size: 16px; }
.admin-card-content small, .admin-card-content p { margin: 0; color: var(--muted); font-size: 12px; }
.state-badge { padding: 5px 8px; color: #6b7280; background: #f1f3f6; border-radius: 999px; font-size: 10px; font-weight: 800; }
.state-badge.state-active { color: var(--success); background: #eaf8f2; }
.admin-card-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 7px; }
.admin-card-actions form { margin: 0; }
.small-button { display: inline-flex; align-items: center; min-height: 34px; padding: 0 10px; color: var(--cjf-navy); text-decoration: none; background: #f4f7fb; border: 1px solid var(--line); border-radius: 7px; cursor: pointer; font-size: 11px; font-weight: 700; }
.danger-button { color: #b42318; }
.type-section { margin: 14px 0; padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.type-list { display: flex; flex-wrap: wrap; gap: 8px; }
.type-list span { display: flex; align-items: center; gap: 7px; padding: 8px 10px; background: #f4f7fb; border-radius: 8px; font-size: 12px; }
.type-list i { width: 10px; height: 10px; border-radius: 50%; }
.event-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; margin-top: 14px; }
.event-card { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.event-card.is-current { border: 2px solid var(--cjf-blue); }
.event-card-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.event-card-heading .eyebrow { margin-top: 0; }
.event-card-heading h2 { margin-bottom: 0; }
.event-card dl { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin: 17px 0; }
.event-card dl div { padding: 10px; background: #f7f9fc; border-radius: 8px; }
.event-card dt { margin-bottom: 5px; color: var(--muted); font-size: 10px; font-weight: 800; text-transform: uppercase; }
.event-card dd { margin: 0; font-size: 12px; line-height: 1.45; }
.product-admin-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-top: 14px; }
.product-admin-card { display: grid; grid-template-columns: 82px minmax(0,1fr) auto; gap: 12px; align-items: start; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.product-admin-card.is-disabled { opacity: .6; }
.product-admin-card > img { width: 82px; height: 82px; object-fit: contain; padding: 4px; background: #f7f9fc; border-radius: 8px; }
.product-admin-card h2 { margin: 5px 0 2px; overflow: hidden; font-size: 15px; text-overflow: ellipsis; white-space: nowrap; }
.product-admin-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.4; }
.product-admin-price { color: var(--cjf-red); font-size: 14px; }
.product-admin-card .admin-card-actions { grid-column: 2/-1; }
.product-edit-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 18px; }
.product-edit-layout > section { display: grid; align-content: start; gap: 13px; }
.product-edit-layout h3 { margin: 0; }
.product-edit-preview { width: 110px; height: 85px; object-fit: contain; padding: 5px; background: #f7f9fc; border-radius: 8px; }
.product-point-list { display: grid; gap: 7px; margin: 0; padding: 0; border: 0; }
.product-point-row { display: grid !important; grid-template-columns: 18px 10px minmax(100px,1fr) minmax(100px,.7fr); align-items: center; gap: 8px !important; padding: 9px; background: #f7f9fc; border-radius: 8px; }
.product-point-row > input[type=checkbox] { width: 18px; height: 18px; }
.product-point-row > i { width: 10px; height: 10px; border-radius: 50%; }
.product-point-row > span { display: grid; gap: 2px; }
.product-point-row > span strong { font-size: 11px; }
.product-point-row > span small { color: var(--muted); font-size: 9px; }
.product-point-row > input:not([type=checkbox]) { min-height: 38px !important; padding: 7px !important; font-size: 11px; }
.product-edit-layout + .primary-button { position: sticky; bottom: -22px; z-index: 3; margin: 8px -22px -22px; width: calc(100% + 44px); min-height: 58px; border-radius: 0 0 14px 14px; box-shadow: 0 -8px 20px rgba(7,21,47,.12); }
.live-indicator { color: var(--success); font-size: 11px; font-weight: 800; }
.activity-main,.stats-main { padding-top: 16px; }
.activity-filters,.stats-filters { display: flex; align-items: end; gap: 9px; margin-top: 13px; padding: 12px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.activity-filters label,.stats-filters label { display: grid; gap: 4px; color: var(--muted); font-size: 10px; font-weight: 800; }
.activity-filters select,.stats-filters input,.stats-filters select { min-height: 40px; padding: 7px 10px; border: 1px solid #cbd5e1; border-radius: 7px; }
.stats-export-actions { display: flex; gap: 8px; margin-left: auto; }
.stats-export-actions a { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; text-decoration: none; }
.stats-export-actions .excel-button { color: #176b3a; border-color: #9bc8ae; background: #f1fbf5; }
.activity-filters > span { margin-left: auto; color: var(--muted); font-size: 10px; }
.activity-average { display: grid; gap: 2px; min-width: 125px; padding: 8px 12px; color: #fff; background: var(--cjf-navy); border-radius: 8px; }
.activity-average small { opacity: .72; font-size: 9px; font-weight: 700; }
.activity-average strong { font-size: 18px; }
.activity-list { display: grid; margin: 13px 0; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); overflow: hidden; }
.activity-row + .activity-row { border-top: 1px solid var(--line); }
.activity-row summary { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 12px; cursor: pointer; list-style: none; }
.activity-row summary::-webkit-details-marker { display: none; }
.activity-row summary > span:nth-child(2) { display: grid; gap: 3px; }
.activity-row small { color: var(--muted); font-size: 9px; }
.activity-icon { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; background: var(--cjf-blue); border-radius: 50%; font-weight: 900; }
.activity-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.activity-badges em { padding: 2px 5px; color: var(--cjf-blue); background: #eaf2ff; border-radius: 999px; font-size: 8px; font-style: normal; font-weight: 800; }
.activity-amount { display: grid; gap: 2px; color: var(--success); text-align: right; font-weight: 900; }
.activity-amount.is-negative { color: var(--cjf-red); }
.activity-content { display: grid; gap: 8px; padding: 0 12px 12px 58px; }
.activity-content > p { margin: 0; color: var(--muted); font-size: 10px; }
.activity-content > .small-button { justify-self: start; }
.stats-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 9px; margin: 13px 0; }
.stats-summary div { display: grid; gap: 4px; padding: 15px; background: var(--cjf-navy); border-radius: 10px; color: #fff; }
.stats-summary small { opacity: .7; font-size: 10px; }
.stats-summary strong { font-size: 23px; }
.stats-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; margin-bottom: 15px; }
.stat-card { padding: 17px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.stat-card .eyebrow { margin-top: 0; }
.stat-table { display: grid; margin-top: 11px; }
.stat-table > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: 10px; align-items: center; padding: 9px 2px; border-top: 1px solid var(--line); }
.stat-table strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stat-table span { color: var(--muted); font-size: 9px; }
.stat-table b { min-width: 65px; text-align: right; font-size: 11px; }
.closure-main { padding-top: 16px; }
.closure-summary span { opacity: .7; font-size: 9px; }
.closure-grid { display: grid; grid-template-columns: 1.35fr .65fr; gap: 12px; margin-bottom: 15px; }
.closure-wide { grid-column: 1/-1; }
.cash-control-list { display: grid; margin-top: 13px; border-top: 1px solid var(--line); }
.cash-control-list details { border-bottom: 1px solid var(--line); }
.cash-control-list summary { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 12px 2px; cursor: pointer; }
.cash-control-list summary > span:first-child { display: grid; gap: 2px; }
.cash-control-list small { color: var(--muted); font-size: 9px; }
.cash-count-form { margin: 0 0 13px; padding: 13px; background: #f7f9fc; border-radius: 9px; }
.cash-count-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.cash-variance { color: var(--cjf-red); font-size: 9px; font-style: normal; }
.cash-variance.is-zero { color: var(--success); }
.outstanding-list { display: grid; max-height: 390px; margin-top: 12px; overflow: auto; }
.outstanding-list > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 2px; border-top: 1px solid var(--line); }
.outstanding-list span { display: grid; gap: 2px; min-width: 0; }
.outstanding-list small { overflow: hidden; color: var(--muted); font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.outstanding-list b { flex: 0 0 auto; color: var(--cjf-red); }
.app-footer form, .app-footer form button { width: 100%; height: 100%; margin: 0; }
.app-dialog { width: min(100% - 24px, 520px); padding: 22px; color: var(--cjf-navy); background: #fff; border: 0; border-radius: 14px; box-shadow: 0 25px 80px rgba(7,21,47,.3); }
.app-dialog::backdrop { background: rgba(7,21,47,.58); }
.dialog-heading { display: flex; justify-content: space-between; align-items: start; }
.dialog-heading .eyebrow { margin-top: 0; }
.dialog-heading .install-close { position: static; flex: 0 0 auto; }
.check-label { display: flex !important; grid-template-columns: auto 1fr; align-items: center; }
.check-label input { width: 18px; height: 18px; }
.permission-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 14px; margin-top: 10px; }
@media (max-width: 640px) { .permission-grid { grid-template-columns: 1fr; } }
.foyer-sale-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:12px; }
.foyer-sale-heading h1 { margin:0; }
.category-tabs { display:flex; gap:7px; overflow-x:auto; padding:2px 0 12px; }
.category-tabs button { flex:0 0 auto; padding:8px 13px; color:var(--cjf-navy); background:#fff; border:1px solid var(--line); border-radius:999px; font-size:12px; font-weight:800; cursor:pointer; }
.category-tabs button.is-active { color:#fff; background:var(--cjf-blue); border-color:var(--cjf-blue); }
.foyer-products .product-tile { min-height:112px; }
.product-tile em { color:#b42318; font-size:10px; font-style:normal; font-weight:800; }
.product-tile.is-unavailable { opacity:.5; }
.product-placeholder { display:grid; place-items:center; width:100%; height:66px; color:#fff; background:var(--cjf-blue); border-radius:8px; font-weight:900; }
.cart-line-controls { display:flex; align-items:center; gap:7px; }
.cart-line-controls button { width:30px; height:30px; border:1px solid var(--line); border-radius:50%; background:#fff; cursor:pointer; font-size:18px; }
.foyer-dialog { width:min(92vw,480px); padding:24px; border:0; border-radius:18px; box-shadow:0 24px 70px rgba(7,21,47,.28); }
.foyer-dialog::backdrop { background:rgba(7,21,47,.58); }
.foyer-dialog form { position:relative; }
.variant-list,.payment-method-grid { display:grid; gap:9px; margin-top:18px; }
.variant-list button,.payment-method-grid button { display:grid; grid-template-columns:1fr auto; gap:3px 12px; align-items:center; min-height:52px; padding:11px 14px; text-align:left; background:#f7f9fc; border:1px solid var(--line); border-radius:10px; cursor:pointer; }
.variant-list small { grid-column:1/-1; color:var(--muted); }
.payment-method-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.payment-method-grid button { display:block; color:#fff; text-align:center; background:var(--payment-color); border-color:var(--payment-color); font-weight:900; }
.payment-dialog-total { display:block; margin-top:14px; font-size:30px; }
.stock-alert-dialog { text-align:center; border-top:7px solid var(--cjf-red); }
.stock-alert-dialog form { display:grid; justify-items:center; }
.stock-alert-icon { display:grid; place-items:center; width:68px; height:68px; margin:-4px 0 8px; color:#fff; background:var(--cjf-red); border-radius:50%; font-size:42px; line-height:1; font-weight:900; }
.stock-alert-dialog h2 { margin-bottom:10px; font-size:25px; }
.stock-alert-dialog p:not(.eyebrow) { max-width:380px; margin-bottom:12px; color:var(--muted); line-height:1.5; }
.stock-alert-ok { min-height:56px; margin-top:10px; font-size:18px; }
.activity-list { display:grid; gap:8px; margin-top:16px; }
.activity-row { display:grid; grid-template-columns:1fr auto auto; gap:14px; align-items:center; padding:12px; background:#f7f9fc; border-radius:9px; }
.activity-row div { display:grid; gap:3px; }
.activity-row small { color:var(--muted); }
.activity-row span { color:var(--muted); font-size:12px; }
@media(max-width:600px){.activity-row{grid-template-columns:1fr auto}.activity-row span{grid-column:1/-1;grid-row:2}.payment-method-grid{grid-template-columns:1fr}}
.product-editor { scroll-margin-top:80px; }
.product-editor hr { margin:24px 0; border:0; border-top:1px solid var(--line); }
.variant-admin-list { display:grid; gap:8px; margin-top:18px; }
.variant-admin-list article { display:grid; grid-template-columns:1fr auto auto auto; gap:9px; align-items:center; padding:10px; background:#f7f9fc; border-radius:9px; }
.variant-admin-list article>div { display:grid; gap:3px; }
.variant-admin-list small { color:var(--muted); }
.category-inline-form { display:grid; grid-template-columns:1fr 54px 90px auto; gap:8px; margin:12px 0; }
.category-inline-form input { min-height:40px; padding:7px; border:1px solid var(--line); border-radius:7px; }
.admin-product-image { width:48px; height:48px; object-fit:contain; border-radius:8px; background:#f4f7fb; }
.stock-filters { display:flex; gap:7px; margin:14px 0; overflow:auto; }
.stock-filters a { padding:8px 13px; color:var(--cjf-navy); background:#fff; border:1px solid var(--line); border-radius:999px; text-decoration:none; font-size:12px; font-weight:800; }
.stock-filters a.active { color:#fff; background:var(--cjf-blue); border-color:var(--cjf-blue); }
.stock-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.stock-card { padding:15px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.stock-card.is-alert { border-color:#ef3438; }
.stock-card>img { width:54px; height:54px; object-fit:contain; float:left; margin:0 10px 8px 0; border-radius:8px; }
.stock-card-heading { display:flex; justify-content:space-between; gap:10px; align-items:start; }
.stock-card-heading>div { display:grid; gap:3px; }
.stock-card-heading small,.stock-card>p { color:var(--muted); font-size:11px; }
.stock-card-heading>b { font-size:24px; }
.stock-card details { clear:both; margin-top:12px; }
.stock-card summary { cursor:pointer; color:var(--cjf-blue); font-size:12px; font-weight:800; }
@media(max-width:680px){.stock-grid{grid-template-columns:1fr}.variant-admin-list article{grid-template-columns:1fr auto}.category-inline-form{grid-template-columns:1fr 54px}.category-inline-form .small-button{grid-column:1/-1}}
.customer-search-bar { display:grid; grid-template-columns:1fr auto; gap:8px; margin:14px 0; }
.customer-search-bar input { min-height:44px; padding:9px 12px; border:1px solid var(--line); border-radius:9px; }
.customer-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.customer-card { display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:15px; color:var(--cjf-navy); text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:11px; box-shadow:var(--shadow); }
.customer-card>div { display:grid; gap:3px; }
.customer-card small,.customer-card span { color:var(--muted); font-size:11px; }
.customer-card>b { font-size:20px; }
.customer-card>em { grid-column:1/-1; color:#b42318; font-size:11px; font-style:normal; font-weight:800; }
.customer-card.is-blocked { border-color:#ef3438; }
.customer-identity { display:flex; justify-content:space-between; gap:20px; align-items:center; padding:20px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.customer-identity.is-blocked { border-color:#ef3438; }
.customer-identity h1 { margin-bottom:5px; }
.customer-identity p { margin:0; color:var(--muted); }
.customer-identity>div:last-child { display:grid; justify-items:end; gap:3px; }
.customer-identity>div:last-child strong { font-size:30px; }
.customer-identity>div:last-child small,.customer-identity>div:last-child span { color:var(--muted); font-size:11px; }
.debt-ticket-list { display:grid; gap:7px; }
.debt-ticket-list label { display:grid!important; grid-template-columns:auto 1fr auto!important; align-items:center; gap:10px; padding:11px; background:#f7f9fc; border-radius:9px; cursor:pointer; }
.debt-ticket-list input { width:20px; height:20px; }
.debt-ticket-list span { display:grid; gap:2px; }
.debt-ticket-list small { color:var(--muted); }
.selected-debt-total { margin:12px 0 0; text-align:right; }
.danger-button { color:#b42318; }
@media(max-width:680px){.customer-grid{grid-template-columns:1fr}.customer-identity{align-items:flex-start}.customer-identity>div:last-child strong{font-size:24px}}
.users-table-wrap { margin: 14px 0; overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.users-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.users-table th, .users-table td { padding: 13px 14px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
.users-table th { color: var(--muted); background: #f7f9fc; font-size: 11px; text-transform: uppercase; }
.users-table td:first-child { display: grid; gap: 3px; }
.users-table td:first-child small { color: var(--muted); }
.app-dialog-wide { width: min(100% - 24px, 900px); max-height: calc(100vh - 30px); overflow: auto; }
.permissions-layout { display: grid; grid-template-columns: 1.25fr .75fr; gap: 16px; }
.permissions-layout h3 { margin: 0 0 10px; font-size: 15px; }
.permissions-layout fieldset { display: grid; gap: 7px; margin: 0 0 12px; padding: 11px; border: 1px solid var(--line); border-radius: 9px; }
.permissions-layout legend { padding: 0 6px; color: var(--cjf-red); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.permission-check { display: flex !important; grid-template-columns: none !important; flex-direction: row; align-items: flex-start; gap: 9px !important; padding: 7px; background: #f7f9fc; border-radius: 7px; cursor: pointer; }
.permission-check input { flex: 0 0 auto; width: 18px; height: 18px; margin-top: 2px; }
.permission-check span { display: grid; gap: 2px; }
.permission-check strong { font-size: 12px; }
.permission-check small, .form-help { color: var(--muted); font-size: 10px; font-weight: 400; }
.permission-check i { flex: 0 0 auto; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; }
.scanner-main { padding-top: 16px; }
.scanner-card, .scan-result { padding: 20px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.scanner-card h1 { margin-bottom: 5px; }
.camera-frame { position: relative; width: min(100%, 620px); aspect-ratio: 4 / 3; margin: 18px auto 0; overflow: hidden; background: #101828; border-radius: 12px; }
.camera-frame video { width: 100%; height: 100%; object-fit: cover; }
.camera-frame > p { position: absolute; inset: 50% 20px auto; z-index: 2; margin: 0; color: #fff; text-align: center; transform: translateY(-50%); }
.camera-guide { position: absolute; inset: 50% auto auto 50%; z-index: 3; width: min(58%, 260px); aspect-ratio: 1; border: 3px solid rgba(255,255,255,.85); border-radius: 14px; transform: translate(-50%,-50%); pointer-events: none; }
.scanner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: min(100%,620px); margin: 10px auto 0; }
.scanner-actions button { margin-top: 0; }
.camera-select-label { display: grid; gap: 5px; width: min(100%,620px); margin: 10px auto 0; color: var(--muted); font-size: 11px; font-weight: 700; }
.camera-select-label select { width: 100%; min-height: 44px; padding: 8px 10px; color: var(--cjf-navy); background: #fff; border: 1px solid #cbd5e1; border-radius: 8px; }
.scanner-help { min-height: 20px; margin: 12px 0 0; color: var(--muted); text-align: center; font-size: 12px; }
.scan-result { display: grid; grid-template-columns: 58px 1fr auto; align-items: center; gap: 15px; margin-top: 14px; }
.scan-result[hidden] { display: none; }
.scan-result-icon { display: grid; place-items: center; width: 54px; height: 54px; color: #fff; background: var(--success); border-radius: 50%; font-size: 27px; font-weight: 900; }
.scan-result .eyebrow { color: var(--success); }
.scan-result h2 { margin-bottom: 4px; }
.scan-result p:last-child { margin: 0; color: var(--muted); font-size: 13px; }
.scan-result-error .scan-result-icon { background: var(--cjf-red); }
.scan-result-error .eyebrow { color: var(--cjf-red); }
.card-summary { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 9px; margin-top: 14px; }
.card-summary div { display: grid; gap: 3px; padding: 14px; text-align: center; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); }
.card-summary strong { font-size: 23px; }
.card-summary small { color: var(--muted); font-size: 10px; }
.card-filters { display: grid; grid-template-columns: 2fr 1fr 1fr auto auto; align-items: end; gap: 9px; margin-top: 14px; padding: 14px; background: #fff; border: 1px solid var(--line); border-radius: 10px; }
.card-filters label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; font-weight: 700; }
.card-filters input,.card-filters select { min-height: 40px; padding: 8px 10px; border: 1px solid #cbd5e1; border-radius: 7px; }
.card-filters .small-button { min-height: 42px; }
.card-type-badge { display: inline-flex; align-items: center; gap: 6px; }
.card-type-badge i { width: 11px; height: 11px; border-radius: 50%; }
.muted-text { color: var(--muted); }
.pagination { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 12px 0; color: var(--muted); font-size: 11px; }
.pagination div { display: flex; gap: 7px; }
.central-card-main { padding-top: 16px; }
.card-identity-panel { position: relative; display: grid; grid-template-columns: 12px 1fr auto; gap: 18px; align-items: center; padding: 22px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.card-identity-panel.is-blocked { border-color: #ffc9c4; background: #fff8f7; }
.card-color-mark { align-self: stretch; min-height: 78px; border-radius: 999px; }
.card-identity-panel h1 { margin-bottom: 4px; }
.card-balance { display: grid; gap: 3px; text-align: right; }
.card-balance small { color: var(--muted); }
.card-balance strong { font-size: clamp(25px,5vw,38px); }
.central-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.central-info-card,.central-actions-panel { padding: 19px; background: #fff; border: 1px solid var(--line); border-radius: 11px; box-shadow: var(--shadow); }
.central-info-card .eyebrow,.central-actions-panel .eyebrow { margin-top: 0; }
.central-info-card h2 { margin-bottom: 5px; }
.central-info-card p:last-child { margin: 0; color: var(--muted); }
.central-actions-panel { margin-top: 12px; }
.central-action-preview { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; margin-top: 17px; }
.central-action-preview button { margin-top: 0; }
.central-operations-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.central-operations-grid .central-actions-panel { align-self: start; }
.central-operation-form { margin-top: 14px; }
.grant-choice { display: flex !important; flex-direction: row; align-items: flex-start; gap: 11px !important; padding: 13px; background: #fff8e8; border: 1px solid #f5d992; border-radius: 9px; cursor: pointer; }
.grant-choice input { flex: 0 0 auto; width: 20px; height: 20px; margin-top: 1px; }
.grant-choice span { display: grid; gap: 3px; }
.grant-choice small { color: var(--muted); font-weight: 400; }
.danger-panel { border-color: #ffd0ca; }
.danger-panel > .eyebrow,.danger-panel .danger-button { color: #b42318; }
.block-reason { margin-top: 7px !important; color: #b42318 !important; font-weight: 700; }
.transaction-list { display: grid; margin-top: 14px; border-top: 1px solid var(--line); }
.transaction-detail { border-bottom: 1px solid var(--line); }
.transaction-detail summary { display: grid; grid-template-columns: 18px minmax(0,1fr) auto; align-items: center; gap: 9px; padding: 12px 2px; cursor: pointer; list-style: none; }
.transaction-detail summary::-webkit-details-marker { display: none; }
.transaction-list span { display: grid; gap: 3px; }
.transaction-list small { color: var(--muted); font-size: 10px; }
.transaction-chevron { display: block !important; color: var(--muted); font-size: 22px; line-height: 1; transition: transform .18s; }
.transaction-detail[open] .transaction-chevron { transform: rotate(90deg); }
.transaction-title-line { display: flex !important; flex-wrap: wrap; align-items: center; gap: 5px !important; }
.transaction-title-line em { padding: 3px 6px; color: var(--cjf-blue); background: #eaf2ff; border-radius: 999px; font-size: 9px; font-style: normal; font-weight: 800; }
.transaction-amount { color: var(--success); text-align: right; font-weight: 800; }
.transaction-amount.is-negative { color: var(--cjf-red); }
.transaction-content { padding: 0 2px 13px 29px; }
.transaction-content > p { margin: 0; color: var(--muted); font-size: 11px; }
.transaction-products { display: grid; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.transaction-products > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 10px; background: #f7f9fc; }
.transaction-products > div + div { border-top: 1px solid var(--line); }
.transaction-products span { min-width: 0; }
.transaction-products strong { font-size: 11px; }
.transaction-products b { flex: 0 0 auto; font-size: 11px; }
.transaction-meta { margin-top: 8px !important; }
.replacement-panel { border: 2px solid var(--cjf-blue); }
.replacement-summary { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin-top: 14px; padding: 15px; background: #eef5ff; border-radius: 10px; }
.replacement-summary > div { display: grid; gap: 3px; }
.replacement-summary > div:last-child { text-align: right; }
.replacement-summary small,.replacement-summary span { color: var(--muted); font-size: 10px; }
.replacement-summary strong { font-size: 19px; }
.replacement-arrow { color: var(--cjf-red) !important; font-size: 28px !important; font-weight: 900; }
.replacement-start { display: flex; align-items: center; justify-content: center; margin-top: 15px; text-decoration: none; }
.replacement-cancel { display: flex; align-items: center; justify-content: center; color: var(--cjf-navy); text-decoration: none; }
.wake-lock-control { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 0; padding: 12px 15px; background: rgba(255,255,255,.78); border: 1px solid var(--line); border-radius: 10px; }
.wake-lock-control > div { display: grid; gap: 2px; }
.wake-lock-control strong { font-size: 12px; }
.wake-lock-control small { color: var(--muted); font-size: 10px; }
.wake-lock-control[data-state="active"] small { color: var(--success); }
.wake-lock-control[data-state="error"] small,.wake-lock-control[data-state="unsupported"] small { color: #b42318; }
.switch { position: relative; flex: 0 0 auto; width: 46px; height: 26px; }
.switch input { position: absolute; opacity: 0; pointer-events: none; }
.switch span { position: absolute; inset: 0; background: #cbd5e1; border-radius: 999px; cursor: pointer; transition: .2s; }
.switch span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; box-shadow: 0 1px 4px rgba(0,0,0,.22); transition: .2s; }
.switch input:checked + span { background: var(--success); }
.switch input:checked + span::after { transform: translateX(20px); }
.switch input:disabled + span { opacity: .45; cursor: not-allowed; }
.checkout-body { padding-top: 72px; }
.checkout-layout { width: min(100% - 24px,1200px); margin: 0 auto 16px; display: grid; grid-template-columns: minmax(0,1.65fr) minmax(300px,.75fr); gap: 13px; }
.checkout-products,.checkout-cart { background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); }
.checkout-products { padding: 14px; }
.checkout-card-strip { display: flex; justify-content: space-between; gap: 15px; padding: 13px 15px; color: #fff; background: var(--cjf-navy); border-radius: 9px; }
.checkout-card-strip.is-warning { background: #8a2c24; }
.checkout-card-strip > div { display: grid; gap: 2px; }
.checkout-card-strip > div:last-child { text-align: right; }
.checkout-card-strip .checkout-strip-amount { flex: 0 0 auto; text-align: right; }
.checkout-strip-total { min-width: 76px; padding-left: 13px; border-left: 1px solid rgba(255,255,255,.25); }
.checkout-strip-total strong { color: #fff3a8; }
.checkout-card-strip small,.checkout-card-strip span { opacity: .8; font-size: 10px; }
.checkout-card-strip .checkout-holder-club { opacity: 1; color: #dbeafe; font-weight: 800; }
.checkout-card-strip strong { font-size: 20px; }
.products-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin-top: 10px; }
.product-tile { position: relative; min-width: 0; overflow: hidden; padding: 0; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; }
.product-tile[hidden] { display: none; }
.product-tile:active { transform: scale(.98); }
.product-tile img { display: block; width: 100%; aspect-ratio: 1.55; object-fit: contain; padding: 5px; background: #f7f9fc; }
.product-tile > span { display: grid; gap: 2px; padding: 7px; }
.product-tile strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.product-tile small { color: var(--cjf-red); font-size: 12px; font-weight: 800; }
.product-tile > b { position: absolute; top: 5px; right: 5px; display: grid; place-items: center; width: 22px; height: 22px; color: #fff; background: var(--cjf-red); border-radius: 50%; font-size: 11px; }
.checkout-cart { position: sticky; top: 82px; align-self: start; padding: 18px; }
.cart-lines { display: grid; gap: 7px; max-height: 43vh; margin: 15px 0; overflow: auto; }
.cart-empty,.prototype-payment-note { color: var(--muted); font-size: 11px; text-align: center; }
.cart-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 9px; background: #f7f9fc; border-radius: 8px; }
.cart-line > span { display: grid; gap: 2px; min-width: 0; }
.cart-line strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cart-line small { color: var(--muted); font-size: 10px; }
.cart-line > div { display: flex; align-items: center; gap: 5px; }
.cart-line button { width: 28px; height: 28px; background: #fff; border: 1px solid var(--line); border-radius: 6px; }
.cart-line button:disabled { opacity: .35; cursor: not-allowed; }
.cart-summary { display: grid; grid-template-columns: 1fr auto; gap: 4px; padding: 13px 0; border-top: 1px solid var(--line); }
.cart-summary strong { font-size: 24px; }
.cart-summary small { grid-column: 1/-1; color: var(--success); }
.cart-summary small.is-negative { color: var(--cjf-red); font-weight: 800; }
.checkout-pay { font-size: 17px; }
.checkout-pay.payment-success { background: var(--success); border-color: var(--success); }
.checkout-layout + .wake-lock-control { width: min(100% - 24px,1200px); margin-left: auto; margin-right: auto; }
.affordable-empty { margin: 12px 0 0; padding: 18px; color: var(--muted); text-align: center; background: #f7f9fc; border-radius: 9px; font-size: 12px; }
.customer-select-dialog {
    width: min(calc(100vw - 32px), 680px);
    max-height: calc(100dvh - 32px);
    overflow-x: hidden;
    overflow-y: auto;
}
.customer-select-dialog form { width: 100%; min-width: 0; }
.customer-account-total { padding: 11px 13px; background: #eef5ff; border-radius: 9px; }
.customer-account-total strong { color: var(--cjf-blue); }
.customer-live-search { display: grid; gap: 6px; margin-top: 12px; font-size: 11px; font-weight: 800; }
.customer-live-search input,.quick-customer input { width: 100%; padding: 11px; border: 1px solid var(--line); border-radius: 8px; }
.customer-search-results { display: grid; gap: 7px; max-height: 38vh; margin-top: 10px; overflow-y: auto; }
.customer-search-results > button { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 12px; text-align: left; background: #fff; border: 1px solid var(--line); border-radius: 9px; }
.customer-search-results > button span { display: grid; gap: 3px; }
.customer-search-results > button small { color: var(--muted); }
.customer-search-results > button b { color: var(--success); font-size: 10px; }
.customer-search-results > button.is-over-limit { border-color: #f5b942; background: #fff8e8; }
.customer-search-results > button.is-over-limit b { color: #9a6700; }
.customer-search-results > button.is-blocked { opacity: .65; border-color: #ffc7c2; background: #fff1f0; }
.customer-search-results > button.is-blocked b { color: #b42318; }
.quick-customer { margin-top: 12px; padding: 11px 12px; background: #f7f9fc; border-radius: 9px; }
.quick-customer summary { cursor: pointer; font-weight: 800; }
.quick-customer[open] summary { margin-bottom: 11px; }
.quick-customer label { display: grid; gap: 5px; margin-top: 8px; font-size: 11px; font-weight: 700; }
.quick-customer button { margin-top: 11px; }
@media (max-width: 600px) {
    .customer-select-dialog { width: calc(100vw - 18px); max-height: calc(100dvh - 18px); padding: 19px 16px; }
    .customer-select-dialog .form-row { grid-template-columns: 1fr; gap: 0; }
    .customer-search-results { max-height: 28vh; }
}
.account-confirm-dialog form { width: min(90vw,480px); text-align: center; }
.account-confirm-icon { display: grid; place-items: center; width: 58px; height: 58px; margin: 0 auto 12px; color: #fff; background: var(--cjf-red); border-radius: 50%; font-size: 34px; font-weight: 900; }
.account-confirm-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 17px 0 12px; }
.account-confirm-summary > span { display: grid; gap: 5px; padding: 12px; color: var(--muted); text-align: left; background: #f7f9fc; border-radius: 9px; font-size: 10px; }
.account-confirm-summary strong { color: var(--cjf-navy); font-size: 16px; }
.dialog-action-row { display: grid; grid-template-columns: 1fr 1.5fr; gap: 9px; margin-top: 17px; }
.dialog-action-row button { min-height: 50px; margin: 0; }
.complimentary-product-check { padding: 11px; color: #7a4b00; background: #fff8e8; border: 1px solid #f5d992; border-radius: 9px; }
.complimentary-admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.inline-admin-form { margin-top: 12px; }
.simple-admin-list { display: grid; margin-top: 14px; }
.simple-admin-list > div { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); }
.assignment-add-form { display: flex; gap: 8px; margin-top: 12px; }
.assignment-add-form select { flex: 1; min-height: 40px; padding: 8px; border: 1px solid var(--line); border-radius: 8px; }
.quota-team-list { display: grid; margin-top: 13px; }
.quota-team-list > article { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: end; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.quota-team-list article > div { display: grid; gap: 4px; }
.quota-team-list small { color: var(--muted); }
.quota-team-list progress { width: min(100%,300px); accent-color: var(--cjf-blue); }
.quota-team-list form { display: flex; align-items: end; gap: 6px; }
.quota-team-list label { display: grid; gap: 3px; color: var(--muted); font-size: 9px; }
.quota-team-list input { width: 115px; min-height: 36px; padding: 7px; border: 1px solid var(--line); border-radius: 7px; }
.foyer-cart-line { grid-template-columns: minmax(0,1fr) auto auto auto; }
.foyer-cart-line em { color: #9a6700; font-size: 10px; font-style: normal; font-weight: 800; }
.gift-line-controls { display: flex !important; gap: 4px; }
.gift-line-controls button { width: auto; min-width: 42px; padding: 0 7px; color: #7a4b00; background: #fff8e8; border-color: #f5d992; font-size: 11px; font-weight: 900; }
.cart-gift-summary { grid-column: 1 / -1; padding: 9px; color: #7a4b00 !important; background: #fff8e8; border-radius: 8px; text-align: left; }
.cart-gift-summary button { margin-left: 6px; padding: 3px 7px; color: var(--cjf-blue); background: #fff; border: 1px solid #b8c9e0; border-radius: 6px; font-size: 9px; }
.complimentary-team-list { display: grid; gap: 8px; margin-top: 16px; }
.complimentary-team-list button { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 58px; padding: 11px 13px; text-align: left; background: #f7f9fc; border: 1px solid var(--line); border-radius: 9px; }
.complimentary-team-list button span { display: grid; gap: 3px; }
.complimentary-team-list button small { color: var(--muted); }
.complimentary-team-list button b { color: var(--success); }
.complimentary-team-list button:disabled { opacity: .5; }
.foyer-stats-filters { flex-wrap: wrap; }
.stats-period-presets { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 -4px; }
.stats-period-presets a { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 8px 14px; color: var(--cjf-blue); background: #fff; border: 1px solid #b8c9e0; border-radius: 999px; text-decoration: none; font-size: 11px; font-weight: 900; }
.stats-period-presets a:hover,.stats-period-presets a.is-active { color: #fff; background: var(--cjf-blue); border-color: var(--cjf-blue); }
.foyer-stats-filters select { min-width: 145px; }
.foyer-stats-summary { grid-template-columns: repeat(4,minmax(0,1fr)); }
.foyer-stats-summary .stat-alert-card { background: #9b2c2c; }
.foyer-stats-summary .stat-gift-card { background: #8a5a00; }
.foyer-stats-grid .stat-card-wide { grid-column: 1 / -1; }
.stat-chart { display: grid; gap: 12px; margin-top: 14px; }
.stat-chart-row { display: grid; gap: 5px; }
.stat-chart-row > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: baseline; gap: 10px; }
.stat-chart-row strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.stat-chart-row span { color: var(--muted); font-size: 9px; }
.stat-chart-row b { min-width: 72px; text-align: right; font-size: 11px; }
.stat-chart-row i { display: block; width: var(--bar); height: 8px; background: linear-gradient(90deg,var(--cjf-blue),#4f8dd8); border-radius: 999px; }

@media (max-width: 900px) {
    .foyer-stats-summary { grid-template-columns: repeat(3,1fr); }
}

@media (max-width: 600px) {
    .complimentary-admin-grid { grid-template-columns: 1fr; }
    .quota-team-list > article { grid-template-columns: 1fr; align-items: stretch; }
    .quota-team-list form { justify-content: space-between; }
    .foyer-cart-line { grid-template-columns: minmax(0,1fr) auto; }
    .foyer-cart-line .gift-line-controls { grid-column: 1; }
    .foyer-cart-line > strong:last-child { grid-column: 2; grid-row: 1 / span 2; }
    .foyer-stats-filters { display: grid; grid-template-columns: 1fr 1fr; }
    .foyer-stats-filters label:nth-of-type(n+3),.foyer-stats-filters .stats-export-actions { grid-column: 1 / -1; }
    .foyer-stats-filters .stats-export-actions { display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; }
    .foyer-stats-summary { grid-template-columns: repeat(2,1fr); }
    .foyer-stats-grid { grid-template-columns: 1fr; }
    .foyer-stats-grid .stat-card-wide { grid-column: auto; }
    .stat-chart-row > div { grid-template-columns: minmax(0,1fr) auto; }
    .stat-chart-row span { grid-column: 1; }
    .stat-chart-row b { grid-column: 2; grid-row: 1 / span 2; }
}
.foyer-activity-list { gap: 0; }
.foyer-activity-row { display: block; padding: 0; border-radius: 0; }
.foyer-activity-row + .foyer-activity-row { border-top: 1px solid var(--line); }
.foyer-activity-row summary { display: grid; grid-template-columns: 20px minmax(0,1fr) auto auto; align-items: center; gap: 11px; padding: 13px; cursor: pointer; list-style: none; }
.foyer-activity-row summary::-webkit-details-marker { display: none; }
.activity-chevron { color: var(--muted); font-size: 24px; line-height: 1; transition: transform .18s; }
.foyer-activity-row[open] .activity-chevron { transform: rotate(90deg); }
.activity-ticket-main { display: grid; gap: 3px; min-width: 0; }
.activity-ticket-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.activity-payment-label { color: var(--muted); font-size: 12px; }
.activity-ticket-total { min-width: 72px; text-align: right; }
.foyer-ticket-detail { padding: 0 13px 14px 44px; background: #fbfcfe; border-top: 1px dashed var(--line); }
.ticket-product-list { display: grid; }
.ticket-product-list > div { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.ticket-product-list > div > span:first-child { display: grid; gap: 2px; }
.ticket-product-list small { color: var(--muted); }
.ticket-product-list > div > span:nth-child(2) { color: var(--muted); font-size: 11px; }
.ticket-detail-total { display: flex; justify-content: flex-end; align-items: center; gap: 16px; padding-top: 12px; }
.ticket-detail-total strong { font-size: 18px; }

@media (max-width: 600px) {
    .foyer-activity-row summary { grid-template-columns: 18px minmax(0,1fr) auto; gap: 8px; }
    .activity-payment-label { grid-column: 2; }
    .activity-ticket-total { grid-column: 3; grid-row: 1 / span 2; }
    .foyer-ticket-detail { padding-left: 39px; }
    .ticket-product-list > div { grid-template-columns: minmax(0,1fr) auto; }
    .ticket-product-list > div > span:nth-child(2) { grid-column: 1; }
    .ticket-product-list > div > b { grid-column: 2; grid-row: 1 / span 2; }
}

@media (min-width: 700px) {
    body { padding-top: 80px; }
    .app-header { height: 68px; }
    .station-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .welcome-card { padding: 30px; }
}

@media (max-width: 430px) {
    .app-main { width: min(100% - 20px, 920px); }
    .welcome-card { padding: 20px 16px; }
    .station-section { padding: 16px 12px; }
    .section-heading { align-items: flex-start; flex-direction: column; gap: 10px; }
    .prototype-note { flex-direction: column; }
    .form-row { grid-template-columns: 1fr; }
    .auth-card { padding: 22px 17px; }
    .admin-title { align-items: stretch; flex-direction: column; }
    .admin-grid { grid-template-columns: 1fr; }
    .event-grid,.event-card dl { grid-template-columns: 1fr; }
    .product-admin-grid,.product-edit-layout { grid-template-columns: 1fr; }
    .stats-summary { grid-template-columns: repeat(2,1fr); }
    .stats-grid { grid-template-columns: 1fr; }
    .activity-filters,.stats-filters { align-items: stretch; flex-direction: column; }
    .stats-export-actions { display: grid; grid-template-columns: 1fr 1fr; margin-left: 0; }
    .activity-filters > span { margin-left: 0; }
    .activity-row summary { grid-template-columns: 32px minmax(0,1fr); }
    .activity-amount { grid-column: 2; text-align: left; }
    .activity-content { padding-left: 53px; }
    .closure-grid,.cash-count-grid { grid-template-columns: 1fr; }
    .cash-control-list summary { grid-template-columns: 1fr auto; }
    .cash-control-list summary .state-badge { grid-column: 1/-1; justify-self: start; }
    .compact-button { width: 100%; }
    .permissions-layout { grid-template-columns: 1fr; }
    .scan-result { grid-template-columns: 48px 1fr; }
    .scan-result .compact-button { grid-column: 1 / -1; }
    .card-summary { grid-template-columns: repeat(2,1fr); }
    .card-filters { grid-template-columns: 1fr; }
    .card-identity-panel { grid-template-columns: 9px 1fr; }
    .card-balance { grid-column: 2; text-align: left; }
    .central-card-grid,.central-action-preview,.central-operations-grid { grid-template-columns: 1fr; }
    .replacement-summary { grid-template-columns: 1fr; text-align: left; }
    .replacement-summary > div:last-child { text-align: left; }
    .replacement-arrow { transform: rotate(90deg); justify-self: start; }
}

@media (min-width: 431px) and (max-width: 850px) {
    .central-operations-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}

@media (max-width: 850px) {
    .product-admin-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
    .checkout-layout { grid-template-columns: 1fr; }
    .checkout-cart { position: static; }
    .products-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
}

@media (max-width: 520px) {
    .product-admin-grid { grid-template-columns: 1fr; }
    .product-point-row { grid-template-columns: 18px 10px 1fr; }
    .product-point-row > input:not([type=checkbox]) { grid-column: 3; }
    .checkout-products { padding: 10px; }
    .products-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 6px; }
    .product-tile > span { padding: 6px; }
    .checkout-card-strip { gap: 9px; padding: 11px; }
    .checkout-card-strip > div:first-child { min-width: 0; }
    .checkout-card-strip > div:first-child strong,.checkout-card-strip > div:first-child span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .checkout-card-strip strong { font-size: 17px; }
    .checkout-strip-total { min-width: 68px; padding-left: 9px; }
}

@media (display-mode: standalone) {
    [data-install-open] { display: none !important; }
}