/* "Cài đặt" page (public-ai-settings.js). Shared tokens from /theme.css only. */
.vs-page{max-width:920px}
.vs-gear{flex:none}
.nav .vs-gear{width:18px;height:18px}
.vs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.2rem}
.vs-head h1{margin:.3rem 0 0;outline:none}
.vs-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:1.3rem 1.4rem;margin:0 0 1.2rem;box-shadow:var(--shadow-1)}
.vs-card h2{font:600 20px/1.3 var(--font-display);margin:0 0 .4rem;display:flex;align-items:center;gap:.5rem;flex-wrap:wrap}
.vs-card>p,.vs-card-head p{margin:0 0 .8rem;max-width:44em;line-height:1.6}
.vs-tag{font:600 11px/1 var(--font-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:999px;padding:.3rem .55rem}
.vs-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:.6rem;margin:0 0 1rem;padding:0;list-style:none;counter-reset:vs}
.vs-steps li{counter-increment:vs;background:var(--sunken);border-radius:var(--r-md);padding:.65rem .8rem;font-size:13.5px;line-height:1.5;color:var(--ink-2)}
.vs-steps li::before{content:counter(vs);display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--accent);color:var(--surface);font:700 11px/1 var(--font-ui);margin-right:.45rem}
.vs-default{border-top:1px solid var(--line);padding-top:.9rem;margin-top:.2rem}
.vs-default .field{max-width:440px}
.vs-notice{margin:.6rem 0}
.vs-list{list-style:none;margin:.8rem 0 0;padding:0;border-top:1px solid var(--line)}
.vs-item{border-bottom:1px solid var(--line)}
.vs-item.open{background:var(--sunken);border-radius:var(--r-md);border-bottom-color:transparent;margin:.3rem 0}
.vs-row{display:grid;grid-template-columns:minmax(150px,1.1fr) auto minmax(0,1fr) auto;align-items:center;gap:.8rem;padding:.7rem .6rem}
.vs-name{display:grid;gap:.1rem;min-width:0}
.vs-name b{font-size:14.5px}
.vs-name small{font-size:12px;color:var(--muted)}
.vs-state{font-size:12px;font-weight:600;color:var(--muted);background:var(--sunken);border-radius:999px;padding:.25rem .6rem;white-space:nowrap}
.vs-state.on{color:var(--ok);background:var(--ok-soft)}
.vs-item.open .vs-state{background:var(--surface)}
.vs-summary{font:12.5px/1.4 ui-monospace,Consolas,'Cascadia Mono',monospace;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.vs-edit{padding:.2rem .9rem 1rem}
.vs-edit .field{margin-bottom:.7rem}
.vs-edit .stali-box{margin:.2rem 0 1rem}
.vs-keyrow{display:flex;flex-wrap:wrap;gap:.45rem;align-items:center;margin-top:.35rem}
.vs-keyrow input{flex:1 1 200px;min-width:0}
.vs-check{display:flex;align-items:center;gap:.5rem;font-size:13.5px;margin:.1rem 0 .9rem;cursor:pointer}
.vs-check small{color:var(--muted)}
.vs-msg{min-height:1.2em;margin:.4rem 0;font-size:13px;color:var(--ink-2)}
.vs-msg.bad{color:var(--bad)}
.vs-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.vs-actions>span{flex:1}
.vs-facts{margin:.2rem 0 1rem;padding-left:1.1rem;color:var(--ink-2);font-size:14px;line-height:1.65}
.vs-facts li{margin:.2rem 0}
.vs-facts b{color:var(--ink)}
.vs-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:760px){
  .vs-steps{grid-template-columns:1fr}
  .vs-row{grid-template-columns:1fr auto;row-gap:.35rem}
  .vs-state{justify-self:start;grid-column:1}
  .vs-summary{grid-column:1/-1}
  .vs-row .btn{grid-column:2;grid-row:1}
  .vs-card{padding:1rem}
  .vs-edit{padding:.2rem .5rem .9rem}
}