@font-face {
    font-family: Vazir;
    src: url('https://cdn.jsdelivr.net/npm/vazirmatn@33.0.3/fonts/webfonts/Vazirmatn-Regular.woff2') format('woff2');
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
}
:root { --green:#087b63; --green2:#0aa77f; --ink:#17342e; --muted:#6d807b; --bg:#f4f7f6; --line:#dfe9e6; --red:#c83b4c; --yellow:#d89b19; }
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); color:var(--ink); font-family:Vazir,Tahoma,Arial,sans-serif; font-size:14px; }
header { min-height:72px; background:#fff; border-bottom:1px solid var(--line); display:flex; align-items:center; padding:10px 5%; gap:30px; position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:10px; white-space:nowrap; }
.brand div { display:flex; flex-direction:column; }
.brand small, p { color:var(--muted); }
.logo { display:grid; place-items:center; width:38px; height:38px; background:linear-gradient(135deg,var(--green2),var(--green)); color:#fff; border-radius:12px; font-weight:bold; }
.logo.big { width:60px; height:60px; margin:auto; font-size:26px; border-radius:18px; }
nav { display:flex; gap:20px; flex:1; overflow:auto; padding:8px 0; }
a { color:var(--green); text-decoration:none; }
nav a { color:var(--ink); font-weight:bold; white-space:nowrap; }
nav a.active { color:var(--green); border-bottom:2px solid var(--green); }
main { max-width:1320px; margin:30px auto; padding:0 22px; }
h1 { margin:0 0 8px; font-size:25px; }
h2 { font-size:18px; margin-top:0; }
h3 { font-size:15px; }
p { line-height:1.8; }
.title-row { display:flex; justify-content:space-between; align-items:center; gap:15px; margin-bottom:22px; }
.title-row.compact { margin-bottom:10px; }
.title-row.compact p { margin:4px 0; }
.status-group { display:flex; gap:8px; flex-wrap:wrap; }
.cards { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin-bottom:20px; }
.cards article,.panel { background:#fff; border:1px solid var(--line); border-radius:16px; padding:20px; box-shadow:0 4px 18px #17342e08; }
.cards small { display:block; color:var(--muted); margin-bottom:10px; }
.cards strong { font-size:25px; }
.grid { display:grid; gap:18px; }
.grid.two { grid-template-columns:1fr 1.6fr; }
.grid.two-equal { grid-template-columns:1fr 1fr; }
.bucket { display:flex; justify-content:space-between; padding:13px 0; border-bottom:1px solid var(--line); }
table { width:100%; border-collapse:collapse; }
th,td { text-align:right; padding:13px; border-bottom:1px solid var(--line); vertical-align:top; }
th { color:var(--muted); font-size:12px; }
.table-wrap { overflow:auto; }
.badge,.mode { display:inline-block; padding:6px 10px; border-radius:20px; font-size:11px; background:#eef2f1; white-space:nowrap; }
.badge.sent,.badge.delivered,.mode.live { background:#dbf5eb; color:#087b63; }
.badge.pending,.badge.queued,.badge.accepted,.badge.preview,.mode.safe { background:#fff3d8; color:#9a6810; }
.badge.failed,.mode.danger { background:#ffe4e7; color:#b1283d; }
.badge.cancelled { background:#edf0ef; color:#63736f; }
.button,button { border:0; background:var(--green); color:#fff; padding:10px 16px; border-radius:9px; cursor:pointer; font-family:inherit; }
.button.secondary,.ghost { background:#edf5f2; color:var(--green); }
.link { background:none; color:var(--green); padding:0; }
.danger { background:#fff0f2; color:var(--red); }
.danger-solid { background:var(--red); }
.test { background:#b0780b; }
.actions,.step-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.actions form,.step-actions form { display:inline; }
label { display:block; margin-bottom:15px; font-weight:bold; }
input,select,textarea { display:block; width:100%; margin-top:7px; padding:11px; border:1px solid #cddbd7; border-radius:9px; background:#fff; font-family:inherit; }
textarea { min-height:90px; resize:vertical; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.check { display:flex; align-items:center; gap:9px; }
.check input { width:auto; margin:0; }
.top-gap { margin-top:30px; }
.steps { display:grid; gap:14px; margin-bottom:18px; }
.step-card { border:1px solid var(--line); border-radius:12px; padding:16px; background:#fbfdfc; }
.step-card.disabled { opacity:.65; }
.step-head { display:flex; justify-content:space-between; margin-bottom:14px; }
.step-head span,.step-card small { color:var(--muted); }
.step-card small { display:block; margin-top:6px; }
.filters { display:flex; gap:10px; margin-bottom:15px; }
.filters.compact { margin:0; }
.filters input,.filters select { margin:0; max-width:260px; }
.message { max-width:340px; white-space:normal; line-height:1.8; }
.alert { padding:12px 15px; border-radius:10px; margin-bottom:15px; }
.alert.ok { background:#daf5ea; color:#076b55; }
.alert.error { background:#ffe5e8; color:#a72b3c; }
.emergency,.warning-panel { border-color:#f1c6cc; }
.warning-panel { border-width:2px; }
.facts { margin:0; }
.facts div { display:flex; justify-content:space-between; padding:10px 0; border-bottom:1px solid var(--line); }
.facts dd { margin:0; font-weight:bold; }
.approval { border:2px solid #c9e7dd; }
.preview-cards { grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.login-page { min-height:100vh; display:grid; place-items:center; background:linear-gradient(140deg,#e7f5f0,#f6f9f8); }
.login-card { width:min(410px,92vw); background:#fff; padding:34px; border-radius:20px; box-shadow:0 18px 60px #17342e1c; }
.login-card h1 { text-align:center; margin-top:18px; }
.login-card>p { text-align:center; }
.hint { display:block; margin-top:7px; color:var(--muted); font-weight:normal; line-height:1.7; }
.pagination-wrap { display:flex; justify-content:space-between; align-items:center; gap:16px; padding:20px 0 2px; direction:rtl; }
.pagination-summary { color:var(--muted); }
.pagination-links { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.page-link,.page-gap { min-width:36px; height:36px; padding:0 10px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:9px; background:#fff; color:var(--green); }
.page-link.current { color:#fff; background:var(--green); border-color:var(--green); }
.page-link.disabled { color:#a6b3b0; background:#f5f7f6; cursor:not-allowed; }
.page-gap { border:0; min-width:auto; }
@media(max-width:900px) {
    header { gap:15px; padding:10px 15px; flex-wrap:wrap; }
    nav { order:3; width:100%; }
    .brand div { display:none; }
    .cards { grid-template-columns:repeat(2,1fr); }
    .grid.two,.grid.two-equal { grid-template-columns:1fr; }
}
@media(max-width:560px) {
    main { padding:0 12px; margin-top:18px; }
    .title-row { align-items:flex-start; flex-direction:column; }
    .cards { grid-template-columns:1fr 1fr; }
    .form-grid { grid-template-columns:1fr; }
    .filters { flex-direction:column; }
    .filters input,.filters select { max-width:none; }
    .top-gap { margin-top:0; }
    .step-actions button { padding:8px 10px; }
    .pagination-wrap { align-items:flex-start; flex-direction:column; }
    .pagination-links { gap:4px; }
    .page-link { min-width:34px; height:34px; padding:0 8px; }
}