:root{
  --bg:#0b1020;
  --panel:#0f1733;
  --panel2:#0c132b;
  --text:#e7ecff;
  --muted:#a9b4e6;
  --line:#22306b;
  --accent:#8dd3ff;
  --danger:#ff6b7a;
  --radius:14px;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: "Space Grotesk", "Sora", "Avenir Next", "Helvetica Neue", sans-serif;
  --palette-bg:#0b1020;
  --palette-text:#e7ecff;
  --palette-line:#e7ecff;
  --palette-grid:rgba(255,255,255,0.08);
}
*{box-sizing:border-box}
body{margin:0; font-family:var(--sans); background:radial-gradient(circle at 10% 20%, #0c132b 0%, #070b18 55%, #060915 100%); color:var(--text)}
code{font-family:var(--mono); font-size:11px}

.app{min-height:100vh; display:grid; grid-template-rows:auto 1fr}

.topbar{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:12px 18px; border-bottom:1px solid rgba(255,255,255,.07);
  background:rgba(8,12,24,.7); backdrop-filter: blur(12px);
}
.topbar-left, .topbar-right{display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.titleField{display:flex; flex-direction:column; gap:4px; min-width:220px}
.titleField .subtitleInput{font-size:12px; padding:6px 10px; opacity:0.85}
.presetField, .unitsField{display:flex; flex-direction:column; gap:4px}
.inline3{display:grid; grid-template-columns: 1fr auto; gap:8px; align-items:center}

.fileBtn{
  display:inline-flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  padding:8px 12px; border-radius:12px; cursor:pointer; font-size:12px; color:var(--text);
}
.fileBtn input{display:none}

.main{display:flex; flex-direction:column; min-width:0}
.previewWrap{padding:16px 18px; flex:1; overflow:auto; min-width:0; display:flex; flex-direction:column; gap:14px}
.previewCard{
  background:linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,.015) 100%);
  border:1px solid rgba(255,255,255,.08); border-radius:calc(var(--radius) + 2px);
  padding:12px; min-width:0; box-shadow:0 20px 40px rgba(0,0,0,.35);
}
#svgHost{width:100%; min-width:0}
#svgHost svg{width:100%; height:auto; display:block; max-width:100%}

.statsSummary{
  display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:14px 16px;
}
.statGroup{display:flex; flex-direction:column; gap:6px}
.statLabel{font-size:10px; letter-spacing:1.4px; text-transform:uppercase; color:rgba(255,255,255,.55)}
.statValue{font-size:24px; font-weight:600; color:var(--palette-line); font-variant-numeric:tabular-nums}
.statSub{font-size:14px; color:rgba(255,255,255,.7); font-variant-numeric:tabular-nums}
.statMeta{font-size:11px; color:rgba(255,255,255,.5)}

.exportPanel{
  display:flex; flex-direction:column; gap:12px;
  background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius); padding:14px 16px;
}
.exportHeader{display:flex; justify-content:space-between; align-items:center; gap:10px}
.exportTitle{font-weight:700; font-size:14px}
.exportHint{font-size:12px; color:var(--muted)}
.exportGrid{display:grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap:10px}
.exportPanel .control{gap:4px}
.exportPanel label{font-size:11px}
.exportPanel input[type="number"], .exportPanel select{
  padding:6px 8px;
  font-size:12px;
  border-radius:9px;
}
.exportPanel .hint{font-size:10px}
.exportPanel .btns button{padding:6px 10px; font-size:12px; border-radius:10px}

.drawer{
  position:fixed; top:0; right:-420px; width:420px; height:100vh;
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel2) 100%);
  border-left:1px solid rgba(255,255,255,.08);
  padding:16px; overflow:auto; transition:right .25s ease;
  z-index:40;
}
.drawerHeader{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px}
.drawerTitle{font-weight:700; letter-spacing:.4px}
.drawerBody{display:flex; flex-direction:column; gap:10px}
.drawer details{border:1px solid rgba(255,255,255,.08); border-radius:12px; background:rgba(255,255,255,.03)}
.drawer summary{padding:10px 12px; cursor:pointer; font-weight:600; font-size:13px; list-style:none}
.drawer summary::-webkit-details-marker{display:none}
.drawerPanel{padding:0 12px 12px; display:flex; flex-direction:column; gap:10px}
.drawer details[open]{box-shadow:0 12px 24px rgba(0,0,0,.25)}

.drawerScrim{
  position:fixed; inset:0; background:rgba(0,0,0,.45); opacity:0; pointer-events:none;
  transition:opacity .2s ease; z-index:35;
}

.drawer-open .drawer{right:0}
.drawer-open .drawerScrim{opacity:1; pointer-events:auto}

.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.07);
  border-radius:var(--radius);
  padding:12px;
  margin:10px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
}
.card h3{margin:0 0 10px; font-size:14px; letter-spacing:.2px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
label{font-size:12px; color:var(--muted)}
label.has-tip{
  position:relative;
  cursor:help;
  text-decoration: underline dotted rgba(255,255,255,.25);
  text-underline-offset: 2px;
}
label.has-tip::after{
  content: attr(data-tip);
  position:absolute;
  left:0;
  top:100%;
  margin-top:6px;
  padding:6px 8px;
  font-size:11px;
  line-height:1.35;
  color:var(--text);
  background:rgba(8,12,22,.98);
  border:1px solid rgba(255,255,255,.12);
  border-radius:8px;
  max-width:260px;
  width:max-content;
  white-space:normal;
  box-shadow:0 10px 20px rgba(0,0,0,.45);
  opacity:0;
  transform:translateY(-4px);
  pointer-events:none;
  z-index:20;
}
label.has-tip:hover::after{opacity:1; transform:translateY(0)}

input[type="number"], select, input[type="text"], input[type="file"]{
  width:100%;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.10);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  outline:none;
}
input[type="range"]{width:100%}
.grid2{display:grid; grid-template-columns: 1fr 1fr; gap:10px}
.muted{color:var(--muted); font-size:12px}
.err{color:var(--danger); font-size:12px; white-space:pre-wrap}
.btns{display:flex; gap:10px; flex-wrap:wrap}
button{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  color:var(--text);
  padding:8px 12px;
  border-radius:12px;
  cursor:pointer;
  font-weight:600;
}
button:hover{border-color:rgba(255,255,255,.25)}
button.primary{background:rgba(141,211,255,.15); border-color:rgba(141,211,255,.35)}
button.ghost{background:transparent; border-color:rgba(255,255,255,.15)}
.pill{
  display:inline-flex; gap:8px; align-items:center;
  padding:6px 10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
  font-size:12px; color:var(--muted);
}
.pill b{color:var(--text); font-weight:700}
.small{font-size:11px}
.kpis{display:flex; gap:10px; flex-wrap:wrap}
.kpi{font-size:12px; color:var(--muted)}
.kpi b{color:var(--text)}
.hint{font-size:11px; color:var(--muted); line-height:1.35}
.toggle{display:flex; align-items:center; gap:8px}
.toggle input{transform: translateY(1px)}
.control{display:flex; flex-direction:column; gap:6px}
.control .top{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.control .top span{font-size:12px; color:var(--muted)}
.control .top b{font-size:12px}
.inline2{display:grid; grid-template-columns: 1fr 110px; gap:10px; align-items:center}
.hr{height:1px; background:rgba(255,255,255,.08); margin:10px 0}
.warning{font-size:11px; color:rgba(255,255,255,.6); background:rgba(255,255,255,.05); padding:8px 10px; border-radius:10px}
pre{
  font-family:var(--mono);
  font-size:11px;
  background:rgba(0,0,0,.25);
  border:1px solid rgba(255,255,255,.08);
  border-radius:12px;
  padding:10px;
  overflow:auto;
  max-height:260px;
}

 

@media (max-width: 980px){
  .topbar{flex-direction:column; align-items:flex-start}
  .topbar-left, .topbar-right{width:100%; justify-content:space-between}
  .titleField{width:100%}
  .drawer{width:100%; right:-100%}
  .drawer-open .drawer{right:0}
  .statsSummary{grid-template-columns:1fr}
}