.page.admin{display:none}.page.admin.active{display:grid;grid-template-columns:220px minmax(0,1fr)}.workspace{min-width:0}header{gap:20px}header .mode{margin-right:auto}header .theme{margin-left:auto}.admin nav{grid-template-columns:1fr}.admin aside{min-width:0}.brand-avatar{width:28px;height:28px;object-fit:cover;border-radius:9px;margin-right:6px;vertical-align:middle}.hero-image{position:absolute;inset:0 0 0 auto;width:42%;height:100%;object-fit:cover;border-radius:90px 0 0 90px}.patient-top:has(.hero-image) h1,.patient-top:has(.hero-image)>p,.patient-top:has(.hero-image)>span{position:relative;z-index:1;max-width:52%}.branding-form{display:grid;grid-template-columns:1fr 1fr;gap:20px}.branding-form label{display:grid;gap:8px;font-size:14px;font-weight:600}.branding-form input,.branding-form textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);font:inherit}.branding-form textarea{min-height:110px;resize:vertical}.branding-form input[type=color]{height:48px;padding:5px}.branding-form .wide{grid-column:1/-1}.branding-form small{letter-spacing:0;color:var(--muted);font-size:12px;line-height:1.5}.brand-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.image-setting{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.image-setting button{border:1px solid var(--line);padding:8px 12px;border-radius:8px}.brand-status{min-height:24px;color:var(--muted);font-size:13px}.booking-table{display:grid;gap:0}.booking-record{display:grid;grid-template-columns:65px minmax(0,1fr) minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--line)}.booking-record>div{display:grid;gap:6px}.booking-record span{color:var(--muted);font-size:13px}.bookings-date{color:var(--muted)}[hidden]{display:none!important}.service.selected{border-color:var(--coral)}.cta:disabled{opacity:.45;cursor:not-allowed}.branding-form .cta{grid-column:auto}.workspace-head small{display:none}body.dark{--bg:#10252d;--ink:#f4f8f7;--muted:#bed0d1;--card:#19353e;--line:#42616a;--aqua:#2b6871;--mint:#244e54;--navy:#102c36}body.dark .mode{background:#23434b}body.dark .mode .active,body.dark .service,body.dark .date-row button,body.dark .time-grid button,body.dark .outline,body.dark .kpis article,body.dark .card,body.dark .setting{background:var(--card);color:var(--ink)}body.dark .service.selected{background:#3d312e}body.dark .date-row .selected,body.dark .time-grid .selected{background:var(--coral);color:var(--accent-text,#fff)}body.dark .admin{background:#15343c}body.dark .accent{background:#295b61}body.dark .search{background:#19353e;color:#fff}.cta,.logo i{color:var(--accent-text,#fff)}@media(max-width:720px){.page.admin.active{grid-template-columns:1fr}.admin nav{grid-template-columns:repeat(2,minmax(0,1fr))}.branding-form{grid-template-columns:1fr}.branding-form .wide{grid-column:auto}.booking-record{grid-template-columns:55px 1fr}.booking-record>div:last-child{grid-column:2}.hero-image{opacity:.25;width:100%;border-radius:0}.patient-top:has(.hero-image) h1,.patient-top:has(.hero-image)>p,.patient-top:has(.hero-image)>span{max-width:100%}header{flex-wrap:wrap;height:auto;gap:12px;padding:5px 0}header .mode{order:3;width:100%;justify-content:center}}
/* Match the service-card outline without shifting the hero layout. */
body.dark .patient-top{box-shadow:inset 0 0 0 1px var(--line)}
body.dark .patient-top::after{content:"";position:absolute;inset:0;border:1px solid var(--line);border-radius:inherit;pointer-events:none;z-index:2}
body.dark .service.selected{background:#244c5c;border-color:var(--coral)}

/* Cabinet surfaces share the patient's card outline in both themes. */
.admin{border:1px solid var(--line)}
.admin .kpis article,.admin .card,.admin .setting{border:1px solid var(--line);min-width:0}
.admin .card h2{margin-top:0;overflow-wrap:anywhere}
.admin .card>.text-button{margin-bottom:18px;min-height:40px}
.admin .card-title{gap:12px;margin-bottom:12px}
.admin .card-title button{flex-shrink:0;min-height:40px}
.admin .appointment{gap:12px}
.admin .appointment>span{min-width:0;line-height:1.5}
.admin .appointment strong,.booking-record strong{overflow-wrap:anywhere}
.admin .nav-icon{display:none}
.admin .nav-label{pointer-events:none}
.admin button:focus-visible,.admin input:focus-visible,.admin textarea:focus-visible{outline:2px solid var(--coral);outline-offset:3px}
.admin .setting .edit{min-height:44px}
.admin .branding-form input[type=file]{min-width:0;font-size:12px}
body.dark .admin{--action-text:color-mix(in srgb,var(--coral) 55%,#fff)}
body.dark .admin .kpis em{color:#a1d8cc}
body.dark .admin .accent{background:#244e54}
body.dark .admin .accent span,body.dark .admin .settings-heading p{color:var(--muted)}
body.dark .admin .card-title button,body.dark .admin .edit,body.dark .admin .patient-row button,body.dark .admin .text-button,body.dark .admin .setting>span{color:var(--action-text)}
body.dark .admin .appointment i{background:#244e54;color:#c3f0e3;border:1px solid #527d78}
body.dark .admin .appointment i.new{background:#3b3945;color:#f5d6c7;border-color:#806b70}
body.dark .admin .calendar span{border:1px solid var(--line)}
body.dark .admin .bar{background:#42666c}

@media(max-width:720px){
  body:has(#admin.active){padding-bottom:calc(88px + env(safe-area-inset-bottom,0px))}
  body:has(#admin.active) #nl-badge-frame{bottom:calc(94px + env(safe-area-inset-bottom,0px))!important}
  .page.admin.active{display:block;margin-top:16px;min-height:0;border-radius:20px;overflow:visible}
  .admin aside{display:contents}
  .admin aside>.logo,.admin aside>.demo-pill,.admin aside>.side-info{display:none}
  .admin aside nav{position:fixed;z-index:30;bottom:0;left:0;right:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px 10px calc(8px + env(safe-area-inset-bottom,0px));background:var(--card);border-top:1px solid var(--line);box-shadow:0 -5px 24px #10252d12}
  .admin .nav-item{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;min-height:60px;padding:7px 2px;border:1px solid transparent;border-radius:12px;font-size:11px;line-height:1.2;font-weight:600;text-align:center;color:var(--muted);background:transparent}
  .admin .nav-icon{display:block;width:21px;height:21px;flex-shrink:0;pointer-events:none}
  .admin .nav-item.active{color:var(--ink);background:var(--mint);border-color:var(--coral)}
  .admin .nav-item:hover{background:var(--mint);color:var(--ink)}
  .admin .workspace{padding:20px 14px}
  .admin .workspace-head{align-items:center;gap:10px;margin-bottom:20px}
  .admin .workspace-head>div{min-width:0}
  .admin .workspace h1{font-size:clamp(23px,6.6vw,29px);line-height:1.12;margin:0;overflow-wrap:anywhere}
  .admin #tour{flex:0 0 84px;padding:9px 7px;min-height:44px;font-size:11px;line-height:1.4}
  .admin .kpis{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:0 0 16px}
  .admin .kpis article{padding:12px 9px;border-radius:12px;display:flex;flex-direction:column;align-items:flex-start}
  .admin .kpis small{font-size:10px;letter-spacing:0;line-height:1.4;min-height:28px}
  .admin .kpis b{font-size:30px;line-height:1.15;margin:10px 0 8px}
  .admin .kpis em{font-size:10px;line-height:1.45;margin-top:auto}
  .admin .split,.admin .setting-grid{grid-template-columns:minmax(0,1fr);gap:14px}
  .admin .card,.admin .setting{padding:16px;border-radius:14px}
  .admin .card-title h3{font-size:21px;line-height:1.15}
  .admin .card-title button{font-size:12px;padding:0}
  .admin .appointment{display:grid;grid-template-columns:45px minmax(0,1fr);gap:6px 10px;padding:13px 0}
  .admin .appointment>b{font-size:13px;align-self:start;line-height:1.6}
  .admin .appointment span strong{font-size:13px}
  .admin .appointment i{grid-column:2;justify-self:start;font-size:10px;padding:4px 8px}
  .admin .accent h3{font-size:25px;margin:14px 0 20px}
  .admin .accent small{font-size:10px}
  .admin .full{margin-top:0}
  .admin .card h2{font-size:22px;line-height:1.2}
  .admin .calendar{grid-template-columns:repeat(5,minmax(125px,1fr));overflow-x:auto;max-width:100%;padding-bottom:12px;overscroll-behavior-inline:contain}
  .admin .calendar span{padding:12px}
  .admin .patient-row{grid-template-columns:minmax(0,1fr) auto;align-items:center;padding:14px 0;gap:12px}
  .admin .patient-row>b{font-size:14px;overflow-wrap:anywhere}
  .admin .patient-row button{min-height:44px;padding:8px 0;font-size:13px}
  .admin .settings-heading{margin-top:0}
  .admin .settings-heading h2{font-size:26px;line-height:1.15}
  .admin .settings-heading small{font-size:10px;line-height:1.5;letter-spacing:.6px}
  .admin .settings-heading>.outline{width:100%;min-height:44px;line-height:1.4}
  .admin .setting-grid{margin-top:18px}
  .admin .setting{min-height:180px}
  .admin .branding-form{gap:18px}
  .admin .branding-form label{min-width:0}
  .admin .brand-actions{flex-direction:column;margin-top:4px}
  .admin .brand-actions button{width:100%;min-height:44px;margin:0;white-space:normal}
  .admin .booking-record{grid-template-columns:45px minmax(0,1fr);gap:8px 10px;padding:16px 0}
  .admin .booking-record strong{font-size:14px;line-height:1.4}
  .admin .booking-record span{font-size:12px;line-height:1.5}
  .toast{max-width:calc(100% - 24px);width:max-content;bottom:calc(92px + env(safe-area-inset-bottom,0px));border-radius:14px;text-align:center;font-size:13px}
}

/* Compact phone hero: independent text/visual columns keep services in view. */
@media(max-width:720px){
  .patient-top{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:10px 14px;align-items:center;min-height:0;padding:20px 18px;border-radius:22px}
  .patient-top>p,.patient-top>span,.patient-top h1{position:relative;max-width:100%;min-width:0;overflow-wrap:anywhere}
  .patient-top>p{grid-column:1/-1;margin:0;font-size:9px;line-height:1.45;letter-spacing:.9px}
  .patient-top h1{grid-column:1;grid-row:2;font-size:clamp(22px,6.5vw,28px);line-height:1.07;letter-spacing:-.8px;margin:0}
  .patient-top>span{grid-column:1/-1;grid-row:3;width:100%;font-size:13px;line-height:1.45}
  .patient-top .smile{grid-column:2;grid-row:2;position:relative;inset:auto;align-self:center;justify-self:end;width:64px;height:64px;margin:0 4px 8px 0;font-size:64px;line-height:39px;transform:rotate(-7deg);box-shadow:-10px 10px 0 #285c65}
  .patient-top .hero-image{grid-column:2;grid-row:2;position:relative;inset:auto;display:block;width:72px;height:88px;margin:0;border-radius:12px;opacity:1;object-fit:cover;border:1px solid var(--line)}
  .patient-top:has(.hero-image) h1,.patient-top:has(.hero-image)>p,.patient-top:has(.hero-image)>span{max-width:100%}
}