@layer reset, base, layout, components, responsive;
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  body, h1, h2, h3, p, ul { margin: 0; }
  button, input, textarea, select { font: inherit; }
  a { color: inherit; }
  svg { flex-shrink: 0; }
}
@layer base {
  :root {
    --canvas: #f7f6fa; --surface: #fff; --ink: #211d2e; --muted: #635e73;
    --subtle: #726b80; --line: #e8e4ef; --accent: #5e4195; --accent-hover: #483072;
    --plum: #231a35; --plum-muted: #c7badc; --lilac: #f0e8fb; --lilac-ink: #63458d;
    --sage: #e7f3ed; --sage-ink: #265941; --rose: #f9e9ee; --rose-ink: #8d3455;
    --blue: #eaf1fc; --blue-ink: #335986; --amber: #fff1d9; --amber-ink: #704d12;
    --round: 16px; --radius: 9px; --shadow: 0 4px 16px rgba(36,24,58,.035);
    --sidebar: 224px;
  }
  html { min-width: 280px; }
  body { background: var(--canvas); color: var(--ink); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; font-size: 15px; line-height: 1.5; }
  h1 { font-size: clamp(2rem, 4.3vw, 3.05rem); letter-spacing: -.047em; font-weight: 730; line-height: 1.08; overflow-wrap: anywhere; }
  h2 { font-size: clamp(1.16rem, 1.7vw, 1.42rem); letter-spacing: -.023em; line-height: 1.25; overflow-wrap: anywhere; }
  h3 { font-size: 1rem; }
  a { text-underline-offset: .18em; }
  :focus-visible { outline: 3px solid #8768c2; outline-offset: 3px; }
  .sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
  svg:not(.sprite) { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }
  .muted, .subtle, small { color: var(--muted); }
  .subtle { margin-top: 7px; }
  .note { white-space: pre-wrap; overflow-wrap: anywhere; }
  .skip { position: fixed; top: -60px; left: 16px; z-index: 30; background: var(--surface); padding: 10px; }
  .skip:focus { top: 12px; }
}
@layer layout {
  .shell { display: grid; grid-template-columns: var(--sidebar) minmax(0,1fr); min-height: 100vh; }
  .side { position: sticky; top: 0; height: 100dvh; overflow-y: auto; display: flex; flex-direction: column; background: var(--plum); color: #f7f3ff; padding: 24px 16px 16px; z-index: 5; }
  .brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-size: 24px; font-weight: 700; letter-spacing: -.035em; line-height: 1; padding-left: 5px; }
  .brand img { flex: none; }
  .brand small { display: block; margin-top: 6px; color: #d5c8e9; font-size: 9px; letter-spacing: .15em; font-weight: 650; }
  .side nav { display: grid; gap: 3px; margin-top: 30px; }
  .nav-label { display: block; color: #bcb1ce; font-size: 9px; letter-spacing: .12em; font-weight: 700; margin: 11px 9px 7px; }
  .side nav a { min-height: 43px; display: flex; align-items: center; gap: 10px; padding: 8px 10px; text-decoration: none; border-radius: 8px; color: #e7deef; font-size: 14px; font-weight: 550; }
  .side nav a svg { color: var(--plum-muted); width: 18px; height: 18px; }
  .side nav a:hover { background: #352647; }
  .side nav a.current { background: #493561; color: #fff; }
  .side nav a.current svg { color: #ead7ff; }
  .side-bottom { margin-top: auto; padding: 15px 8px 1px; color: var(--plum-muted); font-size: 12px; }
  .location-dot, .label-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #96c6ad; margin-right: 5px; }
  .label-dot { background: #8864c2; }
  .topbar { min-height: 62px; background: var(--surface); border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px clamp(16px,3.2vw,46px); position: relative; z-index: 8; }
  .crumb { font-size: 13px; color: var(--ink); font-weight: 650; }
  .crumb span { color: var(--muted); font-weight: 400; }
  .crumb-divider { margin-inline: 6px; }
  .account { position: relative; max-width: 60%; }
  .account summary { list-style: none; display: flex; align-items: center; justify-content: flex-end; gap: 9px; cursor: pointer; font-size: 13px; font-weight: 650; }
  summary::-webkit-details-marker { display: none; }
  .account summary::after { content: "⌄"; color: var(--muted); font-size: 15px; }
  .account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .account-popup { position: absolute; right: 0; top: calc(100% + 13px); min-width: 195px; max-width: min(70vw, 330px); overflow-wrap: anywhere; padding: 15px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 9px 28px #26193720; border-radius: 12px; }
  .account-popup p { margin: 3px 0 12px; color: var(--muted); font-size: 13px; }
  .content { max-width: 1580px; margin: 0 auto; padding: 31px clamp(16px,3.2vw,46px) 44px; }
  .intro { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; }
  .intro > div { min-width: 0; }
  .intro > .button { flex-shrink: 0; }
  .eyebrow { display: block; color: var(--accent); font-weight: 720; letter-spacing: .115em; font-size: 10px; margin-bottom: 7px; text-transform: uppercase; }
  .date-title span { color: #8976a2; padding: 0 4px; }
  .section-line { display: flex; align-items: baseline; gap: 12px; justify-content: space-between; margin: 0 0 9px; }
  .section-line > span { color: var(--muted); font-size: 12px; }
  .overview-grid { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: start; }
  .overview-grid.equal { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .spaced, .next-agenda { margin-top: 16px; }
  .tile-list { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit,minmax(min(100%, 275px),1fr)); margin-top: 14px; }
  .tile-list > .empty { grid-column: 1 / -1; }
}
@layer components {
  .button { min-height: 40px; border: 1px solid transparent; border-radius: var(--radius); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; font-size: 13px; font-weight: 670; text-decoration: none; line-height: 1.25; color: var(--ink); text-align: center; }
  .button svg { width: 17px; height: 17px; }
  .button.primary { color: #fff; background: var(--accent); box-shadow: 0 2px 4px #4a327225; }
  .button.primary:hover { background: var(--accent-hover); }
  .button.secondary { color: var(--ink); background: var(--surface); border-color: #ddd6e8; }
  .button.secondary:hover { background: #f3eef9; border-color: #cbbbdc; }
  .button.danger { background: var(--rose); color: var(--rose-ink); border-color: #e9c4d2; }
  .icon-button { width: 40px; font-size: 21px; padding: 1px 8px 5px; }
  .menu-toggle { display: none; }
  .text-link, .row-link, .back { color: var(--accent); font-weight: 680; text-decoration: none; overflow-wrap: anywhere; }
  .text-link { font-size: 13px; }
  .row-link { font-size: 15px; }
  .text-link:hover, .row-link:hover, .back:hover { text-decoration: underline; }
  .text-link svg { width: 15px; height: 15px; }
  .back { display: inline-block; margin-bottom: 16px; font-size: 13px; }
  .panel, .metric { border: 1px solid var(--line); border-radius: var(--round); background: var(--surface); box-shadow: var(--shadow); min-width: 0; }
  .padded, .tile, .edit-panel { padding: clamp(15px, 2.25vw, 24px); }
  .padded h2, .padded h3 { margin-bottom: 7px; }
  .panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 17px 19px 13px; }
  .panel-head.flush { padding: 0; margin-bottom: 11px; }
  .panel-head h2 { margin: 0; }
  .metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; margin: 0 0 15px; }
  .finance-metrics { grid-template-columns: repeat(auto-fit,minmax(min(100%, 150px),1fr)); }
  .metric { display: flex; flex-direction: column; padding: 14px 16px 13px; }
  .metric-top { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
  .metric-top > span, .metric > span { color: var(--muted); font-size: 13px; font-weight: 650; }
  .metric strong { font-size: clamp(1.4rem, 2.75vw, 2.15rem); line-height: 1.1; letter-spacing: -.045em; font-variant-numeric: tabular-nums; margin: 5px 0; overflow-wrap: anywhere; }
  .metric small { font-size: 11px; }
  .currency { font-size: .66em; color: var(--muted); }
  .metric i, .availability i, .empty-icon, .avatar { display: grid; flex: none; place-items: center; border-radius: 10px; width: 34px; height: 34px; font-style: normal; }
  .metric i svg, .availability i svg, .empty-icon svg { width: 17px; height: 17px; }
  .tone-lilac, .empty-icon, .avatar { background: var(--lilac); color: var(--lilac-ink); }
  .tone-sage { background: var(--sage); color: var(--sage-ink); }
  .tone-rose { background: var(--rose); color: var(--rose-ink); }
  .tone-blue { background: var(--blue); color: var(--blue-ink); }
  .avatar { font-weight: 700; }
  .period { display: flex; align-items: end; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
  .period > .message { flex-basis: 100%; }
  .segmented { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 10px; background: #f2eff7; }
  .segmented a { font-size: 13px; font-weight: 640; text-decoration: none; color: var(--muted); border-radius: 7px; padding: 5px 10px; white-space: nowrap; }
  .segmented a:hover { color: var(--accent-hover); }
  .segmented a.selected { background: var(--surface); box-shadow: 0 1px 4px #24143813; color: var(--accent-hover); }
  .agenda-row { margin-inline: 18px; display: grid; grid-template-columns: 68px minmax(0,1fr) auto; gap: 12px; text-decoration: none; align-items: center; border-top: 1px solid var(--line); padding: 11px 0; }
  .agenda-row:hover .agenda-main strong { color: var(--accent); text-decoration: underline; }
  .agenda-time { color: var(--accent); font-weight: 720; font-variant-numeric: tabular-nums; }
  .agenda-row small, .record small { display: block; margin-top: 2px; font-weight: 400; font-size: 12px; overflow-wrap: anywhere; }
  .agenda-main { min-width: 0; overflow-wrap: anywhere; }
  .badge { display: inline-flex; align-items: center; width: fit-content; padding: 4px 8px; border-radius: 8px; font-weight: 675; font-size: 11px; background: #efedf4; color: #5d536b; line-height: 1.3; }
  .status-planned { background: var(--lilac); color: var(--lilac-ink); }
  .status-confirmed { background: var(--blue); color: var(--blue-ink); }
  .status-arrived { background: #e0f3f3; color: #215d60; }
  .status-completed { background: var(--sage); color: var(--sage-ink); }
  .status-cancelled { background: var(--rose); color: var(--rose-ink); }
  .status-no_show { background: var(--amber); color: var(--amber-ink); }
  .availability { background: linear-gradient(145deg,#f3f0fb 0,#fff 62%); padding-bottom: 17px; }
  .availability > :not(.panel-head) { margin-inline: 19px; }
  .availability > .button, .availability > .text-link { margin-top: 12px; }
  .slot-date { color: var(--accent); font-weight: 680; }
  .slot-date strong { display: block; color: var(--ink); font-size: 2.25rem; line-height: 1.05; letter-spacing: -.05em; }
  .empty { padding: 26px 18px; text-align: center; }
  .empty.compact { padding: 16px 18px 22px; }
  .empty-icon { margin: 0 auto 8px; width: 38px; height: 38px; }
  .empty p { color: var(--muted); margin: 4px auto 0; max-width: 350px; font-size: 13px; }
  .field-stack { display: grid; gap: 15px; }
  .field-stack > .button { justify-self: start; }
  .field, .filter > label { display: grid; gap: 5px; min-width: 0; color: var(--ink); font-weight: 650; font-size: 13px; }
  fieldset.field { border: 1px solid var(--line); border-radius: 9px; padding: 9px 12px; }
  .field small { font-weight: 400; }
  .field :is(input:not([type="checkbox"]), select, textarea), .filter :is(input:not([type="checkbox"]), select) {
    min-height: 40px; width: 100%; max-width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid #d9d3e3; border-radius: 8px;
    color: var(--ink); background: #fff; font-size: 15px; font-weight: 400;
  }
  .field textarea { resize: vertical; }
  input[type="checkbox"] { width: 17px; height: 17px; margin: 0; accent-color: var(--accent); vertical-align: middle; }
  .field label:has(input[type="checkbox"]), .filter .checkbox { display: flex; align-items: center; gap: 8px; min-height: 40px; }
  .field.invalid :is(input,textarea,select) { border-color: #b95276; }
  .errorlist, .field-error { color: var(--rose-ink); margin: 0; padding-left: 18px; font-size: 13px; }
  .message .errorlist { padding-left: 15px; }
  .filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 9px; }
  .filter > label { min-width: min(132px,100%); }
  .filter > label:has(input[type="search"]) { flex: 1 1 200px; max-width: 440px; }
  .filter > .text-link { align-self: center; }
  .period-form { align-items: end; }
  .period-form > label { display: flex; align-items: center; gap: 4px; min-width: auto; }
  .period-form input[type="date"] { min-height: 36px; font-size: 13px; }
  .period-form > .button { min-height: 36px; }
  .edit-panel { max-width: 660px; }
  .actions { display: flex; gap: 8px; flex-wrap: wrap; }
  .divider { border-top: 1px solid var(--line); margin-top: 15px; padding-top: 14px; }
  .messages { display: grid; gap: 8px; margin-bottom: 14px; }
  .message { color: var(--sage-ink); background: var(--sage); border-radius: 9px; padding: 9px 13px; font-size: 13px; }
  .message.error { color: var(--rose-ink); background: var(--rose); }
  .record { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 15px; padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
  .record > :first-child { flex: 1 1 130px; min-width: 0; }
  .record-list { margin-top: 14px; }
  .record-main { display: flex; align-items: center; gap: 10px; }
  .record-main > div { min-width: 0; }
  .tile { display: flex; flex-direction: column; gap: 8px; }
  .tile p.eyebrow { margin-bottom: 0; }
  .tile .note { color: var(--muted); min-height: 19px; }
  .tile-meta, .tile-foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
  .tile-meta { margin-top: auto; }
  .tile-foot { border-top: 1px solid var(--line); padding-top: 11px; margin-top: 4px; }
  .standalone { margin-bottom: 3px; }
  .pages { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding-top: 14px; color: var(--muted); font-size: 12px; }
  .person-row { padding: 11px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; }
  .person-row > div { margin-bottom: 6px; }
  .person-row a { font-weight: 660; }
  .correction summary { color: var(--accent); cursor: pointer; font-size: 13px; }
  .correction button { margin-top: 5px; }
  .calendar-panel { overflow: hidden; }
  .calendar-tools { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: center; padding: 13px 16px; }
  .date-nav { display: flex; gap: 4px; }
  .calendar-filter { border-top: 1px solid var(--line); padding: 11px 16px; }
  .calendar-grid { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); border-top: 1px solid var(--line); }
  .mode-day { grid-template-columns: 1fr; }
  .cal-day { min-width: 0; min-height: 160px; padding: 8px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
  .cal-day:nth-child(7n), .mode-day .cal-day { border-right: 0; }
  .mode-month .cal-day { min-height: 94px; }
  .cal-day.outside { background: #f7f6fa; color: var(--muted); }
  .cal-day.is-today { background: #f7f2ff; }
  .cal-head { display: flex; align-items: center; justify-content: space-between; gap: 2px; padding-bottom: 6px; }
  .cal-head a { text-decoration: none; }
  .cal-head a:first-child { display: flex; align-items: center; gap: 4px; font-size: 12px; }
  .cal-head a:hover { text-decoration: underline; }
  .cal-head strong { color: var(--accent); font-size: 17px; }
  .cal-add { width: 25px; min-height: 25px; display: grid; place-items: center; font-weight: 700; color: var(--accent); border-radius: 6px; background: var(--lilac); flex: none; }
  .cal-items { display: grid; gap: 5px; }
  .cal-item, .cal-absence { display: grid; padding: 5px 6px; border-radius: 7px; text-decoration: none; font-size: 11px; min-width: 0; overflow-wrap: anywhere; }
  .cal-item:hover { text-decoration: underline; }
  .cal-item > small { font-size: 10px; color: inherit; }
  .cal-item > span { font-variant-numeric: tabular-nums; }
  .mode-day .cal-item { padding: 9px 12px; font-size: 14px; grid-template-columns: 115px 1fr auto; gap: 10px; align-items: center; }
  .mode-day .cal-item > small { font-size: 12px; }
  .cal-absence { background: #f4edf2; color: #6b425c; }
  .cal-count { display: none; }
  .chart { display: grid; gap: 7px; margin-top: 12px; }
  .chart-row { display: grid; grid-template-columns: 88px minmax(30px,1fr) minmax(65px,auto); align-items: center; gap: 9px; font-size: 12px; }
  .chart-row progress { width: 100%; height: 8px; border: 0; border-radius: 20px; background: var(--lilac); accent-color: var(--accent); }
  progress::-webkit-progress-bar { background: var(--lilac); border-radius: 20px; }
  progress::-webkit-progress-value { background: var(--accent); border-radius: 20px; }
  progress::-moz-progress-bar { background: var(--accent); border-radius: 20px; }
  .chart-row strong { text-align: right; }
  .guest { min-height: 100vh; display: grid; place-items: center; padding: clamp(12px,4vw,55px); }
  .login-layout { display: grid; grid-template-columns: 1.08fr 1fr; width: min(950px,100%); min-height: 490px; background: var(--surface); border: 1px solid var(--line); border-radius: 23px; overflow: hidden; box-shadow: 0 20px 60px #3a23581a; }
  .login-side { display: flex; flex-direction: column; justify-content: space-between; gap: 45px; position: relative; isolation: isolate; padding: clamp(23px,5vw,53px); color: #fff; background: radial-gradient(circle at 85% 86%,#5d4477,transparent 68%),var(--plum); overflow: hidden; }
  .login-side .brand { padding-left: 0; }
  .login-side .eyebrow, .login-side p { color: #e0d5ef; }
  .login-side p:not(.eyebrow) { margin-top: 13px; }
  .login-decoration { pointer-events: none; position: absolute; z-index: -1; width: 450px; height: 450px; right: -205px; top: -175px; border-radius: 50%; border: 1px solid #a891c94d; box-shadow: 0 0 0 22px #a891c917,0 0 0 48px #a891c917,0 0 0 73px #a891c912,0 0 0 100px #a891c912; }
  .login-form { align-self: center; padding: clamp(23px,5vw,54px); }
  .login-form h2 { font-size: clamp(1.8rem,4vw,2.6rem); margin-bottom: 9px; }
  .login-form form { margin-top: 21px; }
  .login-form form > button { justify-self: stretch; justify-content: space-between; }
  .error-page { max-width: 640px; margin: 15px auto; padding: 24px; }
  .error-page p:not(.eyebrow) { margin: 12px 0; }
}
@layer responsive {
  @media (max-width: 1050px) {
    :root { --sidebar: 190px; }
    .side { padding-inline: 12px; }
    .side nav a { font-size: 13px; }
    .mode-week .cal-head a:first-child { flex-direction: column; gap: 0; align-items: start; }
  }
  @media (max-width: 850px) {
    .overview-grid, .overview-grid.equal { grid-template-columns: 1fr; }
    .shell { display: block; }
    .side { display: none; position: fixed; z-index: 7; top: 60px; left: 0; height: calc(100dvh - 60px); width: min(86vw,285px); box-shadow: 0 14px 30px #24143860; }
    .menu-open .side, .side:focus-within { display: flex; }
    .side nav { margin-top: 14px; }
    .topbar { min-height: 60px; position: sticky; top: 0; }
    .menu-toggle { display: inline-flex; }
    .crumb { margin-right: auto; }
    .crumb span { display: none; }
    .calendar-tools { justify-content: flex-start; }
    .calendar-tools h2 { margin-right: auto; }
    .login-layout { min-height: 420px; }
  }
  @media (max-width: 620px) {
    .intro { align-items: flex-start; flex-direction: column; margin-bottom: 16px; }
    .content { padding-top: 19px; }
    .metrics { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
    .metric { padding: 10px; }
    .metric i { width: 26px; height: 26px; border-radius: 7px; }
    .metric i svg { width: 14px; height: 14px; }
    .section-line > span { font-size: 11px; }
    .agenda-row { margin-inline: 11px; grid-template-columns: 52px minmax(0,1fr); gap: 4px 9px; }
    .agenda-row .badge { grid-column: 2; }
    .period-form { width: 100%; }
    .period-form > label { flex: 1 1 108px; }
    .period-form > .button { min-height: 40px; }
    .calendar-tools { padding-inline: 11px; }
    .calendar-filter { padding-inline: 11px; }
    .mode-week { grid-template-columns: 1fr; }
    .mode-week .cal-day { min-height: 45px; border-right: 0; padding-inline: 11px; }
    .mode-week .cal-head a:first-child { flex-direction: row; align-items: center; gap: 6px; }
    .mode-week .cal-item { font-size: 13px; padding: 7px 10px; }
    .mode-month .cal-day { min-height: 63px; padding: 3px; }
    .mode-month .cal-head { justify-content: center; padding-bottom: 1px; }
    .mode-month .cal-head a:first-child { flex-direction: column; gap: 0; padding: 2px 5px; }
    .mode-month .cal-add, .mode-month .cal-items { display: none; }
    .mode-month .cal-count { display: block; margin-inline: auto; width: fit-content; min-width: 17px; background: var(--lilac); color: var(--accent-hover); border-radius: 10px; text-align: center; font-size: 10px; font-weight: 700; }
    .mode-day .cal-item { grid-template-columns: 1fr; gap: 2px; }
    .calendar-filter > label { flex: 1 1 120px; }
    .calendar-filter > label:first-of-type { flex-basis: 115px; }
    .login-layout { grid-template-columns: 1fr; max-width: 490px; }
    .login-side { gap: 19px; }
    .login-side h1 { font-size: 1.6rem; }
    .login-side p:not(.eyebrow) { margin-top: 6px; }
    .login-form form { margin-top: 13px; }
    .field :is(input:not([type="checkbox"]), textarea, select), .filter :is(input:not([type="checkbox"]), select) { font-size: 16px; }
  }
  @media (max-width: 365px) {
    .menu-toggle span, .account-name { display: none; }
    .calendar-tools { gap: 6px; }
    .segmented a { padding-inline: 7px; }
  }
}