:root{
  --bg:#f7fafc; --panel:#ffffff; --text:#111827; --muted:#374151;
  --accent:#2563eb; --accent2:#10b981; --danger:#ef4444; --radius:14px;
  --shadow:0 8px 24px rgba(0,0,0,0.12);
  --font:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Arial,sans-serif;
  --base:20px;
}
*{box-sizing:border-box}
body{background:var(--bg); color:var(--text); font:400 var(--base)/1.6 var(--font);}
.md-container{max-width:1100px;margin:0 auto;padding:28px 18px 160px;}
.md-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.md-header h1{font-size:32px;margin:0}
.md-badge{background:#e5e7eb;color:#111827;border-radius:999px;padding:6px 12px;font-weight:700}
.md-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media(min-width:980px){ .md-grid{grid-template-columns:460px 1fr;} }

.md-card{background:var(--panel);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px}
h2{font-size:26px;margin:0 0 10px}
h3{font-size:22px;margin:0 0 8px;color:var(--muted)}
.md-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin:8px 0}
.md-label{min-width:180px;font-weight:700}
input,select,button{font-size:20px}
input,select{width:100%;max-width:480px;padding:12px;border-radius:12px;border:2px solid #cbd5e1;background:#fff;color:#111827}
.md-settings{background:#eef2ff;border:2px solid #c7d2fe;border-radius:12px;padding:10px;margin-top:6px}

button{appearance:none;border:none;border-radius:12px;padding:12px 14px;font-weight:700;cursor:pointer;background:#1f2937;color:#fff;box-shadow:var(--shadow)}
button.primary{background:linear-gradient(180deg,#34d399,#059669)}
button.secondary{background:#2563eb}
button.ghost{background:#ffffff;color:#111827;border:2px solid #cbd5e1}
button.danger{background:linear-gradient(180deg,#ef4444,#dc2626)}
button:disabled{opacity:.6;cursor:not-allowed}
.tiny{font-size:16px;color:var(--muted)}

.md-box{background:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;padding:10px;margin-top:10px}
.md-box-head{display:flex;align-items:center;justify-content:space-between}
.md-transcript{white-space:pre-wrap;background:#fff;border:2px solid #e5e7eb;border-radius:12px;padding:12px;margin-top:8px}
.md-list{display:grid;gap:10px;margin-top:8px}
.md-item{background:#fff;border:2px solid #e5e7eb;border-radius:12px;padding:10px}
.md-item-head{font-weight:800;margin-bottom:6px}

:focus-visible{outline:3px solid #fb923c; outline-offset:3px}