.esp-app{background:linear-gradient(180deg,#eef7f4,#f8fbf7);padding:32px 24px 52px}.esp-app-inner{max-width:1500px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1.16fr) minmax(380px,.62fr);gap:28px}.esp-flow-col{min-height:0}.esp-flow-col{display:flex;flex-direction:column;gap:18px}.esp-back-link{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;color:#52615c;font-size:14px;font-weight:800;text-decoration:none;transition:color .18s ease}.esp-back-link:hover{color:#057b91}.esp-eyebrow{color:#6c817b;font-size:.72rem;font-weight:800;letter-spacing:.24em;text-transform:uppercase;margin:0 0 8px}.esp-hero-panel{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,.42fr);gap:24px;min-height:240px;overflow:hidden;border:1px solid #ccdbd5;border-radius:22px;padding:28px;background:linear-gradient(135deg,#fffffff5,#f5faf7d1),radial-gradient(circle at 12% 14%,rgba(143,195,31,.14),transparent 42%);box-shadow:0 18px 50px #1d36311a}.esp-hero-copy h1{max-width:720px;color:#17211f;font-size:32px;font-weight:800;letter-spacing:-.01em;line-height:1.12;margin:0}.esp-hero-sub{max-width:620px;margin:12px 0 0;color:#73817d;font-size:15px;line-height:1.6}.esp-hero-steps{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}.esp-hero-step{display:flex;align-items:center;gap:8px;color:#73817d;font-size:12px;font-weight:700;white-space:nowrap}.esp-hero-step b{color:#056b7b;font-size:13px}.esp-hero-step:not(:last-child):after{content:"";display:block;width:44px;height:1px;background:#cbdcd6}.esp-hero-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.esp-hero-visual img{width:auto;max-width:84%;max-height:120px;object-fit:contain}.esp-hero-link{display:inline-flex;align-items:center;gap:6px;color:#056b7b;font-size:12px;font-weight:700;text-decoration:none}.esp-hero-link:hover{text-decoration:underline}.esp-panel{border:1px solid #ccdbd5;border-radius:22px;padding:24px;background:#fffffff5;box-shadow:0 18px 50px #1d36311a}.esp-panel h2{font-size:1.6rem;font-weight:800;letter-spacing:-.01em;color:#17211f;margin:0}.esp-panel-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.esp-setup-grid{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:16px}.esp-field-block{display:flex;flex-direction:column;gap:8px;min-width:0}.esp-field-block>span{color:#364743;font-size:.8rem;font-weight:800}.esp-field-block input{min-height:3.25rem;border:1px solid #b9cbc5;border-radius:12px;padding:0 16px;background:#fff;color:#17211f;font-size:.875rem;font-weight:600;outline:none;transition:border-color .18s ease,box-shadow .18s ease}.esp-field-block input:focus{border-color:#24b8c6;box-shadow:0 0 0 4px #24b8c626}.esp-field-block input[readonly]{background:#f4f8f6;color:#52615c}.esp-note{margin:14px 0 0;color:#73817d;font-size:.85rem;line-height:1.55}.esp-note code,.esp-hint code{font-family:ui-monospace,SF Mono,Menlo,Consolas,monospace;font-size:.78rem;background:#eafcff;padding:1px 5px;border-radius:5px;color:#1c5b63}.esp-bulk-row{display:flex;gap:8px}.esp-template-options-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.esp-field-block--checkbox{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:10px;min-height:40px;border:1px solid #d3e0db;border-radius:12px;padding:8px 14px;background:#fffffff5;cursor:pointer;transition:border-color .18s ease,background .18s ease,box-shadow .18s ease}.esp-field-block--checkbox:hover{border-color:#b9cbc5;background:#fff}.esp-field-block--checkbox:has(input:checked){border-color:#087c95;background:#f1f8fa;box-shadow:0 0 0 3px #087c9514}.esp-field-block--checkbox.is-required{cursor:default;border-color:#cbdcd6;background:#f4f8f6}.esp-field-block--checkbox span{display:flex;flex-direction:column;gap:2px;line-height:1.25;min-width:0}.esp-field-block--checkbox span b{display:flex;align-items:center;gap:6px;font-size:.9rem;font-weight:800;color:#17211f}.esp-field-block--checkbox span small{color:#73817d;font-size:.78rem;font-weight:500}.esp-required-tag{font-size:.62rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#52615c;background:#eef2f0;border-radius:999px;padding:1px 6px}.esp-field-block--checkbox input[type=checkbox]{flex:0 0 auto;width:18px;height:18px;accent-color:#087c95;cursor:pointer}.esp-field-block--checkbox.is-required input[type=checkbox]{cursor:not-allowed}.esp-template-code{min-height:min(320px,50vh);max-height:min(70vh,620px);overflow:auto;margin:0;border:1px solid #cbdcd6;border-radius:16px;padding:16px 18px;background:#fff;color:#4c5a56;font:12px/1.6 ui-monospace,SF Mono,Cascadia Mono,Consolas,monospace;white-space:pre-wrap;word-break:break-word;box-shadow:inset 0 1px #fffc,0 8px 24px #121c1e0d;scrollbar-color:rgba(8,124,149,.45) rgba(203,220,214,.6)}.esp-template-export-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}.esp-button{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;border-radius:12px;font-size:.875rem;font-weight:800;cursor:pointer;text-decoration:none;transition:filter .18s ease,border-color .18s ease,background .18s ease,color .18s ease}.esp-button-flash{min-height:42px;padding:10px 19px;border-color:#056b7b;background:linear-gradient(135deg,#078aa1,#8fc31f);color:#fff;box-shadow:0 15px 34px #08889d38}.esp-button-flash:hover{filter:brightness(1.05)}.esp-button-copy{min-height:42px;padding:10px 19px;border-color:#087c95;background:#087c95;color:#fff;box-shadow:0 12px 26px #087c952e}.esp-button-copy:hover{background:#056b7b;filter:none}.esp-button-secondary{min-height:42px;padding:10px 19px;border-color:#b9cbc5;background:#fffffff5;color:#52615c;box-shadow:none}.esp-button-secondary:hover{border-color:#24b8c6;color:#057b91;filter:none}.esp-button-small{min-height:34px;padding:6px 12px;border-radius:9px;font-size:.72rem}.esp-badge{border:1px solid #d5e8b6;background:#f0f9df;color:#46600f;font-size:.7rem;font-weight:800;letter-spacing:.06em;border-radius:999px;padding:3px 10px}.esp-hint{margin:12px 0 0;color:#73817d;font-size:.8rem;line-height:1.55}.esp-hint a{color:#056b7b;font-weight:800}.device-log-panel{overflow:hidden;border:1px solid #cbdcd6;border-radius:22px;background:#fffffff5;box-shadow:0 22px 60px #1d363121}.device-log-dot{width:18px;height:18px;border:3px solid #ffd0c7;border-radius:999px;background:#f45f54;box-shadow:0 0 0 3px #f45f5414}.serial-status-pill{display:inline-flex;align-items:center;gap:.42rem;border:1px solid #b9cbc5;border-radius:999px;padding:.42rem .72rem;font-size:.78rem;font-weight:800;white-space:nowrap}.serial-status-pill i{width:7px;height:7px;border-radius:999px;background:currentColor}.serial-status-pill.state-disconnected{background:#f7faf9;color:#7a8782}.serial-status-pill.state-connected,.serial-status-pill.state-success{border-color:#d5e8b6;background:#f0f9df;color:#46600f}.serial-status-pill.state-flashing,.serial-status-pill.state-connecting{border-color:#f4d9b7;background:#fff5e7;color:#a55a10}.serial-status-pill.state-error{border-color:#f4d9b7;background:#fff3e8;color:#9b4d11}[data-log]{scrollbar-color:rgba(8,124,149,.45) rgba(203,220,214,.6)}@media(max-width:960px){.esp-app-inner,.esp-hero-panel{grid-template-columns:minmax(0,1fr)}}@media(max-width:640px){.esp-setup-grid,.esp-template-options-grid{grid-template-columns:minmax(0,1fr)}}