:root {
  --brand: #1e1a31;
  --brand-2: #28213f;
  --ink: #f7f6fb;
  --muted: #a7a3b5;
  --muted-2: #716d7f;
  --line: rgba(255, 255, 255, 0.09);
  --surface: rgba(24, 21, 37, 0.82);
  --surface-solid: #181525;
  --surface-2: #211c31;
  --canvas: #0d0b14;
  --violet: #8f6cff;
  --pink: #ff4d8d;
  --cyan: #31d8ff;
  --lime: #c8ff55;
  --orange: #ff9b52;
  --radius: 22px;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.36);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "Manrope", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at 18% 12%, rgba(143, 108, 255, 0.12), transparent 28%),
    radial-gradient(circle at 86% 18%, rgba(49, 216, 255, 0.08), transparent 24%),
    var(--canvas);
  overflow-x: hidden;
}

button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { color: inherit; }
a { color: inherit; text-decoration: none; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

::selection { background: var(--lime); color: #121018; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #0d0b14; }
::-webkit-scrollbar-thumb { background: #302a46; border-radius: 999px; border: 2px solid #0d0b14; }

.ambient { position: fixed; z-index: -1; border-radius: 50%; filter: blur(100px); opacity: .16; pointer-events: none; }
.ambient-one { width: 380px; height: 380px; background: var(--pink); left: -170px; top: 35%; }
.ambient-two { width: 430px; height: 430px; background: var(--cyan); right: -230px; top: 56%; }

.topbar {
  height: 76px;
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 244px minmax(280px, 660px) 1fr;
  gap: 24px;
  align-items: center;
  padding: 0 28px;
  background: rgba(13, 11, 20, 0.86);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(24px);
}

.brand { display: inline-flex; align-items: center; width: fit-content; }
.brand-crop { display: block; position: relative; overflow: hidden; width: 156px; height: 42px; border-radius: 8px; }
.brand-crop img { position: absolute; width: 243px; height: 111px; left: -30px; top: -35px; max-width: none; }

.search-box {
  height: 44px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 0 12px 0 15px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.045);
  color: var(--muted);
  transition: .25s ease;
}
.search-box:focus-within { border-color: rgba(143, 108, 255, .7); box-shadow: 0 0 0 4px rgba(143,108,255,.1); background: rgba(255,255,255,.065); }
.search-box input { flex: 1; min-width: 0; color: var(--ink); background: transparent; border: 0; outline: 0; font-size: 13px; }
.search-box input::placeholder { color: #777386; }
.search-box kbd { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 7px; padding: 4px 7px; font-size: 10px; color: var(--muted); }
.search-box svg { width: 18px; height: 18px; }

.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 10px; }
.icon-button {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,.04);
  cursor: pointer;
  position: relative;
  transition: .2s ease;
}
.icon-button:hover { transform: translateY(-2px); background: rgba(255,255,255,.08); }
.notification-dot { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pink); top: 9px; right: 9px; box-shadow: 0 0 0 3px #151220; }
.publish-button {
  height: 42px;
  border: 0;
  border-radius: 13px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--violet), #6546dd);
  box-shadow: 0 10px 30px rgba(109, 75, 225, .28);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}
.publish-button:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(109,75,225,.4); }
.publish-button svg { width: 17px; height: 17px; }
.profile-button { display: flex; align-items: center; gap: 9px; border: 0; background: transparent; cursor: pointer; padding: 0 0 0 5px; }
.profile-button > svg { width: 15px; height: 15px; color: var(--muted); }
.profile-copy { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.profile-copy strong { font-size: 11px; }
.profile-copy small { color: var(--muted); font-size: 9px; margin-top: 3px; }
.avatar { width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 11px; flex: 0 0 auto; }
.avatar-purple { background: linear-gradient(135deg, #a580ff, #5a3ed2); }

.app-shell {
  display: grid;
  grid-template-columns: 244px minmax(0, 820px) 330px;
  gap: 26px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 26px 28px 80px;
}

.sidebar { position: sticky; top: 102px; height: calc(100vh - 116px); display: flex; flex-direction: column; overflow-y: auto; padding-right: 7px; }
.main-nav { display: flex; flex-direction: column; gap: 4px; }
.nav-item { min-height: 46px; display: flex; align-items: center; gap: 12px; padding: 0 13px; border-radius: 14px; color: #a8a4b5; font-size: 12px; font-weight: 700; transition: .2s ease; }
.nav-item:hover { color: white; background: rgba(255,255,255,.045); transform: translateX(2px); }
.nav-item.active { color: white; background: linear-gradient(90deg, rgba(143,108,255,.2), rgba(143,108,255,.045)); border: 1px solid rgba(143,108,255,.2); }
.nav-icon { width: 30px; height: 30px; border-radius: 10px; display: grid; place-items: center; color: inherit; }
.nav-item.active .nav-icon { background: var(--violet); box-shadow: 0 8px 22px rgba(143,108,255,.3); }
.nav-icon svg { width: 18px; height: 18px; }
.nav-badge { margin-left: auto; padding: 3px 7px; border-radius: 999px; background: rgba(255,255,255,.08); font-size: 9px; color: white; }
.nav-badge.accent { background: var(--pink); }

.sidebar-section { margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--line); }
.sidebar-label { font-size: 9px; letter-spacing: .16em; color: var(--muted-2); font-weight: 800; margin: 0 12px 10px; }
.space-item { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 10px; padding: 0 12px; color: var(--muted); font-size: 11px; font-weight: 600; background: transparent; border: 0; border-radius: 10px; cursor: pointer; }
.space-item:hover { color: white; background: rgba(255,255,255,.04); }
.space-dot { width: 8px; height: 8px; border-radius: 3px; box-shadow: 0 0 15px currentColor; }
.space-dot.pink { background: var(--pink); color: var(--pink); }
.space-dot.cyan { background: var(--cyan); color: var(--cyan); }
.space-dot.lime { background: var(--lime); color: var(--lime); }
.add-space span { width: 17px; height: 17px; display: grid; place-items: center; border: 1px dashed rgba(255,255,255,.2); border-radius: 5px; }

.pro-card { margin-top: 25px; position: relative; overflow: hidden; padding: 20px; border-radius: 20px; background: linear-gradient(145deg, #2d2547, #191525 72%); border: 1px solid rgba(143,108,255,.25); box-shadow: var(--shadow); }
.pro-card::after { content:""; position:absolute; width:140px; height:140px; border-radius:50%; background:var(--violet); filter:blur(55px); opacity:.18; right:-60px; top:-60px; }
.pro-card small { position: relative; z-index: 1; color: var(--lime); font-size: 8px; font-weight: 800; letter-spacing: .16em; }
.pro-card h3 { position: relative; z-index: 1; margin: 8px 0 6px; font-family: "Space Grotesk"; font-size: 17px; line-height: 1.12; max-width: 150px; }
.pro-card p { position: relative; z-index: 1; margin: 0; color: #aaa6b7; font-size: 9px; line-height: 1.55; max-width: 170px; }
.pro-card button { position: relative; z-index: 1; margin-top: 14px; width: 100%; height: 34px; border: 1px solid rgba(255,255,255,.13); background: rgba(255,255,255,.08); border-radius: 10px; font-size: 10px; font-weight: 800; cursor: pointer; }
.pro-orbit { position: absolute; width: 75px; height: 75px; border: 1px solid rgba(255,255,255,.11); border-radius: 50%; right: -18px; bottom: -19px; }
.pro-orbit::before, .pro-orbit::after { content:""; position:absolute; inset: 12px; border:1px solid rgba(255,255,255,.08); border-radius:50%; }
.pro-orbit::after { inset: 28px; background: var(--lime); border: 0; box-shadow: 0 0 20px var(--lime); }
.sidebar-footer { margin-top: auto; padding: 24px 8px 0; display: flex; gap: 8px 12px; flex-wrap: wrap; color: #676272; font-size: 8px; }
.sidebar-footer span { width: 100%; }

.feed { min-width: 0; }
.hero-card { min-height: 440px; position: relative; overflow: hidden; border-radius: 30px; background:
  radial-gradient(circle at 85% 10%, rgba(49,216,255,.18), transparent 24%),
  radial-gradient(circle at 35% 90%, rgba(255,77,141,.12), transparent 26%),
  linear-gradient(135deg, #251d42, #151220 68%);
  border: 1px solid rgba(255,255,255,.1); box-shadow: var(--shadow); display: grid; grid-template-columns: 1.08fr .92fr; isolation: isolate; }
.hero-card::before { content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.045), transparent 32%); pointer-events:none; }
.hero-grid { position: absolute; inset: 0; opacity: .15; z-index: -1; background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px); background-size: 34px 34px; mask-image: linear-gradient(to right, black, transparent 85%); }
.hero-content { padding: 54px 20px 42px 48px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.eyebrow { display: flex; align-items: center; gap: 8px; color: #b8b2c5; font-size: 9px; letter-spacing: .14em; font-weight: 800; text-transform: uppercase; }
.eyebrow span { width: 7px; height: 7px; border-radius: 2px; background: var(--lime); box-shadow: 0 0 16px var(--lime); transform: rotate(45deg); }
.hero-content h1 { margin: 16px 0 14px; max-width: 500px; font-family: "Space Grotesk"; font-size: clamp(38px, 4.3vw, 62px); line-height: .98; letter-spacing: -.055em; }
.hero-content h1 em { color: transparent; font-style: normal; -webkit-text-stroke: 1px rgba(255,255,255,.7); position: relative; }
.hero-content h1 em::after { content:""; position:absolute; left: 2px; right: -4px; bottom: 0; height: 8px; z-index: -1; background: linear-gradient(90deg, var(--pink), var(--violet)); transform: rotate(-1deg); opacity: .75; }
.hero-content > p { max-width: 510px; margin: 0; color: #b2adbe; font-size: 13px; line-height: 1.65; }
.hero-actions { display: flex; gap: 10px; margin-top: 25px; }
.primary-cta, .secondary-cta { height: 43px; border-radius: 13px; padding: 0 18px; font-size: 11px; font-weight: 800; cursor: pointer; transition: .25s ease; }
.primary-cta { border: 0; background: var(--lime); color: #171321; box-shadow: 0 13px 34px rgba(200,255,85,.2); }
.primary-cta span { margin-left: 7px; }
.secondary-cta { border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.045); }
.primary-cta:hover, .secondary-cta:hover { transform: translateY(-3px); }
.hero-metrics { display: flex; gap: 24px; margin-top: 28px; }
.hero-metrics div { display: flex; flex-direction: column; }
.hero-metrics strong { font-family: "Space Grotesk"; font-size: 15px; }
.hero-metrics span { color: #7f798c; font-size: 8px; margin-top: 3px; text-transform: uppercase; letter-spacing: .08em; }

.hero-visual { position: relative; min-height: 440px; }
.spark-card { position: absolute; width: 170px; height: 220px; padding: 17px; border-radius: 20px; box-shadow: 0 22px 45px rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.24); overflow: hidden; font-family: "Space Grotesk"; transition: transform .3s ease; }
.spark-card:hover { transform: rotate(0deg) translateY(-8px) !important; z-index: 5; }
.spark-card::before, .spark-card::after { content:""; position:absolute; border-radius:50%; }
.spark-card span { position: relative; z-index: 2; font-size: 8px; letter-spacing: .16em; font-weight: 700; }
.spark-card strong { position: relative; z-index: 2; display: block; margin-top: 42px; font-size: 25px; line-height: .86; letter-spacing: -.055em; }
.spark-card-one { left: 35px; top: 74px; transform: rotate(-11deg); background: #ff4d8d; color: #1b1420; }
.spark-card-one::before { width:170px; height:170px; background:#ffd5e3; right:-85px; top:20px; }
.spark-card-one::after { width:84px; height:84px; border:20px solid #1f1731; left:-50px; bottom:-45px; }
.spark-card-two { left: 148px; top: 92px; transform: rotate(7deg); background: var(--lime); color: #17131e; z-index: 3; }
.spark-card-two::before { width:120px; height:120px; border:24px solid #8e6aff; right:-55px; bottom:-33px; }
.spark-card-two::after { width:50px; height:170px; background:#16131e; left:18px; top:-70px; transform:rotate(38deg); }
.spark-card-three { left: 99px; top: 210px; transform: rotate(-2deg); background: #3ddcff; color: #13131b; z-index: 2; }
.spark-card-three::before { width:110px; height:110px; background:#1d1730; left:-54px; top:75px; }
.spark-card-three::after { width:64px; height:64px; border:14px solid #ff9b52; right:-20px; top:-14px; }
.hero-spark { position:absolute; right: 24px; top: 24px; font-size:46px; color: var(--lime); text-shadow: 0 0 25px rgba(200,255,85,.48); animation: float 4s ease-in-out infinite; }
@keyframes float { 50% { transform: translateY(-9px) rotate(8deg); } }

.stories-section, .feed-section { margin-top: 34px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 17px; }
.section-heading.compact { margin-bottom: 13px; }
.section-kicker { display: block; margin-bottom: 5px; color: var(--violet); font-size: 8px; letter-spacing: .15em; font-weight: 800; }
.section-heading h2 { margin: 0; font-family: "Space Grotesk"; font-size: 24px; letter-spacing: -.03em; }
.text-button { border: 0; background: transparent; color: var(--muted); font-size: 9px; font-weight: 800; cursor: pointer; }
.text-button:hover { color: white; }
.text-button span { margin-left: 5px; }

.story-row { display: grid; grid-template-columns: repeat(7, minmax(86px, 1fr)); gap: 10px; overflow-x: auto; padding-bottom: 5px; }
.story-card { min-width: 86px; height: 118px; position: relative; overflow: hidden; border-radius: 17px; border: 1px solid rgba(255,255,255,.09); cursor: pointer; background: var(--story-bg); transition: .25s ease; }
.story-card:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.24); }
.story-card::before { content:""; position:absolute; inset:0; background: linear-gradient(to top, rgba(8,7,13,.82), transparent 62%); }
.story-shape { position:absolute; width:80px; height:80px; border-radius:22px; background:var(--story-accent); right:-30px; top:-22px; transform:rotate(24deg); opacity:.9; }
.story-card:nth-child(even) .story-shape { border-radius:50%; width:68px; height:68px; right:-14px; top:8px; }
.story-avatar { position:absolute; left:9px; top:9px; width:28px; height:28px; border-radius:10px; display:grid; place-items:center; background:#17131f; border:2px solid var(--story-accent); font-size:8px; font-weight:800; }
.story-copy { position:absolute; z-index:2; left:10px; right:8px; bottom:9px; }
.story-copy strong { display:block; font-size:9px; line-height:1.16; }
.story-copy small { display:block; color:#b8b4c2; font-size:7px; margin-top:4px; }

.feed-heading { margin-bottom: 13px; }
.view-switch { display:flex; padding:3px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.03); }
.view-switch button { width:31px; height:28px; border:0; border-radius:8px; background:transparent; color:#777284; cursor:pointer; display:grid; place-items:center; }
.view-switch button.active { color:white; background:rgba(255,255,255,.08); }
.view-switch svg { width:15px; height:15px; }
.filter-bar { display:flex; gap:7px; overflow-x:auto; padding: 2px 0 13px; }
.filter-chip { flex:0 0 auto; border:1px solid var(--line); background:rgba(255,255,255,.03); color:#9893a4; min-height:34px; padding:0 14px; border-radius:999px; font-size:9px; font-weight:800; cursor:pointer; transition:.2s ease; }
.filter-chip:hover { color:white; border-color:rgba(255,255,255,.2); }
.filter-chip.active { color:#16121d; background:var(--lime); border-color:var(--lime); box-shadow:0 7px 24px rgba(200,255,85,.14); }

.campaign-list { display:flex; flex-direction:column; gap:17px; }
.campaign-card { position:relative; overflow:hidden; border:1px solid var(--line); border-radius:24px; background:linear-gradient(145deg, rgba(31,27,45,.9), rgba(20,17,30,.94)); box-shadow:0 12px 38px rgba(0,0,0,.2); transition:.25s ease; }
.campaign-card:hover { transform:translateY(-3px); border-color:rgba(255,255,255,.16); box-shadow:0 20px 52px rgba(0,0,0,.27); }
.campaign-topline { height:60px; display:flex; align-items:center; gap:10px; padding:0 17px; }
.campaign-author { display:flex; align-items:center; gap:10px; min-width:0; }
.author-copy { min-width:0; }
.author-copy strong { display:block; font-size:10px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.author-copy span { display:flex; align-items:center; gap:5px; color:#777284; font-size:8px; margin-top:3px; }
.verified { width:12px; height:12px; display:inline-grid; place-items:center; color:white; background:var(--violet); border-radius:50%; font-size:7px; }
.follow-button { margin-left:auto; border:0; background:transparent; color:var(--violet); font-size:9px; font-weight:800; cursor:pointer; }
.more-button { border:0; background:transparent; color:#777284; letter-spacing:2px; cursor:pointer; padding:7px; }

.campaign-art { position:relative; min-height:340px; overflow:hidden; isolation:isolate; background:#211c31; }
.campaign-art::after { content:""; position:absolute; inset:0; z-index:8; background:linear-gradient(120deg, rgba(255,255,255,.1), transparent 32%, transparent 70%, rgba(255,255,255,.04)); pointer-events:none; }
.poster-noise { position:absolute; inset:0; z-index:7; opacity:.15; mix-blend-mode:soft-light; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E"); }
.poster-eyebrow, .poster-title, .poster-stamp { position:absolute; z-index:6; font-family:"Space Grotesk"; }
.poster-eyebrow { top:23px; left:25px; font-size:8px; letter-spacing:.18em; font-weight:700; }
.poster-title { left:25px; bottom:25px; max-width:78%; font-size:clamp(38px, 5vw, 69px); line-height:.82; letter-spacing:-.075em; white-space:pre-line; font-weight:700; }
.poster-stamp { right:22px; top:21px; width:61px; height:61px; border:1px solid currentColor; border-radius:50%; display:grid; place-items:center; font-size:7px; text-align:center; transform:rotate(12deg); }
.poster-shape { position:absolute; z-index:2; }
.poster-shape.two { z-index:3; }
.poster-shape.three { z-index:4; }

.art-aurora { background:linear-gradient(135deg,#ff516e,#ff7e54 55%,#ffd052); color:#251224; }
.art-aurora .one { width:470px; height:470px; border-radius:50%; background:#a568ff; right:-120px; top:-175px; }
.art-aurora .two { width:250px; height:250px; border-radius:50%; border:55px solid #2b1836; right:75px; bottom:-145px; }
.art-aurora .three { width:88px; height:410px; background:#fff0d8; transform:rotate(37deg); left:47%; top:-120px; }

.art-flux { background:#bfff45; color:#17141c; }
.art-flux .one { width:55%; height:145%; background:#181422; left:20%; top:-20%; transform:rotate(18deg); }
.art-flux .two { width:250px; height:250px; border:48px solid #8e6aff; border-radius:50%; right:-73px; top:20px; }
.art-flux .three { width:145px; height:145px; background:#ff4d8d; border-radius:30px; left:-55px; bottom:-58px; transform:rotate(24deg); }
.art-flux .poster-title { color:white; left:32%; bottom:35px; max-width:60%; }
.art-flux .poster-eyebrow { color:white; }

.art-pulse { background:linear-gradient(130deg,#161226,#332555); color:#fff; }
.art-pulse .one { width:360px; height:360px; border-radius:50%; background:radial-gradient(circle at 35% 35%,#4be6ff,#7b56ff 50%,#ff4d8d 72%); right:-40px; top:-20px; filter:blur(1px); }
.art-pulse .two { width:250px; height:250px; border:2px solid rgba(255,255,255,.35); border-radius:50%; right:13px; top:36px; box-shadow:0 0 0 35px rgba(255,255,255,.05),0 0 0 70px rgba(255,255,255,.03); }
.art-pulse .three { width:110%; height:64px; background:#c8ff55; color:#17141c; left:-5%; bottom:55px; transform:rotate(-6deg); }
.art-pulse .poster-title { bottom:24px; font-size:58px; }

.art-cobalt { background:#2759ff; color:white; }
.art-cobalt .one { width:420px; height:420px; border-radius:50%; background:#ff4d8d; right:-115px; top:-135px; }
.art-cobalt .two { width:260px; height:260px; border-radius:50%; background:#ffcf44; left:-125px; bottom:-145px; }
.art-cobalt .three { width:140px; height:140px; background:#17131e; right:70px; bottom:55px; clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%); }

.art-mono { background:#f2efe9; color:#15131b; }
.art-mono .one { width:42%; height:130%; background:#17131d; right:16%; top:-10%; transform:skewX(-13deg); }
.art-mono .two { width:190px; height:190px; border-radius:50%; background:#ff4d8d; left:11%; top:50px; mix-blend-mode:multiply; }
.art-mono .three { width:280px; height:34px; background:#bfff45; left:20px; bottom:31px; transform:rotate(-5deg); }
.art-mono .poster-title { color:white; left:49%; max-width:46%; font-size:52px; }

.art-sunset { background:linear-gradient(145deg,#ff7d45,#ff3c75 57%,#6b45ff); color:#fff4df; }
.art-sunset .one { width:310px; height:310px; border:44px solid #ffe760; border-radius:50%; left:-95px; top:-80px; }
.art-sunset .two { width:210px; height:210px; background:#1b1830; right:55px; bottom:-70px; border-radius:40% 60% 60% 40%; transform:rotate(25deg); }
.art-sunset .three { width:100%; height:2px; background:rgba(255,255,255,.7); left:0; top:50%; box-shadow:0 22px 0 rgba(255,255,255,.45),0 -22px 0 rgba(255,255,255,.35); }

.campaign-content { padding:17px 18px 16px; }
.campaign-meta { display:flex; align-items:center; gap:7px; margin-bottom:10px; }
.category-tag { padding:5px 8px; border-radius:7px; color:var(--lime); background:rgba(200,255,85,.09); font-size:7px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.award-tag { padding:5px 8px; border-radius:7px; color:#ffbe77; background:rgba(255,155,82,.1); font-size:7px; font-weight:800; }
.campaign-content h3 { margin:0 0 8px; font-family:"Space Grotesk"; font-size:20px; letter-spacing:-.025em; }
.campaign-content p { margin:0; color:#aaa5b4; font-size:10px; line-height:1.6; }
.campaign-footer { min-height:53px; display:flex; align-items:center; gap:8px; border-top:1px solid var(--line); padding:0 17px; }
.engagement-button { display:flex; align-items:center; gap:7px; min-width:51px; height:32px; padding:0 8px; border:0; border-radius:9px; color:#918c9f; background:transparent; font-size:9px; cursor:pointer; transition:.2s ease; }
.engagement-button:hover { color:white; background:rgba(255,255,255,.045); }
.engagement-button.active.like { color:var(--pink); }
.engagement-button.active.save { color:var(--lime); }
.engagement-button svg { width:16px; height:16px; }
.engagement-button.active svg { fill:currentColor; }
.campaign-footer .save { margin-left:auto; min-width:auto; }
.campaign-footer .share { min-width:auto; }

.campaign-list.grid-view { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); }
.campaign-list.grid-view .campaign-art { min-height:265px; }
.campaign-list.grid-view .poster-title { font-size:42px; }
.campaign-list.grid-view .campaign-content p { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

.empty-state { padding:60px 20px; text-align:center; border:1px dashed rgba(255,255,255,.12); border-radius:22px; color:var(--muted); }
.empty-state span { display:block; color:var(--lime); font-size:34px; }
.empty-state h3 { color:white; font-family:"Space Grotesk"; margin:10px 0 5px; }
.empty-state p { margin:0; font-size:10px; }

.right-panel { position:sticky; top:102px; align-self:start; max-height:calc(100vh - 116px); overflow:auto; padding-right:4px; }
.panel-card { border:1px solid var(--line); border-radius:22px; background:var(--surface); backdrop-filter:blur(18px); box-shadow:0 18px 50px rgba(0,0,0,.18); }
.panel-title { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:18px 18px 12px; }
.panel-title span { display:block; color:var(--violet); font-size:7px; letter-spacing:.14em; font-weight:800; margin-bottom:4px; }
.panel-title h3 { margin:0; font-family:"Space Grotesk"; font-size:16px; }
.panel-title > button { border:0; background:transparent; color:#716d7c; cursor:pointer; }
.trend-list { padding:0 10px 11px; }
.trend-item { display:grid; grid-template-columns:29px 1fr auto; gap:10px; align-items:center; padding:11px 8px; border-radius:13px; cursor:pointer; transition:.2s ease; }
.trend-item:hover { background:rgba(255,255,255,.045); }
.trend-rank { color:#625e6f; font-family:"Space Grotesk"; font-size:11px; }
.trend-copy strong { display:block; font-size:10px; }
.trend-copy small { display:block; color:#716d7d; font-size:7px; margin-top:4px; }
.trend-growth { color:var(--lime); font-size:8px; font-weight:800; }

.brief-card { position:relative; overflow:hidden; margin-top:16px; padding:20px; background:linear-gradient(145deg,#2f244d,#181423 76%); border-color:rgba(143,108,255,.25); }
.brief-glow { position:absolute; width:170px; height:170px; border-radius:50%; background:var(--pink); filter:blur(75px); opacity:.15; right:-80px; top:-60px; }
.mini-label { color:var(--lime); font-size:7px; letter-spacing:.15em; font-weight:800; }
.brief-card h3 { position:relative; margin:9px 0 7px; font-family:"Space Grotesk"; font-size:18px; line-height:1.15; }
.brief-card p { position:relative; color:#a8a4b3; font-size:9px; line-height:1.55; margin:0; }
.brief-meta { position:relative; display:flex; justify-content:space-between; margin-top:16px; padding-top:12px; border-top:1px solid var(--line); color:#7e798a; font-size:8px; }
.brief-meta strong { color:#ffbd75; }
.brief-card button { position:relative; width:100%; height:37px; margin-top:13px; border:0; border-radius:11px; background:white; color:#17131d; font-size:9px; font-weight:800; cursor:pointer; }
.brief-card button span { margin-left:6px; }

.creators-panel { margin-top:16px; }
.creator-list { padding:0 12px 13px; }
.creator-item { display:flex; align-items:center; gap:9px; padding:9px 5px; }
.creator-info { min-width:0; }
.creator-info strong { display:block; font-size:9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.creator-info small { color:#736e7d; font-size:7px; }
.creator-item button { margin-left:auto; width:28px; height:28px; border-radius:9px; border:1px solid var(--line); background:rgba(255,255,255,.04); color:var(--violet); cursor:pointer; font-size:15px; }
.creator-item button.following { color:#17131d; background:var(--lime); border-color:var(--lime); font-size:11px; }

.newsletter-card { margin-top:16px; padding:16px; border-radius:20px; background:linear-gradient(135deg,rgba(200,255,85,.12),rgba(49,216,255,.06)); border:1px solid rgba(200,255,85,.16); }
.newsletter-card > span { color:var(--lime); font-size:20px; float:right; }
.newsletter-card strong { font-family:"Space Grotesk"; font-size:14px; }
.newsletter-card p { margin:4px 0 11px; max-width:240px; color:#8c8796; font-size:8px; line-height:1.5; }
.newsletter-card form { display:flex; height:34px; border:1px solid var(--line); border-radius:10px; background:rgba(0,0,0,.18); overflow:hidden; }
.newsletter-card input { min-width:0; flex:1; border:0; outline:0; background:transparent; color:white; padding:0 10px; font-size:8px; }
.newsletter-card button { width:37px; border:0; background:var(--lime); color:#15121c; font-weight:900; cursor:pointer; }

.modal-backdrop { position:fixed; inset:0; z-index:100; display:grid; place-items:center; padding:20px; background:rgba(7,6,11,.76); backdrop-filter:blur(16px); opacity:0; visibility:hidden; transition:.25s ease; }
.modal-backdrop.open { opacity:1; visibility:visible; }
.modal { width:min(660px,100%); max-height:92vh; overflow:auto; position:relative; border:1px solid rgba(255,255,255,.14); border-radius:27px; padding:27px; background:linear-gradient(145deg,#221d33,#14111f); box-shadow:0 40px 100px rgba(0,0,0,.62); transform:translateY(20px) scale(.98); transition:.25s ease; }
.modal-backdrop.open .modal { transform:translateY(0) scale(1); }
.modal-close { position:absolute; right:18px; top:18px; width:34px; height:34px; border-radius:10px; border:1px solid var(--line); background:rgba(255,255,255,.04); font-size:22px; color:#aaa5b3; cursor:pointer; }
.modal-header { display:flex; gap:14px; align-items:flex-start; padding-right:44px; margin-bottom:22px; }
.modal-icon { width:42px; height:42px; flex:0 0 auto; display:grid; place-items:center; color:#16131b; background:var(--lime); border-radius:13px; box-shadow:0 10px 28px rgba(200,255,85,.18); }
.modal-header small { color:var(--violet); font-size:7px; letter-spacing:.16em; font-weight:800; }
.modal-header h2 { margin:4px 0 3px; font-family:"Space Grotesk"; font-size:25px; letter-spacing:-.035em; }
.modal-header p { margin:0; color:#8e8998; font-size:9px; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:13px; }
.field { display:flex; flex-direction:column; gap:7px; }
.field-full { grid-column:1/-1; }
.field > span { color:#a9a4b3; font-size:8px; font-weight:700; }
.field input, .field textarea, .field select { width:100%; border:1px solid var(--line); background:rgba(255,255,255,.045); color:white; border-radius:12px; padding:11px 12px; outline:0; font-size:10px; transition:.2s ease; }
.field textarea { resize:vertical; min-height:90px; }
.field input:focus, .field textarea:focus, .field select:focus { border-color:var(--violet); box-shadow:0 0 0 4px rgba(143,108,255,.09); }
.field select option { background:#1c1829; }
.art-picker { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.art-option { height:58px; border:2px solid transparent; border-radius:12px; cursor:pointer; padding:0; position:relative; overflow:hidden; background:var(--option-bg); }
.art-option.active { border-color:white; box-shadow:0 0 0 3px rgba(143,108,255,.28); }
.art-option::before { content:""; position:absolute; width:55px; height:55px; border-radius:50%; background:var(--option-accent); right:-20px; top:-17px; }
.modal-footer { display:flex; justify-content:flex-end; gap:9px; margin-top:20px; padding-top:16px; border-top:1px solid var(--line); }
.cancel-button, .submit-button { height:39px; border-radius:11px; padding:0 16px; font-size:9px; font-weight:800; cursor:pointer; }
.cancel-button { border:1px solid var(--line); background:transparent; color:#aaa5b4; }
.submit-button { border:0; background:var(--lime); color:#16121d; }

.toast { position:fixed; z-index:120; right:24px; bottom:24px; min-width:270px; max-width:360px; display:flex; align-items:center; gap:11px; padding:13px 15px; border:1px solid rgba(200,255,85,.22); border-radius:15px; background:#1b1728; box-shadow:var(--shadow); transform:translateY(30px); opacity:0; pointer-events:none; transition:.25s ease; }
.toast.show { transform:translateY(0); opacity:1; }
.toast span { width:27px; height:27px; display:grid; place-items:center; border-radius:9px; color:#16121d; background:var(--lime); font-weight:900; }
.toast p { margin:0; font-size:10px; }

.mobile-nav, .mobile-only, .sidebar-overlay { display:none; }

@media (max-width: 1250px) {
  .topbar { grid-template-columns: 215px minmax(250px, 1fr) auto; }
  .app-shell { grid-template-columns: 215px minmax(0, 1fr); max-width: 1120px; }
  .right-panel { display:none; }
  .profile-copy { display:none; }
}

@media (max-width: 900px) {
  .topbar { height:68px; grid-template-columns:auto 1fr auto; padding:0 18px; gap:12px; }
  .mobile-only { display:grid; }
  .icon-button.mobile-only span { width:16px; height:1.5px; background:white; border-radius:999px; margin:1.7px 0; }
  .search-box { position:absolute; top:75px; left:18px; right:18px; display:none; }
  .brand { justify-self:center; }
  .brand-crop { width:140px; }
  .topbar-actions .notification-button, .topbar-actions .publish-button { display:none; }
  .profile-button > svg { display:none; }
  .app-shell { display:block; padding:20px 16px 100px; }
  .sidebar { position:fixed; z-index:90; top:0; left:0; bottom:0; width:270px; height:100vh; padding:86px 18px 24px; background:#12101b; border-right:1px solid var(--line); transform:translateX(-105%); transition:.25s ease; }
  .sidebar.open { transform:translateX(0); }
  .sidebar-overlay { position:fixed; inset:0; z-index:80; background:rgba(0,0,0,.6); backdrop-filter:blur(5px); }
  .sidebar-overlay.open { display:block; }
  .mobile-nav { position:fixed; z-index:60; left:14px; right:14px; bottom:12px; height:64px; display:grid; grid-template-columns:repeat(5,1fr); align-items:center; border:1px solid rgba(255,255,255,.12); border-radius:20px; background:rgba(24,21,37,.92); backdrop-filter:blur(18px); box-shadow:0 20px 55px rgba(0,0,0,.45); }
  .mobile-nav button { height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; border:0; background:transparent; color:#777281; font-size:7px; }
  .mobile-nav button.active { color:white; }
  .mobile-nav svg { width:18px; height:18px; }
  .mobile-nav .mobile-create { position:relative; width:48px; height:48px; justify-self:center; border-radius:15px; color:#15111d; background:var(--lime); transform:translateY(-13px); box-shadow:0 11px 28px rgba(200,255,85,.2); }
  .mobile-create span { font-size:25px; line-height:1; }
}

@media (max-width: 700px) {
  .hero-card { min-height:560px; grid-template-columns:1fr; }
  .hero-content { padding:38px 26px 0; justify-content:flex-start; }
  .hero-content h1 { font-size:44px; max-width:440px; }
  .hero-content > p { font-size:11px; }
  .hero-visual { min-height:250px; }
  .spark-card { width:120px; height:156px; border-radius:15px; padding:12px; }
  .spark-card strong { margin-top:28px; font-size:17px; }
  .spark-card-one { left:14%; top:38px; }
  .spark-card-two { left:39%; top:45px; }
  .spark-card-three { left:62%; top:71px; }
  .hero-spark { font-size:32px; }
  .story-row { grid-template-columns:repeat(7,96px); }
  .campaign-art { min-height:285px; }
  .poster-title { font-size:46px; }
  .campaign-list.grid-view { grid-template-columns:1fr; }
  .section-heading h2 { font-size:21px; }
  .modal { padding:22px 18px; }
  .form-grid { grid-template-columns:1fr; }
  .field-full { grid-column:auto; }
  .art-picker { grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 480px) {
  .brand-crop { width:126px; }
  .brand-crop img { left:-35px; }
  .topbar { padding:0 13px; }
  .app-shell { padding-left:12px; padding-right:12px; }
  .hero-card { min-height:570px; border-radius:24px; }
  .hero-content { padding:32px 21px 0; }
  .hero-content h1 { font-size:39px; }
  .hero-actions { width:100%; }
  .primary-cta, .secondary-cta { flex:1; padding:0 10px; font-size:9px; }
  .hero-metrics { gap:16px; }
  .hero-visual { transform:scale(.93); transform-origin:center top; }
  .spark-card-one { left:9%; }
  .spark-card-two { left:37%; }
  .spark-card-three { left:62%; }
  .campaign-topline { padding:0 13px; }
  .campaign-art { min-height:250px; }
  .poster-title { font-size:39px; left:18px; bottom:19px; }
  .poster-eyebrow { left:18px; }
  .poster-stamp { right:14px; width:52px; height:52px; }
  .campaign-content { padding:15px; }
  .campaign-content h3 { font-size:18px; }
  .campaign-footer { padding:0 11px; }
  .toast { left:14px; right:14px; bottom:88px; min-width:0; }
}