:root{--bg:#eef6fc;--card:#fff;--soft:#f4f9fd;--text:#173147;--muted:#657c8f;--line:#ccdeec;--brand:#0b6fae;--brand2:#1685c9;--good:#237b4b;--bad:#b42318;--shadow:0 12px 34px rgba(32,76,112,.11);--radius:16px;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace}
html[data-theme="dark"]{--bg:#0d1721;--card:#162431;--soft:#1b2c3a;--text:#e7f0f7;--muted:#9bb0c0;--line:#2d4456;--brand:#61baf1;--brand2:#8bcff8;--good:#74d29a;--bad:#ff958c;--shadow:0 14px 38px rgba(0,0,0,.28)}
*{box-sizing:border-box}html,body{min-height:100%}body{margin:0;background:linear-gradient(145deg,var(--bg),color-mix(in srgb,var(--bg) 80%,white));color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif}.app{max-width:1500px;margin:auto;padding:16px}.hero{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;padding:18px 20px;background:linear-gradient(135deg,var(--card),var(--soft));border:1px solid var(--line);border-radius:24px;box-shadow:var(--shadow)}.brand{display:flex;align-items:center;gap:14px}.javaMark{width:58px;height:58px;display:grid;place-items:center;border-radius:16px;background:#e96e25;color:#fff;font-weight:950;font-size:13px;letter-spacing:.04em;box-shadow:0 8px 20px rgba(233,110,37,.24)}.eyebrow{margin:0 0 4px;color:var(--brand);font-size:11px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}.hero h1{margin:0;font-size:clamp(26px,4vw,43px);line-height:1.05}.subtitle{margin:7px 0 0;color:var(--muted);font-size:14px}.heroActions,.toolbar,.cardActions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.modeBadge{padding:6px 9px;border-radius:999px;background:color-mix(in srgb,var(--brand) 14%,var(--card));color:var(--brand);font-size:11px;font-weight:900}.quickStart{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin:12px 0}.tip{display:flex;align-items:center;gap:9px;padding:10px 11px;background:var(--card);border:1px solid var(--line);border-radius:15px;box-shadow:0 7px 18px rgba(32,76,112,.06)}.tip b{width:28px;height:28px;display:grid;place-items:center;border-radius:999px;background:var(--brand);color:#fff}.tip span{font-size:12px;font-weight:800}.toolbar{position:sticky;top:0;z-index:30;padding:10px;margin:12px 0;background:color-mix(in srgb,var(--card) 90%,transparent);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);backdrop-filter:blur(12px)}button,select,input,textarea{font:inherit}.btn,.miniBtn{border:1px solid var(--line);background:var(--card);color:var(--text);border-radius:10px;font-weight:800;cursor:pointer;transition:.16s ease}.btn{min-height:38px;padding:0 12px}.btn:hover,.miniBtn:hover{background:var(--soft);transform:translateY(-1px)}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}.btn.danger{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 35%,var(--line))}.btn:disabled,.miniBtn:disabled{opacity:.5;cursor:not-allowed;transform:none}.miniBtn{min-height:31px;padding:0 9px;font-size:12px}.control{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:12px;font-weight:800}.control select,.control input,.sampleLabel select{height:34px;padding:0 8px;border:1px solid var(--line);border-radius:8px;background:var(--card);color:var(--text)}.topicControl input{width:min(230px,34vw);min-width:145px}.speechControl{padding:7px 9px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--text);white-space:nowrap}.speechControl input{width:17px;height:17px;margin:0;accent-color:var(--brand)}.status{margin-left:auto;font-size:12px;font-weight:850;color:var(--muted)}.status.ok{color:var(--good)}.status.bad{color:var(--bad)}.buildOptions{display:none;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end;padding:11px 12px;margin:-4px 0 12px;background:var(--soft);border:1px solid var(--line);border-radius:14px}.buildOptions.show{display:grid}.buildOptions label{display:grid;gap:5px;color:var(--muted);font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.04em}.buildOptions input{height:38px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);color:var(--text);font-family:var(--mono);outline:none}.typingAids{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 12px;color:var(--muted);font-size:12px;font-weight:800}.typingAids b{padding:6px 9px;border:1px solid var(--line);border-radius:999px;background:var(--card);color:var(--text);font-size:11px}.workspace{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.55fr);gap:12px;align-items:stretch}.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden}.cardHead{min-height:53px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 11px;background:var(--soft);border-bottom:1px solid var(--line)}.cardHead h2{margin:0;font-size:14px}.hint{display:block;margin-top:3px;color:var(--muted);font-size:11px}.sampleLabel{display:flex;align-items:center;gap:5px;color:var(--muted);font-size:11px;font-weight:800}.codeCard{min-height:690px;display:flex;flex-direction:column}.codeCard #editor,.codeCard #fallbackEditor{flex:1;min-height:630px;width:100%}#editor{font-size:16px}#fallbackEditor{display:none;padding:14px;border:0;outline:0;resize:none;background:#0b141c;color:#eaf4fb;font-family:var(--mono);line-height:1.55}.side{display:grid;grid-template-rows:minmax(150px,.6fr) minmax(190px,.9fr) minmax(190px,.9fr);gap:12px;min-height:0}.ioCard{display:flex;flex-direction:column;min-height:0}.ioBox{flex:1;min-height:110px;width:100%;resize:vertical;padding:12px;border:0;outline:0;background:var(--card);color:var(--text);font-family:var(--mono);line-height:1.5}.output{flex:1;min-height:130px;max-height:260px;overflow:auto;margin:0;padding:12px;background:#0b141c;color:#d9e9f3;font-family:var(--mono);font-size:13px;line-height:1.55;white-space:pre-wrap;word-break:break-word}.errorBox{color:#ffb8b2}.filePanel{margin-top:12px}.fileHead>div:first-child{display:grid}.fileList{display:grid;gap:7px;padding:11px}.fileRow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--line);border-radius:10px;background:var(--soft)}.fileName{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--mono);font-size:12px;font-weight:800}.fileSize{color:var(--muted);font-size:11px}.fileButtons{display:flex;gap:6px}.emptyFiles{margin:3px;color:var(--muted);font-size:12px}.learningLinks{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}.learningLinks a{padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--brand);font-size:12px;font-weight:850;text-decoration:none}.learningLinks a:hover{background:var(--soft)}.codeExpanded{position:fixed!important;inset:14px!important;z-index:10000!important;min-height:0!important}.codeExpanded #editor,.codeExpanded #fallbackEditor{min-height:0!important}.ioExpanded{position:fixed!important;inset:55px 14px 14px!important;z-index:9999!important;display:flex!important;flex-direction:column!important}.ioExpanded .ioBox,.ioExpanded .output{flex:1!important;min-height:0!important;max-height:none!important;height:auto!important;resize:none}.lock{overflow:hidden!important}body.appFullscreen{overflow:hidden}.appFullscreen .app{position:fixed;inset:0;z-index:9000;max-width:none;overflow:auto;background:var(--bg);padding:10px}.appFullscreen .hero,.appFullscreen .quickStart,.appFullscreen .typingAids,.appFullscreen .filePanel,.appFullscreen .learningLinks{display:none}.appFullscreen .toolbar{margin-top:0}.appFullscreen .workspace{grid-template-columns:minmax(0,1fr);}.appFullscreen .codeCard{min-height:calc(100vh - 100px)}.appFullscreen .codeCard #editor,.appFullscreen .codeCard #fallbackEditor{min-height:calc(100vh - 155px)}.appFullscreen .side{grid-template-rows:190px 230px 230px}.toast{position:fixed;left:50%;bottom:18px;z-index:20000;max-width:min(92vw,800px);padding:10px 13px;border-radius:999px;background:#0b141c;color:#fff;font-size:12px;opacity:0;pointer-events:none;transform:translate(-50%,12px);transition:.18s}.toast.show{opacity:1;transform:translate(-50%,0)}dialog{width:min(560px,calc(100% - 28px));border:0;padding:0;border-radius:16px;background:var(--card);color:var(--text);box-shadow:0 26px 75px rgba(0,0,0,.35)}dialog::backdrop{background:rgba(4,16,25,.58);backdrop-filter:blur(4px)}.settingsCard{padding:17px}.dialogHead{display:flex;justify-content:space-between;gap:12px}.dialogHead h2{margin:0;font-size:18px}.dialogHead p{margin:4px 0 0;color:var(--muted);font-size:12px}.closeBtn{width:34px;height:34px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--text);font-size:20px;cursor:pointer}.settingsCard>label{display:grid;gap:6px;margin-top:17px;font-size:12px;font-weight:850}.settingsCard>label input{height:41px;padding:0 10px;border:1px solid var(--line);border-radius:9px;background:var(--soft);color:var(--text);outline:none}.note{padding:9px 10px;border-radius:9px;background:color-mix(in srgb,var(--brand) 10%,var(--card));color:var(--muted);font-size:11px;line-height:1.5}.dialogActions{display:flex;justify-content:flex-end;gap:8px;margin-top:14px}@media(max-width:980px){.workspace{grid-template-columns:1fr}.side{grid-template-rows:190px 240px 240px}.codeCard{min-height:580px}.codeCard #editor,.codeCard #fallbackEditor{min-height:520px}.quickStart{grid-template-columns:repeat(2,1fr)}.status{margin-left:0}.buildOptions{grid-template-columns:1fr}.fileRow{grid-template-columns:minmax(0,1fr) auto}.fileSize{display:none}.fileButtons{grid-column:1/-1}}@media(max-width:600px){.app{padding:8px}.hero{padding:14px;border-radius:18px}.javaMark{width:45px;height:45px}.quickStart{grid-template-columns:1fr}.toolbar{position:static}.toolbar .btn{flex:1;min-width:100px}.control,.speechControl{width:100%;justify-content:space-between}.control select,.control input{flex:1}.topicControl input{width:auto;min-width:0}.status{width:100%}.cardHead{align-items:flex-start;flex-direction:column}.cardActions{width:100%}.cardActions .miniBtn{flex:1}.sampleLabel{width:100%;justify-content:space-between}.sampleLabel select{flex:1}.codeCard #editor,.codeCard #fallbackEditor{min-height:500px}.learningLinks a{flex:1;text-align:center}}