/* === Casinorbo Design System v1 (progressive) === */
:root{
  --bg: #ffffff;
  --bg-elev: #fafafa;
  --fg: #0a0a0a;
  --muted: #666;
  --brand: #16a34a;
  --accent: #f59e0b;
  --success: #16a34a;
  --danger:#ef4444;
  --warning: #f59e0b;
  --ring: #86efac;
  --radius: 14px;
  --shadow: 0 10px 25px rgba(17,24,39,.08);
  --container: 1200px;
  --gap: 16px;
  --space: clamp(12px, 1.5vw, 18px);
}
@media (prefers-color-scheme: dark){
 :root{
   --bg:#0b0b0f;
   --bg-elev:#12121a;
   --fg:#f3f4f6;
   --muted:#a1a1aa;
   --brand: #22c55e;
   --accent: #fbbf24;
   --ring: #34d399;
   --shadow: 0 10px 30px rgba(0,0,0,.5);
 }
}
*{box-sizing:border-box}
html:focus-within{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font: 500 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img,svg,video{max-width:100%; height:auto}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}
a:focus{outline: 2px solid var(--ring); outline-offset: 2px; border-radius: 6px}
button:focus, input:focus, select:focus, textarea:focus{outline: 2px solid var(--ring); outline-offset:2px}
.container{width:100%; max-width:var(--container); margin-inline:auto; padding-inline: clamp(16px, 3vw, 28px)}
.section{padding: clamp(24px, 4vw, 48px) 0}
.crbo-grid{display:grid; gap:var(--gap)}
.crbo-grid.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.crbo-grid.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.crbo-grid.cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.crbo-grid.cols-4{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.crbo-grid.cols-3,.crbo-grid.cols-4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:640px){.crbo-grid.cols-2,.crbo-grid.cols-3,.crbo-grid.cols-4{grid-template-columns:1fr}}
.crbo-card{
  background:var(--bg-elev); border:1px solid color-mix(in srgb, var(--fg) 8%, transparent);
  border-radius: var(--radius); box-shadow: var(--shadow); padding: clamp(14px, 2vw, 22px)
}
.crbo-card:hover{transform: translateY(-1px); transition: transform .15s ease}
.crbo-card .crbo-title{font-size: clamp(18px, 2.3vw, 22px); font-weight: 800; margin: 0 0 6px}
.crbo-card .meta{color:var(--muted); font-size:14px}
.badge{
  display:inline-flex; align-items:center; gap:8px; padding:6px 10px;
  background: color-mix(in srgb, var(--brand) 12%, var(--bg-elev));
  border:1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-radius: 999px; font-size: 12px;
}
.crbo-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; cursor:pointer;
  padding:10px 14px; border-radius:12px; border:1px solid transparent; font-weight:700;
  background: linear-gradient(180deg, color-mix(in srgb, var(--brand) 92%, #ffffff) 0%, var(--brand) 65%),
              linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 30%, transparent) 100%);
  color:white; box-shadow: 0 10px 22px color-mix(in srgb, var(--brand) 40%, transparent);
  transition: transform .05s ease, filter .15s ease;
}
.crbo-btn:hover{filter:brightness(1.03); transform: translateY(-1px)}
.crbo-btn:active{transform: translateY(0)}
.crbo-btn.outline{background:transparent; color:var(--brand); border-color: color-mix(in srgb, var(--brand) 34%, transparent)}
.crbo-btn.ghost{background:transparent; border-color:transparent; color:var(--fg)}
.crbo-btn:hover{filter:brightness(1.05)}
.crbo-btn.outline{background:transparent; color:var(--brand); border-color: color-mix(in srgb, var(--brand) 34%, transparent)}
.crbo-btn.ghost{background:transparent; border-color:transparent; color:var(--fg)}
.crbo-input, select, textarea{
  width:100%; background:var(--bg-elev); border:1px solid color-mix(in srgb, var(--fg) 12%, transparent);
  border-radius:12px; padding:10px 12px;
}
.crbo-table{width:100%; border-collapse:separate; border-spacing:0; overflow:hidden; border-radius:12px}
.crbo-table th,.crbo-table td{padding:12px 14px; border-bottom:1px solid color-mix(in srgb, var(--fg) 10%, transparent)}
.crbo-table thead th{background: color-mix(in srgb, var(--fg) 3%, var(--bg))}
.crbo-kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; background: var(--bg-elev); border:1px solid color-mix(in srgb, var(--fg) 15%, transparent); border-radius:6px; padding:2px 6px}
/* Header & Nav */
.crbo-site-header{position:sticky; top:0; z-index:50; backdrop-filter:saturate(120%) blur(8px); background: color-mix(in srgb, var(--bg) 85%, transparent); border-bottom: 1px solid color-mix(in srgb, var(--fg) 10%, transparent)}
.crbo-nav{display:flex; align-items:center; gap:14px; padding:10px 0}
.crbo-nav a{padding:8px 10px; border-radius:10px}
.crbo-nav a[aria-current="page"]{background: color-mix(in srgb, var(--brand) 16%, transparent)}
.nav-toggle{display:none}
@media(max-width:800px){
  .crbo-nav{display:none}
  .crbo-nav.open{display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding-bottom:14px}
  .nav-toggle{display:inline-flex}
}
/* Casino card (used earlier) */
.casino-card{display:flex; flex-direction:column; gap:8px}
.casino-card .actions{display:flex; gap:10px; flex-wrap:wrap}
/* Footer */
.crbo-footer{margin-top: clamp(28px, 6vw, 64px); padding: clamp(24px, 4vw, 40px) 0; border-top: 1px solid color-mix(in srgb, var(--fg) 10%, transparent); background: color-mix(in srgb, var(--bg) 92%, transparent)}
.crbo-footer .legal{font-size:13px; color:var(--muted)}
/* Motion */
@media (prefers-reduced-motion: no-preference){
  .fade-in{opacity:0; transform: translateY(6px); animation: fadeIn .35s ease forwards}
  @keyframes fadeIn { to { opacity:1; transform:none } }
}


/* Support logos strip */
.crbo-support-logos{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:12px;opacity:.95}
.crbo-support-logo{display:inline-flex;align-items:center;justify-content:center;padding:6px;border-radius:10px;background:color-mix(in srgb, var(--bg-elev) 80%, transparent);border:1px solid color-mix(in srgb, var(--fg) 10%, transparent)}
.crbo-support-logo img{height:26px;max-width:120px;display:block}
@media (prefers-color-scheme: dark){.crbo-support-logo{background:rgba(255,255,255,.04);border-color:rgba(255,255,255,.12)}}