/* FPT TTS Studio — web edition
   Token system: dark recording-studio backdrop, amber "record light" accent,
   teal waveform accent, Be Vietnam Pro for Vietnamese-friendly display/body type,
   JetBrains Mono for meta/technical data (timestamps, badges, counters). */

:root{
  --bg: #14151a;
  --surface: #1b1d25;
  --surface-2: #22242e;
  --surface-3: #2a2c38;
  --border: #32343f;
  --text: #ede9e0;
  --text-dim: #9a9caa;
  --text-faint: #666876;
  --accent: #e8a33d;
  --accent-soft: rgba(232,163,61,.14);
  --accent-2: #3ec9a7;
  --accent-2-soft: rgba(62,201,167,.14);
  --danger: #e0645d;
  --danger-soft: rgba(224,100,93,.14);
  --radius: 10px;
  --radius-lg: 16px;
  --font-display: "Be Vietnam Pro", "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% -10%, rgba(232,163,61,.08), transparent 40%),
    radial-gradient(circle at 100% 0%, rgba(62,201,167,.06), transparent 45%);
  color: var(--text);
  font-family: var(--font-display);
  -webkit-font-smoothing: antialiased;
}

a{ color: inherit; text-decoration:none; }
h1,h2{ font-family: var(--font-display); font-weight:700; margin:0; }
input,select,textarea,button{ font-family: inherit; }

/* --- Brand / waveform mark ------------------------------------------- */
.brand{ display:flex; align-items:center; gap:12px; padding: 6px 4px 26px; }
.brand-center{ justify-content:center; padding-bottom: 8px; }
.brand-mark{
  display:inline-flex; align-items:flex-end; gap:3px; height:28px; width:28px;
  padding: 4px; background: var(--surface-2); border-radius: 8px;
}
.brand-mark .bar{
  display:block; width:4px; border-radius:2px;
  background: linear-gradient(180deg, var(--accent), var(--accent-2));
  animation: pulse 1.6s ease-in-out infinite;
}
.brand-mark .b1{ height:40%; animation-delay: 0s; }
.brand-mark .b2{ height:100%; animation-delay: .2s; }
.brand-mark .b3{ height:65%; animation-delay: .4s; }
.brand-mark .b4{ height:80%; animation-delay: .6s; }
@keyframes pulse{
  0%,100%{ transform: scaleY(.6); opacity:.7; }
  50%{ transform: scaleY(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .brand-mark .bar{ animation: none; }
}
.brand-text{ display:flex; flex-direction:column; line-height:1.1; }
.brand-text strong{ font-size: 16px; letter-spacing:.2px; }
.brand-text small{ color: var(--text-dim); font-size: 11px; letter-spacing: 1.5px; text-transform:uppercase; }

/* --- Layout shell ------------------------------------------------------ */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width: 232px; flex-shrink:0; background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 22px 16px; display:flex; flex-direction:column;
  position: sticky; top:0; height:100vh;
}
.nav{ display:flex; flex-direction:column; gap:2px; flex:1; }
.nav a{
  display:flex; align-items:center; gap:10px; padding: 10px 12px;
  border-radius: 8px; color: var(--text-dim); font-size: 14.5px; font-weight:500;
  transition: background .15s, color .15s;
}
.nav a .ic{ width:18px; text-align:center; color: var(--text-faint); }
.nav a:hover{ background: var(--surface-2); color: var(--text); }
.nav a.active{ background: var(--accent-soft); color: var(--accent); }
.nav a.active .ic{ color: var(--accent); }
.sidebar-foot{ border-top: 1px solid var(--border); padding-top: 14px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.user-pill{ font-size:12.5px; color: var(--text-dim); font-family: var(--font-mono); }
.logout-link{ font-size:12.5px; color: var(--text-faint); }
.logout-link:hover{ color: var(--danger); }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{
  display:flex; align-items:center; gap:14px; padding: 22px 32px 8px;
}
.topbar h1{ font-size: 22px; }
.menu-toggle{ display:none; background:none; border:none; color: var(--text); font-size:20px; cursor:pointer; }
.content{ padding: 16px 32px 48px; flex:1; }

/* --- Cards / grid ------------------------------------------------------- */
.grid-2{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 22px; align-items:start; }
.card{
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  padding: 24px; margin-bottom: 22px;
}
.card-narrow{ max-width: 640px; }
.card h2{ font-size: 16px; margin-bottom: 14px; color: var(--text); }

/* --- Forms ------------------------------------------------------------- */
.field{ display:flex; flex-direction:column; gap:6px; margin-bottom: 16px; }
.field > span:first-child{ font-size: 13px; color: var(--text-dim); font-weight:500; }
.field-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.field-hint{ font-size: 12px; color: var(--text-faint); }
.char-hint{ font-size: 12px; color: var(--text-faint); font-family: var(--font-mono); }

input[type=text], input[type=password], input[type=file], select, textarea{
  background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); font-size: 14px; outline:none;
  transition: border-color .15s, box-shadow .15s;
}
textarea{ resize: vertical; min-height: 90px; line-height:1.5; }
input[type=text]:focus, input[type=password]:focus, select:focus, textarea:focus{
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
input[type=range]{ accent-color: var(--accent); }
.input-with-toggle{ position:relative; }
.input-with-toggle input{ width:100%; padding-right: 40px; }
.toggle-visibility{
  position:absolute; right:6px; top:50%; transform: translateY(-50%);
  background:none; border:none; color: var(--text-faint); cursor:pointer; font-size:15px; padding:6px;
}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border-radius: 8px; border: 1px solid transparent; padding: 10px 18px;
  font-size: 14px; font-weight:600; cursor:pointer; transition: transform .1s, filter .15s, background .15s;
}
.btn:active{ transform: translateY(1px); }
.btn-block{ width:100%; }
.btn-sm{ padding: 6px 12px; font-size: 12.5px; }
.btn-primary{ background: linear-gradient(135deg, var(--accent), #d68f2b); color:#1a1206; border-color: transparent; }
.btn-primary:hover{ filter: brightness(1.08); }
.btn-primary:disabled{ opacity:.6; cursor:default; }
.btn-ghost{ background: var(--surface-2); color: var(--text); border-color: var(--border); }
.btn-ghost:hover{ background: var(--surface-3); }
.btn-ghost.is-active{ border-color: var(--accent); color: var(--accent); }
.btn-danger{ background: var(--danger-soft); color: var(--danger); border-color: rgba(224,100,93,.3); }
.btn-danger-text{ color: var(--danger); }
.spinner{
  width:14px; height:14px; border-radius:50%; border: 2px solid rgba(0,0,0,.25);
  border-top-color:#1a1206; display:inline-block; animation: spin .7s linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* --- Result / empty states ---------------------------------------------- */
.result-box{ display:flex; flex-direction:column; gap:12px; }
.result-text{ font-size:14px; color: var(--text-dim); line-height:1.6; white-space:pre-wrap; }
.result-meta{ font-family: var(--font-mono); font-size: 12px; color: var(--text-faint); }
audio{ width:100%; height:36px; }
.empty-state{ color: var(--text-faint); font-size: 14px; padding: 24px 0; text-align:center; }

/* --- Table --------------------------------------------------------------- */
.table{ width:100%; border-collapse: collapse; font-size: 13.5px; }
.table th{ text-align:left; color: var(--text-faint); font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.4px; padding: 8px 10px; border-bottom: 1px solid var(--border); }
.table td{ padding: 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.table tr:last-child td{ border-bottom:none; }
.nowrap{ white-space:nowrap; }

/* --- Badges --------------------------------------------------------------- */
.badge{
  display:inline-block; padding: 3px 10px; border-radius: 99px; font-size: 11.5px;
  font-family: var(--font-mono); font-weight:500; text-transform:capitalize;
  background: var(--surface-3); color: var(--text-dim);
}
.badge-done{ background: var(--accent-2-soft); color: var(--accent-2); }
.badge-error{ background: var(--danger-soft); color: var(--danger); }
.badge-processing, .badge-running{ background: var(--accent-soft); color: var(--accent); }
.badge-pending{ background: var(--surface-3); color: var(--text-dim); }
.badge-cancelled{ background: var(--surface-3); color: var(--text-faint); }

/* --- Job / progress -------------------------------------------------------- */
.job-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom: 14px; }
.job-progress-text{ margin-left:10px; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-dim); }
.job-actions{ display:flex; gap:8px; }
.progress-bar{ height:8px; border-radius:99px; background: var(--surface-2); overflow:hidden; margin-bottom:10px; }
.progress-fill{ height:100%; background: linear-gradient(90deg, var(--accent-2), var(--accent)); transition: width .4s ease; }
.meta-line{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint); margin:0; }
.item-text{ max-width: 360px; }
.error-text{ color: var(--danger); font-size:12.5px; }

/* --- Filters / pagination --------------------------------------------------- */
.filter-row{ display:flex; gap:8px; margin-bottom: 16px; }
.pagination{ display:flex; align-items:center; gap:14px; justify-content:center; margin-top: 18px; }
.page-info{ font-family: var(--font-mono); font-size:12.5px; color: var(--text-faint); }

/* --- Flash messages ---------------------------------------------------------- */
.flash-stack{ display:flex; flex-direction:column; gap:10px; margin-bottom: 18px; }
.flash-stack-standalone{ max-width: 420px; margin: 24px auto 0; padding: 0 16px; }
.flash{ padding: 12px 16px; border-radius: 8px; font-size: 13.5px; border: 1px solid transparent; }
.flash-success{ background: var(--accent-2-soft); color: var(--accent-2); border-color: rgba(62,201,167,.3); }
.flash-danger{ background: var(--danger-soft); color: var(--danger); border-color: rgba(224,100,93,.3); }
.flash-info{ background: var(--surface-2); color: var(--text-dim); border-color: var(--border); }
.flash-warning{ background: var(--accent-soft); color: var(--accent); border-color: rgba(232,163,61,.3); }

/* --- Login --------------------------------------------------------------------- */
.login-body{ background: var(--bg); }
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding: 24px; }
.login-card{
  width:100%; max-width: 380px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 32px 28px; text-align:center;
}
.login-sub{ color: var(--text-dim); font-size: 13.5px; margin: 0 0 22px; }
.login-form{ display:flex; flex-direction:column; gap:14px; text-align:left; }
.login-form label{ display:flex; flex-direction:column; gap:6px; font-size: 13px; color: var(--text-dim); }

/* --- Responsive ------------------------------------------------------------------ */
@media (max-width: 900px){
  .grid-2{ grid-template-columns: 1fr; }
  .sidebar{ position: fixed; left:0; top:0; transform: translateX(-100%); transition: transform .2s ease; z-index: 40; box-shadow: 0 0 0 100vmax rgba(0,0,0,0); }
  .sidebar.open{ transform: translateX(0); box-shadow: 20px 0 40px rgba(0,0,0,.4); }
  .menu-toggle{ display:block; }
  .content, .topbar{ padding-left: 18px; padding-right: 18px; }
  .field-row{ grid-template-columns: 1fr; }
}