:root {
  --bg-top: rgb(22, 156, 201);
  --bg-bottom: cyan;
  --card: #13415e;
  --muted: #98a0b3;
  --good: #16a34a;
  --accent-blue: #60a5fa;
  --glass: rgba(255, 255, 255, 0.03);
}

* {
  box-sizing: border-box
}

html,
body {
  height: 100%
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial;
  color: #e6eef8;
  background: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-size: 100% 200vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

.container {
  width: 100%;
  max-width: 1100px;
  background: linear-gradient(180deg, var(--card), rgba(11, 18, 32, 0.6));
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 10px 50px rgba(2, 6, 23, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.site-header h1 {
  margin: 0 0 6px 0;
  font-size: 20px;
  font-weight: 700;
  color: #fff
}

.site-header .lead {
  margin: 0 0 12px 0;
  color: #dff3ff;
  font-size: 14px
}

.layout {
  display: grid;
  grid-template-columns: 1fr 360px;
  /* center flexible, right column fixed */
  gap: 18px;
  align-items: start;
}

/* center panel */
.panel.center {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 20px 24px;
}

/* right column holds generator + breach stacked */
.panel.right-column {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* each block inside right column */
.panel-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  padding: 12px;
}

/* shared controls */
.label {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
  font-size: 13px
}

.input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 12px
}

input[type="password"],
input[type="text"] {
  flex: 1;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: var(--glass);
  color: inherit;
  font-size: 15px;
  outline: none
}

input:focus {
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.28)
}

button#toggle {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--muted);
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600
}

.meter {
  height: 12px;
  background: rgba(255, 255, 255, 0.04);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px
}

.meter-bar {
  height: 100%;
  width: 4%;
  background: #fff;
  transition: width .25s ease, background .25s ease
}

.strength-text {
  font-size: 15px;
  color: #E6F5FF;
  margin-bottom: 6px;
  font-weight: 700
}

.char-limit-error {
  font-size: 13px;
  color: #ef4444;
  margin-bottom: 10px;
  font-weight: 600;
  display: none
}

.crack-time {
  font-size: 14px;
  color: var(--accent-blue);
  margin-bottom: 10px;
  font-weight: 700
}

.breach-check-btn,
.generate-btn {
  background: var(--accent-blue);
  border: 1px solid rgba(96, 165, 250, 0.16);
  color: #072033;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  margin-top: 8px;
  transition: transform .12s ease, box-shadow .12s ease;
}

.breach-check-btn:hover:not(:disabled),
.generate-btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(96, 165, 250, 0.12)
}

.breach-check-btn:disabled,
.generate-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none
}

.requirements-title {
  font-size: 16px;
  color: var(--muted);
  font-weight: 600;
  margin: 12px 0 8px 0
}

.checks {
  list-style: none;
  padding: 0;
  margin: 0 0 12px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px
}

.checks li {
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.02);
  display: flex;
  align-items: center;
  gap: 8px
}

.checks li.passed {
  background: rgba(22, 163, 74, 0.12);
  color: var(--good);
  font-weight: 600;
  border: 1px solid rgba(22, 163, 74, 0.08)
}

.checks li.failed {
  opacity: 0.6
}

.pwned-check {
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.02);
  margin-top: 8px;
  min-height: 20px;
  display: none
}

.pwned-check.pwned {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.08)
}

.pwned-check.safe {
  color: var(--good);
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.08)
}

.generated-text {
  font-size: 13px;
  padding: 8px;
  border-radius: 8px;
  background: rgba(22, 163, 74, 0.12);
  border: 1px solid rgba(22, 163, 74, 0.08);
  margin-top: 8px;
  min-height: 20px;
  display: none;
  color: var(--good)
}

.loading-pwned {
  font-size: 13px;
  color: var(--muted);
  opacity: 0.6;
  display: none;
  margin-top: 8px
}

/* Mobile-first improvements for the password tool */
/* Add at end of styles.css or replace existing responsive section */

:root {
  --mobile-gap: 12px;
  --mobile-padding: 14px;
  --radius: 10px;
  --font-base: 15px;
}

/* Ensure base legibility on small devices */
html {
  font-size: 16px;
}

body {
  -webkit-text-size-adjust: 100%;
}

/* Container adjustments for small viewports */
@media (max-width: 980px) {
  body {
    padding: 12px;
    align-items: flex-start;
    padding-top: calc(env(safe-area-inset-top, 0) + 12px);
  }

  .container {
    max-width: 100%;
    padding: var(--mobile-padding);
    margin-top: 6px;
    border-radius: 12px;
  }

  /* Layout stacks vertically */
  .layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mobile-gap);
    grid-auto-rows: auto;
  }

  /* Center panel becomes full width with reduced padding */
  .panel.center {
    padding: 16px;
    min-width: auto;
    border-radius: var(--radius);
  }

  /* Right column stacks below center */
  .panel.right-column {
    flex-direction: column;
    gap: 10px;
    padding: 0;
    /* inner blocks have their own padding */
  }

  .panel-block {
    padding: 12px;
    border-radius: var(--radius);
  }

  /* Increase tappable sizes */
  .input-row {
    gap: 10px;
  }

  input[type="password"],
  input[type="text"] {
    padding: 12px;
    font-size: var(--font-base);
  }

  button#toggle {
    padding: 10px 12px;
    font-size: 14px;
  }

  .breach-check-btn,
  .generate-btn {
    width: 100%;
    padding: 12px;
    font-size: 15px;
    border-radius: 10px;
  }

  /* Checks list becomes single column */
  .checks {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .checks li {
    font-size: 13px;
    padding: 10px;
  }

  /* Meter and text spacing */
  .meter {
    height: 14px;
    margin-bottom: 12px;
  }

  .meter-bar {
    transition: width .2s ease, background .2s ease;
  }

  .strength-text {
    font-size: 15px;
    margin-bottom: 8px;
  }

  .crack-time {
    font-size: 14px;
    margin-bottom: 12px;
  }

  /* Generated text and pwned check stretch full width */
  .generated-text,
  .pwned-check,
  .loading-pwned {
    width: 100%;
    box-sizing: border-box;
  }

  /* Footer/back link spacing */
  .back-link {
    display: inline-block;
    padding: 10px 12px;
    margin-top: 12px;
  }
}

/* Extra-small devices: tighten spacing and font sizes */
@media (max-width: 420px) {
  :root {
    --font-base: 14px;
    --mobile-gap: 10px;
    --mobile-padding: 12px;
  }

  .site-header h1 {
    font-size: 18px;
  }

  .site-header .lead {
    font-size: 13px;
  }

  input[type="password"],
  input[type="text"] {
    padding: 10px;
    font-size: 14px;
  }

  .breach-check-btn,
  .generate-btn {
    padding: 10px;
    font-size: 14px;
  }

  .checks li {
    font-size: 12px;
    padding: 8px;
  }

  .meter {
    height: 12px;
  }

  .meter-bar {
    height: 12px;
  }
}

/* Touch-friendly focus states */
button:focus,
input:focus,
.breach-check-btn:focus,
.generate-btn:focus {
  outline: none;
  box-shadow: 0 8px 24px rgba(96, 165, 250, 0.12);
  border-color: rgba(96, 165, 250, 0.32);
}

/* Ensure elements don't overflow safe areas on iOS */
@supports(padding: max(0px)) {
  body {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
}

/* Handy utility: stack buttons on very narrow widths */
@media (max-width: 360px) {
  .input-row {
    flex-direction: column-reverse;
    gap: 8px;
  }

  button#toggle {
    width: 100%;
  }

  input[type="password"],
  input[type="text"] {
    width: 100%;
  }
}