:root{
  --bg:#15171c;
  --bg2:#1b1e25;
  --panel:#1f232b;
  --panel2:#262b35;
  --line:#30353f;
  --line2:#3b414d;
  --ink:#d7dbe2;
  --ink-dim:#8a909c;
  --accent:#ffb000;        /* единственный акцент — янтарный, как индикатор активного инструмента */
  --accent-ink:#1a1205;
  --good:#5ad17a;
  --bad:#ff5a5a;
  --mono:"SF Mono",ui-monospace,"JetBrains Mono","Cascadia Code",Consolas,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--mono);
  background:var(--bg);
  color:var(--ink);
  overflow:hidden;
  -webkit-user-select:none;user-select:none;
  font-size:12px;
}

#app{
  display:grid;
  grid-template-columns:52px 1fr 232px;
  grid-template-rows:1fr 26px;
  grid-template-areas:"tool stage panel" "tool status status";
  height:100vh;width:100vw;
}

/* ---------- Левая панель ---------- */
.toolbar{
  grid-area:tool;
  background:var(--bg2);
  border-right:1px solid var(--line);
  display:flex;flex-direction:column;align-items:center;
  padding:8px 0;gap:6px;
}
.brand{
  writing-mode:vertical-rl;transform:rotate(180deg);
  letter-spacing:3px;font-size:10px;color:var(--ink-dim);
  display:flex;align-items:center;gap:7px;margin-bottom:6px;
}
.brand-thin{color:var(--accent)}
.brand-dot{width:7px;height:7px;background:var(--accent);box-shadow:0 0 0 2px var(--bg)}
.tools{display:flex;flex-direction:column;gap:4px}
.tool{
  width:36px;height:36px;border:1px solid transparent;border-radius:6px;
  background:var(--panel);color:var(--ink);font-size:17px;line-height:1;
  cursor:pointer;transition:.08s;
}
.tool:hover{background:var(--panel2);border-color:var(--line2)}
.tool.active{
  background:var(--accent);color:var(--accent-ink);
  border-color:var(--accent);box-shadow:0 0 0 1px var(--accent);
}
.spacer{flex:1}
.zoombox{display:flex;flex-direction:column;align-items:center;gap:4px;width:40px}
.zoomlabel{font-size:9px;color:var(--ink-dim);text-align:center}
.mini{
  width:30px;height:24px;border:1px solid var(--line);border-radius:5px;
  background:var(--panel);color:var(--ink);cursor:pointer;font-size:13px;
}
.mini:hover{background:var(--panel2)}
.mini.wide{width:38px;font-size:9px;letter-spacing:1px}

/* ---------- Холст ---------- */
.stage{
min-width: 0;
min-height: 0;
  grid-area:stage;position:relative;overflow:hidden;
  background:
    linear-gradient(45deg,#1a1d23 25%,transparent 25%,transparent 75%,#1a1d23 75%),
    linear-gradient(45deg,#1a1d23 25%,#191c22 25%,#191c22 75%,#1a1d23 75%);
  background-size:24px 24px;background-position:0 0,12px 12px;
}
#view {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  cursor: crosshair;
}
.conn{
  position:absolute;top:10px;left:50%;transform:translateX(-50%);
  background:var(--panel);border:1px solid var(--line);border-radius:20px;
  padding:5px 14px;font-size:11px;color:var(--ink-dim);
  pointer-events:none;transition:.2s;
}
.conn.ok{color:var(--good);opacity:0}
.conn.err{color:var(--bad);opacity:1}

/* ---------- Правая панель ---------- */
.panel{
  grid-area:panel;background:var(--panel);border-left:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;
}
.block{padding:12px;border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:9px}
.block.grow{flex:1;min-height:90px}
.sub{font-size:10px;letter-spacing:1px;color:var(--ink-dim);text-transform:uppercase}

.colorpair{display:flex;align-items:center;gap:8px}
.swatch{
  width:42px;height:42px;border-radius:8px;border:2px solid var(--line2);
  cursor:pointer;position:relative;
}
.swatch.primary{box-shadow:0 0 0 2px var(--bg2),0 0 0 3px var(--accent)}
.swatch.secondary{width:30px;height:30px}
.swap{height:30px;width:30px;font-size:14px}

.picker-row{display:flex;gap:6px}
#colorInput{width:34px;height:30px;padding:0;border:1px solid var(--line);border-radius:6px;background:var(--panel2);cursor:pointer}
.hex{
  flex:1;background:var(--bg);border:1px solid var(--line);border-radius:6px;
  color:var(--ink);padding:0 8px;font-family:var(--mono);font-size:12px;
}
.hex:focus{outline:none;border-color:var(--accent)}

.palette{display:grid;grid-template-columns:repeat(8,1fr);gap:3px}
.palette.recent{grid-template-columns:repeat(10,1fr)}
.chip{aspect-ratio:1;border-radius:4px;border:1px solid #0006;cursor:pointer}
.chip:hover{transform:scale(1.12);border-color:var(--ink)}
.chip.sel{box-shadow:0 0 0 2px var(--accent)}

.field{display:flex;flex-direction:column;gap:5px;font-size:11px}
.field>span{display:flex;justify-content:space-between;color:var(--ink-dim)}
.field b{color:var(--accent)}
input[type=range]{-webkit-appearance:none;height:4px;border-radius:3px;background:var(--line2)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent);cursor:pointer}
input[type=range]::-moz-range-thumb{width:14px;height:14px;border:none;border-radius:50%;background:var(--accent);cursor:pointer}

.check{display:flex;align-items:center;gap:8px;font-size:11px;color:var(--ink);cursor:pointer}
.check input{accent-color:var(--accent)}

.row2{display:flex;gap:6px}
.btn{
  flex:1;background:var(--panel2);border:1px solid var(--line2);border-radius:6px;
  color:var(--ink);padding:8px 6px;cursor:pointer;font-family:var(--mono);font-size:11px;
}
.btn:hover{background:#2f3540;border-color:var(--accent)}
.btn:active{transform:translateY(1px)}
.btn.full{width:100%}
.btn.link{display:block;text-align:center;text-decoration:none;margin-top:6px;color:var(--accent)}
.btn.link:hover{color:var(--ink)}

.badge{background:var(--accent);color:var(--accent-ink);border-radius:10px;padding:1px 7px;font-size:10px}
.userlist{display:flex;flex-direction:column;gap:4px;overflow-y:auto}
.userrow{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink)}
.userrow.me{color:var(--accent)}
.userrow .mini{width:22px;height:22px;font-size:11px;padding:0;line-height:1}
.userrow .kick{color:var(--ink-dim)}
.userrow .kick:hover{color:var(--bad);border-color:var(--bad)}
.userrow .ban{color:var(--ink-dim)}
.userrow .ban:hover{color:var(--bad);border-color:var(--bad)}
.udot{width:9px;height:9px;border-radius:50%;flex:none}
.uname{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ustat{font-size:10px;color:var(--ink-dim);margin-left:auto;padding-left:6px}

.name-block{border-bottom:none}
.name{width:100%}

/* ---------- Статусбар ---------- */
.statusbar{
  grid-area:status;background:var(--bg2);border-top:1px solid var(--line);
  display:flex;align-items:center;gap:10px;padding:0 12px;
  font-size:11px;color:var(--ink-dim);
}
.statusbar .dot{width:3px;height:3px;border-radius:50%;background:var(--line2)}
.statusbar .grow{flex:1}
#stColor{color:var(--ink)}
#stHint{color:var(--ink-dim);opacity:.8}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--line2);border-radius:5px}
::-webkit-scrollbar-track{background:transparent}

@media (max-width:760px){
  #app{grid-template-columns:46px 1fr;grid-template-areas:"tool stage" "status status"}
  .panel{display:none}
}