.qr-dashboard { --qr-surface:#fff; --qr-wash:#f3f7f6; --qr-ink:#173542; --qr-muted:#667b81; display:grid; gap:20px; min-width:0; padding:12px 0 32px; }
.qr-heading h1 { margin:0; font-size:clamp(1.7rem,2.8vw,2.25rem); letter-spacing:-.045em; color:var(--qr-ink); }
.qr-workspace { display:grid; grid-template-columns:minmax(280px,.9fr) minmax(0,1.1fr); gap:20px; align-items:start; }
.qr-create { display:grid; align-content:start; padding:26px; border-radius:22px; background:var(--qr-surface); }
.qr-create form { display:grid; gap:12px; }
.qr-create label { color:var(--qr-muted); font-size:.75rem; }
.qr-amount-input { display:flex; gap:10px; align-items:center; padding:16px 20px; background:var(--qr-wash); border:1px solid #dce7e5; border-radius:14px; }
.qr-amount-input > span { color:#537774; font-size:1.5rem; }
.qr-amount-input input { width:100%; min-width:0; border:0; background:transparent; color:var(--qr-ink); font:inherit; font-size:2rem; font-weight:650; letter-spacing:-.04em; outline:none; }
.qr-amount-input:focus-within { outline:3px solid #0d919e55; outline-offset:3px; }
.qr-amount-input input::placeholder { color:#b8c9c7; }
.qr-create form > small { font-size:.65rem; color:var(--qr-muted); }
.qr-create .btn { margin-top:12px; min-height:46px; padding:12px 22px; border-radius:12px; font-size:.83rem; }
.qr-feedback { margin:0; color:#11715b; font-size:.76rem; line-height:1.7; overflow-wrap:anywhere; }
.qr-feedback:empty { display:none; }
.qr-feedback[data-error='true'] { color:#ad463c; }
.qr-display { display:grid; place-items:center; min-height:360px; padding:24px; border-radius:22px; background:#eaf3ef; }
.qr-placeholder { text-align:center; color:#71928b; }
.qr-placeholder > svg { width:90px; height:90px; margin-bottom:25px; color:#7ca69d; }
.qr-placeholder h2 { color:#365f57; font-size:1.08rem; letter-spacing:-.02em; }
.qr-active { width:100%; text-align:center; }
.qr-active[hidden], .qr-placeholder[hidden] { display:none; }
.qr-brand { color:#46756c; font-size:.62rem; font-weight:700; letter-spacing:.15em; }
.qr-active h2 { margin:8px 0; color:var(--qr-ink); font-size:1.1rem; letter-spacing:-.025em; }
.qr-charge-amount { display:block; color:var(--qr-ink); font-size:2rem; letter-spacing:-.045em; }
.qr-code { width:min(270px,100%); min-height:180px; display:grid; place-items:center; margin:18px auto; }
.qr-code > svg { display:block; width:100%; height:auto; border-radius:12px; background:#fff; }
.qr-render-error { padding:20px; font-size:.8rem; color:#a4443d; }
.qr-state-icon { display:grid; place-items:center; width:100px; height:100px; border-radius:50%; background:#d5e8e1; font-size:3rem; font-weight:500; color:#478478; }
.qr-display[data-status='paid'] { background:#e3f3eb; }
.qr-display[data-status='paid'] .qr-state-icon { background:#c5e9d8; color:#187452; }
.qr-display[data-status='expired'], .qr-display[data-status='failed'], .qr-display[data-status='refunded'] { background:#f0f3f3; }
.qr-display[data-status='disputed'] { background:#fff1e9; }
.qr-status { display:inline-flex; align-items:center; gap:7px; padding:6px 10px; border-radius:8px; color:#8a6726; background:#fbf0d4; font-size:.68rem; font-weight:600; white-space:nowrap; }
.qr-status::before { content:''; flex:0 0 5px; width:5px; height:5px; border-radius:50%; background:currentColor; }
.qr-status[data-status='paid'] { color:#187150; background:#d8f0e4; }
.qr-status[data-status='expired'], .qr-status[data-status='refunded'], .qr-status[data-status='cancelled'] { color:#67777d; background:#e9eeee; }
.qr-status[data-status='disputed'], .qr-status[data-status='failed'], .qr-status[data-status='rejected'] { color:#a84b3e; background:#fbe5dc; }
.qr-status-note { max-width:340px; margin:12px auto 7px; color:var(--qr-muted); font-size:.72rem; line-height:1.7; }
.qr-time { display:block; color:var(--qr-muted); font-size:.64rem; }
.qr-card-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:10px; }
.qr-card-actions button { min-height:38px; border:0; border-radius:10px; padding:10px 13px; background:var(--qr-surface); color:#116e73; font:inherit; font-size:.7rem; font-weight:600; cursor:pointer; }
.qr-new { display:block; width:min(320px,100%); margin:18px auto 0; padding:14px 20px; min-height:50px; border:0; border-radius:12px; background:var(--color-primary,#087887); color:#fff; font:inherit; font-size:.86rem; font-weight:700; cursor:pointer; transition:background 150ms ease; }
.qr-new:hover { background:#096572; }
.qr-status-note:empty { display:none; }
.qr-history { padding:26px; border-radius:22px; background:var(--qr-surface); }
.qr-history > header { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:20px; }
.qr-history h2 { color:var(--qr-ink); font-size:1.08rem; letter-spacing:-.025em; }
.qr-history header p { margin:6px 0 0; color:var(--qr-muted); font-size:.7rem; }
.qr-history .account-refresh { color:#0b7b86; font-size:.74rem; padding:10px; }
[data-qr-history] { display:grid; gap:9px; }
.qr-history-row { display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:20px; padding:17px 19px; border-radius:13px; background:var(--qr-wash); }
.qr-history-row > div { display:grid; gap:6px; }
.qr-history-row strong { font-size:.91rem; color:var(--qr-ink); }
.qr-history-row small { color:var(--qr-muted); font-size:.66rem; }
.qr-history-row button { min-height:36px; border:0; padding:9px 12px; border-radius:9px; background:var(--qr-surface); color:#126c73; font:inherit; font-size:.72rem; font-weight:600; cursor:pointer; }
.qr-empty { padding:24px; border-radius:14px; background:var(--qr-wash); text-align:center; color:var(--qr-muted); font-size:.78rem; line-height:1.8; }
[data-qr-history-message] { font-size:.75rem; color:#ab483c; margin:12px 0; }
[data-qr-history-message]:empty { display:none; }
.qr-dashboard button:focus-visible, .qr-dashboard a:focus-visible { outline:3px solid #0d919e55; outline-offset:3px; }
.qr-dashboard button:disabled { opacity:.55; cursor:default; }
body.dark-mode .qr-dashboard { --qr-surface:#21353e; --qr-wash:#1b2d35; --qr-ink:#e5efef; --qr-muted:#adc1c5; }
body.dark-mode .qr-amount-input { border-color:#3e5b62; }
body.dark-mode .qr-display { background:#203c37; }
body.dark-mode .qr-placeholder h2, body.dark-mode .qr-brand { color:#add5c8; }
body.dark-mode .qr-placeholder { color:#adc1c5; }
body.dark-mode .qr-display[data-status='paid'] { background:#214238; }
body.dark-mode .qr-display[data-status='expired'], body.dark-mode .qr-display[data-status='failed'], body.dark-mode .qr-display[data-status='refunded'] { background:#2b3b43; }
body.dark-mode .qr-display[data-status='disputed'] { background:#48352f; }
@media(max-width:980px) { .qr-create { padding:26px; } .qr-workspace { gap:16px; } }
@media(max-width:680px) {
    .qr-dashboard { gap:20px; }
    .qr-workspace { grid-template-columns:minmax(0,1fr); }
    .qr-create { padding:22px; }
    .qr-dashboard[data-has-charge='true'] .qr-create { display:none; }
    .qr-dashboard[data-has-charge='true'] .qr-display { scroll-margin-top:80px; }
    .qr-display { min-height:240px; padding:22px; }
    .qr-code { width:min(270px,100%); }
    .qr-history { padding:20px 15px; }
    .qr-history-row { grid-template-columns:minmax(0,1fr) auto; gap:12px; padding:14px; }
    .qr-history-row button { grid-column:2; justify-self:end; }
    .qr-history-row .qr-status { font-size:.61rem; }
    .qr-history header p { font-size:.66rem; }
    .qr-amount-input input { font-size:1.8rem; }
}
body.dark-mode .qr-card-actions button, body.dark-mode .qr-history-row button { color:#b2e1dc; }

@media(prefers-reduced-motion:reduce) { .qr-new { transition:none; } }

.qr-history-row > .qr-history-actions { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:6px; }
.qr-history-actions button { min-height:44px; }
.qr-history-actions .qr-delete { background:transparent; color:#a34840; }
.qr-history-actions .qr-delete:hover { background:#f9e9e5; }
body.dark-mode .qr-history-actions .qr-delete { color:#f0ada1; }
@media(max-width:680px) { .qr-history-row > .qr-history-actions { grid-column:1 / -1; } }

.qr-delete-dialog { position:fixed; inset:0; margin:auto; max-height:calc(100dvh - 32px); overflow:auto; width:min(400px,calc(100vw - 32px)); box-sizing:border-box; border:0; border-radius:20px; padding:26px; background:var(--qr-surface); color:var(--qr-ink); box-shadow:0 20px 70px #15363833; }
.qr-delete-dialog::backdrop { background:#17354266; backdrop-filter:blur(3px); }
.qr-delete-dialog h2 { margin:0; font-size:1.05rem; letter-spacing:-.02em; }
.qr-delete-dialog p { margin:14px 0 22px; font-size:.8rem; color:var(--qr-muted); line-height:1.7; }
.qr-delete-dialog > div { display:flex; justify-content:flex-end; gap:8px; }
.qr-delete-dialog button { min-height:44px; border:0; border-radius:10px; padding:10px 16px; font:inherit; font-size:.8rem; font-weight:600; color:var(--qr-ink); background:var(--qr-wash); cursor:pointer; }
.qr-delete-dialog .qr-delete-confirm { background:#ab483f; color:#fff; }