:root{
    --bg:#0b0f14;
    --bg-elev:#0f151d;
    --panel:#131a24;
    --panel-2:#0f141b;
    --text:#e0e6ed;
    --muted:#9fb0c0;
    --accent:#2ea1ff; /* Caldari blue vibes */
    --accent-2:#00d1ff;
    --danger:#ff5c5c;
    --border:#1f2a38;
    --glow: 0 0 0px rgba(46,161,255,0), 0 0 12px rgba(46,161,255,.15);
}

html, body { height: 100%; }
html { background: radial-gradient(1200px 800px at 20% 0%, #0d1218 0%, var(--bg) 50%) fixed; }
body {
    margin: 0;
    color: var(--text);
    font-family: "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, system-ui, sans-serif;
    line-height: 1.4;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px;
}

.wrap { width: 100%; max-width: 980px; }

header h1{
    margin: 0 0 16px 0;
    font-weight: 600;
    letter-spacing: .5px;
    font-size: 28px;
    color: var(--text);
    text-shadow: 0 0 24px rgba(0, 209, 255, .15);
}
header {
    position: sticky;
    top: 0;
    backdrop-filter: blur(4px);
    background: linear-gradient(180deg, rgba(19,26,36,.85) 0%, rgba(19,26,36,0) 100%);
    padding-bottom: 8px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--border);
}

.card {
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    border: 1px solid var(--border);
    border-radius: 10px;
    box-shadow: var(--glow);
    padding: 20px;
}

h2 { margin: 18px 0 10px; font-size: 20px; color: var(--accent); font-weight: 600; }
h3 { color: var(--muted); font-weight: 600; margin: 14px 0 8px; }

p { color: var(--muted); }

form { display: block; }

table { width: 100%; border-collapse: collapse; background: transparent; }
td { padding: 8px 10px; vertical-align: middle; }
tr:nth-child(even) td { background-color: rgba(255,255,255,0.02); }
label { color: var(--text); }

textarea, select, input[type="number"], input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: #0b1118;
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 10px 12px;
    outline: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
textarea { resize: vertical; }
select {
    appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(1em + 4px), calc(100% - 12px) calc(1em + 4px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}
textarea:focus, select:focus, input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(46,161,255,.15); }

.actions { margin-top: 18px; display: flex; gap: 12px; }
.actions.right { justify-content: flex-end; }
input[type="submit"], .btn {
    background: linear-gradient(180deg, var(--accent) 0%, var(--accent-2) 100%);
    color: #001019;
    font-weight: 700;
    border: none;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: .5px;
    box-shadow: 0 4px 18px rgba(46,161,255,.25);
    transition: transform .06s ease, filter .2s ease, box-shadow .2s ease;
    text-decoration: none;
    display: inline-block;
}
input[type="submit"]:hover, .btn:hover { filter: brightness(1.05); box-shadow: 0 6px 22px rgba(46,161,255,.35); }
input[type="submit"]:active, .btn:active { transform: translateY(1px); }

/* Full-width button on mobile */
@media (max-width: 719px){
    .actions input[type="submit"], .actions .btn { width: 100%; }
}

/* Collapsible Refiner Settings */
details.refiner {
    margin-top: 18px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: linear-gradient(180deg, var(--panel) 0%, var(--panel-2) 100%);
    box-shadow: var(--glow);
    overflow: hidden;
}
details.refiner > summary {
    list-style: none;
    cursor: pointer;
    padding: 12px 14px;
    color: var(--accent);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    user-select: none;
}
details.refiner[open] > summary { border-bottom-color: rgba(255,255,255,0.08); }
details.refiner > summary::marker { display: none; }
details.refiner > summary::before {
    content: '\25BA'; /* ▶ */
    display: inline-block;
    margin-right: 8px;
    transition: transform .2s ease;
}
details.refiner[open] > summary::before { transform: rotate(90deg); }
details.refiner .refiner-content { padding: 14px; }

.error { color: var(--danger); font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 720px){ .grid-2 { grid-template-columns: 1fr 1fr; } }