.yg-clock-disaster-row {
  display: grid;
  grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.15fr);
  align-items: stretch;
  width: 100%;
  margin: 0;
  box-sizing: border-box;
  border-bottom: 3px solid #ffe566;
  background: #070b14;
}
.yg-clock-disaster-row > .yg-qdash {
  border-bottom: 0;
  min-width: 0;
  height: 100%;
}
.yg-clock-disaster-row > .yg-disaster-stats-bar {
  border-bottom: 0;
  min-width: 0;
  height: 100%;
}
@media (max-width: 1100px) {
  .yg-clock-disaster-row {
    grid-template-columns: 1fr;
  }
}

.yg-qdash {
  width: 100%;
  margin: 0;
  padding: 14px 12px 16px;
  box-sizing: border-box;
  background: radial-gradient(1200px 600px at 50% -10%, #1b2744 0%, #0b1220 45%, #070b14 100%);
  color: #e8eef8;
  font-family: system-ui, -apple-system, Segoe UI, sans-serif;
  border-bottom: 3px solid #d4a017;
}
.yg-qdash-inner {
  max-width: 980px;
  margin: 0 auto;
  background: #0e1628;
  border: 1px solid rgba(212, 160, 23, 0.28);
  border-radius: 28px;
  padding: 14px 14px 12px;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  height: 100%;
  box-sizing: border-box;
}
.yg-clock-disaster-row .yg-qdash-inner {
  max-width: none;
}
.yg-qdash-top {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 240px) 1fr;
  gap: 8px;
  align-items: center;
}
.yg-clock-disaster-row .yg-qdash-sun img,
.yg-clock-disaster-row .yg-qdash-moonface {
  width: 88px;
  height: 88px;
}
.yg-clock-disaster-row .yg-qdash-clockwrap {
  width: min(220px, 56vw);
}
.yg-clock-disaster-row .yg-qdash-hms {
  font-size: clamp(22px, 3.2vw, 32px);
}
.yg-clock-disaster-row .yg-qdash-actions {
  gap: 6px;
  margin: 10px 0 8px;
}
.yg-clock-disaster-row .yg-qdash-actions button {
  padding: 6px 10px;
  font-size: 12px;
}
.yg-qdash-sun,
.yg-qdash-moon {
  text-align: center;
}
.yg-qdash-sun img,
.yg-qdash-moonface {
  width: 118px;
  height: 118px;
  border-radius: 50%;
  display: block;
  margin: 0 auto 8px;
  object-fit: cover;
  box-shadow: 0 0 24px rgba(255, 170, 40, 0.35);
}
.yg-qdash-sun img.yg-qdash-sunphoto {
  background: #0b1220;
  box-shadow: 0 0 28px rgba(255, 190, 80, 0.55);
  border: 1px solid rgba(255, 200, 120, 0.35);
}
.yg-qdash-moonface {
  box-shadow: 0 0 24px rgba(255, 140, 60, 0.3);
  background: #1a0e08;
}
.yg-qdash-kicker {
  font-size: 13px;
  font-weight: 800;
  color: #fff;
}
.yg-qdash-sub {
  font-size: 12px;
  color: #8aa0c2;
  margin: 2px 0;
}
.yg-qdash-note {
  font-size: 12px;
  color: #e6c15a;
  margin-top: 6px;
}
.yg-qdash-clockwrap {
  position: relative;
  width: min(280px, 72vw);
  margin: 0 auto;
  text-align: center;
}
.yg-qdash-city {
  margin: 0 0 8px;
  padding: 0 0 8px;
  border-bottom: 1px solid rgba(180, 190, 210, 0.35);
  color: #e6c15a;
  font: 800 15px/1.15 system-ui, -apple-system, Segoe UI, sans-serif;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-shadow: 0 0 12px rgba(230, 193, 90, 0.35);
}
.yg-qdash-clockwrap canvas {
  width: 100%;
  height: auto;
  display: block;
}
.yg-qdash-time {
  text-align: center;
  margin-top: 8px;
}
.yg-qdash-hms {
  font-size: clamp(28px, 6vw, 42px);
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #fff;
}
.yg-qdash-gdate {
  font-weight: 800;
  margin-top: 4px;
}
.yg-qdash-hdate {
  color: #d4a017;
  font-weight: 800;
  margin-top: 2px;
}
.yg-qdash-next {
  color: #b9c6db;
  margin-top: 4px;
  font-size: 14px;
}
.yg-qdash-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: 14px 0 12px;
}
.yg-qdash-actions button {
  border: 1px solid #c9a227;
  background: transparent;
  color: #e6c15a;
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 800;
  cursor: pointer;
  font-size: 13px;
}
.yg-qdash-actions button:hover,
.yg-qdash-actions button.is-on {
  background: rgba(212, 160, 23, 0.16);
  color: #fff;
}
.yg-qdash-salah {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  text-align: center;
  padding: 6px 4px 2px;
}
.yg-qdash-salah b {
  display: block;
  color: #d4a017;
  font-size: 13px;
}
.yg-qdash-salah span {
  display: block;
  font-weight: 800;
  margin-top: 3px;
}
.yg-qdash-salah .is-next b,
.yg-qdash-salah .is-next span {
  color: #fff;
}
.yg-qibla-ask {
  text-align: center;
  padding: 28px 12px 18px;
}
.yg-qibla-ask p { color: #c9d4e3; line-height: 1.55; }
.yg-qibla-okay {
  display: block;
  width: min(280px, 100%);
  margin: 18px auto 10px;
  padding: 16px 18px;
  border: 0;
  border-radius: 14px;
  background: #d4a017;
  color: #111;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.yg-qibla-ask button[data-act="qibla-map"] {
  background: transparent;
  color: #e6c15a;
  border: 1px solid #c9a227;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  font-weight: 700;
}
.yg-qibla-splash-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0;
  text-align: center;
}
.yg-qibla-splash-grid canvas {
  width: min(280px, 100%);
  height: auto;
  display: block;
  margin: 0 auto;
}
.yg-qibla-compass-status {
  color: #e6c15a;
  font-weight: 700;
}
@media (max-width: 800px) {
  .yg-qibla-splash-grid { grid-template-columns: 1fr; }
}
.yg-qdash-qibla {
  display: none;
}
.yg-qdash-compass {
  width: 180px;
  height: 180px;
  position: relative;
}
.yg-qdash-compass canvas {
  width: 100%;
  height: 100%;
}
.yg-qdash-copy h3 {
  margin: 0 0 8px;
  color: #e6c15a;
  font-size: 16px;
}
.yg-qdash-copy p {
  margin: 0 0 8px;
  color: #c9d4e3;
  font-size: 13.5px;
  line-height: 1.55;
}
.yg-qdash-bear {
  font-weight: 800;
  color: #fff;
}
.yg-overlay {
  position: fixed;
  inset: 0;
  z-index: 240;
  background: rgba(4, 8, 16, 0.86);
  display: none;
  overflow: auto;
  padding: 18px;
}
.yg-overlay.is-open { display: block; }
.yg-overlay-card {
  max-width: 820px;
  margin: 12px auto 40px;
  background: #101826;
  border: 1px solid rgba(212, 160, 23, 0.35);
  border-radius: 18px;
  padding: 16px;
  color: #e8eef8;
}
.yg-overlay-card h2 { margin: 0 0 10px; color: #e6c15a; }
.yg-overlay-close {
  float: right;
  border: 0;
  background: #2a3346;
  color: #fff;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 20px;
}
.yg-q-select, .yg-overlay-card select, .yg-overlay-card input {
  background: #0b1220;
  color: #fff;
  border: 1px solid #3a4a66;
  border-radius: 8px;
  padding: 8px;
  margin: 0 6px 10px 0;
}
.yg-ayah, .yg-hadith {
  white-space: pre-wrap;
  line-height: 1.7;
  margin: 10px 0;
}
.yg-ayah-ar { font-size: 22px; direction: rtl; text-align: right; }
.yg-tasbih-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 10px 0;
}
.yg-tasbih-grid button {
  text-align: left;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #3a4a66;
  background: #0b1220;
  color: #e6c15a;
  cursor: pointer;
  font-weight: 700;
}
.yg-tasbih-grid button.is-on { border-color: #d4a017; background: #1a2438; }
.yg-tasbih-count {
  font-size: 72px;
  font-weight: 800;
  text-align: center;
  margin: 12px 0;
  color: #ffe566;
}
.yg-tasbih-tap {
  display: block;
  width: 100%;
  min-height: 120px;
  border-radius: 16px;
  border: 2px solid #d4a017;
  background: #172238;
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  cursor: pointer;
}
.yg-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  font-size: 12px;
  text-align: center;
}
.yg-cal-grid b { color: #8aa0c2; padding: 6px 0; }
.yg-cal-grid span {
  padding: 8px 0;
  border-radius: 8px;
  background: #0b1220;
}
.yg-cal-grid span.is-today { background: #d4a017; color: #111; font-weight: 800; }
@media (max-width: 800px) {
  .yg-qdash-top, .yg-qdash-qibla, .yg-qdash-salah {
    grid-template-columns: 1fr;
  }
  .yg-qdash-salah { grid-template-columns: repeat(3, 1fr); }
}