*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}

:root{
  --bg1:#F5F7FA;
  --bg2:#EDF1F4;
  --bg3:#E3E8ED;
  --t1:#161C23;
  --t2:#596675;
  --t3:#8693A0;
  --b3:rgba(18,24,32,.08);
  --b2:rgba(18,24,32,.14);
  --b1:rgba(18,24,32,.22);
  --acc:#4F7088;
  --acc-l:#D9E4EC;
  --acc-rgb:79,112,136;
  --danger:#A55C64;
  --danger-bg:#F2E4E6;
  --success-bg:#E3EBF1;
  --shadow:0 18px 48px rgba(12,18,25,.12);
  --r1:2px;
  --r2:3px;
  --r3:4px;
  --r4:6px;
  --r-pill:10px;
}

body.dark{
  --bg1:#151A20;
  --bg2:#1B2128;
  --bg3:#242C35;
  --t1:#E6EBF1;
  --t2:#AAB6C2;
  --t3:#728090;
  --b3:rgba(255,255,255,.07);
  --b2:rgba(255,255,255,.12);
  --b1:rgba(255,255,255,.18);
  --acc:#7F9AAF;
  --acc-l:#263744;
  --acc-rgb:127,154,175;
  --danger:#C88890;
  --danger-bg:#332229;
  --success-bg:#24313D;
  --shadow:0 24px 56px rgba(0,0,0,.26);
}

body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  background:var(--bg2);
  color:var(--t1);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

#phone-guard{
  position:fixed;
  inset:0;
  z-index:12000;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:
    radial-gradient(circle at top,rgba(var(--acc-rgb),.14),transparent 36%),
    linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.72));
}

.phone-guard-card{
  width:min(100%,460px);
  padding:26px 24px;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r4);
  box-shadow:var(--shadow);
}

.phone-guard-kicker{
  color:var(--acc);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.phone-guard-title{
  margin-top:10px;
  color:var(--t1);
  font-size:26px;
  line-height:1.1;
  font-weight:700;
}

.phone-guard-copy{
  margin-top:12px;
  color:var(--t2);
  font-size:14px;
  line-height:1.7;
}

.phone-guard-meta{
  margin-top:16px;
  padding:10px 12px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  color:var(--t3);
  font-size:12px;
  line-height:1.55;
}

body.phone-blocked #phone-guard{
  display:flex;
}

body.phone-blocked #app,
body.phone-blocked #load-modal,
body.phone-blocked #exp-modal,
body.phone-blocked #drop-modal,
body.phone-blocked #ui-modal,
body.phone-blocked #share-modal,
body.phone-blocked #toast-wrap{
  display:none !important;
}

button,input,textarea,select{font:inherit}

#app{
  display:grid;
  grid-template-rows:46px auto 1fr;
  grid-template-columns:208px 1fr 260px;
  height:100vh;
  background:var(--bg2);
}

#tb{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0 12px;
  background:var(--bg1);
  border-bottom:1px solid var(--b3);
}

.brand-type{
  font-family:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;
  font-weight:600;
  letter-spacing:-.04em;
  text-transform:none;
  color:var(--t1);
  margin-right:8px;
  flex-shrink:0;
  line-height:1;
  user-select:none;
  -webkit-user-select:none;
}

.tsep,.ab-sep{
  width:1px;
  background:var(--b3);
  flex-shrink:0;
}

.tsep{height:16px;margin:0 2px}
.ab-sep{height:14px;margin:0 3px}

.tgrp{
  display:flex;
  align-items:center;
  gap:3px;
  padding:3px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.tb-title-wrap{
  flex:1;
  min-width:180px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0 14px;
}

.tb-title-input{
  width:min(480px,100%);
  height:30px;
  padding:0 12px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  color:var(--t1);
  font-size:12px;
  font-weight:600;
  letter-spacing:.01em;
  outline:none;
}

.tb-title-input::placeholder{color:var(--t3)}
.tb-title-input:hover{border-color:var(--b2)}
.tb-title-input:focus{
  border-color:rgba(var(--acc-rgb),.5);
  box-shadow:0 0 0 2px var(--acc-l);
}

#app.is-readonly .tb-title-input{
  color:var(--t2);
  cursor:default;
}

#app.is-readonly .tb-title-input:hover{
  border-color:var(--b3);
}

#app.is-readonly .tb-title-input:focus{
  border-color:var(--b3);
  box-shadow:none;
}

.tbtn,
.zb,
.ab-btn,
.tbb,
.exp-opt,
.exp-cancel,
.empty-btn,
.ui-modal-btn,
.ui-modal-close{
  transition:background .14s,border-color .14s,color .14s,filter .14s,transform .14s;
}

.tbtn{
  height:28px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  color:var(--t2);
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r2);
  cursor:pointer;
  white-space:nowrap;
  font-size:12px;
}

.tbtn:hover,
.zb:hover,
.ab-btn:hover,
.tbb:hover,
.exp-cancel:hover,
.empty-btn:hover,
.ui-modal-btn:hover,
.ui-modal-close:hover{
  background:var(--bg3);
  color:var(--t1);
}

.tbtn:disabled,
.zb:disabled,
.ab-btn:disabled,
.load-btn:disabled,
.load-icon-btn:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.tbtn:disabled:hover,
.zb:disabled:hover,
.ab-btn:disabled:hover,
.load-btn:disabled:hover,
.load-icon-btn:disabled:hover{
  background:transparent;
  color:var(--t2);
  filter:none;
}

.tbtn-icon{
  width:28px;
  padding:0;
  font-size:13px;
}

.tbtn-primary{
  height:30px;
  padding:0 13px;
  margin-left:2px;
  background:var(--acc)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  border-radius:var(--r3);
  font-weight:600;
}

.tbtn-primary:hover{filter:brightness(1.05)}

/* ── Share button ── */
.tbtn-share{
  color:var(--acc);
  border-color:rgba(var(--acc-rgb),.38)!important;
  font-weight:600;
}
.tbtn-share:hover{
  background:rgba(var(--acc-rgb),.1)!important;
  color:var(--acc)!important;
  border-color:rgba(var(--acc-rgb),.5)!important;
}

/* ── Share modal overlay ── */
#share-modal{
  display:none;
  position:fixed;
  inset:0;
  z-index:9100;
  background:rgba(0,0,0,.52);
  align-items:center;
  justify-content:center;
}
#share-modal.open{display:flex;}

/* ── Share modal card ── */
.share-box{
  position:relative;
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:12px;
  width:500px;
  max-width:calc(100vw - 32px);
  max-height:calc(100vh - 64px);
  overflow-y:auto;
  padding:28px 28px 24px;
  box-shadow:var(--shadow);
}

/* ── Close button ── */
.share-close{
  position:absolute;
  top:14px;right:14px;
  background:none;border:none;
  color:var(--t3);cursor:pointer;
  font-size:16px;line-height:1;
  padding:4px 6px;border-radius:var(--r3);
}
.share-close:hover{color:var(--t1);background:var(--bg3);}

/* ── Header ── */
.share-kicker{
  font-size:10px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--acc);margin-bottom:4px;
}
.share-title{
  font-size:18px;font-weight:700;color:var(--t1);margin-bottom:4px;
}
.share-sub{
  font-size:12px;color:var(--t3);line-height:1.5;margin-bottom:22px;
}

/* ── URL input row ── */
.share-url-row{
  display:flex;gap:8px;align-items:stretch;margin-bottom:14px;
}
.share-url-input{
  flex:1;min-width:0;height:36px;padding:0 10px;
  font-size:11px;font-family:ui-monospace,'Cascadia Code','Fira Mono',monospace;
  color:var(--t2);background:var(--bg1);
  border:1px solid var(--b2);border-radius:var(--r4);
  outline:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.share-url-input:focus{border-color:var(--acc);}
.share-copy-btn{
  height:36px;padding:0 16px;
  font-size:12px;font-weight:600;
  color:var(--bg1);background:var(--acc);
  border:none;border-radius:var(--r4);
  cursor:pointer;white-space:nowrap;flex-shrink:0;
  transition:opacity .12s;
}
.share-copy-btn:hover:not(:disabled){opacity:.86;}
.share-copy-btn:disabled{opacity:.38;cursor:not-allowed;}

/* ── Stats row ── */
.share-stats{
  display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px;
}
.share-stat{
  display:flex;flex-direction:column;gap:2px;
  padding:7px 11px;
  background:var(--bg1);border:1px solid var(--b2);
  border-radius:var(--r4);font-size:11px;color:var(--t3);
}
.share-stat-val{
  font-size:13px;font-weight:600;color:var(--t1);
}

/* ── Status banner ── */
.share-status{
  font-size:12px;line-height:1.5;
  padding:10px 13px;border-radius:var(--r4);
  margin-bottom:20px;border:1px solid transparent;
}
.share-status-ok{
  background:rgba(115,145,113,.1);
  border-color:rgba(115,145,113,.22);
  color:#739171;
}
body.dark .share-status-ok{color:#8ab688;}
.share-status-warn{
  background:rgba(185,146,87,.1);
  border-color:rgba(185,146,87,.22);
  color:#B99257;
}
.share-status-block{
  background:rgba(193,107,119,.1);
  border-color:rgba(193,107,119,.22);
  color:#C16B77;
}
body.dark .share-status-block{color:#d48a94;}

/* ── Loading placeholder ── */
.share-loading{
  font-size:13px;color:var(--t3);
  text-align:center;padding:28px 0 36px;
}

/* ── Footer actions ── */
.share-actions{
  display:flex;gap:8px;justify-content:flex-end;
  border-top:1px solid var(--b2);
  padding-top:16px;margin-top:4px;
}
.share-json-btn{
  height:32px;padding:0 14px;font-size:12px;
  color:var(--t2);background:var(--bg1);
  border:1px solid var(--b2);border-radius:var(--r4);cursor:pointer;
}
.share-json-btn:hover{border-color:var(--acc);color:var(--t1);}
.share-done-btn{
  height:32px;padding:0 16px;font-size:12px;font-weight:600;
  color:var(--bg1);background:var(--acc);
  border:none;border-radius:var(--r4);cursor:pointer;
}
.share-done-btn:hover{opacity:.86;}

.tr{
  display:flex;
  align-items:center;
  gap:6px;
  flex-shrink:0;
}

.zdsp{
  min-width:44px;
  text-align:center;
  font-size:11px;
  color:var(--t3);
  user-select:none;
}

.btn-export{
  height:30px;
  padding:0 13px;
  color:var(--t1);
  background:var(--acc-l);
  border:1px solid rgba(var(--acc-rgb),.28);
  border-radius:var(--r3);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}

.btn-export:hover{filter:brightness(1.03)}

#app.is-readonly .btn-export:disabled:hover{
  background:var(--acc-l);
  color:var(--t1);
}

#ab{
  grid-column:1/-1;
  display:flex;
  align-items:center;
  gap:4px;
  padding:0 12px;
  min-height:0;
  max-height:0;
  overflow:hidden;
  background:var(--bg1);
  border-bottom:1px solid transparent;
  opacity:0;
  transform:translateY(-6px);
  transform-origin:top;
  pointer-events:none;
  will-change:max-height,opacity,transform;
  transition:
    max-height .28s cubic-bezier(.22,1,.36,1),
    padding .28s cubic-bezier(.22,1,.36,1),
    border-color .2s ease,
    opacity .18s ease,
    transform .28s cubic-bezier(.22,1,.36,1);
}

#app.has-multi #ab,
#app.align-open #ab{
  padding:8px 12px;
  max-height:56px;
  border-bottom-color:var(--b3);
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.ab-label{
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--t3);
  margin-right:3px;
}

.ab-btn{
  height:28px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--b3);
  border-radius:var(--r2);
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  font-size:11px;
  line-height:1;
  white-space:nowrap;
}

.ab-btn.on,
.tbb.on,
.tbtn.on{
  background:var(--bg3);
  color:var(--t1);
  border-color:var(--b2);
}

#sb,
#pr{
  background:var(--bg1);
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--b2) transparent;
}

#sb{
  border-right:1px solid var(--b3);
  padding-bottom:24px;
}

#pr{
  display:flex;
  flex-direction:column;
  border-left:1px solid var(--b3);
}

.scat{
  padding:13px 10px 6px;
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  user-select:none;
  -webkit-user-select:none;
}

#app.is-readonly #sb .nc{
  opacity:.68;
  cursor:default;
}

#app.is-readonly #sb .nc:hover{
  transform:none;
  border-color:var(--b3);
  box-shadow:none;
}

.nc{
  margin:0 8px 4px;
  padding:7px 10px;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-left:3px solid var(--nc-color,var(--b2));
  border-radius:var(--r3);
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
}

.nc:hover{
  background:var(--bg2);
  border-color:rgba(var(--acc-rgb),.2);
  border-left-color:var(--nc-color,var(--acc));
}

.nc:active{cursor:grabbing}

.ndot{
  width:12px;
  height:12px;
  border-radius:var(--r1);
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.12);
}

.nname{
  font-size:12px;
  font-weight:600;
  color:var(--t1);
  line-height:1.25;
}

.ntype{
  font-size:10px;
  line-height:1.25;
  color:var(--nc-color,var(--t3));
  opacity:.92;
}

.sdiv{
  height:1px;
  margin:9px 0;
  background:var(--b3);
}

.nc-cust{
  border-style:dashed;
  border-left-style:dashed;
  cursor:pointer;
}

.nc-cust .nname{color:var(--t2)}
.nc-cust .ntype{color:var(--t3);opacity:1}

#cw{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,0)),
    var(--bg2);
}

#grid{
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:radial-gradient(circle,rgba(var(--acc-rgb),.14) 1px,transparent 1.1px);
  background-size:24px 24px;
}

#csvg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  user-select:none;
  -webkit-user-select:none;
}

#hint,
#connbanner{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  background:rgba(245,247,250,.94);
  border:1px solid var(--b3);
  box-shadow:var(--shadow);
  white-space:nowrap;
  pointer-events:none;
  z-index:10;
}

body.dark #hint,
body.dark #connbanner{
  background:rgba(21,26,32,.94);
}

#hint{
  bottom:13px;
  padding:5px 14px;
  border-radius:var(--r-pill);
  color:var(--t3);
  font-size:11px;
  transition:opacity .4s;
}

#connbanner{
  top:11px;
  padding:6px 16px;
  border-radius:var(--r-pill);
  color:var(--acc);
  font-size:12px;
  font-weight:600;
  opacity:0;
  transition:opacity .18s;
}

#connbanner.on{opacity:1}

.zbw{
  position:absolute;
  right:13px;
  bottom:13px;
  display:flex;
  gap:4px;
}

.zb,
#mmtoggle,
#repofab,
#helpfab{
  width:28px;
  height:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(245,247,250,.96);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  color:var(--t2);
  cursor:pointer;
  box-shadow:var(--shadow);
  user-select:none;
}

body.dark .zb,
body.dark #mmtoggle,
body.dark #repofab,
body.dark #helpfab{
  background:rgba(21,26,32,.96);
}

.zb-fit{width:36px;font-size:11px}

#repofab{
  position:absolute;
  right:182px;
  bottom:124px;
  z-index:10;
  text-decoration:none;
}

#helpfab{
  position:absolute;
  right:182px;
  bottom:87px;
  z-index:10;
}

#repofab svg,
#helpfab svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

#repofab svg{
  fill:currentColor;
  stroke:none;
}

#repofab:hover,
#helpfab:hover{
  color:var(--t1);
  border-color:rgba(var(--acc-rgb),.28);
  background:rgba(var(--acc-rgb),.1);
}

#mmtoggle{
  position:absolute;
  right:182px;
  bottom:50px;
  font-size:10px;
  z-index:10;
}

#minimap{
  position:absolute;
  right:13px;
  bottom:50px;
  width:160px;
  height:110px;
  overflow:hidden;
  pointer-events:none;
  z-index:10;
  background:rgba(245,247,250,.96);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  box-shadow:var(--shadow);
}

body.dark #minimap{background:rgba(21,26,32,.96)}

#minimap svg{display:block;width:100%;height:100%}

#empty-state{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  color:var(--t3);
  transition:opacity .35s;
  z-index:1;
  pointer-events:none;
}

#cw.has-nodes #empty-state{
  opacity:0;
  visibility:hidden;
}

.empty-icon{
  width:54px;
  height:54px;
  opacity:.42;
  color:var(--t3);
}

.empty-title{
  margin-top:4px;
  color:var(--t2);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
}

.empty-sub{
  margin-bottom:6px;
  color:var(--t3);
  font-size:12.5px;
}

.empty-btn{
  height:34px;
  padding:0 16px;
  display:flex;
  align-items:center;
  gap:6px;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t1);
  cursor:pointer;
  pointer-events:all;
  font-size:12px;
  font-weight:600;
}

#cw.has-nodes #empty-state .empty-btn{
  pointer-events:none;
}

.prh{
  position:sticky;
  top:0;
  z-index:2;
  padding:12px 16px 10px;
  background:var(--bg1);
  border-bottom:1px solid var(--b3);
  color:var(--t1);
  font-size:13px;
  font-weight:700;
  letter-spacing:-.01em;
}

.prs{padding:12px 16px 0}

.prl{
  margin:2px 0 5px;
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.pri,
.prta,
.prsel,
.ui-modal-input{
  width:100%;
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t1);
  outline:none;
}

.pri,
.prsel{
  height:32px;
  padding:0 9px;
  margin-bottom:10px;
  font-size:12px;
}

.prta{
  min-height:56px;
  padding:8px 9px;
  margin-bottom:10px;
  resize:vertical;
  line-height:1.5;
  font-size:12px;
}

.pri:focus,
.prta:focus,
.prsel:focus,
.ui-modal-input:focus{
  border-color:rgba(var(--acc-rgb),.5);
  box-shadow:0 0 0 2px var(--acc-l);
}

.rg{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin-bottom:10px;
}

.rs{
  height:22px;
  border:none;
  border-radius:var(--r2);
  cursor:pointer;
  position:relative;
  outline:1px solid transparent;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16),0 0 0 1px rgba(0,0,0,.16);
  filter:saturate(1.08);
}

.rs:hover{transform:translateY(-1px);filter:saturate(1.16) brightness(1.03)}

.rs.on{
  outline:2px solid var(--t1);
  outline-offset:0;
}

.rs-custom{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.1),rgba(255,255,255,.02)),var(--bg2);
  border:1px solid var(--b2);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.03);
  filter:none;
}

.rs-custom:hover{
  transform:translateY(-1px);
  filter:none;
  background:linear-gradient(135deg,rgba(var(--acc-rgb),.14),rgba(255,255,255,.03)),var(--bg3);
  border-color:rgba(var(--acc-rgb),.28);
}

.rs-custom.on{
  outline:none;
  border-color:rgba(var(--acc-rgb),.36);
  box-shadow:inset 0 0 0 1px rgba(var(--acc-rgb),.26);
}

.rs-custom-icon{
  width:12px;
  height:12px;
  fill:none;
  stroke:#fff;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.tbb-chip{
  width:10px;
  height:10px;
  border-radius:var(--r1);
  border:1px solid var(--b3);
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}

.tbg{
  display:flex;
  gap:5px;
  margin-bottom:10px;
}

.tbg-wrap{flex-wrap:wrap}

.tbb{
  flex:1;
  height:28px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--b3);
  border-radius:var(--r2);
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  font-size:11px;
}

.tbb-color{
  flex:0 0 calc(50% - 3px);
  justify-content:flex-start;
  gap:6px;
}

.tbb-half{
  flex:0 0 calc(50% - 3px);
}

.pr-stack{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}

.pr-color-input{
  padding:4px 6px;
  cursor:pointer;
}

.pr-color-input.is-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:0;
  border:0;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
}

.pr-color-input::-webkit-color-swatch-wrapper{padding:0}
.pr-color-input::-webkit-color-swatch{border:none;border-radius:var(--r2)}

.pr-aux-actions{
  margin-top:2px;
  margin-bottom:2px;
}

.pr-aux-actions .tbb{
  width:100%;
}

.pr-secondary-btn{
  background:var(--bg2);
  border-color:var(--b2);
  color:var(--t1);
}

.pr-lock-card{
  padding:14px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),transparent 56%),var(--bg2);
  border:1px solid rgba(var(--acc-rgb),.18);
  border-radius:var(--r3);
}

.pr-lock-kicker{
  margin-bottom:7px;
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.pr-lock-title{
  color:var(--t1);
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
}

.pr-lock-copy,
.pr-lock-note{
  margin-top:8px;
  color:var(--t2);
  font-size:12px;
  line-height:1.65;
}

.pr-lock-pill{
  width:max-content;
  margin-top:12px;
  padding:5px 9px;
  background:rgba(var(--acc-rgb),.1);
  border:1px solid rgba(var(--acc-rgb),.22);
  border-radius:var(--r-pill);
  color:var(--acc);
  font-size:11px;
  font-weight:700;
}

.pr-fill-card{
  margin-bottom:12px;
  padding:12px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.04),transparent 58%),var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  --fill-accent:var(--acc);
  --fill-percent:35%;
}

.pr-fill-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.pr-fill-label{
  color:var(--t2);
  font-size:12px;
  font-weight:600;
}

.pr-fill-pill{
  min-width:50px;
  padding:4px 8px;
  text-align:center;
  background:rgba(var(--acc-rgb),.08);
  border:1px solid rgba(var(--acc-rgb),.2);
  border-radius:var(--r-pill);
  color:var(--t1);
  font-size:11px;
  font-weight:700;
  font-variant-numeric:tabular-nums;
}

.pr-fill-input-wrap{
  min-width:118px;
  height:30px;
  padding:0;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) 30px 24px;
  align-items:center;
  gap:0;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),transparent 75%),var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03);
  overflow:hidden;
  transition:border-color .14s,background .14s,box-shadow .14s;
}

.pr-fill-input-wrap:hover{
  border-color:rgba(var(--acc-rgb),.28);
}

.pr-fill-input-wrap:focus-within{
  border-color:rgba(var(--acc-rgb),.42);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.18), inset 0 1px 0 rgba(255,255,255,.03);
}

.pr-fill-input{
  width:100%;
  padding:0 6px;
  background:transparent;
  border:none;
  color:var(--t1);
  font-size:12px;
  font-weight:700;
  text-align:center;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  outline:none;
  -moz-appearance:textfield;
}

.pr-fill-input::-webkit-outer-spin-button,
.pr-fill-input::-webkit-inner-spin-button{
  -webkit-appearance:none;
  margin:0;
}

.pr-fill-suffix{
  min-width:30px;
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(var(--acc-rgb),.08);
  border-left:1px solid rgba(var(--acc-rgb),.14);
  color:var(--t2);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
}

.pr-fill-step{
  height:100%;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0;
  background:transparent;
  border:none;
  color:var(--t2);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  line-height:1;
  transition:background .14s,color .14s;
}

.pr-fill-step:hover{
  background:rgba(var(--acc-rgb),.08);
  color:var(--t1);
}

#pfilldec{
  border-right:1px solid rgba(var(--acc-rgb),.12);
}

#pfillinc{
  border-left:1px solid rgba(var(--acc-rgb),.12);
}

.pr-fill-presets{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:12px;
}

.pr-chip{
  min-width:42px;
  height:26px;
  padding:0 8px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r2);
  color:var(--t2);
  cursor:pointer;
  font-size:11px;
  font-weight:600;
}

.pr-chip:hover,
.pr-chip.on{
  background:rgba(var(--acc-rgb),.1);
  border-color:rgba(var(--acc-rgb),.26);
  color:var(--t1);
}

.pr-range{
  width:100%;
  accent-color:var(--acc);
}

.pr-range-rich{
  -webkit-appearance:none;
  appearance:none;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--fill-accent) 0,var(--fill-accent) var(--fill-percent),var(--bg3) var(--fill-percent),var(--bg3) 100%);
  outline:none;
}

.pr-range-rich::-webkit-slider-thumb{
  -webkit-appearance:none;
  appearance:none;
  width:18px;
  height:18px;
  border-radius:50%;
  background:var(--fill-accent);
  border:2px solid var(--bg1);
  box-shadow:0 2px 10px rgba(7,10,14,.18);
  cursor:pointer;
}

.pr-range-rich::-moz-range-thumb{
  width:18px;
  height:18px;
  border:none;
  border-radius:50%;
  background:var(--fill-accent);
  box-shadow:0 2px 10px rgba(7,10,14,.18);
  cursor:pointer;
}

.pr-range-rich::-moz-range-track{
  height:8px;
  border:none;
  border-radius:999px;
  background:transparent;
}

.pdv{
  height:1px;
  margin:4px 16px 10px;
  background:var(--b3);
}

.pstat{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:0 16px;
  margin-bottom:7px;
}

.pstat span{
  font-size:11px;
  font-variant-numeric:tabular-nums;
}

.pstat span:first-child{color:var(--t2)}
.pstat span:last-child{color:var(--t1);font-weight:600}

.ci{
  display:flex;
  align-items:center;
  gap:7px;
  margin:0 16px 5px;
  padding:6px 9px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  font-size:11px;
}

.cdot{
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}

.clbl{
  flex:1;
  color:var(--t2);
}

.cdel{
  padding:0 2px;
  color:var(--t3);
  cursor:pointer;
  line-height:1;
}

.cdel:hover{color:var(--danger)}

.delbtn{
  width:calc(100% - 32px);
  height:30px;
  margin:8px 16px 14px;
  background:var(--danger-bg);
  border:1px solid rgba(165,92,100,.36);
  border-radius:var(--r3);
  color:var(--danger);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}

.delbtn:hover{filter:brightness(1.04)}

.pempty{
  padding:42px 20px;
  text-align:center;
  color:var(--t3);
  font-size:12.5px;
  line-height:2;
}

.tip{
  padding:0 16px 10px;
  color:var(--t3);
  font-size:11px;
  line-height:1.65;
}

#load-modal,
#exp-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,11,15,.44);
  backdrop-filter:blur(10px);
  z-index:100;
}

#load-modal.open,
#exp-modal.open{display:flex}

#drop-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(8,11,15,.56);
  backdrop-filter:blur(12px);
  z-index:9400;
}

#drop-modal.open{display:flex}

.load-box,
.exp-box{
  position:relative;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r4);
  box-shadow:0 28px 64px rgba(5,9,13,.28);
}

.load-box{
  width:min(760px,100%);
  max-height:min(720px,calc(100dvh - 48px));
  display:flex;
  flex-direction:column;
  padding:24px;
}

.drop-box{
  position:relative;
  width:min(680px,100%);
  max-height:min(720px,calc(100dvh - 48px));
  overflow:auto;
  padding:24px;
  background:var(--bg1);
  border:1px solid rgba(var(--acc-rgb),.24);
  border-radius:var(--r4);
  box-shadow:0 28px 64px rgba(5,9,13,.34);
}

.load-close,
.load-icon-btn,
.drop-close{
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r2);
  color:var(--t3);
  cursor:pointer;
}

.load-close{
  position:absolute;
  top:16px;
  right:16px;
  width:28px;
  height:28px;
  font-size:12px;
}

.drop-close{
  position:absolute;
  top:16px;
  right:16px;
  width:28px;
  height:28px;
  font-size:12px;
}

.load-close:hover,
.load-icon-btn:hover,
.drop-close:hover{
  background:var(--bg2);
  border-color:var(--b3);
  color:var(--t1);
}

.load-head{
  margin-bottom:18px;
  padding-right:36px;
}

.load-kicker,
.exp-kicker{
  margin-bottom:8px;
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.load-title,
.exp-title{
  color:var(--t1);
  font-size:24px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.1;
}

.load-subtitle,
.exp-subtitle{
  margin-top:8px;
  color:var(--t2);
  font-size:12.5px;
  line-height:1.6;
}

.load-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:14px;
}

.load-btn{
  min-height:34px;
  padding:0 12px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t1);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}

.load-btn:hover{
  background:var(--bg3);
  border-color:rgba(var(--acc-rgb),.24);
}

.load-btn-primary{
  background:var(--acc);
  border-color:transparent;
  color:#fff;
}

.load-btn.is-active{
  background:rgba(var(--acc-rgb),.1);
  border-color:rgba(var(--acc-rgb),.28);
  color:var(--t1);
}

.load-btn-primary:hover{filter:brightness(1.05)}

.drop-stage{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.drop-kicker{
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.drop-title{
  color:var(--t1);
  font-size:24px;
  font-weight:700;
  letter-spacing:-.03em;
  line-height:1.08;
}

.drop-copy{
  color:var(--t2);
  font-size:12.5px;
  line-height:1.65;
}

.drop-zone{
  min-height:248px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:28px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.08),rgba(var(--acc-rgb),.03));
  border:1px dashed rgba(var(--acc-rgb),.34);
  border-radius:var(--r4);
  text-align:center;
}

.drop-zone-icon{
  width:54px;
  height:54px;
  display:grid;
  place-items:center;
  border-radius:var(--r4);
  background:rgba(var(--acc-rgb),.12);
  border:1px solid rgba(var(--acc-rgb),.26);
  color:var(--acc);
}

.drop-zone-icon svg{
  width:24px;
  height:24px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.drop-zone-title{
  color:var(--t1);
  font-size:20px;
  font-weight:700;
}

.drop-zone-copy{
  max-width:460px;
  color:var(--t2);
  font-size:12.5px;
  line-height:1.7;
}

.drop-chip-row{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
}

.drop-chip{
  min-height:28px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bg1);
  border:1px solid rgba(var(--acc-rgb),.2);
  border-radius:var(--r3);
  color:var(--t2);
  font-size:11px;
  font-weight:600;
}

.drop-panel{
  padding:16px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.drop-panel-head{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:12px;
}

.drop-panel-title{
  color:var(--t1);
  font-size:14px;
  font-weight:700;
}

.drop-panel-copy{
  color:var(--t3);
  font-size:11px;
  line-height:1.55;
}

.drop-file-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.drop-file{
  width:100%;
  padding:12px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  color:var(--t1);
  cursor:pointer;
  text-align:left;
}

.drop-file:hover{
  border-color:rgba(var(--acc-rgb),.24);
  background:rgba(var(--acc-rgb),.05);
}

.drop-file.is-active{
  border-color:rgba(var(--acc-rgb),.32);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.14) inset;
}

.drop-file-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.drop-file-name{
  color:var(--t1);
  font-size:13px;
  font-weight:700;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drop-file-meta{
  color:var(--t3);
  font-size:11px;
  font-weight:600;
}

.drop-file-open{
  flex-shrink:0;
  color:var(--acc);
  font-size:11px;
  font-weight:700;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.drop-summary{
  display:grid;
  grid-template-columns:120px minmax(0,1fr);
  gap:10px 12px;
  padding:14px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.drop-summary-label{
  color:var(--t3);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.drop-summary-value{
  color:var(--t1);
  font-size:12.5px;
  font-weight:600;
  min-width:0;
}

.drop-summary-value.is-file{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.drop-status{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 14px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.drop-status.is-error{
  border-color:rgba(165,92,100,.34);
  background:rgba(165,92,100,.08);
}

.drop-status-dot{
  width:10px;
  height:10px;
  margin-top:4px;
  flex-shrink:0;
  border-radius:50%;
  background:var(--acc);
}

.drop-status.is-error .drop-status-dot{
  background:#c16b77;
}

.drop-status-text{
  color:var(--t2);
  font-size:12px;
  line-height:1.6;
}

.drop-status.is-error .drop-status-text{
  color:#dfb0b6;
}

.drop-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:10px;
}

.drop-actions .load-btn{
  min-width:136px;
}

.drop-chooser-note{
  color:var(--t3);
  font-size:11px;
  line-height:1.5;
}

.drop-spinner{
  width:18px;
  height:18px;
  border:2px solid rgba(var(--acc-rgb),.2);
  border-top-color:var(--acc);
  border-radius:50%;
  animation:drop-spin .8s linear infinite;
}

@keyframes drop-spin{
  to{transform:rotate(360deg);}
}

.load-import-wrap{
  max-height:0;
  opacity:0;
  overflow:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:max-height .22s ease,opacity .18s ease,transform .18s ease,margin .18s ease;
}

.load-import-wrap.is-open{
  max-height:520px;
  margin-bottom:14px;
  opacity:1;
  overflow:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.load-import-card{
  padding:14px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.load-import-head{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.load-import-title{
  color:var(--t1);
  font-size:13px;
  font-weight:700;
}

.load-import-copy{
  color:var(--t3);
  font-size:11px;
  line-height:1.5;
}

.load-import-toolbar,
.load-import-actions{
  display:flex;
  align-items:flex-start;
  gap:10px;
  margin-top:12px;
}

.load-import-copy-inline{
  padding-top:6px;
}

.load-import-label{
  display:block;
  margin-top:12px;
  color:var(--t2);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.load-import-text{
  width:100%;
  min-height:164px;
  margin-top:8px;
  padding:12px;
  resize:vertical;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t1);
  font:12px/1.55 ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;
}

.load-import-text::placeholder{
  color:var(--t3);
}

.load-import-text:focus{
  outline:none;
  border-color:rgba(var(--acc-rgb),.38);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.14);
}

.load-import-status{
  display:flex;
  align-items:flex-start;
  gap:8px;
  margin-top:12px;
  padding:10px 12px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r2);
  color:var(--t2);
  font-size:11px;
  line-height:1.45;
}

.load-import-status-dot{
  width:8px;
  height:8px;
  margin-top:4px;
  border-radius:50%;
  flex-shrink:0;
  background:var(--t3);
}

.load-import-status.is-valid{
  border-color:rgba(92,128,97,.3);
  color:var(--t1);
}

.load-import-status.is-valid .load-import-status-dot{
  background:#6f9a74;
}

.load-import-status.is-invalid{
  border-color:rgba(165,92,100,.34);
  color:#d7a5ab;
}

.load-import-status.is-invalid .load-import-status-dot{
  background:#c16b77;
}

.load-import-actions{
  justify-content:flex-end;
}

.load-import-actions .load-btn{
  min-width:132px;
}

.load-list-wrap{
  flex:1;
  min-height:0;
  padding:14px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  overflow:auto;
}

.load-list-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.load-list-head-main{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.load-list-title{
  color:var(--t1);
  font-size:13px;
  font-weight:700;
}

.load-list-meta{
  color:var(--t3);
  font-size:11px;
  font-weight:600;
}

.load-list-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.load-list-actions .load-btn{
  height:28px;
  padding:0 10px;
  font-size:11px;
}

#load-list{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.load-item{
  display:grid;
  grid-template-columns:40px minmax(0,1fr) auto;
  gap:12px;
  align-items:center;
  padding:14px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.load-item.is-active{
  border-color:rgba(var(--acc-rgb),.28);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.12) inset;
}

.load-item.is-marked{
  border-color:rgba(var(--acc-rgb),.34);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.16) inset;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.05),rgba(var(--acc-rgb),.02));
}

.load-item-main{
  min-width:0;
  cursor:pointer;
}

.load-item-check{
  display:flex;
  align-items:center;
  justify-content:center;
  align-self:center;
  width:32px;
  min-width:32px;
  height:32px;
  position:relative;
  cursor:pointer;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r2);
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease;
}

.load-item-checkbox{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.load-item-checkbox-ui{
  width:18px;
  height:18px;
  display:inline-block;
  position:relative;
  background:transparent;
  border:1.5px solid rgba(214,223,233,.5);
  border-radius:2px;
  transition:border-color .14s ease,background .14s ease,box-shadow .14s ease,transform .14s ease;
}

.load-item-checkbox-ui::after{
  content:'';
  position:absolute;
  left:5px;
  top:2px;
  width:5px;
  height:9px;
  border-right:2px solid transparent;
  border-bottom:2px solid transparent;
  transform:rotate(45deg);
  transition:border-color .14s ease;
}

.load-item-check:hover{
  border-color:rgba(var(--acc-rgb),.34);
  background:rgba(var(--acc-rgb),.07);
}

.load-item-check:hover .load-item-checkbox-ui{
  border-color:rgba(var(--acc-rgb),.54);
}

.load-item-checkbox:checked + .load-item-checkbox-ui{
  background:var(--acc);
  border-color:var(--acc);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.22);
}

.load-item-checkbox:checked + .load-item-checkbox-ui::after{
  border-color:#fff;
}

.load-item-checkbox:disabled + .load-item-checkbox-ui{
  opacity:.48;
}

.load-item.is-marked .load-item-check{
  border-color:rgba(var(--acc-rgb),.36);
  background:rgba(var(--acc-rgb),.09);
}

.load-item-top{
  display:flex;
  align-items:center;
  gap:8px;
}

.load-item-title{
  color:var(--t1);
  font-size:14px;
  font-weight:700;
  letter-spacing:-.01em;
}

.load-item-badge{
  padding:4px 8px;
  background:rgba(var(--acc-rgb),.08);
  border:1px solid rgba(var(--acc-rgb),.22);
  border-radius:var(--r-pill);
  color:var(--acc);
  font-size:10px;
  font-weight:700;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.load-item-meta,
.load-item-time{
  color:var(--t3);
  font-size:11px;
}

.load-item-meta{margin-top:6px}
.load-item-time{margin-top:4px}

.load-item-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

.load-icon-btn{
  width:30px;
  height:30px;
  border-color:var(--b3);
  font-size:12px;
}

.load-empty{
  min-height:220px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:8px;
}

.load-empty-title{
  color:var(--t1);
  font-size:16px;
  font-weight:700;
}

.load-empty-sub{
  max-width:360px;
  color:var(--t2);
  font-size:12px;
  line-height:1.65;
}

.exp-box{
  width:min(620px,100%);
  max-height:min(760px,calc(100dvh - 48px));
  padding:24px;
  overflow:auto;
}

.exp-head{
  margin-bottom:18px;
  padding-right:36px;
}

.exp-row{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
}

.exp-close{
  position:absolute;
  top:16px;
  right:16px;
  width:28px;
  height:28px;
  display:grid;
  place-items:center;
  background:transparent;
  border:1px solid transparent;
  border-radius:var(--r2);
  color:var(--t3);
  cursor:pointer;
  font-size:12px;
}

.exp-close:hover{
  background:var(--bg2);
  border-color:var(--b3);
  color:var(--t1);
}

.exp-opt{
  min-height:156px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  padding:16px 14px 14px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.045),transparent 48%),var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t2);
  cursor:pointer;
  text-align:left;
  font-size:12px;
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}

.exp-opt:hover{
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.08),transparent 52%),var(--bg3);
  border-color:rgba(var(--acc-rgb),.32);
  box-shadow:0 10px 22px rgba(8,12,16,.12);
  transform:translateY(-1px);
}

.exp-opt.on{
  border-color:rgba(var(--acc-rgb),.34);
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.1),transparent 52%),var(--bg3);
  box-shadow:0 0 0 1px rgba(var(--acc-rgb),.12) inset;
}

.exp-opt-top{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.exp-opt-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border:1px solid rgba(var(--acc-rgb),.28);
  border-radius:var(--r3);
  background:rgba(var(--acc-rgb),.08);
  color:var(--acc);
}

.exp-opt-icon svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.5;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.exp-opt-badge{
  padding:4px 7px;
  border:1px solid var(--b3);
  border-radius:var(--r2);
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.exp-opt-label{
  display:block;
  color:var(--t1);
  font-size:17px;
  font-weight:700;
  letter-spacing:-.03em;
}

.exp-opt-desc{
  flex:1;
  color:var(--t2);
  font-size:12px;
  line-height:1.55;
}

.exp-opt-meta{
  color:var(--t3);
  font-size:11px;
  font-weight:600;
  letter-spacing:.01em;
}

.exp-settings{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:14px;
}

.exp-field{
  display:flex;
  flex-direction:column;
  gap:7px;
}

.exp-field-label,
.exp-group-label,
.exp-preview-label{
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.exp-select,
.exp-input{
  height:36px;
  padding:0 10px;
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t1);
  outline:none;
}

.exp-select:focus,
.exp-input:focus{
  border-color:rgba(var(--acc-rgb),.5);
  box-shadow:0 0 0 2px var(--acc-l);
}

.exp-group{
  margin-top:14px;
  padding:14px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.exp-group.is-disabled{
  opacity:.58;
}

.exp-group-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.exp-group-value{
  color:var(--t2);
  font-size:12px;
  font-weight:600;
}

.exp-choice-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.exp-choice{
  min-height:32px;
  padding:0 12px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  color:var(--t2);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}

.exp-choice:hover,
.exp-choice.on{
  background:rgba(var(--acc-rgb),.08);
  border-color:rgba(var(--acc-rgb),.26);
  color:var(--t1);
}

.exp-choice.is-disabled,
.exp-choice:disabled,
.tbb.is-disabled,
.tbb:disabled{
  opacity:.45;
  cursor:not-allowed;
}

.exp-range{
  width:100%;
  accent-color:var(--acc);
}

.exp-preview{
  margin-top:14px;
  padding:13px 14px;
  display:grid;
  gap:8px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.exp-file-row{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}

.exp-file-input{
  margin-bottom:0;
}

.exp-file-ext{
  min-width:52px;
  height:34px;
  padding:0 10px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r2);
  color:var(--t2);
  font-size:12px;
  font-weight:700;
}

.exp-actions{
  margin-top:14px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
}

.exp-cancel{
  height:36px;
  min-width:120px;
  background:transparent;
  border:1px solid var(--b3);
  border-radius:var(--r3);
  color:var(--t2);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}

.exp-cancel:hover{
  background:var(--bg2);
  border-color:var(--b2);
  color:var(--t1);
}

.exp-submit{
  height:36px;
  min-width:120px;
  padding:0 16px;
  background:var(--acc);
  border:1px solid transparent;
  border-radius:var(--r3);
  color:#fff;
  cursor:pointer;
  font-size:12px;
  font-weight:700;
}

.exp-submit:hover{filter:brightness(1.05)}

@media (max-width:760px){
  #load-modal,
  #exp-modal,
  #drop-modal{
    padding:20px;
  }

  .load-box,
  .drop-box{
    padding:20px;
  }

  .load-title,
  .exp-title,
  .drop-title{
    font-size:21px;
  }

  .load-toolbar{
    flex-direction:column;
  }

  .drop-actions{
    flex-direction:column;
  }

  .drop-actions .load-btn{
    width:100%;
  }

  .drop-summary{
    grid-template-columns:1fr;
  }

  .load-import-toolbar,
  .load-import-actions{
    flex-direction:column;
  }

  .load-import-actions .load-btn{
    width:100%;
  }

  .load-item{
    grid-template-columns:auto 1fr;
  }

  .load-item-actions{
    justify-content:flex-start;
    grid-column:1 / -1;
    padding-left:28px;
  }

  .load-list-head{
    flex-direction:column;
  }

  .load-list-actions{
    width:100%;
  }

  .load-list-actions .load-btn{
    flex:1;
  }

  .exp-settings,
  .exp-row{
    grid-template-columns:1fr;
  }

  .exp-opt{
    min-height:auto;
  }

  .exp-actions{
    flex-direction:column-reverse;
  }

  .exp-cancel,
  .exp-submit{
    width:100%;
  }
}

.elabel{
  fill:var(--t2);
  pointer-events:none;
  font-size:11px;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

.elabel-bg{
  fill:var(--bg1);
  pointer-events:none;
}
.elabel-hit{
  fill:transparent;
  cursor:move;
}

.node-g{cursor:move}
.cont-g{cursor:move}
.node-g.locked,
.cont-g.locked{cursor:default}

#app.is-readonly .node-g,
#app.is-readonly .cont-g,
#app.is-readonly .elabel-hit{
  cursor:default;
}

.node-g .nt{font-weight:600}
.node-g>rect,.cont-g>rect{stroke-width:.9}

.lock-badge{
  filter:drop-shadow(0 2px 8px rgba(6,10,14,.14));
}

.pb{
  opacity:0;
  pointer-events:none;
  cursor:crosshair;
}

.node-g:hover .pb{
  opacity:1;
  pointer-events:all;
}

#app.is-readonly .node-g:hover .pb,
#app.is-readonly #csvg.cmode .node-g.ct-hi .pb{
  opacity:0;
  pointer-events:none;
}

#csvg.cmode .node-g .pb{
  opacity:0;
  pointer-events:none;
}

#csvg.cmode .node-g.ct-hi .pb{
  opacity:1;
  pointer-events:all;
}

.pb:hover{
  opacity:1!important;
  pointer-events:all!important;
}

.pb-bridge{fill:transparent;pointer-events:all}

.pb circle{
  fill:var(--bg1);
  stroke:var(--acc);
  stroke-width:1.35;
}

.pb:hover circle{fill:var(--acc-l)}
body.dark .pb circle{fill:var(--bg2)}
.ct-port circle{
  fill:var(--acc-l)!important;
  stroke:var(--acc)!important;
  stroke-width:1.8!important;
}
body.dark .ct-port circle{
  fill:rgba(var(--acc-rgb),.24)!important;
}

.rz-h{fill:transparent}
.rz-v{
  shape-rendering:geometricPrecision;
  vector-effect:non-scaling-stroke;
}
.rz-v-side{
  fill:rgba(var(--acc-rgb),.14);
  stroke:rgba(208,218,231,.62);
  stroke-width:1;
  opacity:.94;
}
.rz-v-corner{
  fill:rgba(22,28,35,.72);
  stroke:rgba(220,229,239,.72);
  stroke-width:1;
  opacity:.98;
}
body.dark .rz-v-side{
  fill:rgba(var(--acc-rgb),.22);
  stroke:rgba(226,235,241,.64);
}
body.dark .rz-v-corner{
  fill:rgba(15,20,26,.88);
  stroke:rgba(226,235,241,.78);
}
.rz-h-br,
.rz-h-tl{cursor:nwse-resize}
.rz-h-tr,
.rz-h-bl{cursor:nesw-resize}
.rz-h-t,
.rz-h-b{cursor:ns-resize}
.rz-h-l,
.rz-h-r{cursor:ew-resize}

.ep{
  fill:none;
  cursor:pointer;
  transition:stroke-width .12s,opacity .12s;
}

.ep:hover,
.ep.sel{stroke-width:3!important}

.ep.dash{stroke-dasharray:5 4}

.edge-hit{
  fill:none;
  stroke:transparent;
  stroke-width:14;
  pointer-events:stroke;
  cursor:pointer;
}

.wp-dot{
  fill:var(--acc);
  stroke:var(--bg1);
  stroke-width:2;
  cursor:move;
}

.wp-add{
  fill:none;
  stroke:var(--acc);
  stroke-width:1.5;
  stroke-dasharray:2 2;
  opacity:.7;
  cursor:cell;
}

.wp-add:hover{
  fill:rgba(var(--acc-rgb),.18);
  opacity:1;
}

#csvg.cmode{cursor:crosshair}
#csvg.cmode .node-g{cursor:pointer}
.ct-hi>rect{stroke:var(--acc)!important;stroke-width:2!important}

.rband{
  fill:rgba(var(--acc-rgb),.08);
  stroke:var(--acc);
  stroke-width:1;
  stroke-dasharray:4 3;
}

.msel-ring{
  fill:none;
  stroke:var(--acc);
  stroke-width:1.5;
  stroke-dasharray:4 3;
  pointer-events:none;
}

.align-guide{
  stroke:var(--acc);
  stroke-width:1;
  stroke-dasharray:4 4;
  opacity:.9;
  pointer-events:none;
}

#cw,#csvg{touch-action:none}

#ui-modal{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:rgba(9,12,16,.42);
  backdrop-filter:blur(8px);
  z-index:2000;
  overflow:auto;
}

#ui-modal.open{display:flex}

.ui-modal-card{
  position:relative;
  width:min(460px,100%);
  max-height:calc(100dvh - 48px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r4);
  box-shadow:var(--shadow);
  margin:auto;
}

.ui-modal-head{
  padding:18px 20px 10px;
  flex:0 0 auto;
}

.ui-modal-title{
  font-size:15px;
  font-weight:700;
  letter-spacing:-.02em;
}

.ui-modal-body{
  padding:0 20px 18px;
  overflow:auto;
}

.ui-modal-message{
  color:var(--t2);
  font-size:13px;
  line-height:1.55;
  white-space:pre-wrap;
}

.ui-modal-message.is-html{white-space:normal}

.ui-modal-input-wrap{margin-top:14px}

.ui-modal-input{
  height:40px;
  padding:0 12px;
}

.ui-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  padding:0 20px 20px;
  flex:0 0 auto;
}

.ui-modal-btn{
  height:36px;
  padding:0 14px;
  background:var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  color:var(--t1);
  cursor:pointer;
  font-size:12px;
  font-weight:600;
}

.ui-modal-btn-primary{
  background:var(--acc);
  border-color:transparent;
  color:#fff;
}

.ui-modal-btn-primary:hover{filter:brightness(1.05)}
.ui-modal-btn-ghost{background:transparent}

.ui-modal-close{
  position:absolute;
  top:12px;
  right:12px;
  width:30px;
  height:30px;
  border:none;
  border-radius:var(--r3);
  background:transparent;
  color:var(--t2);
  cursor:pointer;
  font-size:14px;
}

.ui-modal-card.help-modal{
  width:min(760px,100%);
}

.ui-modal-card.help-modal .ui-modal-head{
  padding:22px 22px 0;
}

.ui-modal-card.help-modal .ui-modal-title{
  font-size:24px;
  letter-spacing:-.03em;
}

.ui-modal-card.help-modal .ui-modal-body{
  padding:14px 22px 18px;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--acc-rgb),.42) rgba(255,255,255,.03);
  scrollbar-gutter:stable;
}

.ui-modal-card.help-modal .ui-modal-body::-webkit-scrollbar{
  width:12px;
}

.ui-modal-card.help-modal .ui-modal-body::-webkit-scrollbar-track{
  background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.015));
  border-left:1px solid rgba(255,255,255,.04);
}

.ui-modal-card.help-modal .ui-modal-body::-webkit-scrollbar-thumb{
  min-height:56px;
  border:3px solid transparent;
  border-radius:999px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.52),rgba(var(--acc-rgb),.3));
  background-clip:padding-box;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}

.ui-modal-card.help-modal .ui-modal-body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.66),rgba(var(--acc-rgb),.4));
  background-clip:padding-box;
}

.ui-modal-card.help-modal .ui-modal-body::-webkit-scrollbar-corner{
  background:transparent;
}

.ui-modal-card.help-modal .ui-modal-actions{
  padding:16px 22px 22px;
  border-top:1px solid var(--b3);
}

.ui-help-intro{
  margin-bottom:14px;
  color:var(--t2);
  font-size:13px;
  line-height:1.7;
}

.ui-help-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  align-items:start;
}

.ui-help-section{
  padding:14px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
}

.ui-help-section-title{
  margin-bottom:10px;
  color:var(--t3);
  font-size:10px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.ui-help-list{
  display:flex;
  flex-direction:column;
}

.ui-help-row{
  display:grid;
  grid-template-columns:minmax(0,176px) minmax(0,1fr);
  gap:12px;
  align-items:start;
  padding:9px 0;
}

.ui-help-row+.ui-help-row{
  border-top:1px solid var(--b3);
}

.ui-help-keys{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
}

.ui-help-key{
  min-height:24px;
  padding:4px 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:var(--bg1);
  border:1px solid var(--b2);
  border-radius:var(--r2);
  color:var(--t1);
  font-size:11px;
  font-weight:700;
  line-height:1.2;
}

.ui-help-desc{
  color:var(--t2);
  font-size:12px;
  line-height:1.55;
}

.ui-help-accordion{
  margin-top:12px;
  background:var(--bg2);
  border:1px solid var(--b3);
  border-radius:var(--r3);
  overflow:hidden;
}

.ui-help-accordion summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px;
  color:var(--t1);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  list-style:none;
}

.ui-help-accordion summary::-webkit-details-marker{display:none}

.ui-help-accordion[open] summary{
  border-bottom:1px solid var(--b3);
}

.ui-help-accordion-hint{
  color:var(--t3);
  font-size:11px;
  font-weight:600;
}

.ui-help-accordion-hint-open{
  display:none;
}

.ui-help-accordion[open] .ui-help-accordion-hint-closed{
  display:none;
}

.ui-help-accordion[open] .ui-help-accordion-hint-open{
  display:inline;
}

.ui-help-align-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:14px;
}

.ui-help-align-item{
  padding:11px 12px;
  background:var(--bg1);
  border:1px solid var(--b3);
  border-radius:var(--r2);
}

.ui-help-align-item strong{
  display:block;
  margin-bottom:6px;
  color:var(--t1);
  font-size:12px;
  font-weight:700;
}

.ui-help-align-item span{
  color:var(--t2);
  font-size:12px;
  line-height:1.55;
}

.ui-help-note{
  margin-top:12px;
  padding:12px 14px;
  background:rgba(var(--acc-rgb),.08);
  border:1px solid rgba(var(--acc-rgb),.22);
  border-radius:var(--r3);
  color:var(--t2);
  font-size:12px;
  line-height:1.6;
}

.ui-help-credits{
  margin-top:12px;
  padding:14px;
  background:linear-gradient(180deg,rgba(var(--acc-rgb),.06),transparent 72%),var(--bg2);
  border:1px solid var(--b2);
  border-radius:var(--r3);
}

.ui-help-credits-title{
  color:var(--t1);
  font-size:12px;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
}

.ui-help-credits-copy{
  margin-top:8px;
  color:var(--t1);
  font-size:14px;
  font-weight:700;
}

.ui-help-credit-links{
  margin-top:10px;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
}

.ui-help-credit-link,
.ui-help-credit-meta{
  min-height:30px;
  display:inline-flex;
  align-items:center;
  padding:0 10px;
  border:1px solid var(--b3);
  border-radius:var(--r2);
  background:var(--bg1);
  color:var(--t2);
  font-size:12px;
  font-weight:600;
  text-decoration:none;
}

.ui-help-credit-link:hover{
  color:var(--t1);
  border-color:rgba(var(--acc-rgb),.28);
  background:rgba(var(--acc-rgb),.08);
}

@media (max-width:760px){
  #ui-modal{
    padding:14px;
  }

  .ui-modal-card{
    max-height:calc(100dvh - 28px);
  }

  #repofab,
  #helpfab{
    right:145px;
  }

  #mmtoggle{
    right:145px;
  }

  .ui-help-grid,
  .ui-help-align-list{
    grid-template-columns:1fr;
  }

  .ui-help-row{
    grid-template-columns:1fr;
  }

  .ui-modal-card.help-modal .ui-modal-head,
  .ui-modal-card.help-modal .ui-modal-body,
  .ui-modal-card.help-modal .ui-modal-actions{
    padding-left:16px;
    padding-right:16px;
  }

  .ui-modal-card.help-modal .ui-modal-title{
    font-size:21px;
  }
}

@media (max-width:980px){
  .ui-help-grid{
    grid-template-columns:1fr;
  }
}

@media (max-height:760px){
  #ui-modal{
    align-items:flex-start;
  }
}

body.space-pan #cw,
body.space-pan #csvg,
body.space-pan .node-g,
body.space-pan .cont-g,
body.space-pan .ep,
body.space-pan .edge-hit{cursor:grab!important}

body.space-panning #cw,
body.space-panning #csvg,
body.space-panning .node-g,
body.space-panning .cont-g,
body.space-panning .ep,
body.space-panning .edge-hit{cursor:grabbing!important}

#toast-wrap{
  position:fixed;
  right:18px;
  bottom:18px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:2200;
  pointer-events:none;
}

.toast{
  min-width:220px;
  max-width:360px;
  padding:11px 13px;
  background:rgba(21,26,32,.96);
  border:1px solid var(--b2);
  border-radius:var(--r3);
  box-shadow:var(--shadow);
  color:#EFF4FA;
  font-size:12px;
  line-height:1.55;
  opacity:0;
  transform:translateY(6px);
  transition:opacity .16s ease,transform .16s ease;
}

body:not(.dark) .toast{
  background:rgba(245,247,250,.98);
  color:var(--t1);
}

.toast.on{
  opacity:1;
  transform:translateY(0);
}

.toast-success{
  border-color:rgba(var(--acc-rgb),.28);
}

.toast-error{
  border-color:rgba(165,92,100,.34);
}