.cbf-wrap { max-width: 980px; margin: 18px auto; padding: 0 12px; }
.cbf-header { margin-bottom: 12px; }
.cbf-title { font-size: 22px; font-weight: 700; }
.cbf-sub { font-size: 13px; opacity: .75; margin-top: 2px; }

.cbf-box { max-width: 980px; margin: 18px auto; padding: 14px 12px; border: 1px solid #e5e7eb; border-radius: 10px; background: #fff; }
.cbf-loading { padding: 16px; border: 1px dashed #d1d5db; border-radius: 10px; background: #fff; }

.cbf-calendar { border: 1px solid #e5e7eb; border-radius: 12px; background: #fff; overflow: hidden; }
.cbf-cal-head { display:flex; align-items:center; justify-content:space-between; padding: 10px 12px; border-bottom: 1px solid #eee; background:#fafafa; }
.cbf-cal-title { font-weight: 700; }
.cbf-cal-nav button { border:1px solid #e5e7eb; background:#fff; border-radius:10px; padding:6px 10px; cursor:pointer; }
.cbf-cal-grid { display:grid; grid-template-columns: repeat(7, 1fr); }
.cbf-cal-dow { padding: 8px 6px; font-size: 12px; text-align:center; background:#f7f7f7; border-bottom: 1px solid #eee; }
.cbf-cal-cell { min-height: 52px; padding: 6px; border-right: 1px solid #f0f0f0; border-bottom: 1px solid #f0f0f0; position: relative; background:#fff; cursor:pointer; }
.cbf-cal-cell:nth-child(7n) { border-right:none; }
.cbf-cal-cell.is-empty { background:#fbfbfb; cursor:default; }
.cbf-cal-num { font-size: 12px; font-weight: 700; }
.cbf-cal-badge { position:absolute; right:6px; top:6px; font-size:11px; background: rgba(0,0,0,.08); padding:2px 6px; border-radius:999px; }
.cbf-cal-selected { outline: 2px solid #111827; outline-offset: -2px; }

.cbf-hint { margin-top: 10px; font-size: 12px; opacity:.75; }

.cbf-datebar { display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 10px 12px; border: 1px solid #e5e7eb; border-radius: 12px; background:#fff; margin-bottom: 12px; }
.cbf-label { font-size: 12px; opacity:.7; }
.cbf-selected-date { font-size: 18px; font-weight: 700; }

.cbf-link { text-decoration:none; border:1px solid #e5e7eb; padding:6px 10px; border-radius:10px; background:#fff; display:inline-block; }
.cbf-link:hover { background:#f9fafb; }

.cbf-list { display:flex; flex-direction:column; gap: 10px; }

.cbf-card { border:1px solid #e5e7eb; border-radius: 12px; background:#fff; overflow:hidden; }
.cbf-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding: 12px; }
.cbf-colorbar { width: 10px; flex: 0 0 10px; }
.cbf-card-main { flex:1; }
.cbf-card-title { font-size: 16px; font-weight: 700; }
.cbf-card-meta { font-size: 13px; opacity:.8; margin-top: 4px; display:flex; flex-wrap:wrap; gap:10px; }
.cbf-card-actions { padding: 12px; border-top: 1px solid #f0f0f0; display:flex; align-items:center; justify-content:space-between; gap: 10px; }

.cbf-roles { display:flex; flex-direction:column; gap: 6px; margin-top: 8px; }
.cbf-role { display:flex; align-items:center; justify-content:space-between; gap: 10px; padding: 8px 10px; border:1px solid #f0f0f0; border-radius: 10px; background:#fff; }
.cbf-role.is-full { opacity:.55; }
.cbf-role-left { display:flex; align-items:center; gap: 8px; }
.cbf-role-right { font-size: 12px; opacity:.8; }

.cbf-btn { border:1px solid #111827; background:#111827; color:#fff; padding: 9px 12px; border-radius: 12px; cursor:pointer; font-weight:700; }
.cbf-btn:disabled { opacity:.5; cursor:not-allowed; }
.cbf-note { font-size: 12px; opacity: .75; }

.cbf-toast { position: fixed; left: 12px; bottom: 12px; z-index: 9999; background:#111827; color:#fff; padding: 10px 12px; border-radius: 12px; max-width: 420px; box-shadow: 0 10px 30px rgba(0,0,0,.2); }

.cbf-logout { display:inline-block; padding: 10px 12px; border:1px solid #e5e7eb; border-radius: 12px; background:#fff; text-decoration:none; }