*{box-sizing:border-box}
body{margin:0;font-family:'Montserrat',sans-serif;background:linear-gradient(135deg,#007bff,#00c2ff)}
.wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}
.card{width:100%;max-width:680px;background:#fff;border-radius:16px;box-shadow:0 10px 28px rgba(0,0,0,.18);padding:28px;text-align:center}
h1{margin:0 0 6px;font-weight:700}
.blue{color:#007bff}
.sub{color:#555;margin:0 0 18px}
.form input{width:100%;padding:12px 14px;margin:8px 0;border:1px solid #ddd;border-radius:10px;font-size:15px}
.form button{width:100%;padding:12px 14px;margin-top:8px;border:0;border-radius:10px;background:#007bff;color:#fff;font-size:16px;cursor:pointer}
.form button:hover{background:#0565d1}
.alert{padding:10px 12px;border-radius:8px;margin-bottom:10px}
.alert.error{background:#ffe8e8;color:#b70000;border:1px solid #ffbfbf}
.result{margin-top:16px;background:#f6f8fa;border:1px solid #e9edf3;border-radius:10px;padding:12px}
.shortbox{display:flex;gap:8px;margin-top:6px}
.shortbox input{flex:1;padding:10px;border:1px solid #ccd3db;border-radius:8px}
.shortbox button{padding:10px 12px;background:#28a745;color:#fff;border:0;border-radius:8px;cursor:pointer}
.shortbox button:hover{background:#1f8a38}
.mini{color:#777;font-size:12px}
.mt{margin-top:22px}
.table{margin-top:8px;text-align:left}
.thead,.trow{display:grid;grid-template-columns:1fr 84px 150px;gap:12px;align-items:center;padding:8px 10px;border-bottom:1px solid #eef2f7}
.thead{font-weight:600;color:#222;background:#f7f9fc;border-radius:8px 8px 0 0}
.trow span a{color:#007bff;text-decoration:none}
.trow span a:hover{text-decoration:underline}
footer{color:#e8f7ff;margin-top:14px}