.diagram-page{max-width:1440px;margin:0 auto;padding:42px max(22px,4vw) 70px}.diagram-heading{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;margin-bottom:26px}.diagram-heading h1{font:clamp(38px,5vw,64px) Georgia,serif;letter-spacing:-2px;margin:8px 0 14px;line-height:1.03}.diagram-heading p{max-width:620px;line-height:1.6}.diagram-top-actions{display:flex;gap:8px;flex-wrap:wrap}.diagram-type-tabs{display:flex;gap:7px;flex-wrap:wrap;border-bottom:1px solid var(--border);padding-bottom:18px;margin-bottom:24px}.diagram-type-tabs button{border-radius:24px}.diagram-type-tabs [aria-pressed=true]{color:var(--on-accent);background:var(--accent);border-color:var(--accent)}.diagram-layout{display:grid;grid-template-columns:minmax(290px,360px) minmax(0,1fr);gap:24px;align-items:start}.diagram-settings{min-width:0;border:1px solid var(--border);border-radius:16px;background:var(--surface);padding:22px}.diagram-settings h2{font:22px Georgia,serif;margin:0 0 18px}.diagram-settings label{margin-bottom:12px}.diagram-settings input,.diagram-settings select,.diagram-settings textarea{width:100%;min-width:0;border-radius:7px;padding:10px}.diagram-settings input[type=checkbox],.diagram-settings input[type=color]{width:auto}.diagram-settings input[type=color]{width:45px;height:38px;padding:3px}.diagram-settings details{border-top:1px solid var(--border);padding-top:16px;margin-top:18px}.diagram-settings summary{font-weight:600;cursor:pointer;margin-bottom:14px}.diagram-source{padding:16px;background:var(--surface-soft);border:1px solid var(--border);border-radius:10px;margin-bottom:12px}.diagram-source-head{display:flex;gap:8px;align-items:center}.diagram-source-head input[type=text]{flex:1;width:100px}.diagram-source .diagram-expression{font:16px ui-monospace,Consolas,monospace;letter-spacing:.2px}.diagram-source textarea{font:12px/1.55 ui-monospace,Consolas,monospace;resize:vertical;min-height:135px}.diagram-source-actions{display:flex;align-items:center;gap:8px}.diagram-source-actions select{flex:1}.diagram-source-actions button{font-size:11px;padding:9px}.diagram-axis-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.diagram-axis-grid label{font-size:12px}.diagram-inline,.diagram-settings .diagram-check{display:flex;gap:8px;align-items:center}.diagram-check input{width:auto}.diagram-preview-column{min-width:0;position:sticky;top:20px}.diagram-preview-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.diagram-preview-top span{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:var(--muted)}.diagram-preview{width:100%;min-height:320px;max-height:76vh;overflow:auto;border:1px solid var(--border);border-radius:14px;background:#fff;box-shadow:0 10px 35px #0000000a;position:relative;color:#243448}.diagram-preview[data-background=transparent]{background-color:#fff;background-image:linear-gradient(45deg,#e5e5e5 25%,transparent 25%),linear-gradient(-45deg,#e5e5e5 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e5e5e5 75%),linear-gradient(-45deg,transparent 75%,#e5e5e5 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0}.diagram-preview svg{display:block;width:100%;height:auto;min-height:260px}.diagram-preview[data-pan=true]{cursor:grab;touch-action:none}.diagram-preview[data-pan=true]:active{cursor:grabbing}.diagram-viewport-tools{display:flex;gap:6px;flex-wrap:wrap;margin:14px 0}.diagram-viewport-tools button{font-size:12px;padding:8px 12px}.diagram-viewport-tools [aria-pressed=true]{background:var(--accent);color:var(--on-accent)}.diagram-state{font-size:13px;min-height:22px;color:var(--muted);margin:10px 0}.diagram-state.error{color:var(--danger)}.diagram-warnings{font-size:12px;line-height:1.6;color:var(--muted);padding-left:20px}.diagram-export{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:18px;background:var(--surface);border:1px solid var(--border);border-radius:12px;margin-top:20px}.diagram-export p{flex-basis:100%;margin:0;font-size:12px;color:var(--muted)}.diagram-export select{max-width:130px}.diagram-projects{margin-top:32px;border-top:1px solid var(--border);padding-top:22px}.diagram-project-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.diagram-project-item{display:flex;align-items:center;gap:8px;border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface);min-width:0}.diagram-project-item .diagram-open-project{border:0;background:none;text-align:left;flex:1;overflow-wrap:anywhere;font-weight:600}.diagram-project-item button:last-child{font-size:11px;padding:7px}.diagram-table-wrap{max-height:240px;overflow:auto;margin-top:12px;border:1px solid var(--border);border-radius:8px}.diagram-table-wrap table{width:100%;font-size:12px}.diagram-table-wrap th,.diagram-table-wrap td{padding:9px;border-bottom:1px solid var(--border);text-align:left;overflow-wrap:anywhere}.diagram-mobile-tabs{display:none}.diagram-marker{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;margin:6px 0}.diagram-marker button{padding:6px;font-size:11px}.diagram-free{border-left:3px solid var(--accent);padding:10px 12px;background:var(--surface-soft);font-size:12px;line-height:1.6;margin-bottom:20px}.diagram-empty{padding:50px;text-align:center;color:#526475}.diagram-button-row{display:flex;gap:8px;flex-wrap:wrap}.diagram-preset{max-width:190px}.diagram-scroll-hint{font-size:11px;color:var(--muted)}@media(max-width:950px){.diagram-layout{grid-template-columns:minmax(250px,310px) minmax(0,1fr);gap:18px}.diagram-preview-column{top:10px}.diagram-settings{padding:16px}.diagram-preview{min-height:250px}}@media(max-width:720px){.diagram-layout{display:flex;flex-direction:column}.diagram-preview-column{position:static;width:100%;order:-1}.diagram-settings{width:100%}.diagram-preview{max-height:60vh;min-height:220px}.diagram-heading{flex-direction:column}.diagram-heading h1{font-size:42px}.diagram-mobile-tabs{display:flex;gap:7px;margin-bottom:14px}.diagram-mobile-tabs [aria-selected=true]{background:var(--accent);color:var(--on-accent)}.diagram-settings[data-mobile-tab=export],.diagram-settings[data-mobile-tab=data] [data-diagram-style],.diagram-settings[data-mobile-tab=style] [data-diagram-data]{display:none}.diagram-page{padding:28px 20px 50px}}