/* Shared studio, register and handset visual primitives. Domain-specific layouts remain intact. */
:root{
 --ui-surface:var(--surface,#fff);--ui-canvas:var(--background,#f6f7f9);--ui-ink:var(--text-primary,#22252c);--ui-muted:var(--text-secondary,#67717e);
 --ui-border:var(--border,#dce0e6);--ui-divider:var(--divider,#e6e7eb);--ui-accent:var(--accent,#b23845);--ui-tint:var(--accent-soft,#fceef0);
 --ui-radius:16px;--ui-field-radius:10px;--ui-space:16px;--ui-field-height:42px;--ui-row-height:52px;
 --ui-dialog-shadow:0 24px 80px #141c342b,0 4px 16px #141c3412;
 --ui-dialog-width:920px;--ui-dialog-inset:24px;
}
[data-ui-size=compact]{--ui-dialog-width:640px}[data-ui-size=standard]{--ui-dialog-width:920px}[data-ui-size=wide]{--ui-dialog-width:1280px}
:root dialog[open][data-ui-dialog]:not(.settings-dialog){width:min(var(--ui-dialog-width),calc(100vw - var(--ui-dialog-inset)*2))!important;max-width:calc(100vw - var(--ui-dialog-inset)*2)!important;max-height:calc(100dvh - var(--ui-dialog-inset)*2)!important;box-sizing:border-box;height:auto!important;padding:20px!important;border:1px solid var(--ui-border)!important;border-radius:var(--ui-radius)!important;background:var(--ui-canvas)!important;color:var(--ui-ink);box-shadow:var(--ui-dialog-shadow)!important}
dialog[data-ui-dialog]::backdrop{background:#151c2d66;backdrop-filter:blur(4px)}
:root dialog[open][data-ui-dialog]:not(.settings-dialog).ui-tabbed-dialog{height:min(860px,calc(100dvh - var(--ui-dialog-inset)*2))!important}
[data-ui-dialog]>header{display:flex;gap:16px;align-items:center;justify-content:space-between;flex:none!important;background:transparent!important;margin:0 0 12px!important;padding:0 0 12px!important;border-bottom:1px solid var(--ui-divider)!important}
[data-ui-dialog]>header :is(h2,h3){font-size:22px!important;line-height:1.25;letter-spacing:-.45px;overflow-wrap:anywhere;margin:0!important;color:var(--ui-ink)}
[data-ui-dialog] :is(label,legend){color:var(--ui-muted);font-size:13px;line-height:1.4}
[data-ui-dialog] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),select,textarea){box-sizing:border-box;min-width:0;max-width:100%;border:1px solid var(--ui-border);border-radius:var(--ui-field-radius);background:var(--ui-surface);color:var(--ui-ink);font:inherit;font-size:14px}
[data-ui-dialog] :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=color]):not([type=range]),select:not([multiple])){min-height:var(--ui-field-height);padding:9px 12px}
[data-ui-dialog] textarea{padding:10px 12px;resize:vertical;min-height:64px}
[data-ui-dialog] :is(input[type=checkbox],input[type=radio]){accent-color:var(--ui-accent);flex-shrink:0}
[data-ui-dialog] :is(input,select,textarea):focus-visible{outline:3px solid color-mix(in srgb,var(--ui-accent) 22%,transparent);outline-offset:1px;border-color:var(--ui-accent)}
[data-ui-dialog] :is(.ops-error,.member-error,.employee-error,.agenda-error,[role=alert]):not(:empty){color:var(--error,#b23845);font-size:13px;line-height:1.5;overflow-wrap:anywhere}
[data-ui-dialog] :is(.action,.modal-cancel,.modal-apply){min-height:40px;border-radius:var(--ui-field-radius);font-size:13px;line-height:1.4;white-space:normal}
[data-ui-dialog] :is(footer,.modal-footer){gap:10px;flex-shrink:0;flex-wrap:wrap;border-color:var(--ui-divider);background:var(--ui-canvas);position:relative;z-index:1}
[data-ui-dialog] .ops-form{gap:14px 18px}
[data-ui-dialog] .ops-form label{gap:5px;min-width:0}
[data-ui-dialog] :is(.ops-form,.agenda-form-grid) :is(input:not([type=checkbox]),select:not([multiple])){height:var(--ui-field-height);min-height:var(--ui-field-height)}
:root dialog[data-ui-dialog]>.ui-dialog-form{display:flex!important;flex-direction:column;min-height:0;padding:0!important;margin:0;overflow:hidden!important;border:0;background:transparent}
.ui-dialog-content{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;padding:16px;background:var(--ui-surface);border:1px solid var(--ui-border);border-radius:12px}
:root dialog[data-ui-dialog]>.ui-dialog-form>footer{position:static!important;margin:0!important;padding:12px 0 0!important;flex:none!important;min-height:52px}
:root dialog[data-ui-dialog] :is(.member-detail-tabs,.employee-tabs,.contract-mask-tabs,.ops-subscription-tabs){flex-shrink:0;gap:6px;scrollbar-width:thin}
[data-ui-dialog] :is([role=tab],.member-detail-tabs button,.employee-tabs button){border-radius:9px;font-size:13px;min-height:40px;line-height:1.3}
/* Cash popups share the same sizing and fixed header/actions as native dialogs. */
:root .modal-backdrop{padding:var(--ui-dialog-inset);background:#151c2d66;backdrop-filter:blur(4px)}
:root .modal-backdrop>.discount-modal[data-ui-dialog]{display:flex;flex-direction:column;width:min(var(--ui-dialog-width),calc(100vw - var(--ui-dialog-inset)*2))!important;max-width:100%!important;max-height:calc(100dvh - var(--ui-dialog-inset)*2)!important;height:auto;padding:20px!important;border-radius:var(--ui-radius)!important;border:1px solid var(--ui-border)!important;background:var(--ui-canvas)!important;box-shadow:var(--ui-dialog-shadow)!important;overflow:hidden}
[data-ui-dialog]>.modal-header{flex:none!important;padding:0 0 12px!important;margin:0!important;background:transparent!important;border-bottom:1px solid var(--ui-divider)}
[data-ui-dialog]>.modal-header :is(h2,h3){font-size:22px;line-height:1.25;letter-spacing:-.45px;overflow-wrap:anywhere}
:root [data-ui-dialog]>.modal-body{min-height:0;overflow:auto;padding:16px 0;flex:0 1 auto;overscroll-behavior:contain}
:root [data-ui-dialog]>.modal-footer{position:static!important;padding:12px 0 0!important;margin:0!important;flex:none!important;min-height:52px}
[data-ui-dialog] :is(.customer-row,.invoice-row){box-sizing:border-box;border:0;border-bottom:1px solid var(--ui-divider);border-radius:0;box-shadow:none;margin:0;padding:14px 12px;min-height:var(--ui-row-height);background:var(--ui-surface);font-size:13px;text-align:left;overflow-wrap:anywhere}
[data-ui-dialog] :is(.customer-row,.invoice-row):hover{background:var(--hover,#fff4f5)}
[data-ui-dialog] :is(.customer-row,.invoice-row).selected{background:var(--ui-tint);box-shadow:inset 3px 0 var(--ui-accent)}
/* One table rhythm for member, contract, settings, banking, reports and register lists. */
table[data-ui-table]{border-collapse:collapse;border-spacing:0;font-size:13px;color:var(--ui-ink)}
table[data-ui-table] :is(th,td){box-sizing:border-box;padding:12px 14px;line-height:1.45;vertical-align:middle;border-bottom:1px solid var(--ui-divider)}
table[data-ui-table] th{font-size:12px;font-weight:600;text-align:left;color:var(--ui-muted);background:var(--surface-secondary,#eff1f4);white-space:normal}
table[data-ui-table] th button{font:inherit;color:inherit;line-height:inherit;white-space:normal}
table[data-ui-table] tbody tr{min-height:var(--ui-row-height)}
table[data-ui-table] tbody tr:is(:hover,:focus-within)>td{background:var(--hover,#fff4f5)}
table[data-ui-table] tr[role=button]{cursor:pointer}
table[data-ui-table] tr[role=button]:focus-visible{outline:2px solid var(--ui-accent);outline-offset:-2px}
table[data-ui-table] .column-filters :is(th,td){padding:7px;background:var(--ui-surface)}
table[data-ui-table] :is(.empty,.empty-state){padding:28px 16px;text-align:center;color:var(--ui-muted);line-height:1.6}
:is(.panel-meta,.employee-panel-meta){gap:12px;flex-wrap:wrap;min-height:64px;padding:16px 20px;border-color:var(--ui-divider)}
:is(.table-scroll,.employee-table-wrap){overscroll-behavior-x:contain;overscroll-behavior-y:auto;scrollbar-width:thin}
/* Handset dialogs use the same tokens; React retains its own focus and portal lifecycle. */
.live-dialog{border-radius:var(--ui-radius)!important;background:var(--ui-surface)!important;box-shadow:var(--ui-dialog-shadow)!important;gap:12px!important}
.live-dialog [data-slot=dialog-title]{color:var(--ui-ink);font-weight:650;letter-spacing:-.4px}
.live-dialog-body{min-height:0;overscroll-behavior:contain;scrollbar-width:thin}
.live-dialog :is(input.field,select.field){min-height:44px;border-radius:var(--ui-field-radius);border-color:var(--ui-border)}
.live-rows>*,.booking-card{border-color:var(--ui-border);border-radius:12px}
@media(min-width:1100px){[data-ui-size=wide]>.ui-dialog-form .ops-form{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){
 :root{--ui-dialog-inset:10px;--ui-space:12px;--ui-field-height:44px}
 :root dialog[open][data-ui-dialog]:not(.settings-dialog){padding:12px!important;border-radius:14px!important}
 :root .modal-backdrop>.discount-modal[data-ui-dialog]{padding:12px!important;border-radius:14px!important}
 [data-ui-dialog]>header :is(h2,h3),[data-ui-dialog]>.modal-header :is(h2,h3){font-size:20px!important}
 [data-ui-dialog] :is(.ops-form,.agenda-form-grid,.ops-addon-grid,.employee-form-grid){grid-template-columns:minmax(0,1fr)!important}
 [data-ui-dialog] :is(.ops-wide,.agenda-form-grid>label,.ops-addon-grid>.ops-wide){grid-column:1/-1!important}
 [data-ui-dialog] .ops-form :is(input:not([type=checkbox]),select),[data-ui-dialog] .agenda-form-grid :is(input,select){font-size:16px}
 [data-ui-dialog] :is(footer,.modal-footer) .action{flex:0 1 auto}
 .ui-dialog-content{padding:12px}
 table[data-ui-table] :is(th,td){padding:10px 9px;font-size:12px}
 table[data-ui-table] th{font-size:11px}
 :is(.panel-meta,.employee-panel-meta){padding:12px;min-height:56px}
 [data-ui-dialog] :is(.customer-row,.invoice-row){padding:12px 8px;gap:10px}
}
@media(prefers-reduced-motion:reduce){[data-ui-dialog],.live-dialog,table[data-ui-table] *{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.auth-page .card{border-color:var(--ui-border);border-radius:20px;box-shadow:0 12px 36px #20232b06}
.auth-page label{color:var(--ui-muted);font-size:13px;line-height:1.4}
.auth-page .card :is(input,select){border:1px solid var(--ui-border);border-radius:var(--ui-field-radius);min-height:46px;background:var(--ui-surface);color:var(--ui-ink)}
.auth-page .card .button{border-radius:var(--ui-field-radius);min-height:44px}
@media(max-width:700px){.ops-subscription-panel{grid-template-columns:minmax(0,1fr)!important}.ops-subscription-panel>.ops-note{grid-column:1/-1}.auth-page .card{padding:20px}.auth-page .registration-grid{grid-template-columns:minmax(0,1fr)}}
/* Employee panels, rather than the complete form, own overflow on short screens. */
:root #employeeDialog #employeeEditor{flex:1;min-height:0;overflow:hidden}
:root #employeeDialog #employeeForm{display:flex;flex-direction:column;height:100%;min-height:0!important;overflow:hidden}
:root #employeeDialog #employeeForm>[role=tabpanel]{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
:root #employeeDialog #employeeForm>:is(.employee-tabs,footer,.employee-error,.employee-conflict){flex-shrink:0}
:root #employeeDialog #employeeForm>footer{position:static!important;margin:0!important;padding:12px!important;background:var(--ui-canvas)}
[data-ui-dialog]:is(.ops-confirm,.employee-confirm)>h2{font-size:21px;line-height:1.3;margin:0 0 12px;letter-spacing:-.4px}
[data-ui-dialog]:is(.ops-confirm,.employee-confirm)>p{line-height:1.6;overflow-wrap:anywhere}
@media(max-width:700px){[data-ui-dialog] .employee-detail-grid{grid-template-columns:minmax(0,1fr)!important}}
html.ui-modal-open{overflow:hidden;overscroll-behavior:none}
@media(min-width:1000px){
 :root #memberDialog .member-detail-body{padding:12px}
 :root #memberDialog .member-form-grid>div{gap:8px}
 :root #memberDialog .member-form-section+.member-form-section{margin-top:12px}
 :root #memberDialog .member-form-section h3{margin-bottom:6px;padding-bottom:6px}
 :root #memberDialog .member-profile-aside .member-photo{max-height:150px;width:150px}
}
:root table[data-ui-table] :is(th,td){padding:14px 16px;font-size:13px;line-height:1.5;border-bottom-color:var(--ui-divider)}
:root table[data-ui-table] th{font-size:12px;font-weight:600;color:var(--ui-muted);background:var(--surface-secondary,#eff1f4)}
:root table[data-ui-table] .column-filters :is(th,td){padding:8px;background:var(--ui-surface)}
:is(.member-status,.employee-access-badge,.list-status,.contract-status){border-radius:8px;font-size:12px;line-height:1.4;white-space:normal}
@media(max-width:700px){:root table[data-ui-table] :is(th,td){padding:10px 8px;font-size:12px}:root table[data-ui-table] th{font-size:11px}:root table[data-ui-table] .column-filters :is(th,td){padding:6px}}
:root [data-ui-dialog]>.cash-audit-body{min-height:0;overflow:auto;flex:0 1 auto;overscroll-behavior:contain}
[data-ui-dialog] :is(footer,.modal-footer)>div{min-width:0;flex-wrap:wrap;gap:10px}
[data-ui-dialog] :is(footer,.modal-footer) button:not(.ui-close){min-height:40px;border-radius:var(--ui-field-radius);font-size:13px;line-height:1.4;white-space:normal}
[data-ui-dialog] .cash-audit-sidebar,[data-ui-dialog] .cash-denomination-section{min-width:0}
:root .modal-backdrop{box-sizing:border-box;align-items:center!important;justify-content:center!important}
:root .modal-backdrop>.discount-modal[data-ui-dialog]{box-sizing:border-box}
[data-ui-dialog] :is(.cash-amount-wrap,.discount-input-wrap)>input{border:0!important;border-radius:0!important;background:transparent!important;outline:0!important;box-shadow:none!important}
[data-ui-dialog] :is(.cash-amount-wrap,.discount-input-wrap):focus-within{border-color:var(--ui-accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--ui-accent) 18%,transparent)}
[data-ui-dialog] .payment-choice{min-width:0}
[data-ui-dialog] .payment-choice :is(strong,small){max-width:100%;white-space:normal!important;overflow-wrap:anywhere;hyphens:auto}
[data-ui-dialog] .customer-name :is(strong,span){white-space:normal!important;overflow-wrap:anywhere;text-overflow:clip;max-width:100%}
@media(max-width:700px){[data-ui-dialog] .payment-choice{padding:12px 8px!important}[data-ui-dialog] .payment-choice small{font-size:11px;line-height:1.4}[data-ui-dialog] .customer-row{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}[data-ui-dialog] .customer-main{grid-column:1/-1}[data-ui-dialog] .customer-check{display:none}}
.live-dialog-actions{flex:none;padding-top:12px;border-top:1px solid var(--ui-divider);background:var(--ui-surface)}.live-dialog-actions:empty{display:none}.live-dialog-actions .btn{min-height:44px;border-radius:var(--ui-field-radius)}
[data-ui-dialog] :is(.employee-error,.employee-conflict,.member-error,.ops-error,.agenda-error,[role=alert]):not(:empty),.live-dialog .api-error{max-height:min(24dvh,160px);overflow:auto;overscroll-behavior:contain}
@media(prefers-reduced-transparency:reduce){dialog[data-ui-dialog]::backdrop,.modal-backdrop{backdrop-filter:none!important}}
[data-ui-size=notice]{--ui-dialog-width:460px}
:is(.date-filter-popover,.shell-account-menu,.phone-menu){border:1px solid var(--ui-border);border-radius:var(--ui-radius);background:var(--popover,var(--ui-surface));box-shadow:var(--ui-dialog-shadow)}
:is(.date-filter-popover,.shell-account-menu,.phone-menu) button{border-radius:var(--ui-field-radius);line-height:1.4}
:is(.phone-stage,.phone-frame,.phone-overlays,.live-dialog){--ui-surface:var(--card,#fff);--ui-ink:var(--foreground,#22252c);--ui-muted:var(--muted-foreground,#67717e);--ui-accent:var(--primary,#b23845);--ui-tint:var(--accent,#fceef0);--ui-border:var(--border,#dce0e6);--ui-divider:var(--border,#e6e7eb)}
/* The register viewport must fit the studio shell; otherwise fixed overlays extend below short windows. */
:root #registerFrame{height:calc(100dvh - 130px)!important;min-height:0!important;max-height:calc(100dvh - 130px)}
@media(max-width:800px){:root #registerFrame{height:calc(100dvh - 170px)!important;max-height:calc(100dvh - 170px)}}

/* One shared record-creation affordance: red square plus, last at the right. */
:root body button.action.ui-list-create{display:inline-flex!important;align-items:center;justify-content:center;width:40px!important;min-width:40px!important;max-width:40px!important;height:40px!important;min-height:40px!important;flex:0 0 40px!important;order:100;padding:0!important;border:1px solid var(--action-primary,#b9384c)!important;border-radius:10px!important;background:var(--action-primary,#b9384c)!important;color:#fff!important;font-size:24px!important;font-weight:400!important;line-height:1!important;box-shadow:none!important;cursor:pointer}
:root body button.action.ui-list-create:hover{background:var(--action-primary-hover,#a52f42)!important;border-color:var(--action-primary-hover,#a52f42)!important}
:root body button.action.ui-list-create:disabled{opacity:.45;cursor:not-allowed}
:root body button.action.ui-list-create:focus-visible{outline:3px solid var(--focus,#d98a99);outline-offset:3px}
.ui-list-actions,.list-create-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap;margin-left:auto}
:root .training-plan-list>.panel-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 20px}
.training-plan-list h2{font-size:21px;letter-spacing:-.5px;margin:0;font-weight:600}
:root .training-plan-list .plan-list-actions{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;width:auto;margin-left:auto}
:root .training-plan-list .plan-list-actions>.action{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:9px 12px;white-space:nowrap;font-size:13px}
:root .training-plan-list .plan-list-actions svg{width:16px;height:16px}
:root .training-plan-list .plan-archive-toggle[aria-pressed=true]{background:var(--accent-soft,#fbf0f3);color:var(--action-primary,#b9384c)}
:root .training-plan-list .training-plan-table{width:100%;min-width:0;table-layout:fixed}
:root .training-plan-list .training-plan-table :is(th,td):last-child{width:auto!important;text-align:left}
:root .training-plan-list .training-plan-table th{font-size:12px;font-weight:400;padding:12px 20px;background:var(--surface,#fff);color:var(--muted,#747e8d)}
:root .training-plan-list .training-plan-table td{font-size:14px;padding:17px 20px;overflow-wrap:anywhere;background:var(--surface,#fff)}
.training-plan-table td small{display:block;margin-top:4px;color:var(--muted,#747e8d);font-size:12px}
.plan-editor-archive{margin-right:auto;color:var(--action-primary,#b9384c)}
@media(max-width:600px){:root .training-plan-list>.panel-meta{padding:14px;gap:14px}:root .training-plan-list .plan-list-actions{margin-left:auto}:root .training-plan-list .plan-list-actions>.action{font-size:12px;padding:9px 10px}}
:root .agenda-month-add{background:var(--action-primary,#b9384c);color:#fff;border-color:var(--action-primary,#b9384c)}