/* YulaTools workspace refresh — calm command centre, clear hierarchy, fast paint */
:root {
  --yt-bg: #070b12;
  --yt-panel-strong: rgba(18, 26, 40, .96);
  --yt-line: rgba(157, 177, 211, .16);
  --yt-line-strong: rgba(111, 231, 201, .34);
  --yt-text: #f4f7fb;
  --yt-muted: #9ba9bd;
  --yt-accent: #6fe7c9;
  --yt-radius-lg: 26px;
  --yt-radius-md: 16px;
}
html[data-theme="dark"] body {
  background: var(--yt-bg) !important;
  background-image: radial-gradient(circle at 16% 8%, rgba(52,111,132,.2), transparent 32%), radial-gradient(circle at 86% 18%, rgba(91,81,164,.16), transparent 28%), linear-gradient(180deg, #080d16 0%, #070b12 58%, #090d15 100%) !important;
  background-attachment: fixed;
}
html[data-theme="light"] body {
  background: #f3f7fb !important;
  background-color: #f3f7fb !important;
  background-image: radial-gradient(circle at 14% 8%, rgba(58, 153, 142, .13), transparent 30%), radial-gradient(circle at 88% 12%, rgba(111, 132, 225, .12), transparent 28%), linear-gradient(180deg, #f7fafc 0%, #eef3f8 100%) !important;
  color: #172235 !important;
}
html[data-theme="light"] .main-header { background: rgba(247,250,252,.86) !important; border-bottom-color: rgba(35,55,82,.14) !important; box-shadow: 0 12px 32px rgba(25,45,72,.08) !important; }
html[data-theme="light"] .logo-tagline, html[data-theme="light"] .tools-orientation-copy p, html[data-theme="light"] .tool-card-desc, html[data-theme="light"] .orientation-stat span { color: #607089 !important; }
html[data-theme="light"] .search-box { background: rgba(255,255,255,.9) !important; border-color: rgba(35,55,82,.16) !important; }
html[data-theme="light"] #toolSearchInput { color: #172235 !important; }
html[data-theme="light"] .category-tabs-container { background: rgba(255,255,255,.9) !important; border-color: rgba(35,55,82,.14) !important; box-shadow: 0 14px 32px rgba(25,45,72,.1) !important; }
html[data-theme="light"] .menu-item { color: #52627a !important; }
html[data-theme="light"] .menu-item:hover { background: #edf4f5 !important; border-color: rgba(35,55,82,.12) !important; color: #172235 !important; }
html[data-theme="light"] .menu-item.active { color: #08251e !important; background: #5dd4b7 !important; }
html[data-theme="light"] .tools-orientation { background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(235,243,249,.96)) !important; border-color: rgba(35,55,82,.14) !important; box-shadow: 0 20px 44px rgba(25,45,72,.1) !important; }
html[data-theme="light"] .tools-orientation h1, html[data-theme="light"] .orientation-stat strong { color: #172235 !important; }
html[data-theme="light"] .orientation-stat { background: rgba(255,255,255,.72) !important; border-color: rgba(35,55,82,.12) !important; }
html[data-theme="light"] .grid-toolbar { border-bottom-color: rgba(35,55,82,.13) !important; }
html[data-theme="light"] .grid-quick-picks button { background: rgba(255,255,255,.8) !important; border-color: rgba(35,55,82,.14) !important; }
html[data-theme="light"] .grid-quick-picks button:hover, html[data-theme="light"] .grid-quick-picks button:focus-visible { background: rgba(93,212,183,.12) !important; border-color: rgba(38,151,130,.42) !important; }
html[data-theme="light"] .pinned-tools-shelf, html[data-theme="light"] #recentToolsSection { background: rgba(255,255,255,.72) !important; border-color: rgba(35,55,82,.13) !important; }
html[data-theme="light"] .pinned-tools-shelf { background: linear-gradient(90deg, rgba(93,212,183,.12), rgba(255,255,255,.72)) !important; border-color: rgba(38,151,130,.24) !important; }
html[data-theme="light"] .tool-card { background: linear-gradient(160deg, rgba(255,255,255,.98), rgba(240,246,250,.98)) !important; border-color: rgba(35,55,82,.14) !important; box-shadow: 0 12px 26px rgba(25,45,72,.09) !important; }
html[data-theme="light"] .tool-card:hover { border-color: rgba(38, 151, 130, .46) !important; box-shadow: 0 18px 34px rgba(25,45,72,.14) !important; }
html[data-theme="light"] #toolsGrid .tool-card .tool-card-title, html[data-theme="light"] .tools-grid.tools-list-view .tool-list-title { color: #172235 !important; }
html[data-theme="light"] .tool-card-footer { border-top-color: rgba(35,55,82,.11) !important; }
html[data-theme="light"] .tools-grid.tools-list-view .tool-list-row { background: rgba(255,255,255,.84) !important; border-color: rgba(35,55,82,.14) !important; }
html[data-theme="light"] .tools-grid.tools-list-view .tool-list-row:hover { background: rgba(93,212,183,.1) !important; border-color: rgba(38,151,130,.4) !important; }
html[data-theme="light"] .tools-grid.tools-list-view .tool-list-desc { color: #607089 !important; }
#particleCanvas, .ambient-glow, .noise-overlay { opacity: .14 !important; pointer-events: none; }
.main-header { background: rgba(7,11,18,.78) !important; border-bottom: 1px solid var(--yt-line) !important; box-shadow: 0 12px 36px rgba(0,0,0,.18) !important; backdrop-filter: blur(20px) saturate(1.25) !important; }
.header-inner, .layout-fullwidth, .main-footer > *, .portal-welcome, .tool-seo-section { width: min(1440px, calc(100% - 48px)) !important; margin-inline: auto !important; }
.header-inner { min-height: 76px !important; gap: 18px !important; }
.brand-logo { gap: 12px !important; }
.logo-title { letter-spacing: -.04em !important; }
.logo-tagline { color: var(--yt-muted) !important; }
.search-box { max-width: 520px !important; min-height: 48px !important; border: 1px solid var(--yt-line) !important; border-radius: 14px !important; background: rgba(255,255,255,.055) !important; box-shadow: none !important; }
.search-box:focus-within { border-color: var(--yt-line-strong) !important; box-shadow: 0 0 0 4px rgba(111,231,201,.08) !important; }
#toolSearchInput { font-size: 15px !important; color: var(--yt-text) !important; }
.category-tabs-container { position: sticky !important; top: 78px !important; z-index: 20 !important; width: min(1440px, calc(100% - 48px)) !important; margin: 22px auto 18px !important; padding: 6px !important; border: 1px solid var(--yt-line) !important; border-radius: var(--yt-radius-md) !important; background: rgba(10,15,24,.9) !important; box-shadow: 0 16px 40px rgba(0,0,0,.2) !important; }
.category-tabs-bar { display: flex !important; gap: 6px !important; overflow-x: auto !important; overflow-y: hidden !important; scrollbar-width: thin !important; padding: 2px !important; }
.category-tabs-bar::-webkit-scrollbar { height: 4px; }
.category-tabs-bar::-webkit-scrollbar-thumb { background: rgba(111,231,201,.35); border-radius: 999px; }
.menu-item { flex: 0 0 auto !important; min-height: 42px !important; padding: 0 15px !important; border: 1px solid transparent !important; border-radius: 11px !important; white-space: nowrap !important; line-height: 1 !important; font-size: 14px !important; letter-spacing: 0 !important; }
.menu-item:hover { background: rgba(255,255,255,.06) !important; border-color: var(--yt-line) !important; }
.menu-item.active { color: #07130f !important; background: var(--yt-accent) !important; box-shadow: 0 8px 18px rgba(111,231,201,.16) !important; }
.cat-icon-wrap { margin-right: 8px !important; }
.count-pill { margin-left: 8px !important; }
.tools-orientation { display: grid !important; grid-template-columns: minmax(0,1fr) auto !important; align-items: center !important; gap: 24px !important; margin: 18px auto 24px !important; padding: 28px 30px !important; border: 1px solid var(--yt-line) !important; border-radius: var(--yt-radius-lg) !important; background: linear-gradient(135deg, rgba(20,31,46,.92), rgba(13,20,31,.86)) !important; box-shadow: 0 22px 55px rgba(0,0,0,.18) !important; }
.tools-eyebrow { color: var(--yt-accent) !important; letter-spacing: .12em !important; }
.tools-orientation h1 { max-width: 760px !important; margin: 8px 0 9px !important; font-size: clamp(26px,3vw,42px) !important; line-height: 1.05 !important; letter-spacing: -.045em !important; }
.tools-orientation-copy p { max-width: 650px !important; color: var(--yt-muted) !important; font-size: 16px !important; line-height: 1.55 !important; }
.tools-orientation-stats { display: grid !important; grid-template-columns: repeat(3,minmax(92px,1fr)) !important; gap: 10px !important; }
.orientation-stat { min-width: 104px !important; padding: 14px !important; border: 1px solid var(--yt-line) !important; border-radius: 14px !important; background: rgba(255,255,255,.045) !important; }
.orientation-stat strong { font-size: 22px !important; color: var(--yt-text) !important; }
.orientation-stat span { color: var(--yt-muted) !important; font-size: 12px !important; }
.grid-toolbar { width: 100% !important; margin: 0 0 14px !important; padding: 2px 2px 12px !important; border-bottom: 1px solid var(--yt-line) !important; }
.grid-toolbar-left, .grid-toolbar-right { min-width: 0 !important; }
.grid-toolbar-right { gap: 10px !important; }
.grid-quick-picks { gap: 8px !important; }
.grid-quick-picks button { min-height: 34px !important; border: 1px solid var(--yt-line) !important; border-radius: 10px !important; background: rgba(255,255,255,.045) !important; }
.grid-quick-picks button:hover, .grid-quick-picks button:focus-visible { border-color: var(--yt-line-strong) !important; background: rgba(111,231,201,.1) !important; }
.pinned-tools-shelf, #recentToolsSection { margin: 14px 0 !important; padding: 14px 16px !important; border: 1px solid var(--yt-line) !important; border-radius: 16px !important; background: rgba(255,255,255,.028) !important; }
.pinned-tools-shelf { border-color: rgba(111,231,201,.2) !important; background: linear-gradient(90deg, rgba(111,231,201,.06), rgba(255,255,255,.025)) !important; }
.pinned-tools-shelf button, #recentToolsSection button { border-radius: 10px !important; }
.tool-card:focus-visible, .menu-item:focus-visible, .grid-quick-picks button:focus-visible, .pinned-tools-shelf button:focus-visible, #recentToolsSection button:focus-visible { outline: 3px solid rgba(111,231,201,.72) !important; outline-offset: 3px !important; }
.tools-grid { grid-template-columns: repeat(auto-fill,minmax(255px,1fr)) !important; gap: 16px !important; }
.tool-card { min-height: 228px !important; padding: 21px !important; border: 1px solid var(--yt-line) !important; border-radius: var(--yt-radius-md) !important; background: linear-gradient(160deg, rgba(18,27,41,.96), rgba(12,18,29,.92)) !important; box-shadow: 0 12px 28px rgba(0,0,0,.14) !important; transition: transform .2s ease,border-color .2s ease,box-shadow .2s ease !important; }
.tool-card { content-visibility: auto !important; contain-intrinsic-size: 228px !important; }
.tool-card:hover { transform: translateY(-4px) !important; border-color: rgba(111,231,201,.38) !important; box-shadow: 0 18px 35px rgba(0,0,0,.25), 0 0 0 1px rgba(111,231,201,.06) !important; }
.tool-card-title { font-size: 18px !important; line-height: 1.2 !important; letter-spacing: -.02em !important; }
.tool-card-desc { min-height: 44px !important; color: var(--yt-muted) !important; line-height: 1.5 !important; }
.tool-card-footer { margin-top: auto !important; padding-top: 16px !important; border-top: 1px solid rgba(157,177,211,.1) !important; }
.tool-open-button { appearance: none; border: 0; cursor: pointer; font: inherit; color: inherit; }
.tool-open-button:focus-visible { outline: 2px solid var(--yt-accent) !important; outline-offset: 3px !important; border-radius: 6px; }
.webos-icon:focus-visible { outline: 2px solid var(--yt-accent) !important; outline-offset: 3px !important; border-radius: 12px; }
.tools-grid.tools-list-view { gap: 10px !important; }
.tools-grid.tools-list-view .tool-list-row { min-height: 68px !important; padding: 12px 16px !important; border: 1px solid var(--yt-line) !important; border-radius: 14px !important; background: rgba(18,27,41,.82) !important; box-shadow: none !important; }
.tools-grid.tools-list-view .tool-list-row:hover { border-color: var(--yt-line-strong) !important; background: rgba(111,231,201,.06) !important; transform: translateX(3px) !important; }
.tools-grid.tools-list-view .tool-list-title { font-size: 15px !important; color: var(--yt-text) !important; }
.tools-grid.tools-list-view .tool-list-desc { color: var(--yt-muted) !important; font-size: 13px !important; }
.tools-grid.tools-list-view .tool-list-actions { color: var(--yt-accent) !important; }
#toolWorkspaceCard, .tool-workspace-card { border-radius: var(--yt-radius-lg) !important; border-color: var(--yt-line) !important; background: var(--yt-panel-strong) !important; }
.main-footer { margin-top: 72px !important; border-top-color: var(--yt-line) !important; }
@media (max-width: 860px) { .header-inner, .layout-fullwidth, .main-footer > *, .portal-welcome, .tool-seo-section, .category-tabs-container { width: min(100% - 28px,680px) !important; } .tools-orientation { grid-template-columns: 1fr !important; padding: 23px !important; } .tools-orientation-stats { max-width: 520px !important; } .tools-grid { grid-template-columns: repeat(2,minmax(0,1fr)) !important; } }
@media (max-width: 540px) { .category-tabs-container { top: 68px !important; width: calc(100% - 20px) !important; } .header-inner { min-height: 68px !important; } .logo-tagline, .logo-version-tag { display: none !important; } .tools-orientation { margin-top: 14px !important; padding: 20px !important; } .tools-orientation-stats { grid-template-columns: repeat(3,1fr) !important; gap: 7px !important; } .orientation-stat { min-width: 0 !important; padding: 10px 7px !important; } .orientation-stat strong { font-size: 18px !important; } .tools-grid { grid-template-columns: 1fr !important; } .tool-card { min-height: 0 !important; contain-intrinsic-size: 190px !important; } .tools-grid.tools-list-view .tool-list-row { align-items: flex-start !important; } .tools-grid.tools-list-view .tool-list-desc { white-space: normal !important; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* === MOBILE-FIRST PASS: touch comfort, no clipping, focused workspace === */
@media (max-width: 820px) {
  html, body { overflow-x: hidden !important; }
  #particleCanvas, .ambient-glow { display: none !important; }
  .layout-body.layout-fullwidth { padding: 10px 12px 96px !important; }
  .header-inner { width: 100% !important; padding: 10px 12px !important; }
  .header-brand-group { max-width: calc(100% - 46px) !important; }
  .back-to-studio-link { display: none !important; }
  .brand-logo { min-width: 0 !important; gap: 8px !important; }
  .brand-logo .logo-title { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .ecosystem-toggle-btn { min-width: 44px !important; min-height: 44px !important; padding: 8px 10px !important; }
  .ecosystem-btn-label, .ecosystem-chevron { display: none !important; }
  .header-actions { gap: 8px !important; padding: 2px 0 6px !important; scrollbar-width: none !important; }
  .header-actions::-webkit-scrollbar { display: none !important; }
  .header-actions > * { min-width: 44px !important; min-height: 44px !important; }
  .search-box, .search-box input { min-height: 46px !important; }
  .category-tabs-container { margin-inline: -2px !important; border-radius: 14px !important; }
  .category-tabs-bar { padding: 6px !important; gap: 6px !important; }
  .category-tabs-bar .menu-item { min-height: 44px !important; padding-inline: 12px !important; font-size: .82rem !important; }
  .tools-orientation { margin-top: 12px !important; padding: 20px 18px !important; border-radius: 18px !important; }
  .tools-orientation h1 { font-size: clamp(1.45rem, 7vw, 2rem) !important; line-height: 1.08 !important; }
  .tools-orientation p { font-size: .92rem !important; line-height: 1.55 !important; }
  .tools-orientation-stats { display: grid !important; grid-template-columns: repeat(3, minmax(0,1fr)) !important; width: 100% !important; gap: 8px !important; }
  .orientation-stat { min-width: 0 !important; padding: 11px 6px !important; text-align: center !important; }
  .orientation-stat strong { font-size: 1.15rem !important; }
  .orientation-stat span { font-size: .72rem !important; white-space: nowrap !important; }
  .grid-toolbar { padding: 12px 0 10px !important; gap: 12px !important; }
  .grid-toolbar-left { width: 100% !important; justify-content: space-between !important; }
  .grid-toolbar-left .section-title { font-size: 1.02rem !important; }
  .results-count { font-size: .76rem !important; white-space: nowrap !important; }
  .grid-quick-picks { width: 100% !important; overflow-x: auto !important; flex-wrap: nowrap !important; scrollbar-width: none !important; padding-bottom: 2px !important; }
  .grid-quick-picks::-webkit-scrollbar { display: none !important; }
  .grid-quick-picks button { flex: 0 0 auto !important; min-height: 42px !important; }
  .grid-toolbar-right { width: 100% !important; justify-content: space-between !important; }
  .tool-sort-select { min-height: 44px !important; max-width: 190px !important; }
  .view-mode-toggle, .view-mode-btn { min-height: 44px !important; }
  .view-mode-btn { width: 44px !important; }
  .tools-grid { grid-template-columns: 1fr !important; gap: 11px !important; }
  .tool-card { min-height: 0 !important; padding: 17px !important; border-radius: 16px !important; }
  .tool-card-title { font-size: 1.05rem !important; }
  .tool-card-desc { min-height: auto !important; font-size: .9rem !important; }
  .tool-card-fav { min-width: 44px !important; min-height: 44px !important; }
  .tool-list-row { min-height: 76px !important; padding: 12px !important; gap: 11px !important; }
  .tool-list-icon { width: 42px !important; height: 42px !important; }
  .tool-list-heading { gap: 6px !important; flex-wrap: wrap !important; }
  .tool-list-title { font-size: .98rem !important; }
  .tool-list-desc { font-size: .82rem !important; line-height: 1.4 !important; }
  .tool-list-actions .tool-open-link { display: none !important; }
  .tool-workspace-card { padding: 16px !important; border-radius: 18px !important; }
  .tool-workspace-card > div[style*="grid-template-columns"], .tool-workspace-card form[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
  .tool-workspace-card input, .tool-workspace-card select, .tool-workspace-card textarea, .tool-workspace-card button { max-width: 100% !important; box-sizing: border-box !important; }
  .tool-workspace-card textarea { min-height: 132px !important; }
}
@media (max-width: 390px) {
  .layout-body.layout-fullwidth { padding-inline: 10px !important; }
  .header-inner { padding-inline: 10px !important; }
  .tools-orientation-stats { gap: 5px !important; }
  .orientation-stat { padding-inline: 3px !important; }
  .orientation-stat span { font-size: .66rem !important; }
  .grid-toolbar-left { align-items: flex-start !important; flex-direction: column !important; gap: 4px !important; }
  .grid-toolbar-right { gap: 7px !important; }
  .tool-sort-select { max-width: 170px !important; font-size: .8rem !important; }
}

/* Layout recovery guard: keeps the portal usable when a browser opens it in a
   narrow/zoomed viewport instead of letting desktop controls collapse into a
   tall left-hand column. */
html, body { width: 100% !important; min-width: 320px !important; }
#app { width: 100vw !important; min-width: 0 !important; max-width: none !important; overflow-x: clip !important; }
.main-header, .main-content, .layout-body, .layout-body.layout-fullwidth { width: 100% !important; min-width: 0 !important; }
.header-inner { width: min(1360px, calc(100% - 32px)) !important; min-width: 0 !important; }
.header-brand-group, .header-actions, .search-box { min-width: 0 !important; }
.more-tools-menu { max-width: calc(100vw - 24px) !important; max-height: min(68vh, 560px) !important; overflow: auto !important; }
@media (max-width: 820px) {
  #webOsStartMenu { width: min(340px, calc(100vw - 24px)) !important; max-width: calc(100vw - 24px) !important; }
  .header-inner { display: grid !important; grid-template-columns: minmax(0, 1fr) auto !important; align-items: center !important; gap: 10px !important; padding: 10px 14px !important; }
  .header-brand-group { width: auto !important; overflow: hidden !important; }
  .header-brand-group .header-divider { display: none !important; }
  .brand-logo .logo-version-tag, .brand-logo .logo-tagline { display: none !important; }
  .brand-logo .logo-title { font-size: 1.08rem !important; }
  .logo-icon-clean { width: 34px !important; height: 34px !important; }
  .ecosystem-toggle-btn { padding-inline: 9px !important; }
  .search-box { grid-column: 1 / -1 !important; grid-row: 2 !important; order: initial !important; width: 100% !important; }
  .header-actions { grid-column: 1 / -1 !important; grid-row: 3 !important; width: 100% !important; order: initial !important; justify-content: flex-start !important; overflow-x: auto !important; padding-bottom: 2px !important; }
  .layout-body.layout-fullwidth { padding-inline: 14px !important; }
  .more-tools-menu { position: fixed !important; top: auto !important; right: 12px !important; bottom: 78px !important; width: min(420px, calc(100vw - 24px)) !important; }
}

/* === VISUAL SYSTEM PASS: clearer hierarchy, calmer density === */
.main-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
    background: color-mix(in srgb, var(--yt-bg, #07101b) 88%, transparent) !important;
    border-bottom: 1px solid rgba(157,177,211,.14) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
}
.layout-body.layout-fullwidth { padding-top: 18px !important; }
.category-tabs-container {
    position: sticky !important;
    top: 82px !important;
    z-index: 90 !important;
    overflow: hidden !important;
    border: 1px solid rgba(157,177,211,.12) !important;
    background: rgba(7,14,24,.78) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,.16) !important;
}
.category-tabs-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 7px !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain !important;
    scrollbar-width: none !important;
    padding: 7px !important;
}
.category-tabs-bar::-webkit-scrollbar { display: none !important; }
.category-tabs-bar .menu-item {
    flex: 0 0 auto !important;
    min-height: 42px !important;
    white-space: nowrap !important;
    padding: 8px 12px !important;
    border: 1px solid transparent !important;
    border-radius: 11px !important;
    transition: background .18s ease, border-color .18s ease, transform .18s ease !important;
}
.category-tabs-bar .menu-item:hover { transform: translateY(-1px) !important; border-color: rgba(111,231,201,.22) !important; }
.category-tabs-bar .menu-item.active { background: linear-gradient(135deg, rgba(111,231,201,.16), rgba(111,231,201,.055)) !important; border-color: rgba(111,231,201,.42) !important; box-shadow: inset 0 1px rgba(255,255,255,.08) !important; }
.tools-orientation {
    position: relative !important;
    overflow: hidden !important;
    background: linear-gradient(120deg, rgba(18,29,46,.96), rgba(12,20,33,.86)) !important;
    box-shadow: 0 18px 40px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.06) !important;
}
.tools-orientation::after {
    content: "";
    position: absolute;
    width: 220px; height: 220px;
    right: -70px; top: -120px;
    border: 1px solid rgba(111,231,201,.17);
    border-radius: 50%;
    box-shadow: 0 0 0 28px rgba(111,231,201,.035), 0 0 0 56px rgba(111,231,201,.02);
    pointer-events: none;
}
.tools-orientation-copy, .tools-orientation-stats { position: relative !important; z-index: 1 !important; }
.tools-orientation h1 { max-width: 680px !important; letter-spacing: -.035em !important; }
.grid-toolbar { position: sticky !important; top: 145px !important; z-index: 70 !important; background: rgba(7,14,24,.82) !important; backdrop-filter: blur(16px) !important; -webkit-backdrop-filter: blur(16px) !important; }
.tool-card, .tool-list-row { contain: layout paint !important; }
.tool-card-icon { box-shadow: 0 8px 18px rgba(0,0,0,.16), inset 0 1px rgba(255,255,255,.1) !important; }
.tool-card:hover .tool-card-icon { transform: translateY(-2px) rotate(-2deg) !important; }
.tools-grid.tools-list-view .tool-list-row { contain: layout paint !important; }
@media (max-width: 820px) {
    .main-header { position: relative !important; }
    .category-tabs-container { position: sticky !important; top: 0 !important; margin-top: 8px !important; }
    .grid-toolbar { position: relative !important; top: auto !important; }
    .tools-orientation::after { right: -130px; }
}
@media (prefers-reduced-motion: reduce) {
    .category-tabs-bar .menu-item, .tool-card:hover .tool-card-icon { transform: none !important; }
}

/* === DEEP MOBILE RELEASE PASS: dock clearance + readable interaction density === */
@media (max-width: 820px) {
  #main-content { padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important; }
  .main-content { padding-bottom: calc(116px + env(safe-area-inset-bottom)) !important; }
  .yula-global-dock,
  .ambient-audio-dock { max-width: calc(100vw - 20px) !important; }
  .tool-card { min-width: 0 !important; overflow: hidden !important; }
  .tool-card-title, .tool-card-desc, .tool-list-title, .tool-list-desc { overflow-wrap: anywhere !important; }
  .tool-card-footer { gap: 8px !important; flex-wrap: wrap !important; }
  .tool-card-footer .tool-open-link { margin-left: auto !important; }
  .active-tool-section, .tool-workspace-card { scroll-margin-top: 14px !important; }
  .modal-content, .cmd-palette-dialog { width: min(100% - 20px, 720px) !important; max-height: min(86dvh, 760px) !important; }
  .toast-container { inset-inline: 10px !important; bottom: calc(82px + env(safe-area-inset-bottom)) !important; width: auto !important; }
}

@media (max-width: 390px) {
  .grid-quick-picks button { max-width: 190px !important; overflow: hidden !important; text-overflow: ellipsis !important; }
  .tool-card { padding: 14px !important; }
  .tool-card-footer .tool-open-link { width: 100% !important; margin-left: 0 !important; justify-content: center !important; }
}

/* === TOOLS MOBILE PERFORMANCE BASELINE === */
@media (max-width: 820px) {
  /* style.css adds a full-page background drift and workspace breathing
     animation for desktop. Keep the mobile compositor idle instead. */
  html[data-theme="dark"] body {
    animation: none !important;
    background-attachment: scroll !important;
  }

  html[data-theme="dark"] #toolWorkspaceCard {
    animation: none !important;
  }

  .main-header,
  .category-tabs-container,
  .grid-toolbar,
  .more-tools-menu,
  .tool-workspace-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .main-header {
    background: rgba(7, 11, 18, .97) !important;
  }

  .category-tabs-container,
  .grid-toolbar {
    background: rgba(7, 14, 24, .96) !important;
  }

  .tools-grid,
  .pinned-tools-shelf,
  #recentToolsSection,
  .tool-seo-section {
    contain: layout paint;
  }

  .tool-card,
  .tool-list-row,
  .grid-quick-picks button,
  .menu-item {
    touch-action: manipulation;
  }

  .tool-card:hover,
  .tools-grid.tools-list-view .tool-list-row:hover,
  .category-tabs-bar .menu-item:hover {
    transform: none !important;
  }
}
.tools-load-more-wrap {
  display: flex;
  justify-content: center;
  padding: 22px 12px 8px;
}

.tools-load-more {
  min-height: 44px;
  gap: 8px;
  border-color: rgba(105, 230, 232, .34);
}

.tools-load-more span {
  color: var(--yt-muted, #94a3b8);
  font-size: .78rem;
}

@media (max-width: 760px) {
  /* Tool dialogs/toasts are partly created inline by individual tools. Keep
     those transient layers opaque on phones to avoid expensive blur passes. */
  body [style*="backdrop-filter"],
  body [style*="-webkit-backdrop-filter"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  /* Particle animation is intentionally disabled on low-power devices;
     removing the unused canvas also avoids an extra compositing surface. */
  #particleCanvas { display: none !important; }

  .tools-load-more-wrap { padding-top: 18px; }
  .tools-load-more { width: 100%; justify-content: center; }
}

@media (prefers-reduced-data: reduce) {
  #particleCanvas { display: none !important; }
}

/* Touch-safe Web OS window geometry. Desktop offsets can otherwise place a
   newly opened window partly outside a narrow viewport. */
@media (max-width: 820px) {
  #webOsDesktop { overflow: hidden !important; }
  #webOsWindowArea { max-width: 100%; overflow: hidden; }
  #webOsWindowArea .webos-window {
    left: max(12px, env(safe-area-inset-left)) !important;
    top: 12px !important;
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    height: min(72vh, 520px) !important;
    max-height: calc(100% - 24px) !important;
  }
  #webOsWindowArea .webos-win-header {
    min-height: 48px;
    touch-action: none;
  }
  #webOsWindowArea .webos-win-header button {
    min-width: 44px;
    min-height: 44px;
  }
  #webOsWindowArea .webos-win-body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }
  #webOsWindowArea .win-resize-handle { min-width: 28px; min-height: 28px; }
}

/* Accessibility safety net: later product-specific rules must not re-enable
   motion after the user's reduced-motion preference has been detected. */
@media (prefers-reduced-motion: reduce) {
  html[data-theme="dark"] body,
  html[data-theme="light"] body,
  .tool-card,
  .tool-list-row,
  .category-tabs-bar .menu-item,
  #toolWorkspaceCard,
  #toolWorkspaceCard::before,
  #toolWorkspaceCard::after,
  #particleCanvas,
  .ambient-audio-dock,
  .ambient-audio-dock::before,
  .ambient-audio-dock::after {
    animation: none !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  .tool-card:hover,
  .tool-card:hover .tool-card-icon,
  .tools-grid.tools-list-view .tool-list-row:hover,
  .category-tabs-bar .menu-item:hover {
    transform: none !important;
  }
}