/* * panel-theme-claude.css — тема «как в десктопном приложении Claude» для веб-панели CloudCLI. * * ⚙️ ФАЙЛ СГЕНЕРИРОВАН — правь gen-theme.py и пересобирай, руками сюда не дописывать. * Источник карты цветов: index-BTDHQ6Id.css * Правил в карте: 295 (правил без цветов палитры пропущено: 1944) * Опознано цветов палитры Tailwind в сборке: 130 * * Тема только для СВЕТЛОГО режима: в тёмном она молчит и панель выглядит стоково. * Выключена, пока на нет атрибута data-panel-theme="claude" — его ставит * theme-switcher.js по выбору в панели (хранится в localStorage, ключ "panel-theme"). * Файл сам по себе ничего не меняет: положили — панель выглядит как прежде. * * Создано 27.08.2026 — Claude-NL · чат «Изучи вот какую тему,» · a31b6e6a */ /* ═══ 1. Каркас: токены shadcn ══════════════════════════════════════════════ */ html[data-panel-theme="claude"]:not(.dark) { --background: 60.0 25.0% 98.4%; /* #fcfcfa */ --foreground: 0.0 0.0% 5.5%; /* #0e0e0e */ --card: 0.0 0.0% 99.6%; /* #fefefe */ --card-foreground: 0.0 0.0% 5.5%; /* #0e0e0e */ --popover: 0.0 0.0% 100.0%; /* #ffffff */ --popover-foreground: 0.0 0.0% 5.5%; /* #0e0e0e */ --primary: 214.7 69.8% 48.0%; /* #256dd0 */ --primary-foreground: 0.0 0.0% 100.0%; /* #ffffff */ --secondary: 60.0 6.2% 93.7%; /* #f0f0ee */ --secondary-foreground: 0.0 0.0% 11.8%; /* #1e1e1e */ --muted: 60.0 6.2% 93.7%; /* #f0f0ee */ --muted-foreground: 45.0 3.3% 47.8%; /* #7e7c76 */ --accent: 48.0 10.6% 90.8%; /* #eae9e5 */ --accent-foreground: 0.0 0.0% 5.5%; /* #0e0e0e */ --destructive: 5.7 55.2% 51.0%; /* #c74a3d */ --destructive-foreground: 0.0 0.0% 100.0%; /* #ffffff */ --border: 60.0 1.8% 88.8%; /* #e3e3e2 */ --input: 60.0 1.8% 88.8%; /* #e3e3e2 */ --ring: 214.7 69.8% 48.0%; /* #256dd0 */ --nav-glass-bg: 60.0 16.7% 97.6% / .85; --nav-glass-blur: 12px; --nav-glass-saturate: 1; --nav-tab-glow: 214.7 69.8% 48.0% / .12; --nav-tab-ring: 214.7 69.8% 48.0% / .1; --nav-float-shadow: 0 0% 0% / .06; --nav-float-ring: 60.0 1.8% 88.8% / .7; --nav-divider-color: 60.0 1.8% 88.8% / .7; --nav-input-bg: 0.0 0.0% 99.6% / .9; --nav-input-focus-ring: 214.7 69.8% 48.0% / .25; --radius: .625rem; } /* ═══ 2. Формы и типографика ════════════════════════════════════════════════ * Всё в этом блоке — по скриншотам приложения, а не по вкусу. Цвета в правилах * повторяют измеренные: #fcfcfa полотно, #fafaf8 сайдбар, #f0f0ee таблетка * пользователя, #fefefe поле ввода, #e3e3e2 рамка, #abd1fc выделение. */ /* Шрифт. Панель ставит Encode Sans на `html,:host`; в приложении интерфейс и текст ответа набраны системным гротеском (на Mac — SF Pro). Ставим системный стек и им же перебиваем серифный чат (.font-serif = Merriweather). */ html[data-panel-theme="claude"]:not(.dark){font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif !important} html[data-panel-theme="claude"]:not(.dark) .font-serif{font-family:inherit !important} /* Выделение текста — ровно тот голубой, что в приложении */ html[data-panel-theme="claude"]:not(.dark) ::selection{background:#abd1fc;color:#0e0e0e} /* Поле ввода: в приложении это белая карточка с тонкой рамкой, крупным скруглением и без тени. У панели тут `data-slot`-хуки — они переживают пересборку бандла. */ html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input"]{background-color:#fefefe !important;border-color:#e3e3e2 !important;border-radius:12px !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) .chat-input-placeholder::placeholder{color:#a5a4a2 !important} html[data-panel-theme="claude"]:not(.dark) .chat-input-placeholder::-webkit-input-placeholder{color:#a5a4a2 !important} html[data-panel-theme="claude"]:not(.dark) .chat-input-placeholder::-moz-placeholder{color:#a5a4a2 !important} /* Сообщение пользователя. У панели это синий пузырь с белым текстом, в приложении — серая «таблетка» #f0f0ee с обычным тёмным текстом. Цепляемся за собственный класс панели `.chat-message.user` (он хендмейд, а не из Tailwind, и переживает пересборку). */ html[data-panel-theme="claude"]:not(.dark) .chat-message.user [class*="bg-blue-"]{background-color:#f0f0ee !important;color:#0e0e0e !important;border-color:#e3e3e2 !important} html[data-panel-theme="claude"]:not(.dark) .chat-message.user [class*="bg-blue-"] *{color:#0e0e0e !important} html[data-panel-theme="claude"]:not(.dark) .chat-message.user [class*="text-white"]{color:#0e0e0e !important} /* Полосы прокрутки — тонкие серые, как в приложении */ html[data-panel-theme="claude"]:not(.dark) body{scrollbar-width:thin;scrollbar-color:#d2d2d0 transparent} /* ═══ 3. Композер ═══════════════════════════════════════════════════════════ * В приложении это одно белое поле, а под ним тихая строка: режим, плюс, микрофон, * справа модель и усилие; отправка — неприметная кнопка, а не синий круг. * Зацепки — `data-slot`-атрибуты панели: они осмысленные и переживают пересборку. */ html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input"]:focus-within{border-color:#c9c9c7 !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-body"]{background-color:transparent !important} html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"]{background-color:transparent !important;border-top-width:0 !important;font-size:12px !important;color:#7e7c76 !important} html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] button{border-radius:8px !important} /* Счётчик токенов: у панели это чип с заливкой, в приложении такого нет вовсе — разжалуем в тихую подпись. `aria-label` литеральный, не из перевода. */ html[data-panel-theme="claude"]:not(.dark) button[aria-label="Show token usage"]{background-color:transparent !important;border-color:transparent !important;color:#7e7c76 !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) button[aria-label="Show token usage"] *{background-color:transparent !important;color:#7e7c76 !important} /* Отправка: синий круг → светлая кнопка с тёмной иконкой, как стрелка в поле приложения */ html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] button[class*="bg-primary"],html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] button[class*="bg-blue-"]{background-color:#f0f0ee !important;color:#0e0e0e !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] button[class*="bg-primary"]:hover,html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] button[class*="bg-blue-"]:hover{background-color:#eae9e5 !important} /* Плашка активности («Stop · esc»). В сборке это «язычок», приклеенный к верхней кромке композера: `rounded-b-none`, `border-b-0` и `clip-path: inset(-8px -8px 0 -8px)`, который срезает низ, чтобы рамка сливалась с полем. Мы поменяли полю радиус и цвет рамки — стык разъехался, язычок стал рисоваться криво (27.08.2026). Отклеиваем в самостоятельную пилюлю: clip-path снимаем, рамку возвращаем по кругу. Заодно анимация: у панели вход с блюром и растяжением по вертикали, у приложения всё спокойнее — оставляем короткий сдвиг с проявлением. */ html[data-panel-theme="claude"]:not(.dark) .chat-activity-tab{clip-path:none !important;border:1px solid #e3e3e2 !important;border-radius:999px !important;background-color:#ffffff !important;height:28px !important;padding-left:10px !important;padding-right:10px !important;margin-bottom:6px !important;box-shadow:0 1px 2px hsl(var(--foreground) / .06) !important} html[data-panel-theme="claude"]:not(.dark) .chat-activity-tab kbd{background-color:#fafaf8 !important;border-color:#e3e3e2 !important;color:#7e7c76 !important;border-radius:6px !important} html[data-panel-theme="claude"]:not(.dark) .chat-activity-enter{animation:theme-activity-in .18s ease-out both !important} html[data-panel-theme="claude"]:not(.dark) .chat-activity-exit{animation:theme-activity-out .14s ease-in both !important} @keyframes theme-activity-in{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} @keyframes theme-activity-out{from{opacity:1;transform:none}to{opacity:0;transform:translateY(4px)}} /* Синее там, где в приложении его нет. Рабочий синий #256dd0 в приложении — это полосы прогресса и ползунок; индикатор размышления там показан коралловой звездой, а счётчиков-бейджей с заливкой нет вовсе. Поэтому: пульсирующая точка активности — коралловая (#d46c4d, снята с кадра приложения), бейдж очереди — нейтральный тёмный. */ html[data-panel-theme="claude"]:not(.dark) .chat-activity-tab [class*="bg-primary"]{background-color:#d46c4d !important} html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] [class*="rounded-full"][class*="bg-primary"]{background-color:#0e0e0e !important;color:#ffffff !important} html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] [class*="rounded-full"][class*="bg-blue-"]{background-color:#0e0e0e !important;color:#ffffff !important} /* Верхняя кромка композера. Язычки перекрывали её своим фоном (у них `border-b-0`), из-за чего рамка выглядела рваной. Пилюли теперь отклеены, но на всякий случай явно держим рамку поля целой. */ html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input"]{border-width:1px !important;border-style:solid !important} /* Очередь отправки («QUEUED · Will send when this finishes»). В сборке это `border-dashed border-primary/25 bg-primary/[0.04] rounded-t-none` — пунктирная синеватая полоса с квадратным верхом: она рассчитана на стык с язычком активности, который мы отклеили, и потому выбивалась (27.08.2026). Приводим к виду соседей: сплошная рамка темы, нейтральная заливка, скругление со всех сторон, свой отступ. Синие точка и подпись «QUEUED» — в приглушённый серый: в приложении очередь показана нейтральной карточкой, без акцентного цвета. */ html[data-panel-theme="claude"]:not(.dark) .settings-content-enter[class*="border-dashed"]{border-style:solid !important;border-color:#e3e3e2 !important;background-color:#fafaf8 !important;border-radius:12px !important;margin-bottom:8px !important} html[data-panel-theme="claude"]:not(.dark) .settings-content-enter[class*="border-dashed"] [class*="bg-primary"]{background-color:#a5a4a2 !important} html[data-panel-theme="claude"]:not(.dark) .settings-content-enter[class*="border-dashed"] [class*="text-primary"]{color:#7e7c76 !important} /* Тёмная кнопка «стоп» в подвале — в приложении это тёмный кружок с белым квадратом */ html[data-panel-theme="claude"]:not(.dark) [data-slot="prompt-input-footer"] button[class*="bg-foreground"]{background-color:#0e0e0e !important;color:#ffffff !important;border-radius:999px !important} /* ═══ 4. Сообщения ══════════════════════════════════════════════════════════ * Приложение: серая таблетка пользователя без аватара, ответ — просто текст, * служебная строка (копирование, время) проявляется по наведению. */ /* Аватар «U» рядом с репликой. Внутри .chat-message.user круглый элемент один — сам аватар; на всякий случай прячем только его, а не весь узел. */ html[data-panel-theme="claude"]:not(.dark) .chat-message.user [class*="rounded-full"]{display:none !important} /* ═══ 5. Типографика и плотность ════════════════════════════════════════════ * Ритм приложения: 14px, межстрочный 1.65, код и таблицы на нейтралях палитры. */ html[data-panel-theme="claude"]:not(.dark) .chat-message{font-size:14px;line-height:1.65} html[data-panel-theme="claude"]:not(.dark) .chat-message p{margin-top:.5rem;margin-bottom:.5rem} html[data-panel-theme="claude"]:not(.dark) .chat-message :not(pre) > code{background-color:#f0f0ee !important;color:#0e0e0e !important;border-radius:6px;padding:.1em .35em;font-size:.9em} html[data-panel-theme="claude"]:not(.dark) .chat-message pre{background-color:#fafaf8 !important;border:1px solid #e3e3e2 !important;border-radius:10px !important} html[data-panel-theme="claude"]:not(.dark) .chat-message table{border-color:#e3e3e2 !important} html[data-panel-theme="claude"]:not(.dark) .chat-message h1{letter-spacing:-.01em} html[data-panel-theme="claude"]:not(.dark) .chat-message h2{letter-spacing:-.01em} html[data-panel-theme="claude"]:not(.dark) .chat-message h3{letter-spacing:-.01em} /* Ширина колонки. Померено по кадрам: в приложении текст занимает ~677 px, в панели со стоковыми настройками — 54.25rem, а после нашей правки panel-tweaks.css (05.08.2026) и вовсе 68rem (~1057 px на кадре). Именно это, а не цвет, читается как «другой интерфейс». Ставим 42rem ≈ 672 px — ширина приложения. ⚠️ Это правило перебивает panel-tweaks.css (тема грузится позже и специфичнее), но ТОЛЬКО при включённой теме: выключил — колонка снова 68rem. Дело вкуса, крутится одной цифрой. */ html[data-panel-theme="claude"]:not(.dark) [class*="max-w-[54.25rem]"]{max-width:min(68rem, 100%) !important} /* ═══ 6. Вкладки и сайдбар ══════════════════════════════════════════════════ * Вкладок в приложении нет; ближайшее — активная белой пилюлей с тонкой рамкой, * остальные приглушённым текстом без фона. Зацепки `role="tab"`/`aria-selected` * — из разметки самой панели, не из минифицированных классов. * Сайдбар: своих классов у него всего два (.nav-search-input, .nav-divider), поэтому * зацепки собраны из сочетаний утилит, найденных в бандле, и из `:has()`. */ html[data-panel-theme="claude"]:not(.dark) [role="tab"]{border-radius:8px !important;background-color:transparent !important;color:#7e7c76 !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) [role="tab"]:hover{background-color:#f0f0ee !important;color:#0e0e0e !important} html[data-panel-theme="claude"]:not(.dark) [role="tab"][aria-selected="true"]{background-color:#ffffff !important;color:#0e0e0e !important;border:1px solid #e3e3e2 !important} /* Кнопка «New Session». В сборке это единственная полноширинная кнопка высотой h-8 с заливкой `bg-primary` (проверено по бандлу: таких классов три, две — h-8). В приложении на этом месте обычная строка «New» с плюсом, без заливки. Делаем строкой. */ html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="bg-primary"]{background-color:transparent !important;color:#0e0e0e !important;justify-content:flex-start !important;padding-left:8px !important;padding-right:8px !important;border-radius:8px !important} html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="bg-primary"]:hover{background-color:#f0f0ee !important} /* Зазор между строками. Без него «New Session», строка проекта и выбранная сессия красятся одним `#eae9e5`, стыкуются вплотную и читаются как одна серая плашка (замер кадра 27.08.2026: три подряд по 85-99% площади в одном тоне). */ /* Отрицательные поля — не каприз: замер кадра 27.08.2026 показал, что карточка кнопки стоит уже строк ровно на 10 px с каждой стороны (её край x=28 против x=18 у строк, правый 559 против 569). Компенсируем этой разницей, чтобы левые края совпали. */ html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="bg-primary"]{width:auto !important;margin:3px -4px !important} html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="bg-primary"] *{color:#0e0e0e !important} /* ── Сайдбар: зацепка по контейнеру, а не по классам строки ─────────────────── * Первый заход цеплялся за сочетание классов карточки (ROW) и промахнулся: замер кадра * показал, что десктопные строки сессий остались с фоном `#fefefe`, звездой `#af8433` * и коралловой иконкой — значит ROW описывает другой вариант строки. Здесь правила * навешены на сам сайдбар (`md:w-72 backdrop-blur-sm`) и его список — это переживает * любые перестановки внутренних компонентов. */ html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"]{background-color:#fafaf8 !important;backdrop-filter:none !important} /* Карточки внутри сайдбара — в плоские строки */ html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="bg-card"]{background-color:transparent !important;border-color:transparent !important;border-radius:8px !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="bg-card"]:hover{background-color:#f0f0ee !important} html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="bg-primary/5"]{background-color:#eae9e5 !important;border-color:transparent !important} html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="bg-muted/20"]{background-color:transparent !important} /* Монохром — точечный, а не поголовный (правка 27.08.2026 по двум замечаниям). Было: обесцвечивали ВСЕ иконки сайдбара (`filter: grayscale`) и всё, где встретился класс `bg-green-*`. Первое убило фирменную иконку Клода у сессий — пользователь попросил вернуть. Второе оказалось грубой ошибкой: у активной сессии строка помечена `bg-green-50/5`, и правило заливало СТРОКУ ЦЕЛИКОМ серым `#a5a4a2` — на кадре это выглядело как тёмная плашка (замер: #a5a4a2 на 84% площади строки). Теперь гасим только индикаторы — маленькие круглые элементы — и звезду «избранное». */ html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="rounded-full"][class*="bg-green-"]{background-color:#a5a4a2 !important} /* Бейдж «Running sessions» (цифра) и его пульс-иконка. В сборке это `bg-emerald-500` (бейдж со счётчиком) и `text-emerald-500` (пульс слева) у вкладки «Conversations». Было приглушено до серого; по просьбе пользователя 27.08.2026 — в коралловый #d46c4d, как остальной акцент колонки. Цифра внутри белая — на коралловом контраст 3,0, для мелкого бейджа норм. */ /* Кольцо бейджа (ring-1 ring-background): утилита ring-background в этой сборке не сгенерировалась, и кольцо взяло дефолтный синий Tailwind — обводка оставалась синей при коралловой заливке (27.08.2026). Ставим кольцо в тон сайдбара, чтобы оно играло роль аккуратного зазора, а не цветного контура. */ html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="rounded-full"][class*="bg-emerald-"]{background-color:#d46c4d !important;--tw-ring-color:#fafaf8 !important} html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="text-emerald-"]{color:#d46c4d !important} html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="text-yellow"],html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="text-amber"]{color:#a5a4a2 !important} /* Метрика строк приложения: 26 px, кегль 13/11, поля 3/8 */ html[data-panel-theme="claude"]:not(.dark) [class*="overscroll-contain"][class*="md:px-1.5"] [class*="bg-card"]{padding:3px 8px !important;margin:3px 6px !important;min-height:26px !important} /* Точка «сессия активна». В сборке она висит абсолютно у левого края строки и намеренно вынесена наружу (`left-0 -translate-x-1`) — рассчитана на поле `mx-3` (12 px). Мы сузили поля до 6 px, и точку срезало краем колонки. Возвращаем её в поле и красим коралловым (#d46c4d — цвет звезды Клода, снят с кадра приложения): решение пользователя 27.08.2026. `top: 12px` вместо `top-1/2` — тоже по замеру: центрирование шло от родителя, который выше строки, и точка садилась на 11 px ниже её середины. Строка сессии фиксированной высоты (26 px + поле 3 px), поэтому смещение считается один раз. */ /* Индикатор активной сессии. Было: плавающая коралловая точка · потом полоска по `bg-green-50%` — она не сработала: замер кадра 27.08.2026 показал, что коралловых пикселей у левого края строки нет (всё коралловое — это иконки сессий). Класс состояния строки в этой сборке не тот. Перецепляемся на надёжный признак: у активной/внимательной строки в DOM есть плавающий индикатор `div.absolute.left-0…` внутри обёртки `div.group.relative`. Через `:has(> …)` находим такую обёртку и красим её карточку — полоска в `::before`, в поле, на текст не налезает. Плавающий индикатор прячем. */ /* Полоски на десктопной строке сессии так и не заработали — ни `bg-primary/10`, ни `bg-accent` не дали видимого результата, а строить наугад дальше бессмысленно. Пользователь 27.08.2026 попросил вернуть ТОЧКУ: она хотя бы была видна. Возвращаем коралловую точку (тот же элемент, что в первых кадрах), позиция — та, при которой она показывалась. Центр по высоте может уйти, потому что индикатор привязан к обёртке мобильной карточки (`md:hidden`, на десктопе скрыта) — поправим по кадру. */ html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="absolute"][class*="left-0"][class*="-translate-x-1"]{left:0 !important;top:12px !important;transform:none !important} html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="animate-pulse"][class*="rounded-full"]{background-color:#d46c4d !important} html[data-panel-theme="claude"]:not(.dark) [class*="overscroll-contain"][class*="md:px-1.5"] [class*="bg-card"] [class*="text-sm"]{font-size:13px !important;font-weight:400 !important} html[data-panel-theme="claude"]:not(.dark) [class*="overscroll-contain"][class*="md:px-1.5"] [class*="bg-card"] [class*="text-xs"]{font-size:11px !important} /* ── Раскладка сайдбара: один столбец, «New Session» последней строкой ──────────── * Это то, про что я сначала сказал «CSS порядок узлов не меняет» — неточно: внутри * флекс-контейнера порядок задаётся `order`, а `display: contents` растворяет обёртку * и поднимает её детей в поток родителя. Правки React-разметки не требуется. * * Дерево из бандла 1.37.2 (компонент проекта `UU`): * div.md:space-y-1 ← обёртка одного проекта * div.md:group ← строка проекта * div.ml-3.space-y-1.border-l.pl-3 ← компонент `$U`: отступ и вертикальная линейка * button (hidden … md:flex bg-primary) ← «New Session» * строки сессий, кнопка «загрузить ещё» * * 1) растворяем `$U` — уходят и отступ, и линейка, а дети попадают в поток обёртки; * 2) обёртку проекта делаем колонкой (`:has(> div.md:group)` отсекает чужие узлы с * тем же классом: такой ребёнок есть только у неё); * 3) кнопке даём `order:9999` — она встаёт в самый низ, под чаты сессий * (правка 27.08.2026: было `order:-1` — «New» над строкой проекта; по просьбе * «кнопку new session вниз под чаты» перенесена в конец списка). * Отступы `space-y-1` продолжают работать: они заданы на растворённой обёртке и * применяются к её детям. */ html[data-panel-theme="claude"]:not(.dark) div[class*="ml-3"][class*="space-y-1"][class*="border-l"][class*="pl-3"]{display:contents !important} html[data-panel-theme="claude"]:not(.dark) div[class*="md:space-y-1"]:has(> div[class*="md:group"]){display:flex !important;flex-direction:column !important} html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="bg-primary"]{order:9999 !important} /* Мобильная кнопка «New Session» — отдельный элемент. В `$U` их две: десктопная (`hidden … md:flex`, прямой ребёнок `$U`, её `order` и двигает) и мобильная — она лежит в обёртке `div.px-3.pb-1.pt-1.md:hidden`, поэтому `order` на самой кнопке (внутри не-флекс обёртки) не работает. Двигаем обёртку. Правка 27.08.2026: «вот так в мобильной версии» — кнопка оставалась сверху. `:has(> button[class*="bg-primary"])` уникален: у мобильной карточки проекта кнопка с `bg-gray-500/10`, а не `bg-primary`. */ html[data-panel-theme="claude"]:not(.dark) div[class*="md:hidden"]:has(> button[class*="bg-primary"]){order:9999 !important} /* Кнопка «загрузить ещё» под списком сессий — в тот же ритм строк */ html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="justify-center"]{height:26px !important;font-size:12px !important;border-radius:8px !important;margin:1px 6px !important} /* ── Блок статусов сервера (наш виджет `dash-status-widget.js`, корень * `#dash-status-root`) — компактно, но СТОЛБИКОМ, по одной строке на хост. * * Сначала я свернул обе строки в одну (`flex-direction: row`) — вышло хуже: содержимое * «Сервер NL 97 мс» + «Дашборд Б24 236 мс» шире колонки, строку срезало по левому краю * вместе с первым огоньком, и казалось, что индикатор всего один. Правка 27.08.2026. * * Убираем только полоски ЦПУ/свопа/ОЗУ — они отличаются инлайновым отступом * `padding: 2px 10px 4px 26px`, по нему и цепляемся. Файл виджета не трогаем: при * выключенной теме он остаётся прежним. */ html[data-panel-theme="claude"]:not(.dark) #dash-status-root{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:1px !important;padding:2px 6px 6px !important} html[data-panel-theme="claude"]:not(.dark) #dash-status-root > div{width:100% !important;padding:2px 6px !important;min-height:22px !important} html[data-panel-theme="claude"]:not(.dark) #dash-status-root [style*="4px 26px"]{display:none !important} /* Наведение — одинаковое у обеих строк. В самом виджете они разной природы: «Сервер NL» собран как заголовок (`makeHeaderLabel`, без точки и без hover-класса), потому что health у него не мерится — страницу отдаёт этот же сервер, и раз она открылась, он жив; справа только пинг. «Дашборд Б24» — полноценная строка статуса с точкой и подсветкой. Разная реакция на курсор читалась как поломка (27.08.2026), поэтому подсвечиваем обе одинаково. */ html[data-panel-theme="claude"]:not(.dark) #dash-status-root > div{border-radius:8px !important} html[data-panel-theme="claude"]:not(.dark) #dash-status-root > div:hover{background-color:#f0f0ee !important} /* ── Виджет лимитов подписки (`#limits-widget-root`) ────────────────────────── * 27.08.2026 переехал из строки вкладок в подвал сайдбара, к статусам серверов * (просьба пользователя: «перенесём в боковую панель, а наверху уберём»). Здесь ему * задаётся тот же ритм, что и блоку статусов. * * Отличие от `#dash-status-root`: подсветка по наведению и метрика строки вешаются * не на все прямые дети, а только на СТРОКИ (`[class*="rounded-lg"]`). Прямые дети тут * разной природы — две строки, обёртка полосок и подпись про тариф; общий hover * подсвечивал бы полоски как кликабельную строку, чего они не значат. * * Полоски лимитов НЕ прячем, в отличие от полосок ЦПУ/свопа/ОЗУ у соседа: там это * подробность о железе, здесь — сам смысл виджета (по окну на полоску). Поэтому у них * и отступ 24 px вместо 26 — под правило `[style*="4px 26px"]` они не попадают. */ html[data-panel-theme="claude"]:not(.dark) #limits-widget-root{display:flex !important;flex-direction:column !important;align-items:stretch !important;gap:1px !important;padding:2px 6px 2px !important} html[data-panel-theme="claude"]:not(.dark) #limits-widget-root > div[class*="rounded-lg"]{width:100% !important;padding:2px 6px !important;min-height:22px !important;border-radius:8px !important} html[data-panel-theme="claude"]:not(.dark) #limits-widget-root > div[class*="rounded-lg"]:hover{background-color:#f0f0ee !important} /* Карточки проекта и сессии в сайдбаре. В сборке контейнер строки собран из `p-2 mx-3 my-0.5 rounded-md bg-card border`, а состояния добавляют `bg-primary/5 border-primary/20` (выбрано), `bg-muted/20`, `border-green-500/30` (активна). Своего класса у него нет, но сочетание отступов с `bg-card` в сборке уникально — цепляемся им. В приложении это плоские строки без рамок и карточек: убираем заливку и рамку, оставляем только подсветку наведения и выбора. */ html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"]{background-color:transparent !important;border-color:transparent !important;border-radius:8px !important} html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"]:hover{background-color:#f0f0ee !important} html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"][class*="bg-primary/5"]{background-color:#eae9e5 !important} /* Монохромный сайдбар (решение пользователя 27.08.2026: «убрать лишнее, всё одним стилем, как New Session»). В приложении сайдбар одноцветный: ни плиток с градиентом, ни цветных иконок провайдеров, ни зелёных индикаторов — только текст, серые иконки и подсветка строки. Цветное здесь не несёт информации, кроме «сессия активна», поэтому индикаторы не убираем, а обесцвечиваем. */ /* Плитка логотипа CloudCLI в шапке сайдбара. В сборке это `h-7 w-7 rounded-lg bg-primary/90 shadow-sm` со значком внутри — единственное синее пятно, оставшееся в колонке. По просьбе пользователя 27.08.2026 красим в коралловый #d46c4d (цвет звезды Клода, снят пипеткой с кадров приложения). Значок внутри белый — на коралловом контраст 3,0: для знака это нормально, для текста было бы мало. */ html[data-panel-theme="claude"]:not(.dark) [class*="md:w-72"][class*="backdrop-blur-sm"] [class*="bg-primary/90"]{background-color:#d46c4d !important} /* Плитка логотипа на экране входа: градиент from-primary → нейтральная подложка */ html[data-panel-theme="claude"]:not(.dark) [class*="bg-gradient-to-br"][class*="from-primary"]{background-image:none !important;background-color:#f0f0ee !important;box-shadow:none !important} html[data-panel-theme="claude"]:not(.dark) [class*="bg-gradient-to-br"][class*="from-primary"] img{filter:grayscale(1);opacity:.8} /* Звезда «избранное» */ html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"] [class*="text-yellow"],html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"] [class*="text-amber"]{color:#a5a4a2 !important} /* Точки активности (зелёная у сессии, синяя у задач) и счётчики-бейджи */ html[data-panel-theme="claude"]:not(.dark) [class*="animate-pulse"][class*="rounded-full"][class*="bg-green"]{background-color:#a5a4a2 !important} html[data-panel-theme="claude"]:not(.dark) [class*="animate-pulse"][class*="rounded-full"][class*="bg-blue"]{background-color:#a5a4a2 !important} html[data-panel-theme="claude"]:not(.dark) [class*="rounded-full"][class*="bg-green-"]{background-color:#0e0e0e !important;color:#ffffff !important} /* Один ритм строк: та же высота, те же отступы и скругление, что у «New Session» */ html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"]{padding:6px 8px !important;margin-top:1px !important;margin-bottom:1px !important} html[data-panel-theme="claude"]:not(.dark) button[class*="h-8"][class*="w-full"][class*="bg-primary"]{height:32px !important} /* Метрика сайдбара — снята с кадра приложения (27.08.2026, крупный план боковой колонки, 260x410, масштаб 1:1), а не подобрана: фон `#fafaf8`, заливка активной строки `#eae9e5`, шаг строк 24 px, кегль ~13 px, иконки ~14 px, вложенные пункты с отступом 31 px. Ниже — те же числа. */ html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"]{padding:3px 8px !important;margin:1px 6px !important;min-height:26px !important;border-radius:8px !important} html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"] [class*="text-sm"]{font-size:13px !important;font-weight:400 !important} html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"] [class*="text-xs"]{font-size:11px !important} html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"] [class*="w-5"][class*="h-5"]{width:16px !important;height:16px !important} html[data-panel-theme="claude"]:not(.dark) [class*="mx-3"][class*="my-0.5"][class*="rounded-md"][class*="bg-card"] svg{width:14px !important;height:14px !important} /* Переключатель Projects/Conversations = тумблер Home/Code в приложении: активная половина — белая пилюля с тонкой рамкой и мягкой тенью, вторая — просто текст. В сборке активное состояние помечено `bg-background … ring-1 ring-border/50`. */ html[data-panel-theme="claude"]:not(.dark) [class*="bg-background"][class*="ring-1"]{background-color:#ffffff !important;box-shadow:0 1px 2px hsl(var(--foreground) / .06) !important;--tw-ring-color:#e3e3e2 !important;border-radius:8px !important} /* Поиск проектов: в приложении отдельного поля нет (лупа живёт в строке «Recents»), поэтому делаем его невесомым — без рамки и заливки, одной строкой с остальными. */ html[data-panel-theme="claude"]:not(.dark) .nav-search-input{background-color:transparent !important;border-width:0 !important;height:28px !important;box-shadow:none !important} /* Переключатель Projects/Conversations — сегментированная плашка на `bg-muted/50`. В приложении такой сущности нет; делаем её невесомой: подложка прозрачная, активный сегмент — белая пилюля с тонкой рамкой. */ html[data-panel-theme="claude"]:not(.dark) [class*="bg-muted/50"]{background-color:transparent !important} html[data-panel-theme="claude"]:not(.dark) .nav-divider{background-color:#e3e3e2 !important} /* ═══ 7. Карта прибитых цветов Tailwind ═════════════════════════════════════ * Каждое правило — копия правила из сборки панели с тем же селектором и подменённым * цветом. Порядок и специфичность повторяют оригинал, поэтому светлые и тёмные * варианты продолжают срабатывать там же, где срабатывали. */ html[data-panel-theme="claude"]:not(.dark) *{--tw-ring-color: rgb(37 109 208/ .5) !important} html[data-panel-theme="claude"]:not(.dark) :before{--tw-ring-color: rgb(37 109 208/ .5) !important} html[data-panel-theme="claude"]:not(.dark) :after{--tw-ring-color: rgb(37 109 208/ .5) !important} html[data-panel-theme="claude"]:not(.dark) ::backdrop{--tw-ring-color: rgb(37 109 208/ .5) !important} html[data-panel-theme="claude"]:not(.dark) *{border-color:#f0f0ee !important} html[data-panel-theme="claude"]:not(.dark) :before{border-color:#f0f0ee !important} html[data-panel-theme="claude"]:not(.dark) :after{border-color:#f0f0ee !important} html[data-panel-theme="claude"]:not(.dark) input::-moz-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) textarea::-moz-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) input::placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) textarea::placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) .prose{--tw-prose-body: #5a5a59 !important;--tw-prose-headings: #1e1e1e !important;--tw-prose-lead: #7e7c76 !important;--tw-prose-links: #1e1e1e !important;--tw-prose-bold: #1e1e1e !important;--tw-prose-counters: #a5a4a2 !important;--tw-prose-bullets: #eae9e5 !important;--tw-prose-hr: #f0f0ee !important;--tw-prose-quotes: #1e1e1e !important;--tw-prose-quote-borders: #f0f0ee !important;--tw-prose-captions: #a5a4a2 !important;--tw-prose-kbd: #1e1e1e !important;--tw-prose-code: #1e1e1e !important;--tw-prose-pre-code: #f0f0ee !important;--tw-prose-pre-bg: #3d3d3d !important;--tw-prose-th-borders: #eae9e5 !important;--tw-prose-td-borders: #f0f0ee !important;--tw-prose-invert-body: #eae9e5 !important;--tw-prose-invert-lead: #d2d2d0 !important;--tw-prose-invert-counters: #d2d2d0 !important;--tw-prose-invert-bullets: #7e7c76 !important;--tw-prose-invert-hr: #5a5a59 !important;--tw-prose-invert-quotes: #fafaf8 !important;--tw-prose-invert-quote-borders: #5a5a59 !important;--tw-prose-invert-captions: #d2d2d0 !important;--tw-prose-invert-pre-code: #eae9e5 !important;--tw-prose-invert-th-borders: #7e7c76 !important;--tw-prose-invert-td-borders: #5a5a59 !important} html[data-panel-theme="claude"]:not(.dark) .prose-gray{--tw-prose-body: #5a5a59 !important;--tw-prose-headings: #1e1e1e !important;--tw-prose-lead: #7e7c76 !important;--tw-prose-links: #1e1e1e !important;--tw-prose-bold: #1e1e1e !important;--tw-prose-counters: #a5a4a2 !important;--tw-prose-bullets: #eae9e5 !important;--tw-prose-hr: #f0f0ee !important;--tw-prose-quotes: #1e1e1e !important;--tw-prose-quote-borders: #f0f0ee !important;--tw-prose-captions: #a5a4a2 !important;--tw-prose-kbd: #1e1e1e !important;--tw-prose-code: #1e1e1e !important;--tw-prose-pre-code: #f0f0ee !important;--tw-prose-pre-bg: #3d3d3d !important;--tw-prose-th-borders: #eae9e5 !important;--tw-prose-td-borders: #f0f0ee !important;--tw-prose-invert-body: #eae9e5 !important;--tw-prose-invert-lead: #d2d2d0 !important;--tw-prose-invert-counters: #d2d2d0 !important;--tw-prose-invert-bullets: #7e7c76 !important;--tw-prose-invert-hr: #5a5a59 !important;--tw-prose-invert-quotes: #fafaf8 !important;--tw-prose-invert-quote-borders: #5a5a59 !important;--tw-prose-invert-captions: #d2d2d0 !important;--tw-prose-invert-pre-code: #eae9e5 !important;--tw-prose-invert-th-borders: #7e7c76 !important;--tw-prose-invert-td-borders: #5a5a59 !important} html[data-panel-theme="claude"]:not(.dark) .prose-red{--tw-prose-links: #ca3838 !important;--tw-prose-invert-links: #de5555 !important} html[data-panel-theme="claude"]:not(.dark) .border-amber-200{border-color:rgb(242 223 149/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-blue-100{border-color:rgb(219 232 251/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-blue-200{border-color:rgb(171 209 252/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-blue-300{border-color:rgb(122 162 230/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-blue-500{border-color:rgb(37 109 208/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-blue-600{border-color:rgb(31 92 180/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-emerald-200{border-color:rgb(175 235 207/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-emerald-500{border-color:rgb(33 168 123/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-gray-100{border-color:rgb(250 250 248/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-gray-200{border-color:rgb(240 240 238/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-gray-300{border-color:rgb(234 233 229/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-gray-400{border-color:rgb(210 210 208/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-gray-600{border-color:rgb(126 124 118/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-gray-700{border-color:rgb(90 90 89/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-green-200{border-color:rgb(193 241 210/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-green-400{border-color:rgb(89 207 132/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-green-500{border-color:rgb(50 181 98/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-indigo-200{border-color:rgb(171 209 252/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-orange-200{border-color:rgb(246 214 178/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-orange-400{border-color:rgb(232 148 79/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-purple-200{border-color:rgb(233 217 251/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-purple-500{border-color:rgb(168 101 231/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-red-200{border-color:rgb(249 207 207/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-red-300{border-color:rgb(243 174 174/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-red-500{border-color:rgb(222 85 85/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-rose-200{border-color:rgb(249 210 215/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-sky-200{border-color:rgb(171 209 252/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-sky-400{border-color:rgb(88 137 223/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-slate-200{border-color:rgb(240 240 238/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-slate-300{border-color:rgb(234 233 229/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-violet-400{border-color:rgb(172 150 239/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-yellow-200{border-color:rgb(242 231 150/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-zinc-200{border-color:rgb(240 240 238/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-zinc-300{border-color:rgb(234 233 229/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-b-gray-900{border-bottom-color:rgb(30 30 30/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-amber-500{border-left-color:rgb(222 152 34/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-blue-500{border-left-color:rgb(37 109 208/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-gray-900{border-left-color:rgb(30 30 30/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-green-500{border-left-color:rgb(50 181 98/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-indigo-500{border-left-color:rgb(37 109 208/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-purple-500{border-left-color:rgb(168 101 231/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-l-violet-500{border-left-color:rgb(145 107 231/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-r-gray-900{border-right-color:rgb(30 30 30/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-t-emerald-400{border-top-color:rgb(68 195 149/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .border-t-gray-900{border-top-color:rgb(30 30 30/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-amber-100{background-color:rgb(249 240 204/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-amber-400{background-color:rgb(230 182 57/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-amber-50{background-color:rgb(253 250 237/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-amber-500{background-color:rgb(222 152 34/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-blue-100{background-color:rgb(219 232 251/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-blue-300{background-color:rgb(122 162 230/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-blue-50{background-color:rgb(238 244 253/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-blue-500{background-color:rgb(37 109 208/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-blue-600{background-color:rgb(31 92 180/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-blue-800{background-color:rgb(18 58 114/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-cyan-400{background-color:rgb(54 196 218/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-emerald-100{background-color:rgb(213 246 229/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-emerald-400{background-color:rgb(68 195 149/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-emerald-50{background-color:rgb(238 251 245/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-emerald-500{background-color:rgb(33 168 123/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-emerald-600{background-color:rgb(20 136 100/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-100{background-color:rgb(250 250 248/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-200{background-color:rgb(240 240 238/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-300{background-color:rgb(234 233 229/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-50{background-color:rgb(252 252 250/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-500{background-color:rgb(165 164 162/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-600{background-color:rgb(126 124 118/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-700{background-color:rgb(90 90 89/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-800{background-color:rgb(61 61 61/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-gray-900{background-color:rgb(30 30 30/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-green-100{background-color:rgb(223 249 232/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-green-400{background-color:rgb(89 207 132/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-green-50{background-color:rgb(241 252 244/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-green-500{background-color:rgb(50 181 98/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-green-600{background-color:rgb(36 149 78/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-indigo-50{background-color:rgb(238 244 253/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-neutral-950{background-color:rgb(14 14 14/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-orange-100{background-color:rgb(251 236 217/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-orange-50{background-color:rgb(253 247 239/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-orange-600{background-color:rgb(212 95 34/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-purple-100{background-color:rgb(243 234 253/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-purple-50{background-color:rgb(250 246 254/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-purple-500{background-color:rgb(168 101 231/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-purple-600{background-color:rgb(146 69 216/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-red-100{background-color:rgb(251 229 229/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-red-50{background-color:rgb(253 243 243/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-red-500{background-color:rgb(222 85 85/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-red-600{background-color:rgb(202 56 56/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-rose-50{background-color:rgb(254 242 243/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-sky-50{background-color:rgb(238 244 253/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-slate-100{background-color:rgb(250 250 248/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-slate-50{background-color:rgb(252 252 250/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-yellow-100{background-color:rgb(248 244 201/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-yellow-200{background-color:rgb(242 231 150/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-yellow-50{background-color:rgb(252 250 234/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-yellow-600{background-color:rgb(182 131 24/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-zinc-100{background-color:rgb(250 250 248/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-zinc-50{background-color:rgb(252 252 250/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-zinc-500{background-color:rgb(165 164 162/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-zinc-800{background-color:rgb(61 61 61/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .bg-zinc-900{background-color:rgb(30 30 30/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .from-blue-50{--tw-gradient-from: #eef4fd var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(238 244 253/ 0) var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .from-blue-500{--tw-gradient-from: #256dd0 var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(37 109 208/ 0) var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .from-blue-500\/10{--tw-gradient-from: rgb(37 109 208/ .1) var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(37 109 208/ 0) var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .from-blue-600{--tw-gradient-from: #1f5cb4 var(--tw-gradient-from-position) !important;--tw-gradient-to: rgb(31 92 180/ 0) var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .via-cyan-400{--tw-gradient-to: rgb(54 196 218/ 0) var(--tw-gradient-to-position) !important;--tw-gradient-stops: var(--tw-gradient-from), #36c4da var(--tw-gradient-via-position), var(--tw-gradient-to) !important} html[data-panel-theme="claude"]:not(.dark) .to-blue-500{--tw-gradient-to: #256dd0 var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .to-cyan-500\/10{--tw-gradient-to: rgb(27 167 191/ .1) var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .to-indigo-50{--tw-gradient-to: #eef4fd var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .to-teal-400{--tw-gradient-to: #3ec3b3 var(--tw-gradient-to-position) !important} html[data-panel-theme="claude"]:not(.dark) .text-amber-500{color:rgb(222 152 34/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-amber-600{color:rgb(196 118 27/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-amber-700{color:rgb(163 85 26/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-amber-800{color:rgb(133 67 27/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-amber-900{color:rgb(110 56 26/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-300{color:rgb(122 162 230/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-400{color:rgb(88 137 223/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-500{color:rgb(37 109 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-600{color:rgb(31 92 180/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-700{color:rgb(23 70 138/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-800{color:rgb(18 58 114/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-blue-900{color:rgb(14 45 89/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-cyan-400{color:rgb(54 196 218/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-cyan-500{color:rgb(27 167 191/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-emerald-400{color:rgb(68 195 149/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-emerald-500{color:rgb(33 168 123/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-emerald-600{color:rgb(20 136 100/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-emerald-700{color:rgb(16 108 82/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-emerald-800{color:rgb(15 86 66/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-100{color:rgb(250 250 248/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-200{color:rgb(240 240 238/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-300{color:rgb(234 233 229/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-400{color:rgb(210 210 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-500{color:rgb(165 164 162/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-600{color:rgb(126 124 118/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-700{color:rgb(90 90 89/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-800{color:rgb(61 61 61/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-gray-900{color:rgb(30 30 30/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-green-400{color:rgb(89 207 132/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-green-500{color:rgb(50 181 98/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-green-600{color:rgb(36 149 78/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-green-700{color:rgb(32 117 64/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-green-800{color:rgb(30 93 54/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-green-900{color:rgb(26 77 46/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-indigo-500{color:rgb(37 109 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-indigo-700{color:rgb(23 70 138/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-neutral-100{color:rgb(250 250 248/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-neutral-400{color:rgb(210 210 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-neutral-500{color:rgb(165 164 162/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-orange-400{color:rgb(232 148 79/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-orange-500{color:rgb(226 119 45/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-orange-600{color:rgb(212 95 34/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-orange-700{color:rgb(176 73 30/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-orange-800{color:rgb(140 59 32/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-orange-900{color:rgb(113 50 29/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-pink-400{color:rgb(231 127 181/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-pink-500{color:rgb(220 88 153/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-purple-400{color:rgb(192 144 240/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-purple-500{color:rgb(168 101 231/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-purple-600{color:rgb(146 69 216/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-purple-700{color:rgb(125 51 189/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-purple-800{color:rgb(106 46 155/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-purple-900{color:rgb(87 39 124/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-red-400{color:rgb(235 126 126/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-red-500{color:rgb(222 85 85/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-red-600{color:rgb(202 56 56/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-red-700{color:rgb(169 44 44/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-red-800{color:rgb(140 40 40/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-red-900{color:rgb(117 39 39/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-rose-400{color:rgb(237 127 143/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-rose-500{color:rgb(226 81 106/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-rose-700{color:rgb(173 35 69/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-sky-500{color:rgb(37 109 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-sky-700{color:rgb(23 70 138/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-slate-500{color:rgb(165 164 162/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-slate-600{color:rgb(126 124 118/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-slate-700{color:rgb(90 90 89/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-slate-800{color:rgb(61 61 61/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-slate-900{color:rgb(30 30 30/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-teal-600{color:rgb(27 134 125/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-violet-400{color:rgb(172 150 239/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-violet-500{color:rgb(145 107 231/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-yellow-300{color:rgb(235 212 89/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-yellow-400{color:rgb(227 190 44/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-yellow-500{color:rgb(211 167 31/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-yellow-600{color:rgb(182 131 24/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-yellow-700{color:rgb(146 95 22/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-yellow-800{color:rgb(121 76 26/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-zinc-700{color:rgb(90 90 89/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .text-zinc-900{color:rgb(30 30 30/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .placeholder-gray-400::-moz-placeholder{color:rgb(210 210 208/ var(--tw-placeholder-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .placeholder-gray-400::placeholder{color:rgb(210 210 208/ var(--tw-placeholder-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .shadow-emerald-500\/25{--tw-shadow-color: rgb(33 168 123/ .25) !important} html[data-panel-theme="claude"]:not(.dark) .shadow-emerald-600\/25{--tw-shadow-color: rgb(20 136 100/ .25) !important} html[data-panel-theme="claude"]:not(.dark) .shadow-emerald-950\/30{--tw-shadow-color: rgb(6 40 32/ .3) !important} html[data-panel-theme="claude"]:not(.dark) .ring-blue-200\/50{--tw-ring-color: rgb(171 209 252/ .5) !important} html[data-panel-theme="claude"]:not(.dark) .ring-blue-500\/40{--tw-ring-color: rgb(37 109 208/ .4) !important} html[data-panel-theme="claude"]:not(.dark) .ring-emerald-500\/15{--tw-ring-color: rgb(33 168 123/ .15) !important} html[data-panel-theme="claude"]:not(.dark) .ring-gray-200{--tw-ring-color: rgb(240 240 238/ var(--tw-ring-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) input[type=checkbox]{accent-color:#1f5cb4 !important} html[data-panel-theme="claude"]:not(.dark) textarea::placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) .chat-input-placeholder::-moz-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) .chat-input-placeholder::placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) .chat-input-placeholder::-webkit-input-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) textarea::-webkit-input-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) textarea::-moz-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) textarea:-ms-input-placeholder{color:#d2d2d0 !important} html[data-panel-theme="claude"]:not(.dark) .placeholder\:text-gray-400::-moz-placeholder{color:rgb(210 210 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .placeholder\:text-gray-400::placeholder{color:rgb(210 210 208/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .checked\:bg-blue-600:checked{background-color:rgb(31 92 180/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus-within\:border-purple-500:focus-within{border-color:rgb(168 101 231/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus-within\:ring-purple-500:focus-within{--tw-ring-color: rgb(168 101 231/ var(--tw-ring-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:border-amber-400:hover{border-color:rgb(230 182 57/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:border-blue-300:hover{border-color:rgb(122 162 230/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:border-blue-400:hover{border-color:rgb(88 137 223/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:border-gray-300:hover{border-color:rgb(234 233 229/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-blue-100:hover{background-color:rgb(219 232 251/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-blue-200:hover{background-color:rgb(171 209 252/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-blue-500:hover{background-color:rgb(37 109 208/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-blue-700:hover{background-color:rgb(23 70 138/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-emerald-500:hover{background-color:rgb(33 168 123/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-emerald-700:hover{background-color:rgb(16 108 82/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-gray-100:hover{background-color:rgb(250 250 248/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-gray-200:hover{background-color:rgb(240 240 238/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-gray-50:hover{background-color:rgb(252 252 250/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-gray-600:hover{background-color:rgb(126 124 118/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-gray-900:hover{background-color:rgb(30 30 30/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-green-100:hover{background-color:rgb(223 249 232/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-green-50:hover{background-color:rgb(241 252 244/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-green-700:hover{background-color:rgb(32 117 64/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-orange-100:hover{background-color:rgb(251 236 217/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-orange-700:hover{background-color:rgb(176 73 30/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-purple-200:hover{background-color:rgb(233 217 251/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-purple-50:hover{background-color:rgb(250 246 254/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-purple-700:hover{background-color:rgb(125 51 189/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-red-100:hover{background-color:rgb(251 229 229/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-red-200:hover{background-color:rgb(249 207 207/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-red-50:hover{background-color:rgb(253 243 243/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-red-700:hover{background-color:rgb(169 44 44/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-slate-100:hover{background-color:rgb(250 250 248/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-yellow-50:hover{background-color:rgb(252 250 234/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-yellow-700:hover{background-color:rgb(146 95 22/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-zinc-800:hover{background-color:rgb(61 61 61/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:bg-zinc-900:hover{background-color:rgb(30 30 30/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-blue-600:hover{color:rgb(31 92 180/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-blue-700:hover{color:rgb(23 70 138/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-emerald-700:hover{color:rgb(16 108 82/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-gray-600:hover{color:rgb(126 124 118/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-gray-700:hover{color:rgb(90 90 89/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-gray-900:hover{color:rgb(30 30 30/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-green-700:hover{color:rgb(32 117 64/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-purple-600:hover{color:rgb(146 69 216/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-purple-700:hover{color:rgb(125 51 189/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-red-500:hover{color:rgb(222 85 85/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .hover\:text-red-700:hover{color:rgb(169 44 44/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:border-blue-500:focus{border-color:rgb(37 109 208/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-blue-400:focus{--tw-ring-color: rgb(88 137 223/ var(--tw-ring-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-blue-400\/70:focus{--tw-ring-color: rgb(88 137 223/ .7) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-blue-500:focus{--tw-ring-color: rgb(37 109 208/ var(--tw-ring-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-emerald-300:focus{--tw-ring-color: rgb(122 219 180/ var(--tw-ring-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-orange-400\/70:focus{--tw-ring-color: rgb(232 148 79/ .7) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-red-400\/70:focus{--tw-ring-color: rgb(235 126 126/ .7) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-red-500:focus{--tw-ring-color: rgb(222 85 85/ var(--tw-ring-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-offset-gray-800:focus{--tw-ring-offset-color: #3d3d3d !important} html[data-panel-theme="claude"]:not(.dark) .focus\:ring-offset-gray-950:focus{--tw-ring-offset-color: #0e0e0e !important} html[data-panel-theme="claude"]:not(.dark) .focus-visible\:ring-emerald-500\/40:focus-visible{--tw-ring-color: rgb(33 168 123/ .4) !important} html[data-panel-theme="claude"]:not(.dark) .active\:border-blue-600:active{border-color:rgb(31 92 180/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .active\:bg-blue-600:active{background-color:rgb(31 92 180/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .active\:bg-blue-800:active{background-color:rgb(18 58 114/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .active\:bg-emerald-700:active{background-color:rgb(16 108 82/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .active\:bg-gray-950:active{background-color:rgb(14 14 14/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .active\:bg-purple-800:active{background-color:rgb(106 46 155/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .active\:bg-zinc-950:active{background-color:rgb(14 14 14/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .disabled\:bg-blue-400:disabled{background-color:rgb(88 137 223/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .disabled\:text-gray-500:disabled{color:rgb(165 164 162/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .group:hover .group-hover\:border-gray-300{border-color:rgb(234 233 229/ var(--tw-border-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .peer:checked~.peer-checked\:bg-emerald-500{background-color:rgb(33 168 123/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .prose-a\:text-blue-600 :is(:where(a):not(:where([class~=not-prose]{color:rgb(31 92 180/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) [class~=not-prose] *))){color:rgb(31 92 180/ var(--tw-text-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) .prose-pre\:bg-gray-900 :is(:where(pre):not(:where([class~=not-prose]{background-color:rgb(30 30 30/ var(--tw-bg-opacity, 1)) !important} html[data-panel-theme="claude"]:not(.dark) [class~=not-prose] *))){background-color:rgb(30 30 30/ var(--tw-bg-opacity, 1)) !important}