/* DarkIptv Branding + Theme (dark default, light optional) */
:root{
  --ms-bg: #0b1220;
  --ms-bg-2: #0f172a;
  --ms-card: rgba(15, 23, 42, 0.72);
  --ms-card-solid: #0f172a;
  --ms-border: rgba(148, 163, 184, 0.18);
  --ms-text: #e5e7eb;
  --ms-muted: rgba(229, 231, 235, 0.75);
  --ms-primary: #7c3aed; /* roxo */
  --ms-primary-2: #22c55e; /* verde acento */
  --ms-danger: #ef4444;
  --ms-shadow: 0 12px 40px rgba(0,0,0,.35);
  --ms-radius: 14px;
}

html[data-theme="light"]{
  --ms-bg: #f6f7fb;
  --ms-bg-2: #ffffff;
  --ms-card: rgba(255,255,255,0.78);
  --ms-card-solid: #ffffff;
  --ms-border: rgba(15, 23, 42, 0.12);
  --ms-text: #0f172a;
  --ms-muted: rgba(15,23,42,.70);
  --ms-primary: #2563eb;
  --ms-primary-2: #16a34a;
  --ms-shadow: 0 14px 40px rgba(2,6,23,.12);
}

/* Global */
body{
  color: var(--ms-text);
  background: radial-gradient(1200px 800px at 15% 10%, rgba(124,58,237,.18), transparent 60%),
              radial-gradient(900px 650px at 85% 20%, rgba(34,197,94,.14), transparent 55%),
              radial-gradient(900px 650px at 50% 95%, rgba(59,130,246,.10), transparent 55%),
              linear-gradient(180deg, var(--ms-bg), var(--ms-bg-2));
}

/* Buttons */
.btn-primary{
  background: linear-gradient(135deg, var(--ms-primary), color-mix(in srgb, var(--ms-primary) 75%, #000 25%));
  border: 0;
  box-shadow: 0 10px 24px rgba(124,58,237,.22);
}
.btn-primary:hover{
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.btn-outline-primary{
  border-color: color-mix(in srgb, var(--ms-primary) 55%, transparent);
  color: var(--ms-text);
}
.btn-outline-primary:hover{
  background: rgba(124,58,237,.14);
  border-color: rgba(124,58,237,.55);
}

/* Cards */
.card, .modal-content{
  border-radius: var(--ms-radius);
  border: 1px solid var(--ms-border) !important;
  background: var(--ms-card) !important;
  backdrop-filter: blur(10px);
  box-shadow: var(--ms-shadow);
}
.form-control, .form-select{
  border-radius: 12px;
  border: 1px solid var(--ms-border);
}
.form-control:focus, .form-select:focus{
  border-color: color-mix(in srgb, var(--ms-primary) 55%, var(--ms-border));
  box-shadow: 0 0 0 .25rem rgba(124,58,237,.14);
}

/* Navbar/Sidebar (works with current menu.css structure) */
.top-navbar{
  background: rgba(15, 23, 42, 0.72) !important;
  border-bottom: 1px solid var(--ms-border);
  backdrop-filter: blur(10px);
}
html[data-theme="light"] .top-navbar{
  background: rgba(255,255,255,.75) !important;
}
.navbar-logo-text{
  letter-spacing: .3px;
}
.navbar-logo img{
  height: 34px;
  width: auto;
}
.navbar-container .btn{
  border-radius: 12px !important;
}

/* Theme toggle button */
.ms-theme-toggle{
  width: 35px;
  height: 35px;
  border-radius: 12px;
  border: 1px solid var(--ms-border);
  background: rgba(255,255,255,.05);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ms-text);
}
html[data-theme="light"] .ms-theme-toggle{
  background: rgba(2,6,23,.04);
}

/* Login specific */
.ms-auth{
  position: relative;
  overflow: hidden;
}
.ms-auth::before{
  content:"";
  position: absolute;
  inset: -2px;
  background:
    radial-gradient(600px 450px at 20% 15%, rgba(124,58,237,.35), transparent 60%),
    radial-gradient(650px 450px at 80% 20%, rgba(34,197,94,.28), transparent 60%),
    radial-gradient(700px 500px at 50% 95%, rgba(59,130,246,.22), transparent 60%);
  filter: blur(0px);
  animation: msFloat 10s ease-in-out infinite alternate;
  pointer-events: none;
}
.ms-auth::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: url("../img/background.png");
  background-size: cover;
  background-position: center;
  opacity: .18;
  mix-blend-mode: overlay;
  pointer-events:none;
}
@keyframes msFloat{
  from{ transform: translate3d(-12px,-10px,0) scale(1.02); }
  to{ transform: translate3d(10px,12px,0) scale(1.05); }
}

.ms-logo{
  height: clamp(72px, 9vw, 110px) !important;
  width: auto;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.35));
}

.ms-animate-in{
  animation: msIn .55s ease-out both;
}
@keyframes msIn{
  from{ opacity: 0; transform: translateY(10px) scale(.98); }
  to{ opacity: 1; transform: translateY(0) scale(1); }
}

/* Footer */
#msFooter{
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  font-size: 12px;
  color: var(--ms-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
}
#msFooter .dot{
  width: 5px; height: 5px; border-radius: 50%;
  background: color-mix(in srgb, var(--ms-primary) 60%, transparent);
  opacity: .9;
}

/* Give pages breathing room so footer never overlaps */
body{ padding-bottom: 44px; }


/* Bridge vars used by existing menu.css */
:root{
  --dark-bg: var(--ms-bg);
  --header-bg: rgba(15, 23, 42, 0.72);
  --header-hover: rgba(148, 163, 184, 0.10);
  --primary-color: var(--ms-primary);
  --primary-glow: rgba(124, 58, 237, 0.30);
  --text-primary: var(--ms-text);
  --text-secondary: var(--ms-muted);
  --border-color: var(--ms-border);
  --card-bg: var(--ms-card);
}
html[data-theme="light"]{
  --header-bg: rgba(255,255,255,.75);
  --header-hover: rgba(2,6,23,.05);
  --primary-glow: rgba(37, 99, 235, 0.22);
}