*{margin:0;padding:0;box-sizing:border-box}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;background:linear-gradient(135deg,#0f0c29,#302b63,#24243e);color:#e0e0e0;min-height:100vh;padding:20px}
.container{max-width:860px;margin:0 auto}
header{text-align:center;padding:40px 0 30px}
header h1{font-size:2.2em;background:linear-gradient(90deg,#00d2ff,#3a7bd5);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:8px}
.subtitle{color:#8e8ea0;font-size:1.1em}
.card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:24px;margin-bottom:20px;backdrop-filter:blur(10px)}
.card h2{font-size:1.2em;margin-bottom:14px;color:#fff}
table{width:100%;border-collapse:collapse}
table tr{border-bottom:1px solid rgba(255,255,255,.06)}
table td{padding:9px 12px;font-size:.95em}
table .label{color:#8e8ea0;width:130px;white-space:nowrap}
.extensions{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:rgba(58,123,213,.2);border:1px solid rgba(58,123,213,.3);padding:3px 10px;border-radius:20px;font-size:.82em;color:#7eb8ff}
.tests{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.test-item{padding:10px;border-radius:8px;font-size:.95em;text-align:center}
.test-item.pass{background:rgba(0,200,83,.1);border:1px solid rgba(0,200,83,.2)}
.test-item.fail{background:rgba(255,82,82,.1);border:1px solid rgba(255,82,82,.2)}
.msg-form{display:flex;gap:10px;margin-bottom:14px}
.msg-form input{flex:1;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#e0e0e0;font-size:.95em}
.msg-form input:focus{outline:none;border-color:#3a7bd5}
.msg-form button{padding:10px 24px;border-radius:8px;border:none;background:linear-gradient(90deg,#00d2ff,#3a7bd5);color:#fff;cursor:pointer;font-size:.95em}
.msg-form button:hover{opacity:.85}
.alert{background:rgba(0,200,83,.12);border:1px solid rgba(0,200,83,.25);padding:10px 14px;border-radius:8px;margin-bottom:12px;color:#69f0ae}
.messages{display:flex;flex-direction:column;gap:6px}
.msg{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;background:rgba(255,255,255,.03);border-radius:8px}
.msg small{color:#666;font-size:.8em;white-space:nowrap;margin-left:12px}
.links{display:flex;gap:12px;flex-wrap:wrap}
.links a{padding:10px 20px;background:rgba(58,123,213,.15);border:1px solid rgba(58,123,213,.3);border-radius:8px;color:#7eb8ff;text-decoration:none}
.links a:hover{background:rgba(58,123,213,.3)}
footer{text-align:center;padding:30px 0;color:#555;font-size:.9em}
.db-form .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.db-form label{display:block;color:#8e8ea0;margin-bottom:4px;font-size:.9em}
.db-form input{width:100%;padding:10px 14px;border-radius:8px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);color:#e0e0e0;font-size:.95em}
.db-form input:focus{outline:none;border-color:#3a7bd5}
.btn{padding:10px 30px;border-radius:8px;border:none;background:linear-gradient(90deg,#00d2ff,#3a7bd5);color:#fff;cursor:pointer;font-size:1em;margin-top:12px}
.btn:hover{opacity:.85}
.result-ok{color:#69f0ae;background:rgba(0,200,83,.1);padding:14px;border-radius:8px;margin-top:14px}
.result-err{color:#ff5252;background:rgba(255,82,82,.1);padding:14px;border-radius:8px;margin-top:14px}
