:root {
    color-scheme: dark;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: #090d18;
    color: #eef2ff;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 0%, rgba(80, 70, 210, .28), transparent 34rem),
        radial-gradient(circle at 90% 25%, rgba(24, 170, 150, .16), transparent 28rem),
        #090d18;
}

main { width: min(100% - 2rem, 980px); margin: 0 auto; padding: 4rem 0; }
header { margin-bottom: 2rem; }
h1 { margin: .25rem 0 .75rem; font-size: clamp(2.2rem, 7vw, 4.5rem); letter-spacing: -.055em; }
h2 { margin: 0 0 1.25rem; font-size: 1.15rem; }
.eyebrow { color: #8f9bff; font-size: .72rem; font-weight: 800; letter-spacing: .18em; margin: 0; }
.subtitle { color: #9da8c4; max-width: 42rem; }

.status { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: 999px; font-size: .82rem; background: #172036; }
.status::before { content: ""; width: .55rem; height: .55rem; border-radius: 50%; background: #f5b942; }
.status.ok::before { background: #45d6a2; box-shadow: 0 0 12px #45d6a2; }
.status.error::before { background: #fa6374; }

.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.card, .console-card {
    border: 1px solid rgba(159, 171, 211, .15);
    background: rgba(17, 23, 40, .88);
    border-radius: 1rem;
    padding: 1.4rem;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .24);
}

label { display: grid; gap: .45rem; margin-bottom: 1rem; color: #b9c2dc; font-size: .82rem; font-weight: 650; }
input {
    width: 100%; border: 1px solid #2c3757; border-radius: .7rem; padding: .78rem .85rem;
    background: #0b1020; color: #fff; outline: none; font: inherit;
}
input:focus { border-color: #7d89ff; box-shadow: 0 0 0 3px rgba(125, 137, 255, .16); }
button { border: 0; border-radius: .7rem; padding: .78rem 1rem; background: #727fff; color: white; font-weight: 750; cursor: pointer; }
button:hover { filter: brightness(1.08); }
button:disabled { opacity: .45; cursor: not-allowed; }
.secondary { background: #263251; }
.danger { background: #662b3b; }
.text-button { padding: .3rem; color: #9da8c4; background: transparent; }

.session-card { margin-top: 1rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.session-card h2 { margin: .25rem 0; }
.session-card p:last-child { margin: 0; color: #9da8c4; }
.actions { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: flex-end; }
.console-card { margin-top: 1rem; background: #070a12; }
.console-header { display: flex; justify-content: space-between; align-items: center; }
.console-header h2 { margin: 0; }
pre { min-height: 9rem; margin: 1rem 0 0; overflow: auto; color: #a9eccf; white-space: pre-wrap; word-break: break-word; font-size: .8rem; line-height: 1.55; }

@media (max-width: 700px) {
    main { padding: 2rem 0; }
    .grid { grid-template-columns: 1fr; }
    .session-card { align-items: flex-start; flex-direction: column; }
    .actions { justify-content: flex-start; }
}