:root {
  --brand: #e1306c;
  --brand2: #f77737;
}
body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Pretendard', 'Malgun Gothic', sans-serif; }

.brand-grad { background: linear-gradient(135deg, var(--brand), var(--brand2)); }
.brand-text { background: linear-gradient(135deg, var(--brand), var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; }

.card { background:#fff; border-radius:16px; box-shadow:0 1px 3px rgba(15,23,42,.08), 0 8px 24px -12px rgba(15,23,42,.12); }

input[type="range"] { -webkit-appearance:none; appearance:none; height:6px; border-radius:6px; background:#e2e8f0; outline:none; }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%; background:var(--brand); cursor:pointer; border:3px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.25); }
input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:var(--brand); cursor:pointer; border:3px solid #fff; }

.reel-card { transition: transform .15s ease, box-shadow .15s ease; }
.reel-card:hover { transform: translateY(-2px); box-shadow:0 12px 28px -12px rgba(15,23,42,.3); }

.badge { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:600; }

.skeleton { background:linear-gradient(90deg,#eef2f7 25%,#e2e8f0 37%,#eef2f7 63%); background-size:400% 100%; animation:sk 1.2s ease infinite; }
@keyframes sk { 0%{background-position:100% 50%} 100%{background-position:0 50%} }

.tab-active { border-color: var(--brand) !important; color: var(--brand) !important; }
::-webkit-scrollbar { width:10px; height:10px; }
::-webkit-scrollbar-thumb { background:#cbd5e1; border-radius:8px; }