/* Shared Clips Trends blue-glass UI. Presentation only; app logic is unchanged. */
:root {
  color-scheme: dark;
  --glass-bg: rgba(17, 34, 66, .68);
  --glass-bg-strong: rgba(14, 27, 54, .88);
  --glass-line: rgba(145, 211, 255, .34);
  --glass-line-bright: rgba(107, 194, 255, .62);
  --glass-text: #eef7ff;
  --glass-muted: #b8d4f4;
  --glass-blue: #258dff;
  --glass-violet: #7865ff;
  --glass-green: #22c983;
  --glass-red: #ff536e;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: #050b18; }
body {
  color: var(--glass-text) !important;
  background:
    radial-gradient(ellipse at 18% 0%, rgba(30, 111, 195, .35), transparent 44%),
    radial-gradient(ellipse at 90% 35%, rgba(103, 76, 222, .18), transparent 45%),
    linear-gradient(145deg, #071427 0%, #0a1024 50%, #030711 100%) !important;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: linear-gradient(125deg, rgba(86, 184, 255, .055), rgba(137, 107, 255, .07) 48%, transparent);
}
body > * { position: relative; z-index: 1; }
h1, h2, h3, h4 { color: #f1eaff; letter-spacing: .2px; }
a { color: #9bd9ff; }
.card, .brand, .panel, #login, #panel > .card {
  color: var(--glass-text);
  background: linear-gradient(135deg, rgba(255,255,255,.105), rgba(79,151,230,.055) 52%, rgba(130,105,255,.09)) !important;
  border: 1px solid var(--glass-line) !important;
  border-radius: 22px !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.26), 0 0 24px rgba(42,157,255,.09), inset 0 1px 0 rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(22px);
  backdrop-filter: blur(22px);
}
input, select, textarea {
  width: 100%;
  color: #f4f9ff !important;
  background: rgba(4, 14, 32, .62) !important;
  border: 1px solid rgba(151, 207, 255, .3) !important;
  border-radius: 13px !important;
  padding: 12px 14px !important;
  outline: none;
  box-shadow: inset 0 1px 6px rgba(0,0,0,.16);
}
input::placeholder, textarea::placeholder { color: #91aacb !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--glass-line-bright) !important;
  box-shadow: 0 0 0 3px rgba(40,145,255,.14), 0 0 18px rgba(40,145,255,.13) !important;
}
button, .primary, .copy, .danger {
  color: white !important;
  border: 1px solid rgba(255,255,255,.23) !important;
  border-radius: 13px !important;
  padding: 11px 16px !important;
  font-weight: 800 !important;
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, box-shadow .16s ease;
  box-shadow: 0 6px 18px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.22);
}
button:hover { filter: brightness(1.12); transform: translateY(-1px); }
button:active { transform: translateY(0) scale(.985); }
.primary, button.primary {
  background: linear-gradient(115deg, #168be8, #586dff 58%, #8965ff) !important;
  box-shadow: 0 7px 22px rgba(46,129,255,.25), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.copy { background: linear-gradient(115deg, #0ea875, #20c98b) !important; }
.danger { background: linear-gradient(115deg, #e5365b, #ff6474) !important; }
table { color: var(--glass-text) !important; border-collapse: separate !important; border-spacing: 0; }
th, td { border-bottom: 1px solid rgba(151,207,255,.17) !important; padding: 11px 9px !important; }
th { color: #a9ddff !important; background: rgba(255,255,255,.045); }
.muted, .msg { color: var(--glass-muted) !important; }
.public { gap: 8px; flex-wrap: wrap; }
.hidden { display: none !important; }
/* Video page layout and player */
.wrap { width: 100%; }
.brand { max-width: 430px; }
.brand-name {
  background: linear-gradient(90deg, #8ad7ff, #6a91ff 48%, #d6a3ff);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
  filter: drop-shadow(0 0 12px rgba(54,170,255,.3));
}
.brand-tag { color: #c4e7ff !important; }
.card { overflow: hidden; }
video, .real, #real, .player video {
  max-width: 100%;
  border-radius: 16px;
}
#yesSponsorBtn { background: linear-gradient(115deg, #12a96c, #28d89a) !important; }
#noSponsorBtn { background: linear-gradient(115deg, #e83c58, #ff6878) !important; }
/* Admin is comfortable on phones and wide screens */
body:has(#panel), body:has(#login) { max-width: 1150px; margin: 0 auto !important; padding: 20px 14px !important; }
#panel { width: 100%; }
.top { gap: 10px; }
@media (max-width: 600px) {
  body:has(#panel), body:has(#login) { padding: 12px 10px !important; }
  .card, #login, #panel > .card { border-radius: 18px !important; }
  table { display: block; width: 100%; overflow-x: auto; }
  th, td { min-width: 100px; }
  button { max-width: 100%; }
}