:root {
  --bg: #06060b;
  --panel: rgba(19, 19, 28, 0.72);
  --panel-solid: #111119;
  --line: rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.14);
  --text: #ececf5;
  --muted: #9a9ab0;
  --dim: #6c6c82;
  --accent: #8b7cff;
  --accent-2: #3ee0c8;
  --accent-soft: rgba(139, 124, 255, 0.16);
  --danger: #ff7a8a;
  --radius: 18px;
  --shadow: 0 24px 70px rgba(0, 0, 0, 0.55);
  color-scheme: dark;
}

[data-accent='teal'] { --accent: #3ee0c8; --accent-2: #7c9cff; --accent-soft: rgba(62, 224, 200, 0.16); }
[data-accent='rose'] { --accent: #ff7a9c; --accent-2: #ffb36b; --accent-soft: rgba(255, 122, 156, 0.16); }
[data-accent='amber'] { --accent: #ffc46b; --accent-2: #ff8f6b; --accent-soft: rgba(255, 196, 107, 0.16); }

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
a { color: var(--accent); }

.aurora { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.aurora i {
  position: absolute; border-radius: 50%; filter: blur(90px); opacity: 0.5;
  animation: drift 24s ease-in-out infinite alternate;
}
.aurora i:nth-child(1) { width: 46vw; height: 46vw; left: -8vw; top: -14vw; background: #5b4bff; }
.aurora i:nth-child(2) { width: 38vw; height: 38vw; right: -6vw; top: 18vh; background: #0f8f8f; animation-delay: -8s; opacity: 0.35; }
.aurora i:nth-child(3) { width: 30vw; height: 30vw; left: 34vw; bottom: -14vw; background: #b13bff; animation-delay: -14s; opacity: 0.25; }

@keyframes drift {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(4vw, 3vh, 0) scale(1.12); }
}

/* Low-power devices (Chromebooks, old laptops, 2G/save-data): the animated
   90px blur and frosted panels are the most expensive thing on the page. */
[data-lite] .aurora { display: none; }
[data-lite] body {
  background: radial-gradient(circle at 50% -10%, rgba(139, 124, 255, 0.12), transparent 55%), var(--bg);
}
[data-lite] .card,
[data-lite] .rail,
[data-lite] .dock {
  backdrop-filter: none; background: var(--panel-solid);
}
[data-lite] .sheet::backdrop { backdrop-filter: none; }
[data-lite] .quick:hover { transform: none; }
[data-lite] .card { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.42); }

[data-reduce-motion] .aurora i { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .aurora i { animation: none; }
  .quick, .tab, .btn, .rail-btn, .sw { transition: none; }
}

.hidden, [hidden] { display: none !important; }

/* ---------- auth ---------- */

.auth {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(340px, 420px);
  gap: 64px;
  align-items: center;
  max-width: 1180px;
  margin: 0 auto;
  padding: 56px 32px;
  overflow-y: auto;
}

.hero h1 {
  margin: 22px 0 14px;
  font-size: clamp(40px, 5.4vw, 68px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 700;
}
.hero h1 em {
  font-style: normal;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; letter-spacing: 0.32em; font-size: 13px; color: #fff; }
.mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
  color: #08080e; font-size: 17px; letter-spacing: 0;
  box-shadow: 0 0 30px rgba(139, 124, 255, 0.45);
}

.lede { max-width: 46ch; color: #b9b9cc; font-size: 16.5px; }

.feature-list { list-style: none; margin: 34px 0 30px; padding: 0; display: grid; gap: 16px; max-width: 480px; }
.feature-list li {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.feature-list b { font-size: 14px; letter-spacing: -0.01em; }
.feature-list span { color: var(--muted); font-size: 14px; }

.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: #cfcfe0;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.03);
}

.card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow);
  backdrop-filter: blur(24px);
}

.auth-card { padding: 26px; }
.auth-card::before {
  content: ''; position: absolute; inset: -1px; border-radius: 26px; padding: 1px;
  background: linear-gradient(140deg, rgba(139, 124, 255, 0.5), transparent 42%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.04); border-radius: 14px; margin-bottom: 22px; }
.seg { padding: 9px 12px; border-radius: 10px; color: var(--muted); font-size: 14px; font-weight: 500; transition: 0.18s; }
.seg:hover { color: var(--text); }
.seg.on { background: rgba(255, 255, 255, 0.09); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3); }

.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12.5px; color: var(--muted); margin-bottom: 6px; letter-spacing: 0.01em; }
.field input {
  width: 100%; padding: 12px 14px; border-radius: 12px; background: rgba(8, 8, 14, 0.7);
  border: 1px solid var(--line-strong); outline: none; transition: border-color 0.16s, box-shadow 0.16s;
}
.field input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.pass-wrap { position: relative; display: block; }
.pass-wrap input { padding-right: 46px; }
.pass-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; display: grid; place-items: center;
  border-radius: 9px; color: var(--dim);
}
.pass-toggle:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }
.pass-toggle svg { width: 17px; height: 17px; }

.dm-bar { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.conv {
  padding: 6px 11px; border-radius: 999px; font-size: 12px; color: var(--muted);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
}
.conv.on { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.dm-form { flex: 1; display: flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }
.dm-form span { color: var(--dim); font-size: 12.5px; }
.dm-form input { flex: 1; min-width: 0; background: none; border: 0; outline: none; font-size: 12.5px; padding: 6px 0; }
.dm-form input::placeholder { color: var(--dim); }
.dm-form button { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; color: #0a0a12; background: var(--accent); font-size: 13px; }
.dm-banner { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 14px; font-size: 12px; color: var(--accent); background: var(--accent-soft); border-bottom: 1px solid var(--line); }
.dm-banner button { font-size: 11.5px; color: var(--muted); padding: 4px 8px; border-radius: 8px; border: 1px solid var(--line-strong); }
.dm-banner button:hover { color: var(--text); }
.chip.other { cursor: pointer; }
.chip.other:hover { border-color: var(--accent); color: var(--accent); }

.form-error { min-height: 20px; margin: 4px 2px 10px; color: var(--danger); font-size: 13px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 18px; border-radius: 12px; font-weight: 600; font-size: 14.5px;
  border: 1px solid transparent; transition: transform 0.12s, filter 0.16s, background 0.16s;
}
.btn:active { transform: translateY(1px); }
.btn.primary {
  width: 100%; color: #0a0a12; background: linear-gradient(100deg, var(--accent), var(--accent-2));
  box-shadow: 0 10px 30px rgba(139, 124, 255, 0.28);
}
.btn.primary[disabled] { filter: grayscale(0.4) brightness(0.8); cursor: progress; }
.btn.ghost { background: rgba(255, 255, 255, 0.06); border-color: var(--line-strong); }
.btn.ghost:hover { background: rgba(255, 255, 255, 0.1); }
.btn.small { padding: 7px 12px; font-size: 13px; }

.fineprint { color: var(--dim); font-size: 12px; margin: 16px 2px 0; line-height: 1.55; }

/* ---------- app shell ---------- */

.app {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 336px;
  height: 100vh;
  height: 100dvh;
}
.app.dock-hidden { grid-template-columns: 64px minmax(0, 1fr); }
.app.dock-hidden .dock { display: none; }

.rail {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 14px 0 16px; border-right: 1px solid var(--line);
  background: rgba(9, 9, 15, 0.7); backdrop-filter: blur(18px);
}
.rail-logo {
  width: 38px; height: 38px; display: grid; place-items: center; border-radius: 12px;
  background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #08080e;
  font-size: 19px; margin-bottom: 8px; box-shadow: 0 0 24px rgba(139, 124, 255, 0.35);
}
.rail-group { display: flex; flex-direction: column; gap: 6px; }
.rail-btn {
  position: relative; width: 42px; height: 42px; display: grid; place-items: center;
  border-radius: 12px; color: var(--muted); transition: 0.16s;
}
.rail-btn:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }
.rail-btn.on { background: var(--accent-soft); color: var(--accent); }
.rail-btn .dot { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 0 2px #0a0a12; }
.rail-spacer { flex: 1; }
.rail-me { position: relative; }
.avatar {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid var(--line-strong);
  font-size: 14px; font-weight: 650; color: var(--text); text-transform: uppercase;
}
.avatar:hover { border-color: var(--accent); }

.menu {
  position: absolute; left: 46px; bottom: 0; width: 190px; padding: 8px;
  background: var(--panel-solid); border: 1px solid var(--line-strong);
  border-radius: 14px; box-shadow: var(--shadow); z-index: 30;
}
.menu-name { padding: 8px 10px 10px; font-size: 13px; color: var(--muted); border-bottom: 1px solid var(--line); text-transform: none; }
.menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; color: var(--text); }
.menu-item:hover { background: rgba(255, 255, 255, 0.06); }
.menu-item svg { width: 17px; height: 17px; }

.stage { display: grid; grid-template-rows: 44px 52px minmax(0, 1fr); min-width: 0; }

.tabstrip {
  display: flex; align-items: center; gap: 6px; padding: 0 12px;
  border-bottom: 1px solid var(--line); background: rgba(9, 9, 15, 0.55);
}
.tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; max-width: 60%; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  display: flex; align-items: center; gap: 8px; max-width: 200px; padding: 6px 10px;
  border-radius: 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.tab:hover { background: rgba(255, 255, 255, 0.05); color: var(--text); }
.tab.on { background: rgba(255, 255, 255, 0.09); color: #fff; }
.tab-title { overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.tab-close { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 6px; color: var(--dim); opacity: 0; }
.tab:hover .tab-close, .tab.on .tab-close { opacity: 1; }
.tab-close:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.tab-close svg { width: 13px; height: 13px; }
.tab-new { width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.tab-new:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.strip-spacer { flex: 1; }
.ghost {
  display: flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 9px;
  font-size: 12.5px; color: var(--muted); border: 1px solid transparent;
}
.ghost:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.04); }
.ghost svg { width: 15px; height: 15px; }

.omnibar {
  display: flex; align-items: center; gap: 8px; padding: 9px 14px;
  border-bottom: 1px solid var(--line);
}
.nav { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; color: var(--muted); }
.nav:hover:not(:disabled) { background: rgba(255, 255, 255, 0.07); color: #fff; }
.nav:disabled { opacity: 0.3; cursor: default; }
.nav svg { width: 17px; height: 17px; }

.urlbar {
  flex: 1; display: flex; align-items: center; gap: 9px; padding: 0 12px;
  height: 34px; border-radius: 10px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); transition: border-color 0.16s, box-shadow 0.16s;
}
.urlbar:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.urlbar input { flex: 1; background: none; border: 0; outline: none; font-size: 13.5px; }
.urlbar input::placeholder { color: var(--dim); }
.url-icon { width: 14px; height: 14px; color: var(--dim); flex: none; }

.viewport { position: relative; min-height: 0; overflow: hidden; background: radial-gradient(circle at 50% 0%, rgba(139, 124, 255, 0.07), transparent 60%); }
.frame { width: 100%; height: 100%; border: 0; background: #fff; display: block; }

.embed-notice {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 14px; padding: 9px 10px 9px 16px;
  border-radius: 14px; background: rgba(18, 18, 26, 0.94);
  border: 1px solid var(--line-strong); box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  font-size: 12.5px; color: var(--muted); z-index: 6; max-width: calc(100% - 32px);
}
.embed-notice .embed-actions { display: flex; align-items: center; gap: 6px; }
.embed-notice .icon-btn { width: 26px; height: 26px; }
.embed-notice .icon-btn svg { width: 14px; height: 14px; }

.app-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 30px; overflow-y: auto; }
.app-panel-card { width: min(560px, 100%); text-align: center; }
.app-panel-icon {
  width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px;
  display: grid; place-items: center; font-size: 22px; font-weight: 700; color: #0a0a12;
  background: linear-gradient(140deg, var(--accent), var(--accent-2));
}
.app-panel-card h3 { margin: 0 0 8px; font-size: 22px; letter-spacing: -0.02em; }
.app-panel-card p { margin: 0 auto 20px; max-width: 44ch; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.hero-search.compact { max-width: 460px; margin: 0 auto 16px; }
.hero-search.compact input { font-size: 13.5px; }
.app-panel-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---------- YouTube ---------- */

.yt { position: absolute; inset: 0; overflow-y: auto; padding: 22px min(5vw, 48px) 40px; }
.yt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-bottom: 14px; }
.yt-brand {
  display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 17px;
  letter-spacing: -0.01em;
}
.yt-play {
  width: 30px; height: 21px; border-radius: 6px; display: grid; place-items: center;
  font-size: 10px; color: #fff; background: #ff2f45;
}
.hero-search.yt-search { flex: 1; min-width: 220px; max-width: 520px; margin: 0; }
.yt-chips { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 18px; }
.yt-chip {
  padding: 6px 12px; border-radius: 999px; font-size: 12.5px; color: var(--muted);
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.yt-chip:hover { color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.08); }
.yt-status, .yt-empty { margin: 26px 0 0; color: var(--muted); font-size: 13.5px; }
.yt-more { margin: 22px 0 6px; text-align: center; font-size: 12.5px; color: var(--dim); }
.yt-empty { max-width: 52ch; line-height: 1.6; }
.yt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
/* Home is shelves rather than one flat grid: each source the feed was built
   from gets its own row, which is what makes the page look personalised. */
.yt-home { display: flex; flex-direction: column; gap: 26px; }
.yt-shelf { display: flex; flex-direction: column; gap: 10px; }
.yt-shelf-title {
  margin: 0; font-size: 14px; font-weight: 700; color: var(--text);
  letter-spacing: -0.01em;
}
.yt-shelf-title::after {
  content: ''; display: block; height: 1px; margin-top: 9px;
  background: linear-gradient(90deg, var(--line-strong), transparent);
}
.yt-card { text-align: left; display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.yt-thumb {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.yt-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- feed tabs (YouTube + TikTok) ---------- */
.feed-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; }
.feed-tab {
  padding: 7px 14px; border-radius: 999px; font-size: 12.5px; font-weight: 600;
  color: var(--muted); border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
  transition: 0.15s;
}
.feed-tab:hover { color: var(--text); border-color: var(--line-strong); }
.feed-tab.on {
  color: #0a0a12; border-color: transparent;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
}
.yt-basis {
  margin: 0 0 14px; padding: 9px 12px; border-radius: 12px; font-size: 12.5px;
  color: var(--muted); background: var(--accent-soft); border: 1px solid var(--line-strong);
}
.yt-channel-tabs { display: flex; gap: 6px; }
.yt-channel-tab {
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; color: var(--muted);
  border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
}
.yt-channel-tab.on {
  color: var(--text); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.1);
}

/* ---------- TikTok videos ---------- */

/* For you is a reel: one full-screen video per snap point, scrolled forever,
   the way TikTok and Shorts feel. Only the video on screen has a player. */
#ttView.reeling { padding: 0; overflow: hidden; }
#ttView.reeling > .yt-head { display: none; }
#ttView.reeling > #ttTabs {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; margin: 0;
}
#ttView.reeling > #ttStatus {
  position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 4; margin: 0;
  text-align: center; color: #cfcfe0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.tt-reel {
  position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
  scroll-snap-type: y mandatory; background: #05050a; scrollbar-width: none;
}
.tt-reel::-webkit-scrollbar { display: none; }
.tt-slide {
  position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always;
  display: grid; place-items: center; padding: 44px 10px 30px;
}
.tt-slide-stage {
  position: relative; height: 100%; max-width: 100%; aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden; background: #000; border: 1px solid var(--line);
}
.tt-slide-stage iframe { width: 100%; height: 100%; border: 0; display: block; background: #000; }
/* The player iframe swallows wheel and swipe gestures, so this transparent layer
   over the video passes them to the reel. The bottom strip stays open for the
   player's own sound and fullscreen buttons. */
.tt-slide-wheel {
  position: absolute; left: 0; right: 0; top: 0; bottom: 54px; z-index: 2;
  cursor: grab; touch-action: none;
}
.tt-slide-meta {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 16px 14px 12px;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.78));
}
.tt-slide-author { font-size: 13.5px; font-weight: 700; color: #fff; }
.tt-slide-caption {
  font-size: 12px; line-height: 1.35; color: #e6e6f2;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-slide-tag { font-size: 11px; color: #25f4ee; }
/* Snap points are paused during the eased one-video glide, then come back. */
.tt-reel.gliding { scroll-snap-type: none; }
/* A click on the video pauses it; this badge says so without a caption line. */
.tt-slide-stage.paused::after {
  content: '❚❚'; position: absolute; top: 50%; left: 50%; z-index: 3;
  transform: translate(-50%, -50%); padding: 12px 16px; border-radius: 999px;
  font-size: 15px; letter-spacing: 2px; color: #fff; pointer-events: none;
  background: rgba(8, 8, 14, 0.55); border: 1px solid rgba(255, 255, 255, 0.22);
  backdrop-filter: blur(4px);
}

/* YouTube For you is the same reel: a video per screen, scrolled forever. The
   player is full-bleed because YouTube clips are usually 16:9 and letterboxing
   inside a portrait stage would shrink them to a stamp. */
#ytView.reeling { padding: 0; overflow: hidden; }
#ytView.reeling > .yt-head { display: none; }
#ytView.reeling > #ytTabs {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 4; margin: 0;
}
#ytView.reeling > #ytStatus {
  position: absolute; left: 14px; right: 14px; bottom: 66px; z-index: 4; margin: 0;
  text-align: center; color: #cfcfe0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.8);
}
.yt-reel .tt-slide { padding: 0; }
.yt-reel .yt-slide-stage {
  width: 100%; height: 100%; max-width: none; aspect-ratio: auto;
  border: 0; border-radius: 0;
}
.reel-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000;
}
/* Title block sits at the top so it never covers the player's control bar. */
.yt-reel .tt-slide-meta {
  top: 0; bottom: auto; padding: 46px 14px 20px;
  background: linear-gradient(rgba(0, 0, 0, 0.72), transparent);
}
.yt-reel .tt-slide-wheel { bottom: 68px; }

.tt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.tt-video { display: flex; flex-direction: column; gap: 7px; text-align: left; min-width: 0; }
.tt-video-thumb {
  position: relative; display: block; aspect-ratio: 9 / 16; border-radius: 12px; overflow: hidden;
  background: linear-gradient(150deg, rgba(37, 244, 238, 0.18), rgba(254, 44, 85, 0.16));
  border: 1px solid var(--line);
}
.tt-video-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tt-video-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 15px; color: #fff; opacity: 0; transition: 0.15s;
  background: rgba(0, 0, 0, 0.35);
}
.tt-video:hover .tt-video-play { opacity: 1; }
.tt-video-title {
  font-size: 12.5px; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.tt-player { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(4, 4, 8, 0.82); z-index: 5; }
.tt-player-frame {
  width: min(92%, 360px); aspect-ratio: 9 / 16; max-height: 84vh; border-radius: 16px;
  overflow: hidden; background: #000; border: 1px solid var(--line-strong);
}
.tt-player-frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.tt-player-close {
  position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 50%;
  color: var(--text); background: rgba(255, 255, 255, 0.12); border: 1px solid var(--line-strong);
}

/* ---------- YouTube channel bar ---------- */
.yt-channel-form {
  display: flex; align-items: center; gap: 8px; margin: 0 0 12px;
  padding: 7px 8px 7px 12px; border: 1px solid var(--line); border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
}
.yt-channel-form > span { color: var(--dim); font-size: 13px; }
.yt-channel-form input {
  flex: 1; min-width: 0; padding: 2px 0; background: none; border: 0; outline: none;
  color: var(--text); font-size: 13.5px;
}
.yt-channel-form button {
  padding: 7px 12px; border-radius: 9px; font-size: 12.5px; white-space: nowrap;
  color: var(--muted); border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.05);
  transition: 0.15s;
}
.yt-channel-form button:hover { color: var(--text); background: rgba(255, 255, 255, 0.1); }

.yt-scope {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px; padding: 8px 12px;
  border-radius: 12px; background: var(--accent-soft); border: 1px solid var(--line-strong);
  font-size: 12.5px; color: var(--muted);
}
.yt-scope b { color: var(--text); font-weight: 650; }
.yt-scope button {
  margin-left: auto; padding: 5px 10px; border-radius: 8px; font-size: 11.5px;
  border: 1px solid var(--line-strong); background: rgba(255, 255, 255, 0.06); color: var(--muted);
}
.yt-scope button:hover { color: var(--text); }

.yt-channel-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 0 0 16px;
  padding: 14px; border-radius: 16px; border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
}
.yt-channel-card .yt-avatar {
  width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  background: #1b1b26; flex: 0 0 auto;
}
.yt-channel-card .yt-channel-info { flex: 1 1 200px; min-width: 0; }
.yt-channel-card .yt-channel-name { display: block; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.yt-channel-card .yt-channel-meta { display: block; margin-top: 3px; font-size: 12.5px; color: var(--dim); }
.yt-channel-card .yt-channel-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.yt-channel-card .btn { width: auto; padding: 8px 12px; font-size: 12.5px; text-decoration: none; }
.yt-channel-card .yt-channel-actions { margin-left: auto; }

/* ---------- TikTok ---------- */
.tt-brand .tt-note { color: #25f4ee; text-shadow: 2px 2px 0 #fe2c55; }
.tt-profile { display: grid; gap: 14px; max-width: 640px; }
.tt-card {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center; padding: 16px;
  border-radius: 18px; border: 1px solid var(--line); background: rgba(255, 255, 255, 0.04);
}
.tt-card img.tt-avatar {
  width: 68px; height: 68px; border-radius: 50%; object-fit: cover;
  background: #1b1b26; flex: 0 0 auto;
}
.tt-info { flex: 1 1 220px; min-width: 0; }
.tt-name { display: block; font-size: 17px; font-weight: 650; letter-spacing: -0.01em; }
.tt-handle { display: block; margin-top: 2px; font-size: 13px; color: var(--dim); }
.tt-stats { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; }
.tt-stats span { font-size: 12.5px; color: var(--muted); }
.tt-stats b { color: var(--text); font-size: 14px; }
.tt-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.tt-actions .btn { width: auto; padding: 8px 12px; font-size: 12.5px; text-decoration: none; }
.tt-note-card {
  padding: 14px 16px; border-radius: 16px; border: 1px dashed var(--line-strong);
  color: var(--dim); font-size: 12.5px; line-height: 1.5;
}
.yt-thumb.no-thumb { background: linear-gradient(140deg, rgba(139, 124, 255, 0.28), rgba(62, 224, 200, 0.16)); }
.yt-len {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 5px; border-radius: 5px;
  font-size: 11px; font-weight: 600; color: #fff; background: rgba(0, 0, 0, 0.82);
}
.yt-len.live { background: #ff2f45; letter-spacing: 0.04em; }
.yt-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.yt-title {
  font-size: 13.5px; font-weight: 600; line-height: 1.35; color: var(--text);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.yt-card:hover .yt-title { color: var(--accent); }
.yt-meta {
  font-size: 12px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.start { position: absolute; inset: 0; overflow-y: auto; padding: 44px min(7vw, 76px); }
.eyebrow { margin: 0 0 8px; font-size: 11px; letter-spacing: 0.28em; color: var(--dim); }
.start-title { margin: 0 0 22px; font-size: clamp(26px, 3.4vw, 38px); letter-spacing: -0.03em; font-weight: 650; }
.start-title span { background: linear-gradient(100deg, var(--accent), var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.hero-search {
  display: flex; align-items: center; gap: 10px; max-width: 640px; padding: 6px 6px 6px 16px;
  border-radius: 16px; background: var(--panel); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35);
}
.hero-search svg { width: 17px; height: 17px; color: var(--muted); flex: none; }
.hero-search input { flex: 1; background: none; border: 0; outline: none; padding: 10px 0; font-size: 15px; }
.hero-search button {
  padding: 9px 18px; border-radius: 11px; font-size: 13.5px; font-weight: 600; color: #0a0a12;
  background: linear-gradient(100deg, var(--accent), var(--accent-2));
}

.quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; max-width: 760px; margin: 26px 0 34px; }
.quick {
  display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px;
  background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); transition: 0.16s;
  text-align: left;
}
.quick:hover { transform: translateY(-2px); border-color: var(--line-strong); background: rgba(255, 255, 255, 0.06); }
.quick .tile {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center;
  font-size: 13px; font-weight: 700; color: #0a0a12; background: linear-gradient(140deg, var(--accent), var(--accent-2));
  flex: none;
}
.quick span { font-size: 12.5px; color: #d6d6e4; overflow: hidden; text-overflow: ellipsis; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; max-width: 760px; }
.mini-card { padding: 16px 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.028); border: 1px solid var(--line); }
.mini-card h3 { margin: 0 0 6px; font-size: 13.5px; }
.mini-card p { margin: 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }

.frame-error {
  position: absolute; inset: 0; display: grid; place-content: center; gap: 8px; text-align: center;
  padding: 30px; background: var(--bg);
}
.frame-error h3 { margin: 0; font-size: 18px; }
.frame-error p { margin: 0 0 10px; color: var(--muted); font-size: 14px; }

/* ---------- dock ---------- */

.dock {
  display: flex; flex-direction: column; min-width: 0;
  border-left: 1px solid var(--line); background: rgba(10, 10, 16, 0.72);
  backdrop-filter: blur(20px);
}
.dock-tabs { display: flex; align-items: center; gap: 4px; padding: 9px 10px; border-bottom: 1px solid var(--line); }
.dock-tab { padding: 7px 12px; border-radius: 9px; font-size: 12.5px; color: var(--muted); }
.dock-tab:hover { color: var(--text); background: rgba(255, 255, 255, 0.05); }
.dock-tab.on { background: rgba(255, 255, 255, 0.09); color: #fff; }
.dock-close { margin-left: auto; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 8px; color: var(--dim); }
.dock-close:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.dock-close svg { width: 15px; height: 15px; }
.dock-panel { display: flex; flex-direction: column; min-height: 0; flex: 1; }

.presence { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.live { display: inline-flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: 0.16em; color: var(--muted); text-transform: uppercase; }
.live i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent-2); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { opacity: 0.35; } }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 9px; }
.chip {
  padding: 4px 9px; border-radius: 999px; font-size: 11.5px; color: #cfcfe0;
  background: rgba(255, 255, 255, 0.05); border: 1px solid var(--line);
}
.chip.you { border-color: var(--accent); color: var(--accent); }

.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; scrollbar-width: thin; }
.messages::-webkit-scrollbar { width: 6px; }
.messages::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.12); border-radius: 99px; }

.msg { max-width: 88%; }
.msg .who { font-size: 11px; color: var(--dim); margin: 0 0 3px 2px; display: flex; gap: 6px; align-items: baseline; }
.msg .who time { font-size: 10px; color: #565668; }
.msg p { margin: 0; padding: 9px 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); font-size: 13.5px; overflow-wrap: anywhere; }
.msg.you { align-self: flex-end; }
.msg.you .who { justify-content: flex-end; }
.msg.you p { background: linear-gradient(135deg, var(--accent-soft), rgba(62, 224, 200, 0.12)); border: 1px solid rgba(139, 124, 255, 0.28); }
.msg.system { max-width: 100%; }
.msg.system p { background: none; color: var(--dim); font-size: 12px; padding: 0; }
.msg.ai p { background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line); }

.composer { display: flex; gap: 8px; padding: 10px 12px 6px; border-top: 1px solid var(--line); }
.composer input {
  flex: 1; padding: 10px 13px; border-radius: 11px; background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line); outline: none; font-size: 13.5px;
}
.composer input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.send { width: 38px; display: grid; place-items: center; border-radius: 11px; color: #0a0a12; background: linear-gradient(140deg, var(--accent), var(--accent-2)); }
.send svg { width: 17px; height: 17px; }
.dock-note { margin: 0; padding: 0 14px 12px; font-size: 11px; color: var(--dim); }

.ai-head { display: flex; gap: 11px; align-items: center; padding: 14px; border-bottom: 1px solid var(--line); }
.ai-orb {
  width: 36px; height: 36px; border-radius: 12px; display: grid; place-items: center;
  background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #08080e; font-size: 17px;
}
.ai-head b { display: block; font-size: 13.5px; }
.ai-head span { font-size: 11.5px; color: var(--dim); }
.ai-messages .msg { max-width: 96%; }

/* ---------- settings ---------- */

.sheet {
  width: min(520px, calc(100vw - 32px)); max-height: 84vh; padding: 0;
  border-radius: 22px; border: 1px solid var(--line-strong); background: var(--panel-solid);
  color: var(--text); box-shadow: var(--shadow);
}
.sheet::backdrop { background: rgba(4, 4, 8, 0.7); backdrop-filter: blur(6px); }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 20px; border-bottom: 1px solid var(--line); margin: 0; }
.sheet-head h2 { margin: 0; font-size: 17px; }
.icon-btn { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: var(--muted); }
.icon-btn:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.sheet-body { padding: 8px 20px 22px; overflow-y: auto; max-height: calc(84vh - 70px); }
.setting { padding: 16px 0; border-bottom: 1px solid var(--line); }
.setting:last-child { border-bottom: 0; }
.setting h3 { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.2em; color: var(--dim); text-transform: uppercase; }
.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; font-size: 13.5px; color: #d2d2e0; }
.row:last-child { margin-bottom: 0; }
.row select, .row input[type='text'], .row input:not([type]) {
  padding: 8px 10px; border-radius: 9px; background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--line-strong); outline: none; min-width: 150px; font-size: 13px;
}
.row input[type='checkbox'] { width: 16px; height: 16px; accent-color: var(--accent); }
.swatches { display: flex; gap: 8px; }
.sw { width: 26px; height: 26px; border-radius: 9px; background: var(--s); border: 2px solid transparent; box-shadow: 0 0 0 1px var(--line); }
.sw.on { border-color: #fff; box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- toasts ---------- */

.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: flex; flex-direction: column; gap: 8px; }
.toast {
  padding: 11px 15px; border-radius: 12px; font-size: 13px; color: var(--text);
  background: rgba(24, 24, 34, 0.96); border: 1px solid var(--line-strong);
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5); animation: toast-in 0.2s ease-out;
}
.toast.bad { border-color: rgba(255, 122, 138, 0.5); }
@keyframes toast-in { from { opacity: 0; transform: translateY(6px); } }

/* ---------- responsive ---------- */

@media (max-width: 1080px) {
  .app { grid-template-columns: 60px minmax(0, 1fr) 300px; }
}

@media (max-width: 900px) {
  /* The dock parks off-screen to the right on phones; without this the whole
     page Pans sideways by its width. And 100dvh keeps the composer above the
     iOS/Android browser chrome instead of under it. */
  html, body { overflow-x: hidden; }
  .auth { grid-template-columns: 1fr; gap: 34px; padding: 40px 22px; align-items: start; }
  .feature-list { display: none; }
  .app { grid-template-columns: 56px minmax(0, 1fr); }
  .dock {
    position: fixed; right: 0; top: 0; bottom: 0; width: min(340px, 88vw); z-index: 40;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5); transform: translateX(100%); transition: transform 0.22s;
  }
  .app.dock-open .dock { transform: none; }
  .app.dock-hidden { grid-template-columns: 56px minmax(0, 1fr); }
  .app.dock-hidden .dock { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  /* The bar's fill is an animation, so it would sit empty for the whole
     cover. With motion off, show it complete and let the copy carry the
     message. */
  .splash-bar i { transform: scaleX(1); }
}

/* ---------- study cover (first five seconds of a page load) ----------
   A self-contained light theme on purpose: it reads as a different app from
   the dark browser behind it. Presentational only — the app boots underneath
   and keeps working whenever this element is removed. */

.splash {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 22px;
  padding: 24px clamp(18px, 5vw, 52px) 20px;
  background: #f5f6fa;
  color: #1b2233;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  overflow: auto;
  transition: opacity 0.4s ease;
}
.splash.is-out { opacity: 0; pointer-events: none; }

.splash-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; font-size: 12.5px; color: #667085;
}
.splash-logo {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: #1b2233;
}
.splash-logo i {
  display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px;
  background: #1f6feb; color: #fff; font-style: normal; font-size: 15px;
}
.splash-term {
  padding: 4px 11px; border: 1px solid #e2e6ef; border-radius: 999px; background: #fff;
}

.splash-card {
  align-self: center; width: min(520px, 100%); padding: clamp(22px, 4vw, 32px);
  background: #fff; border: 1px solid #e7eaf2; border-radius: 16px;
  box-shadow: 0 18px 44px rgba(24, 34, 61, 0.08);
}
.splash-kicker {
  margin: 0 0 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.14em; color: #8792a8;
}
.splash-card h1 { margin: 0; font-size: clamp(20px, 3.4vw, 25px); letter-spacing: -0.02em; }
.splash-sub { margin: 8px 0 18px; font-size: 13.5px; color: #5d6a80; }

.splash-bar { height: 6px; border-radius: 999px; background: #edf0f6; overflow: hidden; }
.splash-bar i {
  display: block; height: 100%; border-radius: inherit; transform-origin: left;
  background: linear-gradient(90deg, #1f6feb, #4f9dff);
  animation: splash-fill 5s linear forwards;
}
@keyframes splash-fill { from { transform: scaleX(0.03); } to { transform: scaleX(1); } }

.splash-list { display: grid; gap: 9px; margin: 20px 0 0; padding: 0; list-style: none; }
.splash-list li {
  display: flex; justify-content: space-between; gap: 12px; padding: 10px 12px;
  border-radius: 10px; background: #f7f9fc; font-size: 13px;
}
.splash-list b { font-weight: 600; }
.splash-list span { color: #7b879c; }

.splash-foot { margin: 0; text-align: center; font-size: 11.5px; color: #99a2b5; }

@media (max-width: 520px) {
  .splash { padding: 18px 16px 16px; }
  .splash-term { display: none; }
}