:root { --ink:#17212b; --muted:#697586; --paper:#f5f2eb; --panel:#fffdf8; --line:#e3ded3; --wine:#7d2032; --wine-dark:#5f1424; --green:#26735c; --amber:#a46913; --red:#a83a3a; }
html { font-size:14px; min-height:100%; }
body { min-height:100vh; margin:0; color:var(--ink); background:radial-gradient(circle at 10% 0%,#fff8e8 0,transparent 32%),var(--paper); font-family:Inter,"Segoe UI",Arial,sans-serif; }
a { color:var(--wine); }
.shell { max-width:1480px; padding-left:32px; padding-right:32px; }
.topbar { position:sticky; top:0; z-index:20; background:rgba(255,253,248,.94); border-bottom:1px solid var(--line); backdrop-filter:blur(16px); }
.topbar .shell { min-height:72px; display:flex; align-items:center; gap:42px; }
.brand { display:flex; align-items:center; gap:12px; color:var(--ink); text-decoration:none; min-width:220px; }
.brand-mark { width:38px; height:38px; display:inline-grid; place-items:center; border-radius:11px; color:white; background:var(--wine); font-family:Georgia,serif; font-size:25px; box-shadow:0 7px 20px rgba(125,32,50,.2); }
.brand strong,.brand small { display:block; line-height:1.1; }.brand small { margin-top:4px; color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
nav { display:flex; gap:28px; flex:1; } nav a { color:#414a55; text-decoration:none; font-weight:600; } nav a:hover { color:var(--wine); }
.user-menu { display:flex; align-items:center; gap:14px; color:var(--muted); }.user-menu a { color:var(--muted); text-decoration:none; }.user-menu form { margin:0; }.user-menu button { border:0; background:none; color:var(--wine); font-weight:600; }
.main-content { padding-top:42px; padding-bottom:70px; min-height:calc(100vh - 130px); }
.page-heading { display:flex; justify-content:space-between; align-items:flex-end; gap:30px; margin-bottom:32px; }.page-heading.compact { align-items:center; }.page-heading h1 { margin:4px 0 8px; font-family:Georgia,serif; font-size:42px; letter-spacing:-.02em; }.page-heading p { color:var(--muted); margin:0; font-size:16px; }.eyebrow { color:var(--wine); text-transform:uppercase; font-weight:800; letter-spacing:.13em; font-size:11px; }
.btn-primary { background:var(--wine); border-color:var(--wine); box-shadow:0 6px 15px rgba(125,32,50,.15); }.btn-primary:hover,.btn-primary:focus { background:var(--wine-dark); border-color:var(--wine-dark); }.btn-outline-danger { color:var(--red); border-color:#dca9a9; }
.metric-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px; }.metric-card { background:var(--panel); border:1px solid var(--line); border-radius:18px; padding:22px; box-shadow:0 8px 30px rgba(55,43,25,.045); }.metric-card span { color:var(--muted); display:block; font-weight:600; }.metric-card strong { display:block; font-family:Georgia,serif; font-size:38px; margin-top:9px; }.metric-card.success { border-top:3px solid var(--green); }.metric-card.danger { border-top:3px solid var(--red); }.metric-card.warning { border-top:3px solid var(--amber); }
.panel { background:var(--panel); border:1px solid var(--line); border-radius:20px; padding:24px; box-shadow:0 12px 40px rgba(55,43,25,.05); }.panel.flush { padding:0; overflow:hidden; }.panel-header { display:flex; justify-content:space-between; margin-bottom:14px; }.panel-header h2 { margin:0 0 4px; font-family:Georgia,serif; }.panel-header p { color:var(--muted); margin:0; }
.table { margin:0; }.table > :not(caption) > * > * { padding:15px 13px; border-color:#eee9df; background:transparent; }.table thead th { color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.08em; white-space:nowrap; }.table td small { display:block; color:var(--muted); margin-top:4px; }.empty-state { padding:55px 20px; text-align:center; color:var(--muted); }
.status { display:inline-flex; border-radius:999px; padding:6px 10px; font-size:12px; font-weight:750; white-space:nowrap; background:#ebe8e1; color:#58606a; }.status-acceptedbysmtp,.status-completed { background:#dff1e9; color:#176348; }.status-failed,.status-completedwitherrors { background:#f7dfdf; color:#8b2929; }.status-skipped,.status-unknown,.status-retryscheduled { background:#f8ead0; color:#80530f; }.status-sending,.status-processing { background:#dfe9f8; color:#28548c; }.status-skippedduplicate { background:#e8e5ef; color:#5f5175; }
.status-pendingapproval,.status-ready { background:#eee4f4; color:#68447b; }
.upload-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }.upload-card { position:relative; display:flex; min-height:190px; flex-direction:column; padding:25px; border:1px dashed #c8bead; border-radius:18px; cursor:pointer; background:#fffaf0; transition:.2s; }.upload-card:hover { border-color:var(--wine); transform:translateY(-2px); }.upload-card strong { font-size:18px; margin-top:25px; }.upload-card small { color:var(--muted); margin:7px 0 20px; }.upload-card input { margin-top:auto; max-width:100%; }.upload-number { position:absolute; top:18px; right:18px; color:var(--wine); font-weight:800; text-transform:uppercase; }
.form-panel { max-width:1100px; }.form-label { font-weight:700; }.form-control { border-color:#d8d1c5; background:#fffefb; }.form-control:focus { border-color:var(--wine); box-shadow:0 0 0 .2rem rgba(125,32,50,.12); }.notice { padding:15px 18px; border-radius:12px; background:#f0eadd; color:#574b3a; }.form-actions { display:flex; justify-content:flex-end; align-items:center; gap:12px; padding-top:28px; }
.back-link { text-decoration:none; font-weight:650; }.heading-actions { display:flex; align-items:center; gap:12px; }.filter-row { display:flex; flex-wrap:wrap; gap:9px; margin:0 0 18px; }.filter-chip { padding:9px 13px; border-radius:999px; color:#565f68; background:#eae6de; text-decoration:none; }.filter-chip.active { color:white; background:var(--ink); }.filter-chip.success b { color:var(--green); }.filter-chip.danger b { color:var(--red); }.filter-chip.warning b { color:var(--amber); }.action-bar { display:flex; gap:10px; padding:15px; margin-bottom:18px; background:#fff8e9; border:1px solid #ebdcc0; border-radius:14px; }.action-bar form { margin:0; }.message-table { min-width:1100px; }.file-cell { max-width:250px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.error-cell { max-width:330px; color:#786b5c; font-size:13px; }
.login-shell { min-height:68vh; display:grid; place-items:center; }.login-card { width:min(440px,100%); padding:42px; background:var(--panel); border:1px solid var(--line); border-radius:24px; box-shadow:0 25px 80px rgba(61,44,22,.12); }.login-card .brand-mark { display:grid; margin-bottom:22px; }.login-card h1 { font-family:Georgia,serif; font-size:34px; margin:8px 0; }.login-card > p { color:var(--muted); margin-bottom:28px; }
.footer { display:flex; justify-content:space-between; padding-top:20px; padding-bottom:25px; color:var(--muted); border-top:1px solid var(--line); font-size:12px; }
@media (max-width:900px) { .shell { padding-left:18px; padding-right:18px; }.topbar nav { display:none; }.user-menu span { display:none; }.metric-grid { grid-template-columns:repeat(2,1fr); }.upload-grid { grid-template-columns:1fr; }.page-heading { align-items:flex-start; flex-direction:column; }.heading-actions { align-self:stretch; justify-content:space-between; }.footer { gap:10px; flex-direction:column; } }
@media (max-width:520px) { .metric-grid { grid-template-columns:1fr; }.page-heading h1 { font-size:34px; }.login-card { padding:28px 22px; }.brand { min-width:0; }.brand small { display:none; } }