:root{
  --bg:#1e1e1e;          /* figma canvas dark */
  --chrome:#2c2c2c;
  --chrome-2:#383838;
  --line:#3a3a3a;
  --panel:#252525;
  --text:#e8e8e8;
  --text-dim:#9a9a9a;
  --text-faint:#6e6e6e;
  --blue:#0d99ff;
  --blue-dim:#0d99ff;
  --frame-bg:#ffffff;
  --grid:#2a2a2a;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
html,body{overscroll-behavior:none}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:var(--bg);color:var(--text);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}

/* ---------- Toolbar ---------- */
.toolbar{
  position:fixed;top:0;left:0;right:0;height:48px;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  background:rgba(28,28,30,.66);
  -webkit-backdrop-filter:blur(22px) saturate(1.6);
  backdrop-filter:blur(22px) saturate(1.6);
  border-bottom:1px solid rgba(255,255,255,.09);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset, 0 8px 30px -12px rgba(0,0,0,.6);
  padding:0 10px;
}
.tb-left{display:flex;align-items:center;gap:10px;min-width:0}
.figma-mark{display:flex;align-items:center;padding:0 4px}
.file-meta{min-width:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-name .chev{color:var(--text-faint);font-size:10px;margin-left:2px}
.file-sub{font-size:11px;color:var(--text-faint);white-space:nowrap}

.tb-center{display:flex;gap:4px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.06);padding:4px;border-radius:10px}
.seg{
  font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
  background:transparent;border:0;border-radius:6px;padding:5px 12px;cursor:pointer;
  white-space:nowrap;transition:.15s;
}
.seg:hover{color:var(--text);background:var(--chrome-2)}
.seg.active{color:#fff;background:var(--blue)}

.tb-right{display:flex;align-items:center;gap:4px}
.icon-btn{
  width:30px;height:30px;border:0;border-radius:6px;background:transparent;
  color:var(--text-dim);font-size:18px;line-height:1;cursor:pointer;transition:.12s;
}
.icon-btn:hover{background:var(--chrome-2);color:#fff}
.zoom-label{
  font:inherit;font-size:12px;font-weight:500;color:var(--text-dim);
  background:transparent;border:0;border-radius:6px;padding:6px 8px;cursor:pointer;min-width:52px;
}
.zoom-label:hover{background:var(--chrome-2);color:#fff}
.present-btn{
  font:inherit;font-size:12px;font-weight:600;color:#fff;background:var(--blue);
  border:0;border-radius:6px;padding:7px 14px;cursor:pointer;margin-left:4px;transition:.12s;
}
.present-btn:hover{filter:brightness(1.08)}

/* ---------- Layers panel ---------- */
.layers{
  position:fixed;top:48px;left:0;bottom:0;width:248px;z-index:40;
  background:rgba(26,26,28,.62);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border-right:1px solid rgba(255,255,255,.08);
  display:flex;flex-direction:column;transition:transform .22s ease;
}
.layers.hidden{transform:translateX(-100%)}
.layers-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:12px 14px 10px;font-size:11px;font-weight:600;letter-spacing:.04em;
  text-transform:uppercase;color:var(--text-faint);border-bottom:1px solid var(--line);
}
.collapse-toggle{background:transparent;border:0;color:var(--text-dim);font-size:15px;cursor:pointer;padding:2px 6px;border-radius:4px}
.collapse-toggle:hover{background:var(--chrome-2);color:#fff}
.layers-body{flex:1;overflow-y:auto;padding:6px 0}
.layers-foot{padding:12px 14px;border-top:1px solid var(--line)}
.brand-foot{font-size:13px;font-weight:600}
.by{font-size:11px;color:var(--text-faint);margin-top:2px}

.layer-group{margin-bottom:2px}
.layer-group-head{
  display:flex;align-items:center;gap:8px;padding:8px 12px;cursor:pointer;border-radius:6px;
  margin:0 6px;
}
.layer-group-head:hover{background:var(--chrome-2)}
.lg-caret{font-size:9px;color:var(--text-faint);transition:transform .15s;width:10px}
.layer-group.collapsed .lg-caret{transform:rotate(-90deg)}
.lg-swatch{width:12px;height:12px;border-radius:3px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.12) inset}
.lg-name{font-size:12.5px;font-weight:600}
.layer-children{padding-left:6px}
.layer-group.collapsed .layer-children{display:none}
.layer-item{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 30px;margin:0 6px;
  font-size:12px;color:var(--text-dim);cursor:pointer;border-radius:6px;
}
.layer-item:hover{background:var(--chrome-2);color:var(--text)}
.layer-item.active{background:rgba(13,153,255,.16);color:#fff}
.li-icon{width:12px;height:12px;flex:none;opacity:.7}

/* layers reveal tab when hidden */
.layers-reveal{
  position:fixed;top:58px;left:8px;z-index:41;width:28px;height:28px;border-radius:6px;
  background:var(--panel);border:1px solid var(--line);color:var(--text-dim);
  font-size:15px;cursor:pointer;
}
.layers-reveal:hover{color:#fff}

/* ---------- Canvas ---------- */
.viewport{
  position:fixed;top:48px;left:248px;right:0;bottom:0;
  overflow:hidden;cursor:grab;
  background:
    radial-gradient(var(--grid) 1px, transparent 1px);
  background-size:24px 24px;background-color:var(--bg);
  touch-action:none;
}
.viewport.panning{cursor:grabbing}
.viewport.full{left:0}
.canvas{position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform}
.canvas.animate{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.connectors{position:absolute;top:0;left:0;overflow:visible;pointer-events:none}
.frames{position:absolute;top:0;left:0}

/* row label / direction header */
.row-label{position:absolute;display:flex;flex-direction:column;gap:10px}
.rl-top{display:flex;align-items:baseline;gap:12px}
.rl-name{font-size:30px;font-weight:700;letter-spacing:-.01em}
.rl-tag{font-size:14px;color:var(--text-dim)}
.rl-meta{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.rl-swatches{display:flex;gap:6px}
.rl-sw{width:22px;height:22px;border-radius:5px;box-shadow:0 0 0 1px rgba(255,255,255,.14) inset}
.rl-type{font-size:12.5px;color:var(--text-faint)}
.rl-type b{color:var(--text-dim);font-weight:600}

/* frame */
.frame{position:absolute}
.frame-title{
  position:absolute;top:-26px;left:2px;font-size:12.5px;color:var(--text-dim);
  display:flex;align-items:center;gap:7px;white-space:nowrap;
}
.frame-title .ft-ico{width:11px;height:11px;opacity:.6}
.frame-title .ft-dim{color:var(--text-faint);font-size:11px}
.frame-shell{
  background:var(--frame-bg);border-radius:4px;overflow:hidden;
  box-shadow:0 1px 0 rgba(0,0,0,.4),0 18px 40px -12px rgba(0,0,0,.55);
  outline:1px solid rgba(255,255,255,.06);
}
.frame-shell img{display:block;width:100%;height:auto}
.frame-shell.placeholder{
  display:flex;align-items:center;justify-content:center;color:#bbb;background:#f0efe9;
  font-size:13px;
}
.frame.start .frame-title::after{
  content:"FLOW START";font-size:9px;font-weight:700;letter-spacing:.06em;
  color:#fff;background:var(--blue);padding:2px 6px;border-radius:4px;
}
.frame:hover .frame-shell{outline:2px solid var(--blue)}

/* hint */
.hint{
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:30;
  background:rgba(20,20,20,.85);border:1px solid var(--line);backdrop-filter:blur(6px);
  color:var(--text-dim);font-size:12px;padding:8px 14px;border-radius:8px;
  transition:opacity .5s;pointer-events:none;
}
.hint.gone{opacity:0}

/* connectors style */
.conn-path{fill:none;stroke:var(--blue);stroke-width:2.2;opacity:.9}
.conn-dot{fill:var(--blue)}
.conn-arrow{fill:var(--blue)}

.frame{position:absolute;cursor:zoom-in}
.frame .frame-open{
  position:absolute;top:6px;right:6px;z-index:3;opacity:0;transform:translateY(-2px);
  background:rgba(20,20,22,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18);color:#fff;border-radius:6px;
  font-size:10px;font-weight:600;letter-spacing:.04em;padding:4px 8px;transition:.16s;
}
.frame:hover .frame-open{opacity:1;transform:none}

/* ---------- Present mode ---------- */
.present{
  position:fixed;inset:0;z-index:200;display:none;
  background:rgba(10,11,12,.78);-webkit-backdrop-filter:blur(26px);backdrop-filter:blur(26px);
}
.present.open{display:flex;flex-direction:column;animation:fadein .25s ease}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.present-bar{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:12px 16px;flex:none;
  background:rgba(255,255,255,.05);border-bottom:1px solid rgba(255,255,255,.08);
}
.pb-left{display:flex;align-items:center;gap:12px;min-width:0}
.pb-sw{width:14px;height:14px;border-radius:4px;flex:none;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset}
.pb-title{font-size:14px;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pb-title .pb-dir{color:var(--text-dim);font-weight:500}
.pb-count{font-size:12px;color:var(--text-dim);background:rgba(255,255,255,.06);padding:4px 10px;border-radius:20px}
.pb-close{
  width:34px;height:34px;border:1px solid rgba(255,255,255,.14);border-radius:8px;
  background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer;flex:none;
}
.pb-close:hover{background:rgba(255,255,255,.12)}
.present-stage{flex:1;position:relative;overflow:hidden;display:flex;align-items:flex-start;justify-content:center}
.present-scroll{height:100%;overflow-y:auto;overflow-x:hidden;padding:30px 0 60px;-webkit-overflow-scrolling:touch;width:100%;display:flex;justify-content:center}
.present-scroll img{
  width:min(620px,86vw);height:auto;border-radius:10px;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8);outline:1px solid rgba(255,255,255,.08);
  animation:rise .35s cubic-bezier(.22,.61,.36,1);
}
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:none}}
.present-nav{
  position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border-radius:50%;
  background:rgba(255,255,255,.08);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.16);color:#fff;font-size:20px;cursor:pointer;z-index:3;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.present-nav:hover{background:rgba(255,255,255,.18);transform:translateY(-50%) scale(1.06)}
.present-nav.prev{left:18px}
.present-nav.next{right:18px}
.present-dots{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:3;
  display:flex;gap:7px;padding:8px 12px;border-radius:20px;
  background:rgba(20,20,22,.5);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.1);flex-wrap:wrap;max-width:90vw;justify-content:center;
}
.present-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.28);cursor:pointer;transition:.15s}
.present-dot:hover{background:rgba(255,255,255,.55)}
.present-dot.on{background:#fff;width:18px;border-radius:4px}

/* ---------- Minimap ---------- */
.minimap{
  position:fixed;right:16px;bottom:16px;z-index:35;
  width:170px;border-radius:10px;overflow:hidden;cursor:pointer;
  background:rgba(26,26,28,.6);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid rgba(255,255,255,.1);box-shadow:0 14px 40px -16px rgba(0,0,0,.7);
}
.minimap svg{display:block;width:100%;height:auto}
.mm-frame{fill:rgba(255,255,255,.22);stroke:rgba(255,255,255,.12);stroke-width:1}
.mm-view{fill:rgba(13,153,255,.16);stroke:var(--blue);stroke-width:2}
@media (max-width:760px){ .minimap{display:none} }

/* ---------- Mobile ---------- */
@media (max-width:760px){
  .tb-center{display:none}
  .file-sub{display:none}
  .layers{width:82vw;max-width:300px;box-shadow:0 0 40px rgba(0,0,0,.5)}
  .viewport{left:0}
  .present-btn{padding:7px 11px}
  .file-name{font-size:12px}
  .hint{font-size:11px;max-width:90vw;text-align:center}
}