@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;600;700&display=swap');
:root { font-family: Vazirmatn, Tahoma, sans-serif; color: #182136; background: #f4f7fb; }
* { box-sizing: border-box; } body { margin: 0; } .shell { width: min(1100px, calc(100% - 32px)); margin: 44px auto; }
header { display:flex; justify-content:space-between; gap:20px; align-items:start; margin-bottom:24px; } h1,h2,p { margin:0; } h1 { font-size:30px; } h2 { font-size:18px; } .eyebrow { color:#2362d8; font-weight:700; font-size:13px; } .subtitle,.section-heading p,.notice { color:#667085; margin-top:8px; } .header-actions { display:flex; gap:8px; align-items:center; } .draft-badge,.draft-link { background:#e8f0ff; color:#1558d6; padding:8px 12px; border-radius:999px; font-size:13px; white-space:nowrap; text-decoration:none; } .draft-link { background:#fff; border:1px solid #aec6f6; }
.card { background:#fff; border:1px solid #e4e8f0; border-radius:14px; padding:24px; margin-bottom:18px; box-shadow:0 8px 22px rgba(17, 35, 69, .04); } .grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; } label { display:grid; gap:7px; color:#344054; font-size:14px; } .full { grid-column:1/-1; } input,textarea,select { width:100%; padding:10px 12px; border:1px solid #d5dce8; border-radius:8px; font:inherit; background:#fff; } input:focus,textarea:focus,select:focus { outline:2px solid #c9dcff; border-color:#3675e8; } .section-heading { display:flex; justify-content:space-between; margin-bottom:18px; }
.ck-editor__editable { min-height:340px; direction:rtl; } .ck-content { font-family:Vazirmatn, Tahoma, sans-serif; } .elements { padding:0 24px 0 0; margin:0; display:grid; gap:10px; } .elements li { display:grid; gap:4px; padding:12px; border-right:3px solid #4f83eb; background:#f8faff; border-radius:8px; } .elements span { color:#667085; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.actions { display:flex; justify-content:left; gap:12px; } button { font:inherit; padding:11px 17px; border-radius:8px; border:1px solid transparent; cursor:pointer; } .primary { background:#2362d8; color:#fff; } .secondary { background:#fff; color:#2362d8; border-color:#aec6f6; } #status { margin-top:14px; min-height:24px; } .success { color:#067647; } .error { color:#b42318; }
.flash { background:#ecfdf3; border:1px solid #abefc6; border-radius:10px; padding:12px; margin-bottom:16px; } .draft-list { display:grid; gap:14px; } .draft-item { display:flex; justify-content:space-between; gap:20px; border:1px solid #e4e8f0; border-radius:10px; padding:18px; } .draft-main { min-width:0; } .draft-title-row { display:flex; gap:10px; align-items:center; margin-bottom:8px; } .draft-main p { color:#667085; margin-bottom:9px; } small,.muted { color:#7b8495; } .status { padding:4px 8px; border-radius:999px; font-size:12px; white-space:nowrap; } .status.draft { background:#fff5e8; color:#b54708; } .status.queued { background:#e8f0ff; color:#1558d6; } .status.tested { background:#ecfdf3; color:#067647; } .status.failed { background:#fff1f3; color:#c01048; } details { margin-top:12px; color:#475467; } details ol { padding-right:20px; } details li { margin:6px 0; } .draft-actions { display:flex; align-items:center; white-space:nowrap; } .empty { color:#667085; text-align:center; padding:28px; }
@media (max-width:680px) { .shell { width:min(100% - 22px, 1100px); margin:24px auto; } header,.actions,.draft-item { flex-direction:column; } .grid { grid-template-columns:1fr; } .full { grid-column:auto; } .card { padding:16px; } }