:root{
  --bg:#070a12;
  --panel: rgba(255,255,255,0.06);
  --panel2: rgba(255,255,255,0.10);
  --stroke: rgba(255,255,255,0.10);
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.65);
  --shadow: 0 18px 44px rgba(0,0,0,0.45);
  --r: 18px;

  --primary:#7ad0ff;
  --ok:#67ffbb;
  --bad:#ff78b5;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }

body{
  margin:0;
  color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
  background:
    radial-gradient(1200px 700px at 20% 10%, rgba(122,208,255,0.16), transparent 60%),
    radial-gradient(900px 700px at 80% 20%, rgba(103,255,187,0.12), transparent 60%),
    radial-gradient(900px 700px at 50% 90%, rgba(255,120,181,0.10), transparent 60%),
    var(--bg);
}

.topbar{
  position: sticky;
  top: 0;
  z-index: 10;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background: rgba(7,10,18,0.65);
  border-bottom: 1px solid var(--stroke);
  padding: 14px 18px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  flex-wrap:wrap;
}

.brand{ display:flex; gap:12px; align-items:center; }
.logo{
  width: 14px; height: 14px; border-radius: 5px;
  background: linear-gradient(135deg, var(--primary), var(--ok));
  box-shadow: 0 0 0 4px rgba(122,208,255,0.14);
}
.title{ font-weight: 800; letter-spacing: .2px; }
.subtitle{ color: var(--muted); font-size: 13px; margin-top: 2px; }

.topActions{ display:flex; gap:10px; flex-wrap:wrap; }

.layout{
  width: min(1440px, 100%);
  margin: 0 auto;
  padding: 16px;
  display:grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 14px;
}
@media (max-width: 1100px){
  .layout{ grid-template-columns: 1fr; }
}

.panel{
  background: linear-gradient(180deg, var(--panel), rgba(255,255,255,0.03));
  border: 1px solid var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.panel.right{ align-self: start; }

.panelHeader{
  padding: 14px 14px 10px;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  flex-wrap:wrap;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.panelTitle{ font-weight: 800; letter-spacing:.2px; }
.meta{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}

.card{
  margin: 12px;
  padding: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.cardTitle{
  font-weight: 750;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.90);
}

.vizGrid{
  padding: 12px;
  display:grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.vizCard{
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(0,0,0,0.16);
  border-radius: 16px;
  padding: 12px;
}

.vizHeader{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}
.vizTitle{ font-weight: 750; }
.hint{ color: var(--muted); font-size: 12px; max-width: 60ch; }
.vizToggles{ display:flex; gap:10px; flex-wrap:wrap; }

canvas{
  width: 100%;
  height: 420px;
  display:block;
  border-radius: 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.10);
}
#tfCanvas{ height: 220px; }

.legend{
  margin-top: 8px;
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  color: rgba(255,255,255,0.74);
  font-size: 12px;
}
.legItem{ display:flex; gap:8px; align-items:center; }
.swatch{ width: 14px; height: 10px; border-radius: 3px; border: 1px solid rgba(255,255,255,0.15); }
.swatch.bkg{ background: rgba(122,208,255,0.55); }
.swatch.sig{ background: rgba(255,120,181,0.55); }
.line{ width: 18px; height: 2px; background: rgba(255,255,255,0.75); border-radius: 2px; }
.dash{ width: 18px; height: 2px; background: rgba(103,255,187,0.75); border-radius: 2px; position:relative; }
.dash::after{ content:""; position:absolute; inset:0; background: repeating-linear-gradient(90deg, rgba(103,255,187,0.75) 0 6px, transparent 6px 10px); }

.controlsRow{
  padding: 0 12px 12px;
  display:grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 12px;
}
@media (max-width: 900px){
  .controlsRow{ grid-template-columns: 1fr; }
}

.row2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px){
  .row2{ grid-template-columns: 1fr; }
}

.field label{
  display:block;
  font-size: 12px;
  color: rgba(255,255,255,0.72);
  margin-bottom: 6px;
}
.field input[type="range"]{ width:100%; accent-color: var(--primary); }
.field .val{ text-align:right; color: var(--muted); font-size: 12px; margin-top: 4px; }

select, input[type="number"], input[type="color"]{
  width: 100%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.92);
  border-radius: 12px;
  padding: 10px 10px;
  font: inherit;
}
input[type="color"]{ padding: 6px; height: 40px; }

.rowActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top: 10px;
}

.btn{
  border-radius: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.06);
  color: rgba(255,255,255,0.92);
  cursor:pointer;
  transition: transform 120ms ease, background 120ms ease, border 120ms ease;
  user-select:none;
}
.btn:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.20);
}
.btn:active{ transform: translateY(0); }
.btn.primary{
  background: rgba(122,208,255,0.14);
  border-color: rgba(122,208,255,0.28);
}
.btn.primary:hover{ background: rgba(122,208,255,0.20); }
.btn.ghost{ background: rgba(255,255,255,0.03); }

.toggle{
  display:inline-flex;
  gap:10px;
  align-items:center;
  padding: 8px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.85);
  cursor:pointer;
  user-select:none;
  font-size: 13px;
}
.toggle input{
  width: 18px; height: 18px;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.06);
  appearance:none;
  position: relative;
}
.toggle input:checked{
  background: rgba(103,255,187,0.18);
  border-color: rgba(103,255,187,0.35);
}
.toggle input:checked::after{
  content:"";
  position:absolute;
  inset:4px;
  border-radius: 4px;
  background: rgba(103,255,187,0.65);
}

.kpis{
  margin-top: 10px;
  display:grid;
  gap: 10px;
}
.kpi{ padding: 10px; border-radius: 14px; border: 1px solid rgba(255,255,255,0.10); background: rgba(255,255,255,0.03); }
.kpi .k{ color: rgba(255,255,255,0.70); font-size: 12px; }
.kpi .v{ font-weight: 800; letter-spacing: .2px; margin-top: 3px; }

.tables{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 900px){
  .tables{ grid-template-columns: 1fr; }
}
.tblTitle{ font-weight: 750; color: rgba(255,255,255,0.85); margin-bottom: 8px; }

.tbl{
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th, .tbl td{
  padding: 8px 8px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  text-align:left;
}
.tbl th{ color: rgba(255,255,255,0.70); font-weight: 750; }
.tbl td{ color: rgba(255,255,255,0.88); }

.note{
  margin-top: 10px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.divider{
  height:1px;
  background: rgba(255,255,255,0.10);
  margin: 12px 0;
}

.comp{
  margin-top: 12px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
  padding: 10px;
}
.compHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-bottom: 10px;
}
.small{ color: var(--muted); font-size: 12px; }
.small input{
  width: 80px;
  display:inline-block;
  padding: 6px 8px;
  border-radius: 10px;
}

.tag{
  font-weight: 900;
  letter-spacing: .2px;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.06);
}
.tag.b1{ box-shadow: 0 0 0 4px rgba(118,208,255,0.10) inset; }
.tag.b2{ box-shadow: 0 0 0 4px rgba(108,255,192,0.10) inset; }
.tag.b3{ box-shadow: 0 0 0 4px rgba(255,211,106,0.10) inset; }

.grid6{
  display:grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 1200px){
  .grid6{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px){
  .grid6{ grid-template-columns: repeat(2, 1fr); }
}

.mini label{
  display:block;
  font-size: 11px;
  color: rgba(255,255,255,0.70);
  margin-bottom: 6px;
}
.mini input{ padding: 9px 10px; border-radius: 12px; }

.inline2{ display:flex; gap:10px; }
.inline .mini{ width: 100%; }
.hint{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.35;
}

/* Toast */
.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: rgba(10,14,26,0.70);
  border: 1px solid rgba(255,255,255,0.14);
  box-shadow: 0 18px 44px rgba(0,0,0,0.50);
  padding: 10px 12px;
  border-radius: 14px;
  color: rgba(255,255,255,0.92);
  font-size: 13px;
  display:none;
  align-items:center;
  gap:10px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  z-index: 9999;
}
.toast.show{ display:inline-flex; }
.toast .tDot{
  width: 10px; height: 10px;
  border-radius: 999px;
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(122,208,255,0.18);
}