/* Site skins change presentation only. Authorization, content, and behavior remain server-owned. */
body {
  padding-left: var(--skin-nav-width, 15rem);
  background: var(--skin-bg, #f5f7fa);
  font-family: var(--skin-font, Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif);
  font-size: var(--skin-font-size, 16px);
}
.topbar { width: var(--skin-nav-width, 15rem); border-color: var(--skin-nav-line, #20364a); background: var(--sidebar); }
.dashboard, .admin-page { width: min(var(--skin-content-width, 1400px), calc(100% - var(--skin-gutter, 2.5rem))); }
.panel, .admin-section, .device-search-panel, .site-skin-preview-frame, .skin-selection-copy {
  border-width: var(--skin-border-width, 1px);
  border-radius: var(--skin-radius, 1rem);
  box-shadow: var(--skin-panel-shadow, none);
}
.button, input, select, textarea { border-radius: var(--skin-control-radius, .65rem); }
.nav-link { border-radius: var(--skin-control-radius, .55rem); }
h1, h2 { font-family: var(--skin-heading-font, inherit); }

.skin-command-center {
  --skin-bg: #f5f7fa; --skin-radius: 1rem; --skin-control-radius: .65rem;
  --skin-content-width: 1400px; --skin-nav-width: 15rem;
}
.skin-layered-material {
  --sidebar: #332f54; --ink: #211f2b; --muted: #696575; --surface: #fffbff; --surface-raised: #f4eff9;
  --line: #ded8e6; --accent: #6750a4; --accent-deep: #eaddff; --focus: #7f67be; --danger: #ba1a1a;
  --danger-soft: #ffdad6; --skin-bg: #f7f2fa; --skin-radius: 1.75rem; --skin-control-radius: 999px;
  --skin-panel-shadow: 0 10px 28px rgb(55 45 80 / 12%); --skin-content-width: 1280px;
}
.skin-acrylic-flow {
  --sidebar: rgb(22 38 73 / 82%); --ink: #12213f; --muted: #536582; --surface: rgb(255 255 255 / 72%);
  --surface-raised: rgb(238 245 255 / 76%); --line: rgb(111 137 183 / 35%); --accent: #315db6;
  --accent-deep: rgb(207 224 255 / 75%); --skin-bg: linear-gradient(135deg, #dcecff, #eee3ff 55%, #d8f2f4);
  --skin-radius: 1.25rem; --skin-control-radius: .55rem; --skin-panel-shadow: 0 18px 48px rgb(42 65 110 / 18%);
}
.skin-acrylic-flow :is(.panel, .admin-section, .device-search-panel, .topbar) { backdrop-filter: blur(20px) saturate(135%); }
.skin-modular-grid {
  --sidebar: #161616; --ink: #161616; --muted: #525252; --surface: #fff; --surface-raised: #f4f4f4;
  --line: #8d8d8d; --accent: #0f62fe; --accent-deep: #edf5ff; --danger: #da1e28; --skin-bg: #f4f4f4;
  --skin-radius: 0; --skin-control-radius: 0; --skin-border-width: 1px; --skin-content-width: 1600px; --skin-gutter: 1.5rem;
}
.skin-modular-grid :is(.admin-section, .panel) { border-top-width: 3px; }
.skin-spectrum-canvas {
  --sidebar: #292929; --ink: #222; --muted: #666; --surface: #fff; --surface-raised: #f8f8f8;
  --line: #d5d5d5; --accent: #1473e6; --accent-deep: #e8f3ff; --skin-bg: #e9e9e9;
  --skin-radius: .35rem; --skin-control-radius: .3rem; --skin-panel-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}
.skin-commerce-deck {
  --sidebar: #202223; --ink: #202223; --muted: #6d7175; --surface: #fff; --surface-raised: #f6f6f7;
  --line: #dfe3e8; --accent: #007a5c; --accent-deep: #e3f5ef; --danger: #b42318; --skin-bg: #f6f6f2;
  --skin-radius: .75rem; --skin-control-radius: .45rem; --skin-content-width: 1200px; --skin-panel-shadow: 0 1px 4px rgb(31 33 36 / 10%);
}
.skin-developer-primer {
  --sidebar: #24292f; --ink: #1f2328; --muted: #636c76; --surface: #fff; --surface-raised: #f6f8fa;
  --line: #d0d7de; --accent: #0969da; --accent-deep: #ddf4ff; --danger: #cf222e; --skin-bg: #fff;
  --skin-radius: .375rem; --skin-control-radius: .375rem; --skin-content-width: 1280px; --skin-font-size: 14px;
}
.skin-developer-primer :is(code, pre, .badge, .device-fact dd) { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.skin-collaborative-focus {
  --sidebar: #172b4d; --ink: #172b4d; --muted: #5e6c84; --surface: #fff; --surface-raised: #f4f5f7;
  --line: #dfe1e6; --accent: #6554c0; --accent-deep: #eae6ff; --danger: #de350b; --skin-bg: #f7f8fa;
  --skin-radius: .75rem; --skin-control-radius: .35rem; --skin-content-width: 1160px; --skin-panel-shadow: 0 4px 12px rgb(9 30 66 / 10%);
}
.skin-precision-enterprise {
  --sidebar: #001529; --ink: #262626; --muted: #595959; --surface: #fff; --surface-raised: #fafafa;
  --line: #d9d9d9; --accent: #1677ff; --accent-deep: #e6f4ff; --danger: #ff4d4f; --skin-bg: #f5f5f5;
  --skin-radius: .25rem; --skin-control-radius: .25rem; --skin-content-width: 1600px; --skin-gutter: 1.5rem; --skin-font-size: 14px;
}
.skin-utility-slate {
  --sidebar: #0f172a; --ink: #0f172a; --muted: #64748b; --surface: #fff; --surface-raised: #f8fafc;
  --line: #cbd5e1; --accent: #4f46e5; --accent-deep: #eef2ff; --danger: #dc2626; --skin-bg: #f1f5f9;
  --skin-radius: .75rem; --skin-control-radius: .5rem; --skin-panel-shadow: 0 10px 20px rgb(15 23 42 / 8%); --skin-content-width: 1200px; --skin-nav-ink: #fff;
}
.skin-swiss-signal {
  --sidebar: #fff; --ink: #050505; --muted: #555; --surface: #fff; --surface-raised: #f7f7f7;
  --line: #111; --accent: #0057b8; --accent-deep: #e6f0fa; --danger: #e30613; --skin-bg: #fff;
  --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 1240px; --skin-panel-shadow: none;
  --skin-heading-font: Helvetica, Arial, sans-serif;
}
.skin-swiss-signal .topbar :is(.brand, .nav-link, .nav-operation-tile, .identity, .identity small, .link-button) { color: #050505; }
.skin-swiss-signal .topbar { border-color: #050505; }
.skin-bauhaus-console {
  --sidebar: #111; --ink: #111; --muted: #4a4a4a; --surface: #fefbf2; --surface-raised: #f3ead3;
  --line: #111; --accent: #1356a2; --accent-deep: #f2cc0d; --danger: #d92922; --skin-bg: #fefbf2;
  --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 1320px; --skin-border-width: 2px;
  --skin-heading-font: "Arial Black", Arial, sans-serif; --skin-nav-ink: #fff;
}
.skin-bauhaus-console .badge { border-radius: 50%; }
.skin-brutalist-terminal {
  --sidebar: #000; --ink: #000; --muted: #333; --surface: #fff; --surface-raised: #fff;
  --line: #000; --accent: #0000ee; --accent-deep: #fff500; --danger: #e00000; --skin-bg: #fff;
  --skin-radius: 0; --skin-control-radius: 0; --skin-border-width: 3px; --skin-panel-shadow: 6px 6px 0 #000;
  --skin-font: ui-monospace, SFMono-Regular, Consolas, monospace; --skin-content-width: 1500px;
}
.skin-brutalist-terminal :is(.eyebrow, .nav-link, .button) { text-transform: uppercase; text-decoration-thickness: 2px; }
.skin-soft-relief {
  --sidebar: #526174; --ink: #263548; --muted: #647386; --surface: #e8edf3; --surface-raised: #e8edf3;
  --line: #d0d8e2; --accent: #356ca8; --accent-deep: #dbe9f8; --skin-bg: #e8edf3;
  --skin-radius: 1.25rem; --skin-control-radius: 1rem; --skin-panel-shadow: 10px 10px 22px #cbd2da, -10px -10px 22px #fff;
}
.skin-aurora-glass {
  color-scheme: dark; --sidebar: rgb(9 17 39 / 72%); --ink: #eff9ff; --muted: #afc2d6; --surface: rgb(12 26 53 / 72%);
  --surface-raised: rgb(24 42 72 / 78%); --line: rgb(105 226 255 / 32%); --accent: #67e8f9; --accent-deep: rgb(103 232 249 / 15%);
  --focus: #c084fc; --danger: #ff647c; --danger-soft: rgb(110 14 40 / 65%); --skin-bg: radial-gradient(circle at 70% 10%, #44216b, transparent 40%), linear-gradient(145deg, #07162c, #082f49 55%, #11122d);
  --skin-radius: 1.2rem; --skin-control-radius: 999px; --skin-panel-shadow: 0 18px 50px rgb(0 0 0 / 35%);
}
.skin-aurora-glass :is(.panel, .admin-section, .topbar) { backdrop-filter: blur(18px) saturate(130%); }
.skin-clay-workspace {
  --sidebar: #4b5f9f; --ink: #29324d; --muted: #6b7288; --surface: #f5f0ff; --surface-raised: #ede6fa;
  --line: #d6ccea; --accent: #536fc1; --accent-deep: #dce8ff; --danger: #c5524e; --danger-soft: #ffe1dd;
  --skin-bg: #eee9f5; --skin-radius: 1.5rem; --skin-control-radius: 1rem; --skin-panel-shadow: 8px 10px 20px rgb(86 70 120 / 18%), inset 0 1px 1px #fff;
}
.skin-bento-operations {
  --sidebar: #14213d; --ink: #182238; --muted: #667085; --surface: #fff; --surface-raised: #edf5ff;
  --line: #d7e3f2; --accent: #2f6fed; --accent-deep: #dceaff; --danger: #d64550; --skin-bg: #edf3f9;
  --skin-radius: 1.5rem; --skin-control-radius: .8rem; --skin-content-width: 1320px; --skin-panel-shadow: 0 12px 30px rgb(36 67 110 / 9%);
}
.skin-bento-operations .device-workspace-grid { grid-template-columns: minmax(20rem, .65fr) minmax(36rem, 1.35fr); }
.skin-editorial-brief {
  --sidebar: #171717; --ink: #171717; --muted: #5d5a55; --surface: #fffdf6; --surface-raised: #f6f0df;
  --line: #2a2926; --accent: #1b4d8f; --accent-deep: #ece6d5; --danger: #c43d2f; --skin-bg: #f7f2e7;
  --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 1180px; --skin-heading-font: Georgia, "Times New Roman", serif;
}
.skin-editorial-brief h1 { font-weight: 500; letter-spacing: -.02em; }
.skin-monochrome-minimal {
  --sidebar: #fff; --ink: #050505; --muted: #666; --surface: #fff; --surface-raised: #fafafa;
  --line: #d8d8d8; --accent: #111; --accent-deep: #f2f2f2; --danger: #c40018; --skin-bg: #fff;
  --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 980px; --skin-gutter: 3rem; --skin-nav-ink: #050505;
}
.skin-nordic-calm {
  --sidebar: #344b5a; --ink: #23313a; --muted: #697b83; --surface: #fff; --surface-raised: #eef3f2;
  --line: #d9e1df; --accent: #347d91; --accent-deep: #dcecef; --danger: #b84949; --skin-bg: #edf1f0;
  --skin-radius: .9rem; --skin-control-radius: .55rem; --skin-content-width: 1220px; --skin-panel-shadow: 0 8px 24px rgb(47 69 76 / 8%);
}
.skin-zen-paper {
  --sidebar: #282b32; --ink: #272723; --muted: #706e64; --surface: #fbf8ef; --surface-raised: #f2eee2;
  --line: #c9c2b1; --accent: #384f78; --accent-deep: #e3e7ef; --danger: #b43b32; --skin-bg: linear-gradient(90deg, #f3efe4, #fbf8ef);
  --skin-radius: .15rem; --skin-control-radius: .15rem; --skin-content-width: 1080px; --skin-gutter: 4rem;
}
.skin-retro-future {
  --sidebar: #3b291f; --ink: #392b24; --muted: #756252; --surface: #f4e5c8; --surface-raised: #ead4aa;
  --line: #8e6546; --accent: #bd4b22; --accent-deep: #f1bb63; --danger: #b22d24; --skin-bg: #dfc799;
  --skin-radius: 1.6rem; --skin-control-radius: 999px; --skin-content-width: 1260px; --skin-panel-shadow: inset 0 0 0 2px rgb(255 255 255 / 25%), 0 8px 0 #9e7957;
  --skin-heading-font: "Arial Rounded MT Bold", Arial, sans-serif; --skin-nav-ink: #fff8e9;
}
.skin-cyber-neon {
  color-scheme: dark; --sidebar: #08090c; --ink: #e5fbff; --muted: #8faab1; --surface: #0d141b; --surface-raised: #111e28;
  --line: #1e5965; --accent: #27f2ff; --accent-deep: #063846; --focus: #ff4fda; --danger: #ff3158; --danger-soft: #3b0716;
  --skin-bg: #06090d; --skin-radius: .2rem; --skin-control-radius: .1rem; --skin-content-width: 1500px; --skin-panel-shadow: 0 0 18px rgb(39 242 255 / 12%);
  --skin-font: "Arial Narrow", ui-sans-serif, sans-serif;
}
.skin-cyber-neon :is(.admin-section, .panel) { clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%); }
.skin-solarized-terminal {
  color-scheme: dark; --sidebar: #002b36; --ink: #eee8d5; --muted: #93a1a1; --surface: #073642; --surface-raised: #002b36;
  --line: #586e75; --accent: #2aa198; --accent-deep: #174b52; --focus: #b58900; --danger: #dc322f; --danger-soft: #4d2226;
  --skin-bg: #002b36; --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 1500px; --skin-font: ui-monospace, SFMono-Regular, Consolas, monospace; --skin-font-size: 14px;
}
.skin-technical-blueprint {
  color-scheme: dark; --sidebar: #062c54; --ink: #f0f8ff; --muted: #a9cce7; --surface: #073b6f; --surface-raised: #0b467e;
  --line: #63b3ed; --accent: #7dd3fc; --accent-deep: #145a8d; --focus: #fff; --danger: #ff6b6b; --danger-soft: #6d1f36;
  --skin-bg: linear-gradient(rgb(71 152 207 / 16%) 1px, transparent 1px), linear-gradient(90deg, rgb(71 152 207 / 16%) 1px, #063461 1px); background-size: 24px 24px;
  --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 1420px; --skin-font: ui-monospace, SFMono-Regular, Consolas, monospace;
}
.skin-field-notebook {
  --sidebar: #384334; --ink: #302e27; --muted: #6d675a; --surface: #fffdf3; --surface-raised: #f3edd8;
  --line: #afa486; --accent: #526d4e; --accent-deep: #dce4d2; --danger: #a43e38; --skin-bg: linear-gradient(#d7d0bc 1px, transparent 1px), linear-gradient(90deg, #d7d0bc 1px, #eee8d7 1px); background-size: 24px 24px;
  --skin-radius: .15rem; --skin-control-radius: .15rem; --skin-content-width: 1240px; --skin-panel-shadow: 3px 4px 0 rgb(78 67 48 / 18%);
}
.skin-deco-executive {
  color-scheme: dark; --sidebar: #080808; --ink: #f5eedb; --muted: #c8b995; --surface: #121212; --surface-raised: #1d1a17;
  --line: #b69a5b; --accent: #d4b363; --accent-deep: #332b1e; --danger: #b4343c; --danger-soft: #381418;
  --skin-bg: #0b0b0b; --skin-radius: 0; --skin-control-radius: 0; --skin-content-width: 1180px; --skin-border-width: 1px;
  --skin-heading-font: Georgia, serif;
}
.skin-deco-executive :is(.admin-section, .panel) { border-width: 1px 3px; }
.skin-midcentury-office {
  --sidebar: #3f534c; --ink: #342f2b; --muted: #70665c; --surface: #f6e9ce; --surface-raised: #e6d2a9;
  --line: #886f55; --accent: #26736b; --accent-deep: #bfd8cc; --danger: #a64132; --skin-bg: #d7be8b;
  --skin-radius: .25rem; --skin-control-radius: .25rem; --skin-content-width: 1200px; --skin-panel-shadow: 0 5px 0 #9a774f; --skin-nav-ink: #fff8e9;
}
.skin-memphis-playbook {
  --sidebar: #111; --ink: #111; --muted: #545454; --surface: #fff; --surface-raised: #fff7dd;
  --line: #111; --accent: #2357d7; --accent-deep: #cde8ff; --danger: #e43d47; --skin-bg: #faf8f2;
  --skin-radius: 1.25rem .25rem 1.25rem .25rem; --skin-control-radius: 999px; --skin-content-width: 1280px; --skin-border-width: 2px;
}
.skin-high-contrast {
  color-scheme: dark; --sidebar: #000; --ink: #fff; --muted: #fff; --surface: #000; --surface-raised: #111;
  --line: #fff; --accent: #00e5ff; --accent-deep: #172a31; --focus: #ffeb00; --danger: #ff3b30; --danger-soft: #300;
  --skin-bg: #000; --skin-radius: 0; --skin-control-radius: 0; --skin-border-width: 2px; --skin-font-size: 18px; --skin-content-width: 1200px;
}
.skin-high-contrast :focus-visible { outline-width: 5px; }
.skin-high-contrast a { text-decoration: underline; }
.skin-oled-night {
  color-scheme: dark; --sidebar: #000; --ink: #f6f7fb; --muted: #a0a5b1; --surface: #070707; --surface-raised: #0f1012;
  --line: #2a2c31; --accent: #a78bfa; --accent-deep: #221b36; --focus: #22d3ee; --danger: #f0445e; --danger-soft: #2b070d;
  --skin-bg: #000; --skin-radius: .7rem; --skin-control-radius: .5rem; --skin-content-width: 1360px;
}
.skin-warm-sepia {
  --sidebar: #382b25; --ink: #3d3028; --muted: #756457; --surface: #f7ead2; --surface-raised: #ead8ba;
  --line: #ad9678; --accent: #96613c; --accent-deep: #dfc8a6; --danger: #81333a; --skin-bg: #e4d1ae;
  --skin-radius: .35rem; --skin-control-radius: .3rem; --skin-content-width: 1180px;
}
.skin-oceanic-console {
  --sidebar: #06283d; --ink: #0d3140; --muted: #55747e; --surface: #effcfc; --surface-raised: #d9f2f1;
  --line: #8dc6c4; --accent: #087f8c; --accent-deep: #c3eceb; --danger: #d95d5d; --skin-bg: linear-gradient(180deg, #d9f2f1, #eef8f7);
  --skin-radius: 1.1rem .35rem 1.1rem .35rem; --skin-control-radius: 999px; --skin-content-width: 1340px;
}
.skin-forest-operations {
  --sidebar: #1f3a32; --ink: #26362e; --muted: #68786e; --surface: #f5f3e9; --surface-raised: #e6eadb;
  --line: #b8c2af; --accent: #4f7255; --accent-deep: #d6e2d1; --danger: #a95245; --skin-bg: #e2e3d8;
  --skin-radius: 1.5rem .4rem 1.5rem .4rem; --skin-control-radius: .8rem; --skin-content-width: 1220px;
}
.skin-ink-wash {
  --sidebar: #1a1a1a; --ink: #1b1b1b; --muted: #666; --surface: rgb(255 255 255 / 84%); --surface-raised: rgb(239 239 236 / 84%);
  --line: #9d9d99; --accent: #2f3338; --accent-deep: #e4e5e7; --danger: #bd3c32; --skin-bg: radial-gradient(circle at 20% 10%, #d6d7d5, transparent 25%), radial-gradient(circle at 85% 70%, #c8c9c6, transparent 28%), #f6f6f3;
  --skin-radius: 0 1.5rem 0 1.5rem; --skin-control-radius: 0; --skin-content-width: 1080px; --skin-gutter: 4rem;
}
.skin-executive-dashboard {
  --sidebar: #101d32; --ink: #142033; --muted: #647084; --surface: #fff; --surface-raised: #f3f6f9;
  --line: #d8dee7; --accent: #185f75; --accent-deep: #dcecf0; --danger: #b43c45; --skin-bg: #eef1f5;
  --skin-radius: .4rem; --skin-control-radius: .25rem; --skin-content-width: 1320px; --skin-panel-shadow: 0 8px 24px rgb(22 39 66 / 8%); --skin-nav-ink: #fff;
}
.skin-dense-data-grid {
  --sidebar: #1f2937; --ink: #111827; --muted: #4b5563; --surface: #fff; --surface-raised: #f3f4f6;
  --line: #9ca3af; --accent: #1d4ed8; --accent-deep: #dbeafe; --danger: #b91c1c; --skin-bg: #e5e7eb;
  --skin-radius: .2rem; --skin-control-radius: .15rem; --skin-content-width: 1800px; --skin-gutter: 1rem; --skin-font-size: 13px; --skin-nav-width: 12rem;
}
.skin-dense-data-grid :is(.admin-section, .panel) { padding: .75rem; }
.skin-touch-first {
  --sidebar: #153b66; --ink: #18304b; --muted: #60758a; --surface: #fff; --surface-raised: #eef7ff;
  --line: #c6dced; --accent: #126bd6; --accent-deep: #dbeeff; --danger: #cf3c4a; --skin-bg: #edf5fb;
  --skin-radius: 1.6rem; --skin-control-radius: 1rem; --skin-content-width: 1180px; --skin-font-size: 18px;
}
.skin-touch-first :is(.button, input, select, textarea, .nav-link) { min-height: 3.25rem; }
.skin-mission-wall {
  color-scheme: dark; --sidebar: #0b1118; --ink: #eef6ff; --muted: #a8b7c6; --surface: #111b25; --surface-raised: #172532;
  --line: #355064; --accent: #34d6e9; --accent-deep: #173e48; --focus: #ffc857; --danger: #ff4f64; --danger-soft: #3c121a;
  --skin-bg: #080d13; --skin-radius: .15rem; --skin-control-radius: .15rem; --skin-content-width: 1800px; --skin-gutter: 1rem; --skin-font-size: 17px; --skin-nav-width: 13rem;
}
.skin-mission-wall .device-hero h1 { font-size: clamp(2.8rem, 5vw, 5rem); }
.skin-large-type {
  --sidebar: #102a43; --ink: #102a43; --muted: #486581; --surface: #fff; --surface-raised: #f0f4f8;
  --line: #829ab1; --accent: #075fa8; --accent-deep: #d9eaf7; --focus: #d64545; --danger: #b82036; --danger-soft: #ffe4e8;
  --skin-bg: #f7f9fb; --skin-radius: .7rem; --skin-control-radius: .55rem; --skin-content-width: 1050px; --skin-font-size: 22px; --skin-gutter: 2rem; --skin-nav-ink: #fff;
}
.skin-large-type h1 { font-size: clamp(3rem, 6vw, 5rem); }
.skin-large-type h2 { font-size: 1.35rem; }

/* Native controls otherwise retain app.css's white fill, which breaks dark skins. */
body:is(.skin-aurora-glass, .skin-cyber-neon, .skin-solarized-terminal, .skin-technical-blueprint, .skin-deco-executive, .skin-high-contrast, .skin-oled-night, .skin-mission-wall) :is(input, select, textarea) {
  color: var(--ink);
  background: var(--surface-raised);
}

/* Horizontal-shell layouts use composition, not merely a palette swap. */
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) { padding-left: 0; }
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .topbar {
  position: sticky; right: auto; bottom: auto; left: auto; width: 100%; min-height: auto; padding: .65rem clamp(1rem, 3vw, 2.5rem);
  align-items: center; flex-direction: row; gap: 1.5rem; border-right: 0; border-bottom: var(--skin-border-width, 1px) solid var(--line);
}
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .brand { padding: .35rem 0; white-space: nowrap; }
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .topbar :is(.brand, .nav-link, .nav-operation-tile, .identity, .identity small, .link-button) { color: var(--skin-nav-ink, #fff); }
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .site-nav { flex-direction: row; align-items: center; }
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .nav-links { flex-direction: row; flex-wrap: wrap; align-items: center; }
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .nav-link { width: auto; white-space: nowrap; }
body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .identity { flex-direction: row; align-items: center; padding: 0; border: 0; }

/* Tool-canvas skins anchor controls on the opposite edge. */
body:is(.skin-spectrum-canvas, .skin-ink-wash) { padding-right: var(--skin-nav-width, 15rem); padding-left: 0; }
body:is(.skin-spectrum-canvas, .skin-ink-wash) .topbar { right: 0; left: auto; border-right: 0; border-left: 1px solid var(--line); }

/* Touch and OLED skins use a compact bottom dock on wide screens. */
body:is(.skin-touch-first, .skin-oled-night) { padding-right: 0; padding-bottom: 6.5rem; padding-left: 0; }
body:is(.skin-touch-first, .skin-oled-night) .topbar {
  top: auto; right: 50%; bottom: 1rem; left: auto; width: min(70rem, calc(100% - 2rem)); min-height: 4.5rem;
  padding: .65rem 1rem; transform: translateX(50%); align-items: center; flex-direction: row; border: 1px solid var(--line); border-radius: 1.5rem;
}
body:is(.skin-touch-first, .skin-oled-night) .brand { padding: 0; white-space: nowrap; }
body:is(.skin-touch-first, .skin-oled-night) .site-nav { flex-direction: row; align-items: center; }
body:is(.skin-touch-first, .skin-oled-night) .nav-links { flex-direction: row; align-items: center; }
body:is(.skin-touch-first, .skin-oled-night) .nav-link { width: auto; white-space: nowrap; }
body:is(.skin-touch-first, .skin-oled-night) .identity { display: none; }

@media (max-width: 760px) {
  body { padding-right: 0; padding-bottom: 0; padding-left: 0; }
  body .topbar,
  body:is(.skin-spectrum-canvas, .skin-ink-wash, .skin-touch-first, .skin-oled-night) .topbar,
  body:is(.skin-utility-slate, .skin-bauhaus-console, .skin-monochrome-minimal, .skin-retro-future, .skin-midcentury-office, .skin-executive-dashboard, .skin-large-type) .topbar {
    position: sticky; top: 0; right: auto; bottom: auto; left: auto; width: 100%; min-height: 4rem; padding: .625rem 1rem;
    transform: none; align-items: center; justify-content: space-between; flex-direction: row; flex-wrap: wrap; border: 0; border-bottom: 1px solid var(--line); border-radius: 0;
  }
  body .topbar .brand { padding: .35rem 0; color: var(--skin-nav-ink, #fff); }
  body .topbar .nav-toggle { display: inline-flex; }
  body .topbar .site-nav { display: none; flex: 0 0 calc(100% + 2rem); flex-direction: column; align-items: stretch; margin: .625rem -1rem -.625rem; }
  body .topbar.nav-open .site-nav { display: flex; }
  body .topbar .nav-links { flex-direction: column; align-items: stretch; }
  body .topbar .nav-link { width: 100%; }
  body .topbar .identity { display: flex; flex-direction: row; padding-top: .5rem; border-top: 1px solid var(--line); }
}