*,:after,:before{box-sizing:border-box}:root{--bg:#0c0c0f;--bg-elevated:#121218;--surface:#18181f;--surface2:#22222b;--border:#2a2a36;--text:#f4f4f7;--muted:#9898a6;--accent:#8b5cf6;--accent-dim:rgba(139,92,246,.15);--accent-hover:#a78bfa;--radius:16px;--radius-sm:10px;--wrap:1100px;--font:"Plus Jakarta Sans",system-ui,sans-serif}html{scroll-behavior:smooth}body{margin:0;font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5}.skip-link{position:absolute;left:-9999px;z-index:999;padding:.5rem 1rem;background:var(--accent);color:#fff}.skip-link:focus{left:1rem;top:1rem}.bg-grid{position:fixed;inset:0;background-image:radial-gradient(ellipse 80% 50% at 50% -20%,rgba(139,92,246,.25),transparent),linear-gradient(var(--border) 1px,transparent 1px),linear-gradient(90deg,var(--border) 1px,transparent 1px);background-size:100% 100%,48px 48px,48px 48px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 0,#000 40%,transparent);mask-image:radial-gradient(ellipse 70% 60% at 50% 0,#000 40%,transparent);pointer-events:none;z-index:0}.wrap{width:100%;max-width:var(--wrap);margin-left:auto;margin-right:auto;padding-left:1.25rem;padding-right:1.25rem}.site-header{position:-webkit-sticky;position:sticky;top:0;z-index:100;border-bottom:1px solid var(--border);background:rgba(12,12,15,.75);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.header-inner{display:flex;align-items:center;justify-content:space-between;min-height:4rem;gap:1rem}.brand{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;color:var(--text);font-weight:800;font-size:1.15rem}.brand-mark{font-size:1rem}.brand-accent,.brand-mark{color:var(--accent)}.nav{display:flex;gap:.25rem;flex-wrap:wrap}.nav-link{padding:.4rem .75rem;border-radius:var(--radius-sm);color:var(--muted);text-decoration:none;font-size:.9rem;font-weight:500;transition:color .15s,background .15s}.nav-link:hover{color:var(--text);background:var(--surface2)}.hero{position:relative;z-index:1;padding:2.5rem 0 2rem;text-align:center}.hero-badge{display:inline-block;margin:0 0 1rem;padding:.35rem .85rem;border-radius:999px;background:var(--accent-dim);border:1px solid rgba(139,92,246,.35);color:#c4b5fd;font-size:.8rem;font-weight:600}.hero-title{margin:0 0 1rem;font-size:clamp(2rem,5vw,2.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.15}.gradient-text{background:linear-gradient(135deg,#c4b5fd,#8b5cf6 50%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-lead{max-width:32rem;margin:0 auto;color:var(--muted);font-size:1.05rem}.hero-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:1.5rem}.hero-cta .btn{text-decoration:none}.main-section{position:relative;z-index:1;padding-bottom:3rem}.main-grid{display:grid;grid-gap:1.5rem;gap:1.5rem;align-items:start}@media (min-width:900px){.main-grid{grid-template-columns:1fr 360px}}.card-elevated{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 24px 48px -12px rgba(0,0,0,.45)}.panel{padding:1.75rem 1.5rem}.section-heading{margin:0 0 .35rem;font-size:1.35rem;font-weight:700}.subtitle{margin:0 0 1.35rem;color:var(--muted);font-size:.9rem}.tabs{display:flex;gap:.5rem;margin-bottom:1.25rem;flex-wrap:wrap}.tab{padding:.5rem 1rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--surface2);color:var(--muted);font-family:inherit;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .15s,color .15s,border-color .15s}.tab:hover{color:var(--text);border-color:var(--muted)}.tab.active{background:var(--accent);border-color:var(--accent);color:#fff}.field-block{margin-bottom:1.15rem}.field-block.hidden{display:none}.field-block label{display:block;margin-bottom:.4rem;font-size:.8rem;font-weight:600;color:var(--muted)}.field-block input[type=password],.field-block input[type=text],.field-block input[type=url],.field-block select,.field-block textarea{width:100%;padding:.65rem .9rem;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);color:var(--text);font-family:inherit;font-size:.95rem;transition:border-color .15s,box-shadow .15s}.field-block textarea{resize:vertical;min-height:80px}.field-block input:focus,.field-block select:focus,.field-block textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-dim)}.wifi-row{display:grid;grid-gap:1rem;gap:1rem}@media (min-width:480px){.wifi-row{grid-template-columns:1fr 1fr}}.mt{margin-top:.75rem}.options{display:flex;flex-direction:column;gap:1.15rem;margin-bottom:1.35rem;padding-top:.65rem;border-top:1px solid var(--border)}.option-group label{display:block;margin-bottom:.4rem;font-size:.8rem;color:var(--muted)}.range-wrap{display:flex;align-items:center;gap:1rem}.range-wrap input[type=range]{flex:1 1;accent-color:var(--accent)}.size-label{font-size:.85rem;color:var(--muted);min-width:4rem}.colors{display:flex;gap:1.5rem;flex-wrap:wrap}.colors>div{display:flex;flex-direction:column;gap:.35rem}.colors input[type=color]{width:48px;height:38px;padding:3px;border:1px solid var(--border);border-radius:8px;background:var(--surface2);cursor:pointer}.actions{display:flex;flex-wrap:wrap;gap:.75rem}.btn{padding:.7rem 1.35rem;border-radius:var(--radius-sm);font-family:inherit;font-size:.95rem;font-weight:600;cursor:pointer;border:none;transition:background .15s,opacity .15s,transform .1s}.btn:active:not(:disabled){transform:scale(.98)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn-primary{background:linear-gradient(180deg,#9d7af7 0,var(--accent) 100%);color:#fff;box-shadow:0 4px 14px rgba(139,92,246,.35)}.btn-primary:hover:not(:disabled){background:linear-gradient(180deg,var(--accent-hover) 0,#7c3aed 100%)}.btn-ghost{background:var(--surface2);color:var(--text);border:1px solid var(--border)}.btn-ghost:hover:not(:disabled){border-color:var(--muted)}.error{margin-top:1rem;padding:.65rem .9rem;border-radius:var(--radius-sm);background:rgba(239,68,68,.1);border:1px solid rgba(239,68,68,.35);color:#fca5a5;font-size:.875rem}.error.hidden{display:none}.preview-card{padding:1.5rem;position:-webkit-sticky;position:sticky;top:5rem}.preview-title{margin:0 0 1rem;font-size:1rem;font-weight:600}.preview-box{aspect-ratio:1;max-width:100%;margin:0 auto;border-radius:var(--radius-sm);border:2px dashed var(--border);display:flex;align-items:center;justify-content:center;overflow:hidden;background:var(--bg-elevated)}.preview-placeholder{color:var(--muted);font-size:.875rem;text-align:center;padding:1rem}.preview-canvas-wrap.hidden,.preview-placeholder.hidden{display:none!important}.preview-canvas-wrap{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:1rem}.preview-canvas-wrap .qr-image,.preview-canvas-wrap canvas{max-width:100%;max-height:100%;width:auto!important;height:auto!important;border-radius:8px}.preview-canvas-wrap .hidden{display:none!important}.api-status{margin-top:.75rem;font-size:.75rem;text-align:center;color:var(--muted)}.api-status.api-ok{color:#4ade80}.api-status.api-off{color:#fbbf24}.hint{margin:1rem 0 0;font-size:.8rem;color:var(--muted);text-align:center}.features-section{position:relative;z-index:1;padding:3rem 0 3.5rem;border-top:1px solid var(--border);background:rgba(18,18,24,.5)}.features-title{text-align:center;margin:0 0 2rem;font-size:1.5rem;font-weight:700}.features-grid{display:grid;grid-gap:1.25rem;gap:1.25rem}@media (min-width:640px){.features-grid{grid-template-columns:repeat(3,1fr)}}.feature{padding:1.5rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);transition:border-color .15s}.feature:hover{border-color:rgba(139,92,246,.4)}.feature-icon{font-size:1.75rem;margin-bottom:.75rem}.feature h3{margin:0 0 .5rem;font-size:1.05rem;font-weight:700}.feature p{margin:0;color:var(--muted);font-size:.9rem}.how-section{position:relative;z-index:1;padding:2.5rem 0 3rem}.how-title{margin:0 0 1.25rem;font-size:1.35rem;font-weight:700}.how-steps{margin:0;padding-left:1.35rem;color:var(--muted);max-width:36rem}.how-steps li{margin-bottom:.65rem}.how-steps strong{color:var(--text)}.site-footer{position:relative;z-index:1;padding:2.5rem 0;border-top:1px solid var(--border);background:var(--bg-elevated)}.footer-inner{text-align:center}.footer-brand .brand-text{font-weight:800;font-size:1.1rem}.footer-tagline{margin:.35rem 0 1rem;color:var(--muted);font-size:.9rem}.footer-copy{margin:0;font-size:.8rem;color:var(--muted)}.footer-link{color:var(--accent);text-decoration:none}.footer-link:hover{text-decoration:underline}.tools-hub{position:relative;z-index:1;padding:2rem 0 4rem}.tools-hub-title{margin:0 0 .5rem;font-size:1.75rem;font-weight:800}.tools-hub-lead{margin:0 0 2rem;color:var(--muted);max-width:36rem}.tools-category{margin-bottom:2.5rem}.tools-category-title{margin:0 0 1rem;font-size:1rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}.tools-grid{display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}.tool-card{display:block;padding:1.25rem;border-radius:var(--radius);border:1px solid var(--border);background:var(--surface);color:var(--text);text-decoration:none;transition:border-color .15s,background .15s}.tool-card:hover{border-color:rgba(139,92,246,.5);background:var(--surface2)}.tool-card-name{margin:0 0 .35rem;font-size:1.05rem;font-weight:700}.tool-card-desc{margin:0;font-size:.875rem;color:var(--muted)}.tool-page{position:relative;z-index:1;padding:1.5rem 0 3rem}.tool-breadcrumb{margin-bottom:1.5rem;font-size:.875rem;color:var(--muted)}.tool-breadcrumb-link{color:var(--accent);text-decoration:none}.tool-breadcrumb-link:hover{text-decoration:underline}.tool-breadcrumb-sep{margin:0 .5rem}.tool-breadcrumb-current{color:var(--text)}.tool-header{margin-bottom:1.5rem}.tool-title{margin:0 0 .35rem;font-size:1.5rem;font-weight:800}.tool-description{margin:0;color:var(--muted);font-size:.95rem}.tool-semantic-lead{margin:.75rem 0 0;font-size:.9rem;color:var(--muted);line-height:1.5;max-width:42rem}.related-tools{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--border)}.related-tools-title{margin:0 0 .75rem;font-size:1rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}.related-tools-list{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem 1.25rem}.related-tools-link{color:var(--accent);text-decoration:none;font-size:.95rem}.related-tools-link:hover{text-decoration:underline}.related-tools-more{margin:1rem 0 0;font-size:.9rem}.tool-content{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:0 24px 48px -12px rgba(0,0,0,.35)}.trust-strip{position:relative;z-index:1;padding:1.5rem 0;border-bottom:1px solid var(--border);background:rgba(18,18,24,.5)}.trust-strip-inner{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}.trust-item{display:flex;flex-direction:column;align-items:center;gap:.2rem;text-align:center}.trust-label{font-weight:700;font-size:.95rem;color:var(--text)}.trust-desc{font-size:.8rem;color:var(--muted)}.faq-section{position:relative;z-index:1;padding:3rem 0 4rem;border-top:1px solid var(--border);background:rgba(18,18,24,.4)}.faq-title{margin:0 0 .5rem;font-size:1.75rem;font-weight:800;text-align:center}.faq-lead{text-align:center;color:var(--muted);max-width:32rem;margin:0 auto 2rem}.faq-list{padding:0;list-style:none;max-width:640px;margin:0 auto}.faq-item{border-bottom:1px solid var(--border)}.faq-item:first-child{border-top:1px solid var(--border)}.faq-question{margin:0}.faq-question-btn{width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;background:none;border:none;color:var(--text);font-family:inherit;font-size:1rem;font-weight:600;text-align:left;cursor:pointer;transition:color .15s}.faq-question-btn:hover{color:var(--accent)}.faq-icon{flex-shrink:0;width:1.5rem;height:1.5rem;display:flex;align-items:center;justify-content:center;border-radius:4px;background:var(--surface2);color:var(--muted);font-size:1.1rem;line-height:1;transition:transform .2s,background .2s}.faq-item--open .faq-icon{transform:rotate(45deg);background:var(--accent);color:#fff}.faq-answer{margin:0;padding:0 0 1rem;overflow:hidden}.faq-answer p{margin:0;padding-left:0;font-size:.95rem;color:var(--muted);line-height:1.6}.footer-grid,.footer-inner.footer-grid{text-align:left}.footer-grid{display:grid;grid-gap:2rem;gap:2rem;grid-template-columns:1fr auto auto;max-width:1100px;margin:0 auto}@media (max-width:640px){.footer-grid{grid-template-columns:1fr;text-align:center}}.footer-links{display:flex;flex-direction:column;gap:.5rem}.footer-links a{color:var(--muted);text-decoration:none;font-size:.9rem}.footer-links a:hover{color:var(--accent)}