/* TV2 shell visual layer — extracted from static/shell.js STYLES literal
 * to load BEFORE first paint and eliminate flash of v1 layout.
 * shell.js builds rail/topbar DOM but no longer injects this CSS.
 * Stays canonical — keep in sync with shell.js if it ever rebuilds.
 */
    :root {
      --tv2-bg-deep:   #0e0f12;
      --tv2-glass-fill:rgba(255,255,255,0.05);
      --tv2-glass-dark:rgba(0,0,0,0.38);
      --tv2-glass-strong:rgba(255,255,255,0.09);
      --tv2-glass-hover:rgba(255,255,255,0.10);
      --tv2-border-std:rgba(255,255,255,0.10);
      --tv2-border-dim:rgba(255,255,255,0.06);
      --tv2-text:      rgba(255,255,255,0.95);
      --tv2-text2:     rgba(255,255,255,0.72);
      --tv2-muted:     rgba(255,255,255,0.42);
      --tv2-muted-hi:  rgba(255,255,255,0.58);
      --tv2-success:   #30d158;
      --tv2-danger:    #ff453a;
      --tv2-lime:      #d6ff5e;
      --tv2-lime2:     #aef0a0;
      --tv2-r-lg:      22px;
      --tv2-r-pill:    100px;
      --tv2-blur-card: blur(28px) saturate(180%) brightness(112%);
      --tv2-shadow-glass:
        inset 0 1px 0 rgba(255,255,255,0.10),
        0 6px 18px rgba(0,0,0,0.32);
    }

    /* Tv2 shell active: hide the legacy horizontal header */
    body.tv2-shell .header { display: none !important; }
    body.tv2-shell {
      padding-left: 106px;
      padding-top: 12px;
      /* Fire-gradient background — orange/yellow glow on the lower-left
         that fades through deep red into black on the right. Matches the
         user-provided reference image; pure CSS so no asset is shipped. */
      background-color: #0a0a0c;
      background-image:
        radial-gradient(ellipse 28% 38% at 18% 78%, rgba(255,200,90,0.12) 0%, transparent 60%),
        radial-gradient(ellipse 45% 55% at 22% 55%, rgba(255,110,24,0.20) 0%, transparent 65%),
        linear-gradient(115deg, #2a0a06 0%, #120402 30%, #060101 55%, #000000 100%);
      background-attachment: fixed;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    body.tv2-shell .layout { height: auto; min-height: calc(100vh - 24px); background: transparent; }
    body.tv2-shell .layout main.main { padding: 0 12px 12px 12px; background: transparent; }

    /* ─── Left rail ─────────────────────────────────────────────────── */
    .tv2-rail {
      position: fixed; left: 12px; top: 12px; bottom: 12px;
      width: 90px; z-index: 250;
      background: var(--tv2-glass-dark);
      backdrop-filter: var(--tv2-blur-card);
      -webkit-backdrop-filter: var(--tv2-blur-card);
      border: 1px solid var(--tv2-border-dim);
      border-radius: var(--tv2-r-lg);
      padding: 10px 0;
      display: flex; flex-direction: column; align-items: center;
      gap: 6px;
      box-shadow: var(--tv2-shadow-glass);
    }
    .tv2-rail-btn {
      width: 50px; height: 50px;
      border: none; background: transparent;
      border-radius: 14px;
      color: var(--tv2-muted-hi);
      display: grid; place-items: center;
      transition: all .18s ease;
      cursor: pointer;
      position: relative;
    }
    .tv2-rail-btn svg { width: 22px; height: 22px; }
    .tv2-rail-btn:hover {
      background: var(--tv2-glass-strong);
      color: var(--tv2-text);
    }
    .tv2-rail-btn.active {
      background: transparent;
      color: #f59e0b;
      border: none;
    }
    .tv2-rail-btn.active::before {
      content: '';
      position: absolute;
      inset: -20px;
      border-radius: 50%;
      background: radial-gradient(circle, rgba(245,158,11,0.18) 0%, rgba(245,158,11,0.06) 50%, transparent 75%);
      filter: blur(6px);
      pointer-events: none;
      z-index: -1;
    }
    /* Tooltip on hover */
    .tv2-rail-btn::after {
      content: attr(data-label);
      position: absolute; left: calc(100% + 10px); top: 50%;
      transform: translateY(-50%);
      background: rgba(0,0,0,0.85); color: #fff;
      padding: 5px 9px; border-radius: 6px;
      font-size: 11.5px; font-weight: 500; white-space: nowrap;
      opacity: 0; pointer-events: none;
      transition: opacity .15s;
      box-shadow: 0 4px 12px rgba(0,0,0,0.4);
    }
    .tv2-rail-btn:hover::after { opacity: 1; }
    .tv2-rail-spacer { flex: 1; }

    /* ─── Topbar ────────────────────────────────────────────────────── */
    .tv2-topbar {
      display: flex; align-items: center; gap: 14px;
      padding: 10px 18px;
      background: transparent;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
      border: none;
      border-radius: 0;
      box-shadow: none;
      margin: 8px 0 0 0;
      position: sticky; top: 8px;
      z-index: 100;
    }
    #tv2-meta { display: none !important; }
    .tv2-tb-left { display: flex; align-items: center; gap: 14px; min-width: 0; flex: 1 1 auto; }
    .tv2-tb-domain {
      display: flex; align-items: center; gap: 10px;
      font-weight: 600; font-size: 14px; color: var(--tv2-text);
      min-width: 0;
    }
    .tv2-tb-domain .tv2-fav {
      width: 28px; height: 28px; border-radius: 50%;
      background: linear-gradient(135deg,#f59e0b,#d97706);
      display: grid; place-items: center;
      font-size: 10px; color: #1a0800; font-weight: 800;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
                  0 2px 8px rgba(245,158,11,0.35);
      flex-shrink: 0;
    }
    .tv2-tb-domain > span {
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .tv2-tb-meta {
      font-size: 12px; color: var(--tv2-muted-hi);
      display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
      min-width: 0;
    }
    .tv2-tb-meta .tv2-sep { color: var(--tv2-muted); }
    .tv2-tb-meta .tv2-live {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--tv2-success); box-shadow: 0 0 8px var(--tv2-success);
    }
    .tv2-tb-right {
      margin-left: auto;
      display: flex; align-items: center; gap: 8px;
      flex-shrink: 0;
    }

    /* Period tabs */
    .tv2-period-tabs {
      display: inline-flex; padding: 3px;
      background: rgba(0,0,0,0.30);
      border-radius: var(--tv2-r-pill);
      border: 1px solid var(--tv2-border-std);
    }
    .tv2-period-tabs button {
      border: none; background: transparent;
      color: var(--tv2-muted-hi);
      padding: 5px 14px; border-radius: var(--tv2-r-pill);
      font-size: 12px; font-weight: 500;
      transition: all .18s; cursor: pointer;
    }
    .tv2-period-tabs button:hover {
      color: var(--tv2-text);
    }
    .tv2-period-tabs button.active {
      background: linear-gradient(145deg, #f59e0b, #d97706);
      color: #15171a; font-weight: 600;
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35),
                  0 2px 8px rgba(245,158,11,0.35);
    }

    /* Custom-period popover (anchors under the «Произв.» tab).
       Hidden by default via [hidden] (HTML5 attribute, NOT a layout
       override) — flips on by removing the attribute. No !important. */
    .tv2-period-tabs-wrap { position: relative; display: inline-flex; }
    .tv2-custom-pop {
      position: absolute;
      top: calc(100% + 6px);
      right: 0;
      z-index: 60;
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 8px 10px;
      background: var(--tv2-glass-dark);
      backdrop-filter: var(--tv2-blur-card);
      -webkit-backdrop-filter: var(--tv2-blur-card);
      border: 1px solid var(--tv2-border-std);
      border-radius: 12px;
      box-shadow: var(--tv2-shadow-glass);
      white-space: nowrap;
    }
    .tv2-custom-pop[hidden] { display: none; }
    .tv2-custom-pop input[type="date"] {
      background: var(--tv2-glass-input, rgba(255,255,255,0.08));
      border: 1px solid var(--tv2-border-std);
      border-radius: 8px;
      color: var(--tv2-text);
      padding: 6px 8px;
      font-size: 12px;
      color-scheme: dark;
      font-family: inherit;
    }
    .tv2-custom-sep { color: var(--tv2-muted); font-size: 12px; }
    .tv2-custom-pop #tv2-custom-apply {
      height: 30px;
      padding: 0 12px;
      background: linear-gradient(145deg, var(--tv2-lime), var(--tv2-lime2));
      border: 0;
      border-radius: 8px;
      color: #15171a;
      font-weight: 600;
      font-size: 12px;
      cursor: pointer;
    }

    /* Topbar icon buttons */
    .tv2-icon-btn {
      width: 34px; height: 34px;
      border-radius: 50%;
      background: var(--tv2-glass-strong);
      border: 1px solid var(--tv2-border-std);
      display: grid; place-items: center;
      color: var(--tv2-text2);
      transition: background .18s; cursor: pointer;
      position: relative;
    }
    .tv2-icon-btn:hover { background: var(--tv2-glass-hover); color: var(--tv2-text); }
    .tv2-icon-btn.avatar {
      background: linear-gradient(135deg, #f59e0b, #d97706);
      color: #1a0800; font-weight: 700; font-size: 11.5px;
      border: none;
      box-shadow: 0 2px 8px rgba(245,158,11,0.35);
    }
    .tv2-icon-btn .tv2-dot {
      position: absolute; top: 5px; right: 7px;
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--tv2-danger);
      box-shadow: 0 0 6px var(--tv2-danger);
    }
    /* Notification badge */
    .tv2-dot {
      position: absolute; top: 4px; right: 4px;
      width: 8px; height: 8px; border-radius: 50%;
      background: #ef4444;
      box-shadow: 0 0 0 2px var(--tv2-bg-deep);
      pointer-events: none;
    }
    .tv2-bell-count {
      position: absolute; top: 2px; right: 2px;
      min-width: 16px; height: 16px; border-radius: 8px;
      background: #ef4444; color: #fff;
      font-size: 9px; font-weight: 700;
      display: flex; align-items: center; justify-content: center;
      padding: 0 3px; pointer-events: none;
      box-shadow: 0 0 0 2px var(--tv2-bg-deep);
      line-height: 1;
    }

    /* Notification panel */
    .tv2-notif-panel {
      position: fixed; top: 60px; right: 12px;
      width: 340px; max-height: 520px;
      background: rgba(18,12,5,0.97);
      backdrop-filter: blur(28px) saturate(180%);
      -webkit-backdrop-filter: blur(28px) saturate(180%);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 18px;
      box-shadow: 0 24px 60px rgba(0,0,0,0.60), 0 0 0 1px rgba(245,158,11,0.08);
      z-index: 9999;
      display: flex; flex-direction: column;
      overflow: hidden;
      transform-origin: top right;
      transition: opacity .18s ease, transform .18s ease;
    }
    .tv2-notif-panel.hidden {
      opacity: 0; transform: scale(0.94) translateY(-8px); pointer-events: none;
    }
    .tv2-notif-header {
      display: flex; align-items: center; justify-content: space-between;
      padding: 14px 16px 12px;
      border-bottom: 1px solid rgba(255,255,255,0.07);
      flex-shrink: 0;
    }
    .tv2-notif-title {
      font-size: 13px; font-weight: 700; color: rgba(255,255,255,0.88);
      letter-spacing: -0.2px;
    }
    .tv2-notif-mark-all {
      font-size: 11px; color: rgba(245,158,11,0.75); background: none;
      border: none; cursor: pointer; padding: 2px 6px; border-radius: 5px;
      transition: color .15s, background .15s;
    }
    .tv2-notif-mark-all:hover { color: #f59e0b; background: rgba(245,158,11,0.10); }
    .tv2-notif-list {
      overflow-y: auto; flex: 1;
      scrollbar-width: thin;
      scrollbar-color: rgba(245,158,11,0.20) transparent;
    }
    .tv2-notif-list::-webkit-scrollbar { width: 4px; }
    .tv2-notif-list::-webkit-scrollbar-thumb { background: rgba(245,158,11,0.20); border-radius: 4px; }
    .tv2-notif-item {
      display: flex; gap: 10px; align-items: flex-start;
      padding: 12px 16px;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      cursor: pointer; transition: background .15s;
      position: relative;
    }
    .tv2-notif-item:last-child { border-bottom: none; }
    .tv2-notif-item:hover { background: rgba(255,255,255,0.04); }
    .tv2-notif-item.unread { background: rgba(245,158,11,0.04); }
    .tv2-notif-item.unread::before {
      content: ''; position: absolute; left: 0; top: 0; bottom: 0;
      width: 3px; background: #f59e0b; border-radius: 0 2px 2px 0;
    }
    .tv2-notif-icon {
      width: 30px; height: 30px; border-radius: 50%;
      display: grid; place-items: center; flex-shrink: 0; font-size: 14px;
    }
    .tv2-notif-icon.info    { background: rgba(59,130,246,0.15); }
    .tv2-notif-icon.warn    { background: rgba(245,158,11,0.15); }
    .tv2-notif-icon.error   { background: rgba(239,68,68,0.15); }
    .tv2-notif-icon.success { background: rgba(34,197,94,0.15); }
    .tv2-notif-body { flex: 1; min-width: 0; }
    .tv2-notif-item-title {
      font-size: 12.5px; font-weight: 600;
      color: rgba(255,255,255,0.85); line-height: 1.35;
      margin-bottom: 2px;
    }
    .tv2-notif-item-body {
      font-size: 11.5px; color: rgba(255,255,255,0.48); line-height: 1.5;
    }
    .tv2-notif-time {
      font-size: 10px; color: rgba(255,255,255,0.28);
      white-space: nowrap; margin-top: 3px;
      flex-shrink: 0;
    }
    .tv2-notif-empty {
      padding: 40px 20px; text-align: center;
      color: rgba(255,255,255,0.30); font-size: 13px;
    }
    .tv2-notif-empty-icon { font-size: 32px; margin-bottom: 10px; opacity: 0.4; }

    /* Status indicator inline (legacy status-dot replacement) */
    .tv2-tb-status {
      font-size: 11.5px; color: var(--tv2-muted-hi);
      display: inline-flex; align-items: center; gap: 6px;
    }
    .tv2-tb-status .dot {
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--tv2-success); box-shadow: 0 0 6px var(--tv2-success);
    }
    .tv2-tb-status.bad .dot {
      background: var(--tv2-danger); box-shadow: 0 0 6px var(--tv2-danger);
    }

    /* Sidebar adjustments — slim it & remove the old period block */
    body.tv2-shell .sidebar {
      border-radius: var(--tv2-r-lg);
      margin: 0 0 12px 0;
      border-right: 0;
      border: 1px solid var(--tv2-border-std);
      box-shadow: var(--tv2-shadow-glass);
    }
    body.tv2-shell #sb-period { display: none !important; } /* period now in topbar */

    /* User menu — re-anchor to topbar position */
    body.tv2-shell #user-menu {
      top: calc(100% + 6px);
      right: 0;
    }

    /* ─── Page-single trims ─────────────────────────────────────────────
       Pure visibility hides.  NO layout / display overrides on inner
       elements — last attempt broke Metrika own state machine
       (display: grid on .metrika-kpis fought with the JS that sets
       inline styles when data arrives).  This time only display:none
       on whole sections we want gone. */
    /* ВАЖНО: hide-правила НЕ требуют .one-project-page класс. Иначе пока
       one-project.js не смонтировал Hero (renderSingleCharts → mountHero),
       большие графики успевают отрисоваться Chart.js'ом и вылазят flash'ем
       старого вида. Hero полностью заменяет эти метрики (sparklines в KPI),
       так что в v2 mode они не нужны никогда. */
    body.tv2-shell .charts-row    { display: none !important; }
    body.tv2-shell .eff-freq-block { display: none !important; }
    /* «Распределение позиций» — entire card hidden per user request.
       Duplicates the Hero card metrics (top-3 count + percentage). */
    body.tv2-shell #distribution-card { display: none !important; }

    /* Hide the legacy sidebar ONLY on /single (and only when its
       contents have been successfully adopted into the topbar). Other
       pages (Бенчмарк/Аудит/Скорость) still need their own sidebars,
       so we key on BOTH body classes — adoption + on-single. */
    body.tv2-shell.tv2-controls-adopted.tv2-on-single .layout > .sidebar {
      display: none !important;
    }
    /* Let the main column take the freed space when sidebar is hidden. */
    body.tv2-shell.tv2-controls-adopted.tv2-on-single .layout > main.main {
      grid-column: 1 / -1;
    }

    /* ─── Topbar control bar (project picker on /single) ──────────── */
    .tv2-controlbar {
      display: grid;
      grid-template-columns: minmax(180px, 1.4fr) repeat(3, minmax(120px, 1fr)) auto auto;
      gap: 8px;
      align-items: end;
      padding: 6px 0 14px;
      margin: 0;
      max-width: 1220px;
      width: 100%;
      align-self: center;
      margin-left: auto;
      margin-right: auto;
      background: transparent;
      border: none;
      box-shadow: none;
    }
    /* Meta pills moved into controlbar */
    .tv2-cb-meta { display: flex; align-items: flex-end; padding-bottom: 2px; }
    .tv2-controlbar .meta-bar {
      display: flex; flex-wrap: wrap; gap: 6px;
      background: transparent !important; border: none !important;
      padding: 0 !important; margin: 0 !important;
    }
    .tv2-controlbar .meta-pill {
      font-size: 10.5px; color: var(--tv2-muted); white-space: nowrap;
      background: transparent !important; backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
      border: none !important; border-radius: 0 !important;
      padding: 0 !important; box-shadow: none !important;
    }
    .tv2-controlbar .meta-pill span { color: var(--tv2-text2); font-weight: 500; }
    .tv2-cb-cell { display: flex; flex-direction: column; min-width: 0; }
    .tv2-cb-label {
      font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase;
      color: var(--tv2-muted); margin-bottom: 4px; font-weight: 600;
    }
    /* CustomSelect trigger inside controlbar */
    .tv2-controlbar .cs-wrap { width: 100%; }
    .tv2-controlbar .cs-trigger {
      height: 34px;
      padding: 0 10px;
      font-size: 12px;
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      backdrop-filter: none !important;
      -webkit-backdrop-filter: none !important;
    }
    .tv2-controlbar .cs-trigger:hover {
      background: rgba(255,255,255,0.05) !important;
    }
    .tv2-cb-actions { display: flex; align-items: end; gap: 6px; }
    .tv2-controlbar button.btn {
      height: 34px;
      padding: 0 14px;
      border-radius: 10px;
      font-size: 12px;
      font-weight: 600;
      white-space: nowrap;
    }
    @media (max-width: 900px) {
      .tv2-controlbar { grid-template-columns: 1fr 1fr; }
      .tv2-cb-actions { grid-column: span 2; }
    }
    .tv2-controlbar[hidden] { display: none; }

    /* «Топ поисковых запросов · трафик» — wraps #metrika-queries.
       «Цели и конверсии» — wraps #metrika-goals.
       Use :has() so we don't have to touch the existing markup. */
    body.tv2-shell .metrika-block:has(#metrika-queries) { display: none !important; }
    body.tv2-shell .metrika-block:has(#metrika-goals)   { display: none !important; }

    /* ─── AI card — red-wave surface (matches user-provided reference) ──
       Pure CSS approximation of the red-wave-on-black image: two wide
       elliptical reds (one upper-center, one lower-right) over a near-
       black base. Inner content (chat pill, templates, input) is
       untouched — only the OUTER surface (background + border + shadow)
       changes. No layout overrides, per gotchas.md. */
    body.tv2-shell .one-project-page #ai-section.ai-section {
      background-image:
        /* upper wave */
        radial-gradient(ellipse 32% 55% at 58% 18%, rgba(212,30,40,0.62) 0%, transparent 65%),
        radial-gradient(ellipse 22% 42% at 48% 38%, rgba(170,18,28,0.50) 0%, transparent 70%),
        /* lower-right wave */
        radial-gradient(ellipse 30% 55% at 78% 92%, rgba(212,30,40,0.62) 0%, transparent 65%),
        radial-gradient(ellipse 22% 38% at 68% 75%, rgba(170,18,28,0.45) 0%, transparent 70%);
      background-color: #050102;
      border: 1px solid rgba(255,90,90,0.14);
      border-radius: 22px;
      box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.06),
        0 6px 22px rgba(0,0,0,0.45),
        0 0 60px -10px rgba(220,30,40,0.22);
    }
    /* Greeting icon strip — hidden per user request (cleaner header). */
    body.tv2-shell .one-project-page .ai-chat-icon { display: none !important; }
    /* Slightly darken the inner pill so it sits on top of the dark base
       cleanly (otherwise the rgba(0,0,0,0.30) it inherits gets washed
       out on the red regions). One property only — background-color. */
    body.tv2-shell .one-project-page .ai-chat-input-pill {
      background-color: rgba(0,0,0,0.45);
    }

    /* Mobile responsiveness */
    @media (max-width: 720px) {
      body.tv2-shell { padding-left: 0; padding-top: 0; }
      .tv2-rail {
        position: static; width: 100%; height: auto;
        flex-direction: row; padding: 8px 12px; gap: 8px;
        border-radius: 0; margin: 0;
      }
      .tv2-rail-spacer { display: none; }
      .tv2-rail-btn::after { display: none; }
      .tv2-topbar {
        flex-wrap: wrap;
        margin: 8px;
      }
      .tv2-tb-meta { font-size: 11px; }
    }