/* Clean card dashboard (OurLotto style), themed per brand via CSS variables */
:root, [data-site="teamcoop"] {
  --od-ink: #2c2a28; --od-muted: #6f655c; --od-card: #fffaf4; --od-soft: #f3e6d8; --od-line: #e4d3c0;
  --od-dark: #2c2a28; --od-dark-muted: #cbbba8; --od-accent: #e0a63a; --od-accent-2: #ffe2a6;
  --od-mark: #c9a882; --od-bonus: #c2573a; --od-ok: #2f8a4c;
}
[data-site="dotty"] {
  --od-ink: #2b1d24; --od-muted: #7a5f66; --od-card: #fffdf8; --od-soft: #ffeedd; --od-line: #f1d8c4;
  --od-dark: #1d4ed8; --od-dark-muted: #c8d6ff; --od-accent: #e8b423; --od-accent-2: #fff0b8;
  --od-mark: #e85d4c; --od-bonus: #e85d4c; --od-ok: #1e8a4a;
}
[data-site="thesmiler"] {
  --od-ink: #12304a; --od-muted: #5a7088; --od-card: #ffffff; --od-soft: #e6eef6; --od-line: #d3e0ec;
  --od-dark: #12304a; --od-dark-muted: #a9c0d6; --od-accent: #ffc93c; --od-accent-2: #fff0c2;
  --od-mark: #1f6fb2; --od-bonus: #e2574c; --od-ok: #1f8a55;
}
.od-card { background: var(--od-card); color: var(--od-ink); border: 1px solid var(--od-line); border-radius: 22px;
  box-shadow: 0 14px 34px -18px rgba(20, 20, 40, .35); padding: 18px; height: 100%; }
.od-card a { color: inherit; }
.od-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.od-mark { width: 44px; height: 44px; flex: none; border-radius: 13px; background: var(--od-mark); color: #fff;
  display: grid; place-items: center; font-weight: 900; font-size: 1.15rem; }
.od-head h3 { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.2; }
.od-head small { color: var(--od-muted); }
.od-head .od-go { margin-left: auto; color: var(--od-muted); font-size: 1.2rem; text-decoration: none; }
.od-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.od-stat { background: var(--od-soft); border-radius: 15px; padding: 11px 13px; min-width: 0; }
.od-stat small { display: block; color: var(--od-muted); font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.od-stat strong { display: block; font-size: 1.45rem; font-weight: 900; line-height: 1.25; color: var(--od-ink); white-space: nowrap; }
.od-stat.dark { background: var(--od-dark); }
.od-stat.dark small { color: var(--od-dark-muted); }
.od-stat.dark strong { color: var(--od-accent); }
.od-stat.dark strong.neg { color: #ff9b8a; }
.od-stat .od-sub { font-size: .75rem; color: var(--od-muted); }
.od-stat.warn strong { color: var(--od-bonus); }
.od-draw { border: 1px solid var(--od-line); border-radius: 15px; padding: 11px 13px; margin-top: 10px; }
.od-draw-top { display: flex; justify-content: space-between; gap: 8px; font-size: .8rem; color: var(--od-muted); margin-bottom: 8px; flex-wrap: wrap; }
.od-draw-top b { color: var(--od-ok); }
.od-draw-top b.none { color: var(--od-muted); font-weight: 600; }
.od-balls { display: flex; gap: 6px; flex-wrap: wrap; }
.od-ball { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .88rem; color: var(--od-ink);
  background: radial-gradient(circle at 32% 28%, #fff 0 18%, #eef0f5 19% 100%); box-shadow: inset 0 -2px 0 rgba(19, 35, 74, .12); }
.od-ball.hit { background: radial-gradient(circle at 32% 28%, var(--od-accent-2) 0 18%, var(--od-accent) 19% 100%); }
.od-ball.bonus { background: radial-gradient(circle at 32% 28%, #ffe3da 0 18%, var(--od-bonus) 19% 100%); color: #fff; }
.od-ball.bonus.hit { box-shadow: 0 0 0 3px var(--od-accent); }
.od-draw .od-empty { font-size: .85rem; color: var(--od-muted); }
.od-toast { display: flex; gap: 12px; align-items: center; background: var(--od-dark); color: #fff; border-radius: 18px; padding: 12px 14px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .5); margin-bottom: 18px; text-decoration: none; }
.od-toast:hover { color: #fff; filter: brightness(1.05); }
.od-toast img { width: 40px; height: 40px; border-radius: 11px; flex: none; object-fit: cover; box-shadow: 0 0 0 1px rgba(255, 255, 255, .2); background: #fff; }
.od-toast b { display: block; font-size: .95rem; }
.od-toast span { font-size: .83rem; color: var(--od-dark-muted); }
.od-toast time { margin-left: auto; align-self: flex-start; font-size: .72rem; color: var(--od-dark-muted); white-space: nowrap; }
.od-mini { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.od-mini .od-stat { flex: 1 1 140px; background: var(--od-card); border: 1px solid var(--od-line); }
.od-badge-susp { display: inline-block; background: var(--od-bonus); color: #fff; border-radius: 999px; font-size: .7rem; font-weight: 700; padding: 2px 8px; margin-top: 4px; }
.od-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.od-actions a { flex: 1; text-align: center; border-radius: 12px; padding: 7px 10px; font-size: .85rem; font-weight: 700; text-decoration: none;
  background: var(--od-soft); color: var(--od-ink); }
.od-actions a.primary { background: var(--od-dark); color: #fff; }
@media (max-width: 420px) {
  .od-card { padding: 15px; border-radius: 18px; }
  .od-stat strong { font-size: 1.25rem; }
  .od-ball { width: 29px; height: 29px; font-size: .8rem; }
}
/* Cards stay light in both light and dark site modes: force readable text inside */
.od-card, .od-card h1, .od-card h2, .od-card h3, .od-card h4, .od-card .h6, .od-card a:not(.primary):not(.od-ball),
.od-card td, .od-card th, .od-mini .od-stat strong { color: var(--od-ink) !important; }
.od-card small, .od-card .text-muted, .od-card .od-head small { color: var(--od-muted) !important; }
.od-card .table { --bs-table-color: var(--od-ink); --bs-table-bg: transparent; --bs-table-border-color: var(--od-line); color: var(--od-ink) !important; }
.od-card .table > :not(caption) > * > * { background: transparent !important; color: var(--od-ink) !important; border-color: var(--od-line) !important; }
.od-actions a.primary { color: #fff !important; }
.od-stat.dark strong { color: var(--od-accent) !important; }
.od-stat.dark strong.neg { color: #ff9b8a !important; }
.od-stat.dark small { color: var(--od-dark-muted) !important; }
.od-stat.warn strong { color: var(--od-bonus) !important; }
.od-draw-top b { color: var(--od-ok) !important; }
.od-draw-top b.none { color: var(--od-muted) !important; }
.od-mini .od-stat small { color: var(--od-muted) !important; }
.od-ball.bonus { color: #fff !important; }