/* RAW Beta 3.22.9.2026. Intentionally isolated from stable and archived views.
   Existing DOM, settings and persistence remain the source of truth. */
body[data-hub-channel="beta"]:is([data-raw-beta-version="3.22.9.2026"],[data-raw-beta-version="2.12.9.2026"]) {
  --text: var(--text-main);
  --muted: var(--text-soft);
  --accent-readable: var(--accent);
  --sidebar-width: 232px;
  --sidebar-collapsed: 76px;
  --radius-xl: 24px;
  --radius-lg: 20px;
  --radius-md: 12px;
  font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  font-size: 14px;
  line-height: 1.5;
  background: var(--surface) !important;
  color: var(--text-main);
  border: 0 !important;
  box-shadow: none !important;
  &::before, &::after { display: none !important; }
  &[data-surface="dark"] {
    --surface: #111315; --surface-2: #191c1f; --surface-3: #202428; --surface-4: #2b3035;
    --text-main: #f0f2f4; --text-soft: #a9b0b8; --line: #ffffff12; --line-strong: #ffffff24;
    color-scheme: dark;
  }
  &[data-surface="light"] {
    --surface: #f4f5f7; --surface-2: #ffffff; --surface-3: #f0f2f4; --surface-4: #e5e8ec;
    --text-main: #20252b; --text-soft: #606975; --line: #17212b14; --line-strong: #17212b2b;
    color-scheme: light;
    --accent-readable: color-mix(in srgb,var(--accent) 38%,#18231c);
  }
  &:is([data-surface="comet"], [data-surface="google"]) { color-scheme: dark; }
  & :is(button, input, textarea, select) { font-family: inherit; }
  & button { cursor: pointer; }
  & :is(button, a, input, textarea, select, summary):focus-visible {
    outline: 2px solid var(--accent) !important; outline-offset: 3px; box-shadow: none;
  }
  & button:disabled { cursor: not-allowed; opacity: .45; }
  & :is(h1,h2,h3,h4) { color: var(--text-main); letter-spacing: -.035em; text-wrap: balance; }
  & :is(p,small) { line-height: 1.6; }
  &[data-surface="light"] :is(.panel-kicker,.settings-kicker,.side-nav-item.is-active .side-icon,.settings-navigation-item.is-active .settings-navigation-icon,.settings-navigation-note span,.uec-ai-chat > header span,.settings-cloud-account > span,.status-pill) { color: var(--accent-readable) !important; }
  & .raw-app { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
  & .side-rail { background: var(--surface-2) !important; border: 0 !important; border-right: 1px solid var(--line) !important; box-shadow: none !important; padding: 16px 12px; }
  & .side-brand { padding: 14px 10px 26px; gap: 12px; }
  & .side-brand img { width: 30px; height: 30px; object-fit: contain; }
  & .side-brand-copy strong { font-size: 15px; letter-spacing: .025em; }
  & .side-brand-copy small { color: var(--text-soft); font-size: 11px; }
  & .side-nav { gap: 5px; }
  & .side-nav::before { font-size: 10px; letter-spacing: .13em; color: var(--text-soft); opacity: .7; padding: 0 12px 12px; }
  & .side-nav-item { min-height: 44px; border: 1px solid transparent !important; border-radius: 11px; padding: 11px 13px; gap: 12px; color: var(--text-soft); font-size: 13px; font-weight: 550; background: transparent; box-shadow: none !important; }
  & .side-nav-item:hover { color: var(--text-main); background: var(--surface-3); }
  & .side-nav-item.is-active { color: var(--text-main) !important; background: var(--surface-4) !important; border-color: var(--line) !important; box-shadow: none !important; }
  & .side-nav-item.is-active .side-icon { color: var(--accent); }
  & :is(.side-icon,.beta-line-icon) { display: inline-grid; place-items: center; flex-shrink: 0; width: 20px; height: 20px; }
  & .raw-design-icon { display: block; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
  & .account-dock { border: 1px solid var(--line) !important; border-radius: 14px; padding: 12px; background: var(--surface-3) !important; box-shadow: none !important; gap: 10px; }
  & .account-dock:hover { border-color: var(--line-strong) !important; }
  & .account-avatar { box-shadow: none !important; }
  &[data-surface] .raw-main { background: transparent !important; padding-inline: clamp(20px,4vw,64px); }
  &[data-surface] .content-panel:not(#panel-settings) { background: transparent !important; }
  & .top-search-meta { position: static; justify-content: center; margin: -12px 0 20px; }
  & #hubVersionBadge { background: var(--surface-3); border-color: var(--line); color: var(--text-soft); font-size: 10px; box-shadow: none; }
  & .hub-floating-actions { top: 18px; right: 24px; background: var(--surface-2) !important; border-color: var(--line) !important; box-shadow: 0 4px 18px #00000010 !important; backdrop-filter: none; }
  & .top-search-shell { width: min(860px,100%); margin: 0 auto; padding-top: clamp(90px,12vh,140px); padding-bottom: 0; }
  & .search-home-header { margin-bottom: 28px; }
  & .search-home-header h1 { font-size: clamp(36px,5vw,56px); font-weight: 650; letter-spacing: -.065em; margin-block: 10px; }
  & .search-home-header p { color: var(--text-soft); font-size: 14px; max-width: 520px; margin-inline: auto; }
  & #homeChannelLabel { color: var(--text-soft); font-size: 10px; letter-spacing: .16em; }
  & .comet-search { padding: 16px 18px; gap: 12px; background: var(--surface-2) !important; border: 1px solid var(--line-strong) !important; border-radius: 22px; box-shadow: 0 12px 32px #00000012 !important; }
  & .comet-search:focus-within { border-color: var(--accent-line) !important; }
  & #browserInput { font-size: 18px; font-weight: 400; padding: 9px 4px 17px; color: var(--text-main); }
  & #browserInput::placeholder { color: var(--text-soft); }
  & .search-lower { gap: 12px; padding-top: 12px; border-color: var(--line); }
  & .engine-tabs { background: var(--surface-3) !important; border: 0 !important; border-radius: 10px; padding: 3px; gap: 2px; }
  & .engine-tab { min-height: 34px; padding: 7px 12px; border: 0 !important; border-radius: 8px; font-size: 12px; color: var(--text-soft); background: transparent; box-shadow: none !important; }
  & .engine-tab.is-active { background: var(--surface-4) !important; color: var(--text-main) !important; box-shadow: 0 1px 4px #00000012 !important; }
  & :is(.search-submit,.uec-ai-composer button[type="submit"]) { display: grid; place-items: center; width: 42px; height: 42px; min-width: 42px; padding: 0 !important; border: 0 !important; border-radius: 13px; background: var(--accent) !important; color: #101410 !important; box-shadow: none !important; }
  & .quick-links { gap: 8px; margin-block: 22px 32px; flex-wrap: wrap; }
  & .quick-links a { min-height: 36px; padding: 8px 14px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 10px; font-size: 12px; box-shadow: none; }
  & #panel-search { max-width: 1000px; margin-inline: auto; }
  & .widget-board { gap: 16px; grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr)); }
  & .widget-board > * { border-radius: 20px; border: 1px solid var(--line); box-shadow: 0 4px 16px #00000008; }
  & .incognito-search-control { border: 1px solid var(--line) !important; border-radius: 14px; background: var(--surface-2) !important; padding: 16px 18px; margin-top: 24px; }
  & .incognito-search-copy span { color: var(--text-soft); }
  & .panel-intro h2 { font-size: clamp(28px,3vw,40px); font-weight: 650; }
  & :is(.panel-subtitle,.directory-toolbar-copy p) { color: var(--text-soft); font-size: 13px; }
  & :is(.apps-toolbar,.directory-search,.workspace-launcher-search) { border-color: var(--line) !important; background: var(--surface-2); border-radius: 12px; box-shadow: none; }
  & :is(.game-tile,.beta-app-card) { border: 1px solid var(--line) !important; border-radius: 18px; box-shadow: none !important; transition: border-color .16s,transform .16s; }
  & :is(.game-tile,.beta-app-card):hover { border-color: var(--line-strong) !important; transform: translateY(-2px); }
  & .beta-app-card { background: var(--surface-2) !important; padding: 22px; }
  & .beta-app-card::before { opacity: .12; }
  & :is(.beta-app-card p,.beta-app-card small) { color: var(--text-soft) !important; }
  & :is(.beta-version-chip,.beta-release-mark) { background: var(--surface-3) !important; color: var(--text-soft) !important; border: 1px solid var(--line) !important; font-size: 10px; letter-spacing: .08em; }
  & :is(.beta-center-tabs,.uec-tabs) { gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); }
  & .beta-center-tabs button { min-height: 38px; border-radius: 8px; opacity: 1; background: transparent !important; color: var(--text-soft) !important; border: 0 !important; }
  & .beta-center-tabs button.is-active { background: var(--surface-4) !important; color: var(--text-main) !important; }
  & :is(.beta-profile-card,.beta-profile-options,.widget-menu,.workspace-launcher-panel,.account-panel,.beta-welcome-card,.uec-ai-side-panel,.uec-ai-planner) { background: var(--surface-2) !important; color: var(--text-main); border: 1px solid var(--line-strong); border-radius: 20px; box-shadow: 0 20px 70px #00000030; }
  & .beta-profile-card { width: min(320px,calc(100vw - 24px)); padding: 10px; }
  & .beta-profile-identity { padding: 14px 12px 20px; }
  & :is(.beta-profile-row,.beta-profile-disclosure > summary) { padding: 12px; min-height: 52px; border-radius: 10px; color: var(--text-main); }
  & :is(.beta-profile-row,.beta-profile-disclosure > summary):hover { background: var(--surface-3); }
  & .beta-profile-options { max-height: min(320px,60dvh); overflow-y: auto; padding: 6px; }
  & .beta-profile-options button { min-height: 42px; color: var(--text-main); border: 0; border-radius: 8px; }
  & .beta-welcome-card { padding: 32px; }
  & .beta-welcome-card h2 { font-size: clamp(26px,3vw,36px); line-height: 1.2; }
  & .beta-release-columns > div { background: var(--surface-3); border-color: var(--line); border-radius: 14px; }
  & .beta-release-item { font-size: 12px; line-height: 1.6; }
  & #panel-settings .settings-shell { border-radius: 22px; border: 1px solid var(--line-strong); overflow: hidden; }
  & #panel-settings .settings-navigation { padding: 20px 12px; }
  & #panel-settings .settings-pages { padding: 28px 32px 40px; }
  & #panel-settings .settings-navigation-item { border-radius: 10px; min-height: 54px; }
  & #panel-settings .settings-card { border-color: var(--line); padding-block: 24px; }
  & #panel-settings .settings-card h3 { font-size: 17px; }
  & #panel-settings :is(input:not([type="checkbox"]):not([type="range"]):not([type="color"]),textarea) { border: 1px solid var(--line-strong); border-radius: 10px; min-height: 42px; padding: 10px 12px; color: var(--text-main); }
  & #panel-settings .raw-settings-select > summary { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-3); font-weight: 500; }
  & #panel-settings .raw-settings-select-options { background: var(--surface-3); border-color: var(--line-strong); }
  & #panel-uec-ai .uec-ai-workspace { border: 1px solid var(--line); border-radius: 20px; background: var(--surface-2); box-shadow: none; overflow: hidden; }
  & .uec-ai-history { background: var(--surface-3); padding: 14px; border-right: 1px solid var(--line); }
  & .uec-ai-model-note { font-size: 11px; gap: 3px; background: var(--surface-2); border-color: var(--line); }
  & .uec-ai-chat > header { padding: 16px 20px; }
  & .uec-ai-chat > header button { min-height: 36px; }
  & .uec-ai-composer { border-radius: 16px; background: var(--surface-3); box-shadow: none; }
  & .uec-ai-empty h2 { font-weight: 600; }
  & .uec-ai-orb { border: 1px solid var(--line); background: var(--surface-3); color: var(--text-main); border-radius: 20px; }
  & .uec-ai-message.user { background: var(--surface-4); border-radius: 18px 18px 4px 18px; }
  & .raw-chat-history-toggle { display: none; }
  & .beta-settings-close { display: grid; place-items: center; background: var(--surface-4); color: var(--text-main); }
  & .rail-toggle { display: grid; place-items: center; border-radius: 10px; }
  @media (max-width: 760px) {
    & .raw-main { padding-inline: 16px !important; }
    & .top-search-shell { padding-top: 88px; }
    & .search-home-header { margin-bottom: 22px; }
    & .search-home-header p { font-size: 13px; }
    & .comet-search { padding: 12px; border-radius: 18px; }
    & #browserInput { font-size: 16px; }
    & .search-lower { flex-wrap: wrap; }
    & .engine-tabs { flex: 1 1 100%; display: flex; overflow-x: auto; }
    & .engine-tab { flex: 1; min-height: 40px; padding-inline: 7px; }
    & .search-tools { margin-left: auto; }
    & .quick-links { margin-block: 18px 24px; }
    & .quick-links a { min-height: 42px; }
    & .widget-board { grid-template-columns: minmax(0,1fr) !important; }
    & .widget-board > * { min-width: 0; max-width: 100%; }
    & .beta-release-columns { grid-template-columns: 1fr; }
    & .beta-welcome-card { padding: 24px 18px; max-height: calc(100dvh - 24px); }
    & .beta-profile-card { left: 12px; bottom: max(12px,env(safe-area-inset-bottom)); }
    & .beta-profile-options { position: static; width: 100%; box-shadow: none; border: 0; margin-top: 4px; }
    & #panel-settings .settings-shell { height: calc(100dvh - 16px); grid-template-rows: auto minmax(0,1fr); }
    & #panel-settings .settings-navigation { padding: 10px; }
    & #panel-settings .settings-navigation-head { min-height: 36px; }
    & #panel-settings .settings-navigation-head p, & #panel-settings .settings-navigation-note { display: none; }
    & #panel-settings .settings-navigation-list { padding-top: 8px; gap: 6px; }
    & #panel-settings .settings-navigation-item { flex: 0 0 auto; min-height: 44px; padding: 10px; }
    & #panel-settings .settings-navigation-item small { display: none; }
    & #panel-settings .settings-pages { padding: 18px 16px 32px; overflow-y: auto; }
    & #panel-uec-ai .uec-ai-workspace { position: relative; height: calc(100dvh - 180px); min-height: 300px; }
    & .raw-chat-history-toggle { display: inline-flex; align-items: center; gap: 6px; }
    & .uec-ai-chat > header { padding: 10px; flex-wrap: wrap; gap: 6px; }
    & .uec-ai-chat > header button { min-height: 40px; padding: 8px; font-size: 12px; }
    & .uec-ai-workspace.is-history-open .uec-ai-history { display: flex; flex-direction: column; position: absolute; z-index: 5; inset: 96px 12px 12px; height: auto; border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: 0 12px 40px #00000040; }
    & .uec-ai-messages { padding: 16px; }
    & .uec-ai-composer textarea { font-size: 16px; }
    & .uec-ai-side-panel { inset: 8px; width: auto; }
    & .uec-ai-side-head { flex-wrap: wrap; gap: 8px; }
    & .uec-ai-planner-grid { grid-template-columns: 1fr; }
    & .uec-ai-weekdays { flex-wrap: wrap; }
  }
  @media (prefers-reduced-motion: reduce) {
    & *, & *::before, & *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; }
  }
}
