@import url(../assets/fonts/fonts.css);
:root{--ink:#0f1430;--mut:#5b6180;--line:#e3dfd6;--pan:#fbfaf8;--acc:#1f3cff;--bad:#d64541;--warn:#c98a12;--bg:#f1efea}
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;font:14px/1.35 Manrope,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--ink);background:var(--bg)}
#app{display:grid;grid-template-columns:290px 1fr;height:100%}
#side{background:var(--pan);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
#side header{padding:14px 16px 8px}
#side h1{font-size:15px;margin:0}
#side header p{margin:2px 0 0;color:var(--mut);font-size:12px}
.tabs{display:flex;gap:4px;padding:0 12px 8px}
.tabs button{flex:1}
#search{margin:0 12px 8px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff}
#cat{overflow:auto;flex:1;padding:0 8px 12px}
#cat h3{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--mut);margin:12px 8px 4px}
.it{display:flex;width:100%;align-items:center;gap:10px;text-align:left;padding:7px 8px;border-radius:9px}
.it i{width:30px;height:22px;border-radius:5px;flex:none;border:1px solid rgba(0,0,0,.08)}
.it span{flex:1}
.it small{color:var(--mut);font-size:11px;white-space:nowrap}
#own{padding:8px 12px;display:none;flex:1;overflow:auto}
#own label{display:block;font-size:12px;color:var(--mut);margin:8px 0 3px}
#own input,#own select{width:100%;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;background:#fff}
#own .row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px}
button{font:inherit;font-size:13px;border:0;background:transparent;color:var(--ink);padding:7px 10px;border-radius:9px;cursor:pointer}
button:hover{background:rgba(0,0,0,.06)}
button.on{background:var(--ink);color:#fff}
button.pri{background:var(--acc);color:#fff;font-weight:600}
button:focus-visible,input:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
#main{position:relative;min-width:0}
canvas{display:block;width:100%;height:100%;touch-action:none}
#bar{position:absolute;left:12px;right:12px;top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;pointer-events:none}
#bar>*{pointer-events:auto}
.grp{display:flex;gap:2px;background:rgba(251,250,248,.92);border:1px solid var(--line);border-radius:11px;padding:3px;backdrop-filter:blur(8px)}
#bar .sp{flex:1}
#panel{position:absolute;right:12px;bottom:12px;width:280px;background:rgba(251,250,248,.97);border:1px solid var(--line);border-radius:14px;padding:12px;box-shadow:0 8px 30px rgba(0,0,0,.12);display:none}
#panel h2{font-size:14px;margin:0 0 8px;display:flex;justify-content:space-between;gap:8px}
#panel .dims{display:grid;grid-template-columns:repeat(3,1fr) 44px;gap:6px;align-items:end}
#panel label{font-size:11px;color:var(--mut)}
#panel input[type=number]{width:100%;padding:6px 7px;border:1px solid var(--line);border-radius:7px;font:inherit}
#panel input[type=color]{width:44px;height:32px;border:1px solid var(--line);border-radius:7px;padding:2px;background:#fff}
#panel .acts{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
#panel .acts button{background:#efede8}
#msgs{margin:8px 0 0;padding:0;list-style:none;font-size:12px}
#msgs li{padding:5px 8px;border-radius:7px;margin-top:4px}
#msgs .bad{background:#fbe6e5;color:#8d1f1b}
#msgs .warn{background:#fbf0d9;color:#73500a}
#msgs .ok{background:#e4f3e7;color:#1d5a2b}
.lb{position:absolute;left:0;top:0;transform:translate(-50%,-50%);pointer-events:none;background:rgba(255,255,255,.88);padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap;box-shadow:0 1px 6px rgba(0,0,0,.12)}
.lb small{font-weight:500;color:var(--mut);margin-left:4px}
.lb.dim{background:var(--acc);color:#fff}
#help{position:absolute;left:12px;bottom:12px;font-size:11px;color:var(--mut);background:rgba(251,250,248,.85);padding:6px 9px;border-radius:9px;max-width:calc(100% - 320px)}
#note{position:absolute;left:50%;top:56px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:7px 14px;border-radius:999px;font-size:12px;opacity:0;transition:opacity .3s;pointer-events:none}
#note.on{opacity:1}
body.labels-off .lb:not(.dim){display:none}
@media(max-width:760px){
 #app{grid-template-columns:1fr;grid-template-rows:1fr 38%}
 #main{grid-row:1}
 #side{grid-row:2;border-right:0;border-top:1px solid var(--line)}
 #side header h1,#side header p{display:none} #side header:not(:has(.back)){display:none}
 .tabs{padding-top:8px}
 #panel{left:8px;right:8px;width:auto;bottom:8px}
 #help{display:none}
 #bar{left:6px;right:6px;top:6px}
 #bar button{padding:6px 8px;font-size:12px}
}
.hint{margin:4px 0 0;color:var(--mut);font-size:12px}
#oC{height:34px;padding:2px}
.wide{width:100%}
#pClose{padding:0 6px}
#warns{position:absolute;left:12px;top:56px;max-width:min(520px,calc(100% - 24px));margin:0;padding:10px 12px 10px 28px;background:#fbf0d9;color:#73500a;border:1px solid #edd9a8;border-radius:10px;font-size:12px}
#warns li+li{margin-top:4px}
@media(max-width:760px){#warns{top:96px}}
.back{display:inline-block;font-size:12px;color:var(--acc);text-decoration:none;margin-bottom:6px}
#side header{background:var(--acc);color:#fff;padding:16px}
#side header p{color:rgba(255,255,255,.8)}
#side h1{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:19px;letter-spacing:-.03em;line-height:1.05}
#side .back{color:#ead9bf}
.tabs{padding-top:10px}
button.on{background:var(--acc)}
button.pri{border-radius:10px}
.lb.dim{background:var(--acc)}
body.night #help,body.night #note{background:rgba(20,24,48,.85);color:#dfe3ff}