@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');

*{
  margin:0; padding:0; box-sizing:border-box;
  font-family:'Poppins',sans-serif;
}

:root{
  --bg-1:#0a1533;        /* тёмно-синий фон */
  --bg-2:#0d1f4f;        /* градиент */
  --panel:#0f1e3a;       /* карточка */
  --panel-border:#1d2a52;
  --text:#e6ecff;        /* основной текст */
  --muted:#b9c4e3;       /* вторичный текст */
  --input-bg:#0b1736;
  --input-border:#2a3a6a;
  --accent:#2f5bff;      /* главный акцент (кнопки) */
  --accent-hover:#2246cc;
  --good:#45a049;
  --warn:#f1c80b;
  --bad:#e64a4a;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

body{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  background: linear-gradient(180deg,var(--bg-1),var(--bg-2));
  color:var(--text);
  padding:24px 16px 48px;
}

.topbar{
  width:100%;
  max-width:820px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:6px auto 16px;
  padding:10px 14px;
  background:rgba(255,255,255,.03);
  border:1px solid var(--panel-border);
  border-radius:12px;
  box-shadow:var(--shadow);
}

.brand{
  font-weight:600;
  letter-spacing:.3px;
  color:var(--muted);
}

.lang-switch{
  display:flex; gap:8px;
}

.lang-btn{
  border:1px solid var(--panel-border);
  background:transparent;
  color:var(--muted);
  padding:6px 10px;
  border-radius:10px;
  cursor:pointer;
}
.lang-btn.active{ color:var(--text); border-color:var(--accent); }

.container{
  width:100%;
  max-width:520px;
  background:var(--panel);
  border:1px solid var(--panel-border);
  border-radius:14px;
  box-shadow:var(--shadow);
}

.container h2{
  font-weight:600;
  font-size:1.25rem;
  padding:1rem 1.5rem;
  border-bottom:1px solid var(--panel-border);
  color:var(--text);
}

.wrapper{ margin:1.25rem 1.5rem 1.5rem; }

.input-box{ position:relative; }
.input-box input{
  width:100%; height:53px;
  color:var(--text);
  background:var(--input-bg);
  font-size:1.06rem; font-weight:500;
  border-radius:8px;
  letter-spacing:1.4px;
  border:1px solid var(--input-border);
  padding:0 2.85rem 0 1rem;
}
.input-box span{
  position:absolute; right:13px; top:0;
  cursor:pointer; line-height:53px;
  color:var(--muted);
}
.input-box span:hover{ color:var(--good) !important; }

.pass-indicator{
  width:100%; height:6px; position:relative;
  margin-top:.75rem; border-radius:25px;
  background:#09122a; border:1px solid var(--panel-border);
}
.pass-indicator::before{
  position:absolute; content:""; height:100%;
  width:50%; border-radius:inherit; transition:width .3s ease;
}
.pass-indicator#weak::before{ width:20%; background:var(--bad); }
.pass-indicator#medium::before{ width:50%; background:var(--warn); }
.pass-indicator#strong::before{ width:100%; background:var(--good); }

.pass-length{ margin:1.3rem 0 1.1rem; }
.details{
  display:flex; justify-content:space-between; align-items:center;
  color:var(--muted); margin-bottom:.6rem;
}
.pass-length input[type="range"]{
  width:100%; height:5px;
  accent-color: var(--accent);
}

.pass-settings .title{ color:var(--muted); }
.pass-settings .options{
  display:flex; list-style:none; flex-wrap:wrap; margin-top:1rem;
}
.pass-settings .option{
  display:flex; align-items:center; margin-bottom:1rem;
  width: calc(100% / 2);
  color:var(--text);
}
.options .option:first-child{ pointer-events:none; opacity:.8; }
.options .option input{
  height:16px; width:16px; cursor:pointer; accent-color:var(--accent);
}
.options .option label{
  cursor:pointer; padding-left:.63rem; color:var(--text);
}

.generate-btn{
  width:100%;
  color:#fff; border:none; outline:none; cursor:pointer;
  background:var(--accent); font-size:1.06rem;
  padding:.95rem 0; border-radius:10px;
  text-transform:uppercase; margin:.9rem 0 1.1rem;
}
.generate-btn:hover{ background:var(--accent-hover); }

.tohome{
  margin-top:18px; color:#fff; text-decoration:none;
  background:rgba(255,255,255,.08);
  border:1px solid var(--panel-border);
  padding:7px 16px; border-radius:12px;
  backdrop-filter: blur(6px);
}