/* ============================================================
   SMILE TALK CRM — Design System (macOS-стиль, «тихая роскошь»)
   Источники: design_system.txt, login_page_spec.txt, interface_requirements.txt
   ============================================================ */

@import url('vendor/inter/inter.css');

:root{
  /* --- Брендовые базовые цвета клиники --- */
  --clinic-bg: #efeeed;
  --clinic-text: #0f0f0f;
  --clinic-btn: #d4d1cf;
  --clinic-btn-hover: #8c847f;

  /* --- Акценты (из color.jpg) --- */
  --accent-grey: #838383;
  --accent-rose: #D9ADAD;
  --accent-rose-light: #FCDFDF;

  /* --- Статусы --- */
  --status-confirmed: #7D8F69;
  --status-pending: #C4A265;
  --status-cancelled: #A05252;
  --status-overdue: #B85C5C;
  --status-primary: #D9ADAD;
  --status-repeat: #B8C4D0;
  --status-notify: #C4A265;
  --status-ai: #A8B5C0;
  --status-urgent: #C96A6A;
  --status-new: #8FAE8B;

  /* --- Светлая тема (по умолчанию) --- */
  --bg: var(--clinic-bg);
  --bg-elevated: #f5f5f7;
  --card: #ffffff;
  --card-2: #fafafa;
  --text: #1d1d1f;
  --text-secondary: #6e6e73;
  --text-tertiary: #8e8e93;
  --border: #d2d2d7;
  --border-soft: #e8e8e8;
  --sidebar-bg: rgba(255,255,255,0.72);
  --topbar-bg: rgba(239,238,237,0.78);
  --input-bg: #ffffff;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.06);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.04);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.12);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.22);

  --radius-btn: 10px;
  --radius-card: 16px;
  --radius-modal: 20px;
  --radius-input: 10px;

  --spring: cubic-bezier(0.25, 0.1, 0.25, 1);
}

[data-theme="dark"]{
  --bg: #1e1e1e;
  --bg-elevated: #202022;
  --card: #2c2c2e;
  --card-2: #272729;
  --text: #f5f5f7;
  --text-secondary: #b5b5ba;
  --text-tertiary: #8e8e93;
  --border: #3a3a3c;
  --border-soft: #343436;
  --sidebar-bg: rgba(30,30,30,0.72);
  --topbar-bg: rgba(20,20,20,0.7);
  --input-bg: #2c2c2e;
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.25);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.35);
  --shadow-lg: 0 8px 30px rgba(0,0,0,0.4);
  --shadow-hover: 0 12px 40px rgba(0,0,0,0.5);
  --shadow-modal: 0 20px 60px rgba(0,0,0,0.6);
}

*{box-sizing:border-box;}
html,body{height:100%;}
body{
  margin:0;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);
  color:var(--text);
  transition:background .4s var(--spring), color .4s var(--spring);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;}
p{margin:0;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;}
::selection{background:var(--accent-rose-light);}

/* Скроллбар — тонкий macOS-стиль */
::-webkit-scrollbar{width:8px;height:8px;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:8px;}
::-webkit-scrollbar-thumb:hover{background:var(--accent-grey);}
::-webkit-scrollbar-track{background:transparent;}

/* ============== ОБЩИЕ КОМПОНЕНТЫ ============== */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:46px;padding:0 20px;
  background:var(--clinic-btn);
  color:var(--clinic-text);
  border:none;border-radius:var(--radius-btn);
  font-size:14px;font-weight:600;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
  transition:transform .18s var(--spring), box-shadow .18s var(--spring), background .18s var(--spring);
}
[data-theme="dark"] .btn{ color:#f5f5f7; background:#3a3a3c; }
.btn:hover{ background:var(--clinic-btn-hover); color:#fff; transform:translateY(-2px); box-shadow:0 8px 20px rgba(0,0,0,0.16);}
.btn:active{ transform:scale(.98) translateY(0); }
.btn.btn-sm{height:36px;padding:0 14px;font-size:13px;border-radius:8px;}
.btn.btn-primary{ background:var(--text); color:var(--bg); }
[data-theme="dark"] .btn.btn-primary{ background:var(--accent-rose); color:#241414;}
.btn.btn-primary:hover{ background:var(--accent-grey); color:#fff;}
.btn.btn-ghost{ background:transparent; box-shadow:none; border:1px solid var(--border);}
.btn.btn-ghost:hover{ background:var(--card-2); color:var(--text); transform:none; box-shadow:none;}
.btn.btn-rose{ background:var(--accent-rose); color:#3a2323;}
.btn.btn-rose:hover{ background:#c99a9a; color:#fff;}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;}
.icon-btn{
  width:38px;height:38px;border-radius:10px;border:none;background:transparent;
  display:inline-flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--text-secondary); font-size:18px; transition:all .18s var(--spring);
}
.icon-btn:hover{ background:var(--card-2); color:var(--text); transform:translateY(-1px);}

.card{
  background:var(--card);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);
  transition:box-shadow .25s var(--spring), transform .25s var(--spring), background .3s var(--spring);
}
.card.hoverable:hover{ box-shadow:var(--shadow-hover); transform:translateY(-2px); }

.badge{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 10px;border-radius:100px;font-size:12px;font-weight:600;
  white-space:nowrap;
}
.badge.confirmed{ background:color-mix(in srgb, var(--status-confirmed) 18%, transparent); color:var(--status-confirmed);}
.badge.pending{ background:color-mix(in srgb, var(--status-pending) 20%, transparent); color:#8a6a2e;}
[data-theme="dark"] .badge.pending{ color:var(--status-pending);}
.badge.cancelled{ background:color-mix(in srgb, var(--status-cancelled) 18%, transparent); color:var(--status-cancelled);}
.badge.overdue{ background:color-mix(in srgb, var(--status-overdue) 20%, transparent); color:var(--status-overdue);}
.badge.primary{ background:var(--accent-rose-light); color:#7a4c4c;}
.badge.repeat{ background:color-mix(in srgb, var(--status-repeat) 35%, transparent); color:#3d5266;}
.badge.urgent{ background:color-mix(in srgb, var(--status-urgent) 20%, transparent); color:var(--status-urgent); }
.badge.ai{ background:color-mix(in srgb, var(--status-ai) 30%, transparent); color:#3a4a56;}
.badge.new{ background:color-mix(in srgb, var(--status-new) 25%, transparent); color:#3f5c3c;}
.badge.neutral{ background:var(--card-2); color:var(--text-secondary); border:1px solid var(--border-soft);}

.field{ display:flex; flex-direction:column; gap:6px; }
.field label{ font-size:12px; font-weight:600; color:var(--text-secondary); }
.field .input-wrap{ position:relative; display:flex; align-items:center; }
.field input, .field select, .field textarea{
  width:100%; height:44px; border-radius:var(--radius-input);
  border:1px solid var(--border); background:var(--input-bg); color:var(--text);
  padding:0 14px; font-size:14px; font-family:inherit;
  transition:border-color .18s var(--spring), box-shadow .18s var(--spring);
}
.field textarea{ height:auto; padding:12px 14px; resize:vertical; }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--accent-rose); box-shadow:0 0 0 4px color-mix(in srgb, var(--accent-rose) 25%, transparent);
}
.field input::placeholder{ color:var(--text-tertiary); }
.field.icon-left input{ padding-left:40px; }
.field .field-icon{ position:absolute; left:13px; color:var(--text-tertiary); font-size:16px; pointer-events:none;}
.field .field-toggle{ position:absolute; right:10px; background:none; border:none; color:var(--text-tertiary); cursor:pointer; font-size:16px; padding:6px;}
.field .field-error{ font-size:12px; color:var(--status-overdue); display:flex; align-items:center; gap:4px; min-height:16px;}

.tabs{ display:inline-flex; gap:4px; padding:4px; background:var(--card-2); border-radius:12px; border:1px solid var(--border-soft); }
.tabs button{
  border:none; background:transparent; padding:9px 16px; border-radius:9px; font-size:13.5px; font-weight:600;
  color:var(--text-secondary); cursor:pointer; transition:all .22s var(--spring); white-space:nowrap;
}
.tabs button.active{ background:var(--card); color:var(--text); box-shadow:var(--shadow-sm); }
[data-theme="dark"] .tabs button.active{ background:#3a3a3c; }
.tabs button:hover:not(.active){ color:var(--text); }

.table{ width:100%; border-collapse:collapse; font-size:13.5px; }
.table thead th{
  text-align:left; padding:12px 14px; background:var(--card-2); color:var(--text-secondary);
  font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  border-bottom:1px solid var(--border-soft); position:sticky; top:0;
}
.table thead th:first-child{border-top-left-radius:10px;}
.table thead th:last-child{border-top-right-radius:10px;}
.table tbody td{ padding:13px 14px; border-bottom:1px solid var(--border-soft); vertical-align:middle;}
.table tbody tr{ transition:background .15s var(--spring); cursor:pointer;}
.table tbody tr:hover{ background:var(--card-2); }
.table tbody tr:last-child td{border-bottom:none;}

.avatar{
  border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
  font-weight:700; color:#fff; flex-shrink:0; user-select:none;
  background:linear-gradient(135deg,var(--accent-rose),var(--accent-grey));
}

.modal-overlay{
  position:fixed; inset:0; background:rgba(20,18,17,0.42); backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center; z-index:900;
  opacity:0; pointer-events:none; transition:opacity .3s var(--spring);
}
.modal-overlay.open{ opacity:1; pointer-events:all; }
.modal{
  background:var(--card); border-radius:var(--radius-modal); box-shadow:var(--shadow-modal);
  width:480px; max-width:92vw; max-height:88vh; overflow:auto; padding:28px;
  transform:scale(.92); opacity:0; transition:all .3s var(--spring);
  border:1px solid var(--border-soft);
}
.modal-overlay.open .modal{ transform:scale(1); opacity:1; }
.modal-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:18px;}
.modal-header h3{ font-size:19px; }

.toast-stack{ position:fixed; top:20px; right:20px; z-index:1200; display:flex; flex-direction:column; gap:10px;}
.toast{
  background:var(--card); border:1px solid var(--border-soft); box-shadow:var(--shadow-lg);
  border-radius:14px; padding:14px 18px; display:flex; gap:10px; align-items:center;
  min-width:280px; animation:toastIn .45s var(--spring);
  font-size:13.5px;
}
@keyframes toastIn{ from{ transform:translateX(40px); opacity:0;} to{ transform:translateX(0); opacity:1;} }

@keyframes fadeIn{ from{opacity:0;} to{opacity:1;} }
@keyframes scaleIn{ from{opacity:0; transform:scale(.94);} to{opacity:1; transform:scale(1);} }
@keyframes slideInLeft{ from{opacity:0; transform:translateX(-16px);} to{opacity:1; transform:translateX(0);} }
@keyframes shake{
  10%,90%{transform:translateX(-2px);} 20%,80%{transform:translateX(4px);}
  30%,50%,70%{transform:translateX(-8px);} 40%,60%{transform:translateX(8px);}
}
.shake{ animation:shake .45s var(--spring); }
.fade-in{ animation:fadeIn .4s var(--spring); }
.scale-in{ animation:scaleIn .35s var(--spring); }

.empty-state{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  padding:60px 20px; color:var(--text-secondary); text-align:center;
}
.empty-state i{ font-size:38px; color:var(--text-tertiary); }

.scrollfade{ position:relative; }

/* ============== APP SHELL (сайдбар + топбар) ============== */
.app-shell{ display:flex; height:100vh; overflow:hidden; }

.sidebar{
  width:248px; flex-shrink:0; height:100%;
  background:var(--sidebar-bg); backdrop-filter:blur(24px); -webkit-backdrop-filter:blur(24px);
  border-right:1px solid var(--border-soft);
  display:flex; flex-direction:column; padding:18px 14px;
  transition:background .3s var(--spring);
}
.sidebar-logo{
  display:flex; align-items:center; gap:10px; padding:6px 8px 18px 8px;
}
.sidebar-logo .logo-chip{
  width:40px;height:40px;border-radius:11px;background:#0f0f0f;
  display:flex;align-items:center;justify-content:center; box-shadow:var(--shadow-sm); flex-shrink:0;
}
.sidebar-logo .logo-chip img{ width:26px; }
.sidebar-logo .logo-text{ font-size:14.5px; font-weight:700; letter-spacing:.02em; line-height:1.15;}
.sidebar-logo .logo-text span{ display:block; font-size:10px; font-weight:500; color:var(--text-secondary); letter-spacing:.08em;}

.user-card{
  display:flex; align-items:center; gap:10px; padding:10px; border-radius:14px;
  background:var(--card); border:1px solid var(--border-soft); cursor:pointer;
  box-shadow:var(--shadow-sm); transition:all .2s var(--spring); margin-bottom:14px;
}
.user-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-1px);}
.user-card .avatar{ width:42px; height:42px; font-size:15px; }
.user-card .u-name{ font-size:13.5px; font-weight:700; }
.user-card .u-role{ font-size:11px; color:var(--text-secondary); }

.nav{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:2px; margin-top:2px;}
.nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; border-radius:10px;
  font-size:13.5px; font-weight:500; color:var(--text-secondary); cursor:pointer;
  transition:all .18s var(--spring); position:relative;
}
.nav a i{ font-size:18px; width:20px; text-align:center; }
.nav a:hover{ background:var(--card); color:var(--text); }
.nav a.active{ background:var(--text); color:var(--bg); font-weight:600; box-shadow:var(--shadow-sm);}
[data-theme="dark"] .nav a.active{ background:var(--accent-rose); color:#241414; }
.nav a.locked{ opacity:.38; cursor:not-allowed; }
.nav a.locked:hover{ background:transparent; color:var(--text-secondary); }
.nav a.locked i.ph-lock-simple{ margin-left:auto; font-size:13px; }
.nav-section-title{ font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-tertiary); padding:14px 12px 6px; font-weight:700;}

.sidebar-footer{ display:flex; flex-direction:column; gap:6px; padding-top:10px; border-top:1px solid var(--border-soft); margin-top:8px;}

.main{ flex:1; display:flex; flex-direction:column; min-width:0; height:100%; }
.topbar{
  height:64px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between;
  padding:0 26px; background:var(--topbar-bg); backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border-soft); gap:16px;
}
.topbar .page-title{ font-size:19px; font-weight:700; letter-spacing:-.01em;}
.topbar .page-sub{ font-size:12.5px; color:var(--text-secondary); margin-top:1px;}
.topbar-right{ display:flex; align-items:center; gap:10px; }
.content{ flex:1; overflow-y:auto; padding:24px 26px 90px; }

.theme-toggle{
  width:38px;height:38px;border-radius:10px;border:1px solid var(--border-soft); background:var(--card);
  display:flex;align-items:center;justify-content:center; cursor:pointer; font-size:16px;
  transition:all .3s var(--spring); box-shadow:var(--shadow-sm);
}
.theme-toggle:hover{ transform:rotate(20deg) scale(1.05); }

.role-switcher{
  display:flex; align-items:center; gap:8px; background:var(--card); border:1px dashed var(--accent-grey);
  border-radius:10px; padding:6px 10px; font-size:12px; color:var(--text-secondary);
}
.role-switcher select{
  border:none; background:transparent; font-size:12.5px; font-weight:600; color:var(--text); cursor:pointer;
}
.role-switcher select:focus{ outline:none; }

/* Плавающий AI-ассистент */
.ai-fab{
  position:fixed; right:26px; bottom:26px; width:64px; height:64px; border-radius:50%;
  background:linear-gradient(145deg,#fff,#f0eeee); border:1px solid var(--border-soft);
  box-shadow:var(--shadow-hover); display:flex; align-items:center; justify-content:center;
  cursor:pointer; z-index:500; overflow:hidden; transition:transform .3s var(--spring);
  animation:aiFloat 3.4s ease-in-out infinite;
}
[data-theme="dark"] .ai-fab{ background:linear-gradient(145deg,#3a3a3c,#2c2c2e); }
.ai-fab:hover{ transform:scale(1.08); }
.ai-fab img{ width:78%; height:78%; object-fit:contain; }
@keyframes aiFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-6px);} }
.ai-fab .ping{
  position:absolute; top:2px; right:2px; width:14px; height:14px; border-radius:50%;
  background:var(--status-confirmed); border:2px solid var(--card);
}

.ai-panel{
  position:fixed; right:26px; bottom:104px; width:340px; max-height:460px;
  background:var(--card); border:1px solid var(--border-soft); border-radius:20px;
  box-shadow:var(--shadow-modal); display:flex; flex-direction:column; z-index:500;
  transform:scale(.9) translateY(10px); opacity:0; pointer-events:none;
  transition:all .3s var(--spring); overflow:hidden;
}
.ai-panel.open{ transform:scale(1) translateY(0); opacity:1; pointer-events:all; }
.ai-panel-head{ display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border-soft); background:var(--card-2);}
.ai-panel-head img{ width:32px; height:32px; border-radius:50%; object-fit:cover; }
.ai-panel-body{ flex:1; overflow-y:auto; padding:14px 16px; display:flex; flex-direction:column; gap:10px; font-size:13px;}
.ai-msg{ max-width:85%; padding:10px 13px; border-radius:14px; line-height:1.45; }
.ai-msg.bot{ background:var(--card-2); align-self:flex-start; border-bottom-left-radius:4px;}
.ai-msg.me{ background:var(--accent-rose-light); color:#4a2f2f; align-self:flex-end; border-bottom-right-radius:4px;}
.ai-panel-suggestions{ display:flex; flex-wrap:wrap; gap:6px; padding:0 16px 12px;}
.ai-chip{ font-size:11.5px; padding:6px 10px; border-radius:100px; border:1px solid var(--border-soft); cursor:pointer; color:var(--text-secondary); transition:all .18s var(--spring);}
.ai-chip:hover{ background:var(--card-2); color:var(--text); }
.ai-panel-input{ display:flex; gap:8px; padding:12px; border-top:1px solid var(--border-soft);}
.ai-panel-input input{ flex:1; border:1px solid var(--border); background:var(--input-bg); border-radius:10px; padding:0 12px; height:38px; font-size:13px; color:var(--text);}
.ai-panel-input input:focus{ outline:none; border-color:var(--accent-rose);}
.ai-panel-input button{ width:38px;height:38px;border-radius:10px;border:none;background:var(--text); color:var(--bg); cursor:pointer; display:flex;align-items:center;justify-content:center;}
[data-theme="dark"] .ai-panel-input button{ background:var(--accent-rose); color:#241414;}

/* Заглушка «в разработке» для страниц второго пакета */
.stub-page{ display:flex; flex-direction:column; align-items:center; justify-content:center; height:70vh; gap:14px; text-align:center;}
.stub-page .stub-icon{ width:88px;height:88px;border-radius:24px; background:var(--card); border:1px solid var(--border-soft); display:flex;align-items:center;justify-content:center; font-size:38px; color:var(--accent-grey); box-shadow:var(--shadow-lg);}
.stub-page h2{ font-size:20px; }
.stub-page p{ color:var(--text-secondary); font-size:13.5px; max-width:380px;}

.grid{ display:grid; gap:18px; }
.grid.cols-2{ grid-template-columns:repeat(2,1fr); }
.grid.cols-3{ grid-template-columns:repeat(3,1fr); }
.grid.cols-4{ grid-template-columns:repeat(4,1fr); }
@media (max-width:1200px){ .grid.cols-4{grid-template-columns:repeat(2,1fr);} .grid.cols-3{grid-template-columns:repeat(2,1fr);} }

.kpi-card{ padding:18px 20px; display:flex; flex-direction:column; gap:8px; }
.kpi-card .kpi-top{ display:flex; align-items:center; justify-content:space-between; }
.kpi-card .kpi-label{ font-size:12.5px; color:var(--text-secondary); font-weight:600;}
.kpi-card .kpi-icon{ width:34px;height:34px;border-radius:9px; display:flex;align-items:center;justify-content:center; font-size:16px;}
.kpi-card .kpi-value{ font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; }
.kpi-card .kpi-delta{ font-size:12px; font-weight:600; display:flex; align-items:center; gap:4px;}
.kpi-card .kpi-delta.up{ color:var(--status-confirmed);}
.kpi-card .kpi-delta.down{ color:var(--status-overdue);}
.progress-bar{ height:8px; border-radius:100px; background:var(--card-2); overflow:hidden; border:1px solid var(--border-soft);}
.progress-bar > div{ height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent-rose),var(--accent-grey)); transition:width 1s var(--spring);}

.section-title{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-title h3{ font-size:15.5px; }
.section-title .muted{ font-size:12px; color:var(--text-secondary); }

.lock-note{
  display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-tertiary);
  background:var(--card-2); border:1px dashed var(--border); padding:8px 12px; border-radius:10px; margin-top:8px;
}

/* ============== v3: ТЕМЫ, СТЕКЛО, XP, SPOTLIGHT ============== */

/* Стеклянный режим — усиленная прозрачность и blur */
html.glass-mode .sidebar{ background:color-mix(in srgb, var(--sidebar-bg) 55%, transparent) !important; backdrop-filter:blur(32px) saturate(1.4); -webkit-backdrop-filter:blur(32px) saturate(1.4); }
html.glass-mode .topbar{ background:color-mix(in srgb, var(--topbar-bg) 45%, transparent) !important; backdrop-filter:blur(28px) saturate(1.3); }
html.glass-mode .card{ background:color-mix(in srgb, var(--card) 72%, transparent) !important; backdrop-filter:blur(18px); border:1px solid color-mix(in srgb, var(--border-soft) 60%, transparent); }
html.glass-mode .modal{ background:color-mix(in srgb, var(--card) 80%, transparent) !important; backdrop-filter:blur(30px); }
html.glass-mode .ai-panel{ background:color-mix(in srgb, var(--card) 75%, transparent) !important; backdrop-filter:blur(24px); }

/* Панель выбора темы */
.theme-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:20px;}
.theme-swatch-card{ border:2px solid var(--border-soft); border-radius:14px; padding:10px; cursor:pointer; transition:all .2s var(--spring); background:var(--card-2);}
.theme-swatch-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.theme-swatch-card.active{ border-color:var(--accent-rose); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent-rose) 30%, transparent); }
.swatch-preview{ display:flex; height:36px; border-radius:8px; overflow:hidden; margin-bottom:8px; border:1px solid var(--border-soft);}
.swatch-preview span{ flex:1; }
.swatch-label{ font-size:11.5px; font-weight:600; display:flex; align-items:center; gap:6px; color:var(--text);}
.glass-toggle-row{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--card-2); border-radius:14px; border:1px solid var(--border-soft);}
.switch{ position:relative; display:inline-block; width:44px; height:26px; flex-shrink:0;}
.switch input{ opacity:0; width:0; height:0; }
.switch-track{ position:absolute; inset:0; background:var(--border); border-radius:100px; cursor:pointer; transition:.25s var(--spring);}
.switch-thumb{ position:absolute; left:3px; top:3px; width:20px; height:20px; background:#fff; border-radius:50%; transition:.25s var(--spring); box-shadow:var(--shadow-sm); display:block;}
.switch input:checked + .switch-track{ background:var(--accent-rose); }
.switch input:checked + .switch-track .switch-thumb{ transform:translateX(18px); }

/* XP-полоса в карточке пользователя */
.xp-row{ display:flex; align-items:center; gap:6px; margin-top:4px; }
.xp-bar-bg{ flex:1; height:5px; border-radius:100px; background:var(--border-soft); overflow:hidden;}
.xp-bar{ height:100%; border-radius:100px; background:linear-gradient(90deg,var(--accent-rose),var(--accent-grey)); transition:width .8s var(--spring);}
.xp-level-chip{ font-size:9.5px; font-weight:800; color:#fff; background:linear-gradient(135deg,var(--accent-rose),var(--accent-grey)); padding:1px 6px; border-radius:100px; flex-shrink:0;}

/* Spotlight / командная строка */
.spotlight-overlay{ position:fixed; inset:0; background:rgba(20,18,17,0.35); backdrop-filter:blur(4px); z-index:1500; display:flex; align-items:flex-start; justify-content:center; padding-top:12vh; opacity:0; pointer-events:none; transition:opacity .2s var(--spring);}
.spotlight-overlay.open{ opacity:1; pointer-events:all; }
.spotlight-box{ width:560px; max-width:90vw; background:var(--card); border-radius:18px; box-shadow:var(--shadow-modal); border:1px solid var(--border-soft); overflow:hidden; transform:scale(.95) translateY(-10px); transition:all .25s var(--spring);}
.spotlight-overlay.open .spotlight-box{ transform:scale(1) translateY(0); }
.spotlight-input-row{ display:flex; align-items:center; gap:12px; padding:16px 18px; border-bottom:1px solid var(--border-soft);}
.spotlight-input-row i{ font-size:20px; color:var(--text-tertiary);}
.spotlight-input-row input{ flex:1; border:none; background:transparent; font-size:16px; color:var(--text); outline:none;}
.spotlight-input-row kbd{ font-size:11px; background:var(--card-2); border:1px solid var(--border-soft); border-radius:6px; padding:2px 6px; color:var(--text-secondary);}
.spotlight-results{ max-height:320px; overflow-y:auto; padding:8px;}
.spotlight-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:10px; cursor:pointer; transition:background .15s var(--spring);}
.spotlight-item:hover, .spotlight-item.sel{ background:var(--card-2); }
.spotlight-item i{ font-size:17px; color:var(--accent-grey); width:20px; text-align:center;}
.spotlight-item .si-title{ font-size:13.5px; font-weight:600; }
.spotlight-item .si-sub{ font-size:11px; color:var(--text-secondary); }
.spotlight-item kbd{ margin-left:auto; font-size:10.5px; background:var(--card-2); border:1px solid var(--border-soft); border-radius:5px; padding:1px 5px; color:var(--text-tertiary);}

/* Файловая система рабочего стола */
.fs-toolbar{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px;}
.fs-tabs{ display:flex; gap:4px; }
.fs-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(96px,1fr)); gap:16px; padding:6px;}
.fs-item{ display:flex; flex-direction:column; align-items:center; gap:8px; cursor:pointer; padding:10px 6px; border-radius:12px; transition:all .18s var(--spring); text-align:center;}
.fs-item:hover{ background:var(--card-2); }
.fs-item .fs-icon{ width:52px;height:52px;border-radius:14px; display:flex;align-items:center;justify-content:center; font-size:26px; box-shadow:var(--shadow-sm);}
.fs-item .fs-name{ font-size:11.5px; font-weight:600; word-break:break-word; line-height:1.3;}
.fs-item .fs-meta{ font-size:10px; color:var(--text-tertiary);}

/* Стикер-заметка на рабочем столе (переиспользует .sticky из corkboard) */
.widget-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:24px;}
@media (max-width:1300px){ .widget-grid{ grid-template-columns:repeat(2,1fr); } }
.widget-card{ background:var(--card); border:1px solid var(--border-soft); border-radius:16px; padding:16px; box-shadow:var(--shadow-lg); transition:all .2s var(--spring); position:relative;}
.widget-card:hover{ box-shadow:var(--shadow-hover); }
.widget-card .widget-head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; font-size:12px; font-weight:700; color:var(--text-secondary);}
.widget-card .widget-head i{ color:var(--accent-grey); }
.widget-card .widget-remove{ position:absolute; top:10px; right:10px; opacity:0; transition:opacity .18s var(--spring);}
.widget-card:hover .widget-remove{ opacity:1; }
.widget-card.span-2{ grid-column:span 2; }
.add-widget-card{ border:1px dashed var(--border); border-radius:16px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:24px; cursor:pointer; color:var(--text-secondary); transition:all .2s var(--spring); min-height:120px;}
.add-widget-card:hover{ background:var(--card-2); color:var(--text); }

/* Чат сотрудников */
.staffchat-layout{ display:grid; grid-template-columns:220px 1fr; gap:18px; height:calc(100vh - 180px);}
.channel-list{ display:flex; flex-direction:column; gap:2px; }
.channel-item{ display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:10px; font-size:13px; font-weight:600; color:var(--text-secondary); cursor:pointer; transition:all .18s var(--spring);}
.channel-item:hover{ background:var(--card); color:var(--text); }
.channel-item.active{ background:var(--text); color:var(--bg); }
.staffchat-messages{ flex:1; overflow-y:auto; display:flex; flex-direction:column; gap:14px; padding:6px 4px;}
.staff-msg{ display:flex; gap:10px; }
.staff-msg .sm-body{ flex:1; }
.staff-msg .sm-name{ font-size:12.5px; font-weight:700; }
.staff-msg .sm-time{ font-size:10.5px; color:var(--text-tertiary); font-weight:400; margin-left:6px;}
.staff-msg .sm-text{ font-size:13.5px; margin-top:2px; line-height:1.5;}
.staff-msg .sm-text .mention{ background:var(--accent-rose-light); color:#7a4c4c; padding:1px 5px; border-radius:5px; font-weight:600;}
.sm-reactions{ display:flex; gap:6px; margin-top:6px; }
.sm-reaction{ font-size:11.5px; background:var(--card-2); border:1px solid var(--border-soft); border-radius:100px; padding:2px 8px; cursor:pointer; transition:all .15s var(--spring);}
.sm-reaction:hover{ background:var(--accent-rose-light); }
.staffchat-input{ display:flex; gap:10px; padding-top:12px; border-top:1px solid var(--border-soft);}
.staffchat-input input{ flex:1; height:44px; border-radius:12px; border:1px solid var(--border); background:var(--input-bg); color:var(--text); padding:0 14px; font-size:13.5px;}

/* ============== v4: НОВЫЕ ИНТЕРАКТИВНЫЕ МОДУЛИ ============== */

.demo-flag{ display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--status-pending); background:color-mix(in srgb, var(--status-pending) 16%, transparent); padding:2px 8px; border-radius:100px; border:1px solid color-mix(in srgb, var(--status-pending) 40%, transparent);}

/* уровень остатка / полоса-индикатор */
.stock-bar-bg{ width:70px; height:6px; border-radius:100px; background:var(--card-2); overflow:hidden; display:inline-block; vertical-align:middle;}
.stock-bar{ height:100%; border-radius:100px; }

/* NPS/CSAT gauge (полукруг) */
.gauge-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; }
.gauge-value{ font-size:30px; font-weight:800; margin-top:-46px; }
.gauge-label{ font-size:11.5px; color:var(--text-secondary); }

/* мини-игры */
.games-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:16px;}
.game-tile{ background:var(--card); border:1px solid var(--border-soft); border-radius:16px; padding:18px 14px; text-align:center; cursor:pointer; box-shadow:var(--shadow-lg); transition:all .2s var(--spring);}
.game-tile:hover{ transform:translateY(-3px); box-shadow:var(--shadow-hover);}
.game-tile i{ font-size:34px; color:var(--accent-grey); margin-bottom:10px; display:block;}
.game-tile .g-title{ font-size:13px; font-weight:700; }
.game-tile .g-best{ font-size:11px; color:var(--text-secondary); margin-top:4px;}
.game-tile.locked{ opacity:.5; cursor:not-allowed; }

/* касса — POS grid */
.pos-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:18px; }
.pos-keypad{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:10px;}
.pos-keypad button{ height:52px; border-radius:12px; border:1px solid var(--border-soft); background:var(--card-2); font-size:18px; font-weight:700; cursor:pointer; transition:all .15s var(--spring); color:var(--text);}
.pos-keypad button:hover{ background:var(--card); box-shadow:var(--shadow-sm);}
.pay-method-btn{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:14px 10px; border-radius:12px; border:1px solid var(--border-soft); cursor:pointer; transition:all .18s var(--spring); font-size:11.5px; font-weight:600;}
.pay-method-btn.active{ background:var(--text); color:var(--bg); border-color:var(--text);}
[data-theme="dark"] .pay-method-btn.active{ background:var(--accent-rose); color:#241414;}
.pay-method-btn i{ font-size:22px; }

/* карточка сотрудника (staff management) */
.staff-card{ display:flex; gap:14px; padding:16px; }
.staff-card .staff-kpi{ display:flex; flex-direction:column; gap:4px; flex:1;}
.staff-card .staff-kpi-row{ display:flex; justify-content:space-between; font-size:11.5px; }
.staff-card .staff-kpi-bar-bg{ height:6px; border-radius:100px; background:var(--card-2); overflow:hidden;}
.staff-card .staff-kpi-bar{ height:100%; border-radius:100px; }

/* риски оттока */
.risk-row{ display:flex; align-items:center; gap:12px; padding:12px; border-radius:12px; border:1px solid var(--border-soft); margin-bottom:8px;}
.risk-dot{ width:10px;height:10px;border-radius:50%; flex-shrink:0;}

/* отчёты — категории */
.report-cat{ margin-bottom:22px; }
.report-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:10px; border:1px solid var(--border-soft); margin-bottom:6px; cursor:pointer; transition:all .18s var(--spring); font-size:13px;}
.report-item:hover{ background:var(--card-2); }
.report-item i{ color:var(--accent-grey); }
.report-item .rep-access{ margin-left:auto; font-size:10.5px; color:var(--text-tertiary); }

/* Flip-карточки анализа конкурентов / ЦА */
.flip-card{ perspective:1200px; height:280px; }
.flip-card-inner{ position:relative; width:100%; height:100%; transition:transform .6s var(--spring); transform-style:preserve-3d; cursor:pointer;}
.flip-card.flipped .flip-card-inner{ transform:rotateY(180deg); }
.flip-front, .flip-back{ position:absolute; inset:0; backface-visibility:hidden; border-radius:16px; overflow:hidden; box-shadow:var(--shadow-lg); border:1px solid var(--border-soft);}
.flip-front{ background:var(--card); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:20px;}
.flip-front img{ width:96px;height:96px;border-radius:50%; object-fit:cover; box-shadow:var(--shadow-md);}
.flip-back{ background:var(--card-2); transform:rotateY(180deg); padding:18px; display:flex; flex-direction:column; gap:8px; overflow-y:auto;}
.flip-back h4{ font-size:13.5px; }
.flip-back p{ font-size:12px; color:var(--text-secondary); line-height:1.5;}