*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#101010;
  --dot:rgba(255,255,255,0.035);
  --text:#f0f0f0;
  --muted:#777;
  --blue:#0a84ff;
  --red:#ff453a;
  --orange:#ff9f0a;
  --spring:cubic-bezier(0.32,0.72,0,1);
}
html,body{
  height:100%;overflow:hidden;
  background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Display','Segoe UI',system-ui,sans-serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
  user-select:none;-webkit-user-select:none;
}

/* ===== VIEWPORT ===== */
#vp{
  position:fixed;inset:0;overflow:hidden;
  touch-action:none;cursor:grab;
  --cx:0px;--cy:0px;--cz:1;
  background-color:var(--bg);
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);
  background-size:calc(28px * var(--cz)) calc(28px * var(--cz));
  background-position:var(--cx) var(--cy);
}
#vp.grabbing{cursor:grabbing}

/* ===== CANVAS ===== */
#canvas{
  position:absolute;top:0;left:0;
  transform-origin:0 0;
  transform:translate(var(--cx),var(--cy)) scale(var(--cz));
  will-change:transform;
}

/* ===== FADE ===== */
#fade{
  position:fixed;inset:0;background:var(--bg);
  pointer-events:none;opacity:0;
  transition:opacity .16s ease;z-index:200;
}
#fade.on{opacity:1}

/* ===== BOXES ===== */
.box{
  position:absolute;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.05);
  transition:box-shadow .2s var(--spring),border-color .15s;
}
.box.pressed{opacity:.85}
.box.sel{
  box-shadow:0 0 0 2.5px var(--blue);
  border-color:transparent;
  z-index:10 !important;
}
.box.linkable{
  box-shadow:0 0 0 2px var(--orange);
  border-color:transparent;
}

/* Leaf box: centered name */
.box-name{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  font-weight:600;color:var(--text);
  text-align:center;padding:6px;
  word-break:break-word;
  line-height:1.25;
  text-shadow:0 1px 4px rgba(0,0,0,.6);
}

/* Parent box: header + nested body */
.box-hdr{
  position:relative;z-index:2;
  font-weight:600;
  color:rgba(255,255,255,.55);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  text-shadow:0 1px 3px rgba(0,0,0,.5);
}

.box-body{
  position:absolute;
  overflow:hidden;
}

.box-count{
  position:absolute;bottom:0;left:0;right:0;
  text-align:center;
  font-size:10px;color:rgba(255,255,255,.25);
  padding:2px;
}

/* depth sizing */
.box[data-d="0"]{border-radius:14px}
.box[data-d="0"] .box-name{font-size:clamp(13px,2.2vw,22px)}
.box[data-d="0"]>.box-hdr{font-size:clamp(11px,1.6vw,15px);padding:6px 10px 0}

.box[data-d="1"]{border-radius:10px}
.box[data-d="1"]>.box-name{font-size:clamp(10px,1.5vw,16px)}
.box[data-d="1"]>.box-hdr{font-size:clamp(9px,1.2vw,12px);padding:4px 7px 0}

.box[data-d="2"]{border-radius:7px}
.box[data-d="2"]>.box-name{font-size:clamp(8px,1.1vw,13px)}
.box[data-d="2"]>.box-hdr{font-size:clamp(8px,1vw,10px);padding:3px 5px 0}

.box[data-d="3"]{border-radius:5px}
.box[data-d="3"]>.box-name{font-size:9px}
.box[data-d="3"]>.box-hdr{font-size:8px;padding:2px 4px 0}

/* ===== EDGE LINES ===== */
.edge{stroke:rgba(255,255,255,.1);stroke-width:1.5;stroke-dasharray:6 4;fill:none;pointer-events:none}

/* ===== HEADER ===== */
#hdr{
  position:fixed;
  top:max(10px,env(safe-area-inset-top,10px));
  left:50%;transform:translateX(-50%);
  height:40px;
  display:flex;align-items:center;gap:2px;
  background:rgba(20,20,20,.72);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border:1px solid rgba(255,255,255,.06);
  border-radius:20px;padding:0 6px;
  z-index:100;pointer-events:auto;
}
.hdr-btn{
  width:36px;height:36px;
  display:flex;align-items:center;justify-content:center;
  background:none;border:none;color:var(--blue);
  cursor:pointer;border-radius:18px;flex-shrink:0;
  transition:background .15s;
}
.hdr-btn:hover{background:rgba(255,255,255,.06)}
.hdr-btn:active{opacity:.5}
.hdr-btn.hidden{display:none}
#hdr-title{
  font-size:15px;font-weight:600;padding:0 8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px;
}

/* ===== EMPTY ===== */
#empty{
  position:fixed;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;pointer-events:none;z-index:5;
}
#empty.hidden{display:none}
#empty-title{font-size:32px;font-weight:700;letter-spacing:-.5px;opacity:.15}
.empty-hint{font-size:14px;color:var(--muted);opacity:.6}

/* ===== FAB ===== */
#fab{
  position:fixed;
  bottom:max(24px,calc(env(safe-area-inset-bottom,0px) + 20px));
  right:20px;
  width:52px;height:52px;border-radius:26px;
  background:var(--blue);border:none;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 16px rgba(10,132,255,.4);
  cursor:pointer;z-index:100;
  transition:transform .2s var(--spring),box-shadow .2s;
}
#fab:hover{box-shadow:0 6px 20px rgba(10,132,255,.5)}
#fab:active{transform:scale(.88)}

/* ===== SHEET ===== */
#sheet{
  position:fixed;bottom:0;left:0;right:0;
  background:#1c1c1e;
  border-top:1px solid rgba(255,255,255,.08);
  border-radius:16px 16px 0 0;
  padding:6px 20px calc(14px + env(safe-area-inset-bottom,0px));
  z-index:110;transform:translateY(0);
  transition:transform .32s var(--spring);
}
#sheet.hidden{transform:translateY(100%);pointer-events:none}
@media(min-width:640px){
  #sheet{left:auto;right:16px;bottom:16px;width:320px;border-radius:16px;border:1px solid rgba(255,255,255,.08)}
}
.sheet-pill{width:36px;height:4px;background:rgba(255,255,255,.12);border-radius:2px;margin:0 auto 12px}
#ed-name{
  width:100%;background:0;border:0;color:var(--text);
  font-size:20px;font-weight:600;padding:0 0 8px;
  outline:0;font-family:inherit;caret-color:var(--blue);
}
#ed-name::placeholder{color:#555}
.sh-row{display:flex;align-items:center;gap:10px;padding:7px 0;border-top:1px solid rgba(255,255,255,.05)}
.sh-row label{font-size:13px;color:var(--muted);width:48px;flex-shrink:0}
.sh-row input{flex:1;background:0;border:0;color:var(--text);font-size:15px;font-family:inherit;outline:0;caret-color:var(--blue);min-width:0}
.sh-row input[type=number]{width:56px;flex:none}
.sh-row input::placeholder{color:#444}
#ed-links{display:flex;flex-wrap:wrap;gap:5px;padding:4px 0 0}
#ed-links:empty{display:none}
.ltag{display:inline-flex;align-items:center;gap:3px;background:#2c2c2e;border-radius:6px;padding:3px 8px;font-size:12px;color:var(--muted)}
.ltag .lrm{background:0;border:0;color:#666;cursor:pointer;font-size:15px;padding:0 0 0 2px;line-height:1}
.ltag .lrm:hover{color:var(--red)}
.sh-actions{display:flex;gap:6px;padding-top:12px}
.sh-btn{
  flex:1;padding:9px 0;border-radius:10px;border:0;background:#2c2c2e;
  color:var(--text);font-size:14px;font-weight:500;font-family:inherit;
  cursor:pointer;transition:transform .1s,background .15s;
}
.sh-btn:active{transform:scale(.96)}
.sh-btn.primary{background:var(--blue);color:#fff}
.sh-btn.danger{color:var(--red)}
.sh-btn.hidden{display:none}

/* ===== LINK BANNER ===== */
#lnk-banner{
  position:fixed;
  top:max(58px,calc(env(safe-area-inset-top,0px) + 54px));
  left:50%;transform:translateX(-50%);
  background:rgba(255,159,10,.12);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border:1px solid rgba(255,159,10,.2);border-radius:12px;
  color:var(--orange);padding:8px 16px;font-size:13px;font-weight:500;
  display:flex;align-items:center;gap:10px;z-index:100;
  transition:opacity .2s,transform .25s var(--spring);
}
#lnk-banner.hidden{opacity:0;pointer-events:none;transform:translateX(-50%) translateY(-8px)}
#btn-cancel-lnk{
  background:rgba(255,159,10,.15);border:0;border-radius:6px;
  color:var(--orange);padding:3px 10px;font-size:12px;
  font-weight:600;font-family:inherit;cursor:pointer;
}
::-webkit-scrollbar{display:none}