/* MicHelper desktop shell. Mobile navigation remains owned by style.css. */
@media (min-width: 769px) {
  :root {
    --desktop-sidebar-expanded: 252px;
    --desktop-sidebar-collapsed: 72px;
    --desktop-shell-gap: 12px;
    --desktop-shell-ease: cubic-bezier(.22, 1, .36, 1);
  }

  html body:not(.auth-visible) #appScrollRoot.main-content {
    width: 100% !important;
    max-width: none !important;
    padding: 10px 18px 48px 0 !important;
  }

  html body:not(.auth-visible) #adminPanel.admin-card {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    /* The sidebar is position:fixed at viewport left:0, but #adminPanel starts ~32px
       in (app-wrapper 16px + app-sections 16px left padding). Subtract that offset so
       the reserved space stops double-counting it and the real gap between sidebar and
       content equals --desktop-shell-gap (was ~50px visually, now ~12px). */
    padding: 0 0 0 calc(var(--desktop-sidebar-expanded) + var(--desktop-shell-gap) - 32px) !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: padding-left .38s var(--desktop-shell-ease) !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel.admin-card {
    /* Same -32px offset compensation as the expanded rule above, so the gap
       between the collapsed rail and the content stays a consistent 12px and
       the content gains the full freed width. */
    padding-left: calc(var(--desktop-sidebar-collapsed) + var(--desktop-shell-gap) - 32px) !important;
  }

  /* One self-contained navigation island; old direct-child tab rules no longer apply. */
  html body:not(.auth-visible) #adminPanel > .desktop-sidebar-shell {
    position: fixed !important;
    top: 114px !important;
    bottom: 34px !important;
    left: 0 !important;
    z-index: 30 !important;
    display: flex !important;
    flex-direction: column !important;
    width: var(--desktop-sidebar-expanded) !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    padding: 8px !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.105) !important;
    border-left: 0 !important;
    border-radius: 0 18px 18px 0 !important;
    background: #111217 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    transition: width .38s var(--desktop-shell-ease) !important;
  }

  /* The navigation rail is an anchored part of the workspace. Hover may only
     change colour — never its position, size, or containing block. */
  html body:not(.auth-visible) #adminPanel,
  html body:not(.auth-visible) #adminPanel:hover {
    transform: none !important;
    translate: none !important;
  }

  html body:not(.auth-visible) #adminPanel > .desktop-sidebar-shell,
  html body:not(.auth-visible) #adminPanel > .desktop-sidebar-shell:hover,
  html body:not(.auth-visible) #adminPanel > .desktop-sidebar-shell:focus-within {
    top: 114px !important;
    right: auto !important;
    bottom: 34px !important;
    left: 0 !important;
    height: auto !important;
    max-height: none !important;
    margin: 0 !important;
    transform: none !important;
    translate: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel > .desktop-sidebar-shell {
    width: var(--desktop-sidebar-collapsed) !important;
  }

  html body.theme-light:not(.auth-visible) #adminPanel > .desktop-sidebar-shell {
    border-color: rgba(15,23,42,.1) !important;
    background: #fff !important;
    box-shadow: none !important;
  }

  #adminPanel .desktop-sidebar-brand {
    position: relative;
    display: flex;
    flex: 0 0 50px;
    align-items: center;
    gap: 12px;
    min-width: 0;
    padding: 3px 54px 9px 7px;
    border-bottom: 1px solid rgba(255,255,255,.075);
  }

  body.theme-light #adminPanel .desktop-sidebar-brand { border-bottom-color: rgba(15,23,42,.08); }

  /* v10.1.1: not rendered. This mark had been invisible for a long time —
     a global `[aria-hidden="true"]` rule was hiding the whole wrapper — and
     when that rule was corrected it reappeared, directly under the identical
     logo in the header. Two mic badges stacked on top of each other is not
     what the sidebar wants; the header already carries the brand. Hidden
     deliberately here rather than by leaving the aria-hidden bug in place,
     which was also blanking the AI marks and the report-card glyph. */
  #adminPanel .desktop-sidebar-brandmark {
    display: none !important;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    border: 1px solid rgba(96,165,250,.44);
    border-radius: 10px;
    background: linear-gradient(145deg, #4387ff, #2865e9);
    color: #fff;
    box-shadow: 0 9px 24px rgba(45,111,242,.3), inset 0 1px 0 rgba(255,255,255,.28);
    transition: transform .3s var(--desktop-shell-ease), opacity .2s ease, border-radius .3s ease;
  }

  #adminPanel .desktop-sidebar-brandmark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  #adminPanel .desktop-sidebar-brand .card-title {
    width: auto !important;
    max-width: 170px !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--ink) !important;
    font-size: 15px !important;
    font-weight: 760 !important;
    letter-spacing: -.02em !important;
    line-height: 1.15 !important;
    opacity: 1;
    white-space: nowrap !important;
    transform: translateX(0);
    transition: max-width .36s var(--desktop-shell-ease), opacity .2s ease, transform .36s var(--desktop-shell-ease) !important;
  }

  html body:not(.auth-visible) #adminPanel .admin-tabs-wrapper.no-arrows {
    position: relative !important;
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 4px 0 0 !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* Legacy horizontal-tab fade overlays were the dark "glow" at the left edge. */
  html body:not(.auth-visible) #adminPanel .admin-tabs-wrapper.no-arrows::before,
  html body:not(.auth-visible) #adminPanel .admin-tabs-wrapper.no-arrows::after {
    content: none !important;
    display: none !important;
    background: none !important;
    opacity: 0 !important;
  }

  html body:not(.auth-visible) #adminTabsScroll.admin-tabs {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    align-items: stretch !important;
    flex-wrap: nowrap !important;
    gap: 3px !important;
    width: 100% !important;
    min-width: 0 !important;
    max-height: none !important;
    margin: 0 !important;
    padding: 1px 3px 5px 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-color: rgba(148,163,184,.28) transparent;
    scrollbar-width: thin;
  }

  #adminTabsScroll.admin-tabs::-webkit-scrollbar { width: 4px; height: 4px; }
  #adminTabsScroll.admin-tabs::-webkit-scrollbar-track { background: rgba(148,163,184,.045); }
  #adminTabsScroll.admin-tabs::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(148,163,184,.46); }

  html body:not(.auth-visible) #adminPanel .admin-tab-btn {
    position: relative !important;
    display: flex !important;
    flex: 0 0 38px !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 8px !important;
    overflow: hidden !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    background: transparent !important;
    color: rgba(226,232,240,.62) !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    line-height: 1 !important;
    text-align: left !important;
    transform: translateZ(0) !important;
    transition: color .2s ease, background .2s ease, border-color .2s ease, transform .25s var(--desktop-shell-ease) !important;
  }

  html body:not(.auth-visible) #adminPanel .admin-tab-btn.desktop-merged-tab-source {
    display: none !important;
  }

  html body.theme-light:not(.auth-visible) #adminPanel .admin-tab-btn { color: rgba(51,65,85,.72) !important; }

  html body:not(.auth-visible) #adminPanel .admin-tab-btn::before {
    content: '';
    position: absolute;
    top: 8px;
    bottom: 8px;
    left: 0;
    width: 3px;
    border-radius: 0 99px 99px 0;
    background: #5592ff;
    opacity: 0;
    transform: scaleY(.35);
    transition: opacity .2s ease, transform .28s var(--desktop-shell-ease);
  }

  html body:not(.auth-visible) #adminPanel .admin-tab-btn:hover {
    border-color: transparent !important;
    background: transparent !important;
    color: rgba(226,232,240,.82) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html body.theme-light:not(.auth-visible) #adminPanel .admin-tab-btn:hover {
    border-color: transparent !important;
    background: transparent !important;
    color: #0f172a !important;
  }

  html body:not(.auth-visible) #adminPanel .admin-tab-btn.active,
  html body:not(.auth-visible) #adminPanel .admin-tab-btn.analytics-merged-active {
    border-color: rgba(75,139,255,.34) !important;
    background: linear-gradient(90deg, rgba(48,109,239,.22), rgba(48,109,239,.09)) !important;
    color: #77a8ff !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.055) !important;
  }

  html body:not(.auth-visible) #adminPanel .admin-tab-btn.active::before,
  html body:not(.auth-visible) #adminPanel .admin-tab-btn.analytics-merged-active::before {
    opacity: 1;
    transform: scaleY(1);
  }

  #adminPanel .desktop-nav-icon {
    display: block !important;
    flex: 0 0 30px !important;
    width: 30px !important;
    height: 30px !important;
    padding: 6px !important;
    overflow: visible !important;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 10px;
    background: rgba(255,255,255,.035);
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 1.75 !important;
    transition: transform .36s var(--desktop-shell-ease), background .2s ease, border-color .2s ease, box-shadow .2s ease !important;
  }

  body.theme-light #adminPanel .desktop-nav-icon {
    border-color: rgba(15,23,42,.075);
    background: rgba(15,23,42,.025);
  }

  #adminPanel .admin-tab-btn.active .desktop-nav-icon,
  #adminPanel .admin-tab-btn.analytics-merged-active .desktop-nav-icon {
    border-color: rgba(85,146,255,.36);
    background: rgba(59,125,255,.15);
    box-shadow: 0 7px 18px rgba(45,111,242,.16);
  }

  #adminPanel .desktop-nav-label {
    display: block !important;
    max-width: 170px;
    min-width: 0 !important;   /* flex child must be allowed to shrink past content width */
    overflow: hidden;
    opacity: 1;
    text-overflow: ellipsis;
    white-space: nowrap;
    transform: translateX(0);
    transition: max-width .36s var(--desktop-shell-ease), opacity .18s ease, transform .36s var(--desktop-shell-ease) !important;
  }

  #adminPanel .desktop-sidebar-toggle {
    /* v10.3.1: was pinned to top:8px inside a 50px row whose title is
       vertically centred, so the button sat high and read as crooked. */
    position: absolute !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    right: 12px !important;
    z-index: 4 !important;
    display: grid !important;
    flex: none !important;
    align-items: center !important;
    justify-content: center !important;
    width: 30px !important;
    min-width: 30px !important;
    height: 30px !important;
    min-height: 30px !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    border: 1px solid #2b2c31 !important;
    border-radius: 10px !important;
    background: #171719 !important;
    color: #9b9ca2 !important;
    font: inherit !important;
    cursor: pointer !important;
    box-shadow: none !important;
    transition: color .18s ease, background .18s ease, border-color .18s ease !important;
  }

  body.theme-light #adminPanel .desktop-sidebar-toggle {
    border-color: #d6d8dd !important;
    background: #f4f5f7 !important;
    color: #64676f !important;
    box-shadow: none !important;
  }

  #adminPanel .desktop-sidebar-toggle:hover {
    border-color: #3a3b41 !important;
    background: #1d1d20 !important;
    color: #c4c5ca !important;
    /* keep the centring transform — `none` here used to make the button jump
       down by half its height on hover */
    transform: translateY(-50%) !important;
    box-shadow: none !important;
  }

  /* A legacy global button sheen was drawing the bright strip to the left. */
  #adminPanel .desktop-sidebar-toggle::before,
  #adminPanel .desktop-sidebar-toggle::after {
    content: none !important;
    display: none !important;
    animation: none !important;
    background: none !important;
    box-shadow: none !important;
  }

  #adminPanel .desktop-sidebar-toggle-icon {
    display: grid !important;
    width: 100% !important;
    height: 100% !important;
    place-items: center !important;
    border-radius: inherit !important;
    background: transparent !important;
    transition: transform .46s var(--desktop-shell-ease);
  }

  #adminPanel .desktop-sidebar-toggle-icon svg {
    width: 18px !important;
    height: 18px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 1.75 !important;
    transform-origin: center !important;
    transition: none !important;
  }

  #adminPanel .desktop-sidebar-toggle-chevron {
    transform: rotate(0deg);
    transform-origin: 13px 12px;
    transition: transform .38s var(--desktop-shell-ease);
  }

  #adminPanel .analytics-kpi-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin: 0 0 12px;
    padding: 3px;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    background: #111217;
  }

  #adminPanel .analytics-kpi-switcher button {
    min-width: 112px;
    min-height: 38px;
    margin: 0;
    padding: 0 16px;
    border: 0;
    border-radius: 9px;
    background: transparent;
    color: rgba(226,232,240,.62);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: none;
  }

  #adminPanel .analytics-kpi-switcher button:hover {
    background: rgba(255,255,255,.045);
    color: rgba(226,232,240,.86);
    transform: none;
    box-shadow: none;
  }

  #adminPanel .analytics-kpi-switcher button.active {
    background: rgba(48,109,239,.18);
    color: #77a8ff;
  }

  body.theme-light #adminPanel .analytics-kpi-switcher {
    border-color: rgba(15,23,42,.1);
    background: #f8fafc;
  }

  body.theme-light #adminPanel .analytics-kpi-switcher button { color: rgba(51,65,85,.68); }
  body.theme-light #adminPanel .analytics-kpi-switcher button.active { background: rgba(37,99,235,.1); color: #2563c9; }

  /* Main content is a separate work surface and gently follows shell changes. */
  html body:not(.auth-visible) #adminPanel > .tab-content.active {
    display: block !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 0 32px !important;
    overflow: visible !important;
    background: transparent !important;
    animation: desktop-content-enter .28s var(--desktop-shell-ease) both;
  }

  #adminPanel .admin-block {
    border-color: var(--stroke, rgba(255,255,255,.085)) !important;
    border-radius: 12px !important;
    background: var(--surface, #14151c) !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
  }

  /* AI chat: one focused workspace instead of a stack of unrelated cards. */
  #adminPanel .ai-chat-block {
    position: relative !important;
    min-height: min(690px, calc(100dvh - 132px)) !important;
    padding: 22px !important;
    overflow: hidden !important;
    border-color: rgba(83,139,255,.18) !important;
    background:
      radial-gradient(circle at 93% 4%, rgba(55,113,235,.12), transparent 28%),
      var(--surface, #111319) !important;
  }

  #adminPanel .ai-chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
  }

  #adminPanel .ai-chat-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
  }

  #adminPanel .ai-chat-heading-icon,
  #adminPanel .ai-assistant-mark {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    border: 1px solid rgba(91,148,255,.3);
    border-radius: 13px;
    background: linear-gradient(145deg, rgba(54,124,255,.24), rgba(54,124,255,.08));
    color: #6fa4ff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.07);
  }

  #adminPanel .ai-chat-heading-icon svg,
  #adminPanel .ai-assistant-mark svg {
    width: 21px;
    height: 21px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  #adminPanel .ai-chat-header .admin-block-title {
    margin: 0 0 3px !important;
    font-size: 18px !important;
    letter-spacing: -.025em !important;
  }

  #adminPanel .ai-chat-header .admin-block-sub {
    margin: 0 !important;
    font-size: 12px !important;
  }

  #adminPanel .ai-chat-status {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    padding: 7px 10px;
    border: 1px solid rgba(52,211,153,.16);
    border-radius: 999px;
    background: rgba(16,185,129,.07);
    color: #74d9b3;
    font-size: 11px;
    font-weight: 700;
  }

  #adminPanel .ai-chat-status > span {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #34d399;
    box-shadow: 0 0 0 4px rgba(52,211,153,.1);
  }

  #adminPanel .ai-chat-wrapper {
    display: flex !important;
    min-height: min(590px, calc(100dvh - 230px)) !important;
    overflow: hidden !important;
    border: 1px solid rgba(255,255,255,.075) !important;
    border-radius: 12px !important;
    background: rgba(7,9,15,.56) !important;
  }

  #adminPanel .ai-chat-messages {
    min-height: 330px !important;
    max-height: none !important;
    padding: 22px !important;
    gap: 14px !important;
    scrollbar-width: thin;
  }

  #adminPanel .ai-chat-welcome {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    max-width: 720px;
    padding: 15px !important;
    border: 1px solid rgba(81,139,255,.16) !important;
    border-radius: 15px !important;
    background: linear-gradient(135deg, rgba(45,104,224,.14), rgba(45,104,224,.045)) !important;
  }

  #adminPanel .ai-assistant-mark {
    flex-basis: 34px;
    width: 34px;
    height: 34px;
    border-radius: 11px;
  }

  #adminPanel .ai-assistant-mark svg { width: 18px; height: 18px; }

  #adminPanel .ai-welcome-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: rgba(226,232,240,.68);
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  #adminPanel .ai-welcome-text strong { color: #f8fafc; font-size: 14px; }

  #adminPanel .ai-prompt-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 9px;
    width: min(720px, 100%);
  }

  #adminPanel .ai-prompt-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    min-height: 46px;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.075);
    border-radius: 12px;
    background: rgba(255,255,255,.025);
    color: rgba(226,232,240,.68);
    font: inherit;
    font-size: 11px;
    font-weight: 650;
    text-align: left;
    cursor: pointer;
    transition: transform .22s var(--desktop-shell-ease), color .2s ease, border-color .2s ease, background .2s ease;
  }

  #adminPanel .ai-prompt-chip:hover {
    border-color: rgba(82,144,255,.3);
    background: rgba(49,111,232,.1);
    color: #9abeff;
    transform: translateY(-2px);
  }

  #adminPanel .ai-prompt-chip svg {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
  }

  #adminPanel .ai-chat-input-area {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 42px 42px !important;
    gap: 7px !important;
    margin: 0 14px 12px !important;
    padding: 7px !important;
    border: 1px solid rgba(255,255,255,.1) !important;
    border-radius: 15px !important;
    background: rgba(255,255,255,.035) !important;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
  }

  #adminPanel .ai-chat-input-area:focus-within {
    border-color: rgba(80,143,255,.48) !important;
    background: rgba(59,130,246,.045) !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,.08) !important;
  }

  #adminPanel #aiChatInput {
    width: 100% !important;
    min-height: 42px !important;
    padding: 0 10px !important;
    border: 0 !important;
    border-radius: 10px !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #eef2ff !important;
    font-size: 13px !important;
  }

  #adminPanel #aiChatInput::placeholder { color: rgba(203,213,225,.4) !important; }

  #adminPanel #aiChatSendBtn,
  #adminPanel #aiChatClearBtn {
    display: grid !important;
    width: 42px !important;
    min-width: 42px !important;
    height: 42px !important;
    min-height: 42px !important;
    margin: 0 !important;
    padding: 0 !important;
    place-items: center !important;
    border-radius: 11px !important;
  }

  #adminPanel #aiChatSendBtn {
    border: 1px solid rgba(116,164,255,.42) !important;
    background: linear-gradient(145deg, #4388ff, #2e68dc) !important;
    color: #fff !important;
    box-shadow: 0 8px 20px rgba(45,105,222,.25) !important;
  }

  #adminPanel #aiChatClearBtn {
    border: 1px solid rgba(255,255,255,.075) !important;
    background: rgba(255,255,255,.04) !important;
    color: rgba(203,213,225,.55) !important;
  }

  #adminPanel #aiChatClearBtn:hover {
    border-color: rgba(248,113,113,.3) !important;
    background: rgba(239,68,68,.1) !important;
    color: #fca5a5 !important;
  }

  #adminPanel #aiChatSendBtn svg,
  #adminPanel #aiChatClearBtn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  #adminPanel .ai-chat-hints {
    padding: 0 14px 14px !important;
    border: 0 !important;
  }

  #adminPanel .ai-welcome-block {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 11px;
    border: 1px solid rgba(255,255,255,.065);
    border-radius: 12px;
    background: rgba(255,255,255,.022);
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: border-color .2s ease, background .2s ease;
  }

  #adminPanel .ai-welcome-block:hover {
    border-color: rgba(83,143,255,.24) !important;
    background: rgba(56,119,240,.07) !important;
  }

  #adminPanel .ai-welcome-info-icon {
    display: grid;
    flex: 0 0 27px;
    width: 27px;
    height: 27px;
    place-items: center;
    border-radius: 9px;
    background: rgba(59,130,246,.1);
    color: #70a5ff;
  }

  #adminPanel .ai-welcome-info-icon svg,
  #adminPanel .ai-welcome-arrow svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  #adminPanel .ai-welcome-copy { flex: 1; min-width: 0; }
  #adminPanel .ai-welcome-title { color: rgba(241,245,249,.82); font-size: 12px; font-weight: 700; }
  #adminPanel .ai-welcome-sub { margin-top: 1px; color: rgba(203,213,225,.42); font-size: 10px; }
  #adminPanel .ai-welcome-arrow { display: grid; color: rgba(203,213,225,.4); transition: transform .3s var(--desktop-shell-ease); }
  #adminPanel .ai-welcome-block.expanded .ai-welcome-arrow { transform: rotate(180deg) !important; }

  #adminPanel .ai-welcome-details {
    display: none;
    max-height: 0;
    margin-top: 0;
    padding: 0 14px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.06);
    border-radius: 12px;
    background: rgba(255,255,255,.018);
    color: rgba(203,213,225,.58);
    font-size: 11px;
    line-height: 1.55;
    opacity: 0;
    transition: max-height .3s var(--desktop-shell-ease), opacity .22s ease, padding .3s ease, margin .3s ease;
  }

  #adminPanel .ai-capabilities-title { margin-bottom: 7px; color: rgba(241,245,249,.8); font-weight: 700; }
  #adminPanel .ai-capabilities-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 18px; }
  #adminPanel .ai-capabilities-grid span::before { content: ''; display: inline-block; width: 5px; height: 5px; margin-right: 7px; border-radius: 50%; background: #5791fb; vertical-align: 1px; }

  body.theme-light #adminPanel .ai-chat-block {
    background: radial-gradient(circle at 93% 4%, rgba(59,130,246,.09), transparent 28%), #fff !important;
  }
  body.theme-light #adminPanel .ai-chat-wrapper { border-color: rgba(15,23,42,.09) !important; background: rgba(248,250,252,.8) !important; }
  body.theme-light #adminPanel .ai-chat-welcome { border-color: rgba(37,99,235,.13) !important; background: rgba(37,99,235,.055) !important; }
  body.theme-light #adminPanel .ai-welcome-text { color: rgba(51,65,85,.72); }
  body.theme-light #adminPanel .ai-welcome-text strong,
  body.theme-light #adminPanel #aiChatInput { color: #0f172a !important; }
  body.theme-light #adminPanel .ai-prompt-chip,
  body.theme-light #adminPanel .ai-welcome-block,
  body.theme-light #adminPanel .ai-welcome-details { border-color: rgba(15,23,42,.08); background: rgba(15,23,42,.025); color: rgba(51,65,85,.72); }
  body.theme-light #adminPanel .ai-chat-input-area { border-color: rgba(15,23,42,.1) !important; background: rgba(15,23,42,.025) !important; }
  body.theme-light #adminPanel .ai-welcome-title,
  body.theme-light #adminPanel .ai-capabilities-title { color: #1e293b; }
  body.theme-light #adminPanel .ai-welcome-sub { color: rgba(71,85,105,.6); }

  /* Dashboard: compact, consistent desktop hierarchy. */
  #adminPanel #tab-home .dashboard-container {
    width: 100%;
    max-width: none;
    padding: 4px 0 36px;
    gap: 18px;
  }

  /* v11.7.0: stacked header — the title block, then one toolbar row holding
     the date chip, the period presets and the scope filters together. The old
     3-column grid ("title+dates | presets | filters") left a dead middle gap
     on wide screens that read as broken layout. */
  #adminPanel #tab-home .dashboard-header {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    padding: 2px 0 16px;
    border-bottom: 1px solid rgba(148, 163, 184, .10);
    gap: 12px !important;
  }

  #adminPanel #tab-home .dashboard-header__controls {
    flex-wrap: nowrap;
  }

  #adminPanel #tab-home .dashboard-title {
    margin: 0 0 3px;
    font-size: 27px;
    line-height: 1.1;
    letter-spacing: -.025em;
  }

  #adminPanel #tab-home .dashboard-subtitle {
    color: rgba(203, 213, 225, .52);
    font-size: 12px;
    line-height: 1.35;
  }

  #adminPanel #dashScopeFilters {
    gap: 6px !important;
    flex-wrap: nowrap !important;
  }

  #adminPanel #dashScopeFilters button,
  #adminPanel #dashScopeFilters select {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(148, 163, 184, .10) !important;
    border-radius: 11px !important;
    background: #111318 !important;
    box-shadow: none !important;
    color: rgba(226, 232, 240, .76) !important;
    font-size: 12px !important;
    white-space: nowrap;
    transform: none !important;
  }

  #adminPanel #dashPeriodSelector {
    min-height: 40px;
    padding: 4px !important;
    gap: 2px !important;
    border: 1px solid rgba(148, 163, 184, .10) !important;
    border-radius: 12px !important;
    background: #111318 !important;
  }

  #adminPanel #dashPeriodSelector .dash-period-btn {
    min-height: 30px !important;
    height: 30px !important;
    padding: 0 11px !important;
    border-radius: 8px !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(203, 213, 225, .58) !important;
    font-size: 11px !important;
    transform: none !important;
  }

  #adminPanel #dashPeriodSelector .dash-period-btn.is-active {
    background: #3478ed !important;
    color: #fff !important;
  }

  /* v10.1.1: `repeat(4, …)` was hard-coded when the row held four tiles. The
     "Виручка ₴" tile was removed in v10.1.0 and the fourth column stayed
     behind, so three cards sat squeezed on the left with a dead 274px gap —
     a quarter of the row.
     Columns are generated per card now (`grid-auto-flow: column` +
     `grid-auto-columns`, no template), so the row always fills its width
     whatever the tile count, and removing another tile cannot reopen a hole.
     `auto-fit` is not usable here: with a `minmax(0, 1fr)` track it has no
     definite minimum to count against and still produced four columns. */
  #adminPanel #tab-home .dashboard-stats-row {
    display: grid !important;
    grid-template-columns: none !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    margin: 0 !important;
  }

  #adminPanel #tab-home .stat-card {
    display: grid !important;
    grid-template-columns: 44px minmax(0, 1fr) auto;
    align-items: center;
    min-width: 0;
    min-height: 104px !important;
    padding: 16px !important;
    gap: 12px !important;
    border: 1px solid rgba(148, 163, 184, .10) !important;
    border-radius: 12px !important;
    background: #111318 !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #adminPanel #tab-home .stat-card:hover {
    border-color: rgba(84, 142, 247, .24) !important;
    background: #12151b !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #adminPanel #tab-home .stat-icon {
    display: grid;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    place-items: center;
    border: 1px solid rgba(84, 142, 247, .22) !important;
    border-radius: 12px !important;
    background: rgba(52, 120, 237, .12) !important;
    box-shadow: none !important;
    color: #5791fb !important;
  }

  #adminPanel #tab-home .stat-icon svg { width: 21px; height: 21px; }
  #adminPanel #tab-home .stat-content { min-width: 0; }

  #adminPanel #tab-home .stat-value {
    max-width: 100%;
    overflow: hidden;
    color: #f8fafc !important;
    font-size: 27px !important;
    line-height: 1.05 !important;
    letter-spacing: -.025em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  #adminPanel #tab-home .stat-label {
    margin-top: 6px !important;
    overflow: hidden;
    color: rgba(203, 213, 225, .5) !important;
    font-size: 10px !important;
    font-weight: 650 !important;
    line-height: 1.25 !important;
    letter-spacing: .055em;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
  }

  #adminPanel #tab-home .stat-trend {
    align-self: center;
    min-width: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: rgba(148, 163, 184, .48) !important;
    font-size: 11px !important;
  }

  #adminPanel #tab-home .stat-trend:empty { display: none !important; }

  #adminPanel #dashBusinessPulse {
    grid-template-columns: minmax(190px, 220px) minmax(0, 1fr) !important;
    margin-top: 0 !important;
    padding: 18px !important;
    gap: 18px !important;
    border: 1px solid rgba(148, 163, 184, .10) !important;
    border-radius: 12px !important;
    background: #101218 !important;
    box-shadow: none !important;
  }

  #adminPanel #dashBusinessPulse .dash-donut-wrap {
    justify-content: center;
    gap: 8px !important;
    padding-right: 18px;
    border-right: 1px solid rgba(148, 163, 184, .09);
  }

  #adminPanel #dashBusinessPulse .dash-donut-wrap h4 {
    color: rgba(226, 232, 240, .82) !important;
    font-size: 12px !important;
    letter-spacing: .02em;
  }

  #adminPanel #dashDonut { width: 150px !important; height: 150px !important; }

  /* v11.7.0: exactly 5 metric tiles in ONE row next to the donut. */
  #adminPanel #dashBusinessPulse .dash-pulse-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  #adminPanel #dashBusinessPulse .pulse-card {
    display: flex;
    min-width: 0;
    min-height: 76px;
    padding: 11px 12px !important;
    flex-direction: column;
    justify-content: center;
    border: 1px solid rgba(148, 163, 184, .09) !important;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, .018) !important;
    box-shadow: none !important;
    transform: none !important;
  }

  #adminPanel #dashBusinessPulse .pulse-card:hover {
    border-color: rgba(84, 142, 247, .20) !important;
    background: rgba(84, 142, 247, .035) !important;
    transform: none !important;
  }

  #adminPanel #dashboardExtended { margin-top: 0 !important; }
  #adminPanel #dashboardExtended .dashboard-row { gap: 12px !important; }
  #adminPanel #dashboardExtended .dashboard-card {
    border: 1px solid rgba(148, 163, 184, .10) !important;
    border-radius: 12px !important;
    background: #111318 !important;
    box-shadow: none !important;
  }

  body.theme-light #adminPanel #dashScopeFilters button,
  body.theme-light #adminPanel #dashScopeFilters select,
  body.theme-light #adminPanel #dashPeriodSelector,
  body.theme-light #adminPanel #tab-home .stat-card,
  body.theme-light #adminPanel #dashBusinessPulse,
  body.theme-light #adminPanel #dashboardExtended .dashboard-card {
    border-color: rgba(15, 23, 42, .09) !important;
    background: #fff !important;
  }

  body.theme-light #adminPanel #tab-home .stat-card:hover { background: #f8fafc !important; }
  body.theme-light #adminPanel #tab-home .stat-value { color: #0f172a !important; }
  body.theme-light #adminPanel #tab-home .dashboard-subtitle,
  body.theme-light #adminPanel #tab-home .stat-label { color: rgba(51, 65, 85, .60) !important; }
  body.theme-light #adminPanel #dashBusinessPulse .dash-donut-wrap { border-right-color: rgba(15, 23, 42, .08); }
  body.theme-light #adminPanel #dashBusinessPulse .pulse-card { border-color: rgba(15, 23, 42, .08) !important; background: #f8fafc !important; }

  #adminPanel :where(input:not([type=checkbox]):not([type=radio]), select, textarea) {
    min-height: var(--control-h, 44px);
    border-radius: var(--radius-control, 12px);
  }

  /* Collapsed rail: labels disappear after icons settle, never via display:none. */
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-brand {
    justify-content: center;
    padding-right: 3px;
    padding-left: 3px;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-brandmark {
    opacity: 0;
    transform: scale(.82);
    pointer-events: none;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-brand .card-title,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-nav-label,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-toggle-label {
    max-width: 0 !important;
    margin-left: 0 !important;
    opacity: 0 !important;
    transform: translateX(-9px) !important;
    pointer-events: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-toggle {
    justify-content: center !important;
    gap: 0 !important;
    padding-right: 6px !important;
    padding-left: 6px !important;
  }

  /* Collapsed rail has one visual layer only: the icon tile itself. */
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:hover,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.active,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.analytics-merged-active,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:focus,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:focus-visible {
    border-color: transparent !important;
    outline: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    transform: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn::before,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn::after,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:hover::before,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:hover::after,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.active::before,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.active::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    border: 0 !important;
    background: none !important;
    box-shadow: none !important;
    animation: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:hover {
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-toggle-chevron {
    transform: rotate(180deg);
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-sidebar-toggle:hover {
    transform: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .desktop-nav-icon {
    transform: none !important;
    box-shadow: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.active .desktop-nav-icon,
  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.analytics-merged-active .desktop-nav-icon {
    border-color: rgba(85,146,255,.42) !important;
    background: rgba(59,125,255,.16) !important;
    color: #77a8ff !important;
    box-shadow: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn:hover .desktop-nav-icon {
    border-color: rgba(255,255,255,.12) !important;
    background: rgba(255,255,255,.055) !important;
    color: rgba(226,232,240,.82) !important;
    transform: none !important;
    box-shadow: none !important;
  }

  html body:not(.auth-visible).desktop-sidebar-collapsed #adminPanel .admin-tab-btn.active:hover .desktop-nav-icon {
    border-color: rgba(85,146,255,.42) !important;
    background: rgba(59,125,255,.16) !important;
    color: #77a8ff !important;
  }

  .desktop-sidebar-tooltip {
    display: none !important;
    position: fixed;
    z-index: 10020;
    padding: 6px 9px;
    border: 1px solid rgba(86,137,232,.35);
    border-radius: 8px;
    background: #18233a;
    color: #c8dcff;
    box-shadow: none;
    font-size: 11px;
    font-weight: 650;
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -4px) scale(.96);
    transform-origin: center top;
    transition: opacity .16s ease, transform .2s var(--desktop-shell-ease);
  }

  .desktop-sidebar-tooltip.is-visible { display: none !important; }

  body.theme-light .desktop-sidebar-tooltip {
    border-color: rgba(37,99,235,.22);
    background: #edf4ff;
    color: #1e4e9f;
    box-shadow: none;
  }

  /* v10.1.1 — role gate for the "Заявки" tab, restored.
     style.css hides it with `.admin-tab-btn.pilot-tab-btn { display: none
     !important }` (0,0,2,0) and reveals it only for `body.role-superadmin`.
     But the desktop shell's base rule
     `html body:not(.auth-visible) #adminPanel .admin-tab-btn { display: flex
     !important }` scores (0,1,3,2) and won, so the tab was visible to EVERY
     role on desktop — a network manager could see pilot signups from other
     companies. Verified by removing role-superadmin from <body> at runtime:
     the button still computed to `display: flex`.
     These selectors outrank the base rule, so the gate holds again. */
  html body:not(.auth-visible) #adminPanel .admin-tab-btn.pilot-tab-btn {
    display: none !important;
  }
  html body.role-superadmin:not(.auth-visible) #adminPanel .admin-tab-btn.pilot-tab-btn {
    display: flex !important;
  }

  @keyframes desktop-content-enter {
    from { opacity: .5; transform: translateY(7px); }
    to { opacity: 1; transform: translateY(0); }
  }

  @media (prefers-reduced-motion: reduce) {
    html body:not(.auth-visible) #adminPanel.admin-card,
    #adminPanel .desktop-sidebar-brandmark,
    #adminPanel .desktop-sidebar-brand .card-title,
    #adminPanel .desktop-nav-label,
    #adminPanel .desktop-nav-icon,
    #adminPanel .desktop-sidebar-toggle-icon,
    #adminPanel .desktop-sidebar-toggle-label,
    #adminPanel .ai-prompt-chip,
    #adminPanel .ai-welcome-arrow {
      transition-duration: .01ms !important;
    }
    html body:not(.auth-visible) #adminPanel > .tab-content.active { animation: none !important; }
  }
}

@media (min-width: 769px) and (max-width: 1080px) {
  /* v11.7.0: the header stacks via flex column now — the old grid-template
     overrides are obsolete. Controls wrap freely inside the toolbar row. */

  /* Below 1080px the cards wrap to two per row. The base rule above now drives
     the row off `grid-auto-flow: column !important`, so this override has to
     switch the flow back as well — a bare template alone would lose to it and
     leave three cramped cards on one line. */
  #adminPanel #tab-home .dashboard-stats-row {
    grid-auto-flow: row !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #adminPanel #dashBusinessPulse {
    grid-template-columns: 170px minmax(0, 1fr) !important;
  }

  #adminPanel #dashBusinessPulse .dash-pulse-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  .desktop-sidebar-shell { display: contents !important; }
  .desktop-sidebar-brand { display: none !important; }
  .desktop-sidebar-toggle { display: none !important; }
  .analytics-kpi-switcher { display: none !important; }
}

/* Login and Add Account intentionally share one centered authentication screen. */
html body.auth-visible {
  min-height: 100dvh !important;
  overflow-x: hidden !important;
}
html body.auth-visible .app-wrapper {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  min-height: 0 !important;
  width: 100% !important;
}
html body.auth-visible #appScrollRoot.main-content {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 0 !important;
  padding: 32px 24px 48px !important;
}
html body.auth-visible #authSection.auth-card {
  flex: 0 0 auto !important;
  width: min(100%, 390px) !important;
  max-width: 390px !important;
  margin: 0 !important;
}
@media (max-width: 640px) {
  html body.auth-visible #appScrollRoot.main-content { padding: 24px 12px 32px !important; }
  html body.auth-visible #authSection.auth-card { width: min(100%, 360px) !important; }
}