/* ai-tool.css — shared styles for the AI developer tool pages (.ait-*). */

.ait-hero { background:linear-gradient(135deg,rgba(45,43,111,.55) 0%,rgba(7,6,26,0) 80%); border-bottom:1px solid var(--cv-border); padding:36px 0 28px; }
.ait-hero-inner { display:flex; align-items:center; gap:20px; }
.ait-hero-icon { flex-shrink:0; width:58px; height:58px; background:var(--cv-lav-glow); border:1px solid var(--cv-border-mid); border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--cv-lavender); }
.ait-hero h1 { font-size:1.65rem; font-weight:700; margin:0 0 5px; letter-spacing:-.02em; }
.ait-hero p { color:var(--cv-text-mid); font-size:.93rem; margin:0; max-width:660px; }
.ait-hero .lnk-badge { font-size:.6rem; vertical-align:middle; }

.ait-wrap { flex:1; padding:24px 0 48px; }
.ait-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; align-items:start; margin-top:16px; }
@media(max-width:860px){ .ait-grid{ grid-template-columns:1fr; } }

.ait-panel { background:var(--cv-bg-card,rgba(255,255,255,.03)); border:1px solid var(--cv-border); border-radius:14px; padding:18px; }
.ait-label { display:block; font-size:.82rem; font-weight:600; color:var(--cv-text); margin:14px 0 8px; }
.ait-label:first-child { margin-top:0; }
.ait-hint { font-size:.74rem; color:var(--cv-text-dim); font-weight:400; }
.ait-textarea, .ait-input { width:100%; background:rgba(255,255,255,.05); color:var(--cv-text); border:1px solid var(--cv-border-mid); border-radius:9px; padding:11px 13px; font-size:.89rem; line-height:1.55; resize:vertical; font-family:inherit; box-sizing:border-box; }
.ait-textarea:focus, .ait-input:focus, .ait-select:focus { outline:none; border-color:var(--cv-lavender); }
.ait-textarea.mono { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; }
.ait-select { width:100%; background:rgba(255,255,255,.06); color:var(--cv-text); border:1px solid var(--cv-border-mid); border-radius:8px; padding:9px 12px; font-size:.85rem; cursor:pointer; }
.ait-row { display:flex; gap:14px; flex-wrap:wrap; }
.ait-row .ait-field { flex:1; min-width:170px; }

.ait-examples { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.ait-example, .ai-example { background:rgba(255,255,255,.05); color:var(--cv-text-mid); border:1px solid var(--cv-border-mid); border-radius:20px; padding:6px 13px; font-size:.76rem; cursor:pointer; }
.ait-example:hover, .ai-example:hover { border-color:var(--cv-lavender); color:#fff; }

.ait-actions { margin-top:16px; }
.ait-btn-primary { display:inline-flex; align-items:center; gap:8px; background:var(--cv-indigo); color:#fff; border:1px solid var(--cv-indigo); border-radius:9px; padding:11px 22px; font-size:.9rem; font-weight:600; cursor:pointer; transition:background .18s,opacity .18s; }
.ait-btn-primary:hover { background:var(--cv-indigo-mid); }
.ait-btn-primary:disabled { opacity:.5; cursor:default; }
.ait-spinner { width:15px; height:15px; border:2px solid rgba(255,255,255,.35); border-top-color:#fff; border-radius:50%; animation:aitspin .7s linear infinite; }
@keyframes aitspin { to { transform:rotate(360deg); } }

.ait-out-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; }
.ait-out-title { font-size:.82rem; font-weight:600; color:var(--cv-text); }
.ait-copy { background:rgba(15,181,125,.12); color:#68d391; border:1px solid rgba(15,181,125,.25); border-radius:7px; padding:6px 13px; font-size:.78rem; font-weight:600; cursor:pointer; }
.ait-copy:hover { background:rgba(15,181,125,.22); }
.ait-copy:disabled { opacity:.4; cursor:default; }
.ait-output { background:#0c0b1e; border:1px solid var(--cv-border-mid); border-radius:9px; padding:14px; overflow:auto; min-height:260px; max-height:560px; }
.ait-pre { margin:0; }
.ait-pre code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; line-height:1.6; color:#cbd5e1; white-space:pre; }
.ait-placeholder { color:var(--cv-text-dim); font-size:.85rem; }

.ait-md { color:var(--cv-text); font-size:.88rem; line-height:1.65; }
.ait-md h2 { font-size:1.02rem; margin:16px 0 8px; }
.ait-md h3 { font-size:.92rem; margin:14px 0 6px; }
.ait-md h2:first-child, .ait-md h3:first-child { margin-top:0; }
.ait-md p { margin:0 0 10px; }
.ait-md ul, .ait-md ol { margin:0 0 10px; padding-left:20px; }
.ait-md li { margin-bottom:5px; }
.ait-md code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.82rem; background:rgba(255,255,255,.08); padding:1px 5px; border-radius:4px; }
.ait-md pre { background:#0c0b1e; border:1px solid var(--cv-border-mid); border-radius:8px; padding:12px; overflow:auto; margin:0 0 12px; }
.ait-md pre code { background:none; padding:0; color:#cbd5e1; }
.ait-md strong { color:#fff; }
.ait-md a { color:var(--cv-lavender); }

.ait-msg { margin-top:10px; font-size:.82rem; padding:10px 12px; border-radius:8px; display:none; }
.ait-msg.err { display:block; background:rgba(229,62,62,.1); color:#fc8181; border:1px solid rgba(229,62,62,.25); }