/* FAQ Schema Fuser — Dark theme, accessible, responsive */
:root{
  --bg:#0f1115; --bg-panel:#151924; --bg-panel-2:#10141d; --muted:#98a2b3;
  --text:#e6e8ee; --accent:#31c48d; --accent-2:#1f9d73; --danger:#ef4444; --warn:#f59e0b;
  --border:#252b3a; --code:#0c0f15; --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial; background:var(--bg); color:var(--text)}
img{display:block}

.site-header, .site-footer{display:flex;justify-content:space-between;align-items:center;padding:16px 20px;border-bottom:1px solid var(--border);background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));}
.site-footer{border-top:1px solid var(--border);border-bottom:none;opacity:.9}
.brand{display:flex;align-items:center;gap:12px}
.logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.titles{display:flex;flex-direction:column}
.titles strong{font-weight:700}
.titles .muted{color:var(--muted);font-size:.9rem}
.status{display:flex;gap:8px}
.badge{padding:4px 8px;border-radius:999px;font-size:.75rem;background:#1a2233;border:1px solid var(--border);color:var(--muted)}
.badge.ok{background:rgba(49,196,141,.12);border-color:#194f3d;color:#88e6c7}
.badge.warn{background:rgba(245,158,11,.12);border-color:#5a3f0a;color:#fbd38d}

.container.split{display:grid;grid-template-columns:1.1fr 1fr;gap:16px;padding:16px}
.panel{background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;min-height:60vh}
.left{ }
.right{ }

.field{display:flex;flex-direction:column;margin-bottom:12px}
label{font-weight:600;margin-bottom:6px}
.hint{color:var(--muted);font-size:.85rem;margin-top:6px}
input[type=text], input[type=url], textarea, input[type=file]{width:100%;padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:var(--bg-panel-2);color:var(--text)}
textarea{resize:vertical}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}

.toggles{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
.switch{display:flex;align-items:center;gap:8px}
.switch input{accent-color:var(--accent)}

.actions{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.btn{background:#1a2233;border:1px solid var(--border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer;text-decoration:none}
.btn:hover{border-color:#2b3347}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-2));border-color:transparent;color:#00140d;font-weight:700}
.btn.small{padding:6px 10px;font-size:.85rem}

.messages{display:flex;flex-direction:column;gap:8px;margin:8px 0}
.msg{padding:10px 12px;border-radius:10px;border:1px solid var(--border)}
.msg.info{background:rgba(49,196,141,.08)}
.msg.error{background:rgba(239,68,68,.08);border-color:#512}

.history{margin-top:18px}
.history ul{list-style:none;padding:0;margin:6px 0;display:flex;flex-direction:column;gap:8px}
.history li{display:flex;align-items:center;gap:8px}

.output-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.stats{display:flex;gap:12px;margin-bottom:8px;color:var(--muted)}

.code{position:relative}
pre{background:var(--code);border:1px solid var(--border);padding:14px;border-radius:10px;overflow:auto;max-height:65vh}
code{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;font-size:.92rem;}

.issues{margin:10px 0}
.issues summary{cursor:pointer}
.issues ul{margin:6px 0 0 18px}

.muted{color:var(--muted)}
.sr-only{position:absolute;left:-9999px;opacity:0}

.toast{position:fixed;left:50%;transform:translate(-50%, 20px);bottom:20px;background:#1a2233;border:1px solid var(--border);padding:10px 12px;border-radius:10px;opacity:0;transition:opacity .2s ease, transform .2s ease;color:#cdd6e3}
.toast.show{opacity:1;transform:translate(-50%, 0)}

@media (max-width: 960px){
  .container.split{grid-template-columns:1fr;}
  .panel{min-height:auto}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important;transition:none!important}
}
