@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:400;src:url(./prompt-thai-400-normal-BrkKv8cO.woff2)format("woff2"),url(./prompt-thai-400-normal-DJypnfr3.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:400;src:url(./prompt-vietnamese-400-normal-BCPzsgPT.woff2)format("woff2"),url(./prompt-vietnamese-400-normal-D4pLyeNK.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:400;src:url(./prompt-latin-ext-400-normal-DdSafGZ9.woff2)format("woff2"),url(./prompt-latin-ext-400-normal-1pHbN9uy.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:400;src:url(./prompt-latin-400-normal-BQ9zjSN8.woff2)format("woff2"),url(./prompt-latin-400-normal-CxU4ec_r.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:500;src:url(./prompt-thai-500-normal-C18pDUoL.woff2)format("woff2"),url(./prompt-thai-500-normal-D7YNqUJD.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:500;src:url(./prompt-vietnamese-500-normal-DmzxmPwa.woff2)format("woff2"),url(./prompt-vietnamese-500-normal-w_sS_j2F.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:500;src:url(./prompt-latin-ext-500-normal--EZ1um7s.woff2)format("woff2"),url(./prompt-latin-ext-500-normal-D-lI1EVT.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:500;src:url(./prompt-latin-500-normal-CxzxEHZc.woff2)format("woff2"),url(./prompt-latin-500-normal-B1edBDQ9.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:600;src:url(./prompt-thai-600-normal-MrdfU7zR.woff2)format("woff2"),url(./prompt-thai-600-normal-CYPViXds.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:600;src:url(./prompt-vietnamese-600-normal-7QWjJBsF.woff2)format("woff2"),url(./prompt-vietnamese-600-normal-1dyohtNh.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:600;src:url(./prompt-latin-ext-600-normal-Cg9L7iJU.woff2)format("woff2"),url(./prompt-latin-ext-600-normal-C8b50x67.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:600;src:url(./prompt-latin-600-normal-hKZWXsc1.woff2)format("woff2"),url(./prompt-latin-600-normal-CSDDLorv.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:700;src:url(./prompt-thai-700-normal-Cg4aQ0Nn.woff2)format("woff2"),url(./prompt-thai-700-normal-Cb5ilR-c.woff)format("woff");unicode-range:U+2D7,U+303,U+331,U+E01-E5B,U+200C-200D,U+25CC}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:700;src:url(./prompt-vietnamese-700-normal-CGnCqMm1.woff2)format("woff2"),url(./prompt-vietnamese-700-normal-Bop7lSxF.woff)format("woff");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:700;src:url(./prompt-latin-ext-700-normal-BkJrvM1L.woff2)format("woff2"),url(./prompt-latin-ext-700-normal-iiM_gSWc.woff)format("woff");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Prompt;font-style:normal;font-display:swap;font-weight:700;src:url(./prompt-latin-700-normal-I2gc831J.woff2)format("woff2"),url(./prompt-latin-700-normal-BfbftDSq.woff)format("woff");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}:root{--brand:#6c5ce7;--brand-dark:#5443d6;--brand-soft:#efecff;--brand-grad:linear-gradient(135deg, #6c5ce7 0%, #a855f7 55%, #ec4899 100%);--blocks-grad:linear-gradient(135deg, #ff8a3d 0%, #ffb020 100%);--run-grad:linear-gradient(135deg, #22c55e 0%, #10b981 100%);--bg:#f5f3ff;--panel:#fff;--border:#e7e4f5;--border-soft:#f1eff9;--field:#f8f7fd;--text:#1e1b2e;--muted:#6b6880;--danger:#e11d48;--ok:#16a34a;--radius:18px;--shadow-sm:0 1px 2px #1e1b2e0d, 0 2px 10px #6c5ce712;--shadow-md:0 10px 30px #6c5ce724, 0 2px 6px #1e1b2e0f;--font:"Noto Sans Thai Variable", "Noto Sans Thai", "Sukhumvit Set", "Leelawadee UI", system-ui, sans-serif;--font-head:"Prompt", var(--font);--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light}*{box-sizing:border-box}html,body,#root{height:100%;margin:0;overflow:hidden}body{font-family:var(--font);color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;font-size:14px}button,input,select,textarea{font:inherit;color:inherit}h1,h2,h3,h4{font-family:var(--font-head);margin:0}.muted{color:var(--muted)}:focus-visible{outline:2.5px solid var(--brand);outline-offset:2px}@media (prefers-reduced-motion:reduce){*,:before,:after{transition:none!important;animation:none!important}}.btn{border:1px solid var(--border);cursor:pointer;white-space:nowrap;height:38px;font-family:var(--font-head);color:var(--text);background:#fff;border-radius:12px;justify-content:center;align-items:center;gap:7px;padding:0 14px;font-size:14px;font-weight:500;transition:background .15s,border-color .15s,transform .1s,box-shadow .15s,filter .15s;display:inline-flex}.btn:hover{background:#faf9ff;border-color:#d6d1f5}.btn:active{transform:translateY(1px)}.btn.primary{background:var(--brand-grad);color:#fff;border-color:#0000;box-shadow:0 6px 16px #6c5ce759}.btn.primary:hover{filter:brightness(1.06)saturate(1.05)}.btn.run{background:var(--run-grad);color:#fff;border-color:#0000;font-weight:600;box-shadow:0 6px 16px #10b98159}.btn.run:hover{filter:brightness(1.06)}.btn.run.on{color:#0f9f6e;box-shadow:none;background:#fff;border-color:#bbf7d0}.btn.white{color:var(--brand-dark);background:#fff;border-color:#0000;font-weight:600;box-shadow:0 8px 20px #1e1b2e2e}.btn.glass{color:#fff;background:#ffffff29;border-color:#ffffff59}.btn.glass:hover{background:#ffffff42}.btn.ghost{background:0 0;border-color:#0000}.btn.ghost:hover{background:var(--brand-soft);color:var(--brand-dark)}.btn.small{border-radius:10px;height:32px;padding:0 11px;font-size:13px}.btn:disabled{opacity:.6;cursor:default}.icon-btn{cursor:pointer;width:32px;height:32px;color:var(--muted);background:0 0;border:none;border-radius:10px;place-items:center;transition:background .15s,color .15s;display:inline-grid}.icon-btn:hover{background:var(--brand-soft);color:var(--brand-dark)}.icon-btn.danger:hover{color:var(--danger);background:#ffe4e8}.link-btn{color:var(--brand);cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:4px;padding:2px 6px;font-size:13px;font-weight:600;display:inline-flex}.link-btn:hover{background:var(--brand-soft)}.link-btn.danger{color:var(--danger)}.panel-title{min-height:46px;font-family:var(--font-head);flex:none;justify-content:space-between;align-items:center;gap:8px;padding:0 8px 0 14px;font-size:14px;font-weight:600;display:flex}.panel-title>span:first-child{align-items:center;gap:8px;display:flex}.panel-actions{gap:2px;display:flex}.title-icon{color:#fff;background:var(--brand-grad);border-radius:8px;flex:none;place-items:center;width:26px;height:26px;display:inline-grid}.brand{cursor:pointer;background:0 0;border:none;border-radius:14px;flex:none;align-items:center;gap:10px;padding:4px 8px 4px 4px;display:flex}.brand:hover{background:var(--brand-soft)}.brand-mark{color:#fff;background:var(--brand-grad);border-radius:12px;place-items:center;width:36px;height:36px;display:grid;box-shadow:0 6px 14px #a855f759}.brand-name{font-family:var(--font-head);letter-spacing:-.2px;font-size:19px;font-weight:700}.brand-name b{background:var(--brand-grad);color:#0000;-webkit-background-clip:text;background-clip:text}.home{height:100%;position:relative;overflow:hidden auto}.home-bg{pointer-events:none;z-index:0;position:fixed;inset:0;overflow:hidden}.home-bg i{filter:blur(70px);opacity:.55;border-radius:50%;position:absolute}.home-bg i:first-child{background:#c4b5fd;width:480px;height:480px;top:-160px;left:-120px}.home-bg i:nth-child(2){background:#fbcfe8;width:420px;height:420px;top:120px;right:-140px}.home-bg i:nth-child(3){background:#a5f3fc;width:380px;height:380px;bottom:-160px;left:30%}.home-inner{z-index:1;max-width:1140px;margin:0 auto;padding:18px 24px 64px;position:relative}.home-nav{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.hero{background:radial-gradient(circle at 85% 20%, #ffffff38, transparent 40%), radial-gradient(circle at 10% 110%, #22d3ee73, transparent 45%), var(--brand-grad);color:#fff;border-radius:32px;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);align-items:center;gap:24px;margin-bottom:40px;padding:40px 44px;display:grid;position:relative;overflow:hidden;box-shadow:0 24px 60px #6c5ce759}.hero:after{content:"";pointer-events:none;background:radial-gradient(circle at 1px 1px,#ffffff29 1px,#0000 0) 0 0/22px 22px;position:absolute;inset:0}.hero-text{z-index:1;position:relative}.hero-badge{background:#fff3;border:1px solid #ffffff4d;border-radius:999px;align-items:center;gap:6px;margin-bottom:14px;padding:5px 12px;font-size:12.5px;font-weight:600;display:inline-flex}.hero h1{margin-bottom:12px;font-size:clamp(28px,3.4vw,42px);font-weight:700;line-height:1.25}.hero h1 em{color:#fff3b0;font-style:normal}.hero p{opacity:.92;max-width:520px;margin:0 0 22px;font-size:16px;line-height:1.6}.hero-steps{flex-wrap:wrap;gap:8px;margin-bottom:26px;display:flex}.hero-step{color:var(--text);background:#fffffff2;border-radius:999px;align-items:center;gap:8px;padding:7px 14px 7px 7px;font-size:13.5px;font-weight:600;display:inline-flex;box-shadow:0 4px 12px #1e1b2e1f}.hero-step span:first-child{color:#fff;border-radius:50%;place-items:center;width:26px;height:26px;display:grid}.hero-cta{flex-wrap:wrap;gap:10px;display:flex}.hero-cta .btn{border-radius:14px;height:46px;padding:0 20px;font-size:15px}.hero-art{z-index:1;height:330px;position:relative}.art-phone{background:#14121f;border-radius:30px;width:170px;height:320px;padding:8px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)rotate(-6deg);box-shadow:0 24px 50px #1e1b2e66}.art-screen{background:#fff;border-radius:23px;flex-direction:column;width:100%;height:100%;display:flex;overflow:hidden}.art-bar{color:#fff;background:linear-gradient(120deg,#f43f5e,#fb7185);align-items:flex-end;height:42px;padding:0 12px 8px;font-size:13px;font-weight:700;display:flex}.art-body{flex:1;align-content:start;gap:8px;padding:12px;display:grid}.art-input{color:#a3a1b5;background:#f3f2f9;border-radius:10px;align-items:center;height:30px;padding:0 10px;font-size:11px;display:flex}.art-button{color:#fff;background:#f43f5e;border-radius:10px;place-items:center;height:32px;font-size:12px;font-weight:700;display:grid;box-shadow:0 4px 10px #f43f5e59}.art-label{text-align:center;color:#f43f5e;margin-top:6px;font-size:15px;font-weight:800}.art-block{color:#fff;white-space:nowrap;border-radius:12px;padding:9px 14px;font-size:13px;font-weight:700;animation:5s ease-in-out infinite float;position:absolute;box-shadow:0 10px 24px #1e1b2e40}.art-block:before{content:"";background:inherit;border-radius:4px 4px 0 0;width:22px;height:8px;position:absolute;top:-5px;left:16px}.art-block.ev{background:#f08a00;border-radius:18px 18px 12px 12px;top:16px;left:-4px}.art-block.set{background:#16a34a;animation-delay:-1.6s;top:150px;right:-8px}.art-block.call{background:#7c3aed;animation-delay:-3.2s;bottom:18px;left:6px}@keyframes float{0%,to{transform:translateY(0)rotate(-2deg)}50%{transform:translateY(-10px)rotate(2deg)}}.section{margin-bottom:38px}.section-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px;display:flex}.section-title{align-items:center;gap:10px;font-size:21px;font-weight:700;display:flex}.section-title .title-icon{border-radius:10px;width:32px;height:32px}.count{font-family:var(--font);color:var(--brand-dark);background:var(--brand-soft);border-radius:999px;padding:2px 10px;font-size:12.5px;font-weight:700}.template-grid{grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:16px;display:grid}.template-card{text-align:left;border:1px solid var(--border);cursor:pointer;box-shadow:var(--shadow-sm);background:#fff;border-radius:22px;flex-direction:column;padding:0;transition:transform .18s,box-shadow .18s;display:flex;overflow:hidden}.template-card:hover{box-shadow:var(--shadow-md);transform:translateY(-4px)}.template-thumb{place-items:center;height:104px;display:grid;position:relative;overflow:hidden}.template-thumb:before,.template-thumb:after{content:"";background:#ffffff2e;border-radius:50%;position:absolute}.template-thumb:before{width:120px;height:120px;top:-40px;right:-30px}.template-thumb:after{width:70px;height:70px;bottom:-30px;left:14px}.template-glyph{z-index:1;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#ffffff38;border:1px solid #fff6;border-radius:18px;place-items:center;width:58px;height:58px;transition:transform .2s;display:grid;position:relative}.template-card:hover .template-glyph{transform:scale(1.08)rotate(-4deg)}.template-body{gap:4px;padding:14px 16px 16px;display:grid}.template-body strong{font-family:var(--font-head);font-size:16px;font-weight:600}.template-body .muted{font-size:13px;line-height:1.5}.topic-chips{flex-wrap:wrap;gap:4px;margin-top:6px;display:flex}.topic{background:var(--brand-soft);color:var(--brand-dark);border-radius:999px;padding:2px 9px;font-size:11.5px;font-weight:600}.project-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px;display:grid}.project-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:22px;transition:transform .18s,box-shadow .18s;overflow:hidden}.project-card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}.project-open{cursor:pointer;text-align:left;background:0 0;border:none;width:100%;padding:0;display:block}.project-thumb{justify-content:center;align-items:flex-end;height:118px;display:flex;position:relative;overflow:hidden}.project-mini{background:#14121f;border-radius:16px 16px 0 0;width:112px;height:100px;padding:6px 6px 0;transition:transform .2s;transform:translateY(6px);box-shadow:0 10px 24px #1e1b2e4d}.project-card:hover .project-mini{transform:translateY(0)}.project-mini div{background:#fff;border-radius:11px 11px 0 0;height:100%;overflow:hidden}.project-mini b{white-space:nowrap;text-overflow:ellipsis;height:24px;padding:6px 8px 0;font-size:10px;display:block;overflow:hidden}.project-mini i{background:#eceaf6;border-radius:4px;height:8px;margin:8px 8px 0;display:block}.project-mini i:nth-of-type(2){width:60%}.project-body{gap:2px;padding:12px 14px 4px;display:grid}.project-body strong{font-family:var(--font-head);text-overflow:ellipsis;white-space:nowrap;font-size:15.5px;font-weight:600;overflow:hidden}.project-meta{color:var(--muted);font-size:12.5px}.project-actions{gap:2px;padding:4px 8px 10px;display:flex}.empty-state{text-align:center;color:var(--muted);background:#ffffffb3;border:2px dashed #d9d3fb;border-radius:24px;justify-items:center;gap:10px;padding:36px 20px;display:grid}.empty-state .title-icon{border-radius:18px;width:56px;height:56px}.empty-state strong{font-family:var(--font-head);color:var(--text);font-size:17px}.notice{border-radius:14px;margin-bottom:20px;padding:12px 16px}.notice.warn{background:#fff7d6;border:1px solid #fcd34d}.modal-scrim{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:1000;background:#1e1b2e73;place-items:center;padding:16px;animation:.15s ease-out fade;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:26px;flex-direction:column;gap:16px;width:min(480px,100%);padding:24px;animation:.2s cubic-bezier(.2,.9,.3,1.2) pop;display:flex;box-shadow:0 30px 80px #1e1b2e59}@keyframes fade{0%{opacity:0}}@keyframes pop{0%{opacity:0;transform:scale(.94)translateY(8px)}}.modal-head{align-items:center;gap:12px;display:flex}.modal-head h2{flex:1;font-size:19px;font-weight:600}.modal-icon{color:#fff;border-radius:14px;flex:none;place-items:center;width:44px;height:44px;display:grid}.modal p{margin:0}.modal-actions{justify-content:flex-end;gap:8px;display:flex}.field{gap:6px;display:grid}.field span{font-size:13px;font-weight:600}.field input{border:2px solid var(--border);background:var(--field);border-radius:14px;width:100%;min-width:0;height:46px;padding:0 14px;font-size:16px;transition:border-color .15s,box-shadow .15s,background .15s}.field input:focus{border-color:var(--brand);background:#fff;outline:none;box-shadow:0 0 0 4px #6c5ce726}.code-modal{width:min(900px,100%);max-height:92vh}.code-legend{color:var(--muted);flex-wrap:wrap;gap:6px;font-size:12.5px;display:flex}.code-legend span{background:var(--field);border:1px solid var(--border-soft);border-radius:10px;padding:3px 8px}.code-legend code{color:#7c3aed;font-size:12px;font-weight:600}.code-block{color:#ecebff;tab-size:2;background:#1a1730;border-radius:16px;flex:1;min-height:120px;max-height:54vh;margin:0;padding:16px 18px;font:13px/1.65 ui-monospace,SF Mono,Menlo,Consolas,Noto Sans Thai Variable,monospace;overflow:auto;box-shadow:inset 0 0 0 1px #ffffff0f}.tk-str{color:#9be9a8}.tk-kw{color:#ff8fb1}.tk-num{color:#ffd479}.tk-com{color:#8c89a8}.tk-app{color:#b4a6ff;font-weight:600}.editor{background:radial-gradient(circle at 0% 0%, #c4b5fd59, transparent 30%), radial-gradient(circle at 100% 100%, #fbcfe859, transparent 30%), var(--bg);flex-direction:column;height:100%;display:flex}.topbar{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:10;background:#ffffffd9;flex:none;align-items:center;gap:10px;min-width:0;height:62px;padding:0 14px 0 10px;display:flex;position:relative}.project-name{width:170px;min-width:80px;height:38px;font-family:var(--font-head);background:0 0;border:1.5px solid #0000;border-radius:12px;padding:0 12px;font-size:15px;font-weight:600;transition:border-color .15s,background .15s}.project-name:hover{background:var(--field)}.project-name:focus{border-color:var(--brand);background:#fff;outline:none}.tabs{background:#f1effc;border-radius:16px;flex:none;gap:4px;padding:4px;display:flex}.tabs button{font-family:var(--font-head);cursor:pointer;color:var(--muted);white-space:nowrap;background:0 0;border:none;border-radius:12px;align-items:center;gap:7px;padding:7px 16px;font-weight:500;transition:color .15s,background .15s,box-shadow .15s;display:inline-flex}.tabs button:hover{color:var(--text)}.tabs button.on{color:#fff;font-weight:600}.tabs button.tab-design.on{background:var(--brand-grad);box-shadow:0 4px 12px #6c5ce759}.tabs button.tab-blocks.on{background:var(--blocks-grad);box-shadow:0 4px 12px #ff8a3d66}.screen-picker{flex:none;align-items:center;gap:6px;display:flex}.select-pill{align-items:center;display:flex;position:relative}.select-pill svg{color:var(--brand);pointer-events:none;position:absolute;left:10px}.select-pill select{border:1px solid var(--border);height:38px;font-family:var(--font-head);cursor:pointer;background:#fff;border-radius:12px;padding:0 10px 0 32px;font-weight:500}.topbar-right{flex:none;align-items:center;gap:6px;margin-left:auto;display:flex}.save-badge{color:var(--muted);white-space:nowrap;align-items:center;gap:6px;padding:0 8px;font-size:12.5px;display:inline-flex}.save-badge:before{content:"";background:#f59e0b;border-radius:50%;width:8px;height:8px}.save-badge.saved:before{background:#22c55e}.save-badge.error{color:var(--danger)}.save-badge.error:before{background:var(--danger)}.workspace{flex:1;gap:10px;min-height:0;padding:10px;display:flex}.tab-panes{flex:1;min-width:0;position:relative}.tab-pane{visibility:hidden;position:absolute;inset:0;overflow:hidden}.tab-pane.on{visibility:visible;z-index:1}.tab-pane:not(.on),.tab-pane:not(.on) *{visibility:hidden!important;pointer-events:none!important}.card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow-sm)}.preview-pane{flex:none;width:360px;display:none;overflow:hidden}.preview-pane.on{display:flex}.designer{grid-template-rows:minmax(0,1fr);grid-template-columns:206px minmax(0,1fr) 296px;gap:10px;height:100%;display:grid}.palette,.inspector{flex-direction:column;min-height:0;display:flex;overflow:hidden}.palette-hint{color:var(--muted);padding:0 14px 6px;font-size:12px;line-height:1.5}.palette-scroll{flex:1;min-height:0;padding:0 10px 14px;overflow-y:auto}.palette h4{color:var(--muted);align-items:center;gap:6px;margin:12px 4px 6px;font-size:12px;font-weight:600;display:flex}.palette h4:before{content:"";background:var(--g,var(--brand));border-radius:50%;width:6px;height:6px}.palette-item{--c:var(--brand);cursor:grab;text-align:left;background:#faf9fe;border:1.5px solid #0000;border-radius:14px;align-items:center;gap:10px;width:100%;margin-bottom:4px;padding:6px 8px 6px 6px;font-size:13.5px;font-weight:500;transition:background .15s,border-color .15s,transform .12s,box-shadow .15s;display:flex}.palette-item:hover{border-color:color-mix(in srgb, var(--c) 45%, white);background:color-mix(in srgb, var(--c) 8%, white);box-shadow:0 4px 12px color-mix(in srgb, var(--c) 18%, transparent);transform:translate(2px)}.palette-item:active{cursor:grabbing}.palette-item .grip{color:#c9c5dd;opacity:0;margin-left:auto;transition:opacity .15s}.palette-item:hover .grip{opacity:1}.comp-bubble{--c:var(--brand);width:32px;height:32px;color:var(--c);background:color-mix(in srgb, var(--c) 14%, white);border-radius:10px;flex:none;place-items:center;display:grid}.comp-bubble.solid{color:#fff;background:var(--c);box-shadow:0 4px 10px color-mix(in srgb, var(--c) 35%, transparent)}.comp-bubble.small{border-radius:8px;width:24px;height:24px}.design-area{background:radial-gradient(circle at 1px 1px,#dcd6f7 1.2px,#0000 0) 0 0/22px 22px,linear-gradient(160deg,#fbfaff,#f3efff);flex-direction:column;min-width:0;min-height:0;display:flex;overflow:hidden}.tree{border-bottom:1px solid var(--border-soft);flex-direction:column;flex:0 auto;min-height:130px;max-height:42%;display:flex}.tree-scroll{flex:auto;min-height:0;padding:0 8px 8px;overflow-y:auto}.tree-item{text-align:left;cursor:pointer;white-space:nowrap;text-overflow:ellipsis;background:0 0;border:none;border-radius:10px;align-items:center;gap:8px;width:100%;margin-bottom:1px;padding:4px 8px;font-size:13.5px;transition:background .12s;display:flex;overflow:hidden}.tree-item:hover{background:#f6f4ff}.tree-item.active{background:var(--brand-soft);color:var(--brand-dark);box-shadow:inset 3px 0 0 var(--brand);font-weight:700}.tree-sep{color:var(--muted);border-top:1px dashed var(--border);margin-top:6px;padding:10px 10px 4px;font-size:11.5px;font-weight:600}.props{flex-direction:column;flex:1;min-height:0;display:flex}.props-scroll{flex:1;min-height:0;padding:0 4px 24px;overflow-y:auto}.prop{gap:6px;padding:9px 12px;display:grid}.prop>label{color:#4b4763;font-size:12.5px;font-weight:600}.prop input[type=text],.prop input[type=url],.prop input[type=number],.prop select,.prop textarea,.name-field input{border:1.5px solid var(--border);background:var(--field);border-radius:11px;width:100%;min-height:36px;padding:6px 11px;font-size:14px;transition:border-color .15s,box-shadow .15s,background .15s}.prop textarea{resize:vertical}.prop input:focus,.prop select:focus,.prop textarea:focus,.name-field input:focus{border-color:var(--brand);background:#fff;outline:none;box-shadow:0 0 0 4px #6c5ce724}.prop .static{font-family:var(--font-head);padding:4px 0;font-weight:600}.prop-help{color:#5b5775;background:linear-gradient(135deg,#f5f3ff,#fdf4ff);border-radius:12px;gap:8px;margin:2px 12px 6px;padding:9px 11px;font-size:12.5px;line-height:1.5;display:flex}.prop-help svg{color:#a855f7;flex:none;margin-top:1px}.field-error{color:var(--danger);margin-top:4px;font-size:12px}.toggle{cursor:pointer;width:fit-content;color:var(--muted);align-items:center;gap:8px;font-size:13px;display:inline-flex}.toggle input{opacity:0;pointer-events:none;position:absolute}.toggle-track{background:#d9d6e8;border-radius:999px;width:42px;height:24px;transition:background .2s;position:relative}.toggle-track:after{content:"";background:#fff;border-radius:50%;width:18px;height:18px;transition:transform .2s cubic-bezier(.3,1.4,.5,1);position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0003}.toggle input:checked+.toggle-track{background:var(--brand-grad)}.toggle input:checked+.toggle-track:after{transform:translate(18px)}.toggle input:checked~span:last-child{color:var(--brand-dark);font-weight:600}.toggle input:focus-visible+.toggle-track{outline:2.5px solid var(--brand);outline-offset:2px}.segmented{background:#f1effc;border-radius:12px;padding:3px;display:flex}.segmented button{cursor:pointer;color:var(--muted);background:0 0;border:none;border-radius:9px;flex:1;padding:5px 0;font-size:13px}.segmented button.on{color:var(--brand-dark);background:#fff;font-weight:700;box-shadow:0 2px 6px #6c5ce72e}.size-field{gap:6px;display:flex}.size-field select{flex:1}.size-field input{width:80px!important}.image-field{gap:6px;display:grid}.color-field{position:relative}.color-btn{border:1.5px solid var(--border);background:var(--field);cursor:pointer;text-align:left;border-radius:11px;align-items:center;gap:9px;width:100%;min-height:36px;padding:5px 10px;display:flex}.color-btn:hover{border-color:#d6d1f5}.swatch{border-radius:7px;flex:none;width:22px;height:22px;box-shadow:inset 0 0 0 1px #0000001f}.swatch.none{background:repeating-conic-gradient(#ddd 0 25%, #fff 0 50%) 0 0 / 8px 8px}.color-pop{z-index:20;border:1px solid var(--border);box-shadow:var(--shadow-md);background:#fff;border-radius:16px;padding:12px;animation:.15s ease-out pop;position:absolute;top:calc(100% + 6px);left:0;right:0}.color-grid{grid-template-columns:repeat(8,1fr);gap:6px;display:grid}.swatch-btn{aspect-ratio:1;cursor:pointer;border:none;border-radius:8px;transition:transform .12s;box-shadow:inset 0 0 0 1px #0000001f}.swatch-btn:hover{transform:scale(1.15)}.swatch-btn.active{outline:2.5px solid var(--text);outline-offset:2px}.color-extra{justify-content:space-between;align-items:center;margin-top:10px;font-size:12.5px;display:flex}.color-extra label{align-items:center;gap:6px;display:flex}.color-extra input[type=color]{border:1px solid var(--border);border-radius:6px;width:34px;height:26px;padding:0}.phone-outer{flex-direction:column;flex:1;justify-content:center;align-items:center;min-width:0;min-height:0;padding:10px;display:flex;overflow:hidden}.phone-sizer{flex:none;position:relative}.phone{transform-origin:0 0;background:#14121f;border-radius:46px;flex-direction:column;padding:10px;display:flex;position:absolute;top:0;left:0;box-shadow:0 0 0 2px #2b2840,0 0 0 5px #fff9,0 30px 60px #4c1d9547}.phone-status{border-radius:36px 36px 0 0;justify-content:space-between;align-items:center;height:30px;padding:0 22px;font-size:12px;font-weight:700;transition:background .3s;display:flex;position:relative}.phone-island{background:#0b0a12;border-radius:999px;width:84px;height:20px;position:absolute;top:6px;left:50%;transform:translate(-50%)}.phone-status-icons{align-items:center;gap:5px;display:flex}.phone-screen{background:#fff;position:relative;overflow:hidden}.phone-nav{background:#fff;border-top:1px solid #eeecf6;border-radius:0 0 36px 36px;justify-content:space-around;align-items:center;height:40px;display:flex}.phone-nav button{color:#57536f;cursor:pointer;background:0 0;border:none;border-radius:15px;place-items:center;width:56px;height:30px;display:grid}.phone-nav button:hover:not(:disabled){color:var(--brand);background:#f1effc}.phone-nav button:disabled{opacity:.35;cursor:default}.phone-footer{flex:none;width:100%}.design-host{position:absolute;inset:0}.drop-line{z-index:30;pointer-events:none;background:#ff7a45;border-radius:3px;position:absolute;box-shadow:0 0 0 3px #ff7a4540}.drop-line.box{box-shadow:none;background:#ff7a451a;border-radius:10px;outline:2.5px dashed #ff7a45}.nonvisible{flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:12px 8px 0;font-size:13px;display:flex}.nonvisible-label{color:var(--muted)}.chip{--c:var(--brand);border:1.5px solid var(--border);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:6px;padding:3px 11px 3px 4px;font-size:13px;font-weight:500;transition:border-color .15s,background .15s;display:inline-flex}.chip:hover{border-color:color-mix(in srgb, var(--c) 50%, white)}.chip.active{border-color:var(--c);background:color-mix(in srgb, var(--c) 10%, white);font-weight:700}.chip .comp-bubble{border-radius:50%;width:22px;height:22px}.preview{flex-direction:column;width:100%;min-height:0;display:flex}.live{font-family:var(--font);color:#0f9f6e;background:#dcfce7;border-radius:999px;align-items:center;gap:5px;padding:1px 8px 1px 6px;font-size:11px;font-weight:700;display:inline-flex}.live:before{content:"";background:#22c55e;border-radius:50%;width:7px;height:7px;animation:1.6s ease-in-out infinite pulse}@keyframes pulse{50%{box-shadow:0 0 0 4px #22c55e40}}.preview-phone{background:linear-gradient(160deg,#fbfaff,#f1edff);border-radius:14px;flex:auto;min-height:0;margin:0 8px;display:flex}.preview-frame{border:0;width:100%;height:100%;display:block}.console{border:1px solid var(--border-soft);background:#fcfbff;border-radius:14px;flex-direction:column;flex:0 0 150px;min-height:0;margin:8px;display:flex;overflow:hidden}.console-head{color:#4b4763;border-bottom:1px solid var(--border-soft);justify-content:space-between;align-items:center;padding:6px 8px 6px 12px;font-size:12.5px;font-weight:700;display:flex}.console-head>span{align-items:center;gap:6px;display:flex}.console-body{flex:1;font-size:13px;overflow-y:auto}.console-empty{color:var(--muted);padding:10px 12px;font-size:12.5px;line-height:1.5}.console-row{border-bottom:1px solid var(--border-soft);align-items:flex-start;gap:8px;padding:7px 10px;animation:.2s ease-out fade;display:flex}.console-row.error{color:#be123c;background:#fff1f3}.console-row svg{flex:none;margin-top:2px}.console-text{overflow-wrap:anywhere;flex:1;line-height:1.5}.console-count{color:#be123c;background:#fecdd3;border-radius:999px;padding:0 7px;font-size:11px;font-weight:700}.blocks-card{position:absolute;inset:0;overflow:hidden}.blocks-host{position:absolute;inset:0}.blocks-hint{text-align:center;color:var(--muted);pointer-events:none;z-index:5;background:#ffffffd9;border:2px dashed #d9d3fb;border-radius:24px;justify-items:center;gap:8px;max-width:400px;padding:22px 26px;line-height:1.6;display:grid;position:absolute;top:50%;left:calc(50% + 100px);transform:translate(-50%,-50%)}.blocks-hint .title-icon{background:var(--blocks-grad);border-radius:16px;width:48px;height:48px}.blocks-hint strong{font-family:var(--font-head);color:var(--text);font-size:17px}.blocks-hint b{color:#e8750a}.blocks-card .blocklyToolbox{font-family:var(--font);border-right:1px solid var(--border-soft);background:#fff;padding:8px 0}.blocks-card .blocklyToolboxCategory{cursor:pointer;border-radius:12px;align-items:center;height:auto;margin:1px 8px;padding:4px 12px 4px 5px;line-height:1.3;transition:background .12s;display:flex}.blocks-card .blocklyToolboxCategory:hover{background:color-mix(in srgb, var(--cat,#6c5ce7) 9%, white)}.blocks-card .blocklyToolboxSelected,.blocks-card .blocklyToolboxSelected:hover{background:color-mix(in srgb, var(--cat,#6c5ce7) 16%, white)}.blocks-card .blocklyTreeRowContentContainer{align-items:center;display:flex}.blocks-card .ba-cat-icon{color:#fff;background:var(--cat,#6c5ce7);width:28px;height:28px;box-shadow:0 3px 8px color-mix(in srgb, var(--cat,#6c5ce7) 35%, transparent);border-radius:9px;flex:none;place-items:center;margin-right:9px;display:inline-grid}.blocks-card .ba-cat-sub{margin-left:20px}.blocks-card .ba-cat-sub .ba-cat-icon{width:24px;height:24px;color:var(--cat);background:color-mix(in srgb, var(--cat) 15%, white);box-shadow:none;border-radius:8px}.blocks-card .blocklyToolboxCategoryLabel{font-family:var(--font-head);color:var(--text);font-size:14px;font-weight:500}.blocks-card .blocklyToolboxSelected .blocklyToolboxCategoryLabel{color:color-mix(in srgb, var(--cat) 80%, black);font-weight:600}.blocks-card .blocklyTreeSeparator,.blocks-card .blocklyToolboxSeparator{border-bottom:1px dashed var(--border);height:0;margin:8px 14px}.blocklyFlyoutLabelText{font-weight:600;font-family:var(--font-head)!important;fill:#6b6880!important}.blocklyFlyoutButton{fill:#6c5ce7!important}.blocklyFlyoutButton .blocklyText{fill:#fff!important;font-family:var(--font-head)!important}.blocklyWidgetDiv,.blocklyDropDownDiv,.blocklyTooltipDiv{font-family:var(--font)!important}.blocklyTooltipDiv{box-shadow:var(--shadow-md)!important;border-radius:10px!important;padding:6px 10px!important}@media (width<=1320px){.designer{grid-template-columns:180px minmax(0,1fr) 268px}.preview-pane{width:330px}.save-badge span,.topbar-right .btn.ghost .btn-label{display:none}}@media (width<=1120px){.project-name{width:120px}.brand-name{display:none}.tabs button{padding:7px 11px}.hero{grid-template-columns:1fr}.hero-art{display:none}}.home-nav-right{align-items:center;gap:8px;display:flex}.session-chip{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:999px;align-items:center;gap:10px;padding:4px 4px 4px 5px;font-size:13px;display:inline-flex}.session-chip.offline{color:var(--muted);gap:6px;padding:7px 14px}.avatar{color:#fff;background:var(--brand-grad);border-radius:50%;flex:none;place-items:center;width:34px;height:34px;font-size:15px;font-weight:700;display:grid}.who{line-height:1.25;display:grid}.who b{font-family:var(--font-head);font-size:14px;font-weight:600}.who small{color:var(--muted);font-size:11.5px}.login-banner{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:20px;align-items:center;gap:14px;margin:-16px 0 32px;padding:16px 18px;display:flex}.login-banner>div{flex:1;gap:2px;display:grid}.login-banner b{font-family:var(--font-head);font-weight:600}.login-banner span:not(.title-icon){color:var(--muted);font-size:13px}.login-banner .title-icon{border-radius:12px;width:40px;height:40px}.login-modal{width:min(440px,100%)}.login-tabs button{justify-content:center;align-items:center;gap:6px;padding:8px 0;font-size:14px;display:inline-flex}.field-row{grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:10px;display:grid}.code-input{letter-spacing:4px;text-transform:uppercase;font-weight:700}.login-hint,.login-welcome{color:var(--muted);align-items:center;gap:6px;margin:0;font-size:12.5px;display:flex}.login-hint svg{color:#a855f7;flex:none}.login-welcome{color:var(--text);background:linear-gradient(135deg,#f5f3ff,#fdf4ff);border-radius:12px;padding:10px 12px;font-size:14px}.form-error{color:#be123c;background:#fff1f3;border-radius:12px;align-items:center;gap:6px;margin-bottom:12px;padding:9px 12px;font-size:13px;display:flex}.modal .form-error{margin:0}.thumb-badge{z-index:1;color:#57536f;background:#ffffffe6;border-radius:999px;align-items:center;gap:4px;padding:2px 9px;font-size:11px;font-weight:700;display:inline-flex;position:absolute;top:10px;left:10px}.thumb-badge.cloud{color:#5443d6}.project-actions .btn.small{margin-right:auto}.inline-form{gap:8px;display:flex}.inline-form input{border:1.5px solid var(--border);background:#fff;border-radius:12px;width:220px;height:38px;padding:0 12px}.inline-form input:focus{border-color:var(--brand);outline:none}.class-grid{grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;display:grid}.class-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:20px;overflow:hidden}.class-open{text-align:left;cursor:pointer;background:linear-gradient(135deg,#ecfdf5,#ecfeff);border:none;gap:6px;width:100%;padding:16px;display:grid}.class-open:hover{background:linear-gradient(135deg,#d1fae5,#cffafe)}.class-name{font-family:var(--font-head);font-size:16px;font-weight:600}.class-code{letter-spacing:5px;color:#047857;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:26px;font-weight:800}.class-open .muted{align-items:center;gap:5px;font-size:13px;display:inline-flex}.class-modal{width:min(820px,100%);max-height:90vh}.class-code-chip{letter-spacing:2px;color:#047857;background:#d1fae5;border-radius:999px;padding:3px 12px;font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:13px;font-weight:700}.table-wrap{border:1px solid var(--border-soft);border-radius:14px;overflow:auto}.student-table{border-collapse:collapse;width:100%;font-size:14px}.student-table th{text-align:left;color:var(--muted);background:#faf9fe;padding:8px 12px;font-size:12.5px;font-weight:600;position:sticky;top:0}.student-table td{border-top:1px solid var(--border-soft);padding:8px 12px}.student-table td.num{width:56px;font-weight:700}.student-table td.actions{text-align:right;white-space:nowrap}.student-table tr.open td,.project-row td{background:#faf9ff}.mini-project{align-items:center;gap:10px;padding:4px 0;display:flex}.mini-project .swatch{border-radius:4px;width:14px;height:14px}.mini-project .muted{margin-right:auto;font-size:12.5px}.mini-project a.btn{text-decoration:none}.empty-state.small{padding:22px}.share-modal{width:min(640px,100%)}.share-grid{grid-template-columns:220px 1fr;align-items:center;gap:18px;display:grid}.qr-box{border:1px solid var(--border);width:220px;height:220px;box-shadow:var(--shadow-md);background:#fff;border-radius:20px;place-items:center;padding:10px;display:grid}.qr-box img{width:100%;height:100%;image-rendering:pixelated}.share-info{gap:12px;display:grid}.share-steps{gap:6px;margin:0;padding-left:20px;line-height:1.5;display:grid}.share-url{gap:6px;display:flex}.share-url input{border:1.5px solid var(--border);background:var(--field);border-radius:10px;flex:1;min-width:0;height:32px;padding:0 10px;font-size:12.5px}.share-url a.btn{text-decoration:none}.share-note{color:#4b4763;margin:0;line-height:1.6}.small-note{margin:0;font-size:12.5px;line-height:1.6}.small-note code{background:#0000000f;border-radius:6px;padding:1px 6px}.save-badge.cloud:before{display:none}.save-badge.cloud{color:#5443d6}.save-badge.cloud.saved{color:var(--ok)}.save-badge.cloud.error{color:#b45309}@media (width<=720px){.share-grid{grid-template-columns:1fr;justify-items:center}}.site-footer{text-align:left;color:var(--muted);border-top:1px dashed #d9d3fb;justify-content:center;align-items:center;gap:14px;margin-top:8px;padding:22px 16px 6px;font-size:13.5px;line-height:1.6;display:flex}.site-footer p{margin:0}.site-footer b{font-family:var(--font-head);color:var(--text);font-weight:600}.site-footer .brand-mark{flex:none;width:38px;height:38px}.simulate-bar{color:var(--muted);flex-wrap:wrap;justify-content:center;align-items:center;gap:6px;padding:8px 8px 0;font-size:12.5px;display:flex}.simulate-bar .btn.active{color:#be123c;background:#fff1f2;border-color:#fca5a5}.preview-phone.vibrating .phone{animation:phone-buzz 70ms linear 0s var(--vibrate-count,4)}@keyframes phone-buzz{0%,to{translate:0}25%{translate:-3px 1px}75%{translate:3px -1px}}.palette-item.locked{cursor:not-allowed;opacity:.45;filter:grayscale(.8)}.palette-item.locked:hover{box-shadow:none;background:#faf9fe;border-color:#0000;transform:none}.palette-item.locked .grip{opacity:1;color:var(--muted)}.group-lock{color:var(--muted);margin-left:2px}.field textarea,.field select{border:2px solid var(--border);background:var(--field);resize:vertical;border-radius:14px;width:100%;min-width:0;padding:10px 14px;font-size:15px}.field select{height:46px;padding:0 12px}.field textarea:focus,.field select:focus{border-color:var(--brand);background:#fff;outline:none}.btn.submit{color:#fff;background:linear-gradient(135deg,#f59e0b,#f97316);border-color:#0000;font-weight:600;box-shadow:0 6px 16px #f973164d}.btn.submit:hover{filter:brightness(1.06)}.status-chip{white-space:nowrap;color:#57536f;background:#f1effc;border-radius:999px;align-items:center;gap:4px;padding:2px 10px;font-size:12px;font-weight:600;display:inline-flex}.status-chip.ok{color:#15803d;background:#dcfce7}.status-chip.soon{color:#b45309;background:#fef3c7}.status-chip.late{color:#be123c;background:#ffe4e6}.status-chip.none{color:#64748b;background:#f1f5f9}.class-tabs button{justify-content:center;align-items:center;gap:6px;padding:8px 0;font-size:14px;display:inline-flex}.class-body{align-content:start;gap:12px;min-height:180px;max-height:62vh;display:grid;overflow:auto}.assign-tab{align-content:start;gap:12px;display:grid}.assign-tab>.btn{justify-self:start}.assign-form{border:1px solid var(--border-soft);background:#faf9ff;border-radius:16px;gap:12px;padding:16px;display:grid}.assign-list{gap:8px;display:grid}.assign-row{border:1px solid var(--border);background:#fff;border-radius:14px;grid-template-columns:1fr 120px auto;align-items:center;gap:12px;padding:10px 12px;display:grid}.assign-open{text-align:left;cursor:pointer;background:0 0;border:none;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:0;display:flex}.assign-open b{font-family:var(--font-head);font-size:15px;font-weight:600}.assign-open .small-note{flex-basis:100%}.assign-open:hover b{color:var(--brand-dark);text-decoration:underline}.progress{background:#f1effc;border-radius:999px;height:8px;overflow:hidden}.progress span{border-radius:inherit;background:var(--run-grad);height:100%;display:block}.submissions{gap:12px;display:grid}.sub-head{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.sub-head b{font-family:var(--font-head);font-size:16px;font-weight:600}.grade-form{align-items:center;gap:6px;display:flex}.grade-form input{border:1.5px solid var(--border);background:var(--field);border-radius:10px;min-width:0;height:32px;padding:0 10px;font-size:13px}.grade-form input:not(.score-input){width:200px}.grade-form .score-input{text-align:center;width:66px;font-weight:700}.grade-form input:focus{border-color:var(--brand);background:#fff;outline:none}.student-table .status-chip+.status-chip{margin-left:4px}.unlock-tab{gap:14px;display:grid}.preset-list{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;display:grid}.preset{text-align:left;border:1.5px solid var(--border);cursor:pointer;background:#fff;border-radius:14px;gap:2px;padding:10px 12px;transition:border-color .15s,background .15s;display:grid}.preset b{font-family:var(--font-head);font-size:13.5px;font-weight:600}.preset span{color:var(--muted);font-size:12px}.preset:hover{border-color:#cfc8f7}.preset.on{border-color:var(--brand);background:var(--brand-soft)}.feature-cols{grid-template-columns:1fr 1fr;gap:12px;display:grid}.feature-group{border:1px solid var(--border-soft);border-radius:14px;align-content:start;gap:2px;margin:0;padding:10px 12px;display:grid}.feature-group legend{padding:0 6px;font-size:13px;font-weight:700}.feature-check{cursor:pointer;border-radius:8px;align-items:center;gap:8px;padding:4px 6px;font-size:14px;display:flex}.feature-check:hover{background:#faf9ff}.feature-check input{width:17px;height:17px;accent-color:var(--brand)}.feature-check svg{color:var(--muted)}.feature-check input:checked+svg{color:var(--ok)}.saved-note{color:var(--ok);align-items:center;gap:4px;margin-right:auto;font-weight:600;display:inline-flex}.assign-grid{grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px;display:grid}.assign-card{border:1px solid var(--border);box-shadow:var(--shadow-sm);background:#fff;border-radius:20px;align-content:start;gap:10px;padding:16px 16px 14px 20px;display:grid;position:relative;overflow:hidden}.assign-card:before{content:"";background:linear-gradient(#f59e0b,#f97316);width:6px;position:absolute;top:0;bottom:0;left:0}.assign-card.late:before{background:linear-gradient(#f43f5e,#e11d48)}.assign-card.done:before{background:linear-gradient(#22c55e,#10b981)}.assign-card.graded:before{background:var(--brand-grad)}.assign-top{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.assign-top b{font-family:var(--font-head);font-size:16.5px;font-weight:600}.score-badge{color:#fff;background:var(--brand-grad);border-radius:999px;flex:none;align-items:center;gap:4px;padding:2px 12px 2px 9px;font-size:16px;font-weight:800;display:inline-flex}.assign-detail{color:#4b4763;-webkit-line-clamp:3;white-space:pre-line;-webkit-box-orient:vertical;margin:0;font-size:13.5px;line-height:1.55;display:-webkit-box;overflow:hidden}.chip-row{flex-wrap:wrap;gap:6px;display:flex}.feedback{background:linear-gradient(135deg,#f5f3ff,#fdf4ff);border-radius:12px;padding:9px 12px;font-size:13px;line-height:1.5}.assign-actions{gap:6px;display:flex}.btn.small.primary{box-shadow:0 4px 10px #6c5ce74d}.pick-list{gap:6px;max-height:280px;display:grid;overflow:auto}.pick{border:1.5px solid var(--border);cursor:pointer;border-radius:14px;grid-template-columns:auto auto 1fr;align-items:center;gap:4px 10px;padding:10px 12px;display:grid}.pick .small-note{grid-column:3}.pick input{accent-color:var(--brand)}.pick.on{border-color:var(--brand);background:var(--brand-soft)}.pick .swatch{border-radius:5px;width:16px;height:16px}@media (width<=760px){.feature-cols{grid-template-columns:1fr}.assign-row{grid-template-columns:1fr auto}.assign-row .progress{display:none}}