:root{
  --bg:#0b0c10;
  --panel:#11131a;
  --card:#171a24;
  --ink:#e8e9f1;
  --muted:#a8a9b5;
  --brand:#ff5e00;
  --accent:#00ff3c;
  --warn:#f5a524;
  --bad:#f43f5e;
  --ok:#24b47e;
  --radius:16px;
  --shadow:0 10px 30px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.03);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0; background:radial-gradient(1000px 700px at 80% -10%, rgba(255,94,0,.06), transparent 50%),
                 radial-gradient(1000px 700px at -20% 130%, rgba(0,255,60,.05), transparent 50%),
                 var(--bg); color:var(--ink); font-family:Inter, ui-sans-serif, system-ui;}

.wrapper{max-width:1300px; margin:36px auto; padding:0 20px;}
header{display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:16px;}
.brand{display:flex; align-items:center; gap:12px;}
.logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand),#ffb36e);box-shadow:0 0 0 2px rgba(255,94,0,.35),0 0 40px rgba(255,94,0,.25)}
h1{font-size:1.25rem; margin:0}
header small{color:var(--muted)}

.controls{display:flex; gap:8px; flex-wrap:wrap}
.btn{appearance:none;border:0;background:var(--panel);color:var(--ink);padding:10px 14px;border-radius:12px;cursor:pointer;box-shadow:var(--shadow)}
.btn.primary{background:linear-gradient(135deg,var(--brand),#ff964d); color:#111; font-weight:700}

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

.left{display:grid; gap:16px; align-content:start}
.card{background:var(--card); border-radius:16px; padding:14px; border:1px solid rgba(255,255,255,.07); box-shadow:var(--shadow)}
.card h3{margin:0 0 8px 0}
.card p{margin:0; color:var(--muted)}

.field{display:flex; flex-direction:column; gap:6px; margin:8px 0}
input[type="text"], input[type="number"], textarea, select{
  width:100%; padding:10px 12px; border-radius:12px; background:#1d2130; color:var(--ink); border:1px solid rgba(255,255,255,.08); outline:none;
}
input[type="text"]:focus, input[type="number"]:focus, textarea:focus, select:focus{box-shadow:0 0 0 2px rgba(0,255,60,.25)}

.grid{display:grid; gap:12px}
.grid.cols-3{grid-template-columns: repeat(3, 1fr);}
.grid.cols-2{grid-template-columns: repeat(2, 1fr);}
@media (max-width: 980px){ .grid.cols-3{grid-template-columns:1fr} }

.bucket{
  min-height:220px; background:linear-gradient(180deg, rgba(255,255,255,.03), transparent), #121421;
  border:1px dashed rgba(255,255,255,.12); border-radius:16px; padding:10px; display:flex; flex-direction:column; gap:10px;
}
.bucket h4{margin:0 0 6px 0; font-size:.95rem; color:var(--muted)}
.bucket .items{display:flex; flex-direction:column; gap:8px;}

.item{
  display:grid; grid-template-columns: 1fr auto; gap:10px; align-items:center;
  background:#151824; border:1px solid rgba(255,255,255,.09); border-radius:12px; padding:10px;
  transition: transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.item:hover{ transform: translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.3) }
.item .title{font-weight:600}
.item .score{display:flex; align-items:center; gap:8px}
.score input[type="range"]{ width:160px; }
.score output{ width:32px; text-align:center; font-variant-numeric: tabular-nums; }

.tag{font-size:.75rem; padding:4px 8px; border-radius:999px; border:1px solid rgba(255,255,255,.12); color:var(--muted)}

.kpi{display:flex; align-items:center; justify-content:space-between; background:linear-gradient(180deg, rgba(255,255,255,.04), transparent);
     border:1px dashed rgba(255,255,255,.12); padding:10px; border-radius:12px}
.kpi strong{font-size:1.15rem}

footer.note{color:var(--muted); text-align:center; margin-top:14px; font-size:.9rem}
canvas{width:100%; height:260px; background:#10121a; border-radius:12px; border:1px solid rgba(255,255,255,.06)}