:root{
  --bg:#0b1020; --panel:#121a2b; --ink:#e8eef9; --muted:#a9b4c7;
  --line:#21304a; --acc:#7ac7ff;
  --sh:#2f855a;   --gr:#2b6cb0;   --ss:#9b2c2c;   --gl:#805ad5;
}

html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}

.wrap{max-width:1280px;margin:auto;padding:20px}
h1{font-size:24px;margin:0 0 8px;font-weight:700}
.sub{color:var(--muted);font-size:13px;margin-bottom:16px}

.layout{display:grid;grid-template-columns:320px 1fr;gap:16px}
@media (max-width:980px){.layout{grid-template-columns:1fr}}

.sidebar{
  background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:12px; height:fit-content;
  position:sticky; top:16px; z-index:1;
}
@media (max-width:980px){ .sidebar{ position:static; top:auto; z-index:auto; } }

.sidebar-block + .sidebar-block { margin-top: 10px; }

.opt-head{font-weight:600}
.opt-body{margin-top:10px}

.tabs .tab{padding:8px 10px}
.tabs .tab.active{background:#1c2f52;border-color:#2c4a7f}
.opt-panel{margin-top:10px}
.opt-group{border-top:1px dashed #24314e; padding-top:10px; margin-top:10px}
.opt-group:first-child{border-top:none; padding-top:0; margin-top:0}
.opt-title{font-weight:700; margin-bottom:6px}

.grid{display:grid;gap:12px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.g2,.g3{grid-template-columns:1fr}}

.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.row.between{justify-content:space-between}
.spacer{flex:1}
.hr{height:1px;background:linear-gradient(90deg,transparent,#22304b,transparent);margin:12px 0}
.note{color:#a9b4c7;font-size:12px}

label{display:block;font-size:12px;color:var(--muted);margin-bottom:4px}
input,select,button,textarea{font:inherit;color:inherit}
input,select,textarea{
  width:100%;min-width:0;box-sizing:border-box;background:#0f1729;border:1px solid var(--line);
  border-radius:10px;padding:10px;color:#e8eef9
}
textarea{resize:vertical}
input:focus,select:focus,button:focus,textarea:focus{outline:2px solid var(--acc);outline-offset:2px}

.btn{background:#17223a;border:1px solid var(--line);padding:10px 12px;border-radius:12px;cursor:pointer}
.btn:hover{background:#1c2a47}
.btn.acc{background:#1c2f52;border-color:#2c4a7f}
.btn.ghost{background:transparent}

.pill{padding:6px 10px;border:1px solid var(--line);border-radius:999px;background:#0f1729;color:#a9b4c7;font-size:12px}
.pill.editable{cursor:text}
.chk input{width:auto; margin-right:8px}

table{width:100%;border-collapse:collapse}
th,td{padding:8px;border-bottom:1px dashed #24314e;text-align:right}
th:first-child,td:first-child{text-align:left}

.addbar{position:sticky; top:16px; z-index:2}
.hide{display:none}
.content{min-width:0}
.outcard{min-height:120px; contain:layout}

.csv-wrap{min-width:280px;max-width:980px}
#csvDialog{border:none;background:#0b1020cc;color:var(--ink);padding:0}
#csvDialog::backdrop{background:rgba(0,0,0,0.55)}
.csv-pre{
  background:#0f1729;border:1px solid var(--line);padding:12px;border-radius:10px;max-height:60vh;overflow:auto;
  white-space:pre; font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;
  margin-top:10px;
}
.csv-actions{justify-content:flex-end;margin-top:10px}

/* Pretty CSV sections */
.csv-sec{border:1px solid var(--line); border-radius:12px; margin-top:12px; overflow:hidden}
.csv-sec .sec-head{padding:10px 12px; font-weight:700; color:white}
.csv-sh .sec-head{background:linear-gradient(90deg, var(--sh), #1a4736)}
.csv-gr .sec-head{background:linear-gradient(90deg, var(--gr), #1a365d)}
.csv-ss .sec-head{background:linear-gradient(90deg, var(--ss), #742a2a)}
.csv-gl .sec-head{background:linear-gradient(90deg, var(--gl), #44337a)}
.csv-sec .sec-body{padding:8px 12px}
.csv-sec table{border-collapse:collapse;width:100%}
.csv-sec th, .csv-sec td{border-bottom:1px dashed #24314e; padding:8px}
.csv-sec th{text-align:left; color:#cdd7eb}
.csv-sec td:last-child{text-align:right}
.csv-sec tfoot td{font-weight:700}

.opt-bar{align-items:center}
.opt-collapse-btn{font-size:18px; line-height:1; transform:rotate(-90deg)}
.opt-collapse-btn[aria-expanded="true"]{transform:rotate(0deg)}
#optionsTabs.collapsed .opt-tabs,
#optionsTabs.collapsed .opt-panel{ display:none }

@media (max-width:520px){
  body{font-size:12.5px}
  .wrap{padding:12px}
  input,select,textarea{padding:8px}
  .addbar{top:8px}
  .csv-pre{max-height:65vh}
}