:root {
      --frame: #0d4b3e;
      --frame-deep: #073a31;
      --frame-soft: #1d6253;
      --frame-ink: #f4f0e5;
      --canvas: #e8e5dc;
      --canvas-deep: #dcd8cd;
      --paper: #fbfaf5;
      --paper-raised: #fffefb;
      --paper-muted: #f2f0e8;
      --paper-alt: #eeeee8;
      --ink: #15201d;
      --ink-soft: #5e6a66;
      --line: #ccd2cc;
      --line-strong: #aeb9b2;
      --green: #08775e;
      --green-strong: #065e4b;
      --green-soft: #dceee7;
      --blue: #2f64b5;
      --blue-soft: #e3ecfb;
      --amber: #9a6b27;
      --amber-soft: #f4e9d5;
      --red: #a63c34;
      --red-soft: #f7e1de;
      --violet: #76558a;
      --violet-soft: #eee5f2;
      --shadow: 0 18px 48px rgb(24 47 40 / 14%);
      --shadow-small: 0 6px 18px rgb(24 47 40 / 10%);
      --radius-xl: 8px;
      --radius-lg: 6px;
      --radius-md: 4px;
      --radius-sm: 2px;
      --sans: "Aptos", "Trebuchet MS", sans-serif;
      --serif: "Iowan Old Style", "Palatino Linotype", Georgia, serif;
    }

    html[data-theme="dark"] {
      --canvas: #111916;
      --canvas-deep: #0c1311;
      --paper: #1c2723;
      --paper-raised: #24312c;
      --paper-muted: #17211e;
      --paper-alt: #202b27;
      --ink: #f2f0e8;
      --ink-soft: #b7c2bc;
      --line: #3a4943;
      --line-strong: #607069;
      --green: #43b995;
      --green-strong: #7ad1b6;
      --green-soft: #173d33;
      --blue: #8db7f2;
      --blue-soft: #233a5a;
      --amber: #e1b66f;
      --amber-soft: #4a3820;
      --red: #ef8f86;
      --red-soft: #512a28;
      --violet: #c4a5d4;
      --violet-soft: #423249;
      --shadow: 0 20px 55px rgb(0 0 0 / 32%);
      --shadow-small: 0 7px 20px rgb(0 0 0 / 24%);
    }

    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      overflow: hidden;
      background: var(--frame-deep);
      color: var(--ink);
      font-family: var(--sans);
      font-size: 15px;
      line-height: 1.4;
    }
    button, input, select, textarea { font: inherit; }
    button, select { cursor: pointer; }
    button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
      outline: 3px solid color-mix(in srgb, var(--blue) 60%, transparent);
      outline-offset: 2px;
    }
    button:disabled { cursor: not-allowed; opacity: .55; }
    h1, h2, h3, p { margin-top: 0; }
    h1, .display { font-family: var(--serif); font-weight: 600; letter-spacing: -.025em; }
    svg { width: 1.15em; height: 1.15em; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    .prototype-bar {
      height: 42px;
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 16px;
      color: #17332c;
      background: #d9d3c5;
      border-bottom: 1px solid #bdb6a6;
      position: relative;
      z-index: 80;
    }
    .prototype-label { display: flex; align-items: center; gap: 8px; min-width: max-content; font-size: 12px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
    .prototype-dot { width: 9px; height: 9px; border-radius: 50%; background: #b34b3f; box-shadow: 0 0 0 3px rgb(179 75 63 / 15%); }
    .prototype-note { color: #5d5c54; font-size: 12px; white-space: nowrap; }
    .prototype-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }
    .lab-field { display: flex; align-items: center; gap: 6px; }
    .lab-field label { color: #5d5c54; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
    .lab-select, .lab-button {
      min-height: 30px;
      border: 1px solid #aaa391;
      border-radius: 9px;
      background: #f5f1e7;
      color: #17332c;
      padding: 4px 9px;
      font-size: 12px;
      font-weight: 700;
    }
    .lab-button { display: inline-flex; align-items: center; gap: 6px; }

    .app-shell {
      height: calc(100vh - 42px);
      display: grid;
      grid-template-columns: 232px minmax(0, 1fr);
      background: var(--frame);
      padding: 10px 10px 10px 0;
    }
    .app-shell.auth-mode { grid-template-columns: minmax(0, 1fr); padding-left: 10px; }
    .app-shell.auth-mode .salon-rail { display: none; }

    .salon-rail {
      min-width: 0;
      color: var(--frame-ink);
      display: flex;
      flex-direction: column;
      padding: 22px 14px 14px;
      overflow: hidden;
    }
    .product-signature { display: flex; align-items: center; gap: 8px; margin: 0 8px 25px; color: #b8d7cc; font-size: 11px; letter-spacing: .17em; text-transform: uppercase; font-weight: 800; }
    .product-glyph { width: 28px; height: 28px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 25%); border-radius: 50%; color: #dbece6; }
    .salon-identity { margin: 0 8px 24px; padding-bottom: 19px; border-bottom: 1px solid rgb(255 255 255 / 18%); }
    .salon-identity h2 { margin: 0 0 8px; font-family: var(--serif); font-size: 27px; line-height: 1; font-weight: 600; }
    .salon-identity p { margin: 0; color: #b9d2c9; font-size: 12px; }
    .nav-group-label { margin: 0 10px 8px; color: #91b8aa; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
    .primary-nav { display: grid; gap: 4px; }
    .nav-button {
      width: 100%; min-height: 46px; padding: 0 12px; border: 0; border-radius: 12px;
      color: #dfece7; background: transparent; display: flex; align-items: center; gap: 12px;
      text-align: left; font-weight: 650;
    }
    .nav-button:hover { background: rgb(255 255 255 / 8%); }
    .nav-button.is-active { color: #fff; background: rgb(255 255 255 / 14%); box-shadow: inset 3px 0 0 #9bd7c3; }
    .nav-icon { width: 24px; height: 24px; display: grid; place-items: center; color: #aad2c3; }
    .nav-button.is-active .nav-icon { color: #fff; }
    .rail-spacer { flex: 1; }
    .location-card { margin-top: 16px; padding: 14px 12px; border-top: 1px solid rgb(255 255 255 / 16%); color: #dfece7; }
    .location-card span { color: #93b9ac; display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
    .location-card strong { display: block; margin-top: 4px; font-size: 13px; }
    .account-card { margin-top: 10px; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgb(0 0 0 / 12%); }
    .avatar { width: 34px; height: 34px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; color: #103d33; background: #f1eee4; font-family: var(--serif); font-weight: 700; }
    .account-card strong, .account-card small { display: block; }
    .account-card small { color: #abc7bd; font-size: 11px; }

    .workspace {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      border-radius: var(--radius-xl);
      overflow: hidden;
      background: var(--canvas);
      box-shadow: var(--shadow);
      border: 1px solid rgb(255 255 255 / 14%);
    }
    .workspace-header {
      position: relative;
      z-index: 15;
      display: grid;
      grid-template-columns: minmax(260px, 1fr) minmax(280px, 630px) auto;
      align-items: center;
      gap: 18px;
      min-height: 82px;
      padding: 14px 20px 14px 24px;
      background: color-mix(in srgb, var(--paper-raised) 93%, transparent);
      border-bottom: 1px solid var(--line);
      backdrop-filter: blur(16px);
    }
    .page-kicker { margin-bottom: 2px; color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
    .page-title-row { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
    .page-title-row h1 { margin: 0; font-size: clamp(25px, 2.1vw, 35px); line-height: 1.05; white-space: nowrap; }
    .page-context { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink-soft); font-size: 12px; }
    .global-search-wrap { position: relative; min-width: 0; }
    .global-search {
      width: 100%; min-height: 44px; padding: 0 44px 0 43px; border: 1px solid var(--line-strong); border-radius: 999px;
      color: var(--ink); background: var(--paper); box-shadow: inset 0 1px 0 rgb(255 255 255 / 45%);
    }
    .search-icon { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); color: var(--ink-soft); pointer-events: none; }
    .search-shortcut { position: absolute; right: 11px; top: 50%; transform: translateY(-50%); padding: 2px 6px; border-radius: 6px; color: var(--ink-soft); background: var(--paper-muted); border: 1px solid var(--line); font-size: 10px; }
    .search-result {
      position: absolute; left: 0; right: 0; top: calc(100% + 8px); z-index: 40; display: none;
      padding: 9px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper-raised); box-shadow: var(--shadow-small);
    }
    .search-result.is-visible { display: block; }
    .search-result button { width: 100%; min-height: 48px; border: 0; border-radius: 10px; padding: 8px 10px; text-align: left; color: var(--ink); background: transparent; }
    .search-result button:hover { background: var(--blue-soft); }
    .search-result strong, .search-result small { display: block; }
    .search-result small { color: var(--ink-soft); }
    .header-actions { display: flex; align-items: center; gap: 8px; }
    .button {
      min-height: 42px; border-radius: 11px; border: 1px solid var(--line-strong); padding: 0 14px;
      color: var(--ink); background: var(--paper-raised); display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: 750;
    }
    .button:hover { border-color: var(--green); }
    .button.primary { color: #fff; border-color: var(--green-strong); background: var(--green-strong); box-shadow: 0 4px 12px rgb(5 94 75 / 18%); }
    html[data-theme="dark"] .button.primary { color: #08261f; background: var(--green-strong); }
    .button.primary:hover { filter: brightness(1.08); }
    .button.blue { color: #fff; border-color: var(--blue); background: var(--blue); }
    html[data-theme="dark"] .button.blue { color: #142131; }
    .button.danger { color: var(--red); border-color: color-mix(in srgb, var(--red) 45%, var(--line)); background: var(--red-soft); }
    .button.ghost { background: transparent; }
    .button.compact { min-height: 33px; padding: 0 10px; font-size: 12px; }
    .icon-button { width: 42px; padding: 0; }

    .workspace-body { min-width: 0; min-height: 0; overflow: auto; padding: 18px; scroll-behavior: smooth; }
    .screen { min-height: 100%; animation: screen-in .26s ease both; }
    @keyframes screen-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
    @media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0s !important; transition-duration: 0s !important; } }

    .paper-surface {
      background:
        linear-gradient(rgb(255 255 255 / 15%), rgb(255 255 255 / 0%)),
        repeating-linear-gradient(90deg, transparent 0 31px, rgb(90 105 96 / 2%) 32px),
        var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius-lg);
      box-shadow: var(--shadow-small);
    }
    .section-card { padding: 18px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); }
    .section-card h2, .section-card h3 { margin-bottom: 4px; }
    .muted { color: var(--ink-soft); }
    .eyebrow { color: var(--green); font-size: 10px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
    .status-chip { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 3px 8px; border-radius: 999px; color: var(--ink); background: var(--paper-muted); font-size: 11px; font-weight: 750; }
    .status-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ink-soft); }
    .status-chip.confirmed::before { background: var(--green); }
    .status-chip.arrived::before { background: var(--violet); }
    .status-chip.pending::before { background: var(--amber); }
    .status-chip.cancelled::before, .status-chip.no-show::before { background: var(--red); }
    .status-chip.completed::before { background: #697672; }

    .metric-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
    .metric-card { min-height: 124px; padding: 17px; border-radius: 17px; background: var(--paper-raised); border: 1px solid var(--line); }
    .metric-card .metric-label { color: var(--ink-soft); font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
    .metric-card strong { display: block; margin: 7px 0 2px; font-family: var(--serif); font-size: 30px; line-height: 1; }
    .today-layout { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(285px, .8fr); gap: 14px; }
    .agenda-panel { overflow: hidden; }
    .card-head { min-height: 69px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 15px 18px; border-bottom: 1px solid var(--line); }
    .card-head h2 { margin: 0 0 2px; font-size: 18px; }
    .appointment-list { display: grid; }
    .appointment-row { width: 100%; min-height: 72px; display: grid; grid-template-columns: 64px 1fr auto; align-items: center; gap: 12px; padding: 10px 18px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
    .appointment-row:hover { background: var(--paper-muted); }
    .appointment-row:last-child { border-bottom: 0; }
    .appointment-row .time { font-weight: 850; font-variant-numeric: tabular-nums; }
    .appointment-row strong, .appointment-row small { display: block; }
    .appointment-row small { color: var(--ink-soft); }
    .attention-list { display: grid; gap: 9px; padding: 13px; }
    .attention-item { padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper-muted); }
    .attention-item strong, .attention-item span { display: block; }
    .attention-item span { margin-top: 3px; color: var(--ink-soft); font-size: 12px; }

    .empty-state { min-height: 420px; display: grid; place-items: center; text-align: center; padding: 40px 20px; }
    .empty-illustration { width: 170px; height: 90px; position: relative; margin: 0 auto 20px; overflow: hidden; border-bottom: 2px solid var(--line-strong); }
    .empty-illustration::before, .empty-illustration::after { content: ""; position: absolute; bottom: -38px; width: 105px; height: 85px; border: 1px solid var(--line-strong); transform: rotate(45deg); background: color-mix(in srgb, var(--green-soft) 55%, var(--paper)); }
    .empty-illustration::before { left: 7px; }
    .empty-illustration::after { right: 1px; bottom: -48px; }
    .empty-marmot { position: absolute; z-index: 2; left: 66px; bottom: -7px; width: 40px; height: 54px; border-radius: 48% 48% 30% 30%; background: #b18b5e; border: 2px solid #826641; }
    .empty-marmot::before { content: ""; position: absolute; left: 7px; top: -6px; width: 22px; height: 19px; border-radius: 50%; background: #b18b5e; border: 2px solid #826641; }
    .empty-marmot::after { content: ""; position: absolute; left: 19px; top: 0; width: 3px; height: 3px; border-radius: 50%; background: #1f211e; }
    .empty-state h2 { font-family: var(--serif); font-size: 25px; margin-bottom: 6px; }

    .day-shell { height: 100%; min-height: 560px; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden; }
    .day-toolbar { min-height: 54px; display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
    .date-stepper { display: flex; align-items: center; gap: 5px; }
    .date-button { min-width: 178px; }
    .day-summary { color: var(--ink-soft); font-size: 12px; }
    .day-summary strong { color: var(--ink); }
    .day-viewport { min-width: 0; min-height: 0; overflow: auto; background: var(--paper); }
    .day-grid { min-width: 1120px; height: 770px; display: grid; grid-template-columns: 70px repeat(var(--staff-count), minmax(122px, 1fr)); position: relative; }
    .time-column, .staff-column { position: relative; border-right: 1px solid var(--line); }
    .time-column { position: sticky; left: 0; z-index: 8; background: var(--paper-raised); }
    .column-head { height: 68px; position: sticky; top: 0; z-index: 7; display: flex; align-items: center; justify-content: center; padding: 8px; text-align: center; background: var(--paper-raised); border-bottom: 1px solid var(--line-strong); }
    .time-column .column-head { z-index: 10; color: var(--ink-soft); font-size: 10px; font-weight: 850; letter-spacing: .1em; }
    .staff-column:nth-child(odd) { background: var(--paper-alt); }
    .staff-column .column-head { justify-content: flex-start; gap: 8px; text-align: left; }
    .staff-avatar { width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--green-soft); color: var(--green-strong); font-family: var(--serif); font-weight: 750; }
    .staff-name { min-width: 0; }
    .staff-name strong, .staff-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .staff-name small { color: var(--ink-soft); font-size: 10px; }
    .grid-hours { position: absolute; top: 68px; bottom: 0; left: 0; right: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, transparent 0 calc(10% - 1px), var(--line) calc(10% - 1px) 10%); }
    .time-label { position: absolute; right: 10px; transform: translateY(-50%); color: var(--ink-soft); font-size: 11px; font-variant-numeric: tabular-nums; }
    .appointment-card {
      position: absolute; z-index: 3; left: 5px; right: 5px; min-height: 40px; overflow: hidden;
      padding: 6px 7px 5px 10px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 10px;
      color: var(--ink); background: var(--paper-raised); box-shadow: 0 2px 5px rgb(28 52 44 / 9%); text-align: left;
      transition: opacity .16s ease, transform .16s ease, box-shadow .16s ease;
    }
    .appointment-card:hover { z-index: 5; transform: translateY(-1px); box-shadow: 0 7px 16px rgb(28 52 44 / 17%); }
    .appointment-card.status-pending { border-left-color: var(--amber); }
    .appointment-card.status-arrived { border-left-color: var(--violet); }
    .appointment-card.status-completed { border-left-color: #6d7975; }
    .appointment-card.status-cancelled, .appointment-card.status-no-show { border-left-color: var(--red); }
    .appointment-card strong, .appointment-card span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .appointment-card strong { font-size: 12px; line-height: 1.2; }
    .appointment-card .appt-time { font-size: 10px; font-weight: 850; font-variant-numeric: tabular-nums; }
    .appointment-card .appt-service { color: var(--ink-soft); font-size: 10px; }
    .appointment-card.is-dimmed { opacity: .28; }
    .appointment-card.is-search-hit { z-index: 6; border-color: var(--blue); border-left-color: var(--blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 27%, transparent), 0 9px 22px rgb(38 73 126 / 20%); animation: hit-pulse .5s ease; }
    @keyframes hit-pulse { 50% { transform: scale(1.018); } }
    .appointment-card.is-selected { outline: 3px solid color-mix(in srgb, var(--blue) 40%, transparent); outline-offset: 1px; }
    .blocked-card { border-left-color: var(--blue); background: repeating-linear-gradient(135deg, var(--paper-muted), var(--paper-muted) 7px, var(--paper-raised) 7px, var(--paper-raised) 14px); }
    .now-line { position: absolute; z-index: 4; left: 0; right: 0; height: 1px; background: var(--red); pointer-events: none; }
    .now-line::before { content: "JETZT"; position: absolute; left: 2px; top: -9px; padding: 1px 4px; border-radius: 4px; color: white; background: var(--red); font-size: 8px; font-weight: 850; }
    .day-footer { min-height: 53px; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-top: 1px solid var(--line); background: var(--paper-raised); }
    .segment { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-muted); }
    .segment button { min-height: 33px; padding: 0 12px; border: 0; border-radius: 8px; color: var(--ink-soft); background: transparent; font-weight: 750; }
    .segment button.is-active { color: var(--blue); background: var(--blue-soft); }
    .legend { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 12px; color: var(--ink-soft); font-size: 10px; }
    .legend span { display: inline-flex; align-items: center; gap: 5px; }
    .legend i { width: 7px; height: 7px; border-radius: 50%; background: var(--green); }

    .filter-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .filter-select { min-height: 38px; padding: 0 11px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); background: var(--paper-raised); }
    .data-table { width: 100%; border-collapse: collapse; }
    .data-table th { padding: 11px 14px; color: var(--ink-soft); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; text-align: left; background: var(--paper-muted); border-bottom: 1px solid var(--line); }
    .data-table td { padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
    .data-table tbody tr { cursor: pointer; }
    .data-table tbody tr:hover { background: var(--paper-muted); }
    .data-table strong, .data-table small { display: block; }
    .data-table small { color: var(--ink-soft); }
    .table-wrap { overflow: auto; }

    .split-view { min-height: 560px; display: grid; grid-template-columns: minmax(280px, .8fr) minmax(420px, 1.3fr); overflow: hidden; }
    .split-list { border-right: 1px solid var(--line); overflow: auto; }
    .split-detail { overflow: auto; padding: 22px; background: var(--paper-raised); }
    .customer-row { width: 100%; padding: 13px 15px; display: grid; grid-template-columns: 38px 1fr auto; align-items: center; gap: 10px; border: 0; border-bottom: 1px solid var(--line); color: var(--ink); background: transparent; text-align: left; }
    .customer-row:hover, .customer-row.is-active { background: var(--blue-soft); }
    .customer-row strong, .customer-row small { display: block; }
    .customer-row small { color: var(--ink-soft); }
    .detail-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
    .detail-heading h2 { margin-bottom: 2px; font-family: var(--serif); font-size: 27px; }
    .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 16px 0; }
    .detail-stat { padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-muted); }
    .detail-stat span, .detail-stat strong { display: block; }
    .detail-stat span { color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
    .history-item { padding: 12px 0; border-bottom: 1px solid var(--line); }
    .history-item strong, .history-item small { display: block; }
    .history-item small { color: var(--ink-soft); }

    .people-grid, .service-grid, .admin-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .person-card, .service-card, .admin-card { padding: 16px; border: 1px solid var(--line); border-radius: 15px; background: var(--paper-raised); }
    .person-card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; }
    .person-card .avatar { background: var(--green-soft); color: var(--green-strong); }
    .person-card h3, .service-card h3, .admin-card h3 { margin: 0; font-size: 16px; }
    .person-card p, .service-card p, .admin-card p { color: var(--ink-soft); font-size: 12px; }
    .schedule-strip { display: flex; gap: 3px; margin-top: 12px; }
    .schedule-strip span { flex: 1; height: 24px; display: grid; place-items: center; border-radius: 5px; color: var(--ink-soft); background: var(--paper-muted); font-size: 9px; }
    .schedule-strip span.on { color: var(--green-strong); background: var(--green-soft); font-weight: 800; }
    .service-card { position: relative; }
    .service-price { position: absolute; right: 14px; top: 14px; font-weight: 850; font-variant-numeric: tabular-nums; }
    .service-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
    .assignment-list { display: flex; margin-top: 13px; }
    .mini-avatar { width: 27px; height: 27px; margin-right: -5px; display: grid; place-items: center; border: 2px solid var(--paper-raised); border-radius: 50%; color: var(--green-strong); background: var(--green-soft); font-size: 9px; font-weight: 800; }
    .admin-card { min-height: 150px; display: flex; flex-direction: column; }
    .admin-card .button { margin-top: auto; align-self: flex-start; }

    .onboarding-shell { min-height: 620px; display: grid; grid-template-columns: 280px minmax(0, 1fr); overflow: hidden; }
    .onboarding-progress { padding: 25px; color: var(--frame-ink); background: var(--frame); }
    .onboarding-progress .product-signature { margin-left: 0; }
    .onboarding-progress h2 { font-family: var(--serif); font-size: 30px; }
    .step-list { display: grid; gap: 9px; margin-top: 28px; }
    .step-button { width: 100%; min-height: 48px; display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 10px; border: 0; border-radius: 11px; padding: 8px 10px; color: #d9ebe5; background: transparent; text-align: left; }
    .step-button.is-active { background: rgb(255 255 255 / 14%); }
    .step-number { width: 26px; height: 26px; display: grid; place-items: center; border: 1px solid rgb(255 255 255 / 30%); border-radius: 50%; font-size: 11px; }
    .step-button.is-done .step-number { color: #063d31; background: #a8d5c5; border-color: #a8d5c5; }
    .onboarding-content { padding: clamp(26px, 5vw, 70px); display: grid; align-content: center; background: var(--paper); }
    .onboarding-content h1 { font-size: clamp(31px, 4vw, 48px); margin-bottom: 8px; }
    .progress-note { margin: 18px 0; padding: 12px; border-left: 3px solid var(--amber); background: var(--amber-soft); }
    .check-list { display: grid; gap: 9px; margin: 20px 0; }
    .check-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper-raised); }

    .auth-screen { min-height: 100%; display: grid; grid-template-columns: minmax(280px, .75fr) minmax(540px, 1.5fr); overflow: hidden; }
    .auth-brand { padding: clamp(28px, 5vw, 70px); display: flex; flex-direction: column; color: #f3efe4; background: linear-gradient(150deg, var(--frame-deep), var(--frame)); }
    .auth-brand .product-signature { margin-left: 0; }
    .auth-brand h1 { margin-top: auto; font-family: var(--serif); font-size: clamp(38px, 5vw, 64px); line-height: .98; }
    .auth-brand p { max-width: 340px; color: #bfd5cd; }
    .auth-brand small { margin-top: auto; padding-top: 30px; border-top: 1px solid rgb(255 255 255 / 18%); color: #a9c8bd; }
    .auth-stage { position: relative; display: grid; place-items: center; padding: 30px; overflow: hidden; background: var(--paper); }
    .auth-stage::before, .auth-stage::after { content: ""; position: absolute; bottom: -180px; width: 520px; height: 370px; transform: rotate(45deg); border: 1px solid var(--line); background: color-mix(in srgb, var(--green-soft) 40%, var(--paper)); opacity: .7; }
    .auth-stage::before { left: -120px; }
    .auth-stage::after { right: -100px; bottom: -220px; }
    .login-card { position: relative; z-index: 2; width: min(450px, 100%); padding: 36px; border: 1px solid var(--line); border-radius: 24px; background: color-mix(in srgb, var(--paper-raised) 95%, transparent); box-shadow: var(--shadow); }
    .login-card h2 { margin-bottom: 4px; font-family: var(--serif); font-size: 34px; text-align: center; }
    .login-card > p { text-align: center; color: var(--ink-soft); }
    .form-field { display: grid; gap: 6px; margin-top: 16px; }
    .form-field label { font-size: 12px; font-weight: 800; }
    .form-field input, .form-field textarea { width: 100%; min-height: 47px; padding: 10px 12px; border: 1px solid var(--line-strong); border-radius: 10px; color: var(--ink); background: var(--paper); }
    .login-card .button.primary { width: 100%; margin-top: 20px; }
    .prototype-disclosure { margin-top: 15px; color: var(--ink-soft); font-size: 10px; text-align: center; }

    .panel-backdrop { position: fixed; z-index: 90; inset: 42px 0 0; display: none; background: rgb(4 18 14 / 36%); backdrop-filter: blur(2px); }
    .panel-backdrop.is-open { display: block; }
    .context-panel {
      position: fixed; z-index: 100; top: 58px; right: 16px; bottom: 16px; width: min(455px, calc(100vw - 32px));
      display: none; grid-template-rows: auto minmax(0, 1fr) auto; overflow: hidden;
      color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px; box-shadow: 0 24px 80px rgb(0 0 0 / 28%);
    }
    .context-panel.is-open { display: grid; animation: panel-in .22s ease both; }
    @keyframes panel-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
    .panel-head { min-height: 74px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--line); }
    .panel-head h2 { margin: 1px 0 0; font-family: var(--serif); font-size: 24px; }
    .panel-body { min-height: 0; overflow: auto; padding: 17px; }
    .panel-footer { min-height: 68px; display: flex; align-items: center; justify-content: flex-end; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line); background: var(--paper-muted); }
    .appointment-hero { padding: 15px; border-radius: 14px; background: var(--green-soft); border: 1px solid color-mix(in srgb, var(--green) 30%, var(--line)); }
    .appointment-hero h3 { margin: 5px 0 2px; font-size: 20px; }
    .appointment-hero p { margin: 0; color: var(--ink-soft); }
    .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
    .fact { padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
    .fact span, .fact strong { display: block; }
    .fact span { color: var(--ink-soft); font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }
    .action-group { display: grid; gap: 8px; margin-top: 16px; }
    .action-row { min-height: 54px; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--paper-raised); text-align: left; }
    .action-row:hover { border-color: var(--green); background: var(--paper-muted); }
    .action-row strong, .action-row small { display: block; }
    .action-row small { color: var(--ink-soft); }
    .slot-list { display: grid; gap: 8px; margin-top: 14px; }
    .slot-button { width: 100%; min-height: 58px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 11px; color: var(--ink); background: var(--paper); text-align: left; }
    .slot-button:hover, .slot-button.is-selected { border-color: var(--blue); background: var(--blue-soft); }
    .slot-button strong, .slot-button small { display: block; }
    .slot-button small { color: var(--ink-soft); }
    .notice { margin: 13px 0; padding: 12px; border-radius: 11px; border-left: 4px solid var(--blue); background: var(--blue-soft); }
    .notice.warning { border-left-color: var(--amber); background: var(--amber-soft); }
    .notice.danger { border-left-color: var(--red); background: var(--red-soft); }
    .choice-list { display: grid; gap: 8px; margin-top: 12px; }
    .choice { display: flex; align-items: flex-start; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; }
    .visit-track { position: relative; display: grid; gap: 8px; margin-top: 15px; }
    .visit-step { display: grid; grid-template-columns: 30px 1fr; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 11px; background: var(--paper); }
    .visit-step-number { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; color: var(--ink-soft); background: var(--paper-muted); font-size: 11px; font-weight: 850; }
    .visit-step.is-current { border-color: var(--violet); background: var(--violet-soft); }
    .visit-step.is-current .visit-step-number { color: #fff; background: var(--violet); }
    html[data-theme="dark"] .visit-step.is-current .visit-step-number { color: #251b2a; }
    .visit-step.is-done .visit-step-number { color: #fff; background: var(--green); }
    .success-state { min-height: 400px; display: grid; place-items: center; text-align: center; padding: 30px; }
    .success-mark { width: 68px; height: 68px; display: grid; place-items: center; margin: 0 auto 15px; border-radius: 50%; color: #fff; background: var(--green); font-size: 27px; }
    .success-state h3 { font-family: var(--serif); font-size: 28px; margin-bottom: 7px; }
    .loading-line { height: 3px; overflow: hidden; border-radius: 999px; background: var(--line); }
    .loading-line::after { content: ""; display: block; width: 42%; height: 100%; background: var(--green); animation: loading 1s linear infinite; }
    @keyframes loading { from { transform: translateX(-110%); } to { transform: translateX(260%); } }

    .toast-region { position: fixed; z-index: 120; right: 24px; bottom: 24px; display: grid; gap: 8px; pointer-events: none; }
    .toast { min-width: 290px; max-width: 410px; padding: 13px 15px; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 12px; color: var(--ink); background: var(--paper-raised); box-shadow: var(--shadow-small); animation: toast-in .25s ease both; }
    @keyframes toast-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
    .toast strong, .toast small { display: block; }
    .toast small { margin-top: 2px; color: var(--ink-soft); }

    .mobile-nav { display: none; }

    @media (max-width: 1100px) {
      .app-shell { grid-template-columns: 184px minmax(0, 1fr); }
      .salon-identity h2 { font-size: 22px; }
      .workspace-header { grid-template-columns: minmax(210px, .7fr) minmax(260px, 1fr) auto; padding-left: 18px; gap: 10px; }
      .page-context { display: none; }
      .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .people-grid, .service-grid, .admin-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .prototype-note { display: none; }
    }

    @media (max-width: 760px) {
      body { overflow: hidden; }
      .prototype-bar { height: 50px; padding: 5px 8px; gap: 7px; }
      .prototype-label { display: none; }
      .prototype-controls { width: 100%; margin-left: 0; justify-content: space-between; gap: 5px; }
      .lab-field { flex: 1; }
      .lab-field label { display: none; }
      .lab-select { width: 100%; min-width: 0; }
      .app-shell, .app-shell.auth-mode { height: calc(100vh - 50px); grid-template-columns: 1fr; padding: 0; }
      .salon-rail { display: none; }
      .workspace { border-radius: 0; border: 0; box-shadow: none; }
      .workspace-header { grid-template-columns: 1fr auto; min-height: 68px; padding: 9px 12px; }
      .global-search-wrap { grid-column: 1 / -1; grid-row: 2; }
      .workspace-header:has(.global-search-wrap:not([hidden])) { grid-template-rows: auto auto; }
      .page-kicker { display: none; }
      .page-title-row h1 { font-size: 24px; }
      .header-actions .button span { display: none; }
      .header-actions .button { width: 40px; padding: 0; }
      .workspace-body { padding: 10px 10px 72px; }
      .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .metric-card { min-height: 102px; padding: 13px; }
      .metric-card strong { font-size: 25px; }
      .today-layout { grid-template-columns: 1fr; }
      .appointment-row { grid-template-columns: 50px 1fr; }
      .appointment-row .status-chip { grid-column: 2; justify-self: start; }
      .people-grid, .service-grid, .admin-grid { grid-template-columns: 1fr; }
      .split-view { grid-template-columns: 1fr; }
      .split-list { max-height: 240px; border-right: 0; border-bottom: 1px solid var(--line); }
      .split-detail { padding: 15px; }
      .detail-grid { grid-template-columns: 1fr 1fr; }
      .data-table th:nth-child(4), .data-table td:nth-child(4) { display: none; }
      .onboarding-shell { grid-template-columns: 1fr; }
      .onboarding-progress { padding: 18px; }
      .onboarding-progress h2 { font-size: 25px; }
      .step-list { display: flex; overflow: auto; margin-top: 15px; }
      .step-button { min-width: 140px; }
      .onboarding-content { padding: 25px 18px; }
      .auth-screen { grid-template-columns: 1fr; }
      .auth-brand { display: none; }
      .auth-stage { padding: 16px; }
      .login-card { padding: 24px 18px; }
      .panel-backdrop { inset: 50px 0 0; }
      .context-panel { top: auto; left: 0; right: 0; bottom: 0; width: 100%; max-height: calc(100vh - 70px); border-radius: 22px 22px 0 0; }
      .context-panel.is-open { animation-name: sheet-in; }
      @keyframes sheet-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
      .facts { grid-template-columns: 1fr 1fr; }
      .day-shell { min-height: calc(100vh - 210px); }
      .day-toolbar { flex-wrap: wrap; }
      .date-button { min-width: 140px; }
      .day-footer { position: sticky; bottom: 0; }
      .legend { display: none; }
      .mobile-nav { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; height: 62px; display: flex; gap: 3px; padding: 6px 7px; overflow-x: auto; color: var(--frame-ink); background: var(--frame-deep); border-top: 1px solid rgb(255 255 255 / 16%); }
      .mobile-nav .nav-button { min-width: 72px; min-height: 49px; padding: 4px 7px; flex-direction: column; justify-content: center; gap: 1px; font-size: 9px; }
      .mobile-nav .nav-icon { height: 18px; }
      .toast-region { left: 10px; right: 10px; bottom: 70px; }
      .toast { min-width: 0; max-width: none; }
    }
  
    :root {
      --surface-frame: var(--frame);
      --surface-frame-emphasis: var(--frame-deep);
      --surface-canvas: var(--canvas);
      --surface-work: var(--paper);
      --surface-raised: var(--paper-raised);
      --surface-subtle: var(--paper-muted);
      --surface-lane-alternate: var(--paper-alt);
      --surface-overlay: rgb(4 18 14 / 36%);
      --content-primary: var(--ink);
      --content-secondary: var(--ink-soft);
      --content-inverse: var(--frame-ink);
      --border-subtle: var(--line);
      --border-default: var(--line-strong);
      --focus-ring: var(--blue);
      --selection-ring: var(--blue);
      --search-hit-ring: var(--blue);
    }
    body { font-size: 16px; background: var(--surface-frame-emphasis); }
    h1, h2, h3, .display, .metric-card strong, .success-state h3, .staff-avatar, .avatar { font-family: var(--sans); }
    h1 { font-weight: 720; letter-spacing: -.025em; }
    .auth-brand h1, .login-card h2, .empty-state h2 { font-family: var(--serif); }
    .salon-identity h2 { font-family: var(--sans); font-size:25px; font-weight:720; letter-spacing:-.02em; }
    time,.time,.appt-time,.service-price,.metric-card strong,.fact strong,.data-table td:first-child,input[type="time"] { font-variant-numeric:tabular-nums; }
    .app-shell { background:var(--surface-frame); }
    .workspace { background:var(--surface-canvas); }
    .workspace-header { background:color-mix(in srgb,var(--surface-raised) 94%,transparent); }
    .paper-surface { background-color:var(--surface-work); }
    .context-panel,.login-card { background:var(--surface-raised); }
    .panel-backdrop { background:var(--surface-overlay); }
    .button:not(.primary):not(.danger):not(.blue):hover { border-color:var(--blue); }
    .button.primary { background:var(--green-strong); }
    .status-chip.cancelled::before { background:#737d79; }
    .status-chip.no-show::before { background:var(--red); }
    .appointment-card.status-cancelled { border-left-color:#737d79; opacity:.72; }
    .appointment-card.status-no-show { border-left-color:var(--red); }
    .blocked-card { border-left-color:#737d79; background:repeating-linear-gradient(135deg,var(--surface-subtle),var(--surface-subtle) 7px,var(--surface-work) 7px,var(--surface-work) 14px); }
    .screen { animation:none; }
    .workspace-body.is-navigating .screen { animation:screen-in .25s ease both; }
    .workspace-body.is-day { overflow:hidden; }
    .workspace-body.is-day .screen { height:100%; min-height:0; }
    .day-shell { height:100%; min-height:0; }
    .day-viewport-wrap { min-width:0; min-height:0; position:relative; overflow:hidden; }
    .day-viewport { width:100%; height:100%; min-width:0; min-height:0; overflow:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges; background:var(--surface-work); }
    .day-grid { min-width:0; }
    .staff-column:nth-child(odd) { background:var(--surface-lane-alternate); }
    .staff-avatar { width:32px; height:32px; font-family:var(--sans); font-weight:800; color:var(--content-primary); background:var(--surface-subtle); }
    .appointment-card { transition:opacity .14s ease,box-shadow .14s ease,border-color .14s ease; }
    .appointment-card:hover { transform:none; }
    .appointment-card strong { font-size:13px; line-height:1.25; }
    .appointment-card .appt-time { font-size:12px; }
    .appointment-card .appt-service { font-size:11px; }
    .appointment-card.is-search-hit { border-color:var(--search-hit-ring); border-left-color:var(--search-hit-ring); animation:hit-ring .5s ease; }
    @keyframes hit-ring { 50% { box-shadow:0 0 0 5px color-mix(in srgb,var(--search-hit-ring) 20%,transparent),0 9px 22px rgb(38 73 126 / 20%); } }
    .scroll-hint { position:absolute; z-index:12; top:50%; width:34px; height:78px; display:none; place-items:center; border:1px solid var(--border-default); color:var(--blue); background:color-mix(in srgb,var(--surface-raised) 94%,transparent); box-shadow:var(--shadow-small); }
    .scroll-hint.is-visible { display:grid; }
    .scroll-hint.left { left:76px; border-radius:0 12px 12px 0; }
    .scroll-hint.right { right:5px; border-radius:12px 0 0 12px; }
    .staff-range { margin-left:auto; min-width:max-content; padding:4px 8px; border-radius:999px; color:var(--content-secondary); background:var(--surface-subtle); font-size:12px; font-variant-numeric:tabular-nums; }
    .context-panel.is-open { animation:panel-context-in .22s ease both; }
    @keyframes panel-context-in { from { opacity:.45; transform:translate(var(--panel-from-x,18px),var(--panel-from-y,0)) scale(.96); transform-origin:var(--panel-origin-x,100%) var(--panel-origin-y,50%); } to { opacity:1; transform:none; } }
    @media (max-width:760px) { .day-shell{min-height:0} .scroll-hint{height:62px} .context-panel.is-open{animation-name:sheet-in} }


    /* ==================================================================
       HORIZONTAL RESOURCE TIMELINE · Zeit → / Menschen ↓
       ================================================================== */
    :root {
      --timeline-staff-rail: 218px;
      --timeline-header-height: 62px;
    }

    .timeline-shell { min-height: 0; }
    .mobile-staff-switcher { display: none; }
    .timeline-shell .day-toolbar { position: relative; z-index: 30; background: var(--surface-raised); }
    .timeline-viewport { position: relative; width: 100%; height: 100%; overflow: auto; scrollbar-gutter: stable; scroll-padding: 76px 24px 28px var(--timeline-staff-rail); }
    .resource-timeline { position: relative; width: calc(var(--timeline-staff-rail) + var(--timeline-width)); min-height: 100%; background: var(--surface-work); }
    .timeline-header-row, .resource-row { display: grid; grid-template-columns: var(--timeline-staff-rail) var(--timeline-width); width: 100%; }
    .timeline-header-row { position: sticky; top: 0; z-index: 22; height: var(--timeline-header-height); }
    .timeline-corner { position: sticky; left: 0; z-index: 32; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; color: var(--content-secondary); background: color-mix(in srgb, var(--surface-raised) 97%, transparent); border-right: 1px solid var(--border-default); border-bottom: 1px solid var(--border-default); box-shadow: 8px 0 20px rgb(22 43 36 / 7%); backdrop-filter: blur(16px); }
    .timeline-corner span { font-size: 11px; font-weight: 850; letter-spacing: .10em; text-transform: uppercase; }
    .timeline-corner small { color: var(--green); font-size: 10px; font-weight: 800; }
    .time-ruler { position: relative; width: var(--timeline-width); height: var(--timeline-header-height); background: color-mix(in srgb, var(--surface-raised) 97%, transparent); border-bottom: 1px solid var(--border-default); backdrop-filter: blur(16px); }
    .time-ruler-tick { position: absolute; bottom: 0; width: 1px; height: 10px; background: var(--border-subtle); }
    .time-ruler-tick.is-half { height: 15px; background: var(--border-default); }
    .time-ruler-tick.is-hour { height: 22px; background: var(--border-default); }
    .time-ruler-tick strong { position: absolute; left: 0; bottom: 27px; transform: translateX(-50%); color: var(--content-primary); font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; }
    .time-ruler-tick:first-child strong { transform: none; }
    .time-ruler-tick:last-child strong { transform: translateX(-100%); }

    .resource-row { position: relative; border-bottom: 1px solid var(--border-subtle); }
    .resource-label { position: sticky; left: 0; z-index: 14; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 10px 13px; background: var(--surface-raised); border-right: 1px solid var(--border-default); box-shadow: 8px 0 20px rgb(22 43 36 / 6%); }
    .resource-row.is-alternate .resource-label { background: color-mix(in srgb, var(--surface-raised) 88%, var(--surface-subtle)); }
    .resource-label .staff-avatar { width: 34px; height: 34px; flex: 0 0 auto; font-size: 11px; }
    .resource-label .staff-name { min-width: 0; }
    .resource-label strong, .resource-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .resource-label strong { font-size: 13px; }
    .resource-label small { margin-top: 2px; color: var(--content-secondary); font-size: 10px; }

    .resource-track { position: relative; width: var(--timeline-width); height: 100%; overflow: hidden; cursor: cell; outline-offset: -3px; background-color: var(--surface-work); background-image: linear-gradient(to right, color-mix(in srgb, var(--border-default) 75%, transparent) 1px, transparent 1px), linear-gradient(to right, color-mix(in srgb, var(--border-subtle) 44%, transparent) 1px, transparent 1px); background-size: var(--hour-width) 100%, var(--quarter-width) 100%; }
    .resource-row.is-alternate .resource-track { background-color: var(--surface-lane-alternate); }
    .resource-track:hover { background-color: color-mix(in srgb, var(--green-soft) 18%, var(--surface-work)); }
    .resource-track:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus-ring) 50%, transparent); }

    .timeline-appointment { position: absolute; z-index: 5; right: auto; min-height: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; align-content: center; column-gap: 7px; padding: 6px 9px 6px 10px; border-radius: 9px; text-align: left; }
    .timeline-appointment .appointment-initials { display: none; grid-row: 1 / 3; width: 26px; height: 26px; place-items: center; align-self: center; border-radius: 50%; color: var(--content-primary); background: var(--surface-subtle); font-size: 9px; font-weight: 850; }
    .timeline-appointment .appt-time { grid-column: 1; grid-row: 1; color: var(--content-secondary); font-size: 10px; }
    .timeline-appointment strong { grid-column: 2; grid-row: 1; align-self: end; font-size: 12px; }
    .timeline-appointment .appt-service { grid-column: 1 / 3; grid-row: 2; font-size: 10px; }
    .timeline-appointment.is-compact { display: flex; align-items: center; gap: 6px; padding-inline: 7px; }
    .timeline-appointment.is-compact .appointment-initials { display: grid; flex: 0 0 auto; }
    .timeline-appointment.is-compact .appt-time, .timeline-appointment.is-compact .appt-service { display: none; }
    .timeline-appointment.is-compact strong { font-size: 10px; }
    .timeline-appointment.is-micro strong { display: none; }
    .timeline-appointment.is-micro .appointment-initials { display: grid; }

    .timeline-now-line { position: absolute; z-index: 12; top: var(--timeline-header-height); bottom: 0; width: 1px; background: var(--red); pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 18%, transparent); }
    .timeline-now-line span { position: absolute; top: -25px; left: 0; transform: translateX(-50%); padding: 2px 6px; border-radius: 999px; color: white; background: var(--red); font-size: 9px; font-weight: 850; font-variant-numeric: tabular-nums; }
    .timeline-scroll-hint { top: calc(var(--timeline-header-height) + 42%); }
    .timeline-scroll-hint.left { left: var(--timeline-staff-rail); }

    /* Empty state reserves a low, viewport-bound habitat. It is not tied to a clock position. */
    .timeline-is-empty .timeline-viewport { padding-bottom: 132px; }
    .timeline-is-empty .timeline-now-line { bottom: 132px; }
    .timeline-shell.is-empty .legend { visibility: hidden; }
    .timeline-empty-habitat { position: absolute; z-index: 18; left: var(--timeline-staff-rail); right: 0; bottom: 0; height: 132px; overflow: hidden; pointer-events: none; background: linear-gradient(to bottom, transparent 0 18%, color-mix(in srgb, var(--surface-work) 82%, transparent) 60%, color-mix(in srgb, #ddd1b9 34%, var(--surface-work)) 100%); border-top: 1px solid color-mix(in srgb, var(--border-subtle) 70%, transparent); }
    .empty-habitat-copy { position: absolute; z-index: 5; top: 15px; left: 35%; transform: translateX(-50%); display: grid; gap: 2px; text-align: center; white-space: nowrap; }
    .empty-habitat-copy strong { color: var(--content-primary); font-size: 13px; }
    .empty-habitat-copy span { color: var(--content-secondary); font-size: 10px; }
    .empty-habitat-landscape { position: absolute; inset: 24px 0 0; width: 100%; height: calc(100% - 24px); }
    .habitat-ridge-far { fill: color-mix(in srgb, var(--green-soft) 24%, var(--surface-work)); opacity: .42; }
    .habitat-ridge-near { fill: color-mix(in srgb, #b2aa91 28%, var(--surface-work)); opacity: .62; }
    .habitat-flora { fill: #7c83ae; stroke: #7b846c; stroke-width: 2; stroke-linecap: round; opacity: .66; }
    .habitat-flora circle { stroke: none; }
    .habitat-marmot { position: absolute; z-index: 7; left: 58%; bottom: 12px; width: 130px; transform: translateX(-50%); filter: drop-shadow(0 9px 13px rgb(43 45 36 / 13%)); animation: habitat-breathe 7s ease-in-out infinite; transform-origin: 50% 100%; }
    .habitat-edge { position: absolute; z-index: 8; left: 0; right: 0; bottom: 0; height: 19px; background: linear-gradient(180deg, color-mix(in srgb, #cbbd9f 30%, var(--surface-work)), color-mix(in srgb, #968f79 20%, var(--surface-work))); border-top: 1px solid color-mix(in srgb, var(--border-default) 55%, transparent); }
    @keyframes habitat-breathe { 0%,100% { transform: translateX(-50%) translateY(0) scale(1); } 50% { transform: translateX(-50%) translateY(-1px) scale(1.006); } }

    /* Login remains product-first; the world is confined to the lower third. */
    .alpine-auth-screen { background: var(--surface-work); }
    .alpine-auth-brand { position: relative; background: radial-gradient(circle at 20% 14%, rgb(143 184 164 / 11%), transparent 42%), linear-gradient(155deg, var(--frame), var(--frame-deep)); }
    .auth-brand-copy { margin-top: auto; }
    .auth-brand-kicker { margin-bottom: 19px; color: #a8cfc0; font-size: 10px; font-weight: 850; letter-spacing: .20em; }
    .alpine-auth-stage::before, .alpine-auth-stage::after { display: none; }
    .alpine-auth-stage { isolation: isolate; background: radial-gradient(circle at 58% 27%, color-mix(in srgb, var(--surface-raised) 45%, transparent), transparent 36%), var(--surface-work); }
    .login-world { position: absolute; z-index: 0; inset: auto 0 0; height: 38%; overflow: hidden; opacity: .72; pointer-events: none; }
    .login-ridge { position: absolute; bottom: -38%; width: 70%; height: 110%; border-radius: 50% 50% 0 0; background: color-mix(in srgb, var(--green-soft) 35%, var(--surface-work)); }
    .login-ridge-far { left: -12%; bottom: -56%; opacity: .54; transform: rotate(5deg); }
    .login-ridge-near { right: -15%; bottom: -49%; opacity: .7; transform: rotate(-5deg); }
    .login-observer { position: absolute; left: 4%; bottom: -4%; width: min(31vw, 390px); max-height: 96%; object-fit: contain; object-position: bottom left; filter: drop-shadow(0 18px 24px rgb(41 47 37 / 15%)); }
    .login-flora { position: absolute; bottom: 8%; width: 46px; height: 80px; border-left: 2px solid #7b846c; transform-origin: bottom; opacity: .56; }
    .login-flora::before, .login-flora::after { content: ""; position: absolute; width: 10px; height: 10px; border-radius: 50% 50% 45% 55%; background: #7f86b1; }
    .login-flora::before { left: -6px; top: 9px; }
    .login-flora::after { left: 9px; top: 31px; }
    .login-flora-a { left: 3%; transform: rotate(-7deg); }
    .login-flora-b { right: 6%; transform: rotate(8deg) scale(.8); }
    .alpine-login-card { z-index: 3; width: min(440px, 100%); }
    .login-product { display: flex; align-items: center; justify-content: center; gap: 10px; margin-bottom: 22px; }
    .login-product-mark { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--border-default); border-radius: 50%; color: var(--green-strong); background: var(--green-soft); font-weight: 850; }
    .login-product strong, .login-product small { display: block; }
    .login-product strong { color: var(--green-strong); }
    .login-product small { color: var(--content-secondary); font-size: 10px; }
    .login-actions { display: flex; justify-content: flex-end; margin-top: 9px; }
    .text-action, .magic-link { border: 0; color: var(--green); background: transparent; font-weight: 750; }
    .text-action { font-size: 11px; }
    .magic-link { width: 100%; min-height: 38px; }
    .login-divider { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 17px 0 6px; color: var(--content-secondary); font-size: 10px; }
    .login-divider::before, .login-divider::after { content: ""; height: 1px; background: var(--border-subtle); }

    .success-alpine-accent { width: 150px; height: 102px; margin: 0 auto -9px; display: grid; place-items: end center; overflow: hidden; }
    .success-alpine-accent img { width: 148px; max-height: 115px; object-fit: contain; object-position: bottom; }
    .success-state .success-mark { position: relative; z-index: 2; }

    /* Abendsalon: warm, muted, never black. */
    html[data-theme="dark"] {
      --frame: #173f36; --frame-deep: #132e28; --frame-soft: #2b5549; --frame-ink: #f3ecdf;
      --canvas: #272e2b; --canvas-deep: #202622; --paper: #303633; --paper-raised: #3a403c; --paper-muted: #292f2c; --paper-alt: #343936;
      --ink: #f1ece1; --ink-soft: #bbb5a9; --line: #4b5550; --line-strong: #626d67;
      --green: #8fb8a4; --green-strong: #a6c8b7; --green-soft: #354940;
      --blue: #9aa8d2; --blue-soft: #363f55; --amber: #d2ac6b; --amber-soft: #4a3d2d;
      --red: #dd9b93; --red-soft: #503233; --violet: #bda7c4; --violet-soft: #443a48;
      --shadow: 0 26px 72px rgb(9 26 21 / 36%); --shadow-small: 0 9px 26px rgb(9 26 21 / 24%);
      --surface-overlay: rgb(11 22 18 / 60%);
    }
    html[data-theme="dark"] .workspace-header, html[data-theme="dark"] .day-toolbar { background: rgb(58 64 60 / 94%); }
    html[data-theme="dark"] .button.primary { color: #173028; background: var(--green-strong); border-color: #b7d2c5; filter: none; }
    html[data-theme="dark"] .button.primary:hover { background: #b2cfbf; filter: none; }
    html[data-theme="dark"] .timeline-corner, html[data-theme="dark"] .time-ruler, html[data-theme="dark"] .resource-label { background: rgb(58 64 60 / 97%); }
    html[data-theme="dark"] .resource-track { background-color: var(--paper); }
    html[data-theme="dark"] .resource-row.is-alternate .resource-track { background-color: var(--paper-alt); }
    html[data-theme="dark"] .timeline-empty-habitat { background: linear-gradient(to bottom, transparent, #313832 54%, #39372f 100%); }
    html[data-theme="dark"] .habitat-ridge-far { fill: #7f8b83; opacity: .16; }
    html[data-theme="dark"] .habitat-ridge-near { fill: #51554c; opacity: .58; }
    html[data-theme="dark"] .habitat-marmot, html[data-theme="dark"] .login-observer, html[data-theme="dark"] .success-alpine-accent img { filter: brightness(.76) saturate(.66) sepia(.07) contrast(.96); }
    html[data-theme="dark"] .habitat-edge { background: linear-gradient(180deg, #3a3a32, #30332e); }
    html[data-theme="dark"] .alpine-auth-stage { background: radial-gradient(circle at 58% 32%, #3b423e 0 16%, #313835 56%, #272d2a 100%); }
    html[data-theme="dark"] .alpine-login-card { background: rgb(58 64 60 / 96%); border-color: rgb(216 205 187 / 14%); }

    @media (max-width: 760px) {
      :root { --timeline-staff-rail: 148px; }
      .mobile-staff-switcher { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 9px; }
      .mobile-staff-switcher span { color: var(--content-secondary); font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
      .mobile-staff-switcher .filter-select { width: 100%; min-height: 33px; }
      .timeline-corner, .resource-label { padding-inline: 9px; }
      .resource-label .staff-avatar { width: 28px; height: 28px; }
      .resource-label strong { font-size: 11px; }
      .resource-label small { display: none; }
      .timeline-empty-habitat { left: var(--timeline-staff-rail); height: 116px; }
      .timeline-is-empty .timeline-viewport { padding-bottom: 116px; }
      .empty-habitat-copy span { display: none; }
      .habitat-marmot { width: 126px; }
      .auth-brand { display: none; }
      .login-observer { left: -3%; width: 250px; opacity: .72; }
      .alpine-login-card { padding: 23px 18px; }
    }



    /* ==================================================================
       HYBRID DAY PLAN · full-day overview + horizontal 2-hour workspace
       ================================================================== */
    :root {
      --hybrid-time-rail: 58px;
      --hybrid-staff-rail: 218px;
      --hybrid-overview-height: 176px;
      --hybrid-work-header: 56px;
    }

    .workspace-header { z-index: 90; }
    .search-result { z-index: 130; }

    .hybrid-day-shell {
      min-height: 0;
      display: grid;
      grid-template-rows: auto minmax(0, 1fr) auto;
      overflow: hidden;
    }

    .hybrid-day-shell .day-toolbar {
      position: relative;
      z-index: 45;
      min-height: 54px;
      background: var(--surface-raised);
    }

    .hybrid-toolbar-spacer { flex: 1; }
    .hybrid-focus-chip {
      min-width: max-content;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      padding: 5px 10px;
      border-radius: 999px;
      color: var(--green-strong);
      background: var(--green-soft);
      font-size: 10px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }
    .hybrid-focus-chip::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: currentColor;
      box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
    }
    .hybrid-focus-chip.is-manual { color: var(--blue); background: var(--blue-soft); }

    .hybrid-day-body {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: minmax(0, 1fr);
      overflow: hidden;
      background: var(--surface-work);
    }

    /* Full-day overview: the familiar vertical calendar is retained as the map. */
    .day-overview-section {
      position: relative;
      z-index: 16;
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: 34px minmax(0, 1fr);
      border-bottom: 1px solid var(--border-default);
      background: var(--surface-work);
      box-shadow: 0 9px 24px rgb(22 43 36 / 7%);
    }
    .hybrid-day-shell.is-overview .day-overview-section { border-bottom: 0; box-shadow: none; }

    .overview-bar {
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 0 12px;
      color: var(--content-secondary);
      background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
      border-bottom: 1px solid var(--border-subtle);
    }
    .overview-bar strong { color: var(--content-primary); font-size: 11px; }
    .overview-bar span { font-size: 10px; }
    .overview-bar .overview-hint { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .overview-window-label {
      margin-left: auto;
      min-width: max-content;
      padding: 3px 8px;
      border-radius: 999px;
      color: var(--blue);
      background: var(--blue-soft);
      font-size: 9px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }

    .overview-viewport {
      position: relative;
      min-width: 0;
      min-height: 0;
      overflow: hidden;
      background: var(--surface-work);
    }
    .overview-grid {
      position: relative;
      width: 100%;
      height: 100%;
      display: grid;
      grid-template-columns: var(--hybrid-time-rail) repeat(var(--overview-staff-count), minmax(96px, 1fr));
      background: var(--surface-work);
    }
    .overview-time-column,
    .overview-staff-column {
      position: relative;
      min-width: 0;
      border-right: 1px solid color-mix(in srgb, var(--border-subtle) 74%, transparent);
    }
    .overview-time-column {
      z-index: 5;
      background: var(--surface-raised);
      box-shadow: 7px 0 16px rgb(22 43 36 / 5%);
    }
    .overview-staff-column:nth-child(even) { background: var(--surface-lane-alternate); }
    .overview-column-head {
      position: absolute;
      z-index: 8;
      top: 0;
      right: 0;
      left: 0;
      height: 28px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      padding: 3px 5px;
      color: var(--content-primary);
      background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
      border-bottom: 1px solid var(--border-subtle);
      font-size: 9px;
      font-weight: 780;
      overflow: hidden;
    }
    .overview-time-column .overview-column-head {
      color: var(--content-secondary);
      font-size: 8px;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .overview-avatar {
      width: 19px;
      height: 19px;
      flex: 0 0 auto;
      display: grid;
      place-items: center;
      border-radius: 50%;
      color: var(--content-primary);
      background: var(--surface-subtle);
      font-size: 7px;
      font-weight: 850;
    }
    .overview-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .overview-body {
      position: absolute;
      top: 28px;
      right: 0;
      bottom: 0;
      left: 0;
      cursor: crosshair;
      background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--line-strong) 82%, transparent) 1.35px, transparent 1.35px),
        linear-gradient(to bottom, color-mix(in srgb, var(--line) 64%, transparent) 1px, transparent 1px);
      background-size: 100% 20%, 100% 5%;
    }
    .overview-body:hover { background-color: color-mix(in srgb, var(--green-soft) 12%, transparent); }
    .overview-time-label {
      position: absolute;
      right: 7px;
      transform: translateY(-50%);
      color: var(--content-secondary);
      font-size: 8px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .overview-time-label.is-major { color: var(--content-primary); font-weight: 780; }

    .overview-appointment {
      position: absolute;
      z-index: 7;
      right: 4px;
      left: 4px;
      min-height: 3px;
      overflow: hidden;
      padding: 0 3px;
      border: 0;
      border-left: 3px solid var(--green);
      border-radius: 3px;
      color: var(--content-primary);
      background: color-mix(in srgb, var(--surface-raised) 90%, transparent);
      box-shadow: 0 1px 3px rgb(22 43 36 / 8%);
      text-align: left;
      font-size: 7px;
      line-height: 1.05;
    }
    .overview-appointment.status-pending { border-left-color: var(--amber); }
    .overview-appointment.status-arrived { border-left-color: var(--violet); }
    .overview-appointment.status-completed { border-left-color: #77827d; opacity: .72; }
    .overview-appointment.status-no-show { border-left-color: var(--red); }
    .hybrid-day-shell.is-work .overview-appointment strong { display: none; }
    .hybrid-day-shell.is-overview .overview-appointment { padding: 2px 4px; border-radius: 5px; }
    .hybrid-day-shell.is-overview .overview-appointment strong { font-size: 8px; }
    .overview-appointment strong {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 7px;
    }
    .overview-appointment.is-search-hit { outline: 2px solid color-mix(in srgb, var(--search-hit-ring) 70%, transparent); }

    .overview-focus-window {
      position: absolute;
      z-index: 10;
      left: var(--hybrid-time-rail);
      right: 0;
      border-top: 1px solid var(--blue);
      border-bottom: 1px solid var(--blue);
      background: color-mix(in srgb, var(--blue-soft) 42%, transparent);
      box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--blue) 18%, transparent);
      pointer-events: none;
    }
    .overview-focus-window::before {
      content: attr(data-label);
      position: absolute;
      top: 4px;
      left: 8px;
      padding: 2px 6px;
      border-radius: 999px;
      color: var(--blue);
      background: color-mix(in srgb, var(--surface-raised) 88%, transparent);
      font-size: 8px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }
    .overview-now-line {
      position: absolute;
      z-index: 12;
      left: var(--hybrid-time-rail);
      right: 0;
      height: 1px;
      background: var(--red);
      pointer-events: none;
    }
    .overview-now-line::before {
      content: "JETZT";
      position: absolute;
      left: 5px;
      top: -8px;
      padding: 1px 4px;
      border-radius: 4px;
      color: white;
      background: var(--red);
      font-size: 7px;
      font-weight: 850;
    }

    /* Horizontal 2-hour operational surface. */
    .work-surface-section {
      min-width: 0;
      min-height: 0;
      display: grid;
      grid-template-rows: var(--hybrid-work-header) minmax(0, 1fr);
      overflow: hidden;
      background: var(--surface-work);
    }
    .day-overview-section,
    .work-surface-section { height: 100%; }
    .work-surface-bar {
      min-width: 0;
      display: grid;
      grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr);
      align-items: center;
      gap: 12px;
      padding: 7px 12px;
      background: var(--surface-raised);
      border-bottom: 1px solid var(--border-default);
    }
    .work-surface-title strong,
    .work-surface-title span { display: block; }
    .work-surface-title strong { font-size: 12px; }
    .work-surface-title span { color: var(--content-secondary); font-size: 9px; }
    .work-window-controls { display: flex; align-items: center; justify-content: center; gap: 5px; }
    .work-window-label {
      justify-self: end;
      min-width: max-content;
      color: var(--content-secondary);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
      text-align: right;
    }
    .work-window-label strong { display: block; color: var(--content-primary); font-size: 11px; }

    .work-viewport-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
    .work-viewport { width: 100%; height: 100%; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; scrollbar-gutter: stable; background: var(--surface-work); }
    .work-timeline { position: relative; width: 100%; min-height: 100%; background: var(--surface-work); }
    .work-header-row,
    .work-resource-row { display: grid; grid-template-columns: var(--hybrid-staff-rail) minmax(0, 1fr); width: 100%; }
    .work-header-row { position: sticky; top: 0; z-index: 26; height: 50px; }
    .work-corner {
      position: sticky;
      left: 0;
      z-index: 32;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      padding: 0 13px;
      color: var(--content-secondary);
      background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
      border-right: 1px solid var(--border-default);
      border-bottom: 1px solid var(--border-default);
      box-shadow: 8px 0 18px rgb(22 43 36 / 6%);
    }
    .work-corner span { font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
    .work-corner small { color: var(--green); font-size: 9px; font-weight: 800; }
    .work-ruler {
      position: relative;
      height: 50px;
      background: color-mix(in srgb, var(--surface-raised) 97%, transparent);
      border-bottom: 1px solid var(--border-default);
    }
    .work-ruler-tick {
      position: absolute;
      bottom: 0;
      width: 1px;
      height: 10px;
      background: var(--border-subtle);
    }
    .work-ruler-tick.is-half { height: 15px; background: var(--border-default); }
    .work-ruler-tick.is-hour { height: 22px; background: var(--border-default); }
    .work-ruler-tick strong {
      position: absolute;
      bottom: 25px;
      left: 0;
      transform: translateX(-50%);
      color: var(--content-primary);
      font-size: 11px;
      font-variant-numeric: tabular-nums;
      white-space: nowrap;
    }
    .work-ruler-tick:first-child strong { transform: none; }
    .work-ruler-tick:last-child strong { transform: translateX(-100%); }

    .work-resource-row { position: relative; border-bottom: 1px solid var(--border-subtle); }
    .work-resource-label {
      position: sticky;
      left: 0;
      z-index: 16;
      min-width: 0;
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 8px 12px;
      background: var(--surface-raised);
      border-right: 1px solid var(--border-default);
      box-shadow: 8px 0 18px rgb(22 43 36 / 5%);
    }
    .work-resource-row.is-alternate .work-resource-label { background: color-mix(in srgb, var(--surface-raised) 88%, var(--surface-subtle)); }
    .work-resource-label .staff-avatar { width: 32px; height: 32px; flex: 0 0 auto; font-size: 10px; }
    .work-resource-label strong,
    .work-resource-label small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .work-resource-label strong { font-size: 12px; }
    .work-resource-label small { color: var(--content-secondary); font-size: 9px; }

    .work-resource-track {
      position: relative;
      min-width: 0;
      height: 100%;
      overflow: hidden;
      cursor: cell;
      outline-offset: -3px;
      background-color: var(--surface-work);
      background-image:
        linear-gradient(to right, color-mix(in srgb, var(--border-default) 70%, transparent) 1px, transparent 1px),
        linear-gradient(to right, color-mix(in srgb, var(--border-subtle) 42%, transparent) 1px, transparent 1px);
      background-size: 50% 100%, 12.5% 100%;
    }
    .work-resource-row.is-alternate .work-resource-track { background-color: var(--surface-lane-alternate); }
    .work-resource-track:hover { background-color: color-mix(in srgb, var(--green-soft) 13%, var(--surface-work)); }
    .work-resource-track:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus-ring) 48%, transparent); }

    .work-appointment {
      position: absolute;
      z-index: 7;
      right: auto;
      min-height: 0;
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: center;
      column-gap: 7px;
      padding: 6px 9px 6px 10px;
      border-radius: 9px;
      text-align: left;
    }
    .work-appointment .appointment-initials {
      display: none;
      grid-row: 1 / 3;
      width: 27px;
      height: 27px;
      place-items: center;
      align-self: center;
      border-radius: 50%;
      color: var(--content-primary);
      background: var(--surface-subtle);
      font-size: 9px;
      font-weight: 850;
    }
    .work-appointment .appt-time { grid-column: 1; grid-row: 1; color: var(--content-secondary); font-size: 10px; }
    .work-appointment strong { grid-column: 2; grid-row: 1; align-self: end; font-size: 12px; }
    .work-appointment .appt-service { grid-column: 1 / 3; grid-row: 2; font-size: 10px; }
    .work-appointment.is-compact { display: flex; align-items: center; gap: 6px; padding-inline: 7px; }
    .work-appointment.is-compact .appointment-initials { display: grid; flex: 0 0 auto; }
    .work-appointment.is-compact .appt-time,
    .work-appointment.is-compact .appt-service { display: none; }
    .work-appointment.is-compact strong { font-size: 10px; }
    .work-appointment.is-micro strong { display: none; }
    .work-appointment.is-running { background: color-mix(in srgb, var(--green-soft) 52%, var(--surface-raised)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--green) 25%, transparent), 0 5px 13px rgb(22 43 36 / 12%); }
    .work-appointment.is-starting-soon { box-shadow: 0 0 0 3px color-mix(in srgb, var(--blue) 18%, transparent), 0 7px 16px rgb(22 43 36 / 14%); }
    .work-appointment.is-past { opacity: .70; }
    .work-appointment.continues-before { border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding-left: 62px; }
    .work-appointment.continues-before .appt-time { display: none; }
    .work-appointment.continues-after { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding-right: 48px; }
    .work-temporal-badge {
      position: absolute;
      top: 5px;
      right: 5px;
      padding: 1px 5px;
      border-radius: 999px;
      color: var(--blue);
      background: color-mix(in srgb, var(--blue-soft) 86%, var(--surface-raised));
      font-size: 8px;
      font-weight: 850;
    }
    .work-temporal-badge.is-running { color: var(--green-strong); background: var(--green-soft); }
    .work-continuation-tag {
      position: absolute;
      top: 5px;
      padding: 1px 4px;
      border-radius: 4px;
      color: var(--content-secondary);
      background: color-mix(in srgb, var(--surface-raised) 86%, transparent);
      font-size: 8px;
      font-weight: 800;
    }
    .work-continuation-tag.before { left: 5px; }
    .work-continuation-tag.after { right: 5px; }

    .work-now-line {
      position: absolute;
      z-index: 14;
      top: 50px;
      bottom: 0;
      width: 1px;
      background: var(--red);
      pointer-events: none;
      box-shadow: 0 0 0 1px color-mix(in srgb, var(--red) 16%, transparent);
    }
    .work-now-line span {
      position: absolute;
      top: -24px;
      left: 0;
      transform: translateX(-50%);
      padding: 2px 6px;
      border-radius: 999px;
      color: white;
      background: var(--red);
      font-size: 9px;
      font-weight: 850;
      font-variant-numeric: tabular-nums;
    }

    /* Empty state: the alpine world lives only in the free state and below the lanes. */
    .work-viewport-wrap.is-empty .work-viewport { padding-bottom: 116px; }
    .work-empty-habitat {
      position: absolute;
      z-index: 20;
      left: var(--hybrid-staff-rail);
      right: 0;
      bottom: 0;
      height: 116px;
      overflow: hidden;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent 0 18%, color-mix(in srgb, var(--surface-work) 78%, transparent) 56%, color-mix(in srgb, #ddd1b9 30%, var(--surface-work)) 100%);
      border-top: 1px solid color-mix(in srgb, var(--border-subtle) 65%, transparent);
    }
    .work-empty-habitat .empty-habitat-copy { top: 12px; left: 42%; }
    .work-empty-habitat .habitat-marmot { left: 61%; bottom: 9px; width: 120px; }
    .work-empty-habitat .habitat-edge { height: 17px; }

    .overview-empty-habitat {
      position: absolute;
      z-index: 14;
      left: var(--hybrid-time-rail);
      right: 0;
      bottom: 0;
      height: 116px;
      overflow: hidden;
      pointer-events: none;
      background: linear-gradient(to bottom, transparent, color-mix(in srgb, #ddd1b9 28%, var(--surface-work)) 100%);
    }
    .overview-empty-habitat .habitat-marmot { left: 58%; bottom: 8px; width: 122px; }
    .overview-empty-habitat .empty-habitat-copy { top: 12px; left: 39%; }
    .overview-empty-habitat .habitat-edge { height: 17px; }

    .hybrid-day-footer { gap: 12px; }
    .hybrid-view-segment { flex: 0 0 auto; }
    .hybrid-window-actions { display: flex; align-items: center; gap: 5px; }

    html[data-theme="dark"] .overview-bar,
    html[data-theme="dark"] .overview-column-head,
    html[data-theme="dark"] .overview-time-column,
    html[data-theme="dark"] .work-surface-bar,
    html[data-theme="dark"] .work-corner,
    html[data-theme="dark"] .work-ruler,
    html[data-theme="dark"] .work-resource-label {
      background: rgb(58 64 60 / 97%);
    }
    html[data-theme="dark"] .overview-staff-column:nth-child(even),
    html[data-theme="dark"] .work-resource-row.is-alternate .work-resource-track { background: var(--paper-alt); }
    html[data-theme="dark"] .work-empty-habitat,
    html[data-theme="dark"] .overview-empty-habitat { background: linear-gradient(to bottom, transparent, #313832 54%, #39372f 100%); }

    @media (max-width: 1100px) {
      :root { --hybrid-staff-rail: 180px; --hybrid-overview-height: 168px; }
      .work-surface-bar { grid-template-columns: minmax(120px, 1fr) auto minmax(120px, 1fr); }
      .overview-column-head .overview-avatar { display: none; }
    }

    @media (max-width: 760px) {
      :root {
        --hybrid-time-rail: 48px;
        --hybrid-staff-rail: 72px;
        --hybrid-overview-height: 104px;
        --hybrid-work-header: 88px;
      }
      .hybrid-day-shell .day-toolbar { flex-wrap: wrap; }
      .hybrid-toolbar-spacer { display: none; }
      .hybrid-focus-chip { margin-left: auto; }
      .mobile-staff-switcher { width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; }
      .mobile-staff-switcher span { color: var(--content-secondary); font-size: 9px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
      .mobile-staff-switcher .filter-select { width: 100%; min-height: 33px; }
      .overview-bar { padding-inline: 8px; }
      .overview-bar .overview-hint { display: none; }
      .overview-window-label { font-size: 8px; }
      .overview-grid { grid-template-columns: var(--hybrid-time-rail) repeat(var(--overview-staff-count), minmax(26px, 1fr)); }
      .overview-time-label { right: 4px; font-size: 7px; }
      .overview-focus-window,
      .overview-now-line { left: var(--hybrid-time-rail); }
      .overview-focus-window::before { display: none; }
      .work-surface-bar { grid-template-columns: 1fr auto; grid-template-rows: auto auto; padding: 6px 8px; gap: 5px 8px; }
      .work-surface-title { min-width: 0; }
      .work-surface-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .work-window-controls { grid-column: 1 / -1; grid-row: 2; }
      .work-window-label { grid-column: 2; grid-row: 1; font-size: 8px; }
      .work-window-label strong { font-size: 9px; }
      .work-corner,
      .work-resource-label { padding-inline: 8px; }
      .work-ruler-tick.is-near-edge strong { display: none; }
      .work-ruler-tick strong { font-size: 9px; }
      .work-resource-label { justify-content: center; padding-inline: 4px; }
      .work-resource-label .staff-avatar { width: 30px; height: 30px; }
      .work-resource-label .staff-name { display: none; }
      .work-corner { justify-content: center; padding-inline: 4px; }
      .work-corner span { display: none; }
      .work-corner small { font-size: 8px; }
      .work-appointment.is-micro { justify-content: center; padding: 2px; }
      .work-appointment.is-micro .appointment-initials { width: 22px; height: 22px; font-size: 8px; }
      .work-empty-habitat { left: var(--hybrid-staff-rail); height: 104px; }
      .work-empty-habitat .habitat-marmot { width: 104px; }
      .hybrid-day-footer .legend { display: none; }
      .hybrid-window-actions { display: none; }
      .hybrid-view-segment button { padding-inline: 9px; font-size: 10px; }
    }



    /* ==================================================================
       PRODUCT MODE · precise geometry and final day-view switch
       ================================================================== */
    .prototype-bar { display: none; }
    .app-shell { height: 100vh; }
    html.demo-mode .prototype-bar { display: flex; }
    html.demo-mode .app-shell { height: calc(100vh - 42px); }

    .workspace { border-radius: var(--radius-xl); }
    .paper-surface { border-radius: var(--radius-lg); }
    .section-card, .metric-card, .person-card, .service-card, .admin-card { border-radius: var(--radius-md); }
    .button, .filter-select, .global-search, .form-field input, .form-field textarea,
    .context-panel, .login-card, .appointment-card, .work-appointment, .action-row,
    .slot-button, .notice, .choice, .visit-step, .toast { border-radius: var(--radius-md); }
    .segment { border-radius: var(--radius-md); padding: 2px; }
    .segment button { border-radius: var(--radius-sm); }
    .status-chip, .hybrid-focus-chip, .work-temporal-badge, .day-range-chip { border-radius: 999px; }

    .panel-backdrop { inset: 0; }
    .context-panel { top: 16px; }
    html.demo-mode .panel-backdrop { inset: 42px 0 0; }
    html.demo-mode .context-panel { top: 58px; }

    .hybrid-day-body { grid-template-rows: minmax(0, 1fr); }
    .day-overview-section,
    .work-surface-section {
      height: 100%;
      min-height: 0;
      grid-template-rows: minmax(0, 1fr);
      border-bottom: 0;
      box-shadow: none;
    }
    .overview-bar,
    .work-surface-bar { display: none; }

    .day-toolbar {
      min-height: 58px;
      padding: 8px 10px;
      flex-wrap: nowrap;
    }
    .day-view-switch {
      flex: 0 0 auto;
      background: var(--surface-subtle);
      border-color: var(--border-subtle);
    }
    .day-view-switch button {
      min-height: 33px;
      min-width: 112px;
      padding-inline: 13px;
      color: var(--content-secondary);
      font-size: 12px;
      font-weight: 780;
    }
    .day-view-switch button.is-active {
      color: var(--content-primary);
      background: var(--surface-raised);
      box-shadow: 0 1px 4px rgb(22 43 36 / 9%);
    }
    .day-view-switch button[aria-selected="true"] { cursor: default; }

    .day-window-controls {
      display: flex;
      align-items: center;
      gap: 5px;
      min-width: max-content;
    }
    .day-window-controls .button { min-height: 33px; }
    .day-window-controls .now-button.is-current {
      color: var(--green-strong);
      background: var(--green-soft);
      border-color: color-mix(in srgb, var(--green) 40%, var(--border-default));
    }
    .day-range-chip {
      min-width: max-content;
      display: inline-flex;
      align-items: center;
      gap: 7px;
      min-height: 30px;
      padding: 4px 9px;
      color: var(--content-secondary);
      background: var(--surface-subtle);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
    }
    .day-range-chip strong { color: var(--content-primary); font-size: 11px; }
    .day-range-chip.is-live::before {
      content: "";
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--green);
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--green) 14%, transparent);
    }
    .hybrid-focus-chip { display: none; }
    .hybrid-toolbar-spacer { flex: 1; }

    .overview-viewport,
    .work-viewport-wrap { height: 100%; }

    .hybrid-day-footer { min-height: 45px; justify-content: flex-end; }
    .hybrid-view-segment { display: none; }
    .footer-view-context {
      margin-right: auto;
      color: var(--content-secondary);
      font-size: 10px;
      font-variant-numeric: tabular-nums;
    }

    @media (max-width: 1100px) {
      .day-view-switch button { min-width: 92px; padding-inline: 9px; }
      .day-summary { display: none; }
    }

    @media (max-width: 760px) {
      .app-shell, .app-shell.auth-mode { height: 100vh; }
      html.demo-mode .app-shell, html.demo-mode .app-shell.auth-mode { height: calc(100vh - 50px); }
      .day-toolbar { min-height: 102px; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 7px; }
      .date-stepper { grid-column: 1 / -1; }
      .day-view-switch { width: 100%; }
      .day-view-switch button { flex: 1; min-width: 0; }
      .mobile-staff-switcher { grid-column: 1 / -1; }
      .hybrid-toolbar-spacer, .day-summary { display: none; }
      .day-window-controls { justify-self: end; }
      .day-range-chip { display: none; }
      .footer-view-context { display: none; }
      .context-panel { top: auto; }
    }



    /* ==================================================================
       FINAL REFERENCE DECISIONS · geometry, date controls, responsive header
       ================================================================== */
    :root {
      --radius-xl: 8px;
      --radius-lg: 6px;
      --radius-md: 4px;
      --radius-sm: 2px;
    }

    /* Compact geometry is the default. Circles and semantic pills stay round. */
    .nav-button,
    .account-card,
    .search-result,
    .search-result button,
    .attention-item,
    .detail-stat,
    .step-button,
    .check-row,
    .appointment-hero,
    .fact,
    .scroll-hint,
    .timeline-appointment,
    .overview-appointment,
    .work-continuation-tag { border-radius: var(--radius-md); }

    .schedule-strip span,
    .search-shortcut,
    .now-line::before,
    .overview-now-line::before,
    .work-continuation-tag { border-radius: var(--radius-sm); }

    /* Header priority: title/date and primary action are protected; search yields first. */
    .workspace-header {
      grid-template-columns: minmax(285px, max-content) minmax(180px, 1fr) max-content;
    }
    .workspace-header > :first-child,
    .header-actions { flex: 0 0 auto; }
    .global-search-wrap { min-width: 0; }
    .global-search { min-width: 0; text-overflow: ellipsis; }

    /* The large page title is the date. The toolbar no longer repeats it. */
    .date-stepper { flex: 0 0 auto; }
    .day-nav-button { min-width: 86px; }
    .day-today-button { min-width: 70px; }
    .day-nav-button span { white-space: nowrap; }

    @media (max-width: 1320px) {
      .workspace-header {
        grid-template-columns: minmax(265px, max-content) minmax(145px, 1fr) max-content;
        gap: 10px;
      }
      .search-shortcut { display: none; }
      .global-search { padding-right: 14px; }
    }

    @media (max-width: 1120px) {
      .workspace-header {
        grid-template-columns: minmax(230px, max-content) minmax(120px, 1fr) max-content;
      }
      .day-nav-button { min-width: 38px; width: 38px; padding: 0; }
      .day-nav-button span { display: none; }
    }

    @media (max-width: 760px) {
      .workspace-header { grid-template-columns: minmax(0, 1fr) auto; }
      .workspace-header > :first-child { min-width: 0; }
      .date-stepper { width: auto; }
      .day-today-button { min-width: 62px; }
    }


    /* ==================================================================
       AUTHENTIC DAY SNAPSHOT · mobile team overview + orientation coaching
       ================================================================== */
    .overview-appointment.is-operational,
    .work-appointment.is-operational {
      color: var(--content-secondary);
      border-left-color: #7a827e;
      background: repeating-linear-gradient(135deg, var(--surface-subtle), var(--surface-subtle) 6px, var(--surface-raised) 6px, var(--surface-raised) 12px);
      box-shadow: none;
    }
    .overview-appointment.kind-task,
    .work-appointment.kind-task { border-left-color: var(--blue); }
    .overview-appointment.kind-absence,
    .work-appointment.kind-absence { opacity: .72; }

    .mobile-rotate-tip { display: none; }

    @media (max-width: 760px) {
      :root { --hybrid-time-rail: 34px; --hybrid-staff-rail: 50px; }

      /* All staff is the mobile default. Focus is an explicit secondary choice. */
      .hybrid-day-shell.is-mobile-team-all .overview-grid {
        grid-template-columns: var(--hybrid-time-rail) repeat(var(--overview-staff-count), minmax(26px, 1fr));
      }
      .hybrid-day-shell.is-mobile-team-all .overview-staff-column { display: block; min-width: 0; }
      .hybrid-day-shell.is-mobile-team-all .overview-column-head { padding-inline: 1px; gap: 0; }
      .hybrid-day-shell.is-mobile-team-all .overview-column-head .overview-name { display: none; }
      .hybrid-day-shell.is-mobile-team-all .overview-avatar {
        display: grid;
        width: 20px;
        height: 20px;
        font-size: 6px;
      }
      .hybrid-day-shell.is-mobile-team-all .overview-appointment {
        left: 1px;
        right: 1px;
        padding: 0;
        border-left-width: 2px;
        border-radius: var(--radius-sm);
      }
      .hybrid-day-shell.is-mobile-team-all .overview-appointment strong { display: none; }
      .hybrid-day-shell.is-mobile-team-all .overview-time-label { font-size: 6px; right: 3px; }
      .hybrid-day-shell.is-mobile-team-all .overview-body {
        background-image:
          linear-gradient(to bottom, color-mix(in srgb, var(--line-strong) 90%, transparent) 1.55px, transparent 1.55px),
          linear-gradient(to bottom, color-mix(in srgb, var(--line) 72%, transparent) 1px, transparent 1px);
      }

      .hybrid-day-shell.is-mobile-team-focus .overview-grid {
        grid-template-columns: var(--hybrid-time-rail) minmax(0, 1fr);
      }
      .hybrid-day-shell.is-mobile-team-focus .overview-staff-column { display: block; }

      /* In the 2h work surface, all staff stay stacked even in portrait. */
      .hybrid-day-shell.is-mobile-team-all .work-header-row,
      .hybrid-day-shell.is-mobile-team-all .work-ruler { height: 35px; }
      .hybrid-day-shell.is-mobile-team-all .work-now-line { top: 35px; }
      .hybrid-day-shell.is-mobile-team-all .work-resource-row { min-height: 33px; }
      .hybrid-day-shell.is-mobile-team-all .work-resource-label { padding: 3px 2px; justify-content: center; }
      .hybrid-day-shell.is-mobile-team-all .work-resource-label .staff-avatar { width: 22px; height: 22px; font-size: 6px; }
      .hybrid-day-shell.is-mobile-team-all .work-resource-label .staff-name { display: none; }
      .hybrid-day-shell.is-mobile-team-all .work-corner { padding-inline: 6px; }
      .hybrid-day-shell.is-mobile-team-all .work-ruler-tick { height: 8px; }
      .hybrid-day-shell.is-mobile-team-all .work-ruler-tick.is-half { height: 12px; }
      .hybrid-day-shell.is-mobile-team-all .work-ruler-tick.is-hour { height: 18px; }
      .hybrid-day-shell.is-mobile-team-all .work-ruler-tick strong { bottom: 20px; font-size: 10px; }
      .hybrid-day-shell.is-mobile-team-all .work-appointment { padding: 2px 3px 2px 4px; column-gap: 2px; }
      .hybrid-day-shell.is-mobile-team-all .work-appointment strong { font-size: 7.5px; line-height: 1.05; }
      .hybrid-day-shell.is-mobile-team-all .work-appointment .appt-service { display: none; }
      .hybrid-day-shell.is-mobile-team-all .work-appointment .appt-time { font-size: 6px; }
      .hybrid-day-shell.is-mobile-team-all .work-appointment.continues-before { padding-left: 42px; }
      .hybrid-day-shell.is-mobile-team-all .work-appointment.continues-after { padding-right: 36px; }
      .hybrid-day-shell.is-mobile-team-all .work-temporal-badge,
      .hybrid-day-shell.is-mobile-team-all .work-continuation-tag { top: 2px; font-size: 5.5px; padding-inline: 2px; }
      .hybrid-day-shell.is-mobile-team-all .work-temporal-badge { padding-block: 1px; }

      .mobile-staff-switcher { grid-template-columns: 72px minmax(0, 1fr); }
      .mobile-staff-switcher span { font-size: 8px; }
    }

    @media (max-width: 760px) and (orientation: portrait) {
      .hybrid-day-footer { display: none; }
      .work-surface-section.has-mobile-tip { grid-template-rows: auto minmax(0, 1fr); }
      .hybrid-day-shell.is-work .mobile-rotate-tip {
        position: relative;
        z-index: 48;
        display: grid;
        grid-template-columns: 26px minmax(0, 1fr) 26px;
        align-items: center;
        gap: 7px;
        margin: 6px 7px 5px calc(var(--hybrid-staff-rail) + 7px);
        padding: 6px 7px;
        color: var(--content-primary);
        background: color-mix(in srgb, var(--surface-raised) 96%, transparent);
        border: 1px solid var(--border-default);
        border-radius: var(--radius-lg);
        box-shadow: 0 7px 22px rgb(22 43 36 / 14%);
      }
      .mobile-rotate-icon { width: 24px; height: 24px; display: grid; place-items: center; color: var(--green-strong); }
      .mobile-rotate-icon svg { width: 19px; height: 19px; }
      .mobile-rotate-tip strong,
      .mobile-rotate-tip small { display: block; }
      .mobile-rotate-tip strong { font-size: 9px; }
      .mobile-rotate-tip small { margin-top: 1px; color: var(--content-secondary); font-size: 7px; line-height: 1.2; }
      .mobile-rotate-close { width: 26px; height: 26px; display: grid; place-items: center; border: 0; color: var(--content-secondary); background: transparent; border-radius: var(--radius-sm); }
      .mobile-rotate-close:hover { background: var(--surface-subtle); }
      .mobile-rotate-close svg { width: 14px; height: 14px; }
    }

    @media (max-width: 760px) and (orientation: landscape) {
      .mobile-rotate-tip { display: none !important; }
    }

  

    /* ======================================================================
       GASSERWERK · VERBINDLICHE PRODUKT-FARBMATRIX · v1.0 · 21.08.2026
       Position beantwortet Wer/Wann. Farbe beantwortet Zustand.
       Status, Bedienung und alpine Illustration verwenden getrennte Farbräume.
       ====================================================================== */
    :root {
      color-scheme: light;
      --gw-surface-frame: #0D4B3E;
      --gw-surface-frame-deep: #073A31;
      --gw-surface-frame-soft: #1D6253;
      --gw-surface-canvas: #E8E5DC;
      --gw-surface-canvas-deep: #DCD8CD;
      --gw-surface-work: #FBFAF5;
      --gw-surface-raised: #FFFEFB;
      --gw-surface-subtle: #F2F0E8;
      --gw-surface-lane-alternate: #F3F2EC;
      --gw-surface-overlay: rgb(4 18 14 / 36%);
      --gw-text-primary: #15201D;
      --gw-text-secondary: #4F5D59;
      --gw-text-tertiary: #5C6964;
      --gw-text-inverse: #F4F0E5;
      --gw-text-disabled: #85908B;
      --gw-line-subtle: #D7DDD9;
      --gw-line-default: #C2CAC4;
      --gw-line-strong: #98A79F;
      --gw-brand-primary: #065E4B;
      --gw-brand-accent: #08775E;
      --gw-brand-soft: #D6EBE2;
      --gw-brand-on-primary: #FFFFFF;
      --gw-status-confirmed-accent: #08775E;
      --gw-status-confirmed-background: #E3F1EA;
      --gw-status-confirmed-text: #064D3E;
      --gw-status-pending-accent: #9A6B27;
      --gw-status-pending-background: #F4E8D2;
      --gw-status-pending-text: #6F4811;
      --gw-status-arrived-accent: #76558A;
      --gw-status-arrived-background: #F1E9F4;
      --gw-status-arrived-text: #5A3B6A;
      --gw-status-completed-accent: #68756F;
      --gw-status-completed-background: #F1F4F1;
      --gw-status-completed-text: #46524D;
      --gw-status-cancelled-accent: #737D79;
      --gw-status-cancelled-background: #EEF1EF;
      --gw-status-cancelled-text: #4D5753;
      --gw-status-no-show-accent: #A63C34;
      --gw-status-no-show-background: #F7E2DF;
      --gw-status-no-show-text: #7B2621;
      --gw-operational-task-accent: #2F64B5;
      --gw-operational-task-background: #E3ECFB;
      --gw-operational-task-text: #1E4B8E;
      --gw-operational-break-accent: #7A817E;
      --gw-operational-break-background: #F0F1EF;
      --gw-operational-break-text: #4F5753;
      --gw-operational-absence-accent: #8C7F71;
      --gw-operational-absence-background: #F1ECE6;
      --gw-operational-absence-text: #5B5146;
      --gw-operational-conflict-accent: #A63C34;
      --gw-operational-conflict-background: #F7E2DF;
      --gw-operational-conflict-text: #7B2621;
      --gw-interaction-focus: #2F64B5;
      --gw-interaction-selected: #2F64B5;
      --gw-interaction-selected-background: #E7EFFA;
      --gw-interaction-search: #174E9B;
      --gw-interaction-search-background: #DDE8F8;
      --gw-interaction-hover: #EEF4F1;
      --gw-temporal-now: #C14038;
      --gw-temporal-live: #0A7168;
      --gw-temporal-live-background: #D9ECE8;
    
      /* Compatibility aliases. New components use --gw-* directly. */
      --frame: var(--gw-surface-frame);
      --frame-deep: var(--gw-surface-frame-deep);
      --frame-soft: var(--gw-surface-frame-soft);
      --frame-ink: var(--gw-text-inverse);
      --canvas: var(--gw-surface-canvas);
      --canvas-deep: var(--gw-surface-canvas-deep);
      --paper: var(--gw-surface-work);
      --paper-raised: var(--gw-surface-raised);
      --paper-muted: var(--gw-surface-subtle);
      --paper-alt: var(--gw-surface-lane-alternate);
      --ink: var(--gw-text-primary);
      --ink-soft: var(--gw-text-secondary);
      --line: var(--gw-line-default);
      --line-strong: var(--gw-line-strong);
      --green: var(--gw-status-confirmed-accent);
      --green-strong: var(--gw-brand-primary);
      --green-soft: var(--gw-brand-soft);
      --blue: var(--gw-interaction-focus);
      --blue-soft: var(--gw-interaction-selected-background);
      --amber: var(--gw-status-pending-accent);
      --amber-soft: var(--gw-status-pending-background);
      --red: var(--gw-status-no-show-accent);
      --red-soft: var(--gw-status-no-show-background);
      --violet: var(--gw-status-arrived-accent);
      --violet-soft: var(--gw-status-arrived-background);
      --surface-frame: var(--gw-surface-frame);
      --surface-frame-emphasis: var(--gw-surface-frame-deep);
      --surface-canvas: var(--gw-surface-canvas);
      --surface-work: var(--gw-surface-work);
      --surface-raised: var(--gw-surface-raised);
      --surface-subtle: var(--gw-surface-subtle);
      --surface-lane-alternate: var(--gw-surface-lane-alternate);
      --surface-overlay: var(--gw-surface-overlay);
      --content-primary: var(--gw-text-primary);
      --content-secondary: var(--gw-text-secondary);
      --content-inverse: var(--gw-text-inverse);
      --border-subtle: var(--gw-line-subtle);
      --border-default: var(--gw-line-default);
      --focus-ring: var(--gw-interaction-focus);
      --selection-ring: var(--gw-interaction-selected);
      --search-hit-ring: var(--gw-interaction-search);
    }
    
    html[data-theme="dark"] {
      color-scheme: dark;
      --gw-surface-frame: #173F36;
      --gw-surface-frame-deep: #132E28;
      --gw-surface-frame-soft: #2B5549;
      --gw-surface-canvas: #272E2B;
      --gw-surface-canvas-deep: #202622;
      --gw-surface-work: #303633;
      --gw-surface-raised: #3A403C;
      --gw-surface-subtle: #292F2C;
      --gw-surface-lane-alternate: #343936;
      --gw-surface-overlay: rgb(11 22 18 / 60%);
      --gw-text-primary: #F1ECE1;
      --gw-text-secondary: #C8C1B4;
      --gw-text-tertiary: #AEA89E;
      --gw-text-inverse: #F3ECDF;
      --gw-text-disabled: #858A84;
      --gw-line-subtle: #46504B;
      --gw-line-default: #57625D;
      --gw-line-strong: #74817B;
      --gw-brand-primary: #A6C8B7;
      --gw-brand-accent: #8FB8A4;
      --gw-brand-soft: #3C554B;
      --gw-brand-on-primary: #173028;
      --gw-status-confirmed-accent: #8FB8A4;
      --gw-status-confirmed-background: #3C5148;
      --gw-status-confirmed-text: #E4EFE9;
      --gw-status-pending-accent: #D2AC6B;
      --gw-status-pending-background: #554734;
      --gw-status-pending-text: #F4E5C9;
      --gw-status-arrived-accent: #BDA7C4;
      --gw-status-arrived-background: #483F4D;
      --gw-status-arrived-text: #F0E7F3;
      --gw-status-completed-accent: #9AA39E;
      --gw-status-completed-background: #3F4641;
      --gw-status-completed-text: #E5E9E6;
      --gw-status-cancelled-accent: #88928D;
      --gw-status-cancelled-background: #3C4340;
      --gw-status-cancelled-text: #E0E5E2;
      --gw-status-no-show-accent: #DD9B93;
      --gw-status-no-show-background: #573B39;
      --gw-status-no-show-text: #F7DEDA;
      --gw-operational-task-accent: #9AA8D2;
      --gw-operational-task-background: #3D4964;
      --gw-operational-task-text: #EBEEFA;
      --gw-operational-break-accent: #9AA39E;
      --gw-operational-break-background: #3F4641;
      --gw-operational-break-text: #E5E9E6;
      --gw-operational-absence-accent: #C1AC93;
      --gw-operational-absence-background: #4A4138;
      --gw-operational-absence-text: #F1E5D7;
      --gw-operational-conflict-accent: #DD9B93;
      --gw-operational-conflict-background: #573B39;
      --gw-operational-conflict-text: #F7DEDA;
      --gw-interaction-focus: #A0AED8;
      --gw-interaction-selected: #9AA8D2;
      --gw-interaction-selected-background: #3D4964;
      --gw-interaction-search: #B6C3EB;
      --gw-interaction-search-background: #414D69;
      --gw-interaction-hover: #414844;
      --gw-temporal-now: #E07F76;
      --gw-temporal-live: #8FC1B2;
      --gw-temporal-live-background: #3C554B;
    }
    
    /* Surface and content roles */
    body { background: var(--gw-surface-frame-deep); color: var(--gw-text-primary); }
    .app-shell { background: var(--gw-surface-frame); }
    .workspace { background: var(--gw-surface-canvas); }
    .workspace-header,
    .day-toolbar { background: color-mix(in srgb, var(--gw-surface-raised) 94%, transparent); }
    .paper-surface,
    .day-viewport,
    .work-viewport,
    .overview-viewport { background-color: var(--gw-surface-work); }
    .staff-column:nth-child(odd),
    .work-resource-row.is-alternate .work-resource-track,
    .overview-staff-column:nth-child(even) { background-color: var(--gw-surface-lane-alternate); }
    
    .muted,
    .page-context,
    .day-summary,
    .appointment-row small,
    .attention-item span,
    .data-table small,
    .person-card p,
    .service-card p,
    .admin-card p,
    .appointment-hero p,
    .action-row small,
    .slot-button small,
    .fact span,
    .detail-stat span,
    .history-item small,
    .overview-bar,
    .legend,
    .work-window-description,
    .work-window-now,
    .overview-time-label,
    .time-label { color: var(--gw-text-secondary); }
    
    .prototype-disclosure,
    .footer-view-context,
    .staff-name small { color: var(--gw-text-tertiary); }
    
    .grid-hours,
    .overview-body,
    .work-resource-track {
      --grid-major: color-mix(in srgb, var(--gw-line-default) 78%, transparent);
      --grid-minor: color-mix(in srgb, var(--gw-line-subtle) 68%, transparent);
    }
    
    /* Terminstatus: colour is always paired with label, border or position. */
    .appointment-card,
    .overview-appointment {
      color: var(--gw-status-confirmed-text);
      background: var(--gw-status-confirmed-background);
      border-color: color-mix(in srgb, var(--gw-status-confirmed-accent) 22%, var(--gw-line-default));
      border-left-color: var(--gw-status-confirmed-accent);
    }
    .appointment-card.status-confirmed,
    .overview-appointment.status-confirmed {
      color: var(--gw-status-confirmed-text);
      background: var(--gw-status-confirmed-background);
      border-left-color: var(--gw-status-confirmed-accent);
    }
    .appointment-card.status-pending,
    .overview-appointment.status-pending {
      color: var(--gw-status-pending-text);
      background: var(--gw-status-pending-background);
      border-color: color-mix(in srgb, var(--gw-status-pending-accent) 24%, var(--gw-line-default));
      border-left-color: var(--gw-status-pending-accent);
    }
    .appointment-card.status-arrived,
    .overview-appointment.status-arrived {
      color: var(--gw-status-arrived-text);
      background: var(--gw-status-arrived-background);
      border-color: color-mix(in srgb, var(--gw-status-arrived-accent) 22%, var(--gw-line-default));
      border-left-color: var(--gw-status-arrived-accent);
    }
    .appointment-card.status-completed,
    .overview-appointment.status-completed {
      color: var(--gw-status-completed-text);
      background: var(--gw-status-completed-background);
      border-color: color-mix(in srgb, var(--gw-status-completed-accent) 22%, var(--gw-line-default));
      border-left-color: var(--gw-status-completed-accent);
      opacity: .88;
    }
    .appointment-card.status-cancelled,
    .overview-appointment.status-cancelled {
      color: var(--gw-status-cancelled-text);
      background: var(--gw-status-cancelled-background);
      border-color: color-mix(in srgb, var(--gw-status-cancelled-accent) 22%, var(--gw-line-default));
      border-left-color: var(--gw-status-cancelled-accent);
      opacity: .82;
    }
    .appointment-card.status-no-show,
    .overview-appointment.status-no-show {
      color: var(--gw-status-no-show-text);
      background: var(--gw-status-no-show-background);
      border-color: color-mix(in srgb, var(--gw-status-no-show-accent) 25%, var(--gw-line-default));
      border-left-color: var(--gw-status-no-show-accent);
    }
    
    .appointment-card .appt-time { color: color-mix(in srgb, currentColor 76%, var(--gw-text-primary)); }
    .appointment-card .appt-service { color: color-mix(in srgb, currentColor 74%, var(--gw-text-secondary)); }
    .appointment-card strong { font-weight: 800; }
    .appointment-card.is-dimmed { opacity: .42; }
    
    /* Operative Nicht-Termine: pattern + kind label + own semantic colour. */
    .work-appointment.is-operational,
    .overview-appointment.is-operational {
      --op-accent: var(--gw-operational-break-accent);
      --op-bg: var(--gw-operational-break-background);
      --op-text: var(--gw-operational-break-text);
      color: var(--op-text);
      border-left-color: var(--op-accent);
      border-color: color-mix(in srgb, var(--op-accent) 20%, var(--gw-line-default));
      background: repeating-linear-gradient(135deg, var(--op-bg), var(--op-bg) 8px, var(--gw-surface-raised) 8px, var(--gw-surface-raised) 16px);
      box-shadow: none;
      opacity: 1;
    }
    .work-appointment.is-operational.kind-task,
    .overview-appointment.is-operational.kind-task {
      --op-accent: var(--gw-operational-task-accent);
      --op-bg: var(--gw-operational-task-background);
      --op-text: var(--gw-operational-task-text);
    }
    .work-appointment.is-operational.kind-break,
    .overview-appointment.is-operational.kind-break {
      --op-accent: var(--gw-operational-break-accent);
      --op-bg: var(--gw-operational-break-background);
      --op-text: var(--gw-operational-break-text);
    }
    .work-appointment.is-operational.kind-absence,
    .overview-appointment.is-operational.kind-absence {
      --op-accent: var(--gw-operational-absence-accent);
      --op-bg: var(--gw-operational-absence-background);
      --op-text: var(--gw-operational-absence-text);
    }
    .work-appointment.is-operational.kind-conflict,
    .overview-appointment.is-operational.kind-conflict {
      --op-accent: var(--gw-operational-conflict-accent);
      --op-bg: var(--gw-operational-conflict-background);
      --op-text: var(--gw-operational-conflict-text);
    }
    
    /* Status chips use the same semantics as cards. */
    .status-chip { border: 1px solid var(--gw-line-default); color: var(--gw-text-primary); background: var(--gw-surface-subtle); }
    .status-chip.confirmed { color: var(--gw-status-confirmed-text); background: var(--gw-status-confirmed-background); border-color: color-mix(in srgb, var(--gw-status-confirmed-accent) 24%, var(--gw-line-default)); }
    .status-chip.pending { color: var(--gw-status-pending-text); background: var(--gw-status-pending-background); border-color: color-mix(in srgb, var(--gw-status-pending-accent) 24%, var(--gw-line-default)); }
    .status-chip.arrived { color: var(--gw-status-arrived-text); background: var(--gw-status-arrived-background); border-color: color-mix(in srgb, var(--gw-status-arrived-accent) 24%, var(--gw-line-default)); }
    .status-chip.completed { color: var(--gw-status-completed-text); background: var(--gw-status-completed-background); border-color: color-mix(in srgb, var(--gw-status-completed-accent) 24%, var(--gw-line-default)); }
    .status-chip.cancelled { color: var(--gw-status-cancelled-text); background: var(--gw-status-cancelled-background); border-color: color-mix(in srgb, var(--gw-status-cancelled-accent) 24%, var(--gw-line-default)); }
    .status-chip.no-show { color: var(--gw-status-no-show-text); background: var(--gw-status-no-show-background); border-color: color-mix(in srgb, var(--gw-status-no-show-accent) 24%, var(--gw-line-default)); }
    
    /* Interaction colour never communicates appointment state. */
    button:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
      outline: 3px solid var(--gw-interaction-focus);
      outline-offset: 2px;
    }
    .appointment-card.is-selected,
    .overview-appointment.is-selected {
      outline: 2px solid var(--gw-interaction-selected);
      outline-offset: 1px;
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gw-interaction-selected-background) 84%, transparent);
    }
    .appointment-card.is-search-hit,
    .overview-appointment.is-search-hit {
      border-color: var(--gw-interaction-search);
      border-left-color: var(--gw-interaction-search);
      box-shadow: 0 0 0 4px color-mix(in srgb, var(--gw-interaction-search-background) 78%, transparent), 0 8px 20px rgb(23 78 155 / 16%);
    }
    .search-result button:hover,
    .slot-button:hover,
    .slot-button.is-selected,
    .segment button.is-active { background: var(--gw-interaction-selected-background); }
    
    /* Temporal truth is spatial and labelled, not a status colour. */
    .now-line,
    .overview-now-line,
    .work-now-line { background: var(--gw-temporal-now); }
    .now-line::before,
    .overview-now-line::before,
    .work-now-line span { background: var(--gw-temporal-now); color: #fff; }
    .day-range-chip.is-live,
    .now-button.is-current,
    .work-temporal-badge.is-running {
      color: var(--gw-temporal-live);
      background: var(--gw-temporal-live-background);
      border-color: color-mix(in srgb, var(--gw-temporal-live) 32%, var(--gw-line-default));
    }
    .work-appointment.is-starting-soon {
      box-shadow: 0 0 0 3px color-mix(in srgb, var(--gw-interaction-selected-background) 84%, transparent), 0 7px 16px rgb(22 43 36 / 12%);
    }
    
    /* Primary action follows brand, not status. */
    .button.primary {
      color: var(--gw-brand-on-primary);
      background: var(--gw-brand-primary);
      border-color: var(--gw-brand-primary);
    }
    .button.primary:hover { filter: brightness(1.05); }

    /* ======================================================================
       MOBILE PRODUCT SURFACE · final reference implementation
       Same product architecture, deliberately mobile—not a reduced desktop.
       ====================================================================== */
    html.mobile-ui,
    html.mobile-ui body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      overscroll-behavior: none;
    }

    html.mobile-ui .app-shell,
    html.mobile-ui .app-shell.auth-mode {
      height: 100dvh;
      min-height: 100%;
      grid-template-columns: minmax(0, 1fr);
      padding: 0;
      background: var(--surface-canvas);
    }
    html.mobile-ui .salon-rail { display: none; }
    html.mobile-ui .workspace {
      width: 100%;
      height: 100%;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    html.mobile-ui .workspace-header {
      z-index: 70;
      border-radius: 0;
      box-shadow: 0 1px 0 var(--border-subtle);
    }
    html.mobile-ui .page-context { display: none; }
    html.mobile-ui .header-actions { align-self: center; }
    html.mobile-ui .header-actions .button {
      min-width: 44px;
      min-height: 44px;
      padding: 0 12px;
      box-shadow: 0 4px 12px rgb(5 94 75 / 14%);
    }
    html.mobile-ui .global-search { min-height: 44px; }
    html.mobile-ui .search-shortcut { display: none; }
    html.mobile-ui .workspace-body {
      min-height: 0;
      overflow: hidden;
      padding: 10px 10px calc(66px + env(safe-area-inset-bottom));
    }
    html.mobile-ui .workspace-body.is-day,
    html.mobile-ui .workspace-body.is-day .screen { min-height: 0; }
    html.mobile-ui .paper-surface { box-shadow: 0 4px 18px rgb(24 47 40 / 8%); }

    html.mobile-ui .mobile-nav {
      position: fixed;
      z-index: 90;
      left: 0;
      right: 0;
      bottom: 0;
      height: calc(60px + env(safe-area-inset-bottom));
      display: flex;
      align-items: stretch;
      gap: 0;
      padding: 5px 0 env(safe-area-inset-bottom);
      overflow-x: auto;
      overflow-y: hidden;
      color: var(--frame-ink);
      background: var(--frame-deep);
      border-top: 1px solid rgb(255 255 255 / 15%);
      scrollbar-width: none;
      scroll-snap-type: x proximity;
    }
    html.mobile-ui .mobile-nav::-webkit-scrollbar { display: none; }
    html.mobile-ui .mobile-nav .nav-button {
      flex: 0 0 20vw;
      min-width: 20vw;
      min-height: 50px;
      padding: 3px 4px;
      flex-direction: column;
      justify-content: center;
      gap: 2px;
      border-radius: var(--radius-md);
      font-size: 9px;
      line-height: 1.05;
      scroll-snap-align: start;
    }
    html.mobile-ui .mobile-nav .nav-icon { width: 20px; height: 19px; }
    html.mobile-ui .mobile-nav .nav-button > span:last-child {
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    html.mobile-ui .hybrid-day-shell {
      height: 100%;
      min-height: 0;
      grid-template-rows: auto minmax(0, 1fr);
    }
    html.mobile-ui .hybrid-day-footer { display: none; }
    html.mobile-ui .day-toolbar {
      position: relative;
      min-height: 0;
      display: grid;
      align-items: center;
      background: var(--surface-raised);
    }
    html.mobile-ui .date-stepper,
    html.mobile-ui .day-view-switch,
    html.mobile-ui .mobile-staff-switcher,
    html.mobile-ui .day-window-controls { min-width: 0; }
    html.mobile-ui .date-stepper { display: flex; gap: 4px; }
    html.mobile-ui .day-nav-button,
    html.mobile-ui .day-today-button,
    html.mobile-ui .day-view-switch button,
    html.mobile-ui .mobile-staff-switcher .filter-select,
    html.mobile-ui .day-window-controls .button {
      min-height: 40px;
    }
    html.mobile-ui .day-nav-button {
      width: 40px;
      min-width: 40px;
      padding: 0;
    }
    html.mobile-ui .day-nav-button span { display: none; }
    html.mobile-ui .day-today-button { min-width: 58px; padding-inline: 9px; }
    html.mobile-ui .day-view-switch {
      width: 100%;
      display: flex;
    }
    html.mobile-ui .day-view-switch button {
      flex: 1 1 0;
      min-width: 0;
      padding: 0 7px;
      font-size: 10px;
    }
    html.mobile-ui .mobile-staff-switcher {
      width: 100%;
      display: grid;
      grid-template-columns: 70px minmax(0, 1fr);
      align-items: center;
      gap: 7px;
    }
    html.mobile-ui .mobile-staff-switcher span {
      color: var(--content-secondary);
      font-size: 8px;
      font-weight: 850;
      letter-spacing: .09em;
      text-transform: uppercase;
    }
    html.mobile-ui .mobile-staff-switcher .filter-select {
      width: 100%;
      padding-inline: 10px 30px;
      font-size: 12px;
    }
    html.mobile-ui .day-window-controls {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 4px;
    }
    html.mobile-ui .day-window-controls .icon-button {
      width: 40px;
      min-width: 40px;
      padding: 0;
    }
    html.mobile-ui .day-window-controls .now-button { min-width: 58px; padding-inline: 10px; }
    html.mobile-ui .day-window-controls .day-range-chip {
      margin-left: auto;
      min-height: 38px;
      display: inline-grid;
      grid-template-columns: auto;
      align-content: center;
      justify-items: end;
      gap: 0;
      padding: 3px 8px;
      border-radius: var(--radius-md);
    }
    html.mobile-ui .day-window-controls .day-range-chip::before { display: none; }
    html.mobile-ui .day-window-controls .day-range-chip strong { font-size: 10px; }
    html.mobile-ui .day-window-controls .day-range-chip span { font-size: 7px; }
    html.mobile-ui .day-toolbar > .day-range-chip {
      min-height: 38px;
      justify-self: end;
      border-radius: var(--radius-md);
    }
    html.mobile-ui .hybrid-toolbar-spacer,
    html.mobile-ui .day-summary { display: none; }

    html.mobile-ui .overview-viewport,
    html.mobile-ui .work-viewport-wrap { height: 100%; min-height: 0; }
    html.mobile-ui .work-viewport,
    html.mobile-ui .overview-viewport {
      overscroll-behavior: contain;
      scrollbar-gutter: auto;
    }
    html.mobile-ui .overview-column-head {
      appearance: none;
      border: 0;
      font: inherit;
    }
    html.mobile-ui .overview-column-head[data-mobile-focus-person] { cursor: pointer; }

    html.mobile-ui .context-panel {
      top: auto;
      right: 0;
      bottom: calc(60px + env(safe-area-inset-bottom));
      left: 0;
      width: 100%;
      max-height: calc(100dvh - 78px - env(safe-area-inset-bottom));
      border-right: 0;
      border-bottom: 0;
      border-left: 0;
      border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    }
    html.mobile-ui .context-panel.is-open { animation-name: sheet-in; }
    html.mobile-ui .panel-backdrop { inset: 0 0 calc(60px + env(safe-area-inset-bottom)); }
    html.mobile-ui .panel-head { min-height: 62px; }
    html.mobile-ui .panel-footer {
      position: sticky;
      bottom: 0;
      padding-bottom: calc(10px + env(safe-area-inset-bottom));
    }

    html.mobile-portrait .workspace-header {
      min-height: 114px;
      grid-template-columns: minmax(0, 1fr) auto;
      grid-template-rows: auto auto;
      gap: 8px;
      padding: 10px 12px 9px;
    }
    html.mobile-portrait .workspace-header > :first-child { min-width: 0; }
    html.mobile-portrait .page-kicker { display: none; }
    html.mobile-portrait .page-title-row h1 {
      max-width: 100%;
      overflow: hidden;
      font-size: clamp(21px, 6.2vw, 25px);
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html.mobile-portrait .global-search-wrap {
      grid-column: 1 / -1;
      grid-row: 2;
    }
    html.mobile-portrait .header-actions .button {
      width: 44px;
      padding: 0;
    }
    html.mobile-portrait .header-actions .button span { display: none; }
    html.mobile-portrait .day-toolbar {
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas:
        "date view"
        "team team"
        "time time";
      gap: 6px 8px;
      padding: 8px;
    }
    html.mobile-portrait .date-stepper { grid-area: date; }
    html.mobile-portrait .day-view-switch { grid-area: view; }
    html.mobile-portrait .mobile-staff-switcher { grid-area: team; }
    html.mobile-portrait .day-window-controls,
    html.mobile-portrait .day-toolbar > .day-range-chip { grid-area: time; }

    html.mobile-landscape .app-shell { height: 100dvh; }
    html.mobile-landscape .workspace-header {
      min-height: 58px;
      grid-template-columns: minmax(180px, .8fr) minmax(220px, 1.2fr) auto;
      grid-template-rows: 1fr;
      gap: 8px;
      padding: 6px 9px;
    }
    html.mobile-landscape .page-kicker { display: none; }
    html.mobile-landscape .page-title-row h1 { font-size: 19px; }
    html.mobile-landscape .global-search-wrap {
      grid-column: 2;
      grid-row: 1;
    }
    html.mobile-landscape .global-search { min-height: 40px; }
    html.mobile-landscape .header-actions .button {
      min-height: 40px;
      padding-inline: 12px;
    }
    html.mobile-landscape .header-actions .button span { display: inline; }
    html.mobile-landscape .workspace-body {
      padding: 6px 6px calc(49px + env(safe-area-inset-bottom));
    }
    html.mobile-landscape .mobile-nav {
      height: calc(44px + env(safe-area-inset-bottom));
      padding-top: 2px;
    }
    html.mobile-landscape .mobile-nav .nav-button {
      flex: 1 0 86px;
      min-width: 86px;
      min-height: 40px;
      flex-direction: row;
      gap: 5px;
      font-size: 9px;
    }
    html.mobile-landscape .mobile-nav .nav-icon { width: 17px; height: 17px; }
    html.mobile-landscape .day-toolbar {
      grid-template-columns: auto auto minmax(150px, 1fr) auto;
      gap: 6px;
      padding: 5px 7px;
    }
    html.mobile-landscape .date-stepper { grid-column: 1; }
    html.mobile-landscape .day-view-switch { grid-column: 2; min-width: 176px; }
    html.mobile-landscape .mobile-staff-switcher {
      grid-column: 3;
      grid-template-columns: 60px minmax(0, 1fr);
    }
    html.mobile-landscape .day-window-controls,
    html.mobile-landscape .day-toolbar > .day-range-chip { grid-column: 4; }
    html.mobile-landscape .day-window-controls .day-range-chip span { display: none; }
    html.mobile-landscape .day-window-controls .day-range-chip { min-height: 40px; }
    html.mobile-landscape .context-panel {
      bottom: calc(44px + env(safe-area-inset-bottom));
      max-height: calc(100dvh - 52px - env(safe-area-inset-bottom));
    }
    html.mobile-landscape .panel-backdrop { inset-bottom: calc(44px + env(safe-area-inset-bottom)); }
    html.mobile-landscape .hybrid-day-shell.is-mobile-team-all .work-resource-row { min-height: 36px; }
    html.mobile-landscape .hybrid-day-shell.is-mobile-team-all .work-appointment strong { font-size: 9px; }
    html.mobile-landscape .hybrid-day-shell.is-mobile-team-all .work-appointment .appt-service {
      display: block;
      font-size: 7px;
    }
    html.mobile-landscape .hybrid-day-shell.is-mobile-team-all .work-resource-label .staff-avatar {
      width: 24px;
      height: 24px;
      font-size: 7px;
    }
    html.mobile-landscape .mobile-rotate-tip { display: none !important; }

    html.mobile-ui:not(.tablet-ui) .hybrid-day-shell.is-mobile-team-all .work-corner {
      justify-content: center;
      padding-inline: 3px;
    }
    html.mobile-ui:not(.tablet-ui) .hybrid-day-shell.is-mobile-team-all .work-corner small { display: none; }

    html.tablet-ui .mobile-staff-switcher { grid-template-columns: 92px minmax(0, 1fr); }
    html.tablet-ui .mobile-staff-switcher span { font-size: 9px; }
    html.tablet-ui .day-view-switch button { font-size: 12px; }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-resource-label {
      justify-content: flex-start;
      gap: 8px;
      padding: 7px 9px;
    }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-resource-label .staff-avatar {
      width: 28px;
      height: 28px;
      font-size: 8px;
    }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-resource-label .staff-name { display: block; }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-resource-label strong { font-size: 10px; }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-resource-label small {
      display: block;
      font-size: 8px;
    }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-appointment strong { font-size: 10px; }
    html.tablet-ui .hybrid-day-shell.is-mobile-team-all .work-appointment .appt-service {
      display: block;
      font-size: 8px;
    }

    html.mobile-ui .overview-time-column .overview-column-head {
      padding: 0;
      font-size: 7px;
      letter-spacing: .04em;
    }
    html.mobile-ui .overview-appointment small { display: none; }
    html.mobile-ui .hybrid-day-shell.is-mobile-team-focus .overview-appointment {
      padding: 5px 7px;
      border-left-width: 3px;
    }
    html.mobile-ui .hybrid-day-shell.is-mobile-team-focus .overview-appointment strong {
      display: block;
      font-size: 10px;
      line-height: 1.12;
    }
    html.mobile-ui .hybrid-day-shell.is-mobile-team-focus .overview-appointment small {
      display: block;
      margin-top: 2px;
      overflow: hidden;
      color: var(--content-secondary);
      font-size: 8px;
      line-height: 1.1;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    html.mobile-ui .context-panel { bottom: calc(64px + env(safe-area-inset-bottom)); }
    html.mobile-ui .panel-backdrop { inset: 0 0 calc(64px + env(safe-area-inset-bottom)); }
    html.mobile-landscape .context-panel { bottom: calc(48px + env(safe-area-inset-bottom)); }
    html.mobile-landscape .panel-backdrop { inset: 0 0 calc(48px + env(safe-area-inset-bottom)); }

    @media (max-width: 374px) {
      html.mobile-portrait .workspace-header { padding-inline: 10px; }
      html.mobile-portrait .page-title-row h1 { font-size: 21px; }
      html.mobile-portrait .day-toolbar { gap: 5px 6px; padding: 7px; }
      html.mobile-portrait .day-nav-button { width: 38px; min-width: 38px; }
      html.mobile-portrait .day-today-button { min-width: 54px; padding-inline: 7px; }
      html.mobile-portrait .day-view-switch button { padding-inline: 4px; font-size: 9px; }
      html.mobile-portrait .mobile-staff-switcher { grid-template-columns: 64px minmax(0, 1fr); }
      html.mobile-portrait .day-window-controls .day-range-chip { padding-inline: 6px; }
      html.mobile-portrait .mobile-rotate-tip small { font-size: 6.7px; }
    }



    /* ======================================================================
       PRESENTATION HARDENING · all screens scale and scroll reliably
       ====================================================================== */
    .theme-cycle-button,
    .install-app-button {
      flex: 0 0 auto;
      white-space: nowrap;
    }
    .theme-cycle-button .theme-mode-label,
    .install-app-button .install-label { font-size: 11px; }
    .theme-cycle-button svg,
    .install-app-button svg { width: 17px; height: 17px; }

    /* Non-day screens own their vertical scroll. Day keeps its dedicated timeline scroll. */
    .workspace-body:not(.is-day) {
      overflow-y: auto;
      overflow-x: hidden;
      overscroll-behavior: contain;
      scrollbar-gutter: stable;
    }
    .workspace-body:not(.is-day) > .screen {
      min-height: min(100%, max-content);
      height: auto;
    }
    .workspace-body.is-day { overflow: hidden; }

    @media (max-width: 1450px) and (min-width: 761px) {
      .theme-cycle-button,
      .install-app-button { width: 42px; min-width: 42px; padding: 0; }
      .theme-cycle-button .theme-mode-label,
      .install-app-button .install-label { display: none; }
    }

    @media (max-height: 760px) and (min-width: 761px) {
      .workspace-header { min-height: 68px; padding-block: 9px; }
      .workspace-body:not(.is-day) { padding-block: 12px; }
      .metric-card { min-height: 104px; padding: 13px; }
      .metric-card strong { font-size: 26px; }
      .card-head { min-height: 58px; padding-block: 10px; }
      .appointment-row { min-height: 62px; }
    }

    html.mobile-ui .workspace-body {
      padding: 10px 10px calc(68px + env(safe-area-inset-bottom));
    }
    html.mobile-ui .workspace-body:not(.is-day) {
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
      scroll-padding-bottom: calc(76px + env(safe-area-inset-bottom));
    }
    html.mobile-ui .workspace-body.is-day { overflow: hidden; }
    html.mobile-ui .workspace-body:not(.is-day) > .screen {
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    /* Today */
    html.mobile-ui .metric-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    html.mobile-ui .metric-card { min-height: 92px; padding: 12px; }
    html.mobile-ui .metric-card strong { font-size: 24px; }
    html.mobile-ui .today-layout { grid-template-columns: minmax(0, 1fr); gap: 10px; }
    html.mobile-ui .agenda-panel,
    html.mobile-ui .today-layout > aside { min-width: 0; overflow: hidden; }
    html.mobile-ui .card-head { min-height: 58px; padding: 11px 12px; }
    html.mobile-ui .appointment-row {
      min-height: 64px;
      grid-template-columns: 50px minmax(0, 1fr);
      gap: 8px;
      padding: 9px 12px;
    }
    html.mobile-ui .appointment-row .status-chip { grid-column: 2; justify-self: start; }

    /* Termine / tables: scroll inside the data surface, never clip the page. */
    html.mobile-ui .filter-row { gap: 6px; }
    html.mobile-ui .filter-select { max-width: 100%; }
    html.mobile-ui .table-wrap {
      width: 100%;
      max-width: 100%;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
    }
    html.mobile-ui .data-table { min-width: 640px; }

    /* Kundenkartei */
    html.mobile-ui .split-view {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      overflow: visible;
    }
    html.mobile-ui .split-list {
      max-height: min(38dvh, 300px);
      overflow: auto;
      border-right: 0;
      border-bottom: 1px solid var(--line);
    }
    html.mobile-ui .split-detail { min-width: 0; overflow: visible; padding: 15px; }
    html.mobile-ui .detail-heading { flex-wrap: wrap; }
    html.mobile-ui .detail-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Team / Angebot / Verwaltung */
    html.mobile-ui .people-grid,
    html.mobile-ui .service-grid,
    html.mobile-ui .admin-grid { grid-template-columns: minmax(0, 1fr); gap: 9px; }
    html.mobile-ui .person-card,
    html.mobile-ui .service-card,
    html.mobile-ui .admin-card { min-width: 0; min-height: 0; }

    /* Onboarding */
    html.mobile-ui .onboarding-shell {
      min-height: 0;
      grid-template-columns: minmax(0, 1fr);
      overflow: visible;
    }
    html.mobile-ui .onboarding-progress { padding: 16px; }
    html.mobile-ui .onboarding-progress h2 { font-size: 24px; }
    html.mobile-ui .step-list {
      display: flex;
      gap: 5px;
      margin-top: 12px;
      overflow-x: auto;
      overscroll-behavior-x: contain;
      scrollbar-width: none;
    }
    html.mobile-ui .step-list::-webkit-scrollbar { display: none; }
    html.mobile-ui .step-button { flex: 0 0 132px; min-width: 132px; }
    html.mobile-ui .onboarding-content { padding: 22px 16px; }

    /* Login must survive short phone heights and keyboard intrusion. */
    html.mobile-ui .auth-screen { min-height: 100%; height: auto; overflow: visible; }
    html.mobile-ui .auth-stage {
      min-height: 100dvh;
      align-items: start;
      overflow-y: auto;
      padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom));
    }
    html.mobile-ui .alpine-login-card {
      width: min(100%, 430px);
      margin: auto;
    }

    /* Context sheet: internal scrolling, footer always reachable. */
    html.mobile-ui .context-panel {
      min-height: 0;
      overflow: hidden;
    }
    html.mobile-ui .panel-body {
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      scroll-padding-bottom: 16px;
    }
    html.mobile-ui .panel-footer { flex-wrap: wrap; }

    /* Header utilities become icons before the date or primary action is sacrificed. */
    html.mobile-ui .theme-cycle-button,
    html.mobile-ui .install-app-button {
      width: 40px;
      min-width: 40px;
      min-height: 40px;
      padding: 0;
    }
    html.mobile-ui .theme-cycle-button .theme-mode-label,
    html.mobile-ui .install-app-button .install-label { display: none; }

    @media (max-width: 374px) {
      html.mobile-portrait .workspace-header { padding-inline: 8px; }
      html.mobile-portrait .page-title-row h1 { font-size: 20px; }
      html.mobile-ui .metric-card { min-height: 86px; }
      html.mobile-ui .detail-grid { grid-template-columns: minmax(0, 1fr); }
    }

    html.mobile-landscape .workspace-body:not(.is-day) {
      padding: 8px 10px calc(52px + env(safe-area-inset-bottom));
    }
    html.mobile-landscape .auth-stage { min-height: 100dvh; padding-block: 10px; }

    /* Installed PWA gets a subtle standalone-safe top offset without changing browser presentation. */
    @media (display-mode: standalone) {
      html.mobile-ui .workspace-header { padding-top: max(9px, env(safe-area-inset-top)); }
      html.mobile-ui .mobile-nav { padding-bottom: max(env(safe-area-inset-bottom), 5px); }
    }

  

    /* ======================================================================
       RELEASE-CANDIDATE LAYOUT CONTRACT · responsive scroll + 5-person demo
       ====================================================================== */
    :root {
      --mobile-nav-height: 60px;
      --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
      --mobile-content-bottom: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom) + 14px);
    }

    /* The active workspace row is always allowed to shrink; its body owns content scrolling. */
    .workspace { min-height: 0; }
    .workspace-body { min-height: 0; }
    .workspace-body:not(.is-day) {
      height: 100%;
      min-height: 0;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      touch-action: pan-y;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior-y: contain;
    }
    .workspace-body:not(.is-day) > .screen {
      min-width: 0;
      min-height: 100%;
      height: auto;
      overflow: visible;
    }

    /* Day modes each consume the entire remaining product field. There are no ghost rows. */
    .hybrid-day-body,
    .hybrid-day-body > .day-overview-section,
    .hybrid-day-body > .work-surface-section,
    .overview-viewport,
    .work-viewport-wrap { min-height: 0; height: 100%; }
    .day-overview-section { grid-template-rows: minmax(0, 1fr) !important; }
    .work-surface-section { grid-template-rows: minmax(0, 1fr) !important; }
    .work-surface-section.has-mobile-tip { grid-template-rows: auto minmax(0, 1fr) !important; }

    /* Five-person demo: the operational rows stretch to the available height. */
    .work-timeline.is-demo-stretch {
      height: 100%;
      min-height: 100%;
      display: grid;
      grid-template-rows: auto repeat(var(--work-staff-count), minmax(48px, 1fr));
    }
    .work-timeline.is-demo-stretch .work-resource-row {
      height: auto !important;
      min-height: 48px;
    }
    .work-timeline.is-demo-stretch.is-single-lane .work-appointment {
      top: 50% !important;
      transform: translateY(-50%);
    }
    .work-timeline.is-demo-stretch.is-single-lane .work-appointment:hover { transform: translateY(-50%); }

    /* Give real information priority over card chrome. */
    .work-timeline.is-demo-stretch .work-appointment {
      padding-inline: 7px;
      column-gap: 5px;
    }
    .work-timeline.is-demo-stretch .work-appointment.continues-before { padding-left: 48px; }
    .work-timeline.is-demo-stretch .work-appointment.continues-after { padding-right: 38px; }
    .work-timeline.is-demo-stretch .work-continuation-tag { font-size: 7px; padding-inline: 3px; }
    .work-timeline.is-demo-stretch .work-temporal-badge { font-size: 7px; padding-inline: 4px; }
    html.mobile-ui .hybrid-day-shell.is-mobile-team-all .work-timeline.is-demo-stretch .work-temporal-badge.is-running { display: none; }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.continues-before { padding-left: 40px; }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment:not(.is-compact) .appt-service { display: block !important; font-size: 7.5px; line-height: 1.05; }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.continues-before { padding-left: 34px; }

    /* Customer list is the default state. Detail is explicit and reversible. */
    .split-view.customer-list-only { grid-template-columns: minmax(0, 1fr); }
    .split-view.customer-list-only .split-list { border-right: 0; }
    .customer-detail-close { flex: 0 0 auto; }
    .customer-detail-actions { display: flex; align-items: center; gap: 8px; }

    /* Mobile appointment register: readable vertical rows instead of a clipped desktop table. */
    .mobile-appointment-register { display: grid; overflow: hidden; }
    .mobile-register-row {
      width: 100%;
      min-height: 68px;
      display: grid;
      grid-template-columns: 54px minmax(0, 1fr) auto;
      align-items: center;
      gap: 9px;
      padding: 9px 10px;
      border: 0;
      border-bottom: 1px solid var(--line);
      color: var(--ink);
      background: transparent;
      text-align: left;
    }
    .mobile-register-row:last-child { border-bottom: 0; }
    .mobile-register-row:hover { background: var(--paper-muted); }
    .mobile-register-time strong,
    .mobile-register-time small,
    .mobile-register-main strong,
    .mobile-register-main small { display: block; }
    .mobile-register-time strong { font-size: 12px; font-variant-numeric: tabular-nums; }
    .mobile-register-time small,
    .mobile-register-main small { color: var(--ink-soft); font-size: 9px; }
    .mobile-register-main { min-width: 0; }
    .mobile-register-main strong,
    .mobile-register-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

    /* Five primary bottom-nav targets fit without stealing content height. Secondary targets remain swipeable. */
    html.mobile-ui .mobile-nav {
      height: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
      padding-bottom: var(--mobile-safe-bottom);
    }
    html.mobile-ui .workspace-body {
      min-height: 0;
      padding-bottom: var(--mobile-content-bottom);
    }
    html.mobile-ui .workspace-body:not(.is-day) {
      height: 100%;
      min-height: 0;
      overflow-y: auto !important;
      overflow-x: hidden !important;
      scroll-padding-bottom: var(--mobile-content-bottom);
      padding-bottom: var(--mobile-content-bottom);
      touch-action: pan-y;
    }
    html.mobile-ui .workspace-body.is-day {
      min-height: 0;
      overflow: hidden !important;
      padding-bottom: var(--mobile-content-bottom);
    }

    /* Today: natural document flow, no forced viewport packing. */
    html.mobile-ui .today-layout,
    html.mobile-ui .agenda-panel,
    html.mobile-ui .today-layout > aside { min-height: 0; height: auto; }

    /* Customers: list fills the page by default; detail becomes the whole mobile content surface. */
    html.mobile-ui .split-view.customer-list-only .split-list {
      display: block;
      max-height: none;
      overflow: visible;
      border-bottom: 0;
    }
    html.mobile-ui .split-view.has-customer-detail .split-list { display: none; }
    html.mobile-ui .split-view.has-customer-detail { display: block; }
    html.mobile-ui .split-view.has-customer-detail .split-detail {
      display: block;
      width: 100%;
      min-height: 0;
      padding-bottom: 18px;
    }
    html.mobile-ui .customer-detail-close {
      width: 40px;
      min-width: 40px;
      padding: 0;
    }

    /* On tiny phones allow long content to be reached rather than compressed below legibility. */
    @media (max-width: 430px) {
      html.mobile-ui .work-timeline.is-demo-stretch {
        grid-template-rows: auto repeat(var(--work-staff-count), minmax(44px, 1fr));
      }
      html.mobile-ui .work-timeline.is-demo-stretch .work-resource-row { min-height: 44px; }
      html.mobile-ui .work-timeline.is-demo-stretch .work-appointment strong { font-size: 9px; }
      html.mobile-ui .work-timeline.is-demo-stretch .work-appointment .appt-service { font-size: 8px; }
      html.mobile-ui .work-timeline.is-demo-stretch .work-appointment .appt-time { font-size: 8px; }
      html.mobile-ui .mobile-register-row { grid-template-columns: 50px minmax(0, 1fr) auto; }
    }

    html.mobile-landscape { --mobile-nav-height: 48px; }

    @media (max-height: 620px) and (orientation: landscape) {
      html.mobile-ui .workspace-body:not(.is-day) { padding-bottom: var(--mobile-content-bottom); }
      html.mobile-ui .work-timeline.is-demo-stretch {
        grid-template-rows: auto repeat(var(--work-staff-count), minmax(36px, 1fr));
      }
      html.mobile-ui .work-timeline.is-demo-stretch .work-resource-row { min-height: 36px; }
    }

  



    /* ======================================================================
       FINAL VIEWPORT + SCROLL CONTRACT · presentation-ready full product
       ====================================================================== */
    :root {
      --mobile-nav-height: 60px;
      --mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
      --mobile-nav-total: calc(var(--mobile-nav-height) + var(--mobile-safe-bottom));
      --mobile-page-pad: 10px;
    }

    /* Mobile navigation owns its physical strip. Product content stops above it. */
    html.mobile-ui .app-shell:not(.auth-mode) {
      height: calc(100dvh - var(--mobile-nav-total));
      min-height: 0;
    }
    html.mobile-ui .app-shell.auth-mode { height: 100dvh; min-height: 0; }
    html.mobile-ui .app-shell.auth-mode .mobile-nav { display: none; }
    html.mobile-ui .workspace { min-height: 0; height: 100%; }
    html.mobile-ui .workspace-body {
      min-height: 0;
      height: auto;
      padding: var(--mobile-page-pad);
    }

    /* Every non-calendar page has one explicit vertical scroll owner. */
    html.mobile-ui .workspace-body:not(.is-day) {
      overflow-y: scroll !important;
      overflow-x: hidden !important;
      -webkit-overflow-scrolling: touch;
      touch-action: pan-y;
      overscroll-behavior-y: contain;
      scroll-behavior: auto;
      scroll-padding-block: 10px 18px;
      padding-bottom: 20px;
    }
    html.mobile-ui .workspace-body:not(.is-day) > .screen {
      min-height: 100%;
      height: auto;
      overflow: visible;
      padding-bottom: 8px;
    }

    /* Today is document flow; never force its cards into the viewport. */
    html.mobile-ui .workspace-body:not(.is-day) > .screen:has(.today-layout) {
      min-height: max-content;
      padding-bottom: 18px;
    }
    html.mobile-ui .today-layout,
    html.mobile-ui .agenda-panel,
    html.mobile-ui .today-layout > aside,
    html.mobile-ui .appointment-list,
    html.mobile-ui .attention-list {
      height: auto;
      min-height: 0;
      overflow: visible;
    }

    /* Day plan receives exactly the remaining product field above the bottom nav. */
    html.mobile-ui .workspace-body.is-day {
      overflow: hidden !important;
      min-height: 0;
      height: auto;
      padding: 8px;
    }
    html.mobile-ui .workspace-body.is-day > .screen,
    html.mobile-ui .hybrid-day-shell,
    html.mobile-ui .hybrid-day-body,
    html.mobile-ui .hybrid-day-body > .work-surface-section,
    html.mobile-ui .hybrid-day-body > .day-overview-section,
    html.mobile-ui .work-viewport-wrap,
    html.mobile-ui .overview-viewport {
      min-height: 0;
      height: 100%;
    }
    html.mobile-ui .hybrid-day-shell {
      display: grid;
      grid-template-rows: auto minmax(0, 1fr);
      overflow: hidden;
    }
    html.mobile-ui .hybrid-day-body { overflow: hidden; }
    html.mobile-ui .work-surface-section,
    html.mobile-ui .day-overview-section { overflow: hidden; }
    html.mobile-ui .overview-grid { min-height: 100%; height: 100%; }

    /* 5-person demo expands vertically but becomes internally scrollable on very short screens. */
    html.mobile-ui .work-timeline.is-demo-stretch {
      min-height: 100%;
      height: 100%;
      grid-template-rows: 36px repeat(var(--work-staff-count), minmax(52px, 1fr));
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-header-row,
    html.mobile-ui .work-timeline.is-demo-stretch .work-ruler { height: 36px; }
    html.mobile-ui .work-timeline.is-demo-stretch .work-now-line { top: 36px; }
    html.mobile-ui .work-timeline.is-demo-stretch .work-resource-row { min-height: 52px; }
    html.mobile-ui .work-viewport { overflow-y: auto; overflow-x: hidden; }

    /* Mobile 5-person appointments: less chrome, more actual content. */
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment {
      min-height: 0;
      height: 38px !important;
      padding: 3px 5px;
      column-gap: 4px;
      border-radius: 5px;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment strong {
      min-width: 0;
      font-size: 9px;
      line-height: 1.05;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment .appt-time {
      display: block;
      font-size: 7.5px;
      line-height: 1;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment:not(.is-compact) .appt-service {
      display: block !important;
      min-width: 0;
      font-size: 7.5px;
      line-height: 1.05;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact {
      padding-inline: 4px;
      gap: 3px;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact strong { font-size: 8px; }

    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact:not(.is-micro) {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      grid-template-rows: auto auto;
      align-content: center;
      gap: 1px;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact:not(.is-micro) .appointment-initials,
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact:not(.is-micro) .appt-time { display: none; }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact:not(.is-micro) strong {
      grid-column: 1;
      grid-row: 1;
      font-size: 8.5px;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.is-compact:not(.is-micro) .appt-service {
      display: block !important;
      grid-column: 1;
      grid-row: 2;
      font-size: 7px;
      line-height: 1;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.continues-before,
    html.mobile-ui .work-timeline.is-demo-stretch .work-appointment.continues-after {
      padding-inline: 5px;
    }
    html.mobile-ui .work-timeline.is-demo-stretch .work-continuation-tag,
    html.mobile-ui .work-timeline.is-demo-stretch .work-temporal-badge { display: none; }

    /* Full-day overview uses every available pixel and makes time bands clearly readable. */
    html.mobile-ui .day-overview-section { grid-template-rows: minmax(0, 1fr) !important; }
    html.mobile-ui .overview-body {
      background-image:
        linear-gradient(to bottom, color-mix(in srgb, var(--line-strong) 92%, transparent) 1.5px, transparent 1.5px),
        linear-gradient(to bottom, color-mix(in srgb, var(--line) 70%, transparent) 1px, transparent 1px);
      background-size: 100% 20%, 100% 5%;
    }

    /* Customer list is always the entry state; a detail takes the content surface and can close back. */
    html.mobile-ui .split-view.customer-list-only { min-height: 100%; }
    html.mobile-ui .split-view.customer-list-only .split-list {
      display: block;
      min-height: 100%;
      max-height: none;
      overflow: visible;
      border-bottom: 0;
    }
    html.mobile-ui .split-view.has-customer-detail .split-list { display: none; }
    html.mobile-ui .split-view.has-customer-detail {
      display: block;
      min-height: 100%;
    }
    html.mobile-ui .split-view.has-customer-detail .split-detail {
      display: block;
      min-height: 100%;
      overflow: visible;
      padding-bottom: 20px;
    }
    html.mobile-ui .customer-detail-actions { display: flex; align-items: center; gap: 7px; }
    html.mobile-ui .customer-detail-close { width: 40px; min-width: 40px; min-height: 40px; padding: 0; }

    /* Landscape uses its smaller nav strip but the same no-overlap contract. */
    html.mobile-landscape { --mobile-nav-height: 48px; }
    html.mobile-landscape .app-shell:not(.auth-mode) { height: calc(100dvh - var(--mobile-nav-total)); }

    @media (max-height: 690px) and (orientation: portrait) {
      html.mobile-ui .work-timeline.is-demo-stretch {
        height: auto;
        min-height: 100%;
        grid-template-rows: 34px repeat(var(--work-staff-count), minmax(46px, 1fr));
      }
      html.mobile-ui .work-timeline.is-demo-stretch .work-resource-row { min-height: 46px; }
    }


    /* Network and controlled PWA-update states are product UI, not raw browser messages. */
    .network-status,
    .pwa-update-banner {
      position: fixed;
      z-index: 150;
      right: 18px;
      bottom: 18px;
      max-width: min(390px, calc(100vw - 36px));
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      border: 1px solid var(--line-strong);
      border-radius: var(--radius-lg);
      color: var(--ink);
      background: var(--paper-raised);
      box-shadow: var(--shadow-small);
    }
    .network-status[hidden], .pwa-update-banner[hidden] { display: none; }
    .network-status { border-left: 4px solid var(--amber); }
    .network-status strong, .network-status small,
    .pwa-update-copy strong, .pwa-update-copy small { display: block; }
    .network-status small, .pwa-update-copy small { color: var(--ink-soft); font-size: 10px; }
    .pwa-update-copy { min-width: 0; flex: 1; }
    .pwa-update-banner { border-left: 4px solid var(--blue); }
    .pwa-update-banner .button { flex: 0 0 auto; }
    html.mobile-ui .network-status,
    html.mobile-ui .pwa-update-banner {
      right: 10px;
      bottom: var(--mobile-content-bottom);
      left: 10px;
      max-width: none;
    }