:root {
	--ink: #192522;
	--muted: #75827c;
	--line: #e6ebe5;
	--canvas: #f6f8f4;
	--paper: #ffffff;
	--green: #174e43;
	--green-soft: #dcebe0;
	--coral: #ef8069;
	--yellow: #f4c95d;
	--blue: #b8d8e6;
	--site-accent-color: #69f0d2;
	--shadow: 0 18px 50px rgba(31, 54, 44, .08);
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); font-family: "DM Sans", sans-serif; }
body { position: relative; isolation: isolate; background: #101513; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(112deg, rgba(10,14,13,.82) 0%, rgba(10,14,13,.72) 50%, rgba(10,14,13,.66) 100%); }
button, input, select { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }
.app { display: none; min-height: 100vh; }
.app.authenticated { display: flex; }
.login-screen { min-height: 100vh; display: none; place-items: center; padding: 28px; background: radial-gradient(circle at 12% 18%, #e2efe3 0, transparent 31%), radial-gradient(circle at 91% 85%, #f9dfd5 0, transparent 28%), var(--canvas); }
.login-screen.active { display: grid; }
.customer-screen { min-height: 100vh; display: block; background: #f5f6f1; }
.customer-screen.hidden { display: none; }
.customer-screen { position: relative; isolation: isolate; overflow: hidden; }
.customer-screen { color: #f4f2e9; background: transparent; }
.ambient-video, .customer-screen::before { position: fixed; inset: 0; width: 100%; height: 100%; }
.ambient-video { z-index: -2; object-fit: cover; object-position: center 43%; filter: saturate(.68) contrast(.94); }
.customer-screen::before { content: none; }
.customer-screen.screen-flip-in, .login-screen.screen-flip-in { animation: screenFlipIn .72s cubic-bezier(.2,.76,.24,1) both; transform-origin: 50% 55%; backface-visibility: hidden; }
@keyframes screenFlipIn { from { opacity: 0; transform: perspective(1200px) rotateY(-9deg) rotateX(2deg) translate3d(22px, 8px, -30px); } to { opacity: 1; transform: perspective(1200px) rotateY(0) rotateX(0) translate3d(0, 0, 0); } }
.login-card { width: min(430px, 100%); background: var(--paper); border: 1px solid var(--line); border-radius: 16px; padding: 37px; box-shadow: 0 24px 70px rgba(31, 54, 44, .11); }
.login-brand { display: flex; align-items: center; gap: 11px; font: 700 20px "Space Grotesk", sans-serif; margin-bottom: 43px; }
.login-heading { margin-bottom: 25px; }
.login-heading .eyebrow { margin-bottom: 9px; }
.login-heading h1 { font-size: 27px; margin-bottom: 8px; }
.login-heading p { color: var(--muted); font-size: 13px; line-height: 1.5; margin: 0; }
.login-form { display: grid; gap: 16px; }
.login-form label { font-size: 12px; }
.login-form input { height: 45px; background: #fff; }
.referral-otp-controls { display: grid; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; background: #f6f8f4; }
.referral-otp-controls label { display: grid; gap: 7px; color: var(--ink); font-size: 12px; }
.referral-otp-controls input { letter-spacing: .12em; font-variant-numeric: tabular-nums; }
.referral-otp-controls .ghost { min-height: 40px; }
.referral-otp-controls .login-message { margin: 0; }
.password-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.password-row a { color: var(--green); font-size: 11px; font-weight: 700; text-decoration: none; }
.login-submit { width: 100%; height: 45px; margin-top: 5px; }
.login-message { min-height: 17px; color: #a34d3e; font-size: 11px; margin: -5px 0 0; }
.login-note { color: var(--muted); font-size: 11px; line-height: 1.5; text-align: center; margin: 25px 0 0; }
.back-to-customer { display: block; margin: 18px auto 0; border: 0; background: transparent; color: var(--green); font-size: 12px; font-weight: 700; }
.auth-panel-hidden { display: none !important; }
.auth-secondary { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 5px; color: var(--muted); font-size: 11px; margin-top: 19px; }
.auth-link { border: 0; padding: 3px; background: transparent; color: var(--green); font-size: 11px; font-weight: 700; }
.auth-link:hover { text-decoration: underline; }
.auth-back { margin-top: 2px; }
.customer-header, .customer-layout, .customer-footer { width: min(1160px, calc(100% - 48px)); margin-inline: auto; }
.customer-header { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,.16); position: relative; z-index: 1; }
.customer-header::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 1px; background: linear-gradient(90deg, transparent, var(--site-accent-color), rgba(241, 209, 123, .75), transparent); background-size: 220% 100%; animation: ledSweep 7s linear infinite; }
.customer-header-actions { display: flex; align-items: center; gap: 10px; }
.header-cta {
	display: inline-flex; align-items: center; justify-content: center; padding: 10px 14px; border-radius: 999px; border: 1px solid rgba(241,209,123,0.58); background: rgba(241,209,123,0.1); color: #f4f2e9; text-decoration: none; font-size: 12px; font-weight: 700; letter-spacing: .02em; box-shadow: 0 0 0 1px rgba(105,240,210,.12), 0 0 18px rgba(105,240,210,.08); transition: transform .24s ease, box-shadow .24s ease, border-color .24s ease, background .24s ease;
}
.header-cta:hover { transform: translateY(-2px); border-color: rgba(105,240,210,.78); background: rgba(105,240,210,.11); box-shadow: 0 0 0 1px rgba(105,240,210,.25), 0 0 26px rgba(105,240,210,.2); }
.customer-login-modal { max-width: 420px; }
.customer-login-form { display: grid; gap: 14px; }
.customer-login-form input {
  height: 45px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.18); background: rgba(255,255,255,0.06); color: #f4f2e9; padding: 0 12px;
}
.customer-login-form input::placeholder { color: rgba(244,242,233,.5); }
.customer-cashback-summary {
  padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(241,209,123,0.3); background: rgba(241,209,123,0.08); color: #f4f2e9; font-size: 12px; line-height: 1.5;
}
.customer-cashback-summary strong { color: #f1d17b; }
.cashback-banner {
	display: grid; gap: 4px; padding: 16px 18px; border: 1px solid rgba(241,209,123,0.42); border-radius: 16px; background: linear-gradient(110deg, rgba(241,209,123,.1), rgba(105,240,210,.045), rgba(241,209,123,.06)); background-size: 180% 100%; animation: ledWash 9s ease-in-out infinite alternate; margin-bottom: 18px; max-width: 460px; box-shadow: 0 0 25px rgba(105,240,210,.07), inset 0 0 22px rgba(241,209,123,.035);
}
.cashback-banner strong { font-size: 1.2rem; color: #f9d66f; }
.cashback-banner small { color: rgba(244,242,233,.72); }
.cta-row {
  display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px;
}
.catalog-cta, .secondary-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 999px; text-decoration: none; font-weight: 700; letter-spacing: .02em; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}
.catalog-cta {
	position: relative; isolation: isolate; overflow: hidden; border: 1px solid color-mix(in srgb, var(--site-accent-color) 70%, transparent); background: linear-gradient(115deg, color-mix(in srgb, var(--site-accent-color) 19%, transparent), rgba(241,209,123,.12) 58%, rgba(255,255,255,.08)); color: #f4f2e9; box-shadow: 0 0 0 1px color-mix(in srgb, var(--site-accent-color) 12%, transparent), 0 0 24px color-mix(in srgb, var(--site-accent-color) 16%, transparent), 0 16px 40px rgba(0,0,0,.18);
}
.catalog-cta::after { content: ""; position: absolute; inset: -30% auto -30% -45%; z-index: -1; width: 35%; transform: skewX(-22deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.3), transparent); animation: ledShine 5s ease-in-out infinite; }
.secondary-cta {
  border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); color: #f4f2e9; backdrop-filter: blur(10px);
}
.catalog-cta:hover, .secondary-cta:hover {
  transform: translateY(-1px); box-shadow: 0 18px 46px rgba(0,0,0,0.18); border-color: rgba(255,255,255,0.32);
}
.catalog-cta span, .secondary-cta span { color: #f1d17b; }
.live-queue {
	display: grid; grid-template-columns: minmax(0,1fr); gap: 12px; margin: 18px 0 18px; padding: 12px; border-radius: 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(105,240,210,.17); box-shadow: inset 0 0 24px rgba(105,240,210,.035), 0 0 22px rgba(105,240,210,.05);
}
.live-queue > div {
  display: grid; gap: 4px; padding: 12px; background: rgba(17,23,21,0.38); border-radius: 10px; border: 1px solid rgba(255,255,255,0.06);
}
.live-queue span { color: rgba(244,242,233,.66); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.live-queue strong { font-size: 0.95rem; line-height: 1.5; color: #f4f2e9; }
.offer-stack { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.offer-pill {
  display: grid; gap: 2px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.09); background: rgba(255,255,255,0.04); color: #f4f2e9;
}
.offer-pill strong { color: #f1d17b; font-size: .8rem; }
.offer-pill.active { border-color: rgba(241,209,123,0.72); background: rgba(241,209,123,0.12); }
.barber-choice-grid, .showcase-barber-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.barber-option {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px; text-align: left; border-radius: 12px; border: 1px solid rgba(255,255,255,0.08); background: rgba(255,255,255,0.04); color: #f4f2e9;
}
.barber-option img { width: 52px; height: 52px; object-fit: cover; border-radius: 10px; }
.barber-option div { display: grid; }
.barber-option strong { font-size: 0.92rem; }
.barber-option span, .barber-option small { color: rgba(244,242,233,.7); font-size: 0.76rem; }
.before-after-card { margin-top: 30px; }
.compare-slider {
  position: relative; overflow: hidden; border-radius: 20px; border: 1px solid rgba(255,255,255,0.1); background: rgba(17,23,21,.42); min-height: 270px; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
}
.compare-slider img { width: 100%; height: 100%; object-fit: cover; display: block; }
.compare-image { position: absolute; inset: 0; }
.compare-after { clip-path: inset(0 0 0 58%); }
.slider-divider {
  position: absolute; left: 58%; top: 0; bottom: 0; width: 2px; background: rgba(255,255,255,0.9); box-shadow: 0 0 0 1px rgba(17,23,21,.6);
}
.compare-slider input {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; z-index: 3;
}
.site-showcase { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px; width: min(1160px, calc(100% - 48px)); margin: 18px auto 54px; position: relative; z-index: 1; }
.showcase-panel {
  padding: 20px; border-radius: 20px; background: rgba(17,23,21,.7); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(14px);
}
.heatmap-box { display: grid; gap: 10px; }
.heat-row { display: grid; grid-template-columns: 34px repeat(5, minmax(0, 1fr)); gap: 8px; align-items: center; }
.heat-row span { color: rgba(244,242,233,.7); font-size: 11px; }
.heat-cell { height: 18px; border-radius: 8px; background: rgba(255,255,255,0.08); }
.heat-cell.low { background: rgba(255,255,255,0.08); }
.heat-cell.mid { background: rgba(241,209,123,0.28); }
.heat-cell.high { background: rgba(239,138,106,0.42); }
.heat-cell.strong { background: rgba(239,138,106,0.75); }
.promo-slab {
  margin-top: 14px; padding: 12px 14px; border-radius: 12px; background: rgba(241,209,123,0.1); color: #f1d17b; border: 1px solid rgba(241,209,123,0.24); font-size: 13px; font-weight: 700;
}
.reviews-strip, .instagram-grid { display: grid; gap: 12px; }
.review-card { padding: 12px; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; background: rgba(255,255,255,0.03); }
.review-head { display: flex; align-items: center; gap: 10px; }
.review-head img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.review-head strong { display: block; font-size: 0.85rem; }
.review-head small { color: rgba(244,242,233,.7); }
.review-stars { color: #f1d17b; letter-spacing: 2px; font-size: 0.9rem; margin: 10px 0 6px; }
.review-card p { margin: 0; color: rgba(244,242,233,.78); font-size: 0.8rem; line-height: 1.5; }
.instagram-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.instagram-grid img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 14px; border: 1px solid rgba(255,255,255,0.08); }
.instagram-embed-card { min-width: 0; overflow: hidden; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(17,23,21,.76); }
.instagram-embed-card iframe { display: block; width: 100%; min-height: 420px; border: 0; background: #fff; }
.instagram-embed-card > a { display: flex; justify-content: space-between; padding: 10px 13px; color: rgba(244,242,233,.82); font-size: 11px; }
.instagram-embed-card > a:hover { color: var(--site-accent-color); }
.instagram-grid:has(.instagram-embed-card) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); align-items: start; }
.customer-header-actions { display: flex; align-items: center; gap: 9px; }
.video-toggle { width: 38px; min-width: 38px; padding: 0; font-size: 15px; }
.customer-header .login-brand { margin: 0; }
.customer-header .login-brand > span { color: #f4f2e9; }
.customer-header .brand-mark { color: #13201b; }
.customer-header .ghost { color: #f4f2e9; background: rgba(18,24,22,.58); border-color: rgba(255,255,255,.24); backdrop-filter: blur(12px); }
.customer-header .ghost:hover { color: #fff; border-color: rgba(255,255,255,.54); background: rgba(28,37,33,.76); }
.customer-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, .8fr); gap: clamp(32px, 7vw, 90px); padding: 57px 0 48px; align-items: start; position: relative; z-index: 1; }
.customer-intro > .eyebrow { color: #efa38e; }
.customer-intro > h1 { font: 600 52px/1.02 "Space Grotesk", sans-serif; letter-spacing: 0; margin: 14px 0; }
.customer-intro > p { max-width: 400px; color: rgba(244,242,233,.78); font-size: 15px; line-height: 1.6; margin: 0; }
.customer-services { margin-top: 46px; }
.customer-section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.customer-section-heading h2 { font: 600 18px "Space Grotesk", sans-serif; margin: 0; }
.customer-section-heading > span { color: rgba(244,242,233,.68); font-size: 11px; }
.customer-services .service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.customer-services .service-card { min-height: 120px; color: #f4f2e9; background: rgba(17,23,21,.66); border-color: rgba(255,255,255,.2); backdrop-filter: blur(12px); transform-style: preserve-3d; transition: transform .38s cubic-bezier(.2,.76,.24,1), box-shadow .38s ease, border-color .38s ease, background .38s ease; }
.customer-services .service-card:hover { transform: perspective(900px) rotateX(3deg) rotateY(-3deg) translate3d(0,-5px,14px); box-shadow: 0 18px 32px rgba(0,0,0,.3); border-color: rgba(239,163,142,.66); background: rgba(22,30,27,.82); }
.customer-services .service-card .service-symbol { color: #efa38e; }
.customer-services .service-card p { color: rgba(244,242,233,.68); }
.customer-services .service-card strong { color: #f1d17b; }
.customer-screen .customer-booking { color: #f4f2e9; padding: 26px; border-color: rgba(105,240,210,.24); box-shadow: 0 24px 70px rgba(0,0,0,.32), 0 0 0 1px rgba(105,240,210,.07), 0 0 32px rgba(105,240,210,.07); background: rgba(17,23,21,.76); backdrop-filter: blur(18px); transform: perspective(1400px) rotateY(-1deg); transition: transform .45s ease, box-shadow .45s ease, border-color .45s ease; }
.customer-booking:hover { transform: perspective(1400px) rotateY(0) translateY(-2px); border-color: rgba(105,240,210,.42); box-shadow: 0 28px 76px rgba(0,0,0,.38), 0 0 34px rgba(105,240,210,.13); }
.booking-step { color: #efa38e; font-size: 10px; font-weight: 700; letter-spacing: 1.2px; }
.booking-heading h2 { font: 600 24px "Space Grotesk", sans-serif; margin: 9px 0 6px; }
.booking-heading p { color: rgba(244,242,233,.7); font-size: 12px; line-height: 1.5; margin: 0 0 20px; }
.customer-form { display: grid; gap: 14px; }
.customer-form label { color: rgba(244,242,233,.84); font-size: 11px; }
.customer-form input, .customer-form select { height: 43px; color: #f4f2e9; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); }
.customer-form input::placeholder { color: rgba(244,242,233,.52); }
.customer-form select option { color: #182622; background: #fffefa; }
.customer-form input:focus, .customer-form select:focus { outline: none; border-color: var(--site-accent-color); box-shadow: 0 0 0 2px color-mix(in srgb, var(--site-accent-color) 16%, transparent), 0 0 18px color-mix(in srgb, var(--site-accent-color) 17%, transparent); }
.booking-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.customer-message { min-height: 16px; color: #a34d3e; font-size: 11px; margin: 0; }
.customer-message.success { color: #287052; }
.customer-form .login-submit { margin: 0; }
.customer-footer { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid rgba(255,255,255,.16); color: rgba(244,242,233,.65); font-size: 11px; position: relative; z-index: 1; }
.customer-footer span:first-child { color: #f1d17b; font-weight: 700; }
.customer-header-actions .header-cta:first-child { animation: ledPulse 4.2s ease-in-out infinite; }
.customer-intro > .eyebrow { text-shadow: 0 0 14px rgba(239,163,142,.32); }
.customer-form .login-submit { margin: 0; border: 1px solid rgba(105,240,210,.56); background: linear-gradient(110deg, #9cebd8, #d5dd91 56%, #f0bf72); color: #10201c; box-shadow: 0 0 0 1px rgba(105,240,210,.16), 0 0 24px rgba(105,240,210,.2), 0 12px 28px rgba(0,0,0,.18); transition: transform .22s ease, box-shadow .22s ease, filter .22s ease; }
.customer-form .login-submit:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 0 0 1px rgba(105,240,210,.28), 0 0 32px rgba(105,240,210,.3), 0 16px 34px rgba(0,0,0,.24); }
.customer-booking, .customer-intro > *, .customer-footer { animation: sectionRise .7s cubic-bezier(.2,.76,.24,1) both; }
.customer-booking { animation-delay: .12s; }
.customer-layout[data-site-layout="compact"] { width: min(1040px, calc(100% - 48px)); gap: 34px; padding-top: 38px; padding-bottom: 30px; }
.customer-intro > *:nth-child(2) { animation-delay: .08s; }
.customer-intro > *:nth-child(3) { animation-delay: .14s; }
.customer-intro > *:nth-child(4) { animation-delay: .2s; }
.customer-intro > *:nth-child(5) { animation-delay: .26s; }
.dev-site-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.dev-site-form label { display: grid; gap: 7px; min-width: 0; color: var(--muted); font-size: 12px; }
.dev-site-form input:not([type="checkbox"]), .dev-site-form select, .dev-site-form textarea { width: 100%; min-width: 0; min-height: 40px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); font: inherit; }
.dev-site-form textarea { resize: vertical; }
.dev-site-form input[type="color"] { width: 76px; min-height: 40px; padding: 4px; }
.dev-site-toggles { display: flex; grid-column: 1 / -1; flex-wrap: wrap; gap: 16px; }
.dev-site-toggles label { display: inline-flex; align-items: center; gap: 8px; }
.dev-site-toggles input { width: 16px; height: 16px; margin: 0; accent-color: var(--green); }
.dev-site-form > button, .dev-site-form > p { grid-column: 1 / -1; }
@keyframes ledSweep { from { background-position: 100% 0; } to { background-position: -120% 0; } }
@keyframes ledWash { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }
@keyframes ledShine { 0%, 35% { left: -45%; } 72%, 100% { left: 135%; } }
@keyframes ledPulse { 0%, 100% { box-shadow: 0 0 0 1px rgba(105,240,210,.12), 0 0 15px rgba(105,240,210,.07); } 50% { box-shadow: 0 0 0 1px rgba(105,240,210,.23), 0 0 24px rgba(105,240,210,.17); } }
@keyframes sectionRise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
.payment-modal { max-height: min(88vh, 760px); overflow: auto; text-align: center; }
.payment-modal .modal-header { text-align: left; }
.pix-amount { color: #f1d17b; font: 600 24px "Space Grotesk", sans-serif; margin: 0 0 8px; }
.pix-status { color: rgba(244,242,233,.78); font-size: 12px; line-height: 1.5; }
.pix-qr { display: block; width: min(220px, 70%); aspect-ratio: 1; object-fit: contain; margin: 15px auto; padding: 10px; border-radius: 8px; background: #fff; }
.pix-copy-label { color: rgba(244,242,233,.78); text-align: left; }
.pix-copy-code { display: block; width: 100%; resize: vertical; color: #f4f2e9; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(255,255,255,.08); padding: 10px; font-size: 11px; overflow-wrap: anywhere; }
.pix-copy-button { margin-top: 9px; }
.wallet-balance { color: #f1d17b; font-size: 12px; margin: 12px 0 0; }
.payment-footnote { color: rgba(244,242,233,.56); font-size: 10px; line-height: 1.5; margin: 17px 0 0; }
.cashback-result { border-top: 1px solid rgba(255,255,255,.16); margin-top: 20px; padding-top: 19px; }
.cashback-result h3, .review-form h3 { color: #f4f2e9; font: 600 17px "Space Grotesk", sans-serif; margin: 11px 0 5px; }
.cashback-result p { color: #f1d17b; font-size: 12px; margin: 0; }
.cashback-wheel { width: 106px; aspect-ratio: 1; margin: 0 auto; display: grid; place-items: center; border-radius: 50%; border: 5px solid #f1d17b; background: repeating-conic-gradient(from -9deg, rgba(189,79,56,.85) 0deg 32deg, rgba(17,23,21,.92) 32deg 36deg); box-shadow: 0 0 25px rgba(241,209,123,.25); color: #fff; font: 700 23px "Space Grotesk", sans-serif; }
.cashback-wheel span { width: 62px; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: #183d35; border: 2px solid #f1d17b; }
.cashback-wheel.spin { animation: cashbackSpin 1.8s cubic-bezier(.11,.75,.12,1) both; }
@keyframes cashbackSpin { from { transform: rotate(-30deg) scale(.85); } to { transform: rotate(1080deg) scale(1); } }
.review-form { display: grid; gap: 12px; text-align: left; border-top: 1px solid rgba(255,255,255,.16); margin-top: 18px; padding-top: 15px; }
.review-form label { color: rgba(244,242,233,.8); font-size: 11px; }
.review-form select, .review-form textarea { color: #f4f2e9; border: 1px solid rgba(255,255,255,.2); border-radius: 7px; background: rgba(255,255,255,.08); padding: 10px; }
.review-form select option { color: #182622; background: #fffefa; }
.review-form button { min-height: 40px; }
.payment-modal { color: #f4f2e9; border-color: rgba(255,255,255,.18); background: rgba(17,23,21,.94); backdrop-filter: blur(18px); }
.payment-modal .modal-header { border-bottom: 1px solid rgba(255,255,255,.14); padding-bottom: 14px; }
.payment-modal .modal-header h2 { color: #f4f2e9; }
.payment-modal .close { color: rgba(244,242,233,.75); }
.payment-modal .ghost { color: #f4f2e9; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.payment-modal .ghost:hover { background: rgba(255,255,255,.16); }
.app { --ink: #f4f2e9; --muted: rgba(244,242,233,.67); --line: rgba(255,255,255,.16); --paper: rgba(17,23,21,.76); --green-soft: rgba(224,236,229,.14); color: #f4f2e9; background: transparent; position: relative; z-index: 0; }
.app .main { background: transparent; }
.app .sidebar { background: rgba(12,39,33,.92); backdrop-filter: blur(18px); border-right: 1px solid rgba(255,255,255,.12); }
.app .panel, .app .stat-card, .app .report-box { color: #f4f2e9; border-color: rgba(255,255,255,.17); background: rgba(17,23,21,.76); box-shadow: 0 20px 52px rgba(0,0,0,.25); backdrop-filter: blur(16px); }
.app .welcome-strip { background: rgba(15,47,39,.85); border: 1px solid rgba(255,255,255,.15); backdrop-filter: blur(14px); }
.app .topbar h1, .app .page-panel h2, .app .report-box h3, .app .side-panel h2, .app .next h3 { color: #f4f2e9; }
.app .eyebrow, .app .next-label { color: #efa38e; }
.app .page-heading p, .app .side-panel > p, .app .next p, .app .empty-state { color: rgba(244,242,233,.67); }
.app .table-wrap th { color: rgba(244,242,233,.66); }
.app .table-wrap td { border-color: rgba(255,255,255,.14); color: rgba(244,242,233,.86); }
.app .table-wrap td strong, .app .metric-label, .app .stat-card strong { color: #f4f2e9; }
.app .barber-stats .stat-card strong, .app .metric strong { color: #f1d17b; }
.app .search, .app input, .app select { color: #f4f2e9; border-color: rgba(255,255,255,.2); background-color: rgba(255,255,255,.09); }
.app .search::placeholder, .app input::placeholder { color: rgba(244,242,233,.5); }
.app select option { color: #182622; background: #fffefa; }
.app .ghost { color: #f4f2e9; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.08); }
.app .ghost:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.4); }
.app .client-avatar, .app .appointment-avatar { color: #f4f2e9; background: rgba(224,236,229,.15); }
.app .status.open { color: #f0cf70; background: rgba(230,194,91,.17); }
.app .status.done { color: #95d4ad; background: rgba(90,157,125,.2); }
.app .status.wait { color: #f2a08d; background: rgba(239,128,105,.18); }
.app .row-action { color: #f1d17b; }
.app .stat-card span, .app .legend { color: rgba(244,242,233,.67); }
.app .service-card { color: #f4f2e9; border-color: rgba(255,255,255,.17); background: rgba(17,23,21,.76); }
.app .service-card h3 { color: #f4f2e9; }
.app .service-card p { color: rgba(244,242,233,.67); }
.app .service-card strong { color: #f1d17b; }
.app .reviews-list { display: grid; gap: 10px; }
.app .reviews-panel { margin-top: 18px; }
.app .review-average { color: #f1d17b; font: 600 16px "Space Grotesk", sans-serif; }
.app .review-entry { padding: 12px 0; border-top: 1px solid rgba(255,255,255,.13); }
.app .review-entry strong { color: #f1d17b; }
.app .review-entry p { color: rgba(244,242,233,.7); font-size: 12px; margin: 5px 0 0; }
.service-actions { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; border-top: 1px solid rgba(255,255,255,.13); padding-top: 9px; }
.coupon-list { display: grid; gap: 10px; margin-top: 12px; }
.coupon-item { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.12); background: rgba(17,23,21,0.58); }
.coupon-item strong { display: block; color: #f4f2e9; }
.coupon-item small { color: rgba(244,242,233,.68); }
.coupon-meta { display: flex; align-items: center; gap: 12px; }
.coupon-meta span { color: #f1d17b; font-weight: 700; }
.service-actions .row-action { font-size: 11px; }
.sidebar { width: 246px; background: var(--green); color: #f6fbf5; padding: 28px 18px; display: flex; flex-direction: column; flex-shrink: 0; }
.brand { display: flex; align-items: center; gap: 11px; padding: 0 12px 36px; font: 700 20px "Space Grotesk", sans-serif; letter-spacing: -.5px; }
.brand-mark { width: 31px; height: 31px; border-radius: 9px 14px 9px 14px; background: var(--coral); display: grid; place-items: center; color: var(--green); font-weight: 700; }
.nav-label { color: #92b1a2; text-transform: uppercase; font-size: 10px; letter-spacing: 1.4px; font-weight: 700; padding: 0 13px 10px; }
.nav { display: grid; gap: 5px; }
.nav button { border: 0; background: transparent; color: #bbd1c4; text-align: left; border-radius: 9px; padding: 12px 13px; display: flex; align-items: center; gap: 11px; font-weight: 600; font-size: 14px; }
.nav button.active, .nav button:hover { color: #fff; background: rgba(255,255,255,.12); }
.nav button.active { box-shadow: inset 3px 0 var(--coral); }
.nav-icon { width: 18px; text-align: center; font-size: 16px; }
.sidebar-footer { margin-top: auto; padding: 17px 12px 0; border-top: 1px solid rgba(255,255,255,.15); }
.profile { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; background: var(--yellow); color: var(--green); font-weight: 700; }
.profile small { display: block; color: #98b8a7; font-size: 11px; margin-top: 2px; }
.logout { border: 0; background: transparent; color: #98b8a7; font-size: 11px; padding: 0; margin-top: 5px; }
.logout:hover { color: #fff; }
.main { flex: 1; min-width: 0; padding: 36px 42px 45px; }
.topbar { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 30px; }
.eyebrow { color: var(--coral); font-size: 11px; text-transform: uppercase; font-weight: 700; letter-spacing: 1.6px; margin-bottom: 7px; }
h1 { font: 700 31px "Space Grotesk", sans-serif; letter-spacing: -1.3px; margin: 0; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.search { height: 42px; width: 220px; background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 0 14px 0 38px; outline: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 24 24' fill='none' stroke='%2375827c' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: 13px center; }
.primary { border: 0; height: 42px; border-radius: 9px; padding: 0 16px; background: var(--coral); color: #fff; font-weight: 700; box-shadow: 0 7px 17px rgba(239,128,105,.2); }
.primary:hover { background: #e56e57; transform: translateY(-1px); }
.content-grid { display: grid; grid-template-columns: minmax(0, 1fr) 296px; gap: 22px; }
.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 13px; box-shadow: var(--shadow); }
.calendar-panel { overflow: hidden; }
.calendar-toolbar { display: flex; justify-content: space-between; align-items: center; padding: 21px 23px; border-bottom: 1px solid var(--line); }
.month { font: 600 18px "Space Grotesk", sans-serif; }
.toolbar-actions { display: flex; gap: 8px; align-items: center; }
.ghost { border: 1px solid var(--line); background: #fff; color: var(--ink); height: 34px; padding: 0 12px; border-radius: 7px; font-size: 12px; font-weight: 600; }
.ghost:hover { border-color: var(--green); color: var(--green); }
.arrow { width: 34px; padding: 0; font-size: 18px; }
.calendar { display: grid; grid-template-columns: 55px repeat(5, minmax(105px, 1fr)); overflow-x: auto; }
.day-head { min-width: 105px; height: 65px; padding: 16px 10px 8px; border-left: 1px solid var(--line); font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .7px; }
.day-head strong { display: block; color: var(--ink); font: 600 17px "Space Grotesk", sans-serif; text-transform: none; letter-spacing: 0; margin-top: 3px; }
.day-head.today strong { color: var(--coral); }
.time-col { padding-top: 65px; }
.time { height: 74px; padding: 10px 7px 0 0; color: #98a39e; font-size: 10px; text-align: right; border-top: 1px solid var(--line); }
.day-column { position: relative; min-width: 105px; height: 592px; border-left: 1px solid var(--line); background: repeating-linear-gradient(to bottom, transparent 0, transparent 73px, var(--line) 73px, var(--line) 74px); }
.event { position: absolute; left: 7px; right: 7px; padding: 9px 8px; border-radius: 7px; overflow: hidden; font-size: 11px; line-height: 1.25; border-left: 3px solid; }
.event strong { display: block; font-size: 12px; margin-bottom: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.event small { opacity: .75; font-size: 10px; }
.event.coral { background: #fce2dc; border-color: var(--coral); }
.event.blue { background: #deedf1; border-color: #65a5b6; }
.event.yellow { background: #fff1c9; border-color: #e0ae30; }
.event.green { background: var(--green-soft); border-color: #5a9d7d; }
.side-panel { padding: 21px; }
.side-panel h2 { font: 600 17px "Space Grotesk", sans-serif; margin: 0 0 5px; }
.side-panel > p { color: var(--muted); font-size: 12px; margin: 0 0 20px; }
.metric { display: flex; align-items: center; justify-content: space-between; padding: 13px 0; border-bottom: 1px solid var(--line); }
.metric:last-of-type { border: 0; }
.metric-label { display: flex; align-items: center; gap: 9px; font-size: 12px; color: #5f6b65; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--coral); }
.dot.green { background: #5a9d7d; } .dot.yellow { background: var(--yellow); }
.metric strong { font: 700 20px "Space Grotesk", sans-serif; }
.next { margin-top: 25px; padding-top: 19px; border-top: 1px solid var(--line); }
.next-label { font-size: 10px; color: var(--coral); text-transform: uppercase; font-weight: 700; letter-spacing: 1.2px; }
.next h3 { font: 600 16px "Space Grotesk", sans-serif; margin: 8px 0 4px; }
.next p { color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; }
.modal-backdrop { display: none; position: fixed; inset: 0; background: rgba(15, 35, 29, .35); z-index: 5; place-items: center; padding: 20px; }
.modal-backdrop.open { display: grid; }
.modal { width: min(470px, 100%); background: #fff; border-radius: 14px; box-shadow: 0 25px 70px rgba(15,35,29,.2); padding: 26px; }
.modal-header { display: flex; justify-content: space-between; align-items: start; margin-bottom: 22px; }
.modal h2 { font: 600 21px "Space Grotesk", sans-serif; margin: 0; }
.referral-share-modal { color: var(--ink); text-align: left; }
.referral-share-modal > p { color: var(--muted); font-size: 12px; line-height: 1.5; }
.referral-share-modal label { margin-top: 12px; }
.referral-share-modal input { color: var(--ink); background: #fbfcfa; }
.referral-share-modal .customer-message { color: var(--muted); line-height: 1.5; }
.close { border: 0; background: none; color: var(--muted); font-size: 22px; line-height: 1; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
label { display: grid; gap: 7px; color: #647069; font-size: 11px; font-weight: 700; }
label.full { grid-column: 1 / -1; }
input, select { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 7px; padding: 0 11px; color: var(--ink); outline-color: var(--coral); background: #fbfcfa; }
.modal-footer { display: flex; justify-content: flex-end; gap: 9px; margin-top: 24px; }
.view { display: none; }
.view.active { display: block; }
.page-panel { padding: 24px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 21px; }
.page-heading h2 { font: 600 21px "Space Grotesk", sans-serif; margin: 0 0 5px; }
.page-heading p { color: var(--muted); font-size: 12px; margin: 0; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; text-align: left; min-width: 610px; }
th { color: var(--muted); font-size: 10px; text-transform: uppercase; letter-spacing: .9px; padding: 0 13px 12px; font-weight: 700; }
td { border-top: 1px solid var(--line); padding: 14px 13px; font-size: 12px; vertical-align: middle; }
td strong { font-size: 13px; }
.client-cell { display: flex; align-items: center; gap: 10px; }
.client-avatar { width: 31px; height: 31px; display: grid; place-items: center; border-radius: 8px; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }
.status { display: inline-block; border-radius: 20px; padding: 5px 9px; font-size: 10px; font-weight: 700; }
.status.open { color: #9b6e06; background: #fff1c9; }
.status.done { color: #287052; background: var(--green-soft); }
.status.wait { color: #a34d3e; background: #fce2dc; }
.row-action { border: 0; background: none; color: var(--green); font-size: 12px; font-weight: 700; }
.stats-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 21px; }
.stat-card { border: 1px solid var(--line); border-radius: 10px; padding: 17px; background: #fbfcfa; }
.stat-card span { color: var(--muted); font-size: 11px; }
.stat-card strong { display: block; font: 700 25px "Space Grotesk", sans-serif; margin-top: 8px; }
.report-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: 18px; }
.report-box { border: 1px solid var(--line); border-radius: 10px; padding: 19px; }
.report-box h3 { font: 600 15px "Space Grotesk", sans-serif; margin: 0 0 19px; }
.bar-row { display: grid; grid-template-columns: 84px 1fr 28px; align-items: center; gap: 9px; font-size: 11px; margin: 15px 0; }
.bar { height: 8px; background: #edf1ec; border-radius: 10px; overflow: hidden; }
.bar i { display: block; height: 100%; border-radius: inherit; background: var(--coral); }
.legend { display: grid; gap: 13px; font-size: 12px; color: #647069; }
.legend div { display: flex; align-items: center; justify-content: space-between; }
.legend span { display: flex; align-items: center; gap: 8px; }
@media (max-width: 700px) { .stats-row, .report-grid, .dev-site-form { grid-template-columns: 1fr; } .dev-site-toggles, .dev-site-form > button, .dev-site-form > p { grid-column: 1; } .page-heading { align-items: flex-start; flex-direction: column; } .leaderboard-grid { grid-template-columns: 1fr; gap: 14px; } .leaderboard-grid > section, .leaderboard-grid > section:first-child { padding: 12px 0 0; } .leaderboard-grid > section + section { border-top: 1px solid var(--line); border-left: 0; } }
@media (max-width: 950px) { .sidebar { width: 72px; padding-inline: 10px; } .brand { padding-inline: 10px; } .brand span, .nav-label, .nav button span, .profile > div { display: none; } .nav button { justify-content: center; padding: 12px; } .profile { justify-content: center; } .main { padding: 28px 22px; } .content-grid { grid-template-columns: 1fr; } .side-panel { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; } .side-panel h2, .side-panel > p, .next { grid-column: 1 / -1; } .metric { border-bottom: 0; padding: 0; } }
.nav button .nav-icon { display: inline-block; }
@media (max-width: 650px) { .main { padding: 22px 14px; } .topbar { align-items: flex-start; flex-direction: column; } .top-actions { width: 100%; } .search { flex: 1; width: auto; } .calendar-toolbar { padding: 17px 15px; } .side-panel { display: block; } .metric { padding: 13px 0; border-bottom: 1px solid var(--line); } .calendar { grid-template-columns: 48px repeat(5, 112px); } .time-col { min-width: 48px; } }
@media (max-width: 500px) { .login-card { padding: 28px 23px; } .login-brand { margin-bottom: 32px; } }

.login-screen { color: #f4f2e9; background: linear-gradient(125deg, rgba(9,14,12,.76), rgba(16,25,21,.68)); }
.login-card { color: #f4f2e9; border-color: rgba(255,255,255,.2); background: rgba(17,23,21,.82); backdrop-filter: blur(18px); box-shadow: 0 26px 75px rgba(0,0,0,.34); }
.login-heading p, .login-note { color: rgba(244,242,233,.7); }
.login-screen label { color: rgba(244,242,233,.84); }
.login-screen input { color: #f4f2e9; border-color: rgba(255,255,255,.22); background: rgba(255,255,255,.09); }
.login-screen input::placeholder { color: rgba(244,242,233,.5); }
.password-row a, .back-to-customer, .auth-link { color: #f1d17b; }
.auth-secondary { color: rgba(244,242,233,.68); }

:root {
	--ink: #182622;
	--muted: #737b72;
	--line: #e2e5dd;
	--canvas: #f2f4ef;
	--paper: #fffefa;
	--green: #183d35;
	--green-soft: #e0ece5;
	--coral: #bd4f38;
	--yellow: #e6c25b;
	--blue: #c9dfe4;
	--shadow: 0 14px 38px rgba(24, 38, 34, .07);
}
.login-screen { background: radial-gradient(circle at 10% 10%, #e2e9de 0, transparent 28%), radial-gradient(circle at 90% 90%, #f2d8ce 0, transparent 27%), var(--canvas); }
.brand-mark { border-radius: 50% 50% 50% 8px; background: var(--yellow); }
.primary { background: var(--coral); }
.primary:hover { background: #a9412e; }
.view.active { animation: dashboardTurnIn .48s cubic-bezier(.2,.76,.24,1) both; transform-origin: 50% 20%; backface-visibility: hidden; }
@keyframes dashboardTurnIn { from { opacity: 0; transform: perspective(1100px) rotateX(-5deg) translate3d(0, 14px, -18px); } to { opacity: 1; transform: perspective(1100px) rotateX(0) translate3d(0, 0, 0); } }
.content-grid { display: none; }
.welcome-strip { min-height: 186px; border-radius: 13px; background: var(--green); color: #fffefa; padding: 27px 32px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; position: relative; }
.welcome-strip .eyebrow { color: var(--yellow); }
.welcome-strip h2 { max-width: 540px; margin: 7px 0; font: 600 27px/1.15 "Space Grotesk", sans-serif; }
.welcome-strip p { color: #c6d4cc; font-size: 13px; margin: 9px 0 0; }
.chair-mark { width: 125px; height: 125px; flex: 0 0 125px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; display: grid; place-items: center; color: var(--yellow); font: 600 24px "Space Grotesk", sans-serif; transform: rotate(-12deg); }
.barber-stats { margin: 16px 0 22px; }
.barber-stats .stat-card { background: var(--paper); border: 0; border-radius: 10px; }
.barber-stats .stat-card strong { color: var(--green); }
.team-leaderboard { margin-bottom: 22px; padding: 22px 24px; }
.team-leaderboard-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
.team-leaderboard-heading h2 { margin: 0; font: 600 18px "Space Grotesk", sans-serif; }
.team-leaderboard-heading p { margin: 5px 0 0; color: var(--muted); font-size: 12px; }
.team-leaderboard-heading > span { color: #eacb75; font-size: 12px; font-weight: 700; text-transform: capitalize; white-space: nowrap; }
.leaderboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.leaderboard-grid > section { min-width: 0; padding: 4px 18px; }
.leaderboard-grid > section:first-child { padding-left: 0; }
.leaderboard-grid > section + section { border-left: 1px solid var(--line); }
.leaderboard-grid h3 { margin: 0 0 11px; font: 600 13px "Space Grotesk", sans-serif; }
.leaderboard-grid ol { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
.leaderboard-grid li { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; align-items: baseline; gap: 7px; font-size: 11px; }
.leaderboard-grid li strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-grid li > span:last-child { color: var(--muted); text-align: right; white-space: nowrap; }
.leaderboard-rank { color: var(--coral); font-weight: 700; }
.leaderboard-grid .leaderboard-empty { grid-template-columns: 1fr; color: var(--muted); font-size: 11px; }
.appointments-panel { padding: 23px 24px; }
.appointments-panel .page-heading { margin-bottom: 12px; }
.open-indicator { display: inline-flex; align-items: center; gap: 7px; color: #46765d; font-size: 11px; font-weight: 700; }
.open-indicator i { width: 7px; height: 7px; border-radius: 50%; background: #61a779; }
.appointment-list { display: grid; }
.appointment-item { min-height: 72px; display: grid; grid-template-columns: 72px 38px minmax(0, 1fr) auto; align-items: center; gap: 13px; border-top: 1px solid var(--line); }
.appointment-time { color: var(--coral); font: 600 15px "Space Grotesk", sans-serif; }
.appointment-avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--green-soft); color: var(--green); font-size: 11px; font-weight: 700; }
.appointment-person strong { display: block; font-size: 13px; }
.appointment-person small { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.appointment-meta { text-align: right; color: var(--muted); font-size: 11px; }
.appointment-meta strong { display: block; color: var(--ink); font-size: 12px; margin-bottom: 4px; }
.empty-state { padding: 23px 0; color: var(--muted); font-size: 13px; }
.service-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.service-card { background: #f8f8f3; border: 1px solid var(--line); border-radius: 10px; min-height: 135px; padding: 18px; display: flex; flex-direction: column; justify-content: space-between; }
.service-card .service-symbol { color: var(--coral); font-size: 17px; }
.service-card h3 { font: 600 15px "Space Grotesk", sans-serif; margin: 11px 0 5px; }
.service-card p { color: var(--muted); font-size: 11px; margin: 0; }
.service-card strong { margin-top: 14px; color: var(--green); font: 600 17px "Space Grotesk", sans-serif; }
#view-servicos > .page-panel > .stats-row, #view-servicos > .page-panel > .table-wrap { display: none; }
.search { background-color: var(--paper); }
.dev-limit-box { margin-bottom: 20px; }
.dev-limit-box > p { color: var(--muted); font-size: 12px; margin: 6px 0 16px; }
.dev-limit-form { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.dev-limit-form label { color: var(--muted); font-size: 12px; }
.dev-limit-form input { width: 110px; min-height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
.dev-limit-form .customer-message { flex: 1 1 100%; }
.dev-backup-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 6px; }
.family-booking-option { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: 12px; }
.family-booking-option input { width: 16px; height: 16px; min-height: 0; margin: 0; accent-color: var(--green); }
.customer-form .family-booking-option { color: rgba(244,242,233,.84); }
.customer-form .family-booking-option input { width: 16px; height: 16px; min-height: 0; }

.app.barber-mode { min-height: 100vh; flex-direction: column; }
.app.barber-mode .sidebar { width: 100%; min-height: 72px; height: auto; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 22px; padding: 12px clamp(18px, 4vw, 54px); border-right: 0; border-bottom: 1px solid rgba(255,255,255,.13); }
.app.barber-mode .brand { flex: 0 0 auto; padding: 0; letter-spacing: 0; white-space: nowrap; }
.app.barber-mode .nav-label { display: none; }
.app.barber-mode .nav { display: flex; flex: 1; justify-content: center; gap: 5px; min-width: 0; }
.app.barber-mode .nav button { min-height: 40px; white-space: nowrap; border-radius: 7px; padding: 10px 12px; font-size: 12px; }
.app.barber-mode .nav button.active { box-shadow: inset 0 -2px var(--coral); background: rgba(255,255,255,.1); }
.app.barber-mode .sidebar-footer { flex: 0 0 auto; margin: 0; padding: 0 0 0 18px; border: 0; }
.app.barber-mode .profile { gap: 9px; }
.app.barber-mode .profile small { color: rgba(244,242,233,.58); }
.app.barber-mode .logout { color: #f1d17b; }
.app.barber-mode .main { width: min(1320px, 100%); margin: 0 auto; padding: 32px clamp(18px, 4vw, 54px) 48px; }
.app.barber-mode .topbar { margin-bottom: 24px; }
.app.barber-mode .topbar h1 { font-size: 28px; letter-spacing: 0; }
.app.barber-mode .welcome-strip { border-radius: 9px; box-shadow: 0 22px 55px rgba(0,0,0,.2); }
.app.barber-mode .stat-card, .app.barber-mode .appointments-panel, .app.barber-mode .page-panel { border-radius: 8px; }

@media (max-width: 900px) {
	.app.barber-mode .sidebar { flex-wrap: wrap; gap: 10px 18px; padding: 12px 18px 0; }
	.app.barber-mode .brand { order: 1; }
	.app.barber-mode .brand span { display: inline; }
	.app.barber-mode .sidebar-footer { order: 2; margin-left: auto; padding: 0 0 0 8px; }
	.app.barber-mode .nav { order: 3; flex: 1 0 100%; min-width: 0; justify-content: flex-start; overflow-x: auto; scrollbar-width: none; padding-bottom: 9px; }
	.app.barber-mode .nav button { flex: 0 0 auto; padding-inline: 10px; }
	.app.barber-mode .nav button span { display: inline; }
}

@media (max-width: 520px) {
	.app.barber-mode .sidebar { gap: 8px 10px; padding-inline: 12px; }
	.app.barber-mode .brand { font-size: 16px; }
	.app.barber-mode .brand .brand-mark { width: 29px; height: 29px; }
	.app.barber-mode .profile { gap: 6px; }
	.app.barber-mode .profile > div { display: block; }
	.app.barber-mode .profile span { max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
	.app.barber-mode .profile small { display: none; }
	.app.barber-mode .nav { gap: 2px; }
	.app.barber-mode .nav button { min-height: 36px; gap: 6px; padding: 8px; font-size: 11px; }
	.app.barber-mode .main { padding: 22px 12px 34px; }
	.app.barber-mode .topbar h1 { font-size: 24px; }
}
@media (max-width: 700px) {
	.welcome-strip { padding: 24px 21px; min-height: 165px; }
	.welcome-strip h2 { font-size: 22px; }
	.chair-mark { width: 76px; height: 76px; flex-basis: 76px; font-size: 17px; }
	.appointment-item { grid-template-columns: 55px 34px minmax(0,1fr); gap: 9px; padding: 10px 0; }
	.appointment-meta { grid-column: 3; text-align: left; }
	.service-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 450px) {
	.barber-stats { grid-template-columns: 1fr; gap: 8px; }
	.barber-stats .stat-card { display: flex; justify-content: space-between; align-items: center; padding: 13px 15px; }
	.barber-stats .stat-card strong { margin: 0; }
	.service-grid { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
	.customer-header, .customer-layout, .customer-footer { width: min(100% - 32px, 560px); }
	.customer-layout { grid-template-columns: 1fr; gap: 30px; padding: 36px 0; }
	.customer-intro > h1 { font-size: 43px; }
	.customer-services { margin-top: 28px; }
	.customer-footer { flex-wrap: wrap; padding: 15px 0; }
}
@media (max-width: 460px) {
	.customer-header { height: auto; min-height: 72px; flex-wrap: wrap; gap: 8px; padding: 8px 0; }
	.customer-header .login-brand { margin-right: auto; }
	.customer-header-actions { flex: 1 0 100%; justify-content: flex-end; gap: 6px; }
	.customer-header .ghost { padding-inline: 9px; font-size: 11px; }
	.customer-header-actions .header-cta { padding: 8px 9px; font-size: 10px; }
	.customer-services .service-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
	.customer-services .service-card { padding: 13px; }
	.customer-booking { padding: 20px 17px; }
	.customer-header-actions { gap: 6px; }
	.video-toggle { width: 34px; min-width: 34px; }
}
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

.login-screen {
	min-height: 100svh;
	padding: 32px;
	background: radial-gradient(ellipse at 8% 12%, #e8eee2 0, transparent 38%), radial-gradient(ellipse at 92% 88%, #f5ded4 0, transparent 36%), #f2f4ef;
}
.login-shell {
	display: grid;
	grid-template-columns: minmax(0, .9fr) minmax(380px, 1.1fr);
	width: min(1120px, 100%);
	min-height: min(760px, calc(100svh - 64px));
	overflow: hidden;
	border: 1px solid rgba(20, 27, 26, .18);
	border-radius: 30px;
	background: #202526;
	box-shadow: 0 28px 80px rgba(24, 30, 27, .2);
}
.login-photo { position: relative; min-height: 100%; overflow: hidden; background: #332c27; }
.login-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14, 18, 17, .02) 45%, rgba(14, 18, 17, .48)); }
.login-photo video { display: block; width: 100%; height: 100%; min-height: inherit; position: absolute; inset: 0; object-fit: cover; object-position: center; }
.login-card {
	align-self: stretch;
	width: auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(30px, 6vw, 72px);
	border: 0;
	border-radius: 0;
	background: #202526;
	box-shadow: none;
}
.login-mode-switch { display: grid; grid-template-columns: 1fr 1fr; width: min(290px, 100%); padding: 5px; margin: 0 auto 50px; border-radius: 999px; background: rgba(255, 255, 255, .1); box-shadow: 0 8px 22px rgba(0, 0, 0, .2); }
.login-mode-switch button { min-height: 46px; border: 0; border-radius: 999px; background: transparent; color: rgba(244, 242, 233, .68); font-weight: 700; transition: background .2s ease, color .2s ease, transform .2s ease; }
.login-mode-switch button.active { background: #d9824f; color: #fff8ec; }
.login-mode-switch button:hover { color: #fff; }
.login-brand { margin-bottom: 36px; color: #f4f2e9; font: 500 25px Georgia, serif; }
.login-brand .brand-mark { width: 38px; height: 38px; border-radius: 50%; font: 700 22px "Space Grotesk", sans-serif; }
.login-heading { margin-bottom: 28px; }
.login-heading .eyebrow { color: #df906e; font-size: 11px; font-weight: 700; letter-spacing: 1.4px; }
.login-heading h1 { margin: 16px 0 12px; color: #f7f3eb; font: 400 36px/1.12 Georgia, serif; }
.login-heading p { max-width: 390px; color: rgba(244, 242, 233, .75); font-size: 14px; line-height: 1.65; }
.login-form { gap: 20px; }
.login-form label { display: grid; gap: 9px; color: #f4f2e9; font-size: 13px; font-weight: 600; }
.login-form input { height: 54px; padding-inline: 16px; border-radius: 11px; border: 1px solid rgba(255, 255, 255, .26); background: rgba(255, 255, 255, .1); color: #fff; }
.login-form input:focus { outline: 2px solid rgba(224, 144, 110, .7); outline-offset: 1px; }
.login-form input::placeholder { color: rgba(244, 242, 233, .55); }
.login-submit { height: 54px; margin-top: 2px; border-radius: 11px; background: #bd553c; font-size: 15px; box-shadow: none; }
.login-submit:hover { background: #a94430; }
.auth-secondary { display: grid; gap: 7px; margin-top: 22px; color: rgba(244, 242, 233, .72); font-size: 13px; text-align: center; }
.auth-link { justify-self: center; color: #e69a70; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.login-card > .back-to-customer, .login-note { color: #e7c97c; font-size: 12px; text-align: center; }
.login-card > .login-note { color: rgba(244, 242, 233, .54); }
.password-row a { color: #e69a70; }
.brand-mark { background-image: url('/assets/ico.jpg'); background-position: center; background-size: cover; color: transparent; font-size: 0; }

@media (max-width: 700px) {
	.login-screen { padding: 20px; }
	.login-shell { grid-template-columns: minmax(0, .8fr) minmax(0, 1fr); min-height: calc(100svh - 40px); border-radius: 24px; }
	.login-card { padding: 30px 24px; }
	.login-mode-switch { margin-bottom: 35px; }
	.login-brand { margin-bottom: 28px; font-size: 21px; }
	.login-heading h1 { font-size: 30px; }
}
@media (max-width: 520px) {
	.login-screen { padding: 14px; }
	.login-shell { grid-template-columns: 1fr; min-height: 0; }
	.login-photo { min-height: 145px; }
	.login-photo video { min-height: 145px; max-height: 145px; }
	.login-card { padding: 24px 22px 28px; }
	.login-mode-switch { margin-bottom: 25px; }
	.login-brand { margin-bottom: 24px; }
	.login-heading h1 { font-size: 29px; }
}

.report-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.finance-panel > .stats-row { margin-bottom: 18px; }
.finance-layout { display: grid; grid-template-columns: minmax(260px, .8fr) minmax(0, 1.2fr); gap: 18px; align-items: start; }
.finance-expense-form { display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.035); }
.finance-expense-form h3 { margin: 0 0 3px; font: 600 16px "Space Grotesk", sans-serif; }
.finance-expense-form label { display: grid; gap: 6px; color: var(--muted); font-size: 11px; }
.finance-expense-form input, .finance-expense-form select { width: 100%; min-width: 0; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); }
.finance-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.finance-expense-form .customer-message { min-height: 16px; }
.finance-expense-row { display: flex !important; align-items: center; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.finance-expense-row > span:first-child { display: grid; gap: 4px; min-width: 0; }
.finance-expense-row strong { overflow-wrap: anywhere; }
.finance-expense-row small { color: var(--muted); font-size: 10px; }
.finance-expense-value { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
@media (max-width: 700px) { .finance-layout { grid-template-columns: 1fr; } .report-actions { justify-content: flex-start; } }