/* Web-host-only presentation. Never shipped by the MAUI host. */
html, body, #app { min-height: 100%; margin: 0; }
.web-shell { --web-accent:#e4b75c; --web-text:#edf0f5; --web-muted:#a5afbe; --web-border:#2a3341; --web-surface:#191f29; --web-surface-raised:#202835; --web-bg:#10151d; display:flex; min-height:100vh; background:var(--web-bg); color:var(--web-text); font-family:Roboto,Arial,sans-serif; font-size:14px; line-height:1.5; }
.web-shell.web-light { --web-accent:#91600d; --web-text:#202936; --web-muted:#647084; --web-border:#e0e4eb; --web-surface:#fff; --web-surface-raised:#f0f3f7; --web-bg:#f5f6f8; }
.web-shell *, .web-shell *::before, .web-shell *::after { box-sizing:border-box; }
.web-shell a { color:inherit; text-decoration:none; }
.web-shell button { font:inherit; cursor:pointer; }
.web-shell a:focus-visible, .web-shell button:focus-visible { outline:3px solid var(--web-accent); outline-offset:4px; }
.web-shell button:disabled { opacity:.55; cursor:wait; }
.web-sidebar { width:240px; flex-shrink:0; position:fixed; inset:0 auto 0 0; display:flex; flex-direction:column; padding:32px 20px 24px; border-right:1px solid var(--web-border); background:var(--web-surface); z-index:20; }
.web-brand { display:flex; align-items:center; gap:12px; padding:0 8px; font-size:12px; font-weight:700; letter-spacing:1.5px; line-height:1.6; }
.web-brand img { object-fit:contain; border-radius:10px; }
.web-brand strong { display:block; color:var(--web-accent); letter-spacing:3px; }
.web-nav-caption { margin:48px 14px 14px; font-size:10px; letter-spacing:1.8px; color:var(--web-muted); font-weight:600; }
.web-nav { display:flex; flex-direction:column; gap:7px; }
.web-nav a { display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:8px; color:var(--web-muted); font-weight:500; }
.web-nav a .mud-icon-root { width:21px; height:21px; }
.web-nav a:hover, .web-nav a.active { color:var(--web-text); background:var(--web-surface-raised); }
.web-nav a.active { color:var(--web-accent); box-shadow:inset 3px 0 var(--web-accent); }
.web-shell .web-primary { display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:10px 17px; border-radius:8px; background:#e4b75c; color:#242014; font-weight:700; font-size:13px; transition:background .15s; }
.web-primary:hover { background:#f0c976; }
.web-sidebar-create { margin-top:26px; }
.web-sidebar-create span { font-size:20px; font-weight:400; }
.web-sidebar-footer { margin-top:auto; padding:24px 8px 0; color:var(--web-muted); font-size:11px; display:flex; align-items:flex-start; gap:9px; }
.web-sidebar-footer small { display:block; margin-top:5px; font-size:10px; }
.web-status-dot { width:6px; height:6px; margin-top:5px; background:#70bda7; border-radius:50%; flex-shrink:0; }
.web-workspace { width:calc(100% - 240px); margin-left:240px; display:flex; flex-direction:column; min-height:100vh; min-width:0; }
.web-header { min-height:88px; padding:20px 40px; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid var(--web-border); background:var(--web-surface); }
.web-header-title { display:flex; flex-direction:column; font-size:17px; font-weight:600; gap:3px; }
.web-header-eyebrow { font-size:9px; letter-spacing:1.8px; font-weight:500; color:var(--web-muted); }
.web-header-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.web-icon-button, .web-text-button { border:0; background:transparent; color:var(--web-muted); display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:8px; border-radius:8px; }
.web-icon-button:hover, .web-text-button:hover { background:var(--web-surface-raised); color:var(--web-text); }
.web-header .mud-icon-root { width:19px; height:19px; }
.web-header { position:sticky; top:0; z-index:15; }
.web-content h1 { scroll-margin-top:110px; }
.web-guest-label { color:var(--web-muted); font-size:12px; }
.web-account { display:flex; gap:9px; align-items:center; font-weight:500; max-width:200px; }
.web-account > span:last-child { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.web-avatar { border:1px solid var(--web-border); background:var(--web-surface-raised); border-radius:50%; display:grid; place-items:center; width:30px; height:30px; color:var(--web-accent); flex-shrink:0; }
.web-content { width:100%; max-width:1440px; margin:0 auto; padding:36px 40px 48px; flex:1; min-width:0; }
.web-route-content { min-width:0; }
.web-footer { display:flex; justify-content:space-between; gap:16px; padding:20px 40px; border-top:1px solid var(--web-border); font-size:11px; color:var(--web-muted); }
.web-footer { flex-wrap:wrap; }
.web-footer-links { display:flex; gap:18px; align-items:center; }
.web-ad-privacy { border:0; padding:0; background:transparent; color:inherit; }
.web-ad-banner { width:100%; margin-top:48px; padding-top:24px; border-top:1px solid var(--web-border); }
.web-ad-banner[hidden] { display:none !important; }
.web-ad-label { display:block; margin-bottom:10px; color:var(--web-muted); font-size:10px; }
.web-ad-container { width:100%; max-width:970px; margin:0 auto; min-width:0; min-height:90px; }
.web-ad-container .adsbygoogle { display:block; width:100%; }
.web-mobile-nav { display:none; }
.web-skip-link { position:fixed; left:260px; top:-100px; padding:12px 20px; z-index:99999; background:var(--web-surface); border:2px solid var(--web-accent); }
.web-skip-link:focus { top:12px; }
.web-notice { margin:20px 40px 0; padding:14px; border:1px solid var(--web-border); border-radius:8px; color:var(--web-muted); }
.web-notice a { text-decoration:underline; margin-left:8px; }
.web-initializing { padding:60px 0; color:var(--web-muted); }
.web-upload-panel { width:100%; max-width:880px; margin:0 auto; padding:24px; border:1px solid var(--web-border); border-radius:14px; background:var(--web-surface); }
.web-upload-eyebrow { font-size:10px; font-weight:700; letter-spacing:1.8px; color:var(--web-accent); }
.web-upload-panel h1 { margin:10px 0; font-size:clamp(24px,3vw,34px); line-height:1.2; }
.web-upload-panel p { color:var(--web-muted); }
.web-upload-dropzone { margin:28px 0 20px; padding:40px 24px; text-align:center; border:1px dashed var(--web-border); border-radius:12px; background:var(--web-bg); }
.web-upload-dropzone > .mud-icon-root { color:var(--web-accent); width:42px; height:42px; }
.web-upload-dropzone h2 { font-size:20px; margin:14px 0 8px; }
.web-upload-dropzone .web-primary { margin:14px 0; border:0; min-height:44px; }
.web-upload-dropzone small { display:block; color:var(--web-muted); }
.web-upload-note, .web-upload-message { padding:14px; border:1px solid var(--web-border); border-radius:8px; }
.web-upload-panel a { text-decoration:underline; color:var(--web-accent); }
.web-upload-secondary { display:inline-block; padding:10px 0; }
/* Scope adaptations to this host; shared files and mobile styling stay intact. */
/* Browser sheets have no bottom navigation to clear. Clip the closing slide and
   hide its controls after it finishes so they cannot leak into the viewport or tab order. */
.web-shell .web-route-content .filter-sheet-overlay { inset:0; overflow:hidden; visibility:hidden; transition:background .3s ease, visibility 0s .35s; }
.web-shell .web-route-content .filter-sheet-overlay.visible { visibility:visible; transition-delay:0s; }
.web-shell .web-route-content .filter-sheet { max-height:min(78vh, calc(100dvh - 24px)); padding-bottom:max(8px, env(safe-area-inset-bottom, 0px)); }
.web-shell .web-route-content .filter-sheet-body { min-height:0; }
.web-route-content .mud-typography-h1, .web-route-content .mud-typography-h2, .web-route-content .mud-typography-h3, .web-route-content .mud-typography-h4, .web-route-content .mud-typography-h5, .web-route-content .mud-typography-h6 { font-family:Roboto,Arial,sans-serif !important; letter-spacing:normal; }
.web-shell .web-route-content .login-root { min-height:auto; padding:24px 16px !important; border-radius:14px; }
.web-shell .web-route-content .login-nav-blur { display:none; }
.web-shell .web-route-content .login-bg-rings, .web-shell .web-route-content .login-particles, .web-shell .web-route-content .login-scene-wrapper, .web-shell .web-route-content .login-sheet-handle { display:none; }
.web-shell .web-route-content .login-hero { flex:none; padding:24px 20px; animation:none; }
.web-shell .web-route-content .login-title, .web-shell .web-route-content .login-title-block { animation:none; }
.web-shell .web-route-content .login-sheet { animation:none; border-radius:14px; padding:24px; margin-bottom:20px; border:1px solid #2a3341; }
@media (max-width:760px) { .web-sync-button span, .web-sign-out span { display:none; } }
@media (min-width:1800px) { .web-content { padding-top:48px; } }
@media (max-width:1100px) { .web-sidebar { width:208px; padding-inline:14px; } .web-workspace { margin-left:208px; width:calc(100% - 208px); } .web-header, .web-content, .web-footer { padding-left:24px; padding-right:24px; } .web-header-actions { gap:8px; } .web-guest-label { display:none; } }
@media (max-width:760px) { .web-sidebar { display:none; } .web-workspace { width:100%; margin-left:0; } .web-header { min-height:74px; padding:14px 18px; } .web-header-title { font-size:15px; } .web-header-actions { gap:4px; } .web-account > span:last-child { display:none; } .web-header .web-text-button { font-size:12px; } .web-content { padding:24px 18px 32px; } .web-footer { padding:18px; } .web-mobile-nav { display:flex; gap:5px; overflow-x:auto; padding:10px 12px; border-bottom:1px solid var(--web-border); background:var(--web-surface); } .web-mobile-nav a { white-space:nowrap; padding:8px 10px; font-size:12px; color:var(--web-muted); border-radius:6px; } .web-mobile-nav a.active { color:var(--web-accent); background:var(--web-surface-raised); } .web-skip-link { left:12px; } .web-notice { margin:18px 18px 0; } }
@media (prefers-reduced-motion:reduce) { .web-shell * { scroll-behavior:auto !important; transition:none !important; } }