/* ========== 1. Design Tokens ========== */
:root{
  /* base */
  --bg:#f8f9fc;--surface:#fff;--surface2:#f1f3f9;--border:#d0d4e0;
  --text:#1f2537;--text-sub:#5f6b85;
  --accent:#5a4fc7;--accent2:#d44a8f;--green:#1f9c6e;--red:#e23c3c;
  /* chip palette - ★★★★★ テーマ変更はここだけ */
  --chip-a-bg:#e8e4ff;--chip-a-text:#4a3fb8;--chip-a-border:#c4b8ff;
  --chip-b-bg:#ffe4f0;--chip-b-text:#b23a70;--chip-b-border:#f8b7d8;
  --chip-cm-bg:#e0f5eb;--chip-cm-text:#1f9c6e;--chip-cm-border:#a8e6cc;
  --chip-neg-bg:#ffe7e7;--chip-neg-text:#b42318;--chip-neg-border:#f3b4b4;
  /* system */
  --radius-sm:6px;--radius:10px;--radius-lg:12px;--radius-full:9999px;
  --speed-fast:.15s;--speed:.2s;
  --shadow-sm:0 1px 3px rgba(0,0,0,.05);
  --shadow:0 2px 6px rgba(0,0,0,.04);
  --shadow-hover:0 6px 16px rgba(90,79,199,.15);
  --font-mono:'JetBrains Mono','Fira Mono',Consolas,monospace;
}

/* ========== 2. Reset ========== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{min-height:100vh;background:var(--bg);color:var(--text);font:14px/1.6 'Segoe UI','Noto Sans JP',sans-serif}
textarea::placeholder{color:#555}

/* ========== 3. 共通Form - :is()で将来のselect追加も1箇所でOK ========== */
:is(textarea,input,select,#characterTag){
  width:100%;padding:12px 14px;background:var(--surface2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text);font-family:var(--font-mono);font-size:.95em;line-height:1.7;
  transition:border-color var(--speed),box-shadow var(--speed)
}
:is(textarea,input,select,#characterTag):focus{
  outline:0;border-color:var(--accent);box-shadow:0 0 0 3px rgba(90,79,199,.12)
}
textarea.result-area{color:var(--green)}

/* ========== 4. Layout ========== */
header{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:16px;padding:18px 24px 14px;background:var(--surface);border-bottom:1px solid var(--border);text-align:center}
header h1{font-size:1.15em;font-weight:700;background:linear-gradient(90deg,var(--accent),var(--accent2));-webkit-background-clip:text;-webkit-text-fill-color:transparent}
header nav{font-size:.82em;color:var(--text-sub)} header nav a{color:var(--accent);text-decoration:none;margin-right:10px} header nav a:hover{text-decoration:underline}
main{max-width:960px;margin:0 auto;padding:24px 20px 60px}
.section{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;margin-bottom:18px;box-shadow:var(--shadow)}
.section-title{margin-bottom:12px;font-size:.78em;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-sub)}

/* ========== 5. Chip - 共通化 ========== */
.zone-container{margin-bottom:14px}
.tag-chips,.chip-zone{display:flex;flex-wrap:wrap;gap:6px;min-height:54px;padding:10px 12px;background:var(--surface2);border:1px dashed var(--border);border-radius:var(--radius-sm)}
.chip-zone.drag-over{border-color:var(--accent2);background:rgba(212,74,143,.08)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:4px;border:1px solid;font-size:.88em;font-family:var(--font-mono);user-select:none;cursor:pointer;transition:transform var(--speed-fast),opacity var(--speed-fast)}
.chip:hover{opacity:.85;transform:scale(1.02)} .chip.dragging{opacity:.4;transform:scale(.95)}
.chip-a{background:var(--chip-a-bg);color:var(--chip-a-text);border-color:var(--chip-a-border)}
.chip-b{background:var(--chip-b-bg);color:var(--chip-b-text);border-color:var(--chip-b-border)}
.chip-cm{background:var(--chip-cm-bg);color:var(--chip-cm-text);border-color:var(--chip-cm-border)}
.chip-neg{background:var(--chip-neg-bg);color:var(--chip-neg-text);border-color:var(--chip-neg-border)}
.chip-del{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:var(--radius-full);background:rgba(0,0,0,.08);color:var(--red);font-weight:700;cursor:pointer;transition:all var(--speed)}
.chip-del:hover{transform:scale(1.15);background:var(--red);color:#fff}

/* ========== 6. Button - 共通化 ★ .btn必須に ========== */
.btn-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.btn{padding:10px 20px;border:1px solid transparent;border-radius:var(--radius-sm);font-size:.95em;font-weight:600;cursor:pointer;color:#fff;transition:transform var(--speed-fast),opacity var(--speed-fast),box-shadow var(--speed-fast)}
.btn:hover{opacity:.9;transform:translateY(-1px)} .btn:active{transform:none}
.btn-primary{background:var(--accent)} .btn-green{background:var(--green)}
.btn-sub{background:var(--surface2);color:var(--text);border-color:var(--border)}
.btn-llm{background:linear-gradient(90deg,var(--accent),var(--accent2))}
/* disabledはhoverより後に置くことで!important不要 */
.btn:disabled,.llm-card.disabled{opacity:.45;filter:grayscale(.8);cursor:not-allowed;pointer-events:none;box-shadow:none;transform:none}
.btn:disabled{background:#d8d8d8;color:#888;border-color:#c0c0c0}

/* ========== 7. Grid / Badge ========== */
.chara-grid{display:grid;gap:16px;align-items:stretch} .chara-grid>div{display:flex;flex-direction:column;height:100%} .chara-grid .chip-zone{flex:1}
.chara-label{display:flex;align-items:center;flex-wrap:wrap;gap:6px;min-height:32px;margin-bottom:5px;font-size:.78em;font-weight:700}
.badge{padding:1px 7px;border-radius:20px;font-size:.75em} .badge-a{background:var(--accent);color:#fff} .badge-b{background:var(--accent2);color:#fff} .badge-c{background:var(--surface2);color:var(--text-sub);border:1px solid var(--border)}
@media(min-width:900px){.chara-grid{grid-template-columns:1fr 1fr}} /* breakpoint:900 */

/* ========== 8. LLM Card - :not()でdisabled:hoverを削除 ========== */
#llm-panel{display:none;margin-top:14px;padding:16px 18px;background:var(--surface2);border:1px solid var(--border);border-radius:var(--radius)}
.llm-grid{display:grid;gap:10px;margin-top:12px}
.llm-card{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--surface);border:1px solid var(--border);border-radius:8px;color:var(--text);text-decoration:none;box-shadow:var(--shadow-sm);transition:all var(--speed)}
.llm-card:not(.disabled):hover{border-color:var(--accent2);transform:translateY(-3px);box-shadow:var(--shadow-hover)}
.llm-icon{width:28px;text-align:center;font-size:1.35em} .llm-name{flex:1;font-weight:600}
.llm-badge{margin-left:auto;padding:1px 8px;border-radius:10px;background:#e0e0e0;color:#666;font-size:.55em}

/* ========== 9. Other ========== */
.result-block{margin-top:10px} .result-label{margin-bottom:4px;font-size:.75em;color:var(--text-sub)}
.step-badge{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;margin-right:6px;border-radius:var(--radius-full);background:var(--accent);color:#fff;font-size:.72em;font-weight:700}
.step-title{display:flex;align-items:center;gap:4px;margin-bottom:12px;font-weight:700}
.hint{margin-top:6px;font-size:.78em;color:var(--text-sub)} .hint code{padding:1px 5px;border-radius:3px;background:#f1f3f9;font-family:var(--font-mono)}
footer{padding:20px;text-align:center;font-size:.76em;color:var(--text-sub);border-top:1px solid var(--border)}

/* ========== 10. Dark / High-contrast / Mobile ========== */
@media(prefers-color-scheme:dark){
  :root{--bg:#1a1a1a;--surface:#222;--surface2:#2a2a2a;--border:#444;--text:#e0e0e0;--text-sub:#aaa;--accent:#7a6fe6;--accent2:#e66a9f}
  .section,.chip-zone,textarea,input,select{background:var(--surface)} .llm-card{background:#2a2a2a}
  .btn:disabled{background:#3a3a3a;color:#777;border-color:#555}
}
@media(prefers-contrast:more){
  :root{--bg:#fff;--surface:#fff;--text:#000;--border:#000} /* 変数だけでハイコントラスト完結 */
}
@media(max-width:640px){ /* breakpoint:640 */
  header{padding:16px 14px 12px} main{padding:18px 12px 48px} .section{padding:16px 14px}
  .chip-del{width:32px;height:32px} .tag-chips,.chip-zone{min-height:62px}
  .llm-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr))}
}