/* ═══════════════════════════════════════════════════════════════════════════
   HubbleUp Profile Styles — Canonical CSS extracted from linkinbio-v15.html
   This file provides the complete, correct CSS for public profile pages.
   It overrides the corrupted double-brace CSS in app.html.
   Generated by Chief Architect blueprint — Agent 1
   ═══════════════════════════════════════════════════════════════════════════ */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
:root{--glass-bg:rgba(255,255,255,.04);--glass-border:rgba(255,255,255,.06);--glass-hover:rgba(255,255,255,.09);--text-primary:#e8e4f0;--text-secondary:rgba(224,218,240,.6);--text-dim:rgba(224,218,240,.4);--radius:24px;--radius-md:18px;--radius-sm:14px;--radius-xs:10px;--bg-body:#0a0a0a;--bg-panel:rgba(20,20,20,.92);--bg-band:#0c0a1a;--stargaze-primary:#c084fc;--stargaze-glow:rgba(192,132,252,.25);--mythbeast-primary:#4ade80;--mythbeast-glow:rgba(74,222,128,.2);--garden-primary:#fb7185;--garden-glow:rgba(251,113,133,.15);--console-primary:#67e8f9;--console-glow:rgba(103,232,249,.15);--connect-primary:#fcd34d;--connect-glow:rgba(252,211,77,.15);--danger:#ef4444;--success:#22c55e;--deck-tint:transparent;--bg-header:rgba(20,20,20,.85);--neon-glow:1;--w03:rgba(255,255,255,.03);--w04:rgba(255,255,255,.04);--w05:rgba(255,255,255,.05);--w06:rgba(255,255,255,.06);--w08:rgba(255,255,255,.08);--w10:rgba(255,255,255,.10);--w12:rgba(255,255,255,.12);--w15:rgba(255,255,255,.15);--w20:rgba(255,255,255,.20);--card-shadow:0 0 20px rgba(192,132,252,.06),0 0 40px rgba(103,232,249,.04);--shadow-4:0 2px 4px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);--shadow-8:0 4px 8px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);--shadow-16:0 8px 16px rgba(0,0,0,.4),0 0 2px rgba(0,0,0,.3);--neon-pink:#ff2d78;--neon-aqua:#00e5ff;--neon-purple:#b44dff;--neon-green:#39ff14;--neon-orange:#ff6d00;--neon-yellow:#ffe600;--neon-red:#ff1744;--neon-blue:#2979ff;--ease:cubic-bezier(0.33,0,0.1,1);--ease-decel:cubic-bezier(0.1,0.9,0.2,1);
  /* Phase 4 — SHAPE SYSTEM.
     Every card/hub/filter shape-variant body class flips these tokens.
     All card-internal elements (inner gradient, icon wraps, hero banners,
     badges, char art, gallery images) resolve border-radius through one of
     these — never a hardcoded value. Default values below = "rounded"
     preset. .shape-pill / .shape-square override. One knob, whole cascade.
     Mirrors /css/tokens.css so this file remains standalone when profile.php
     doesn't load tokens.css. */
  --card-outer-radius:   18px;
  --card-inner-radius:   12px;
  --hub-outer-radius:    18px;
  --filter-outer-radius: 8px;}
html[data-theme="light"]{--glass-bg:rgba(90,40,200,.04);--glass-border:rgba(90,40,200,.12);--glass-hover:rgba(90,40,200,.08);--text-primary:#140E24;--text-secondary:rgba(20,14,36,.65);--text-dim:rgba(20,14,36,.50);--bg-body:#fafafa;--bg-panel:#FFFFFF;--bg-band:#F5F3FA;--mythbeast-primary:#047857;--mythbeast-glow:rgba(4,120,87,.1);--garden-primary:#BE185D;--garden-glow:rgba(190,24,93,.1);--console-primary:#0E7490;--console-glow:rgba(14,116,144,.1);--connect-primary:#B45309;--connect-glow:rgba(180,83,9,.1);--bg-header:rgba(245,243,250,.92);--neon-glow:0;--w03:rgba(90,40,200,.03);--w04:rgba(90,40,200,.04);--w05:rgba(90,40,200,.05);--w06:rgba(90,40,200,.06);--w08:rgba(90,40,200,.08);--w10:rgba(90,40,200,.10);--w12:rgba(90,40,200,.12);--w15:rgba(90,40,200,.15);--w20:rgba(90,40,200,.20);--card-shadow:0 1px 4px rgba(90,40,200,.08),0 4px 20px rgba(90,40,200,.05)}
/* Bug 9: When a creator customizes colors in the dashboard, publicRendering writes inline values on :root that stayed pale-on-pale when the visitor switched to light mode. These !important + color-mix() rules pull the creator's chosen hue toward contrast on a light background while preserving their palette identity. Raw vars are written alongside the direct vars by applyAppearance(). */
html[data-theme="light"]{--text-primary:color-mix(in oklch,var(--text-primary-raw,#dcfce7) 15%,#0a0a0a 85%)!important;--text-secondary:color-mix(in oklch,var(--text-secondary-raw,var(--text-primary-raw,#dcfce7)) 25%,rgba(20,14,36,.65) 75%)!important;--text-dim:color-mix(in oklch,var(--text-primary-raw,#dcfce7) 20%,rgba(20,14,36,.5) 80%)!important;--stargaze-primary:color-mix(in oklch,var(--stargaze-primary-raw,#c084fc) 70%,#1a1a1a 30%)!important;--stargaze-glow:color-mix(in oklch,var(--stargaze-primary-raw,#c084fc) 12%,transparent)!important;--bg-body:color-mix(in oklch,var(--bg-body-raw,#052e16) 8%,#f4f4f5 92%)!important}

.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;z-index:999}
.skip-link:focus{position:fixed;top:8px;left:8px;width:auto;height:auto;padding:8px 16px;background:var(--bg-panel);color:var(--text-primary);border-radius:var(--radius-xs);z-index:9999;outline:2px solid var(--stargaze-primary)}
html{font-family:var(--hubble-font,'Outfit',-apple-system,sans-serif);-webkit-font-smoothing:antialiased;scroll-behavior:smooth}
body{min-height:100dvh;display:flex;justify-content:center;background:var(--bg-body);overflow-x:hidden;transition:background .4s}
/* Round 3 Bug 8: app.html ships a fixed .bg-canvas element with hardcoded
   purple radial-gradient pseudo-elements (Aurora Dark visuals). When the
   user picks any non-default theme via Appearance, those overlays would
   visually dominate and the new theme appeared not to apply. Hide the
   canvas + the orb glows when applyAppearance() flags the body with
   .has-custom-theme so the user's chosen --bg-body actually shows through. */
body.has-custom-theme .bg-canvas,
body.has-custom-theme .orb{display:none!important}
.bg-canvas{position:fixed;inset:0;z-index:0;transition:opacity .4s}
.bg-canvas::before{content:'';position:absolute;width:180vmax;height:180vmax;top:-50%;left:-40%;background:radial-gradient(ellipse 50% 40% at 15% 10%,rgba(180,77,255,.12) 0%,transparent 60%),radial-gradient(ellipse 45% 50% at 85% 20%,rgba(0,229,255,.08) 0%,transparent 55%),radial-gradient(ellipse 35% 30% at 50% 65%,rgba(255,45,120,.06) 0%,transparent 50%),radial-gradient(ellipse 40% 30% at 15% 75%,rgba(15,23,80,.5) 0%,transparent 50%),radial-gradient(ellipse 25% 35% at 85% 70%,rgba(76,29,149,.4) 0%,transparent 50%);animation:md 30s ease-in-out infinite alternate}
html[data-theme="light"] .bg-canvas::before{background:radial-gradient(ellipse 55% 45% at 10% 5%,rgba(124,58,237,.1) 0%,transparent 60%),radial-gradient(ellipse 50% 55% at 90% 15%,rgba(14,116,144,.07) 0%,transparent 55%),radial-gradient(ellipse 40% 35% at 50% 70%,rgba(190,24,93,.05) 0%,transparent 50%)}
.bg-canvas::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 0%,transparent 30%,rgba(6,4,14,.7) 100%)}
.deck-tint-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;background:var(--deck-tint);opacity:.06;transition:all .6s}
@property --race-angle{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes raceBorder{to{--race-angle:360deg}}
/* Phase 19j step 2 — dim phase opacity is now driven by
   --deck-breath-dim (set inline by the public renderer). Defaults to .5
   (the pre-Phase-19j value). */
@keyframes breatheBorder{0%,100%{opacity:var(--deck-breath-dim,.5)}50%{opacity:1}}
/* Bug Report Round 2 follow-up: deck breathing now uses a brand-tinted
   glow that pulses around the deck so the effect is clearly visible.
   color-mix() composes the brand --bp hex with transparency so the
   shadow follows the deck's accent color without needing pre-split RGB
   channels. Mid-cycle the glow widens and brightens. */
@keyframes deckBreatheGlow{
  0%,100%{
    box-shadow:
      0 0 calc(8px * var(--deck-effect-mult,1)) color-mix(in srgb, var(--bp,#a78bfa) 18%, transparent),
      0 0 calc(16px * var(--deck-effect-mult,1)) color-mix(in srgb, var(--bp,#a78bfa) 8%, transparent);
  }
  50%{
    box-shadow:
      0 0 calc(22px * var(--deck-effect-mult,1)) color-mix(in srgb, var(--bp,#a78bfa) 55%, transparent),
      0 0 calc(44px * var(--deck-effect-mult,1)) color-mix(in srgb, var(--bp,#a78bfa) 28%, transparent);
  }
}
@keyframes md{0%{transform:translate(0,0) rotate(0)}50%{transform:translate(2%,-2%) rotate(2deg)}100%{transform:translate(-1%,1%) rotate(-1deg)}}
/* ── GPU PROMOTION & CONTAINMENT ── */
.orb{position:fixed;border-radius:50%;filter:blur(80px);z-index:0;opacity:.25;pointer-events:none;will-change:transform}
.orb-1{width:320px;height:320px;background:rgba(139,92,246,.5);top:5%;left:-8%;animation:f1 20s ease-in-out infinite}
.orb-2{width:260px;height:260px;background:rgba(59,130,246,.4);bottom:10%;right:-10%;animation:f2 25s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(35px,-45px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-30px,40px)}}
.noise{position:fixed;inset:0;z-index:1;opacity:.02;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");background-size:128px}
.container{position:relative;z-index:2;width:100%;max-width:480px;padding:44px 16px 72px;display:flex;flex-direction:column;align-items:center}
@keyframes fadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes logoPulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.08);filter:brightness(1.2)}}
.profile{display:flex;flex-direction:column;align-items:center;margin-bottom:32px;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) both}
.avatar-ring{padding:3px;border-radius:16px;background:conic-gradient(from 0deg,var(--stargaze-primary),var(--mythbeast-primary),var(--console-primary),var(--garden-primary),var(--stargaze-primary));margin-bottom:18px;position:relative;cursor:default;will-change:filter}
.avatar-ring::after{content:'';position:absolute;inset:-10px;border-radius:16px;background:inherit;filter:blur(16px);opacity:.25;z-index:-1}
.avatar-placeholder{width:88px;height:88px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:var(--bg-body);font-size:34px;font-weight:800;color:var(--stargaze-primary);overflow:hidden}
.avatar-placeholder img{width:100%;height:100%;object-fit:cover}
.profile-name{font-size:28px;font-weight:800;letter-spacing:-.8px;color:#f0edf8;background:linear-gradient(135deg,var(--profile-gradient-start,#f0edf8) 40%,var(--stargaze-primary) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:center;min-height:1em}
.profile-handle{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--stargaze-primary);opacity:.7;margin-bottom:10px}
.profile-bio{font-size:14px;font-weight:300;color:var(--text-secondary);text-align:center;line-height:1.65;max-width:340px}
.visitor-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-secondary);margin-top:12px;letter-spacing:.5px;display:flex;align-items:center;gap:5px}
.visitor-count::before{content:'';display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}
.social-row{display:flex;gap:6px;margin-top:18px;flex-wrap:wrap;justify-content:center;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .08s both}
.social-btn{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s;text-decoration:none;position:relative}
.social-btn svg{width:16px;height:16px;fill:var(--text-secondary);transition:fill .25s}
.social-btn:hover{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.2);transform:translateY(-3px) scale(1.1)}
.social-btn:hover svg{fill:var(--text-primary)}
.social-btn .tip{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:500;color:var(--text-primary);background:rgba(22,16,40,.96);border:1px solid var(--glass-border);border-radius:8px;padding:4px 10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.social-btn:hover .tip{opacity:1;transform:translateX(-50%) translateY(0)}
/* TOOLBAR */
.toolbar{position:fixed;right:0;top:0;bottom:0;height:fit-content;margin:auto 0;z-index:100;display:flex;flex-direction:column;gap:6px;padding:8px 6px;background:rgba(22,16,40,.7);backdrop-filter:blur(10px);border-radius:12px 0 0 12px;border:1px solid rgba(255,255,255,.08);border-right:none}
.tb-btn{width:44px;height:44px;border-radius:10px;background:transparent;border:1px solid transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s;color:var(--text-dim);text-decoration:none;-webkit-tap-highlight-color:transparent}
.tb-btn:hover{background:rgba(255,255,255,.08);color:var(--text-primary);border-color:rgba(255,255,255,.1)}
#adminGear{transition:opacity .3s,transform .25s,background .25s}
#adminGear:hover{opacity:1!important}
.tb-btn svg{width:16px;height:16px}
.tb-btn.active{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:var(--stargaze-primary)}
/* PROFILE BANNER WRAP — background-image approach */
.profile-banner-wrap{background-size:cover;background-position:center;background-repeat:no-repeat;border-radius:var(--radius-md,18px);padding:24px 0;margin-bottom:24px;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .1s both}
/* FILTER */
.filter-bar{position:sticky;top:0;z-index:10;margin-bottom:24px;padding:10px 0;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .15s both;width:100%;overflow:visible}
.filter-bar::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);background:var(--filter-bar-tint,rgba(6,4,14,.4));backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:-1;pointer-events:none;transition:background .4s}
.filter-bar::after{content:'';position:absolute;left:50%;width:100vw;transform:translateX(-50%);bottom:-16px;height:16px;background:linear-gradient(to bottom,var(--filter-bar-tint-solid,rgba(6,4,14,.6)),transparent);pointer-events:none;z-index:-1}
.filter-track{display:flex;gap:8px;scrollbar-width:none;align-items:center;flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:5px 4px}.filter-track::-webkit-scrollbar{display:none}
/* Round 3 Bug 17: spacers used flex:1 0 0px (no shrink). When the deck
   count exceeded the container width, the leftmost spacer kept its
   computed width and pushed the first deck out of the visible scroll
   area. Switching to flex:1 1 0px lets the spacers collapse to 0 on
   overflow so the first deck stays at the left edge. */
.filter-track::before,.filter-track::after{content:'';flex:1 1 0px;min-width:0}
.filter-tab{flex-shrink:0;padding:10px 16px;min-height:44px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.07);font-family:var(--hubble-font,'Outfit',sans-serif);font-size:13px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:background .25s,color .25s,border-color .25s,transform .2s;white-space:nowrap;user-select:none}
.filter-tab:hover{background:rgba(255,255,255,.08);color:var(--text-primary);transform:translateY(-1px)}
.filter-tab.active{background:rgba(255,255,255,.1);color:var(--text-primary);border-color:rgba(255,255,255,.18);font-weight:600}
.filter-tab .tab-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:6px;vertical-align:middle;position:relative;top:-.5px;transition:box-shadow .25s}
.filter-tab.active .tab-dot{box-shadow:0 0 8px 2px currentColor}
/* SECTIONS */
.decks-wrap{width:100%;display:flex;flex-direction:column;gap:32px}
.deck-section{width:100%;animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;scroll-margin-top:72px}
.deck-section.hidden{display:none}
.section-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding:12px 14px;border-radius:var(--radius-md);position:relative;background:linear-gradient(var(--bg-header),var(--bg-header)) padding-box,conic-gradient(from var(--race-angle) at 50% 50%,rgba(255,255,255,.08) 0deg,rgba(255,255,255,.06) 260deg,var(--section-accent,rgba(167,139,250,1)) 320deg,rgba(255,255,255,.6) 345deg,rgba(255,255,255,.08) 360deg) border-box;border:1px solid transparent;animation:raceBorder 4s linear infinite}
.section-header::after{display:none}
.section-badge{width:36px;height:36px;border-radius:var(--radius-xs);display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transition:transform .3s}
.section-badge:hover{transform:scale(1.12) rotate(-3deg)}
.section-badge svg{width:18px;height:18px;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.section-badge img{width:100%;height:100%;object-fit:cover;border-radius:var(--radius-xs)}
/* Phase 19a — initials fallback when no deck logo is uploaded. Sized to fit
   the 36x36 badge, tinted with the deck's brand primary (--bp) on a
   brand-tinted chip (--bg). Multi-word deck names produce one initial per
   word ("Stargaze Comics" -> "SC"); the data-len attribute set by
   modules/publicRendering.js drives a font-size scale so 2/3/4-letter
   initials still fit cleanly without overflowing the 36x36 cell. */
.section-badge-letter{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif;font-weight:800;line-height:1;color:var(--bp,#fff);background:var(--bg,rgba(255,255,255,.08));text-transform:uppercase;font-size:18px;letter-spacing:-.5px}
.section-badge-letter[data-len="2"]{font-size:14px;letter-spacing:-.6px}
.section-badge-letter[data-len="3"]{font-size:11px;letter-spacing:-.6px}
.section-badge-letter[data-len="4"]{font-size:9px;letter-spacing:-.4px}

/* Phase 19g step 2 — custom social icon shape classes. Applied to the
   <img> emitted by modules/publicRendering.js renderSocialIcon() when a
   user has uploaded a custom icon for a platform. The single profile-
   level shape value (profile.socialIconShape) drives which class is
   emitted. */
.social-custom-icon{width:100%;height:100%;object-fit:cover;display:block}
.social-custom-icon.social-icon-shape-circle  {border-radius:50%}
.social-custom-icon.social-icon-shape-square  {border-radius:0}
.social-custom-icon.social-icon-shape-rounded {border-radius:28%}
/* Phase 19g step 3 — apply the user's chosen icon shape to the BUTTON
   container so default platform SVGs (the common case) also respect
   the pick. Previously only uploaded <img> children carried the shape;
   the button hardcoded border-radius:50% so anyone without a custom
   icon saw circles regardless of what they picked. The .social-icon-
   shape-circle/square/rounded class is emitted by publicRendering.js
   socialContainerShapeClass() on every .profile-social-btn and
   .deck-social-btn. */
.profile-social-btn.social-icon-shape-circle  {border-radius:50%}
.profile-social-btn.social-icon-shape-square  {border-radius:0}
.profile-social-btn.social-icon-shape-rounded {border-radius:28%}
.deck-social-btn.social-icon-shape-circle     {border-radius:50%}
.deck-social-btn.social-icon-shape-square     {border-radius:0}
.deck-social-btn.social-icon-shape-rounded    {border-radius:28%}
/* When a custom icon sits inside a social button, override the parent's
   default svg sizing so the <img> fills the button. */
.profile-social-btn .social-custom-icon,
.deck-social-btn .social-custom-icon {width:100%;height:100%}
.section-info{flex:1}
.section-title{font-size:15px;font-weight:700;letter-spacing:-.2px}
.section-subtitle{font-size:11px;font-weight:500;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;margin-top:2px}
.section-meta{display:flex;gap:6px;align-items:center;flex-shrink:0}
.section-count{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary)}
.share-btn{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:background .2s,color .2s,transform .2s}
.share-btn:hover{background:rgba(255,255,255,.1);color:var(--text-primary);transform:scale(1.1)}
.share-btn svg{width:12px;height:12px}
.section-cards{display:flex;flex-direction:column;gap:8px}
/* CARDS */
.link-card{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-md);background:rgba(255,255,255,.05);border:1px solid var(--glass-border);text-decoration:none;transition:transform .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),border-color .3s,background .3s;overflow:hidden;contain:layout style}
.link-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius-md);background:linear-gradient(135deg,rgba(255,255,255,.07),transparent 55%);pointer-events:none;z-index:1}
.link-card::after{content:none}
.link-card:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.25),0 0 0 1px rgba(255,255,255,.06)}
.link-card:hover::after{opacity:1;width:4px}
.link-card:active{transform:translateY(0) scale(.99);transition-duration:.08s}
.link-card-main{display:flex;align-items:center;gap:14px;padding:14px 16px;cursor:pointer;text-decoration:none;color:inherit;position:relative;z-index:3}
.link-icon-wrap{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;transition:all .3s}
.link-icon-wrap:hover{animation:logoPulse .5s ease}
.link-icon-wrap svg{width:18px;height:18px;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none}
.link-icon-wrap img{width:100%;height:100%;object-fit:cover;border-radius:12px}
.link-text{flex:1;min-width:0}.link-title{font-size:14px;font-weight:600;color:var(--text-primary)}.link-subtitle{font-size:11.5px;font-weight:300;color:var(--text-dim);margin-top:1px;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.link-badge{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:500;padding:2px 7px;border-radius:100px;letter-spacing:.5px;text-transform:uppercase;flex-shrink:0;margin-right:4px}
.link-badge.hot{background:rgba(239,68,68,.15);color:#ef4444;animation:hotPulse 2s ease infinite}
@keyframes hotPulse{0%,100%{opacity:1}50%{opacity:.6}}
.link-arrow{flex-shrink:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.2;transition:all .35s cubic-bezier(.22,1,.36,1)}
.link-arrow svg{width:14px;height:14px}
.link-card:hover .link-arrow{opacity:.6;transform:translateX(3px)}
.click-count{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);margin-right:4px}
/* HERO CARD */
.link-card.hero-card{border-width:1.5px}
.hero-card .link-card-main{padding:0;flex-direction:column;gap:0}
.hero-banner{width:100%;aspect-ratio:16/8;overflow:hidden;position:relative;border-radius:var(--radius-md) var(--radius-md) 0 0}
.hero-banner img{width:100%;height:100%;object-fit:cover}
.hero-banner-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:48px;opacity:.15}
.hero-content{display:flex;align-items:center;gap:14px;padding:14px 16px;width:100%}
/* EMBED CARD */
.embed-frame{width:100%;padding:0 12px 12px;position:relative;z-index:3}
.embed-frame iframe{width:100%;border-radius:var(--radius-xs);border:none}
/* GALLERY CARD */
.gallery-strip{display:flex;gap:6px;padding:8px 12px 12px;overflow-x:auto;scrollbar-width:none;position:relative;z-index:3}
.gallery-strip::-webkit-scrollbar{display:none}
.gallery-strip img{height:80px;border-radius:8px;object-fit:cover;flex-shrink:0;cursor:pointer;transition:transform .2s}
.gallery-strip img:hover{transform:scale(1.05)}
/* MUSIC SMART LINK CARD (2026-04-26 card-type restructure commit 3).
   Square cover up top, metadata block, then a column of platform
   buttons. The cover sits above the deck-effect glow layer (bg) so
   the album art reads as the visual anchor of the card. */
.music-link{display:flex;flex-direction:column;gap:0;overflow:hidden}
.ml-cover{width:100%;aspect-ratio:1/1;overflow:hidden;position:relative;z-index:3;background:rgba(255,255,255,.04)}
.ml-cover img{width:100%;height:100%;object-fit:cover;display:block}
.ml-cover-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:var(--text-dim);opacity:.35}
.ml-cover-placeholder svg{width:72px;height:72px}
.ml-meta{padding:14px 16px 8px;position:relative;z-index:3}
.ml-title{font-size:16px;font-weight:700;color:var(--text-primary);line-height:1.25;letter-spacing:-.2px}
.ml-artist{font-size:13px;color:var(--text-secondary);margin-top:3px}
.ml-release{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;margin-top:4px;letter-spacing:.3px}
.ml-platforms{display:flex;flex-direction:column;gap:6px;padding:6px 12px 12px;position:relative;z-index:3}
.ml-plat{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border-radius:var(--radius-xs);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);color:var(--text-primary);text-decoration:none;font-size:13px;font-weight:600;transition:background .2s,border-color .2s,transform .2s}
.ml-plat:hover{background:rgba(255,255,255,.08);border-color:var(--bp,rgba(255,255,255,.18));transform:translateY(-1px)}
.ml-plat:focus-visible{outline:2px solid var(--bp,#a78bfa);outline-offset:2px}
.ml-plat-arrow{font-size:14px;color:var(--text-dim);transition:color .2s,transform .2s}
.ml-plat:hover .ml-plat-arrow{color:var(--bp,var(--text-primary));transform:translate(2px,-2px)}
html[data-theme="light"] .ml-cover{background:rgba(20,8,80,.04)}
html[data-theme="light"] .ml-plat{background:var(--w03);border-color:var(--glass-border);color:var(--text-primary)}
html[data-theme="light"] .ml-plat:hover{background:var(--w08)}
/* BOOKING CARD (2026-04-26 card-type restructure commit 4).
   Service header, an availability row that swaps state via the
   bk-state-* modifier (open/today/future/none), then a Book CTA.
   The state-dot color is the only thing that shifts per state so the
   card retains a consistent visual rhythm with the rest of the deck. */
.booking-card{display:flex;flex-direction:column;gap:0;padding:14px 16px 12px;position:relative;z-index:3}
.bk-header{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.bk-title{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.3;letter-spacing:-.2px}
.bk-meta{font-size:12px;color:var(--text-secondary);font-family:'JetBrains Mono',monospace;letter-spacing:.2px}
.bk-availability{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--radius-xs);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);margin-bottom:10px;flex-wrap:wrap}
.bk-avail-dot{width:8px;height:8px;border-radius:50%;background:var(--bp,#a78bfa);flex-shrink:0;box-shadow:0 0 0 0 currentColor}
.bk-state-open .bk-avail-dot{background:#34d399;animation:bkPulse 2s ease-out infinite}
.bk-state-today .bk-avail-dot{background:#fbbf24}
.bk-state-future .bk-avail-dot{background:var(--bp,#a78bfa)}
.bk-state-none .bk-avail-dot{background:rgba(255,255,255,.25)}
@keyframes bkPulse{0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)}70%{box-shadow:0 0 0 6px rgba(52,211,153,0)}100%{box-shadow:0 0 0 0 rgba(52,211,153,0)}}
.bk-avail-label{font-size:11px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}
.bk-avail-sub{font-size:13px;color:var(--text-secondary);font-weight:500;flex:1}
.bk-cta{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border-radius:var(--radius-xs);background:var(--bp,#a78bfa);color:#fff;text-decoration:none;font-size:13px;font-weight:600;letter-spacing:.2px;border:none;cursor:pointer;transition:filter .2s,transform .2s;min-height:44px}
.bk-cta:hover{filter:brightness(1.1);transform:translateY(-1px)}
.bk-cta:focus-visible{outline:2px solid var(--text-primary);outline-offset:2px}
.bk-cta-arrow{font-size:14px;transition:transform .2s}
.bk-cta:hover .bk-cta-arrow{transform:translate(2px,-2px)}
html[data-theme="light"] .bk-availability{background:var(--w03);border-color:var(--glass-border)}
html[data-theme="light"] .bk-cta{color:#fff}
/* Round 3 Bug 20 — booking description + collapsible weekly hours */
.bk-desc{font-size:13px;color:var(--text-secondary);line-height:1.5;margin-top:6px}
.bk-hours-details{margin-bottom:10px}
.bk-hours-summary{cursor:pointer;font-size:11px;font-weight:600;color:var(--text-secondary);letter-spacing:.4px;text-transform:uppercase;padding:6px 0;list-style:none}
.bk-hours-summary::-webkit-details-marker{display:none}
.bk-hours-summary::before{content:'▸';display:inline-block;margin-right:6px;font-size:9px;transition:transform .2s}
.bk-hours-details[open] .bk-hours-summary::before{transform:rotate(90deg)}
.bk-hours-grid{display:flex;flex-direction:column;gap:3px;padding:6px 0 4px;border-top:1px solid rgba(255,255,255,.06)}
.bk-hours-row{display:flex;justify-content:space-between;font-size:12px;color:var(--text-secondary);padding:3px 6px;border-radius:4px}
.bk-hours-today{background:rgba(167,139,250,.08);color:var(--text-primary)}
.bk-hours-day{font-weight:600;min-width:90px}
.bk-hours-time{font-family:'JetBrains Mono',monospace;font-size:11px}
.bk-hours-closed{color:var(--text-dim);font-style:italic}
html[data-theme="light"] .bk-hours-today{background:rgba(124,58,237,.08)}
/* COUNTDOWN */
.countdown-bar{display:flex;gap:10px;padding:4px 16px 14px;justify-content:center;position:relative;z-index:3}
.cd-unit{text-align:center}
.cd-num{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--text-primary);line-height:1}
.cd-label{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin-top:2px}
/* ACCORDION — grid-rows technique for natural height */
.accordion-toggle{cursor:pointer}
.accordion-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s cubic-bezier(.22,1,.36,1);padding:0 16px;position:relative;z-index:3}
.accordion-body.open{grid-template-rows:1fr}
.accordion-body-overflow{overflow:hidden;min-height:0}
.accordion-body-inner{padding:0 0 14px;font-size:13px;color:var(--text-secondary);line-height:1.7}
.accordion-chevron{transition:transform .3s cubic-bezier(.22,1,.36,1)}
.link-card-main.acc-open .accordion-chevron{transform:rotate(180deg)}
/* CHARACTER SPOTLIGHT */
/* Character card. 2026-04-26 follow-up: --card-accent absorbs the
   accentColor field merged in from the retired Member card. Inline
   style overrides the var; the fallback chain pulls the deck brand
   color so the card tints with whatever deck it sits in. */
.character-card{--card-accent:var(--bp,var(--stargaze-primary,#a78bfa));border-left:3px solid var(--card-accent)}
.char-card-inner{display:flex;gap:12px;padding:8px 16px 14px;position:relative;z-index:3}
.char-art{width:64px;height:80px;border-radius:10px;overflow:hidden;flex-shrink:0;border:2px solid var(--card-accent,transparent)}
.char-art img{width:100%;height:100%;object-fit:cover}
.char-art-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);font-size:28px;opacity:.2}
.char-bio{font-size:12px;color:var(--text-secondary);line-height:1.6}
.char-name{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:2px}
.char-lore-tag{display:inline-block;font-size:9px;font-weight:700;letter-spacing:.7px;text-transform:uppercase;padding:2px 7px;border-radius:20px;background:var(--card-accent,#a78bfa);color:#fff;opacity:.85;margin-bottom:5px}

/* [DEPRECATED] Timeline mode removed — feature incomplete */
/* CROSS IP TAGS */
.cross-deck-tags{display:flex;gap:4px;padding:2px 16px 10px;flex-wrap:wrap;position:relative;z-index:3}
.cross-deck-tag{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 8px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-dim);letter-spacing:.3px}
/* QR MODAL */
.qr-container{display:flex;flex-direction:column;align-items:center;gap:16px;padding:20px 0}
.qr-container canvas{border-radius:12px;background:#fff;padding:12px}
/* BRAND COLORS */
.deck-section .section-badge{background:var(--bg)}.deck-section .section-badge svg{stroke:var(--bp)}.deck-section .section-title{color:var(--bp-text, var(--bp))}.deck-section .link-card{--accent-color:var(--bp)}.deck-section .link-icon-wrap{background:var(--bg)}.deck-section .link-icon-wrap svg{stroke:var(--bp)}.deck-section .link-badge{background:var(--bg);color:var(--bp)}.deck-section .link-card:hover{box-shadow:0 12px 40px rgba(0,0,0,.25),0 0 0 1px var(--bg),0 0 24px var(--bg)}.deck-section .timeline-dot{background:var(--bp);border-color:var(--bp)}
.footer{margin-top:48px;text-align:center;animation:fadeUp .6s cubic-bezier(.22,1,.36,1) .7s both;display:flex;flex-direction:column;align-items:center;gap:16px}
.footer-qr{padding:16px;border-radius:var(--radius-md);background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;flex-direction:column;align-items:center;gap:10px}
.footer-qr canvas{border-radius:8px;background:#fff;padding:8px}
.footer-qr-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:.5px}
.footer-brand{display:flex;align-items:center;gap:8px}
/* Phase 15 — Powered-by HubbleUp branding pill. Renders both dark + light
   wordmarks; CSS swaps visibility based on data-theme. Light theme also
   triggered on profile-mode where applyAppearance() sets data-theme=light
   from a high-luminance background. */
.footer-powered-by{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);text-decoration:none;font-size:10px;font-weight:500;letter-spacing:.5px;text-transform:uppercase;color:var(--text-dim);transition:background .2s,border-color .2s,color .2s;font-family:var(--hubble-font,'Outfit',sans-serif)}
.footer-powered-by:hover{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.15);color:var(--text-secondary)}
.footer-powered-label{font-size:9px;opacity:.8}
.footer-powered-mark{display:block;height:14px;width:auto;object-fit:contain}
.footer-powered-mark--light{display:none}
html[data-theme="light"] .footer-powered-mark--dark{display:none}
html[data-theme="light"] .footer-powered-mark--light{display:block}
html[data-theme="light"] .footer-powered-by{background:rgba(20,14,36,.04);border-color:var(--glass-border)}
html[data-theme="light"] .footer-powered-by:hover{background:rgba(20,14,36,.08)}
.footer-logo{width:16px;height:16px;border-radius:4px;background:conic-gradient(from 0deg,var(--stargaze-primary),var(--mythbeast-primary),var(--console-primary),var(--garden-primary),var(--stargaze-primary));opacity:.5}
.footer-text{font-size:11px;font-weight:400;color:var(--text-secondary);letter-spacing:1.2px;text-transform:uppercase}
/* SECURITY UI */
.sec-status{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:var(--radius-sm);background:var(--glass-bg);border:1px solid var(--glass-border);margin-bottom:10px}
.sec-status .sec-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.sec-status .sec-dot.on{background:var(--success);box-shadow:0 0 6px var(--success)}
.sec-status .sec-dot.off{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.sec-status .sec-label{font-size:13px;color:var(--text-primary);flex:1}
.sec-status .sec-meta{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim)}
.sec-section{margin-bottom:20px}
.sec-section h4{font-size:12px;font-weight:700;color:var(--text-secondary);letter-spacing:.5px;text-transform:uppercase;margin-bottom:8px}
.totp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.totp-digit{width:100%;padding:12px 0;text-align:center;font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;border-radius:var(--radius-xs);background:rgba(255,255,255,.04);border:1px solid var(--glass-border);color:var(--text-primary);outline:none;transition:border-color .2s}
.totp-digit:focus{border-color:rgba(167,139,250,.5);box-shadow:0 0 0 3px rgba(167,139,250,.1)}
.pw-meter{height:4px;border-radius:2px;background:rgba(255,255,255,.06);margin-top:6px;overflow:hidden;transition:opacity .2s}
.pw-meter-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}
.pw-meter-label{font-family:'JetBrains Mono',monospace;font-size:10px;margin-top:4px;letter-spacing:.3px;transition:color .3s}
.pw-meter-fill.weak{background:#ef4444;width:25%}.pw-meter-label.weak{color:#ef4444}
.pw-meter-fill.fair{background:#f59e0b;width:50%}.pw-meter-label.fair{color:#f59e0b}
.pw-meter-fill.good{background:#14b8a6;width:75%}.pw-meter-label.good{color:#14b8a6}
.pw-meter-fill.strong{background:#22c55e;width:100%}.pw-meter-label.strong{color:#22c55e}
.recovery-codes{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:12px;border-radius:var(--radius-xs);background:rgba(0,0,0,.3);border:1px solid var(--glass-border);margin:12px 0}
.recovery-codes code{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--stargaze-primary);padding:4px 8px;border-radius:6px;background:rgba(167,139,250,.08);text-align:center;letter-spacing:1px}
.audit-entry{display:flex;align-items:flex-start;gap:10px;padding:10px 12px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);margin-bottom:6px;font-size:12px}
.audit-entry .ae-icon{flex-shrink:0;width:24px;height:24px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:11px}
.audit-entry .ae-body{flex:1;min-width:0}
.audit-entry .ae-event{font-weight:600;color:var(--text-primary)}
.audit-entry .ae-time{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);margin-top:2px}
.audit-entry .ae-chain{flex-shrink:0;width:16px;height:16px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:8px}
.ae-chain.valid{background:rgba(34,197,94,.15);color:var(--success)}
.ae-chain.broken{background:rgba(239,68,68,.15);color:var(--danger)}
.rotation-banner{padding:10px 14px;border-radius:var(--radius-sm);background:rgba(245,158,11,.1);border:1px solid rgba(245,158,11,.25);margin-bottom:12px;display:flex;align-items:center;gap:10px;font-size:12px;color:#f59e0b}
.rotation-banner .rb-text{flex:1}
.rotation-banner button{font-size:11px}
.qr-setup{display:flex;flex-direction:column;align-items:center;gap:12px;padding:16px;border-radius:var(--radius-sm);background:rgba(0,0,0,.2);border:1px solid var(--glass-border);margin:12px 0}
.qr-setup canvas{border-radius:8px;background:#fff;padding:8px}
.qr-setup .qr-secret{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--stargaze-primary);word-break:break-all;text-align:center;padding:8px;background:rgba(167,139,250,.06);border-radius:6px;width:100%;cursor:pointer}
.sec-warning{padding:10px 14px;border-radius:var(--radius-sm);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);font-size:12px;color:rgba(239,68,68,.9);margin:10px 0;line-height:1.5}
.hibp-result{padding:10px 14px;border-radius:var(--radius-sm);font-size:12px;margin:8px 0;line-height:1.5}
.hibp-result.breached{background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);color:#ef4444}
.hibp-result.safe{background:rgba(34,197,94,.08);border:1px solid rgba(34,197,94,.2);color:#22c55e}
/* ADMIN */
.overlay{position:fixed;inset:0;z-index:200;background:rgba(6,4,14,.88);backdrop-filter:blur(16px);display:none;justify-content:center;align-items:flex-start;overflow-y:auto;padding:40px 16px;-webkit-overflow-scrolling:touch}
.overlay.open{display:flex}
.panel{width:100%;max-width:520px;background:linear-gradient(165deg,rgba(18,12,36,.97),rgba(12,8,24,.98));border:1px solid rgba(167,139,250,.12);border-radius:20px;padding:28px 22px;position:relative;animation:fadeUp .4s cubic-bezier(.22,1,.36,1) both;margin:auto;box-shadow:0 24px 80px rgba(0,0,0,.5),0 0 0 1px rgba(167,139,250,.05) inset}
.panel-close{position:absolute;top:14px;right:14px;width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:all .2s;-webkit-tap-highlight-color:transparent}
.panel-close:hover{background:rgba(255,255,255,.1);color:var(--text-primary)}
.panel-close svg{width:15px;height:15px}
.panel h2{font-size:20px;font-weight:800;color:var(--text-primary);margin-bottom:4px;letter-spacing:-.3px}
.panel .panel-sub{font-size:12px;color:var(--text-dim);margin-bottom:22px;font-weight:400}
.form-group{margin-bottom:14px}
.form-group label{display:block;font-size:11px;font-weight:600;color:rgba(167,139,250,.7);margin-bottom:5px;letter-spacing:.4px;text-transform:uppercase}
.form-input{width:100%;padding:11px 14px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--text-primary);font-family:var(--hubble-font,'Outfit',sans-serif);font-size:13px;transition:all .2s;outline:none;box-sizing:border-box}
.form-input:focus{border-color:rgba(167,139,250,.4);box-shadow:0 0 0 3px rgba(167,139,250,.08);background:rgba(255,255,255,.05)}
.form-input::placeholder{color:var(--text-dim)}
textarea.form-input{resize:vertical;min-height:60px;line-height:1.5}
select.form-input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(167,139,250,0.5)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center}
select.form-input option{background:#0d0820;color:var(--text-primary)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-row-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.btn{padding:10px 18px;border-radius:10px;font-family:var(--hubble-font,'Outfit',sans-serif);font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .2s;display:inline-flex;align-items:center;justify-content:center;gap:8px;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn-primary{background:var(--stargaze-primary);color:#0d0820}.btn-primary:hover{filter:brightness(1.12);transform:translateY(-1px)}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text-secondary);border:1px solid rgba(255,255,255,.08)}.btn-ghost:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}
.btn-sm{padding:7px 12px;font-size:11px;border-radius:8px}
.btn-full{width:100%}
.btn-row{display:flex;gap:8px;margin-top:20px}
.divider{height:1px;background:linear-gradient(90deg,transparent,rgba(167,139,250,.15),transparent);margin:18px 0}
/* Admin panel components */
.admin-tabs{display:flex;gap:3px;margin-bottom:18px;background:rgba(255,255,255,.02);border-radius:12px;padding:4px;border:1px solid rgba(255,255,255,.06);flex-wrap:wrap;justify-content:center}
.admin-tab,.admin-tab-btn{padding:7px 10px;border-radius:8px;border:none;background:transparent;color:var(--text-dim);font-family:var(--hubble-font,'Outfit',sans-serif);font-size:11px;font-weight:500;cursor:pointer;transition:all .15s;text-align:center;-webkit-tap-highlight-color:transparent;white-space:nowrap}
.admin-tab.active,.admin-tab-btn.active{background:rgba(167,139,250,.12);color:var(--text-primary)}
.admin-tab:hover,.admin-tab-btn:hover{color:var(--text-secondary)}
.admin-list{display:flex;flex-direction:column;gap:6px;margin-top:14px;max-height:50vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.15) transparent}
.admin-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);cursor:grab;transition:all .15s}
.admin-item:hover{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.1)}
.admin-item.dragging{opacity:.5;transform:scale(.97)}
.admin-item-info{flex:1;min-width:0}
.admin-item-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.admin-item-meta{font-size:10px;color:var(--text-dim);margin-top:2px;display:flex;gap:6px;align-items:center}
.admin-item-meta .type-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 6px;border-radius:100px;background:rgba(167,139,250,.1);color:rgba(167,139,250,.6);text-transform:uppercase;letter-spacing:.4px}
.admin-item-actions{display:flex;gap:3px;flex-shrink:0}
.admin-item-actions button{width:30px;height:30px;border-radius:8px;border:1px solid rgba(255,255,255,.06);background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.admin-item-actions button:hover{background:rgba(255,255,255,.06);color:var(--text-primary)}
.admin-item-actions button.del:hover{color:var(--danger);background:rgba(239,68,68,.08)}
.admin-item-actions button svg{width:13px;height:13px}
.drag-handle{color:var(--text-dim);cursor:grab;flex-shrink:0;display:flex;align-items:center}
.drag-handle svg{width:14px;height:14px}
.empty-state{text-align:center;font-size:12px;color:var(--text-dim);padding:20px 10px}
.socials-grid{display:flex;flex-direction:column;gap:4px}
.socials-grid .form-group{margin-bottom:6px}
.socials-grid .form-group label{font-size:10px}
.socials-grid .form-input{padding:9px 12px;font-size:12px}
/* Panel helper classes */
.panel-hint{font-size:10px;color:var(--text-dim);margin-top:3px}
.panel-check{display:flex;align-items:center;gap:8px;cursor:pointer;padding:8px 12px;border-radius:10px;background:rgba(255,255,255,.02);border:1px solid rgba(255,255,255,.06);margin-bottom:12px;font-size:12px;color:var(--text-secondary);transition:all .15s;-webkit-tap-highlight-color:transparent}
.panel-check:hover{background:rgba(255,255,255,.04)}
.panel-check input[type="checkbox"]{accent-color:var(--stargaze-primary)}
/* Password toggle */
.pw-wrap{position:relative}
.pw-wrap input{padding-right:42px}
.pw-toggle{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:8px;border:none;background:transparent;color:var(--text-dim);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;-webkit-tap-highlight-color:transparent}
.pw-toggle:hover{color:var(--text-primary);background:rgba(255,255,255,.06)}
.pw-toggle svg{width:16px;height:16px}
/* Collapsible panel sections */
.panel-section{border:1px solid rgba(255,255,255,.06);border-radius:14px;background:rgba(255,255,255,.02);margin-bottom:10px;overflow:hidden;transition:border-color .2s}
.panel-section:hover{border-color:rgba(255,255,255,.1)}
.panel-section-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;-webkit-tap-highlight-color:transparent;user-select:none}
.panel-section-head:active{background:rgba(255,255,255,.02)}
.panel-section-icon{font-size:16px;width:22px;text-align:center;flex-shrink:0}
.panel-section-title{font-size:13px;font-weight:600;color:var(--text-primary);flex:1}
.panel-section-badge{font-family:'JetBrains Mono',monospace;font-size:9px;padding:2px 6px;border-radius:100px;background:rgba(167,139,250,.1);color:rgba(167,139,250,.6);letter-spacing:.3px}
.panel-section-chev{color:var(--text-dim);font-size:10px;transition:transform .2s;flex-shrink:0}
.panel-section.open .panel-section-chev{transform:rotate(180deg)}
.panel-section-body{max-height:0;overflow:hidden;transition:max-height .3s ease}
.panel-section.open .panel-section-body{max-height:3000px;padding:2px 14px 14px}
/* Type picker improved */
.type-picker{margin-bottom:16px}
.type-picker-search{margin-bottom:8px}
.type-picker-search input{width:100%;padding:9px 14px 9px 34px;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--text-primary);font-family:var(--hubble-font,'Outfit',sans-serif);font-size:12px;outline:none;transition:all .2s;box-sizing:border-box;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='rgba(224,218,240,0.3)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:12px center}
.type-picker-search input:focus{border-color:rgba(167,139,250,.4);box-shadow:0 0 0 3px rgba(167,139,250,.08)}
.type-picker-cats{display:flex;gap:4px;margin-bottom:8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
.type-picker-cats::-webkit-scrollbar{display:none}
.type-cat-btn{padding:5px 11px;border-radius:100px;border:1px solid rgba(255,255,255,.08);background:transparent;color:var(--text-dim);font-size:10px;font-weight:600;font-family:'JetBrains Mono',monospace;cursor:pointer;white-space:nowrap;transition:all .15s;letter-spacing:.3px;-webkit-tap-highlight-color:transparent}
.type-cat-btn:hover,.type-cat-btn.active{background:rgba(167,139,250,.1);border-color:rgba(167,139,250,.3);color:var(--stargaze-primary)}
.type-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:5px;max-height:220px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(167,139,250,.15) transparent;padding:2px}
.type-card{display:flex;flex-direction:column;align-items:center;gap:3px;padding:10px 5px;border-radius:10px;border:1px solid rgba(255,255,255,.05);background:rgba(255,255,255,.015);cursor:pointer;transition:all .15s;text-align:center;-webkit-tap-highlight-color:transparent}
.type-card:hover{border-color:rgba(167,139,250,.3);background:rgba(167,139,250,.05);transform:translateY(-1px)}
.type-card.active{border-color:var(--stargaze-primary);background:rgba(167,139,250,.1);box-shadow:0 0 16px rgba(167,139,250,.1)}
.type-card-icon{font-size:20px;line-height:1}
.type-card-name{font-size:9px;font-weight:600;color:var(--text-primary);line-height:1.2}
.type-card-desc{font-size:7px;color:var(--text-dim);line-height:1.3;display:none}
.type-card.active .type-card-desc{display:block}
/* Preview pane */
.panel-preview{margin-bottom:14px;padding:14px;border-radius:14px;background:rgba(0,0,0,.3);border:1px solid rgba(255,255,255,.04);position:relative;overflow:hidden;min-height:60px}
.panel-preview-label{position:absolute;top:6px;right:8px;font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase;opacity:.4}
.panel-preview .link-card{margin:0!important;pointer-events:none;animation:none!important}
.empty-state{text-align:center;padding:32px 16px;color:var(--text-dim);font-size:14px;font-weight:300}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:var(--radius-sm);padding:12px 20px;font-size:13px;font-weight:500;color:var(--text-primary);z-index:300;opacity:0;transition:all .3s;pointer-events:none;backdrop-filter:blur(16px)}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.success{border-color:rgba(34,197,94,.3)}.toast.error{border-color:rgba(239,68,68,.3)}
.logo-upload-wrap{display:flex;align-items:center;gap:12px}
.logo-preview{width:48px;height:48px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.logo-preview img{width:100%;height:100%;object-fit:cover}
.logo-preview-empty{font-size:10px;color:var(--text-dim);text-align:center;line-height:1.2}
.logo-upload-btns{display:flex;gap:6px;flex-wrap:wrap}
input[type="file"]{display:none}
.stat-row{display:flex;gap:12px;margin-bottom:16px}
.stat-card{flex:1;padding:12px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);text-align:center}
.stat-num{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:700;color:var(--text-primary)}
.stat-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
/* LOCKED CARDS */
.link-card.locked{opacity:.75}
.link-card.locked .link-card-main{pointer-events:none}
.lock-overlay{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;background:rgba(6,4,14,.55);border-radius:var(--radius-md);backdrop-filter:blur(4px);cursor:pointer;transition:all .3s}
.lock-overlay:hover{background:rgba(6,4,14,.35)}
.lock-overlay svg{width:24px;height:24px;stroke:var(--text-dim);fill:none;stroke-width:2;stroke-linecap:round}
.lock-input-wrap{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 20px;background:rgba(6,4,14,.85);border-radius:var(--radius-md);backdrop-filter:blur(8px)}
.lock-input-wrap input{flex:1;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,.08);border:1px solid var(--glass-border);color:var(--text-primary);font-family:var(--hubble-font,'Outfit',sans-serif);font-size:13px;outline:none}
.lock-input-wrap button{padding:10px 16px;border-radius:8px;border:none;background:var(--stargaze-primary);color:#0d0820;font-weight:600;font-size:13px;cursor:pointer}
/* PAGE NAV */
.page-nav{display:flex;gap:6px;margin-bottom:24px;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .1s both;flex-wrap:wrap;justify-content:center}
.page-tab{padding:6px 14px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);font-family:var(--hubble-font,'Outfit',sans-serif);font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .3s;text-decoration:none;white-space:nowrap}
.page-tab:hover{background:var(--glass-hover);color:var(--text-primary)}
.page-tab.active{background:rgba(255,255,255,.12);color:var(--text-primary);border-color:rgba(255,255,255,.2);font-weight:600}

/* BRAND BACKGROUNDS */
.bg-canvas{transition:all 1s ease}
.bg-canvas.deck-bg-stargaze::before{background:radial-gradient(ellipse 50% 40% at 30% 20%,rgba(124,58,237,.8) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 70% 30%,rgba(88,28,135,.7) 0%,transparent 50%),radial-gradient(ellipse 35% 35% at 50% 65%,rgba(139,92,246,.4) 0%,transparent 45%)!important}
.bg-canvas.deck-bg-mythbeast::before{background:radial-gradient(ellipse 50% 40% at 30% 20%,rgba(6,95,70,.8) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 70% 30%,rgba(16,185,129,.5) 0%,transparent 50%),radial-gradient(ellipse 35% 35% at 50% 65%,rgba(52,211,153,.3) 0%,transparent 45%)!important}
.bg-canvas.deck-bg-garden::before{background:radial-gradient(ellipse 50% 40% at 30% 20%,rgba(157,23,77,.8) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 70% 30%,rgba(190,24,93,.5) 0%,transparent 50%),radial-gradient(ellipse 35% 35% at 50% 65%,rgba(244,114,182,.3) 0%,transparent 45%)!important}
.bg-canvas.deck-bg-console::before{background:radial-gradient(ellipse 50% 40% at 30% 20%,rgba(7,89,133,.8) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 70% 30%,rgba(14,165,233,.5) 0%,transparent 50%),radial-gradient(ellipse 35% 35% at 50% 65%,rgba(56,189,248,.3) 0%,transparent 45%)!important}
.bg-canvas.deck-bg-connect::before{background:radial-gradient(ellipse 50% 40% at 30% 20%,rgba(146,64,14,.8) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 70% 30%,rgba(217,119,6,.5) 0%,transparent 50%),radial-gradient(ellipse 35% 35% at 50% 65%,rgba(251,191,36,.3) 0%,transparent 45%)!important}
.bg-canvas.deck-bg-custom::before{background:radial-gradient(ellipse 50% 40% at 30% 20%,color-mix(in srgb,var(--bgc) 70%,transparent) 0%,transparent 55%),radial-gradient(ellipse 40% 50% at 70% 30%,color-mix(in srgb,var(--bgc) 40%,transparent) 0%,transparent 50%),radial-gradient(ellipse 35% 35% at 50% 65%,color-mix(in srgb,var(--bgc) 25%,transparent) 0%,transparent 45%)!important}
/* CARD ENTRANCE — consistent single direction */
@keyframes cardIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.anim-slide,.anim-scale,.anim-blur,.anim-drop{animation:cardIn .45s cubic-bezier(.22,1,.36,1) both}

/* ACCESSIBILITY — focus indicators */
:focus-visible{outline:2px solid var(--stargaze-primary);outline-offset:3px;border-radius:4px}
.link-card:focus-visible,.social-btn:focus-visible,.filter-tab:focus-visible,.tb-btn:focus-visible{outline:2px solid var(--stargaze-primary);outline-offset:2px}
/* BLOG CARD */
.blog-body{padding:0 16px 14px;position:relative;z-index:3}
.blog-text{font-size:13px;color:var(--text-secondary);line-height:1.7}
.blog-date{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.5px}
/* 2026-04-27 audit follow-up: Blog card hero image + meta block.
   Hero sits above the title with the same border-radius as the card
   top so it reads as part of the card chrome. The meta row stamps
   date and computed read time above the body in the same mono-spaced
   register the date used to live in standalone. */
.blog-hero{width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--radius-md) var(--radius-md) 0 0;background:rgba(255,255,255,.04)}
.blog-hero img{width:100%;height:100%;object-fit:cover;display:block}
.blog-meta{display:flex;align-items:center;gap:6px;margin:0 0 10px;font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.5px}
.blog-readtime{color:var(--text-dim)}
.blog-meta-dot{opacity:.5}
html[data-theme="light"] .blog-hero{background:rgba(20,8,80,.04)}
/* Quick-win enhancement: thin scroll-driven reading-progress bar at the
   top of long-form cards (Blog, Recap). features.js writes the
   --reading-progress custom property as the visitor scrolls through the
   card. The fill animates via a CSS transition so the change is smooth
   without per-frame style writes. Brand color via --bp falls back to
   the platform accent if no deck brand is in scope. */
.reading-progress{position:relative;height:2px;margin:0 12px 8px;background:rgba(255,255,255,.06);border-radius:1px;overflow:hidden;z-index:3}
.reading-progress-fill{position:absolute;inset:0 auto 0 0;width:var(--reading-progress,0%);background:var(--bp,#a78bfa);transition:width 120ms linear;border-radius:1px}
html[data-theme="light"] .reading-progress{background:rgba(20,8,80,.06)}
/* EVENT CALENDAR BRAND COLORS */
.deck-section .event-cal-month{background:var(--bg);color:var(--bp)}
/* EVENT RSVP BRAND COLORS */
.deck-section .event-rsvp:hover{border-color:var(--bp);color:var(--bp)}
.widget-code{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);background:rgba(0,0,0,.3);padding:10px 12px;border-radius:8px;word-break:break-all;line-height:1.6;cursor:pointer;border:1px solid transparent;transition:border-color .2s}
.widget-code:hover{border-color:var(--stargaze-primary)}
/* VERIFIED BADGE */
.verified-badge{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;background:var(--stargaze-primary);margin-left:6px;vertical-align:middle;flex-shrink:0;position:relative;top:-1px;cursor:default;transition:transform .3s,box-shadow .3s;-webkit-text-fill-color:initial}
.verified-badge:hover{transform:scale(1.2);box-shadow:0 0 10px rgba(167,139,250,.5)}
.verified-badge svg{width:10px;height:10px;fill:none;stroke:#06040e;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round}
/* EVENT CARD */
.event-card-inner{display:flex;gap:14px;padding:4px 16px 14px;position:relative;z-index:3;align-items:flex-start}
.event-cal{flex-shrink:0;width:52px;border-radius:10px;overflow:hidden;border:1px solid var(--glass-border);text-align:center}
.event-cal-month{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;padding:3px 0;background:var(--glass-border)}
.event-cal-day{font-family:'JetBrains Mono',monospace;font-size:24px;font-weight:800;color:var(--text-primary);line-height:1.1;padding:4px 0}
.event-cal-dow{font-family:'JetBrains Mono',monospace;font-size:8px;color:var(--text-dim);padding:2px 0 4px;letter-spacing:.5px}
.event-details{flex:1}
.event-time{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-secondary);margin-bottom:3px}
.event-venue{font-size:12px;color:var(--text-dim);margin-bottom:8px;line-height:1.4}
.event-rsvp{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:6px 12px;border-radius:100px;border:1px solid var(--glass-border);color:var(--text-secondary);text-decoration:none;transition:all .25s;min-height:40px}
.event-rsvp:hover{background:var(--glass-hover);color:var(--text-primary);transform:translateY(-1px)}
/* TESTIMONIAL CARD */
.testimonial-inner{padding:0 16px 14px;position:relative;z-index:3}
.testimonial-quote{font-size:28px;line-height:.8;color:var(--text-dim);font-family:Georgia,serif;margin-bottom:4px;opacity:.4}
/* Phase 7: closing quotation mark — right-aligned mirror of the opening
   quote. Sits below the quote text with negative top margin so it visually
   tucks against the text's last line. */
.testimonial-quote-close{text-align:right;margin-top:-6px;margin-bottom:10px}
.testimonial-text{font-size:13px;color:var(--text-secondary);line-height:1.7;font-style:italic;margin-bottom:10px;min-height:40px;transition:opacity .4s}
.testimonial-text.fading{opacity:0}
.testimonial-author{font-size:12px;font-weight:600;color:var(--text-primary)}
.testimonial-role{font-size:11px;color:var(--text-dim)}
.testimonial-dots{display:flex;gap:5px;margin-top:10px}
.testimonial-dot{width:5px;height:5px;border-radius:50%;background:var(--glass-border);cursor:pointer;transition:all .2s}
.testimonial-dot.active{background:var(--text-secondary);width:14px;border-radius:100px}
/* VIDEO REEL CARD */
.video-reel-wrap{width:100%;position:relative;z-index:3;padding:0 12px 12px}
.video-reel-inner{width:100%;aspect-ratio:16/9;border-radius:var(--radius-xs);overflow:hidden;position:relative;cursor:pointer;background:#000}
.video-reel-inner video{width:100%;height:100%;object-fit:cover;display:block}
/* Bug 24: overlay doesn't intercept clicks — only the play button does. */
.video-reel-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.3);transition:background .2s;pointer-events:none}
.video-reel-inner:hover .video-reel-overlay{background:rgba(0,0,0,.15)}
.video-reel-play{width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;transition:all .2s;pointer-events:auto;cursor:pointer}
.video-reel-play svg{width:18px;height:18px;fill:#000;margin-left:2px}
.video-reel-inner.playing .video-reel-overlay{background:transparent;opacity:0}
.video-reel-inner.playing:hover .video-reel-overlay{opacity:1;background:rgba(0,0,0,.2)}
/* RSS CARD */
.rss-inner{padding:0 16px 14px;position:relative;z-index:3}
.rss-card-row{display:flex;gap:12px;align-items:flex-start}
.rss-thumb{width:72px;height:56px;border-radius:var(--radius-xs);overflow:hidden;flex-shrink:0}
.rss-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.rss-card-text{flex:1;min-width:0}
.rss-post-title{font-size:13px;font-weight:600;color:var(--text-primary);margin-bottom:4px;line-height:1.4}
.rss-excerpt{font-size:12px;color:var(--text-secondary);line-height:1.6;margin-bottom:8px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rss-meta{display:flex;align-items:center;gap:10px}
.rss-date{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.3px}
.rss-read-more{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-secondary);text-decoration:none;letter-spacing:.3px;display:flex;align-items:center;gap:3px;transition:color .2s}
.rss-read-more:hover{color:var(--text-primary)}
.rss-feed-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 6px;border-radius:4px;background:rgba(255,165,0,.1);color:orange;border:1px solid rgba(255,165,0,.2);letter-spacing:.5px}
/* THUMBNAIL SUPPORT */
.link-icon-wrap.has-thumb{border-radius:10px;overflow:hidden}
.link-icon-wrap.has-thumb img{width:100%;height:100%;object-fit:cover;border-radius:0}
/* DEEP LINK TOAST */
.deep-link-nudge{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--bg-panel);border:1px solid rgba(167,139,250,.3);border-radius:var(--radius-sm);padding:10px 16px;font-size:12px;font-weight:500;color:var(--text-primary);z-index:300;opacity:0;transition:all .3s;pointer-events:none;backdrop-filter:blur(16px);white-space:nowrap;display:flex;align-items:center;gap:8px}
.deep-link-nudge.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* ══════════════════════════════════════
   PHASE 2 — UNIVERSE FEATURES CSS
══════════════════════════════════════ */

/* UNIVERSE MAP OVERLAY */
/* Inline Universe Hub */
.universe-hub{width:100%;margin-bottom:40px;animation:fadeUp .6s cubic-bezier(.22,1,.36,1) .2s both}
.universe-hub-header{text-align:center;margin-bottom:0;padding:16px;border-radius:var(--radius-md);background:var(--glass-bg);border:1px solid var(--glass-border);transition:all .3s}

.universe-hub-header.open{border-radius:var(--radius-md) var(--radius-md) 0 0;border-bottom-color:transparent;margin-bottom:0}
.universe-hub-toggle{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px}
.universe-hub-title{font-size:18px;font-weight:800;color:var(--text-primary);letter-spacing:-.5px}
.universe-hub-sub{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);letter-spacing:.5px;margin-bottom:0}
.universe-hub-tabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.universe-hub-body{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease;border:1px solid var(--glass-border);border-top:none;border-radius:0 0 var(--radius-md) var(--radius-md);background:rgba(0,0,0,.15);position:relative;z-index:1}
.universe-hub-body.open{max-height:5000px;opacity:1}
.universe-hub-body-inner{padding:20px 16px}
#universeMapWrap{width:100%;position:relative}
#universeMapSvg{width:100%;border-radius:var(--radius-md);background:rgba(255,255,255,.02);border:1px solid var(--glass-border);cursor:grab}
#universeMapSvg:active{cursor:grabbing}
#readingOrderWrap,#universeCalWrap{width:100%}
/* Universe Map SVG */
.umap-node{cursor:pointer;transition:opacity .3s,transform .3s}
.umap-node:hover .umap-circle{filter:brightness(1.3) drop-shadow(0 0 8px currentColor)}
.umap-node.dimmed{opacity:.15}
.umap-node.highlighted .umap-circle{filter:brightness(1.2) drop-shadow(0 0 12px currentColor)}
.umap-node-label{font-family:var(--hubble-font,'Outfit',sans-serif);font-size:11px;font-weight:600;fill:var(--text-primary);text-anchor:middle;pointer-events:none}
.umap-edge{stroke-dasharray:6 4;animation:dashFlow 2s linear infinite;transition:opacity .3s}
.umap-edge.dimmed{opacity:.05}
@keyframes dashFlow{to{stroke-dashoffset:-20}}
/* Universe Map Expanded Info */
.umap-info-panel{margin-top:12px;padding:14px 16px;border-radius:var(--radius-sm);background:rgba(0,0,0,.25);border:1px solid var(--glass-border);animation:fadeUp .3s ease both;overflow:hidden}
.umap-info-panel.collapsed{max-height:0;padding:0 16px;margin-top:0;border:none;opacity:0}
.umap-info-title{font-size:15px;font-weight:700;margin-bottom:4px}
.umap-info-subtitle{font-size:11px;color:var(--text-dim);margin-bottom:10px}
.umap-info-cards{display:flex;flex-direction:column;gap:4px;max-height:140px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) transparent}
.umap-info-card{padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:12px;color:var(--text-secondary);cursor:pointer;transition:all .15s}
.umap-info-card:hover{background:rgba(255,255,255,.08);transform:translateX(2px)}
.umap-info-go{display:inline-flex;align-items:center;gap:4px;margin-top:10px;font-size:11px;font-weight:600;cursor:pointer;opacity:.7;transition:opacity .2s;text-decoration:none}
.umap-info-go:hover{opacity:1}

/* 2026-05-03: drill-down view + multi-cluster overview.
   - .umap-hint: small caption under the SVG explaining what to do
   - .umap-back: floating chip in the top-left of the SVG when drilled
   - .umap-focal: enlarged central deck node in drilled mode
   - .umap-card-node: cards orbiting the focal deck — burst-in animation
   - .umap-other: dimmed sibling decks on the outer ring
   - .umap-rel-edge: card-to-other-deck relationship lines
   - .umap-card-highlight: brief glow when scrollToCard lands. */
.umap-hint{margin-top:8px;font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;letter-spacing:.3px;text-align:center}
.umap-back{position:absolute;top:10px;left:12px;font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.3px;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid var(--glass-border);color:var(--text-secondary);cursor:pointer;transition:all .2s;z-index:2}
.umap-back:hover{background:rgba(255,255,255,.12);color:var(--text-primary)}
.umap-focal{cursor:pointer}
.umap-focal-circle{transition:filter .25s}
.umap-focal:hover .umap-focal-circle{filter:brightness(1.15) drop-shadow(0 0 14px currentColor)}
.umap-other{opacity:.55;transition:opacity .2s}
.umap-other:hover{opacity:1}
.umap-rel-edge{stroke-dasharray:4 3;animation:dashFlow 2.5s linear infinite}
.umap-card-node{cursor:pointer;transform-box:fill-box;transform-origin:center;animation:umapBurst 520ms cubic-bezier(0.34,1.56,0.64,1) backwards;transition:filter .15s}
.umap-card-node:hover circle{filter:brightness(1.2)}
.umap-card-label{font-family:var(--hubble-font,'Outfit',sans-serif);pointer-events:none;font-weight:600}
@keyframes umapBurst{
  from{transform:scale(0);opacity:0}
  to{transform:scale(1);opacity:1}
}
.umap-card-highlight{animation:umapCardPulse 1.4s ease-out;box-shadow:0 0 0 3px var(--stargaze-primary,#a78bfa),0 0 24px rgba(167,139,250,.6) !important}
@keyframes umapCardPulse{
  0%{box-shadow:0 0 0 0 var(--stargaze-primary,#a78bfa),0 0 0 rgba(167,139,250,0)}
  30%{box-shadow:0 0 0 4px var(--stargaze-primary,#a78bfa),0 0 28px rgba(167,139,250,.7)}
  100%{box-shadow:0 0 0 0 transparent,0 0 0 transparent}
}

/* Universe Map Legend — Interactive */
.umap-legend{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px;justify-content:center;max-width:460px}
.umap-legend-item{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--text-secondary);padding:4px 10px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;transition:all .2s;user-select:none}
.umap-legend-item:hover{background:var(--glass-hover)}
.umap-legend-item.active{border-color:var(--legend-color,rgba(255,255,255,.3));background:color-mix(in srgb,var(--legend-color,#fff) 12%,transparent);color:var(--text-primary)}
.umap-legend-dot{width:8px;height:8px;border-radius:50%;transition:box-shadow .2s}
.umap-legend-item.active .umap-legend-dot{box-shadow:0 0 6px 2px currentColor}

/* READING ORDER */
.reading-order-steps{display:flex;flex-direction:column;gap:0;width:100%}
.ro-step{display:flex;gap:16px;position:relative;padding-bottom:0}
.ro-step:not(:last-child) .ro-line{position:absolute;left:19px;top:40px;bottom:-12px;width:2px;background:var(--glass-border);z-index:0}
.ro-num{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:13px;font-weight:700;flex-shrink:0;z-index:1;position:relative}
.ro-content{flex:1;padding-bottom:24px}
.ro-title{font-size:14px;font-weight:700;color:var(--text-primary);margin-bottom:3px}
.ro-desc{font-size:12px;color:var(--text-secondary);line-height:1.6}
.ro-brand-tag{font-family:'JetBrains Mono',monospace;font-size:9px;padding:2px 7px;border-radius:100px;margin-top:6px;display:inline-block;letter-spacing:.3px}
.ro-step-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:11px;font-weight:600;text-decoration:none;transition:opacity .2s;opacity:.7}
.ro-step-link:hover{opacity:1}
.ro-start-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 8px;border-radius:100px;background:rgba(167,139,250,.15);color:var(--stargaze-primary);border:1px solid rgba(167,139,250,.2);margin-bottom:16px;display:inline-block;letter-spacing:.5px}
/* Reading Order Filter */
.ro-filter-bar{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;align-items:center}
.ro-filter-btn{font-family:'JetBrains Mono',monospace;font-size:10px;padding:4px 10px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-dim);cursor:pointer;transition:all .2s;letter-spacing:.3px}
.ro-filter-btn:hover{background:var(--glass-hover);color:var(--text-primary)}
.ro-filter-btn.active{background:rgba(167,139,250,.15);color:var(--stargaze-primary);border-color:rgba(167,139,250,.3)}
.ro-drag-handle{cursor:grab;opacity:.3;transition:opacity .2s;padding:2px 4px;margin-right:-4px}
.ro-drag-handle:hover{opacity:.7}
.ro-step.dragging{opacity:.4;transform:scale(.97)}
.ro-desc.spoiler-text{filter:blur(6px);user-select:none;cursor:pointer;transition:filter .3s}
.ro-desc.spoiler-text:hover{filter:blur(3px)}
.ro-desc.spoiler-text.revealed{filter:none;user-select:auto;cursor:default}
.ro-spoiler-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 7px;border-radius:100px;background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2);letter-spacing:.4px;margin-left:6px;cursor:pointer}

/* RELEASE CALENDAR CARD — ELEVATED */
.rcal-inner{padding:8px 16px 14px;position:relative;z-index:3}

/* 2026-04-29 audit follow-up: Next-release callout above the grid + a
   list-view fallback that kicks in when the visible month has no
   events but future ones exist. The callout uses the deck brand
   color via inline style; the upcoming list is a tighter version of
   the existing events list with date stamps. */
.rcal-next{display:flex;align-items:baseline;gap:8px;padding:8px 12px;margin-bottom:10px;border-radius:var(--radius-xs);background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);flex-wrap:wrap}
.rcal-next-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;align-self:center}
.rcal-next-label{font-size:10px;font-weight:600;color:var(--text-primary);text-transform:uppercase;letter-spacing:.5px}
.rcal-next-title{font-size:13px;color:var(--text-primary);font-weight:600;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rcal-next-when{font-size:11px;color:var(--text-secondary);font-family:'JetBrains Mono',monospace;letter-spacing:.3px}
.rcal-upcoming{margin-top:14px}
.rcal-upcoming-label{font-size:10px;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px}
.rcal-upcoming .rcal-event-row{display:flex;align-items:baseline;gap:8px}
.rcal-event-date{font-size:11px;color:var(--text-dim);font-family:'JetBrains Mono',monospace;letter-spacing:.3px;flex-shrink:0;min-width:48px}
.rcal-event-title{font-size:13px;color:var(--text-secondary)}
html[data-theme="light"] .rcal-next{background:var(--w03);border-color:var(--glass-border)}

/* Month transition */
#uniCalInner{transition:opacity .15s ease}
#uniCalInner.rcal-fade-out{opacity:0}

/* Upcoming strip */
.rcal-upcoming-strip{margin-bottom:16px}
.rcal-upcoming-label{font-family:'JetBrains Mono',monospace;font-size:8px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:6px}
.rcal-upcoming-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none}
.rcal-upcoming-scroll::-webkit-scrollbar{display:none}
.rcal-upcoming-pill{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:100px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-secondary);white-space:nowrap;cursor:pointer;transition:all .2s;flex-shrink:0}
.rcal-upcoming-pill:hover{background:rgba(255,255,255,.08);color:var(--text-primary);transform:translateY(-1px)}
.rcal-pill-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}

/* Navigation */
.rcal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rcal-nav-btn{width:36px;height:36px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all .2s;font-size:18px;line-height:1}
.rcal-nav-btn:hover{background:var(--glass-hover);color:var(--text-primary);transform:scale(1.1)}
.rcal-month-label{font-family:'JetBrains Mono',monospace;font-size:15px;font-weight:700;letter-spacing:.5px;background:linear-gradient(135deg,#a78bfa,#818cf8,#6366f1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.rcal-month-year{opacity:.7;font-weight:400}

/* Grid */
.rcal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.rcal-dow{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);text-align:center;padding:4px 0 8px;letter-spacing:1.5px;text-transform:uppercase;font-weight:600;opacity:.5}
.rcal-cell{border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);cursor:default;transition:all .2s ease;padding:6px 0 5px;min-height:40px;position:relative}
.rcal-cell-empty{opacity:0}
.rcal-cell.today{color:var(--text-primary);font-weight:700;background:rgba(167,139,250,.1);box-shadow:0 0 0 1.5px rgba(167,139,250,.35),0 0 12px rgba(167,139,250,.15)}
.rcal-cell.has-event{cursor:pointer}
.rcal-cell.has-event:hover{background:rgba(255,255,255,.06);transform:scale(1.08);z-index:2}
.rcal-cell.selected{background:var(--cal-sel-color,#a78bfa)22;box-shadow:0 0 0 1.5px var(--cal-sel-color,#a78bfa)}
.rcal-cell-num{line-height:1}

/* Event dots (replacing underlines) */
.rcal-dots{display:flex;gap:3px;margin-top:4px;align-items:center}
.rcal-dot{width:5px;height:5px;border-radius:50%;transition:transform .2s}
.rcal-cell:hover .rcal-dot{transform:scale(1.3)}

/* Keep underlines for backward compat with compact card calendars */
.rcal-underlines{display:flex;flex-direction:column;gap:1px;margin-top:2px;align-items:center}
.rcal-uline{width:12px;height:2px;border-radius:1px}

/* Event cards list */
.rcal-events-list{margin-top:16px;display:flex;flex-direction:column;gap:8px}

/* Event card (new elevated style) */
.rcal-event-card{display:flex;border-radius:10px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);overflow:hidden;cursor:pointer;transition:all .25s ease}
.rcal-event-card:hover{background:rgba(255,255,255,.06);transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.2)}
.rcal-event-card.past{opacity:.5}
.rcal-event-card.past:hover{opacity:.7}
.rcal-card-accent{width:4px;flex-shrink:0;border-radius:4px 0 0 4px}
.rcal-card-body{flex:1;padding:10px 12px;min-width:0}
.rcal-card-header{display:flex;align-items:center;gap:10px}
.rcal-card-date{display:flex;flex-direction:column;align-items:center;min-width:44px;flex-shrink:0}
.rcal-card-date-day{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:700;line-height:1}
.rcal-card-date-month{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1px;opacity:.7;text-transform:uppercase}
.rcal-card-date-year{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:400;opacity:.5;margin-top:1px}
.rcal-card-info{flex:1;min-width:0}
.rcal-card-title{font-size:13px;font-weight:600;color:var(--text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rcal-deck-tag{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 7px;border-radius:100px;letter-spacing:.4px;white-space:nowrap;flex-shrink:0;display:inline-block;margin-top:2px}
.rcal-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.rcal-countdown{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.3px;white-space:nowrap}
.rcal-countdown.today{color:#a78bfa;font-weight:700}
.rcal-countdown.past{opacity:.6}
.rcal-ev-chev{transition:transform .2s;opacity:.5;font-size:10px;flex-shrink:0}

/* Event card expanded detail */
.rcal-card-detail{display:none;padding:8px 0 2px;margin-top:8px;border-top:1px solid rgba(255,255,255,.06)}
.rcal-event-card.expanded .rcal-card-detail{display:block}
.rcal-event-card.expanded .rcal-ev-chev{transform:rotate(180deg)}
.rcal-card-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-bottom:8px}

/* Export dropdown */
.rcal-card-export{display:flex}
.rcal-export-dropdown{position:relative}
.rcal-export-btn{padding:6px 14px;border-radius:6px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);font-family:'JetBrains Mono',monospace;font-size:10px;cursor:pointer;transition:all .2s}
.rcal-export-btn:hover{background:rgba(255,255,255,.08)}
.rcal-export-menu{display:none;position:absolute;bottom:100%;left:0;margin-bottom:4px;background:var(--glass-bg,#1a1a2e);border:1px solid var(--glass-border,rgba(255,255,255,.1));border-radius:8px;padding:4px;z-index:10;min-width:140px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
.rcal-export-dropdown.open .rcal-export-menu{display:flex;flex-direction:column;gap:2px}
.cal-export-btns{display:flex;flex-direction:column;gap:2px;width:100%}
.cal-exp-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 12px;border-radius:6px;background:transparent;border:none;font-family:'JetBrains Mono',monospace;font-size:10px;font-weight:600;color:var(--text-secondary);text-decoration:none;transition:all .2s;cursor:pointer;width:100%;text-align:left}
.cal-exp-btn:hover{background:rgba(255,255,255,.08);color:var(--text-primary)}

/* Old event-item classes kept for backward compat with card-level calendars */
.rcal-event-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:8px;cursor:pointer;transition:all .2s;flex-wrap:wrap}
.rcal-event-item:hover{filter:brightness(1.15)}
.rcal-event-detail{width:100%;padding:6px 0 2px;font-size:11px;line-height:1.6;margin-top:4px;display:none;opacity:.8}
.rcal-event-item.expanded .rcal-event-detail{display:block}
.rcal-event-item.expanded .rcal-ev-chev{transform:rotate(180deg)}
.rcal-event-date{font-family:'JetBrains Mono',monospace;font-size:9px;min-width:44px;letter-spacing:.3px;font-weight:600}
.rcal-event-title{font-size:12px;flex:1;font-weight:500}

/* Empty state */
.rcal-empty{text-align:center;padding:32px 20px}
.rcal-empty-icon{font-size:32px;margin-bottom:10px;opacity:.4}
.rcal-empty-title{font-size:14px;color:var(--text-secondary);font-weight:600;margin-bottom:6px}
.rcal-empty-desc{font-size:12px;color:var(--text-dim);line-height:1.5;max-width:260px;margin:0 auto}

/* Compact card calendar overrides */
.rcal-compact .rcal-nav{margin-bottom:8px}
.rcal-compact .rcal-nav-btn{width:22px;height:22px;font-size:10px}
.rcal-compact .rcal-month-label{font-size:9px;background:none;-webkit-text-fill-color:var(--text-primary)}
.rcal-compact .rcal-dow{font-size:7px;padding:1px 0;letter-spacing:.5px}
.rcal-compact .rcal-cell{font-size:8px;padding:3px 0 2px;min-height:26px}
.rcal-compact .rcal-uline{width:10px;height:1.5px}
.rcal-compact .rcal-events-list{margin-top:6px;gap:4px}
.rcal-compact .rcal-event-item{padding:5px 8px;gap:6px;border-radius:6px}
.rcal-compact .rcal-event-date{font-size:8px;min-width:36px}
.rcal-compact .rcal-event-title{font-size:10px}
.rcal-compact .rcal-event-detail{font-size:10px}
.rcal-compact .rcal-inner{padding:6px 12px 10px}

/* LORE WIKI POPUP */
/* EMAIL CAPTURE CARD */
.email-form{padding:10px 16px 14px;display:flex;flex-direction:column;gap:8px;position:relative;z-index:3}
.email-form input[type="text"],.email-form input[type="email"]{width:100%;padding:8px 12px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);font-size:13px;font-family:inherit;outline:none;transition:border-color .2s;box-sizing:border-box;min-height:44px}
.email-form input:focus{border-color:var(--stargaze-primary)}
.email-form input::placeholder{color:var(--text-dim)}
.email-cta{padding:8px 16px;border-radius:var(--radius-xs);background:var(--stargaze-primary);color:#fff;font-size:13px;font-weight:600;border:none;cursor:pointer;transition:all .2s;font-family:inherit;min-height:44px}
.email-cta:hover{filter:brightness(1.15);transform:translateY(-1px)}

/* CONTENT CALENDAR CARD */
.ccal-list{padding:8px 14px 14px;position:relative;z-index:3;display:flex;flex-direction:column;gap:4px}
.ccal-list-row{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:6px;background:rgba(255,255,255,.02)}
.ccal-list-today{background:rgba(255,255,255,.05);border:1px solid var(--glass-border)}
.ccal-list-date{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);min-width:88px;flex-shrink:0}
.ccal-list-today .ccal-list-date{color:var(--text-primary);font-weight:700}
.ccal-list-posts{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ccal-list-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;display:inline-block}
.ccal-list-label{font-size:11px;color:var(--text-secondary)}
.ccal-empty{font-size:11px;color:var(--text-dim);padding:10px 8px;font-family:'JetBrains Mono',monospace}

/* POLL CARD */
.poll-options{padding:8px 16px 6px;display:flex;flex-direction:column;gap:5px;position:relative;z-index:3}
.poll-option{position:relative;padding:9px 12px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);cursor:pointer;transition:all .2s;overflow:hidden;min-height:44px}
.poll-option:hover{background:var(--glass-hover)}
.poll-option.voted{cursor:default}
.poll-bar{position:absolute;left:0;top:0;bottom:0;background:rgba(167,139,250,.12);border-radius:var(--radius-xs);transition:width .6s ease}
.poll-option-text{position:relative;display:flex;justify-content:space-between;align-items:center;font-size:13px;color:var(--text-secondary)}
.poll-pct{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim)}
.poll-total{padding:4px 16px 12px;font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);text-align:right}

/* DIGITAL PRODUCT CARD */
.product-inner{padding:10px 16px 14px;display:flex;gap:14px;align-items:flex-start;position:relative;z-index:3}
.product-cover{width:72px;height:96px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center}
.product-cover img{width:100%;height:100%;object-fit:cover}
.product-price{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:800;color:var(--text-primary);margin-bottom:4px}
.product-desc{font-size:12px;color:var(--text-dim);line-height:1.5;margin-bottom:10px}
.product-buy{display:inline-block;padding:6px 16px;border-radius:var(--radius-xs);background:var(--stargaze-primary);color:#fff;font-size:12px;font-weight:600;text-decoration:none;transition:all .2s}
.product-buy:hover{filter:brightness(1.15);transform:translateY(-1px)}

/* TIP JAR CARD */
.tip-amounts{padding:8px 16px 14px;display:flex;gap:8px;flex-wrap:wrap;position:relative;z-index:3}
.tip-btn{padding:8px 18px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;cursor:pointer;text-align:center;flex:1;min-width:60px;min-height:44px}
.tip-btn:hover{background:rgba(167,139,250,.15);border-color:var(--stargaze-primary);color:var(--stargaze-primary);transform:translateY(-1px)}

/* PROMO CODE CARD */
.promo-reveal-wrap{padding:10px 16px 14px;position:relative;z-index:3}
.promo-reveal-btn{width:100%;padding:10px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px dashed var(--glass-border);color:var(--text-secondary);font-size:13px;cursor:pointer;transition:all .2s;text-align:center}
.promo-reveal-btn:hover{background:var(--glass-hover);border-color:var(--stargaze-primary)}
.promo-code-display{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--radius-xs);background:rgba(167,139,250,.08);border:1px solid rgba(167,139,250,.2)}
.promo-code-text{font-family:'JetBrains Mono',monospace;font-size:18px;font-weight:800;letter-spacing:2px;color:var(--stargaze-primary);flex:1}
.promo-copy-btn{padding:5px 12px;border-radius:var(--radius-xs);background:var(--stargaze-primary);color:#fff;border:none;font-size:11px;font-weight:600;cursor:pointer;transition:all .2s}
.promo-copy-btn:hover{filter:brightness(1.15)}
.promo-expiry{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);margin-top:6px;text-align:right}

/* MEMBERSHIP TIERS CARD */
.tiers-row{padding:10px 16px 14px;display:flex;gap:10px;position:relative;z-index:3;overflow-x:auto;scrollbar-width:none}
.tiers-row::-webkit-scrollbar{display:none}
.tier-card{flex:1;min-width:140px;padding:14px;border-radius:var(--radius-sm);background:var(--glass-bg);border:1px solid var(--glass-border);text-decoration:none;transition:all .2s;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.tier-card:hover{background:var(--glass-hover);transform:translateY(-2px)}
.tier-card.featured{border-color:var(--stargaze-primary);background:rgba(167,139,250,.06);box-shadow:0 0 12px rgba(167,139,250,.15);position:relative;overflow:visible}
/* Phase 6d (QA #12 Bug F): explicit "Featured" ribbon. Sits at the top of
   the featured tier card so users read "this is the recommended tier" at a
   glance instead of having to infer it from a subtle color shift. */
.tier-featured-ribbon{position:absolute;top:-10px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,var(--stargaze-primary,#a78bfa),#ec4899);color:#fff;font-size:10px;font-weight:700;letter-spacing:.4px;padding:4px 12px;border-radius:100px;box-shadow:0 4px 12px rgba(167,139,250,.35);white-space:nowrap;pointer-events:none;font-family:var(--hubble-font,'Outfit',sans-serif);z-index:2}
.tier-name{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--text-primary);letter-spacing:.5px;text-transform:uppercase}
.tier-price{font-size:22px;font-weight:800;color:var(--text-primary)}
.tier-price-sub{font-size:11px;font-weight:400;color:var(--text-dim)}
.tier-perks{font-size:11px;color:var(--text-dim);line-height:1.6;margin:6px 0;text-align:left;width:100%}
.tier-cta{padding:6px 18px;border-radius:var(--radius-xs);background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-secondary);font-size:11px;font-weight:600;margin-top:auto;transition:all .2s}
.tier-card.featured .tier-cta{background:var(--stargaze-primary);border-color:var(--stargaze-primary);color:#fff}

/* COLLAB CARD */
.collab-inner{padding:10px 16px 14px;display:flex;gap:12px;align-items:flex-start;position:relative;z-index:3}
.collab-avatar{width:48px;height:48px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);overflow:hidden;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:24px}
.collab-avatar img{width:100%;height:100%;object-fit:cover}
.collab-name{font-size:14px;font-weight:700;color:var(--text-primary)}
.collab-handle{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--text-dim);margin-bottom:4px}
.collab-bio{font-size:12px;color:var(--text-secondary);line-height:1.5}

/* TEAM TRAY (Collaboration Decks. Phase 3) */
.team-chin{display:flex;align-items:center;justify-content:center;gap:6px;padding:6px 12px;cursor:pointer;background:var(--glass-bg);border-top:1px solid var(--glass-border);border-radius:0 0 var(--radius-sm) var(--radius-sm);font-size:11px;color:var(--text-secondary);transition:background var(--dur-fast) var(--ease)}
.team-chin:hover{background:var(--glass-hover)}
.team-chin.open .chin-chevron{transform:rotate(180deg)}
.chin-chevron{transition:transform var(--dur-normal) var(--ease);display:inline-block}
.chin-label{font-weight:500}
.team-tray{display:grid;grid-template-rows:0fr;transition:grid-template-rows var(--dur-normal) var(--ease);overflow:hidden}
.team-tray.open{grid-template-rows:1fr}
.team-tray>.team-grid{min-height:0}
.team-grid{display:flex;flex-wrap:wrap;gap:8px;padding:12px 16px;justify-content:center}
.team-avatar{width:36px;height:36px;border-radius:50%;overflow:hidden;border:2px solid var(--glass-border);transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);text-decoration:none;display:flex;align-items:center;justify-content:center;background:var(--glass-bg);color:var(--text-primary);font-size:14px;font-weight:600}
.team-avatar img{width:100%;height:100%;object-fit:cover}
.team-avatar:hover{transform:scale(1.1);border-color:var(--stargaze-primary)}
.team-initial{font-size:14px;font-weight:600;color:var(--text-primary)}
.collab-deck-badge{font-size:10px;font-weight:600;letter-spacing:.5px;padding:2px 8px;border-radius:9999px;background:rgba(167,139,250,.15);color:var(--stargaze-primary);text-transform:uppercase;margin-left:4px}

/* INLINE EDIT MODE */
.edit-mode .link-card,.edit-mode .profile,.edit-mode .universe-hub-header,.edit-mode .section-header{position:relative}
.edit-mode .link-card{cursor:pointer;-webkit-tap-highlight-color:transparent}
.edit-mode .link-card.edit-selected{box-shadow:0 0 0 2px var(--stargaze-primary);border-color:var(--stargaze-primary)}
.edit-card-toolbar{position:absolute;top:-42px;right:0;z-index:20;display:flex;gap:4px;padding:4px;border-radius:10px;background:rgba(22,16,40,.95);backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.12);box-shadow:0 4px 16px rgba(0,0,0,.4);animation:editToolbarIn .15s ease}
@keyframes editToolbarIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.edit-card-toolbar button{width:34px;height:34px;border-radius:8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .12s;-webkit-tap-highlight-color:transparent}
.edit-card-toolbar button:active{transform:scale(.88)}
.edit-card-toolbar button:hover{background:rgba(255,255,255,.1);color:#fff}
.edit-card-toolbar button svg{width:15px;height:15px}
.edit-mode .link-card.edit-dragging{opacity:.15;transform:scale(.97);transition:opacity .15s,transform .15s}
.edit-drag-ghost{position:fixed;z-index:300;pointer-events:none;opacity:.9;transform:rotate(1deg);box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 2px rgba(167,139,250,.35);border-radius:var(--radius-sm);max-width:340px;overflow:hidden;background:var(--bg-panel);border:1px solid rgba(167,139,250,.2)}
.edit-drag-ghost-deck{position:fixed;z-index:300;pointer-events:none;opacity:.9;padding:14px 18px;border-radius:var(--radius-sm);background:rgba(22,16,40,.95);backdrop-filter:blur(12px);border:1px solid rgba(167,139,250,.2);box-shadow:0 20px 60px rgba(0,0,0,.5);max-width:320px;transform:rotate(1deg)}
body.edit-dragging-active{user-select:none;-webkit-user-select:none;cursor:grabbing!important}
body.edit-dragging-active *{cursor:grabbing!important}
.edit-drop-placeholder{border:2px dashed rgba(167,139,250,.4);border-radius:var(--radius-sm);background:rgba(167,139,250,.04);margin:6px 0;transition:height .15s ease;box-sizing:border-box}
.edit-mode .deck-section.edit-dragging{opacity:.15;transform:scale(.97);transition:opacity .15s,transform .15s}

/* PROFANITY FILTER */
.profanity-blur{filter:blur(4px);user-select:none;cursor:help;transition:filter .3s;display:inline}
.profanity-blur:hover{filter:blur(2px)}
.profanity-warn{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 6px;border-radius:100px;background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2);letter-spacing:.3px;margin-left:4px;vertical-align:middle}

/* Lore inline expansion */
.lore-expand{overflow:hidden;max-height:0;opacity:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),opacity .35s ease}
.lore-expand.open{max-height:400px;opacity:1;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.15) transparent}
.lore-expand.open::-webkit-scrollbar{width:4px}
.lore-expand.open::-webkit-scrollbar-track{background:transparent}
.lore-expand.open::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18);border-radius:10px}
.lore-expand.open::-webkit-scrollbar-button{display:none;height:0;width:0}
.lore-expand-inner{padding:16px 16px 20px;border-top:1px solid var(--glass-border);background:rgba(0,0,0,.2)}
.lore-expand-brand{font-family:'JetBrains Mono',monospace;font-size:9px;letter-spacing:1px;text-transform:uppercase;margin-bottom:6px;opacity:.7}
.lore-expand-title{font-size:20px;font-weight:800;color:var(--text-primary);letter-spacing:-.4px;margin-bottom:2px}
.lore-expand-subtitle{font-size:12px;color:var(--text-secondary);margin-bottom:14px}
.lore-expand-image{width:100%;border-radius:var(--radius-sm);margin-bottom:14px;overflow:hidden}
.lore-expand-image img{width:100%;height:160px;object-fit:cover}
.lore-expand-body{font-size:13px;color:var(--text-secondary);line-height:1.75}
.lore-expand-body p{margin-bottom:10px}
.lore-expand-tags{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}
.lore-tag{font-family:'JetBrains Mono',monospace;font-size:9px;padding:3px 8px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-dim);letter-spacing:.3px}
.lore-expand-link{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-xs);font-size:12px;font-weight:600;text-decoration:none;margin-top:12px;transition:all .2s}
.lore-expand-link:hover{filter:brightness(1.15);transform:translateY(-1px)}
.lore-btn.active{background:rgba(167,139,250,.2);color:var(--stargaze-primary);border-color:rgba(167,139,250,.4)}
/* Inline deck universe map */
.deck-map{margin-top:12px;border-radius:var(--radius-md);border:1px solid var(--glass-border);background:rgba(0,0,0,.2);overflow:hidden}
.deck-map svg{width:100%;display:block;border-radius:var(--radius-md) var(--radius-md) 0 0}
.deck-map-legend{display:flex;flex-wrap:wrap;gap:6px;padding:10px 14px;justify-content:center}
.deck-map-legend-item{display:flex;align-items:center;gap:4px;font-size:10px;color:var(--text-secondary);padding:3px 8px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border)}
.deck-map-legend-dot{width:6px;height:6px;border-radius:50%}
.deck-map-body{overflow:hidden;max-height:0;transition:max-height .4s cubic-bezier(.22,1,.36,1);opacity:0}
.deck-map-body.open{max-height:600px;opacity:1;transition:max-height .4s cubic-bezier(.22,1,.36,1),opacity .3s}

/* Lore button on cards */
.lore-btn{flex-shrink:0;width:24px;height:24px;border-radius:50%;background:var(--glass-bg);border:1px solid var(--glass-border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-dim);transition:all .2s;font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;letter-spacing:0}
.lore-btn:hover{background:var(--glass-hover);color:var(--text-primary)}

/* RECAP CARD */
.recap-inner{padding:0 16px 14px;position:relative;z-index:3}
.recap-chapter{border:1px solid var(--glass-border);border-radius:10px;margin-bottom:8px;overflow:hidden}
.recap-chap-header{display:flex;align-items:center;gap:8px;padding:10px 12px;cursor:pointer;transition:background .2s}
.recap-chap-header:hover{background:var(--glass-hover)}
.recap-chap-num{font-family:'JetBrains Mono',monospace;font-size:9px;padding:2px 7px;border-radius:100px;font-weight:700;letter-spacing:.5px;flex-shrink:0}
.recap-chap-title{font-size:13px;font-weight:600;color:var(--text-primary);flex:1}
.recap-chap-spoiler{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 7px;border-radius:100px;background:rgba(239,68,68,.1);color:#ef4444;border:1px solid rgba(239,68,68,.2);letter-spacing:.4px}
.recap-chap-chevron{transition:transform .3s;color:var(--text-dim)}
.recap-chap-chevron svg{width:14px;height:14px}
.recap-chap-body{max-height:0;overflow:hidden;transition:max-height .4s cubic-bezier(.22,1,.36,1)}
/* Round 3 Bug 19: tester reported the recap content was clipped when
   the chapter had no Blur Spoiler. Root cause: open max-height was
   600px, so any chapter longer than that visually cut off mid-paragraph.
   Bumped to 5000px — large enough for any plausible chapter while still
   keeping the smooth max-height transition (a true `none` would break
   the open/close animation). */
.recap-chap-body.open{max-height:5000px}
.recap-chap-text{padding:10px 12px;font-size:12px;color:var(--text-secondary);line-height:1.7;border-top:1px solid var(--glass-border)}
.recap-chap-text.spoiler-blur{filter:blur(8px);user-select:none;transition:filter .3s;cursor:pointer}
.recap-chap-text.spoiler-blur:hover{filter:blur(5px)}
/* Phase 6c (QA #12 Bug 9b): reveal cascades from the .recap-chapter container
   since the button lives OUTSIDE the collapsible body now. When a user clicks
   reveal, spoiler-reveal gets toggled on the chapter, which cancels blur on
   every blurred descendant regardless of position. */
.recap-chapter.spoiler-reveal .recap-chap-text.spoiler-blur{filter:none;user-select:auto;cursor:auto}
/* Phase 6c (QA #12 Bug 9a): button now renders ABOVE the chapter header so
   readers see the spoiler warning BEFORE clicking to expand the chapter.
   Styled as a pill so it reads as an action, not a footer label. */
.recap-spoiler-reveal-btn{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;font-size:11px;font-weight:600;color:var(--text-primary);background:rgba(239,68,68,.08);border:1px solid rgba(239,68,68,.2);border-radius:var(--card-inner-radius,8px);padding:8px 12px;margin:8px 12px 0;cursor:pointer;transition:background .2s,border-color .2s;font-family:var(--hubble-font,'Outfit',sans-serif);letter-spacing:.2px}
.recap-spoiler-reveal-btn:hover{background:rgba(239,68,68,.14);border-color:rgba(239,68,68,.35)}
.recap-chapter.spoiler-reveal > .recap-spoiler-reveal-btn{background:rgba(74,222,128,.08);border-color:rgba(74,222,128,.2);color:var(--text-secondary)}
.recap-chapter.spoiler-reveal > .recap-spoiler-reveal-btn:hover{background:rgba(74,222,128,.14)}

/* CHARACTER OF THE WEEK CARD */
.cotw-inner{position:relative;z-index:3;overflow:hidden}
.cotw-bg{position:absolute;inset:0;opacity:.08;background-size:cover;background-position:center;filter:blur(20px);z-index:0}
.cotw-content{display:flex;gap:14px;padding:8px 16px 14px;position:relative;z-index:1}
.cotw-art{width:80px;height:100px;border-radius:12px;overflow:hidden;flex-shrink:0;position:relative}
.cotw-art img{width:100%;height:100%;object-fit:cover}
.cotw-art-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:32px;opacity:.15}
.cotw-info{flex:1}
.cotw-week-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 8px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-dim);letter-spacing:.5px;display:inline-block;margin-bottom:5px}
.cotw-name{font-size:16px;font-weight:800;color:var(--text-primary);letter-spacing:-.3px;margin-bottom:4px}
.cotw-role{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);letter-spacing:.5px;margin-bottom:6px;text-transform:uppercase}
.cotw-bio{font-size:12px;color:var(--text-secondary);line-height:1.6}
.cotw-link{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font-size:11px;font-weight:600;text-decoration:none;opacity:.8;transition:opacity .2s}
.cotw-link:hover{opacity:1}
.cotw-timer{font-family:'JetBrains Mono',monospace;font-size:9px;color:var(--text-dim);padding:6px 16px 10px;border-top:1px solid var(--glass-border);position:relative;z-index:1;display:flex;align-items:center;gap:6px}
.cotw-timer-bar{flex:1;height:2px;background:var(--glass-border);border-radius:1px;overflow:hidden}
.cotw-timer-fill{height:100%;border-radius:1px;transition:width 1s linear}

/* UNIVERSE ADMIN TAB */
.ro-admin-step{display:flex;gap:10px;padding:10px 12px;border-radius:var(--radius-sm);background:var(--glass-bg);border:1px solid var(--glass-border);margin-bottom:6px;align-items:flex-start}
.ro-admin-step-num{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;color:var(--text-dim);min-width:20px;padding-top:2px}
.ro-admin-step-info{flex:1}

/* LORE FIELD IN CARD EDITOR */
.lore-fields{background:rgba(167,139,250,.04);border:1px solid rgba(167,139,250,.1);border-radius:var(--radius-xs);padding:14px;margin-top:4px}
.lore-fields label{color:rgba(167,139,250,.8)!important}

/* ═══ BUILDER UX IMPROVEMENTS ═══ */
/* Collapsible Editor Sections */
.editor-section{margin-bottom:2px}
.editor-section-header{display:flex;align-items:center;gap:8px;padding:12px 14px;background:var(--glass-bg);border:1px solid var(--glass-border);border-radius:var(--radius-xs);cursor:pointer;transition:all .2s;user-select:none}
.editor-section-header:hover{background:rgba(255,255,255,.06)}
.editor-section-header.open{border-radius:var(--radius-xs) var(--radius-xs) 0 0;border-bottom-color:transparent}
.editor-section-header svg{width:12px;height:12px;stroke:var(--text-dim);transition:transform .2s;flex-shrink:0}
.editor-section-header.open svg{transform:rotate(90deg)}
.editor-section-header .es-title{font-size:12px;font-weight:600;color:var(--text-primary);flex:1}
.editor-section-header .es-badge{font-size:9px;padding:2px 8px;border-radius:100px;background:rgba(167,139,250,.12);color:rgba(167,139,250,.8);font-family:'JetBrains Mono',monospace;letter-spacing:.3px}
.editor-section-body{display:none;padding:14px;border:1px solid var(--glass-border);border-top:none;border-radius:0 0 var(--radius-xs) var(--radius-xs);background:rgba(0,0,0,.15)}
.editor-section-body.open{display:block}

/* Visual Card Type Picker */
/* Search & Filter Bar */
.cards-toolbar{display:flex;gap:8px;margin-bottom:12px;flex-wrap:wrap;align-items:center}
.cards-search{flex:1;min-width:140px;padding:8px 12px;border-radius:var(--radius-xs);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-primary);font-size:12px;font-family:inherit;outline:none;transition:border-color .2s}
.cards-search:focus{border-color:var(--stargaze-primary)}
.cards-search::placeholder{color:var(--text-dim)}
.filter-pill{padding:4px 10px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-secondary);font-size:10px;font-weight:500;cursor:pointer;transition:all .2s;white-space:nowrap}
.filter-pill:hover,.filter-pill.active{background:rgba(167,139,250,.12);border-color:var(--stargaze-primary);color:var(--text-primary)}

/* Card Templates */
.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px;margin-bottom:16px}
.template-card{padding:12px;border-radius:var(--radius-xs);border:1px solid var(--glass-border);background:var(--glass-bg);cursor:pointer;transition:all .2s}
.template-card:hover{border-color:rgba(167,139,250,.4);background:rgba(167,139,250,.06);transform:translateY(-1px)}
.template-card-icon{font-size:24px;margin-bottom:6px}
.template-card-name{font-size:12px;font-weight:600;color:var(--text-primary);margin-bottom:2px}
.template-card-desc{font-size:10px;color:var(--text-dim);line-height:1.4}

/* Inline Sub-Editor (replaces JSON textareas) */
.sub-editor{border:1px solid var(--glass-border);border-radius:var(--radius-xs);overflow:hidden}
.sub-editor-row{display:flex;gap:8px;padding:8px 10px;border-bottom:1px solid var(--glass-border);align-items:center;background:rgba(0,0,0,.1)}
.sub-editor-row:last-child{border-bottom:none}
.sub-editor-row .form-input{margin:0;font-size:11px;padding:6px 8px}
.sub-editor-add{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px;font-size:11px;color:var(--stargaze-primary);cursor:pointer;transition:background .2s;border:none;background:none;width:100%}
.sub-editor-add:hover{background:rgba(167,139,250,.06)}
.sub-editor-del{width:24px;height:24px;border-radius:6px;border:none;background:none;color:var(--danger);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;transition:background .2s}
.sub-editor-del:hover{background:rgba(239,68,68,.1)}

/* Admin Dashboard Landing */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.dash-card{padding:14px;border-radius:var(--radius-sm);border:1px solid var(--glass-border);background:var(--glass-bg);text-align:center}
.dash-card-num{font-size:24px;font-weight:800;color:var(--text-primary);font-family:'JetBrains Mono',monospace}
.dash-card-label{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:4px}
.dash-card-trend{font-size:10px;margin-top:4px}
.dash-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.dash-action-btn{padding:10px;border-radius:var(--radius-xs);border:1px solid var(--glass-border);background:var(--glass-bg);color:var(--text-primary);font-size:11px;font-weight:500;cursor:pointer;transition:all .2s;text-align:left;display:flex;align-items:center;gap:8px}
.dash-action-btn:hover{background:rgba(167,139,250,.08);border-color:rgba(167,139,250,.3)}
.dash-action-btn span{font-size:16px}

/* Undo bar */
.undo-bar{position:fixed;bottom:60px;left:50%;transform:translateX(-50%);background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:100px;padding:8px 16px;display:flex;align-items:center;gap:10px;font-size:12px;color:var(--text-secondary);z-index:250;box-shadow:0 8px 32px rgba(0,0,0,.4);backdrop-filter:blur(20px);animation:fadeUp .3s ease}
.undo-bar button{padding:4px 12px;border-radius:100px;border:1px solid var(--glass-border);background:rgba(167,139,250,.12);color:var(--stargaze-primary);font-size:11px;font-weight:600;cursor:pointer}

/* ═══ PHASE 3 — ENGAGEMENT & GROWTH ═══ */
/* NUDGE TOAST */
.nudge-toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%) translateY(20px);z-index:300;opacity:0;pointer-events:none;transition:all .35s cubic-bezier(.22,1,.36,1);white-space:nowrap}
.nudge-toast.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.nudge-inner{display:flex;align-items:center;gap:10px;padding:10px 16px 10px 12px;background:var(--bg-panel);border:1px solid var(--glass-border);border-radius:100px;backdrop-filter:blur(20px);box-shadow:0 8px 32px rgba(0,0,0,.3);font-size:13px;font-weight:500;color:var(--text-primary);cursor:default}
.nudge-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.nudge-link{font-size:12px;font-weight:700;padding:4px 12px;border-radius:100px;text-decoration:none;transition:all .2s;flex-shrink:0;margin-left:4px}
.nudge-link:hover{filter:brightness(1.15)}
.nudge-close{width:20px;height:20px;border-radius:50%;background:transparent;border:none;cursor:pointer;color:var(--text-dim);font-size:16px;display:flex;align-items:center;justify-content:center;transition:color .2s;line-height:1;padding:0;margin-left:2px}
.nudge-close:hover{color:var(--text-primary)}
/* SHARE IMAGE GENERATOR */
.share-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:16px}
.share-preview-canvas{border-radius:var(--radius-sm);border:1px solid var(--glass-border);box-shadow:0 8px 32px rgba(0,0,0,.4);max-width:180px;width:100%}
.share-style-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.share-style-btn{padding:6px 14px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.share-style-btn.active,.share-style-btn:hover{background:rgba(167,139,250,.15);border-color:rgba(167,139,250,.3);color:var(--stargaze-primary)}
/* REFERRAL STATS */
.ref-bar-wrap{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.ref-bar-row{display:flex;align-items:center;gap:8px;font-size:12px}
.ref-bar-label{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-secondary);width:80px;flex-shrink:0;text-transform:lowercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ref-bar-track{flex:1;height:6px;background:rgba(255,255,255,.06);border-radius:3px;overflow:hidden}
.ref-bar-fill{height:100%;border-radius:3px;background:var(--stargaze-primary);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ref-bar-count{font-family:'JetBrains Mono',monospace;font-size:10px;color:var(--text-dim);width:24px;text-align:right;flex-shrink:0}
/* WEBHOOK BUILDER */
.webhook-item{padding:12px 14px;border-radius:var(--radius-sm);background:var(--glass-bg);border:1px solid var(--glass-border);margin-bottom:8px;transition:border-color .2s}
.webhook-item.enabled{border-color:rgba(34,197,94,.25)}
.webhook-item-header{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.webhook-item-name{font-size:13px;font-weight:600;color:var(--text-primary);flex:1}
.webhook-trigger-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:2px 8px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-dim);letter-spacing:.5px;text-transform:uppercase}
.toggle-switch{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle-switch input{opacity:0;width:0;height:0;position:absolute}
.toggle-slider{position:absolute;inset:0;background:rgba(255,255,255,.1);border-radius:100px;cursor:pointer;transition:background .2s;border:1px solid var(--glass-border)}
.toggle-slider::after{content:'';position:absolute;width:14px;height:14px;border-radius:50%;background:#fff;top:2px;left:2px;transition:transform .2s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle-switch input:checked+.toggle-slider{background:var(--success);border-color:transparent}
.toggle-switch input:checked+.toggle-slider::after{transform:translateX(16px)}
/* UTM BADGE */
.utm-badge{font-family:'JetBrains Mono',monospace;font-size:8px;padding:1px 6px;border-radius:4px;background:rgba(56,189,248,.1);border:1px solid rgba(56,189,248,.2);color:var(--console-primary);letter-spacing:.3px;display:inline-block;vertical-align:middle;margin-left:4px}
@media(max-width:480px){.orb{display:none}}

/* ═══ DESKTOP & LAPTOP OPTIMIZATION ═══ */

/* Tablet landscape — widen container, 2-col cards */
@media(min-width:768px){
  .container{max-width:720px;padding:60px 32px 80px}
  .profile-bio{max-width:480px}
  .section-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
  .link-card{min-height:0}
  .decks-wrap{gap:40px}
  .section-header{padding:16px 18px}
  .section-title{font-size:18px}
  .filter-bar{max-width:720px}
  .toolbar{right:0;padding:10px 8px}
  .toolbar .tb-btn{width:44px;height:44px}
  .footer{max-width:720px}
  /* Admin panel wider */
  .panel{max-width:640px;padding:36px 32px}
  .admin-tabs{flex-wrap:wrap;gap:4px}
  /* Universe — tablet lets content breathe */
  #universeMapWrap{max-width:none}
  #readingOrderWrap{max-width:none}
  #universeCalWrap{max-width:none}
  .umap-legend{max-width:none}
}

/* Desktop — full-width multi-column layout */
@media(min-width:1024px){
  .container{max-width:960px;padding:72px 48px 96px}
  .profile{flex-direction:row;text-align:left;align-items:center;gap:24px}
  .profile-name{text-align:left}
  .profile-handle{text-align:left}
  .profile-bio{text-align:left;max-width:560px}
  .avatar-ring{flex-shrink:0}
  .social-row{justify-content:flex-start}
  .visitor-count{text-align:left}
  .section-cards{grid-template-columns:repeat(2,1fr);gap:14px}
  .section-header{padding:18px 22px}
  .filter-bar{max-width:960px}
  /* Round 3 Bug 17: with enough decks the filter row overflows the
     960px container. Plain `justify-content:center` then centers the
     content as if it fit, which on an overflowing flex container
     shifts the first item to negative x (inaccessible — you can't
     scroll into negative scrollLeft). Result: first deck looks
     "disappeared." `safe center` keeps the centering when it fits
     but falls back to flex-start whenever it would overflow, so
     deck 1 stays scrollable into view. */
  .filter-track{justify-content:safe center;gap:4px}
  .footer{max-width:960px;flex-direction:row;justify-content:space-between;align-items:center;gap:20px}
  .footer-qr{flex-direction:row;gap:12px}
  /* Bigger orbs */
  .orb{width:500px;height:500px}
  /* Panel side-sheet feel */
  .panel{max-width:720px;padding:40px 36px}
  .admin-tabs{gap:2px}
  .admin-tab,.admin-tab-btn{padding:10px 12px;font-size:12px}
  /* Dashboard grid wider */
  .dash-grid{grid-template-columns:repeat(3,1fr)}
  .dash-actions{grid-template-columns:repeat(4,1fr)}
  /* Type picker 6 columns */
  .type-grid{grid-template-columns:repeat(6,1fr)}
  /* Templates grid */
  .template-grid{grid-template-columns:repeat(3,1fr)}
  /* ── Desktop Hub: full-width content ── */
  #universeMapWrap{max-width:none}
  #readingOrderWrap{max-width:none}
  #universeCalWrap{max-width:none}
  .umap-legend{max-width:none}
  /* ── Desktop Hub: thicker animated border ── */
  /* Phase 6b (QA #12 Bug C): consume --hub-outer-radius per Invariant #2 */
  .hub-unit{padding:2px}
  .hub-unit-inner{border-radius:calc(var(--hub-outer-radius,16px) - 2px)}
  /* ── Desktop: profile socials bigger gaps ── */
  .profile-socials{gap:8px}
  .profile-social-btn{width:32px;height:32px}
  /* ── Desktop: filter bar active state stronger ── */
  .filter-tab.active{background:rgba(167,139,250,.18)!important;box-shadow:0 0 0 1.5px rgba(167,139,250,.3);font-weight:700}
  /* ── Desktop: deck lip left-align ── */
  .deck-lip{justify-content:flex-start}
}

/* Large desktop — centered luxury layout */
@media(min-width:1280px){
  .container{max-width:1120px;padding:80px 56px 100px}
  .section-cards{grid-template-columns:repeat(2,1fr);gap:16px}
  .profile{gap:32px}
  .profile-name{font-size:30px}
  .profile-bio{font-size:15px;max-width:700px}
  .decks-wrap{gap:48px}
  .section-title{font-size:20px}
  .section-subtitle{font-size:12px}
  /* Admin */
  .panel{max-width:800px}
  .dash-grid{grid-template-columns:repeat(6,1fr)}
  /* Type picker */
  .type-grid{grid-template-columns:repeat(7,1fr)}
  /* ── Large desktop: Hub content full container ── */
  #universeMapWrap{max-width:none}
  #readingOrderWrap{max-width:none}
  #universeCalWrap{max-width:none}
  .umap-legend{max-width:none}
  /* ── Large desktop: calendar event cards 2-col ── */
  .rcal-events-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  /* ── Large desktop: shop grid 3-col ── */
  .shop-grid{grid-template-columns:repeat(3,1fr)!important}
  /* ── Large desktop: profile socials more space ── */
  .profile-socials{gap:10px}
  .profile-social-btn{width:34px;height:34px}
}

/* Ultrawide — constrain to readable width, add breathing room */
@media(min-width:1600px){
  .container{max-width:1200px}
  .bg-canvas::before{width:140vmax;height:140vmax;top:-30%;left:-20%}
}

/* Desktop hover enhancements */
@media(hover:hover){
  .link-card{transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s}
  .link-card:hover{transform:translateY(-2px)}
  .section-header{transition:transform .2s}
  .section-header:hover{transform:translateY(-1px)}
  /* Explicit transition list (was `transition:all .2s`) -- the wildcard
     also transitioned border-radius, which interacts badly when the
     body's filter-shape-* class changes the underlying var(--filter-
     outer-radius). Chromium reports the pre-transition computed value
     for the full duration so the user sees the OLD shape after picking
     a new one (visible as Round 4 Bug 5: Rounded -> Pill swap). Listing
     properties explicitly keeps hover transitions but lets border-radius
     update synchronously when the shape var changes. */
  .filter-tab{transition:background .2s,color .2s,border-color .2s,transform .2s}
  .tb-btn{transition:background .2s,color .2s,border-color .2s,transform .2s}
  .tb-btn:hover{background:rgba(255,255,255,.1)}
}

/* Desktop cards — span full-width types across grid */
@media(min-width:768px){
  .link-card:has(.hero-banner){grid-column:1/-1}
  .link-card:has(.lore-expand.open){grid-column:1/-1}
  .link-card:has(.blog-body){grid-column:1/-1}
  .link-card:has(.testimonial-inner){grid-column:1/-1}
  .link-card:has(.video-reel-wrap){grid-column:1/-1}
  .link-card:has(.recap-chapters){grid-column:1/-1}
  .link-card:has(.rcal-inner){grid-column:1/-1}
  .link-card:has(.email-capture-form){grid-column:1/-1}
  .link-card:has(.poll-inner){grid-column:1/-1}
  .link-card:has(.membership-tiers){grid-column:1/-1}
  .link-card:has(.content-cal-grid){grid-column:1/-1}
  .link-card:has(.social-proof-inner){grid-column:1/-1}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .bg-canvas::before{animation:none!important}
  .avatar-ring{animation:none!important;filter:none!important}
}


/* ═══ SHOP GRID ═══ */
.shop-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;padding:4px 0}
.shop-item{display:flex;flex-direction:column;border-radius:12px;background:var(--glass-bg,rgba(255,255,255,.04));border:1px solid var(--glass-border,rgba(255,255,255,.08));overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s,border-color .2s;position:relative}
.shop-item:hover{transform:translateY(-2px);border-color:rgba(167,139,250,.25)}
.shop-img{height:100px;background:rgba(167,139,250,.06);display:flex;align-items:center;justify-content:center;overflow:hidden}
.shop-img img{width:100%;height:100%;object-fit:cover}
.shop-img-placeholder{font-size:28px;font-weight:700;color:var(--stargaze-primary,#a78bfa);opacity:.3}
.shop-badge{position:absolute;top:8px;right:8px;padding:2px 8px;border-radius:100px;font-size:9px;font-weight:700;letter-spacing:.5px;background:var(--stargaze-primary,#a78bfa);color:#fff}
.shop-info{padding:12px 14px}
.shop-title{font-size:13px;font-weight:600;color:var(--text-primary,#f0eef6);line-height:1.3;margin-bottom:4px}
.shop-subtitle{font-size:11px;color:var(--text-dim,rgba(255,255,255,.5));margin-bottom:8px;line-height:1.4}
.shop-bottom{display:flex;justify-content:space-between;align-items:center}
.shop-price{font-size:14px;font-weight:700;color:var(--stargaze-primary,#a78bfa)}
.shop-price.free{color:var(--success,#4ade80)}
.shop-cta{font-size:10px;padding:4px 12px;border-radius:100px;background:rgba(167,139,250,.15);color:var(--stargaze-primary,#a78bfa);font-weight:600}
@media(max-width:480px){.shop-grid{grid-template-columns:1fr}}

/* ═══ HUB UNIT — animated border wrapper ═══
   Phase 6b (QA #12 Bug C): base rules must consume --hub-outer-radius per
   Invariant #2 so .hub-shape-* body class flips propagate here directly,
   not only via the override block at the bottom of this file. */
.hub-unit{border-radius:var(--hub-outer-radius,16px);padding:1px;background:conic-gradient(from var(--race-angle) at 50% 50%,rgba(167,139,250,.25) 0deg,rgba(74,222,128,.15) 90deg,rgba(34,211,238,.2) 180deg,rgba(244,114,182,.15) 270deg,rgba(167,139,250,.25) 360deg);animation:raceBorder 6s linear infinite}
.hub-unit-inner{border-radius:calc(var(--hub-outer-radius,16px) - 1px);overflow:hidden;background:var(--bg-body,#06040e)}
.hub-unit .universe-hub-header{border-radius:0!important;border:none!important;background:transparent!important}
.universe-hub-title{font-size:20px!important;font-weight:800!important;background:linear-gradient(135deg,#f0edf8 30%,#a78bfa 70%,#22d3ee)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important;background-clip:text!important}
.universe-hub-tabs{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
.universe-hub-tabs .filter-tab{text-align:center;border-radius:10px!important;padding:8px 0!important}
.universe-hub-tabs .filter-tab.active{background:rgba(167,139,250,.15)!important;border-color:rgba(167,139,250,.25)!important}
/* Desktop: Hub tabs → 4-column horizontal row (must come AFTER base rule) */
@media(min-width:1024px){.universe-hub-tabs{grid-template-columns:repeat(4,1fr)!important}.universe-hub-tabs .filter-tab{padding:10px 6px!important;font-size:13px}}
@media(min-width:1280px){.universe-hub-tabs .filter-tab{padding:12px 8px!important;font-size:14px}}

/* ═══ CARD STYLE VARIANTS ═══ */
/* Style A: Clean Minimal — thin left accent bar */
.card-style-a .link-card{border-left:3px solid var(--bp,var(--stargaze-primary))}
.card-style-a .link-card .section-badge{display:none}

/* Style B: Elevated Glass — gradient top edge */
.card-style-b .link-card{overflow:hidden;position:relative}
.card-style-b .link-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,var(--bp,var(--stargaze-primary)) 0%,transparent 100%)}

/* Style C: Content-Forward — subtle tinted background */
.card-style-c .link-card{background:linear-gradient(135deg,rgba(var(--bp-r,167),var(--bp-g,139),var(--bp-b,250),.04),transparent)!important}

/* Style D: Compact List — minimal padding, dot indicator */
.card-style-d .link-card{padding:10px 14px!important;min-height:0!important}
.card-style-d .link-card .link-card-main{padding:0!important}
.card-style-d .link-card .section-badge{width:8px!important;height:8px!important;border-radius:50%!important;min-width:8px!important}

/* ═══ DECK UNIT — Racing outline wraps header + lip ═══
   Phase 6b (QA #12 Bug B): base rules must consume --card-outer-radius
   per Invariant #2 so .shape-* body class flips propagate here directly,
   not only via the override block at the bottom of this file. */
/* Phase 19j step 2 — racing animation duration is now driven by
   --deck-race-duration (set on the .deck-section via inline style by
   modules/publicRendering.js). Defaults to 4s if unset, matching the
   pre-Phase-19j behaviour. */
.deck-unit{border-radius:var(--card-outer-radius,14px);padding:1px;background:conic-gradient(from var(--race-angle) at 50% 50%,var(--bg2,rgba(255,255,255,.08)) 0deg,var(--bg2,rgba(255,255,255,.06)) 260deg,var(--section-accent,rgba(167,139,250,1)) 320deg,var(--bg1,rgba(255,255,255,.6)) 345deg,var(--bg2,rgba(255,255,255,.08)) 360deg);animation:raceBorder var(--deck-race-duration,4s) linear infinite;margin-bottom:14px}
.deck-unit-inner{border-radius:calc(var(--card-outer-radius,14px) - 1px);overflow:hidden;background:var(--bg-body,#06040e)}
.deck-unit .section-header{border-radius:0!important;border:none!important;background:var(--bg-header,rgba(255,255,255,.02))!important;animation:none!important;margin-bottom:0!important}

/* ═══ DECK LIP — always expanded socials strip ═══ */
.deck-lip{padding:8px 18px 10px;border-top:1px solid rgba(255,255,255,0.04);background:linear-gradient(135deg,rgba(var(--bp-r,167),var(--bp-g,139),var(--bp-b,250),.04),transparent);display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.deck-social-btn{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:var(--bp,var(--text-secondary));transition:all .25s;text-decoration:none}
.deck-social-btn:hover{background:rgba(255,255,255,0.12);color:var(--text-primary);transform:scale(1.1)}
.deck-social-btn svg{width:14px;height:14px}

/* ═══ PROFILE SOCIALS + SHARE ═══ */
.profile-socials{display:flex;align-items:center;gap:6px;margin-top:10px;flex-wrap:wrap}
.profile-social-btn{width:28px;height:28px;border-radius:50%;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:center;color:var(--text-secondary);transition:all .25s;text-decoration:none}
.profile-social-btn:hover{background:rgba(255,255,255,0.12);color:var(--text-primary);transform:scale(1.08)}
.profile-social-btn svg{width:13px;height:13px}
.profile-handle-row{display:flex;align-items:center;gap:8px;margin-bottom:10px;justify-content:center;flex-wrap:wrap}
.profile-handle-row .profile-handle{margin-bottom:0}
.profile-share-btn{padding:4px 12px;border-radius:100px;background:rgba(167,139,250,.12);border:1px solid rgba(167,139,250,.2);display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:11px;color:var(--stargaze-primary,#a78bfa);font-weight:500;font-family:var(--hubble-font,'Outfit',sans-serif);transition:background .2s,border-color .2s,color .2s,transform .2s}
.profile-share-btn:hover{background:rgba(167,139,250,.2)}

/* Phase 9c (Roadmap A2): Share menu — fallback when Web Share API isn't
   available. Anchored to the Share button via JS getBoundingClientRect.
   Uses --z-dropdown so it paints above sticky filter bar + deck content
   without colliding with modal/toast layers. */
.share-menu{
  position:fixed;
  z-index:var(--z-dropdown,250);
  min-width:200px;
  padding:6px;
  background:var(--bg-panel,rgba(20,20,20,.92));
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border:1px solid var(--glass-border);
  border-radius:12px;
  box-shadow:0 12px 40px rgba(0,0,0,.4);
  display:flex;
  flex-direction:column;
  gap:2px;
  animation:shareMenuIn .15s cubic-bezier(.22,1,.36,1);
}
@keyframes shareMenuIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}
.share-menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  background:transparent;
  border:none;
  border-radius:8px;
  color:var(--text-primary);
  font:inherit;
  font-family:var(--hubble-font,'Outfit',sans-serif);
  font-size:13px;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease-out;
}
.share-menu-item:hover,
.share-menu-item:focus-visible{
  background:rgba(167,139,250,.12);
  outline:none;
}
.share-menu-item:focus-visible{box-shadow:0 0 0 1.5px rgba(167,139,250,.4) inset}
.share-menu-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  flex-shrink:0;
  color:var(--text-secondary);
}
.share-menu-item:hover .share-menu-icon,
.share-menu-item:focus-visible .share-menu-icon{color:var(--stargaze-primary,#a78bfa)}
.share-menu-label{flex:1;font-weight:500}
html[data-theme="light"] .share-menu{
  background:var(--bg-panel,#fff);
  border-color:rgba(20,14,36,.08);
  box-shadow:0 12px 40px rgba(20,14,36,.12);
}
html[data-theme="light"] .share-menu-item:hover,
html[data-theme="light"] .share-menu-item:focus-visible{
  background:rgba(124,58,237,.08);
}

/* ═══ DESKTOP OVERRIDES (must come AFTER base rules) ═══ */
/* Phase 6b (QA #12 Bug C): consume --hub-outer-radius per Invariant #2 */
@media(min-width:1024px){
  .hub-unit{padding:2px}
  .hub-unit-inner{border-radius:calc(var(--hub-outer-radius,16px) - 2px)}
  .deck-lip{justify-content:flex-start}
  .profile-socials{gap:8px}
  .profile-social-btn{width:32px;height:32px}
  .filter-tab.active{background:rgba(167,139,250,.18)!important;box-shadow:0 0 0 1.5px rgba(167,139,250,.3);font-weight:700}
  .profile-handle-row{justify-content:flex-start}
}
@media(min-width:1280px){
  .profile-socials{gap:10px}
  .profile-social-btn{width:34px;height:34px}
  .profile-bio{max-width:700px}
}

/* ═══ AURORA LIGHT — Component Overrides ═══ */
html[data-theme="light"] body{background:var(--bg-body)}
html[data-theme="light"] .bg-canvas::after{background:radial-gradient(ellipse 80% 50% at 50% 0%,transparent 30%,rgba(245,243,250,.4) 100%)}
html[data-theme="light"] .profile-name{background:linear-gradient(135deg,var(--profile-gradient-start,#0E7490) 0%,var(--stargaze-primary,#7C3AED) 45%,#BE185D 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
html[data-theme="light"] .social-btn{background:var(--w05);border-color:var(--glass-border)}
html[data-theme="light"] .social-btn:hover{background:var(--w10);border-color:var(--w15)}
html[data-theme="light"] .toolbar{background:rgba(245,243,250,.85);border-color:var(--glass-border)}
html[data-theme="light"] .tb-btn:hover{background:var(--w08);color:var(--text-primary);border-color:var(--glass-border)}
html[data-theme="light"] .tb-btn.active{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.2);color:var(--stargaze-primary)}
html[data-theme="light"] .filter-tab{background:var(--w04);border-color:var(--glass-border);color:var(--text-primary)}
html[data-theme="light"] .filter-tab:hover{background:var(--w08);color:var(--text-primary)}
html[data-theme="light"] .filter-tab.active{background:rgba(124,58,237,.1);border-color:rgba(124,58,237,.25);color:var(--stargaze-primary)}
html[data-theme="light"] .section-header{background:linear-gradient(var(--bg-header),var(--bg-header)) padding-box,conic-gradient(from var(--race-angle) at 50% 50%,rgba(90,40,200,.08) 0deg,rgba(90,40,200,.06) 260deg,var(--section-accent,rgba(124,58,237,1)) 320deg,rgba(90,40,200,.4) 345deg,rgba(90,40,200,.08) 360deg) border-box}
html[data-theme="light"] .section-count{background:var(--w06);border-color:var(--glass-border)}
html[data-theme="light"] .share-btn{background:var(--w05);border-color:var(--glass-border)}
html[data-theme="light"] .share-btn:hover{background:var(--w10);color:var(--text-primary)}
html[data-theme="light"] .link-card{background:#FFFFFF;border-color:rgba(90,40,200,.12);box-shadow:0 1px 4px rgba(90,40,200,.08),0 4px 20px rgba(90,40,200,.05)}
html[data-theme="light"] .link-card::before{background:linear-gradient(135deg,rgba(90,40,200,.04),transparent 55%)}
html[data-theme="light"] .link-card:hover{background:#FFFFFF;border-color:var(--w15);box-shadow:0 8px 30px rgba(90,40,200,.1)}
html[data-theme="light"] .link-title{color:#140E24}
html[data-theme="light"] .link-subtitle{color:rgba(20,14,36,.6)}
html[data-theme="light"] .accordion-body{border-top-color:rgba(90,40,200,.08)}
html[data-theme="light"] .accordion-body-inner{color:rgba(20,14,36,.65)}
html[data-theme="light"] .email-form input{background:rgba(90,40,200,.04);border-color:rgba(90,40,200,.12);color:#140E24}
html[data-theme="light"] .poll-option{border-color:rgba(90,40,200,.12)}
html[data-theme="light"] .poll-bar{background:rgba(124,58,237,.12)}
html[data-theme="light"] .tier-card{background:#FFFFFF;border-color:rgba(90,40,200,.12);box-shadow:0 1px 4px rgba(90,40,200,.06)}
html[data-theme="light"] .tier-card.featured{border-color:rgba(124,58,237,.3);background:rgba(124,58,237,.03)}
html[data-theme="light"] .product-inner{color:rgba(20,14,36,.65)}
html[data-theme="light"] .promo-reveal-btn,html[data-theme="light"] .promo-code-display{background:rgba(90,40,200,.04);border-color:rgba(90,40,200,.12)}
html[data-theme="light"] .cotw-timer{background:rgba(90,40,200,.04);border-color:rgba(90,40,200,.08)}
html[data-theme="light"] .recap-chapter{border-color:rgba(90,40,200,.08)}
html[data-theme="light"] .recap-chap-header{color:#140E24}
html[data-theme="light"] .testimonial-text{color:rgba(20,14,36,.65)}
html[data-theme="light"] .totp-digit{background:var(--w04);border-color:var(--glass-border)}
html[data-theme="light"] .pw-meter{background:var(--w06)}
html[data-theme="light"] .panel{background:var(--bg-panel);border-color:var(--glass-border)}
html[data-theme="light"] .panel-close{background:var(--w04);border-color:var(--glass-border)}
html[data-theme="light"] .panel-close:hover{background:var(--w10)}
html[data-theme="light"] .form-input{background:var(--w03);border-color:var(--glass-border)}
html[data-theme="light"] .form-input:focus{background:var(--w05)}
html[data-theme="light"] .btn-ghost{background:var(--w04);border-color:var(--glass-border)}
html[data-theme="light"] .btn-ghost:hover{background:var(--w08)}
html[data-theme="light"] .admin-tabs{background:var(--w03);border-color:var(--glass-border)}
html[data-theme="light"] .admin-item{background:var(--w03);border-color:var(--glass-border)}
html[data-theme="light"] .admin-item:hover{background:var(--w05);border-color:var(--glass-border)}
html[data-theme="light"] .admin-item-actions button{border-color:var(--glass-border)}
html[data-theme="light"] .admin-item-actions button:hover{background:var(--w06)}
html[data-theme="light"] .panel-check{background:var(--w03);border-color:var(--glass-border)}
html[data-theme="light"] .panel-check:hover{background:var(--w05)}
html[data-theme="light"] .hub-unit{background:conic-gradient(from var(--race-angle) at 50% 50%,rgba(124,58,237,.5) 0deg,rgba(4,120,87,.35) 90deg,rgba(14,116,144,.4) 180deg,rgba(190,24,93,.3) 270deg,rgba(124,58,237,.5) 360deg)}
html[data-theme="light"] .hub-unit-inner{background:var(--bg-body)}
html[data-theme="light"] .deck-unit{background:conic-gradient(from var(--race-angle) at 50% 50%,var(--bg2,rgba(90,40,200,.08)) 0deg,var(--bg2,rgba(90,40,200,.06)) 260deg,var(--section-accent,rgba(124,58,237,1)) 320deg,var(--bg1,rgba(90,40,200,.4)) 345deg,var(--bg2,rgba(90,40,200,.08)) 360deg)}
html[data-theme="light"] .deck-unit-inner{background:var(--bg-body)}
html[data-theme="light"] .deck-lip{background:linear-gradient(135deg,rgba(124,58,237,.04),transparent);border-top-color:rgba(90,40,200,.06)}
html[data-theme="light"] .deck-social-btn{background:var(--w05);border-color:var(--glass-border)}
html[data-theme="light"] .deck-social-btn:hover{background:var(--w10)}
html[data-theme="light"] .profile-social-btn{background:var(--w05);border-color:var(--glass-border)}
html[data-theme="light"] .profile-social-btn:hover{background:var(--w10)}
html[data-theme="light"] .profile-share-btn{background:rgba(124,58,237,.08);border-color:rgba(124,58,237,.15)}
html[data-theme="light"] .universe-hub-title{background:linear-gradient(135deg,#0E7490 0%,#7C3AED 45%,#BE185D 100%)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
html[data-theme="light"] .universe-hub-tabs .filter-tab{background:var(--w04);border-color:var(--glass-border);color:var(--text-primary)}
html[data-theme="light"] .universe-hub-tabs .filter-tab.active{background:rgba(124,58,237,.1)!important;border-color:rgba(124,58,237,.25)!important;color:var(--stargaze-primary)}
html[data-theme="light"] .rcal-month-label{background:linear-gradient(135deg,#0E7490,#7C3AED,#BE185D)!important;-webkit-background-clip:text!important;-webkit-text-fill-color:transparent!important}
html[data-theme="light"] .rcal-event-card{background:#FFFFFF;border-color:var(--glass-border);box-shadow:var(--card-shadow)}
html[data-theme="light"] .rcal-cell.today{background:rgba(124,58,237,.1);box-shadow:0 0 0 2px rgba(124,58,237,.35)}
html[data-theme="light"] .rcal-cell.has-event:hover{background:var(--w06)}
html[data-theme="light"] .rcal-nav-btn{background:var(--w05);border-color:var(--glass-border)}
html[data-theme="light"] .rcal-nav-btn:hover{background:var(--w10)}
html[data-theme="light"] .rcal-upcoming-pill{background:var(--w04);border-color:var(--glass-border)}
html[data-theme="light"] .rcal-upcoming-pill:hover{background:var(--w08)}
html[data-theme="light"] .rcal-export-btn{background:var(--w04);border-color:var(--glass-border);color:var(--text-secondary)}
html[data-theme="light"] .rcal-export-menu{background:var(--bg-panel);border-color:var(--glass-border);box-shadow:0 8px 24px rgba(90,40,200,.12)}
html[data-theme="light"] .shop-item{background:#FFFFFF;border-color:var(--glass-border);box-shadow:var(--card-shadow)}
html[data-theme="light"] .shop-item:hover{border-color:rgba(124,58,237,.2)}
html[data-theme="light"] .email-form input{background:var(--w03);border-color:var(--glass-border)}
html[data-theme="light"] .cal-exp-btn{background:var(--w04);border-color:var(--glass-border)}
html[data-theme="light"] .cal-exp-btn:hover{background:var(--w08)}
html[data-theme="light"] .social-btn .tip{background:rgba(245,243,250,.96);border-color:var(--glass-border)}
html[data-theme="light"] .filter-bar::before{background:var(--filter-bar-tint,rgba(245,243,250,.4))}
html[data-theme="light"] .filter-bar::after{background:linear-gradient(to bottom,var(--filter-bar-tint-solid,rgba(245,243,250,.6)),transparent)}
html[data-theme="light"] .footer{border-top-color:var(--glass-border)}
/* Light mode — hub, panels, editors (rgba(0,0,0) overrides) */
html[data-theme="light"] .universe-hub-body{background:rgba(124,58,237,.05)}
html[data-theme="light"] .universe-hub-header{background:var(--bg-panel);border-color:var(--glass-border)}
html[data-theme="light"] .umap-info-panel{background:rgba(124,58,237,.05)}
html[data-theme="light"] .editor-section-body{background:var(--w04);border-color:var(--glass-border)}
html[data-theme="light"] .sub-editor-row{background:var(--w03)}
html[data-theme="light"] .lore-expand-inner{background:var(--w04)}
html[data-theme="light"] .deck-map{background:var(--w04)}
html[data-theme="light"] .recovery-codes{background:var(--w04)}
html[data-theme="light"] .widget-code{background:var(--w04)}
html[data-theme="light"] .qr-setup canvas{background:#fff}
html[data-theme="light"] .panel-preview{background:var(--w04)}
html[data-theme="light"] .footer-qr{background:var(--w04);border-color:var(--glass-border)}

/* ═══ ADMIN PANEL — REDESIGNED ═══ */

/* [DEPRECATED] Old login branding removed — SSO handles login via login.senoj.co */
.btn-link{background:none;border:none;color:var(--stargaze-primary);font-size:12px;cursor:pointer;opacity:.7;transition:opacity .2s;font-family:var(--hubble-font,'Outfit',sans-serif)}
.btn-link:hover{opacity:1}
.invite-section{animation:fadeUp .3s ease}

/* Floating label inputs */
.float-field{position:relative;margin-bottom:16px}
.float-field .float-input{width:100%;padding:20px 12px 8px;border-radius:10px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-primary);font-size:13px;font-family:var(--hubble-font,'Outfit',sans-serif);outline:none;box-sizing:border-box;transition:border-color .3s,box-shadow .3s,padding .2s}
.float-field .float-input:focus{border-color:rgba(192,132,252,.5);box-shadow:0 0 0 3px rgba(192,132,252,.08)}
.float-field .float-input::placeholder{color:transparent}
.float-field .float-label{position:absolute;left:12px;top:14px;font-size:13px;font-weight:400;color:var(--text-dim);pointer-events:none;transition:all .2s ease;font-family:var(--hubble-font,'Outfit',sans-serif)}
.float-field .float-input:focus ~ .float-label,.float-field .float-input:not(:placeholder-shown) ~ .float-label{top:4px;font-size:9px;font-weight:600;color:var(--stargaze-primary);letter-spacing:.5px;font-family:'JetBrains Mono',monospace}
.float-pw-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-dim);cursor:pointer;padding:4px;display:flex;transition:color .2s}
.float-pw-toggle:hover{color:var(--stargaze-primary)}

/* Admin layout — sidebar on desktop */
.admin-layout{display:flex;gap:0;min-height:60vh}
.admin-sidebar{display:none}
.admin-main{flex:1;min-width:0}
.admin-sidebar-title{font-size:16px;font-weight:800;color:var(--stargaze-primary);margin-bottom:16px;padding:0 8px}
.admin-cat{margin-bottom:4px}
.admin-cat-head{padding:8px 10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;color:var(--text-dim);transition:all .2s;display:flex;align-items:center;gap:8px}
.admin-cat-head:hover{color:var(--text-primary);background:var(--glass-bg)}
.admin-cat.open .admin-cat-head{color:var(--text-primary)}
.admin-cat-tabs{display:none;padding:2px 0 4px}
.admin-cat.open .admin-cat-tabs{display:block}
.admin-cat-tabs .admin-tab-btn{display:block;width:100%;text-align:left;padding:6px 10px 6px 28px;border-radius:6px;border:none;background:transparent;font-size:11px;color:var(--text-secondary);cursor:pointer;font-family:var(--hubble-font,'Outfit',sans-serif);transition:all .2s}
.admin-cat-tabs .admin-tab-btn:hover{background:var(--glass-bg);color:var(--text-primary)}
.admin-cat-tabs .admin-tab-btn.active{color:var(--stargaze-primary);font-weight:600;background:rgba(192,132,252,.08)}

/* Mobile tabs — scrollable row */
.admin-mobile-tabs{display:flex;gap:4px;overflow-x:auto;padding:0 0 12px;margin-bottom:12px;scrollbar-width:none;-ms-overflow-style:none}
.admin-mobile-tabs::-webkit-scrollbar{display:none}
.admin-mobile-tabs .admin-tab-btn{flex-shrink:0;padding:6px 12px;border-radius:100px;border:1px solid var(--glass-border);background:var(--glass-bg);font-size:11px;color:var(--text-secondary);cursor:pointer;font-family:var(--hubble-font,'Outfit',sans-serif);transition:all .2s;white-space:nowrap}
.admin-mobile-tabs .admin-tab-btn.active{background:rgba(192,132,252,.12);border-color:rgba(192,132,252,.3);color:var(--stargaze-primary);font-weight:600}

/* Panel backdrop blur */
.panel-overlay{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

/* Desktop: show sidebar, hide mobile tabs */
@media(min-width:1024px){
  .panel{max-width:800px}
  .admin-sidebar{display:block;width:180px;flex-shrink:0;padding:20px 12px;border-right:1px solid var(--glass-border);overflow-y:auto}
  .admin-mobile-tabs{display:none}
}

/* [DEPRECATED] In-content theme toggle removed — now in sidebar toolbar */

/* ═══ SMOOTH THEME TRANSITION ═══ */
body,.link-card,.hub-unit-inner,.deck-unit-inner,.bg-canvas::before,.bg-canvas::after{transition:background .4s ease,color .3s ease,border-color .3s ease,box-shadow .3s ease}

/* ═══ SQUIRCLE AVATAR + ANIMATED RING + QR FLIP ═══ */
@property --ring-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes ring-spin {
  to { --ring-angle: 360deg; }
}

.avatar-wrap {
  position: relative;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-shrink: 0;
  margin-bottom: 18px;
}
.avatar-ring {
  width: 110px;
  height: 110px;
  padding: 4px;
  border-radius: 28% !important;
  background: conic-gradient(from var(--ring-angle), var(--neon-purple,#a78bfa), var(--neon-aqua,#67e8f9), var(--neon-green,#4ade80), var(--neon-yellow,#fde047), var(--neon-orange,#fb923c), var(--neon-pink,#ff6b9d), var(--neon-red,#f87171), var(--neon-blue,#60a5fa), var(--neon-purple,#a78bfa)) !important;
  animation: ring-spin 4s linear infinite !important;
  filter: none !important;
  position: relative;
  perspective: 800px;
  transition: opacity 0.5s;
}
.avatar-ring::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 28% !important;
  background: inherit;
  filter: blur(16px);
  opacity: 0.25;
  z-index: -1;
}
.avatar-wrap.flipped .avatar-ring { opacity: 1; }

.avatar-flipper {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.avatar-wrap.flipped .avatar-flipper { transform: rotateY(180deg); }

.avatar-front, .avatar-back {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
  border-radius: 28%;
  overflow: hidden;
}
.avatar-front { z-index: 2; }
.avatar-back {
  transform: rotateY(180deg);
  background: #ffffff !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.avatar-placeholder {
  width: 100% !important;
  height: 100% !important;
  border-radius: 28% !important;
}
.avatar-qr {
  width: 72%;
  height: 72%;
  background: #ffffff;
  border-radius: 6px;
}
.avatar-qr-label {
  font-size: 8px;
  color: #6b21a8;
  font-family: 'JetBrains Mono', monospace;
  margin-top: 4px;
  letter-spacing: 0.3px;
  font-weight: 600;
}

/* ═══ HANDLE WITH @ ═══ */
.profile-handle {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px !important;
  color: var(--stargaze-primary, #a78bfa) !important;
  opacity: 0.8 !important;
  margin-bottom: 10px;
}

/* Focus visible styles for accessibility */
:focus-visible {
  outline: 2px solid var(--stargaze-primary, #a78bfa);
  outline-offset: 2px;
}

/* ═══ MOBILE TOOLBAR PEEK ═══ */
@media(max-width:767px){
  .toolbar{padding:6px 4px;gap:4px;border-radius:10px 0 0 10px;transform:translateX(calc(100% - 6px));transition:transform .3s cubic-bezier(.22,1,.36,1),opacity .3s,box-shadow 2s ease-in-out;opacity:.5}
  .toolbar:not(.open){animation:toolbarBreath 3s ease-in-out infinite}
  .toolbar.open{transform:translateX(0);opacity:1;animation:none;box-shadow:none}
  .toolbar-tap-zone{display:block;position:fixed;right:0;top:0;bottom:0;width:44px;z-index:99;-webkit-tap-highlight-color:transparent}
}
@keyframes toolbarBreath{
  0%,100%{box-shadow:-4px 0 12px rgba(192,132,252,.08)}
  50%{box-shadow:-6px 0 24px rgba(192,132,252,.3)}
}
/* Light mode breathing glow */
html[data-theme="light"] .toolbar:not(.open){animation-name:toolbarBreathLight}
@keyframes toolbarBreathLight{
  0%,100%{box-shadow:-4px 0 12px rgba(124,58,237,.06)}
  50%{box-shadow:-6px 0 24px rgba(124,58,237,.2)}
}

/* ═══ MULTI-EVENT CARD ═══ */
.multi-event-strip{display:flex;gap:8px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.multi-event-strip::-webkit-scrollbar{display:none}
.multi-event-date{flex-shrink:0;width:54px;border-radius:10px;overflow:hidden;border:1px solid var(--glass-border);text-align:center;cursor:pointer;transition:all .2s;background:var(--glass-bg);padding:0}
.multi-event-date.active{border-width:2px;border-color:var(--bp,var(--stargaze-primary));transform:scale(1.08);box-shadow:0 4px 12px rgba(167,139,250,.15);background:color-mix(in srgb,var(--bp,var(--stargaze-primary)) 8%,transparent)}
.multi-event-date-month{font-family:'JetBrains Mono',monospace;font-size:8px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;padding:3px 0;background:var(--bp,var(--stargaze-primary));color:#fff}
.multi-event-date-day{font-family:'JetBrains Mono',monospace;font-size:20px;font-weight:800;color:var(--text-primary);line-height:1.1;padding:5px 0 2px}
.multi-event-date.active .multi-event-date-day{color:var(--bp,var(--stargaze-primary))}
.multi-event-date-dow{font-family:'JetBrains Mono',monospace;font-size:7px;color:var(--text-dim);padding:0 0 4px;letter-spacing:.5px}
.multi-event-detail{margin:0 12px 12px;padding:14px 16px;border-radius:14px;background:color-mix(in srgb,var(--bp,var(--stargaze-primary)) 5%,transparent);border:1px solid color-mix(in srgb,var(--bp,var(--stargaze-primary)) 12%,transparent);transition:all .3s}
.multi-event-detail-title{font-size:15px;font-weight:700;color:var(--text-primary);line-height:1.3}
.multi-event-detail-meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px;font-size:12px;color:var(--text-secondary)}
.multi-event-detail-countdown{flex-shrink:0;text-align:center;padding:4px 10px;border-radius:8px;background:color-mix(in srgb,var(--bp,var(--stargaze-primary)) 8%,transparent);border:1px solid color-mix(in srgb,var(--bp,var(--stargaze-primary)) 15%,transparent)}
.multi-event-detail-countdown-num{font-family:'JetBrains Mono',monospace;font-size:16px;font-weight:800;color:var(--bp,var(--stargaze-primary));line-height:1}
.multi-event-detail-countdown-label{font-size:8px;color:var(--text-dim);letter-spacing:.3px}
.multi-event-rsvp{margin-top:12px;padding:9px 22px;border-radius:100px;border:none;background:var(--bp,var(--stargaze-primary));color:#fff;font-size:12px;font-weight:700;cursor:pointer;min-height:40px;display:inline-flex;align-items:center;gap:6px;transition:all .2s}
.multi-event-rsvp:hover{filter:brightness(1.1);transform:translateY(-1px)}
.multi-event-sync{padding:8px 16px 10px;display:flex;align-items:center;gap:6px;border-top:1px solid var(--glass-border);font-size:10px;color:var(--text-dim)}

/* ═══ FOR-SALE CARD ═══ */
.forsale-header{display:flex;align-items:center;gap:10px;padding:14px 16px}
.forsale-header-text{flex:1}
.forsale-title{font-size:14px;font-weight:600;color:var(--text-primary)}
.forsale-subtitle{font-size:11px;color:var(--text-dim);margin-top:1px}
.forsale-viewall{font-size:10px;font-weight:600;padding:5px 12px;border-radius:100px;border:1px solid var(--glass-border);background:transparent;color:var(--text-secondary);cursor:pointer;transition:all .2s}
.forsale-viewall:hover{border-color:var(--bp,var(--stargaze-primary));color:var(--bp,var(--stargaze-primary))}
.forsale-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px 14px}
.forsale-item{display:flex;flex-direction:column;border-radius:12px;border:1px solid var(--glass-border);overflow:hidden;text-decoration:none;color:inherit;transition:all .2s;background:var(--glass-bg)}
.forsale-item:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--bp,var(--stargaze-primary)) 25%,transparent)}
.forsale-item-img{height:80px;display:flex;align-items:center;justify-content:center;background:color-mix(in srgb,var(--bp,var(--stargaze-primary)) 6%,transparent);position:relative;overflow:hidden}
.forsale-item-img img{width:100%;height:100%;object-fit:cover}
.forsale-item-img-placeholder{font-size:20px;font-weight:800;color:var(--bp,var(--stargaze-primary));opacity:.3}
.forsale-item-badge{position:absolute;top:6px;right:6px;padding:2px 7px;border-radius:100px;font-size:8px;font-weight:700;letter-spacing:.5px;background:var(--bp,var(--stargaze-primary));color:#fff}
.forsale-item-badge.free{background:var(--success,#22c55e)}
.forsale-item-info{padding:10px 10px 12px;flex:1;display:flex;flex-direction:column}
.forsale-item-name{font-size:12px;font-weight:600;color:var(--text-primary);line-height:1.3;margin-bottom:2px}
.forsale-item-desc{font-size:10px;color:var(--text-dim);line-height:1.4;margin-bottom:8px;flex:1}
.forsale-item-bottom{display:flex;justify-content:space-between;align-items:center}
.forsale-item-price{font-family:'JetBrains Mono',monospace;font-size:14px;font-weight:800;color:var(--bp,var(--stargaze-primary))}
.forsale-item-price.free{color:var(--success,#22c55e)}
.forsale-item-cta{font-size:9px;font-weight:600;padding:4px 10px;border-radius:100px;background:color-mix(in srgb,var(--bp,var(--stargaze-primary)) 10%,transparent);color:var(--bp,var(--stargaze-primary));border:1px solid color-mix(in srgb,var(--bp,var(--stargaze-primary)) 15%,transparent)}
.forsale-scroll{display:flex;gap:10px;padding:0 16px 14px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.forsale-scroll::-webkit-scrollbar{display:none}
.forsale-scroll .forsale-item{flex-shrink:0;width:140px}
.forsale-sync{padding:8px 16px 10px;display:flex;align-items:center;gap:6px;border-top:1px solid var(--glass-border);font-size:10px;color:var(--text-dim)}
.forsale-sync a{color:var(--stargaze-primary);text-decoration:none}
@media(max-width:480px){.forsale-grid{grid-template-columns:1fr}}

/* Light mode overrides for new card types */
html[data-theme="light"] .multi-event-date{background:rgba(90,40,200,.03);border-color:rgba(90,40,200,.12)}
html[data-theme="light"] .forsale-item{background:#FFFFFF;border-color:rgba(90,40,200,.12);box-shadow:0 1px 4px rgba(90,40,200,.06)}
html[data-theme="light"] .forsale-item:hover{box-shadow:0 4px 16px rgba(90,40,200,.1)}
html[data-theme="light"] .lock-overlay{background:rgba(245,243,250,.55)}
html[data-theme="light"] .lock-overlay:hover{background:rgba(245,243,250,.35)}
html[data-theme="light"] .undo-bar{background:#FFFFFF;border-color:rgba(90,40,200,.12);box-shadow:0 8px 32px rgba(90,40,200,.12)}
html[data-theme="light"] .nudge-toast{color:var(--text-primary)}
html[data-theme="light"] .share-preview-wrap{background:rgba(90,40,200,.02)}
html[data-theme="light"] .webhook-item{background:rgba(90,40,200,.02);border-color:rgba(90,40,200,.08)}

/* Deck card selector */
.deck-card-selector{display:flex;flex-direction:column;gap:6px;max-height:300px;overflow-y:auto}
.deck-card-selector label{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;font-size:12px;color:var(--text-primary);cursor:pointer;transition:background .15s}
.deck-card-selector label:hover{background:rgba(255,255,255,.05)}
html[data-theme="light"] .deck-card-selector label:hover{background:rgba(90,40,200,.05)}

/* Confirm modal */
.confirm-modal{text-align:center;padding:8px 0}
.confirm-icon{width:56px;height:56px;border-radius:16px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;border:1px solid var(--glass-border)}
.confirm-title{font-size:17px;font-weight:700;color:var(--text-primary);line-height:1.3;margin-bottom:8px}
.confirm-message{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:24px;max-width:300px;margin-left:auto;margin-right:auto}
.confirm-buttons{display:flex;gap:10px}
.confirm-btn{flex:1;padding:12px 16px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;font-family:var(--hubble-font,'Outfit',sans-serif);min-height:48px;transition:all .15s;border:none}
.confirm-btn.cancel{background:transparent;border:1px solid var(--glass-border);color:var(--text-secondary)}
.confirm-btn.cancel:hover{background:var(--glass-hover)}
.confirm-btn.action{color:#fff}
.confirm-btn.action:hover{filter:brightness(1.1);transform:translateY(-1px)}
html[data-theme="light"] .confirm-icon{border-color:rgba(90,40,200,.12)}
html[data-theme="light"] .confirm-btn.cancel{border-color:rgba(90,40,200,.12)}

/* Admin panel list items */
.card-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--glass-border)}
.card-list-item .card-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.card-list-item .card-meta{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.card-list-item .card-actions{display:flex;gap:6px}
.deck-list-item{display:flex;align-items:center;justify-content:space-between;padding:10px 12px;border-bottom:1px solid var(--glass-border)}
.deck-list-item .deck-title{font-size:13px;font-weight:600;color:var(--text-primary)}
.deck-list-item .deck-meta{font-size:10px;color:var(--text-dim);margin-top:2px}
.deck-list-item .deck-actions{display:flex;gap:6px}

/* Prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .avatar-ring { animation: none !important; }
  .avatar-flipper { transition-duration: 0.01s !important; }
}

/* ═══ PROFILE-MODE OVERRIDES ═══ */
.toolbar{display:none}
.toolbar.authenticated{display:flex!important}
.page-nav{display:flex;gap:6px;margin-bottom:24px;animation:fadeUp .7s cubic-bezier(.22,1,.36,1) .1s both;flex-wrap:wrap;justify-content:center}
.page-tab{padding:6px 14px;border-radius:100px;background:var(--glass-bg);border:1px solid var(--glass-border);font-family:var(--hubble-font,"Outfit",sans-serif);font-size:12px;font-weight:500;color:var(--text-secondary);cursor:pointer;transition:all .3s;text-decoration:none;white-space:nowrap}
.page-tab:hover{background:var(--glass-hover);color:var(--text-primary)}
.page-tab.active{background:rgba(255,255,255,.12);color:var(--text-primary);border-color:rgba(255,255,255,.2);font-weight:600}

/* ═══ APPEARANCE: BUTTON STYLES (set via dashboard) ═══ */
/* ═══ SHAPE SYSTEM (Phase 4 — token-driven, not selector-driven) ═══
   Each variant flips the shape custom properties on <body>. Every card-
   internal element that renders border-radius reads from one of these
   tokens, so adding a new variant never requires hunting down every
   nested-element selector — the cascade does the work.

   Inner card elements (.link-card::before, .link-icon-wrap, .hero-banner,
   .section-badge, .char-art, .gallery-strip img) use var(--card-inner-radius)
   OR follow the outer radius proportionally. See rules further down.
*/

/* Shape variants — set the 4 radius tokens per body class */
.shape-rounded { --card-outer-radius: 18px; --card-inner-radius: 12px; }
.shape-pill    { --card-outer-radius: 50px; --card-inner-radius: 12px; }
.shape-square  { --card-outer-radius: 0;    --card-inner-radius: 0;    }
.hub-shape-rounded { --hub-outer-radius: 18px;   }
.hub-shape-pill    { --hub-outer-radius: 9999px; }
.hub-shape-square  { --hub-outer-radius: 0;      }
/* Round 3 Bug 9: tester reported that "Rounded" looked like "Pill" and
   vice-versa. The data flow is correct, but on small elements like
   .profile-share-btn (~22px tall) an 8px rounded radius approaches the
   half-height threshold where a rectangle reads as a pill. Bump rounded
   down to 5px (clearly soft corners, never reads as pill on any sane
   button height) and pill up to 9999px (always reads as full pill
   regardless of element size). The square value stays at 0. */
.filter-shape-rounded { --filter-outer-radius: 5px;    }
.filter-shape-pill    { --filter-outer-radius: 9999px; }
.filter-shape-square  { --filter-outer-radius: 0;      }

/* Outer shells — consume --card-outer-radius / --hub-outer-radius /
   --filter-outer-radius directly. !important preserves the legacy
   specificity guarantee from the old selector-based rules. */
.link-card                                { border-radius: var(--card-outer-radius) !important; }
.deck-unit, .deck-unit-inner, .section-header { border-radius: var(--card-outer-radius); }
.hub-unit, .hub-unit-inner                { border-radius: var(--hub-outer-radius); }
.filter-tab, .profile-share-btn           { border-radius: var(--filter-outer-radius); }

/* Inner card elements — consume --card-inner-radius so they flatten
   with the outer card when shape-square is applied, but remain rounded
   at their natural sizes for the rounded/pill variants. */
.link-card::before        { border-radius: var(--card-outer-radius) !important; } /* full-card overlay */
.link-icon-wrap           { border-radius: var(--card-inner-radius); }
.hero-banner              { border-radius: var(--card-outer-radius) var(--card-outer-radius) 0 0; }
.section-badge            { border-radius: var(--card-inner-radius); }
.section-badge img        { border-radius: var(--card-inner-radius); }
.char-art                 { border-radius: var(--card-inner-radius); }
.gallery-strip img        { border-radius: var(--card-inner-radius); }
.embed-frame iframe       { border-radius: var(--card-inner-radius); }
/* Card Outline Modifier */
.card-outline .link-card{background:transparent!important;border:2px solid var(--glass-border)!important}
.card-outline .link-card:hover{border-color:var(--stargaze-primary)!important}
/* Card Opacity via CSS custom property */
.link-card{background:rgba(255,255,255,var(--card-opacity,0.04))}
/* Border thickness via CSS custom properties */
.deck-unit{padding:var(--deck-border-width,1px)}
.hub-unit{padding:var(--hub-border-width,1px)}
/* ═══ DECK BORDER ANIMATION ═══ */
/* Phase 19h — deck-effect scrutiny pass.
 *
 * Audit findings (only "racing" looked good before this pass):
 *   1. .deck-unit ALWAYS has the conic-gradient border + raceBorder
 *      animation as its base. When borderAnimation = none / shadow /
 *      reflection / outerGlow / innerGlow, the public renderer added
 *      .border-anim-none which only set animation:none — leaving the
 *      conic-gradient FROZEN at angle 0, producing an ugly directional
 *      "pie-slice" border. The intended effect rendered on top of that
 *      mess and was visually swamped.
 *   2. Breathing animated opacity on the entire .deck-unit, dimming
 *      the cards inside (50% opacity) — content became unreadable.
 *   3. Outer glow used 2.4px / 4.8px drop-shadows — barely visible.
 *   4. Inner glow used a single 15px inset; with cards at full
 *      background-opacity inside, the glow disappeared behind them.
 *   5. Reflection inherited the conic-gradient as its pseudo-element
 *      background, then blurred + flipped it — the "reflection" was a
 *      smeared frozen gradient, not a reflection of the deck's content.
 *
 * Fixes below:
 *   - .border-anim-none replaces the conic-gradient with a flat
 *     translucent border so non-racing modes compose cleanly.
 *   - Breathing animates a ::before overlay; cards stay at full opacity.
 *   - Outer glow tripled (6 / 14 / 22 px stacked drop-shadows).
 *   - Inner glow widened (24px outer + 4px edge highlight).
 *   - Reflection switched to a brand-tinted radial-gradient halo so it
 *     reads as a soft glow under the deck instead of a stretched border.
 *   - Light-theme parity tuned to match further down in the file.
 */
/* Phase 19j step 2 — breathing duration is driven by
   --deck-breath-duration (defaults 3s). The dim-phase opacity is on
   the @keyframes (--deck-breath-dim), so adjusting "Dim depth" in the
   Appearance picker takes effect via the keyframe value.
   Bug Report Round 2 follow-up: the previous implementation animated
   opacity on a ::before that inherited the parent's conic-gradient.
   Both layers were identical so the opacity pulse was visually a
   no-op. Replaced with a brand-glow box-shadow on the inner panel
   plus a smooth linear-gradient border so the gradient reads as an
   actual gradient instead of a frozen pie-slice. The conic-gradient
   stays on the outer .deck-unit only via the base rule; for breathing
   we override it with a clean linear gradient that fades from brand
   color through translucent white. */
.deck-unit.border-anim-breathing{
  animation:none;
  /* Use the deck's two gradient endpoints (gradientColor1, gradientColor2)
     directly so the border reads as a clean two-color gradient. With the
     prior layout the brand --bp was repeated at both ends and the middle
     stop dominated, so brands with a brand-similar gradientColor1 (e.g.
     a red brand whose color1 is also red) looked like a flat solid line.
     This pattern is what Phase 19h originally used for the conic-gradient
     border and reads clearly regardless of brand palette. */
  background:linear-gradient(135deg,
    var(--bg1,rgba(167,139,250,1)) 0%,
    var(--bp,rgba(167,139,250,1)) 50%,
    var(--bg2,rgba(255,255,255,.08)) 100%);
}
.deck-unit.border-anim-breathing > .deck-unit-inner{
  animation:deckBreatheGlow var(--deck-breath-duration,3s) ease-in-out infinite;
}

.deck-unit.border-anim-none{animation:none;background:rgba(255,255,255,.08)}
html[data-theme="light"] .deck-unit.border-anim-none{background:rgba(20,8,80,.08)}
.border-anim-none .section-header{animation:none}

/* ═══ DECK TITLE COLOR ═══ */
.section-title{color:var(--bp-text, var(--text-primary))}
/* ═══ DECK NAME OUTLINE STYLE ═══ */
.deck-name-outline .section-title{color:transparent;text-shadow:-.5px -.5px 0 var(--bp-text,var(--bp)),.5px -.5px 0 var(--bp-text,var(--bp)),-.5px .5px 0 var(--bp-text,var(--bp)),.5px .5px 0 var(--bp-text,var(--bp)),0 -.5px 0 var(--bp-text,var(--bp)),0 .5px 0 var(--bp-text,var(--bp)),-.5px 0 0 var(--bp-text,var(--bp)),.5px 0 0 var(--bp-text,var(--bp))}
html[data-theme="light"] .deck-name-outline .section-title{color:transparent;text-shadow:-.5px -.5px 0 var(--bp-text,var(--bp)),.5px -.5px 0 var(--bp-text,var(--bp)),-.5px .5px 0 var(--bp-text,var(--bp)),.5px .5px 0 var(--bp-text,var(--bp)),0 -.5px 0 var(--bp-text,var(--bp)),0 .5px 0 var(--bp-text,var(--bp)),-.5px 0 0 var(--bp-text,var(--bp)),.5px 0 0 var(--bp-text,var(--bp))}

/* ═══ DECK EFFECTS ═══ */
/* Phase 19h — DECK EFFECTS (post-scrutiny tuning) */
/* Phase 19j step 2 — effect intensity is scaled by --deck-effect-mult
   (defaults to 1, set inline by the public renderer). subtle = 0.5-0.6,
   normal = 1, strong = 1.5-1.6. Achieved via calc() on each blur-radius
   value so the visual stays balanced across intensity levels. */
/* Round 3 Bug 10: tester reported "Shadow and Reflection deck effects do
   not display when applied". Two distinct root causes:
   - SHADOW used rgba(0,0,0,...) which is black-on-black against the
     dark theme background; the shadow was technically applied but
     visually invisible. Now layers a deeper black drop with a brand-
     colored halo so the effect shows on both dark and light themes.
   - REFLECTION's ::after sits BELOW the deck (negative bottom). Most
     ancestors have overflow:visible by default, but .deck-list and the
     legacy .section-cluster can clip the reflection. Bumped the parent
     stacking + scaled the visible band so it reads at default intensity. */
.effect-shadow .deck-unit-inner{box-shadow:
    0 calc(14px * var(--deck-effect-mult,1)) calc(36px * var(--deck-effect-mult,1)) rgba(0,0,0,calc(.7 * var(--deck-effect-mult,1))),
    0 0 calc(20px * var(--deck-effect-mult,1)) rgba(167,139,250,calc(.28 * var(--deck-effect-mult,1)))
}
.effect-reflection{position:relative;overflow:visible;z-index:1;margin-bottom:calc(28px + 14px)}
.effect-reflection::after{content:'';position:absolute;left:6%;right:6%;bottom:calc(-26% * var(--deck-effect-mult,1));height:calc(26% * var(--deck-effect-mult,1));background:radial-gradient(ellipse at center top,var(--bg,rgba(167,139,250,.35)) 0%,transparent 72%);filter:blur(calc(16px * var(--deck-effect-mult,1)));opacity:calc(.7 * var(--deck-effect-mult,1));pointer-events:none;-webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 100%);mask-image:linear-gradient(to bottom,rgba(0,0,0,.7) 0%,transparent 100%)}
.effect-outer-glow{filter:
    drop-shadow(0 0 calc(6px * var(--deck-effect-mult,1)) var(--bp,#a78bfa))
    drop-shadow(0 0 calc(14px * var(--deck-effect-mult,1)) var(--bp,#a78bfa))
    drop-shadow(0 0 calc(22px * var(--deck-effect-mult,1)) var(--bp,#a78bfa))
}
.effect-inner-glow .deck-unit-inner{box-shadow:
    inset 0 0 calc(24px * var(--deck-effect-mult,1)) var(--bp,#a78bfa),
    inset 0 0 calc(4px * var(--deck-effect-mult,1)) var(--bp,#a78bfa)
}

/* ═══ DECK SOCIAL COUNTER + POPUP ═══ */
.section-social-count{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:500;padding:3px 9px;border-radius:100px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);cursor:pointer;display:inline-flex;align-items:center;gap:4px;transition:background .2s,transform .2s}
.section-social-count svg{opacity:.7}
.section-social-count:hover{background:rgba(255,255,255,.1);transform:scale(1.05)}
/* Round 3 Bug 22: tester reported "Social link added to deck does not
   display on the deck". Root cause: the deck socials popup rendered to
   DOM but was display:none unless the user clicked the small count
   badge to toggle it open. Visitors had no obvious cue that there was
   anything behind the badge. Now display the popup inline by default
   so the icons are immediately visible; the .open class still applies
   for backward-compat (toggleDeckSocials becomes a no-op on this layout). */
.deck-social-popup{display:flex;padding:10px 18px 12px;border-top:1px solid rgba(255,255,255,0.04);background:linear-gradient(135deg,rgba(var(--bp-r,167),var(--bp-g,139),var(--bp-b,250),.06),transparent);gap:8px;flex-wrap:wrap;justify-content:center}
/* Phase 13 — deck website globe icon. Sits in section-meta next to share +
   social-count, sized to match. .section-website is an <a> link, not a
   button — clicks navigate directly without an action handler. */
.section-website{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);text-decoration:none;transition:background .2s,transform .2s,color .2s}
.section-website:hover{background:rgba(255,255,255,.12);transform:scale(1.1);color:var(--text-primary)}
.section-website svg{width:12px;height:12px;opacity:.85}
/* 2026-04-26 card-type restructure commit 2: per-deck contact-card icon
   in section-meta. Mirrors .section-website's circle so the deck header
   keeps a consistent visual rhythm of meta indicators. Hidden when the
   deck has no contact populated (renderer omits the button entirely). */
.section-vcard{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);color:var(--text-secondary);cursor:pointer;padding:0;font:inherit;transition:background .2s,transform .2s,color .2s}
.section-vcard:hover{background:rgba(255,255,255,.12);transform:scale(1.1);color:var(--text-primary)}
.section-vcard:focus-visible{outline:2px solid var(--bp,#a78bfa);outline-offset:2px}
.section-vcard svg{width:12px;height:12px;opacity:.85}
html[data-theme="light"] .section-social-count{background:var(--w06);border-color:var(--glass-border)}
html[data-theme="light"] .section-social-count:hover{background:var(--w10)}
html[data-theme="light"] .deck-social-popup{background:linear-gradient(135deg,rgba(124,58,237,.04),transparent);border-top-color:rgba(90,40,200,.06)}
html[data-theme="light"] .section-website{background:var(--w06);border-color:var(--glass-border);color:var(--text-secondary)}
html[data-theme="light"] .section-website:hover{background:var(--w10);color:var(--text-primary)}
html[data-theme="light"] .section-vcard{background:var(--w06);border-color:var(--glass-border);color:var(--text-secondary)}
html[data-theme="light"] .section-vcard:hover{background:var(--w10);color:var(--text-primary)}
/* Phase 19h — light-theme parity for deck-effect tuning */
/* Phase 19j step 2 — light-theme parity also scales by
   --deck-effect-mult. */
html[data-theme="light"] .effect-shadow .deck-unit-inner{box-shadow:
    0 calc(12px * var(--deck-effect-mult,1)) calc(32px * var(--deck-effect-mult,1)) rgba(90,40,200,calc(.18 * var(--deck-effect-mult,1))),
    0 calc(4px * var(--deck-effect-mult,1)) calc(12px * var(--deck-effect-mult,1)) rgba(90,40,200,calc(.10 * var(--deck-effect-mult,1)))
}
html[data-theme="light"] .effect-outer-glow{filter:
    drop-shadow(0 0 calc(6px * var(--deck-effect-mult,1)) rgba(124,58,237,.35))
    drop-shadow(0 0 calc(14px * var(--deck-effect-mult,1)) rgba(124,58,237,.25))
    drop-shadow(0 0 calc(22px * var(--deck-effect-mult,1)) rgba(124,58,237,.18))
}
html[data-theme="light"] .effect-inner-glow .deck-unit-inner{box-shadow:
    inset 0 0 calc(24px * var(--deck-effect-mult,1)) rgba(124,58,237,.22),
    inset 0 0 calc(4px * var(--deck-effect-mult,1)) rgba(124,58,237,.30)
}
html[data-theme="light"] .effect-reflection::after{filter:blur(calc(14px * var(--deck-effect-mult,1)));opacity:calc(.35 * var(--deck-effect-mult,1))}

/* ═══════════════════════════════════════════════════════════════════════════
   Batch G additions — bug-fix styles for Batch D renderer output
   ═══════════════════════════════════════════════════════════════════════════ */

/* Bug 25: sanitized rich-text description under card title on homepage. */
.link-desc{font-size:12px;color:var(--text-secondary);line-height:1.5;margin-top:4px;max-height:4.6em;overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.link-desc p{margin:0 0 4px}
.link-desc p:last-child{margin-bottom:0}
.link-desc a{color:var(--stargaze-primary);text-decoration:underline}
.link-desc ul,.link-desc ol{margin:0 0 4px;padding-left:18px}
.link-desc li{margin:0 0 2px}
.link-desc strong,.link-desc b{font-weight:700}
.link-desc em,.link-desc i{font-style:italic}

/* Bug 1: ensure card tile grows with long subtitle instead of overlapping. */
.link-card-main{align-items:flex-start}
.link-text{align-self:stretch}

/* Bug 5: event year line under day. */
.event-cal-year{font-family:'JetBrains Mono',monospace;font-size:9px;font-weight:700;color:var(--text-dim);letter-spacing:1px;padding:2px 0 3px;text-align:center}

/* Bug 14: additional testimonial fields. */
.testimonial-avatar{width:56px;height:56px;border-radius:50%;object-fit:cover;margin:0 auto 10px;display:block;border:2px solid var(--glass-border)}
.testimonial-rating{display:flex;gap:2px;justify-content:center;margin:6px 0 10px}
.testimonial-rating .star{font-size:14px;color:var(--text-dim);line-height:1}
.testimonial-rating .star.filled{color:#fbbf24}
.testimonial-date{font-size:11px;color:var(--text-dim);margin-top:4px;text-align:center}
.testimonial-link{display:inline-block;margin-top:8px;font-size:11px;color:var(--stargaze-primary);text-decoration:none;text-align:center}
.testimonial-link:hover{text-decoration:underline}

/* Bug 17/18: product card owner-only "Configure URL" disabled button. */
.product-buy-broken{font-size:12px;padding:8px 14px;border-radius:10px;background:rgba(239,68,68,.08);color:var(--text-secondary);border:1px dashed rgba(239,68,68,.3)}
.product-price.product-unset{font-style:italic}
.product-price.product-free{color:#4ade80}

/* Bug 19: tip jar custom/broken button states + owner nudge. */
.tip-btn-custom{border:1px dashed var(--glass-border);background:transparent;color:var(--text-secondary);border-radius:10px;padding:8px 14px;cursor:pointer;font-size:11px}
.tip-btn-custom:hover{background:var(--glass-hover);color:var(--text-primary)}
.tip-btn-broken{background:rgba(239,68,68,.08);color:var(--text-secondary);border:1px dashed rgba(239,68,68,.3)}
.tip-nudge{color:var(--text-dim);padding:0 12px}

/* Bug 23: expired promo code state. */
.promo-expired{padding:12px;text-align:center}
.promo-reveal-btn-expired{padding:10px 18px;border-radius:12px;background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-dim)}
.promo-expiry-expired{font-size:11px;color:#ef4444;opacity:.75;margin-top:6px}

/* Light-mode link-desc + testimonial overrides for readability. */
html[data-theme="light"] .link-desc{color:var(--text-secondary)}
html[data-theme="light"] .link-desc a{color:var(--stargaze-primary)}
html[data-theme="light"] .testimonial-rating .star{color:rgba(20,14,36,.3)}
html[data-theme="light"] .product-buy-broken,html[data-theme="light"] .tip-btn-broken{background:rgba(239,68,68,.06);border-color:rgba(239,68,68,.25)}