/* ============================================================
   Koshvardoust UI Kit — component CSS
   loaded after colors_and_type.css
   ============================================================ */

* { box-sizing: border-box; }
body { margin: 0; }

/* ----- Buttons ------------------------------------------------ */
.kd-btn {
  font-family: var(--font-body);
  font-weight: 600;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all var(--dur-fast) var(--ease-out);
  white-space: nowrap;
}
.kd-btn:active { transform: scale(0.97); }
.kd-btn[disabled] { opacity: 0.45; pointer-events: none; }

.kd-btn--sm  { font-size: 13px; padding: 7px 14px; }
.kd-btn--md  { font-size: 14px; padding: 10px 20px; }
.kd-btn--lg  { font-size: 16px; padding: 14px 30px; }

.kd-btn--primary   { background: var(--grad-hero); color: #fff; box-shadow: var(--glow-magenta); }
.kd-btn--primary:hover { filter: brightness(1.1); }
.kd-btn--secondary { background: rgba(255,255,255,.06); color: var(--fg); border-color: var(--line-strong); }
.kd-btn--secondary:hover { border-color: var(--neon-magenta); color: #fff; }
.kd-btn--ghost     { background: transparent; color: var(--fg-2); }
.kd-btn--ghost:hover { background: rgba(255,255,255,.06); color: var(--fg); }
.kd-btn--gold      { background: var(--grad-gold); color: #1a1208; }
.kd-btn--gold:hover { filter: brightness(1.05); }

.kd-iconbtn {
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: rgba(255,255,255,.05);
  color: var(--fg);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-iconbtn:hover { border-color: var(--neon-magenta); color: #fff; }
.kd-iconbtn { position: relative; }
.kd-iconbtn__dot { position: absolute; top: 4px; inset-inline-end: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--neon-magenta); box-shadow: 0 0 6px var(--neon-magenta); border: 2px solid var(--bg); }

/* ----- Pills -------------------------------------------------- */
.kd-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 999px;
  font-size: 13px; font-weight: 500;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--fg-2); cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  font-family: var(--font-body);
}
.kd-pill:hover { border-color: var(--line-strong); color: var(--fg); }
.kd-pill.is-active { background: var(--grad-hero); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--glow-magenta); }
.kd-pill__dot { width: 8px; height: 8px; border-radius: 50%; }
.kd-pill { background: rgba(255,255,255,.05); border-color: var(--line-strong); color: var(--fg-2); }

/* ----- Stars -------------------------------------------------- */
.kd-stars { display: inline-flex; gap: 4px; }
.kd-star { color: rgba(255,255,255,.2); cursor: pointer; transition: transform var(--dur-base) var(--ease-spring), color var(--dur-fast) var(--ease-out), text-shadow var(--dur-fast) var(--ease-out); user-select: none; }
.kd-star.is-lit { color: var(--neon-gold); }
.kd-star.is-peak { transform: scale(1.18); text-shadow: 0 0 14px rgba(255,200,90,.85); }

/* ----- Confetti ----------------------------------------------- */
.kd-confetti { position: absolute; inset: 0; pointer-events: none; }
.kd-confetti-bit {
  position: absolute; left: 50%; top: 50%;
  border-radius: 1px;
  animation: kd-confetti 1.2s var(--ease-out) forwards;
}
@keyframes kd-confetti {
  0%   { transform: translate(0,0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) rotate(720deg); opacity: 0; }
}

/* ----- Shell -------------------------------------------------- */
.kd-shell { min-height: 100vh; background: var(--bg); color: var(--fg); padding-bottom: 80px; }
.kd-shell::before {
  content: ""; position: fixed; inset: -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(600px at 15% 10%, rgba(255,78,168,.12), transparent 60%),
    radial-gradient(600px at 85% 30%, rgba(75,227,255,.10), transparent 60%),
    radial-gradient(700px at 50% 90%, rgba(154,108,255,.10), transparent 60%);
}
.kd-shell > * { position: relative; z-index: 1; }
.kd-topnav { position: sticky; top: 0; z-index: 30; background: rgba(10,16,24,.7); backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid var(--line); }
.kd-topnav__inner { max-width: 1280px; margin: 0 auto; padding: 12px 20px; display: flex; align-items: center; gap: 24px; }
.kd-logo { display: flex; align-items: center; gap: 10px; cursor: pointer; text-decoration: none; color: inherit; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); }
.kd-logo img { height: 30px; width: auto; filter: brightness(1.05); }
.kd-logo__text { font-family: var(--font-display); font-size: 18px; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }

.kd-topnav__nav { display: none; gap: 6px; flex: 1; justify-content: center; }
.kd-topnav__item { font-family: var(--font-body); font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; border: 0; background: transparent; color: var(--fg-2); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.kd-topnav__item:hover { background: rgba(255,255,255,.05); color: var(--fg); }
.kd-topnav__item.is-active { background: var(--grad-hero); color: #fff; font-weight: 600; box-shadow: var(--glow-magenta); }
.kd-topnav__right { display: flex; align-items: center; gap: 8px; margin-inline-start: auto; }
.kd-topnav__login {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  color: rgba(255,255,255,.85); font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kd-topnav__login:hover { background: rgba(75,227,255,.10); border-color: rgba(75,227,255,.40); color: var(--neon-cyan); }
@media (max-width: 720px) { .kd-topnav__login { display: none; } }

.kd-topnav__cta { padding: 8px 18px; border-radius: 999px; border: 1px solid transparent; background: var(--grad-hero); color: #fff; font-family: var(--font-body); font-weight: 700; font-size: 13px; cursor: pointer; box-shadow: var(--glow-magenta); }

@media (min-width: 720px) {
  .kd-topnav__nav { display: flex; }
}

.kd-main { max-width: 1280px; margin: 0 auto; padding: 20px; }

.kd-fab {
  position: fixed; bottom: 88px; inset-inline-start: 20px; z-index: 40;
  background: var(--grad-hero); color: #fff;
  border: 0; border-radius: var(--radius-pill);
  padding: 14px 22px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  cursor: pointer;
  box-shadow: var(--glow-magenta), var(--shadow-3);
  transition: transform var(--dur-fast) var(--ease-out);
}
.kd-fab:hover { transform: translateY(-2px); }
.kd-fab__plus { font-size: 22px; line-height: 1; }
@media (min-width: 720px) { .kd-fab { bottom: 28px; } }

.kd-bottomnav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: rgba(10,16,24,.85);
  backdrop-filter: blur(16px) saturate(140%);
  border-top: 1px solid var(--line);
  display: flex; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
}
.kd-bottomnav__item {
  flex: 1; background: transparent; border: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 6px 4px; color: var(--fg-3); font-family: var(--font-body); font-size: 11px;
}
.kd-bottomnav__item.is-active { color: #fff; font-weight: 600; }
.kd-bottomnav__item.is-active .kd-bottomnav__icon { background: var(--grad-hero); color: #fff; box-shadow: var(--glow-magenta); }
.kd-bottomnav__icon { width: 44px; height: 28px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease-out); }
@media (min-width: 720px) { .kd-bottomnav { display: none; } }

/* ----- Bento Home --------------------------------------------- */
.kd-bento-page__hero { padding: 24px 4px 28px; }
.kd-bento-page__eyebrow { display: inline-block; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--neon-gold); margin-bottom: 14px; }
.kd-bento-page__title { font-family: var(--font-display); font-size: clamp(32px, 5vw, 56px); margin: 0 0 8px; color: var(--fg); letter-spacing: -.015em; line-height: 1.1; background: linear-gradient(180deg, #fff 0%, #b6c2d6 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kd-bento-page__sub { color: var(--fg-2); margin: 0; font-size: 15px; max-width: 640px; }

/* =====================================================
   BENTO GRID — explicit, predictable, no overflow
   Mobile: 2 cols. Desktop: 4 cols. Heights driven by
   minmax + tile content (no fixed 130px clipping).
   ===================================================== */
.kd-bento { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; grid-auto-flow: dense; grid-auto-rows: minmax(150px, auto); }
@media (min-width: 720px) { .kd-bento { grid-template-columns: repeat(4, 1fr); gap: 16px; grid-auto-rows: minmax(170px, auto); } }

.kd-bento__tile {
  position: relative;
  display: flex; flex-direction: column;
  border-radius: var(--radius-lg);
  overflow: hidden;
  padding: 16px;
  color: var(--fg);
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.08);
  background: var(--stage-800);
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
  min-width: 0; min-height: 0;
}
.kd-bento__tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: rgba(255,255,255,.18); }
.kd-bento__tile > * { position: relative; z-index: 1; min-width: 0; }
.kd-bento__tile > [class$="-bg"], .kd-bento__tile > [class$="-overlay"] {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
}

/* Header bar — badge + meta */
.kd-bento__th { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; min-width: 0; }
.kd-bento__th--on-image { color: #fff; }
.kd-bento__th-meta { font-family: var(--font-body); font-size: 10.5px; color: rgba(255,255,255,.55); white-space: nowrap; }
.kd-bento__pin { font-family: var(--font-body); font-size: 10.5px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.18); }

.kd-bento__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.08); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.12); font-family: var(--font-body); font-size: 10.5px; font-weight: 600; color: #fff; white-space: nowrap; }
.kd-bento__live { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,78,168,.18); border: 1px solid rgba(255,78,168,.4); font-family: var(--font-body); font-size: 10px; font-weight: 700; color: #ffb1d4; white-space: nowrap; }
.kd-bento__livedot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-magenta); box-shadow: 0 0 8px var(--neon-magenta); animation: kd-pulse 1.4s ease-in-out infinite; }
@keyframes kd-pulse { 50% { opacity: 0.4; transform: scale(1.3); } }

/* Typography */
.kd-bento__h { font-family: var(--font-display); font-size: 19px; line-height: 1.18; margin: 0; color: #fff; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.kd-bento__h--xl { font-size: 26px; line-height: 1.1; }
.kd-bento__p { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.72); margin: 4px 0 0; line-height: 1.5; }
.kd-bento__p--clip { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.kd-bento__p--center { text-align: center; }

.kd-bento__tf { margin-top: auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding-top: 12px; min-width: 0; }
.kd-bento__tf--stream { align-items: center; padding-top: 10px; }
.kd-bento__tf--challenge { align-items: center; }
.kd-bento__arrow { color: rgba(255,255,255,.55); }

/* Shared CTA */
.kd-bento__cta { padding: 7px 12px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.14); color: #fff; border-radius: 999px; font-family: var(--font-body); font-weight: 600; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; flex-shrink: 0; transition: all var(--dur-fast) var(--ease-out); }
.kd-bento__cta:hover { background: rgba(255,255,255,.16); }
.kd-bento__cta--solid { background: var(--grad-hero); border-color: transparent; box-shadow: var(--glow-magenta); }

/* Avatars row */
.kd-bento__avatars { display: flex; align-items: center; flex-shrink: 0; }
.kd-bento__avatars > * { margin-inline-start: -8px; border: 2px solid var(--stage-900); }
.kd-bento__avatars > *:first-child { margin-inline-start: 0; }
.kd-bento__more { padding: 3px 8px; background: rgba(255,255,255,.14); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: #fff; margin-inline-start: 4px; white-space: nowrap; }

/* ---- HERO tile ---- */
.kd-bento__hero-bg {
  background:
    radial-gradient(420px at 12% 8%, rgba(255,78,168,.42), transparent 60%),
    radial-gradient(380px at 90% 90%, rgba(75,227,255,.32), transparent 60%),
    linear-gradient(150deg, #1a0a22 0%, #08111f 100%);
}
.kd-bento__hero-thumbs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 4px 0 10px; flex: 1; min-height: 0; }
.kd-bento__hero-thumb { position: relative; aspect-ratio: 16/10; border-radius: 10px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); min-height: 0; }
.kd-bento__hero-thumb-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,.92); color: #0a1018; display: inline-flex; align-items: center; justify-content: center; }
.kd-bento__hero-thumb-dur { position: absolute; bottom: 4px; inset-inline-start: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; font-family: var(--font-mono); font-size: 9px; }
.kd-bento__hero-thumb-title { position: absolute; top: 4px; inset-inline-end: 4px; padding: 1px 6px; border-radius: 6px; background: rgba(0,0,0,.5); color: #fff; font-family: var(--font-body); font-size: 9.5px; font-weight: 600; backdrop-filter: blur(4px); max-width: calc(100% - 8px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- STREAM tile ---- */
.kd-bento__stream-bg {
  background:
    radial-gradient(420px at 10% 10%, rgba(75,227,255,.28), transparent 60%),
    radial-gradient(360px at 92% 90%, rgba(154,108,255,.32), transparent 60%),
    linear-gradient(160deg, #081628 0%, #0a1018 100%);
}
.kd-bento__stream-list { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-direction: column; gap: 8px; flex: 1; min-height: 0; }
.kd-bento__stream-row { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.06); min-width: 0; }
.kd-bento__stream-row--ext { background: rgba(75,227,255,.06); border-color: rgba(75,227,255,.18); }
.kd-bento__stream-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.35; }
.kd-bento__stream-mid strong { font-family: var(--font-body); font-size: 12px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-bento__stream-text { font-family: var(--font-body); font-size: 11.5px; color: rgba(255,255,255,.62); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.kd-bento__stream-time { font-family: var(--font-body); font-size: 10px; color: rgba(255,255,255,.4); flex-shrink: 0; }
.kd-bento__chan-mini { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.kd-bento__chan-row { display: flex; gap: 5px; align-items: center; flex-wrap: nowrap; min-width: 0; }
.kd-bento__chan-row .kd-bento__chan-mini { width: 22px; height: 22px; font-size: 11px; border-radius: 6px; }

/* ---- CHALLENGE tile ---- */
.kd-bento__challenge-bg {
  background:
    radial-gradient(450px at 30% 35%, rgba(68,227,184,.45), transparent 60%),
    radial-gradient(360px at 80% 80%, rgba(255,138,61,.35), transparent 60%),
    linear-gradient(160deg, #08231e 0%, #0a1018 100%);
}
.kd-bento__challenge-overlay {
  background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.4) 100%);
}
.kd-bento__challenge-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; padding: 6px 0; }
.kd-bento__ch-thumbs { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; margin-top: 4px; }
.kd-bento__ch-thumb { aspect-ratio: 1; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.18); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.kd-bento__ch-thumb--more { background: rgba(0,0,0,.45) !important; backdrop-filter: blur(8px); display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 700; border-color: rgba(255,255,255,.25); }
.kd-bento__ch-prize { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: linear-gradient(135deg, rgba(245,213,137,.16), rgba(192,138,46,.08)); border: 1px solid rgba(245,213,137,.3); color: #f5d589; font-family: var(--font-body); font-size: 11px; line-height: 1.4; align-self: flex-start; max-width: 100%; }
.kd-bento__ch-prize > svg { flex-shrink: 0; }
.kd-bento__ch-prize span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-bento__ch-prize strong { color: #ffd97a; font-weight: 700; }

.kd-bento__tf--challenge { gap: 10px; flex-wrap: wrap; align-items: center; }
.kd-bento__chstat { display: flex; flex-direction: column; line-height: 1.1; flex-shrink: 0; }
.kd-bento__chstat strong { font-family: var(--font-display); font-size: 20px; color: #fff; font-weight: 500; }
.kd-bento__chstat span { font-family: var(--font-body); font-size: 10.5px; color: rgba(255,255,255,.55); margin-top: 2px; }
.kd-bento__chstat-inline { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 11.5px; color: rgba(255,255,255,.6); }

/* ---- TALENT tile ---- */
.kd-bento__talent-bg {
  background:
    radial-gradient(440px at 30% 30%, rgba(255,200,90,.34), transparent 60%),
    radial-gradient(300px at 85% 90%, rgba(255,138,61,.22), transparent 60%),
    linear-gradient(155deg, #1a1024 0%, #0a1018 100%);
}
.kd-bento__podium { flex: 1; min-height: 0; display: flex; align-items: flex-end; justify-content: space-around; gap: 10px; padding: 12px 4px 6px; position: relative; }
.kd-bento__pod { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; position: relative; flex: 1; }
.kd-bento__pod--1 { transform: translateY(-6px); }
.kd-bento__pod-rank { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #0a1018; font-family: var(--font-body); font-size: 11px; font-weight: 800; box-shadow: 0 4px 10px rgba(0,0,0,.3); z-index: 2; }
.kd-bento__pod-name { font-family: var(--font-body); font-size: 11.5px; color: #fff; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-bento__pod-score { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-mono); font-size: 10.5px; color: rgba(255,255,255,.6); }
.kd-bento__pod-step { width: 100%; max-width: 70px; border-top-left-radius: 6px; border-top-right-radius: 6px; border: 1px solid; margin-top: 2px; }

.kd-bento__talent-cats { display: flex; gap: 5px; margin-top: 10px; flex-wrap: wrap; justify-content: center; }
.kd-bento__talent-cat { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; white-space: nowrap; }

/* ---- HUMOR tile ---- */
.kd-bento__tile--humor { background: linear-gradient(155deg, #2a0a1f 0%, #0a1018 100%); }
.kd-bento__tile--humor::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(400px at 18% 22%, rgba(255,78,168,.32), transparent 60%); pointer-events: none; }
.kd-bento__humor-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 0; }
.kd-bento__humor-row { display: flex; gap: 6px; align-items: stretch; }
.kd-bento__humor-thumb { position: relative; flex: 1; min-width: 0; aspect-ratio: 9/13; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.08); display: flex; align-items: flex-end; justify-content: flex-start; padding: 4px 6px; color: #fff; font-family: var(--font-mono); font-size: 10px; gap: 3px; }
.kd-bento__humor-thumb > svg { filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.kd-bento__humor-add { aspect-ratio: 9/13; flex: 1; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px dashed rgba(255,255,255,.22); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all var(--dur-fast) var(--ease-out); }
.kd-bento__humor-add:hover { background: var(--grad-hero); border-color: transparent; box-shadow: var(--glow-magenta); }

/* ---- FACT-CHECK tile ---- */
.kd-bento__news-bg {
  background:
    radial-gradient(380px at 25% 25%, rgba(75,227,255,.36), transparent 60%),
    radial-gradient(300px at 85% 88%, rgba(154,108,255,.22), transparent 60%),
    linear-gradient(155deg, #0a1f2e 0%, #0a1018 100%);
}
.kd-bento__news-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 4px 0; min-width: 0; }
.kd-bento__quote { font-family: var(--font-body); font-size: 12px; line-height: 1.55; color: rgba(255,255,255,.86); margin: 0; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kd-bento__news-actions { display: flex; gap: 6px; margin-top: 8px; }
.kd-bento__news-btn { flex: 1; height: 32px; border-radius: 8px; border: 1px solid; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; transition: all var(--dur-fast) var(--ease-out); }
.kd-bento__news-btn--real { background: rgba(68,227,184,.14); color: var(--neon-mint); border-color: rgba(68,227,184,.4); }
.kd-bento__news-btn--real:hover { background: rgba(68,227,184,.28); }
.kd-bento__news-btn--fake { background: rgba(255,78,168,.14); color: var(--neon-magenta); border-color: rgba(255,78,168,.4); }
.kd-bento__news-btn--fake:hover { background: rgba(255,78,168,.28); }

/* ---- GAME tile ---- */
.kd-bento__game-bg {
  background:
    radial-gradient(360px at 25% 25%, rgba(154,108,255,.45), transparent 60%),
    radial-gradient(280px at 85% 90%, rgba(255,138,61,.22), transparent 60%),
    linear-gradient(155deg, #1a0e2e 0%, #0a1018 100%);
}
.kd-bento__game-mid { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 4px 0; }

/* ---- STREAK tile ---- */
.kd-bento__streak-bg {
  background:
    radial-gradient(360px at 50% 25%, rgba(255,138,61,.55), transparent 60%),
    linear-gradient(160deg, #2a1408 0%, #0a1018 100%);
}
.kd-bento__streak-num { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 0 4px; }
.kd-bento__streak-num > span { font-family: var(--font-display); font-size: 44px; line-height: 1; color: #fff; font-weight: 500; text-shadow: 0 0 18px rgba(255,138,61,.7); }
.kd-bento__streak-num > svg { color: var(--neon-orange); filter: drop-shadow(0 0 14px rgba(255,138,61,.7)); }
.kd-bento__streak-week { display: flex; justify-content: space-between; gap: 4px; margin: 4px 0 6px; }
.kd-bento__streak-day { flex: 1; aspect-ratio: 1; max-height: 24px; border-radius: 6px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 10px; color: rgba(255,255,255,.45); }
.kd-bento__streak-day.is-on { background: rgba(255,138,61,.18); border-color: rgba(255,138,61,.4); color: #ffb27a; }
.kd-bento__streak-day.is-today { background: var(--neon-orange); color: #2a1408; border-color: transparent; box-shadow: 0 0 10px rgba(255,138,61,.7); font-weight: 700; }

/* =====================================================
   GRID SPANS
   ===================================================== */
/* Mobile (2 cols) */
.kd-bento__tile--hero       { grid-column: span 2; grid-row: span 3; }
.kd-bento__tile--stream     { grid-column: span 2; grid-row: span 3; }
.kd-bento__tile--challenge  { grid-column: span 2; grid-row: span 2; }
.kd-bento__tile--talent     { grid-column: span 2; grid-row: span 2; }
.kd-bento__tile--humor      { grid-column: span 2; grid-row: span 2; }
.kd-bento__tile--news       { grid-column: span 1; grid-row: span 2; }
.kd-bento__tile--game       { grid-column: span 1; grid-row: span 2; }
.kd-bento__tile--streak     { grid-column: span 2; grid-row: span 2; }

/* Wide (4 cols) */
@media (min-width: 720px) {
  .kd-bento__tile--hero       { grid-column: span 2; grid-row: span 3; }
  .kd-bento__tile--stream     { grid-column: span 2; grid-row: span 3; }
  .kd-bento__tile--challenge  { grid-column: span 2; grid-row: span 2; }
  .kd-bento__tile--talent     { grid-column: span 2; grid-row: span 2; }
  .kd-bento__tile--humor      { grid-column: span 2; grid-row: span 2; }
  .kd-bento__tile--news       { grid-column: span 1; grid-row: span 2; }
  .kd-bento__tile--game       { grid-column: span 1; grid-row: span 2; }
  .kd-bento__tile--streak     { grid-column: span 2; grid-row: span 2; }
}
@media (min-width: 1100px) {
  .kd-bento__tile--streak     { grid-column: span 2; }
}

/* ----- Feed --------------------------------------------------- */
.kd-feed-page__head { padding: 8px 4px 14px; }
.kd-feed-page__title { font-family: var(--font-display); font-size: 32px; margin: 0 0 4px; color: var(--fg); }

.kd-feed-page__sub { color: var(--fg-2); margin: 0; font-size: 14px; }
.kd-feed-page__filters { position: sticky; top: 64px; z-index: 20; padding: 12px 4px; display: flex; gap: 8px; overflow-x: auto; background: color-mix(in oklab, var(--bg) 85%, transparent); backdrop-filter: blur(8px); margin-bottom: 12px; }
.kd-feed-page__filters::-webkit-scrollbar { display: none; }

.kd-masonry { columns: 2; column-gap: 12px; }
.kd-masonry > * { break-inside: avoid; margin-bottom: 12px; display: block; }
@media (min-width: 540px) { .kd-masonry { columns: 3; column-gap: 14px; } .kd-masonry > * { margin-bottom: 14px; } }
@media (min-width: 900px) { .kd-masonry { columns: 4; column-gap: 16px; } .kd-masonry > * { margin-bottom: 16px; } }

/* ----- Cards -------------------------------------------------- */
.kd-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kd-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kd-card--dark { background: rgba(255,255,255,.04); border-color: var(--line-strong); }
.kd-card--clickable { cursor: pointer; }

.kd-card__media { position: relative; overflow: hidden; }
.kd-card__media--video { background: #0a1018; }
.kd-card__videogradient { position: absolute; inset: 0; background: radial-gradient(80% 60% at 30% 30%, rgba(255,78,168,.55), transparent 70%), radial-gradient(80% 60% at 80% 80%, rgba(154,108,255,.55), transparent 70%); }
.kd-card__chip { position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 10px; font-weight: 600; backdrop-filter: blur(6px); z-index: 2; }
.kd-card__chip--rose { background: rgba(224,85,109,.85); }
.kd-card__chip--mint { background: rgba(76,196,166,.85); color: #07221c; }
.kd-card__playbtn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 32px; text-shadow: 0 2px 12px rgba(0,0,0,.6); z-index: 2; }
.kd-card__duration { position: absolute; bottom: 8px; inset-inline-start: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; font-family: var(--font-mono); z-index: 2; }
.kd-card__sound { position: absolute; bottom: 8px; inset-inline-end: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.95); color: #1a1208; font-size: 10px; font-weight: 600; z-index: 2; }

.kd-card__text { padding: 22px 18px; min-height: 140px; display: flex; align-items: center; }
.kd-card__quote { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.3; font-weight: 500; }

.kd-card__audio { padding: 16px; background: linear-gradient(135deg, rgba(76,196,166,.18), rgba(76,196,166,.04)); position: relative; }
.kd-card__waveform { display: flex; align-items: center; gap: 2px; height: 56px; margin: 18px 0 12px; }
.kd-card__waveform > span { flex: 1; background: var(--neon-mint); border-radius: 1px; min-height: 4px; box-shadow: 0 0 6px rgba(75,255,180,.5); }
.kd-card__audiometa { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--fg-2); }
.kd-card--dark .kd-card__audiometa { color: rgba(255,255,255,.7); }
.kd-card__playmini { width: 32px; height: 32px; border-radius: 50%; background: #4cc4a6; color: #07221c; border: 0; cursor: pointer; font-size: 12px; }

.kd-card__body { padding: 10px 12px 0; }
.kd-card__title { margin: 0; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--fg); }


.kd-card__foot { padding: 10px 12px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px dashed var(--line); margin-top: 8px; }
.kd-card__author { display: flex; align-items: center; gap: 8px; min-width: 0; }
.kd-card__name { font-size: 12px; font-weight: 600; color: var(--fg); }

.kd-card__type { font-size: 10px; color: var(--fg-3); }
.kd-card__rate { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.kd-card__count { font-size: 10px; color: var(--fg-3); font-family: var(--font-mono); }

/* ----- Wizard ------------------------------------------------- */
.kd-wizard { position: fixed; inset: 0; z-index: 80; display: flex; align-items: stretch; justify-content: center; }
.kd-wizard__bg { position: absolute; inset: 0; background: rgba(12,19,24,.78); backdrop-filter: blur(10px); animation: kd-fadein .32s var(--ease-out); }
@keyframes kd-fadein { from { opacity: 0; } to { opacity: 1; } }
.kd-wizard__panel { position: relative; width: 100%; max-width: 100vw; height: 100vh; padding: 28px 22px 36px; background: linear-gradient(180deg, rgba(28,16,42,.92), rgba(10,16,24,.96)); color: #f0e9d9; border-radius: 0; animation: kd-slideup .36s var(--ease-spring); display: flex; flex-direction: column; box-sizing: border-box; overflow-y: auto; }
@keyframes kd-slideup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kd-pop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }
@media (min-width: 720px) {
  .kd-wizard { align-items: center; padding: 24px; }
  .kd-wizard__panel { max-width: 640px; height: auto; max-height: calc(100vh - 48px); padding: 36px 32px; border-radius: 28px; }
}
.kd-wizard__close { position: absolute; top: 16px; inset-inline-end: 16px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.05); color: #f0e9d9; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; z-index: 2; }
.kd-wizard__back { background: transparent; border: 0; color: rgba(255,255,255,.7); cursor: pointer; font-size: 13px; margin-bottom: 14px; padding: 6px 0; font-family: var(--font-body); display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; }
.kd-wizard__step { display: flex; flex-direction: column; flex: 1; min-height: 0; }
.kd-wizard__h { font-family: var(--font-display); font-size: clamp(28px, 6vw, 36px); margin: 0 0 8px; background: var(--grad-gold); -webkit-background-clip: text; background-clip: text; color: transparent; line-height: 1.1; }
.kd-wizard__sub { color: rgba(255,255,255,.7); margin: 0 0 24px; font-size: 14px; line-height: 1.5; }
.kd-wizard__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 8px; }
@media (min-width: 540px) { .kd-wizard__grid { grid-template-columns: repeat(4, 1fr); } }
.kd-wizard__cat { padding: 22px 14px; border-radius: 16px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 8px; color: #f0e9d9; transition: all var(--dur-fast) var(--ease-out); font-family: var(--font-body); }
.kd-wizard__cat:hover { background: rgba(255,255,255,.08); border-color: var(--cat-color); box-shadow: 0 0 18px color-mix(in oklab, var(--cat-color) 40%, transparent); transform: translateY(-2px); }
.kd-wizard__cat-icon { display: inline-flex; align-items: center; justify-content: center; }
.kd-wizard__cat-title { font-size: 14px; font-weight: 600; }
.kd-wizard__opts { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }
.kd-wizard__opt { padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.18); color: #f0e9d9; cursor: pointer; font-family: var(--font-body); font-size: 14px; }
.kd-wizard__opt.is-on { background: var(--grad-hero); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--glow-magenta); }
.kd-wizard__input { width: 100%; padding: 14px 18px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #f0e9d9; font-family: var(--font-body); font-size: 18px; margin-bottom: 18px; direction: ltr; text-align: center; letter-spacing: 2px; box-sizing: border-box; }
.kd-wizard__otp { display: flex; gap: 8px; justify-content: center; direction: ltr; margin: 8px 0 18px; }
.kd-wizard__otp input { width: 48px; height: 56px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #f0e9d9; font-family: var(--font-mono); font-size: 22px; text-align: center; box-sizing: border-box; }
.kd-wizard__otp input:focus { outline: none; border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,78,168,.18); }
.kd-wizard__resend { background: transparent; border: 0; color: rgba(255,255,255,.6); cursor: pointer; font-family: var(--font-body); font-size: 13px; margin-bottom: 18px; }
.kd-wizard__resend:enabled { color: var(--neon-cyan); }
.kd-wizard__drop { border: 1.5px dashed rgba(255,255,255,.22); border-radius: 18px; padding: 28px 18px; text-align: center; background: rgba(255,255,255,.03); margin-bottom: 14px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-wizard__drop:hover, .kd-wizard__drop.is-drag { border-color: var(--neon-magenta); background: rgba(255,78,168,.08); }
.kd-wizard__drop-icon { color: var(--neon-cyan); margin-bottom: 8px; }
.kd-wizard__drop-h { font-family: var(--font-body); font-size: 16px; font-weight: 600; color: #fff; margin: 0 0 4px; }
.kd-wizard__drop-p { font-size: 12px; color: rgba(255,255,255,.55); margin: 0; }
.kd-wizard__drop input { display: none; }
.kd-wizard__upload { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: 16px; padding: 16px; margin-bottom: 14px; }
.kd-wizard__upload-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.kd-wizard__upload-thumb { width: 44px; height: 44px; border-radius: 12px; background: linear-gradient(135deg, rgba(154,108,255,.4), rgba(75,227,255,.3)); display: inline-flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.kd-wizard__upload-meta { flex: 1; min-width: 0; }
.kd-wizard__upload-name { font-size: 14px; font-weight: 600; color: #fff; margin: 0 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kd-wizard__upload-size { font-size: 11px; color: rgba(255,255,255,.55); font-family: var(--font-mono); margin: 0; }
.kd-wizard__upload-bar { height: 6px; border-radius: 999px; background: rgba(255,255,255,.08); overflow: hidden; }
.kd-wizard__upload-bar > i { display: block; height: 100%; background: var(--grad-hero); transition: width .25s var(--ease-out); box-shadow: 0 0 12px rgba(255,78,168,.5); }
.kd-wizard__upload-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 8px; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,.6); }
.kd-wizard__upload-pct { font-family: var(--font-display); font-size: 22px; color: #fff; font-weight: 500; }
.kd-wizard__upload-status { display: inline-flex; align-items: center; gap: 4px; }
.kd-wizard__upload-status.is-paused { color: var(--neon-orange); }
.kd-wizard__upload-status.is-active { color: var(--neon-mint); }
.kd-wizard__upload-status.is-resume { color: var(--neon-cyan); }
.kd-wizard__upload-actions { display: flex; gap: 8px; }
.kd-wizard__upload-act { padding: 6px 12px; border-radius: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); color: #f0e9d9; cursor: pointer; font-family: var(--font-body); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }
.kd-wizard__upload-act:hover { background: rgba(255,255,255,.1); }
.kd-wizard__caption { width: 100%; min-height: 80px; padding: 12px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.18); color: #f0e9d9; font-family: var(--font-body); font-size: 14px; resize: vertical; box-sizing: border-box; margin-bottom: 14px; line-height: 1.5; }
.kd-wizard__tustag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-family: var(--font-mono); padding: 2px 8px; border-radius: 999px; background: rgba(75,227,255,.14); color: var(--neon-cyan); border: 1px solid rgba(75,227,255,.3); }
.kd-wizard__step--done { text-align: center; padding: 24px 0; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.kd-wizard__check { width: 84px; height: 84px; border-radius: 50%; background: var(--grad-hero); color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; box-shadow: 0 0 32px rgba(255,78,168,.55); animation: kd-pop .5s var(--ease-spring); }

/* ----- Reward landing ----------------------------------------- */
.kd-reward-page__hero { text-align: center; padding: 48px 16px 36px; max-width: 720px; margin: 0 auto; }
.kd-reward-page__eyebrow { display: inline-block; font-size: 12px; letter-spacing: .12em; color: #ffe6a8; font-weight: 700; margin-bottom: 12px; padding: 5px 14px; border-radius: 999px; background: linear-gradient(135deg, rgba(245,213,137,.22), rgba(192,138,46,.14)); border: 1px solid rgba(245,213,137,.42); }
.kd-reward-page__h { font-family: var(--font-display); font-size: clamp(40px, 6vw, 64px); margin: 0 0 16px; line-height: 1.05; color: var(--fg); letter-spacing: -.02em; }
.kd-reward-page__lead { font-size: 18px; line-height: 1.55; color: var(--fg-2); margin: 0; }
.kd-reward-tiers { display: flex; flex-direction: column; gap: 18px; max-width: 880px; margin: 0 auto; }
.kd-reward-tier { display: flex; gap: 16px; padding: 22px 24px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.kd-reward-tier:hover { transform: translateY(-2px); box-shadow: var(--shadow-2); }
.kd-reward-tier__num { width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-display); font-size: 26px; font-weight: 500; flex-shrink: 0; }
.kd-reward-tier__body { flex: 1; }
.kd-reward-tier__head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; flex-wrap: wrap; }
.kd-reward-tier__icon { display: inline-flex; align-items: center; justify-content: center; }
.kd-reward-tier__title { font-family: var(--font-body); font-size: 20px; font-weight: 700; margin: 0; color: var(--fg); }
.kd-reward-tier__text { margin: 0; color: var(--fg-2); line-height: 1.6; font-size: 15px; }
.kd-reward-page__cta { text-align: center; padding: 48px 16px; }
.kd-reward-page__cta h3 { font-family: var(--font-display); font-size: 28px; margin: 0 0 16px; color: var(--fg); }

/* ----- Profile ------------------------------------------------ */
.kd-profile-page__head { display: flex; gap: 20px; align-items: center; padding: 16px 0 24px; flex-wrap: wrap; }
.kd-profile-page__id { flex: 1; min-width: 200px; }
.kd-profile-page__name { font-family: var(--font-display); font-size: 32px; margin: 0 0 4px; color: var(--fg); }
.kd-profile-page__bio { color: var(--fg-2); margin: 0 0 12px; font-size: 14px; }
.kd-profile-page__badges { display: flex; gap: 6px; flex-wrap: wrap; }
.kd-profile-page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.kd-profile-page__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 18px 0; border-block: 1px solid var(--line); margin-bottom: 20px; }
.kd-profile-page__stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 12px; color: var(--fg-3); }
.kd-profile-page__big { font-family: var(--font-display); font-size: 24px; color: var(--fg); }
.kd-profile-page__tabs { display: flex; gap: 8px; margin-bottom: 18px; overflow-x: auto; }
.kd-profile-page__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 720px) { .kd-profile-page__grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

/* ----- FactCheck game --------------------------------------- */
.kd-fc-page { max-width: 520px; margin: 0 auto; padding: 14px 14px 100px; display: flex; flex-direction: column; gap: 14px; }
.kd-fc-top { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 10px; padding: 12px 14px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(10px); }
.kd-fc-top__col { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.kd-fc-top__col--mid { align-items: stretch; }
.kd-fc-top__lab { font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,.55); display: inline-flex; align-items: center; gap: 4px; }
.kd-fc-top__val { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: var(--fg); }
.kd-fc-top__bar { display: flex; gap: 4px; align-items: center; justify-content: center; padding-top: 8px; }
.kd-fc-top__pip { flex: 1; height: 4px; max-width: 28px; border-radius: 2px; background: rgba(255,255,255,.12); }
.kd-fc-top__pip.is-on { background: var(--neon-mint); box-shadow: 0 0 6px rgba(68,227,184,.6); }
.kd-fc-top__pip.is-bad { background: var(--neon-magenta); box-shadow: 0 0 6px rgba(255,78,168,.5); }

.kd-fc-stage { position: relative; height: 420px; perspective: 1200px; }
.kd-fc-card { position: absolute; inset: 0; border-radius: 24px; overflow: hidden; background: var(--surface); border: 1px solid rgba(255,255,255,.1); box-shadow: 0 18px 50px rgba(0,0,0,.55); display: flex; flex-direction: column; touch-action: pan-y; user-select: none; transform-origin: 50% 80%; transition: transform .42s cubic-bezier(.2,.9,.3,1.1), opacity .42s var(--ease-out), filter .42s var(--ease-out); }
.kd-fc-card--pos0 { transform: translateY(0) scale(1); opacity: 1; z-index: 3; cursor: grab; }
.kd-fc-card--pos0:active { cursor: grabbing; }
.kd-fc-card--pos1 { transform: translateY(14px) scale(.94); opacity: .55; filter: blur(.5px); z-index: 2; pointer-events: none; }
.kd-fc-card--pos2 { transform: translateY(26px) scale(.88); opacity: .25; filter: blur(1px); z-index: 1; pointer-events: none; }
.kd-fc-card--flown-real { transform: translateX(640px) rotate(22deg) !important; opacity: 0 !important; transition: transform .5s cubic-bezier(.4,.1,.6,1), opacity .5s ease-out !important; }
.kd-fc-card--flown-fake { transform: translateX(-640px) rotate(-22deg) !important; opacity: 0 !important; transition: transform .5s cubic-bezier(.4,.1,.6,1), opacity .5s ease-out !important; }
.kd-fc-card__img { flex: 1.2; position: relative; min-height: 200px; }
.kd-fc-card__body { padding: 16px 18px 18px; display: flex; flex-direction: column; gap: 8px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.18)); }
.kd-fc-card__head { display: flex; justify-content: space-between; align-items: center; }
.kd-fc-card__diff { font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--neon-cyan); background: rgba(75,227,255,.12); border: 1px solid rgba(75,227,255,.3); padding: 3px 10px; border-radius: 999px; }
.kd-fc-card__num { font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.5); }
.kd-fc-card__claim { font-family: var(--font-body); font-size: 18px; font-weight: 600; line-height: 1.55; color: var(--fg); margin: 0; text-wrap: pretty; }
.kd-fc-card__hint { font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.45); margin: 0; display: inline-flex; align-items: center; gap: 6px; }

.kd-fc-stamp { position: absolute; top: 22px; padding: 8px 16px; border-radius: 12px; font-family: var(--font-body); font-size: 22px; font-weight: 800; display: inline-flex; align-items: center; gap: 8px; transition: opacity .12s; pointer-events: none; }
.kd-fc-stamp--real { left: 22px; color: #44e3b8; border: 3px solid #44e3b8; transform: rotate(-12deg); background: rgba(68,227,184,.08); }
.kd-fc-stamp--fake { right: 22px; color: #ff4ea8; border: 3px solid #ff4ea8; transform: rotate(12deg); background: rgba(255,78,168,.08); }

.kd-fc-reveal { padding: 16px 18px; border-radius: 18px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.04); backdrop-filter: blur(12px); display: flex; flex-direction: column; gap: 10px; animation: kd-fc-rise .3s var(--ease-out); }
.kd-fc-reveal--ok { border-color: rgba(68,227,184,.35); background: rgba(68,227,184,.07); }
.kd-fc-reveal--bad { border-color: rgba(255,78,168,.35); background: rgba(255,78,168,.07); }
.kd-fc-reveal__head { display: flex; align-items: center; gap: 10px; }
.kd-fc-reveal__icon { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; color: #fff; }
.kd-fc-reveal--ok .kd-fc-reveal__icon { background: var(--neon-mint); box-shadow: 0 0 18px rgba(68,227,184,.6); }
.kd-fc-reveal--bad .kd-fc-reveal__icon { background: var(--neon-magenta); box-shadow: 0 0 18px rgba(255,78,168,.6); }
.kd-fc-reveal__verdict { font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--fg); flex: 1; }
.kd-fc-reveal__verdict em { font-style: normal; color: var(--neon-mint); }
.kd-fc-reveal__plus { font-family: var(--font-mono); font-size: 18px; font-weight: 800; color: var(--neon-mint); }
.kd-fc-reveal__explain { font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--fg-2); margin: 0; }
.kd-fc-reveal__foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 4px; }
.kd-fc-source { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.55); }
@keyframes kd-fc-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.kd-fc-choices { display: grid; grid-template-columns: 1fr 60px 1fr; gap: 10px; }
.kd-fc-choice { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 16px; border-radius: 16px; font-family: var(--font-body); font-size: 16px; font-weight: 700; cursor: pointer; border: 1px solid transparent; transition: all var(--dur-fast) var(--ease-out); }
.kd-fc-choice--fake { background: rgba(255,78,168,.12); color: var(--neon-magenta); border-color: rgba(255,78,168,.4); }
.kd-fc-choice--fake:hover { background: rgba(255,78,168,.2); box-shadow: 0 0 18px rgba(255,78,168,.35); }
.kd-fc-choice--real { background: rgba(68,227,184,.12); color: var(--neon-mint); border-color: rgba(68,227,184,.4); }
.kd-fc-choice--real:hover { background: rgba(68,227,184,.2); box-shadow: 0 0 18px rgba(68,227,184,.35); }
.kd-fc-choice--skip { background: rgba(255,255,255,.05); color: rgba(255,255,255,.5); border-color: rgba(255,255,255,.12); padding: 0; }
.kd-fc-choice--skip:hover { background: rgba(255,255,255,.1); color: var(--fg); }

.kd-fc-summary { max-width: 460px; margin: 60px auto; padding: 36px 28px; border-radius: 24px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(14px); text-align: center; }
.kd-fc-summary__badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 999px; background: var(--grad-hero); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; margin-bottom: 18px; }
.kd-fc-summary__h { font-family: var(--font-display); font-size: 56px; font-weight: 700; margin: 0 0 8px; color: var(--fg); }
.kd-fc-summary__h span { display: block; font-family: var(--font-body); font-size: 14px; font-weight: 500; color: var(--fg-2); margin-top: 4px; }
.kd-fc-summary__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.kd-fc-summary__stats > div { padding: 12px 6px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.kd-fc-summary__stats strong { display: block; font-family: var(--font-body); font-size: 22px; font-weight: 700; color: var(--neon-mint); }
.kd-fc-summary__stats span { font-family: var(--font-body); font-size: 11px; color: rgba(255,255,255,.55); }
.kd-fc-summary__cta { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }

/* ----- Post detail (full submission view) ----------------- */
.kd-post-page { max-width: 720px; margin: 0 auto; padding: 0 0 84px; }
.kd-post-head { position: sticky; top: 0; z-index: 20; display: grid; grid-template-columns: 40px 1fr 40px; gap: 10px; align-items: center; padding: 10px 14px; background: rgba(10,16,24,.78); backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--line); }
.kd-post-head__back, .kd-post-head__more { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kd-post-head__back:hover, .kd-post-head__more:hover { background: rgba(255,255,255,.1); }
.kd-post-head__center { display: flex; flex-direction: column; align-items: center; gap: 1px; line-height: 1.1; }
.kd-post-head__center strong { font-family: var(--font-body); font-size: 14px; color: var(--fg); }
.kd-post-head__center span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }

.kd-post-media { position: relative; aspect-ratio: 16/10; background: var(--stage-800); overflow: hidden; }
.kd-post-media__bg { position: absolute; inset: 0; background: radial-gradient(60% 80% at 30% 30%, rgba(255,78,168,.55), transparent 60%), radial-gradient(60% 80% at 80% 80%, rgba(75,227,255,.45), transparent 60%), radial-gradient(70% 60% at 60% 40%, rgba(154,108,255,.4), transparent 65%), #0a1018; }
.kd-post-media__play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; background: rgba(255,255,255,.95); color: #0a1018; border: 0; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 0 32px rgba(255,78,168,.5), 0 8px 24px rgba(0,0,0,.4); transition: transform var(--dur-fast) var(--ease-out); }
.kd-post-media__play:hover { transform: scale(1.05); }
.kd-post-media__play.is-playing { background: rgba(0,0,0,.6); color: #fff; border: 1px solid rgba(255,255,255,.18); box-shadow: 0 0 18px rgba(255,255,255,.18); }
.kd-post-media__chip { position: absolute; top: 14px; inset-inline-end: 14px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(8px); }
.kd-post-media__dur { position: absolute; bottom: 14px; inset-inline-start: 14px; padding: 4px 9px; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; font-family: var(--font-mono); font-size: 11px; }

.kd-post-body { padding: 16px 18px 4px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 720px) { .kd-post-body { padding: 18px 22px 4px; } }

.kd-post-author { display: flex; align-items: center; gap: 12px; }
.kd-post-author__avatarbtn { background: transparent; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; }
.kd-post-author__avatarbtn:hover > * { transform: scale(1.04); transition: transform .2s var(--ease-out); }
.kd-post-author__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; background: transparent; border: 0; padding: 0; cursor: pointer; text-align: start; }
.kd-post-author__id:hover strong { color: var(--neon-cyan); }
.kd-post-author__id strong { font-family: var(--font-body); font-size: 15px; color: var(--fg); }
.kd-post-author__id span { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-post-author__follow { padding: 7px 14px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; font-family: var(--font-body); font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: var(--glow-magenta); }
.kd-post-author__follow:hover { filter: brightness(1.1); }

.kd-post-badge { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: linear-gradient(135deg, rgba(245,213,137,.18), rgba(192,138,46,.08)); border: 1px solid rgba(245,213,137,.35); color: var(--gold-100); font-family: var(--font-body); font-size: 11px; font-weight: 600; }

.kd-post-caption { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.75; color: var(--fg); text-wrap: pretty; }
.kd-post-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-post-tag { padding: 4px 10px; border-radius: 999px; background: rgba(75,227,255,.1); border: 1px solid rgba(75,227,255,.25); color: var(--neon-cyan); font-family: var(--font-body); font-size: 12px; cursor: pointer; }
.kd-post-tag:hover { background: rgba(75,227,255,.18); }

.kd-post-challenge { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,138,61,.1), rgba(255,78,168,.05)); border: 1px solid rgba(255,138,61,.25); }
.kd-post-challenge__lab { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 11px; color: var(--neon-orange); font-weight: 600; }
.kd-post-challenge strong { flex: 1; font-family: var(--font-body); font-size: 14px; color: var(--fg); font-weight: 600; }
.kd-post-challenge__cta { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--fg); cursor: pointer; font-family: var(--font-body); font-size: 12px; display: inline-flex; align-items: center; gap: 4px; }

.kd-post-react { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 12px 0; border-block: 1px solid var(--line); }
.kd-post-react__btn { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; background: transparent; border: 0; cursor: pointer; color: var(--fg-2); font-family: var(--font-body); font-size: 12px; border-radius: 12px; transition: all var(--dur-fast) var(--ease-out); }
.kd-post-react__btn:hover { background: rgba(255,255,255,.04); color: var(--fg); }
.kd-post-react__btn.is-on { color: var(--fg); }
.kd-post-react__btn--like.is-on { color: var(--neon-magenta); }
.kd-post-react__btn--save.is-on { color: var(--neon-orange); }

.kd-post-rate { padding: 14px 16px; border-radius: 16px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.kd-post-rate__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kd-post-rate__lab { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg); }
.kd-post-rate__avg { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }
.kd-post-rate__avg strong { color: var(--gold-100); font-size: 14px; font-weight: 700; }
.kd-post-rate__row { display: flex; gap: 4px; justify-content: center; }
.kd-post-rate__star { background: transparent; border: 0; padding: 4px; cursor: pointer; color: rgba(255,255,255,.18); transition: transform var(--dur-fast) var(--ease-spring), color var(--dur-fast) var(--ease-out); }
.kd-post-rate__star.is-lit { color: var(--gold-100); filter: drop-shadow(0 0 8px rgba(245,213,137,.6)); }
.kd-post-rate__star:hover { transform: translateY(-2px); }
.kd-post-rate__thx { text-align: center; margin: 8px 0 0; font-family: var(--font-body); font-size: 12px; color: var(--neon-mint); }

.kd-post-comments { margin-top: 6px; }
.kd-post-comments__h { margin: 0 0 12px; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--fg); }
.kd-post-comments__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.kd-comment { display: flex; gap: 10px; }
.kd-comment--reply { margin-inline-start: 36px; }
.kd-comment__body { flex: 1; min-width: 0; }
.kd-comment__head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.kd-comment__head strong { font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg); }
.kd-comment__head span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.kd-comment__text { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--fg-2); text-wrap: pretty; }
.kd-comment__actions { display: flex; gap: 12px; margin-top: 4px; }
.kd-comment__actions button { background: transparent; border: 0; padding: 0; font-family: var(--font-body); font-size: 11px; color: var(--fg-3); cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.kd-comment__actions button:hover { color: var(--neon-magenta); }

.kd-post-composer { position: sticky; bottom: 0; z-index: 25; display: flex; align-items: center; gap: 8px; padding: 10px 14px calc(10px + env(safe-area-inset-bottom)); background: rgba(10,16,24,.88); backdrop-filter: blur(14px); border-top: 1px solid var(--line); }
.kd-post-composer__input { flex: 1; padding: 10px 16px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--fg); font-family: var(--font-body); font-size: 14px; }
.kd-post-composer__input:focus { outline: none; border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,78,168,.18); }
.kd-post-composer__send { width: 40px; height: 40px; border-radius: 50%; background: var(--grad-hero); color: #fff; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; box-shadow: var(--glow-magenta); }
.kd-post-composer__send[disabled] { opacity: 0.4; box-shadow: none; cursor: not-allowed; }

/* Share sheet */
.kd-share { position: fixed; inset: 0; z-index: 90; display: flex; align-items: flex-end; justify-content: center; background: rgba(0,0,0,.55); backdrop-filter: blur(6px); animation: kd-fadein .25s ease-out; }
.kd-share__sheet { width: 100%; max-width: 520px; padding: 14px 20px calc(24px + env(safe-area-inset-bottom)); border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(28,16,42,.96), rgba(10,16,24,.98)); border-top: 1px solid var(--line-strong); animation: kd-slideup .32s var(--ease-spring); }
.kd-share__handle { width: 40px; height: 4px; background: rgba(255,255,255,.25); border-radius: 999px; margin: 0 auto 14px; }
.kd-share__h { margin: 0 0 14px; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--fg); }
.kd-share__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.kd-share__opt { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 14px; background: transparent; border: 0; color: var(--fg-2); cursor: pointer; font-family: var(--font-body); font-size: 11px; }
.kd-share__opt > span { width: 52px; height: 52px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; }
.kd-share__opt:hover { color: var(--fg); }
.kd-share__frame { padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(255,138,61,.1), rgba(255,78,168,.06)); border: 1px solid rgba(255,138,61,.22); display: flex; flex-direction: column; gap: 6px; }
.kd-share__frame-tag { font-family: var(--font-body); font-size: 11px; color: var(--neon-orange); font-weight: 600; display: inline-flex; align-items: center; gap: 5px; }
.kd-share__frame p { margin: 0; font-family: var(--font-body); font-size: 12px; color: var(--fg-2); line-height: 1.5; }

/* ----- Game Zone --------------------------------------------- */
.kd-gz-page { padding: 0 14px 80px; display: flex; flex-direction: column; gap: 22px; }
@media (min-width: 720px) { .kd-gz-page { max-width: 1120px; margin: 0 auto; padding: 0 20px 80px; } }

.kd-gz-head { padding-top: 18px; }
.kd-gz-head__eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; padding: 4px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--neon-cyan); margin-bottom: 12px; }
.kd-gz-head__title { font-family: var(--font-display); font-size: clamp(30px, 5vw, 48px); margin: 0 0 6px; line-height: 1.1; letter-spacing: -.015em;
  background: linear-gradient(180deg, #fff 0%, #b6c2d6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kd-gz-head__sub { color: var(--fg-2); margin: 0 0 14px; font-size: 14px; max-width: 600px; line-height: 1.55; }
.kd-gz-head__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kd-gz-head__stats > div { display: flex; flex-direction: column; align-items: center; padding: 12px 8px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.kd-gz-head__stats strong { font-family: var(--font-display); font-size: 22px; font-weight: 500; color: var(--fg); line-height: 1; }
.kd-gz-head__stats span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); margin-top: 4px; }

.kd-gz-hero { position: relative; border-radius: var(--radius-lg); overflow: hidden; padding: 20px 22px; min-height: 220px; cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); border: 1px solid rgba(255,255,255,.1); isolation: isolate; display: flex; align-items: flex-end; }
.kd-gz-hero:hover { transform: translateY(-2px); box-shadow: var(--shadow-3); border-color: rgba(255,255,255,.22); }
.kd-gz-hero__bg { position: absolute; inset: 0; z-index: 0; }
.kd-gz-hero__noise { position: absolute; inset: 0; z-index: 0; opacity: .14; mix-blend-mode: overlay; background: repeating-radial-gradient(circle at 30% 30%, rgba(255,255,255,.04) 0 1px, transparent 1px 4px); pointer-events: none; }
.kd-gz-hero__body { position: relative; z-index: 1; max-width: 540px; }
.kd-gz-hero__badge { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border-radius: 999px; background: rgba(255,138,61,.18); border: 1px solid rgba(255,138,61,.45); color: #ffb27a; font-family: var(--font-body); font-size: 11px; font-weight: 700; margin-bottom: 10px; }
.kd-gz-hero__title { font-family: var(--font-display); font-size: clamp(28px, 4.4vw, 40px); margin: 0 0 8px; color: #fff; line-height: 1.1; }
.kd-gz-hero__blurb { font-family: var(--font-body); font-size: 14px; color: rgba(255,255,255,.78); line-height: 1.55; margin: 0 0 12px; max-width: 480px; }
.kd-gz-hero__meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-family: var(--font-body); font-size: 12px; color: rgba(255,255,255,.6); margin-bottom: 14px; }
.kd-gz-hero__meta span { display: inline-flex; align-items: center; gap: 4px; }
.kd-gz-hero__cta { padding: 12px 24px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 700; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; box-shadow: var(--glow-magenta), 0 8px 24px rgba(255,78,168,.3); }
.kd-gz-hero__cta:hover { filter: brightness(1.1); }
.kd-gz-hero__icon { position: absolute; inset-inline-end: -20px; bottom: -20px; z-index: 0; color: rgba(255,255,255,.06); pointer-events: none; }
@media (min-width: 720px) { .kd-gz-hero { min-height: 280px; padding: 28px 32px; } .kd-gz-hero__icon { inset-inline-end: 40px; bottom: 20px; } }

.kd-gz-section__h { margin: 0 0 12px; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--fg); }

.kd-gz-friends__row { display: flex; gap: 14px; overflow-x: auto; padding: 4px 4px 8px; scroll-snap-type: x mandatory; }
.kd-gz-friends__row::-webkit-scrollbar { display: none; }
.kd-gz-friend { position: relative; flex-shrink: 0; width: 92px; display: flex; flex-direction: column; align-items: center; gap: 4px; scroll-snap-align: start; }
.kd-gz-friend__pulse { position: absolute; top: 36px; inset-inline-end: 14px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--bg); animation: kd-pulse 1.6s ease-in-out infinite; }
.kd-gz-friend strong { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--fg); margin-top: 4px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-gz-friend span { font-family: var(--font-body); font-size: 10px; color: var(--fg-3); text-align: center; line-height: 1.4; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.kd-gz-cats { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.kd-gz-cats::-webkit-scrollbar { display: none; }

.kd-gz-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 540px) { .kd-gz-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }
@media (min-width: 900px) { .kd-gz-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }

.kd-gz-card { position: relative; display: flex; flex-direction: column; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: rgba(255,255,255,.03); cursor: pointer; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); }
.kd-gz-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); border-color: rgba(255,255,255,.18); }
.kd-gz-card__cover { position: relative; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.kd-gz-card__cover-icon { color: rgba(255,255,255,.45); filter: drop-shadow(0 4px 12px rgba(0,0,0,.4)); }
.kd-gz-card__flag { position: absolute; top: 10px; inset-inline-end: 10px; padding: 3px 9px; border-radius: 999px; font-family: var(--font-body); font-size: 10px; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; backdrop-filter: blur(8px); }
.kd-gz-card__flag--hot { background: rgba(255,78,168,.2); border: 1px solid rgba(255,78,168,.5); color: #ffb1d4; }
.kd-gz-card__flag--new { background: rgba(68,227,184,.2); border: 1px solid rgba(68,227,184,.5); color: #7ff0d2; }
.kd-gz-card__body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; }
.kd-gz-card__title { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--fg); }
.kd-gz-card__blurb { margin: 0; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); line-height: 1.55; min-height: 36px; }
.kd-gz-card__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: var(--font-body); font-size: 11px; color: var(--fg-3); margin-top: 2px; }
.kd-gz-card__meta > span:not(.kd-gz-card__diff) { display: inline-flex; align-items: center; gap: 3px; }
.kd-gz-card__diff { padding: 2px 8px; border-radius: 999px; font-weight: 700; margin-inline-start: auto; }
.kd-gz-card__diff--easy { background: rgba(68,227,184,.14); color: #7ff0d2; }
.kd-gz-card__diff--med  { background: rgba(255,138,61,.14); color: #ffb27a; }
.kd-gz-card__diff--hard { background: rgba(255,78,168,.14); color: #ffb1d4; }
.kd-gz-card__play { margin-top: 10px; padding: 9px 14px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--fg); font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; justify-content: center; transition: all var(--dur-fast) var(--ease-out); }
.kd-gz-card:hover .kd-gz-card__play { background: var(--grad-hero); border-color: transparent; color: #fff; box-shadow: var(--glow-magenta); }

.kd-gz-lb { border-radius: var(--radius-lg); background: rgba(255,255,255,.03); border: 1px solid var(--line); padding: 16px 18px; }
.kd-gz-lb__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.kd-gz-lb__filter { background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); padding: 5px 12px; border-radius: 999px; color: var(--fg-2); font-family: var(--font-body); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.kd-gz-lb__filter:hover { color: var(--fg); }
.kd-gz-lb__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.kd-gz-lb__row { display: flex; align-items: center; gap: 12px; padding: 10px 6px; border-block-end: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out); }
.kd-gz-lb__row:last-child { border-block-end: 0; }
.kd-gz-lb__row.is-you { background: linear-gradient(90deg, rgba(255,78,168,.1), rgba(154,108,255,.05)); border-radius: 10px; padding: 10px 12px; border-color: transparent; }
.kd-gz-lb__rank { width: 32px; text-align: center; font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; }
.kd-gz-lb__row.is-rank-1 .kd-gz-lb__rank { color: var(--gold-100); filter: drop-shadow(0 0 8px rgba(245,213,137,.5)); }
.kd-gz-lb__row.is-rank-2 .kd-gz-lb__rank { color: #b6c2d6; }
.kd-gz-lb__row.is-rank-3 .kd-gz-lb__rank { color: var(--neon-orange); }
.kd-gz-lb__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.kd-gz-lb__id strong { font-family: var(--font-body); font-size: 14px; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.kd-gz-lb__id span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.kd-gz-lb__youtag { padding: 1px 7px; border-radius: 999px; background: var(--grad-hero); color: #fff; font-family: var(--font-body); font-size: 9px; font-weight: 700; }
.kd-gz-lb__score { font-family: var(--font-display); font-size: 18px; font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }

/* ----- Follow Hub (personal stream) ------------------------- */
.kd-fh-page { padding: 0 14px 100px; display: flex; flex-direction: column; gap: 18px; max-width: 820px; margin: 0 auto; }
@media (min-width: 720px) { .kd-fh-page { padding: 0 22px 100px; } }

.kd-fh-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 6px; }
.kd-fh-back { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.kd-fh-back:hover { background: rgba(255,255,255,.1); }
.kd-fh-head__id { flex: 1; min-width: 0; }
.kd-fh-head__title { font-family: var(--font-display); font-size: clamp(26px, 4.4vw, 36px); margin: 0 0 4px; color: var(--fg); line-height: 1.1; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 0%, #b6c2d6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kd-fh-head__sub { color: var(--fg-2); margin: 0; font-size: 13px; line-height: 1.55; }

.kd-fh-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 4px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.kd-fh-tab { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 14px; border-radius: 10px; background: transparent; border: 0; color: var(--fg-2); font-family: var(--font-body); font-weight: 600; font-size: 13px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-fh-tab em { font-style: normal; padding: 1px 8px; border-radius: 999px; background: rgba(255,255,255,.08); font-family: var(--font-mono); font-size: 11px; }
.kd-fh-tab:hover { color: var(--fg); }
.kd-fh-tab.is-on { background: var(--grad-hero); color: #fff; box-shadow: var(--glow-magenta); }
.kd-fh-tab.is-on em { background: rgba(0,0,0,.25); color: #fff; }

/* Channel-add wizard */
.kd-fh-wizard { padding: 18px 18px 20px; border-radius: 18px; background: linear-gradient(180deg, rgba(28,16,42,.6), rgba(10,16,24,.7)); border: 1px solid var(--line); }
.kd-fh-wizard__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 4px; }
.kd-fh-wizard__head h3 { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--fg); }
.kd-fh-wizard__step { font-family: var(--font-mono); font-size: 11px; color: var(--fg-3); letter-spacing: .04em; }
.kd-fh-wizard__sub { margin: 0 0 12px; color: var(--fg-3); font-size: 13px; }
.kd-fh-netgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
@media (min-width: 540px) { .kd-fh-netgrid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 820px) { .kd-fh-netgrid { grid-template-columns: repeat(9, 1fr); } }
.kd-fh-net { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 8px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--fg); cursor: pointer; font-family: var(--font-body); transition: all var(--dur-fast) var(--ease-out); }
.kd-fh-net:hover { background: rgba(255,255,255,.08); border-color: var(--net-color); transform: translateY(-2px); box-shadow: 0 0 18px color-mix(in oklab, var(--net-color) 35%, transparent); }
.kd-fh-net__glyph { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 20px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.kd-fh-net__label { font-size: 12px; font-weight: 600; line-height: 1.2; text-align: center; }

.kd-fh-wizard__chosen { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); margin-bottom: 14px; }
.kd-fh-wizard__chosen > div { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.2; }
.kd-fh-wizard__chosen strong { font-family: var(--font-body); font-size: 14px; color: var(--fg); }
.kd-fh-wizard__chosen span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.kd-fh-wizard__change { background: transparent; border: 0; color: var(--neon-cyan); font-family: var(--font-body); font-size: 12px; cursor: pointer; padding: 4px 8px; }
.kd-fh-wizard__change:hover { text-decoration: underline; }

.kd-fh-wizard__input { width: 100%; padding: 14px 16px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--fg); font-family: var(--font-mono); font-size: 15px; box-sizing: border-box; margin-bottom: 10px; }
.kd-fh-wizard__input:focus { outline: none; border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,78,168,.18); }
.kd-fh-wizard__input::placeholder { color: rgba(255,255,255,.35); }

.kd-fh-wizard__note { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 14px; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); line-height: 1.6; padding: 10px 12px; border-radius: 10px; background: rgba(75,227,255,.06); border: 1px solid rgba(75,227,255,.18); }
.kd-fh-wizard__note > svg { color: var(--neon-cyan); margin-top: 2px; flex-shrink: 0; }

.kd-fh-wizard__actions { display: flex; gap: 10px; justify-content: flex-end; }
@media (max-width: 540px) { .kd-fh-wizard__actions { flex-direction: column-reverse; } .kd-fh-wizard__actions > * { width: 100%; } }

/* Section header */
.kd-fh-section { display: flex; justify-content: space-between; align-items: baseline; margin: 4px 0 10px; padding: 0 4px; }
.kd-fh-section h3 { margin: 0; font-family: var(--font-body); font-size: 15px; font-weight: 700; color: var(--fg); }
.kd-fh-section span { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }

/* Subscriptions list */
.kd-fh-sublist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kd-fh-sub { position: relative; display: grid; grid-template-columns: auto 1fr auto auto; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out); }
.kd-fh-sub:hover { background: rgba(255,255,255,.05); }
.kd-fh-sub--pending { border-color: rgba(75,227,255,.22); background: rgba(75,227,255,.04); }
.kd-fh-sub--rejected { opacity: .82; }
.kd-fh-sub__id { min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.25; }
.kd-fh-sub__id strong { font-family: var(--font-body); font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-fh-sub__handle { font-family: var(--font-mono); font-size: 12px; color: var(--neon-cyan); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-fh-sub__net { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.kd-fh-sub__stat { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; min-width: 90px; }
.kd-fh-sub__stat strong { font-family: var(--font-display); font-size: 18px; color: var(--fg); }
.kd-fh-sub__stat span { font-family: var(--font-body); font-size: 10px; color: var(--fg-3); }
.kd-fh-sub__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-family: var(--font-body); font-size: 11px; font-weight: 600; }
.kd-fh-sub__badge--pending { background: rgba(75,227,255,.12); color: var(--neon-cyan); border: 1px solid rgba(75,227,255,.3); }
.kd-fh-sub__badge--rejected { background: rgba(255,78,168,.12); color: #ffb1d4; border: 1px solid rgba(255,78,168,.3); }
.kd-fh-sub__pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 8px var(--neon-cyan); animation: kd-pulse 1.4s ease-in-out infinite; }
.kd-fh-sub__remove { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 1px solid var(--line-strong); color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-fh-sub__remove:hover { background: rgba(255,78,168,.12); color: var(--neon-magenta); border-color: rgba(255,78,168,.4); }
.kd-fh-sub__reason { grid-column: 1 / -1; margin: 6px 0 0; padding: 8px 10px; border-radius: 8px; background: rgba(255,78,168,.06); border: 1px solid rgba(255,78,168,.18); color: #ffd0e3; font-family: var(--font-body); font-size: 12px; line-height: 1.6; display: flex; align-items: flex-start; gap: 6px; }
.kd-fh-sub__reason > svg { margin-top: 2px; color: var(--neon-magenta); flex-shrink: 0; }

@media (max-width: 540px) {
  .kd-fh-sub { grid-template-columns: auto 1fr auto; }
  .kd-fh-sub__stat { display: none; }
  .kd-fh-sub__id { grid-column: 2 / 3; }
}

.kd-fh-empty { text-align: center; padding: 32px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px dashed var(--line-strong); color: var(--fg-3); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kd-fh-empty p { margin: 0; font-family: var(--font-body); font-size: 14px; }

/* People tab */
.kd-fh-search { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--fg-3); }
.kd-fh-search input { flex: 1; background: transparent; border: 0; color: var(--fg); font-family: var(--font-body); font-size: 14px; outline: none; }
.kd-fh-search:focus-within { border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,78,168,.14); }

.kd-fh-peoplelist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kd-fh-person { display: flex; gap: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out); }
.kd-fh-person:hover { background: rgba(255,255,255,.05); }
.kd-fh-person__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.kd-fh-person__id strong { font-family: var(--font-body); font-size: 15px; color: var(--fg); }
.kd-fh-person__handle { font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }
.kd-fh-person__bio { margin: 4px 0 0; font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.55; }
.kd-fh-person__meta { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 4px; font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.kd-fh-person__badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; background: rgba(245,213,137,.12); color: var(--gold-100); border: 1px solid rgba(245,213,137,.25); }
.kd-fh-person__follow { align-self: flex-start; padding: 8px 16px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; font-family: var(--font-body); font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: var(--glow-magenta); transition: all var(--dur-fast) var(--ease-out); flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; }
.kd-fh-person__follow:hover { filter: brightness(1.1); }
.kd-fh-person__follow.is-on { background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); box-shadow: none; color: var(--fg); }
.kd-fh-person__follow.is-on:hover { background: rgba(255,78,168,.12); color: #ffb1d4; border-color: rgba(255,78,168,.3); }

/* ----- Stream view (personal mixed feed) -------------------- */
.kd-stream-page { max-width: 720px; margin: 0 auto; padding: 0 14px 100px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 720px) { .kd-stream-page { padding: 0 22px 100px; } }

.kd-stream-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; }
.kd-stream-head__id { flex: 1; min-width: 0; }
.kd-stream-head__id h1 { margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(24px, 4vw, 32px); color: var(--fg); line-height: 1.1;
  background: linear-gradient(180deg, #fff 0%, #b6c2d6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kd-stream-head__id p { margin: 0; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }
.kd-stream-head__id p strong { color: var(--fg); font-weight: 700; }
.kd-stream-head__manage { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; font-family: var(--font-body); font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: var(--glow-magenta); flex-shrink: 0; }
.kd-stream-head__manage:hover { filter: brightness(1.1); }

.kd-stream__filters { display: flex; gap: 8px; overflow-x: auto; padding: 4px 0; align-items: center; }
.kd-stream__filters::-webkit-scrollbar { display: none; }
.kd-stream__sort { background: transparent; border: 0; color: var(--fg-3); font-family: var(--font-body); font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; flex-shrink: 0; padding: 4px 8px; }
.kd-stream__sort:hover { color: var(--fg); }

.kd-stream__list { display: flex; flex-direction: column; gap: 14px; }

.kd-stream__item { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 18px; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.kd-stream__item:hover { background: rgba(255,255,255,.05); border-color: var(--line-strong); }
.kd-stream__item--ext { background: rgba(75,227,255,.03); border-color: rgba(75,227,255,.16); }
.kd-stream__item--ext:hover { background: rgba(75,227,255,.05); border-color: rgba(75,227,255,.3); }

.kd-stream__head { display: flex; align-items: center; gap: 10px; }
.kd-stream__id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
.kd-stream__id strong { font-family: var(--font-body); font-size: 14px; color: var(--fg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-stream__id span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-stream__chan-avatar { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 18px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.kd-stream__more { width: 32px; height: 32px; border-radius: 50%; background: transparent; border: 0; color: var(--fg-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex-shrink: 0; }
.kd-stream__more:hover { background: rgba(255,255,255,.06); color: var(--fg); }

.kd-stream__src { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-family: var(--font-body); font-size: 10px; font-weight: 700; border: 1px solid var(--line-strong); background: rgba(255,255,255,.04); color: var(--fg-2); flex-shrink: 0; }
.kd-stream__src--ks { background: rgba(255,78,168,.12); color: #ffb1d4; border-color: rgba(255,78,168,.3); }
.kd-stream__src-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--neon-magenta); box-shadow: 0 0 6px var(--neon-magenta); }
.kd-stream__src-glyph { width: 14px; height: 14px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 9px; font-weight: 700; }

.kd-stream__media { position: relative; aspect-ratio: 16/10; border-radius: 14px; overflow: hidden; cursor: pointer; }
.kd-stream__media--video, .kd-stream__media--ext { aspect-ratio: 16/10; }
.kd-stream__media--image { aspect-ratio: 4/3; }
.kd-stream__media-play { position: absolute; inset: 0; margin: auto; width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,.95); color: #0a1018; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 28px rgba(255,78,168,.5); }
.kd-stream__media-dur { position: absolute; bottom: 10px; inset-inline-start: 10px; padding: 3px 8px; border-radius: 8px; background: rgba(0,0,0,.65); color: #fff; font-family: var(--font-mono); font-size: 11px; }
.kd-stream__media-chip { position: absolute; top: 10px; inset-inline-end: 10px; padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.6); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(8px); }

.kd-stream__quote { padding: 22px 18px; border-radius: 14px; min-height: 120px; display: flex; align-items: center; }
.kd-stream__quote p { margin: 0; font-family: var(--font-display); font-size: 22px; line-height: 1.35; color: #fff; font-weight: 500; }

.kd-stream__caption { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.7; color: var(--fg); text-wrap: pretty; }
.kd-stream__text { margin: 0; font-family: var(--font-body); font-size: 14px; line-height: 1.75; color: var(--fg); white-space: pre-wrap; text-wrap: pretty; }

.kd-stream__foot { display: flex; align-items: center; gap: 6px; padding-top: 8px; border-top: 1px solid var(--line); margin-top: 2px; }
.kd-stream__act { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: transparent; border: 0; color: var(--fg-2); font-family: var(--font-body); font-size: 12px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-stream__act:hover { background: rgba(255,255,255,.05); color: var(--fg); }
.kd-stream__rate { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }
.kd-stream__rate strong { color: var(--gold-100); font-size: 13px; font-weight: 700; }
.kd-stream__ext-stat { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); padding: 4px 8px; }
.kd-stream__ext-link { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; background: rgba(75,227,255,.1); color: var(--neon-cyan); font-family: var(--font-body); font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid rgba(75,227,255,.22); }
.kd-stream__ext-link:hover { background: rgba(75,227,255,.18); }

.kd-stream__end { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 32px 18px; border-radius: 16px; background: rgba(255,255,255,.02); border: 1px dashed var(--line-strong); color: var(--fg-3); text-align: center; margin-top: 6px; }
.kd-stream__end > svg { color: var(--neon-mint); }
.kd-stream__end strong { font-family: var(--font-body); font-size: 15px; color: var(--fg); margin-top: 2px; }
.kd-stream__end span { font-family: var(--font-body); font-size: 12px; line-height: 1.6; max-width: 320px; }
.kd-stream__end > button { margin-top: 8px; }

/* ----- Notifications --------------------------------------- */
.kd-notif-page { max-width: 760px; margin: 0 auto; padding: 0 14px 100px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 720px) { .kd-notif-page { padding: 0 22px 100px; } }

.kd-notif-head { display: flex; align-items: center; gap: 12px; padding: 14px 0 4px; }
.kd-notif-head__id { flex: 1; min-width: 0; }
.kd-notif-head__id h1 { margin: 0 0 4px; font-family: var(--font-display); font-size: clamp(26px, 4vw, 36px); color: var(--fg); line-height: 1.1; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff 0%, #b6c2d6 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.kd-notif-head__id p { margin: 0; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }
.kd-notif-head__mark { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--fg-2); font-family: var(--font-body); font-size: 12px; cursor: pointer; flex-shrink: 0; }
.kd-notif-head__mark:hover { color: var(--fg); border-color: var(--neon-mint); }

.kd-notif-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
.kd-notif-tabs::-webkit-scrollbar { display: none; }
.kd-notif-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--fg-2); font-family: var(--font-body); font-size: 13px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--dur-fast) var(--ease-out); }
.kd-notif-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.kd-notif-tab.is-on { background: var(--grad-hero); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--glow-magenta); }
.kd-notif-tab em { font-style: normal; padding: 1px 7px; border-radius: 999px; background: rgba(255,255,255,.1); font-family: var(--font-mono); font-size: 10px; }
.kd-notif-tab.is-on em { background: rgba(0,0,0,.25); }

.kd-notif-list { display: flex; flex-direction: column; gap: 18px; }
.kd-notif-group { margin: 0 4px 8px; font-family: var(--font-body); font-size: 11px; font-weight: 600; color: var(--fg-3); letter-spacing: .08em; text-transform: uppercase; }
.kd-notif-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }

.kd-notif-item { position: relative; display: flex; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); }
.kd-notif-item:hover { background: rgba(255,255,255,.06); border-color: var(--line-strong); }
.kd-notif-item.is-unread { background: linear-gradient(90deg, rgba(255,78,168,.07), rgba(154,108,255,.04)); border-color: rgba(255,78,168,.22); }
.kd-notif-icon { width: 36px; height: 36px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #fff; }
.kd-notif-icon--gold    { background: rgba(245,213,137,.16); color: #f5d589; border: 1px solid rgba(245,213,137,.32); box-shadow: 0 0 14px rgba(245,213,137,.18); }
.kd-notif-icon--magenta { background: rgba(255,78,168,.16);  color: #ffb1d4; border: 1px solid rgba(255,78,168,.32); box-shadow: 0 0 14px rgba(255,78,168,.18); }
.kd-notif-icon--cyan    { background: rgba(75,227,255,.14);  color: #8eecff; border: 1px solid rgba(75,227,255,.3);  box-shadow: 0 0 14px rgba(75,227,255,.16); }
.kd-notif-icon--violet  { background: rgba(154,108,255,.16); color: #bda0ff; border: 1px solid rgba(154,108,255,.32); box-shadow: 0 0 14px rgba(154,108,255,.18); }
.kd-notif-icon--orange  { background: rgba(255,138,61,.16);  color: #ffb27a; border: 1px solid rgba(255,138,61,.32); box-shadow: 0 0 14px rgba(255,138,61,.18); }
.kd-notif-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; line-height: 1.45; }
.kd-notif-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kd-notif-title { font-family: var(--font-body); font-size: 14px; font-weight: 700; color: var(--fg); }
.kd-notif-actors { display: inline-flex; }
.kd-notif-actors > * { margin-inline-start: -6px; border: 2px solid var(--bg); }
.kd-notif-actors > *:first-child { margin-inline-start: 0; }
.kd-notif-body { margin: 0; font-family: var(--font-body); font-size: 13px; color: var(--fg-2); line-height: 1.6; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.kd-notif-foot { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.kd-notif-time { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); }
.kd-notif-cta { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; font-family: var(--font-body); font-size: 11.5px; font-weight: 600; cursor: pointer; box-shadow: var(--glow-magenta); }
.kd-notif-cta:hover { filter: brightness(1.1); }
.kd-notif-dot { position: absolute; top: 14px; inset-inline-end: 14px; width: 8px; height: 8px; border-radius: 50%; background: var(--neon-magenta); box-shadow: 0 0 8px var(--neon-magenta); }

.kd-notif-empty { padding: 40px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; border-radius: 16px; background: rgba(255,255,255,.02); border: 1px dashed var(--line-strong); color: var(--fg-3); }
.kd-notif-empty p { margin: 6px 0 0; font-family: var(--font-body); font-size: 15px; color: var(--fg); }
.kd-notif-empty span { font-family: var(--font-body); font-size: 12px; max-width: 280px; line-height: 1.6; }

.kd-notif-footer { display: flex; align-items: center; gap: 8px; justify-content: center; padding: 18px 0 0; color: var(--fg-3); font-family: var(--font-body); font-size: 12px; }
.kd-notif-footer > svg { color: var(--neon-mint); }

/* ----- Search ---------------------------------------------- */
.kd-search-page { max-width: 760px; margin: 0 auto; padding: 0 14px 100px; display: flex; flex-direction: column; gap: 14px; }
@media (min-width: 720px) { .kd-search-page { padding: 0 22px 100px; } }

.kd-search-bar { display: flex; align-items: center; gap: 10px; padding: 14px 0 4px; position: sticky; top: 56px; background: rgba(10,16,24,.84); backdrop-filter: blur(12px); z-index: 5; }
.kd-search-input { position: relative; flex: 1; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: 14px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--fg-3); transition: border-color var(--dur-fast) var(--ease-out); }
.kd-search-input:focus-within { border-color: var(--neon-magenta); box-shadow: 0 0 0 3px rgba(255,78,168,.14); }
.kd-search-input input { flex: 1; background: transparent; border: 0; color: var(--fg); font-family: var(--font-body); font-size: 14px; outline: none; min-width: 0; }
.kd-search-clear { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.1); border: 0; color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kd-search-clear:hover { background: rgba(255,78,168,.25); color: #ffb1d4; }

/* Empty state */
.kd-search-empty { display: flex; flex-direction: column; gap: 22px; }
.kd-search-section__h { display: flex; justify-content: space-between; align-items: center; margin: 0 4px 10px; }
.kd-search-section__h h2 { margin: 0; display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg-2); letter-spacing: .04em; }
.kd-search-section__h h2 > svg { color: var(--neon-cyan); }
.kd-search-section__h > button { background: transparent; border: 0; color: var(--fg-3); font-family: var(--font-body); font-size: 12px; cursor: pointer; padding: 4px 8px; }
.kd-search-section__h > button:hover { color: var(--neon-magenta); }

.kd-search-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.kd-search-chip { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--fg-2); font-family: var(--font-body); font-size: 12px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-search-chip:hover { background: rgba(255,255,255,.08); color: var(--fg); border-color: var(--line-strong); }
.kd-search-chip > svg { opacity: .5; }

.kd-search-trending { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (min-width: 540px) { .kd-search-trending { grid-template-columns: 1fr 1fr 1fr 1fr; } }
.kd-search-trend { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 10px; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; transition: background var(--dur-fast) var(--ease-out); text-align: start; }
.kd-search-trend:hover { background: rgba(255,255,255,.06); }
.kd-search-trend__num { font-family: var(--font-display); font-size: 18px; color: var(--neon-magenta); font-weight: 500; min-width: 22px; }
.kd-search-trend__q { flex: 1; font-family: var(--font-body); font-size: 13px; color: var(--fg); display: flex; flex-direction: column; gap: 2px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kd-search-trend__hot { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 999px; background: rgba(255,138,61,.16); color: var(--neon-orange); font-family: var(--font-body); font-size: 10px; font-weight: 700; align-self: flex-start; margin-top: 1px; }

.kd-search-quick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
@media (min-width: 540px) { .kd-search-quick { grid-template-columns: repeat(6, 1fr); } }
.kd-search-quick__btn { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--accent); font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-search-quick__btn:hover { background: color-mix(in oklab, var(--accent) 12%, transparent); border-color: color-mix(in oklab, var(--accent) 40%, transparent); transform: translateY(-2px); box-shadow: 0 0 18px color-mix(in oklab, var(--accent) 30%, transparent); }

/* Results state */
.kd-search-results { display: flex; flex-direction: column; gap: 16px; }
.kd-search-tabs { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; }
.kd-search-tabs::-webkit-scrollbar { display: none; }
.kd-search-tab { display: inline-flex; align-items: center; gap: 5px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid var(--line); color: var(--fg-2); font-family: var(--font-body); font-size: 12px; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: all var(--dur-fast) var(--ease-out); }
.kd-search-tab:hover { color: var(--fg); border-color: var(--line-strong); }
.kd-search-tab.is-on { background: var(--grad-hero); color: #fff; border-color: transparent; font-weight: 600; box-shadow: var(--glow-magenta); }
.kd-search-tab em { font-style: normal; padding: 1px 6px; border-radius: 999px; background: rgba(255,255,255,.1); font-family: var(--font-mono); font-size: 10px; }
.kd-search-tab.is-on em { background: rgba(0,0,0,.25); }

.kd-search-meta { margin: 0 4px; font-family: var(--font-body); font-size: 12px; color: var(--fg-3); }
.kd-search-meta strong { color: var(--fg); font-weight: 700; }

.kd-search-result-group { display: flex; flex-direction: column; gap: 8px; }
.kd-search-result-group > h3 { margin: 4px 4px 4px; font-family: var(--font-body); font-size: 13px; font-weight: 600; color: var(--fg-2); letter-spacing: .04em; }

.kd-search-rows { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.kd-search-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); transition: background var(--dur-fast) var(--ease-out); cursor: pointer; }
.kd-search-row:hover { background: rgba(255,255,255,.06); }
.kd-search-row__mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.3; }
.kd-search-row__mid strong { font-family: var(--font-body); font-size: 14px; color: var(--fg); }
.kd-search-row__mid > span { font-family: var(--font-body); font-size: 11.5px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-search-row__glyph { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 18px; font-weight: 700; flex-shrink: 0; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.kd-search-row__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line-strong); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.kd-search-row__icon--target { background: rgba(68,227,184,.14); color: var(--neon-mint); border-color: rgba(68,227,184,.3); }
.kd-search-row__cta { padding: 7px 14px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; font-family: var(--font-body); font-weight: 700; font-size: 12px; cursor: pointer; box-shadow: var(--glow-magenta); flex-shrink: 0; }
.kd-search-row__cta:hover { filter: brightness(1.1); }
.kd-search-row__cta--ghost { background: rgba(255,255,255,.06); color: var(--fg); box-shadow: none; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; gap: 4px; }
.kd-search-row__cta--ghost:hover { background: rgba(255,255,255,.12); }
.kd-search-badge { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 999px; background: rgba(245,213,137,.12); color: var(--gold-100); border: 1px solid rgba(245,213,137,.25); font-family: var(--font-body); font-size: 10px; font-weight: 600; align-self: flex-start; margin-top: 2px; }

.kd-search-postgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (min-width: 540px) { .kd-search-postgrid { grid-template-columns: 1fr 1fr 1fr; } }
.kd-search-post { display: flex; flex-direction: column; gap: 8px; border-radius: 12px; overflow: hidden; background: rgba(255,255,255,.03); border: 1px solid var(--line); cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-search-post:hover { transform: translateY(-2px); border-color: var(--line-strong); }
.kd-search-post__media { position: relative; aspect-ratio: 4/3; }
.kd-search-post__chip { position: absolute; top: 8px; inset-inline-end: 8px; padding: 3px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 600; display: inline-flex; align-items: center; gap: 3px; backdrop-filter: blur(6px); }
.kd-search-post__dur { position: absolute; bottom: 8px; inset-inline-start: 8px; padding: 2px 7px; border-radius: 6px; background: rgba(0,0,0,.65); color: #fff; font-family: var(--font-mono); font-size: 10px; }
.kd-search-post__body { padding: 0 12px 12px; display: flex; flex-direction: column; gap: 2px; }
.kd-search-post__body strong { font-family: var(--font-body); font-size: 13px; color: var(--fg); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.4; }
.kd-search-post__body span { font-family: var(--font-body); font-size: 11px; color: var(--fg-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ----- ShareFrame (branded export) ------------------------- */
.kd-share__frame { cursor: pointer; transition: all var(--dur-fast) var(--ease-out); position: relative; }
.kd-share__frame:hover { background: linear-gradient(135deg, rgba(255,138,61,.18), rgba(255,78,168,.12)); border-color: rgba(255,138,61,.4); }
.kd-share__frame-open { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-body); font-size: 11px; color: var(--neon-orange); font-weight: 600; }

.kd-sf { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); backdrop-filter: blur(10px); animation: kd-fadein .25s ease-out; padding: 16px; }
.kd-sf__sheet { width: 100%; max-width: 520px; max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 14px; padding: 16px 18px calc(20px + env(safe-area-inset-bottom)); border-radius: 24px; background: linear-gradient(180deg, rgba(28,16,42,.97), rgba(10,16,24,.99)); border: 1px solid var(--line-strong); box-shadow: 0 24px 60px rgba(0,0,0,.6); overflow-y: auto; animation: kd-pop .32s var(--ease-spring); }
@media (max-width: 540px) { .kd-sf { align-items: stretch; padding: 0; } .kd-sf__sheet { max-width: 100vw; max-height: 100vh; min-height: 100vh; border-radius: 0; padding-top: calc(16px + env(safe-area-inset-top)); } }

.kd-sf__top { display: flex; justify-content: space-between; align-items: center; }
.kd-sf__top h3 { margin: 0; font-family: var(--font-body); font-size: 16px; font-weight: 700; color: var(--fg); display: inline-flex; align-items: center; gap: 6px; }
.kd-sf__top h3::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-hero); box-shadow: var(--glow-magenta); }
.kd-sf__close { width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.05); border: 1px solid var(--line-strong); color: var(--fg); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kd-sf__close:hover { background: rgba(255,78,168,.18); color: #ffb1d4; border-color: rgba(255,78,168,.4); }

.kd-sf__stage { display: flex; justify-content: center; padding: 8px 0; }
.kd-sf__frame { position: relative; border-radius: 18px; overflow: hidden; background: var(--frame-bg); color: var(--frame-fg); padding: 10px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 0 60px color-mix(in oklab, var(--frame-fg) 8%, transparent), 0 16px 40px rgba(0,0,0,.6); }
.kd-sf__band { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 2px 4px; }
.kd-sf__brand { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.kd-sf__logo { width: 28px; height: 28px; border-radius: 8px; background: rgba(0,0,0,.4); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 16px; font-weight: 500; color: #f5d589; flex-shrink: 0; }
.kd-sf__brand-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kd-sf__brand-id strong { font-family: var(--font-display); font-size: 13px; font-weight: 500; }
.kd-sf__brand-id span { font-family: var(--font-body); font-size: 9px; opacity: .8; }
.kd-sf__tag { padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.32); font-family: var(--font-body); font-size: 9.5px; font-weight: 700; }

.kd-sf__inner-wrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; width: 100%; }
.kd-sf__inner { aspect-ratio: var(--inner-ratio, 1 / 1); max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 12px; overflow: hidden; background: rgba(0,0,0,.4); display: flex; flex-direction: column; border: 1px solid rgba(255,255,255,.1); position: relative; }
/* Fallback: inner takes the dominant axis */
.kd-sf__frame--story .kd-sf__inner  { width: 100%; height: auto; }
.kd-sf__frame--square .kd-sf__inner { width: 100%; height: auto; }
.kd-sf__frame--wide .kd-sf__inner   { width: 100%; height: auto; }
.kd-sf__source { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px 3px 4px; border-radius: 999px; background: rgba(0,0,0,.4); border: 1px solid rgba(255,255,255,.15); }
.kd-sf__source-glyph { width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 10px; font-weight: 700; flex-shrink: 0; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.kd-sf__source-lbl { font-family: var(--font-body); font-size: 9.5px; font-weight: 700; color: #fff; }
.kd-sf__media-net { position: absolute; top: 8px; inset-inline-start: 8px; width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-family: var(--font-body); font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(0,0,0,.5), 0 0 0 2px rgba(255,255,255,.2); z-index: 2; }
.kd-sf__caption { margin: 4px 4px 2px; font-family: var(--font-body); font-size: 11px; line-height: 1.4; color: var(--frame-fg); opacity: .92; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-sf__media { flex: 1; position: relative; min-height: 0; }
.kd-sf__media { flex: 1; position: relative; }
.kd-sf__play { position: absolute; inset: 0; margin: auto; width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,.95); color: #0a1018; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 0 26px rgba(255,255,255,.4); }
.kd-sf__meta { padding: 8px 10px; display: flex; align-items: center; gap: 8px; background: rgba(0,0,0,.45); backdrop-filter: blur(6px); }
.kd-sf__author { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.kd-sf__avatar { width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, #f5d589, #c08a2e); color: #1a1208; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; flex-shrink: 0; }
.kd-sf__author > span:last-child { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.kd-sf__author strong { font-family: var(--font-body); font-size: 11px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-sf__author em { font-family: var(--font-body); font-size: 9.5px; font-style: normal; color: rgba(255,255,255,.6); }
.kd-sf__rate { display: inline-flex; align-items: center; gap: 3px; font-family: var(--font-body); font-size: 11px; color: #f5d589; }

.kd-sf__cta { font-family: var(--font-body); font-size: 10px; font-weight: 700; opacity: .9; }
.kd-sf__hash { font-family: var(--font-body); font-size: 9px; opacity: .7; }

.kd-sf__controls { display: flex; flex-direction: column; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,255,255,.03); border: 1px solid var(--line); }
.kd-sf__crow { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin: 0; padding: 0; }
.kd-sf__crow > span { font-family: var(--font-body); font-size: 12px; color: var(--fg-2); }

.kd-sf__seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid var(--line); }
.kd-sf__seg button { padding: 6px 12px; border-radius: 999px; background: transparent; border: 0; color: var(--fg-2); font-family: var(--font-body); font-size: 11.5px; cursor: pointer; transition: all var(--dur-fast) var(--ease-out); }
.kd-sf__seg button:hover { color: var(--fg); }
.kd-sf__seg button.is-on { background: var(--grad-hero); color: #fff; font-weight: 700; box-shadow: var(--glow-magenta); }

.kd-sf__themes { display: inline-flex; gap: 8px; }
.kd-sf__theme { width: 28px; height: 28px; border-radius: 8px; border: 2px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; transition: all var(--dur-fast) var(--ease-out); }
.kd-sf__theme:hover { transform: scale(1.1); }
.kd-sf__theme.is-on { border-color: #fff; box-shadow: 0 0 0 2px var(--neon-magenta); }

.kd-sf__toggle { position: relative; width: 40px; height: 22px; cursor: pointer; flex-shrink: 0; }
.kd-sf__toggle input { opacity: 0; position: absolute; inset: 0; cursor: pointer; }
.kd-sf__toggle span { position: absolute; inset: 0; border-radius: 999px; background: rgba(255,255,255,.12); border: 1px solid var(--line-strong); transition: all var(--dur-fast) var(--ease-out); }
.kd-sf__toggle span::before { content: ""; position: absolute; top: 2px; inset-inline-start: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--fg); transition: all var(--dur-fast) var(--ease-out); }
.kd-sf__toggle input:checked + span { background: var(--grad-hero); border-color: transparent; }
.kd-sf__toggle input:checked + span::before { inset-inline-start: calc(100% - 18px); background: #fff; }

.kd-sf__exports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
@media (min-width: 480px) { .kd-sf__exports { grid-template-columns: repeat(6, 1fr); } }
.kd-sf__export { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 4px; border-radius: 12px; background: rgba(255,255,255,.03); border: 1px solid var(--line); color: var(--fg-2); cursor: pointer; font-family: var(--font-body); font-size: 10.5px; font-weight: 600; transition: all var(--dur-fast) var(--ease-out); }
.kd-sf__export:hover { background: rgba(255,255,255,.06); color: var(--fg); border-color: var(--line-strong); transform: translateY(-2px); }
.kd-sf__export--download { background: linear-gradient(135deg, rgba(255,78,168,.12), rgba(154,108,255,.08)); border-color: rgba(255,78,168,.3); color: #ffb1d4; }
.kd-sf__export--download:hover { box-shadow: var(--glow-magenta); }
.kd-sf__export[disabled] { opacity: 0.5; pointer-events: none; }
.kd-sf__export-icon { width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0,0,0,.3); }
.kd-sf__export-glyph { font-family: var(--font-body); font-size: 18px; font-weight: 700; color: #fff; }
.kd-sf__export-lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; text-align: center; }
.kd-sf__spinner { width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: kd-spin 0.8s linear infinite; }
@keyframes kd-spin { to { transform: rotate(360deg); } }

.kd-sf__note { margin: 0; display: flex; gap: 6px; align-items: flex-start; padding: 8px 12px; border-radius: 10px; background: rgba(75,227,255,.06); border: 1px solid rgba(75,227,255,.16); color: rgba(255,255,255,.65); font-family: var(--font-body); font-size: 11px; line-height: 1.6; }
.kd-sf__note > svg { color: var(--neon-cyan); margin-top: 2px; flex-shrink: 0; }


/* =============================================================
   Login.jsx — standalone OTP login page
   ============================================================= */
.kd-login {
  position: fixed; inset: 0;
  background: #06090d;
  color: #f0e9d9;
  font-family: var(--font-body);
  z-index: 100;
  overflow: auto;
  display: flex; align-items: safe center; justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
}
.kd-login__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kd-login__aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: 0.55;
  animation: kd-login-drift 18s ease-in-out infinite alternate;
}
.kd-login__aurora-1 { width: 520px; height: 520px; left: -120px; top: -120px;
  background: radial-gradient(circle, #ff4ea8 0%, transparent 65%); }
.kd-login__aurora-2 { width: 480px; height: 480px; right: -100px; top: 12%;
  background: radial-gradient(circle, #9a6cff 0%, transparent 65%);
  animation-delay: -6s; }
.kd-login__aurora-3 { width: 420px; height: 420px; left: 20%; bottom: -160px;
  background: radial-gradient(circle, #4be3ff 0%, transparent 65%);
  animation-delay: -12s; }
@keyframes kd-login-drift {
  0%   { transform: translate3d(0,0,0)   scale(1); }
  50%  { transform: translate3d(40px,-30px,0) scale(1.1); }
  100% { transform: translate3d(-30px,30px,0) scale(0.95); }
}
@media (prefers-reduced-motion: reduce) {
  .kd-login__aurora i { animation: none; }
}

.kd-login__close {
  position: absolute; top: 18px; inset-inline-start: 18px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.7); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  z-index: 2;
}
.kd-login__close:hover { background: rgba(255,255,255,.12); color: #fff; }

.kd-login__inner {
  position: relative;
  width: 100%; max-width: 440px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 24px;
}

.kd-login__brand {
  display: flex; justify-content: center; align-items: center;
  height: 80px;
}
.kd-login__brand img { height: 64px; width: auto; opacity: 0.92; filter: drop-shadow(0 4px 22px rgba(255,78,168,.18)); }

/* Card */
.kd-login__card {
  position: relative;
  padding: 28px 24px 22px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.015));
  border: 1px solid rgba(255,255,255,.10);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 12px 60px -20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.06);
  animation: kd-login-card-in .42s var(--ease-out) both;
}
@keyframes kd-login-card-in {
  from { opacity: 0.6; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.kd-login__back {
  background: transparent; border: 0; color: rgba(255,255,255,.62);
  cursor: pointer; font-family: var(--font-body); font-size: 12px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 0; margin-bottom: 14px;
}
.kd-login__back:hover { color: var(--neon-cyan); }

.kd-login__h {
  font-family: var(--font-display);
  font-size: 32px; font-weight: 500; line-height: 1.15;
  margin: 0 0 8px; color: #fff;
  letter-spacing: -0.01em;
}
.kd-login__sub {
  margin: 0 0 22px; font-size: 14px; line-height: 1.7;
  color: rgba(255,255,255,.62);
}

/* phone field */
.kd-login__field {
  position: relative; display: flex; align-items: center;
  margin-bottom: 8px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 16px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kd-login__field:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(75,227,255,.16);
}
.kd-login__field.is-error {
  border-color: #ff5774;
  background: rgba(255,87,116,.06);
}
.kd-login__field.is-error:focus-within {
  box-shadow: 0 0 0 3px rgba(255,87,116,.18);
}
.kd-login__field-lbl {
  position: absolute; top: -8px; inset-inline-start: 14px;
  background: #0d141c; padding: 0 6px;
  font-size: 11px; color: rgba(255,255,255,.6);
  letter-spacing: .04em;
}
.kd-login__phone {
  flex: 1;
  background: transparent; border: 0; outline: none;
  padding: 16px 16px 16px 14px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 18px; font-weight: 500;
  letter-spacing: .04em;
}
.kd-login__field-flag {
  font-family: var(--font-body); font-size: 13px;
  color: rgba(255,255,255,.5);
  padding-inline-end: 16px; padding-inline-start: 4px;
  direction: ltr; letter-spacing: .04em;
}

.kd-login__err {
  margin: 6px 2px 14px;
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: #ff8aa0;
  line-height: 1.5;
}
.kd-login__err > svg { color: #ff5774; flex-shrink: 0; }

.kd-login__cta {
  width: 100%; margin-top: 16px; margin-bottom: 14px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.kd-login__cta[disabled] { opacity: 0.42; }

.kd-login__legal {
  margin: 4px 0 0; text-align: center;
  font-size: 11.5px; color: rgba(255,255,255,.42); line-height: 1.7;
}
.kd-login__legal a { color: rgba(255,255,255,.7); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.18); }
.kd-login__legal a:hover { color: var(--neon-cyan); border-color: var(--neon-cyan); }

.kd-login__alt {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px dashed rgba(255,255,255,.10);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,.55);
}
.kd-login__alt-btn {
  background: transparent; border: 0; cursor: pointer;
  color: var(--neon-cyan); font-family: var(--font-body); font-size: 13px; font-weight: 600;
}
.kd-login__alt-btn:hover { text-decoration: underline; }

/* OTP boxes */
.kd-login__otp {
  display: flex; gap: 10px; justify-content: center;
  direction: ltr; margin: 4px 0 16px;
}
.kd-login__otp-box {
  width: 54px; height: 64px;
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.16);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 26px; font-weight: 600;
  text-align: center;
  outline: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kd-login__otp-box:focus {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 0 3px rgba(255,78,168,.20), 0 4px 18px rgba(255,78,168,.18);
  transform: translateY(-1px);
}
.kd-login__otp.is-error .kd-login__otp-box {
  border-color: #ff5774;
  background: rgba(255,87,116,.06);
}
.kd-login__otp.is-error .kd-login__otp-box:focus {
  box-shadow: 0 0 0 3px rgba(255,87,116,.20);
}
.kd-login__otp.is-shake { animation: kd-login-shake .42s var(--ease-out); }
@keyframes kd-login-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

/* resend row */
.kd-login__resendrow {
  display: flex; align-items: center; justify-content: center;
  gap: 8px; flex-wrap: wrap;
  margin-bottom: 14px;
  font-size: 13px; color: rgba(255,255,255,.62);
}
.kd-login__resend {
  background: transparent; border: 0; cursor: pointer;
  color: var(--neon-cyan); font-family: var(--font-body); font-size: 13px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 2px;
}
.kd-login__resend:hover { color: #fff; }
.kd-login__resend--alt { color: #f5d589; }
.kd-login__resend--alt:hover { color: #ffe7b0; }
.kd-login__resend.is-counting {
  color: rgba(255,255,255,.62); cursor: default;
  display: inline-flex; align-items: center; gap: 8px;
}
.kd-login__resend.is-counting b { color: #fff; font-weight: 600; font-family: var(--font-body); }
.kd-login__resend-ring {
  width: 16px; height: 16px; border-radius: 50%;
  background: conic-gradient(var(--neon-cyan) var(--p, 0deg), rgba(255,255,255,.10) 0);
  position: relative;
}
.kd-login__resend-ring::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%;
  background: #0d141c;
}
.kd-login__resend.is-calling { color: #f5d589; display: inline-flex; align-items: center; gap: 6px; }
.kd-login__resend.is-called { color: #7ff0d2; display: inline-flex; align-items: center; gap: 5px; }
.kd-login__pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #f5d589; box-shadow: 0 0 0 0 rgba(245,213,137,.6);
  animation: kd-login-pulse 1.2s ease-out infinite;
}
@keyframes kd-login-pulse {
  0% { box-shadow: 0 0 0 0 rgba(245,213,137,.6); }
  100% { box-shadow: 0 0 0 12px rgba(245,213,137,0); }
}
.kd-login__sep { color: rgba(255,255,255,.22); }

.kd-login__textbtn {
  display: block; margin: 4px auto 0;
  background: transparent; border: 0;
  font-family: var(--font-body); font-size: 12.5px;
  color: rgba(255,255,255,.5); cursor: pointer;
  padding: 6px 8px;
}
.kd-login__textbtn:hover { color: var(--neon-cyan); }

/* success */
.kd-login__card--success { text-align: center; padding: 36px 24px; }
.kd-login__success-ring {
  width: 96px; height: 96px; margin: 0 auto 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(68,227,184,.28), rgba(68,227,184,0) 70%);
  display: inline-flex; align-items: center; justify-content: center;
  color: #7ff0d2;
  position: relative;
  animation: kd-login-success-pop .56s var(--ease-spring) both;
}
.kd-login__success-ring::before {
  content: ""; position: absolute; inset: 14px;
  border-radius: 50%;
  border: 2px solid rgba(127,240,210,.6);
  box-shadow: 0 0 24px rgba(127,240,210,.4);
}
@keyframes kd-login-success-pop {
  0%   { transform: scale(.5); opacity: 0; }
  60%  { transform: scale(1.14); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}

/* demo hint */
.kd-login__demohint {
  margin-top: 6px;
  padding: 10px 14px;
  border-radius: 12px;
  background: rgba(75,227,255,.05);
  border: 1px dashed rgba(75,227,255,.20);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: rgba(255,255,255,.55);
  text-align: center;
  line-height: 1.6;
}
.kd-login__demohint b { color: var(--neon-cyan); font-family: var(--font-mono); font-weight: 600; }
.kd-login__demohint > span:first-child { display: inline-block; margin-inline-end: 4px; color: rgba(255,255,255,.4); }

@media (max-width: 480px) {
  .kd-login { padding: 18px 12px; }
  .kd-login__card { padding: 24px 20px 20px; border-radius: 20px; }
  .kd-login__h { font-size: 26px; }
  .kd-login__otp-box { width: 46px; height: 56px; font-size: 22px; }
  .kd-login__brand img { height: 54px; }
}


/* =============================================================
   ProfileSetup.jsx — first-time profile wizard
   ============================================================= */
.kd-setup {
  position: fixed; inset: 0;
  background: #06090d;
  color: #f0e9d9;
  font-family: var(--font-body);
  z-index: 100;
  overflow: auto;
  display: flex; align-items: safe center; justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
}
.kd-setup__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kd-setup__aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(70px); opacity: 0.55;
  animation: kd-login-drift 18s ease-in-out infinite alternate;
}
.kd-setup__inner {
  position: relative;
  width: 100%; max-width: 520px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 16px;
}

/* progress dots row */
.kd-setup__steps {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,.55); letter-spacing: .04em;
}
.kd-setup__step-dot {
  flex: 1; height: 4px;
  background: rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background var(--dur-base) var(--ease-out);
}
.kd-setup__step-dot.is-done    { background: rgba(75,227,255,.55); }
.kd-setup__step-dot.is-current { background: var(--grad-hero); box-shadow: 0 0 12px rgba(255,78,168,.4); }
.kd-setup__step-num { margin-inline-start: 6px; flex-shrink: 0; }

/* card grows taller for setup */
.kd-setup__card {
  padding: 32px 26px 18px;
  min-height: 360px;
  display: flex; flex-direction: column;
}

.kd-setup__spacer { height: 6px; }

/* text inputs reused inside field */
.kd-setup__textinput {
  flex: 1;
  background: transparent; border: 0; outline: none;
  padding: 16px 16px;
  color: #fff;
  font-family: var(--font-body);
  font-size: 16px; font-weight: 500;
  width: 100%; min-width: 0;
}
.kd-setup__textinput::placeholder { color: rgba(255,255,255,.32); }
.kd-setup__textinput--uname {
  font-family: var(--font-mono);
  letter-spacing: .02em;
  text-align: start;
  padding-inline-start: 4px;
}

/* username field — show @ prefix and status on right */
.kd-setup__unamefield { display: flex; align-items: center; }
.kd-setup__at {
  padding-inline-start: 16px;
  font-family: var(--font-mono);
  color: rgba(255,255,255,.45);
  font-size: 16px;
}
.kd-setup__unamestate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px;
  margin-inline-end: 12px;
  flex-shrink: 0;
}
.kd-setup__spinner {
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.20);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: kd-setup-spin .8s linear infinite;
}
@keyframes kd-setup-spin { to { transform: rotate(360deg); } }

.kd-setup__hint {
  margin: 6px 6px 0;
  font-size: 12.5px; color: rgba(255,255,255,.55); line-height: 1.6;
  min-height: 22px;
}
.kd-setup__hint.is-error { color: #ff8aa0; }

/* ----- avatar step ----- */
.kd-setup__avatar-wrap { display: flex; justify-content: center; margin: 8px 0 22px; }
.kd-setup__avatar {
  width: 116px; height: 116px; border-radius: 50%;
  background: linear-gradient(135deg, #f5d589, #c08a2e);
  display: inline-flex; align-items: center; justify-content: center;
  overflow: hidden;
  box-shadow: 0 16px 44px -16px rgba(245,213,137,.5), inset 0 1px 0 rgba(255,255,255,.16);
  border: 3px solid rgba(255,255,255,.10);
}
.kd-setup__avatar img { width: 100%; height: 100%; object-fit: cover; }
.kd-setup__avatar-initial {
  font-family: var(--font-display);
  font-size: 56px; font-weight: 500;
  color: #1a1208;
}
.kd-setup__avatar-opts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  margin-bottom: 8px;
}
.kd-setup__opt {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  color: rgba(255,255,255,.85);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-setup__opt:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); transform: translateY(-2px); }
.kd-setup__opt.is-on {
  background: linear-gradient(180deg, rgba(255,78,168,.12), rgba(154,108,255,.08));
  border-color: rgba(255,78,168,.45);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(255,78,168,.20), 0 8px 24px -10px rgba(255,78,168,.5);
}
.kd-setup__opt-icon {
  width: 36px; height: 36px; border-radius: 12px;
  background: rgba(255,255,255,.06);
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.85);
  margin-bottom: 2px;
}
.kd-setup__opt.is-on .kd-setup__opt-icon { background: rgba(255,78,168,.16); color: #ffb1d4; }
.kd-setup__opt-sub { font-size: 10.5px; color: rgba(255,255,255,.5); font-weight: 400; }
.kd-setup__opt.is-on .kd-setup__opt-sub { color: rgba(255,255,255,.65); }

/* ----- province step ----- */
.kd-setup__provlist {
  margin-top: 14px;
  max-height: 280px; overflow-y: auto;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.025);
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,.18) transparent;
}
.kd-setup__provlist::-webkit-scrollbar { width: 6px; }
.kd-setup__provlist::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 999px; }
.kd-setup__prov {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px;
  background: transparent; border: 0;
  color: rgba(255,255,255,.85);
  font-family: var(--font-body); font-size: 14.5px;
  text-align: start; cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,.05);
  transition: background var(--dur-fast) var(--ease-out);
}
.kd-setup__prov:last-child { border-bottom: 0; }
.kd-setup__prov:hover { background: rgba(255,255,255,.05); color: #fff; }
.kd-setup__prov.is-on { background: rgba(75,227,255,.10); color: var(--neon-cyan); font-weight: 600; }
.kd-setup__prov.is-on > svg { color: var(--neon-cyan); }
.kd-setup__empty {
  padding: 22px; text-align: center;
  color: rgba(255,255,255,.5); font-size: 13px;
}

/* ----- interests step ----- */
.kd-setup__chips {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 14px 0 4px;
}
.kd-setup__chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.85);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-setup__chip:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.24); }
.kd-setup__chip.is-on {
  background: var(--grad-hero);
  color: #fff;
  border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 14px -4px rgba(255,78,168,.5);
  transform: translateY(-1px);
}
.kd-setup__chip-emoji { font-size: 16px; line-height: 1; }

/* ----- nav footer ----- */
.kd-setup__nav {
  margin-top: auto;
  padding-top: 18px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
}
.kd-setup__nav-right { display: flex; align-items: center; gap: 8px; }
.kd-setup__back, .kd-setup__skip {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,.55);
  font-family: var(--font-body); font-size: 13px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 10px; border-radius: 8px;
}
.kd-setup__back:hover, .kd-setup__skip:hover { color: var(--neon-cyan); background: rgba(255,255,255,.04); }
.kd-setup__cta {
  display: inline-flex; align-items: center; gap: 8px;
  min-width: 140px; justify-content: center;
}
.kd-setup__cta[disabled] { opacity: 0.42; }

@media (max-width: 520px) {
  .kd-setup { padding: 18px 12px; }
  .kd-setup__card { padding: 26px 20px 16px; }
  .kd-setup__avatar { width: 96px; height: 96px; }
  .kd-setup__avatar-initial { font-size: 44px; }
  .kd-setup__avatar-opts { grid-template-columns: 1fr; }
  .kd-setup__step-num { display: none; }
}


/* =============================================================
   AuthGate.jsx — lazy registration bottom-sheet
   ============================================================= */
.kd-authgate {
  position: fixed; inset: 0;
  z-index: 150;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--font-body);
  color: #f0e9d9;
}
.kd-authgate__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  animation: kd-authgate-fade .26s var(--ease-out) both;
}
@keyframes kd-authgate-fade { from { opacity: 0; } to { opacity: 1; } }

.kd-authgate__sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  padding: 14px 24px 28px;
  margin: 0 16px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(20,26,36,0.96), rgba(11,15,22,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  border-bottom: 0;
  box-shadow: 0 -16px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: kd-authgate-slide .42s var(--ease-spring) both;
  display: flex; flex-direction: column;
}
@keyframes kd-authgate-slide {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* drag handle */
.kd-authgate__handle {
  width: 44px; height: 4px;
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
  align-self: center;
  margin-bottom: 14px;
}

/* accent icon disc */
.kd-authgate__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  margin: 4px 0 12px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, #ff4ea8);
  background: color-mix(in oklab, var(--accent, #ff4ea8) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent, #ff4ea8) 30%, transparent);
  box-shadow: 0 0 24px -4px color-mix(in oklab, var(--accent, #ff4ea8) 60%, transparent);
}

.kd-authgate__h {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 26px; font-weight: 500; line-height: 1.2;
  color: #fff;
  letter-spacing: -0.01em;
}
.kd-authgate__sub {
  margin: 0 0 16px;
  font-size: 14px; line-height: 1.75;
  color: rgba(255,255,255,0.68);
}

.kd-authgate__hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(75,227,255,0.08);
  border: 1px solid rgba(75,227,255,0.18);
  color: rgba(255,255,255,0.78);
  font-size: 12.5px;
  margin-bottom: 18px;
  align-self: flex-start;
}
.kd-authgate__hint > svg { color: #7ff0d2; flex-shrink: 0; }

.kd-authgate__cta {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  margin-bottom: 10px;
}
.kd-authgate__later {
  background: transparent; border: 0; cursor: pointer;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  padding: 12px;
  border-radius: 12px;
}
.kd-authgate__later:hover { color: #fff; background: rgba(255,255,255,0.04); }

@media (min-width: 720px) {
  .kd-authgate { align-items: center; }
  .kd-authgate__sheet {
    border-radius: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 32px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
    animation: kd-authgate-pop .42s var(--ease-spring) both;
  }
  @keyframes kd-authgate-pop {
    from { transform: translateY(20px) scale(0.96); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .kd-authgate__handle { display: none; }
}


/* =============================================================
   Explore.jsx — personalized masonry feed
   ============================================================= */
.kd-explore-page { /* extends kd-feed-page; no-op */ }

/* Card wrapper for overlays */
.kd-explore-card { position: relative; }
.kd-explore-card__overlay {
  position: absolute; top: 10px; inset-inline-start: 10px;
  pointer-events: none;
  z-index: 2;
}
.kd-explore-card__overlay > * { pointer-events: auto; }

/* attribution chip — sits on visual RIGHT (inline-start in RTL).
   Content-type chip from card sits on visual LEFT (inline-end). */
.kd-explore-chip {
  position: relative;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px; padding-inline-end: 11px;
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.78);
  border: 1px solid color-mix(in oklab, var(--accent, #ff4ea8) 38%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  font-size: 10.5px; font-weight: 500;
  color: color-mix(in oklab, var(--accent, #ff4ea8) 60%, #fff);
  font-family: var(--font-body);
  white-space: nowrap;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,0.55);
}
.kd-explore-chip > svg { color: var(--accent, #ff4ea8); flex-shrink: 0; }
.kd-explore-chip__more {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-explore-chip__more:hover {
  background: color-mix(in oklab, var(--accent, #ff4ea8) 28%, rgba(255,255,255,0.06));
  border-color: color-mix(in oklab, var(--accent, #ff4ea8) 50%, rgba(255,255,255,0.08));
  color: #fff;
}

/* hide-content popup menu */
.kd-explore-menu {
  position: absolute; top: 32px; inset-inline-start: 0;
  min-width: 230px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(14, 19, 27, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 48px -10px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 5;
  animation: kd-explore-menu-in .22s var(--ease-out) both;
}
@keyframes kd-explore-menu-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.96); }
  to   { opacity: 1; transform: none; }
}
.kd-explore-menu > button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 13px;
  text-align: start; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kd-explore-menu > button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.kd-explore-menu > button > svg { flex-shrink: 0; color: rgba(255,255,255,0.55); }
.kd-explore-menu > button:hover > svg { color: var(--neon-cyan); }
.kd-explore-menu__sep { height: 1px; margin: 4px 6px; background: rgba(255,255,255,0.08); }
.kd-explore-menu__report { color: #ff8aa0 !important; }
.kd-explore-menu__report > svg { color: #ff5774 !important; }
.kd-explore-menu__report:hover { background: rgba(255,87,116,0.10) !important; }

/* empty state */
.kd-explore-empty {
  margin: 40px auto;
  max-width: 380px;
  padding: 36px 24px;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 20px;
  background: rgba(255,255,255,0.02);
  text-align: center;
  font-family: var(--font-body);
}
.kd-explore-empty__icon {
  width: 64px; height: 64px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: rgba(75,227,255,0.08);
  border: 1px solid rgba(75,227,255,0.16);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--neon-cyan);
}
.kd-explore-empty h3 {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
}
.kd-explore-empty p {
  margin: 0 0 16px;
  font-size: 13.5px; line-height: 1.7;
  color: rgba(255,255,255,0.6);
}
.kd-explore-empty__cta {
  padding: 9px 18px;
  border-radius: 999px;
  background: rgba(75,227,255,0.10);
  border: 1px solid rgba(75,227,255,0.30);
  color: var(--neon-cyan);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
}
.kd-explore-empty__cta:hover { background: rgba(75,227,255,0.18); color: #fff; }

/* Undo snack */
.kd-explore-undo {
  position: fixed; bottom: 90px;
  left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 14px 10px 18px;
  border-radius: 999px;
  background: rgba(8, 12, 18, 0.92);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 32px -8px rgba(0,0,0,0.55);
  backdrop-filter: blur(14px);
  font-family: var(--font-body); font-size: 13px;
  color: rgba(255,255,255,0.88);
  z-index: 90;
  animation: kd-explore-undo-in .32s var(--ease-spring) both;
}
@keyframes kd-explore-undo-in {
  from { transform: translate(-50%, 30px); opacity: 0; }
  to   { transform: translate(-50%, 0); opacity: 1; }
}
.kd-explore-undo > svg { color: #7ff0d2; }
.kd-explore-undo > button {
  background: transparent; border: 0;
  color: var(--neon-cyan);
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
  padding: 2px 6px;
}
.kd-explore-undo > button:hover { color: #fff; }


/* =============================================================
   UserProfile.jsx — viewing another user
   ============================================================= */
.kd-user-page {
  max-width: 920px; margin: 0 auto;
  padding: 0 20px 80px;
  font-family: var(--font-body);
  color: #f0e9d9;
}

/* sticky header */
.kd-user-head {
  position: sticky; top: 0;
  z-index: 12;
  margin: 0 -20px 16px;
  padding: 10px 20px;
  display: flex; align-items: center; gap: 12px;
  background: rgba(10, 14, 22, 0.78);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kd-user-head__back, .kd-user-head__more {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-user-head__back:hover, .kd-user-head__more:hover {
  background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.22);
}
.kd-user-head__center {
  flex: 1;
  font-family: var(--font-mono); font-size: 14px;
  color: rgba(255,255,255,0.65);
  letter-spacing: .02em;
  text-align: center;
}
.kd-user-head__right { display: flex; align-items: center; gap: 8px; position: relative; }

/* hero block */
.kd-user-hero {
  padding: 14px 0 24px;
  text-align: center;
}
.kd-user-hero__avatar { margin-bottom: 14px; display: block; }
.kd-user-hero__name {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 30px; color: #fff;
  letter-spacing: -0.01em;
  display: block;
}
.kd-user-hero__name > .kd-user-hero__lock { display: inline-flex; vertical-align: middle; margin-inline-start: 8px; }
.kd-user-hero__lock {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(245,213,137,0.10);
  border: 1px solid rgba(245,213,137,0.22);
  color: #f5d589;
  font-family: var(--font-body); font-weight: 500;
  font-size: 11.5px;
}
.kd-user-hero__handle {
  margin: 0 0 14px;
  font-family: var(--font-mono); font-size: 13px;
  color: rgba(255,255,255,0.55);
}
.kd-user-hero__bio {
  margin: 0 auto 18px;
  max-width: 460px;
  font-size: 14px; line-height: 1.8;
  color: rgba(255,255,255,0.78);
}

.kd-user-hero__stats {
  display: flex; justify-content: center; align-items: stretch;
  gap: 8px; margin: 0 auto 20px;
  max-width: 520px;
}
.kd-user-hero__stats > div {
  flex: 1; padding: 10px 6px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
}
.kd-user-hero__stats > div > b {
  font-family: var(--font-body); font-weight: 600;
  font-size: 18px; color: #fff;
  font-variant-numeric: tabular-nums;
}
.kd-user-hero__stats > div > span {
  font-size: 11px;
  color: rgba(255,255,255,0.55);
}

.kd-user-hero__cta {
  display: flex; justify-content: center; gap: 8px; flex-wrap: wrap;
}

/* Follow button variants */
.kd-user-follow--on {
  background: rgba(75,227,255,0.10) !important;
  border-color: rgba(75,227,255,0.32) !important;
  color: var(--neon-cyan) !important;
}
.kd-user-follow--on:hover {
  background: rgba(255,87,116,0.10) !important;
  border-color: rgba(255,87,116,0.32) !important;
  color: #ff8aa0 !important;
}
.kd-user-follow--pending {
  background: rgba(245,213,137,0.08) !important;
  border-color: rgba(245,213,137,0.32) !important;
  color: #f5d589 !important;
}

/* Actions menu */
.kd-user-menu {
  position: absolute; top: 44px; inset-inline-end: 0;
  min-width: 200px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(14, 19, 27, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 48px -10px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  z-index: 15;
  animation: kd-explore-menu-in .22s var(--ease-out) both;
}
.kd-user-menu > button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 13px;
  text-align: start; cursor: pointer;
}
.kd-user-menu > button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.kd-user-menu > button > svg { flex-shrink: 0; color: rgba(255,255,255,0.55); }
.kd-user-menu > button:hover > svg { color: var(--neon-cyan); }
.kd-user-menu__sep { height: 1px; margin: 4px 6px; background: rgba(255,255,255,0.08); }
.kd-user-menu__danger { color: #ff8aa0 !important; }
.kd-user-menu__danger > svg { color: #ff5774 !important; }
.kd-user-menu__danger:hover { background: rgba(255,87,116,0.10) !important; color: #ff5774 !important; }

/* Private gate / Blocked state */
.kd-user-gate {
  margin: 32px auto;
  max-width: 480px;
  padding: 36px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.10);
  text-align: center;
}
.kd-user-gate__icon {
  width: 72px; height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: rgba(245,213,137,0.08);
  border: 1px solid rgba(245,213,137,0.20);
  color: #f5d589;
  display: inline-flex; align-items: center; justify-content: center;
}
.kd-user-gate__icon--block {
  background: rgba(255,87,116,0.10);
  border-color: rgba(255,87,116,0.30);
  color: #ff5774;
}
.kd-user-gate h3 {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
}
.kd-user-gate p {
  margin: 0 auto 18px;
  max-width: 360px;
  font-size: 14px; line-height: 1.8;
  color: rgba(255,255,255,0.62);
}

/* report backdrop (placeholder until P0-06) */
.kd-user-report-backdrop {
  position: fixed; inset: 0;
  z-index: 200;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-end; justify-content: center;
  animation: kd-authgate-fade .26s var(--ease-out) both;
}
.kd-user-report {
  position: relative;
  width: 100%; max-width: 460px;
  padding: 14px 24px 24px;
  margin: 0 16px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(180deg, rgba(20,26,36,0.96), rgba(11,15,22,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  text-align: center;
  animation: kd-authgate-slide .42s var(--ease-spring) both;
}
.kd-user-report h3 {
  margin: 12px 0 6px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
}
.kd-user-report p {
  margin: 0 0 16px;
  font-size: 13px; line-height: 1.7;
  color: rgba(255,255,255,0.65);
}
@media (min-width: 720px) {
  .kd-user-report-backdrop { align-items: center; }
  .kd-user-report { border-radius: 24px; }
}


/* =============================================================
   Report.jsx — unified report flow
   ============================================================= */
.kd-report {
  position: fixed; inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  font-family: var(--font-body);
  color: #f0e9d9;
}
.kd-report__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(8px);
  animation: kd-authgate-fade .26s var(--ease-out) both;
}
.kd-report__sheet {
  position: relative;
  width: 100%; max-width: 520px;
  padding: 14px 24px 24px;
  margin: 0 16px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(20,26,36,0.96), rgba(11,15,22,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -16px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: kd-authgate-slide .42s var(--ease-spring) both;
  max-height: 88vh;
  overflow-y: auto;
  display: flex; flex-direction: column;
}
.kd-report__close {
  position: absolute; top: 18px; inset-inline-start: 18px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.75); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.kd-report__close:hover { background: rgba(255,255,255,0.12); color: #fff; }
.kd-report__h {
  margin: 4px 0 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 26px; color: #fff;
  letter-spacing: -0.01em;
}
.kd-report__sub {
  margin: 0 0 18px;
  font-size: 13.5px; line-height: 1.75;
  color: rgba(255,255,255,0.62);
}

.kd-report__reasons {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 8px;
}
.kd-report__reason {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  text-align: start; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
  width: 100%;
}
.kd-report__reason:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.kd-report__reason.is-on {
  background: rgba(75,227,255,0.08);
  border-color: rgba(75,227,255,0.40);
  color: #fff;
}
.kd-report__reason-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-report__reason--rose   .kd-report__reason-icon { background: rgba(255,87,116,0.10); color: #ff8aa0; }
.kd-report__reason--orange .kd-report__reason-icon { background: rgba(255,138,61,0.10); color: #ffb27a; }
.kd-report__reason--gold   .kd-report__reason-icon { background: rgba(245,213,137,0.10); color: #f5d589; }
.kd-report__reason--violet .kd-report__reason-icon { background: rgba(154,108,255,0.12); color: #bda0ff; }
.kd-report__reason--sky    .kd-report__reason-icon { background: rgba(75,227,255,0.10); color: #8eecff; }
.kd-report__reason--dark   .kd-report__reason-icon { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.7); }
.kd-report__reason-lbl { flex: 1; }

.kd-report__pickedreason {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px;
  margin-bottom: 12px;
  border-radius: 999px;
  background: rgba(75,227,255,0.08);
  border: 1px solid rgba(75,227,255,0.20);
  font-size: 12.5px; color: var(--neon-cyan);
  align-self: flex-start;
}
.kd-report__pickedreason > svg { flex-shrink: 0; }

.kd-report__textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 14px 16px;
  color: #fff;
  font-family: var(--font-body); font-size: 14px; line-height: 1.7;
  outline: none;
  box-sizing: border-box;
}
.kd-report__textarea:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(75,227,255,0.14); }
.kd-report__textarea::placeholder { color: rgba(255,255,255,0.32); }
.kd-report__charcount {
  margin-top: 6px;
  text-align: end;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.42);
}

.kd-report__nav {
  margin-top: 18px;
  padding-top: 14px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.06);
}

.kd-report__suggest {
  margin-top: 22px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,87,116,0.06);
  border: 1px dashed rgba(255,87,116,0.30);
}
.kd-report__suggest p {
  margin: 0 0 12px;
  font-size: 13.5px; color: rgba(255,255,255,0.78);
  text-align: center;
}
.kd-report__suggest-actions {
  display: flex; gap: 8px; justify-content: center; align-items: center;
}

@media (min-width: 720px) {
  .kd-report { align-items: center; }
  .kd-report__sheet {
    border-radius: 28px;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 32px 80px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
    animation: kd-authgate-pop .42s var(--ease-spring) both;
  }
}


/* =============================================================
   Settings.jsx — settings hub + sub-screens
   ============================================================= */
.kd-settings {
  max-width: 720px; margin: 0 auto;
  padding: 0 18px 80px;
  font-family: var(--font-body);
  color: #f0e9d9;
}

.kd-settings__head {
  position: sticky; top: 0;
  z-index: 12;
  margin: 0 -18px 14px;
  padding: 10px 18px;
  display: flex; align-items: center; gap: 10px;
  background: rgba(10, 14, 22, 0.78);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kd-settings__back {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-settings__back:hover { background: rgba(255,255,255,0.10); }
.kd-settings__title {
  flex: 1;
  margin: 0;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  letter-spacing: -0.01em;
}

/* hub list */
.kd-settings__group {
  margin-bottom: 22px;
}
.kd-settings__group-title {
  margin: 0 6px 8px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.45);
  text-transform: uppercase;
  letter-spacing: .08em;
}
.kd-settings__list {
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.kd-settings__row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 14px 16px;
  background: transparent; border: 0;
  text-align: start; cursor: pointer;
  color: #f0e9d9;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background var(--dur-fast) var(--ease-out);
}
.kd-settings__row:last-child { border-bottom: 0; }
.kd-settings__row:hover { background: rgba(255,255,255,0.04); }
.kd-settings__row-icon {
  width: 38px; height: 38px;
  border-radius: 12px;
  background: color-mix(in oklab, var(--c, #ff4ea8) 14%, transparent);
  color: var(--c, #ff4ea8);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--c, #ff4ea8) 28%, transparent);
  flex-shrink: 0;
}
.kd-settings__row-text { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.kd-settings__row-text strong {
  font-family: var(--font-body); font-weight: 500;
  font-size: 14.5px; color: #fff;
}
.kd-settings__row-text span {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.kd-settings__row-chev { color: rgba(255,255,255,0.32); flex-shrink: 0; }

.kd-settings__row--danger:hover { background: rgba(255,87,116,0.06); }
.kd-settings__row--danger strong { color: #ff8aa0; }

.kd-settings__version {
  margin: 22px 0 0;
  text-align: center;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.32);
}

/* sub-screen card */
.kd-settings__card {
  padding: 24px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  margin-bottom: 18px;
}
.kd-settings__h2 {
  margin: 0 0 6px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
  letter-spacing: -0.01em;
}
.kd-settings__p {
  margin: 0 0 18px;
  font-size: 14px; line-height: 1.75;
  color: rgba(255,255,255,0.62);
}
.kd-settings__textbtn {
  background: transparent; border: 0; cursor: pointer;
  color: #ff8aa0;
  font-family: var(--font-body); font-size: 12.5px;
  padding: 6px 8px;
}
.kd-settings__textbtn:hover { color: #ff5774; text-decoration: underline; }

/* fields */
.kd-settings__field { display: block; margin-bottom: 16px; }
.kd-settings__field-lbl {
  display: block; margin: 0 4px 6px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.55);
  letter-spacing: .04em;
}
.kd-settings__field-input {
  display: flex; align-items: stretch;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kd-settings__field-input:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(75,227,255,0.14);
}
.kd-settings__field-input input, .kd-settings__field-input textarea {
  flex: 1;
  background: transparent; border: 0; outline: none;
  padding: 13px 14px;
  color: #fff;
  font-family: var(--font-body); font-size: 14.5px;
  line-height: 1.7;
  min-width: 0; resize: vertical;
}
.kd-settings__field-input .kd-mono { font-family: var(--font-mono); letter-spacing: .01em; }
.kd-settings__field-input textarea { min-height: 96px; }
.kd-settings__field-prefix {
  padding: 13px 14px 13px 6px;
  color: rgba(255,255,255,0.45);
  font-family: var(--font-mono); font-size: 14.5px;
  border-inline-end: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.02);
}
.kd-settings__field-hint {
  display: block; margin: 6px 4px 0;
  font-size: 11.5px; color: rgba(255,255,255,0.45);
}
.kd-settings__formfoot {
  margin-top: 14px;
  display: flex; justify-content: flex-end;
}

/* avatar row */
.kd-settings__avatar-row { display: flex; align-items: center; gap: 16px; margin-bottom: 22px; }
.kd-settings__avatar-actions { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

/* change phone */
.kd-settings__bigphone, .kd-settings__bigcode {
  display: block;
  width: 100%;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 14px;
  padding: 16px 18px;
  color: #fff;
  font-family: var(--font-mono); font-size: 22px;
  font-weight: 500;
  text-align: center; letter-spacing: 6px;
  outline: none;
  margin-bottom: 16px;
  box-sizing: border-box;
}
.kd-settings__bigphone { font-size: 18px; letter-spacing: 3px; }
.kd-settings__bigphone:focus, .kd-settings__bigcode:focus {
  border-color: var(--neon-magenta);
  box-shadow: 0 0 0 3px rgba(255,78,168,0.18);
}
.kd-settings__bigphone::placeholder, .kd-settings__bigcode::placeholder {
  color: rgba(255,255,255,0.18);
}

/* toggle */
.kd-settings__toggle {
  position: relative;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: rgba(255,255,255,0.08);
  border: 0; cursor: pointer; padding: 0;
  transition: background var(--dur-fast) var(--ease-out);
  flex-shrink: 0;
}
.kd-settings__toggle.is-on { background: var(--grad-hero); box-shadow: 0 0 10px rgba(255,78,168,0.4); }
.kd-settings__toggle-knob {
  position: absolute; top: 3px; inset-inline-start: 3px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #fff;
  transition: inset-inline-start var(--dur-base) var(--ease-spring);
}
.kd-settings__toggle.is-on .kd-settings__toggle-knob { inset-inline-start: 21px; }

/* toggle row */
.kd-settings__togglerow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kd-settings__togglerow:last-child { border-bottom: 0; }
.kd-settings__togglerow-text { flex: 1; }
.kd-settings__togglerow-text strong {
  display: block;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; color: #fff;
}
.kd-settings__togglerow-text span {
  display: block; margin-top: 2px;
  font-size: 12px; color: rgba(255,255,255,0.5);
}

.kd-settings__rowtitle {
  margin: 18px 4px 8px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.45);
}

/* radio set */
.kd-settings__radioset { display: flex; flex-direction: column; gap: 6px; }
.kd-settings__radio {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 14px;
  text-align: start; cursor: pointer;
}
.kd-settings__radio:hover { background: rgba(255,255,255,0.05); }
.kd-settings__radio-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: transparent;
  border: 2px solid rgba(255,255,255,0.30);
  flex-shrink: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-settings__radio.is-on { border-color: rgba(75,227,255,0.40); background: rgba(75,227,255,0.06); color: #fff; }
.kd-settings__radio.is-on .kd-settings__radio-dot {
  background: var(--neon-cyan);
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 4px rgba(75,227,255,0.16) inset, 0 0 0 3px rgba(75,227,255,0) ;
}

/* blocked list */
.kd-settings__blockrow {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
.kd-settings__blockrow:last-child { border-bottom: 0; }
.kd-settings__blockrow-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kd-settings__blockrow-text strong { color: #fff; font-size: 14px; font-weight: 500; }
.kd-settings__blockrow-text span { color: rgba(255,255,255,0.55); font-size: 12px; margin-top: 2px; }

.kd-settings__empty {
  margin: 40px auto;
  max-width: 340px;
  padding: 32px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.6);
}

.kd-settings__static {
  padding: 24px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.78);
  font-size: 14px; line-height: 1.85;
}
.kd-settings__static p { margin: 0 0 14px; }
.kd-settings__static p:last-child { margin: 0; }


/* =============================================================
   DeleteAccount.jsx — flow حذف حساب
   ============================================================= */
.kd-delete {
  position: fixed; inset: 0;
  background: #06090d;
  color: #f0e9d9;
  font-family: var(--font-body);
  z-index: 110;
  overflow: auto;
  display: flex; align-items: safe center; justify-content: center;
  padding: 32px 16px;
  box-sizing: border-box;
}
.kd-delete__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.5; }
.kd-delete__aurora i {
  position: absolute; display: block; border-radius: 50%;
  filter: blur(80px); opacity: 0.42;
}
.kd-delete__aurora .kd-login__aurora-1 { background: radial-gradient(circle, #ff5774 0%, transparent 65%); }
.kd-delete__aurora .kd-login__aurora-2 { background: radial-gradient(circle, #9a6cff 0%, transparent 65%); }
.kd-delete__aurora .kd-login__aurora-3 { background: radial-gradient(circle, #4be3ff 0%, transparent 65%); }

.kd-delete__inner {
  position: relative;
  width: 100%; max-width: 520px;
}

.kd-delete__card {
  position: relative;
  padding: 32px 28px 26px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,87,116,0.18);
  backdrop-filter: blur(22px) saturate(140%);
  -webkit-backdrop-filter: blur(22px) saturate(140%);
  box-shadow: 0 12px 60px -20px rgba(0,0,0,0.6), 0 0 60px -20px rgba(255,87,116,0.18), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: kd-login-card-in .42s var(--ease-out) both;
}

.kd-delete__warn-ring {
  width: 72px; height: 72px;
  margin: 4px 0 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,87,116,0.10);
  border: 1.5px solid rgba(255,87,116,0.40);
  color: #ff5774;
  box-shadow: 0 0 28px -6px rgba(255,87,116,0.45);
}

.kd-delete__list {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.kd-delete__list li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.kd-delete__list li > svg {
  flex-shrink: 0;
  margin-top: 4px;
  width: 18px; height: 18px;
  padding: 4px; border-radius: 50%;
  background: rgba(75,227,255,0.10);
  color: var(--neon-cyan);
}
.kd-delete__list li > div { display: flex; flex-direction: column; gap: 2px; }
.kd-delete__list li strong {
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; color: #fff;
}
.kd-delete__list li span {
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255,255,255,0.62);
}

.kd-delete__nav {
  display: flex; gap: 10px; justify-content: space-between;
  margin-top: 8px;
}
.kd-delete__nav > .kd-setup__skip { padding: 12px 16px; }
.kd-delete__nav > .kd-btn { flex: 1; max-width: 220px; }

/* danger variant */
.kd-btn--danger {
  background: linear-gradient(135deg, #ff4ea8, #ff5774);
  color: #fff;
  border: 0;
  box-shadow: 0 6px 20px -6px rgba(255,87,116,0.6);
}
.kd-btn--danger:hover { filter: brightness(1.08); box-shadow: 0 8px 26px -6px rgba(255,87,116,0.7); }
.kd-btn--danger:disabled { opacity: 0.4; pointer-events: none; }

/* reason radio list */
.kd-delete__reasons {
  display: flex; flex-direction: column; gap: 6px;
  margin-bottom: 18px;
}
.kd-delete__reason {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 14px;
  text-align: start; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-delete__reason:hover { background: rgba(255,255,255,0.05); }
.kd-delete__reason.is-on {
  background: rgba(255,87,116,0.06);
  border-color: rgba(255,87,116,0.40);
  color: #fff;
}
.kd-delete__reason-radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.30);
  flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.kd-delete__reason.is-on .kd-delete__reason-radio {
  border-color: #ff5774;
}
.kd-delete__reason-radio > i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #ff5774;
}

/* warn line above OTP */
.kd-delete__warn-line {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 0 16px;
  padding: 8px 12px;
  border-radius: 12px;
  background: rgba(255,87,116,0.06);
  border: 1px solid rgba(255,87,116,0.18);
  color: #ff8aa0;
  font-size: 12.5px;
}
.kd-delete__warn-line > svg { color: #ff5774; flex-shrink: 0; }

/* submitted state */
.kd-delete__card--state { text-align: center; }
.kd-delete__state-ring {
  width: 140px; height: 140px;
  margin: 0 auto 18px;
  border-radius: 50%;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0;
  border: 4px solid;
  position: relative;
  font-family: var(--font-display);
}
.kd-delete__state-ring.is-warning {
  border-color: #f5d589;
  background: radial-gradient(circle, rgba(245,213,137,0.18), rgba(245,213,137,0) 70%);
  box-shadow: 0 0 36px -4px rgba(245,213,137,0.4), inset 0 0 24px -4px rgba(245,213,137,0.2);
  color: #f5d589;
}
.kd-delete__state-ring.is-final {
  border-color: #ff5774;
  background: radial-gradient(circle, rgba(255,87,116,0.18), rgba(255,87,116,0) 70%);
  box-shadow: 0 0 36px -4px rgba(255,87,116,0.4), inset 0 0 24px -4px rgba(255,87,116,0.2);
  color: #ff8aa0;
}
.kd-delete__state-num { font-size: 56px; line-height: 1; font-weight: 500; }
.kd-delete__state-unit { font-family: var(--font-body); font-size: 13px; margin-top: 6px; color: rgba(255,255,255,0.7); }

.kd-delete__phases {
  margin: 24px 0 18px;
  display: flex; flex-direction: column; gap: 12px;
  text-align: start;
}
.kd-delete__phase {
  display: flex; gap: 14px; align-items: stretch;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  opacity: 0.6;
}
.kd-delete__phase.is-active { opacity: 1; border-color: rgba(245,213,137,0.35); background: rgba(245,213,137,0.05); }
.kd-delete__phase.is-done   { opacity: 0.55; }
.kd-delete__phase-num {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.55);
  font-family: var(--font-display);
  font-weight: 500; font-size: 16px;
  flex-shrink: 0;
}
.kd-delete__phase.is-active .kd-delete__phase-num {
  background: rgba(245,213,137,0.18);
  color: #f5d589;
}
.kd-delete__phase > div:last-child { flex: 1; min-width: 0; }
.kd-delete__phase strong {
  display: block;
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px;
  color: #fff;
}
.kd-delete__phase span {
  display: block;
  font-size: 11.5px; color: rgba(255,255,255,0.55);
  margin-top: 2px;
}
.kd-delete__phase-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  margin-top: 8px;
  overflow: hidden;
}
.kd-delete__phase-bar > i {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, #f5d589, #ff8a3d);
  border-radius: 999px;
  transition: width var(--dur-base) var(--ease-out);
}
.kd-delete__phase.is-final .kd-delete__phase-bar > i { background: linear-gradient(90deg, #ff8a3d, #ff5774); }

.kd-delete__reminder {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  margin: 0 auto 20px;
  border-radius: 999px;
  background: rgba(75,227,255,0.06);
  border: 1px solid rgba(75,227,255,0.18);
  color: rgba(255,255,255,0.78);
  font-size: 12.5px;
}
.kd-delete__reminder > svg { color: var(--neon-cyan); flex-shrink: 0; }

.kd-delete__final-note {
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(255,87,116,0.06);
  border: 1px dashed rgba(255,87,116,0.30);
  color: rgba(255,255,255,0.7);
  font-size: 12.5px;
  line-height: 1.7;
  text-align: start;
}


/* =============================================================
   Profile — pending tab (P0-10)
   ============================================================= */
.kd-profile-page__statbtn {
  background: transparent; border: 0;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; padding: 0;
  font-family: var(--font-body);
  transition: transform var(--dur-fast) var(--ease-out);
}
.kd-profile-page__statbtn:hover { transform: translateY(-2px); }
.kd-profile-page__statbtn:hover .kd-profile-page__big { color: var(--neon-cyan); }
.kd-profile-page__statbtn .kd-profile-page__big {
  display: block;
  transition: color var(--dur-fast) var(--ease-out);
}
.kd-profile-page__statbtn span:last-child {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  margin-top: 4px;
}

.kd-pending { display: flex; flex-direction: column; gap: 10px; }
.kd-pending__hint {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(75,227,255,0.06);
  border: 1px solid rgba(75,227,255,0.16);
  font-size: 12px; color: rgba(255,255,255,0.75);
  align-self: flex-start;
  margin-bottom: 6px;
}
.kd-pending__hint > svg { color: #7ff0d2; flex-shrink: 0; }

.kd-pending__row {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 14px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-body);
}
.kd-pending__thumb {
  width: 56px; height: 56px;
  border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.06);
}
.kd-pending__body { flex: 1; min-width: 0; }
.kd-pending__topline {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 8px;
}
.kd-pending__topline strong {
  flex: 1; min-width: 0;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-pending__time {
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.42);
  flex-shrink: 0;
}

/* progress bar */
.kd-pending__bar {
  height: 4px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  margin-bottom: 8px;
  overflow: hidden;
}
.kd-pending__bar > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--neon-magenta), var(--neon-cyan));
  border-radius: 999px;
  box-shadow: 0 0 8px rgba(255,78,168,0.6);
  transition: width var(--dur-base) var(--ease-out);
}
.kd-pending__bar--indet > i {
  width: 35%;
  animation: kd-pending-indet 1.6s ease-in-out infinite;
}
@keyframes kd-pending-indet {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(280%); }
}
html[dir="rtl"] .kd-pending__bar--indet > i {
  animation: kd-pending-indet-rtl 1.6s ease-in-out infinite;
}
@keyframes kd-pending-indet-rtl {
  0%   { transform: translateX(100%); }
  100% { transform: translateX(-280%); }
}

.kd-pending__statusline {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  font-size: 11.5px;
}
.kd-pending__status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.kd-pending__status--uploading {
  background: rgba(255,78,168,0.10);
  color: #ffb1d4;
  border: 1px solid rgba(255,78,168,0.24);
}
.kd-pending__status--processing {
  background: rgba(75,227,255,0.10);
  color: #8eecff;
  border: 1px solid rgba(75,227,255,0.24);
}
.kd-pending__status--rejected {
  background: rgba(255,87,116,0.10);
  color: #ff8aa0;
  border: 1px solid rgba(255,87,116,0.24);
}
.kd-pending__detail { color: rgba(255,255,255,0.55); font-family: var(--font-mono); }
.kd-pending__pulse {
  width: 7px; height: 7px; border-radius: 50%;
  background: #ff4ea8;
  box-shadow: 0 0 0 0 rgba(255,78,168,0.6);
  animation: kd-login-pulse 1.2s ease-out infinite;
}
.kd-pending__spinner {
  width: 11px; height: 11px;
  border: 1.5px solid rgba(255,255,255,0.18);
  border-top-color: var(--neon-cyan);
  border-radius: 50%;
  animation: kd-setup-spin 0.8s linear infinite;
}

.kd-pending__reason {
  margin: 8px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,87,116,0.06);
  border: 1px solid rgba(255,87,116,0.18);
  color: rgba(255,255,255,0.78);
  font-size: 12.5px; line-height: 1.65;
}

.kd-pending__actions {
  display: flex; gap: 8px;
  margin-top: 10px;
}
.kd-pending__btn {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.78);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.kd-pending__btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.kd-pending__btn--danger { color: #ff8aa0; border-color: rgba(255,87,116,0.30); }
.kd-pending__btn--danger:hover { background: rgba(255,87,116,0.10); color: #fff; }
.kd-pending__btn--primary {
  background: var(--grad-hero); color: #fff; border-color: transparent;
  font-weight: 600;
  box-shadow: 0 4px 14px -4px rgba(255,78,168,0.5);
}
.kd-pending__btn--primary:hover { filter: brightness(1.08); color: #fff; background: var(--grad-hero); }

.kd-pending__empty, .kd-profile-empty {
  margin: 40px auto;
  max-width: 340px;
  padding: 32px;
  text-align: center;
  border: 1px dashed rgba(255,255,255,0.10);
  border-radius: 18px;
  background: rgba(255,255,255,0.02);
  color: rgba(255,255,255,0.6);
  font-size: 14px;
  font-family: var(--font-body);
}
.kd-pending__empty p, .kd-profile-empty p { margin: 0; }


/* =============================================================
   States.jsx — Empty / Error / Skeleton templates
   ============================================================= */
.kd-state {
  margin: 32px auto;
  max-width: 400px;
  padding: 36px 28px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px dashed rgba(255,255,255,0.10);
  text-align: center;
  font-family: var(--font-body);
  color: rgba(255,255,255,0.85);
}
.kd-state__icon {
  width: 76px; height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.kd-state__title {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
  letter-spacing: -0.01em;
}
.kd-state__sub {
  margin: 0 auto 18px;
  max-width: 320px;
  font-size: 13.5px; line-height: 1.8;
  color: rgba(255,255,255,0.6);
}
.kd-state__cta { margin-top: 4px; }
.kd-state__ctas { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }

.kd-state--error .kd-state__code {
  display: inline-block;
  margin-bottom: 14px;
  font-family: var(--font-display);
  font-size: 56px; font-weight: 500; line-height: 1;
  background: linear-gradient(135deg, #ff4ea8, #ff5774);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  letter-spacing: -0.02em;
}

/* ========== Skeletons ========== */
.kd-skel {
  display: block;
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  animation: kd-skel-shimmer 1.4s ease-in-out infinite;
}
.kd-skel--circle { border-radius: 50% !important; }
.kd-skel--rect   { border-radius: 12px; }
@keyframes kd-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
html[dir="rtl"] .kd-skel { animation-direction: reverse; }
@media (prefers-reduced-motion: reduce) {
  .kd-skel { animation: none; opacity: 0.6; }
}

.kd-skel-card {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 12px;
  break-inside: avoid;
  animation: kd-skel-pop .3s var(--ease-out) both;
}
@keyframes kd-skel-pop {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}
.kd-skel-foot {
  display: flex; align-items: center; gap: 8px;
  margin-top: 12px;
  background: transparent;
  animation: none;
  padding: 0;
}

.kd-skel-post {
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.kd-skel-post__author {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 0 18px;
}
.kd-skel-post__author-lines { flex: 1; display: flex; flex-direction: column; gap: 6px; }

.kd-skel-profile {
  padding: 28px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  text-align: center;
}
.kd-skel-profile__stats { display: flex; gap: 10px; justify-content: center; }
.kd-skel-profile__stat {
  padding: 12px 16px;
  border-radius: 12px;
  background: rgba(255,255,255,0.04);
  flex: 1;
}

.kd-skel-list { display: flex; flex-direction: column; gap: 6px; }
.kd-skel-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  animation: kd-skel-pop .3s var(--ease-out) both;
}

/* ========== Gallery page ========== */
.kd-states-gallery {
  max-width: 1100px; margin: 0 auto;
  padding: 0 18px 80px;
  font-family: var(--font-body);
  color: #f0e9d9;
}
.kd-states-gallery__intro {
  margin: 8px 4px 24px;
  font-size: 13.5px; line-height: 1.8;
  color: rgba(255,255,255,0.62);
  max-width: 720px;
}
.kd-states-gallery__h {
  margin: 30px 4px 16px;
  font-family: var(--font-mono); font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,0.55);
}
.kd-states-gallery__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}
.kd-states-gallery__skel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
  gap: 16px;
}
.kd-states-demo {
  border-radius: 22px;
  background: rgba(255,255,255,0.018);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
  padding: 0;
}
.kd-states-demo__lbl {
  padding: 10px 16px;
  background: rgba(255,255,255,0.04);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.62);
  letter-spacing: .04em;
}
.kd-states-demo__body { padding: 12px; }
.kd-states-demo__body .kd-state { margin: 0; max-width: none; }
.kd-states-demo__body .kd-masonry { max-height: 360px; overflow: hidden; }


/* =============================================================
   UserLists.jsx — followers / following / liked / saved
   ============================================================= */
.kd-userlists {
  max-width: 720px; margin: 0 auto;
  padding: 0 18px 80px;
  font-family: var(--font-body);
  color: #f0e9d9;
}
.kd-userlists__count {
  display: inline-flex; align-items: center;
  margin-inline-start: 0;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  font-family: var(--font-mono); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.7);
  line-height: 1;
  position: relative; top: 1px;
}

/* search */
.kd-userlists__search {
  position: relative;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  margin-bottom: 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.kd-userlists__search:focus-within {
  border-color: var(--neon-cyan);
  box-shadow: 0 0 0 3px rgba(75,227,255,0.14);
}
.kd-userlists__search > svg { color: rgba(255,255,255,0.45); flex-shrink: 0; }
.kd-userlists__search input {
  flex: 1;
  background: transparent; border: 0; outline: none;
  color: #fff;
  font-family: var(--font-body); font-size: 14px;
  min-width: 0;
}
.kd-userlists__search input::placeholder { color: rgba(255,255,255,0.40); }
.kd-userlists__clear {
  background: rgba(255,255,255,0.06); border: 0; border-radius: 50%;
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.7);
  cursor: pointer; flex-shrink: 0;
}
.kd-userlists__clear:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* user list */
.kd-userlist { display: flex; flex-direction: column; gap: 6px; }
.kd-userlist__row {
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  cursor: pointer;
  text-align: start;
  transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.kd-userlist__row:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.kd-userlist__row-text { flex: 1; min-width: 0; }
.kd-userlist__row-name {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 2px;
}
.kd-userlist__row-name strong {
  font-family: var(--font-body); font-weight: 500;
  font-size: 14.5px; color: #fff;
}
.kd-userlist__verified {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--neon-cyan);
  color: #0a1018;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-userlist__followsyou {
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono); font-size: 10.5px;
  letter-spacing: .02em;
}
.kd-userlist__row-handle {
  font-family: var(--font-mono); font-size: 11.5px;
  color: rgba(255,255,255,0.5);
}
.kd-userlist__row-bio {
  margin-top: 4px;
  font-size: 12.5px; line-height: 1.55;
  color: rgba(255,255,255,0.62);
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}


/* =============================================================
   OnboardingTour.jsx — welcome 3-slide tour
   ============================================================= */
.kd-tour {
  position: fixed; inset: 0;
  background: #06090d;
  color: #f0e9d9;
  font-family: var(--font-body);
  z-index: 110;
  display: flex; align-items: center; justify-content: center;
  padding: 24px 18px;
  box-sizing: border-box;
}
.kd-tour__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.kd-tour__aurora > i {
  position: absolute;
  top: -20%; left: -20%;
  width: 140%; height: 140%;
  filter: blur(90px);
  opacity: 0.45;
  animation: kd-tour-drift 18s ease-in-out infinite alternate;
  transition: background 0.6s ease;
}
@keyframes kd-tour-drift {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(40px,-30px,0) scale(1.06); }
}

.kd-tour__skip {
  position: absolute; top: 24px; inset-inline-end: 24px;
  z-index: 2;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body); font-size: 13px;
  cursor: pointer;
}
.kd-tour__skip:hover { background: rgba(255,255,255,0.10); color: #fff; }

.kd-tour__inner {
  position: relative;
  width: 100%; max-width: 480px;
  display: flex; flex-direction: column; align-items: stretch;
  gap: 18px;
  text-align: center;
}

.kd-tour__art {
  width: 100%;
  margin: 0 auto;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.005));
  border: 1px solid rgba(255,255,255,0.08);
  padding: 18px;
  animation: kd-tour-art-in .5s var(--ease-out) both;
}
@keyframes kd-tour-art-in {
  from { opacity: 0; transform: scale(0.96) translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.kd-tour__art svg { width: 100%; height: auto; display: block; }

.kd-tour__copy { padding: 4px 8px; }
.kd-tour__step {
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--accent, #ff4ea8) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent, #ff4ea8) 28%, transparent);
  color: color-mix(in oklab, var(--accent, #ff4ea8) 60%, #fff);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .02em;
}
.kd-tour__title {
  margin: 0 0 12px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 30px; line-height: 1.2; color: #fff;
  letter-spacing: -0.01em;
}
.kd-tour__sub {
  margin: 0 auto;
  max-width: 380px;
  font-size: 14.5px; line-height: 1.85;
  color: rgba(255,255,255,0.7);
}

.kd-tour__dots {
  display: flex; gap: 8px; justify-content: center;
  margin: 8px 0 4px;
}
.kd-tour__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 0; cursor: pointer; padding: 0;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-tour__dot.is-on {
  width: 26px;
  border-radius: 999px;
  background: var(--grad-hero);
  box-shadow: 0 0 8px rgba(255,78,168,0.4);
}

.kd-tour__nav {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px;
}
.kd-tour__navbtn {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body); font-size: 14px;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 12px; border-radius: 12px;
}
.kd-tour__navbtn:hover { color: var(--neon-cyan); background: rgba(255,255,255,0.04); }
.kd-tour__nav > .kd-btn { min-width: 130px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }


/* =============================================================
   PermissionPrompt.jsx — pre-OS rationale modal
   ============================================================= */
.kd-perm {
  position: fixed; inset: 0;
  z-index: 160;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-body); color: #f0e9d9;
}
.kd-perm__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 10, 0.6);
  backdrop-filter: blur(8px);
  animation: kd-authgate-fade .26s var(--ease-out) both;
}
.kd-perm__sheet {
  position: relative;
  width: 100%; max-width: 440px;
  padding: 14px 26px 24px;
  margin: 0 16px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(20,26,36,0.96), rgba(11,15,22,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -16px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: kd-authgate-slide .42s var(--ease-spring) both;
  text-align: center;
}
.kd-perm__icon {
  width: 64px; height: 64px;
  margin: 6px auto 14px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--accent, #ff4ea8);
  background: color-mix(in oklab, var(--accent, #ff4ea8) 14%, transparent);
  border: 1px solid color-mix(in oklab, var(--accent, #ff4ea8) 30%, transparent);
  box-shadow: 0 0 24px -4px color-mix(in oklab, var(--accent, #ff4ea8) 60%, transparent);
}
.kd-perm__h {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 24px; color: #fff;
  letter-spacing: -0.01em;
}
.kd-perm__sub {
  margin: 0 auto 16px;
  max-width: 340px;
  font-size: 14px; line-height: 1.8;
  color: rgba(255,255,255,0.7);
}
.kd-perm__promise {
  display: flex; gap: 8px; align-items: flex-start;
  text-align: start;
  padding: 12px 14px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: rgba(75,227,255,0.05);
  border: 1px solid rgba(75,227,255,0.18);
}
.kd-perm__promise > svg { color: #7ff0d2; flex-shrink: 0; margin-top: 3px; }
.kd-perm__promise > span {
  font-size: 12.5px; line-height: 1.7;
  color: rgba(255,255,255,0.78);
}
.kd-perm__nav {
  display: flex; gap: 10px; justify-content: stretch;
}
.kd-perm__deny {
  flex: 0 0 auto;
  padding: 12px 18px;
  border-radius: 999px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.78);
  font-family: var(--font-body); font-size: 14px;
  cursor: pointer;
}
.kd-perm__deny:hover { background: rgba(255,255,255,0.10); color: #fff; }
.kd-perm__allow { flex: 1; }
.kd-perm__foot {
  margin: 14px 0 0;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.42);
}
@media (min-width: 720px) {
  .kd-perm { align-items: center; }
  .kd-perm__sheet { border-radius: 28px; animation: kd-authgate-pop .42s var(--ease-spring) both; }
}


/* =============================================================
   Follow request inbox items (P1-05)
   ============================================================= */
.kd-followreq__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kd-followreq__item {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(245,213,137,0.05);
  border: 1px solid rgba(245,213,137,0.20);
}
.kd-followreq__text { flex: 1; min-width: 0; }
.kd-followreq__text strong {
  display: block;
  font-family: var(--font-body); font-weight: 500;
  font-size: 14px; color: #fff;
}
.kd-followreq__handle {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.kd-followreq__bio {
  margin: 4px 0 0;
  font-size: 12.5px; color: rgba(255,255,255,0.62);
  line-height: 1.55;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
}
.kd-followreq__actions { display: flex; gap: 6px; flex-shrink: 0; }
.kd-followreq__actions .kd-btn { display: inline-flex; align-items: center; gap: 4px; }


/* =============================================================
   Comment moderation menu + pin + edit (P1-06/07)
   ============================================================= */
.kd-comment__head { position: relative; display: flex; align-items: center; gap: 8px; }
.kd-comment__more {
  background: transparent; border: 0; cursor: pointer;
  width: 24px; height: 24px; border-radius: 50%;
  color: rgba(255,255,255,0.4);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kd-comment__more:hover { background: rgba(255,255,255,0.06); color: #fff; }

.kd-comment__menu {
  position: absolute; top: 28px; inset-inline-end: 0;
  min-width: 180px;
  padding: 6px;
  border-radius: 12px;
  background: rgba(14, 19, 27, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 14px 38px -8px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(14px);
  z-index: 5;
  animation: kd-explore-menu-in .22s var(--ease-out) both;
}
.kd-comment__menu > button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 12.5px;
  text-align: start; cursor: pointer;
}
.kd-comment__menu > button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.kd-comment__menu > button > svg { flex-shrink: 0; color: rgba(255,255,255,0.55); }

.kd-comment.is-pinned {
  background: linear-gradient(180deg, rgba(245,213,137,0.06), transparent 70%);
  border-radius: 12px;
  padding: 6px;
  margin: -6px -6px 0;
}
.kd-comment__pinned {
  display: inline-flex; align-items: center; gap: 4px;
  margin-bottom: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(245,213,137,0.12);
  border: 1px solid rgba(245,213,137,0.22);
  color: #f5d589;
  font-family: var(--font-mono); font-size: 10px;
}
.kd-comment.is-hidden {
  opacity: 0.55;
}

/* inline editor */
.kd-comment__editor textarea {
  width: 100%;
  min-height: 60px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(75,227,255,0.40);
  box-shadow: 0 0 0 3px rgba(75,227,255,0.10);
  color: #fff;
  font-family: var(--font-body); font-size: 13px; line-height: 1.7;
  outline: none; resize: vertical;
  box-sizing: border-box;
}
.kd-comment__editor-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 6px;
}
.kd-comment__editor-cancel {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.55);
  font-family: var(--font-body); font-size: 12px;
  padding: 6px 8px;
}
.kd-comment__editor-cancel:hover { color: #fff; }


/* =============================================================
   TagPage.jsx + TrendingTags (P1-08 + P2-07)
   ============================================================= */
.kd-tag-page { font-family: var(--font-body); color: #f0e9d9; }

.kd-tag-head {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 22px;
  margin-bottom: 18px;
  border-radius: 22px;
  background:
    radial-gradient(at 100% 0%, color-mix(in oklab, var(--tag-color) 22%, transparent) 0%, transparent 60%),
    rgba(255,255,255,0.025);
  border: 1px solid color-mix(in oklab, var(--tag-color) 24%, rgba(255,255,255,0.08));
  position: relative; overflow: hidden;
}
.kd-tag-head::before {
  content: ""; position: absolute; top: -40px; inset-inline-end: -40px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, var(--tag-color) 0%, transparent 70%);
  opacity: 0.16;
  filter: blur(20px);
  pointer-events: none;
}
.kd-tag-head__main { flex: 1; min-width: 0; position: relative; z-index: 1; }
.kd-tag-head__row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.kd-tag-head__hash {
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  color: var(--tag-color);
  line-height: 1;
}
.kd-tag-head__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 28px; font-weight: 500;
  color: #fff;
  line-height: 1.1;
  letter-spacing: -0.01em;
}
.kd-tag-head__delta {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(75,227,255,0.12);
  border: 1px solid rgba(75,227,255,0.30);
  color: var(--neon-cyan);
  font-family: var(--font-mono); font-size: 11px;
}
.kd-tag-head__desc {
  margin: 0 0 8px;
  font-size: 13.5px; line-height: 1.7;
  color: rgba(255,255,255,0.7);
  max-width: 540px;
}
.kd-tag-head__meta {
  margin: 0;
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 11.5px;
  color: rgba(255,255,255,0.55);
}
.kd-tag-head__meta > svg { color: var(--tag-color); }
.kd-tag-head__follow { flex-shrink: 0; position: relative; z-index: 1; }

/* Trending widget */
.kd-trending {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.kd-trending__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 10px;
}
.kd-trending__head h3 {
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 13.5px;
  color: #fff;
}
.kd-trending__head > h3 > svg { color: #f5d589; }
.kd-trending__all {
  background: transparent; border: 0; cursor: pointer;
  color: var(--neon-cyan);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
}
.kd-trending__all:hover { color: #fff; }

.kd-trending__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.kd-trending__item {
  width: 100%;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 4px;
  background: transparent; border: 0;
  text-align: start; cursor: pointer;
  border-radius: 8px;
  transition: background var(--dur-fast) var(--ease-out);
}
.kd-trending__item:hover { background: rgba(255,255,255,0.04); }
.kd-trending__rank {
  width: 22px;
  font-family: var(--font-display); font-size: 16px; font-weight: 500;
  color: var(--c, #ff4ea8);
  text-align: center;
}
.kd-trending__mid { flex: 1; min-width: 0; }
.kd-trending__mid strong {
  display: block;
  font-family: var(--font-body); font-weight: 500; font-size: 13px;
  color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-trending__count {
  display: block; margin-top: 2px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.45);
}
.kd-trending__delta {
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(75,227,255,0.08);
  color: var(--neon-cyan);
  font-family: var(--font-mono); font-size: 10px;
  flex-shrink: 0;
}


/* =============================================================
   ChallengePage.jsx (P1-09)
   ============================================================= */
.kd-challenge-page {
  max-width: 920px; margin: 0 auto;
  padding: 0 18px 120px;
  font-family: var(--font-body);
  color: #f0e9d9;
}
.kd-challenge-head {
  position: relative;
  padding: 28px 26px 32px;
  margin: 0 -18px 24px;
  border-radius: 0 0 28px 28px;
  text-align: center;
  overflow: hidden;
}
.kd-challenge-head::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 0%, rgba(6,9,13,0.16) 80%, rgba(6,9,13,0.6) 100%);
  pointer-events: none;
}
.kd-challenge-head > * { position: relative; z-index: 1; }
.kd-challenge-head__back {
  position: absolute; top: 14px; inset-inline-start: 14px;
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.kd-challenge-head__back:hover { background: rgba(255,255,255,0.28); }
.kd-challenge-head__lbl {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 14px;
  border-radius: 999px;
  background: rgba(0,0,0,0.25);
  border: 1px solid rgba(255,255,255,0.22);
  color: rgba(255,255,255,0.92);
  font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .04em;
}
.kd-challenge-head__emoji {
  font-size: 56px; line-height: 1;
  margin-bottom: 12px;
  text-shadow: 0 4px 14px rgba(0,0,0,0.35);
}
.kd-challenge-head__title {
  margin: 0 0 8px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 38px; line-height: 1.15;
  color: #fff;
  letter-spacing: -0.01em;
  text-shadow: 0 2px 6px rgba(0,0,0,0.32);
}
.kd-challenge-head__intro {
  margin: 0 auto 22px;
  max-width: 520px;
  font-size: 14.5px; line-height: 1.85;
  color: rgba(255,255,255,0.92);
  text-shadow: 0 1px 2px rgba(0,0,0,0.22);
}
.kd-challenge-head__meta {
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.kd-challenge-meta-card {
  padding: 12px 18px;
  border-radius: 14px;
  background: rgba(0,0,0,0.30);
  border: 1px solid rgba(255,255,255,0.16);
  backdrop-filter: blur(8px);
  text-align: center;
  min-width: 130px;
}
.kd-challenge-meta-card__big {
  display: block;
  font-family: var(--font-body); font-weight: 600;
  font-size: 16px; color: #fff;
  font-variant-numeric: tabular-nums;
}
.kd-challenge-meta-card__big b { font-size: 22px; font-weight: 600; }
.kd-challenge-meta-card__sub {
  display: block; margin-top: 4px;
  font-size: 11.5px; color: rgba(255,255,255,0.75);
}

.kd-challenge-section { margin-bottom: 28px; }
.kd-challenge-h {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 500;
  font-size: 22px; color: #fff;
  letter-spacing: -0.01em;
}

.kd-challenge-rules { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.kd-challenge-rules li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.85);
  font-size: 14px; line-height: 1.7;
}
.kd-challenge-rules__num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,138,61,0.15);
  border: 1px solid rgba(255,138,61,0.30);
  color: #ffb27a;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 500; font-size: 14px;
  flex-shrink: 0;
}

.kd-challenge-prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.kd-challenge-prize {
  padding: 16px;
  border-radius: 16px;
  background:
    radial-gradient(at 100% 0%, color-mix(in oklab, var(--c, #f5d589) 22%, transparent), transparent 60%),
    rgba(255,255,255,0.025);
  border: 1px solid color-mix(in oklab, var(--c, #f5d589) 30%, rgba(255,255,255,0.08));
  display: flex; flex-direction: column; gap: 6px;
}
.kd-challenge-prize__rank {
  font-family: var(--font-mono); font-size: 11px;
  color: var(--c, #f5d589);
  letter-spacing: .02em;
}
.kd-challenge-prize__lbl {
  font-family: var(--font-body); font-weight: 500;
  font-size: 15px; color: #fff;
  line-height: 1.5;
}

.kd-challenge-submit {
  position: fixed; bottom: 0; left: 0; right: 0;
  padding: 14px 16px 24px;
  background: linear-gradient(180deg, transparent, rgba(6,9,13,0.92));
  z-index: 50;
}
.kd-challenge-submit__inner {
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  padding: 14px 20px;
  border-radius: 18px;
  background: rgba(20, 26, 36, 0.92);
  border: 1px solid rgba(255,138,61,0.32);
  backdrop-filter: blur(14px);
  box-shadow: 0 12px 38px -8px rgba(0,0,0,0.5);
}
.kd-challenge-submit__inner strong {
  display: block;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: #fff;
}
.kd-challenge-submit__inner span {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: rgba(255,255,255,0.65);
}


/* =============================================================
   PromotePost.jsx — promoted posts + payment (P1-10)
   ============================================================= */
.kd-promote {
  position: fixed; inset: 0;
  z-index: 170;
  display: flex; align-items: flex-end; justify-content: center;
  font-family: var(--font-body); color: #f0e9d9;
}
.kd-promote__backdrop {
  position: absolute; inset: 0;
  background: rgba(4, 6, 10, 0.62);
  backdrop-filter: blur(8px);
  animation: kd-authgate-fade .26s var(--ease-out) both;
}
.kd-promote__sheet {
  position: relative;
  width: 100%; max-width: 520px;
  padding: 16px 24px 24px;
  margin: 0 16px;
  border-radius: 28px 28px 0 0;
  background: linear-gradient(180deg, rgba(20,26,36,0.96), rgba(11,15,22,0.98));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -16px 60px -20px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: kd-authgate-slide .42s var(--ease-spring) both;
  max-height: 90vh; overflow-y: auto;
}
.kd-promote__steps {
  display: flex; align-items: center; gap: 6px;
  margin: 6px 0 18px;
}
.kd-promote__step {
  width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.5);
  font-family: var(--font-mono); font-size: 12px;
}
.kd-promote__step.is-on { background: var(--grad-hero); border-color: transparent; color: #fff; box-shadow: 0 0 12px rgba(255,78,168,0.4); }
.kd-promote__step.is-done { background: rgba(75,227,255,0.14); border-color: rgba(75,227,255,0.3); color: var(--neon-cyan); }

.kd-promote__h3 {
  margin: 16px 2px 10px;
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .08em;
  color: rgba(255,255,255,0.5);
}
.kd-promote__budgets { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.kd-promote__budget {
  position: relative;
  display: flex; flex-direction: column; gap: 3px;
  padding: 14px 14px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  text-align: start; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-promote__budget:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.22); }
.kd-promote__budget.is-on {
  background: linear-gradient(180deg, rgba(255,78,168,0.12), rgba(154,108,255,0.08));
  border-color: rgba(255,78,168,0.45);
  box-shadow: 0 0 0 1px rgba(255,78,168,0.2), 0 8px 24px -10px rgba(255,78,168,0.5);
}
.kd-promote__badge {
  position: absolute; top: -8px; inset-inline-start: 12px;
  padding: 2px 9px; border-radius: 999px;
  background: var(--grad-hero); color: #fff;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
}
.kd-promote__badge--sm { position: static; padding: 1px 6px; margin-inline-start: 6px; }
.kd-promote__budget-amount { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff; }
.kd-promote__budget-reach { font-family: var(--font-mono); font-size: 11px; color: var(--neon-cyan); }
.kd-promote__budget-desc { font-size: 11.5px; color: rgba(255,255,255,0.5); }

.kd-promote__durations { display: flex; gap: 8px; }
.kd-promote__duration {
  flex: 1;
  padding: 12px; border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 13.5px; font-weight: 500;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-promote__duration:hover { background: rgba(255,255,255,0.05); }
.kd-promote__duration.is-on {
  background: rgba(75,227,255,0.10); border-color: rgba(75,227,255,0.40); color: var(--neon-cyan);
}

.kd-promote__nav {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 22px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.kd-promote__total { font-size: 14px; color: rgba(255,255,255,0.7); }
.kd-promote__total b { color: #fff; font-weight: 600; font-size: 17px; }
.kd-promote__nav .kd-btn { display: inline-flex; align-items: center; gap: 6px; }

.kd-promote__review {
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.kd-promote__review-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  font-size: 13.5px;
}
.kd-promote__review-row:last-child { border-bottom: 0; }
.kd-promote__review-row span { color: rgba(255,255,255,0.6); }
.kd-promote__review-row b { color: #fff; font-weight: 500; }
.kd-promote__review-row--total { padding-top: 14px; }
.kd-promote__review-row--total span { color: #fff; font-weight: 500; }
.kd-promote__review-row--total b { color: var(--neon-cyan); font-size: 18px; font-weight: 600; }

.kd-promote__gateways { display: flex; flex-direction: column; gap: 8px; }
.kd-promote__gateway {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.10);
  color: #fff;
  font-family: var(--font-body); font-size: 14px;
  cursor: pointer; text-align: start;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-promote__gateway:hover { background: rgba(255,255,255,0.05); }
.kd-promote__gateway.is-on { border-color: rgba(75,227,255,0.40); background: rgba(75,227,255,0.06); }
.kd-promote__gateway-glyph {
  width: 36px; height: 36px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.kd-promote__gateway > span:nth-child(2) { flex: 1; }
.kd-promote__radio {
  width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.30);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kd-promote__gateway.is-on .kd-promote__radio { border-color: var(--neon-cyan); }
.kd-promote__radio > i { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-cyan); }
.kd-promote__pay-summary { margin: 16px 0 0; text-align: center; font-size: 14px; color: rgba(255,255,255,0.7); }
.kd-promote__pay-summary b { color: #fff; font-size: 17px; }
.kd-promote__pay-foot {
  margin: 12px 0 0; text-align: center;
  font-family: var(--font-mono); font-size: 10.5px;
  color: rgba(255,255,255,0.42); line-height: 1.6;
}

.kd-promote__done { text-align: center; padding-top: 8px; }
.kd-promote__dash {
  margin-top: 18px;
  padding: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  text-align: start;
}
.kd-promote__dash-h {
  font-family: var(--font-mono); font-size: 11px;
  text-transform: uppercase; letter-spacing: .06em;
  color: rgba(255,255,255,0.5);
  margin-bottom: 12px;
}
.kd-promote__dash-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.kd-promote__dash-grid > div {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px; border-radius: 10px;
  background: rgba(255,255,255,0.03);
}
.kd-promote__dash-grid b { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff; }
.kd-promote__dash-grid span { font-size: 10.5px; color: rgba(255,255,255,0.5); }
.kd-promote__dash-foot { margin: 12px 0 0; font-size: 11.5px; color: rgba(255,255,255,0.5); text-align: center; }

@media (min-width: 720px) {
  .kd-promote { align-items: center; }
  .kd-promote__sheet { border-radius: 28px; animation: kd-authgate-pop .42s var(--ease-spring) both; }
}
@media (max-width: 460px) {
  .kd-promote__budgets { grid-template-columns: 1fr; }
}


/* promote entry inside share sheet (P1-10) */
.kd-share__promote {
  display: flex; align-items: center; gap: 12px;
  width: 100%;
  margin-top: 10px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(255,138,61,0.12), rgba(255,78,168,0.10));
  border: 1px solid rgba(255,138,61,0.32);
  color: #fff;
  cursor: pointer; text-align: start;
  font-family: var(--font-body);
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-share__promote:hover { border-color: rgba(255,138,61,0.5); filter: brightness(1.06); }
.kd-share__promote-icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: rgba(255,138,61,0.18);
  color: #ffb27a;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-share__promote-text { flex: 1; min-width: 0; }
.kd-share__promote-text strong { display: block; font-weight: 600; font-size: 14px; color: #fff; }
.kd-share__promote-text span { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,0.62); }


/* =============================================================
   AdSlot.jsx — Tapsell-style native ad (P1-11)
   ============================================================= */
.kd-ad {
  break-inside: avoid;
  margin-bottom: 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(245,213,137,0.20);
  overflow: hidden;
  font-family: var(--font-body);
  position: relative;
}
.kd-ad__head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  position: relative;
}
.kd-ad__glyph {
  width: 32px; height: 32px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 15px;
  flex-shrink: 0;
}
.kd-ad__id { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.kd-ad__id strong { font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: #fff; }
.kd-ad__tag {
  padding: 2px 8px; border-radius: 999px;
  background: rgba(245,213,137,0.14);
  border: 1px solid rgba(245,213,137,0.28);
  color: #f5d589;
  font-family: var(--font-mono); font-size: 9.5px;
}
.kd-ad__more {
  width: 26px; height: 26px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.5);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-ad__more:hover { background: rgba(255,255,255,0.06); color: #fff; }
.kd-ad__menu { top: 40px; min-width: 220px; }

.kd-ad__media {
  position: relative;
  aspect-ratio: 16 / 10;
}
.kd-ad__sponsored {
  position: absolute; bottom: 8px; inset-inline-end: 10px;
  padding: 2px 8px; border-radius: 6px;
  background: rgba(0,0,0,0.4);
  color: rgba(255,255,255,0.7);
  font-family: var(--font-mono); font-size: 9px;
  letter-spacing: .04em;
}
.kd-ad__body { padding: 12px 14px 14px; }
.kd-ad__headline {
  margin: 0 0 5px;
  font-family: var(--font-body); font-weight: 600; font-size: 15px;
  color: #fff; line-height: 1.4;
}
.kd-ad__text {
  margin: 0 0 12px;
  font-size: 13px; line-height: 1.65;
  color: rgba(255,255,255,0.65);
}
.kd-ad__cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
  color: #fff;
  font-family: var(--font-body); font-size: 13px; font-weight: 600;
  cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-ad__cta:hover { background: rgba(245,213,137,0.12); border-color: rgba(245,213,137,0.4); color: #f5d589; }

.kd-ad--hidden {
  break-inside: avoid;
  margin-bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  padding: 18px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.6);
  font-size: 12.5px;
}
.kd-ad--hidden > svg { color: #7ff0d2; flex-shrink: 0; }
.kd-ad--hidden > button {
  margin-inline-start: auto;
  background: transparent; border: 0; cursor: pointer;
  color: var(--neon-cyan); font-family: var(--font-body); font-size: 12.5px; font-weight: 600;
}

.kd-ad__why {
  position: fixed; inset: 0; z-index: 180;
  background: rgba(4,6,10,0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: kd-authgate-fade .26s var(--ease-out) both;
}
.kd-ad__why-card {
  width: 100%; max-width: 360px;
  padding: 22px;
  border-radius: 20px;
  background: rgba(20,26,36,0.98);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 24px 60px -16px rgba(0,0,0,0.7);
}
.kd-ad__why-card h4 {
  margin: 0 0 14px;
  font-family: var(--font-display); font-weight: 500; font-size: 18px; color: #fff;
}
.kd-ad__why-card ul { list-style: none; padding: 0; margin: 0 0 14px; display: flex; flex-direction: column; gap: 8px; }
.kd-ad__why-card li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: rgba(255,255,255,0.82);
}
.kd-ad__why-card li > svg { color: var(--neon-cyan); flex-shrink: 0; }
.kd-ad__why-card p {
  margin: 0 0 16px;
  font-size: 12px; line-height: 1.7;
  color: rgba(255,255,255,0.55);
}


/* =============================================================
   PushManager.jsx — opt-in banner + in-app toast (P1-12)
   ============================================================= */
.kd-pushoptin {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(245,213,137,0.10), rgba(255,78,168,0.08));
  border: 1px solid rgba(245,213,137,0.26);
  font-family: var(--font-body);
  animation: kd-skel-pop .4s var(--ease-out) both;
}
.kd-pushoptin__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(245,213,137,0.16);
  color: #f5d589;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-pushoptin__text { flex: 1; min-width: 0; }
.kd-pushoptin__text strong { display: block; font-weight: 600; font-size: 14px; color: #fff; }
.kd-pushoptin__text span { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,0.66); line-height: 1.5; }
.kd-pushoptin__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.kd-pushoptin__no {
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.6);
  font-family: var(--font-body); font-size: 13px;
  padding: 8px 10px;
}
.kd-pushoptin__no:hover { color: #fff; }
@media (max-width: 560px) {
  .kd-pushoptin { flex-wrap: wrap; }
  .kd-pushoptin__actions { width: 100%; justify-content: flex-end; }
}

/* in-app toast */
.kd-pushtoast-stack {
  position: fixed; top: 12px; left: 0; right: 0;
  z-index: 220;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  pointer-events: none;
  padding: 0 12px;
}
.kd-pushtoast {
  pointer-events: auto;
  width: 100%; max-width: 420px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 12px 12px 14px;
  border-radius: 16px;
  background: rgba(20, 26, 36, 0.96);
  border: 1px solid color-mix(in oklab, var(--accent, #ff4ea8) 30%, rgba(255,255,255,0.10));
  box-shadow: 0 16px 44px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  font-family: var(--font-body);
  animation: kd-pushtoast-in .42s var(--ease-spring) both;
}
@keyframes kd-pushtoast-in {
  from { transform: translateY(-120%); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.kd-pushtoast__icon {
  width: 40px; height: 40px; border-radius: 11px;
  background: color-mix(in oklab, var(--accent, #ff4ea8) 16%, transparent);
  color: var(--accent, #ff4ea8);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-pushtoast__body { flex: 1; min-width: 0; }
.kd-pushtoast__body strong { display: block; font-weight: 600; font-size: 13.5px; color: #fff; }
.kd-pushtoast__body span {
  display: block; margin-top: 2px;
  font-size: 12.5px; color: rgba(255,255,255,0.7); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.kd-pushtoast__close {
  width: 24px; height: 24px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.5);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.kd-pushtoast__close:hover { background: rgba(255,255,255,0.08); color: #fff; }


/* PostView header 3-dot menu (fix) */
.kd-post-head__morewrap { position: relative; }
.kd-post-head__menu {
  position: absolute; top: 42px; inset-inline-end: 0;
  min-width: 230px;
  padding: 6px;
  border-radius: 14px;
  background: rgba(14, 19, 27, 0.97);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 20px 48px -10px rgba(0,0,0,0.72), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  z-index: 20;
  opacity: 1;
  animation: kd-menu-pop .2s var(--ease-out);
}
@keyframes kd-menu-pop {
  from { transform: translateY(-4px) scale(0.97); }
  to   { transform: none; }
}
.kd-post-head__menu > button {
  display: flex; align-items: center; gap: 8px;
  width: 100%;
  padding: 9px 10px;
  border-radius: 10px;
  background: transparent; border: 0;
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 13px;
  text-align: start; cursor: pointer;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.kd-post-head__menu > button:hover { background: rgba(255,255,255,0.06); color: #fff; }
.kd-post-head__menu > button > svg { flex-shrink: 0; color: rgba(255,255,255,0.55); }
.kd-post-head__menu > button:hover > svg { color: var(--neon-cyan); }
.kd-post-head__menu .kd-explore-menu__report:hover > svg { color: #ff5774 !important; }


/* =============================================================
   AdSlot.jsx — Tapsell external ads (logged-out only) (P1-11)
   ============================================================= */
.kd-ad {
  position: relative;
  font-family: var(--font-body);
  border-radius: 18px;
  border: 1px solid color-mix(in oklab, var(--brand, #ff4ea8) 26%, rgba(255,255,255,0.08));
  background:
    radial-gradient(at 100% 0%, color-mix(in oklab, var(--brand, #ff4ea8) 12%, transparent), transparent 55%),
    rgba(255,255,255,0.025);
  overflow: hidden;
}
.kd-ad__label {
  position: absolute; top: 10px; inset-inline-start: 10px;
  z-index: 2;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.78);
  font-family: var(--font-mono); font-size: 9.5px;
  letter-spacing: .04em;
}
.kd-ad__glyph {
  width: 38px; height: 38px; border-radius: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 700; font-size: 18px;
  flex-shrink: 0;
}

/* ----- feed native card ----- */
.kd-ad--feed { padding: 14px; break-inside: avoid; }
.kd-ad__top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.kd-ad__brand { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kd-ad__brand strong { font-family: var(--font-body); font-weight: 600; font-size: 13.5px; color: #fff; }
.kd-ad__brand span { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.45); margin-top: 1px; }
.kd-ad__close {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.6); cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kd-ad__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.kd-ad__creative {
  position: relative;
  height: 150px;
  border-radius: 12px;
  overflow: hidden;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand) 30%, #0a1018), #0a1018);
  display: flex; align-items: flex-end;
  padding: 16px;
  margin-bottom: 12px;
}
.kd-ad__creative-glow {
  position: absolute; top: -40px; inset-inline-end: -40px;
  width: 160px; height: 160px; border-radius: 50%;
  filter: blur(40px); opacity: 0.5;
}
.kd-ad__creative-text { position: relative; z-index: 1; }
.kd-ad__creative-text h4 {
  margin: 0 0 4px;
  font-family: var(--font-display); font-weight: 500; font-size: 20px;
  color: #fff; letter-spacing: -0.01em;
}
.kd-ad__creative-text p {
  margin: 0; font-size: 13px; line-height: 1.6;
  color: rgba(255,255,255,0.82); max-width: 90%;
}

.kd-ad__cta {
  padding: 9px 18px; border-radius: 999px;
  background: var(--brand, #ff4ea8); color: #fff;
  border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 13px;
  white-space: nowrap;
}
.kd-ad__cta:hover { filter: brightness(1.08); }
.kd-ad__cta--block { width: 100%; }
.kd-ad__foot { margin-bottom: 10px; }

.kd-ad__noads {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  background: rgba(75,227,255,0.06);
  border: 1px dashed rgba(75,227,255,0.24);
  color: var(--neon-cyan);
  font-family: var(--font-body); font-size: 12px; font-weight: 500;
  cursor: pointer;
}
.kd-ad__noads:hover { background: rgba(75,227,255,0.12); color: #fff; }
.kd-ad__noads > svg { flex-shrink: 0; }

/* ----- slim banner ----- */
.kd-ad--banner {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 14px;
  border-radius: 14px;
}
.kd-ad--banner .kd-ad__label {
  position: static;
  background: rgba(255,255,255,0.06);
}
.kd-ad__bannertext { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kd-ad__bannertext strong {
  font-family: var(--font-body); font-weight: 500; font-size: 13.5px; color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.kd-ad__bannertext span { font-family: var(--font-mono); font-size: 10px; color: rgba(255,255,255,0.45); }
.kd-ad--banner .kd-ad__cta { padding: 7px 14px; font-size: 12px; }


/* =============================================================
   Settings sub-screens: Appearance, Sessions, Help, About, Legal
   (P2-03, P2-01, P1-13)
   ============================================================= */
/* ----- Appearance ----- */
.kd-appear__themes { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 6px; }
.kd-appear__theme {
  position: relative;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 12px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  font-family: var(--font-body); font-size: 12.5px; cursor: pointer;
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-appear__theme:hover { background: rgba(255,255,255,0.05); }
.kd-appear__theme.is-on { border-color: rgba(75,227,255,0.45); background: rgba(75,227,255,0.06); color: #fff; }
.kd-appear__theme-swatch { width: 100%; height: 44px; border-radius: 10px; border: 1px solid rgba(255,255,255,0.10); }
.kd-appear__theme-check {
  position: absolute; top: 8px; inset-inline-end: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--neon-cyan); color: #0a1018;
  display: inline-flex; align-items: center; justify-content: center;
}
.kd-appear__accents { display: flex; gap: 10px; margin-bottom: 6px; }
.kd-appear__accent {
  width: 44px; height: 44px; border-radius: 50%;
  background: transparent; border: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  position: relative;
}
.kd-appear__accent > span {
  width: 100%; height: 100%; border-radius: 50%;
  border: 2px solid rgba(255,255,255,0.16);
}
.kd-appear__accent.is-on > span { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,0.18); }
.kd-appear__accent > svg { position: absolute; color: #fff; }
.kd-appear__slider { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.kd-appear__slider-a { font-size: 13px; color: rgba(255,255,255,0.5); }
.kd-appear__slider-b { font-size: 22px; color: rgba(255,255,255,0.5); }
.kd-appear__slider input[type=range] {
  flex: 1; -webkit-appearance: none; appearance: none; height: 6px; border-radius: 999px;
  background: rgba(255,255,255,0.12); outline: none;
}
.kd-appear__slider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--grad-hero); cursor: pointer; box-shadow: 0 2px 10px rgba(255,78,168,0.5);
}
.kd-appear__slider input[type=range]::-moz-range-thumb {
  width: 22px; height: 22px; border: 0; border-radius: 50%;
  background: #ff4ea8; cursor: pointer;
}
.kd-appear__preview {
  margin: 0 0 4px; padding: 14px;
  border-radius: 12px; background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.10);
  color: #fff; line-height: 1.7;
}

/* ----- Sessions ----- */
.kd-sessions { display: flex; flex-direction: column; gap: 8px; }
.kd-session {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
}
.kd-session.is-current { border-color: rgba(75,227,255,0.30); background: rgba(75,227,255,0.05); }
.kd-session.is-sus { border-color: rgba(255,87,116,0.30); background: rgba(255,87,116,0.05); }
.kd-session__icon {
  width: 42px; height: 42px; border-radius: 12px;
  background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kd-session.is-sus .kd-session__icon { background: rgba(255,87,116,0.12); color: #ff8aa0; }
.kd-session__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.kd-session__text strong { font-weight: 500; font-size: 14px; color: #fff; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.kd-session__text span { font-size: 12px; color: rgba(255,255,255,0.55); }
.kd-session__last { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4) !important; }
.kd-session__badge {
  padding: 1px 7px; border-radius: 999px;
  background: rgba(75,227,255,0.14); color: var(--neon-cyan);
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600;
}
.kd-session__badge--sus { background: rgba(255,87,116,0.14); color: #ff8aa0; }
.kd-session__revoke {
  padding: 6px 14px; border-radius: 999px;
  background: rgba(255,87,116,0.08); border: 1px solid rgba(255,87,116,0.28);
  color: #ff8aa0; font-family: var(--font-body); font-size: 12px; font-weight: 500;
  cursor: pointer; flex-shrink: 0;
}
.kd-session__revoke:hover { background: rgba(255,87,116,0.16); color: #fff; }

/* ----- Help ----- */
.kd-help__search {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; margin-bottom: 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
}
.kd-help__search > svg { color: rgba(255,255,255,0.45); }
.kd-help__search input { flex: 1; background: transparent; border: 0; outline: none; color: #fff; font-family: var(--font-body); font-size: 14px; }
.kd-help__search input::placeholder { color: rgba(255,255,255,0.4); }
.kd-help__faq { display: flex; flex-direction: column; gap: 6px; }
.kd-help__item {
  border-radius: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  overflow: hidden;
}
.kd-help__item.is-open { border-color: rgba(75,227,255,0.24); }
.kd-help__q {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 14px;
  background: transparent; border: 0; cursor: pointer;
  color: #fff; font-family: var(--font-body); font-size: 14px; font-weight: 500;
  text-align: start;
}
.kd-help__q > svg { color: rgba(255,255,255,0.5); flex-shrink: 0; transition: transform var(--dur-fast) var(--ease-out); }
.kd-help__a {
  margin: 0; padding: 0 14px 14px;
  font-size: 13px; line-height: 1.8; color: rgba(255,255,255,0.7);
}
.kd-help__contact { display: flex; gap: 8px; }
.kd-help__contact-btn {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-family: var(--font-body); font-size: 13.5px; font-weight: 500; cursor: pointer;
}
.kd-help__contact-btn:hover { background: rgba(255,255,255,0.08); border-color: rgba(75,227,255,0.30); }
.kd-help__contact-btn > svg { color: var(--neon-cyan); }

/* ----- About ----- */
.kd-about { text-align: center; }
.kd-about__logo { margin: 8px 0 14px; }
.kd-about__logo img { height: 64px; width: auto; opacity: 0.95; }
.kd-about__name { margin: 0 0 4px; font-family: var(--font-display); font-weight: 500; font-size: 26px; color: #fff; }
.kd-about__ver { margin: 0 0 18px; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,0.5); }
.kd-about__mission { margin: 0 auto 22px; max-width: 440px; font-size: 14px; line-height: 1.9; color: rgba(255,255,255,0.78); }
.kd-about__links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 22px; }
.kd-about__links button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12);
  color: #fff; font-family: var(--font-body); font-size: 13px; cursor: pointer;
}
.kd-about__links button:hover { background: rgba(255,255,255,0.10); }
.kd-about__links button > svg { color: var(--neon-cyan); }
.kd-about__copy { margin: 0; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.35); }

/* ----- Legal ----- */
.kd-legal__tabs { display: flex; gap: 6px; margin-bottom: 16px; }
.kd-legal__tabs button {
  flex: 1; padding: 9px; border-radius: 10px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.65); font-family: var(--font-body); font-size: 12.5px; cursor: pointer;
}
.kd-legal__tabs button.is-on { background: rgba(125,106,212,0.12); border-color: rgba(125,106,212,0.4); color: #fff; }
.kd-legal__body p { margin: 0 0 14px; font-size: 13.5px; line-height: 1.9; color: rgba(255,255,255,0.75); }
.kd-legal__updated { margin: 8px 0 0; font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.4); }


/* =============================================================
   AppBanners.jsx (P2-08) + BannedState.jsx (P2-09)
   ============================================================= */
.kd-installbar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 120;
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 28px); max-width: 460px;
  padding: 12px 12px 12px 16px;
  border-radius: 18px;
  background: rgba(16, 21, 30, 0.97);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 18px 48px -12px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(16px);
  font-family: var(--font-body);
  animation: kd-installbar-in .5s var(--ease-spring) both;
}
@keyframes kd-installbar-in { from { opacity: 0; transform: translate(-50%, 24px); } to { opacity: 1; transform: translate(-50%, 0); } }
.kd-installbar__logo { width: 40px; height: 40px; border-radius: 11px; flex-shrink: 0; }
.kd-installbar__text { flex: 1; min-width: 0; }
.kd-installbar__text strong { display: block; font-weight: 600; font-size: 14px; color: #fff; }
.kd-installbar__text span { display: block; margin-top: 1px; font-size: 12px; color: rgba(255,255,255,0.62); line-height: 1.5; }
.kd-installbar__cta {
  padding: 9px 18px; border-radius: 999px;
  background: var(--grad-hero); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 13px; flex-shrink: 0;
  box-shadow: 0 4px 14px -4px rgba(255,78,168,0.5);
}
.kd-installbar__cta:hover { filter: brightness(1.08); }
.kd-installbar__close {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 0; color: rgba(255,255,255,0.55);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kd-installbar__close:hover { background: rgba(255,255,255,0.12); color: #fff; }

.kd-updatebar {
  position: fixed; left: 50%; top: 16px; transform: translateX(-50%);
  z-index: 310;
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 28px); max-width: 460px;
  padding: 12px 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(75,227,255,0.14), rgba(68,227,184,0.10));
  border: 1px solid rgba(75,227,255,0.30);
  box-shadow: 0 16px 44px -12px rgba(0,0,0,0.5);
  backdrop-filter: blur(16px);
  font-family: var(--font-body);
  animation: kd-pushtoast-in .4s var(--ease-spring) both;
}
.kd-updatebar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--neon-cyan); box-shadow: 0 0 0 0 rgba(75,227,255,0.6); animation: kd-login-pulse 1.4s ease-out infinite; flex-shrink: 0; }
.kd-updatebar__text { flex: 1; min-width: 0; }
.kd-updatebar__text strong { display: block; font-weight: 600; font-size: 13.5px; color: #fff; }
.kd-updatebar__text span { display: block; margin-top: 1px; font-size: 12px; color: rgba(255,255,255,0.7); }
.kd-updatebar__cta {
  padding: 8px 14px; border-radius: 999px;
  background: var(--neon-cyan); color: #06121a; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px; flex-shrink: 0;
}
.kd-updatebar__later {
  background: transparent; border: 0; color: rgba(255,255,255,0.6);
  font-family: var(--font-body); font-size: 12.5px; cursor: pointer; flex-shrink: 0;
}
.kd-updatebar__later:hover { color: #fff; }

/* ----- Banned / Suspended ----- */
.kd-banned {
  position: fixed; inset: 0;
  background: #06090d;
  color: #f0e9d9;
  font-family: var(--font-body);
  z-index: 115;
  overflow: auto;
  display: flex; align-items: safe center; justify-content: center;
  padding: 32px 16px; box-sizing: border-box;
}
.kd-banned__aurora { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0.4; }
.kd-banned__aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); opacity: 0.4; }
.kd-banned__aurora .kd-login__aurora-1 { background: radial-gradient(circle, #ff5774 0%, transparent 65%); }
.kd-banned__aurora .kd-login__aurora-2 { background: radial-gradient(circle, #9a6cff 0%, transparent 65%); }
.kd-banned__inner {
  position: relative; width: 100%; max-width: 480px;
  padding: 32px 28px;
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.012));
  border: 1px solid rgba(255,87,116,0.18);
  backdrop-filter: blur(22px);
  box-shadow: 0 12px 60px -20px rgba(0,0,0,0.6), 0 0 60px -20px rgba(255,87,116,0.16);
  text-align: center;
  animation: kd-login-card-in .42s var(--ease-out) both;
}
.kd-banned__badge {
  width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%;
  background: rgba(245,213,137,0.10); border: 1.5px solid rgba(245,213,137,0.40); color: #f5d589;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0 30px -6px rgba(245,213,137,0.4);
}
.kd-banned__badge.is-perm { background: rgba(255,87,116,0.10); border-color: rgba(255,87,116,0.42); color: #ff5774; box-shadow: 0 0 30px -6px rgba(255,87,116,0.45); }
.kd-banned__h { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 28px; color: #fff; letter-spacing: -0.01em; }
.kd-banned__sub { margin: 0 auto 20px; max-width: 400px; font-size: 14px; line-height: 1.85; color: rgba(255,255,255,0.7); }
.kd-banned__reason {
  text-align: start; padding: 14px 16px; margin-bottom: 16px;
  border-radius: 14px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
}
.kd-banned__reason-lbl { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: rgba(255,255,255,0.45); }
.kd-banned__reason p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.7; color: rgba(255,255,255,0.82); }
.kd-banned__countdown {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 16px 32px; margin-bottom: 18px;
  border-radius: 18px; background: rgba(245,213,137,0.06); border: 1px solid rgba(245,213,137,0.24);
}
.kd-banned__count-num { font-family: var(--font-display); font-size: 44px; font-weight: 500; color: #f5d589; line-height: 1; }
.kd-banned__count-lbl { font-size: 12px; color: rgba(255,255,255,0.6); }
.kd-banned__what { text-align: start; margin-bottom: 22px; }
.kd-banned__what h3 { margin: 0 0 10px; font-family: var(--font-body); font-weight: 600; font-size: 14px; color: #fff; }
.kd-banned__what ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.kd-banned__what li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,0.75); }
.kd-banned__what li > svg { margin-top: 3px; flex-shrink: 0; color: #7ff0d2; }
.kd-banned__actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
.kd-banned__actions .kd-btn { width: 100%; }
.kd-banned__logout { background: transparent; border: 0; color: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 13px; cursor: pointer; padding: 8px; }
.kd-banned__logout:hover { color: #fff; }
.kd-banned__foot { margin: 18px 0 0; font-size: 12px; color: rgba(255,255,255,0.5); }
.kd-banned__foot a { color: var(--neon-cyan); text-decoration: none; }


/* States gallery → full-takeover previews (banned) */
.kd-states-gallery__fulltakes { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 10px; margin-bottom: 24px; }
.kd-states-fulltake {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: 16px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.08);
  color: #fff; font-family: var(--font-body); cursor: pointer; text-align: start;
}
.kd-states-fulltake:hover { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.18); }
.kd-states-fulltake__icon {
  width: 38px; height: 38px; border-radius: 11px;
  background: color-mix(in oklab, var(--c) 16%, transparent); color: var(--c);
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.kd-states-fulltake > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; }
.kd-states-fulltake strong { font-weight: 600; font-size: 14px; }
.kd-states-fulltake em { font-style: normal; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.kd-states-fulltake > svg { color: rgba(255,255,255,0.4); }


/* =============================================================
   PeopleYouMayKnow.jsx — suggestion carousel (P2-06)
   ============================================================= */
.kd-pymk { margin: 4px 0 8px; font-family: var(--font-body); }
.kd-pymk__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.kd-pymk__head h3 {
  display: inline-flex; align-items: center; gap: 7px; margin: 0;
  font-family: var(--font-body); font-weight: 600; font-size: 15px; color: #fff;
}
.kd-pymk__head h3 > svg { color: var(--neon-magenta); }
.kd-pymk__all { background: transparent; border: 0; cursor: pointer; color: var(--neon-cyan); font-family: var(--font-body); font-size: 12.5px; font-weight: 500; }
.kd-pymk__all:hover { color: #fff; }

.kd-pymk__rail {
  display: flex; gap: 12px; overflow-x: auto;
  padding: 4px 2px 12px; margin: 0 -2px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.kd-pymk__rail::-webkit-scrollbar { display: none; }

.kd-pymk__card {
  position: relative;
  flex: 0 0 auto; width: 160px;
  scroll-snap-align: start;
  padding: 18px 14px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
.kd-pymk__card:hover { border-color: rgba(255,255,255,0.18); transform: translateY(-2px); }
.kd-pymk__dismiss {
  position: absolute; top: 8px; inset-inline-start: 8px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 0; color: rgba(255,255,255,0.5);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.kd-pymk__dismiss:hover { background: rgba(255,255,255,0.12); color: #fff; }
.kd-pymk__avatar { background: transparent; border: 0; cursor: pointer; padding: 0; margin-bottom: 10px; }
.kd-pymk__name { display: flex; align-items: center; gap: 5px; }
.kd-pymk__name strong { font-weight: 500; font-size: 14px; color: #fff; cursor: pointer; }
.kd-pymk__name strong:hover { color: var(--neon-cyan); }
.kd-pymk__handle { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 1px; }
.kd-pymk__reason {
  margin: 8px 0 4px;
  padding: 3px 9px; border-radius: 999px;
  background: color-mix(in oklab, var(--c, #4be3ff) 12%, transparent);
  border: 1px solid color-mix(in oklab, var(--c, #4be3ff) 28%, transparent);
  color: color-mix(in oklab, var(--c, #4be3ff) 65%, #fff);
  font-size: 10.5px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.kd-pymk__followers { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 12px; }
.kd-pymk__follow {
  width: 100%; padding: 8px; border-radius: 999px;
  background: var(--grad-hero); color: #fff; border: 0; cursor: pointer;
  font-family: var(--font-body); font-weight: 600; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  box-shadow: 0 4px 12px -4px rgba(255,78,168,0.5);
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-pymk__follow:hover { filter: brightness(1.08); }
.kd-pymk__follow.is-on {
  background: rgba(75,227,255,0.10); color: var(--neon-cyan);
  box-shadow: none; border: 1px solid rgba(75,227,255,0.30);
}


/* =============================================================
   Mention typeahead in comment composer (P2-04)
   ============================================================= */
.kd-post-composer__field { flex: 1; position: relative; min-width: 0; }
.kd-post-composer__field .kd-post-composer__input { width: 100%; box-sizing: border-box; }
.kd-mention {
  position: absolute; bottom: calc(100% + 8px); inset-inline-start: 0; right: 0;
  background: rgba(14, 19, 27, 0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 -8px 38px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  padding: 6px;
  z-index: 30;
  animation: kd-explore-menu-in .18s var(--ease-out);
  max-height: 260px; overflow-y: auto;
}
.kd-mention__head {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(255,255,255,0.4);
  padding: 6px 10px 8px;
}
.kd-mention__item {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px 10px;
  border-radius: 10px; background: transparent; border: 0;
  cursor: pointer; text-align: start;
  transition: background var(--dur-fast) var(--ease-out);
}
.kd-mention__item.is-active, .kd-mention__item:hover { background: rgba(75,227,255,0.10); }
.kd-mention__text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.kd-mention__text strong { font-weight: 500; font-size: 13.5px; color: #fff; }
.kd-mention__text span { font-family: var(--font-mono); font-size: 11px; color: rgba(255,255,255,0.5); }


/* =============================================================
   Drafts + schedule (P2-05)
   ============================================================= */
.kd-wizard__publish { display: flex; gap: 8px; margin-bottom: 12px; }
.kd-wizard__pubopt {
  flex: 1; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.10);
  color: #fff; cursor: pointer; text-align: start; font-family: var(--font-body);
  transition: all var(--dur-fast) var(--ease-out);
}
.kd-wizard__pubopt:hover { background: rgba(255,255,255,0.05); }
.kd-wizard__pubopt.is-on { border-color: rgba(255,78,168,0.45); background: rgba(255,78,168,0.06); }
.kd-wizard__pubopt > svg { color: var(--neon-magenta); flex-shrink: 0; }
.kd-wizard__pubopt span { display: flex; flex-direction: column; }
.kd-wizard__pubopt strong { font-weight: 500; font-size: 13.5px; }
.kd-wizard__pubopt em { font-style: normal; font-size: 11px; color: rgba(255,255,255,0.55); margin-top: 1px; }
.kd-wizard__schedule { display: block; margin-bottom: 14px; }
.kd-wizard__schedule > span { display: block; font-size: 12.5px; color: rgba(255,255,255,0.6); margin: 0 2px 6px; }
.kd-wizard__schedule input {
  width: 100%; box-sizing: border-box;
  padding: 13px 14px; border-radius: 14px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.14);
  color: #fff; font-family: var(--font-body); font-size: 14px;
  outline: none; color-scheme: dark;
}
.kd-wizard__schedule input:focus { border-color: var(--neon-cyan); box-shadow: 0 0 0 3px rgba(75,227,255,0.14); }
.kd-wizard__draftbtn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 12px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 13.5px;
}
.kd-wizard__draftbtn:hover { color: var(--neon-cyan); }

/* drafts tab */
.kd-drafts { display: flex; flex-direction: column; gap: 10px; }
.kd-draft {
  display: flex; align-items: center; gap: 14px;
  padding: 14px; border-radius: 16px;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06);
}
.kd-draft.is-scheduled { border-color: rgba(255,78,168,0.22); background: rgba(255,78,168,0.04); }
.kd-draft__thumb {
  width: 50px; height: 50px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in oklab, var(--c, #9a6cff) 16%, transparent); color: var(--c, #9a6cff);
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid color-mix(in oklab, var(--c, #9a6cff) 28%, transparent);
}
.kd-draft__body { flex: 1; min-width: 0; }
.kd-draft__body strong { display: block; font-weight: 500; font-size: 14px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-draft__meta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: rgba(255,255,255,0.55); margin-top: 3px; }
.kd-draft.is-scheduled .kd-draft__meta { color: #ffb1d4; }
.kd-draft__actions { display: flex; gap: 6px; flex-shrink: 0; }
.kd-draft__btn {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8); font-family: var(--font-body); font-size: 12px; font-weight: 500; cursor: pointer;
}
.kd-draft__btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
.kd-draft__btn--primary { background: var(--grad-hero); border-color: transparent; color: #fff; box-shadow: 0 4px 12px -4px rgba(255,78,168,0.5); }
.kd-draft__btn--primary:hover { filter: brightness(1.08); color: #fff; }


/* =============================================================
   Caption composer token typeahead (# hashtags + @ users)
   ============================================================= */
.kd-wizard__captionwrap { position: relative; }
.kd-tokenbox {
  position: absolute; top: calc(100% + 6px); inset-inline-start: 0; inset-inline-end: 0;
  background: rgba(14, 19, 27, 0.98);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  box-shadow: 0 14px 38px -10px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.06);
  backdrop-filter: blur(18px);
  padding: 6px; z-index: 40;
  max-height: 250px; overflow-y: auto;
  animation: kd-explore-menu-in .16s var(--ease-out);
}
.kd-tokenbox__hash {
  width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(75,227,255,0.12); color: var(--neon-cyan);
  font-family: var(--font-display); font-size: 18px; font-weight: 600;
}


/* =============================================================
   CommentsPage.jsx — dedicated comment thread + RichText
   ============================================================= */
.kd-rich-tag {
  color: var(--neon-cyan); font-weight: 500;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; line-height: inherit;
}
.kd-rich-tag:hover { text-decoration: underline; }
.kd-rich-at {
  color: var(--neon-magenta); font-weight: 500;
  background: transparent; border: 0; padding: 0; cursor: pointer;
  font-family: inherit; font-size: inherit; line-height: inherit;
}
.kd-rich-at:hover { text-decoration: underline; }

.kd-comments-page {
  position: relative;
  min-height: 100%;
  padding-bottom: 84px; /* room for sticky composer */
  font-family: var(--font-body);
}
.kd-comments-page__top {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--bg-0, #0a1018) 88%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.kd-comments-page__top h1 { margin: 0; font-family: var(--font-body); font-weight: 600; font-size: 16px; color: #fff; }
.kd-comments-page__top h1 span { color: rgba(255,255,255,0.5); font-weight: 400; }
.kd-comments-page__back {
  width: 36px; height: 36px; border-radius: 50%;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
  color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.kd-comments-page__back:hover { background: rgba(255,255,255,0.12); }

.kd-comments-ctx {
  display: flex; align-items: center; gap: 12px; width: calc(100% - 32px);
  margin: 12px 16px; padding: 12px 14px;
  border-radius: 16px; text-align: start; cursor: pointer;
  background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.07);
}
.kd-comments-ctx:hover { border-color: rgba(255,255,255,0.16); }
.kd-comments-ctx__thumb {
  width: 46px; height: 46px; border-radius: 12px; flex-shrink: 0;
  background: color-mix(in oklab, var(--c, #ff4ea8) 16%, transparent); color: var(--c, #ff4ea8);
  border: 1px solid color-mix(in oklab, var(--c, #ff4ea8) 28%, transparent);
  display: inline-flex; align-items: center; justify-content: center;
}
.kd-comments-ctx__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.kd-comments-ctx__author { display: inline-flex; align-items: center; gap: 6px; }
.kd-comments-ctx__author strong { font-weight: 500; font-size: 13px; color: #fff; }
.kd-comments-ctx__cap {
  font-size: 12.5px; line-height: 1.5; color: rgba(255,255,255,0.62);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.kd-comments-ctx > svg { color: rgba(255,255,255,0.4); flex-shrink: 0; }

.kd-comments-sort { display: flex; gap: 8px; padding: 0 16px; margin-bottom: 4px; }
.kd-comments-sort button {
  padding: 7px 16px; border-radius: 999px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.6); font-family: var(--font-body); font-size: 12.5px; cursor: pointer;
}
.kd-comments-sort button.is-on { background: rgba(255,78,168,0.10); border-color: rgba(255,78,168,0.35); color: #fff; }

.kd-comments-page__list { list-style: none; margin: 0; padding: 12px 16px; display: flex; flex-direction: column; gap: 4px; }
.kd-comment__avatar-btn { background: transparent; border: 0; padding: 0; cursor: pointer; flex-shrink: 0; align-self: flex-start; line-height: 0; }
.kd-comment__actions button.is-liked { color: var(--neon-magenta); }

.kd-comments-page__composer {
  position: sticky; bottom: 0; left: 0; right: 0;
  margin-top: auto;
}

/* comment count link on PostView */
.kd-post-comments__all {
  background: transparent; border: 0; cursor: pointer;
  color: var(--neon-cyan); font-family: var(--font-body); font-size: 13px; font-weight: 500;
}
.kd-post-comments__all:hover { color: #fff; }
.kd-post-comments__h-row { display: flex; align-items: center; justify-content: space-between; }

/* =============================================================
   Layout consolidation — consistent content column across routes
   + edge-to-edge backgrounds on mobile  (UX-fix #53 / #54)
   ============================================================= */
:root { --kd-page-max: 1080px; --kd-read-max: 800px; --kd-main-pad: 20px; }

.kd-main { max-width: var(--kd-page-max); padding-inline: var(--kd-main-pad); }

/* Reading / single-column routes all share ONE width so switching
   tabs never shifts the content column. */
.kd-post-page,
.kd-comments-page,
.kd-stream-page,
.kd-notif-page,
.kd-search-page,
.kd-fh-page,
.kd-fc-page,
.kd-reward-tiers,
.kd-reward-page__hero { max-width: var(--kd-read-max); margin-inline: auto; }

/* Dashboard routes fill the full content column. */
.kd-gz-page { max-width: 100%; }

@media (max-width: 720px) {
  /* Drop the shell's side padding on phones so each page's own
     padding governs and full-bleed surfaces reach the edge. */
  .kd-main { --kd-main-pad: 0px; padding-top: 8px; }
}

/* ShareFrame bottom band — real QR + link */
.kd-sf__qr { width: 46px; height: 46px; border-radius: 8px; background: #fff; padding: 3px; flex-shrink: 0; }
.kd-sf__linkcol { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; text-align: start; }
.kd-sf__linkcol .kd-sf__cta { font-family: var(--font-body); font-size: 10px; font-weight: 700; opacity: .95; }
.kd-sf__url { font-family: var(--font-mono); font-size: 8.5px; opacity: .72; direction: ltr; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-sf__band--bottom { gap: 8px; }

/* =============================================================
   InviteSheet.jsx — referral invite (دعوت دوستان)
   ============================================================= */
.kd-invite { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.7); backdrop-filter: blur(10px); animation: kd-fadein .25s ease-out; padding: 16px; }
.kd-invite__sheet {
  position: relative; width: 100%; max-width: 380px;
  padding: 26px 22px 22px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(28,16,42,.96), rgba(10,16,24,.97));
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 24px 70px -20px rgba(0,0,0,.7);
  font-family: var(--font-body);
  animation: kd-pop .3s var(--ease-spring) both;
}
.kd-invite__close { position: absolute; top: 14px; inset-inline-end: 14px; width: 32px; height: 32px; border-radius: 50%; background: rgba(255,255,255,.06); border: 0; color: rgba(255,255,255,.6); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kd-invite__close:hover { background: rgba(255,255,255,.12); color: #fff; }
.kd-invite__gift { width: 60px; height: 60px; margin: 0 auto 14px; border-radius: 18px; background: linear-gradient(135deg, rgba(245,213,137,.2), rgba(255,78,168,.16)); border: 1px solid rgba(245,213,137,.4); color: #f5d589; display: inline-flex; align-items: center; justify-content: center; }
.kd-invite__h { margin: 0 0 8px; font-family: var(--font-display); font-weight: 500; font-size: 24px; color: #fff; }
.kd-invite__sub { margin: 0 auto 18px; max-width: 300px; font-size: 13px; line-height: 1.8; color: rgba(255,255,255,.7); }
.kd-invite__sub strong { color: var(--neon-cyan); font-weight: 600; }
.kd-invite__qr { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 16px; }
.kd-invite__qr img { width: 150px; height: 150px; border-radius: 14px; background: #fff; padding: 8px; box-shadow: 0 8px 24px -8px rgba(0,0,0,.5); }
.kd-invite__qr span { font-size: 11.5px; color: rgba(255,255,255,.5); }
.kd-invite__link { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 14px; border-radius: 999px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12); margin-bottom: 10px; }
.kd-invite__link-url { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 12px; color: rgba(255,255,255,.8); direction: ltr; text-align: start; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kd-invite__copy { display: inline-flex; align-items: center; gap: 5px; padding: 8px 14px; border-radius: 999px; background: var(--grad-hero); color: #fff; border: 0; cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 12.5px; flex-shrink: 0; }
.kd-invite__copy.is-done { background: rgba(68,227,184,.16); color: #7ff0d2; }
.kd-invite__code { font-size: 12px; color: rgba(255,255,255,.5); margin-bottom: 18px; }
.kd-invite__code strong { font-family: var(--font-mono); color: #fff; letter-spacing: .04em; }
.kd-invite__targets { display: flex; justify-content: center; gap: 12px; }
.kd-invite__target { background: transparent; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 5px; }
.kd-invite__target-icon { width: 46px; height: 46px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; }
.kd-invite__target-lbl { font-size: 10.5px; color: rgba(255,255,255,.65); }
.kd-invite__target:hover .kd-invite__target-icon { filter: brightness(1.12); }

/* Real lorem placeholder images on content cards (UX-fix #59) */
.kd-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.kd-card__media .kd-card__chip, .kd-card__media .kd-card__playbtn,
.kd-card__media .kd-card__duration, .kd-card__media .kd-card__sound { z-index: 2; }
.kd-card__media--video .kd-card__videogradient { z-index: 1; background: linear-gradient(to top, rgba(0,0,0,.6), transparent 55%); }

/* PostView media poster */
.kd-post-media { position: relative; overflow: hidden; }
.kd-post-media__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.kd-post-media--video .kd-post-media__img, .kd-post-media--image .kd-post-media__img { filter: brightness(.82); }
.kd-post-media__play, .kd-post-media__chip, .kd-post-media__dur { z-index: 2; }

/* Bento home tile thumbnails — real lorem images (UX-fix #59) */
.kd-bento__hero-thumb, .kd-bento__humor-thumb, .kd-bento__ch-thumb { position: relative; overflow: hidden; }
.kd-bento__thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; filter: brightness(.84) saturate(1.05); }
.kd-bento__hero-thumb > *:not(.kd-bento__thumb-img),
.kd-bento__humor-thumb > *:not(.kd-bento__thumb-img) { position: relative; z-index: 1; }