:root { color-scheme: light; font-family: system-ui, 'Malgun Gothic', sans-serif; color: #132733; background: #eef3f5; }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; }
main { max-width: 1140px; margin: auto; padding: clamp(22px, 4vw, 58px); }
h1, h2, p { margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -.04em; margin: 6px 0 10px; }
h2 { font-size: 1.25rem; letter-spacing: -.025em; }
p { line-height: 1.6; }
.brand { color: #2c6a70; font-size: .79rem; font-weight: 800; letter-spacing: .16em; }
.intro, .muted { color: #435b66; }
.muted { font-size: .88rem; margin-top: 6px; }
.card { border: 1px solid #d6e1e5; border-radius: 14px; background: #fff; padding: clamp(16px, 3vw, 27px); margin-top: 18px; }
.ip-card, .section-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.ip-card { border-left: 4px solid #247781; margin-top: 28px; }
output { display: block; font-family: ui-monospace, Consolas, monospace; font-size: clamp(1.35rem, 5vw, 2.65rem); font-weight: 700; overflow-wrap: anywhere; margin-top: 8px; }
.actions, .inline-form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.inline-form { margin-top: 13px; }
label { font-weight: 650; font-size: .9rem; }
input, button { font: inherit; min-height: 42px; border-radius: 8px; }
input { padding: 8px 10px; border: 1px solid #9fb1b9; color: #132733; min-width: 0; }
button { padding: 8px 15px; border: 1px solid #1c6570; color: white; background: #1c6570; cursor: pointer; font-weight: 650; }
button.quiet { background: #f1f6f7; color: #254650; border-color: #c2d3d9; }
button:disabled { opacity: .55; cursor: default; }
button:focus-visible, input:focus-visible { outline: 3px solid #f2af3e; outline-offset: 2px; }
.message { margin-top: 8px; font-size: .9rem; overflow-wrap: anywhere; }
.section-heading { margin: 30px 0 12px; }
.account-grid, .settings-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 245px), 1fr)); gap: 12px; }
.account { padding: 15px 17px; border: 1px solid #d6e1e5; background: #fff; border-radius: 10px; }
.account strong { display: block; font-size: 1.65rem; margin-top: 3px; }
.account.full { border-color: #b76114; background: #fff8e8; }
.scroll-table { overflow: auto; }
table { width: 100%; border-collapse: collapse; min-width: 780px; margin-top: 8px; }
th, td { text-align: left; border-bottom: 1px solid #dde7eb; padding: 10px 8px; font-size: .88rem; }
th { white-space: nowrap; color: #405966; }
td button { min-height: 32px; padding: 4px 9px; white-space: nowrap; }
.stacked { display: grid; align-items: start; gap: 8px; margin-top: 12px; }
.stacked button { justify-self: start; }