/* 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%; }
}

/* ===== Full-site neon pink glow theme ===== */
:root {
  --glass-bg: rgba(62, 13, 48, .72);
  --glass-bg-strong: rgba(36, 8, 31, .94);
  --glass-line: rgba(255, 133, 211, .42);
  --glass-line-bright: rgba(255, 91, 190, .88);
  --glass-text: #fff1fa;
  --glass-muted: #f2b8dc;
  --glass-blue: #ff4db8;
  --glass-violet: #b84dff;
  --glass-green: #ff5abf;
  --glass-red: #ff547e;
}
html { background: #100512 !important; }
body {
  color: #fff1fa !important;
  background:
    radial-gradient(ellipse at 12% 0%, rgba(255, 38, 163, .30), transparent 43%),
    radial-gradient(ellipse at 92% 28%, rgba(180, 54, 255, .23), transparent 45%),
    radial-gradient(ellipse at 50% 100%, rgba(255, 64, 184, .14), transparent 48%),
    linear-gradient(145deg, #190719 0%, #100817 52%, #07040d 100%) !important;
}
body::before {
  background: linear-gradient(125deg, rgba(255, 74, 190, .075), rgba(180, 76, 255, .075) 48%, transparent) !important;
}
h1, h2, h3, h4 { color: #fff0fb !important; text-shadow: 0 0 18px rgba(255, 70, 185, .22); }
a { color: #ff9cdb; }
.card, .brand, .panel, #login, #panel > .card {
  background: linear-gradient(135deg, rgba(255, 105, 196, .14), rgba(73, 20, 70, .30) 52%, rgba(174, 70, 255, .13)) !important;
  border-color: rgba(255, 135, 215, .48) !important;
  box-shadow: 0 14px 42px rgba(0,0,0,.32), 0 0 25px rgba(255, 45, 171, .15), 0 0 48px rgba(180, 55, 255, .08), inset 0 1px 0 rgba(255,255,255,.17) !important;
}
input, select, textarea {
  color: #fff2fb !important;
  background: rgba(24, 5, 23, .80) !important;
  border-color: rgba(255, 123, 207, .42) !important;
}
input::placeholder, textarea::placeholder { color: #d9a0c8 !important; }
input:focus, select:focus, textarea:focus {
  border-color: #ff70c7 !important;
  box-shadow: 0 0 0 3px rgba(255, 64, 181, .16), 0 0 22px rgba(255, 64, 181, .25) !important;
}
button, .primary, .copy, .danger {
  border-color: rgba(255, 199, 235, .38) !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.2), 0 0 16px rgba(255, 50, 174, .15), inset 0 1px 0 rgba(255,255,255,.22);
}
.primary, button.primary, .ok button, .adbox button {
  background: linear-gradient(110deg, #ff299d, #e23bce 52%, #9b4dff) !important;
  box-shadow: 0 0 12px rgba(255, 43, 167, .35), 0 0 28px rgba(214, 54, 255, .22), inset 0 1px 0 rgba(255,255,255,.25) !important;
}
.copy { background: linear-gradient(110deg, #ec36a6, #b347ed) !important; }
.danger, #noSponsorBtn { background: linear-gradient(110deg, #ff386e, #e83a9d) !important; }
#yesSponsorBtn { background: linear-gradient(110deg, #ff299d, #b547ed) !important; }
th { color: #ffb7e5 !important; background: rgba(255, 93, 190, .09) !important; }
th, td { border-bottom-color: rgba(255, 133, 211, .19) !important; }
.muted, .msg { color: #f3b9dd !important; }
.brand-name {
  background: linear-gradient(90deg, #ffb1e5, #ff4db8 48%, #c78aff) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  filter: drop-shadow(0 0 13px rgba(255, 55, 177, .48)) !important;
}
.brand-tag { color: #ffc4e9 !important; }
.access-header {
  border-color: rgba(255, 126, 210, .6) !important;
  background: linear-gradient(110deg, rgba(255, 54, 174, .19), rgba(131, 43, 177, .22)) !important;
  box-shadow: 0 0 16px rgba(255, 48, 173, .22), inset 0 1px rgba(255,255,255,.12) !important;
}
.access-kicker { color: #ffe5f6 !important; text-shadow: 0 0 14px rgba(255, 74, 190, .52) !important; }
.access-free {
  background: linear-gradient(120deg, #ff53b8, #bd5aff) !important;
  color: #fff !important;
  box-shadow: 0 0 20px rgba(255, 57, 183, .42) !important;
}
.wrap .card, .card#card {
  border-color: rgba(255, 139, 216, .55) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.035), 0 0 28px rgba(255, 42, 171, .18), 0 18px 45px rgba(0,0,0,.48) !important;
}
.play {
  box-shadow: 0 0 0 7px rgba(255, 105, 202, .13), 0 0 34px rgba(255, 67, 183, .55), inset 0 1px #fff !important;
}
.label { border-color: rgba(255, 142, 216, .48) !important; box-shadow: 0 0 15px rgba(255, 50, 173, .13); }
.msg { text-shadow: 0 0 14px rgba(255, 47, 177, .56) !important; }
.adgate { background: rgba(18, 3, 18, .86) !important; }
.adbox {
  border-color: rgba(255, 131, 212, .68) !important;
  background: linear-gradient(145deg, rgba(95, 18, 73, .97), rgba(35, 10, 42, .97) 65%, rgba(67, 18, 83, .97)) !important;
  box-shadow: 0 0 22px rgba(255, 44, 172, .2), 0 0 48px rgba(184, 56, 255, .18), inset 0 1px rgba(255,255,255,.16) !important;
}
.telegram-join {
  position: fixed !important;
  z-index: 25 !important;
  left: 50% !important;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  transform: translateX(-50%) !important;
  width: calc(100% - 28px) !important;
  max-width: 430px !important;
  margin: 0 !important;
  padding: 15px 18px !important;
  border: 1px solid rgba(255, 174, 229, .95) !important;
  border-radius: 18px !important;
  background: linear-gradient(105deg, #ff299e, #d52acb 50%, #8844ed) !important;
  color: #fff !important;
  box-shadow: 0 0 12px rgba(255, 43, 166, .78), 0 0 30px rgba(232, 46, 199, .48), 0 0 54px rgba(165, 55, 255, .22), inset 0 1px rgba(255,255,255,.48) !important;
  animation: pinkTelegramPulse 2s ease-in-out infinite !important;
}
.telegram-join:after { border-color: #ffc5ec !important; }
.telegram-icon { color: #fff !important; text-shadow: 0 0 12px rgba(255,255,255,.45) !important; }
@keyframes pinkTelegramPulse {
  0%, 100% { box-shadow: 0 0 10px rgba(255,43,166,.68), 0 0 25px rgba(232,46,199,.35), 0 0 45px rgba(165,55,255,.17), inset 0 1px rgba(255,255,255,.45); }
  50% { box-shadow: 0 0 17px rgba(255,43,166,.95), 0 0 38px rgba(232,46,199,.58), 0 0 58px rgba(165,55,255,.28), inset 0 1px rgba(255,255,255,.55); }
}
/* Keep the video visible above the fixed Telegram button on phones. */
@media (max-width: 600px) {
  body { padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px)) !important; }
  .wrap { padding-bottom: 92px !important; }
  .card#card { max-height: 72vh !important; border-radius: 20px !important; }
  .telegram-join { font-size: 14px !important; letter-spacing: 1px !important; }
}
@media (prefers-reduced-motion: reduce) {
  .telegram-join { animation: none !important; }
}


/* Mobile Telegram CTA: slimmer and lifted closer to the access message */
@media (max-width: 600px) {
  .telegram-join {
    bottom: calc(68px + env(safe-area-inset-bottom, 0px)) !important;
    padding: 9px 14px !important;
    min-height: 44px !important;
    border-radius: 15px !important;
    font-size: 13px !important;
    letter-spacing: 1px !important;
    gap: 8px !important;
  }
  .telegram-icon { font-size: 18px !important; }
}