:root{--bg:#0f172a;--surface:#111827;--surface-2:#172033;--border:#2b3447;--text:#e5e7eb;--muted:#94a3b8;--primary:#38bdf8;--primary-2:#0284c7;--danger:#ef4444;--white:#fff;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:var(--bg);color:var(--text);margin:0}button,input,select{font:inherit}button{border:1px solid var(--border);color:var(--text);cursor:pointer;background:#1f2937;border-radius:10px;padding:8px 12px;transition:all .15s}button:hover{border-color:var(--primary);transform:translateY(-1px)}button.primary{background:var(--primary-2);border-color:var(--primary);color:#fff}button.danger{color:#fecaca;border-color:#ef444473;padding:6px 10px}button.wide{width:100%;margin-bottom:8px}.app{flex-direction:column;min-height:100vh;display:flex}.topbar{border-bottom:1px solid var(--border);background:linear-gradient(135deg,#0f172a,#172033);justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;display:flex}.topbar h1{letter-spacing:-.02em;margin:0;font-size:22px}.topbar p{color:var(--muted);margin:4px 0 0;font-size:13px}.top-actions,.mini-actions,.sharebar{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.toolbar{border-bottom:1px solid var(--border);background:var(--surface);grid-template-columns:1.3fr 1fr repeat(4,minmax(120px,.65fr)) auto;align-items:end;gap:12px;padding:12px 16px;display:grid}.toolbar label{color:var(--muted);flex-direction:column;gap:5px;font-size:12px;display:flex}.toolbar input,.toolbar select{border:1px solid var(--border);color:var(--text);background:#0b1220;border-radius:9px;min-height:38px;padding:8px 10px}.toolbar input[type=color]{min-width:54px;padding:2px}.toolbar .checkbox{color:var(--text);flex-direction:row;align-items:center;padding-bottom:8px}.workspace{flex:1;grid-template-columns:260px minmax(360px,1fr) minmax(420px,1.25fr);gap:0;min-height:0;display:grid}.viewer-mode .workspace{grid-template-columns:1fr}.library-panel,.editor-panel,.preview-panel{border-right:1px solid var(--border);background:var(--surface);min-width:0;min-height:calc(100vh - 139px)}.library-panel{padding:14px;overflow:auto}.editor-panel,.preview-panel{flex-direction:column;display:flex}.preview-panel{border-right:0}.panel-title,.panel-header{letter-spacing:-.01em;font-weight:700}.panel-title{margin-bottom:12px}.panel-header{border-bottom:1px solid var(--border);background:var(--surface-2);justify-content:space-between;align-items:center;gap:10px;min-height:47px;padding:8px 12px;display:flex}.panel-header button,.sharebar button{border-radius:8px;padding:6px 9px;font-size:12px}.library-list{flex-direction:column;gap:8px;margin-top:12px;display:flex}.library-item{grid-template-columns:1fr auto;align-items:stretch;gap:6px;display:grid}.library-load{text-align:left;flex-direction:column;gap:4px;min-width:0;display:flex}.library-load strong{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.library-load small{color:var(--muted)}.preview-canvas{flex:1;justify-content:center;align-items:flex-start;min-height:0;padding:24px;display:flex;overflow:auto}.diagram{max-width:100%}.diagram svg{max-width:100%;height:auto}.error-box{color:#fecaca;white-space:pre-wrap;background:#210b0b;border:1px solid #ef444473;border-radius:12px;align-self:stretch;width:100%;padding:14px;line-height:1.45}.empty-state{color:#334155;margin-top:80px;font-size:18px;font-weight:600}.sharebar{border-top:1px solid var(--border);background:var(--surface-2);padding:10px 12px}.status{color:var(--muted);margin-left:auto;font-size:13px}.muted{color:var(--muted);font-size:13px}@media (width<=1180px){.workspace{grid-template-columns:220px 1fr}.preview-panel{border-top:1px solid var(--border);grid-column:1/-1;min-height:480px}}@media (width<=820px){.topbar,.toolbar{flex-direction:column;align-items:stretch;display:flex}.workspace{flex-direction:column;display:flex}.library-panel,.editor-panel,.preview-panel{border-right:0;border-bottom:1px solid var(--border);min-height:420px}.status{width:100%;margin-left:0}}