:root {
  --platform-sidebar: 244px;
  --platform-header: 64px;
  --platform-bg: oklch(0.972 0.012 255);
  --platform-surface: oklch(1 0 0);
  --platform-ink: oklch(0.22 0.04 255);
  --platform-muted: oklch(0.46 0.04 255);
  --platform-line: oklch(0.89 0.02 255);
  --platform-accent: #2563eb;
  --platform-sidebar-bg: oklch(0.28 0.08 255);
  --platform-sidebar-ink: oklch(0.96 0.02 255);
  --platform-sidebar-muted: oklch(0.78 0.04 255);
  --platform-radius: 14px;
  --platform-radius-sm: 10px;
}

body.platform-ready { background: var(--platform-bg); }
body.platform-ready > header { display: none !important; }
body.platform-ready > main { display: none !important; }
body.platform-ready > .app { display: none !important; }

.platform-shell { min-height: 100vh; display: grid; grid-template-columns: var(--platform-sidebar) minmax(0, 1fr); }
.platform-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--platform-sidebar); display: flex; flex-direction: column; background: var(--platform-sidebar-bg); color: var(--platform-sidebar-ink); z-index: 40; }
.platform-brand { height: var(--platform-header); display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid oklch(0.38 0.07 255); color: inherit; text-decoration: none; }
.platform-brand-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--platform-radius-sm); background: var(--platform-accent); color: white; font-weight: 800; }
.platform-brand-copy { min-width: 0; }
.platform-brand-copy strong { display: block; font-size: 15px; line-height: 1.2; }
.platform-brand-copy span { display: block; margin-top: 2px; color: var(--platform-sidebar-muted); font-size: 11px; }
.platform-nav { flex: 1; overflow-y: auto; padding: 16px 10px; }
.platform-nav-group { margin: 0 8px 7px; color: var(--platform-sidebar-muted); font-size: 11px; }
.platform-nav a { min-height: 40px; display: flex; align-items: center; gap: 10px; margin: 2px 0; padding: 8px 11px; border-radius: var(--platform-radius-sm); color: var(--platform-sidebar-muted); text-decoration: none; transition: background 150ms ease, color 150ms ease; }
.platform-nav a[hidden], .platform-sidebar-foot[hidden] { display: none; }
.platform-nav a:hover { color: var(--platform-sidebar-ink); background: oklch(0.35 0.09 255); }
.platform-nav a[aria-current="page"] { color: white; background: #2563eb; font-weight: 680; box-shadow: 0 6px 14px oklch(0.35 0.12 255 / .28); }
.platform-nav-icon { width: 20px; height: 20px; display: grid; place-items: center; flex: 0 0 auto; color: currentColor; font-size: 13px; font-weight: 750; }
.platform-sidebar-foot { padding: 12px 10px; border-top: 1px solid oklch(0.38 0.07 255); }
.platform-sidebar-foot button { width: 100%; min-height: 38px; display: flex; align-items: center; gap: 10px; padding: 8px 11px; border: 0; border-radius: var(--platform-radius-sm); background: transparent; color: var(--platform-sidebar-muted); text-align: left; cursor: pointer; }
.platform-sidebar-foot button:hover { color: white; background: oklch(0.35 0.09 255); }
.platform-stage { grid-column: 2; min-width: 0; }
.platform-topbar { height: var(--platform-header); position: sticky; top: 0; z-index: 35; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 24px; background: oklch(1 0 0 / .88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--platform-line); }
.platform-page-context { min-width: 0; }
.platform-breadcrumb { color: var(--platform-muted); font-size: 11px; }
.platform-page-title { margin-top: 2px; color: var(--platform-ink); font-size: 15px; font-weight: 730; }
.platform-user { display: flex; align-items: center; gap: 10px; min-width: 0; }
.platform-theme { width: 36px; height: 36px; flex: 0 0 auto; border: 1px solid var(--platform-line); border-radius: var(--platform-radius-sm); background: var(--platform-surface); color: var(--platform-ink); font-size: 13px; font-weight: 750; cursor: pointer; }
.platform-theme:hover { border-color: var(--platform-accent); color: var(--platform-accent); }
.platform-user-copy { display: grid; text-align: right; line-height: 1.25; }
.platform-user-copy strong { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.platform-user-copy span { color: var(--platform-muted); font-size: 11px; }
.platform-avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; background: oklch(0.93 0.05 255); color: var(--platform-accent); font-weight: 800; }
.platform-menu { display: none; width: 36px; height: 36px; border: 1px solid var(--platform-line); border-radius: var(--platform-radius-sm); background: white; color: var(--platform-ink); font-size: 19px; cursor: pointer; }
.platform-main { min-width: 0; }
.platform-main > main { width: min(1480px, 100%) !important; margin: 0 auto !important; padding: 22px 24px 38px !important; }
.platform-overlay { display: none; }

dialog.platform-dialog { width: min(520px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--platform-line); border-radius: var(--platform-radius); background: white; color: var(--platform-ink); box-shadow: 0 24px 70px oklch(0.15 0.03 250 / .28); }
dialog.platform-dialog::backdrop { background: oklch(0.12 0.02 252 / .54); }
.platform-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--platform-line); }
.platform-dialog-head h2 { margin: 0; font-size: 17px; }
.platform-dialog-head p { margin: 4px 0 0; color: var(--platform-muted); font-size: 12px; }
.platform-dialog-close { width: 32px; height: 32px; border: 0; border-radius: var(--platform-radius-sm); background: transparent; color: var(--platform-muted); font-size: 22px; cursor: pointer; }
.platform-dialog-close:hover { background: var(--platform-bg); color: var(--platform-ink); }
.platform-dialog-body { display: grid; gap: 14px; padding: 18px 20px; }
.platform-dialog-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 14px 20px; border-top: 1px solid var(--platform-line); background: var(--platform-bg); }

.platform-log-drawer { width: min(760px, 92vw); max-width: none; height: 100vh; max-height: none; margin: 0 0 0 auto; padding: 0; border: 0; border-left: 1px solid var(--platform-line); background: oklch(0.155 0.022 252); color: oklch(0.95 0.008 250); }
.platform-log-drawer::backdrop { background: oklch(0.12 0.02 252 / .42); }
.platform-log-layout { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.platform-log-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid oklch(0.28 0.02 252); }
.platform-log-head h2 { margin: 0; font-size: 16px; color: white; }
.platform-log-head p { margin: 5px 0 0; color: oklch(0.72 0.018 250); font-size: 12px; }
.platform-log-close { width: 34px; height: 34px; border: 1px solid oklch(0.34 0.02 252); border-radius: var(--platform-radius-sm); background: transparent; color: white; font-size: 21px; cursor: pointer; }
.platform-log-content { margin: 0; padding: 18px 20px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.65 ui-monospace, SFMono-Regular, Consolas, monospace; }
.platform-log-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 20px; border-top: 1px solid oklch(0.28 0.02 252); color: oklch(0.72 0.018 250); font-size: 12px; }
.platform-log-foot button { min-height: 34px; border: 1px solid oklch(0.36 0.02 252); border-radius: var(--platform-radius-sm); padding: 7px 10px; background: oklch(0.22 0.024 252); color: white; cursor: pointer; }

@media (max-width: 860px) {
  .platform-shell { grid-template-columns: minmax(0, 1fr); }
  .platform-sidebar { transform: translateX(-100%); transition: transform 180ms cubic-bezier(.22,1,.36,1); }
  body.platform-nav-open .platform-sidebar { transform: translateX(0); }
  .platform-stage { grid-column: 1; }
  .platform-menu { display: grid; place-items: center; }
  .platform-overlay { display: block; position: fixed; inset: 0; z-index: 39; border: 0; background: oklch(0.12 0.02 252 / .45); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
  body.platform-nav-open .platform-overlay { opacity: 1; pointer-events: auto; }
  .platform-topbar { padding: 0 14px; }
  .platform-main > main { padding: 16px 12px 28px !important; }
  .platform-user-copy span { display: none; }
}

html[data-theme="dark"] {
  color-scheme: dark;
  --platform-bg: oklch(0.18 0.018 255);
  --platform-surface: oklch(0.23 0.02 255);
  --platform-ink: oklch(0.94 0.012 255);
  --platform-muted: oklch(0.72 0.02 255);
  --platform-line: oklch(0.34 0.02 255);
  --platform-sidebar-bg: oklch(0.15 0.025 255);
  --platform-sidebar-ink: oklch(0.96 0.012 255);
  --platform-sidebar-muted: oklch(0.74 0.03 255);
}
html[data-theme="dark"] .platform-topbar { background: oklch(0.2 0.02 255 / .88); }
html[data-theme="dark"] .platform-menu,
html[data-theme="dark"] .platform-theme { background: var(--platform-surface); color: var(--platform-ink); }
html[data-theme="dark"] .platform-avatar { background: oklch(0.3 0.05 255); color: #93c5fd; }
html[data-theme="dark"] dialog.platform-dialog { background: var(--platform-surface); }
html[data-theme="dark"] .platform-dialog-actions { background: var(--platform-bg); }

@media (prefers-reduced-motion: reduce) {
  .platform-sidebar, .platform-overlay { transition-duration: .01ms !important; }
}