:root {
  color-scheme: dark;
  --bg: #0b1016;
  --side: #0e131c;
  --panel: #161b25;
  --panel-2: #121820;
  --border: #273140;
  --muted: #8e9bb1;
  --text: #f3f7ff;
  --cyan: #10d7f6;
  --cyan-2: #0995ad;
  --purple: #7c4dff;
  --gold: #ffb01f;
  --red: #ff4859;
  --green: #24d18f;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Times New Roman", Times, serif;
  font-size: 14px;
  letter-spacing: 0;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }
button { cursor: pointer; }

#app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px minmax(0, 1fr);
}

.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  padding: 18px 16px 20px;
  background: linear-gradient(180deg, #111722, #0b1017);
  border-right: 1px solid var(--border);
}

.brand {
  display: block;
  margin-bottom: 18px;
}

.brand img {
  display: block;
  width: 164px;
  height: 58px;
  object-fit: cover;
  object-position: 50% 53%;
}

.brand span {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  color: #071116;
  font-weight: 900;
}

.brand strong { font-size: 17px; color: #26dfff; }
.brand small { grid-column: 2; color: var(--muted); font-size: 10px; margin-top: -5px; }

.snap-card {
  position: relative;
  min-height: 236px;
  overflow: hidden;
  border: 2px solid var(--gold);
  border-radius: 9px;
  background: #0c1118;
  box-shadow: 0 0 0 1px #000 inset;
}

.portrait {
  height: 142px;
  background:
    radial-gradient(circle at 50% 22%, #ffe3c3 0 17%, transparent 18%),
    linear-gradient(65deg, transparent 42%, #101721 43% 54%, transparent 55%),
    radial-gradient(circle at 48% 34%, #6b3b21 0 18%, transparent 19%),
    linear-gradient(135deg, #f7f7fb 0 35%, #111827 36% 64%, #d7dee9 65%);
}

.small-card-face { height: 170px; }
.premium-ribbon, .premium-label {
  position: absolute;
  top: 9px;
  right: 8px;
  z-index: 2;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gold);
  color: #231300;
  font-size: 10px;
  font-weight: 800;
}

.stars, .poster-stars { color: var(--gold); font-size: 18px; letter-spacing: 1px; padding-left: 10px; }
.snap-card > strong, .snap-card > small { display: block; padding-left: 12px; }
.snap-card > small { color: #e7ba4d; font-size: 10px; }

.snap-logo {
  display: flex;
  align-items: center;
  gap: 3px;
  margin: 7px 10px;
  width: fit-content;
  padding: 5px 7px;
  border: 4px solid var(--gold);
  border-radius: 10px;
  background: #030508;
  color: #111;
  font-weight: 900;
}

.snap-logo b {
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--gold);
  border: 2px solid var(--gold);
  font-size: 12px;
}

.snap-logo span { background: var(--gold); padding: 2px 5px; }
.snap-logo i { color: var(--gold); font-style: normal; padding: 2px 4px; }

.mini-metric, .pro-tip {
  margin: 12px 0 18px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #1a2030;
}

.mini-metric span, .mini-metric small, .pro-tip span { color: var(--muted); font-size: 11px; }
.mini-metric strong { display: block; font-size: 20px; margin-top: 6px; }

nav { display: grid; gap: 4px; border-top: 1px solid #222b38; padding-top: 12px; }
nav a, .plain-action {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 31px;
  padding: 7px 8px;
  border-radius: 7px;
  color: #dce6f5;
}

nav a b { flex: 1; font-size: 13px; }
nav a em {
  min-width: 22px;
  padding: 3px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--purple), var(--cyan));
  font-style: normal;
  text-align: center;
  font-size: 10px;
}

nav a.active {
  background: #243045;
  color: #fff;
  box-shadow: inset 3px 0 0 var(--cyan), 0 0 22px rgba(16, 215, 246, .12);
}

.nav-section {
  margin: 14px 8px 4px;
  color: #7d8ca1;
  text-transform: uppercase;
  font-size: 10px;
}

.pro-tip {
  border-color: #0d7286;
  background: linear-gradient(135deg, rgba(16, 215, 246, .14), rgba(16, 215, 246, .04));
}

.pro-tip strong { display: block; color: var(--cyan); font-size: 11px; margin-bottom: 4px; }
.plain-action { color: #aab6c9; margin-top: 8px; }

.workspace {
  min-width: 0;
  padding: 18px 22px 28px;
  background: #0b1016;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: grid;
  grid-template-columns: 1fr minmax(220px, 340px) 1fr;
  align-items: center;
  gap: 16px;
  min-height: 52px;
  margin: -18px -22px 18px;
  padding: 8px 22px;
  background: rgba(11, 16, 22, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(39, 49, 64, .6);
}

.crumbs, .top-actions { display: flex; align-items: center; gap: 12px; color: #9dadc4; font-size: 12px; }
.crumbs b { color: #fff; background: #1d2431; padding: 6px 9px; border-radius: 8px; }

.search, .wide-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #0c1219;
  color: #9dadc4;
}

.search input, .wide-search input { width: 100%; background: transparent; border: 0; outline: 0; color: #fff; }
kbd { padding: 2px 6px; border-radius: 5px; background: #202838; color: #c5d4e8; font-size: 11px; }

.top-actions { justify-content: end; }
.top-actions button {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #101721;
  color: #dbe6f6;
  padding: 6px 10px;
  font-size: 12px;
}

.alert {
  background: var(--red);
  border-radius: 999px;
  padding: 2px 6px;
  color: #fff;
  font-size: 11px;
  margin-left: -18px;
}

.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #2c3447;
  color: #fff;
  font-weight: 800;
}

.tiny { width: 30px; height: 30px; font-size: 10px; }

.account-menu {
  position: relative;
}

.account-menu .avatar {
  border: 1px solid var(--border);
  padding: 0;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 40;
  display: none;
  width: 220px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111821;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .42);
}

.account-dropdown.open {
  display: grid;
  gap: 6px;
}

.account-dropdown strong {
  color: #f8fbff;
  font-size: 14px;
}

.account-dropdown small {
  color: var(--muted);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  overflow-wrap: anywhere;
}

.account-dropdown button {
  width: 100%;
  text-align: left;
  border: 1px solid transparent;
  background: transparent;
  color: #dbe6f6;
  padding: 8px 9px;
}

.account-dropdown button:hover {
  border-color: rgba(16, 215, 246, .24);
  background: rgba(16, 215, 246, .08);
}

.account-dropdown button.danger {
  color: #ff7280;
}

.completion, .panel, .hero-card, .page-title, .storage {
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}

.completion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  margin-bottom: 18px;
  border-color: #0b6479;
  background: linear-gradient(135deg, #10242d, #121a25);
}

.completion strong, .completion small { display: block; }
.completion small, .panel p, .panel small, .page-title p, .video-header p { color: var(--muted); }
button {
  border: 0;
  border-radius: 8px;
  padding: 9px 14px;
  background: #111821;
  color: #e9f3ff;
}

.landing-page {
  grid-column: 1 / -1;
  min-height: 100vh;
  background: #111821;
  color: #f7fbff;
  overflow: hidden;
}

.landing-nav {
  position: absolute;
  top: 58px;
  left: 50%;
  z-index: 5;
  transform: translateX(-50%);
  width: min(900px, calc(100% - 40px));
  display: grid;
  grid-template-columns: 180px 1fr 270px;
  align-items: center;
  gap: 20px;
  border: 0;
  padding: 0;
}

.landing-nav > div {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
}

.landing-nav a {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 700;
}

.landing-nav button,
.landing-cta button,
.landing-corporate button {
  border: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(135deg, #08d9ff, #7c4dff);
  color: #001116;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(16, 215, 246, .22);
}

.landing-nav button.dark,
.landing-cta .ghost {
  background: rgba(4, 8, 13, .58);
  color: #f8fbff;
  box-shadow: none;
}

.snapume-logo {
  display: block;
  object-fit: cover;
  object-position: 50% 53%;
}

.snapume-logo.hero {
  width: min(430px, 84vw);
  height: 150px;
  margin-bottom: 44px;
}

.snapume-logo.mini {
  width: 142px;
  height: 50px;
}

.landing-hero {
  min-height: 760px;
  display: grid;
  place-items: center;
  align-content: center;
  padding: 132px 24px 54px;
  text-align: center;
  background:
    radial-gradient(circle at 5% 8%, rgba(0, 216, 255, .12), transparent 13%),
    radial-gradient(circle at 92% 82%, rgba(124, 77, 255, .17), transparent 12%),
    linear-gradient(180deg, #08161b 0%, #111821 100%);
}

.landing-pills {
  display: flex;
  gap: 5px;
  justify-content: center;
  margin-bottom: 12px;
}

.landing-pills span,
.landing-pills em,
.contest-pill,
.landing-corporate span,
.landing-final span {
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(16, 215, 246, .12);
  border: 1px solid rgba(16, 215, 246, .35);
  color: #10d7f6;
  font-style: normal;
  font-weight: 800;
  font-size: 12px;
}

.landing-pills em {
  background: #202833;
  border-color: #2d3848;
  color: #9aa8ba;
}

.landing-hero h1 {
  margin: 0;
  font-size: clamp(42px, 4.2vw, 54px);
  line-height: .9;
  letter-spacing: 0;
}

.landing-hero h2,
.landing-hero h3 {
  margin: 7px 0 0;
  font-size: clamp(29px, 3.5vw, 42px);
  line-height: 1.02;
}

.landing-hero h3 span,
.landing-videos span,
.landing-features span,
.landing-steps span,
.landing-testimonials span,
.landing-contest h2 span {
  background: linear-gradient(135deg, #10d7f6, #7c4dff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.landing-hero p {
  max-width: 580px;
  margin: 22px auto 0;
  color: #d6deeb;
  font-size: 18px;
  line-height: 1.25;
}

.landing-repeat {
  font-weight: 900;
  letter-spacing: 1px;
}

.landing-cta {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 28px;
}

.landing-cta button {
  min-width: 190px;
  padding: 15px 22px;
  border-radius: 10px;
}

.landing-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 60px;
  margin-top: 32px;
}

.landing-auth {
  width: min(760px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 18px;
  align-items: center;
  margin: 30px auto 0;
  padding: 18px;
  border: 1px solid rgba(16, 215, 246, .22);
  border-radius: 14px;
  background: rgba(14, 22, 32, .78);
  box-shadow: 0 18px 42px rgba(0, 0, 0, .28);
  text-align: left;
}

.landing-auth span {
  color: var(--cyan);
  font-weight: 900;
  font-size: 12px;
}

.landing-auth h2 {
  margin: 6px 0 8px;
  font-size: 24px;
}

.landing-auth p {
  margin: 0;
  color: #9aa8ba;
  font-size: 14px;
  line-height: 1.45;
}

.landing-auth-actions {
  display: grid;
  gap: 10px;
}

.landing-auth-actions > button,
.landing-auth-actions form button {
  background: linear-gradient(135deg, #08d9ff, #7c4dff);
  color: #001116;
  font-weight: 900;
}

.landing-auth-actions form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.landing-auth-actions input {
  min-width: 0;
  border: 1px solid #2d3848;
  border-radius: 8px;
  background: #0c1219;
  color: #fff;
  padding: 10px 12px;
}

.professionals-page {
  grid-column: 1 / -1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 24px;
  padding: 46px 20px;
  background:
    radial-gradient(circle at 50% 12%, rgba(16, 215, 246, .12), transparent 22%),
    radial-gradient(circle at 86% 82%, rgba(124, 77, 255, .16), transparent 18%),
    #081016;
}

.professionals-logo {
  display: block;
}

.professionals-logo .snapume-logo.hero {
  width: min(460px, 88vw);
  height: 160px;
  margin: 0 auto;
}

.professionals-auth {
  width: min(760px, calc(100vw - 36px));
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 20px;
  align-items: center;
  padding: 24px;
  border: 1px solid rgba(16, 215, 246, .28);
  border-radius: 16px;
  background: rgba(14, 22, 32, .88);
  box-shadow: 0 22px 56px rgba(0, 0, 0, .38);
}

.professionals-auth span {
  color: var(--cyan);
  font-weight: 900;
  font-size: 12px;
}

.professionals-auth h1 {
  margin: 8px 0;
  font-size: 30px;
  line-height: 1.05;
}

.professionals-auth p {
  margin: 0;
  color: #9aa8ba;
  line-height: 1.5;
}

.professionals-auth-actions {
  display: grid;
  gap: 11px;
}

.professionals-auth-actions > button,
.professionals-auth-actions form button {
  background: linear-gradient(135deg, #08d9ff, #7c4dff);
  color: #001116;
  font-weight: 900;
}

.professionals-auth-actions form {
  display: grid;
  gap: 9px;
}

.professionals-auth-actions input {
  min-width: 0;
  border: 1px solid #2d3848;
  border-radius: 8px;
  background: #0c1219;
  color: #fff;
  padding: 11px 12px;
}

.professionals-back {
  border: 1px solid var(--border);
  background: rgba(17, 24, 33, .72);
}

.landing-metrics b {
  display: grid;
  gap: 4px;
  color: #20b9ff;
  font-size: 26px;
}

.landing-metrics small {
  color: #8f9aad;
  font-size: 12px;
  font-weight: 400;
}

.landing-videos,
.landing-features,
.landing-steps,
.landing-testimonials,
.landing-corporate,
.landing-final,
.landing-footer {
  padding: 86px 24px;
  border-top: 1px solid rgba(255,255,255,.04);
}

.landing-videos,
.landing-features,
.landing-steps,
.landing-testimonials {
  text-align: center;
  background: #171c25;
}

.landing-videos h2,
.landing-contest h2,
.landing-features h2,
.landing-steps h2,
.landing-testimonials h2,
.landing-final h2 {
  margin: 0;
  font-size: 36px;
}

.landing-videos > p,
.landing-features > p,
.landing-steps > p,
.landing-testimonials > p,
.landing-final p {
  color: #9aa8ba;
  font-size: 16px;
}

.landing-video-grid {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin: 54px auto 0;
}

.landing-video-card video,
.landing-video-placeholder {
  width: 100%;
  aspect-ratio: 9 / 16;
  border: 1px solid #293446;
  border-radius: 12px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), transparent),
    radial-gradient(circle at 50% 30%, rgba(16, 215, 246, .28), transparent 24%),
    #0b111a;
  box-shadow: 0 18px 36px rgba(0,0,0,.45);
}

.landing-video-placeholder {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 8px;
  color: #f8fbff;
}

.landing-video-placeholder span {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 4px solid #ffcc19;
  color: #ffcc19;
}

.landing-video-card > small {
  display: block;
  margin-top: 16px;
  color: #9aa8ba;
}

.landing-contest {
  text-align: center;
  background:
    radial-gradient(circle at 10% 20%, rgba(124,77,255,.24), transparent 22%),
    radial-gradient(circle at 88% 38%, rgba(255,176,31,.2), transparent 16%),
    #10151f;
}

.landing-contest h2 {
  margin-top: 28px;
  font-size: 48px;
}

.landing-contest > p {
  color: #9aa8ba;
  font-size: 22px;
}

.contest-panel,
.prize-grid,
.landing-features > div,
.landing-steps > div,
.landing-testimonials > div {
  max-width: 980px;
  margin: 42px auto 0;
}

.contest-panel {
  padding: 24px;
  border: 1px solid #283345;
  border-radius: 14px;
  background: rgba(22, 27, 37, .78);
}

.contest-panel h3 span { color: #10d7f6; }
.contest-panel div,
.prize-grid,
.landing-features > div,
.landing-testimonials > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.contest-panel article,
.prize-grid article,
.landing-features article,
.landing-testimonials article {
  padding: 24px;
  border: 1px solid #283345;
  border-radius: 12px;
  background: #171c25;
  text-align: left;
}

.prize-grid strong {
  display: block;
  color: #ffb01f;
  font-size: 32px;
}

.landing-features > div {
  grid-template-columns: repeat(3, 1fr);
}

.landing-features article b {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #10d7f6;
  color: #031117;
  font-size: 22px;
}

.landing-features article p,
.landing-steps article p,
.landing-testimonials article p {
  color: #9aa8ba;
  line-height: 1.55;
}

.landing-steps {
  background: #0d141b;
}

.landing-steps > div {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
}

.landing-steps article b {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: linear-gradient(135deg, #10d7f6, #7c4dff);
  color: #001116;
  font-size: 20px;
}

.landing-corporate {
  max-width: 980px;
  margin: 0 auto;
  background: #171c25;
}

.landing-corporate h2 {
  font-size: 36px;
  margin: 24px 0 14px;
}

.landing-corporate p {
  color: #9aa8ba;
  font-size: 17px;
}

.landing-corporate div {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  max-width: 620px;
  gap: 22px;
  margin: 28px 0;
}

.landing-final {
  text-align: center;
  background:
    radial-gradient(circle at 50% 0%, rgba(16, 215, 246, .12), transparent 25%),
    #0d141b;
}

.landing-footer {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 2fr repeat(4, 1fr);
  gap: 44px;
}

.landing-footer div {
  display: grid;
  align-content: start;
  gap: 12px;
  color: #8f9aad;
}

.landing-footer h3 { margin: 0; }
.landing-footer h3 img {
  width: 170px;
  height: 60px;
  display: block;
  object-fit: cover;
  object-position: 50% 53%;
}

.admin-landing form {
  display: grid;
  gap: 14px;
}

.admin-landing-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.admin-landing-list article {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #111821;
}

.admin-landing-list span,
.admin-landing-list small {
  color: var(--muted);
}

@media (max-width: 860px) {
  .landing-nav {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    width: 100%;
    grid-template-columns: 1fr;
    padding: 18px;
    background: #081218;
  }

  .landing-nav > div,
  .landing-video-grid,
  .landing-auth,
  .contest-panel div,
  .prize-grid,
  .landing-features > div,
  .landing-steps > div,
  .landing-testimonials > div,
  .landing-corporate div,
  .landing-footer,
  .admin-landing-list,
  .landing-metrics {
    grid-template-columns: 1fr;
  }

  .landing-hero {
    min-height: auto;
    padding-top: 80px;
  }

  .landing-auth-actions form {
    grid-template-columns: 1fr;
  }

  .professionals-auth {
    grid-template-columns: 1fr;
  }

  .professionals-logo .snapume-logo.hero {
    width: min(320px, 86vw);
    height: 112px;
  }

  .snapume-logo.hero { width: min(320px, 86vw); height: 112px; }
}
.completion button, .panel header button, .media button, .timeline button, .snap-score button {
  background: var(--cyan);
  color: #001116;
  font-weight: 800;
}

.hero-card {
  position: relative;
  min-height: 316px;
  overflow: hidden;
  margin-bottom: 22px;
}

.hero-banner {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  background:
    radial-gradient(circle at 20% 10%, rgba(29, 224, 237, .42), transparent 18%),
    linear-gradient(120deg, #102025 0 35%, #00846f 40%, #0b3d38 70%, #071116);
  color: #dccd62;
  font-size: 27px;
  font-weight: 900;
}

.play-mark {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 7px solid var(--gold);
  color: var(--gold);
  background: #060706;
}

.banner-logo {
  display: flex;
  border-radius: 18px;
  overflow: hidden;
  border: 5px solid var(--gold);
  background: #050505;
  font-size: 42px;
}
.banner-logo span { background: var(--gold); color: #080808; padding: 8px 18px; }
.banner-logo i { color: var(--gold); font-style: normal; padding: 8px 18px; }

.profile-id {
  position: absolute;
  left: 24px;
  bottom: 22px;
  display: flex;
  align-items: end;
  gap: 18px;
}

.hero-snap { width: 132px; min-height: 190px; }
.hero-snap .portrait { height: 106px; }
.profile-id h1 { margin: 0 0 4px; font-size: 28px; }
.profile-id p, .profile-id small { margin: 0; color: #aab8cd; }
.profile-id em { font-size: 12px; font-style: normal; color: white; background: var(--gold); border-radius: 999px; padding: 4px 7px; }
.verified { color: var(--cyan); }
.gold-dot { color: var(--gold); font-size: 15px; }

.hero-actions {
  position: absolute;
  right: 22px;
  top: 112px;
  display: flex;
  gap: 8px;
}
.hero-actions button { background: rgba(10, 14, 20, .82); border: 1px solid rgba(255,255,255,.12); }

.panel { padding: 20px; margin-bottom: 22px; }
.panel header, .video-header, .storage header, .recommend-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}
.panel h2, .panel h3, .page-title h1, .video-header h1, .video-card h2 { margin: 0; }

.intro-card {
  display: flex;
  gap: 22px;
  min-height: 210px;
  align-items: center;
  background: linear-gradient(135deg, #171e2a, #141923);
}
.profile-snap { width: 132px; min-height: 180px; flex: 0 0 auto; }

.strength header strong { color: #ff7a19; font-size: 24px; text-align: right; }
.strength header small { display: block; font-size: 11px; color: #ff7a19; }
.progress, .storage div {
  height: 13px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--purple);
}
.progress span, .storage div span {
  display: block;
  height: 100%;
  background: var(--cyan);
}
.strength ul { list-style: none; padding: 0; color: #a8b5c8; line-height: 1.9; }
.strength li.done { color: #74e3b6; }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 22px;
}

.stat {
  min-height: 100px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.stat span {
  float: left;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin-right: 16px;
  border-radius: 10px;
  background: linear-gradient(135deg, #0d9aac, #13606b);
  color: white;
}
.stat strong { display: block; font-size: 24px; }
.stat b, .stat small { display: block; }
.stat small { color: #718096; margin-top: 11px; font-size: 10px; }

.summary { border-left: 4px solid var(--cyan); }
.summary span { color: #62e7af; background: #123528; border-radius: 999px; padding: 4px 8px; font-size: 11px; }
.summary a, .panel header a { color: var(--cyan); font-weight: 700; }

.posts article {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  margin-top: 15px;
}
.posts p { color: #eef5ff; line-height: 1.45; }
.posts em {
  display: inline-block;
  margin-right: 8px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #7b4cff;
  color: #fff;
  font-style: normal;
  font-size: 11px;
}

.two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.people-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.person-mini {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 18px 12px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #111822;
}
.person-mini .avatar, .network-avatar { width: 56px; height: 56px; }
.photo {
  background:
    radial-gradient(circle at 50% 25%, #ffd9b8 0 20%, transparent 21%),
    linear-gradient(135deg, #f8fafc 0 40%, #1b2536 41%);
}
.person-mini button, .empty-box button { width: 100%; border: 1px solid var(--border); }
.empty-box > div, .media > div {
  display: grid;
  place-items: center;
  min-height: 190px;
  border: 1px dashed #3a4557;
  border-radius: 8px;
  color: var(--muted);
  text-align: center;
}

.snap-score { display: flex; align-items: center; gap: 24px; }
.score-orbit {
  width: 96px;
  height: 96px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 2px dashed #e24556;
  color: var(--cyan);
  font-size: 28px;
}
.badges > div { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 24px; }
.badges span { display: grid; place-items: center; min-height: 70px; background: #141a24; border-radius: 8px; color: var(--muted); }

.skill-row, .timeline article {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
  margin-top: 14px;
}
.skill-row header, .domain-row header { display: flex; justify-content: space-between; }
.skill-row div, .domain-row div {
  height: 7px;
  margin: 10px 0;
  background: #222837;
  border-radius: 999px;
  overflow: hidden;
}
.skill-row div span { display: block; height: 100%; background: linear-gradient(90deg, var(--cyan), var(--purple)); }
.skill-row p { font-size: 11px; margin: 0; }

.domain-row {
  position: relative;
  margin-top: 18px;
}
.domain-row div { background: var(--purple); }
.domain-row div span { display: block; height: 100%; }
.domain-row .gold { background: var(--gold); color: var(--gold); }
.domain-row .red { background: var(--red); color: var(--red); }
.domain-row em {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  font-style: normal;
}
.domain-row strong { position: absolute; right: 0; bottom: -6px; }

.timeline article { display: flex; align-items: center; gap: 18px; }
.timeline article span {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--cyan);
}
.timeline article div { flex: 1; }
.timeline h4, .timeline p { margin: 4px 0; }
.media > div { min-height: 160px; margin-top: 18px; }
.compact { grid-template-columns: repeat(4, 1fr); }
.compact .stat { min-height: 58px; padding: 10px; }
.compact .stat span, .compact .stat small, .compact .stat b { display: none; }
.bottom-panels { align-items: stretch; }

.placeholder-panel {
  min-height: 320px;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 14px;
}

.placeholder-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.placeholder-actions a {
  padding: 10px 14px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #111821;
  color: #e9f3ff;
}

.placeholder-actions a:first-child {
  background: var(--cyan);
  color: #001116;
  font-weight: 800;
}

.page-title {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 28px;
  margin-bottom: 22px;
}
.page-title span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--cyan);
  color: #051117;
  font-size: 24px;
}
.gradient-title {
  background: radial-gradient(circle at 80% 30%, rgba(16, 215, 246, .28), transparent 28%),
    linear-gradient(120deg, #132431, #1c1d3a);
}
.network-stats { grid-template-columns: repeat(6, 1fr); }
.green { color: var(--green); }
.cyan { color: var(--cyan); }
.purple { color: var(--purple); }

.growth { display: flex; align-items: center; gap: 16px; }
.growth > span {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #073947;
  color: var(--cyan);
}
.wide-search { margin-bottom: 18px; }
.tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.tabs button, .recommend-head button { border: 1px solid var(--border); font-size: 12px; padding: 8px 12px; }
.tabs .active, .recommend-head .active { background: var(--cyan); color: #061117; font-weight: 800; }
.recommend-head { margin-bottom: 16px; }
.recommend-head h3 { margin: 0; }
.cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}
.network-card {
  position: relative;
  min-height: 300px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #131922;
}
.card-cover {
  height: 86px;
  background: linear-gradient(135deg, #2ee3c8, #3340bf);
  padding: 8px;
}
.card-cover span { padding: 3px 7px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: #dffcff; font-size: 10px; }
.card-cover button { float: right; width: 30px; height: 30px; padding: 0; border-radius: 50%; background: rgba(12,20,30,.45); }
.network-avatar {
  position: absolute;
  left: 50%;
  top: 58px;
  transform: translateX(-50%);
  border: 4px solid #0d1219;
  background-color: #55c6ff;
}
.network-card strong {
  display: block;
  margin-top: 44px;
  text-align: center;
}

.network-card > small {
  display: block;
  color: var(--muted);
  text-align: center;
  margin-top: 5px;
}

.signal-tags {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 12px 12px 0;
}

.signal-tags span {
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(16, 215, 246, .12);
  border: 1px solid rgba(16, 215, 246, .22);
  color: #baf6ff;
  font-size: 11px;
}

.network-card ul {
  margin: 12px 18px 0;
  padding-left: 18px;
  color: #b7c4d5;
  line-height: 1.5;
  font-size: 12px;
}
.network-card em, .profile-id em {
  background: var(--gold);
  color: #291900;
  border-radius: 999px;
  padding: 2px 5px;
  font-size: 10px;
  font-style: normal;
}
.network-card footer {
  display: grid;
  grid-template-columns: 1.6fr .7fr .7fr;
  gap: 8px;
  padding: 16px;
}
.network-card footer button:first-child {
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  color: #061117;
  font-weight: 800;
}

.video-header { margin-bottom: 20px; }
.video-header > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; justify-content: end; }
.video-header .purple { background: var(--purple); }
.storage { padding: 14px 18px; margin-bottom: 24px; }
.storage header { font-weight: 800; margin-bottom: 8px; }
.storage header span { margin-left: auto; font-weight: 500; color: #b9c7d8; }
.storage div span { width: 7%; }

.auth-panel {
  display: grid;
  grid-template-columns: 1fr minmax(280px, 420px);
  align-items: center;
  gap: 18px;
}

.auth-panel form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.auth-panel input,
.video-upload input,
.video-upload select,
.video-upload textarea,
.signal-form input,
.signal-form textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d131b;
  color: var(--text);
  padding: 11px 12px;
  outline: 0;
}

.auth-panel input:focus,
.video-upload input:focus,
.video-upload select:focus,
.video-upload textarea:focus,
.signal-form input:focus,
.signal-form textarea:focus {
  border-color: var(--cyan);
  box-shadow: 0 0 0 3px rgba(16, 215, 246, .1);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.video-upload form,
.signal-form {
  display: grid;
  gap: 14px;
}

.video-upload label,
.signal-form label {
  display: grid;
  gap: 7px;
  color: #cbd7e7;
  font-weight: 700;
}

.video-upload textarea,
.signal-form textarea {
  min-height: 88px;
  resize: vertical;
}

.file-drop {
  padding: 16px;
  border: 1px dashed #3a4557;
  border-radius: 10px;
  background: #111822;
}

.upload-preview {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  border: 1px solid rgba(16, 215, 246, .28);
  border-radius: 8px;
  background: rgba(16, 215, 246, .07);
  color: #d9f7ff;
}

.upload-preview strong {
  color: var(--cyan);
  font-size: 14px;
}

.upload-preview span {
  color: var(--muted);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.video-upload form > button {
  justify-self: start;
  background: var(--cyan);
  color: #001116;
  font-weight: 900;
}

.form-status {
  min-height: 18px;
  margin: 0;
  color: var(--muted);
}

.form-status[data-kind="success"] { color: #64e8aa; }
.form-status[data-kind="error"] { color: #ff7280; }

.empty-state {
  display: grid;
  gap: 8px;
  padding: 18px;
  border: 1px dashed rgba(148, 163, 184, .28);
  border-radius: 8px;
  background: rgba(8, 13, 20, .38);
  color: var(--muted);
}

.empty-state strong {
  color: #f8fbff;
  font-size: 15px;
}

.empty-state p {
  margin: 0;
  line-height: 1.5;
}

.admin-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.admin-toolbar div {
  display: grid;
  gap: 4px;
}

.admin-toolbar span {
  color: var(--muted);
}

.admin-table {
  overflow-x: auto;
}

.admin-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.admin-table th,
.admin-table td {
  padding: 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  color: #d6e3f5;
  font-size: 13px;
}

.admin-table th {
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
}

.admin-table td:last-child {
  display: flex;
  gap: 8px;
}

.auth-panel strong,
.video-upload header strong {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(16, 215, 246, .12);
  color: var(--cyan);
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 24px;
}
.video-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
}
.video-card h2 { font-size: 20px; }
.video-poster {
  position: relative;
  height: 600px;
  overflow: hidden;
  margin: 18px 0 12px;
  border-radius: 9px;
  background: linear-gradient(180deg, #d9cfc4, #1d2732);
}
.video-poster .poster-face {
  position: absolute;
  inset: 50px 28px 0;
  border-radius: 120px 120px 0 0;
  background:
    radial-gradient(circle at 50% 9%, #ffe1c8 0 13%, transparent 14%),
    radial-gradient(circle at 50% 15%, #704022 0 18%, transparent 19%),
    linear-gradient(145deg, #fff 0 43%, #121a25 44% 58%, #d7dfe9 59%);
}
.video-poster.female-a .poster-face,
.video-poster.female-b .poster-face {
  background:
    radial-gradient(circle at 50% 10%, #ffe0c9 0 13%, transparent 14%),
    radial-gradient(circle at 50% 19%, #7d4a2d 0 25%, transparent 26%),
    linear-gradient(145deg, #fff 0 46%, #182232 47% 64%, #cbd5e1 65%);
}
.video-poster.female-b { background: linear-gradient(160deg, #152639, #7f9ab0 52%, #101722); }
.video-poster.male { background: linear-gradient(180deg, #f4f0ee, #17212d); }
.premium-label { left: 0; right: auto; top: 24px; border-radius: 0 4px 4px 0; background: transparent; color: var(--gold); border: 4px solid var(--gold); border-left: 0; font-size: 18px; }
.poster-stars {
  position: absolute;
  left: 28px;
  bottom: 172px;
  font-size: 34px;
}
.recommended {
  position: absolute;
  left: 30px;
  bottom: 128px;
  padding: 9px 13px;
  border-radius: 999px;
  background: rgba(0,0,0,.72);
  font-weight: 900;
}
.play {
  position: absolute;
  right: 40%;
  bottom: 110px;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--cyan);
  color: white;
  font-size: 24px;
}
.poster-logo {
  position: absolute;
  left: 34px;
  bottom: 54px;
  transform: scale(1.25);
  transform-origin: left bottom;
}
.video-poster small { position: absolute; left: 12px; bottom: 12px; }
.trash { color: var(--red); padding: 0; background: transparent; }
.video-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.video-actions button, .video-card footer button { border: 1px solid var(--border); }
.video-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin: 12px 0;
  padding: 12px;
  border-radius: 8px;
  background: #1b2230;
  color: #9eacbe;
  text-align: center;
}
.video-metrics b { display: block; color: #fff; }
.ai-panel, .resume-score, .market, details {
  margin-top: 12px;
  padding: 13px;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: #141a24;
}
.ai-panel em, .market em {
  display: inline-block;
  margin: 6px 4px 0 0;
  padding: 4px 7px;
  border-radius: 999px;
  background: var(--purple);
  color: #fff;
  font-size: 10px;
  font-style: normal;
}
.resume-score { display: grid; grid-template-columns: 112px 1fr; gap: 16px; }
.donut {
  width: 104px;
  height: 104px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--score) * 1%), #293142 0);
  box-shadow: inset 0 0 0 16px #131923;
}
.donut strong { font-size: 28px; color: var(--gold); }
.donut small, .donut b { display: block; margin-top: -20px; color: #c8d3e2; }
.resume-score p { position: relative; margin: 7px 0; padding-bottom: 9px; font-size: 12px; }
.resume-score p b { float: right; color: var(--cyan); }
.resume-score p i {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 5px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}
.market { background: linear-gradient(135deg, rgba(16,215,246,.13), rgba(255,176,31,.13)); }
details summary { cursor: pointer; font-weight: 800; }
details b { background: var(--purple); border-radius: 999px; padding: 2px 6px; }
.video-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
}
.video-card footer button { color: var(--cyan); }
.guidelines ul { color: #aebbd0; line-height: 1.9; padding-left: 18px; }

.float-button {
  position: fixed;
  right: 18px;
  bottom: 48px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid #3f4857;
  box-shadow: 0 0 20px rgba(0,0,0,.4);
}

@media (max-width: 1100px) {
  #app { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; }
  .snap-card:not(.hero-snap):not(.profile-snap) { display: none; }
  .topbar { grid-template-columns: 1fr; }
  .top-actions { justify-content: start; flex-wrap: wrap; }
  .stats-grid, .network-stats, .video-grid, .cards-grid, .two-col { grid-template-columns: 1fr; }
  .auth-panel, .form-grid { grid-template-columns: 1fr; }
  .auth-panel form { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(2, 1fr); }
  .hero-banner { font-size: 18px; }
  .banner-logo { font-size: 24px; }
}

@media (max-width: 640px) {
  .workspace { padding: 14px; }
  .topbar { margin: -14px -14px 14px; padding: 10px 14px; }
  .profile-id { position: static; padding: 16px; align-items: center; }
  .hero-card { min-height: auto; }
  .hero-actions { position: static; padding: 0 16px 16px; }
  .intro-card { flex-direction: column; align-items: start; }
  .people-grid { grid-template-columns: 1fr; }
  .video-poster { height: 520px; }
}

/* Product workspace upgrade */
.side-profile {
  display: grid;
  justify-items: center;
  gap: 7px;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: linear-gradient(180deg, #171e2a, #101720);
  text-align: center;
}

.side-profile-916 {
  gap: 9px;
}

.side-media-frame {
  position: relative;
  width: min(100%, 150px);
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 7px;
  overflow: hidden;
  border: 1px solid rgba(16, 215, 246, .35);
  border-radius: 12px;
  background:
    radial-gradient(circle at 50% 28%, rgba(16,215,246,.2), transparent 22%),
    linear-gradient(160deg, #132231, #0d121a 62%, #151c28);
}

.side-profile-916.pro-video .side-media-frame {
  border-color: rgba(255, 176, 31, .75);
  background:
    radial-gradient(circle at 50% 45%, rgba(16,215,246,.2), transparent 26%),
    linear-gradient(160deg, #102b3a, #151c2a 62%, #0d121a);
}

.side-media-frame::after {
  content: "";
  position: absolute;
  inset: auto 10px 10px;
  height: 4px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
  opacity: .85;
}

.side-media-frame span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #061117;
  font-weight: 900;
}

.side-profile-916.pro-video .side-media-frame span {
  background: var(--cyan);
  color: white;
  font-size: 20px;
}

.side-media-frame b,
.side-media-frame small {
  display: block;
  padding: 0 8px;
}

.side-media-frame small {
  color: var(--muted);
  font-size: 11px;
}

.avatar-ring {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
  color: #071116;
  font-weight: 900;
}

.side-score {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
  padding: 9px 10px;
  border-radius: 8px;
  background: #0d131c;
}

.side-score span { color: var(--cyan); font-weight: 900; }
.side-score b { color: var(--muted); font-size: 12px; }

.workspace-hero,
.public-hero {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 20px;
  padding: 28px;
  margin-bottom: 22px;
  border: 1px solid #22404a;
  border-radius: 12px;
  background:
    radial-gradient(circle at 85% 18%, rgba(16, 215, 246, .16), transparent 26%),
    linear-gradient(135deg, #111a24, #151c2a);
}

.workspace-hero h1,
.public-hero h1 {
  max-width: 820px;
  margin: 6px 0 10px;
  font-size: clamp(32px, 4vw, 58px);
  line-height: 1.02;
}

.workspace-hero p,
.public-hero p {
  max-width: 760px;
  color: #aebbd0;
  font-size: 16px;
  line-height: 1.6;
}

.eyebrow {
  color: var(--cyan);
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 900;
}

.hero-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.hero-actions-row button,
.stage-actions button,
.candidate-card footer button,
.network-card footer button:first-child {
  background: var(--cyan);
  color: #061117;
  font-weight: 900;
}

.hero-actions-row .ghost,
.stage-actions button:not(:first-child) {
  border: 1px solid var(--border);
  background: #111821;
  color: #e9f3ff;
}

.resume-workspace {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr) 330px;
  gap: 18px;
  align-items: start;
}

.required-video-sections {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 22px;
}

.required-video-card {
  position: relative;
  overflow: hidden;
  min-height: 260px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: #141b25;
}

.required-video-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.required-video-card.gold::before { background: linear-gradient(90deg, var(--gold), #d96c12); }
.required-video-card.purple::before { background: linear-gradient(90deg, var(--purple), #3d8cff); }
.required-video-card.cyan::before { background: linear-gradient(90deg, var(--cyan), #179d88); }

.required-video-card header,
.required-video-card footer,
.required-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.required-video-card header span,
.required-video-card header b,
.required-meta span {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  color: #cbd7e7;
  font-size: 12px;
}

.required-video-card h2 {
  margin: 18px 0 8px;
  font-size: 22px;
}

.required-video-card p {
  min-height: 46px;
  color: #aebbd0;
  line-height: 1.5;
}

.required-video-card .tag-row {
  margin: 14px 0;
}

.required-video-card footer button:first-child {
  background: var(--cyan);
  color: #061117;
  font-weight: 900;
}

.required-video-card footer button:last-child {
  border: 1px solid #3a4557;
  background: #101721;
}

.video-ai-analysis {
  display: grid;
  gap: 14px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.ai-summary-block,
.ai-score-card,
.market-pulse-card,
.ai-recommendations {
  padding: 14px;
  border: 1px solid #2c3647;
  border-radius: 12px;
  background: #131a24;
}

.ai-summary-block h3,
.ai-score-card h3,
.market-pulse-card h3 {
  margin: 0 0 8px;
}

.ai-summary-block h3 span,
.ai-score-card h3 span {
  color: var(--cyan);
}

.analysis-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.analysis-tags em {
  display: inline-flex;
  padding: 5px 8px;
  border-radius: 999px;
  background: #7c4dff;
  color: white;
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.ai-summary-block p,
.market-pulse-card p,
.ai-score-card p {
  margin: 10px 0 0;
  color: #aebbd0;
  line-height: 1.45;
}

.ai-score-card header,
.market-pulse-card header,
.ai-analysis-footer {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
}

.ai-score-card header b {
  padding: 4px 8px;
  border: 1px solid rgba(255,176,31,.6);
  border-radius: 999px;
  color: var(--gold);
  font-size: 11px;
}

.ai-score-grid {
  display: grid;
  grid-template-columns: 128px 1fr;
  gap: 18px;
  align-items: center;
  margin-top: 14px;
}

.ai-donut {
  width: 116px;
  height: 116px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--gold) calc(var(--score) * 1%), #232c3b 0);
  box-shadow: inset 0 0 0 15px #0f151e;
}

.required-video-card.gold .ai-donut {
  background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #232c3b 0);
}

.ai-donut strong {
  font-size: 30px;
  color: var(--gold);
}

.required-video-card.gold .ai-donut strong {
  color: var(--cyan);
}

.ai-donut small {
  margin-top: -26px;
  color: #aebbd0;
}

.ai-donut span {
  margin-top: -26px;
  color: #cbd7e7;
  text-align: center;
  font-size: 11px;
  font-weight: 800;
}

.ai-score-bars p {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  margin: 0 0 13px;
  padding-bottom: 9px;
  color: #b7c4d5;
}

.ai-score-bars b {
  color: var(--cyan);
}

.ai-score-bars i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: #242d3d;
}

.ai-score-bars u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--gold));
}

.market-pulse-card {
  background: linear-gradient(135deg, rgba(16,215,246,.12), rgba(255,176,31,.12));
  border-color: rgba(16,215,246,.32);
}

.market-pulse-card small {
  color: #cbd7e7;
}

.ai-recommendations summary {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 900;
}

.ai-recommendations summary b {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--purple);
}

.ai-recommendations ul {
  margin: 12px 0 0;
  padding-left: 18px;
  color: #b7c4d5;
  line-height: 1.6;
}

.ai-analysis-footer {
  align-items: center;
}

.ai-analysis-footer small {
  color: var(--muted);
}

.ai-analysis-footer button,
.locked-analysis button {
  border: 1px solid rgba(16,215,246,.5);
  background: #0d1b26;
  color: #6ee8ff;
  font-weight: 900;
}

.locked-analysis .locked-feature {
  display: grid;
  gap: 10px;
}

.pro-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 8px;
  padding: 4px 8px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--gold), #ff7a19);
  color: #160d00;
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
}

.pro-badge.locked {
  background: #242b38;
  color: #aebbd0;
}

.locked-feature {
  padding: 14px;
  border: 1px dashed #4a5568;
  border-radius: 10px;
  background: #101721;
}

.locked-feature strong {
  color: var(--gold);
}

.pro-copy {
  color: #aebbd0;
  line-height: 1.55;
}

.video-library,
.insight-rail {
  position: sticky;
  top: 78px;
}

.video-list-item {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111822;
}

.thumb {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: white;
  background: linear-gradient(135deg, var(--cyan), var(--purple));
}

.thumb.purple,
.stage-preview.purple { background: linear-gradient(135deg, #7c4dff, #27346a); }
.thumb.gold,
.stage-preview.gold { background: linear-gradient(135deg, #ffb01f, #2a2110); }
.thumb.cyan,
.stage-preview.cyan { background: linear-gradient(135deg, #10d7f6, #14324b); }

.video-list-item strong,
.video-list-item small {
  display: block;
}

.video-list-item small,
.video-list-item em {
  color: var(--muted);
  font-size: 12px;
}

.video-list-item em {
  padding: 4px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  font-style: normal;
}

.stage-preview {
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: end;
  gap: 18px;
  padding: 24px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0f6574, #161e2c);
}

.stage-play {
  width: 78px;
  height: 78px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.22);
  font-size: 26px;
}

.stage-preview strong,
.stage-preview span {
  display: block;
}

.stage-preview strong { font-size: 28px; }
.stage-preview span { color: #d5e4f2; }

.stage-actions {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin: 14px 0;
}

.nested {
  margin: 0;
  background: #121923;
}

.score-row {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 20px;
  align-items: center;
}

.score-donut {
  width: 118px;
  height: 118px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #293142 0);
  box-shadow: inset 0 0 0 16px #111821;
}

.score-donut strong {
  font-size: 32px;
}

.score-donut span {
  margin-top: -28px;
  color: var(--muted);
}

.score-bars p,
.graph-grid article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
  margin: 9px 0;
}

.score-bars i,
.graph-grid i {
  grid-column: 1 / -1;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #273140;
}

.score-bars u,
.graph-grid i {
  display: block;
  height: 7px;
}

.score-bars u {
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.insight-rail ul {
  padding-left: 18px;
  color: #b7c4d5;
  line-height: 1.7;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.tag-row span {
  padding: 6px 9px;
  border-radius: 999px;
  background: rgba(16, 215, 246, .1);
  border: 1px solid rgba(16, 215, 246, .22);
  color: #c6f7ff;
  font-size: 12px;
}

.mini-analytics {
  display: grid;
  gap: 8px;
}

.mini-analytics span {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  border-radius: 8px;
  background: #101721;
  color: var(--muted);
}

.mini-analytics b { color: white; }

.script-output {
  min-height: 120px;
  padding: 16px;
  border: 1px solid #2b3a4d;
  border-radius: 10px;
  background: #101721;
  color: #dce7f5;
  line-height: 1.6;
}

.onboarding-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}

.onboarding-grid article {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111821;
}

.onboarding-grid article.done {
  border-color: rgba(36, 209, 143, .38);
  background: rgba(36, 209, 143, .08);
}

.onboarding-grid b,
.onboarding-grid span {
  display: block;
}

.onboarding-grid b {
  color: var(--cyan);
  margin-bottom: 6px;
  font-size: 12px;
  text-transform: uppercase;
}

.analytics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

.analytics-grid article {
  padding: 16px;
  border-radius: 10px;
  background: #111821;
}

.analytics-grid strong,
.analytics-grid span,
.analytics-grid em {
  display: block;
}

.analytics-grid strong { font-size: 28px; }
.analytics-grid span { color: var(--muted); }
.analytics-grid em { color: #64e8aa; font-style: normal; margin-top: 8px; }

.feed-item {
  display: grid;
  grid-template-columns: 110px 1fr auto;
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--border);
}

.feed-item b {
  color: var(--cyan);
  text-transform: uppercase;
  font-size: 12px;
}

.feed-item small { color: var(--muted); }

.graph-grid {
  display: grid;
  gap: 14px;
}

.graph-grid article {
  grid-template-columns: 180px 1fr 180px 52px;
  padding: 12px;
  border-radius: 10px;
  background: #111821;
}

.graph-grid i {
  grid-column: auto;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.public-hero {
  grid-template-columns: 360px 1fr;
}

.public-video {
  aspect-ratio: 9 / 12;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(145deg, #132d3a, #7c4dff);
  font-size: 58px;
}

.compact-videos {
  grid-template-columns: repeat(3, 1fr);
}

.compact-card .stage-preview {
  min-height: 240px;
  margin-bottom: 14px;
}

.recruiter-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.candidate-card header strong {
  padding: 8px 11px;
  border-radius: 999px;
  background: rgba(36, 209, 143, .12);
  color: #64e8aa;
}

.candidate-card footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.candidate-card footer span {
  color: var(--muted);
}

.network-card blockquote {
  margin: 12px 16px 0;
  padding: 11px;
  border-left: 3px solid var(--cyan);
  background: #0f151e;
  color: #d9e5f4;
  line-height: 1.5;
}

.network-card footer {
  grid-template-columns: 1fr auto;
}

.snapr-layout {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 18px;
  margin-bottom: 22px;
}

.snapr-panel {
  display: grid;
  grid-template-columns: 1fr 170px;
  gap: 20px;
  align-items: center;
}

.locked-snapr {
  grid-template-columns: 1fr auto;
  margin-bottom: 22px;
}

.snapr-meter {
  width: 158px;
  height: 158px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: conic-gradient(var(--cyan) calc(var(--score) * 1%), #283243 0);
  box-shadow: inset 0 0 0 18px #111821;
}

.snapr-meter strong {
  font-size: 38px;
  color: var(--cyan);
}

.snapr-meter small {
  margin-top: -38px;
  color: var(--muted);
}

.snapr-meter span {
  margin-top: -36px;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

.snapr-panel footer {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 12px;
  border-top: 1px solid var(--border);
}

.snapr-panel footer b {
  color: #64e8aa;
}

.snapr-panel footer button,
.snapr-suggestions button {
  background: var(--cyan);
  color: #061117;
  font-weight: 900;
}

.snapr-dimensions p {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  margin: 14px 0;
  padding-bottom: 10px;
}

.snapr-dimensions i {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  overflow: hidden;
  border-radius: 999px;
  background: #263142;
}

.snapr-dimensions u {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.snapr-audience article,
.snapr-history article {
  padding: 12px;
  margin-top: 10px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111821;
}

.snapr-audience article {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 12px;
}

.snapr-audience p {
  grid-column: 1 / -1;
  margin: 0;
}

.snapr-audience b,
.snapr-history b {
  color: var(--cyan);
}

.snapr-suggestions div,
.snapr-inline-result {
  padding: 14px;
  border: 1px solid rgba(16,215,246,.28);
  border-radius: 10px;
  background: #101721;
  color: #d8e6f5;
  line-height: 1.55;
}

.snapr-inline-result {
  display: grid;
  gap: 5px;
}

.snapr-inline-result strong {
  color: var(--cyan);
}

.snapr-inline-result span {
  color: var(--muted);
}

.snapr-history article {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 12px;
}

.snapr-history span,
.snapr-history em {
  color: var(--muted);
  font-style: normal;
}

.profile-shell {
  margin-bottom: 22px;
}

.profile-banner {
  min-height: 240px;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 18px;
  padding: 28px;
  border: 1px solid #22404a;
  border-radius: 14px 14px 0 0;
  background:
    radial-gradient(circle at 88% 10%, rgba(16,215,246,.25), transparent 28%),
    linear-gradient(135deg, #0f2a35, #172033 48%, #171927);
}

.profile-banner h1 {
  margin: 8px 0;
  font-size: clamp(34px, 4vw, 56px);
}

.profile-banner p {
  color: #c6d3e3;
  font-size: 16px;
}

.profile-banner button,
.profile-media-form button,
.profile-identity-card header + .tag-row + .profile-strength-line + small {
  font-weight: 800;
}

.profile-banner button {
  border: 1px solid rgba(255,255,255,.16);
  background: rgba(10,16,23,.68);
}

.profile-identity-card {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 24px;
  margin-top: -72px;
  margin-left: 26px;
  margin-right: 26px;
  position: relative;
  z-index: 2;
  box-shadow: 0 18px 40px rgba(0,0,0,.24);
}

.profile-media-slot {
  display: grid;
  gap: 12px;
}

.media-frame {
  aspect-ratio: 9 / 16;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  min-height: 360px;
  border: 2px solid var(--gold);
  border-radius: 16px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255,255,255,.24), transparent 18%),
    linear-gradient(160deg, #10212b, #0d121a 54%, #171f2d);
  text-align: center;
}

.media-frame span {
  width: 74px;
  height: 74px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--cyan);
  color: #061117;
  font-size: 28px;
  font-weight: 900;
}

.pro-video .media-frame {
  border-color: var(--cyan);
  background:
    radial-gradient(circle at 50% 40%, rgba(16,215,246,.22), transparent 24%),
    linear-gradient(160deg, #123245, #151c2a 58%, #0d121a);
}

.media-frame b,
.media-frame small {
  display: block;
  padding: 0 16px;
}

.media-frame small {
  color: var(--muted);
}

.media-actions {
  display: flex;
  gap: 10px;
}

.media-actions button:first-child,
.profile-media-form button,
.profile-grid header button {
  background: var(--cyan);
  color: #061117;
  font-weight: 900;
}

.media-actions em {
  display: grid;
  place-items: center;
  padding: 0 12px;
  border-radius: 8px;
  background: var(--gold);
  color: #160d00;
  font-style: normal;
  font-weight: 900;
}

.profile-main-copy {
  display: grid;
  align-content: center;
  gap: 14px;
}

.profile-main-copy header {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.profile-main-copy h2 {
  margin: 0 0 8px;
  font-size: 34px;
}

.profile-main-copy p {
  max-width: 760px;
  color: #aebbd0;
  line-height: 1.6;
}

.profile-strength-line {
  height: 12px;
  overflow: hidden;
  border-radius: 999px;
  background: #273140;
}

.profile-strength-line span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan), var(--purple));
}

.profile-media-form form {
  display: grid;
  gap: 14px;
}

.profile-media-form input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #0d131b;
  color: var(--text);
}

.profile-media-form label {
  display: grid;
  gap: 7px;
  color: #cbd7e7;
  font-weight: 800;
}

.profile-grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 18px;
}

.profile-video-map {
  display: grid;
  gap: 12px;
}

.profile-video-map article {
  display: grid;
  grid-template-columns: 54px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #111821;
}

.profile-video-map strong,
.profile-video-map small {
  display: block;
}

.profile-video-map small,
.profile-video-map em {
  color: var(--muted);
}

.profile-video-map em {
  font-style: normal;
}

.profile-activity-item {
  display: grid;
  grid-template-columns: 80px 1fr auto;
  gap: 12px;
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.profile-activity-item b {
  color: var(--cyan);
  text-transform: uppercase;
  font-size: 12px;
}

.profile-activity-item p {
  margin: 4px 0 0;
}

.profile-activity-item small {
  color: var(--muted);
}

@media (max-width: 1280px) {
  .resume-workspace,
  .public-hero {
    grid-template-columns: 1fr;
  }
  .required-video-sections {
    grid-template-columns: 1fr;
  }
  .video-library,
  .insight-rail {
    position: static;
  }
}

@media (max-width: 900px) {
  .workspace-hero,
  .public-hero {
    grid-template-columns: 1fr;
  }
  .stage-actions,
  .analytics-grid,
  .onboarding-grid,
  .compact-videos,
  .recruiter-grid {
    grid-template-columns: 1fr;
  }
  .score-row,
  .feed-item,
  .graph-grid article {
    grid-template-columns: 1fr;
  }
  .stage-preview {
    min-height: 360px;
  }
  .profile-identity-card,
  .profile-grid {
    grid-template-columns: 1fr;
  }
  .profile-identity-card {
    margin-left: 0;
    margin-right: 0;
  }
  .profile-activity-item,
  .profile-video-map article {
    grid-template-columns: 1fr;
  }
  .snapr-layout,
  .snapr-panel,
  .locked-snapr,
  .snapr-history article {
    grid-template-columns: 1fr;
  }
}