const ONBOARDING_STYLES = `
    .onboarding-card {
      margin-bottom: 20px;
      border-color: var(--border-glow);
      box-shadow: var(--shadow-soft);
    }
    .onboarding-card h3 { margin-top: 0; font-size: 1.2rem; }
    .onboarding-card > .lead { font-size: 0.95rem; color: var(--text-soft); }
    .onboarding-progress {
      height: 8px; border-radius: 4px; background: var(--bg-elevated);
      overflow: hidden; margin: 14px 0 18px;
    }
    .onboarding-progress-bar {
      height: 100%; background: var(--accent);
      border-radius: 4px; transition: width 0.35s ease;
    }
    .onboarding-steps {
      display: flex; flex-wrap: nowrap; gap: 8px; margin-bottom: 18px;
      overflow-x: auto; -webkit-overflow-scrolling: touch;
      padding-bottom: 4px;
    }
    .onboarding-step-pill { flex: 0 0 auto; white-space: nowrap; }
    .onboarding-step-pill {
      font-size: 0.875rem; padding: 8px 14px; border-radius: 8px;
      border: 1px solid var(--border); background: var(--graphite);
      color: var(--muted); cursor: pointer; font-weight: 600;
    }
    .onboarding-step-pill:disabled {
      opacity: 0.45; cursor: not-allowed;
    }
    .onboarding-step-pill.done { border-color: #22c55e66; color: #86efac; background: #14532d33; }
    .onboarding-step-pill.active {
      border-color: var(--accent); color: var(--text);
      background: var(--accent-soft);
    }
    .onboarding-why {
      margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius);
      border-left: 3px solid var(--accent);
      background: var(--bg-elevated); font-size: 0.92rem;
      color: var(--text-soft); line-height: 1.55;
    }
    .onboarding-panel-inner { padding-top: 4px; }
    .onboarding-panel-inner p { font-size: 0.92rem; color: var(--muted); margin: 0 0 12px; }
    .onboarding-guide {
      display: grid; gap: 12px; margin-bottom: 16px;
    }
    .onboarding-guide-card {
      padding: 14px 16px; border-radius: 12px;
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
    }
    .onboarding-guide-card strong { display: block; margin-bottom: 6px; color: var(--text-soft); }
    .onboarding-checklist {
      margin: 0; padding-left: 20px; color: var(--muted); font-size: 0.9rem; line-height: 1.55;
    }
    .onboarding-checklist li { margin: 3px 0; }
    .onboarding-locked-note {
      padding: 12px 14px; border-radius: var(--radius);
      border: 1px solid #f59e0b66; background: #451a0333; color: #fbbf24;
      font-size: 0.9rem; line-height: 1.5;
    }
    .onboarding-preview {
      margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
      border: 1px solid var(--border-glow); background: #02061744;
      font-size: 0.88rem; color: var(--muted);
    }
    .onboarding-preview ul { margin: 8px 0 0; padding-left: 18px; }
    .onboarding-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 12px; }
    .onboarding-row label { flex: 1; min-width: 180px; margin: 0; }
    .onboarding-locked .cabinet-sidebar-nav .cabinet-nav-item:not([data-tab="home"]):not([data-tab="profile"]),
    .onboarding-locked .cabinet-panel,
    .onboarding-locked .home-kpi-strip,
    .onboarding-locked .home-dash-mid .home-widget:not(.home-dash-simulator),
    .onboarding-locked .home-dash-bottom,
    .onboarding-locked .home-widget-status {
      display: none !important;
    }
    .onboarding-locked .home-dash-simulator {
      display: block !important;
      grid-column: 1 / -1;
    }
    .onboarding-locked #panel-home,
    .onboarding-locked #panel-profile { display: block !important; }
    .onboarding-locked .onboarding-card { margin-bottom: 0; }
    .onboarding-complete-card {
      max-width: 640px; margin-bottom: 16px; border-color: #22c55e66;
    }
    .onboarding-complete-card h3 { margin-top: 0; color: #86efac; }
    .onboarding-complete-list {
      margin: 12px 0 0; padding-left: 0; list-style: none;
      display: grid; gap: 8px;
    }
    .onboarding-complete-list li {
      padding: 8px 12px; border-radius: 8px; background: var(--bg-elevated);
      font-size: 0.9rem; color: var(--text-soft);
    }
    .onboarding-complete-list li.ok::before { content: "вњ“ "; color: #86efac; }
    .onboarding-complete-list li.warn::before { content: "в—‹ "; color: #fbbf24; }
    .simulate-result {
      margin-top: 12px; padding: 12px 14px; border-radius: var(--radius);
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
      font-size: 0.9rem; white-space: pre-wrap; line-height: 1.5;
    }
    .simulate-result.escalate { border-color: #f59e0b66; }
    .next-steps-card { margin-bottom: 20px; border-color: #22c55e44; }
    .next-steps-card h3 { margin-top: 0; }
    .next-step-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
    .next-step-item {
      padding: 12px 14px; border-radius: var(--radius);
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
    }
    .next-step-item h4 { margin: 0 0 6px; font-size: 0.95rem; color: var(--text-soft); }
    .next-step-item p { margin: 0 0 10px; font-size: 0.88rem; color: var(--muted); line-height: 1.5; }
    .next-step-item .btn { font-size: 0.85rem; padding: 8px 14px; }
    .warehouse-toolbar {
      display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start;
      justify-content: space-between; margin-bottom: 16px;
    }
    .warehouse-stats {
      display: flex; flex-wrap: wrap; gap: 10px; flex: 1; min-width: 280px;
    }
    .warehouse-stat-pill {
      padding: 10px 14px; border-radius: 12px; border: 1px solid var(--border-glow);
      background: var(--bg-elevated); min-width: 110px;
    }
    .warehouse-stat-pill .label {
      display: block; font-size: 0.72rem; text-transform: uppercase;
      letter-spacing: 0.05em; color: var(--muted); margin-bottom: 4px;
    }
    .warehouse-stat-pill .value {
      font-size: 1.15rem; font-weight: 700; color: var(--text-soft);
      font-variant-numeric: tabular-nums;
    }
    .warehouse-stat-pill.ok .value { color: #86efac; }
    .warehouse-stat-pill.warn .value { color: #fcd34d; }
    .warehouse-stat-pill.bad .value { color: #fca5a5; }
    .warehouse-controls {
      display: flex; flex-wrap: wrap; gap: 12px; align-items: center;
    }
    .warehouse-search {
      min-width: 220px; flex: 1;
    }
    .ai-mode-card {
      display: flex; align-items: center; gap: 12px; padding: 10px 14px;
      border-radius: 12px; border: 1px solid var(--border-glow);
      background: var(--bg-elevated);
    }
    .ai-mode-card .ai-mode-label { font-size: 0.88rem; font-weight: 650; color: var(--text-soft); }
    .ai-mode-card .ai-mode-hint { font-size: 0.75rem; color: var(--muted); display: block; margin-top: 2px; }
    .toggle-switch {
      position: relative; width: 52px; height: 28px; border-radius: 99px;
      border: 1px solid var(--border-glow); background: #334155;
      cursor: pointer; padding: 0; flex-shrink: 0; transition: background 0.25s ease;
    }
    .toggle-switch.on { background: linear-gradient(90deg, var(--accent), var(--neon)); border-color: var(--border-glow); }
    .toggle-switch:disabled { opacity: 0.45; cursor: not-allowed; }
    .toggle-knob {
      position: absolute; top: 3px; left: 3px; width: 20px; height: 20px;
      border-radius: 50%; background: #fff; transition: transform 0.25s ease;
      box-shadow: 0 2px 6px #00000044;
    }
    .toggle-switch.on .toggle-knob { transform: translateX(24px); }
    .stock-badge {
      display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
      border-radius: 999px; font-size: 0.78rem; font-weight: 650;
      white-space: nowrap;
    }
    .stock-badge.in_stock { background: #14532d55; color: #86efac; border: 1px solid #22c55e44; }
    .stock-badge.low_stock { background: #78350f55; color: #fcd34d; border: 1px solid #f59e0b44; }
    .stock-badge.out_of_stock { background: #7f1d1d55; color: #fca5a5; border: 1px solid #ef444444; }
    .warehouse-table .cell-brand { color: var(--muted); font-size: 0.88rem; }
    .warehouse-table .cell-sku { font-family: ui-monospace, monospace; font-size: 0.8rem; color: #94a3b8; }
    .warehouse-table .cell-stock-num { font-weight: 700; font-variant-numeric: tabular-nums; }
    .warehouse-table .cell-stock-num.zero { color: #fca5a5; }
    .warehouse-table .cell-stock-num.low { color: #fcd34d; }
    .warehouse-empty {
      padding: 32px 20px; text-align: center; color: var(--muted);
    }
    .import-box { margin-top: 20px; }
    .intel-section { margin-bottom: 20px; }
    .intel-section-head {
      display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px;
      margin-bottom: 12px;
    }
    .intel-section-head h3 {
      margin: 0; font-size: 1rem; font-weight: 650; color: var(--text-soft);
    }
    .intel-section-head p { margin: 0; font-size: 0.85rem; color: var(--muted); }
    .intel-grid {
      display: grid; gap: 12px;
      grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    }
    .intel-card {
      padding: 14px 16px; border-radius: 12px;
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
      font-size: 0.88rem; line-height: 1.55;
    }
    .intel-card h4 {
      margin: 0 0 8px; font-size: 0.82rem; text-transform: uppercase;
      letter-spacing: 0.04em; color: var(--muted); font-weight: 650;
    }
    .intel-card ul { margin: 0; padding-left: 18px; }
    .intel-card li { margin-bottom: 6px; }
    .intel-card.empty {
      border-style: dashed; color: var(--muted); text-align: center; padding: 20px 16px;
    }
    .intel-card.accent-blue { border-color: var(--border-glow); background: var(--accent-soft); }
    .intel-card.accent-green { border-color: #22c55e44; background: #14532d18; }
    .intel-card.accent-amber { border-color: #f59e0b44; background: #78350f18; }
    .intel-meta { font-size: 0.82rem; color: var(--muted); margin-top: 6px; }
    .dash-stat-grid .card.stat-link {
      cursor: pointer; transition: border-color 0.2s ease, transform 0.15s ease;
    }
    .dash-stat-grid .card.stat-link:hover {
      border-color: var(--border-glow); transform: translateY(-1px);
    }
    .price-cell .price-old {
      display: block; font-size: 0.78rem; color: var(--muted);
      text-decoration: line-through; font-weight: 500;
    }
    .price-cell .price-current { font-weight: 700; }
    .price-badge {
      display: inline-block; margin-left: 6px; padding: 2px 7px;
      border-radius: 6px; font-size: 0.72rem; font-weight: 700;
      background: #7f1d1d55; color: #fca5a5; border: 1px solid #ef444444;
      vertical-align: middle;
    }
    .ai-simulator-card textarea {
      width: 100%; min-height: 72px; padding: 10px 12px;
      border-radius: 10px; border: 1px solid var(--border-glow);
      background: var(--graphite); color: var(--text); font: inherit; resize: vertical;
    }
    .simulate-meta { margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
    .linkish-btn {
      background: none; border: none; padding: 0; color: var(--accent);
      font: inherit; cursor: pointer; text-decoration: underline;
    }
    .linkish-btn:hover { color: var(--neon); }
    .period-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .period-tab {
      font-size: 0.85rem; padding: 8px 14px; border-radius: 99px;
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
      color: var(--muted); cursor: pointer;
    }
    .period-tab.active { border-color: var(--accent); color: var(--text-soft); background: var(--accent-soft); }
    .period-custom { display: none; flex-wrap: wrap; gap: 10px; align-items: end; margin-bottom: 14px; }
    .period-custom.show { display: flex; }
    .period-custom label { font-size: 0.82rem; color: var(--muted); margin: 0; }
    .period-custom input { padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border-glow); background: var(--graphite); color: var(--text); font: inherit; }
    .rec-section { margin-top: 24px; }
    .rec-section h3 { margin: 0 0 12px; font-size: 1rem; color: var(--text-soft); }
    .rec-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
    @media (min-width: 720px) { .rec-grid { grid-template-columns: repeat(2, 1fr); } }
    .rec-card {
      padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border-glow);
      background: var(--bg-elevated); font-size: 0.88rem; line-height: 1.55;
    }
    .rec-card h4 { margin: 0 0 8px; font-size: 0.92rem; color: var(--text-soft); }
    .rec-card p { margin: 0; color: var(--muted); }
    .rec-card.success { border-color: #22c55e44; }
    .rec-card.warning { border-color: #f59e0b44; }
    .rec-card.info { border-color: var(--border-glow); }
    .intel-card .intel-body { margin: 0; color: var(--text-soft); line-height: 1.55; }
    .intel-card .intel-detail { margin-top: 8px; font-size: 0.82rem; color: var(--muted); }
    .btn-mini {
      font-size: 0.78rem; padding: 5px 10px; border-radius: 8px;
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
      color: var(--text-soft); cursor: pointer;
    }
    .btn-mini:hover { border-color: var(--accent); color: var(--text); }
    .discount-edit-card { margin-bottom: 16px; border-color: #f59e0b44; }
    .discount-edit-card label { display: block; margin: 0 0 10px; font-size: 0.88rem; }
    .discount-edit-card input[type="number"] {
      width: 100%; max-width: 200px;
    }
    .discount-flag { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 0.88rem; }
    .confirm-modal {
      position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
      padding: 20px;
    }
    .confirm-modal[hidden] { display: none !important; }
    .confirm-modal-backdrop {
      position: absolute; inset: 0; background: #000000aa; backdrop-filter: blur(4px);
    }
    .confirm-modal-box {
      position: relative; width: min(420px, 100%); padding: 22px 20px;
      border-radius: var(--radius); border: 1px solid var(--border-glow);
      background: linear-gradient(160deg, var(--surface), var(--graphite));
      box-shadow: 0 12px 40px #00000066;
    }
    .confirm-modal-box h3 { margin: 0 0 10px; font-size: 1.05rem; }
    .confirm-modal-box p { margin: 0 0 18px; color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
    .confirm-modal-actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; }
    .confirm-modal-actions .btn-danger {
      background: linear-gradient(180deg, #ef4444, #dc2626); border: none; color: #fff;
    }
    .toast-host {
      position: fixed; right: 16px; bottom: 16px; z-index: 3000;
      display: flex; flex-direction: column; gap: 10px; max-width: min(360px, calc(100vw - 32px));
      pointer-events: none;
    }
    .toast {
      padding: 14px 16px; border-radius: 12px; border: 1px solid var(--border);
      background: var(--surface); color: var(--text-soft);
      box-shadow: 0 12px 32px #00000055; font-size: 0.92rem; line-height: 1.45;
      pointer-events: auto; animation: toast-in 0.28s var(--ease-out);
    }
    .toast.success { border-color: #22c55e55; background: linear-gradient(160deg, #0f1f17, var(--surface)); }
    .toast.error { border-color: #ef444455; background: linear-gradient(160deg, #1f0f0f, var(--surface)); }
    .toast.info { border-color: var(--border-glow); background: linear-gradient(160deg, var(--bg-elevated), var(--surface)); }
    @keyframes toast-in {
      from { opacity: 0; transform: translateY(8px); }
      to { opacity: 1; transform: translateY(0); }
    }
    .tg-confirm-modal .confirm-modal-box { width: min(440px, 100%); }
    .tg-confirm-modal .tg-pulse {
      display: inline-flex; align-items: center; gap: 8px;
      margin: 0 0 14px; padding: 10px 12px; border-radius: 10px;
      background: #229ed922; border: 1px solid #229ed944;
      color: #bae6fd; font-size: 0.88rem;
    }
    .tg-confirm-modal .tg-pulse::before {
      content: ""; width: 8px; height: 8px; border-radius: 50%;
      background: #229ed9; animation: tg-pulse 1.2s ease-in-out infinite;
    }
    @keyframes tg-pulse {
      0%, 100% { opacity: 0.4; transform: scale(0.9); }
      50% { opacity: 1; transform: scale(1.1); }
    }
    .settings-city-row {
      display: flex; flex-wrap: wrap; gap: 10px; align-items: end; margin-top: 12px;
    }
    .settings-city-row label {
      flex: 1; min-width: 220px; margin: 0;
      display: grid; gap: 6px; font-size: 0.875rem; font-weight: 600; color: var(--text-soft);
    }
    .settings-roi-form {
      max-width: 520px; margin: 12px 0 0; gap: 14px;
    }
    @media (min-width: 640px) {
      .settings-roi-form {
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: end;
      }
    }
    .settings-roi-field { display: grid; gap: 6px; min-width: 0; }
    .settings-roi-field > label {
      font-size: 0.875rem; font-weight: 600; color: var(--text-soft);
    }
    .field-suffix-wrap { position: relative; display: flex; align-items: center; }
    .field-suffix-wrap .field-input { padding-right: 58px; }
    .field-suffix {
      position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
      font-size: 0.88rem; font-weight: 600; color: var(--muted); pointer-events: none;
    }
    .settings-roi-actions { display: flex; align-items: end; }
    .settings-roi-form .form-msg { grid-column: 1 / -1; margin: 0; }
    @media (max-width: 639px) {
      .settings-roi-actions .btn { width: 100%; }
    }
    .field-input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
    .field-input[type="number"]::-webkit-outer-spin-button,
    .field-input[type="number"]::-webkit-inner-spin-button {
      -webkit-appearance: none; margin: 0;
    }
    .city-combobox { position: relative; width: 100%; }
    .city-combobox-list {
      position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 30;
      max-height: 220px; overflow-y: auto; margin: 0; padding: 6px 0; list-style: none;
      border-radius: 8px; border: 1px solid var(--border-glow);
      background: var(--surface); box-shadow: 0 8px 24px #00000055;
    }
    .city-combobox-list[hidden] { display: none !important; }
    .city-combobox-list li {
      padding: 8px 12px; font-size: 0.9rem; color: var(--text-soft); cursor: pointer;
    }
    .city-combobox-list li:hover, .city-combobox-list li.active {
      background: var(--bg-elevated); color: var(--text);
    }
    .city-combobox-empty { color: var(--muted-2); cursor: default; }
    .city-combobox-empty:hover { background: transparent; }
    .warehouse-search-meta {
      font-size: 0.82rem; color: var(--muted); margin: 0 0 10px; min-height: 1.2em;
    }
    .digest-preview-box {
      margin-top: 12px; padding: 14px 16px; border-radius: 12px;
      border: 1px solid var(--border-glow); background: var(--bg-elevated);
      font-size: 0.88rem; line-height: 1.55; color: var(--text-soft);
      max-height: 320px; overflow-y: auto;
    }
    .digest-preview-box.loading { color: var(--muted); font-style: italic; }
    .digest-preview-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
    .readonly-banner {
      margin: 0 0 16px; padding: 12px 16px; border-radius: 12px;
      border: 1px solid #f59e0b66; background: #f59e0b14; font-size: 0.9rem; line-height: 1.5;
    }
    .readonly-banner strong { color: #fbbf24; }
    .diag-overall { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-size: 0.92rem; font-weight: 600; }
    .diag-overall.ok { color: #22c55e; }
    .diag-overall.warn { color: #f59e0b; }
    .diag-overall.error { color: #ef4444; }
    .diag-problem {
      padding: 12px 14px; margin-bottom: 10px; border-radius: 10px;
      border-left: 3px solid var(--border-glow); background: var(--bg-elevated);
    }
    .diag-problem.warn { border-left-color: #f59e0b; }
    .diag-problem.error { border-left-color: #ef4444; }
    .diag-problem h4 { margin: 0 0 6px; font-size: 0.92rem; }
    .diag-problem p { margin: 0 0 6px; font-size: 0.85rem; color: var(--muted); }
    .diag-problem .diag-action { font-size: 0.82rem; color: var(--text-soft); }
    .diag-event {
      padding: 10px 0; border-bottom: 1px solid var(--border-glow); font-size: 0.85rem;
    }
    .diag-event:last-child { border-bottom: none; }
    .diag-event-meta { font-size: 0.78rem; color: var(--muted); margin-top: 4px; }
    .severity-info { color: #94a3b8; }
    .severity-warn { color: #f59e0b; }
    .severity-error { color: #ef4444; }
    @media (max-width: 639px) {
      .cabinet-nav-item { font-size: 0.82rem; padding: 9px 10px; }
      .analytics-toolbar { flex-direction: column; align-items: stretch !important; }
      .analytics-toolbar .btn { width: 100%; justify-content: center; }
      .warehouse-toolbar { flex-direction: column; }
      .warehouse-controls { width: 100%; flex-direction: column; align-items: stretch; }
      .warehouse-search { width: 100%; min-width: 0; }
      .ai-mode-card { width: 100%; justify-content: space-between; }
      .settings-city-row { flex-direction: column; align-items: stretch; }
      .settings-city-row .btn { width: 100%; }
      .period-tabs { gap: 6px; }
      .period-tab { font-size: 0.78rem; padding: 7px 11px; }
      .period-custom { flex-direction: column; align-items: stretch; }
      .crm-kpi-grid { grid-template-columns: 1fr !important; }
      .onboarding-row { flex-direction: column; align-items: stretch; }
      .intel-grid { grid-template-columns: 1fr; }