:root{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#10213d;background:#f2f7fd;font-synthesis:none}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}
.page{max-width:1070px;padding:38px 24px 24px;margin:auto;position:relative}
.heading{text-align:center;margin-bottom:32px}
.mark{display:flex;align-items:center;justify-content:center;margin:0 auto 12px;border-radius:18px;background:linear-gradient(145deg,#00a9f5,#0042b2);color:white;width:65px;height:65px;box-shadow:0 9px 22px #0060c335}
.mark svg{width:42px}
.eyebrow{color:#0c63ce;font-size:11px;font-weight:800;letter-spacing:.16em;margin:0 0 10px}
h1{font-size:clamp(27px,4.1vw,45px);line-height:1.12;margin:0 0 12px;letter-spacing:-.04em}
.subtitle{color:#5b6a82;line-height:1.55;margin:0 auto;font-size:15px}
.workspace{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.panel{background:white;border:1px solid #e0e9f3;border-radius:22px;padding:28px;box-shadow:0 12px 42px #194b8410}
h2{font-size:19px;letter-spacing:-.02em;margin:0 0 22px}
label{display:block;margin:0 0 9px;font-size:14px;font-weight:700}
input,#security{width:100%;height:49px;border-radius:11px;border:1px solid #cbd9e9;padding:0 15px;background:#fff;color:#10213d;outline-offset:3px}
input:focus,select:focus{border-color:#0574d8;outline:2px solid #0b7ce12a}
#wifi-form{display:grid;gap:24px}
.network-options{position:relative}
.checkbox-label{position:absolute;top:0;right:0;display:flex;align-items:center;gap:9px;min-height:26px;margin:0;font-size:13px;font-weight:500;cursor:pointer}
.checkbox-label input{width:16px;height:16px;margin:0;accent-color:#0b66c9}
.checkbox-label:has(input:disabled){opacity:.45;cursor:not-allowed}
.network-options summary{width:fit-content;min-height:26px;font-size:12px;color:#5b6a82;cursor:pointer;padding:4px 0}
.network-options details[open] summary{margin-bottom:16px}
.network-options details label{font-size:13px}
:root[data-theme="dark"] .network-options summary{color:#a2b2ca}
.hint{font-size:12px;color:#728098;line-height:1.45;margin:8px 0 0}
.password-field{position:relative}.password-field input{padding-right:90px}
.form-field:has(#password:disabled){opacity:.4}
#password:disabled{cursor:not-allowed}
.toggle{position:absolute;right:8px;top:7px;border:0;background:#eaf4ff;color:#115dba;border-radius:8px;height:35px;padding:0 12px;cursor:pointer;font-size:12px;font-weight:700}
.primary,.download{display:block;width:100%;border:0;border-radius:11px;background:linear-gradient(110deg,#078fec,#064abc);color:white;text-align:center;text-decoration:none;padding:15px 18px;font-weight:800;cursor:pointer}
.primary:hover,.download:hover{filter:brightness(1.05)}
.primary:disabled{opacity:.65;cursor:wait}
#status{min-height:18px;font-size:13px;color:#9d3a25;margin:12px 0 0}
.preview-panel{display:flex;flex-direction:column}
.preview-area{display:flex;flex-direction:column;justify-content:center;flex:1}
.preview-area .placeholder{flex:1}
.preview-header{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.preview-header h2{margin-bottom:17px}.preview-header span{font-size:11px;color:#6d819a;white-space:nowrap}
.placeholder{min-height:420px;background:linear-gradient(160deg,#e9f6ff,#f7fbff);border:2px dashed #c5dcf3;border-radius:15px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:25px}
.placeholder-icon{font-size:56px;color:#0d6dce;line-height:1;margin-bottom:16px}.placeholder strong{font-size:16px}.placeholder p{font-size:13px;color:#6c7d92}
.preview{display:block;width:min(100%,300px);height:auto;border-radius:12px;box-shadow:0 8px 26px #002b6b2f;margin:0 auto 18px}
.preview[hidden],.download[hidden],.placeholder[hidden]{display:none!important}
.download{margin-top:14px;background:#0b66c9}
footer{text-align:center;color:#8593a5;font-size:12px;padding:29px 0;line-height:1.5}
@media(max-width:750px){.page{padding:25px 14px}.workspace{grid-template-columns:1fr}.panel{padding:22px}.placeholder{min-height:290px}.heading{margin-bottom:24px}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.theme-switch{position:absolute;top:18px;right:24px;display:flex;gap:2px;min-width:0;margin:0;padding:0;border:0}
.theme-option{position:relative;margin:0;cursor:pointer}
.theme-option input{position:absolute;width:1px;height:1px;margin:0;opacity:0}
.theme-option span{display:flex;align-items:center;justify-content:center;width:30px;height:32px;border-radius:8px;color:#728098;transition:background-color .15s,color .15s}
.theme-option svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.theme-option:hover span{background:#e7eef8;color:#115dba}
.theme-option input:checked+span{background:#e1ebf7;color:#115dba}
.theme-option input:focus-visible+span{outline:2px solid #0574d8;outline-offset:2px}
#security{appearance:none;font:inherit;border:1px solid #cbd9e9;border-radius:10px;padding:9px 34px 9px 12px;background:white;color:#10213d;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23758aa5' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center}
:root[data-theme="dark"]{color:#e5efff;background:#0b1524;color-scheme:dark}
:root[data-theme="dark"] .panel{background:#152237;border-color:#2a4059;box-shadow:0 12px 42px #0003}
:root[data-theme="dark"] :is(.subtitle,.hint,.preview-header span,footer,.placeholder p,.theme-switch label){color:#a2b2ca}
:root[data-theme="dark"] :is(input,select){background-color:#101d30;border-color:#40536c;color:#ecf3ff}
:root[data-theme="dark"] #security{background-color:#101d30;border-color:#40536c;color:#ecf3ff}
:root[data-theme="dark"] .toggle{background:#243c5c;color:#b5d9ff}
:root[data-theme="dark"] .placeholder{background:linear-gradient(160deg,#152b44,#102036);border-color:#385676}
:root[data-theme="dark"] .eyebrow{color:#7abbff}
:root[data-theme="dark"] .placeholder-icon{color:#65b6ff}
:root[data-theme="dark"] .theme-option span{color:#a2b2ca}
:root[data-theme="dark"] .theme-option:hover span{background:#1b304b;color:#b5d9ff}
:root[data-theme="dark"] .theme-option input:checked+span{background:#243c5c;color:#d9ebff}
@media(max-width:750px){.theme-switch{top:12px;right:14px}}
@media(prefers-reduced-motion:reduce){.theme-option span{transition:none}}