/* OptiPress — component styles.
 * Extracted from the <style> block in index.html (TASK-016). Loaded after
 * optipress.tailwind.css so these rules win over preflight and utilities.
 */

/* ── Theme tokens (TASK-016b / TASK-017) ─────────────────────────────────────
 * Every themeable colour in the app resolves through one of these. Dark mode is
 * therefore a matter of redefining the values, not of touching 725 inline
 * style="" attributes — which is exactly why TASK-017 depended on this.
 *
 * Deliberately NOT tokenised, because they must not follow the theme:
 *   - `color:#fff` sitting on the indigo button or a gradient hero
 *   - the code-block syntax palette, a dark block in both themes
 *   - the hero and banner gradients, which are decorative artwork
 *
 * Names follow DESIGN-SYSTEM.md. Add a token there when you add one here.
 */
:root {
  --primary:                   #493ee5;
  --primary-container:         #635bff;
  --primary-fixed:             #e2dfff;
  --primary-fixed-dim:         #c3c0ff;
  --primary-wash:              #f0f0ff;
  --on-primary-fixed-variant:  #321ed2;
  --tertiary:                  #00675e;
  --on-tertiary-container:     #edfffb;

  --background:                #f8f9fb;
  --surface-main:              #ffffff;
  --surface-alt:               #fafafa;
  --surface-card:              #f0f2f5;
  --surface-card-hover:        #e8eaf0;
  --border:                    #e2e8f0;
  --border-soft:               #f0f2f5;
  --border-dashed:             #d1d5db;
  --ghost:                     #e2e8f0;
  --key-shadow:                #b8bec8;

  --text-primary:              #1a1d23;
  --text-secondary:            #64748b;
  --on-surface-variant:        #464555;
  --text-muted:                #94a3b8;
  --text-faint:                #cbd5e1;

  --success:                   #10b981;
  --error:                     #ef4444;
  --error-strong:              #ba1a1a;
  --error-border:              #fca5a5;
  --error-container:           #ffdad6;
  --error-toast:               #be123c;
  --warning:                   #f59e0b;
  --toast-bg:                  #1a1d23;

  /* Elevation is tinted by the surface it sits on, so it is a token too:
     black shadows are invisible on a dark background. */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.04);
  --shadow-md:  0 4px 14px rgba(0,0,0,.08);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.06);
  --scrollbar:  #e2e8f0;
  --surface-glass:  rgba(255,255,255,.97);
  --surface-footer: rgba(255,255,255,.92);
  --drop-hover:     rgba(73,62,229,.04);
}

/* Dark theme. Applied by adding class="dark" to <html>; the app writes that
   class before first paint (see app.js) so there is no light flash.
   Not a simple inversion — surfaces are lifted off pure black so elevation
   still reads, and accents are brightened to hold contrast on a dark field. */
:root.dark {
  --primary:                   #8b83ff;
  --primary-container:         #6d64ff;
  --primary-fixed:             #2a2470;
  --primary-fixed-dim:         #3d3596;
  --primary-wash:              #1e1a4d;
  --on-primary-fixed-variant:  #c3c0ff;
  --tertiary:                  #4fd6c7;
  --on-tertiary-container:     #05231f;

  --background:                #0f1117;
  --surface-main:              #171a21;
  --surface-alt:               #1c1f27;
  --surface-card:              #21252e;
  --surface-card-hover:        #2a2f3a;
  --border:                    #2e333d;
  --border-soft:               #23272f;
  --border-dashed:             #3a404b;
  --ghost:                     #2e333d;
  --key-shadow:                #0a0c10;

  --text-primary:              #e8eaed;
  --text-secondary:            #9aa5b5;
  --on-surface-variant:        #b6bccb;
  --text-muted:                #6f7b8c;
  --text-faint:                #4a5364;

  --success:                   #34d399;
  --error:                     #f87171;
  --error-strong:              #fca5a5;
  --error-border:              #7f2c2c;
  --error-container:           #4a1d1d;
  --error-toast:               #e11d48;
  --warning:                   #fbbf24;
  --toast-bg:                  #2a2f3a;

  --shadow-sm:  0 1px 3px rgba(0,0,0,.45);
  --shadow-md:  0 4px 14px rgba(0,0,0,.55);
  --shadow-lg:  0 8px 30px rgba(0,0,0,.6);
  --scrollbar:  #3a404b;
  --surface-glass:  rgba(23,26,33,.97);
  --surface-footer: rgba(23,26,33,.92);
  --drop-hover:     rgba(139,131,255,.10);
}

/* <body> carries Tailwind's .bg-background and .text-on-surface, whose values
   are baked into the prebuilt stylesheet and therefore ignore the theme. These
   rules match that specificity and, loading later, win. Without them the page
   frame stays light while every card goes dark. */
body.bg-background { background-color: var(--background); }
body.text-on-surface { color: var(--text-primary); }

  *{ box-sizing:border-box; }
  /* Material Symbols renders via ligatures: the element's text ("folder_open") is
     substituted for a glyph. Any inherited text-transform or letter-spacing breaks
     that substitution and the raw name shows up as text, so the resets below are
     load-bearing, not cosmetic. These mirror Google's own .material-symbols-outlined
     class. */
  .sym{ font-family:'Material Symbols Outlined'; font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24; font-size:20px; line-height:1; -webkit-user-select:none; user-select:none;
        display:inline-block; text-transform:none; letter-spacing:normal; word-wrap:normal; white-space:nowrap; direction:ltr; -webkit-font-feature-settings:'liga'; font-feature-settings:'liga'; -webkit-font-smoothing:antialiased; }
  .sym.fill{ font-variation-settings:'FILL' 1,'wght' 400,'GRAD' 0,'opsz' 24; }

  /* Scrollbar */
  .scroll::-webkit-scrollbar{ width:5px; }
  .scroll::-webkit-scrollbar-track{ background:transparent; }
  .scroll::-webkit-scrollbar-thumb{ background:var(--scrollbar); border-radius:10px; }

  /* Cards */
  .card{ background:var(--surface-glass); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid var(--border); border-radius:12px; }

  /* Quality slider */
  #quality-slider{ -webkit-appearance:none; appearance:none; width:100%; height:6px; background:linear-gradient(to right,var(--primary) var(--pct,85%),var(--border) var(--pct,85%)); border-radius:9999px; outline:none; cursor:pointer; }
  #quality-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:20px; height:20px; background:var(--surface-main); border:2.5px solid var(--primary); border-radius:50%; box-shadow:0 2px 6px rgba(73,62,229,.25); }
  #quality-slider::-moz-range-thumb{ width:20px; height:20px; background:var(--surface-main); border:2.5px solid var(--primary); border-radius:50%; }

  /* Drop zone */
  #drop-zone{ border:2px dashed var(--border); border-radius:12px; transition:border-color .2s,background .2s; }
  #drop-zone.drag-over{ border-color:var(--primary); background:var(--drop-hover); }

  /* Toast */
  #toast{ position:fixed; bottom:72px; left:50%; transform:translateX(-50%) translateY(12px); background:var(--toast-bg); color:#fff; padding:9px 18px; border-radius:10px; font:600 13px/1 Inter,sans-serif; opacity:0; transition:opacity .25s,transform .25s; pointer-events:none; z-index:200; white-space:nowrap; }
  #toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
  #toast.error-toast{ background:var(--error-toast); }

  /* Row processing pulse */
  @keyframes row-pulse{ 0%,100%{opacity:1} 50%{opacity:.5} }
  .row-processing td{ animation:row-pulse 1.2s ease-in-out infinite; }

  /* View transitions */
  .view{ display:none; }
  #view-home.active{ display:flex; flex:1; flex-direction:row; overflow:hidden; }
  #view-about.active, #view-settings.active{ display:block; flex:1; overflow-y:auto; }

  /* Nav link */
  .nav-link{ display:flex; align-items:center; gap:12px; padding:10px 16px; border-radius:8px; margin:0 8px; transition:background .15s,color .15s; color:var(--on-surface-variant); cursor:pointer; text-decoration:none; }
  .nav-link:hover{ background:var(--surface-card); }
  .nav-link.active{ background:var(--primary-container); color:#fefaff; }

  /* Validation */
  .field-error{ border-color:var(--error) !important; }
  .err-msg{ color:var(--error); font-size:11px; margin-top:4px; display:none; }
  .err-msg.show{ display:block; }

  /* Btn states */
  .btn-primary{ background:var(--primary); color:#fff; border-radius:12px; font-weight:700; display:flex; align-items:center; justify-content:center; gap:8px; cursor:pointer; transition:opacity .15s,transform .1s; }
  .btn-primary:hover:not(:disabled){ opacity:.9; }
  .btn-primary:active:not(:disabled){ transform:scale(.98); }
  .btn-primary:disabled{ opacity:.5; cursor:not-allowed; }

  /* Settings input */
  .s-input{ width:100%; padding:10px 12px; background:var(--surface-card); border:1px solid var(--border); border-radius:8px; font:500 13px/1 'JetBrains Mono',monospace; color:var(--text-primary); outline:none; transition:border-color .2s,box-shadow .2s; }
  .s-input:focus{ border-color:var(--primary); box-shadow:0 0 0 3px rgba(73,62,229,.1); }

  /* Settings page slider */
  .settings-slider{ -webkit-appearance:none; appearance:none; height:8px; border-radius:9999px; outline:none; cursor:pointer; width:100%; }
  .settings-slider::-webkit-slider-thumb{ -webkit-appearance:none; width:22px; height:22px; background:var(--surface-main); border:2px solid var(--primary); border-radius:50%; box-shadow:0 2px 6px rgba(73,62,229,.25); cursor:pointer; }
  .settings-slider::-moz-range-thumb{ width:22px; height:22px; background:var(--surface-main); border:2px solid var(--primary); border-radius:50%; box-shadow:0 2px 6px rgba(73,62,229,.25); }

  /* Custom toggle (settings rows) */
  .tog-wrap{ position:relative; display:inline-flex; align-items:center; cursor:pointer; }
  .tog-input{ position:absolute; opacity:0; width:0; height:0; }
  .tog-track{ width:44px; height:24px; background:var(--border); border-radius:9999px; position:relative; transition:background .2s; flex-shrink:0; }
  .tog-thumb{ position:absolute; top:3px; left:3px; width:18px; height:18px; background:var(--surface-main); border-radius:50%; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:transform .2s; }
  .tog-input:checked + .tog-track{ background:var(--primary); }
  .tog-input:checked + .tog-track .tog-thumb{ transform:translateX(20px); }

  /* Export format pills (home card) */
  .fmt-btn{ padding:7px 4px; border:1px solid var(--border); background:var(--surface-card); border-radius:7px; font:700 10px/1 'JetBrains Mono',monospace; color:var(--text-secondary); cursor:pointer; transition:all .15s; width:100%; }
  .fmt-btn:hover:not(.fmt-active){ background:var(--surface-card-hover); }
  .fmt-btn.fmt-active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 6px rgba(73,62,229,.25); }

  /* Export format pills (settings page) */
  .st-fmt-btn{ padding:14px 8px; border:1px solid var(--border); background:var(--background); border-radius:10px; font:700 11px/1 Inter,sans-serif; color:var(--text-secondary); cursor:pointer; transition:all .15s; text-align:center; width:100%; }
  .st-fmt-btn:hover:not(.st-fmt-active){ background:var(--surface-card); }
  .st-fmt-btn.st-fmt-active{ background:var(--primary); color:#fff; border-color:var(--primary); box-shadow:0 2px 8px rgba(73,62,229,.25); }

  /* Setting card hover lift */
  .setting-card{ background:var(--surface-main); border:1px solid var(--border); border-radius:12px; padding:20px; box-shadow:var(--shadow-sm); transition:box-shadow .2s; }
  .setting-card:hover{ box-shadow:var(--shadow-md); }

  /* About hero */
  .about-hero{ background:linear-gradient(135deg,#3730c4 0%,#493ee5 50%,#635bff 100%); border-radius:16px; padding:32px; color:#fff; margin-bottom:20px; position:relative; overflow:hidden; }
  .about-hero::before{ content:''; position:absolute; top:-50px; right:-50px; width:220px; height:220px; background:rgba(255,255,255,.06); border-radius:50%; pointer-events:none; }
  .about-hero::after{ content:''; position:absolute; bottom:-70px; right:40px; width:170px; height:170px; background:rgba(255,255,255,.04); border-radius:50%; pointer-events:none; }

  /* Atmospheric banner */
  .atm-banner{ border-radius:14px; overflow:hidden; position:relative; height:154px; margin-top:28px; background:linear-gradient(135deg,#100040,#1f0870,#2d1b9e); }
  .atm-dots{ position:absolute; inset:0; background-image:radial-gradient(circle,rgba(255,255,255,.13) 1px,transparent 1px); background-size:26px 26px; }
  .atm-glow{ position:absolute; top:-40px; left:50%; transform:translateX(-50%); width:280px; height:140px; background:rgba(99,91,255,.4); border-radius:50%; filter:blur(36px); }
  .atm-content{ position:absolute; bottom:18px; left:20px; right:20px; }

  /* Sub-header bar */
  .sub-header{ display:flex; justify-content:space-between; align-items:center; padding:13px 20px; background:var(--surface-main); border:1px solid var(--border); border-radius:12px; margin-bottom:24px; box-shadow:var(--shadow-sm); }

  /* Changelog entry */
  .cl-row{ display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--border-soft); }
  .cl-row:last-child{ border-bottom:none; }

  /* New scrollable views (changelog / docs / help) */
  #view-changelog.active{ display:block; flex:1; overflow-y:auto; }
  #view-docs.active{ display:flex; flex:1; flex-direction:column; overflow:hidden; }
  #view-help.active{ display:block; flex:1; overflow-y:auto; }

  /* Timeline */
  .tl-line{ position:absolute; left:24px; top:40px; bottom:0; width:2px; background:var(--border); }
  .tl-dot{ position:absolute; left:17px; top:20px; width:16px; height:16px; border-radius:50%; z-index:10; border:4px solid var(--surface-main); }
  .tl-dot.active-dot{ background:var(--primary); box-shadow:0 0 0 4px var(--primary-fixed); }
  .tl-dot.old-dot{ background:var(--border); }
  .glass-card{ background:var(--surface-main); border:1px solid var(--border); box-shadow:var(--shadow-sm); border-radius:12px; transition:transform .2s,box-shadow .2s; }
  .glass-card:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
  .badge-new{ background:var(--primary-fixed); color:var(--on-primary-fixed-variant); }
  .badge-improvement{ background:var(--on-tertiary-container); color:var(--tertiary); }
  .badge-fix{ background:var(--error-container); color:var(--error-strong); }

  /* Docs inner layout */
  .docs-sidebar-link{ display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:8px; margin:0 8px; font:700 12px/1 Inter; letter-spacing:.04em; color:var(--on-surface-variant); cursor:pointer; text-decoration:none; transition:background .15s; }
  .docs-sidebar-link:hover{ background:var(--surface-card); }
  .docs-sidebar-link.docs-active{ background:var(--primary-fixed); color:var(--on-primary-fixed-variant); }
  .code-block{ background:#1e1e1e; color:#d4d4d4; padding:1rem; border-radius:.5rem; font:500 .875rem/1.5 'JetBrains Mono',monospace; overflow-x:auto; position:relative; }

  /* Help center */
  .help-card{ background:var(--surface-main); border:1px solid var(--border); border-radius:12px; padding:24px; box-shadow:var(--shadow-sm); transition:box-shadow .2s,transform .2s; }
  .help-card:hover{ box-shadow:var(--shadow-md); transform:translateY(-2px); }
  .faq-item{ border-bottom:1px solid var(--border-soft); }
  .faq-item:last-child{ border-bottom:none; }
  .faq-q{ display:flex; justify-content:space-between; align-items:center; padding:16px 0; cursor:pointer; }
  .faq-a{ max-height:0; overflow:hidden; transition:max-height .3s ease; }
  .faq-a.open{ max-height:300px; }

  /* ── Authentication & Single-PC Session Modals ────────────────────────────── */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(6px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .modal-backdrop.open {
    opacity: 1;
    pointer-events: auto;
  }
  .modal-dialog {
    background: var(--surface-main);
    border: 1px solid var(--border);
    border-radius: 16px;
    width: 440px;
    max-width: 92vw;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
    box-sizing: border-box;
    padding: 24px 26px;
    box-shadow: var(--shadow-lg);
    position: relative;
    transform: translateY(12px) scale(0.98);
    transition: transform .2s ease;
  }
  .modal-dialog::-webkit-scrollbar {
    width: 6px;
  }
  .modal-dialog::-webkit-scrollbar-track {
    background: transparent;
  }
  .modal-dialog::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
  }
  .modal-backdrop.open .modal-dialog {
    transform: translateY(0) scale(1);
  }
  .modal-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .15s;
  }
  .modal-close-btn:hover {
    background: var(--surface-card);
    color: var(--text-primary);
  }
  .btn-google {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 11px 16px;
    background: var(--surface-main);
    border: 1px solid var(--border);
    border-radius: 10px;
    font: 600 13px/1 Inter, sans-serif;
    color: var(--text-primary);
    cursor: pointer;
    transition: all .15s ease;
    box-shadow: var(--shadow-sm);
  }
  .btn-google:hover {
    background: var(--surface-card);
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
  }
  .btn-google:active {
    transform: scale(0.99);
  }
  .auth-tabs {
    display: flex;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 20px;
    gap: 4px;
  }
  .auth-tab {
    flex: 1;
    padding: 8px 12px;
    text-align: center;
    font: 700 12px/1 Inter;
    color: var(--text-secondary);
    border-radius: 7px;
    cursor: pointer;
    transition: all .15s;
    border: none;
    background: transparent;
  }
  .auth-tab.active {
    background: var(--surface-main);
    color: var(--primary);
    box-shadow: var(--shadow-sm);
  }
  .input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 14px;
    text-align: left;
  }
  .input-label {
    font: 700 11px/1 Inter;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-secondary);
  }
  .input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
  }
  .input-wrap .s-input {
    padding-right: 38px;
  }
  .pw-toggle {
    position: absolute;
    right: 10px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
  }
  .pw-toggle:hover {
    color: var(--text-primary);
  }
  .auth-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 18px 0;
    color: var(--text-muted);
    font: 600 11px Inter;
    text-transform: uppercase;
    letter-spacing: 0.06em;
  }
  .auth-divider::before, .auth-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--border);
  }
  .auth-divider span {
    padding: 0 12px;
  }
  .auth-err-box {
    background: var(--error-container);
    color: var(--error-strong);
    border: 1px solid var(--error-border);
    border-radius: 8px;
    padding: 10px 12px;
    font: 500 12px/1.4 Inter;
    margin-bottom: 14px;
    display: none;
  }
  .auth-err-box.show {
    display: block;
  }
  .user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin: 0 16px 12px;
    border-radius: 10px;
    background: var(--surface-card);
    border: 1px solid var(--border);
    transition: all .15s ease;
    cursor: pointer;
    text-decoration: none;
  }
  .user-chip:hover {
    background: var(--surface-card-hover);
    border-color: var(--primary);
  }
  .user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--primary-container);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 12px Inter;
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
  }
  .user-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .user-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success);
    position: absolute;
    bottom: 0;
    right: 0;
    border: 2px solid var(--surface-main);
  }
  .user-info {
    flex: 1;
    overflow: hidden;
    text-align: left;
  }
  .user-name {
    font: 700 12px/1.2 Inter;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .user-email {
    font: 500 10px/1.2 Inter;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
  }
  .conflict-icon-wrap {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(245, 158, 11, 0.12);
    color: var(--warning);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
  }
  .conflict-device-box {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 14px;
    margin: 18px 0;
    text-align: left;
  }

  /* ── Lifetime Paywall Modal ── */
  .paywall-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 9px;
    border-radius: 9999px;
    background: rgba(73, 62, 229, 0.12);
    color: var(--primary);
    font: 700 10.5px/1 'JetBrains Mono';
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  :root.dark .paywall-badge {
    background: rgba(165, 180, 252, 0.15);
    color: var(--primary-fixed);
  }
  .paywall-feature-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0 12px;
    text-align: left;
  }
  .paywall-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font: 500 11.5px/1.3 Inter;
    color: var(--text-primary);
  }
  .paywall-feature-item .sym {
    color: var(--success);
    font-size: 15px;
    flex-shrink: 0;
  }
  .price-card {
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 12px;
    margin: 8px 0 12px;
    text-align: center;
  }
  .price-amount {
    font: 800 24px/1 'Plus Jakarta Sans';
    color: var(--text-primary);
  }
  .price-sub {
    font: 500 10.5px/1.2 Inter;
    color: var(--text-secondary);
    margin-top: 3px;
  }

  /* ── UPI Payment QR Box ── */
  .upi-qr-card {
    background: #ffffff;
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 10px 12px 8px;
    margin: 8px auto 10px;
    text-align: center;
    box-shadow: 0 3px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 220px;
  }
  .upi-qr-container {
    width: 140px;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 6px;
  }
  .upi-qr-container svg, .upi-qr-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .upi-id-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--surface-card);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 5px 8px;
    margin: 6px 0 8px;
    width: 100%;
    max-width: 320px;
  }
  .upi-apps-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font: 600 10.5px/1 Inter;
    color: var(--text-muted);
    margin-top: 4px;
  }
