:root { --ink:#24213a; --muted:#938e9f; --violet:#7753c9; --violet-deep:#5a36ad; --lavender:#f2ecff; --line:#edeaf2; --page:#f8f7fb; --white:#fff; --green:#ddf5e6; --green-ink:#2f8b59; --yellow:#fff3cb; --yellow-ink:#9b7425; --pink:#ffe4e7; --pink-ink:#bc5572; --blue:#e0efff; --blue-ink:#4c88c1; font-family:Manrope,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--ink); background:var(--page); }
* { box-sizing:border-box; } html,body { margin:0; min-height:100%; } button,input,select,textarea { font:inherit; } button { cursor:pointer; } button:disabled { opacity:.45; cursor:not-allowed; } a { color:inherit; }
body { min-height:100vh; } .app-shell { min-height:100vh; padding-bottom:calc(90px + env(safe-area-inset-bottom)); } .container { width:min(100%,490px); margin:0 auto; } .splash { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; color:var(--violet); font-weight:700; } .brand-mark { width:52px; height:52px; display:grid; place-items:center; border-radius:18px; background:var(--violet); color:#fff; font-size:30px; box-shadow:0 12px 28px #7652c851; }
.topbar { position:sticky; top:0; z-index:5; background:rgba(248,247,251,.94); backdrop-filter:blur(16px); padding:calc(12px + env(safe-area-inset-top)) 20px 14px; border-bottom:1px solid #efedf3; } .topbar-row,.row { display:flex; align-items:center; justify-content:space-between; gap:12px; } .topbar h1 { margin:0; font-size:22px; letter-spacing:-.045em; line-height:1.2; } .eyebrow { margin:0 0 5px; color:var(--muted); font-size:11px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; } .top-actions { display:flex; gap:8px; }
.icon-button { border:0; color:var(--ink); background:#fff; box-shadow:0 2px 12px #30304f0a; border-radius:14px; width:40px; height:40px; display:grid; place-items:center; flex:none; } .icon-button svg,.nav-button svg,.small-icon svg { width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .icon-button.primary { background:var(--violet); color:#fff; }
.content { padding:18px 18px 30px; } .section-title { font-size:19px; line-height:1.3; letter-spacing:-.035em; margin:0; font-weight:800; } .section-head { display:flex; align-items:center; justify-content:space-between; margin:26px 2px 14px; gap:10px; } .section-head:first-child { margin-top:2px; } .section-sub { color:var(--muted); font-size:12px; margin-top:4px; }
.text-button { color:var(--violet); background:none; border:0; font-weight:800; font-size:12px; white-space:nowrap; } .pill { border:1px solid var(--line); border-radius:999px; background:#fff; padding:7px 11px; font-size:11px; font-weight:800; white-space:nowrap; } .pill.violet { background:var(--lavender); border-color:transparent; color:var(--violet); }
.hero { position:relative; overflow:hidden; background:linear-gradient(135deg,#6549bc 0%,#9871d2 42%,#5ec9d3 100%); border-radius:27px; min-height:158px; padding:22px; color:#fff; box-shadow:0 14px 24px #7652c821; } .hero:before,.hero:after { content:""; position:absolute; border-radius:50%; background:#ffffff1c; } .hero:before { width:200px;height:200px;right:-65px;top:-105px; } .hero:after { width:180px;height:180px;right:20px;bottom:-130px; } .hero > * { position:relative; z-index:1; } .hero-kicker { font-size:12px; opacity:.85; font-weight:700; } .hero-title { margin:8px 0 4px; font-size:27px; line-height:1.14; letter-spacing:-.05em; font-weight:800; max-width:260px; } .hero-copy { margin:0; font-size:12px; opacity:.88; line-height:1.5; max-width:270px; } .hero-icon { position:absolute; right:22px; bottom:14px; font-size:72px; line-height:1; opacity:.85; transform:rotate(-10deg); }
.summary-cards { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:12px; } .summary-card { background:#fff; border:1px solid #f0edf4; border-radius:18px; padding:12px 10px; min-height:70px; } .summary-value { display:block; font-size:19px; font-weight:800; letter-spacing:-.045em; } .summary-label { display:block; color:var(--muted); font-size:10px; margin-top:2px; line-height:1.3; }
.date-tools { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:10px 0 14px; } .date-heading { font-weight:800; font-size:18px; letter-spacing:-.035em; } .segmented { display:flex; padding:3px; gap:2px; background:#ece9f2; border-radius:13px; } .segmented button { border:0; background:none; border-radius:10px; padding:6px 10px; font-size:11px; font-weight:800; color:var(--muted); } .segmented button.active { background:#fff; color:var(--violet); box-shadow:0 2px 6px #261c4c12; }
.date-strip { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin-bottom:18px; } .date-chip { border:0; border-radius:16px; background:transparent; padding:9px 1px; display:flex; align-items:center; flex-direction:column; gap:7px; min-width:0; color:var(--muted); } .date-chip.active { background:var(--violet); color:#fff; box-shadow:0 7px 15px #7753c84b; } .date-chip .weekday { font-size:10px; font-weight:800; } .date-chip .day { font-size:15px; font-weight:800; } .date-chip .dot { width:4px; height:4px; border-radius:50%; background:currentColor; opacity:.5; }
.timeline { position:relative; display:grid; gap:10px; } .appointment { display:grid; grid-template-columns:47px 1fr; gap:10px; align-items:start; } .time-label { font-size:12px; font-weight:800; color:#7c7690; padding-top:18px; } .appointment-card { border:0; text-align:left; width:100%; border-radius:19px; padding:14px; position:relative; overflow:hidden; min-height:102px; } .appointment-card:before { content:""; position:absolute; left:0;top:0;bottom:0;width:4px;background:currentColor;opacity:.65; } .appointment-card.green { background:var(--green);color:var(--green-ink); } .appointment-card.yellow { background:var(--yellow);color:var(--yellow-ink); } .appointment-card.pink { background:var(--pink);color:var(--pink-ink); } .appointment-card.blue { background:var(--blue);color:var(--blue-ink); } .appointment-card.lavender { background:var(--lavender);color:var(--violet); } .appt-name { font-size:14px; font-weight:800; color:var(--ink); } .appt-service { font-size:11px; color:#625c6c; margin-top:4px; line-height:1.4; } .appt-foot { margin-top:14px; display:flex; align-items:center; justify-content:space-between; font-size:11px; font-weight:800; } .appt-status { font-size:10px; font-weight:800; }
.empty-card { border:1px dashed #d8d1e6; border-radius:20px; padding:28px 20px; text-align:center; color:var(--muted); font-size:13px; background:#fff; } .empty-icon { display:block; font-size:28px; color:var(--violet); margin-bottom:5px; }
.card { background:#fff; border-radius:20px; border:1px solid #efedf3; padding:16px; margin-bottom:10px; box-shadow:0 3px 16px #26213706; } .client-card,.service-card { display:flex; align-items:center; gap:12px; } .avatar { width:42px;height:42px;display:grid;place-items:center;border-radius:14px; background:linear-gradient(135deg,#edd6fe,#c6e8f2);color:var(--violet-deep);font-size:15px;font-weight:800;flex:none; } .avatar.peach { background:linear-gradient(135deg,#ffe2d8,#ffefd2);color:#bc6c73; } .avatar.green { background:linear-gradient(135deg,#c9f0e2,#dff0ca);color:#448666; } .card-title { font-size:13px; font-weight:800; } .card-sub { font-size:11px; color:var(--muted); margin-top:3px; line-height:1.4; } .card-main { min-width:0; flex:1; } .service-price { font-size:13px; font-weight:800; white-space:nowrap; } .chevron { color:#ada6ba; font-size:21px; line-height:1; }
.search-box { display:flex; align-items:center; gap:9px; border:1px solid var(--line); background:#fff; border-radius:16px; padding:0 13px; height:46px; margin-bottom:17px; color:var(--muted); } .search-box svg { width:18px; height:18px; flex:none; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; } .search-box input { width:100%; border:0; outline:0; background:transparent; font-size:13px; color:var(--ink); }
.client-list-count { margin:-5px 2px 13px; color:var(--muted); font-size:12px; }
.client-pager { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:18px 0 22px; color:var(--muted); font-size:11px; text-align:center; }
.client-pager .button { width:auto; min-width:76px; padding:10px 12px; }
.client-pager .button:disabled { opacity:.45; cursor:default; }
.nav { position:fixed; z-index:7; left:0; right:0; bottom:0; background:rgba(255,255,255,.96); backdrop-filter:blur(14px); border-top:1px solid #e9e6ee; padding:9px 8px calc(8px + env(safe-area-inset-bottom)); box-shadow:0 -8px 26px #2e26450b; } .nav-inner { max-width:490px; margin:auto; display:grid; grid-template-columns:repeat(5,1fr); gap:0; } .nav-button { border:0; background:transparent; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; padding:4px 0; min-width:0; color:#9a94a7; font-size:9px; font-weight:800; } .nav-button.active { color:var(--violet); } .nav-button svg { width:22px;height:22px; } .nav-button .nav-add { background:var(--violet); color:#fff; width:43px;height:43px; display:grid;place-items:center; border-radius:15px; margin-top:-20px; box-shadow:0 8px 16px #7753c862; }
.button { width:100%; border:0; border-radius:15px; background:var(--violet); color:#fff; padding:13px 16px; font-size:12px; font-weight:800; box-shadow:0 8px 16px #7753c82c; } .button.secondary { background:var(--lavender); color:var(--violet); box-shadow:none; } .button.ghost { background:#fff;color:var(--violet);border:1px solid #d8cbed;box-shadow:none; } .button.danger { background:#ffedf0; color:#b54e6a; box-shadow:none; } .button.inline { width:auto; } .button.compact { width:auto; padding:8px 11px; border-radius:11px; font-size:10px; }
.profile-head { background:linear-gradient(145deg,#7351be 0%,#a384db 55%,#69c6d2 100%); min-height:222px; padding:26px 22px 22px; color:#fff; border-radius:0 0 29px 29px; position:relative; overflow:hidden; } .profile-head:after { content:"✦"; position:absolute; font-size:180px; right:-15px;top:-45px;opacity:.12; } .profile-head > * { position:relative;z-index:1; } .profile-avatar { width:72px;height:72px;display:grid;place-items:center;border-radius:24px; background:#ffffff35;border:2px solid #ffffff66; font-size:32px; font-weight:800; margin-bottom:13px; } .profile-head h1 { font-size:23px;line-height:1.2;margin:0 0 5px;letter-spacing:-.04em; } .profile-head p { margin:0;font-size:12px;opacity:.9; } .profile-meta { display:flex; gap:12px; margin-top:15px; font-size:11px;font-weight:700; }
.category-label { font-size:12px; font-weight:800; color:var(--muted); text-transform:uppercase; letter-spacing:.1em; margin:18px 3px 12px; } .book-service { display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);padding:13px 3px; } .book-service:last-child { border:0; } .select-circle { width:26px;height:26px;border-radius:50%;display:grid;place-items:center;border:1.5px solid #cbbce6;color:var(--violet);font-weight:800;font-size:18px;flex:none; } .select-circle.selected { background:var(--violet);color:#fff;border-color:var(--violet); } .book-bar { position:fixed;bottom:calc(75px + env(safe-area-inset-bottom));left:0;right:0;z-index:6;padding:0 18px;pointer-events:none; } .book-bar-inner { max-width:454px;margin:auto;background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 30px #3d245a23;padding:9px 9px 9px 14px;display:flex;align-items:center;gap:10px;pointer-events:auto; } .book-bar .button { width:auto; white-space:nowrap; } .book-total { font-size:13px;font-weight:800;flex:1; } .book-total small { display:block;color:var(--muted);font-size:10px;font-weight:600; }
.slot-grid { display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:16px 0; } .slot { border:1px solid #d7c9ec;color:var(--violet);background:#fff;border-radius:11px;padding:10px 4px;font-size:12px;font-weight:800; } .slot.active { background:var(--violet);border-color:var(--violet);color:#fff; } .date-input { width:100%;height:44px;padding:0 12px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink); }
.form-stack { display:grid;gap:13px; } .field { display:grid;gap:6px; } .field label { font-size:11px;font-weight:800;color:#665e74; } .field input,.field textarea,.field select { border:1px solid #e6e1ed;border-radius:12px;outline:none;padding:11px 12px;background:#fff;color:var(--ink);width:100%;font-size:12px; } .field input:focus,.field textarea:focus,.field select:focus { border-color:#9b7ad9;box-shadow:0 0 0 3px #9b7ad922; } .field textarea { min-height:72px;resize:vertical; } .field-row { display:grid;grid-template-columns:1fr 1fr;gap:10px; }
.appointment-form-sheet { max-height:92dvh;overscroll-behavior:contain; }
.appointment-form .field input:not([type="hidden"]),.appointment-form .field textarea { font-size:16px;min-width:0; }
.appointment-form .field-row > .field { min-width:0; }
.appointment-form [hidden] { display:none!important; }
.appointment-client-section { display:grid;gap:10px;min-width:0; }
.appointment-section-head h3,.appointment-create-client h3 { margin:0;font-size:13px;font-weight:800; }
.appointment-picker-trigger { width:100%;min-height:48px;border:1px solid #ddd4ea;border-radius:14px;background:#fff;color:var(--ink);padding:11px 13px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font-size:13px;font-weight:800; }
.appointment-picker-trigger svg { width:17px;height:17px;flex:none;stroke:var(--violet);fill:none;stroke-width:2; }
.appointment-client-selected { display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #dac9f6;background:#f7f2ff;border-radius:14px;padding:10px 11px;min-width:0; }
.appointment-client-selected span { min-width:0; }
.appointment-client-selected strong,.appointment-client-selected small { display:block;overflow-wrap:anywhere; }
.appointment-client-selected strong { font-size:13px; }
.appointment-client-selected small { font-size:11px;color:#746a84;margin-top:2px; }
.appointment-client-selected button { width:32px;height:32px;flex:none;border:0;border-radius:10px;background:#eae0fa;color:var(--violet-deep);font-size:20px;line-height:1; }
.appointment-add-client { justify-self:start;border:0;background:transparent;color:var(--violet);padding:8px 0;font-size:12px;font-weight:800; }
.appointment-guest-fields { border:1px solid var(--line);border-radius:13px;background:#fbfaff; }
.appointment-guest-fields summary { cursor:pointer;padding:12px 13px;color:#6f6680;font-size:12px;font-weight:700; }
.appointment-guest-inner { display:grid;gap:11px;padding:0 12px 12px; }
.appointment-create-client { display:grid;gap:12px;padding:14px;border:1px solid #ddd0f1;border-radius:17px;background:#fbf9ff; }
.appointment-create-client p { margin:-6px 0 0;color:#766c85;font-size:11px;line-height:1.4; }
.appointment-create-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px; }
.appointment-main-fields { display:grid;gap:14px; }
.appointment-services { min-width:0;margin:0;padding:0;border:0; }
.appointment-services legend { margin-bottom:7px;padding:0;color:#665e74;font-size:11px;font-weight:800; }
.appointment-service-list { max-height:248px;overflow-y:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:15px;background:#fff; }
.appointment-service-option { display:grid;grid-template-columns:20px minmax(0,1fr);align-items:center;gap:12px;min-height:59px;padding:11px 12px;border-bottom:1px solid var(--line);cursor:pointer; }
.appointment-service-option:last-child { border-bottom:0; }
.appointment-service-check { width:20px!important;height:20px!important;min-width:20px;margin:0;padding:0!important;accent-color:var(--violet);box-shadow:none!important; }
.appointment-service-copy { display:block;min-width:0;overflow-wrap:anywhere; }
.appointment-service-copy strong,.appointment-service-copy small { display:block;line-height:1.4; }
.appointment-service-copy strong { font-size:12px;font-weight:800; }
.appointment-service-copy small { margin-top:2px;font-size:11px;color:#817a8c; }
.appointment-service-summary { min-height:17px;margin:7px 1px 0;color:#746b82;font-size:11px;font-weight:700; }
.appointment-chosen-services { border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;margin-bottom:9px; }
.appointment-chosen-services > div { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:45px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px; }
.appointment-chosen-services > div:last-child { border-bottom:0; }
.appointment-chosen-services strong { min-width:0;overflow-wrap:anywhere; }
.appointment-chosen-services span { flex:none;color:var(--muted);font-size:11px; }
.appointment-end-row { min-height:45px;padding:10px 13px;border:1px solid var(--line);border-radius:13px;background:#fff;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:12px; }
.appointment-end-row span { color:var(--muted); }
.appointment-end-row strong { text-align:right; }
.appointment-service-empty { margin:0;padding:16px;color:var(--muted);font-size:12px; }
.appointment-submit { position:sticky;bottom:-1px;background:#fff;padding:9px 0 2px; }
.appointment-picker-sheet { height:calc(100dvh - env(safe-area-inset-top));max-height:100dvh;display:flex;flex-direction:column;overscroll-behavior:contain; }
.appointment-picker-sheet .sheet-head { flex:none; }
.appointment-picker { display:flex;flex-direction:column;gap:12px;min-height:0;flex:1; }
.appointment-picker > label { color:#665e74;font-size:11px;font-weight:800; }
.appointment-picker-search { display:flex;align-items:center;gap:9px;border:1px solid #ddd4ea;border-radius:14px;padding:0 12px;min-height:48px;color:var(--muted); }
.appointment-picker-search svg { width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2; }
.appointment-picker-search input { width:100%;min-width:0;border:0;outline:0;background:transparent;color:var(--ink);font-size:16px; }
#appointment-client-results-container { min-height:0;flex:1;overflow:auto; }
.appointment-client-results { border:1px solid var(--line);border-radius:15px;overflow:hidden; }
.appointment-client-option { width:100%;min-height:55px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border:0;border-bottom:1px solid var(--line);background:#fff;text-align:left;color:var(--ink); }
.appointment-client-option:last-of-type { border-bottom:0; }
.appointment-client-name { min-width:0;overflow-wrap:anywhere;font-size:12px;font-weight:800; }
.appointment-client-phone { flex:none;color:#847d90;font-size:11px; }
.appointment-client-hint,.appointment-client-empty { padding:12px 13px;color:#81798c;font-size:11px;line-height:1.4; }
.appointment-picker .button { flex:none; }
.appointment-picker-intro { margin:0;color:var(--muted);font-size:12px;line-height:1.45; }
.appointment-service-picker-list { min-height:0;flex:1;overflow:auto;overscroll-behavior:contain;border:1px solid var(--line);border-radius:15px;background:#fff; }
.appointment-service-picker-row { display:grid;grid-template-columns:minmax(0,1fr) 40px;align-items:center;gap:10px;min-height:80px;padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer; }
.appointment-service-picker-row:last-child { border-bottom:0; }
.appointment-service-picker-row input { width:24px;height:24px;justify-self:center;accent-color:var(--violet);cursor:pointer; }
.appointment-form button:focus-visible,.appointment-picker button:focus-visible,.appointment-picker-search:focus-within,.appointment-form input:focus-visible,.appointment-form textarea:focus-visible { outline:2px solid #9b7ad9;outline-offset:2px; }
@media (max-width:360px) { .appointment-form .field-row { grid-template-columns:1fr; } .appointment-client-option { align-items:flex-start;flex-direction:column;gap:3px; } }
.overlay { position:fixed;inset:0;z-index:20;background:#20152d8a;display:flex;align-items:flex-end;justify-content:center; } .sheet { width:min(100%,490px);max-height:90vh;overflow:auto;background:#fff;border-radius:26px 26px 0 0;padding:10px 20px calc(23px + env(safe-area-inset-bottom));box-shadow:0 -15px 40px #21102f26; } .sheet-handle { width:37px;height:5px;background:#ded8e6;border-radius:6px;margin:0 auto 16px; } .sheet-head { display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px; } .sheet h2 { font-size:20px;letter-spacing:-.04em;margin:0; } .sheet-close { border:0;background:#f3f0f7;width:28px;height:28px;border-radius:50%;font-size:19px;color:#827991;display:grid;place-items:center;line-height:1; } .sheet-actions { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:18px; } .sheet-actions.one { grid-template-columns:1fr; } .detail-row { display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12px; } .detail-row span:first-child { color:var(--muted); } .detail-row span:last-child { text-align:right;font-weight:800; }
.metric-large { background:linear-gradient(130deg,#7852c3,#ad83d7);border-radius:22px;padding:21px;color:#fff; } .metric-large .amount { font-size:32px;font-weight:800;letter-spacing:-.06em;margin:3px 0; } .metric-large small { opacity:.8;font-size:11px; } .metric-grid { display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:10px; } .metric-box { background:#fff;border:1px solid var(--line);border-radius:18px;padding:16px; } .metric-box strong { font-size:20px;display:block; } .metric-box span { color:var(--muted);font-size:10px; }
.menu-card { background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;margin:14px 0; } .menu-row { border:0;border-bottom:1px solid var(--line);background:#fff;width:100%;text-align:left;display:flex;align-items:center;gap:13px;padding:14px;color:var(--ink); } .menu-row:last-child { border-bottom:0; } .menu-icon { width:34px;height:34px;border-radius:11px;background:var(--lavender);color:var(--violet);display:grid;place-items:center;font-size:16px;flex:none; } .menu-row .card-main { font-size:12px;font-weight:800; } .menu-row small { color:var(--muted);display:block;font-size:10px;font-weight:500;margin-top:3px; }
.info-banner { border-radius:17px;background:#f0ecf9;color:#675384;padding:14px;font-size:11px;line-height:1.55;margin:12px 0; } .notice { font-size:11px;color:var(--muted);line-height:1.5; } .file-label { border:1px dashed #c7b5e4;border-radius:18px;background:#fbf9ff;padding:22px 16px;text-align:center;display:block;color:var(--violet);font-size:12px;font-weight:800;cursor:pointer; } .file-label input { display:none; } .file-label small { display:block;color:var(--muted);font-weight:500;margin-top:4px; } .preview-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0; } .preview-stat { background:#fff;border:1px solid var(--line);border-radius:14px;text-align:center;padding:12px 4px; } .preview-stat strong { display:block;font-size:17px; } .preview-stat small { font-size:9px;color:var(--muted); } .warning-list { background:#fff7e3;border:1px solid #f4e5b5;border-radius:14px;padding:12px;margin:12px 0; } .warning-list p { font-size:11px;line-height:1.45;margin:4px 0; }
.backup-section { margin:22px 0 12px;padding:2px 0 10px;border-top:1px solid var(--line); }
.backup-section .section-head { margin-top:20px; }
.backup-section .notice { margin:0 0 13px; }
.backup-section .button { display:block;text-align:center;text-decoration:none;margin-top:8px; }
.backup-restore { display:grid;gap:12px; }
.backup-restore > .notice { margin:0; }
.backup-restore > label,.backup-restore h3 { font-size:12px;font-weight:800;margin:0; }
.backup-file-input { width:100%;padding:9px;border:1px solid #ded6ec;border-radius:13px;background:#fff;color:var(--ink);font-size:12px; }
.backup-file-input::file-selector-button { margin-right:10px;padding:8px 10px;border:0;border-radius:9px;background:var(--lavender);color:var(--violet);font:inherit;font-weight:800; }
.backup-summary { border:1px solid var(--line);border-radius:14px;padding:11px 13px;display:grid;gap:7px; }
.backup-summary > strong { font-size:13px;margin-bottom:2px; }
.backup-summary > div { display:flex;justify-content:space-between;gap:10px;font-size:11px; }
.backup-summary > div span { color:#756e80; }
.backup-warning { margin:2px 0;border-radius:13px;padding:12px;background:#fff0f1;color:#9d4353;font-size:11px;line-height:1.5;font-weight:700; }
.calendar-staff-filter { display:grid;gap:6px;margin:0 0 15px; }
.calendar-staff-filter label { font-size:11px;font-weight:800;color:#665e74; }
.calendar-staff-filter select { width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:13px;background:#fff;color:var(--ink);font-size:13px; }
.staff-card { width:100%;display:flex;align-items:center;gap:12px;text-align:left;color:var(--ink); }
.staff-card .card-title,.staff-card .card-sub { display:block; }
.staff-inactive { display:inline-block;margin-top:6px;color:#9d4353;font-size:10px;font-weight:800; }
.staff-form-sheet { max-height:94dvh;overscroll-behavior:contain; }
.staff-form .field input,.staff-form .field select { font-size:16px; }
.staff-active { display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px;border:1px solid var(--line);border-radius:14px;background:#fff; }
.staff-active strong,.staff-active small { display:block; }
.staff-active strong { font-size:12px; }
.staff-active small { margin-top:3px;color:var(--muted);font-size:10px;line-height:1.4; }
.staff-active input { flex:none;width:19px;height:19px;accent-color:var(--violet); }
.staff-fieldset { min-width:0;margin:0;padding:0;border:0; }
.staff-fieldset legend { margin-bottom:8px;color:#665e74;font-size:11px;font-weight:800; }
.staff-hours,.staff-service-list { border:1px solid var(--line);border-radius:14px;background:#fff;overflow:hidden; }
.staff-day { display:flex;align-items:center;justify-content:space-between;gap:7px;min-height:50px;padding:8px 10px;border-bottom:1px solid var(--line); }
.staff-day:last-child,.staff-service:last-child { border-bottom:0; }
.staff-day-label { display:flex;align-items:center;gap:6px;min-width:108px;font-size:11px;font-weight:700; }
.staff-day-label input,.staff-service input { width:17px;height:17px;flex:none;margin:0;accent-color:var(--violet); }
.staff-day-times { display:flex;align-items:center;gap:4px;min-width:0; }
.staff-day-times input { width:82px;min-width:0;padding:7px 4px;border:1px solid var(--line);border-radius:9px;color:var(--ink);background:#fff;font-size:11px; }
.staff-day-times input:disabled { opacity:.45; }
.staff-day-times span { color:var(--muted); }
.staff-help { margin:0 0 8px;color:var(--muted);font-size:10px;line-height:1.4; }
.staff-service-list { max-height:220px;overflow:auto; }
.staff-service { display:flex;align-items:center;gap:10px;min-height:44px;padding:10px 12px;border-bottom:1px solid var(--line);font-size:12px; }
@media (max-width:360px) { .staff-day { flex-wrap:wrap; } .staff-day-times { width:100%;padding-left:23px; } }
.toast { position:fixed;left:50%;transform:translateX(-50%);bottom:calc(93px + env(safe-area-inset-bottom));z-index:40;background:#2b2141;color:#fff;border-radius:12px;padding:11px 15px;box-shadow:0 12px 24px #261c4e38;font-size:11px;font-weight:700;max-width:90vw;text-align:center; }
@media (max-width:699px) { .field input,.field textarea,.field select,.search-box input,.calendar-staff-filter select,.date-input,.backup-file-input,.staff-day-times input { font-size:16px; } }
@media (min-width:700px) { .app-shell { width:490px;min-height:calc(100vh - 48px);margin:24px auto;background:var(--page);border-radius:30px;overflow:hidden;box-shadow:0 24px 80px #2b1a4a20;border:1px solid #e9e3ef; } .topbar { top:0; } .nav { width:490px;left:50%;right:auto;transform:translateX(-50%);bottom:0; } .book-bar { width:490px;left:50%;right:auto;transform:translateX(-50%); } }