:root {
  color-scheme: light dark;
  --canvas: #f6f4ee;
  --canvas-deep: #eceae3;
  --paper: rgba(255, 255, 255, .90);
  --paper-solid: #fff;
  --paper-muted: #f7f6f2;
  --ink: #20242d;
  --muted: #6c7280;
  --subtle: #9499a3;
  --line: rgba(47, 55, 72, .13);
  --line-strong: rgba(47, 55, 72, .23);
  --accent: #5369c6;
  --accent-deep: #3d4f9e;
  --accent-soft: #edf0ff;
  --warm: #d78b50;
  --warm-soft: #fff1e4;
  --success: #38816c;
  --success-soft: #e7f4ef;
  --warning: #9a672e;
  --warning-soft: #fbefdc;
  --danger: #aa4f55;
  --danger-soft: #fae9ea;
  --closed: #efefeb;
  --shadow: 0 24px 70px rgba(35, 42, 55, .10);
  --shadow-soft: 0 10px 30px rgba(35, 42, 55, .075);
  --radius-xl: 27px;
  --radius-lg: 19px;
  --grid-header: 62px;
  --slot-height: 43px;
  --time-column: 58px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Noto Sans", sans-serif;
}

* { box-sizing: border-box; }
html { min-width: 320px; overflow-x: hidden; background: var(--canvas); scroll-behavior: smooth; }
html[dir="rtl"] { font-family: "Noto Sans Arabic", Tahoma, Arial, sans-serif; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; color: var(--ink); background: linear-gradient(150deg, var(--canvas), #fbfaf7 46%, var(--canvas-deep)); }
button, input, textarea, select { font: inherit; }
button, select { color: inherit; }
button, a, select { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid rgba(83,105,198,.32); outline-offset: 2px; }
[hidden] { display: none !important; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.entry-loader { position: fixed; z-index: 500; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--accent-deep); background: radial-gradient(circle at 50% 44%,#fff 0,#f6f4ee 42%,#e9edf8 100%); transition: opacity .48s ease, visibility .48s ease; }
.entry-loader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.entry-loader__mark { position: relative; z-index: 2; width: 78px; height: 78px; border: 1px solid rgba(83,105,198,.18); border-radius: 25px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--accent-deep),var(--accent) 61%,#7387df); box-shadow: 0 22px 55px rgba(55,70,135,.25); animation: loader-mark 1.8s ease-in-out infinite; }
.entry-loader__mark svg { width: 52px; height: 52px; }
.entry-loader__mark circle { fill: #ffbd72; }
.entry-loader__orbit { position: absolute; left: 50%; top: 50%; width: 164px; height: 164px; margin: -96px 0 0 -82px; border: 1px solid rgba(83,105,198,.13); border-radius: 50%; animation: loader-orbit 4.5s linear infinite; }
.entry-loader__orbit::before { content:""; position:absolute; inset:18px; border:1px dashed rgba(215,139,80,.26); border-radius:50%; }
.entry-loader__orbit i { position:absolute; width:10px; height:10px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(83,105,198,.10); }
.entry-loader__orbit i:nth-child(1) { left:13px; top:43px; }
.entry-loader__orbit i:nth-child(2) { right:13px; bottom:43px; background:var(--warm); box-shadow:0 0 0 6px rgba(215,139,80,.10); }
.entry-loader__orbit i:nth-child(3) { left:77px; bottom:-5px; width:7px; height:7px; }
.entry-loader > strong { margin-top:13px; font-size:16px; letter-spacing:.18em; }
.entry-loader__line { width:112px; height:3px; border-radius:99px; overflow:hidden; background:rgba(83,105,198,.12); }
.entry-loader__line::after { content:""; display:block; width:46%; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--accent),var(--warm)); animation:loader-line 1.15s ease-in-out infinite alternate; }
@keyframes loader-mark { 50% { transform:translateY(-4px) rotate(-1deg); box-shadow:0 28px 62px rgba(55,70,135,.29); } }
@keyframes loader-orbit { to { transform:rotate(360deg); } }
@keyframes loader-line { to { transform:translateX(118%); } }

.ambient { position: fixed; z-index: -3; width: 44rem; height: 44rem; border-radius: 50%; pointer-events: none; filter: blur(4px); opacity: .7; animation: ambient-float 22s ease-in-out infinite alternate; }
.ambient--a { top: -31rem; left: -20rem; background: radial-gradient(circle, rgba(83,105,198,.21), transparent 68%); }
.ambient--b { right: -25rem; bottom: -34rem; background: radial-gradient(circle, rgba(215,139,80,.18), transparent 69%); animation-delay: -11s; }
.ambient-grid { position: fixed; z-index: -4; inset: 0; opacity: .21; pointer-events: none; background-image: linear-gradient(rgba(80,87,103,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(80,87,103,.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: linear-gradient(to bottom, #000, transparent 72%); }
@keyframes ambient-float { to { transform: translate3d(2rem, 1.3rem, 0) scale(1.07); } }

.schedule-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--canvas) 82%, transparent); backdrop-filter: blur(22px) saturate(1.15); -webkit-backdrop-filter: blur(22px) saturate(1.15); }
.schedule-header__inner { width: min(1520px, calc(100% - 48px)); min-height: 80px; margin: 0 auto; display: grid; grid-template-columns: minmax(170px,.6fr) minmax(180px,1fr) auto; align-items: center; gap: 24px; }
.wordmark { width: fit-content; display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 17px; font-weight: 800; letter-spacing: -.04em; text-decoration: none; }
.brand-mark { width: 43px; height: 43px; border: 1px solid rgba(83,105,198,.18); border-radius: 14px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg,#fff,#f3f2ed); box-shadow: 0 10px 25px rgba(43,49,67,.14); transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease; }
.brand-mark svg { width: 100%; height: 100%; padding: 5px; }
.wordmark:hover .brand-mark { transform: translateY(-2px) rotate(-2deg); box-shadow: 0 14px 30px rgba(43,49,67,.18); }
.version-chip { min-width: 30px; height: 19px; border-radius: 7px; display: grid; place-items: center; color: var(--accent-deep); background: var(--accent-soft); font-size: 9px; font-weight: 850; letter-spacing: 0; }
.schedule-title h1 { margin: 0; font-size: 20px; font-weight: 760; letter-spacing: -.035em; }
.schedule-title p { margin: 4px 0 0; overflow: hidden; color: var(--muted); font-size: 11px; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.header-actions { min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.connection, .account-button, .language-control { min-height: 40px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-soft); }
.connection { padding: 0 13px; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 11px; font-weight: 720; }
.connection i { width: 8px; height: 8px; border-radius: 50%; background: #ba8d45; box-shadow: 0 0 0 4px rgba(186,141,69,.12); transition: .3s ease; }
.connection.is-online i { background: var(--success); box-shadow: 0 0 0 4px rgba(56,129,108,.13); }
.connection.is-error i { background: var(--danger); box-shadow: 0 0 0 4px rgba(170,79,85,.12); }
.account-button { max-width: 220px; padding: 4px 13px 4px 5px; display: inline-flex; align-items: center; gap: 8px; border-color: rgba(83,105,198,.18); cursor: pointer; font-size: 11px; font-weight: 740; transition: transform .2s ease, border-color .2s ease; }
.account-button:hover { transform: translateY(-1px); border-color: rgba(83,105,198,.36); }
.account-button__avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--accent),#7084dd); font-size: 11px; }
#accountButtonLabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.language-control { position: relative; padding: 0; overflow: hidden; }
.language-control select { min-width: 72px; height: 38px; border: 0; padding: 0 28px 0 11px; color: var(--muted); background: transparent; outline: none; cursor: pointer; font-size: 10px; font-weight: 760; }
html[dir="rtl"] .language-control select { padding: 0 11px 0 28px; }

.timezone-notice { width: min(1520px, calc(100% - 48px)); min-height: 44px; margin: 14px auto -8px; padding: 8px 11px 8px 14px; border: 1px solid rgba(83,105,198,.18); border-radius: 14px; display: flex; align-items: center; gap: 9px; color: var(--accent-deep); background: color-mix(in srgb,var(--accent-soft) 78%,transparent); font-size: 11px; box-shadow: var(--shadow-soft); animation: notice-enter .4s cubic-bezier(.2,.8,.2,1) both; }
.timezone-notice__icon { width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff; background: var(--accent); }
.timezone-notice button { margin-inline-start: auto; width: 27px; height: 27px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; }
.timezone-notice button:hover { background: rgba(83,105,198,.10); }
@keyframes notice-enter { from { opacity: 0; transform: translateY(-5px); } }

.schedule-shell { width: min(1520px, calc(100% - 48px)); margin: 26px auto 72px; display: grid; grid-template-columns: minmax(0,1fr) 370px; gap: 20px; align-items: start; }
.calendar-panel, .booking-panel, .my-bookings { border: 1px solid var(--line); border-radius: var(--radius-xl); background: var(--paper); box-shadow: var(--shadow); }
.calendar-panel { min-width: 0; overflow: hidden; isolation: isolate; animation: panel-in .46s cubic-bezier(.2,.75,.2,1) both; }
.booking-panel { position: sticky; top: 101px; padding: 24px; animation: panel-in .46s .07s cubic-bezier(.2,.75,.2,1) both; }
.my-bookings { grid-column: 1/-1; padding: 26px; animation: panel-in .46s .12s cubic-bezier(.2,.75,.2,1) both; }
@keyframes panel-in { from { opacity: 0; transform: translateY(11px) scale(.995); } }

.calendar-toolbar { padding: 27px 27px 17px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; }
.calendar-heading { min-width: 0; }
.kicker { margin: 0 0 7px; color: var(--accent-deep); font-size: 9px; font-weight: 860; letter-spacing: .14em; text-transform: uppercase; }
.calendar-toolbar h2, .booking-panel h2, .my-bookings h2, .modal h2 { margin: 0; font-size: 24px; font-weight: 770; letter-spacing: -.045em; }
.week-label { margin: 7px 0 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.week-actions { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; }
.icon-button, .today-button, .now-button, .secondary-button, .danger-button, .text-button { border: 1px solid var(--line); border-radius: 13px; background: var(--paper-solid); cursor: pointer; font-weight: 720; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.icon-button { width: 42px; height: 42px; font-size: 17px; }
.today-button { min-height: 42px; padding: 0 15px; }
.icon-button:hover, .today-button:hover, .now-button:hover, .secondary-button:hover { border-color: var(--line-strong); background: var(--paper-muted); box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.icon-button:active, .today-button:active, .now-button:active, .secondary-button:active { transform: scale(.98); }
.icon-button:disabled { opacity: .32; cursor: not-allowed; transform: none; box-shadow: none; }

.calendar-context { margin: 0 27px 17px; padding: 12px; border: 1px solid var(--line); border-radius: 17px; display: grid; grid-template-columns: minmax(205px,.72fr) minmax(390px,1.45fr) auto; align-items: center; gap: 12px; background: var(--paper-muted); }
.timezone-control { min-width: 0; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: 9px; color: var(--muted); font-size: 10px; font-weight: 720; }
.timezone-control select { width: 100%; min-height: 38px; border: 1px solid var(--line); border-radius: 11px; padding: 0 31px 0 10px; color: var(--ink); background: var(--paper-solid); outline: none; cursor: pointer; font-size: 10px; font-weight: 680; text-overflow: ellipsis; }
.timezone-readout { min-width: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px; overflow: visible; }
.clock-card { min-width: 0; min-height: 54px; padding: 8px 10px; border: 1px solid rgba(83,105,198,.15); border-radius: 13px; display: flex; align-items: center; gap: 9px; color: var(--muted); background: linear-gradient(145deg,var(--paper-solid),var(--accent-soft)); box-shadow:0 7px 18px rgba(55,66,102,.07); }
.clock-card > span { min-width:0; display:grid; gap:2px; }
.clock-card small { color:var(--subtle); font-size:8px; font-style:normal; font-weight:780; letter-spacing:.035em; }
.clock-card b { overflow:hidden; color:var(--ink); font-size:10px; font-weight:750; font-variant-numeric:tabular-nums; text-overflow:ellipsis; white-space:nowrap; }
.clock-card i { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow:0 0 0 5px rgba(83,105,198,.10); }
.clock-card--la { border-color:rgba(215,139,80,.18); background:linear-gradient(145deg,var(--paper-solid),var(--warm-soft)); }
.clock-card--la i { background: var(--warm); box-shadow:0 0 0 5px rgba(215,139,80,.10); }
.clock-difference { grid-column:1/-1; margin:-1px 2px 0; overflow:hidden; color:var(--subtle); font-size:8px; font-style:normal; font-weight:680; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.now-button { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: var(--accent-deep); font-size: 10px; white-space: nowrap; }
.now-button__dot { width: 7px; height: 7px; border-radius: 50%; background: #c35d58; box-shadow: 0 0 0 4px rgba(195,93,88,.11); animation: quiet-pulse 2.8s ease-in-out infinite; }
@keyframes quiet-pulse { 50% { box-shadow: 0 0 0 8px rgba(195,93,88,0); } }

.legend { padding: 0 27px 17px; display: flex; flex-wrap: wrap; align-items: center; gap: 9px 18px; color: var(--muted); font-size: 10px; }
.legend > span { display: inline-flex; align-items: center; gap: 7px; }
.legend b { font-weight: 700; }
.legend-dot { width: 9px; height: 9px; border-radius: 3px; }
.legend-dot--available { background: var(--success); }
.legend-dot--occupied { background: var(--warning); }
.legend-dot--closed { border: 1px solid var(--line-strong); background: var(--closed); }
.legend__duration { margin-inline-start: auto; color: var(--subtle); }

.day-tabs { display: none; margin: 0 18px 12px; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; }
.day-tab { min-width: 0; min-height: 50px; border: 1px solid transparent; border-radius: 12px; padding: 6px 3px; display: grid; place-content: center; gap: 2px; color: var(--muted); background: transparent; cursor: pointer; text-align: center; transition: .18s ease; }
.day-tab:hover { background: var(--paper-muted); transform: translateY(-1px); }
.day-tab strong { overflow: hidden; color: var(--ink); font-size: 10px; text-overflow: ellipsis; }
.day-tab span { overflow: hidden; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.day-tab.is-today strong { color: var(--accent-deep); }
.day-tab.is-active { border-color: rgba(83,105,198,.31); background: var(--accent-soft); }

.schedule-stage { position: relative; height: min(72vh, 820px); min-height: 520px; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-top: 1px solid var(--line); background: color-mix(in srgb,var(--paper-solid) 88%,transparent); scroll-behavior: smooth; }
.schedule-stage::-webkit-scrollbar { width: 10px; }
.schedule-stage::-webkit-scrollbar-track { background: transparent; }
.schedule-stage::-webkit-scrollbar-thumb { border: 3px solid transparent; border-radius: 999px; background: rgba(72,78,93,.24); background-clip: padding-box; }
.week-grid { position: relative; min-width: 0; display: grid; grid-template-columns: var(--time-column) repeat(var(--visible-days), minmax(0,1fr)); grid-template-rows: var(--grid-header) repeat(48,var(--slot-height)); direction: ltr; user-select: none; touch-action: pan-y; }
.week-grid.is-selecting { cursor:crosshair; }
.week-grid__corner, .week-grid__day { position: sticky; top: 0; z-index: 8; border-bottom: 1px solid var(--line); background: color-mix(in srgb,var(--paper-solid) 92%,transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.week-grid__corner { left: 0; z-index: 10; border-inline-end: 1px solid var(--line); }
.week-grid__day { min-width: 0; border-inline-end: 1px solid var(--line); display: grid; place-content: center; gap: 3px; text-align: center; }
.week-grid__day strong { color: var(--ink); font-size: 11px; }
.week-grid__day span { color: var(--muted); font-size: 9px; }
.week-grid__day.is-today strong { color: var(--accent-deep); }
.week-grid__day.is-today::after { content: ""; width: 20px; height: 2px; margin: 1px auto 0; border-radius: 99px; background: var(--accent); }
.week-grid__time { position: relative; z-index: 2; border-inline-end: 1px solid var(--line); border-bottom: 1px solid rgba(47,55,72,.07); display: flex; justify-content: center; color: var(--subtle); background: var(--paper-solid); font-size: 9px; font-variant-numeric: tabular-nums; }
.week-grid__time span { transform: translateY(-6px); }
.week-grid__time.is-hour { border-bottom-color: rgba(47,55,72,.13); color: var(--muted); }
.slot { position: relative; min-width: 0; min-height: var(--slot-height); border: 0; border-inline-end: 1px solid rgba(47,55,72,.08); border-bottom: 1px solid rgba(47,55,72,.07); padding: 3px; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: transparent; font-size: 9px; font-weight: 690; transition: background .14s ease, box-shadow .14s ease, color .14s ease, transform .14s ease; }
button.slot { cursor: pointer; }
.slot::before { content: ""; position: absolute; inset: 3px; z-index: -1; border: 1px solid transparent; border-radius: 9px; transition: .14s ease; }
.slot--available { color: var(--success); }
.slot--available::before { border-color: rgba(56,129,108,.15); background: var(--success-soft); }
.slot--occupied { color: var(--warning); }
.slot--occupied::before { border-color: rgba(154,103,46,.16); background: var(--warning-soft); }
.slot--closed { color: var(--subtle); }
.slot--closed::before { background: color-mix(in srgb,var(--closed) 72%,transparent); }
button.slot:hover { z-index: 3; transform: translateY(-1px); }
button.slot:hover::before { border-color: currentColor; box-shadow: 0 6px 17px rgba(42,47,60,.10); }
.slot.is-selected { z-index: 4; color: #fff; }
.slot.is-selected::before { border-color: transparent; background: linear-gradient(145deg,var(--accent),#6f82da); box-shadow: 0 7px 17px rgba(83,105,198,.25); }
.slot.is-drag-preview:not(.is-selected)::before { border-color: var(--accent); background: rgba(83,105,198,.13); box-shadow: inset 0 0 0 1px rgba(83,105,198,.12); }
.slot.is-drag-preview { z-index:5; transform:scale(.975); }
.slot.is-drag-preview::after { content:""; position:absolute; inset:1px; border-radius:10px; pointer-events:none; background:linear-gradient(115deg,transparent 18%,rgba(255,255,255,.38) 46%,transparent 72%); transform:translateX(-115%); animation:selection-sheen .72s ease infinite; }
.slot.is-just-selected { animation:selection-pop .38s cubic-bezier(.2,.85,.24,1) both; }
@keyframes selection-sheen { to { transform:translateX(115%); } }
@keyframes selection-pop { 45% { transform:scale(.94); } }
.slot:disabled { cursor: default; }
.slot__state { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.now-marker { position: absolute; z-index: 7; left: calc(var(--time-column) + (100% - var(--time-column)) / var(--visible-days) * var(--now-day)); top: calc(var(--grid-header) + var(--slot-height) * var(--now-index)); width: calc((100% - var(--time-column)) / var(--visible-days)); height: 2px; pointer-events: none; background: #c35d58; box-shadow: 0 0 0 1px rgba(195,93,88,.06); }
.now-marker::before { content: ""; position: absolute; left: -3px; top: -3px; width: 8px; height: 8px; border-radius: 50%; background: #c35d58; }
.now-marker__label { position: absolute; right: 4px; bottom: 4px; padding: 2px 5px; border-radius: 6px; color: #fff; background: #c35d58; font-size: 7px; font-weight: 760; white-space: nowrap; }

.loading-card, .empty-card, .error-card { min-height: 300px; display: grid; place-content: center; justify-items: center; gap: 12px; padding: 28px; color: var(--muted); text-align: center; }
.loading-card { min-height: 100%; }
.loading-spinner { width: 22px; height: 22px; border: 2px solid rgba(83,105,198,.18); border-top-color: var(--accent); border-radius: 50%; display: inline-block; animation: spin .75s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.error-card p, .empty-card p { margin: 0; max-width: 420px; font-size: 12px; line-height: 1.6; }

.booking-heading, .section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; }
.selection-count { min-width: 37px; height: 37px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--accent),#7184db); box-shadow: 0 8px 19px rgba(83,105,198,.22); font-size: 12px; font-weight: 820; font-variant-numeric: tabular-nums; }
.login-gate { margin-top: 20px; padding: 14px; border: 1px solid rgba(83,105,198,.17); border-radius: 17px; display: grid; grid-template-columns: auto 1fr; gap: 10px; background: var(--accent-soft); }
.login-gate__icon { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: #fff; background: var(--accent); }
.login-gate strong { font-size: 11px; }
.login-gate p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.login-gate .secondary-button { grid-column: 1/-1; width: 100%; }
.empty-selection { min-height: 155px; margin-top: 18px; border: 1px dashed var(--line-strong); border-radius: 17px; display: grid; place-content: center; justify-items: center; gap: 7px; padding: 20px; color: var(--muted); text-align: center; }
.empty-selection > span { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; color: var(--accent); background: var(--accent-soft); font-size: 18px; }
.empty-selection p { margin: 0; max-width: 250px; font-size: 11px; line-height: 1.58; }
.selection-summary { max-height: 210px; margin-top: 18px; overflow-y: auto; display: grid; gap: 7px; }
.selection-item { padding: 10px 11px; border: 1px solid rgba(56,129,108,.14); border-radius: 12px; background: var(--success-soft); }
.selection-item--waitlist { border-color: rgba(154,103,46,.14); background: var(--warning-soft); }
.selection-item__primary { color: var(--ink); font-size: 10px; font-weight: 720; line-height: 1.45; }
.selection-item__secondary { margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }

#bookingForm { margin-top: 19px; }
#bookingForm > label, .field-heading label, .modal form label { display: block; margin: 0 0 7px; color: var(--ink); font-size: 10px; font-weight: 760; }
#bookingForm > input, #bookingForm textarea, .locked-input, .modal input { width: 100%; border: 1px solid var(--line-strong); border-radius: 13px; color: var(--ink); background: var(--paper-solid); outline: none; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
#bookingForm > input, .modal input { min-height: 46px; padding: 0 12px; }
#bookingForm textarea { min-height: 126px; padding: 12px; resize: vertical; line-height: 1.55; }
#bookingForm > input:focus, #bookingForm textarea:focus, .modal input:focus { border-color: rgba(83,105,198,.58); box-shadow: 0 0 0 4px rgba(83,105,198,.09); }
.locked-input { min-height: 46px; display: flex; align-items: center; margin-bottom: 17px; background: var(--paper-muted); }
.locked-input input { min-width: 0; flex: 1; height: 44px; border: 0; padding: 0 12px; color: var(--muted); background: transparent; outline: none; }
.locked-input span { margin-inline-end: 12px; color: var(--success); }
.field-heading { margin: 17px 0 7px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.field-heading label { margin: 0; }
.ai-button { min-height: 28px; border: 1px solid rgba(83,105,198,.18); border-radius: 9px; padding: 0 9px; display: inline-flex; align-items: center; gap: 5px; color: var(--accent-deep); background: var(--accent-soft); cursor: pointer; font-size: 8px; font-weight: 790; transition: .18s ease; }
.ai-button:hover { transform: translateY(-1px); border-color: rgba(83,105,198,.38); box-shadow: 0 5px 12px rgba(83,105,198,.10); }
.content-choice { margin: 12px 0 0; padding: 8px 10px; border: 1px solid rgba(83,105,198,.15); border-radius: 11px; display: flex; align-items: center; gap: 6px; color: var(--muted); background: var(--accent-soft); font-size: 9px; }
.content-choice strong { color: var(--accent-deep); }
.content-choice button { margin-inline-start: auto; border: 0; color: var(--accent-deep); background: transparent; cursor: pointer; font-weight: 750; }
.form-rules { margin: 14px 0; padding: 11px; border-radius: 13px; background: var(--paper-muted); }
.form-rules p { margin: 0; display: flex; align-items: flex-start; gap: 7px; color: var(--muted); font-size: 8px; line-height: 1.5; }
.form-rules p + p { margin-top: 6px; }
.form-rules p > span:first-child { color: var(--accent); font-size: 10px; }
.submit-button { width: 100%; min-height: 47px; border: 0; border-radius: 14px; color: #fff; background: linear-gradient(135deg,var(--accent-deep),var(--accent) 58%,#7184db); box-shadow: 0 11px 24px rgba(83,105,198,.23); cursor: pointer; font-weight: 780; transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease; }
.submit-button:hover { transform: translateY(-1px); box-shadow: 0 14px 29px rgba(83,105,198,.29); }
.submit-button:active { transform: scale(.99); }
.submit-button:disabled { opacity: .55; cursor: wait; transform: none; }
.form-message { min-height: 18px; margin: 8px 0 0; color: var(--danger); font-size: 9px; line-height: 1.5; }
.request-result { margin-top: 20px; text-align: center; }
.result-icon { width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--success),#55a18b); box-shadow: 0 10px 24px rgba(56,129,108,.22); font-size: 20px; }
.request-result h3 { margin: 0; font-size: 18px; }
.request-result > p { color: var(--muted); font-size: 10px; line-height: 1.55; }
.request-result dl { margin: 14px 0; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; text-align: start; }
.request-result dl > div { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.request-result dl > div + div { border-top: 1px solid var(--line); }
.request-result dt { color: var(--muted); font-size: 9px; }
.request-result dd { margin: 0; overflow-wrap: anywhere; font-size: 9px; font-weight: 750; }
.secondary-button, .danger-button { min-height: 39px; padding: 0 13px; font-size: 10px; }

.section-heading { align-items: center; }
.section-heading__actions { display: flex; align-items: center; gap: 8px; }
.admin-badge { padding: 5px 8px; border-radius: 8px; color: var(--warning); background: var(--warning-soft); font-size: 8px; font-weight: 800; }
.booking-list { margin-top: 18px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; }
.booking-record { min-width: 0; border: 1px solid var(--line); border-radius: 16px; padding: 14px; background: var(--paper-muted); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.booking-record:hover { transform: translateY(-2px); border-color: var(--line-strong); box-shadow: var(--shadow-soft); }
.booking-record__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.booking-record__top h3 { margin: 0; font-size: 12px; line-height: 1.35; }
.status-pill { flex: 0 0 auto; padding: 4px 7px; border-radius: 8px; color: var(--warning); background: var(--warning-soft); font-size: 7px; font-weight: 800; }
.status-pill[data-status="approved"] { color: var(--success); background: var(--success-soft); }
.status-pill[data-status="rejected"], .status-pill[data-status="cancelled"] { color: var(--danger); background: var(--danger-soft); }
.booking-record__summary { margin: 8px 0 0; color: var(--muted); font-size: 9px; line-height: 1.52; white-space: pre-wrap; }
.booking-record__meta { margin-top: 11px; display: grid; gap: 5px; color: var(--muted); font-size: 8px; }
.booking-record__meta span { overflow-wrap: anywhere; }
.booking-record__actions { margin-top: 11px; display: flex; justify-content: flex-end; }
.booking-record__cancel { min-height: 32px; border: 1px solid rgba(170,79,85,.19); border-radius: 10px; padding: 0 10px; color: var(--danger); background: var(--danger-soft); cursor: pointer; font-size: 8px; font-weight: 760; }
.booking-record__cancel:disabled { opacity: .45; cursor: not-allowed; }
.booking-list__empty { grid-column: 1/-1; min-height: 130px; display: grid; place-items: center; color: var(--muted); font-size: 11px; }

.modal { width: min(500px,calc(100% - 28px)); max-height: min(88vh,760px); border: 1px solid var(--line); border-radius: 24px; padding: 27px; overflow-y: auto; color: var(--ink); background: color-mix(in srgb,var(--paper-solid) 96%,transparent); box-shadow: 0 30px 90px rgba(25,30,42,.28); }
.modal::backdrop { background: rgba(26,30,39,.37); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px); animation: backdrop-in .2s ease both; }
.modal[open] { animation: modal-in .28s cubic-bezier(.2,.8,.2,1) both; }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes backdrop-in { from { opacity: 0; } }
.modal__close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 10px; color: var(--muted); background: var(--paper-muted); cursor: pointer; font-size: 18px; }
html[dir="rtl"] .modal__close { right: auto; left: 14px; }
.modal__mark { width: 47px; height: 47px; margin-bottom: 14px; border-radius: 15px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--accent),#7184db); box-shadow: 0 10px 25px rgba(83,105,198,.22); font-weight: 820; }
.modal__lead { margin: 8px 0 20px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.modal form input { margin-bottom: 12px; }
.otp-destination { margin: 0 0 12px; color: var(--accent-deep); font-size: 10px; font-weight: 720; }
.otp-input { text-align: center; font-size: 23px !important; font-weight: 780; letter-spacing: .3em; font-variant-numeric: tabular-nums; }
.spam-hint { padding: 9px 10px; border-radius: 11px; display: flex; gap: 7px; color: var(--warning); background: var(--warning-soft); font-size: 8px; line-height: 1.5; }
.text-button { width: 100%; min-height: 36px; margin-top: 8px; border: 0; color: var(--accent-deep); background: transparent; font-size: 9px; }
.modal__heading { display: flex; align-items: center; gap: 13px; }
.ai-orb { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,var(--accent-deep),var(--accent),var(--warm)); box-shadow: 0 10px 25px rgba(83,105,198,.22); animation: orb-breathe 3.6s ease-in-out infinite; }
@keyframes orb-breathe { 50% { transform: rotate(4deg) scale(1.04); } }
.ai-loading { min-height: 190px; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.ai-options { display: grid; gap: 10px; }
.draft-option { position: relative; border: 1px solid var(--line); border-radius: 16px; padding: 14px; display: grid; grid-template-columns: auto 1fr; gap: 10px; background: var(--paper-muted); cursor: pointer; transition: .18s ease; }
.draft-option:has(input:checked) { border-color: rgba(83,105,198,.43); box-shadow: 0 0 0 3px rgba(83,105,198,.07); }
.draft-option input { width: 16px; height: 16px; margin: 1px 0 0; accent-color: var(--accent); }
.draft-option > span { min-width: 0; display: grid; gap: 5px; }
.draft-option b { color: var(--accent-deep); font-size: 9px; }
.draft-option strong { font-size: 12px; line-height: 1.4; }
.draft-option em { color: var(--warm); font-size: 9px; font-style: normal; font-weight: 710; line-height: 1.5; }
.draft-option small { max-height: 90px; overflow-y: auto; color: var(--muted); font-size: 9px; line-height: 1.55; white-space: pre-wrap; }
.account-email { padding: 11px; border-radius: 12px; color: var(--accent-deep); background: var(--accent-soft); font-size: 11px; font-weight: 710; overflow-wrap: anywhere; }
.account-modal .secondary-button, .account-modal .danger-button { width: 100%; }
.account-modal .danger-button { margin-top: 8px; border-color: rgba(170,79,85,.18); color: var(--danger); background: var(--danger-soft); }

.toast { position: fixed; z-index: 100; left: 50%; bottom: max(24px,env(safe-area-inset-bottom)); max-width: min(440px,calc(100% - 32px)); transform: translateX(-50%); padding: 11px 15px; border: 1px solid rgba(56,129,108,.18); border-radius: 13px; color: var(--success); background: color-mix(in srgb,var(--success-soft) 94%,transparent); box-shadow: 0 14px 38px rgba(28,38,42,.18); font-size: 10px; font-weight: 710; animation: toast-in .25s ease both; }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%,8px); } }
.celebration-canvas { position:fixed; z-index:190; inset:0; width:100%; height:100%; pointer-events:none; }
.request-result:not([hidden]) .result-icon { animation:result-arrive .6s cubic-bezier(.2,.9,.2,1) both; }
@keyframes result-arrive { from { opacity:0; transform:translateY(12px) scale(.55) rotate(-12deg); } 70% { transform:translateY(-2px) scale(1.08) rotate(2deg); } }
.mobile-selection { display: none; }

@media (max-width: 1180px) {
  .schedule-shell { grid-template-columns: minmax(0,1fr); }
  .booking-panel { position: static; }
  .calendar-context { grid-template-columns: minmax(200px,.9fr) minmax(280px,1.1fr); }
  .now-button { grid-column: 1/-1; }
  .booking-list { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .day-tabs { display: grid; }
}

@media (max-width: 820px) {
  :root { --slot-height: 46px; --time-column: 54px; }
  .schedule-header__inner { width: min(100% - 28px,760px); min-height: 72px; grid-template-columns: 1fr auto; gap: 12px; }
  .schedule-title, .connection { display: none; }
  .wordmark__name { font-size: 15px; }
  .header-actions { gap: 7px; }
  .account-button { max-width: 160px; }
  .timezone-notice, .schedule-shell { width: min(100% - 28px,760px); }
  .schedule-shell { margin-top: 18px; }
  .calendar-toolbar { padding: 21px 19px 15px; }
  .calendar-toolbar h2, .booking-panel h2, .my-bookings h2 { font-size: 21px; }
  .calendar-context { margin: 0 19px 15px; grid-template-columns: minmax(0,1fr); }
  .timezone-readout { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .now-button { grid-column: auto; }
  .legend { padding: 0 19px 15px; }
  .legend__duration { width: 100%; margin-inline-start: 0; }
  .schedule-stage { height: min(67vh,700px); min-height: 480px; }
  .booking-panel, .my-bookings { padding: 20px; }
}

@media (max-width: 620px) {
  :root { --grid-header: 58px; --slot-height: 48px; --time-column: 50px; --radius-xl: 21px; }
  .schedule-header__inner { width: calc(100% - 22px); min-height: 66px; }
  .brand-mark { width: 38px; height: 38px; border-radius: 12px; }
  .version-chip, .wordmark__name { display: none; }
  .account-button { max-width: 122px; padding-inline-end: 9px; }
  .account-button__avatar { width: 28px; height: 28px; }
  .language-control select { min-width: 66px; }
  .timezone-notice, .schedule-shell { width: calc(100% - 20px); }
  .timezone-notice { margin-top: 10px; font-size: 9px; }
  .schedule-shell { margin-top: 12px; margin-bottom: 90px; gap: 13px; }
  .calendar-toolbar { align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .week-actions { margin-inline-start: auto; }
  .calendar-toolbar h2 { font-size: 20px; }
  .week-actions { gap: 5px; }
  .icon-button { width: 38px; height: 38px; }
  .today-button { min-height: 38px; padding: 0 11px; font-size: 9px; }
  .timezone-control { grid-template-columns: 1fr; gap: 6px; }
  .timezone-readout { grid-template-columns:minmax(0,1fr); gap:6px; }
  .clock-difference { grid-column:auto; }
  .legend { gap: 8px 13px; }
  .day-tabs { margin-inline: 10px; grid-template-columns: repeat(7,minmax(42px,1fr)); overflow-x: auto; scrollbar-width: none; }
  .day-tabs::-webkit-scrollbar { display: none; }
  .day-tab { min-height: 46px; }
  .schedule-stage { height: 63vh; min-height: 430px; }
  .slot { font-size: 10px; }
  .booking-list { grid-template-columns: minmax(0,1fr); }
  .my-bookings { padding: 18px; }
  .section-heading { align-items: flex-start; }
  .section-heading__actions { flex-direction: column; align-items: flex-end; }
  .mobile-selection { position: fixed; z-index: 45; left: 12px; right: 12px; bottom: max(12px,env(safe-area-inset-bottom)); min-height: 52px; border: 0; border-radius: 16px; padding: 0 16px; align-items: center; gap: 10px; color: #fff; background: linear-gradient(135deg,var(--accent-deep),var(--accent),#7386dc); box-shadow: 0 16px 35px rgba(51,66,128,.30); cursor: pointer; }
  .mobile-selection:not([hidden]) { display: flex; }
  .mobile-selection span:first-child { min-width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: rgba(255,255,255,.17); font-size: 10px; }
  .mobile-selection strong { flex: 1; text-align: start; font-size: 11px; }
  .modal { padding: 23px 18px 20px; border-radius: 21px; }
}

@media (prefers-color-scheme: dark) {
  :root {
    --canvas: #181b22; --canvas-deep: #11141a; --paper: rgba(31,35,44,.91); --paper-solid: #252a34; --paper-muted: #20242d;
    --ink: #f0f2f6; --muted: #a9afbb; --subtle: #7f8693; --line: rgba(224,229,240,.11); --line-strong: rgba(224,229,240,.19);
    --accent: #8296ed; --accent-deep: #a9b6f7; --accent-soft: #292f48; --warm: #e7a66d; --warm-soft: #402f25;
    --success: #78b8a4; --success-soft: #223b34; --warning: #d9aa68; --warning-soft: #3c3123; --danger: #e39499; --danger-soft: #42292d; --closed: #272b32;
    --shadow: 0 24px 70px rgba(0,0,0,.25); --shadow-soft: 0 10px 30px rgba(0,0,0,.17);
  }
  .brand-mark { background: linear-gradient(145deg,#2a303c,#20242c); }
  .ambient-grid { opacity: .11; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}