* { font-family: 'Cairo', system-ui, -apple-system, 'Segoe UI', sans-serif; }

.card { background:#fff; border:1px solid #e2e8f0; border-radius:1rem;
  box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 30px -16px rgba(15,23,42,.18); }
.dark .card { background:#0f172a; border-color:#1e293b; box-shadow:0 1px 2px rgba(0,0,0,.4); }

.field { width:100%; padding:.6rem .8rem; border-radius:.7rem; background:#f1f5f9;
  border:1px solid transparent; outline:none; transition:.15s; font-size:.875rem; }
.field:focus { border-color:#6366f1; background:#fff; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.dark .field { background:#1e293b; color:#e2e8f0; }
.dark .field:focus { background:#0f172a; }
label.lbl { display:block; font-size:.75rem; font-weight:700; color:#64748b; margin-bottom:.3rem; }
.dark label.lbl { color:#94a3b8; }

.btn { padding:.6rem 1rem; border-radius:.7rem; font-weight:700; font-size:.825rem;
  transition:.15s; cursor:pointer; border:none; display:inline-flex; align-items:center; gap:.4rem; justify-content:center; }
.btn-primary { background:#4f46e5; color:#fff; } .btn-primary:hover{ background:#4338ca; }
.btn-primary:disabled{ opacity:.5; cursor:not-allowed; }
.btn-ghost { background:#f1f5f9; color:#475569; } .btn-ghost:hover{ background:#e2e8f0; }
.dark .btn-ghost{ background:#1e293b; color:#cbd5e1; } .dark .btn-ghost:hover{ background:#334155; }
.btn-danger{ background:#e11d48; color:#fff; } .btn-danger:hover{ background:#be123c; }

.tab { padding:.55rem .9rem; border-radius:.7rem; font-weight:700; font-size:.8rem; white-space:nowrap;
  cursor:pointer; transition:.15s; color:#64748b; }
.tab.active { background:#4f46e5; color:#fff; box-shadow:0 6px 16px -6px rgba(79,70,229,.6); }
.dark .tab{ color:#94a3b8; }

/* rich editor */
.editor { min-height:180px; padding:1rem; border-radius:.7rem; background:#fff; border:1px solid #e2e8f0;
  outline:none; line-height:1.9; overflow-y:auto; max-height:360px; }
.editor:focus { border-color:#6366f1; box-shadow:0 0 0 3px rgba(99,102,241,.12); }
.dark .editor{ background:#0b1220; border-color:#1e293b; }
.editor img{ max-width:100%; height:auto; border-radius:.4rem; }
.tbtn{ width:34px;height:34px;border-radius:.5rem;display:grid;place-items:center;cursor:pointer;
  background:#f1f5f9;color:#475569;font-weight:700;font-size:.85rem;border:none;transition:.12s; }
.tbtn:hover{ background:#e2e8f0; } .dark .tbtn{ background:#1e293b;color:#cbd5e1; } .dark .tbtn:hover{ background:#334155; }

.chip{ display:inline-flex;align-items:center;gap:.3rem;padding:.25rem .55rem;border-radius:9999px;
  font-size:.7rem;font-weight:700; cursor:pointer; }

.scroll::-webkit-scrollbar{ width:8px;height:8px; }
.scroll::-webkit-scrollbar-thumb{ background:#cbd5e1;border-radius:8px; }
.dark .scroll::-webkit-scrollbar-thumb{ background:#334155; }

@keyframes pulse{ to{ transform:scale(2.6); opacity:0; } }
.pulse{ position:relative; } .pulse::after{ content:'';position:absolute;inset:0;border-radius:9999px;background:inherit;animation:pulse 1.6s ease-out infinite;opacity:.7; }
@keyframes spin{ to{ transform:rotate(360deg);} } .spin{ animation:spin .9s linear infinite; }
@keyframes rowIn{ from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:none;} } .row-enter{ animation:rowIn .35s ease both; }
.bar{ transition:width .6s cubic-bezier(.22,1,.36,1); }

/* password visibility */
.password-wrap{ position:relative; }
.password-field{ padding-left:3rem; }
.toggle-pass{ position:absolute; left:.55rem; top:50%; transform:translateY(-50%); width:2.1rem; height:2.1rem;
  border:none; border-radius:.55rem; background:transparent; cursor:pointer; display:grid; place-items:center; font-size:1rem; }
.toggle-pass:hover{ background:#e2e8f0; }
.dark .toggle-pass:hover{ background:#334155; }