/* Keep the octopus at the edges; reserve the screen for the working dashboard. */
:root { color-scheme: dark; --grid-workspace-top: clamp(72px, 12dvh, 120px); --grid-workspace-edge: clamp(12px, 2vw, 32px); --grid-workspace-bottom: 18px; }
body { background: #080f19; }
.grid-creature-frame { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #080f19; }
.grid-creature-frame > img, .grid-tentacle-canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.grid-tentacle-canvas { display: none; }
.grid-tips-ready > img { visibility: hidden; }
.grid-tips-ready > .grid-tentacle-canvas { display: block; }
.octopus-motion-toggle { position: fixed; z-index: 35; right: var(--grid-workspace-edge); top: calc(var(--grid-workspace-top) - 44px); bottom: auto; display: flex; align-items: center; gap: 7px; border: 1px solid #6b7b925e; border-radius: 30px; padding: 7px 12px; background: #0b121ee8; color: #cad4e4; font-size: 12px; cursor: pointer; }
.octopus-motion-toggle:hover { border-color: #b2bfd4; }
.octopus-motion-toggle:focus-visible { outline: 2px solid #eef2fa; outline-offset: 3px; }
.octopus-motion-toggle:disabled { cursor: default; opacity: .65; }
.platform-shell { position: relative; z-index: 1; margin: var(--grid-workspace-top) var(--grid-workspace-edge) var(--grid-workspace-bottom); min-height: 0; height: calc(100dvh - var(--grid-workspace-top) - var(--grid-workspace-bottom)); border: 1px solid #8c9bb143; border-radius: 10px; box-shadow: 0 10px 45px #0008; background: #090f18f5; }
.platform-shell > .sidebar { position: absolute; width: 210px; left: 0; top: 0; bottom: 0; padding: 20px 14px; border-radius: 10px 0 0 10px; overflow-y: auto; overscroll-behavior: contain; background: #0b111bf5; }
.platform-shell .workspace-main { margin-left: 210px; height: 100%; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; border-radius: 0 10px 10px 0; }
.platform-shell .topbar { flex-shrink: 0; min-height: 66px; height: auto; padding: 13px 24px; gap: 12px; background: #0c1420; }
.platform-shell .workspace-content { padding: 26px 24px; }
.platform-shell .workspace-label { margin: 20px 0; }
.platform-shell .nav-group { margin-bottom: 18px; }
.platform-shell .nav-group button { font-size: 14px; }
.platform-shell .sidebar .brand img { width: 45px; height: 45px; object-fit: contain; }
.platform-shell .sidebar .brand strong { font-size: 21px; }
.platform-shell .workspace-footer { flex-shrink: 0; }
.platform-shell .tool-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
.access-shell { position: relative; z-index: 1; margin: var(--grid-workspace-top) var(--grid-workspace-edge) var(--grid-workspace-bottom); min-height: calc(100dvh - var(--grid-workspace-top) - var(--grid-workspace-bottom)); background: #090f18f5; border: 1px solid #7b8da348; border-radius: 10px; }
.access-shell .access-header { padding: 20px 28px; }
.access-shell .access-main { min-height: 0; }
.loading-screen { position: relative; z-index: 1; margin: var(--grid-workspace-top) var(--grid-workspace-edge) var(--grid-workspace-bottom); min-height: calc(100dvh - var(--grid-workspace-top) - var(--grid-workspace-bottom)); background: #090f18; border-radius: 10px; }
@media (max-width: 1500px) { .platform-shell .tool-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .platform-shell .header-right { gap: 10px; } }
@media (max-width: 1050px) { .platform-shell > .sidebar { width: 185px; padding-inline: 10px; } .platform-shell .workspace-main { margin-left: 185px; } .platform-shell .topbar { padding-inline: 16px; flex-wrap: wrap; } .platform-shell .workspace-content { padding: 22px 16px; } .platform-shell .sidebar .brand small { font-size: 7px; } }
@media (max-width: 720px) {
  /* Phones: the octopus becomes a compact fixed banner (cropped, undistorted) and the workspace scrolls as a normal page. */
  :root { --grid-banner: 100vw; --grid-grip: clamp(64px, 18vw, 84px); }
  .grid-creature-frame { bottom: auto; height: var(--grid-banner); }
  .grid-creature-frame > img { object-fit: cover; object-position: 50% 0; }
  .grid-tentacle-canvas { display: none !important; }
  .grid-tips-ready > img { visibility: visible; }
  .octopus-motion-toggle { display: none; }
  .platform-shell, .access-shell, .loading-screen { margin: var(--grid-grip) 12px 20px; height: auto; min-height: calc(100dvh - var(--grid-grip) - 20px); border-radius: 14px; overflow-x: clip; }
  .platform-shell .workspace-main { margin-left: 0; height: auto; overflow: visible; border-radius: 14px; }
  .platform-shell > .sidebar { position: fixed; left: 0; top: 0; bottom: 0; height: 100dvh; width: min(300px, 86vw); padding: 22px 14px calc(20px + env(safe-area-inset-bottom)); border-radius: 0 16px 16px 0; box-shadow: 0 0 70px #000c; visibility: hidden; transform: translateX(-110%); transition: transform .22s ease, visibility .22s; }
  .platform-shell > .sidebar.open { visibility: visible; transform: translateX(0); }
  .platform-shell > .sidebar .sidebar-close { display: grid; position: absolute; top: 18px; right: 10px; }
  .platform-shell .topbar { position: sticky; top: 0; z-index: 20; min-height: 58px; padding: 9px 12px; gap: 8px; flex-wrap: nowrap; background: #0c1420f0; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px 14px 0 0; }
  .platform-shell .breadcrumbs { display: flex; flex: 1; min-width: 0; }
  .platform-shell .breadcrumbs > span { display: none; }
  .platform-shell .breadcrumbs strong { font-size: 15px; font-weight: 550; color: #e3e9f3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .platform-shell .header-right { margin-left: 0; flex-wrap: nowrap; flex-shrink: 0; gap: 8px; }
  .platform-shell .preview-start { padding: 8px 11px; font-size: 13px; gap: 7px; }
  .platform-shell .preview-start .preview-full { display: none; }
  .platform-shell .preview-start .preview-short { display: inline; }
  .platform-shell .workspace-content { padding: 20px 14px 24px; }
  .platform-shell .page-heading { flex-wrap: wrap; align-items: flex-start; gap: 12px 16px; }
  .platform-shell .page-heading > div:first-child { flex: 1 1 220px; min-width: 0; }
  .platform-shell .library-controls { flex-direction: column; align-items: stretch; gap: 12px; }
  .platform-shell .library-controls { min-width: 0; }
  .platform-shell .filter-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; box-sizing: border-box; width: calc(100% + 28px); max-width: calc(100% + 28px); min-width: 0; margin: 0 -14px; padding: 2px 14px; gap: 4px; }
  .platform-shell .filter-tabs::-webkit-scrollbar { display: none; }
  .platform-shell .filter-tabs button { white-space: nowrap; flex-shrink: 0; }
  .platform-shell .tool-grid { grid-template-columns: 1fr; }
  .platform-shell .table-toolbar { flex-wrap: wrap; gap: 10px; }
  .platform-shell .table-toolbar .search-field { width: 100%; }
  .platform-shell .workspace-footer { padding: 16px 14px; flex-wrap: wrap; gap: 8px; }
  .access-shell .access-header { height: auto; min-height: 64px; padding: 14px 16px; }
}
@media (max-width: 480px) {
  .platform-shell .header-right .badge { display: none; }
}
@media (prefers-reduced-motion: reduce) { .platform-shell > .sidebar { transition: none; } }