:root{
  --bg:#f6f7fb; --panel:#fff; --text:#1f2937; --muted:#6b7280; --accent:#2563eb;
  --card-radius:10px; --card-shadow:0 10px 30px rgba(16,24,40,0.08);
}

/* Global themes */
body.theme-light{ --bg:#f6f7fb; --panel:#fff; --text:#111827; --muted:#6b7280; --accent:#2563eb; }
body.theme-dark{  --bg:#0b1220; --panel:#0f1724; --text:#e6eef8; --muted:#9aa6bd; --accent:#60a5fa; }
body.theme-blue{  --bg:#e8f0ff; --panel:#fff;  --text:#071033; --muted:#475569; --accent:#0ea5e9; }
body.theme-green{ --bg:#eefcf3; --panel:#fff;  --text:#052e22; --muted:#3f7d6f; --accent:#10b981; }
body.theme-purple{--bg:#fbf6ff; --panel:#fff;  --text:#241332; --muted:#6b5471; --accent:#7c3aed; }

.rmm-app{ max-width:1200px; margin:18px auto; padding:10px; background:transparent; color:var(--text); }
.rmm-topbar{ display:flex; gap:12px; align-items:center; justify-content:space-between; margin-bottom:12px; }
.rmm-brand{ font-weight:800; }
.rmm-controls{ display:flex; gap:8px; align-items:center; }
.rmm-controls select, .rmm-controls input, .rmm-controls button{ padding:6px 8px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:var(--panel); color:var(--text); }

.rmm-primary{ background:var(--accent); color:#fff; border:none; padding:8px 10px; border-radius:8px; }

.rmm-canvas-wrapper{ height:70vh; border-radius:10px; box-shadow:var(--card-shadow); overflow:hidden; border:1px solid rgba(0,0,0,0.04); position:relative; background:var(--bg); }
.rmm-canvas{ position:absolute; left:0; top:0; width:2400px; height:1800px; transform-origin:0 0; }
.rmm-show-grid{ background-image: linear-gradient(to right, rgba(0,0,0,0.04) 1px, transparent 1px), linear-gradient(to bottom, rgba(0,0,0,0.04) 1px, transparent 1px); background-size:40px 40px; }

#rmm-connections{ position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; }

/* Card base */
.rmm-card{ position:absolute; width:240px; border-radius:10px; background:var(--panel); padding:10px 12px; box-shadow:var(--card-shadow); border-left:6px solid transparent; box-sizing:border-box; cursor:grab; user-select:none; will-change:transform; transition:box-shadow 120ms ease; }
.rmm-card.dragging{ opacity:0.98; cursor:grabbing; transform-origin: left top; box-shadow: 0 18px 40px rgba(16,24,40,0.18); }
.rmm-card .rmm-head{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.rmm-card .rmm-title{ font-weight:700; flex:1; font-size:14px; }
.rmm-card .rmm-notes{ font-size:13px; color:var(--muted); min-height:44px; margin-bottom:8px; padding:6px; border-radius:6px; background: rgba(0,0,0,0.02); outline:none; }
.rmm-card .rmm-notes[contenteditable="true"]:focus{ box-shadow: inset 0 0 0 2px rgba(0,0,0,0.06); }

.rmm-card .rmm-controls{ display:flex; gap:6px; align-items:center; }

/* Status-based styles (color mapping) */
.rmm-card.status-notstarted{ border-left-color: #9ca3ff; background: linear-gradient(180deg, rgba(156,163,255,0.04), transparent); }
.rmm-card.status-todo{ border-left-color: #60a5fa; background: linear-gradient(180deg, rgba(96,165,250,0.04), transparent); }
.rmm-card.status-doing{ border-left-color: #fb923c; background: linear-gradient(180deg, rgba(251,146,60,0.04), transparent); }
.rmm-card.status-review{ border-left-color: #7c3aed; background: linear-gradient(180deg, rgba(124,58,237,0.04), transparent); }
.rmm-card.status-pending{ border-left-color: #f59e0b; background: linear-gradient(180deg, rgba(245,158,11,0.03), transparent); }
.rmm-card.status-blocked{ border-left-color: #ef4444; background: linear-gradient(180deg, rgba(239,68,68,0.04), transparent); }
.rmm-card.status-done{ border-left-color: #10b981; background: linear-gradient(180deg, rgba(16,185,129,0.04), transparent); }

/* small */
.rmm-footer{ margin-top:8px; font-size:13px; color:var(--muted); text-align:center; }
.rmm-small{ font-size:13px; color:var(--muted); padding:0 6px; }