* { box-sizing: border-box; }
body { margin:0; font-family:'Segoe UI',Roboto,Arial,sans-serif; background:#0f1115; color:#eee; }
.wrap { max-width: 1100px; margin: 0 auto; padding: 28px 20px; }
.center { min-height: 100vh; display:flex; align-items:center; justify-content:center; }
.card { background:#181b22; border:1px solid #262a33; border-radius:14px; padding: 32px; width: 380px; }
h1 { margin-top:0; font-size:1.6rem; }
label { display:block; font-size:.85rem; color:#9aa3b2; margin-bottom:6px; }
input[type=text], input[type=number], input[type=password] {
  width:100%; padding:12px 14px; border-radius:8px; border:1px solid #2c313c; background:#0f1115; color:#fff;
  font-size:1.1rem; letter-spacing:.1em; margin-bottom:14px;
}
.btn { background:#7c4dff; color:#fff; border:none; padding:12px 20px; border-radius:8px; font-weight:600; cursor:pointer; font-size:1rem; }
.btn:hover { background:#6a3cf0; }
.btn.danger { background:#e5484d; }
.btn.danger:hover { background:#cf3d42; }
.btn.primary { background:#39f; }
.btn.primary:hover { background:#0f7ae5; }
.btn.warn { background:#e5a03e; }
.btn.warn:hover { background:#cc8e33; }
.btn.small { padding:6px 12px; font-size:.8rem; border-radius:6px; margin-right:6px; margin-bottom:4px; }
.error { color:#ff8a8a; margin-top: -6px; margin-bottom: 14px; font-size:.9rem; }
table { width:100%; border-collapse: collapse; margin-top: 10px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid #232733; font-size:.92rem; }
th { color:#9aa3b2; text-transform:uppercase; font-size:.72rem; letter-spacing:.05em; }
.section { background:#181b22; border:1px solid #262a33; border-radius:14px; padding:22px; margin-bottom: 24px; }
.top-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom: 20px; }
.tag { padding:3px 9px; border-radius:999px; font-size:.75rem; }
.tag.online { background:#1f4d3a; color:#4ade80; }
.tag.offline { background:#333844; color:#9aa3b2; }
.tag.muted { background:#4d3a1f; color:#e5a03e; }
.tag.lifetime { background:#1f2f4d; color:#7ea3ff; }
.tag.expired { background:#4d2a2c; color:#ff8a8a; }
.thumb { width:64px; border-radius:6px; vertical-align:middle; margin-right:8px; }
.row-title { display:flex; align-items:center; }

/* Search box shouldn't inherit the wide letter-spacing meant for 4-digit channel code inputs */
#search-input, #default-video-input { letter-spacing: normal; font-size: 1rem; margin-bottom: 0; }

.icon-btn {
  position: relative; flex-shrink:0; width:44px; height:44px; border-radius:8px;
  background:#0f1115; border:1px solid #2c313c; color:#fff; font-size:1.2rem;
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.fav-badge {
  position:absolute; top:-6px; right:-6px; background:#e5484d; color:#fff; font-size:.65rem;
  min-width:18px; height:18px; border-radius:999px; display:flex; align-items:center; justify-content:center; padding:0 4px;
}

#search-banner .tag { display:inline-block; margin-top:10px; }

.result-card {
  position:relative; display:flex; gap:12px; padding:12px; background:#0f1115;
  border:1px solid #232733; border-radius:10px; margin-top:10px;
}
.result-title { font-weight:600; font-size:.92rem; margin-bottom:2px; line-height:1.3; padding-right:26px; }
.heart-btn {
  position:absolute; top:10px; right:10px; background:none; border:none; cursor:pointer;
  font-size:1.2rem; color:#8a93a6; line-height:1; padding:2px;
}
.heart-btn.favorited { color:#e5484d; }

/* Favorites overlay */
.favorites-overlay {
  position: fixed; inset: 0; z-index: 500; background: rgba(0,0,0,.6);
  display: flex; align-items: flex-start; justify-content: center; padding-top: 8vh;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.favorites-overlay.visible { opacity: 1; pointer-events: auto; }
.favorites-panel {
  width: 100%; max-width: 480px; max-height: 78vh; background: #12151b;
  border-radius: 16px; border: 1px solid #262a33;
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(-8px); transition: transform .25s ease;
}
.favorites-overlay.visible .favorites-panel { transform: translateY(0); }
.favorites-header {
  display:flex; justify-content:space-between; align-items:center;
  padding: 16px 18px; border-bottom: 1px solid #232733; font-weight:600;
}
.favorites-header .icon-btn { width:36px; height:36px; font-size:1rem; }
.favorites-list { overflow-y: auto; padding: 4px 14px 14px; }

/* QR code modal body */
.qr-body {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 20px; text-align: center;
}
.qr-body img { border-radius: 10px; background: #fff; padding: 10px; }
.qr-body .muted { font-size: .75rem; word-break: break-all; margin: 0; }
.qr-body .btn { width: 100%; }