html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

/* ── SuperUser / MyAddresses / MyOrders shared globals ── */
.su-page,.addr-page,.ord-page{min-height:100vh;background:#f8fafc;padding:1.5rem 1rem}
.su-wrap,.addr-wrap,.ord-wrap{max-width:720px;margin:0 auto}
.su-header,.addr-header,.ord-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.75rem;flex-wrap:wrap;gap:.75rem}
.su-title,.addr-title,.ord-title{font-size:1.4rem;font-weight:700;color:#1e293b;margin:0}
.su-sub,.ord-sub{color:#64748b;font-size:.88rem;margin-bottom:1.25rem}
.su-link{color:#6d28d9;font-size:.88rem;text-decoration:none}
.su-link:hover{text-decoration:underline}
.su-loading,.addr-loading,.ord-loading{text-align:center;color:#64748b;padding:2rem}
.su-empty,.addr-empty,.ord-empty{text-align:center;color:#64748b;padding:2rem;font-size:.95rem}
.su-empty-icon,.addr-empty-icon,.ord-empty-icon{font-size:2.5rem;margin-bottom:.75rem}
.su-btn-primary{background:#6d28d9;color:#fff;border:none;border-radius:8px;padding:.5rem 1.1rem;font-size:.9rem;cursor:pointer}
.su-btn-primary:hover{background:#5b21b6}
.su-btn-primary:disabled{opacity:.6;cursor:not-allowed}
.su-btn-sm{background:transparent;border:1px solid #cbd5e1;border-radius:6px;padding:.3rem .8rem;font-size:.82rem;cursor:pointer}
.su-btn-approve{background:#dcfce7;color:#15803d;border:none;border-radius:7px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer}
.su-btn-approve:hover{background:#bbf7d0}
.su-btn-reject{background:#fee2e2;color:#dc2626;border:none;border-radius:7px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer}
.su-btn-reject:hover{background:#fecaca}
.su-banner,.addr-banner{display:flex;align-items:center;justify-content:space-between;border-radius:8px;padding:.75rem 1rem;margin-bottom:1rem;font-size:.9rem}
.su-banner button,.addr-banner-close{background:none;border:none;cursor:pointer;font-size:1.1rem;color:inherit}
.su-banner-ok,.addr-banner-ok{background:#dcfce7;color:#15803d}
.su-banner-err,.addr-banner-err{background:#fee2e2;color:#dc2626}
.su-list,.addr-list{display:flex;flex-direction:column;gap:.7rem}
.su-card,.addr-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1rem 1.25rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.addr-card.is-default{border-color:#a78bfa}
.su-card-info,.addr-card-info{flex:1}
.su-card-name,.addr-card-name{font-weight:600;color:#1e293b;margin-bottom:.2rem;display:flex;align-items:center;gap:.5rem}
.su-card-email,.addr-card-email{font-size:.83rem;color:#64748b}
.addr-card-line{font-size:.85rem;color:#64748b}
.su-card-actions,.addr-card-actions{display:flex;flex-direction:column;gap:.4rem}
.addr-tag,.su-tag{font-size:.75rem;font-weight:600;border-radius:20px;padding:.2rem .7rem;white-space:nowrap}
.addr-tag,.su-tag-ok{background:#ede9fe;color:#6d28d9}
.su-tag-used{background:#f1f5f9;color:#64748b}
.su-discount-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1.5rem}
.su-discount-current{font-size:1rem;color:#374151;margin-bottom:1.25rem}
.su-field{margin-bottom:1rem;display:flex;flex-direction:column;gap:.35rem}
.su-field label{font-size:.82rem;font-weight:500;color:#374151}
.su-input{border:1px solid #cbd5e1;border-radius:8px;padding:.55rem .9rem;font-size:.9rem;outline:none}
.su-input:focus{border-color:#8b5cf6}
.su-newlink{background:#ede9fe;border-radius:10px;padding:1rem 1.25rem;margin-bottom:1.25rem}
.su-newlink-label{font-size:.8rem;font-weight:600;color:#6d28d9;margin-bottom:.35rem}
.su-newlink-url{font-size:.85rem;color:#374151;word-break:break-all;margin-bottom:.5rem}
.su-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid #e2e8f0}
.su-table th{background:#f8fafc;padding:.7rem 1rem;font-size:.82rem;font-weight:600;color:#64748b;text-align:left}
.su-table td{padding:.75rem 1rem;font-size:.85rem;color:#374151;border-top:1px solid #f1f5f9}
.su-code{background:#f1f5f9;border-radius:4px;padding:.1rem .4rem;font-family:monospace;font-size:.85rem}
/* addr modal */
.addr-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);display:flex;align-items:center;justify-content:center;z-index:1000}
.addr-modal{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.addr-modal-head{display:flex;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;border-bottom:1px solid #e2e8f0;font-weight:600;font-size:1rem}
.addr-icon-btn{background:none;border:none;cursor:pointer;font-size:1.4rem;color:#64748b}
.addr-modal-body{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.9rem}
.addr-modal-foot{padding:1rem 1.5rem;border-top:1px solid #e2e8f0;display:flex;gap:.75rem;justify-content:flex-end}
.addr-field{display:flex;flex-direction:column;gap:.3rem}
.addr-field label{font-size:.82rem;font-weight:500;color:#374151}
.addr-input{border:1px solid #cbd5e1;border-radius:8px;padding:.6rem .9rem;font-size:.9rem;outline:none}
.addr-input:focus{border-color:#8b5cf6}
.addr-row{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.addr-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;cursor:pointer}
.addr-form-error{background:#fee2e2;color:#dc2626;border-radius:8px;padding:.6rem .9rem;font-size:.85rem}
.addr-btn-primary{background:#6d28d9;color:#fff;border:none;border-radius:8px;padding:.5rem 1.1rem;font-size:.9rem;cursor:pointer}
.addr-btn-primary:hover:not(:disabled){background:#5b21b6}
.addr-btn-primary:disabled{background:#cbd5e1;color:#f8fafc;cursor:not-allowed;opacity:.75}
.addr-btn-ghost{background:transparent;border:1px solid #cbd5e1;border-radius:8px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer}
.addr-btn-sm{background:transparent;border:1px solid #e2e8f0;border-radius:6px;padding:.3rem .8rem;font-size:.8rem;cursor:pointer}
.addr-btn-danger{background:transparent;border:1px solid #fca5a5;color:#dc2626;border-radius:8px;padding:.4rem .9rem;font-size:.85rem;cursor:pointer}
/* ord */
.ord-link{display:inline-block;margin-top:.75rem;color:#6d28d9;font-size:.9rem}
.ord-list{display:flex;flex-direction:column;gap:.9rem}
.ord-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:1.1rem 1.25rem}
.ord-card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.75rem;gap:1rem}
.ord-card-date{font-size:.82rem;color:#64748b;margin-bottom:.2rem}
.ord-card-addr{font-size:.85rem;color:#374151;line-height:1.5}
.ord-status{font-size:.78rem;font-weight:600;border-radius:20px;padding:.25rem .75rem;white-space:nowrap}
.status-pending{background:#fef3c7;color:#b45309}
.status-confirmed{background:#dbeafe;color:#1d4ed8}
.status-shipping{background:#e0f2fe;color:#0369a1}
.status-delivered{background:#dcfce7;color:#15803d}
.status-cancelled{background:#fee2e2;color:#dc2626}
.ord-card-amounts{font-size:.88rem;color:#374151;display:flex;gap:1rem;flex-wrap:wrap;margin-bottom:.6rem}
.ord-discount{color:#dc2626}
.ord-final{color:#16a34a}
.ord-note{font-size:.82rem;color:#6b7280;font-style:italic;margin-bottom:.6rem}
.ord-details{margin-top:.5rem}
.ord-details summary{font-size:.85rem;cursor:pointer;color:#6d28d9}
.ord-items{list-style:none;padding:.5rem 0 0 0;margin:0;display:flex;flex-direction:column;gap:.35rem}
.ord-items li{display:flex;justify-content:space-between;font-size:.85rem;color:#374151;padding:.3rem 0;border-bottom:1px dashed #e2e8f0}
.ord-items-loading{font-size:.82rem;color:#94a3b8;padding:.5rem 0}
/* ── ManageUser ── */
.mu-wrap{max-width:860px;margin:0 auto}
.mu-filters{display:flex;gap:.5rem;margin-bottom:1rem;flex-wrap:wrap}
.mu-filter-btn{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;padding:.35rem .9rem;font-size:.82rem;cursor:pointer;color:#475569}
.mu-filter-btn.active{background:#6d28d9;color:#fff;border-color:#6d28d9}
.mu-card{flex-wrap:wrap}
.mu-card-right{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}
.mu-role-tag{font-size:.72rem;font-weight:600;border-radius:20px;padding:.15rem .6rem}
.mu-role-0{background:#f1f5f9;color:#64748b}
.mu-role-1{background:#dbeafe;color:#1d4ed8}
.mu-role-2{background:#fce7f3;color:#be185d}
.mu-status{font-size:.78rem;font-weight:600;border-radius:20px;padding:.2rem .65rem;white-space:nowrap}
.mu-status-0{background:#fef3c7;color:#b45309}
.mu-status-1{background:#dcfce7;color:#15803d}
.mu-status-2{background:#fee2e2;color:#dc2626}
.mu-meta{font-size:.78rem;color:#94a3b8;margin-top:.15rem}
.mu-role-select{border:1px solid #cbd5e1;border-radius:6px;padding:.3rem .5rem;font-size:.82rem;outline:none;cursor:pointer}
.mu-role-select:focus{border-color:#8b5cf6}
.mu-modal{background:#fff;border-radius:16px;width:100%;max-width:540px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px rgba(0,0,0,.25)}
.mu-modal-body{padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:.75rem}
.mu-status-row{padding:.5rem 0;border-bottom:1px solid #f1f5f9}
.mu-pages-title{font-size:.85rem;font-weight:600;color:#374151;margin-top:.25rem}
.mu-pages-grid{display:flex;flex-direction:column;gap:.5rem}
.mu-check{display:flex;align-items:center;gap:.5rem;font-size:.85rem;cursor:pointer}
.mu-page-link{font-size:.75rem;color:#94a3b8;font-family:monospace}

/* Square Payment */
.sq-summary{display:flex;flex-direction:column;gap:.35rem;margin-bottom:1rem;padding:.75rem;background:#f8fafc;border-radius:8px}
.sq-summary-row{display:flex;justify-content:space-between;font-size:.9rem;color:#475569}
.sq-summary-row.sq-total{font-size:1.05rem;color:#1e293b;border-top:1px solid #e2e8f0;padding-top:.5rem;margin-top:.25rem}
.sq-card-label{font-size:.85rem;font-weight:600;color:#374151;margin-bottom:.5rem}
#sq-card-container{border:1px solid #e2e8f0;border-radius:8px;padding:.75rem;background:#fff}

/* Checkout stepper */
.checkout-steps{display:flex;align-items:center;justify-content:center;gap:0;padding:.75rem 1rem;border-bottom:1px solid #f1f5f9}
.ck-step{display:flex;align-items:center;gap:.35rem;font-size:.75rem;color:#94a3b8;font-weight:500;white-space:nowrap}
.ck-num{width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;background:#e2e8f0;color:#94a3b8;font-size:.7rem;font-weight:700}
.ck-step--active{color:#6d28d9;font-weight:600}
.ck-step--active .ck-num{background:#7c3aed;color:#fff}
.ck-step--done{color:#22c55e;font-weight:600}
.ck-step--done .ck-num{background:#22c55e;color:#fff;font-size:.65rem}
.ck-step-line{width:32px;height:2px;background:#e2e8f0;flex-shrink:0;margin:0 .35rem}

/* ─────────────────────────────────────────────────────────────────────
   Magic-lock corner trigger + lock mask + static fallback overlay.

   These live in app.css (always loaded statically) — NOT in MagicGuard's
   component <style> — because magic-idle.js arms the bottom-right corner on
   page load, BEFORE the Blazor circuit renders MagicGuard. If these rules
   only shipped with the component, the early portal would be a 0-size,
   unclickable div until the circuit connected (the exact bug this fixes).
   ───────────────────────────────────────────────────────────────────── */

/* Long-press trigger: transparent 60x60 corner zone. touch-action:none so a
   deliberate hold isn't stolen by the browser for scroll/pan. */
.magic-trigger {
    position: fixed;
    bottom: 0; right: 0;
    width: 60px; height: 60px;
    z-index: 99600;
    background: transparent;
    cursor: default;
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* Lock mask: linen / silk cross-hatch on warm parchment. z-index 99000 — with
   the body-level portal this beats every fixed appbar/sidebar. Mirrors the SSR
   bootstrap mask inline-styled in the layouts. */
.magic-mask {
    position: fixed; inset: 0;
    background-color: #f4f1ec;
    background-image:
        repeating-linear-gradient( 45deg, rgba(71, 85, 105, .05) 0 1px, transparent 1px 8px),
        repeating-linear-gradient(-45deg, rgba(71, 85, 105, .05) 0 1px, transparent 1px 8px),
        radial-gradient(ellipse at 30% 20%, #fbfaf7 0%, #f4f1ec 60%, #e8e3da 100%);
    background-repeat: repeat, repeat, no-repeat;
    z-index: 99000;
}

/* Static fallback PIN overlay (magic-idle.js _showFallback). Pure-DOM, used
   when no Blazor circuit is available. z-index above the trigger and mask. */
.mlf-overlay {
    position: fixed; inset: 0;
    z-index: 100000;
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    background: rgba(244, 241, 236, .55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.mlf-card {
    width: 100%; max-width: 440px;
    background: linear-gradient(180deg, #ffffff 0%, #fdfaf3 100%);
    border: 1px solid var(--cream-line, #e8d5a8);
    border-radius: 16px;
    box-shadow: 0 30px 80px rgba(15, 23, 42, .25), 0 8px 20px rgba(184, 134, 46, .12);
    overflow: hidden;
}
.mlf-header {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 28px 24px 12px; text-align: center;
    background: radial-gradient(ellipse at top, rgba(184, 134, 46, .10) 0%, transparent 70%);
}
.mlf-icon {
    width: 64px; height: 64px; border-radius: 18px;
    display: flex; align-items: center; justify-content: center;
    font-size: 28px; color: #fff;
    background: linear-gradient(135deg, var(--cream-gold, #c79a3f) 0%, var(--cream-gold-deep, #8e6a1f) 100%);
    box-shadow: 0 8px 24px rgba(184, 134, 46, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}
.mlf-title { margin: 0; font-size: 19px; font-weight: 700; color: var(--cream-text-strong, #1f2937); }
.mlf-sub   { font-size: 13px; color: var(--cream-text-muted, #6b7280); max-width: 320px; }
.mlf-body  { padding: 16px 24px 4px; display: flex; flex-direction: column; gap: 12px; }
.mlf-input {
    -webkit-text-security: disc; text-security: disc; -webkit-text-fill-color: #1f2937;
    font-size: 22px; letter-spacing: 8px; text-align: center;
    padding: 14px 16px; border-radius: 10px;
    border: 1px solid var(--cream-line, #e8d5a8); background: #fff; color: #1f2937;
    outline: none;
}
.mlf-input:focus { border-color: var(--cream-gold, #c79a3f); box-shadow: 0 0 0 3px rgba(199, 154, 63, .2); }
.mlf-hidden { display: none; }
.mlf-msg { min-height: 18px; font-size: 13px; color: #991b1b; }
.mlf-msg:empty { display: none; }
.mlf-footer { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 24px 20px; }
.mlf-btn {
    padding: 10px 18px; border-radius: 10px; font-size: 15px; font-weight: 600;
    border: 1px solid transparent; cursor: pointer;
}
.mlf-btn-ghost   { background: transparent; border-color: var(--cream-line, #e8d5a8); color: var(--cream-text-strong, #1f2937); }
.mlf-btn-primary { background: linear-gradient(135deg, var(--cream-gold, #c79a3f) 0%, var(--cream-gold-deep, #8e6a1f) 100%); color: #fff; }
.mlf-btn:disabled { opacity: .6; cursor: default; }

@media (max-width: 540px) {
    .mlf-overlay { padding: 0; align-items: stretch; }
    .mlf-card { max-width: 100%; min-height: 100vh; min-height: 100dvh; border-radius: 0; border: none; }
    .mlf-footer .mlf-btn { flex: 1; min-height: 46px; justify-content: center; }
}
.ck-step-line--done{background:#22c55e}