:root{
  --teal:#0e8a82; --teal-d:#0a6e68; --teal-l:#e6f4f2;
  --bg:#f3f6f8; --card:#ffffff; --line:#d7e0e3;
  --text:#1f2d2b; --muted:#7a8a88; --red:#e23b3b; --red-l:#fdeaea;
  --shadow:0 6px 20px rgba(14,138,130,.12);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0; padding:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",Segoe UI,Roboto,sans-serif;}
button{font-family:inherit; cursor:pointer;}
.hidden{display:none !important;}

/* ---------- 登录 / 注册 ---------- */
#auth-view{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.auth-card{width:100%; max-width:380px; background:var(--card); border-radius:18px;
  box-shadow:var(--shadow); padding:30px 26px;}
.brand{text-align:center; margin-bottom:22px;}
.brand .logo{width:58px; height:58px; border-radius:16px; background:linear-gradient(135deg,#0e8a82,#13b3a6);
  color:#fff; font-size:26px; font-weight:800; display:flex; align-items:center; justify-content:center; margin:0 auto 12px;}
.brand h1{font-size:20px; margin:0; letter-spacing:1px;}
.brand p{margin:6px 0 0; color:var(--muted); font-size:13px;}
.tabs{display:flex; background:var(--teal-l); border-radius:12px; padding:4px; margin-bottom:18px;}
.tabs button{flex:1; border:none; background:transparent; padding:9px 0; border-radius:9px;
  font-size:14px; color:var(--teal-d); font-weight:600;}
.tabs button.active{background:#fff; color:var(--teal); box-shadow:0 2px 6px rgba(0,0,0,.06);}
.field{margin-bottom:14px;}
.field label{display:block; font-size:13px; color:var(--muted); margin-bottom:6px;}
.field input{width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:11px;
  font-size:15px; background:#fbfdfd; outline:none; transition:.15s;}
.field input:focus{border-color:var(--teal); box-shadow:0 0 0 3px var(--teal-l);}
.btn-primary{width:100%; padding:13px; border:none; border-radius:12px; background:var(--teal);
  color:#fff; font-size:16px; font-weight:700; letter-spacing:1px; transition:.15s;}
.btn-primary:active{background:var(--teal-d);}
.msg{font-size:13px; text-align:center; margin-top:12px; min-height:18px; color:var(--red);}

/* ---------- 主界面 ---------- */
#app-view{display:flex; flex-direction:column; min-height:100vh;}
.topbar{position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; padding:12px 16px; box-shadow:0 2px 8px rgba(0,0,0,.04);}
.topbar .title{font-weight:800; font-size:16px; color:var(--teal-d);}
.topbar .title small{display:block; font-weight:500; font-size:11px; color:var(--muted);}
.topbar .who{font-size:13px; color:var(--muted);}
.topbar .who b{color:var(--text);}
.btn-ghost{border:1px solid var(--line); background:#fff; color:var(--muted); font-size:13px;
  padding:7px 12px; border-radius:9px;}
.toolbar{display:flex; align-items:center; gap:10px; padding:10px 16px; background:var(--teal-l); font-size:13px; color:var(--teal-d);}
.toolbar .grow{flex:1;}
.seg{display:flex; background:#fff; border:1px solid var(--line); border-radius:9px; overflow:hidden;}
.seg button{border:none; background:#fff; padding:6px 11px; font-size:13px; color:var(--teal-d);}
.seg button.active{background:var(--teal); color:#fff; font-weight:700;}

.tree-wrap{flex:1; overflow:auto; padding:20px 12px 40px; -webkit-overflow-scrolling:touch;}
.tree-stage{position:relative; margin:0 auto;}
.tree-stage svg{position:absolute; left:0; top:0; pointer-events:none;}
.node{position:absolute; transform:translate(-50%,-50%); width:66px; height:50px; border-radius:12px;
  background:#fff; border:2px solid var(--teal); box-shadow:0 3px 10px rgba(14,138,130,.18);
  display:flex; flex-direction:column; align-items:center; justify-content:center; cursor:pointer; transition:.12s;}
.node:active{transform:translate(-50%,-50%) scale(.94);}
.node.branch{cursor:default; border-style:dashed; background:#f7fbfa;}
.node.branch:active{transform:translate(-50%,-50%);}
.node.leaf{border-color:var(--teal); width:80px; height:62px; background:#eefaf8;}
.node.root{border-color:var(--teal-d); background:linear-gradient(135deg,#0e8a82,#13b3a6); color:#fff; border-width:2px;}
.node .code{font-size:15px; font-weight:800; line-height:1;}
.node.root .code{font-size:13px;}
.node .pname{font-size:17px; font-weight:800; line-height:1.1; max-width:72px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--teal-d);}
.node.leaf .code{font-size:11px; font-weight:600; opacity:.6; margin-top:3px;}
.node .nm{font-size:10px; opacity:.85; margin-top:2px; max-width:60px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.node .badge{position:absolute; top:-8px; right:-8px; min-width:18px; height:18px; padding:0 4px;
  border-radius:9px; background:var(--red); color:#fff; font-size:11px; font-weight:700;
  display:flex; align-items:center; justify-content:center; border:2px solid #fff;}
.node .badge.zero{background:#b9c4c2;}

/* ---------- 弹窗 ---------- */
#modal{position:fixed; inset:0; background:rgba(20,40,38,.45); display:flex; align-items:flex-end; justify-content:center; z-index:50;}
@media(min-width:560px){#modal{align-items:center;}}
.sheet{width:100%; max-width:480px; background:#fff; border-radius:18px 18px 0 0; max-height:86vh;
  display:flex; flex-direction:column; overflow:hidden; animation:up .2s ease;}
@media(min-width:560px){.sheet{border-radius:18px;}}
@keyframes up{from{transform:translateY(40px); opacity:.6;}to{transform:translateY(0); opacity:1;}}
.sheet header{display:flex; align-items:center; justify-content:space-between; padding:16px 18px; border-bottom:1px solid var(--line);}
.sheet header .h-code{font-size:17px; font-weight:800; color:var(--teal-d);}
.sheet header .h-sub{font-size:12px; color:var(--muted); margin-top:2px;}
.sheet header .x{border:none; background:var(--teal-l); color:var(--teal-d); width:30px; height:30px; border-radius:50%; font-size:16px;}
.sheet .body{overflow:auto; padding:14px 18px;}
.cust{border:1px solid var(--line); border-radius:12px; padding:11px 12px; margin-bottom:10px; position:relative;}
.cust .cn{font-weight:700; font-size:15px;}
.cust .cp{font-size:13px; color:var(--muted); margin-top:2px;}
.cust .ct{font-size:13px; color:var(--text); margin-top:4px; white-space:pre-wrap; word-break:break-word;}
.cust .acts{position:absolute; top:10px; right:10px; display:flex; gap:6px;}
.cust .acts button{border:1px solid var(--line); background:#fff; border-radius:8px; font-size:12px; padding:4px 9px; color:var(--teal-d);}
.cust .acts .del{color:var(--red); border-color:var(--red-l); background:var(--red-l);}
.empty{text-align:center; color:var(--muted); font-size:13px; padding:18px 0;}
.add-form{border-top:1px dashed var(--line); padding-top:14px; margin-top:4px;}
.add-form .row{display:flex; gap:8px; margin-bottom:8px;}
.add-form input{flex:1; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; outline:none;}
.add-form input:focus{border-color:var(--teal);}
.add-form textarea{flex:1; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:10px; font-size:14px; outline:none; resize:vertical; min-height:48px;}
.add-form .add-btn{border:none; background:var(--teal); color:#fff; padding:10px 16px; border-radius:10px; font-weight:700; font-size:14px;}
.legend{font-size:12px; color:var(--muted);}
.legend b{color:var(--teal-d);}