/* Reports: dashboard-led. Headline row, then a bento of the app's report cards on a squared-paper panel; the questions
   they answer; sharing on WhatsApp. */

.rp-hero { padding-top: 124px; padding-bottom: clamp(50px, 8vh, 90px) }
.rp-head { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 5vw; align-items: end; margin-bottom: 36px }
.rp-hero .h-xl { font-size: clamp(36px, 4.3vw, 64px); max-width: 15ch } .rp-head .lead { margin-top: 0 }

.dash { border-radius: 18px; padding: 16px; border: 1px solid var(--border);
  background: #F3F7FC linear-gradient(rgba(3,105,161,.05) 1px, transparent 1px) 0 0 / 22px 22px, linear-gradient(90deg, rgba(3,105,161,.05) 1px, transparent 1px) 0 0 / 22px 22px;
  box-shadow: 0 50px 90px -60px rgba(31,35,40,.5) }
.dash-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 4px 4px 14px } .dash-bar .tag { margin: 0 } .dash-bar .eg { margin-left: auto }
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 12px }
.bx { margin: 0; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--border); min-width: 0 }
.bx-h { margin: 0 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--faint) }
.bx-hrow { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px } .bx-hrow .bx-h { margin: 0 }
.bx-sum { grid-column: 1 / 5; grid-row: 1 / 3; background: linear-gradient(140deg, #1F2328, #2B3138); color: #fff; border: 0; display: flex; flex-direction: column }
.bx-sum .sum-four { margin-top: auto }
.bx-pay { grid-column: 5 / 7; grid-row: 1 } .bx-vip { grid-column: 5 / 7; grid-row: 2 } .bx-week { grid-column: 1 / 4; grid-row: 3 } .bx-top { grid-column: 4 / 7; grid-row: 3 }

/* summary */
.bx-sum .bx-h { color: #A3ACB7 }
.sum-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 6px 0 22px }
.sum-big b { font: 800 clamp(36px, 4vw, 56px)/1 var(--font); letter-spacing: -0.03em } .sum-big span { color: #D0D6DD; font-weight: 600 }
.sum-big em { font-style: normal; padding: 4px 9px; border-radius: 6px; background: rgba(94,234,212,.15); color: #5EEAD4; font-weight: 700; font-size: 14px }
.sum-four { margin: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 }
.sum-four div { padding: 14px 14px 0 0 } .sum-four div + div { padding-left: 14px; border-left: 1px solid rgba(255,255,255,.14) }
.sum-four dt { font-size: 13px; color: #A3ACB7 } .sum-four dd { margin: 4px 0 0 } .sum-four dd b { display: block; font: 800 22px/1.15 var(--font); margin-bottom: 2px } .sum-four small { font-size: 12.5px; color: #D0D6DD }

/* payments */
.pay-bar { display: flex; height: 16px; border-radius: 99px; overflow: hidden; background: #EEF2F7 }
.pay-bar i { display: block; height: 100%; transition: width .4s cubic-bezier(.2,.7,.2,1) }
.pc { background: #00A884 } .pu { background: #0284C7 } .pk { background: #E5484D }
.pay-key { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; font-size: 14.5px }
.pay-key li { display: flex; justify-content: space-between; align-items: center }
.pay-key li span::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 8px; background: var(--k) }
.pk-cash { --k: #00A884 } .pk-upi { --k: #0284C7 } .pk-khata { --k: #E5484D }

/* week */
.bars { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; align-items: end; height: 170px }
.bar { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; height: 100%; gap: 4px }
.bar b { font-size: 11px; color: var(--faint) } .bar span { font-size: 12px; color: var(--muted); font-weight: 600 }
.bar i { align-self: end; width: 100%; max-width: 34px; border-radius: 6px 6px 2px 2px; background: #BFE6FB }
.bar.now i { background: var(--link) } .bar.now span, .bar.now b { color: var(--ink) }

/* top items */
.seg-s button { padding: 6px 10px; font-size: 13px }
.top-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; counter-reset: t }
.top-list li { counter-increment: t; display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; grid-template-rows: auto 6px; gap: 3px 8px; align-items: center; font-size: 14.5px }
.top-list li::before { content: counter(t); grid-row: 1 / 3; font-weight: 800; color: var(--link) }
.top-list i { grid-column: 2 / 4; height: 6px; border-radius: 99px; background: #EEF2F7; overflow: hidden } .top-list em { display: block; height: 100%; background: var(--sky); transition: width .4s }

/* vip */
.vip-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.vip-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 8px; align-items: center; font-size: 14.5px }
.vip-av { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--sky-light); color: var(--link); font-weight: 800; font-size: 13px }
.vip-tag { font-size: 10.5px; font-weight: 800; padding: 2px 6px; border-radius: 5px; background: #FFF4CC; color: #7A5B00 }

/* questions it answers */
.an-list { list-style: none; margin: 34px 0 0; padding: 0; border-top: 2px solid var(--ink) }
.an-list li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 5vw; padding: 22px 0; border-bottom: 1px solid var(--border) }
.an-q { margin: 0; font: 700 clamp(20px, 1.8vw, 26px)/1.25 var(--font); letter-spacing: -0.015em; color: var(--ink) }
.an-list b { color: var(--link) } .an-list li div p { margin: 4px 0 0; color: var(--muted) }

/* send */
.rp-send { background: linear-gradient(180deg, var(--bg), #EEF8F3 25%, #EEF8F3 75%, var(--bg)) }
.sd-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr); gap: 6vw; align-items: center }
.sd-ways { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 10px; color: var(--muted) } .sd-ways b { color: var(--ink) }
.sd-chat { justify-self: center; width: min(380px, 100%); padding: 18px; border-radius: 20px; background: #EFE9E1 }
.sd-chat > p { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: #D9FDD3; font-size: 14.5px; color: #111B21 }
.sd-img { padding: 16px; border-radius: 12px; background: linear-gradient(140deg, #1F2328, #2B3138); color: #fff }
.sd-img small { display: block; font-size: 12px; color: #A3ACB7 } .sd-img > b { display: block; font: 800 34px/1.1 var(--font); margin: 4px 0 } .sd-img > span { font-size: 13px; color: #5EEAD4 }
.sd-four { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-top: 12px } .sd-four i { font-style: normal; padding: 8px; border-radius: 8px; background: rgba(255,255,255,.08) }
.sd-four em { display: block; font-style: normal; font-size: 11.5px; color: #A3ACB7 } .sd-four b { font-size: 15px }

@media (max-width: 1100px) {
  .bx-sum { grid-column: 1 / 7; grid-row: auto } .bx-pay, .bx-vip { grid-column: span 3; grid-row: auto } .bx-week, .bx-top { grid-column: 1 / 7; grid-row: auto }
}
@media (max-width: 980px) {
  .rp-hero { padding-top: 104px } .rp-head { grid-template-columns: minmax(0, 1fr); gap: 14px; margin-bottom: 24px }
  .dash { padding: 10px } .dash-bar .eg { margin-left: 0 } .bento { gap: 10px } .bx { padding: 14px }
  .sum-four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 0 } .sum-four div:nth-child(3) { border-left: 0; padding-left: 0 }
  .an-list li, .sd-in { grid-template-columns: minmax(0, 1fr); gap: 8px }
}
@media (max-width: 640px) { .bx-pay, .bx-vip { grid-column: 1 / 7 } .bars { height: 140px; gap: 5px } .bar b { font-size: 9.5px } }
@media (prefers-reduced-motion: reduce) { .pay-bar i, .top-list em { transition: none } }