*{box-sizing:border-box}
html{min-height:100%;background:#6faed8}
body{
 margin:0;min-height:100vh;font-family:"Segoe UI",Tahoma,Arial,sans-serif;color:#173b5c;
 background:
 radial-gradient(circle at 18% 12%,rgba(255,255,255,.95) 0 3%,rgba(255,255,255,.2) 13%,transparent 27%),
 radial-gradient(circle at 82% 20%,rgba(255,255,255,.7),transparent 20%),
 linear-gradient(180deg,#bfeaff 0,#7ec4ea 35%,#c8ecfb 100%);
}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(120deg,rgba(255,255,255,.22),transparent 38%,rgba(255,255,255,.12));mix-blend-mode:screen}
a{color:#075b99;text-decoration:none}a:hover{color:#0b8ed1;text-shadow:0 0 7px #8de5ff}
header{
 position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:14px;
 padding:10px 4%;background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(188,229,250,.68));
 border-bottom:1px solid rgba(255,255,255,.95);box-shadow:0 3px 18px rgba(20,75,115,.28);
 backdrop-filter:blur(12px)
}
header:after{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.95)}
.logo{font-size:21px;color:#155b8d!important;white-space:nowrap;text-shadow:0 1px #fff}
.topsearch{display:flex;flex:1;max-width:560px}
.topsearch input{
 flex:1;padding:10px 16px;border:1px solid #75a9c9;border-radius:17px 0 0 17px;
 background:linear-gradient(#fff,#e9f8ff);box-shadow:inset 0 2px 5px rgba(45,100,135,.16),0 1px 0 #fff
}
.topsearch button{
 border:1px solid #5d94ba;border-left:0;border-radius:0 17px 17px 0;color:#fff;
 padding:0 17px;background:linear-gradient(#70c5ee,#267eb5);
 box-shadow:inset 0 1px rgba(255,255,255,.8),0 2px 5px #23506b55
}
nav{margin-left:auto;white-space:nowrap}nav a{margin:0 4px;padding:7px 9px;border-radius:9px}
nav a:hover{background:linear-gradient(rgba(255,255,255,.85),rgba(160,221,249,.6));box-shadow:inset 0 1px #fff,0 0 10px #8edaff}
.wrap{max-width:1180px;margin:28px auto;padding:0 18px}
.hero,.panel,.card{
 background:linear-gradient(145deg,rgba(255,255,255,.86),rgba(220,245,255,.64));
 border:1px solid rgba(255,255,255,.96);border-radius:20px;
 box-shadow:inset 0 1px rgba(255,255,255,.98),0 10px 28px rgba(37,92,124,.22)
}
.hero{position:relative;overflow:hidden;padding:38px}
.hero:before{
 content:"";position:absolute;left:-10%;top:-70%;width:120%;height:80%;
 background:linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0));
 transform:rotate(-4deg);pointer-events:none
}
.hero h1{font-size:42px;margin:0 0 10px;color:#146b9d;text-shadow:0 2px #fff,0 0 14px #8edcff}
.hero p{color:#496c82}
.pill{
 display:inline-block;padding:8px 13px;margin:4px;border-radius:13px;color:#175b82;
 background:linear-gradient(#fff,#c9ecfb);border:1px solid #83b9d5;
 box-shadow:inset 0 1px #fff,0 2px 5px #36647a44
}
.pill:hover{background:linear-gradient(#fff,#aee4fa);box-shadow:0 0 12px #74d9ff}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:20px;margin-top:22px}
.card{padding:15px;transition:.18s transform,.18s box-shadow}
.card:hover{transform:translateY(-4px);box-shadow:inset 0 1px #fff,0 0 20px rgba(68,193,246,.52),0 14px 30px rgba(37,92,124,.26)}
.cover{
 height:220px;border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;
 font-size:55px;color:#fff;background:linear-gradient(145deg,#3d8fc1,#b8e8fb);
 border:1px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 5px #fff9,0 4px 10px #28556f38
}
.cover img{width:100%;height:100%;object-fit:cover}
.card h3{color:#155d8b;text-shadow:0 1px #fff}
.muted{color:#668396}.tags{color:#397ba4}
.btn,button{
 display:inline-block;border:1px solid #4d91ba;border-radius:10px;padding:9px 15px;
 background:linear-gradient(#91ddfa 0,#4aa8d7 48%,#2375aa 52%,#2e88ba 100%);
 color:#fff;text-decoration:none;font-weight:700;text-shadow:0 1px 2px #24516c;
 box-shadow:inset 0 1px rgba(255,255,255,.9),inset 0 -1px rgba(0,55,90,.3),0 2px 5px #23506b55;
 cursor:pointer
}
.btn:hover,button:hover{filter:brightness(1.1);box-shadow:inset 0 1px #fff,0 0 12px #63d6ff}
.input,textarea,select{
 width:100%;padding:11px;border:1px solid #79a9c4;border-radius:10px;
 background:linear-gradient(#fff,#effaff);box-shadow:inset 0 2px 4px #39647b22;color:#173b5c;font:inherit
}
label{display:block;font-weight:700;margin:15px 0;color:#245a78}
.form{max-width:700px;margin:auto;padding:25px}.form h1{color:#176b9c}
.error,.success{padding:12px;border-radius:11px;border:1px solid #fff;box-shadow:inset 0 1px #fff}
.error{background:linear-gradient(#ffecef,#ffd6dc);color:#8d2836}
.success{background:linear-gradient(#effff7,#ccefdc);color:#17663a}
.reader{background:rgba(255,255,250,.92);padding:35px;border-radius:17px;line-height:1.95;white-space:pre-wrap;box-shadow:0 10px 30px #234b6228;border:1px solid #fff}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}.stat{padding:20px;border-radius:14px;background:linear-gradient(#fff9,#cbeafa99);border:1px solid #fff;text-align:center}.stat b{display:block;font-size:28px;color:#176d9f;text-shadow:0 1px #fff}
hr{border:0;border-top:1px solid rgba(54,111,140,.2);margin:22px 0}
footer{text-align:center;padding:45px;color:#4f7285;text-shadow:0 1px #fff}
@media(max-width:800px){
 header{flex-wrap:wrap}.topsearch{order:3;flex-basis:100%;max-width:none}nav{margin-left:0;overflow:auto}
 .hero h1{font-size:31px}.stats{grid-template-columns:repeat(2,1fr)}.hero{padding:25px}
}