@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;500;600;700;800;900&display=swap');
:root { color-scheme: dark; font-family: Nunito, ui-rounded, system-ui, sans-serif; background: #000; color: #fff; } * { box-sizing: border-box; } body { margin: 0; background: radial-gradient(ellipse 95% 58% at 50% -16%, #133022 0%, #07120b 38%, #000 78%); min-height: 100vh; } main { max-width: 700px; margin: 0 auto; padding: 30px 16px 64px; } .hero { display: flex; justify-content: space-between; align-items: flex-start; padding: 14px 4px 25px; } .eyebrow { color: #00c805; letter-spacing: .14em; font-size: .66rem; font-weight: 800; margin: 0 0 8px; } h1 { font-size: clamp(2.35rem, 11vw, 3.8rem); font-weight: 900; letter-spacing: -.065em; line-height: .94; margin: 0; } h1 span { color: #00c805; } .status { color: #a7afa9; margin: 13px 0 0; font-size: .9rem; } .icon-button { border: 1px solid #28402e; background: #142118d9; color: #00c805; width: 42px; height: 42px; border-radius: 50%; font-size: 1.35rem; cursor: pointer; } .toolbar { border-top: 1px solid #1d2a20; border-bottom: 1px solid #1d2a20; color: #89938c; display: flex; justify-content: space-between; font-size: .75rem; margin-bottom: 16px; padding: 13px 2px; } .text-button { background: none; border: 0; color: #00c805; font: inherit; font-weight: 700; cursor: pointer; padding: 0; } #alerts { display: grid; gap: 12px; } .alert { background: linear-gradient(145deg, #131a14, #0b0e0b); border: 1px solid #253026; border-radius: 18px; padding: 19px; box-shadow: 0 15px 35px #0009; } .topline { display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #89938c; font-size: .74rem; } .priority { background: #00c805; color: #001804; border-radius: 999px; font-weight: 800; font-size: .64rem; letter-spacing: .08em; padding: 6px 10px; } .priority.medium { background: #ffb600; color: #2b1b00; } h2 { font-size: 1rem; font-weight: 800; letter-spacing: -.015em; line-height: 1.35; margin: 16px 0 8px; } .summary { color: #f0f3f0; font-size: .96rem; line-height: 1.55; margin: 0 0 10px; } .detail { color: #aab3ac; font-size: .86rem; line-height: 1.53; margin: 0 0 15px; } .source { color: #00c805; font-size: .86rem; font-weight: 800; text-decoration: none; } .empty { text-align: center; border: 1px dashed #2b3c2f; border-radius: 18px; color: #929d95; padding: 42px 16px; } .empty div { color: #00c805; font-size: 2rem; } .empty h2 { color: #fff; font-size: 1.1rem; margin: 12px 0 5px; } .empty p { font-size: .88rem; margin: 0; } dialog { border: 1px solid #314534; border-radius: 20px; background: #111611; color: #fff; max-width: min(92vw, 410px); padding: 0; box-shadow: 0 25px 60px #000c; } dialog::backdrop { background: #000c; } dialog form { padding: 25px; position: relative; } dialog h2 { font-size: 1.32rem; margin: 0 0 8px; } dialog p:not(.eyebrow):not(.manage-message) { color: #adb7af; font-size: .88rem; line-height: 1.5; } input { background: #060906; border: 1px solid #334336; border-radius: 12px; color: #fff; font: inherit; margin: 9px 0 4px; padding: 12px; width: 100%; } .danger { background: #e64c4c; border: 0; border-radius: 12px; color: #fff; cursor: pointer; font: inherit; font-weight: 800; margin-top: 12px; padding: 12px 14px; width: 100%; } .close { background: transparent; border: 0; color: #98a399; cursor: pointer; font-size: 1.5rem; position: absolute; right: 12px; top: 8px; } .manage-message { color: #ffb5b5; font-size: .82rem; min-height: 1em; }