/* Shared shell + compact portal. Existing guide content is styled in guide-theme.css. */
@media screen {
  :root { --hub-ink:#f2f6fb; --hub-muted:#b3c6dc; --hub-line:#b8d4f232; --hub-lime:#d5f85a; --hub-glass:rgba(13,27,42,.88); --hub-font:Manrope,'Segoe UI',sans-serif; view-transition-name:none; }
  html { height:100%; overflow:hidden; scroll-behavior:auto; }
  body { height:100%; overflow:hidden; color:var(--hub-ink); font:14px/1.65 var(--hub-font); }
  .app-frame { position:fixed; inset:0; display:block; min-width:0; min-height:0; overflow:hidden; }
  .site-chrome { position:absolute; inset:8px 0 auto; z-index:80; min-width:0; background:none; pointer-events:none; --header-overlap:0; }
  .page-viewport { position:relative; z-index:1; height:100%; box-sizing:border-box; padding-top:var(--chrome-height,76px); min-width:0; min-height:0; overflow-x:hidden; overflow-y:auto; overscroll-behavior:contain; scrollbar-gutter:stable both-edges; scroll-padding:calc(var(--chrome-height,76px) + 16px) 0 16px; overflow-anchor:none; }
  /* Keep the fade fixed to the measured header, not to the scrolling shell.
     The clip also prevents invisible content above the fade from receiving clicks. */
  .page-viewport { --viewport-top-mask:linear-gradient(to bottom,transparent calc(var(--chrome-height,76px) - 24px),#000 var(--chrome-height,76px)); clip-path:inset(calc(var(--chrome-height,76px) - 24px) 0 0); -webkit-mask-image:var(--viewport-top-mask); mask-image:var(--viewport-top-mask); -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat; }
  .page-viewport:focus { outline:none; }
  #main [id] { scroll-margin-block-start:8px; }
  html[data-page-transition][data-transition-surface=workspace] .page-viewport,
  html[data-page-transition][data-transition-surface=content] #main { will-change:opacity,transform; }
  html[data-page-transition] .page-viewport * { overflow-anchor:none; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
  .site-header { position:relative; top:auto; z-index:80; width:var(--workspace-inline-size,calc(100% - 48px)); max-width:1440px; min-height:60px; margin:0 auto; padding:6px 12px; display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:18px; isolation:isolate; pointer-events:auto; background:linear-gradient(180deg,#1b354acc,#0d2133ed); border:1px solid #b8d4f240; border-radius:17px; backdrop-filter:blur(16px) saturate(1.1); -webkit-backdrop-filter:blur(16px) saturate(1.1); box-shadow:0 6px 24px #03101e38,inset 0 1px 0 #e1effb0a; }
  .site-header::before { content:''; position:absolute; inset:-1px; z-index:-1; border-radius:inherit; border:1px solid #b9d5ed28; background:linear-gradient(180deg,#18304400,#0b1c2c24); box-shadow:0 8px 25px #03101e28; opacity:var(--header-overlap); pointer-events:none; }
  html[data-view=hub] .site-header { grid-template-columns:auto auto; justify-content:space-between; }
  .hub-brand { display:block; flex:none; line-height:1; }
  .hub-brand img { display:block; width:174px; height:43px; object-fit:contain; filter:drop-shadow(0 1px 2px #04101ce6) drop-shadow(0 2px 9px #061426a6); }
  .header-actions { display:flex; align-items:center; gap:12px; }
  .header-actions details { position:relative; display:block; flex:none; width:auto; height:auto; margin:0; padding:0; border:0; background:none; border-radius:0; }
  .header-actions details[hidden] { display:none; }
  .header-actions summary { display:flex; align-items:center; justify-content:center; gap:9px; min-height:38px; padding:8px 12px; margin:0; border:1px solid var(--hub-line); border-radius:11px; background:#102b43bf; color:var(--hub-ink); font:600 12px/1.4 var(--hub-font); list-style:none; cursor:pointer; user-select:none; box-shadow:0 3px 12px #03142424; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .header-actions details[open]>summary { margin:0; background:#25465ede; }
  .header-actions summary::-webkit-details-marker { display:none; }
  .header-actions summary:hover { background:#25465ede; }
  .header-actions :is(summary,button,select,input):focus-visible { outline:2px solid var(--hub-lime); outline-offset:4px; }
  .language-panel,.background-panel { position:absolute; z-index:90; top:calc(100% + 12px); right:0; padding:8px; border:1px solid #abcde54a; border-radius:16px; background:#112438; box-shadow:0 16px 48px #0006; }
  .language-panel { min-width:170px; }
  .language-switch .language-panel button { display:flex; justify-content:space-between; align-items:center; gap:24px; width:100%; height:auto; min-height:41px; padding:10px 12px; border:0; border-radius:9px; background:none; color:var(--hub-muted); text-align:left; font:500 13px var(--hub-font); }
  .language-switch .language-panel button[aria-pressed=true] { color:var(--hub-ink); background:#abcce11d; }
  .language-switch .language-panel button:hover { color:var(--hub-ink); background:#abcce126; }
  .language-panel button span { font-size:10px; opacity:.7; }
  #background-picker>summary { position:relative; min-width:63px; padding:8px 10px; border-radius:100px; }
  #background-symbol { display:grid; place-items:center; width:22px; height:22px; }
  #background-symbol :is(.period-sun,.period-dawn,.period-moon) { display:none; }
  #background-symbol[data-period=day] .period-sun,#background-symbol[data-period=night] .period-moon,#background-symbol[data-period=evening] .period-moon,#background-symbol[data-period=morning] .period-dawn { display:block; }
  #background-auto { position:absolute; bottom:2px; left:23px; display:grid; place-items:center; font:700 8px/1 var(--hub-font); width:12px; height:12px; border-radius:50%; background:var(--hub-lime); color:#26321b; }
  #background-auto[hidden] { display:none; }
  .background-panel { width:276px; max-width:calc(100vw - 40px); padding:18px; }
  .background-panel label { color:var(--hub-ink); font-size:14px; font-weight:650; }
  .background-panel p { margin:8px 0 14px; color:var(--hub-muted); font-size:12px; line-height:1.65; }
  .background-panel select { width:100%; min-height:41px; padding:9px 11px; background:#20394d; color:var(--hub-ink); border:1px solid #a7c8e34a; border-radius:10px; font-size:13px; color-scheme:dark; }
  #background-status { min-height:38px; margin-bottom:0; font-size:11px; }
  #background-retry { padding:6px 10px; border:1px solid var(--hub-line); border-radius:8px; background:#344961; color:var(--hub-ink); font:500 12px var(--hub-font); }
  .background-panel .motion-toggle { display:flex; align-items:center; justify-content:space-between; gap:15px; border-top:1px solid var(--hub-line); margin-top:14px; padding-top:14px; cursor:pointer; }
  .motion-toggle b { display:block; font-size:12px; font-weight:600; }
  .motion-toggle small { display:block; color:var(--hub-muted); font-size:10px; font-weight:400; margin-top:3px; }
  .motion-toggle input { width:17px; height:17px; accent-color:var(--hub-lime); }
  .hub-account { display:flex; align-items:center; justify-content:center; min-height:38px; padding:7px 14px; border:1px solid var(--hub-line); border-radius:11px; background:#102b43bf; color:var(--hub-ink); font-size:12px; white-space:nowrap; box-shadow:0 3px 12px #03142424; backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); }
  .hub-account:hover { background:#25465ede; }
  .sidebar { position:relative; inset:auto; width:auto; min-width:0; max-width:none; margin:0; padding:0; background:none; border:0; transform:none; transition:none; box-shadow:none; z-index:25; }
  .guide-context { display:flex; align-items:center; gap:14px; min-width:0; padding:0 8px 5px; color:#e3edf9; font-size:11px; text-shadow:0 1px 2px #04101c,0 0 9px #04101cb3; }
  .guide-context>a { flex:none; color:#e3edf9; font-size:11px; }
  .guide-context .icon-button { flex:none; width:30px; height:30px; margin-left:auto; background:#152a3ee6; color:#e5effb; border:1px solid var(--hub-line); border-radius:10px; font-size:18px; }
  .sidebar .guide-context { display:none; }
  #nav { display:flex; flex-wrap:nowrap; align-items:center; overflow:visible; gap:3px; border:0; background:none; padding:0; justify-content:center; backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; }
  #nav .nav-link { display:flex; align-items:center; gap:10px; flex:none; padding:9px 11px; font-size:12px; line-height:1.5; border:0; border-radius:9px; color:#f2f6fb; text-shadow:0 1px 2px #04101c,0 0 9px #04101cb3; }
  #nav > .nav-link { white-space:nowrap; }
  #nav > .nav-link > .hub-icon { display:none; }
  #nav .nav-group { position:relative; margin:0; padding:0; border:0; background:none; border-radius:10px; }
  #nav .nav-group > summary { display:flex; align-items:center; justify-content:center; gap:8px; margin:0; padding:9px 11px; border-radius:9px; font-size:12px; line-height:1.5; font-weight:600; color:#f2f6fb; white-space:nowrap; cursor:pointer; list-style:none; text-shadow:0 1px 3px #04101c; }
  #nav summary::-webkit-details-marker { display:none; }
  #nav summary::after { content:none; }
  #nav .nav-chevron { flex:none; transition:transform .18s ease; }
  #nav .nav-group[open] .nav-chevron { transform:rotate(180deg); }
  #nav .nav-group:is([open],.active) > summary { background:#b4d0ea26; box-shadow:inset 0 0 0 1px #c0d8ef38; }
  #nav .nav-group.active > summary { color:#d5f85a; }
  #nav .nav-group > summary:hover { background:#173249dd; }
  #nav summary:focus-visible { outline:2px solid var(--hub-lime); outline-offset:2px; }
  #nav .nav-dropdown { position:absolute; z-index:100; top:calc(100% + 9px); left:0; width:260px; max-height:calc(100dvh - var(--chrome-height,76px) - 24px); overflow-y:auto; overscroll-behavior:contain; padding:7px; border:1px solid #b8d4f240; border-radius:15px; background:linear-gradient(145deg,#1c344af5,#0b1c2bf7); box-shadow:0 16px 38px #03101e65,inset 0 1px #ffffff0c; backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px); scrollbar-width:thin; animation:nav-reveal .16s ease-out; }
  #nav .nav-dropdown .nav-link { width:100%; text-align:left; font:600 12px/1.5 var(--hub-font); text-shadow:none; padding:10px 12px; background:none; cursor:pointer; }
  #nav .nav-dropdown .hub-icon { width:19px; height:19px; flex:none; color:#b4cde4; }
  #nav .nav-dropdown .nav-link.active .hub-icon { color:inherit; }
  #nav .nav-soon { display:flex; align-items:center; gap:10px; padding:10px 12px; color:#8da4b8; font-size:12px; }
  #nav .nav-soon small { display:block; font-size:10px; color:#8da4b8; font-weight:400; }
  #nav .nav-utilities { border-top:1px solid #b8d4f226; margin-top:5px; padding-top:5px; }
  @keyframes nav-reveal { from { opacity:0; transform:translateY(-5px); } to { opacity:1; transform:translateY(0); } }
  #nav .nav-link:hover { background:#122b43d9; color:#fff; text-shadow:none; }
  #nav .nav-link.active { background:var(--hub-lime); color:#28330f; text-shadow:none; box-shadow:0 3px 12px #06142626; }
  #nav .nav-link.active:hover { background:#e0ff79; color:#28330f; }
  #nav .nav-link:focus-visible { outline:2px solid var(--hub-lime); outline-offset:2px; }
  .sidebar-bottom { display:none; }
  .shell { --shell-block-size:calc(100dvh - var(--chrome-height,76px) - 32px); display:flex; flex-direction:column; width:calc(100% - 48px); max-width:1440px; min-height:var(--shell-block-size); margin:12px auto 20px; background:rgba(10,23,37,.88); border:1px solid var(--hub-line); border-radius:20px; box-shadow:0 20px 65px #03132330; }
  .topbar { flex:1; min-width:0; height:auto; min-height:30px; padding:0; display:flex; align-items:center; justify-content:flex-start; gap:10px; border:0; background:none; }
  .topbar .breadcrumb { display:flex; align-items:center; gap:9px; min-width:0; color:#cadcee; font-size:9px; letter-spacing:1.2px; }
  .topbar .breadcrumb :is(.breadcrumb-game,.breadcrumb-divider) { margin:0; color:#b3c6dc; }
  .topbar .breadcrumb b { display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#e3edf9; }
  #menu-button { display:none!important; flex:none; width:30px; height:30px; padding:0; place-items:center; border:1px solid var(--hub-line); border-radius:9px; color:#e3edf9; background:#102b43bf; font-size:17px; }
  main#main { flex:1; width:100%; max-width:none; min-height:0; margin:0; padding:24px 28px 36px; outline:none; }
  .footer { padding:20px 28px; border-top:1px solid #adcbe225; color:#a8bdd0; font-size:11px; gap:25px; }
  .footer p { color:#94aec6; font-size:10px; max-width:760px; }
  .footer>a { font-size:11px; color:#b9cce0; }
  html[data-view=hub] .sidebar { display:none; }
  html[data-view=hub] .shell { background:none; box-shadow:none; border:0; margin-top:12px; }
  html[data-view=hub] main#main { padding:0; min-height:0; }
  html[data-view=hub] .footer { max-width:1000px; margin:0 auto; padding:20px 0; text-shadow:0 1px 3px #071c30; }
  .hub-page { width:100%; max-width:1000px; margin:auto; padding:52px 0 35px; color:var(--hub-ink); }
  .hub-page h1,.hub-page h2,.hub-page p { margin:0; font-family:var(--hub-font); }
  .hub-intro { text-align:center; max-width:760px; margin:0 auto 30px; }
  .hub-eyebrow { color:#b6cce0; font:600 10px/1.5 var(--hub-font); letter-spacing:1.35px; }
  .hub-eyebrow>span { display:inline-block; width:5px; height:5px; margin:0 6px 2px 0; background:var(--hub-lime); border-radius:50%; }
  .hub-intro h1 { font-size:clamp(30px,3.2vw,44px); line-height:1.16; letter-spacing:-1.5px; font-weight:750; margin:16px 0; text-wrap:balance; text-shadow:0 2px 14px #05162a66; }
  .hub-intro p { max-width:660px; margin:auto; font-size:15px; line-height:1.85; color:#d0e0ef; text-wrap:pretty; text-shadow:0 1px 5px #05162a; }
  .hub-icon { width:23px; height:23px; flex:none; }
  .hub-feature-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:15px; margin-bottom:24px; }
  .hub-feature,.space-card,.access-card { background:linear-gradient(135deg,rgba(30,45,59,.93),rgba(8,23,37,.92)); border:1px solid #bad5ed4f; box-shadow:0 16px 45px #00102730,inset 0 1px #ffffff08; border-radius:20px; backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); }
  .hub-feature { padding:23px 23px 21px; display:flex; flex-direction:column; align-items:flex-start; }
  .hub-feature>.hub-icon { width:25px; height:25px; color:#b5cfeb; margin-bottom:17px; }
  .hub-feature h2 { font-size:17px; letter-spacing:-.3px; font-weight:650; line-height:1.4; margin-bottom:10px; }
  .hub-feature p { color:var(--hub-muted); font-size:13px; line-height:1.8; margin-bottom:19px; }
  .hub-feature>span { margin-top:auto; font-size:10px; color:#d4e4f3; }
  .hub-feature>span.hub-soon { color:#ccdf9c; }
  .hub-invite-note { display:flex; align-items:center; justify-content:center; gap:16px; max-width:650px; margin:0 auto; padding:17px 23px; background:#0a1c2edb; border:1px solid #b2cce43b; border-radius:16px; backdrop-filter:blur(12px); }
  .hub-invite-note>.hub-icon { width:28px; height:28px; color:#b5d0ee; }
  .hub-invite-note b { display:block; font-size:12px; font-weight:650; }
  .hub-invite-note span { display:block; margin-top:4px; color:var(--hub-muted); font-size:11px; }
  .hub-welcome-actions { display:flex; justify-content:center; align-items:center; gap:25px; margin:26px 0 15px; }
  .hub-button { display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:44px; padding:12px 20px; border:1px solid transparent; border-radius:12px; font:700 13px/1.5 var(--hub-font); text-align:center; cursor:pointer; transition:background .18s,transform .18s,box-shadow .18s; }
  .hub-button.primary { background:var(--hub-lime); color:#162109; box-shadow:0 5px 22px #b1de3912; }
  .hub-button.primary:hover { background:#e0ff79; box-shadow:0 6px 25px #b1de3928; transform:translateY(-1px); }
  .hub-button .hub-icon { width:19px; height:19px; }
  .hub-text-link,.hub-back-link { display:inline-flex; align-items:center; gap:9px; font-size:12px; color:#d0e1f3; }
  .hub-text-link:hover,.hub-back-link:hover { color:white; }
  .hub-text-link .hub-icon,.hub-back-link .hub-icon { width:17px; height:17px; }
  .hub-small-print { font-size:10px; line-height:1.8; text-align:center; color:#adbed1; margin:13px auto 0!important; }
  .hub-spaces { max-width:950px; padding-top:38px; }
  .hub-spaces .hub-intro h1 { font-size:clamp(29px,3vw,39px); }
  .space-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; margin-bottom:20px; }
  .space-card { padding:25px; display:flex; flex-direction:column; }
  .space-heading { display:flex; align-items:center; gap:16px; }
  .space-emblem { display:grid; place-items:center; width:54px; height:54px; flex:none; border:1px solid #b7d1ec30; border-radius:15px; background:#a6c8e612; color:#bdd7f0; }
  .space-emblem .hub-icon { width:31px; height:31px; }
  .space-heading h2 { font-size:25px; letter-spacing:-.8px; font-weight:700; line-height:1.25; margin-top:5px; }
  .space-heading .hub-eyebrow { font-size:9px; letter-spacing:1px; }
  .hub-role-badge { font-size:9px; white-space:nowrap; padding:4px 7px; border:1px solid #b1cee936; border-radius:7px; background:#b0c7e510; margin-left:auto; align-self:flex-end; color:#bed2e6; }
  .space-card .space-description { font-size:14px; color:var(--hub-muted); margin:16px 0 14px; }
  .space-features { list-style:none; margin:0 0 23px; padding:0; flex:1; }
  .space-features li { display:flex; gap:15px; align-items:center; min-height:43px; padding:10px 0; border-bottom:1px solid #b2cfe020; font-size:13px; }
  .space-features li:last-child { border:0; }
  .space-features .hub-icon { width:23px; height:23px; color:#adc9e5; }
  .space-card .hub-button { width:100%; }
  .space-signin-note { text-align:center; color:#a8bfd8; margin-top:9px; font-size:10px; }
  .hub-spaces>.hub-back-link { margin-top:20px; }
  .hub-access { max-width:550px; padding-top:34px; }
  .hub-access>.hub-back-link { margin:0 0 15px 10px; }
  .access-card { padding:28px 30px 0; text-align:center; }
  .access-emblem { width:61px; height:61px; display:grid; place-items:center; margin:0 auto 15px; border-radius:50%; border:1px solid #bed7f166; background:#c0d5e916; color:#e2edfa; }
  .access-emblem .hub-icon { width:29px; height:29px; }
  .access-card h1 { font-size:28px; letter-spacing:-.85px; line-height:1.3; font-weight:700; margin:11px 0; }
  .access-card .access-lead { color:var(--hub-muted); font-size:13px; line-height:1.8; }
  .access-steps { padding:0; margin:25px auto; list-style:none; display:flex; justify-content:center; }
  .access-steps li { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:11px; color:#9ab1c9; }
  .access-steps li+li::before { content:''; position:absolute; width:calc(100% - 49px); height:1px; background:#a6bfd54a; top:21px; right:calc(50% + 25px); }
  .access-steps li>span { display:grid; place-items:center; width:43px; height:43px; border:1px solid #bacfe16b; border-radius:50%; }
  .access-steps li.current { color:#f0f6fb; }
  .access-steps li.current>span { border-color:var(--hub-lime); color:var(--hub-lime); box-shadow:0 0 18px #d5f85a12; }
  .access-steps .hub-icon { width:20px; height:20px; }
  .access-status { display:flex; align-items:flex-start; gap:13px; padding:16px; margin-bottom:20px; border:1px solid #8bccf57c; border-radius:13px; background:#84c3eb08; color:#bad9f1; text-align:left; }
  .access-status>.hub-icon { width:21px; height:21px; margin-top:2px; }
  .access-status b { display:block; font-size:12px; font-weight:650; }
  .access-status p { font-size:11px; line-height:1.8; margin-top:4px; color:#a7c2d8; }
  .access-continue { width:100%; background:#c7d7e419; color:#98a9b9; border:1px solid #bdcfe521; font-weight:600; }
  .access-continue:disabled { opacity:1; cursor:not-allowed; }
  .access-continue .hub-icon:last-child { width:16px; height:16px; margin-left:auto; }
  .access-footer { border-top:1px solid #b2cde127; margin-top:21px; padding:17px 0; }
  .access-footer a { display:inline-flex; align-items:center; gap:9px; font-size:11px; color:#b7d2eb; }
  .access-footer .hub-icon { width:16px; height:16px; }
  .hub-page :is(a,button):focus-visible { outline:2px solid var(--hub-lime); outline-offset:5px; }
  @media (max-width:1250px) and (min-width:1101px) {
    .shell { width:calc(100% - 32px); }
  }
  @media (max-width:900px) {
    .site-header { margin-top:12px; top:auto; padding:7px 13px; }
    .shell,.sidebar { width:calc(100% - 32px); }
    #menu-button { display:grid!important; }
    .sidebar.open #nav { flex-wrap:wrap; max-height:min(196px,34dvh); overflow-y:auto; }
    #nav { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; justify-content:flex-start; }
    #nav .nav-link { flex:none; }
    .hub-page { padding-top:38px; }
    .hub-feature { padding:20px 18px; }
    .hub-feature h2 { font-size:15px; }
    .space-heading { gap:12px; flex-wrap:wrap; }
    .space-heading h2 { font-size:22px; }
    .space-card { padding:22px; }
    .hub-role-badge { margin-left:0; }
  }
  @media (max-width:600px) {
    .site-header { min-height:61px; margin-top:10px; top:auto; border-radius:14px; padding:6px 10px; gap:8px; }
    .hub-brand img { width:132px; height:34px; }
    .header-actions { gap:7px; }
    .header-actions summary { padding:7px 8px; gap:5px; min-height:35px; font-size:10px; }
    #background-picker>summary { min-width:48px; padding:6px 7px; gap:4px; }
    #background-symbol { width:20px; height:20px; }
    #background-auto { left:19px; bottom:0; }
    .language-switch { margin-right:0; }
    .background-panel { width:265px; right:-40px; }
    .hub-account { font-size:0; width:33px; min-height:35px; padding:5px; }
    .hub-account::before { content:''; width:17px; height:19px; background:currentColor; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7' r='4' fill='none' stroke='black' stroke-width='1.5'/%3E%3Cpath d='M4 22v-3a8 8 0 0 1 16 0v3' fill='none' stroke='black' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }
    .sidebar,.shell { width:calc(100% - 24px); }
    .sidebar { margin-top:4px; }
    .guide-context { gap:8px; padding:0 4px 4px; }
    .guide-context>a { font-size:10px; }
    .topbar .breadcrumb { font-size:9px; letter-spacing:.25px; }
    .topbar .breadcrumb :is(.breadcrumb-game,.breadcrumb-divider) { display:none; }
    #nav { padding:5px; border-radius:13px; }
    #nav .nav-link { font-size:10px; padding:9px 10px; }
    .shell { margin:12px auto 20px; border-radius:16px; }
    .topbar { padding:0; min-height:30px; gap:7px; }
    main#main { padding:17px 17px 26px; }
    .footer { display:block; padding:18px 17px; font-size:10px; }
    html[data-view=hub] .footer { padding:20px 4px; }
    .footer p { font-size:9px; }
    .hub-page { padding:30px 4px 25px; }
    .hub-intro { margin-bottom:23px; }
    .hub-intro h1 { font-size:32px; letter-spacing:-1px; margin:13px 0; }
    .hub-intro p { font-size:13px; line-height:1.8; }
    .hub-feature-grid { grid-template-columns:1fr; gap:11px; }
    .hub-feature { display:grid; grid-template-columns:26px 1fr; column-gap:15px; padding:20px; border-radius:16px; }
    .hub-feature>.hub-icon { grid-row:1/4; margin-top:2px; }
    .hub-feature h2 { font-size:16px; }
    .hub-feature p { margin-bottom:13px; }
    .hub-feature>span { grid-column:2; }
    .hub-invite-note { padding:16px; gap:12px; align-items:flex-start; border-radius:14px; }
    .hub-invite-note b { font-size:11px; }
    .hub-invite-note span { font-size:10px; }
    .hub-invite-note>.hub-icon { width:22px; height:22px; margin-top:3px; }
    .hub-welcome-actions { flex-direction:column; gap:18px; margin-top:22px; }
    .hub-welcome-actions>.hub-button { width:100%; }
    .hub-small-print { font-size:9px; }
    .hub-spaces .hub-intro h1 { font-size:30px; }
    .space-grid { grid-template-columns:1fr; gap:14px; }
    .space-card { padding:22px; border-radius:18px; }
    .space-heading { flex-wrap:nowrap; }
    .space-heading h2 { font-size:23px; }
    .space-emblem { width:46px; height:46px; border-radius:12px; }
    .space-emblem .hub-icon { width:26px; height:26px; }
    .space-heading .hub-role-badge { margin-left:auto; font-size:8px; padding:3px 5px; }
    .hub-access { padding-top:24px; }
    .access-card { padding:25px 21px 0; border-radius:18px; }
    .access-card h1 { font-size:25px; }
    .access-card .access-lead { font-size:12px; }
    .access-continue { gap:8px; font-size:12px; padding:11px; }
    .access-status { padding:14px 12px; gap:9px; }
    .access-steps li { font-size:10px; }
  }
  @media (max-width:359px) {
    .hub-brand img { width:115px; }
    .space-card { padding:19px 17px; }
    .space-heading { flex-wrap:wrap; }
    .space-heading .hub-role-badge { margin-left:58px; }
  }
  @media (max-width:1100px) {
    .site-header { grid-template-columns:auto auto; justify-content:space-between; gap:6px 16px; margin:0 auto; padding:6px 10px; min-height:56px; }
    .site-header .hub-brand { grid-column:1; grid-row:1; }
    .site-header .header-actions { grid-column:2; grid-row:1; }
    .site-header .sidebar { grid-column:1/-1; grid-row:2; width:100%; margin:0; }
    .sidebar .guide-context,#menu-button { display:none!important; }
    #nav { padding:0; overflow:visible; justify-content:center; flex-wrap:nowrap; }
    .sidebar.open #nav { max-height:none; overflow:visible; }
    #nav > .nav-link,#nav .nav-group > summary { font-size:12px; padding:8px 12px; }
    #nav [data-nav-group=information] .nav-dropdown { right:0; left:auto; }
  }
  @media (max-width:600px) {
    .site-chrome { top:6px; }
    .site-header { min-height:48px; padding:6px 8px; gap:5px 8px; border-radius:14px; }
    .hub-brand img { width:122px; height:34px; }
    #nav { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:2px 5px; }
    #nav > .nav-link,#nav .nav-group > summary { justify-content:center; padding:7px 6px; font-size:11px; }
    #nav .nav-group { position:static; }
    #nav .nav-dropdown,#nav [data-nav-group=information] .nav-dropdown { left:0; right:0; top:calc(100% + 8px); width:100%; box-sizing:border-box; }
    #nav .nav-dropdown .nav-link { padding:10px 12px; font-size:12px; }
  }
  @media (max-width:359px) {
    .hub-brand img { width:90px; }
    .header-actions { gap:5px; }
  }
  @media (prefers-reduced-motion:reduce) {
    .hub-button { transition:none; }
    .hub-button.primary:hover { transform:none; }
    #nav .nav-dropdown { animation:none; }
    #nav .nav-chevron { transition:none; }
  }
}
@media print {
  .site-chrome,.site-header,.background-picker,.language-switch,.hub-welcome-actions,.hub-back-link { display:none!important; }
  .app-frame,.page-viewport { display:block; position:static; height:auto; min-height:0; padding:0; overflow:visible; opacity:1!important; transform:none!important; }
  .shell { width:auto; max-width:none; margin:0; border:0; border-radius:0; box-shadow:none; background:white; }
  .hub-page { color:#18252a; }
  .hub-icon { width:20px; height:20px; }
}