/* Overlay card forms: settings rows, hosts, stored files, /art, connectors; reduced motion. */
#card .toggle, #card .setting-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--fg);
  font-size: 14px;
}
#card .setting-row { align-items: center; justify-content: space-between; }
#card .toggle { cursor: pointer; }
#card .toggle input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; flex: none; }
#card .toggle > span, #card .setting-row > span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#card .desc { color: var(--muted); font-size: 13px; word-break: break-word; }
#card .setting-row button {
  flex: none;
  padding: 7px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: transparent;
  cursor: pointer;
}
#card .setting-row button:hover:not(:disabled) { background: var(--surface-2); }
#card .setting-row button:disabled { opacity: 0.4; cursor: default; }
#card .host-list { list-style: none; margin: 0; padding: 0; max-height: 160px; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; }
#card .host-list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 6px 6px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 14px; color: var(--fg); }
#card .host-list li > span { min-width: 0; word-break: break-all; }
#card .host-list li.empty { color: var(--muted); padding: 8px 14px; }
#card .host-list button { flex: none; padding: 5px 10px; border-radius: 8px; border: 1px solid var(--border); background: transparent; cursor: pointer; }
#card .host-list button:hover { color: var(--danger); border-color: var(--danger); }
#card.wide-form { width: min(600px, 100%); }
/* /art: the overlay goes see-through so the corner art can be judged as it will look */
#overlay.see-through { background: transparent; backdrop-filter: none; }
#card.art { width: min(520px, 100%); gap: 10px; padding: 14px 16px; }
#card.art h2 { margin: 0; }
#card.art .sub { margin: 0; }
#card.art .set-group { gap: 4px; }
/* /settings: grouped rows in one panel, themed selects */
#card.settings { width: min(1040px, 100%); gap: 20px; padding: 28px; }
#card.conn-wide { width: min(1600px, 100%); gap: 20px; padding: 28px; }
#card .set-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
#card .set-col { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
/* The last section of a column grows so the columns end level. */
#card.settings .set-cols { align-items: stretch; }
#card.settings .set-col > .set-group:last-child { flex: 1; min-height: 0; }
/* /settings: when General is the shorter column, its rows share the space left. Library stays as it is, as a guest's column is far shorter. */
#card.settings .set-col:first-child > .set-group:last-child > .set-box { flex: 1; }
#card.settings .set-col:first-child > .set-group:last-child > .set-box > * { flex: 1; }
@media (max-width: 820px) {
  #card .set-cols { grid-template-columns: 1fr; }
}
#card .set-group { display: flex; flex-direction: column; gap: 8px; }
#card .set-group h3 { margin: 0 2px; font: 600 12px/1.3 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
#card .set-group > .desc { margin: 0 2px; }
#card .set-box { display: flex; flex-direction: column; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
#card .set-box > .toggle, #card .set-box > .setting-row { border: 0; border-radius: 0; background: var(--bg); padding: 14px 16px; }
#card .set-box > .setting-row:hover, #card .set-box > .toggle:hover { background: color-mix(in srgb, var(--surface-2) 60%, var(--bg)); }
#card.settings select, #card.settings input[type="number"], #card.art select {
  flex: none;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--surface);
  outline: 0;
  cursor: pointer;
}
#card.settings select, #card.art select {
  appearance: none;
  min-width: 160px;
  padding-right: 32px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
}
#card.settings input[type="number"] { width: 5em; cursor: text; }
#card.settings select:hover, #card.art select:hover, #card.art select:focus, #card.settings input[type="number"]:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
#card.settings select:focus, #card.settings input[type="number"]:focus { border-color: var(--accent); }
#card.settings .host-list li { background: var(--bg); }
#card.synonyms { width: min(760px, 100%); gap: 16px; padding: 28px; }
#card.synonyms input.filter { width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); outline: 0; }
#card.synonyms input.filter:focus { border-color: var(--accent); }
#card .syn-cmds { max-height: min(38vh, 340px); padding: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
#card .syn-cmds li { cursor: pointer; }
#card .syn-cmds li:hover { background: var(--surface-2); }
#card .syn-cmds .label { flex: none; min-width: 170px; font-family: var(--mono); font-size: 13px; }
#card .syn-cmds .detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#card .syn-chip { flex: none; padding: 1px 9px; border-radius: 999px; font: 500 12px/1.6 var(--mono); color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#card .syn-chip[hidden] { display: none; }
#card .syn-edit { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
#card .syn-edit[hidden] { display: none; }
#card .syn-arrow { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 13px; white-space: nowrap; }
#card .syn-arrow code { font-family: var(--mono); color: var(--fg); }
#card .syn-edit input.text { flex: 1; min-width: 0; font-family: var(--mono); }
#card .syn-edit .actions { flex: none; flex-wrap: nowrap; }
#card .syn-edit .actions button { white-space: nowrap; }
#card .syn-clear[hidden] { display: none; }
#card .art-ctl[hidden] { display: none; }
#card .art-grid { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 560px) { #card .art-grid { grid-template-columns: 1fr 1fr; } }
#card .art-lbl { display: flex; justify-content: space-between; gap: 8px; }
#card .art-val { font-weight: 500; color: var(--fg); font-variant-numeric: tabular-nums; }
#card .art-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
#card .art-css { min-height: 64px; font-family: var(--mono); font-size: 13px; }
#card .conn-fields { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; min-height: 0; padding: 2px 4px 2px 0; }
#card .conn-fields .desc { font-size: 12px; }
#card select.text {
  appearance: none;
  width: 100%;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background-color: var(--bg);
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(100% - 17px) 52%, calc(100% - 12px) 52%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  outline: 0;
  cursor: pointer;
}
#card select.text:hover { border-color: color-mix(in srgb, var(--accent) 50%, var(--border)); }
#card select.text:focus { border-color: var(--accent); }
/* SQLite connector: its databases as a list */
#card.db-form { width: min(760px, 100%); }
#card .db-section { display: flex; flex-direction: column; gap: 10px; padding: 14px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; }
#card .db-head { display: flex; align-items: center; gap: 8px; font-size: 14px; }
#card .db-count { min-width: 22px; padding: 1px 8px; border-radius: 999px; text-align: center; font: 500 12px/1.6 var(--font); color: var(--muted); background: var(--bg); border: 1px solid var(--border); }
#card .db-list { max-height: min(46vh, 400px); gap: 8px; padding-right: 4px; }
#card .db-list li { padding: 10px 10px 10px 12px; gap: 12px; background: var(--bg); transition: border-color 0.15s ease; }
#card .db-list li:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
#card .db-list li.empty { justify-content: center; padding: 18px; }
#card .db-icon { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#card .db-list li > .db-item { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; word-break: normal; }
#card .db-item > strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#card .db-item .desc { font: 12px var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#card .db-list button { color: var(--muted); }
#card .db-list button:hover, #card .db-list button:focus-visible { color: var(--danger); border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent); }
#card .db-list li.db-confirm { border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); background: color-mix(in srgb, var(--danger) 6%, var(--bg)); animation: db-confirm-in 0.15s ease; }
#card .db-confirm .db-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
#card .db-confirm .db-item { font-size: 13px; line-height: 1.4; }
#card .db-confirm-btns { display: flex; gap: 6px; flex: none; }
#card .db-list .db-confirm-btns [data-db-keep]:hover, #card .db-list .db-confirm-btns [data-db-keep]:focus-visible { color: var(--fg); border-color: var(--fg); background: transparent; }
#card .db-list .db-confirm-btns .danger { color: #fff; border-color: var(--danger); background: var(--danger); }
#card .db-list .db-confirm-btns .danger:hover, #card .db-list .db-confirm-btns .danger:focus-visible { color: #fff; background: color-mix(in srgb, var(--danger) 85%, #000); }
@keyframes db-confirm-in { from { opacity: 0.4; } to { opacity: 1; } }
#card .db-add { display: flex; gap: 8px; }
#card .db-add input.text { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
#card .db-add button { flex: none; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
#card .db-add button:hover { border-color: var(--accent); }
@media (max-width: 520px) { #card .db-add { flex-wrap: wrap; } #card .db-add input.text { flex-basis: 100%; } }
#card .conn-state { font-size: 12px; color: var(--muted); margin-left: 6px; }
#card .conn-state.ok, #card .conn-ok { color: var(--accent); }
#card .conn-state.warn { color: var(--danger); }
#card .conn-btns { display: flex; gap: 6px; flex: none; }
/* Always-visible scrollbars: the system's overlay scrollbars hide until hovered, so a cut-off list gave no hint that it scrolls. */
#card, #card .conn-list { scrollbar-width: thin; scrollbar-color: var(--muted) transparent; }
#card .conn-list { max-height: 50vh; min-height: 96px; flex: 0 1 auto; padding: 0 6px 2px 0; }
#card .conn-list li { flex: none; }
#card .conn-list li > span:first-child { word-break: normal; }
#card .conn-list button:hover { color: var(--fg); border-color: var(--accent); }
#card .actions button.danger:hover { color: var(--danger); border-color: var(--danger); }
.actions button:focus-visible, .actions button:focus {
  outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  outline-offset: 2px;
}
kbd { font: 11px var(--mono); opacity: 0.7; margin-left: 4px; }
.foot { font-size: 12px; color: var(--muted); }
/* /theme: the built-in and the user's own themes on the left, other people's public ones on the right. */
#card.themes { width: min(1040px, 100%); }
#card .theme-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; min-height: 0; }
#card .theme-cols section { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#card .theme-cols h3 { margin: 0; font: 600 12px/1.4 var(--font); color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
#card .theme-cols .note { margin: 0; font-size: 13px; color: var(--muted); }
#card .theme-cols .list { max-height: 56vh; }
#card .theme-cols li { align-items: center; }
#card .theme-cols li .label { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#card .theme-cols li .detail:empty { display: none; }
#card .theme-cols li .by { overflow-wrap: anywhere; }
#card .theme-cols li .publish { flex: none; padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: var(--fg); font: inherit; font-size: 12px; cursor: pointer; }
#card .theme-cols li .publish.on { border-color: var(--accent); color: var(--accent); }
#card .theme-cols li .publish:hover:not(:disabled) { background: var(--surface); }
#card .theme-cols li .publish:disabled { opacity: 0.5; cursor: default; }
@media (max-width: 760px) { #card .theme-cols { grid-template-columns: 1fr; } }
/* /design-systems: the list on the left, the one picked edited on the right */
#card.design-systems { width: min(1100px, 100%); }
#card .ds-cols { display: grid; grid-template-columns: minmax(220px, 1fr) 2fr; gap: 20px; min-height: 0; align-items: start; }
#card .ds-side { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
#card .ds-list { max-height: 60vh; padding: 6px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; }
#card .ds-list li { cursor: pointer; }
#card .ds-list li:hover { background: var(--surface-2); }
#card .ds-list .label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#card .ds-list .name { font-weight: 500; }
#card .ds-selected { padding: 1px 7px; border-radius: 999px; background: var(--accent); color: var(--accent-fg); font-size: 11px; font-weight: 500; }
#card .ds-public { padding: 0 6px; border: 1px solid var(--accent); border-radius: 999px; color: var(--accent); font-size: 11px; font-weight: 500; }
#card .ds-list .ds-selected, #card .ds-list .ds-public { margin-left: 4px; vertical-align: 1px; }
#card .ds-current { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 12px; color: var(--muted); font-size: 13px; }
#card .ds-current.on { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, transparent); color: var(--fg); }
#card .ds-current .name { font-weight: 500; }
#card .ds-current .ds-chips { margin-left: auto; }
#card .ds-list .detail { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#card .ds-chips { display: flex; flex-wrap: wrap; gap: 3px; }
#card .ds-chips:empty { display: none; }
#card .ds-chip { width: 14px; height: 14px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--fg) 18%, transparent); }
#card .ds-edit .ds-chip { width: 20px; height: 20px; }
#card .ds-edit { display: flex; flex-direction: column; gap: 12px; min-width: 0; max-height: 64vh; overflow-y: auto; padding-right: 4px; }
#card .ds-edit[hidden], #card .ds-empty[hidden], #card .ds-list[hidden], #card .ds-current[hidden] { display: none; }
#card .ds-edit textarea { width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--fg); font: 12.5px/1.55 var(--mono); outline: 0; }
#card .ds-edit textarea:focus { border-color: var(--accent); }
#card .ds-edit .ds-foot { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 8px; border-top: 1px solid var(--border); background: var(--surface); }
#card .ds-edit .ds-delete { margin-right: auto; }
#card .ds-edit .ds-delete:hover { color: var(--danger); border-color: var(--danger); }
#card .ds-edit .actions button[hidden] { display: none; }
#card .ds-copy-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
#card .ds-copy-row[hidden] { display: none; }
#card .ds-copy-row label { flex: 1 1 220px; min-width: 0; }
#card.design-systems > .actions { margin-top: 14px; }
#card .ds-empty { grid-column: 1 / -1; margin: 0; padding: 28px 16px; text-align: center; color: var(--muted); border: 1px dashed var(--border); border-radius: 12px; }
@media (max-width: 760px) { #card .ds-cols { grid-template-columns: 1fr; } #card .ds-list { max-height: 30vh; } }
/* /speech reuses the rows below, in a column for listening and one for speaking; the disk used sits under them */
#card.soundfonts.speech { width: min(1080px, 100%); }
/* Heading, text and list share rows across the columns, so the lists start level however long the text runs. */
#card .sp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; }
#card .sp-cols > section { display: grid; grid-row: span 4; grid-template-rows: subgrid; align-content: start; min-width: 0; }
#card .sp-cols h3 { margin: 0; font-size: 15px; font-weight: 600; }
#card .sp-cols .sub { margin: 0; }
#card .sp-cols .sf-list { max-height: 52vh; }
#card .sp-cols .sf-list li { flex-wrap: wrap; }
#card .sp-cols .sf-list .label { flex: 1 1 200px; }
#card .sp-cols .sf-add { flex-wrap: wrap; align-self: start; }
#card .sp-cols .sf-add input.text { flex: 1 1 180px; }
#card .sp-disk { margin: 0; font-size: 13px; color: var(--muted); }
@media (max-width: 760px) { #card .sp-cols { grid-template-columns: 1fr; } #card .sp-cols > section + section { margin-top: 12px; } #card .sp-cols .sf-list { max-height: none; } }
/* /soundfonts: one row per font, its buttons (or download progress) on the right */
#card.soundfonts { width: min(820px, 100%); }
#card .sf-list { display: flex; flex-direction: column; gap: 6px; max-height: 58vh; }
#card .sf-list li { display: flex; align-items: center; gap: 14px; padding: 10px 12px 10px 14px; border: 1px solid var(--border); border-radius: 12px; }
#card .sf-list li.current { border-color: color-mix(in srgb, var(--accent) 55%, var(--border)); background: color-mix(in srgb, var(--accent) 5%, transparent); }
#card .sf-list .label { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
#card .sf-list .name { font-weight: 500; }
#card .sf-list .detail { color: var(--muted); font-size: 13px; }
#card .sf-list .meta { font-size: 12px; }
#card .sf-list .detail:empty { display: none; }
#card .sf-link { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; cursor: pointer; }
#card .sf-link:hover { text-decoration: underline; }
#card .sf-list .row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; flex: none; margin-left: auto; }
#card .sf-list .row-actions button { padding: 6px 12px; border-radius: 10px; border: 1px solid var(--border); background: transparent; cursor: pointer; white-space: nowrap; }
#card .sf-list .row-actions button:hover:not(:disabled) { border-color: var(--fg); }
#card .sf-list .row-actions button:disabled { opacity: 0.4; cursor: default; }
#card .sf-list .row-actions button.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-fg); }
#card .sf-list .row-actions .sf-danger:hover { color: var(--danger); border-color: var(--danger); }
#card .sf-badge { padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 500; color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }
#card .sf-progress { display: flex; align-items: center; gap: 8px; }
#card .sf-bar { width: 120px; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
#card .sf-bar > span { display: block; height: 100%; background: var(--accent); transition: width 0.2s; }
#card .sf-pct { min-width: 4ch; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
#card .sf-add { display: flex; gap: 8px; }
#card .sf-add input.text { flex: 1; min-width: 0; font-family: var(--mono); font-size: 13px; }
#card .sf-add button { flex: none; padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
#card .sf-add button:hover { border-color: var(--accent); }
@media (max-width: 620px) {
  #card .sf-list li { flex-wrap: wrap; }
  #card .sf-add { flex-wrap: wrap; }
  #card .sf-add input.text { flex-basis: 100%; }
}
#card .picker-extra { display: flex; flex-direction: column; gap: 6px; padding-top: 12px; border-top: 1px solid var(--border); }
/* /theme: the row that opens /art */
#card .art-open { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: transparent; text-align: left; cursor: pointer; transition: background 0.12s, border-color 0.12s; }
#card .art-open > svg:first-child { flex: none; width: 34px; height: 34px; padding: 8px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); }
#card .art-open > span { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
#card .art-open strong { font-size: 14px; }
#card .art-open small { font-size: 12px; color: var(--muted); }
#card .art-open > svg:last-child { flex: none; color: var(--muted); transition: transform 0.12s, color 0.12s; }
#card .art-open:hover { background: var(--surface-2); border-color: var(--accent); }
#card .art-open:hover > svg:last-child { color: var(--accent); transform: translateX(2px); }
#card .art-open:focus-visible { outline: 2px solid color-mix(in srgb, var(--accent) 55%, transparent); outline-offset: 2px; }

#card.art .art-slider { flex-direction: column; align-items: stretch; }
#card.art .art-slider > .art-lbl { flex-direction: row; justify-content: space-between; align-items: baseline; }
/* Each group is one row of two cells: show | corner, side | top or bottom, size | opacity. */
#card.art .set-box { display: grid; grid-template-columns: 1fr 1fr; }
#card.art .set-box > .setting-row, #card.art .set-box > .toggle { padding: 8px 12px; min-width: 0; }
#card.art .set-box select { min-width: 0; width: 100%; max-width: 150px; }
#card.art .art-slider { gap: 4px; }
#card.art .art-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
#card.art .set-box > .toggle { align-items: center; }
#card.art .art-sync-lbl { flex-direction: row; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); cursor: pointer; }
#card.art .art-sync-lbl input { margin: 0; accent-color: var(--accent); }
#card.art .art-css { min-height: 0; height: auto; }
@media (max-width: 420px) { #card.art .set-box { grid-template-columns: 1fr; } #card.art .set-box select { max-width: none; } }
/* /folders: roomier list */
#card.folders { width: min(640px, 100%); }
#card.folders > .desc { margin: -6px 2px 0; line-height: 1.5; }
#card.allowed-domains { width: min(600px, 100%); }
#card.allowed-domains .host-list { max-height: min(50vh, 380px); }
#card.folders .host-list { max-height: min(50vh, 380px); gap: 10px; }
#card.folders .host-list li { padding: 14px 14px 14px 18px; gap: 16px; }
#card.folders .host-list li.empty { padding: 18px; text-align: center; }
#card.folders .fo-item { display: flex; flex-direction: column; gap: 4px; }
#card.folders .actions { margin-top: 4px; }

/* Irreversible-delete warning (settings → Clear saved apps) */
#card .clear-warning { text-align: center; border: 2px solid var(--danger); border-radius: 10px; padding: 20px 16px; }
#card .clear-warning .warn-icon { font-size: 44px; line-height: 1; color: var(--danger); }
#card .clear-warning h2 { color: var(--danger); text-transform: uppercase; letter-spacing: 0.04em; }
#card .clear-warning .sub { color: var(--fg); font-weight: 600; }
#card .clear-warning .warn-ack { display: inline-flex; margin-top: 12px; text-align: left; }
#card .actions button.danger:disabled { opacity: 0.45; cursor: not-allowed; filter: none; }
#card .actions button.danger { background: var(--danger); border-color: var(--danger); color: #fff; font-weight: 700; }
#card .actions button.danger:hover { background: var(--danger); color: #fff; filter: brightness(0.9); }
/* A picture attached to the message, full size */
#card.picture { width: auto; max-width: min(1600px, 100%); }
#card.picture .full-image { min-height: 0; overflow: auto; display: grid; place-items: center; }
#card.picture .full-image img { display: block; max-width: 100%; max-height: calc(100vh - 220px); object-fit: contain; border-radius: 8px; }

/* Model > Test…: the system prompt to test and the request */
#card.prompt-test select, #card.prompt-test textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--bg);
  color: inherit;
  font: inherit;
  outline: 0;
}
#card.prompt-test textarea { resize: vertical; min-height: 76px; }
#card.prompt-test select:focus, #card.prompt-test textarea:focus { border-color: var(--accent); }