:root{
  --bg:#061025;
  --panel:#f8fafc;
  --card:rgba(255,255,255,.94);
  --card-strong:#ffffff;
  --text:#0f172a;
  --muted:#64748b;
  --muted-2:#94a3b8;
  --line:#dbeafe;
  --line-2:#e2e8f0;
  --blue:#2563eb;
  --blue-2:#1d4ed8;
  --cyan:#14b8a6;
  --good:#22c55e;
  --warn:#f59e0b;
  --shadow:0 22px 70px rgba(2,6,23,.26);
  --radius:28px;
  --gap:clamp(12px,1.35vw,20px);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--text);background:var(--bg)}
body{overflow:hidden;-webkit-font-smoothing:antialiased;text-rendering:geometricPrecision}
body:before{content:"";position:fixed;inset:0;background:
  radial-gradient(circle at 11% 7%,rgba(20,184,166,.30),transparent 31%),
  radial-gradient(circle at 90% 8%,rgba(37,99,235,.34),transparent 34%),
  radial-gradient(circle at 50% 102%,rgba(59,130,246,.20),transparent 42%),
  linear-gradient(135deg,#07111f 0%,#0b1324 48%,#10213b 100%);z-index:-3}
body:after{content:"";position:fixed;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.78),rgba(0,0,0,.10));z-index:-2}
button{font:inherit;cursor:pointer}
.screen-shell{height:100dvh;width:100vw;padding:clamp(14px,1.75vw,30px);display:flex;flex-direction:column;gap:var(--gap);overflow:hidden}
.topbar,.info-strip,.toolbar,.featured-card,.side-panel,.timeline-view,.focus-view,.screen-footer,.landing-card,.error-card{background:var(--card);border:1px solid rgba(255,255,255,.75);box-shadow:var(--shadow);backdrop-filter:blur(18px);border-radius:var(--radius)}
.topbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:clamp(14px,1.45vw,24px)}
.studio-head{display:flex;align-items:center;gap:clamp(12px,1.35vw,18px);min-width:0;flex:1}
.brand-mark{width:clamp(54px,4.2vw,70px);height:clamp(54px,4.2vw,70px);flex:0 0 clamp(54px,4.2vw,70px);border-radius:22px;background:linear-gradient(135deg,var(--blue),var(--cyan));color:white;font-weight:900;display:grid;place-items:center;letter-spacing:-.07em;box-shadow:0 16px 42px rgba(37,99,235,.35);font-size:clamp(13px,1vw,16px)}
.studio-title{min-width:0}.eyebrow{text-transform:uppercase;font-size:clamp(10px,.7vw,13px);font-weight:900;letter-spacing:.15em;color:var(--blue)}
h1{margin:4px 0 0;font-size:clamp(34px,4.2vw,76px);line-height:.88;letter-spacing:-.065em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.studio-title p{margin:7px 0 0;color:var(--muted);font-size:clamp(13px,1vw,18px);font-weight:750;max-width:880px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.clock-card{flex:0 0 auto;text-align:right;padding:clamp(10px,1vw,16px) clamp(14px,1.2vw,20px);border-radius:24px;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid #e2e8f0;min-width:clamp(150px,10vw,190px)}
#clockTime{font-size:clamp(36px,4.2vw,68px);font-weight:900;letter-spacing:-.085em;line-height:.9}#clockDate{display:block;margin-top:6px;font-weight:900;color:var(--muted);font-size:clamp(12px,.9vw,16px);white-space:nowrap}
.info-strip{flex:0 0 auto;display:grid;grid-template-columns:minmax(280px,.9fr) 1.6fr;gap:12px;padding:12px}
.message-box{display:flex;align-items:center;gap:12px;padding:10px 14px;border-radius:22px;background:linear-gradient(135deg,#eff6ff,#ecfeff);border:1px solid #bfdbfe;min-width:0;min-height:54px}.message-box strong{font-size:clamp(17px,1.35vw,24px);letter-spacing:-.035em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.live-dot{width:13px;height:13px;border-radius:999px;background:var(--good);box-shadow:0 0 0 8px rgba(34,197,94,.14);animation:pulse 1.8s infinite;flex:0 0 13px}.studio-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;min-width:0}.studio-facts span{display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0;background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:9px 12px;font-size:13px;font-weight:850;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studio-facts b{font-size:10px;text-transform:uppercase;letter-spacing:.14em;color:#64748b}.toolbar{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 12px}.tabbar,.actionbar{display:flex;align-items:center;gap:8px}.tab-btn,.actionbar button{border:0;border-radius:999px;padding:12px 18px;font-size:13px;font-weight:900;color:#1e3a8a;background:#eef2ff;transition:transform .18s ease,background .18s ease,color .18s ease,box-shadow .18s ease}.tab-btn:hover,.actionbar button:hover{transform:translateY(-1px)}.tab-btn.is-active{color:white;background:#0f172a;box-shadow:0 12px 32px rgba(15,23,42,.22)}.actionbar button{background:#f1f5ff;color:#1e3a8a}.content-grid{flex:1 1 auto;min-height:0;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(360px,.92fr);gap:var(--gap)}.featured-card,.side-panel,.timeline-view,.focus-view{min-height:0;overflow:hidden}.featured-card,.side-panel{padding:clamp(18px,1.55vw,28px)}.section-title{font-size:clamp(20px,1.5vw,28px);font-weight:900;letter-spacing:-.05em;color:#1e293b}.panel-header{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px}.panel-header small{display:block;margin-top:4px;color:var(--muted);font-weight:800}.state-pill{display:inline-flex;align-items:center;justify-content:center;min-height:34px;border-radius:999px;background:#dcfce7;color:#166534;padding:7px 13px;font-size:12px;font-weight:900;white-space:nowrap}.featured-card{display:flex;flex-direction:column;gap:12px}.featured-card>.section-title{flex:0 0 auto}.featured-card>#featuredAppointment{flex:1 1 auto;min-height:0}.featured,.focus-feature{height:100%;min-height:0;position:relative;border:1px solid #bfdbfe;border-radius:26px;background:linear-gradient(135deg,#eff6ff,#ecfeff);padding:clamp(24px,2.6vw,52px);overflow:hidden;display:flex;flex-direction:column;justify-content:center}.featured:before,.focus-feature:before{content:"";position:absolute;right:-44px;top:-56px;width:180px;height:180px;border-radius:999px;background:rgba(20,184,166,.18)}.featured-day{position:relative;width:max-content;max-width:100%;padding:10px 16px;border-radius:999px;background:#dbeafe;color:#1e3a8a;font-size:clamp(13px,1vw,17px);font-weight:900;margin-bottom:clamp(12px,1.2vw,20px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.featured-time{position:relative;font-size:clamp(70px,8.6vw,150px);line-height:.82;font-weight:900;letter-spacing:-.1em;color:#0f172a}.featured-service{position:relative;font-size:clamp(32px,3.2vw,66px);line-height:1.02;font-weight:900;letter-spacing:-.07em;max-width:100%;margin-top:clamp(10px,1.2vw,20px);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.featured-meta,.focus-meta{position:relative;display:flex;flex-wrap:wrap;gap:9px;margin-top:clamp(14px,1.4vw,22px)}.pill{display:inline-flex;align-items:center;min-height:34px;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.78);border:1px solid rgba(191,219,254,.9);color:#334155;font-weight:900;font-size:clamp(12px,.8vw,15px)}.progress-wrap{position:relative;height:12px;border-radius:999px;background:rgba(15,23,42,.12);overflow:hidden;margin-top:clamp(14px,1.3vw,22px)}.progress-bar{height:100%;border-radius:999px;background:linear-gradient(90deg,var(--blue),var(--cyan));transition:width .4s ease}.featured-empty,.focus-empty{height:100%;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;border:1px dashed #bfdbfe;border-radius:26px;background:rgba(248,250,252,.72);padding:28px;color:#475569}.featured-empty .empty-icon,.focus-empty .empty-icon{font-size:42px;margin-bottom:10px}.featured-empty h2,.focus-empty h2{margin:0;font-size:clamp(22px,1.8vw,34px);letter-spacing:-.05em}.featured-empty p,.focus-empty p{margin:12px 0 0;font-weight:750;color:#64748b}.side-panel{display:flex;flex-direction:column}.compact-list{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;gap:10px;overflow:auto;padding-right:3px}.appointment-item{display:grid;grid-template-columns:98px 1fr auto;gap:14px;align-items:center;border:1px solid #e2e8f0;border-radius:22px;background:linear-gradient(180deg,#fff,#f8fafc);padding:14px 16px;min-height:74px}.appointment-item.is-current{border-color:#86efac;background:linear-gradient(135deg,#f0fdf4,#ecfeff)}.appointment-item.is-past{opacity:.58}.time-block{font-size:clamp(20px,1.6vw,28px);font-weight:900;letter-spacing:-.06em;color:#0f172a}.time-block small{display:block;margin-top:3px;font-size:11px;letter-spacing:0;color:var(--muted);font-weight:900}.apt-title{font-size:clamp(18px,1.55vw,28px);font-weight:900;letter-spacing:-.055em;line-height:1.05;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.apt-sub{margin-top:5px;color:#64748b;font-size:clamp(13px,.9vw,16px);font-weight:850;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-badge{border-radius:999px;background:#e0f2fe;color:#075985;padding:8px 12px;font-size:12px;font-weight:900;white-space:nowrap}.timeline-view,.focus-view{flex:1 1 auto;min-height:0;padding:clamp(18px,1.55vw,28px)}.timeline-view{overflow:auto}.grouped-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.day-group{min-width:0}.day-title{font-size:clamp(22px,1.8vw,34px);margin:0 0 12px;letter-spacing:-.06em}.focus-view{display:flex}.focus-view.is-hidden{display:none!important}.focus-view>div{width:100%}.focus-feature{align-items:center;text-align:center}.focus-time{font-size:clamp(100px,16vw,260px);line-height:.78;font-weight:900;letter-spacing:-.11em}.focus-service{font-size:clamp(40px,5vw,96px);font-weight:900;line-height:.96;letter-spacing:-.075em;margin-top:22px;max-width:1200px}.screen-footer{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 16px;color:#475569;font-weight:900;font-size:clamp(11px,.78vw,14px)}kbd{display:inline-flex;min-width:20px;min-height:20px;align-items:center;justify-content:center;border-radius:7px;background:#e2e8f0;border:1px solid #cbd5e1;color:#334155;font-size:.85em;padding:0 5px}.is-hidden{display:none!important}.landing-card,.error-card{width:min(920px,calc(100vw - 32px));margin:10vh auto 0;padding:44px}.landing-card h1,.error-card h1{white-space:normal;font-size:clamp(36px,5vw,72px)}.landing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:24px}.landing-grid span{background:#f8fafc;border:1px solid #e2e8f0;border-radius:18px;padding:16px;font-weight:900}.landing-link{display:inline-flex;margin-top:24px;border-radius:999px;background:#2563eb;color:white;text-decoration:none;padding:14px 18px;font-weight:900}@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(34,197,94,.35)}70%{box-shadow:0 0 0 12px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
@media (min-width:1700px){.screen-shell{padding:30px}.topbar{padding:26px}.info-strip{padding:14px}.content-grid{grid-template-columns:1.08fr .92fr}.featured-service{font-size:clamp(42px,3vw,62px)}.featured-time{font-size:clamp(100px,7.3vw,138px)}}
@media (max-width:1300px){.studio-facts{grid-template-columns:repeat(2,minmax(0,1fr))}.content-grid{grid-template-columns:1fr}.side-panel{min-height:360px}.grouped-list{grid-template-columns:1fr}body{overflow:auto}.screen-shell{height:auto;min-height:100dvh;overflow:visible}.content-grid{min-height:0}.featured-card{min-height:520px}.screen-footer{position:static}}
@media (max-width:760px){:root{--radius:22px}.screen-shell{padding:12px;gap:12px}.topbar{align-items:stretch;flex-direction:column}.clock-card{text-align:left;width:100%}.studio-head{align-items:flex-start}.brand-mark{width:54px;height:54px;flex-basis:54px;border-radius:18px}h1{font-size:clamp(34px,11vw,54px)}.studio-title p{white-space:normal}.info-strip{grid-template-columns:1fr}.studio-facts{grid-template-columns:1fr}.toolbar{align-items:stretch;flex-direction:column}.tabbar,.actionbar{display:grid;grid-template-columns:repeat(3,1fr)}.actionbar{grid-template-columns:1fr 1fr}.tab-btn,.actionbar button{padding:10px 8px;font-size:12px}.message-box strong{white-space:normal}.featured,.focus-feature{padding:24px}.featured-time{font-size:clamp(64px,22vw,92px)}.featured-service{font-size:clamp(30px,10vw,44px)}.appointment-item{grid-template-columns:80px 1fr;gap:10px}.status-badge{grid-column:2;width:max-content}.screen-footer{flex-direction:column;text-align:center}.landing-card,.error-card{padding:28px}.landing-grid{grid-template-columns:1fr}}