/* ==========================================================
   nexpoint Passwort-Generator
   Datei: /assets/app.css
   Version: 1
   ========================================================== */

.password-hero { position: relative; overflow: hidden; padding-top: clamp(54px, 7vw, 88px); }
.password-hero::after {
  content: "";
  position: absolute;
  inset: auto -18% -38% 35%;
  height: 360px;
  background: radial-gradient(circle, rgba(122,60,240,.18), transparent 62%);
  pointer-events: none;
}
.password-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .72fr);
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
.password-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.password-hero-card h2 { margin: 14px 0 10px; font-size: clamp(1.45rem, 2.4vw, 2.15rem); line-height: 1.04; letter-spacing: -.04em; }
.password-hero-card p { margin: 0; color: var(--nxp-text-soft); }
.password-mini-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 22px; }
.password-mini-stats div { padding: 12px; border: 1px solid var(--nxp-border); border-radius: 17px; background: var(--nxp-surface-soft); }
.password-mini-stats strong { display: block; font-size: 1.35rem; line-height: 1; }
.password-mini-stats span { display: block; margin-top: 4px; color: var(--nxp-muted); font-size: .86rem; line-height: 1.25; }

.password-builder { display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, .78fr); gap: 22px; align-items: start; }
.password-panel { padding: clamp(18px, 3vw, 30px); }
.password-section-head { margin-bottom: 18px; }
.password-section-head h2 { margin-top: 10px; }
.password-section-head p { margin: 10px 0 0; color: var(--nxp-text-soft); }
.password-section-head-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }

#passwordForm { display: grid; gap: 18px; }
#passwordForm fieldset { margin: 0; padding: 0 0 18px; border: 0; border-bottom: 1px solid var(--nxp-border); }
#passwordForm fieldset:last-of-type { border-bottom: 0; padding-bottom: 0; }
#passwordForm legend { margin: 0 0 12px; padding: 0; color: var(--nxp-text); font-weight: 900; font-size: 1.02rem; }
#passwordForm label { color: var(--nxp-text-soft); font-weight: 800; }
#passwordForm input[type="range"] { width: 100%; accent-color: var(--nxp-primary); }
#passwordForm input[type="checkbox"],
#passwordForm input[type="radio"] { accent-color: var(--nxp-primary); }
#passwordForm select {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--nxp-border);
  border-radius: 16px;
  background: var(--nxp-surface-soft);
  color: var(--nxp-text);
  font-weight: 750;
  outline: none;
}
#passwordForm select:focus { border-color: rgba(122, 60, 240, .55); box-shadow: 0 0 0 4px var(--nxp-primary-soft); }

.password-mode-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.password-mode-tab {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 14px 16px 14px 42px;
  border: 1px solid var(--nxp-border);
  border-radius: 19px;
  background: var(--nxp-surface-soft);
  cursor: pointer;
}
.password-mode-tab input { position: absolute; left: 16px; top: 18px; width: 16px; height: 16px; }
.password-mode-tab span { color: var(--nxp-text); font-weight: 950; line-height: 1.1; }
.password-mode-tab small { color: var(--nxp-muted); font-weight: 750; }
.password-mode-tab.is-active { border-color: rgba(122, 60, 240, .48); background: var(--nxp-primary-soft); box-shadow: 0 0 0 4px rgba(122,60,240,.07); }

.password-range-row { display: grid; gap: 8px; }
.password-range-row label { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.password-range-row strong { color: var(--nxp-primary); white-space: nowrap; }
.password-check-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.password-check-grid label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 10px 12px;
  border: 1px solid var(--nxp-border);
  border-radius: 16px;
  background: var(--nxp-surface-soft);
  color: var(--nxp-text);
}
.password-check-grid-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.password-field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; }
.password-field-grid label { display: grid; gap: 6px; }
.password-field-grid-compact { align-items: end; }
.password-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.password-output-panel { position: sticky; top: calc(var(--nxp-header-height) + 18px); }
.password-result-box {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px;
  align-items: stretch;
  margin-top: 14px;
}
.password-output {
  display: block;
  min-width: 0;
  min-height: 64px;
  padding: 16px;
  border: 1px solid var(--nxp-border);
  border-radius: 20px;
  background: var(--nxp-surface-soft);
  color: var(--nxp-text);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 850;
  font-size: clamp(1rem, 2.4vw, 1.25rem);
  line-height: 1.35;
  overflow-wrap: anywhere;
  user-select: all;
}
.password-output.is-hidden { letter-spacing: .16em; }
.password-result-box .nxp-btn { align-self: stretch; min-width: 112px; }

.password-strength { margin-top: 18px; padding: 14px; border: 1px solid var(--nxp-border); border-radius: 18px; background: var(--nxp-surface-soft); }
.password-strength-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.password-strength-top strong { color: var(--nxp-text); }
.password-strength-top span { color: var(--nxp-muted); font-weight: 800; }
.password-strength-bar { height: 10px; margin-top: 10px; border-radius: 999px; overflow: hidden; background: color-mix(in srgb, var(--nxp-border) 50%, transparent); }
.password-strength-bar span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--nxp-gradient); transition: width .18s ease; }
.password-strength p { margin: 10px 0 0; color: var(--nxp-text-soft); font-size: .93rem; }

.password-list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; }
.password-list-head h3 { margin: 0; font-size: 1.08rem; }
.password-list { display: grid; gap: 8px; margin-top: 10px; }
.password-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 10px 10px 10px 13px;
  border: 1px solid var(--nxp-border);
  border-radius: 16px;
  background: color-mix(in srgb, var(--nxp-surface-soft) 74%, transparent);
}
.password-list-value {
  min-width: 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  font-weight: 800;
  color: var(--nxp-text);
  overflow-wrap: anywhere;
}
.password-list-value.is-hidden { letter-spacing: .12em; }
.password-list-item button { min-height: 34px; padding: 7px 11px; font-size: .84rem; }

.password-info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.password-cta-panel { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.password-cta-panel p { max-width: 720px; color: var(--nxp-text-soft); margin: 12px 0 0; }

@media (max-width: 1040px) {
  .password-hero-grid, .password-builder { grid-template-columns: 1fr; }
  .password-output-panel { position: static; }
}

@media (max-width: 720px) {
  .password-hero { padding-top: 42px; }
  .password-hero-card, .password-panel { padding: 18px; }
  .password-mini-stats, .password-info-grid { grid-template-columns: 1fr; }
  .password-mode-tabs, .password-field-grid, .password-check-grid, .password-check-grid-compact { grid-template-columns: 1fr; }
  .password-result-box { grid-template-columns: 1fr; }
  .password-result-box .nxp-btn { width: 100%; }
  .password-section-head-row { align-items: stretch; flex-direction: column; }
  .password-list-head { align-items: flex-start; flex-direction: column; }
  .password-list-head .nxp-btn { width: 100%; }
  .password-list-item { grid-template-columns: 1fr; }
  .password-list-item button { width: 100%; }
  .password-actions .nxp-btn, .password-hero-actions .nxp-btn, .password-cta-panel .nxp-btn { width: 100%; }
  .password-cta-panel { align-items: stretch; flex-direction: column; }
}