:root{
  --roq-orange:#ff6600;
  --bg:#0f0f10;
  --panel:#161718;
  --panel-2:#1e1f22;
  --text:#ffffff;
  --muted:#a7a7aa;
  --line:#26272b;
  --success:#1d7c3a;
  --blue:#0a84ff;
}
.roqjb-board{
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:18px;
  align-items:start;
}
@media (max-width:980px){
  .roqjb-board{ grid-template-columns: 1fr; }
}
.roqjb-left{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:16px;
}
.roqjb-title{ margin:0 0 6px; font-size:28px }
.roqjb-author{ color:var(--muted); margin-bottom:10px }
.roqjb-author strong{ color:var(--text) }
.roqjb-xp-total{ margin-left:8px }

.roqjb-form .roqjb-field{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px }
.roqjb-form label{ font-size:14px; color:#d7d7da }
.roqjb-form input[type="number"], .roqjb-form select, .roqjb-form textarea{
  background:#121315; color:var(--text); border:1px solid var(--line);
  border-radius:10px; padding:10px; font-size:14px;
}
.roqjb-actions{ display:flex; align-items:center; justify-content:space-between; margin:10px 0 }
.roqjb-goal{ display:flex; align-items:center; gap:8px; font-size:14px }
.roqjb-btn{ background:var(--roq-orange); color:#000; border:none; border-radius:10px; padding:10px 14px; cursor:pointer; font-weight:700 }

.roqjb-meta{ font-size:14px; color:var(--muted); display:flex; gap:8px; align-items:center; margin-top:6px }
.roqjb-meta strong{ color:#fff; font-size:18px }

/* Kalender Styles (kompakt) */
.calendar-card{
  background:linear-gradient(180deg, var(--panel), var(--panel-2));
  border:1px solid var(--line);
  border-radius:16px;
  padding:12px 14px 16px;
}
.cal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px;gap:8px}
.month-label{font-size:18px;font-weight:700;margin:0}
.nav-btn{appearance:none;border:1px solid var(--line);background:#131416;color:var(--text);border-radius:10px;padding:6px 10px;cursor:pointer;font-size:16px;line-height:1}
.nav-btn:hover{outline:1px solid var(--roq-orange)}
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;color:var(--muted);padding:6px 2px 2px}
.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day{position:relative;background:#121315;border:1px solid var(--line);border-radius:12px;min-height:64px;padding:6px;display:flex;align-items:flex-start;justify-content:flex-start;transition:transform .08s ease}
.day:hover{transform:translateY(-1px)}
.day.out-month{opacity:.45}
.date{font-size:12px;color:#d7d7da;background:#0e0f11;border:1px solid var(--line);padding:2px 6px;border-radius:8px}

/* kleinere runde Badges (zentriert, nebeneinander) */

.today{outline:2px solid var(--roq-orange);outline-offset:0}
.legend{margin-top:8px;font-size:12px;color:var(--muted);display:flex;align-items:center;gap:12px}
.dot{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);background:var(--success);display:inline-block}
.kdot{width:12px;height:12px;border-radius:50%;border:1px solid var(--line);background:var(--blue);display:inline-block}

.badges{position:absolute;left:50%;bottom:6px;transform:translateX(-50%);display:flex;gap:4px;align-items:center;justify-content:center}
.badge,.kbadge{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:999px;border:1px solid rgba(255,255,255,.08);font-size:10px;font-weight:800;color:#fff}
.badge{background:var(--success)} /* XP */
.kbadge{background:var(--blue)}   /* Kurse */
.badge.hidden,.kbadge.hidden{display:none}