:root { font-family: system-ui, sans-serif; color: #222342; background: #f5f5fc; accent-color: #5351ae; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
header { display: flex; align-items: center; justify-content: space-between; padding: 16px max(24px, calc((100vw - 1100px) / 2)); background: white; border-bottom: 1px solid #e2e2f1; }
.brand, .heading, .actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.mark { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #5351ae; color: white; font-weight: 700; }
main { max-width: 1148px; padding: 30px 24px; margin: auto; }
.workspace { display: grid; grid-template-columns: minmax(200px, 250px) 1fr; align-items: start; gap: 20px; }
.card { min-width: 0; background: white; border: 1px solid #e2e2f1; border-radius: 16px; padding: 24px; }
.login { max-width: 420px; margin: 32px auto; }
h1 { margin: 0; font-size: 25px; overflow-wrap: anywhere; }
h2 { font-size: 16px; margin: 20px 0 12px; }
aside h2 { margin-top: 0; }
label, .stack, form { display: grid; gap: 8px; }
form, details, #results:not(:empty) { margin-top: 18px; }
label { font-size: 14px; font-weight: 600; }
input, select { font: inherit; min-width: 0; padding: 10px; border-radius: 8px; border: 1px solid #acacc9; background: white; color: inherit; }
button { padding: 10px 14px; font: inherit; font-weight: 600; border: 0; border-radius: 8px; cursor: pointer; background: #5351ae; color: white; overflow-wrap: anywhere; }
button.quiet, .badge { background: #eeedff; color: #3c397e; }
button:disabled { opacity: .6; cursor: default; }
button[aria-pressed="true"] { background: #5351ae; color: white; }
.badge { padding: 6px 10px; border-radius: 8px; font-size: 13px; }
fieldset { border: 1px solid #e2e2f1; border-radius: 10px; padding: 14px; min-width: 0; }
.options { display: grid; gap: 8px; grid-template-columns: 1fr 1fr; }
summary { font-weight: 650; cursor: pointer; padding: 10px 0; }
table { width: 100%; border-collapse: collapse; text-align: left; }
td, th { border-bottom: 1px solid #e2e2f1; padding: 9px; overflow-wrap: anywhere; }
#message { padding: 12px; background: #fff0ee; color: #8c2923; border-radius: 8px; }
@media (max-width: 680px) { .workspace, .options { grid-template-columns: 1fr; } main { padding: 16px; } }