/* ASSALAM v452 visual refresh.
   Presentation-only layer: no calculation, routing, content, or feature semantics. */

body {
  background:
    radial-gradient(circle at 50% -12rem, rgba(15, 157, 110, 0.10), transparent 34rem),
    var(--bg);
}

/* ── shell / brand ── */
.app-header {
  gap: 12px;
  margin: 10px 12px 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.90);
  box-shadow: 0 10px 28px rgba(16, 32, 46, 0.08);
}
:root[data-theme='dark'] .app-header {
  background: rgba(20, 27, 41, 0.92);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.32);
}
.app-header img {
  width: 44px;
  height: 44px;
  border-radius: 13px;
  box-shadow: 0 5px 16px rgba(15, 157, 110, 0.18);
}
.app-header .titles { display: flex; flex-direction: column; justify-content: center; }
.brand-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.app-header h1 { font-size: 1.24rem; letter-spacing: -0.025em; }
.app-header .sub { margin-top: 3px; font-size: 0.72rem; font-weight: 600; letter-spacing: .01em; }
.build-badge {
  display: inline-flex;
  align-items: center;
  min-height: 22px;
  padding: 3px 8px;
  border: 1px solid rgba(15, 157, 110, 0.24);
  border-radius: 999px;
  background: var(--emerald-tint);
  color: var(--emerald-deep);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1;
}
.build-badge:empty { display: none; }
:root[data-theme='dark'] .build-badge { color: #5fe0b0; border-color: rgba(95, 224, 176, 0.24); }
.icon-btn {
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 1px solid var(--line);
  background: var(--surface-2);
  font-size: 1.15rem;
}

.method-switch { margin-inline: var(--sp); }

/* ── Beranda: stronger first-open hierarchy ── */
#view-beranda #brHero {
  min-height: 188px;
  padding: 30px 22px 26px;
  border: 1px solid rgba(247, 231, 196, 0.08);
  box-shadow: 0 18px 40px rgba(17, 23, 47, 0.28);
}
#view-beranda #brHero::before {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 24%, rgba(255,255,255,.42) 0 1px, transparent 1.5px),
    radial-gradient(circle at 31% 13%, rgba(255,255,255,.30) 0 1px, transparent 1.5px),
    radial-gradient(circle at 54% 27%, rgba(255,255,255,.24) 0 1px, transparent 1.5px),
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 45%);
  opacity: .75;
}
#view-beranda #brHero > * { position: relative; z-index: 1; }
#view-beranda #brHero .eyebrow {
  margin-bottom: 18px;
  padding: 6px 10px;
  padding-right: 10px;
  border: 1px solid rgba(247, 231, 196, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  letter-spacing: .10em;
}
#view-beranda #brHero .eyebrow::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(224, 169, 59, 0.12);
}
#view-beranda #brHero .hero-date {
  max-width: 82%;
  padding-right: 0;
  font-size: clamp(2.05rem, 8.7vw, 2.95rem) !important;
  line-height: 1.04;
  letter-spacing: -0.035em;
}
#view-beranda #brHero .hero-greg {
  max-width: 82%;
  margin-top: 9px;
  padding-right: 0;
  color: rgba(253, 246, 234, 0.80);
  font-size: .81rem;
  font-weight: 600;
}

#view-beranda > .card {
  padding: 20px;
  border-radius: 19px;
  box-shadow: 0 8px 24px rgba(16, 32, 46, 0.07);
}
:root[data-theme='dark'] #view-beranda > .card { box-shadow: 0 10px 28px rgba(0, 0, 0, .24); }
#view-beranda > .card > .eyebrow { margin-bottom: 13px; }

/* Next prayer: time and countdown become the fastest scan targets. */
#brNext {
  border-color: rgba(15, 157, 110, 0.20);
  background:
    radial-gradient(circle at 100% 0, rgba(15, 157, 110, 0.10), transparent 45%),
    var(--surface);
}
:root[data-theme='dark'] #brNext {
  border-color: rgba(95, 224, 176, 0.16);
  background:
    radial-gradient(circle at 100% 0, rgba(15, 157, 110, 0.14), transparent 48%),
    var(--surface);
}
#brNext .next-row { align-items: flex-end; padding: 2px 0 4px; }
#brNext .next-main { min-width: 0; gap: 11px; }
#brNext .next-main .g {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 14px;
  background: var(--emerald-tint);
  font-size: 1.45rem;
}
#brNext .next-main .nm { font-size: 1.34rem; line-height: 1.05; }
#brNext .next-time { font-size: 2.2rem; line-height: .98; color: var(--emerald-deep); }
:root[data-theme='dark'] #brNext .next-time { color: #5fe0b0; }
#brNext .hero-alt {
  margin-top: 14px !important;
  padding-top: 12px;
  border-top-color: var(--line);
}
#brNext .hero-alt .label { color: var(--ink-3); font-weight: 700; }
#brNext .hero-alt .val { color: var(--emerald-deep); font-size: 1.12rem; font-variant-numeric: tabular-nums; }
:root[data-theme='dark'] #brNext .hero-alt .val { color: #5fe0b0; }
#brNext .mini-sched { gap: 7px; margin-top: 14px; padding-bottom: 1px; scrollbar-width: none; }
#brNext .mini-sched::-webkit-scrollbar { display: none; }
#brNext .mini-sched .ms {
  min-width: 54px;
  padding: 8px 7px;
  border-radius: 12px;
  background: var(--surface-2);
}
#brNext .mini-sched .ms.on {
  box-shadow: inset 0 0 0 1px rgba(15, 157, 110, .14);
}

/* Reminder controls: keep behavior, increase clarity and tap comfort. */
#brRemind .chk { min-height: 46px; border-radius: 12px; }
#brRemind .field { min-height: 46px; }

/* Rukun Islam: fewer, larger targets with a strong first pillar. */
#view-beranda .pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
#view-beranda .pillar {
  min-height: 102px;
  padding: 14px;
  border-radius: 14px;
  background: linear-gradient(145deg, var(--surface-2), var(--surface));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35);
}
:root[data-theme='dark'] #view-beranda .pillar { box-shadow: inset 0 1px 0 rgba(255,255,255,.03); }
#view-beranda .pillar:first-child { grid-column: 1 / -1; min-height: 94px; }
#view-beranda .pillar .pico { font-size: 1.7rem; margin-bottom: 5px; }
#view-beranda .pillar .pnm { font-size: .94rem; font-weight: 800; }
#view-beranda .pillar .pds { margin-top: 2px; font-size: .70rem; }

/* Quick tools: larger labels/targets than the old 4-across dashboard. */
#view-beranda .tile-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
#view-beranda .tile {
  min-height: 80px;
  padding: 12px 7px;
  border-radius: 14px;
  background: var(--surface-2);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.2;
}
#view-beranda .tile .tico { font-size: 1.52rem; margin-bottom: 2px; }

/* ── Bottom navigation: stable inline SVGs + clearer active state ── */
.bottom-nav {
  height: calc(82px + env(safe-area-inset-bottom, 0px));
  padding: 6px 8px env(safe-area-inset-bottom, 0px);
  border-top-color: var(--line);
  background: var(--surface);
  box-shadow: 0 -8px 26px rgba(16, 32, 46, 0.09);
}
:root[data-theme='dark'] .bottom-nav { box-shadow: 0 -10px 28px rgba(0, 0, 0, .30); }
.bottom-nav button {
  min-width: 0;
  min-height: 54px;
  gap: 3px;
  border-radius: 12px;
  font-size: .62rem;
  font-weight: 700;
}
.bottom-nav button .ico {
  width: 42px;
  height: 30px;
  border: 1px solid transparent;
}
.bottom-nav button .ico svg {
  width: 20px;
  height: 20px;
  display: block;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}
.bottom-nav button[aria-current='page'] { color: var(--emerald-deep); }
.bottom-nav button[aria-current='page'] .ico {
  border-color: rgba(15, 157, 110, 0.14);
  background: var(--emerald-tint);
}
:root[data-theme='dark'] .bottom-nav button[aria-current='page'] { color: #5fe0b0; }

@media (min-width: 430px) {
  #view-beranda .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 350px) {
  .app-header { margin-inline: 8px; }
  #view-beranda #brHero { padding-inline: 18px; }
  #view-beranda #brHero .hero-date { max-width: 86%; font-size: 1.95rem !important; }
  #view-beranda #brHero .hero-greg { max-width: 88%; }
  #brNext .next-row { align-items: flex-start; }
  #brNext .next-time { font-size: 1.85rem; }
  #view-beranda .pillar { padding: 12px; }
  #view-beranda .tile { min-height: 76px; }
}