@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root{
  color-scheme:dark;
  --bg:#0b0d11; --panel:#11141a; --panel2:#161a22; --line:#20242e;
  --txt:#dde3ec; --mut:#7c8698; --dim:#565f6e;
  --acc:#64798f; --acc2:#716a85; --grn:#5aa87f; --red:#c96b6b; --yel:#b89a55;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:14px/1.55 'Inter',system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.hidden{display:none!important}
.muted{color:var(--mut)}
.small{font-size:12px}
.err{color:var(--red);font-size:12.5px;min-height:18px;margin-top:6px}
.spacer{flex:1}
code{color:var(--acc);font-family:var(--mono);font-size:12.5px}
.num{font-variant-numeric:tabular-nums;font-family:var(--mono)}

/* ---------- login ---------- */
#login{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:var(--bg)}
#login::before{content:'';position:fixed;inset:0;background:
  radial-gradient(ellipse 55% 40% at 50% 0%,#3d4ff822,transparent),
  radial-gradient(ellipse 40% 35% at 90% 100%,#8f7bff18,transparent)}
.login-card{position:relative;width:340px;padding:38px 32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(180deg,var(--panel2),var(--panel));box-shadow:0 24px 70px #00000070;text-align:center}
.logo{font-weight:700;font-size:22px;letter-spacing:-.02em}
.logo .g{background:linear-gradient(120deg,var(--acc),var(--acc2));-webkit-background-clip:text;background-clip:text;color:transparent}
.logo.sm{font-size:16px;display:flex;align-items:center;gap:8px}
.mark{display:inline-flex;width:26px;height:26px;border-radius:8px;background:linear-gradient(135deg,var(--acc),var(--acc2));align-items:center;justify-content:center;color:#fff;font-size:14px;font-weight:700}
.login-card .muted{margin-top:4px;font-size:13px}
.login-card input{width:100%;margin:22px 0 12px;padding:11px 14px;text-align:center;font-size:14px;border-radius:11px}
.login-card button{width:100%;padding:11px;border-radius:11px;font-weight:600}

/* ---------- buttons ---------- */
button{background:var(--panel2);border:1px solid var(--line);border-radius:9px;padding:7px 14px;color:var(--txt);font:500 13px 'Inter',sans-serif;cursor:pointer;transition:border-color .12s,transform .05s,background .12s}
button:hover{border-color:#39445a;background:#1a2230}
button:active{transform:translateY(1px)}
button.p{background:linear-gradient(120deg,var(--acc),var(--acc2));border-color:transparent;color:#fff;box-shadow:0 2px 12px #4d5df840}
button.p:hover{filter:brightness(1.1)}
button.d{background:#2a1418;border-color:#4d2027;color:var(--red)}
button.d:hover{border-color:var(--red)}
button.ghost{background:transparent;border-color:transparent;color:var(--mut)}
button.ghost:hover{background:var(--panel2);color:var(--txt);border-color:var(--line)}
button.small{padding:4px 10px;font-size:12px;border-radius:7px}

/* ---------- header ---------- */
header{display:flex;align-items:center;gap:14px;padding:12px 18px;border-bottom:1px solid var(--line);background:linear-gradient(180deg,#0e121a,#0c1016)}
#globalTotals{font-family:var(--mono);font-size:12px;color:var(--mut)}

/* ---------- sidebar tree ---------- */
#projectTree{flex:1;overflow:auto;padding:4px 8px 10px}
.tree-folder{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;cursor:pointer;color:var(--txt);border:1px solid transparent}
.tree-folder:hover{background:var(--panel2)}
.tree-folder.active{background:#1a2030;border-color:#262d3d}
.tree-folder .tw{color:var(--dim);font-size:10px;width:10px}
.tree-folder .pname{font-weight:600;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tree-item{display:flex;align-items:center;gap:8px;padding:5px 10px 5px 30px;border-radius:8px;cursor:pointer;color:var(--mut);font-size:13px;border-left:1px solid var(--line);margin-left:14px}
.tree-item:hover{color:var(--txt);background:var(--panel2)}
.tree-item.active{color:var(--acc);border-left-color:var(--acc);background:#151a26}
.tree-item .ti{width:16px;font-size:11px;filter:grayscale(.4)}
.wrap{display:grid;grid-template-columns:250px 1fr;height:calc(100vh - 49px)}
aside{border-right:1px solid var(--line);display:flex;flex-direction:column;background:#0c1017}
.side-head{display:flex;justify-content:space-between;align-items:center;padding:16px 16px 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);font-weight:600}
.dot{width:8px;height:8px;border-radius:50%;background:#39414e;flex:none}
.dot.on{background:var(--grn);box-shadow:0 0 8px #5aa87f66}
.side-foot{padding:12px 16px;border-top:1px solid var(--line);font-size:11px;font-family:var(--mono)}

/* ---------- launch view ---------- */
.logbox{background:#0c1017;border:1px solid var(--line);border-radius:10px;padding:10px 12px;overflow:auto;max-height:240px;white-space:pre-wrap;font-size:12px;font-family:var(--mono);min-height:60px}
#launchTable td{vertical-align:middle}

main{overflow:auto;display:flex;flex-direction:column}
.proj-head{display:flex;align-items:center;gap:14px;padding:20px 22px 4px}
.proj-head h2{margin:0;font-size:19px;font-weight:700;cursor:pointer;letter-spacing:-.01em}
.proj-head h2:hover{color:var(--acc)}
.pill{font-size:11px;font-weight:600;padding:3px 11px;border-radius:99px;border:1px solid #39414e;color:var(--mut);background:var(--panel)}
.pill.on{border-color:#1d5b40;color:var(--grn);background:#0e2019}

/* ---------- cards ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;padding:14px 22px 6px}
.card{padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(180deg,var(--panel2),var(--panel))}
.card .k{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);font-weight:600}
.card .v{font-size:19px;margin-top:5px;font-family:var(--mono);font-weight:500}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:2px;padding:10px 22px 0;border-bottom:1px solid var(--line)}
.tab{background:none;border:none;border-bottom:2px solid transparent;color:var(--mut);padding:9px 14px;cursor:pointer;font:600 13px 'Inter',sans-serif;border-radius:0}
.tab:hover{color:var(--txt);background:none;border-color:transparent}
.tab.active{color:#fff;border-bottom-color:var(--acc)}
.tabpane{padding:16px 22px 28px;overflow:auto;flex:1}

/* ---------- controls ---------- */
.toolbar{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0;align-items:center}
label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:7px 0;color:var(--mut);font-size:12.5px}
label.chk{gap:8px}
input,select{background:#0d1119;border:1px solid var(--line);border-radius:8px;padding:6px 10px;color:var(--txt);font:13px 'Inter',sans-serif;transition:border-color .12s}
input:focus,select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 3px #6d8dff22}

/* ---------- settings grid ---------- */
.set-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:14px}
fieldset{border:1px solid var(--line);border-radius:14px;padding:14px 16px;margin:0;background:var(--panel)}
legend{color:var(--dim);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:0 6px}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--dim);font-weight:600;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;padding:8px 12px;border-bottom:1px solid var(--line)}
td{padding:8px 12px;border-bottom:1px solid #12161f}
tbody tr:hover td{background:#121722}
td.num,th.num{text-align:right;font-family:var(--mono)}
td.mut{color:var(--mut)}

/* ---------- QR modal ---------- */
#qrModal{position:fixed;inset:0;background:#000000b0;display:flex;align-items:center;justify-content:center;z-index:50}
.qr-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;max-height:80vh;overflow:auto;min-width:320px;max-width:560px}
.qr-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.qr-item{display:flex;gap:14px;align-items:center;padding:10px;border:1px solid var(--line);border-radius:12px;margin-bottom:8px;background:#0c1017}
.qr-item canvas{border-radius:8px;background:#fff;padding:4px}
.qr-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.qr-addr{font-family:var(--mono);font-size:11.5px;word-break:break-all;color:var(--mut);cursor:pointer}
.qr-addr:hover{color:var(--acc)}

/* ---------- log ---------- */
#log{background:#0c1017;border:1px solid var(--line);border-radius:14px;padding:12px 14px;overflow:auto;height:calc(100vh - 300px);white-space:pre-wrap;font-size:12.5px;font-family:var(--mono)}
#log div{padding:1px 0;border-bottom:1px solid #10151e}
.l-ok{color:var(--grn)}
.l-err{color:var(--red)}
.l-warn{color:var(--yel)}

/* ---------- debug bar ---------- */
#debugBar{position:fixed;left:0;right:0;bottom:0;z-index:99;background:#2a1418;border-top:1px solid var(--red);color:var(--red);font:11.5px var(--mono);padding:8px 14px;max-height:160px;overflow:auto;cursor:pointer;word-break:break-all}

/* ---------- misc ---------- */
.empty{margin:auto;text-align:center;color:var(--mut);display:flex;flex-direction:column;gap:16px;font-size:15px}
.empty .p{padding:11px 22px;border-radius:12px}
#accessUrl{word-break:break-all}