/* ===================================================================
   Cul7ure V17 — Unified Component Registry styles (Correction Pack v4 · P1)
   Canonical build-once components (src/shared/components.js).
   Consumed by all surfaces — no surface-local copies.
   =================================================================== */
.c7sec{margin:14px 0 6px}
.c7railhd{font:700 13px var(--sans);color:var(--ink,#e8e6f5);margin:0 0 8px;padding:0 2px}
.c7railhd .ce{font:500 10.5px var(--sans);color:var(--ink3,#8890b0)}

/* KrewMiniRail / KrewMiniItem */
.c7krewrail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.c7krewrail::-webkit-scrollbar{display:none}
.c7krewitem{flex:0 0 auto;min-width:190px;max-width:230px;display:flex;align-items:center;gap:10px;padding:11px 12px;background:var(--card,#15151f);border:1px solid var(--line,#26263a);border-radius:15px;scroll-snap-align:start;position:relative;cursor:pointer}
.c7krewitem.more{min-width:96px;justify-content:center;text-align:center;color:var(--ink2,#b6b8d4);font:600 12px var(--sans);flex-direction:column;gap:2px}
.c7kv{flex:0 0 auto;width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:20px;background:var(--card2,#1e1e2c)}
.c7kv.img{background-size:cover;background-position:center}
/* v4-fb item5: category-tinted krew visual + accent bar to unify with kc/pod cards */
.c7kv.tint{background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--kc,#6aa6ff) 42%,transparent),color-mix(in srgb,var(--kc,#6aa6ff) 12%,transparent));border:1px solid color-mix(in srgb,var(--kc,#6aa6ff) 30%,transparent)}
.c7krewitem.accent{overflow:hidden}
.c7krewitem.accent::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,#6aa6ff);opacity:.85}
.c7km{flex:1;min-width:0}
.c7kname{font:700 13px var(--sans);color:var(--ink,#e8e6f5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7ksig{font:500 11px var(--sans);color:var(--ink3,#8890b0);margin-top:1px}
.c7kreason{font:500 10.5px var(--sans);color:var(--ink4,#6a6d8c);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7krel{position:absolute;top:8px;right:9px;font:800 8.5px var(--sans);letter-spacing:.3px;padding:2px 6px;border-radius:6px;background:var(--card2,#1e1e2c);color:var(--ink3,#8890b0)}
.c7krel.joined{color:#5ad6a8;background:color-mix(in srgb,#5ad6a8 16%,transparent)}
.c7krel.managed{color:#ffcf6b;background:color-mix(in srgb,#ffcf6b 16%,transparent)}
.c7kjoin{position:absolute;bottom:9px;right:9px;font:700 10.5px var(--sans);color:var(--mine,#6aa6ff);cursor:pointer}

/* NodeCard (primary) — no corner plus (System Lock §13) */
.c7nodecard{display:flex;flex-direction:column;background:var(--card,#15151f);border:1px solid var(--line,#26263a);border-radius:16px;overflow:hidden;cursor:pointer}
.c7nimg{width:100%;aspect-ratio:16/10;background-size:cover;background-position:center;background-color:var(--card2,#1e1e2c)}
.c7nimg.placeholder{display:flex;align-items:center;justify-content:center;font-size:34px;opacity:.5}
.c7nimg.mini{aspect-ratio:1/1;border-radius:11px}
.c7nbody{padding:10px 12px 12px}
.c7ntitle{font:700 14.5px var(--sans);color:var(--ink,#e8e6f5);line-height:1.25;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.c7nkind{font:600 10.5px var(--sans);color:var(--ink3,#8890b0);margin-top:4px;text-transform:uppercase;letter-spacing:.3px}
.c7nrel{font:500 12px var(--sans);color:var(--ink2,#b6b8d4);margin-top:5px}
.c7peek{align-self:flex-start;margin:0 12px 12px;font:700 11px var(--sans);color:var(--mine,#6aa6ff);cursor:pointer}
.c7nodegrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}

/* NodeMiniRail (secondary) — legible cards >=140px (System Lock §13) */
.c7nodeminirail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px}
.c7nodeminirail::-webkit-scrollbar{display:none}
.c7nodemini{flex:0 0 auto;width:148px;cursor:pointer}
.c7nmt{font:600 12.5px var(--sans);color:var(--ink,#e8e6f5);margin-top:6px;line-height:1.2}
.c7nmr{font:500 11px var(--sans);color:var(--ink3,#8890b0);margin-top:2px}

/* RichSnapshot */
/* Daniel(fb): Snapshot summary 카드도 유리 느낌. 단색 페이지 위라 '비쳐 보이는' 유리가 아니라
   VISIBLE frosted-glass 패널(살짝 밝은 translucent fill + 밝은 상단 bevel rim + sheen + depth)로. */
.c7snap{position:relative;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03));
  backdrop-filter:blur(10px) saturate(1.3);-webkit-backdrop-filter:blur(10px) saturate(1.3);
  border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:14px 15px;display:flex;flex-direction:column;gap:9px;
  box-shadow:0 8px 22px -12px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(255,255,255,.06)}
.c7snap::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,0) 26%);mix-blend-mode:screen;opacity:.55}
.c7snap>*{position:relative;z-index:1}
.c7snid{font:800 16px var(--sans);color:var(--ink,#e8e6f5)}
.c7snstatus{font:700 10px var(--sans);color:#5ad6a8;vertical-align:middle;margin-left:5px}
.c7snstate{font:500 13px var(--sans);color:var(--ink2,#b6b8d4)}
.c7snchange,.c7snnext,.c7snunc{font:500 12.5px var(--sans);color:var(--ink2,#b6b8d4);display:flex;gap:7px;align-items:flex-start}
.c7sni{opacity:.7;flex:0 0 auto}
/* v4-fb(chat): flex-wrap so chips size to their content — short ones pack 3+ per row, the
   long one takes what it needs; no wasted 1fr cells. */
.c7snfacts{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0}
/* compact chip: small inline emoji (no icon box) + tight label/value */
.c7snf{display:inline-flex;align-items:center;gap:5px;padding:3px 8px 3px 6px;border-radius:8px;
  --ft:#6aa6ff;
  background:linear-gradient(135deg,color-mix(in srgb,var(--ft) 12%,transparent),color-mix(in srgb,var(--ft) 4%,transparent));
  border:1px solid color-mix(in srgb,var(--ft) 20%,transparent)}
.c7snf[data-tone="live"]{--ft:#5ad6a8}
.c7snf[data-tone="sched"]{--ft:#f0b64a}
.c7snf[data-tone="ask"]{--ft:#9b8cff}
.c7snf[data-tone="krew"]{--ft:#6aa6ff}
.c7snfi{flex:none;font-size:13px;line-height:1;background:none;border:0;width:auto;height:auto}
.c7snfm{display:flex;flex-direction:column;min-width:0}
.c7snfk{display:block;font:700 8px var(--sans);color:color-mix(in srgb,var(--ft) 80%,#fff);text-transform:uppercase;letter-spacing:.2px}
.c7snfv{display:block;font:800 11.5px var(--sans);color:var(--ink,#e8e6f5);white-space:nowrap;max-width:104px;overflow:hidden;text-overflow:ellipsis}
.c7snsrc{font:500 10.5px var(--sans);color:var(--ink4,#6a6d8c)}
/* v4-fb(chat): 관련 신호 merged inside the Snapshot section */
.snsigsub{font:700 9px var(--mono);color:var(--ink3,#8890b0);text-transform:uppercase;letter-spacing:.3px;margin:9px 0 5px}
.c7sncomm{font:500 11.5px var(--sans);color:var(--c-community,#7fb0ff)}

/* MessageRow / MessageCenter */
.c7msgrow{display:flex;align-items:center;gap:11px;padding:12px 13px;border-bottom:1px solid var(--line2,#1e1e2c);cursor:pointer}
.c7msgrow.is-unread{background:color-mix(in srgb,var(--mine-soft,#2a2440) 40%,transparent)}
.c7msgic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;background:var(--card2,#1e1e2c);display:flex;align-items:center;justify-content:center;font-size:18px}
.c7msgav{width:100%;height:100%;border-radius:11px;background-size:cover;background-position:center}
.c7msgm{flex:1;min-width:0}
.c7msgt{font:700 13.5px var(--sans);color:var(--ink,#e8e6f5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7msgctx{font:600 10px var(--sans);color:var(--ink3,#8890b0)}
.c7msgl{font:500 12px var(--sans);color:var(--ink3,#8890b0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.c7unread{flex:0 0 auto;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--mine,#6aa6ff);color:var(--mine-ink,#041020);font:800 10px var(--sans);display:flex;align-items:center;justify-content:center}

/* PodCard (v4-fb item3: Apple-like unified card — category visual, stat chips, prominent CTA) */
.c7pod{position:relative;background:var(--card,#141d36);border:1px solid var(--line,#26263a);border-radius:18px;padding:13px 14px;cursor:pointer;display:flex;flex-direction:column;gap:9px;overflow:hidden;transition:transform .16s cubic-bezier(.34,1.4,.64,1),border-color .2s,box-shadow .2s}
.c7pod::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--pc,#6aa6ff);opacity:.85}
.c7pod:active{transform:scale(.985)}
.c7pod.joined:hover,.c7pod.discover:hover{border-color:color-mix(in srgb,var(--pc,#6aa6ff) 45%,var(--line,#26263a));box-shadow:0 6px 20px -8px color-mix(in srgb,var(--pc,#6aa6ff) 40%,transparent)}
.c7pod.archived{opacity:.72}
.c7podtop{display:flex;gap:11px;align-items:flex-start}
.c7podthumb{flex:0 0 auto;width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:20px;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--pc,#6aa6ff) 42%,transparent),color-mix(in srgb,var(--pc,#6aa6ff) 12%,transparent));
  border:1px solid color-mix(in srgb,var(--pc,#6aa6ff) 30%,transparent)}
.c7podhm{flex:1;min-width:0}
.c7podh{display:flex;gap:7px;align-items:center;font:600 10.5px var(--sans);color:var(--ink3,#8890b0);margin-bottom:2px}
.c7podctx{color:var(--pc,#8890b0);font-weight:700}
.c7podpurpose{font:800 15px var(--sans);color:var(--ink,#eef3ff);line-height:1.28;letter-spacing:-.01em}
.c7podwhy{font:500 12px var(--sans);color:var(--ink2,#aab6d6);line-height:1.4}
.c7podstats{display:flex;flex-wrap:wrap;gap:7px}
.c7podstat{font:700 11px var(--sans);color:var(--ink2,#aab6d6);background:var(--card2,#0f1628);border-radius:8px;padding:4px 9px}
.c7podstat.live{color:#5ad6a8;background:color-mix(in srgb,#5ad6a8 14%,transparent)}
.c7podfoot{display:flex;justify-content:space-between;align-items:center;margin-top:1px;gap:10px}
.c7podact{font:500 11px var(--sans);color:var(--ink3,#8890b0)}
/* prominent pill CTAs (v4-P3d) */
.c7podcta.btn,.c7podjoin.btn{background:var(--mine,#6aa6ff);color:var(--mine-ink,#041020);padding:6px 13px;border-radius:999px;font:800 12px var(--sans);cursor:pointer}
.c7podjoin.btn{background:transparent;color:var(--mine,#6aa6ff);border:1.5px solid var(--mine,#6aa6ff)}
.c7podavs{display:flex;align-items:center;gap:-4px;margin:2px 0}
.c7podav{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font:800 10px var(--sans);color:#fff;border:2px solid var(--card,#141d36);margin-right:-6px}
.c7podavn{margin-left:12px;font:600 11px var(--sans);color:var(--ink3,#6c779b)}
/* joined-Pod horizontal rail in My (provisional composition — finalized in follow-up plan) */
.c7podminirail{display:flex;gap:10px;overflow-x:auto;padding:2px 2px 8px}
.c7podminirail::-webkit-scrollbar{display:none}
.c7podmini{flex:0 0 auto;width:150px;background:var(--card,#141d36);border:1px solid var(--line,#26263a);border-radius:14px;padding:11px 12px;cursor:pointer}
.c7podminiic{width:34px;height:34px;border-radius:10px;background:var(--card2,#0f1628);display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:7px}
.c7podminit{font:700 13px var(--sans);color:var(--ink,#eef3ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7podminis{font:500 11px var(--sans);color:var(--ink3,#6c779b);margin-top:2px}

/* Unified Krew cards — Happening + Discover (v4-fb item4/5), same visual language as PodCard */
.kc-card{position:relative;background:var(--card,#141d36);border:1px solid var(--line,#26263a);border-radius:18px;padding:13px 14px;margin:9px 0;overflow:hidden;display:flex;flex-direction:column;gap:8px;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.4,.64,1),border-color .2s,box-shadow .2s}
.kc-card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--kc,#6aa6ff);opacity:.85}
.kc-card:active{transform:scale(.985)}
.kc-card:hover{border-color:color-mix(in srgb,var(--kc,#6aa6ff) 45%,var(--line,#26263a));box-shadow:0 6px 20px -8px color-mix(in srgb,var(--kc,#6aa6ff) 40%,transparent)}
.kc-top{display:flex;align-items:center;gap:9px}
.kc-mode{font:800 10.5px var(--sans);color:var(--kc,#6aa6ff);background:color-mix(in srgb,var(--kc,#6aa6ff) 15%,transparent);border-radius:7px;padding:3px 9px;letter-spacing:.02em}
.kc-krew{font:600 11px var(--sans);color:var(--ink3,#8890b0);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-live{margin-left:auto;font:700 9.5px var(--sans);color:#5ad6a8;background:color-mix(in srgb,#5ad6a8 14%,transparent);border-radius:6px;padding:3px 7px;white-space:nowrap}
.kc-title{font:800 15px var(--sans);color:var(--ink,#eef3ff);line-height:1.3;letter-spacing:-.01em}
.kc-thumb{flex:0 0 auto;width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:19px;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--kc,#6aa6ff) 42%,transparent),color-mix(in srgb,var(--kc,#6aa6ff) 12%,transparent));
  border:1px solid color-mix(in srgb,var(--kc,#6aa6ff) 30%,transparent)}
.kc-hm{flex:1;min-width:0}
.kc-krewname{font:800 15px var(--sans);color:var(--ink,#eef3ff);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-cat{font:700 10px var(--sans);color:var(--kc,#8890b0);text-transform:uppercase;letter-spacing:.03em}
.kc-why{font:500 12.5px var(--sans);color:var(--ink2,#aab6d6);line-height:1.45}
.kc-chips{display:flex;flex-direction:column;gap:6px}
.kc-chip{font:600 11.5px var(--sans);color:var(--ink2,#aab6d6);background:var(--card2,#0f1628);border-radius:9px;padding:6px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kc-chip.live{color:#5ad6a8;background:color-mix(in srgb,#5ad6a8 12%,transparent)}
.kc-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:1px}
.kc-meta{font:600 11.5px var(--sans);color:var(--ink3,#8890b0)}
.kc-cta{font:800 12px var(--sans);cursor:pointer;white-space:nowrap}
.kc-cta.btn{color:var(--mine-ink,#041020);background:var(--kc,#6aa6ff);padding:7px 14px;border-radius:999px}
.kc-cta.ghost{color:var(--ink2,#aab6d6)}
.kc-card.disc .kc-foot{justify-content:flex-start;gap:14px}

/* RankingCard / RankingDetail */
.c7rankcard{background:var(--card,#15151f);border:1px solid var(--line,#26263a);border-radius:15px;padding:13px 14px;cursor:pointer}
.c7rkhd{display:flex;justify-content:space-between;align-items:center}
.c7rkcat{font:700 10px var(--sans);color:var(--ink3,#8890b0);text-transform:uppercase;letter-spacing:.4px}
.c7rkopinion{font:800 9px var(--sans);color:#ffcf6b;background:color-mix(in srgb,#ffcf6b 16%,transparent);padding:2px 6px;border-radius:6px}
.c7rktitle{font:800 15px var(--sans);color:var(--ink,#e8e6f5);margin-top:4px}
.c7rkpromise{font:500 12px var(--sans);color:var(--ink2,#b6b8d4);margin-top:3px}
.c7rktop{margin:9px 0}
.c7rkrow{display:flex;align-items:center;gap:9px;padding:4px 0}
.c7rkn{flex:0 0 auto;width:19px;height:19px;border-radius:6px;background:var(--card2,#1e1e2c);color:var(--ink2,#b6b8d4);font:800 11px var(--sans);display:flex;align-items:center;justify-content:center}
.c7rkt{flex:1;font:600 12.5px var(--sans);color:var(--ink,#e8e6f5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.c7rkp{font:800 12px var(--mono,var(--sans));color:var(--mine,#6aa6ff)}
.c7rkaxis{font:500 10.5px var(--sans);color:var(--ink4,#6a6d8c);margin-top:2px}
.c7rkcta{font:700 12px var(--sans);color:var(--mine,#6aa6ff);margin-top:8px}
.c7rankdetail{padding:2px}
.c7rdhead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.c7rdtitle{font:800 17px var(--sans);color:var(--ink,#e8e6f5)}
.c7rdrow{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--line2,#1e1e2c)}
.c7rdn{flex:0 0 auto;width:24px;height:24px;border-radius:7px;background:var(--card2,#1e1e2c);color:var(--ink,#e8e6f5);font:800 12px var(--sans);display:flex;align-items:center;justify-content:center}
.c7rdm{flex:1;min-width:0}
.c7rdt{font:700 13.5px var(--sans);color:var(--ink,#e8e6f5)}
.c7rdnote{font:500 11px var(--sans);color:var(--ink3,#8890b0);margin-top:1px}
.c7rdp{font:800 13px var(--mono,var(--sans));color:var(--mine,#6aa6ff)}
.c7rdmethod{margin-top:10px;font:500 11.5px var(--sans);color:var(--ink3,#8890b0)}
.c7rdmethod summary{cursor:pointer;color:var(--ink2,#b6b8d4)}
.c7rddisc{font:500 10px var(--sans);color:var(--ink4,#6a6d8c);margin-top:8px}

/* ranKING hub (P6 §16) — horizontal-scroll category tabs (item2: single-line, YouTube-style) */
.rankinghub{margin-top:4px}
.rkcattabs{display:flex;gap:8px;overflow-x:auto;flex-wrap:nowrap;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
.rkcattabs::-webkit-scrollbar{display:none}
.rkcattab{flex:0 0 auto;scroll-snap-align:start;font:700 12.5px var(--sans);color:var(--ink3,#6c779b);background:var(--card2,#0f1628);border:1px solid var(--line,#26263a);border-radius:999px;padding:7px 15px;cursor:pointer;white-space:nowrap;transition:color .2s,background .2s,border-color .2s}
.rkcattab.act{color:var(--mine-ink,#041020);background:var(--mine,#6aa6ff);border-color:var(--mine,#6aa6ff)}
/* WB(P3-correction-003): compressed ranKING hub — one-line smaller category tabs + Krews-consistent
   visual (mirrors .kc-card / --card / --line / left accent bar). */
/* Category chips unified with the ACTUAL Signal For You/내 관심사 chip: pill (999px), 11px,
   padding 6px 13px, #ffffff08 bg, --line border, active = solid blue fill. One horizontal-scroll line. */
.rkcattabs.rkcatsm{padding:2px 2px 8px;gap:6px}
.rkcattabs.rkcatsm .rkcattab{font:700 11px var(--sans);color:var(--ink3,#6c779b);background:#ffffff08;border:1px solid var(--line,#26263a);border-radius:999px;padding:6px 13px}
.rkcattabs.rkcatsm .rkcattab.act{color:#fff;background:rgba(106,166,255,.6);border-color:transparent;box-shadow:none}
/* Community ranKING grouping filter — same Signal chip look, one horizontal-scroll line. */
.crankfilter{display:flex;gap:6px;overflow-x:auto;flex-wrap:nowrap;padding:2px 2px 10px;-webkit-overflow-scrolling:touch}
.crankfilter::-webkit-scrollbar{display:none}
.crankfilter .crfchip{flex:0 0 auto;white-space:nowrap;font:700 11px var(--sans);color:var(--ink3,#6c779b);background:#ffffff08;border:1px solid var(--line,#26263a);border-radius:999px;padding:6px 13px;cursor:pointer;transition:all .15s}
.crankfilter .crfchip.act{color:#fff;background:rgba(106,166,255,.6);border-color:transparent}
/* Primary View — icon on the LEFT + label, compact, NO sub-description (Daniel), active = gradient glow. */
/* Daniel(P3): box는 유지 + 아이콘은 라인(stroke) SVG(하단 네비와 동일 어휘) + per-icon 그라디언트 stroke.
   active는 하단 네비처럼 per-view 애니메이션: Top=불꽃 flicker, Rising=차트 상승 draw(feed EKG식 stroke-dash),
   For You=반짝임 twinkle. 아이콘 위 · 라벨 아래(세로), box=segmented pill 유지. */
.rkviewtabs{display:flex;gap:8px;margin:10px 2px 8px;justify-content:center}
.rkviewtab{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 0 8px;border:1px solid var(--line,#26263a);border-radius:14px;background:var(--card2,#0f1628);cursor:pointer;position:relative;transition:transform .16s cubic-bezier(.34,1.4,.64,1),background .18s,border-color .18s,box-shadow .2s}
.rkviewtab .rkvi{display:flex;align-items:center;justify-content:center;height:24px}
.rkviewtab .rkicon{width:23px;height:23px;opacity:.82;transition:opacity .2s,transform .2s}
.rkviewtab .rkvl{font:800 12px var(--sans);color:var(--ink2,#aab6d6);letter-spacing:-.01em;transition:color .18s}
.rkviewtab .rkvs{display:none}   /* sub-label removed per Daniel (설명 필요 없을듯) */
.rkviewtab:active{transform:scale(.96)}
/* active box = accent ring + subtle lift; icon full opacity; label brightens */
.rkviewtab.act{border-color:color-mix(in srgb,#6aa6ff 42%,var(--line));box-shadow:0 5px 16px -8px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.04)}
.rkviewtab.act .rkicon{opacity:1}
.rkviewtab.act .rkvl{color:#eaf1ff}
/* ---- per-view active effects (mirror bottom nav) ---- */
/* Top = flame flicker + warm glow */
@keyframes rkflame{0%,100%{transform:scale(1) translateY(0)}40%{transform:scale(1.05,1.12) translateY(-.6px)}62%{transform:scale(.98,1.05)}80%{transform:scale(1.03,1.08)}}
.rkviewtab.act[data-rkview="top"] .rkicon{animation:rkflame 1.1s ease-in-out infinite;filter:drop-shadow(0 0 6px rgba(255,120,60,.6))}
/* Rising = chart line draws upward (stroke-dash), like feed EKG */
@keyframes rkrise{0%{stroke-dashoffset:40}55%{stroke-dashoffset:0}100%{stroke-dashoffset:0}}
.rkviewtab.act[data-rkview="rising"] .rkrise-line{stroke-dasharray:40;animation:rkrise 1.5s cubic-bezier(.6,0,.2,1) infinite}
.rkviewtab.act[data-rkview="rising"] .rkicon{filter:drop-shadow(0 0 6px rgba(79,214,196,.55))}
/* For You = twinkle/shine */
@keyframes rktwinkle{0%,100%{opacity:1;transform:scale(1) rotate(0)}50%{opacity:.62;transform:scale(1.14) rotate(10deg)}}
@keyframes rkspark{0%,100%{opacity:.3;transform:scale(.7)}50%{opacity:1;transform:scale(1.1)}}
.rkviewtab.act[data-rkview="foryou"] .rkfy-star{transform-box:fill-box;transform-origin:center;animation:rktwinkle 1.8s ease-in-out infinite}
.rkviewtab.act[data-rkview="foryou"] .rkfy-spark{transform-box:fill-box;transform-origin:center;animation:rkspark 1.8s ease-in-out .3s infinite}
.rkviewtab.act[data-rkview="foryou"] .rkicon{filter:drop-shadow(0 0 6px rgba(255,210,90,.55))}
@media (prefers-reduced-motion:reduce){.rkviewtab.act .rkicon,.rkviewtab.act .rkrise-line,.rkviewtab.act .rkfy-star,.rkviewtab.act .rkfy-spark{animation:none!important}}
.rkcard{position:relative;background:var(--card,#141d36);border:1px solid var(--line,#26263a);border-radius:16px;padding:12px 13px;margin:9px 0;overflow:hidden;cursor:pointer;transition:transform .16s cubic-bezier(.34,1.4,.64,1),border-color .2s,box-shadow .2s}
.rkcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--rkc,#6aa6ff);opacity:.85}
.rkcard.hero{background:color-mix(in srgb,var(--rkc,#6aa6ff) 8%,var(--card,#141d36))}
.rkcard:active{transform:scale(.985)}
.rkcard:hover{border-color:color-mix(in srgb,var(--rkc,#6aa6ff) 45%,var(--line,#26263a));box-shadow:0 6px 20px -8px color-mix(in srgb,var(--rkc,#6aa6ff) 38%,transparent)}
.rkc-top{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.rkc-cat{font:700 10px var(--sans);color:var(--rkc,#8890b0);text-transform:uppercase;letter-spacing:.03em;flex:0 0 auto}
.rkc-title{font:800 14.5px var(--sans);color:var(--ink,#eef3ff);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1;min-width:0}
.rkcard.hero .rkc-title{font-size:16px}
.rkc-go{margin-left:auto;color:var(--ink3,#6c779b);font:600 11px var(--sans);flex:0 0 auto}
.rkc-items{display:flex;flex-wrap:wrap;gap:4px 12px;font:600 12.5px var(--sans);color:var(--ink2,#aab6d6);line-height:1.55}
.rkc-items b{color:var(--ink,#eef3ff);margin-right:3px}
.rkc-items .p{color:var(--ink3,#6c779b);font-weight:500}
.rkc-metric{font:600 11px var(--sans);color:var(--ink3,#6c779b);margin-top:7px}
.rkc-reason{font:600 11.5px var(--sans);color:var(--mine,#6aa6ff);margin-top:7px}
.rkseeall{text-align:center;padding:11px;font:700 13px var(--sans);color:var(--ink2,#aab6d6);cursor:pointer}
.rksec{margin:6px 0 16px}
.rksech{font:800 15px var(--sans);color:var(--ink,#eef3ff);margin:0 0 10px;letter-spacing:-.01em}
.rksech .ce{font:500 11px var(--sans);color:var(--ink3,#6c779b)}
.rksecgrid{display:flex;flex-direction:column;gap:11px}

/* SystemEndcap — lighter than content (System Lock §10) */
.c7endcap{text-align:center;padding:16px 14px;opacity:.92}
.c7endstate{font:600 13px var(--sans);color:var(--ink3,#8890b0)}
.c7endacts{display:flex;gap:9px;justify-content:center;margin-top:9px}
.c7endact{font:700 12px var(--sans);color:var(--mine,#6aa6ff);border:1px solid var(--line,#26263a);border-radius:9px;padding:6px 12px;cursor:pointer}
.c7endshelf{margin-top:11px}

/* UniversalContentRenderer / SwipeDeck */
.c7content{display:flex;flex-direction:column;gap:9px}
.c7bl.text{font:400 14px var(--sans);color:var(--ink,#e8e6f5);line-height:1.55}
.c7bl.photo img,.c7bl.video iframe{width:100%;border-radius:12px;display:block}
.c7bl.video iframe{aspect-ratio:16/9;border:0}
.c7bl.source{display:inline-block;font:600 12px var(--sans);color:var(--c-verified,#7fd0ff);text-decoration:none;background:var(--card2,#1e1e2c);border-radius:9px;padding:7px 11px}
.c7bl.quote{border-left:3px solid var(--line3,#33334a);margin:0;padding:4px 0 4px 12px;font:500 13.5px var(--sans);color:var(--ink2,#b6b8d4);font-style:italic}
.c7bl.divider{border:0;border-top:1px solid var(--line2,#1e1e2c);margin:4px 0}
/* v4-fb(chat): swipe carousel sizing — frames were stretched to the tallest image
   (step imgs height:auto up to 420px), leaving huge empty space under the short cover and
   over-cropping. Fixed, consistent image height + no stretch = compact deck. */
.incarousel .icframes{align-items:flex-start}
.incarousel .icframe .icimg{min-height:0;height:190px}
.incarousel .icframe .icimg img{height:100%!important;max-height:none!important;object-fit:cover;object-position:center}
.incarousel .icframe.iccover .iccoverimg{min-height:0;height:190px}

.c7deck{position:relative}
.c7decktrack{display:flex;gap:11px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
.c7decktrack::-webkit-scrollbar{display:none}
.c7deckcard{flex:0 0 86%;scroll-snap-align:center;background:var(--card,#15151f);border:1px solid var(--line,#26263a);border-radius:14px;padding:13px}
.c7deckdots{display:flex;gap:5px;justify-content:center;margin-top:9px}
.c7deckdot{width:6px;height:6px;border-radius:50%;background:var(--line3,#33334a)}
.c7deckdot.on{background:var(--mine,#6aa6ff)}

/* Message Center filters (All | DMs | Rooms | Pods) — P3c §5 */
.msgfilters{display:flex;gap:8px;padding:10px 13px 6px;border-bottom:1px solid var(--line2,#1e1e2c);position:sticky;top:0;background:var(--bg1,#0e0e15);z-index:2}
.msgfilt{font:700 12.5px var(--sans);color:var(--ink3,#8890b0);padding:6px 13px;border-radius:999px;background:var(--card2,#1e1e2c);cursor:pointer}
.msgfilt.act{color:var(--mine-ink,#041020);background:var(--mine,#6aa6ff)}
.c7msglist{padding-top:2px}

/* ===== v4-fb(chat): Message center + Notification — consistency with the rest of the app =====
   (1) Message center keeps the bottom nav visible (was a full-screen modal that hid the dock).
   The overlay stops above the dock; the dock is raised over the overlay while it's open, and a
   nav tap dismisses the overlay (router.js). */
.chatov{bottom:76px}
#app:has(#chatOverlay.on) .dock{z-index:230}
/* (2) Notification cards → app card language: faint accent tint, sans fonts (was --mono), neon
   accent for unread — matches the Krews / feed card visual. */
.notif{background:color-mix(in srgb,var(--mine,#6aa6ff) 5%,transparent)!important;border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 15%,transparent)!important;border-radius:14px!important}
.notif.unread{border-color:color-mix(in srgb,#4fd6e6 34%,transparent)!important;background:color-mix(in srgb,#4fd6e6 9%,transparent)!important}
.notif .ni{font-family:var(--sans)!important}
.notif .nm{font:500 10px var(--sans)!important;color:var(--ink4)}
.notif .ndot{background:#4fd6e6}
.notifsec{font:800 11px var(--sans)!important;letter-spacing:.02em}

/* B5 Behavioral Calibration sheet */
.calibhd{font:800 17px var(--sans);color:var(--ink,#eef3ff);margin:2px 0 12px}
.calibhd .ce{font:500 12px var(--sans);color:var(--ink3,#6c779b)}
.calibsec{margin:12px 0}
.calibsech{font:700 13px var(--sans);color:var(--ink2,#aab6d6);margin-bottom:9px}
.calibsech .ce{font:500 10.5px var(--sans);color:var(--ink3,#6c779b)}
.calibchips{display:flex;flex-wrap:wrap;gap:8px}
.calibchip{font:700 12px var(--sans);color:var(--ink,#eef3ff);background:var(--card2,#0f1628);border:1px solid var(--line,#26263a);border-radius:999px;padding:6px 12px;cursor:pointer}
.calibchip i{color:var(--ink3,#6c779b);font-style:normal;margin-left:3px}
.calibsig{display:flex;gap:11px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line2,#1e1e2c)}
.calibsigi{flex:0 0 auto;width:28px;height:28px;border-radius:9px;background:var(--card2,#0f1628);display:flex;align-items:center;justify-content:center;font-size:14px}
.calibsigm{flex:1}
.calibsigm b{display:block;font:700 13px var(--sans);color:var(--ink,#eef3ff)}
.calibsigm span{font:500 11.5px var(--sans);color:var(--ink3,#6c779b)}
.calibnote{font:500 11.5px var(--sans);color:var(--ink3,#6c779b);background:var(--card2,#0f1628);border-radius:11px;padding:10px 12px;margin:12px 0;line-height:1.5}
.calibacts{display:flex;justify-content:center;margin-top:4px}
.calibreset{font:800 13px var(--sans);color:#ff8a8a;border:1px solid color-mix(in srgb,#ff8a8a 40%,transparent);border-radius:11px;padding:10px 20px;cursor:pointer}

/* B2 Composer — contenteditable placeholder, inferred facet chips, draft action */
.composebox[contenteditable]{min-height:96px;outline:none;color:var(--ink,#eef3ff);font:400 15px/1.5 var(--sans)}
.composebox[contenteditable]:empty:before{content:attr(data-ph);color:var(--ink3,#6c779b);pointer-events:none}
.facetrow{margin:10px 0}
.facethd{font:700 11.5px var(--sans);color:var(--ink2,#aab6d6);display:block;margin-bottom:7px}
.facethd .cqa{font:500 10px var(--sans);color:var(--ink3,#6c779b);margin-left:4px}
.facetchips{display:flex;flex-wrap:wrap;gap:7px}
.facetchip{font:700 11.5px var(--sans);color:var(--ink3,#6c779b);background:var(--card2,#0f1628);border:1px solid var(--line,#26263a);border-radius:999px;padding:5px 11px;cursor:pointer;transition:color .15s,background .15s,border-color .15s}
.facetchip.act{color:var(--mine-ink,#041020);background:var(--mine,#6aa6ff);border-color:var(--mine,#6aa6ff)}
.facetchip.add{opacity:.7;border-style:dashed}
.composeactions{display:flex;gap:10px;align-items:center;margin:14px 12px 22px}
.composedraft{flex:0 0 auto;font:700 13px var(--sans);color:var(--ink2,#aab6d6);border:1px solid var(--line,#26263a);border-radius:13px;padding:14px 18px;cursor:pointer}
.composeactions .composesubmit{flex:1;margin:0}

/* v4-fb #14/#15: unified glass CTA — color + transparency/blur, premium feel. Min-size (not full-width). */
.kc-cta.glass,.c7podcta.glass,.c7podjoin.glass{display:inline-flex;align-items:center;gap:3px;font:800 12px var(--sans);
  color:var(--kc,var(--mine,#6aa6ff));white-space:nowrap;cursor:pointer;border-radius:999px;padding:6px 13px;
  background:color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 32%,transparent);
  backdrop-filter:blur(7px) saturate(1.25);-webkit-backdrop-filter:blur(7px) saturate(1.25);transition:background .16s,border-color .16s}
.kc-cta.glass:hover,.c7podcta.glass:hover{background:color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 20%,transparent)}
.kc-cta.glass.primary{color:#fff;background:color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 62%,transparent);border-color:color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 55%,transparent);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.kc-ctaic::after{content:'›';font-weight:900;opacity:.9}
.kc-ctaic.plus::after{content:'＋'}

/* ===== v4-fb(chat / DF-10): app-wide glass CTA sweep =====
   Unify prominent CTAs to the shared glass grammar (accent COLOR + transparency + frosted blur),
   min-size. Same look as the .kc-cta.glass token. */
/* (1) primary solid-fill buttons → translucent accent glass */
.cbtn{background:color-mix(in srgb,var(--mine,#6aa6ff) 30%,transparent)!important;color:#eaf2ff!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 52%,transparent)!important;
  backdrop-filter:blur(9px) saturate(1.3);-webkit-backdrop-filter:blur(9px) saturate(1.3);
  box-shadow:0 4px 16px -6px color-mix(in srgb,var(--mine,#6aa6ff) 50%,transparent),inset 0 1px 0 rgba(255,255,255,.18)!important;text-shadow:0 1px 2px rgba(0,0,0,.3)}
.kc-cta.btn{background:color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 24%,transparent)!important;color:#eaf2ff!important;
  border:1px solid color-mix(in srgb,var(--kc,var(--mine,#6aa6ff)) 46%,transparent)!important;
  backdrop-filter:blur(8px) saturate(1.25);-webkit-backdrop-filter:blur(8px) saturate(1.25)}
/* (2) already accent-tinted CTAs → add the frosted blur so they read as glass */
.fcard .pagecta{backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2);
  background:color-mix(in srgb,var(--mine,#6aa6ff) 14%,transparent)!important;border-color:color-mix(in srgb,var(--mine,#6aa6ff) 34%,transparent)!important}
.ksact{backdrop-filter:blur(8px) saturate(1.2);-webkit-backdrop-filter:blur(8px) saturate(1.2)}
/* (3) inline text-link CTAs → min-size glass pill (P-LABEL: min-size, not full-width) */
.cobjcta,.c7rkcta{display:inline-flex;align-items:center;gap:3px;width:max-content;margin-top:8px;
  padding:5px 12px;border-radius:999px;cursor:pointer;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 30%,transparent);
  backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2)}
/* DF-10 pass2: message/poll send buttons + circulation-krew CTAs (Follow/Join/sheet) → glass token */
.chinput .chsend,.prpoll-osend{color:#eaf2ff!important;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 30%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 50%,transparent)!important;
  backdrop-filter:blur(8px) saturate(1.3);-webkit-backdrop-filter:blur(8px) saturate(1.3);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.kcbtn{backdrop-filter:blur(7px) saturate(1.2);-webkit-backdrop-filter:blur(7px) saturate(1.2);
  background:color-mix(in srgb,var(--mine,#6aa6ff) 10%,transparent)!important;border-color:color-mix(in srgb,var(--mine,#6aa6ff) 26%,transparent)!important}
.kcbtn.primary{color:#eaf2ff!important;background:color-mix(in srgb,var(--mine,#6aa6ff) 34%,transparent)!important;border-color:color-mix(in srgb,var(--mine,#6aa6ff) 52%,transparent)!important}
.kcbtn.on{background:color-mix(in srgb,#4fd6e6 18%,transparent)!important;border-color:color-mix(in srgb,#4fd6e6 40%,transparent)!important;color:#bfeef2!important}
/* DF-15: classic Krew page (non-circulation krews) CTAs → glass, matching the CONFIRMED circulation
   Krew visual. Also hide the old Kosmos-map CTA. */
.krewhero .khmap{display:none!important}
.krewhero .khfollow{background:color-mix(in srgb,var(--mine,#6aa6ff) 12%,transparent)!important;border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 30%,transparent)!important;color:#dbe5f5!important;backdrop-filter:blur(8px) saturate(1.25);-webkit-backdrop-filter:blur(8px) saturate(1.25)}
.krewhero .khjoin{background:color-mix(in srgb,var(--mine,#6aa6ff) 34%,transparent)!important;border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 52%,transparent)!important;color:#eaf2ff!important;backdrop-filter:blur(8px) saturate(1.25);-webkit-backdrop-filter:blur(8px) saturate(1.25);text-shadow:0 1px 2px rgba(0,0,0,.3)}
.krewhero .khfollow.on,.krewhero .khjoin.on{background:color-mix(in srgb,#4fd6e6 18%,transparent)!important;border-color:color-mix(in srgb,#4fd6e6 40%,transparent)!important;color:#bfeef2!important}
/* DF-15 (My ▸ Home): elevate the home sections (Identity · Featured Work · Collections · Active
   Topics/Krews) to the CONFIRMED Krews kc-card visual — rounded card + faint accent tint (was
   boxless .csec). Home tab only. */
.mypanel[data-mp="home"] .csec{
  background:color-mix(in srgb,var(--mine,#6aa6ff) 5%,var(--card,#141d36))!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 14%,var(--line,#26263a))!important;
  border-radius:16px!important;padding:13px 14px!important;margin:10px 12px!important}
.mypanel[data-mp="home"] .csec > h3{margin-top:0}
.mypanel[data-mp="home"] .credstrip{padding-left:0;padding-right:0}
/* My planner §6.6: Known For chips = topic pills (sans + cool-neon accent), NOT mono product tags. */
.mypanel[data-mp="home"] .pkchip{font:700 11.5px var(--sans)!important;color:#bcd3ff!important;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 12%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 28%,transparent)!important;padding:5px 11px!important;border-radius:999px!important}
/* Useful Work proof chips → same neon pill language */
.mypanel[data-mp="home"] .credchip{background:color-mix(in srgb,#4fd6e6 10%,transparent)!important;border-color:color-mix(in srgb,#4fd6e6 30%,transparent)!important;color:#bfeef2!important}
/* GPT IA: Home tab removed → Profile-Shell conditional Needs-Attention strip (1 line, appears only
   when the owner has drafts / missions / open questions). */
.myattn{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:2px 12px 6px;padding:8px 12px;border-radius:12px;
  background:color-mix(in srgb,#4fd6e6 8%,transparent);border:1px solid color-mix(in srgb,#4fd6e6 22%,transparent)}
.myattnh{font:800 10px var(--sans);color:#7fd8e6;letter-spacing:.02em}
.myattnc{font:700 11px var(--sans);color:#cfe8ff;background:color-mix(in srgb,var(--mine,#6aa6ff) 14%,transparent);border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 30%,transparent);border-radius:999px;padding:4px 10px;cursor:pointer}
/* fb(chat): Settings page (own screen like Notification) — unified app card language. */
.setsec{margin:12px 12px 4px}
.setsec > h3{font:800 11px var(--sans);color:var(--ink3,#8890b0);letter-spacing:.02em;margin:0 2px 9px}
.setrow{display:flex;align-items:center;gap:12px;padding:14px;margin:0 0 8px;border-radius:14px;cursor:pointer;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 5%,transparent);border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 15%,transparent);transition:background .15s,border-color .15s}
.setrow:active{background:color-mix(in srgb,var(--mine,#6aa6ff) 12%,transparent)}
.setri{font-size:19px;flex:none;width:26px;text-align:center}
.setrt{flex:1;min-width:0;font:600 13px var(--sans);color:var(--ink,#eef3ff)}
.setrc{color:var(--ink4,#7a80a0);font-size:16px;flex:none}
/* DF-15 (My ▸ top Identity header): align .profilelayer to the confirmed Krews kc-card visual —
   rounded + faint neon accent tint/border (was a plain grey card). */
/* fb(chat): Identity/Profile Shell → Krew-hero visual — a diagonal THEME-color gradient (like the
   confirmed circulation Krew hero: linear-gradient(135deg, col, #0c1226)) + soft themed glow. */
.profilelayer{border-radius:18px!important;overflow:hidden;position:relative;
  border:1px solid color-mix(in srgb,var(--pt,#6aa6ff) 26%,var(--line2,#26263a))!important;
  background:linear-gradient(138deg,color-mix(in srgb,var(--pt,#6aa6ff) 34%,#0c1226),#0c1226 62%)!important;
  box-shadow:0 10px 30px -14px color-mix(in srgb,var(--pt,#6aa6ff) 45%,transparent), inset 0 1px 0 rgba(255,255,255,.06)!important}
/* neon-align the role badge + proof chips (were purple/green mix) to the cool-neon accent */
.profilelayer .plbadge.ver{color:#7fd8e6!important;background:color-mix(in srgb,#4fd6e6 12%,transparent)!important;border-color:color-mix(in srgb,#4fd6e6 45%,transparent)!important}
/* fb(chat, Daniel): Profile Shell = ONE cohesive identity card. Reputation/Fan Journey/Credit
   re-homed as inner ZONES joined by hairline dividers (not separate floating boxes) + cool-neon.
   Prettier + connected — kills the 'each row floats on its own' feel. */
.profilelayer .plsec{margin-top:13px;padding-top:13px;border-top:1px solid rgba(255,255,255,.09)}
.profilelayer .plsech{font:800 10.5px var(--sans);color:#d7e5ff;letter-spacing:.01em;margin:0 2px 9px;display:flex;align-items:baseline;gap:7px}
.profilelayer .plsech .plsecce{font:600 9px var(--mono);color:var(--ink4,#7a80a0);letter-spacing:0}
/* Credentials — reputation bands + contribution proof as ONE unified cool-neon chip set */
.profilelayer .plcreds{cursor:pointer;border-radius:12px;transition:background .15s}
.profilelayer .plcreds:active{background:rgba(255,255,255,.04)}
.profilelayer .plcredwrap{display:flex;flex-wrap:wrap;gap:7px}
/* Daniel(P4): 평판 밴드(1행) ↔ proof 칩(정정 채택·번역·검증 답변, 아래 행) 분리 — 강제 줄바꿈 */
.profilelayer .plcredbreak{flex-basis:100%;height:1px}
.profilelayer .plcred{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--sans);color:#e6eeff;
  background:color-mix(in srgb,var(--cc,#6aa6ff) 15%,transparent);border:1px solid color-mix(in srgb,var(--cc,#6aa6ff) 40%,transparent);
  border-radius:999px;padding:4px 11px}
.profilelayer .plcred .plcdot{width:6px;height:6px;border-radius:50%;background:var(--cc,#6aa6ff);box-shadow:0 0 6px var(--cc,#6aa6ff)}
.profilelayer .plcred.proof{--cc:#4fd6e6;color:#c7f0f4}
/* Fan Journey — compact horizontal badge rail */
.profilelayer .pljrail{display:flex;gap:8px;overflow-x:auto;padding-bottom:3px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.profilelayer .pljrail::-webkit-scrollbar{display:none}
.profilelayer .pljb{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;min-width:60px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);border-radius:13px;padding:9px 11px}
.profilelayer .pljb .pljbi{font-size:18px;line-height:1}
.profilelayer .pljb .pljbl{font:600 8.5px var(--sans);color:var(--ink2,#aab6d6);white-space:nowrap}
.profilelayer .pljb.branded{background:color-mix(in srgb,#9b8cff 13%,transparent);border-color:color-mix(in srgb,#9b8cff 36%,transparent);cursor:pointer}
.profilelayer .pljb.branded .pljbl{color:#c8bcff}
/* Credit — usage record rows */
.profilelayer .plcreditrow{display:flex;align-items:center;gap:10px;padding:8px 0}
.profilelayer .plcreditrow+.plcreditrow{border-top:1px solid rgba(255,255,255,.06)}
.profilelayer .plcri{width:27px;height:27px;flex:none;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:13px;
  background:color-mix(in srgb,var(--cc,#6aa6ff) 22%,transparent);border:1px solid color-mix(in srgb,var(--cc,#6aa6ff) 42%,transparent)}
.profilelayer .plcrt{flex:1;min-width:0;font:600 11px/1.4 var(--sans);color:var(--ink2,#aab6d6)}
.profilelayer .plcrt b{color:var(--ink,#eef3ff)}
.profilelayer .plcrgo{font:700 9px var(--mono);color:#7fd8e6;background:color-mix(in srgb,#4fd6e6 14%,transparent);border:1px solid color-mix(in srgb,#4fd6e6 30%,transparent);border-radius:6px;padding:2px 7px;flex:none}
.profilelayer .plcreditmore{font:700 11px var(--sans);color:var(--mine,#6aa6ff);margin-top:9px;cursor:pointer}
/* D-ID account switcher — folded into the card as a zone (was a separate bordered box) */
.profilelayer .pldidsec .plsw-row{display:flex;gap:6px;align-items:center}
.profilelayer .pldidsec .plsw{flex:1;text-align:center;font:700 11px var(--sans);color:var(--ink3,#8890b0);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:10px;padding:7px 4px;cursor:pointer;transition:.15s}
.profilelayer .pldidsec .plsw.act{color:#eaf2ff;background:color-mix(in srgb,var(--mine,#6aa6ff) 24%,transparent);border-color:color-mix(in srgb,var(--mine,#6aa6ff) 50%,transparent)}
.profilelayer .pldidsec .pldidtag{font:600 8.5px var(--mono);color:var(--ink4,#7a80a0);white-space:nowrap;margin-left:3px}
/* DF-15: ranKING cards + Mission cards → the confirmed Krews kc-card visual (rounded, faint neon
   accent tint) — unifies them with My Home / Krews. Inner content chips kept (semantic colors). */
.c7rankcard,.msncard{
  background:color-mix(in srgb,var(--mine,#6aa6ff) 5%,var(--card,#141d36))!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 15%,var(--line,#26263a))!important;
  border-radius:16px!important;padding:13px 14px!important}
/* DF-15 (Kosmos Summary/Snapshot sheet): unify the sheet's inner cards to the confirmed Krews
   kc-card cool-neon language. The Snapshot block (.asblock.snap) already uses the faint cool-neon
   accent tint — bring the remaining generic (white-tint) + legacy-green cards to that same reference.
   ⚠ Scoped to .summ-sheet.snapshot ONLY (same classes are reused in Dive rails — don't touch those).
   Field node cards (.c.imgled) intentionally untouched (Daniel: Summary sheet only). */
.summ-sheet.snapshot .asstat,
.summ-sheet.snapshot .assigtile,
.summ-sheet.snapshot .askrewcard,
.summ-sheet.snapshot .sfkrewcard,
.summ-sheet.snapshot .asprev{
  background:color-mix(in srgb,var(--mine,#6aa6ff) 5%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 15%,transparent)!important;
  border-radius:13px!important}
/* interactive krew cards get the kc-card hover (evidence .asprev + stat tiles stay static) */
.summ-sheet.snapshot .askrewcard:hover,
.summ-sheet.snapshot .sfkrewcard:hover{
  border-color:color-mix(in srgb,var(--mine,#6aa6ff) 40%,transparent)!important}
/* icon/thumb chips inside those cards → faint accent wash (was flat white .asic/.assigic) */
.summ-sheet.snapshot .asprev .asic{
  background:color-mix(in srgb,var(--mine,#6aa6ff) 12%,transparent)!important}
/* Krew block (SC-04, the one explicit in-card CTA) → cool-neon accent card + glass CTA
   (was legacy green fill), matching the confirmed circulation Krew join button. */
.summ-sheet.snapshot .asblock.krew .askrew{
  background:color-mix(in srgb,var(--mine,#6aa6ff) 7%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 20%,transparent)!important}
.summ-sheet.snapshot .askrew .askact{color:#7fd8e6!important}
.summ-sheet.snapshot .askrew .askcta{
  background:color-mix(in srgb,var(--mine,#6aa6ff) 34%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 52%,transparent)!important;
  color:#eaf2ff!important;backdrop-filter:blur(8px) saturate(1.25);-webkit-backdrop-filter:blur(8px) saturate(1.25);
  text-shadow:0 1px 2px rgba(0,0,0,.3)}
/* min-size state chip (label principle #12) */
.kc-live{margin-left:auto;font:800 9px var(--sans);color:#5ad6a8;background:color-mix(in srgb,#5ad6a8 15%,transparent);border-radius:6px;padding:2px 7px;white-space:nowrap}

/* v4-fb: krew rail name doesn't run under the managed/recommended badge */
.c7krewitem.hasrel .c7km{padding-right:46px}

/* v4-fb item6: boxless rail section (removes .csec background box) */
.railsec.noboxsec{margin:14px 12px 0;background:transparent;border:0;padding:0}
.railsec.noboxsec>h3{font:800 14px var(--sans);color:var(--ink,#eef3ff);letter-spacing:-.02em;margin-bottom:11px;display:flex;align-items:center;gap:8px}
.railsec.noboxsec>h3 .ce{font:500 10.5px var(--sans);color:var(--ink3,#6c779b)}
/* v4-fb item2: unified pod/category icon badge (Messages emoji + My pod mini) */
.c7msgemoji{width:100%;height:100%;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:18px;background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--pc,#6aa6ff) 42%,transparent),color-mix(in srgb,var(--pc,#6aa6ff) 12%,transparent));border:1px solid color-mix(in srgb,var(--pc,#6aa6ff) 28%,transparent)}
.c7podmini .c7podminiic{background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--pc,#6aa6ff) 42%,transparent),color-mix(in srgb,var(--pc,#6aa6ff) 12%,transparent));border:1px solid color-mix(in srgb,var(--pc,#6aa6ff) 28%,transparent)}

/* v4-fb: visually-hidden but focusable a11y fallback (Kosmos list) */
.sronly-a11y{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;background:transparent;color:inherit}
.sronly-a11y:focus{position:static;width:auto;height:auto;clip:auto;margin:0;padding:6px 10px;border:1px solid var(--mine,#6aa6ff);border-radius:9px}

/* v4-fb(chat): header icons = plain colorless LINE icons (like the bottom nav) — no glass pill. */
.gicons .gic,.myicons .myic{position:relative;width:34px;height:34px;border-radius:11px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;color:var(--ink2,#aab6d6);cursor:pointer;transition:color .16s,background .16s}
.gicons .gic svg,.myicons .myic svg{width:21px;height:21px;opacity:.92}
.gicons .gic:hover,.myicons .myic:hover{background:#ffffff0e;color:var(--ink,#eef3ff)}
.gicons .gic:active,.myicons .myic:active{transform:scale(.92)}

/* v4-fb item6: Kosmos nav = always-on color-graduation (energy source flowing to Feed/Community);
   NOT the pressed/active look. Uses peek palette when peeking, a cool default otherwise. */
.nav .n[data-s="kosmos"].peekglow svg{stroke:url(#peekGradKosmos)}
.nav .n[data-s="kosmos"].kosmos-src .nlbl{
  background:var(--peekgrad,linear-gradient(100deg,#6aa6ff,#9b8cff,#5ad6a8));background-size:260% 100%;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  animation:peekflow 6s linear infinite}

/* v4-fb: Krew node card — logo mark + full name + one chip, no description */
.c.imgled.krewnode .img.krewlogo{display:flex;align-items:center;justify-content:center;position:relative;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--nc,#6aa6ff) 26%,transparent),color-mix(in srgb,var(--nc,#6aa6ff) 7%,transparent))}
.krewmark{width:50px;height:50px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:25px;
  background:radial-gradient(120% 120% at 30% 20%,color-mix(in srgb,var(--nc,#6aa6ff) 52%,transparent),color-mix(in srgb,var(--nc,#6aa6ff) 18%,transparent));
  border:1.5px solid color-mix(in srgb,var(--nc,#6aa6ff) 45%,transparent);box-shadow:0 4px 14px -4px color-mix(in srgb,var(--nc,#6aa6ff) 55%,transparent)}
.c.imgled.krewnode .ttl.krewfull{font:800 13.5px var(--sans)!important;line-height:1.25;white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.rectag.krewchip{background:color-mix(in srgb,var(--nc,#6aa6ff) 16%,transparent)!important;color:color-mix(in srgb,var(--nc,#6aa6ff) 92%,#fff)!important;border:1px solid color-mix(in srgb,var(--nc,#6aa6ff) 32%,transparent)!important}

/* v4-fb: Discover CTA on the right (unified with other cards) + category browse filter */
.kc-card.disc .kc-foot{justify-content:flex-end;gap:9px}
.kcdiscfilter{display:flex;gap:7px;overflow-x:auto;flex-wrap:nowrap;padding:2px 0 10px;-webkit-overflow-scrolling:touch}
.kcdiscfilter::-webkit-scrollbar{display:none}
.kcdiscchip{flex:0 0 auto;font:700 11.5px var(--sans);color:var(--ink3,#6c779b);background:var(--card2,#0f1628);border:1px solid var(--line,#26263a);border-radius:999px;padding:5px 12px;cursor:pointer;white-space:nowrap;transition:color .15s,background .15s,border-color .15s}
.kcdiscchip.act{color:var(--mine-ink,#041020);background:var(--mine,#6aa6ff);border-color:var(--mine,#6aa6ff)}

/* v4-fb: Kosmos nav = flowing color only (NO pressed 'cloud' halo). Cloud repurposed for the ACTIVE icon. */
.nav .n{position:relative}
.nav .n.kosmos-src::before{display:none!important}
.nav .n.act::after{content:'';position:absolute;left:50%;top:5px;transform:translateX(-50%);width:46px;height:30px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--mine,#6aa6ff) 42%,transparent),transparent 72%);filter:blur(7px);opacity:.9}
/* v4-fb(chat): Kosmos icon = color-graduation ONLY. The always-on drop-shadow 'shine'
   read as a permanently-pressed halo and overlapped the click/active cloud. Keep just the
   flowing gradient stroke + text fill; the ONLY glow is the .act::after cloud on tap. */
.nav .n[data-s="kosmos"].kosmos-src svg{filter:none!important;animation:none!important}
.nav .n[data-s="kosmos"].kosmos-src .nlbl{filter:none!important}

/* v4-fb(chat): peek = COLOR on the Feed/Community line only — NO color 'cloud'. Removes the
   dock-level aura band, the per-icon halo pills, and all svg/label drop-shadow glows (which
   spread over the whole dock and lingered on Feed/Dive/node pages and when the nav closed).
   Keeps only the gradient text + svg stroke color. The one glow is the .act::after click cloud. */
.dock.haspeek::before{display:none!important}
.nav .n.peekglow::before,.nav .n.peekglow.act::before{display:none!important}
.nav .n.peekglow svg,.nav .n.peekglow.act svg{filter:none!important;animation:none!important}
.nav .n.peekglow .nlbl{filter:none!important;animation:none!important}

/* v4-fb(chat): asK pinned dead-center. Symmetric grid tracks (2 flexible each side of the
   center 'auto' column) keep asK at exact horizontal center in EVERY state — expanded,
   compact, collapsed — so it never wobbles left-right on nav open/close; only the 4 side
   items move. (Was flex space-around, where uneven side-item widths drifted asK mid-anim.) */
/* justify-content:center on BOTH states so opening doesn't flip alignment (collapsed set it,
   base didn't) — that discrete change kicked asK ~7px on the first open frame. */
.nav{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto minmax(0,1fr) minmax(0,1fr);justify-items:center;justify-content:center}
.nav .n{flex:none;max-width:none}

/* v4-fb(chat): bottom nav + asK = REAL LIQUID GLASS (iOS 26 / Instagram bar). Much MORE
   transparent so the background shows through & is magnified (vibrancy: blur+saturate+brightness),
   with a bright specular rim + edge refraction highlights that fake the light bending at the
   curved glass bevel. */
/* Daniel(fb): 하단 nav + asK 유리가 너무 frosted → Instagram식 CLEAR 유리로. blur/brightness↓로 배경이
   또렷이 비치게, 우유빛 specular overlay↓, 단 얇은 rim은 유지해 '유리'로는 계속 읽히게. */
/* Daniel(fb): 진짜 유리잔처럼 CLEAR — center는 거의 fill 없이(배경 또렷이 통과), blur 최소, 굴절/하이라이트는
   엣지에만 몰아서 유리 곡률(3D)이 살게. 중앙은 투명, 테두리만 빛이 휘어 반짝인다. */
/* Daniel(fb): 더 투명하게(그냥 보이게) + 굴절은 4면에 얇고 균일하게(양옆 깊은 밴드 제거).
   center fill ~0 · blur 최소 · 굴절 = 얇은 4면 rim(inset 1px)만. */
.nav{background:rgba(255,255,255,.012)!important;
  backdrop-filter:blur(3px) saturate(1.3) brightness(1.02);-webkit-backdrop-filter:blur(3px) saturate(1.3) brightness(1.02);
  border:1px solid rgba(255,255,255,.2)!important;position:relative;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.3),          /* thin even top rim */
    inset 0 -1px 0 rgba(255,255,255,.14),        /* thin even bottom rim */
    inset 1px 0 0 rgba(255,255,255,.14),         /* thin even left rim */
    inset -1px 0 0 rgba(255,255,255,.14)!important}  /* thin even right rim — uniform 4-side refraction */
/* very faint top sheen only; no deep side bands */
.nav::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 32%);
  mix-blend-mode:screen;opacity:.5}
.nav::after{display:none!important}
.nav .n{z-index:2}   /* keep icons/labels above the glass specular overlays */
.dock.kos .nav{background:linear-gradient(177deg,rgba(255,255,255,.055),rgba(14,20,36,.12) 32%,rgba(10,16,30,.17))!important}

/* ===== v4-fb(chat / DF-1): unified neon-graduation ACTIVE glow =====
   Any active nav item's LABEL flows ONE cohesive cool-neon tone-set (blue→cyan→mint) left↔right
   — a single tone-set everywhere, NOT a many-color mix. The active glow cloud is recolored to the
   neon mid-tone. Peek pages (Feed/Community while Peek is active = .peekglow) OPT OUT: they keep
   their own per-peek color-graduation (do not overwrite it). Reuses the same background-clip:text
   flow grammar the peek labels already use. */
:root{--neonflow:linear-gradient(100deg,#6aa6ff 0%,#4fd6e6 30%,#63e6b3 52%,#4fd6e6 74%,#6aa6ff 100%)}
@keyframes neonflow{0%{background-position:0% 50%}100%{background-position:200% 50%}}
/* ALL active nav labels flow the neon tone-set — via a SOLID animated color (blue⇄mint) + glow, NOT
   background-clip:text. A transparent-fill clipped-text label goes INVISIBLE on mobile Safari
   (Feed/Community labels vanished on tap); a solid animated color can never disappear. */
@keyframes neonglow{0%,100%{color:#6aa6ff;-webkit-text-fill-color:#6aa6ff}50%{color:#57e0c4;-webkit-text-fill-color:#57e0c4}}
.nav .n.act .nlbl{
  background:none!important;color:#6aa6ff!important;-webkit-text-fill-color:#6aa6ff!important;
  text-shadow:0 0 8px color-mix(in srgb,#4fd6e6 45%,transparent)!important;font-weight:800;
  animation:neonglow 2.8s ease-in-out infinite!important}
.nav .n.act::after{
  background:radial-gradient(ellipse at center,color-mix(in srgb,#4fd6e6 44%,transparent),transparent 72%)!important}
/* ...EXCEPT Feed/Community WHILE Peek is active: they keep their per-peek color (solid, visible). */
.nav .n[data-s="feed"].act.peekglow .nlbl,.nav .n[data-s="community"].act.peekglow .nlbl{
  background:none!important;color:var(--peekc1,#6aa6ff)!important;-webkit-text-fill-color:var(--peekc1,#6aa6ff)!important;
  text-shadow:0 0 8px color-mix(in srgb,var(--peekc1,#6aa6ff) 45%,transparent)!important;animation:none!important}
.nav .n[data-s="feed"].act.peekglow::after,.nav .n[data-s="community"].act.peekglow::after{
  background:radial-gradient(ellipse at center,color-mix(in srgb,var(--mine,#6aa6ff) 42%,transparent),transparent 72%)!important}
@media (prefers-reduced-motion:reduce){.nav .n.act .nlbl{animation:none!important}}
/* asK = CLEAR GLASS orb (Daniel fb): translucent tinted glass, thin bright rim, but far less frost —
   lower blur/brightness/saturate + trimmed inner white so the background reads through it. */
.nav .n.askn svg{color:#eef4ff!important;
  background:linear-gradient(150deg,rgba(120,175,255,.22),rgba(150,140,255,.14))!important;
  backdrop-filter:blur(6px) saturate(1.4) brightness(1.03);-webkit-backdrop-filter:blur(6px) saturate(1.4) brightness(1.03);
  border:1px solid rgba(255,255,255,.42)!important;
  box-shadow:0 5px 16px -6px rgba(106,166,255,.42),
    inset 0 1.5px 1px rgba(255,255,255,.5),         /* top specular (was .65) */
    inset 0 -3px 6px -3px rgba(255,255,255,.16),     /* bottom inner lensing (was .28) */
    inset 0 0 8px -3px rgba(180,210,255,.32)!important}

/* v4-fb(chat): per-tab effects LOOP while that tab is ACTIVE (you're on its page), not one-shot.
   Kosmos = sphere spins · Feed = pulse line travels left-right (beep beep) · Community = bubbles
   keep popping (JS) · My = person filled with interest colors while active, line when not. */
/* Kosmos = 3D SPHERE rotation feel (not a 2D flip): the vertical meridian curves sweep from
   full to edge-on and back (scaleX), while the silhouette circle + equator stay fixed — reads
   as the globe surface turning around its axis. */
/* v4-fb(chat): Kosmos icon = halftone SQUARE-grid sphere (3D-looking 2D globe, diagonal grid).
   Active/on-tap → each SQUARE grows & shrinks in a travelling wave (per-dot animation-delay set
   inline by longitude), so a band of large dots sweeps DIAGONALLY across the fixed silhouette —
   reads as a real 3D sphere turning on a diagonal axis, NOT a flat plane flipping (rotate3d). */
@keyframes kdotpulse{0%,100%{transform:scale(.4)}50%{transform:scale(1.18)}}
.nav .n[data-s="kosmos"].act .kdotsvg rect{transform-box:fill-box;transform-origin:center;animation:kdotpulse 1.8s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.nav .n[data-s="kosmos"].act .kdotsvg rect{animation:none!important}}
/* Feed = real heart-monitor beep: the LINE itself sweeps/redraws (EKG trace), not just sliding */
@keyframes fxekg{to{stroke-dashoffset:-36}}
.nav .n[data-s="feed"].act svg path{stroke-dasharray:15 21;animation:fxekg 1.05s linear infinite}
.nav .n[data-s="my"] svg.myfilled{filter:drop-shadow(0 0 5px rgba(255,157,196,.3))}
/* My active: filled + gently pulses (grow/shrink) on a loop */
@keyframes fxmypulse{0%,100%{transform:scale(1)}50%{transform:scale(1.2)}}
.nav .n[data-s="my"].act svg{animation:fxmypulse 1.25s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
/* Community speech bubbles (spawned on a loop by navFx while active) */
.nav .n[data-s="community"]{position:relative}
.navbubble{position:absolute;left:50%;top:1px;width:9px;height:9px;border-radius:50% 50% 50% 2px;pointer-events:none;opacity:0;
  background:linear-gradient(135deg,#8fbcff,#9b8cff);animation:fxbubble .85s ease-out forwards}
@keyframes fxbubble{
  0%{opacity:0;transform:translate(calc(-50% + var(--bx,0)),6px) scale(.3)}
  30%{opacity:1;transform:translate(calc(-50% + var(--bx,0)),-6px) scale(1)}
  100%{opacity:0;transform:translate(calc(-50% + var(--bx,0)),-16px) scale(.7)}}
@media (prefers-reduced-motion:reduce){.nav .n.act svg,.nav .n.act svg path{animation:none!important}.navbubble{display:none}}

/* v4-fb(chat / DF-14): section-grouping boxes removed app-wide to match the Feed &
   Community ranKING pages (boxless sections). Only the .csec section WRAPPER goes
   transparent/borderless/padless — per-content cards keep their own box (.mlrow,
   .krewchatmod, .krewmapentry, kc-card, .fcard, etc. all carry their own bg/border).
   Section heading + vertical rhythm (the .csec{margin} rule) are preserved. */
.csec{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important}

/* v4-fb(chat): hide the horizontal scrollbar on the Pod rail (이 Node의 Pod) */
.npodscroll{scrollbar-width:none;-ms-overflow-style:none}
.npodscroll::-webkit-scrollbar{display:none;width:0;height:0}
/* v4-fb(chat): Snapshot card — remove the border box (raw on black; fact chips carry the color) */
.asblock.snap{background:transparent!important;border:0!important;padding:0!important}

/* v4-fb(chat): Kosmos far/field node labels stay HORIZONTAL — they were wrapping one Korean
   char per line into a vertical stack once the tiny far-node card collapsed to ~1ch wide.
   DF-6: brighter/more legible — the node's low opacity caps them, so use a near-white fill +
   subtle shadow so they read on the dark map. */
.node.anchor .c .ttl{white-space:nowrap!important;-webkit-line-clamp:unset!important;display:block!important;overflow:visible!important;min-height:0!important;text-overflow:clip;width:max-content;max-width:none;
  color:color-mix(in srgb,var(--nc,#6aa6ff) 58%,#ffffff)!important;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 6px rgba(0,0,0,.5)}

/* v4-fb(chat): Krew Library — redundant 'Krew 라이브러리' mid-title removed; keep sort right-aligned. */
.klibhd.nolabel{justify-content:flex-end}
/* v4-fb(chat): Pulse list hide/expand — default 3, '+N개 더 보기' toggle. */
.kpulsemore{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--sans);color:var(--mine,#6aa6ff);cursor:pointer;padding:9px 0 2px}
.kpulsemore .kchev{font-size:11px}
/* v4-fb(chat): generic grouping fold — show 3, '+N개 더 보기' toggle (Krews groupings) */
.foldmore{display:inline-flex;align-items:center;gap:5px;font:700 12px var(--sans);color:var(--mine,#6aa6ff);cursor:pointer;padding:8px 2px 4px}
.foldmore .foldchev{font-size:11px}

/* v4-fb(chat): Krew-node Summary — prominent 'open this Krew' entry (Krew node = a Krew projection). */
.askrewopen{display:flex;align-items:center;gap:11px;margin:11px 14px 3px;padding:12px 14px;border-radius:14px;cursor:pointer;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 12%,transparent);border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 30%,transparent)}
.askrewopen .askrewi{font-size:21px;flex:none}
.askrewopen .askrewm{flex:1;min-width:0}
.askrewopen .askrewt{font:800 14px var(--sans);color:var(--ink,#eef3ff)}
.askrewopen .askrews{font:600 11px var(--sans);color:var(--ink3,#8890b0);margin-top:2px}
.askrewopen .askrewgo{color:var(--mine,#6aa6ff);font-size:18px;flex:none}

/* ===== v4-fb(chat / DF-15 phase 1): unify ALL filter tabs & chips to the Krews visual =====
   One cohesive language everywhere: rounded glass chips with an accent-tinted active state,
   and section tabs get an accent gradient underline. Accent = --mine; glass = blur (kc-cta grammar). */
/* (a) standalone pill/chip filters — idle = faint accent tint, active = accent glass fill */
.feedtabs.mcinner .ftab,.feedtabs.signalrail .ftab,.feedtabs.rankrail .ftab,
.klibf,.kcdiscchip,.rkChips.cat .rkCatChip,.rkChips .rkChip{
  color:var(--ink3,#8890b0)!important;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 7%,transparent)!important;
  border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 15%,transparent)!important;
  border-radius:999px!important;transition:color .16s,background .16s,border-color .16s}
.feedtabs.mcinner .ftab.act,.feedtabs.signalrail .ftab.act,
.klibf.act,.kcdiscchip.act,.rkChips.cat .rkCatChip.act,.rkChips .rkChip.act{
  color:#fff!important;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 60%,transparent)!important;
  border-color:color-mix(in srgb,var(--mine,#6aa6ff) 52%,transparent)!important;
  box-shadow:none!important;
  backdrop-filter:blur(6px) saturate(1.2);-webkit-backdrop-filter:blur(6px) saturate(1.2);
  text-shadow:0 1px 2px rgba(0,0,0,.25)}
/* ranKING gold rail keeps its own accent identity, same glass grammar */
.feedtabs.rankrail .ftab.act{color:#fff!important;background:color-mix(in srgb,#cdb24a 55%,transparent)!important;border-color:color-mix(in srgb,#cdb24a 48%,transparent)!important}
.rkChips.intent .rkChip.act{color:#0a0f1c!important;background:#cdb24a!important;border-color:transparent!important}
/* the For You / Surprise Me / Following / Filter context chips */
.feedtabs.signalrail .fctx{background:color-mix(in srgb,var(--mine,#6aa6ff) 7%,transparent)!important;border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 15%,transparent)!important;border-radius:999px}
.feedtabs.signalrail .fctx.act{color:#fff!important;background:color-mix(in srgb,var(--mine,#6aa6ff) 60%,transparent)!important;border-color:color-mix(in srgb,var(--mine,#6aa6ff) 52%,transparent)!important}

/* (b) segmented All/Hot/Post (.feedtabs base container) — active = accent glass segment */
.feedtabs .ftab.act{color:var(--ink,#eef3ff)!important;background:color-mix(in srgb,var(--mine,#6aa6ff) 26%,transparent)!important;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mine,#6aa6ff) 46%,transparent)!important}

/* (c) underline section tabs (Missions/My Circle/Krews/ranKING, My tabs, Krew tabs) —
   accent gradient underline bar + accent text (premium, Krews feel) */
/* Daniel: 모든 중간 탭 뒤 = 반투명 유리(frosted glass), NOT solid black bar. Matches .srail.stick /
   .kctabbar glass recipe (rgba tint + backdrop blur) so content scrolls under a translucent bar. */
.feedtabs.viewtabs{background:rgba(12,18,34,.45)!important;backdrop-filter:blur(11px) saturate(1.4);-webkit-backdrop-filter:blur(11px) saturate(1.4)}
/* Full-width bar: break out of the container's side padding so the glass bg + bottom divider span
   edge-to-edge, while the tabs stay aligned to the content inset. */
.feedtabs.viewtabs{margin-left:-16px!important;margin-right:-16px!important;padding-left:16px;padding-right:16px;border-bottom:1px solid var(--line)}
.mytabs{margin-left:0!important;margin-right:0!important;padding-left:12px;padding-right:12px;background:rgba(12,18,34,.62)!important;backdrop-filter:blur(9px) saturate(1.3);-webkit-backdrop-filter:blur(9px) saturate(1.3);border-bottom:1px solid var(--line)}
.feedtabs.viewtabs .ftab,.srail .stab,.mytab{position:relative}
/* v4-fb(chat): active underline tab = FLOWING gradient TEXT + flowing gradient underline. No focus box. */
/* DF-1: unified to the SAME cool-neon tone-set as the nav (was blue→purple→mint). */
.feedtabs.viewtabs .ftab.act,.srail .stab.act,.mytab.act{
  border-bottom-color:transparent!important;box-shadow:none!important;
  background:none!important;color:#6aa6ff!important;-webkit-text-fill-color:#6aa6ff!important;
  text-shadow:0 0 8px color-mix(in srgb,#4fd6e6 40%,transparent)!important;
  animation:neonglow 2.8s ease-in-out infinite}   /* solid animated color — no clip-text (mobile-safe) */
.feedtabs.viewtabs .ftab.act::after,.srail .stab.act::after,.mytab.act::after{
  content:'';position:absolute;left:16%;right:16%;bottom:0;height:3px;border-radius:3px;pointer-events:none;
  background:var(--neonflow);background-size:200% 100%;
  box-shadow:0 1px 8px color-mix(in srgb,#4fd6e6 55%,transparent);animation:neonflow 3.4s linear infinite}
@media (prefers-reduced-motion:reduce){.feedtabs.viewtabs .ftab.act,.srail .stab.act,.mytab.act,
  .feedtabs.viewtabs .ftab.act::after,.srail .stab.act::after,.mytab.act::after{animation:none}}
/* no blue focus 'box' on tabs/chips — active state (underline+text) is the indicator */
.feedtabs .ftab:focus,.feedtabs .ftab:focus-visible,.srail .stab:focus,.srail .stab:focus-visible,
.mytab:focus,.mytab:focus-visible,.kcdiscchip:focus,.kcdiscchip:focus-visible,
.klibf:focus,.klibf:focus-visible,.rkChips .rkChip:focus,.rkChips .rkChip:focus-visible,
.rkCatChip:focus,.rkCatChip:focus-visible{outline:none!important}

/* ===== v4-fb(chat): components on black — keep a FAINT color fill, drop area boxes =====
   Correction: only the area-DIVIDING boxes (.csec sections) are removed. Content cards keep
   a faint color feel (fainter than the original solid card) + thin border. Accent color BARS
   stay off (they were the strong 'color' Daniel disliked). Applied uniformly. */
.kc-card,.c7pod,.c7krewitem,.c7nodecard,.mlrow,.npodcard,
.fcard:not(.media),.cobjcard,.msncard{
  background:color-mix(in srgb,var(--card,#141d36) 42%,transparent)!important}
/* My Identity/Profile Shell keeps its own Krew-hero theme gradient (above); only the inner D-ID
   layer gets a faint sub-panel tint on the hero. */
.profilelayer .pldid{background:color-mix(in srgb,#0c1226 45%,transparent)!important;border:1px solid rgba(255,255,255,.08)!important;border-radius:12px;padding:9px 11px!important}
.profilelayer .pldidsw{display:flex;align-items:center;gap:6px}
.profilelayer .pldidtag{margin-left:auto;font:600 9px var(--mono);color:var(--ink4,#7a80a0);letter-spacing:.02em}
.kc-card::before,.c7pod::before,.c7krewitem.accent::before{display:none!important}
.kc-card:hover,.c7pod.joined:hover,.c7pod.discover:hover{box-shadow:none!important}
/* inner preview rows -> very faint tint (not a hard box) */
.kc-chip{background:color-mix(in srgb,var(--card2,#0f1628) 45%,transparent)!important}
.kc-chip.live{background:color-mix(in srgb,#5ad6a8 9%,transparent)!important}

/* ===== B3 (System Lock §2): asK answer lane + consent transitions ===== */
.asklane{display:flex;align-items:center;gap:8px;margin:8px 0 4px;padding:7px 11px;border-radius:10px;
  background:color-mix(in srgb,var(--lc,#6aa6ff) 12%,transparent);border:1px solid color-mix(in srgb,var(--lc,#6aa6ff) 30%,transparent)}
.asklanet{font:800 11px var(--sans);color:var(--lc,#6aa6ff);white-space:nowrap}
.asklanel{font:700 8px var(--mono);color:var(--ink3,#8890b0);letter-spacing:.05em;white-space:nowrap}
.asklaned{font:500 11px var(--sans);color:var(--ink2,#aab6d6);flex:1;min-width:0}
.verifyblk .verifylist{margin:4px 0 0;padding-left:17px;font:500 12px/1.6 var(--sans);color:var(--ink2,#aab6d6)}
.verifyblk .verifylist li{margin-bottom:1px}
.acshd{font:800 14px var(--sans);color:var(--ink,#eef3ff);display:flex;flex-wrap:wrap;align-items:baseline;gap:7px;margin:6px 0 4px}
.acsq{font:600 12.5px var(--sans);color:var(--ink2,#aab6d6);margin-bottom:11px}
.acsopt{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:12px;background:color-mix(in srgb,var(--card2,#0f1628) 55%,transparent);border:1px solid var(--line,#26263a);margin-bottom:8px;cursor:pointer;transition:transform .12s}
.acsopt:active{transform:scale(.99)}
.acsi{font-size:20px;flex:none}
.acsm{flex:1;min-width:0}
.acst{font:800 13px var(--sans);color:var(--ink,#eef3ff)}
.acss{font:500 11px var(--sans);color:var(--ink3,#8890b0);margin-top:2px}
.acsg{color:var(--ink3,#8890b0);font-size:17px;flex:none}
/* B4: official sheet — primary state + separate descriptor */
.optsh .offdesc{font:600 11px var(--sans);color:var(--ink3,#8890b0)}

/* v4-fb: krew rail full name (2-line, not ellipsis-truncated) + viewOnly 'Krew 보기' affordance */
.c7kname{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.22;text-overflow:clip}
/* Daniel: viewOnly Krew 카드 확대 + 'Krew 보기' CTA를 카드 하단 full-width glass 버튼으로(우측 겹침 제거 ·
   kc-cta 비주얼 통일). flex-wrap으로 아바타+텍스트는 윗줄, CTA는 아랫줄 전체폭. */
.c7krewitem.viewonly{min-width:196px;max-width:224px;padding:12px 13px;gap:10px;flex-wrap:wrap;align-items:center}
.c7krewitem.viewonly .c7km{padding-right:4px}
.c7kview{position:static;flex-basis:100%;justify-content:center;display:inline-flex;align-items:center;gap:3px;font:800 12px var(--sans);color:#fff;
  background:color-mix(in srgb,var(--mine,#6aa6ff) 60%,transparent);border:1px solid color-mix(in srgb,var(--mine,#6aa6ff) 55%,transparent);
  border-radius:11px;padding:9px 13px;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.25);margin-top:2px}