@font-face { font-family:Vazirmatn; src:url("/fonts/vazirmatn_regular.ttf") format("truetype"); font-weight:100 500; font-display:swap; }
@font-face { font-family:Vazirmatn; src:url("/fonts/vazirmatn_bold.ttf") format("truetype"); font-weight:600 900; font-display:swap; }
:root {
  --ink: #102832;
  --ink-soft: #31515d;
  --muted: #6c828a;
  --teal: #087f83;
  --teal-bright: #17a7a2;
  --teal-wash: #dff5f1;
  --navy: #071c26;
  --navy-soft: #0d2b37;
  --surface: #ffffff;
  --canvas: #f3f7f6;
  --line: #dce8e6;
  --amber: #efb34b;
  --danger: #bd3434;
  --success: #147a54;
  --shadow: 0 18px 50px rgba(15, 53, 61, .08);
  --shadow-hover: 0 22px 55px rgba(15, 53, 61, .14);
}

* { box-sizing: border-box; }
html { min-height: 100%; scroll-behavior: smooth; }
body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(23, 167, 162, .09), transparent 26rem),
    var(--canvas);
  font-family: Vazirmatn, Tahoma, sans-serif;
  line-height: 1.65;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
:focus-visible { outline: 3px solid rgba(23, 167, 162, .38); outline-offset: 3px; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 100; top: 10px; right: 10px; transform: translateY(-160%); background: white; color: var(--navy); padding: 10px 16px; border-radius: 12px; }
.skip-link:focus { transform: translateY(0); }
.muted { color: var(--muted); }
.eyebrow, .section-kicker { color: var(--teal); font-size: .72rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
h1, h2, h3, h4, p { margin-top: 0; }
h1 { margin-bottom: 6px; font-size: clamp(2rem, 4vw, 2.8rem); letter-spacing: -.04em; }
h2 { margin-bottom: 2px; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.035em; }
h3 { margin-bottom: 8px; font-size: 1.15rem; }

.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 60% 10%, #164c56 0%, var(--navy) 48%, #04131a 100%); }
.login-shell::before { content: ""; position: fixed; width: 34rem; height: 34rem; border: 1px solid rgba(255,255,255,.07); border-radius: 50%; transform: translate(40%, -40%); }
.login-card { position: relative; width: min(460px, 100%); padding: 42px; background: rgba(255,255,255,.98); border: 1px solid rgba(255,255,255,.8); border-radius: 30px; box-shadow: 0 32px 90px rgba(0,0,0,.28); }
.login-brand { display: flex; direction: ltr; align-items: center; gap: 10px; margin-bottom: 32px; color: var(--navy); font-weight: 900; letter-spacing: .12em; }
.logo { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 15px; color: white; background: linear-gradient(145deg, var(--teal-bright), var(--teal)); box-shadow: 0 10px 24px rgba(23,167,162,.26); font-size: 1.3rem; font-weight: 900; }
label { display: block; margin: 15px 0 7px; color: var(--ink-soft); font-size: .88rem; font-weight: 750; }
input, select, textarea { width: 100%; min-height: 48px; padding: 11px 14px; color: var(--ink); background: #fbfdfd; border: 1px solid var(--line); border-radius: 13px; transition: border-color .18s, box-shadow .18s, background .18s; }
input:hover, select:hover, textarea:hover { border-color: #b7cfcc; }
input:focus, select:focus, textarea:focus { border-color: var(--teal-bright); background: white; box-shadow: 0 0 0 4px rgba(23,167,162,.1); outline: none; }
textarea { min-height: 150px; resize: vertical; line-height: 1.8; }
.primary, .secondary, .danger, .ghost, .icon-button, .text-danger { min-height: 46px; padding: 10px 17px; border: 0; border-radius: 13px; font-weight: 850; transition: transform .18s, box-shadow .18s, background .18s; }
.primary { color: white; background: linear-gradient(135deg, var(--teal-bright), var(--teal)); box-shadow: 0 10px 22px rgba(8,127,131,.19); }
.primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(8,127,131,.27); }
.secondary { color: var(--teal); background: var(--teal-wash); }
.secondary:hover { background: #d0eee9; }
.danger { width: auto; color: var(--danger); background: #fff0ee; }
.text-danger { width: auto; min-height: auto; padding: 5px 9px; color: var(--danger); background: transparent; font-size: .78rem; }
.ghost { color: #cae0e3; background: rgba(255,255,255,.06); }
.fit { width: fit-content; }
.error { min-height: 1.4em; margin: 12px 0 0; color: var(--danger); font-weight: 750; }
#login-btn { width: 100%; margin-top: 24px; }

.app { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; z-index: 20; display: flex; flex-direction: column; gap: 26px; padding: 26px 18px; color: #ecf8f8; background: linear-gradient(180deg, var(--navy) 0%, #092630 100%); }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand strong { display: block; font-size: 1.15rem; }
.brand small { display: block; color: #83aab0; }
nav { display: grid; gap: 7px; }
nav button { width: 100%; min-height: 48px; display: flex; align-items: center; gap: 12px; padding: 10px 13px; color: #a9c5c9; background: transparent; border: 0; border-radius: 13px; text-align: right; font-weight: 700; }
nav button span { width: 24px; color: #6d969d; text-align: center; font-size: 1.1rem; }
nav button:hover { color: white; background: rgba(255,255,255,.06); }
nav button.active { color: white; background: linear-gradient(90deg, rgba(23,167,162,.24), rgba(23,167,162,.1)); box-shadow: inset -3px 0 var(--teal-bright); }
nav button.active span { color: #50d1c9; }
.sidebar-status { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 13px; color: #d7e9eb; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.07); border-radius: 14px; }
.sidebar-status b, .sidebar-status small { display: block; font-size: .74rem; }
.sidebar-status small { color: #7fa5aa; }
.live-dot { width: 9px; height: 9px; flex: 0 0 auto; border-radius: 50%; background: #4ed3a4; box-shadow: 0 0 0 5px rgba(78,211,164,.1); animation: pulse 2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(78,211,164,0); } }

main { min-width: 0; padding: 34px clamp(22px, 4vw, 52px) 60px; }
.topbar { min-height: 90px; display: flex; align-items: flex-start; justify-content: space-between; gap: 22px; margin-bottom: 26px; }
.title-block .eyebrow { margin-bottom: 3px; }
.title-block p:last-child { margin: 0; }
.icon-button { display: none; width: 46px; padding: 0; color: var(--ink); background: white; border: 1px solid var(--line); }
.live-cluster { display: grid; justify-items: end; gap: 5px; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 7px 13px; color: var(--success); background: #e4f5ed; border: 1px solid #cce9dd; border-radius: 999px; font-size: .82rem; font-weight: 850; }
.pill i { width: 7px; height: 7px; border-radius: 50%; background: #2aae78; }
.pill.offline { color: var(--danger); background: #fff0ee; border-color: #f4d8d3; }
.pill.offline i { background: var(--danger); }
.last-update { color: var(--muted); font-size: .72rem; }

.page { animation: enter .25s ease-out; }
@keyframes enter { from { opacity: 0; transform: translateY(5px); } }
.card, .hero-card, .stat { background: rgba(255,255,255,.94); border: 1px solid rgba(214,229,226,.9); box-shadow: var(--shadow); }
.card { padding: 23px; border-radius: 21px; }
.hero-card { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 25px; min-height: 188px; padding: 30px 34px; margin-bottom: 17px; color: white; background: linear-gradient(125deg, #0b3b45 0%, #075d63 60%, #0b7b79 100%); border: 0; border-radius: 24px; }
.hero-card::after { content: ""; position: absolute; left: -35px; bottom: -105px; width: 250px; height: 250px; border: 40px solid rgba(255,255,255,.05); border-radius: 50%; }
.hero-card > * { position: relative; z-index: 1; }
.hero-card .section-kicker { color: #78ded5; }
.hero-card h3 { margin: 8px 0; font-size: clamp(1.45rem, 2.5vw, 2rem); }
.hero-card p { max-width: 680px; margin-bottom: 0; color: #c0dfe1; }
.provider-stack { min-width: 185px; display: grid; gap: 9px; }
.provider-pill { padding: 10px 13px; color: #def5f4; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.12); border-radius: 12px; font-size: .78rem; font-weight: 800; }
.stats { display: grid; grid-template-columns: repeat(6, minmax(115px, 1fr)); gap: 12px; margin-bottom: 17px; }
.stat { min-height: 96px; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 18px; }
.stat-icon { width: 36px; height: 36px; display: grid; place-items: center; flex: 0 0 auto; color: var(--teal); background: var(--teal-wash); border-radius: 11px; font-size: 1rem; }
.stat b, .stat span { display: block; }
.stat b { font-size: 1.35rem; line-height: 1.1; }
.stat div span { margin-top: 6px; color: var(--muted); font-size: .72rem; white-space: nowrap; }
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, .75fr); gap: 17px; }
.card-heading, .section-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.card-heading h3, .section-header h3 { margin-bottom: 0; }
.soft-badge, .count-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 32px; padding: 5px 10px; color: var(--teal); background: var(--teal-wash); border-radius: 999px; font-size: .72rem; font-weight: 850; }
.mono { display: grid; gap: 5px; direction: ltr; word-break: break-all; color: var(--muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .73rem; }
.mono span { margin-top: 8px; color: var(--ink); direction: rtl; font-family: Vazirmatn, sans-serif; font-weight: 850; }
.notice { margin-top: 20px; padding: 13px; color: #526d75; background: #f3f8f7; border-right: 3px solid var(--teal-bright); border-radius: 10px; font-size: .78rem; }

.toolbar { display: flex; align-items: center; gap: 12px; padding: 13px; background: rgba(243,247,246,.92); }
.sticky-toolbar { position: sticky; top: 0; z-index: 8; margin: -8px 0 20px; backdrop-filter: blur(12px); }
.search-field { flex: 1 1 260px; margin: 0; }
.toolbar-actions { display: flex; gap: 9px; }
.form-message { min-height: 1.2rem; color: var(--success); font-size: .78rem; font-weight: 800; }
.prompt-section { margin-bottom: 25px; }
.prompt-section-title { display: flex; align-items: center; gap: 10px; margin: 0 4px 10px; }
.prompt-section-title h3 { margin: 0; }
.prompt-section-title span { color: var(--muted); font-size: .74rem; }
.prompt-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.prompt-card { transition: transform .18s, box-shadow .18s, border-color .18s; }
.prompt-card:hover { transform: translateY(-2px); border-color: #c0dad6; box-shadow: var(--shadow-hover); }
.prompt-card h4 { margin: 12px 0 3px; font-size: 1.05rem; }
.prompt-card p { min-height: 1.4rem; margin-bottom: 8px; font-size: .77rem; }
.prompt-card label { margin: 0; }
.chip { display: inline-flex; padding: 4px 9px; color: var(--teal); background: var(--teal-wash); border-radius: 8px; font-family: ui-monospace, monospace; font-size: .7rem; font-weight: 850; }
.add-card { margin-top: 28px; }
.form-grid { display: grid; grid-template-columns: minmax(180px, .5fr) 1fr; gap: 14px; }
.span-2 { grid-column: 2; }

.settings-grid, .voice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 17px; }
.settings-grid .card h3, .voice-grid .card h3 { margin-top: 5px; }
.field-row { display: grid; grid-template-columns: 1fr 130px; align-items: center; gap: 15px; padding: 11px 0; border-bottom: 1px solid #edf3f2; }
.field-row label { margin: 0; }
.save-bar { display: flex; align-items: center; justify-content: flex-end; gap: 15px; margin-top: 17px; }
.voice-grid { grid-template-columns: .8fr 1.2fr; }
.preview-card { grid-column: 1 / -1; }
.voice-status-card { color: white; background: linear-gradient(145deg, #0a3b46, #08676b); border: 0; }
.voice-status-card .section-kicker { color: #70d8cf; }
.voice-status-card .muted { color: #bedbdd; }
.status-banner { margin-top: 24px; padding: 11px 13px; color: #bff3dc; background: rgba(87,216,164,.12); border: 1px solid rgba(87,216,164,.2); border-radius: 12px; font-size: .8rem; font-weight: 850; }
.status-banner.not-ready { color: #ffd4cb; background: rgba(255,130,110,.1); border-color: rgba(255,130,110,.2); }
output { float: left; color: var(--teal); }
input[type="range"] { padding: 0; accent-color: var(--teal); border: 0; box-shadow: none; }
audio { width: 100%; margin-top: 15px; }

.section-header { margin-bottom: 14px; }
.data-stack { display: grid; gap: 15px; }
.table-wrap { width: 100%; overflow-x: auto; margin-top: 14px; }
table { width: 100%; border-collapse: collapse; font-size: .8rem; }
th { color: var(--muted); background: #f7faf9; font-size: .71rem; font-weight: 850; }
th, td { max-width: 480px; padding: 12px 10px; border-bottom: 1px solid #e8f0ef; text-align: right; vertical-align: top; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fbfdfd; }
.empty-state { margin-top: 14px; padding: 24px; color: var(--muted); background: #f7faf9; border: 1px dashed #cfe0dd; border-radius: 13px; text-align: center; font-size: .82rem; }
.toast { position: fixed; left: 24px; bottom: 24px; z-index: 100; max-width: min(390px, calc(100vw - 48px)); padding: 13px 17px; color: white; background: var(--navy); border-radius: 13px; box-shadow: 0 16px 42px rgba(0,0,0,.2); opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity .2s, transform .2s; }
.toast.show { opacity: 1; transform: translateY(0); }
.toast.error { background: #8b2929; }

@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(3, minmax(130px, 1fr)); }
}

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { position: fixed; right: 0; width: 270px; transform: translateX(105%); transition: transform .25s ease; box-shadow: -20px 0 50px rgba(0,0,0,.18); }
  .sidebar.open { transform: translateX(0); }
  main { padding: 22px 18px 50px; }
  .icon-button { display: block; flex: 0 0 auto; }
  .topbar { align-items: flex-start; }
  .title-block { flex: 1; }
  .live-cluster { display: none; }
  .dashboard-grid, .settings-grid, .voice-grid { grid-template-columns: 1fr; }
  .preview-card { grid-column: auto; }
  .prompt-grid { grid-template-columns: 1fr; }
  .hero-card { align-items: flex-start; flex-direction: column; }
  .provider-stack { width: 100%; grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .login-card { padding: 28px 22px; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat { min-height: 86px; padding: 12px; }
  .stat-icon { display: none; }
  .hero-card { padding: 24px; }
  .provider-stack { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .field-row { grid-template-columns: 1fr 120px; }
  .save-bar { align-items: stretch; flex-direction: column; }
  .save-bar .fit { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }
}

/* Operations workspace: real telemetry with compact, accessible controls. */
.operations-metrics { display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px; margin-bottom:20px; }
.metric { padding:20px; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.metric span { display:block; color:var(--muted); font-size:.8rem; }
.metric strong { display:block; margin-top:8px; font-size:1.6rem; text-align:right; letter-spacing:-.02em; }
.operations-strip { display:grid; grid-template-columns:2fr 1fr; align-items:center; gap:24px; margin-bottom:24px; }
.latency-chart { color:var(--teal); } .latency-chart svg { width:100%; height:80px; }
.profile-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; }
.proxy-targets { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px 12px; margin:8px 0 14px; }
.proxy-targets label { display:flex; align-items:center; gap:8px; margin:0; min-height:44px; font-weight:650; }
.proxy-targets input { width:18px; min-height:18px; padding:0; accent-color:var(--teal); box-shadow:none; }
.proxy-targets small { color:var(--muted); font-weight:500; }
.action-row { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.learning-row, .connection { display:flex; align-items:start; justify-content:space-between; gap:24px; padding:20px 0; border-bottom:1px solid var(--line); }
.learning-row p { white-space:pre-wrap; overflow-wrap:anywhere; } .learning-row h4 { margin:10px 0; }
.connection b { overflow-wrap:anywhere; } details { margin:18px 0; } summary { cursor:pointer; color:var(--teal); font-weight:700; }
.card { margin-bottom:16px; } .hero-card { border-radius:20px; box-shadow:none; }
@media(max-width:1100px) { .operations-metrics { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:600px) { .operations-metrics { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; } .metric { padding:14px; } .metric strong { font-size:1.25rem; } .operations-strip,.profile-grid { grid-template-columns:1fr; } .learning-row,.connection { flex-direction:column; gap:12px; } }
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }

/* Model workspace and connected tools */
.model-workspace-header, .section-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:20px; margin:16px 0; flex-wrap:wrap; }
.provider-tabs { display:grid; grid-template-columns:repeat(auto-fit,minmax(145px,1fr)); gap:10px; margin:24px 0 18px; }
.provider-tab { position:relative; min-height:108px; padding:18px 16px; text-align:start; color:var(--ink-soft); background:var(--canvas); border:1px solid var(--line); border-radius:18px; transition:background .18s,border-color .18s,box-shadow .18s; }
.provider-tab strong { display:block; font-size:1.05rem; direction:ltr; text-align:start; }
.provider-tab small { display:block; font-size:.72rem; margin-top:5px; color:var(--ink-soft); }
.provider-tab .tab-status { position:absolute; top:12px; inset-inline-end:12px; font-size:.65rem; color:var(--muted); }
.provider-tab:hover { border-color:var(--teal); background:#eff9f6; }
.provider-tab.selected { background:var(--teal-wash); border-color:var(--teal); box-shadow:0 0 0 2px rgba(8,127,131,.12); }
.provider-tab.running .tab-status { color:var(--success); background:#d6f2e4; border-radius:20px; padding:1px 8px; }
.model-search { margin-top:18px; }
.model-catalog { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr)); gap:10px; margin:12px 0; max-height:420px; overflow:auto; padding:3px; }
.model-option { min-width:0; min-height:92px; padding:15px; display:grid; grid-template-columns:26px minmax(0,1fr); align-content:center; gap:5px 9px; text-align:start; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:15px; }
.model-option:hover { background:var(--canvas); border-color:var(--teal); }
.model-option strong { overflow-wrap:anywhere; align-self:center; font-size:.86rem; }
.model-option small { grid-column:2; font-size:.72rem; color:var(--ink-soft); }
.model-option .model-option-icon { grid-row:span 2; color:var(--teal); font-size:1.3rem; align-self:center; }
.model-option.running { border-color:var(--teal); background:#edf9f4; }
.model-option.running small { color:var(--success); font-weight:800; }
#mcp-discovered .model-option { display:block; }
#mcp-discovered .model-option small { display:block; margin-top:8px; }
#mcp-list .mono { overflow-wrap:anywhere; white-space:normal; font-size:.78rem; }
.mcp-server { padding:18px 0; border-bottom:1px solid var(--line); }
.mcp-server:first-child { padding-top:0; }
.mcp-server:last-child { border-bottom:0; }
.speech-input-card { margin-bottom:24px; }
#stt-status { max-width:100%; white-space:normal; line-height:1.9; }
#page-settings .card > .muted { max-width:76ch; }
#page-settings .settings-grid > .card:first-child { box-shadow:var(--shadow); border-top:3px solid var(--teal); }
#active-model-summary { overflow-wrap:anywhere; direction:ltr; max-width:100%; white-space:normal; }
@media(max-width:640px) {
  .provider-tabs { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .provider-tab { min-height:96px; padding:16px 12px; }
  .model-workspace-header { display:block; }
  #active-model-summary { display:block; margin-top:12px; }
  .model-catalog { grid-template-columns:1fr; }
}
@media(prefers-reduced-motion:reduce) { *, *::before, *::after { animation:none !important; transition:none !important; scroll-behavior:auto !important; } }
#provider-config > div:first-of-type { grid-template-columns:repeat(3,minmax(0,1fr)) !important; }
#provider-config .model-catalog-field { grid-column:1 / -1; order:3; }
@media(max-width:760px) { #provider-config > div:first-of-type { grid-template-columns:1fr !important; } }