:root {
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', 'Fira Code', monospace;
  --sb-bg-1: #2A190D;
  --sb-bg-2: #1F1209;
  --gold: #D6A437;
  --gold-d: #E5B84C;
  --gold-g: rgba(214, 164, 55, .18);
  --sb-text: #D4B88F;
  --sb-muted: #A88B6B;
  --sb-bright: #FFF3DC;
  --sb-border: #4B3019;
  
  --content-bg: #F8EAD8;
  --c-blue: #D6A437;
  --c-blue-d: #E5B84C;
  --c-blue-g: rgba(214, 164, 55, .18);
  --c-admin: #D6A437;
  --c-admin-d: #E5B84C;
  --c-admin-g: rgba(214, 164, 55, .18);
  
  --c-ink: #FFF8ED;
  --c-ink2: #FFFFFF;
  --c-ink3: #F8EAD8;
  --c-text: #23180D;
  --c-bright: #23180D;
  --c-muted: #5C4331;
  --c-border: #E0CDA8;
  --gold-contrast: #23180D;
  --btn-text-color: #23180D;
  
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --sb-w: 240px;
  --sb-w-collapsed: 68px;
  --topbar-h: 56px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font);font-size:14px;color:var(--c-text);background:var(--content-bg);
  display:flex;overflow:hidden;
}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#D5D9E0;border-radius:8px}
::-webkit-scrollbar-track{background:transparent}

/* ══════════════════ SIDEBAR ══════════════════ */
/* .sidebar-slot резервирует место в раскладке (не меняется на hover — поэтому остальные
   вкладки не «ужимаются»). Сам .sidebar расположен внутри абсолютно и может визуально
   выезжать шире слота, наплывая на рабочую область с тенью. */
.sidebar-slot{
  width:var(--sb-w-collapsed);flex-shrink:0;height:100vh;position:relative;z-index:10;
  transition:width calc(.18s * var(--anim-mult,1)) cubic-bezier(.4,0,.2,1);
}
.sidebar-slot.pinned{width:var(--sb-w)}

.sidebar{
  width:var(--sb-w-collapsed);height:100vh;position:absolute;top:0;left:0;
  background:linear-gradient(180deg,var(--sb-bg-1),var(--sb-bg-2));
  border-right:1px solid rgba(0,0,0,.3);display:flex;flex-direction:column;
  transition:width calc(.18s * var(--anim-mult,1)) cubic-bezier(.4,0,.2,1), box-shadow calc(.18s * var(--anim-mult,1));
  z-index:25;overflow:hidden;
}
.sidebar-slot.pinned .sidebar{width:var(--sb-w)}
.sidebar-slot:not(.pinned):hover .sidebar{width:var(--sb-w);box-shadow:12px 0 32px rgba(0,0,0,.28)}

.sb-brand{
  height:var(--hdr-h);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:6px 12px;gap:2px;background:rgba(0,0,0,.16);
  border-bottom:1px solid var(--sb-border);flex-shrink:0;white-space:nowrap;overflow:hidden;position:relative;
}

/* Свёрнутая панель: монограмма «К» с уголками из логотипа */
.sb-brand-mark{
  height:34px;width:auto;object-fit:contain;flex-shrink:0;position:absolute;left:12px;top:50%;
  transform:translateY(-50%);transition:opacity calc(.12s * var(--anim-mult,1));filter:brightness(1.25) saturate(1.15);
}
.sidebar-slot.pinned .sb-brand-mark,
.sidebar-slot:not(.pinned):hover .sb-brand-mark{opacity:0;pointer-events:none}

/* Развёрнутая панель: полный бренд-логотип + подпись, максимально крупно в пределах поля */
.sb-brand-logo{
  height:40px;width:auto;max-width:100%;object-fit:contain;object-position:left center;
  opacity:0;transition:opacity calc(.1s * var(--anim-mult,1));flex-shrink:1;filter:brightness(1.25) saturate(1.15);
}
.sb-brand-caption{
  font-size:9.5px;font-weight:400;color:var(--sb-muted);letter-spacing:.6px;text-transform:uppercase;
  opacity:0;transition:opacity calc(.1s * var(--anim-mult,1));
}
.sidebar-slot.pinned .sb-brand-logo,
.sidebar-slot:not(.pinned):hover .sb-brand-logo,
.sidebar-slot.pinned .sb-brand-caption,
.sidebar-slot:not(.pinned):hover .sb-brand-caption{opacity:1;transition:opacity calc(.18s * var(--anim-mult,1)) calc(.08s * var(--anim-mult,1))}
.sidebar.light-sidebar .sb-brand-logo,
.sidebar.light-sidebar .sb-brand-mark{filter:brightness(0) opacity(.72)}

.sb-scroll{flex:1;overflow-y:auto;overflow-x:hidden;padding:8px 8px;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none}
.sb-scroll::-webkit-scrollbar{width:0;height:0;display:none}
.sb-section-label{
  font-size:9.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  color:var(--sb-muted);padding:13px 9px 5px;white-space:nowrap;opacity:0;height:6px;overflow:hidden;transition:opacity calc(.1s * var(--anim-mult,1));
}
.sb-section-label:first-child{padding-top:2px}
.sidebar-slot.pinned .sb-section-label,
.sidebar-slot:not(.pinned):hover .sb-section-label{opacity:1;height:auto;overflow:visible;transition:opacity calc(.18s * var(--anim-mult,1)) calc(.06s * var(--anim-mult,1))}

.sb-group-header{cursor:pointer}
.sb-group-chevron{margin-left:auto;font-size:9px;color:var(--sb-muted);flex-shrink:0;opacity:0;transition:opacity calc(.1s * var(--anim-mult,1))}
.sidebar-slot:not(.pinned):not(:hover) .sb-group-chevron{display:none}
.sidebar-slot.pinned .sb-group-chevron,
.sidebar-slot:not(.pinned):hover .sb-group-chevron{opacity:1}
.sb-group-header.flyout-open{background:rgba(255,255,255,.06)}
.sb-group-header.flyout-open .sb-group-chevron{opacity:1;transform:rotate(90deg)}

.sb-flyout-submenu{
  position:fixed;z-index:40;background:var(--sb-bg-1);border:1px solid var(--sb-border);border-radius:var(--r);
  box-shadow:var(--shadow-lg);padding:6px;min-width:220px;
}
.sb-flyout-title{font-size:9.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;color:var(--sb-muted);padding:7px 10px 5px}
.sb-flyout-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:var(--r-sm);cursor:pointer;color:var(--sb-text);font-size:13px;font-weight:600}
.sb-flyout-item:hover{background:rgba(255,255,255,.07)}
.sb-flyout-item.active{background:var(--gold-g);color:var(--sb-bright)}
.sb-flyout-icon{width:22px;height:22px;font-size:12px;background:rgba(255,255,255,.06);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--sb-bright)}
.sb-flyout-icon svg{width:60%;height:60%}

.sb-item{
  display:flex;align-items:center;gap:9px;padding:0 7px;height:42px;border-radius:var(--r-sm);
  color:var(--sb-text);text-decoration:none;font-size:13px;font-weight:600;margin-bottom:1px;
  cursor:pointer;border:1px solid transparent;position:relative;transition:background calc(.1s * var(--anim-mult,1)),border-color calc(.1s * var(--anim-mult,1)),transform calc(.1s * var(--anim-mult,1));
  white-space:nowrap;overflow:hidden;
}
.sidebar-slot:not(.pinned):not(:hover) .sb-item{justify-content:center;padding:0}
.sb-item:hover{background:rgba(255,255,255,.06);transform:translateX(1px)}
.sb-item:active{transform:scale(.98)}
.sb-item.active{background:var(--gold-g);color:var(--gold);border-color:rgba(212,168,83,.3)}
.sb-item-icon{
  width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-size:13px;flex-shrink:0;background:transparent;color:var(--sb-text);
  transition:width calc(.14s * var(--anim-mult,1)),height calc(.14s * var(--anim-mult,1)),color calc(.1s * var(--anim-mult,1));
}
.sb-item-icon svg{width:62%;height:62%}
.sb-item.active .sb-item-icon{color:var(--gold)}
.sb-item-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:0;transition:opacity calc(.1s * var(--anim-mult,1))}
.sidebar-slot:not(.pinned):not(:hover) .sb-item-name{display:none}
.sidebar-slot.pinned .sb-item-name,
.sidebar-slot:not(.pinned):hover .sb-item-name{opacity:1;transition:opacity calc(.18s * var(--anim-mult,1)) calc(.06s * var(--anim-mult,1))}
.sb-item.locked{color:var(--sb-muted);cursor:not-allowed}
.sb-item.locked .sb-item-icon{opacity:.5}
.sb-item.locked:hover{background:transparent;transform:none}
.sb-lock{font-size:10px;opacity:.6}

.sb-item.admin-item.active{background:var(--c-admin-g);color:var(--gold);border-color:rgba(212,168,83,.3)}
.sb-item.admin-item.active .sb-item-icon{background:rgba(110,86,207,.28)}

/* всплывающая подсказка — только пока панель узкая и мышь ещё не навела на весь сайдбар */
.sidebar-slot:not(.pinned):not(:hover) .sb-item::after{
  content:attr(data-label);position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%);
  background:var(--sb-bg-2);color:var(--sb-bright);padding:6px 10px;border-radius:6px;font-size:12px;
  white-space:nowrap;opacity:0;pointer-events:none;transition:opacity calc(.12s * var(--anim-mult,1));box-shadow:var(--shadow-md);
  border:1px solid var(--sb-border);z-index:40;
}

.sb-footer{
  padding:10px;border-top:1px solid var(--sb-border);flex-shrink:0;white-space:nowrap;overflow:hidden;
}
.sb-user-card{display:flex;align-items:center;gap:9px;padding:6px;border-radius:var(--r-sm);position:relative;cursor:pointer}
.sb-user-card:hover{background:rgba(255,255,255,.04)}
.sb-user-card:active{transform:scale(.98)}
.sb-user-meta{overflow:hidden;line-height:var(--body-line-height,1.25);flex:1;opacity:0;transition:opacity calc(.1s * var(--anim-mult,1));min-width:0}
.sb-user-meta b{display:block;font-size:15px;color:var(--sb-bright);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:var(--body-line-height,1.3)}
.sb-user-role-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:2px}
.sb-user-role-row > span:first-child{font-size:10.5px;color:var(--gold);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sb-logout{font-size:10.5px;color:var(--sb-muted);text-decoration:underline;cursor:pointer;flex-shrink:0;opacity:0;transition:opacity calc(.1s * var(--anim-mult,1))}
.sb-logout:hover{color:var(--gold)}
.sb-settings-btn{
  font-size:12px;color:var(--sb-muted);cursor:pointer;flex-shrink:0;opacity:0;transition:opacity calc(.1s * var(--anim-mult,1)),color calc(.1s * var(--anim-mult,1));
  width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:6px;
}
.sb-settings-btn:hover{color:var(--gold);background:rgba(255,255,255,.06)}
.sidebar-slot.pinned .sb-settings-btn,
.sidebar-slot:not(.pinned):hover .sb-settings-btn{opacity:1}
.sb-user-card:hover .sb-card-arrow{transform:translateX(2px);color:var(--gold)}
.sidebar-slot.pinned .sb-card-arrow,
.sidebar-slot:not(.pinned):hover .sb-card-arrow{opacity:1}
.sidebar-slot.pinned .sb-user-meta, .sidebar-slot.pinned .sb-logout,
.sidebar-slot:not(.pinned):hover .sb-user-meta, .sidebar-slot:not(.pinned):hover .sb-logout{opacity:1;transition:opacity calc(.18s * var(--anim-mult,1)) calc(.06s * var(--anim-mult,1))}

.sb-demo-note{
  font-size:10px;color:var(--sb-muted);line-height:1.5;padding:8px 9px;background:rgba(255,255,255,.03);
  border-radius:var(--r-sm);border:1px dashed var(--sb-border);margin-top:8px;
  opacity:0;height:0;overflow:hidden;transition:opacity calc(.1s * var(--anim-mult,1));white-space:normal;
}
.sidebar-slot.pinned .sb-demo-note,
.sidebar-slot:not(.pinned):hover .sb-demo-note{opacity:1;height:auto;transition:opacity calc(.18s * var(--anim-mult,1)) calc(.06s * var(--anim-mult,1))}
#userSwitch{opacity:0;height:0;overflow:hidden;transition:opacity calc(.1s * var(--anim-mult,1))}
.sidebar-slot.pinned #userSwitch,
.sidebar-slot:not(.pinned):hover #userSwitch{opacity:1;height:auto;transition:opacity calc(.18s * var(--anim-mult,1)) calc(.06s * var(--anim-mult,1))}

/* ══════════════════ MAIN ══════════════════ */
.main{flex:1;height:100vh;display:flex;flex-direction:column;overflow:hidden;min-width:0}

.mode-pill{
  display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;padding:3px 9px 3px 7px;
  border-radius:20px;letter-spacing:.3px;text-transform:uppercase;flex-shrink:0;
}
.mode-pill.mode-user{background:var(--c-blue-g);color:var(--c-blue-d)}
.mode-pill.mode-admin{background:var(--c-admin-g);color:var(--c-admin-d)}
.mode-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor}

.content{flex:1;overflow-y:auto;padding:22px 28px 40px;position:relative}
.content-inner{max-width:calc(600px + (1180px - 600px) * var(--layout-width-mult,1));margin:0 auto;transition:max-width calc(.15s * var(--anim-mult,1));position:relative;z-index:1}
.content.is-platform{padding:18px 22px 18px}
.content.is-platform .content-inner{max-width:none}

/* ══════════════════ HOME ══════════════════ */
.home-head{margin-bottom:26px}
.home-head h1{font-size:24px;font-weight:800;color:var(--c-bright);letter-spacing:-.3px;margin-bottom:5px}
.home-head p{font-size:13.5px;color:var(--c-muted)}

.stat-row{display:grid;grid-template-columns:repeat(var(--stat-columns,4),1fr);gap:12px;margin-bottom:28px}
.stat-card{
  background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);padding:16px 18px;
  box-shadow:var(--shadow-sm);
}
.stat-card .num{font-size:22px;font-weight:800;color:var(--c-bright);font-family:var(--mono)}
.stat-card .lbl{font-size:11.5px;color:var(--c-muted);font-weight:600;margin-top:3px}

.grid-label{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--c-muted);margin:26px 0 12px}
.grid-label:first-of-type{margin-top:0}

.platform-grid{display:grid;grid-template-columns:repeat(var(--content-columns,auto-fill),minmax(255px,1fr));gap:14px}
.p-card{
  background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r-lg);padding:18px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-sm);transition:all calc(.16s * var(--anim-mult,1));position:relative;
}
.p-card.unlocked{cursor:pointer}
.p-card.unlocked:hover{border-color:var(--c-blue);box-shadow:var(--shadow-md);transform:translateY(-2px)}
.p-card.locked{opacity:.6;background:var(--c-ink3)}
.p-card-top{display:flex;align-items:flex-start;justify-content:space-between}
.p-card-icon{
  width:42px;height:42px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;
  flex-shrink:0;
}
.p-status{display:flex;align-items:center;gap:5px;font-size:10.5px;font-weight:700;color:var(--c-green)}
.p-status-dot{width:6px;height:6px;border-radius:50%;background:var(--c-green)}
.p-status.off{color:var(--c-muted)}
.p-status.off .p-status-dot{background:var(--c-muted)}
.p-card h3{font-size:15px;font-weight:700;color:var(--c-bright)}
.p-card .p-domain{font-family:var(--mono);font-size:11px;color:var(--c-muted)}
.p-card .p-desc{font-size:12.5px;color:var(--c-text);line-height:1.5;flex:1}
.p-card-foot{display:flex;align-items:center;justify-content:space-between;margin-top:2px}
.p-open-btn{
  background:var(--c-blue);color:#fff;border:none;border-radius:var(--r-sm);padding:7px 14px;
  font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:6px;transition:background calc(.15s * var(--anim-mult,1));
}
.p-open-btn:hover{background:var(--c-blue-d)}
.p-locked-tag{
  display:flex;align-items:center;gap:6px;font-size:11.5px;color:var(--c-muted);font-weight:600;
}

/* ══════════════════ PLATFORM STUB VIEW ══════════════════ */
.pv-head{
  display:flex;align-items:center;gap:14px;margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--c-border);
}
.pv-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:21px;flex-shrink:0}
.pv-title h2{font-size:19px;font-weight:800;color:var(--c-bright)}
.pv-title .p-domain{font-size:11.5px}
.pv-actions{margin-left:auto;display:flex;gap:8px}
.pv-ext-btn{
  background:var(--c-ink2);border:1px solid var(--c-border);color:var(--c-text);border-radius:var(--r-sm);
  padding:8px 14px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;
}
.pv-ext-btn:hover{border-color:var(--c-blue);color:var(--c-blue-d)}
.pv-stub-banner{
  background:var(--c-ink3);border:1px dashed var(--c-border);border-radius:var(--r);
  padding:14px 16px;font-size:12.5px;color:var(--c-muted);line-height:1.6;margin-bottom:22px;
}
.pv-stub-banner b{color:var(--c-text)}
.pv-mock{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.pv-mock-row{display:flex;align-items:center;gap:14px;padding:13px 18px;border-bottom:1px solid var(--c-border)}
.pv-mock-row:last-child{border-bottom:none}
.pv-mock-avatar{width:34px;height:34px;border-radius:8px;background:var(--c-ink3);flex-shrink:0}
.pv-mock-line{height:9px;border-radius:5px;background:var(--c-ink3)}
.pv-mock-badge{
  padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;flex-shrink:0;
}

/* ══════════════════ ADMIN ══════════════════ */
.admin-tabs{display:flex;gap:4px;margin-bottom:22px;background:var(--c-ink3);padding:4px;border-radius:10px;width:fit-content}
.admin-tab{
  padding:8px 18px;border:none;background:transparent;border-radius:7px;font-size:12.5px;font-weight:700;
  color:var(--c-muted);
}
.admin-tab.active{background:var(--c-admin);color:#fff;box-shadow:0 2px 8px rgba(110,86,207,.35)}

.admin-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.admin-search{
  flex:1;max-width:280px;background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r-sm);
  padding:9px 12px;font-size:13px;color:var(--c-text);
}
.admin-search:focus{outline:2px solid var(--c-admin);outline-offset:-1px;border-color:var(--c-admin)}
.admin-add-btn{
  margin-left:auto;background:var(--c-admin);color:#fff;border:none;border-radius:var(--r-sm);
  padding:9px 16px;font-size:12.5px;font-weight:700;display:flex;align-items:center;gap:7px;
}
.admin-add-btn:hover{background:var(--c-admin-d)}

.users-table{width:100%;border-collapse:collapse;background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.users-table th{
  text-align:left;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:var(--c-muted);
  padding:11px 16px;background:var(--c-ink3);border-bottom:1px solid var(--c-border);
}
.users-table td{padding:12px 16px;border-bottom:1px solid var(--c-border);font-size:13px;vertical-align:middle}
.users-table tr:last-child td{border-bottom:none}
.u-name-cell{display:flex;align-items:center;gap:10px}
.u-avatar{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12.5px;color:#fff;flex-shrink:0}
.u-name b{display:block;font-size:13px;color:var(--c-bright)}
.u-name span{font-size:11px;color:var(--c-muted)}
.role-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap}
.status-dot-row{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600}
.status-dot{width:7px;height:7px;border-radius:50%}
.row-actions{display:flex;gap:6px;justify-content:flex-end}
.icon-btn{
  width:28px;height:28px;border-radius:7px;border:1px solid var(--c-border);background:var(--c-ink2);
  display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--c-muted);
}
.icon-btn:hover{border-color:var(--c-admin);color:var(--c-admin)}

/* ── access matrix ── */
.matrix-wrap{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r-lg);overflow:auto;box-shadow:var(--shadow-sm)}
.matrix{border-collapse:collapse;min-width:100%}
.matrix th, .matrix td{padding:0;border-bottom:1px solid var(--c-border)}
.matrix thead th{
  background:var(--c-ink3);padding:10px 8px;font-size:10.5px;font-weight:700;color:var(--c-muted);
  border-bottom:1px solid var(--c-border);white-space:nowrap;
}
.matrix .col-user-head{text-align:left;padding:10px 16px;position:sticky;left:0;background:var(--c-ink3);z-index:2;min-width:200px}
.matrix .platform-head{text-align:center;min-width:104px}
.matrix .platform-head .ph-icon{display:flex;align-items:center;justify-content:center;margin-bottom:3px}
.matrix .platform-head .ph-icon svg{width:16px;height:16px;display:block;margin:0 auto;stroke:currentColor}
.matrix .platform-head .ph-name{font-size:10px;font-weight:700;color:var(--c-text);text-transform:none;letter-spacing:0}
.matrix tbody td.col-user{
  position:sticky;left:0;background:var(--c-ink2);z-index:1;padding:10px 16px;border-right:1px solid var(--c-border);
}
.matrix tbody tr:hover td{background:#FBFAF8}
.matrix tbody tr:hover td.col-user{background:#FBFAF8}
.matrix td.cell{text-align:center;padding:10px}

.toggle{
  width:38px;height:22px;border-radius:20px;background:#DEE1E7;position:relative;border:none;flex-shrink:0;
  transition:background calc(.15s * var(--anim-mult,1));display:inline-block;
}
.toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform calc(.15s * var(--anim-mult,1));
}
.toggle.on{background:var(--c-admin)}
.toggle.on::after{transform:translateX(16px)}
.toggle:disabled{opacity:.4;cursor:not-allowed}

.cell-inner{display:flex;align-items:center;justify-content:center;gap:6px}
.perm-gear, .perm-gear-spacer{width:20px;height:20px;flex-shrink:0}
.perm-gear{
  border:1px solid var(--c-border);background:var(--c-ink3);border-radius:6px;font-size:10.5px;
  display:flex;align-items:center;justify-content:center;position:relative;color:var(--c-muted);
}
.perm-gear:hover{border-color:var(--c-admin);color:var(--c-admin-d)}
.perm-gear.custom{border-color:var(--gold);color:var(--gold-d);background:var(--gold-g)}
.perm-gear.custom::after{
  content:'';position:absolute;top:-2px;right:-2px;width:6px;height:6px;border-radius:50%;
  background:var(--gold);border:1.5px solid #fff;
}

.admin-note{
  margin-top:16px;font-size:12px;color:var(--c-muted);background:var(--c-ink3);border:1px dashed var(--c-border);
  border-radius:var(--r-sm);padding:10px 14px;line-height:1.55;
}

/* ── modal ── */
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);display:none;align-items:center;justify-content:center;z-index:100;backdrop-filter:blur(3px)}
.modal-overlay.open{display:flex}
.modal{width:420px;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:26px;animation:modalIn calc(.18s * var(--anim-mult,1)) cubic-bezier(.16,1,.3,1)}

.perms-modal{width:540px;max-height:82vh;display:flex;flex-direction:column;padding:22px 22px 20px}
.perms-modal-head{display:flex;align-items:center;gap:12px;margin-bottom:16px;position:relative}
.modal-close-x{position:absolute;right:0;top:-4px;width:26px;height:26px;border:none;background:transparent;color:var(--c-muted);font-size:14px;border-radius:6px}
.modal-close-x:hover{background:var(--c-ink3);color:var(--c-bright)}
.perms-modal-body{overflow-y:auto;flex:1;margin:0 -22px;padding:0 22px;display:flex;flex-direction:column;gap:12px}
.perms-empty{padding:20px;text-align:center;color:var(--c-muted);font-size:13px;background:var(--c-ink3);border-radius:var(--r)}

.perm-section{border:1px solid var(--c-border);border-radius:var(--r);overflow:hidden;flex-shrink:0}
.perm-section-head{
  display:flex;align-items:center;gap:9px;padding:11px 14px;background:var(--c-ink3);border-bottom:1px solid var(--c-border);
}
.perm-section-icon{width:26px;height:26px;border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:13px;flex-shrink:0}
.perm-section-title{flex:1;font-size:13px;font-weight:700;color:var(--c-bright)}
.perm-section-count{font-size:11px;color:var(--c-muted);font-weight:600}
.perm-reset-btn{
  font-size:10.5px;font-weight:700;color:var(--c-admin-d);background:var(--c-admin-g);border:none;
  padding:4px 9px;border-radius:20px;white-space:nowrap;
}
.perm-reset-btn:hover{background:var(--c-admin);color:#fff}
.perm-section-body{padding:12px 14px 14px}
.perm-role-row{margin-bottom:12px}
.perm-role-select{
  width:100%;padding:9px 11px;border:1px solid var(--c-border);border-radius:var(--r-sm);font-size:13px;
  font-weight:700;background:var(--c-ink3);color:var(--c-bright);cursor:pointer;
}
.perm-role-select:focus{outline:2px solid var(--c-admin);outline-offset:-1px;border-color:var(--c-admin)}
.perm-role-desc{font-size:11.5px;color:var(--c-muted);margin-top:5px;padding-left:1px}
.perm-individual{display:flex;flex-direction:column;gap:1px;border-top:1px solid var(--c-border);padding-top:8px}
.perm-ind-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:6px 1px;font-size:12.5px;color:var(--c-text)}
.mini-toggle{
  width:30px;height:18px;border-radius:20px;background:#DEE1E7;position:relative;border:none;flex-shrink:0;transition:background calc(.15s * var(--anim-mult,1));
}
.mini-toggle::after{
  content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:#fff;
  box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform calc(.15s * var(--anim-mult,1));
}
.mini-toggle.on{background:var(--c-admin)}
.mini-toggle.on::after{transform:translateX(12px)}
.scope-switch{display:flex;flex-wrap:wrap;border:1px solid var(--c-border);border-radius:20px;padding:2px;background:var(--c-ink3);max-width:100%}
.scope-btn{padding:3px 11px;border:none;background:transparent;border-radius:16px;font-size:11px;font-weight:700;color:var(--c-muted)}
.scope-btn.active{background:var(--c-admin);color:#fff}
.color-picker-modal{width:520px}
.cp-section-label{font-size:10.5px;font-weight:700;color:var(--c-muted);text-transform:uppercase;letter-spacing:.4px;margin:14px 0 7px}
.cp-hue-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:4px}
.cp-neutral-row{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}
.cp-neutral-cell{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid var(--c-border);transition:transform calc(.08s * var(--anim-mult,1))}
.cp-neutral-cell:hover{transform:scale(1.12)}
.cp-neutral-cell.active{border-color:var(--c-bright)}
.cp-hue-cell{aspect-ratio:1;border-radius:6px;cursor:pointer;border:2px solid transparent;transition:transform calc(.08s * var(--anim-mult,1))}
.cp-hue-cell:hover{transform:scale(1.12)}
.cp-hue-cell.active{border-color:var(--c-bright)}
.cp-shade-strip{display:grid;grid-template-columns:repeat(20,1fr);gap:2px;height:38px}
.cp-shade-cell{border-radius:4px;cursor:pointer;border:2px solid transparent;transition:transform calc(.08s * var(--anim-mult,1))}
.cp-shade-cell:hover{transform:scaleY(1.1)}
.cp-shade-cell.active{border-color:var(--c-bright)}
.cp-preview-row{display:flex;align-items:center;gap:12px;margin-top:16px;padding:10px;background:var(--c-ink3);border-radius:var(--r)}
.cp-preview-swatch{width:40px;height:40px;border-radius:10px;flex-shrink:0;border:1px solid var(--c-border)}

/* ═══ Страница «Настройки» ═══ */
#settingsBody{display:flex;align-items:flex-start;gap:16px}
.settings-col{flex:1;min-width:0;display:flex;flex-direction:column}
.settings-section{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);padding:20px;margin-bottom:16px;width:100%;box-sizing:border-box;min-width:0}
.settings-section-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.settings-section-icon{width:30px;height:30px;border-radius:8px;background:var(--c-blue-g);color:var(--c-blue-d);display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.settings-section-title{font-size:14.5px;font-weight:800;color:var(--c-bright)}
.settings-section-desc{font-size:12px;color:var(--c-muted);margin-top:1px}

.theme-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.theme-card{border:2px solid var(--c-border);border-radius:9px;padding:6px;cursor:pointer;transition:border-color calc(.12s * var(--anim-mult,1))}
.theme-card:hover{border-color:var(--c-blue)}
.theme-card.active{border-color:var(--c-admin);background:var(--c-admin-g)}
.theme-swatch-strip{display:flex;height:20px;border-radius:5px;overflow:hidden;margin-bottom:5px;border:1px solid rgba(0,0,0,.08)}
.theme-swatch-strip span{flex:1}
.theme-card-label{font-size:9px;font-weight:700;color:var(--c-bright);text-align:center;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.color-row{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-border)}
.color-row:last-child{border-bottom:none}
.color-row-info{flex:1}
.color-row-title{font-size:13px;font-weight:700;color:var(--c-bright)}
.color-row-desc{font-size:11.5px;color:var(--c-muted);margin-top:1px}
.color-swatch-btn{width:34px;height:34px;border-radius:9px;border:1px solid var(--c-border);cursor:pointer;flex-shrink:0;position:relative}
.color-swatch-btn.empty{background:repeating-conic-gradient(var(--c-ink3) 0% 25%, var(--c-ink2) 0% 50%) 50%/10px 10px}
.color-reset-mini{font-size:10.5px;color:var(--c-muted);text-decoration:underline;cursor:pointer;flex-shrink:0}

.sound-block{padding:14px 0;border-bottom:1px solid var(--c-border)}
.sound-block:last-child{border-bottom:none}
.sound-block-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.sound-block-title{font-size:13px;font-weight:700;color:var(--c-bright)}
.sound-row-split{display:flex;gap:14px;align-items:flex-start}
.sound-dd{position:relative;flex:1;min-width:0}
.sound-dd-trigger{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:6px;padding:9px 12px;
  border:1px solid var(--c-border);border-radius:var(--r-sm);font-size:12.5px;font-weight:600;
  background:var(--c-ink3);color:var(--c-bright);cursor:pointer;box-sizing:border-box;
}
.sound-dd-trigger span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.sound-dd-trigger:hover{border-color:var(--c-admin)}
.sound-dd-arrow{color:var(--c-muted);font-size:11px}
.sound-dd-panel{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:20;background:var(--c-ink2);
  border:1px solid var(--c-border);border-radius:var(--r-sm);max-height:220px;overflow-y:auto;padding:4px;
}
.sound-dd-option{
  display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;
  font-size:12.5px;color:var(--c-text);cursor:pointer;
}
.sound-dd-option:hover{border:1px solid var(--c-admin);padding:7px 9px}
.sound-dd-option.active{background:var(--c-admin-g);color:var(--c-bright);font-weight:700}
.sound-dd-check{color:var(--c-admin);font-weight:800}
.sound-volume-split{flex:1;display:flex;align-items:center;gap:6px;padding-top:9px;min-width:0;max-width:100%}
.sound-volume-split input[type=range]{flex:1;min-width:0;accent-color:var(--c-admin)}
.volume-row{display:flex;align-items:center;gap:10px;min-width:0;max-width:100%}
.volume-row input[type=range]{flex:1;min-width:0;accent-color:var(--c-admin)}
.vlabel{font-size:11px;color:var(--c-muted);width:32px;text-align:right;flex-shrink:0}
.btn-apply-sound{
  margin-top:10px;width:100%;padding:9px;border:none;border-radius:var(--r-sm);background:var(--c-admin);
  color:#fff;font-weight:700;font-size:12.5px;cursor:pointer;transition:background calc(.12s * var(--anim-mult,1));
}
.btn-apply-sound:hover{background:var(--c-admin-d)}

.account-avatar-compact-row{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.account-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;padding-top:2px;min-width:0}

.avatar-picker-row{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap;max-width:100%}
.avatar-pick-btn{
  width:60px;height:60px;border-radius:16px;flex-shrink:0;border:2px solid transparent;
  background:var(--c-ink3);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:0;
}
.avatar-pick-btn.active{border-color:var(--c-admin);box-shadow:0 0 0 3px var(--c-admin-g)}
.avatar-pick-initials{color:#fff;font-weight:800;font-size:16px;letter-spacing:.2px}
.avatar-pick-photo{width:100%;height:100%;object-fit:cover}
.avatar-pick-upload{font-size:19px;color:var(--c-muted)}
.avatar-pick-silhouette{width:60%;height:60%;color:var(--c-muted);display:flex}
.avatar-pick-silhouette svg,.avatar-pick-silhouette img{width:100%;height:100%;object-fit:contain}
.avatar-picker-hint{font-size:11px;color:var(--c-muted);margin-bottom:16px}
.account-animal-label{font-size:11.5px;font-weight:700;color:var(--c-text);text-transform:uppercase;letter-spacing:.3px;margin-bottom:8px}
.account-animal-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:8px;margin-bottom:20px}
.account-animal-cell{
  aspect-ratio:1;max-width:64px;max-height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:19px;
  background:var(--c-ink3);border:2px solid transparent;cursor:pointer;transition:transform calc(.1s * var(--anim-mult,1)),border-color calc(.1s * var(--anim-mult,1));
}
.account-animal-cell:hover{transform:scale(1.12)}
.account-animal-cell.active{border-color:var(--c-admin);background:var(--c-admin-g)}
.account-form{border-top:1px solid var(--c-border);padding-top:16px}

.bg-preview{width:100%;height:120px;border-radius:var(--r);border:1px solid var(--c-border);background-size:cover;background-position:center;margin-bottom:12px;display:flex;align-items:center;justify-content:center;color:var(--c-muted);font-size:12px;background-color:var(--c-ink3);position:relative;overflow:hidden}
.bg-preview-tint{position:absolute;inset:0;pointer-events:none}
.bg-upload-row{display:flex;gap:8px}
.bg-upload-btn{flex:1;text-align:center;padding:9px;border:1px dashed var(--c-border);border-radius:var(--r-sm);cursor:pointer;font-size:12.5px;font-weight:700;color:var(--c-blue-d);background:var(--c-blue-g)}
@keyframes modalIn{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
.modal h3{font-size:16px;font-weight:800;color:var(--c-bright);margin-bottom:4px}
.modal .sub{font-size:12.5px;color:var(--c-muted);margin-bottom:18px}
.field{margin-bottom:14px}
.field label{display:block;font-size:11.5px;font-weight:700;color:var(--c-text);margin-bottom:6px;text-transform:uppercase;letter-spacing:.3px}
.field input, .field select{
  width:100%;padding:10px 12px;border:1px solid var(--c-border);border-radius:var(--r-sm);font-size:13.5px;
  background:var(--c-ink3);color:var(--c-bright);box-sizing:border-box;min-width:0;
}
.field{min-width:0}
.field input:focus, .field select:focus{outline:2px solid var(--c-admin);outline-offset:-1px;border-color:var(--c-admin);background:#fff}
.field-hint{font-size:11px;color:var(--c-muted);margin-top:5px}
.tenant-status-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0}
.plan-badge{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;background:var(--c-ink3);color:var(--c-text);border:1px solid var(--c-border)}
.modal-actions{display:flex;gap:9px;justify-content:flex-end;margin-top:20px}
.btn-cancel{background:transparent;border:1px solid var(--c-border);color:var(--c-text);border-radius:var(--r-sm);padding:9px 16px;font-size:13px;font-weight:700}
.btn-ok{background:var(--c-admin);color:#fff;border:none;border-radius:var(--r-sm);padding:9px 18px;font-size:13px;font-weight:700}
.btn-ok:hover{background:var(--c-admin-d)}

/* toast */
.toast{
  position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--c-bright);color:#fff;padding:11px 20px;border-radius:10px;font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all calc(.25s * var(--anim-mult,1));z-index:200;display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:880px){
  .sidebar-slot{width:var(--sb-w-collapsed) !important}
  .stat-row{grid-template-columns:repeat(2,1fr)}
}
/* ═══════════════════════════════════════════════════════════
   Универсальная анимационная подсветка кнопок и интерактивных
   элементов при наведении/нажатии. Построена на ярких контрастных
   переменных --c-hover-ring/--c-active-ring (рассчитываются в JS
   из акцентного цвета темы с высокой непрозрачностью), поэтому
   заметна на любой из 10 тем и на персональных цветах пользователя.
   ═══════════════════════════════════════════════════════════ */
button:not(:disabled):not(.sb-item), .p-card.unlocked, .theme-card, .cp-hue-cell, .cp-shade-cell,
.account-animal-cell, .toggle, .mini-toggle, .scope-btn, .admin-tab, .color-swatch-btn,
.perm-role-select, .sound-select, .field input, .field select, .icon-btn, .perm-gear{
  transition: box-shadow calc(.15s * var(--anim-mult,1)) cubic-bezier(.4,0,.2,1), transform calc(.1s * var(--anim-mult,1)) cubic-bezier(.4,0,.2,1), filter calc(.12s * var(--anim-mult,1)) ease, border-color calc(.12s * var(--anim-mult,1)) ease;
}
.sound-dd-trigger, .sound-dd-option{ transition: border-color calc(.1s * var(--anim-mult,1)), background calc(.1s * var(--anim-mult,1)); }

button:not(:disabled):not(.sb-item):hover, .theme-card:hover, .cp-hue-cell:hover, .cp-shade-cell:hover,
.account-animal-cell:hover, .scope-btn:hover, .admin-tab:hover, .color-swatch-btn:hover,
.icon-btn:hover, .perm-gear:hover{
  box-shadow:0 0 0 3px var(--c-hover-ring, rgba(139,115,85,.55));
  border-color:var(--c-hover-border, var(--c-blue)) !important;
  filter:brightness(1.08) saturate(1.15);
  transform:translateY(-1px) scale(1.025);
}
.toggle:hover, .mini-toggle:hover{ box-shadow:0 0 0 5px var(--c-hover-ring, rgba(139,115,85,.55)); transform:none; }
.cp-hue-cell:hover, .cp-shade-cell:hover, .account-animal-cell:hover{ transform:scale(1.16); z-index:2; position:relative; }
.perm-role-select:hover, .sound-select:hover, .field input:hover, .field select:hover{
  border-color:var(--c-hover-border, var(--c-blue)) !important;
  box-shadow:0 0 0 3px var(--c-hover-ring, rgba(139,115,85,.35));
}
.perm-role-select:focus, .sound-select:focus, .field input:focus{
  outline:none; border-color:var(--c-active-border, var(--c-admin)) !important;
  box-shadow:0 0 0 4px var(--c-active-ring, rgba(110,90,66,.5));
}

button:not(:disabled):not(.sb-item):active, .theme-card:active, .cp-hue-cell:active, .cp-shade-cell:active,
.account-animal-cell:active, .scope-btn:active, .admin-tab:active, .color-swatch-btn:active,
.icon-btn:active, .perm-gear:active, .sound-list-item:active{
  transform:scale(.93) !important;
  filter:brightness(.9) saturate(1.2);
  box-shadow:0 0 0 4px var(--c-active-ring, rgba(110,90,66,.7)) !important;
  border-color:var(--c-active-border, var(--c-admin)) !important;
}
.toggle:active, .mini-toggle:active{ transform:scale(.88) !important; }
.p-card.unlocked:active{ transform:translateY(0) scale(.98) !important; box-shadow:0 0 0 4px var(--c-active-ring, rgba(110,90,66,.6)) !important; }

.sb-item:hover{ box-shadow:inset 0 0 0 1.5px var(--c-hover-ring, rgba(212,168,83,.5)); }
.sb-item:active{ transform:translateX(1px) scale(.96); background:var(--gold-g); box-shadow:inset 0 0 0 2px var(--c-active-ring, rgba(212,168,83,.6)); }

/* ═══════════════════════════════════════════════════════════
   Типографика — отдельный масштаб и жирность для основного текста,
   заголовков и пояснительных надписей. Значения по умолчанию (1/800/400)
   точно соответствуют исходному дизайну — включение настройки не меняет вид.
   Охватывает всю платформу: Главную, Администрирование, сайдбар, карточки —
   не только страницу настроек.
   ═══════════════════════════════════════════════════════════ */

/* ── Основной текст ── */
body{ font-size:calc(14px * var(--body-font-scale,1)) !important; font-weight:var(--body-font-weight,400); line-height:var(--body-line-height,1.5); }
.sb-item{ font-size:calc(13px * var(--body-font-scale,1)) !important; }
.admin-search, .users-table td{ font-size:calc(13px * var(--body-font-scale,1)); }
.admin-tab{ font-size:calc(12.5px * var(--body-font-scale,1)); }
.field input, .field select{ font-size:calc(13.5px * var(--body-font-scale,1)); }
.perm-role-select{ font-size:calc(13px * var(--body-font-scale,1)); }
.status-dot-row{ font-size:calc(12px * var(--body-font-scale,1)); }

/* ── Заголовки ── */
h1, .home-head h1{ font-size:calc(24px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,800); }
.pv-title h2{ font-size:calc(19px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,800); }
.p-card h3{ font-size:calc(15px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,700); }
.settings-section-title{ font-size:calc(14.5px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,800); }
.stat-card .num{ font-size:calc(22px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,800); }
.color-row-title, .sound-block-title{ font-size:calc(13px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,700); }
.perm-section-title{ font-size:calc(13px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,700); }
.theme-card-label{ font-size:calc(9px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,700); }
.u-name b{ font-size:calc(13px * var(--heading-font-scale,1)); font-weight:var(--heading-font-weight,700); }

/* ── Пояснительные надписи ── */
.settings-section-desc{ font-size:calc(12px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,400); }
.color-row-desc, .perm-role-desc{ font-size:calc(11.5px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,400); }
.home-head p{ font-size:calc(13.5px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,400); }
.stat-card .lbl{ font-size:calc(11.5px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,600); }
.p-card .p-domain, .pv-title .p-domain{ font-size:calc(11px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,400); }
.sb-section-label{ font-size:calc(9.5px * var(--caption-font-scale,1)) !important; font-weight:var(--caption-font-weight,700); }
.users-table th{ font-size:calc(10.5px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,700); }
.u-name span{ font-size:calc(11px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,400); }

.type-preview{padding:16px 18px;background:var(--c-ink3);border-radius:var(--r);margin-bottom:16px;border:1px solid var(--c-border)}
.type-demo-heading{font-size:calc(18px * var(--heading-font-scale,1));font-weight:var(--heading-font-weight,800);color:var(--c-bright);margin-bottom:6px}
.type-demo-body{font-size:calc(14px * var(--body-font-scale,1));font-weight:var(--body-font-weight,400);color:var(--c-text);margin-bottom:6px;line-height:1.5}
.type-demo-caption{font-size:calc(11.5px * var(--caption-font-scale,1));font-weight:var(--caption-font-weight,400);color:var(--c-muted)}

.typo-preset-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px}
.typo-fine-tune{margin-top:16px;padding-top:14px;border-top:1px solid var(--c-border)}
.typo-preset-card{border:2px solid var(--c-border);border-radius:var(--r);padding:12px 8px;cursor:pointer;text-align:center}
.typo-preset-card.active{border-color:var(--c-admin);background:var(--c-admin-g)}
.typo-preset-name{font-size:12.5px;font-weight:700;color:var(--c-bright);margin-bottom:3px}
.typo-preset-desc{font-size:10px;color:var(--c-muted);line-height:1.3}

body.hide-captions .settings-section-desc,
body.hide-captions .color-row-desc,
body.hide-captions .perm-role-desc,
body.hide-captions .home-head p,
body.hide-captions .p-card > p,
body.hide-captions .p-card .p-domain,
body.hide-captions .pv-title .p-domain,
body.hide-captions .avatar-picker-hint,
body.hide-captions .type-demo-caption,
body.hide-captions .admin-note,
body.hide-captions .typo-preset-desc,
body.hide-captions .sub{display:none !important}
.sb-user-role-row > span:first-child{ font-size:calc(10.5px * var(--caption-font-scale,1)); font-weight:var(--caption-font-weight,600); }

/* ── Аватар: силуэты «мужской/женский» (SVG, наследуют текущий акцентный фон) ── */
.avatar-silhouette{width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.avatar-silhouette svg,.avatar-silhouette img{width:78%;height:78%;object-fit:contain}

/* ── Кнопки: 3 состояния (в покое/наведение/нажатие) с заливкой и окантовкой ── */
.btn-ok, .btn-apply-sound{
  background:var(--btn-fill-rest, var(--c-admin));
  border-style:solid;
  border-width:var(--btn-border-width-rest, 0px);
  border-color:var(--btn-border-color-rest, transparent);
}
.btn-ok:hover, .btn-apply-sound:hover{
  background:var(--btn-fill-hover, var(--c-admin-d));
  border-width:var(--btn-border-width-hover, var(--btn-border-width-rest, 0px));
  border-color:var(--btn-border-color-hover, var(--btn-border-color-rest, transparent));
}
.btn-ok:active, .btn-apply-sound:active{
  background:var(--btn-fill-active, var(--btn-fill-hover, var(--c-admin-d))) !important;
  border-width:var(--btn-border-width-active, var(--btn-border-width-hover, var(--btn-border-width-rest, 0px)));
  border-color:var(--btn-border-color-active, var(--btn-border-color-hover, var(--btn-border-color-rest, transparent))) !important;
}

/* ── Горизонтальные вкладки раздела «Настройки» (переиспользуют вид .admin-tabs) ── */
.settings-hero{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:18px}

/* ── Строка выбора состояния кнопки + под-контролы стиля ── */
.btn-compact-row{display:flex;align-items:center;gap:16px;padding:12px 14px;background:var(--c-ink3);border-radius:var(--r);flex-wrap:wrap;margin-bottom:6px}
.btn-compact-item{display:flex;flex-direction:column;gap:5px}
.btn-compact-label{font-size:10px;color:var(--c-muted);font-weight:700;text-transform:uppercase;letter-spacing:.3px;white-space:nowrap}
.btn-compact-slider{flex:1;min-width:130px}
.btn-compact-slider input{width:100%}
.btn-style-row .field{flex:1;margin-bottom:0}

/* ── Журнал активности ── */
.activity-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--c-border)}
.activity-row:last-child{border-bottom:none}
.activity-dot{width:7px;height:7px;border-radius:50%;background:var(--c-admin);margin-top:6px;flex-shrink:0}
.activity-text b{font-size:12.5px;color:var(--c-bright);font-weight:700;display:block}
.activity-text span{font-size:11px;color:var(--c-muted)}
.activity-time{font-size:10.5px;color:var(--c-muted);flex-shrink:0;white-space:nowrap}

/* ══ Встроенный модуль «Задачи» — весь CSS скоупирован под .tm-root, использует переменные темы хаба ══ */

.tm-root{
  --bg:var(--content-bg);--panel:var(--c-ink2);--panel-2:var(--c-ink3);--line:var(--c-border);--line-2:var(--c-border);
  --ink:var(--c-bright);--ink-2:var(--c-text);--ink-3:var(--c-muted);
  --amber:var(--gold);--amber-2:var(--gold-d);--timber:var(--c-admin);
  --red:#c0453f;--red-bg:rgba(192,69,63,.14);--green:#2f8f5e;--green-bg:rgba(47,143,94,.14);
  --wip:#b8791a;--wip-bg:rgba(184,121,26,.14);--blue:#3568a0;--blue-bg:rgba(53,104,160,.14);--purple:#6b4f96;--purple-bg:rgba(107,79,150,.14);
  font-family:var(--font);color:var(--c-text);font-size:14px;line-height:1.5;
}
.tm-root *{box-sizing:border-box;margin:0;padding:0}


.tm-root .mono{font-family:var(--mono),monospace}
.tm-root button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.tm-root input, .tm-root select, .tm-root textarea{font-family:inherit}
.tm-root ::-webkit-scrollbar{width:9px;height:9px}.tm-root ::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px}.tm-root ::-webkit-scrollbar-track{background:transparent}

.tm-root .app{display:grid;grid-template-columns:220px 1fr;height:calc(100vh - 40px);min-height:520px;overflow:hidden;border-radius:var(--r);border:1px solid var(--c-border)}
.tm-root .side{background:var(--panel);border-right:1px solid var(--line);display:flex;flex-direction:column;padding:18px 0}
.tm-root .brand{padding:0 20px 16px;display:flex;align-items:center;gap:11px;border-bottom:1px solid var(--line)}
.tm-root .brand .logo{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--amber),var(--timber));display:grid;place-items:center;font-weight:800;color:#1b1407;font-size:16px}
.tm-root .brand b{font-size:15px;letter-spacing:.4px;display:block}.tm-root .brand span{display:block;font-size:10px;color:var(--ink-3);letter-spacing:1.6px;text-transform:uppercase}
.tm-root .nav{padding:12px;display:flex;flex-direction:column;gap:1px;flex:1;overflow-y:auto}
.tm-root .nav button{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--r-sm);color:var(--ink-2);font-size:13.5px;font-weight:500;text-align:left;width:100%;transition:calc(.12s * var(--anim-mult,1))}
.tm-root .nav button:hover{background:var(--panel-2);color:var(--ink)}
.tm-root .nav button.on{background:var(--panel-2);color:var(--ink)}
.tm-root .nav button.on .ic{color:var(--amber)}
.tm-root .nav .ic{width:18px;text-align:center;font-size:14px;color:var(--ink-3)}
.tm-root .nav .badge{margin-left:auto;font-size:11px;font-weight:700;background:var(--red);color:#fff;border-radius:20px;padding:1px 7px;min-width:20px;text-align:center}
.tm-root .who{margin:8px 12px 0;padding:11px 12px;background:var(--panel-2);border-radius:var(--r-sm);border:1px solid var(--line)}
.tm-root .who label{font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--ink-3);font-weight:700;display:block;margin-bottom:5px}
.tm-root .who select{width:100%;background:var(--bg);color:var(--ink);border:1px solid var(--line-2);border-radius:6px;padding:7px 8px;font-size:12.5px}

.tm-root .main{overflow-y:auto;display:flex;flex-direction:column}
.tm-root .top{position:sticky;top:0;z-index:5;background:rgba(19,21,26,.88);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);padding:15px 26px;display:flex;align-items:center;gap:14px}
.tm-root .top h1{font-size:19px;font-weight:700}
.tm-root .top .sub{color:var(--ink-3);font-size:12.5px}
.tm-root .top .spacer{flex:1}
.tm-root .btn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:var(--r-sm);font-size:13px;font-weight:600;border:1px solid var(--line-2);background:var(--panel-2);color:var(--ink);transition:calc(.12s * var(--anim-mult,1))}
.tm-root .btn:hover{border-color:var(--ink-3)}
.tm-root .btn.primary{background:var(--amber);color:#1b1407;border-color:var(--amber)}
.tm-root .btn.primary:hover{background:var(--amber-2)}
.tm-root .btn.sm{padding:6px 11px;font-size:12px}
.tm-root .wrap{padding:22px 26px 60px;max-width:1320px;width:100%}

.tm-root .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:13px;margin-bottom:8px}
.tm-root .kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px;position:relative;overflow:hidden;cursor:pointer;transition:calc(.12s * var(--anim-mult,1))}
.tm-root .kpi:hover{border-color:var(--line-2)}
.tm-root .kpi::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent,var(--amber))}
.tm-root .kpi .lab{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:.3px;text-transform:uppercase}
.tm-root .kpi .val{font-size:30px;font-weight:800;line-height:1.1;margin-top:7px;font-family:var(--mono)}
.tm-root .kpi .meta{font-size:11px;color:var(--ink-2);margin-top:3px}

.tm-root .sec-h{display:flex;align-items:center;gap:10px;margin:24px 0 12px}
.tm-root .sec-h h2{font-size:13px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--ink-2)}
.tm-root .sec-h .line{flex:1;height:1px;background:var(--line)}

.tm-root .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px;align-items:center}
.tm-root .filters select, .tm-root .filters input{background:var(--panel);border:1px solid var(--line-2);color:var(--ink);border-radius:var(--r-sm);padding:7px 10px;font-size:12.5px}
.tm-root .filters input{min-width:190px}
.tm-root .chip{padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;border:1px solid var(--line-2);color:var(--ink-2);background:var(--panel)}
.tm-root .chip.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}

.tm-root .tasks{display:flex;flex-direction:column;gap:9px}
.tm-root .task{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--st,var(--line-2));border-radius:var(--r);padding:13px 16px;display:grid;grid-template-columns:1fr auto;gap:6px 16px;transition:calc(.12s * var(--anim-mult,1));cursor:pointer}
.tm-root .task:hover{border-color:var(--line-2);background:var(--panel-2)}
.tm-root .task.overdue{border-left-color:var(--red)}
.tm-root .task .t-top{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.tm-root .task .title{font-weight:600;font-size:14.5px}
.tm-root .task .pin{color:var(--ink-3);font-size:14px}.tm-root .task .pin.on{color:var(--amber)}
.tm-root .task .row2{display:flex;gap:13px;align-items:center;flex-wrap:wrap;color:var(--ink-3);font-size:12px;margin-top:3px}
.tm-root .task .row2 b{color:var(--ink-2);font-weight:600}
.tm-root .task .links{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.tm-root .lk{font-size:11px;padding:2px 8px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);color:var(--ink-2)}
.tm-root .lk.client{color:#9fd0ff}.tm-root .lk.deal{color:#b8e8c8}.tm-root .lk.kp{color:var(--amber-2)}.tm-root .lk.obj{color:#e0b88a}.tm-root .lk.proj{color:#c9b6e8}
.tm-root .task .right{display:flex;flex-direction:column;align-items:flex-end;gap:7px;justify-content:center}
.tm-root .tag{font-size:11px;font-weight:700;padding:3px 9px;border-radius:6px}
.tm-root .tag.s-new{background:var(--blue-bg);color:#7fb0e0}.tm-root .tag.s-wip{background:var(--wip-bg);color:var(--wip)}
.tm-root .tag.s-done{background:var(--green-bg);color:var(--green)}.tm-root .tag.s-over{background:var(--red-bg);color:#f08a86}
.tm-root .pcls{font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:5px;text-transform:uppercase;letter-spacing:.3px}
.tm-root .pc-urgent{background:var(--red-bg);color:#f08a86}.tm-root .pc-important{background:var(--wip-bg);color:var(--wip)}
.tm-root .pc-strategic{background:var(--purple-bg);color:#b9a3e0}.tm-root .pc-operational{background:var(--panel-2);color:var(--ink-3)}
.tm-root .pc-stuck{background:#241616;color:#d98}.tm-root .pc-needs_owner{background:var(--blue-bg);color:#9fd0ff}
.tm-root .risk{font-size:11.5px;color:#f08a86;background:var(--red-bg);padding:3px 9px;border-radius:6px;display:inline-block;margin-top:7px}
.tm-root .deadline.late{color:#f08a86;font-weight:700}

.tm-root .board{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.tm-root .col{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:12px;min-height:120px}
.tm-root .col h3{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--ink-2);margin-bottom:11px;display:flex;justify-content:space-between}
.tm-root .col h3 span{color:var(--ink-3);font-family:var(--mono)}
.tm-root .col .mini{background:var(--panel-2);border:1px solid var(--line);border-left:3px solid var(--st,var(--line-2));border-radius:7px;padding:9px 11px;margin-bottom:8px;font-size:12.5px;cursor:pointer;transition:calc(.12s * var(--anim-mult,1))}
.tm-root .col .mini:hover{border-color:var(--line-2)}
.tm-root .col .mini b{display:block;font-weight:600;margin-bottom:3px}.tm-root .col .mini small{color:var(--ink-3)}

.tm-root .people{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:12px}
.tm-root .pcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.tm-root .pcard .ph{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.tm-root .pcard .av{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;font-weight:700;font-size:14px;color:#1b1407;background:linear-gradient(135deg,var(--timber),var(--amber))}
.tm-root .pcard .nm{font-weight:700;font-size:14px}.tm-root .pcard .rl{font-size:11.5px;color:var(--ink-3)}
.tm-root .pcard .score{margin-left:auto;text-align:right}
.tm-root .pcard .score b{font-size:22px;font-family:var(--mono);color:var(--amber-2)}
.tm-root .pcard .score small{display:block;font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.8px}
.tm-root .bar{height:7px;background:var(--bg);border-radius:6px;overflow:hidden;margin:9px 0}
.tm-root .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--green));border-radius:6px}
.tm-root .pstats{display:flex;gap:15px;font-size:12px;color:var(--ink-2)}
.tm-root .pstats div b{display:block;font-size:15px;font-family:var(--mono);color:var(--ink)}
.tm-root .streak{font-size:11.5px;color:var(--amber-2);margin-top:8px;font-weight:600}
.tm-root .otr{font-size:11px;color:var(--ink-3);margin-top:6px}

.tm-root .mlist{display:flex;flex-direction:column;gap:11px}
.tm-root .meet{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px 17px}
.tm-root .meet .mh{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.tm-root .mtype{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:3px 9px;border-radius:6px}
.tm-root .mt-project{background:var(--blue-bg);color:#7fb0e0}.tm-root .mt-management{background:var(--wip-bg);color:var(--wip)}
.tm-root .mt-sales{background:var(--green-bg);color:var(--green)}.tm-root .mt-construction{background:#241a12;color:var(--amber-2)}
.tm-root .mt-production{background:var(--purple-bg);color:#b9a3e0}.tm-root .mt-one_on_one{background:var(--panel-2);color:var(--ink-2)}
.tm-root .meet .mt{font-weight:700;font-size:15px}.tm-root .meet .md{color:var(--ink-3);font-size:12px;margin-left:auto}
.tm-root .meet .qs{display:flex;flex-direction:column;gap:5px;margin-top:9px}
.tm-root .meet .q{font-size:13px;color:var(--ink-2);padding:7px 11px;background:var(--panel-2);border-radius:7px;border-left:2px solid var(--line-2);cursor:pointer}
.tm-root .meet .q.dec{border-left-color:var(--green)}
.tm-root .meet .mact{display:flex;gap:8px;margin-top:11px}
.tm-root .transcript{margin-top:11px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:12.5px;color:var(--ink-2);display:none}
.tm-root .transcript.show{display:block}
.tm-root .transcript .seg{margin-bottom:7px}.tm-root .transcript .seg b{color:var(--amber-2);font-family:var(--mono);font-size:11px}

.tm-root .intg{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.tm-root .ich{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:15px}
.tm-root .ich .ih{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.tm-root .ich .ico{width:34px;height:34px;border-radius:8px;display:grid;place-items:center;font-size:16px;background:var(--panel-2);border:1px solid var(--line)}
.tm-root .ich .inm{font-weight:700;font-size:14px}
.tm-root .ich .dot{width:9px;height:9px;border-radius:50%;margin-left:auto}
.tm-root .dot.up{background:var(--green);box-shadow:0 0 0 3px var(--green-bg)}
.tm-root .dot.off{background:var(--ink-3)}.tm-root .dot.plan{background:var(--wip);box-shadow:0 0 0 3px var(--wip-bg)}
.tm-root .ich p{font-size:12px;color:var(--ink-3);line-height:1.5}
.tm-root .ich .last{font-size:11px;color:var(--ink-2);margin-top:8px;font-family:var(--mono)}
.tm-root .toggle{margin-top:10px;display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-2)}
.tm-root .sw{width:38px;height:21px;border-radius:20px;background:var(--line-2);position:relative;transition:calc(.15s * var(--anim-mult,1))}
.tm-root .sw.on{background:var(--green)}.tm-root .sw i{position:absolute;top:2px;left:2px;width:17px;height:17px;border-radius:50%;background:#fff;transition:calc(.15s * var(--anim-mult,1))}.tm-root .sw.on i{left:19px}

.tm-root .ai{background:linear-gradient(135deg,var(--panel),var(--panel-2));border:1px solid var(--line-2);border-radius:var(--r);padding:19px}
.tm-root .ai .ah{display:flex;align-items:center;gap:10px;margin-bottom:6px}.tm-root .ai .ah b{font-size:15px}
.tm-root .ai .spark{width:30px;height:30px;border-radius:8px;background:linear-gradient(135deg,var(--purple),var(--blue));display:grid;place-items:center;font-size:15px}
.tm-root .ai p{color:var(--ink-3);font-size:12.5px;margin-bottom:13px}
.tm-root .ai .acts{display:flex;gap:9px;flex-wrap:wrap}
.tm-root .ai textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);border-radius:8px;color:var(--ink);padding:11px;font-size:13px;resize:vertical;min-height:90px;margin-bottom:11px}
.tm-root .ai .out{margin-top:13px;background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:13px;font-size:13px;color:var(--ink-2);white-space:pre-wrap;display:none}
.tm-root .ai .out.show{display:block}

.tm-root .ov{position:fixed;inset:0;background:rgba(8,9,11,.62);backdrop-filter:blur(3px);display:none;place-items:center;z-index:50;padding:20px}
.tm-root .ov.show{display:grid}
.tm-root .modal{background:var(--panel);border:1px solid var(--line-2);border-radius:14px;width:100%;max-width:560px;padding:24px;max-height:90vh;overflow-y:auto}
.tm-root .modal h3{font-size:17px;margin-bottom:16px}
.tm-root .fld{margin-bottom:12px}
.tm-root .fld label{display:block;font-size:11px;font-weight:600;color:var(--ink-2);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.tm-root .fld input, .tm-root .fld select, .tm-root .fld textarea{width:100%;background:var(--bg);border:1px solid var(--line-2);color:var(--ink);border-radius:7px;padding:9px 11px;font-size:13.5px}
.tm-root .fld textarea{resize:vertical;min-height:60px}
.tm-root .mrow{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.tm-root .mrow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:11px}
.tm-root .mactions{display:flex;gap:9px;justify-content:flex-end;margin-top:16px}
.tm-root .empty{text-align:center;color:var(--ink-3);padding:48px 20px;font-size:13.5px}
.tm-root .detail-row{display:flex;justify-content:space-between;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px}
.tm-root .detail-row span:first-child{color:var(--ink-3)}
@media(max-width:900px){.tm-root .app{grid-template-columns:1fr}.tm-root .side{display:none}.tm-root .board{grid-template-columns:1fr 1fr}.tm-root .mrow, .tm-root .mrow3{grid-template-columns:1fr}}

/* ══ Тематические заглушки — на переменных темы, для 6 разделов бокового меню ══ */
.stub-dot{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:6px}
.stub-kanban{display:grid;grid-auto-flow:column;grid-auto-columns:260px;gap:14px;overflow-x:auto;padding-bottom:8px}
.stub-kanban-col{background:var(--c-ink3);border:1px solid var(--c-border);border-radius:var(--r);padding:10px;display:flex;flex-direction:column;gap:8px}
.stub-kanban-col-head{font-size:12.5px;font-weight:700;color:var(--c-bright);display:flex;align-items:center;padding:4px 2px}
.stub-kanban-count{margin-left:auto;background:var(--c-ink2);border-radius:10px;padding:1px 8px;font-size:11px;color:var(--c-muted)}
.stub-kanban-cards{display:flex;flex-direction:column;gap:8px}
.stub-deal-card{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r-sm);padding:10px;
  animation:stubFadeIn calc(.35s * var(--anim-mult,1)) ease both;transition:transform calc(.15s * var(--anim-mult,1)),box-shadow calc(.15s * var(--anim-mult,1))}
.stub-deal-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:var(--c-admin)}
@keyframes stubFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.stub-deal-top{display:flex;justify-content:space-between;align-items:baseline;gap:6px;font-size:13px;color:var(--c-bright)}
.stub-deal-sum{font-size:11.5px;font-weight:700;color:var(--c-admin)}
.stub-deal-sub{font-size:11px;color:var(--c-muted);margin:3px 0}
.stub-deal-note{font-size:11.5px;color:var(--c-text);line-height:1.4}

.stub-estimate-layout{display:flex;gap:16px;align-items:flex-start}
.stub-folder-list{flex:0 0 220px;display:flex;flex-direction:column;gap:4px}
.stub-folder{display:flex;justify-content:space-between;padding:9px 12px;border-radius:var(--r-sm);font-size:13px;color:var(--c-text);cursor:pointer;transition:background calc(.1s * var(--anim-mult,1))}
.stub-folder span{color:var(--c-muted);font-size:11.5px}
.stub-folder:hover{background:var(--c-ink3)}
.stub-folder.active{background:var(--c-admin-g);color:var(--c-bright);font-weight:700}
.stub-estimate-rows{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.stub-search{width:100%;padding:10px 14px;border:1px solid var(--c-border);border-radius:var(--r-sm);background:var(--c-ink2);color:var(--c-bright);font-size:13px;box-sizing:border-box}
.stub-estimate-row{display:flex;align-items:center;gap:12px;background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);padding:12px 14px;
  transition:border-color calc(.12s * var(--anim-mult,1))}
.stub-estimate-row:hover{border-color:var(--c-admin)}
.stub-estimate-icon{width:32px;height:32px;border-radius:8px;background:var(--c-ink3);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--c-muted)}
.stub-estimate-meta{font-size:11px;color:var(--c-muted);margin-top:3px}
.stub-estimate-actions{display:flex;gap:6px;flex-shrink:0}
.stub-mini-btn{padding:7px 12px;border-radius:var(--r-sm);border:1px solid var(--c-border);background:var(--c-ink3);color:var(--c-text);font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap}
.stub-mini-btn:hover{border-color:var(--c-admin)}
.stub-mini-btn.danger{color:#c0453f}
.stub-mini-btn.primary{background:var(--c-admin);color:#fff;border-color:transparent}

.stub-config-top{display:grid;grid-template-columns:1.2fr 1.2fr 1fr;gap:14px;margin-bottom:16px}
.stub-photo-card{height:180px;border-radius:var(--r);background:linear-gradient(135deg,var(--gold-g),var(--c-ink3));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;font-size:40px;color:var(--c-muted);border:1px solid var(--c-border)}
.stub-photo-card span{font-size:12px;font-weight:600;color:var(--c-muted)}
.stub-char-card{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);padding:14px}
.stub-char-title{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:var(--c-muted);margin-bottom:10px}
.stub-char-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--c-border);font-size:13px;color:var(--c-text)}
.stub-char-row:last-child{border-bottom:none}
.stub-config-bottom{display:grid;grid-template-columns:1fr 280px;gap:16px}
.stub-config-sections{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);overflow:hidden}
.stub-config-section-row{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--c-border);font-size:13.5px;color:var(--c-bright);cursor:pointer}
.stub-config-section-row:last-child{border-bottom:none}
.stub-config-section-row:hover{background:var(--c-ink3)}
.stub-config-total{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);padding:16px;height:fit-content}
.stub-config-total-label{font-size:11px;color:var(--c-muted);text-transform:uppercase;font-weight:700}
.stub-config-total-sum{font-size:26px;font-weight:800;color:var(--c-bright);margin:4px 0}

.stub-autocalc-layout{display:grid;grid-template-columns:220px 1fr 220px;gap:14px}
.stub-autocalc-panel{background:var(--c-ink2);border:1px solid var(--c-border);border-radius:var(--r);padding:14px}
.stub-autocalc-section{padding:9px 10px;border-radius:var(--r-sm);font-size:12.5px;color:var(--c-text);margin-bottom:3px;cursor:pointer}
.stub-autocalc-section:hover{background:var(--c-ink3)}
.stub-autocalc-section.active{background:var(--c-admin-g);color:var(--c-bright);font-weight:700}
.stub-toggle-pair{display:flex;border:1px solid var(--c-border);border-radius:20px;padding:2px;background:var(--c-ink3)}
.stub-toggle-pair button{flex:1;border:none;background:none;padding:7px;border-radius:16px;font-size:11.5px;color:var(--c-text);cursor:pointer}
.stub-toggle-pair button.active{background:var(--c-admin);color:#fff}
.stub-autocalc-canvas{background:var(--c-ink3);border:1px solid var(--c-border);border-radius:var(--r);display:flex;align-items:center;justify-content:center;position:relative;min-height:280px}
.stub-autocalc-svg{width:80%;height:auto}
.stub-draw-anim{stroke-dasharray:840;stroke-dashoffset:840;animation:stubDrawLine calc(1.6s * var(--anim-mult,1)) ease forwards}
@keyframes stubDrawLine{to{stroke-dashoffset:0}}
.stub-autocalc-badge{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);background:var(--c-ink2);border:1px solid var(--c-border);border-radius:20px;padding:6px 14px;font-size:11px;color:var(--c-muted)}

.stub-margin-bar{display:inline-block;width:60px;height:6px;border-radius:4px;background:var(--c-ink3);overflow:hidden;margin-right:8px;vertical-align:middle}
.stub-margin-fill{height:100%;background:var(--c-admin);border-radius:4px;transition:width calc(.6s * var(--anim-mult,1)) ease}
.stub-status-badge{padding:3px 10px;border-radius:20px;background:var(--c-admin-g);color:var(--c-admin-d);font-size:11px;font-weight:700}
.stub-tag{display:inline-block;background:var(--c-ink3);color:var(--c-muted);font-size:10.5px;padding:2px 7px;border-radius:5px;margin-right:4px}
.custom-tooltip{
  position:fixed;transform:translate(-50%,-100%);z-index:999;pointer-events:none;
  background:var(--c-bright);color:var(--c-ink2);font-size:11.5px;font-weight:600;line-height:1.3;
  padding:6px 10px;border-radius:6px;white-space:nowrap;max-width:260px;white-space:normal;
  opacity:0;transition:opacity calc(.12s * var(--anim-mult,1));box-shadow:var(--shadow-md);
}
.custom-tooltip.show{opacity:1}
.custom-tooltip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--c-bright)}


body {
  background: var(--content-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.main, .content {
  background: var(--content-bg);
  color: var(--c-text);
}

.sidebar {
  background: linear-gradient(180deg, var(--sb-bg-1) 0%, var(--sb-bg-2) 100%);
  border-right: 1px solid var(--sb-border);
}

.sb-brand-name {
  color: var(--sb-bright);
}

.sb-brand-caption {
  color: var(--sb-muted);
}

.sb-section-label {
  color: var(--sb-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .6px;
  padding: 12px 14px 4px;
}

.sb-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  color: var(--sb-text);
  border-radius: 8px;
  cursor: pointer;
  margin: 2px 8px;
  transition: all .14s ease;
}

.sb-item:hover {
  background: rgba(214, 164, 55, .12);
  color: var(--sb-bright);
}

.sb-item.active {
  background: rgba(214, 164, 55, .2);
  color: var(--gold);
  font-weight: 700;
}

.sb-item-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: currentColor;
}

.sb-item-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  display: block;
}

.p-card {
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

.p-card:hover {
  border-color: var(--gold);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}

.p-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.p-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--c-blue-g);
  color: var(--gold);
}

.p-card-icon svg {
  width: 24px;
  height: 24px;
  stroke: currentColor;
  display: block;
}

.p-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-bright);
  margin-bottom: 6px;
}

.p-card-desc {
  font-size: 12.5px;
  color: var(--c-muted);
  line-height: 1.45;
  flex: 1;
}

.p-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px solid var(--c-border);
}

.p-card-domain {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--c-muted);
}

.p-card-arrow {
  color: var(--gold);
  font-weight: 700;
  font-size: 16px;
}

.home-head h2,
.settings-hero h2,
.home-title-row h2 {
  color: var(--c-bright);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
}

.grid-label {
  color: var(--c-muted);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  font-size: 11.5px;
  margin: 20px 0 12px;
}

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin: 18px 0;
}

.stat-card {
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: 10px;
  padding: 14px 18px;
}

.stat-card .num {
  font-size: 24px;
  font-weight: 800;
  color: var(--gold);
}

.stat-card .lbl {
  font-size: 12px;
  color: var(--c-muted);
  margin-top: 4px;
}

.platform-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}

.btn-ok {
  background: var(--gold);
  color: var(--gold-contrast);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  cursor: pointer;
  transition: all .15s ease;
}

.btn-ok:hover {
  background: var(--gold-d);
}

.btn-cancel {
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  color: var(--c-text);
  border-radius: 8px;
  padding: 9px 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.btn-cancel:hover {
  background: var(--c-ink3);
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

.admin-tab {
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  color: var(--c-muted);
  padding: 8px 18px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s ease;
}

.admin-tab:hover {
  background: var(--c-ink3);
  color: var(--c-bright);
}

.admin-tab.active {
  background: var(--gold);
  color: var(--gold-contrast);
  border-color: var(--gold-d);
  font-weight: 700;
}

#settingsBody {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 16px;
  width: 100%;
  box-sizing: border-box;
}

.settings-section {
  background: var(--c-ink);
  border: 1px solid var(--c-border);
  border-radius: 12px;
  padding: 18px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.settings-section-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.settings-section-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--c-blue-g);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.settings-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-bright);
  word-break: break-word;
}

.settings-section-desc {
  font-size: 11.5px;
  color: var(--c-muted);
  margin-top: 2px;
  line-height: 1.4;
  word-break: break-word;
}

.settings-section input,
.settings-section select {
  width: 100%;
  box-sizing: border-box;
  background: var(--c-ink2);
  border: 1px solid var(--c-border);
  border-radius: 7px;
  padding: 8px 10px;
  color: var(--c-text);
  font-size: 12px;
}

.theme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.theme-card {
  padding: 8px;
  border-radius: 8px;
  background: var(--c-ink2);
  border: 1px solid var(--c-border);
  cursor: pointer;
  transition: all .15s ease;
}

.theme-card.active {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-g);
}

.theme-card-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--c-text);
  margin-top: 6px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.theme-swatch-strip {
  display: flex;
  height: 20px;
  border-radius: 4px;
  overflow: hidden;
}

.theme-swatch-strip span {
  flex: 1;
  height: 100%;
}

.embedded-module-container {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 40px);
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--c-ink);
  border: 1px solid var(--c-border);
}

.embedded-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 18px;
  background: var(--sb-bg-1);
  border-bottom: 1px solid var(--sb-border);
  flex-shrink: 0;
}

.embedded-module-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--sb-bright);
}

.embedded-module-sub {
  font-size: 11px;
  color: var(--sb-muted);
}

.embedded-frame-wrapper {
  flex: 1;
  width: 100%;
  height: 100%;
  position: relative;
  background: #ffffff;
}

.hub-embedded-frame {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
}

#contentWrap.is-platform #content {
  padding: 0 !important;
  margin: 0 !important;
  max-width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

.embedded-module-container {
  display: flex !important;
  flex-direction: column !important;
  height: 100vh !important;
  width: 100% !important;
  border-radius: 0 !important;
  border: none !important;
  overflow: hidden !important;
  background: #120B05 !important;
}

.embedded-module-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  height: 38px !important;
  padding: 0 14px !important;
  background: var(--sb-bg-1, #2A190D) !important;
  border-bottom: 1px solid var(--sb-border, #4B3019) !important;
  flex-shrink: 0 !important;
  box-sizing: border-box !important;
}

.embedded-module-title-group {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.embedded-module-icon {
  width: 20px !important;
  height: 20px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--gold, #D6A437) !important;
}

.embedded-module-icon svg {
  width: 16px !important;
  height: 16px !important;
}

.embedded-module-title {
  font-size: 13px !important;
  font-weight: 700 !important;
  color: var(--sb-bright, #FFF3DC) !important;
}

.embedded-module-badge {
  font-size: 11px !important;
  color: var(--sb-muted, #A88B6B) !important;
  background: rgba(255, 255, 255, .05) !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
}

.embedded-module-actions {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}

.embed-mini-btn {
  background: rgba(255, 255, 255, .06) !important;
  border: 1px solid var(--sb-border, #4B3019) !important;
  color: var(--sb-bright, #FFF3DC) !important;
  padding: 4px 10px !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  border-radius: 6px !important;
  cursor: pointer !important;
  transition: all .12s ease !important;
}

.embed-mini-btn:hover {
  background: rgba(214, 164, 55, .2) !important;
  color: #FFF !important;
  border-color: var(--gold, #D6A437) !important;
}

.embed-close-btn:hover {
  background: rgba(220, 53, 69, .2) !important;
  border-color: #dc3545 !important;
  color: #ff8585 !important;
}

.embedded-frame-wrapper {
  flex: 1 !important;
  width: 100% !important;
  height: calc(100vh - 38px) !important;
  position: relative !important;
  background: #ffffff !important;
}

.hub-embedded-frame {
  width: 100% !important;
  height: 100% !important;
  border: none !important;
  outline: none !important;
}

.password-field-wrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}
.password-field-wrap input {
  width: 100% !important;
  padding-right: 38px !important;
}
.password-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--c-muted);
  font-size: 15px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  user-select: none;
  z-index: 2;
}
.password-toggle-btn:hover {
  color: var(--c-bright);
}


/* ══════════════════════════════════════════════════════════
   EMBEDDED MODULE CONTAINER & IFRAME (SPA MODE)
══════════════════════════════════════════════════════════ */
.embedded-module-container {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 40px);
  background: var(--content-bg, #1e1b18);
  border-radius: 12px;
  border: 1px solid var(--c-border, rgba(214, 164, 55, 0.15));
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.embedded-module-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--c-ink, #25221d);
  border-bottom: 1px solid var(--c-border, rgba(214, 164, 55, 0.12));
  flex-shrink: 0;
  gap: 12px;
  min-height: 46px;
  box-sizing: border-box;
}

.embedded-module-title-group {
  display: flex;
  align-items: center;
  gap: 10px;
}

.embedded-module-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.embedded-module-icon svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  display: block;
}

.embedded-module-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--c-bright, #23180D);
}

.embedded-module-badge {
  font-size: 10.5px;
  padding: 2px 7px;
  border-radius: 5px;
  background: rgba(214, 164, 55, 0.15);
  color: var(--gold, #d4a853);
  font-family: var(--mono, monospace);
}

.embedded-module-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.embed-mini-btn {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 6px;
  border: 1px solid var(--c-border, rgba(0,0,0,0.15));
  background: var(--c-ink2, #ffffff);
  color: var(--c-text, #23180D);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s ease;
}

.embed-mini-btn:hover {
  background: rgba(214, 164, 55, 0.18);
  border-color: var(--gold, #d4a853);
}

.embed-close-btn:hover {
  background: rgba(220, 53, 69, 0.15);
  border-color: #dc3545;
  color: #dc3545;
}

.embedded-frame-wrapper {
  flex: 1;
  width: 100%;
  height: calc(100vh - 100px);
  position: relative;
  background: #111;
  overflow: hidden;
}

.hub-embedded-frame {
  width: 100%;
  height: 100%;
  min-height: calc(100vh - 100px);
  border: none;
  display: block;
}



/* ══════════════════════════════════════════════════════════
   SETTINGS / ACCOUNT LAYOUT & PASSWORD TOGGLE FIXES
══════════════════════════════════════════════════════════ */
.settings-grid-layout {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 20px;
  align-items: start;
  margin-top: 16px;
}

@media (max-width: 1024px) {
  .settings-grid-layout {
    grid-template-columns: 1fr;
  }
}

.settings-full-width {
  grid-column: 1 / -1;
}

.settings-section {
  background: var(--c-ink, #ffffff);
  border: 1px solid var(--c-border, #e0cda8);
  border-radius: var(--r, 12px);
  padding: 20px 22px;
  margin-bottom: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}

.settings-section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-border, #e0cda8);
}

.settings-section-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(214, 164, 55, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.settings-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--c-bright, #23180D);
}

.settings-section-desc {
  font-size: 12px;
  color: var(--c-muted, #5C4331);
  margin-top: 2px;
}

/* Password field wrapper with embedded toggle button */
.password-field-wrap {
  position: relative !important;
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
}

.password-field-wrap input {
  width: 100% !important;
  padding-right: 40px !important;
  box-sizing: border-box !important;
}

.password-toggle-btn {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 4px 6px !important;
  font-size: 15px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--c-muted, #5C4331) !important;
  opacity: 0.65 !important;
  transition: opacity 0.15s ease, transform 0.15s ease !important;
  z-index: 5 !important;
}

.password-toggle-btn:hover {
  opacity: 1 !important;
  transform: translateY(-50%) scale(1.15) !important;
}