:root {

  color-scheme: light;

  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --ink: #13243a;

  --muted: #617085;

  --line: #dbe3ea;

  --surface: #ffffff;

  --background: #f3f6f8;

  --brand: #075985;

  --brand-dark: #06466a;

  --soft: #e8f4fa;

  --success: #167557;

  --warning: #a85d0b;

}



* { box-sizing: border-box; }

body { margin: 0; background: var(--background); color: var(--ink); }

a { color: var(--brand); }

button, input, select, textarea { font: inherit; }



.site-header {

  min-height: 4.5rem;

  padding: .75rem clamp(1rem, 3vw, 2.5rem);

  display: flex;

  align-items: center;

  gap: 1.5rem;

  background: var(--surface);

  border-bottom: 1px solid var(--line);

  position: sticky;

  top: 0;

  z-index: 10;

}

.brand { display: flex; align-items: center; gap: .7rem; color: var(--ink); text-decoration: none; }

.brand-mark {

  width: 2.35rem; height: 2.35rem; display: grid; place-items: center;

  background: transparent; color: white; border-radius: .7rem; font-weight: 800; overflow: hidden;

}

.brand-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }

.brand strong, .brand small { display: block; line-height: 1.15; }

.brand small { margin-top: .15rem; color: var(--muted); font-size: .72rem; }

.navigation-area { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.main-nav { display: flex; align-items: center; gap: .25rem; }

.main-nav a {

  padding: .65rem .8rem; border-radius: .55rem; color: var(--muted);

  text-decoration: none; font-weight: 650; white-space: nowrap;

}

.main-nav a:hover { color: var(--brand); background: #f2f7fa; }

.main-nav a.active {

  color: var(--brand-dark);

  background: var(--soft);

  box-shadow: inset 0 0 0 1px #cfe5ef;

}

.main-nav a.active:focus-visible {

  outline: 3px solid #0ea5e933;

  outline-offset: 2px;

}

.user-area { display: flex; align-items: center; gap: .75rem; padding-left: 1rem; border-left: 1px solid var(--line); }

.user-name { font-weight: 700; white-space: nowrap; }

.user-area form { margin: 0; }

.account-menu { position: relative; }

.account-menu summary {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 2.75rem;

  height: 2.75rem;

  padding: 0;

  border: 1px solid var(--line);

  border-radius: .6rem;

  cursor: pointer;

  list-style: none;

  user-select: none;

}

.account-menu summary::-webkit-details-marker { display: none; }

.account-menu summary:hover,

.account-menu[open] summary,

.account-menu.has-active summary {

  color: var(--brand-dark);

  background: #f2f7fa;

}

.account-menu.has-active summary { box-shadow: inset 0 0 0 1px #d6e8f0; }

.account-menu-icon {

  display: flex;

  align-items: center;

  gap: .18rem;

}

.account-menu-icon i {

  width: .28rem;

  height: .28rem;

  border-radius: 50%;

  background: currentColor;

}

.account-menu-panel {

  position: absolute;

  top: calc(100% + .45rem);

  right: 0;

  z-index: 30;

  display: grid;

  min-width: 15rem;

  padding: .45rem;

  border: 1px solid var(--line);

  border-radius: .75rem;

  background: var(--surface);

  box-shadow: 0 1rem 2.5rem #12243a24;

}

.account-menu-panel a {

  padding: .7rem .8rem;

  border-radius: .5rem;

  color: var(--ink);

  text-decoration: none;

  font-weight: 650;

  white-space: nowrap;

}

.account-menu-panel a:hover { color: var(--brand); background: #f2f7fa; }

.account-menu-panel a.active { color: var(--brand-dark); background: var(--soft); }

.visually-hidden {

  position: absolute;

  width: 1px;

  height: 1px;

  padding: 0;

  margin: -1px;

  overflow: hidden;

  clip: rect(0, 0, 0, 0);

  white-space: nowrap;

  border: 0;

}

.logout-button {

  width: auto; padding: .65rem .85rem; background: #eef2f5; color: var(--ink);

}



main { width: min(100% - 2rem, 78rem); margin: 2rem auto; }

.auth-shell {

  max-width: 44rem; padding: clamp(1.25rem, 4vw, 2.5rem);

  background: var(--surface); border-radius: 1rem; box-shadow: 0 14px 40px #12243a12;

}

.app-shell { min-height: calc(100vh - 10rem); }

.page-heading h1 { margin: 0 0 1.35rem; font-size: clamp(1.75rem, 4vw, 2.5rem); letter-spacing: -.035em; }

.lead { color: var(--muted); line-height: 1.55; margin-top: 0; }

.eyebrow { color: var(--brand); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }



form { display: grid; gap: 1rem; }

label, .field-label { display: grid; gap: .4rem; font-weight: 700; }

input, select, textarea, button, .button-link {

  width: 100%; border-radius: .65rem; border: 1px solid #aeb9c4;

  padding: .78rem .85rem; color: var(--ink); background: var(--surface);

}

textarea { resize: vertical; }

input:focus, select:focus, textarea:focus {

  outline: 3px solid #0ea5e933; border-color: var(--brand);

}

.readonly-field, input:read-only, input:disabled {

  background: #e8ebee;

  color: #52606d;

  cursor: not-allowed;

}

.field-disabled { color: #6b7785; }

.field-disabled select {

  background: #e8ebee;

  color: #6b7785;

  cursor: not-allowed;

}

button, .button-link {

  border: 0; background: var(--brand); color: white; font-weight: 800;

  cursor: pointer; text-align: center; text-decoration: none;

}

button:hover, .button-link:hover { background: var(--brand-dark); }

small { color: var(--muted); font-weight: 500; line-height: 1.4; }

fieldset {

  margin: .25rem 0; padding: 1.2rem; border: 1px solid var(--line);

  border-radius: .8rem; background: #fbfcfd;

}

legend { padding: 0 .5rem; font-weight: 800; }

.form-grid { display: grid; gap: 1rem; }

.two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.contract-fixed-end { grid-column: 2; }

.full { grid-column: 1 / -1; }

.checkbox-grid { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .45rem; }

.checkbox-label {

  display: flex; align-items: center; gap: .45rem; padding: .65rem .75rem;

  border: 1px solid var(--line); border-radius: .55rem; background: white; font-weight: 650;

}

.checkbox-label input { width: auto; margin: 0; }

.form-actions, .page-actions { display: flex; justify-content: space-between; align-items: center; gap: 1rem; }

.document-subnav { display: flex; gap: .5rem; margin: 0 0 1.25rem; flex-wrap: wrap; }

.document-subnav a { padding: .55rem .85rem; border: 1px solid var(--border, #dbe3ea); border-radius: .55rem; text-decoration: none; color: inherit; font-weight: 700; }

.document-subnav a.active { background: var(--surface-accent, #e7f4fa); border-color: var(--primary, #0a5f8f); color: var(--primary, #0a5f8f); }

.inline-form { display: inline; }

.form-actions > * { width: auto; min-width: 10rem; }

.security-overview {

  display: flex;

  flex-wrap: wrap;

  gap: .3rem 1.25rem;

  margin: -.65rem 0 1.15rem;

  color: var(--muted);

  font-size: .78rem;

  line-height: 1.35;

}

.security-overview div {

  display: inline-flex;

  flex-wrap: wrap;

  align-items: baseline;

  gap: .3rem;

}

.security-overview strong {

  color: #435466;

  font-size: .8rem;

  font-weight: 650;

}

.page-actions > div { flex: 1 1 auto; }

.page-actions .button-link {

  flex: 0 0 auto;

  width: auto;

  min-width: 15rem;

  padding-inline: 1.25rem;

}

.secondary-link { background: #e6ebef; color: var(--ink); }

.secondary-link:hover { background: #d9e0e6; }

.danger-zone {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 1rem;

  margin-top: 1.5rem;

  padding: 1rem;

  border: 1px solid #e1a3a3;

  border-radius: .85rem;

  background: #fff5f5;

}

.danger-zone h2, .danger-zone p { margin: 0; }

.danger-zone p { margin-top: .35rem; color: var(--muted); }

.danger-zone form { margin: 0; }

.danger-button { width: auto; white-space: nowrap; background: #a51d2d; }

.danger-button:hover { background: #801522; }

.form-link { margin: 1.2rem 0 0; text-align: center; }

.login-steps {

  margin: 0 0 1.35rem;

  padding: 1rem 1rem 1rem 2.6rem;

  border-radius: .75rem;

  background: var(--soft);

  color: var(--muted);

  line-height: 1.5;

}

.login-steps li + li { margin-top: .3rem; }

.login-help-links {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  gap: .65rem 1.4rem;

  margin-top: 1.3rem;

}



.notice {

  padding: .9rem 1rem; border-radius: .65rem; background: var(--soft);

  border-left: .25rem solid var(--brand); line-height: 1.45;

}

.save-toast {

  position: fixed;

  z-index: 100;

  top: 1rem;

  right: 1rem;

  display: flex;

  align-items: flex-start;

  gap: .7rem;

  width: min(24rem, calc(100vw - 2rem));

  padding: .9rem 1rem;

  border: 1px solid #9bd4bb;

  border-radius: .75rem;

  background: #f2fbf6;

  box-shadow: 0 .7rem 1.8rem #13243a26;

  color: #155f45;

  transition: opacity .35s ease, transform .35s ease;

}

.save-toast > span { display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: #167557; color: #fff; font-weight: 900; }

.save-toast div { display: grid; gap: .12rem; }

.save-toast small { color: #39705a; line-height: 1.35; }

.save-toast.is-hiding { opacity: 0; transform: translateY(-.6rem); }

.card-highlight { animation: card-highlight 4.2s ease-out both; scroll-margin-top: 6rem; }

@keyframes card-highlight {

  0%, 55% { outline: .22rem solid #eaa83c; outline-offset: .28rem; box-shadow: 0 0 0 .5rem #ffe5ac88, 0 .7rem 1.8rem #13243a18; }

  100% { outline-color: transparent; outline-offset: .08rem; box-shadow: 0 .3rem .9rem #13243a0d; }

}

.timeline-entry-link { display: grid; gap: .22rem; color: inherit; text-decoration: none; border-radius: .45rem; }

.timeline-entry-link:hover, .timeline-entry-link:focus-visible { color: var(--brand-dark); text-decoration: none; outline: 2px solid #8fc7df; outline-offset: .3rem; }

.otp-timer {

  padding: .85rem 1rem;

  border-radius: .65rem;

  background: #fff4df;

  color: #713d00;

  font-variant-numeric: tabular-nums;

}

.otp-timer strong { font-size: 1.15em; }

.otp-timer.expired { background: #eef0f2; color: #596574; }

.filters {

  margin: 1.25rem 0; padding: 1rem; grid-template-columns: minmax(14rem, 2fr) minmax(11rem, 1fr) auto;

  align-items: end; background: var(--surface); border: 1px solid var(--line); border-radius: .85rem;

}

.filters button { width: 11.5rem; min-width: 11.5rem; }

.clear-filter {

  background: #ffd9a8;

  color: #713d00;

}

.clear-filter:hover { background: #ffc77c; }

.search-hint { margin: -.5rem 0 1rem; color: var(--muted); font-size: .86rem; }

.provider-search {

  margin: 1.25rem 0;

  padding: 1rem;

  background: var(--surface);

  border: 1px solid var(--line);

  border-radius: .85rem;

}

.provider-search .search-hint { margin: .55rem 0 0; }

mark {

  padding: .05em .16em;

  border-radius: .2rem;

  background: #ffd9a8;

  color: inherit;

}

.contract-grid, .card-grid {

  display: grid; grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); gap: 1rem;

}

.contract-card, .data-card {

  padding: 1.15rem; background: var(--surface); border: 1px solid var(--line);

  border-radius: .9rem; box-shadow: 0 5px 16px #12243a08;

}

.contract-card {

  display: flex;

  flex-direction: column;

  height: 100%;

}

.contract-card-actions {

  margin-top: auto;

  padding-top: .45rem;

}

.document-card-actions { display: flex; align-items: center; gap: .55rem; margin-top: auto; padding-top: .8rem; }

.document-card-actions .download-button { margin-right: auto; }

.icon-action { display: inline-grid; place-items: center; width: 3.1rem; height: 3.1rem; padding: 0; border: 2px solid #60788b; border-radius: .55rem; background: #fff; color: var(--brand, #005a93); font-weight: 800; font-size: 1.35rem; line-height: 1; text-decoration: none; cursor: pointer; }

.icon-action:hover, .icon-action:focus-visible { border-color: var(--brand, #005a93); background: var(--surface-accent, #e7f4fa); }

.delete-icon { color: #b42318; }

.card-title-row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }

.manual-badge, .server-badge {

  display: inline-flex;

  padding: .25rem .5rem;

  border-radius: 999px;

  font-size: .72rem;

  font-weight: 800;

  white-space: nowrap;

}

.manual-badge { background: #ffd9a8; color: #713d00; }

.server-badge { background: var(--soft); color: var(--brand); }

.form-section {

  margin: .25rem 0;

  padding: 0;

  border: 1px solid var(--line);

  border-radius: .8rem;

  background: #fbfcfd;

}

.form-section summary {

  padding: 1rem 1.2rem;

  cursor: pointer;

  font-weight: 800;

}

.form-section[open] summary { border-bottom: 1px solid var(--line); }

.form-section > .form-grid { padding: 1.2rem; }

.contract-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; }

.contract-card h2, .data-card h2 { margin: .2rem 0 .8rem; font-size: 1.15rem; }

.contract-card h3 { margin: 1rem 0 .45rem; font-size: .95rem; }

.status {

  display: inline-flex; padding: .3rem .55rem; border-radius: 999px;

  background: var(--soft); color: var(--brand); font-size: .78rem; font-weight: 800;

}

.status-cancelled, .status-expired { background: #eef0f2; color: #596574; }

.status-paused { background: #fff4df; color: var(--warning); }

.detail-line {

  display: grid; grid-template-columns: minmax(7.5rem, .8fr) 1.2fr;

  gap: .75rem; margin: .55rem 0; line-height: 1.35;

}

.detail-line span { color: var(--muted); font-size: .86rem; }

.detail-line strong { font-size: .9rem; text-align: right; overflow-wrap: anywhere; }

.file-preview-link { color: var(--brand, #005a93); text-decoration: underline; text-underline-offset: .16em; }

.file-preview-link:hover { color: #003f69; }

.edit-file-list { border: 1px solid #b4c4cf; border-radius: .7rem; overflow: hidden; }

.edit-file-row { display: flex; align-items: center; gap: .75rem; padding: .65rem .75rem; border-bottom: 1px solid #d7e0e6; }

.edit-file-row:last-child { border-bottom: 0; }

.file-row-name { min-width: 0; overflow-wrap: anywhere; }

.file-row-actions { display: flex; align-items: center; gap: .45rem; margin-left: auto; flex: 0 0 auto; }

.compact-icon { width: 2.55rem; height: 2.55rem; font-size: 1.15rem; }

.add-files-panel { margin-top: 1.25rem; }

.add-files-panel > p, .add-files-panel > form { margin-top: 1rem; }

.contract-facts { display: contents; }

.document-list {

  margin: .45rem 0 1rem;

  padding: 0;

  list-style: none;

}

.contract-card .document-list { max-height: 9.6rem; overflow-y: auto; padding-right: .35rem; }

.card-files {

  margin: .7rem 0 1rem;

  border: 1px solid #c8d8e2;

  border-radius: .7rem;

  background: #f8fbfd;

  overflow: hidden;

}

.card-files summary {

  display: flex;

  align-items: center;

  gap: .55rem;

  padding: .7rem .8rem;

  cursor: pointer;

  color: var(--brand-dark);

}

.card-files summary::marker { color: var(--brand); }

.card-files summary span { display: grid; gap: .08rem; }

.card-files summary strong { font-size: .92rem; }

.card-files summary small { color: var(--muted); font-size: .76rem; }

.card-files[open] summary { border-bottom: 1px solid #c8d8e2; background: #eef7fb; }

.contract-card .card-files .document-list {

  max-height: 10.4rem;

  margin: 0;

  padding: .35rem .55rem;

  overflow-x: hidden;

}

.card-file-row {

  display: flex;

  align-items: center;

  gap: .45rem;

  min-width: 0;

  padding: .45rem .2rem;

  border-bottom: 1px solid #dce6ec;

}

.card-file-row:last-child { border-bottom: 0; }

.card-file-icon { flex: 0 0 auto; color: var(--brand); font-size: 1rem; }

.card-file-name {

  min-width: 0;

  flex: 1 1 auto;

  overflow-wrap: anywhere;

  word-break: break-word;

  line-height: 1.3;

}

.card-file-download {

  display: grid;

  flex: 0 0 auto;

  place-items: center;

  width: 2rem;

  height: 2rem;

  border: 1px solid #8aa1b3;

  border-radius: .45rem;

  color: var(--brand);

  font-weight: 800;

  text-decoration: none;

}

.card-file-download:hover, .card-file-download:focus-visible { background: #e7f4fa; border-color: var(--brand); }

.document-item { display: block; margin: .55rem 0; }

.document-link-row {

  display: flex;

  align-items: center;

  gap: .55rem;

  min-width: 0;

}

button.document-preview-button {

  flex: 1 1 auto;

  min-width: 0;

  width: auto;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 0;

  background: transparent;

  color: var(--brand);

  font: inherit;

  font-weight: 650;

  text-align: left;

  text-decoration: underline;

  overflow-wrap: anywhere;

}

button.document-preview-button:hover {

  background: transparent;

  color: var(--brand-dark);

}

form.document-delete-form {

  display: block;

  flex: 0 0 auto;

  width: auto;

  margin: 0 0 0 auto;

}

button.document-delete-button {

  display: inline-grid;

  place-items: center;

  width: 1.55rem;

  min-width: 1.55rem;

  height: 1.55rem;

  margin: 0;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: #c62828;

  color: #fff;

  font-size: .95rem;

  font-weight: 900;

  line-height: 1;

}

button.document-delete-button:hover {

  background: #991b1b;

  color: #fff;

}

button.document-delete-button:focus-visible {

  outline: 3px solid #ef444466;

  outline-offset: 2px;

}

.document-preview-dialog {

  width: min(95vw, 1920px);

  height: 95dvh;

  max-width: 1920px;

  max-height: 95dvh;

  padding: 0;

  border: 0;

  border-radius: 1rem;

  overflow: hidden;

  background: #fff;

  box-shadow: 0 1.5rem 4rem #0f274266;

}

.document-preview-dialog[open] {

  display: grid;

  grid-template-rows: auto minmax(0, 1fr);

}

.document-preview-dialog::backdrop { background: #10263a99; }

.document-preview-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  min-width: 0;

  padding: .75rem 1rem;

  border-bottom: 1px solid var(--line);

  background: #fff;

}

.document-preview-header h2 {

  min-width: 0;

  margin: 0;

  overflow: hidden;

  font-size: 1rem;

  text-overflow: ellipsis;

  white-space: nowrap;

}

.document-preview-actions {

  display: flex;

  align-items: center;

  gap: .45rem;

  flex: 0 0 auto;

}

.document-download-button,

.document-preview-header .dialog-close {

  display: inline-grid;

  place-items: center;

  width: 2.35rem;

  min-width: 2.35rem;

  height: 2.35rem;

  padding: 0;

  border: 1px solid var(--line);

  border-radius: .65rem;

  background: var(--soft);

  color: var(--brand);

  font-size: 1.15rem;

  font-weight: 800;

  line-height: 1;

  text-decoration: none;

}

.document-preview-content {

  display: grid;

  place-items: center;

  width: 100%;

  height: 100%;

  min-width: 0;

  min-height: 0;

  box-sizing: border-box;

  overflow: hidden;

  background: #20252b;

}

.document-preview-content > [hidden] { display: none; }

.document-preview-dialog.is-image .document-preview-content { padding: 1rem; }

.document-preview-content img {

  display: block;

  width: 100%;

  height: 100%;

  max-width: 100%;

  max-height: 100%;

  min-width: 0;

  min-height: 0;

  object-fit: contain;

  object-position: center;

}

.document-preview-content iframe {

  display: block;

  width: 100%;

  height: 100%;

  min-width: 0;

  min-height: 0;

  border: 0;

  background: #fff;

}

.document-meta {

  margin: .12rem 2.1rem 0 0;

  color: var(--muted);

  font-size: .8rem;

}

.document-panel {

  margin-top: 1rem;

  padding-top: .8rem;

  border-top: 1px solid var(--line);

}

.document-panel summary {

  color: var(--ink);

  font-weight: 800;

  cursor: pointer;

}

.muted { color: var(--muted); }

.upload-panel { margin-top: .7rem; padding-top: 0; }

.upload-panel summary { color: var(--brand); font-weight: 750; cursor: pointer; }

.upload-panel form { margin-top: .85rem; }

.card-links { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1rem; }

.text-link { font-weight: 700; }

.cancellation-open-button {

  display: block;

  width: fit-content;

  margin-top: .65rem;

  padding: 0;

  border-radius: 0;

  background: transparent;

  color: #9a3412;

  font-weight: 750;

  text-align: left;

  text-decoration: underline;

}

.cancellation-open-button:hover { background: transparent; color: #7c2d12; }

.contract-card-has-cancellation {

  border-color: #f2a348;

  box-shadow: 0 0 0 3px #fff1dc, 0 .7rem 1.5rem #7c2d1214;

}

.contract-cancellation-state {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .45rem;

  margin-top: .75rem;

  padding: .65rem .75rem;

  border: 1px solid #f2a348;

  border-radius: .7rem;

  background: #fff7eb;

}

.cancellation-alert-label { color: #8a310d; font-weight: 800; }

.contract-cancellation-state .text-link { color: #9a3412; font-weight: 800; }

.cancellation-dialog-overlay {

  position: fixed;

  inset: 0;

  z-index: 1000;

  display: none;

  align-items: center;

  justify-content: center;

  padding: 2.5vh;

  background: #10283bbb;

}

.cancellation-dialog-overlay:target { display: flex; }

.cancellation-dialog {

  width: min(95vw, 72rem);

  max-height: 95vh;

  padding: 0;

  overflow: hidden;

  border: 0;

  border-radius: 1rem;

  background: white;

  box-shadow: 0 1.5rem 4rem #0f253855;

}

.cancellation-form {

  max-height: 95vh;

  padding: 1.25rem;

  overflow: auto;

}

.dialog-form-header {

  position: sticky;

  top: -1.25rem;

  z-index: 2;

  display: flex;

  justify-content: space-between;

  align-items: flex-start;

  gap: 1rem;

  margin: -1.25rem -1.25rem 1rem;

  padding: 1.15rem 1.25rem;

  border-bottom: 1px solid var(--line);

  background: white;

}

.dialog-form-header h2 { margin: .15rem 0 0; }

.dialog-close {

  display: grid;

  place-items: center;

  flex: 0 0 auto;

  width: 2rem;

  height: 2rem;

  padding: 0;

  border-radius: .55rem;

  background: #eef1f4;

  color: #1b2a3a;

  font-size: 1.3rem;

  text-decoration: none;

}

.cancellation-email-field input:required:invalid {

  border-color: #c62828;

  box-shadow: 0 0 0 2px #c6282820;

}

.recipient-address-preview {

  align-self: stretch;

  padding: .8rem 1rem;

  border: 1px solid var(--line);

  border-radius: .65rem;

  background: #f7fafc;

}

.recipient-address-preview span,

.recipient-address-preview strong { display: block; }

.recipient-address-preview span {

  margin-bottom: .3rem;

  color: var(--muted);

  font-size: .82rem;

}

.recipient-address-preview strong {

  white-space: normal;

  line-height: 1.45;

}

.cancellation-address-grid {

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 1rem;

  align-items: stretch;

}

.cancellation-address-grid > * { margin: 0; }

.cancellation-address-grid textarea {

  min-height: 6.2rem;

  height: 100%;

}

.cancellation-detail {

  padding: clamp(1.1rem, 2.5vw, 1.75rem);

  border: 1px solid var(--line);

  border-radius: 1rem;

  background: var(--surface);

  box-shadow: 0 .75rem 2rem #12243a0d;

}

.cancellation-detail .contract-heading {

  margin-bottom: 1.25rem;

  padding-bottom: 1rem;

  border-bottom: 1px solid var(--line);

}

.cancellation-detail .contract-heading h2 {

  margin: .25rem 0 0;

  font-size: clamp(1.35rem, 3vw, 1.8rem);

}

.cancellation-detail > .detail-line {

  max-width: 52rem;

}

.letter-preview {

  margin-top: 1.35rem;

  padding: clamp(1rem, 2.5vw, 1.5rem);

  border: 1px solid var(--line);

  border-radius: .85rem;

  background: #fbfcfd;

}

.letter-preview h3 { margin: 0 0 1rem; font-size: 1.15rem; }

.letter-preview p {

  margin: 0;

  line-height: 1.65;

  overflow-wrap: anywhere;

}

.cancellation-edit-panel {

  margin-top: 1rem;

  border: 1px solid var(--line);

  border-radius: .8rem;

  background: #fbfcfd;

}

.cancellation-edit-panel summary {

  padding: .9rem 1rem;

  color: var(--brand);

  font-weight: 800;

  cursor: pointer;

}

.cancellation-edit-form {

  padding: 0 1rem 1rem;

  border-top: 1px solid var(--line);

}

.cancellation-edit-form .form-grid {

  grid-template-columns: repeat(2, minmax(0, 1fr));

}

.method-support-note {

  display: block;

  margin-top: .35rem;

  color: var(--muted);

  font-size: .84rem;

  line-height: 1.35;

}

.input-needs-value {

  border-color: #c62828 !important;

  box-shadow: 0 0 0 2px rgba(198, 40, 40, .12);

}

.cancellation-controls {

  margin-top: 1.25rem;

  padding: 1rem;

  border: 1px solid var(--line);

  border-radius: .85rem;

  background: var(--soft);

}

.cancellation-controls h3 { margin: 0 0 .85rem; }

.cancellation-status-form {

  display: contents;

}

.cancellation-status-form button { width: auto; }

.cancellation-primary-actions {

  display: grid;

  grid-template-columns: minmax(15rem, 22rem) minmax(11rem, 1fr) auto auto;

  align-items: end;

  gap: .65rem;

}

.cancellation-primary-actions > .button-link {

  width: auto;

  padding-inline: 1rem;

}

.cancellation-secondary-actions {

  display: flex;

  flex-wrap: wrap;

  align-items: center;

  gap: .65rem;

  margin-top: 1rem;

  padding-top: 1rem;

  border-top: 1px solid var(--line);

}

.cancellation-secondary-actions > .button-link { width: auto; }

.cancellation-withdraw-form {

  display: inline-block;

  margin: 0;

  padding: 0;

  border: 0;

}

.cancellation-withdraw-form .danger-button { width: auto; }

.withdrawn-note {

  margin: 1rem 0 0;

  padding: .75rem 1rem;

  border-radius: .65rem;

  background: #f3f4f6;

  color: var(--muted);

}

.secondary-button { background: #e8eef2; color: var(--ink); }

.passkey-settings { padding: 1.5rem; margin-bottom: 1.5rem; border-radius: 1rem; background: #fff; }

.passkey-settings .document-list li { padding: .75rem 0; border-bottom: 1px solid #dbe3ea; overflow-wrap: anywhere; }

.passkey-settings [data-passkey-revoke] { display: inline-block; width: auto; margin: .5rem; }

.passkey-settings [data-passkey-register] { margin-top: .75rem; }

.secondary-button:hover { background: #d7e2e8; }

.empty, .empty-state { padding: 2.5rem; text-align: center; color: var(--muted); }

.empty-state {

  grid-column: 1 / -1; background: var(--surface); border: 1px dashed #abb8c3; border-radius: .9rem;

}

.empty-state h2 { color: var(--ink); }



.timeline { list-style: none; margin: 1rem 0; padding: 0; }

.timeline-item {

  display: grid; grid-template-columns: 1rem 1fr; gap: .75rem;

  padding: .9rem 0; border-bottom: 1px solid var(--line);

}

.timeline-dot { width: .65rem; height: .65rem; margin-top: .3rem; border-radius: 50%; background: var(--brand); }

.timeline-item strong, .timeline-item time { display: block; }

.timeline-item time { margin-top: .2rem; color: var(--muted); font-size: .86rem; }

.timeline-link-unavailable {

  display: block;

  color: #64748b;

  font-size: .92rem;

  cursor: not-allowed;

}

.trash-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1rem;

  margin-bottom: 1rem;

}

.trash-heading .lead { margin: 0; }

.trash-empty-form { margin: 0; }

.trash-empty-form .danger-button { min-width: 11rem; }

.update-history {

  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-bottom: 1.2rem;

}

.update-history div {

  padding: 1rem; background: var(--soft); border-radius: .7rem;

}

.update-history span, .update-history strong { display: block; }

.update-history span { color: var(--muted); font-size: .84rem; margin-bottom: .25rem; }

.backup-restore {

  margin-top: 1.5rem;

  padding-top: 1.5rem;

  border-top: 1px solid var(--line);

}

.backup-restore h3 { margin: 0 0 .45rem; }

.backup-restore .danger-button { margin-top: .75rem; }



footer { padding: 1.5rem; color: var(--muted); text-align: center; font-size: .8rem; }



@media (max-width: 900px) {

  .site-header { align-items: flex-start; flex-wrap: wrap; gap: .7rem; }

  .navigation-area { order: 3; width: 100%; margin: 0; padding-top: .25rem; }

  .main-nav { min-width: 0; flex: 1 1 auto; overflow-x: auto; }

  .user-area { margin-left: auto; }

}



@media (max-width: 700px) {

  main { width: min(100% - 1rem, 78rem); margin: 1rem auto; }

  .auth-shell { border-radius: .75rem; }

  .brand strong { font-size: .92rem; }

  .brand small { display: none; }

  .user-name { max-width: 9rem; overflow: hidden; text-overflow: ellipsis; }

  .account-menu-panel { width: min(15rem, calc(100vw - 1.5rem)); min-width: 0; }

  .two-columns, .filters, .update-history { grid-template-columns: 1fr; }

  .contract-fixed-end { grid-column: auto; }

  .full { grid-column: auto; }

  .filters button, .form-actions > * { width: 100%; }

  .form-actions, .page-actions, .danger-zone { align-items: stretch; flex-direction: column; }

  .page-actions .button-link { width: 100%; }
  body:has(.mobile-warranty-toolbar) { padding-bottom: calc(4.6rem + env(safe-area-inset-bottom)); }
  .mobile-warranty-toolbar { position: fixed; inset-inline: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: .45rem; padding: .55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: var(--surface); box-shadow: 0 -.25rem 1rem rgb(0 0 0 / .16); }
  .mobile-warranty-toolbar a { display: flex; align-items: center; justify-content: center; gap: .3rem; min-height: 2.75rem; padding: .45rem .35rem; border: 1px solid var(--line); border-radius: .55rem; color: var(--ink); background: var(--background); text-decoration: none; font-size: .84rem; font-weight: 700; white-space: nowrap; }
  .mobile-warranty-toolbar .mobile-warranty-add { color: #fff; background: var(--brand-dark); border-color: var(--brand-dark); }
  .mobile-warranty-toolbar a span { font-size: 1.1rem; line-height: 1; }
  .warranty-edit-footer { position: sticky; bottom: calc(.35rem + env(safe-area-inset-bottom)); justify-content: stretch; gap: .4rem; padding: .45rem; }
  .warranty-edit-footer > * { flex: 0 1 auto; padding: .55rem .65rem; font-size: .88rem; white-space: nowrap; }
  .warranty-edit-footer > button[type="submit"][form^="warranty-edit-form-"] { flex: 1 1 auto; min-width: 0; }

  .trash-heading { align-items: stretch; flex-direction: column; }

  .trash-empty-form .danger-button { width: 100%; }

  .security-overview {

    display: grid;

    gap: .25rem;

    margin-top: -.5rem;

  }

  .contract-grid, .card-grid { grid-template-columns: 1fr; }

  .cancellation-dialog {

    width: 98vw;

    max-width: 98vw;

    max-height: 98vh;

  }

  .cancellation-dialog-overlay { padding: 1vh; }

  .cancellation-form { max-height: 98vh; padding: .85rem; }

  .cancellation-address-grid { grid-template-columns: 1fr; }

  .dialog-form-header {

    top: -.85rem;

    margin: -.85rem -.85rem 1rem;

    padding: .9rem;

  }

  .cancellation-detail { padding: 1rem; }

  .cancellation-edit-form .form-grid { grid-template-columns: 1fr; }

  .cancellation-primary-actions {

    display: flex;

    flex-wrap: wrap;

    align-items: stretch;

  }

  .cancellation-status-form {

    display: grid;

    grid-template-columns: 1fr;

    flex-basis: 100%;

  }

  .cancellation-status-form button,

  .cancellation-withdraw-form .danger-button { width: 100%; }

  .cancellation-primary-actions > .button-link { flex: 1 1 auto; }

  .cancellation-secondary-actions > * { flex: 1 1 auto; }

  .cancellation-secondary-actions .button-link,

  .cancellation-secondary-actions .danger-button { width: 100%; }

  .detail-line { grid-template-columns: 1fr; gap: .15rem; }

  .detail-line strong { text-align: left; }
  .warranty-card { padding: .75rem; }
  .warranty-card .contract-heading { gap: .45rem; margin-bottom: .2rem; }
  .warranty-card .contract-heading h2 { margin: .1rem 0 .45rem; }
  .warranty-card > .detail-line { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); align-items: baseline; gap: .45rem; margin: .28rem 0; }
  .warranty-card > .detail-line span { font-size: .78rem; line-height: 1.2; }
  .warranty-card > .detail-line strong { text-align: right; font-size: .84rem; line-height: 1.25; }

  .contract-facts {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: .9rem 1rem;

    margin: .35rem 0 .8rem;

  }

  .contract-facts .detail-line {

    min-width: 0;

    margin: 0;

  }

  .contract-facts .detail-line span {

    display: block;

    margin-bottom: .12rem;

    line-height: 1.25;

  }

  .contract-facts .detail-line strong {

    display: block;

    line-height: 1.3;

  }

  .contract-fact-category { order: 0; grid-column: 1 / -1; }

  .contract-fact-date { order: 1; }

  .contract-fact-reminder { order: 2; }

  .contract-fact-amount { order: 3; }

  .contract-fact-interval { order: 4; }

  .contract-fact-annual { order: 5; grid-column: 1 / -1; }

  .document-preview-dialog {

    width: 98vw;

    height: 98dvh;

    max-width: 98vw;

    max-height: 98dvh;

    border-radius: .75rem;

  }

  .document-preview-dialog.is-image .document-preview-content { padding: .5rem; }

  .document-preview-header { padding: .55rem .65rem; }

}



@media (max-width: 440px) {

  .site-header { padding: .65rem .75rem; }

  .brand-mark { width: 2rem; height: 2rem; }

  .user-area { width: 100%; border-left: 0; padding: .4rem 0 0; justify-content: flex-start; }

  .account-menu { min-width: 0; }

  .account-menu-panel {

    right: 0;

    left: auto;

    width: min(15rem, calc(100vw - 1.5rem));

  }

  .main-nav a { padding: .55rem .65rem; font-size: .9rem; }

  fieldset { padding: .9rem; }

  .checkbox-grid { display: grid; grid-template-columns: 1fr; }

}



.warranty-card[hidden] { display: none; }

.warranty-documents .document-list { list-style: none; padding: 0; margin: 1rem 0; }

.warranty-documents .document-list li { display: flex; align-items: center; gap: .75rem; padding: .7rem 0; border-bottom: 1px solid var(--border, #dbe3ea); }

.warranty-documents .document-list li a { flex: 1; overflow-wrap: anywhere; }

.warranty-documents .document-list form { margin-left: auto; }

.inline-upload { display: flex; align-items: end; gap: .75rem; flex-wrap: wrap; }

.inline-upload label { flex: 1 1 18rem; }

.full-width { grid-column: 1 / -1; }



@media (max-width: 680px) {

  .warranty-filters { grid-template-columns: 1fr; }

  .warranty-documents .document-list li { align-items: flex-start; flex-wrap: wrap; }

  .warranty-documents .document-list li span { order: 3; width: 100%; }

  .inline-upload, .inline-upload button { width: 100%; }

}



/* Compact account layout: scoped to the account form and its page. */

body:has(.account-form) {

  background: radial-gradient(ellipse at top left, #e5f2fa 0, transparent 55%),

              linear-gradient(135deg, #f5f9fc, #edf5f2);

}

.app-shell:has(.account-form) { margin-block: 1.15rem; }

.app-shell:has(.account-form) .page-heading h1 { margin-bottom: .85rem; font-size: 1.8rem; }

.account-form { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem; align-items: start; }

.account-section, .account-confirmation {

  min-width: 0; padding: 1rem; border: 1px solid #d6e2eb;

  border-radius: .85rem; background: #fff;

  box-shadow: 0 3px 12px #16334c06;

}

.account-section { border-top: 3px solid #8ebacf; }

.account-section:has([name="username"]) { border-top-color: #9eaedb; }

.account-section:has([name="sender_address"]) { border-top-color: #8cbfac; }

.account-section:has([name="new_password"]) { border-top-color: #c0abd6; }

.account-section-heading { margin-bottom: .75rem; }

.account-section-heading .eyebrow { margin: 0 0 .2rem; font-size: .68rem; }

.account-section-heading h2 { margin: 0; font-size: 1.1rem; line-height: 1.3; }

.account-section-heading > p { margin: .35rem 0 0; color: #526579; font-size: .83rem; line-height: 1.4; }

.account-form label { gap: .3rem; font-size: .86rem; min-width: 0; }

.account-form .form-grid { gap: .65rem; }

.account-form input, .account-form textarea { min-width: 0; padding: .4rem .65rem; font-size: 1rem; }

.account-form textarea { height: 5.2rem; min-height: 4rem; }

.account-form .readonly-field { background: #f2f6f9; border-color: #dce5ec; }

.account-form small { font-size: .76rem; }

.account-confirmation {

  grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto;

  align-items: center; gap: 1rem; background: #eef6fb; border-color: #c7dfeD;

}

.account-confirmation label { max-width: 30rem; }

.account-confirmation button { width: auto; min-height: 44px; padding: .65rem 1.25rem; }

.app-shell:has(.account-form) .update-history { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: .65rem 0; }

.app-shell:has(.account-form) .update-history div { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; background: none; font-size: .76rem; }

.app-shell:has(.account-form) .update-history span { margin: 0; font-size: inherit; }

.app-shell:has(.account-form) .settings-section {

  padding: .9rem 1rem; margin-bottom: .65rem; border: 1px solid #bfd9e8;

  border-left: 4px solid #247ba3; border-radius: .85rem; background: #f8fcff;

}

.app-shell:has(.account-form) .settings-section h2 { margin: 0 0 .35rem; font-size: 1.1rem; }

.app-shell:has(.account-form) .settings-section p { margin: .4rem 0; font-size: .83rem; line-height: 1.4; color: #526579; }

.app-shell:has(.account-form) .passkey-settings { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .35rem .8rem; align-items: end; }

.app-shell:has(.account-form) .passkey-settings > * { grid-column: 1 / -1; }

.app-shell:has(.account-form) .passkey-settings > label { grid-column: 1; font-size: .86rem; max-width: 32rem; }

.app-shell:has(.account-form) .passkey-settings input { padding: .4rem .65rem; }

.app-shell:has(.account-form) .passkey-settings [data-passkey-register] { grid-column: 2; margin: 0; width: auto; min-height: 44px; padding: .6rem 1rem; }

.app-shell:has(.account-form) .passkey-settings .document-list { margin: 0; padding-left: 1.2rem; }

.app-shell:has(.account-form) .passkey-settings .document-list li { padding: .3rem 0; font-size: .83rem; }

.app-shell:has(.account-form) [data-passkey-status]:empty { display: none; }

@media (max-width: 760px) {

  .account-form { grid-template-columns: minmax(0, 1fr); }

  .account-confirmation { grid-template-columns: minmax(0, 1fr); gap: .75rem; }

  .account-confirmation label { max-width: none; }

  .account-confirmation button { width: 100%; }

  .account-form .two-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}

@media (max-width: 480px) {

  .account-section, .account-confirmation { padding: .8rem; }

  .account-form .two-columns { grid-template-columns: minmax(0, 1fr); }

  .app-shell:has(.account-form) .passkey-settings { grid-template-columns: minmax(0, 1fr); }

  .app-shell:has(.account-form) .passkey-settings > label,

  .app-shell:has(.account-form) .passkey-settings [data-passkey-register] { grid-column: 1; max-width: none; width: 100%; }

}





/* Contract file management stays outside the card layout. */

.contract-file-actions { border-top: 1px solid var(--line); margin-top: .85rem; padding-top: .55rem; display: grid; gap: .25rem; }

button.contract-files-open { display: block; width: fit-content; background: transparent; color: var(--primary, #075781); border: 0; padding: .2rem 0; text-align: left; border-radius: .2rem; font-weight: 600; }

button.contract-files-open:hover { background: transparent; text-decoration: underline; }

.contract-files-dialog { width: min(640px, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface, white); color: var(--text, #10263a); box-shadow: 0 20px 70px #10263a40; overflow: auto; }

.contract-files-dialog::backdrop { background: #10263a80; }

.contract-files-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; padding: 1.2rem; border-bottom: 1px solid var(--line); }

.contract-files-header h2 { margin: .2rem 0 0; overflow-wrap: anywhere; }

.contract-files-header .dialog-close { flex-shrink: 0; }

.contract-files-body { padding: 0 1.2rem 1.2rem; }

.contract-card .contract-files-dialog .document-list { max-height: none; overflow: visible; }

.contract-files-upload { border-top: 1px solid var(--line); margin-top: 1rem; }

.contract-files-dialog input[type=file] { max-width: 100%; min-width: 0; }

html:has(.contract-files-dialog) { scrollbar-gutter: stable; }

html:has(.contract-files-dialog[open]) { overflow: hidden; }

@media(max-width: 600px) { .contract-files-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); } .contract-files-header { padding: 1rem; } .contract-files-body { padding: 0 1rem 1rem; } }



.existing-contract-files { margin-top: 1rem; padding: .7rem .85rem; background: #f1f6f9; border-radius: .6rem; }

.existing-contract-files summary { cursor: pointer; font-weight: 600; }

.existing-contract-files ul { list-style: none; padding: 0; margin: .5rem 0 0; max-height: 10rem; overflow: auto; }

.existing-contract-files li { display: grid; gap: .1rem; margin: .4rem 0; overflow-wrap: anywhere; }

.existing-contract-files small { color: var(--muted); }

.upload-file-status { padding-left: 1.2rem; overflow-wrap: anywhere; font-size: .9rem; }

.upload-file-status:empty { display: none; }

.upload-file-status .is-duplicate { color: #a34200; }



/* Browser appearance preferences; applied before page rendering. */

:root[data-font-size="100"] { font-size: 100%; }

:root[data-font-size="112.5"] { font-size: 112.5%; }

:root[data-font-size="125"] { font-size: 125%; }

:root[data-font-size="150"] { font-size: 150%; }

button.appearance-open { width: auto; padding: .65rem .8rem; color: var(--ink); background: var(--soft); text-align: left; }

.account-menu-panel button.appearance-open { width: 100%; }

.account-menu-panel button.pwa-install-button { width: 100%; padding: .7rem .8rem; border: 1px solid var(--line); border-radius: .5rem; background: var(--soft); color: var(--ink); text-align: left; font-weight: 650; }

.account-menu-panel button.pwa-install-button:hover, .account-menu-panel button.pwa-install-button:focus-visible { background: var(--surface-accent, #e7f4fa); color: var(--brand); }

.appearance-dialog { width: min(32rem, calc(100vw - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; overflow: auto; border: 1px solid var(--line); border-radius: 1rem; background: var(--surface); color: var(--ink); }

.appearance-dialog::backdrop { background: #10263a99; }

.appearance-header { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); }

.appearance-header h2 { margin: 0; font-size: 1.2rem; }

.appearance-header .dialog-close { flex-shrink: 0; }

.appearance-body { display: grid; gap: 1rem; padding: 1.2rem; }

.appearance-body p { margin: 0; }

.appearance-sample { padding: 1rem; background: var(--soft); border-radius: .65rem; overflow-wrap: anywhere; }

.appearance-sample p { margin-top: .4rem; }

html:has(.appearance-dialog) { scrollbar-gutter: stable; }

html:has(.appearance-dialog[open]) { overflow: hidden; }

:root[data-theme="dark"] {

  color-scheme: dark;

  --ink: #e5edf5; --text: #e5edf5; --muted: #afbed0; --line: #405269;

  --surface: #192638; --background: #101923; --brand: #8bd3ff; --brand-dark: #b6e4ff;

  --soft: #253b50; --success: #79dcb1; --warning: #ffc580;

  --primary: #8bd3ff; --border: #405269; --surface-accent: #253b50;

}

:root[data-theme="dark"] :is(button, .button-link, .brand-mark) { background-color: #17648e; color: #fff; }

:root[data-theme="dark"] :is(button, .button-link):hover { background-color: #227caa; }

:root[data-theme="dark"] :is(fieldset, .cancellation-dialog, .dialog-form-header, .document-preview-header, .passkey-settings, .account-section, .account-confirmation, .security-overview, .settings-section) { background: var(--surface); color: var(--ink); border-color: var(--line); }

:root[data-theme="dark"] .app-shell:has(.account-form) { background: var(--background); }

:root[data-theme="dark"] :is(.account-section-heading > p, .app-shell:has(.account-form) .settings-section p) { color: var(--muted); }

:root[data-theme="dark"] :is(.readonly-field, input:read-only, input:disabled, .field-disabled select, .account-form .readonly-field, .existing-contract-files, .withdrawn-note, .letter-preview, .secondary-button, .dialog-close, .appearance-open) { background: var(--soft); color: var(--ink); border-color: var(--line); }

:root[data-theme="dark"] :is(.contract-files-open, .document-preview-button, .document-delete-button, .text-link, .cancellation-open-button) { background: transparent; color: var(--brand); }

:root[data-theme="dark"] :is(.cancellation-open-button, .document-delete-button, .danger-button, .cancellation-alert-label, .contract-cancellation-state .text-link, .upload-file-status .is-duplicate) { color: #ffb78f; }

:root[data-theme="dark"] :is(.contract-cancellation-state, .otp-timer) { background: #45331e; color: #ffcf91; }

:root[data-theme="dark"] :is(.save-toast, .save-toast small) { background: #173e32; color: #a6edc9; }

:root[data-theme="dark"] :is(.icon-action, .document-download-button, .document-preview-header .dialog-close) { background: var(--soft); color: var(--brand); }

:root[data-theme="dark"] :is(.main-nav a:hover, .account-menu-panel a:hover) { background: var(--soft); }

:root[data-theme="dark"] :is(input, select, textarea) { border-color: var(--line); }

:root[data-theme="dark"] :focus-visible { outline: 2px solid #8bd3ff; outline-offset: 3px; }

@media(max-width: 700px) { .appearance-body { padding: 1rem; } .appearance-dialog select { min-width: 0; width: 100%; } }



:root[data-theme="dark"] :is(.checkbox-label, .form-section, .card-files, .document-preview-dialog, .recipient-address-preview) { background: var(--surface); color: var(--ink); }

:root[data-theme="dark"] :is(.card-files[open] summary, .account-menu summary:hover, .secondary-link, .status-cancelled, .status-expired, .otp-timer.expired) { background: var(--soft); color: var(--ink); }

:root[data-theme="dark"] :is(.security-overview strong, .field-disabled) { color: var(--muted); }

:root[data-theme="dark"] .status-paused { background: #45331e; }

:root[data-theme="dark"] .danger-zone { background: #3d232c; }

:root[data-theme="dark"] .danger-button { background: #8c2637; color: #fff; }

:root[data-theme="dark"] .file-preview-link:hover { color: var(--brand-dark); }

:root[data-theme="dark"] mark { background: #624719; color: #fff0c7; }


/* Clear separation between modal windows and the page behind them. */
:is(.contract-files-dialog, .appearance-dialog, .document-preview-dialog) {
  border: 2px solid #6d9cbb;
  box-shadow: 0 28px 90px #00000070, 0 0 0 1px #ffffff70;
}
:is(.contract-files-dialog, .appearance-dialog, .document-preview-dialog)::backdrop {
  background: rgb(4 12 22 / 76%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
:is(.contract-files-header, .appearance-header, .document-preview-header) {
  background: #e5f2fb;
  border-bottom: 2px solid #92bbd5;
}
:root[data-theme="dark"] :is(.contract-files-dialog, .appearance-dialog, .document-preview-dialog) {
  background: #203248;
  border-color: #8bc9ef;
  box-shadow: 0 28px 90px #000000b3, 0 0 0 1px #8bc9ef40;
}
:root[data-theme="dark"] :is(.contract-files-header, .appearance-header, .document-preview-header) {
  background: #294962;
  border-bottom-color: #77b8df;
}
:is(.contract-files-header, .appearance-header, .document-preview-header) .dialog-close {
  border: 1px solid #8daec4;
}
:root[data-theme="dark"] :is(.contract-files-header, .appearance-header, .document-preview-header) .dialog-close {
  background: #142d43;
  color: #fff;
  border-color: #8bc9ef;
}

/* Subtle menu states in dark mode, including open and active sections. */
:root[data-theme="dark"] .account-menu > summary {
  color: var(--muted);
  background: transparent;
  border-color: var(--line);
  box-shadow: none;
}
:root[data-theme="dark"] .account-menu > summary:hover,
:root[data-theme="dark"] .account-menu[open] > summary,
:root[data-theme="dark"] .account-menu.has-active > summary {
  color: var(--ink);
  background: #24364a;
  border-color: #4a6077;
  box-shadow: none;
}

/* Compact, consistent controls; help text must not stretch adjacent fields. */
label, .field-label { gap: .3rem; align-content: start; min-width: 0; }
.form-grid { align-items: start; gap: .75rem 1rem; }
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
select, textarea {
  padding: .4rem .65rem;
  line-height: 1.35;
  border-radius: .5rem;
  min-width: 0;
  max-width: 100%;
}
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]),
select { height: 2.3rem; }
input[type="file"]::file-selector-button {
  font: inherit;
  line-height: 1.2;
  padding: .12rem .4rem;
  margin: -.1rem .5rem -.1rem 0;
  border: 1px solid var(--line);
  border-radius: .3rem;
  background: var(--soft);
  color: var(--ink);
  cursor: pointer;
}
textarea { height: auto; }
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="image"]):not([type="color"]), select { min-height: 44px; }
}

/* Quiet secondary action in the header. */
.site-header .user-area .logout-button {
  width: auto;
  padding: .3rem .6rem;
  border: 1px solid var(--line);
  border-radius: .4rem;
  background: transparent;
  color: var(--muted);
  font-size: .85rem;
  font-weight: 500;
  line-height: 1.3;
}
.site-header .user-area .logout-button:hover {
  background: var(--soft);
  color: var(--ink);
}
:root[data-theme="dark"] .site-header .user-area .logout-button {
  background: transparent;
  color: var(--muted);
}
:root[data-theme="dark"] .site-header .user-area .logout-button:hover {
  background: #24364a;
  color: var(--ink);
}

:root[data-theme="dark"] body:has(.account-form) { background: var(--background); }
.app-shell:has(.account-form) { background: transparent; }
.account-form .account-confirmation button[type="submit"] {
  min-height: 0; padding: .45rem .8rem; border: 1px solid var(--line);
  border-radius: .45rem; background: var(--soft); color: var(--muted);
  font-weight: 600; font-size: .9rem;
}
.account-form .account-confirmation button[type="submit"]:hover { color: var(--ink); }
.account-form.has-unsaved-changes .account-confirmation button[type="submit"] {
  background: #ffead5; color: #853b08; border-color: #d99251;
}
:root[data-theme="dark"] .account-form.has-unsaved-changes .account-confirmation button[type="submit"] {
  background: #583319; color: #ffd0a3; border-color: #b9783c;
}
.account-form.has-unsaved-changes .account-confirmation button[type="submit"]:hover { filter: brightness(1.08); }

/* Clear, compact login methods. */
.auth-shell:has([data-login-request], [data-passkey-login]) { padding: clamp(1rem, 3vw, 1.6rem); border: 1px solid var(--line); }
.auth-shell .page-heading h1 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 1rem; }
.auth-shell [data-passkeys], .auth-shell [data-login-request] { padding: 1rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--background); }
.auth-shell .login-method-title { margin: 0 0 .7rem; font-size: 1.05rem; font-weight: 650; }
.auth-shell [data-passkeys] p { margin: .65rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.45; }
.auth-shell [data-passkey-status]:empty { display: none; }
.auth-shell hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; }
.auth-shell .login-instructions { margin: .75rem 0; color: var(--muted); font-size: .85rem; }
.auth-shell .login-instructions summary { cursor: pointer; padding: .3rem 0; }
.auth-shell .login-steps { margin: .4rem 0 0; padding: .7rem .8rem .7rem 2rem; }
.auth-shell [data-login-request] { gap: .75rem; }
.auth-shell [data-login-request] small { font-size: .78rem; }
.auth-shell [data-passkey-login], .auth-shell [data-login-submit] { width: auto; max-width: 100%; justify-self: start; padding: .45rem .8rem; border-radius: .4rem; font-size: .9rem; font-weight: 600; }
.auth-shell [data-passkey-login] { background: var(--soft); color: var(--brand); border: 1px solid var(--line); }
.auth-shell .login-help-links { gap: .6rem 1rem; flex-wrap: wrap; font-size: .85rem; margin-top: 1rem; }
:root[data-theme="dark"] .auth-shell { background: #192638; }
:root[data-theme="dark"] .auth-shell [data-passkeys], :root[data-theme="dark"] .auth-shell [data-login-request] { background: #142131; border-color: #435b73; }
:root[data-theme="dark"] .auth-shell [data-login-request] input { background: #24384d; border-color: #627e98; }
:root[data-theme="dark"] .auth-shell [data-passkey-login] { background: #263e53; color: #d5eaff; border-color: #54718a; }
:root[data-theme="dark"] .auth-shell [data-passkey-login]:hover { background: #304c64; }

.form-actions.warranty-form-actions { justify-content: flex-start; gap: .65rem; }
.form-actions.warranty-form-actions > * { min-width: 0; }
.warranty-edit-footer { position: sticky; bottom: .5rem; z-index: 20; display: flex; justify-content: flex-end; align-items: center; gap: .55rem; margin: 1rem 0; padding: .65rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); box-shadow: 0 .3rem 1rem rgb(0 0 0 / .18); }
.warranty-edit-footer > * { min-width: 0; min-height: 2.75rem; margin: 0; }
.warranty-edit-footer > button[type="submit"][form^="warranty-edit-form-"] { min-width: 8rem; }
.mobile-warranty-toolbar { display: none; }

.warranty-media-section { padding: 1rem; margin: 1rem 0; border: 1px solid var(--line); border-radius: .8rem; background: var(--surface); }
.warranty-media-section h2 { font-size: 1.15rem; margin: 0 0 .85rem; }
.warranty-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); gap: .8rem; }
.warranty-media-item { display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: .8rem; border: 1px solid var(--line); border-radius: .6rem; background: var(--background); overflow-wrap: anywhere; }
.warranty-media-preview { display: grid; gap: .5rem; }
.warranty-media-preview img { width: 100%; height: 9rem; object-fit: contain; border-radius: .4rem; background: var(--soft); }
.warranty-pdf-icon { display: grid; place-items: center; height: 9rem; background: var(--soft); border-radius: .4rem; font-weight: 700; font-size: 1.4rem; }
.warranty-media-item button, .warranty-media-upload button { width: fit-content; padding: .4rem .65rem; font-size: .85rem; }
.warranty-media-item form { margin: 0; gap: .5rem; }
.warranty-media-item summary, .warranty-media-upload summary { cursor: pointer; }
.warranty-media-upload { border-top: 1px solid var(--line); margin-top: 1rem; padding-top: .75rem; }
[data-media-titles] { display: grid; gap: .65rem; }

.warranty-gallery-row { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; }
.warranty-gallery-row button.warranty-gallery-open { width: auto; margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--brand); text-decoration: underline; text-align: right; font-size: .9rem; font-weight: 600; }
:root[data-theme="dark"] .warranty-gallery-row button.warranty-gallery-open { background: transparent; color: var(--brand); }
.warranty-viewer { width: min(64rem, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); padding: 0; border: 2px solid #6d9cbb; border-radius: .8rem; background: var(--surface); color: var(--ink); box-shadow: 0 28px 90px #0009; overflow: auto; }
.warranty-viewer::backdrop { background: #040c16c2; backdrop-filter: blur(4px); }
.warranty-viewer-header { display: flex; justify-content: space-between; gap: 1rem; align-items: center; padding: .85rem 1rem; background: var(--soft); border-bottom: 1px solid var(--line); }
.warranty-viewer-header h2 { font-size: 1.1rem; margin: .2rem 0 0; overflow-wrap: anywhere; }
.warranty-viewer-header .dialog-close { flex-shrink: 0; }
.warranty-viewer-content { display: grid; place-items: center; height: min(65dvh, 44rem); background: #0f1720; }
.warranty-viewer-content img { width: 100%; height: 100%; min-height: 0; object-fit: contain; }
.warranty-viewer-content iframe { width: 100%; height: 100%; border: 0; background: white; }
.warranty-viewer-content [hidden] { display: none; }
.warranty-viewer-footer { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .6rem 1rem; padding: .75rem; }
.warranty-viewer-footer button { width: auto; padding: .35rem .65rem; font-size: .85rem; }
.warranty-viewer-footer button:disabled { opacity: .4; cursor: default; }
:root[data-theme="dark"] .warranty-viewer { border-color: #8bc9ef; }
:root[data-theme="dark"] .warranty-viewer-header { background: #294962; }
html:has(.warranty-viewer[open]) { overflow: hidden; scrollbar-gutter: stable; }

.warranty-pdf-thumbnail { display: block; position: relative; height: 12rem; overflow: hidden; border-radius: .4rem; background: #fff; }
.warranty-pdf-thumbnail iframe { display: block; width: 100%; height: 100%; border: 0; pointer-events: none; }
.warranty-preview-caption { position: absolute; bottom: 0; left: 0; right: 0; background: #142131e6; color: #fff; padding: .2rem .4rem; font-size: .75rem; text-align: center; }
.warranty-media-preview img { height: 12rem; }
.warranty-media-preview:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: .4rem; }

.warranty-card-icons { display: flex; justify-content: flex-end; gap: .45rem; padding-top: .8rem; }
.warranty-card-icons .warranty-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: .35rem; border: 1px solid var(--line); border-radius: .4rem; background: transparent; color: var(--muted); }
.warranty-card-icons .warranty-card-icon:hover { background: var(--soft); color: var(--brand); }
.warranty-card-icon svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
:root[data-theme="dark"] .warranty-card-icons .warranty-card-icon { background: transparent; color: var(--muted); }
:root[data-theme="dark"] .warranty-card-icons .warranty-card-icon:hover { background: var(--soft); color: var(--brand); }
.warranty-details-dialog .contract-files-body { padding-top: .6rem; }
.warranty-detail-notes { overflow-wrap: anywhere; line-height: 1.5; }

/* Distinct, restrained colors for view and edit actions. */
.warranty-card-icons button.warranty-card-icon {
  color: #146994; background: #e4f2fb; border-color: #99c6df;
}
.warranty-card-icons a.warranty-card-icon {
  color: #9b4d13; background: #fff0df; border-color: #dfb386;
}
.warranty-card-icons button.warranty-card-icon:hover {
  color: #07537e; background: #cce7f7; border-color: #62a6ce;
}
.warranty-card-icons a.warranty-card-icon:hover {
  color: #7e3808; background: #ffe1bd; border-color: #cc955e;
}
:root[data-theme="dark"] .warranty-card-icons button.warranty-card-icon {
  color: #89d1ff; background: #203d53; border-color: #436f8c;
}
:root[data-theme="dark"] .warranty-card-icons a.warranty-card-icon {
  color: #ffc080; background: #443426; border-color: #8a6341;
}
:root[data-theme="dark"] .warranty-card-icons button.warranty-card-icon:hover {
  color: #b5e3ff; background: #2b506a; border-color: #70afd5;
}
:root[data-theme="dark"] .warranty-card-icons a.warranty-card-icon:hover {
  color: #ffdab1; background: #5b402a; border-color: #ba8655;
}

/* Preserve the empty document row without offering an empty list. */
.contract-file-actions .contract-documents-empty { visibility: hidden; pointer-events: none; }
.contract-facts .contract-fact-reminder { order: 1; }
.contract-facts .contract-fact-date { order: 2; }

@media (min-width: 761px) {
 #contract-filters { grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(10rem, 1fr) auto; }
 .warranty-filters:has(#warranty-expiry) { grid-template-columns: minmax(12rem, 2fr) minmax(9rem, 1fr) minmax(10rem, 1fr); }
}

@media (min-width: 1001px) {
 #contract-filters { grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8rem, 1fr)) auto; }
 .warranty-filters:has(#warranty-expiry) { grid-template-columns: minmax(12rem, 2fr) repeat(3, minmax(8rem, 1fr)); }
}
@media (min-width: 761px) and (max-width: 1000px) {
 #contract-filters, .warranty-filters:has(#warranty-expiry) { grid-template-columns: 1fr 1fr; }
}
.warranty-card-icons button.warranty-card-icon svg { stroke: #1685be; fill: #bce9ff; }
.warranty-card-icons button.warranty-card-icon svg circle { fill: #1685be; stroke: #07557f; }
.warranty-card-icons a.warranty-card-icon svg { stroke: #a14e0b; fill: #ffc04f; }
:root[data-theme="dark"] .warranty-card-icons button.warranty-card-icon svg { stroke: #83dbff; fill: #146692; }
:root[data-theme="dark"] .warranty-card-icons button.warranty-card-icon svg circle { fill: #83dbff; stroke: #c5f0ff; }
:root[data-theme="dark"] .warranty-card-icons a.warranty-card-icon svg { stroke: #ffda8a; fill: #df8b24; }
.deadline-badge { font-size:.8rem; margin:.15rem 0 .5rem; color:var(--muted); }
.deadline-soon { color:#b86a09; }
.deadline-urgent { color:#be3945; }
:root[data-theme="dark"] .deadline-soon { color:#ffcb78; }
:root[data-theme="dark"] .deadline-urgent { color:#ffa5ad; }
.quality-note { font-size:.75rem; color:var(--muted); margin:.2rem 0; }
.deadline-line { order:3; }
.cost-summary { background:var(--surface); padding:.8rem; border:1px solid var(--line); border-radius:.6rem; margin:1rem 0; }
.calendar-button { width:auto; font-size:.75rem; padding:.25rem .45rem; background:var(--soft); color:var(--brand); }
.warranty-card-icons .favorite-button { color:#c98b12; }
.file-drop-target.drag-over { outline:2px dashed var(--brand); background:var(--soft); }
@media (pointer:coarse) { .warranty-card-icons .warranty-card-icon { min-width:44px; min-height:44px; } .warranty-card-icons { gap:.65rem; } }
@media(min-width:1001px){#contract-filters,.warranty-filters:has(#warranty-expiry){grid-template-columns:repeat(3,minmax(0,1fr));}}

/* Use almost the entire viewport for document and photo previews. */
.warranty-viewer[open] { display:flex; flex-direction:column; width:98vw; max-width:98vw; height:98dvh; max-height:98dvh; box-sizing:border-box; margin:auto; overflow:hidden; }
.warranty-viewer-header,.warranty-viewer-footer { flex:0 0 auto; padding:.5rem .75rem; }
.warranty-viewer-header h2 { font-size:1rem; }
.warranty-viewer-content { flex:1 1 auto; height:auto; min-height:0; overflow:hidden; }
.warranty-viewer-content img { object-fit:contain; }
.warranty-viewer-content iframe { display:block; min-height:0; }
.warranty-viewer-content [hidden] { display:none; }
#contract-filters,.warranty-filters:has(#warranty-expiry) { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.55rem; padding:.75rem; }
#contract-filters label,.warranty-filters:has(#warranty-expiry) label { flex:1 1 8rem; min-width:0; margin:0; gap:.25rem; font-size:calc(.8rem + 2px); }
#contract-filters label:first-of-type,.warranty-filters:has(#warranty-expiry) label:first-of-type { flex:1.7 1 12rem; }
#contract-filters input,#contract-filters select,.warranty-filters:has(#warranty-expiry) input,.warranty-filters:has(#warranty-expiry) select { min-width:0; font-size:calc(.8rem + 2px); padding:.3rem .45rem; min-height:2rem; }
#contract-filters > button { order:10; flex:0 0 auto; width:auto; min-width:0; padding:.35rem .6rem; min-height:2rem; font-size:calc(.8rem + 2px); }
@media(min-width:1150px) { #contract-filters,.warranty-filters:has(#warranty-expiry) { flex-wrap:nowrap; } }
@media(max-width:480px) { #contract-filters label,.warranty-filters:has(#warranty-expiry) label { flex-basis:calc(50% - .55rem); } #contract-filters label:first-of-type,.warranty-filters:has(#warranty-expiry) label:first-of-type { flex-basis:100%; } }
.document-preview-dialog[open] { width:98vw; max-width:98vw; height:98dvh; max-height:98dvh; margin:auto; box-sizing:border-box; overflow:hidden; }
.document-preview-content { min-height:0; overflow:hidden; }
.document-preview-content img { max-height:100%; width:100%; height:100%; object-fit:contain; }
.document-preview-content iframe { width:100%; height:100%; min-height:0; }
.receipt-assistant { padding:.65rem; margin-bottom:1rem; }
.receipt-assistant [data-results][hidden] { display:none; }
.receipt-assistant pre { white-space:pre-wrap; overflow-wrap:anywhere; max-height:12rem; overflow:auto; font-size:.8rem; }
.receipt-assistant button { width:auto; padding:.4rem .65rem; }
.receipt-assistant [data-choices] { display:flex; flex-wrap:wrap; gap:.8rem; }
/* Separate document functions and preserve the search while inspecting a card. */
.document-function-panel { margin:1rem 0 1.25rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:.7rem; background:var(--surface); }
.document-function-panel > summary { cursor:pointer; font-weight:650; padding:.2rem 0; }
.document-function-panel[open] > summary { border-bottom:1px solid var(--line); padding-bottom:.7rem; margin-bottom:.7rem; color:var(--brand); }
.document-function-panel > p { margin:.4rem 0 .85rem; font-size:.85rem; }
.source-search-fields { display:grid; grid-template-columns:minmax(0,3fr) minmax(8rem,1fr); gap:.7rem; }
.source-selection-tools,.source-import-actions { display:flex; flex-wrap:wrap; gap:.6rem; align-items:center; margin:.8rem 0; }
.source-selection-tools button,.source-card-open { width:auto; padding:.3rem .55rem; font-size:.8rem; background:var(--soft); color:var(--brand); border:1px solid var(--line); }
.source-selection-tools span,.source-file-size { font-size:.8rem; color:var(--muted); }
.source-results { max-height:28rem; overflow:auto; border:1px solid var(--line); border-radius:.5rem; }
.source-result { display:flex; align-items:center; gap:.75rem; padding:.65rem; border-bottom:1px solid var(--line); }
.source-result[hidden],.source-results [hidden] { display:none; }
.source-result:last-child { border-bottom:0; }
.source-result-check { display:flex; flex:1; min-width:0; gap:.7rem; align-items:center; margin:0; cursor:pointer; }
.source-result-check input { width:1rem; height:1rem; flex:none; }
.source-result-check span { min-width:0; overflow-wrap:anywhere; }
.source-result-check small { display:block; margin-top:.25rem; font-weight:400; color:var(--muted); }
.source-card-open { flex:none; }
.source-import-actions { justify-content:space-between; align-items:flex-end; }
.source-import-actions label { flex:1; max-width:25rem; }
.source-import-actions button { width:auto; }
.source-card-dialog[open] { display:flex; flex-direction:column; width:98vw; height:98dvh; max-width:98vw; max-height:98dvh; padding:0; margin:auto; overflow:hidden; background:var(--surface); color:var(--ink); border:2px solid var(--brand); border-radius:.7rem; }
.source-card-dialog::backdrop { background:#030b16bd; backdrop-filter:blur(4px); }
.source-card-dialog header { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.6rem .85rem; border-bottom:1px solid var(--line); }
.source-card-dialog h2 { font-size:1.1rem; margin:0; }
.source-card-dialog iframe { flex:1; width:100%; min-height:0; border:0; background:var(--background); }
html:has(.source-card-dialog[open]) { overflow:hidden; scrollbar-gutter:stable; }
.source-card-page { background:var(--background); }
.source-card-page main { max-width:70rem; padding:1rem; margin:auto; }
.source-preview-card { padding:1rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); }
.source-preview-card h1 { font-size:1.5rem; }
.source-preview-card h2 { font-size:1.1rem; }
.source-preview-files li { margin:.6rem 0; overflow-wrap:anywhere; }
.source-notes { overflow-wrap:anywhere; }
@media(max-width:600px) { .source-search-fields { grid-template-columns:1fr; } .source-result { flex-wrap:wrap; } .source-result-check { flex-basis:100%; } .source-import-actions label { max-width:none; flex-basis:100%; } }
.contract-edit-fieldset { padding:.8rem; }
.contract-form-sections { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); align-items:start; gap:1rem; }
.contract-form-card { min-width:0; padding:.9rem; border:1px solid var(--line); border-radius:.65rem; background:var(--background); }
.contract-form-card h2 { font-size:1rem; margin:0 0 .85rem; padding-bottom:.55rem; border-bottom:1px solid var(--line); color:var(--brand); }
.contract-form-card .form-grid { gap:.7rem; }

.seller-picker { position: relative; display: flex; align-items: stretch; }
.seller-picker > input { padding-right: 2.8rem; }
.seller-picker-toggle { position: absolute; inset-block: .2rem; right: .2rem; width: 2.25rem; padding: 0; border: 0; border-radius: .45rem; color: var(--ink); background: transparent; }
.seller-picker-toggle:hover, .seller-picker-toggle:focus-visible { background: var(--soft); }
.seller-picker-list { position: absolute; z-index: 30; inset-inline: 0; top: calc(100% + .3rem); max-height: 16rem; overflow-y: auto; padding: .3rem; border: 1px solid var(--line); border-radius: .7rem; background: var(--surface); box-shadow: 0 .7rem 1.8rem rgb(0 0 0 / .3); }
.seller-picker-option { display: block; width: 100%; padding: .6rem .7rem; border: 0; border-radius: .45rem; text-align: left; color: var(--ink); background: transparent; }
.seller-picker-option:hover, .seller-picker-option[aria-selected="true"] { background: var(--soft); }
.contract-contact-card { grid-column:1 / -1; }
.contract-date-card label { min-width:0; }
@media(max-width:800px) { .contract-form-sections { grid-template-columns:1fr; } .contract-contact-card { grid-column:auto; } }
@media(min-width:801px) {
 .contract-date-card { grid-column:2; grid-row:1 / span 2; }
 .contract-contact-card { grid-column:1; grid-row:2; }
}
.belongs-picker { margin-bottom:1rem; }
.belongs-search-row { display:grid; grid-template-columns:minmax(0,3fr) minmax(9rem,1fr); align-items:end; gap:.7rem; }
.belongs-results { max-height:18rem; overflow:auto; margin:.5rem 0; border:1px solid var(--line); border-radius:.5rem; }
.belongs-results[hidden],.belongs-result[hidden],[data-belongs-empty][hidden] { display:none; }
.belongs-result { display:block; width:100%; text-align:left; padding:.6rem .75rem; color:var(--ink); background:var(--surface); border:0; border-bottom:1px solid var(--line); border-radius:0; }
.belongs-result:hover,.belongs-result:focus-visible { background:var(--soft); color:var(--brand); }
.belongs-result small { display:block; font-weight:400; color:var(--muted); margin-top:.2rem; }
.record-history-panel { margin:1.25rem 0; padding:.8rem 1rem; border:1px solid var(--line); border-radius:.6rem; background:var(--surface); }
.record-history-panel summary { cursor:pointer; font-weight:600; }
.record-history-panel[open] summary { padding-bottom:.7rem; margin-bottom:.7rem; border-bottom:1px solid var(--line); }
.warranty-form-sections { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr); gap:1rem; align-items:start; }
.warranty-dates-card { grid-column:2; grid-row:1 / span 2; }
.warranty-notes-card { grid-column:1; grid-row:2; }
@media(min-width:801px) {
.warranty-product-card .form-grid > label:nth-child(1) { grid-column:1; grid-row:1; }
.warranty-product-card .form-grid > label:nth-child(2) { grid-column:2; grid-row:1; }
.warranty-product-card .form-grid > label:nth-child(3) { grid-column:1; grid-row:2; }
.warranty-product-card .form-grid > label:nth-child(4) { grid-column:2; grid-row:2; }
.warranty-product-card .form-grid > label:nth-child(5) { grid-column:1; grid-row:3; }
.warranty-product-card .form-grid > label:nth-child(6) { grid-column:2; grid-row:3; }
.warranty-product-card .form-grid > label:nth-child(7) { grid-column:1; grid-row:4; }
.warranty-product-card .form-grid > label:nth-child(8) { grid-column:2; grid-row:4; }
}
.warranty-edit-fieldset { padding:.8rem; }
@media(max-width:800px){ .warranty-form-sections { grid-template-columns:1fr; } .warranty-dates-card,.warranty-notes-card { grid-column:auto; grid-row:auto; } .warranty-product-card .form-grid > label { grid-column:auto; grid-row:auto; } }
@media(max-width:500px){ .belongs-search-row { grid-template-columns:1fr; } }
.warranty-media-upload { margin-top:1.35rem; padding-top:1rem; }
.warranty-media-upload > summary { padding:.25rem 0; }
.warranty-media-upload[open] > summary { margin-bottom:1rem; }
.warranty-media-upload form { gap:.85rem; }
.warranty-media-upload label { gap:.45rem; }
.warranty-upload-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:1rem; align-items:end; }
.warranty-upload-row label { min-width:0; margin:0; }
.warranty-upload-row input { min-width:0; width:100%; }
.warranty-media-upload .warranty-upload-row button { width:100%; min-height:2.3rem; margin:0; }
.warranty-media-upload [data-media-status]:empty,.warranty-media-upload [data-media-titles]:empty { display:none; }
@media(max-width:600px){ .warranty-upload-row { grid-template-columns:1fr; gap:.7rem; } }
.warranty-media-grid { grid-template-columns:repeat(auto-fill,min(100%,22rem)); }
.warranty-rename-form { width:100%; margin-top:.4rem; }
.warranty-rename-form label { min-width:0; width:100%; }
.warranty-rename-form input { width:100%; min-width:0; }
.warranty-file-actions { display:flex; gap:.55rem; align-items:center; margin-top:.4rem; }
.warranty-file-actions form { display:block; margin:0; }
.warranty-file-actions .media-symbol { display:inline-flex; align-items:center; justify-content:center; width:2.2rem; height:2.2rem; padding:.4rem; border:1px solid var(--line); border-radius:.4rem; background:var(--soft); color:var(--brand); }
.media-symbol svg { width:1.15rem; height:1.15rem; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.warranty-file-actions .media-save { color:#288158; }
.warranty-file-actions .media-delete { color:#c34353; }
:root[data-theme="dark"] .warranty-file-actions .media-save { color:#8fdab1; }
:root[data-theme="dark"] .warranty-file-actions .media-delete { color:#ff9aa7; }
.media-symbol:hover { filter:brightness(1.15); }
@media(pointer:coarse){.warranty-file-actions .media-symbol { min-width:44px; min-height:44px; }}

.contract-bottom-toolbar { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding-top:.8rem; }
.contract-bottom-toolbar > .warranty-card-icons { padding-top:0; flex-shrink:0; }
.contract-bottom-toolbar > .contract-files-open { margin:0; text-align:left; }

/* Compact document workspace, keeping independent functions separated. */
.documents-workspace .page-actions { margin:.5rem 0 .8rem; }
.documents-workspace .lead { margin:.4rem 0; font-size:.95rem; }
.documents-workspace .document-function-panel { margin:.65rem 0; padding:.6rem .8rem; }
.documents-workspace .document-function-panel[open] > summary { padding-bottom:.5rem; margin-bottom:.5rem; }
.documents-workspace .document-function-panel > p { margin:.3rem 0 .55rem; }
.documents-workspace .document-upload-compact { display:grid; grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr); gap:.6rem .8rem; align-items:start; }
.document-upload-compact label { min-width:0; margin:0; }
.document-upload-compact small { font-size:.75rem; line-height:1.3; }
.document-upload-compact input,.document-upload-compact select { min-width:0; }
.document-upload-compact > button { width:auto; justify-self:end; align-self:start; margin-top:1.65rem; padding:.45rem .8rem; }
.documents-workspace .empty-state { padding:1rem; }
.documents-workspace .empty-state h2 { font-size:1.15rem; margin:.2rem 0 .4rem; }
.documents-workspace .empty-state p { margin:.3rem 0; }
.documents-workspace .filters { padding:.65rem .8rem; margin-top:.8rem; }
@media(max-width:1000px) { .documents-workspace .document-upload-compact { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) { .documents-workspace .document-upload-compact { grid-template-columns:minmax(0,1fr); } .document-upload-compact > button { margin-top:0; justify-self:stretch; } }

/* Unsaved data: same high-contrast indicator for text and icon save buttons. */
button.save-has-changes,input.save-has-changes[type="submit"],:root[data-theme="dark"] button.save-has-changes {
 background:#ffd39a !important; color:#4b2b08 !important; border-color:#e9a34e !important;
 box-shadow:0 0 0 2px #e9a34e33;
}
button.save-has-changes svg { stroke:currentColor !important; }
button.save-has-changes:hover { background:#ffc477 !important; }

.documents-workspace .document-group-compact { grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto; align-items:end; gap:.65rem .8rem; }
.document-group-compact label { margin:0; min-width:0; }
.document-group-compact > button { width:auto; margin:0; padding:.45rem .8rem; min-height:2.3rem; }
.documents-workspace .document-upload-compact { grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(12rem,.85fr); row-gap:.65rem; }
.document-upload-compact > .document-upload-save { justify-self:end; margin-top:1.65rem; min-height:2.3rem; }
.document-upload-hints { grid-column:1/-1; margin:0; font-size:.75rem; line-height:1.4; }
@media(max-width:1000px) {
 .documents-workspace .document-group-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .document-group-compact > button { grid-column:1/-1; justify-self:end; }
 .documents-workspace .document-upload-compact { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media(max-width:600px) {
 .documents-workspace .document-group-compact,.documents-workspace .document-upload-compact { grid-template-columns:minmax(0,1fr); }
 .document-group-compact > button,.document-upload-compact > .document-upload-save { justify-self:stretch; margin-top:0; }
}

#existing-document-import [data-source-results-count] { margin:.4rem 0; font-size:.85rem; }
#existing-document-import .source-results { border:0; display:grid; gap:.6rem; padding:.1rem; }
.source-record-card { border:1px solid var(--line); border-radius:.5rem; padding:.65rem; background:var(--bg); }
.source-record-card[hidden] { display:none; }
.source-record-card header { display:flex; justify-content:space-between; align-items:center; gap:.7rem; }
.source-record-card header small { display:block; color:var(--muted); font-size:.75rem; margin-top:.15rem; }
.source-record-files { margin-top:.5rem; border-top:1px solid var(--line); padding-top:.4rem; }
.source-record-files .source-result-check { display:flex; align-items:center; gap:.5rem; padding:.25rem 0; margin:0; }
.source-record-files .source-result-check span { flex:1; overflow-wrap:anywhere; min-width:0; }
.source-record-files p { margin:.2rem 0; font-size:.8rem; }
#existing-document-import .source-selection-tools { margin:.5rem 0; }
#existing-document-import .source-import-actions { margin-top:.65rem; }
@media(max-width:600px) { .source-record-card header { align-items:flex-start; flex-wrap:wrap; } }

.contract-change-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:1rem; }
.contract-change-section { padding:.85rem; border:1px solid var(--line); border-radius:.6rem; background:var(--bg); min-width:0; }
.contract-change-section h3 { font-size:.95rem; margin:0 0 .7rem; }
.contract-change-section small { display:block; margin-top:.6rem; line-height:1.45; color:var(--muted); }
.contract-change-section label { margin:0; min-width:0; }
@media(max-width:800px) { .contract-change-grid { grid-template-columns:minmax(0,1fr); } }

/* Keep price and currency together in the warranty product details. */
.warranty-price-fields { grid-column:1/-1; min-width:0; padding:.7rem .8rem; border:1px solid var(--line); border-radius:.55rem; background:var(--surface); }
.warranty-price-fields h3 { margin:0 0 .55rem; font-size:.9rem; color:var(--brand); }
.warranty-price-fields .form-grid { gap:.6rem .75rem; }
.warranty-price-fields label { margin:0; min-width:0; }
.warranty-price-fields small { display:block; margin-top:.45rem; color:var(--muted); }
/* Shared compact mobile action bar for the main record lists. */
.mobile-page-toolbar { display:none; }
.warranty-form-top-action { display:flex; justify-content:flex-end; margin:0 0 .75rem; }
@media(max-width:700px) {
 body:has(.mobile-page-toolbar) { padding-bottom:calc(4.6rem + env(safe-area-inset-bottom)); }
 .mobile-page-toolbar { position:fixed; inset-inline:0; bottom:0; z-index:50; display:grid; grid-template-columns:1.35fr 1fr 1fr; gap:.45rem; padding:.55rem .6rem calc(.55rem + env(safe-area-inset-bottom)); border-top:1px solid var(--line); background:var(--surface); box-shadow:0 -.25rem 1rem rgb(0 0 0 / .16); }
 .mobile-page-toolbar a { display:flex; align-items:center; justify-content:center; gap:.3rem; min-height:2.75rem; padding:.45rem .35rem; border:1px solid var(--line); border-radius:.55rem; color:var(--ink); background:var(--background); text-decoration:none; font-size:.84rem; font-weight:700; white-space:nowrap; }
 .mobile-page-toolbar .mobile-page-add { color:#fff; background:var(--brand-dark); border-color:var(--brand-dark); }
 .mobile-page-toolbar a span { font-size:1.1rem; line-height:1; }
 .contract-card .contract-facts { display:grid; grid-template-columns:minmax(0,1fr); gap:.25rem; margin:.3rem 0 .55rem; }
 .contract-card .contract-facts > .detail-line,.contract-card.document-overview-card > .detail-line { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:baseline; gap:.45rem; margin:.25rem 0; }
 .contract-card .contract-facts > .detail-line span,.contract-card.document-overview-card > .detail-line span { margin:0; font-size:.8rem; }
 .contract-card .contract-facts > .detail-line strong,.contract-card.document-overview-card > .detail-line strong { text-align:right; font-size:.85rem; }
}
.record-edit-footer { position:sticky; bottom:.5rem; z-index:20; display:flex; justify-content:flex-end; align-items:center; gap:.55rem; margin:1rem 0; padding:.65rem; border:1px solid var(--line); border-radius:.8rem; background:var(--surface); box-shadow:0 .3rem 1rem rgb(0 0 0 / .18); }
.record-edit-footer > * { min-width:0; min-height:2.75rem; margin:0; }
/* Mobile editing: natural field flow instead of desktop grid coordinates. */
@media(max-width:800px) {
 .warranty-product-card .form-grid { grid-template-columns:minmax(0,1fr); }
 .warranty-form-sections > section { min-width:0; }
 .warranty-edit-fieldset { min-inline-size:0; }
}
@media(max-width:700px) {
 .site-header { position:relative; min-height:0; padding:.5rem .75rem; gap:.25rem .65rem; }
 .site-header .brand { gap:.5rem; }
 .site-header .brand-mark { width:2rem; height:2rem; flex:none; }
 .site-header .user-area { width:100%; margin:0; padding:0; border:0; justify-content:space-between; gap:.5rem; }
 .site-header .user-name { font-size:.8rem; max-width:none; min-width:0; white-space:normal; }
 .site-header .user-area .logout-button { min-height:2.75rem; margin:0; padding:.35rem .65rem; font-size:.8rem; }
 .navigation-area { padding:0; gap:.35rem; }
 .main-nav { gap:.2rem; scrollbar-width:thin; }
 .main-nav a { display:flex; align-items:center; min-height:2.75rem; padding:.45rem .6rem; font-size:.85rem; }
 .account-menu { flex:none; }
 main:has(.warranty-edit-fieldset) { width:calc(100% - 1.25rem); margin:.9rem auto; }
 main:has(.warranty-edit-fieldset) > h1 { font-size:clamp(1.35rem,6vw,1.75rem); line-height:1.2; margin:.5rem 0 .8rem; overflow-wrap:anywhere; }
 main:has(.warranty-edit-fieldset) > p { margin:.5rem 0; font-size:.9rem; line-height:1.45; }
 .warranty-edit-fieldset { padding:0; border:0; background:transparent !important; border-radius:0; margin:.5rem 0; }
 .warranty-edit-fieldset > legend { padding:0; font-size:.85rem; color:var(--muted); }
 .warranty-form-top-action { margin:.25rem 0 .65rem; }
 .warranty-form-top-action > button { width:auto; min-height:2.75rem; padding:.45rem .75rem; font-size:.85rem; }
 .warranty-form-sections { gap:.8rem; }
 .warranty-form-sections .contract-form-card { padding:.85rem; background:var(--surface); border-radius:.8rem; }
 .warranty-form-sections .contract-form-card h2 { margin:0 0 .8rem; padding-bottom:.55rem; font-size:1rem; }
 .warranty-form-sections .form-grid { gap:.8rem; }
 .warranty-form-sections label { min-width:0; margin:0; font-size:.9rem; line-height:1.4; }
 .warranty-form-sections :is(input,select,textarea) { width:100%; min-width:0; max-width:100%; font-size:16px; min-height:2.875rem; }
 .warranty-form-sections textarea { min-height:7rem; }
 .warranty-form-sections small { display:block; font-size:.78rem; line-height:1.4; }
 .warranty-price-fields { padding:.65rem; background:var(--background); }
 .warranty-price-fields .two-columns { grid-template-columns:minmax(0,2fr) minmax(4.75rem,1fr); gap:.65rem; }
 .seller-picker-toggle { min-height:2.5rem; width:2.5rem; }
 .seller-picker-list { max-height:min(16rem,40dvh); }
 .seller-picker-option { min-height:2.75rem; white-space:normal; overflow-wrap:anywhere; }
 body:has(.warranty-edit-footer) { padding-bottom:calc(5.5rem + env(safe-area-inset-bottom)); }
 .warranty-edit-footer { position:fixed; inset-inline:0; bottom:0; z-index:50; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr) minmax(0,1fr); gap:.4rem; margin:0; padding:.55rem .65rem calc(.55rem + env(safe-area-inset-bottom)); border-radius:0; border-width:1px 0 0; }
 .warranty-edit-footer > *, .warranty-edit-footer > button[type="submit"][form^="warranty-edit-form-"] { display:flex; align-items:center; justify-content:center; min-width:0; min-height:2.875rem; padding:.55rem .25rem; font-size:.85rem; white-space:nowrap; }
 main:has(.warranty-edit-fieldset) :is(input,select,textarea,summary) { scroll-margin-block:1rem 6rem; }
 .warranty-media-section { padding:.8rem; min-width:0; }
 .warranty-media-grid { grid-template-columns:minmax(0,1fr); }
 .warranty-media-item { max-width:100%; min-width:0; }
 .receipt-assistant summary { min-height:2.75rem; padding:.5rem 0; }
}
@media(max-width:700px) { .record-edit-footer { bottom:calc(.35rem + env(safe-area-inset-bottom)); justify-content:stretch; gap:.4rem; padding:.45rem; } .record-edit-footer > * { flex:0 1 auto; padding:.55rem .65rem; font-size:.88rem; white-space:nowrap; } .record-edit-footer > button[type="submit"] { flex:1 1 auto; min-width:0; } }

/* Shared main-group registers, horizontally scrollable on small screens. */
.main-group-registers { margin: 0 0 1.4rem; min-width: 0; }
.main-group-tabs { display:flex; gap:.35rem; overflow-x:auto; max-width:100%; padding:.3rem .1rem 0; border-bottom:1px solid var(--line); }
.main-group-tab { flex:0 0 auto; max-width:26rem; overflow-wrap:anywhere; padding:.7rem 1rem; border:1px solid transparent; border-bottom:3px solid transparent; border-radius:.7rem .7rem 0 0; text-decoration:none; font-weight:650; }
.main-group-tab.is-active { background:var(--surface, #1a2a3a); border-color:var(--line); border-bottom-color:var(--brand); }
.main-group-tools { display:flex; align-items:flex-start; flex-wrap:wrap; gap:.8rem; margin-top:.8rem; }
.main-group-filter { display:flex; align-items:flex-end; gap:.5rem; margin:0; }
.main-group-filter label { min-width:12rem; max-width:28rem; }
.main-group-filter button { margin:0; width:auto; flex:0 0 auto; min-height:46px; }
.main-group-filter select { width:100%; min-width:0; }
.main-group-create { margin-left:auto; max-width:100%; }
.main-group-create summary { cursor:pointer; padding:.7rem 1rem; min-height:44px; border:1px solid var(--line); border-radius:.6rem; font-weight:650; }
.main-group-create form { display:grid; gap:.6rem; padding:.8rem 0; max-width:28rem; }
.main-group-create form p { margin:0; }
.main-group-field { display:flex; align-items:flex-end; gap:.8rem; margin:.75rem 0 1rem; min-width:0; max-width:29rem; }
.main-group-field > label { display:grid; flex:1; min-width:0; gap:.35rem; margin:0; color:var(--muted); font-size:.85rem; font-weight:500; }
.main-group-create-link { display:inline-flex; flex:0 0 auto; align-items:center; gap:.25rem; min-height:44px; padding:.3rem 0; color:var(--muted); font-size:.85rem; font-weight:500; text-decoration:none; }
.main-group-create-link:hover, .main-group-create-link:focus-visible { color:var(--brand); text-decoration:underline; }
.main-group-create-link span { font-size:.85em; font-weight:400; }
.main-group-create { scroll-margin-top:7rem; }
.main-group-field select { width:100%; min-width:0; min-height:44px; padding:.45rem .65rem; font-size:1rem; font-weight:500; }
form:has(> .main-group-field) > fieldset:first-of-type { margin-top:.75rem; }
.main-group-field small { display:block; margin:0; line-height:1.5; font-weight:400; }
.document-upload-compact > .main-group-field { grid-column:1 / -1; }
@media(max-width:700px) {
  .main-group-tabs { margin-inline:0; }
  .main-group-tab { padding:.65rem .8rem; max-width:75vw; }
  .main-group-tools { gap:.65rem; }
  .main-group-filter { width:100%; }
  .main-group-filter label { flex:1; min-width:0; }
  .main-group-create { width:100%; margin-left:0; }
  .main-group-create form { max-width:none; }
  .main-group-field { max-width:none; }
  .main-group-field select, .main-group-filter select { min-height:46px; font-size:16px; }
}

/* Creation belongs to the register strip; the panel uses the full width below it. */
.main-group-add { white-space:nowrap; }
.main-group-registers.is-enhanced .main-group-tools:not(:has([open])) { display:none; }
.main-group-registers .main-group-create { width:100%; margin:0; }
.main-group-registers .main-group-create[open] { padding:.8rem 1rem; border:1px solid var(--line); border-radius:.7rem; background:var(--surface); }
.main-group-registers .main-group-create form { max-width:32rem; padding:0; }

/* Security and export: separate, readable operations. */
.security-page { width:100%; max-width:72rem; display:grid; gap:1rem; }
.security-page .security-card { margin:0; padding:clamp(1.1rem,2vw,1.6rem); border:1px solid var(--line); border-radius:.85rem; background:var(--surface); }
.security-page .security-card > h2 { margin:0 0 .4rem; font-size:clamp(1.2rem,2vw,1.5rem); line-height:1.3; }
.security-page .security-card > p { margin:.2rem 0 1.2rem; max-width:65ch; color:var(--muted); line-height:1.55; }
.security-page .security-muted { padding:1rem 1.3rem; border-left:3px solid var(--line); }
.security-page .security-muted > h2 { font-size:1.05rem; }
.security-page .security-muted > p { margin:.3rem 0 0; font-size:.9rem; }
.security-page .security-form { width:100%; max-width:44rem; gap:1.05rem; }
.security-page .security-form > label, .security-page .security-form .two-columns > label { gap:.4rem; min-width:0; line-height:1.35; }
.security-page .security-form :is(input,select) { min-width:0; width:100%; }
.security-page .security-form .two-columns { display:grid; gap:1rem; }
.security-page .security-form > p { margin:-.15rem 0 .15rem; color:var(--muted); font-size:.88rem; line-height:1.5; }
.security-page .security-form > button { justify-self:start; width:auto; min-height:44px; padding:.7rem 1.1rem; }
.security-page .security-restore { border-color:var(--line); }
.security-page .security-restore > p { max-width:75ch; }
@media(max-width:700px) {
 .security-page { gap:.8rem; }
 .security-page .security-card { padding:1rem; }
 .security-page .security-form .two-columns { grid-template-columns:minmax(0,1fr); gap:1.05rem; }
 .security-page .security-form > button { width:100%; }
}

.security-page .security-form .two-columns { align-items:end; }

.trash-empty-form { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.65rem; }
.trash-empty-form > label { min-width:min(100%,16rem); max-width:21rem; font-size:.88rem; }
.trash-empty-form > :is(button, .trash-auth-status) { width:auto; margin:0; }
.trash-empty-form > button { min-height:44px; padding:.65rem .85rem; }
.trash-auth-status { flex-basis:100%; color:var(--muted); }
@media(max-width:700px) { .trash-empty-form { width:100%; } .trash-empty-form > :is(label,button) { width:100%; max-width:none; } }