.security-panel {
  --security-border: color-mix(in srgb, var(--color-base-content) 12%, transparent);
  --security-muted: color-mix(in srgb, var(--color-base-content) 62%, transparent);
}

.security-heading { margin-bottom: 1.75rem; }
.security-heading h2 { font-size: 1.875rem; font-weight: 900; line-height: 1.15; }
.security-heading p { margin-top: .35rem; color: var(--security-muted); }

.security-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
  align-items: start;
}

.security-card {
  min-width: 0;
  border: 1px solid var(--security-border);
  border-radius: 1.65rem;
  background: var(--color-base-100);
  padding: 1.5rem;
  box-shadow: 0 12px 28px rgb(15 23 42 / .08);
}

.security-card-header { display: flex; align-items: flex-start; gap: .9rem; }
.security-card-header h3 { font-size: 1.125rem; font-weight: 800; line-height: 1.35; }
.security-card-header p { margin-top: .25rem; color: var(--security-muted); font-size: .875rem; line-height: 1.55; }
.security-card-icon {
  display: grid; place-items: center; flex: 0 0 2.75rem; height: 2.75rem;
  border-radius: .9rem; color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 11%, transparent);
}
.security-card-icon svg, .security-device-icon svg { width: 1.4rem; height: 1.4rem; }

.security-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin-top: 1.5rem; }
.security-field { display: flex; min-width: 0; flex-direction: column; gap: .45rem; }
.security-field-wide { grid-column: 1 / -1; }
.security-field > span { font-size: .875rem; font-weight: 700; }
.security-input {
  display: block; width: 100%; height: 2.85rem; padding: 0 .9rem;
  border: 1px solid color-mix(in srgb, var(--color-base-content) 22%, transparent) !important;
  border-radius: .9rem !important; outline: none;
  background: var(--color-base-200) !important; color: var(--color-base-content);
  box-shadow: inset 0 1px 2px rgb(15 23 42 / .035), 0 1px 2px rgb(15 23 42 / .035);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.security-input::placeholder { color: color-mix(in srgb, var(--color-base-content) 43%, transparent); }
.security-input:focus {
  border-color: var(--color-primary) !important; background: var(--color-base-100) !important;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 15%, transparent);
}
.security-form-actions { display: flex; align-items: center; grid-column: 1 / -1; margin-top: .15rem; }
.security-action { min-height: 2.65rem; border-radius: .9rem; padding-inline: 1.35rem; }

.security-passkey-content { margin-top: 1.5rem; }
.security-status { min-height: 1.25rem; margin-top: .65rem; color: var(--security-muted); font-size: .875rem; }
.security-passkey-list { margin-top: 1.25rem; }
.security-passkey-list h4 { margin-bottom: .65rem; font-size: .9rem; font-weight: 800; }
.security-passkey-items { display: grid; gap: .65rem; }
.security-passkey-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .8rem;
  border: 1px solid var(--security-border); border-radius: 1rem;
  background: var(--color-base-200); padding: .8rem .9rem;
}
.security-device-icon {
  display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: .75rem;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.security-passkey-info { min-width: 0; }
.security-passkey-info p { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 750; }
.security-passkey-info small, .security-passkey-empty small { display: block; margin-top: .1rem; color: var(--security-muted); line-height: 1.4; }
.security-remove { border: 0; border-radius: .7rem; background: transparent; color: var(--color-error); cursor: pointer; padding: .55rem .7rem; font-size: .8rem; font-weight: 700; }
.security-remove:hover { background: color-mix(in srgb, var(--color-error) 9%, transparent); }
.security-passkey-empty { margin-top: 1.25rem; border: 1px dashed color-mix(in srgb, var(--color-primary) 30%, transparent); border-radius: 1rem; background: color-mix(in srgb, var(--color-primary) 5%, transparent); padding: 1rem; }
.security-passkey-empty p { font-weight: 750; }

@media (max-width: 1050px) {
  .security-card-grid { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .security-heading { margin-bottom: 1.25rem; }
  .security-heading h2 { font-size: 1.6rem; }
  .security-card-grid { gap: 1rem; }
  .security-card { padding: 1.15rem; border-radius: 1.3rem; }
  .security-card-header { gap: .7rem; }
  .security-card-icon { flex-basis: 2.45rem; height: 2.45rem; }
  .security-form { grid-template-columns: 1fr; }
  .security-field-wide { grid-column: auto; }
  .security-form-actions { grid-column: auto; }
  .security-action { width: 100%; }
  .security-passkey-row { grid-template-columns: auto minmax(0, 1fr); }
  .security-remove { grid-column: 2; justify-self: start; padding-left: 0; }
}