:root {
  --bg: #030813;
  --bg2: #061220;
  --panel: rgba(9, 19, 36, 0.82);
  --panel2: rgba(12, 24, 45, 0.72);
  --line: rgba(140, 197, 255, 0.16);
  --line2: rgba(147, 92, 255, 0.32);
  --text: #f1f7ff;
  --muted: #94a7bf;
  --cyan: #20e4ff;
  --blue: #268cff;
  --purple: #7c3dff;
  --violet: #bb5cff;
  --green: #38f7a1;
  --red: #ff3e6c;
  --gold: #ffd166;
  --shadow: 0 22px 80px rgba(0, 0, 0, 0.42);
  --radius: 22px;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 8% 0%, rgba(61, 126, 255, 0.16), transparent 28rem),
    radial-gradient(circle at 85% 10%, rgba(126, 61, 255, 0.18), transparent 30rem),
    linear-gradient(135deg, #030813, #06111f 48%, #020711);
  overflow-x: hidden;
}
body.theme-light {
  --bg: #eef4ff;
  --bg2: #ffffff;
  --panel: rgba(255, 255, 255, 0.82);
  --panel2: rgba(245, 250, 255, 0.88);
  --line: rgba(16, 42, 90, 0.14);
  --text: #08101d;
  --muted: #516275;
  --shadow: 0 22px 70px rgba(58, 82, 130, 0.18);
  background:
    radial-gradient(circle at 8% 0%, rgba(61, 126, 255, 0.18), transparent 25rem),
    radial-gradient(circle at 95% 10%, rgba(126, 61, 255, 0.16), transparent 25rem),
    linear-gradient(135deg, #f4f8ff, #eaf2ff);
}

button, input, select { font: inherit; color: inherit; }
button {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  border-radius: 14px;
  padding: 0.72rem 1rem;
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}
button:hover { transform: translateY(-1px); border-color: rgba(32, 228, 255, 0.42); box-shadow: 0 0 0 1px rgba(32, 228, 255, 0.08); }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid rgba(32, 228, 255, 0.5); outline-offset: 2px; }
input, select { border: none; background: transparent; outline: none; }
a { color: var(--cyan); text-decoration: none; }
small { color: var(--muted); }

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: grid;
  grid-template-columns: 270px minmax(300px, 1fr) auto auto auto auto;
  gap: 0.8rem;
  align-items: center;
  padding: 0.72rem 1rem;
  border-bottom: 1px solid var(--line);
  background: rgba(3, 8, 19, 0.76);
  backdrop-filter: blur(18px);
}
.theme-light .topbar { background: rgba(244, 248, 255, 0.78); }
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  border: 0;
  background: transparent;
  padding: 0;
  font-size: 1.32rem;
  letter-spacing: -0.03em;
}
.brand span:last-child {
  margin-left: 0.35rem;
  border: 1px solid var(--line2);
  color: #d9c9ff;
  background: rgba(124, 61, 255, .17);
  border-radius: 9px;
  padding: 0.2rem 0.5rem;
  font-size: 0.78rem;
}
.brand-mark {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 2px solid var(--cyan);
  border-radius: 9px;
  transform: rotate(30deg);
  box-shadow: 0 0 24px rgba(32, 228, 255, 0.3), inset 0 0 20px rgba(124, 61, 255, .3);
}
.brand-mark span { position: absolute; width: 13px; height: 3px; border-radius: 9px; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.brand-mark span:nth-child(2) { transform: rotate(60deg); }
.brand-mark span:nth-child(3) { transform: rotate(-60deg); }
.search {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  min-width: 0;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.035);
  border-radius: 15px;
}
.search input { width: 100%; color: var(--text); }
.lang { display: flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.lang button { border: 0; padding: 0.35rem; color: var(--muted); background: transparent; }
.lang button.active { color: var(--text); font-weight: 800; }
.lang i { color: var(--muted); font-style: normal; }
.icon-btn { position: relative; min-width: 46px; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; padding: .6rem .75rem; }
.icon-btn span { width: 28px; height: 16px; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--cyan)); display: inline-block; }
.icon-btn em { position: absolute; right: -5px; top: -6px; font-size: .68rem; background: var(--purple); color: white; min-width: 18px; height: 18px; border-radius: 99px; display: grid; place-items: center; }
.wallet-pill { display: flex; align-items: center; gap: 0.75rem; padding: 0.48rem 0.8rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.035); white-space: nowrap; }
.wallet-pill i { width: 34px; height: 34px; border-radius: 50%; background: conic-gradient(from 210deg, var(--cyan), var(--purple), var(--blue), var(--cyan)); box-shadow: 0 0 24px rgba(32, 228, 255, .28); }
.wallet-pill small { display: block; font-size: .72rem; }
.wallet-pill strong { font-size: .86rem; }

.app-shell { display: grid; grid-template-columns: 252px minmax(0, 1fr); min-height: calc(100vh - 67px); }
.sidebar {
  position: sticky;
  top: 67px;
  height: calc(100vh - 67px);
  overflow: auto;
  padding: 1rem 0.9rem;
  border-right: 1px solid var(--line);
  background: rgba(4, 12, 24, 0.58);
  backdrop-filter: blur(14px);
}
.theme-light .sidebar { background: rgba(255,255,255,0.62); }
.profile-card { display: flex; align-items: center; gap: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel2); }
.profile-card.flat { border: 0; background: transparent; padding: 0; }
.profile-card strong { display: block; }
.profile-card small { display: block; }
.avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; position: relative; border: 1px solid rgba(255,255,255,.18); overflow: hidden; background: radial-gradient(circle at 50% 25%, rgba(255,255,255,.5), transparent 14%), linear-gradient(135deg, #1c2a5e, #3f1e59 50%, #0be5ff); }
.avatar:before { content: ""; position: absolute; inset: 22% 28% 0; border-radius: 48% 48% 30% 30%; background: linear-gradient(#101827, #23153a); box-shadow: 0 -11px 0 #211328; }
.avatar:after { content: ""; position: absolute; width: 34%; height: 34%; top: 22%; left: 33%; border-radius: 50%; background: linear-gradient(#dba48c, #734e5d); box-shadow: 0 0 16px rgba(124,61,255,.6); }
.avatar.mini { width: 32px; height: 32px; }
.avatar.micro { width: 32px; height: 32px; }
.avatar.big { width: 70px; height: 70px; border-radius: 18px; }
.avatar.huge { width: 128px; height: 128px; }
.verified { color: var(--cyan); margin-left: auto; }
.ciden-chip, .ciden-mini {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .65rem;
  padding: .55rem .75rem;
  border: 1px solid var(--line2);
  color: #d9c9ff;
  background: rgba(124, 61, 255, 0.16);
  border-radius: 13px;
  font-weight: 700;
  font-size: .86rem;
}
.ciden-mini { margin-top: 0; padding: .27rem .55rem; font-size: .74rem; }
.identity { display: block; padding: .55rem .2rem .8rem; }
.side-nav { display: grid; gap: .45rem; margin: .3rem 0 1rem; }
.side-nav button { display: flex; align-items: center; justify-content: flex-start; gap: .8rem; text-align: left; border-color: transparent; background: transparent; }
.side-nav button.active { border-color: var(--line2); background: linear-gradient(90deg, rgba(124, 61, 255, .36), rgba(38, 140, 255, .14)); box-shadow: inset 3px 0 0 var(--cyan); }
.side-nav span { width: 26px; text-align: center; opacity: .9; }
.side-nav em { margin-left: auto; color: white; font-size: .65rem; background: var(--blue); border-radius: 99px; padding: .18rem .42rem; font-style: normal; }
.system-card, .network-card, .panel, .hero, .module-row, .commerce-hero, .card-visual, .profile-hero, .studio-box, .access-card, .quick-sheet, .guest-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
}
.system-card { padding: .9rem; margin-bottom: .75rem; }
.system-card b { display: flex; align-items: center; gap: .45rem; margin-top: .4rem; font-size: .86rem; }
.system-card i, .network-card a:before, .guest-card i, .access-card i, .source-item i, .scene-item span, .effect-dock i, .studio-topline .ready:before, .live-data p i { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 14px var(--green); }
.network-card { padding: .9rem; background: linear-gradient(160deg, rgba(10, 23, 45, .8), rgba(28, 20, 70, .55)); }
.network-card a { display: block; margin-top: .15rem; font-size: .82rem; }
.two, .three { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: .8rem 0; }
.three { grid-template-columns: repeat(3, 1fr); }
.two b, .three b { display: block; font-size: 1.12rem; }
.two small, .three small { display: block; font-size: .68rem; margin-top: .1rem; font-weight: 500; }
.network-card button { width: 100%; }
.page-area { min-width: 0; padding: 1.05rem; }

.content-grid.with-right { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 1rem; }
.feed-main, .full-page { min-width: 0; display: grid; gap: 1rem; }
.hero {
  position: relative;
  min-height: 282px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 1.5rem;
  isolation: isolate;
}
.hero:before, .commerce-hero:before, .content-card:before, .original-card:before, .product-card:before, .cert-card:before, .nft-card:before, .reward-card:before, .card-visual:before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 72% 25%, rgba(255,255,255,.16), transparent 12%),
    radial-gradient(circle at 74% 32%, rgba(248, 71, 255, .35), transparent 15%),
    linear-gradient(120deg, rgba(4,8,19,.88) 12%, rgba(14,22,45,.55), rgba(124,61,255,.18)),
    linear-gradient(135deg, #071222, #281849, #06415a);
  z-index: -2;
}
.hero:after, .commerce-hero:after {
  content: "";
  position: absolute;
  right: 8%;
  bottom: 0;
  width: 42%;
  height: 105%;
  background:
    radial-gradient(ellipse at 42% 18%, rgba(244, 169, 191, .9) 0 8%, transparent 9%),
    linear-gradient(160deg, transparent 0 43%, rgba(14, 8, 24, .95) 44% 100%),
    radial-gradient(ellipse at 50% 52%, rgba(124,61,255,.55), transparent 55%);
  clip-path: polygon(30% 0, 75% 0, 88% 34%, 70% 100%, 20% 100%, 8% 38%);
  opacity: .9;
  filter: drop-shadow(0 0 34px rgba(187,92,255,.28));
  z-index: -1;
}
.badges, .tag-row, .creator-line, .hero-actions, .card-top, .card-buttons, .filters, .quick-actions { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.live-badge { background: linear-gradient(135deg, #ff2f66, #ff6b35); color: white; padding: .26rem .48rem; border-radius: 8px; font-size: .74rem; letter-spacing: .02em; }
.badges b:not(.live-badge) { background: rgba(0,0,0,.32); padding: .24rem .48rem; border-radius: 8px; }
.hero h1 { font-size: clamp(2rem, 4vw, 3.4rem); margin: .8rem 0 .35rem; letter-spacing: .08em; }
.hero p { color: #d7e4ff; margin: 0 0 .8rem; font-size: 1.1rem; }
.tag-row span { background: rgba(255,255,255,.08); border: 1px solid var(--line); border-radius: 99px; padding: .35rem .7rem; font-size: .8rem; }
.truth-float { position: absolute; right: 1.2rem; top: 1.2rem; display: grid; gap: .14rem; border: 1px solid var(--line); background: rgba(3, 8, 19, .64); padding: .75rem .95rem; border-radius: 16px; backdrop-filter: blur(12px); }
.truth-float i { position: absolute; left: -16px; top: 50%; transform: translateY(-50%); color: var(--cyan); font-style: normal; }
.hero-actions { position: absolute; right: 1.2rem; bottom: 1.2rem; }
.primary, .hero-actions button:first-child, .go-live {
  border: 0;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  color: white;
  box-shadow: 0 0 28px rgba(124,61,255,.35);
  font-weight: 800;
}
.section-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.section-head h2, .section-head h3 { margin: 0; }
.section-head p { margin: .25rem 0 0; color: var(--muted); }
.section-head button { border: 0; background: transparent; color: var(--cyan); padding: .2rem; }
.section-head.small { margin-bottom: .6rem; }
.module-row { padding: 1rem; overflow: hidden; }
.scroll-row { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr); gap: .75rem; overflow-x: auto; padding-bottom: .2rem; scrollbar-color: var(--purple) transparent; }
.content-card, .original-card, .product-card, .cert-card, .nft-card, .reward-card {
  position: relative;
  min-height: 150px;
  border: 1px solid var(--line);
  border-radius: 18px;
  overflow: hidden;
  padding: .75rem;
  background: var(--panel2);
  isolation: isolate;
}
.content-card { display: flex; flex-direction: column; justify-content: space-between; min-height: 185px; }
.content-card:after, .original-card:after, .product-card:after, .cert-card:after, .nft-card:after, .reward-card:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.82) 78%);
  z-index: -1;
}
.card-top { justify-content: space-between; }
.card-bottom { display: grid; gap: .28rem; }
.price, .product-card b, .cert-card b { color: var(--green); }
.card-buttons button { flex: 1; padding: .55rem; }
.mini-tags span { padding: .2rem .45rem; font-size: .68rem; }
.original-card { min-height: 132px; display: flex; flex-direction: column; justify-content: flex-end; gap: .22rem; }
.original-card em { position: absolute; right: .55rem; top: .55rem; font-size: .72rem; font-style: normal; background: rgba(0,0,0,.3); border-radius: 7px; padding: .22rem .4rem; }
.original-card span, .product-card span, .cert-card span, .nft-card span { position: absolute; left: .55rem; top: .55rem; color: var(--green); background: rgba(0, 255, 150, .12); border: 1px solid rgba(56, 247, 161, .3); border-radius: 8px; padding: .2rem .45rem; font-size: .68rem; }
.nft-card { min-height: 168px; display: flex; flex-direction: column; justify-content: flex-end; gap: .3rem; }
.reward-card { min-height: 145px; display: grid; align-content: end; gap: .3rem; }
.bar { width: 100%; height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); border-radius: inherit; }
.right-rail { display: grid; gap: 1rem; align-content: start; }
.panel { padding: 1rem; }
.creator-stat .three { text-align: center; }
.big-number { display: block; font-size: 2rem; color: var(--text); margin: .5rem 0; }
.list-line, .rank-line, .deal-line, .tx, .chat-line { display: flex; align-items: center; gap: .7rem; padding: .58rem 0; border-bottom: 1px solid var(--line); }
.list-line:last-child, .rank-line:last-child, .deal-line:last-child, .tx:last-child, .chat-line:last-child { border-bottom: 0; }
.list-line div, .rank-line div { flex: 1; min-width: 0; }
.list-line b, .rank-line b { display: block; font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.list-line em { color: white; background: var(--red); border-radius: 6px; padding: .12rem .35rem; font-size: .62rem; font-style: normal; }
.shield { width: 92px; height: 92px; margin: .9rem auto; display: grid; place-items: center; font-size: 2.3rem; border: 2px solid var(--cyan); clip-path: polygon(50% 0, 92% 23%, 80% 85%, 50% 100%, 20% 85%, 8% 23%); background: rgba(32, 228, 255, .12); box-shadow: 0 0 36px rgba(32, 228, 255, .3); color: var(--green); }
.shield.small { width: 54px; height: 54px; margin: .4rem 0; font-size: 1.2rem; }
.truth-panel { text-align: center; }
.truth-panel ul { padding: 0; margin: 1rem 0 0; list-style: none; text-align: left; }
.truth-panel li { padding: .35rem 0; color: var(--muted); }
.truth-panel li:before { content: ""; color: var(--green); margin-right: .45rem; }

.page-head { display: flex; justify-content: space-between; gap: 1rem; align-items: center; }
.page-head h1 { margin: 0; font-size: clamp(2rem, 3vw, 3rem); letter-spacing: -.04em; }
.page-head p { margin: .3rem 0 0; color: var(--muted); }
.tab-row { display: flex; gap: .55rem; flex-wrap: wrap; }
.tab-row button { border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent; color: var(--muted); }
.tab-row button.active { color: var(--text); border-color: var(--purple); }
.split-layout { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 1rem; }
.cards-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.stack-panel { display: grid; gap: .65rem; }
.rank-line strong:first-child { color: var(--gold); width: 24px; }
.battle-line { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding: .7rem; background: rgba(255,255,255,.04); border-radius: 14px; }
.battle-line span { background: linear-gradient(135deg, var(--purple), var(--blue)); padding: .3rem .55rem; border-radius: 9px; }

.studio-shell { display: grid; grid-template-columns: 340px minmax(620px, 1fr) 360px; gap: .8rem; min-height: calc(100vh - 100px); }
.studio-left, .studio-center, .studio-right { min-width: 0; display: grid; gap: .72rem; align-content: start; }
.studio-tabs { display: grid; grid-template-columns: 60px 1fr; gap: .35rem; }
.studio-tabs button { padding: .55rem; text-align: center; }
.studio-tabs button.active { background: linear-gradient(135deg, rgba(124,61,255,.7), rgba(38,140,255,.35)); }
.studio-box { padding: .72rem; }
.box-head { display: flex; justify-content: space-between; align-items: center; gap: .7rem; margin-bottom: .5rem; }
.box-head h3 { margin: 0; font-size: .86rem; letter-spacing: .04em; }
.box-head button { padding: .35rem .55rem; font-size: .76rem; }
.scene-item, .source-item { width: 100%; display: flex; align-items: center; gap: .6rem; margin: .3rem 0; padding: .5rem .6rem; border-color: transparent; background: rgba(255,255,255,.035); }
.scene-item.active { background: rgba(124,61,255,.38); border-color: var(--line2); }
.scene-item b { width: 22px; opacity: .9; }
.scene-item span, .source-item i { margin-left: auto; }
.source-item em { font-style: normal; opacity: .55; }
.add-line { width: 100%; margin-top: .4rem; padding: .5rem; }
.mix-row { display: grid; grid-template-columns: 90px 1fr 54px 34px; align-items: center; gap: .5rem; padding: .45rem 0; }
.mix-row span { height: 6px; border-radius: 999px; background: rgba(255,255,255,.1); overflow: hidden; }
.mix-row i { display: block; height: 100%; background: linear-gradient(90deg, var(--green), var(--cyan)); border-radius: inherit; }
.mix-row em { font-size: .72rem; color: var(--muted); font-style: normal; }
.mix-row button { padding: .25rem; }
.access-card { display: flex; align-items: center; justify-content: space-between; padding: .9rem; border-color: var(--line2); background: linear-gradient(135deg, rgba(124,61,255,.38), rgba(38,140,255,.16)); }
.access-card span { color: var(--green); font-weight: 900; }
.effect-dock { display: grid; grid-template-columns: repeat(5, 1fr); gap: .35rem; }
.effect-dock button { display: grid; place-items: center; gap: .25rem; min-height: 92px; padding: .4rem; position: relative; }
.effect-dock span { font-size: 1.8rem; }
.effect-dock small { color: var(--muted); }
.effect-dock i { position: absolute; right: .45rem; top: .4rem; }
.effect-dock button.active { border-color: var(--purple); background: rgba(124,61,255,.32); }
.studio-topline { display: flex; gap: .55rem; align-items: center; }
.studio-topline select { flex: 1; border: 1px solid var(--line); border-radius: 14px; padding: .7rem; background: var(--panel); }
.studio-topline .ready { padding: .68rem .9rem; border: 1px solid var(--line); border-radius: 13px; color: var(--green); background: var(--panel); white-space: nowrap; }
.studio-topline button { padding: .7rem .8rem; }
.studio-topline .active { color: var(--green); }
.stage-toolbar { display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.stage-toolbar button, .stage-toolbar label { padding: .45rem .65rem; border: 1px solid var(--line); background: rgba(255,255,255,.035); border-radius: 10px; color: var(--muted); }
.stage-toolbar button.active { color: white; background: rgba(124,61,255,.45); }
.stage-canvas {
  min-height: 440px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 20px;
  background:
    linear-gradient(rgba(32,228,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(32,228,255,.06) 1px, transparent 1px),
    radial-gradient(circle at center, rgba(32,228,255,.1), transparent 32%),
    rgba(2,8,17,.72);
  background-size: 22px 22px, 22px 22px, cover, cover;
  box-shadow: inset 0 0 70px rgba(32,228,255,.08);
}
.portrait-frame { width: min(300px, 55%); aspect-ratio: 9 / 16; border: 2px solid rgba(32,228,255,.55); box-shadow: 0 0 28px rgba(32,228,255,.23); background: rgba(7, 18, 34, .68); display: grid; place-items: center; text-align: center; padding: 1.3rem; position: relative; }
.portrait-frame:before { content: ""; position: absolute; inset: 11%; border: 1px dashed rgba(255,255,255,.16); }
.portrait-frame span { font-size: 2rem; color: var(--muted); }
.portrait-frame h2 { margin: .2rem 0; font-size: 1.05rem; }
.portrait-frame p { margin: 0; color: var(--muted); }
.portrait-frame small { position: absolute; bottom: .55rem; background: rgba(124,61,255,.2); padding: .25rem .5rem; border-radius: 8px; }
.stream-stats { display: grid; grid-template-columns: repeat(6, auto) 1fr auto auto; align-items: center; gap: .8rem; color: var(--muted); }
.stream-stats b { color: var(--green); }
.stream-stats strong { color: var(--text); text-align: center; font-size: 1.15rem; }
.stream-stats .record { border-color: rgba(255,62,108,.6); color: #ff9caf; }
.studio-controls { display: grid; grid-template-columns: repeat(4, 1fr) 2.2fr repeat(3, 1fr); gap: .55rem; }
.guest-dock { display: grid; grid-template-columns: repeat(6, minmax(120px, 1fr)); gap: .55rem; }
.guest-card { padding: .65rem; background: linear-gradient(180deg, rgba(124,61,255,.22), rgba(6,13,26,.88)); }
.guest-card > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.guest-silhouette { width: 72px; height: 72px; margin: .55rem auto; border-radius: 50%; background: radial-gradient(circle at 50% 32%, rgba(255,255,255,.14) 0 18%, transparent 19%), linear-gradient(135deg, rgba(124,61,255,.16), rgba(32,228,255,.08)); border: 1px solid var(--line); }
.guest-card p { display: flex; justify-content: space-between; margin: .35rem 0; color: var(--muted); }
.guest-card p em { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 12px var(--green); }
.guest-card small b { background: rgba(124,61,255,.28); padding: .12rem .3rem; border-radius: 5px; color: white; }
.guest-card button { width: 100%; margin: .45rem 0; padding: .45rem; background: rgba(124,61,255,.38); }
.guest-card nav { display: flex; justify-content: space-between; color: var(--muted); }
.studio-right .panel { box-shadow: none; }
.chat-line p { flex: 1; margin: 0; }
.chat-line b { display: block; }
.chat-input { margin-top: .7rem; padding: .7rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.ai-score { display: flex; align-items: center; gap: .9rem; }
.ai-score > b { width: 72px; height: 72px; display: grid; place-items: center; border-radius: 50%; border: 4px solid var(--green); font-size: 1.8rem; box-shadow: 0 0 26px rgba(56,247,161,.28); }
.ai-panel ul { margin: .8rem 0; padding: 0; list-style: none; }
.ai-panel li { padding: .45rem 0; color: var(--muted); }
.ai-panel li:before { content: ""; color: var(--cyan); margin-right: .5rem; }
.ai-panel em { background: rgba(56,247,161,.18); color: var(--green); font-style: normal; padding: .12rem .35rem; border-radius: 7px; font-size: .65rem; }
.floating-translate { border: 1px solid var(--line2); border-radius: 18px; background: rgba(5,12,24,.94); padding: .85rem; box-shadow: 0 0 50px rgba(124,61,255,.18); }
.floating-translate label { display: grid; gap: .3rem; color: var(--muted); margin: .55rem 0; }
.floating-translate select { border: 1px solid var(--line); border-radius: 10px; padding: .55rem; color: var(--text); background: rgba(255,255,255,.04); }
.floating-translate p b { color: var(--green); }
.tiny button { padding: .35rem .6rem; }

.commerce-hero { position: relative; overflow: hidden; min-height: 320px; display: grid; grid-template-columns: 1fr 300px; align-items: end; gap: 1rem; padding: 1.4rem; isolation: isolate; }
.commerce-hero aside { background: rgba(3,8,19,.58); border: 1px solid var(--line); border-radius: 18px; padding: .9rem; backdrop-filter: blur(12px); }
.commerce-hero h1 { font-size: clamp(2rem, 4vw, 3.2rem); margin: .8rem 0 .3rem; letter-spacing: .07em; }
.product-card, .cert-card { min-height: 185px; display: grid; align-content: end; gap: .25rem; }
.product-card button { position: absolute; right: .7rem; bottom: .7rem; width: 36px; height: 36px; padding: 0; }
.market-grid { display: grid; grid-template-columns: 1fr 1fr 330px; gap: 1rem; }
.gift-box { width: 100%; height: 95px; display: grid; place-items: center; font-size: 3rem; background: rgba(124,61,255,.16); border: 1px solid var(--line2); border-radius: 16px; margin: .8rem 0; }
.benefit-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: .7rem; padding: 1rem; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.benefit-strip span { display: flex; align-items: center; justify-content: center; gap: .5rem; color: var(--muted); }
.wallet-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1fr; gap: 1rem; }
.wallet-balance b { display: block; font-size: 2.1rem; margin: .4rem 0; }
.card-visual { position: relative; min-height: 205px; padding: 1.2rem; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; }
.card-visual:before { background: radial-gradient(circle at 80% 35%, rgba(255,255,255,.22), transparent 11%), linear-gradient(135deg, #211048, #0b2354, #17182d); }
.card-visual strong { font-size: 1.4rem; letter-spacing: .18em; }
.dashboard-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.tx { display: grid; grid-template-columns: 1fr auto; }
.tx span, .tx small { grid-column: 1; }
.tx b, .tx em { grid-column: 2; text-align: right; }
.tx .good { color: var(--green); }
.tx .bad { color: var(--red); }
.achievement { margin: .75rem 0; }
.mini-grid { display: flex; gap: .6rem; flex-wrap: wrap; }
.chain-ready { grid-column: span 2; }
.chain-icons { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1rem; }
.chain-icons span { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 12px; color: var(--muted); }
.kpi-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.kpi { display: grid; gap: .22rem; border: 1px solid var(--line); border-radius: 18px; background: var(--panel); padding: 1rem; }
.kpi span { color: var(--cyan); font-size: 1.5rem; }
.kpi b { font-size: 1.45rem; }
.kpi em { color: var(--green); font-style: normal; }
.admin-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.chart-panel { grid-column: span 2; min-height: 260px; }
.chart-lines { height: 160px; position: relative; background: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size: 100% 38px; overflow: hidden; border-radius: 14px; }
.chart-lines i { position: absolute; left: 5%; right: 5%; height: 3px; border-radius: 99px; background: linear-gradient(90deg, var(--purple), var(--cyan)); transform: rotate(var(--r, 0deg)); top: var(--t, 50%); box-shadow: 0 0 15px currentColor; }
.chart-lines i:nth-child(1) { --t: 35%; --r: 4deg; color: var(--purple); }
.chart-lines i:nth-child(2) { --t: 50%; --r: 2deg; color: var(--blue); }
.chart-lines i:nth-child(3) { --t: 68%; --r: -1deg; color: var(--red); }
.chart-lines i:nth-child(4) { --t: 76%; --r: 3deg; color: var(--cyan); }
.legend { display: flex; gap: 1rem; color: var(--muted); margin-top: .7rem; }
.chart-bars { display: flex; align-items: end; gap: .35rem; height: 150px; padding-top: 1rem; }
.chart-bars i { flex: 1; border-radius: 8px 8px 0 0; background: linear-gradient(180deg, var(--blue), rgba(124,61,255,.25)); }
.truth-risk .donut { width: 120px; height: 120px; display: grid; place-items: center; margin: .7rem auto; border-radius: 50%; background: conic-gradient(var(--red) 0 18%, var(--gold) 18% 46%, var(--cyan) 46% 100%); color: white; font-size: 2rem; font-weight: 900; box-shadow: inset 0 0 0 18px rgba(3,8,19,.92), 0 0 32px rgba(32,228,255,.22); }
.profile-hero { display: flex; align-items: center; gap: 1.3rem; padding: 1.3rem; background: linear-gradient(135deg, rgba(124,61,255,.24), rgba(32,228,255,.08)); }

.sheet-backdrop { position: fixed; inset: 0; z-index: 80; display: grid; place-items: end center; background: rgba(0,0,0,.42); backdrop-filter: blur(2px); }
.quick-sheet { width: min(920px, calc(100% - 1.2rem)); padding: 1.6rem; margin-bottom: .6rem; border-radius: 30px; position: relative; animation: slideUp .22s ease both; }
@keyframes slideUp { from { transform: translateY(24px); opacity: 0; } }
.grab { width: 78px; height: 6px; border-radius: 99px; background: rgba(255,255,255,.28); margin: -.7rem auto 1rem; }
.close { position: absolute; right: 1rem; top: 1rem; }
.sheet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; }
.sheet-box { border: 1px solid var(--line); border-radius: 18px; padding: 1rem; background: rgba(255,255,255,.035); }
.sheet-box button { width: 100%; display: flex; justify-content: space-between; margin-top: .6rem; }
.sheet-box button b { color: var(--green); }
.guest-preview { display: flex; align-items: center; gap: .8rem; }
.ready-line { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr auto; gap: 1rem; align-items: center; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; }
.ready-line b { color: var(--green); }
.ready-line small { display: block; }

.scene-luna:before, .scene-luna { --hue: 280deg; }
.scene-cyber:before, .scene-cyber { --hue: 210deg; }
.scene-trade:before, .scene-trade { --hue: 35deg; }
.scene-yoga:before, .scene-yoga { --hue: 165deg; }
.scene-game:before, .scene-game { --hue: 315deg; }
.scene-art:before, .scene-art { --hue: 255deg; }
.prod-hoodie:before { background: linear-gradient(135deg, #142a4c, #2f164c), radial-gradient(circle at 60% 35%, #5af, transparent); }
.prod-glasses:before { background: linear-gradient(135deg, #29104f, #111b42), radial-gradient(circle at 50% 40%, #ff4af3, transparent); }
.prod-bag:before { background: linear-gradient(135deg, #1a1a4e, #113d56), radial-gradient(circle at 50% 35%, #2ff, transparent); }
.prod-shoe:before { background: linear-gradient(135deg, #151c3e, #1d4d66), radial-gradient(circle at 50% 35%, #7c3dff, transparent); }
.prod-watch:before { background: linear-gradient(135deg, #111827, #251755), radial-gradient(circle at 50% 35%, #20e4ff, transparent); }
.nft-guardian:before, .reward-cosmic:before { background: linear-gradient(135deg, #120c3a, #38125a), radial-gradient(circle at 50% 35%, #f74cff, transparent); }
.nft-odyssey:before, .reward-wave:before { background: linear-gradient(135deg, #0d1d3a, #34236d), radial-gradient(circle at 60% 40%, #20e4ff, transparent); }
.nft-kitty:before { background: linear-gradient(135deg, #2b1243, #144055), radial-gradient(circle at 55% 35%, #aa5cff, transparent); }
.nft-samurai:before { background: linear-gradient(135deg, #231120, #51420d), radial-gradient(circle at 50% 30%, #ffd166, transparent); }
.content-card:before, .original-card:before { filter: hue-rotate(var(--hue, 0deg)); }

.mobile-nav { display: none; }

@media (max-width: 1240px) {
  .topbar { grid-template-columns: 230px 1fr auto auto; }
  .icon-btn:nth-of-type(2), .wallet-pill small { display: none; }
  .content-grid.with-right, .split-layout, .market-grid { grid-template-columns: 1fr; }
  .right-rail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-shell { grid-template-columns: 300px minmax(640px, 1fr); overflow-x: auto; }
  .studio-right { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-grid { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: repeat(2, 1fr); }
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 860px) {
  .topbar { grid-template-columns: 1fr auto auto; padding: .65rem; }
  .search { order: 2; grid-column: 1 / -1; }
  .brand { font-size: 1.1rem; }
  .wallet-pill { padding: .35rem .55rem; }
  .wallet-pill strong { display: none; }
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .page-area { padding: .75rem .75rem 5.5rem; }
  .mobile-nav { position: fixed; z-index: 60; bottom: .7rem; left: .7rem; right: .7rem; display: grid; grid-template-columns: repeat(5, 1fr); gap: .2rem; border: 1px solid var(--line); border-radius: 24px; background: rgba(4,12,24,.86); backdrop-filter: blur(18px); padding: .55rem; box-shadow: var(--shadow); }
  .mobile-nav button { border: 0; background: transparent; display: grid; gap: .2rem; place-items: center; padding: .42rem; font-size: .72rem; color: var(--muted); }
  .mobile-nav button.active { color: var(--text); }
  .mobile-nav span { font-size: 1.2rem; color: var(--purple); }
  .hero { min-height: 62vh; align-items: flex-end; }
  .hero:after { right: -6%; width: 74%; }
  .truth-float { right: .8rem; top: .8rem; }
  .hero-actions { left: 1rem; right: 1rem; justify-content: stretch; }
  .hero-actions button { flex: 1; }
  .scroll-row { grid-auto-columns: 70%; }
  .right-rail, .cards-grid, .dashboard-grid, .wallet-grid, .benefit-strip, .sheet-grid { grid-template-columns: 1fr; }
  .commerce-hero { grid-template-columns: 1fr; min-height: 520px; }
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .admin-grid { grid-template-columns: 1fr; }
  .chart-panel, .chain-ready { grid-column: span 1; }
  .studio-shell { grid-template-columns: 1fr; overflow-x: visible; }
  .studio-left { order: 2; }
  .studio-center { order: 1; }
  .studio-right { order: 3; grid-template-columns: 1fr; }
  .studio-tabs { display: flex; overflow-x: auto; }
  .stage-canvas { min-height: 380px; }
  .portrait-frame { width: 54%; }
  .stream-stats, .studio-controls { grid-template-columns: repeat(2, 1fr); }
  .stream-stats strong, .go-live { grid-column: 1 / -1; }
  .guest-dock { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .effect-dock { grid-template-columns: repeat(5, minmax(70px, 1fr)); overflow-x: auto; }
  .ready-line { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .lang i { display: none; }
  .lang { gap: .1rem; }
  .brand b { display: none; }
  .hero h1 { font-size: 1.8rem; }
  .scroll-row { grid-auto-columns: 82%; }
  .guest-dock { grid-template-columns: 1fr; }
  .portrait-frame { width: 64%; }
}
.search { position: relative; }
.search-hint { position: absolute; left: 2.65rem; right: 1rem; color: var(--muted); pointer-events: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.studio-title h1 { margin: 0; font-size: 1.55rem; letter-spacing: -.03em; }
.studio-title p { margin: .2rem 0 0; color: var(--muted); }

/* V75 VISUAL SEED LAYER START */
:root {
  --visual-dim: linear-gradient(90deg, rgba(3, 8, 19, .92) 0%, rgba(3, 8, 19, .55) 38%, rgba(3, 8, 19, .08) 70%), linear-gradient(0deg, rgba(3, 8, 19, .92) 0%, rgba(3, 8, 19, .18) 42%, rgba(3, 8, 19, .2) 100%);
}
.hero.scene-luna,
.hero.scene-luna:before {
  background-image: var(--visual-dim), url("./assets/visuals/cidenflow-feed-desktop.png") !important;
  background-size: cover !important;
  background-position: center right !important;
  filter: none !important;
}
.hero.scene-luna:after {
  opacity: .08 !important;
}
.commerce-hero.scene-luna,
.commerce-hero.scene-luna:before {
  background-image: linear-gradient(90deg, rgba(3,8,19,.94) 0%, rgba(3,8,19,.58) 48%, rgba(3,8,19,.18) 100%), url("./assets/visuals/shop-nft-market.png") !important;
  background-size: cover !important;
  background-position: center !important;
  filter: none !important;
}
.commerce-hero.scene-luna:after { opacity: .05 !important; }
.live-page > .hero.scene-luna,
.live-page > .hero.scene-luna:before {
  background-image: linear-gradient(90deg, rgba(3,8,19,.92), rgba(3,8,19,.46), rgba(3,8,19,.08)), url("./assets/visuals/live-arena.png") !important;
  background-position: center !important;
}
.content-card.scene-luna:before,
.avatar.scene-luna,
.avatar.micro.scene-luna { background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.75)), url("./assets/visuals/cidenflow-mobile-feed.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.content-card.scene-cyber:before,
.avatar.scene-cyber,
.avatar.micro.scene-cyber { background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.8)), url("./assets/visuals/live-arena.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.content-card.scene-trade:before,
.avatar.scene-trade,
.avatar.micro.scene-trade { background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)), url("./assets/visuals/admin-overview.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.content-card.scene-yoga:before,
.avatar.scene-yoga,
.avatar.micro.scene-yoga { background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)), url("./assets/visuals/wallet-rewards.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.content-card.scene-game:before,
.avatar.scene-game,
.avatar.micro.scene-game { background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)), url("./assets/visuals/creator-cockpit.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.content-card.scene-art:before,
.avatar.scene-art,
.avatar.micro.scene-art { background-image: linear-gradient(180deg, rgba(0,0,0,.05), rgba(0,0,0,.78)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.original-one:before { background-image: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.82)), url("./assets/visuals/cidenflow-feed-desktop.png") !important; background-size: cover !important; background-position: 15% 40% !important; filter: none !important; }
.original-two:before { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/creator-cockpit.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.original-three:before { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/admin-overview.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.original-four:before { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/wallet-rewards.png") !important; background-size: cover !important; background-position: center !important; filter: none !important; }
.product-card.prod-hoodie:before,
.cert-card.prod-hoodie:before,
.avatar.prod-hoodie,
.avatar.micro.prod-hoodie { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: 20% 70% !important; }
.product-card.prod-glasses:before,
.cert-card.prod-glasses:before,
.avatar.prod-glasses,
.avatar.micro.prod-glasses { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: 46% 68% !important; }
.product-card.prod-bag:before,
.cert-card.prod-bag:before,
.avatar.prod-bag,
.avatar.micro.prod-bag { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: 62% 68% !important; }
.product-card.prod-shoe:before,
.cert-card.prod-shoe:before,
.avatar.prod-shoe,
.avatar.micro.prod-shoe { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: 76% 64% !important; }
.product-card.prod-watch:before,
.cert-card.prod-watch:before,
.avatar.prod-watch,
.avatar.micro.prod-watch { background-image: linear-gradient(180deg, rgba(0,0,0,.12), rgba(0,0,0,.82)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: 88% 64% !important; }
.nft-card.nft-guardian:before,
.avatar.nft-guardian,
.avatar.big.nft-guardian { background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.86)), url("./assets/visuals/shop-nft-market.png") !important; background-size: cover !important; background-position: 50% 84% !important; }
.nft-card.nft-odyssey:before,
.avatar.nft-odyssey,
.avatar.big.nft-odyssey { background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.86)), url("./assets/visuals/live-arena.png") !important; background-size: cover !important; background-position: 70% 52% !important; }
.nft-card.nft-kitty:before,
.avatar.nft-kitty,
.avatar.big.nft-kitty { background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.86)), url("./assets/visuals/wallet-rewards.png") !important; background-size: cover !important; background-position: 24% 78% !important; }
.nft-card.nft-samurai:before,
.avatar.nft-samurai,
.avatar.big.nft-samurai { background-image: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.86)), url("./assets/visuals/admin-overview.png") !important; background-size: cover !important; background-position: 18% 78% !important; }
.reward-card.reward-cosmic:before { background-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.2)), url("./assets/visuals/wallet-rewards.png") !important; background-size: cover !important; background-position: center !important; }
.reward-card.reward-wave:before { background-image: linear-gradient(90deg, rgba(0,0,0,.75), rgba(0,0,0,.2)), url("./assets/visuals/cidenflow-mobile-feed.png") !important; background-size: cover !important; background-position: center !important; }
.wallet-page .wallet-balance { background-image: linear-gradient(90deg, rgba(5,10,22,.92), rgba(5,10,22,.55)), url("./assets/visuals/wallet-rewards.png"); background-size: cover; background-position: center; }
.wallet-page .chain-ready { background-image: linear-gradient(90deg, rgba(5,10,22,.94), rgba(5,10,22,.48)), url("./assets/visuals/wallet-rewards.png"); background-size: cover; background-position: right center; }
.card-visual { background-image: linear-gradient(135deg, rgba(124,61,255,.5), rgba(32,228,255,.18)), url("./assets/visuals/wallet-rewards.png"); background-size: cover; background-position: 78% 24%; min-height: 210px; }
.admin-page .chart-panel:first-child { background-image: linear-gradient(90deg, rgba(5,10,22,.92), rgba(5,10,22,.72)), url("./assets/visuals/admin-overview.png"); background-size: cover; background-position: center; }
.admin-page .chart-panel:nth-child(2) { background-image: linear-gradient(90deg, rgba(5,10,22,.92), rgba(5,10,22,.56)), url("./assets/visuals/admin-overview.png"); background-size: cover; background-position: 55% center; }
.studio-shell .studio-stage,
.stage-box {
  background-image: linear-gradient(90deg, rgba(5,10,22,.88), rgba(5,10,22,.5)), url("./assets/visuals/studio-empty-stage.png") !important;
  background-size: cover !important;
  background-position: center !important;
}
.quick-sheet { background-image: linear-gradient(180deg, rgba(5,10,22,.97), rgba(5,10,22,.9)), url("./assets/visuals/quick-join.png"); background-size: cover; background-position: center top; }
.content-card,
.original-card,
.product-card,
.cert-card,
.nft-card,
.reward-card,
.hero,
.commerce-hero,
.panel {
  box-shadow: 0 20px 65px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.06);
}
.content-card,
.product-card,
.cert-card,
.nft-card,
.reward-card {
  min-height: 215px;
}
.scroll-row { grid-auto-columns: minmax(250px, 1fr); }
/* V75 VISUAL SEED LAYER END */



/* V75 FEED VISUAL REBUILD CSS START */
.v75-feed-upgrade .feed-main { gap: 1rem; }
.feed-vision-hero {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .88fr) minmax(420px, 1.45fr);
  gap: 1.15rem;
  align-items: stretch;
  min-height: 330px;
  padding: 1.15rem;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background:
    radial-gradient(circle at 82% 12%, rgba(32, 228, 255, .18), transparent 28%),
    linear-gradient(135deg, rgba(12, 24, 48, .95), rgba(31, 18, 72, .72));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.feed-vision-hero:before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(3, 8, 19, .86), transparent 58%);
  pointer-events: none;
}
.feed-vision-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding: .6rem .35rem; }
.eyebrow { width: max-content; padding: .36rem .62rem; border-radius: 999px; color: var(--cyan); background: rgba(32, 228, 255, .1); border: 1px solid rgba(32, 228, 255, .25); font-weight: 900; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; }
.feed-vision-copy h1 { margin: .9rem 0 .45rem; font-size: clamp(2.05rem, 4vw, 3.65rem); line-height: .95; letter-spacing: -.055em; }
.feed-vision-copy p { max-width: 520px; color: #c8d7ec; font-size: 1.02rem; line-height: 1.55; }
.feed-vision-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .65rem; margin-top: 1rem; }
.feed-vision-stats b { padding: .7rem; border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.045); font-size: 1.05rem; }
.feed-vision-stats small { display: block; color: var(--muted); font-size: .68rem; margin-top: .2rem; }
.feed-vision-media { position: relative; z-index: 2; min-height: 300px; }
.desktop-preview, .phone-preview { border: 1px solid rgba(140, 197, 255, .2); background: rgba(0, 0, 0, .22); overflow: hidden; box-shadow: 0 22px 70px rgba(0,0,0,.38); }
.desktop-preview { height: 100%; border-radius: 20px; }
.desktop-preview img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.phone-preview { position: absolute; width: 145px; height: 258px; right: 1rem; bottom: .8rem; border-radius: 24px; transform: rotate(1.5deg); }
.phone-preview img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; }
.vivid-module { border-color: rgba(32, 228, 255, .2); background: linear-gradient(180deg, rgba(12,24,45,.86), rgba(8,18,34,.78)); }
.visual-card-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.visual-content-card { position: relative; min-height: 272px; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.035); cursor: pointer; }
.visual-content-card img { width: 100%; height: 164px; display: block; object-fit: cover; object-position: top center; filter: saturate(1.12) contrast(1.05); }
.visual-content-card:after { content: ""; position: absolute; left: 0; right: 0; top: 95px; height: 90px; background: linear-gradient(transparent, rgba(3,8,19,.92)); pointer-events: none; }
.visual-content-card div { position: relative; z-index: 2; padding: .9rem; }
.visual-content-card span { display: inline-flex; padding: .25rem .48rem; margin-bottom: .45rem; border-radius: 999px; background: rgba(32,228,255,.13); color: var(--cyan); border: 1px solid rgba(32,228,255,.24); font-weight: 900; font-size: .68rem; }
.visual-content-card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.visual-content-card p { min-height: 42px; margin: 0 0 .75rem; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.visual-content-card button { padding: .45rem .65rem; }
@media (max-width: 1180px) {
  .feed-vision-hero { grid-template-columns: 1fr; }
  .feed-vision-media { min-height: 260px; }
  .visual-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .feed-vision-hero { padding: .85rem; min-height: auto; }
  .feed-vision-stats { grid-template-columns: 1fr; }
  .desktop-preview { height: 230px; }
  .phone-preview { display: none; }
  .visual-card-grid { grid-template-columns: 1fr; }
  .visual-content-card { min-height: auto; }
}
/* V75 FEED VISUAL REBUILD CSS END */



/* V75 STUDIO VISUAL REBUILD CSS START */
.studio-v75-pro {
  grid-template-columns: minmax(250px, .78fr) minmax(560px, 1.85fr) minmax(280px, .9fr);
  gap: .85rem;
  min-height: calc(100vh - 92px);
}
.studio-command-left,
.studio-command-center,
.studio-command-right {
  display: flex;
  flex-direction: column;
  gap: .8rem;
  min-width: 0;
}
.studio-brand-mini { padding: .9rem; border: 1px solid var(--line2); border-radius: 18px; background: linear-gradient(135deg, rgba(32,228,255,.11), rgba(124,61,255,.12)); }
.studio-brand-mini b { display: block; font-size: 1.05rem; }
.studio-brand-mini small { color: var(--muted); }
.voice-access-box p { color: var(--muted); line-height: 1.35; margin: .25rem 0 .7rem; }
.access-button-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.voice-big, .scene-pill, .source-pill { min-height: 42px; justify-content: flex-start; gap: .55rem; }
.voice-big.active, .source-pill:hover, .scene-pill.active { border-color: rgba(32,228,255,.45); box-shadow: 0 0 0 1px rgba(32,228,255,.12), 0 0 26px rgba(32,228,255,.08); }
.neon-led { width: 8px; height: 8px; border-radius: 50%; background: rgba(148,167,191,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.15); }
.neon-led.on { background: var(--green); box-shadow: 0 0 14px rgba(101,255,186,.85); }
.scene-pill, .source-pill { width: 100%; display: flex; align-items: center; margin-bottom: .38rem; padding: .56rem .62rem; border: 1px solid var(--line); border-radius: 14px; background: rgba(255,255,255,.045); color: var(--text); }
.scene-pill b { color: var(--cyan); }
.scene-pill span, .source-pill span { flex: 1; text-align: left; }
.pro-effects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pro-effects button { position: relative; min-height: 72px; flex-direction: column; align-items: flex-start; padding: .7rem; }
.pro-effects button span { font-size: 1.25rem; }
.pro-effects button small { color: var(--muted); font-size: .66rem; }
.pro-effects .neon-led { position: absolute; right: .65rem; top: .65rem; }
.studio-top-command { display: flex; justify-content: space-between; gap: 1rem; padding: 1rem; border: 1px solid var(--line2); border-radius: 22px; background: radial-gradient(circle at 78% 15%, rgba(32,228,255,.15), transparent 34%), rgba(9,19,36,.72); }
.studio-top-command h1 { margin: .5rem 0 .3rem; font-size: clamp(1.65rem, 3vw, 2.75rem); letter-spacing: -.04em; }
.studio-top-command p { margin: 0; color: var(--muted); max-width: 620px; }
.studio-live-state { display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; gap: .45rem; min-width: 220px; }
.studio-live-state .ready { width: 100%; text-align: right; color: var(--green); }
.pro-toolbar { border: 1px solid var(--line); border-radius: 16px; background: rgba(255,255,255,.04); }
.empty-stage-pro { position: relative; min-height: 515px; border: 1px solid rgba(32,228,255,.22); border-radius: 26px; overflow: hidden; background: radial-gradient(circle at 50% 25%, rgba(32,228,255,.13), transparent 38%), linear-gradient(180deg, rgba(6,14,28,.96), rgba(3,8,19,.92)); box-shadow: var(--shadow); }
.stage-grid-lines { position: absolute; inset: 0; background-image: linear-gradient(rgba(140,197,255,.08) 1px, transparent 1px), linear-gradient(90deg, rgba(140,197,255,.08) 1px, transparent 1px); background-size: 42px 42px; mask-image: radial-gradient(circle at 50% 45%, black, transparent 82%); }
.stage-safe-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(45%, 310px); aspect-ratio: 9/16; border: 1px dashed rgba(32,228,255,.6); border-radius: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem; padding: 1.1rem; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.015)); box-shadow: 0 0 48px rgba(32,228,255,.12); }
.stage-safe-frame span { font-size: 2rem; color: var(--cyan); }
.stage-safe-frame h2 { margin: 0; font-size: 1.35rem; }
.stage-safe-frame p { margin: 0; color: var(--muted); }
.stage-safe-frame small { color: #bdd1e8; }
.stage-blueprint { position: absolute; right: 1rem; bottom: 1rem; width: min(38%, 290px); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(3,8,19,.74); box-shadow: 0 18px 60px rgba(0,0,0,.38); }
.stage-blueprint img { width: 100%; height: 150px; display: block; object-fit: cover; object-position: center; opacity: .88; }
.stage-blueprint b, .stage-blueprint small { display: block; padding: .25rem .75rem; }
.stage-blueprint small { padding-bottom: .7rem; color: var(--muted); }
.pro-stats, .pro-controls { border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.04); }
.pro-controls .go-live { min-width: 170px; }
.pro-guest-dock { grid-template-columns: repeat(6, minmax(122px, 1fr)); gap: .55rem; }
.pro-guest-dock .guest-card { min-width: 0; }
.translator-pro label { display: grid; gap: .28rem; margin: .55rem 0; color: var(--muted); }
.translator-pro select { width: 100%; padding: .55rem; border-radius: 12px; border: 1px solid var(--line); background: rgba(0,0,0,.18); color: var(--text); }
.lang-switch, .translate-state { display: flex; gap: .45rem; flex-wrap: wrap; }
.lang-switch button.active { border-color: rgba(32,228,255,.5); color: var(--cyan); }
.translate-state span { padding: .4rem .55rem; border-radius: 999px; background: rgba(32,228,255,.08); border: 1px solid rgba(32,228,255,.18); font-size: .78rem; }
.ai-coach-pro .ai-score { align-items: center; }
.compact-chat .chat-line { padding: .45rem 0; }
@media (max-width: 1300px) { .studio-v75-pro { grid-template-columns: 1fr; } .empty-stage-pro { min-height: 460px; } .pro-guest-dock { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px) { .stage-safe-frame { width: 58%; } .stage-blueprint { display: none; } .pro-guest-dock { grid-template-columns: 1fr 1fr; } .access-button-grid, .pro-effects { grid-template-columns: 1fr; } }
/* V75 STUDIO VISUAL REBUILD CSS END */



/* V75 MARKETPLACE VISUAL REBUILD CSS START */
.market-v75-pro { display: grid; gap: 1rem; }
.market-head .eyebrow { margin-bottom: .55rem; }
.market-tabs { position: sticky; top: 66px; z-index: 5; backdrop-filter: blur(18px); }
.market-hero-pro {
  position: relative;
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(420px, 1.4fr) minmax(220px, .55fr);
  gap: 1rem;
  min-height: 360px;
  padding: 1.05rem;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background: radial-gradient(circle at 70% 0%, rgba(124, 61, 255, .2), transparent 30%), linear-gradient(135deg, rgba(12, 24, 45, .95), rgba(20, 18, 62, .75));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.market-hero-copy { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; }
.market-hero-copy h1 { margin: .75rem 0 .4rem; font-size: clamp(2rem, 3.5vw, 3.45rem); line-height: .95; letter-spacing: -.045em; }
.market-hero-copy p { color: #c8d7ec; line-height: 1.5; max-width: 520px; }
.market-hero-visual { position: relative; min-height: 330px; border: 1px solid rgba(32,228,255,.18); border-radius: 22px; overflow: hidden; background: rgba(0,0,0,.2); }
.market-hero-visual > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(1.12) contrast(1.05); }
.market-hero-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,19,.2), rgba(3,8,19,.72)); pointer-events: none; }
.live-deal-stack { position: absolute; right: .8rem; top: .8rem; z-index: 2; width: min(290px, 42%); border: 1px solid var(--line); border-radius: 18px; padding: .85rem; background: rgba(3,8,19,.8); backdrop-filter: blur(14px); }
.market-trust-panel { border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: rgba(3,8,19,.64); align-self: stretch; }
.market-trust-panel ul { margin: .85rem 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.75; }
.market-product-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .85rem; }
.market-product-card { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.035); min-height: 260px; }
.market-product-card img { width: 100%; height: 122px; display: block; object-fit: cover; object-position: top center; opacity: .9; }
.market-product-card div { padding: .75rem; display: grid; gap: .22rem; }
.market-product-card span { width: max-content; padding: .22rem .46rem; border-radius: 999px; color: var(--cyan); border: 1px solid rgba(32,228,255,.24); background: rgba(32,228,255,.1); font-size: .65rem; font-weight: 900; }
.market-product-card h3 { margin: .15rem 0; font-size: .98rem; }
.market-product-card small, .market-product-card em { color: var(--muted); font-style: normal; }
.market-product-card b { color: var(--green); }
.market-product-card button { margin-top: .3rem; padding: .45rem .55rem; }
.market-pro-grid { display: grid; grid-template-columns: 1fr 1fr minmax(250px, .55fr); gap: 1rem; align-items: start; }
.proof-product-grid, .nft-drop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.gift-progress { height: 8px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; margin: .75rem 0 1rem; }
.gift-progress span { display: block; height: 100%; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.gift-resale-panel { display: grid; gap: .65rem; }
.market-benefits { justify-content: space-around; }
@media (max-width: 1300px) {
  .market-hero-pro { grid-template-columns: 1fr; }
  .market-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market-pro-grid { grid-template-columns: 1fr; }
  .live-deal-stack { width: min(320px, 52%); }
}
@media (max-width: 720px) {
  .market-hero-pro { padding: .85rem; }
  .market-hero-visual { min-height: 230px; }
  .live-deal-stack { position: relative; inset: auto; width: auto; margin: .75rem; }
  .market-product-grid, .proof-product-grid, .nft-drop-grid { grid-template-columns: 1fr; }
}
/* V75 MARKETPLACE VISUAL REBUILD CSS END */



/* V75 WALLET VISUAL REBUILD CSS START */
.wallet-v75-pro { display: grid; gap: 1rem; }
.wallet-head .eyebrow { margin-bottom: .5rem; }
.wallet-hero-pro {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.3fr) minmax(240px, .56fr);
  gap: 1rem;
  min-height: 360px;
  padding: 1.05rem;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background: radial-gradient(circle at 75% 0%, rgba(32,228,255,.18), transparent 30%), linear-gradient(135deg, rgba(5,14,30,.96), rgba(25,19,70,.75));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.wallet-balance-pro { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.wallet-balance-pro h1 { margin: .7rem 0 .25rem; font-size: clamp(2.15rem, 4.2vw, 4.4rem); line-height: .92; letter-spacing: -.055em; }
.wallet-balance-pro p { color: #c8d7ec; }
.wallet-action-row { display: flex; flex-wrap: wrap; gap: .55rem; margin: 1rem 0; }
.wallet-mini-stats { display: flex; flex-wrap: wrap; gap: .45rem; }
.wallet-mini-stats span { padding: .36rem .55rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); background: rgba(255,255,255,.04); font-size: .75rem; }
.wallet-visual-pro { position: relative; min-height: 330px; border: 1px solid rgba(32,228,255,.2); border-radius: 22px; overflow: hidden; background: rgba(0,0,0,.22); }
.wallet-visual-pro > img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(1.14) contrast(1.04); }
.wallet-visual-pro:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,19,.12), rgba(3,8,19,.66)); pointer-events: none; }
.wallet-card-float { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; width: min(285px, 58%); border: 1px solid rgba(32,228,255,.24); border-radius: 18px; padding: .85rem; background: rgba(3,8,19,.82); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.wallet-card-float b, .wallet-card-float strong, .wallet-card-float small { display: block; }
.wallet-card-float strong { margin: .35rem 0; color: var(--cyan); letter-spacing: .08em; }
.wallet-security-panel { border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: rgba(3,8,19,.64); }
.wallet-security-panel ul { margin: .85rem 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.75; }
.wallet-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; }
.wallet-stat-card { border: 1px solid var(--line); border-radius: 18px; padding: .9rem; background: rgba(255,255,255,.035); box-shadow: inset 0 1px 0 rgba(255,255,255,.05); }
.wallet-stat-card span { color: var(--muted); font-size: .78rem; }
.wallet-stat-card b { display: block; margin: .35rem 0 .1rem; font-size: 1.25rem; }
.wallet-stat-card small { color: var(--muted); }
.wallet-stat-card .bar { margin-top: .7rem; }
.wallet-stat-card .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.wallet-dashboard-pro { display: grid; grid-template-columns: 1.15fr .85fr .95fr; gap: 1rem; align-items: start; }
.wallet-transactions-pro { grid-row: span 2; }
.reward-season-visual { height: 150px; border-radius: 16px; overflow: hidden; margin: .65rem 0; border: 1px solid var(--line); }
.reward-season-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.nft-wallet-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }
.nft-wallet-card { min-height: 116px; border-radius: 16px; padding: .72rem; display: grid; align-content: end; border: 1px solid var(--line); background-size: cover; background-position: center; overflow: hidden; }
.nft-wallet-card span, .nft-wallet-card b, .nft-wallet-card small { position: relative; z-index: 1; }
.earn-lines, .chain-pill-grid { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.earn-lines span, .chain-pill-grid span { padding: .34rem .52rem; border-radius: 999px; border: 1px solid rgba(32,228,255,.2); background: rgba(32,228,255,.08); color: #c8f6ff; font-size: .75rem; }
.quest-line { display: flex; justify-content: space-between; gap: .7rem; padding: .55rem 0; border-bottom: 1px solid var(--line); }
.quest-line span { color: var(--green); font-weight: 900; }
@media (max-width: 1300px) {
  .wallet-hero-pro { grid-template-columns: 1fr; }
  .wallet-stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wallet-dashboard-pro { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .wallet-hero-pro { padding: .85rem; }
  .wallet-visual-pro { min-height: 230px; }
  .wallet-card-float { position: relative; right: auto; bottom: auto; width: auto; margin: .75rem; }
  .wallet-stat-grid, .nft-wallet-grid { grid-template-columns: 1fr; }
}
/* V75 WALLET VISUAL REBUILD CSS END */



/* V75 LIVE ARENA VISUAL REBUILD CSS START */
.live-v75-pro { display: grid; gap: 1rem; }
.live-head-pro .eyebrow { margin-bottom: .5rem; }
.live-hero-pro {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(440px, 1.25fr) minmax(230px, .55fr);
  gap: 1rem;
  min-height: 390px;
  padding: 1.05rem;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background: radial-gradient(circle at 68% 0%, rgba(32,228,255,.16), transparent 30%), linear-gradient(135deg, rgba(5,14,30,.96), rgba(42,20,72,.72));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.live-hero-copy { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.live-hero-copy h1 { margin: .75rem 0 .35rem; font-size: clamp(2.1rem, 4.6vw, 4.65rem); line-height: .9; letter-spacing: -.055em; }
.live-hero-copy p { color: #c7d7ec; max-width: 620px; }
.live-hero-actions, .live-hero-stats { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .95rem; }
.live-hero-stats span { padding: .35rem .55rem; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); background: rgba(255,255,255,.04); font-size: .78rem; }
.live-hero-visual { position: relative; min-height: 350px; border: 1px solid rgba(32,228,255,.22); border-radius: 22px; overflow: hidden; background: rgba(0,0,0,.2); }
.live-hero-visual img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(1.14) contrast(1.04); }
.live-hero-visual:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,19,.04), rgba(3,8,19,.68)); pointer-events: none; }
.live-floating-proof { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; border: 1px solid rgba(32,228,255,.24); border-radius: 18px; padding: .78rem; background: rgba(3,8,19,.82); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.live-floating-proof b, .live-floating-proof span, .live-floating-proof small { display: block; }
.live-floating-proof span { color: var(--green); margin: .15rem 0; }
.live-side-panel { border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: rgba(3,8,19,.64); display: grid; gap: .65rem; align-content: start; }
.pulse-line { display: flex; justify-content: space-between; gap: .7rem; padding: .52rem 0; border-bottom: 1px solid var(--line); }
.pulse-line span { color: var(--cyan); font-weight: 900; }
.live-category-strip { display: flex; gap: .55rem; overflow-x: auto; padding: .25rem .05rem; }
.live-category-strip button { white-space: nowrap; border: 1px solid var(--line); background: rgba(255,255,255,.035); }
.live-category-strip button.active { border-color: rgba(32,228,255,.55); color: var(--cyan); box-shadow: 0 0 0 1px rgba(32,228,255,.12); }
.live-arena-grid { display: grid; grid-template-columns: 1fr 290px; gap: 1rem; align-items: start; }
.live-room-area { grid-row: span 3; }
.live-room-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .85rem; }
.live-room-card { position: relative; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: rgba(255,255,255,.035); min-height: 310px; }
.live-room-card img { width: 100%; height: 148px; display: block; object-fit: cover; object-position: top center; filter: saturate(1.12) contrast(1.04); }
.live-room-card div { padding: .75rem; }
.live-room-card h3 { margin: .45rem 0 .2rem; font-size: 1rem; }
.live-room-card small, .live-room-card p { color: var(--muted); }
.live-room-card p { min-height: 24px; }
.room-actions { display: flex; gap: .45rem; padding: .4rem 0 0 !important; }
.live-trending-panel, .live-battle-panel, .live-creator-panel { display: grid; gap: .65rem; }
.trend-row { display: grid; grid-template-columns: 28px 1fr; gap: .45rem; border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.trend-row b { color: var(--cyan); }
.trend-row small { grid-column: 2; color: var(--muted); }
.battle-card { border: 1px solid var(--line); border-radius: 14px; padding: .7rem; background: rgba(255,255,255,.035); }
.battle-card b, .battle-card span, .battle-card small { display: block; }
.battle-card span { color: var(--cyan); margin: .25rem 0; }
.creator-live-row { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: .55rem; border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
@media (max-width: 1360px) {
  .live-hero-pro { grid-template-columns: 1fr; }
  .live-arena-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
  .live-room-grid { grid-template-columns: 1fr; }
  .live-hero-pro { padding: .85rem; }
  .live-hero-visual { min-height: 230px; }
}
/* V75 LIVE ARENA VISUAL REBUILD CSS END */



/* V75 ADMIN VISUAL REBUILD CSS START */
.admin-v75-pro { display: grid; gap: 1rem; }
.admin-head-pro .eyebrow { margin-bottom: .5rem; }
.admin-hero-pro {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(440px, 1.25fr) minmax(230px, .55fr);
  gap: 1rem;
  min-height: 390px;
  padding: 1.05rem;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background: radial-gradient(circle at 70% 0%, rgba(32,228,255,.16), transparent 30%), linear-gradient(135deg, rgba(5,14,30,.96), rgba(26,22,72,.72));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.admin-copy-pro { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.admin-copy-pro h1 { margin: .75rem 0 .35rem; font-size: clamp(2.1rem, 4.4vw, 4.5rem); line-height: .92; letter-spacing: -.055em; }
.admin-copy-pro p { color: #c7d7ec; max-width: 620px; }
.admin-action-row { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .95rem; }
.admin-visual-pro { position: relative; min-height: 350px; border: 1px solid rgba(32,228,255,.22); border-radius: 22px; overflow: hidden; background: rgba(0,0,0,.2); }
.admin-visual-pro img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(1.12) contrast(1.04); }
.admin-visual-pro:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,19,.04), rgba(3,8,19,.68)); pointer-events: none; }
.admin-float-card { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; border: 1px solid rgba(32,228,255,.24); border-radius: 18px; padding: .78rem; background: rgba(3,8,19,.82); backdrop-filter: blur(16px); box-shadow: var(--shadow); }
.admin-float-card b, .admin-float-card span, .admin-float-card small { display: block; }
.admin-float-card span { color: var(--green); margin: .15rem 0; }
.admin-risk-panel { border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: rgba(3,8,19,.64); display: grid; gap: .65rem; align-content: start; }
.risk-meter { width: 138px; height: 138px; border-radius: 999px; display: grid; place-content: center; text-align: center; margin: .25rem auto; border: 1px solid rgba(255,91,138,.28); background: radial-gradient(circle, rgba(255,91,138,.2), rgba(124,61,255,.08)); }
.risk-meter b { font-size: 2.2rem; color: var(--danger); }
.risk-meter span { color: var(--muted); font-size: .75rem; }
.admin-risk-panel ul { margin: 0; padding-left: 1.1rem; color: var(--muted); line-height: 1.7; }
.admin-kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .75rem; }
.admin-kpi-card { border: 1px solid var(--line); border-radius: 18px; padding: .85rem; background: rgba(255,255,255,.035); }
.admin-kpi-card span { color: var(--muted); font-size: .72rem; }
.admin-kpi-card b { display: block; margin: .3rem 0 .1rem; font-size: 1.25rem; }
.admin-kpi-card small { color: var(--green); }
.admin-kpi-card .bar { margin-top: .65rem; }
.admin-kpi-card .bar i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--purple), var(--cyan)); }
.admin-dashboard-pro { display: grid; grid-template-columns: 1.25fr .85fr .85fr; gap: 1rem; align-items: start; }
.admin-chart-panel { grid-row: span 2; }
.fake-chart.admin-chart { height: 250px; display: flex; align-items: end; gap: .55rem; border: 1px solid var(--line); border-radius: 18px; padding: .8rem; background: linear-gradient(180deg, rgba(32,228,255,.08), rgba(124,61,255,.04)); }
.fake-chart.admin-chart i { flex: 1; border-radius: 999px 999px 6px 6px; background: linear-gradient(180deg, var(--cyan), var(--purple)); box-shadow: 0 0 22px rgba(32,228,255,.22); }
.chart-legend, .admin-revenue-lines { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem; }
.chart-legend span, .admin-revenue-lines span { padding: .32rem .5rem; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: .75rem; }
.admin-mini-visual { height: 132px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin: .55rem 0; }
.admin-mini-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.admin-list-line, .admin-queue-row { display: flex; justify-content: space-between; gap: .65rem; align-items: center; border-bottom: 1px solid var(--line); padding: .55rem 0; }
.admin-list-line span, .admin-queue-row small { color: var(--muted); display: block; }
.admin-queue-row button { padding: .42rem .58rem; }
@media (max-width: 1400px) {
  .admin-hero-pro { grid-template-columns: 1fr; }
  .admin-kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .admin-dashboard-pro { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .admin-hero-pro { padding: .85rem; }
  .admin-kpi-grid { grid-template-columns: 1fr 1fr; }
  .admin-visual-pro { min-height: 230px; }
}
/* V75 ADMIN VISUAL REBUILD CSS END */



/* V75 PROFILE CIDENCARD VISUAL REBUILD CSS START */
.profile-v75-pro { display: grid; gap: 1rem; }
.profile-head-pro .eyebrow { margin-bottom: .5rem; }
.profile-hero-pro {
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(420px, 1.2fr) minmax(235px, .58fr);
  gap: 1rem;
  min-height: 390px;
  padding: 1.05rem;
  border: 1px solid var(--line2);
  border-radius: 24px;
  background: radial-gradient(circle at 68% 0%, rgba(32,228,255,.18), transparent 32%), linear-gradient(135deg, rgba(5,14,30,.96), rgba(34,20,80,.72));
  box-shadow: var(--shadow);
  overflow: hidden;
}
.cidencard-pro { display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 2; }
.cidencard-pro h1 { margin: .75rem 0 .25rem; font-size: clamp(2rem, 4vw, 4.2rem); line-height: .9; letter-spacing: -.052em; }
.cidencard-pro p { color: #c7d7ec; }
.profile-orbit { position: relative; width: max-content; }
.profile-orbit .neon-led { position: absolute; right: 2px; bottom: 5px; }
.cidencard-number { width: max-content; max-width: 100%; margin-top: .8rem; padding: .55rem .75rem; border: 1px solid rgba(32,228,255,.25); border-radius: 14px; color: var(--cyan); background: rgba(32,228,255,.08); font-weight: 900; letter-spacing: .04em; }
.profile-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: .95rem; }
.profile-visual-pro { position: relative; min-height: 350px; border: 1px solid rgba(32,228,255,.22); border-radius: 22px; overflow: hidden; background: rgba(0,0,0,.2); }
.profile-visual-pro img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: top center; filter: saturate(1.13) contrast(1.04); }
.profile-visual-pro:after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(3,8,19,.05), rgba(3,8,19,.68)); pointer-events: none; }
.profile-float-card { position: absolute; right: .9rem; bottom: .9rem; z-index: 2; border: 1px solid rgba(32,228,255,.24); border-radius: 18px; padding: .78rem; background: rgba(3,8,19,.82); backdrop-filter: blur(16px); box-shadow: var(--shadow); max-width: 290px; }
.profile-float-card b, .profile-float-card span, .profile-float-card small { display: block; }
.profile-float-card span { color: #c7d7ec; margin: .18rem 0; }
.trust-panel-pro { border: 1px solid var(--line); border-radius: 20px; padding: 1rem; background: rgba(3,8,19,.64); display: grid; gap: .65rem; align-content: start; }
.trust-meter { width: 138px; height: 138px; border-radius: 999px; display: grid; place-content: center; text-align: center; margin: .25rem auto; border: 1px solid rgba(101,255,186,.28); background: radial-gradient(circle, rgba(101,255,186,.2), rgba(32,228,255,.08)); }
.trust-meter b { font-size: 2.35rem; color: var(--green); }
.trust-meter span { color: var(--muted); font-size: .75rem; }
.identity-grid-pro { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.identity-card { border: 1px solid var(--line); border-radius: 18px; padding: .85rem; background: rgba(255,255,255,.035); }
.identity-card span { color: var(--muted); font-size: .75rem; }
.identity-card b { display: block; margin-top: .35rem; color: var(--cyan); }
.profile-dashboard-pro { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; align-items: start; }
.permission-grid { display: flex; flex-wrap: wrap; gap: .45rem; }
.permission-grid span { padding: .36rem .55rem; border-radius: 999px; border: 1px solid rgba(32,228,255,.22); background: rgba(32,228,255,.08); color: #c8f6ff; font-size: .78rem; }
.profile-mini-visual { height: 132px; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); margin: .55rem 0; }
.profile-mini-visual img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.proof-row { display: flex; justify-content: space-between; align-items: center; gap: .65rem; border-bottom: 1px solid var(--line); padding: .55rem 0; }
.proof-row small { display: block; color: var(--muted); }
.proof-row span { color: var(--green); font-weight: 900; }
@media (max-width: 1350px) {
  .profile-hero-pro { grid-template-columns: 1fr; }
  .identity-grid-pro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-dashboard-pro { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .profile-hero-pro { padding: .85rem; }
  .profile-visual-pro { min-height: 250px; }
  .identity-grid-pro { grid-template-columns: 1fr; }
}
/* V75 PROFILE CIDENCARD VISUAL REBUILD CSS END */



/* V75 CIDENBRIDGEDB BRIDGE CSS START */
.cdb-bridge-panel { position: relative; overflow: hidden; }
.cdb-bridge-panel:before {
  content: "";
  position: absolute;
  inset: -40% -20% auto auto;
  width: 240px;
  height: 240px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(32,228,255,.18), transparent 68%);
  pointer-events: none;
}
.cdb-loading {
  padding: .8rem;
  border: 1px solid var(--line);
  border-radius: 14px;
  color: var(--muted);
  background: rgba(255,255,255,.035);
}
.cdb-bridge-status {
  display: grid;
  gap: .25rem;
  margin-bottom: .75rem;
  padding: .7rem;
  border: 1px solid rgba(32,228,255,.22);
  border-radius: 16px;
  background: rgba(32,228,255,.06);
}
.cdb-bridge-status span {
  width: max-content;
  padding: .2rem .48rem;
  border-radius: 999px;
  font-size: .7rem;
  color: var(--green);
  border: 1px solid rgba(101,255,186,.25);
}
.cdb-bridge-status.fallback span {
  color: var(--warn);
  border-color: rgba(255,209,102,.28);
}
.cdb-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .55rem;
}
.cdb-mini-grid article {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .65rem;
  background: rgba(255,255,255,.035);
}
.cdb-mini-grid span {
  display: block;
  color: var(--muted);
  font-size: .72rem;
}
.cdb-mini-grid b {
  display: block;
  margin-top: .22rem;
  color: var(--cyan);
  font-size: 1.08rem;
}
.cdb-module-row {
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin: .75rem 0;
}
.cdb-module-row span {
  padding: .28rem .48rem;
  border-radius: 999px;
  color: #c8f6ff;
  border: 1px solid rgba(32,228,255,.2);
  background: rgba(32,228,255,.07);
  font-size: .72rem;
}
.cdb-sector-list {
  display: grid;
  gap: .45rem;
}
.cdb-sector-list div {
  border-bottom: 1px solid var(--line);
  padding: .45rem 0;
}
.cdb-sector-list b,
.cdb-sector-list small {
  display: block;
}
.cdb-sector-list small {
  color: var(--muted);
}
@media (max-width: 720px) {
  .cdb-mini-grid { grid-template-columns: 1fr 1fr; }
}
/* V75 CIDENBRIDGEDB BRIDGE CSS END */



/* V75 MOBILE FEED CLEAN VISUAL CSS START */
.mobile-clean-feed { display: none; }

@media (max-width: 760px) {
  .topbar,
  .sidebar,
  .right-rail,
  .feed-main > :not(.mobile-clean-feed),
  .feed-vision-hero,
  .visual-card-grid {
    display: none !important;
  }

  .app-shell { display: block; min-height: 100svh; padding: 0; }
  .page-area { padding: 0 !important; margin: 0 !important; width: 100%; min-height: 100svh; overflow: hidden; }

  .mobile-clean-feed {
    display: block;
    position: relative;
    width: 100%;
    height: 100svh;
    min-height: 100svh;
    overflow: hidden;
    background: #02050b;
    color: #fff;
  }

  .mobile-clean-media,
  .mobile-clean-media img,
  .mobile-clean-shade {
    position: absolute;
    inset: 0;
  }

  .mobile-clean-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    filter: saturate(1.08) contrast(1.04);
  }

  .mobile-clean-shade {
    background:
      linear-gradient(180deg, rgba(0,0,0,.50), transparent 24%, transparent 58%, rgba(0,0,0,.84)),
      linear-gradient(90deg, rgba(0,0,0,.34), transparent 45%, rgba(0,0,0,.38));
    pointer-events: none;
  }

  .mobile-clean-top {
    position: absolute;
    z-index: 5;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 54px 1fr 44px;
    align-items: center;
    gap: .35rem;
    padding: .85rem .85rem .3rem;
  }

  .mini-live {
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .05em;
    background: rgba(4,8,18,.46);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 0 26px rgba(255,55,128,.32);
  }

  .mobile-clean-top nav {
    display: flex;
    justify-content: center;
    gap: clamp(.55rem, 3vw, 1.05rem);
    overflow: hidden;
  }

  .mobile-clean-top nav button,
  .mini-search {
    min-width: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.62);
    padding: 0;
    font-weight: 850;
    font-size: clamp(.78rem, 3.2vw, .98rem);
    white-space: nowrap;
  }

  .mobile-clean-top nav button.active {
    color: #fff;
    position: relative;
  }

  .mobile-clean-top nav button.active:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.44rem;
    transform: translateX(-50%);
    width: 22px;
    height: 3px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--cyan), var(--purple));
  }

  .mobile-clean-top nav .for-you { color: #f7a0ff; }

  .mini-search {
    width: 40px;
    height: 40px;
    position: relative;
    text-indent: -999px;
    overflow: hidden;
  }

  .mini-search:before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 3px solid #fff;
    border-radius: 999px;
  }

  .mini-search:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 3px;
    right: 6px;
    bottom: 8px;
    border-radius: 999px;
    transform: rotate(45deg);
    background: #fff;
  }

  .mobile-clean-actions {
    position: absolute;
    z-index: 5;
    right: .72rem;
    bottom: calc(6.15rem + env(safe-area-inset-bottom, 0));
    display: grid;
    justify-items: center;
    gap: .68rem;
  }

  .mobile-clean-actions:before {
    content: "...";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.14);
    margin-bottom: -.18rem;
  }

  .mobile-clean-actions button {
    width: 52px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    justify-items: center;
    gap: .18rem;
  }

  .mobile-clean-actions button i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    font-style: normal;
  }

  .mi-heart:before { content: "H"; font-size: 1.55rem; font-weight: 950; }
  .mi-chat:before { content: ".."; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 999px; background: #fff; color: #111; font-size: 1.1rem; font-weight: 950; }
  .mi-save:before { content: "S"; font-size: 1.45rem; font-weight: 950; }
  .mi-share:before { content: ">"; font-size: 1.8rem; font-weight: 950; }

  .mobile-clean-actions small {
    color: #fff;
    font-weight: 850;
    font-size: .8rem;
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
  }

  .live-avatar-entry {
    position: relative;
    height: 66px;
    margin-bottom: .05rem;
  }

  .live-avatar-entry span {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: block;
    background: url("./assets/visuals/cidenflow-mobile-feed-clean.png") center top / cover;
    border: 2px solid rgba(255,255,255,.68);
    box-shadow: 0 0 0 2px rgba(255,91,207,.58), 0 0 28px rgba(255,91,207,.62);
    animation: mobileLivePulse 1.45s ease-in-out infinite;
  }

  .live-avatar-entry b {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding: .12rem .35rem;
    border-radius: 7px;
    font-size: .62rem;
    background: linear-gradient(90deg, var(--purple), var(--pink));
    color: #fff;
  }

  .mobile-clean-caption {
    position: absolute;
    z-index: 5;
    left: .9rem;
    right: 5.4rem;
    bottom: calc(6rem + env(safe-area-inset-bottom, 0));
    display: grid;
    gap: .35rem;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.65);
  }

  .mobile-clean-caption strong {
    display: flex;
    align-items: center;
    gap: .42rem;
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -.02em;
  }

  .mobile-clean-caption strong span {
    width: 17px;
    height: 17px;
    border-radius: 999px;
    display: inline-block;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    position: relative;
  }

  .mobile-clean-caption strong span:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 6px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  .mobile-clean-caption p { margin: 0; font-size: 1rem; line-height: 1.22; }
  .mobile-clean-caption div { display: flex; flex-wrap: wrap; gap: .55rem; }
  .mobile-clean-caption em { color: #38d9ff; font-style: normal; font-size: .94rem; font-weight: 750; }

  .bottom-nav {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(5.25rem + env(safe-area-inset-bottom, 0));
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.94) 24%);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .bottom-nav button { color: rgba(255,255,255,.82); }
  .bottom-nav .create { box-shadow: 0 0 0 2px rgba(32,228,255,.65), 0 0 0 4px rgba(255,91,207,.32), 0 0 26px rgba(32,228,255,.4); }

  .mobile-nav,
  .mobile-nav-spacer {
    display: none !important;
  }

  @keyframes mobileLivePulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,91,207,.48), 0 0 22px rgba(255,91,207,.45); }
    50% { box-shadow: 0 0 0 5px rgba(255,91,207,.20), 0 0 36px rgba(32,228,255,.55); }
  }
}
/* V75 MOBILE FEED CLEAN VISUAL CSS END */



/* V75 MOBILE FEED BLACK SCREEN FIX CSS START */
@media (max-width: 760px) {
  body:has(.mobile-clean-feed) {
    background: #02050b !important;
    overflow: hidden !important;
  }

  body:has(.mobile-clean-feed) .content-grid,
  body:has(.mobile-clean-feed) .feed-main,
  body:has(.mobile-clean-feed) .right-rail,
  body:has(.mobile-clean-feed) .feed-vision-hero,
  body:has(.mobile-clean-feed) .visual-card-grid,
  body:has(.mobile-clean-feed) .topbar,
  body:has(.mobile-clean-feed) .sidebar {
    display: none !important;
  }

  body:has(.mobile-clean-feed) .page-area {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 20 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #02050b !important;
  }

  body:has(.mobile-clean-feed) .mobile-clean-feed {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 30 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.72)),
      url("./assets/visuals/cidenflow-mobile-feed-clean.png") center top / cover no-repeat,
      url("./assets/visuals/cidenflow-mobile-feed.png") center top / cover no-repeat,
      #02050b !important;
  }

  body:has(.mobile-clean-feed) .mobile-clean-media {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body:has(.mobile-clean-feed) .mobile-clean-media img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 1 !important;
  }

  body:has(.mobile-clean-feed) .mobile-clean-shade {
    z-index: 2 !important;
  }

  body:has(.mobile-clean-feed) .mobile-clean-top,
  body:has(.mobile-clean-feed) .mobile-clean-actions,
  body:has(.mobile-clean-feed) .mobile-clean-caption {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 35 !important;
  }

  body:has(.mobile-clean-feed) .bottom-nav {
    display: grid !important;
    z-index: 40 !important;
  }
}
/* V75 MOBILE FEED BLACK SCREEN FIX CSS END */



/* V75 MOBILE ROUTE CLASS FIX CSS START */
@media (max-width: 760px) {
  body.route-feed {
    background: #02050b !important;
    overflow: hidden !important;
  }

  body.route-feed .topbar,
  body.route-feed .sidebar,
  body.route-feed .content-grid,
  body.route-feed .right-rail,
  body.route-feed .feed-vision-hero,
  body.route-feed .visual-card-grid {
    display: none !important;
  }

  body.route-feed .page-area {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 20 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #02050b !important;
  }

  body.route-feed .mobile-clean-feed {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 30 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
    background:
      linear-gradient(180deg, rgba(0,0,0,.18), rgba(0,0,0,.78)),
      url("./assets/visuals/cidenflow-mobile-feed-clean.png") center top / cover no-repeat,
      #02050b !important;
  }

  body.route-feed .mobile-clean-media,
  body.route-feed .mobile-clean-media img {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center top !important;
    opacity: 1 !important;
    visibility: visible !important;
  }

  body.route-feed .mobile-clean-shade {
    display: block !important;
    z-index: 2 !important;
  }

  body.route-feed .mobile-clean-top,
  body.route-feed .mobile-clean-actions,
  body.route-feed .mobile-clean-caption {
    display: grid !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 35 !important;
  }

  body.route-feed .bottom-nav {
    display: grid !important;
    z-index: 40 !important;
  }
}
/* V75 MOBILE ROUTE CLASS FIX CSS END */



/* V75 APP FEED ROUTE CSS START */
.app-feed-screen { display: none; }

@media (max-width: 860px) {
  body.route-app-feed {
    margin: 0 !important;
    background: #02050b !important;
    overflow: hidden !important;
  }

  body.route-app-feed .topbar,
  body.route-app-feed .sidebar,
  body.route-app-feed .bottom-nav {
    display: none !important;
  }

  body.route-app-feed .app-shell,
  body.route-app-feed .page-area {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: hidden !important;
    background: #02050b !important;
  }

  body.route-app-feed .app-feed-screen {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    color: #fff;
    background:
      linear-gradient(180deg, rgba(0,0,0,.22), rgba(0,0,0,.82)),
      url("./assets/visuals/cidenflow-mobile-feed-clean.png") center top / cover no-repeat,
      #02050b;
  }

  .app-feed-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    z-index: 1;
  }

  .app-feed-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background:
      linear-gradient(180deg, rgba(0,0,0,.52), transparent 25%, transparent 58%, rgba(0,0,0,.84)),
      linear-gradient(90deg, rgba(0,0,0,.36), transparent 45%, rgba(0,0,0,.38));
  }

  .app-feed-tabs {
    position: absolute;
    z-index: 5;
    top: env(safe-area-inset-top, 0);
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 54px 1fr 42px;
    align-items: center;
    gap: .35rem;
    padding: .85rem .85rem .3rem;
  }

  .app-feed-tabs b {
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #fff;
    font-size: .72rem;
    letter-spacing: .05em;
    background: rgba(4,8,18,.46);
    border: 1px solid rgba(255,255,255,.18);
    box-shadow: 0 0 26px rgba(255,55,128,.32);
  }

  .app-feed-tabs nav {
    display: flex;
    justify-content: center;
    gap: clamp(.52rem, 3vw, 1rem);
    overflow: hidden;
    white-space: nowrap;
  }

  .app-feed-tabs span {
    color: rgba(255,255,255,.62);
    font-weight: 850;
    font-size: clamp(.78rem, 3.2vw, .98rem);
  }

  .app-feed-tabs .active {
    color: #fff;
    position: relative;
  }

  .app-feed-tabs .active:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -.44rem;
    width: 22px;
    height: 3px;
    border-radius: 999px;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--cyan), var(--purple));
  }

  .app-feed-tabs .for-you { color: #f7a0ff; }

  .app-feed-tabs i {
    width: 40px;
    height: 40px;
    text-indent: -999px;
    overflow: hidden;
    position: relative;
  }

  .app-feed-tabs i:before {
    content: "";
    position: absolute;
    inset: 8px;
    border: 3px solid #fff;
    border-radius: 999px;
  }

  .app-feed-tabs i:after {
    content: "";
    position: absolute;
    width: 12px;
    height: 3px;
    right: 6px;
    bottom: 8px;
    border-radius: 999px;
    transform: rotate(45deg);
    background: #fff;
  }

  .app-feed-rail {
    position: absolute;
    z-index: 5;
    right: .72rem;
    bottom: calc(6.15rem + env(safe-area-inset-bottom, 0));
    display: grid;
    gap: .68rem;
    justify-items: center;
  }

  .app-feed-rail:before {
    content: "...";
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #fff;
    background: rgba(0,0,0,.22);
    border: 1px solid rgba(255,255,255,.14);
    margin-bottom: -.18rem;
  }

  .app-feed-rail button {
    width: 52px;
    min-width: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    display: grid;
    justify-items: center;
    gap: .18rem;
  }

  .app-feed-rail i {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(0,0,0,.34);
    border: 1px solid rgba(255,255,255,.16);
    box-shadow: 0 10px 30px rgba(0,0,0,.28);
    font-style: normal;
    font-weight: 950;
    font-size: 1.45rem;
  }

  .app-feed-rail small {
    color: #fff;
    font-weight: 850;
    font-size: .8rem;
    text-shadow: 0 2px 10px rgba(0,0,0,.75);
  }

  .app-live-avatar {
    position: relative;
    height: 66px;
    margin-bottom: .05rem;
  }

  .app-live-avatar span {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: block;
    background: url("./assets/visuals/cidenflow-mobile-feed-clean.png") center top / cover;
    border: 2px solid rgba(255,255,255,.68);
    box-shadow: 0 0 0 2px rgba(255,91,207,.58), 0 0 28px rgba(255,91,207,.62);
    animation: appFeedPulse 1.45s ease-in-out infinite;
  }

  .app-live-avatar b {
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    padding: .12rem .35rem;
    border-radius: 7px;
    font-size: .62rem;
    background: linear-gradient(90deg, var(--purple), var(--pink));
    color: #fff;
  }

  .app-feed-meta {
    position: absolute;
    z-index: 5;
    left: .9rem;
    right: 5.35rem;
    bottom: calc(6rem + env(safe-area-inset-bottom, 0));
    display: grid;
    gap: .35rem;
    color: #fff;
    text-shadow: 0 2px 16px rgba(0,0,0,.65);
  }

  .app-feed-meta h2 {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .42rem;
    font-size: 1.25rem;
    font-weight: 950;
  }

  .app-feed-meta h2 small {
    width: 17px;
    height: 17px;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--cyan), var(--blue));
    position: relative;
  }

  .app-feed-meta h2 small:after {
    content: "";
    position: absolute;
    left: 5px;
    top: 4px;
    width: 6px;
    height: 4px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(-45deg);
  }

  .app-feed-meta p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.22;
  }

  .app-feed-meta div {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
  }

  .app-feed-meta span {
    color: #38d9ff;
    font-size: .94rem;
    font-weight: 750;
  }

  .app-feed-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    height: calc(5.25rem + env(safe-area-inset-bottom, 0));
    padding: .45rem .45rem env(safe-area-inset-bottom, .2rem);
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: .2rem;
    align-items: center;
    background: linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.94) 24%);
    border-top: 1px solid rgba(255,255,255,.08);
  }

  .app-feed-bottom button {
    min-width: 0;
    border: 0;
    background: transparent;
    color: rgba(255,255,255,.82);
    font-weight: 750;
    font-size: .8rem;
    position: relative;
  }

  .app-feed-bottom .create {
    width: 58px;
    height: 42px;
    border-radius: 15px;
    justify-self: center;
    font-size: 1.8rem;
    color: #fff;
    background: rgba(0,0,0,.28);
    box-shadow: 0 0 0 2px rgba(32,228,255,.65), 0 0 0 4px rgba(255,91,207,.32), 0 0 26px rgba(32,228,255,.4);
  }

  .app-feed-bottom b {
    position: absolute;
    top: -.35rem;
    right: .55rem;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    border-radius: 999px;
    background: var(--pink);
    color: #fff;
    font-size: .62rem;
  }

  @keyframes appFeedPulse {
    0%, 100% { box-shadow: 0 0 0 2px rgba(255,91,207,.48), 0 0 22px rgba(255,91,207,.45); }
    50% { box-shadow: 0 0 0 5px rgba(255,91,207,.20), 0 0 36px rgba(32,228,255,.55); }
  }
}
/* V75 APP FEED ROUTE CSS END */



/* V75 APP FEED ICON OVERLAY POLISH CSS START */
@media (max-width: 860px) {
  body.route-app-feed .app-feed-gradient {
    background:
      linear-gradient(180deg, rgba(0,0,0,.36), transparent 23%, transparent 60%, rgba(0,0,0,.70)),
      linear-gradient(90deg, rgba(0,0,0,.24), transparent 45%, rgba(0,0,0,.28)) !important;
  }

  body.route-app-feed .app-feed-tabs {
    padding-top: max(.65rem, env(safe-area-inset-top, 0));
  }

  body.route-app-feed .app-feed-tabs b {
    height: 30px;
    border-radius: 9px;
    font-size: .66rem;
    background: rgba(4,8,18,.34);
  }

  body.route-app-feed .app-feed-rail {
    gap: .58rem;
    right: .62rem;
    bottom: calc(5.8rem + env(safe-area-inset-bottom, 0));
  }

  body.route-app-feed .app-feed-rail button {
    width: 48px;
  }

  body.route-app-feed .app-feed-rail i {
    width: 44px;
    height: 44px;
    position: relative;
    overflow: hidden;
    background: rgba(0,0,0,.28);
    backdrop-filter: blur(10px);
    font-size: 0 !important;
  }

  body.route-app-feed .app-feed-rail i,
  body.route-app-feed .app-feed-rail i:before,
  body.route-app-feed .app-feed-rail i:after {
    box-sizing: border-box;
  }

  body.route-app-feed .app-feed-rail i:before,
  body.route-app-feed .app-feed-rail i:after {
    content: "";
    position: absolute;
    display: block;
  }

  body.route-app-feed .app-action-like i:before {
    width: 18px;
    height: 18px;
    left: 13px;
    top: 15px;
    background: #fff;
    transform: rotate(45deg);
    border-radius: 4px 4px 2px 2px;
  }

  body.route-app-feed .app-action-like i:after {
    width: 22px;
    height: 14px;
    left: 11px;
    top: 10px;
    background:
      radial-gradient(circle at 28% 50%, #fff 0 7px, transparent 8px),
      radial-gradient(circle at 72% 50%, #fff 0 7px, transparent 8px);
  }

  body.route-app-feed .app-action-comment i:before {
    width: 23px;
    height: 17px;
    left: 10px;
    top: 12px;
    background: #fff;
    border-radius: 999px;
  }

  body.route-app-feed .app-action-comment i:after {
    width: 10px;
    height: 10px;
    left: 17px;
    top: 25px;
    background: #fff;
    clip-path: polygon(0 0, 100% 0, 15% 100%);
  }

  body.route-app-feed .app-action-save i:before {
    width: 20px;
    height: 25px;
    left: 12px;
    top: 9px;
    background: #fff;
    border-radius: 3px 3px 2px 2px;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%);
  }

  body.route-app-feed .app-action-share i:before {
    width: 23px;
    height: 14px;
    left: 10px;
    top: 18px;
    background: #fff;
    clip-path: polygon(0 34%, 58% 34%, 58% 0, 100% 50%, 58% 100%, 58% 66%, 0 66%);
  }

  body.route-app-feed .app-feed-rail small {
    font-size: .72rem;
  }

  body.route-app-feed .app-feed-meta {
    bottom: calc(5.45rem + env(safe-area-inset-bottom, 0));
    right: 5rem;
  }

  body.route-app-feed .app-feed-meta h2 {
    font-size: 1.16rem;
  }

  body.route-app-feed .app-feed-meta p {
    font-size: .92rem;
  }

  body.route-app-feed .app-feed-meta span {
    font-size: .84rem;
  }

  body.route-app-feed .app-feed-bottom {
    height: calc(4.75rem + env(safe-area-inset-bottom, 0));
    padding-top: .25rem;
  }

  body.route-app-feed .app-feed-bottom button {
    font-size: .72rem;
    opacity: .92;
  }

  body.route-app-feed .app-feed-bottom .create {
    width: 54px;
    height: 38px;
    border-radius: 14px;
    font-size: 1.6rem;
  }

  body.route-app-feed .app-live-avatar span {
    width: 54px;
    height: 54px;
  }

  body.route-app-feed .app-live-avatar b {
    font-size: .58rem;
  }
}
/* V75 APP FEED ICON OVERLAY POLISH CSS END */



/* V75 APP FEED BUTTON POLISH CSS START */
@media (max-width: 860px) {
  body.route-app-feed .app-feed-rail {
    right: .7rem;
    gap: .62rem;
  }

  body.route-app-feed .app-feed-rail button {
    width: 50px;
  }

  body.route-app-feed .app-feed-rail i {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(5, 8, 15, .34) !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    box-shadow: 0 10px 28px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.08) !important;
    backdrop-filter: blur(12px);
    font-size: 0 !important;
    overflow: hidden !important;
  }

  body.route-app-feed .app-feed-rail i:before,
  body.route-app-feed .app-feed-rail i:after {
    content: "" !important;
    position: absolute !important;
    display: block !important;
    inset: auto !important;
    background: none !important;
    clip-path: none !important;
    transform: none !important;
  }

  body.route-app-feed .app-action-like i:before {
    width: 23px !important;
    height: 21px !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -46%) !important;
    background: linear-gradient(180deg, #ffffff, #f2f5ff) !important;
    clip-path: path("M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z") !important;
  }

  body.route-app-feed .app-action-like i {
    background: rgba(255,255,255,.16) !important;
  }

  body.route-app-feed .app-action-comment i:before {
    width: 25px !important;
    height: 19px !important;
    left: 10px !important;
    top: 11px !important;
    background: #fff !important;
    border-radius: 13px !important;
  }

  body.route-app-feed .app-action-comment i:after {
    width: 9px !important;
    height: 9px !important;
    left: 17px !important;
    top: 27px !important;
    background: #fff !important;
    clip-path: polygon(0 0, 100% 0, 16% 100%) !important;
  }

  body.route-app-feed .app-action-save i:before {
    width: 20px !important;
    height: 27px !important;
    left: 13px !important;
    top: 9px !important;
    background: #fff !important;
    border-radius: 3px !important;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 78%, 0 100%) !important;
  }

  body.route-app-feed .app-action-share i:before {
    width: 25px !important;
    height: 22px !important;
    left: 11px !important;
    top: 12px !important;
    background: #fff !important;
    clip-path: polygon(0 38%, 56% 38%, 56% 8%, 100% 50%, 56% 92%, 56% 62%, 0 62%) !important;
  }

  body.route-app-feed .app-feed-rail small {
    margin-top: -.1rem;
    font-size: .74rem;
    font-weight: 850;
    color: rgba(255,255,255,.94);
  }

  body.route-app-feed .app-feed-rail:before {
    background: rgba(5,8,15,.30);
    border-color: rgba(255,255,255,.16);
    font-size: .9rem;
  }

  body.route-app-feed .app-live-avatar span {
    border: 2px solid rgba(255,255,255,.78);
    box-shadow: 0 0 0 2px rgba(255,91,207,.65), 0 0 24px rgba(255,91,207,.60), 0 0 34px rgba(32,228,255,.25);
  }

  body.route-app-feed .app-live-avatar b {
    bottom: 1px;
    letter-spacing: .03em;
    box-shadow: 0 6px 18px rgba(0,0,0,.30);
  }

  body.route-app-feed .app-feed-gradient {
    background:
      linear-gradient(180deg, rgba(0,0,0,.30), transparent 23%, transparent 62%, rgba(0,0,0,.68)),
      linear-gradient(90deg, rgba(0,0,0,.20), transparent 45%, rgba(0,0,0,.24)) !important;
  }

  body.route-app-feed .app-feed-bottom {
    height: calc(4.55rem + env(safe-area-inset-bottom, 0));
    background: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.90) 30%);
  }

  body.route-app-feed .app-feed-bottom button {
    font-size: .7rem;
    font-weight: 760;
  }

  body.route-app-feed .app-feed-bottom .create {
    width: 52px;
    height: 36px;
  }
}
/* V75 APP FEED BUTTON POLISH CSS END */



/* V75 APP FEED CLEAN UI POLISH CSS START */
@media (max-width: 860px) {
  body.route-app-feed .app-feed-screen {
    background:
      linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.56)),
      url("./assets/visuals/cidenflow-mobile-feed-clean.png") center top / cover no-repeat,
      #02050b !important;
  }

  body.route-app-feed .app-feed-bg {
    filter: saturate(1.08) contrast(1.03) brightness(1.12) !important;
  }

  body.route-app-feed .app-feed-gradient {
    background:
      linear-gradient(180deg, rgba(0,0,0,.24), transparent 26%, transparent 64%, rgba(0,0,0,.58)),
      linear-gradient(90deg, rgba(0,0,0,.16), transparent 46%, rgba(0,0,0,.20)) !important;
  }

  body.route-app-feed .app-feed-tabs b {
    background: rgba(10,14,22,.20) !important;
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 0 16px rgba(255,55,128,.22) !important;
  }

  body.route-app-feed .app-feed-rail {
    gap: .66rem !important;
    right: .66rem !important;
  }

  body.route-app-feed .app-feed-rail:before {
    background: rgba(255,255,255,.10) !important;
    color: rgba(255,255,255,.88) !important;
    border-color: rgba(255,255,255,.24) !important;
    box-shadow: 0 8px 22px rgba(0,0,0,.24) !important;
  }

  body.route-app-feed .app-feed-rail i {
    width: 46px !important;
    height: 46px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 999px !important;
    background: rgba(255,255,255,.10) !important;
    border: 1px solid rgba(255,255,255,.26) !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.12) !important;
    backdrop-filter: blur(14px) !important;
    overflow: hidden !important;
    font-size: 0 !important;
  }

  body.route-app-feed .app-feed-rail i:before,
  body.route-app-feed .app-feed-rail i:after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    background: #fff !important;
    opacity: .96 !important;
  }

  body.route-app-feed .app-action-like i:before {
    width: 25px !important;
    height: 23px !important;
    left: 10px !important;
    top: 11px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }
  body.route-app-feed .app-action-like i:after { display: none !important; }

  body.route-app-feed .app-action-comment i:before {
    width: 25px !important;
    height: 25px !important;
    left: 10px !important;
    top: 10px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M20 2H4a2 2 0 0 0-2 2v18l4-4h14a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }
  body.route-app-feed .app-action-comment i:after { display: none !important; }

  body.route-app-feed .app-action-save i:before {
    width: 23px !important;
    height: 27px !important;
    left: 11px !important;
    top: 9px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 2h12a1 1 0 0 1 1 1v19l-7-4-7 4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 2h12a1 1 0 0 1 1 1v19l-7-4-7 4V3a1 1 0 0 1 1-1z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.route-app-feed .app-action-share i:before {
    width: 25px !important;
    height: 25px !important;
    left: 11px !important;
    top: 10px !important;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 9V5l7 7-7 7v-4.1C9 15 5.5 16.8 3 21c1-6 4.5-10.5 11-12z'/%3E%3C/svg%3E") center / contain no-repeat !important;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 9V5l7 7-7 7v-4.1C9 15 5.5 16.8 3 21c1-6 4.5-10.5 11-12z'/%3E%3C/svg%3E") center / contain no-repeat !important;
  }

  body.route-app-feed .app-feed-rail small {
    margin-top: -.05rem !important;
    color: rgba(255,255,255,.94) !important;
    font-size: .74rem !important;
  }

  body.route-app-feed .app-feed-bottom {
    background: linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.84) 36%) !important;
    border-top-color: rgba(255,255,255,.06) !important;
  }

  body.route-app-feed .app-feed-bottom .create {
    background: rgba(0,0,0,.25) !important;
    box-shadow: 0 0 0 2px rgba(32,228,255,.55), 0 0 0 4px rgba(255,91,207,.20), 0 0 22px rgba(32,228,255,.32) !important;
  }
}
/* V75 APP FEED CLEAN BUTTONS CSS END */