/* Podcast Studio — unified editorial UI */
:root {
  color-scheme: light;
  --bg-primary: #f4f1ea;
  --bg-card: #fffdf8;
  --bg-input: #f8f5ee;
  --accent: #e75b43;
  --accent-light: #ff8b72;
  --accent-glow: rgba(231, 91, 67, .18);
  --success: #217a63;
  --danger: #c53d45;
  --text-primary: #172b2c;
  --text-secondary: #5f6f6d;
  --text-muted: #899590;
  --border: #dcd9cf;
  --border-active: #e75b43;
  --radius: 18px;
  --radius-sm: 12px;
  --ink: #172b2c;
  --paper: #fffdf8;
  --canvas: #f4f1ea;
  --coral: #e75b43;
  --mint: #b8d8c2;
  --sun: #f3ca67;
  --shadow: 0 18px 50px rgba(31, 45, 42, .09);
}

html { scroll-behavior: smooth; }
body { background: var(--canvas); color: var(--ink); }
body::selection { color: var(--ink); background: var(--sun); }
button, input, select, textarea { font-family: inherit; }
:focus-visible { outline: 3px solid rgba(231, 91, 67, .32) !important; outline-offset: 2px; }

/* Authentication */
body.auth-page {
  display: grid;
  grid-template-columns: minmax(360px, .9fr) minmax(500px, 1.1fr);
  align-items: stretch;
  justify-content: initial;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
}
.auth-page .auth-aside {
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  padding: clamp(40px, 6vw, 88px);
  overflow: hidden;
  position: relative;
  background:
    radial-gradient(circle at 78% 18%, var(--sun) 0 8%, transparent 8.2%),
    linear-gradient(145deg, transparent 58%, rgba(255,255,255,.1) 58.2%),
    var(--ink);
  color: #fffaf0;
}
.auth-page .auth-aside::before,
.auth-page .auth-aside::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.13);
}
.auth-page .auth-aside::before { width: 42vw; height: 42vw; left: -20vw; top: -8vw; }
.auth-page .auth-aside::after { width: 24vw; height: 24vw; right: -10vw; bottom: -8vw; background: var(--coral); border: 0; }
.auth-aside-content { max-width: 560px; position: relative; z-index: 1; }
.auth-aside .eyebrow {
  display: inline-flex;
  padding: 7px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: .16em;
  font-size: 11px;
  font-weight: 800;
}
.auth-aside h2 { margin: 25px 0 18px; font: 800 clamp(42px, 5.5vw, 76px)/.98 Inter, sans-serif; letter-spacing: -.055em; }
.auth-aside p { max-width: 470px; margin: 0; color: #bac9c5; font-size: 16px; line-height: 1.7; }
.sound-wave { display: flex; gap: 7px; height: 52px; align-items: center; margin-top: 36px; }
.sound-wave i { width: 5px; height: 14px; border-radius: 5px; background: var(--sun); }
.sound-wave i:nth-child(2), .sound-wave i:nth-child(8) { height: 30px; }
.sound-wave i:nth-child(3), .sound-wave i:nth-child(7) { height: 45px; background: var(--coral); }
.sound-wave i:nth-child(4), .sound-wave i:nth-child(6) { height: 24px; }
.sound-wave i:nth-child(5) { height: 52px; background: var(--mint); }
.auth-page .auth-card {
  align-self: center;
  justify-self: center;
  width: min(460px, calc(100% - 48px));
  max-width: none;
  padding: 42px;
  border: 0;
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: none;
}
.auth-page .brand-logo {
  width: 64px; height: 64px; margin: 0 0 26px; padding: 4px;
  border: 1px solid var(--border); border-radius: 18px; background: white; box-shadow: var(--shadow);
}
.auth-page .brand-logo img { border-radius: 14px; }
.auth-page .auth-header { text-align: left; margin-bottom: 30px; }
.auth-page .auth-header h1 { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; font-size: 32px; letter-spacing: -.035em; }
.auth-page .auth-header p { color: var(--text-secondary); font-size: 14px; margin-top: 8px; }
.auth-page label { color: var(--ink); letter-spacing: .07em; }
.auth-page input[type="email"], .auth-page input[type="password"], .auth-page input[type="text"] {
  padding: 14px 15px; border: 1px solid var(--border); border-radius: 12px; background: #f8f6f0; color: var(--ink);
}
.auth-page input:focus { border-color: var(--coral); background: white; box-shadow: 0 0 0 4px var(--accent-glow); }
.auth-page .btn-primary { padding: 15px; margin-top: 10px; border-radius: 12px; background: var(--ink); color: white; box-shadow: none; }
.auth-page .btn-primary:hover { background: var(--coral); box-shadow: 0 10px 24px var(--accent-glow); }
.auth-page .auth-footer { color: var(--text-secondary); }
.auth-page .auth-footer a { color: var(--coral); }
.auth-page .toggle-eye { color: var(--text-muted); }

/* Main creative studio */
body.studio-page {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(243,202,103,.28), transparent 26%),
    linear-gradient(90deg, rgba(23,43,44,.035) 1px, transparent 1px),
    var(--canvas);
  background-size: auto, 48px 48px, auto;
}
.studio-page .app-wrapper { width: min(1540px, 100%); height: 100%; display: flex; flex-direction: column; padding: 20px clamp(20px, 4vw, 64px); }
.studio-page .user-badge {
  flex: 0 0 auto;
  position: static; min-height: 58px; width: 100%; padding: 8px 9px 8px 13px; border: 1px solid var(--border);
  border-radius: 16px; background: rgba(255,253,248,.88); color: var(--ink); box-shadow: 0 10px 30px rgba(31,45,42,.06);
  backdrop-filter: blur(14px);
}
.studio-page .studio-top-brand { display: inline-flex; align-items: center; gap: 10px; margin-right: auto; color: var(--ink); text-decoration: none; font-size: 11px; letter-spacing: .16em; font-weight: 800; text-transform: uppercase; }
.studio-page .studio-top-brand img { width: 34px; height: 34px; display: block; border-radius: 9px; box-shadow: 0 5px 14px rgba(31,45,42,.12); }
.studio-page .user-badge .user-avatar { background: var(--ink); color: var(--sun); }
.studio-page .user-badge .user-avatar { overflow: hidden; }
.studio-page .user-badge .user-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.studio-page .user-badge .user-name { color: var(--ink); }
.studio-page .credit-balance { color: #286b58; background: #e5f1e8; border-color: #c6dfce; }
.studio-page .user-badge .logout-btn { border-color: var(--border); color: var(--ink); background: transparent; border-radius: 9px; }
.studio-page .user-badge .logout-btn:hover { color: white; border-color: var(--coral); background: var(--coral); }
.studio-page .app-header { flex: 0 0 auto; margin: 4px 0 22px; max-width: 880px; display: flex; align-items: flex-start; gap: 16px; }
.studio-page .app-header::before { content: "AI PRODUCTION WORKSPACE"; display: block; color: var(--coral); font-size: 11px; font-weight: 800; letter-spacing: .18em; margin-bottom: 14px; }
.studio-page .app-header::before { display: none; }
.studio-page .app-header img { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 13px; display: block; box-shadow: 0 7px 18px rgba(31,45,42,.12); }
.studio-page .app-header h1 { color: var(--ink); background: none; -webkit-text-fill-color: currentColor; max-width: none; font-size: clamp(22px, 2.4vw, 38px); line-height: 1.08; letter-spacing: -.045em; white-space: nowrap; }
.studio-page .app-header p { color: var(--text-secondary); max-width: 650px; margin-top: 7px; font-size: 15px; }
.studio-page .tool-kicker { display: block; margin: 1px 0 5px; color: var(--coral); font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.studio-page .tab-bar {
  top: 12px; gap: 4px; padding: 6px; margin-bottom: 30px; border: 1px solid var(--border); border-radius: 16px;
  background: rgba(255,253,248,.9); box-shadow: 0 8px 28px rgba(31,45,42,.07); backdrop-filter: blur(16px);
}
.studio-page .tab-btn { color: var(--text-secondary); border-radius: 11px; padding: 13px 24px; }
.studio-page .tab-btn:hover { color: var(--ink); background: #f0eee7; }
.studio-page .tab-btn.active { color: white; background: var(--ink); box-shadow: none; }

/* Studio sidebar layout */
.studio-page .studio-layout { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 248px minmax(0, 1fr); gap: clamp(26px, 3.5vw, 56px); align-items: stretch; margin-top: 20px; }
.studio-page .studio-sidebar { min-width: 0; align-self: start; padding: 18px; border: 1px solid var(--border); border-radius: 20px; background: rgba(255,253,248,.92); box-shadow: 0 12px 36px rgba(31,45,42,.07); backdrop-filter: blur(16px); }
.studio-page .sidebar-heading { display: grid; gap: 2px; padding: 5px 7px 18px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.studio-page .sidebar-heading span { color: var(--ink); font-size: 15px; font-weight: 800; letter-spacing: -.02em; }
.studio-page .sidebar-heading small { color: var(--text-muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.studio-page .studio-sidebar .tab-bar { position: static; display: flex; flex-direction: column; gap: 5px; padding: 0; margin: 0; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; backdrop-filter: none; }
.studio-page .studio-sidebar .tab-btn { width: 100%; display: flex; align-items: center; gap: 11px; padding: 11px 12px; border-radius: 11px; text-align: left; font-size: 13px; }
.studio-page .studio-sidebar .tab-btn .nav-icon { width: 28px; height: 28px; display: inline-grid; place-items: center; flex: 0 0 28px; border: 1px solid var(--border); border-radius: 8px; color: var(--text-secondary); background: #f5f2ea; font-size: 14px; font-weight: 800; }
.studio-page .studio-sidebar .tab-btn.active .nav-icon { color: var(--ink); border-color: var(--sun); background: var(--sun); }
.studio-page .sidebar-note { margin: 18px 7px 4px; color: var(--text-muted); font-size: 11px; line-height: 1.55; }
.studio-page .studio-content { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.studio-page .workspace-scroll.active {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: rgba(238,234,224,.72);
  scrollbar-color: #b8b5ab transparent;
  scrollbar-width: thin;
}
.studio-page .workspace-scroll.active::-webkit-scrollbar,
.studio-page #gallery-content::-webkit-scrollbar { width: 8px; }
.studio-page .workspace-scroll.active::-webkit-scrollbar-thumb,
.studio-page #gallery-content::-webkit-scrollbar-thumb { border-radius: 999px; background: #b8b5ab; }
.studio-page .workspace-scroll > .card:last-child { margin-bottom: 0; }
.studio-page #tab-gallery.active { display: flex; flex-direction: column; overflow: hidden; }
.studio-page #tab-gallery .gallery-header { flex: 0 0 auto; }
.studio-page #tab-gallery #gallery-count { flex: 0 0 auto; }
.studio-page #gallery-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 2px 5px 10px 2px; }
.studio-page .gallery-header h2 { margin: 3px 0 0; color: var(--ink); font-size: clamp(26px, 3vw, 36px); letter-spacing: -.04em; }
.studio-page .section-kicker { color: var(--coral); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.studio-page .card, .studio-page .vg-result-card {
  border: 1px solid var(--border); border-radius: 22px; background: rgba(255,253,248,.94); box-shadow: var(--shadow); padding: clamp(22px, 3vw, 34px);
}
.studio-page .card-title { color: var(--ink); font-size: 20px; letter-spacing: -.02em; }
.studio-page .card-title .badge { order: -1; color: var(--ink); background: var(--sun); font-size: 10px; letter-spacing: .1em; }
.studio-page .speaker-grid { gap: 15px; }
.studio-page .speaker-card, .studio-page .conversation-block {
  background: #f7f4ec; border: 1px solid var(--border); border-radius: 17px; box-shadow: none;
}
.studio-page .speaker-card::before { height: 5px; background: var(--coral); }
.studio-page .speaker-card:hover { border-color: #c9c4b7; transform: translateY(-3px); box-shadow: 0 12px 30px rgba(31,45,42,.08); }
.studio-page .speaker-card .speaker-label { color: var(--coral); }
.studio-page label { color: #60716e; }
.studio-page input[type="text"], .studio-page input[type="number"], .studio-page select,
.studio-page textarea, .studio-page .vg-card textarea, .studio-page .vg-card input[type="number"],
.studio-page .voice-card textarea, .studio-page .voice-card input[type="file"] {
  color: var(--ink); background-color: white; border-color: var(--border); border-radius: 11px;
}
.studio-page input:focus, .studio-page select:focus, .studio-page textarea:focus { border-color: var(--coral) !important; box-shadow: 0 0 0 4px var(--accent-glow) !important; }
.studio-page select { 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='%23172b2c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); }
.studio-page .file-upload { color: var(--ink); background: #fbfaf6; border-color: #c9c6bd; border-radius: 13px; }
.studio-page .file-upload:hover { border-color: var(--coral); background: #fff3ee; }
.studio-page .file-upload .upload-text, .studio-page .empty-state { color: var(--text-secondary); }
.studio-page .btn-generate { color: white; background: var(--ink); box-shadow: none; border-radius: 13px; }
.studio-page .btn-generate:hover { background: var(--coral); box-shadow: 0 12px 28px var(--accent-glow); }
.studio-page .btn-add { color: var(--coral); border-color: #d3b0a7; background: #fff7f3; }
.studio-page .btn-add:hover { background: #ffebe4; border-color: var(--coral); }
.studio-page .block-number { color: var(--ink); }
.studio-page .block-number .num { background: var(--coral); }
.studio-page .combined-sub-block { background: white; border-color: var(--border); }
.studio-page .gallery-card { background: var(--paper); border-color: var(--border); border-radius: 18px; }
.studio-page .gallery-card:hover { border-color: var(--coral); box-shadow: var(--shadow); }
.studio-page .gallery-card-title { color: var(--ink); }
.studio-page .gallery-source-tag.podcast { color: #8b4b00; background: #fff0c8; }
.studio-page .gallery-source-tag.video { color: #21634f; background: #dff0e5; }
.studio-page .gallery-source-tag.audio { color: #a83f2f; background: #ffe5df; }
.studio-page .filter-toggle { background: var(--paper); border-color: var(--border); }
.studio-page .filter-btn.active { color: white; background: var(--ink); }
.studio-page .gallery-btn { color: var(--ink); background: #f7f4ec; border-color: var(--border); }
.studio-page .gallery-btn.download:hover { color: white; background: var(--ink); border-color: var(--ink); }
.studio-page .ui-overlay { background: rgba(23,43,44,.84); }

/* Profile */
body.profile-page { background: var(--canvas); color: var(--ink); }
.profile-page .shell { width: min(1100px, calc(100% - 34px)); padding-top: 24px; }
.profile-page .topbar { min-height: 62px; padding: 8px 10px 8px 14px; border: 1px solid var(--border); border-radius: 16px; background: var(--paper); box-shadow: 0 10px 30px rgba(31,45,42,.06); }
.profile-page .brand { color: var(--ink); }
.profile-page .brand img { border-radius: 10px; }
.profile-page .nav a, .profile-page .nav button { color: var(--ink); border-color: var(--border); background: transparent; }
.profile-page .nav a:hover, .profile-page .nav button:hover { color: white; border-color: var(--coral); background: var(--coral); }
.profile-page .hero { margin: 62px 0 25px; }
.profile-page h1 { color: var(--ink); font-size: clamp(38px, 6vw, 62px); letter-spacing: -.055em; }
.profile-page .sub, .profile-page .hint { color: var(--text-secondary); }
.profile-page .card { background: var(--paper); color: var(--ink); border-color: var(--border); border-radius: 22px; box-shadow: var(--shadow); }
.profile-page .identity { border-color: var(--border); }
.profile-page .avatar { color: var(--sun); background: var(--ink); border-radius: 50%; }
.profile-page .avatar { overflow: hidden; flex: 0 0 auto; }
.profile-page .avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.profile-page .identity span { color: var(--text-secondary); }
.profile-page .credit { color: #286b58; background: #e5f1e8; border-color: #c6dfce; }
.profile-page label { color: var(--text-secondary); }
.profile-page input { color: var(--ink); background: #f8f6f0; border-color: var(--border); }
.profile-page input:focus { background: white; border-color: var(--coral); box-shadow: 0 0 0 4px var(--accent-glow); }
.profile-page .divider { background: var(--border); }
.profile-page .btn { color: white; background: var(--ink); border-radius: 12px; }
.profile-page .btn:hover { background: var(--coral); }
.profile-page .avatar-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 18px; align-items: center; margin: 0 0 20px; padding: 16px; border: 1px solid var(--border); border-radius: 14px; background: #f8f6f0; }
.profile-page .avatar-editor input[type="file"] { margin-top: 7px; background: white; }
.profile-page .avatar-editor input[type="file"]::file-selector-button { margin-right: 12px; padding: 7px 10px; border: 0; border-radius: 8px; color: white; background: var(--ink); font: 700 12px Inter, sans-serif; cursor: pointer; }
.profile-page .avatar-editor .hint { margin: 7px 0 0; }
.profile-page .remove-avatar { display: flex; grid-template-columns: none; align-items: center; gap: 8px; color: var(--danger); white-space: nowrap; cursor: pointer; }
.profile-page .remove-avatar input { width: 16px; height: 16px; padding: 0; accent-color: var(--danger); }

/* Operations / admin dashboards */
body.operations-page { min-height: 100vh; background: var(--canvas); color: var(--ink); font-family: Inter, system-ui, sans-serif; }
.operations-page main { width: min(1540px, calc(100% - 36px)); max-width: none; padding: 26px 0 80px; }
.operations-page header, .operations-page .top { min-height: 122px; align-items: flex-end; margin: 0 0 30px; padding: 28px 0; border-bottom: 1px solid #c9c6bd; }
.operations-page h1 { margin: 0; color: var(--ink); font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.055em; }
.operations-page h2 { color: var(--ink); font-size: 20px; letter-spacing: -.02em; }
.operations-page .note, .operations-page .muted { color: var(--text-secondary); }
.operations-page .header-nav a, .operations-page .header-nav button, .operations-page nav a {
  color: var(--ink); background: var(--paper); border: 1px solid var(--border); border-radius: 10px; padding: 10px 13px;
}
.operations-page .header-nav a:hover, .operations-page .header-nav button:hover, .operations-page nav a:hover { color: white; background: var(--ink); border-color: var(--ink); }
.operations-page .panel, .operations-page .card {
  background: var(--paper); color: var(--ink); border: 1px solid var(--border); border-radius: 18px; box-shadow: 0 12px 38px rgba(31,45,42,.06);
}
.operations-page .panel { padding: 22px; }
.operations-page .cards { grid-template-columns: repeat(6, 1fr); }
.usage-page .cards { grid-template-columns: repeat(4, 1fr); }
.operations-page .card { position: relative; min-height: 120px; padding: 20px; overflow: hidden; }
.operations-page .card::after { content: ""; position: absolute; right: -22px; bottom: -32px; width: 76px; height: 76px; border-radius: 50%; background: #dce9df; }
.operations-page .card:first-child { background: var(--ink); color: white; }
.operations-page .card:first-child span { color: #aebfbb; }
.operations-page .card:first-child .money { color: var(--sun); }
.operations-page .card span { color: var(--text-secondary); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; font-weight: 700; }
.operations-page .card strong { position: relative; z-index: 1; color: inherit; font-size: 28px; }
.operations-page label { color: var(--text-secondary); }
.operations-page input, .operations-page select, .operations-page button {
  color: var(--ink); background: #f8f6f0; border: 1px solid var(--border); border-radius: 10px; padding: 11px 12px;
}
.operations-page form > button, .operations-page .search button, .operations-page .topup button { color: white; background: var(--coral); border-color: var(--coral); }
.operations-page input:focus, .operations-page select:focus { outline: none; border-color: var(--coral); box-shadow: 0 0 0 4px var(--accent-glow); }
.operations-page table { color: var(--ink); }
.operations-page th { color: var(--text-secondary); background: #f7f4ec; font-size: 10px; letter-spacing: .08em; }
.operations-page th, .operations-page td { border-color: #e5e1d8; }
.operations-page tbody tr:hover { background: #faf5eb; }
.operations-page .money, .operations-page .status-completed { color: var(--success); }
.operations-page .status-failed, .operations-page .negative { color: var(--danger); }
.operations-page .status-pending { color: #9a6813; }
.operations-page .status-processing { color: #9a6813; }
.operations-page .msg { margin: 0 0 14px; padding: 11px 14px; border: 1px solid var(--border); border-radius: 11px; background: var(--paper); }
.operations-page .msg.success { color: var(--success); border-color: #c6dfce; background: #e5f1e8; }
.operations-page .msg.error { color: var(--danger); border-color: #efc5c8; background: #ffe5df; }
.operations-page .prediction-ids code { color: #405c59; font-size: 11px; user-select: all; }
.operations-page .job-status { display: flex; align-items: center; gap: 9px; }
.operations-page .job-status form { display: block; margin: 0; }
.operations-page .refresh-status { width: auto; padding: 7px 9px; color: white; border-color: var(--ink); background: var(--ink); font-size: 11px; }
.operations-page .refresh-status:hover { border-color: var(--coral); background: var(--coral); }
.operations-page .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.operations-page .panel[id] { scroll-margin-top: 18px; }
.operations-page .table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 15px; padding-top: 14px; border-top: 1px solid #e5e1d8; }
.operations-page .pagination-summary { margin: 0; color: var(--text-muted); font-size: 10px; font-weight: 600; white-space: nowrap; }
.operations-page .pagination-summary strong { color: var(--ink); font-weight: 800; }
.operations-page .pagination-controls { display: flex; align-items: center; justify-content: flex-end; gap: 5px; }
.operations-page .pagination-controls .page-number,
.operations-page .pagination-controls .page-arrow { width: 32px; height: 32px; display: inline-grid; place-items: center; flex: 0 0 32px; padding: 0; border: 1px solid var(--border); border-radius: 9px; color: var(--ink); background: #f8f6f0; box-shadow: none; text-decoration: none; font-size: 11px; font-weight: 800; }
.operations-page .pagination-controls a.page-number:hover,
.operations-page .pagination-controls a.page-arrow:hover { color: white; border-color: var(--coral); background: var(--coral); transform: translateY(-1px); }
.operations-page .pagination-controls .page-number.active { color: white; border-color: var(--ink); background: var(--ink); box-shadow: 0 7px 16px rgba(23,43,44,.16); }
.operations-page .pagination-controls .page-arrow.disabled { color: #b9b5aa; background: #efede7; cursor: not-allowed; }
.operations-page .pagination-controls .page-ellipsis { width: 22px; color: var(--text-muted); text-align: center; font-size: 12px; }
.usage-page .record-count { display: inline-flex; flex: 0 0 auto; padding: 6px 9px; border-radius: 999px; color: #75530c; background: #fff0c8; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.usage-page .voice-admin-panel .panel-heading { margin-bottom: 13px; }
.usage-page .voice-id code { color: #405c59; font-size: 11px; user-select: all; }
.usage-page .clip-count { min-width: 30px; display: inline-flex; justify-content: center; padding: 5px 8px; border-radius: 999px; color: #21634f; background: #dff0e5; font-weight: 800; }
.usage-page .audio-text { max-width: 300px; overflow: hidden; text-overflow: ellipsis; }
.usage-page .admin-audio-player { width: 250px; height: 34px; display: block; }
.operations-page .details-link { display: inline-flex; align-items: center; justify-content: center; padding: 8px 11px; border-radius: 9px; color: white; background: var(--ink); text-decoration: none; font-size: 11px; font-weight: 800; white-space: nowrap; }
.operations-page .details-link:hover { background: var(--coral); }

/* Admin console shell - Executive SaaS Theme (Synced with Application Brand Palette) */
html, body.admin-console { max-width: 100vw; overflow-x: hidden; margin: 0; background: #f8fafc; color: #172b2c; font-family: Inter, system-ui, -apple-system, sans-serif; -webkit-font-smoothing: antialiased; }
body.admin-console { height: 100vh; height: 100dvh; overflow: hidden; }
.admin-console .admin-layout { height: 100%; min-height: 0; display: grid; grid-template-columns: 260px minmax(0, 1fr); max-width: 100vw; overflow: hidden; }
.admin-console .admin-sidebar { height: 100%; min-height: 0; display: flex; flex-direction: column; justify-content: space-between; padding: 20px 16px 24px; overflow: hidden; color: #f8fafc; background: #172b2c; border-right: 1px solid rgba(255,255,255,.08); box-shadow: 8px 0 32px rgba(23,43,44,.15); z-index: 50; box-sizing: border-box; }
.admin-console .admin-sidebar > div:first-child { display: flex; flex-direction: column; min-height: 0; flex: 1; overflow-y: auto; padding-bottom: 12px; scrollbar-width: thin; }
.admin-console .admin-sidebar > div:first-child::-webkit-scrollbar { width: 4px; }
.admin-console .admin-sidebar > div:first-child::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 4px; }
.admin-console .admin-brand { display: flex; align-items: center; gap: 12px; padding: 6px 8px; color: #ffffff; text-decoration: none; border-radius: 12px; transition: background .2s ease; flex-shrink: 0; }
.admin-console .admin-brand:hover { background: rgba(255,255,255,.05); }
.admin-console .admin-brand img { width: 40px; height: 40px; display: block; border-radius: 12px; box-shadow: 0 4px 14px rgba(0,0,0,.3); }
.admin-console .admin-brand > span { display: grid; gap: 2px; }
.admin-console .admin-brand strong { font-size: 14px; font-weight: 700; letter-spacing: -.02em; color: #ffffff; }
.admin-console .admin-brand small { color: #a3c4b9; font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.admin-console .admin-nav-label { margin: 24px 10px 8px; color: #899590; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; flex-shrink: 0; }
.admin-console .admin-side-nav { display: grid; gap: 6px; }
.admin-console .admin-side-nav a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; color: #a3c4b9; border: 1px solid transparent; border-radius: 12px; background: transparent; text-decoration: none; font-size: 13px; font-weight: 600; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); }
.admin-console .admin-side-nav a .nav-svg-icon { width: 20px; height: 20px; flex: 0 0 20px; stroke: #a3c4b9; fill: none; transition: all .2s ease; }
.admin-console .admin-side-nav a:hover { color: #ffffff; border-color: rgba(255,255,255,.14); background: rgba(255,255,255,.08); }
.admin-console .admin-side-nav a:hover .nav-svg-icon { stroke: #ffffff; transform: scale(1.08); }
.admin-console .admin-side-nav a.active { color: #ffffff; border-color: rgba(231,91,67,.5); background: linear-gradient(135deg, rgba(231,91,67,.32) 0%, rgba(231,91,67,.18) 100%); box-shadow: 0 4px 16px rgba(231,91,67,.22); }
.admin-console .admin-side-nav a.active .nav-svg-icon { stroke: #ff8b72; }
.admin-console .admin-sidebar-footer { padding-top: 14px; border-top: 1px solid rgba(255,255,255,.1); margin-top: auto; flex-shrink: 0; width: 100%; box-sizing: border-box; }
.admin-console .admin-identity { display: flex; align-items: center; gap: 12px; padding: 2px 4px 12px; }
.admin-console .admin-identity > span { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #e75b43 0%, #d44a33 100%); font-size: 13px; font-weight: 700; box-shadow: 0 4px 12px rgba(231,91,67,.3); }
.admin-console .admin-identity > div { min-width: 0; display: grid; }
.admin-console .admin-identity strong { overflow: hidden; color: #ffffff; font-size: 13px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.admin-console .admin-identity small { color: #a3c4b9; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }
.admin-console .admin-sidebar-footer form { display: block; margin: 0; width: 100%; }
.admin-console .admin-sidebar-footer .admin-logout { width: 100%; min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 14px; color: #ff8b72; border: 1px solid rgba(231,91,67,.3); border-radius: 12px; background: rgba(231,91,67,.08); font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; box-sizing: border-box; margin: 0; }
.admin-console .admin-sidebar-footer .admin-logout .nav-svg-icon { width: 16px; height: 16px; stroke: #ff8b72; fill: none; flex-shrink: 0; }
.admin-console .admin-sidebar-footer .admin-logout:hover { color: #ffffff; border-color: #e75b43; background: #e75b43; }
.admin-console .admin-sidebar-footer .admin-logout:hover .nav-svg-icon { stroke: #ffffff; }

/* Main Content Area */
.admin-console .admin-main { width: 100%; height: 100%; max-width: 100%; min-width: 0; min-height: 0; box-sizing: border-box; margin: 0 auto; padding: 32px clamp(16px, 2.5vw, 40px) 80px; overflow-y: auto; overscroll-behavior: contain; scrollbar-color: #94a3b8 transparent; scrollbar-width: thin; }
.admin-console .admin-main::-webkit-scrollbar { width: 9px; }
.admin-console .admin-main::-webkit-scrollbar-thumb { border: 2px solid #f8fafc; border-radius: 999px; background: #94a3b8; }
.admin-console .admin-page-header { min-height: 0; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin: 0 0 28px; padding-bottom: 24px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.admin-console .admin-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; color: #e75b43; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.admin-console .admin-page-header h1 { margin: 0; color: #172b2c; font-size: clamp(26px, 2.8vw, 38px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; }
.admin-console .admin-page-header p { max-width: 650px; margin: 8px 0 0; color: #5f6f6d; font-size: 14px; line-height: 1.5; }
.admin-console .admin-timezone { min-width: 190px; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; box-shadow: 0 2px 8px rgba(15,23,42,.03); }
.admin-console .admin-timezone i { width: 10px; height: 10px; border-radius: 50%; background: #217a63; box-shadow: 0 0 0 4px rgba(33,122,99,.15); flex: 0 0 10px; }
.admin-console .admin-timezone > div { display: grid; gap: 2px; }
.admin-console .admin-timezone span { color: #899590; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.admin-console .admin-timezone strong { color: #172b2c; font-size: 12px; font-weight: 700; }

/* Panels & Cards */
.admin-console .panel { margin-top: 24px; padding: clamp(16px, 2vw, 24px); overflow: hidden; border: 1px solid #e2e8f0; border-radius: 20px; background: #ffffff; box-shadow: 0 4px 20px -2px rgba(15,23,42,.05); transition: box-shadow .2s ease; max-width: 100%; min-width: 0; box-sizing: border-box; }
.admin-console .section-heading h2,
.admin-console .panel-heading h2 { margin: 4px 0 0; color: #172b2c; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.admin-console .section-heading p,
.admin-console .panel-heading p { margin-top: 4px; color: #5f6f6d; font-size: 13px; }
.admin-console .section-kicker { color: #e75b43; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }

/* Executive Filter Panel */
.admin-console .admin-filter-panel { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 20px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px -2px rgba(15,23,42,.05); max-width: 100%; min-width: 0; box-sizing: border-box; }
.admin-console .filter-header-bar { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-bottom: 18px; border-bottom: 1px solid #f1f5f9; flex-wrap: wrap; }
.admin-console .filter-title-group { display: flex; align-items: center; gap: 14px; }
.admin-console .filter-icon-badge { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 12px; color: #e75b43; background: #fbf5ef; flex: 0 0 40px; box-shadow: 0 2px 8px rgba(231,91,67,.12); }
.admin-console .filter-headline { display: flex; flex-direction: column; gap: 2px; }
.admin-console .filter-title-group h2 { margin: 0; color: #172b2c; font-size: 18px; font-weight: 800; letter-spacing: -.02em; }
.admin-console .filter-title-group p { margin: 2px 0 0; color: #5f6f6d; font-size: 13px; }
.admin-console .filter-preset-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.admin-console .preset-label { color: #899590; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; margin-right: 4px; }
.admin-console .preset-pill { padding: 6px 14px; border: 1px solid #dcd9cf; border-radius: 999px; color: #172b2c; background: #f8fafc; font-size: 12px; font-weight: 700; cursor: pointer; text-decoration: none; transition: all .15s ease; outline: none; }
.admin-console .preset-pill:hover { color: #ffffff; border-color: #e75b43; background: #e75b43; box-shadow: 0 4px 12px rgba(231,91,67,.25); transform: translateY(-1px); }
.admin-console .preset-pill.reset-pill { color: #5f6f6d; background: #f1f5f9; border-color: #e2e8f0; }
.admin-console .preset-pill.reset-pill:hover { color: #ffffff; background: #172b2c; border-color: #172b2c; }

.admin-console .admin-filter-grid { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)) auto; gap: 14px; align-items: end; width: 100%; max-width: 100%; box-sizing: border-box; }
.admin-console .filter-field { display: grid; gap: 6px; min-width: 0; }
.admin-console .filter-field label { display: flex; align-items: center; justify-content: space-between; color: #172b2c; font-size: 12px; font-weight: 700; }
.admin-console .field-label-text { display: inline-flex; align-items: center; gap: 6px; color: #172b2c; }
.admin-console .field-label-text svg { stroke: #e75b43; flex-shrink: 0; }
.admin-console .filter-field input,
.admin-console .filter-field select { min-height: 44px; width: 100%; padding: 10px 14px; color: #172b2c; border: 1px solid #dcd9cf; border-radius: 12px; background: #f8fafc; font-size: 13px; font-weight: 600; transition: all .15s ease; box-sizing: border-box; }
.admin-console .filter-field input:focus,
.admin-console .filter-field select:focus { outline: none; border-color: #e75b43; background: #ffffff; box-shadow: 0 0 0 3.5px rgba(231,91,67,.15); }
.admin-console .filter-action { min-width: 0; }
.admin-console .filter-submit-btn,
.admin-console .admin-topup-form > button { min-height: 44px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 22px; color: #ffffff; border: 1px solid #e75b43; border-radius: 12px; background: linear-gradient(135deg, #e75b43 0%, #d44a33 100%); font-size: 13px; font-weight: 700; cursor: pointer; box-shadow: 0 4px 14px rgba(231,91,67,.28); transition: all .2s ease; white-space: nowrap; }
.admin-console .filter-submit-btn:hover,
.admin-console .admin-topup-form > button:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(231,91,67,.38); background: linear-gradient(135deg, #d44a33 0%, #c53d45 100%); }

/* Executive Metrics Grid */
.admin-console .admin-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-top: 24px; max-width: 100%; min-width: 0; }
.admin-console .admin-metrics .card { position: relative; min-height: 110px; padding: 18px; border: 1px solid #e2e8f0; border-radius: 18px; background: #ffffff; box-shadow: 0 4px 16px -2px rgba(15,23,42,.04); overflow: hidden; transition: all .2s cubic-bezier(0.4, 0, 0.2, 1); min-width: 0; box-sizing: border-box; }
.admin-console .admin-metrics .card:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -4px rgba(15,23,42,.08); border-color: #cbd5e1; }
.admin-console .admin-metrics .card-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.admin-console .admin-metrics .card-header span { color: #5f6f6d; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.admin-console .admin-metrics .card-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: #fbf5ef; color: #e75b43; flex: 0 0 34px; }
.admin-console .admin-metrics .card-icon svg { width: 18px; height: 18px; stroke: currentColor; fill: none; }
.admin-console .admin-metrics .card strong { display: block; color: #172b2c; font-size: clamp(22px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-console .admin-metrics .card small { display: block; margin-top: 6px; color: #899590; font-size: 11px; font-weight: 500; }
.admin-console .admin-metrics .metric-featured { background: linear-gradient(135deg, #172b2c 0%, #203a3b 100%); border-color: #2e4647; color: #ffffff; }
.admin-console .admin-metrics .metric-featured .card-header span { color: #a3c4b9; }
.admin-console .admin-metrics .metric-featured strong { color: #ffffff; }
.admin-console .admin-metrics .metric-featured small { color: #899590; }
.admin-console .admin-metrics .metric-featured .card-icon { background: rgba(231,91,67,.2); color: #ff8b72; }

/* Tables System */
.admin-console .admin-table-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; max-width: 100%; min-width: 0; }
.admin-console .admin-table-panel { min-width: 0; max-width: 100%; }
.admin-console .admin-table-panel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-console .admin-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; scrollbar-width: thin; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.admin-console .admin-table-scroll table { width: 100%; margin: 0; border-collapse: collapse; text-align: left; }
.admin-console .admin-table-scroll th { padding: 12px 14px; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.admin-console .admin-table-scroll td { padding: 12px 14px; color: #334155; font-size: 13px; font-weight: 500; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.admin-console .admin-table-scroll td.credit-consumed { color: #dc2626; }
.admin-console .admin-table-scroll tbody tr { transition: background .15s ease; }
.admin-console .admin-table-scroll tbody tr:hover { background: #f8fafc; }
.admin-console .admin-table-scroll tbody tr:last-child td { border-bottom: 0; }
.admin-console .empty-table { height: 80px; color: #94a3b8; text-align: center !important; font-size: 13px; font-weight: 500; }

/* Status Chips & Badges */
.admin-console .record-count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: #e75b43; background: #fbf5ef; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.admin-console .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.admin-console .status-badge.status-completed { color: #217a63; background: #eef7f4; border: 1px solid #b8d8c2; }
.admin-console .status-badge.status-processing,
.admin-console .status-badge.status-pending { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.admin-console .status-badge.status-failed { color: #c53d45; background: #fdf2f2; border: 1px solid #fecaca; }
.admin-console .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-console .status-processing .status-dot,
.admin-console .status-pending .status-dot { animation: pulseDot 1.5s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(0.85); } }

/* Action Buttons & Links */
.admin-console .details-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: 10px; color: #ffffff; background: #172b2c; text-decoration: none; font-size: 12px; font-weight: 700; transition: all .2s ease; white-space: nowrap; }
.admin-console .details-link:hover { background: #e75b43; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(231,91,67,.25); }
.admin-console .refresh-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #cbd5e1; border-radius: 9px; color: #334155; background: #ffffff; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.admin-console .refresh-status:hover { color: #e75b43; border-color: #e75b43; background: #f8fafc; }
.admin-console .job-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Code Snippets & ID Pills */
.admin-console .prediction-ids code,
.admin-console .voice-id code { display: inline-block; padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; background: #f8fafc; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; user-select: all; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-console .clip-count { min-width: 28px; display: inline-flex; justify-content: center; padding: 4px 8px; border-radius: 999px; color: #217a63; background: #eef7f4; font-weight: 700; font-size: 12px; }
.admin-console .audio-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
.admin-console .admin-audio-player { width: 220px; height: 36px; border-radius: 8px; outline: none; }

/* Credit Management Panel */
.admin-console .credit-action-panel { display: grid; grid-template-columns: minmax(200px,.35fr) minmax(0,1fr); gap: 24px; align-items: center; padding: 24px; border-radius: 20px; background: linear-gradient(135deg, #172b2c 0%, #203a3b 100%); color: #ffffff; box-shadow: 0 10px 30px rgba(23,43,44,.18); max-width: 100%; min-width: 0; }
.admin-console .credit-action-copy { color: #ffffff; min-width: 0; }
.admin-console .credit-action-copy h2 { margin: 6px 0 8px; color: #ffffff; font-size: 20px; font-weight: 800; }
.admin-console .credit-action-copy p { margin: 0; color: #a3c4b9; font-size: 13px; line-height: 1.5; }
.admin-console .admin-topup-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; align-items: end; max-width: 100%; min-width: 0; }
.admin-console .admin-topup-form label { color: #a3c4b9; }
.admin-console .admin-topup-form input,
.admin-console .admin-topup-form select { background: #203a3b; border-color: #2e4647; color: #ffffff; }
.admin-console .admin-topup-form input:focus,
.admin-console .admin-topup-form select:focus { border-color: #e75b43; background: #172b2c; box-shadow: 0 0 0 3px rgba(231,91,67,.2); }
.admin-console .quick-amounts { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.admin-console .quick-amounts span { color: #a3c4b9; font-size: 11px; font-weight: 600; }
.admin-console .quick-btn { padding: 4px 10px; border: 1px solid #2e4647; border-radius: 8px; color: #a3c4b9; background: #203a3b; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s ease; }
.admin-console .quick-btn:hover { color: #ffffff; border-color: #e75b43; background: #e75b43; }

.admin-console .admin-balance-heading { align-items: flex-end; margin-bottom: 16px; flex-wrap: wrap; }
.admin-console .admin-search { width: min(320px, 100%); display: flex; gap: 8px; margin: 0; }
.admin-console .admin-search input { min-width: 0; flex: 1; }
.admin-console .admin-search button { width: auto; min-height: 42px; padding: 10px 16px; color: #ffffff; background: #172b2c; border: 1px solid #172b2c; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.admin-console .admin-search button:hover { background: #e75b43; border-color: #e75b43; }

/* Tables System */
.admin-console .admin-table-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 24px; max-width: 100%; min-width: 0; }
.admin-console .admin-table-panel { min-width: 0; max-width: 100%; }
.admin-console .admin-table-panel .panel-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; min-height: 44px; margin-bottom: 16px; flex-wrap: wrap; }
.admin-console .admin-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid #e2e8f0; border-radius: 14px; background: #ffffff; scrollbar-width: thin; -webkit-overflow-scrolling: touch; box-sizing: border-box; }
.admin-console .admin-table-scroll table { width: 100%; margin: 0; border-collapse: collapse; text-align: left; }
.admin-console .admin-table-scroll th { padding: 12px 14px; background: #f8fafc; color: #475569; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid #e2e8f0; white-space: nowrap; }
.admin-console .admin-table-scroll td { padding: 12px 14px; color: #334155; font-size: 13px; font-weight: 500; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.admin-console .admin-table-scroll tbody tr { transition: background .15s ease; }
.admin-console .admin-table-scroll tbody tr:hover { background: #f8fafc; }
.admin-console .admin-table-scroll tbody tr:last-child td { border-bottom: 0; }
.admin-console .empty-table { height: 80px; color: #94a3b8; text-align: center !important; font-size: 13px; font-weight: 500; }

/* Status Chips & Badges */
.admin-console .record-count { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; color: #4338ca; background: #eeefee; font-size: 11px; font-weight: 700; letter-spacing: .04em; }
.admin-console .status-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.admin-console .status-badge.status-completed { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.admin-console .status-badge.status-processing,
.admin-console .status-badge.status-pending { color: #1d4ed8; background: #eff6ff; border: 1px solid #bfdbfe; }
.admin-console .status-badge.status-failed { color: #b91c1c; background: #fef2f2; border: 1px solid #fecaca; }
.admin-console .status-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.admin-console .status-processing .status-dot,
.admin-console .status-pending .status-dot { animation: pulseDot 1.5s infinite; }
@keyframes pulseDot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .4; transform: scale(0.85); } }

/* Action Buttons & Links */
.admin-console .details-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 13px; border-radius: 10px; color: #ffffff; background: #0f172a; text-decoration: none; font-size: 12px; font-weight: 700; transition: all .2s ease; white-space: nowrap; }
.admin-console .details-link:hover { background: #6366f1; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(99,102,241,.25); }
.admin-console .refresh-status { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid #cbd5e1; border-radius: 9px; color: #334155; background: #ffffff; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.admin-console .refresh-status:hover { color: #6366f1; border-color: #6366f1; background: #f8fafc; }
.admin-console .job-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Code Snippets & ID Pills */
.admin-console .prediction-ids code,
.admin-console .voice-id code { display: inline-block; padding: 3px 8px; border: 1px solid #e2e8f0; border-radius: 6px; color: #475569; background: #f8fafc; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-size: 11px; user-select: all; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-console .clip-count { min-width: 28px; display: inline-flex; justify-content: center; padding: 4px 8px; border-radius: 999px; color: #047857; background: #ecfdf5; font-weight: 700; font-size: 12px; }
.admin-console .audio-text { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #475569; }
.admin-console .admin-audio-player { width: 220px; height: 36px; border-radius: 8px; outline: none; }

/* Credit Management Panel & Controls */
.admin-console .credit-action-panel { display: flex; flex-direction: column; gap: 20px; padding: 24px; border-radius: 20px; background: #ffffff; border: 1px solid #e2e8f0; box-shadow: 0 4px 20px -2px rgba(15,23,42,.05); max-width: 100%; min-width: 0; box-sizing: border-box; }
.admin-console .admin-topup-form { width: 100%; }

.admin-console .admin-balance-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.admin-console .admin-search { width: min(320px, 100%); display: flex; gap: 8px; margin: 0; }
.admin-console .admin-search input { min-width: 0; flex: 1; }
.admin-console .admin-search button { width: auto; min-height: 42px; padding: 10px 18px; color: #ffffff; background: #172b2c; border: 1px solid #172b2c; border-radius: 12px; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .2s ease; }
.admin-console .admin-search button:hover { background: #e75b43; border-color: #e75b43; }

.admin-console .table-user { display: flex; align-items: center; gap: 10px; }
.admin-console .table-user > span { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #172b2c 0%, #203a3b 100%); font-size: 12px; font-weight: 800; flex: 0 0 32px; box-shadow: 0 2px 8px rgba(23,43,44,.15); }

.admin-console .ledger-panel { display: flex; flex-direction: column; gap: 16px; }
.admin-console .ledger-results { display: flex; justify-content: space-between; gap: 15px; padding: 4px 2px; color: #5f6f6d; font-size: 12px; font-weight: 600; flex-wrap: wrap; }

.credits-page .account-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.credits-page .account-controls form { display: block; margin: 0; }
.credits-page .control-btn { width: auto; padding: 6px 12px; border-radius: 9px; font-size: 11px; font-weight: 700; cursor: pointer; transition: all .15s ease; white-space: nowrap; }
.credits-page .control-btn.zero { color: #d97706; border: 1px solid #fde68a; background: #fffbeb; }
.credits-page .control-btn.zero:hover { color: #ffffff; border-color: #d97706; background: #d97706; box-shadow: 0 2px 8px rgba(217,119,6,.25); }
.credits-page .control-btn.block { color: #c53d45; border: 1px solid #fecaca; background: #fdf2f2; }
.credits-page .control-btn.block:hover { color: #ffffff; border-color: #c53d45; background: #c53d45; box-shadow: 0 2px 8px rgba(197,61,69,.25); }
.credits-page .control-btn.unblock { color: #217a63; border: 1px solid #b8d8c2; background: #eef7f4; }
.credits-page .control-btn.unblock:hover { color: #ffffff; border-color: #217a63; background: #217a63; box-shadow: 0 2px 8px rgba(33,122,99,.25); }
.credits-page .access-state { display: inline-flex; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.credits-page .access-state.active { color: #217a63; background: #eef7f4; border: 1px solid #b8d8c2; }
.credits-page .access-state.blocked { color: #c53d45; background: #fdf2f2; border: 1px solid #fecaca; }

/* Pagination Modern UI */
.operations-page .table-pagination { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px; border-top: 1px solid #e2e8f0; background: #ffffff; border-bottom-left-radius: 14px; border-bottom-right-radius: 14px; flex-wrap: wrap; }
.operations-page .pagination-summary { margin: 0; color: #64748b; font-size: 12px; }
.operations-page .pagination-controls { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.operations-page .pagination-controls a.page-number,
.operations-page .pagination-controls a.page-arrow { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #e2e8f0; border-radius: 8px; color: #475569; background: #ffffff; text-decoration: none; font-size: 12px; font-weight: 700; transition: all .15s ease; }
.operations-page .pagination-controls a.page-number:hover,
.operations-page .pagination-controls a.page-arrow:hover { color: #6366f1; border-color: #6366f1; background: #f8fafc; transform: translateY(-1px); }
.operations-page .pagination-controls .page-number.active { color: #ffffff; border-color: #4f46e5; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); box-shadow: 0 2px 8px rgba(99,102,241,.3); }
.operations-page .pagination-controls .page-arrow.disabled { width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #f1f5f9; border-radius: 8px; color: #cbd5e1; background: #f8fafc; cursor: not-allowed; }

/* Video Detail Theater Page */
.video-detail-page { background: #f8fafc; }
.video-detail-page .video-detail-shell { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; margin: 0 auto; padding: 24px clamp(16px, 2.5vw, 40px) 80px; }
.video-detail-page .detail-toolbar { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 20px; border: 1px solid #e2e8f0; border-radius: 18px; background: #ffffff; box-shadow: 0 4px 20px -2px rgba(15,23,42,.04); flex-wrap: wrap; }
.video-detail-page .detail-toolbar .detail-brand { display: flex; align-items: center; gap: 12px; color: #0f172a; text-decoration: none; }
.video-detail-page .detail-brand img { width: 40px; height: 40px; border-radius: 12px; }
.video-detail-page .detail-brand strong { font-size: 14px; font-weight: 700; color: #0f172a; }
.video-detail-page .detail-brand small { color: #64748b; font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.video-detail-page .detail-toolbar-actions { display: flex; gap: 10px; }
.video-detail-page .detail-toolbar-actions a { padding: 9px 16px; border: 1px solid #cbd5e1; border-radius: 10px; color: #334155; text-decoration: none; font-size: 12px; font-weight: 700; transition: all .15s ease; }
.video-detail-page .detail-toolbar-actions a:hover { color: #ffffff; border-color: #0f172a; background: #0f172a; }

.video-detail-page .detail-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin: 28px 0; padding-bottom: 28px; border-bottom: 1px solid #e2e8f0; flex-wrap: wrap; }
.video-detail-page .detail-labels { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.video-detail-page .complete-pill, .video-detail-page .job-number { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.video-detail-page .complete-pill { color: #047857; background: #ecfdf5; border: 1px solid #a7f3d0; }
.video-detail-page .job-number { color: #6366f1; background: #eeefee; border: 1px solid #cbd5e1; }
.video-detail-page .detail-hero h1 { max-width: 980px; margin: 0; color: #0f172a; font-size: clamp(26px, 3.2vw, 44px); font-weight: 800; line-height: 1.1; letter-spacing: -.03em; overflow-wrap: anywhere; }
.video-detail-page .detail-hero p { margin: 10px 0 0; color: #64748b; font-size: 15px; }
.video-detail-page .detail-hero p strong { color: #0f172a; }
.video-detail-page .hero-download { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; padding: 12px 20px; border-radius: 12px; color: #ffffff; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); box-shadow: 0 4px 16px rgba(99,102,241,.3); text-decoration: none; font-size: 13px; font-weight: 700; transition: all .2s ease; }
.video-detail-page .hero-download:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(99,102,241,.4); }

.video-detail-page .detail-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin: 24px 0; max-width: 100%; min-width: 0; }
.video-detail-page .detail-metrics article { min-width: 0; padding: 20px; border: 1px solid #e2e8f0; border-radius: 18px; background: #ffffff; box-shadow: 0 4px 16px -2px rgba(15,23,42,.04); box-sizing: border-box; }
.video-detail-page .detail-metrics span { display: block; color: #64748b; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.video-detail-page .detail-metrics strong { display: block; margin: 8px 0 4px; color: #0f172a; font-size: clamp(18px, 2vw, 26px); font-weight: 800; letter-spacing: -.03em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.video-detail-page .detail-metrics small { color: #94a3b8; font-size: 11px; }

.video-detail-page .video-detail-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, .7fr); gap: 24px; align-items: stretch; max-width: 100%; min-width: 0; }
.video-detail-page .video-detail-grid .panel { margin-top: 0; padding: 24px; border-radius: 20px; border: 1px solid #e2e8f0; background: #ffffff; box-shadow: 0 4px 20px -2px rgba(15,23,42,.05); max-width: 100%; min-width: 0; box-sizing: border-box; }
.video-detail-page .detail-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; flex-wrap: wrap; }
.video-detail-page .detail-section-heading h2 { margin: 0; font-size: 20px; font-weight: 700; color: #0f172a; }
.video-detail-page .video-frame { display: grid; place-items: center; min-height: 420px; overflow: hidden; border-radius: 16px; background: #090d16; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); width: 100%; max-width: 100%; }
.video-detail-page .video-player-panel video { width: 100%; max-height: 640px; display: block; border-radius: 16px; }
.video-detail-page .owner-card { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; padding: 16px; border-radius: 14px; background: #f8fafc; border: 1px solid #e2e8f0; }
.video-detail-page .owner-avatar { width: 44px; height: 44px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 50%; color: #ffffff; background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%); font-size: 16px; font-weight: 800; }
.video-detail-page .owner-card small { color: #94a3b8; font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.video-detail-page .owner-card strong { margin: 2px 0; font-size: 15px; font-weight: 700; color: #0f172a; }
.video-detail-page .owner-card span { color: #64748b; font-size: 12px; }
.video-detail-page .detail-summary dl div { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #f1f5f9; }
.video-detail-page .detail-summary dt { color: #64748b; font-size: 12px; font-weight: 700; text-transform: uppercase; }
.video-detail-page .detail-summary dd { margin: 0; color: #0f172a; font-size: 13px; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.video-detail-page .prediction-panel { margin-top: 24px; padding: 24px; border: 1px solid #e2e8f0; border-radius: 20px; background: #ffffff; box-shadow: 0 4px 20px -2px rgba(15,23,42,.05); max-width: 100%; min-width: 0; box-sizing: border-box; }

/* Responsive Media Queries */
@media (max-width: 1280px) {
  .admin-console .admin-table-grid { grid-template-columns: minmax(0, 1fr); }
  .video-detail-page .video-detail-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 1050px) {
  .admin-console .admin-filter-panel { grid-template-columns: minmax(0, 1fr); }
  .admin-console .credit-action-panel { grid-template-columns: minmax(0, 1fr); }
  .admin-console .admin-layout { grid-template-columns: 220px minmax(0, 1fr); }
}
@media (max-width: 860px) {
  .admin-console .admin-layout { display: flex; flex-direction: column; }
  .admin-console .admin-sidebar { z-index: 100; width: 100%; height: auto; min-height: 60px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; flex-direction: row; gap: 12px; padding: 10px 16px; overflow: visible; box-sizing: border-box; }
  .admin-console .admin-sidebar > div:first-child { display: flex; align-items: center; flex-direction: row; gap: 12px; flex: 1; min-width: 0; overflow: visible; padding-bottom: 0; }
  .admin-console .admin-brand img { width: 36px; height: 36px; }
  .admin-console .admin-brand > span { display: none; }
  .admin-console .admin-nav-label, .admin-console .admin-identity { display: none; }
  .admin-console .admin-side-nav { display: flex; flex-direction: row; gap: 6px; overflow-x: auto; scrollbar-width: none; }
  .admin-console .admin-side-nav a { padding: 8px 12px; font-size: 12px; white-space: nowrap; }
  .admin-console .admin-side-nav a .nav-svg-icon { width: 18px; height: 18px; }
  .admin-console .admin-sidebar-footer { padding: 0; border: 0; margin-top: 0; width: auto; flex-shrink: 0; }
  .admin-console .admin-sidebar-footer form { display: inline-block; margin: 0; width: auto; }
  .admin-console .admin-sidebar-footer .admin-logout { width: auto; padding: 8px 14px; font-size: 12px; min-height: 36px; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
  .admin-console .admin-main { width: 100%; height: auto; flex: 1 1 auto; padding-top: 24px; }
}
@media (max-width: 640px) {
  .admin-console .admin-metrics { grid-template-columns: 1fr; }
  .admin-console .admin-filter-grid { grid-template-columns: 1fr; }
  .admin-console .admin-topup-form { grid-template-columns: 1fr; }
  .admin-console .ledger-filters { grid-template-columns: 1fr; }
  .video-detail-page .detail-metrics { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}