:root { font-family: Inter, system-ui, sans-serif; color: #222e43; background: #f0f2f6; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; padding: 1rem; }
main { max-width: 52rem; margin: 2rem auto; padding: clamp(1rem, 5vw, 3rem); background: white; border: 1px solid #dce2eb; border-radius: 1rem; }
form { display: grid; gap: .85rem; max-width: 25rem; }
label { display: grid; gap: .25rem; }
input, button { font: inherit; padding: .65rem; border: 1px solid #aebbd0; border-radius: .5rem; }
button { background: #dcf337; color: inherit; cursor: pointer; }
a { color: #344e73; }
li { margin-block: .7rem; overflow-wrap: anywhere; }
.bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.login-field, .color-field { display: flex; align-items: stretch; gap: .4rem; }
.login-field { margin-top: -.6rem; align-items: center; flex-wrap: wrap; }
.login-field span { font-weight: 650; overflow-wrap: anywhere; }
.login-field input, .color-field input:not([type=color]) { flex: 1; min-width: 6rem; }
.color-field { margin-top: .25rem; }
.color-field input[type=color] { width: 3rem; height: auto; min-height: 2.7rem; padding: .2rem; cursor: pointer; }
.company-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .45rem; }
.company-actions button { background: white; }
.company-actions .danger { color: #a8212d; border-color: #dca4a9; }

.company-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .4rem .75rem; }
.company-details { min-width: 0; }
.company-row .company-actions { flex: none; flex-wrap: nowrap; margin: 0; }
.company-row .company-actions button { padding: .4rem .55rem; white-space: nowrap; }