.appt-page { --appt-radius:14px; min-width:0; }
.appt-page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:16px; }
.appt-page-title { margin:0; font-size:1.25rem; }
.appt-page-subtitle { color:var(--text-muted); font-size:.78rem; margin-top:4px; }
.appt-header-actions { display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }
.appt-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; background:var(--bg-card); border:1px solid var(--border-color); border-radius:var(--appt-radius); padding:10px; margin-bottom:12px; }
.appt-toolbar-spacer { flex:1; }
.appt-view-toggle { display:inline-flex; border:1px solid var(--border-color); border-radius:9px; overflow:hidden; background:var(--bg-card); }
.appt-view-toggle button { border:0; border-right:1px solid var(--border-color); background:transparent; color:var(--text-muted); padding:7px 10px; min-height:34px; font-size:.75rem; cursor:pointer; white-space:nowrap; }
.appt-view-toggle button:last-child { border-right:0; }
.appt-view-toggle button.active { background:var(--primary); color:#fff; }
.appt-toolbar input,.appt-toolbar select { min-height:34px; font-size:.78rem; border:1px solid var(--border-color); border-radius:9px; background:var(--bg-card); color:var(--text-primary); padding:6px 9px; }
.appt-table-wrap { border:1px solid var(--border-color); border-radius:var(--appt-radius); overflow:auto; background:var(--bg-card); }
.appt-table { width:100%; border-collapse:collapse; font-size:.82rem; }
.appt-table th { color:var(--text-muted); font-size:.7rem; text-transform:uppercase; letter-spacing:.04em; padding:10px 12px; text-align:left; border-bottom:1px solid var(--border-color); white-space:nowrap; }
.appt-table td { padding:11px 12px; border-bottom:1px solid var(--border-color); vertical-align:middle; }
.appt-table tr:last-child td { border-bottom:0; }
.appt-table tbody tr { cursor:pointer; transition:background .15s; }
.appt-table tbody tr:hover { background:rgba(99,102,241,.05); }
.appt-status-badge { display:inline-flex; align-items:center; gap:5px; border-radius:999px; padding:4px 9px; font-size:.7rem; font-weight:700; white-space:nowrap; }
.appt-status-badge.pending { color:#4f46e5; background:rgba(99,102,241,.12); }
.appt-status-badge.confirmed { color:#1d4ed8; background:rgba(37,99,235,.12); }
.appt-status-badge.completed { color:#047857; background:rgba(5,150,105,.12); }
.appt-status-badge.cancelled { color:#b91c1c; background:rgba(220,38,38,.1); }
.appt-status-badge.no_show { color:#b45309; background:rgba(217,119,6,.12); }
.appt-row-actions { display:flex; gap:5px; justify-content:flex-end; flex-wrap:wrap; }
.appt-icon-btn { width:30px; height:30px; display:inline-grid; place-items:center; border:1px solid var(--border-color); border-radius:8px; color:var(--text-muted); background:var(--bg-card); cursor:pointer; }
.appt-icon-btn:hover { color:#fff; background:var(--primary); border-color:var(--primary); }
.appt-icon-btn.danger:hover { background:var(--danger,#dc2626); border-color:var(--danger,#dc2626); }
.appt-empty { text-align:center; color:var(--text-muted); padding:48px 16px; }
.appt-empty i { display:block; font-size:2rem; opacity:.35; margin-bottom:10px; }
.appt-calendar { border:1px solid var(--border-color); border-radius:var(--appt-radius); background:var(--bg-card); overflow:hidden; }
.appt-cal-nav { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:10px; padding:10px; border-bottom:1px solid var(--border-color); }
.appt-cal-nav-actions { display:flex; align-items:center; gap:6px; }
.appt-cal-nav-actions:last-child { justify-content:flex-end; }
.appt-cal-title { font-weight:800; text-align:center; }
.appt-day-lane { display:grid; grid-template-columns:76px minmax(0,1fr); min-height:58px; border-bottom:1px solid var(--border-color); }
.appt-day-lane:last-child { border-bottom:0; }
.appt-day-hour { padding:12px 10px; color:var(--text-muted); font:700 .72rem var(--font-mono,monospace); border-right:1px solid var(--border-color); }
.appt-day-events { padding:6px; display:grid; gap:5px; }
.appt-cal-event { display:block; width:100%; border:1px solid var(--border-color); border-left:3px solid var(--primary); border-radius:8px; padding:7px 9px; cursor:pointer; min-width:0; background:var(--bg-secondary,#f6f7fb); color:var(--text-primary); text-align:left; font:inherit; }
.appt-cal-event:hover { border-color:var(--primary); }
.appt-cal-event-time { display:block; font-weight:800; font-size:.72rem; color:var(--primary); }
.appt-cal-event-name { display:block; font-size:.78rem; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.appt-cal-event .appt-picker-meta { display:block; }
.appt-week-scroll { overflow-x:auto; }
.appt-week-grid { min-width:840px; display:grid; grid-template-columns:repeat(7,minmax(120px,1fr)); }
.appt-week-day { min-height:330px; border-right:1px solid var(--border-color); }
.appt-week-day:last-child { border-right:0; }
.appt-week-head { padding:9px; text-align:center; font-size:.72rem; font-weight:800; border-bottom:1px solid var(--border-color); background:var(--bg-secondary,#f6f7fb); }
.appt-week-head.today { color:var(--primary); box-shadow:inset 0 -2px var(--primary); }
.appt-week-events { padding:6px; display:grid; gap:5px; }
.appt-timeline-scroll { overflow:auto; max-width:100%; background:var(--bg-card); overscroll-behavior:contain; }
.appt-timeline-scroll:focus-visible { outline:2px solid var(--primary); outline-offset:-2px; }
.appt-timeline-grid { display:grid; align-items:start; }
.appt-timeline-corner,.appt-timeline-head { position:sticky; top:0; z-index:5; height:48px; background:var(--bg-secondary,#f6f7fb); border-bottom:1px solid var(--border-color); }
.appt-timeline-corner { border-right:1px solid var(--border-color); }
.appt-timeline-head { display:grid; place-items:center; padding:5px; border-right:1px solid var(--border-color); font-size:.72rem; font-weight:800; text-align:center; }
.appt-timeline-head:last-child { border-right:0; }
.appt-timeline-head.today { color:var(--primary); box-shadow:inset 0 -2px var(--primary); }
.appt-time-axis { position:relative; border-right:1px solid var(--border-color); background:var(--bg-card); }
.appt-time-label { position:absolute; right:8px; transform:translateY(-50%); color:var(--text-muted); font:700 .65rem var(--font-mono,monospace); }
.appt-time-column { position:relative; border-right:1px solid var(--border-color); background:var(--bg-card); min-width:0; }
.appt-time-column:last-child { border-right:0; }
.appt-time-line { position:absolute; left:0; right:0; height:1px; background:var(--border-color); opacity:.72; z-index:1; pointer-events:none; }
.appt-time-closed { position:absolute; left:0; right:0; background:rgba(148,163,184,.11); background-image:repeating-linear-gradient(135deg,transparent,transparent 7px,rgba(148,163,184,.08) 7px,rgba(148,163,184,.08) 8px); z-index:0; pointer-events:none; }
.appt-time-break { position:absolute; left:0; right:0; background:rgba(245,158,11,.09); border-top:1px dashed rgba(217,119,6,.28); border-bottom:1px dashed rgba(217,119,6,.28); z-index:1; pointer-events:none; }
.appt-available-slot { position:absolute; left:4px; right:4px; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:4px; min-width:0; padding:3px 7px; border:1px dashed color-mix(in srgb,var(--primary) 48%,var(--border-color)); border-radius:7px; background:color-mix(in srgb,var(--primary) 7%,var(--bg-card)); color:var(--primary); font:750 .69rem var(--font-mono,monospace); cursor:pointer; overflow:hidden; transition:background .15s,border-color .15s,box-shadow .15s; }
.appt-available-slot:hover { background:color-mix(in srgb,var(--primary) 15%,var(--bg-card)); border-color:var(--primary); box-shadow:0 1px 4px rgba(15,23,42,.1); }
.appt-available-slot:focus-visible { outline:2px solid var(--primary); outline-offset:1px; z-index:4; }
.appt-available-slot:disabled { cursor:wait; opacity:.62; }
.appt-slot-load-state { position:absolute; z-index:2; top:8px; left:6px; right:6px; padding:6px; border:0; border-radius:7px; color:var(--text-muted); background:color-mix(in srgb,var(--bg-secondary,#f6f7fb) 88%,transparent); font-size:.68rem; text-align:center; }
.appt-slot-load-state.error { color:var(--danger,#dc2626); cursor:pointer; border:1px solid color-mix(in srgb,var(--danger,#dc2626) 25%,var(--border-color)); }
.appt-block-load-state { position:absolute; z-index:3; top:8px; left:6px; right:6px; min-height:36px; padding:6px; border:1px solid var(--border-color); border-radius:7px; color:var(--text-muted); background:var(--bg-secondary,#f6f7fb); font-size:.68rem; cursor:pointer; }
.appt-time-block { position:absolute; z-index:3; left:4px; right:4px; min-width:0; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:2px; overflow:hidden; padding:4px 7px; border:1px solid color-mix(in srgb,var(--text-muted) 38%,var(--border-color)); border-radius:7px; background:color-mix(in srgb,var(--text-muted) 12%,var(--bg-card)); color:var(--text-primary); text-align:left; cursor:pointer; box-shadow:inset 3px 0 color-mix(in srgb,var(--text-muted) 65%,transparent); }
.appt-time-block:hover { border-color:var(--text-muted); background:color-mix(in srgb,var(--text-muted) 18%,var(--bg-card)); }
.appt-time-block:focus-visible { outline:2px solid var(--primary); outline-offset:1px; z-index:6; }
.appt-time-block-time { font:800 .66rem var(--font-mono,monospace); white-space:nowrap; }
.appt-time-block-label { max-width:100%; overflow:hidden; color:var(--text-muted); font-size:.65rem; font-weight:700; text-overflow:ellipsis; white-space:nowrap; }
.appt-timeline-event { position:absolute; z-index:4; min-width:0; }
.appt-timeline-event > .appt-cal-event { height:100%; overflow:hidden; padding:5px 7px; box-shadow:0 1px 2px rgba(15,23,42,.06); }
.appt-now-line { position:absolute; left:0; right:0; height:2px; background:#ef4444; z-index:5; pointer-events:none; }
.appt-now-line::before { content:''; position:absolute; width:7px; height:7px; border-radius:50%; background:#ef4444; left:-3px; top:-2px; }
.appt-modal { max-width:720px; width:calc(100vw - 28px); max-height:92vh; display:flex; flex-direction:column; }
.appt-modal .modal-body { overflow:auto; }
.appt-modal-overlay { z-index:9000; }
.appt-modal-overlay .modal-close { min-width:44px; min-height:44px; }
.appt-stepper { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; padding:12px 18px; border-bottom:1px solid var(--border-color); }
.appt-step { min-width:0; color:var(--text-muted); font-size:.68rem; text-align:center; }
.appt-step-dot { width:25px; height:25px; margin:0 auto 4px; display:grid; place-items:center; border-radius:50%; border:1px solid var(--border-color); font-weight:800; background:var(--bg-card); }
.appt-step.active,.appt-step.done { color:var(--primary); }
.appt-step.active .appt-step-dot { color:#fff; background:var(--primary); border-color:var(--primary); }
.appt-step.done .appt-step-dot { color:var(--primary); border-color:var(--primary); background:rgba(99,102,241,.1); }
.appt-picker-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.appt-picker-card { min-height:44px; border:1px solid var(--border-color); border-radius:11px; padding:11px; background:var(--bg-card); color:var(--text-primary); cursor:pointer; text-align:left; min-width:0; }
.appt-picker-card:hover,.appt-picker-card.selected { border-color:var(--primary); box-shadow:0 0 0 2px rgba(99,102,241,.1); }
.appt-picker-title { font-size:.82rem; font-weight:750; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appt-picker-meta { color:var(--text-muted); font-size:.7rem; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.appt-contact-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:4px; margin:12px 0; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-secondary); }
.appt-contact-tab { min-height:44px; border:0; border-radius:8px; background:transparent; color:var(--text-muted); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; display:flex; align-items:center; justify-content:center; gap:7px; }
.appt-contact-tab.active { color:var(--primary); background:var(--bg-card); box-shadow:0 1px 3px rgba(15,23,42,.12); }
.appt-contact-tab:focus-visible { outline:2px solid var(--primary); outline-offset:2px; }
.appt-inline-contact-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.appt-inline-contact-wide { grid-column:1/-1; }
.appt-field-hint { margin-top:4px; font-size:.68rem; }
#appt-create-modal .modal-footer .btn-primary { flex:1 1 190px; }
.appt-date-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
.appt-date-card { min-height:44px; border:1px solid var(--border-color); border-radius:10px; background:var(--bg-card); color:var(--text-primary); padding:9px 6px; cursor:pointer; text-align:center; }
.appt-date-card:hover,.appt-date-card.selected { border-color:var(--primary); color:var(--primary); background:rgba(99,102,241,.06); }
.appt-date-day { font-size:.68rem; color:var(--text-muted); text-transform:uppercase; }
.appt-date-number { font-weight:800; font-size:.85rem; margin-top:3px; }
.appt-slot-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; }
.appt-slot { min-height:44px; border:1px solid var(--border-color); border-radius:9px; padding:9px 6px; background:var(--bg-card); color:var(--text-primary); font:750 .8rem var(--font-mono,monospace); cursor:pointer; }
.appt-slot:hover,.appt-slot.selected { border-color:var(--primary); color:#fff; background:var(--primary); }
.appt-nearest { border:1px solid rgba(99,102,241,.22); background:rgba(99,102,241,.05); border-radius:11px; padding:10px; margin-bottom:14px; }
.appt-nearest-list { display:flex; flex-wrap:wrap; gap:6px; margin-top:7px; }
.appt-nearest-btn { border:1px solid rgba(99,102,241,.3); color:var(--primary); background:var(--bg-card); border-radius:8px; padding:7px 9px; font-size:.72rem; cursor:pointer; }
.appt-notice { display:flex; gap:8px; align-items:flex-start; border-radius:10px; padding:10px 11px; margin-bottom:12px; font-size:.78rem; }
.appt-notice[hidden] { display:none !important; }
.appt-notice.info { color:#1d4ed8; background:rgba(37,99,235,.09); border:1px solid rgba(37,99,235,.18); }
.appt-notice.warning { color:#9a3412; background:rgba(234,88,12,.09); border:1px solid rgba(234,88,12,.2); }
.appt-summary { border:1px solid var(--border-color); border-radius:12px; overflow:hidden; }
.appt-summary-row { display:grid; grid-template-columns:130px 1fr; gap:12px; padding:10px 12px; border-bottom:1px solid var(--border-color); font-size:.8rem; }
.appt-summary-row:last-child { border-bottom:0; }
.appt-summary-label { color:var(--text-muted); }
.appt-summary-value { font-weight:700; min-width:0; overflow-wrap:anywhere; }
.appt-detail-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.appt-detail-card { border:1px solid var(--border-color); border-radius:11px; padding:11px; background:var(--bg-secondary,#f6f7fb); }
.appt-detail-label { color:var(--text-muted); font-size:.68rem; margin-bottom:4px; }
.appt-detail-value { font-size:.84rem; font-weight:700; overflow-wrap:anywhere; }
.appt-slot-choice-modal { width:calc(100vw - 24px); max-width:500px; }
.appt-slot-choice-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.appt-slot-choice-card { min-height:112px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:11px; padding:14px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-card); color:var(--text-primary); text-align:left; cursor:pointer; }
.appt-slot-choice-card:hover,.appt-slot-choice-card:focus-visible { border-color:var(--primary); box-shadow:0 0 0 2px rgba(99,102,241,.1); outline:0; }
.appt-slot-choice-card.primary { background:color-mix(in srgb,var(--primary) 7%,var(--bg-card)); border-color:color-mix(in srgb,var(--primary) 35%,var(--border-color)); }
.appt-slot-choice-card > i:first-child { color:var(--primary); font-size:1.15rem; }
.appt-slot-choice-card span { min-width:0; }
.appt-slot-choice-card strong,.appt-slot-choice-card small { display:block; }
.appt-slot-choice-card strong { font-size:.84rem; }
.appt-slot-choice-card small { margin-top:4px; color:var(--text-muted); font-size:.69rem; line-height:1.35; }
.appt-block-modal { max-width:760px; }
.appt-block-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; padding:8px 18px; border-bottom:1px solid var(--border-color); background:var(--bg-secondary,#f6f7fb); }
.appt-block-tabs button { min-height:44px; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--text-muted); font:inherit; font-size:.77rem; font-weight:700; cursor:pointer; }
.appt-block-tabs button.active { border-color:var(--border-color); background:var(--bg-card); color:var(--primary); box-shadow:0 1px 3px rgba(15,23,42,.08); }
.appt-block-tabs button:focus-visible { outline:2px solid var(--primary); outline-offset:1px; }
.appt-block-form-grid { display:grid; grid-template-columns:1.25fr 1fr 1fr; gap:12px; }
.appt-block-field-wide { grid-column:1/-1; }
.appt-block-footer { display:flex; justify-content:flex-end; gap:8px; flex-wrap:wrap; }
.appt-block-list { display:grid; gap:9px; }
.appt-block-card { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--border-color); border-radius:12px; background:var(--bg-card); }
.appt-block-card.cancelled { opacity:.72; background:var(--bg-secondary,#f6f7fb); }
.appt-block-card-main { min-width:0; }
.appt-block-card-title { overflow:hidden; font-size:.84rem; font-weight:800; text-overflow:ellipsis; white-space:nowrap; }
.appt-block-card-meta { display:flex; align-items:center; flex-wrap:wrap; gap:7px 12px; margin-top:5px; color:var(--text-muted); font-size:.69rem; }
.appt-block-card-reason { margin-top:7px; color:var(--text-muted); font-size:.72rem; overflow-wrap:anywhere; }
.appt-block-status { display:inline-flex; align-items:center; border-radius:999px; padding:3px 7px; font-weight:750; }
.appt-block-status.active { background:rgba(100,116,139,.13); color:#475569; }
.appt-block-status.cancelled { background:rgba(5,150,105,.11); color:#047857; }
.appt-block-card-actions { display:flex; justify-content:flex-end; }
.appt-block-detail-modal { width:calc(100vw - 24px); max-width:500px; }
.appt-block-detail-summary { display:grid; gap:9px; }
.appt-block-detail-summary > strong { font-size:.95rem; }
.appt-block-detail-summary > span { color:var(--text-muted); font-size:.78rem; }
.appt-block-detail-summary p { margin:2px 0 0; padding:10px; border-radius:9px; background:var(--bg-secondary,#f6f7fb); font-size:.78rem; white-space:pre-wrap; }
@media (max-width:900px) {
    .appt-toolbar-spacer { display:none; }
}
@media (max-width:768px) {
    .appt-page-header { align-items:stretch; flex-direction:column; }
    .appt-header-actions { justify-content:stretch; }
    .appt-header-actions .btn { flex:0 0 44px; min-height:44px; padding-left:10px; padding-right:10px; }
    .appt-header-actions .appt-new-btn { flex:1 1 auto; }
    .appt-header-actions .appt-settings-btn span,.appt-header-actions .appt-block-btn span { display:none; }
    .appt-toolbar { align-items:stretch; }
    .appt-toolbar input,.appt-toolbar select { flex:1; min-width:130px; min-height:44px; font-size:16px; }
    .appt-view-toggle { width:100%; }
    .appt-view-toggle button { flex:1; min-height:44px; }
    .appt-icon-btn { width:44px; height:44px; }
    .appt-cal-nav { grid-template-columns:auto 1fr auto; }
    .appt-cal-nav .btn { min-height:44px; }
    .appt-timeline-grid.week { min-width:760px !important; }
    .appt-table-wrap { border:0; background:transparent; overflow:visible; }
    .appt-table,.appt-table tbody { display:block; }
    .appt-table thead { display:none; }
    .appt-table tr { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:9px; border:1px solid var(--border-color); border-radius:12px; padding:10px; background:var(--bg-card); }
    .appt-table td { display:block; padding:0; border:0; min-width:0; }
    .appt-table td::before { content:attr(data-label); display:block; color:var(--text-muted); font-size:.65rem; margin-bottom:2px; }
    .appt-table td.appt-mobile-wide { grid-column:1 / -1; }
    .appt-row-actions { justify-content:flex-start; }
    .appt-picker-grid { grid-template-columns:1fr; }
    .appt-inline-contact-grid { grid-template-columns:1fr; }
    .appt-inline-contact-wide { grid-column:auto; }
    .appt-date-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .appt-slot-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .appt-step span { display:none; }
    .appt-summary-row { grid-template-columns:95px 1fr; }
    .appt-detail-grid { grid-template-columns:1fr; }
    .appt-slot-choice-grid { grid-template-columns:1fr; }
    .appt-slot-choice-card { min-height:88px; }
    .appt-block-form-grid { grid-template-columns:1fr; }
    .appt-block-field-wide { grid-column:auto; }
    .appt-block-card { grid-template-columns:1fr; }
    .appt-block-card-actions { justify-content:stretch; }
    .appt-block-card-actions .btn { width:100%; min-height:44px; }
    .appt-modal { width:calc(100vw - 12px); max-height:96vh; }
    .appt-modal .modal-footer .btn { min-height:44px; }
    .appt-modal .modal-footer { padding-bottom:max(12px,env(safe-area-inset-bottom)); }
}
@media (max-width:420px) {
    #appt-create-modal .modal-footer .btn-primary { flex-basis:100%; }
    #appt-block-manager-modal .modal-footer .btn-primary { flex-basis:100%; }
}