:root { font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #15251f; background: #f4f7f4; }
* { box-sizing: border-box; } body { margin: 0; } main { max-width: 1080px; margin: auto; padding: 64px 28px; } header, .toolbar, .dialog-header, .actions { display: flex; align-items: center; justify-content: space-between; gap: 20px; } header { border-bottom: 1px solid #cfd8d2; padding-bottom: 36px; } h1, h2, p { margin: 0; } h1 { font-size: clamp(2.25rem, 5vw, 3.7rem); letter-spacing: -.06em; line-height: 1; } h2 { font-size: 1.25rem; } .eyebrow { color: #397157; font-size: .72rem; font-weight: 750; letter-spacing: .12em; margin-bottom: 11px; } .intro { color: #59665f; margin-top: 15px; font-size: 1.06rem; } button { border: 0; cursor: pointer; font: inherit; font-weight: 700; border-radius: 5px; padding: 11px 16px; } .primary { background: #164d36; color: #fff; } .primary:hover { background: #0c3927; } .ghost { background: transparent; border: 1px solid #aebdb4; color: #264938; } .toolbar { padding: 34px 0 16px; } #alert-count { color: #69776f; font-size: .9rem; } .notice { padding: 16px; margin-top: 25px; background: #fff2dc; color: #663f00; border-left: 4px solid #ce8500; } .alert-list { display: grid; gap: 10px; } .alert-card { display: grid; grid-template-columns: 1fr auto; gap: 20px; padding: 21px 22px; background: #fff; border: 1px solid #dbe3dd; border-radius: 7px; } .alert-card h3 { margin: 0 0 9px; font-size: 1.07rem; } .meta { color: #65726a; font-size: .88rem; display: flex; gap: 13px; flex-wrap: wrap; } .badge { font-size: .72rem; text-transform: uppercase; font-weight: 800; border-radius: 20px; padding: 3px 8px; background: #f8e3c3; color: #744900; } .critical { background: #f8dcd8; color: #9c2d21; } .card-actions { display: flex; align-items: center; gap: 9px; } .danger { color: #a72d23; } .empty { color: #68776e; padding: 32px 0; } dialog { width: min(650px, calc(100% - 28px)); border: 0; border-radius: 8px; padding: 0; box-shadow: 0 20px 55px #15251f44; } dialog::backdrop { background: #163b2c77; } form { padding: 28px; } .icon { padding: 5px 9px; font-size: 1.3rem; background: transparent; color: #52645a; } label { display: block; font-weight: 700; font-size: .9rem; margin-top: 19px; } input, select { display: block; width: 100%; margin-top: 7px; padding: 10px; border: 1px solid #afbeb4; border-radius: 4px; font: inherit; background: #fff; } small { display: block; margin-top: 6px; font-weight: 400; color: #6a776f; line-height: 1.4; } .fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .check { display: flex; gap: 9px; align-items: center; } .check input { width: auto; margin: 0; } .query-label { margin: 21px 0 6px; font-weight: 700; font-size: .9rem; } pre { margin: 0; padding: 13px; overflow: auto; white-space: pre-wrap; background: #102b20; color: #d6f2dd; border-radius: 4px; font-size: .76rem; line-height: 1.45; } .actions { margin-top: 25px; justify-content: flex-end; } .error { color: #a72d23; margin-top: 16px; } code { background: #e6eee8; padding: 1px 4px; } @media (max-width: 600px) { main { padding: 34px 18px; } header { display: block; } header button { margin-top: 24px; } .alert-card { grid-template-columns: 1fr; } .card-actions { justify-content: flex-end; } .fields { grid-template-columns: 1fr; gap: 0; } }