*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#f5f7fa;
  --panel:#ffffff;
  --panel-2:#fbfcfe;
  --line:#e3e8ef;
  --line-2:#eef2f7;
  --text:#1e2939;
  --text-2:#5b6b82;
  --text-3:#93a1b5;
  --accent:#3b6ef5;
  --accent-soft:#e8effe;
  --shadow:0 1px 3px rgba(20,40,80,.06),0 8px 24px rgba(20,40,80,.05);
  --shadow-lg:0 4px 12px rgba(20,40,80,.08),0 16px 40px rgba(20,40,80,.07);
  --r:12px;
}
html,body{height:100%}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}
.app{height:100vh;display:flex;flex-direction:column}

/* ── 顶栏 ── */
.topbar{
  flex:0 0 auto;height:58px;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;
  background:var(--panel);border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:12px}
.logo{
  width:32px;height:32px;border-radius:8px;
  background:linear-gradient(135deg,#4f7ff7,#7a5cf0);
  box-shadow:0 2px 8px rgba(79,127,247,.3);
  position:relative;flex:0 0 auto;
}
.logo::after{
  content:"";position:absolute;inset:8px;
  border:2px solid rgba(255,255,255,.9);border-radius:2px;
}
.topbar h1{font-size:15px;font-weight:650;letter-spacing:.2px}
.sub{font-size:11.5px;color:var(--text-3);margin-top:1px}
.badge{
  padding:6px 14px;border-radius:99px;font-size:12.5px;font-weight:600;
  background:var(--accent-soft);color:var(--accent);
}

/* ── 主区 ── */
.stage{flex:1;display:flex;min-height:0;padding:14px;gap:14px}
.viewport{
  flex:1;min-width:0;display:flex;flex-direction:column;gap:12px;
}
.zone{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);position:relative;overflow:hidden;
}
.zone-3d{flex:1.35;min-height:0}
.zone-flat{flex:1;min-height:0}
.zone-label{
  position:absolute;top:10px;left:12px;z-index:2;
  display:flex;align-items:center;gap:6px;
  font-size:11.5px;font-weight:600;color:var(--text-2);
  background:rgba(255,255,255,.85);backdrop-filter:blur(6px);
  padding:4px 10px;border-radius:99px;border:1px solid var(--line-2);
}
.dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.dot2{background:#f59e0b}
.zone canvas{display:block;width:100%;height:100%}
.hint{
  position:absolute;bottom:10px;left:12px;z-index:2;
  font-size:11px;color:var(--text-3);
  background:rgba(255,255,255,.8);padding:3px 9px;border-radius:99px;
}

/* ── 侧栏 ── */
.sidebar{
  flex:0 0 232px;display:flex;flex-direction:column;gap:12px;
  overflow-y:auto;
}
.panel{
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;box-shadow:var(--shadow);
}
.panel h3{
  font-size:11px;font-weight:700;color:var(--text-3);
  text-transform:uppercase;letter-spacing:.7px;margin-bottom:11px;
}
.btn-row{display:flex;gap:8px}
.btn-row.col{flex-direction:column}
.btn{
  flex:1;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:36px;padding:0 12px;border:1px solid var(--line);border-radius:9px;
  background:var(--panel-2);color:var(--text);
  font-size:13px;font-weight:600;cursor:pointer;
  transition:all .16s;font-family:inherit;
}
.btn:hover{background:#f2f5fa;border-color:#d3dbe6}
.btn:active{transform:translateY(1px)}
.btn-primary{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 2px 8px rgba(59,110,245,.28);
}
.btn-primary:hover{background:#3260e8;border-color:#3260e8}
.btn-export{background:var(--panel-2)}
.btn-export:disabled{opacity:.5;cursor:not-allowed}
.ic{width:15px;height:15px;fill:currentColor;flex:0 0 auto}

.slider-row{
  display:grid;grid-template-columns:52px 1fr 40px;align-items:center;
  gap:8px;margin-top:10px;
}
.slider-row label{font-size:11.5px;color:var(--text-2);font-weight:500}
.slider-row .val{font-size:11px;color:var(--text-3);text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{
  -webkit-appearance:none;appearance:none;height:4px;border-radius:2px;
  background:var(--line);outline:none;cursor:pointer;
}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:14px;height:14px;border-radius:50%;
  background:#fff;border:2px solid var(--accent);cursor:pointer;
  box-shadow:0 1px 4px rgba(20,40,80,.2);
}
.chk-row{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.chk{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-2);cursor:pointer}
.chk input{width:14px;height:14px;accent-color:var(--accent);cursor:pointer}
.export-opt{margin-top:10px}

.progress-wrap{margin-top:11px}
.pbar{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.pfill{height:100%;width:0;background:linear-gradient(90deg,#4f7ff7,#7a5cf0);transition:width .2s}
.ptext{display:block;font-size:11px;color:var(--text-3);margin-top:6px}

/* ── 底部菜单 ── */
.dock{
  flex:0 0 auto;background:var(--panel);border-top:1px solid var(--line);
  padding:10px 16px 12px;
}
.dock-tabs{display:flex;gap:6px;margin-bottom:10px}
.tab{
  padding:6px 15px;border-radius:8px;border:1px solid var(--line);
  background:var(--panel-2);color:var(--text-2);
  font-size:12.5px;font-weight:600;cursor:pointer;transition:all .16s;
  font-family:inherit;
}
.tab:hover{background:#f2f5fa}
.tab.active{
  background:var(--accent);color:#fff;border-color:var(--accent);
  box-shadow:0 2px 8px rgba(59,110,245,.25);
}
.tab .cnt{opacity:.65;font-size:11px;margin-left:3px}
.dock-items{display:flex;gap:9px;flex-wrap:wrap;min-height:66px}
.net-card{
  width:78px;height:66px;border-radius:9px;border:1.5px solid var(--line);
  background:var(--panel-2);cursor:pointer;transition:all .16s;
  display:flex;align-items:center;justify-content:center;
  position:relative;overflow:hidden;padding:0;
}
.net-card:hover{border-color:#b9c7db;background:#f2f5fa;transform:translateY(-1px)}
.net-card.active{
  border-color:var(--accent);background:var(--accent-soft);
  box-shadow:0 2px 10px rgba(59,110,245,.2);
}
.net-card svg{width:100%;height:100%;display:block}
.net-card .idx{
  position:absolute;top:3px;right:5px;font-size:9.5px;font-weight:700;
  color:var(--text-3);
}
.net-card.active .idx{color:var(--accent)}

@media (max-width:1080px){
  .sidebar{flex-basis:200px}
  .net-card{width:66px;height:58px}
}