/* ============================================================
   «Cinematic Void» — стиль Vilet для Полки + холст как в Stitch.
   app.css (копия артефакта) и shell.css не трогаем — переопределяем здесь.
   Правила: никаких радиальных свечений из центра, только диагональный
   отблеск «как через стекло»; без эмодзи.
   ============================================================ */
:root:root:root,
:root:root:root[data-theme="light"],
:root:root:root[data-theme="dark"]{
  --ground:#05060A; --surface:#0E1018; --surface-2:#151925;
  --ink:#E7EBF3; --muted:#8B93A7; --faint:#5A6378;
  --line:rgba(255,255,255,.08); --line-strong:rgba(255,255,255,.14);
  --accent:#3D7BFF; --accent-ink:#ffffff; --accent-soft:rgba(61,123,255,.16);
  --good:#3FBF8A; --warn:#E0A83A; --danger:#F06A6A;
  --dot:rgba(255,255,255,.075);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 10px 30px rgba(0,0,0,.45);
  --radius:12px;
  --fdisp:"Manrope","Inter",-apple-system,"Segoe UI",sans-serif;
  --fui:"Inter","Manrope",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  /* стекло Vilet: #0E1018 80% + тонкая граница + диагональный отблеск */
  --glass:rgba(14,16,24,.8);
  --glass-edge:rgba(255,255,255,.08);
  --glass-sheen:linear-gradient(135deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 38%,rgba(61,123,255,.035) 100%);
  color-scheme:dark;
}
.brand__name{font-family:var(--fdisp);font-weight:300;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.brand__mark{background:var(--accent);border-radius:2px}

/* ---- холст: бесконечный, камера на transform ---- */
.board{overflow:hidden;touch-action:none;overscroll-behavior:none;
  background-color:#05060A;
  /* точка — SVG-кружок, а не градиент (шаг/сдвиг выставляет applyCam) */
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='1' fill='%23ffffff' fill-opacity='.11'/%3E%3C/svg%3E");
  background-size:24px 24px;cursor:default}
.canvas{position:absolute;left:0;top:0;min-width:0;min-height:0;transform-origin:0 0;will-change:transform}
.board.tool-hand,.board.tool-hand *{cursor:grab}
.board.is-panning,.board.is-panning *{cursor:grabbing !important}
body.space-pan .board,body.space-pan .board *{cursor:grab !important}
.board.tool-frame{cursor:crosshair}
.node{touch-action:none}

/* карточки */
.node__card{background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow)}
.node--image .node__card,.node--video .node__card{background:#0A0C12;border-color:rgba(255,255,255,.06)}
.node--text .node__text{font-family:var(--fdisp);font-weight:600}
.node--text:hover .node__card,.node--text:focus-within .node__card{background:var(--glass)}
.node.is-sel{outline:none}
.node.is-sel .rsz{display:none}
.tbtn{background:var(--glass);border-color:var(--glass-edge);color:var(--ink);backdrop-filter:blur(10px)}

/* шапка над карточкой: значок + подпись слева, ★ / нравится / не нравится справа.
   Ширина = ширина карточки на экране, сама не масштабируется (--z/--iz). */
.nhead{position:absolute;left:0;bottom:100%;z-index:3;
  width:calc(100% * var(--z,1));transform:scale(var(--iz,1));transform-origin:0 100%;
  display:flex;align-items:center;gap:6px;height:26px;padding:0 1px 4px;
  font:500 12px/1 var(--fui);color:var(--muted);white-space:nowrap}
.nhead__ic{flex:none;display:grid;place-items:center;width:14px;height:14px;opacity:.75}
.nhead__ic svg{width:13px;height:13px}
.nhead__t{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;outline:none;padding:2px 3px;border-radius:4px}
.nhead__t:empty::before{content:attr(data-ph);color:var(--faint)}
.nhead__t[contenteditable]:focus{color:var(--ink);background:var(--surface-2);text-overflow:clip}
.nhead__t--kind{opacity:0;transition:opacity .12s}
.nhead__acts{flex:none;display:flex;gap:1px;margin-left:auto}
.nhb{width:22px;height:22px;border-radius:6px;display:grid;place-items:center;color:var(--muted);
  opacity:0;transition:opacity .12s,color .12s,background .12s}
.nhb svg{width:14px;height:14px}
.nhb:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nhb.on{opacity:1;color:var(--accent)}
.nhb.on svg{fill:currentColor}
.nhb[data-v="-1"].on{color:#A9B1C4}
.nhb:disabled{cursor:default}
.nhead:not(.nhead--media) .nhead__ic{opacity:0;transition:opacity .12s}
.node:hover .nhead__ic,.node.is-sel .nhead__ic{opacity:.75 !important}
.node:hover .nhb,.node.is-sel .nhb,.node:hover .nhead__t--kind,.node.is-sel .nhead__t--kind{opacity:1}
@media(hover:none){ .node.is-sel .nhb{opacity:1} }
.node.is-sel .nhead{color:var(--ink)}

/* рамка выделения с ручками */
.gbox{position:absolute;z-index:7;pointer-events:none;
  outline:calc(1.5px * var(--iz,1)) solid var(--accent);outline-offset:calc(2px * var(--iz,1))}
.gbox i{position:absolute;pointer-events:auto;touch-action:none;
  width:calc(10px * var(--iz,1));height:calc(10px * var(--iz,1));
  margin:calc(-5px * var(--iz,1)) 0 0 calc(-5px * var(--iz,1));
  background:#05060A;border:calc(1.5px * var(--iz,1)) solid var(--accent);border-radius:calc(2px * var(--iz,1))}
.gbox i::after{content:"";position:absolute;inset:-9px}  /* под палец ручка шире, чем видно */
.gbox [data-h="nw"]{left:0;top:0;cursor:nwse-resize}
.gbox [data-h="ne"]{left:100%;top:0;cursor:nesw-resize}
.gbox [data-h="sw"]{left:0;top:100%;cursor:nesw-resize}
.gbox [data-h="se"]{left:100%;top:100%;cursor:nwse-resize}
.gbox [data-h="e"],.gbox [data-h="s"]{display:none;border-radius:calc(5px * var(--iz,1))}
.gbox [data-h="e"]{left:100%;top:50%;cursor:ew-resize;height:calc(18px * var(--iz,1));margin-top:calc(-9px * var(--iz,1))}
.gbox [data-h="s"]{left:50%;top:100%;cursor:ns-resize;width:calc(18px * var(--iz,1));margin-left:calc(-9px * var(--iz,1))}
.gbox--one [data-h="e"]{display:block}
.gbox--image [data-h="s"],.gbox--video [data-h="s"],.gbox--shape [data-h="s"]{display:block}
.marquee{border:calc(1px * var(--iz,1)) solid var(--accent);background:rgba(61,123,255,.08);border-radius:0}

/* правая панель инструментов — стекло Vilet */
.rail{left:auto;right:max(12px,env(safe-area-inset-right));
  background:var(--glass-sheen),var(--glass);border:1px solid var(--glass-edge);border-radius:12px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 12px 34px rgba(0,0,0,.5);padding:5px;gap:2px;max-height:calc(100% - 96px);overflow-y:auto;scrollbar-width:none}
.railb{width:36px;height:36px;border-radius:8px;color:var(--muted)}
.railb svg{width:18px;height:18px}
.railb:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.railb.on{background:var(--accent);color:#fff}
.rail__sep{height:1px;margin:4px 6px;background:var(--glass-edge);flex:none}

/* масштаб в углу, как «28%» у Stitch */
.zoomctl{background:var(--glass-sheen),var(--glass);border:1px solid var(--glass-edge);border-radius:10px;
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 12px 34px rgba(0,0,0,.5);padding:2px}
.zoomctl button{min-width:30px;height:30px;border-radius:7px;color:var(--muted)}
.zoomctl button svg{width:15px;height:15px}
.zoomctl button:hover{background:rgba(255,255,255,.06);color:var(--ink)}
.zoomctl .zpct{font-family:var(--fui);font-size:12px;font-weight:600;color:var(--ink);min-width:48px}

.selbar,.drawbar{background:var(--glass-sheen),var(--glass);border-color:var(--glass-edge);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.empty h2{font-family:var(--fdisp);font-weight:500}

@media(max-width:560px){
  .railb{width:34px;height:34px}
  .rail{right:max(8px,env(safe-area-inset-right))}
}