:root{color:#e5e9f0;--bg-panel:#161b22f0;--panel-border:#38568047;--accent:#1e5ca3;--accent-alt:#00b4d8;--accent-warn:#f97316;--text-muted:#94a3b8;--code-bg:#0d1117;--console-bg:#0a0f19f5;--shadow:0 30px 60px #0000005c;background:radial-gradient(circle at 0 0,#0d172ad9,#0000 24%),radial-gradient(circle at 100% 100%,#00b4d81f,#0000 26%),linear-gradient(#0d1117 0%,#111827 100%);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:15px;line-height:1.4}*{box-sizing:border-box}html,body{background:0 0;min-height:100%;margin:0}body{color:#e5e9f0;background:#0d1117}body:before{content:"";pointer-events:none;background:radial-gradient(circle at 20% 25%,#00b4d82e,#0000 15%),radial-gradient(circle at 80% 10%,#10b9811f,#0000 18%);position:fixed;inset:0}.app-layout{grid-template-rows:auto 1fr;gap:18px;min-height:100vh;padding:20px;display:grid}.app-header,.panel{background:var(--bg-panel);border:1px solid var(--panel-border);box-shadow:var(--shadow);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);border-radius:22px}.app-header{z-index:100;color:#e5e9f0;background:#0f141ef2;border:1px solid #ffffff0f;border-radius:16px;justify-content:space-between;align-items:center;gap:16px;min-height:52px;padding:12px 18px;display:flex;position:relative;overflow:visible;box-shadow:0 16px 42px #00000059}.brand{align-items:center;gap:12px;display:flex}.brand-icon{color:#fff;background:linear-gradient(135deg,#1e5ca3,#00b4d8);border-radius:14px;place-items:center;width:44px;height:44px;font-size:1.1rem;display:grid;box-shadow:0 10px 24px #0084b738}.brand-copy{flex-direction:column;gap:2px;display:flex}.brand-title{color:#f8fafc;margin:0;font-size:1.05rem;font-weight:800}.brand-tag{color:#94a3b8;letter-spacing:.08em;text-transform:uppercase;margin:0;font-size:.78rem}.header-actions{flex-wrap:wrap;align-items:center;gap:12px;display:flex}.header-actions,.toolbar-group,.toolbar-secondary{flex-wrap:nowrap;overflow:visible}.header-actions .hero-btn,.toolbar-group .hero-btn,.toolbar-secondary .hero-btn,.more-dropdown-wrapper>.hero-btn{white-space:nowrap;flex-shrink:0}.toolbar-secondary .hero-btn{padding:8px 12px;font-size:13px}.hero-btn{color:#fff;cursor:pointer;border:none;border-radius:14px;align-items:center;gap:8px;padding:10px 16px;font-size:.82rem;font-weight:700;transition:transform .14s,box-shadow .18s,background .18s;display:inline-flex}.primary-btn{background:linear-gradient(135deg,#1e5ca3,#00b4d8);box-shadow:0 10px 24px #0084b73d}.alt-btn{color:#e5e9f0;background:#ffffff14;border:1px solid #ffffff1a}.outline-btn{color:#94a3b8;background:0 0;border:1px solid #94a3b838}.hero-btn:hover:not(:disabled){filter:drop-shadow(0 6px 18px #0000001f);transform:translateY(-2px)scale(1.02);box-shadow:0 12px 28px #0a78be29}.hero-btn.small{border-radius:12px;padding:8px 12px;font-size:.85rem}.btn-icon{background:#ffffff14;border-radius:10px;place-items:center;width:28px;height:28px;display:inline-grid}.connect-esp32-btn{border-color:#0f3460cc}.upload-code-btn{background:linear-gradient(135deg,#0f3460,#2b6cb0);border-color:#2e7dff59}.hero-btn:disabled{opacity:.55;cursor:not-allowed;filter:grayscale(.3)}.toolbar-group{align-items:center;gap:8px;display:flex}.toolbar-secondary{gap:12px}.status-pill{color:#e5e9f0;background:#ffffff0d;border:1px solid #94a3b82e;border-radius:999px;align-items:center;gap:6px;padding:5px 10px;font-size:.72rem;display:inline-flex}.status-dot{background:#f97316;border-radius:50%;width:8px;height:8px;box-shadow:0 0 0 4px #f973161f}.status-dot.live{background:#4ade80;box-shadow:0 0 0 4px #4ade8024}.live-pill{color:#d9f99d;background:#4ade8014;border-color:#4ade802e}.status-text{color:#cbd5e1}.app-main{grid-template-columns:minmax(0,1fr) minmax(300px,.58fr);gap:18px;min-height:calc(100vh - 120px);display:grid}.panel-workspace{flex-direction:column;flex:auto;min-width:0;display:flex}.panel{-webkit-backdrop-filter:blur(14px)saturate(120%);backdrop-filter:blur(14px)saturate(120%);background:linear-gradient(#161b22f5,#10141ef5);border-radius:16px;transition:box-shadow .18s,transform .12s;overflow:hidden}.panel-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px;display:flex}.panel-header-split{align-items:flex-start}.panel-label{color:#8da2b8;letter-spacing:.13em;text-transform:uppercase;margin:0 0 6px;font-size:.72rem}.panel-title{margin:0;font-size:clamp(1rem,1.4vw,1.35rem);line-height:1.15}.panel-chip{color:#dbeeff;text-shadow:0 1px #00000040;background:linear-gradient(90deg,#00e5ff0f,#50a0ff08);border:1px solid #00e5ff14;border-radius:999px;align-items:center;padding:6px 10px;font-size:.78rem;font-weight:600;display:inline-flex}.panel-chip.accent{background:linear-gradient(135deg,#1e5ca3,#00b4d8);box-shadow:0 10px 28px #00b4d82e}.panel-body{padding:16px}.panel-body-workspace{flex-direction:column;min-height:640px;padding:14px;display:flex;position:relative}.workspace-header-meta{flex-wrap:wrap;align-items:center;gap:10px;min-width:0;display:flex}.block-search{color:#e5e9f0;background:#0f1420f0;border:1px solid #94a3b829;border-radius:14px;width:220px;max-width:100%;padding:10px 12px;font-size:.86rem}.workspace-mini-toolbar{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:500;background:#0a0e18e0;border:1px solid #ffffff14;border-radius:18px;gap:8px;padding:10px 12px;display:flex;position:absolute;bottom:20px;right:100px}.workspace-mini-toolbar .icon-btn{color:#e5e9f0;background:#ffffff0d;border:1px solid #ffffff14;border-radius:12px;justify-content:center;align-items:center;width:34px;height:34px;display:inline-flex}.save-status{color:#94a3b8;font-size:.78rem;position:absolute;bottom:18px;left:18px}#blockly-editor{background-color:#0d1117;background-image:radial-gradient(circle,#1e2a3a 1.5px,#0000 1.5px);background-size:24px 24px;border-radius:12px;flex:auto;width:100%;height:100%;min-height:480px;position:relative;overflow:hidden;box-shadow:inset 0 0 0 1px #00e5ff08,0 8px 40px #0008148c}#blockly-editor .injectionDiv,#blockly-editor .blocklySvg{width:100%!important;height:100%!important;min-height:520px!important}#blockly-editor .blocklyToolboxDiv{box-sizing:border-box!important;color:#e2e8f0!important;background:#010203f2 radial-gradient(circle,#0d2140 1px,#0000 1px) 0 0/18px 18px!important;border:none!important;border-right:2px solid #1e3a5f!important;border-top-left-radius:12px!important;border-bottom-left-radius:12px!important;width:300px!important;height:100%!important;min-height:520px!important;position:relative!important}.blocklySvg{display:block;width:100%!important;height:100%!important}.upload-group{align-items:center;gap:8px;display:inline-flex}.ota-ip-input{color:#0f344d;background:#ffffffeb;border:1px solid #1170bb29;border-radius:14px;width:130px;min-width:130px;padding:10px 12px}.upload-ota-btn{background:linear-gradient(135deg,#0b86be,#05b392);border:none;box-shadow:0 10px 25px #087db42e}.chip-toggle{color:#fff;background:linear-gradient(135deg,#0d5d94e6,#0c6ea2eb);border:none;border-radius:12px;margin-right:8px;padding:8px 10px;box-shadow:0 10px 28px #0a50782e}#code-preview-root.collapsed{opacity:0;max-height:0;transition:max-height .18s,opacity .2s;overflow:hidden}#code-preview-root{transition:max-height .22s,opacity .18s}.panel-tabs{display:none}.tab{color:var(--text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;padding:8px 12px}.tab.active{color:#e8edf8;background:#00e5ff0f;border:1px solid #00e5ff14}.hidden{display:none!important}.serial-input{color:#e5e9f0;background:#0a0e14e0;border:1px solid #94a3b824;border-radius:14px;flex:1;min-width:0;padding:12px 14px}.serial-actions{flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:8px;display:flex}.baud-select{color:#e5e9f0;background:#0a0e14eb;border:1px solid #94a3b824;border-radius:14px;min-width:92px;padding:10px 12px}.serial-input-row{gap:10px;margin-top:12px;display:flex}.panel{border:1px solid #ffffff0f;box-shadow:0 8px 30px #0000008c}.panel-header{border-bottom:1px solid #ffffff0f}.code-preview{background:linear-gradient(#03081299,#03060c80);border:1px solid #00e5ff0a}.blocklyToolboxDiv{box-sizing:border-box!important;background-color:#060b14!important;background-image:radial-gradient(circle,#0d2140 1px,#0000 1px)!important;background-size:18px 18px!important;border-right:2px solid #1e3a5f!important;height:100%!important}.panel-code{grid-template-rows:auto auto 1fr;align-items:stretch;gap:14px;display:grid}.firmware-tab-row{gap:8px;padding:0 14px;display:flex}.more-dropdown-wrapper{position:relative;overflow:visible}.more-dropdown{z-index:99999;background:#070c16fa;border:1px solid #ffffff1a;border-radius:18px;width:min(320px,100vw);padding:12px;position:fixed;box-shadow:0 24px 60px #00000057}.dropdown-item{color:#e5e9f0;cursor:pointer;background:0 0;border:none;border-radius:14px;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 12px;font-size:.95rem;display:flex}.dropdown-item:hover{background:#ffffff0f}.dropdown-divider{background:#ffffff14;height:1px;margin:10px 0}.dropdown-ota{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.dropdown-ota input{flex:auto;min-width:120px}.firmware-tab{color:#cbd5e1;cursor:pointer;background:#ffffff0a;border:1px solid #94a3b824;border-radius:999px;flex:1;padding:10px 14px;font-size:.82rem;transition:background .2s,color .2s,transform .2s}.firmware-tab.active,.firmware-tab:hover{color:#fff;background:#00b4d82e;transform:translateY(-1px)}.panel-code .panel-tabs{display:none}.panel-code #console-panel,.panel-code #serial-panel{margin:0 8px}.code-preview-panel{background:#0a0f19f5;border:1px solid #00b4d824;border-radius:18px;margin:0 8px 12px;padding:16px;transition:max-height .22s,opacity .18s,transform .18s;overflow:hidden}.code-preview-panel.collapsed{opacity:0!important;max-height:0!important;padding:0 12px!important}.code-preview-panel .code-preview{min-height:200px;margin:0;padding:16px}.code-actions{gap:8px;display:flex}.icon-btn.small{color:#e5e9f0;background:#ffffff0f;border:1px solid #ffffff14;border-radius:14px;padding:9px 12px;font-size:.82rem}.code-preview-header{border-bottom:1px solid #ffffff14;justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;padding-bottom:8px;display:flex}.code-preview-header .panel-title{margin:0;font-size:1.05rem}.code-preview-header .panel-label{margin-bottom:4px;font-size:.72rem}.panel-console{background:#080d17f5;border:1px solid #385f9b2e;border-radius:16px;margin:0 8px;padding:14px}.flash-log-output{color:#86efac;background:#0b1220;border:1px solid #4ade801f;border-radius:16px;max-height:260px;padding:14px;font-family:Fira Code,monospace;font-size:.86rem;overflow:auto}.flash-log-output:before{content:"[14:32:05] ";color:#94a3b8cc}.code-preview,.flash-log-output{background:var(--code-bg);color:#e8edf8;white-space:pre-wrap;word-break:break-word;border-radius:16px;min-height:240px;margin:0;padding:16px;font-family:Fira Code,monospace;font-size:.86rem;line-height:1.5;overflow:auto}.code-preview{border:1px solid #438bff2e;box-shadow:inset 0 0 0 1px #ffffff0a}.flash-log-output{background:var(--console-bg);color:#9dff9d;border:1px solid #39df4924;min-height:240px;box-shadow:inset 0 0 0 1px #ffffff0f}.flash-log-output::selection{background:#0f34606b}.code-preview::selection{background:#0f34606b}.token.keyword{color:#7dd3fc}.token.string{color:#f6ad55}.token.comment{color:#94a3b8}.blocklyWorkspace{background-color:#111827!important}.blocklyToolboxDiv,.blocklyDropDownDiv{color:#e2e8f0!important;background:#0c1224f2!important;border:1px solid #ffffff14!important}.blocklyTreeRoot{background:0 0!important}.blocklyTreeLabel{color:#dbe2ff!important}.blocklyTreeLabel[title=Cấu\ trúc]:before{content:"🧩";margin-right:8px}.blocklyTreeLabel[title="Kết nối IoT"]:before{content:"📡";margin-right:8px}.blocklyTreeLabel[title=Cảm\ biến]:before{content:"🌡️";margin-right:8px}.blocklyTreeLabel[title=Động\ cơ]:before{content:"⚙️";margin-right:8px}.blocklyTreeLabel[title="Logic cơ bản"]:before{content:"🔁";margin-right:8px}.blocklyTreeLabel[title="I/O Cơ bản"]:before{content:"🖥️";margin-right:8px}.blocklyCategoryLabel{color:#dbe2ff!important}.blocklyBlockBackground,.blocklySharpenedGlow{fill:#16243d!important}.blocklyMainBackground{fill:#0000!important}.blocklyScrollbarBackground,.blocklyScrollbarHandle{stroke:#ffffff14!important;fill:#ffffff1f!important}.blocklyFlyoutBackground{fill:#0a0f1efa!important}.blocklyTreeSeparator{stroke:#ffffff14!important}.blocklyText,.blocklyHtmlInput{fill:#edf2ff!important}.blocklySelected>.blocklyPath{stroke:#7dd3fc!important;fill-opacity:.85!important}@media (width<=1100px){.app-main{grid-template-columns:1fr}.panel-body-workspace{min-height:620px}}@media (width<=700px){.app-header,.panel{border-radius:18px}.header-actions{justify-content:stretch;width:100%}.hero-btn{flex:1;justify-content:center}}.upload-code-btn:disabled{cursor:not-allowed;opacity:.75}.connect-esp32-btn:disabled{cursor:not-allowed;opacity:.8}.connect-esp32-btn.is-connected{background:linear-gradient(135deg,#059669,#047857)}.panel-body{color:#4b5563;flex:1;padding:16px;overflow:auto}.panel-body-workspace{padding:0;overflow:hidden}.panel-workspace .panel-body-workspace{background:0 0}#blockly-editor{width:100%;height:100%;min-height:560px}.code-preview{white-space:pre-wrap;margin:0;font-family:Consolas,Courier New,monospace}.flash-log-panel{color:#e2e8f0;background:#0f172a;border-top:1px solid #e5e7eb;padding:10px 12px}.flash-log-title{color:#cbd5e1;margin:0 0 6px;font-size:.8rem;font-weight:700}.flash-log-output{white-space:pre-wrap;min-height:130px;max-height:220px;margin:0;font-family:Consolas,Courier New,monospace;font-size:.75rem;line-height:1.45;overflow:auto}@media (width<=1024px){.app-layout{grid-template-rows:minmax(540px,1fr) auto;grid-template-columns:1fr}.panel-title-code{flex-direction:column}.agent-controls{width:100%;min-width:0}}.ota-direct-group{background:#0003;border:1px solid #ffffff14;border-radius:16px;align-items:center;gap:6px;padding:4px;display:flex}.ota-ip-input{color:#4ade80;text-align:center;text-transform:uppercase;background:#0f1420e6;border:1px solid #ffffff1a;border-radius:12px;width:140px;padding:8px 12px;font-family:monospace;font-weight:700}.ota-btn{background:linear-gradient(135deg,#f59e0b,#d97706);padding:8px 16px;box-shadow:0 4px 15px #f59e0b4d}.ota-btn:disabled{cursor:wait;background:#64748b}