:root{
  --bg1:#0f1d33; --bg2:#183154; --txt:#fff;
  --btn:#1e90ff; --btnH:#3aa0ff;
  --panel:rgba(255,255,255,.12); --border:rgba(255,255,255,.15);
  --shadow:0 10px 28px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--txt);
  font-family: Arial, Helvetica, sans-serif;
  background:
    radial-gradient(1200px 800px at 30% -10%, rgba(58,140,255,.18), transparent 60%),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  background-repeat:no-repeat;
  background-size:400% 400%;
  animation:bgshift 18s ease-in-out infinite alternate;
  min-height:100%;
}
@keyframes bgshift{from{background-position:0 0}to{background-position:100% 100%}}
.back{position:fixed; top:14px; left:14px; z-index:20; background:var(--btn); color:#fff; text-decoration:none; font-weight:700; padding:8px 12px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.35)}
.back:hover{background:var(--btnH)}
.lang{position:fixed; top:14px; right:14px; z-index:20}
.lang a{background:var(--btn); color:#fff; text-decoration:none; font-weight:700; padding:8px 12px; border-radius:10px; box-shadow:0 3px 10px rgba(0,0,0,.35)}
.lang a:hover{background:var(--btnH)}
.wrap{max-width:980px; margin:94px auto 40px; padding:0 18px}
.head{text-align:center; margin-bottom:16px}
.logo{width:220px; max-width:55vw; height:auto; display:block; margin:0 auto 12px; filter:drop-shadow(0 14px 30px rgba(0,0,0,.35)); animation:floaty 6s ease-in-out infinite}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
h1{margin:6px 0 6px; font-size:clamp(28px,4.5vw,40px)}
.pill{display:inline-block; background:rgba(255,255,255,.10); border:1px solid var(--border); padding:6px 10px; border-radius:999px; font-weight:700; opacity:.95}
.stack{display:flex; flex-direction:column; gap:14px}
.card{background:var(--panel); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card h2{margin:0 0 8px; font-size:20px}
.row{display:flex; gap:12px; flex-wrap:wrap; justify-content:center}
.btn{background:var(--btn); color:#fff; text-decoration:none; font-weight:700; padding:10px 14px; border-radius:10px; box-shadow:var(--shadow)}
.btn:hover{background:var(--btnH)}
.table{width:100%; border-collapse:collapse; overflow:hidden; border-radius:14px}
.table th,.table td{padding:10px 12px; border-bottom:1px solid rgba(255,255,255,.12)}
.table thead th{background:rgba(255,255,255,.10); text-align:left}
.table tbody tr:hover{background:rgba(255,255,255,.06)}
form{display:grid; gap:10px; text-align:left}
input,select,textarea{padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:rgba(255,255,255,.06); color:#fff}
input::placeholder,textarea::placeholder{color:#cfe2ff}
label{font-weight:700; font-size:14px}
small{opacity:.85}
footer{text-align:center; opacity:.85; margin:28px 0 20px; font-size:14px}
.note{font-size:13px; opacity:.9}