:root {
      --bg: #0b0e13;
      --bg-2: #0f131a;
      --card: #161c25;
      --card-2: #1c2330;
      --line: #232c39;
      --accent: #f5a623;
      --accent-2: #ff7b00;
      --t: #e6e9ee;
      --muted: #8b94a3;
      --muted-2: #5b6473;
      --good: #4ade80;
      --bad: #ff6b6b;
      --shadow: 0 10px 30px rgba(0,0,0,.35);
      --radius: 14px;
    }
    * { box-sizing: border-box; }
    html, body { height: 100%; }
    body {
      margin: 0;
      font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background:
        radial-gradient(1200px 600px at 80% -10%, rgba(245,166,35,.08), transparent 60%),
        radial-gradient(900px 500px at -10% 20%, rgba(96,165,250,.05), transparent 60%),
        var(--bg);
      color: var(--t);
      -webkit-font-smoothing: antialiased;
      line-height: 1.5;
    }
    a { color: var(--accent); text-decoration: none; }
    header {
      padding: 20px 28px; border-bottom: 1px solid var(--line);
      display: flex; align-items: center; justify-content: space-between; gap: 16px;
      position: sticky; top: 0; backdrop-filter: blur(8px);
      background: rgba(11,14,19,.75); z-index: 10;
    }
    .brand { display: flex; align-items: center; gap: 12px; }
    .brand-logo {
      width: 36px; height: 36px; border-radius: 10px;
      background: linear-gradient(135deg, var(--accent), var(--accent-2));
      display: grid; place-items: center; color: #111; font-weight: 900; font-size: 16px;
      box-shadow: 0 6px 16px rgba(245,166,35,.35);
    }
    .brand h1 { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
    .brand h1 span { color: var(--accent); }
    .brand .sub { color: var(--muted); font-size: 12px; }
    .header-right { display: flex; align-items: center; gap: 14px; color: var(--muted); font-size: 13px; }

    main { max-width: 1180px; width: 100%; margin: 0 auto; padding: 32px 24px 80px; }
    .back { display: inline-block; margin-bottom: 14px; color: var(--muted); font-size: 13px; }
    .back:hover { color: var(--accent); }

    .video-card {
      background: linear-gradient(180deg, var(--card), var(--card-2));
      border: 1px solid rgba(74,222,128,.3);
      border-radius: var(--radius);
      overflow: hidden;
      box-shadow: 0 8px 30px rgba(0,0,0,.4);
    }
    .video-card video {
      display: block;
      width: 100%;
      max-height: 70vh;
      background: #000;
    }
    /* Esconde o botao de menu (3 pontos) do player nativo (mesmo estilo do /share) */
    .video-card video::-webkit-media-controls-overflow-button { display: none !important; }

    .video-card .msg {
      padding: 64px 24px;
      text-align: center;
      color: var(--muted);
      font-size: 15px;
    }
    .video-card .msg strong { display: block; font-size: 18px; color: var(--t); margin-bottom: 6px; }
    .video-card-actions {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 14px 18px;
      background: var(--card-2);
      border-top: 1px solid var(--line);
      flex-wrap: wrap;
    }
    .video-card-actions .title {
      flex: 1;
      min-width: 160px;
      font-size: 13px;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .video-card-actions .title strong { color: var(--good); }
    .video-card-actions .owner { color: var(--accent); font-weight: 700; white-space: nowrap; }
    /* Dono com conta: link pro perfil publico (/u/<id>) */
    .video-card-actions .owner a { color: var(--accent); font-weight: 700; }
    .video-card-actions .owner a:hover { text-decoration: underline; }

    button {
      background: linear-gradient(180deg, var(--accent), var(--accent-2));
      color: #111; border: 0; padding: 10px 16px; border-radius: 10px;
      font-weight: 700; font-size: 13px; cursor: pointer;
      transition: transform .1s, box-shadow .15s, opacity .15s;
      display: inline-flex; align-items: center; gap: 8px;
      box-shadow: 0 4px 14px rgba(245,166,35,.25);
      font-family: inherit;
    }
    button:hover:not(:disabled) { filter: brightness(1.06); }
    button:active:not(:disabled) { transform: scale(.97); }
    button:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
    button.secondary {
      background: var(--card-2);
      color: var(--t);
      border: 1px solid var(--line);
      box-shadow: none;
    }
    button.secondary:hover:not(:disabled) { border-color: var(--accent); }

    button.danger {
      background: transparent; border: 1px solid rgba(255,107,107,.4); color: var(--bad);
      box-shadow: none;
    }
    button.danger:hover:not(:disabled) { background: rgba(255,107,107,.1); filter: none; border-color: var(--bad); }

    .btn-icon { padding: 10px 10px; }

    /* Curtida (mesmo visual dos cards da galeria) */
    .like-btn {
      background: transparent; border: 1px solid var(--line); color: var(--muted);
      box-shadow: none; padding: 9px 14px; font-size: 13px; border-radius: 10px;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .like-btn:hover:not(:disabled) { border-color: var(--bad); color: var(--bad); filter: none; }
    .like-btn.liked { border-color: rgba(255,107,107,.5); color: var(--bad); background: rgba(255,107,107,.08); }
    .like-btn .like-count { font-weight: 700; }

    .details {
      margin-top: 20px; padding: 20px;
      background: linear-gradient(180deg, var(--card), var(--card-2));
      border: 1px solid var(--line); border-radius: var(--radius);
      box-shadow: var(--shadow);
    }
    .detail-title { margin: 0 0 10px; font-size: 20px; font-weight: 700; letter-spacing: -.01em; word-break: break-word; }
    .likes-line {
      display: inline-flex; align-items: center; gap: 8px;
      font-size: 14px; color: var(--muted); margin-bottom: 14px;
    }
    .likes-line svg { color: var(--bad); }
    .likes-line strong { color: var(--t); font-size: 16px; }
    .likes-line.liked { color: var(--bad); }
    .meta-row { display: flex; flex-wrap: wrap; gap: 8px; }
    .chip {
      display: inline-flex; align-items: baseline; gap: 6px;
      background: var(--bg-2); border: 1px solid var(--line);
      border-radius: 999px; padding: 6px 12px; font-size: 12px;
    }
    .chip .chip-label { color: var(--muted-2); text-transform: uppercase; letter-spacing: .6px; font-size: 10px; font-weight: 700; }
    .chip .chip-value { color: var(--t); font-weight: 600; }
    .chip a.chip-value { color: var(--accent); }
    .chip a.chip-value:hover { text-decoration: underline; }

.status { margin-top: 12px; color: var(--muted); min-height: 20px; font-size: 13px; }
.status .err { color: var(--bad); }

/* Contador de curtidas é um botão: abre a lista de quem curtiu */
.likes-count-btn {
  background: transparent; border: 0; color: inherit; cursor: pointer;
  font: inherit; padding: 0; display: inline-flex; align-items: center;
}
.likes-count-btn:hover strong { color: var(--bad); text-decoration: underline; }

/* Modal "Quem curtiu" */
.likers-modal {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(0,0,0,.6); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
}
.likers-modal[hidden] { display: none; }
.likers-card {
  width: min(440px, 100%); max-height: 70vh; overflow-y: auto;
  background: linear-gradient(180deg, var(--card), var(--card-2));
  border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 18px;
}
.likers-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.likers-head h3 { margin: 0; font-size: 16px; }
.likers-close {
  background: transparent; border: 1px solid var(--line); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; font-size: 18px; line-height: 1;
  cursor: pointer; display: grid; place-items: center;
}
.likers-close:hover { color: var(--t); border-color: var(--accent); }
.likers-list { display: flex; flex-direction: column; gap: 8px; }
.likers-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: var(--bg-2); border: 1px solid var(--line);
  text-decoration: none; color: var(--t);
}
.likers-item:hover { border-color: var(--accent); }
.likers-item .li-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  color: #111; font-weight: 800; font-size: 13px;
  display: grid; place-items: center; flex-shrink: 0;
}
.likers-item .li-name { font-weight: 600; font-size: 14px; }
.likers-empty { color: var(--muted); font-size: 13px; padding: 16px 0; text-align: center; }
.likers-foot { margin-top: 12px; color: var(--muted-2); font-size: 11px; text-align: center; }

@media (max-width: 640px) {
  header { padding: 14px 16px; }
  main { padding: 16px 12px 60px; }
  .video-card-actions .title { width: 100%; flex: unset; white-space: normal; }
}