/* ============================================================
   SimpTube — Redesigned CSS Override
   Font: Poppins
   Drop this file as: /css/redesign.css
   Then add to header.php: <link rel="stylesheet" href="/css/redesign.css">
   ============================================================ */

/* ── POPPINS FONT ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800;900&display=swap');

/* ── DESIGN TOKENS ────────────────────────────────────────── */
:root {
  /* Backgrounds — deeper, richer */
  --bg:    #0e1015;
  --bg2:   #13161c;
  --card:  #181c23;
  --card2: #1e2330;
  --card3: #252c3a;

  /* Borders — subtle glass */
  --border:  rgba(255,255,255,.06);
  --border2: rgba(255,255,255,.10);
  --border3: rgba(255,255,255,.16);

  /* Text */
  --text:  #eeeef8;
  --text2: #8888b0;
  --muted: #44445e;

  /* Brand — warmer orange */
  --orange:     #ff7b00;
  --orange2:    #ff9d33;
  --orange-dim: rgba(255,123,0,.10);
  --orange-glow:rgba(255,123,0,.30);

  /* Accent colors */
  --red:    #ff3d5a;
  --green:  #00d977;
  --blue:   #4da8ff;
  --purple: #9966ff;

  /* Spacing / radius */
  --radius:   14px;
  --radius-sm: 8px;
  --radius-lg: 20px;

  /* Shadows */
  --shadow-card: 0 4px 24px rgba(0,0,0,.4);
  --shadow-glow: 0 0 30px rgba(255,123,0,.2);
  --shadow-float:0 20px 60px rgba(0,0,0,.6);
}

/* ── BASE ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-family: 'Poppins', sans-serif !important;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Rich ambient background */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse 100% 60% at 50% -10%, rgba(255,123,0,.05), transparent 60%),
    radial-gradient(ellipse 50% 50% at 85% 90%,   rgba(77,168,255,.04), transparent 60%),
    radial-gradient(ellipse 40% 40% at 10% 50%,   rgba(153,102,255,.03), transparent 60%);
  pointer-events: none;
  z-index: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700;
  letter-spacing: -.02em;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; }

/* ── NAVIGATION ───────────────────────────────────────────── */
.st-nav {
  background: rgba(10, 12, 17, 0.85) !important;
  backdrop-filter: blur(28px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255,255,255,.06) !important;
  height: 64px !important;
  padding: 0 2rem !important;
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Logo */
.logo-simp {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.55rem !important;
  color: #fff !important;
  letter-spacing: -.03em !important;
}
.logo-tube {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.55rem !important;
  color: #000 !important;
  background: linear-gradient(135deg, var(--orange), var(--orange2)) !important;
  padding: .05rem .4rem !important;
  border-radius: 7px !important;
  letter-spacing: -.03em !important;
}

/* ── BUTTONS ──────────────────────────────────────────────── */
.btn-o {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: .8rem !important;
  background: linear-gradient(135deg, var(--orange), #ff5500) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9px !important;
  padding: .42rem 1.15rem !important;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  transition: all .2s cubic-bezier(.2,.85,.3,1) !important;
  box-shadow: 0 2px 12px rgba(255,123,0,.3) !important;
  letter-spacing: .01em !important;
}
.btn-o:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 24px rgba(255,123,0,.5) !important;
  filter: brightness(1.08) !important;
}

.btn-g {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
  font-size: .8rem !important;
  background: rgba(255,255,255,.05) !important;
  color: var(--text2) !important;
  border: 1px solid var(--border2) !important;
  border-radius: 9px !important;
  padding: .42rem .9rem !important;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  cursor: pointer;
  transition: all .18s !important;
}
.btn-g:hover {
  border-color: rgba(255,123,0,.5) !important;
  color: var(--orange) !important;
  background: var(--orange-dim) !important;
}

/* ── CARDS ────────────────────────────────────────────────── */
.card, .vid-card, .album-card, .stat-card,
.up-card, .up-rules-card, .up-fields-card,
.panel-box, .owner-panel > *, .imp-card {
  background: var(--card) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  transition: border-color .2s, box-shadow .2s, transform .2s !important;
}

.vid-card:hover, .album-card:hover {
  border-color: rgba(255,123,0,.25) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.4), 0 0 0 1px rgba(255,123,0,.08) !important;
  transform: translateY(-3px) !important;
}

/* ── GRID CARDS (index.php) ───────────────────────────────── */
.card {
  border-radius: var(--radius) !important;
  overflow: hidden;
}
.card:hover {
  border-color: rgba(255,123,0,.3) !important;
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 0 0 1px rgba(255,123,0,.1) !important;
  transform: translateY(-4px) !important;
}
.card-thumb { border-radius: 0 !important; }
.card-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: .86rem !important;
}

/* ── TYPE BADGES ──────────────────────────────────────────── */
.badge, .type-badge, .vid-type-badge {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .04em !important;
  border-radius: 6px !important;
}
.badge-orange, span.badge-orange { background: var(--orange-dim) !important; color: var(--orange) !important; border-color: rgba(255,123,0,.2) !important; }
.badge-blue   { background: rgba(77,168,255,.08) !important; color: var(--blue) !important; }
.badge-green  { background: rgba(0,217,119,.08) !important; color: var(--green) !important; }
.badge-red    { background: rgba(255,61,90,.08) !important; color: var(--red) !important; }

/* ── INPUTS ───────────────────────────────────────────────── */
input, textarea, select {
  font-family: 'Poppins', sans-serif !important;
}
.field-inp, .imp-inp, .copy-inp, .pw-inp, .chat-inp,
.rnm-modal input, .ca-field input, .ca-field textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="number"], textarea, select {
  font-family: 'Poppins', sans-serif !important;
  background: rgba(255,255,255,.04) !important;
  border: 1.5px solid var(--border2) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  transition: border-color .2s, box-shadow .2s !important;
}
.field-inp:focus, .imp-inp:focus, .pw-inp:focus,
input:focus, textarea:focus, select:focus {
  border-color: rgba(255,123,0,.55) !important;
  box-shadow: 0 0 0 3px rgba(255,123,0,.08) !important;
  outline: none !important;
}

/* ── STAT CARDS (Dashboard) ───────────────────────────────── */
.stat-card {
  border-radius: var(--radius) !important;
  padding: 1.4rem 1.5rem !important;
  position: relative;
  overflow: hidden;
}
.stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 3px 3px 0 0;
}
.stat-card.orange::before { background: linear-gradient(90deg, var(--orange), var(--orange2)); }
.stat-card.blue::before   { background: linear-gradient(90deg, #4da8ff, #8fd0ff); }
.stat-card.green::before  { background: linear-gradient(90deg, #00d977, #5fffb0); }
.stat-card.purple::before { background: linear-gradient(90deg, #9966ff, #cc99ff); }

.stat-value {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 2rem !important;
  line-height: 1 !important;
  letter-spacing: -.03em !important;
}
.stat-label {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  font-size: .68rem !important;
  text-transform: uppercase !important;
  letter-spacing: .1em !important;
  color: var(--muted) !important;
}

/* ── HERO (index.php) ─────────────────────────────────────── */
.hero h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 900 !important;
  letter-spacing: -.04em !important;
  line-height: 1.05 !important;
}
.hero h1 em {
  background: linear-gradient(135deg, var(--orange), var(--orange2), #ffcc44) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-style: normal !important;
}

/* ── SECTION TITLES ───────────────────────────────────────── */
.section-title, .section-head h2, .media-title {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}

/* ── NAV DROPDOWN ─────────────────────────────────────────── */
.nav-dd-menu, .notif-panel {
  border-radius: var(--radius) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: var(--shadow-float) !important;
  background: var(--card) !important;
}
.nav-dd-item {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 9px !important;
  font-size: .8rem !important;
}
.nav-dd-item:hover {
  background: var(--orange-dim) !important;
  color: var(--orange) !important;
}

/* ── FOOTER ───────────────────────────────────────────────── */
.st-footer {
  border-top: 1px solid var(--border) !important;
  background: rgba(10,12,17,.7) !important;
  font-family: 'Poppins', sans-serif !important;
}
.footer-links a {
  font-weight: 500 !important;
  font-size: .8rem !important;
  transition: color .15s !important;
}
.footer-links a:hover { color: var(--orange) !important; }

/* ── CHAT PANEL ───────────────────────────────────────────── */
.chat-panel {
  border-radius: 16px 16px 0 0 !important;
  box-shadow: 0 -4px 50px rgba(0,0,0,.7), 0 0 0 1px rgba(77,168,255,.12) !important;
}
.chat-hdr {
  background: linear-gradient(135deg, rgba(20,24,35,.98), rgba(18,22,32,.98)) !important;
}
.chat-msg.user {
  background: linear-gradient(135deg, #1e4d8c, #153f75) !important;
  border-radius: 14px 14px 3px 14px !important;
}
.chat-msg.admin {
  background: var(--card2) !important;
  border-radius: 14px 14px 14px 3px !important;
  border: 1px solid var(--border) !important;
}
.chat-inp {
  border-radius: 10px !important;
  font-family: 'Poppins', sans-serif !important;
}
.chat-send-btn {
  border-radius: 10px !important;
  background: linear-gradient(135deg, #2a6aaa, #1a4f8a) !important;
}

/* ── MODALS ───────────────────────────────────────────────── */
.rnm-modal, .ca-modal, .modal {
  border-radius: var(--radius-lg) !important;
  background: var(--card) !important;
  border: 1px solid var(--border2) !important;
  box-shadow: var(--shadow-float) !important;
}
.rnm-modal h3, .ca-modal h3, .modal h3 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}
.btn-rnm-save, .btn-ca-save, .btn-save {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 10px !important;
  background: linear-gradient(135deg, var(--orange), #ff5500) !important;
  color: #fff !important;
  border: none !important;
}

/* ── UPLOAD PAGE ──────────────────────────────────────────── */
.drop-zone {
  border: 2px dashed var(--border2) !important;
  border-radius: var(--radius) !important;
  transition: all .25s !important;
}
.drop-zone:hover, .drop-zone.drag-over {
  border-color: var(--orange) !important;
  background: rgba(255,123,0,.04) !important;
  box-shadow: 0 0 0 4px rgba(255,123,0,.05) !important;
}
.btn-upload-main {
  border-radius: 12px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}
.queue-item {
  border-radius: var(--radius-sm) !important;
  background: var(--card2) !important;
  border: 1px solid var(--border) !important;
}

/* ── DASHBOARD ────────────────────────────────────────────── */
.dash-header h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.8rem !important;
  letter-spacing: -.03em !important;
}
.vid-name, .album-name {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}
.btn-va {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 7px !important;
  font-size: .67rem !important;
}

/* ── VIEW PAGE ────────────────────────────────────────────── */
.media-container {
  border-radius: var(--radius) !important;
  overflow: hidden;
  box-shadow: var(--shadow-card) !important;
}
.media-title {
  font-size: 1.4rem !important;
  font-weight: 700 !important;
  letter-spacing: -.02em !important;
}
.video-watermark {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
}

/* ── ADMIN PANEL ──────────────────────────────────────────── */
.admin-header h1 {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 800 !important;
}
.tab-link {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
}
.act-btn {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 7px !important;
}
.dd-btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 8px !important;
}

/* ── FLASH MESSAGES ───────────────────────────────────────── */
.flash {
  border-radius: 10px !important;
  font-family: 'Poppins', sans-serif !important;
  font-weight: 500 !important;
}

/* ── PAGINATION ───────────────────────────────────────────── */
.pagination a, .pagination span {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
}
.pagination a:hover { border-color: var(--orange) !important; color: var(--orange) !important; }
.pagination .cur { border-color: var(--orange) !important; color: var(--orange) !important; }

/* ── EMPTY STATES ─────────────────────────────────────────── */
.empty-state, .empty { font-family: 'Poppins', sans-serif !important; }
.empty-state a, .empty a { color: var(--orange) !important; font-weight: 600 !important; }

/* ── SCROLLBAR ────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.12); border-radius: 99px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.22); }

/* ── SELECTION ────────────────────────────────────────────── */
::selection { background: rgba(255,123,0,.25); color: #fff; }

/* ── ANIMATIONS ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(.96); }
  to   { opacity: 1; transform: scale(1); }
}

.rnm-modal, .ca-modal, .modal { animation: scaleIn .2s cubic-bezier(.2,.85,.3,1) !important; }

/* ── HERO FILTER BUTTONS ──────────────────────────────────── */
.filter-btn {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 600 !important;
  border-radius: 99px !important;
  font-size: .78rem !important;
}
.filter-btn.active, .filter-btn:hover {
  border-color: var(--orange) !important;
  color: var(--orange) !important;
  background: var(--orange-dim) !important;
}

/* ── ALBUM BANNER ─────────────────────────────────────────── */
.album-banner {
  border-radius: var(--radius) !important;
}
.album-banner:hover {
  background: rgba(255,123,0,.09) !important;
  border-color: rgba(255,123,0,.4) !important;
}

/* ── IMPORT PAGE ──────────────────────────────────────────── */
.btn-import {
  font-family: 'Poppins', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, var(--orange), #ff5500) !important;
  box-shadow: 0 4px 20px rgba(255,123,0,.3) !important;
}
.btn-import:hover:not(:disabled) {
  box-shadow: 0 8px 30px rgba(255,123,0,.5) !important;
}

/* ── GLASS SURFACES ───────────────────────────────────────── */
.glass-card {
  background: linear-gradient(135deg, rgba(255,255,255,.04), rgba(255,255,255,.01)) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  backdrop-filter: blur(12px) !important;
}

/* ── RESPONSIVE TWEAKS ────────────────────────────────────── */
@media (max-width: 680px) {
  .stat-value { font-size: 1.6rem !important; }
  .hero h1 { letter-spacing: -.03em !important; }
}