/* PlantUML editor. Uses the shared --ink/--muted/--line/--paper/--white/--blue tokens so dark mode follows the site. */
.pu-page{max-width:1440px}
.pu-heading h1{font-size:clamp(28px,4vw,42px);line-height:1.25;margin:8px 0 12px}
.pu-workbench{border:1px solid var(--line);border-radius:18px;background:var(--white);box-shadow:0 14px 42px rgba(23,42,71,.06);padding:14px 16px;min-width:0}
.pu-cats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pu-cats button{border:1px solid var(--line);background:var(--white);color:var(--muted);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;cursor:pointer}
.pu-cats button[aria-selected=true]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.pu-templates{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.pu-tpl{border:1px solid var(--line);background:var(--paper);color:var(--ink);border-radius:9px;padding:6px 10px;font:inherit;font-size:13px;cursor:pointer;line-height:1.35}
.pu-tpl:hover{border-color:var(--blue)}
.pu-tpl.is-active{background:var(--blue);border-color:var(--blue);color:#fff}
.pu-tpl[hidden]{display:none}
.pu-main{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:12px}
.pu-editor,.pu-preview-wrap{display:flex;flex-direction:column;min-width:0}
.pu-bar{display:flex;justify-content:space-between;align-items:center;gap:8px;min-height:32px;margin-bottom:6px;flex-wrap:wrap}
.pu-bar label{font-weight:600;font-size:14px;color:var(--ink)}
.pu-hint{font-size:12px;color:var(--muted)}
.pu-code{position:relative;display:flex;border:1px solid var(--line);border-radius:12px;background:var(--paper);overflow:hidden;height:62vh;min-height:420px;max-height:820px}
.pu-code:focus-within{outline:2px solid var(--blue);outline-offset:1px}
.pu-lines{margin:0;padding:12px 8px 12px 10px;min-width:38px;text-align:right;color:var(--muted);font:13px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow:hidden;user-select:none;border-right:1px solid var(--line);background:var(--white);opacity:.8}
.pu-code textarea{flex:1;border:0;outline:0;resize:none;padding:12px 14px;font:13px/20px ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--ink);background:transparent;white-space:pre;overflow:auto;tab-size:2;min-width:0}
.pu-preview{flex:1;border:1px solid var(--line);border-radius:12px;background:#fff;overflow:auto;height:62vh;min-height:420px;max-height:820px;display:flex;align-items:flex-start;justify-content:center;padding:14px}
.pu-preview img{display:block;height:auto}
.pu-empty{color:#64748b;font-size:14px;margin:auto;text-align:center;max-width:320px}
.pu-status{font-size:13px;color:var(--muted)}.pu-status.is-ok{color:#15803d}.pu-status.is-bad{color:#b91c1c}
.pu-zoom{display:inline-flex;gap:4px}
.pu-zoom button{min-width:34px;min-height:30px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.pu-actions{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.pu-actions button{min-height:40px;border:1px solid var(--line);border-radius:10px;padding:7px 14px;font:inherit;font-size:14px;background:var(--white);color:var(--ink);cursor:pointer}
.pu-actions button.primary{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.pu-auto{display:inline-flex;gap:6px;align-items:center;font-size:14px;color:var(--ink);margin-left:auto}.pu-auto input{width:17px;height:17px;accent-color:var(--blue)}
.pu-toast{margin:8px 0 0;font-size:14px;color:#14734f}
.pu-table-wrap{overflow-x:auto;margin:10px 0;border:1px solid var(--line);border-radius:12px;background:var(--white)}
.pu-table{width:100%;border-collapse:collapse;font-size:14px}
.pu-table th,.pu-table td{padding:8px 12px;border-top:1px solid var(--line);text-align:left;color:var(--ink);vertical-align:top}
.pu-table thead th{border-top:0;font-size:13px;color:var(--muted);background:var(--paper)}
.pu-table code{font-size:13px;white-space:nowrap}
.pu-guide{min-width:0}.pu-guide h2{margin-top:30px}
.guide-layout>*{min-width:0}
html[data-xunl-theme="dark"] .pu-status.is-ok{color:#4ade80}html[data-xunl-theme="dark"] .pu-status.is-bad{color:#f87171}html[data-xunl-theme="dark"] .pu-toast{color:#6fd6a6}
@media(max-width:980px){.pu-main{grid-template-columns:1fr}.pu-code,.pu-preview{height:46vh;min-height:300px}}
@media(max-width:560px){.pu-workbench{padding:12px}.pu-auto{margin-left:0}}