:root,[data-theme="default"]{ --bg:#f4f7fb; --bg-soft:#eef3f9; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --line:#d9e2ec; --line-strong:#c3d0de; --text:#142235; --text-soft:#526377; --text-faint:#7b8ca1; --brand:#2453d4; --brand-strong:#173ea6; --brand-soft:#e8efff; --accent:#0f766e; --accent-soft:#e6f6f4; --success:#0f9f6e; --success-soft:#e7f7ef; --warning:#a86f17; --warning-soft:#fff4df; --danger:#c24141; --danger-soft:#fdecec; --pending:#7c3aed; --pending-soft:#f1eafe; --disabled:#94a3b8; --disabled-soft:#e2e8f0; --shadow-sm:0 1px 2px rgba(15,23,42,.05); --shadow-md:0 10px 24px rgba(15,23,42,.07); --shadow-lg:0 18px 40px rgba(15,23,42,.10); --radius-sm:10px; --radius-md:16px; --radius-lg:22px; --sidebar:280px; --bg-accent-1:rgba(36,83,212,.12); --bg-accent-2:rgba(15,118,110,.10); --bg-accent-3:rgba(124,58,237,.08); --bg-pointer-x:50%; --bg-pointer-y:28%; }
[data-theme="dark"]{ --bg:#0b1220; --bg-soft:#111a2b; --surface:#162131; --surface-2:#1b293b; --surface-3:#223248; --line:#2c4058; --line-strong:#3a5371; --text:#edf3fb; --text-soft:#b5c3d6; --text-faint:#8ea0b7; --brand:#6f98ff; --brand-strong:#5d86ef; --brand-soft:#21365f; --accent:#3db9aa; --accent-soft:#143d3a; --success:#3ecf8e; --success-soft:#143b2a; --warning:#e8b24c; --warning-soft:#4a3913; --danger:#f07777; --danger-soft:#4a2020; --pending:#b28cff; --pending-soft:#342356; --disabled:#71849b; --disabled-soft:#233246; --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow-md:0 12px 28px rgba(0,0,0,.34); --shadow-lg:0 20px 42px rgba(0,0,0,.40); --bg-accent-1:rgba(111,152,255,.16); --bg-accent-2:rgba(61,185,170,.12); --bg-accent-3:rgba(178,140,255,.10); }
[data-theme="premium"]{ --bg:#f6efe3; --bg-soft:#efe3cf; --surface:#fffaf2; --surface-2:#f7efdf; --surface-3:#f1e4cf; --line:#dcc4a0; --line-strong:#cfb086; --text:#2f2419; --text-soft:#705a43; --text-faint:#9a8267; --brand:#a06a2c; --brand-strong:#84531b; --brand-soft:#f3e0be; --accent:#647d63; --accent-soft:#e4ede1; --success:#557f5c; --success-soft:#e4ede6; --warning:#b6842d; --warning-soft:#f9edcf; --danger:#b55b49; --danger-soft:#f5e1db; --pending:#8b62aa; --pending-soft:#efe6f7; --disabled:#a3917b; --disabled-soft:#ebdfd1; --shadow-sm:0 1px 2px rgba(44,33,24,.06); --shadow-md:0 12px 26px rgba(44,33,24,.10); --shadow-lg:0 22px 42px rgba(44,33,24,.12); --bg-accent-1:rgba(160,106,44,.14); --bg-accent-2:rgba(100,125,99,.11); --bg-accent-3:rgba(139,98,170,.10); } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family:Inter,Segoe UI,Arial,sans-serif; color:var(--text); background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 100%); } .interactive-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden;opacity:0;transition:opacity .25s ease} [data-decorative-background="on"] .interactive-bg{opacity:1} .interactive-bg__orb{position:absolute;border-radius:999px;filter:blur(28px);transform:translate3d(0,0,0);opacity:.65;transition:transform .18s ease-out,opacity .24s ease-out} .interactive-bg__orb--one{width:34vw;height:34vw;min-width:260px;min-height:260px;left:calc(var(--bg-pointer-x) - 16vw);top:calc(var(--bg-pointer-y) - 18vw);background:radial-gradient(circle,var(--bg-accent-1) 0%,transparent 72%)} .interactive-bg__orb--two{width:28vw;height:28vw;min-width:220px;min-height:220px;right:-8vw;top:10vh;background:radial-gradient(circle,var(--bg-accent-2) 0%,transparent 74%);transform:translate3d(calc((50% - var(--bg-pointer-x)) * .08),calc((40% - var(--bg-pointer-y)) * .08),0)} .interactive-bg__orb--three{width:24vw;height:24vw;min-width:180px;min-height:180px;left:8vw;bottom:6vh;background:radial-gradient(circle,var(--bg-accent-3) 0%,transparent 74%);transform:translate3d(calc((var(--bg-pointer-x) - 50%) * .05),calc((var(--bg-pointer-y) - 50%) * .05),0)} .hidden{display:none!important} .login,.shell{min-height:100vh} .login{display:grid;place-items:center;padding:32px} .login-panel{width:min(520px,100%);display:grid;grid-template-columns:1fr;gap:24px;align-items:stretch} .surface{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-md);border-radius:var(--radius-lg)} .login-brand{padding:34px;background:linear-gradient(180deg,#f9fbff,#f3f7fd)} .login-brand h1{font-size:34px;line-height:1.05;margin:14px 0 10px} .login-brand p{margin:0;color:var(--text-soft);line-height:1.6} .login-points{display:grid;gap:14px;margin-top:28px} .login-point{padding:14px 16px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.8)} .login-point b{display:block;margin-bottom:4px} .login-form{padding:34px;display:flex;flex-direction:column;justify-content:center} .kicker{display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:999px;background:var(--brand-soft);color:var(--brand);font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase} h1,h2,h3,h4{margin:0;color:var(--text)} h2{font-size:28px;line-height:1.12;margin-top:14px} p{margin:0;color:var(--text-soft);line-height:1.55} .small{font-size:13px;color:var(--text-faint)} .field{display:flex;flex-direction:column;gap:8px;margin-top:16px} .field label{font-size:13px;font-weight:600;color:var(--text-soft)} .field input,.field select,.field textarea{ width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text); border-radius:14px;padding:13px 14px;font:inherit;transition:.18s ease; } .field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:#8ba8ff;box-shadow:0 0 0 4px rgba(30,78,216,.10)} .toolbar{display:flex;gap:10px;flex-wrap:wrap;align-items:center} .btn{ border:none;border-radius:12px;padding:11px 15px;font-weight:700;cursor:pointer; transition:.18s ease;font:inherit;display:inline-flex;align-items:center;justify-content:center;gap:8px; } .btn:hover{transform:translateY(-1px)} .btn:focus-visible,.nav button:focus-visible,.theme-toggle input:focus-visible,.theme-picker select:focus-visible,.searchbar input:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:none;box-shadow:0 0 0 4px rgba(30,78,216,.14)} .btn.primary{background:var(--brand);color:#fff;box-shadow:0 8px 20px rgba(36,83,212,.18)} .btn.primary:hover{background:var(--brand-strong)} .btn.secondary{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);color:var(--text);border:1px solid var(--line-strong);box-shadow:var(--shadow-sm)} .btn.ghost{background:transparent;color:var(--text-soft);border:1px solid var(--line)} .btn.logout{background:linear-gradient(180deg,var(--danger-soft) 0%,color-mix(in srgb,var(--danger-soft) 74%, var(--surface) 26%) 100%);color:var(--danger);border:1px solid color-mix(in srgb,var(--danger) 26%, var(--line-strong) 74%);box-shadow:var(--shadow-sm)} .btn.logout:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--danger-soft) 92%, var(--surface) 8%) 0%,color-mix(in srgb,var(--danger-soft) 68%, var(--surface) 32%) 100%)} .btn.danger{background:var(--danger);color:#fff} .btn:disabled,.btn[disabled]{cursor:not-allowed;opacity:.55;transform:none;box-shadow:none;background:var(--disabled-soft);color:var(--text-faint);border-color:var(--line)} .shell{display:grid;grid-template-columns:var(--sidebar) 1fr;position:relative;z-index:1} .sidebar{ border-right:1px solid var(--line); background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%, transparent) 0%,color-mix(in srgb,var(--surface-2) 94%, transparent) 100%); backdrop-filter:blur(10px); padding:24px 18px; display:flex; flex-direction:column; gap:18px; } .brand{display:flex;flex-direction:column;gap:4px;padding:4px 8px} .brand b{font-size:22px;letter-spacing:-.02em} .brand span{font-size:13px;color:var(--text-faint)} .profile-card{padding:16px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2)} .avatar{width:42px;height:42px;border-radius:14px;background:var(--brand-soft);display:grid;place-items:center;color:var(--brand);font-weight:800} .profile-row{display:flex;gap:12px;align-items:center} .badge{display:inline-flex;align-items:center;gap:6px;padding:6px 10px;border-radius:999px;font-size:12px;font-weight:700;line-height:1.2;border:1px solid transparent} .badge.info{background:var(--brand-soft);color:var(--brand);border-color:var(--line-strong)} .badge.success{background:var(--success-soft);color:var(--success);border-color:var(--line-strong)} .badge.warning{background:var(--warning-soft);color:var(--warning);border-color:var(--line-strong)} .badge.danger{background:var(--danger-soft);color:var(--danger);border-color:var(--line-strong)} .badge.pending{background:var(--pending-soft);color:var(--pending);border-color:var(--line-strong)} .badge.neutral{background:var(--disabled-soft);color:var(--text-soft);border-color:var(--line-strong)} .nav-section{display:flex;flex-direction:column;gap:8px} .nav-title{padding:0 10px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--text-faint);text-transform:uppercase} .nav{display:flex;flex-direction:column;gap:6px} .nav button{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;padding:12px 14px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--text-soft);cursor:pointer;font:inherit;font-weight:600;text-align:left} .nav button .left{display:flex;gap:10px;align-items:center} .nav button .icon{width:18px;text-align:center;color:var(--text-faint)} .nav button:hover{background:var(--surface-2);border-color:var(--line)} .nav button.active{background:var(--surface);border-color:var(--line-strong);color:var(--text);box-shadow:var(--shadow-sm)} .sidebar-actions{margin-top:auto;display:grid;gap:10px} .sidebar-signout-note{margin:0;padding:0 4px;font-size:12px;line-height:1.45;color:var(--text-faint)} .main{display:flex;flex-direction:column;min-width:0} .topbar{padding:20px 28px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 90%, transparent) 0%,color-mix(in srgb,var(--surface-2) 94%, transparent) 100%);backdrop-filter:blur(10px);display:flex;justify-content:space-between;gap:18px;align-items:flex-start} .topbar-main{display:grid;gap:10px} .mobile-shell-bar{display:none} .mobile-shell-brand{display:grid;gap:2px} .mobile-shell-brand b{font-size:18px;line-height:1} .mobile-shell-brand span{font-size:12px;color:var(--text-faint);text-transform:uppercase;letter-spacing:.06em} .mobile-menu-btn{display:none;min-width:46px;padding:0 14px} .mobile-sidebar-backdrop{display:none} .topbar-side{display:grid;gap:12px;justify-items:end;min-width:min(460px,100%)} .appearance-controls{display:grid;grid-template-columns:auto repeat(2,minmax(160px,1fr));gap:10px;align-items:end;justify-content:flex-end;padding:10px 12px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--surface) 84%, transparent)} .appearance-kicker{align-self:center;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint);padding-right:6px} .topbar-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .crumb{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-faint)} .top-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end} .theme-picker,.theme-toggle{display:inline-grid;gap:6px;justify-items:start;min-width:160px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)} .theme-picker select{width:100%;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:12px;padding:10px 12px;font:inherit;font-size:14px;font-weight:600;text-transform:none;letter-spacing:0;box-shadow:var(--shadow-sm)} .theme-picker select:focus{outline:none;border-color:#8ba8ff;box-shadow:0 0 0 4px rgba(30,78,216,.10)} .theme-toggle input{appearance:none;width:54px;height:32px;border-radius:999px;border:1px solid var(--line-strong);background:var(--surface-2);position:relative;cursor:pointer;box-shadow:var(--shadow-sm)} .theme-toggle input::after{content:'';position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:999px;background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .18s ease,background .18s ease} .theme-toggle input:checked{background:var(--brand-soft);border-color:var(--brand)} .theme-toggle input:checked::after{transform:translateX(22px);background:var(--brand)} .maincontent{padding:24px 28px;display:grid;gap:18px} .mobile-view-jump{display:none} .hero{padding:24px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);box-shadow:var(--shadow-sm);display:flex;justify-content:space-between;gap:20px;align-items:flex-start} .hero-copy{display:grid;gap:10px;min-width:0} .hero h3{font-size:24px;line-height:1.15;margin-bottom:4px} .hero p{max-width:740px} .hero-quicknav{display:flex;gap:8px;flex-wrap:wrap} .hero-chip{min-height:40px;padding:8px 12px;border-radius:999px} .hero-status{max-width:280px;align-self:stretch} .grid{display:grid;gap:16px} .grid.cols-4{grid-template-columns:repeat(4,1fr)} .grid.cols-3{grid-template-columns:repeat(3,1fr)} .grid.cols-2{grid-template-columns:repeat(2,1fr)} .split{display:grid;grid-template-columns:1.15fr .85fr;gap:16px} .section-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:var(--shadow-sm)} .section-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start;margin-bottom:16px} .section-head h3{font-size:18px;margin-bottom:4px} .section-head p{font-size:14px;line-height:1.5;color:var(--text-soft)} .stat{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:18px;box-shadow:var(--shadow-sm)} .stat .label{font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--text-faint)} .stat .value{font-size:30px;font-weight:800;letter-spacing:-.03em;margin-top:10px} .stat .meta{margin-top:8px;font-size:13px;color:var(--text-soft)} .attention-list,.list{display:grid;gap:12px} .attention-item,.item{padding:16px;border-radius:16px;border:1px solid var(--line);background:var(--surface-2)} .integration-card .attention-list{gap:10px} .integration-card .attention-item{background:var(--surface);border-color:var(--line-strong)} .attention-item{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:flex-start} .attention-dot{width:10px;height:10px;border-radius:999px;background:var(--warning);margin-top:6px} .empty{padding:22px;border:1px dashed var(--line-strong);border-radius:16px;background:linear-gradient(180deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 72%, var(--surface) 28%) 100%);color:var(--text-soft)} .kpi-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:12px} .timeline{display:grid;gap:14px} .time-group{display:grid;grid-template-columns:104px 1fr;gap:16px;align-items:start} .time-label{font-size:13px;font-weight:800;color:var(--text-faint);padding-top:10px;display:flex;flex-direction:column;gap:6px} .time-label::after{content:'';width:32px;height:1px;background:var(--line-strong)} .appt-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px 16px;display:grid;gap:10px;box-shadow:var(--shadow-sm)} .appt-rail{display:grid;gap:12px;position:relative} .appt-rail::before{content:'';position:absolute;left:-22px;top:4px;bottom:4px;width:2px;background:linear-gradient(180deg,var(--line),transparent)} .timeline-focus{display:grid;grid-template-columns:1.2fr .8fr;gap:16px} .agenda-summary{display:grid;gap:12px} .week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px} .week-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:14px;display:grid;gap:8px;min-height:138px} .week-card.active{border-color:var(--line-strong);background:linear-gradient(180deg,var(--surface),var(--surface-2))} .week-day{font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint)} .week-num{font-size:24px;font-weight:800;letter-spacing:-.03em} .week-meta{font-size:13px;color:var(--text-soft)} .form-error{font-size:12px;color:var(--danger);font-weight:700} .field.invalid input,.field.invalid select{border-color:#e7aaaa;box-shadow:0 0 0 4px rgba(194,65,65,.10)} .now-strip{padding:10px 12px;border-radius:14px;background:var(--accent-soft);border:1px solid var(--line-strong);color:var(--accent);font-size:13px;font-weight:700} .appt-top{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .appt-title{font-weight:800} .appt-meta,.muted-row{display:flex;gap:10px;flex-wrap:wrap;color:var(--text-soft);font-size:13px} .appt-meta-primary{font-weight:600} .appt-meta-sep{color:var(--text-faint)} .appt-meta-secondary b{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--text-faint);margin-right:4px} .pill{display:inline-flex;align-items:center;padding:5px 9px;border-radius:999px;font-size:12px;font-weight:700;border:1px solid transparent} .pill.pending{background:var(--warning-soft);color:var(--warning);border-color:var(--line-strong)} .pill.confirmed{background:var(--success-soft);color:var(--success);border-color:var(--line-strong)} .pill.cancelled{background:var(--danger-soft);color:var(--danger);border-color:var(--line-strong)} .pill.default{background:var(--surface-3);color:var(--text-soft);border-color:var(--line)} .queue{display:grid;gap:12px} .queue-item{border:1px solid var(--line);border-radius:16px;padding:16px;background:var(--surface);display:grid;gap:12px} .queue-head{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .queue-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .queue-actions .btn.ghost,.inline-actions .btn.ghost{color:var(--text-faint);border-color:var(--line)} .client-card .inline-actions{margin-top:2px} .searchbar{display:flex;gap:10px;align-items:center;padding:12px 14px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);box-shadow:var(--shadow-sm);transition:border-color .18s ease,box-shadow .18s ease} .searchbar:focus-within{border-color:#8ba8ff;box-shadow:0 0 0 4px rgba(30,78,216,.10)} .searchbar input{border:none;outline:none;font:inherit;flex:1;background:transparent} .client-card,.service-card,.user-card,.setting-card,.integration-card{border:1px solid var(--line);border-radius:16px;background:var(--surface);padding:16px;display:grid;gap:12px} .service-card--catalog .subtle-list{gap:10px} .service-card--catalog .notice{margin-top:2px} .client-header,.user-header,.integration-header{display:flex;justify-content:space-between;gap:12px;align-items:flex-start} .integration-card{gap:14px} .integration-card h3{font-size:18px;line-height:1.2} .integration-card .keyval{gap:12px} .integration-card .kv{background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%);border:1px solid var(--line);box-shadow:var(--shadow-sm)} .integration-card .subtle-list{gap:10px} .integration-card .subtle-row{background:var(--surface)} .integration-card .notice{border-style:solid;background:linear-gradient(180deg,var(--surface) 0%,var(--surface-2) 100%)} .stack{display:grid;gap:8px} .subtle-list{display:grid;gap:8px} .subtle-row{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(180deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 70%, var(--surface) 30%) 100%);font-size:14px;color:var(--text-soft)} .client-grid,.service-grid,.user-grid,.settings-grid,.integration-grid{display:grid;gap:12px} .client-grid{grid-template-columns:repeat(2,1fr)} .service-grid,.user-grid,.settings-grid,.integration-grid{grid-template-columns:repeat(2,1fr)} .keyval{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .kv{padding:10px 12px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line)} .kv b{display:block;font-size:12px;color:var(--text-faint);margin-bottom:6px} .inline-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .inline-actions .btn.primary{box-shadow:0 10px 22px rgba(36,83,212,.14)} .inline-actions .btn.secondary{border-color:var(--line)} .notice{padding:13px 14px;border-radius:14px;border:1px solid var(--line);background:linear-gradient(180deg,var(--surface-2) 0%,color-mix(in srgb,var(--surface-2) 74%, var(--surface) 26%) 100%);font-size:14px;line-height:1.5;color:var(--text-soft)} .v2-entry-notice{margin:16px 28px 0;border-color:var(--line-strong);background:linear-gradient(180deg,var(--brand-soft) 0%,color-mix(in srgb,var(--brand-soft) 72%, var(--surface) 28%) 100%);color:var(--brand)} .toast-wrap{position:fixed;right:18px;bottom:18px;display:grid;gap:10px;z-index:50} .toast{min-width:260px;max-width:360px;padding:14px 16px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow-lg)} .toast.success{border-color:var(--line-strong)} .toast.error{border-color:var(--line-strong)} .modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.35);display:grid;place-items:center;padding:20px;z-index:60} .modal{width:min(460px,100%);background:var(--surface);border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow-lg);padding:22px} .drawer-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.28);display:flex;justify-content:flex-end;z-index:65} .drawer{width:min(520px,100%);height:100%;background:var(--surface);border-left:1px solid var(--line);box-shadow:var(--shadow-lg);padding:24px;overflow:auto;display:grid;align-content:start;gap:14px} .client-drawer-top h3{line-height:1.1} .client-drawer-top .small{display:block;margin-top:4px} .client-identity-meta{line-height:1.35} .client-summary-list .subtle-row strong{font-size:13px} .client-note{margin-top:0} .modal h3{margin-bottom:8px} .modal p{margin-bottom:18px} .footer-note{font-size:12px;color:var(--text-faint)} @media (max-width:1200px){.grid.cols-4,.kpi-strip,.client-grid,.service-grid,.user-grid,.settings-grid,.integration-grid,.grid.cols-3,.grid.cols-2,.split,.login-panel{grid-template-columns:1fr}.shell{grid-template-columns:1fr}.sidebar{border-right:none;border-bottom:1px solid var(--line)}.topbar,.hero{flex-direction:column}.topbar-side{width:100%;justify-items:start;min-width:0}.appearance-controls{justify-content:flex-start}.time-group{grid-template-columns:1fr}.timeline-focus,.week-grid{grid-template-columns:1fr}.agenda-summary{grid-template-columns:1fr}} @media (max-width:768px){body{font-size:15px}.interactive-bg{display:none}.shell{display:block}.mobile-sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(8,14,26,.56);backdrop-filter:blur(4px);z-index:39}.mobile-sidebar-backdrop.hidden{display:none}.sidebar{position:fixed;top:0;left:0;height:100vh;width:min(86vw,340px);z-index:40;transform:translateX(-102%);transition:transform .22s ease;overflow:auto;padding:18px 16px 24px}.shell.sidebar-open .sidebar{transform:translateX(0)}.main{min-width:0}.topbar{padding:12px 14px;position:sticky;top:0;z-index:20;flex-direction:column;align-items:stretch;gap:10px}.topbar-main{gap:6px}.mobile-shell-bar{display:flex;align-items:center;justify-content:space-between;gap:12px}.mobile-menu-btn{display:inline-flex}.crumb{display:none}.topbar h2{font-size:18px;line-height:1.06}.topbar-meta{flex-direction:row;align-items:center;gap:8px;flex-wrap:wrap}.topbar-meta .small{font-size:11px}.topbar-side{gap:8px;justify-items:stretch;min-width:0}.appearance-controls{width:100%;grid-template-columns:1fr auto auto;align-items:center;padding:8px 10px;gap:8px}.appearance-kicker{display:none}.theme-picker,.theme-toggle{width:auto;min-width:0;gap:4px}.theme-picker span,.theme-toggle span{font-size:10px}.theme-picker select{min-height:40px;padding:8px 10px;font-size:16px}.theme-toggle input{min-height:28px;width:48px;height:28px}.login{padding:14px}.login-brand,.login-form,.section-card,.drawer{padding:16px}.field{gap:6px;margin-top:12px}.field label{font-size:12px;letter-spacing:.02em}.field input,.field select,.field textarea{padding:12px 13px;border-radius:12px}.toolbar{gap:8px}.hero{padding:16px;gap:12px;flex-direction:column}.hero-copy{gap:8px}.hero h3{font-size:20px;line-height:1.08}.hero p{font-size:13px;line-height:1.45}.hero-quicknav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.hero-chip{width:100%;min-height:38px;padding:8px 10px;font-size:13px}.hero-status{max-width:none;width:100%;padding:12px 13px}.mobile-view-jump{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;position:sticky;top:118px;z-index:12}.mobile-view-jump .btn{min-height:40px;padding:8px 10px;background:color-mix(in srgb,var(--surface) 94%, transparent);backdrop-filter:blur(8px)}.btn{min-height:44px;padding:11px 13px}.btn:active{transform:scale(.99)}.queue-actions,.inline-actions,.top-actions,.toolbar{flex-direction:column;align-items:stretch}.keyval{grid-template-columns:1fr}.kv{padding:9px 10px;border-radius:10px}.kv b{font-size:11px;margin-bottom:5px}.searchbar{padding:10px 12px}.searchbar input,.field input,.field select,.field textarea{font-size:16px}.appt-meta,.muted-row{gap:6px}.week-card{min-height:auto}.nav button{padding:14px}.client-header,.user-header,.integration-header,.queue-head,.appt-top{flex-direction:column;align-items:flex-start}.subtle-row{padding:8px 9px;font-size:13px}.notice{font-size:13px}.time-label{padding-top:0}.time-group{gap:8px;grid-template-columns:1fr}.client-card,.queue-item,.appt-card{padding:12px}.drawer{width:100%;border-left:none;gap:10px;padding-bottom:max(18px,env(safe-area-inset-bottom))}.client-drawer-top{position:sticky;top:0;background:color-mix(in srgb,var(--surface) 94%, transparent);backdrop-filter:blur(8px);padding-bottom:8px;z-index:2}.client-drawer-top .btn{min-height:40px}.week-num{font-size:18px}.kpi-strip{gap:8px;grid-template-columns:1fr 1fr}.stat{padding:14px}.stat .value{font-size:24px;margin-top:8px}.attention-item,.item,.queue-item,.appt-card,.week-card,.client-card,.integration-card{border-radius:14px}.queue{gap:10px}.queue-item{gap:8px}.queue-actions{gap:8px}.queue-actions .btn,.inline-actions .btn{width:100%}.queue-actions .btn.primary{order:0}.queue-actions .btn.secondary{order:1}.queue-actions .btn.ghost{order:2}.muted-row{font-size:12px}.appt-meta{font-size:12px}.appt-rail{gap:8px}.appt-rail::before{display:none}.now-strip{font-size:12px;padding:8px 10px}.top-actions{width:100%}.top-actions .btn{width:100%}.maincontent{gap:12px;padding:12px}.timeline{gap:8px}.timeline-focus,.agenda-summary{gap:10px}.week-grid{gap:8px;grid-template-columns:1fr 1fr}.week-card{padding:10px;gap:5px}.week-card .subtle-list{gap:6px}.week-card .subtle-row{padding:7px 8px;font-size:12px}.week-day{font-size:10px}.week-meta{font-size:11px}.time-label{font-size:12px;gap:4px}.time-label::after{display:none}.appt-card{gap:6px}.appt-title{font-size:14px;line-height:1.2}.appt-meta-primary{font-size:12px;line-height:1.3}.appt-meta-secondary{display:grid;gap:4px}.appt-meta-secondary span{display:block}.appt-meta-secondary .appt-meta-sep{display:none}.agenda-summary .section-card{padding:14px}.agenda-summary .item{padding:12px}.searchbar{border-radius:12px}.client-grid{gap:8px;grid-template-columns:1fr}.client-header{gap:6px}.client-card{gap:8px}.client-card .keyval{gap:8px}.client-card .kv{padding:8px 9px}.client-card .notice{padding:10px 11px}.client-card .inline-actions{gap:8px}.client-card .inline-actions .btn{width:100%}.integration-card{gap:12px}.integration-card .keyval{gap:10px}.integration-card .subtle-list{gap:8px}.drawer .section-card{padding:12px}.drawer .section-head{margin-bottom:10px}.drawer .field{margin-top:10px}.drawer .keyval{gap:6px}.drawer .kv{padding:8px 9px}.drawer .inline-actions{gap:8px}.sidebar-signout-note{padding:0}}