/* Elegant, accessible dark theme */
:root{
  --bg:#0d0f14;
  --panel:#121621;
  --elev:#161b29;
  --text:#e6ecf2;
  --muted:#9aa7b3;
  --accent:#4da3ff;
  --accent-strong:#2b86f7;
  --danger:#ff5964;
  --ok:#20c997;
  --warn:#ffb020;
  --border:#232a3a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Arial, "Apple Color Emoji","Segoe UI Emoji";
}
img{max-width:100%; display:block}

.app-header{display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--border); background:linear-gradient(180deg, rgba(255,255,255,0.03), rgba(0,0,0,0))}
.brand{display:flex; align-items:center; gap:12px}
.logo{filter:drop-shadow(0 2px 6px rgba(0,0,0,.3))}
.title h1{font-size:18px; margin:0 0 2px}
.subtitle{margin:0; color:var(--muted); font-size:13px}
.status .badge{padding:6px 10px; border-radius:999px; font-size:12px; background:var(--panel); border:1px solid var(--border); color:var(--muted)}
.status .badge.ok{color:#b9f6e8; border-color:#1f4b3e; background:rgba(32,201,151,.1)}
.status .badge.warn{color:#ffe6b0; border-color:#5b4a15; background:rgba(255,176,32,.1)}

.layout{display:grid; grid-template-columns: 380px 1fr; gap:20px; padding:20px; max-width:1200px; margin:0 auto}
.panel{background:var(--panel); border:1px solid var(--border); border-radius:14px; box-shadow:var(--shadow)}
.panel.left{padding:18px}
.panel.right{padding:0}

.field{margin-bottom:14px}
.field.inline{display:grid; grid-template-columns: 1fr 120px 120px; gap:12px}
.field label{display:block; margin-bottom:6px; color:#c8d4df; font-weight:600}
.field .req{color:var(--danger)}
input[type=text], input[type=number], select, textarea{
  width:100%; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--elev); color:var(--text);
}
textarea{resize:vertical}
.help{color:var(--muted); font-size:12px; margin-top:4px}
.field.checkbox{display:flex; align-items:center; gap:10px}

.actions{display:flex; align-items:center; gap:12px; margin-top:14px}
.btn{appearance:none; background:var(--elev); color:var(--text); border:1px solid var(--border); padding:8px 12px; border-radius:10px; cursor:pointer; transition:.15s ease; text-decoration:none; display:inline-flex; align-items:center; gap:8px}
.btn:hover{transform:translateY(-1px); border-color:#2a3246}
.btn.primary{background:linear-gradient(180deg, var(--accent), var(--accent-strong)); color:#081018; border:0; font-weight:700}
.btn.sm{padding:6px 10px; font-size:13px}
.btn.copied{background:#1f3a2f; border-color:#2b6b53}
.quota{color:var(--muted); font-size:13px}

.alert{margin-top:14px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--elev)}
.alert.error{border-color:#4b1e24; background:rgba(255,89,100,.1)}
.alert.info{border-color:#24314b; background:rgba(77,163,255,.08)}

.history{margin-top:18px; padding:16px}
.history h3{margin:0 0 10px}
.history-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px}
.history-list li{display:flex; align-items:center; justify-content:space-between; background:var(--elev); border:1px solid var(--border); border-radius:10px; padding:10px 12px}
.history .tag{margin-left:8px; font-size:12px; color:#c7d6ff; background:rgba(77,163,255,.12); padding:2px 6px; border-radius:6px}
.history .time{margin-left:8px; color:var(--muted); font-size:12px}
.row-actions{display:flex; gap:8px; align-items:center}

.results-head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border)}
.results{min-height:200px}
.outline{padding:16px}
.h2{font-size:18px; margin:16px 0 8px; color:#eaf3ff}
.h3{padding-left:12px; border-left:2px solid #26324a; margin:6px 0; color:#d5e2ef}
.faqs{padding:4px 16px 16px}
.faqs h3{margin-top:10px}
.faqs ul{margin:8px 0 0 18px}

.empty{padding:40px 16px; color:var(--muted)}

.app-footer{padding:16px 20px; border-top:1px solid var(--border); color:var(--muted); text-align:center}
.app-footer .sep{margin:0 8px}

.visually-hidden{position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; overflow:hidden !important}

@media (max-width: 960px){
  .layout{grid-template-columns: 1fr; padding:14px}
  .panel.left{order:2}
  .panel.right{order:1}
}