@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap";:root{font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;color:#14213d;background:#f7f9fc;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;--ink: #14213d;--muted: #6e7b91;--subtle: #98a3b5;--line: #e4e9f1;--surface: #ffffff;--surface-soft: #f7f9fc;--indigo: #4c59c9;--indigo-dark: #3f4bb2;--indigo-soft: #eef0ff;--green: #3ba47a;--danger: #c95a66}*{box-sizing:border-box}html{min-width:320px;background:var(--surface-soft)}body{margin:0;min-width:320px;min-height:100vh}button,input{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid rgba(76,89,201,.25);outline-offset:2px}.app-shell{min-height:100vh;overflow-x:clip;display:flex;flex-direction:column;background:radial-gradient(circle at 50% -20%,#ffffff 0%,var(--surface-soft) 55%)}.topbar{width:min(1080px,calc(100% - 48px));margin:0 auto;padding:28px 0;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;color:var(--ink);text-decoration:none}.brand-logo{display:block;width:166px;height:44px;object-fit:contain;object-position:left center}.language-picker{display:inline-flex;align-items:center;gap:8px;color:var(--muted)}.language-options{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line);border-radius:9px;background:#ffffffbf}.language-option{border:0;padding:6px 9px;color:var(--muted);background:transparent;border-radius:6px;font-size:12px;font-weight:600;transition:color .2s,background .2s,box-shadow .2s}.language-option:hover{color:var(--ink)}.language-option.active{color:var(--ink);background:var(--surface);box-shadow:0 1px 4px #14213d14}.main-content{width:min(660px,calc(100% - 40px));margin:0 auto;flex:1;padding:68px 0 48px}.hero{text-align:center;margin:0 auto 36px}.eyebrow{display:inline-flex;align-items:center;gap:7px;margin-bottom:16px;color:var(--indigo);font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}.eyebrow-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px #3ba47a1a}.hero h1{margin:0;color:var(--ink);font-size:clamp(32px,5vw,46px);line-height:1.12;letter-spacing:-.055em;font-weight:700}.hero p{max-width:430px;margin:15px auto 0;color:var(--muted);font-size:16px;line-height:1.65}.tool-card{padding:25px;border:1px solid rgba(219,226,237,.9);border-radius:18px;background:#ffffffed;box-shadow:0 20px 50px #273b5e14,0 2px 7px #273b5e0a}.tool-card-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:13px}.section-label{display:inline-flex;align-items:center;gap:8px;color:var(--ink);font-size:13px;font-weight:700}.section-label svg{color:var(--indigo)}.local-badge{display:inline-flex;align-items:center;gap:5px;color:var(--green);font-size:11px;font-weight:600}.secret-input-wrap{position:relative;display:flex;align-items:center;border:1px solid #dce3ee;border-radius:11px;background:var(--surface);transition:border-color .2s,box-shadow .2s}.secret-input-wrap:focus-within{border-color:#8e99e2;box-shadow:0 0 0 4px #4c59c91a}.secret-input-wrap.has-error{border-color:#df969d}.secret-input-wrap.has-error:focus-within{box-shadow:0 0 0 4px #c95a661a}.secret-input-wrap input{width:100%;min-width:0;height:52px;padding-block:0;padding-inline:16px 50px;border:0;outline:0;color:var(--ink);background:transparent;font-size:14px;letter-spacing:.02em}.secret-input-wrap input::placeholder{color:#a3adbc}.icon-button{display:inline-grid;place-items:center;width:36px;height:36px;flex:0 0 auto;border:0;border-radius:8px;color:var(--muted);background:transparent;transition:color .2s,background .2s}.icon-button:hover{color:var(--indigo);background:var(--indigo-soft)}.secret-input-wrap .icon-button{position:absolute;inset-inline-end:8px}.import-notice{margin:9px 2px 0;color:var(--green);font-size:12px;line-height:1.45}.input-error,.copy-error,.scanner-error{margin:9px 2px 0;color:var(--danger);font-size:12px;line-height:1.45}.tool-actions{display:flex;align-items:center;gap:8px;margin-top:11px}.secondary-button,.text-button,.copy-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;border-radius:8px;font-size:12px;font-weight:600;transition:color .2s,background .2s,border-color .2s,transform .2s}.secondary-button{min-height:35px;padding:0 11px;border:1px solid var(--line);color:#536177;background:#fbfcfe}.secondary-button:hover{border-color:#bec8dc;color:var(--indigo);background:#f5f6ff}.text-button{padding:7px 8px;border:0;color:var(--muted);background:transparent}.text-button:hover{color:var(--indigo);background:var(--indigo-soft)}.clear-button{margin-inline-start:auto}.scanner-panel{margin-top:18px;padding:16px;border:1px solid #dce3ee;border-radius:13px;background:#f9faff}.scanner-header{display:flex;justify-content:space-between;gap:14px;align-items:flex-start;margin-bottom:13px}.scanner-header h2{margin:0;font-size:14px;letter-spacing:-.01em}.scanner-header p{margin:5px 0 0;color:var(--muted);font-size:11px;line-height:1.4}.video-frame{position:relative;overflow:hidden;min-height:200px;border-radius:9px;background:#111827}.video-frame video{display:block;width:100%;height:230px;object-fit:cover}.scan-guide{position:absolute;top:20%;right:23%;bottom:20%;left:23%;border:2px solid rgba(255,255,255,.85);border-radius:12px;box-shadow:0 0 0 999px #070c1b40}.scan-guide span{position:absolute;top:12%;left:8%;right:8%;height:2px;background:#7bd6ae;box-shadow:0 0 10px #7bd6ae;animation:scan-line 2.2s ease-in-out infinite}.video-hint{position:absolute;right:0;bottom:12px;left:0;display:flex;justify-content:center;align-items:center;gap:6px;color:#ffffffe6;font-size:11px}.spin{animation:spin 1.2s linear infinite}.scanner-close-button{margin-top:9px;padding-left:0}@keyframes scan-line{0%,to{transform:translateY(0)}50%{transform:translateY(145px)}}@keyframes spin{to{transform:rotate(360deg)}}.code-panel{margin-top:24px;padding:20px 20px 18px;border:1px solid #e6eaf2;border-radius:13px;background:#fbfcfe;text-align:center;transition:border-color .25s,background .25s}.code-panel.ready{border-color:#d9def8;background:linear-gradient(135deg,#fbfcff,#f6f7ff)}.code-panel-topline{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:11px;font-weight:600}.refresh-label{color:#98a3b5;font-weight:500}.code-display{min-height:78px;display:flex;align-items:center;justify-content:center;margin:3px 0 5px;color:var(--ink);font-size:clamp(40px,10vw,58px);font-weight:700;letter-spacing:.1em;line-height:1;font-variant-numeric:tabular-nums}.code-placeholder{color:#b5bfcd;font-size:16px;font-weight:500;letter-spacing:0}.countdown-row{display:flex;align-items:center;gap:12px;margin:2px auto 16px;max-width:390px}.progress-track{height:5px;flex:1;overflow:hidden;border-radius:99px;background:#e7eaf4}.progress-fill{height:100%;border-radius:inherit;background:var(--indigo);transition:width .2s linear}.countdown-number{min-width:39px;color:var(--muted);font-size:11px;text-align:end}.countdown-number strong{color:var(--indigo);font-size:13px;font-variant-numeric:tabular-nums}.copy-button{width:100%;min-height:43px;border:1px solid var(--indigo);color:#fff;background:var(--indigo);box-shadow:0 5px 12px #4c59c92e}.copy-button:hover:not(:disabled){background:var(--indigo-dark);transform:translateY(-1px)}.copy-button:disabled{cursor:not-allowed;border-color:#e0e5ee;color:#aab4c4;background:#eef1f6;box-shadow:none}.saved-secrets{margin-block:26px 0;margin-inline:calc(50% - min(540px,50vw - 20px))}.saved-secrets-header{display:flex;align-items:baseline;gap:10px;margin:0 4px 12px}.saved-secrets-header h2{margin:0;color:var(--ink);font-size:14px;font-weight:700}.saved-secrets-header span{color:var(--subtle);font-size:12px}.saved-secrets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,248px),1fr));gap:14px}.saved-card{display:flex;flex-direction:column;min-width:0;padding:16px 16px 10px;border:1px solid rgba(219,226,237,.9);border-radius:14px;background:var(--surface);box-shadow:0 8px 22px #273b5e0d,0 1px 3px #273b5e0a;transition:box-shadow .2s,border-color .2s}.saved-card:hover{border-color:#d9def8;box-shadow:0 12px 28px #273b5e14,0 1px 3px #273b5e0d}.saved-card-head{display:flex;align-items:center;gap:10px;min-width:0}.saved-card-avatar{display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;border-radius:9px;color:#fff;font-size:14px;font-weight:700}.saved-card-title{display:flex;flex-direction:column;flex:1;min-width:0}.saved-secret-name-input{width:100%;min-width:0;margin-inline-start:-5px;padding:2px 5px;border:1px solid transparent;border-radius:6px;outline:0;color:var(--ink);background:transparent;font-size:14px;font-weight:600;text-overflow:ellipsis}.saved-secret-name-input:hover{border-color:var(--line)}.saved-secret-name-input:focus{border-color:#d9def8;background:var(--indigo-soft)}.saved-card-subtitle{overflow:hidden;color:var(--subtle);font-size:12px;text-overflow:ellipsis;white-space:nowrap}.saved-card-tag{flex:0 0 auto;padding:2px 6px;border:1px solid var(--line);border-radius:5px;color:var(--muted);background:var(--surface-soft);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:10px;font-weight:600;text-transform:uppercase}.saved-card-body{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0 12px}.saved-card-code{min-width:0;padding:0;border:0;color:var(--ink);background:transparent;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:30px;font-weight:700;letter-spacing:.04em;line-height:1.1;white-space:nowrap;font-variant-numeric:tabular-nums;transition:color .2s}.saved-card-code:hover:not(:disabled){color:var(--indigo)}.saved-card-code:disabled{cursor:default;color:#b5bfcd}.saved-card-ring{position:relative;display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto;color:var(--muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:11px;font-weight:600}.saved-card-ring svg{position:absolute;top:0;right:0;bottom:0;left:0;transform:rotate(-90deg)}.saved-card-ring circle{fill:none;stroke-width:3}.saved-card-ring .ring-track{stroke:#e7eaf4}.saved-card-ring .ring-fill{stroke:var(--indigo);stroke-linecap:round;transition:stroke-dasharray .25s linear}.saved-card-ring.warning{color:var(--danger)}.saved-card-ring.warning .ring-fill{stroke:var(--danger)}.saved-card-footer{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid #edf0f5}.saved-card-hint{overflow:hidden;color:var(--subtle);font-size:11px;text-overflow:ellipsis;white-space:nowrap}.saved-card-actions{display:flex;gap:2px}.saved-card-actions .icon-button{width:30px;height:30px}.saved-card-actions .icon-button:disabled{cursor:default;opacity:.45}.saved-secret-remove:hover{color:var(--danger);background:#fdf0f1}.secondary-button:disabled{cursor:progress;opacity:.7}.qr-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:50;display:grid;place-items:center;padding:16px;background:#0f172a73;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}.qr-dialog{width:min(360px,100%);max-height:calc(100vh - 32px);overflow-y:auto;padding:18px;border-radius:16px;background:var(--surface);box-shadow:0 24px 60px #0f172a40}.qr-dialog .scanner-header h2{overflow-wrap:anywhere}.qr-image{display:block;width:100%;max-width:280px;aspect-ratio:1;margin:4px auto 0;border:1px solid var(--line);border-radius:12px;image-rendering:pixelated}.qr-hint{margin:12px 2px 0;color:var(--muted);font-size:12px;line-height:1.5;text-align:center}.qr-warning{margin:8px 0 14px;padding:8px 10px;border-radius:8px;color:#8a4b52;background:#fdf0f1;font-size:11px;line-height:1.5}.qr-download{text-decoration:none}.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.storage-note{margin:12px 2px 0;color:var(--subtle);font-size:11px;line-height:1.55}.trust-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:9px 20px;margin:25px 0 0;color:#778399;font-size:11px}.trust-item{display:inline-flex;align-items:center;gap:6px}.trust-icon{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;color:var(--green);background:#e8f7f0}.privacy-note{max-width:540px;margin:25px auto 0;color:#99a4b4;font-size:11px;line-height:1.6;text-align:center}.seo-content{margin-top:46px;padding-top:34px;border-top:1px solid rgba(224,230,239,.85)}.content-heading{max-width:560px}.content-heading h2{margin:0;color:var(--ink);font-size:20px;letter-spacing:-.035em;line-height:1.3}.content-heading p{margin:9px 0 0;color:var(--muted);font-size:13px;line-height:1.65}.steps-list{display:grid;gap:18px;margin:25px 0 0;padding:0;list-style:none}.steps-list li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}.step-number{display:grid;place-items:center;width:27px;height:27px;border-radius:9px;color:var(--indigo);background:var(--indigo-soft);font-size:12px;font-weight:700}.steps-list h3{margin:2px 0 0;color:var(--ink);font-size:13px;font-weight:700}.steps-list p{margin:5px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.usage-note,.usage-warning{margin:22px 0 0;color:var(--muted);font-size:12px;line-height:1.6}.usage-warning{margin-top:10px;color:#806f42}.privacy-content{display:flex;align-items:flex-start;gap:15px}.privacy-content:before{content:"✓";display:grid;place-items:center;width:27px;height:27px;flex:0 0 auto;margin-top:1px;border-radius:9px;color:var(--green);background:#e8f7f0;font-size:13px;font-weight:700}.faq-content details{padding:15px 0;border-bottom:1px solid #e8edf4}.faq-content details:first-of-type{margin-top:14px;border-top:1px solid #e8edf4}.faq-content summary{cursor:pointer;color:var(--ink);font-size:13px;font-weight:600}.faq-content details p{max-width:590px;margin:9px 0 0;color:var(--muted);font-size:12px;line-height:1.65}.guide-link-list{display:grid;gap:9px;margin-top:15px}.guide-link-list a{color:var(--indigo);font-size:13px;font-weight:600;text-decoration:none}.guide-link-list a:hover{text-decoration:underline}.seo-fallback{max-width:720px;margin:0 auto;padding:48px 24px;color:#14213d;font-family:Inter,ui-sans-serif,system-ui,sans-serif;line-height:1.6}.seo-fallback h1{margin:10px 0;font-size:42px;line-height:1.15}.seo-fallback h2{margin-top:42px;font-size:25px}.seo-fallback h3{margin-bottom:2px;font-size:16px}.seo-fallback p{color:#6e7b91}.article-topbar{width:min(1080px,calc(100% - 48px));margin:0 auto;padding:28px 0;display:flex;align-items:center;justify-content:space-between}.article-language{padding:7px 11px;border:1px solid var(--line);border-radius:9px;color:var(--muted);background:#ffffffbf;font-size:12px;font-weight:600;text-decoration:none}.article-language:hover{color:var(--ink)}.seo-article{flex:1;width:min(720px,calc(100% - 32px));padding:32px 0 56px}.seo-article h1{margin:6px 0 8px;font-size:clamp(30px,5vw,40px);letter-spacing:-.04em}.seo-article h2{margin:38px 0 10px;color:var(--ink);font-size:21px;letter-spacing:-.02em}.seo-article h3{margin:20px 0 4px;color:var(--ink);font-size:15px}.seo-article p,.seo-article li{color:#4f5d74;font-size:15px;line-height:1.75}.seo-article ol,.seo-article ul{padding-inline-start:22px}.seo-article li{margin:6px 0}.seo-article a{color:var(--indigo);font-weight:600;text-decoration:none}.seo-article a:hover{text-decoration:underline}.breadcrumbs{display:flex;gap:8px;color:var(--subtle);font-size:12px}.breadcrumbs a{color:var(--muted);font-weight:500}.article-eyebrow{margin:22px 0 0;color:var(--indigo)!important;font-size:12px!important;font-weight:700;letter-spacing:.08em;text-transform:uppercase}.article-meta{margin:0;color:var(--subtle)!important;font-size:12px!important}.article-intro{font-size:17px!important;color:var(--ink)!important}.article-cta{margin:40px 0 0;padding:22px 22px 24px;border:1px solid #d9def8;border-radius:16px;background:linear-gradient(135deg,#fbfcff,#f2f4ff)}.article-cta h2{margin-top:0}.article-cta p{margin:0 0 16px}.seo-article .article-cta .copy-button,.seo-article .copy-button{display:inline-flex;width:auto;padding:0 20px;color:#fff;text-decoration:none}.seo-article section[lang]+section[lang]{margin-top:48px;padding-top:32px;border-top:1px solid var(--line)}.footer{display:flex;align-items:center;justify-content:center;gap:9px;padding:22px 20px 28px;color:#a4adbb;font-size:11px;text-align:center}.footer-dot{color:#c7ced9}@media(max-width:640px){.topbar{width:calc(100% - 32px);padding:20px 0}.brand-logo{width:148px;height:39px}.language-picker>svg{display:none}.language-option{padding:6px 7px;font-size:11px}.main-content{width:calc(100% - 28px);padding:49px 0 32px}.hero{margin-bottom:27px}.hero h1{font-size:clamp(30px,9vw,40px)}.hero p{margin-top:12px;font-size:14px}.tool-card{padding:18px 15px 15px;border-radius:15px}.tool-card-header{margin-bottom:11px}.local-badge{font-size:10px}.tool-actions{flex-wrap:wrap}.saved-secrets{margin-inline:0}.clear-button{margin-left:0}.code-panel{margin-top:21px;padding:17px 14px 14px}.code-display{min-height:72px}.trust-row{gap:10px 15px;margin-top:20px;font-size:10px}.privacy-note{margin-top:20px;font-size:10px}.seo-content{margin-top:36px;padding-top:26px}.content-heading h2{font-size:18px}.privacy-content{gap:11px}.article-topbar{width:calc(100% - 32px);padding:20px 0}.seo-article{padding-top:16px}.footer{flex-direction:column;gap:4px;padding-top:18px;font-size:10px}.footer-dot{display:none}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
