/* ===== PASSWORD CHECKER TECH STYLE ===== */

.hero{
text-align:center;
padding:60px 20px 40px;
}

.hero h1{
font-size:28px;
font-weight:600;
color:#0f172a;
letter-spacing:0.5px;
}

.hero p{
color:#64748b;
margin-top:10px;
}

/* ===== SEARCH BOX ===== */

.search{
display:flex;
justify-content:center;
gap:10px;
margin-top:25px;
flex-wrap:wrap;
}

.search input{
width:280px;
padding:12px 14px;
border-radius:10px;
border:1px solid #e2e8f0;
background:#ffffff;
font-size:14px;
transition:all .25s ease;
box-shadow:0 2px 8px rgba(0,0,0,0.04);
}

.search input:focus{
outline:none;
border-color:#2563eb;
box-shadow:0 0 0 3px rgba(37,99,235,0.15);
}

/* ===== BUTTON ===== */

.search button{
padding:11px 14px;
border:none;
border-radius:10px;
cursor:pointer;
font-size:14px;
transition:all .25s ease;
}

/* Eye button */
.search button:first-of-type{
background:#f1f5f9;
}

.search button:first-of-type:hover{
background:#e2e8f0;
}

/* Main button */
.search button:last-of-type{
background:linear-gradient(135deg,#2563eb,#1d4ed8);
color:white;
font-weight:500;
box-shadow:0 4px 14px rgba(37,99,235,0.3);
}

.search button:last-of-type:hover{
transform:translateY(-1px);
box-shadow:0 6px 18px rgba(37,99,235,0.4);
}

/* ===== RESULT CARD ===== */

.result{
margin-top:40px;
display:flex;
justify-content:center;
}

.card{
min-width:320px;
max-width:420px;
padding:22px;
border-radius:14px;
background:rgba(255,255,255,0.7);
backdrop-filter:blur(10px);
box-shadow:0 10px 30px rgba(0,0,0,0.08);
border:1px solid rgba(255,255,255,0.3);
text-align:left;
transition:all .3s ease;
}

/* ERROR */

.card.error{
border-left:5px solid #ef4444;
background:rgba(254,226,226,0.6);
}

.card.error b{
color:#dc2626;
}

/* SUCCESS */

.card.success{
border-left:5px solid #10b981;
background:rgba(220,252,231,0.6);
}

.card.success b{
color:#059669;
}

/* ICON STYLE */

.card::before{
content:"";
display:block;
height:6px;
width:40px;
border-radius:10px;
margin-bottom:12px;
background:linear-gradient(90deg,#2563eb,#22c55e);
}

/* TEXT */

.card{
font-size:15px;
line-height:1.6;
}

/* ===== MOBILE ===== */

@media(max-width:600px){

.search{
flex-direction:column;
align-items:center;
}

.search input{
width:100%;
max-width:320px;
}

.card{
width:90%;
}

}



/* ===== CENTER SEARCH BOX ===== */

.search{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
margin-top:30px;
width:100%;
}

/* Container wrap (nếu muốn đẹp hơn) */
.search{
max-width:700px;
margin-left:auto;
margin-right:auto;
}

/* INPUT FULL WIDTH */

.search input{
flex:1;
min-width:0;
padding:14px 16px;
border-radius:12px;
font-size:15px;
}

/* BUTTON SIZE BALANCE */

.search button{
padding:12px 16px;
border-radius:12px;
}

/* OPTIONAL: CARD STYLE CHO INPUT BLOCK */

.search{
background:#ffffff;
padding:12px;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,0.06);
border:1px solid #e5e7eb;
}



/* ===== INFO BOX ===== */

.info-box{
max-width:700px;
margin:25px auto 0;
padding:20px 22px;
border-radius:14px;
background:linear-gradient(135deg,#f8fafc,#eef2ff);
border:1px solid #e5e7eb;
box-shadow:0 8px 20px rgba(0,0,0,0.04);
transition:all .3s ease;
}

.info-box h3{
margin:0 0 12px;
font-size:16px;
color:#1e293b;
}

.info-box ul{
padding-left:18px;
margin:0;
}

.info-box li{
margin-bottom:8px;
font-size:14px;
color:#334155;
}

.info-box b{
color:#2563eb;
}

.info-box .note{
margin-top:12px;
font-size:13px;
color:#64748b;
}

/* hover nhẹ */

.info-box:hover{
transform:translateY(-2px);
box-shadow:0 12px 25px rgba(0,0,0,0.06);
}


/* ===== INFO BOX TECH STYLE ===== */

.info-box{
max-width:700px;
margin:25px auto 0;
padding:18px 20px;
border-radius:12px;
background:#0f172a;
color:#e2e8f0;
border:1px solid #1e293b;
box-shadow:0 10px 30px rgba(0,0,0,0.2);
font-family:ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* TITLE */

.info-title{
font-size:13px;
color:#38bdf8;
margin-bottom:12px;
text-transform:uppercase;
letter-spacing:1px;
}

/* GRID */

.info-grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:10px;
margin-bottom:12px;
}

/* ITEM */

.info-item{
display:flex;
justify-content:space-between;
background:#020617;
padding:8px 10px;
border-radius:8px;
border:1px solid #1e293b;
}

/* LABEL */

.info-item .label{
color:#64748b;
font-size:12px;
}

/* VALUE */

.info-item .value{
color:#22c55e;
font-size:12px;
}

/* DESC */

.info-desc{
font-size:12px;
color:#94a3b8;
line-height:1.5;
border-top:1px dashed #1e293b;
padding-top:10px;
}


.info-flow{
margin-top:10px;
font-size:11px;
color:#38bdf8;
font-family:monospace;
}