@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@400;600;700;800;900&display=swap');
:root{--navy:#101d32;--panel:#12243b;--panel2:#1a304b;--line:#2b4563;--blue:#087ff5;--muted:#a8c0e3;--white:#f7faff}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:#e7eef7;font-family:'Nunito Sans',Inter,system-ui,sans-serif;color:#fff;overflow:hidden}.topbar{height:82px;display:flex;align-items:center;gap:15px;padding:0 22px;background:linear-gradient(110deg,#0e1a2e,#1b304c);border-bottom:1px solid #314a69;box-shadow:0 5px 18px #0b1c3220;position:relative;z-index:5}.brand-mark{width:58px;height:49px;display:grid;grid-template-columns:repeat(2,1fr);gap:3px;transform:rotate(-8deg);padding:7px;background:linear-gradient(145deg,#16a6ff,#0869d7);border-radius:10px 10px 14px 10px;box-shadow:inset 0 -5px #003c8d70,0 4px 0 #06152a}.mark-stud{border-radius:4px;background:linear-gradient(145deg,#ffdf36,#ff951e);box-shadow:inset 0 2px #fff8}.mark-stud:nth-child(2){background:linear-gradient(145deg,#ff4b61,#dc173b)}.mark-stud:nth-child(3){background:linear-gradient(145deg,#38e9a2,#06a86d)}.mark-stud:nth-child(4){background:linear-gradient(145deg,#56c5ff,#0878e6)}.brand-name{font-size:31px;font-weight:900;letter-spacing:-1.2px;white-space:nowrap}.brand-name span{background:linear-gradient(90deg,#ff40b3,#ffae27,#f9e43a,#37e48b,#32baff);background-clip:text;color:transparent}.tagline{font-size:18px;color:#a8c1e7;margin-left:34px;white-space:nowrap}.top-actions{display:flex;gap:10px;margin-left:auto}.action{border:0;border-radius:14px;padding:12px 20px;min-width:112px;color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;box-shadow:inset 0 1px #ffffff26;transition:.16s}.action span{font-size:20px}.action:hover{filter:brightness(1.12);transform:translateY(-1px)}.blue{background:linear-gradient(120deg,#078aff,#0873ed)}.green{background:linear-gradient(120deg,#0cb45f,#078a4b)}.purple{background:linear-gradient(120deg,#843dff,#6829e4)}.layout{height:calc(100vh - 82px);padding:12px;display:grid;grid-template-columns:535px minmax(0,1fr);gap:12px}.panel{background:var(--navy);border:1px solid #294361;border-radius:13px;overflow:hidden;box-shadow:0 8px 28px #102b4b18}.library{display:grid;grid-template-columns:146px minmax(0,1fr);min-height:0}.categories{padding:8px;background:#102139;border-right:1px solid #2a405c;display:flex;flex-direction:column;gap:5px}.category{min-height:59px;border:0;background:transparent;color:#b6ccec;display:flex;align-items:center;gap:12px;padding:0 13px;border-radius:10px;text-align:left;font-size:15px;font-weight:700;cursor:pointer;transition:.14s}.category:hover{background:#203955}.category.active{background:linear-gradient(120deg,#118aff,#0877ee);color:white;box-shadow:0 4px 14px #087ff53d}.cat-icon{font-size:27px;line-height:1;color:#51b8ff;width:30px;text-align:center;text-shadow:0 2px #0002}.green-icon{color:#36d777}.purple-icon{color:#bb67ff}.orange-icon{color:#ff9b2e}.yellow-icon{color:#ffdc35}.palette{padding:17px 13px 12px;min-width:0;display:flex;flex-direction:column;min-height:0}.palette-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.palette h1{font-size:25px;letter-spacing:-.6px;margin:0;font-weight:900}.palette-head>span{font-size:11px;color:#9db5d5;background:#203650;padding:5px 8px;border-radius:7px;white-space:nowrap}.subheading{font-size:12px;color:#9ab3d5;margin:3px 0 13px}.brick-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;overflow-y:auto;padding:2px 3px 9px;min-height:0;align-content:start;scrollbar-color:#415b7a #13253c;scrollbar-width:thin}.brick-option{height:86px;background:linear-gradient(145deg,#1d334d,#1a2e47);border:2px solid transparent;border-radius:11px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;cursor:pointer;min-width:0;transition:.14s}.brick-option:hover{background:#263f5d;transform:translateY(-1px)}.brick-option.selected{border-color:#138aff;background:#193b5e;box-shadow:0 0 0 1px #138aff40}.brick-option small{font-size:10px;font-weight:800;color:#d4e5ff;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.brick-icon{--brick:#e53935;position:relative;width:41px;height:22px;border-radius:3px;background:var(--brick);transform:skewY(-8deg);box-shadow:inset 0 -4px #0002,2px 3px 0 #0004}.brick-icon:before{content:'';position:absolute;left:2px;right:2px;top:-6px;height:8px;border-radius:3px;background:var(--brick);filter:brightness(1.18);box-shadow:0 0 0 1px #ffffff18}.brick-icon:after{content:'';position:absolute;top:-4px;left:8px;width:6px;height:4px;border-radius:50%;background:#ffffff70;box-shadow:12px 0 #ffffff70,24px 0 #ffffff70}.palette-tip{margin-top:auto;border-top:1px solid #293f5a;padding:12px 2px 1px;font-size:10px;line-height:1.5;color:#8faacc}.palette-tip span{color:#4daeff;font-size:15px;margin-right:5px}.builder{display:flex;flex-direction:column;min-width:0;min-height:0;background:#f5f9ff;color:#172b45}.canvas-head{height:68px;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;padding:0 19px;border-bottom:1px solid #dbe6f2;background:#fff}.canvas-title{font-size:17px;font-weight:900;letter-spacing:-.2px}.canvas-subtitle{font-size:11px;color:#7085a1;margin-top:3px}.live-dot{display:inline-block;width:7px;height:7px;background:#21c77a;border-radius:50%;margin-right:5px;box-shadow:0 0 0 3px #21c77a1c}.head-divider{margin:0 7px;color:#bdcad9}.canvas-actions{display:flex;gap:6px}.canvas-actions button{background:#edf3fa;color:#536b88;border:1px solid #dce7f3;border-radius:8px;padding:7px 10px;font-size:15px;font-weight:800;cursor:pointer}.canvas-actions button:disabled{opacity:.35;cursor:default}.viewport{position:relative;flex:1;min-height:250px;overflow:hidden;background:linear-gradient(#5ebcf5 0%,#b8e6ff 45%,#d9f0fa 65%,#a4d58f 65%,#80b978 100%)}.viewport canvas{display:block;width:100%;height:100%;outline:none}.view-label{position:absolute;top:15px;left:16px;padding:7px 10px;border-radius:7px;background:#12243bca;color:white;font-size:10px;font-weight:900;letter-spacing:1.2px;pointer-events:none}.help-pill{position:absolute;left:50%;bottom:13px;transform:translateX(-50%);background:#10223bdd;color:#e8f2ff;border:1px solid #ffffff24;padding:9px 15px;border-radius:30px;white-space:nowrap;font-size:11px;pointer-events:none;box-shadow:0 4px 15px #183c5a20}.help-pill span{color:#6e91b9;margin:0 5px}.viewport-tools{position:absolute;right:14px;top:15px;display:flex;flex-direction:column;gap:7px}.viewport-tools button{width:43px;height:43px;background:#10243bdd;border:1px solid #ffffff1a;border-radius:11px;color:white;font-size:24px;cursor:pointer;position:relative;box-shadow:0 4px 10px #10223b20}.viewport-tools button b{font-size:13px;position:absolute;right:7px;bottom:4px}.viewport-tools button:hover{background:#087ff5}.loading{position:absolute;inset:0;z-index:3;background:#e7f5ff;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px;color:#203a58}.loading small{color:#728aa5}.spinner{width:30px;height:30px;border:3px solid #b6d8f5;border-top-color:#087ff5;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.bottom-bar{min-height:66px;background:#fff;border-top:1px solid #dbe6f2;padding:9px 14px;display:flex;align-items:center;justify-content:space-between;gap:15px;flex-shrink:0}.tools-group{display:flex;gap:6px;background:#f2f6fc;border:1px solid #dfe8f3;border-radius:30px;padding:4px}.tool{border:0;border-radius:25px;background:transparent;color:#496383;padding:9px 14px;font-size:12px;font-weight:800;display:flex;align-items:center;gap:8px;cursor:pointer}.tool span{font-size:19px}.tool.active{background:#087ff5;color:#fff;box-shadow:0 3px 8px #087ff52e}.view-switch{display:flex;align-items:center;gap:4px}.view-switch>span{font-size:11px;font-weight:800;color:#8194ac;margin-right:7px}.view-btn{border:1px solid #dbe5f1;background:#f6f9fd;color:#5c7390;padding:9px 13px;font-size:11px;font-weight:800;cursor:pointer}.view-btn:first-of-type{border-radius:9px 0 0 9px}.view-btn:last-child{border-radius:0 9px 9px 0}.view-btn.active{background:#087ff5;color:white;border-color:#087ff5}.status-row{min-height:37px;display:flex;align-items:center;gap:8px;padding:0 17px;background:#f8fbff;color:#7489a2;font-size:11px;flex-shrink:0}.status-row #statusDot{width:6px;height:6px;border-radius:50%;background:#20bd76}.color-control{margin-left:auto;display:flex;align-items:center;gap:7px;color:#7489a2;font-weight:700}.color-control input{width:28px;height:25px;border:1px solid #d5e0ed;border-radius:6px;padding:2px;background:#fff;cursor:pointer}.status-row.error{color:#c6323e}.status-row.error #statusDot{background:#e43e4c}
@media(max-width:1150px){.layout{grid-template-columns:420px minmax(0,1fr)}.library{grid-template-columns:105px minmax(0,1fr)}.category{justify-content:center;flex-direction:column;gap:4px;padding:5px;font-size:11px}.cat-icon{font-size:22px}.tagline{margin-left:8px;font-size:14px}.action{min-width:0;padding:10px 12px}.brick-list{grid-template-columns:repeat(3,minmax(0,1fr))}.tool{padding:8px 10px}.view-btn{padding:8px 9px}}@media(max-width:800px){body{overflow:auto}.topbar{height:auto;min-height:72px;flex-wrap:wrap;padding:10px 12px;gap:9px}.brand-mark{width:42px;height:39px}.brand-name{font-size:24px}.tagline{display:none}.top-actions{gap:5px}.action{font-size:12px;padding:8px 10px;border-radius:9px}.action span{font-size:15px}.layout{height:auto;min-height:calc(100vh - 72px);display:flex;flex-direction:column;padding:8px}.library{grid-template-columns:1fr;order:0}.categories{flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid #2a405c;padding:6px}.category{min-width:66px;min-height:59px}.palette{padding:10px}.palette h1{font-size:20px}.subheading,.palette-tip{display:none}.brick-list{grid-template-columns:repeat(5,minmax(0,1fr));max-height:150px;gap:6px}.brick-option{height:65px;gap:7px}.brick-icon{transform:scale(.8) skewY(-8deg)}.builder{min-height:570px}.canvas-head{height:58px;padding:0 12px}.viewport{min-height:390px}.bottom-bar{align-items:flex-start;flex-direction:column;gap:8px}.tools-group{width:100%;justify-content:space-between}.tool{flex:1;justify-content:center;padding:8px 5px;font-size:11px}.tool span{font-size:16px}.view-switch{width:100%;justify-content:flex-end}.status-row{padding:6px 12px;min-height:38px}.help-pill{font-size:9px;padding:8px 10px}.view-label{top:10px;left:10px}.viewport-tools{right:8px;top:10px}.viewport-tools button{width:36px;height:36px}.canvas-actions button{padding:6px 8px}}@media(max-width:430px){.brand-name{font-size:20px}.brand-mark{width:35px;height:34px}.topbar{gap:6px}.action{padding:7px 8px}.brick-list{grid-template-columns:repeat(4,minmax(0,1fr))}.help-pill{max-width:85%;overflow:hidden;text-overflow:ellipsis}.tool{gap:4px}.tool span{display:none}.view-switch>span{margin-right:auto}}