/* Shared fields: a restrained focus indicator and native keyboard behaviour. */
body :is(.input-group,.flow-field,.preset-toolbar) :is(input,textarea,select) {
  border:1px solid var(--line-strong); border-radius:9px; background-color:var(--input);
  color:var(--text); font:400 14px/1.5 var(--sans); min-height:42px;
}
body :is(.input-group,.flow-field,.preset-toolbar) :is(input,textarea,select):focus {
  outline:none; border-color:var(--text-soft); box-shadow:none;
}
body :is(.input-group,.flow-field,.preset-toolbar) :is(input,textarea,select):focus-visible {
  outline:1px solid var(--info); outline-offset:1px; border-color:var(--info); box-shadow:none;
}
body select {
  appearance:none; padding:10px 36px 10px 13px!important; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888b84' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14m-6-6 6 6 6-6'/%3E%3C/svg%3E");
  background-position:right 12px center; background-repeat:no-repeat;
}
@supports (appearance:base-select) {
  body select, body select::picker(select) { appearance:base-select; }
  body select { background-image:none; padding:10px 13px!important; align-items:center; gap:12px; }
  body select::picker-icon {
    content:""; flex:0 0 auto; width:14px; height:14px; background:var(--muted);
    -webkit-mask:var(--arrow-down-icon) center/14px 14px no-repeat;
    mask:var(--arrow-down-icon) center/14px 14px no-repeat;
    transition:transform .15s,background-color .15s;
  }
  body select:hover::picker-icon, body select:focus-visible::picker-icon { background:var(--text-soft); }
  body select:open::picker-icon { transform:rotate(180deg); }
  body select::picker(select) {
    background:var(--menu); color:var(--text); border:1px solid var(--line-strong);
    border-radius:10px; padding:5px; margin-top:6px; box-shadow:var(--shadow-menu);
    max-height:300px; overflow:auto; font:400 14px/1.5 var(--sans);
  }
  body select option { padding:10px 12px; border-radius:6px; gap:10px; white-space:normal; }
  body select option:hover, body select option:focus { background:var(--menu-hover); outline:none; }
  body select option:checked { background:var(--panel-strong); color:var(--text); }
  body select option::checkmark {
    content:""; flex:0 0 auto; width:16px; height:16px; background:var(--success);
    -webkit-mask:var(--check-icon) center/16px 16px no-repeat;
    mask:var(--check-icon) center/16px 16px no-repeat;
  }
}
.preset-browser { gap:18px; }
.preset-toolbar { display:grid; grid-template-columns:minmax(220px,1.5fr) minmax(180px,1fr) minmax(180px,1fr); gap:16px; padding:20px; background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:12px; align-items:end; }
.preset-toolbar label { display:block; font-size:12px; font-weight:500; color:var(--text-soft); margin-bottom:8px; }
.preset-toolbar .preset-search { width:auto; max-width:none; min-width:0; }
.preset-toolbar select,.preset-toolbar input { width:100%; min-width:0; }
.preset-search-field { position:relative; }
.preset-search-field > .icon { position:absolute; left:12px; top:13px; width:16px; height:16px; color:var(--muted); pointer-events:none; }
.preset-search-field input { padding:10px 12px 10px 36px!important; }
.preset-filter { min-width:0; }
.preset-reset { grid-column:1/-1; justify-self:start; font-size:12px; min-height:28px; padding:4px 8px; }
.preset-reset[hidden] { display:none; }
.preset-result-count { margin:0 0 14px; font:12px/1.5 var(--sans); color:var(--muted); }
.preset-browser .preset-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.preset-browser .start-card { display:flex; flex-direction:column; align-items:flex-start; gap:15px; padding:22px; min-height:240px; background:var(--bg-raised); border:1px solid var(--line-strong); border-radius:12px; transition:background .15s,border-color .15s; }
.preset-browser .start-card:hover { border-color:var(--muted); background:var(--surface-hover); }
.preset-browser .start-card-icon { width:34px; height:34px; border-radius:9px; background:var(--panel); border:1px solid var(--line); }
.preset-browser .start-card-copy { display:flex; flex-direction:column; gap:9px; flex:1; }
.preset-browser .start-card-copy strong { font-size:16px; line-height:1.35; font-weight:550; }
.preset-browser .start-card-copy small { max-width:none; color:var(--text-soft); font-size:13px; line-height:1.6; }
.preset-browser .preset-card-tags { margin-top:4px; display:flex; flex-wrap:wrap; gap:6px; }
.preset-browser .preset-card-tags > span { padding:3px 7px; border-radius:5px; background:var(--panel); color:var(--text-soft); font:11px/1.5 var(--sans); border:0; }
.preset-use { display:flex; align-items:center; gap:6px; font-size:12px; color:var(--text); margin-top:5px; }
.preset-use .icon { width:13px; height:13px; }
.new-agent-chooser { width:min(940px,100%); display:flex; flex-direction:column; overflow:hidden; }
.new-agent-chooser .modal-head { flex-shrink:0; padding:22px 24px; }
.new-agent-chooser .modal-head h2 { font-size:21px; }
.new-agent-chooser .modal-body { overflow-y:auto; padding:24px; }
.agent-chooser-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:5px; }
.agent-chooser-heading h3 { margin:0 0 7px; font-size:16px; font-weight:500; }
.agent-chooser-heading p { margin:0; font-size:13px; color:var(--text-soft); }
.agent-chooser-heading button { flex-shrink:0; }
.new-agent-chooser .preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.new-agent-chooser .preset-toolbar { grid-template-columns:1.25fr 1fr 1fr; gap:12px; padding:16px; }
.new-agent-chooser .preset-library { margin-top:0; }
.project-guides > h2 { font:500 19px/1.3 var(--headline); margin:0 0 10px; }
.project-guides > p { font-size:14px; color:var(--text-soft); }
.project-guides .project-guide { margin:12px 0; }
.sidebar-project-guides h3 { font-size:13px; font-weight:500; }
@media(max-width:1100px) { .preset-browser .preset-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .preset-toolbar { grid-template-columns:1fr 1fr; } .preset-toolbar .preset-search { grid-column:1/-1; } }
@media(max-width:600px) {
  .preset-toolbar,.new-agent-chooser .preset-toolbar { grid-template-columns:1fr; padding:16px; gap:12px; }
  .preset-browser .preset-grid { grid-template-columns:1fr; }
  .preset-browser .start-card { min-height:0; padding:20px; }
  .new-agent-chooser .modal-body { padding:16px; }
  .agent-chooser-heading { align-items:flex-start; flex-direction:column; }
  body :is(.input-group,.flow-field,.preset-toolbar) :is(input,textarea,select) { font-size:16px; }
}
@media(prefers-reduced-motion:reduce) { body select::picker-icon { transition:none; } }