:root {
    --bg-body: #FDFBF7; --bg-card: #FFFFFF; --text-main: #4A3F35; --text-muted: #A3968A;
    --accent: #C29B7A; --accent-hover: #D4B295; --border: #EDE6DF; --nav-bg: #FFFFFF;
    --danger: #E07A70; --danger-bg: #FDF1F0;
}

* { 
    box-sizing: border-box; 
    margin: 0; 
    padding: 0; 
    font-family: 'Inter', sans-serif; 
    -webkit-tap-highlight-color: transparent; 
}

html, body { 
    background: var(--bg-body); 
    color: var(--text-main); 
    margin: 0; 
    padding: 0; 
    font-weight: 500; 
    min-height: 100vh; 
    overflow-x: hidden; 
    -webkit-tap-highlight-color: transparent; 
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Multi-choice marketing keeps the same calm card language on desktop and
   Mini Apps while making selected combinations unmistakable. */
.hot-slot-hint {
    margin: 0 0 12px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.hot-choice-block {
    margin: 0 0 12px;
    padding: 11px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: color-mix(in srgb, var(--bg-card) 86%, transparent);
}

.hot-choice-heading {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    align-items: baseline;
    margin-bottom: 9px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 700;
}

.hot-choice-heading small {
    color: var(--text-muted);
    font-size: 10px;
    font-weight: 500;
}

.hot-choice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 7px;
    max-height: 176px;
    overflow-y: auto;
    padding: 1px;
}

.hot-choice-card {
    position: relative;
    display: flex;
    min-height: 38px;
    align-items: center;
    gap: 8px;
    padding: 8px 9px;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    background: var(--bg-body);
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.25;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.hot-choice-card:has(input:checked) {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 14%, var(--bg-card));
    box-shadow: 0 5px 16px color-mix(in srgb, var(--accent) 20%, transparent);
}

.hot-choice-card input,
.promotion-notice-choice input {
    width: 17px;
    height: 17px;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--accent);
}

.promotion-panel {
    margin: 12px 0;
    padding: 13px;
    border: 1px solid color-mix(in srgb, var(--accent) 48%, var(--border));
    border-radius: 16px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 13%, var(--bg-card)), var(--bg-card));
}

.promotion-panel-title {
    margin-bottom: 6px;
    color: var(--text-main);
    font-size: 14px;
    font-weight: 800;
}

.promotion-panel p {
    margin: 0 0 10px;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.45;
}

.promotion-notice-choice {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 8px;
    color: var(--text-main);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
}

@media (max-width: 540px) {
    .hot-choice-grid { grid-template-columns: 1fr 1fr; }
    .hot-choice-block { padding: 9px; }
    .hot-choice-card { min-height: 42px; font-size: 11px; }
}

body { padding: 10px 16px 120px 16px; }

.hidden { display: none !important; }
.desk-only { display:none; }

.toast { 
    position: fixed; top: 20px; left: 50%; transform: translateX(-50%); 
    background: var(--text-main); color: white; padding: 12px 24px; 
    border-radius: 12px; z-index: 9999; font-weight: 600; font-size: 14px; 
    box-shadow: 0 8px 20px rgba(0,0,0,0.1); transition: opacity 0.3s ease-in-out; 
    text-align: center; width: max-content; max-width: 90%; 
}

.modal-overlay { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: rgba(74, 63, 53, 0.4); z-index: 2000; backdrop-filter: blur(4px); 
    display: flex; align-items: center; justify-content: center; 
    opacity: 0; visibility: hidden; transition: all 0.3s ease-in-out;
}
.modal-overlay.active { opacity: 1; visibility: visible; }
#modal-confirm { z-index: 3000; }

.modal-content { 
    background: var(--bg-card); padding: 24px; border-radius: 20px; width: 90%; 
    max-width: 350px; border: 1px solid var(--border); box-shadow: 0 15px 40px rgba(74, 63, 53, 0.15); 
    transform: scale(0.95) translateY(10px); opacity: 0; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275); 
    max-height: 90vh; overflow-y: auto;
}
.modal-overlay.active .modal-content { transform: scale(1) translateY(0); opacity: 1; }

.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; margin: 16px 0 12px 0; color: var(--text-muted); letter-spacing: 0.5px;}

.card { background: var(--bg-card); border-radius: 20px; padding: 16px; margin-bottom: 12px; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(74, 63, 53, 0.03);}
.card.clickable { cursor: pointer; transition: 0.2s; }
.card.clickable:active { transform: scale(0.98); border-color: var(--accent);}

.admin-tab { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 16px; background: var(--bg-card); padding: 7px; border-radius: 16px; border: 1px solid var(--border); }
.admin-tab-btn { padding: 10px 4px; text-align: center; border-radius: 11px; font-size: 11px; font-weight: 600; color: var(--text-main); background: var(--bg-body); border: 1px solid var(--border); cursor: pointer; transition: 0.2s;}
.admin-tab-btn.active { background: var(--accent); color: #FFF; border-color: var(--accent); box-shadow: 0 4px 10px rgba(194, 155, 122, 0.3);}

/* ВЕРТИКАЛЬНАЯ ШАХМАТКА */
.matrix-container { overflow: auto; background: var(--bg-card); border-radius: 12px; border: 1px solid var(--border); box-shadow: 0 4px 15px rgba(74, 63, 53, 0.03); max-height: 65vh; -webkit-overflow-scrolling: touch; touch-action: pan-x pan-y; cursor: grab; }
.matrix-container:active { cursor: grabbing; }
.matrix-container::-webkit-scrollbar { height: 6px; width: 6px; }
.matrix-container::-webkit-scrollbar-track { background: var(--bg-body); border-radius: 8px; }
.matrix-container::-webkit-scrollbar-thumb { background: var(--border); border-radius: 8px; }

.matrix-scroll-hint { padding:7px 8px; font-size:10px; color:var(--text-muted); border-bottom:1px solid var(--border); background:var(--bg-card); position:sticky; top:0; left:0; z-index:7; width:max-content; min-width:100%; }
.matrix-table-vertical { border-collapse: collapse; min-width: 360px; user-select: none; table-layout: fixed; }
.matrix-time-col { width:50px; }
.matrix-master-col { width:62px; }
.matrix-table-vertical th, .matrix-table-vertical td { border: 1px solid var(--border); padding: 2px; text-align: center; font-size: 9px; }
.matrix-table-vertical td.sticky-col-left { position: sticky; left: 0; background: #FDFBF7; z-index: 3; font-weight: 600; box-shadow: 2px 0 5px rgba(0,0,0,0.05); width: 50px; min-width: 50px; font-size:10px; }
.matrix-table-vertical th.sticky-col-top { position: sticky; top: 0; background: var(--bg-card); z-index: 4; border-bottom: 2px solid var(--border); }
.matrix-table-vertical th.sticky-corner { position: sticky; top: 0; left: 0; background: #FDFBF7; z-index: 5; border-bottom: 2px solid var(--border); box-shadow: 2px 0 5px rgba(0,0,0,0.05);}
.matrix-master-head { height:46px; vertical-align:middle; text-align:center; padding:3px 4px !important; }
.matrix-master-head > span { display:block; margin-top:0; font-size:10px; line-height:1.12; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.matrix-master-head > small { display:block; margin-top:2px; font-size:8px; font-weight:500; color:var(--text-muted); }
.matrix-master-avatar { width:26px; height:26px; border-radius:50%; object-fit:cover; margin:0 auto 3px; background:var(--bg-body); color:var(--accent); border:1px solid var(--border); font-size:11px; font-weight:700; }
img.matrix-master-avatar { display:block; }
.matrix-master-avatar-fallback { display:flex; align-items:center; justify-content:center; }
.matrix-master-empty, .matrix-empty-cell { background:var(--bg-body); }
.matrix-appt-vert { background: var(--accent); color: #fff; border-radius: 5px; padding: 3px; font-weight: 600; font-size: 9px; cursor: pointer; white-space: normal; line-height: 1.08; box-shadow: 0 2px 5px rgba(194, 155, 122, 0.3); height: 100%; box-sizing: border-box; display:flex; flex-direction:column; justify-content:center; min-height: 31px; overflow:hidden;}
.matrix-appt-client { display:block; margin-top:2px; font-size:8px; opacity:.86; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.matrix-appt-note { display:block; margin-top:2px; font-size:7px; line-height:1.08; font-weight:500; opacity:.92; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.matrix-slot-vert { background: var(--bg-body); border-radius: 5px; height: 31px; cursor: pointer; transition: 0.2s; position: relative; }
.matrix-slot-vert:hover::after { content: '+'; position: absolute; color: var(--accent); font-size: 18px; font-weight: 700; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.5; }
.matrix-lunch-vert { height:100%; min-height:31px; display:flex; align-items:center; justify-content:center; border-radius:5px; color:var(--text-muted); background:repeating-linear-gradient(45deg,#f6f0ea,#f6f0ea 7px,#eee3d8 7px,#eee3d8 14px); font-size:9px; font-weight:700; }
.matrix-off-vert { background: repeating-linear-gradient(45deg, #FDFBF7, #FDFBF7 10px, #f5efe9 10px, #f5efe9 20px); color: var(--text-muted); font-style: italic; }

.date-arrow { width: 38px; height: 38px; border-radius: 12px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; padding: 0; }
.salary-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--border);}
.salary-row:last-child { border-bottom: none; }

.services-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 20px;}
.booking-entry-title { text-align:center; margin-top:0; }
.booking-entry-options { display:flex; flex-direction:column; gap:9px; }
.booking-entry-option { display:flex; align-items:center; gap:12px; width:100%; padding:13px; border:1px solid var(--border); border-radius:16px; background:var(--bg-card); color:var(--text-main); text-align:left; cursor:pointer; box-shadow:0 4px 15px rgba(74,63,53,.03); transition:.2s; }
.booking-entry-option:active { transform:scale(.985); border-color:var(--accent); }
.booking-entry-option > span:last-child { min-width:0; }
.booking-entry-option strong, .booking-entry-option small { display:block; }
.booking-entry-option strong { font-size:14px; }
.booking-entry-option small { margin-top:3px; color:var(--text-muted); font-size:11px; line-height:1.25; }
.booking-entry-icon { display:flex; align-items:center; justify-content:center; width:32px; height:32px; flex:0 0 32px; border-radius:50%; background:#fff8f2; color:var(--accent); font-size:18px; font-weight:700; }
.promo-slider { margin:0 0 13px; overflow:hidden; }
.promo-slider-track { display:flex; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -webkit-overflow-scrolling:touch; touch-action:pan-x; border-radius:15px; box-shadow:0 5px 15px rgba(74,63,53,.08); }
.promo-slider-track::-webkit-scrollbar { display:none; }
.promo-slide { position:relative; flex:0 0 100%; min-height:76px; overflow:hidden; border:0; padding:0; text-align:left; color:#4A3F35; background:linear-gradient(120deg,#ffe6d2,#f7cbd4); cursor:pointer; scroll-snap-align:start; }
.promo-slide::after { content:''; position:absolute; width:150px; height:150px; right:-44px; top:-70px; border-radius:50%; background:rgba(255,255,255,.34); filter:blur(2px); }
.promo-slide-tone-1 { background:linear-gradient(120deg,#e2f3eb,#d6e9f4); }
.promo-slide-tone-2 { background:linear-gradient(120deg,#f8e8c7,#f4d8d1); }
.promo-slide-tone-3 { background:linear-gradient(120deg,#ebe2f7,#d8eaf4); }
.promo-slide img { display:none; }
.promo-slide-overlay { position:absolute; inset:0; background:linear-gradient(90deg,rgba(255,255,255,.30),rgba(255,255,255,.04)); }
.promo-slide-content { position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center; min-height:70px; padding:12px 16px; }
.promo-slide-content small { font-size:10px; color:#766354; opacity:1; }
.promo-slide-content strong { margin-top:3px; max-width:85%; font-size:14px; line-height:1.2; }
.promo-dots { display:flex; justify-content:center; gap:5px; margin-top:7px; }
.promo-dot { width:6px; height:6px; padding:0; border:0; border-radius:50%; background:var(--border); cursor:pointer; transition:.2s; }
.promo-dot.active { width:16px; border-radius:5px; background:var(--accent); }
.promo-modal-content { position:relative; text-align:left; padding-top:34px; }
.promo-modal-close { position:absolute; top:9px; right:12px; z-index:2; border:0; background:transparent; color:var(--text-muted); font-size:27px; line-height:1; cursor:pointer; }
.promo-modal-image { display:block; width:calc(100% + 40px); max-height:175px; margin:-18px -20px 16px; border-radius:19px 19px 0 0; object-fit:cover; }
.promo-modal-content h3 { margin-bottom:10px; font-size:18px; }
.promo-modal-content p { color:var(--text-muted); white-space:pre-line; font-size:14px; line-height:1.45; }
.client-service-category { grid-column: 1 / -1; margin:8px 0 -2px; font-size:12px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.client-service-category:first-child { margin-top:0; }
.privacy-choice-card { padding:13px 14px; }
.privacy-choice-row { display:flex; align-items:flex-start; gap:10px; color:var(--text-muted); font-size:12px; line-height:1.38; cursor:pointer; }
.privacy-choice-row input { flex:0 0 auto; margin-top:1px; }
.privacy-marketing-row { margin-top:12px; padding-top:12px; border-top:1px solid var(--border); }
.privacy-info-link { margin:9px 0 0 30px; padding:0; border:0; background:transparent; color:var(--accent); font:inherit; font-size:12px; cursor:pointer; text-decoration:underline; }
.privacy-modal-copy { margin:0 0 12px; color:#63564b; font-size:13px; font-weight:500; line-height:1.45; }
.appointment-booking-comment { margin:-4px 0 16px; padding:12px; border:1px solid var(--border); border-radius:16px; background:rgba(255,255,255,.56); text-align:left; }
.privacy-request-actions { display:flex; flex-wrap:wrap; gap:7px; margin-top:13px; }
.privacy-request-actions .btn-small { font-size:11px; padding:8px 10px; }
.privacy-admin-note { padding:10px 12px; border-radius:12px; background:#fff8f2; color:var(--text-muted); font-size:11px; line-height:1.4; margin-bottom:10px; }
.privacy-request-item { padding:12px 0; border-bottom:1px solid var(--border); }
.privacy-request-item:last-child { border-bottom:0; }
.privacy-request-meta { color:var(--text-muted); font-size:11px; line-height:1.4; margin-top:3px; }
.sc-compact { background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 16px 12px; text-align: center; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 4px 15px rgba(74, 63, 53, 0.03); cursor: pointer; transition: 0.2s ease;}
.sc-compact:active { transform: scale(0.95); border-color: var(--accent); }
.scc-title { font-size: 14px; font-weight: 600; color: var(--text-main); margin-bottom: 6px; line-height: 1.2;}
.scc-dur { font-size: 11px; color: var(--text-muted); margin-bottom: 12px; }
.scc-price { font-size: 15px; font-weight: 700; color: var(--accent); background: #FDFBF7; border-radius: 10px; padding: 6px 0; border: 1px solid var(--border);}

.list-item { display: flex; justify-content: space-between; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: 0.2s;}
.list-item:active { opacity: 0.7; }
.list-item:last-child { border-bottom: none; padding-bottom: 0; }
.item-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }

.grid-options { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.option-btn { background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; padding: 14px 4px; text-align: center; font-weight: 600; font-size: 14px; cursor: pointer; color: var(--text-main); transition: 0.2s;}
.option-btn.active { border-color: var(--accent); background: var(--accent); color: #FFF; box-shadow: 0 4px 10px rgba(194, 155, 122, 0.3); }
.option-btn.disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; border-color: var(--border); background: var(--bg-body); }

.schedule-grid { gap: 5px; }
.schedule-grid .option-btn { padding: 6px 1px; min-height:52px; font-size:11px; border-radius:9px; display:flex; flex-direction:column; gap:2px; align-items:center;}
.schedule-grid .option-btn small { font-size:8px; font-weight:500; opacity:0.86; white-space:nowrap; }
.sched-btn.working { border-color: var(--accent); background: var(--accent); color: #FFF; }
.sched-btn.off { border-color: var(--border); background: var(--bg-body); color: var(--text-muted); opacity: 0.7;}

.master-grid { display:flex; overflow-x:auto; gap:10px; padding:2px 1px 9px; margin:0 -1px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.master-grid::-webkit-scrollbar { display:none; }
.master-card { flex:0 0 142px; min-height:126px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 16px; padding: 12px; text-align: left; cursor: pointer; position: relative; box-shadow: 0 4px 15px rgba(74, 63, 53, 0.03);}
.master-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--bg-body); margin: 0 0 8px; display: flex; align-items: center; justify-content: center; font-size: 18px; border: 1px solid var(--border);}
.master-photo { object-fit:cover; display:block; }
.staff-list { display:flex; flex-direction:column; gap:8px; }
.staff-list-card { display:flex; align-items:center; width:100%; gap:10px; padding:10px; border:1px solid var(--border); border-radius:15px; background:var(--bg-card); color:var(--text-main); text-align:left; cursor:pointer; box-shadow:0 4px 15px rgba(74,63,53,.03); }
.staff-list-card:active { transform:scale(.99); border-color:var(--accent); }
.staff-list-avatar { width:42px; height:42px; flex:0 0 42px; margin:0; font-size:17px; }
.staff-list-main { min-width:0; flex:1; }
.staff-list-main strong, .staff-list-main small { display:block; }
.staff-list-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.staff-list-main small { display:-webkit-box; margin-top:3px; overflow:hidden; color:var(--text-muted); font-size:10px; line-height:1.18; -webkit-box-orient:vertical; -webkit-line-clamp:2; }
.staff-list-services { min-width:31px; color:var(--accent); font-size:14px; font-weight:700; text-align:center; }
.staff-list-services small { display:block; margin-top:1px; color:var(--text-muted); font-size:8px; font-weight:500; }
.staff-list-arrow { color:var(--text-muted); font-size:24px; font-weight:400; line-height:1; }

.horizontal-scroll { display: flex; overflow-x: auto; gap: 8px; padding-bottom: 4px; margin-bottom: 8px; scrollbar-width: none; cursor: grab; }
.horizontal-scroll::-webkit-scrollbar { display: none; }
.chip { flex: 0 0 auto; background: var(--bg-card); border: 1px solid var(--border); padding: 10px 18px; border-radius: 20px; font-size: 13px; font-weight: 600; cursor: pointer; transition: 0.2s;}
.chip.active { background: var(--accent); border-color: var(--accent); color: #FFF; box-shadow: 0 4px 10px rgba(194, 155, 122, 0.3);}

.dropdown-header { background: var(--bg-body); padding: 14px; border-radius: 14px; border: 1px solid var(--border); font-size: 14px; font-weight: 600; cursor: pointer; display: flex; justify-content: space-between; margin-bottom: 4px;}
.dropdown-content { background: var(--bg-body); padding: 12px; border-radius: 14px; border: 1px solid var(--border); margin-bottom: 12px; }
.service-category-title { margin:18px 0 8px; font-size:12px; color:var(--text-muted); font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.service-category-title:first-child { margin-top:0; }
.service-category-tabs { display:flex; gap:7px; overflow-x:auto; margin-bottom:9px; padding-bottom:3px; scrollbar-width:none; }
.service-category-tabs::-webkit-scrollbar { display:none; }
.service-category-tab { flex:0 0 auto; border:1px solid var(--border); border-radius:14px; padding:8px 10px; background:var(--bg-card); color:var(--text-main); font:600 11px inherit; white-space:nowrap; cursor:pointer; }
.service-category-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.service-search { margin-bottom:10px; padding:10px 12px; min-height:42px; font-size:13px; }
.service-admin-card { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 12px; margin-bottom:8px; background:var(--bg-card); border:1px solid var(--border); border-radius:15px; cursor:pointer; }
.service-admin-card:active { border-color:var(--accent); transform:scale(.99); }
.service-admin-main { min-width:0; }
.service-admin-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; font-weight:700; }
.service-admin-meta { margin-top:4px; font-size:11px; color:var(--text-muted); }
.service-admin-price { flex-shrink:0; font-size:15px; font-weight:700; color:var(--accent); }
.service-online-state { margin-top:4px; font-size:10px; font-weight:600; }
.service-online-state.enabled { color:#279860; }
.service-online-state.disabled { color:var(--text-muted); }
.staff-form-hint { margin:-2px 0 10px; font-size:11px; line-height:1.25; color:var(--text-muted); }
.promo-admin-card { padding:12px; }
.promo-admin-hint { margin:0 0 11px; color:var(--text-muted); font-size:11px; line-height:1.35; }
.promo-admin-empty { padding:10px 0 2px; color:var(--text-muted); text-align:center; font-size:12px; }
.promo-admin-item { display:grid; grid-template-columns:minmax(0,1fr) auto; column-gap:8px; width:100%; margin-top:7px; padding:10px 2px; border:0; border-top:1px solid var(--border); background:transparent; color:var(--text-main); text-align:left; cursor:pointer; }
.promo-admin-item-title { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; font-weight:700; }
.promo-admin-item-meta { margin-top:3px; color:var(--text-muted); font-size:10px; }
.promo-admin-item .staff-list-arrow { grid-row:1 / span 2; grid-column:2; align-self:center; }
.promo-active-label { display:flex; align-items:center; gap:9px; margin:-2px 0 15px; font-size:13px; cursor:pointer; }
.promo-active-label input { width:18px; height:18px; accent-color:var(--accent); }
.appointment-info-frame { background:var(--bg-body); padding:12px; border-radius:16px; margin-bottom:12px; text-align:left; border:1px solid var(--border); }
.appointment-info-label, .analytics-caption { font-size:11px; color:var(--text-muted); text-transform:uppercase; letter-spacing:.03em; }
.appointment-info-name { margin-top:6px; font-size:15px; font-weight:650; }
.appointment-info-link { margin-top:4px; font-size:13px; color:var(--accent); }
.appointment-info-muted { margin-top:4px; font-size:13px; color:var(--text-muted); }

.btn { background: var(--text-main); color: #FFF; border: none; padding: 16px; border-radius: 16px; width: 100%; font-size: 15px; font-weight: 600; cursor: pointer; transition: 0.2s; box-shadow: 0 6px 15px rgba(74, 63, 53, 0.2);}
.btn:active { transform: scale(0.98); background: #352D26;}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-small { background: var(--bg-card); color: var(--accent); border: 1px solid var(--border); padding: 8px 12px; border-radius: 10px; font-size: 12px; font-weight: 600; cursor: pointer; }

.input-field { width: 100%; background: var(--bg-body); border: 1px solid var(--border); color: var(--text-main); padding: 14px; border-radius: 14px; margin-bottom: 12px; font-size: 14px; transition: 0.2s; box-sizing: border-box; min-height: 48px; font-family: inherit; -webkit-appearance: none; appearance: none; caret-color: var(--text-main); -webkit-text-fill-color: var(--text-main); }
.input-field:focus { outline: none; border-color: var(--accent); background: var(--bg-card); caret-color: var(--text-main); box-shadow: 0 0 0 2px rgba(194, 155, 122, 0.18);}
input[type="text"], input[type="number"], input[type="tel"], textarea { caret-color: var(--text-main) !important; -webkit-text-fill-color: var(--text-main); }
.select-field { background: var(--bg-card); border: 1px solid var(--border); color: var(--text-main); padding: 12px; border-radius: 12px; flex:1; font-weight: 500;}

#action-btn-container { position: fixed; bottom: 85px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); max-width: 400px; z-index: 990; }

.app-copyright { margin:30px 0 8px; color:#b8afa6; font-size:9px; text-align:center; letter-spacing:.01em; }

.floating-nav { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); padding: 8px; border-radius: 24px; display: flex; gap: 8px; border: 1px solid var(--border); z-index: 1000; width: calc(100% - 32px); max-width: 400px; box-shadow: 0 10px 30px rgba(74, 63, 53, 0.1); }
.nav-item { flex: 1; padding: 12px 0; text-align: center; font-size: 12px; font-weight: 600; color: var(--text-muted); border-radius: 16px; cursor: pointer; transition: 0.2s;}
.nav-item.active { background: #FDFBF7; color: var(--accent); box-shadow: 0 2px 8px rgba(74, 63, 53, 0.05);}

.profile-avatar-container { width: 80px; height: 80px; border-radius: 50%; overflow: hidden; background: var(--bg-body); display: flex; align-items: center; justify-content: center; font-size: 32px; margin: 0 auto 12px auto; border: 2px solid var(--border); }
.profile-avatar-container img { width: 100%; height: 100%; object-fit: cover; }

.stars-outer { display: inline-block; position: relative; font-family: sans-serif; color: #EDE6DF; font-size: 14px; letter-spacing: 2px;}
.stars-outer::before { content: '★★★★★'; }
.stars-inner { position: absolute; top: 0; left: 0; white-space: nowrap; overflow: hidden; color: #E5B75A; }
.stars-inner::before { content: '★★★★★'; }

.analytic-card { background: var(--bg-card); padding: 12px; border-radius: 16px; border: 1px solid var(--border); text-align: center; margin-bottom: 12px; box-shadow: 0 4px 15px rgba(74, 63, 53, 0.03);}
.analytic-val { font-size: 20px; font-weight: 700; color: var(--accent); margin-top: 6px;}
.analytics-tabs { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px; margin:16px 0; }
.analytics-tab { border:1px solid var(--border); border-radius:11px; padding:10px 4px; background:var(--bg-body); color:var(--text-main); font:600 11px inherit; cursor:pointer; }
.analytics-tab.active { background:var(--accent); border-color:var(--accent); color:#fff; }
.analytics-metric-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
.analytics-metric-grid .analytic-card { margin:0; padding:10px 6px; }
.analytics-metric-grid .analytic-val { font-size:17px; }
.analytics-detail-card { display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding:12px; font-size:12px; }
.analytics-detail-card strong { color:var(--accent); }
.analytics-finance-details { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px; }
.analytics-finance-details .analytics-detail-card { margin:0; padding:10px; flex-direction:column; align-items:flex-start; gap:4px; font-size:10px; }
.analytics-finance-details .analytics-detail-card strong { font-size:12px; }
.analytics-list-card { padding:10px 12px; }
.analytics-hint { margin:-2px 0 10px; font-size:11px; line-height:1.25; color:var(--text-muted); }
.salary-summary-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:7px; margin-bottom:10px; }
.salary-summary-card { border:1px solid var(--border); border-radius:13px; padding:9px; text-align:left; color:var(--text-main); background:var(--bg-card); cursor:pointer; }
.salary-summary-card.active { border-color:var(--accent); background:#fffaf6; }
.salary-summary-card span, .salary-summary-card small, .salary-summary-card strong { display:block; }
.salary-summary-card span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px; font-weight:700; }
.salary-summary-card small { margin-top:3px; font-size:9px; color:var(--text-muted); }
.salary-summary-card strong { margin-top:3px; font-size:12px; color:var(--accent); }
.salary-editor-card { padding:12px; }
.salary-master-tabs { margin:8px 0 10px; }
.salary-master-tabs .chip { padding:7px 10px; font-size:11px; }
.salary-base-rate { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 0; font-size:12px; font-weight:700; }
.salary-base-rate > div, .salary-service-row > div { display:flex; align-items:center; gap:3px; flex-shrink:0; }
.salary-base-rate input, .salary-service-row input { width:42px; padding:4px; border:1px solid var(--border); border-radius:6px; text-align:center; font:600 11px inherit; background:var(--bg-body); color:var(--text-main); }
.salary-base-rate button, .salary-service-row button { width:22px; height:22px; border:none; border-radius:6px; background:var(--accent); color:#fff; cursor:pointer; }
.salary-editor-note { padding:7px 8px; margin-bottom:8px; border-radius:9px; background:var(--bg-body); color:var(--text-muted); font-size:9px; line-height:1.25; }
.salary-rate-category { border-top:1px solid var(--border); }
.salary-rate-category summary { display:flex; justify-content:space-between; padding:9px 0; cursor:pointer; list-style:none; font-size:11px; font-weight:700; }
.salary-rate-category summary::-webkit-details-marker { display:none; }
.salary-rate-category summary span { color:var(--text-muted); font-weight:500; }
.salary-service-list { padding:0 0 5px; }
.salary-service-row { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:6px 0; font-size:10px; }
.salary-service-row > span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.salary-service-row small { color:var(--text-muted); font-size:8px; }
.salary-service-row .salary-reset { background:var(--bg-body); border:1px solid var(--border); color:var(--accent); }
.analytics-flow-card { padding:18px 10px 30px; }
.analytics-split { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.analytics-split .card { padding:10px; }
.analytics-list-row { display:flex; justify-content:space-between; gap:8px; padding:7px 0; border-bottom:1px solid var(--border); font-size:11px; }
.analytics-list-row:last-child { border-bottom:none; }
.analytics-list-row strong { color:var(--accent); }
.analytics-empty { padding:9px 0; font-size:11px; color:var(--text-muted); text-align:center; }

.bar-chart { display: flex; align-items: flex-end; justify-content: space-between; height: 100px; padding-top: 10px; gap: 4px;}
.bar { flex: 1; background: var(--accent); border-radius: 4px 4px 0 0; min-height: 5px; position: relative; transition: 0.3s;}
.bar-label { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); font-size: 9px; color: var(--text-muted);}
.bar-val { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 600; color: var(--text-main);}

.web-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
    text-align: center;
    padding: 20px;
    background-color: #f3f3f3;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    box-sizing: border-box;
}

.web-stub h2 {
    color: #222;
    margin-bottom: 15px;
    font-size: 24px;
}

.web-stub p {
    color: #666;
    margin-bottom: 30px;
    font-size: 16px;
    line-height: 1.5;
    max-width: 400px;
}

.tg-button {
    background-color: #2481cc;
    color: #ffffff;
    text-decoration: none;
    padding: 16px 32px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.2s ease, transform 0.1s ease;
    box-shadow: 0 4px 12px rgba(36, 129, 204, 0.3);
}

.tg-button:hover {
    background-color: #1d69a6;
}

.tg-button:active {
    transform: scale(0.96);
}

/* Compact CRM cards used by the desktop-only client registry. */
.clients-list { display:flex; flex-direction:column; gap:8px; }
.client-list-card { width:100%; display:grid; grid-template-columns:minmax(0,1fr) 70px 70px 20px; gap:12px; align-items:center; padding:13px 15px; text-align:left; color:var(--text-main); background:var(--bg-card); border:1px solid var(--border); border-radius:14px; cursor:pointer; }
.client-list-card:hover { border-color:var(--accent); }
.client-list-main, .client-list-stats { min-width:0; display:flex; flex-direction:column; gap:3px; }
.client-list-main strong { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:14px; }
.client-list-main small, .client-list-stats small { color:var(--text-muted); font-size:11px; }
.client-list-stats { align-items:flex-end; }
.client-list-stats strong { font-size:14px; }
.password-inline-field { position:relative; margin-bottom:12px; }
.password-inline-field .input-field { margin-bottom:0; padding-right:88px; }
.password-inline-toggle { position:absolute; right:9px; top:50%; transform:translateY(-50%); padding:6px 8px; border:1px solid var(--border); border-radius:8px; color:var(--text-main); background:var(--bg-card); font-size:11px; cursor:pointer; }

/* The desktop URL always stays a full desktop workplace, even when opened
   from a phone.  A narrow screen scrolls the desktop canvas instead of
   switching to Mini App cards. */
body.desk-mode { min-width:1180px; padding:28px 34px 42px 300px; }
    .desk-mode .desk-only { display:block; }
    .desk-mode #nav-client, .desk-mode #nav-reviews, .desk-mode #nav-profile, .desk-mode #nav-admin { display:none; }
    .desk-mode .view { max-width:none; margin:0; }
    .desk-mode #view-admin { padding-top:4px; }
    .desk-mode .desk-sidebar-calendar { position:fixed; z-index:12; top:28px; left:30px; width:236px; padding:16px; border:1px solid var(--border); border-radius:18px; background:var(--bg-card); box-shadow:0 7px 20px rgba(74,63,53,.06); }
    .desk-mode .desk-calendar-title { color:var(--text-muted); text-transform:uppercase; letter-spacing:.08em; font-size:10px; font-weight:700; }
    .desk-mode .desk-calendar-month-row { display:grid; grid-template-columns:28px minmax(0,1fr) 28px; align-items:center; gap:5px; margin:10px 0 12px; }
    .desk-mode .desk-calendar-month-row > strong { overflow:hidden; color:var(--text-main); font-size:13px; line-height:1; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
    .desk-mode .desk-calendar-nav { width:28px; height:28px; border:1px solid var(--border); border-radius:8px; color:var(--accent); background:var(--bg-body); font-size:21px; line-height:1; cursor:pointer; }
    .desk-mode .desk-calendar-nav:hover { border-color:var(--accent); background:#fff; }
    .desk-mode .desk-calendar-weekdays, .desk-mode .desk-calendar-grid { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:3px; }
    .desk-mode .desk-calendar-weekdays { margin-bottom:5px; color:var(--text-muted); font-size:9px; font-weight:700; text-align:center; }
    .desk-mode .desk-calendar-day { aspect-ratio:1; padding:0; border:1px solid transparent; border-radius:8px; color:var(--text-main); background:transparent; font-size:11px; font-weight:600; cursor:pointer; }
    .desk-mode .desk-calendar-day:hover { border-color:var(--accent); background:var(--bg-body); }
    .desk-mode .desk-calendar-day.is-outside { color:#cfc6bd; font-weight:500; }
    .desk-mode .desk-calendar-day.is-today { border-color:var(--accent); color:var(--accent); }
    .desk-mode .desk-calendar-day.is-selected { border-color:var(--accent); color:#fff; background:var(--accent); box-shadow:0 3px 8px rgba(194,155,122,.28); }
    .desk-mode .admin-tab { position:fixed; z-index:11; top:314px; left:30px; width:236px; display:flex; flex-direction:column; gap:5px; padding:0; margin:0; border:0; background:transparent; overflow:auto; max-height:calc(100vh - 360px); }
    .desk-mode .admin-tab-btn { flex:none; width:100%; min-width:0; padding:11px 14px; font-size:12px; text-align:left; }
    .desk-mode .admin-content { max-width:100%; }
    .desk-mode .matrix-container { max-height:calc(100vh - 190px); overflow-x:auto; }
    .desk-mode .matrix-table-vertical { min-width:0; }
    .desk-mode .matrix-master-head { height:74px; }
    .desk-mode .matrix-master-head > span { font-size:11px; }
    .desk-mode .matrix-master-avatar { width:31px; height:31px; }
    .desk-mode .staff-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
    .desk-mode .service-category-tabs, .desk-mode .horizontal-scroll { overflow:visible; flex-wrap:wrap; }
    .desk-mode .analytics-metric-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
    .desk-mode .analytics-finance-details { grid-template-columns:repeat(4,minmax(0,1fr)); }
    .desk-mode .floating-nav { top:22px; right:30px; bottom:auto; left:auto; transform:none; width:auto; max-width:none; padding:6px; }
    .desk-mode .floating-nav .nav-item { min-width:94px; padding:10px 13px; }
    .desk-mode .app-copyright { position:fixed; bottom:10px; left:0; right:0; margin:0; pointer-events:none; }

/* Desktop workplace: these rules deliberately apply only to /tma?desk=1.
   The Telegram/MAX mini app keeps the compact mobile layout above. */
.desk-mode #view-client,
.desk-mode #view-reviews,
.desk-mode #view-profile,
.desk-mode #html-back-btn-container,
.desk-mode #action-btn-container { display:none !important; }
.desk-mode .admin-system-id-line { display:none; }
.desk-mode .desk-workspace-header { display:flex; align-items:flex-end; justify-content:space-between; min-height:66px; margin:0 150px 22px 0; padding:2px 0 14px; border-bottom:1px solid var(--border); }
.desk-mode .desk-workspace-kicker { margin-bottom:5px; color:var(--accent); font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase; }
.desk-mode .desk-workspace-header h1 { margin:0; color:var(--text-main); font-size:27px; line-height:1; letter-spacing:-.04em; }
.desk-mode .desk-workspace-header p { margin:0 0 1px; color:var(--text-muted); font-size:12px; }
.desk-mode .floating-nav { top:30px; right:30px; bottom:auto; left:auto; width:auto; padding:0; border:0; background:transparent; box-shadow:none; backdrop-filter:none; }
.desk-mode .floating-nav .nav-item.desk-only { display:block; min-width:104px; padding:12px 16px; border:1px solid var(--border); background:var(--bg-card); color:var(--text-muted); box-shadow:0 7px 20px rgba(74,63,53,.07); }
.desk-mode .floating-nav .nav-item.desk-only:hover { color:var(--accent); border-color:var(--accent); }
.desk-mode .admin-tab { top:314px; bottom:24px; max-height:none; padding-right:2px; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; }
.desk-mode .admin-tab-btn { min-height:40px; }
.desk-mode .admin-content { max-width:1280px; }
.desk-mode #admin-tab-matrix { max-width:none; }
.desk-mode #admin-tab-matrix .matrix-container { max-height:calc(100vh - 250px); }
.desk-mode .matrix-master-head { height:48px; }
.desk-mode .matrix-master-head > span { font-size:12px; }

/* Registry, catalog and resources use columns rather than phone-length rows. */
.desk-mode #admin-tab-clients,
.desk-mode #admin-tab-services,
.desk-mode #admin-tab-resources,
.desk-mode #admin-tab-masters { max-width:1280px; }
.desk-mode .client-card-grid { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
.desk-mode .client-list-card { min-height:78px; grid-template-columns:minmax(0,1fr) 64px 64px 18px; gap:10px; padding:13px 14px; }
.desk-mode .clients-pagination { display:flex; align-items:center; justify-content:center; gap:10px; margin-top:16px; }
.desk-mode .clients-pagination .btn-small { min-width:116px; }
.desk-mode .clients-pagination span { min-width:112px; color:var(--text-muted); font-size:12px; text-align:center; }
.desk-mode #admin-services-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.desk-mode #admin-services-list .analytics-empty { grid-column:1 / -1; }
.desk-mode .service-admin-card { min-height:112px; margin:0; padding:14px; align-items:flex-start; }
.desk-mode .service-admin-title { white-space:normal; line-height:1.24; }
.desk-mode .service-admin-price { padding-top:1px; }
.desk-mode #admin-resources-list { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px; }
.desk-mode #admin-resources-list .list-item { min-height:88px; margin:0; padding:14px; border:1px solid var(--border); border-radius:15px; background:var(--bg-card); }
.desk-mode #admin-resources-list > div[style] { grid-column:1 / -1; }
.desk-mode .staff-list { grid-template-columns:repeat(2, minmax(0,1fr)); gap:10px; }
.desk-mode .staff-list-card { min-height:72px; }

/* Owner dashboard pages are deliberately constrained and grouped into panels. */
.desk-mode #admin-tab-marketing,
.desk-mode #admin-tab-reviews,
.desk-mode #admin-tab-analytics { max-width:1240px; }
.desk-mode .marketing-workspace { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:start; }
.desk-mode .marketing-panel { min-width:0; }
.desk-mode .marketing-panel .section-title { margin:0 0 9px; }
.desk-mode .marketing-panel .card { min-height:184px; margin:0; }
.desk-mode .marketing-panel:nth-child(3) .card { min-height:0; }
.desk-mode .reviews-workspace { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-items:start; }
.desk-mode .reviews-column { min-width:0; }
.desk-mode .reviews-column .section-title { margin:0 0 10px; }
.desk-mode .reviews-column .card { margin-bottom:10px; }
.desk-mode #analytics-panel-finance { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr); gap:14px 18px; align-items:start; }
.desk-mode #analytics-panel-finance > .section-title { grid-column:1 / -1; margin:0; }
.desk-mode #analytics-panel-finance .analytics-metric-grid { grid-template-columns:repeat(3, minmax(0,1fr)); margin:0; }
.desk-mode #analytics-panel-finance .analytics-finance-details { grid-template-columns:repeat(2, minmax(0,1fr)); margin:0; }
.desk-mode #analytics-panel-finance > .analytics-list-card { grid-column:1 / -1; margin:0; }
.desk-mode #analytics-panel-salaries { display:grid; grid-template-columns:280px minmax(0,1fr); gap:12px 18px; align-items:start; }
.desk-mode #analytics-panel-salaries > .section-title,
.desk-mode #analytics-panel-salaries > .analytics-hint { grid-column:1 / -1; margin:0; }
.desk-mode #analytics-panel-salaries .salary-summary-grid { grid-template-columns:1fr; margin:0; }
.desk-mode #analytics-panel-salaries .salary-editor-card { margin:0; }
.desk-mode #analytics-panel-flow { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr); gap:14px 18px; align-items:start; }
.desk-mode #analytics-panel-flow > .section-title,
.desk-mode #analytics-panel-flow > .analytics-metric-grid,
.desk-mode #analytics-panel-flow > .analytics-flow-card,
.desk-mode #analytics-panel-flow > .analytics-list-card { grid-column:1 / -1; margin:0; }
.desk-mode #analytics-panel-flow > .analytics-metric-grid { grid-template-columns:repeat(6, minmax(0,1fr)); }
.desk-mode #analytics-panel-flow .analytics-split { margin:0; grid-column:1 / -1; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; }
.desk-mode #analytics-panel-flow .analytics-split .card { margin:0; }

/* Forms in the workplace are usable desktop dialogs, not narrow phone sheets. */
.desk-mode .modal-overlay { padding:36px 48px; }
.desk-mode .modal-content { width:min(760px, calc(100vw - 96px)); max-width:760px; max-height:calc(100vh - 72px); padding:30px 32px; border-radius:22px; }
.desk-mode .modal-content h3 { font-size:21px; }
.desk-mode #modal-add-master .modal-content,
.desk-mode #modal-edit-master .modal-content,
.desk-mode #modal-desk-access .modal-content,
.desk-mode #modal-edit-desk-user .modal-content { width:min(980px, calc(100vw - 96px)); max-width:980px; }
.desk-mode #new-m-services-container,
.desk-mode #edit-m-services-container,
.desk-mode #desk-u-services-container,
.desk-mode #edit-desk-u-services-container { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:9px; max-height:330px; overflow:auto; padding:2px; }
.desk-mode #new-m-services-container > div,
.desk-mode #edit-m-services-container > div,
.desk-mode #desk-u-services-container > div,
.desk-mode #edit-desk-u-services-container > div { min-width:0; margin:0 !important; }
.desk-mode #desk-users-list { max-height:280px; overflow:auto; padding-right:4px; }

/* Keep desktop pages centred within the free workspace, while the matrix
   itself continues to use the full width for as many masters as possible. */
.desk-mode .desk-workspace-header { width:100%; max-width:1280px; margin-left:auto; margin-right:auto; }
.desk-mode .admin-content { margin-left:auto; margin-right:auto; }
.desk-mode #admin-tab-matrix { margin-left:0; margin-right:0; }
.desk-mode .staff-list { grid-template-columns:repeat(3, minmax(0,1fr)); }
.desk-mode .client-card-grid { grid-template-columns:repeat(3, minmax(0,1fr)); }

/* Liquid Glass.  This is intentionally a visual layer only: it is shared by
   the Mini App and the desktop workplace and does not alter their layout or
   controls.  Browsers without backdrop-filter keep the clear, opaque design
   declared above. */
:root {
    --glass-surface: rgba(255, 255, 255, .64);
    --glass-surface-strong: rgba(255, 255, 255, .82);
    --glass-line: rgba(255, 255, 255, .78);
    --glass-shadow: 0 14px 34px rgba(94, 71, 52, .11), inset 0 1px 0 rgba(255, 255, 255, .92);
}

html, body {
    background:
        radial-gradient(72rem 42rem at -12% -12%, rgba(226, 191, 166, .42), transparent 55%),
        radial-gradient(58rem 42rem at 108% 6%, rgba(243, 220, 207, .52), transparent 54%),
        radial-gradient(58rem 44rem at 48% 115%, rgba(225, 211, 194, .36), transparent 58%),
        #fdfbf7;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    html {
        background:
            radial-gradient(56rem 42rem at -10% -8%, rgba(255, 178, 137, .70), transparent 64%),
            radial-gradient(54rem 43rem at 109% 3%, rgba(250, 209, 231, .68), transparent 63%),
            radial-gradient(50rem 46rem at 49% 112%, rgba(194, 222, 237, .56), transparent 64%),
            #f6eee8;
    }

    body {
        background:
            radial-gradient(42rem 26rem at 50% 28%, rgba(255, 255, 255, .34), transparent 70%),
            linear-gradient(135deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .24));
        background-attachment: fixed;
    }

    .card,
    .admin-tab,
    .matrix-container,
    .booking-entry-option,
    .sc-compact,
    .master-card,
    .staff-list-card,
    .client-list-card,
    .service-admin-card,
    .analytic-card,
    .salary-summary-card,
    .salary-editor-card,
    .promo-admin-card,
    .modal-content {
        background: linear-gradient(135deg, rgba(255, 255, 255, .76) 0%, rgba(255, 255, 255, .43) 48%, rgba(255, 239, 232, .34) 100%);
        border-color: rgba(255, 255, 255, .93);
        box-shadow: 0 16px 36px rgba(94, 71, 52, .13), inset 0 1.5px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(123, 89, 66, .06);
        -webkit-backdrop-filter: blur(28px) saturate(175%) brightness(1.05);
        backdrop-filter: blur(28px) saturate(175%) brightness(1.05);
    }

    .input-field,
    .select-field,
    .dropdown-header,
    .dropdown-content,
    .appointment-info-frame,
    .privacy-admin-note,
    .salary-editor-note,
    .matrix-scroll-hint,
    .matrix-master-empty,
    .matrix-empty-cell,
    .matrix-slot-vert,
    .scc-price {
        background: linear-gradient(135deg, rgba(255, 255, 255, .58), rgba(255, 255, 255, .27));
        border-color: rgba(255, 255, 255, .82);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86), inset 0 -1px 0 rgba(123, 89, 66, .04);
        -webkit-backdrop-filter: blur(20px) saturate(165%);
        backdrop-filter: blur(20px) saturate(165%);
    }

    .input-field:focus {
        background: rgba(255, 255, 255, .68);
        box-shadow: 0 0 0 3px rgba(194, 155, 122, .20), inset 0 1px 0 rgba(255, 255, 255, .88);
    }

    .btn {
        background: linear-gradient(135deg, rgba(74, 63, 53, .94), rgba(83, 68, 56, .82));
        box-shadow: 0 9px 20px rgba(74, 63, 53, .22), inset 0 1px 0 rgba(255, 255, 255, .13);
        -webkit-backdrop-filter: blur(12px) saturate(135%);
        backdrop-filter: blur(12px) saturate(135%);
    }

    .btn-small,
    .password-inline-toggle,
    .date-arrow,
    .desk-mode .desk-calendar-nav,
    .admin-tab-btn,
    .analytics-tab,
    .option-btn,
    .chip,
    .service-category-tab,
    .nav-item.active {
        background: linear-gradient(135deg, rgba(255, 255, 255, .68), rgba(255, 255, 255, .31));
        border-color: rgba(255, 255, 255, .88);
        box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .95), inset 0 -1px 0 rgba(123, 89, 66, .05), 0 7px 17px rgba(93, 70, 50, .08);
        -webkit-backdrop-filter: blur(19px) saturate(165%);
        backdrop-filter: blur(19px) saturate(165%);
    }

    .admin-tab-btn.active,
    .analytics-tab.active,
    .option-btn.active,
    .sched-btn.working,
    .chip.active,
    .service-category-tab.active,
    .desk-mode .desk-calendar-day.is-selected {
        background: linear-gradient(135deg, rgba(194, 155, 122, .94), rgba(178, 135, 99, .78));
        border-color: rgba(255, 255, 255, .58);
        box-shadow: 0 7px 16px rgba(164, 119, 80, .25), inset 0 1px 0 rgba(255, 255, 255, .36);
    }

    .floating-nav {
        background: linear-gradient(135deg, rgba(255, 255, 255, .72), rgba(255, 255, 255, .33));
        border-color: rgba(255, 255, 255, .94);
        box-shadow: 0 18px 38px rgba(94, 71, 52, .16), inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(123, 89, 66, .06);
        -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
        backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
    }

    .modal-overlay {
        background: rgba(74, 63, 53, .28);
        -webkit-backdrop-filter: blur(12px) saturate(115%);
        backdrop-filter: blur(12px) saturate(115%);
    }

    .matrix-table-vertical td.sticky-col-left,
    .matrix-table-vertical th.sticky-col-top,
    .matrix-table-vertical th.sticky-corner {
        background: rgba(253, 251, 247, .76);
        -webkit-backdrop-filter: blur(17px) saturate(140%);
        backdrop-filter: blur(17px) saturate(140%);
    }

    .desk-mode .desk-sidebar-calendar,
    .desk-mode .floating-nav .nav-item.desk-only {
        background: linear-gradient(135deg, rgba(255, 255, 255, .78), rgba(255, 255, 255, .37));
        border-color: rgba(255, 255, 255, .93);
        box-shadow: 0 15px 34px rgba(94, 71, 52, .13), inset 0 1.5px 0 rgba(255, 255, 255, .98), inset 0 -1px 0 rgba(123, 89, 66, .05);
        -webkit-backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
        backdrop-filter: blur(30px) saturate(180%) brightness(1.06);
    }

    .web-stub {
        background:
            radial-gradient(32rem 24rem at 15% 14%, rgba(255, 184, 144, .58), transparent 64%),
            radial-gradient(32rem 24rem at 85% 82%, rgba(224, 202, 244, .52), transparent 64%),
            rgba(253, 251, 247, .46);
    }
}

/* Second, more expressive Liquid Glass pass: a restrained moving backdrop
   gives transparent layers something real to refract. */
@keyframes liquid-glass-drift {
    0% { background-position: 0% 0%, 100% 0%, 50% 100%, 50% 50%; }
    50% { background-position: 8% 5%, 92% 8%, 54% 94%, 50% 50%; }
    100% { background-position: 2% 10%, 98% 4%, 46% 96%, 50% 50%; }
}

@keyframes liquid-glass-sheen {
    0%, 100% { transform: translate3d(-7%, -4%, 0) rotate(-7deg); opacity: .56; }
    50% { transform: translate3d(7%, 4%, 0) rotate(-3deg); opacity: .88; }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    body {
        background:
            radial-gradient(48rem 34rem at 4% 2%, rgba(255, 167, 118, .78), transparent 67%),
            radial-gradient(48rem 37rem at 102% 8%, rgba(239, 174, 211, .68), transparent 66%),
            radial-gradient(50rem 43rem at 50% 106%, rgba(151, 207, 233, .62), transparent 68%),
            linear-gradient(135deg, rgba(255, 255, 255, .18), rgba(255, 248, 240, .34));
        background-size: 122% 122%, 124% 124%, 126% 126%, 100% 100%;
        animation: liquid-glass-drift 24s ease-in-out infinite alternate;
    }

    .card,
    .booking-entry-option,
    .sc-compact,
    .master-card,
    .staff-list-card,
    .client-list-card,
    .service-admin-card,
    .analytic-card,
    .salary-summary-card,
    .promo-admin-card,
    .floating-nav,
    .desk-mode .desk-sidebar-calendar,
    .desk-mode .floating-nav .nav-item.desk-only {
        position: relative;
        isolation: isolate;
        overflow: hidden;
    }

    .card::before,
    .booking-entry-option::before,
    .sc-compact::before,
    .master-card::before,
    .staff-list-card::before,
    .client-list-card::before,
    .service-admin-card::before,
    .analytic-card::before,
    .salary-summary-card::before,
    .promo-admin-card::before,
    .floating-nav::before,
    .desk-mode .desk-sidebar-calendar::before,
    .desk-mode .floating-nav .nav-item.desk-only::before {
        content: "";
        position: absolute;
        z-index: -1;
        top: -62%;
        left: -30%;
        width: 150%;
        height: 116%;
        pointer-events: none;
        border-radius: 50%;
        background: radial-gradient(ellipse at 42% 60%, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .42) 27%, rgba(255, 246, 241, .10) 56%, transparent 74%);
        filter: blur(2px);
        animation: liquid-glass-sheen 13s ease-in-out infinite;
    }

    .card,
    .booking-entry-option,
    .sc-compact,
    .master-card,
    .staff-list-card,
    .client-list-card,
    .service-admin-card,
    .analytic-card,
    .salary-summary-card,
    .salary-editor-card,
    .promo-admin-card,
    .modal-content {
        background: linear-gradient(135deg, rgba(255, 255, 255, .68) 0%, rgba(255, 255, 255, .30) 52%, rgba(255, 228, 224, .25) 100%);
        border-color: rgba(255, 255, 255, .98);
        box-shadow: 0 18px 42px rgba(94, 71, 52, .15), inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(123, 89, 66, .07);
        -webkit-backdrop-filter: blur(34px) saturate(190%) brightness(1.08);
        backdrop-filter: blur(34px) saturate(190%) brightness(1.08);
    }

    .floating-nav,
    .desk-mode .desk-sidebar-calendar {
        border-color: rgba(255, 255, 255, 1);
        box-shadow: 0 22px 46px rgba(94, 71, 52, .18), inset 0 1.5px 0 rgba(255, 255, 255, 1), inset 0 -1px 0 rgba(123, 89, 66, .08);
        -webkit-backdrop-filter: blur(38px) saturate(195%) brightness(1.10);
        backdrop-filter: blur(38px) saturate(195%) brightness(1.10);
    }
}

@media (prefers-reduced-motion: reduce) {
    body,
    .card::before,
    .booking-entry-option::before,
    .sc-compact::before,
    .master-card::before,
    .staff-list-card::before,
    .client-list-card::before,
    .service-admin-card::before,
    .analytic-card::before,
    .salary-summary-card::before,
    .promo-admin-card::before,
    .floating-nav::before,
    .desk-mode .desk-sidebar-calendar::before,
    .desk-mode .floating-nav .nav-item.desk-only::before {
        animation: none !important;
    }
}

/* The glass sheen must not change the desktop workplace geometry.  In
   particular, the calendar remains a fixed sidebar and the matrix toolbar
   is constrained to the visible workspace; the table itself scrolls. */
@media (min-width: 1180px) {
    .desk-mode .desk-sidebar-calendar {
        position: fixed;
    }

    .desk-mode #admin-tab-matrix {
        width: calc(100vw - 334px);
        max-width: calc(100vw - 334px);
        min-width: 0;
    }

    .desk-mode .matrix-toolbar {
        width: 100%;
        min-width: 0;
    }

    .desk-mode .matrix-toolbar > div {
        flex: 0 0 auto;
    }
}

/* The Mini App navigation is an always-on viewport control.  The glass
   highlight may use a pseudo-element, but must never take it out of fixed
   positioning. */
@media (max-width: 1179px) {
    /* iOS zooms a focused control whose computed type is below 16px. */
    .input-field,
    .select-field,
    textarea.input-field {
        font-size: 16px;
    }

    .floating-nav {
        position: fixed;
        left: 50%;
        right: auto;
        bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 10px));
        transform: translateX(-50%);
    }

    /* A schedule has hundreds of cells.  Per-cell backdrop filtering forces
       Safari to repaint the entire table while a finger moves.  Keep a light
       glazed surface in the matrix, but reserve costly glass compositing for
       the surrounding controls. */
    body {
        animation: none;
        background-attachment: scroll;
    }

    .matrix-container {
        background: rgba(255, 255, 255, .78);
        box-shadow: 0 10px 24px rgba(94, 71, 52, .10), inset 0 1px 0 rgba(255, 255, 255, .92);
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .matrix-scroll-hint,
    .matrix-master-empty,
    .matrix-empty-cell,
    .matrix-slot-vert,
    .matrix-table-vertical td.sticky-col-left,
    .matrix-table-vertical th.sticky-col-top,
    .matrix-table-vertical th.sticky-corner {
        background: rgba(255, 255, 255, .90);
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    .matrix-slot-vert {
        transition: none;
    }
}

/* Desktop workspace: native date control in manual booking and a compact
   standalone logout button. These rules are intentionally scoped to the
   site panel and do not affect the Mini App. */
body.desk-mode #modal-manual-book #man-date-display {
    display: none !important;
}

body.desk-mode #modal-manual-book #man-date {
    position: static !important;
    display: block;
    width: 100% !important;
    height: 48px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 13px !important;
    opacity: 1 !important;
    cursor: pointer;
    color: var(--text-main);
    color-scheme: light;
    appearance: auto;
    -webkit-appearance: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .43));
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(92, 69, 50, .09), inset 0 1px 0 rgba(255, 255, 255, .88);
    font: 500 14px/1 'Inter', sans-serif;
}

body.desk-mode #modal-manual-book #man-date:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(194, 155, 113, .20), 0 9px 20px rgba(92, 69, 50, .09);
}

/* Final desktop-workplace geometry.  The header text was intentionally
   removed: the schedule owns the available work area instead of repeating
   the product name above it. */
body.desk-mode {
    padding: 18px 18px 32px 300px;
}

body.desk-mode .desk-workspace-header {
    display: none !important;
}

body.desk-mode .admin-tab {
    top: 314px;
    bottom: auto;
    height: auto;
    max-height: calc(100vh - 338px);
    overflow-y: auto;
    overflow-x: hidden;
    background: transparent !important;
    box-shadow: none !important;
    border: 0 !important;
}

body.desk-mode #admin-tab-matrix {
    width: 100%;
    max-width: none;
}

body.desk-mode #admin-tab-matrix .matrix-container {
    max-height: calc(100vh - 132px);
}

body.desk-mode .desk-menu-account,
body.desk-mode .desk-menu-logout {
    margin-top: 4px;
}

body.desk-mode .desk-menu-logout {
    color: #a9524a;
    border-color: rgba(215, 119, 105, .28);
}

.matrix-today-button {
    min-width: 82px;
    height: 38px;
    white-space: nowrap;
}

.matrix-today-button.active-date {
    color: var(--accent);
    border-color: var(--accent);
    background: rgba(255,255,255,.82);
}

.matrix-current-date {
    display: inline-flex;
    align-items: center;
    min-width: 106px;
    height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--text-main);
    background: var(--bg-card);
    font-size: 13px;
    font-weight: 700;
    justify-content: center;
    white-space: nowrap;
}

/* An appointment cell has the same height as its rowspan.  The colour is a
   manager-selected urgency signal, never a booking status. */
.matrix-appt-vert.priority-standard { background: var(--accent); }
.matrix-appt-vert.priority-calm { background: #62a878; }
.matrix-appt-vert.priority-attention { background: #d8a442; }
.matrix-appt-vert.priority-important { background: #c9764d; }
.matrix-appt-vert.priority-critical { background: #bb5c69; }
.matrix-master-head-editable { cursor: pointer; }
.matrix-master-head-editable:hover { color: var(--accent); background: rgba(255,255,255,.92); }

.appointment-details-modal {
    width: min(560px, calc(100vw - 32px));
    max-height: min(86vh, 760px);
    overflow: auto;
    text-align: left !important;
}

body.desk-mode .desk-account-modal .desk-modal-heading {
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(167,143,116,.20);
}
body.desk-mode .desk-account-modal .desk-profile-section {
    background: linear-gradient(135deg, rgba(255,255,255,.52), rgba(250,243,235,.27));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.72);
}
body.desk-mode .desk-account-modal #desk-account-save {
    margin-top: 16px;
}

.appointment-summary-frame { text-align: center; }
.appointment-service-label {
    display: inline-flex;
    margin-top: 9px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--accent);
    background: rgba(194,155,113,.12);
    font-size: 12px;
    font-weight: 700;
}

.appointment-details-section {
    margin: 0 0 14px;
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: rgba(255,255,255,.28);
}

.appointment-history-list { display: grid; gap: 7px; margin-top: 9px; }
.appointment-history-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(167,143,116,.18);
    color: var(--text-main);
    font-size: 12px;
}
.appointment-history-row:last-child { padding-bottom: 0; border-bottom: 0; }
.appointment-history-row span { display: grid; gap: 2px; min-width: 0; }
.appointment-history-row > span:last-child { text-align: right; color: var(--text-muted); white-space: nowrap; }
.appointment-history-row small, .appointment-history-empty { color: var(--text-muted); font-size: 11px; line-height: 1.35; }

.appointment-priority-palette { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 9px; }
.priority-choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    padding: 0 9px;
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-muted);
    background: var(--bg-card);
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}
.priority-choice span { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); }
.priority-choice.priority-calm span { background: #62a878; }
.priority-choice.priority-attention span { background: #d8a442; }
.priority-choice.priority-important span { background: #c9764d; }
.priority-choice.priority-critical span { background: #bb5c69; }
.priority-choice.active { color: var(--text-main); border-color: currentColor; box-shadow: 0 3px 10px rgba(88,66,47,.11); }

@media (max-width: 1179px) {
    .matrix-current-date { min-width: 96px; padding: 0 8px; font-size: 12px; }
    .matrix-today-button { min-width: 70px; padding: 0 9px; }
    .appointment-details-modal { max-height: calc(100vh - 48px); }
}

/* The marketing date uses the same accessible native picker as manual
   booking.  The old transparent overlay worked on mobile but could not open
   reliably through the desktop glass layer. */
body.desk-mode #admin-tab-marketing #hot-date-display {
    display: none !important;
}

body.desk-mode #admin-tab-marketing #hot-date {
    position: static !important;
    display: block !important;
    width: 100% !important;
    height: 48px !important;
    min-width: 0;
    margin: 0 !important;
    padding: 0 13px !important;
    opacity: 1 !important;
    cursor: pointer;
    color: var(--text-main);
    color-scheme: light;
    appearance: auto;
    -webkit-appearance: auto;
    background: linear-gradient(135deg, rgba(255, 255, 255, .82), rgba(255, 255, 255, .43));
    border: 1px solid rgba(255, 255, 255, .94);
    border-radius: 14px;
    box-shadow: 0 9px 20px rgba(92, 69, 50, .09), inset 0 1px 0 rgba(255, 255, 255, .88);
    font: 500 14px/1 'Inter', sans-serif;
}

body.desk-mode #admin-tab-marketing #hot-date:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(194, 155, 113, .20), 0 9px 20px rgba(92, 69, 50, .09);
}

body.desk-mode .floating-nav {
    display: flex !important;
    align-items: center;
    gap: 8px;
    position: fixed !important;
    z-index: 1000;
    top: 28px !important;
    right: 30px !important;
    bottom: auto !important;
    left: auto !important;
    width: auto !important;
    max-width: none !important;
    padding: 0 !important;
    overflow: visible !important;
    isolation: auto !important;
    transform: none !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

body.desk-mode .floating-nav::before {
    display: none !important;
}

body.desk-mode .desk-account,
body.desk-mode .desk-logout {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
    min-width: 0;
    box-sizing: border-box;
    height: 40px;
    margin: 0 !important;
    justify-content: center;
    padding: 0 12px;
    border: 1px solid rgba(255, 255, 255, .93);
    border-radius: 12px;
    color: var(--text-muted);
    background: linear-gradient(135deg, rgba(255, 255, 255, .80), rgba(255, 255, 255, .43));
    box-shadow: 0 10px 22px rgba(82, 61, 44, .11), inset 0 1px 0 rgba(255, 255, 255, .92);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    backdrop-filter: blur(18px) saturate(160%);
    font: 600 12px/1 'Inter', sans-serif;
    cursor: pointer;
    transition: transform .16s ease, color .16s ease, box-shadow .16s ease;
}

body.desk-mode .desk-logout svg {
    width: 15px;
    height: 15px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.desk-mode .desk-account:hover,
body.desk-mode .desk-logout:hover {
    color: var(--text-main);
    transform: translateY(-1px);
    box-shadow: 0 13px 25px rgba(82, 61, 44, .15), inset 0 1px 0 rgba(255, 255, 255, .95);
}

body.desk-mode .desk-account:focus-visible,
body.desk-mode .desk-logout:focus-visible {
    outline: 3px solid rgba(194, 155, 113, .35);
    outline-offset: 3px;
}

body.desk-mode .desk-account:active,
body.desk-mode .desk-logout:active {
    transform: translateY(0);
}

/* Desktop-only account and access cards.  These are deliberately separate
   from the Mini App modal scale, which stays compact for a phone viewport. */
body.desk-mode .desk-access-modal,
body.desk-mode .desk-account-modal {
    position: relative;
    width: min(780px, calc(100vw - 64px)) !important;
    max-width: 780px !important;
    max-height: min(86vh, 860px);
    overflow: auto;
    padding: 30px !important;
    border: 1px solid rgba(255, 255, 255, .88);
    background: linear-gradient(135deg, rgba(255,255,255,.78), rgba(239,231,218,.61));
    box-shadow: 0 28px 68px rgba(64, 47, 31, .25), inset 0 1px 0 rgba(255,255,255,.88);
}

body.desk-mode .desk-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.92);
    border-radius: 50%;
    background: rgba(255,255,255,.48);
    color: var(--text-muted);
    font: 400 24px/1 Arial, sans-serif;
    cursor: pointer;
}

body.desk-mode .desk-modal-close:hover { color: var(--text-main); background: rgba(255,255,255,.78); }

body.desk-mode .desk-modal-heading { max-width: 630px; margin: 0 38px 21px 0; }
body.desk-mode .desk-modal-eyebrow {
    display: block;
    margin-bottom: 5px;
    color: var(--accent);
    font: 700 10px/1.2 'Inter', sans-serif;
    letter-spacing: .12em;
}
body.desk-mode .desk-modal-heading h3 { margin: 0 0 7px; font-size: 25px; line-height: 1.12; }
body.desk-mode .desk-modal-heading p,
body.desk-mode .desk-identity-section > p,
body.desk-mode .desk-section-hint {
    margin: 0;
    color: var(--text-muted);
    font-size: 12px;
    line-height: 1.48;
}
body.desk-mode .desk-access-form { display: grid; gap: 8px; }
body.desk-mode .desk-access-form .booking-field-label { margin: 4px 0 -3px; }
body.desk-mode .desk-access-form .select-field { width: 100%; margin: 0; }
body.desk-mode .desk-profile-section,
body.desk-mode .desk-identity-section {
    margin: 13px 0 0;
    padding: 15px;
    border: 1px solid rgba(255,255,255,.72);
    border-radius: 17px;
    background: rgba(255,255,255,.28);
}
body.desk-mode .desk-section-title {
    margin-bottom: 9px;
    color: var(--text-main);
    font: 700 12px/1.2 'Inter', sans-serif;
    letter-spacing: .03em;
    text-transform: uppercase;
}
body.desk-mode .desk-identity-section > p { margin: -2px 0 12px; }
body.desk-mode .desk-profile-grid,
body.desk-mode .desk-identity-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.desk-mode .desk-identity-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body.desk-mode .desk-profile-grid label,
body.desk-mode .desk-identity-grid label { display: grid; gap: 6px; min-width: 0; }
body.desk-mode .desk-profile-grid label > span,
body.desk-mode .desk-identity-grid label > span {
    color: var(--text-muted);
    font: 600 11px/1.2 'Inter', sans-serif;
}
body.desk-mode .desk-profile-grid .input-field,
body.desk-mode .desk-identity-grid .input-field { margin: 0; min-width: 0; }
body.desk-mode .desk-account-remove { margin: 10px 0 0; }
body.desk-mode .desk-account-passwords { margin-bottom: 15px; }
body.desk-mode .desk-user-row small { color: var(--text-muted); }

@media (max-width: 700px) {
    body.desk-mode .desk-access-modal,
    body.desk-mode .desk-account-modal { width: calc(100vw - 30px) !important; padding: 22px !important; }
    body.desk-mode .desk-profile-grid,
    body.desk-mode .desk-identity-grid { grid-template-columns: 1fr; }
}

/* Readable glass controls and compact mobile dashboards.  The transparent
   layer remains, but editable data must never disappear into the backdrop. */
:root {
    --control-fill: rgba(255, 255, 255, .88);
    --control-fill-focus: rgba(255, 255, 255, .96);
    --control-line: rgba(111, 87, 67, .30);
    --control-ink: #3f352c;
    --control-placeholder: #827164;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]),
select,
textarea,
.input-field,
.select-field {
    background: linear-gradient(135deg, var(--control-fill), rgba(255, 250, 246, .76)) !important;
    border-color: var(--control-line) !important;
    color: var(--control-ink) !important;
    -webkit-text-fill-color: var(--control-ink) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .98), 0 4px 11px rgba(89, 67, 51, .07) !important;
}

input:not([type="hidden"])::placeholder,
textarea::placeholder {
    color: var(--control-placeholder) !important;
    opacity: 1;
    -webkit-text-fill-color: var(--control-placeholder) !important;
}

input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
select:focus,
textarea:focus,
.input-field:focus,
.select-field:focus {
    background: var(--control-fill-focus) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(194, 155, 122, .23), inset 0 1px 0 #fff !important;
}

input[type="file"] {
    color: var(--control-ink);
    background: rgba(255, 255, 255, .70);
    border: 1px solid var(--control-line);
    border-radius: 12px;
    padding: 10px;
}

input[type="file"]::file-selector-button {
    margin-right: 9px;
    padding: 6px 9px;
    border: 1px solid rgba(111, 87, 67, .24);
    border-radius: 8px;
    color: var(--control-ink);
    background: #fff;
    font: 600 11px inherit;
}

/* The desktop dashboard keeps its information-dense composition, while the
   shared Mini App gets a hierarchy that is readable with one hand. */
.analytics-tabs {
    padding: 5px;
    border: 1px solid rgba(111, 87, 67, .18);
    border-radius: 15px;
    background: rgba(255, 255, 255, .48);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .86);
}

.analytics-tab {
    min-height: 38px;
    border-radius: 10px;
}

.analytics-panel .section-title {
    margin-top: 18px;
    color: #5b4b3f;
    letter-spacing: .025em;
}

.analytics-panel .analytic-card,
.analytics-panel .analytics-detail-card,
.analytics-panel .salary-summary-card,
.analytics-panel .salary-editor-card,
.analytics-panel .analytics-list-card,
.analytics-panel .analytics-split > .card,
.analytics-panel .analytics-flow-card {
    border-color: rgba(111, 87, 67, .18);
    box-shadow: 0 9px 20px rgba(89, 67, 51, .08), inset 0 1px 0 rgba(255, 255, 255, .90);
}

.analytics-caption {
    color: #77675b;
    font-weight: 700;
}

.analytics-list-row {
    min-height: 30px;
    align-items: center;
    color: #5b4b3f;
}

.analytics-list-row strong,
.analytics-detail-card strong,
.salary-summary-card strong {
    color: #9b704d;
}

@media (max-width: 1179px) {
    #admin-tab-analytics {
        padding-bottom: 108px;
    }

    #admin-tab-analytics .analytics-tabs {
        position: sticky;
        top: 8px;
        z-index: 6;
        margin: 8px 0 14px;
        background: rgba(255, 255, 255, .82);
        -webkit-backdrop-filter: blur(16px) saturate(145%);
        backdrop-filter: blur(16px) saturate(145%);
    }

    #admin-tab-analytics .analytics-tab {
        min-height: 40px;
        padding: 8px 3px;
        font-size: 11px;
    }

    #admin-tab-analytics .section-title {
        margin: 18px 2px 10px;
        font-size: 15px;
    }

    #admin-tab-analytics .analytics-metric-grid {
        gap: 9px;
    }

    #admin-tab-analytics .analytics-metric-grid .analytic-card {
        display: flex;
        min-height: 78px;
        padding: 12px;
        text-align: left;
        flex-direction: column;
        justify-content: space-between;
    }

    #admin-tab-analytics .analytics-metric-grid .analytic-val {
        margin-top: 7px;
        font-size: 19px;
        line-height: 1.05;
    }

    #admin-tab-analytics .analytics-finance-details {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #admin-tab-analytics .analytics-finance-details .analytics-detail-card {
        min-height: 48px;
        flex-direction: row;
        align-items: center;
        gap: 12px;
        font-size: 11px;
    }

    #admin-tab-analytics .analytics-finance-details .analytics-detail-card strong {
        margin-left: auto;
        font-size: 14px;
        text-align: right;
    }

    #admin-tab-analytics .salary-summary-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    #admin-tab-analytics .salary-summary-card {
        min-height: 68px;
        padding: 12px 13px;
    }

    #admin-tab-analytics .salary-summary-card span {
        font-size: 13px;
    }

    #admin-tab-analytics .salary-summary-card small {
        font-size: 10px;
    }

    #admin-tab-analytics .salary-summary-card strong {
        font-size: 14px;
    }

    #admin-tab-analytics .salary-editor-card {
        padding: 14px;
    }

    #admin-tab-analytics .salary-base-rate {
        min-height: 38px;
        font-size: 13px;
    }

    #admin-tab-analytics .salary-base-rate input,
    #admin-tab-analytics .salary-service-row input {
        width: 52px;
        min-height: 31px;
        font-size: 13px;
    }

    #admin-tab-analytics .salary-base-rate button,
    #admin-tab-analytics .salary-service-row button {
        width: 31px;
        height: 31px;
        border-radius: 9px;
    }

    #admin-tab-analytics .salary-rate-category summary {
        min-height: 42px;
        align-items: center;
        font-size: 12px;
    }

    #admin-tab-analytics .salary-service-row {
        min-height: 40px;
        font-size: 11px;
    }

    #admin-tab-analytics .analytics-split {
        grid-template-columns: 1fr;
        gap: 9px;
    }

    #admin-tab-analytics .analytics-split > .card,
    #admin-tab-analytics .analytics-list-card {
        padding: 13px;
    }

    #admin-tab-analytics .analytics-flow-card {
        padding: 18px 12px 31px;
    }

    #admin-tab-analytics .bar-chart {
        height: 112px;
    }

    .admin-content .card,
    .admin-content .staff-list-card,
    .admin-content .service-admin-card,
    .admin-content .client-list-card {
        border-color: rgba(111, 87, 67, .18);
    }
}
/* Shared CRM workspace additions: high contrast controls without external assets. */
.admin-notifications-button{border:1px solid var(--border);background:rgba(255,255,255,.78);color:var(--text-main);border-radius:999px;padding:6px 10px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;box-shadow:0 5px 14px rgba(83,68,49,.08)}
.matrix-action-nav .admin-notifications-button{min-height:40px;white-space:nowrap}
.admin-notifications-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:999px;background:var(--danger);color:#fff;font-size:10px}
.matrix-status-filters{display:flex;flex-wrap:wrap;gap:7px;margin:-2px 0 12px}.matrix-status-filters label{display:flex;gap:5px;align-items:center;padding:6px 9px;border:1px solid var(--border);background:rgba(255,255,255,.72);border-radius:12px;color:var(--text-main);font-size:12px;font-weight:600}.matrix-status-filters input{accent-color:var(--accent)}
.matrix-appt-filtered{opacity:.28;filter:saturate(.35)}
.schedule-actions,.crm-client-filters{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}.crm-client-filters .select-field{min-width:148px;flex:1;margin:0}
.appointment-status-controls,.appointment-payment-methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.appointment-payment-methods{grid-template-columns:repeat(3,minmax(0,1fr))}.appointment-status-controls button,.appointment-payment-methods button{min-height:38px;padding:7px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.68);color:var(--text-main);font-size:12px;font-weight:700;cursor:pointer}.appointment-status-controls button.active,.appointment-payment-methods button.active{background:var(--text-main);color:#fff;border-color:var(--text-main)}
.appointment-services-list,.appointment-consumables-list{display:grid;gap:7px}.appointment-service-row,.appointment-consumable-row{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 11px;border:1px solid var(--border);border-radius:13px;background:rgba(255,255,255,.62);text-align:left;font-size:13px}.appointment-service-row small,.appointment-consumable-row small{display:block;margin-top:3px;color:var(--text-muted);font-size:11px}.appointment-payment-row{display:flex;gap:8px;margin-top:9px}.appointment-payment-row .input-field{margin:0;min-width:0}.appointment-payment-row .btn-small{white-space:nowrap}.appointment-add-services{margin-top:9px;padding:10px;border-radius:14px;background:rgba(120,105,87,.08)}.appointment-service-choices{display:grid;gap:6px;max-height:190px;overflow:auto;margin:8px 0}.appointment-service-choice{display:grid;grid-template-columns:auto 1fr;gap:1px 8px;align-items:center;padding:8px;border-radius:10px;background:rgba(255,255,255,.7);font-size:12px}.appointment-service-choice input{grid-row:1/3;accent-color:var(--accent)}.appointment-service-choice small{color:var(--text-muted)}
.client-card-modal{width:min(1120px,calc(100vw - 32px));max-width:1120px;text-align:left}.crm-form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin:10px 0}.crm-form-grid label,#schedule-range-modal label{display:grid;gap:4px;color:var(--text-muted);font-size:11px;font-weight:700}.crm-form-grid .input-field,.crm-form-grid .select-field,#schedule-range-modal .input-field{margin:0}.client-card-metrics{margin:0 0 12px;color:var(--text-muted);font-size:12px}.crm-online-booking-toggle{display:flex;align-items:center;gap:8px;margin:10px 0 12px;font-size:13px;font-weight:600}.crm-online-booking-toggle input{accent-color:var(--accent)}.client-note-composer{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:start;margin:10px 0}.client-note-composer .input-field{margin:0}.client-notes-list{display:grid;gap:7px;max-height:175px;overflow:auto;margin:8px 0 14px}.client-note-item{display:grid;gap:3px;padding:9px;border-left:3px solid var(--accent);background:rgba(255,255,255,.62);border-radius:8px;font-size:12px}.client-note-item small{color:var(--text-muted)}
.client-message-composer{margin:10px 0 14px;padding:11px;border-radius:14px;background:rgba(120,105,87,.08)}.client-message-composer .input-field{margin:8px 0}.client-message-composer .btn-small{width:100%}
.notifications-modal{max-width:500px}.notifications-modal-header{display:flex;justify-content:space-between;gap:8px;align-items:center;margin-bottom:12px}.notifications-modal-header h3{margin:0}.admin-notification-item{display:flex;width:100%;justify-content:space-between;gap:12px;text-align:left;padding:12px;border:0;border-bottom:1px solid var(--border);background:transparent;color:var(--text-main);cursor:pointer}.admin-notification-item.unread{background:rgba(229,220,255,.36)}.admin-notification-item span{display:grid;gap:4px}.admin-notification-item small,.admin-notification-item time{font-size:11px;color:var(--text-muted)}
.online-booking-alert{width:min(420px,calc(100vw - 32px));text-align:center;padding:28px 24px 22px}.online-booking-alert-icon{display:grid;place-items:center;width:46px;height:46px;margin:0 auto 12px;border-radius:16px;background:rgba(194,155,122,.2);color:var(--accent);font-size:24px}.online-booking-alert h3{margin:0 34px 8px;font-size:20px}.online-booking-alert p{margin:0;color:var(--text-muted);line-height:1.45}.online-booking-alert-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}.online-booking-alert-actions .btn{width:auto;margin:0;min-width:180px}.online-booking-alert-actions .btn-small{min-width:78px}
.categories-modal{max-width:580px}.crm-category-create{display:grid;grid-template-columns:minmax(0,1fr) 140px 42px auto;gap:7px;align-items:center;margin:12px 0}.crm-category-create .input-field,.crm-category-create .select-field{margin:0}.crm-category-create input[type=color]{height:42px;padding:2px;border:1px solid var(--border);border-radius:10px;background:#fff}.crm-categories-list{display:grid;gap:7px;max-height:350px;overflow:auto}.crm-category-row{display:flex;gap:9px;align-items:center;padding:10px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.66)}.crm-category-row>span:nth-child(2){display:grid;gap:3px;flex:1;font-size:13px}.crm-category-row small{font-size:11px;color:var(--text-muted)}.crm-category-dot{width:13px;height:13px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.07)}
@media(max-width:620px){.appointment-status-controls{grid-template-columns:repeat(2,minmax(0,1fr))}.crm-form-grid{grid-template-columns:1fr}.crm-client-filters .select-field{min-width:0}.crm-category-create{grid-template-columns:1fr 1fr 42px}.crm-category-create .btn-small{grid-column:1/-1}.client-note-composer{grid-template-columns:1fr}.appointment-consumable-row{align-items:flex-start;flex-direction:column}.appointment-consumable-row .btn-small{width:100%}}

/* Compact operational UI: the same controls remain available on desktop and
   in the Mini App, without letting a narrow WebView overflow horizontally. */
.staff-name-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 12px}.staff-name-fields label{display:grid;gap:5px;color:var(--text-muted);font-size:12px;font-weight:700}.staff-name-fields .input-field{margin:0}
.modal-content{position:relative}.modal-content .desk-modal-close{position:absolute;top:10px;right:10px;z-index:3;display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:10px;background:rgba(255,255,255,.72);color:var(--text-main);font-size:24px;line-height:1;cursor:pointer;box-shadow:0 3px 10px rgba(67,51,35,.10)}.modal-content .desk-modal-close:hover{background:#fff;color:var(--danger)}.modal-content:has(.desk-modal-close)>h3{padding-right:34px}
.matrix-toolbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 10px}.matrix-date-nav,.matrix-action-nav{display:flex;align-items:center;gap:8px;min-width:0}.matrix-date-nav{flex:1}.matrix-date-nav .btn-small,.matrix-action-nav .btn-small{min-height:40px;white-space:nowrap}.matrix-current-date{display:inline-flex;align-items:center;justify-content:center;min-width:118px;padding:0 10px;color:var(--text-main);font-size:13px;font-weight:800}.matrix-match-button{background:var(--accent)!important;color:#fff!important;border-color:var(--accent)!important}
.schedule-calendar-card{padding:12px}.schedule-grid{display:grid!important;grid-template-columns:repeat(7,minmax(0,1fr))!important;gap:6px}.schedule-grid .option-btn{box-sizing:border-box;min-width:0!important;width:100%;height:54px;min-height:54px!important;padding:5px 2px;overflow:hidden;text-align:center}.schedule-grid .option-btn small{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.staff-list{display:grid;gap:9px}.staff-list-card{min-height:78px;padding:11px 12px;gap:10px;grid-template-columns:42px minmax(0,1fr) auto 14px;border-radius:17px;text-align:left}.staff-list-avatar{width:42px;height:42px}.staff-list-main{min-width:0;gap:3px}.staff-list-main strong{font-size:15px;line-height:1.16}.staff-list-main small{font-size:11px;line-height:1.25}.staff-identity-list{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.staff-list-services{min-width:28px;font-size:16px}.staff-list-services small{font-size:9px}.staff-list-arrow{font-size:24px}
.appointment-list-card{padding:12px;border:1px solid var(--border);border-radius:17px;background:rgba(255,255,255,.68);box-shadow:0 8px 20px rgba(80,63,44,.07);margin-bottom:9px}.appointment-list-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:5px}.appointment-list-head>div:first-child{min-width:0}.appointment-list-head strong{display:block;font-size:15px;line-height:1.2}.appointment-list-head small{display:block;max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-muted);font-size:11px;margin-top:2px}.appointment-list-head>div:last-child{max-width:46%;color:var(--accent);font-size:11px;font-weight:800;text-align:right;line-height:1.25}.appointment-list-client{margin:7px 0 10px;color:var(--text-muted);font-size:12px}.appointment-list-client span{margin-left:4px;font-size:11px}.appointment-list-actions{display:grid;grid-template-columns:1fr 1fr 38px;gap:7px}.appointment-list-actions .btn-small{min-height:35px;padding:6px;font-size:11px}.appointment-arrived{border-color:#2ECC71!important;color:#218b4d!important}.appointment-missed{border-color:var(--danger)!important;color:var(--danger)!important}.appointment-open{font-size:22px!important;line-height:1!important;padding:0!important}
.matrix-appt-notes{display:grid;gap:1px;margin-top:2px}.matrix-appt-note{margin-top:0!important}.matrix-appt-note b{font-weight:800}.matrix-appt-vert{padding:4px;min-width:0}.matrix-appt-client{margin-top:1px}.appointment-comment-panel{margin:12px 0;padding:11px;border:1px solid var(--border);border-radius:14px;background:rgba(255,255,255,.55);text-align:left}.appointment-comment-panel .input-field{margin:7px 0}.appointment-comment-hint{margin:3px 0 0;color:var(--text-muted);font-size:11px;line-height:1.35}
.crm-category-actions{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.crm-category-delete{border-color:var(--danger)!important;color:var(--danger)!important}
@media(max-width:620px){.modal-content{padding:20px 16px}.staff-name-fields{gap:8px}.matrix-toolbar{display:grid;gap:8px;margin:10px 0}.matrix-date-nav{display:grid;grid-template-columns:36px minmax(0,1fr) minmax(0,1.22fr) 36px;gap:6px;width:100%}.matrix-date-nav .btn-small{min-width:0;padding:6px 2px;font-size:11px}.matrix-current-date{min-width:0;width:100%;padding:0 5px;font-size:12px;overflow:hidden;white-space:nowrap}.matrix-action-nav{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;width:100%}.matrix-action-nav .btn-small,.matrix-action-nav .admin-notifications-button{min-width:0;padding:6px;font-size:10px}.matrix-status-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 10px}.matrix-status-filters label{justify-content:center;min-width:0;padding:6px;font-size:11px}.schedule-calendar-card{padding:9px}.schedule-grid{gap:4px}.schedule-grid .option-btn{height:47px;min-height:47px!important;font-size:10px;border-radius:8px}.schedule-grid .option-btn small{font-size:7px}.staff-list-card{min-height:70px;padding:10px;gap:8px;grid-template-columns:38px minmax(0,1fr) auto 11px;border-radius:15px}.staff-list-avatar{width:38px;height:38px}.staff-list-main strong{font-size:14px}.staff-list-main small{font-size:10px}.staff-list-services{font-size:14px}.staff-list-arrow{font-size:20px}.appointment-list-card{padding:10px;margin-bottom:8px;border-radius:15px}.appointment-list-head strong{font-size:14px}.appointment-list-head small{max-width:145px}.appointment-list-head>div:last-child{font-size:10px}.appointment-list-client{font-size:11px;margin:6px 0 8px}.appointment-list-actions{grid-template-columns:1fr 1fr 33px;gap:6px}.appointment-list-actions .btn-small{min-height:33px;font-size:10px}.crm-category-row{align-items:flex-start}.crm-category-actions{display:grid;gap:5px}.crm-category-actions .btn-small{padding:6px;font-size:10px}.crm-category-create{grid-template-columns:1fr 1fr 42px}.crm-category-create #crm-category-save,.crm-category-create #crm-category-cancel{grid-column:auto;width:100%}.crm-category-create #crm-category-save{grid-column:1/3}.crm-category-create #crm-category-cancel{grid-column:3}.appointment-comment-panel{padding:10px}.modal-content .desk-modal-close{top:7px;right:7px}.online-booking-alert-actions{display:grid;grid-template-columns:1fr}.online-booking-alert-actions .btn,.online-booking-alert-actions .btn-small{width:100%;min-width:0}}

/* The desktop chessboard always fits every employee column in the visible
   workspace. Appointment blocks span their booked interval and keep the
   service, client and any supplied comments readable without truncation. */
.desk-mode #admin-tab-matrix .matrix-container { overflow-x: hidden; }
.desk-mode #admin-tab-matrix .matrix-table-vertical { width: 100% !important; min-width: 0; table-layout: fixed; }
.desk-mode #admin-tab-matrix .matrix-master-col { width: auto; }
.matrix-appt-vert { justify-content: flex-start; text-align: left; overflow: visible; overflow-wrap: anywhere; word-break: break-word; }
.matrix-appt-note { display: block; overflow: visible; -webkit-line-clamp: unset; -webkit-box-orient: initial; white-space: normal; overflow-wrap: anywhere; }
.matrix-appt-notes { width: 100%; }

/* Mini App personnel is a compact two-column directory.  Desktop keeps the
   existing wide manager layout; only non-desktop Mini App surfaces use this
   denser card treatment. */
body:not(.desk-mode) #admin-tab-masters .staff-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-card {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 22px;
    grid-template-rows: auto auto;
    min-width: 0;
    min-height: 94px;
    padding: 9px;
    gap: 3px 7px;
    align-items: center;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-avatar {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    width: 34px;
    height: 34px;
    margin-top: 1px;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-main {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    width: 100%;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-main strong {
    font-size: 12px;
    line-height: 1.18;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-main small {
    margin-top: 2px;
    font-size: 9px;
    line-height: 1.18;
}
body:not(.desk-mode) #admin-tab-masters .staff-identity-list {
    font-size: 8px !important;
    line-height: 1.15 !important;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-services {
    grid-column: 3;
    grid-row: 1;
    align-self: start;
    min-width: 0;
    font-size: 13px;
    line-height: 1.05;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-services small {
    font-size: 7px;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-arrow {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    font-size: 18px;
    line-height: 1;
}

/* Active appointment cards open the details modal.  Status is changed there,
   so the list remains a clean, single-tap surface without nested actions. */
.appointment-list-card {
    display: block;
    width: 100%;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    color: var(--text-main);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease;
}
.appointment-list-card:hover,
.appointment-list-card:focus-visible {
    border-color: var(--accent);
    box-shadow: 0 10px 24px rgba(80,63,44,.12);
    outline: none;
}
.appointment-list-card:active { transform: scale(.992); }
.appointment-list-open-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 8px;
    padding-top: 7px;
    border-top: 1px solid rgba(167,143,116,.18);
    color: var(--accent);
    font-size: 10px;
    font-weight: 750;
}
.appointment-list-open-hint span:last-child {
    font-size: 20px;
    font-weight: 400;
    line-height: .7;
}

/* Payment and consumables belong to the desktop manager workflow.  Mini App
   appointment details stay focused on status, services, history and notes. */
body:not(.desk-mode) #detail-payment-section,
body:not(.desk-mode) #detail-consumables-section {
    display: none !important;
}

/* Analytics on a phone keeps the same information hierarchy as the desktop
   dashboard: compact metric cards are readable in three columns, and the
   chart starts with a deliberate breathing space below them. */
body:not(.desk-mode) #admin-tab-analytics .analytics-metric-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
    margin: 0;
}
body:not(.desk-mode) #admin-tab-analytics .analytics-metric-grid .analytic-card {
    min-width: 0;
    min-height: 68px;
    margin: 0;
    padding: 8px 7px;
    border-radius: 14px;
    text-align: left;
}
body:not(.desk-mode) #admin-tab-analytics .analytics-metric-grid .analytics-caption {
    display: -webkit-box;
    overflow: hidden;
    color: #77675b;
    font-size: 8px;
    line-height: 1.16;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
body:not(.desk-mode) #admin-tab-analytics .analytics-metric-grid .analytic-val {
    margin-top: 5px;
    font-size: 15px;
    line-height: 1.05;
    white-space: nowrap;
}
body:not(.desk-mode) #analytics-panel-flow .analytics-flow-card {
    margin-top: 9px;
    margin-bottom: 10px;
    padding: 14px 8px 29px;
}

/* Salary setup mirrors the desktop workspace in a narrow Mini App: masters
   remain in a compact column on the left while percentage editing stays
   visible alongside it on the right. */
body:not(.desk-mode) #analytics-panel-salaries {
    display: grid;
    grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr);
    column-gap: 9px;
    row-gap: 8px;
    align-items: start;
}
body:not(.desk-mode) #analytics-panel-salaries > .section-title,
body:not(.desk-mode) #analytics-panel-salaries > .analytics-hint {
    grid-column: 1 / -1;
    margin-left: 0;
    margin-right: 0;
}
body:not(.desk-mode) #analytics-panel-salaries #an-salary-summary {
    grid-column: 1;
    display: grid;
    grid-template-columns: 1fr;
    gap: 7px;
    min-width: 0;
    margin: 0;
    align-content: start;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-summary-card {
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 7px 8px;
    border-radius: 13px;
    display: flex;
    align-items: center;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-summary-card span {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    font-size: 11px;
    line-height: 1.18;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-summary-card small,
body:not(.desk-mode) #analytics-panel-salaries .salary-summary-card strong { display: none !important; }
body:not(.desk-mode) #analytics-panel-salaries .salary-editor-card {
    grid-column: 2;
    min-width: 0;
    margin: 0;
    padding: 10px;
    border-radius: 16px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-editor-card > .analytics-caption {
    font-size: 10px;
    line-height: 1.2;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-base-rate {
    min-width: 0;
    gap: 5px;
    padding: 6px 0;
    font-size: 10px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-base-rate > div,
body:not(.desk-mode) #analytics-panel-salaries .salary-service-row > div {
    gap: 3px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-base-rate input,
body:not(.desk-mode) #analytics-panel-salaries .salary-service-row input {
    width: 34px;
    min-height: 26px;
    padding: 3px 2px;
    font-size: 10px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-base-rate button,
body:not(.desk-mode) #analytics-panel-salaries .salary-service-row button {
    width: 24px;
    height: 24px;
    padding: 0;
    font-size: 11px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-editor-note {
    margin-bottom: 7px;
    padding: 6px;
    font-size: 8px;
    line-height: 1.2;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-rate-category summary {
    min-width: 0;
    padding: 7px 0;
    font-size: 10px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px;
    min-width: 0;
    padding: 5px 0;
    font-size: 9px;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-service-row > span {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    line-height: 1.16;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
body:not(.desk-mode) #analytics-panel-salaries .salary-service-row small {
    font-size: 7px;
}

/* Personnel cards have enough width for a surname instead of truncating it;
   linked VK/Telegram/MAX identifiers are intentionally kept in the profile
   modal, not repeated on every compact directory card. */
body:not(.desk-mode) #admin-tab-masters .staff-list-main strong {
    display: -webkit-box;
    overflow: hidden;
    white-space: normal;
    overflow-wrap: anywhere;
    line-height: 1.16;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
body:not(.desk-mode) #admin-tab-masters .staff-list-main small {
    white-space: normal;
    overflow-wrap: anywhere;
}
body:not(.desk-mode) #admin-tab-masters .staff-identity-list {
    display: none !important;
}

/* Keep compact Mini App surfaces separated from the floating navigation and
   give modal sections a consistent rhythm, including very narrow WebViews. */
body:not(.desk-mode) #admin-tab-analytics {
    padding-bottom: 116px;
}
body:not(.desk-mode) .appointment-details-modal {
    width: calc(100vw - 24px);
    max-width: 560px;
    max-height: calc(100vh - 28px);
    padding: 18px 13px 20px;
    border-radius: 20px;
}
body:not(.desk-mode) .appointment-details-modal > .appointment-info-frame {
    margin: 0 0 10px;
    padding: 11px;
}
body:not(.desk-mode) .appointment-details-modal .appointment-details-section,
body:not(.desk-mode) .appointment-details-modal .appointment-comment-panel {
    margin: 0 0 10px;
    padding: 10px;
    border-radius: 14px;
}
body:not(.desk-mode) .appointment-details-modal .appointment-info-label {
    line-height: 1.2;
}
body:not(.desk-mode) .appointment-details-modal .desk-modal-close {
    top: 8px;
    right: 8px;
}

/* Schedule controls use one predictable rhythm in both the web panel and the
   Mini App.  The selector is a real form control so a long staff list never
   turns into a clipped horizontal strip of pills. */
.schedule-master-picker {
    display: grid;
    gap: 6px;
    margin: 0 0 15px;
}
.schedule-master-label {
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 750;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.schedule-master-select {
    width: 100%;
    min-height: 44px;
    margin: 0;
    box-sizing: border-box;
    cursor: pointer;
}
.schedule-master-select:disabled {
    cursor: not-allowed;
    opacity: .7;
}
.schedule-month-picker {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin: 0 0 14px;
}
.schedule-month-picker .select-field {
    width: 100%;
    min-width: 0;
    margin: 0;
    box-sizing: border-box;
}
.schedule-actions {
    align-items: stretch;
    gap: 8px;
    margin: 0 0 14px;
}
.schedule-actions .btn-small {
    flex: 1 1 0;
    min-width: 0;
    min-height: 40px;
}
body:not(.desk-mode) #admin-tab-schedule {
    padding-bottom: 116px;
}

/* Compact the marketing date/time controls and loyalty setting on a narrow
   Mini App screen.  Labels remain readable while the fields no longer take
   an entire card height. */
body:not(.desk-mode) #admin-tab-marketing .hot-slot-date-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
    margin: 0 0 10px;
}
body:not(.desk-mode) #admin-tab-marketing .hot-date-picker,
body:not(.desk-mode) #admin-tab-marketing .hot-time-select {
    min-width: 0;
    flex: 1 1 0;
}
body:not(.desk-mode) #admin-tab-marketing .hot-date-display,
body:not(.desk-mode) #admin-tab-marketing .hot-time-select,
body:not(.desk-mode) #admin-tab-marketing .loyalty-percent-input,
body:not(.desk-mode) #admin-tab-marketing .loyalty-save-button {
    min-height: 40px;
    height: 40px;
    margin: 0;
    padding-top: 7px;
    padding-bottom: 7px;
    border-radius: 11px;
    font-size: 12px;
    line-height: 1.15;
}
body:not(.desk-mode) #admin-tab-marketing .hot-date-display {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
body:not(.desk-mode) #admin-tab-marketing .hot-date-input {
    position: absolute;
    z-index: 2;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    margin: 0;
    padding: 0;
    border: 0;
}
body:not(.desk-mode) #admin-tab-marketing .loyalty-setting-row {
    display: flex;
    align-items: stretch;
    gap: 7px;
}
body:not(.desk-mode) #admin-tab-marketing .loyalty-percent-input {
    flex: 1 1 auto;
}
body:not(.desk-mode) #admin-tab-marketing .loyalty-save-button {
    flex: 0 0 auto;
    width: auto;
    padding-left: 16px;
    padding-right: 16px;
    font-size: 11px;
}
body:not(.desk-mode) #admin-tab-schedule #admin-schedule-empty {
    margin-top: 4px;
    padding: 18px 12px;
    border: 1px dashed rgba(167,143,116,.28);
    border-radius: 14px;
    line-height: 1.35;
}

/* The narrow Mini App still has enough room for the date and action controls
   when they share a row.  Keep a stacked fallback only for very small phones. */
@media (min-width: 421px) and (max-width: 620px) {
    body:not(.desk-mode) .matrix-toolbar {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 6px;
        margin: 10px 0 12px;
    }
    body:not(.desk-mode) .matrix-date-nav {
        display: grid;
        grid-template-columns: 28px minmax(54px, .72fr) minmax(78px, 1fr) 28px;
        flex: 1 1 58%;
        gap: 5px;
        width: auto;
    }
    body:not(.desk-mode) .matrix-action-nav {
        display: grid;
        grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
        flex: 1 1 42%;
        gap: 5px;
        width: auto;
    }
    body:not(.desk-mode) .matrix-date-nav .btn-small,
    body:not(.desk-mode) .matrix-action-nav .btn-small {
        min-width: 0;
        min-height: 38px;
        padding: 6px 4px;
        font-size: 11px;
    }
    body:not(.desk-mode) .matrix-current-date {
        min-width: 0;
        width: 100%;
        padding: 0 4px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 11px;
    }
    body:not(.desk-mode) .matrix-today-button {
        min-width: 0;
        padding-left: 4px;
        padding-right: 4px;
    }
}

/* Keep the calendar and its two actions on one line even on the smallest
   Mini App viewport.  The controls deliberately shrink before they wrap so
   the date context and the primary actions remain visible together. */
@media (max-width: 420px) {
    body:not(.desk-mode) .matrix-toolbar {
        display: flex;
        align-items: center;
        width: 100%;
        gap: 4px;
        margin: 9px 0 11px;
    }
    body:not(.desk-mode) .matrix-date-nav {
        display: grid;
        grid-template-columns: 24px 46px minmax(68px, 1fr) 24px;
        flex: 1 1 54%;
        gap: 3px;
        width: auto;
    }
    body:not(.desk-mode) .matrix-action-nav {
        display: grid;
        grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
        flex: 1 1 46%;
        gap: 4px;
        width: auto;
    }
    body:not(.desk-mode) .matrix-date-nav .btn-small,
    body:not(.desk-mode) .matrix-action-nav .btn-small {
        min-width: 0;
        min-height: 36px;
        padding: 5px 2px;
        font-size: 10px;
        line-height: 1.1;
        white-space: nowrap;
    }
    body:not(.desk-mode) .matrix-current-date {
        min-width: 0;
        width: 100%;
        padding: 0 2px;
        overflow: hidden;
        white-space: nowrap;
        font-size: 10px;
    }
    body:not(.desk-mode) .matrix-today-button {
        min-width: 0;
        padding-left: 2px;
        padding-right: 2px;
    }
}

/* Give the appointment details modal a clear vertical cadence.  The same
   spacing applies when optional payment/consumable blocks are hidden, so the
   status, services and history sections never visually run together. */
body:not(.desk-mode) .appointment-details-modal {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 21px 16px 22px;
}
body:not(.desk-mode) .appointment-details-modal > * {
    margin: 0 !important;
}
body:not(.desk-mode) .appointment-details-modal > .appointment-info-frame {
    padding: 12px;
}
body:not(.desk-mode) .appointment-details-modal .appointment-details-section,
body:not(.desk-mode) .appointment-details-modal .appointment-comment-panel {
    padding: 12px;
}

/* The desktop workplace reserves the fixed calendar/menu column on the
   left, while the chessboard itself uses every remaining pixel.  The old
   18px body gutter plus a second right-side calculation left a visible blank
   strip and reduced the useful column width. */
@media (min-width: 1180px) {
    body.desk-mode {
        padding-right: 0;
    }

    body.desk-mode #admin-tab-matrix {
        width: calc(100vw - 300px);
        max-width: none;
    }

    body.desk-mode #admin-tab-matrix .matrix-container {
        width: 100%;
    }
}

/* Final desktop chessboard alignment.  Keep the fixed calendar/menu column
   on the far left and give the board the remaining viewport with a small,
   predictable gutter.  The toolbar uses an intrinsic action column so the
   "+ Подобрать" control cannot be pushed beyond the viewport. */
@media (min-width: 1180px) {
    body.desk-mode {
        padding-left: 260px;
        padding-right: 12px;
    }

    body.desk-mode .desk-sidebar-calendar,
    body.desk-mode .admin-tab {
        left: 12px;
        width: 236px;
    }

    body.desk-mode #admin-tab-matrix {
        width: 100%;
        max-width: none;
        min-width: 0;
    }

    body.desk-mode #admin-tab-matrix .matrix-toolbar {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        width: 100%;
        min-width: 0;
        gap: 10px;
    }

    body.desk-mode #admin-tab-matrix .matrix-date-nav {
        flex: initial;
        min-width: 0;
    }

    body.desk-mode #admin-tab-matrix .matrix-action-nav {
        flex: initial;
        min-width: 0;
        justify-content: flex-end;
        gap: 6px;
    }

    body.desk-mode #admin-tab-matrix .matrix-master-head {
        height: 72px;
        padding: 5px 3px !important;
        vertical-align: middle;
    }

    body.desk-mode #admin-tab-matrix .matrix-master-head > .matrix-master-avatar {
        display: flex;
        width: 31px;
        height: 31px;
        margin: 0 auto 4px;
    }

    body.desk-mode #admin-tab-matrix .matrix-master-head > img.matrix-master-avatar {
        display: block;
    }

    body.desk-mode #admin-tab-matrix .matrix-master-head > .matrix-master-name {
        display: block;
        margin: 0;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
        overflow-wrap: anywhere;
        font-size: 11px;
        line-height: 1.15;
    }

    body.desk-mode #admin-tab-matrix .matrix-appt-vert {
        justify-content: flex-start;
        align-items: stretch;
        padding: 4px;
        text-align: left;
        overflow: visible;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* The desktop panel is a workspace, not a centred phone canvas.  Every
   section uses the free area to the right of its fixed calendar/menu rail. */
@media (min-width: 1180px) {
    body.desk-mode .admin-content,
    body.desk-mode #admin-tab-clients,
    body.desk-mode #admin-tab-services,
    body.desk-mode #admin-tab-resources,
    body.desk-mode #admin-tab-masters,
    body.desk-mode #admin-tab-marketing,
    body.desk-mode #admin-tab-reviews,
    body.desk-mode #admin-tab-analytics {
        width: 100%;
        max-width: none;
        margin-left: 0;
        margin-right: 0;
    }

    /* Active records are operational tiles: four fit across the desktop
       workspace without changing their click behaviour. */
    body.desk-mode #admin-appts-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        align-items: stretch;
    }

    body.desk-mode #admin-appts-list .appointment-list-card {
        height: 100%;
        margin: 0;
    }

    /* Notes stay inside the booked span.  A particularly detailed booking
       can scroll within its own time block instead of covering later slots. */
    body.desk-mode .matrix-table-vertical td[rowspan] .matrix-appt-vert {
        overflow: auto;
        scrollbar-width: thin;
    }

    /* The client registry mirrors the working desktop list: one concise,
       sortable-by-filter table that opens a card on row click. */
    body.desk-mode .client-registry-wrap {
        width: 100%;
        overflow-x: auto;
        border: 1px solid var(--border);
        border-radius: 16px;
        background: var(--bg-card);
        box-shadow: 0 8px 24px rgba(80, 63, 44, .05);
    }

    body.desk-mode .client-registry-table {
        width: 100%;
        min-width: 1080px;
        border-collapse: collapse;
        table-layout: auto;
        font-size: 12px;
    }

    body.desk-mode .client-registry-table th,
    body.desk-mode .client-registry-table td {
        padding: 13px 12px;
        border-bottom: 1px solid rgba(167, 143, 116, .18);
        color: var(--text-main);
        text-align: left;
        white-space: nowrap;
    }

    body.desk-mode .client-registry-table th {
        color: var(--text-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .01em;
    }

    body.desk-mode .client-registry-table tbody tr:last-child td { border-bottom: 0; }
    body.desk-mode .client-registry-row { cursor: pointer; outline: none; }
    body.desk-mode .client-registry-row:hover td,
    body.desk-mode .client-registry-row:focus td { background: rgba(194, 155, 122, .11); }
    body.desk-mode .client-registry-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

    body.desk-mode #modal-edit-client .client-card-modal {
        width: min(1120px, calc(100vw - 96px));
        max-width: 1120px;
    }
}

/* A compact client card intentionally exposes only the operational fields.
   Legacy profile fields stay in the database, but are not rendered here. */
.client-card-title { margin: 0 42px 18px 0; text-align: center; }
.client-card-layout { display: grid; grid-template-columns: 190px minmax(0, 1fr) 245px; gap: 18px; align-items: start; }
.client-card-summary,
.client-card-comment { min-width: 0; padding: 15px; border: 1px solid var(--border); border-radius: 16px; background: rgba(255,255,255,.52); }
.client-card-summary-title,
.client-card-comment label,
.client-card-fields > label { display: grid; gap: 6px; color: var(--text-muted); font-size: 12px; font-weight: 750; }
.client-card-metrics { margin: 8px 0 14px; color: var(--text-main); font-size: 15px; font-weight: 800; line-height: 1.25; }
.client-card-facts { display: grid; gap: 10px; margin: 0; }
.client-card-facts div { display: grid; gap: 2px; }
.client-card-facts dt { color: var(--text-muted); font-size: 10px; }
.client-card-facts dd { margin: 0; color: var(--text-main); font-size: 12px; font-weight: 700; }
.client-card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.client-card-fields .input-field,
.client-card-comment .input-field { width: 100%; margin: 0; box-sizing: border-box; }
.client-card-source { grid-column: 1 / -1; }
.client-card-fields .crm-online-booking-toggle { grid-column: 1 / -1; margin: 0; color: var(--text-main); }
.client-card-comment textarea { min-height: 178px; resize: vertical; }
.client-card-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }
.client-card-actions .btn { width: auto; min-width: 188px; margin: 0; }
.client-card-delete { background: var(--danger) !important; }

/* A rowspan cell represents the full booked interval.  Absolutely filling
   its box prevents a long booking from collapsing to the first 30 minutes. */
.matrix-table-vertical td[rowspan] { position: relative; padding: 3px; }
.matrix-table-vertical td[rowspan] .matrix-appt-vert,
.matrix-table-vertical td[rowspan] .matrix-lunch-vert {
    position: absolute;
    inset: 3px;
    height: auto;
    min-height: 0;
}

@media (max-width: 760px) {
    .client-card-layout { grid-template-columns: 1fr; gap: 12px; }
    .client-card-fields { grid-template-columns: 1fr; }
    .client-card-source,
    .client-card-fields .crm-online-booking-toggle { grid-column: auto; }
    .client-card-comment textarea { min-height: 112px; }
    .client-card-actions { display: grid; grid-template-columns: 1fr; }
    .client-card-actions .btn { width: 100%; }
}

/* Marketing uses two independent vertical columns on the desktop.  The
   broadcast card now sits directly under online-booking slides instead of
   waiting for the much taller "hot slot" selector in the other column. */
@media (min-width: 1180px) {
    body.desk-mode #admin-tab-marketing .marketing-workspace {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
        align-items: start;
    }

    body.desk-mode #admin-tab-marketing .marketing-column {
        display: grid;
        align-content: start;
        gap: 18px;
        min-width: 0;
    }

    body.desk-mode #admin-tab-marketing .marketing-panel .card {
        min-height: 0;
    }

    body.desk-mode #admin-tab-marketing .hot-slot-date-row {
        display: grid;
        grid-template-columns: minmax(160px, .78fr) minmax(210px, 1.22fr) auto;
        align-items: stretch;
        gap: 10px;
        margin: 0;
    }

    body.desk-mode #admin-tab-marketing .hot-date-picker,
    body.desk-mode #admin-tab-marketing .hot-time-select,
    body.desk-mode #admin-tab-marketing .hot-slot-send {
        width: 100%;
        min-width: 0;
        min-height: 48px;
        height: 48px;
        margin: 0;
    }

    body.desk-mode #admin-tab-marketing .hot-time-select {
        padding-top: 0;
        padding-bottom: 0;
    }

    body.desk-mode #admin-tab-marketing .hot-slot-send {
        width: auto;
        padding: 0 18px;
        white-space: nowrap;
        font-size: 12px;
    }
}

.custom-broadcast-card { display: grid; gap: 10px; }
.custom-broadcast-card .input-field { margin: 0; }
.custom-broadcast-card #broadcast-text { min-height: 112px; resize: vertical; }
.custom-broadcast-send { width: 100%; min-height: 46px; padding: 12px 16px; }

/* The notification action must reserve the close-button area instead of
   competing with it in a narrow Mini App sheet. */
.notifications-modal { position: relative; padding-top: 22px; }
.notifications-modal .notifications-modal-header { padding-right: 42px; gap: 12px; }
.notifications-modal .notifications-modal-header .btn-small { flex: 0 0 auto; white-space: nowrap; }

/* A personal account stores a full staff name, but presents its parts as two
   clear controls.  The photo keeps the third, balanced column on desktop. */
body.desk-mode .desk-profile-grid-account { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(190px, .92fr); }
body.desk-mode .desk-profile-grid-account .desk-account-photo-field { min-width: 0; }

/* The mobile staff card gets the same calm, sectioned hierarchy as the web
   personnel profile without making the Mini App form heavy. */
.staff-card-modal { width: min(610px, calc(100vw - 28px)); max-height: min(86vh, 760px); overflow: auto; padding: 22px; text-align: left; }
.staff-card-modal-heading { margin: 0 38px 16px 0; padding-bottom: 12px; border-bottom: 1px solid rgba(167,143,116,.22); }
.staff-card-modal-heading > span { display: block; margin-bottom: 4px; color: var(--accent); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.staff-card-modal-heading h3 { margin: 0 0 5px; font-size: 21px; }
.staff-card-modal-heading p { margin: 0; color: var(--text-muted); font-size: 12px; line-height: 1.4; }
.staff-card-modal .staff-name-fields,
.staff-card-modal #edit-m-spec-block,
.staff-card-modal .promotion-panel { margin-bottom: 12px; }
.staff-card-modal #edit-m-spec-block,
.staff-card-modal .promotion-panel { padding: 12px; border: 1px solid rgba(167,143,116,.18); border-radius: 15px; background: rgba(255,255,255,.36); }
.staff-card-modal .input-field, .staff-card-modal .select-field { margin-bottom: 10px; }
@media (max-width: 700px) {
    body.desk-mode .desk-profile-grid-account { grid-template-columns: 1fr; }
    .staff-card-modal { padding: 19px 15px; }
}

@media (max-width: 1179px) {
    /* Keep the same logical section order on a Mini App while the desktop
       version retains two independently flowing columns. */
    .marketing-workspace { display: flex; flex-direction: column; gap: 12px; }
    .marketing-column { display: contents; }
    .marketing-panel-hot { order: 1; }
    .marketing-panel-slides { order: 2; }
    .marketing-panel-loyalty { order: 3; }
    .marketing-panel-broadcast { order: 4; }

    body:not(.desk-mode) #admin-tab-marketing .hot-slot-date-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 7px;
    }

    body:not(.desk-mode) #admin-tab-marketing .hot-slot-send {
        grid-column: 1 / -1;
        min-height: 40px;
        margin: 0;
        padding: 8px 10px;
        font-size: 12px;
    }
}