/*
 * DEVNOOD macOS Unified UI v7
 * Final stability layer for Android/mobile + desktop.
 * This file intentionally sits AFTER v6 and owns titlebars, modal geometry,
 * dashboard header/stats, files, docs, settings/promo/cache/free-key layouts.
 */

:root{
  --mac7-bg:#0b0b0d;
  --mac7-window:#1c1c1e;
  --mac7-toolbar:#242426;
  --mac7-card:#262629;
  --mac7-card-2:#202023;
  --mac7-control:#111113;
  --mac7-border:rgba(255,255,255,.10);
  --mac7-border-strong:rgba(255,255,255,.15);
  --mac7-text:#f5f5f7;
  --mac7-sub:#a1a1a6;
  --mac7-muted:#6e6e73;
  --mac7-blue:#0a84ff;
  --mac7-green:#30d158;
  --mac7-red:#ff5f57;
  --mac7-yellow:#febc2e;
  --mac7-ease:cubic-bezier(.22,.78,.2,1);
  --mac7-radius-window:16px;
  --mac7-radius-card:13px;
}

html,body.macos-ui{width:100%;max-width:100%;overflow-x:clip!important}
body.macos-ui{background:var(--mac7-bg)!important}
body.macos-ui *,body.macos-ui *::before,body.macos-ui *::after{box-sizing:border-box}
body.macos-ui img,body.macos-ui svg,body.macos-ui video,body.macos-ui canvas{max-width:100%}
body.macos-ui input,body.macos-ui textarea,body.macos-ui select,body.macos-ui button{min-width:0}

/* =========================================================
   ONE titlebar system only
   ========================================================= */
/* Remove every legacy/JS traffic-light cluster and every old pseudo painter. */
body.macos-ui .macos-traffic-lights,
body.macos-ui .macos-titlebar .macos-traffic-lights,
body.macos-ui #sidebar .macos-traffic-lights{display:none!important}

body.macos-ui #sidebar::before,
body.macos-ui #sidebar.macos-window-chrome::before,
body.macos-ui [data-modal-content]::before,
body.macos-ui [data-modal-content].has-macos-titlebar::before,
body.macos-ui [data-modal-content].macos-window-chrome::before,
body.macos-ui [data-modal-content].macos-window-chrome.has-macos-titlebar::before,
body.macos-ui.macos-page-docs aside::before,
body.macos-ui.macos-page-guide aside::before{
  content:none!important;display:none!important;box-shadow:none!important;background:none!important
}

/* Exactly one traffic-light set, painted on the actual titlebar. */
body.macos-ui .macos-titlebar::before{
  content:""!important;
  display:block!important;
  position:absolute!important;
  left:18px!important;
  top:50%!important;
  width:12px!important;
  height:12px!important;
  transform:translateY(-50%)!important;
  border-radius:50%!important;
  background:var(--mac7-red)!important;
  box-shadow:20px 0 0 var(--mac7-yellow),40px 0 0 #28c840!important;
  z-index:10!important;
  pointer-events:none!important;
}

body.macos-ui .macos-titlebar{
  position:sticky!important;
  top:0!important;
  z-index:30!important;
  isolation:isolate!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:10px!important;
  width:100%!important;
  min-width:0!important;
  min-height:66px!important;
  height:auto!important;
  margin:0!important;
  padding:10px 58px 10px 88px!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:1px solid var(--mac7-border)!important;
  border-radius:0!important;
  background:var(--mac7-toolbar)!important;
  background-image:none!important;
  box-shadow:0 1px 0 rgba(0,0,0,.22)!important;
}

body.macos-ui .macos-titlebar > .macos-title-main,
body.macos-ui .macos-titlebar > .macos-title-content,
body.macos-ui .macos-titlebar > :not(.macos-close):not(.macos-title-actions){
  flex:1 1 auto!important;
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
}

/* Wrapper-style headers (Download Manager etc.) keep the title in the safe lane. */
body.macos-ui .macos-titlebar > .macos-title-main.flex,
body.macos-ui .macos-titlebar > .macos-title-content.flex,
body.macos-ui .macos-titlebar > .flex:first-of-type{
  width:100%!important;
  min-width:0!important;
  justify-content:flex-start!important;
  align-items:center!important;
  gap:10px!important;
}

body.macos-ui .macos-titlebar h1,
body.macos-ui .macos-titlebar h2,
body.macos-ui .macos-titlebar h3,
body.macos-ui .macos-titlebar h4{
  min-width:0!important;
  max-width:100%!important;
  margin:0!important;
  color:var(--mac7-text)!important;
  font-size:1.02rem!important;
  line-height:1.28!important;
  font-weight:700!important;
  letter-spacing:-.012em!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}
body.macos-ui .macos-titlebar p,
body.macos-ui .macos-titlebar small{
  display:block!important;
  min-width:0!important;
  max-width:100%!important;
  margin:3px 0 0!important;
  color:var(--mac7-sub)!important;
  font-size:.76rem!important;
  line-height:1.32!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
}

body.macos-ui .macos-titlebar .macos-title-actions{
  flex:0 0 auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:8px!important;
  min-width:0!important;
  margin-left:auto!important;
  padding:0!important;
}

body.macos-ui .macos-titlebar .macos-close,
body.macos-ui .macos-titlebar button[onclick*="closeModal"],
body.macos-ui .macos-titlebar [data-modal-close],
body.macos-ui .macos-titlebar .app-settings-close{
  position:absolute!important;
  top:50%!important;
  right:12px!important;
  left:auto!important;
  transform:translateY(-50%)!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#8e8e93!important;
  background:#2c2c2e!important;
  border:1px solid rgba(255,255,255,.06)!important;
  border-radius:10px!important;
  z-index:14!important;
}
body.macos-ui .macos-titlebar .macos-close:hover,
body.macos-ui .macos-titlebar button[onclick*="closeModal"]:hover{color:#fff!important;background:#3a3a3c!important}

/* App Settings title icon lives INSIDE title lane, never under the dots. */
body.macos-ui .macos-titlebar .app-settings-title{
  display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;
  width:100%!important;min-width:0!important;margin:0!important;padding:0!important
}
body.macos-ui .macos-titlebar .app-settings-title-icon{flex:0 0 40px!important;width:40px!important;height:40px!important}
body.macos-ui .macos-titlebar .app-settings-title > .min-w-0{flex:1 1 auto!important;min-width:0!important}

/* =========================================================
   Modal window geometry
   ========================================================= */
body.macos-ui [data-modal]{
  align-items:center!important;justify-content:center!important;
  padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
  overflow:hidden!important;overscroll-behavior:none!important;
  background:rgba(0,0,0,.70)!important
}
body.macos-ui [data-modal-content]{
  position:relative!important;
  width:min(calc(100vw - 16px),1120px)!important;
  max-width:1120px!important;
  min-width:0!important;
  max-height:calc(100dvh - 16px)!important;
  margin:auto!important;
  overflow-x:hidden!important;
  border:1px solid var(--mac7-border-strong)!important;
  border-radius:var(--mac7-radius-window)!important;
  background:var(--mac7-window)!important;
  box-shadow:0 30px 90px rgba(0,0,0,.56),0 1px 8px rgba(0,0,0,.30)!important;
  transform-origin:50% 42%!important;
  will-change:transform,opacity!important;
  transition:transform 180ms var(--mac7-ease),opacity 150ms ease!important
}
body.macos-ui [data-modal].opacity-0 [data-modal-content],
body.macos-ui [data-modal-content].scale-95{transform:translate3d(0,8px,0) scale(.985)!important;opacity:.96!important}
body.macos-ui [data-modal-content]:not(.scale-95){transform:translate3d(0,0,0) scale(1)!important;opacity:1!important}

body.macos-ui [data-modal-content] > *,
body.macos-ui [data-modal-content] .grid > *,
body.macos-ui [data-modal-content] .flex > *{min-width:0!important;max-width:100%}

body.macos-ui [data-modal-content].macos-scroll-fallback,
body.macos-ui [data-modal-content] > .macos-modal-body,
body.macos-ui [data-modal-content] > .overflow-y-auto,
body.macos-ui [data-modal-content] > .modal-body,
body.macos-ui [data-modal-content] > .app-settings-body,
body.macos-ui [data-modal-content] > .auction-body{
  overflow-y:auto!important;overflow-x:hidden!important;overscroll-behavior:contain!important;-webkit-overflow-scrolling:touch!important
}
body.macos-ui [data-modal-content] input,
body.macos-ui [data-modal-content] select,
body.macos-ui [data-modal-content] textarea,
body.macos-ui [data-modal-content] pre,
body.macos-ui [data-modal-content] code{min-width:0!important;max-width:100%!important}

/* Legacy p-6 dialogs: titlebar full-bleed, body keeps comfortable inset. */
body.macos-ui [data-modal-content].macos-inline-pad{padding:0!important}
body.macos-ui [data-modal-content].macos-inline-pad > :not(.macos-titlebar):not(.app-toast-wrap){margin-left:18px!important;margin-right:18px!important}
body.macos-ui [data-modal-content].macos-inline-pad > .macos-titlebar + *{margin-top:16px!important}
body.macos-ui [data-modal-content].macos-inline-pad > :last-child:not(.macos-titlebar){margin-bottom:18px!important}

/* =========================================================
   Dashboard header + stats: title NEVER shares a row with cards on phones
   ========================================================= */
body.macos-ui .dashboard-header{
  position:relative!important;
  display:grid!important;
  grid-template-columns:minmax(190px,1fr) auto!important;
  align-items:center!important;
  gap:14px!important;
  min-width:0!important;
  min-height:84px!important;
  height:auto!important;
  padding:12px 16px!important;
  overflow:hidden!important;
  background:var(--mac7-toolbar)!important;
  border-bottom:1px solid var(--mac7-border)!important
}
body.macos-ui .dashboard-title-block,
body.macos-ui .dashboard-header .header-title{
  position:relative!important;display:block!important;width:100%!important;min-width:0!important;min-height:0!important;margin:0!important;padding:0!important
}
body.macos-ui .dashboard-header .header-title h2{
  position:static!important;display:block!important;margin:0!important;padding:0!important;
  color:var(--mac7-text)!important;font-size:1.12rem!important;line-height:1.28!important;font-weight:700!important;white-space:normal!important
}
body.macos-ui .dashboard-header .header-title p{
  position:static!important;display:block!important;margin:4px 0 0!important;padding:0!important;
  color:var(--mac7-sub)!important;font-size:.76rem!important;line-height:1.35!important;white-space:normal!important;overflow-wrap:anywhere!important
}
body.macos-ui .stats-container{
  display:flex!important;align-items:stretch!important;gap:7px!important;
  width:auto!important;max-width:min(60vw,630px)!important;min-width:0!important;
  margin:0!important;padding:0!important;overflow-x:auto!important;overflow-y:hidden!important;scrollbar-width:none!important
}
body.macos-ui .stats-container::-webkit-scrollbar{display:none!important}
body.macos-ui .stats-container .stat-card{
  flex:0 0 92px!important;display:flex!important;flex-direction:column!important;justify-content:center!important;
  min-width:92px!important;min-height:58px!important;width:92px!important;padding:8px 10px!important;
  overflow:hidden!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:11px!important;background:#2a2a2d!important
}
body.macos-ui .stats-container .stat-card > div:first-child{font-size:1.12rem!important;line-height:1.05!important;white-space:nowrap!important}
body.macos-ui .stats-container .stat-card > div:last-child{margin-top:4px!important;font-size:9px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}

/* =========================================================
   Files / key cards / common dashboard content
   ========================================================= */
body.macos-ui .dashboard-main,body.macos-ui .dashboard-content,body.macos-ui .dashboard-content > *{min-width:0!important;max-width:100%!important}
body.macos-ui #keysContainer,body.macos-ui #filesContainer,body.macos-ui #logsContainer{min-width:0!important;max-width:100%!important}
body.macos-ui #filesContainer .glass,body.macos-ui #filesContainer .glass *{min-width:0!important}
body.macos-ui #filesContainer .font-bold,body.macos-ui #filesContainer .font-mono,body.macos-ui #filesContainer .text-sm,body.macos-ui #filesContainer .text-xs{overflow-wrap:anywhere!important;word-break:break-word!important}
body.macos-ui .files-toolbar{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important}
body.macos-ui .files-toolbar-search{min-width:0!important;width:100%!important}
body.macos-ui .files-toolbar-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;min-width:0!important}
body.macos-ui .files-empty-state{min-height:220px!important;padding:30px 18px!important}

body.macos-ui .key-card-mobile{min-width:0!important;overflow:hidden!important}
body.macos-ui .key-card-mobile .key-device-track{height:9px!important;min-height:9px!important;border-radius:999px!important;overflow:hidden!important;background:rgba(255,255,255,.08)!important}
body.macos-ui .key-card-mobile .key-device-fill{height:100%!important;min-width:0!important;border-radius:inherit!important;transition:width 220ms var(--mac7-ease)!important}
body.macos-ui .key-card-mobile .key-device-value{white-space:nowrap!important}

/* =========================================================
   Settings / App Settings / Promo / FreeKey / Download / Cache
   ========================================================= */
body.macos-ui #settingsModal .settings-tabs,
body.macos-ui #appSettingsModal .app-settings-tabs{
  display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:4px!important;width:100%!important;min-width:0!important
}
body.macos-ui #settingsModal .settings-tab-btn,
body.macos-ui #appSettingsModal .app-settings-tab-btn{
  min-width:0!important;min-height:42px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important;
  white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important
}
body.macos-ui #settingsModal .grid,body.macos-ui #appSettingsModal .grid,body.macos-ui #promoModal .grid,body.macos-ui #downloadModal .grid,body.macos-ui #cacheModal .grid,body.macos-ui #freekeyModal .grid{min-width:0!important}

/* Cache cards were still too narrow on Android (e.g. "Memory" breaking). */
body.macos-ui #cacheModal [data-modal-content] .grid.md\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}
body.macos-ui #cacheModal [data-modal-content] #redis-stats > div,
body.macos-ui #cacheModal [data-modal-content] #opcache-stats > div{
  display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:start!important
}
body.macos-ui #cacheModal [data-modal-content] #redis-stats span,
body.macos-ui #cacheModal [data-modal-content] #opcache-stats span{min-width:0!important;overflow-wrap:normal!important;word-break:normal!important}

/* Free key stat grid stays 2x2 on phones, 4 across on desktop. */
body.macos-ui #freekeyModal #freekey-overview{grid-template-columns:repeat(4,minmax(0,1fr))!important}
body.macos-ui #freekeyModal #freekey-overview > *{min-width:0!important}

/* Download controls */
body.macos-ui #downloadModal [data-modal-content] .grid.grid-cols-2 > *{min-width:0!important}
body.macos-ui #downloadModal [data-modal-content] label{min-width:0!important}

/* Promo forms: no field can force horizontal overflow. */
body.macos-ui #promoModal input,body.macos-ui #promoModal select,body.macos-ui #promoModal textarea{width:100%!important;max-width:100%!important}

/* Online monitor: one clean macOS titlebar, actions stay in their own lane. */
body.macos-ui #onlineModal .online-modal-header{min-width:0!important}
body.macos-ui #onlineModal .online-title-row{min-width:0!important;display:flex!important;align-items:center!important;flex-wrap:wrap!important;gap:7px!important}
body.macos-ui #onlineModal .online-actions{display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:8px!important;min-width:0!important}
body.macos-ui #onlineModal .online-actions > button:not(.macos-close){min-width:42px!important;min-height:40px!important}

/* =========================================================
   API Docs — no duplicate lights, no content squeeze, no nested ghost window
   ========================================================= */
body.macos-ui.macos-page-docs{margin:0!important;padding:0!important;overflow:hidden!important;background:var(--mac7-bg)!important}
body.macos-ui.macos-page-docs #docsSidebar::before{content:none!important;display:none!important}
body.macos-ui.macos-page-docs .docs-sidebar-titlebar{
  position:relative!important;display:flex!important;align-items:center!important;min-height:66px!important;
  padding:9px 48px 9px 84px!important;background:var(--mac7-toolbar)!important;border-bottom:1px solid var(--mac7-border)!important
}
body.macos-ui.macos-page-docs .docs-sidebar-lights{position:absolute!important;left:18px!important;top:50%!important;transform:translateY(-50%)!important;display:flex!important;gap:8px!important}
body.macos-ui.macos-page-docs .docs-sidebar-lights span{width:12px!important;height:12px!important;flex:0 0 12px!important}
body.macos-ui.macos-page-docs .docs-main{min-width:0!important;overflow-x:hidden!important}
body.macos-ui.macos-page-docs .docs-main > *,body.macos-ui.macos-page-docs .docs-main section,body.macos-ui.macos-page-docs .docs-main .glass{min-width:0!important;max-width:100%!important}
body.macos-ui.macos-page-docs .docs-main h1,body.macos-ui.macos-page-docs .docs-main h2,body.macos-ui.macos-page-docs .docs-main h3,body.macos-ui.macos-page-docs .docs-main p,body.macos-ui.macos-page-docs .docs-main td,body.macos-ui.macos-page-docs .docs-main th{word-break:normal!important;overflow-wrap:break-word!important}
body.macos-ui.macos-page-docs .docs-main pre{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;white-space:pre!important}
body.macos-ui.macos-page-docs .docs-main pre code{white-space:inherit!important;word-break:normal!important;overflow-wrap:normal!important}
body.macos-ui.macos-page-docs .docs-main table{width:100%!important;max-width:100%!important}

/* =========================================================
   Mobile
   ========================================================= */
@media(max-width:767px){
  body.macos-ui [data-modal]{padding:5px!important}
  body.macos-ui [data-modal-content]{width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;max-height:calc(100dvh - 10px)!important;border-radius:14px!important}

  body.macos-ui .macos-titlebar{
    min-height:74px!important;
    padding:11px 48px 11px 82px!important;
    gap:8px!important
  }
  body.macos-ui .macos-titlebar::before{left:14px!important;width:11px!important;height:11px!important;box-shadow:18px 0 0 var(--mac7-yellow),36px 0 0 #28c840!important}
  body.macos-ui .macos-titlebar .macos-close,
  body.macos-ui .macos-titlebar button[onclick*="closeModal"],
  body.macos-ui .macos-titlebar .app-settings-close{right:8px!important;width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important}
  body.macos-ui .macos-titlebar .macos-title-actions{gap:6px!important}

  /* Dashboard title is a dedicated lane; menu button gets its own 50px. */
  body.macos-ui .dashboard-header{
    display:block!important;min-height:0!important;height:auto!important;padding:13px 12px 12px!important;overflow:visible!important
  }
  body.macos-ui .dashboard-title-block,
  body.macos-ui .dashboard-header .header-title{
    min-height:48px!important;margin:0 0 12px!important;padding:2px 0 0 54px!important
  }
  body.macos-ui .dashboard-header .header-title h2{font-size:1.08rem!important;line-height:1.28!important}
  body.macos-ui .dashboard-header .header-title p{font-size:.75rem!important;line-height:1.35!important;margin-top:4px!important}
  body.macos-ui .stats-container{
    display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:7px!important;
    width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;overflow:visible!important
  }
  body.macos-ui .stats-container .stat-card{
    width:100%!important;min-width:0!important;min-height:66px!important;padding:9px 8px!important;border-radius:11px!important
  }
  body.macos-ui .stats-container .stat-card:nth-child(-n+3){grid-column:span 2!important}
  body.macos-ui .stats-container .stat-card:nth-child(n+4){grid-column:span 3!important}
  body.macos-ui .stats-container .stat-card > div:first-child{font-size:20px!important}
  body.macos-ui .stats-container .stat-card > div:last-child{font-size:9px!important}

  body.macos-ui .dashboard-content{padding:12px!important;padding-bottom:calc(82px + env(safe-area-inset-bottom))!important;overflow-x:hidden!important}

  /* Files toolbar stacks cleanly. */
  body.macos-ui .files-toolbar{grid-template-columns:minmax(0,1fr)!important;gap:9px!important}
  body.macos-ui .files-toolbar-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;width:100%!important;gap:8px!important}
  body.macos-ui .files-toolbar-actions > *{width:100%!important;min-width:0!important}

  /* Settings/app settings tabs are 2x2, fields one column. */
  body.macos-ui #settingsModal .settings-tabs,body.macos-ui #appSettingsModal .app-settings-tabs{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.macos-ui #settingsModal .grid.grid-cols-2,body.macos-ui #appSettingsModal .grid.grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  body.macos-ui #settingsModal .col-span-2,body.macos-ui #appSettingsModal .col-span-2{grid-column:auto!important}

  /* FreeKey 2x2. */
  body.macos-ui #freekeyModal #freekey-overview{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}
  body.macos-ui #freekeyModal #freekey-overview > *{padding:16px 10px!important;border-radius:14px!important}

  /* Cache stats one column on phones to prevent labels/value wrapping. */
  body.macos-ui #cacheModal [data-modal-content] .grid.md\:grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
  body.macos-ui #cacheModal [data-modal-content] .grid.grid-cols-2.md\:grid-cols-4{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Download cards may stay 2-up if they fit; source selector stacks on very narrow screens. */
  body.macos-ui #downloadModal [data-modal-content] .grid.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))!important}

  /* Online monitor header: title on first line, Stop/refresh under it; close remains top-right. */
  body.macos-ui #onlineModal .macos-titlebar-onlineModal{display:block!important;min-height:122px!important;padding:12px 48px 12px 82px!important}
  body.macos-ui #onlineModal .online-title-row{min-height:38px!important;padding:0!important}
  body.macos-ui #onlineModal .online-actions{
    display:grid!important;grid-template-columns:minmax(0,1fr) 44px!important;gap:8px!important;
    width:calc(100% + 34px)!important;margin:10px 0 0 -34px!important;padding:0!important
  }
  body.macos-ui #onlineModal .online-actions > button:not(.macos-close){width:100%!important;min-width:0!important;min-height:42px!important}

  /* Docs: drawer only. Kill all background/pseudo traffic lights behind it. */
  body.macos-ui.macos-page-docs > .docs-shell,body.macos-ui.macos-page-docs > .flex.docs-shell{
    display:block!important;width:calc(100vw - 10px)!important;max-width:calc(100vw - 10px)!important;height:calc(100dvh - 10px)!important;margin:5px!important;overflow:hidden!important
  }
  body.macos-ui.macos-page-docs #docsSidebar{
    position:fixed!important;top:6px!important;bottom:6px!important;left:6px!important;z-index:130!important;
    width:min(86vw,330px)!important;max-width:min(86vw,330px)!important;height:calc(100dvh - 12px)!important;
    transform:translate3d(calc(-100% - 18px),0,0)!important;pointer-events:none!important;
    border:1px solid var(--mac7-border-strong)!important;border-radius:14px!important;box-shadow:24px 0 70px rgba(0,0,0,.56)!important;background:#202023!important;
    transition:transform 200ms var(--mac7-ease)!important
  }
  body.macos-ui.macos-page-docs.docs-sidebar-open #docsSidebar{transform:translate3d(0,0,0)!important;pointer-events:auto!important}
  body.macos-ui.macos-page-docs .docs-sidebar-titlebar{min-height:66px!important;padding:9px 46px 9px 80px!important}
  body.macos-ui.macos-page-docs .docs-sidebar-lights{left:14px!important;gap:7px!important}
  body.macos-ui.macos-page-docs .docs-sidebar-lights span{width:11px!important;height:11px!important;flex-basis:11px!important}
  body.macos-ui.macos-page-docs .docs-main{width:100%!important;min-width:0!important;max-width:100%!important;height:100%!important;padding:0 14px 28px!important;overflow-y:auto!important;overflow-x:hidden!important}
  body.macos-ui.macos-page-docs .docs-mobile-head{min-height:64px!important;margin:0 -14px 18px!important;padding:9px 14px 9px 62px!important}
  body.macos-ui.macos-page-docs .docs-main table{display:block!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  body.macos-ui.macos-page-docs .docs-main table th,body.macos-ui.macos-page-docs .docs-main table td{min-width:116px!important}
}

@media(max-width:390px){
  body.macos-ui .stats-container{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  body.macos-ui .stats-container .stat-card{grid-column:auto!important}
  body.macos-ui .stats-container .stat-card:last-child{grid-column:1/-1!important}
  body.macos-ui #downloadModal [data-modal-content] .grid.grid-cols-2{grid-template-columns:minmax(0,1fr)!important}
}

/* Mobile performance: keep the macOS material look without full-screen GPU blur. */
@media(max-width:900px),(pointer:coarse) and (max-width:1200px){
  body.macos-ui [data-modal],body.macos-ui [data-modal-content],body.macos-ui .dashboard-layout,body.macos-ui #sidebar,body.macos-ui .dashboard-header,body.macos-ui .glass,body.macos-ui .glass-card{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  body.macos-ui [data-modal-content]{background:var(--mac7-window)!important}
  body.macos-ui *{scroll-behavior:auto!important}
}

@media(prefers-reduced-motion:reduce){
  body.macos-ui [data-modal],body.macos-ui [data-modal-content],body.macos-ui #sidebar,body.macos-ui #docsSidebar,body.macos-ui .docs-backdrop,body.macos-ui .key-device-fill{transition:none!important;animation:none!important}
}