/* Copyright (c) 2025. Jericho Crosby (Chalwk) */

:root{
    --bg:#f5f7fb; --card:#ffffff; --muted:#6b7280; --accent1:#6c5ce7; --accent2:#00b894; --danger:#ff6b6b; --glass: rgba(255,255,255,0.6);
    --radius:12px; --shadow: 0 6px 20px rgba(16,24,40,0.08);
}

html,body{height:100%;}
body{font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue"; margin:0; background:linear-gradient(180deg,#eef2ff 0%, #f8fafc 100%); color:#0f172a; -webkit-font-smoothing:antialiased;}

.app{max-width:1100px;margin:28px auto;padding:20px;}
.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.app-header h1{margin:0;font-size:20px}
.panel{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:16px;margin-bottom:16px}
.generator{display:grid;grid-template-columns:1fr 320px;gap:18px}
.left{display:flex;flex-direction:column}
.row{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.row label{flex:1}
input[type=range]{width:220px}
.char-sets{display:flex;flex-wrap:wrap;gap:8px;border:none;padding:0;margin:0}
.char-sets label{background:linear-gradient(180deg,#fbfdff,#f3f8ff);padding:6px 10px;border-radius:8px}
.custom-field input{width:160px}
.actions{display:flex;gap:8px;align-items:center}
button{background:var(--accent1);color:white;padding:8px 12px;border-radius:10px;border:none;cursor:pointer;box-shadow:0 6px 18px rgba(108,92,231,0.12);}
button.secondary{background:transparent;color:var(--accent1);border:1px solid rgba(108,92,231,0.12);box-shadow:none}
.output input{width:calc(100% - 46px);padding:10px;border-radius:8px;border:1px solid #e6eef8}
#passwordWrap{display:flex;gap:8px;align-items:center}
#fav{background:transparent;border:none;font-size:20px;cursor:pointer}
.strength-row{display:flex;gap:10px;align-items:center;margin-top:12px}
#strengthBar{height:12px;flex:1;border-radius:8px;background:linear-gradient(90deg,#f87171 0%,#fb923c 33%,#fcd34d 66%,#34d399 100%);box-shadow:inset 0 -2px 0 rgba(0,0,0,0.06);overflow:hidden}
#strengthLabel{min-width:88px;font-weight:600}
.stats dl{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:10px 0}
.stats dt{font-size:12px;color:var(--muted)}
.stats dd{margin:0;font-weight:600}
.warnings{color:var(--danger);font-weight:600}
.right .panel h2{margin-top:0}
.history{max-height:360px;overflow:auto}
.history-item{display:flex;justify-content:space-between;align-items:center;padding:6px;border-radius:8px;margin-bottom:6px}
.history-item button{background:transparent;border:none}
.guidance .small{font-size:12px;color:var(--muted)}
.app-footer{text-align:center;margin-top:8px;color:var(--muted)}

.tooltip{display:inline-block;border-bottom:1px dotted var(--muted);cursor:help;margin-left:6px}

@media (max-width:920px){
    .generator{grid-template-columns:1fr;}
    .right{order:2}
}

body.dark{background:linear-gradient(180deg,#0b1020 0%, #071126 100%);color:#e6eef8}
body.dark .panel{background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02));box-shadow:none;border:1px solid rgba(255,255,255,0.04)}
body.dark input, body.dark textarea{background:transparent;color:inherit}

button:focus, input:focus{outline:3px solid rgba(99,102,241,0.18);outline-offset:2px}

@keyframes pop {
    0% {transform:scale(0.9);opacity:0}
    60%{transform:scale(1.05);opacity:1}
    100%{transform:scale(1);opacity:1}
}
.celebrate{animation:pop .6s ease}