:root{--bg:oklch(98.5% .003 250);--surface:oklch(100% 0 0);--surface-muted:oklch(96% .005 250);--ink:oklch(18% .018 255);--text:oklch(36% .02 255);--muted:oklch(49% .018 255);--border:oklch(88% .008 250);--border-strong:oklch(74% .014 250);--accent:oklch(48% .09 235);--accent-ink:oklch(27% .072 235);--accent-soft:oklch(94% .024 235);--danger:oklch(50% .13 25);--danger-soft:oklch(96% .026 25);--success:oklch(50% .09 155);--focus:oklch(58% .12 235);--radius:14px;--z-modal-backdrop:30;--z-modal:40;--mono:"SF Mono", ui-monospace, Menlo, Consolas, monospace;--sans:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;color:var(--text);background:var(--bg);font:15px/1.5 var(--sans);font-synthesis:none;text-rendering:optimizelegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*{box-sizing:border-box}body{min-width:320px;min-height:100svh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid color-mix(in oklch, var(--focus) 28%, transparent);outline-offset:2px}h1,h2,h3,p{margin:0}h1,h2,h3{color:var(--ink);text-wrap:balance}.shell{grid-template-rows:auto 1fr;gap:8px;width:min(1240px,100% - 24px);min-height:100svh;margin:0 auto;padding:10px 0;display:grid}.topbar{justify-content:space-between;align-items:center;gap:14px;display:flex}.title-block{align-items:baseline;gap:10px;min-width:0;display:flex}.product-mark{color:var(--accent-ink);white-space:nowrap;font-size:12px;font-weight:750}h1{letter-spacing:-.02em;font-size:22px;line-height:1.1}.intro-copy{color:var(--muted);text-wrap:pretty;font-size:13px}.top-actions,.toolbar-actions,.dialog-actions,.card-actions{align-items:center;gap:8px;display:flex}.local-note{border:1px solid var(--border);background:var(--surface);min-height:32px;color:var(--muted);white-space:nowrap;border-radius:999px;flex:none;align-items:center;gap:7px;padding:0 10px;font-size:13px;display:inline-flex}.status-dot{background:var(--success);border-radius:999px;width:8px;height:8px}.panel{border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.codes-panel{grid-template-rows:auto 1fr;min-height:0;padding:10px;display:grid}.toolbar{justify-content:space-between;align-items:center;gap:12px;margin-bottom:8px;display:flex}h2{letter-spacing:-.01em;font-size:16px;line-height:1.25}#entry-count{color:var(--muted);margin-top:2px;font-size:13px}.search-label{width:min(330px,34vw)}input,select,textarea{border:1px solid var(--border);background:var(--surface);width:100%;color:var(--ink);border-radius:10px;padding:9px 11px;transition:border-color .18s,background .18s}textarea{resize:vertical;min-height:82px;font-family:var(--mono);font-size:13px}input::placeholder,textarea::placeholder{color:oklch(45% .015 255)}input:hover,select:hover,textarea:hover{border-color:var(--border-strong)}.primary-button,.secondary-button,.subtle-button,.danger-button,.icon-button,.mode-tab{border-radius:9px;min-height:32px;font-weight:720;transition:background .16s,border-color .16s,color .16s,transform .16s}.primary-button{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:0 12px}.primary-button:hover{background:var(--accent-ink);border-color:var(--accent-ink)}.secondary-button,.subtle-button,.danger-button,.icon-button,.mode-tab{border:1px solid var(--border);background:var(--surface);color:var(--text);padding:0 10px;font-size:13px}.secondary-button:hover,.subtle-button:hover,.icon-button:hover,.mode-tab:hover{border-color:var(--border-strong);background:var(--surface-muted);color:var(--ink)}.danger-button{color:var(--danger)}.danger-button:hover{border-color:color-mix(in oklch, var(--danger) 34%, var(--border));background:var(--danger-soft)}.code-list{grid-template-columns:repeat(auto-fill,minmax(360px,1fr));align-content:start;gap:10px;min-height:0;padding-right:2px;display:grid;overflow:auto}.otp-card{border:1px solid var(--border);background:var(--surface);border-radius:12px;transition:border-color .18s,background .18s;position:relative;overflow:hidden}.otp-card.selected{border-color:color-mix(in oklch, var(--accent) 38%, var(--border));background:color-mix(in oklch, var(--accent-soft) 56%, var(--surface))}.otp-card:hover{border-color:var(--border-strong)}.card-main{width:100%;min-width:0;color:inherit;text-align:left;background:0 0;border:0;gap:8px;padding:12px;display:grid}.card-topline{justify-content:space-between;align-items:start;gap:12px;min-width:0;display:flex}.entry-meta{gap:1px;min-width:0;display:grid}.entry-title{color:var(--ink);text-overflow:ellipsis;white-space:nowrap;font-weight:720;overflow:hidden}.entry-issuer,.secret-preview,.copy-state{color:var(--muted);font-size:12px}.copy-state{flex:none}.otp-code{color:var(--ink);font:780 34px/1 var(--mono);letter-spacing:.035em;white-space:nowrap}.otp-code.is-error{color:var(--danger);font-family:var(--sans);letter-spacing:0;font-size:18px}.card-footer{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;min-width:0;display:grid}.delete-icon{min-height:26px;color:color-mix(in oklch, var(--danger) 78%, var(--muted));background:0 0;border:0;border-radius:7px;padding:0 7px;font-size:12px;font-weight:680;position:absolute;bottom:8px;right:8px}.delete-icon:hover{background:var(--danger-soft);color:var(--danger)}.timer{color:var(--muted);font:650 13px/1 var(--mono);align-items:center;gap:8px;display:flex}.timer-track{background:var(--surface-muted);border-radius:999px;width:54px;height:6px;overflow:hidden}.timer-track span{border-radius:inherit;background:var(--accent);height:100%;transition:width .22s linear;display:block}.secret-preview{font-family:var(--mono);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.empty-state{border:1px dashed var(--border-strong);text-align:center;border-radius:13px;place-items:center;min-height:260px;padding:22px;display:grid}.compact-empty{align-content:center;gap:12px}.empty-state h3{font-size:20px}.empty-state p{max-width:520px;color:var(--text)}.import-dialog{border:1px solid var(--border);background:var(--surface);width:min(720px,100% - 28px);max-height:min(760px,100svh - 28px);color:var(--text);z-index:var(--z-modal);border-radius:16px;margin:auto;padding:0}.import-dialog::backdrop{z-index:var(--z-modal-backdrop);background:oklch(20% .02 255/.34)}.dialog-shell{padding:18px}.dialog-header{justify-content:space-between;align-items:start;gap:16px;margin-bottom:14px;display:flex}.dialog-header p,.import-help,.import-message{color:var(--muted);margin-top:4px;font-size:13px}.icon-button{width:36px;color:var(--ink);padding:0;font-size:20px;line-height:1}.mode-tabs{border:1px solid var(--border);background:var(--surface-muted);border-radius:12px;gap:4px;margin-bottom:14px;padding:4px;display:inline-flex}.mode-tab{background:0 0;border-color:#0000}.mode-tab.active{border-color:var(--border);background:var(--surface);color:var(--ink)}.mode-panel[hidden]{display:none}.entry-form,.mode-panel{gap:12px;display:grid}label{color:var(--ink);gap:7px;font-size:13px;font-weight:650;display:grid}.form-grid{gap:10px;display:grid}.form-grid.two{grid-template-columns:1fr 1fr}.form-grid.three{grid-template-columns:.8fr 1fr 1fr}#bulk-input{min-height:260px}.form-error,.import-message{min-height:20px;font-size:13px}.form-error{color:var(--danger)}.dialog-actions{justify-content:end}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;padding:0;position:absolute;overflow:hidden}@media (width<=860px){.shell{width:min(100% - 18px,680px);padding:10px 0}.topbar,.toolbar{display:grid}.title-block{gap:2px;display:grid}.top-actions,.toolbar-actions{flex-wrap:wrap}h1{font-size:22px}.search-label{flex:220px;width:100%}.code-list{grid-template-columns:1fr}.card-main{gap:8px}.otp-code{font-size:30px}.form-grid.two,.form-grid.three{grid-template-columns:1fr}}@media (width<=520px){.top-actions,.toolbar-actions,.dialog-actions{grid-template-columns:1fr;display:grid}.local-note,.primary-button,.secondary-button,.subtle-button,.danger-button{justify-content:center;width:100%}.card-topline{display:grid}.copy-state{display:none}.otp-code{font-size:28px}.delete-icon{bottom:6px;right:6px}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}