.tool-page{background:radial-gradient(ellipse 55% 28% at 85% 0,rgba(0,196,180,.16),transparent 72%),var(--bg)}
.tool-header{position:relative;padding-bottom:72px;border-bottom:1px solid var(--line)}
.tool-header:before{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(61,220,132,.035),transparent 50%)}
.tool-header .nav{position:relative}
.tool-header .nav-pill{width:min(100%,1140px);justify-content:space-between}
.tool-nav-links{display:flex;gap:24px;color:rgba(234,247,243,.62);font-size:13px}
.tool-nav-links a:hover{color:var(--accent)}
.tool-intro{position:relative;padding:92px 24px 0}
.tool-intro h1{max-width:900px;font-size:clamp(42px,6vw,70px)}
.tool-intro>p:last-child{max-width:760px;margin:24px 0 0;color:rgba(234,247,243,.68);font-size:16px;line-height:1.75}
.tool-shell{padding:54px 24px 100px}
.tool-stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:22px}
.tool-step{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;color:rgba(234,247,243,.38);font-size:12px}
.tool-step span{display:grid;place-items:center;width:26px;height:26px;border:1px solid rgba(234,247,243,.22);border-radius:50%;font-size:10px;font-weight:900}
.tool-step.active{border-color:rgba(45,212,191,.4);background:rgba(45,212,191,.055);color:var(--heading)}
.tool-step.active span{border-color:transparent;background:var(--gradient);color:#06251f}
.tool-step.done{color:var(--accent)}
.tool-step.done span{border-color:rgba(45,212,191,.5);color:var(--accent)}
#shelly-export{display:grid;gap:18px}
.tool-panel{padding:32px;border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.028);box-shadow:0 18px 50px rgba(0,0,0,.08)}
.panel-heading{display:flex;gap:16px;margin-bottom:26px}
.panel-heading>span{display:grid;place-items:center;flex:none;width:38px;height:28px;border-radius:999px;background:var(--gradient);color:#06251f;font-size:10px;font-weight:900}
.panel-heading h2{margin:0 0 6px;font-size:23px}
.panel-heading p{margin:0;color:rgba(234,247,243,.55);font-size:13px;line-height:1.55}
.panel-heading p strong{color:rgba(234,247,243,.78)}
.shelly-key-link{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:-6px 0 22px;padding:14px 16px;border:1px solid rgba(45,212,191,.28);border-radius:11px;background:rgba(45,212,191,.065);color:var(--accent);transition:border-color .15s,background .15s}
.shelly-key-link:hover{border-color:var(--accent);background:rgba(45,212,191,.1)}
.shelly-key-link>span:first-child{display:grid;gap:4px}.shelly-key-link strong{font-size:13px}.shelly-key-link small{color:rgba(234,247,243,.5);font-size:11px;line-height:1.45}.shelly-key-link>span:last-child{font-size:18px}
.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.field{display:grid;gap:8px}.field-wide{grid-column:1/-1}.field>span:first-child{font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:rgba(234,247,243,.7)}
.field input,.field select{width:100%;padding:14px;border:1px solid rgba(45,212,191,.18);border-radius:11px;outline:0;background:#101d1d;color:var(--text);font:inherit;transition:border-color .15s,box-shadow .15s}
.field input:focus,.field select:focus{border-color:var(--accent);box-shadow:0 0 0 4px rgba(53,224,210,.08)}
.secret-input{position:relative}.secret-input input{padding-right:96px}.secret-input button{position:absolute;right:7px;top:7px;bottom:7px;padding:0 12px;border:0;border-radius:8px;background:rgba(45,212,191,.1);color:var(--accent);font-size:11px;font-weight:800;cursor:pointer}
.panel-actions{display:flex;align-items:center;gap:16px;margin-top:20px}.dark-button{display:flex;justify-content:space-between;gap:30px;min-width:260px;padding:14px 17px;border:1px solid rgba(45,212,191,.25);border-radius:11px;background:#152525;color:var(--heading);font:800 13px/1 Inter,sans-serif;cursor:pointer}.dark-button:hover{border-color:var(--accent)}.dark-button:disabled{cursor:wait;opacity:.55}.success-note{color:var(--accent);font-size:12px;font-weight:800}
.device-picker{max-width:780px}.device-summary{display:grid;grid-template-columns:1.2fr 1fr .5fr;gap:10px;margin-top:18px}.device-summary>div{display:grid;gap:5px;padding:14px;border:1px solid var(--line);border-radius:11px;background:rgba(255,255,255,.025)}.device-summary span{color:rgba(234,247,243,.4);font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}.device-summary strong{overflow:hidden;color:var(--heading);font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;text-overflow:ellipsis}
.channel-list{display:grid;gap:9px}.channel-row{display:grid;grid-template-columns:44px 58px 1fr 40px;gap:11px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.018)}.channel-row.enabled{border-color:rgba(45,212,191,.26)}.channel-row>input{width:100%;padding:11px 12px;border:1px solid rgba(45,212,191,.16);border-radius:9px;outline:0;background:#101d1d;color:var(--text);font:inherit}.channel-row>input:focus{border-color:var(--accent)}.channel-row>input:disabled{opacity:.42}.channel-number,.unit{color:rgba(234,247,243,.4);font:700 10px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.unit{text-align:right}.switch{position:relative;width:38px;height:22px}.switch input{position:absolute;opacity:0}.switch span{display:block;width:38px;height:22px;border-radius:999px;background:#40504e}.switch span:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:white;transition:transform .15s}.switch input:checked+span{background:#25bfae}.switch input:checked+span:after{transform:translateX(16px)}.switch input:focus-visible+span{outline:3px solid rgba(53,224,210,.22);outline-offset:2px}
.export-settings{margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}details{margin-top:18px}summary{color:var(--accent);font-size:12px;font-weight:800;cursor:pointer}.compact-field{max-width:430px;margin-top:16px}.compact-field small{color:rgba(234,247,243,.45);line-height:1.55}
.run-panel{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:27px 30px;border:1px solid rgba(45,212,191,.18);border-radius:18px;background:linear-gradient(135deg,#102020,#0c1717)}.status-line{display:flex;justify-content:space-between;gap:16px;margin-bottom:12px;font-size:13px}.status-line span{color:var(--accent);font:700 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace}.progress-track{height:7px;overflow:hidden;border-radius:99px;background:rgba(255,255,255,.08)}.progress-track div{width:0;height:100%;border-radius:inherit;background:var(--gradient);transition:width .2s}.run-status p{margin:10px 0 0;color:rgba(234,247,243,.42);font-size:11px}.run-actions{display:flex;flex-direction:column;gap:8px;min-width:245px}.primary-button,.secondary-button,.download-button{display:flex;justify-content:space-between;gap:18px;padding:14px 17px;border:0;border-radius:11px;font-weight:850;cursor:pointer}.primary-button,.download-button{background:var(--gradient);color:#06251f}.secondary-button{justify-content:center;background:rgba(255,255,255,.1);color:white}.run-actions small{color:rgba(234,247,243,.35);font-size:10px;text-align:center}
.error-box{display:flex;gap:12px;padding:15px 18px;border:1px solid rgba(255,125,93,.4);border-radius:12px;background:rgba(130,42,25,.2);color:#ffc1af;font-size:12px}.privacy-card{display:flex;gap:14px;margin-top:18px;padding:18px 22px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.018)}.privacy-card>span{display:grid;place-items:center;flex:none;width:28px;height:28px;border-radius:50%;background:rgba(53,224,210,.1);color:var(--accent);font-weight:900}.privacy-card strong{font-size:12px}.privacy-card p{margin:4px 0 0;color:rgba(234,247,243,.48);font-size:11px;line-height:1.55}
[hidden]{display:none!important}
@media(max-width:760px){.tool-nav-links{display:none}.tool-header{padding-bottom:54px}.tool-intro{padding-top:68px}.tool-shell{padding:32px 14px 70px}.tool-stepper{grid-template-columns:1fr}.tool-step:not(.active):not(.done){display:none}.tool-panel{padding:23px 17px}.field-grid{grid-template-columns:1fr}.field-wide{grid-column:auto}.panel-actions{align-items:stretch;flex-direction:column}.dark-button{width:100%;min-width:0}.device-summary{grid-template-columns:1fr}.channel-row{grid-template-columns:40px 48px 1fr}.channel-row .unit{display:none}.run-panel{grid-template-columns:1fr;padding:22px 18px}.run-actions{min-width:0}}
@media(prefers-reduced-motion:reduce){.progress-track div,.switch span:after{transition:none}}
