.hero {
  background-color: #0a3a2a;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.07'%3E%3Crect x='14' y='14' width='36' height='36'/%3E%3Crect x='14' y='14' width='36' height='36' transform='rotate(45 32 32)'/%3E%3C/g%3E%3C/svg%3E"),
    linear-gradient(160deg, #0f5c3f 0%, #0a3a2a 60%);
}
.num { font-variant-numeric: tabular-nums; }

.ctl {
  border: 1px solid #c3d6cb; border-radius: 10px; background: #fff;
  padding: 0.6rem 0.75rem; color: #12261d;
}
.ctl:focus, .btn:focus-visible, .btn-line:focus-visible { outline: 2px solid #0f5c3f; outline-offset: 2px; }
.btn, .btn-line {
  border-radius: 10px; padding: 0.6rem 1rem; font-weight: 600; cursor: pointer; transition: background 0.15s;
}
.btn { background: #0f5c3f; color: #fff; }
.btn:hover { background: #0a3a2a; }
.btn-line { border: 1px solid #c3d6cb; background: #fff; color: #0f5c3f; }
.btn-line:hover { background: #dcebe3; }

/* Today tiles */
.tile { background: #fff; border: 1px solid #dcebe3; border-radius: 14px; padding: 1rem 1.1rem; }
.tile .ar { font-family: "Amiri", serif; font-size: 1.6rem; line-height: 1.2; color: #0f5c3f; }
.tile .en { font-size: 0.85rem; color: #5b6f65; }
.tile .t { margin-top: 0.5rem; font-size: 1.5rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tile.next { background: #0f5c3f; border-color: #0f5c3f; color: #fff; }
.tile.next .ar { color: #d4b05a; }
.tile.next .en { color: #dcebe3; }

/* Tables */
.tablewrap { overflow-x: auto; border: 1px solid #dcebe3; border-radius: 14px; background: #fff; }
.tbl { width: 100%; border-collapse: collapse; font-size: 0.95rem; white-space: nowrap; }
.tbl th { background: #dcebe3; color: #0a3a2a; text-align: left; padding: 0.7rem 0.9rem; font-weight: 600; }
.tbl td { padding: 0.65rem 0.9rem; border-top: 1px solid #edf3ef; font-variant-numeric: tabular-nums; }
.tbl tbody tr:hover { background: #f3f6f4; }
#allBody tr { cursor: pointer; }
#allBody tr.cur td:first-child { box-shadow: inset 3px 0 0 #d4b05a; font-weight: 700; }
.tbl tr.today td { background: #fbf4df; font-weight: 600; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }