/* ==========================================================================
   Colourful theme layer (loaded after app.css / panel.css / payment.css).
   Pure CSS: no web fonts, images or scripts, so pages stay fast.
   --brand comes from Admin > Site settings (brand-head partial); everything
   else here is derived from it plus a fixed accent palette.
   ========================================================================== */
:root {
    --accent: #8b5cf6;           /* violet */
    --accent-2: #ec4899;         /* pink */
    --accent-3: #06b6d4;         /* cyan */
    --grad: linear-gradient(135deg, var(--brand) 0%, var(--accent) 55%, var(--accent-2) 100%);
    --grad-soft: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, transparent), color-mix(in srgb, var(--accent-2) 10%, transparent));
    --c-blue: #3b82f6; --c-green: #10b981; --c-amber: #f59e0b; --c-pink: #ec4899;
    --c-violet: #8b5cf6; --c-teal: #14b8a6; --c-cyan: #06b6d4; --c-rose: #f43f5e; --c-orange: #f97316;
    --radius: 16px;
    --shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -12px rgba(76, 29, 149, .18);
    --shadow-lg: 0 24px 60px -20px rgba(76, 29, 149, .35);
    --bg: #f6f5ff;
    --border: #e7e5f4;
    --surface-2: #faf9ff;
}
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
        --bg: #0b0a1a; --surface: #14132a; --surface-2: #1a1935; --border: #2a2850;
        --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6);
        --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
    }
}
:root[data-theme="dark"] {
    --bg: #0b0a1a; --surface: #14132a; --surface-2: #1a1935; --border: #2a2850;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -12px rgba(0, 0, 0, .6);
    --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .7);
}

/* ---------- Page background: soft colour glow ---------- */
body {
    background:
        radial-gradient(900px 500px at 0% -10%, color-mix(in srgb, var(--brand) 16%, transparent), transparent 60%),
        radial-gradient(800px 500px at 100% 0%, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 60%),
        radial-gradient(900px 600px at 50% 120%, color-mix(in srgb, var(--accent-3) 10%, transparent), transparent 60%),
        var(--bg);
    background-attachment: fixed;
}
::selection { background: color-mix(in srgb, var(--accent) 30%, transparent); }

/* ---------- Brand ---------- */
.brand-mark {
    background: var(--grad); border-radius: 11px;
    box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--accent) 70%, transparent);
}
.brand > span:last-child {
    background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---------- Buttons ---------- */
.btn { border-radius: 12px; transition: transform .15s ease, box-shadow .2s ease, background .2s ease, filter .2s ease; }
.btn:active { transform: translateY(1px) scale(.99); }
.btn-primary {
    background: var(--grad); background-size: 140% 140%; color: #fff; border: 0;
    box-shadow: 0 10px 22px -10px color-mix(in srgb, var(--accent) 80%, transparent);
}
.btn-primary:hover { background: var(--grad); filter: brightness(1.06) saturate(1.1); box-shadow: 0 14px 28px -10px color-mix(in srgb, var(--accent) 85%, transparent); }
.btn-ghost { border-radius: 11px; }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--border)); color: var(--accent); background: var(--surface); }
.btn-success { background: linear-gradient(135deg, #10b981, #059669); border: 0; box-shadow: 0 10px 22px -12px #059669; }
.btn-whatsapp { background: linear-gradient(135deg, #25d366, #128c7e); border: 0; }

/* ---------- Inputs ---------- */
.input { border-radius: 12px; background: var(--surface); }
.input:hover { border-color: color-mix(in srgb, var(--accent) 35%, var(--border)); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 18%, transparent); }
input[type="color"].input { padding: 4px; height: 44px; cursor: pointer; }
.check input, .switch input { accent-color: var(--accent); }

/* ---------- Auth pages ---------- */
.auth-wrap { position: relative; overflow: hidden; }
.auth-wrap::before, .auth-wrap::after {
    content: ""; position: absolute; width: 420px; height: 420px; border-radius: 50%; filter: blur(70px); opacity: .55; z-index: -1;
    animation: blob 14s ease-in-out infinite alternate;
}
.auth-wrap::before { background: var(--brand); top: -120px; left: -120px; }
.auth-wrap::after { background: var(--accent-2); bottom: -140px; right: -120px; animation-delay: -6s; }
@keyframes blob { to { transform: translate(60px, 40px) scale(1.1); } }
.auth-card {
    border-radius: 22px; border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
    background: color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    box-shadow: var(--shadow-lg); animation: rise .45s ease-out both;
}
.auth-card h1 { font-size: 24px; letter-spacing: -.02em; }
.segmented { border-radius: 12px; }
.segmented button[aria-selected="true"] { background: var(--grad); color: #fff; box-shadow: 0 6px 14px -8px var(--accent); }

/* ---------- Top bar (glass) ---------- */
.topbar {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    backdrop-filter: saturate(1.6) blur(14px); -webkit-backdrop-filter: saturate(1.6) blur(14px);
    border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.topbar::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--grad); opacity: .8; }

/* ---------- Side navigation: a colour per section ---------- */
.side-nav a { border-radius: 12px; transition: background .15s, color .15s, transform .15s; }
.side-nav a:not(.sub-nav):hover { transform: translateX(2px); }
.side-nav a[data-nav] svg {
    width: 30px; height: 30px; padding: 6px; border-radius: 9px; color: #fff; background: var(--nav-c, var(--brand));
    box-shadow: 0 6px 14px -8px var(--nav-c, var(--brand));
}
.side-nav a[data-nav="overview"] { --nav-c: var(--c-blue); }
.side-nav a[data-nav="new"] { --nav-c: var(--c-green); }
.side-nav a[data-nav="orders"] { --nav-c: var(--c-amber); }
.side-nav a[data-nav="shop-qr"] { --nav-c: var(--c-pink); }
.side-nav a[data-nav="billing"] { --nav-c: var(--c-violet); }
.side-nav a[data-nav="settings"] { --nav-c: var(--c-teal); }
.side-nav a[data-nav="developers"] { --nav-c: var(--c-cyan); }
.side-nav a[data-nav="admin"] { --nav-c: var(--c-rose); }
.side-nav a[data-nav][aria-current="page"] {
    background: color-mix(in srgb, var(--nav-c) 14%, var(--surface)); color: var(--text);
    box-shadow: inset 3px 0 0 var(--nav-c);
}
.side-nav a.sub-nav { position: relative; }
.side-nav a.sub-nav::before {
    content: ""; position: absolute; left: 24px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%;
    background: color-mix(in srgb, var(--text-3) 50%, transparent);
}
.side-nav a.sub-nav:hover { color: var(--text); background: transparent; }
.side-nav a.sub-nav[aria-current="page"]::before { background: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent); }
.nav-count { background: linear-gradient(135deg, var(--c-orange), var(--c-rose)); }
@media (max-width: 860px) {
    .side-nav { background: color-mix(in srgb, var(--bg) 85%, transparent); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
    .side-nav a[data-nav][aria-current="page"] { box-shadow: inset 0 -2px 0 var(--nav-c); }
    .side-nav a.sub-nav::before { display: none; }
}

/* ---------- Page heads ---------- */
.page-head h1 { font-size: 28px; letter-spacing: -.025em; font-weight: 800; }
.page-head h1::after {
    content: ""; display: block; width: 44px; height: 4px; border-radius: 99px; margin-top: 8px; background: var(--grad);
}
[data-view]:not([hidden]) { animation: rise .35s ease-out both; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Cards ---------- */
.card, .stat, .feature {
    border-radius: var(--radius); border-color: color-mix(in srgb, var(--border) 80%, transparent); box-shadow: var(--shadow);
    transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 16px 40px -16px rgba(76, 29, 149, .25); }
.card-head { background: var(--grad-soft); }
.card-head h2 { font-weight: 700; }
.form-title { font-weight: 700; }
.form-title:not(:first-child) { border-top-style: dashed; }

/* ---------- Stat tiles: each a different colour ---------- */
.stat { position: relative; overflow: hidden; }
.stat::after {
    content: ""; position: absolute; right: -24px; top: -24px; width: 96px; height: 96px; border-radius: 50%;
    background: color-mix(in srgb, var(--stat-c, var(--brand)) 16%, transparent);
}
.stat:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.stat .value { font-weight: 800; color: var(--stat-c, var(--text)); }
.stats .stat:nth-child(1):not(.primary) { --stat-c: var(--c-blue); }
.stats .stat:nth-child(2) { --stat-c: var(--c-green); }
.stats .stat:nth-child(3) { --stat-c: var(--c-amber); }
.stats .stat:nth-child(4) { --stat-c: var(--c-blue); }
.stats .stat:nth-child(5) { --stat-c: var(--c-violet); }
.stats .stat:nth-child(6) { --stat-c: var(--c-rose); }
.stat.primary { background: var(--grad); border: 0; box-shadow: 0 18px 40px -18px color-mix(in srgb, var(--accent) 90%, transparent); }
.stat.primary::after { background: rgba(255, 255, 255, .14); }
.stat.primary .value { color: #fff; }

/* ---------- Tables ---------- */
th { background: var(--surface-2); color: var(--text-2); }
tbody tr { transition: background .12s; }
tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-2) 60%, transparent); }
tbody tr.clickable:hover td { background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }

/* ---------- Badges & chips ---------- */
.badge { padding: 3px 10px; box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 22%, transparent); }
.badge-success { background: color-mix(in srgb, var(--c-green) 14%, transparent); color: #059669; }
.badge-warning { background: color-mix(in srgb, var(--c-amber) 16%, transparent); color: #b45309; }
.badge-danger { background: color-mix(in srgb, var(--c-rose) 14%, transparent); color: #e11d48; }
.badge-brand { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); }
.chip { border-radius: 999px; transition: all .15s; }
.chip:hover { border-color: var(--accent); color: var(--accent); }
.chip[aria-pressed="true"] { background: var(--grad); color: #fff; border-color: transparent; box-shadow: 0 8px 18px -10px var(--accent); }

/* ---------- Alerts & banners ---------- */
.alert { border-radius: 12px; }
.alert-info { background: color-mix(in srgb, var(--accent) 10%, var(--surface)); color: var(--accent); }
.banner { border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c-amber) 16%, var(--surface)), color-mix(in srgb, var(--c-orange) 10%, var(--surface))); }
.banner.danger { background: linear-gradient(135deg, color-mix(in srgb, var(--c-rose) 16%, var(--surface)), color-mix(in srgb, var(--c-pink) 10%, var(--surface))); }

/* ---------- Plans ---------- */
.plan-card { border-radius: 18px; transition: transform .2s, box-shadow .2s; }
.plan-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.plan-card.popular { border: 0; background: linear-gradient(var(--surface), var(--surface)) padding-box, var(--grad) border-box; border: 2px solid transparent; box-shadow: var(--shadow-lg); }
.plan-card .tag { background: var(--grad); }
.plan-card .price { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Result card, QR, code ---------- */
.result-amount, .drawer .detail-amount { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qr-box { border-radius: 18px; box-shadow: 0 12px 30px -16px color-mix(in srgb, var(--accent) 60%, transparent); border: 2px solid transparent;
    background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; }
.code { background: linear-gradient(135deg, #0f0c29, #1e1b4b 60%, #312e81); border: 1px solid #312e81; border-radius: 12px; }
.token-box { border-radius: 10px; }

/* ---------- Dialogs ---------- */
dialog { border-radius: 20px; box-shadow: var(--shadow-lg); }
dialog[open] { animation: pop .2s ease-out; }
dialog::backdrop { background: rgba(15, 12, 41, .5); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
@keyframes pop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
.drawer { border-radius: 22px 0 0 22px; }
.toast { border-radius: 14px; box-shadow: var(--shadow-lg); }

/* ---------- Customer payment page ---------- */
.pay-card { border-radius: 24px; box-shadow: var(--shadow-lg); position: relative; overflow: hidden; animation: rise .4s ease-out both; }
.pay-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; background: var(--grad); }
.pay-amount {
    background: var(--grad); color: #fff; border: 0; border-radius: 18px;
    box-shadow: 0 16px 36px -18px color-mix(in srgb, var(--accent) 90%, transparent);
}
.pay-amount-label, .pay-meta dt { color: rgba(255, 255, 255, .8); }
.pay-meta { border-top-color: rgba(255, 255, 255, .35); }
.pay-meta dd { color: #fff; }
.pay-app { border-radius: 16px; transition: transform .15s, box-shadow .15s, border-color .15s; }
.pay-app:hover { transform: translateY(-2px); border-color: var(--app-color, var(--accent)); box-shadow: 0 10px 22px -14px var(--app-color, var(--accent)); background: var(--surface); }
.pay-app-icon { border-radius: 12px; box-shadow: 0 6px 14px -8px var(--app-color, var(--brand)); }
.pay-qr { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; border-radius: 20px; }
.pay-timer { border-radius: 14px; }
.pay-progress > div { background: var(--grad); }
.pay-result-icon.success { background: linear-gradient(135deg, #34d399, #059669); color: #fff; animation: pop .35s ease-out; box-shadow: 0 12px 28px -12px #059669; }
.pay-gw-phonepe { background: linear-gradient(135deg, #7c3aed, #5f259f); }
.pay-gw-paytm { background: linear-gradient(135deg, #22d3ee, #00baf2); }

@media (prefers-reduced-motion: reduce) {
    .auth-wrap::before, .auth-wrap::after { animation: none; }
}
.stat > * { position: relative; z-index: 1; }

/* ---------- Home page ---------- */
.hero h1 { background: linear-gradient(135deg, var(--text) 30%, var(--accent) 70%, var(--accent-2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.trial { background: var(--grad); color: #fff; box-shadow: 0 8px 18px -10px var(--accent); }
.feature { position: relative; overflow: hidden; border-top: 0; }
.feature::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--f-c, var(--grad)); }
.feature h2 { color: var(--f-c, var(--text)); }
.features .feature:nth-child(1) { --f-c: var(--c-blue); }
.features .feature:nth-child(2) { --f-c: var(--c-green); }
.features .feature:nth-child(3) { --f-c: var(--c-violet); }
.features .feature:nth-child(4) { --f-c: var(--c-pink); }
.feature:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }