/** Reference-video shell. Component styles live in the existing CRM plugin. */
.spcrm-suite {
    --spcrm-brand-primary: #1760ef;
    --spcrm-brand-primary-hover: #0f4ed0;
    --spcrm-brand-primary-soft: #e7efff;
    --spcrm-brand-primary-rgb: 23, 96, 239;
    --spcrm-bg: #eef2fb;
    --spcrm-text-primary: #202937;
    --spcrm-text-secondary: #596577;
    --spcrm-text-tertiary: #69768a;
    --spcrm-sidebar-width: 248px;
    --spcrm-sidebar-collapsed: 72px;
    --spcrm-topbar-height: 64px;
    --spcrm-bottomnav-height: 68px;
    --spcrm-sidebar-bg: #f8faff;
    --spcrm-sidebar-border: #e0e6f0;
    --spcrm-sidebar-text: #4c5a6f;
    --spcrm-sidebar-text-active: #244b94;
    --spcrm-sidebar-active-bg: #e5edff;
    --spcrm-sidebar-hover-bg: #edf2fb;
    --spcrm-topbar-bg: #fbfcff;
    --spcrm-topbar-border: #e4e9f1;
    --spcrm-bottomnav-bg: #ffffff;
    --spcrm-bottomnav-border: #e0e6f0;
    --spcrm-font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--spcrm-bg, #eef2fb);
}
[data-theme="dark"] .spcrm-suite {
    --spcrm-bg: #121c2c;
    --spcrm-text-primary: #edf3fc;
    --spcrm-text-secondary: #b8c6d9;
    --spcrm-text-tertiary: #9cacc2;
    --spcrm-sidebar-bg: #172437;
    --spcrm-sidebar-border: #33445d;
    --spcrm-sidebar-text: #b8c6d9;
    --spcrm-sidebar-text-active: #edf3fc;
    --spcrm-sidebar-active-bg: #253e62;
    --spcrm-sidebar-hover-bg: #21334b;
    --spcrm-topbar-bg: #1b293d;
    --spcrm-topbar-border: #33445d;
    --spcrm-bottomnav-bg: #1b293d;
    --spcrm-bottomnav-border: #33445d;
}
.spcrm-suite .spcrm-sidebar { transition: width .2s ease, transform .2s ease; }
.spcrm-suite.admin-bar .spcrm-sidebar { top: 32px; }
.spcrm-suite.admin-bar .spcrm-topbar { top: 32px; }
.spcrm-suite .spcrm-sidebar__header { min-height: 80px; height: auto; gap: 10px; padding: 16px 18px; border-color: var(--spcrm-sidebar-border); }
.spcrm-suite .spcrm-sidebar__logo { width: 36px; height: 36px; flex: 0 0 36px; border-radius: 11px; object-fit: contain; }
.spcrm-suite .spcrm-sidebar__logo-text { font-size: 15px; font-weight: 650; color: var(--spcrm-text-primary); letter-spacing: -.025em; white-space: normal; line-height: 1.25; }
.spcrm-suite .spcrm-nav { padding: 12px 12px 16px; flex: 1; }
.spcrm-suite .spcrm-sidebar__section-title { padding: 18px 12px 8px; font-size: 10px; color: var(--spcrm-text-tertiary); font-weight: 500; letter-spacing: .09em; border-top: 1px solid var(--spcrm-sidebar-border); margin: 12px 0 5px; }
.spcrm-suite .spcrm-sidebar__section-title:first-child { border-top: 0; margin-top: 0; padding-top: 4px; }
.spcrm-suite .spcrm-nav__item { border-radius: 999px; min-height: 42px; padding: 10px 12px; margin-bottom: 3px; gap: 11px; font-size: 13px; font-weight: 500; color: var(--spcrm-sidebar-text); border: 0; }
.spcrm-suite .spcrm-nav__item:hover { background: var(--spcrm-sidebar-hover-bg); color: var(--spcrm-text-primary); }
.spcrm-suite .spcrm-nav__item.is-active { background: var(--spcrm-sidebar-active-bg); color: var(--spcrm-sidebar-text-active); box-shadow: none; }
.spcrm-suite .spcrm-nav__item.is-active::before { display: none; }
.spcrm-suite .spcrm-nav__icon { width: 20px; opacity: .95; }
.spcrm-suite .spcrm-nav__badge { background: #d5254a; color: #fff; border-radius: 999px; font-size: 10px; min-width: 20px; height: 20px; }
.spcrm-suite .spcrm-sidebar__footer { padding: 12px; border-color: var(--spcrm-sidebar-border); background: var(--spcrm-sidebar-bg); }
.spcrm-suite .spcrm-sidebar__identity { padding: 12px 14px; background: var(--spcrm-sidebar-active-bg); border-radius: 14px; display: block; margin-bottom: 6px; }
.spcrm-suite .spcrm-sidebar__identity-name { font-size: 13px; font-weight: 600; color: var(--spcrm-text-primary); overflow-wrap: anywhere; }
.spcrm-suite .spcrm-sidebar__identity-role { font-size: 11px; color: var(--spcrm-text-secondary); margin-top: 3px; }
.spcrm-suite .spcrm-topbar { padding: 0 24px; gap: 18px; box-shadow: none; }
.spcrm-suite .spcrm-topbar__left { gap: 14px; min-width: 0; }
.spcrm-suite .spcrm-topbar__page-title { font-size: 14px; font-weight: 500; letter-spacing: -.01em; }
.spcrm-suite .spcrm-breadcrumbs { font-size: 10px; }
.spcrm-suite .spcrm-topbar__right { gap: 10px; margin-left: auto; min-width: 0; }
.spcrm-suite :is(.spcrm-topbar__icon-btn, .spcrm-topbar__hamburger, .spcrm-sidebar-collapse, .spcrm-search-toggle) { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--spcrm-text-secondary); border-radius: 50%; cursor: pointer; flex-shrink: 0; }
.spcrm-suite :is(.spcrm-topbar__icon-btn, .spcrm-sidebar-collapse, .spcrm-search-toggle):hover { background: var(--spcrm-brand-primary-soft); color: var(--spcrm-brand-primary); }
.spcrm-suite .spcrm-topbar__hamburger { display: none; }
.spcrm-suite .spcrm-topbar__search { width: clamp(180px, 23vw, 330px); }
.spcrm-suite .spcrm-topbar__search-input { height: 36px; border-radius: 999px; border: 1px solid var(--spcrm-border); background: var(--spcrm-surface); font-size: 12px; padding-left: 36px; }
.spcrm-suite .spcrm-topbar__search-icon { left: 12px; }
.spcrm-suite .spcrm-search-toggle { display: none; }
.spcrm-suite .spcrm-topbar__profile-trigger { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; }
.spcrm-suite .spcrm-topbar__avatar { border-radius: 50%; border: 1px solid var(--spcrm-border); }
.spcrm-suite .spcrm-topbar__avatar-fallback { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--spcrm-brand-primary-soft); color: var(--spcrm-text-primary); font-size: 11px; font-weight: 600; flex-shrink: 0; }
.spcrm-suite .spcrm-topbar__user-name { font-size: 12px; }
.spcrm-suite .spcrm-content { padding: 24px; background: var(--spcrm-bg); }
.spcrm-suite .spcrm-content .spcrm-content { padding: 0 !important; background: transparent; }
.spcrm-suite.admin-bar .spcrm-modal { z-index: 100001; }
.spcrm-suite .spcrm-bottom-nav { box-shadow: 0 -2px 18px rgba(26, 47, 83, .05); }
.spcrm-suite .spcrm-bottom-nav__list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }
.spcrm-suite .spcrm-bottom-nav__item { border: 0; background: transparent; color: var(--spcrm-text-secondary); font: inherit; cursor: pointer; min-width: 0; min-height: 60px; padding: 10px 4px 8px; gap: 4px; }
.spcrm-suite .spcrm-bottom-nav__item span { font-size: 10px; font-weight: 500; }
.spcrm-suite .spcrm-bottom-nav__item.is-active { color: var(--spcrm-brand-primary); }
.spcrm-suite .spcrm-bottom-nav__item.is-active::before { display: none; }
.spcrm-suite .spcrm-bottom-nav__item.is-active svg { background: var(--spcrm-brand-primary-soft); border-radius: 8px; box-shadow: 0 0 0 5px var(--spcrm-brand-primary-soft); }
.spcrm-suite .spcrm-auth { min-height: 100dvh; }
.spcrm-suite .spcrm-auth__brand-side { background: linear-gradient(145deg, #1642aa, #1760ef 65%, #397eff); }
.spcrm-suite .spcrm-auth__form-side { background: var(--spcrm-bg); }
.spcrm-suite .spcrm-auth__form-container { background: var(--spcrm-surface); border: 1px solid var(--spcrm-border); border-radius: 22px; padding: 32px; box-shadow: var(--spcrm-shadow-md); }
.spcrm-suite .spcrm-skip-link { position: fixed; top: -60px; left: 16px; z-index: 10000; padding: 12px 20px; border-radius: 10px; background: #1760ef; color: #fff; }
.spcrm-suite .spcrm-skip-link:focus { top: 12px; }
@media (min-width: 1024px) {
    .spcrm-suite .spcrm-app--collapsed .spcrm-sidebar { width: 72px; }
    .spcrm-suite .spcrm-app--collapsed .spcrm-main { margin-left: 72px; }
    .spcrm-suite .spcrm-app--collapsed :is(.spcrm-nav__label, .spcrm-sidebar__logo-text, .spcrm-sidebar__section-title, .spcrm-sidebar__identity, .spcrm-nav__badge) { display: none; }
    .spcrm-suite .spcrm-app--collapsed .spcrm-nav__item { justify-content: center; padding: 12px; }
    .spcrm-suite .spcrm-app--collapsed .spcrm-sidebar__header { padding: 20px 18px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .spcrm-suite .spcrm-sidebar-collapse { display: none; }
    .spcrm-suite .spcrm-sidebar:not(:hover):not(:focus-within) .spcrm-sidebar__identity { display: none; }
    .spcrm-suite .spcrm-sidebar:focus-within { width: var(--spcrm-sidebar-width); }
    .spcrm-suite .spcrm-sidebar:focus-within :is(.spcrm-nav__label, .spcrm-sidebar__logo-text, .spcrm-sidebar__section-title) { opacity: 1; visibility: visible; }
    .spcrm-suite .spcrm-topbar__user-name { display: none; }
}
@media (max-width: 767px) {
    .spcrm-suite .spcrm-main { margin-left: 0; }
    .spcrm-suite .spcrm-sidebar { width: min(300px, 88vw); padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .spcrm-suite .spcrm-sidebar__close { width: 44px; height: 44px; align-items: center; justify-content: center; }
    .spcrm-suite .spcrm-nav__item { min-height: 46px; }
    .spcrm-suite .spcrm-sidebar-collapse { display: none; }
    .spcrm-suite .spcrm-topbar { height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) 12px 0; gap: 8px; }
    .spcrm-suite .spcrm-topbar__hamburger { display: inline-flex; width: 40px; height: 44px; }
    .spcrm-suite .spcrm-topbar__left { gap: 6px; flex: 1; }
    .spcrm-suite .spcrm-topbar__page-title { font-size: 12px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .spcrm-suite .spcrm-topbar__right { gap: 2px; flex-shrink: 0; }
    .spcrm-suite :is(.spcrm-topbar__icon-btn, .spcrm-search-toggle) { width: 38px; min-height: 44px; }
    .spcrm-suite .spcrm-search-toggle { display: inline-flex; }
    .spcrm-suite .spcrm-topbar__search { display: none; position: absolute !important; left: 12px; right: 12px; top: calc(64px + env(safe-area-inset-top, 0px)); width: auto; padding: 10px; background: var(--spcrm-surface); border: 1px solid var(--spcrm-border); border-radius: 14px; box-shadow: var(--spcrm-shadow-lg); }
    .spcrm-suite .spcrm-app--search-open .spcrm-topbar__search { display: block; }
    .spcrm-suite .spcrm-topbar__search-input { height: 44px; font-size: 16px; }
    .spcrm-suite .spcrm-topbar__search > [x-show] { min-width: 0 !important; }
    .spcrm-suite .spcrm-topbar__search-icon { left: 23px; }
    .spcrm-suite .spcrm-topbar__profile-trigger { min-width: 38px; min-height: 44px; justify-content: center; }
    .spcrm-suite .spcrm-topbar__user-name { display: none; }
    .spcrm-suite .spcrm-breadcrumbs { display: none; }
    .spcrm-suite .spcrm-content { padding: 16px 12px calc(88px + env(safe-area-inset-bottom, 0px)); overflow-x: clip; }
    .spcrm-suite .spcrm-bottom-nav { display: flex; }
    .spcrm-suite .spcrm-auth__form-container { padding: 24px 20px; }
}
@media (max-width: 782px) {
    .spcrm-suite.admin-bar .spcrm-sidebar,
    .spcrm-suite.admin-bar .spcrm-topbar { top: 46px; }
}
@media (prefers-reduced-motion: reduce) {
    .spcrm-suite :is(.spcrm-sidebar, .spcrm-main, .spcrm-nav__item, .spcrm-topbar) { transition: none; }
}