/* Model management: compact, status-first configuration workspace. */
#models.model-panel {
  --model-ink: #1f302b;
  --model-text: #53635c;
  --model-muted: #7e8b85;
  --model-faint: #9aa39e;
  --model-line: #dde5df;
  --model-line-strong: #c8d4cc;
  --model-green: #4c7568;
  --model-green-dark: #23483d;
  --model-green-deep: #19382f;
  --model-green-soft: #eaf2ed;
  --model-gold: #a47b49;
  --model-gold-soft: #f7f0e5;
  width: 100%;
  margin-top: 0;
  padding: 0 0 42px;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--model-ink);
}

/* Status hero */
#models .model-page-head {
  position: relative;
  display: flex;
  min-height: 150px;
  align-items: center;
  justify-content: space-between;
  gap: 34px;
  margin: 0 0 16px;
  padding: 30px 34px;
  border: 1px solid #34584e;
  border-radius: 16px;
  background: linear-gradient(125deg,#19382f 0%,#285044 62%,#385d50 100%);
  box-shadow: 0 14px 34px #17382f18;
  color: #fff;
  isolation: isolate;
  overflow: hidden;
}
#models .model-page-head::before,
#models .model-page-head::after {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}
#models .model-page-head::before {
  top: -115px;
  right: 20%;
  width: 245px;
  height: 245px;
  border: 45px solid #ffffff08;
}
#models .model-page-head::after {
  right: -75px;
  bottom: -150px;
  width: 290px;
  height: 290px;
  border: 1px solid #d5b68142;
  box-shadow: 0 0 0 35px #d5b6810a;
}
#models .model-head-copy { position: relative; z-index: 1; max-width: 760px; }
.model-head-kicker,
.model-overview-head > span,
.model-list-head > div > span {
  display: block;
  color: #d2b079;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  line-height: 1.3;
}
#models .model-page-head h2 {
  margin: 10px 0 7px;
  color: #fff;
  font-size: clamp(25px,2vw,31px);
  font-weight: 590;
  letter-spacing: -.8px;
  line-height: 1.25;
}
#models .model-page-head p {
  margin: 0;
  color: #d0ddd7;
  font-size: 11px;
  line-height: 1.65;
}
.model-head-status {
  position: relative;
  z-index: 1;
  min-width: 250px;
  padding: 15px 17px;
  border: 1px solid #ffffff24;
  border-radius: 11px;
  background: #ffffff10;
  backdrop-filter: blur(10px);
}
.model-head-status small {
  display: block;
  margin-bottom: 8px;
  color: #b9ccc4;
  font-size: 8px;
  font-weight: 650;
  letter-spacing: 1.4px;
}
.model-active-status {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #f4f8f5;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.45;
}
.model-active-status::before {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #93c1aa;
  box-shadow: 0 0 0 5px #93c1aa18;
  content: '';
}
.model-active-status.is-offline::before { background: #d9a36f; box-shadow: 0 0 0 5px #d9a36f1d; }

/* One-row operational summary */
.model-overview {
  display: grid;
  grid-template-columns: 150px minmax(0,1fr) minmax(245px,310px);
  min-width: 0;
  align-items: stretch;
  margin-bottom: 16px;
  border: 1px solid var(--model-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 16px #26382e07;
  overflow: hidden;
}
.model-overview-head {
  display: flex;
  justify-content: center;
  flex-direction: column;
  padding: 17px 20px;
  border-right: 1px solid var(--model-line);
  background: linear-gradient(145deg,#f4f2ec,#faf9f5);
}
.model-overview-head > span { color: var(--model-gold); }
.model-overview-head h3 {
  margin: 7px 0 0;
  color: var(--model-ink);
  font-size: 15px;
  font-weight: 620;
  letter-spacing: -.3px;
}
.model-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); min-width: 0; }
.model-summary article {
  position: relative;
  display: flex;
  min-width: 0;
  justify-content: center;
  flex-direction: column;
  padding: 16px 20px;
  border-right: 1px solid #e8ede9;
}
.model-summary article > span { color: var(--model-text); font-size: 9px; font-weight: 650; }
.model-summary article strong {
  display: block;
  max-width: 100%;
  margin: 7px 0 3px;
  overflow: hidden;
  color: var(--model-green-dark);
  font-size: 25px;
  font-weight: 560;
  letter-spacing: -1px;
  line-height: 1.05;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.model-summary article:nth-child(3) strong { font-size: 13px; letter-spacing: -.2px; line-height: 1.35; }
.model-summary article small { display: block; color: var(--model-faint); font-size: 8px; }
.model-security-note {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 18px;
  background: var(--model-green-soft);
}
.model-security-note > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #91aa9d;
  border-radius: 50%;
  color: var(--model-green);
  font-size: 14px;
}
.model-security-note p,
.model-security-note strong,
.model-security-note small { display: block; margin: 0; }
.model-security-note strong { color: var(--model-green-dark); font-size: 10px; font-weight: 700; }
.model-security-note small { margin-top: 3px; color: #6e8177; font-size: 8px; line-height: 1.55; }

.asr-config-card { position:relative; min-width:0; padding:0; border:1px solid #dbe5df; border-radius:18px; background:#fff; box-shadow:0 10px 34px #26382e0a; overflow:hidden; }
.asr-config-card::before { position:absolute; top:0; right:0; left:0; height:4px; background:linear-gradient(90deg,#3d675a,#82a391); content:''; }
.provider-card-tikhub::before { background:linear-gradient(90deg,#b7874d,#d7b077); }
.provider-card-head { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:start; gap:14px; padding:24px 24px 17px; background:linear-gradient(145deg,#fbfdfb,#f4f8f5); }
.provider-card-tikhub .provider-card-head { background:linear-gradient(145deg,#fffdfa,#f8f5ee); }
.provider-icon { display:flex; width:44px; height:44px; align-items:center; justify-content:center; gap:3px; border:1px solid #bfd0c6; border-radius:13px; background:#fff; box-shadow:0 6px 18px #37594e12; color:#476d60; }
.provider-icon i { width:3px; border-radius:4px; background:currentColor; }
.provider-icon i:nth-child(1),.provider-icon i:nth-child(5) { height:10px; opacity:.55; }
.provider-icon i:nth-child(2),.provider-icon i:nth-child(4) { height:20px; opacity:.75; }
.provider-icon i:nth-child(3) { height:28px; }
.provider-icon-play { border-color:#e5d3b8; color:#a67c48; font-size:14px; text-indent:2px; }
.asr-config-copy { min-width:0; }
.asr-config-copy>span { color:var(--model-gold); font-size:8px; font-weight:750; letter-spacing:2px; }
.asr-config-copy h3 { margin:5px 0 5px; color:var(--model-ink); font-size:18px; letter-spacing:-.25px; }
.asr-config-copy p { max-width:490px; margin:0; color:var(--model-muted); font-size:10px; line-height:1.65; }
.provider-status { display:inline-flex; min-height:25px; align-items:center; gap:6px; padding:5px 9px; border:1px solid #ecd1ca; border-radius:999px; background:#fff8f6; color:#a25f58; font-size:8px; line-height:1.25; white-space:nowrap; }
.provider-status::before { width:6px; height:6px; border-radius:50%; background:currentColor; content:''; box-shadow:0 0 0 3px currentColor; opacity:.65; }
.provider-status.ready { border-color:#c6ddd1; background:#f1f8f4; color:#3d705c; }
.provider-status.error { border-color:#ecd1ca; background:#fff8f6; color:#a25f58; }
.provider-facts { display:flex; flex-wrap:wrap; gap:7px; padding:0 24px 18px; border-bottom:1px solid #e8edea; background:linear-gradient(145deg,#fbfdfb,#f4f8f5); }
.provider-card-tikhub .provider-facts { background:linear-gradient(145deg,#fffdfa,#f8f5ee); }
.provider-facts span { padding:5px 8px; border:1px solid #dde7e1; border-radius:6px; background:#ffffffc7; color:#63786d; font-size:8px; }
.provider-card-tikhub .provider-facts span { border-color:#eadfce; color:#876b49; }
.asr-config-form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; padding:21px 24px 23px; }
.asr-config-form .wide { grid-column:1/-1; }
#asrModelHint { margin:0; color:var(--model-muted); font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
#asrEnabledSwitch label { flex-direction:row; align-items:center; }
#asrEnabledSwitch small { display:block; margin-top:6px; color:var(--model-muted); font-size:10px; line-height:1.6; }
.asr-routing-summary { margin:0 0 14px; padding:12px 16px; border:1px solid var(--model-line); border-radius:10px; background:#f7faf8; color:var(--model-muted); font-size:11px; line-height:1.7; }
.model-row-status .asr-role-badge { margin-bottom:4px; }
.asr-config-form label { display:flex; flex-direction:column; gap:7px; color:var(--model-text); font-size:10px; font-weight:680; }
.asr-config-form label small { margin-left:5px; color:#91a096; font-size:8px; font-weight:500; }
.asr-config-form input[type=url],.asr-config-form input[type=password],.asr-config-form textarea,.provider-test-controls input { box-sizing:border-box; width:100%; min-height:42px; padding:10px 12px; border:1px solid var(--model-line); border-radius:9px; background:#fcfdfc; color:var(--model-ink); font:inherit; line-height:1.5; resize:vertical; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease; }
.asr-config-form input:focus,.asr-config-form textarea:focus { border-color:#87a296; outline:0; box-shadow:0 0 0 3px #456e6212; }
.asr-config-switches { display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.asr-config-switches label { display:inline-flex; min-height:32px; align-items:center; flex-direction:row; gap:7px; padding:6px 10px; border:1px solid #dfe8e2; border-radius:8px; background:#f8faf9; color:#557065; }
.asr-config-switches input { accent-color:var(--model-green); }
.provider-test-panel { padding:14px; border:1px solid #dfe8e3; border-radius:12px; background:linear-gradient(135deg,#f6f9f7,#fbfcfb); }
.provider-card-tikhub .provider-test-panel { border-color:#eadfce; background:linear-gradient(135deg,#fbf8f3,#fffdfa); }
.provider-test-panel header { display:flex; align-items:flex-end; justify-content:space-between; gap:12px; margin-bottom:10px; }
.provider-test-panel header div { display:grid; gap:3px; }
.provider-test-panel header span { color:#87988f; font-size:7px; font-weight:750; letter-spacing:1.5px; }
.provider-test-panel header strong { color:var(--model-green-dark); font-size:11px; }
.provider-test-panel header small { color:#89978f; font-size:8px; text-align:right; }
.provider-test-controls { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; }
.provider-test-controls input { min-width:0; min-height:38px; background:#fff; font-size:10px; }
.provider-test-controls input:focus { border-color:#87a296; outline:0; box-shadow:0 0 0 3px #456e6212; }
.provider-test-controls button { min-height:38px; padding:8px 13px; border-color:#9eb4a9; background:#fff; color:var(--model-green-dark); white-space:nowrap; }
.provider-test-controls button:disabled { cursor:not-allowed; opacity:.48; }
.provider-test-result { min-height:16px; margin:8px 1px 0; color:#788b81; font-size:8px; line-height:1.55; overflow-wrap:anywhere; white-space:pre-line; }
.provider-test-result.success { color:#39705a; }
.provider-test-result.error { color:#a25f58; }
.asr-config-actions { display:flex; align-items:center; justify-content:space-between; gap:12px; padding-top:2px; }
.asr-config-actions span { color:var(--model-muted); font-size:9px; }
.asr-config-actions button { min-height:40px; padding-right:17px; padding-left:17px; white-space:nowrap; }
#models .provider-config-dialog { width:min(820px,calc(100vw - 32px)); }
#models .provider-config-dialog .asr-config-card { border:0; border-radius:0; box-shadow:none; }
#models .provider-config-dialog .provider-card-head { padding-right:72px; }
#models .provider-dialog-close { position:absolute; z-index:5; top:17px; right:18px; display:grid; width:32px; height:32px; padding:0; place-items:center; border:1px solid #d8e2dc; border-radius:9px; background:#ffffffd9; color:#64776d; font-size:20px; line-height:1; cursor:pointer; }
#models .provider-dialog-close:hover { border-color:#9eb4a9; color:var(--model-green-dark); }
body:has(#asrConfigDialog[open]),body:has(#tikhubConfigDialog[open]) { overflow:hidden; }

/* Recommended provider */
#models .model-preset {
  position: relative;
  display: flex;
  min-height: 74px;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
  margin-bottom: 16px;
  padding: 16px 20px;
  border: 1px solid #eadbc5;
  border-radius: 12px;
  background: linear-gradient(110deg,#faf5ec,#fffdf9 74%);
  overflow: hidden;
}
#models .model-preset::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: #b68e59; content: ''; }
#models .model-preset::after {
  position: absolute;
  right: 165px;
  width: 95px;
  height: 95px;
  border: 18px solid #b8935e0c;
  border-radius: 50%;
  content: '';
  pointer-events: none;
}
#models .model-preset > div { position: relative; z-index: 1; min-width: 0; }
#models .model-preset .badge { border: 1px solid #e5d5bd; border-radius: 5px; background: #fffaf2; color: #916c3e; font-size: 8px; letter-spacing: .5px; }
#models .model-preset strong { margin-left: 10px; color: #4f4537; font-size: 13px; font-weight: 700; }
#models .model-preset p { margin: 7px 0 0; color: #887865; font-size: 9px; line-height: 1.55; overflow-wrap: anywhere; }
#models .model-preset button { position: relative; z-index: 1; min-height: 34px; flex-shrink: 0; border-color: #dbcbb4; background: #fff; color: #775a36; }
#models .model-preset button:hover { border-color: #b99a70; background: #fffaf3; color: #624622; }

/* Configuration workspace */
#models .model-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 16px; align-items: stretch; }
/* Keep configuration in a native modal; the list owns the page. */
#models .model-dialog {
  width: min(760px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  overflow: auto;
  border: 1px solid var(--model-line);
  border-radius: 18px;
  background: #fff;
  color: var(--model-ink);
  box-shadow: 0 24px 90px #18392f38;
}
#models .model-dialog::backdrop { background: #1c302970; backdrop-filter: blur(4px); }
#models .model-dialog .model-layout { display: block; }
#models .model-dialog .model-form { border: 0; border-radius: 0; box-shadow: none; }
#models .model-dialog .model-preset { margin: 0 0 22px; padding: 15px 18px; }
#models .model-list-head { margin-top: 24px; align-items: center; }
#models #addModelButton { min-height: 42px; padding: 10px 20px; border-radius: 8px; background: var(--model-green-dark); border-color: var(--model-green-dark); font-size: 13px; white-space: nowrap; }
#models #addModelButton:hover { background: var(--model-green); }
body:has(#modelDialog[open]) { overflow: hidden; }
#models .model-form {
  padding: 25px 27px;
  border: 1px solid var(--model-line);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 18px #26382e07;
}
#models .model-form-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  margin-bottom: 21px;
  padding-bottom: 17px;
  border-bottom: 1px solid var(--model-line);
}
#models .model-form-head > span,
#models .model-notice header > span {
  display: grid;
  width: 31px;
  height: 31px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid #dbc9ad;
  border-radius: 50%;
  background: var(--model-gold-soft);
  color: #956f3e;
  font-size: 9px;
  font-weight: 700;
}
#models .model-form-head > div { min-width: 0; flex: 1; }
#models .model-form-head h3 { margin: 0 0 5px; color: var(--model-ink); font-size: 16px; font-weight: 620; letter-spacing: -.35px; }
#models .model-form-head p { margin: 0; color: var(--model-muted); font-size: 9px; line-height: 1.6; }
#models .model-form-head .ghost-button { min-height: 32px; padding: 7px 10px; font-size: 9px; }
#models .form-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 18px 16px; }
#models .form-grid label { color: var(--model-text); font-size: 10px; font-weight: 650; }
#models .form-grid input,
#models .form-grid select {
  height: 43px;
  padding: 0 12px;
  border: 1px solid var(--model-line);
  border-radius: 7px;
  background: #fafcfb;
  color: var(--model-ink);
  font-size: 11px;
  transition: border-color .18s,box-shadow .18s,background .18s;
}
#models .form-grid input:hover,
#models .form-grid select:hover { border-color: var(--model-line-strong); }
#models .form-grid input:focus,
#models .form-grid select:focus { border-color: #87a296; background: #fff; box-shadow: 0 0 0 3px #456e6212; }
#models .model-form-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 22px;
  padding-top: 17px;
  border-top: 1px solid var(--model-line);
}
#models .model-form-footer .consent { color: var(--model-text); font-size: 10px; }
#models .model-form-footer .consent input { accent-color: var(--model-green); }
.model-submit-actions { display: flex; gap: 8px; }
#models .model-submit-actions button { min-height: 38px; border-radius: 7px; font-size: 10px; }
#models .model-submit-actions .primary-button { border-color: var(--model-green-dark); background: var(--model-green-dark); }
#models .model-submit-actions .primary-button:hover { border-color: var(--model-green); background: var(--model-green); }
#models #modelFeedback { margin: 11px 0 0; font-size: 9px; }

#models .model-notice {
  padding: 21px 20px;
  border: 1px solid #cedbd3;
  border-radius: 13px;
  background: linear-gradient(155deg,#e7f0eb,#f7f8f4);
  color: var(--model-text);
}
#models .model-notice header { display: flex; align-items: center; gap: 11px; margin: 0 0 18px; padding: 0 0 15px; border-bottom: 1px solid #ccd9d1; }
#models .model-notice header div { min-width: 0; }
#models .model-notice header strong,
#models .model-notice header small { display: block; margin: 0; }
#models .model-notice header strong { color: var(--model-green-dark); font-size: 12px; font-weight: 700; }
#models .model-notice header small { margin-top: 3px; color: var(--model-muted); font-size: 8px; }
#models .model-notice > strong { display: block; color: #3a5b50; font-size: 9px; font-weight: 700; letter-spacing: .2px; }
#models .model-notice > p { margin: 5px 0 16px; color: #6c7f76; font-size: 9px; line-height: 1.75; }
#models .model-notice > p:last-child { margin-bottom: 0; }
#models .model-notice code { padding: 2px 4px; border-radius: 3px; background: #ffffffb3; color: #53685e; font-size: 8px; }

/* Saved engines */
.model-list-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; margin: 27px 0 12px; padding: 0 0 11px; border-bottom: 1px solid var(--model-line); }
.model-list-head > div > span { color: var(--model-gold); }
.model-list-head h3 { margin: 5px 0 2px; color: var(--model-ink); font-size: 16px; font-weight: 620; letter-spacing: -.35px; }
.model-list-head small,
.model-list-head p { margin: 0; color: var(--model-muted); font-size: 9px; line-height: 1.5; }
.model-list-head p { text-align: right; }
#models .model-list { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,320px),1fr)); gap: 13px; }
#models .model-card {
  position: relative;
  min-height: 218px;
  padding: 19px;
  border: 1px solid var(--model-line);
  border-radius: 11px;
  background: #fff;
  box-shadow: 0 3px 11px #27352c05;
  overflow: hidden;
  transition: border-color .18s,box-shadow .18s,transform .18s;
}
#models .model-card::before { position: absolute; top: 0; bottom: 0; left: 0; width: 4px; background: #cab58f; content: ''; opacity: .75; }
#models .model-card:hover { border-color: #bdcbc2; box-shadow: 0 11px 25px #2d40330d; transform: translateY(-2px); }
#models .model-card.active { border-color: #8ba699; background: linear-gradient(145deg,#fff,#f4f9f6); box-shadow: inset 3px 0 var(--model-green),0 7px 20px #2f51480c; }
#models .model-card.active::before { background: var(--model-green); opacity: 1; }
#models .model-card-top,
#models .model-card-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
#models .model-card .badge { border: 1px solid #d7e4dc; border-radius: 5px; background: var(--model-green-soft); color: #507164; font-size: 8px; }
#models .model-card .status { color: var(--model-muted); font-size: 8px; }
#models .model-card h3 { margin: 14px 0 6px; color: var(--model-ink); font-size: 14px; font-weight: 650; }
#models .model-card > p { margin: 0; color: var(--model-muted); font-size: 9px; line-height: 1.7; overflow-wrap: anywhere; }
#models .model-card-meta { display: flex; flex-wrap: wrap; gap: 5px; margin: 14px 0; }
#models .model-card-meta span { padding: 5px 7px; border-radius: 5px; background: #f0f4f1; color: var(--model-text); font-size: 8px; }
#models .model-card-actions { justify-content: flex-end; padding-top: 13px; border-top: 1px solid #e5ebe7; }
#models .model-card-actions button { min-height: 32px; padding: 7px 10px; border-radius: 6px; font-size: 9px; }
#models .model-card-actions .small-button:not(.secondary) { border-color: var(--model-green-dark); background: var(--model-green-dark); }
#models .model-test-feedback { margin: 10px 0 0 !important; padding: 8px 10px; border-radius: 5px; background: #f3f6f4; color: #6d7f76 !important; font-size: 8px !important; line-height: 1.55 !important; }
#models .model-test-feedback.error { border-left: 2px solid #a25f58; background: #fff7f6; color: #a25f58 !important; }

@media (max-width:1180px) {
  .model-overview { grid-template-columns: 135px minmax(0,1fr); }
  .model-security-note { grid-column: 1/-1; border-top: 1px solid var(--model-line); }
  #models .model-layout { grid-template-columns: minmax(0,1fr) 270px; }
}
@media (max-width:900px) {
  #models .model-page-head { min-height: 136px; }
  .model-overview { grid-template-columns: 1fr; }
  .model-overview-head { border-right: 0; border-bottom: 1px solid var(--model-line); }
  #models .model-layout { grid-template-columns: 1fr; }
  #models .model-notice { display: grid; grid-template-columns: auto 1fr; gap: 8px 15px; }
  #models .model-notice header { grid-column: 1/-1; }
  #models .model-notice > p { margin: 0; }
  #models .model-notice > strong { padding-top: 2px; }
}
@media (max-width:720px) {
  #models .model-page-head { min-height: 0; align-items: stretch; flex-direction: column; padding: 24px 22px; }
  .model-head-status { min-width: 0; }
  .model-summary { grid-template-columns: 1fr; }
  .model-summary article { border-right: 0; border-bottom: 1px solid #e8ede9; }
  .model-summary article:last-child { border-bottom: 0; }
  #models .model-preset { align-items: flex-start; flex-direction: column; padding: 17px 18px; }
  #models .model-preset::after { right: -20px; }
  #models .model-preset strong { display: inline; }
  #models .model-preset button { width: 100%; }
  #models .model-form { padding: 21px; }
  #models .form-grid { grid-template-columns: 1fr; }
  #models .form-grid .wide { grid-column: auto; }
  #models .model-form-head,
  #models .model-form-footer { align-items: flex-start; flex-wrap: wrap; }
  #models .model-form-footer { flex-direction: column; }
  .model-submit-actions { width: 100%; }
  .model-submit-actions button { flex: 1; }
  #models .model-notice { display: block; }
  #models .model-notice > p { margin: 5px 0 15px; }
  .model-list-head { align-items: flex-start; flex-direction: column; gap: 7px; }
  .model-list-head p { text-align: left; }
  #models .model-list { grid-template-columns: 1fr; }
  .provider-card-head { grid-template-columns:40px minmax(0,1fr); padding:21px 18px 15px; }
  .provider-icon { width:38px; height:38px; }
  .provider-status { grid-column:2; justify-self:start; }
  .provider-facts { padding:0 18px 16px; }
  .asr-config-form { grid-template-columns:1fr; }
  .asr-config-form { padding:18px; }
  .provider-test-panel header { align-items:flex-start; flex-direction:column; }
  .provider-test-panel header small { text-align:left; }
  .provider-test-controls { grid-template-columns:1fr; }
  .asr-config-actions { align-items:stretch; flex-direction:column; }
  .asr-config-actions span { text-align:left; }
  .asr-config-actions button { width:100%; }
}
@media (prefers-reduced-motion:reduce) {
  #models *,#models *::before,#models *::after { transition: none !important; }
}

/* Model and provider directory. */
#models .model-directory {
  border: 1px solid var(--model-line);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 10px 34px #243a3009;
  overflow: hidden;
}
#models .model-list-tools {
  display: flex;
  min-height: 78px;
  align-items: flex-end;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #e8ede9;
  background: linear-gradient(180deg,#fbfcfb 0%,#f7f9f7 100%);
}
#models .model-list-tools label { display:flex; align-items:flex-start; flex-direction:column; gap:7px; color:var(--model-text); font-size:10px; font-weight:680; letter-spacing:.15px; white-space:nowrap; }
#models .model-search { flex:1; max-width:560px; }
#models .model-search-control { position:relative; display:flex; width:100%; align-items:center; }
#models .model-search-control > i { position:absolute; z-index:1; left:13px; width:13px; height:13px; border:1.7px solid #829188; border-radius:50%; pointer-events:none; }
#models .model-search-control > i::after { position:absolute; right:-4px; bottom:-3px; width:5px; height:1.7px; border-radius:1px; background:#829188; content:''; transform:rotate(45deg); transform-origin:left center; }
#models .model-list-tools input,
#models .model-list-tools select { box-sizing:border-box; height:40px; margin:0; border:1px solid #d7e0da; border-radius:9px; background:#fff; color:var(--model-ink); font-size:12px; transition:border-color .18s ease,box-shadow .18s ease; }
#models .model-list-tools input { width:100%; min-width:0; padding:8px 13px 8px 39px; }
#models .model-list-tools select { width:138px; padding:7px 32px 7px 11px; }
#models .model-list-tools input:focus,
#models .model-list-tools select:focus { border-color:#8ca79a; box-shadow:0 0 0 3px #315a4d0c; outline:none; }
#modelListCount { margin:0 0 11px auto; color:var(--model-muted); font-size:11px; white-space:nowrap; }
#models .model-directory-columns {
  display:grid;
  grid-template-columns:minmax(280px,1fr) 120px minmax(0,240px) minmax(min-content,auto);
  gap:18px;
  padding:11px 20px 10px;
  border-bottom:1px solid #edf1ee;
  background:#fff;
  color:#919c96;
  font-size:9px;
  font-weight:720;
  letter-spacing:.8px;
  text-transform:uppercase;
}
#models .model-directory-columns span:last-child { text-align:right; }
#models .model-list { display:flex; flex-direction:column; gap:0; padding:0 12px 12px; }
#models .model-row {
  position:relative;
  display:grid;
  grid-template-columns:minmax(280px,1fr) 120px minmax(0,240px) minmax(min-content,auto);
  align-items:center;
  gap:18px;
  min-width:0;
  min-height:92px;
  padding:14px 8px;
  border:0;
  border-bottom:1px solid #edf1ee;
  background:#fff;
  transition:background .18s ease,box-shadow .18s ease,transform .18s ease;
}
#models .model-row:last-child { border-bottom:0; }
#models .model-row::before { position:absolute; top:16px; bottom:16px; left:-12px; width:3px; border-radius:0 3px 3px 0; background:transparent; content:''; transition:background .18s ease; }
#models .model-row:hover { z-index:1; border-radius:10px; background:#f8faf8; box-shadow:0 8px 24px #273e3409; }
#models .model-row.active { border-color:#d9e5de; border-radius:10px; background:linear-gradient(90deg,#f1f7f3 0%,#fbfdfb 45%,#fff 100%); }
#models .model-row.active::before { background:var(--model-green); }
#models .model-row.service-row { background:linear-gradient(90deg,#fbfdfb,#fff 48%); }
#models .model-row.service-row::before { background:#9ab5a8; }
#models .model-row.service-row[data-provider-card="tikhub"] { background:linear-gradient(90deg,#fffaf4,#fff 48%); }
#models .model-row.service-row[data-provider-card="tikhub"]::before { background:#c79a5e; }
#models .model-row.service-row:not(.service-ready)::before { background:#c9d1cc; }
#models .model-row-main { display:flex; min-width:0; align-items:center; gap:13px; }
#models .model-row-icon { position:relative; display:flex; width:42px; height:42px; flex:0 0 auto; align-items:center; justify-content:center; gap:3px; border:1px solid #cbd9d1; border-radius:12px; background:#edf4f0; color:#41695b; box-shadow:inset 0 0 0 1px #ffffff80; }
#models .model-row-icon.model i { width:4px; height:4px; border-radius:50%; background:currentColor; box-shadow:0 8px currentColor,8px 0 currentColor,8px 8px currentColor; }
#models .model-row-icon.model i:nth-child(2) { transform:translate(-4px,-4px); opacity:.78; }
#models .model-row-icon.model i:nth-child(3) { display:none; }
#models .model-row-icon.audio i { width:3px; height:10px; border-radius:4px; background:currentColor; }
#models .model-row-icon.audio i:nth-child(2) { height:22px; }
#models .model-row-icon.video { border-color:#ead9be; background:#fbf2e5; color:#a57943; }
#models .model-row-icon.video i { width:0; height:0; margin-left:3px; border-top:7px solid transparent; border-bottom:7px solid transparent; border-left:11px solid currentColor; }
#models .model-row-copy { min-width:0; }
#models .model-row-kicker { display:block; margin-bottom:3px; color:#89968f; font-size:8px; font-weight:730; letter-spacing:1px; line-height:1.2; }
#models .model-row h3 { margin:0 0 5px; overflow:hidden; color:var(--model-ink); font-size:14px; font-weight:680; letter-spacing:-.15px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; }
#models .model-row-main p { display:flex; min-width:0; align-items:center; gap:7px; margin:0; overflow:hidden; color:var(--model-muted); font-size:10px; line-height:1.35; white-space:nowrap; }
#models .model-row-main p strong { flex:0 1 auto; overflow:hidden; color:#65766e; font-weight:590; text-overflow:ellipsis; }
#models .model-row-main p span { position:relative; flex:1; overflow:hidden; padding-left:9px; text-overflow:ellipsis; }
#models .model-row-main p span::before { position:absolute; top:50%; left:0; width:3px; height:3px; border-radius:50%; background:#b1bbb5; content:''; transform:translateY(-50%); }
#models .model-row-status { display:flex; align-items:flex-start; flex-direction:column; gap:7px; font-size:11px; color:var(--model-text); }
#models .model-row-status small { position:relative; padding-left:12px; color:var(--model-muted); font-size:9px; }
#models .model-row-status small::before { position:absolute; top:50%; left:1px; width:5px; height:5px; border-radius:50%; background:#a7b4ad; content:''; transform:translateY(-50%); }
#models .model-row .badge { display:inline-flex; align-items:center; gap:6px; padding:5px 9px; border:1px solid #dfe5e1; border-radius:999px; background:#f4f6f5; color:#66756e; font-size:9px; font-weight:680; line-height:1; }
#models .model-row .badge::before { width:5px; height:5px; border-radius:50%; background:#9aa69f; content:''; }
#models .model-row .badge.current { border-color:#cfe0d6; background:#eaf4ee; color:#396950; }
#models .model-row .badge.current::before { background:#59906f; box-shadow:0 0 0 3px #5e98731a; }
#models .model-row-params { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
#models .model-row-fact { display:flex; min-width:0; flex-direction:column; gap:4px; padding:8px 9px; border:1px solid #e7ece9; border-radius:8px; background:#fafbfa; }
#models .model-row-fact small { color:#98a29d; font-size:8px; font-weight:650; line-height:1.2; }
#models .model-row-fact strong { overflow:hidden; color:#53655d; font-size:10px; font-weight:640; line-height:1.35; text-overflow:ellipsis; white-space:nowrap; }
#models .model-row-actions { display:flex; align-items:center; flex-wrap:nowrap; justify-content:flex-end; gap:6px; }
#models .model-row-actions button { min-height:32px; padding:6px 10px; border-radius:7px; font-size:10px; font-weight:620; white-space:nowrap; }
#models .model-row-actions .model-row-primary { border-color:#b9cbc1; background:#eef4f0; color:#345d4f; }
#models .model-row-actions .model-row-primary:hover { border-color:#8faa9b; background:#e3eee8; }
#models .model-row-actions .model-row-activate { border-color:var(--model-green-dark); background:var(--model-green-dark); color:#fff; }
#models .model-row-actions .model-delete { margin-left:2px; border-color:transparent; background:transparent; color:#a66a63; }
#models .model-row-actions .model-delete:hover { border-color:#ead7d3; background:#fff7f6; color:#934f47; }
#models .model-row-actions button:disabled { opacity:.38; cursor:not-allowed; }
#models .model-row .model-test-feedback { grid-column:1/-1; margin:-2px 0 0!important; padding:8px 11px; border-radius:7px; background:#f1f6f3; color:#557164!important; font-size:10px!important; }
#models .model-empty { margin:12px 0 0; padding:38px 20px; border:1px dashed var(--model-line-strong); border-radius:11px; background:#fbfcfb; color:var(--model-muted); text-align:center; font-size:12px; }
#models .model-detail-dialog { width:min(600px,calc(100vw - 32px)); padding:24px; }
#models .model-detail-dialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; padding-bottom:16px; border-bottom:1px solid var(--model-line); }
#models .model-detail-dialog h3 { margin:0; font-size:18px; }
#models .model-detail-dialog dl { margin:16px 0 0; }
#models .model-detail-dialog dl>div { display:grid; grid-template-columns:110px minmax(0,1fr); gap:12px; padding:10px 0; font-size:13px; }
#models .model-detail-dialog dt { color:var(--model-muted); }
#models .model-detail-dialog dd { margin:0; overflow-wrap:anywhere; }
body:has(#modelDetailDialog[open]) { overflow:hidden; }
@media(max-width:1350px) {
  #models .model-directory-columns,
  #models .model-row { grid-template-columns:minmax(260px,1fr) 120px minmax(260px,auto); gap:16px; }
  #models .model-directory-columns span:nth-child(3) { display:none; }
  #models .model-row-params { display:none; }
}
@media(max-width:900px) {
  #models .model-directory-columns { display:none; }
  #models .model-row { grid-template-columns:minmax(230px,1fr) auto; }
  #models .model-row-actions { grid-column:1/-1; justify-content:flex-start; padding-left:55px; }
}
@media(max-width:720px) {
  #models .model-directory { border-radius:13px; }
  #models .model-list-tools { flex-wrap:wrap; }
  #models .model-search { max-width:none; flex-basis:100%; }
  #models .model-filter { flex:1; }
  #models .model-filter select { width:100%; }
  #modelListCount { margin:0 0 11px; }
  #models .model-list { padding:0 10px 10px; }
  #models .model-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; min-height:0; padding:15px 4px; }
  #models .model-row::before { left:-10px; }
  #models .model-row-icon { width:38px; height:38px; border-radius:10px; }
  #models .model-row-main p span { display:none; }
  #models .model-row-actions { padding-left:51px; overflow-x:auto; justify-content:flex-start; scrollbar-width:none; }
  #models .model-row-actions::-webkit-scrollbar { display:none; }
}
@media(max-width:460px) {
  #models .model-list-tools { align-items:stretch; }
  #models .model-filter { flex-basis:100%; }
  #modelListCount { margin:0; }
  #models .model-row { grid-template-columns:1fr; }
  #models .model-row-status { padding-left:51px; }
  #models .model-row-actions { grid-column:1; }
}