/* ============================================================
   VocalPipe UI — Premium Futuristic Design
   ============================================================ */

:root {
  --bg:        #080C14;
  --bg-card:   #0D1320;
  --bg-input:  rgba(255,255,255,0.04);
  --border:    rgba(255,255,255,0.07);
  --gold:      #F59E0B;
  --gold-dim:  rgba(245,158,11,0.13);
  --blue:      #3B82F6;
  --blue-dim:  rgba(59,130,246,0.12);
  --green:     #10B981;
  --green-dim: rgba(16,185,129,0.12);
  --red:       #EF4444;
  --red-dim:   rgba(239,68,68,0.12);
  --orange:    #F97316;
  --text:      #F1F5F9;
  --muted:     #64748B;
  --dim:       #94A3B8;
  --radius:    12px;
  --radius-s:  8px;
  --nav-h:     60px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}

body {
  font-family: -apple-system,BlinkMacSystemFont,'Segoe UI',system-ui,sans-serif;
  background: var(--bg); color: var(--text);
  min-height: 100vh; display: flex; flex-direction: column;
  font-size: 14px; line-height: 1.6; -webkit-font-smoothing: antialiased;
}

/* Animated grid overlay */
body::before {
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background-image:
    linear-gradient(rgba(245,158,11,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,158,11,0.025) 1px, transparent 1px);
  background-size: 44px 44px;
  animation: gridMove 24s linear infinite;
}
@keyframes gridMove { to { background-position: 44px 44px; } }

a { color:var(--gold); text-decoration:none; transition:opacity .2s; }
a:hover { opacity:.75; }

/* Brand */
.brand-vocal { color:var(--text);  font-weight:700; letter-spacing:-0.5px; }
.brand-gold  { color:var(--gold);  font-weight:700; letter-spacing:-0.5px; }
.brand-by    { color:var(--muted); font-size:0.72rem; font-weight:400;
               margin-left:7px; letter-spacing:0.5px; text-transform:uppercase; }

/* Navbar */
.navbar {
  position:fixed; top:0; left:0; right:0; z-index:100; height:var(--nav-h);
  background:rgba(8,12,20,0.92); backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px); border-bottom:1px solid var(--border);
}
.navbar-inner {
  max-width:1200px; margin:0 auto; height:100%; padding:0 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.navbar-brand { display:flex; align-items:baseline; font-size:1.15rem; text-decoration:none; }
.navbar-links { display:flex; align-items:center; gap:4px; }

.nav-link {
  color:var(--dim); padding:6px 12px; border-radius:var(--radius-s);
  font-size:0.84rem; font-weight:500; transition:color .2s,background .2s; text-decoration:none;
}
.nav-link:hover,.nav-link.active { color:var(--text); background:rgba(255,255,255,0.06); opacity:1; }

.nav-user {
  display:flex; align-items:center; gap:8px; padding:4px 12px;
  border:1px solid var(--border); border-radius:20px;
  font-size:0.8rem; color:var(--dim);
}
.nav-logout { border:1px solid var(--border); border-radius:var(--radius-s); }
.nav-logout:hover { color:var(--red); background:var(--red-dim); border-color:rgba(239,68,68,.2); opacity:1; }

/* Notification badge on nav links */
.nav-notif {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff;
  border-radius:10px; font-size:.6rem; font-weight:700;
  padding:1px 5px; min-width:16px; line-height:1.4;
  margin-left:3px; vertical-align:top; margin-top:1px;
}

/* Role badges in nav */
.user-badge,.role-super_admin,.role-admin,.role-user {
  display:inline-flex; align-items:center; padding:2px 8px; border-radius:20px;
  font-size:0.68rem; font-weight:700; letter-spacing:0.5px; text-transform:uppercase;
}
.role-super_admin { background:rgba(139,92,246,.15); color:#C4B5FD; border:1px solid rgba(139,92,246,.25); }
.role-admin       { background:var(--blue-dim);       color:#93C5FD; border:1px solid rgba(59,130,246,.2); }
.role-user        { background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--border); }

/* Main */
.main-content {
  flex:1; position:relative; z-index:1;
  max-width:1200px; margin:0 auto; width:100%;
  padding:calc(var(--nav-h) + 36px) 24px 40px;
}

/* Footer */
.footer {
  position:relative; z-index:1; text-align:center; padding:16px;
  color:var(--muted); font-size:.75rem; border-top:1px solid var(--border);
}

/* Flash */
.flash-container {
  position:fixed; top:calc(var(--nav-h) + 12px); right:16px; z-index:200;
  display:flex; flex-direction:column; gap:8px; max-width:360px;
}
.flash {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-radius:var(--radius-s); font-size:.85rem; font-weight:500;
  animation:slideIn .25s ease; backdrop-filter:blur(12px);
}
@keyframes slideIn { from{opacity:0;transform:translateX(20px);} to{opacity:1;transform:translateX(0);} }
.flash-error   { background:rgba(239,68,68,.15);  border:1px solid rgba(239,68,68,.3);  color:#FCA5A5; }
.flash-success { background:rgba(16,185,129,.15); border:1px solid rgba(16,185,129,.3); color:#6EE7B7; }
.flash-warning { background:rgba(249,115,22,.15); border:1px solid rgba(249,115,22,.3); color:#FDBA74; }
.flash-info    { background:rgba(59,130,246,.15); border:1px solid rgba(59,130,246,.3); color:#93C5FD; }
.flash-close { background:none; border:none; cursor:pointer; color:inherit; font-size:14px; opacity:.6; padding:0; }
.flash-close:hover { opacity:1; }

/* Auth */
.auth-wrapper {
  min-height:calc(100vh - var(--nav-h) - 60px);
  display:flex; align-items:center; justify-content:center; padding:40px 16px;
}
.auth-card {
  width:100%; max-width:420px;
  background:var(--bg-card); border:1px solid rgba(255,255,255,.08);
  border-radius:18px; padding:44px 40px;
  position:relative; overflow:hidden;
  box-shadow:0 0 80px rgba(0,0,0,.6), 0 0 0 1px rgba(245,158,11,.04);
}
.auth-card::before {
  content:''; position:absolute; top:0; left:15%; right:15%; height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
}
.auth-card::after {
  content:''; position:absolute; top:-80px; left:50%; transform:translateX(-50%);
  width:260px; height:260px; border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.07) 0%,transparent 70%);
  pointer-events:none;
}

.auth-header { text-align:center; margin-bottom:36px; }
.auth-header h1 { font-size:2.2rem; font-weight:700; letter-spacing:-1px; margin-bottom:8px; }
.auth-subtitle { color:var(--muted); font-size:.875rem; }
.auth-form { display:flex; flex-direction:column; gap:22px; }
.auth-footer { text-align:center; margin-top:24px; color:var(--muted); font-size:.85rem; }

/* Forms */
.form-group { display:flex; flex-direction:column; gap:7px; }
.form-group label {
  font-size:.7rem; font-weight:700; letter-spacing:1.2px;
  color:var(--muted); text-transform:uppercase;
}
.form-input {
  background:var(--bg-input); border:1px solid rgba(255,255,255,.09);
  border-radius:var(--radius-s); color:var(--text); font-size:.9rem;
  padding:12px 14px; outline:none; width:100%; font-family:inherit;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.form-input::placeholder { color:var(--muted); }
.form-input:focus {
  border-color:var(--gold); background:rgba(255,255,255,.06);
  box-shadow:0 0 0 3px rgba(245,158,11,.12), 0 0 20px rgba(245,158,11,.07);
}

/* Eye toggle */
.input-eye-wrap { position:relative; }
.input-eye-wrap .form-input { padding-right:44px; }
.eye-toggle {
  position:absolute; right:12px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; color:var(--muted); padding:4px;
  display:flex; align-items:center; transition:color .2s;
}
.eye-toggle:hover { color:var(--gold); }

/* Select */
select.form-input {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2'%3E%3Cpolyline points='6,9 12,15 18,9'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center; padding-right:36px; cursor:pointer;
}
select.form-input option {
  background-color:#0D1320; color:#F1F5F9;
}

/* Buttons */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 20px; border-radius:var(--radius-s); font-size:.875rem; font-weight:600;
  border:none; cursor:pointer; transition:all .2s; font-family:inherit; text-decoration:none;
}
.btn-primary {
  background:linear-gradient(135deg,#F59E0B,#D97706); color:#0F172A;
  box-shadow:0 4px 20px rgba(245,158,11,.25);
}
.btn-primary:hover { box-shadow:0 4px 32px rgba(245,158,11,.45); transform:translateY(-1px); opacity:1; color:#0F172A; }
.btn-primary:active { transform:translateY(0); }
.btn-secondary { background:rgba(255,255,255,.05); color:var(--dim); border:1px solid var(--border); }
.btn-secondary:hover { background:rgba(255,255,255,.09); color:var(--text); opacity:1; }
.btn-danger  { background:var(--red-dim);   color:#FCA5A5; border:1px solid rgba(239,68,68,.25); }
.btn-danger:hover  { background:rgba(239,68,68,.2);  color:#FECACA; opacity:1; }
.btn-success { background:var(--green-dim); color:#6EE7B7; border:1px solid rgba(16,185,129,.25); }
.btn-success:hover { background:rgba(16,185,129,.2); color:#A7F3D0; opacity:1; }
.btn-sm   { padding:6px 12px; font-size:.78rem; }
.btn-full { width:100%; padding:14px; font-size:.95rem; margin-top:4px; }

/* Badges */
.badge {
  display:inline-flex; align-items:center; padding:3px 10px; border-radius:20px;
  font-size:.7rem; font-weight:700; letter-spacing:.6px; text-transform:uppercase;
}
.badge-approved,.badge-active   { background:var(--green-dim); color:#6EE7B7; border:1px solid rgba(16,185,129,.2); }
.badge-pending                  { background:rgba(245,158,11,.12); color:#FCD34D; border:1px solid rgba(245,158,11,.2); }
.badge-suspended,.badge-overdue { background:var(--red-dim); color:#FCA5A5; border:1px solid rgba(239,68,68,.2); }
.badge-super-admin              { background:rgba(139,92,246,.15); color:#C4B5FD; border:1px solid rgba(139,92,246,.25); }
.badge-admin                    { background:var(--blue-dim); color:#93C5FD; border:1px solid rgba(59,130,246,.2); }
.badge-user                     { background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--border); }
.badge-done                     { background:var(--green-dim); color:#6EE7B7; border:1px solid rgba(16,185,129,.2); }
.badge-failed                   { background:var(--red-dim); color:#FCA5A5; border:1px solid rgba(239,68,68,.2); }
.badge-queued                   { background:rgba(255,255,255,.06); color:var(--dim); border:1px solid var(--border); }
.badge-processing               { background:var(--blue-dim); color:#93C5FD; border:1px solid rgba(59,130,246,.2);
                                   animation:pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.4;} }

/* Tables */
.table-wrap { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
table { width:100%; border-collapse:collapse; }
thead tr { background:rgba(255,255,255,.03); border-bottom:1px solid var(--border); }
th { padding:12px 16px; text-align:left; font-size:.68rem; font-weight:700;
     letter-spacing:.9px; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
tr:last-child td { border-bottom:none; }
tbody tr:hover { background:rgba(255,255,255,.02); }
.td-actions { display:flex; flex-wrap:wrap; gap:6px; align-items:center; }

/* Page header */
.page-header {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:28px; flex-wrap:wrap; gap:12px;
}
.page-header h2 { font-size:1.3rem; font-weight:700; }

/* Stats */
.stats-row { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:14px; margin-bottom:28px; }
.stat-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:20px;
  transition:border-color .3s,transform .2s;
}
.stat-card:hover { border-color:rgba(245,158,11,.2); transform:translateY(-2px); }
.stat-value { font-size:2rem; font-weight:700; line-height:1; margin-bottom:4px; }
.stat-label { font-size:.72rem; color:var(--muted); letter-spacing:.5px; text-transform:uppercase; }

/* Tabs */
.tab-nav { display:flex; gap:4px; margin-bottom:24px; border-bottom:1px solid var(--border); }
.tab-nav a {
  padding:10px 18px; font-size:.84rem; font-weight:500; color:var(--dim);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
  transition:color .2s,border-color .2s;
}
.tab-nav a:hover { color:var(--text); opacity:1; }
.tab-nav a.active { color:var(--gold); border-bottom-color:var(--gold); }

.section-title {
  font-size:.7rem; font-weight:700; letter-spacing:1.1px; color:var(--muted);
  text-transform:uppercase; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--border);
}

/* Generate */
.generate-card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  padding:28px; margin-bottom:28px; position:relative; overflow:hidden;
}
.generate-card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.5),transparent);
}
.generate-form { display:grid; grid-template-columns:1fr 200px auto; gap:16px; align-items:end; }
@media(max-width:680px){ .generate-form { grid-template-columns:1fr; } }

/* Empty */
.empty-state { text-align:center; padding:48px 24px; color:var(--muted); }
.empty-state .empty-icon { font-size:2.5rem; margin-bottom:12px; opacity:.35; }

/* Inline form */
.inline-form {
  background:rgba(255,255,255,.02); border:1px solid var(--border); border-radius:var(--radius-s);
  padding:14px 16px; margin-top:8px; display:none; flex-direction:column; gap:10px;
}
.inline-form.open { display:flex; }
.inline-form-row { display:flex; gap:10px; flex-wrap:wrap; }
.inline-form-row .form-input { flex:1; min-width:120px; }
.collapse-toggle {
  background:none; border:none; cursor:pointer; color:var(--gold); font-size:.8rem;
  font-weight:500; padding:0; font-family:inherit; text-decoration:underline; text-underline-offset:3px;
}

/* Days */
.days-ok   { color:var(--green);  font-weight:600; }
.days-warn { color:var(--orange); font-weight:600; }
.days-over { color:var(--red);    font-weight:600; }
.days-none { color:var(--muted); }

/* Pending */
.pending-wrapper {
  min-height:calc(100vh - var(--nav-h) - 60px);
  display:flex; align-items:center; justify-content:center; padding:40px 16px;
}
.pending-card {
  text-align:center; max-width:400px; background:var(--bg-card);
  border:1px solid var(--border); border-radius:16px; padding:48px 36px;
}
.pending-icon { font-size:3rem; margin-bottom:20px; }
.pending-card p { color:var(--muted); font-size:.9rem; line-height:1.7; }

/* Utils */
.link-gold { color:var(--gold); font-weight:500; }
.link-gold:hover { opacity:.8; }
.text-muted { color:var(--muted); }
.text-gold  { color:var(--gold); }
.text-green { color:var(--green); }
.text-red   { color:var(--red); }
.mt-8  { margin-top:8px; }
.mt-16 { margin-top:16px; }
.mt-24 { margin-top:24px; }
.mb-16 { margin-bottom:16px; }
.mb-24 { margin-bottom:24px; }
.flex  { display:flex; }
.flex-wrap { flex-wrap:wrap; }
.gap-8 { gap:8px; }
.align-center { align-items:center; }
.justify-between { justify-content:space-between; }
.w-full { width:100%; }

/* JS-based tab panels */
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.tab-nav .tab-badge {
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--red); color:#fff;
  border-radius:10px; font-size:.6rem; font-weight:700;
  padding:1px 5px; min-width:16px; line-height:1.4;
  margin-left:4px;
}

/* Admin table classes */
.table-wrapper { overflow-x:auto; border-radius:var(--radius); border:1px solid var(--border); }
.data-table { width:100%; border-collapse:collapse; }
.data-table thead tr { background:rgba(255,255,255,.03); border-bottom:1px solid var(--border); }
.data-table th { padding:12px 16px; text-align:left; font-size:.68rem; font-weight:700;
                 letter-spacing:.9px; color:var(--muted); text-transform:uppercase; white-space:nowrap; }
.data-table td { padding:13px 16px; border-bottom:1px solid var(--border); vertical-align:middle; }
.data-table tr:last-child td { border-bottom:none; }
.data-table tbody tr:hover { background:rgba(255,255,255,.02); }
.action-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.action-row-multi { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.inline-details { display:inline; }
.inline-details summary { list-style:none; }
.inline-details summary::-webkit-details-marker { display:none; }

/* ── Credit dialogs ─────────────────────────────────────────── */
.credit-dialog {
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:var(--radius); color:var(--text);
  padding:1.75rem; min-width:320px; max-width:92vw; box-shadow:0 24px 60px rgba(0,0,0,.6);
  position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
  margin:0;
}
.credit-dialog::backdrop { background:rgba(0,0,0,.75); }
.credit-dialog h3 { margin:0 0 1.1rem; font-size:1rem; font-weight:600; }
.credit-dialog-form { display:flex; flex-direction:column; gap:.65rem; }
.credit-dialog-actions { display:flex; gap:.5rem; justify-content:flex-end; margin-top:.25rem; }
.btn-ghost { background:transparent; border:1px solid var(--border); color:var(--muted); }
.btn-ghost:hover { background:rgba(255,255,255,.06); color:var(--text); opacity:1; }
.btn-warning { background:rgba(249,115,22,.12); color:#FDBA74; border:1px solid rgba(249,115,22,.25); }
.btn-warning:hover { background:rgba(249,115,22,.2); color:#FED7AA; opacity:1; }
.btn-danger { background:rgba(239,68,68,.1); color:#F87171; border:1px solid rgba(239,68,68,.25); }
.btn-danger:hover { background:rgba(239,68,68,.2); color:#FCA5A5; opacity:1; }
.job-actions { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }

/* ── Nav credit pill ────────────────────────────────────────── */
.nav-credit { font-size:.72rem; padding:2px 9px; border-radius:12px;
  background:rgba(245,158,11,.1); border:1px solid rgba(245,158,11,.25);
  color:var(--gold); font-weight:600; white-space:nowrap; }
.nav-credit.credit-low { background:rgba(249,115,22,.1); border-color:rgba(249,115,22,.3); color:#FB923C; }
.nav-credit.credit-empty { background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.3); color:#F87171; }
.form-input-sm { padding:7px 10px; font-size:.82rem; }
.btn-warning { background:rgba(249,115,22,.12); color:#FDBA74; border:1px solid rgba(249,115,22,.25); }
.btn-warning:hover { background:rgba(249,115,22,.2); color:#FED7AA; opacity:1; }
.muted { color:var(--muted); font-size:.82rem; }
.col-date { font-size:.8rem; color:var(--dim); white-space:nowrap; }
.col-id   { color:var(--muted); font-size:.8rem; }
.col-script { max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.col-action { white-space:nowrap; }
.error-tip { color:var(--red); font-size:.8rem; cursor:help; text-decoration:underline dotted; }

/* Card system */
.card {
  background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
  margin-bottom:20px; position:relative; overflow:hidden;
}
.card::before {
  content:''; position:absolute; top:0; left:0; right:0; height:1px;
  background:linear-gradient(90deg,transparent,rgba(245,158,11,.4),transparent);
}
.card-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:20px 24px 0; gap:12px;
}
.card-title { display:flex; align-items:center; gap:10px; font-size:1rem; font-weight:600; }
.card-body  { padding:20px 24px 24px; }
.card-wide  {}
.dashboard-grid { display:flex; flex-direction:column; gap:0; }
.page-subtitle  { color:var(--muted); font-size:.875rem; }
.file-input-wrapper { display:flex; flex-direction:column; gap:4px; }
.file-hint { font-size:.75rem; color:var(--muted); }
.file-input { cursor:pointer; }
.file-input::file-selector-button {
  background:rgba(255,255,255,.06); border:1px solid var(--border); border-radius:6px;
  color:var(--dim); padding:5px 12px; cursor:pointer; font-size:.82rem; margin-right:10px;
  transition:background .2s;
}
.file-input::file-selector-button:hover { background:rgba(255,255,255,.1); color:var(--text); }
.form-select { background-color:var(--bg-input); }
.refresh-badge {
  display:inline-flex; align-items:center; gap:6px; font-size:.75rem;
  color:var(--dim); padding:3px 10px; border:1px solid var(--border); border-radius:20px;
}
.spinner {
  display:inline-block; width:8px; height:8px; border-radius:50%;
  border:2px solid rgba(59,130,246,.3); border-top-color:var(--blue);
  animation:spin .7s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }

/* Admin page header compat */
.page-header h1 { font-size:1.6rem; font-weight:700; letter-spacing:-.5px; }
.page-header p  { color:var(--muted); font-size:.875rem; margin-top:4px; }

/* ── Progress bars ─────────────────────────────────────────── */
.progress-wrap {
  position: relative;
  height: 22px;
  background: rgba(255,255,255,0.06);
  border-radius: 11px;
  overflow: hidden;
  min-width: 140px;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(90deg, #F59E0B, #FBBF24);
  border-radius: 11px;
  transition: width .6s ease;
}
.progress-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
  white-space: nowrap;
}
@keyframes pulse-bar {
  0%,100% { opacity: .4; }
  50%      { opacity: 1; }
}
.progress-pulse { animation: pulse-bar 1.4s ease-in-out infinite; }

/* ── Credit pill in card header ─────────────────────────────── */
.credit-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  background: rgba(245,158,11,.12);
  border: 1px solid rgba(245,158,11,.3);
  color: #FBBF24;
  font-size: .75rem;
  font-weight: 600;
}
.credit-pill.credit-low  { background: rgba(245,158,11,.2); border-color: rgba(245,158,11,.5); }
.credit-pill.credit-empty {
  background: rgba(239,68,68,.12);
  border-color: rgba(239,68,68,.3);
  color: #F87171;
}

/* No-credits banner */
.no-credits-banner {
  background: rgba(239,68,68,.1);
  border: 1px solid rgba(239,68,68,.25);
  color: #F87171;
  border-radius: 8px;
  padding: .75rem 1rem;
  font-size: .85rem;
  margin-bottom: 1rem;
}

/* ── Script input tabs (File / Paste) ────────────────────────── */
.input-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: .75rem;
}
.input-tab {
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--muted);
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
}
.input-tab.active {
  background: rgba(245,158,11,.15);
  border-color: rgba(245,158,11,.4);
  color: var(--gold);
}
.script-textarea {
  resize: vertical;
  font-family: 'Courier New', monospace;
  font-size: .82rem;
  line-height: 1.5;
  min-height: 150px;
}

/* ── Referral code box ───────────────────────────────────────── */
.referral-code-box {
  font-family: 'Courier New', monospace;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: 3px;
  color: var(--gold);
  background: rgba(245,158,11,.08);
  border: 1px dashed rgba(245,158,11,.3);
  border-radius: 8px;
  padding: .6rem 1rem;
  text-align: center;
}

/* ── Credits admin table ─────────────────────────────────────── */
.credit-balance      { font-weight: 700; color: #A3E635; }
.credit-balance.credit-low   { color: #FBBF24; }
.credit-balance.credit-empty { color: #F87171; }
.credit-positive { color: #A3E635; font-weight: 700; }
.credit-negative { color: #F87171; font-weight: 700; }
.info-box {
  background: rgba(245,158,11,.07);
  border: 1px solid rgba(245,158,11,.2);
  border-radius: 8px;
  padding: .75rem 1.25rem;
  font-size: .85rem;
  color: var(--muted);
}
.card-sm { max-width: 340px; }