:root{--studio-ink:#162544;--studio-accent:#4456e8;--studio-mint:#087f75}
html{scroll-padding-top:24px}
body{background:radial-gradient(ellipse at 10% 0%,#dce9ff 0,transparent 45%),radial-gradient(ellipse at 90% 12%,#e6defb 0,transparent 42%),#f4f7fc!important;color:var(--studio-ink)}
.site-wrap{padding:0 18px 28px!important;max-width:1280px!important;margin:auto}
.site-wrap>header.site-hero{max-width:1140px!important;min-height:0!important;padding:48px 24px 30px!important;text-align:left!important;margin:0 auto!important}
.site-hero__inner{align-items:flex-start!important;gap:16px!important;position:relative}
.studio-eyebrow{font-size:12px;letter-spacing:.16em;font-weight:800;color:#4456a0;text-transform:uppercase}
.site-hero__title{font-size:clamp(2rem,4.4vw,3.6rem)!important;line-height:1.09!important;letter-spacing:-.045em!important;max-width:850px!important;text-align:left!important}
.site-hero__grad{background:linear-gradient(100deg,#3649d4,#7963ca,#087f75)!important;background-clip:text!important;-webkit-background-clip:text!important}
.studio-intro{max-width:640px;color:#516078;font-size:16px;line-height:1.7;margin:0}
.site-hero__meta{justify-content:flex-start!important}.site-hero__pill{background:#ffffffb8!important;color:#42516a!important;border-color:#d6deee!important}
.studio-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:100%;margin-top:6px}
.studio-shortcuts a{display:flex;flex-direction:column;gap:10px;padding:18px 20px;background:#ffffffdb;border:1px solid #d9e1ef;border-radius:18px;text-decoration:none;color:#162544;box-shadow:0 8px 24px #27365b08;transition:transform .18s,border-color .18s}
.studio-shortcuts a:hover{transform:translateY(-3px);border-color:#7587e3}.studio-shortcuts small{color:#65738b;font-size:12px}.studio-shortcuts strong{font-size:15px}.studio-shortcuts span{font-weight:800;color:#4456e8;font-size:22px}
.shell.shell--mega{max-width:1140px!important;border:1px solid #d9e2f0!important;border-radius:24px!important;box-shadow:0 20px 70px #27365b10!important;background:#fff!important}
.mega-nav{background:#f8faff!important;border-bottom:1px solid #e2e8f3!important}.mega-nav__bar{padding:14px 18px!important}.mega-nav__search-wrap{background:#fff!important;box-shadow:none!important;border:1px solid #dce3ef!important}.mega-nav__toggle{background:#162544!important;color:#fff!important;border:0!important;min-height:44px!important}
.content{padding:clamp(16px,3vw,32px)!important}.glass{background:#fff!important;box-shadow:none!important;border:1px solid #e4eaf4!important;border-radius:20px!important;padding:clamp(18px,3vw,28px)!important}
.glass h2{font-size:clamp(1.2rem,2.4vw,1.6rem)!important;letter-spacing:-.025em!important;color:#162544!important}.drop{background:#f7f9ff!important;border-color:#b5c3ed!important;border-radius:18px!important;box-shadow:none!important;padding:40px 20px!important}.button.primary,.button:not(.secondary){background:linear-gradient(125deg,#4456e8,#6652cc)!important;box-shadow:0 6px 14px #4456e81c!important;color:#fff!important}.button{min-height:44px;justify-content:center;border-radius:12px!important}.button:disabled{opacity:.55;cursor:wait}
input:not([type=file]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),textarea,select{border:1px solid #cfd9eb!important;box-shadow:none!important;background:#fbfcff!important;color:#162544!important;border-radius:10px!important;max-width:100%;font-size:16px!important}
input:focus,textarea:focus,select:focus{outline:2px solid #8598f0!important;outline-offset:2px}a:focus-visible,button:focus-visible{outline:3px solid #8598f0!important;outline-offset:3px}
.network-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:20px 0}.network-grid label{display:block;margin-bottom:8px;font-weight:600}.network-grid input,.network-grid select{width:100%;min-height:46px;padding:10px;box-sizing:border-box}.network-result{border:1px solid #d9e2f0;border-radius:16px;padding:18px;background:#f8faff;min-width:0}.network-result h3{margin:0 0 12px}.network-result pre{white-space:pre-wrap;overflow-wrap:anywhere;font-size:13px;background:#fff;border-radius:8px;padding:12px;color:#263550}.network-result small{color:#526178}.network-note{color:#516078;line-height:1.7;font-size:14px}.network-ip{display:block;font-size:clamp(1.5rem,4vw,2.8rem);font-weight:800;overflow-wrap:anywhere;margin:24px 0;color:#4456e8}.wifi-qr-preview{padding:24px;background:#fff;width:fit-content;max-width:100%;box-sizing:border-box;margin:20px 0}.wifi-qr-preview:empty{display:none}.wifi-qr-preview canvas,.wifi-qr-preview img{max-width:100%;height:auto}.network-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}.network-check{display:flex;gap:8px;align-items:center;margin:12px 0}.network-guides details{border:1px solid #dce4f1;border-radius:14px;margin:12px 0;padding:18px;background:#f8faff}.network-guides summary{font-weight:700;cursor:pointer;min-height:24px}.network-guides p{line-height:1.8;color:#42516a}.network-guides a{color:#3649d4}
.tool-landing{border:1px solid #d9e2f0!important;box-shadow:0 16px 60px #27365b10!important;padding:clamp(22px,4vw,40px)!important}.tool-landing__cta{background:#4456e8!important;color:white!important;border-radius:12px!important}
[hidden]{display:none!important}
@media(max-width:700px){.site-wrap{padding:0 10px 20px!important}.site-wrap>header.site-hero{padding:28px 8px 22px!important}.studio-shortcuts{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.studio-shortcuts a{padding:14px;border-radius:14px}.studio-intro{font-size:14px}.network-grid{grid-template-columns:1fr}.mega-nav__bar{padding:12px!important}.content{padding:12px!important}.shell.shell--mega{border-radius:18px!important}.glass{padding:18px!important}.network-actions .button{flex:1 1 auto}.qr-type-pills{flex-wrap:wrap}.site-hero__meta{gap:6px!important}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* UI review: one search surface, readable controls and a viewport-level tool dialog. */
#megaNav input.mega-nav__search,#megaNavPanel input.mega-nav__search{border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;outline:none!important;padding:10px 0!important;min-height:44px!important;font-size:16px!important}
.mega-nav__search-wrap:focus-within{outline:3px solid #c3cef8;outline-offset:2px;border-color:#8598f0!important}
.mega-nav__search-wrap>svg{width:18px;height:18px;flex-shrink:0;fill:none;stroke:#65738b;stroke-width:2}
.mega-nav__search-results{background:#fff!important;box-shadow:0 12px 32px #27365b1c!important;border-color:#d9e2f0!important}
.mega-nav__search-hit{min-height:54px;color:#162544!important}.mega-nav__search-hit:hover,.mega-nav__search-hit:focus-visible{background:#edf0ff!important}.mega-nav__search-hit-text strong{font-size:14px!important}
#megaNavToggle i,#megaNavToggle svg{color:#fff!important}.mega-nav__toggle-chevron{color:#fff!important;opacity:1!important}
.studio-shortcuts svg{width:26px;height:26px;stroke:#4456e8;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
#main-content .panel.active>.glass>p.info{font-size:14px!important;line-height:1.65!important;color:#516078!important}
.button.secondary{background:#edf0ff!important;border:1px solid #d4ddf3!important;color:#3649d4!important;box-shadow:none!important}
label{line-height:1.5}.network-check input{width:18px;height:18px;accent-color:#4456e8}.network-check{min-height:36px}
body.mega-open{overflow:hidden!important}
#megaNavBackdrop{position:fixed!important;inset:0!important;z-index:1000!important;background:rgba(16,27,49,.48)!important;backdrop-filter:blur(3px)}
#megaNavPanel{--mn-text:#162544;--mn-muted:#516078;--mn-border:#e1e7f2;--mn-accent:#4456e8;--mn-surface:#fff;position:fixed!important;inset:32px max(24px,calc((100vw - 1100px)/2))!important;margin:0!important;height:auto!important;max-height:none!important;width:auto!important;z-index:1001!important;background:#fff!important;border:1px solid #d9e2f0!important;border-radius:22px!important;box-shadow:0 24px 90px #14233b40!important;overflow:hidden!important;contain:none!important;animation:none!important}
#megaNavPanel .mega-nav__panel-head{padding:18px 20px!important;background:#f8faff!important;gap:14px}
#megaNavPanel .mega-nav__close{display:inline-flex!important;width:44px!important;height:44px!important;background:#edf0ff!important;border:1px solid #d4ddf3!important;color:#162544!important;font-size:26px!important}
#megaNavPanel .mega-nav__tabs{padding:6px 16px!important;background:#fff;flex-shrink:0;gap:6px;scrollbar-width:thin}
#megaNavPanel .mega-tab{min-height:44px!important;font-size:14px!important;flex-shrink:0;border-radius:9px;color:#516078!important}
#megaNavPanel .mega-tab.is-active{color:#3649d4!important;background:#edf0ff!important;border-color:transparent!important}
#megaNavPanel .mega-nav__body{min-height:0!important;flex:1 1 auto!important;max-height:none!important;overflow:auto!important;overscroll-behavior:contain;scrollbar-width:thin}
#megaNavPanel .mega-nav__col{padding:18px!important;background:#fff;min-height:0!important}
#megaNavPanel .mega-nav__link{min-height:44px!important;font-size:14px!important;color:#162544!important;line-height:1.5!important;border-radius:10px;white-space:normal;overflow-wrap:anywhere}
#megaNavPanel .mega-nav__link:hover,#megaNavPanel .mega-nav__link:focus-visible{background:#edf0ff!important;color:#3649d4!important}
#megaNavPanel .mega-nav__col-title{font-size:11px!important;letter-spacing:.06em;color:#516078!important}
.protected-qr-preview{width:min(100%,380px);padding:20px;border:1px solid #e1e7f2;border-radius:18px;background:#fff;margin:24px 0;box-sizing:border-box}.protected-qr-preview:empty{display:none}.protected-qr-preview canvas{display:block;width:100%;height:auto;image-rendering:pixelated}
#protectedQrContent{width:100%;padding:14px;resize:vertical;box-sizing:border-box;min-height:100px}#protectedQrLink{width:100%;box-sizing:border-box;min-height:44px;padding:10px;font-size:13px!important}.protected-link-label{display:block;margin:18px 0 8px;font-size:14px;font-weight:600}
.secure-qr-badge{display:inline-block;padding:5px 9px;border-radius:6px;background:#e9f5f1;color:#08765a;font-size:10px;font-weight:800;letter-spacing:.12em;margin-bottom:14px}.secure-qr-note{margin-top:24px;padding:18px;background:#f5f7fc;border:1px solid #e1e7f2;border-radius:14px;font-size:14px;line-height:1.7;color:#516078}.secure-qr-note strong{color:#162544}.secure-qr-note p{margin:6px 0 0}
@media(max-width:767px){#megaNavPanel{inset:12px!important;border-radius:18px!important}#megaNavPanel .mega-nav__panel-head{padding:12px!important;gap:10px}#megaNavPanel .mega-nav__panel-meta{display:none!important}#megaNavPanel .mega-nav__row{grid-template-columns:repeat(2,minmax(0,1fr))!important}#megaNavPanel .mega-nav__col{padding:12px!important}.site-wrap>header.site-hero{padding:22px 8px 20px!important}.studio-shortcuts a{gap:6px!important;padding:12px!important}.studio-shortcuts strong{font-size:14px!important}.studio-shortcuts small{font-size:12px!important}.studio-shortcuts svg{width:22px;height:22px}.studio-intro{line-height:1.6}.site-hero__inner{gap:12px!important}.share-bar__btn{min-width:36px!important;min-height:36px!important}}
@media(max-width:380px){#megaNavPanel .mega-nav__row{grid-template-columns:1fr!important}#megaNavPanel .mega-nav__col{border-right:0!important;border-bottom:1px solid #e1e7f2}.studio-eyebrow{font-size:10px;letter-spacing:.12em}.studio-shortcuts a{padding:11px!important}.site-hero__title{font-size:1.85rem!important}}
@media(max-height:500px){#megaNavPanel{inset:8px 16px!important}#megaNavPanel .mega-nav__panel-head{padding:8px 12px!important}}

html.mega-open{overflow:hidden!important}
#megaNavPanel .nav-tool{min-height:44px!important;font-size:14px!important;color:#162544!important;line-height:1.5!important;border-radius:10px;white-space:normal;overflow-wrap:anywhere;margin:0!important;padding:10px 8px!important}
#megaNavPanel .nav-tool:hover,#megaNavPanel .nav-tool:focus-visible{background:#edf0ff!important;color:#3649d4!important}
#megaNavPanel .nav-tool i{color:#65738b!important}

/* Bound collage grid intrinsic widths on every device. */
#collage-tab .canva-workspace {grid-template-columns:280px minmax(0,1fr) 260px;}
#collage-tab .canva-workspace > *, #collage-tab .canva-panel__body {min-width:0;max-width:100%;box-sizing:border-box;}
#collage-tab .collage-search {min-width:0;width:100%;box-sizing:border-box;}
#collage-tab .collage-categories {min-width:0;max-width:100%;}
#collage-tab .collage-template-grid {min-width:0;grid-template-columns:repeat(2,minmax(0,1fr));}
@media(max-width:1100px){#collage-tab .canva-workspace {grid-template-columns:minmax(0,1fr);} #collage-tab .canva-panel--left {order:2;} #collage-tab .canva-stage {order:1;} #collage-tab .canva-panel--right {order:3;}}

#qr-tab .grid > *, #qr-tab .qr-color-field {min-width:0;}
#qrSizeRange {min-width:0;width:auto;}
#qrSize {flex:0 0 80px;max-width:80px;}
#qr-tab .qr-color-field input[type=text] {min-width:0;width:100%;font-size:14px;padding:8px 5px;}
#qr-tab .qr-color-field input[type=color] {flex-shrink:0;}
@media(max-width:380px){#qr-tab div:has(> .qr-color-field) {min-width:0;} #qr-tab div:has(> div > .qr-color-field) {grid-template-columns:minmax(0,1fr) !important;}}