
:root{--b:#102a66;--b2:#0b55c8;--g:#f2a51a;--bg:#f5f7fb;--line:#d9e3f2;--mut:#64748b}
*{box-sizing:border-box}body{margin:0;background:var(--bg);font-family:Arial,Helvetica,sans-serif;color:#14213d}
.n5{max-width:1280px;margin:auto;padding:18px 14px 80px}.n5head{background:linear-gradient(135deg,#061f55,#0b55c8);color:white;border-radius:24px;padding:22px;box-shadow:0 16px 34px rgba(15,42,102,.18);margin-bottom:16px}
.n5top{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap}.n5head h1{margin:0;font-size:30px}.n5head p{margin:6px 0 0;color:#dbeafe;font-weight:700}
.n5btn{border:0;border-radius:10px;padding:10px 13px;font-weight:900;cursor:pointer;background:#e5e7eb;color:#111}.n5btn.primary{background:var(--g)}.n5btn.blue{background:var(--b2);color:white}
.n5tabs{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}.n5tab{border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:white;border-radius:999px;padding:10px 14px;font-weight:900;cursor:pointer}.n5tab.active{background:white;color:var(--b)}
.n5panel{background:white;border:1px solid var(--line);border-radius:20px;box-shadow:0 10px 26px rgba(15,23,42,.07);overflow:hidden;margin-bottom:16px}.n5ph{padding:16px 18px;background:#f8fbff;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}.n5ph h2{margin:0;color:var(--b)}.n5ph p{margin:4px 0 0;color:var(--mut);font-weight:700;font-size:13px}.n5body{padding:18px}
.n5recips{display:grid;grid-template-columns:repeat(auto-fit,minmax(245px,1fr));gap:10px}.n5user{display:flex;gap:10px;border:1px solid var(--line);border-radius:14px;padding:12px;background:#f8fbff;cursor:pointer;min-height:86px}.n5user input{margin-top:4px}.n5user b{display:block;color:var(--b)}.n5user small{display:block;color:var(--mut);word-break:break-word}.role{display:inline-block;margin-top:6px;background:#eef4ff;color:#0b55c8;border-radius:999px;padding:3px 8px;font-size:12px;font-weight:900}
.n5form{display:grid;gap:14px}.n5form label{font-weight:900;color:var(--b)}.n5form input,.n5form textarea,.n5form select{width:100%;margin-top:7px;border:1px solid #cbd5e1;border-radius:12px;padding:13px;font-size:16px}.n5form textarea{min-height:130px}
.n5stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:14px}.stat{border:1px solid var(--line);border-radius:14px;background:#f8fbff;padding:14px}.stat b{display:block;font-size:26px;color:var(--b)}.stat span{color:var(--mut);font-weight:900;font-size:12px}
.wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}.tbl{width:100%;border-collapse:collapse;min-width:840px}.tbl th{background:var(--b);color:white;text-align:left;padding:11px;font-size:13px}.tbl td{border-bottom:1px solid #e5eaf2;padding:11px;font-size:13px;vertical-align:top}
.badge{display:inline-block;border-radius:999px;padding:4px 9px;font-weight:900;font-size:12px;background:#eef4ff;color:#0b55c8}.sent,.created,.read{background:#ecfdf5;color:#12803c}.failed{background:#fee2e2;color:#b00020}.pending{background:#fff7ed;color:#c2410c}
.filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:10px;margin-bottom:14px}.hide{display:none!important}.msg{font-weight:900;color:var(--mut);margin-top:10px}
@media(max-width:700px){.n5{padding:10px 8px 80px}.n5head{border-radius:18px}.n5head h1{font-size:24px}}

.feed{display:grid;gap:14px}.feedcard{background:#fff;border:1px solid #dbe4ef;border-left:5px solid #102a66;border-radius:14px;padding:18px}.feedcard.unread{border-left-color:#f2a51a;background:#fffdf5}.feedtop,.feedmeta{display:flex;justify-content:space-between;gap:12px;align-items:center}.module{font-size:12px;font-weight:900;text-transform:uppercase;color:#102a66;background:#eaf0fb;border-radius:99px;padding:5px 9px}.date{font-size:13px;color:#64748b}.feedcard h3{margin:12px 0 8px;color:#102a66;font-size:19px}.feedmsg{color:#334155;line-height:1.55}.feedmeta{margin:14px 0;color:#64748b;font-size:13px}.feedmeta span{margin-left:auto}.empty{padding:26px;text-align:center;color:#64748b;background:#f8fafc;border-radius:12px}@media(max-width:650px){.feedtop,.feedmeta{align-items:flex-start;flex-direction:column}.feedmeta span{margin-left:0}}

/* S007 Gmail-style mailbox */
.mailtoolbar{display:flex;align-items:baseline;gap:14px;padding:14px 18px;border-bottom:1px solid var(--line);background:#fff}.mailtoolbar h2{margin:0;color:var(--b)}.mailtoolbar span{color:var(--mut);font-size:13px;font-weight:700}.mailbox{background:#fff}.mailrow{width:100%;display:grid;grid-template-columns:24px minmax(160px,240px) minmax(260px,1fr) auto 150px;gap:12px;align-items:center;border:0;border-bottom:1px solid #e5e7eb;background:#fff;padding:13px 16px;text-align:left;cursor:pointer;color:#1f2937}.mailrow:hover{box-shadow:inset 0 0 0 1px #cbd5e1}.mailrow.unread{background:#f8fbff;font-weight:800}.mailcheck{color:#f2a51a;font-size:12px}.mailfrom{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mailsub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mailsub span{font-weight:400;color:#64748b}.maildate{font-size:12px;color:#64748b;text-align:right;white-space:nowrap}.mailstatus{font-size:11px;font-weight:900;border-radius:999px;padding:4px 8px;background:#fff7ed;color:#c2410c}.mailstatus.ok{background:#ecfdf5;color:#12803c}.mailstatus.bad{background:#fee2e2;color:#b00020}.mailempty{padding:34px;text-align:center;color:#64748b}.recipientList{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px;margin-top:8px}.recipient{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:12px;padding:10px;background:#f8fbff}.recipient b,.recipient small{display:block}.recipient small{color:#64748b;word-break:break-word}.reciphead{display:flex;justify-content:space-between;align-items:center}.n5btn.send{min-width:120px;font-size:16px}
@media(max-width:800px){.mailrow{grid-template-columns:20px minmax(100px,150px) 1fr auto}.mailstatus{display:none}.maildate{grid-column:4}.mailsub span{display:none}}
@media(max-width:560px){.mailtoolbar{display:block}.mailtoolbar span{display:block;margin-top:4px}.mailrow{grid-template-columns:18px 1fr auto;gap:8px;padding:12px 10px}.mailfrom{grid-column:2}.mailsub{grid-column:2/4}.maildate{grid-column:3;grid-row:1}.mailstatus{display:none}}

/* S008 mailbox message view */
.n5modal{position:fixed;inset:0;background:rgba(15,23,42,.58);display:none;align-items:center;justify-content:center;padding:20px;z-index:10020}.n5modal.show{display:flex}.n5message{position:relative;background:#fff;width:min(760px,96vw);max-height:88vh;overflow:auto;border-radius:18px;padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.3)}.n5close{position:absolute;right:16px;top:12px;border:0;background:transparent;font-size:32px;line-height:1;cursor:pointer;color:#475569}.n5message h2{margin:0 44px 10px 0;color:#102a66}.n5meta{padding:12px 0 18px;border-bottom:1px solid #dbe4f0;color:#475569;line-height:1.6}.n5messagebody{white-space:pre-wrap;padding:22px 0;color:#172033;line-height:1.65;min-height:120px}.n5message .n5btn{display:inline-flex;text-decoration:none}.mailrow{cursor:pointer}
