:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #172033;
  background: #f6f7f9;
  font-synthesis: none;
}

:root[data-theme="dark"] { color-scheme: dark; color: #edf0f5; background: #111418; }
* { box-sizing: border-box; }
body { min-width: 320px; min-height: 100vh; margin: 0; background: #f6f7f9; }
:root[data-theme="dark"] body { background: #111418; }
:root[data-home-background] { --home-background-size: cover; --home-background-position: center; }
:root[data-home-background] body { background-color: #f6f7f9; background-image: var(--home-background); background-position: var(--home-background-position); background-repeat: no-repeat; background-size: var(--home-background-size); transition: background-color .35s ease; }
:root[data-theme="dark"][data-home-background] body { background-color: #111418; }
:root[data-home-background="home-niebla"] { --home-background: linear-gradient(135deg, #f3f6f8, #e2e9ee 52%, #f8f9fa); }
:root[data-home-background="home-papel"] { --home-background: linear-gradient(135deg, #f7f3ea, #ebe5d8 50%, #f9f7f2); }
:root[data-home-background="home-salvia"] { --home-background: linear-gradient(135deg, #eef3ed, #dce7db 52%, #f7f8f5); }
:root[data-home-background="home-arena"] { --home-background: linear-gradient(135deg, #f6f1e8, #eadfce 54%, #fbfaf7); }
:root[data-home-background="home-cielo"] { --home-background: linear-gradient(135deg, #eef4f8, #d9e5ee 52%, #f7fafc); }
:root[data-home-background="home-pizarra"] { --home-background: linear-gradient(135deg, #e8edf1, #d6dfe7 52%, #f5f7f9); }
:root[data-theme="dark"][data-home-background="home-niebla"] { --home-background: linear-gradient(135deg, #1d252c, #2b3942 52%, #161d23); }
:root[data-theme="dark"][data-home-background="home-papel"] { --home-background: linear-gradient(135deg, #282722, #39362f 52%, #1d1d1a); }
:root[data-theme="dark"][data-home-background="home-salvia"] { --home-background: linear-gradient(135deg, #1d2820, #304137 52%, #17201a); }
:root[data-theme="dark"][data-home-background="home-arena"] { --home-background: linear-gradient(135deg, #2a2520, #40372d 52%, #1d1a17); }
:root[data-theme="dark"][data-home-background="home-cielo"] { --home-background: linear-gradient(135deg, #18242c, #293b48 52%, #151d24); }
:root[data-theme="dark"][data-home-background="home-pizarra"] { --home-background: linear-gradient(135deg, #1b2128, #303b47 52%, #151a20); }
:root[data-vault-background] { --vault-overlay: linear-gradient(#f6f7f9bd, #f6f7f9bd); --vault-background-size: cover; --vault-background-position: center; --vault-background-repeat: no-repeat; }
:root[data-theme="dark"][data-vault-background] { --vault-overlay: linear-gradient(#111418c9, #111418c9); }
:root[data-vault-background] body { background-color: #f6f7f9; background-image: var(--vault-overlay), var(--vault-background); background-position: center, var(--vault-background-position); background-repeat: no-repeat, var(--vault-background-repeat); background-size: cover, var(--vault-background-size); }
:root[data-theme="dark"][data-vault-background] body { background-color: #111418; }

:root[data-vault-background="color-niebla"], .appearance-swatch[data-background="color-niebla"] { --vault-background: linear-gradient(#dfe7ed, #dfe7ed); }
:root[data-vault-background="color-cielo"], .appearance-swatch[data-background="color-cielo"] { --vault-background: linear-gradient(#cde6ff, #cde6ff); }
:root[data-vault-background="color-salvia"], .appearance-swatch[data-background="color-salvia"] { --vault-background: linear-gradient(#d8e5d7, #d8e5d7); }
:root[data-vault-background="color-lavanda"], .appearance-swatch[data-background="color-lavanda"] { --vault-background: linear-gradient(#e6dcf5, #e6dcf5); }
:root[data-vault-background="color-arena"], .appearance-swatch[data-background="color-arena"] { --vault-background: linear-gradient(#f1e1c3, #f1e1c3); }
:root[data-vault-background="color-rosa"], .appearance-swatch[data-background="color-rosa"] { --vault-background: linear-gradient(#f3dce0, #f3dce0); }
:root[data-vault-background="color-pizarra"], .appearance-swatch[data-background="color-pizarra"] { --vault-background: linear-gradient(#c9d1dc, #c9d1dc); }
:root[data-vault-background="color-grafito"], .appearance-swatch[data-background="color-grafito"] { --vault-background: linear-gradient(#536273, #536273); }

:root[data-vault-background="gradient-aurora"], .appearance-swatch[data-background="gradient-aurora"] { --vault-background: linear-gradient(135deg, #a7f3d0, #93c5fd 52%, #c4b5fd); }
:root[data-vault-background="gradient-brisa"], .appearance-swatch[data-background="gradient-brisa"] { --vault-background: linear-gradient(135deg, #b9f3f1, #86b7f0 55%, #d0e6fa); }
:root[data-vault-background="gradient-crepusculo"], .appearance-swatch[data-background="gradient-crepusculo"] { --vault-background: linear-gradient(135deg, #f8b195, #f67280 48%, #6c5b7b); }
:root[data-vault-background="gradient-bosque"], .appearance-swatch[data-background="gradient-bosque"] { --vault-background: linear-gradient(135deg, #b7d7b5, #5c8d6b 52%, #2f5d50); }
:root[data-vault-background="gradient-lila"], .appearance-swatch[data-background="gradient-lila"] { --vault-background: linear-gradient(135deg, #f0d9ff, #bda7ed 50%, #91a7e8); }
:root[data-vault-background="gradient-coral"], .appearance-swatch[data-background="gradient-coral"] { --vault-background: linear-gradient(135deg, #ffd1ba, #fb9b8c 55%, #f0b5d5); }
:root[data-vault-background="gradient-nocturno"], .appearance-swatch[data-background="gradient-nocturno"] { --vault-background: linear-gradient(135deg, #152a4a, #294b77 50%, #315e8b); }
:root[data-vault-background="gradient-amanecer"], .appearance-swatch[data-background="gradient-amanecer"] { --vault-background: linear-gradient(135deg, #fff0b3, #ffba92 48%, #e287a8); }
:root[data-vault-background="gradient-menta"], .appearance-swatch[data-background="gradient-menta"] { --vault-background: linear-gradient(135deg, #dbf5e1, #9ee2c4 50%, #7cb8cb); }
:root[data-vault-background="gradient-tinta"], .appearance-swatch[data-background="gradient-tinta"] { --vault-background: linear-gradient(135deg, #202a44, #465d86 52%, #a6b0c5); }

:root[data-vault-background="pattern-cuadricula"], .appearance-swatch[data-background="pattern-cuadricula"] { --vault-background: linear-gradient(#ffffffa8 1px, transparent 1px), linear-gradient(90deg, #ffffffa8 1px, #d5e3f4 1px); --vault-background-size: 22px 22px; --vault-background-repeat: repeat, repeat; }
:root[data-vault-background="pattern-puntos"], .appearance-swatch[data-background="pattern-puntos"] { --vault-background: radial-gradient(#5784ba 1.2px, #e4eff9 1.2px); --vault-background-size: 15px 15px; --vault-background-repeat: repeat; }
:root[data-vault-background="pattern-lineas"], .appearance-swatch[data-background="pattern-lineas"] { --vault-background: repeating-linear-gradient(135deg, #e9e1d4 0 7px, #f8f4ec 7px 14px); --vault-background-repeat: repeat; }
:root[data-vault-background="pattern-ondas"], .appearance-swatch[data-background="pattern-ondas"] { --vault-background: repeating-radial-gradient(circle at 0 100%, #b9dbe0 0 2px, #eff8f7 2px 12px); --vault-background-repeat: repeat; }
:root[data-vault-background="pattern-papel"], .appearance-swatch[data-background="pattern-papel"] { --vault-background: repeating-linear-gradient(0deg, #f3eedf 0 1px, #e7ddc9 1px 2px, #f6f1e6 2px 7px); --vault-background-repeat: repeat; }
:root[data-vault-background="pattern-trama"], .appearance-swatch[data-background="pattern-trama"] { --vault-background: repeating-linear-gradient(45deg, #e1e7ee 0 1px, transparent 1px 7px), repeating-linear-gradient(-45deg, #e1e7ee 0 1px, #f6f8fb 1px 7px); --vault-background-repeat: repeat, repeat; }
:root[data-vault-background="pattern-confeti"], .appearance-swatch[data-background="pattern-confeti"] { --vault-background: radial-gradient(#f49aa4 2px, transparent 2.4px), radial-gradient(#6c9fe3 2px, transparent 2.4px), radial-gradient(#f1c668 2px, #f8f2e9 2.4px); --vault-background-size: 26px 26px, 31px 31px, 23px 23px; --vault-background-position: 0 0, 12px 9px, 4px 15px; --vault-background-repeat: repeat, repeat, repeat; }
:root[data-vault-background="pattern-mosaico"], .appearance-swatch[data-background="pattern-mosaico"] { --vault-background: conic-gradient(from 45deg, #b8d4e8, #f0d7bd, #d0dfc4, #e9bed1, #b8d4e8); --vault-background-size: 28px 28px; --vault-background-repeat: repeat; }
:root[data-vault-background="pattern-topografia"], .appearance-swatch[data-background="pattern-topografia"] { --vault-background: repeating-radial-gradient(ellipse at 24% 45%, transparent 0 9px, #9bb9a5 10px 11px, transparent 12px 19px), linear-gradient(#dcead9, #dcead9); --vault-background-repeat: repeat, repeat; }
:root[data-vault-background="pattern-lunares"], .appearance-swatch[data-background="pattern-lunares"] { --vault-background: radial-gradient(#c4a6d8 3px, #f1eafa 3.5px); --vault-background-size: 22px 22px; --vault-background-repeat: repeat; }

:root[data-vault-background="photo-montanas"], .appearance-swatch[data-background="photo-montanas"] { --vault-background: url('assets/backgrounds/montanas-serenas.webp'); }
:root[data-vault-background="photo-oceano"], .appearance-swatch[data-background="photo-oceano"] { --vault-background: url('assets/backgrounds/oceano-profundo.webp'); }
:root[data-vault-background="photo-dunas"], .appearance-swatch[data-background="photo-dunas"] { --vault-background: url('assets/backgrounds/dunas-doradas.webp'); }
:root[data-vault-background="photo-botanicas"], .appearance-swatch[data-background="photo-botanicas"] { --vault-background: url('assets/backgrounds/sombras-botanicas.webp'); }
:root[data-vault-background="photo-bosque"], .appearance-swatch[data-background="photo-bosque"] { --vault-background: url('assets/backgrounds/bosque-en-niebla.webp'); }
:root[data-vault-background="photo-cielo"], .appearance-swatch[data-background="photo-cielo"] { --vault-background: url('assets/backgrounds/cielo-nocturno.webp'); }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid #75a7ff; outline-offset: 2px; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.button-icon { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.app-shell { width: min(1120px, calc(100% - 2rem)); margin: 0 auto; padding: 1rem 0 3rem; }
.app-header, .vault-toolbar, .panel-heading, .toolbar-actions, .entry-actions, .generator-row, .brand, .header-actions { display: flex; align-items: center; }
.app-header { justify-content: space-between; gap: 1rem; padding: .35rem 0 1.6rem; border-bottom: 1px solid #e1e4e8; }
.brand { gap: .65rem; color: inherit; text-decoration: none; }
.brand-mark { display: grid; width: 2.35rem; height: 2.35rem; place-items: center; border-radius: .65rem; background: #1d4ed8; color: #fff; font-size: 1.45rem; font-weight: 700; }
.brand strong, .brand small { display: block; }
.brand strong { font-size: .98rem; letter-spacing: -.01em; }
.brand small { margin-top: .1rem; color: #6b7280; font-size: .75rem; }
.header-actions { gap: .55rem; flex-wrap: wrap; justify-content: flex-end; }
.theme-toggle { border: 1px solid #d9dee6; border-radius: 999px; background: #fff; color: #4b5563; font-size: .78rem; font-weight: 700; }
.theme-toggle { display: inline-flex; align-items: center; gap: .35rem; padding: .42rem .65rem; }
.theme-toggle:hover { background: #f3f5f7; }

.notice { width: min(100%, 48rem); margin: 1rem auto; padding: .75rem .9rem; border: 1px solid #9ed7b1; border-radius: .7rem; background: #f1fbf4; color: #176b38; text-align: center; font-size: .88rem; }
.notice.error { border-color: #efbab7; background: #fff5f4; color: #a12f2b; }
.screen.narrow { width: min(100%, 30rem); margin: 3rem auto; }
.hero-card, .panel { border: 1px solid #dfe3e8; border-radius: .9rem; background: #fff; }
.hero-card { padding: clamp(1.35rem, 5vw, 2.25rem); }
.hero-card h1, .vault-toolbar h1, .panel-heading h2 { margin: .15rem 0 .5rem; color: #172033; letter-spacing: -.035em; }
.hero-card h1 { font-size: clamp(1.65rem, 5vw, 2.15rem); line-height: 1.13; }
.lead { margin: 0 0 1.5rem; color: #5f6979; line-height: 1.55; }
.eyebrow { margin: 0; color: #315fc3; font-size: .7rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.stack { display: grid; gap: 1rem; }
.stack label, .field-label { display: grid; gap: .4rem; color: #374151; font-size: .84rem; font-weight: 700; }
.stack label > span em { color: #6b7280; font-style: normal; font-weight: 500; }
input, textarea, select { width: 100%; border: 1px solid #cbd2dc; border-radius: .62rem; background: #fff; color: #172033; padding: .76rem .8rem; }
input::placeholder, textarea::placeholder { color: #8791a0; }
input:focus, textarea:focus, select:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb1c; outline: none; }
textarea { resize: vertical; }
.helper { margin: -.2rem 0 0; color: #667085; font-size: .78rem; line-height: 1.45; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: .42rem; min-height: 2.75rem; border: 1px solid transparent; border-radius: .62rem; padding: .65rem .95rem; font-size: .87rem; font-weight: 750; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; }
.button:active { transform: translateY(1px); }
.button.primary { background: #1d4ed8; color: #fff; }
.button.primary:hover { background: #1e40af; }
.button.secondary { border-color: #cbd2dc; background: #fff; color: #374151; }
.button.secondary:hover { border-color: #94a3b8; background: #f8fafc; }
.button.danger { background: #b42318; color: #fff; }
.button.danger:hover { background: #912018; }
.button:disabled { cursor: not-allowed; opacity: .5; transform: none; }
.danger-quiet { border: 0; background: transparent; color: #a1312d; font-weight: 750; padding: .65rem .3rem; }
.text-button { width: fit-content; border: 0; background: transparent; color: #1d4ed8; padding: .4rem 0; font-size: .84rem; font-weight: 700; text-decoration: underline; text-underline-offset: .16rem; }
.icon-text-button { display: inline-flex; align-items: center; gap: .35rem; }
.lock-secondary-actions { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: .45rem 1.15rem; margin-top: 1rem; border-top: 1px solid #e5e7eb; padding-top: .8rem; }
.master-unlock-toggle { width: 100%; text-decoration: none; }
.master-unlock-fields { border-top: 1px solid #e5e7eb; padding-top: 1rem; }
.import-prompt { display: flex; align-items: center; justify-content: space-between; gap: .8rem; margin-top: .15rem; padding-top: .9rem; border-top: 1px solid #e5e7eb; color: #667085; font-size: .82rem; }
.import-prompt .text-button { flex-shrink: 0; }
.vault-picker { position: relative; }
.vault-select-button { display: flex; width: 100%; min-height: 2.8rem; align-items: center; justify-content: space-between; gap: .75rem; border: 1px solid #cbd2dc; border-radius: .62rem; background: #fff; color: #172033; padding: .68rem .8rem; text-align: left; font-size: .88rem; font-weight: 700; }
.vault-select-button:hover { border-color: #94a3b8; background: #f8fafc; }
.vault-select-button[aria-expanded="true"] { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb1c; }
.vault-select-chevron { width: 1rem; height: 1rem; flex: 0 0 auto; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .15s ease; }
.vault-select-button[aria-expanded="true"] .vault-select-chevron { transform: rotate(180deg); }
.vault-select-list { position: absolute; z-index: 10; top: calc(100% + .35rem); right: 0; left: 0; display: grid; max-height: 13rem; overflow-y: auto; gap: .2rem; border: 1px solid #cbd2dc; border-radius: .7rem; background: #fff; padding: .3rem; box-shadow: 0 .8rem 1.8rem #17203322; }
.vault-select-option { width: 100%; border: 0; border-radius: .48rem; background: transparent; color: #374151; padding: .62rem .65rem; text-align: left; font-size: .86rem; font-weight: 650; }
.vault-select-option:hover, .vault-select-option:focus-visible { background: #eef4ff; color: #1d4ed8; outline: none; }
.vault-select-option[aria-selected="true"] { background: #e8f0ff; color: #1d4ed8; font-weight: 800; }

.vault-toolbar { align-items: flex-start; flex-direction: column; gap: .8rem; margin: 1.35rem 0 1rem; }
.vault-toolbar h1 { font-size: clamp(1.6rem, 5vw, 2rem); }
.toolbar-actions { width: 100%; flex-wrap: wrap; justify-content: space-between; gap: .65rem 1rem; }
.toolbar-group { display: flex; align-items: center; flex-wrap: wrap; gap: .45rem; }
.vault-session-actions { margin-left: auto; }
.toolbar-actions .button { min-height: 2.45rem; padding: .5rem .7rem; }
#exportButton.backup-due { border-color: #d97706; background: #fffbeb; color: #92400e; box-shadow: 0 0 0 3px #f59e0b30; animation: backup-export-pulse 1.1s ease-in-out infinite; }
#exportButton.backup-due:hover { border-color: #b45309; background: #fef3c7; }
.backup-reminder { display: flex; align-items: center; gap: .75rem; margin: -.25rem 0 1rem; border: 1px solid #f0c36a; border-radius: .75rem; padding: .75rem .9rem; background: #fffbeb; color: #78350f; font-size: .84rem; }
.backup-reminder-icon { display: grid; flex: 0 0 2rem; width: 2rem; height: 2rem; place-items: center; border-radius: 999px; background: #f59e0b; color: #fff; line-height: 0; }
.backup-reminder-icon svg { width: 1.18rem; height: 1.18rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.backup-reminder-copy { min-width: 0; flex: 1; }
.backup-reminder-copy > strong, .backup-reminder-text > span, .backup-reminder-critical { display: block; }
.backup-reminder-text > span { margin-top: .12rem; color: #92400e; line-height: 1.4; }
.backup-reminder-text > .backup-folder-recommendation { margin-top: .38rem; font-weight: 700; }
.backup-reminder-critical { margin-top: .48rem; padding-top: .48rem; border-top: 1px solid #f0c36a; color: #78350f; font-size: .86rem; font-weight: 850; line-height: 1.35; }
.backup-reminder-close { display: grid; flex: 0 0 auto; width: 2rem; height: 2rem; place-items: center; border: 0; border-radius: .45rem; background: transparent; color: inherit; opacity: .68; }
.backup-reminder-close:hover { background: #f59e0b20; opacity: 1; }
.backup-reminder-close svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
@keyframes backup-export-pulse {
  0%, 100% { box-shadow: 0 0 0 3px #f59e0b30; filter: brightness(1); }
  50% { box-shadow: 0 0 0 5px #f59e0b55, 0 0 .9rem #f59e0b55; filter: brightness(1.06); }
}
.vault-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(18rem, .85fr); gap: 1rem; align-items: start; }
.panel { padding: 1.15rem; }
.entry-editor { grid-column: 2; }
.entries-panel { grid-column: 1; grid-row: 1; }
.panel-heading { justify-content: space-between; gap: .8rem; margin-bottom: 1rem; }
.panel-heading h2 { font-size: 1.2rem; }
.two-columns { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.password-field { position: relative; display: block; }
.password-field input { padding-right: 3rem; }
.icon-button { position: absolute; top: 50%; right: .35rem; transform: translateY(-50%); border: 0; border-radius: .45rem; background: transparent; color: #526176; padding: .35rem .45rem; }
.icon-button:hover { background: #eef2f6; }
.generator-row { align-items: center; flex-wrap: wrap; gap: .65rem; }
.character-options { display: grid; grid-template-columns: repeat(4, 2.55rem); gap: .38rem; }
.character-toggle { display: grid; width: 2.55rem; height: 2.55rem; place-items: center; border: 1px solid #cbd2dc; border-radius: .58rem; background: #fff; color: #667085; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .82rem; font-weight: 800; }
.character-toggle:hover { border-color: #94a3b8; background: #f8fafc; }
.character-toggle[aria-pressed="true"] { border-color: #1d4ed8; background: #eef4ff; color: #1d4ed8; box-shadow: inset 0 0 0 1px #1d4ed8; }
.generator-row .button { flex: 1; }
.optional-toggle { display: inline-flex; width: fit-content; align-items: center; gap: .35rem; border: 0; background: transparent; color: #1d4ed8; padding: .15rem 0; font-size: .84rem; font-weight: 750; }
.optional-toggle:hover { color: #1e40af; }
.optional-chevron { transition: transform .15s ease; }
.optional-toggle[aria-expanded="true"] .optional-chevron { transform: rotate(180deg); }
.optional-fields { display: grid; gap: 1rem; }
.entries-heading { align-items: end; }
.search-field input { min-width: 11rem; padding: .58rem .7rem; }
.entries { display: grid; gap: .65rem; }
.entry-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: .6rem; border: 1px solid #dfe3e8; border-radius: .75rem; padding: .9rem; background: #fff; }
.entry-summary { display: flex; align-items: flex-start; justify-content: space-between; gap: .6rem; }
.entry-summary-copy { min-width: 0; flex: 1 1 auto; }
.entry-summary h3, .entry-summary p { overflow: hidden; margin: 0; text-overflow: ellipsis; white-space: nowrap; }
.entry-summary h3 { color: #172033; font-size: .98rem; }
.entry-summary p { margin-top: .16rem; color: #667085; font-size: .82rem; }
.favorite-button { display: inline-grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border: 1px solid transparent; border-radius: .5rem; background: transparent; color: #7a8798; padding: 0; }
.favorite-button:hover { border-color: #d5dce6; background: #f6f8fb; color: #c27a00; }
.favorite-button:focus-visible { outline: 3px solid #93b4ff; outline-offset: 2px; }
.favorite-button.is-favorite { border-color: #f1c46c; background: #fff8e5; color: #ad6a00; }
.favorite-button.is-favorite .button-icon { fill: currentColor; }
.entry-details { min-width: 0; }
.masked-password { display: inline-block; max-width: 100%; overflow: hidden; color: #526176; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .8rem; text-overflow: ellipsis; white-space: nowrap; }
.entry-actions { flex-wrap: wrap; gap: .45rem; }
.card-button { min-height: 2.5rem; border: 1px solid #cfd6e0; border-radius: .55rem; background: #fff; color: #3f4a5b; padding: .38rem .62rem; font-size: .78rem; font-weight: 750; }
.card-button:hover { border-color: #99a8bc; background: #f8fafc; }
.card-button.copy-button { flex: 1 1 10rem; border-color: #1d4ed8; background: #1d4ed8; color: #fff; }
.card-button.copy-button:hover { border-color: #1e40af; background: #1e40af; }
.card-button.copy-button.copied { border-color: #167344; background: #167344; }
.card-button.danger { color: #a1312d; }
.empty-state { margin: 1rem 0; color: #667085; text-align: center; font-size: .9rem; }
.modal { width: min(31rem, calc(100% - 2rem)); border: 1px solid #dfe3e8; border-radius: .85rem; padding: 1.35rem; background: #fff; color: #172033; box-shadow: 0 18px 50px #17203330; }
.modal::backdrop { background: #11182780; }
.modal h2 { margin: .2rem 0 .6rem; letter-spacing: -.03em; }
.modal-actions { display: flex; justify-content: flex-end; gap: .65rem; margin-top: .2rem; }
.usb-key-dialog { width: min(33rem, calc(100% - 2rem)); }
.usb-key-heading h2 { margin-bottom: 0; }
.usb-key-status-card { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr); align-items: center; gap: .7rem; border: 1px solid #c7d7f6; border-radius: .72rem; background: #f4f8ff; padding: .72rem .8rem; }
.usb-key-status-icon, .usb-key-warning-icon { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 999px; }
.usb-key-status-icon { background: #dbeafe; color: #1d4ed8; }
.usb-key-status-icon svg, .usb-key-warning-icon svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.usb-key-status-label { margin: 0 0 .16rem; color: #315fc3; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
#usbKeyStatus { margin: 0; color: #1d365d; font-size: .84rem; font-weight: 700; line-height: 1.42; }
.usb-key-warning { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); gap: .7rem; border: 1px solid #efc66b; border-radius: .72rem; background: #fffaf0; color: #6d4310; padding: .82rem; }
.usb-key-warning-icon { background: #fff0c9; color: #ad6800; }
.usb-key-warning strong { display: block; color: #703f08; font-size: .88rem; }
.usb-key-warning p { margin: .34rem 0 0; color: #76511d; font-size: .79rem; line-height: 1.46; }
.usb-key-warning p + p { margin-top: .38rem; }
.usb-key-warning b { color: #643807; }
.usb-key-file-card, .backup-verification-file { display: flex; align-items: center; gap: .65rem; min-width: 0; border: 1px solid #c7d7f6; border-radius: .72rem; background: #f4f8ff; color: #1d365d; padding: .72rem .8rem; }
.usb-key-file-card strong, .backup-verification-file strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .84rem; }
.usb-key-dialog .modal-actions { flex-wrap: wrap; }
.usb-key-dialog .modal-actions .button { flex: 1 1 9rem; }
#usbKeyFileStatus { min-height: 1.15rem; margin-top: -.35rem; }
#usbKeyFileStep .modal-actions { flex-wrap: wrap; }
#usbKeyFileStep .modal-actions .button { flex: 1 1 11rem; }
.appearance-modal { width: min(44rem, calc(100% - 1rem)); max-height: min(88vh, 48rem); overflow-y: auto; }
.appearance-options { display: grid; gap: 1rem; }
.appearance-group { display: grid; gap: .5rem; }
.appearance-group h3 { margin: 0; color: #4b5563; font-size: .78rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.appearance-choice-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.1rem, 1fr)); gap: .55rem; }
.appearance-option { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); align-items: center; gap: .5rem; min-height: 3.25rem; border: 1px solid #cbd2dc; border-radius: .65rem; background: #fff; color: #374151; padding: .35rem; text-align: left; font-size: .74rem; font-weight: 750; line-height: 1.18; }
.appearance-option:hover { border-color: #94a3b8; background: #f8fafc; }
.appearance-option.selected { border-color: #1d4ed8; background: #eef4ff; color: #1d4ed8; box-shadow: 0 0 0 2px #2563eb20; }
.appearance-swatch { display: block; width: 2.35rem; height: 2.35rem; border: 1px solid #1720331a; border-radius: .45rem; background-color: #f6f7f9; background-image: var(--vault-background, linear-gradient(135deg, #f6f7f9, #dfe6ef)); background-position: var(--vault-background-position, center); background-repeat: var(--vault-background-repeat, no-repeat); background-size: var(--vault-background-size, cover); }
.history-modal { width: min(36rem, calc(100% - 2rem)); }
.history-list { display: grid; max-height: min(55vh, 30rem); overflow-y: auto; border-top: 1px solid #e1e4e8; }
.history-item { display: grid; grid-template-columns: .75rem minmax(0, 1fr); gap: .75rem; padding: .9rem .15rem; border-bottom: 1px solid #e8ebef; }
.history-marker { width: .55rem; height: .55rem; margin-top: .32rem; border: 2px solid #1d4ed8; border-radius: 999px; background: #fff; box-shadow: 0 0 0 3px #dbeafe; }
.history-copy { min-width: 0; }
.history-copy strong, .history-copy time { display: block; }
.history-copy strong { overflow-wrap: anywhere; color: #273244; font-size: .88rem; }
.history-copy time { margin-top: .18rem; color: #667085; font-size: .75rem; }
.history-empty { margin: 0; padding: 1.3rem .25rem; color: #667085; text-align: center; font-size: .86rem; line-height: 1.5; }
.sync-modal { width: min(43rem, calc(100% - 1rem)); max-height: min(90vh, 52rem); overflow-y: auto; }
.sync-steps { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.sync-steps li { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr); align-items: start; gap: .65rem; }
.sync-steps li > span { display: grid; width: 1.8rem; height: 1.8rem; place-items: center; border-radius: 999px; background: #e9f0ff; color: #1d4ed8; font-size: .74rem; font-weight: 850; }
.sync-steps p { margin: .12rem 0 0; color: #526176; font-size: .82rem; line-height: 1.45; }
.sync-steps strong { color: #273244; }
.sync-safety-note { display: grid; grid-template-columns: 1.2rem minmax(0, 1fr); gap: .65rem; border: 1px solid #c7d7f6; border-radius: .72rem; background: #f4f8ff; color: #1d365d; padding: .8rem; }
.sync-safety-note p { margin: 0; font-size: .8rem; line-height: 1.48; }
.sync-intro-actions { flex-wrap: wrap; }
.sync-intro-actions .button { flex: 1 1 10rem; }
.sync-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .55rem; }
.sync-summary div { display: grid; gap: .15rem; border: 1px solid #dbe1e9; border-radius: .68rem; background: #f8fafc; padding: .72rem; text-align: center; }
.sync-summary strong { color: #1d4ed8; font-size: 1.25rem; }
.sync-summary span { color: #667085; font-size: .7rem; font-weight: 750; }
#syncConflictSection h3 { margin: 0 0 .35rem; color: #273244; font-size: .95rem; }
.sync-conflicts { display: grid; max-height: min(42vh, 24rem); gap: .7rem; overflow-y: auto; padding-right: .15rem; }
.sync-conflict { border: 1px solid #dbe1e9; border-radius: .72rem; padding: .85rem; }
.sync-conflict h4 { margin: 0; color: #273244; font-size: .9rem; }
.sync-conflict > p { margin: .25rem 0 .7rem; color: #667085; font-size: .75rem; line-height: 1.4; }
.sync-conflict-options { display: grid; gap: .42rem; }
.sync-conflict-option { display: grid !important; grid-template-columns: 1rem minmax(0, 1fr); align-items: start; gap: .55rem !important; border: 1px solid #dbe1e9; border-radius: .58rem; padding: .62rem; color: #374151 !important; font-size: .78rem !important; font-weight: 650 !important; }
.sync-conflict-option:has(input:checked) { border-color: #2563eb; background: #eef4ff; color: #1d4ed8 !important; }
.sync-conflict-option input { width: 1rem; margin: .1rem 0 0; padding: 0; }
.sync-conflict-option small { display: block; margin-top: .15rem; color: #667085; font-size: .7rem; font-weight: 500; line-height: 1.35; }
.sync-final-note { margin: 0; border-left: 3px solid #d99a2b; background: #fff9eb; color: #6d4310; padding: .72rem .8rem; font-size: .78rem; line-height: 1.45; }
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

:root[data-theme="dark"] .app-header { border-color: #2b3139; }
:root[data-theme="dark"] .brand small, :root[data-theme="dark"] .lead, :root[data-theme="dark"] .helper, :root[data-theme="dark"] .entry-summary p, :root[data-theme="dark"] .empty-state, :root[data-theme="dark"] .import-prompt { color: #aeb7c4; }
:root[data-theme="dark"] .theme-toggle, :root[data-theme="dark"] .hero-card, :root[data-theme="dark"] .panel, :root[data-theme="dark"] .modal, :root[data-theme="dark"] .button.secondary, :root[data-theme="dark"] .card-button, :root[data-theme="dark"] .entry-card { border-color: #343b45; background: #1a1f26; color: #edf0f5; }
:root[data-theme="dark"] .hero-card h1, :root[data-theme="dark"] .vault-toolbar h1, :root[data-theme="dark"] .panel-heading h2, :root[data-theme="dark"] .entry-summary h3, :root[data-theme="dark"] .modal h2 { color: #f5f7fa; }
:root[data-theme="dark"] input, :root[data-theme="dark"] textarea, :root[data-theme="dark"] select { border-color: #3b4451; background: #11161d; color: #f0f3f7; }
:root[data-theme="dark"] input::placeholder, :root[data-theme="dark"] textarea::placeholder { color: #8490a0; }
:root[data-theme="dark"] .stack label, :root[data-theme="dark"] .field-label, :root[data-theme="dark"] .masked-password { color: #d4dae3; }
:root[data-theme="dark"] .button.secondary:hover, :root[data-theme="dark"] .card-button:hover, :root[data-theme="dark"] .theme-toggle:hover, :root[data-theme="dark"] .icon-button:hover { background: #272e38; }
:root[data-theme="dark"] .favorite-button:hover { border-color: #4a5564; background: #272e38; color: #f2bc55; }
:root[data-theme="dark"] .favorite-button.is-favorite { border-color: #8d651f; background: #3a2b0d; color: #f2bd59; }
:root[data-theme="dark"] .character-toggle { border-color: #3b4451; background: #11161d; color: #aeb7c4; }
:root[data-theme="dark"] .character-toggle:hover { background: #272e38; }
:root[data-theme="dark"] .character-toggle[aria-pressed="true"] { border-color: #5b8def; background: #192a47; color: #a9c7ff; box-shadow: inset 0 0 0 1px #5b8def; }
:root[data-theme="dark"] .copy-button.card-button { border-color: #3b82f6; background: #2563eb; color: #fff; }
:root[data-theme="dark"] .copy-button.card-button:hover { background: #1d4ed8; }
:root[data-theme="dark"] .copy-button.card-button.copied { border-color: #23884e; background: #19723f; }
:root[data-theme="dark"] .import-prompt { border-color: #343b45; }
:root[data-theme="dark"] .lock-secondary-actions, :root[data-theme="dark"] .master-unlock-fields { border-color: #343b45; }
:root[data-theme="dark"] .vault-select-button, :root[data-theme="dark"] .vault-select-list { border-color: #3b4451; background: #11161d; color: #f0f3f7; }
:root[data-theme="dark"] .vault-select-button:hover { border-color: #5b6879; background: #1a212b; }
:root[data-theme="dark"] .vault-select-option { color: #d4dae3; }
:root[data-theme="dark"] .vault-select-option:hover, :root[data-theme="dark"] .vault-select-option:focus-visible { background: #192a47; color: #a9c7ff; }
:root[data-theme="dark"] .vault-select-option[aria-selected="true"] { background: #1d3154; color: #b8d0ff; }
:root[data-theme="dark"] #exportButton.backup-due { border-color: #d99a2b; background: #3a2a10; color: #ffd78a; box-shadow: 0 0 0 3px #d99a2b30; }
:root[data-theme="dark"] #exportButton.backup-due:hover { background: #463414; }
:root[data-theme="dark"] .backup-reminder { border-color: #75541e; background: #2d2414; color: #ffe1a8; }
:root[data-theme="dark"] .backup-reminder-text > span { color: #e7bd70; }
:root[data-theme="dark"] .backup-reminder-critical { border-color: #75541e; color: #ffe1a8; }
:root[data-theme="dark"] .backup-reminder-close:hover { background: #d99a2b28; }
:root[data-theme="dark"] .optional-toggle { color: #8db7ff; }
:root[data-theme="dark"] .optional-toggle:hover { color: #b7d1ff; }
:root[data-theme="dark"] .notice { border-color: #29784b; background: #13271b; color: #beefcb; }
:root[data-theme="dark"] .notice.error { border-color: #8e4140; background: #341d20; color: #ffc5c0; }
:root[data-theme="dark"] .history-list, :root[data-theme="dark"] .history-item { border-color: #343b45; }
:root[data-theme="dark"] .history-marker { border-color: #75a7ff; background: #1a1f26; box-shadow: 0 0 0 3px #1f3b68; }
:root[data-theme="dark"] .history-copy strong { color: #edf0f5; }
:root[data-theme="dark"] .history-copy time, :root[data-theme="dark"] .history-empty { color: #aeb7c4; }
:root[data-theme="dark"] .sync-steps li > span { background: #1d3154; color: #b8d0ff; }
:root[data-theme="dark"] .sync-steps p, :root[data-theme="dark"] .sync-summary span, :root[data-theme="dark"] .sync-conflict > p, :root[data-theme="dark"] .sync-conflict-option small { color: #aeb7c4; }
:root[data-theme="dark"] .sync-steps strong, :root[data-theme="dark"] #syncConflictSection h3, :root[data-theme="dark"] .sync-conflict h4 { color: #edf0f5; }
:root[data-theme="dark"] .sync-safety-note { border-color: #294b7d; background: #142640; color: #dbeafe; }
:root[data-theme="dark"] .sync-summary div, :root[data-theme="dark"] .sync-conflict, :root[data-theme="dark"] .sync-conflict-option { border-color: #343b45; background: #151a20; }
:root[data-theme="dark"] .sync-summary strong { color: #9bc4ff; }
:root[data-theme="dark"] .sync-conflict-option { color: #d4dae3 !important; }
:root[data-theme="dark"] .sync-conflict-option:has(input:checked) { border-color: #5b8def; background: #192a47; color: #b8d0ff !important; }
:root[data-theme="dark"] .sync-final-note { border-color: #d99a2b; background: #2d2414; color: #ffe1a8; }
:root[data-theme="dark"] .appearance-group h3 { color: #aeb7c4; }
:root[data-theme="dark"] .appearance-option { border-color: #3b4451; background: #11161d; color: #d4dae3; }
:root[data-theme="dark"] .appearance-option:hover { border-color: #5b6879; background: #272e38; }
:root[data-theme="dark"] .appearance-option.selected { border-color: #5b8def; background: #192a47; color: #b8d0ff; }
:root[data-theme="dark"] .usb-key-status-card { border-color: #294b7d; background: #142640; }
:root[data-theme="dark"] .usb-key-status-icon { background: #1f3f6f; color: #9bc4ff; }
:root[data-theme="dark"] .usb-key-status-label { color: #9bc4ff; }
:root[data-theme="dark"] #usbKeyStatus { color: #dbeafe; }
:root[data-theme="dark"] .usb-key-warning { border-color: #75541e; background: #2d2414; color: #ffe1a8; }
:root[data-theme="dark"] .usb-key-warning-icon { background: #4a3510; color: #ffd278; }
:root[data-theme="dark"] .usb-key-warning strong, :root[data-theme="dark"] .usb-key-warning b { color: #ffe1a8; }
:root[data-theme="dark"] .usb-key-warning p { color: #ebc97d; }
:root[data-theme="dark"] .usb-key-file-card, :root[data-theme="dark"] .backup-verification-file { border-color: #294b7d; background: #142640; color: #dbeafe; }

@media (prefers-reduced-motion: reduce) {
  #exportButton.backup-due { animation: none; }
  :root[data-home-background] body { transition: none; }
}

@media (max-width: 760px) {
  .app-shell { width: min(100% - 1rem, 1120px); padding-top: .65rem; }
  .app-header { align-items: flex-start; padding-bottom: 1rem; }
  .brand small { display: none; }
  .header-actions { gap: .35rem; }
  .theme-toggle { padding: .4rem .52rem; }
  .theme-toggle span:last-child { display: none; }
  .screen.narrow { margin: 1.5rem auto; }
  .vault-toolbar { margin-top: 1rem; }
  .toolbar-actions { width: 100%; justify-content: flex-start; }
  .toolbar-group { width: 100%; }
  .vault-session-actions { margin-left: 0; border-top: 1px solid #e1e4e8; padding-top: .45rem; }
  .toolbar-actions .button { flex: 1 1 auto; min-height: 2.75rem; }
  .vault-grid { display: flex; flex-direction: column; gap: .75rem; }
  .entries-panel, .entry-editor { width: 100%; }
  .entries-panel { order: -1; }
  .panel { padding: 1rem; }
  .entries-heading { align-items: flex-start; flex-direction: column; }
  .search-field { width: 100%; }
  .two-columns { grid-template-columns: 1fr; }
  .generator-row .button { flex: 1; }
  .entry-card { padding: .82rem; }
  .entry-actions { display: grid; grid-template-columns: repeat(3, 1fr); }
  .card-button { min-height: 2.75rem; }
  .card-button.copy-button { grid-column: 1 / -1; width: 100%; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .button { width: 100%; }
  .appearance-choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sync-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  :root[data-theme="dark"] .vault-session-actions { border-color: #2b3139; }
}