:root{
  --bg:#0b1020;
  --panel:#121a33;
  --panel2:#0f1730;
  --text:#e8ecff;
  --muted:#a8b3dd;
  --accent:#7aa2ff;
  --danger:#ff5c7a;
  --border:rgba(255,255,255,.10);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans TC, Arial;
  background: radial-gradient(1200px 600px at 25% 0%, #182257 0%, var(--bg) 55%);
  color:var(--text);
}

.topbar{
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:space-between;
  padding:12px 16px;
  border-bottom:1px solid var(--border);
  background:rgba(10,14,30,.65);
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:2;
}
.brand{font-weight:700}
.muted{color:var(--muted)}
.actions{display:flex; gap:8px; align-items:center}
.mono{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;}

.btn{
  appearance:none;
  border:1px solid var(--border);
  background: linear-gradient(180deg, rgba(122,162,255,.18), rgba(122,162,255,.08));
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-weight:600;
}
.btn:hover{border-color:rgba(122,162,255,.55)}
.btn-secondary{background:rgba(255,255,255,.06)}
.btn-danger{background:rgba(255,92,122,.10); border-color:rgba(255,92,122,.35)}
.btn-danger:hover{border-color:rgba(255,92,122,.7)}

.layout{
  display:grid;
  grid-template-columns: 320px 1fr 420px;
  gap:14px;
  padding:14px 14px 20px;
}

.panel, .stage, .preview{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border:1px solid var(--border);
  border-radius:16px;
  padding:12px;
}

h2{margin:6px 0 10px; font-size:16px}

.field{margin:10px 0}
label{display:block; font-size:12px; color:var(--muted); margin-bottom:6px}
select, input[type=number], input[type=file]{
  width:100%;
  padding:9px 10px;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.75);
  color:var(--text);
}
input[type=range]{
  width:100%;
  accent-color: var(--accent);
}
.hint{margin-top:6px; font-size:12px; color:var(--muted)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:10px}

.stageHead{display:flex; justify-content:space-between; align-items:baseline; gap:12px; margin-bottom:10px}
#netCanvas{
  width:100%;
  height:auto;
  border-radius:12px;
  border:1px solid var(--border);
  background: rgba(7,10,22,.55);
}

.stage{ position: relative; }
.canvasTools{
  position:absolute;
  top:12px;
  right:12px;
  display:flex;
  gap:10px;
  z-index:1;
}
.toggle{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid var(--border);
  background: rgba(15,23,48,.65);
  color:rgba(255,255,255,0.92);
  font: 12px/1.0 ui-sans-serif, system-ui;
  user-select:none;
}
.toggle input{
  margin:0;
  accent-color: var(--accent);
}

.previewTools{
  display:flex;
  justify-content:flex-end;
  margin:-4px 0 10px;
}
.rangeRow{
  display:flex;
  align-items:center;
  gap:10px;
  width:100%;
  max-width:320px;
}
.rangeRow > span:first-child{min-width:44px}
.rangeRow input[type=range]{flex:1}

/* 3D */
.viewport{
  width:100%;
  height:520px;
  border-radius:12px;
  border:1px solid var(--border);
  background:
    radial-gradient(700px 420px at 52% 40%, rgba(122,162,255,.18), rgba(0,0,0,0) 55%),
    radial-gradient(520px 340px at 48% 70%, rgba(0,0,0,.35), rgba(0,0,0,0) 60%);
  position:relative;
  overflow:hidden;
  perspective: 900px;
}
.viewport::after{
  content:"";
  position:absolute;
  left:50%;
  top:66%;
  width:320px;
  height:220px;
  transform:translateX(-50%);
  background: radial-gradient(closest-side, rgba(0,0,0,.45), rgba(0,0,0,0));
  filter: blur(10px);
  pointer-events:none;
}

.box{
  --w:220px;
  --h:320px;
  --d:110px;
  width:var(--w);
  height:var(--h);
  position:absolute;
  left:50%; top:50%;
  transform-style:preserve-3d;
  transform: translate(-50%,-50%) rotateX(-14deg) rotateY(24deg);
}

.face{
  position:absolute;
  left:50%;
  top:50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border:1px solid rgba(255,255,255,.18);
  border-radius:8px;
  backface-visibility:hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.face::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,255,255,var(--face-shine, .10)) 0%,
    rgba(0,0,0,var(--face-shade, .22)) 70%);
  mix-blend-mode: overlay;
  opacity: .95;
}

/* Face sizes */
.face-front, .face-back{ width:var(--w); height:var(--h); }
.face-left, .face-right{ width:var(--d); height:var(--h); }
.face-top, .face-bottom{ width:var(--w); height:var(--d); }

/* Face transforms (centered) */
.face-front{ transform: translate(-50%,-50%) translateZ(calc(var(--d) / 2)); --face-shade:.18; --face-shine:.12; }
.face-back{ transform: translate(-50%,-50%) rotateY(180deg) translateZ(calc(var(--d) / 2)); --face-shade:.34; --face-shine:.05; }
.face-left{ transform: translate(-50%,-50%) rotateY(-90deg) translateZ(calc(var(--w) / 2)); --face-shade:.32; --face-shine:.06; }
.face-right{ transform: translate(-50%,-50%) rotateY(90deg) translateZ(calc(var(--w) / 2)); --face-shade:.20; --face-shine:.10; }
.face-top{ transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h) / 2)); --face-shade:.14; --face-shine:.16; }
.face-bottom{ transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h) / 2)); --face-shade:.42; --face-shine:.02; }

/* Cylinder preview (fake 3D via segmented label) */
.cylinder{
  --r: 120px;
  --h: 320px;
  --seg: 28;
  --segW: 26px;
  width: calc(var(--r) * 2);
  height: var(--h);
  position:absolute;
  left:50%; top:50%;
  transform-style:preserve-3d;
  transform: translate(-50%,-50%) rotateX(-14deg) rotateY(24deg);
}
.cyl-seg{
  position:absolute;
  left:50%;
  top:50%;
  width: var(--segW);
  height: var(--h);
  transform-style:preserve-3d;
  background-repeat:no-repeat;
  background-size: calc(var(--seg) * 100%) 100%;
  border:1px solid rgba(255,255,255,.10);
  backface-visibility:hidden;
  box-shadow: 0 18px 44px rgba(0,0,0,.45);
}
.cyl-seg::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background: linear-gradient(135deg,
    rgba(255,255,255,.10) 0%,
    rgba(0,0,0,.30) 70%);
  mix-blend-mode: overlay;
  opacity: .95;
}
.cyl-cap{
  position:absolute;
  left:50%;
  width: calc(var(--r) * 2);
  height: calc(var(--r) * 2);
  border-radius: 50%;
  transform-style:preserve-3d;
  background:
    radial-gradient(circle at 35% 35%, rgba(255,255,255,.20), rgba(0,0,0,.35) 60%, rgba(0,0,0,.55) 100%);
  border:1px solid rgba(255,255,255,.14);
}
.cyl-cap.top{ top:50%; transform: translate(-50%,-50%) rotateX(90deg) translateZ(calc(var(--h) / 2)); }
.cyl-cap.bottom{ top:50%; transform: translate(-50%,-50%) rotateX(-90deg) translateZ(calc(var(--h) / 2)); filter: brightness(.9); }

.footer{padding:10px 16px; color:var(--muted)}

@media (max-width: 1180px){
  .layout{grid-template-columns: 320px 1fr; grid-template-rows:auto auto; }
  .preview{grid-column: 1 / -1}
}
@media (max-width: 760px){
  .layout{grid-template-columns: 1fr; }
}