/* NXT design system — shell layer: the global header (site / app / focus), ecosystem footer,
   application frame (sidebar, bottom tab bar, FAB, rail, workspace), and the global overlays
   (command center, product switcher, notification center). Breakpoints: 768 (tablet), 1024 (laptop). */

@layer shell {
  /* ---------- Global header ---------- */
  .gh { position: sticky; top: 0; z-index: var(--z-header); background: color-mix(in srgb, var(--c-bg) 82%, transparent); backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px); border-bottom: 1px solid color-mix(in srgb, var(--c-border) 80%, transparent); }
  .gh-in { display: flex; align-items: center; gap: var(--s-3); height: var(--layout-header); max-width: var(--layout-page); margin: 0 auto; padding-inline: max(var(--layout-gutter), env(safe-area-inset-left)); }
  .chrome-app .gh-in { max-width: none; padding-inline: var(--s-4); }
  .gh-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--c-text); text-decoration: none; flex: none; border-radius: var(--r-sm); }
  .gh-word { display: inline-flex; align-items: center; gap: 7px; }
  .gh-word .wordmark { color: var(--c-text); }
  .gh-suffix { font: 650 0.9375rem/1 var(--font-display); letter-spacing: 0.04em; color: var(--p-ink, var(--c-link)); padding-top: 1px; }
  .gh-brand.p-cloud .gh-suffix { color: var(--c-muted); font-weight: 600; letter-spacing: 0.14em; font-size: 0.75rem; }
  .gh-sep { color: var(--c-border-strong); font-size: 1.25rem; font-weight: 300; margin: 0 -2px; }
  .gh-product { display: inline-flex; align-items: center; gap: 8px; font: 650 0.9375rem/1 var(--font-display); letter-spacing: 0.03em; color: var(--p-ink); text-decoration: none; }
  .gh-nav { display: flex; align-items: center; gap: 2px; margin-left: var(--s-4); }
  .gh-nav > a, .gh-mega > summary { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 var(--s-3); border-radius: var(--r-sm); color: var(--c-muted); font-weight: 600; font-size: var(--t-small); text-decoration: none; list-style: none; cursor: pointer; transition: color var(--d-fast), background-color var(--d-fast); }
  .gh-mega > summary::-webkit-details-marker { display: none; }
  .gh-nav > a:hover, .gh-mega > summary:hover, .gh-mega[open] > summary { color: var(--c-text); background: var(--c-surface2); }
  .gh-nav > a[aria-current='page'], .gh-mega[data-active] > summary { color: var(--c-text); }
  .gh-actions { margin-left: auto; display: flex; align-items: center; gap: 6px; }
  .gh-icon { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-muted); cursor: pointer; list-style: none; text-decoration: none; transition: color var(--d-fast), background-color var(--d-fast); }
  .gh-icon::-webkit-details-marker { display: none; }
  .gh-icon:hover, details[open] > .gh-icon { color: var(--c-text); background: var(--c-surface2); }
  .gh-dot { position: absolute; top: 3px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--c-error); color: var(--c-on-error); font-size: 0.625rem; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--c-bg); }
  .when-dark { display: none; }
  @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .when-dark { display: block; } :root:not([data-theme='light']) .when-light { display: none; } }
  :root[data-theme='dark'] .when-dark { display: block; } :root[data-theme='dark'] .when-light { display: none; }
  .gh-search { display: inline-flex; align-items: center; gap: var(--s-2); height: 36px; padding: 0 6px 0 10px; border: 1px solid var(--c-border); border-radius: var(--r-sm); background: var(--c-surface); color: var(--c-muted); font-size: var(--t-small); cursor: pointer; transition: border-color var(--d-fast), color var(--d-fast); }
  .gh-search:hover { border-color: var(--c-border-strong); color: var(--c-text); }
  .gh-search .kbd-group { margin-left: var(--s-2); }
  .gh-search.is-wide { width: min(520px, 100%); }
  .gh-search.is-wide .kbd-group { margin-left: auto; }
  .gh-center { flex: 1; display: flex; justify-content: center; min-width: 0; }
  .gh-avatar { list-style: none; cursor: pointer; border-radius: 50%; display: inline-grid; padding: 2px; }
  .gh-avatar::-webkit-details-marker { display: none; }
  .gh-avatar:hover .avatar, details[open] > .gh-avatar .avatar { box-shadow: 0 0 0 2px var(--c-primary); }
  .gh-cta { margin-left: 2px; }
  .gh-home { display: inline-grid; border-radius: var(--r-sm); }
  .gh-switch { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 8px; border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font: 650 0.9375rem/1 var(--font-display); letter-spacing: -0.005em; min-width: 0; }
  .gh-switch:hover { background: var(--c-surface2); }
  .gh-switch > .i { color: var(--c-muted); }
  .gh-switch-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .gh-focus { background: transparent; border-bottom-color: transparent; backdrop-filter: none; position: relative; }

  /* Products mega menu */
  .gh-mega { position: static; }
  .mega { position: absolute; left: 50%; translate: -50% 0; top: calc(var(--layout-header) - 4px); width: min(1080px, calc(100vw - 32px)); padding: var(--s-5); background: var(--c-elevated); border: 1px solid var(--c-border); border-radius: var(--r-lg); box-shadow: var(--e-4); animation: nxt-pop var(--d-base) var(--ease-out); }
  .mega-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-5); }
  .mega-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; }
  .mega-col li { margin: 0; }
  .mega-item { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-2); border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; }
  .mega-item:hover { background: var(--p-soft, var(--c-surface2)); text-decoration: none; }
  .mega-item strong { display: block; font-size: var(--t-small); }
  .mega-item small { display: block; color: var(--c-muted); font-size: var(--t-caption); line-height: 1.35; }
  .mega-foot { display: flex; gap: var(--s-5); align-items: center; flex-wrap: wrap; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--c-border); font-size: var(--t-small); font-weight: 600; }
  .mega-foot a { display: inline-flex; gap: 4px; align-items: center; text-decoration: none; }
  .mega-foot span { margin-left: auto; font-weight: 400; }

  /* Mobile navigation sheet (site) */
  .gh-burger { display: none; }
  .gh-burger > summary { list-style: none; }
  .gh-sheet { position: fixed; inset: var(--layout-header) 0 0 0; z-index: var(--z-sheet); overflow-y: auto; padding: var(--s-4) var(--layout-gutter) calc(var(--s-8) + env(safe-area-inset-bottom)); background: var(--c-bg); animation: nxt-fade var(--d-base) var(--ease-out); }
  .gh-sheet nav > .overline { margin: var(--s-5) 0 var(--s-2); }
  .gh-sheet-products { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
  .gh-sheet-products li { margin: 0; }
  .gh-sheet-products a { display: flex; gap: var(--s-2); align-items: center; min-height: 44px; padding: 6px; border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; font-weight: 600; font-size: var(--t-small); }
  .gh-sheet-products a:hover { background: var(--c-surface2); }
  .gh-sheet-links { list-style: none; padding: 0; margin: var(--s-6) 0 0; border-top: 1px solid var(--c-border); }
  .gh-sheet-links li { margin: 0; border-bottom: 1px solid var(--c-border); }
  .gh-sheet-links a { display: flex; min-height: 48px; align-items: center; color: var(--c-text); font-weight: 600; text-decoration: none; }
  .gh-sheet-actions { display: grid; gap: var(--s-2); margin-top: var(--s-6); }

  @media (max-width: 1100px) {
    .gh-site .gh-nav { display: none; }
    .gh-burger { display: block; }
  }
  @media (max-width: 767px) {
    .gh-search .gh-search-label, .gh-search .kbd-group { display: none; }
    .gh-search { width: 36px; padding: 0; justify-content: center; border-color: transparent; background: none; }
    .gh-search.is-wide { width: 36px; }
    .gh-center { flex: 0; margin-left: auto; }
    .gh-help, .hide-sm { display: none !important; }
    .gh-site .gh-product span { display: none; }
  }
  @media (max-width: 420px) {
    .gh-site .gh-word { display: none; }
    .gh-in { gap: 6px; }
    .gh-actions { gap: 2px; }
    /* The theme switch moves into the menu sheet so the bar fits 320px with a product mark and CTA. */
    .gh-site .gh-actions > .gh-theme { display: none; }
  }

  /* ---------- Footer ---------- */
  .gf { margin-top: auto; }
  .gf:not(.gf-slim) { background: #000000; color: #F5F5F5; --c-text: #F5F5F5; --c-muted: #A3A3A3; --c-link: #FFFFFF; --c-border: #262626; --c-focus: #FFFFFF; --c-focus-inner: #000000; --c-surface2: #141414; --c-primary: #FFFFFF; --c-on-primary: #000000; --c-accent: #FFFFFF; --p: var(--c-primary); --pa: var(--c-accent); --pon: var(--c-on-primary); padding: var(--s-16) 0 var(--s-8); position: relative; overflow: hidden; }
  .gf::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 1px; background: linear-gradient(90deg, transparent, #FFFFFF 50%, transparent); opacity: 0.35; }
  .gf a { color: var(--c-text); text-decoration: none; }
  .gf a:hover { text-decoration: underline; }
  .gf .gh-brand { color: #fff; }
  .gf .gh-word .wordmark { color: #fff; }
  .gf-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 2.4fr); gap: var(--s-10); padding-bottom: var(--s-10); border-bottom: 1px solid var(--c-border); }
  .gf-brand p { margin: var(--s-4) 0; max-width: 36ch; font-size: var(--t-small); }
  .gf-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); }
  .gf-col h2 { color: var(--c-muted); margin-bottom: var(--s-3); }
  .gf-col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; font-size: var(--t-small); }
  .gf-col li { margin: 0; }
  .gf-dot { display: inline-block; width: 6px; height: 6px; border-radius: 2px; margin-right: 8px; background: var(--pa); vertical-align: middle; }
  .gf-links { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s-6); padding: var(--s-10) 0; }
  .gf-social { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); list-style: none; padding: 0; margin: 0; font-size: var(--t-small); }
  .gf-social li { margin: 0; }
  .gf-base { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); align-items: center; justify-content: space-between; padding-top: var(--s-6); border-top: 1px solid var(--c-border); }
  .gf-powered { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; font-size: var(--t-small); font-weight: 600; }
  .gf-sep { color: var(--c-muted); }
  .gf-slim { padding: var(--s-6) 0; }
  .gf-slim::before { display: none; }
  .gf-slim .gf-base { border-top: 0; padding-top: 0; }
  .gf-inline { display: flex; gap: var(--s-5); font-size: var(--t-small); }
  .gf-inline a { color: var(--c-muted); }
  .gf-slim { background: var(--c-bg); color: var(--c-muted); border-top: 1px solid var(--c-border); }
  .gf-slim .gf-powered { color: var(--c-text); }
  @media (max-width: 1024px) { .gf-top { grid-template-columns: 1fr; } .gf-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (max-width: 640px) { .gf-products, .gf-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gf { padding-top: var(--s-12); } }

  /* ---------- Application frame ---------- */
  .app { display: grid; grid-template-columns: var(--layout-sidebar) minmax(0, 1fr); min-height: calc(100dvh - var(--layout-header)); }
  .app-split { grid-template-columns: var(--layout-sidebar) minmax(0, 1fr) 320px; }
  .app > * { min-width: 0; }
  .app-side { position: sticky; top: var(--layout-header); align-self: start; height: calc(100dvh - var(--layout-header)); display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-4) var(--s-3); border-right: 1px solid var(--c-border); background: var(--c-bg); overflow-y: auto; overflow-x: hidden; isolation: isolate; }
  .app-side-head { display: flex; gap: var(--s-3); align-items: center; padding: var(--s-2) var(--s-2) var(--s-3); color: var(--c-text); text-decoration: none; border-radius: var(--r-md); }
  .app-side-head > span { display: grid; gap: 3px; min-width: 0; }
  .app-side-name { font: 650 1rem/1.1 var(--font-display); letter-spacing: -0.01em; }
  .app-primary { margin: 0 var(--s-1) var(--s-2); width: auto; }
  .app-nav { display: grid; gap: 1px; }
  .app-nav-group { margin: var(--s-4) var(--s-3) var(--s-1); font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-nav-item { position: relative; display: flex; gap: 10px; align-items: center; min-height: 36px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--c-muted); font-size: var(--t-small); font-weight: 600; text-decoration: none; transition: color var(--d-fast), background-color var(--d-fast); }
  .app-nav-item:hover { color: var(--c-text); background: var(--c-surface2); text-decoration: none; }
  .app-nav-item[aria-current='page'] { color: var(--c-text); background: var(--c-primary-soft); }
  .app-nav-item[aria-current='page']::before { content: ''; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--c-primary); }
  .app-nav-item[aria-current='page'] .i { color: var(--c-link); }
  button.app-nav-item { width: 100%; border: 0; background: none; font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer; text-align: left; }
  .app-side-foot form { margin: 0; }
  .app-nav-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .app-nav-badge { font-size: var(--t-caption); color: var(--c-muted); }
  .app-nav-lock { color: var(--c-muted); display: inline-flex; }
  .app-nav-item.is-locked { opacity: 0.8; }
  .app-side-foot { margin-top: auto; padding-top: var(--s-3); border-top: 1px solid var(--c-border); display: grid; gap: 1px; }
  .app-side-motif { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 120px; color: var(--c-link); opacity: 0.06; z-index: -1; pointer-events: none; }
  .app-main { padding: var(--s-8) clamp(var(--s-4), 3vw, var(--s-12)) var(--s-16); }
  .app-content { max-width: 1240px; }
  .app-rail { position: sticky; top: var(--layout-header); align-self: start; height: calc(100dvh - var(--layout-header)); overflow-y: auto; padding: var(--s-6) var(--s-5); border-left: 1px solid var(--c-border); background: var(--c-surface); }
  .app-workspace { display: block; min-height: calc(100dvh - var(--layout-header)); }
  .app-tabbar, .fab { display: none; }
  .is-workspace .gf-slim { display: none; }

  @media (max-width: 1279px) { .app-split { grid-template-columns: var(--layout-sidebar) minmax(0, 1fr); } .app-rail { position: static; height: auto; grid-column: 2; border-left: 0; border-top: 1px solid var(--c-border); } }
  @media (max-width: 1023px) {
    .app, .app-split { grid-template-columns: minmax(0, 1fr); }
    .app-side { display: none; }
    .app-rail { grid-column: 1; }
    .app-main { padding: var(--s-6) var(--s-4) calc(var(--layout-bottom-nav) + var(--s-12) + env(safe-area-inset-bottom)); }
    .app-tabbar { position: fixed; z-index: var(--z-sticky); left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); height: calc(var(--layout-bottom-nav) + env(safe-area-inset-bottom)); padding: 0 var(--s-1) env(safe-area-inset-bottom); background: color-mix(in srgb, var(--c-elevated) 92%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--c-border); }
    .app-tabbar > a, .app-tabbar > button, .app-more > summary { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; height: var(--layout-bottom-nav); padding: 0; border: 0; background: none; color: var(--c-muted); font: inherit; font-size: 0.6875rem; font-weight: 600; text-decoration: none; list-style: none; cursor: pointer; }
    .app-tab-home .mark { border-radius: 6px; opacity: 0.85; }
    .app-tab-home[aria-current='page'] .mark { opacity: 1; }
    .app-more > summary::-webkit-details-marker { display: none; }
    .app-tabbar > a[aria-current='page'] { color: var(--c-link); }
    .app-tabbar > a[aria-current='page'] .i { transform: translateY(-1px); }
    .app-more-sheet { position: fixed; left: 0; right: 0; bottom: calc(var(--layout-bottom-nav) + env(safe-area-inset-bottom)); max-height: 70dvh; overflow-y: auto; padding: var(--s-4); background: var(--c-elevated); border-top: 1px solid var(--c-border); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--e-4); display: grid; gap: 2px; animation: nxt-sheet-up var(--d-slow) var(--ease-out); }
    .app-more-sheet hr { margin: var(--s-2) 0; }
    .fab { position: fixed; z-index: var(--z-sticky); right: var(--s-4); bottom: calc(var(--layout-bottom-nav) + var(--s-4) + env(safe-area-inset-bottom)); display: grid; place-items: center; width: 56px; height: 56px; border-radius: var(--r-lg); background: var(--c-primary); color: var(--c-on-primary); box-shadow: var(--e-3), inset 0 1px 0 rgb(255 255 255 / 0.2); transition: transform var(--d-base) var(--ease-spring); }
    .fab:active { transform: scale(0.94); }
    .chrome-app .gf-slim { display: none; }
  }
  @keyframes nxt-sheet-up { from { transform: translateY(24px); opacity: 0; } }


  /* ---------- Command center (⌘K) ---------- */
  .cmdk { width: min(680px, calc(100vw - 24px)); max-height: min(72dvh, 640px); margin: 12dvh auto auto; padding: 0; border: 1px solid var(--c-border); border-radius: var(--r-lg); background: var(--c-elevated); box-shadow: var(--e-4), 0 0 0 1px rgb(0 0 0 / 0.04); overflow: hidden; display: none; flex-direction: column; }
  .cmdk[open] { display: flex; animation: nxt-dialog-in var(--d-base) var(--ease-out); }
  .cmdk-head { display: flex; align-items: center; gap: var(--s-3); padding: 0 var(--s-3) 0 var(--s-5); border-bottom: 1px solid var(--c-border); color: var(--c-muted); }
  .cmdk-head input { flex: 1; min-width: 0; height: 60px; border: 0; background: none; color: var(--c-text); font-size: 1.0625rem; outline: none; }
  .cmdk-head input::placeholder { color: var(--c-muted); }
  .cmdk-head form { margin: 0; }
  .cmdk-esc { border: 0; background: none; padding: 4px; cursor: pointer; }
  .cmdk-scopes { display: flex; gap: 4px; padding: var(--s-2) var(--s-4); border-bottom: 1px solid var(--c-border); overflow-x: auto; scrollbar-width: none; }
  .cmdk-scopes button, .notif-filters button { flex: none; height: 28px; padding: 0 10px; border: 1px solid transparent; border-radius: var(--r-sm); background: none; color: var(--c-muted); font-size: var(--t-caption); font-weight: 600; cursor: pointer; }
  .cmdk-scopes button:hover, .notif-filters button:hover { color: var(--c-text); background: var(--c-surface2); }
  .cmdk-scopes [aria-pressed='true'], .notif-filters [aria-pressed='true'] { color: var(--c-text); border-color: var(--c-border-strong); background: var(--c-surface); }
  .cmdk-list { flex: 1; overflow-y: auto; padding: var(--s-2); scroll-padding: var(--s-2); }
  .cmdk-group { margin: var(--s-2) var(--s-3) 4px; font: var(--fw-overline) var(--t-overline)/1.2 var(--font-mono); letter-spacing: var(--tr-overline); text-transform: uppercase; color: var(--c-muted); }
  .cmdk-item { display: flex; gap: var(--s-3); align-items: center; min-height: 44px; padding: 6px 10px; border-radius: var(--r-sm); color: var(--c-text); text-decoration: none; cursor: pointer; }
  .cmdk-item .i { color: var(--c-muted); }
  .cmdk-item .mark { width: 26px; height: 26px; }
  .cmdk-ic { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--r-sm); background: var(--c-surface2); }
  .cmdk-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
  .cmdk-label mark { background: none; color: var(--c-link); font-weight: 700; }
  .cmdk-hint { color: var(--c-muted); font-size: var(--t-caption); white-space: nowrap; }
  .cmdk-lock { color: var(--c-muted); font-size: var(--t-caption); display: inline-flex; gap: 4px; align-items: center; }
  .cmdk-item[aria-selected='true'] { background: var(--c-primary-soft); }
  .cmdk-item[aria-selected='true'] .cmdk-go { opacity: 1; }
  .cmdk-go { opacity: 0; color: var(--c-muted); }
  .cmdk-empty { padding: var(--s-8) var(--s-5); color: var(--c-muted); text-align: center; margin: 0 auto; }
  .cmdk-foot { display: flex; gap: var(--s-4); padding: var(--s-2) var(--s-5); border-top: 1px solid var(--c-border); background: var(--c-surface); }
  .cmdk-status { margin-left: auto; }
  @media (max-width: 767px) {
    .cmdk { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; margin: 0; border-radius: 0; border: 0; }
    .cmdk-foot { display: none; }
  }

  /* ---------- Product switcher ---------- */
  .switcher[open], .notif[open] { display: flex; flex-direction: column; }
  .switcher { width: min(560px, 100vw); }
  .switcher-body, .notif-body { flex: 1; overflow-y: auto; padding: var(--s-4) var(--s-5) var(--s-6); display: grid; gap: var(--s-5); align-content: start; }
  .sw-group > .overline { margin-bottom: var(--s-2); display: flex; justify-content: space-between; }
  .sw-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .sw-row { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
  .sw-row .sw-tile { flex: 0 0 auto; width: 132px; grid-template-columns: 1fr; }
  .sw-row .sw-desc { display: none; }
  .sw-wrap { position: relative; min-width: 0; }
  .sw-row .sw-wrap { flex: 0 0 auto; }
  .sw-tile { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: var(--s-3); align-items: start; padding: var(--s-3); padding-right: 36px; border: 1px solid var(--c-border); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-decoration: none; transition: border-color var(--d-fast), background-color var(--d-fast), transform var(--d-base) var(--ease-out); }
  .sw-tile:hover, .sw-tile:focus-visible { border-color: var(--p, var(--c-border-strong)); background: var(--p-soft, var(--c-surface2)); text-decoration: none; }
  .sw-tile.is-current { border-color: var(--p); box-shadow: inset 0 0 0 1px var(--p); }
  .sw-tile.is-locked { background: var(--c-bg); }
  .sw-tile.is-locked .mark { filter: grayscale(0.7); opacity: 0.75; }
  .sw-name { display: block; font-weight: 650; font-size: var(--t-small); }
  .sw-desc { display: block; color: var(--c-muted); font-size: var(--t-caption); line-height: 1.35; margin-top: 2px; }
  .sw-meta { display: flex; gap: 6px; align-items: center; margin-top: 6px; font-size: var(--t-caption); }
  .sw-meta .lock { color: var(--c-muted); display: inline-flex; gap: 3px; align-items: center; }
  .sw-meta a { font-weight: 600; }
  .sw-star { position: absolute; top: 6px; right: 6px; display: grid; place-items: center; width: 28px; height: 28px; border: 0; border-radius: var(--r-sm); background: none; color: var(--c-muted); cursor: pointer; }
  .sw-star:hover { background: var(--c-surface2); color: var(--c-text); }
  .sw-star[aria-pressed='true'] { color: var(--c-text); }
  .sw-star[aria-pressed='true'] path { fill: currentColor; }
  @media (max-width: 480px) { .sw-grid { grid-template-columns: minmax(0, 1fr); } }

  /* ---------- Notification center ---------- */
  .notif { width: min(460px, 100vw); }
  .notif-filters { display: flex; gap: 4px; padding: var(--s-2) var(--s-5); border-bottom: 1px solid var(--c-border); overflow-x: auto; scrollbar-width: none; }
  .notif-body { gap: 0; padding-top: var(--s-2); }
  .notif-day { margin: var(--s-4) 0 var(--s-1); }
}