/* =====================================
   Crystal Theme
===================================== */

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

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

body{

min-height:100vh;

background:
linear-gradient(135deg,#020617,#0f172a,#1e3a8a,#0f766e);

background-size:400% 400%;

animation:bgMove 15s infinite ease;

color:#fff;

}

@keyframes bgMove{

0%{background-position:0% 50%;}

50%{background-position:100% 50%;}

100%{background-position:0% 50%;}

}

/* =====================================
   Header
===================================== */

header{

text-align:center;

padding:40px;

backdrop-filter:blur(20px);

background:rgba(255,255,255,.08);

border-bottom:1px solid rgba(255,255,255,.15);

}

header h1{

font-size:42px;

color:#22c55e;

text-shadow:0 0 20px #22c55e;

}

header p{

margin-top:10px;

font-size:18px;

color:#dbeafe;

}

/* =====================================
   Container
===================================== */

.container{

width:92%;

max-width:900px;

margin:40px auto;

padding:35px;

border-radius:25px;

background:rgba(255,255,255,.08);

backdrop-filter:blur(25px);

border:1px solid rgba(255,255,255,.15);

box-shadow:

0 8px 40px rgba(0,0,0,.45),

0 0 25px rgba(34,197,94,.25);

}

/* =====================================
   Title
===================================== */

.container h2{

text-align:center;

font-size:30px;

margin-bottom:15px;

color:#22c55e;

}

.info{

text-align:center;

color:#d1d5db;

margin-bottom:30px;

line-height:1.6;

}

/* =====================================
   Search Box
===================================== */

.search-box{

display:flex;

gap:15px;

flex-wrap:wrap;

justify-content:center;

margin-bottom:25px;

}

.search-box input{

flex:1;

min-width:250px;

padding:16px;

border:none;

border-radius:14px;

background:rgba(255,255,255,.15);

backdrop-filter:blur(10px);

color:#fff;

font-size:16px;

outline:none;

}

.search-box input::placeholder{

color:#cbd5e1;

}

.search-box button{

padding:16px 30px;

border:none;

border-radius:14px;

cursor:pointer;

font-size:16px;

font-weight:600;

color:white;

background:

linear-gradient(45deg,#16a34a,#22c55e);

transition:.35s;

}

.search-box button:hover{

transform:translateY(-3px);

box-shadow:

0 0 20px #22c55e,

0 0 35px #16a34a;

}

/* =====================================
   Loading
===================================== */

#loading{

display:none;

text-align:center;

font-size:18px;

margin:25px;

color:#facc15;

}

/* =====================================
   Result Grid
===================================== */

#result{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:20px;

margin-top:30px;

}

/* =====================================
   Crystal Cards
===================================== */

.card{

padding:20px;

border-radius:18px;

background:rgba(255,255,255,.08);

border:1px solid rgba(255,255,255,.12);

backdrop-filter:blur(18px);

transition:.4s;

box-shadow:

0 8px 20px rgba(0,0,0,.25);

}

.card:hover{

transform:translateY(-6px);

box-shadow:

0 0 20px rgba(34,197,94,.4);

}

.card h3{

margin-bottom:12px;

color:#22c55e;

font-size:18px;

}

.card p{

font-size:15px;

line-height:1.7;

word-break:break-word;

}

/* =====================================
   Buttons
===================================== */

.buttons{

display:flex;

justify-content:center;

gap:20px;

margin-top:35px;

flex-wrap:wrap;

}

.buttons a,

.buttons button{

padding:15px 28px;

border:none;

border-radius:14px;

font-size:16px;

font-weight:600;

text-decoration:none;

cursor:pointer;

background:

linear-gradient(45deg,#16a34a,#22c55e);

color:white;

transition:.35s;

}

.buttons a:hover,

.buttons button:hover{

transform:translateY(-3px);

box-shadow:

0 0 20px #22c55e;

}

/* =====================================
   Status
===================================== */

#status{

font-weight:bold;

font-size:18px;

}

.pending{

color:#facc15;

}

.replied{

color:#22c55e;

}

/* =====================================
   Footer
===================================== */

footer{

margin-top:50px;

padding:20px;

text-align:center;

background:rgba(0,0,0,.35);

backdrop-filter:blur(20px);

color:#d1d5db;

}

/* =====================================
   Print
===================================== */

@media print{

header,

.search-box,

.buttons,

footer{

display:none;

}

body{

background:white;

color:black;

}

.container{

box-shadow:none;

background:white;

}

.card{

border:1px solid #ddd;

background:white;

}

}

/* =====================================
   Mobile
===================================== */

@media(max-width:768px){

.container{

width:96%;

padding:20px;

}

header h1{

font-size:30px;

}

.search-box{

flex-direction:column;

}

.search-box input,

.search-box button{

width:100%;

}

.buttons{

flex-direction:column;

}

.buttons a,

.buttons button{

width:100%;

}

}