/* Casibom colour theme: overrides template variables (style.css / clean.css stay untouched) */
:root{
  --bg:#151314;
  --bg-2:#1c191a;
  --bg-3:#222021;
  --bg-4:#2b2829;
  --line:#3d3839;
  --accent:#fdab0f;
  --accent-line:#ffb92e;
  --gold:#fdab0f;
  --text:#f5f3f0;
  --text-2:#ebe7e2;
  --muted:#aaa39c;
  --field-bg:#1f1b12;
  --field-line:#5a4a1c;
  --ok:#2bb420;
}
body{background:var(--bg)}
.btn-primary{background:var(--ok);border-color:#35c929;color:#fff}
.btn-primary:hover{background:#31c425}
.btn-ghost{background:#fff;border-color:#fff;color:#151314}
.btn-ghost:hover{background:#ece8e3}
.paper-cta .btn-primary,.article .btn-primary{background:var(--accent);border-color:var(--accent-line);color:#151314}
.head{background:rgba(21,19,20,.97)}
.head,.foot{border-color:var(--line)}
.head::after,.head-in::after{background:linear-gradient(90deg,#fdab0f,rgba(253,171,15,0))}
.foot-age{border-color:var(--accent);color:var(--accent)}
.paper th,.article th{background:rgba(253,171,15,.10)}
.head-logo-img{width:108px}
@media (min-width:1024px){.head-logo-img{width:136px}}
.foot-logo-img{width:160px}
.article img,.paper img{display:block;max-width:100%;height:auto;margin:6px 0 0;border:1px solid var(--line);border-radius:var(--radius-lg)}
.article p>em{display:block;margin:2px 0 18px;font-size:12px;font-style:normal;color:var(--muted)}
@media (min-width:768px){
  .hero{height:auto;aspect-ratio:1200/400;max-width:1188px;margin:16px auto 0;border-radius:var(--radius-lg)}
  .hero-dots{bottom:6px}
}
@media (max-width:767.98px){.hero{aspect-ratio:2/1;height:auto}}
.rail-live{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:none;grid-auto-flow:row;grid-auto-columns:auto;gap:10px;padding:4px 0 0;overflow:visible}
.rail-live .tile{aspect-ratio:4/3}
@media (max-width:767.98px){.rail-live{display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:210px;grid-template-rows:repeat(2,158px);gap:8px;padding:4px 8px 0 0;overflow-x:auto;overflow-y:hidden}}
/* slot rails: tiles fill the full container width (same as the live-table widget); extra tiles scroll */
@media (min-width:768px){
  .rail-2{grid-auto-columns:calc((100% - 40px) / 6);grid-template-rows:repeat(2,auto);padding-right:0}
  .rail-2 .tile{aspect-ratio:100/140}
}
@media (min-width:1024px){
  .rail-2{grid-auto-columns:calc((100% - 56px) / 8)}
}
