*{box-sizing:border-box}body{margin:0;background:#f7f8fa;color:#242c38;font:14px -apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",sans-serif}header{height:70px;background:white;border-bottom:1px solid #e4e7ec;display:flex;align-items:center;padding:0 24px;gap:30px}.brand{display:flex;gap:12px;align-items:center;font-size:18px}.mark{background:#252d3c;color:#fff;padding:4px 9px;border-radius:9px;font-size:25px}.tag{font-size:11px;color:#617166;background:#eef5ef;border-radius:5px;padding:4px 8px}.headnote{margin-left:auto;color:#707988;font-size:12px}a{color:#546478;text-decoration:none;font-size:12px}.workspace{display:grid;grid-template-columns:106px 352px minmax(500px,1fr);height:calc(100vh - 70px)}nav{background:#282f3e;padding:16px 9px;overflow-y:auto}nav button{border:0;background:none;color:#bfc6d0;width:100%;padding:15px 8px;margin:2px 0;border-radius:8px;text-align:left;display:flex;justify-content:space-between;font:inherit;cursor:pointer}nav button.active{background:white;color:#202b3a}nav small{opacity:.65;font-size:10px}.library{background:white;border-right:1px solid #e3e7ee;overflow-y:auto}.searchbox{position:sticky;top:0;background:white;padding:18px 16px;z-index:1}input{width:100%;padding:11px 13px;border:1px solid #dfe3ea;border-radius:8px;background:#f9fafb;font:inherit;outline:none}.libtitle{display:flex;align-items:center;justify-content:space-between;padding:0 18px 8px}.libtitle h2{font-size:18px;margin:5px 0}.libtitle span{color:#8a919c;font-size:12px}.group{padding:0 14px 20px}.group h3{font-size:12px;color:#7d8796;font-weight:500;letter-spacing:.5px;margin:16px 4px 12px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.tile{background:white;border:1px solid #e5e8ed;border-radius:9px;padding:8px;cursor:pointer;min-width:0;text-align:left;color:#394354}.tile:hover{border-color:#8798aa;background:#f8fafc}.tile.selected{border-color:#426d61;box-shadow:0 0 0 1px #426d61;background:#f1f7f4}.tile img{width:100%;aspect-ratio:1;object-fit:contain;background:white;border-radius:4px}.tile span{display:block;font-size:11px;line-height:1.5;margin-top:6px;min-height:33px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tile small{font-size:9px;color:#939ba5;display:block;margin-top:5px}main{padding:22px 26px;overflow:auto}.topline{display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:9px;letter-spacing:2px;color:#9098a4}h1{font-size:21px;margin:7px 0 20px}.badge{font-size:11px;background:#eaf3ee;color:#486856;padding:6px 10px;border-radius:20px}.toolbar{display:flex;gap:7px;margin-bottom:14px;flex-wrap:wrap}button{font:inherit}.toolbar button,#apply{background:white;border:1px solid #dce1e8;border-radius:7px;padding:8px 11px;font-size:12px;cursor:pointer}.toolbar button:hover{background:#edf1f5}.drawing-wrap{height:490px;border:1px solid #e0e5eb;background:white;border-radius:12px;overflow:hidden;position:relative}#renderFor2D{width:100%;height:100%;position:relative}#renderFor2D canvas{display:block}.message{font-size:12px;line-height:1.7;padding:12px 0;color:#50675a;min-height:42px}.detail{display:flex;gap:20px;background:white;border:1px solid #e5e8ee;border-radius:10px;padding:16px}.thumb{width:90px;flex-shrink:0}.thumb img{width:90px;height:90px;object-fit:contain}h3{margin:0 0 6px;font-size:14px}.detail p{color:#7d8794;font-size:12px;line-height:1.6;margin:0 0 9px}.pills{display:flex;gap:7px;margin-bottom:10px}.pills span{font-size:10px;background:#f3f5f7;padding:3px 7px;color:#7f8895;border-radius:4px}#apply{background:#2b3b37;color:white;border:0}#apply:disabled{background:#eef0f3;color:#8c95a0;cursor:default}footer{font-size:11px;color:#929aa7;line-height:1.9;margin-top:16px}details{margin-top:15px;color:#8a939f;font-size:11px}pre{white-space:pre-wrap;word-break:break-all}.empty{padding:25px;line-height:1.9;color:#87909e}.empty strong{display:block;color:#475264;margin-bottom:12px}@media(min-width:1550px){.workspace{grid-template-columns:110px 430px minmax(600px,1fr)}.grid{grid-template-columns:repeat(4,1fr)}.drawing-wrap{height:570px}}@media(max-width:1000px){.workspace{grid-template-columns:90px 270px minmax(460px,1fr)}main{padding:18px}.grid{grid-template-columns:repeat(2,1fr)}.headnote{display:none}}
/* Phone trial layout; original desktop editor remains unchanged above 700px. */
@media(max-width:700px){header{height:54px;padding:0 12px;gap:8px}.brand{font-size:15px;gap:6px}.tag{font-size:9px}header>a{margin-left:auto;font-size:10px}.workspace{display:flex;flex-direction:column;height:auto}nav{display:flex;padding:6px;gap:5px;overflow-x:auto;flex-shrink:0}nav button{width:auto;min-width:65px;white-space:nowrap;padding:10px 8px;gap:5px;font-size:12px}main{order:1;padding:12px;overflow:visible}.library{order:2;max-height:390px;border-top:1px solid #ddd;overflow:auto}.grid{grid-template-columns:repeat(4,minmax(0,1fr))}.searchbox{padding:10px}.drawing-wrap{height:370px;touch-action:none}.topline h1{font-size:17px;margin-bottom:12px}.eyebrow{display:none}.toolbar{gap:5px}.toolbar button{font-size:11px;padding:9px 7px}.detail{padding:10px;gap:10px}.thumb,.thumb img{width:62px;height:62px}.detail p{font-size:11px}.message{padding:8px 0}.pills{flex-wrap:wrap}footer,details{display:none}#apply{min-height:40px}.group{padding:0 10px 12px}.tile{padding:5px}}