:root {
  --ink: #35243d;
  --muted: #786d7e;
  --green-950: #2d143c;
  --green-900: #43205a;
  --green-800: #572b70;
  --green-700: #0c7d62;
  --green-100: #dff2eb;
  --green-50: #f2f8f5;
  --cream: #f7f4f8;
  --gold: #79bd43;
  --gold-light: #eef8e7;
  --danger: #b84957;
  --line: #e8e1eb;
  --card: #fff;
  --shadow: 0 18px 50px rgba(67, 32, 90, 0.09);
  --radius: 20px;
  --font: 'Aptos', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  font-family: var(--font);
  color: var(--ink);
  background: var(--cream);
}
button {
  font: inherit;
}
button:focus-visible {
  outline: 3px solid rgba(230, 182, 93, 0.5);
  outline-offset: 2px;
}
svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.demo-ribbon {
  position: fixed;
  z-index: 100;
  top: 13px;
  right: -39px;
  width: 155px;
  transform: rotate(42deg);
  background: var(--gold);
  color: var(--green-950);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-align: center;
  padding: 5px;
  box-shadow: 0 4px 14px #0002;
}
.app-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 244px 1fr;
}
.sidebar {
  background: var(--green-950);
  color: #fff;
  display: flex;
  flex-direction: column;
  padding: 24px 16px 16px;
  position: fixed;
  inset: 0 auto 0 0;
  width: 244px;
  z-index: 20;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 10px 26px;
}
.brand-mark,
.tv-logo {
  width: 42px;
  height: 42px;
  border-radius: 13px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, var(--gold), #f3d08b);
  color: var(--green-950);
}
.brand-mark svg {
  width: 29px;
  height: 29px;
}
.brand div:last-child {
  display: flex;
  flex-direction: column;
}
.brand strong {
  font-size: 18px;
  letter-spacing: -0.03em;
}
.brand span {
  font-size: 10px;
  color: #a8c5ba;
  margin-top: 2px;
}
.nav-list {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: auto;
}
.nav-label {
  margin: 22px 11px 7px;
  color: #789c90;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nav-label:first-child {
  margin-top: 0;
}
.nav-item {
  width: 100%;
  border: 0;
  background: transparent;
  color: #aec6bd;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 11px;
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  transition: 0.2s;
}
.nav-item:hover {
  background: #ffffff0d;
  color: #fff;
}
.nav-item.active {
  background: linear-gradient(90deg, #ffffff18, #ffffff0b);
  color: #fff;
  box-shadow: inset 3px 0 var(--gold);
}
.nav-icon {
  display: grid;
  place-items: center;
}
.nav-icon svg {
  width: 17px;
  height: 17px;
}
.nav-badge {
  margin-left: auto;
  background: var(--gold);
  color: var(--green-950);
  font-weight: 800;
  border-radius: 99px;
  font-size: 9px;
  min-width: 18px;
  text-align: center;
  padding: 2px 5px;
}
.phase-badge {
  margin-left: auto;
  color: #a9c0b8;
  border: 1px solid #ffffff18;
  border-radius: 99px;
  font-size: 8px;
  padding: 3px 6px;
}
.sidebar-footer {
  margin-top: auto;
  padding: 16px 8px 3px;
  border-top: 1px solid #ffffff16;
  display: grid;
  grid-template-columns: 34px 1fr 28px;
  align-items: center;
  gap: 9px;
}
.profile-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: #e6b65d22;
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 800;
}
.sidebar-footer div:nth-child(2) {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.sidebar-footer strong {
  font-size: 11px;
}
.sidebar-footer span {
  color: #89a89d;
  font-size: 9px;
  margin-top: 2px;
}
.icon-button {
  position: relative;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  color: var(--ink);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.sidebar .icon-button {
  background: transparent;
  border: 0;
  color: #9cb7ae;
}
.main-content {
  grid-column: 2;
  min-width: 0;
}
.topbar {
  height: 70px;
  background: #fffc;
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 34px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 11px;
  color: var(--muted);
}
.breadcrumb b {
  color: #bcc6c2;
}
.breadcrumb strong {
  color: var(--ink);
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}
.status-chip {
  display: flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 99px;
  padding: 7px 11px;
  font-size: 9px;
  color: var(--muted);
  background: #fff;
}
.status-chip > span:first-child {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #36a772;
  box-shadow: 0 0 0 4px #36a77218;
}
.notification-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 5px;
  height: 5px;
  background: #d76459;
  border: 1px solid #fff;
  border-radius: 50%;
}
.primary-button {
  border: 0;
  border-radius: 11px;
  background: var(--green-900);
  color: #fff;
  padding: 11px 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(18, 63, 53, 0.14);
  transition: 0.2s;
}
.primary-button:hover {
  transform: translateY(-1px);
  background: var(--green-800);
}
.primary-button.compact {
  padding: 9px 13px;
}
.primary-button svg {
  width: 15px;
}
.secondary-button {
  border: 1px solid var(--line);
  border-radius: 11px;
  background: #fff;
  color: var(--ink);
  padding: 10px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 700;
  cursor: pointer;
}
.mobile-menu {
  display: none;
}
.page-content {
  padding: 28px 34px 40px;
  max-width: 1500px;
  margin: auto;
}
.page-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}
.page-heading h1 {
  font-family: Georgia, serif;
  font-size: 28px;
  letter-spacing: -0.04em;
  margin: 0 0 7px;
}
.page-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
}
.heading-actions {
  display: flex;
  gap: 9px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.hero-card {
  grid-column: span 8;
  min-height: 202px;
  background: linear-gradient(110deg, var(--green-950), var(--green-800));
  color: #fff;
  border-radius: var(--radius);
  padding: 26px 29px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.hero-card:before,
.hero-card:after {
  content: '';
  position: absolute;
  border: 1px solid #ffffff12;
  border-radius: 50%;
}
.hero-card:before {
  width: 260px;
  height: 260px;
  right: -70px;
  top: -110px;
}
.hero-card:after {
  width: 150px;
  height: 150px;
  right: 30px;
  top: -60px;
}
.hero-card .eyebrow {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #9dc1b4;
  font-weight: 800;
}
.hero-card h2 {
  font-family: Georgia, serif;
  font-size: 25px;
  line-height: 1.25;
  max-width: 470px;
  margin: 13px 0 8px;
}
.hero-card p {
  color: #b4ccc4;
  font-size: 10px;
  margin: 0;
}
.prayer-strip {
  display: flex;
  gap: 23px;
  margin-top: 24px;
}
.prayer-time {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.prayer-time span {
  color: #92b2a7;
  font-size: 9px;
}
.prayer-time b {
  font-size: 15px;
}
.prayer-time.next {
  padding-left: 16px;
  border-left: 2px solid var(--gold);
}
.prayer-time.next span {
  color: var(--gold);
}
.hero-ornament {
  position: absolute;
  right: 35px;
  bottom: 20px;
  color: #ffffff0f;
}
.hero-ornament svg {
  width: 130px;
  height: 130px;
  stroke-width: 0.8;
}
.quick-card {
  grid-column: span 4;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.card-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.card-title h3 {
  font-size: 12px;
  margin: 0;
}
.card-title button {
  border: 0;
  background: none;
  color: var(--green-700);
  font-size: 9px;
  font-weight: 700;
  cursor: pointer;
}
.quick-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.quick-action {
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 13px;
  min-height: 65px;
  padding: 10px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: 0.2s;
}
.quick-action:hover {
  border-color: #9abbb0;
  background: var(--green-50);
  transform: translateY(-2px);
}
.quick-action span:first-child {
  width: 27px;
  height: 27px;
  border-radius: 8px;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
  margin-bottom: 7px;
}
.quick-action svg {
  width: 14px;
}
.quick-action b {
  display: block;
  font-size: 9px;
}
.metric-card {
  grid-column: span 3;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 18px 19px;
  box-shadow: 0 10px 30px #19342d08;
}
.metric-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.metric-icon {
  width: 33px;
  height: 33px;
  border-radius: 10px;
  background: var(--green-50);
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.metric-icon.gold {
  background: var(--gold-light);
  color: #9b6e19;
}
.metric-icon.rose {
  background: #fbe9e8;
  color: var(--danger);
}
.metric-icon svg {
  width: 16px;
}
.trend {
  font-size: 9px;
  color: #31966b;
  background: #e6f6ed;
  border-radius: 99px;
  padding: 4px 7px;
  font-weight: 700;
}
.metric-card > span {
  display: block;
  color: var(--muted);
  font-size: 9px;
  margin-top: 15px;
}
.metric-card strong {
  display: block;
  font-size: 19px;
  margin-top: 4px;
  letter-spacing: -0.03em;
}
.metric-card small {
  color: #9aa7a3;
  font-size: 8px;
}
.chart-card {
  grid-column: span 8;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 21px 23px;
  box-shadow: var(--shadow);
}
.chart-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
.chart-head h3,
.activity-card h3 {
  font-size: 12px;
  margin: 0 0 5px;
}
.chart-head p {
  font-size: 9px;
  color: var(--muted);
  margin: 0;
}
.legend {
  display: flex;
  gap: 13px;
  font-size: 8px;
  color: var(--muted);
}
.legend span {
  display: flex;
  align-items: center;
  gap: 5px;
}
.legend i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green-700);
}
.legend span:last-child i {
  background: var(--gold);
}
.chart-wrap {
  height: 182px;
  margin-top: 12px;
  position: relative;
}
.chart-wrap svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.chart-wrap .gridline {
  stroke: #edf0ee;
  stroke-width: 1;
}
.chart-wrap .income-line {
  stroke: var(--green-700);
  stroke-width: 3;
  fill: none;
}
.chart-wrap .expense-line {
  stroke: var(--gold);
  stroke-width: 3;
  fill: none;
}
.chart-wrap .area {
  fill: url(#areaFill);
  stroke: none;
}
.chart-labels {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -7px;
  display: flex;
  justify-content: space-around;
  color: #899792;
  font-size: 8px;
}
.activity-card {
  grid-column: span 4;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 21px 20px;
  box-shadow: var(--shadow);
}
.activity-list {
  display: flex;
  flex-direction: column;
  margin-top: 12px;
}
.activity {
  display: grid;
  grid-template-columns: 29px 1fr auto;
  gap: 9px;
  align-items: center;
  padding: 11px 0;
  border-bottom: 1px solid #edf0ee;
}
.activity:last-child {
  border: 0;
}
.activity-icon {
  width: 29px;
  height: 29px;
  border-radius: 9px;
  background: var(--green-50);
  color: var(--green-700);
  display: grid;
  place-items: center;
}
.activity-icon.out {
  background: #fbeeed;
  color: var(--danger);
}
.activity-icon svg {
  width: 13px;
}
.activity div:nth-child(2) {
  display: flex;
  flex-direction: column;
}
.activity b {
  font-size: 9px;
}
.activity span,
.activity small {
  font-size: 8px;
  color: var(--muted);
}
.activity > strong {
  font-size: 9px;
  color: var(--green-700);
}
.activity > strong.out {
  color: var(--danger);
}
.data-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow);
}
.content-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.75fr;
  gap: 16px;
}
.content-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.content-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 13px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 10px;
}
.content-thumb {
  height: 42px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--green-900), #347565);
  display: grid;
  place-items: center;
  color: #fff;
}
.content-thumb.gold {
  background: linear-gradient(135deg, #a77826, var(--gold));
}
.content-row h4 {
  font-size: 10px;
  margin: 0 0 4px;
}
.content-row p {
  font-size: 8px;
  color: var(--muted);
  margin: 0;
}
.status {
  font-size: 8px;
  font-weight: 800;
  border-radius: 99px;
  padding: 5px 8px;
  background: #e5f5ec;
  color: #2d8b62;
}
.status.draft {
  background: #f1f2f1;
  color: #78847f;
}
.preview-frame {
  background: var(--green-950);
  border-radius: 15px;
  padding: 12px;
  color: #fff;
  aspect-ratio: 16/10;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.mini-tv-top,
.mini-tv-bottom {
  display: flex;
  justify-content: space-between;
  font-size: 6px;
}
.mini-tv-center {
  text-align: center;
}
.mini-tv-center strong {
  display: block;
  font-family: Georgia, serif;
  font-size: 14px;
}
.mini-tv-center span {
  font-size: 6px;
  color: #b7cdc5;
}
.phase-panel {
  border: 1px dashed #d5ddd9;
  border-radius: 15px;
  padding: 24px;
  background: linear-gradient(135deg, #fff, var(--green-50));
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 16px;
  align-items: start;
}
.phase-panel .metric-icon {
  width: 44px;
  height: 44px;
}
.phase-panel h3 {
  font-size: 14px;
  margin: 0 0 7px;
}
.phase-panel p {
  font-size: 10px;
  color: var(--muted);
  line-height: 1.7;
  margin: 0;
}
.table {
  width: 100%;
  border-collapse: collapse;
}
.table th {
  text-align: left;
  color: var(--muted);
  font-size: 8px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 10px;
  border-bottom: 1px solid var(--line);
}
.table td {
  font-size: 9px;
  padding: 13px 10px;
  border-bottom: 1px solid #edf0ee;
}
.table tr:last-child td {
  border-bottom: 0;
}
.amount-positive {
  color: #21845d;
  font-weight: 700;
}
.amount-negative {
  color: var(--danger);
  font-weight: 700;
}
.tv-mode {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: #24102f;
  color: #fff;
  display: none;
  overflow: hidden;
}
.tv-mode.visible {
  display: flex;
  flex-direction: column;
  animation: reveal 0.4s ease;
}
.tv-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 55% 35%, #174f43 0, #43205a 43%, #24102f 82%);
  opacity: 0.98;
}
.tv-backdrop:after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(#fff0 98%, #ffffff06 100%), linear-gradient(90deg, #fff0 98%, #ffffff05 100%);
  background-size: 64px 64px;
}
.tv-header,
.tv-layout,
.tv-footer {
  position: relative;
  z-index: 1;
}
.tv-header {
  height: 126px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 25px 38px;
  border-bottom: 1px solid #ffffff17;
}
.tv-brand {
  display: flex;
  align-items: center;
  gap: 15px;
}
.tv-logo {
  width: 55px;
  height: 55px;
  border-radius: 17px;
}
.tv-logo svg {
  width: 38px;
  height: 38px;
}
.tv-brand > div:last-child > span {
  font-size: 9px;
  color: #9cc1b4;
  text-transform: uppercase;
  letter-spacing: 0.13em;
}
.tv-brand h1 {
  font-family: Georgia, serif;
  font-size: 25px;
  margin: 3px 0 2px;
}
.tv-brand p {
  margin: 0;
  color: #8fb2a6;
  font-size: 9px;
}
.tv-clock {
  text-align: right;
  display: flex;
  flex-direction: column;
}
.tv-clock strong {
  font-size: 36px;
  letter-spacing: 0.04em;
}
.tv-clock span {
  font-size: 10px;
}
.tv-clock small {
  color: var(--gold);
  font-size: 8px;
  margin-top: 3px;
}
.tv-layout {
  flex: 1;
  display: grid;
  grid-template-columns: 255px 1fr 282px;
  gap: 17px;
  padding: 17px 24px 18px;
  min-height: 0;
}
.glass-panel {
  background: #ffffff0d;
  border: 1px solid #ffffff17;
  border-radius: 19px;
  backdrop-filter: blur(12px);
}
.prayer-panel,
.donation-panel {
  padding: 20px;
}
.tv-eyebrow {
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #9fc0b5;
  margin: 0 0 14px;
}
.next-prayer {
  background: linear-gradient(135deg, var(--gold), #efca83);
  color: var(--green-950);
  border-radius: 14px;
  padding: 13px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
}
.next-prayer span {
  font-size: 7px;
  text-transform: uppercase;
  font-weight: 800;
}
.next-prayer strong {
  display: block;
  grid-row: 2;
  font-family: Georgia, serif;
  font-size: 17px;
}
.next-prayer b {
  grid-row: 1/3;
  grid-column: 2;
  font-size: 24px;
}
.next-prayer small {
  grid-column: 1/3;
  font-size: 7px;
  margin-top: 5px;
}
.next-prayer.phase-iqomah {
  background: linear-gradient(135deg, var(--green-700), #0f9b7a);
  color: #fff;
}
.next-prayer.phase-azan-urgent {
  animation: next-prayer-pulse 1s ease-in-out infinite;
}
@keyframes next-prayer-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(184, 73, 87, 0.45); }
  50% { box-shadow: 0 0 0 10px rgba(184, 73, 87, 0); }
}
.prayer-list {
  margin-top: 10px;
}
.prayer-list div {
  display: flex;
  justify-content: space-between;
  padding: 7px 9px;
  color: #9bb7ae;
  font-size: 9px;
  border-bottom: 1px solid #ffffff0d;
}
.prayer-list div.active {
  color: var(--gold);
  background: #ffffff08;
  border-radius: 8px;
}
.tv-feature {
  border-radius: 19px;
  position: relative;
  overflow: hidden;
  padding: 25px;
  background: #2d143c;
}
.tv-feature-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.025);
  transition: opacity 0.45s ease, transform 7s ease;
}
.tv-feature.changing .tv-feature-image {
  opacity: 0.25;
  transform: scale(1.06);
}
.tv-feature:before {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(30, 12, 40, 0.96), rgba(35, 15, 47, 0.68) 42%, rgba(35, 15, 47, 0.12) 76%),
    linear-gradient(90deg, rgba(30, 12, 40, 0.34), transparent 62%);
}
.tv-feature:after {
  content: '';
  position: absolute;
  z-index: 1;
  inset: 0;
  border: 1px solid #ffffff16;
  border-radius: 19px;
  pointer-events: none;
}
.live-pill {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 9px;
  background: #43205acc;
  border: 1px solid #ffffff2b;
  border-radius: 99px;
  font-size: 7px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.live-pill i {
  width: 6px;
  height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.feature-copy {
  position: absolute;
  z-index: 2;
  left: 28px;
  right: 25px;
  bottom: 39px;
}
.feature-copy > p:first-child {
  font-size: 8px;
  color: var(--gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-weight: 800;
}
.feature-copy h2 {
  font-family: Georgia, serif;
  font-size: 31px;
  max-width: 470px;
  line-height: 1.1;
  margin: 8px 0;
}
.feature-copy .speaker {
  color: #c0d4cd;
  font-size: 11px;
}
.event-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #b3cac2;
  font-size: 8px;
  margin-top: 15px;
}
.event-meta svg {
  width: 13px;
  color: var(--gold);
}
.carousel-dots {
  position: absolute;
  z-index: 3;
  right: 23px;
  bottom: 20px;
  display: flex;
  gap: 6px;
}
.carousel-dots button {
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #ffffff65;
  cursor: pointer;
  transition: 0.25s;
}
.carousel-dots button.active {
  width: 22px;
  border-radius: 5px;
  background: var(--gold);
}
.balance-card {
  border-bottom: 1px solid #ffffff15;
  padding-bottom: 16px;
  display: flex;
  flex-direction: column;
}
.balance-card > span {
  font-size: 8px;
  color: #9cb9af;
}
.balance-card strong {
  font-size: 20px;
  margin: 6px 0;
}
.balance-card small {
  font-size: 8px;
  color: #aac4bb;
}
.balance-card i {
  color: #67d2a1;
  font-style: normal;
}
.donation-breakdown {
  padding: 8px 0 10px;
}
.donation-breakdown div {
  display: flex;
  justify-content: space-between;
  font-size: 8px;
  padding: 7px 0;
}
.donation-breakdown span {
  color: #9bb8ae;
}
.qris-card {
  background: #fff;
  color: var(--green-950);
  border-radius: 13px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qris-card > div:last-child {
  display: flex;
  flex-direction: column;
}
.qris-card span {
  font-size: 6px;
  text-transform: uppercase;
  color: #687a74;
}
.qris-card strong {
  font-size: 10px;
  margin: 2px 0;
}
.qris-card small {
  font-size: 6px;
  color: #9aa6a2;
}
.fake-qr {
  width: 56px;
  height: 56px;
  flex: none;
  background: repeating-conic-gradient(#0b332b 0 25%, #fff 0 50%) 0 0/11px 11px;
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px #d9dfdc;
  position: relative;
}
.fake-qr:after {
  content: '';
  position: absolute;
  inset: 17px;
  background: #fff;
  border: 4px solid var(--green-950);
}
.tv-footer {
  height: 48px;
  display: flex;
  align-items: center;
  background: #061f1a;
  border-top: 1px solid #ffffff12;
}
.ticker-label {
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--gold);
  color: var(--green-950);
  font-size: 8px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.ticker-track {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  font-size: 9px;
  color: #c3d5cf;
}
.ticker-track span {
  display: inline-block;
  padding-left: 100%;
  animation: ticker 28s linear infinite;
}
.tv-close {
  align-self: stretch;
  border: 0;
  border-left: 1px solid #ffffff17;
  background: #ffffff09;
  color: #fff;
  padding: 0 17px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 8px;
  cursor: pointer;
}
.tv-close svg {
  width: 13px;
}
.toast {
  position: fixed;
  z-index: 300;
  left: 50%;
  bottom: 25px;
  transform: translate(-50%, 100px);
  opacity: 0;
  background: var(--green-950);
  color: #fff;
  border: 1px solid #ffffff19;
  border-radius: 12px;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 9px;
  box-shadow: 0 15px 40px #0003;
  transition: 0.3s;
}
.toast.visible {
  transform: translate(-50%, 0);
  opacity: 1;
}
.toast svg {
  color: var(--gold);
}
.full-width {
  width: 100%;
  margin-top: 13px;
}
.muted-copy {
  font-size: 9px;
  color: var(--muted);
  margin: 5px 0 0;
}
@keyframes reveal {
  from {
    opacity: 0;
    transform: scale(1.015);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes ticker {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}
.nav-item.nav-child {
  padding: 7px 10px 7px 39px;
  font-size: 10px;
  position: relative;
}
.nav-item.nav-child:before {
  content: '';
  position: absolute;
  left: 24px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #668c7f;
}
.nav-label:has(.phase-badge) {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-label .phase-badge {
  font-size: 7px;
  text-transform: none;
  letter-spacing: 0;
}
.phase-note {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: -10px 0 18px;
  padding: 10px 13px;
  border: 1px solid #efd79f;
  border-radius: 12px;
  background: var(--gold-light);
  font-size: 9px;
  color: #7b5b1c;
}
.phase-note b {
  border-radius: 99px;
  padding: 4px 7px;
  background: #efd28f;
  color: #60420c;
  white-space: nowrap;
}
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.filter-bar label {
  height: 38px;
  min-width: 250px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 11px;
  color: var(--muted);
}
.filter-bar label svg {
  width: 14px;
}
.filter-bar input {
  width: 100%;
  border: 0;
  outline: 0;
  font: inherit;
  font-size: 9px;
  color: var(--ink);
}
.table-scroll {
  overflow: auto;
}
.summary-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}
.summary-grid .metric-card {
  grid-column: span 3;
}
.full-span {
  width: 100%;
  margin-top: 0;
}
.form-card h3,
.settings-layout h3 {
  font-size: 12px;
  margin: 0 0 18px;
}
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.form-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.form-grid label.wide {
  grid-column: 1/-1;
}
.form-grid label > span {
  font-size: 9px;
  font-weight: 700;
}
.form-grid input {
  height: 40px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  font: inherit;
  font-size: 10px;
}
.upload-box {
  min-height: 86px;
  border: 1px dashed #b9cac4;
  border-radius: 12px;
  background: var(--green-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
  color: var(--green-700);
}
.upload-box svg {
  width: 17px;
}
.upload-box b {
  font-size: 9px;
}
.upload-box small {
  font-size: 8px;
  color: var(--muted);
}
.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 9px;
  margin-top: 22px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.schedule-banner {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  align-items: center;
  gap: 18px;
  background: var(--green-50);
  border: 1px solid #dbe9e3;
  border-radius: 13px;
  padding: 14px;
  margin-bottom: 15px;
}
.schedule-banner > div {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.schedule-banner span {
  font-size: 8px;
  color: var(--muted);
}
.schedule-banner strong {
  font-size: 10px;
}
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
}
.workflow-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 17px;
  padding: 19px;
  box-shadow: var(--shadow);
  min-height: 210px;
  display: flex;
  flex-direction: column;
}
.workflow-card > span {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: var(--green-100);
  color: var(--green-700);
  display: grid;
  place-items: center;
  font-size: 11px;
  font-weight: 900;
}
.workflow-card h3 {
  font-size: 12px;
  margin: 16px 0 8px;
}
.workflow-card p {
  font-size: 9px;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}
.workflow-card > div {
  margin-top: auto;
  padding-top: 15px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 9px;
}
.workflow-card button {
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 8px;
  background: var(--green-900);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.workflow-card button svg {
  width: 13px;
}
.settings-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 16px;
}
@media (max-width: 1100px) {
  .metric-card {
    grid-column: span 6;
  }
  .summary-grid .metric-card {
    grid-column: span 6;
  }
  .hero-card,
  .quick-card,
  .chart-card,
  .activity-card {
    grid-column: span 12;
  }
  .workflow-grid {
    grid-template-columns: 1fr 1fr;
  }
  .tv-layout {
    grid-template-columns: 210px 1fr;
  }
  .donation-panel {
    display: none;
  }
}
@media (max-width: 760px) {
  .app-shell {
    display: block;
  }
  .sidebar {
    transform: translateX(-100%);
    transition: 0.25s;
    box-shadow: 20px 0 60px #0004;
  }
  .sidebar.open {
    transform: translateX(0);
  }
  .main-content {
    width: 100%;
  }
  .mobile-menu {
    display: grid;
  }
  .breadcrumb {
    display: none;
  }
  .topbar {
    padding: 0 18px;
    height: 62px;
  }
  .status-chip {
    display: none;
  }
  .primary-button.compact span:last-child {
    display: none;
  }
  .page-content {
    padding: 22px 16px 30px;
  }
  .page-heading {
    align-items: flex-start;
    flex-direction: column;
  }
  .heading-actions {
    width: 100%;
  }
  .heading-actions button {
    flex: 1;
  }
  .hero-card {
    padding: 23px;
  }
  .hero-card h2 {
    font-size: 21px;
  }
  .prayer-strip {
    gap: 15px;
    overflow: auto;
  }
  .metric-card,
  .summary-grid .metric-card {
    grid-column: span 12;
  }
  .content-grid,
  .settings-layout,
  .form-grid {
    grid-template-columns: 1fr;
  }
  .workflow-grid {
    grid-template-columns: 1fr;
  }
  .filter-bar {
    align-items: stretch;
    flex-direction: column;
  }
  .filter-bar label {
    min-width: 0;
  }
  .schedule-banner {
    grid-template-columns: 1fr;
  }
  .tv-header {
    padding: 15px 18px;
    height: 104px;
  }
  .tv-logo {
    width: 43px;
    height: 43px;
  }
  .tv-brand h1 {
    font-size: 17px;
  }
  .tv-brand p,
  .tv-brand > div:last-child > span {
    display: none;
  }
  .tv-clock strong {
    font-size: 23px;
  }
  .tv-clock span {
    font-size: 8px;
  }
  .tv-layout {
    grid-template-columns: 1fr;
    padding: 12px;
  }
  .prayer-panel {
    display: none;
  }
  .tv-feature {
    min-height: 420px;
  }
  .feature-copy h2 {
    font-size: 27px;
  }
  .tv-footer {
    height: 50px;
  }
  .ticker-label {
    display: none;
  }
  .tv-close span:last-child {
    display: none;
  }
}
/* Authentication gate is deliberately part of the buildless prototype rather
   than a second app: setup and login share the same origin and cookie. */
.auth-page{position:fixed;inset:0;z-index:1000;display:grid;grid-template-columns:minmax(360px,44%) 1fr;background:var(--surface-card);overflow:auto}.auth-page[hidden],.app-shell[hidden],.demo-ribbon[hidden]{display:none}.auth-hero{min-height:100vh;display:flex;flex-direction:column;padding:48px 56px;color:#fff;background:radial-gradient(circle at 20% 20%,rgba(121,189,67,.22),transparent 32%),linear-gradient(145deg,var(--green-950),var(--green-900));position:relative;overflow:hidden}.auth-hero::after{content:"";position:absolute;width:420px;height:420px;border:1px solid rgba(255,255,255,.08);border-radius:50%;right:-210px;bottom:-120px;box-shadow:0 0 0 80px rgba(255,255,255,.025),0 0 0 160px rgba(255,255,255,.02)}.auth-hero-brand,.auth-mobile-brand{display:flex;align-items:center;gap:13px;position:relative;z-index:1}.auth-hero-brand strong,.auth-mobile-brand strong{font-size:21px;letter-spacing:-.03em}.auth-hero-copy{margin:auto 0;max-width:520px;position:relative;z-index:1}.auth-hero-copy>span{display:inline-flex;padding:7px 11px;border:1px solid rgba(255,255,255,.16);border-radius:999px;color:#dff2eb;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.auth-hero-copy h1{max-width:500px;margin:24px 0 18px;font-size:clamp(38px,4vw,58px);line-height:1.05;letter-spacing:-.055em}.auth-hero-copy p{max-width:480px;margin:0;color:#c8d9d3;font-size:16px;line-height:1.75}.auth-hero-foot{position:relative;z-index:1;margin:0;color:#9fbbb1;font-size:12px}.auth-main{min-height:100vh;display:grid;place-items:center;padding:48px}.auth-card{width:min(430px,100%);display:grid;gap:18px}.auth-mobile-brand{display:none}.auth-heading{margin-bottom:10px}.auth-heading>span{color:var(--green-700);font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.auth-heading h2{margin:9px 0 10px;color:var(--text-primary);font-size:32px;letter-spacing:-.045em}.auth-heading p{margin:0;color:var(--text-secondary);line-height:1.6}.auth-card label{display:grid;gap:8px}.auth-card label span{font-size:13px;font-weight:700;color:var(--text-secondary)}.auth-card input{height:48px;padding:0 14px;border:1px solid var(--hairline-field);border-radius:11px;background:var(--surface-card);color:var(--text-primary);font:inherit;transition:.18s}.auth-card input::placeholder{color:var(--text-tertiary)}.auth-card input:focus{outline:3px solid var(--accent-soft);border-color:var(--accent-strong)}.auth-error{min-height:20px;margin:-4px 0!important;color:var(--danger-fg)!important;font-size:13px}.auth-submit{height:48px}.auth-help{margin:2px 0 0!important;color:var(--text-tertiary)!important;font-size:12px;text-align:center}
@media(max-width:800px){.auth-page{grid-template-columns:1fr}.auth-hero{display:none}.auth-main{padding:30px 22px}.auth-mobile-brand{display:flex;margin-bottom:24px;color:var(--green-950)}.auth-heading h2{font-size:28px}}

/* Platform owner sees only User Management; tenant users never see it. */
.nav-list:not(.owner-mode)>.owner-nav,.nav-list>.foundation-nav{display:none}.nav-list.foundation-mode>:not(.foundation-nav){display:none}.nav-list.foundation-mode>.foundation-nav{display:flex}.nav-list.foundation-mode>.nav-label.foundation-nav{display:block}.nav-list.foundation-mode>.owner-nav{display:none}.nav-list.owner-mode>:not(.owner-nav){display:none}
.owner-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:18px;align-items:start}.owner-form{display:grid;gap:14px}.owner-form label{display:grid;gap:7px}.owner-form label>span{font-size:13px;font-weight:700;color:var(--text-secondary)}.owner-form input,.owner-form select{height:42px;padding:0 12px;border:1px solid var(--hairline-field);border-radius:11px;background:var(--surface-card);color:var(--text-primary);font:inherit}.owner-form .check-list{display:grid;gap:6px;max-height:190px;overflow:auto;padding:10px;border:1px solid var(--hairline-field);border-radius:11px}.owner-form .check-list label{display:flex;align-items:center;gap:8px;font-weight:500}.owner-form .check-list input{height:auto}.owner-message{min-height:18px;margin:0;font-size:13px}.owner-message.error{color:var(--danger-fg)}.owner-message.ok{color:var(--green-700)}.owner-empty{padding:28px;text-align:center;color:var(--text-tertiary)}
@media(max-width:1000px){.owner-grid{grid-template-columns:1fr}}
/* The auth and owner screens were written against design-system token names
   this stylesheet never defined, so their field borders resolved to nothing
   and the inputs looked like bare text. Alias them to the prototype's palette
   and give every field a visible outline and focus ring. */
:root{--hairline-field:#b9aebf;--surface-card:#fff;--text-primary:var(--ink);--text-secondary:var(--muted);--text-tertiary:var(--muted);--accent-strong:var(--green-800);--accent-soft:rgba(87,43,112,.2);--danger-fg:var(--danger)}
.auth-card input,.owner-form input:not([type=checkbox]),.owner-form select,.form-grid input,.form-grid select{border:1.5px solid var(--hairline-field);background:#fff;box-shadow:0 1px 2px rgba(53,36,61,.04)}
.auth-card input{font-size:15px}
.auth-card input:hover,.owner-form input:hover,.owner-form select:hover,.form-grid input:hover{border-color:#8f8296}
.auth-card input:focus,.owner-form input:focus,.owner-form select:focus,.form-grid input:focus{outline:3px solid var(--accent-soft);outline-offset:0;border-color:var(--accent-strong)}
.filter-bar label{border:1.5px solid var(--hairline-field)}
.owner-form .check-list{border:1.5px solid var(--hairline-field);background:#fff}
/* Live Display Monitor screens */
.owner-form textarea{padding:10px 12px;border:1.5px solid var(--hairline-field);border-radius:11px;background:#fff;color:var(--text-primary);font:inherit;resize:vertical}.owner-form textarea:focus{outline:3px solid var(--accent-soft);border-color:var(--accent-strong)}
.owner-form input[type=file]{height:auto;padding:9px 12px}.owner-form small,.form-hint{color:var(--text-tertiary);font-size:12px;margin:0}.check-line{display:flex!important;align-items:center;gap:9px;font-weight:500}.check-line input{height:auto!important;width:auto}
.row-actions{display:flex;gap:8px;justify-content:flex-end}.row-actions .secondary-button,.form-actions .secondary-button{height:34px;padding:0 12px}.secondary-button.danger{color:var(--danger);border-color:var(--danger)}
.thumb{width:72px;height:44px;object-fit:cover;border-radius:8px;border:1px solid var(--line)}.thumb.large{width:100%;height:auto;max-height:140px}.thumb-cell{display:flex;align-items:center;gap:12px}
.qris-preview{display:grid;place-items:center;gap:12px;padding:20px}.qris-preview img{max-width:100%;object-fit:contain;border:1px solid var(--line);border-radius:12px;background:#fff}.qris-preview p{margin:0;text-align:center}
.form-actions{display:flex;justify-content:flex-end;gap:10px}.page-content .data-card .table{width:100%}
/* Form fields must size to their card: without border-box and a zero min-width a text input keeps its default
   intrinsic width and pushes the card, then the whole page, out to the right. */
.owner-form,.owner-form label,.owner-grid>*{min-width:0}
.owner-form input:not([type=checkbox]):not([type=radio]),.owner-form select,.owner-form textarea{width:100%;max-width:100%;box-sizing:border-box;min-width:0}
.owner-form input[type=file]{font-size:13px}
.owner-grid{grid-template-columns:minmax(0,1fr) minmax(300px,380px)}
.owner-grid>.data-card{overflow:auto}
.form-card .form-actions{flex-wrap:wrap}
@media(max-width:1100px){.owner-grid{grid-template-columns:minmax(0,1fr)}}
/* Prayer schedule screens */
.month-input{height:36px;padding:0 10px;border:1.5px solid var(--hairline-field);border-radius:10px;background:#fff;font:inherit}
.today-row{background:var(--green-50);font-weight:700}.table-scroll td,.table-scroll th{white-space:nowrap}
.metric-card strong.small{font-size:14px}.progress{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin:10px 0}.progress i{display:block;height:100%;background:var(--green-800);transition:width .4s}
.job-panel{padding:4px 2px}.job-head{display:flex;justify-content:space-between;align-items:center;gap:12px}.job-failed{margin:8px 0 0;padding-left:18px;font-size:13px;color:var(--danger);max-height:180px;overflow:auto}
[data-city-field][hidden]{display:none}
body.owner-mode .topbar .primary-button{display:none}

/* City picker: a searchable list instead of a select that looked unchangeable */
.city-picker{position:relative}.city-results{list-style:none;margin:0;padding:6px;border:1.5px solid var(--hairline-field);border-radius:11px;background:#fff;max-height:240px;overflow:auto;box-shadow:0 10px 30px rgba(53,36,61,.12)}.city-results[hidden]{display:none}
.city-results button{width:100%;text-align:left;padding:9px 10px;border:0;border-radius:8px;background:transparent;font:inherit;cursor:pointer;display:flex;justify-content:space-between;gap:10px}.city-results button:hover,.city-results button:focus{background:var(--green-50);outline:none}.city-results .empty{padding:9px 10px;color:var(--text-tertiary)}.city-hint b{color:var(--text-primary)}

/* Saldo Masjid: figures as labelled rows so long amounts never clip */
.balance-show{margin:0;padding:6px 22px 0}.balance-show>div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:16px 0;border-bottom:1px solid var(--line)}.balance-show dt{color:var(--muted);font-size:14px}.balance-show dd{margin:0;color:var(--ink);font-size:22px;font-weight:800;letter-spacing:-.02em;text-align:right;overflow-wrap:anywhere}.balance-show .total{border-bottom:0}.balance-show .total dt{color:var(--ink);font-weight:700}.balance-show .total dd{color:var(--green-800);font-size:26px}
.balance-show~.form-hint{padding:0 22px 18px}
.balance-show dd{white-space:nowrap;overflow-wrap:normal}.balance-show .total dd{font-size:22px}.balance-show dt{flex:1}
.check-line{font-size:14px}
/* QRIS on the public screen: sized to be scanned from a distance. The demo
   placeholder (.fake-qr) stays small; a real QRIS fills the panel width as a
   square on a white quiet zone, capped by the "Tinggi QRIS" setting. */
.qris-card.live{flex-direction:column;align-items:stretch;gap:12px;padding:16px;border-radius:18px;margin-top:auto}
.qris-card.live .fake-qr{width:100%;height:auto;aspect-ratio:1/1;max-height:var(--qris-h,32vh);margin:0 auto;border:0;box-shadow:none;background:#fff;display:grid;place-items:center}
.qris-card.live .fake-qr:after{display:none}
.qris-card.live .fake-qr img{width:100%;height:100%;max-width:none;max-height:none;object-fit:contain;image-rendering:pixelated}
.qris-card.live>div:last-child{align-items:center;text-align:center}
.qris-card.live span{font-size:11px;letter-spacing:.08em}
.qris-card.live strong{font-size:17px;margin:4px 0 0}
/* A scannable QRIS needs room: the donation column grows with the screen. */
.tv-layout{grid-template-columns:255px 1fr clamp(282px,24vw,460px)}
@media (max-width:1100px){.tv-layout{grid-template-columns:210px 1fr}}
.qris-card.live{padding:14px}
/* Keuangan */
.amount{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}.amount.in{color:var(--green-700)}.amount.out{color:var(--danger)}
.filter-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-items:end;margin-bottom:16px;padding:16px;background:#fff;border:1px solid var(--line);border-radius:16px}
.filter-grid label{display:grid;gap:6px;min-width:0}.filter-grid label>span{font-size:12px;font-weight:700;color:var(--muted)}.filter-grid input,.filter-grid select{width:100%;box-sizing:border-box;height:38px;padding:0 10px;border:1.5px solid var(--hairline-field);border-radius:10px;background:#fff;font:inherit}.filter-actions{display:flex;gap:8px}.filter-actions .primary-button,.filter-actions .secondary-button{height:38px}
.pager{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 4px 4px;color:var(--muted);font-size:13px}.pager div{display:flex;gap:8px}.pager .secondary-button{height:34px}.pager button[disabled]{opacity:.45;cursor:not-allowed}
.segmented{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:4px;background:var(--line);border-radius:12px}.segmented label{display:block!important}.segmented input{position:absolute;opacity:0;pointer-events:none}.segmented span{display:block;padding:9px;text-align:center;border-radius:9px;font-weight:700;color:var(--muted);cursor:pointer}.segmented input:checked+span{background:#fff;color:var(--ink);box-shadow:0 1px 3px rgba(53,36,61,.15)}.segmented input:focus-visible+span{outline:3px solid var(--accent-soft)}
.detail-list{margin:10px 0;display:grid;gap:0}.detail-list>div{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px solid var(--line)}.detail-list dt{color:var(--muted);font-size:13px}.detail-list dd{margin:0;text-align:right;font-weight:600;overflow-wrap:anywhere}
.proof-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:10px;margin-bottom:12px}.proof-grid figure{margin:0;display:grid;gap:6px}.proof-grid img{width:100%;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--line)}.proof-grid .secondary-button{height:30px;font-size:12px}
.total-row{display:flex;justify-content:flex-end;gap:32px;padding:14px 12px 4px;border-top:2px solid var(--line);margin-top:6px}.total-row span{margin-right:auto;font-weight:700}.total-row b{font-variant-numeric:tabular-nums}
.top-list{list-style:none;margin:0;padding:0}.top-list li{display:flex;justify-content:space-between;gap:12px;padding:11px 4px;border-bottom:1px solid var(--line)}
.bar-in{fill:var(--green-700)}.bar-out{fill:var(--danger)}.chart-wrap text{font-size:11px;fill:var(--muted)}

/* Finance charts: the global svg rule strokes every shape, which blurred labels and outlined bars */
.chart-wrap rect,.chart-wrap text{stroke:none}.chart-wrap text{fill:var(--muted)}
.chart-card .legend span:nth-child(2) i{background:var(--danger)}
.fin-split{display:grid;grid-template-columns:minmax(0,2fr) minmax(260px,1fr);gap:18px;align-items:start}@media(max-width:1000px){.fin-split{grid-template-columns:minmax(0,1fr)}}

.fin-split>.chart-card,.fin-split>.data-card{grid-column:auto}
.filter-grid input,.filter-grid select{font-size:13px}.top-list{font-size:14px}.top-list li .amount{font-size:14px}

/* ZISWAF */
.prog-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}.prog{padding:14px;border:1px solid var(--line);border-radius:14px}.prog .form-hint{margin:6px 0 0}
[data-pay][hidden]{display:none}
.prog .job-head b{font-size:15px;line-height:1.3}.prog .form-hint{font-size:12px}

/* Aset */
.status.warn{background:#fff3d6;color:#8a5a00}
.tabs{display:flex;gap:6px;margin-bottom:16px;flex-wrap:wrap;grid-template-columns:none;background:transparent;padding:0}.tabs .seg{padding:9px 16px;border:1.5px solid var(--hairline-field);border-radius:999px;background:#fff;font:inherit;font-weight:700;color:var(--muted);cursor:pointer}.tabs .seg.on{background:var(--green-800);border-color:var(--green-800);color:#fff}
.bar-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}.bar-list li{display:grid;grid-template-columns:minmax(90px,1fr) 2fr auto;gap:12px;align-items:center}.bar-list .progress{margin:0}

/* Qurban */
.period-picker{display:grid;gap:4px}.period-picker span{font-size:12px;font-weight:700;color:var(--muted)}.period-picker select{height:38px;padding:0 10px;border:1.5px solid var(--hairline-field);border-radius:10px;background:#fff;font:inherit;font-size:13px}
.inline-form{display:flex;gap:8px;align-items:center}.inline-form select{height:34px;padding:0 8px;border:1.5px solid var(--hairline-field);border-radius:9px;background:#fff;font:inherit;font-size:13px;max-width:200px}.inline-form .secondary-button{height:34px}
.card-title .heading-actions{display:flex;gap:8px;flex-wrap:wrap}

/* Public TV link */
.tv-link{margin-bottom:18px}.tv-link-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.tv-link-row input{flex:1;min-width:220px;height:40px;padding:0 12px;border:1.5px solid var(--hairline-field);border-radius:10px;background:#fff;font:inherit;font-size:13px}.tv-link-row .secondary-button,.tv-link-row .primary-button{height:40px;display:inline-flex;align-items:center}

/* A slide without a photo shows a plain themed panel, on the console overlay and the public screen alike:
   a stock photo of someone else's kajian is not the mosque's content. */
.tv-feature.no-photo{background:radial-gradient(circle at 70% 25%,rgba(121,189,67,.22),transparent 42%),linear-gradient(145deg,#2d143c,#17483f)}
.tv-feature.no-photo .tv-feature-image{display:none}

/* Users and roles */
fieldset.check-list{border:1.5px solid var(--hairline-field);border-radius:11px;padding:10px 12px;margin:0;min-width:0}fieldset.check-list legend{padding:0 6px;font-size:12px;font-weight:800;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}fieldset.check-list .check-line{margin:6px 0}fieldset.check-list small{color:var(--text-tertiary)}
.sidebar-footer.clickable{cursor:pointer}.sidebar-footer.clickable:hover strong{text-decoration:underline}
.nav-item[hidden],.nav-label[hidden]{display:none!important}
.owner-form [hidden]{display:none!important}
.audit-detail{display:block;max-width:360px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--text-tertiary)}
.heading-actions select{height:38px;padding:0 12px;border:1px solid var(--hairline-field);border-radius:11px;background:var(--surface-card);color:var(--text-primary);font:inherit}
/* TV legibility: the prototype sizes (6-10px) read from a desk, not across a hall.
   Every size scales with the viewport so a 1080p TV gets large text and a laptop stays usable. */
.tv-header{height:clamp(104px,10vw,170px)}
.tv-logo{width:clamp(48px,4vw,76px);height:clamp(48px,4vw,76px)}
.tv-brand > div:last-child > span{font-size:clamp(12px,.95vw,18px)}
.tv-brand h1{font-size:clamp(24px,2.5vw,48px)}
.tv-brand p{font-size:clamp(13px,1.05vw,20px)}
.tv-clock strong{font-size:clamp(34px,3.8vw,72px)}
.tv-clock span{font-size:clamp(14px,1.15vw,22px)}
.tv-clock small{font-size:clamp(12px,.95vw,18px)}
.tv-layout{grid-template-columns:clamp(270px,22vw,430px) 1fr clamp(282px,24vw,460px)}
@media (max-width:1100px){.tv-layout{grid-template-columns:clamp(240px,26vw,300px) 1fr}}
.tv-eyebrow{font-size:clamp(12px,.95vw,18px)}
.next-prayer{padding:clamp(13px,1.1vw,22px)}
.next-prayer span{font-size:clamp(11px,.85vw,16px)}
.next-prayer strong{font-size:clamp(22px,1.9vw,36px)}
.next-prayer b{font-size:clamp(28px,2.6vw,50px)}
.next-prayer small{font-size:clamp(11px,.85vw,16px)}
.prayer-list div{padding:clamp(8px,.7vw,14px) clamp(9px,.8vw,16px);font-size:clamp(16px,1.35vw,26px)}
.live-pill{font-size:clamp(11px,.85vw,16px);padding:8px 13px}
.feature-copy > p:first-child{font-size:clamp(12px,.95vw,18px)}
.feature-copy h2{font-size:clamp(30px,3vw,58px);max-width:min(80%,900px)}
.feature-copy .speaker{font-size:clamp(15px,1.3vw,25px)}
.event-meta{font-size:clamp(13px,1.05vw,20px)}
.event-meta svg{width:clamp(14px,1.1vw,22px)}
.balance-card > span,.balance-card small{font-size:clamp(12px,.95vw,18px)}
.balance-card strong{font-size:clamp(24px,2vw,38px)}
.donation-breakdown div{font-size:clamp(13px,1.05vw,20px)}
.qris-card span{font-size:clamp(10px,.8vw,15px)}
.qris-card strong{font-size:clamp(14px,1.1vw,21px)}
.qris-card small{font-size:clamp(10px,.8vw,15px)}
.tv-footer{height:clamp(52px,4.6vw,86px)}
.ticker-label{font-size:clamp(13px,1.05vw,20px);padding:0 clamp(20px,1.6vw,32px)}
.ticker-track{font-size:clamp(20px,1.9vw,36px);display:flex;align-items:center}
.ticker-track span{animation-duration:45s}
.tv-close{font-size:clamp(12px,.95vw,18px)}
@media (max-width:760px){.tv-layout{grid-template-columns:1fr}.tv-clock strong{font-size:26px}.tv-header{height:104px}.ticker-track{font-size:18px}}
/* Second pass: running text and the prayer times were still small from the back of the hall. */
.tv-layout{grid-template-columns:clamp(300px,25vw,500px) 1fr clamp(282px,23vw,440px)}
@media (max-width:1100px){.tv-layout{grid-template-columns:clamp(260px,30vw,340px) 1fr}}
.prayer-list div{padding:clamp(8px,.8vw,16px) clamp(10px,.9vw,18px);font-size:clamp(22px,2.2vw,44px)}
.next-prayer strong{font-size:clamp(26px,2.3vw,44px)}
.next-prayer b{font-size:clamp(32px,3.1vw,60px)}
.next-prayer span,.next-prayer small{font-size:clamp(13px,1.05vw,20px)}
.tv-footer{height:clamp(64px,6.2vw,120px)}
.ticker-label{font-size:clamp(15px,1.4vw,27px)}
.ticker-track{font-size:clamp(28px,3.2vw,62px)}
.ticker-track span{animation-duration:60s}
@media (max-width:760px){.ticker-track{font-size:22px}.tv-footer{height:56px}}
/* The list fills the panel's remaining height so seven rows never run under the ticker. */
.prayer-panel{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.prayer-list{flex:1;min-height:0;display:flex;flex-direction:column}
.prayer-list div{flex:1;min-height:0;align-items:center;padding:0 clamp(10px,.9vw,18px);font-size:clamp(20px,1.9vw,40px)}
.next-prayer span{white-space:nowrap}
.tv-footer{height:clamp(60px,5.4vw,104px)}
.tv-header{height:clamp(96px,8.8vw,160px)}
.next-prayer b{font-size:clamp(28px,2.5vw,52px)}.next-prayer{padding-right:clamp(13px,1.2vw,24px)}
/* Third pass: nothing on the TV may be small. Floors are 16px+, labels scale at about 1.3-1.7vw. */
.tv-header{height:clamp(104px,10vw,190px)}
.tv-brand > div:last-child > span{font-size:clamp(14px,1.35vw,28px)}
.tv-brand h1{font-size:clamp(26px,3vw,60px)}
.tv-brand p{font-size:clamp(15px,1.4vw,28px)}
.tv-clock strong{font-size:clamp(36px,4.4vw,88px)}
.tv-clock span{font-size:clamp(16px,1.7vw,34px)}
.tv-clock small{font-size:clamp(14px,1.45vw,30px)}
.tv-layout{grid-template-columns:clamp(320px,27vw,540px) 1fr clamp(300px,24vw,470px)}
@media (max-width:1100px){.tv-layout{grid-template-columns:clamp(270px,32vw,360px) 1fr}}
.tv-eyebrow{font-size:clamp(14px,1.3vw,26px)}
.next-prayer span,.next-prayer small{font-size:clamp(14px,1.3vw,26px)}
.next-prayer strong{font-size:clamp(28px,2.6vw,52px)}
.next-prayer b{font-size:clamp(30px,2.7vw,56px)}
.prayer-list div{font-size:clamp(22px,2.1vw,44px)}
.live-pill{font-size:clamp(13px,1.25vw,26px)}
.feature-copy > p:first-child{font-size:clamp(14px,1.45vw,29px)}
.feature-copy h2{font-size:clamp(32px,3.8vw,76px)}
.feature-copy .speaker{font-size:clamp(18px,1.9vw,38px)}
.event-meta{font-size:clamp(15px,1.6vw,32px)}
.event-meta svg{width:clamp(16px,1.6vw,32px)}
.balance-card > span,.balance-card small{font-size:clamp(14px,1.45vw,29px)}
.balance-card strong{font-size:clamp(28px,2.9vw,58px)}
.donation-breakdown div{font-size:clamp(15px,1.5vw,30px)}
.qris-card.live span,.qris-card span{font-size:clamp(12px,1.15vw,23px)}
.qris-card.live strong,.qris-card strong{font-size:clamp(17px,1.7vw,34px)}
.qris-card small{font-size:clamp(12px,1.15vw,23px)}
.tv-footer{height:clamp(68px,6.2vw,120px)}
.ticker-label{font-size:clamp(16px,1.65vw,33px)}
.ticker-track{font-size:clamp(30px,3.6vw,72px)}
.tv-close{font-size:clamp(14px,1.3vw,26px)}
@media (max-width:760px){.tv-layout{grid-template-columns:1fr}.tv-header{height:104px}.tv-clock strong{font-size:26px}.ticker-track{font-size:22px}.tv-footer{height:56px}}
.tv-layout{grid-template-rows:minmax(0,1fr)}
.tv-layout > *{min-height:0;overflow:hidden}
.tv-header{height:clamp(92px,8.8vw,190px)}
.next-prayer b{font-size:clamp(26px,2.4vw,56px)}
.tv-footer{height:clamp(60px,5.6vw,120px)}
.qris-card.live{padding:clamp(8px,.8vw,16px)}
.qris-card.live .fake-qr{max-height:100%}
.gallery-edit{display:grid;gap:10px}.gallery-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}.gallery-item{display:grid;gap:6px;padding:8px;border:1px solid var(--line);border-radius:10px}.gallery-item .thumb.large{max-height:80px;object-fit:cover}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}.filter-row input,.filter-row select{min-width:160px}
.code-block{margin:0;padding:12px;max-height:320px;overflow:auto;border:1px solid var(--line);border-radius:10px;background:var(--soft,#f6f7f8);font-size:12px;white-space:pre-wrap;word-break:break-word}
.filter-row .check-line{display:inline-flex;align-items:center;gap:8px;width:auto}.filter-row .check-line input{min-width:0}
/* Fourth pass: proportional TV sizing. The earlier passes scaled with the width only, so a wide but short window
   (a laptop, a 16:10 panel) kept tall text in a header that could not hold it and the clock was cut off.
   --tvu is one design unit, the smaller of 1vw and the width a 16:9 screen of this height would have;
   every size is a multiple of it, with a floor so a small window stays readable. */
:root{--tvu:min(1vw,1.7778vh)}
.tv-header{height:auto;min-height:calc(var(--tvu)*7);padding:calc(var(--tvu)*1) calc(var(--tvu)*2.2)}
.tv-brand{gap:calc(var(--tvu)*1.2)}
.tv-logo{width:max(34px,calc(var(--tvu)*4.4));height:max(34px,calc(var(--tvu)*4.4));border-radius:calc(var(--tvu)*1.2)}
.tv-brand > div:last-child > span{font-size:max(11px,calc(var(--tvu)*1.05))}
.tv-brand h1{font-size:max(20px,calc(var(--tvu)*2.6));margin:calc(var(--tvu)*.2) 0 calc(var(--tvu)*.1)}
.tv-brand p{font-size:max(11px,calc(var(--tvu)*1.1))}
.tv-clock strong{font-size:max(24px,calc(var(--tvu)*3.4));line-height:1.1}
.tv-clock span{font-size:max(12px,calc(var(--tvu)*1.3))}
.tv-clock small{font-size:max(11px,calc(var(--tvu)*1.1));margin-top:calc(var(--tvu)*.2)}
.tv-layout{grid-template-columns:max(220px,calc(var(--tvu)*24)) 1fr max(220px,calc(var(--tvu)*21));gap:calc(var(--tvu)*1);padding:calc(var(--tvu)*1) calc(var(--tvu)*1.4)}
.prayer-panel,.donation-panel{padding:calc(var(--tvu)*1.2)}
.tv-eyebrow{font-size:max(11px,calc(var(--tvu)*1.05));margin-bottom:calc(var(--tvu)*.8)}
.next-prayer{padding:calc(var(--tvu)*.9)}
.next-prayer span,.next-prayer small{font-size:max(11px,calc(var(--tvu)*1.05))}
.next-prayer strong{font-size:max(18px,calc(var(--tvu)*2.2))}
.next-prayer b{font-size:max(20px,calc(var(--tvu)*2.3))}
.prayer-list div{font-size:max(14px,calc(var(--tvu)*1.75));padding:0 calc(var(--tvu)*.7)}
.live-pill{font-size:max(11px,calc(var(--tvu)*1.05))}
.feature-copy > p:first-child{font-size:max(12px,calc(var(--tvu)*1.2))}
.feature-copy h2{font-size:max(24px,calc(var(--tvu)*3.1))}
.feature-copy .speaker{font-size:max(14px,calc(var(--tvu)*1.5))}
.event-meta{font-size:max(12px,calc(var(--tvu)*1.3))}
.event-meta svg{width:max(13px,calc(var(--tvu)*1.3))}
.balance-card > span,.balance-card small{font-size:max(12px,calc(var(--tvu)*1.2))}
.balance-card strong{font-size:max(20px,calc(var(--tvu)*2.4))}
.donation-breakdown div{font-size:max(12px,calc(var(--tvu)*1.25))}
.qris-card.live span,.qris-card span,.qris-card small{font-size:max(10px,calc(var(--tvu)*.95))}
.qris-card.live strong,.qris-card strong{font-size:max(13px,calc(var(--tvu)*1.4))}
.tv-footer{height:max(44px,calc(var(--tvu)*4.8))}
.ticker-label{font-size:max(12px,calc(var(--tvu)*1.3));padding:0 calc(var(--tvu)*1.6)}
.ticker-track{font-size:max(18px,calc(var(--tvu)*2.6))}
.tv-close{font-size:max(11px,calc(var(--tvu)*1.1))}
@media (max-width:1100px){.tv-layout{grid-template-columns:max(200px,calc(var(--tvu)*24)) 1fr}}
@media (max-width:760px){.tv-layout{grid-template-columns:1fr}.tv-footer{height:56px}}