*{box-sizing:border-box}
html,body{height:100%;margin:0}
:root{
  --font-body:"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-round:ui-rounded,"SF Pro Rounded","Hiragino Maru Gothic ProN","Avenir Next",var(--font-body);
}
body{
  font-family:var(--font-body);
  background:var(--bg); color:var(--text); overflow:hidden; user-select:none;
  -webkit-font-smoothing:antialiased;
}
#comb{position:fixed; inset:0; width:100vw; height:100vh; z-index:0; pointer-events:none}
#comb polygon{fill:none; stroke:var(--comb); stroke-width:1}

/* ---------- Top bar ---------- */
#topbar{
  position:fixed; top:0; left:0; right:0; height:52px; z-index:30;
  display:flex; align-items:center; gap:10px; padding:0 14px;
  background:color-mix(in srgb, var(--panel) 82%, transparent);
  backdrop-filter:blur(12px); border-bottom:1px solid var(--panel-border);
}
#topbar .brand{display:flex; align-items:center}
#topbar .brand-logo{height:30px; width:auto; display:block; filter:drop-shadow(0 1px 2px rgba(120,80,10,.28))}
#docName{
  background:transparent; border:1px solid transparent; color:var(--text);
  font-size:14px; font-weight:600; padding:6px 8px; border-radius:8px; min-width:120px; max-width:280px;
}
#docName:hover{border-color:var(--panel-border)}
#docName:focus{outline:none; border-color:var(--accent); background:rgba(255,255,255,.04)}
.spacer{flex:1}
.btn{
  background:var(--panel); color:var(--text); border:1px solid var(--panel-border);
  border-radius:9px; padding:7px 11px; font-size:13px; cursor:pointer; display:inline-flex; align-items:center; gap:6px;
  white-space:nowrap;
}
.btn:hover{border-color:var(--accent); color:var(--accent)}
.btn.icon{padding:7px 9px}
#newBtn{background:linear-gradient(160deg,var(--queen-a),var(--queen-b)); color:#3a2609; border-color:transparent; font-weight:750}
#newBtn:hover{color:#3a2609; filter:brightness(1.04)}
select.btn{appearance:none; padding-right:26px; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 15px) 15px,calc(100% - 10px) 15px;background-size:5px 5px;background-repeat:no-repeat}
.divider{width:1px;height:22px;background:var(--panel-border);margin:0 2px}

/* ---------- Theme swatches ---------- */
#themes{display:flex;gap:7px;align-items:center}
.swatch{width:22px;height:24px;cursor:pointer;position:relative;filter:drop-shadow(0 1px 1px rgba(120,80,10,.3));transition:transform .1s}
.swatch:hover{transform:translateY(-1px) scale(1.06)}
.swatch::before{content:"";position:absolute;inset:-2px;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:var(--text);opacity:0;transition:opacity .1s}
.swatch.active::before{opacity:.85}
.swatch::after{content:"";position:absolute;inset:0;clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);background:conic-gradient(from 210deg,var(--s0),var(--s1),var(--s2),var(--s3),var(--s0))}

/* ---------- Canvas ---------- */
#canvas{ position:fixed; inset:52px 0 0 0; overflow:hidden; cursor:grab; background:transparent; z-index:1; touch-action:none; }
#canvas.panning{cursor:grabbing}
#world{position:absolute; top:0; left:0; transform-origin:0 0; font-size:0}
#links{position:absolute; top:0; left:0; overflow:visible; pointer-events:none}
#links path{fill:none; stroke:url(#honeytrail); stroke-width:3.4; stroke-linecap:round; transition:stroke-width .15s}

/* ---------- Honeycomb-cell nodes ---------- */
.node{
  position:absolute; max-width:236px; min-width:30px; padding:11px 30px;
  font-size:calc(15px * var(--fs,1)); line-height:1.3; color:var(--node-text); font-weight:650;
  cursor:grab; word-wrap:break-word; overflow-wrap:break-word; white-space:pre-wrap; text-align:center;
  filter:drop-shadow(0 5px 7px rgba(120,80,10,.28));
  transition:transform .1s ease, filter .12s;
  touch-action:none;
}
.node .hex-bg, .node .hex-ring{
  position:absolute; inset:0; z-index:0;
  clip-path:polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
}
.node .hex-bg{ background:linear-gradient(158deg, color-mix(in srgb,var(--nc,var(--n0)) 88%,#fff) 0%, var(--nc,var(--n0)) 46%, color-mix(in srgb,var(--nc,var(--n0)) 82%,#7a4a00) 100%); }
.node .hex-ring{ inset:-4px; background:var(--ring,var(--sel)); opacity:0; transition:opacity .12s; }
.node .label{position:relative; z-index:1; outline:none; display:inline; white-space:pre-wrap}
.node.root{ font-family:var(--font-round); font-size:calc(18px * var(--fs,1)); font-weight:800; padding:15px 40px; letter-spacing:.2px; filter:drop-shadow(0 7px 12px rgba(120,80,10,.36)); }
.node.root .hex-bg{ background:linear-gradient(158deg, var(--queen-a) 0%, var(--queen-b) 100%); box-shadow:none; }
.node .hex-bg::after{ content:""; position:absolute; inset:2px; clip-path:inherit; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28); }
.node.selected .hex-ring{opacity:1}
.node.selected{filter:drop-shadow(0 0 10px color-mix(in srgb,var(--sel) 70%,transparent)) drop-shadow(0 6px 9px rgba(120,80,10,.3))}
.node:not(.selected):hover{transform:translateY(-1px)}
.node:not(.selected):hover .hex-ring{opacity:.4}
.node.editing{cursor:text; user-select:text}
.node.editing .hex-ring{opacity:1; background:var(--accent)}
.node.dragging{z-index:20; cursor:grabbing; filter:drop-shadow(0 16px 22px rgba(120,80,10,.4)); transform:scale(1.04) rotate(-1.2deg)}
.node.drop-child .hex-ring{opacity:1; background:var(--accent)}
.dropline{position:absolute; height:3.5px; background:var(--accent); border-radius:3px; z-index:15; pointer-events:none; display:none}
.dropline::before{content:""; position:absolute; left:-5px; top:50%; transform:translateY(-50%); width:11px; height:11px; background:var(--accent); clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.node .collapse{
  position:absolute; right:-9px; top:50%; transform:translateY(-50%); z-index:2;
  width:19px;height:19px; background:var(--panel); color:var(--accent);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  box-shadow:0 0 0 2px var(--nc,var(--n0));
  font-size:13px; line-height:19px; text-align:center; cursor:pointer; display:none; font-weight:800;
}
.node.has-children .collapse{display:block}

/* ---------- Help panel ---------- */
#help{
  position:fixed; right:16px; bottom:16px; width:330px; z-index:40;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:14px; padding:16px 18px;
  box-shadow:0 18px 50px rgba(0,0,0,.5); display:none; font-size:13px;
}
#help.show{display:block}
#help h3{margin:0 0 10px; font-size:14px}
#help table{width:100%; border-collapse:collapse}
#help td{padding:4px 0; vertical-align:top; color:var(--muted)}
#help td.k{width:118px}
kbd{
  background:rgba(127,127,127,.18); border:1px solid var(--panel-border); border-bottom-width:2px;
  border-radius:6px; padding:1px 6px; font-size:11px; font-family:ui-monospace,Menlo,monospace; color:var(--text);
  white-space:nowrap; display:inline-block; margin:1px 0;
}
#help .close{position:absolute; top:10px; right:12px; cursor:pointer; color:var(--muted); font-size:18px; line-height:1}

/* ---------- Zoom controls ---------- */
#zoombar{position:fixed; left:16px; bottom:16px; z-index:30; display:flex; gap:6px; align-items:center;
  background:color-mix(in srgb,var(--panel) 85%,transparent); border:1px solid var(--panel-border);
  border-radius:11px; padding:6px; backdrop-filter:blur(10px)}
#zoombar .btn{padding:5px 9px}
#zoomlevel{font-size:12px;color:var(--muted);min-width:42px;text-align:center}

#toast{position:fixed; top:64px; left:50%; transform:translateX(-50%); z-index:50;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:10px; padding:8px 14px;
  font-size:13px; box-shadow:0 8px 24px rgba(0,0,0,.4); opacity:0; transition:opacity .2s; pointer-events:none}
#toast.show{opacity:1}
input[type=file]{display:none}

/* Queen cell shimmer */
.node.root .hex-bg{ background-size:200% 200%; animation:queenShimmer 6s ease-in-out infinite; }
@keyframes queenShimmer{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation:none !important; transition:none !important; }
}

/* ---------- Sign-up hint chip ---------- */
#signupHint{
  position:fixed; bottom:16px; right:16px; z-index:30;
  background:linear-gradient(160deg,var(--queen-a),var(--queen-b)); color:#3a2609;
  border-radius:20px; padding:8px 16px; font-size:13px; font-weight:600;
  cursor:pointer; box-shadow:0 4px 14px rgba(120,80,10,.3);
  transition:transform .15s, opacity .2s;
}
#signupHint:hover{transform:translateY(-2px)}
#signupHint.hidden{display:none}

/* ---------- Account menu ---------- */
#accountMenu{
  position:relative; display:inline-flex; align-items:center;
}
#accountBtn{
  background:var(--panel); color:var(--text); border:1px solid var(--panel-border);
  border-radius:9px; padding:7px 11px; font-size:13px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
#accountBtn:hover{border-color:var(--accent); color:var(--accent)}
#accountDropdown{
  position:absolute; top:100%; right:0; margin-top:6px;
  background:var(--panel); border:1px solid var(--panel-border); border-radius:10px;
  padding:6px 0; min-width:180px; box-shadow:0 8px 24px rgba(0,0,0,.3);
  display:none; z-index:50;
}
#accountDropdown.show{display:block}
#accountDropdown .item{
  display:block; width:100%; padding:8px 14px; font-size:13px;
  color:var(--text); background:none; border:none; text-align:left; cursor:pointer;
}
#accountDropdown .item:hover{background:rgba(127,127,127,.1)}
#accountDropdown .email{
  padding:8px 14px; font-size:12px; color:var(--muted);
  border-bottom:1px solid var(--panel-border); margin-bottom:4px;
  overflow:hidden; text-overflow:ellipsis;
}