*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:var(--font-family-base);font-size:var(--font-size-md);line-height:var(--line-height-base);color:var(--color-text);background:var(--color-background);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}button,input,select{font:inherit;color:inherit}button{cursor:pointer}img{display:block;max-width:100%}:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}.app{max-width:var(--content-max);margin:0 auto;min-height:100dvh;position:relative}.screen{min-height:100dvh;padding-bottom:calc(var(--space-16) + env(safe-area-inset-bottom))}.pad{padding:var(--space-4)}.pad-x{padding:0 var(--space-4)}.muted{color:var(--color-text-muted)}.small{font-size:var(--font-size-sm)}.mono{font-variant-numeric:tabular-nums;letter-spacing:.04em;word-break:break-all}.error{color:var(--color-danger);font-weight:var(--font-weight-bold)}.home-header{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--space-5) + env(safe-area-inset-top)) var(--space-4) var(--space-3)}.home-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-heavy);margin:0}.home-actions{display:flex;gap:var(--space-2);align-items:center}.add-btn{width:48px;height:48px;border-radius:var(--radius-md);border:0;background:var(--color-primary);color:var(--color-on-primary);display:grid;place-items:center;box-shadow:var(--shadow-card)}.add-btn:active{background:var(--color-primary-hover)}.icon-btn{min-width:var(--touch-target);min-height:var(--touch-target);border:0;background:transparent;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--color-text-secondary)}.icon-btn:active{background:var(--color-accent-subtle)}.icon-spacer{width:var(--touch-target);display:inline-block}.chips{display:flex;gap:var(--space-2);padding:0 var(--space-4) var(--space-2)}.chip{min-height:36px;padding:0 var(--space-4);border-radius:var(--radius-pill);border:var(--border-width) solid var(--color-border);background:var(--color-surface);color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.chip.on{background:var(--color-accent-subtle);border-color:var(--color-accent-subtle);color:var(--color-accent)}.section-label{font-size:var(--font-size-xs);font-weight:var(--font-weight-heavy);letter-spacing:.08em;text-transform:uppercase;color:var(--color-text-muted);margin:var(--space-4) var(--space-4) var(--space-2)}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);padding:0 var(--space-4)}@media (min-width: 480px){.grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.tile{position:relative;overflow:hidden;aspect-ratio:1.586;border:0;border-radius:var(--radius-md);padding:var(--space-3);color:#fff;text-align:left;display:flex;flex-direction:column;justify-content:flex-end;gap:2px;box-shadow:var(--shadow-card);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;transition:transform var(--motion-fast)}.tile:active{transform:scale(.97)}.tile-photo{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover}.tile:has(.tile-photo):after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(180deg,#0000 30%,#000000b8)}.tile-name,.tile-meta{position:relative;z-index:1}.tile-name{font-weight:var(--font-weight-heavy);font-size:var(--font-size-md);line-height:var(--line-height-tight);overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.tile-meta{font-size:var(--font-size-xs);display:flex;align-items:center;gap:4px;opacity:.95}.tile-sensitive{background:var(--color-surface);color:var(--color-text);border:var(--border-width) solid var(--color-border)}.tile-sensitive .tile-meta{color:var(--color-text-muted)}.tile-lock{position:absolute;top:var(--space-2);right:var(--space-2);width:28px;height:28px;border-radius:var(--radius-sm);background:var(--color-accent-subtle);color:var(--color-accent);display:grid;place-items:center}.empty{text-align:center;padding:var(--space-10) var(--space-6)}.empty-icon{width:88px;height:88px;margin:0 auto var(--space-4);border-radius:var(--radius-lg);background:var(--color-accent-subtle);color:var(--color-accent);display:grid;place-items:center}.empty h2{margin:0 0 var(--space-2);font-size:var(--font-size-xl)}.empty p{color:var(--color-text-secondary)}.btn{min-height:48px;padding:0 var(--space-5);border-radius:var(--radius-md);border:var(--border-width) solid transparent;font-weight:var(--font-weight-bold);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:var(--color-on-primary)}.btn-primary:not(:disabled):active{background:var(--color-primary-hover)}.btn-secondary{background:var(--color-surface);border-color:var(--color-border-strong);color:var(--color-text)}.btn-text{background:transparent;color:var(--color-accent);padding:0 var(--space-2)}.btn-danger{background:var(--color-danger);color:#fff}.wide{width:100%}.small-btn{min-height:40px;padding:0 var(--space-3);font-size:var(--font-size-sm);white-space:nowrap}.stack-btns{display:flex;flex-direction:column;gap:var(--space-3);width:100%;margin-top:var(--space-4)}.row-btns{display:flex;gap:var(--space-2);flex-wrap:wrap;justify-content:center;margin-top:var(--space-3)}.topbar{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:var(--space-2);padding:calc(var(--space-2) + env(safe-area-inset-top)) var(--space-2) var(--space-2);background:var(--color-background)}.topbar-title{flex:1;margin:0;font-size:var(--font-size-lg);font-weight:var(--font-weight-heavy);text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.topbar-right{display:flex}.step{display:flex;flex-direction:column;align-items:center;text-align:center}.step-count{color:var(--color-accent);font-weight:var(--font-weight-bold);margin:0 0 var(--space-3)}.frame{width:100%;aspect-ratio:1.586;border-radius:var(--radius-lg);border:2px dashed var(--color-border-strong);background:var(--color-surface);display:grid;place-items:center;color:var(--color-text-muted);overflow:hidden}.frame.has-photo{border-style:solid;border-color:var(--color-border)}.frame img{width:100%;height:100%;object-fit:contain;background:#111}.center-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:var(--space-3)}.spinner{width:48px;height:48px;border-radius:50%;border:4px solid var(--color-accent-subtle);border-top-color:var(--color-primary);animation:spin .9s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion: reduce){.spinner{animation-duration:3s}.tile{transition:none}}.form{padding:0 var(--space-4) var(--space-6);display:flex;flex-direction:column;gap:var(--space-4)}.photo-pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-2)}.photo-pair img{width:100%;aspect-ratio:1.586;object-fit:cover;border-radius:var(--radius-sm)}.field{display:flex;flex-direction:column;gap:var(--space-1);border:0;padding:0;margin:0;min-width:0}.field>span,.field>label,.field legend{font-size:var(--font-size-sm);font-weight:var(--font-weight-bold);color:var(--color-text-secondary);padding:0;display:flex;align-items:center;gap:var(--space-2)}.field legend{margin-bottom:var(--space-2)}.field input,.field select,.custom-field input{min-height:48px;padding:0 var(--space-3);border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border-input);background:var(--color-surface);width:100%;font-size:var(--font-size-md)}.input-row{display:flex;gap:var(--space-2)}.type-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2)}.type-btn{min-height:52px;border-radius:var(--radius-sm);border:var(--border-width) solid var(--color-border-strong);background:var(--color-surface);display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3);text-align:left;font-size:var(--font-size-sm);font-weight:var(--font-weight-bold)}.type-btn.on{border:2px solid var(--color-primary);background:var(--color-accent-subtle);color:var(--color-accent)}.ok-line{display:flex;align-items:center;gap:var(--space-2);color:var(--color-success);font-weight:var(--font-weight-bold);margin:0 0 var(--space-2)}.code-options{display:flex;flex-direction:column;gap:var(--space-2)}.code-option{border:var(--border-width) solid var(--color-border-strong);border-radius:var(--radius-sm);background:var(--color-surface);padding:var(--space-3);display:flex;flex-direction:column;align-items:center;gap:var(--space-1)}.code-option.on{border:2px solid var(--color-primary)}.code-option.none{flex-direction:row;justify-content:center;color:var(--color-text-secondary);min-height:44px;padding:var(--space-2)}.code-preview{max-width:260px;width:100%}.manual{display:flex;flex-direction:column;gap:var(--space-3)}.custom-field{display:grid;grid-template-columns:1fr 1.4fr auto;gap:var(--space-2);align-items:center}.notice{background:var(--color-accent-subtle);color:var(--color-text);border-radius:var(--radius-sm);padding:var(--space-3);margin:0;display:block}.notice p{margin:0 0 var(--space-1)}.alert{display:flex;gap:var(--space-3);background:var(--color-danger-subtle);color:var(--color-danger);border-radius:var(--radius-sm);padding:var(--space-3)}.alert p{margin:var(--space-1) 0 0;color:var(--color-text)}.toggle{display:flex;gap:var(--space-3);align-items:flex-start;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-sm);padding:var(--space-3)}.toggle input{width:22px;height:22px;margin-top:2px;accent-color:var(--color-primary)}.toggle strong{display:flex;align-items:center;gap:var(--space-1)}.toggle small{color:var(--color-text-muted);display:block}.badge-check{display:inline-block;font-size:var(--font-size-xs);font-weight:var(--font-weight-heavy);background:var(--color-warning-subtle);color:var(--color-warning);border-radius:var(--radius-pill);padding:0 var(--space-2)}.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-header);background:var(--color-surface);border-top:var(--border-width) solid var(--color-border);padding:var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom))}.bottom-bar .btn{max-width:calc(var(--content-max) - 2 * var(--space-4));margin:0 auto;display:flex}.form-screen{padding-bottom:calc(96px + env(safe-area-inset-bottom))}.code-screen,.code-screen .topbar{background:var(--color-barcode-bg)}.code-area{padding:var(--space-4);text-align:center;display:flex;flex-direction:column;align-items:center}.barcode-img{width:100%;display:flex;justify-content:center}.barcode-img img{width:100%;height:auto;max-height:60dvh;object-fit:contain;image-rendering:pixelated}.code-big{background:var(--color-barcode-bg);padding:var(--space-4) 0}.code-big img{max-width:520px}.barcode-loading{min-height:120px;background:var(--color-accent-subtle);border-radius:var(--radius-sm)}.barcode-fail{padding:var(--space-4);font-weight:var(--font-weight-bold)}.code-value{font-size:var(--font-size-xl);font-weight:var(--font-weight-heavy);margin:var(--space-2) 0 0;color:var(--color-barcode-ink)}.tip{display:flex;gap:var(--space-2);align-items:center;color:var(--color-text-secondary)}.info-view{display:flex;flex-direction:column;gap:var(--space-4)}.info-type{margin:0;display:flex;align-items:center;gap:var(--space-2);color:var(--color-text-secondary);font-weight:var(--font-weight-bold)}.photos{width:100%;display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-3)}.photo-big{border:0;padding:0;background:#111;border-radius:var(--radius-md);overflow:hidden;aspect-ratio:1.586;display:grid;place-items:center}.photo-big img{width:100%;height:100%;object-fit:contain}.photo-big:disabled{cursor:default}.seg{display:inline-flex;align-self:center;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-pill);padding:3px;gap:2px}.seg button{min-height:40px;min-width:88px;padding:0 var(--space-4);border:0;border-radius:var(--radius-pill);background:transparent;font-weight:var(--font-weight-bold);color:var(--color-text-secondary)}.seg button.on{background:var(--color-primary);color:var(--color-on-primary)}.fields{margin:0;background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md)}.field-row{padding:var(--space-3) var(--space-4);border-bottom:var(--border-width) solid var(--color-border)}.field-row:last-child{border-bottom:0}.field-row dt{font-size:var(--font-size-sm);color:var(--color-text-muted);display:flex;gap:var(--space-2);align-items:center}.field-row dd{margin:2px 0 0;font-size:var(--font-size-lg);font-weight:var(--font-weight-bold)}.center-col{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-3)}.lock-icon{width:72px;height:72px;border-radius:var(--radius-lg);background:var(--color-accent-subtle);color:var(--color-accent);display:grid;place-items:center;margin-top:var(--space-6)}.pin-form{width:100%;display:flex;flex-direction:column;gap:var(--space-3);text-align:left}.pin-input{text-align:center;font-size:var(--font-size-xl)!important;letter-spacing:.4em}.settings{display:flex;flex-direction:column;gap:var(--space-4)}.set-card{background:var(--color-surface);border:var(--border-width) solid var(--color-border);border-radius:var(--radius-md);padding:var(--space-4)}.set-card h2{margin:0 0 var(--space-3);font-size:var(--font-size-md);display:flex;align-items:center;gap:var(--space-2)}.set-card p{margin:0 0 var(--space-2)}.links a{color:var(--color-accent);font-weight:var(--font-weight-bold)}.scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-sheet);background:var(--color-scrim);display:flex;align-items:flex-end;justify-content:center}.sheet{width:100%;max-width:var(--content-max);background:var(--color-surface);border-radius:var(--radius-lg) var(--radius-lg) 0 0;padding:var(--space-4) 0 calc(var(--space-4) + env(safe-area-inset-bottom));box-shadow:var(--shadow-sheet)}.sheet-title{font-size:var(--font-size-lg);margin:0 var(--space-4) var(--space-3)}.sheet-item{width:100%;min-height:52px;border:0;background:transparent;display:flex;align-items:center;gap:var(--space-3);padding:0 var(--space-4);font-weight:var(--font-weight-bold);text-align:left}.sheet-item:active{background:var(--color-accent-subtle)}.sheet-item.danger{color:var(--color-danger)}.toast{position:fixed;left:50%;bottom:calc(var(--space-6) + env(safe-area-inset-bottom));transform:translate(-50%,20px);background:var(--color-text);color:#fff;padding:var(--space-3) var(--space-5);border-radius:var(--radius-pill);font-weight:var(--font-weight-bold);opacity:0;pointer-events:none;transition:opacity var(--motion-normal),transform var(--motion-normal);z-index:var(--z-overlay)}.toast.show{opacity:1;transform:translate(-50%)}.shield{position:fixed;top:0;right:0;bottom:0;left:0;z-index:var(--z-shield);background:var(--color-primary);color:var(--color-on-primary);display:flex;flex-direction:column;align-items:center;justify-content:center;font-weight:var(--font-weight-heavy);font-size:var(--font-size-xl)}