:root{--p31-base: 16px;--p31-bg: oklch(10% .01 240);--p31-surface: oklch(15% .015 240);--p31-surface2: oklch(22% .02 240);--p31-accent: oklch(65% .18 195);--p31-accent-alt: oklch(65% .18 285);--p31-accent-violet: oklch(65% .18 285);--p31-accent-gold: oklch(65% .18 15);--p31-accent-green: oklch(65% .18 105);--p31-accent-red: oklch(65% .18 20);--p31-accent-iris: oklch(65% .18 270);--p31-text: oklch(96% .005 240);--p31-text-secondary: oklch(75% .01 240);--p31-text-tertiary: oklch(55% .01 240);--p31-glass-bg: oklch(100% .01 240 / .04);--p31-glass-border: oklch(100% .01 240 / .08);--p31-glass-border-hover: oklch(100% .01 240 / .15);--p31-glass-shadow: 0 8px 32px rgba(0,0,0,.15);--p31-glass-blur: blur(12px);--p31-glow-cyan: 0 0 20px rgba(0,240,255,.25);--p31-scale-xs: calc(var(--p31-base) * .75);--p31-scale-sm: var(--p31-base);--p31-scale-md: calc(var(--p31-base) * 1.3333);--p31-scale-lg: calc(var(--p31-base) * 1.7777);--p31-scale-xl: calc(var(--p31-base) * 2.3703);--p31-scale-2xl: calc(var(--p31-base) * 3.1604);--p31-scale-3xl: calc(var(--p31-base) * 4.2139);--p31-scale-4xl: calc(var(--p31-base) * 5.6186);--p31-type-caption: clamp(var(--p31-scale-xs), .8vw, var(--p31-scale-sm));--p31-type-body: clamp(calc(var(--p31-base) * .95), 1vw + .5rem, var(--p31-scale-sm));--p31-type-label: var(--p31-scale-sm);--p31-type-h3: clamp(var(--p31-scale-md), 2vw, var(--p31-scale-lg));--p31-type-h2: clamp(var(--p31-scale-lg), 3.5vw, var(--p31-scale-xl));--p31-type-h1: clamp(var(--p31-scale-xl), 5.6vw, var(--p31-scale-2xl));--p31-type-display: clamp(var(--p31-scale-2xl), 7vw, var(--p31-scale-3xl));--p31-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--p31-font-mono: ui-monospace, SFMono-Regular, "Fira Code", "Fira Mono", "Roboto Mono", "JetBrains Mono", Menlo, Monaco, Consolas, monospace;--p31-font-display: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--p31-duration-fast: .1s;--p31-duration-normal: .3s;--p31-duration-slow: .5s;--p31-easing-smooth: cubic-bezier(.4, 0, .2, 1);--p31-easing-snappy: cubic-bezier(.34, 1.56, .64, 1);--p31-easing-linear: linear;--p31-speed-factor: 1;--p31-starfield-hearth: oklch(55% .15 35);--p31-starfield-teal: oklch(60% .08 185);--p31-starfield-remembrance: oklch(95% .01 80);--p31-starfield-particle-teal: oklch(70% .12 185 / .6);--p31-starfield-particle-coral: oklch(65% .14 40 / .5);--p31-blur-subtle: 8px;--p31-blur-standard: 12px;--p31-blur-strong: 24px;--p31-space-xs: clamp(var(--p31-scale-xs), 1vw, var(--p31-scale-sm));--p31-space-sm: clamp(var(--p31-scale-sm), 1.5vw, var(--p31-scale-md));--p31-space-md: clamp(var(--p31-scale-md), 2.5vw, var(--p31-scale-lg));--p31-space-lg: clamp(var(--p31-scale-lg), 3.5vw, var(--p31-scale-xl));--p31-space-xl: clamp(var(--p31-scale-xl), 5vw, var(--p31-scale-2xl));--p31-space-2xl: clamp(var(--p31-scale-2xl), 6.5vw, var(--p31-scale-3xl));--p31-space-3xl: 64px;--p31-radius-sm: calc(var(--p31-scale-sm) / 2);--p31-radius-md: calc(var(--p31-scale-md) / 2);--p31-radius-lg: calc(var(--p31-scale-lg) / 2);--p31-radius-xl: calc(var(--p31-scale-xl) / 2);--p31-radius-full: 9999px;--p31-touch-min: 48px;--p31-touch-recommended: 56px;--p31-touch-large: 64px;--p31-z-starfield: 0;--p31-z-topbar: 10;--p31-z-toast: 9999;--p31-z-crisis: 99999;--p31-z-skip-link: 100;--p31-space-xs-legacy: 4px;--p31-space-sm-legacy: 8px;--p31-space-md-legacy: 16px;--p31-space-lg-legacy: 24px;--p31-space-xl-legacy: 32px;--p31-space-2xl-legacy: 48px;--p31-space-3xl-legacy: 64px;--p31-duration-fast-legacy: .1s;--p31-duration-normal-legacy: .3s;--p31-duration-slow-legacy: .5s;--p31-ease-out-legacy: cubic-bezier(.4, 0, .2, 1);--p31-ease-in-out-legacy: linear}:root{--site-bg: var(--p31-bg);--site-surface: var(--p31-surface);--site-accent: var(--p31-accent);--site-accent-alt: var(--p31-accent-alt);--site-accent-gold: var(--p31-accent-gold);--site-success: var(--p31-accent-green);--site-error: var(--p31-accent-red);--site-glass: var(--p31-glass-bg);--site-glass-hover: var(--p31-glass-border-hover);--site-border: var(--p31-glass-border);--site-border-strong: var(--p31-glass-border-hover);--site-text: var(--p31-text);--site-text-dim: var(--p31-text-secondary);--site-shadow: 0 20px 60px rgba(0,0,0,.6);--site-glow: radial-gradient(circle at 50% 30%, var(--site-accent) 0%, transparent 60%)}[data-brand=p31ca]{--p31-glass-bg: oklch(14% .02 260 / .08);--p31-glass-border: oklch(100% .01 240 / .12);--p31-glass-border-hover: oklch(100% .01 240 / .25);--p31-glass-blur: blur(24px)}*{box-sizing:border-box}body{background:var(--p31-bg);color:var(--p31-text);font-family:var(--p31-font-sans);-webkit-font-smoothing:antialiased;margin:0}.app-shell{max-width:1200px;width:100%;min-height:100vh;margin:0 auto;display:flex;flex-direction:column;position:relative}#mesh-container{position:fixed;top:0;left:0;right:0;bottom:0;z-index:0;pointer-events:none}#mesh-container canvas{display:block;width:100%;height:100%}.topbar{height:64px;padding:0 var(--p31-space-lg);display:flex;align-items:center;justify-content:space-between;background:var(--p31-glass-bg);backdrop-filter:var(--p31-glass-blur);-webkit-backdrop-filter:var(--p31-glass-blur);border-bottom:1px solid var(--p31-glass-border);flex-shrink:0;z-index:var(--p31-z-topbar)}.topbar-left{display:flex;align-items:center;gap:var(--p31-space-sm);font-weight:600;font-size:1.1rem}.topbar-center{display:flex;align-items:center;gap:var(--p31-space-sm);flex:1;justify-content:center;flex-wrap:wrap}.topbar-right{display:flex;align-items:center;gap:var(--p31-space-md)}.badge{display:inline-flex;align-items:center;gap:var(--p31-space-xs);padding:var(--p31-space-xs) var(--p31-space-md);background:var(--p31-glass-bg);border:1px solid var(--p31-glass-border);border-radius:var(--p31-radius-full);font-size:var(--p31-type-caption);font-family:var(--p31-font-mono);color:var(--p31-text-secondary)}.badge strong{color:var(--p31-text);font-weight:500}.badge.accent{border-color:var(--site-accent);color:var(--site-accent);background:#38bdf814}.status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--site-success);box-shadow:0 0 8px var(--site-success)}.spoon-dial{display:flex;background:#00000080;border:1px solid var(--site-border);border-radius:var(--p31-radius-full);padding:4px;gap:4px}.spoon-btn{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:600;color:var(--site-text-dim);background:transparent;border:none;cursor:pointer;transition:all var(--p31-duration-fast) var(--p31-ease-out)}.spoon-btn:hover{background:var(--site-glass);color:var(--site-text)}.spoon-btn.active{background:var(--site-accent);color:#000;box-shadow:0 0 12px #38bdf866}.viewport{flex:1;overflow-y:auto;overflow-x:hidden;padding:var(--p31-space-lg);scroll-behavior:smooth;padding-bottom:80px;position:relative;z-index:1}.page{display:none;animation:fadeIn var(--anim-speed, .3s) var(--p31-ease-out) forwards;max-width:1200px;margin:0 auto}[data-active-tab=dashboard] #page-dashboard,[data-active-tab=bonding] #page-bonding,[data-active-tab=arcade] #page-arcade,[data-active-tab=market] #page-market,[data-active-tab=admin] #page-admin{display:block}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.bento-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--p31-space-md)}.col-span-full{grid-column:span 12}.col-span-half{grid-column:span 6}.col-span-third{grid-column:span 4}.col-span-two-thirds{grid-column:span 8}.card{background:var(--site-glass);-webkit-backdrop-filter:blur(var(--glass-blur, 12px));backdrop-filter:blur(var(--glass-blur, 12px));border:1px solid var(--site-border);border-radius:var(--p31-radius-lg);padding:var(--p31-space-lg);transition:all var(--anim-speed, .3s) var(--p31-ease-out);display:flex;flex-direction:column}.card:hover{border-color:var(--site-border-strong);background:var(--site-glass-hover);transform:translateY(-2px);box-shadow:var(--site-shadow)}.card-header{font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--site-text-dim);margin-bottom:var(--p31-space-md);display:flex;align-items:center;justify-content:space-between}.card-value{font-size:2.25rem;font-weight:300;letter-spacing:-.02em;font-family:var(--p31-font-mono);color:var(--site-text)}.card-value span{color:var(--site-accent)}.btn{display:inline-flex;align-items:center;justify-content:center;padding:var(--p31-space-sm) var(--p31-space-lg);background:var(--site-accent);color:#000;border:none;border-radius:var(--p31-radius-md);font-weight:600;font-size:.85rem;cursor:pointer;transition:all var(--p31-duration-fast) var(--p31-ease-out);min-height:44px;min-width:44px;gap:var(--p31-space-sm)}.btn:hover{transform:translateY(-2px);box-shadow:0 4px 20px #38bdf84d}.btn:active{transform:scale(.97)}.btn.secondary{background:var(--site-glass);color:var(--site-text);border:1px solid var(--site-border)}.btn.secondary:hover{background:var(--site-glass-hover);border-color:var(--site-text-dim);box-shadow:none}.bottom-nav{position:fixed;bottom:0;left:0;right:0;height:64px;background:#060608cc;backdrop-filter:var(--p31-glass-blur);-webkit-backdrop-filter:var(--p31-glass-blur);border-top:1px solid var(--site-border);display:flex;justify-content:center;gap:4px;padding:0 var(--p31-space-sm);z-index:100}.nav-item{flex:1;max-width:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:var(--site-text-dim);border-radius:var(--p31-radius-md);background:transparent;border:none;cursor:pointer;transition:all var(--p31-duration-fast) var(--p31-ease-out);padding:var(--p31-space-xs);min-height:48px;font-family:var(--p31-font-sans);font-size:.65rem}.nav-item:hover{background:var(--site-glass);color:var(--site-text)}[data-active-tab=dashboard] .nav-item[data-target=dashboard],[data-active-tab=bonding] .nav-item[data-target=bonding],[data-active-tab=arcade] .nav-item[data-target=arcade],[data-active-tab=market] .nav-item[data-target=market],[data-active-tab=admin] .nav-item[data-target=admin]{color:var(--site-accent)}.nav-item svg{width:20px;height:20px;opacity:.7;transition:all var(--p31-duration-fast) var(--p31-ease-out)}.nav-item.active svg{opacity:1;transform:translateY(-2px)}#toast-container{position:fixed;bottom:80px;right:var(--p31-space-lg);z-index:9999;display:flex;flex-direction:column;gap:var(--p31-space-sm)}.toast{background:var(--p31-surface);border:1px solid var(--site-border-strong);border-left:4px solid var(--site-accent);padding:var(--p31-space-md);border-radius:var(--p31-radius-md);font-size:.8rem;font-family:var(--p31-font-mono);box-shadow:0 10px 40px #00000080;animation:slideInRight .3s var(--p31-ease-out) forwards;max-width:360px}.toast.error{border-left-color:var(--site-error)}.toast.success{border-left-color:var(--site-success)}@keyframes slideInRight{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}@keyframes fadeOut{to{opacity:0;transform:translateY(-10px)}}.status-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--p31-space-sm)}.status-item{background:#ffffff0a;border-radius:var(--p31-radius-md);padding:var(--p31-space-sm) var(--p31-space-md);font-size:.75rem;display:flex;align-items:center;gap:var(--p31-space-sm)}.status-item .dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.status-item .dot.green{background:var(--site-success)}.status-item .dot.amber{background:var(--site-accent-gold)}.status-item .dot.red{background:var(--site-error)}.marketplace-list{display:flex;flex-direction:column;gap:var(--p31-space-sm)}.marketplace-item{background:#ffffff0a;border-radius:var(--p31-radius-md);padding:var(--p31-space-sm) var(--p31-space-md);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--p31-space-sm)}.marketplace-item .price{color:var(--site-accent-gold);font-weight:600;font-family:var(--p31-font-mono)}.admin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--p31-space-md)}.admin-card{background:var(--site-glass);-webkit-backdrop-filter:blur(var(--glass-blur,12px));backdrop-filter:blur(var(--glass-blur,12px));border:1px solid var(--site-border);border-radius:var(--p31-radius-lg);padding:var(--p31-space-md);transition:all var(--p31-duration-fast) var(--p31-ease-out)}.admin-card:hover{border-color:var(--site-accent);transform:translateY(-2px)}.admin-tool{display:flex;justify-content:space-between;align-items:center;padding:var(--p31-space-sm) 0;border-bottom:1px solid var(--site-border)}.admin-tool:last-child{border-bottom:none}.admin-tool button{background:var(--site-accent);color:#000;border:none;border-radius:var(--p31-radius-md);padding:var(--p31-space-xs) var(--p31-space-md);font-size:.7rem;font-weight:600;cursor:pointer;transition:all var(--p31-duration-fast) var(--p31-ease-out)}.admin-tool button:hover{opacity:.8}.atom-palette{display:grid;grid-template-columns:repeat(8,1fr);gap:var(--p31-space-sm);margin-top:var(--p31-space-md)}.atom-btn{aspect-ratio:1;display:flex;align-items:center;justify-content:center;background:#ffffff14;border:2px solid var(--site-border);border-radius:var(--p31-radius-md);color:var(--site-text);font-weight:600;font-size:18px;cursor:pointer;transition:all var(--p31-duration-fast) var(--p31-ease-out);min-height:48px}.atom-btn.selected{background:var(--site-accent);border-color:var(--site-accent);box-shadow:0 0 16px #38bdf866;color:#000}.molecule-display{background:#ffffff0a;border:1px dashed var(--site-border);border-radius:var(--p31-radius-md);padding:var(--p31-space-md);text-align:center;min-height:60px;display:flex;align-items:center;justify-content:center;font-size:24px;font-weight:700;color:var(--site-accent-gold);font-family:var(--p31-font-mono);word-break:break-all}.skip-link{position:absolute;top:-40px;left:0;background:var(--site-accent);color:#0a0a12;padding:var(--p31-space-sm) var(--p31-space-md);text-decoration:none;z-index:var(--p31-z-skip-link);font-weight:600}.skip-link:focus{top:0}*:focus-visible{outline:2px solid var(--site-accent);outline-offset:2px}@media(max-width:700px){.topbar{padding:0 var(--p31-space-md)}.topbar-center .badge{display:none}.viewport,.card{padding:var(--p31-space-md)}.bottom-nav{gap:0}.nav-item span{font-size:.55rem}}@media(max-width:450px){.topbar{height:56px}.topbar-left{font-size:.9rem}.spoon-btn{width:24px;height:24px;font-size:.6rem}}@media(max-width:320px){.bento-grid{grid-template-columns:1fr!important}.col-span-full,.col-span-half,.col-span-third,.col-span-two-thirds{grid-column:span 1!important}.bottom-nav{gap:0}.nav-item{max-width:60px;font-size:.5rem}.nav-item svg,.nav-item .nav-icon{width:16px;height:16px}.spoon-btn{width:24px;height:24px;min-width:24px;min-height:24px;font-size:.6rem}.topbar{height:48px;padding:0 8px}.topbar-left{font-size:.8rem}.topbar-right .badge{display:none}.viewport{padding:8px}.card{padding:12px}.card-value{font-size:1.5rem}}