@layer base, components, refinement;
@layer base {
  :root{color-scheme:dark;--bg:#111110;--panel:#191918;--ink:#f6f0e4;--muted:#b1ada4;--gold:#dfbd78;--line:#514633;--danger:#edaaa1;--serif:Georgia,'Times New Roman',serif;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:16px;background:#0b0b0a;color:var(--ink)}
  *{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.42}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #f4d99e;outline-offset:4px}button,a{touch-action:manipulation}a{color:var(--gold);text-underline-offset:4px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:500}h2{font-size:29px;line-height:1.15}h3{font-size:23px}button{color:inherit}input,select{min-width:0;border:1px solid #605b50;border-radius:10px;background:#111110;color:var(--ink);padding:12px;min-height:48px;width:100%}input[type=checkbox]{width:23px;min-height:23px;accent-color:var(--gold)}label{font-size:14px;color:var(--muted);display:grid;gap:8px}svg{width:24px;height:24px;flex-shrink:0}small{font-size:12px}::selection{background:#dfbd78;color:#15130e}
}
@layer refinement {
  .masthead,.masthead.compact{height:132px;display:flex;align-items:center;justify-content:flex-end;padding:16px 14px;border-bottom:1px solid #9c7d42;background:#111 url('/barber-header.webp') center/cover no-repeat;text-align:center}
  .masthead:after{inset:6px;border-color:#d7b36544}
  .brand-lockup{position:relative;width:58%;isolation:isolate}
  .brand-lockup:before{content:'';position:absolute;inset:-8px -5px;background:#0c0b09aa;filter:blur(9px);z-index:-1}
  .brand,.compact .brand{font-size:31px;letter-spacing:-.7px;line-height:1;color:#f3d79d;text-shadow:0 2px 5px #000,0 0 12px #000}
  .brand-rule,.compact .brand-rule{display:flex;margin:9px auto 5px;max-width:160px}
  .eyebrow,.compact .eyebrow{font-size:8px;letter-spacing:2.6px;line-height:1.5;margin-top:0;color:#e9cb90}
  .demo-strip{min-height:24px;padding:6px 8px;font-size:9px;letter-spacing:1.3px}
  #app{background:#101110 url('/grain.svg')}
  main{padding-top:20px}
  #app[data-screen=book] main{padding:12px 20px calc(200px + env(safe-area-inset-bottom))}
  #app[data-screen=book] h2{font-size:25px}
  #app[data-screen=book] .section{margin-top:14px}
  #app[data-screen=book] .section:first-child{margin-top:0}
  #app[data-screen=book] .section-heading{margin-bottom:8px;gap:8px;min-height:32px}
  #app[data-screen=book] .service-section>.section-heading{margin-top:-4px}
  #app[data-screen=book] .service{min-height:64px;padding:11px 13px;border-radius:11px}
  #app[data-screen=book] .service-title{font-size:22px;margin-bottom:4px}
  #app[data-screen=book] .demo-note{margin:7px 0 0;font-size:10px;line-height:1.4}
  #app[data-screen=book] .calendar-head{margin-bottom:7px}
  #app[data-screen=book] .calendar-head strong{font-family:var(--serif);font-size:20px;color:#f3e1bd}
  .calendar-label{color:var(--muted)}
  #app[data-screen=book] .date{min-height:61px;padding:8px 3px;gap:4px}
  #app[data-screen=book] .date-jump{margin-top:8px}
  #app[data-screen=book] .date-jump input{min-height:44px}
  #app[data-screen=book] .slots{gap:8px}
  #app[data-screen=book] .slot{min-height:46px}
  .all-times{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;min-height:44px;padding:8px 0;font-size:12px}
  .all-times svg{width:15px;height:15px}
  .time-options{flex-shrink:0;min-height:44px;padding:8px 2px;font-size:12px}
  .booking-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(72px + env(safe-area-inset-bottom));width:min(100%,480px);padding:10px 20px 13px;background:#11110ff7;border-top:1px solid #7e653a;z-index:11;box-shadow:0 -10px 25px #1119}
  .booking-dock .selection-summary{margin:0 0 8px;color:#dfc38f;line-height:1.3;font-size:12px}
  .booking-dock .primary{min-height:52px;border-radius:11px}
  .bottom-nav{padding-top:7px;padding-bottom:calc(8px + env(safe-area-inset-bottom));height:calc(72px + env(safe-area-inset-bottom))}
  .nav-item{font-size:11px;min-height:56px;gap:5px}
  .move-service{border:1px solid #9d814d;border-radius:10px;padding:11px 13px;font-family:var(--serif);font-size:20px}
  .move-service .subtle{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;font-size:12px;margin-top:6px}
  #app[data-screen=book] .back{margin-bottom:8px}
  #app[data-screen=book] .manual-name{margin-top:8px}
  .loading-slots{min-height:46px;padding:12px;font-size:13px}
  textarea{font:inherit;width:100%;resize:vertical;min-height:82px;border:1px solid #756140;border-radius:10px;background:#10100f;color:var(--ink);padding:12px}
  .contact-link{text-decoration:none;font-size:14px;margin-bottom:12px}
  .contact-explanation{margin:15px 0;padding:13px;border:1px solid #806444;border-radius:9px;color:#ebd0a0}
  .contact-booking-context{padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid #655338;color:#e8d2aa;font-size:13px;line-height:1.6}
  .chat-log{display:grid;gap:10px;max-height:230px;overflow:auto;margin:18px 0}
  .history-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
  .chat-message{border:1px solid #514a3e;padding:12px;border-radius:10px;background:#151513}
  .chat-message.mine{border-color:#987b47;background:#2a2419}
  .chat-message p{white-space:pre-wrap;overflow-wrap:anywhere;color:var(--ink);font-size:14px}
  .chat-message small{display:block;margin-top:7px;color:#c5b28c;font-size:11px;line-height:1.5}
  .dialog-footer{display:flex;align-items:center;justify-content:space-between;gap:15px;margin-top:10px}
  .alternate-contact{margin:18px 0;border:1px solid #655338;border-radius:11px;background:#191712;padding:0 14px}
  .alternate-contact summary{min-height:48px;display:list-item;align-content:center;cursor:pointer;color:#e6c88e;font-size:14px;list-style-position:inside}
  .alternate-contact[open]{padding-bottom:16px}
  .alternate-contact[open] summary{margin-bottom:6px}
  .alternate-contact .subtle{font-size:12px;line-height:1.55}
  .alternate-fields{margin-top:16px}
  .contact-values{margin:14px 0 0;font-size:13px;line-height:1.5}
  .contact-values dt{color:var(--muted);margin-top:10px;font-size:11px}
  .contact-values dd{margin:2px 0 0;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
  @media(max-width:359px){.masthead,.masthead.compact{height:112px;padding:12px 10px}.brand,.compact .brand{font-size:26px}.eyebrow,.compact .eyebrow{font-size:7px;letter-spacing:1.7px}.brand-rule,.compact .brand-rule{margin-top:7px}#app[data-screen=book] main{padding:9px 14px 200px}#app[data-screen=book] h2{font-size:23px}#app[data-screen=book] .service-title{font-size:20px}#app[data-screen=book] .section{margin-top:10px}.booking-dock{padding:9px 14px 11px}.demo-strip{letter-spacing:.7px}.date-jump .subtle{font-size:12px}.booking-dock .primary{min-height:50px}}
  @media(min-width:700px){.masthead,.masthead.compact{height:156px}.brand,.compact .brand{font-size:35px}}
  @media(max-width:359px){#app[data-screen=book] main{padding-top:8px}#app[data-screen=book] .section{margin-top:8px}#app[data-screen=book] .section:first-child{margin-top:0}#app[data-screen=book] .service{min-height:60px;padding:9px 11px}#app[data-screen=book] .section-heading{margin-bottom:6px}#app[data-screen=book] .date-jump{margin-top:6px}}
}
@layer components {
  #app{max-width:480px;margin:auto;min-height:100dvh;background:var(--bg) url('/grain.svg');box-shadow:0 0 90px #000}
  .initial{padding:30vh 24px;text-align:center;color:var(--gold);font:30px var(--serif)}.initial span{display:block;font:14px -apple-system,sans-serif;color:var(--muted);margin-top:20px}
  .demo-strip{min-height:30px;background:#2b2418;text-align:center;padding:7px 10px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;color:#e5c995;border-bottom:1px solid #6c5734}
  .masthead{position:relative;text-align:center;padding:18px 20px 16px;border-bottom:1px solid var(--line);background:radial-gradient(ellipse at 50% 30%,#51402a44,transparent 70%)}.masthead:after{content:'';position:absolute;inset:10px;border:1px solid #b2945a23;pointer-events:none}
  .emblem{width:115px;height:65px;display:block;margin:0 auto 4px;filter:drop-shadow(0 3px 7px #000)}.brand{font-family:var(--serif);font-size:34px;line-height:.98;letter-spacing:-1px;color:#ebcd90;text-shadow:0 2px 8px #000}.brand span{display:block}.brand-rule{display:flex;align-items:center;gap:12px;max-width:220px;margin:10px auto 6px;color:var(--gold);font-size:11px}.brand-rule:before,.brand-rule:after{content:'';height:1px;flex:1;background:linear-gradient(90deg,transparent,var(--gold))}.brand-rule:after{transform:rotate(180deg)}.eyebrow{font-size:10px;letter-spacing:5px;text-transform:uppercase;color:#d7bc88}.masthead.compact{display:flex;align-items:center;gap:13px;text-align:left;padding:22px 23px}.compact .emblem{width:65px;height:57px;margin:0}.compact .brand{font-size:25px;letter-spacing:-.4px}.compact .eyebrow{font-size:8px;letter-spacing:3px;margin-top:10px}.compact .brand-rule{display:none}
  main{padding:25px 20px calc(116px + env(safe-area-inset-bottom));min-height:45vh}.page-title{font-size:36px;line-height:1.05;margin-bottom:10px}.intro{font-size:14px;line-height:1.5;color:var(--muted);margin-bottom:25px}.section{margin-top:27px}.section:first-child{margin-top:0}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:15px}.kicker{color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-bottom:10px}.subtle{color:var(--muted);font-size:13px;line-height:1.5}.demo-note{color:#d2bc91;font-size:11px;line-height:1.55;display:flex;gap:7px;align-items:flex-start;margin:12px 0}.demo-note svg{width:15px;height:15px;margin-top:1px}.service-list{display:grid;gap:10px}.service{display:flex;align-items:center;width:100%;gap:14px;text-align:left;background:#191918bc;border:1px solid #4e4c46;border-radius:13px;padding:16px 14px;min-height:86px;box-shadow:inset 0 1px 0 #ffffff06}.service.selected{border-color:var(--gold);background:linear-gradient(115deg,#31291c99,#161615);box-shadow:inset 0 0 0 1px #dbb96f55}.service .service-icon{color:var(--gold);width:31px;height:31px}.service-text{flex:1}.service-title{font-family:var(--serif);font-size:22px;line-height:1.1;display:block;margin-bottom:6px}.service-meta{color:var(--muted);font-size:12px}.service-price{color:#d4c4a5}.check{width:21px;height:21px;border:1px solid #757065;border-radius:50%;display:grid;place-items:center}.selected .check{color:#17130b;border-color:var(--gold);background:var(--gold)}.check svg{width:14px;height:14px}
  .calendar-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.calendar-head strong{font-weight:500;font-size:16px}.icon-button{display:inline-grid;place-items:center;width:44px;min-height:44px;background:transparent;border:0;color:var(--gold);border-radius:8px}.dates{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}.date{border:1px solid #56534b;background:#1b1b19;border-radius:11px;padding:11px 3px;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted)}.date span{font-size:11px;text-transform:uppercase}.date strong{font-size:23px;font-weight:500;color:var(--ink)}.date.selected{color:#3f321b;background:linear-gradient(125deg,#f0d293,#b58c49);border:1px solid #f5d99d;box-shadow:0 2px 15px #d1a45115}.date.selected strong{color:#1d180e}.date-jump{display:flex;align-items:center;gap:10px;margin-top:12px}.date-jump label{width:100%}.date-jump input{padding:8px 10px;min-height:40px;font-size:13px}.date-jump .subtle{white-space:nowrap}
  .slots{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.slot{min-height:47px;border:1px solid #5a564d;border-radius:10px;background:#1b1b19;font-size:16px;font-variant-numeric:tabular-nums}.slot.selected{background:#352a18;border-color:var(--gold);color:#f3d494;box-shadow:inset 0 0 0 1px #b69a60}.link-button{background:none;border:0;color:var(--gold);padding:12px 0;min-height:44px;font-size:13px}.empty{padding:25px 18px;border:1px dashed #6a604d;border-radius:13px;color:var(--muted);font-size:14px;line-height:1.6;text-align:center}
  .primary,.secondary,.danger-button{display:flex;align-items:center;justify-content:center;gap:12px;min-height:55px;width:100%;padding:14px 18px;border-radius:13px;font-size:17px;font-weight:600;text-align:center}.primary{border:1px solid #f4d99e;background:linear-gradient(115deg,#efcf8b 0%,#d6af67 45%,#f1d491 76%,#bb934f 100%);color:#17130c;box-shadow:0 5px 20px #d7ac5412,inset 0 1px 0 #fff5}.primary svg:last-child{margin-left:auto}.primary span{flex:1}.secondary{border:1px solid #ad8f54;background:#111110;color:var(--gold);font-weight:500}.danger-button{border:1px solid #8c6961;background:#211b19;color:var(--danger);font-weight:500}.actions{display:grid;gap:12px;margin-top:24px}.selection-summary{margin-top:10px;text-align:center;font-size:12px;line-height:1.5;color:var(--muted)}.back{display:flex;align-items:center;gap:7px;color:var(--gold);background:none;border:0;padding:0;margin-bottom:20px;min-height:44px;font-size:13px}.back svg{width:16px;height:16px}
  .visit-card{border:1px solid #b49a65;border-radius:15px;background:#191917a8;padding:20px;margin-top:14px;box-shadow:inset 0 1px 0 #f0d18e22}.status{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.2px;color:#e4c98d;margin-bottom:15px}.status svg{width:17px;height:17px}.status.cancelled{color:var(--danger)}.visit-date{font:32px var(--serif);line-height:1.1;margin-bottom:8px}.visit-time{color:var(--muted);font-size:16px;font-variant-numeric:tabular-nums}.divider{height:1px;background:linear-gradient(90deg,#c6a45f,#c6a45f22);margin:19px 0}.detail-row{display:flex;gap:13px;align-items:center}.detail-row svg{color:var(--gold);width:27px;height:27px}.detail-row h3{font-size:22px;line-height:1.2;margin-bottom:5px}.detail-row+.detail-row{margin-top:15px}.card-actions{display:flex;gap:10px;margin-top:18px}.card-actions button{min-height:46px;font-size:14px;padding:10px}.success{text-align:center;padding:6px 0 10px}.success-mark{width:77px;height:77px;border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin:5px auto 21px;box-shadow:0 0 30px #dfbd7812}.success-mark svg{width:42px;height:42px;color:var(--gold)}.success h1{font:40px/1.05 var(--serif);color:#efdaa9}.success p{margin-top:13px}.history-row{padding:18px 0;border-bottom:1px solid #49453c;display:flex;align-items:center;gap:12px}.history-row svg{color:#b49a65}.history-row h3{font-size:20px;margin-bottom:5px}.history-row .subtle{font-size:12px}.consent{display:flex;align-items:flex-start;gap:12px;padding:17px 0;color:var(--ink);font-size:14px}.consent input{flex-shrink:0;margin:0}.consent small{display:block;color:var(--muted);font-size:12px;line-height:1.45;margin-top:5px}.panel{padding:20px;border:1px solid #514a3d;border-radius:13px;background:#1b1a1780}.panel+.panel{margin-top:16px}.field{margin-bottom:17px}.field:last-child{margin-bottom:0}.fields-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.form-stack{display:grid;gap:18px}.form-error{background:#402b25;color:#ffd6c9;border:1px solid #986d60;padding:14px;border-radius:10px;font-size:14px;line-height:1.4;margin:15px 0}.hidden{display:none!important}
  .bottom-nav{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:min(100%,480px);display:flex;align-items:stretch;justify-content:space-around;gap:6px;padding:10px 14px calc(11px + env(safe-area-inset-bottom));border-top:1px solid #806a40;background:#10100fee;backdrop-filter:blur(16px);z-index:10}.nav-item{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;min-height:56px;padding:5px 0 10px;border:0;background:transparent;color:#a8a69f;font-size:11px}.nav-item svg{width:23px;height:23px}.nav-item.active{color:#e8c880}.nav-item.active:after{content:'';position:absolute;bottom:0;width:42px;height:2px;background:var(--gold);border-radius:2px}.profile-name{font:32px var(--serif);margin:10px 0}.profile-avatar{border:1px solid var(--gold);width:60px;height:60px;display:grid;place-items:center;border-radius:50%;color:var(--gold);font:30px var(--serif)}.version{margin-top:30px;text-align:center;color:#8f897d;font-size:11px;line-height:1.6}
  .segmented{display:flex;background:#24231f;border:1px solid #5a503d;border-radius:10px;padding:4px;gap:5px}.segmented button{flex:1;min-height:39px;border:0;background:transparent;color:var(--muted);border-radius:6px;font-size:14px}.segmented button.selected{background:#d4b478;color:#18140c}.schedule-title{display:flex;justify-content:space-between;align-items:center}.schedule-title .page-title{font-size:34px}.timeline{margin-top:22px}.timeline-row{display:grid;grid-template-columns:56px 1fr;gap:13px;position:relative;margin-bottom:12px}.timeline-time{font-size:12px;line-height:1.7;font-variant-numeric:tabular-nums;color:var(--muted);padding-top:15px}.timeline-time span{display:block}.timeline-card{position:relative;text-align:left;min-height:77px;padding:15px;border:1px solid #6d6047;border-radius:11px;background:#1a1916bb;width:100%}.timeline-card:before{content:'';position:absolute;left:-20px;top:25px;width:7px;height:7px;background:var(--gold);border:2px solid #322a1d;border-radius:50%}.timeline-card h3{font-size:23px;margin-bottom:5px}.timeline-card p{font-size:12px;line-height:1.4;color:var(--muted)}.timeline-card.free{border-style:dashed;background:transparent;color:var(--muted);display:flex;align-items:center;gap:10px}.timeline-card.free svg{width:20px;height:20px;color:var(--gold)}.timeline-card.block{border-color:#48463e}.timeline-day{font:24px var(--serif);padding:8px 0 15px;color:var(--gold)}.service-editor{padding:19px 0;border-top:1px solid #524a3c}.service-editor:first-of-type{border-top:0}.service-editor h3{font-size:23px;margin-bottom:16px}.hours-row{display:grid;grid-template-columns:51px 1fr 1fr;gap:9px;align-items:center;padding:13px 0;border-bottom:1px solid #474237}.hours-row>label{font-size:12px;gap:5px}.hours-row input[type=time]{font-size:14px;padding:8px 5px;min-height:44px}.hours-day{display:grid;justify-items:center;gap:5px;font-size:12px}.block-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 0;border-bottom:1px solid #474237}.block-row p{font-size:13px;line-height:1.6}.account-options{display:grid;gap:12px;margin-top:24px}.login-hero{padding:10px 0}.login-hero h1{font-size:37px;line-height:1.08}.login-hero p{font-size:14px;color:var(--muted);line-height:1.65;margin-top:15px}
  dialog{width:calc(100% - 32px);max-width:410px;max-height:85dvh;border:1px solid var(--gold);border-radius:17px;background:#1b1a17;color:var(--ink);padding:25px;box-shadow:0 20px 100px #000}dialog::backdrop{background:#000b;backdrop-filter:blur(4px)}dialog h2{font-size:30px;margin-bottom:15px}dialog p{font-size:14px;color:var(--muted);line-height:1.6}#toast{position:fixed;bottom:100px;left:50%;transform:translateX(-50%);max-width:calc(100% - 32px);width:max-content;z-index:40;background:#e4c68b;color:#211a10;border-radius:10px;padding:13px 17px;font-size:14px;box-shadow:0 4px 25px #0008;opacity:0;pointer-events:none}#toast.show{opacity:1}
  @media(min-width:700px){body{padding:26px 0;background:radial-gradient(ellipse at top,#352c1e,#090909 65%)}#app{border:1px solid #655135;border-radius:22px;overflow:hidden}.bottom-nav{border-radius:0;bottom:0}.masthead{padding-top:30px}main{padding-left:25px;padding-right:25px}}
  @media(max-width:359px){main{padding-left:14px;padding-right:14px}.brand{font-size:31px}.service-title{font-size:20px}.service{gap:10px;padding:14px 10px}.dates{gap:6px}.page-title{font-size:32px}.hours-row{grid-template-columns:42px 1fr 1fr}}
  @media(prefers-reduced-motion:no-preference){.primary,.secondary,.slot,.service{transition:background .15s,border-color .15s,opacity .15s}#toast{transition:opacity .2s}main{animation:arrive .2s ease-out}@keyframes arrive{from{opacity:.5;transform:translateY(4px)}to{opacity:1;transform:none}}}
}