:root { --green: #157a35; --deep: #0b4d22; --yellow: #f7d93b; --orange: #f0611c; --ink: #15201a; --muted: #5d6b62; --line: #dfe6e1; --soft: #f3f6f4; --err: #b3261e; --radius: 10px; }
* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.45 -apple-system, "Helvetica Neue", Arial, sans-serif; color: var(--ink); background: #f7f8f6; }
a { color: var(--deep); }
.top { display: flex; align-items: center; gap: 2rem; padding: .7rem 1.25rem; background: var(--deep); color: #fff; }
.brand { font-weight: 800; font-size: 1.05rem; } .brand span { color: var(--yellow); font-weight: 600; }
.top nav { display: flex; gap: .3rem; }
.top nav a { color: #cfe3d5; text-decoration: none; padding: .35rem .7rem; border-radius: 6px; }
.top nav a.active, .top nav a:hover { background: rgba(255,255,255,.12); color: #fff; }
.badge { background: var(--orange); color: #fff; font-size: .72rem; font-weight: 700; border-radius: 999px; padding: .1em .55em; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--orange); vertical-align: middle; }
main { padding: 1.25rem; max-width: 1600px; margin: 0 auto; }
h1 { margin: 0; font-size: 1.5rem; } h3 { margin: 1.2rem 0 .5rem; }
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.page-head p { color: var(--muted); margin: .15rem 0; }
.panel { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.1rem; margin-bottom: 1.1rem; }
.panel.narrow { max-width: 760px; }
.panel.tbl { overflow-x: auto; padding: .4rem .6rem; }
.filters { display: flex; gap: .6rem; flex-wrap: wrap; align-items: flex-end; }
.filters .grow { flex: 1 1 220px; }
.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; align-items: start; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } .grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: .6rem; }
label { display: block; font-size: .8rem; color: var(--muted); margin: .7rem 0 .25rem; font-weight: 600; }
.filters label, .grid2 label, .grid3 label { margin-top: 0; }
input[type=text], input[type=url], input[type=email], input[type=number], input[type=password], textarea, select { width: 100%; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 6px; font: inherit; background: #fff; }
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: 2px solid var(--green); outline-offset: 1px; border-color: var(--green); }
.btn { display: inline-block; padding: .5rem .9rem; border-radius: 6px; border: 1px solid var(--deep); background: var(--deep); color: #fff; font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.btn.secondary { background: #fff; color: var(--deep); } .btn.secondary:hover { background: #eef4f0; }
.btn.danger { background: #fff; color: var(--err); border-color: #e3b0ac; }
.btn.sm { padding: .3rem .65rem; font-size: .85rem; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }
.actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .8rem; }
.chk { display: flex; align-items: center; gap: .4rem; margin: 0; font-weight: 400; color: var(--ink); font-size: .9rem; }
form.inline { display: inline; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
tr.unread td { font-weight: 600; background: #fffbe8; }
.small { font-size: .82rem; } .muted { color: var(--muted); } .err { color: var(--err); }
.why { max-width: 360px; }
.status { display: inline-block; padding: .12em .55em; border-radius: 999px; font-size: .76rem; font-weight: 700; white-space: nowrap; background: #e6ebe8; color: #334; }
.status.failed, .s-bounced, .s-declined, .m-bounced, .m-failed, .m-complained { background: #fbe0d4; color: #8a3a0b; }
.status.processing, .s-sent, .m-queued, .m-sent, .m-delivery_delayed { background: #dde8f7; color: #1d3d6b; }
.s-replied, .c-medium { background: var(--yellow); color: #4a3b00; }
.s-interested, .c-high, .m-delivered, .m-opened, .m-received { background: #dcefe2; color: var(--deep); }
.s-skip, .c-low { background: #eee; color: #777; }
.flash { padding: .6rem .9rem; border-radius: 6px; margin-bottom: 1rem; background: #dcefe2; color: var(--deep); }
.flash.error { background: #fbe0d4; color: #8a3a0b; }
.subject { font-weight: 700; margin-top: .5rem; }
.mailbody { white-space: pre-wrap; margin-top: .5rem; line-height: 1.5; max-height: 460px; overflow: auto; }
.msg.in { border-left: 4px solid var(--orange); } .msg.out { border-left: 4px solid var(--deep); }
code { background: var(--soft); padding: .05em .3em; border-radius: 4px; }
@media (max-width: 900px) { .cols, .grid2, .grid3 { grid-template-columns: 1fr; } }