:root{--ui-accent:#184cb8;--ui-hover:#123c96;--ui-on:#fff;--ui-soft:#eaf0ff;--ui-accent-text:#184cb8}
:root[data-color="yellow"]{--ui-accent:#ffdb4d;--ui-hover:#ffd333;--ui-on:#191919;--ui-soft:#fff6d5;--ui-accent-text:#806000}
:root[data-color="sky"]{--ui-accent:#1685c1;--ui-hover:#1074ac;--ui-on:#fff;--ui-soft:#e7f6ff;--ui-accent-text:#09638d}
:root[data-color="blue"]{--ui-accent:#184cb8;--ui-hover:#123c96;--ui-on:#fff;--ui-soft:#eaf0ff;--ui-accent-text:#184cb8}
:root[data-mode="dark"]{color-scheme:dark;--ui-accent:#ef4551;--ui-hover:#ff5863;--ui-on:#fff;--ui-soft:#44252b;--ui-accent-text:#ff7b84}
.primary,.payment-card .primary,.payment-card .preset.active,.bay.active,.calendar-day.range-edge,.profile-avatar,.drawer-links button.active .drawer-icon{background:var(--ui-accent);color:var(--ui-on)}
.primary:hover,.payment-card .primary:hover,.payment-card .preset:hover:not(:disabled){background:var(--ui-hover);color:var(--ui-on)}
.payment-card .primary>svg:last-child,.bay.active small,.admin .primary{color:var(--ui-on)}
.payment-card .method[data-method="cashback"].active{background:var(--ui-accent);border-color:var(--ui-accent)}
.payment-card .method[data-method="cashback"].active strong,.payment-card .method[data-method="cashback"].active small,.payment-card .method[data-method="cashback"].active .wallet-icon{color:var(--ui-on)}
.payment-card .method[data-method="cashback"].active>.radio{background:var(--ui-on)}
.payment-card .method[data-method="cashback"].active>.radio::after{border-color:var(--ui-accent)}
.drawer-links button.active,.drawer-links button.active:hover,.calendar-day.in-range,.modal-symbol{background:var(--ui-soft)}
.payment-card .amount-input:focus-within,.field:focus,.phone-field:focus-within{border-color:var(--ui-accent)}
.payment-card .cashback-line,.payment-card .cashback-line svg,.payment-card .cashback-line strong{color:var(--ui-accent-text)}
.settings-card h2{font-size:23px;margin:0 0 24px}.settings-card h3{font-size:16px;margin:24px 0 12px}.appearance-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}.appearance-choice{border:2px solid transparent;border-radius:17px;background:#f4f4f4;padding:15px 12px;display:flex;align-items:center;justify-content:center;gap:9px;min-height:62px;font-size:14px}.appearance-choice[aria-pressed="true"]{border-color:var(--ui-accent);background:var(--ui-soft)}.color-swatch{width:25px;height:25px;border-radius:50%;background:var(--swatch);border:1px solid #0001;flex-shrink:0}.appearance-choice[aria-pressed="true"] .color-swatch{box-shadow:0 0 0 3px #fff,0 0 0 4px var(--ui-accent)}.settings-note{color:#777;font-size:12px;line-height:1.6}.appearance-choice:disabled{opacity:.35}
:root[data-mode="dark"],:root[data-mode="dark"] body{background:#121315;color:#f4f4f5}
[data-mode="dark"] .header.app-header,[data-mode="dark"] .card,[data-mode="dark"] .card.payment-card,[data-mode="dark"] .modal,[data-mode="dark"] .menu-drawer{background:#1e2024;color:#f4f4f5}
[data-mode="dark"] .brand-text,[data-mode="dark"] .header-location,[data-mode="dark"] .menu-toggle,[data-mode="dark"] .card h3,[data-mode="dark"] .page-title,[data-mode="dark"] .step-head h2,[data-mode="dark"] .drawer-heading h2,[data-mode="dark"] .modal h2,[data-mode="dark"] .drawer-links button,[data-mode="dark"] .history-row b,[data-mode="dark"] .payment-card .total strong,[data-mode="dark"] .payment-card .amount-input input{color:#f4f4f5}
[data-mode="dark"] .header-location{background:#2b2e34;border-color:#3b3e45}[data-mode="dark"] .header-location-main>svg{background:#3b3e45;color:#ff7880}
[data-mode="dark"] .amount-slider{--amount-slider-track:#454850}[data-mode="dark"] .amount-slider-labels{color:#d6d7da}
[data-mode="dark"] .payment-card .amount-input,[data-mode="dark"] .field,[data-mode="dark"] .phone-field,[data-mode="dark"] .period-trigger,[data-mode="dark"] .secondary,[data-mode="dark"] .close,[data-mode="dark"] .drawer-close,[data-mode="dark"] .drawer-icon,[data-mode="dark"] .history-symbol,[data-mode="dark"] .receipt,[data-mode="dark"] .appearance-choice,[data-mode="dark"] .history-stats>div{background:#2b2e34;color:#f4f4f5;border-color:#3b3e45}
[data-mode="dark"] .phone-field input,[data-mode="dark"] .phone-field span{color:#f4f4f5}
[data-mode="dark"] .payment-card .preset:not(.active),[data-mode="dark"] .payment-card .method:not(.active),[data-mode="dark"] .bay:not(.active){background:#2b2e34;color:#f4f4f5;border-color:#353840}
[data-mode="dark"] .payment-card .method:not(.active) strong,[data-mode="dark"] .payment-card .method:not(.active) .wallet-icon{color:#f4f4f5}
[data-mode="dark"] .method:not(.active) .click-logo img{filter:brightness(0) invert(1)}
[data-mode="dark"] .payment-card .method small,[data-mode="dark"] .amount-field-label,[data-mode="dark"] .payment-card .amount-input span,[data-mode="dark"] .payment-card .total,[data-mode="dark"] .payment-card .terms,[data-mode="dark"] .payment-card .terms button,[data-mode="dark"] .modal p,[data-mode="dark"] .modal label,[data-mode="dark"] .modal .subtle,[data-mode="dark"] .history-row small,[data-mode="dark"] .settings-note,[data-mode="dark"] .stats-note,[data-mode="dark"] .history-stats span,[data-mode="dark"] .profile-phone-label,[data-mode="dark"] .calendar-all,[data-mode="dark"] .calendar-selection,[data-mode="dark"] .footer,[data-mode="dark"] .footer button{color:#adb2be}
[data-mode="dark"] .payment-card .method.active small{color:#fff}
[data-mode="dark"] .history-row,[data-mode="dark"] .payment-card .total,[data-mode="dark"] .drawer-heading,[data-mode="dark"] .drawer-links button[data-lang]{border-color:#363941}
[data-mode="dark"] .history-stats>div:last-child{background:#34263f}[data-mode="dark"] .history-stats>div:last-child strong,[data-mode="dark"] .history-amount small{color:#d3a0ff}
[data-mode="dark"] .calendar-day{color:#f4f4f5}[data-mode="dark"] .calendar-day:hover{background:#353840}[data-mode="dark"] .calendar-day.in-range,[data-mode="dark"] .appearance-choice[aria-pressed="true"],[data-mode="dark"] .drawer-links button.active{background:var(--ui-soft)}[data-mode="dark"] .calendar-day.range-edge{background:var(--ui-accent)}
[data-mode="dark"] .drawer-links button:hover,[data-mode="dark"] .menu-toggle:hover{background:#30333a}[data-mode="dark"] .primary:disabled{background:#353840;color:#a0a5af}
[data-mode="dark"] button:focus-visible,[data-mode="dark"] a:focus-visible,[data-mode="dark"] input:focus-visible{outline-color:#e0e5f1}[data-mode="dark"] .appearance-choice[aria-pressed="true"]{border-color:var(--ui-accent)}.field:focus,.phone-field:focus-within{box-shadow:0 0 0 2px var(--ui-soft)}.primary:disabled,.payment-card .primary:disabled{background:#eee;color:#aaa}
.mode-icon{display:grid;place-items:center;width:26px;height:26px;flex:0 0 26px}.mode-icon svg{width:24px;height:24px;stroke-width:1.8}.drawer-icon svg{width:23px;height:23px;stroke-width:1.7}
.calendar-month button{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;line-height:1;border-radius:14px}.calendar-month button svg{display:block;width:22px;height:22px;stroke-width:2}.calendar-month #month-prev svg{transform:rotate(180deg)}
.payment-card .method[data-method="click"].active{background:#f7f7f7;border-color:#1685c1}.payment-card .method[data-method="click"].active .click-logo img{filter:none}.payment-card .method[data-method="click"].active small{color:#777}.payment-card .method[data-method="click"].active>.radio{background:#1685c1}.payment-card .method[data-method="click"].active>.radio::after{border-color:#fff}
[data-mode="dark"] .payment-card .method[data-method="click"].active{background:#2b2e34;border-color:#1685c1}[data-mode="dark"] .payment-card .method[data-method="click"].active .click-logo img{filter:brightness(0) invert(1)}[data-mode="dark"] .payment-card .method[data-method="click"].active small{color:#adb2be}
.header-online-light{display:inline-block;flex:0 0 auto;width:.55rem;height:.55rem;border-radius:50%;background:#18a558;box-shadow:0 0 0 .2rem #18a55820;animation:online-pulse 1.8s ease-in-out infinite}.maintenance-notice{grid-column:1/-1;display:grid;gap:.2rem;width:100%;margin:0 0 1.25rem;padding:.875rem 1rem;border:1px solid #eadfbd;border-radius:.875rem;background:#fff8e8;color:#745514;font-size:.875rem;font-weight:700;line-height:1.45;text-align:left}.maintenance-notice strong{font-size:.875rem}.maintenance-notice span{font-size:.8125rem;font-weight:600}.payment-card .amount-input.invalid{border-color:#c92b35;box-shadow:0 0 0 3px #c92b3514}.amount-error{margin:.5rem 0 0;color:#b01f29;font-size:.75rem;line-height:1.45}.amount-error[hidden]{display:none}.bay:disabled{opacity:.45;cursor:not-allowed}
.payment-card .primary.offline-action{border:1px solid #eadfbd;background:#fff8e8;color:#745514}.payment-card .primary.offline-action:hover{background:#ffefc6;color:#60440d}.payment-card .primary.offline-action>svg{color:currentColor}
.offline-bay-modal{width:min(100%,30rem)}.offline-bay-symbol{background:#fff3d2;color:#8a6210}.offline-current{display:inline-flex;align-items:center;gap:.5rem;max-width:100%;margin:.25rem 0 .75rem;padding:.45rem .7rem;border-radius:999px;background:#f6f7f8;color:#59636f;font-size:.8125rem;font-weight:700;line-height:1.35}.offline-current>span{width:.5rem;height:.5rem;flex:0 0 .5rem;border-radius:50%;background:#df3541;box-shadow:0 0 0 .2rem #df354118}.offline-bay-modal>p{margin:.25rem 0 1rem;font-size:.9375rem;line-height:1.6}.offline-cash-note{display:grid;grid-template-columns:auto minmax(0,1fr);gap:.25rem .75rem;align-items:center;margin:0 0 1.25rem;padding:.875rem 1rem;border:1px solid #d7e5da;border-radius:.875rem;background:#f2faf4;color:#2e6140;font-size:.875rem;line-height:1.45}.offline-cash-note strong{grid-row:1/3;align-self:start;padding:.15rem .55rem;border-radius:999px;background:#dff2e4;color:#216239}.offline-cash-note span{font-weight:600}.offline-bay-heading{margin:0 0 .625rem;font-size:.875rem;line-height:1.35;color:#323a43}.offline-bay-list{display:grid;gap:.625rem;max-height:min(40dvh,20rem);overflow:auto;overscroll-behavior:contain;padding:.125rem}.offline-bay-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:.75rem;width:100%;min-height:4rem;padding:.75rem .875rem;border:1px solid #dfe4e8;border-radius:.875rem;background:#fff;color:#151a20;text-align:left}.offline-bay-option:hover{border-color:#9fcfb0;background:#f5fbf7}.offline-bay-option:focus-visible{outline:3px solid color-mix(in srgb,var(--ui-accent) 25%,transparent);outline-offset:2px}.offline-bay-light{width:.625rem;height:.625rem;border-radius:50%;background:#18a558;box-shadow:0 0 0 .25rem #18a55818}.offline-bay-option>span:nth-child(2){display:grid;gap:.15rem}.offline-bay-option strong{font-size:1rem;line-height:1.25}.offline-bay-option small{color:#65717b;font-size:.8125rem;line-height:1.35}.offline-bay-option>svg{width:1.25rem;height:1.25rem;color:#697581}.offline-bay-empty{padding:1rem;border:1px dashed #d7dde2;border-radius:.875rem;background:#f7f8f9;color:#5e6873;font-size:.875rem;line-height:1.5;text-align:center}.offline-refresh{width:100%;min-height:3rem;margin-top:1rem}
.amount-suggestions{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.625rem 0 0}.amount-suggestions>span{flex:1 1 100%;color:#65717b;font-size:.75rem;line-height:1.4}.amount-suggestions>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem;width:100%}.amount-suggestion{min-height:2.75rem;padding:.625rem .75rem;border:1px solid color-mix(in srgb,var(--ui-accent) 32%,#d7dce0);border-radius:.75rem;background:var(--ui-soft);color:var(--ui-accent-text);font-size:.875rem;font-weight:800}.amount-suggestion:hover{background:var(--ui-accent);color:var(--ui-on)}.amount-suggestion:active{transform:scale(.98)}
[data-mode="dark"] .maintenance-notice,[data-mode="dark"] .payment-card .primary.offline-action{background:#352f21;border-color:#5a4b28;color:#e5c878}[data-mode="dark"] .payment-card .primary.offline-action:hover{background:#443a24;color:#f1d88c}[data-mode="dark"] .payment-card .amount-input.invalid{border-color:#e2656d;box-shadow:0 0 0 3px #e2656d1f}[data-mode="dark"] .amount-error{color:#f2aab0}[data-mode="dark"] .offline-bay-symbol{background:#3c3320;color:#f2cf70}[data-mode="dark"] .offline-current{background:#292c31;color:#c6cad1}[data-mode="dark"] .offline-cash-note{background:#203028;border-color:#34483b;color:#b9dfc4}[data-mode="dark"] .offline-cash-note strong{background:#2a4835;color:#c5edcf}[data-mode="dark"] .offline-bay-heading{color:#eef0f3}[data-mode="dark"] .offline-bay-option{background:#292c31;border-color:#3b3f46;color:#f4f4f5}[data-mode="dark"] .offline-bay-option:hover{background:#26352c;border-color:#496d56}[data-mode="dark"] .offline-bay-option small{color:#adb2be}[data-mode="dark"] .offline-bay-option>svg{color:#adb2be}[data-mode="dark"] .offline-bay-empty{background:#272a2f;border-color:#454950;color:#bcc0c8}
[data-mode="dark"] .amount-suggestions>span{color:#adb2be}[data-mode="dark"] .amount-suggestion{border-color:#594048;background:var(--ui-soft);color:#ffb7bc}
@keyframes online-pulse{0%,100%{opacity:1;box-shadow:0 0 0 .18rem #18a55822}50%{opacity:.42;box-shadow:0 0 0 .42rem #18a5580a}}
@media(prefers-reduced-motion:reduce){.header-online-light{animation:none}}
.settings-install{width:100%;min-height:52px;margin:0 0 24px;display:flex;align-items:center;justify-content:center;gap:10px}.settings-install svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}.install-steps{display:grid;gap:12px;margin:18px 0 0;padding-left:24px;color:#777;font-size:14px;line-height:1.55}.install-steps li{padding-left:4px}.app-loading{min-height:100svh;display:grid;place-items:center;background:#f3f3f3}.app-loading span{width:34px;height:34px;border:3px solid #dce2ec;border-top-color:#184cb8;border-radius:50%;animation:app-loading-spin .7s linear infinite}[data-mode="dark"] .install-steps{color:#adb2be}[data-mode="dark"] .app-loading{background:#121315}.app-loading span{border-top-color:var(--ui-accent)}@keyframes app-loading-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.app-loading span{animation-duration:1.4s}}

/* Static styles remain available under style-src-attr none. */
.swatch-red{--swatch:#d9232e}.swatch-yellow{--swatch:#ffdb4d}.swatch-sky{--swatch:#1685c1}.swatch-blue{--swatch:#184cb8}
.admin-login-card{max-width:440px}.admin-transactions-card{margin-top:22px}
#otp{font-size:27px;letter-spacing:16px;text-align:center}