@import url('https://fonts.googleapis.com/css2?family=Sora:wght@600;700;800&family=Inter:wght@400;500;600;700;800&family=Noto+Sans+Devanagari:wght@400;500;600;700;800&display=swap');

:root {
    --brand: #4f46e5;
    --brand-2: #7c3aed;
    --brand-dark: #4338ca;
    --brand-light: #eef2ff;
    --brand-rgb: 79,70,229;
    --brand-2-rgb: 124,58,237;
    --ink: #0b1120;
    --muted: #64748b;
    --border: #e6e9f0;
    --bg: #f7f8fb;
    --success: #16a34a;
    --radius: 14px;
    --shadow-sm: 0 1px 2px rgba(15,23,42,.05);
    --shadow-md: 0 8px 24px rgba(15,23,42,.08);
    --shadow-brand: 0 10px 28px rgba(79,70,229,.28);
}

* { font-family: 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, -apple-system, sans-serif; }
h1, h2, h3, .font-display { font-family: 'Sora', 'Noto Sans Devanagari', ui-sans-serif, sans-serif; letter-spacing: -0.02em; }

body { background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }

/* ---------- Brand mark ---------- */
.brand {
    display: inline-flex; align-items: center; gap: .6rem; text-decoration: none;
}
.brand-mark {
    width: 34px; height: 34px; border-radius: 10px; flex-shrink: 0;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    display: flex; align-items: center; justify-content: center;
    box-shadow: var(--shadow-brand);
}
.brand-mark svg { width: 18px; height: 18px; }
.brand-logo { height: 38px; width: auto; display: block; }
@media (max-width: 480px) { .brand-logo { height: 32px; } }
.brand-name { font-family: 'Sora', 'Noto Sans Devanagari', sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--ink); letter-spacing: -0.01em; }

/* ---------- Buttons ---------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
    font-weight: 600; font-size: .9rem; border-radius: 10px;
    padding: .7rem 1.25rem; transition: all .15s ease; cursor: pointer; border: none;
    white-space: nowrap;
}
.btn-primary {
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    color: #fff; box-shadow: var(--shadow-brand);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px rgba(var(--brand-rgb), .36); filter: brightness(1.04); }
.btn-primary:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.btn-secondary { background: #fff; color: var(--ink); border: 1px solid var(--border); }
.btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; }
.btn-danger-link { color: #dc2626; font-weight: 500; font-size: .875rem; }
.btn-danger-link:hover { text-decoration: underline; }

/* ---------- Cards ---------- */
.card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card-row { transition: background .15s ease; }
.card-row:hover { background: #fafbff; }

/* ---------- Inputs ---------- */
.input {
    width: 100%; border: 1px solid var(--border); border-radius: 10px;
    padding: .65rem .85rem; font-size: .925rem; transition: all .15s ease; background: #fff;
}
.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-light); }
.label { display: block; font-size: .825rem; font-weight: 600; color: #334155; margin-bottom: .35rem; }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; padding: .2rem .6rem; border-radius: 999px; font-size: .75rem; font-weight: 600; }
.badge-green { background: #dcfce7; color: #15803d; }
.badge-yellow { background: #fef3c7; color: #a16207; }
.badge-red { background: #fee2e2; color: #b91c1c; }
.badge-gray { background: #f1f5f9; color: #64748b; }

/* ---------- Nav ---------- */
.navbar { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.85); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); }
.nav-link { color: #475569; font-weight: 500; font-size: .9rem; padding: .5rem .25rem; border-bottom: 2px solid transparent; transition: all .15s; }
.nav-link:hover, .nav-link.active { color: var(--brand); border-color: var(--brand); }

/* ---------- Toasts (flash messages) ---------- */
.toast-wrap { position: fixed; top: 1rem; right: 1rem; z-index: 100; display: flex; flex-direction: column; gap: .5rem; max-width: 22rem; }
.toast { padding: .85rem 1.1rem; border-radius: 12px; font-size: .875rem; font-weight: 500; box-shadow: var(--shadow-md); animation: slideIn .25s ease; }
.toast-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.toast-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
@keyframes slideIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: translateX(0); } }
.toast.fade-out { opacity: 0; transform: translateX(20px); transition: all .3s ease; }

/* ---------- Rich text editor ---------- */
.rte-toolbar { display: flex; gap: .25rem; padding: .4rem; border: 1px solid var(--border); border-bottom: none; border-radius: 10px 10px 0 0; background: #f8fafc; }
.rte-btn { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; font-size: .9rem; font-weight: 700; color: #475569; cursor: pointer; user-select: none; transition: all .12s; }
.rte-btn:hover { background: #e2e8f0; color: var(--ink); }
.rte-editor { min-height: 140px; border: 1px solid var(--border); border-top: none; border-radius: 0 0 10px 10px; padding: .75rem .9rem; font-size: .925rem; line-height: 1.6; }
.rte-editor:focus { outline: none; box-shadow: 0 0 0 3px var(--brand-light); border-color: var(--brand); }
.rte-editor p { margin: 0 0 .6rem 0; }
.rte-editor ul, .rte-editor ol { margin: 0 0 .6rem 1.25rem; }
.rte-editor ul { list-style: disc; }
.rte-editor ol { list-style: decimal; }
.rte-editor h2, .rte-editor h3, .rte-editor h4 { font-weight: 700; margin: .8rem 0 .4rem 0; }
.rte-editor h2 { font-size: 1.25rem; }
.rte-editor h3 { font-size: 1.1rem; }
.rte-editor h4 { font-size: 1rem; }
.rte-editor a { color: var(--brand); text-decoration: underline; }
.rte-editor blockquote { border-left: 3px solid var(--brand); padding-left: .75rem; margin: 0 0 .6rem 0; color: var(--muted); font-style: italic; }
.rte-editor:empty:before { content: attr(data-placeholder); color: #94a3b8; }

/* ---------- Rendered rich text (landing page) ---------- */
.prose-content { color: #334155; line-height: 1.75; }
.prose-content p { margin: 0 0 1rem 0; }
.prose-content ul, .prose-content ol { margin: 0 0 1rem 1.4rem; }
.prose-content ul { list-style: disc; }
.prose-content ol { list-style: decimal; }
.prose-content li { margin-bottom: .4rem; }
.prose-content strong, .prose-content b { font-weight: 700; color: var(--ink); }
.prose-content em, .prose-content i { font-style: italic; }
.prose-content h2, .prose-content h3, .prose-content h4 { font-weight: 700; color: var(--ink); margin: 1.5rem 0 .6rem 0; line-height: 1.3; }
.prose-content h2 { font-size: 1.4rem; }
.prose-content h3 { font-size: 1.2rem; }
.prose-content h4 { font-size: 1.05rem; }
.prose-content > *:first-child { margin-top: 0; }
.prose-content a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.prose-content blockquote { border-left: 3px solid var(--brand); padding: .3rem 0 .3rem 1rem; margin: 0 0 1rem 0; color: var(--muted); font-style: italic; }

/* ---------- Stat icons (dashboard) ---------- */
.stat-icon {
    width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center;
    justify-content: center; margin-bottom: .9rem;
}
.stat-icon svg { width: 20px; height: 20px; }

/* ---------- Trust strip ---------- */
.trust-item { display: flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 600; color: #475569; }
.trust-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--success); }

/* ---------- Hero background ---------- */
.hero-glow {
    position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.hero-glow::before, .hero-glow::after {
    content: ''; position: absolute; border-radius: 999px; filter: blur(70px); opacity: .35;
}
.hero-glow::before { width: 26rem; height: 26rem; top: -8rem; left: -6rem; background: var(--brand); }
.hero-glow::after { width: 22rem; height: 22rem; top: -4rem; right: -6rem; background: var(--brand-2); }

/* ---------- Section eyebrow ---------- */
.eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--brand); }

/* ---------- Misc ---------- */
.hover-lift { transition: transform .15s ease, box-shadow .15s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.gradient-border { position: relative; }
.gradient-border::before {
    content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
    background: linear-gradient(135deg, var(--brand), var(--brand-2));
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}

/* ---------- Standalone pages (thank-you, invoice) — no Tailwind dependency ---------- */
:where(.pg) { min-height: 100vh; }
:where(.pg) *, :where(.pg) *::before, :where(.pg) *::after { box-sizing: border-box; }
:where(.pg) h1, :where(.pg) h2, :where(.pg) h3, :where(.pg) p, :where(.pg) dl, :where(.pg) dd, :where(.pg) dt { margin: 0; }
:where(.pg) a { color: inherit; text-decoration: none; }
:where(.pg) svg { display: block; }
.pg-stripe { height: 4px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.pg-powered { display: flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem 2.5rem; font-size: .75rem; color: var(--muted); }
.is-hidden { display: none; }

/* ---------- Thank-you page ---------- */
.ty-wrap { max-width: 40rem; margin: 0 auto; padding: 2.5rem 1rem 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; }
.ty-hero { text-align: center; padding: 2.25rem 1.5rem 1.75rem; }
.ty-check { width: 64px; height: 64px; border-radius: 50%; background: #dcfce7; margin: 0 auto 1.25rem; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 8px #f0fdf4; }
.ty-check svg { width: 28px; height: 28px; }
.ty-hero h1 { font-size: 1.65rem; font-weight: 800; margin-bottom: .45rem; }
.ty-lead { color: var(--muted); font-size: .975rem; line-height: 1.6; }
.ty-lead strong { color: var(--ink); font-weight: 600; }
.ty-summary { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 1.5rem; border: 1px solid var(--border); border-radius: 12px; background: #fafbfc; text-align: left; overflow: hidden; }
.ty-summary > div { padding: .85rem 1rem; }
.ty-summary > div + div { border-left: 1px solid var(--border); }
.ty-summary dt { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); margin-bottom: .25rem; }
.ty-summary dd { font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; }
.ty-summary dd.amt { color: var(--brand); }
.ty-card { padding: 1.5rem; }
.ty-card-title { font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 1rem; }
.ty-file { display: flex; align-items: center; gap: .9rem; padding: .9rem 1rem; border: 1px solid var(--border); border-radius: 12px; background: #fafbfc; }
.ty-file-icon { width: 44px; height: 44px; border-radius: 10px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ty-file-icon svg { width: 22px; height: 22px; }
.ty-file-name { font-weight: 600; font-size: .95rem; line-height: 1.35; word-break: break-word; }
.ty-file-meta { font-size: .8rem; color: var(--muted); margin-top: .1rem; }
.ty-download { width: 100%; margin-top: 1rem; padding: .85rem 1.25rem; font-size: .95rem; }
.ty-download svg { width: 18px; height: 18px; }
.ty-note { font-size: .78rem; color: var(--muted); text-align: center; margin-top: .65rem; }
.ty-plain { font-size: .925rem; color: #334155; line-height: 1.6; }
.ty-section-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .85rem; }
.ty-section-head h2 { font-size: 1.05rem; font-weight: 700; }
.ty-invoice-foot { font-size: .78rem; color: var(--muted); text-align: center; line-height: 1.7; margin-top: .9rem; }
.ty-invoice-foot a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }
.btn-sm { padding: .5rem 1rem; font-size: .85rem; }
@media (max-width: 520px) {
    .ty-wrap { padding-top: 1.5rem; }
    .ty-hero { padding: 1.75rem 1.1rem 1.25rem; }
    .ty-hero h1 { font-size: 1.4rem; }
    .ty-summary { grid-template-columns: 1fr; }
    .ty-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem 1rem; }
    .ty-summary > div + div { border-left: none; border-top: 1px solid var(--border); }
    .ty-summary dt { margin: 0; }
    .ty-card { padding: 1.15rem; }
}

/* ---------- Store page: "About this book" (under the title) ---------- */
.about-card { padding: 2rem 2.25rem; box-shadow: var(--shadow-md); }
.about-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 1.25rem; }
.about-card .prose-content { font-size: 1.02rem; line-height: 1.85; }
.about-card .prose-content h2 { font-size: 1.5rem; }
.about-card .prose-content h3 { font-size: 1.25rem; }
.about-card .prose-content img { max-width: 100%; height: auto; border-radius: 12px; }
@media (max-width: 640px) {
    .about-card { padding: 1.5rem 1.25rem; }
    .about-card .prose-content h2 { font-size: 1.3rem; }
    .about-card .prose-content h3 { font-size: 1.15rem; }
}

/* ---------- Invoice page shell ---------- */
.inv-page { max-width: 48rem; margin: 0 auto; padding: 1.75rem 1rem 1rem; }
.inv-toolbar { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.inv-back { font-size: .875rem; color: var(--muted); font-weight: 500; }
.inv-back:hover { color: var(--ink); }
.inv-tip { font-size: .75rem; color: var(--muted); text-align: center; margin-top: 1rem; }

/* ---------- Invoice ---------- */
.invoice-sheet { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 2.5rem 2.5rem 2rem; box-shadow: var(--shadow-md); text-align: left; color: var(--ink); font-variant-numeric: tabular-nums; }
.invoice-sheet, .invoice-sheet * { font-family: 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif; letter-spacing: normal; }
.invoice-sheet::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }
.invoice-head { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border); }
.invoice-from { max-width: 22rem; }
.invoice-seller { font-size: 1.25rem; font-weight: 800; line-height: 1.25; margin-bottom: .4rem; }
.invoice-address { font-size: .85rem; color: #334155; line-height: 1.55; margin-bottom: .4rem; }
.invoice-sub { font-size: .85rem; color: var(--muted); line-height: 1.65; }
.invoice-meta { text-align: right; }
.invoice-title { font-size: 1.6rem; font-weight: 800; letter-spacing: .14em !important; text-transform: uppercase; color: var(--brand); line-height: 1; margin-bottom: .6rem; }
.invoice-paid { display: inline-flex; align-items: center; gap: .35rem; padding: .2rem .7rem; border-radius: 999px; background: #dcfce7; color: #15803d; font-weight: 700; font-size: .75rem; letter-spacing: .06em !important; text-transform: uppercase; }
.invoice-paid::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #16a34a; }
.invoice-meta-list { margin-top: .85rem; font-size: .85rem; display: grid; grid-template-columns: auto auto; gap: .2rem 1.25rem; justify-content: end; }
.invoice-meta-list dt { color: var(--muted); text-align: left; }
.invoice-meta-list dd { font-weight: 600; text-align: right; }
.invoice-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding: 1.5rem 0; }
.invoice-box { background: #f8fafc; border: 1px solid var(--border); border-radius: 12px; padding: 1rem 1.1rem; min-width: 0; }
.invoice-label { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em !important; color: var(--muted); margin-bottom: .45rem; }
.invoice-strong { font-weight: 600; font-size: .95rem; margin-bottom: .15rem; }
.invoice-break { overflow-wrap: anywhere; }
.invoice-table { width: 100%; border-collapse: collapse; font-size: .9rem; }
.invoice-table th { text-align: left; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em !important; color: var(--muted); padding: .7rem .75rem; background: var(--brand-light); }
.invoice-table th:first-child { border-radius: 8px 0 0 8px; }
.invoice-table th:last-child { border-radius: 0 8px 8px 0; }
.invoice-table td { padding: 1rem .75rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.invoice-table .num { text-align: right; white-space: nowrap; }
.invoice-table .idx { width: 2.25rem; color: var(--muted); }
.invoice-table .item-name { font-weight: 600; }
.invoice-summary { display: flex; justify-content: flex-end; margin-top: 1rem; }
.invoice-summary-box { width: 100%; max-width: 17rem; }
.invoice-sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem .75rem; font-size: .875rem; color: #334155; }
.invoice-sum-total { margin-top: .4rem; padding: .8rem .75rem; border-radius: 10px; background: var(--brand-light); color: var(--ink); font-weight: 700; align-items: center; }
.invoice-total { font-size: 1.2rem; font-weight: 800; color: var(--brand); }
.invoice-words { margin-top: 1.1rem; padding-top: 1rem; border-top: 1px dashed var(--border); font-size: .83rem; color: #334155; }
.invoice-terms { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.invoice-terms .prose-content { font-size: .8rem; line-height: 1.65; }
.invoice-foot { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--border); font-size: .72rem; color: var(--muted); text-align: center; }
@media (max-width: 560px) {
    .invoice-sheet { padding: 1.5rem 1.15rem 1.25rem; }
    .invoice-meta { text-align: left; }
    .invoice-meta-list { justify-content: start; }
    .invoice-cols { grid-template-columns: 1fr; }
    .invoice-table .col-qty, .invoice-table .col-rate { display: none; }
    .invoice-table td, .invoice-table th { padding-left: .5rem; padding-right: .5rem; }
    .invoice-summary-box { max-width: none; }
}
@page { margin: 14mm; }
@media print {
    .no-print { display: none !important; }
    body { background: #fff !important; }
    :where(.pg) { min-height: 0; }
    .inv-page { max-width: none; padding: 0; }
    .pg-powered { display: none; }
    .invoice-sheet, .invoice-sheet * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .invoice-sheet { border: none; box-shadow: none; border-radius: 0; padding: 1.5rem 0 0; }
    .invoice-sheet::before { left: 0; right: 0; }
    .invoice-box, .invoice-table tr, .invoice-summary, .invoice-terms { break-inside: avoid; }
}

/* ---------- Store page v2 (product landing) ---------- */
.store-glow { position: absolute; top: 0; left: 0; right: 0; height: 30rem; z-index: -1; pointer-events: none;
    background: radial-gradient(44rem 20rem at 85% -10%, rgba(var(--brand-rgb), .16), transparent 65%),
                radial-gradient(38rem 18rem at 0% 0%, rgba(var(--brand-rgb), .09), transparent 60%); }

.pill { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .8rem; border-radius: 999px; font-size: .75rem; font-weight: 700; letter-spacing: .01em; }
.pill-brand { background: var(--brand-light); color: var(--brand); }
.pill-green { background: #dcfce7; color: #15803d; }

/* price */
.price-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem .75rem; margin-bottom: 1.1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--border); }
.price-now { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.02em; color: var(--ink); }
.price-was { color: #94a3b8; text-decoration: line-through; font-size: 1rem; }
.store-price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: .4rem .7rem; }
.store-price-line .now { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.75rem; color: var(--brand); letter-spacing: -.02em; }
.store-price-line .was { color: #94a3b8; text-decoration: line-through; }
.store-price-line .save { font-size: .8rem; font-weight: 700; color: #15803d; }

/* cover */
.cover-frame { padding: .5rem; background: #fff; border: 1px solid var(--border); border-radius: 22px; box-shadow: var(--shadow-md); }
.cover-img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: contain; border-radius: 16px; background: #f8fafc; }

/* perks */
.perk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; }
.perk { display: flex; align-items: center; gap: .7rem; padding: .85rem .9rem; background: #fff; border: 1px solid var(--border); border-radius: 14px; }
.perk-ic { width: 36px; height: 36px; border-radius: 10px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.perk-ic svg { width: 18px; height: 18px; }
.perk-t { font-size: .82rem; font-weight: 700; line-height: 1.25; }
.perk-s { font-size: .72rem; color: var(--muted); line-height: 1.3; margin-top: .1rem; }
@media (max-width: 640px) { .perk-grid { grid-template-columns: 1fr; } }

/* checkout card */
.checkout-card { box-shadow: var(--shadow-md); }
.card-trust { display: flex; align-items: center; justify-content: center; gap: .45rem; margin-top: 1rem; font-size: .75rem; font-weight: 600; color: var(--muted); }
.card-trust svg { width: 14px; height: 14px; color: var(--success); flex-shrink: 0; }

/* about card refinement */
.about-eyebrow { display: flex; align-items: center; gap: .6rem; }
.about-eyebrow::before { content: ''; width: 22px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

/* mobile sticky bar */
.store-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: flex; align-items: center; gap: .9rem;
    padding: .75rem 1rem calc(.75rem + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--border); box-shadow: 0 -8px 24px rgba(15,23,42,.08); }
.store-bar-price { display: flex; flex-direction: column; line-height: 1.15; }
.store-bar-price .now { font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.15rem; }
.store-bar-price .was { font-size: .75rem; color: #94a3b8; text-decoration: line-through; }

/* mobile sheet */
.sheet-panel { animation: sheetUp .28s cubic-bezier(.2,.8,.2,1); padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
.sheet-handle { width: 40px; height: 4px; border-radius: 4px; background: #cbd5e1; margin: -.5rem auto 1rem; }
.sheet-close { width: 32px; height: 32px; border-radius: 50%; background: #f1f5f9; color: var(--muted); font-size: 1.25rem; line-height: 1; display: flex; align-items: center; justify-content: center; }
@keyframes sheetUp { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }

/* entrance */
.store-in { animation: storeIn .5s ease both; }
@keyframes storeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .store-in, .sheet-panel { animation: none; } }

/* ---------- Store title ---------- */
.store-title {
    font-family: 'Inter', 'Noto Sans Devanagari', ui-sans-serif, system-ui, sans-serif;
    font-weight: 800;
    font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem);
    line-height: 1.22;
    letter-spacing: -0.025em;
    text-wrap: balance;
    overflow-wrap: anywhere;
    color: var(--ink);
}

/* =====================================================================
   MOBILE LAYER — phones first (appended; safe to remove as one block)
   ===================================================================== */
html { -webkit-text-size-adjust: 100%; }
a, button, summary, label { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* header share button (phones) */
.share-btn { width: 44px; height: 44px; margin-right: -.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); }
.share-btn[hidden] { display: none; }
.share-btn svg { width: 20px; height: 20px; }
.share-btn:active { background: #f1f5f9; }

/* seller app: bottom tab bar */
.tabbar { display: none; }
@media (max-width: 639px) {
    .tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: flex; background: rgba(255,255,255,.96); backdrop-filter: blur(10px);
        border-top: 1px solid var(--border); padding-bottom: env(safe-area-inset-bottom, 0px); }
    .tabbar a { flex: 1; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: .68rem; font-weight: 600; color: var(--muted); }
    .tabbar a.active { color: var(--brand); }
    .tabbar svg { width: 22px; height: 22px; }
}

@media (max-width: 640px) {
    /* 16px inputs stop iOS Safari from zooming the page on focus; 48px = comfortable thumb target */
    .input { font-size: 16px; min-height: 48px; padding: .75rem .9rem; border-radius: 12px; }
    textarea.input { min-height: 96px; }
    .label { font-size: .85rem; margin-bottom: .4rem; }
    .btn { min-height: 48px; border-radius: 12px; font-size: .95rem; }
    .btn-sm { min-height: 44px; }
    .btn-primary:hover { transform: none; }
    .hover-lift:hover { transform: none; box-shadow: var(--shadow-sm); }
    .sheet-close { width: 44px; height: 44px; margin-right: -.5rem; }
    .rte-btn { width: 40px; height: 40px; }

    /* phone number row: [+91][number] then a full-width Send OTP */
    .phone-row { flex-wrap: wrap; }
    .phone-row > span.input { display: flex; align-items: center; justify-content: center; }
    .phone-row .otp-send { flex: 1 1 100% !important; }
    .otp-box .input { letter-spacing: .3em; text-align: center; font-size: 1.25rem; }

    /* product page */
    .store-title { font-size: 1.55rem; }
    .cover-img { max-height: 26rem; }
    .cover-frame { border-radius: 18px; padding: .4rem; }
    .perk-grid { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: .6rem; margin-inline: -1rem; padding: 0 1rem .25rem; scrollbar-width: none; }
    .perk-grid::-webkit-scrollbar { display: none; }
    .perk { flex: 0 0 76%; scroll-snap-align: start; }
    .about-card { box-shadow: var(--shadow-sm); }
    .about-card .prose-content { font-size: 1rem; line-height: 1.8; }

    /* checkout bottom sheet */
    .sheet-panel { max-height: 92vh !important; max-height: 92dvh !important; overscroll-behavior: contain; padding: 1.25rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px)) !important; }
    .sheet-panel .checkout-pay-btn { position: sticky; bottom: .25rem; z-index: 2; box-shadow: var(--shadow-brand); }
    .store-bar .btn { min-height: 50px; }

    /* toasts span the width on phones */
    .toast-wrap { left: .75rem; right: .75rem; top: .75rem; max-width: none; }

    /* seller app */
    .navbar .brand-name { font-size: 1rem; }
    .row-actions a { display: inline-flex; align-items: center; min-height: 44px; }
    .row-actions .btn-danger-link { min-height: 44px; }
    .prose-content { font-size: 1rem; }

    /* orders: table rows become cards */
    .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
    .table-cards thead { display: none; }
    .table-cards tr { padding: .85rem 1rem; }
    .table-cards td { display: flex; justify-content: space-between; gap: 1rem; padding: .25rem 0 !important; text-align: right; }
    .table-cards td::before { content: attr(data-label); flex: none; text-align: left; font-size: .75rem; font-weight: 600; color: var(--muted); padding-top: .1rem; }
}

/* thank-you: keep the download button in thumb reach on very small screens */
@media (max-width: 520px) {
    .ty-download { min-height: 52px; font-size: 1rem; }
}
@media (prefers-reduced-motion: reduce) { .sheet-panel, .toast { animation: none; } }

/* =====================================================================
   Mobile dashboard polish (seller app + admin)
   ===================================================================== */

/* Stat cards: 3 columns on every screen size, compact on phones */
.stat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.stat-grid.stat-grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (min-width: 640px) { .stat-grid { gap: 1rem; } }
@media (min-width: 1024px) { .stat-grid.stat-grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.stat-card { padding: .8rem .75rem; min-width: 0; }
.stat-card .stat-label { font-size: .68rem; line-height: 1.25; font-weight: 600; color: var(--muted); margin-bottom: .2rem; }
.stat-card .stat-value { font-size: clamp(1.05rem, 5.2vw, 1.35rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.stat-card .stat-icon { width: 30px; height: 30px; margin-bottom: .55rem; border-radius: 9px; }
.stat-card .stat-icon svg { width: 16px; height: 16px; }
.stat-card-brand { background: linear-gradient(135deg, var(--brand), var(--brand-2)); border: none; color: #fff; }
.stat-card-brand .stat-label { color: rgba(255,255,255,.8); }
@media (min-width: 640px) {
    .stat-card { padding: 1.25rem; }
    .stat-card .stat-label { font-size: .85rem; margin-bottom: .25rem; }
    .stat-card .stat-value { font-size: 1.875rem; }
    .stat-card .stat-icon { width: 40px; height: 40px; margin-bottom: .85rem; }
    .stat-card .stat-icon svg { width: 20px; height: 20px; }
}
@media (max-width: 639px) {
    .stat-card .paise { display: none; }              /* ₹12,345.00 -> ₹12,345 on phones */
    .stat-card.stat-card-plain { padding: .7rem .65rem; }
}

/* Section header with action on the right */
.sec-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .75rem; }
.sec-head h2 { font-size: 1.05rem; font-weight: 700; }
.sec-link { font-size: .85rem; font-weight: 600; color: var(--brand); white-space: nowrap; min-height: 44px; display: inline-flex; align-items: center; }

/* Horizontally scrollable pill filters (ranges / types) */
.chip-row { display: flex; gap: .5rem; overflow-x: auto; margin-inline: -1rem; padding: .1rem 1rem .4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
.chip-row::-webkit-scrollbar { display: none; }
.chip-row > * { flex: 0 0 auto; scroll-snap-align: start; }
.chip-row .btn { min-height: 40px !important; padding: .4rem .95rem !important; font-size: .85rem; }
@media (min-width: 640px) { .chip-row { flex-wrap: wrap; overflow: visible; margin-inline: 0; padding: 0; } }

/* Product / order list rows */
.list-row { display: flex; align-items: center; gap: .75rem; padding: .85rem 1rem; }
.list-row .thumb { width: 40px; height: 40px; border-radius: 11px; background: var(--brand-light); color: var(--brand); display: flex; align-items: center; justify-content: center; font-weight: 800; flex: none; }
.list-row .meta { min-width: 0; flex: 1; }
.list-row .meta .t { font-weight: 600; font-size: .925rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-row .meta .s { font-size: .78rem; color: var(--muted); margin-top: 1px; }
.list-row .end { text-align: right; flex: none; }
.list-row .end .amt { font-weight: 700; font-size: .9rem; }
.pill-link { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 .9rem; border-radius: 10px; font-size: .85rem; font-weight: 600; border: 1px solid var(--border); background: #fff; color: var(--ink); }
.pill-link.brand { color: var(--brand); border-color: rgba(var(--brand-rgb), .25); background: var(--brand-light); }
.pill-link:active { transform: scale(.97); }

/* Tables that stay tables: horizontal scroll with a pinned first column */
.table-scroll { -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 34rem; }
@media (max-width: 639px) {
    .table-scroll th:first-child, .table-scroll td:first-child { position: sticky; left: 0; background: #fff; z-index: 1; box-shadow: 1px 0 0 var(--border); }
    .table-scroll thead th:first-child { background: #f8fafc; }
    .table-scroll td:first-child { max-width: 9.5rem; }
}

/* Per-page report cards (mobile replacement for the 10-column table) */
.report-card { padding: .9rem 1rem; }
.report-card .mini-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .7rem; }
.report-card .mini { background: #f8fafc; border: 1px solid var(--border); border-radius: 10px; padding: .45rem .55rem; min-width: 0; }
.report-card .mini .k { font-size: .65rem; color: var(--muted); font-weight: 600; }
.report-card .mini .v { font-size: .95rem; font-weight: 800; overflow-wrap: anywhere; }

@media (max-width: 639px) {
    body { overflow-x: hidden; }
    main h1 { font-size: 1.35rem; line-height: 1.25; }
    .navbar .max-w-7xl { padding-top: .55rem; padding-bottom: .55rem; }
    .tabbar a:active { background: rgba(var(--brand-rgb), .06); }
    .tabbar a.active span { font-weight: 700; }
    .tabbar a.active svg { transform: translateY(-1px); }
    /* sticky bar clears the iPhone home indicator */
    main { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)) !important; }
}

/* Homepage: compact 2-column feature cards on phones */
@media (max-width: 639px) {
    .feature-card .stat-icon { width: 36px; height: 36px; margin-bottom: .75rem; border-radius: 10px; }
    .feature-card .stat-icon svg { width: 18px; height: 18px; }
    .feature-card h3 { overflow-wrap: anywhere; }
}

/* =====================================================================
   Admin dashboard: collapsible sections, KPI deltas, chart, bars
   ===================================================================== */
details.sec > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .85rem 1.1rem; min-height: 54px; font-weight: 700; font-size: 1rem; -webkit-tap-highlight-color: transparent; user-select: none; }
details.sec > summary::-webkit-details-marker { display: none; }
details.sec > summary > span:first-child { flex: 1; min-width: 0; font-family: 'Sora', 'Noto Sans Devanagari', sans-serif; letter-spacing: -0.01em; }
details.sec > summary:active { background: #fafbff; }
.sec-sub { font-size: .72rem; font-weight: 600; color: var(--muted); background: #f1f5f9; border-radius: 999px; padding: .15rem .6rem; white-space: nowrap; }
.chev { width: 8px; height: 8px; margin: 0 .35rem 3px .1rem; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; flex: none; }
details.sec[open] > summary .chev { transform: rotate(-135deg); margin-bottom: -3px; }
.sec-body { padding: 1rem 1.1rem 1.15rem; border-top: 1px solid var(--border); }
.sec-body.p-0 { padding: 0; }
.sec-body.p-0 > .list-row:first-child { border-top: 0 !important; }

/* "Show all" lists / tables */
.expandable:not(.is-expanded) .more { display: none !important; }
.expandable:not(.is-expanded) .more-row { display: none; }
.expand-btn { display: block; width: 100%; min-height: 48px; padding: .75rem; font-size: .85rem; font-weight: 600; color: var(--brand); background: #fafbff; border-top: 1px solid var(--border); border-radius: 0 0 var(--radius) var(--radius); }
.expand-btn:active { background: var(--brand-light); }

/* Change vs previous period */
.delta { display: inline-flex; align-items: center; gap: 2px; margin-top: .3rem; padding: 1px 6px; border-radius: 999px; font-size: .65rem; font-weight: 700; line-height: 1.5; white-space: nowrap; }
.delta.up { background: #dcfce7; color: #15803d; }
.delta.down { background: #fee2e2; color: #b91c1c; }
.delta.flat { background: #f1f5f9; color: #64748b; }
.stat-card-brand .delta { background: rgba(255,255,255,.22); color: #fff; }

/* Export dropdown */
.dd { position: relative; }
.dd > summary { list-style: none; cursor: pointer; }
.dd > summary::-webkit-details-marker { display: none; }
.dd-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; min-width: 14rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-md); padding: .35rem; }
.dd-menu a { display: flex; align-items: center; min-height: 44px; padding: 0 .8rem; border-radius: 8px; font-size: .875rem; font-weight: 500; }
.dd-menu a:hover, .dd-menu a:active { background: var(--brand-light); color: var(--brand); }

/* Trend chart */
.metric-tabs { display: flex; gap: .4rem; overflow-x: auto; scrollbar-width: none; padding: .1rem; -webkit-overflow-scrolling: touch; }
.metric-tabs::-webkit-scrollbar { display: none; }
.metric-tabs button { flex: 0 0 auto; min-height: 38px; padding: .4rem .9rem; border-radius: 999px; font-size: .82rem; font-weight: 600; border: 1px solid var(--border); background: #fff; color: #475569; }
.metric-tabs button.on { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-brand); }
.chart-wrap { position: relative; height: 220px; }
.chart-wrap svg { display: block; width: 100%; height: 220px; touch-action: pan-y; }
.chart-wrap .g { stroke: #e8ebf2; stroke-width: 1; }
.chart-wrap .t { fill: #94a3b8; font-size: 10px; font-family: 'Inter', sans-serif; }
.chart-wrap .b { fill: var(--brand); opacity: .8; transition: opacity .1s; }
.chart-wrap .b.act { opacity: 1; }
.chart-wrap .hit { fill: transparent; cursor: pointer; }
.chart-tip { position: absolute; top: 0; transform: translateX(-50%); background: #0f172a; color: #fff; border-radius: 8px; padding: .35rem .65rem; font-size: .75rem; line-height: 1.4; pointer-events: none; white-space: nowrap; z-index: 2; box-shadow: var(--shadow-md); }

/* Progress bars (funnels, sources) */
.bar { height: 8px; background: #eef1f6; border-radius: 999px; overflow: hidden; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); }

@media (max-width: 639px) {
    details.sec > summary { padding: .8rem 1rem; }
    .sec-body { padding: .9rem 1rem 1rem; }
    .sec-body.p-0 { padding: 0; }
    .dd-menu { min-width: 13rem; }
}