/* ============================================================
   TPSS · Shared Shell Styles for full prototype
   Sidebar nav + glass topbar + cosmic backdrop
   ============================================================ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--surface);
  color: var(--on-surface);
  font-family: var(--font-body);
  font-weight:600;
  letter-spacing: .02em;
  min-height: 100vh;
  overflow-x: hidden;
  position: relative;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
img{display:block;max-width:100%}

/* ===== IRIDESCENT COSMIC STARRY BACKDROP ENGINE (parametric · each page a variation) ===== */
/* Four luminous nebula clouds spread across the whole viewport over a deep cosmic base,
   a slow holographic swirl, and a rich multicolour starfield - the brand-book sky.
   Per-page world-* classes re-tint the four clouds + base; all stay iridescent + starry. */
#stardust{position:fixed !important;z-index:1 !important;pointer-events:none}
.cosmos{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(48% 42% at var(--c1-pos,16% -6%),  var(--cloud1,rgba(255,77,214,.9))  0%, transparent 56%),
    radial-gradient(48% 44% at var(--c2-pos,88% 4%),   var(--cloud2,rgba(96,196,255,.62)) 0%, transparent 56%),
    radial-gradient(56% 50% at var(--c3-pos,80% 90%),  var(--cloud3,rgba(80,210,255,.6))  0%, transparent 54%),
    radial-gradient(50% 46% at var(--c4-pos,10% 94%),  var(--cloud4,rgba(255,178,120,.5))  0%, transparent 52%),
    var(--field-base,linear-gradient(180deg,#ffc4ee 0%,#ff8fe0 14%,#ff5ccf 30%,#ff2dbb 46%,#f411a8 62%,#a80f86 74%,#4c0e63 84%,#1c0940 93%,#0a0014 100%));
}
/* holographic swirl */
.cosmos::before{content:'';position:absolute;inset:-20%;opacity:.5;mix-blend-mode:screen;
  background:conic-gradient(from var(--swirl-from,210deg) at var(--swirl-at,62% 34%),
    var(--swirl-a,rgba(255,79,216,.5)), rgba(160,107,255,0) 26%,
    var(--swirl-b,rgba(62,224,230,.42)) 56%, var(--swirl-c,rgba(255,170,120,.3)) 78%, rgba(255,79,216,0) 100%);
  animation:swirl 32s linear infinite}
@keyframes swirl{to{transform:rotate(360deg)}}
/* animated GIF twinkle layer over the cosmos on every shell page */
.cosmos::after{content:'';position:absolute;inset:0;background:url('../assets/gifs/stars-tall.gif') center/540px repeat;mix-blend-mode:screen;opacity:.3;pointer-events:none}
.neb{position:absolute;width:620px;height:620px;border-radius:50%;filter:blur(150px);pointer-events:none;z-index:0;opacity:.6}
/* footers rest on the page-bottom cosmic void - force light ink there */
footer,footer .copy,footer>div{color:rgba(255,229,249,.82) !important}
footer{border-top-color:rgba(255,255,255,.16) !important}

/* ===== SEAMLESS MOTION LAYER (galactic polish) ===== */
@media (prefers-reduced-motion: no-preference){
  /* aurora hue drift on the nebula blobs - slow, seamless color change */
  .neb{animation-name:nf,sfHue;animation-duration:22s,46s;animation-timing-function:ease-in-out,linear;animation-iteration-count:infinite,infinite}
  .neb-2{animation-duration:28s,58s;animation-direction:reverse,normal}
  @keyframes sfHue{0%{filter:blur(150px) hue-rotate(0deg)}50%{filter:blur(150px) hue-rotate(38deg)}100%{filter:blur(150px) hue-rotate(0deg)}}
  /* shimmering gradient sweep across the big display titles */
  .page-title{background-size:220% auto;animation:sfShimmer 9s ease-in-out infinite}
  @keyframes sfShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
}
/* silky card + link transitions */
.stad,.nav-item,.tpss-btn-primary,.tpss-btn-ghost{will-change:transform}
.stad:hover{transform:translateY(-4px)}

.neb-1{top:-16%;left:-12%;background:radial-gradient(circle,var(--neb1-col,rgba(255,45,187,.5)),transparent 70%);animation:nf 22s ease-in-out infinite}
.neb-2{bottom:-18%;right:-12%;background:radial-gradient(circle,var(--neb2-col,rgba(150,220,245,.36)),transparent 72%);animation:nf 28s ease-in-out infinite reverse}
@keyframes nf{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(50px,36px) scale(1.18)}}

/* ===== PER-PAGE WORLDS (variations on the same iridescent-cosmic sky) ===== */
/* NEXUS - the hub: balanced full spectrum (defaults) */
.world-nexus{--cloud1:rgba(255,120,222,.45);--cloud2:rgba(168,128,255,.42);--cloud3:rgba(96,214,235,.40);--cloud4:rgba(255,140,200,.38)}
/* ATELIER - couture warmth: rose, orchid, peach, magenta */
.world-atelier{--cloud1:rgba(255,140,212,.46);--cloud2:rgba(214,150,255,.41);--cloud3:rgba(255,180,150,.37);--cloud4:rgba(255,120,190,.41);--swirl-a:rgba(255,90,200,.45);--swirl-b:rgba(255,180,140,.36);--neb1-col:rgba(255,90,200,.35);--neb2-col:rgba(255,170,150,.31)}
/* LAB - clinical cool: aqua, cyan, soft violet, mint */
.world-lab{--cloud1:rgba(120,220,245,.45);--cloud2:rgba(150,180,255,.40);--cloud3:rgba(96,224,210,.40);--cloud4:rgba(190,150,255,.36);--swirl-a:rgba(90,210,255,.42);--swirl-b:rgba(120,224,210,.38);--swirl-c:rgba(180,150,255,.31);--neb1-col:rgba(96,200,255,.35);--neb2-col:rgba(150,140,255,.31)}
/* LOOM - synthesis depth: violet, indigo, magenta, blue */
.world-loom{--cloud1:rgba(190,120,255,.45);--cloud2:rgba(140,150,255,.41);--cloud3:rgba(214,110,235,.38);--cloud4:rgba(120,140,255,.38);--swirl-a:rgba(190,110,255,.45);--swirl-b:rgba(120,160,255,.38);--neb1-col:rgba(180,90,255,.35);--neb2-col:rgba(120,150,255,.31)}
/* CODEX - the genealogy: full prismatic spectrum, brightest stars */
.world-codex{--cloud1:rgba(255,120,222,.45);--cloud2:rgba(168,128,255,.42);--cloud3:rgba(96,214,235,.41);--cloud4:rgba(255,200,120,.36);--star-op:.95;/* @kind other */}
/* MODULE - the awakening: warm magenta, rose, gold dawn */
.world-module{--cloud1:rgba(255,110,190,.46);--cloud2:rgba(255,150,200,.41);--cloud3:rgba(255,200,140,.37);--cloud4:rgba(214,110,170,.40);--swirl-a:rgba(255,90,170,.45);--swirl-c:rgba(255,200,140,.33);--neb1-col:rgba(255,80,180,.35);--neb2-col:rgba(255,190,150,.31)}
/* CHARACTER WORLDS - each sister tinted to her signature accent */
.world-seraphina{--cloud1:rgba(255,100,200,.48);--cloud2:rgba(255,140,210,.42);--cloud3:rgba(214,60,150,.38);--cloud4:rgba(255,120,180,.42);--swirl-a:rgba(255,60,180,.47);--neb1-col:rgba(255,60,180,.37);--neb2-col:rgba(255,150,210,.32)}
.world-electra{--cloud1:rgba(190,200,255,.45);--cloud2:rgba(214,196,255,.41);--cloud3:rgba(150,190,255,.38);--cloud4:rgba(230,210,255,.38);--swirl-a:rgba(160,180,255,.42);--swirl-b:rgba(214,196,255,.38);--neb1-col:rgba(150,180,255,.33);--neb2-col:rgba(214,196,255,.31)}
.world-prismatica{--cloud1:rgba(255,130,215,.45);--cloud2:rgba(150,220,210,.40);--cloud3:rgba(120,210,235,.40);--cloud4:rgba(255,160,220,.38);--swirl-a:rgba(255,120,210,.43);--swirl-b:rgba(120,224,210,.40);--neb1-col:rgba(120,220,200,.33);--neb2-col:rgba(255,140,220,.32)}
.world-radiance{--cloud1:rgba(120,200,235,.45);--cloud2:rgba(110,150,235,.41);--cloud3:rgba(96,210,224,.40);--cloud4:rgba(255,100,200,.36);--swirl-a:rgba(90,170,255,.42);--swirl-b:rgba(120,224,224,.38);--swirl-c:rgba(255,100,200,.31);--neb1-col:rgba(80,160,255,.35);--neb2-col:rgba(255,80,200,.30)}
.world-fuchsia{--cloud1:rgba(214,110,255,.46);--cloud2:rgba(170,130,255,.41);--cloud3:rgba(120,214,224,.38);--cloud4:rgba(255,120,220,.40);--swirl-a:rgba(200,90,255,.45);--swirl-b:rgba(120,214,224,.38);--neb1-col:rgba(200,90,255,.35);--neb2-col:rgba(120,214,224,.31)}

/* ===== APP SHELL ===== */
.app{position:relative;z-index:2;display:grid;grid-template-columns:240px 1fr;min-height:100vh}

/* ===== SIDEBAR ===== */
/* ===== LIGHT-THEME TOKEN OVERRIDES (platform only · scoped to body) ===== */
/* The brand-book field is luminous; content sits on it as dark ink + light glass. */
body{
  --surface:#fbeefb;--surface-dim:#f3e2f2;--surface-bright:#ffffff;
  --surface-container-lowest:#ffffff;
  --surface-container-low:rgba(255,255,255,.62);
  --surface-container:rgba(255,255,255,.74);
  --surface-container-high:rgba(255,255,255,.86);
  --surface-container-highest:#ffffff;
  --surface-variant:#f3e2f2;
  --background:transparent;--on-background:#3a1438;
  --on-surface:#2e0b30;--on-surface-variant:#5e2450;
  --outline:#9a6f90;--outline-variant:rgba(120,55,108,.20);
  --primary:#e8109f;--on-primary:#ffffff;--primary-container:#ff2dbb;
  --neon:#ff2dbb;
  --secondary:#a938e0;--tertiary:#ff3d8f;
  --inverse-surface:#34123a;--inverse-on-surface:#fbeefb;
}

.sidebar{
  position:sticky;top:0;height:100vh;
  padding:32px 20px;
  background:rgba(255,255,255,.62);
  backdrop-filter:blur(40px) saturate(1.3);
  border-right:1px solid var(--outline-variant);
  display:flex;flex-direction:column;gap:8px;
  z-index:10;
  overflow-y:auto;overflow-x:hidden;
  scrollbar-width:thin;scrollbar-color:rgba(232,16,159,.4) transparent;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-track{background:transparent}
.sidebar::-webkit-scrollbar-thumb{background:rgba(232,16,159,.35);border-radius:8px}
.sidebar::-webkit-scrollbar-thumb:hover{background:rgba(232,16,159,.6)}
.sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 8px 24px;border-bottom:1px solid var(--outline-variant);margin-bottom:16px}
.sidebar-brand img{width:40px;filter:drop-shadow(0 3px 10px rgba(212,24,156,.5))}
.sidebar-brand .nm{font-family:var(--font-headline);font-style:italic;font-weight:700;font-size:18px;line-height:1.05;color:var(--on-surface)}
.sidebar-brand .sm{font-family:var(--font-headline);font-style:italic;font-size:13px;color:var(--secondary);margin-top:2px}
.sidebar-section{font-family:var(--font-label);font-size:10px;letter-spacing:.4em;color:var(--outline);font-weight:700;padding:14px 12px 8px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:14px;
  padding:12px 16px;border-radius:4px;
  color:var(--on-surface-variant);
  font-size:14px;letter-spacing:.02em;
  transition:all .25s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.nav-item:hover{background:var(--surface-container-low);color:var(--on-surface)}
.nav-item.active{background:linear-gradient(135deg,#d40d92,#b02ecf);color:#fff;box-shadow:0 0 18px rgba(255,45,187,.5)}
.nav-item .ic{font-family:'Material Symbols Outlined';font-size:20px;font-variation-settings:'FILL' 0,'wght' 400,'opsz' 24}
.nav-item.active .ic{font-variation-settings:'FILL' 1,'wght' 500,'opsz' 24}

/* ===== MAIN AREA ===== */
.main{position:relative;min-height:100vh;padding:0}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 48px;
  background:rgba(255,255,255,.6);backdrop-filter:blur(40px) saturate(1.3);
  border-bottom:1px solid var(--outline-variant);
  position:sticky;top:0;z-index:5;
}
.topbar-search{
  flex:1;max-width:520px;
  display:flex;align-items:center;gap:12px;
  padding:12px 24px;
  background:var(--surface-container-low);border:1px solid var(--outline-variant);
  border-radius:var(--r-pill);
  color:var(--on-surface-variant);
}
.topbar-search input{flex:1;background:transparent;border:none;outline:none;color:var(--on-surface);font-family:var(--font-body);font-size:14px;letter-spacing:.02em}
.topbar-search input::placeholder{color:var(--outline);font-style:italic;font-family:var(--font-headline)}
.topbar-search .ic{font-family:'Material Symbols Outlined';font-size:18px;color:var(--primary)}
.topbar-actions{display:flex;align-items:center;gap:16px;margin-left:24px}
.topbar-icon{width:40px;height:40px;border-radius:50%;background:var(--surface-container-low);border:1px solid var(--outline-variant);display:flex;align-items:center;justify-content:center;color:var(--on-surface);transition:all .25s}
.topbar-icon:hover{border-color:var(--primary);box-shadow:0 0 16px rgba(255,171,243,.3)}
.topbar-icon .ic{font-family:'Material Symbols Outlined';font-size:18px}
.topbar-avatar{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#ff00ff,#d05bff);display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--font-label);font-weight:700;font-size:14px;border:1px solid var(--primary)}

.page{padding:48px 64px;max-width:1480px;margin:0 auto}
.page-eye{font-family:var(--font-label);font-size:11px;letter-spacing:.5em;color:#6b0850;font-weight:700;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:14px}
.page-eye::before{content:'';width:40px;height:1px;background:linear-gradient(90deg,var(--primary-container),transparent)}
.page-title{font-family:var(--font-headline);font-style:italic;font-weight:700;font-size:clamp(44px,6vw,88px);line-height:1.02;letter-spacing:-.01em;margin-bottom:16px;color:var(--on-surface)}
.page-title em{font-style:italic;background:linear-gradient(135deg,#d4189c,#9a35d0 50%,#ff2db6);-webkit-background-clip:text;background-clip:text;color:transparent}
.page-sub{font-family:var(--font-body);font-weight:600;font-size:20px;color:var(--on-surface);margin-bottom:44px;max-width:720px;line-height:1.45}

/* ===== STADIUM CARDS ===== */
.stad{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:8px;padding:32px;position:relative;overflow:hidden;transition:all .4s cubic-bezier(.4,0,.2,1)}
.stad-alt{border-radius:8px}
.stad:hover{border-color:#ff2dbb;box-shadow:0 0 40px rgba(255,45,187,.32)}
.stad-glass{background:rgba(39,27,42,.55);backdrop-filter:blur(40px)}
.stad-feat{box-shadow:var(--celestial-glow);border-color:rgba(255,0,255,.4)}
.stad-eye{font-family:var(--font-label);font-size:10px;letter-spacing:.45em;color:#a2106f;font-weight:700;text-transform:uppercase;margin-bottom:14px}
.stad-title{font-family:var(--font-headline);font-style:italic;font-weight:700;font-size:28px;line-height:1.18;color:var(--on-surface);margin-bottom:12px}
.stad-body{font-family:var(--font-body);font-weight:500;font-size:14px;line-height:1.65;color:var(--on-surface-variant);letter-spacing:.01em}
.stad-cta{margin-top:20px;font-family:var(--font-label);font-size:11px;letter-spacing:.4em;color:var(--primary);font-weight:700;display:inline-flex;align-items:center;gap:10px;text-transform:uppercase}
.stad-cta::after{content:'→';transition:transform .3s}
.stad:hover .stad-cta::after{transform:translateX(6px)}

/* ===== FAB ===== */
.fab{position:fixed;bottom:32px;right:32px;width:64px;height:64px;border-radius:50%;background:var(--primary-container);box-shadow:0 10px 30px rgba(255,0,255,.4);display:flex;align-items:center;justify-content:center;color:#fff;border:none;z-index:100;transition:all .3s}
.fab:hover{transform:translateY(-3px) scale(1.05);box-shadow:0 14px 40px rgba(255,0,255,.55)}
.fab .ic{font-family:'Material Symbols Outlined';font-size:24px;font-variation-settings:'FILL' 1,'wght' 500,'opsz' 24}

/* ===== UTILITY ===== */
.gem{display:inline-block;width:8px;height:8px;background:linear-gradient(135deg,#d4189c,#9a35d0 50%,#ff2db6);clip-path:polygon(50% 0%,100% 50%,50% 100%,0% 50%)}
.divider{width:80px;height:1px;background:linear-gradient(90deg,var(--primary-container),transparent);margin:24px 0}