﻿/* Application shell. This file owns navigation geometry at every breakpoint. */
html:not(.show-experimental-ml) .qs-nav-link[href="experimental-warning.html"] { display:none !important; }
.qs-header { box-sizing:border-box; background:var(--sidebar-bg,var(--surface,#fff)); color:var(--ink); z-index:100; }
.qs-brand { display:flex; align-items:center; gap:12px; color:inherit; text-decoration:none; min-width:0; }
.qs-brand-mark { display:grid; place-items:center; width:42px; height:42px; flex:0 0 42px; background:linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%); box-shadow:0 4px 12px rgba(79, 70, 229, 0.28); color:var(--action-ink,#fff); border-radius:12px; }
.qs-brand-mark svg { display:block; width:24px; height:24px; }
.qs-brand-name { display:block; color:var(--ink); font-size:19px; font-weight:750; letter-spacing:-.5px; line-height:1.3; }
.qs-brand-subtitle { display:block; margin-top:3px; font-size:12px; color:var(--muted); line-height:1.4; }
.qs-nav-links { display:flex; flex-direction:column; gap:6px; min-width:0; min-height:0; margin:0; }
.qs-nav-link { display:flex; align-items:center; gap:12px; min-height:46px; width:100%; padding:11px 14px; border:1px solid transparent; border-radius:10px; color:var(--muted); background:transparent; text-decoration:none; text-align:left; font:inherit; font-size:14px; font-weight:550; line-height:1.4; cursor:pointer; box-sizing:border-box; transition:all .16s ease; }
.qs-nav-link svg { display:block; width:20px; height:20px; max-width:22px; max-height:22px; flex:0 0 20px; margin:0; overflow:hidden; stroke-width:1.8; }
.qs-nav-link:hover { background:var(--hover-bg); color:var(--accent-ink); }
.qs-nav-link[aria-current=page] { background:var(--accent-soft); color:var(--action); font-weight:600; border-color:rgba(199, 210, 254, 0.6); box-shadow:0 1px 3px rgba(79, 70, 229, 0.06); }
.qs-nav-footer { display:flex; flex-direction:column; gap:12px; margin-top:auto; padding-top:22px; border-top:1px solid var(--line); }
.qs-nav-footer-label { display:block; color:var(--muted); font-size:12px; font-weight:600; margin:0 0 7px 2px; }
.qs-nav-footer .qs-theme-toggle,.qs-nav-footer select.qs-theme-select { width:100%; height:44px; margin:0; font-size:14px; border:1px solid var(--field-border); border-radius:8px; padding:9px 12px; background:var(--field-bg); color:var(--ink); }
.qs-nav-footer button.qs-nav-link:hover { background:var(--danger-bg); color:var(--danger-ink); }
.qs-menu-toggle,.qs-drawer-close { display:grid; place-items:center; width:44px; height:44px; padding:0; border:1px solid var(--line); border-radius:9px; background:var(--surface); color:var(--ink); cursor:pointer; }
.qs-menu-icon,.qs-menu-icon::before,.qs-menu-icon::after { display:block; width:19px; height:2px; border-radius:2px; background:currentColor; }
.qs-menu-icon { position:relative; }
.qs-menu-icon::before,.qs-menu-icon::after { content:""; position:absolute; left:0; }
.qs-menu-icon::before { top:-6px; }.qs-menu-icon::after { top:6px; }
.qs-drawer-close svg { width:20px; height:20px; }
.qs-drawer-heading { display:flex; align-items:center; justify-content:space-between; padding-bottom:20px; margin-bottom:12px; border-bottom:1px solid var(--line); font-size:16px; font-weight:700; color:var(--ink); }
.qs-nav-backdrop { position:fixed; inset:0; z-index:90; border:0; padding:0; background:rgba(15,23,42,.52); }
.qs-nav-backdrop[hidden] { display:none; }
.qs-nav-link:focus-visible,.qs-menu-toggle:focus-visible,.qs-drawer-close:focus-visible { outline:3px solid var(--focus) !important; outline-offset:3px; }
.qs-skip-link { position:fixed; left:16px; top:-80px; z-index:2000; padding:12px 18px; border-radius:8px; background:var(--surface); color:var(--ink); }
.qs-skip-link:focus { top:12px; }
body.qs-menu-open { overflow:hidden; }
body[data-page] :is(main.app-workspace,.scanner-shell,.website-shell,.experimental-main) { min-width:0; width:100%; max-width:1440px; box-sizing:border-box; margin:0 auto; padding:32px; }
@media(min-width:1200px) {
 body[data-page] { padding:0 0 0 248px; }
 .qs-header { position:fixed; inset:0 auto 0 0; width:248px; height:100vh; height:100dvh; display:flex; flex-direction:column; align-items:stretch; padding:30px 18px 22px; border-right:1px solid var(--line); border-radius:0; box-shadow:none; overflow:auto; }
 .qs-header>.qs-brand { padding:0 6px 30px; }
 .qs-nav-links { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; }
 .qs-nav-footer { margin-top:auto; }
 .qs-menu-toggle,.qs-drawer-heading,.qs-nav-backdrop { display:none; }
 body[data-page] :is(main.app-workspace,.scanner-shell,.website-shell,.experimental-main) { padding:36px clamp(24px,3vw,48px) 56px; }
}
@media(max-width:1199.98px) {
 html { scroll-padding-top:88px; }
 body[data-page] { padding:0; }
 .qs-header { position:sticky; inset:0 0 auto; display:flex; align-items:center; justify-content:space-between; height:72px; min-height:72px; padding:0 24px; border-bottom:1px solid var(--line); border-radius:0; }
 .qs-brand-subtitle { font-size:12px; }
 .qs-nav-links { position:fixed; inset:0 auto 0 0; width:min(304px,88vw); height:100vh; height:100dvh; padding:20px 18px; background:var(--surface); border-right:1px solid var(--line); box-shadow:16px 0 48px #0002; overflow:auto; overscroll-behavior:contain; transform:translateX(-105%); visibility:hidden; transition:transform .22s ease,visibility .22s; z-index:110; }
 .qs-header.is-open .qs-nav-links { transform:translateX(0); visibility:visible; }
 .qs-nav-footer { padding-top:18px; }
 body[data-page] :is(main.app-workspace,.scanner-shell,.website-shell,.experimental-main) { padding:28px 24px 40px; }
}
@media(max-width:599px) {
 .qs-header { height:66px; min-height:66px; padding:0 16px; }
 .qs-brand-mark { width:36px; height:36px; flex-basis:36px; border-radius:9px; }
 .qs-brand-name { font-size:18px; }.qs-brand-subtitle { font-size:11px; }
 body[data-page] :is(main.app-workspace,.scanner-shell,.website-shell,.experimental-main) { padding:24px 16px 36px; }
}
@media(prefers-reduced-motion:reduce) { .qs-nav-links,.qs-nav-link { transition:none; } }


@media(min-width:1200px) {
 .qs-header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 220' fill='none'%3E%3Cpath d='M 0 130 C 70 100 150 170 248 120' stroke='rgba(199, 210, 254, 0.45)' stroke-width='1.8' fill='none'/%3E%3Cpath d='M 0 165 C 80 135 160 195 248 155' stroke='rgba(165, 180, 252, 0.35)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M 0 195 C 90 175 175 210 248 185' stroke='rgba(224, 231, 255, 0.5)' stroke-width='1.2' fill='none'/%3E%3Cpath d='M 0 150 C 80 120 160 180 248 140 L 248 220 L 0 220 Z' fill='rgba(224, 231, 255, 0.15)'/%3E%3C/svg%3E");
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 248px 220px;
 }
 html[data-theme="dark"] .qs-header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 248 220' fill='none'%3E%3Cpath d='M 0 130 C 70 100 150 170 248 120' stroke='rgba(99, 102, 241, 0.25)' stroke-width='1.8' fill='none'/%3E%3Cpath d='M 0 165 C 80 135 160 195 248 155' stroke='rgba(129, 140, 248, 0.2)' stroke-width='1.5' fill='none'/%3E%3Cpath d='M 0 195 C 90 175 175 210 248 185' stroke='rgba(99, 102, 241, 0.15)' stroke-width='1.2' fill='none'/%3E%3C/svg%3E");
 }
}
