/* Detetive Kwai — UI fiel ao app mobile do Kwai (tema claro, laranja #ff421c). */
:root {
  --kwai: #ff421c;
  --kwai-2: #ff4906;
  --kwai-3: #ffa930;
  --bg: #ffffff;
  --bg-soft: #f7f8fa;
  --line: #ededf0;
  --txt: #1a1a1a;
  --muted: #9a9aa5;
  --muted-2: #c4c4cc;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
  font-family: Roboto, system-ui, -apple-system, "Helvetica Neue", sans-serif;
  background: var(--bg-soft);
  color: var(--txt);
  -webkit-font-smoothing: antialiased;
}

#app {
  max-width: 460px; margin: 0 auto; min-height: 100dvh; background: var(--bg);
  position: relative; overflow: hidden;
}
.screen { display: none; min-height: 100dvh; animation: fade .3s ease; }
.screen.active { display: block; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- top bar genérica ---- */
.topbar {
  height: 52px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5;
}
.topbar .ic { font-size: 22px; color: var(--txt); background: none; border: 0; cursor: pointer; line-height: 1; }
.topbar .ttl { font-weight: 600; font-size: 16px; flex: 1; }
.topbar .ttl.center { text-align: center; }

/* ---- ENTRY (busca estilo Kwai) ---- */
[data-screen="entry"] { display: none; padding: 0; }
[data-screen="entry"].active { display: flex; flex-direction: column; }
.kwai-logo {
  font-weight: 800; font-size: 30px; letter-spacing: -.04em; margin: 56px auto 6px;
  background: linear-gradient(135deg, var(--kwai), var(--kwai-3));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.entry-wrap { padding: 0 24px 40px; display: flex; flex-direction: column; flex: 1; }
.entry-wrap h1 { font-size: 23px; font-weight: 700; text-align: center; line-height: 1.25; margin-top: auto; }
.entry-wrap .sub { color: var(--muted); text-align: center; margin-top: 10px; font-size: 14.5px; line-height: 1.5; }
.search-box {
  display: flex; align-items: center; gap: 8px; margin-top: 24px;
  background: var(--bg-soft); border: 1.5px solid var(--line); border-radius: 999px; padding: 0 18px; height: 52px;
}
.search-box:focus-within { border-color: var(--kwai); }
.search-box .mag { color: var(--muted); font-size: 17px; }
.search-box .at { color: var(--muted); font-weight: 600; }
.search-box input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; color: var(--txt); height: 100%; }
.search-box input::placeholder { color: var(--muted-2); }
.btn {
  height: 50px; border: 0; border-radius: 999px; cursor: pointer; font-size: 16px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, var(--kwai), var(--kwai-2));
}
.btn:active { filter: brightness(.95); }
.entry-wrap .btn { margin-top: 14px; }
.entry-trust { display: flex; justify-content: center; gap: 16px; margin-top: 22px; color: var(--muted); font-size: 12.5px; flex-wrap: wrap; }
.err { color: var(--kwai); font-size: 13.5px; text-align: center; margin-top: 10px; min-height: 18px; }

/* ---- LOADING ---- */
[data-screen="loading"], [data-screen="analyzing"] { display: none; }
[data-screen="loading"].active, [data-screen="analyzing"].active { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px; }
.spin { width: 52px; height: 52px; border: 4px solid var(--line); border-top-color: var(--kwai); border-radius: 50%; animation: sp 1s linear infinite; }
@keyframes sp { to { transform: rotate(360deg); } }
.load-ttl { font-weight: 600; font-size: 17px; margin-top: 20px; }
.steps { list-style: none; margin-top: 18px; width: 100%; max-width: 300px; }
.steps li { display: flex; gap: 10px; color: var(--muted); font-size: 14px; padding: 6px 0; opacity: .45; transition: .3s; }
.steps li.on { opacity: 1; color: var(--txt); }
.steps li.done { opacity: 1; color: var(--kwai); }
.steps li::before { content: "○"; }
.steps li.on::before { content: "◐"; color: var(--kwai); }
.steps li.done::before { content: "✓"; }
.progress { width: 100%; max-width: 300px; height: 6px; background: var(--line); border-radius: 99px; overflow: hidden; margin-top: 6px; }
.progress > div { height: 100%; width: 0; background: linear-gradient(90deg, var(--kwai), var(--kwai-3)); transition: width .4s; }

/* ---- PROFILE (fiel ao Kwai) ---- */
.profile-head { padding: 18px 16px 0; text-align: center; }
.p-avatar { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); margin: 0 auto; display: block; }
.p-name { font-size: 19px; font-weight: 700; margin-top: 12px; display: inline-flex; align-items: center; gap: 5px; }
.p-name .vf { color: var(--kwai); font-size: 15px; }
.p-handle { color: var(--muted); font-size: 13px; margin-top: 3px; }
.p-stats { display: flex; justify-content: center; gap: 0; margin: 16px 0 12px; }
.p-stats .st { flex: 1; max-width: 110px; }
.p-stats .st b { display: block; font-size: 18px; font-weight: 700; }
.p-stats .st span { color: var(--muted); font-size: 12.5px; }
.p-stats .st + .st { border-left: 1px solid var(--line); }
.p-bio { font-size: 13.5px; color: #444; padding: 0 22px; line-height: 1.5; }
.p-actions { display: flex; gap: 10px; padding: 16px 16px 14px; }
.p-actions .follow { flex: 1; height: 42px; border-radius: 8px; border: 0; color: #fff; font-weight: 700; font-size: 15px; background: linear-gradient(135deg, var(--kwai), var(--kwai-2)); }
.p-actions .msg { width: 110px; height: 42px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); font-weight: 600; font-size: 15px; color: var(--txt); display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.p-actions .msg .badge { background: var(--kwai); color: #fff; font-size: 11px; border-radius: 99px; padding: 0 6px; height: 16px; line-height: 16px; }

.tabs { display: flex; border-top: 8px solid var(--bg-soft); }
.tabs .tab { flex: 1; text-align: center; padding: 12px 0; font-size: 14px; font-weight: 600; color: var(--muted); position: relative; }
.tabs .tab.active { color: var(--txt); }
.tabs .tab.active::after { content: ""; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 28px; height: 3px; border-radius: 3px; background: var(--kwai); }

.album { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; padding: 2px 0 80px; }
.album .cell { position: relative; aspect-ratio: 9 / 13; background: var(--bg-soft); overflow: hidden; }
.album .cell img { width: 100%; height: 100%; object-fit: cover; filter: blur(10px) brightness(.85); transform: scale(1.12); }
.album .cell.locked { display: flex; align-items: center; justify-content: center; color: var(--muted-2); font-size: 22px; }
.album .cell .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; color: rgba(255,255,255,.92); text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.album .cell .views { position: absolute; left: 6px; bottom: 5px; color: #fff; font-size: 11px; font-weight: 600; text-shadow: 0 1px 3px rgba(0,0,0,.6); }

/* ---- MENSAGENS (DM list fake) ---- */
.dm-list { padding: 4px 0 80px; }
.dm { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.dm .av { width: 50px; height: 50px; border-radius: 50%; object-fit: cover; background: var(--bg-soft); filter: blur(4px); }
.dm .mid { flex: 1; min-width: 0; }
.dm .mid .nm { font-weight: 600; font-size: 15px; display: flex; align-items: center; gap: 6px; }
.dm .mid .pv { color: var(--muted); font-size: 13px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; filter: blur(3.5px); }
.dm .meta { text-align: right; }
.dm .meta .tm { color: var(--muted-2); font-size: 11px; }
.dm .meta .un { display: inline-block; margin-top: 5px; background: var(--kwai); color: #fff; font-size: 11px; min-width: 18px; height: 18px; line-height: 18px; border-radius: 99px; padding: 0 5px; }

/* ---- CHAT (conversa fake) ---- */
.chat-wrap { padding: 14px 14px 90px; display: flex; flex-direction: column; gap: 10px; background: var(--bg-soft); min-height: calc(100dvh - 52px); }
.bubble { max-width: 76%; padding: 9px 13px; border-radius: 16px; font-size: 14.5px; line-height: 1.35; filter: blur(4px); user-select: none; }
.bubble.them { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 5px; }
.bubble.me { align-self: flex-end; color: #fff; background: linear-gradient(135deg, var(--kwai), var(--kwai-2)); border-bottom-right-radius: 5px; }
.bubble.media { filter: none; padding: 0; overflow: hidden; }
.bubble.media .ph { width: 150px; height: 200px; background: repeating-linear-gradient(45deg, #eee, #eee 10px, #e2e2e2 10px, #e2e2e2 20px); display: flex; align-items: center; justify-content: center; font-size: 26px; }
.chat-day { text-align: center; color: var(--muted-2); font-size: 11.5px; margin: 6px 0; }

/* ---- PAYWALL (overlay) ---- */
.paywall {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 460px; margin: 0 auto; z-index: 40;
  background: var(--bg); border-top-left-radius: 22px; border-top-right-radius: 22px;
  box-shadow: 0 -10px 40px rgba(0,0,0,.18); padding: 24px 22px calc(22px + env(safe-area-inset-bottom));
  text-align: center; transform: translateY(110%); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.paywall.up { transform: none; }
.paywall .lock { font-size: 30px; }
.paywall h2 { font-size: 20px; font-weight: 800; margin-top: 6px; }
.paywall p { color: var(--muted); font-size: 14px; margin-top: 8px; line-height: 1.5; }
.paywall .btn { display: block; line-height: 54px; height: 54px; text-decoration: none; margin-top: 18px; }
.paywall .warn { background: #fff3f0; border: 1px solid #ffd9cf; color: var(--kwai); border-radius: 10px; padding: 11px; margin-top: 14px; font-size: 12.5px; }
.paywall .sec { font-size: 12px; margin-top: 12px; }
.scrim { position: fixed; inset: 0; max-width: 460px; margin: 0 auto; background: rgba(0,0,0,.4); z-index: 35; opacity: 0; pointer-events: none; transition: opacity .3s; }
.scrim.up { opacity: 1; }

/* ---- FEED vertical (tela cheia, estilo Kwai) ---- */
[data-screen="feed"] { background: #000; }
.feed { height: 100dvh; overflow-y: scroll; scroll-snap-type: y mandatory; -webkit-overflow-scrolling: touch; }
.feed::-webkit-scrollbar { display: none; }
.feed-item { position: relative; height: 100dvh; scroll-snap-align: start; overflow: hidden; background: #000; }
.feed-item .bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(18px) brightness(.6); transform: scale(1.2); }
.feed-item .veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, transparent 22% 60%, rgba(0,0,0,.7) 100%); }
.feed-top { position: absolute; top: 0; left: 0; right: 0; height: 50px; display: flex; align-items: center; padding: 0 12px; z-index: 3; }
.feed-top .ic { background: none; border: 0; color: #fff; font-size: 26px; cursor: pointer; }
.feed-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; z-index: 2; }
.feed-play span { font-size: 60px; color: rgba(255,255,255,.9); text-shadow: 0 2px 16px rgba(0,0,0,.6); }
.feed-rail { position: absolute; right: 10px; bottom: 96px; display: flex; flex-direction: column; align-items: center; gap: 20px; z-index: 3; }
.feed-rail .av { width: 46px; height: 46px; border-radius: 50%; border: 2px solid #fff; object-fit: cover; filter: blur(2px); position: relative; }
.feed-rail .plus { background: var(--kwai); color: #fff; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; margin-top: -12px; }
.feed-rail .act { display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; font-size: 12px; font-weight: 600; }
.feed-rail .act .i { font-size: 30px; line-height: 1; }
.feed-info { position: absolute; left: 14px; right: 80px; bottom: 92px; z-index: 3; color: #fff; }
.feed-info .u { font-weight: 700; font-size: 16px; }
.feed-info .cap { font-size: 13.5px; margin-top: 6px; filter: blur(4px); }
.feed-info .music { font-size: 12.5px; margin-top: 8px; opacity: .9; display: flex; align-items: center; gap: 6px; }

/* ---- bottom nav (estilo Kwai) ---- */
.botnav { position: fixed; left: 0; right: 0; bottom: 0; max-width: 460px; margin: 0 auto; height: 56px; background: var(--bg); border-top: 1px solid var(--line); display: flex; z-index: 20; }
.botnav .nv { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; color: var(--muted); font-size: 10.5px; cursor: pointer; }
.botnav .nv .i { font-size: 19px; }
.botnav .nv.active { color: var(--txt); }
.botnav .nv .dot { position: absolute; transform: translate(12px,-10px); width: 8px; height: 8px; background: var(--kwai); border-radius: 50%; }