:root {
  --bg: #0a0e14;
  --panel: #12171f;
  --border: #1f2937;
  --text: #b2becd;
  --dim: #5c6e80;
  --accent: #39bae6;
  --green: #7fd962;
  --red: #f26d78;
  --yellow: #ffad66;
  --font: "SF Mono", "Fira Code", "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; }
body::before { content:""; position:fixed; top:0; left:0; width:100%; height:100%; background: radial-gradient(ellipse at 20% 20%, rgba(57,186,230,.03) 0%, transparent 50%), radial-gradient(ellipse at 80% 80%, rgba(127,217,98,.02) 0%, transparent 50%); pointer-events:none; z-index:0; }
.container { max-width: 680px; margin: 0 auto; padding: 3rem 1.5rem; position:relative; z-index:1; }
/* Header */
header { margin-bottom: 2.5rem; border-bottom: 1px solid var(--border); padding-bottom: 1.5rem; }
.badge { display:inline-block; padding:.15rem .6rem; background:rgba(57,186,230,.12); color:var(--accent); border-radius:3px; font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; margin-bottom:.75rem; }
h1 { font-size:1.3rem; font-weight:400; color:#e6edf3; line-height:1.3; }
h1 span { color: var(--accent); }
.tagline { font-size:.8rem; color:var(--dim); margin-top:.4rem; }
/* Sections */
section { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1.5rem; margin-bottom:1rem; }
section h2 { font-size:.8rem; color:var(--dim); text-transform:uppercase; letter-spacing:.06em; margin-bottom:1rem; font-weight:400; }
/* Form */
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; }
.form-grid .full { grid-column:1/-1; }
label { font-size:.75rem; color:var(--dim); }
label strong { display:block; color:var(--text); font-weight:400; margin-bottom:.25rem; font-size:.8rem; }
input[type="file"], select { width:100%; padding:.55rem .7rem; background:var(--bg); border:1px solid var(--border); border-radius:6px; color:var(--text); font-family:inherit; font-size:.8rem; margin-top:.15rem; transition:border-color .2s; }
input[type="file"]:hover, select:hover { border-color: var(--accent); }
input[type="file"]::file-selector-button { background:var(--border); color:var(--text); border:none; padding:.35rem .8rem; border-radius:4px; margin-right:.5rem; cursor:pointer; font-family:inherit; font-size:.75rem; }
select { cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%235c6e80'%3E%3Cpath d='M6 8L2 4h8z'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .5rem center; appearance:none; padding-right:2rem; }
/* Buttons */
.actions { display:flex; gap:.5rem; margin-top:1.25rem; }
.btn { padding:.6rem 1.25rem; border-radius:6px; font-family:inherit; font-size:.8rem; cursor:pointer; border:none; transition: all .2s; }
.btn-primary { background:var(--accent); color:var(--bg); }
.btn-primary:hover { background:#4fc8f0; }
.btn-primary:disabled { background:var(--border); color:var(--dim); cursor:not-allowed; }
.btn-secondary { background:transparent; color:var(--dim); border:1px solid var(--border); }
.btn-secondary:hover { color:var(--text); border-color:var(--dim); }
/* Status & Results */
#status-area { margin-top:1rem; }
.status-card { background:var(--panel); border:1px solid var(--border); border-radius:8px; padding:1rem 1.5rem; font-size:.8rem; }
.status-card.success { border-left:3px solid var(--green); }
.status-card.pending { border-left:3px solid var(--yellow); }
.status-card.error { border-left:3px solid var(--red); }
.status-card .title { font-weight:600; margin-bottom:.25rem; }
.status-card.success .title { color:var(--green); }
.status-card.pending .title { color:var(--yellow); }
.status-card.error .title { color:var(--red); }
.matrix { display:grid; grid-template-columns:auto 1fr; gap:.3rem 1.5rem; margin:.75rem 0; font-size:.8rem; }
.matrix dt { color:var(--dim); }
.matrix dd { color:var(--text); }
.divider { border-top:1px solid var(--border); margin:1rem 0; }
.result-link { display:inline-block; margin-top:.5rem; color:var(--accent); text-decoration:none; font-size:.8rem; }
.result-link:hover { text-decoration:underline; }
/* Footer */
footer { margin-top:3rem; padding-top:1rem; border-top:1px solid var(--border); font-size:.7rem; color:var(--dim); display:flex; justify-content:space-between; }
footer a { color:var(--dim); text-decoration:none; }
footer a:hover { color:var(--text); }
/* Field table */
table { width:100%; border-collapse:collapse; font-size:.8rem; }
th { text-align:left; color:var(--dim); font-weight:400; padding:.5rem .75rem; border-bottom:1px solid var(--border); }
td { padding:.45rem .75rem; border-bottom:1px solid rgba(31,41,55,.5); }
tr.pass td:first-child { border-left:3px solid var(--green); }
tr.tolerated td:first-child { border-left:3px solid var(--yellow); }
tr.fail td:first-child { border-left:3px solid var(--red); }
pre { background:var(--bg); border:1px solid var(--border); border-radius:6px; padding:1rem; font-family:inherit; font-size:.8rem; overflow-x:auto; margin-top:.5rem; }