/* ============================================================
   KARIND THEME — dua tema (gelap default & terang)
   Diadaptasi dari identitas visual Karya Indonesia (merah #e50914)
   ============================================================ */
:root {
  --bg: #0a0a0d;
  --bg-soft: #101015;
  --card: #16161c;
  --card-2: #1e1e26;
  --card-hover: #22222b;
  --red: #e50914;
  --red-d: #b2070f;
  --red-l: #ff3c4a;
  --red-glow: rgba(229,9,20,.16);
  --red-soft: rgba(229,9,20,.10);
  --tx: #ffffff;
  --tx-2: #c6c6d2;
  --tx-3: #8a8a99;
  --tx-4: #5a5a68;
  --muted: #8a8a99;
  --border: rgba(255,255,255,0.10);
  --border-2: rgba(255,255,255,0.16);
  --green: #1db954;
  --green-soft: rgba(29,185,84,.14);
  --amber: #f5a524;
  --amber-soft: rgba(245,165,36,.14);
  --blue: #3b82f6;
  --blue-soft: rgba(59,130,246,.14);
  --purple: #7c6fff;
  --purple-soft: rgba(124,111,255,.14);
  --gold: #f5c518;
  --inp-bg: #1c1c24;
  --inp-border: rgba(255,255,255,0.14);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow: 0 4px 16px rgba(0,0,0,.35);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.45);
  --r: 10px;
  --r-lg: 16px;
  --r-full: 999px;
  /* alias kompat lama */
  --primary: var(--red);
  --primary-dark: var(--red-d);
  --primary-light: var(--red-soft);
  --secondary: var(--red-l);
  --gray-50: var(--bg-soft);
  --gray-100: var(--card-2);
  --gray-200: var(--card-hover);
  --gray-300: rgba(255,255,255,.12);
  --gray-400: var(--tx-4);
  --gray-500: var(--tx-3);
  --gray-600: var(--tx-3);
  --gray-700: var(--tx-2);
  --gray-800: var(--tx);
  --gray-900: var(--tx);
  --green-light: var(--green-soft);
  --amber-light: var(--amber-soft);
  --red-light: var(--red-soft);
  --blue-light: var(--blue-soft);
  --purple-light: var(--purple-soft);
  --teal: #14b8a6;
  --teal-light: rgba(20,184,166,.14);
  --coral-light: rgba(255,60,74,.12);
  --r-xl: 20px;
  --shadow-md: var(--shadow);
  /* ── Missing variables used in public/auth views ── */
  --r-full:      9999px;
  --red-soft:    rgba(229, 9, 20, .1);
  --red-d:       #c0070f;
  --green-soft:  rgba(29, 185, 84, .1);
  --border-2:    2px solid rgba(255,255,255,.12);
  --shadow-lg:   0 20px 60px rgba(0,0,0,.35);
  --tx-3:        rgba(255,255,255,.35);
  --inp-bg:      rgba(255,255,255,.05);
  --inp-border:  rgba(255,255,255,.12);

  --role-color:   #e50914;  /* overridden per-component via inline style */
}

[data-theme="light"] {
  --bg: #f4f4f7;
  --bg-soft: #ebebf0;
  --card: #ffffff;
  --card-2: #f0f0f4;
  --card-hover: #e8e8ee;
  --red-glow: rgba(229,9,20,.08);
  --red-soft: rgba(229,9,20,.06);
  --tx: #14141a;
  --tx-2: #3a3a46;
  --tx-3: #6e6e80;
  --tx-4: #a0a0b0;
  --muted: #6e6e80;
  --border: rgba(0,0,0,0.08);
  --border-2: rgba(0,0,0,0.13);
  --gold: #b8940a;
  --inp-bg: #ffffff;
  --inp-border: rgba(0,0,0,0.15);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);
}

* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--tx);
  font-size:14.5px;
  line-height:1.55;
  transition:background .25s, color .25s;
  -webkit-font-smoothing:antialiased;
}
a { color:var(--red-l); text-decoration:none; }
a:hover { text-decoration:underline; }
code { background:var(--card-2); padding:.12rem .4rem; border-radius:6px; font-size:.86em; }

/* ── NAV ── */
.nav { background:var(--bg-soft); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:50; backdrop-filter:blur(12px); }
.nav-inner { max-width:1200px; margin:0 auto; padding:.7rem 1.25rem; display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }
.nav-logo { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.2rem; color:var(--tx); white-space:nowrap; }
.nav-logo img { width:30px; height:30px; }
.nav-logo span { background:linear-gradient(135deg,var(--red-l),var(--red)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.nav-links { display:flex; gap:.15rem; flex-wrap:wrap; flex:1; }
.nav-link { padding:.42rem .85rem; border-radius:var(--r-full); color:var(--tx-2); font-size:.85rem; font-weight:500; white-space:nowrap; transition:.15s; }
.nav-link:hover { background:var(--card-2); text-decoration:none; color:var(--tx); }
.nav-link.nav-right { display:flex; align-items:center; gap:.5rem; }
.nav-bell { position:relative; padding:.45rem .6rem; border-radius:var(--r-full); font-size:1.05rem; }
.nav-bell:hover { background:var(--card-2); text-decoration:none; }
.nav-badge { position:absolute; top:0; right:0; background:var(--red); color:#fff; font-size:.62rem; font-weight:700; border-radius:var(--r-full); padding:.1rem .35rem; min-width:16px; text-align:center; }
.badge-inline { background:var(--red); color:#fff; font-size:.62rem; font-weight:700; border-radius:var(--r-full); padding:.12rem .42rem; margin-left:.3rem; }
.theme-btn { background:var(--card-2); border:1px solid var(--border); color:var(--tx); border-radius:var(--r-full); width:36px; height:36px; cursor:pointer; font-size:1rem; display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.theme-btn:hover { background:var(--card-hover); transform:scale(1.05); }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:1.5rem 1.25rem; }
.page-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.page-title { font-size:1.5rem; font-weight:800; letter-spacing:-.02em; color:var(--tx); }
.page-sub { color:var(--muted); font-size:.88rem; margin-top:.2rem; }

/* ── CARDS & GRID ── */
.card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:1.4rem; margin-bottom:1.25rem; transition:background .25s,border .25s; }
.grid { display:grid; gap:1rem; }
.grid-2 { grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); }
.grid-3 { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.grid-4 { grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); }
.stat { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm); padding:1.1rem 1.25rem; }
.stat-label { font-size:.74rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; }
.stat-value { font-size:1.5rem; font-weight:800; color:var(--tx); margin-top:.25rem; }
.stat-sub { font-size:.78rem; color:var(--muted); margin-top:.15rem; }

/* ── TABLE ── */
.table-wrap { overflow-x:auto; }
.tbl { width:100%; border-collapse:collapse; font-size:.88rem; }
.tbl th { text-align:left; padding:.7rem .8rem; color:var(--muted); font-weight:600; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; border-bottom:1px solid var(--border); }
.tbl td { padding:.75rem .8rem; border-bottom:1px solid var(--border); color:var(--tx-2); }
.tbl tr:last-child td { border-bottom:none; }
.tbl tbody tr:hover { background:var(--card-2); }

/* ── BUTTONS ── */
.btn { display:inline-flex; align-items:center; gap:.4rem; justify-content:center; padding:.6rem 1.1rem; border-radius:var(--r); font-weight:600; font-size:.88rem; cursor:pointer; border:1px solid transparent; transition:.15s; font-family:inherit; text-decoration:none; line-height:1.2; }
.btn:hover { text-decoration:none; transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn-sm { padding:.4rem .8rem; font-size:.8rem; }
.btn-primary { background:linear-gradient(135deg,var(--red-l),var(--red)); color:#fff; box-shadow:0 2px 12px var(--red-glow); }
.btn-primary:hover { filter:brightness(1.08); color:#fff; }
.btn-outline { background:transparent; border-color:var(--border-2); color:var(--tx-2); }
.btn-outline:hover { background:var(--card-2); color:var(--tx); }
.btn-green { background:var(--green); color:#fff; }
.btn-green:hover { filter:brightness(1.08); color:#fff; }
.btn-red { background:var(--red); color:#fff; }
.btn-red:hover { filter:brightness(1.1); color:#fff; }

/* ── FORMS ── */
.form-group { margin-bottom:1rem; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.form-label { display:block; font-weight:600; font-size:.82rem; margin-bottom:.4rem; color:var(--tx-2); }
.form-input, .form-select, .form-textarea { width:100%; padding:.65rem .9rem; border:1.5px solid var(--inp-border); border-radius:var(--r); background:var(--inp-bg); color:var(--tx); font-size:.92rem; font-family:inherit; transition:.15s; }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--red); box-shadow:0 0 0 3px var(--red-soft); }
.form-input::placeholder, .form-textarea::placeholder { color:var(--tx-4); }
.form-hint { font-size:.78rem; color:var(--muted); margin-top:.3rem; }
.required { color:var(--red-l); }

/* ── BADGES ── */
.badge { display:inline-block; padding:.2rem .6rem; border-radius:var(--r-full); font-size:.72rem; font-weight:700; }
.badge.green { background:var(--green-soft); color:var(--green); }
.badge.amber { background:var(--amber-soft); color:var(--amber); }
.badge.red { background:var(--red-soft); color:var(--red-l); }
.badge.blue { background:var(--blue-soft); color:var(--blue); }
.badge.purple { background:var(--purple-soft); color:var(--purple); }
.badge.gray { background:var(--card-2); color:var(--muted); }

/* ── UTIL ── */
.flex { display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; }
.text-sm { font-size:.82rem; }
.text-muted { color:var(--muted); }
.money { font-variant-numeric:tabular-nums; }
.mt-1{margin-top:.5rem}.mt-2{margin-top:1rem}.mb-1{margin-bottom:.5rem}.mb-2{margin-bottom:1rem}
.empty { text-align:center; color:var(--muted); padding:2.5rem 1rem; }
.empty-icon { font-size:2.5rem; margin-bottom:.5rem; opacity:.5; }
.inline-form { display:inline-block; }
.pagination { margin-top:1rem; display:flex; gap:.3rem; }
.pagination a, .pagination span { color:var(--tx-2); }

/* ── ALERTS / TOASTS ── */
.alert { padding:.85rem 1.1rem; border-radius:var(--r); margin-bottom:1rem; font-size:.88rem; }
.alert-success { background:var(--green-soft); color:var(--green); border:1px solid var(--green); }
.alert-error { background:var(--red-soft); color:var(--red-l); border:1px solid var(--red); }
.toast { background:var(--card); border:1px solid var(--border); box-shadow:var(--shadow-lg); }

/* ── PASSWORD TOGGLE ── */
.pw-wrap { position:relative; display:block; }
.pw-wrap input { padding-right:2.6rem !important; }
.pw-toggle { position:absolute; right:.6rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.05rem; opacity:.55; z-index:2; }
.pw-toggle:hover { opacity:1; }

/* ── PRICING (paket) ── */
.price-block { margin:.4rem 0 .2rem; }
.pkg-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:1.25rem; }
.pkg-card { background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); padding:1.6rem; display:flex; flex-direction:column; position:relative; transition:.2s; }
.pkg-card:hover { border-color:var(--border-2); transform:translateY(-3px); box-shadow:var(--shadow); }
.pkg-card.featured { border:2px solid var(--red); box-shadow:0 8px 30px var(--red-glow); }
.cycle-toggle { display:inline-flex; background:var(--card-2); border-radius:var(--r-full); padding:.25rem; gap:.25rem; }
.cycle-toggle button { border:none; background:transparent; color:var(--tx-2); padding:.45rem 1.1rem; border-radius:var(--r-full); font-weight:600; font-size:.85rem; cursor:pointer; font-family:inherit; transition:.15s; }
.cycle-toggle button.on { background:linear-gradient(135deg,var(--red-l),var(--red)); color:#fff; }

/* ── Business category picker ── */
.biz-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem}
.biz-card{background:var(--card);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.6rem 1.2rem;text-align:center;cursor:pointer;transition:.2s;font-family:inherit}
.biz-card:hover{transform:translateY(-4px);border-color:var(--red);box-shadow:var(--shadow)}
.biz-ic{font-size:2.4rem;margin-bottom:.6rem}
.biz-name{font-weight:800;font-size:1.05rem;color:var(--tx);font-family:'Poppins',sans-serif}
.biz-desc{font-size:.8rem;color:var(--muted);margin-top:.3rem}

/* ── CSS Aliases & Missing Variables ─────────────────────────
   Beberapa view lama menggunakan nama class berbeda.
   Alias ini memastikan semua view tetap berfungsi dengan benar.
──────────────────────────────────────────────────────────── */

/* stat-card = stat */
.stat-card { background:var(--card);border:1px solid var(--border);border-radius:12px;padding:.9rem 1.1rem;display:flex;flex-direction:column;gap:.2rem }

/* stat-val = stat-value */
.stat-val { font-size:1.5rem;font-weight:900;color:var(--tx);font-family:'Poppins',sans-serif;line-height:1.2 }

/* form-select = form-input for <select> */
.form-select { width:100%;padding:.7rem .9rem;background:var(--inp-bg);border:1.5px solid var(--inp-border);border-radius:var(--r);color:var(--tx);font-size:.9rem;font-family:inherit;outline:none;cursor:pointer;transition:.18s }
.form-select:focus { border-color:var(--red);box-shadow:0 0 0 3px rgba(229,9,20,.1) }

/* Role-specific stat styles */
.auth-stat-val { font-size:1.4rem;font-weight:900;font-family:'Poppins',sans-serif;color:#fff;line-height:1.1 }
.auth-stat-lbl { font-size:.68rem;color:rgba(255,255,255,.4);margin-top:.1rem }
.cust-stat-val { font-size:1.15rem;font-weight:800;color:var(--tx);font-family:'Poppins',sans-serif }
.cust-stat-lbl { font-size:.7rem;color:var(--muted) }
.dash-stat-val { font-size:1.05rem;font-weight:800;color:var(--tx);font-family:'Poppins',sans-serif;line-height:1.2 }
.dash-stat-lbl { font-size:.72rem;color:var(--muted);margin-top:.15rem }

/* card-hd for flex header in card */
.card-hd { display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;gap:.5rem }
.card-hd .card-title { margin-bottom:0 }

/* form-group improvements */
.form-group select { cursor:pointer }
.form-input[type=number] { font-variant-numeric:tabular-nums }

/* Missing CSS variables fallbacks */

/* ══════════════════════════════════════════════════════
   MISSING COMPONENTS — Added in v3.29 audit
══════════════════════════════════════════════════════ */

/* ── Utility ── */
.mb-0       { margin-bottom: 0 !important; }
.btn-danger { background: linear-gradient(135deg,#e50914,#c0070f); color:#fff; border:none;
              border-radius:var(--r-lg); padding:.55rem 1.1rem; font-weight:700; cursor:pointer;
              font-family:inherit; font-size:.88rem; transition:.18s; display:inline-flex;
              align-items:center; gap:.4rem; box-shadow:0 2px 12px rgba(229,9,20,.3); }
.btn-danger:hover { background:linear-gradient(135deg,#f00e1a,#d0080f); transform:translateY(-1px); }

/* ── Tabs navigation (admin/songs/index) ── */
.tabs   { display:flex; gap:0; border-bottom:2px solid var(--border);
          margin-bottom:1.2rem; overflow-x:auto; }
.tab    { display:inline-flex; align-items:center; padding:.65rem 1.1rem;
          font-size:.88rem; font-weight:700; color:var(--muted);
          text-decoration:none; border-bottom:3px solid transparent;
          margin-bottom:-2px; transition:.15s; white-space:nowrap; cursor:pointer; }
.tab:hover { color:var(--tx); background:rgba(255,255,255,.04); }
.tab.active { color:var(--red-l); border-bottom-color:var(--red); }

/* ── Dash verify body (royalty dashboard) ── */
.dash-verify-body { flex:1; min-width:0; }

/* ── Event create: song picker & fee ── */
.song-box    { background:var(--card); border:1.5px solid var(--border);
               border-radius:var(--r); overflow:auto; max-height:200px; }
.song-pick   { display:flex; align-items:center; gap:.5rem; padding:.4rem .6rem;
               border-bottom:1px solid rgba(255,255,255,.04); cursor:pointer;
               font-size:.84rem; transition:background .12s; }
.song-pick:hover { background:rgba(255,255,255,.04); }
.song-pick:last-child { border-bottom:none; }
.pick-search { width:100%; margin-bottom:.4rem; }
.pick-count  { font-weight:700; color:var(--red-l); }
.fee-display { }   /* inherits .form-input */
.fee-real    { display:none; }   /* hidden input */
.hidden-songs{ }   /* hidden inputs container */
.per-song    { color:var(--red-l); font-weight:800; }

/* ── Song catalog: playable card ── */
.kp-playable  { cursor:pointer; transition:transform .15s, box-shadow .15s; }
.kp-playable:hover { transform:translateY(-2px);
                     box-shadow:0 8px 24px rgba(0,0,0,.25); }
.kp-preview-badge {
  font-size:.62rem; background:rgba(245,197,24,.15); color:var(--gold);
  padding:.1rem .4rem; border-radius:4px; font-weight:700; white-space:nowrap; }

/* ── Video package card ── */
.vid-pkg-card { background:var(--card); border:2px solid var(--border);
                border-radius:14px; padding:.9rem 1rem; cursor:pointer;
                transition:all .18s; display:block; }
.vid-pkg-card:hover { transform:translateY(-2px);
                      box-shadow:0 8px 24px rgba(0,0,0,.2); }