@layer reset,base,components,utilities;@property --color-bg{syntax: "<color>"; inherits: true; initial-value: oklch(.97 .005 265);}@property --color-bg-surface{syntax: "<color>"; inherits: true; initial-value: oklch(1 0 0);}@property --color-bg-card{syntax: "<color>"; inherits: true; initial-value: oklch(.98 .003 265);}@property --color-bg-input{syntax: "<color>"; inherits: true; initial-value: oklch(.98 .003 275);}@property --color-primary{syntax: "<color>"; inherits: true; initial-value: oklch(.5 .22 17);}@property --color-text{syntax: "<color>"; inherits: true; initial-value: oklch(.15 .02 265);}@property --color-text-muted{syntax: "<color>"; inherits: true; initial-value: oklch(.4 .02 265);}@property --color-text-dim{syntax: "<color>"; inherits: true; initial-value: oklch(.55 .02 265);}@property --color-border{syntax: "<color>"; inherits: true; initial-value: oklch(.87 .01 265);}@property --color-success{syntax: "<color>"; inherits: true; initial-value: oklch(.45 .16 150);}@property --color-error{syntax: "<color>"; inherits: true; initial-value: oklch(.5 .2 22);}@property --color-warning{syntax: "<color>"; inherits: true; initial-value: oklch(.55 .17 80);}@property --color-info{syntax: "<color>"; inherits: true; initial-value: oklch(.55 .15 250);}:root{interpolate-size:allow-keywords;color-scheme:light dark;accent-color:var(--color-primary);--color-bg: light-dark(oklch(.97 .005 265), oklch(.18 .03 280));--color-bg-surface: light-dark(oklch(1 0 0), oklch(.2 .04 265));--color-bg-card: light-dark(oklch(.98 .003 265), oklch(.28 .09 255));--color-bg-input: light-dark(oklch(.98 .003 275), oklch(.19 .04 275));--color-primary: light-dark(oklch(.5 .22 17), oklch(.59 .2 17));--color-primary-hover: oklch(from var(--color-primary) calc(l*.85) c h);--color-text: light-dark(oklch(.15 .02 265), oklch(.95 .005 250));--color-text-muted: light-dark(oklch(.4 .02 265), oklch(.72 .02 265));--color-text-dim: light-dark(oklch(.55 .02 265), oklch(.52 .02 265));--color-border: light-dark(oklch(.87 .01 265), oklch(.24 .04 275));--color-success: light-dark(oklch(.45 .16 150), oklch(.79 .18 150));--color-error: light-dark(oklch(.5 .2 22), oklch(.69 .17 22));--color-warning: light-dark(oklch(.55 .17 80), oklch(.82 .17 80));--color-info: light-dark(oklch(.55 .15 250), oklch(.72 .12 250));--color-error-bg: oklch(from var(--color-error) l c h / .1);--color-error-border: oklch(from var(--color-error) l c h / .3);--color-success-bg: oklch(from var(--color-success) l c h / .1);--color-success-border: oklch(from var(--color-success) l c h / .3);--color-warning-bg: oklch(from var(--color-warning) l c h / .1);--color-warning-border: oklch(from var(--color-warning) l c h / .3);--color-info-bg: oklch(from var(--color-info) l c h / .1);--color-info-border: oklch(from var(--color-info) l c h / .3);--color-primary-bg: oklch(from var(--color-primary) l c h / .1);--color-danger-hover: oklch(from var(--color-error) calc(l*.85) c h);--color-hover-overlay: light-dark(oklch(0 0 0 / .04), oklch(1 0 0 / .05));--color-hover-overlay-subtle: light-dark(oklch(0 0 0 / .03), oklch(1 0 0 / .06));--radius-small: 6px;--radius-md: 10px;--radius-lg: 16px;--shadow: 0 2px 8px light-dark(oklch(0 0 0 / .08), oklch(0 0 0 / .3));--shadow-elevated: 0 8px 32px light-dark(oklch(0 0 0 / .12), oklch(0 0 0 / .3)), 0 2px 8px light-dark(oklch(0 0 0 / .06), oklch(0 0 0 / .2));--transition: .15s ease;--animation-spin: .8s linear infinite;--animation-progress: 2s ease-out forwards;--animation-pulse: 3s ease-in-out infinite;transition:--color-bg var(--transition),--color-bg-surface var(--transition),--color-text var(--transition),--color-primary var(--transition)}@layer reset{*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{font-size:16px;-webkit-text-size-adjust:100%;scrollbar-color:light-dark(oklch(.75 .01 265),oklch(.3 .02 265)) transparent;scrollbar-width:thin}}@layer base{body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--color-bg);color:var(--color-text);line-height:1.5;min-block-size:100dvh;-webkit-font-smoothing:antialiased}#app{min-block-size:100dvh;display:flex;flex-direction:column;padding-block-end:env(safe-area-inset-bottom,0px)}#app-header{background:var(--color-bg-surface);border-block-end:1px solid var(--color-border);position:sticky;inset-block-start:0;z-index:100;padding-block-start:env(safe-area-inset-top,0px);animation:header-shadow linear both;animation-timeline:scroll();animation-range:0 150px}app-banner:has(.app-banner)~#app-header{padding-block-start:0}@keyframes header-shadow{0%{box-shadow:0 0 #0000}to{box-shadow:0 4px 16px light-dark(oklch(0 0 0 / .08),oklch(0 0 0 / .4))}}#app-main{flex:1;display:flex;flex-direction:column;max-inline-size:600px;margin-inline:auto;inline-size:100%;padding-block:1.5rem;padding-inline:1rem;outline:none;container-type:inline-size}#app-main>*{flex:1;display:flex;flex-direction:column}:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}#app-main{view-transition-name:main-content}::view-transition-old(main-content){animation:var(--transition) both view-fade-out}::view-transition-new(main-content){animation:var(--transition) both view-fade-in}::view-transition-old(root),::view-transition-new(root){animation:none}@keyframes view-fade-out{to{opacity:0}}@keyframes view-fade-in{0%{opacity:0}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}::view-transition-old(root),::view-transition-new(root),::view-transition-old(main-content),::view-transition-new(main-content){animation:none!important}}@media(prefers-contrast:more){:root{--color-border: light-dark(oklch(.7 .02 265), oklch(.4 .04 275));--color-text-muted: light-dark(oklch(.3 .02 265), oklch(.82 .02 265));--color-text-dim: light-dark(oklch(.4 .02 265), oklch(.65 .02 265))}.form-input,.inline-edit-value{border-width:2px}:focus-visible{outline-width:3px}}@media(prefers-reduced-transparency:reduce){.confirm-popover::backdrop,.confirm-dialog::backdrop{background:light-dark(oklch(.92 .005 265),oklch(.08 .02 280))}:root{--color-hover-overlay: light-dark(oklch(.93 .005 265), oklch(.22 .03 275));--color-hover-overlay-subtle: light-dark(oklch(.94 .005 265), oklch(.23 .03 275))}}}@layer components{.header-content{max-inline-size:600px;inline-size:100%;margin-inline:auto;padding-inline:1rem;display:flex;align-items:center;justify-content:space-between;block-size:56px}.header-left{display:flex;align-items:center;gap:.75rem}.logo{display:flex;align-items:center;gap:.5rem;font-size:1.125rem;font-weight:700;color:var(--color-text);letter-spacing:-.02em;text-decoration:none;cursor:pointer}.header-logo-icon{inline-size:28px;block-size:28px}.nav-link{font-size:.875rem;font-weight:500;color:var(--color-text-dim);text-decoration:none;padding:.25rem .5rem;border-radius:var(--radius-small);transition:all var(--transition)}.nav-link:hover{color:var(--color-text);background:var(--color-hover-overlay-subtle)}.nav-divider{inline-size:1px;block-size:1.25rem;background:var(--color-border)}#app-header a[aria-current=page]:not(.logo){color:var(--color-primary);background:var(--color-primary-bg)}app-banner{display:contents}.app-banner{padding-block:.625rem}.app-banner:first-child{padding-block-start:calc(.625rem + env(safe-area-inset-top,0px))}.app-banner-warning{background:var(--color-warning-bg);border-block-end:1px solid var(--color-warning-border);color:var(--color-warning)}.app-banner-error{background:var(--color-error-bg);border-block-end:1px solid var(--color-error-border);color:var(--color-error)}.app-banner-info{background:var(--color-info-bg);border-block-end:1px solid var(--color-info-border);color:var(--color-info)}.app-banner-content{max-inline-size:600px;inline-size:100%;margin-inline:auto;padding-inline:1rem;display:flex;align-items:center;gap:.75rem}.app-banner-message{flex:1;font-size:.8125rem}.app-banner-action{background:none;border:none;color:inherit;cursor:pointer;font:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px;padding:0}.app-banner-action:hover{opacity:.8}.app-banner-dismiss{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:none;border:none;color:inherit;cursor:pointer;padding:.25rem;border-radius:var(--radius-small);opacity:.7;transition:opacity var(--transition)}.app-banner-dismiss:hover{opacity:1}.app-banner-dismiss svg{inline-size:14px;block-size:14px}.auth-logo{display:flex;justify-content:center;margin-block-end:1.5rem}.auth-logo img{inline-size:72px;block-size:72px}.auth-logo.auth-logo-large img{inline-size:144px;block-size:144px}.auth-app-name{text-align:center;font-size:1.5rem;font-weight:700;color:var(--color-text);letter-spacing:-.02em}.auth-divider{border:none;border-block-start:1px solid var(--color-border);margin-block:3rem}.view{flex:1;display:flex;flex-direction:column;opacity:1;transform:translateY(0);transition:opacity var(--transition),transform var(--transition)}@starting-style{.view{opacity:0;transform:translateY(4px)}}.view-centered{display:flex;flex-direction:column;align-items:center;justify-content:center;min-block-size:calc(100dvh - 3rem)}.view-title{font-size:1.5rem;font-weight:700;margin-block-end:.5rem;text-wrap:balance}.view-subtitle{font-size:.9rem;color:var(--color-text-muted);margin-block-end:1.5rem;text-wrap:pretty}.form-group{margin-block-end:1rem}.form-label{display:block;font-size:.8125rem;font-weight:600;color:var(--color-text-muted);margin-block-end:.375rem;text-transform:uppercase;letter-spacing:.05em;transition:color var(--transition)}.form-group:has(.form-input:focus)>.form-label{color:var(--color-text)}.form-input{inline-size:100%;padding-block:.75rem;padding-inline:1rem;background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-small);color:var(--color-text);font-size:1rem;transition:border-color var(--transition)}.form-input:focus{outline:none;border-color:var(--color-primary)}.form-input::placeholder{color:var(--color-text-dim)}.form-input[readonly]{opacity:.6;cursor:default}.form-input-row{display:flex;gap:.5rem;align-items:center}.form-input-row .form-input{flex:1}.button{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding-block:.75rem;padding-inline:1.5rem;border:none;border-radius:var(--radius-small);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all var(--transition);text-decoration:none}.button:disabled{opacity:.5;cursor:not-allowed}.button-primary{background:var(--color-primary);color:#fff}.button-primary:hover:not(:disabled){background:var(--color-primary-hover)}.button-secondary{background:transparent;color:var(--color-text);border:1px solid var(--color-border)}.button-secondary:hover:not(:disabled){border-color:var(--color-text-muted);background:var(--color-hover-overlay)}.button-ghost{background:transparent;color:var(--color-text-muted);padding-block:.5rem;padding-inline:.75rem}.button-ghost:hover{color:var(--color-text);background:var(--color-border)}.button-danger{background:transparent;color:var(--color-error);border:1px solid var(--color-error-border)}.button-danger:hover:not(:disabled){background:var(--color-error-bg);border-color:var(--color-error)}.button-danger-solid{background:var(--color-error);color:#fff;border:1px solid var(--color-error)}.button-danger-solid:hover:not(:disabled){background:var(--color-danger-hover);border-color:var(--color-danger-hover)}.button-small{padding-block:.375rem;padding-inline:.75rem;font-size:.8125rem}.button-full{inline-size:100%}.button-row{display:flex;gap:.5rem}.button-icon{display:inline-flex;align-items:center;justify-content:center;inline-size:32px;block-size:32px;padding:0;background:transparent;border:none;border-radius:var(--radius-small);color:var(--color-text-dim);cursor:pointer;transition:all var(--transition)}.button-icon:hover,.button-icon:has(+[popover]:popover-open){color:var(--color-text);background:var(--color-hover-overlay-subtle)}.button-icon svg{inline-size:16px;block-size:16px}.button-icon-success:hover{color:var(--color-success)}.card{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.25rem}.card-danger{border-color:var(--color-error-border);background:oklch(from var(--color-error) l c h / .05)}.section-card{display:flex;flex-direction:column;gap:.75rem}.section-card .view-title{font-size:1.125rem;margin-block-end:.25rem;margin-block-start:-.125rem}.section-card .view-subtitle{margin-block-end:0}.section-card>.button{align-self:flex-start}@container (inline-size >= 480px){.section-card{flex-direction:row;align-items:center;justify-content:space-between}.section-card>.button{align-self:auto;flex-shrink:0}}.section-card-header{display:flex;align-items:center;justify-content:space-between;padding:1.25rem}.section-card-header .view-title{font-size:1.125rem;margin-block-end:.25rem;margin-block-start:-.125rem}.section-card-header .view-subtitle{margin-block-end:0}.confirm-popover{inset:unset;margin:0;overflow:visible;right:calc(anchor(left) + 8px);top:anchor(center);translate:0 -50%;position-try-fallbacks:flip-inline;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1rem;color:var(--color-text);box-shadow:var(--shadow-elevated);max-inline-size:240px;opacity:1;scale:1;transition:opacity var(--transition),scale var(--transition),overlay var(--transition) allow-discrete,display var(--transition) allow-discrete}@starting-style{.confirm-popover{opacity:0;scale:.9}}.confirm-popover:before{content:"";position:absolute;left:100%;top:50%;margin-top:-6px;border:6px solid transparent;border-left-color:var(--color-border)}.confirm-popover:after{content:"";position:absolute;left:calc(100% - 1px);top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--color-bg-surface)}.confirm-popover::backdrop{background:#0006;transition:background var(--transition),overlay var(--transition) allow-discrete,display var(--transition) allow-discrete}@starting-style{.confirm-popover::backdrop{background:#0000}}.confirm-popover p{font-size:.875rem;margin-block-end:.75rem}html:has(dialog:modal){overflow:hidden}.confirm-dialog{margin:auto;background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);padding:1.5rem;color:var(--color-text);box-shadow:var(--shadow-elevated);max-inline-size:400px;inline-size:calc(100% - 2rem);overscroll-behavior:contain;opacity:1;scale:1;transition:opacity var(--transition),scale var(--transition),overlay var(--transition) allow-discrete,display var(--transition) allow-discrete}@starting-style{.confirm-dialog{opacity:0;scale:.95}}.confirm-dialog::backdrop{background:#0006;transition:background var(--transition),overlay var(--transition) allow-discrete,display var(--transition) allow-discrete}@starting-style{.confirm-dialog::backdrop{background:#0000}}.confirm-dialog .confirm-dialog-title{font-size:1.125rem;font-weight:600;margin-block-end:.5rem}.confirm-dialog .confirm-dialog-message{font-size:.875rem;color:var(--color-text-muted);margin-block-end:1.25rem;text-wrap:pretty}.confirm-dialog .form-group{margin-block-end:1rem}.confirm-dialog-danger{border-color:var(--color-error-border)}.alert{padding-block:.75rem;padding-inline:1rem;border-radius:var(--radius-small);font-size:.875rem;margin-block-end:1rem;animation:alert-enter var(--transition)}.alert-error{background:var(--color-error-bg);border:1px solid var(--color-error-border);color:var(--color-error)}.alert-success{background:var(--color-success-bg);border:1px solid var(--color-success-border);color:var(--color-success)}.alert-warning{background:var(--color-warning-bg);border:1px solid var(--color-warning-border);color:var(--color-warning)}.loading-spinner{inline-size:32px;block-size:32px;border:3px solid var(--color-border);border-block-start-color:var(--color-primary);border-radius:50%;animation:spin var(--animation-spin);margin-block:3rem;margin-inline:auto}:where(#view-loading,.view)>.loading-spinner{margin:auto}@keyframes spin{to{transform:rotate(360deg)}}@keyframes alert-enter{0%{opacity:0;transform:translateY(-.5rem)}}@keyframes pulse{0%,to{opacity:.25}50%{opacity:.15}}.empty-state{flex:1;display:flex;align-items:center;justify-content:center;text-align:center;padding-inline:1rem;color:var(--color-text-muted)}.empty-state-icon{font-size:6rem;letter-spacing:.25em;animation:pulse var(--animation-pulse)}.empty-state-title{font-size:1.125rem;font-weight:600;margin-block-end:.5rem;color:var(--color-text)}.link{color:var(--color-primary);text-decoration:none;cursor:pointer;font-weight:500}.link:hover{text-decoration:underline}.auth-toggle{text-align:center;margin-block-start:1.5rem;font-size:.875rem;color:var(--color-text-muted)}.recover-hint{font-size:.8125rem;color:var(--color-text-dim);text-align:center;margin-block-start:.75rem;margin-block-end:0}.privacy-policy{font-size:.9rem;line-height:1.6}.privacy-section{margin-block-end:1.5rem}.privacy-heading{font-size:1rem;font-weight:600;margin-block-end:.5rem}.privacy-text{color:var(--color-text-muted)}.privacy-list{color:var(--color-text-muted);padding-inline-start:1.25rem;display:flex;flex-direction:column;gap:.5rem}.auth-footer{text-align:center;margin-block-start:1rem;font-size:.8125rem;color:var(--color-text-dim)}}@layer components{passkey-list{display:block}passkey-list.card{padding:0}passkey-list:has(.empty-state) .section-card-header{border-block-end:1px solid oklch(from var(--color-border) l c h / .5)}passkey-list:state(loading) .loading-spinner{display:block}passkey-list .passkey-item{display:flex;align-items:center;justify-content:space-between;padding-block:1rem;padding-inline:1.25rem;border-block-start:1px solid var(--color-border)}passkey-list .passkey-item-name{font-size:1rem;font-weight:600;margin-block-end:.25rem}passkey-list .card-meta{font-size:.8125rem;color:var(--color-text-muted)}passkey-list .collection-item-actions{display:flex;align-items:center;gap:.5rem}passkey-list .badge-active{font-size:.625rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--color-primary);background:var(--color-primary-bg);padding-block:.125rem;padding-inline:.5rem;border-radius:var(--radius-small)}}@layer components{view-account .account-card{padding:0}view-account .account-row{display:flex;flex-direction:column;gap:.25rem;padding-block:1rem;padding-inline:1.25rem;transition:background var(--transition)}view-account .account-row+:is(view-account .account-row){border-block-start:1px solid var(--color-border)}view-account .account-row:has(.inline-edit-input:not(.hidden)){background:var(--color-hover-overlay-subtle)}view-account .account-field-label{font-size:.75rem;color:var(--color-text-dim);text-transform:uppercase;letter-spacing:.05em}view-account .account-field-row{display:flex;align-items:center;gap:.5rem}view-account .account-field{min-inline-size:0;flex:1}view-account .account-field-value{font-size:1rem;display:flex;align-items:center;gap:.5rem;block-size:32px}view-account .account-field-actions{display:flex;align-items:center;gap:.25rem;flex-shrink:0}view-account .inline-edit-value{border:1px solid transparent}view-account .inline-edit-input{field-sizing:content;min-inline-size:8ch;padding-block:0;padding-inline:.5rem;block-size:32px}view-account .inline-edit-hint{font-size:.8125rem;color:var(--color-text-muted);overflow:clip;block-size:auto;transition:block-size var(--transition)}view-account .inline-edit-hint.hidden{block-size:0}view-account .verified-badge{display:inline-flex;align-items:center;color:var(--color-success);flex-shrink:0}view-account .verified-badge svg{inline-size:16px;block-size:16px}}@layer components{export-dialog{display:contents}.export-progress{block-size:4px;background:var(--color-border);border-radius:2px;overflow:hidden;margin-block:1.5rem}.export-progress-bar{block-size:100%;background:var(--color-primary);border-radius:2px;animation:export-progress var(--animation-progress)}.export-status-text{animation:fade-in var(--transition)}@keyframes fade-in{0%{opacity:0}}@keyframes export-progress{0%{inline-size:0}to{inline-size:100%}}.export-ready{opacity:1;transition:opacity var(--transition)}@starting-style{.export-ready{opacity:0}}.export-summary{border:1px solid var(--color-border);border-radius:var(--radius-small);margin-block-end:1rem}.export-summary-item{display:flex;flex-direction:column;gap:.125rem;padding-block:.75rem;padding-inline:1rem}.export-summary-item+.export-summary-item{border-block-start:1px solid var(--color-border)}.export-summary-label{font-size:.875rem;font-weight:600}.export-summary-detail{font-size:.8125rem;color:var(--color-text-muted)}.export-meta{font-size:.8125rem;color:var(--color-text-dim);margin-block-end:1.25rem}}@layer utilities{.hidden{display:none}.margin-top-1{margin-block-start:.5rem}.margin-top-2{margin-block-start:1rem}.margin-top-3{margin-block-start:1.5rem}.skip-navigation{position:absolute;inset-block-start:-100%;inset-inline-start:1rem;z-index:200;padding-block:.5rem;padding-inline:1rem;background:var(--color-primary);color:#fff;border-radius:var(--radius-small);font-weight:600;text-decoration:none}.skip-navigation:focus{inset-block-start:.5rem}.screen-reader-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}}