/* AI Subtitle & Translation — Light UI v2 (User + Admin)
   Drop-in replacement.
   - Light-first design, dark via [data-theme="dark"]
   - Consistent spacing, cards, tables, forms, badges, progress
   - Admin extras: sidebar, table tools, chips, code blocks
*/

:root{
  /* Light palette */
  --bg:#f7fafc;
  --panel:#ffffff;
  --panel-2:#f1f5f9;
  --text:#0f172a;
  --muted:#475569;
  --border:#e5e7eb;
  --shadow:0 8px 28px rgba(2,6,23,.08);

  --accent:#10b981;   /* HelloMe green */
  --accent-2:#0ea5e9; /* blue */
  --danger:#ef4444;
  --warn:#f59e0b;
  --ok:#22c55e;
  --link:#0ea5e9;
  --focus: 0 0 0 4px rgba(16,185,129,.15);
}

html[data-theme="dark"], body[data-theme="dark"]{
  --bg:#0c0d0e; --panel:#161819; --panel-2:#0f1112;
  --text:#e5e7eb; --muted:#9aa0a6; --border:#262b31;
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --link:#31d6bb;
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);
     font:15px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;}

/* Topbar */
.topbar{position:sticky;top:0;z-index:60;background:var(--panel);
  border-bottom:1px solid var(--border);box-shadow:var(--shadow);
  display:flex;align-items:center;gap:14px;padding:12px 18px;}
.brand{font-weight:800;letter-spacing:.2px;color:var(--text)}
.topbar .spacer{flex:1}
.topbar a,.topbar button.link{color:var(--link);text-decoration:none;font-weight:600;background:none;border:none;cursor:pointer;padding:6px 10px;border-radius:8px}
.topbar .pill{background:var(--panel-2);border:1px solid var(--border);color:var(--muted);padding:6px 10px;border-radius:999px;font-size:13px}

/* Layout */
.container{max-width:1120px;margin:24px auto;padding:0 18px}
.grid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:980px){.grid-2{grid-template-columns:1fr 1fr} .grid-3{grid-template-columns:2fr 1fr 1fr}}

/* Cards */
.card{background:var(--panel);border:1px solid var(--border);
  border-radius:14px;padding:18px;box-shadow:var(--shadow)}
.card h3{margin:0 0 10px 0}

/* Form elements */
label{display:block;font-weight:600;margin:8px 0 6px;color:var(--muted)}
input[type="text"],input[type="url"],input[type="number"],input[type="email"],input[type="password"],select,textarea{
  width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);
  background:#fff;color:#0f172a;outline:none;transition:box-shadow .15s,border-color .15s;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea,
body[data-theme="dark"] input, body[data-theme="dark"] select, body[data-theme="dark"] textarea{
  background:#111318;color:#e5e7eb;border-color:#2a2f36;
}
input:focus,select:focus,textarea:focus{border-color:var(--accent);box-shadow:var(--focus)}
.help{color:var(--muted);font-size:12px}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:#fff;border:none;
  padding:10px 14px;border-radius:10px;cursor:pointer;font-weight:700;letter-spacing:.2px;
  transition:transform .05s ease,opacity .2s}
.btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)}
.btn.secondary{background:var(--accent-2)} .btn.ghost{background:transparent;color:var(--text);border:1px solid var(--border)}
.btn.danger{background:var(--danger)}
.btn[disabled],.btn.disabled{opacity:.5;pointer-events:none}
.btn .spinner{display:none;width:14px;height:14px;border:2px solid #fff;border-right-color:transparent;border-radius:50%;animation:spin .65s linear infinite}
.btn.loading .spinner{display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* Badges */
.badge{padding:3px 10px;border-radius:999px;font-size:12px;font-weight:800;display:inline-block}
.badge.pending{background:#cbd5e1;color:#0f172a}
.badge.queued{background:#bae6fd;color:#075985}
.badge.running{background:#fde68a;color:#7c2d12}
.badge.completed{background:#bbf7d0;color:#065f46}
.badge.failed{background:#fecaca;color:#7f1d1d}
.badge.stopped{background:#fed7aa;color:#7c2d12}

/* Progress */
.progress{height:14px;background:var(--panel-2);border:1px solid var(--border);
  border-radius:999px;overflow:hidden}
.progress>.bar{height:100%;width:0%;background:linear-gradient(90deg,var(--accent),#34d399)}
.progress>.bar.striped{background-size:40px 14px;background-image:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 10px,rgba(255,255,255,.15) 10px 20px),linear-gradient(90deg,var(--accent),#34d399);animation:stripe 1s linear infinite}
@keyframes stripe{to{background-position:-40px 0,0 0}}

/* Tables */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
.table thead th{text-align:left;font-size:12px;text-transform:uppercase;color:var(--muted);padding:0 12px}
.table tbody tr{background:var(--panel);border:1px solid var(--border);box-shadow:var(--shadow)}
.table tbody td{padding:12px;border-top:1px solid var(--border)}
.table tbody tr:first-child td{border-top-left-radius:12px;border-top-right-radius:12px}
.table tbody tr:last-child td{border-bottom-left-radius:12px;border-bottom-right-radius:12px}

/* Utilities */
.row{display:flex;gap:12px;flex-wrap:wrap} .col{flex:1}
.kpi{background:var(--panel);border:1px solid var(--border);padding:12px 14px;border-radius:12px;box-shadow:var(--shadow);
  display:flex;justify-content:space-between;align-items:center}
.kpi .label{color:var(--muted);font-weight:600} .kpi .value{font-size:20px;font-weight:800}
code{background:var(--panel-2);padding:2px 6px;border-radius:6px;border:1px solid var(--border)}
pre{background:var(--panel-2);border:1px solid var(--border);border-radius:12px;padding:12px;color:var(--text);max-height:320px;overflow:auto}

/* Admin extras */
.admin-wrap{display:grid;grid-template-columns:240px 1fr;gap:18px}
.admin-sidebar{position:sticky;top:72px;height:calc(100vh - 90px);background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:14px;box-shadow:var(--shadow)}
.admin-menu a{display:block;padding:10px 12px;border-radius:10px;color:var(--text);text-decoration:none}
.admin-menu a:hover{background:var(--panel-2)}
.admin-menu a.active{background:rgba(16,185,129,.12);color:#065f46}
.table-tools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.chip{background:var(--panel-2);border:1px solid var(--border);border-radius:999px;padding:6px 10px;font-size:12px;color:var(--muted)}