@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700&display=swap');

:root {
  --primary-light: #ff9966;
  --secondary-light: #ff5e62;
  --primary-dark: #2c2c2c;
  --secondary-dark: #444;
  --weak-color: #ffb3a7;
  --medium-color: #ffd699;
  --strong-color: #b2f2bb;
}

* { margin:0; padding:0; box-sizing:border-box; font-family:'Montserrat',sans-serif; }
body {
  min-height:100vh; display:flex; justify-content:center; align-items:center; padding:20px;
  background: linear-gradient(135deg, var(--primary-light), var(--secondary-light));
  transition: background 0.4s ease;
}

body.dark { background: linear-gradient(135deg, var(--primary-dark), var(--secondary-dark)); color: #fff; }

.toggle-container { position: fixed; top: 20px; right: 20px; }
#theme-toggle {
  background: rgba(255,255,255,0.3); border:none; padding:0.6rem 1rem; border-radius:50%;
  cursor:pointer; font-size:1.2rem; transition: background 0.3s ease;
}
#theme-toggle:hover { background: rgba(255,255,255,0.6); }

.container {
  background: rgba(255,255,255,0.25);
  backdrop-filter: blur(12px);
  border-radius:20px;
  padding:2.5rem;
  width:95%;
  max-width:450px;
  box-shadow:0 15px 40px rgba(0,0,0,0.2);
  transition: background 0.4s ease, color 0.4s ease;
}

body.dark .container { background: rgba(50,50,50,0.35); color:#fff; }

h1 { text-align:center; margin-bottom:2rem; font-size:2rem; font-weight:700; position:relative; color:#fff; }
h1::after { content:''; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width:60px; height:4px; background: linear-gradient(90deg, #ff9966,#ff5e62); border-radius:2px; }

.password-container {
  display:flex; align-items:center; justify-content:space-between;
  background: rgba(255,255,255,0.6); border-radius:12px; padding:0.8rem 1rem; margin-bottom:2rem; position:relative;
  transition: background 0.4s ease;
}
body.dark .password-container { background: rgba(255,255,255,0.1); }

#password { width:100%; border:none; outline:none; background:transparent; font-size:1rem; color:#333; letter-spacing:1px; transition: color 0.4s ease; }
body.dark #password { color:#fff; }

#copy-btn { cursor:pointer; color:#ff7f50; font-size:1.2rem; transition: transform 0.2s ease, color 0.2s ease; }
#copy-btn:hover { transform:scale(1.2); color:#ff9966; }

.tooltip {
  position:absolute; top:-35px; right:0; background:#333; color:#fff;
  padding:0.3rem 0.6rem; border-radius:6px; font-size:0.8rem;
  opacity:0; pointer-events:none; transition: opacity 0.3s ease, transform 0.3s ease;
}
.tooltip.show { opacity:1; transform:translateY(-5px); }

.options { background: rgba(255,255,255,0.6); padding:1.5rem; border-radius:12px; margin-bottom:1.5rem; box-shadow:0 2px 5px rgba(0,0,0,0.05); transition: background 0.4s ease; }
body.dark .options { background: rgba(50,50,50,0.25); }

.option { display:flex; justify-content:space-between; align-items:center; margin-bottom:1rem; }
.option label { font-weight:500; color:#333; transition: color 0.4s ease; }
body.dark .option label { color:#fff; }

.range-container { display:flex; align-items:center; gap:10px; width:60%; }
input[type="range"] { accent-color: #ff9966; height:6px; cursor:pointer; flex:1; }

input[type="checkbox"] { width:22px; height:22px; border:2px solid #ff9966; border-radius:5px; cursor:pointer; position:relative; appearance:none; transition: all 0.3s ease; }
input[type="checkbox"]:checked { background-color:#ff9966; }
input[type="checkbox"]:checked::after { content:'\2714'; color:white; position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:14px; }

#length-value { font-weight:600; color:#ff5e62; width:30px; text-align:center; }
body.dark #length-value { color:#ff9966; }

button {
  width:100%; padding:1rem; border:none; border-radius:12px; background: linear-gradient(45deg,#ff9966,#ff5e62);
  color:white; font-size:1rem; font-weight:600; cursor:pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 5px 15px rgba(255,154,158,0.3);
}
button:hover { transform:translateY(-3px); box-shadow:0 8px 20px rgba(255,154,158,0.4); }

.strength-container p { font-weight:500; margin-bottom:0.5rem; color:#333; transition: color 0.4s ease; }
body.dark .strength-container p { color:#fff; }

.strength-meter { height:12px; background: rgba(255,255,255,0.5); border-radius:6px; overflow:hidden; transition: background 0.4s ease; }
body.dark .strength-meter { background: rgba(255,255,255,0.2); }

.strength-bar { height:100%; width:0; border-radius:6px; background: linear-gradient(90deg,var(--weak-color),var(--medium-color),var(--strong-color)); transition: width 0.4s ease; }

@media (max-width: 768px) {
  .container { padding:2rem; }
  h1 { font-size:1.8rem; }
  .option { flex-direction:column; align-items:flex-start; gap:5px; }
  .range-container { width:100%; }
}