*{box-sizing:border-box}body{margin:0;font:13px Inter,Segoe UI,sans-serif;color:#20232d;background:#f5f6fa}button,input,textarea,select{font:inherit}button{cursor:pointer;border:1px solid #e1e3eb;background:white;color:inherit;border-radius:7px;padding:9px 12px}button:hover{background:#eeedf9;border-color:#b9b1e7}button:disabled{opacity:.35;cursor:default}.primary{background:#7255df;color:white;border-color:#7255df}.primary:hover{background:#6141d0;color:white}header{height:78px;background:white;border-bottom:1px solid #e4e5ed;display:flex;align-items:center;padding:0 24px;gap:36px}.brand{color:#7255df;text-decoration:none;font-size:34px;display:flex;align-items:center;gap:10px}.brand span{font-size:22px;letter-spacing:-1px;font-weight:750;color:#242433}.brand small{display:block;font-size:8px;letter-spacing:3px;margin-top:2px;color:#92909f}.project{border-left:1px solid #e9e8ef;padding-left:28px}.project input{display:block;border:0;background:none;font-weight:650;width:220px;padding:0 0 5px}.project span{font-size:11px;color:#858493}.actions{margin-left:auto;display:flex;gap:8px}.app{display:grid;grid-template-columns:78px 245px minmax(360px,1fr) 265px;height:calc(100vh - 78px)}.rail{background:white;border-right:1px solid #e4e5ed;display:flex;align-items:center;flex-direction:column;gap:12px;padding:20px 6px}.rail button{border:0;width:65px;padding:10px 0;font-size:23px;color:#878494}.rail small{display:block;font-size:10px;margin-top:7px}.rail .active{background:#f0ecff;color:#7654dd}.railbottom{margin-top:auto;border-radius:50%;background:#282239;color:white;padding:12px;font-size:11px}aside{background:white;padding:24px 18px;border-right:1px solid #e4e5ed;overflow:auto}h2{font-size:17px;margin:0 0 7px;letter-spacing:-.5px}h3{font-size:12px;margin:24px 0 12px}.muted,.help{color:#92909e;font-size:11px;line-height:1.7}.library-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px}.tile{height:92px;text-align:left;padding:12px;font-size:11px}.tile b{display:block;font-size:25px;color:#81739f;margin-bottom:12px;font-weight:400}.section-label{font-size:10px;letter-spacing:1.4px;color:#9994a7;margin:25px 0 10px}.tip{background:#f5f2ff;padding:14px;border-radius:8px;margin-top:28px;font-size:11px;color:#7969a0;line-height:1.7}main{min-width:0;overflow:hidden;display:flex;flex-direction:column;background:radial-gradient(#dcdde6 .7px,transparent .7px) 0 0/10px 10px}.toolbar{height:66px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#f8f9fc;border-bottom:1px solid #e4e5ed;font-size:11px}.dot{display:inline-block;width:6px;height:6px;background:#6bbb94;border-radius:50%;margin-right:5px}.devices{display:flex;border:1px solid #e0e1ea;padding:3px;border-radius:8px;background:white}.devices button{border:0;padding:5px 13px}.devices .active{background:#ece8fc;color:#7255df}.canvas{margin:28px auto 20px;width:calc(100% - 56px);max-width:1200px;box-shadow:0 8px 35px #25203912;border:1px solid #dfe1e9;border-radius:9px 9px 0 0;background:white;flex:1;min-height:0;display:flex;flex-direction:column;transition:width .25s}.browserbar{display:flex;justify-content:space-between;padding:11px 15px;color:#aaa7b6;background:#fcfcfe;font-size:10px;border-bottom:1px solid #eee}iframe{width:100%;border:0;flex:1;min-height:0;background:white}footer{display:flex;justify-content:space-between;padding:0 24px 15px;font-size:10px;color:#9691a4}.inspector{border-left:1px solid #e4e5ed;border-right:0}label{display:block;font-size:11px;color:#777383;margin:17px 0 7px}input,textarea,select{width:100%;padding:10px;border:1px solid #e1dfe9;border-radius:6px;background:#fff;color:#383343}textarea{resize:vertical;min-height:85px;line-height:1.5}input[type=color]{height:38px;padding:3px}.row{display:flex;gap:6px;margin:12px 0}.row>*{flex:1}.wide{width:100%;margin-top:10px;text-align:left}.selected{border-color:#8565e0;background:#f4f0ff}.danger{color:#bd4f66}.badge{display:inline-block;background:#f1edfc;color:#7e62c0;padding:5px 8px;border-radius:5px;font-size:10px;margin-bottom:18px}#toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);padding:13px 22px;background:#292334;color:white;border-radius:9px;display:none;z-index:9}.pageitem{display:flex;margin-top:10px;gap:5px}.pageitem button:first-child{flex:1;text-align:left}.helpbox{padding:12px;background:#f6f5f9;border-radius:7px;font-size:11px;line-height:1.7;margin-top:15px}@media(max-width:1150px){.app{grid-template-columns:65px 205px minmax(300px,1fr) 225px}.toolbar>.muted{display:none}header{gap:15px;padding:0 15px}.project{padding-left:15px}.actions button{font-size:11px;padding:8px}.canvas{width:calc(100% - 30px)}}@media(max-width:850px){.app{grid-template-columns:60px 170px minmax(280px,1fr)}.inspector{position:fixed;right:0;bottom:0;width:230px;max-height:45vh;box-shadow:0 0 20px #0002;z-index:3}.project{display:none}.brand span{font-size:18px}header{height:65px}.app{height:calc(100vh - 65px)}}
@media(max-width:850px){.app{height:auto}.rail{grid-row:1/3}.app>#library{max-height:calc(100vh - 65px)}main{height:calc(100vh - 65px)}.inspector{position:static;grid-column:2/4;width:auto;max-height:none;box-shadow:none;border-top:1px solid #e4e5ed}.inspector textarea{min-height:65px}}