/* Galla Assist: the shop counter after dark. Colours from the app's dark theme (ui/theme/Theme.kt): ink, surfaces, indigo, amber,
   credit red and payment green. Mukta for everything. */
@font-face { font-family: "Mukta"; src: url("../fonts/mukta_regular.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Mukta"; src: url("../fonts/mukta_semibold.ttf") format("truetype"); font-weight: 600 900; font-display: swap; }

:root {
  --indigo: #3E37C9; --indigo-light: #A5A1FF; --indigo-deep: #2B2780; --amber: #F59E0B; --red: #FF8A80; --red-deep: #D93025; --green: #5CD08F; --green-deep: #13834A;
  --bg: #0F1115; --bg2: #1A1D24; --fg: #F2F3F7; --fg2: #C3C8D4; --fg3: #A3A9B7; --line: #2F3440; --card: #1A1D24;
  --accent: #F59E0B; --accent-ink: #16135C; --accent2: #5CD08F;
  --display: "Mukta", system-ui, sans-serif; --display-weight: 700; --body: "Mukta", system-ui, sans-serif; --radius: 22px;
}
body { background: radial-gradient(900px 600px at 85% 0%, rgba(62, 55, 201, .3), transparent 60%), var(--bg); }
h1, h2, h3 { letter-spacing: -.025em; line-height: .98; }
.hl { color: var(--indigo-light); }
.title { font-size: clamp(60px, 8.8vw, 136px); }
.tagline { font-weight: 600; }
.eyebrow::before { background: var(--indigo-light); }
.btn { border-radius: 16px; }
.btn.ghost { border-radius: 16px; }
.hero-shade { background: linear-gradient(90deg, rgba(15, 17, 21, .94) 0%, rgba(15, 17, 21, .5) 44%, transparent 68%), linear-gradient(0deg, var(--bg) 0%, transparent 24%); }
@media (max-width: 900px) { .hero-shade { background: linear-gradient(180deg, transparent 0%, transparent 38%, rgba(15, 17, 21, .88) 56%, var(--bg) 100%); } }

.ledger-strip { margin-top: 28px; display: inline-flex; gap: 8px; flex-wrap: wrap; }
.ledger-strip span { display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); font-weight: 600; color: var(--fg2); }
.ledger-strip b { font-size: 20px; color: var(--fg); font-variant-numeric: tabular-nums; }
.dot { width: 9px; height: 9px; border-radius: 50%; }
.dot.red { background: var(--red); box-shadow: 0 0 10px var(--red); } .dot.green { background: var(--green); box-shadow: 0 0 10px var(--green); }
html:not(.js) .ledger-strip { display: none; }

/* features on ruled ledger paper */
.feat { background: linear-gradient(180deg, var(--bg2), #15181e); }
.feat::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: repeating-linear-gradient(180deg, transparent 0 31px, rgba(165, 161, 255, .07) 31px 32px); }
.feat::after { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 2px; background: rgba(255, 138, 128, .25); }
.feat-n { padding: 6px 11px; border-radius: 8px; background: rgba(245, 158, 11, .14); text-transform: uppercase; }
.feat:hover { border-color: rgba(165, 161, 255, .45); }

/* the reminder */
.remind-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(30px, 5vw, 80px); align-items: center; }
.bubble-stack { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; max-width: 420px; justify-self: center; }
.bubble { position: relative; padding: 16px 18px; border-radius: 20px 20px 20px 6px; background: #20242d; border: 1px solid var(--line); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); transform: translateZ(30px); }
.bubble p { color: var(--fg2); }
.bubble b { color: var(--fg); }
.b-from { font-weight: 700; color: var(--amber) !important; margin-bottom: 4px; }
.b-pay { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 12px; border-radius: 14px; background: #fff; color: #12141A; }
.b-pay b { display: block; font-size: 26px; color: #12141A !important; line-height: 1; }
.b-pay span { font-weight: 600; color: var(--indigo); }
.qr { width: 72px; height: 72px; flex: none; border-radius: 6px; background:
  linear-gradient(#12141A, #12141A) 0 0 / 22px 22px no-repeat, linear-gradient(#12141A, #12141A) 100% 0 / 22px 22px no-repeat, linear-gradient(#12141A, #12141A) 0 100% / 22px 22px no-repeat,
  repeating-conic-gradient(#12141A 0 25%, #fff 0 50%) 0 0 / 12px 12px; }
.bubble.paid { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--green-deep); border-color: transparent; transform: translateZ(50px); }
.bubble.paid p { color: #fff; }
.bubble.paid b { color: #fff; }
@media (max-width: 860px) { .remind-grid { grid-template-columns: 1fr; } }

.step b { border-radius: 22px; background: var(--indigo-deep); border-color: var(--indigo-light); color: #fff; }
.promise { background: var(--indigo); color: #fff; }
.early { background: radial-gradient(90% 120% at 0% 0%, rgba(62, 55, 201, .45), transparent 70%), radial-gradient(60% 80% at 100% 100%, rgba(245, 158, 11, .14), transparent 70%), var(--bg2); }
.early-row input { border-radius: 16px; }