:root{--bg: #f6f7fb;--panel: #ffffff;--text: #111827;--muted: #6b7280;--border: #e5e7eb;--shadow: 0 10px 25px rgba(0,0,0,.06);--radius: 14px;--codebg: #0b1220;--codefg: #e5e7eb}*{box-sizing:border-box}html,body,#root{height:100%}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial;background:var(--bg);color:var(--text)}.docode{height:100vh;display:flex;flex-direction:column}.header{padding:26px 22px 18px;background:linear-gradient(135deg,#0f172a,#020617);color:#fff;border-radius:0 0 22px 22px;box-shadow:0 15px 40px #00000040}.header h1{margin:0;font-size:46px;letter-spacing:1px}.tagline{margin-top:6px;color:#c7d2fe;font-size:14px}.brandRow{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}.creator{font-size:13px;opacity:.85}.header p{margin:6px 0 0;color:var(--muted)}.toolbar{display:flex;justify-content:flex-start;margin-top:16px}.selectors{display:flex;gap:14px;align-items:center;flex-wrap:wrap}.inputRow{display:flex;gap:12px;margin-top:14px;align-items:center;flex-wrap:wrap}.inputRow input{flex:1;min-width:320px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;outline:none;background:#fff}select,button{padding:10px 12px;border-radius:10px;border:1px solid var(--border);background:#fff;color:var(--text)}button{cursor:pointer;border-radius:12px;padding:10px 14px;font-weight:600;border:1px solid transparent;background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;box-shadow:0 6px 18px #6366f159;transition:all .2s ease}button:hover{transform:translateY(-1px);box-shadow:0 10px 25px #6366f173}button:disabled{opacity:.6;transform:none;box-shadow:none}.helpBtn{background:linear-gradient(135deg,#0ea5e9,#0284c7);box-shadow:0 6px 18px #0284c759;white-space:nowrap}.tokenHelpCard{width:100%;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.25);background:#0f172a8c;color:#e2e8f0}.tokenHelpHeader{display:flex;align-items:center;justify-content:space-between;gap:10px}.tokenHelpClose{padding:6px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:#ffffff14;box-shadow:none}.tokenHelpCard ol{margin:10px 0 6px 18px;padding:0}.tokenHelpCard li{margin-bottom:6px}.tokenHelpCard p{margin:8px 0 0;color:#cbd5e1}.tokenHelpCard a{color:#93c5fd}.main{flex:1;display:grid;grid-template-columns:360px 1fr;gap:14px;padding:0 18px 18px;min-height:0}.panel{display:flex;flex-direction:column;min-height:0;background:#ffffffe6;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:18px;border:1px solid rgba(0,0,0,.06);box-shadow:0 18px 40px #00000014}.panelMeta{min-width:0}.panelHeader{padding:12px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}.panelHeaderRow{flex-direction:row;align-items:center;justify-content:space-between}.copyBtn{padding:6px 12px;font-size:13px;border-radius:10px;background:linear-gradient(135deg,#6366f1,#4f46e5);box-shadow:0 4px 12px #6366f159;white-space:nowrap}.copyBtn.copied{background:linear-gradient(135deg,#22c55e,#16a34a);box-shadow:0 4px 12px #22c55e66}.panelHeader>div:first-child{flex:1 1 100%;min-width:0}.panelTitle{font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.panelSubtitle{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.treeBody{background:#ff00000d;padding:10px;overflow-y:auto;overflow-x:hidden;min-height:0;flex:1}.treeBody::-webkit-scrollbar{width:8px}.treeBody::-webkit-scrollbar-thumb{background:#a5b4fc;border-radius:8px}.viewerBody{padding:12px;overflow:auto;min-height:0}.codeBox{margin-top:10px;background:linear-gradient(180deg,#020617,#020617);border:1px solid rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px #ffffff0a;color:var(--codefg);border-radius:12px;padding:12px;overflow:auto;max-height:calc(100vh - 260px);white-space:pre;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono;font-size:12.5px;line-height:1.45}.badgeError{margin:0 18px 12px;padding:10px 12px;background:#fff1f2;border:1px solid #fecdd3;border-radius:12px;color:#9f1239}.exportButtons{display:flex;gap:8px}.exportButtons button{white-space:nowrap}.footer{text-align:center;font-size:12px;color:var(--muted);padding:14px}.brandTitle{display:flex;align-items:center;gap:16px}.logo{object-fit:contain;width:100px;height:100px;background:radial-gradient(circle at center,rgba(99,102,241,.35),transparent 70%);border-radius:14px}.creator a{color:#a5b4fc;text-decoration:none;font-weight:500}.creator a:hover{text-decoration:underline}