*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--yellow:#fd0;--yellow-hover:#f5d400;--dark:#222;--text:#222;--muted:#717171;--bg:#faf8f0;--surface:#fff;--surface-2:#f4f2ea;--border:#22222214;--border-focus:#22222259;--success:#18d66a;--error:#cc3433;--warn:#b26b00;--shadow-card:0px 0px 2px #0000001a, 0px 8px 40px #0000000d;--radius:16px;--radius-sm:10px;--radius-xs:8px}html{-webkit-font-smoothing:antialiased}body{background:var(--bg);color:var(--text);min-height:100vh;padding:32px 16px 80px;font-family:DM Sans,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}button{font:inherit;color:inherit;cursor:pointer;background:0 0;border:0}button:disabled{cursor:default}button:focus-visible,input:focus-visible,textarea:focus-visible,summary:focus-visible,.btn-ghost:focus-within{outline:2px solid var(--dark);outline-offset:2px}.shell{flex-direction:column;gap:16px;max-width:1080px;margin:0 auto;display:flex}.muted{color:var(--muted)}.small{font-size:.78rem}.label{letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-size:.72rem;font-weight:700}.sub{font-size:.85rem;font-weight:600}.top{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:16px;margin-bottom:8px;display:flex}.brand{align-items:center;gap:14px;display:flex}.brand-mark{background:var(--yellow);border-radius:14px;flex:none;place-items:center;width:48px;height:48px;display:grid}.brand h1{letter-spacing:-.02em;font-size:1.6rem;font-weight:800}.brand p{font-size:.95rem}.grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start;gap:16px;display:grid}.col{flex-direction:column;gap:16px;min-width:0;display:flex}@media (max-width:860px){.grid{grid-template-columns:1fr}.col{display:contents}.result{order:1}.style{order:2}}.card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-card);min-width:0;padding:20px}.card-head{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.link{color:var(--muted);font-size:.85rem;text-decoration:underline}.link:hover{color:var(--dark)}.kinds{flex-wrap:wrap;gap:6px;margin:12px 0 18px;display:flex}.chip{background:var(--surface);box-shadow:inset 0 0 0 1px var(--border);border-radius:999px;padding:8px 14px;font-size:.88rem;font-weight:600;transition:background .15s}.chip:hover{background:var(--surface-2)}.chip.on{background:var(--dark);color:#fff;box-shadow:none}.fields{flex-direction:column;gap:14px;display:flex}.row{grid-template-columns:1fr 1fr;gap:12px;display:grid}@media (max-width:520px){.row{grid-template-columns:1fr}}.field{flex-direction:column;gap:6px;min-width:0;display:flex}.field>span{font-size:.85rem;font-weight:600}input:not([type]),input[type=text],input[type=url],input[type=email],input[type=tel],input[type=password],textarea{border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface);width:100%;color:var(--text);padding:12px 14px;font-family:inherit;font-size:15px;line-height:1.4}textarea{resize:vertical}input:focus,textarea:focus{border-color:var(--border-focus);outline:none}.with-btn{position:relative}.with-btn input{padding-right:64px}.with-btn .link{position:absolute;top:50%;right:12px;transform:translateY(-50%)}.check{cursor:pointer;align-items:center;gap:8px;font-size:.9rem;display:flex}.check input{width:18px;height:18px;accent-color:var(--dark)}.style{flex-direction:column;gap:18px;display:flex}.opts{flex-wrap:wrap;gap:18px 32px;display:flex}.opt{flex-direction:column;gap:8px;display:flex}.seg{background:var(--surface-2);border-radius:var(--radius-sm);flex-wrap:wrap;gap:4px;width:fit-content;max-width:100%;padding:4px;display:flex}.seg button{border-radius:var(--radius-xs);min-width:38px;height:34px;padding:0 12px;font-size:.9rem}.seg button:hover:not(:disabled){background:var(--surface)}.seg button.on{background:var(--dark);color:#fff}.seg button:disabled:not(.on){opacity:.35}.colors{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.swatch{border-radius:50%;width:34px;height:34px;transition:transform .1s;box-shadow:inset 0 0 0 1px #0000001f}.swatch:hover{transform:scale(1.08)}.swatch.on{box-shadow:inset 0 0 0 1px #0000001f, 0 0 0 2px var(--surface), 0 0 0 4px var(--dark)}.swatch.none{background:linear-gradient(45deg, transparent 46%, var(--error) 46%, var(--error) 54%, transparent 54%), repeating-conic-gradient(#e6e3d8 0 25%, #fff 0 50%) 0 0 / 10px 10px}.picker{cursor:pointer;background:conic-gradient(#f43,#fd0,#3c6,#3bf,#94f,#f4a,#f43);border-radius:50%;width:34px;height:34px;position:relative;overflow:hidden}.picker input{opacity:0;cursor:pointer;width:100%;height:100%;position:absolute;inset:0}.logo-row{align-items:center;gap:12px;display:flex}.logo-thumb{object-fit:contain;border-radius:var(--radius-xs);background:var(--surface-2);width:40px;height:40px}.range{align-items:center;gap:10px;max-width:280px;display:flex}.range input{accent-color:var(--dark);flex:1}.more summary{cursor:pointer;width:fit-content;font-size:.9rem;font-weight:600}.more[open] summary{margin-bottom:14px}.reset{align-self:flex-start}.result{position:sticky;top:16px}@media (max-width:860px){.result{position:static}}.count{font-variant-numeric:tabular-nums;color:var(--muted);font-size:.85rem;font-weight:600}.stage{border-radius:var(--radius-sm);background:var(--surface-2);place-items:center;min-height:280px;padding:20px;display:grid;position:relative}.stage.checker{background:repeating-conic-gradient(#ebe8dd 0 25%, #f7f5ee 0 50%) 0 0 / 18px 18px}.qr{aspect-ratio:1;width:100%;max-width:360px}.qr svg{border-radius:6px;width:100%;height:100%;display:block}.stage.demo .qr{opacity:.14;filter:grayscale()}.demo-tag{background:var(--dark);color:#fff;border-radius:999px;padding:8px 14px;font-size:.85rem;font-weight:600;position:absolute}.hint{color:var(--muted);margin-top:10px;font-size:.84rem;line-height:1.45}.hint.warn{color:var(--error)}.export{flex-direction:column;gap:10px;margin-top:16px;display:flex}.btn-main{border-radius:var(--radius-sm);background:var(--yellow);width:100%;padding:15px;font-size:1rem;font-weight:800;transition:background .15s,transform .1s}.btn-main:hover:not(:disabled){background:var(--yellow-hover)}.btn-main:active:not(:disabled){transform:scale(.99)}.btn-main:disabled,.btn-ghost:disabled{opacity:.45}.btn-pair{grid-template-columns:1fr 1fr;gap:8px;display:grid}.btn-ghost{border-radius:var(--radius-sm);cursor:pointer;background:var(--surface);box-shadow:inset 0 0 0 1px var(--border-focus);justify-content:center;align-items:center;padding:11px 16px;font-size:.92rem;font-weight:700;transition:background .15s;display:inline-flex}.btn-ghost:hover:not(:disabled){background:var(--surface-2)}.btn-ghost.done{background:var(--success);color:#fff;box-shadow:none}.toast{background:var(--dark);color:#fff;z-index:10;border-radius:999px;padding:10px 16px;font-size:.9rem;position:fixed;bottom:24px;left:50%;transform:translate(-50%);box-shadow:0 8px 30px #0003}.account{flex-wrap:wrap;align-items:center;gap:10px 14px;margin-left:auto;display:flex}.ellipsis{text-overflow:ellipsis;white-space:nowrap;max-width:220px;overflow:hidden}.unsaved{color:var(--warn);font-weight:600}.keep{border-top:1px solid var(--border);flex-direction:column;gap:8px;margin-top:18px;padding-top:16px;display:flex}.keep .link{align-self:flex-start}.btn-ghost.wide{width:100%}.btn-ghost.strong{background:var(--dark);color:#fff;box-shadow:none}.btn-ghost.strong:hover:not(:disabled){background:#000}.input{border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--surface-2);width:100%;height:44px;color:var(--text);padding:0 12px;font:500 .95rem/1 DM Sans,sans-serif}.input:focus{border-color:var(--border-focus);background:var(--surface);outline:none}.btn{border-radius:var(--radius-sm);background:var(--yellow);padding:11px 18px;font-size:.92rem;font-weight:800}.btn:hover{background:var(--yellow-hover)}.btn.ghost{background:var(--surface-2)}.btn.ghost:hover{background:#ece9de}.btn:disabled{opacity:.5;cursor:default}.overlay{z-index:20;background:#22222259;place-items:center;padding:16px;display:grid;position:fixed;inset:0}.dialog{width:100%;max-width:400px;padding:28px 24px 24px;position:relative}.dialog h2{letter-spacing:-.01em;font-size:1.35rem;font-weight:800}.dialog>p{margin:6px 0 18px;font-size:.92rem;line-height:1.45}.dialog-close{width:32px;height:32px;color:var(--muted);border-radius:50%;font-size:1.3rem;position:absolute;top:10px;right:12px}.dialog-close:hover{background:var(--surface-2);color:var(--dark)}.stack{flex-direction:column;gap:10px;display:flex}.stack .btn{width:100%;padding:13px}.or{text-align:center;margin:2px 0}.center{text-align:center;line-height:1.8}.search{border:1px solid var(--border);border-radius:var(--radius-xs);background:var(--surface-2);width:200px;height:36px;font:inherit;padding:0 10px;font-size:.88rem}.codes{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;list-style:none;display:grid}.codes li{border-radius:var(--radius-sm);box-shadow:inset 0 0 0 1px var(--border);flex-direction:column;gap:6px;min-width:0;padding:10px;display:flex}.codes li.current{box-shadow:inset 0 0 0 2px var(--dark);background:#ffdd0026}.codes li.hint{box-shadow:none;grid-column:1/-1}.code-open{text-align:left;flex-direction:column;gap:3px;min-width:0;display:flex}.code-open strong{text-overflow:ellipsis;white-space:nowrap;margin-top:4px;font-size:.9rem;overflow:hidden}.code-open:hover strong{text-decoration:underline}.thumb{aspect-ratio:1;border-radius:var(--radius-xs);background:var(--surface-2);display:block;overflow:hidden}.thumb.checker{background:repeating-conic-gradient(#ebe8dd 0 25%, #f7f5ee 0 50%) 0 0 / 12px 12px}.thumb svg{width:100%;height:100%;display:block}.code-tools{gap:12px;display:flex}@media (max-width:520px){.codes{grid-template-columns:repeat(2,minmax(0,1fr))}.search{width:140px}}.user-menu{position:relative}.user-btn{background:var(--surface);width:42px;height:42px;box-shadow:inset 0 0 0 1px var(--border-focus);border-radius:50%;place-items:center;transition:background .15s;display:grid}.user-btn:hover,.user-btn[aria-expanded=true]{background:var(--surface-2)}.user-btn.in{background:var(--yellow);box-shadow:none}.user-btn.in:hover,.user-btn.in[aria-expanded=true]{background:var(--yellow-hover)}.menu{z-index:15;border-radius:var(--radius-sm);background:var(--surface);min-width:220px;max-width:calc(100vw - 32px);box-shadow:var(--shadow-card), 0 12px 32px #0000001a;flex-direction:column;padding:6px;display:flex;position:absolute;top:calc(100% + 8px);right:0}.menu button{text-align:left;border-radius:var(--radius-xs);padding:10px 12px;font-size:.92rem;font-weight:600}.menu button:hover,.menu button:focus-visible{background:var(--surface-2);outline:none}.menu-email{border-bottom:1px solid var(--border);flex-direction:column;gap:2px;margin-bottom:4px;padding:8px 12px 10px;display:flex}.menu-email strong{text-overflow:ellipsis;white-space:nowrap;font-size:.9rem;overflow:hidden}.btn-ghost.new-code{background:var(--yellow);box-shadow:none}.btn-ghost.new-code:hover{background:var(--yellow-hover)}.foot{text-align:center;color:var(--muted);margin-top:16px;font-size:.88rem;line-height:1.5}.foot a{color:var(--dark);text-underline-offset:3px;font-weight:700;text-decoration:underline}.foot a:hover{-webkit-text-decoration-color:var(--yellow);text-decoration-color:var(--yellow);text-decoration-thickness:2px}