@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap');
:root{--bg:#101419;--panel:#191f26;--border:#303943;--text:#e0e7ec;--muted:#8d9aa8;--accent:#a8e8c5;--orange:#f0b967}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);font:14px 'DM Sans',Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer;background:#242d36;border:1px solid var(--border);border-radius:5px;color:var(--text);padding:9px 13px;white-space:nowrap}button:hover{background:#35424d}button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}button.primary{background:var(--accent);color:#123729;border-color:var(--accent);font-weight:700}header{height:79px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--border)}.brand{display:flex;align-items:center;gap:10px;min-width:290px}.brandmark{font-size:29px;font-weight:700;color:var(--accent);border:1px solid #596b62;padding:2px 7px}.brandmark span{color:var(--orange)}.brand b{font-size:22px;letter-spacing:1px}.brand b span{font-weight:400;margin-left:4px}.brand small{font:9px 'IBM Plex Mono',monospace;letter-spacing:1.4px;max-width:70px;line-height:1.6;color:var(--muted)}.project{margin-right:auto;display:flex;flex-direction:column;gap:3px}.project input{background:transparent;border:0;color:var(--text);padding:0;width:235px;font-weight:600}.project span{color:var(--muted);font-size:12px}nav{height:54px;display:flex;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 24px;align-items:center}.tabs{display:flex;height:100%;gap:24px}.tabs button{border:0;border-radius:0;background:transparent;padding:0;color:var(--muted)}.tabs button.active{color:var(--accent);border-bottom:2px solid var(--accent)}.navright{display:flex;gap:8px;align-items:center}.local{font-size:12px;color:var(--muted);margin-right:12px}.page{display:none}.page.active{display:flex}#drawing{height:calc(100vh - 133px);min-height:560px}.left,.right{background:var(--panel);overflow:auto;padding:18px 16px;width:228px;flex-shrink:0}.left{border-right:1px solid var(--border)}.right{width:270px;border-left:1px solid var(--border)}.sectionhead{font:11px 'IBM Plex Mono',monospace;letter-spacing:1.3px;color:var(--muted);display:flex;justify-content:space-between;align-items:center;margin:6px 0 15px}.sectionhead button{font-size:18px;padding:0 5px}.projectcard{border:1px solid #3b4e49;background:#202d2c;border-radius:6px;padding:14px;margin-bottom:26px;display:flex;flex-direction:column;gap:8px}.eyebrow{font:11px 'IBM Plex Mono',monospace;color:var(--accent);letter-spacing:1.4px}.projectcard strong{font-size:15px}.projectcard small{color:var(--muted);line-height:1.5}.layerrow,.symbolrow{display:flex;align-items:center;gap:9px;padding:10px 4px;border-bottom:1px solid #2a333c;min-height:43px}.layerrow span,.symbolrow span{flex:1;overflow:hidden;text-overflow:ellipsis}.layerrow input{accent-color:var(--accent)}.symbolrow{cursor:pointer}.symbolrow.active{background:#30443e;border-radius:4px}.symbolrow em{font:12px 'IBM Plex Mono',monospace;color:var(--muted);font-style:normal}.symbolrow img{width:23px;height:23px;object-fit:contain}.symbolrow .shape{font-size:21px;width:23px;text-align:center}.full{width:100%;margin:9px 0}.leftbottom{border-top:1px solid var(--border);margin-top:28px;padding-top:20px}.leftbottom b{font-size:14px}.leftbottom p,.note{font-size:12px;line-height:1.65;color:var(--muted)}.workspace{flex:1;min-width:0;display:flex;flex-direction:column}.toolstrip{min-height:55px;background:#20272f;display:flex;align-items:center;gap:3px;padding:8px 12px;flex-wrap:wrap}.toolstrip button{border:0;background:transparent;font-size:20px;padding:5px 7px}.toolstrip button span{font-size:12px;vertical-align:middle}.toolstrip button.active{background:#a8e8c522;color:var(--accent)}.toolstrip i{height:23px;border-left:1px solid #46515d;margin:0 6px}.toolstrip label{font-size:12px;color:var(--muted);white-space:nowrap}.toolstrip input{accent-color:var(--accent)}.canvaswrap{position:relative;flex:1;overflow:hidden;background:#10151b}#canvas{width:100%;height:100%;touch-action:none;user-select:none;display:block;background-image:linear-gradient(#25303a77 1px,transparent 1px),linear-gradient(90deg,#25303a77 1px,transparent 1px);background-size:25px 25px}.canvasbadge{position:absolute;left:22px;top:23px;pointer-events:none;display:grid;grid-template-columns:3px auto;gap:7px 10px;font:11px 'IBM Plex Mono',monospace;letter-spacing:1.4px}.canvasbadge small{grid-column:2;font-size:10px;color:#768794;letter-spacing:0}.livebar{background:var(--accent);grid-row:span 2}.compass{position:absolute;right:25px;top:20px;color:#92a4b1;font:13px 'IBM Plex Mono',monospace;text-align:center;pointer-events:none}.compass div{font-size:33px;color:var(--text)}.zoom{position:absolute;right:18px;bottom:21px;display:flex;align-items:center;background:var(--panel);border:1px solid var(--border);border-radius:5px}.zoom button{border:0;background:transparent}.zoom span{font:12px 'IBM Plex Mono',monospace;width:48px;text-align:center}.hint{position:absolute;bottom:20px;left:50%;transform:translateX(-50%);font-size:12px;color:#b7c3cc;background:#202930e8;border:1px solid #3b4852;border-radius:5px;padding:9px 13px;max-width:70%;text-align:center;pointer-events:none}.scale{position:absolute;bottom:68px;left:23px;color:var(--muted);font:11px 'IBM Plex Mono',monospace;border-bottom:2px solid #adbac3;padding-bottom:5px;pointer-events:none}footer{height:29px;background:#191f26;display:flex;justify-content:space-between;align-items:center;font:10px 'IBM Plex Mono',monospace;color:var(--muted);padding:0 12px}.right label,.templatecontrols label{display:block;color:var(--muted);font-size:12px;margin-bottom:15px}input:not([type=checkbox]),select{width:100%;background:#11171e;border:1px solid #3a4652;border-radius:4px;color:var(--text);padding:9px;margin-top:5px}input[type=color]{height:36px;padding:3px}#inspector h3{font-size:18px;font-weight:500;margin:0 0 18px}#inspector p{color:var(--muted);line-height:1.7;font-size:14px}.emptyicon{font-size:42px;color:#647887;margin:24px 0 10px}.fieldgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.metrics{display:grid;gap:0}.metrics div{display:flex;justify-content:space-between;align-items:center;padding:13px 0;border-bottom:1px solid var(--border)}.metrics span{font-size:12px;color:var(--muted)}.metrics strong{font:18px 'IBM Plex Mono',monospace;font-weight:400}.note{padding:12px 0}#warnings{font-size:12px;color:#edc58a;line-height:1.6;overflow-wrap:anywhere}.danger{color:#f2a2a2}#template{min-height:calc(100vh - 133px)}.templatecontrols{width:270px;flex-shrink:0;padding:23px;background:var(--panel);border-right:1px solid var(--border)}.paperworkspace{flex:1;padding:28px 35px;background:#272e36;min-width:0}.paperhint{display:flex;justify-content:space-between;color:var(--muted);font:11px 'IBM Plex Mono',monospace;letter-spacing:1px;margin-bottom:25px}#paper{background:white;box-shadow:0 10px 35px #0004;width:100%}#paper svg{display:block;width:100%;height:auto;touch-action:none}.imageitem{border:1px solid var(--border);padding:10px;margin-top:8px}.imageitem input{padding:5px}.reportcontent{padding:35px 45px;width:100%;max-width:1500px;margin:auto}.reporthead{display:flex;justify-content:space-between;align-items:center}.reporthead h1{font-size:32px;font-weight:500;margin:12px 0}.reporthead p,.muted{color:var(--muted)}.reportmetrics{display:flex;gap:25px;margin:32px 0}.reportmetrics div{background:var(--panel);border:1px solid var(--border);padding:22px;flex:1}.reportmetrics strong{display:block;font:29px 'IBM Plex Mono',monospace;color:var(--accent);margin-top:12px}.reportmetrics span{color:var(--muted)}.reportcols{display:grid;grid-template-columns:1fr 1.2fr;gap:35px}h2{font-size:19px;font-weight:500;margin:24px 0 18px}table{border-collapse:collapse;width:100%;font-size:14px}th{text-align:left;color:var(--muted);font-size:12px;font-weight:500;background:#202832}td,th{padding:13px;border-bottom:1px solid var(--border)}td img{width:25px;height:25px;object-fit:contain}#toast{display:none;position:fixed;bottom:40px;left:50%;transform:translateX(-50%);background:#d5f4e4;color:#173a2a;border-radius:6px;padding:15px 24px;box-shadow:0 7px 30px #0005;z-index:10;max-width:85%;font-size:14px}dialog{background:var(--panel);color:var(--text);border:1px solid #54656d;border-radius:10px;width:650px;max-width:90vw;padding:30px;line-height:1.7}dialog::backdrop{background:#0009}dialog p,dialog li{font-size:14px;color:#b4c1cd}dialog li{margin:10px 0}.close{float:right}.mono{font-family:'IBM Plex Mono',monospace}.dotkey{width:10px;height:10px;border-radius:2px}.uploadwarn{color:var(--orange)}
@media(max-width:1150px){header{gap:8px;padding:0 14px}.brand{min-width:180px}.brand small{display:none}.project input{width:180px}.left{width:190px}.right{width:230px}.toolstrip button span{display:none}.local{display:none}}
@media(max-width:850px){header{height:auto;min-height:95px;flex-wrap:wrap;padding:12px}.brand{min-width:140px}.project{flex:1}.project input{width:100%}header button{font-size:12px;padding:7px}nav{padding:0 12px;height:auto;min-height:70px;flex-wrap:wrap;gap:8px}.tabs{height:36px;gap:20px}.navright{margin-bottom:6px}.navright button{font-size:12px;padding:6px}#drawing{height:auto;min-height:calc(100vh - 165px);flex-wrap:wrap}.left{width:170px;max-height:630px}.workspace{height:630px;width:calc(100% - 170px)}.right{width:100%;display:grid;grid-template-columns:1fr 1fr;gap:10px 25px}.right .sectionhead{grid-column:1/-1}.right #inspector{grid-row:2/5}.hint{max-width:90%;bottom:75px;width:90%}.templatecontrols{width:220px}.paperworkspace{padding:15px}.reportcontent{padding:25px 15px}.reportcols{grid-template-columns:1fr}.reportmetrics{gap:10px}.reportmetrics div{padding:12px}.reportmetrics strong{font-size:20px}}
@media(max-width:550px){.left{width:100%;max-height:170px;display:flex;gap:12px;align-items:flex-start;overflow:auto;padding:10px}.left .sectionhead,.leftbottom,.projectcard,.left>.full{display:none}#layers,#symbols{display:flex;gap:8px}.layerrow,.symbolrow{min-width:115px}.workspace{width:100%;height:570px}.right{display:block}#template{flex-direction:column}.templatecontrols{width:100%;display:block}.paperworkspace{min-height:400px}.reporthead{display:block}.reportmetrics{flex-wrap:wrap}.reportmetrics div{min-width:40%}table{font-size:12px}td,th{padding:8px}.toolstrip{gap:0}.toolstrip i{margin:0 3px}}