/* Asosoft — warm neutrals, restrained orange, clear reading hierarchy. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Vazirmatn:wght@400;500;600;700&display=swap');
:root {
  --bg-main:#f7f7f5; --bg-sidebar:#fff; --bg-card:#fff; --bg-input:#fff;
  --accent:#b9470b; --accent-hover:#963907; --accent-light:#fff1e8; --accent-glow:#f7dccb;
  --text-primary:#252724; --text-secondary:#575b55; --text-muted:#73776f;
  --border:#e3e5de; --border-hover:#b7bcb1; --emerald:#27734b; --emerald-light:#edf6ee;
  --rose:#b43d3d; --rose-light:#fceeee; --amber:#946216; --amber-light:#faf2de;
  --sky:#356a86; --sky-light:#eef4f7; --radius-sm:7px; --radius-md:10px; --radius-lg:12px;
  --radius-xl:12px; --radius-2xl:16px; --radius-full:99px; --sidebar-w:246px;
}
* {box-sizing:border-box;margin:0;padding:0}
body {font-family:Vazirmatn,Inter,'Segoe UI',sans-serif;background:var(--bg-main);color:var(--text-primary);font-size:14px;line-height:1.7;-webkit-font-smoothing:antialiased}
body[dir=ltr] {font-family:Inter,Vazirmatn,'Segoe UI',sans-serif}
button,input,select,textarea {font:inherit} button,a,input,select,textarea { -webkit-tap-highlight-color:transparent }
button {cursor:pointer} a {color:var(--accent)} ::selection {background:#f8dcc9}
:focus-visible {outline:3px solid var(--accent);outline-offset:3px}
button:disabled {opacity:.55;cursor:wait}
.brand-icon,.sb-svg {width:20px;height:20px;flex-shrink:0;vertical-align:middle}
.sb-svg-sm {width:18px;height:18px}
.login-page {min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:32px;background:#f5f5f1}
.login-card {width:100%;max-width:440px;padding:42px;background:white;border:1px solid var(--border);border-radius:16px;box-shadow:0 12px 40px #25272406}
.login-logo {text-align:center;margin-bottom:32px}.login-logo-box {width:72px;height:50px;margin:0 auto 16px}.login-logo-img {width:100%;height:100%;object-fit:contain}
.login-wordmark {font-size:24px;font-weight:700;letter-spacing:-.7px;margin-bottom:22px}.login-logo h2 {font-size:21px;font-weight:600}.login-logo p {color:var(--text-muted);font-size:13px;margin-top:8px}
.login-hint {text-align:center;border-top:1px solid var(--border);margin-top:26px;padding-top:20px;font-size:12px;color:var(--text-muted)}
.login-language {display:block;margin:16px auto 0;background:none;border:0;color:var(--accent);padding:8px}
#app {width:100%;min-height:100vh}.sidebar {position:fixed;inset-block:0;inset-inline-start:0;width:var(--sidebar-w);background:var(--bg-sidebar);border-inline-end:1px solid var(--border);display:flex;flex-direction:column;z-index:60;overflow-y:auto}
.sb-brand {display:flex;align-items:center;gap:12px;padding:30px 24px 28px}.sb-brand-logo-box {width:44px;flex-shrink:0}.sb-brand-img {width:100%;display:block}.sb-brand-name {font-size:22px;font-weight:700;letter-spacing:-.8px;line-height:1.35}.sb-brand-domain {color:var(--text-muted);font-size:11px;letter-spacing:.4px}
.sb-nav {padding:0 14px;flex:1}.sb-label {font-size:11px;color:var(--text-muted);padding:22px 12px 9px}.sb-item {width:100%;display:flex;align-items:center;gap:12px;padding:12px;margin-bottom:4px;background:none;border:0;border-radius:8px;color:var(--text-secondary);text-align:start;font-size:13px;font-weight:500;text-decoration:none}
.sb-item:hover {background:#f5f5f1}.sb-item.active {background:var(--accent-light);color:var(--accent);font-weight:600}.sb-item.active .sb-svg {color:var(--accent)}
.sb-balance-wrap {padding:20px 20px 12px}.sb-balance-card {padding:15px;border:1px solid var(--border);border-radius:9px;background:#fafaf8}.sb-balance-top {display:flex;justify-content:space-between}.sb-balance-label,.sb-balance-unit {font-size:11px;color:var(--text-muted)}.sb-balance-badge {display:none}.sb-balance-value {font-size:24px;font-weight:600;margin-top:4px;font-variant-numeric:tabular-nums}
.sb-user-card {display:flex;align-items:center;gap:10px;padding:16px 22px}.sb-avatar {width:34px;height:34px;border-radius:50%;background:#eeeae2;display:grid;place-items:center;color:#625b4d;font-weight:600}.sb-user-info {flex:1;min-width:0}.sb-user-name {font-size:13px;font-weight:600;overflow:hidden;text-overflow:ellipsis}.sb-user-role {font-size:11px;color:var(--text-muted)}.sb-action-btn {display:grid;place-items:center;width:36px;height:36px;background:none;border:0;color:var(--text-muted);border-radius:7px}.sb-action-btn:hover {background:var(--rose-light);color:var(--rose)}.sb-footer {padding:8px 14px;border-top:1px solid var(--border)}
.main {margin-inline-start:var(--sidebar-w);width:calc(100% - var(--sidebar-w));min-width:0;min-height:100vh}.topbar {height:76px;background:white;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 36px;position:sticky;top:0;z-index:30}.topbar-title {display:flex;align-items:center;gap:12px;font-size:13px;font-weight:500}.topbar-brand-logo {display:none}.topbar-actions {display:flex;gap:8px;align-items:center}.topbar-actions .btn-primary {background:white;color:var(--text-secondary);border-color:var(--border)}.menu-toggle {display:none}
.container {padding:34px 36px 50px;max-width:1500px;margin:auto}.page-heading {display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:28px}.eyebrow {color:var(--accent);font-size:11px;font-weight:600;letter-spacing:1.3px;direction:ltr;text-align:start}.page-heading h1 {font-size:28px;letter-spacing:-.6px;font-weight:600;margin:6px 0}.page-heading p {font-size:13px;color:var(--text-muted)}.workspace-tag {font-size:12px;color:var(--text-secondary);padding:7px 12px;border:1px solid var(--border);border-radius:6px;background:#fff;white-space:nowrap}
.stats-grid {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin-bottom:28px;background:white;border:1px solid var(--border);border-radius:10px;overflow:hidden}.stat-card {padding:22px;border-inline-end:1px solid var(--border)}.stat-card:last-child {border:0}.stat-row {display:flex;justify-content:space-between;gap:8px}.stat-label {font-size:12px;color:var(--text-secondary);margin-bottom:12px}.stat-val {font-size:30px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums;letter-spacing:-.7px}.stat-sub {font-size:11px;color:var(--text-muted);margin-top:9px}.stat-ring {color:#898d83}.stat-ring .brand-icon {width:18px;height:18px}
.grid-2 {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.card {background:white;border:1px solid var(--border);border-radius:12px;overflow:hidden;min-width:0}.card-head {padding:22px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}.card-title {display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600}.card-title>.brand-icon {color:var(--accent)}.card-desc {color:var(--text-muted);font-size:12px;margin-top:6px}.card-body {padding:24px}.card-body-flush {padding:0}
.btn {display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:9px 17px;border:1px solid transparent;border-radius:7px;font-weight:500;font-size:13px;text-decoration:none;transition:background .15s}.btn-primary {background:var(--accent);color:white}.btn-primary:hover {background:var(--accent-hover)}.btn-success {background:#303b31;color:white}.btn-success:hover {background:#202c21}.btn-danger {background:var(--rose);color:white}.btn-danger:hover {background:#953131}.btn-ghost {background:white;border-color:var(--border);color:var(--text-secondary)}.btn-ghost:hover {background:#f5f5f1;border-color:var(--border-hover)}.btn-sm {font-size:12px;padding:6px 11px;min-height:36px}.btn-icon {width:36px;padding:0}.btn-block {width:100%}.btn .brand-icon {width:17px;height:17px}
.form-group {margin-bottom:18px}.form-label {display:block;font-size:12px;font-weight:500;color:var(--text-secondary);margin-bottom:8px}.form-input {width:100%;padding:11px 13px;background:white;color:var(--text-primary);border:1px solid #d8dcd2;border-radius:7px;font-size:13px;min-height:44px}.form-input:focus {outline:2px solid var(--accent-glow);border-color:var(--accent)}.form-input::placeholder {color:#80847b}textarea.form-input {resize:vertical;min-height:140px;line-height:1.9}#spell-in {min-height:251px}.form-select {cursor:pointer}
.dropzone {border:1px dashed #cbd0c3;background:#fafbf8;border-radius:8px;padding:30px 16px;text-align:center;cursor:pointer;min-height:167px}.dropzone:hover,.dropzone.dragover {border-color:var(--accent);background:#fff8f3}.dropzone-icon {margin-bottom:14px;color:var(--accent)}.dropzone-icon .brand-icon {width:28px;height:28px}.dropzone-text {font-size:13px;font-weight:500}.dropzone-hint {font-size:11px;color:var(--text-muted);margin-top:5px}.preview-wrap {display:none;position:relative;border:1px solid var(--border);border-radius:8px;overflow:hidden}.preview-wrap img {width:100%;max-height:167px;object-fit:contain}.preview-remove {position:absolute;top:8px;inset-inline-end:8px;width:34px;height:34px;border:0;border-radius:50%;background:#252724;color:#fff}
.result-box {display:none;margin-top:20px;border:1px solid var(--border);border-radius:8px;overflow:hidden}.result-header {display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#f3f7ef;border-bottom:1px solid var(--border)}.result-title {font-size:12px;font-weight:600;color:var(--emerald)}.result-content {padding:18px;line-height:2;white-space:pre-wrap;overflow-wrap:anywhere;max-height:360px;overflow:auto}
.table-wrap {overflow-x:auto}.data-table {width:100%;border-collapse:collapse;text-align:start}.data-table th {padding:13px 18px;background:#f8f9f5;color:var(--text-muted);font-size:11px;font-weight:500;white-space:nowrap;text-align:start}.data-table td {padding:16px 18px;border-top:1px solid var(--border);font-size:12px}.data-table tbody tr:hover {background:#fcfcf9}.badge,.status-pill,.method-tag {display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:500;white-space:nowrap}.badge-success,.s200,.method-tag.post {background:var(--emerald-light);color:var(--emerald)}.badge-danger,.s402,.method-tag.delete {background:var(--rose-light);color:var(--rose)}.badge-warning,.s401,.s429,.method-tag.patch {background:var(--amber-light);color:var(--amber)}.badge-info,.method-tag.get {background:var(--sky-light);color:var(--sky)}.badge-primary {background:var(--accent-light);color:var(--accent)}.filters-row {display:flex;gap:12px;flex-wrap:wrap;padding:16px 24px;border-bottom:1px solid var(--border)}.filters-row .form-input {max-width:260px}.filters-row .form-select {max-width:200px}.action-group {display:flex;justify-content:center;gap:5px;flex-wrap:wrap}
.modal-overlay {position:fixed;inset:0;background:#20251e66;display:none;align-items:center;justify-content:center;z-index:200;padding:20px}.modal-overlay.active {display:flex}.modal-card {width:100%;max-width:520px;padding:28px;background:white;border-radius:12px;max-height:90dvh;overflow-y:auto;box-shadow:0 20px 80px #0002}.modal-header {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:24px}.modal-title {font-size:18px;font-weight:600}.modal-close {border:0;background:#f2f3ee;border-radius:6px;width:36px;height:36px}.modal-actions {display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border);padding-top:20px;margin-top:24px}
.toast-container {position:fixed;bottom:24px;inset-inline-end:24px;z-index:500;max-width:min(400px,calc(100vw - 32px));display:grid;gap:8px}.toast {display:flex;gap:10px;padding:14px 20px;border:1px solid var(--border);border-inline-start:3px solid var(--accent);background:white;border-radius:8px;box-shadow:0 6px 24px #0001;font-size:13px;overflow-wrap:anywhere}.toast.error {border-inline-start-color:var(--rose)}.toast.success {border-inline-start-color:var(--emerald)}.spinner {display:inline-block;width:18px;height:18px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;animation:spin .7s linear infinite}@keyframes spin {to {transform:rotate(360deg)}}
.doc-hero {padding:28px;background:white;border:1px solid var(--border);border-radius:12px;margin-bottom:24px}.doc-hero-head {display:flex;align-items:center;gap:20px}.doc-hero-logo {width:65px;height:45px;object-fit:contain}.doc-hero-title {font-size:21px;font-weight:600;display:flex;align-items:center;gap:10px;flex-wrap:wrap}.doc-hero-badge {font-size:11px;color:var(--accent);background:var(--accent-light);padding:3px 8px;border-radius:5px}.doc-hero-desc {color:var(--text-secondary);font-size:13px;margin-top:8px}.doc-token-bar {display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:16px;margin-top:20px;background:#f6f7f3;border-radius:7px}.doc-token-label {font-size:12px}.doc-token-val {font:12px Consolas,monospace;direction:ltr;max-width:100%;overflow:hidden;text-overflow:ellipsis}.doc-token-bar .copy-btn {background:white;color:var(--text-secondary);border-color:var(--border)}.lang-tabs {display:flex;gap:4px;flex-wrap:wrap;padding:4px;border:1px solid var(--border);border-radius:8px;background:white}.lang-tab {border:0;background:none;padding:9px 13px;border-radius:5px;color:var(--text-secondary);font-size:12px}.lang-tab.active {background:var(--accent-light);color:var(--accent)}.code-box {background:#252a25;border-radius:8px;overflow:hidden;margin:10px 0;direction:ltr;text-align:left}.code-header {display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px;background:#303630}.code-title {color:#c5cdc1;font-size:12px}.copy-btn {border:1px solid #586052;background:#3c4439;color:white;padding:7px 10px;min-height:34px;border-radius:5px;cursor:pointer;font:12px inherit;text-decoration:none}.copy-btn:hover {border-color:var(--accent)}.code-pre {padding:20px;overflow-x:auto;font:12px/1.8 Consolas,monospace;color:#e3e9df}.code-pre code {font:inherit}.sidebar-backdrop {display:none}.workspace-footer {margin-top:30px;padding-top:18px;border-top:1px solid var(--border);display:flex;justify-content:space-between;gap:12px;font-size:11px;color:var(--text-muted)}
@media(min-width:1500px) {.container {padding-top:42px}.page-heading {margin-bottom:36px}}
@media(max-width:1150px) {.stats-grid {grid-template-columns:repeat(2,minmax(0,1fr))}.stat-card:nth-child(2) {border-inline-end:0}.stat-card:nth-child(-n+2) {border-bottom:1px solid var(--border)}.grid-2 {grid-template-columns:minmax(0,1fr)}#spell-in {min-height:180px}}
@media(max-width:760px) {.sidebar {visibility:hidden;transform:translateX(100%);width:270px;max-width:85vw;transition:transform .2s,visibility .2s}body[dir=ltr] .sidebar {transform:translateX(-100%)}body.nav-open .sidebar {visibility:visible;transform:translateX(0)}.main {margin:0;width:100%}.topbar {height:64px;padding:0 16px}.menu-toggle {display:inline-flex}.topbar-title {font-size:12px;gap:8px}.topbar-actions>a {display:none}.topbar-actions .btn {padding:6px 9px;font-size:11px}.topbar-actions .btn svg {display:none}.container {padding:24px 16px}.page-heading h1 {font-size:23px}.page-heading {align-items:flex-start}.workspace-tag {display:none}.stats-grid {margin-bottom:20px}.stat-card {padding:18px 14px}.stat-val {font-size:26px}.stat-ring {display:none}.card-head,.card-body {padding:20px}.grid-2 {gap:20px}.login-card {padding:30px 24px}.login-page {padding:16px}.doc-hero {padding:20px}.doc-hero-logo {display:none}.doc-hero-title {font-size:18px}.filters-row {padding:16px}.filters-row .form-input,.filters-row .form-select {max-width:none}.sidebar-backdrop {position:fixed;inset:0;border:0;background:#20251e66;z-index:55}body.nav-open .sidebar-backdrop {display:block}.card-title {font-size:14px}.workspace-footer {flex-wrap:wrap}.btn {white-space:normal}.doc-token-bar>div {min-width:0}}
@media(prefers-reduced-motion:reduce) {*,*::before,*::after {animation-duration:.01ms!important;transition:none!important;scroll-behavior:auto!important}}
/* Keep mobile navigation controls out of the desktop toolbar. */
.topbar .menu-toggle {display:none}
body[dir=rtl] .eyebrow {text-align:right}
@media(max-width:760px) {
  .topbar .menu-toggle {display:inline-flex}
  .topbar-brand-logo {display:block;width:26px;height:22px;object-fit:contain}
  body.nav-open {overflow:hidden}
}

/* Quiet, consistent scrollbars for pages, tables, editors and dialogs. */
:root {
  --scroll-thumb: #899183;
  --scroll-thumb-hover: #687260;
  --scroll-track: transparent;
}
* {
  scrollbar-width: thin;
  scrollbar-color: var(--scroll-thumb) var(--scroll-track);
}
.code-pre {
  --scroll-thumb: #778370;
  --scroll-thumb-hover: #a4b29c;
}
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: var(--scroll-track); }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 999px;
    min-height: 36px;
    min-width: 36px;
  }
  ::-webkit-scrollbar-thumb:hover,
  ::-webkit-scrollbar-thumb:active { background-color: var(--scroll-thumb-hover); }
  ::-webkit-scrollbar-corner { background: transparent; }
  ::-webkit-scrollbar-button { display: none; }
}
@media (pointer: coarse) {
  * { scrollbar-width: auto; }
  ::-webkit-scrollbar { width: 14px; height: 14px; }
}
@media (forced-colors: active) {
  * { scrollbar-color: auto; }
  ::-webkit-scrollbar-thumb { background-color: ButtonText; }
  ::-webkit-scrollbar-track { background: Canvas; }
}

/* ═══════════════════════════════════════════════════════════
   STT Voice & Token Management System Styles
   ═══════════════════════════════════════════════════════════ */
.token-code {
  font-family: Consolas, 'Courier New', monospace;
  background: #f1f4ee;
  color: var(--accent);
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.token-badge-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.stt-progress-container {
  width: 100%;
  min-width: 90px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.stt-progress-bar {
  height: 6px;
  background: #e6eae0;
  border-radius: 99px;
  overflow: hidden;
  position: relative;
}
.stt-progress-fill {
  height: 100%;
  border-radius: 99px;
  background: linear-gradient(90deg, #27734b, #389464);
  transition: width 0.3s ease;
}
.stt-progress-fill.warning {
  background: linear-gradient(90deg, #946216, #b87b1c);
}
.stt-progress-fill.danger {
  background: linear-gradient(90deg, #b43d3d, #d94e4e);
}
.stt-progress-text {
  font-size: 11px;
  color: var(--text-muted);
  display: flex;
  justify-content: space-between;
}
.time-badge {
  font-family: Consolas, monospace;
  font-weight: 600;
  font-size: 12px;
  padding: 2px 7px;
  border-radius: 5px;
}
.time-left-tag {
  background: var(--emerald-light);
  color: var(--emerald);
}
.time-spent-tag {
  background: var(--sky-light);
  color: var(--sky);
}
.time-total-tag {
  background: #f4f5f0;
  color: var(--text-secondary);
}
.preset-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.preset-btn {
  background: #f5f6f2;
  border: 1px solid var(--border);
  color: var(--text-secondary);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 11px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.preset-btn:hover {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-glow);
}
.stt-hero-card {
  background: linear-gradient(135deg, #ffffff 0%, #f9fbf8 100%);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.stt-audio-meter {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 18px;
}
.meter-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 16px;
  text-align: center;
}
.meter-label {
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.meter-value {
  font-size: 22px;
  font-weight: 700;
  font-family: Consolas, monospace;
  color: var(--text-primary);
}
.token-key-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f5f6f2;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px 16px;
  font-family: Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
  margin-top: 12px;
}
.history-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #eef1ec;
}
@media(max-width: 760px) {
  .stt-audio-meter {
    grid-template-columns: 1fr;
  }
}

.voice-hours-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.voice-hours-val {
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.voice-hours-sub {
  font-size: 10px;
  color: var(--text-muted);
  font-family: Consolas, monospace;
  direction: ltr;
  text-align: start;
}