/* Postomatic — RTL, mobile-first, glass/dark.
   The colour palette is intentionally tight so any brand colour the user
   plugs in stands out without clashing with chrome. */
:root {
  --bg:           #0b1220;
  --bg-2:         #111a2c;
  --surface:      rgba(255,255,255,0.04);
  --surface-2:    rgba(255,255,255,0.07);
  --line:         rgba(255,255,255,0.10);
  --fg:           #e6edf6;
  --muted:        #94a3b8;
  --primary:      #7c5cff;
  --primary-soft: rgba(124,92,255,0.18);
  --success:      #10b981;
  --warn:         #f59e0b;
  --danger:       #ef4444;
  --radius:       14px;
  --shadow:       0 10px 40px rgba(0,0,0,0.35);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:linear-gradient(180deg,#0b1220 0%,#0f1730 100%); color:var(--fg);
  font-family: ui-sans-serif, system-ui, "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  -webkit-font-smoothing:antialiased; min-height:100vh; }
html { direction: rtl; }
a { color: var(--primary); text-decoration: none; }
button { font-family: inherit; }

/* ── App shell ─────────────────────────────────────────────────────────── */
.app { display:flex; flex-direction:column; min-height:100vh; }
.topbar { display:flex; align-items:center; justify-content:space-between;
  padding: 14px 18px; border-bottom:1px solid var(--line); position:sticky; top:0;
  background: rgba(11,18,32,0.85); backdrop-filter: blur(12px); z-index:5; }
.brand { font-weight: 800; font-size: 18px; letter-spacing: -0.5px; display:flex; align-items:center; gap:8px; }
.brand .dot { width:10px; height:10px; border-radius:50%;
  background: linear-gradient(135deg,#7c5cff,#22d3ee); box-shadow:0 0 14px var(--primary-soft); }
.topbar .right { display:flex; gap:10px; align-items:center; }
.tag { font-size:11px; padding:3px 8px; border-radius:999px; background:var(--primary-soft); color:#cbb8ff; }

/* ── Side / mobile nav ─────────────────────────────────────────────────── */
.layout { display:grid; grid-template-columns: 220px 1fr; flex:1; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } }

.sidebar { padding:14px 12px; border-left:1px solid var(--line); display:flex; flex-direction:column; gap:4px; }
@media (max-width: 760px) { .sidebar { display:none; } }
.sidebar a { display:flex; gap:10px; align-items:center; padding:10px 12px;
  border-radius:10px; color:var(--muted); font-size:14px; }
.sidebar a:hover { background: var(--surface); color:var(--fg); }
.sidebar a.active { background: var(--primary-soft); color:#fff; }

.bottombar { display:none; position:sticky; bottom:0; left:0; right:0;
  border-top:1px solid var(--line); background: rgba(11,18,32,0.95); backdrop-filter:blur(8px); }
@media (max-width: 760px) { .bottombar { display:flex; justify-content:space-around; padding:6px 0; } }
.bottombar a { color: var(--muted); font-size: 11px; text-align:center; padding:6px 4px; }
.bottombar a.active { color: #fff; }
.bottombar a div { font-size: 18px; line-height:1.1; }

main { padding: 18px; max-width: 980px; width:100%; margin: 0 auto; }
@media (max-width: 760px) { main { padding: 14px 14px 80px; } }

/* ── Cards / inputs ────────────────────────────────────────────────────── */
.card { background: var(--surface); border:1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow); }
.card + .card { margin-top: 12px; }
.row { display:flex; gap:10px; flex-wrap: wrap; }
.row > * { flex: 1 1 200px; }
.label { font-size: 12px; color: var(--muted); margin-bottom: 6px; display:block; }
.input, .textarea, .select {
  width:100%; padding: 10px 12px; border-radius: 10px;
  border:1px solid var(--line); background: var(--surface-2); color:var(--fg);
  font-size:14px; outline:none; transition:border-color .12s, background .12s;
}
.input:focus, .textarea:focus, .select:focus { border-color: var(--primary); background: rgba(124,92,255,0.08); }
.textarea { min-height: 96px; resize: vertical; }
.btn { display:inline-flex; gap:6px; align-items:center; justify-content:center;
  padding: 10px 16px; border-radius: 10px; border:0; cursor:pointer; font-weight:600; font-size:14px;
  background: var(--primary); color:#fff; transition: transform .06s; }
.btn:active { transform: scale(0.98); }
.btn.ghost { background: var(--surface-2); color: var(--fg); }
.btn.danger { background: var(--danger); }
.btn.success { background: var(--success); }
.btn.sm { padding: 6px 10px; font-size:12px; border-radius: 8px; }
.btn.full { width:100%; }
.btn:disabled { opacity:.5; cursor:not-allowed; }

.h1 { font-size: 22px; font-weight: 800; letter-spacing:-.4px; margin: 0 0 12px; }
.h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.muted { color: var(--muted); font-size: 13px; }
.sep { height:1px; background: var(--line); margin: 12px 0; }

/* ── Lists / chips ─────────────────────────────────────────────────────── */
.list { display: flex; flex-direction: column; gap: 8px; }
.list-item { display:flex; justify-content:space-between; align-items:center; padding:12px;
  border-radius: 10px; background: var(--surface-2); border:1px solid var(--line); }
.list-item .meta { font-size: 12px; color: var(--muted); margin-top: 2px; }
.chip { padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip.draft     { background: rgba(148,163,184,.15); color:#cbd5e1; }
.chip.approved  { background: rgba(99,102,241,.15);  color:#c7d2fe; }
.chip.scheduled { background: rgba(245,158,11,.15);  color:#fcd34d; }
.chip.posted    { background: rgba(16,185,129,.15);  color:#6ee7b7; }
.chip.failed    { background: rgba(239,68,68,.15);   color:#fca5a5; }
.chip.admin     { background: rgba(124,92,255,.18);  color:#cbb8ff; }

/* ── Login screen ──────────────────────────────────────────────────────── */
.login-wrap { min-height: 100vh; display:grid; place-items:center; padding:24px; }
.login-card { width: 100%; max-width: 380px; padding: 24px; background: var(--surface);
  border:1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); }
.login-card h1 { margin: 0 0 4px; font-size: 22px; }
.login-card p  { margin: 0 0 16px; color: var(--muted); font-size: 13px; }
.dev-otp { margin-top: 12px; padding: 10px; border-radius: 10px;
  background: rgba(245,158,11,.12); color:#fcd34d; font-size: 12px; text-align:center; }

/* ── Chat ──────────────────────────────────────────────────────────────── */
.chat-thread { display:flex; flex-direction:column; gap:8px; max-height: 60vh; overflow:auto; padding: 8px; }
.bubble { padding: 10px 12px; border-radius: 14px; max-width: 80%; line-height:1.6; font-size:14px; white-space: pre-wrap; }
.bubble.user      { align-self:flex-start; background: var(--primary-soft); }
.bubble.assistant { align-self:flex-end;  background: var(--surface-2); }

/* ── Modal (used for QR-style overlays, edit forms) ────────────────────── */
.modal-bg { position: fixed; inset:0; background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  display:grid; place-items:center; z-index: 50; padding: 16px; }
.modal { background: var(--bg-2); border:1px solid var(--line); border-radius:16px;
  padding: 18px; width:100%; max-width: 460px; box-shadow: var(--shadow); }
.modal h3 { margin: 0 0 8px; font-size: 16px; }
.modal .close { float:left; cursor:pointer; opacity:.7; font-size: 18px; }

/* ── Toast ─────────────────────────────────────────────────────────────── */
.toast { position: fixed; bottom: 22px; left:50%; transform: translateX(-50%);
  background: var(--surface-2); border:1px solid var(--line); padding: 10px 16px;
  border-radius: 12px; font-size: 13px; box-shadow: var(--shadow); z-index: 100; }
.toast.error { background: rgba(239,68,68,.18); color:#fecaca; border-color: rgba(239,68,68,.4); }
.toast.success { background: rgba(16,185,129,.18); color:#a7f3d0; border-color: rgba(16,185,129,.4); }