@font-face { font-family: Manrope; src: url('/fonts/manrope.ttf') format('truetype'); font-weight: 200 800; font-display: swap; }
:root {
  color-scheme: light;
  --forest: #8a462a; --deep-forest: #24282b; --sage: #9b8e7e; --sand: #c7a879; --steel: #71838d;
  --porcelain: #f5f2ec; --white: #fff; --ink: #24282b; --secondary-ink: #67635e;
  --bg: var(--porcelain); --panel: var(--white); --panel-2: #f0eeec; --line: #e5e2df;
  --text: var(--ink); --muted: var(--secondary-ink); --gold: var(--forest); --gold-2: var(--forest);
  --green: #26734b; --red: #b83939; --blue: #37617e;
  --radius: 16px; --motion-ease: cubic-bezier(.22,1,.36,1);
  font-family: Manrope, 'Avenir Next', system-ui, sans-serif; font-size: 14px; font-weight: 500;
}
html { scroll-padding-top: 96px; }
body { background: var(--bg); -webkit-font-smoothing: antialiased; }
::selection { background: #d8d3ce; color: var(--ink); }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: rgb(32 83 67 / .12); }
button, input, select, textarea { font-family: inherit; }
a { text-underline-offset: 4px; }
button:focus-visible,a:focus-visible,summary:focus-visible { outline: 3px solid #87796a; outline-offset: 4px; }
input,textarea { caret-color: var(--forest); }
h1,h2,h3 { text-wrap: balance; }
p { text-wrap: pretty; }
svg { flex-shrink: 0; vertical-align: middle; }
.money, time, .overview-numbers strong, .revenue-total, .chair-time, .stock-value { font-variant-numeric: tabular-nums; }
.skip-link { position: fixed; top: -100px; left: 24px; padding: 12px 20px; background: var(--forest); color: white; z-index: 300; border-radius: 8px; }
.skip-link:focus { top: 12px; }
.eyebrow { color: var(--muted); text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 500; }
.eyebrow::before { display: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 9px; padding: 0 16px; border: 1px solid var(--line); color: var(--ink); background: var(--white); font-size: 12px; font-weight: 700; text-decoration: none; box-shadow: none; transition: background-color 160ms, border-color 160ms, transform 160ms var(--motion-ease); }
.btn:hover { background: var(--panel-2); color: var(--ink); border-color: #c1b9b0; transform: none; }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn-primary { color: var(--white); background: var(--forest); border-color: var(--forest); }
.btn-primary:hover { color: var(--white); background: var(--deep-forest); border-color: var(--deep-forest); }
.btn-danger { color: var(--red); background: #fff9f9; border-color: #e9c8c8; }
.btn-danger:hover { color: #8f2525; background: #fceeee; border-color: #dba3a3; }
.icon-btn { display: inline-grid; width: 44px; height: 44px; padding: 0; }
.text-link { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; border: 0; padding: 0; color: var(--forest); background: none; font-size: 12px; font-weight: 750; cursor: pointer; text-decoration: none; }
.text-link:hover { color: var(--deep-forest); text-decoration: underline; }
.text-link svg { width: 16px; height: 16px; }
.field { gap: 8px; min-width: 0; }
.field label { color: var(--secondary-ink); font-size: 12px; font-weight: 650; }
.field input,.field select,.field textarea { border-radius: 8px; background: #f8f8f7; color: var(--ink); border-color: #d2cdc7; min-height: 46px; font-size: 14px; }
.field input:focus,.field select:focus,.field textarea:focus { border-color: var(--forest); outline: 2px solid #bfb6ad; outline-offset: 2px; box-shadow: none; }
.field input::placeholder,.field textarea::placeholder { color: #736d66; }
.field input[type=color] { padding: 4px; }
.card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; backdrop-filter: none; min-width: 0; }
.card-head { padding: 20px 24px; border-bottom: 0; gap: 16px; }
.card-head h2,.card-head h3 { font-size: 16px; font-weight: 750; letter-spacing: -.025em; }
.card-head p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.card-body { padding: 24px; }
.toast { top: auto; bottom: 24px; right: 24px; color: white; background: var(--deep-forest); border: 0; box-shadow: 0 8px 24px rgb(18 42 31 / .15); border-radius: 10px; transform: translateY(8px); transition: transform 180ms var(--motion-ease), opacity 180ms; font-size: 13px; }
.toast.error { background: #812c2c; color: white; border: 0; }
.app-shell { grid-template-columns: 236px minmax(0,1fr); }
.sidebar { inset: 0 auto 0 0; width: 236px; border: 0; border-right: 1px solid #dedad5; border-radius: 0; background: #eeece9; box-shadow: none; backdrop-filter: none; }
.sidebar-brand { height: 94px; padding: 0 22px; border: 0; }
.brand { font-size: 21px; letter-spacing: -.035em; text-decoration: none; gap: 10px; font-weight: 800; }
.brand-mark { background: var(--forest); color: white; width: 38px; height: 38px; border-radius: 11px; border: 0; }
.brand-mark svg { width: 22px; height: 22px; }
.brand-sub { display: block; margin-top: 1px; font-size: 10px; font-weight: 500; letter-spacing: .02em; color: #756b61; }
.nav { padding: 6px 16px; }
.nav-label { font-size: 10px; color: #756b61; font-weight: 650; letter-spacing: .04em; text-transform: none; margin: 28px 12px 10px; }
.nav-label:first-child { margin-top: 12px; }
.nav a { display: flex; align-items: center; gap: 12px; min-height: 46px; padding: 0 14px; margin-bottom: 4px; border-radius: 9px; font-size: 12px; font-weight: 600; color: #685d52; text-decoration: none; transition: background-color 160ms, color 160ms; }
.nav a:hover { background: #e5e1dd; color: var(--forest); }
.nav a.active { background: var(--forest); color: white; }
.nav .nav-icon { width: 20px; color: currentColor; }
.nav-dot { width: 5px; height: 5px; border-radius: 50%; background: #e1ddd8; margin-left: auto; }
.booking-shortcut { margin: 24px 22px 16px; display: flex; align-items: start; gap: 9px; color: var(--forest); font-size: 11px; font-weight: 750; text-decoration: none; padding: 16px 0; border-top: 1px solid #dbd6d1; }
.booking-shortcut > svg { width: 18px; height: 18px; }
.booking-shortcut > svg:last-child { width: 13px; height: 13px; margin-top: 2px; }
.booking-shortcut small { display: block; margin-top: 6px; color: #756b61; font-size: 10px; font-weight: 500; }
.booking-shortcut:hover { text-decoration: underline; }
.sidebar-user { display: flex; align-items: center; gap: 10px; margin: 0 16px 18px; padding: 12px 0 0; border: 0; border-top: 1px solid #dbd6d1; background: none; border-radius: 0; }
.avatar { display: grid !important; place-items: center; width: 36px; height: 36px; color: var(--forest); background: #ddd9d4; border-radius: 50%; font-weight: 750; font-size: 12px; flex-shrink: 0; }
.sidebar-user > div { flex: 1; min-width: 0; }
.sidebar-user strong { font-size: 12px; }
.sidebar-user small { display: block; font-size: 10px; margin-top: 3px; color: #756b61; }
.sidebar-user .icon-btn { color: #685d52; border: 0; background: none; }
.close-menu { display: none; }
.mobile-menu { display: none; }
.topbar { top: 0; margin: 0; height: 82px; padding: 0 32px; background: var(--bg); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; backdrop-filter: none; gap: 12px; }
.shop-mark { display: grid; place-items: center; width: 36px; height: 36px; color: var(--forest); background: #eae8e5; border-radius: 10px; }
.topbar-title strong { font-size: 12px; font-weight: 750; }
.topbar-title span { font-size: 10px; margin-top: 4px; }
.topbar-booking { margin-left: 8px; font-size: 11px; min-height: 38px; }
.topbar-booking svg { width: 14px; height: 14px; }
.preview-label { color: #70675e; font-size: 10px; }
.main { width: min(1500px,100%); padding: 30px 32px 24px; }
.main:focus { outline: none; }
.page-head { margin-bottom: 26px; align-items: center; }
.page-head h1 { font-size: 28px; font-weight: 750; line-height: 1.25; letter-spacing: -.035em; }
.page-head p:not(.eyebrow) { margin: 8px 0 0; font-size: 12px; line-height: 1.7; }
.page-actions .btn { min-height: 44px; font-size: 12px; }
.overview-numbers { display: grid; grid-template-columns: 1fr 1.3fr 1fr 1fr; padding: 24px 0; background: white; border: 1px solid var(--line); border-radius: 14px; margin-bottom: 24px; }
.overview-numbers > div,.overview-numbers > button { min-width: 0; padding: 0 24px; border: 0; border-right: 1px solid var(--line); background: none; text-align: left; font-family: inherit; }
.overview-numbers > :last-child { border-right: 0; }
.overview-numbers > * > span { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 600; color: #716960; }
.overview-numbers > * > span svg { width: 16px; height: 16px; color: #7e7266; }
.overview-numbers strong { display: block; margin-top: 14px; font-size: 28px; font-weight: 750; letter-spacing: -.035em; line-height: 1.2; }
.overview-numbers small { display: block; font-size: 10px; font-weight: 500; letter-spacing: 0; color: #716960; margin-top: 6px; }
.stock-stat { cursor: pointer; color: var(--ink); }
.stock-stat strong { color: #83642f; }
.stock-stat small svg { width: 13px; height: 13px; margin-left: 3px; }
.stock-stat:hover small { color: var(--forest); }
.stock-stat:disabled { cursor: default; }
.day-layout { display: grid; grid-template-columns: minmax(0,1fr) 290px; gap: 22px; align-items: start; }
.day-board { overflow: hidden; }
.week-strip { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 8px; padding: 0 24px 20px; }
.day-option { min-height: 90px; border: 1px solid transparent; background: #f6f5f4; border-radius: 11px; color: var(--ink); padding: 9px 4px; cursor: pointer; transition: background-color 160ms, color 160ms; }
.day-option span { display: block; font-size: 10px; color: #756d64; text-transform: capitalize; }
.day-option strong { display: block; font-size: 20px; font-weight: 750; margin-top: 2px; }
.day-option small { display: block; font-size: 9px; margin-top: 2px; color: #756d64; }
.day-option:hover { background: #ece9e6; }
.day-option.selected { background: var(--forest); color: white; }
.day-option.selected span,.day-option.selected small { color: #dedad5; }
.schedule-heading { padding: 13px 24px; display: flex; justify-content: space-between; background: #faf9f8; border-block: 1px solid #f0eeeb; color: #716961; font-size: 10px; }
.schedule-heading span:first-child { color: var(--ink); font-weight: 700; }
.schedule-row { display: grid; grid-template-columns: 42px 32px minmax(100px,1fr) 78px 90px 32px; align-items: center; gap: 12px; padding: 14px 24px; border-bottom: 1px solid #f0eeeb; }
.schedule-row:last-child { border: 0; }
.schedule-time { font-size: 12px; font-weight: 750; }
.schedule-time small { display: block; font-size: 9px; font-weight: 500; color: var(--muted); margin-top: 4px; }
.client-avatar { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #efedeb; color: #74695d; font-size: 10px; font-weight: 700; }
.schedule-row:nth-child(3n+2) .client-avatar { background: #f1ece3; color: #70563a; }
.schedule-row:nth-child(3n+3) .client-avatar { background: #e9eff2; color: #4b6373; }
.schedule-client { min-width: 0; }
.schedule-client strong { display: block; font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.schedule-client > span { display: block; font-size: 10px; color: var(--muted); margin-top: 4px; }
.schedule-professional { display: flex; align-items: center; gap: 6px; font-size: 10px; color: var(--muted); }
.pro-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pro-color); flex-shrink: 0; }
.schedule-row > .badge { font-size: 9px; min-height: 25px; padding: 4px 8px; justify-content: center; text-align: center; line-height: 1.2; }
.schedule-row > .icon-btn { width: 32px; border: 0; background: none; }
.schedule-row > .icon-btn svg { width: 15px; }
.schedule-more { display: flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; color: var(--forest); font-weight: 700; font-size: 11px; text-decoration: none; }
.schedule-more:hover { background: var(--panel-2); }
.schedule-more svg { width: 14px; height: 14px; }
.day-aside { display: grid; gap: 20px; }
.next-chair { padding: 24px; border-radius: 16px; background: var(--deep-forest); color: white; }
.next-chair-label { display: flex; align-items: center; gap: 8px; color: #d7d2cd; font-size: 11px; font-weight: 600; }
.next-chair-label svg { width: 16px; height: 16px; }
.chair-time { margin-top: 22px; font-size: 44px; line-height: 1.1; font-weight: 550; letter-spacing: -.04em; }
.chair-time > span { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0; color: #d3cdc6; margin-top: 8px; }
.chair-client { display: flex; align-items: center; gap: 12px; margin: 26px 0 20px; }
.chair-avatar { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: #50473e; color: #efedea; font-size: 12px; font-weight: 650; }
.chair-client h2 { margin: 0; font-size: 15px; letter-spacing: -.025em; }
.chair-client p { margin: 5px 0 0; font-size: 11px; color: #d3cdc6; }
.chair-details { display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #584f45; padding-top: 18px; margin-bottom: 22px; }
.chair-details > span { font-size: 10px; color: #ccc4bd; }
.chair-details strong { display: block; font-size: 11px; font-weight: 650; margin-top: 5px; color: white; }
.btn-chair { width: 100%; justify-content: space-between; background: #e9e6e3; border-color: transparent; color: var(--deep-forest); font-size: 11px; }
.btn-chair:hover { background: white; border-color: white; }
.next-chair > h2 { line-height: 1.5; margin: 26px 0 14px; }
.next-chair > p { color: #ddd9d4; font-size: 12px; line-height: 1.7; }
.online-booking { padding: 0 8px; }
.online-icon { display: none; }
.online-booking h3 { margin: 0 0 7px; font-size: 13px; }
.online-booking p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.7; }
.online-booking .text-link { font-size: 11px; margin-top: 2px; }
.insights-layout { display: grid; grid-template-columns: minmax(0,1.5fr) minmax(280px,1fr); gap: 22px; margin-top: 24px; }
.period-label { font-size: 10px; color: var(--muted); padding: 8px 10px; border: 1px solid var(--line); border-radius: 7px; white-space: nowrap; }
.revenue-total { display: flex; align-items: baseline; gap: 10px; padding: 0 24px; }
.revenue-total strong { font-size: 26px; letter-spacing: -.03em; font-weight: 750; }
.revenue-total span { font-size: 11px; color: var(--muted); }
.revenue-chart { padding: 6px 24px 18px; }
.revenue-chart > svg { width: 100%; display: block; overflow: visible; height: auto; }
.revenue-chart text { font: 10px Manrope, sans-serif; fill: #6f665d; }
.chart-gridline { stroke: #e9e6e3; stroke-dasharray: 3 4; stroke-width: 1; }
.revenue-fill { fill: #f0eeec; }
.revenue-line { fill: none; stroke: var(--forest); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.revenue-chart circle { fill: white; stroke: var(--forest); stroke-width: 2; }
.chart-data summary { color: var(--muted); font-size: 10px; cursor: pointer; min-height: 28px; display: flex; align-items: center; }
.chart-data > div { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 8px; }
.chart-data span { color: var(--muted); font-size: 10px; }
.chart-data strong { display: block; margin-top: 4px; font-weight: 700; color: var(--ink); }
.service-content { display: grid; grid-template-columns: 136px minmax(0,1fr); align-items: center; gap: 22px; padding: 22px 24px 38px; }
.service-donut { position: relative; width: 136px; height: 136px; }
.service-donut svg { width: 100%; height: 100%; }
.service-donut circle { fill: none; stroke-width: 15; }
.service-donut .donut-base { stroke: #f3f2f0; }
.service-donut > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.service-donut strong { font-size: 26px; font-weight: 750; }
.service-donut span { color: var(--muted); font-size: 9px; }
.service-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.service-legend li { display: grid; grid-template-columns: 7px minmax(0,1fr) auto; align-items: center; gap: 7px; font-size: 10px; color: var(--muted); }
.service-legend strong { color: var(--ink); font-size: 11px; }
.legend-dot { height: 7px; width: 7px; border-radius: 2px; background: var(--swatch); }
.dashboard-foot { display: flex; justify-content: space-between; margin-top: 28px; font-size: 11px; font-weight: 700; color: #756b61; }
.dashboard-foot span { font-weight: 500; font-size: 10px; }
.badge { border: 0; background: #f0eeec; color: #645b52; font-size: 11px; font-weight: 650; }
.badge.green { color: #2b6848; background: #e6f1e7; border: 0; }
.badge.red { color: #a33737; background: #f8e9e6; border: 0; }
.badge.gold { color: #855e21; background: #f8f0dc; border: 0; }
.metrics { gap: 16px; }
.metric { min-height: 148px; padding: 24px; }
.metric::after { display: none; }
.metric-label { color: var(--muted); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.metric strong { font-size: 30px; margin-top: 16px; letter-spacing: -.035em; }
.metric small { color: var(--muted); }
.dashboard-grid { grid-template-columns: minmax(0,1.4fr) minmax(300px,1fr); gap: 24px; margin-top: 24px; }
.dashboard-grid > section { min-width: 0; }
.dashboard-grid .catalog-grid { grid-template-columns: 1fr; }
.catalog-grid,.inventory-grid { gap: 16px; }
.catalog-item,.inventory-item { padding: 24px; }
.catalog-item p,.inventory-item p { font-size: 12px; line-height: 1.7; }
.catalog-meta .btn { margin-left: auto; }
.catalog-meta { align-items: center; }
.stock-low { color: var(--red); }
.empty { min-height: 180px; padding: 24px; }
.empty strong { color: var(--ink); font-size: 15px; }
.empty p { font-size: 12px; }
th,td { padding: 18px 20px; }
th { font-size: 11px; color: #756b61; font-weight: 650; letter-spacing: 0; text-transform: none; background: #f7f6f5; }
td { font-size: 12px; }
tbody tr:hover { background: #f7f6f5; }
.table-wrap { border-radius: 15px; }
.toolbar { gap: 16px; margin-bottom: 20px; }
.toolbar .field { min-width: 250px; }
.agenda-item { background: var(--white); border-color: var(--line); border-radius: 12px; grid-template-columns: 60px 4px minmax(0,1fr) auto; gap: 16px; padding: 18px; }
.agenda-hour { font-size: 15px; }
.agenda-copy strong { font-size: 13px; font-weight: 700; }
.agenda-copy span { font-size: 11px; line-height: 1.6; }
.row-actions { flex-wrap: wrap; align-items: center; }
.row-actions .btn { min-height: 40px; font-size: 10px; border-radius: 7px; }
.ranking { gap: 0; }
.rank-row { padding: 16px 0; grid-template-columns: 24px minmax(0,1fr) auto; }
.rank-row b { font-size: 12px; }
.rank-row strong { font-size: 13px; }
.rank-row .muted { font-size: 11px; }
#settings-form .rank-row { grid-template-columns: minmax(108px,1fr) 102px 102px; }
#settings-form .rank-row label { font-size: 12px; }
#settings-form input[type=time] { width: 100%; min-height: 40px; border: 1px solid #d2cdc7; border-radius: 7px; color: var(--ink); padding: 6px; background: #f8f8f7; font: inherit; font-size: 11px; }
input[type=checkbox] { accent-color: var(--forest); }
.report-grid { gap: 24px; }
.modal-backdrop { display: none; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; background: transparent; backdrop-filter: none; padding: 24px; color: var(--ink); }
.modal-backdrop[open] { display: grid; }
.modal-backdrop::backdrop { background: rgb(14 34 23 / .44); }
.modal { background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 80px rgb(14 34 23 / .18); max-height: calc(100dvh - 48px); overscroll-behavior: contain; }
.modal-head { padding: 20px 24px; }
.modal-head h2 { font-size: 19px; letter-spacing: -.03em; }
.modal form { padding: 24px; }
.modal-actions { gap: 12px; margin-top: 24px; }
.form-feedback { margin: 18px 24px 0; padding: 14px 16px; border-radius: 8px; background: #e6f1e7; color: #2b6848; font-size: 13px; line-height: 1.6; }
.form-feedback.error { background: #fae8e5; color: #8b2828; }
.form-feedback[hidden] { display: none; }
.view-loading { min-height: 650px; }
.view-loading > span { font-size: 12px; color: var(--muted); }
.skeleton { background: #ebe8e5; border-radius: 12px; }
.skeleton.heading { width: 36%; height: 34px; margin-top: 16px; }
.skeleton.numbers { height: 148px; margin-top: 28px; }
.skeleton.board { height: 400px; margin-top: 24px; }
.login-shell { padding: 0; background: var(--porcelain); grid-template-columns: 1fr 1fr; }
.login-story { border: 0; border-radius: 0; min-height: 100svh; background: var(--deep-forest); color: white; padding: 56px; }
.login-story::after { display: none; }
.login-story .brand-mark { background: #524940; }
.login-copy h1 { font-size: 64px; line-height: 1.1; letter-spacing: -.04em; max-width: 10ch; }
.login-copy h1 span { color: #d8d3cd; }
.login-copy p { font-size: 16px; color: #d5d0ca; line-height: 1.8; }
.login-copy .eyebrow { display: none; }
.login-points { gap: 20px; }
.login-points span { border: 0; padding: 0; color: #d5d0ca; font-size: 11px; background: none; }
.login-box .brand { color: var(--forest); font-size: 14px; }
.login-box h2 { font-size: 30px; letter-spacing: -.035em; margin-top: 34px; }
.login-box > p { font-size: 13px; }
.login-box { max-width: 380px; }
.login-box .btn { min-height: 48px; }
.login-foot { color: var(--muted); font-size: 11px; }
.booking-body { background: var(--porcelain); }
.booking-head .brand-mark { color: white; }
.booking-hero h1 { font-size: 48px; letter-spacing: -.04em; }
.booking-hero h1 span { color: var(--forest); }
.booking-hero > .eyebrow { display: none; }
.booking-hero > p { font-size: 14px; }
.step { background: #e5e2de; }
.step.active { background: var(--forest); box-shadow: none; }
.choice { background: #f9f9f8; border-color: #d9d3ce; border-radius: 10px; min-height: 86px; transition: background-color 160ms, border-color 160ms; }
.choice:hover,.choice.selected { background: #eeecea; border-color: var(--forest); }
.choice span { font-size: 12px; }
.slot { background: #f8f7f6; border-color: #d2cdc7; min-height: 44px; border-radius: 8px; }
.slot.selected { background: var(--forest); color: white; border-color: var(--forest); }
.booking-success .success-icon { background: #ebe9e6; color: var(--forest); }
@media (prefers-reduced-motion: no-preference) {
  .modal[open], .modal-backdrop[open] .modal { animation: dialog-in 220ms var(--motion-ease); }
  .revenue-chart > svg { animation: chart-in 450ms var(--motion-ease); transform-origin: center bottom; }
  @keyframes dialog-in { from { opacity: .6; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  @keyframes chart-in { from { opacity: .4; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
@media(min-width:1600px) { .main { padding-top: 36px; } .day-layout { grid-template-columns: minmax(0,1fr) 340px; } .schedule-row { padding-block: 18px; } .next-chair { padding: 30px; } }
@media(max-width:1250px) {
  .app-shell { grid-template-columns: 210px minmax(0,1fr); }
  .sidebar { width: 210px; }
  .sidebar-brand { padding: 0 16px; }
  .brand { font-size: 19px; }
  .nav { padding-inline: 12px; }
  .main { padding-inline: 24px; }
  .topbar { padding-inline: 24px; }
  .preview-label { display: inline; }
  .day-layout { grid-template-columns: minmax(0,1fr) 254px; gap: 18px; }
  .overview-numbers > * { padding-inline: 18px !important; }
  .overview-numbers strong { font-size: 24px; }
  .overview-numbers > * > span { font-size: 10px; }
  .schedule-row { grid-template-columns: 38px 28px minmax(80px,1fr) 80px 28px; gap: 8px; padding: 14px 20px; }
  .schedule-professional { display: none; }
  .card-head { padding-inline: 20px; }
  .card-head h2 { font-size: 15px; }
  .week-strip { padding-inline: 20px; gap: 6px; }
  .next-chair { padding: 22px; }
  .service-content { grid-template-columns: 1fr; gap: 20px; padding: 10px 24px 24px; }
  .service-donut { margin: auto; }
  .service-legend { grid-template-columns: 1fr 1fr; gap: 14px; }
  .insights-layout { grid-template-columns: minmax(0,1.4fr) minmax(260px,1fr); }
  .dashboard-grid { grid-template-columns: 1fr; }
  .agenda-item { grid-template-columns: 60px 4px minmax(0,1fr); }
  .agenda-item > .row-actions { grid-column: 3; }
}
@media(max-width:1040px) {
  .main { padding: 24px; }
  .day-layout { grid-template-columns: minmax(0,1fr) 240px; }
  .schedule-row { grid-template-columns: 36px minmax(90px,1fr) 80px 24px; }
  .schedule-row > .client-avatar { display: none; }
  .day-option { min-height: 80px; }
  .week-strip { gap: 4px; padding-inline: 16px; }
  .overview-numbers { grid-template-columns: repeat(2,1fr); row-gap: 24px; }
  .overview-numbers > :nth-child(2) { border-right: 0; }
  .insights-layout { grid-template-columns: 1fr; }
  .service-content { grid-template-columns: 136px 1fr; }
  .service-legend { grid-template-columns: 1fr; }
  .page-head h1 { font-size: 26px; }
  .page-actions .btn { font-size: 11px; }
  .day-board .text-link { font-size: 10px; }
  .day-board .text-link svg { display: none; }
}
@media(max-width:900px) {
  .app-shell { display: block; }
  .sidebar { inset: 0 auto 0 0; width: min(300px,calc(100vw - 40px)); transform: translateX(-105%); transition: transform 220ms var(--motion-ease); }
  .sidebar.open { transform: none; }
  .sidebar-scrim { display: block; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 70; background: rgb(14 34 23 / .44); border: 0; backdrop-filter: none; }
  .sidebar-brand { justify-content: space-between; }
  .close-menu { display: inline-grid; border: 0; background: none; }
  .content-shell { display: block; }
  .mobile-menu { display: inline-grid; border: 0; background: none; }
  .menu-open { overflow: hidden; }
  .topbar { height: 74px; padding: 0 20px; }
  .topbar-title { flex: 1; }
  .main { padding: 26px 24px; }
  .day-layout { grid-template-columns: minmax(0,1fr) 250px; }
  .page-head { flex-direction: row; align-items: center; }
  .page-actions { width: auto; }
}
@media(max-width:680px) {
  .topbar { height: 70px; padding: 0 12px; gap: 9px; }
  .shop-mark { display: none; }
  .topbar-title strong { font-size: 12px; }
  .topbar-title span { font-size: 10px; }
  .topbar-booking { padding: 0 10px; min-height: 40px; font-size: 10px; }
  .topbar-booking svg { display: none; }
  .main { padding: 24px 16px 28px; }
  .page-head { flex-direction: column; align-items: stretch; gap: 16px; margin-bottom: 20px; }
  .page-head h1 { font-size: 26px; }
  .page-head p:not(.eyebrow) { font-size: 12px; }
  .page-actions { width: 100%; }
  .page-actions .btn { flex: 1; min-height: 46px; font-size: 12px; }
  .overview-numbers { padding: 20px 0; row-gap: 24px; margin-bottom: 20px; }
  .overview-numbers > * { padding-inline: 16px !important; }
  .overview-numbers > * > span { font-size: 10px; gap: 5px; }
  .overview-numbers > * > span svg { width: 14px; height: 14px; }
  .overview-numbers strong { font-size: 24px; margin-top: 12px; }
  .overview-numbers small { font-size: 9px; line-height: 1.5; }
  .day-layout { grid-template-columns: 1fr; gap: 20px; }
  .day-board .card-head { padding: 20px 16px 18px; }
  .day-board .card-head h2 { font-size: 16px; }
  .day-board .card-head p { font-size: 11px; }
  .day-board .text-link { font-size: 10px; }
  .day-option { min-height: 78px; padding: 8px 2px; }
  .day-option span { font-size: 9px; }
  .day-option strong { font-size: 18px; }
  .day-option small { font-size: 8px; }
  .schedule-heading { padding: 12px 16px; }
  .schedule-row { padding: 16px; grid-template-columns: 38px minmax(0,1fr) 84px 24px; gap: 8px; }
  .schedule-row > .icon-btn { width: 28px; }
  .schedule-client strong { font-size: 11px; }
  .schedule-client > span { font-size: 10px; }
  .schedule-row > .badge { font-size: 9px; padding: 4px 6px; }
  .next-chair { padding: 24px; }
  .chair-time { font-size: 38px; }
  .chair-time > span { display: inline; margin-left: 16px; font-size: 12px; }
  .online-booking { padding: 4px 4px 0; }
  .online-booking h3 { font-size: 14px; }
  .online-booking p { font-size: 12px; }
  .insights-layout { gap: 20px; margin-top: 24px; }
  .insights-layout .card-head { padding: 20px 18px 16px; align-items: start; }
  .card-head h2 { font-size: 15px; }
  .card-head p { font-size: 11px; }
  .period-label { font-size: 9px; padding: 7px; }
  .revenue-total { padding-inline: 18px; }
  .revenue-chart { padding-inline: 18px; }
  .revenue-chart text { font-size: 12px; }
  .chart-data > div { grid-template-columns: repeat(3,1fr); }
  .service-content { grid-template-columns: 124px minmax(0,1fr); gap: 18px; padding: 10px 18px 26px; }
  .service-donut { width: 124px; height: 124px; }
  .service-legend li { font-size: 10px; }
  .dashboard-foot { align-items: start; gap: 20px; line-height: 1.7; }
  .dashboard-foot span { max-width: 25ch; text-align: right; }
  .metrics { grid-template-columns: 1fr 1fr; gap: 12px; }
  .metric { padding: 18px; min-height: 130px; }
  .metric-label { font-size: 11px; }
  .metric strong { font-size: 23px; overflow-wrap: anywhere; }
  .metric small { font-size: 10px; }
  .catalog-grid,.inventory-grid,.report-grid,.form-grid { grid-template-columns: 1fr; }
  .card-head { padding: 18px; flex-wrap: wrap; }
  .card-body { padding: 18px; }
  .toolbar { align-items: stretch; flex-direction: column; gap: 12px; }
  .toolbar .field { min-width: 0; }
  .toolbar .spacer { display: none; }
  .agenda-item { padding: 14px; gap: 12px; grid-template-columns: 40px 3px minmax(0,1fr); }
  .agenda-hour { font-size: 12px; }
  .agenda-copy strong { font-size: 12px; }
  .agenda-copy span { overflow-wrap: anywhere; }
  .row-actions .btn { min-height: 44px; }
  .agenda-item > .row-actions { grid-column: 1/-1; padding-top: 10px; border-top: 1px solid var(--line); justify-content: end; }
  .agenda-item .badge { margin-right: auto; }
  #settings-form .rank-row { grid-template-columns: minmax(90px,1fr) 86px 86px; gap: 6px; }
  .modal-backdrop { padding: 16px; }
  .modal { max-height: calc(100dvh - 32px); }
  .modal-head,.modal form { padding: 18px; }
  .modal-head h2 { font-size: 18px; }
  .field input,.field select,.field textarea { font-size: 16px; }
  .toast { bottom: max(20px,env(safe-area-inset-bottom)); right: 16px; left: 16px; max-width: none; }
  .login-shell { display: block; }
  .login-story { min-height: 260px; padding: 28px; border-radius: 0; }
  .login-copy h1 { font-size: 38px; margin-top: 28px; }
  .login-copy p,.login-points { display: none; }
  .login-panel { padding: 32px 24px; }
  .login-box h2 { margin-top: 24px; font-size: 27px; }
  .booking-hero h1 { font-size: 36px; }
  .booking-head { margin-bottom: 28px; align-items: start; }
  .booking-head .brand { font-size: 18px; }
  .booking-head small { max-width: 18ch; font-size: 10px; line-height: 1.6; text-align: right; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }