/* === RESET & BASE === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --display: 'Space Grotesk', sans-serif;
    --body: 'Inter', sans-serif;
    --primary: #fea918;
    --primary-dark: #c87f00;
    --primary-ink: #c07900;
    --coral: #ff5a5e;
    --ink: #17130c;
    --muted: #6f6950;
    --card: #ffffff;
    --bg: #f8f6f1;
    --card-bg: #ffffff;
    --text: #17130c;
    --text-light: #6f6950;
    --border: #e9e3d6;
    --success: #00b894;
    --error: #d63031;
    --credit: #00b894;
    --debit: #d63031;
    --radius: 16px;
    --shadow: 0 4px 20px rgba(0,0,0,0.08);
    --tab-h: 70px;
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --violet: #fea918;
    --violet-2: #d98400;
    --azure: #ff5a5e;
    --lime: #ffce6b;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--text);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overscroll-behavior: none;
}

/* === APP SHELL === */
.app-body {
    overflow: hidden;
    height: 100dvh;
}

.app-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    max-width: 480px;
    margin: 0 auto;
}

.app-pages {
    flex: 1;
    position: relative;
    overflow: hidden;
}

.app-page {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s;
}

.app-page.active {
    opacity: 1;
    visibility: visible;
}

.app-page-scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.app-page-content {
    padding: 1rem 1rem calc(1rem + var(--safe-bottom));
}

/* === BOTTOM TABS === */
.app-tabs {
    display: flex;
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    padding-bottom: var(--safe-bottom);
    flex-shrink: 0;
}

.app-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    padding: 0.5rem 0;
    border: none;
    background: none;
    color: var(--text-light);
    font-size: 0.65rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.app-tab.active {
    color: var(--primary);
}

.tab-icon {
    width: 22px;
    height: 22px;
}

/* === HERO V2 === */
.hero-v2 {
    background: linear-gradient(135deg, #171309 0%, #24190c 56%, #15110c 100%),radial-gradient(circle at 84% 16%,rgba(254,169,24,.32),transparent 46%),radial-gradient(circle at 8% 96%,rgba(255,90,94,.32),transparent 52%);
    color: white;
    border-radius: 24px;
    padding: 1.25rem 1.25rem 1rem;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(254, 169, 24, 0.4);
}

.hero-v2.has-bg {
    background-size: cover;
    background-position: center;
}

.hero-v2.has-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(8, 8, 8, 0.88), rgba(255, 90, 94, 0));
    border-radius: 24px;
    z-index: 0;
}

.hero-v2 > * { position: relative; z-index: 1; }

.hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.hero-v2-logo {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.2));
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    padding: 4px;
}

.hero-v2-logo-placeholder {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(255,255,255,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}

.hero-v2-brand {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.hero-v2-brand-info {
    display: flex;
    flex-direction: column;
    gap: 0.14rem;
    min-width: 0;
}

.hero-v2-name {
    font-family: var(--display);
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.15;
    text-shadow: 0 1px 6px rgba(0,0,0,0.45);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.hero-v2-tag {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 1.6px;
    opacity: 0.85;
    text-transform: uppercase;
    text-shadow: 0 1px 4px rgba(0,0,0,0.4);
}

.hero-qr-btn {
    background: white;
    border: none;
    border-radius: 18px;
    padding: 8px;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}

.hero-qr-btn:active { transform: scale(0.95); }

.hero-qr-mini img, .hero-qr-mini canvas {
    display: block;
    width: 80px !important;
    height: 80px !important;
    border-radius: 12px;
}

.hero-center {
    text-align: center;
    padding: 0.25rem 0 1rem;
}

.hero-v2-points {
    display: block;
    font-size: 4.5rem;
    font-weight: 900;
    letter-spacing: -4px;
    line-height: 1;
    background: linear-gradient(180deg, #ffe08a, #ffab2e 55%, #ff5a5e);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 12px rgba(0,0,0,0.55));
}

.hero-v2-label {
    display: block;
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-weight: 400;
    font-size: 1.05rem;
    margin-top: 0.25rem;
    letter-spacing: 0;
    text-transform: none;
    color: #ffe08a;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
    opacity: 0.95;
}

.hero-bottom-row {
    display: flex;
    gap: 0.5rem;
}

.hero-action {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.6rem 0;
    background: rgba(255,255,255,0.15);
    border: none;
    border-radius: 12px;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, transform 0.1s;
}

.hero-action:active { transform: scale(0.97); background: rgba(255,255,255,0.25); }

.hero-action svg {
    width: 16px;
    height: 16px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

.hero-v2-points.pulse { animation: pulse-anim 0.4s ease; }

/* === CARD HUB (account) === */
.card-chips {
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    margin-bottom: 0.9rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.card-chips::-webkit-scrollbar { display: none; }

.card-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    background: #fff;
    border: 1.5px solid #ece7db;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}
.card-chip:active { transform: scale(0.97); }
.card-chip.on {
    border-color: var(--primary);
    box-shadow: 0 2px 10px rgba(254, 169, 24, 0.28);
}

.card-chip img {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(0,0,0,0.04);
    padding: 2px;
}
.chip-fallback {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, #ffe08a, #ffab2e);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.chip-name {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.card-chip.on .chip-name { color: #171309; }
.chip-pts {
    font-size: 0.68rem;
    font-weight: 700;
    color: #ff9d00;
    background: rgba(254, 169, 24, 0.14);
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}
.card-chip.on .chip-pts { background: linear-gradient(135deg, #ffe08a, #ffab2e); color: #fff; }

.acct-hero {
    min-height: 250px;
    display: flex;
    flex-direction: column;
}
.acct-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, rgba(11, 10, 27, 0.28), rgba(11, 10, 27, 0.55));
    z-index: 0;
    border-radius: 24px;
}
.acct-hero > * { position: relative; z-index: 1; }

.hero-action-link {
    text-decoration: none;
    font-family: inherit;
    font-weight: 600;
    color: white;
}

.prizes-empty {
    background: #fff;
    border: 1.5px dashed #e5e0d5;
    border-radius: 14px;
    padding: 1.2rem 1rem;
    text-align: center;
    color: #8a8478;
    font-size: 0.82rem;
}

.prizes-subtitle.locked-sub {
    margin: 0.9rem 0 0.45rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: #6f6a60;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.wallet-empty {
    background: #fff;
    border: 1.5px dashed #e5e0d5;
    border-radius: 14px;
    padding: 1.4rem 1rem;
    text-align: center;
    color: #8a8478;
    font-size: 0.84rem;
    line-height: 1.5;
}
.wallet-empty-ico { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }

/* === PRIZES === */
.section-prizes { margin-bottom: 0.5rem; }

.section-prizes-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}

.section-prizes-header h2 { font-size: 0.95rem; }

.badge-available {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--success);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    animation: badge-bounce 2s ease-in-out infinite;
}

@keyframes badge-bounce {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 184, 148, 0); }
}

.prizes-subtitle {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0.6rem 0 0.3rem;
    font-weight: 500;
}

.prizes-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.prize-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.65rem 0.8rem;
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.prize-row.redeemable {
    border-left: 4px solid var(--success);
    background: linear-gradient(90deg, #e6fcf5 0%, var(--card-bg) 50%);
    animation: prize-glow 2.5s ease-in-out infinite;
}

.prize-row.redeemable .prize-row-icon {
    animation: prize-icon-bounce 1.5s ease-in-out infinite;
}

.prize-row.redeemable .prize-row-cost {
    animation: prize-badge-pop 2s ease-in-out infinite;
}

.prize-row.redeemable:nth-child(2) { animation-delay: 0.3s; }
.prize-row.redeemable:nth-child(3) { animation-delay: 0.6s; }
.prize-row.redeemable:nth-child(2) .prize-row-icon { animation-delay: 0.15s; }
.prize-row.redeemable:nth-child(3) .prize-row-icon { animation-delay: 0.3s; }
.prize-row.redeemable:nth-child(2) .prize-row-cost { animation-delay: 0.3s; }
.prize-row.redeemable:nth-child(3) .prize-row-cost { animation-delay: 0.6s; }

@keyframes prize-glow {
    0%, 100% { box-shadow: 0 1px 4px rgba(0,184,148,0.08); }
    50% { box-shadow: 0 0 18px rgba(0,184,148,0.3), 0 0 35px rgba(0,184,148,0.08); }
}

@keyframes prize-icon-bounce {
    0%, 100% { transform: translateY(0) scale(1); }
    25% { transform: translateY(-3px) scale(1.1); }
    50% { transform: translateY(0) scale(1); }
    75% { transform: translateY(-1.5px) scale(1.05); }
}

@keyframes prize-badge-pop {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.08); }
}

.prize-row.locked { opacity: 0.5; }

.prize-row-icon {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f5ef;
    border-radius: 12px;
    flex-shrink: 0;
}

.prize-row-icon.dim { filter: grayscale(0.6); opacity: 0.6; }

.prize-row-info {
    flex: 1;
    min-width: 0;
}

.prize-row-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--text);
}

.prize-row-desc {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.1rem;
}

.prize-row-desc strong { color: var(--primary); }

.prize-row-cost {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--success);
    background: rgba(0,184,148,0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 8px;
    flex-shrink: 0;
}

.prize-row.locked .prize-row-cost {
    color: var(--text-light);
    background: #f6f3ec;
}

/* === NEXT GOAL & PROGRESS === */
.next-goal {
    background: linear-gradient(160deg, #fffaf0, #fff);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.7rem;
    box-shadow: var(--shadow);
}

.next-goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}

.next-goal-cost {
    color: var(--primary-ink);
    background: rgba(254,169,24,0.14);
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
}

.next-goal-name {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0.4rem 0 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.next-goal-bar {
    height: 9px;
    background: #f0ebdf;
    border-radius: 999px;
    overflow: hidden;
}

.next-goal-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd54a, #fea918 60%, #ff5a5e);
    transition: width 0.5s ease;
}

.next-goal-foot {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 0.45rem;
}

.next-goal-foot strong {
    color: var(--coral);
}

.prize-progress {
    height: 5px;
    background: #f0ebdf;
    border-radius: 999px;
    overflow: hidden;
    margin-top: 0.32rem;
    max-width: 230px;
}

.prize-progress-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd54a, #fea918 60%, #ff5a5e);
}

/* === QR PAGE === */
.qr-modal {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s, visibility 0.25s;
}

.qr-modal.open {
    opacity: 1;
    visibility: visible;
}

.qr-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.6);
    backdrop-filter: blur(4px);
}

.qr-modal-card {
    position: relative;
    z-index: 1;
    background: var(--card-bg);
    border-radius: 24px;
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 360px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.25s;
}

.qr-modal.open .qr-modal-card {
    transform: scale(1);
}

.qr-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border: none;
    background: #f6f3ec;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}

.qr-modal-close:hover { background: #e8e3d6; }

.qr-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
}

.qr-modal-sub {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 1.25rem;
}

.qr-big-frame {
    background: white;
    border-radius: 20px;
    padding: 1rem;
    display: inline-block;
    border: 3px solid var(--bg);
    margin: 0 auto;
}

#qrcode-big img, #qrcode-big canvas {
    display: block;
    border-radius: 12px;
}

.qr-user-label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
    font-weight: 700;
    font-size: 1rem;
    color: var(--text);
}

.qr-mini-logo {
    height: 24px;
    width: auto;
    object-fit: contain;
}

.qr-save-btn {
    max-width: 280px;
}

/* === PROFILE === */
.profile-header {
    text-align: center;
    padding: 2rem 0 1.5rem;
}

.profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary), #ff5a5e);
    color: white;
    font-size: 2rem;
    font-weight: 800;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.75rem;
    box-shadow: 0 4px 15px rgba(254, 169, 24, 0.35);
}

.profile-name {
    font-size: 1.3rem;
    font-weight: 800;
}

.profile-email {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.2rem;
}

.profile-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 0.5rem 0;
    box-shadow: var(--shadow);
    margin-bottom: 1.5rem;
}

.profile-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--bg);
}

.profile-row:last-child { border-bottom: none; }

.profile-label {
    font-size: 0.85rem;
    color: var(--text-light);
}

.profile-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

.profile-value.highlight {
    color: var(--primary);
    font-weight: 800;
    font-size: 1rem;
}

.profile-value.token-val {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 0.75rem;
    color: var(--text-light);
}

/* === PRIZES === */
.section-prizes { margin-bottom: 1rem; }

.section-prizes-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

.section-prizes-header h2 { font-size: 1.1rem; }

.prizes-subtitle:not(.locked-sub) {
    animation: subtitle-glow 3s ease-in-out infinite;
}

@keyframes subtitle-glow {
    0%, 100% { color: var(--text-light); }
    50% { color: var(--success); }
}

.badge-available {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--success);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    animation: badge-bounce 2s ease-in-out infinite;
}

@keyframes badge-bounce {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(0, 184, 148, 0.4); }
    50% { transform: scale(1.1); box-shadow: 0 0 0 8px rgba(0, 184, 148, 0); }
}

.prizes-subtitle {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.locked-sub { margin-top: 1rem; }

.prizes-list-items {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.prize-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.6rem 0.85rem;
    background: var(--card-bg);
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.prize-item.locked { opacity: 0.55; }

.prize-item-left {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.prize-item-icon {
    font-size: 1.3rem;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f5ef;
    border-radius: 10px;
    flex-shrink: 0;
}

.prize-item-icon.dim { filter: grayscale(0.6); opacity: 0.7; }

.prize-item-name {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
}

.prize-item-desc {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
}

.prize-item-desc strong { color: var(--primary); }

.prize-item-cost {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-light);
    padding: 0.2rem 0.5rem;
    background: #f6f3ec;
    border-radius: 8px;
}

/* === MAGIC BOX === */
.magic-box {
    background: var(--card-bg);
    border-radius: 14px;
    padding: 0.85rem 1rem;
    margin-bottom: 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.magic-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.magic-label {
    font-size: 0.85rem;
    font-weight: 600;
}

.magic-actions { display: flex; gap: 0.4rem; }

.magic-actions .btn {
    padding: 0.5rem 0.85rem;
    font-size: 0.78rem;
    border-radius: 8px;
    font-weight: 600;
}

.btn-copy { background: #f6f3ec; color: var(--text); }
.btn-share { background: var(--primary); color: #3a2400; }

/* === SHARED === */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }

.btn-primary { background: var(--primary); color: #3a2400; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-full { width: 100%; }

.btn-danger {
    background: #ffe0e0;
    color: var(--error);
    font-weight: 600;
    text-decoration: none;
    text-align: center;
}

.copy-toast {
    position: fixed;
    bottom: calc(var(--tab-h) + 1.5rem + var(--safe-bottom));
    left: 50%;
    transform: translateX(-50%);
    background: #17130c;
    color: white;
    padding: 0.75rem 1.5rem;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 500;
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
    z-index: 999;
}

.copy-toast.show { opacity: 1; }

@keyframes pulse-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.hero-v2-points.pulse { animation: pulse-anim 0.4s ease; }

/* =========================================== */
/* === ADMIN STYLES                          === */
/* =========================================== */

/* --- Layout --- */
.admin-body {
    background: #f5f6fa;
    min-height: 100vh;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', Roboto, sans-serif;
    color: var(--text);
    -webkit-font-smoothing: antialiased;
}

.admin-container {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 1rem calc(5.5rem + env(safe-area-inset-bottom));
}

/* --- Topbar --- */
.admin-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 0;
    margin-bottom: 1rem;
}

.admin-topbar-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.admin-topbar-title .icon {
    width: 32px;
    height: 32px;
    background: #17130c;
    color: white;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

.admin-topbar-nav {
    display: flex;
    gap: 0.25rem;
}

.admin-nav-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.45rem 0.7rem;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text);
    font-size: 0.75rem;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s;
    -webkit-tap-highlight-color: transparent;
}

.admin-nav-btn:hover { background: #f6f3ec; border-color: #ccc; }
.admin-nav-btn.danger { color: var(--error); border-color: #ffd6d6; }
.admin-nav-btn.danger:hover { background: #fff0f0; }

/* --- Bottom Tab Bar --- */
.admin-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 500;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid var(--border);
    box-shadow: 0 -6px 24px rgba(23, 19, 12, 0.06);
    padding-bottom: env(safe-area-inset-bottom);
}

.admin-tabbar-inner {
    max-width: 520px;
    margin: 0 auto;
    display: flex;
}

.admin-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.55rem 0.2rem 0.6rem;
    color: #8a8578;
    text-decoration: none;
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: lowercase;
    letter-spacing: -0.01em;
    white-space: nowrap;
    border-top: 2px solid transparent;
    -webkit-tap-highlight-color: transparent;
    transition: color 0.15s;
}

.admin-tab svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.admin-tab .t-label {
    line-height: 1;
}

/* Il logo sta al posto dell'etichetta: niente testo, solo immagine */
.admin-tab-brand {
    padding: 0.6rem 0.2rem 0.65rem;
}

.admin-tab-logo {
    width: 54px;
    height: auto;
    display: block;
}

.admin-tab.active {
    color: var(--primary);
    border-top-color: var(--primary);
}

.admin-tab.danger { color: #b8453f; }
.admin-tab.danger.active { color: var(--error); border-top-color: var(--error); }

/* --- Login --- */
.admin-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.admin-login-card {
    width: 100%;
    max-width: 380px;
    background: var(--card-bg);
    border-radius: 20px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.admin-login-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #17130c, #6f6950);
}

.admin-login-icon {
    width: 56px;
    height: 56px;
    background: #17130c;
    color: white;
    border-radius: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
}

.admin-login-card h1 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 0.2rem;
}

.admin-login-card .subtitle {
    color: var(--text-light);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
}

.admin-login-card .form-group { margin-bottom: 1rem; }

.admin-login-card .btn-primary {
    background: #17130c;
    border-radius: 12px;
    padding: 0.9rem;
    font-size: 1rem;
    font-weight: 700;
    margin-top: 0.5rem;
}

.admin-login-card .btn-primary:hover { background: #0f0c06; }

/* --- Stats --- */
.admin-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

.admin-stat {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.1rem 1rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    text-align: center;
}

.admin-stat-value {
    display: block;
    font-size: 2rem;
    font-weight: 900;
    color: var(--text);
    line-height: 1.1;
}

.admin-stat-label {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.25rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* --- Section blocks --- */
.admin-section {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    margin-bottom: 0.75rem;
}

.admin-section-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.85rem;
}

/* --- Scanner --- */
.admin-scan-btn {
    width: 100%;
    padding: 1rem;
    background: #17130c;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.admin-scan-btn:active { transform: scale(0.98); }
.admin-scan-btn:hover { background: #0f0c06; }

.admin-scan-btn svg {
    width: 22px;
    height: 22px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

#scanner-region { border-radius: 12px; overflow: hidden; margin-top: 0.75rem; }
#scanner-region video { border-radius: 12px; }

/* --- Check-in automatico: barra di stato + overlay di conferma --- */

.checkin-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: linear-gradient(135deg, #0f2a1e, #143d2b);
    border: 1px solid #1f5c40;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
}

.checkin-bar-left { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }

.checkin-bar-dot {
    width: 10px;
    height: 10px;
    flex: 0 0 10px;
    border-radius: 50%;
    background: #00d68f;
    box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.7);
    animation: checkin-pulse 2s infinite;
}

@keyframes checkin-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(0, 214, 143, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 214, 143, 0); }
}

.checkin-bar-title { color: #fff; font-weight: 700; font-size: 0.95rem; line-height: 1.2; }
.checkin-bar-sub   { color: #7fd8b0; font-size: 0.75rem; line-height: 1.3; margin-top: 0.15rem; }

.checkin-bar-right { text-align: center; flex: 0 0 auto; }
.checkin-bar-count  { color: #00d68f; font-size: 1.6rem; font-weight: 800; line-height: 1; }
.checkin-bar-label  { color: #7fd8b0; font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.06em; }

.checkin-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}

.checkin-overlay[hidden] { display: none; }

.checkin-card {
    width: 100%;
    max-width: 380px;
    background: #17130c;
    border-radius: 24px;
    border: 2px solid #2a2318;
    padding: 2rem 1.5rem 1.75rem;
    text-align: center;
    animation: checkin-in 0.22s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

@keyframes checkin-in {
    from { opacity: 0; transform: scale(0.86); }
    to   { opacity: 1; transform: scale(1); }
}

.checkin-icon {
    width: 84px;
    height: 84px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    font-weight: 800;
    line-height: 1;
    background: #0f2a1e;
    color: #00d68f;
    border: 3px solid #00d68f;
}

.checkin-card.is-skip .checkin-icon { background: #2a2310; color: #ffc043; border-color: #ffc043; }
.checkin-card.is-err  .checkin-icon { background: #2a1110; color: #ff6b6b; border-color: #ff6b6b; }

.checkin-name {
    color: #fff;
    font-size: 1.3rem;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.checkin-delta {
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    margin-top: 0.35rem;
    color: #00d68f;
}

.checkin-card.is-skip .checkin-delta,
.checkin-card.is-err  .checkin-delta { color: #ffc043; }
.checkin-card.is-err  .checkin-delta { color: #ff6b6b; }

.checkin-total { color: #a89880; font-size: 0.9rem; font-weight: 600; margin-top: 0.1rem; }

.checkin-msg {
    color: #d8c9b0;
    font-size: 0.85rem;
    line-height: 1.35;
    margin-top: 0.6rem;
}

.checkin-msg:empty { display: none; }

.admin-token-form {
    display: flex;
    gap: 0.5rem;
}

.admin-token-form input {
    flex: 1;
    padding: 0.8rem 1rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.admin-token-form input:focus { border-color: var(--primary); }

.admin-token-form button {
    padding: 0.8rem 1.2rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
    transition: background 0.15s;
}

.admin-token-form button:hover { background: var(--primary-dark); }

/* --- User Panel --- */
.admin-user-panel {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 1.5rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    margin-bottom: 0.75rem;
}

.admin-user-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.admin-user-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, var(--primary), #ff5a5e);
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-user-name {
    font-size: 1.1rem;
    font-weight: 700;
}

.admin-user-email {
    font-size: 0.75rem;
    color: var(--text-light);
}

.wheel-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 1.1rem;
}

.wheel {
    --sz: min(300px, 74vw);
    width: var(--sz);
    height: var(--sz);
    position: relative;
    border-radius: 50%;
    background: #eef1ea;
    box-shadow: 0 14px 34px rgba(23, 19, 12, 0.14), inset 0 0 0 6px #fff;
}

.slc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    clip-path: polygon(50% 50%, 75% 6.7%, 25% 6.7%);
    transform: rotate(var(--rot));
    background: conic-gradient(from -30deg, var(--c1) 0deg 30deg, var(--c2) 30deg 60deg, transparent 60deg);
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.12s;
    -webkit-user-select: none;
    user-select: none;
}

.slc:active { filter: brightness(0.9); }

.slc.ptn-flash { animation: flash-wedge 0.4s ease; }

@keyframes flash-wedge {
    0%, 100% { filter: none; }
    45% { filter: brightness(0.55); }
}

.slc-sep,
.wheel-labels {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

.slc-sep svg {
    width: 100%;
    height: 100%;
    display: block;
}

.wl {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) rotate(var(--rot)) translateY(calc(var(--sz) * -0.36)) rotate(calc(var(--rot) * -1));
    color: #fff;
    font-size: 1rem;
    font-weight: 900;
    line-height: 1;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    white-space: nowrap;
}

.wheel-core {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: calc(var(--sz) * 0.52);
    height: calc(var(--sz) * 0.52);
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(23, 19, 12, 0.16), inset 0 0 0 6px #f8f6f1;
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    text-align: center;
    padding: 0.6rem;
}

.wheel-core-label {
    font-size: 0.62rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--text-light);
}

.wheel-core-val {
    font-size: clamp(2rem, 11vw, 2.5rem);
    font-weight: 900;
    color: var(--text);
    line-height: 1;
}

.wheel-core-val.pulse { animation: pulse-anim 0.4s ease; }

.wheel-core-hint {
    font-size: 0.6rem;
    color: var(--text-light);
    margin-top: 0.1rem;
}

/* --- Points Actions --- */
.admin-points-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 0.75rem;
}

.admin-points-single {
    display: flex;
    justify-content: center;
    margin-bottom: 0.75rem;
}

.admin-ptn-big {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 140px;
    height: 140px;
    border: none;
    border-radius: 50%;
    background: var(--success);
    color: white;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(0, 184, 148, 0.35);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, box-shadow 0.15s;
    position: relative;
}

.admin-ptn-big:active {
    transform: scale(0.93);
    box-shadow: 0 3px 12px rgba(0, 184, 148, 0.3);
}

.admin-ptn-big .ptn-big-icon {
    font-size: 3rem;
    font-weight: 800;
    line-height: 1;
    margin-bottom: -0.1rem;
}

.admin-ptn-big .ptn-big-label {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    opacity: 0.9;
}

.admin-ptn-big.ptn-flash {
    animation: flash-big 0.4s ease;
}

@keyframes flash-big {
    0%   { transform: scale(1); }
    25%  { transform: scale(0.88); background: white; color: var(--success); }
    100% { transform: scale(1); }
}

.admin-points-row {
    display: flex;
    justify-content: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.admin-ptn-med {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: none;
    background: var(--success);
    color: white;
    font-size: 1.1rem;
    font-weight: 800;
    font-family: inherit;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(0, 184, 148, 0.3);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.admin-ptn-med:active {
    transform: scale(0.93);
    box-shadow: 0 2px 8px rgba(0, 184, 148, 0.25);
}

.admin-ptn-med.ptn-flash {
    animation: flash-big 0.4s ease;
}

.admin-points-minus {
    display: flex;
    justify-content: center;
}

.admin-ptn.ptn-minus {
    background: var(--card-bg);
    color: var(--error);
    border: 2px solid var(--error);
    width: 48px;
    height: 36px;
    flex-direction: row;
    border-radius: 10px;
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}

.admin-ptn.ptn-minus:active { transform: scale(0.9); }

.admin-ptn.ptn-minus .ptn-value {
    font-size: 1rem;
    font-weight: 700;
}

/* --- Points actions (improved) --- */
.admin-points-actions {
    padding-top: 0.25rem;
}

.admin-points-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-light);
    text-align: center;
    margin: 1.25rem 0 0.75rem;
}

.admin-points-actions .admin-points-title:first-child {
    margin-top: 0;
}

.admin-points-bigrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.9rem;
}

.admin-ptn-med.big {
    width: 72px;
    height: 72px;
    font-size: 1.2rem;
}

.admin-ptn-med.big .ptn-icon {
    font-size: 1.3rem;
    font-weight: 800;
}

.admin-custom-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 0.5rem;
}

.admin-custom-row input[type="number"] {
    width: 130px;
    padding: 0.75rem 1rem;
    border: 2px solid var(--border);
    border-radius: 14px;
    font-size: 1.2rem;
    font-weight: 700;
    text-align: center;
    font-family: inherit;
    outline: none;
    appearance: textfield;
    -moz-appearance: textfield;
    background: #fff;
    transition: border-color 0.2s;
}

.admin-custom-row input[type="number"]::-webkit-inner-spin-button,
.admin-custom-row input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.admin-custom-row input[type="number"]:focus { border-color: var(--primary); }

.admin-custom-btns {
    display: flex;
    gap: 0.5rem;
}

.admin-ptn-med.small {
    width: 56px;
    height: 56px;
    font-size: 1rem;
}

.admin-ptn-med.small.minus {
    background: #fff0f0;
    color: var(--error);
    border: 2px solid var(--error);
    box-shadow: none;
}

.admin-ptn-minus {
    width: 48px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid var(--error);
    background: var(--card-bg);
    color: var(--error);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.1s;
}

.admin-ptn-minus:active { transform: scale(0.9); }

.admin-points-minus {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

/* --- Points panel (redesigned UI/UX) --- */
/* --- User transaction history --- */
.admin-history {
    margin-top: 1.25rem;
    padding-top: 0.25rem;
}

/* --- Empty state --- */
.admin-empty-state {
    text-align: center;
    color: var(--text-light);
    font-size: 0.9rem;
    padding: 1.5rem 0;
}

/* --- Ranking --- */
.admin-ranking {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.admin-ranking-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem;
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 14px;
    transition: border-color 0.15s, background 0.15s;
}

.admin-ranking-row.top-1 { border-color: rgba(243, 156, 18, 0.6); background: #fffaf0; }
.admin-ranking-row.top-2 { border-color: rgba(178, 190, 195, 0.7); background: #fbfcfd; }
.admin-ranking-row.top-3 { border-color: rgba(211, 84, 0, 0.5); background: #fdf6ef; }

.admin-ranking-pos {
    width: 26px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ranking-medal {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 800;
    color: white;
}

.ranking-medal.gold { background: linear-gradient(135deg, #f6c445, #e2a71f); box-shadow: 0 2px 8px rgba(226, 167, 31, 0.4); }
.ranking-medal.silver { background: linear-gradient(135deg, #d1d8e0, #a4b0be); box-shadow: 0 2px 8px rgba(164, 176, 190, 0.4); }
.ranking-medal.bronze { background: linear-gradient(135deg, #e6a272, #cc7349); box-shadow: 0 2px 8px rgba(204, 115, 73, 0.4); }

.ranking-num {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-light);
}

.admin-ranking-avatar {
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: linear-gradient(135deg, var(--primary), #ff5a5e);
    color: white;
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.admin-ranking-row.top-1 .admin-ranking-avatar {
    background: linear-gradient(135deg, #f6c445, #e2a71f);
}

.admin-ranking-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-ranking-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-ranking-sub {
    font-size: 0.7rem;
    color: var(--text-light);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-ranking-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    flex-shrink: 0;
}

.admin-ranking-visits {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--primary);
    background: rgba(254, 169, 24, 0.1);
    padding: 0.15rem 0.5rem;
    border-radius: 8px;
}

.admin-ranking-points {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-light);
}

/* --- Transaction list (shared) --- */
.admin-txn-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.admin-txn-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.6rem;
    background: #fafbfc;
    border: 1px solid var(--border);
    border-radius: 12px;
}

.admin-txn-icon {
    width: 30px;
    height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 800;
    flex-shrink: 0;
}

.admin-txn-icon.credit { background: #e6fcf5; color: #00b894; }
.admin-txn-icon.debit { background: #ffe0e0; color: #d63031; }

.admin-txn-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.admin-txn-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
}

.admin-txn-desc {
    font-size: 0.7rem;
    color: var(--text-light);
}

.admin-txn-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.1rem;
    flex-shrink: 0;
}

.admin-txn-pts {
    font-size: 0.8rem;
    font-weight: 800;
}

.admin-txn-pts.credit { color: #00b894; }
.admin-txn-pts.debit { color: #d63031; }

.admin-txn-date {
    font-size: 0.65rem;
    color: var(--text-light);
}

/* Toast animato per feedback punti */
.admin-points-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: rgba(0,0,0,0.85);
    color: white;
    padding: 0.9rem 1.5rem;
    border-radius: 16px;
    font-size: 1.15rem;
    font-weight: 800;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    white-space: nowrap;
    transition: opacity 0.2s, transform 0.2s;
}

.admin-points-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- Admin Prizes Grid --- */
.admin-prizes-divider {
    border: none;
    border-top: 1px solid var(--border);
    margin: 0.25rem 0 1rem;
}

.admin-prizes-title {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.75rem;
    text-align: center;
}

.admin-prizes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
}

.admin-prize-btn {
    background: #f8f5ef;
    border: 2px solid var(--border);
    border-radius: 14px;
    padding: 0.75rem 0.4rem;
    text-align: center;
    cursor: pointer;
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.admin-prize-btn:active { transform: scale(0.95); }
.admin-prize-btn:hover { border-color: var(--primary); }

.admin-prize-btn.redeemable {
    border-color: var(--success);
    background: #e6fcf5;
}

.admin-prize-btn.redeemable:hover {
    box-shadow: 0 2px 12px rgba(0, 184, 148, 0.2);
}

.admin-prize-btn.disabled {
    opacity: 0.45;
    cursor: default;
}

.admin-prize-btn.disabled:hover { border-color: var(--border); }

.admin-prize-emoji { display: block; font-size: 1.5rem; margin-bottom: 0.2rem; }
.admin-prize-name { display: block; font-size: 0.7rem; font-weight: 600; color: var(--text); margin-bottom: 0.15rem; line-height: 1.2; }
.admin-prize-cost { display: block; font-size: 0.65rem; color: var(--primary); font-weight: 700; }
.admin-prize-cost.got { background: var(--success); color: white; padding: 0.15rem 0.45rem; border-radius: 6px; display: inline-block; }

/* --- Admin Form --- */
.admin-form-card {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    margin-bottom: 1.25rem;
}

.admin-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
}

.admin-form-card .form-group { margin-bottom: 1rem; }
.admin-form-card .form-group:last-of-type { margin-bottom: 0; }

.admin-form-card label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text);
}

.admin-form-card input[type="text"],
.admin-form-card input[type="number"],
.admin-form-card input[type="password"],
.admin-form-card input[type="email"] {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.admin-form-card input:focus { border-color: var(--primary); }

.admin-submit-btn {
    width: 100%;
    padding: 0.85rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 1rem;
    transition: background 0.15s;
}

.admin-submit-btn:hover { background: var(--primary-dark); }

/* --- Admin Prize Cards (list) --- */
.admin-prize-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.admin-prize-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    background: var(--card-bg);
    border-radius: 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.admin-prize-card-left {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
    flex: 1;
}

.admin-prize-card-emoji {
    font-size: 1.5rem;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f5ef;
    border-radius: 12px;
    flex-shrink: 0;
}

.admin-prize-card-info {
    min-width: 0;
}

.admin-prize-card-name {
    display: block;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-prize-card-sub {
    display: block;
    font-size: 0.7rem;
    color: var(--text-light);
}

.admin-prize-card-right {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

.admin-prize-badge {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.2rem 0.5rem;
    border-radius: 6px;
}

.admin-prize-badge.on { background: #e6fcf5; color: #006b4f; }
.admin-prize-badge.off { background: #ffe0e0; color: #9c1b1b; }

.admin-icon-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-size: 0.85rem;
    background: #f6f3ec;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.admin-icon-btn:hover { background: #e8e3d6; }
.admin-icon-btn.del { background: #ffe0e0; color: var(--error); }
.admin-icon-btn.del:hover { background: #ffd0d0; }

/* --- Modal --- */
.admin-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.admin-modal-bg {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
}

.admin-modal-card {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 400px;
    background: var(--card-bg);
    border-radius: 20px;
    padding: 1.75rem 1.5rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
}

.admin-modal-card h3 {
    font-size: 1.1rem;
    font-weight: 800;
    margin-bottom: 1.25rem;
}

.admin-modal-card .form-group { margin-bottom: 1rem; }
.admin-modal-card .form-group:last-of-type { margin-bottom: 0; }

.admin-modal-card label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
}

.admin-modal-card input[type="text"],
.admin-modal-card input[type="number"] {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 0.9rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
}

.admin-modal-card input:focus { border-color: var(--primary); }

.admin-modal-btns {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
}

.admin-modal-btns button {
    flex: 1;
    padding: 0.8rem;
    border: none;
    border-radius: 12px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.admin-modal-btns .btn-save { background: #17130c; color: white; }
.admin-modal-btns .btn-save:hover { background: #0f0c06; }
.admin-modal-btns .btn-cancel { background: #f6f3ec; color: var(--text); }
.admin-modal-btns .btn-cancel:hover { background: #e8e3d6; }

/* --- Settings --- */
.settings-preview-card {
    width: 100%;
    height: 120px;
    border-radius: 18px;
    background-color: #fff0d4;
    background-image: linear-gradient(135deg, #171309 0%, #24190c 56%, #15110c 100%),radial-gradient(circle at 84% 16%,rgba(254,169,24,.32),transparent 46%),radial-gradient(circle at 8% 96%,rgba(255,90,94,.32),transparent 52%);
    background-size: cover;
    background-position: center;
    margin-bottom: 1rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 6px 24px rgba(254, 169, 24, 0.25);
}

.settings-preview-card.has-bg {
    background-image: none;
}

.settings-preview-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(0,0,0,0.45), rgba(0,0,0,0.05));
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    transition: background 0.3s;
}

.settings-preview-card.has-bg .settings-preview-overlay {
    background: linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0));
}

.settings-preview-logo {
    width: 60px;
    height: 60px;
    border-radius: 14px;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(4px);
    border: 2px solid rgba(255,255,255,0.3);
}

.settings-preview-logo img {
    width: 60px;
    height: 60px;
    object-fit: contain;
    border-radius: 12px;
}

.settings-preview-placeholder {
    font-size: 1.5rem;
    color: rgba(255,255,255,0.8);
}

.settings-preview-text {
    text-align: center;
}

.settings-preview-label {
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.settings-section {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    margin-bottom: 0.75rem;
}

.settings-section-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.settings-section-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: #f6f3ec;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.settings-section-icon svg {
    width: 18px;
    height: 18px;
    stroke: var(--text);
    stroke-width: 2;
    fill: none;
}

.settings-section-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}

.settings-section-desc {
    font-size: 0.7rem;
    color: var(--text-light);
    margin-top: 0.1rem;
}

/* Current file display */
.settings-current-file {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem;
    background: #f8f5ef;
    border-radius: 12px;
    margin-bottom: 0.75rem;
    border: 1px solid var(--border);
}

.settings-file-preview {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    overflow: hidden;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 1px solid var(--border);
}

.settings-file-preview.wide {
    width: 80px;
}

.settings-file-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.settings-file-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.settings-file-name {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.settings-file-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--text-light);
    transition: color 0.15s;
}

.settings-file-remove:has(input:checked) {
    color: var(--error);
}

.settings-file-remove input {
    accent-color: var(--error);
    width: 14px;
    height: 14px;
}

.settings-remove-text::after {
    content: '';
}

.settings-file-remove:has(input:checked) .settings-remove-text::after {
    content: '';
}

/* Upload zone */
.settings-upload {
    display: block;
    cursor: default;
    -webkit-tap-highlight-color: transparent;
}

.settings-upload input[type="file"] {
    display: none;
}

/* Bottone + zona di drop */
.settings-upload-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem 0.85rem;
}

.settings-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.62rem 1.05rem;
    border: 1px solid var(--primary);
    border-radius: 999px;
    background: var(--primary);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.12s;
}

.settings-upload-btn:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
}

.settings-upload-btn:active {
    transform: scale(0.97);
}

.settings-upload-btn svg {
    width: 17px;
    height: 17px;
    flex: none;
}

/* Il trascinamento evidenzia tutta la riga */
.settings-upload.dragover .settings-upload-btn {
    background: var(--primary-dark);
    box-shadow: 0 0 0 4px rgba(254, 169, 24, 0.22);
}

.settings-upload.dragover .settings-file-pick {
    border-color: var(--primary);
    background: #fff7e6;
}

.settings-upload.dragover .settings-upload-hint {
    color: var(--primary-ink);
}

.settings-upload-hint {
    font-size: 0.72rem;
    color: var(--muted);
}

.settings-file-remove {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-left: auto;
    font-size: 0.72rem;
    color: #b3261f;
    cursor: pointer;
    white-space: nowrap;
}

/* Miniatura del file appena scelto */
.settings-file-pick {
    margin-bottom: 0.6rem;
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--card);
}

.settings-file-pick:empty {
    display: none;
}

.settings-file-pick img {
    max-height: 90px;
    width: auto;
    border-radius: 8px;
    display: block;
}

.set-bg-name {
    margin: 0.5rem 0 0;
    font-size: 0.72rem;
    color: var(--muted);
    word-break: break-all;
}

.set-bg-name span {
    color: var(--text);
    font-weight: 600;
}

/* Sticky save bar */
.settings-save-bar {
    padding: 1rem 0 0.5rem;
    position: sticky;
    bottom: calc(64px + env(safe-area-inset-bottom));
    background: linear-gradient(0deg, var(--bg) 60%, transparent);
    padding-top: 1.5rem;
}

.settings-save-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.9rem;
    background: #17130c;
    color: white;
    border: none;
    border-radius: 14px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, transform 0.1s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    -webkit-tap-highlight-color: transparent;
}

.settings-save-btn:active { transform: scale(0.98); }
.settings-save-btn:hover { background: #0f0c06; }

.settings-save-btn svg {
    width: 18px;
    height: 18px;
    stroke: white;
    stroke-width: 2;
    fill: none;
}

/* Save toast */
.settings-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.7);
    background: rgba(0, 184, 148, 0.95);
    color: white;
    padding: 1rem 2rem;
    border-radius: 16px;
    font-size: 1rem;
    font-weight: 700;
    z-index: 999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}

.settings-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* --- Alerts --- */
.admin-alert {
    padding: 0.85rem 1rem;
    border-radius: 12px;
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.admin-alert.ok { background: #e6fcf5; color: #006b4f; }
.admin-alert.err { background: #ffe0e0; color: #9c1b1b; }

/* --- Admin inputs shared --- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"] {
    width: 100%; padding: 0.85rem 1rem; border: 2px solid var(--border);
    border-radius: 12px; font-size: 1rem; transition: border-color 0.2s;
    outline: none; font-family: inherit;
}

input:focus { border-color: var(--primary); }

.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 0.4rem; color: var(--text); }
.form-row { display: flex; gap: 0.5rem; }
.input-grow { flex: 1; }

.alert { padding: 0.75rem 1rem; border-radius: 10px; font-size: 0.9rem; margin-bottom: 1rem; font-weight: 500; }
.alert-success { background: #e6fcf5; color: #006b4f; }
.alert-error { background: #ffe0e0; color: #9c1b1b; }

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    font-family: inherit;
    -webkit-tap-highlight-color: transparent;
}

.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #3a2400; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-full { width: 100%; }

.checkbox-group { display: flex; align-items: flex-start; gap: 0.5rem; }
.checkbox-group input[type="checkbox"] { margin-top: 0.2rem; accent-color: var(--primary); }
.checkbox-group label { font-size: 0.8rem; font-weight: 400; line-height: 1.4; }

@keyframes pulse-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}

/* =========================================== */
/* === AUTH PAGES (Register/Login)           === */
/* =========================================== */

.auth-body {
    background: var(--bg);
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.auth-container {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.auth-card {
    width: 100%;
    background: var(--card-bg);
    border-radius: 24px;
    padding: 2.5rem 2rem 2rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08);
    position: relative;
    overflow: hidden;
}

.auth-accent {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), #ff5a5e, #ff5a5e);
}

.auth-logo {
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-logo-icon {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--primary), #ff5a5e);
    color: white;
    font-size: 1.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(254, 169, 24, 0.35);
}

.auth-title {
    font-size: 1.5rem;
    font-weight: 800;
    text-align: center;
    margin-bottom: 0.2rem;
}

.auth-subtitle {
    font-size: 0.9rem;
    color: var(--text-light);
    text-align: center;
    margin-bottom: 1.5rem;
}

.auth-alert {
    padding: 0.7rem 0.85rem;
    border-radius: 10px;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.auth-alert.err {
    background: #ffe0e0;
    color: #9c1b1b;
}

.auth-alert.ok {
    background: #e6fcf5;
    color: #006b4f;
}

.auth-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.auth-field label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--text);
}

.auth-field input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    border: 2px solid var(--border);
    border-radius: 12px;
    font-size: 0.95rem;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s;
    background: #fbf8f2;
}

.auth-field input:focus {
    border-color: var(--primary);
    background: white;
}

.auth-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.auth-checkbox input[type="checkbox"] {
    margin-top: 0.2rem;
    accent-color: var(--primary);
    width: 16px;
    height: 16px;
}

.auth-checkbox label {
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
    color: var(--text-light);
}

.auth-checkbox a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.auth-checkbox a:hover {
    text-decoration: underline;
}

.auth-submit {
    width: 100%;
    padding: 0.9rem;
    background: var(--primary);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    margin-top: 0.25rem;
    transition: background 0.15s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}

.auth-submit:hover { background: var(--primary-dark); }
.auth-submit:active { transform: scale(0.98); }

.auth-footer {
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    font-size: 0.85rem;
    color: var(--text-light);
}

.auth-footer a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 700;
}

.auth-footer a:hover {
    text-decoration: underline;
}

.auth-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.25rem;
    font-size: 0.7rem;
    color: #8a8472;
}

.auth-legal a {
    color: #8a8472;
    text-decoration: none;
    transition: color 0.15s;
}

.auth-legal a:hover { color: var(--text-light); }

.auth-hero-bg {
    background: linear-gradient(135deg, #171309 0%, #24190c 56%, #15110c 100%),radial-gradient(circle at 84% 16%,rgba(254,169,24,.32),transparent 46%),radial-gradient(circle at 8% 96%,rgba(255,90,94,.32),transparent 52%);
}

.auth-hero-bg .auth-card {
    box-shadow: 0 10px 44px rgba(0, 0, 0, 0.18);
}

.auth-hero-bg .auth-legal a {
    color: rgba(255, 255, 255, 0.75);
}

.auth-hero-bg .auth-legal a:hover { color: #fff; }

.auth-hero-bg .auth-legal span {
    color: rgba(255, 255, 255, 0.45);
}

.auth-logo-img {
    width: min(80%, 340px);
    height: auto;
    object-fit: contain;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    padding: 14px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
    display: block;
    margin: 0 auto;
}

/* =========================================== */
/* === LEGAL PAGES (Privacy/Termini)        === */
/* =========================================== */

.legal-body {
    background: var(--bg);
    min-height: 100vh;
}

.legal-container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 1.25rem 3rem;
}

.legal-header {
    padding: 2rem 0 1.5rem;
}

.legal-back {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    margin-bottom: 1.25rem;
}

.legal-back:hover { text-decoration: underline; }

.legal-header {
    --accent: #FF5A5E;
    --disp: var(--display);
}

.legal-header .nav-brand {
    color: #000;
    margin-bottom: 1.25rem;
    width: fit-content;
}

.legal-header .nav-logo {
    filter: none;
}

.legal-header h1 {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 0.3rem;
}

.legal-updated {
    font-size: 0.8rem;
    color: var(--text-light);
}

.legal-content {
    background: var(--card-bg);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.legal-content h2 {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin-top: 1.75rem;
    margin-bottom: 0.6rem;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p {
    font-size: 0.88rem;
    line-height: 1.65;
    color: #444;
    margin-bottom: 0.75rem;
}

.legal-content ul {
    padding-left: 1.25rem;
    margin-bottom: 0.75rem;
}

.legal-content li {
    font-size: 0.88rem;
    line-height: 1.6;
    color: #444;
    margin-bottom: 0.35rem;
}

.legal-content a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.legal-content a:hover { text-decoration: underline; }

.legal-info-box {
    background: #f8f5ef;
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    font-size: 0.85rem;
    line-height: 1.5;
    margin-bottom: 0.75rem;
}

.legal-info-box a {
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
}

.legal-footer {
    text-align: center;
    margin-top: 2rem;
}

.legal-footer a {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
}

.legal-footer a:hover { text-decoration: underline; }

.settings-theme-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem;
}
.settings-theme-field {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}
.settings-theme-field input[type="color"] {
    width: 100%;
    height: 44px;
    border: 1px solid var(--border, #e3e3e8);
    border-radius: 10px;
    padding: 4px;
    background: #fff;
    cursor: pointer;
}
@media (max-width: 480px) {
    .settings-theme-grid { grid-template-columns: 1fr; }
}

/* --- Punto automatico: interruttore grafico --- */

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--border, #e3e3e8);
    border-radius: 12px;
    background: #faf8f4;
    transition: border-color 0.2s, background 0.2s;
}

.toggle-row.is-on {
    border-color: var(--primary, #6c5ce7);
    background: color-mix(in srgb, var(--primary, #6c5ce7) 7%, #fff);
}

/* Safari < 16.2 non conosce color-mix: resta lo sfondo neutro. */
@supports not (background: color-mix(in srgb, red 10%, white)) {
    .toggle-row.is-on { background: #f6f4ff; }
}

.toggle-text { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.toggle-title { font-size: 0.9rem; font-weight: 700; color: var(--text); }
.toggle-desc  { font-size: 0.74rem; color: var(--text-light); line-height: 1.35; }

/* Il bottone non eredita nulla dal form: aspetto e reset sono espliciti. */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-light);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.toggle-track {
    position: relative;
    display: block;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: #d6cfc2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background 0.22s ease;
}

.toggle-switch.is-on .toggle-track {
    background: var(--primary, #6c5ce7);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15), 0 2px 8px color-mix(in srgb, var(--primary, #6c5ce7) 35%, transparent);
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1);
}

.toggle-switch.is-on .toggle-thumb { transform: translateX(22px); }

.toggle-state {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    min-width: 46px;
    text-align: left;
    transition: color 0.2s ease;
}

.toggle-switch.is-on .toggle-state { color: var(--primary, #6c5ce7); }

/* Focus visibile solo per la tastiera, non per il tocco. */
.toggle-switch:focus { outline: none; }
.toggle-switch:focus-visible .toggle-track {
    outline: 2px solid var(--primary, #6c5ce7);
    outline-offset: 3px;
}

.toggle-switch:active .toggle-thumb { width: 27px; }
.toggle-switch.is-on:active .toggle-thumb { transform: translateX(19px); }

.toggle-hint {
    font-size: 0.73rem;
    color: var(--text-light);
    line-height: 1.4;
    margin: 0.6rem 0 0;
    padding-left: 0.15rem;
}

.toggle-hint[hidden] { display: none; }

/* =========================================== */
/* === ACCOUNT HUB (account.php)             === */

        body.hub{font-family:var(--body);background:var(--bg);background-image:radial-gradient(circle at 12% -8%,rgba(254, 169, 24, .13),transparent 42%),radial-gradient(circle at 96% 2%,rgba(255, 90, 94, .15),transparent 38%);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased}
        a{text-decoration:none}
        button{font-family:var(--body)}
        .wrap{max-width:560px;margin:0 auto;padding:1.4rem 1.1rem 6.5rem}
        .greet{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
        .greet-avatar{width:46px;height:46px;border-radius:14px;background:linear-gradient(135deg,#fea918,#ff5a5e);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:700;font-size:1.2rem;box-shadow:0 10px 22px rgba(254, 169, 24, .28);flex:none}
        .greet h1{font-family:var(--display);font-size:1.45rem;font-weight:700;letter-spacing:-.5px;line-height:1.1}
        .greet p{color:var(--muted);font-size:.82rem;margin-top:.2rem}
        .pcard{position:relative;border-radius:20px;overflow:hidden;background:linear-gradient(135deg,#171309 0%,#24190c 48%,#15110c 100%),radial-gradient(circle at 85% 12%,rgba(254,169,24,.35),transparent 50%),radial-gradient(circle at 5% 100%,rgba(255,90,94,.3),transparent 52%);color:#fff;box-shadow:0 22px 44px rgba(254, 169, 24, .38);margin-bottom:1.5rem}
        .pcard::before{content:'';position:absolute;right:-60px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.10)}
        .pcard::after{content:'';position:absolute;left:-30px;bottom:-70px;width:180px;height:180px;border-radius:50%;background:rgba(0,0,0,.07)}
        .pcard-inner{position:relative;z-index:1;display:flex;gap:1rem;padding:1.25rem 1.15rem;aspect-ratio:1.62;min-height:185px}
        .pcard-left{flex:1;display:flex;flex-direction:column;min-width:0}
        .pcard-brand{display:flex;align-items:center;gap:.42rem;font-family:var(--display);font-weight:700;font-size:.95rem}
        .pcard-brand img{width:125px;height:60px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}
        .pcard-tags{display:flex;gap:.35rem;margin-top:.5rem}
        .pcard-tag{background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.18rem .5rem;font-size:.6rem;font-weight:700;letter-spacing:.8px}
        .pcard-sub{font-size:.62rem;opacity:.85;margin-top:.28rem}
        .pcard-name{margin-top:auto;font-family:var(--display);font-size:clamp(1.05rem,4.6vw,1.3rem);font-weight:600;line-height:1.15;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .pcard-note{margin-top:.45rem;font-size:.62rem;opacity:.9;line-height:1.35}
        .pcard-right{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem}
        .pcard-qr{background:#fff;border-radius:14px;padding:8px;box-shadow:0 8px 20px rgba(0,0,0,.18)}
        .pcard-qr canvas,.pcard-qr img{display:block;width:150px;height:150px}
        .pcard-help{font-size:.58rem;font-weight:700;letter-spacing:1.3px;opacity:.95}
        .section-title{display:flex;align-items:center;gap:.55rem;margin-bottom:.35rem}
        .section-title h2{font-family:var(--display);font-size:1.08rem;font-weight:700;letter-spacing:-.3px}
        .section-title .ico{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:#fff0ec;color:#e8590c;font-size:1rem;flex:none}
        .section-sub{font-size:.8rem;color:var(--muted);margin-bottom:1rem}
        .omaggi{display:flex;flex-direction:column;gap:.7rem;margin-bottom:2rem}
        .omaggio{position:relative;overflow:hidden;display:flex;align-items:center;gap:.85rem;border-radius:16px;padding:1rem;color:#fff;box-shadow:0 8px 22px rgba(27,20,48,.14);transition:transform .2s,box-shadow .2s;min-height:86px}
        .omaggio:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(27,20,48,.2)}
        .omaggio::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,26,.0),rgba(10,10,26,.0))}
        .omaggio > *{position:relative;z-index:2}
        .omaggio-bg{position:absolute;inset:0;z-index:0}
        .omaggio-logo{flex:none;width:46px;height:46px;border-radius:12px;background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.28)}
        .omaggio-logo.emoji{background:rgba(255,255,255,.2);border:none;display:flex;align-items:center;justify-content:center;font-size:1.5rem}
        .omaggio-info{flex:1;min-width:0}
        .omaggio-name{font-weight:700;font-size:.92rem;font-family:var(--display)}
        .omaggio-name b{font-size:1.08rem}
        .omaggio-from{font-size:.74rem;opacity:.92;margin-top:.18rem;display:block}
        .omaggio-btn{flex:none;display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);border-radius:11px;padding:.58rem .8rem;font-weight:700;font-size:.78rem;backdrop-filter:blur(4px)}
        .omaggio-btn svg{width:15px;height:15px}
        .empty-omaggi{background:var(--card);border:1px dashed var(--border);border-radius:16px;padding:1.5rem 1.4rem;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.55;margin-bottom:2rem}
        .empty-omaggi .emoji{font-size:1.6rem;display:block;margin-bottom:.4rem}
        .empty{background:var(--card);border:1px dashed var(--border);border-radius:var(--radius);padding:2rem 1.4rem;text-align:center;color:var(--muted);font-size:.88rem;line-height:1.5}
        .empty a{color:var(--primary);font-weight:700}
        [hidden]{display:none!important}
        .wallet-title{font-family:var(--display);font-weight:700;font-size:.95rem;margin-bottom:.8rem;display:flex;align-items:center;gap:.4rem}
        .wallet-count{background:var(--primary);color:#fff;font-size:.68rem;padding:.1rem .5rem;border-radius:6px}
        .wallet-list{display:flex;flex-direction:column;gap:.7rem;margin-bottom:1.5rem}
        .wallet-item{position:relative;overflow:hidden;display:flex;align-items:center;gap:.85rem;border-radius:16px;padding:.9rem 1rem;color:#fff;box-shadow:0 8px 22px rgba(27,20,48,.14);transition:transform .2s,box-shadow .2s;min-height:84px}
        .wallet-item:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(27,20,48,.2)}
        .wallet-item::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,26,.68),rgba(10,10,26,.22))}
        .wallet-item > *{position:relative;z-index:2}
        .wallet-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center}
        .wallet-logo{flex:none;width:46px;height:46px;border-radius:12px;background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.85);box-shadow:0 4px 10px rgba(0,0,0,.28)}
        .wallet-logo.emoji{background:rgba(255,255,255,.2);border:none;display:flex;align-items:center;justify-content:center;font-size:1.4rem}
        .wallet-info{flex:1;min-width:0}
        .wallet-name{font-weight:700;font-size:.92rem;font-family:var(--display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
        .wallet-pts{text-align:right;flex:none}
        .wallet-pts b{display:block;font-family:var(--display);font-size:1.25rem;font-weight:700;line-height:1}
        .wallet-pts span{font-size:.62rem;text-transform:uppercase;letter-spacing:.6px;opacity:.9}
        .wallet-open{flex:none;display:flex;align-items:center;gap:.3rem;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.5);border-radius:10px;padding:.5rem .75rem;font-size:.72rem;font-weight:700;color:#fff;backdrop-filter:blur(4px);white-space:nowrap;transition:background .2s}
        .wallet-open:hover{background:rgba(255,255,255,.3)}
        .wallet-open svg{width:13px;height:13px}
        .wallet-empty{background:var(--card);border:1px dashed var(--border);border-radius:16px;padding:2rem 1.4rem;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.55;margin-bottom:1.5rem}
        .wallet-empty-ico{font-size:2.2rem;display:block;margin-bottom:.5rem}
        .hist-list{display:flex;flex-direction:column;margin-bottom:1.5rem;background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px rgba(27,20,48,.05)}
        .hist-sub-title{font-size:.78rem;color:var(--muted);margin:0 0 .9rem}
        .hist-sub-title b{color:var(--text)}
        .hist-item{display:flex;align-items:center;gap:.8rem;padding:.75rem .95rem;background:var(--card)}
        .hist-item + .hist-item{border-top:1px solid rgba(22,17,48,.08)}
        .hist-logo{flex:none;width:40px;height:40px;border-radius:10px;background-size:cover;background-position:center;border:2px solid rgba(255,255,255,.9);box-shadow:0 2px 6px rgba(0,0,0,.12)}
        .hist-logo.emoji{background:#f5f3ff;border:none;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
        .hist-info{flex:1;min-width:0}
        .hist-name{font-weight:600;font-size:.85rem;display:block;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .hist-sub{font-size:.72rem;color:var(--muted);display:block;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .hist-chips{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:.22rem}
        .hist-pts{flex:none;font-weight:700;white-space:nowrap;border-radius:999px;padding:.22rem .55rem;font-size:.76rem}
        .hist-pts.pos{background:#e8f6ee;color:#12874a}
        .hist-pts.neg{background:#fdeeee;color:#c83a33}
        .pts-alert{position:fixed;top:12px;left:50%;transform:translateX(-50%) translateY(-160%);z-index:200;background:#0f0e2b;color:#fff;border-radius:16px;padding:.8rem 1.1rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 10px 28px rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.16);max-width:min(92vw,380px);opacity:0;pointer-events:none;transition:transform .25s cubic-bezier(.2,.9,.35,1.1),opacity .2s;will-change:transform}
        .pts-alert.show{transform:translateX(-50%) translateY(0);opacity:1}
        .pts-alert-ico{flex:none;width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;background:rgba(255,255,255,.14)}
        .pts-alert-txt{display:flex;flex-direction:column;gap:.1rem;line-height:1.25}
        .pts-alert-txt b{font-family:var(--display,inherit);font-size:.98rem}
        .pts-alert-txt small{font-size:.76rem;opacity:.85}
        .pts-alert.gain .pts-alert-ico{background:linear-gradient(140deg,#2fd17a,#1aa75f)}
        .pts-alert.redeem .pts-alert-ico{background:linear-gradient(140deg,#f0a64a,#e07c1f)}
        .pts-alert .pulse-dot{display:inline-block;animation:pulse-dot 1s infinite}
.pts-alert-logo{flex:none;height:20px;width:auto;margin-left:auto;opacity:.92}
        @keyframes pulse-dot{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
        .chip-pulse{animation:chip-pulse .8s ease}
        @keyframes chip-pulse{0%{transform:scale(1)}35%{transform:scale(1.2);background:#2fd17a;color:#fff;border-color:#2fd17a}100%{transform:scale(1)}}
        .premi-group{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:1rem;box-shadow:0 2px 8px rgba(27,20,48,.05)}
        .premi-list{display:flex;flex-direction:column}
        .premi-item{display:flex;align-items:center;gap:.85rem;padding:.75rem 1rem;background:#fff;color:var(--text);transition:background .2s}
        .premi-item:hover{background:rgba(255,255,255,.98)}
        .premi-item + .premi-item{border-top:1px solid rgba(22,17,48,.10)}
        .premi-emoji{width:42px;height:42px;border-radius:11px;background:#f5f3ff;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex:none}
        .premi-item:not(.locked) .premi-emoji{animation:premi-impatient 1.1s ease-in-out infinite;transform-origin:center}
        @keyframes premi-impatient{0%,100%{transform:translateY(0) rotate(0)}25%{transform:translateY(-4px) rotate(-8deg)}50%{transform:translateY(1px) rotate(0)}75%{transform:translateY(-3px) rotate(6deg)}}
        @media (prefers-reduced-motion:reduce){.premi-item:not(.locked) .premi-emoji,.tab-badge{animation:none}}
        .premi-info{flex:1;min-width:0}
        .premi-name{font-weight:700;font-size:.88rem;display:block}
        .premi-desc{font-size:.74rem;color:var(--muted);display:block;margin-top:.1rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
        .premi-cost{flex:none;background:#f1effd;color:var(--primary);border-radius:8px;padding:.3rem .55rem;font-size:.7rem;font-weight:700;white-space:nowrap}
        .premi-cost b{font-size:.9rem}
    
        .tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:80;display:flex;justify-content:space-around;align-items:center;background:#fff;border-top:1px solid var(--border);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom))}
        .tab{display:flex;flex-direction:column;align-items:center;gap:.18rem;padding:.4rem .85rem;border-radius:12px;color:var(--muted);font-size:.6rem;font-weight:700;text-transform:uppercase;letter-spacing:.6px;transition:all .2s;position:relative}
        .tab svg{width:22px;height:22px}
        .brand-tab-logo{width:90px;height:auto;object-fit:contain}
        .tab.on{color:var(--primary);background:#efecfd}
        .tab-badge{position:absolute;top:.1rem;right:.45rem;min-width:16px;height:16px;border-radius:8px;background:#e8590c;color:#fff;font-size:.56rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 .25rem;animation:badge-pulse 1.8s ease-in-out infinite}
        @keyframes badge-pulse{0%,55%,100%{transform:scale(1)}65%{transform:scale(1.28)}75%{transform:scale(.94)}85%{transform:scale(1.12)}}
        .pcard-right{cursor:pointer}
        .pcard-zoom{font-size:.6rem;font-weight:700;letter-spacing:.4px;opacity:.95;border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:.22rem .5rem;background:rgba(255,255,255,.12)}
        .hub .qr-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.4rem;background:rgba(16,12,34,.72);opacity:0;pointer-events:none;transition:opacity .2s}
        .hub .qr-modal.open{opacity:1;pointer-events:auto}
        .qr-modal-card{position:relative;background:var(--card);border-radius:24px;padding:1.6rem 1.4rem 1.5rem;width:100%;max-width:340px;text-align:center;box-shadow:0 30px 70px rgba(16,12,34,.5);transform:translateY(14px) scale(.96);transition:transform .25s}
        .hub .qr-modal.open .qr-modal-card{transform:none}
        .qr-modal-close{position:absolute;top:.7rem;right:.8rem;width:34px;height:34px;border:none;border-radius:10px;background:#f1f0fb;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;transition:all .2s}
        .qr-modal-close:hover{background:#e7e3fc;color:var(--primary)}
        .qr-modal-qr{width:min(256px,80vw);height:min(256px,80vw);margin:0 auto .95rem;border:1px solid var(--border);border-radius:16px;padding:10px;background:#fff}
        .qr-modal-qr canvas,.qr-modal-qr img{display:block;width:100%;height:100%}
        .qr-modal-title{font-family:var(--display);font-weight:700;font-size:1.02rem}
        .qr-modal-sub{font-size:.8rem;color:var(--muted);margin:.35rem 0 0;line-height:1.45}
        @media(max-width:380px){
            .pcard-qr canvas,.pcard-qr img{width:96px;height:96px}
            .pcard-inner{padding:1.1rem 1rem;gap:.8rem}
            .omaggio-btn{padding:.55rem .75rem;font-size:.75rem}
            .wallet-open{padding:.5rem .7rem}
        }
    .premi-group{position:relative;overflow:hidden;background:var(--card);border:1px solid var(--border);border-radius:16px;margin-bottom:1rem;box-shadow:0 2px 8px rgba(27,20,48,.05)}
    .premi-summary{position:relative;width:100%;display:block;padding:0;border:none;cursor:pointer;text-align:left;font-family:inherit;color:#fff;overflow:hidden;min-height:71px;transition:min-height .32s cubic-bezier(.2,.7,.3,1),height .32s cubic-bezier(.2,.7,.3,1)}
    .premi-summary-bg{position:absolute;inset:0;z-index:0;background-size:cover;background-position:center bottom;transition:opacity .32s ease}
    .premi-summary::after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(100deg,rgba(9,8,24,.30),rgba(9,8,24,.12))}
    .premi-summary-in{position:relative;z-index:2;display:flex;align-items:center;gap:.7rem;width:100%;height:100%;padding:.85rem .95rem}
    .premi-summary-logo{flex:none;width:44px;height:44px;border-radius:12px;background-size:cover;background-position:center;box-shadow:0 3px 10px rgba(0,0,0,.25);transition:width .32s cubic-bezier(.2,.7,.3,1),height .32s cubic-bezier(.2,.7,.3,1),border-radius .32s cubic-bezier(.2,.7,.3,1),font-size .32s cubic-bezier(.2,.7,.3,1),box-shadow .32s cubic-bezier(.2,.7,.3,1)}
    .premi-summary-logo.emoji{background:rgba(255,255,255,.28);border:none;display:flex;align-items:center;justify-content:center;font-size:1.3rem;box-shadow:0 3px 12px rgba(0,0,0,.3)}
    .premi-summary-main{flex:1;min-width:0;display:flex;flex-direction:column}
    .premi-summary-name{font-family:var(--display);font-weight:700;font-size:.98rem;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(9,8,24,.75),0 2px 10px rgba(9,8,24,.5)}
    .premi-summary-sub{font-size:.74rem;color:rgba(255,255,255,.88);display:block;margin-top:.12rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 3px rgba(9,8,24,.75),0 2px 10px rgba(9,8,24,.5)}
    .premi-summary-count{flex:none;background:rgba(9,8,24,.42);border:1px solid rgba(255,255,255,.55);border-radius:999px;padding:.3rem .7rem;font-size:.76rem;font-weight:700;white-space:nowrap;text-shadow:0 1px 3px rgba(9,8,24,.6)}
    .premi-summary-arrow{flex:none;display:flex;color:#fff;opacity:.9;transition:transform .3s}
    .premi-summary-arrow svg{width:18px;height:18px;transition:width .32s ease,height .32s ease}
    .premi-group.open .premi-summary-arrow{transform:rotate(180deg)}

    /* Premi aperto: il riquadro dell'esercente cresce a 250px e il logo si ingrandisce */
    .premi-group.open .premi-summary{min-height:250px}

    .premi-group.open .premi-summary-logo{width:120px;height:120px;border-radius:20px;box-shadow:0 8px 24px rgba(0,0,0,.35)}
    .premi-group.open .premi-summary-logo.emoji{font-size:2.2rem}
    .premi-group.open .premi-summary-name{font-size:1.22rem}
    .premi-group.open .premi-summary-sub{font-size:.86rem}
    .premi-group.open .premi-summary-count{font-size:.86rem;padding:.4rem .85rem}
    .premi-group.open .premi-summary-arrow svg{width:22px;height:22px}
    .premi-body{position:relative;z-index:1;max-height:0;overflow:hidden;transition:max-height .3s ease-out;background:var(--card)}
    .premi-group.open .premi-body{border-top:1px solid rgba(22,17,48,.08)}
        .next-goal{background:linear-gradient(160deg,#fffaf0,#fff);border:1px solid var(--border);border-radius:14px;padding:.8rem .9rem;margin:.85rem .85rem .25rem}
        .next-goal-head{display:flex;align-items:center;justify-content:space-between;font-size:.62rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--muted)}
        .next-goal-cost{color:#a35f00;background:rgba(254,169,24,.16);padding:.14rem .5rem;border-radius:999px}
        .next-goal-name{display:block;font-family:var(--display);font-weight:700;font-size:.95rem;margin:.4rem 0 .5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .next-goal-bar{height:9px;background:#efe9dd;border-radius:999px;overflow:hidden}
        .next-goal-fill{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#ffd54a,#fea918 60%,#ff5a5e);transition:width .5s ease}
        .next-goal-foot{display:flex;justify-content:space-between;font-size:.7rem;color:#7a746b;margin-top:.4rem}
        .next-goal-foot strong{color:#ff5a5e}
        /* Storico movimenti (tab Card) */
        .mov-list{display:flex;flex-direction:column;gap:.55rem}
        .mov-item{border:1px solid var(--border);border-radius:14px;background:var(--card);padding:.65rem .85rem;display:flex;align-items:center;gap:.75rem;box-shadow:0 1px 4px rgba(27,20,48,.04)}
        .mov-logo{flex:none;width:38px;height:38px;border-radius:11px;background-size:cover;background-position:center;border:1px solid var(--border)}
        .mov-logo.emoji{background:#f3efe6;display:flex;align-items:center;justify-content:center;font-size:1.15rem;border:none}
        .mov-main{flex:1;min-width:0}
        .mov-name{display:block;font-family:var(--display);font-weight:600;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .mov-sub{display:block;font-size:.68rem;color:var(--muted);margin-top:.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
        .mov-pts{flex:none;border-radius:999px;padding:.28rem .7rem;font-size:.86rem;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
        .mov-pts.credit{background:rgba(0,184,148,.1);border:1px solid rgba(0,184,148,.28);color:#00845f}
        .mov-pts.debit{background:rgba(214,48,49,.08);border:1px solid rgba(214,48,49,.22);color:#b3261f}
    .premi-item.locked{opacity:.62;pointer-events:none}
    .premi-item.locked:hover{background:rgba(255,255,255,.88)}
    .premi-lock{flex:none;background:#ecebeb;color:#6f6a6a;border-radius:8px;padding:.3rem .55rem;font-size:.68rem;font-weight:700;white-space:nowrap}
    .premi-lock b{font-size:.85rem}
    .premi-none{padding:.9rem 1rem;background:#fff;font-size:.8rem;color:var(--muted)}
    .premi-list{position:relative;z-index:1}
    
/* =========================================== */
/* === AUTH PAGES (login/register)          === */
/* =========================================== */
.auth-page{display:flex;align-items:center;justify-content:center;padding:1.5rem}
.auth-page a{text-decoration:none}
.auth-back{position:fixed;top:1.1rem;left:1.2rem;z-index:5}
.auth-back a{font-size:.82rem;font-weight:600;color:var(--muted);text-decoration:none}
.auth-back a:hover{color:var(--primary-ink)}
.auth-page .box{background:var(--card);border:1px solid var(--border);border-radius:22px;padding:2.4rem 1.8rem;width:100%;max-width:400px;box-shadow:0 20px 50px rgba(23,19,12,.10)}
.auth-page .brand{display:flex;align-items:center;justify-content:center;gap:.5rem;margin-bottom:1.6rem}
.auth-page .brand img{width:130px;height:50px;object-fit:contain}
.auth-page .brand span{font-family:var(--display);font-weight:700;font-size:1.1rem}
.auth-page h1{font-family:var(--display);font-size:1.4rem;font-weight:700;text-align:center}
.auth-page .sub{color:var(--muted);font-size:.85rem;text-align:center;margin:.4rem 0 1.5rem;line-height:1.5}
.auth-err{background:#fef3f2;border:1px solid #f5b1a9;color:#c92a2a;font-size:.82rem;padding:.6rem 1rem;border-radius:10px;margin-bottom:1rem}
.auth-ok{background:#e6f7f1;border:1px solid #a9e0ce;color:#0ca678;font-size:.82rem;padding:.6rem 1rem;border-radius:10px;margin-bottom:1rem}
.auth-page .field{margin-bottom:1rem}
.auth-page .field label{display:block;font-size:.72rem;font-weight:600;color:var(--muted);margin-bottom:.35rem;text-transform:uppercase;letter-spacing:.6px}
.auth-page .field input[type=text],.auth-page .field input[type=email],.auth-page .field input[type=password],.auth-page .field input{width:100%;padding:.8rem 1rem;border-radius:12px;border:1px solid var(--border);background:#fbf8f2;color:var(--text);font-family:var(--body);font-size:.95rem;transition:border-color .2s,box-shadow .2s}
.auth-page .field input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(254,169,24,.18)}
.auth-page .check{display:flex;gap:.5rem;align-items:flex-start;font-size:.8rem;color:var(--muted);margin:.2rem 0 1rem;line-height:1.4}
.auth-page .check input{margin-top:.15rem;flex:none}
.auth-page .check a{color:var(--primary-ink);font-weight:600}
.auth-page .btn{display:block;width:100%;padding:.9rem;border:none;border-radius:13px;font-family:var(--body);font-weight:700;font-size:.95rem;cursor:pointer;transition:all .2s;background:linear-gradient(135deg,#fea918,#ff5a5e);color:#fff}
.auth-page .btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(254,169,24,.32)}
.auth-page .foot{text-align:center;font-size:.82rem;color:var(--muted);margin-top:1.3rem}
.auth-page .foot a{color:var(--primary-ink);font-weight:600}
.auth-page .legal{position:absolute;bottom:1.2rem;left:0;right:0;text-align:center;font-size:.72rem;color:var(--muted)}
.auth-page .legal a{color:var(--muted);text-decoration:underline}
/* =========================================== */
/* === LANDING (marketing pages)             === */
body.landing{--radius:26px}
html{scroll-behavior:smooth}
body.landing{font-family:var(--body);font-size:1.08rem;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--bg)}

/* ---------- Dark blobs behind hero ---------- */
.hero-bg{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.hero-bg .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.55;will-change:transform}
.hero-bg .g1{width:660px;height:660px;left:-140px;top:-180px;background:radial-gradient(circle,#fea918 0%,transparent 60%)}
.hero-bg .g2{width:560px;height:560px;right:-120px;top:10%;background:radial-gradient(circle,#ff5a5e 0%,transparent 60%)}
.hero-bg .g3{width:460px;height:460px;left:38%;bottom:-160px;background:radial-gradient(circle,#ffce6b 0%,transparent 62%)}
.hero-dots-bg{position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.10) 1px,transparent 1px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);mask-image:radial-gradient(ellipse 70% 60% at 50% 40%,#000 20%,transparent 75%);will-change:transform}

/* Generic orbs used by subpages */
.orbs{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.orb{position:absolute;border-radius:50%}
.orb-1{width:600px;height:600px;background:radial-gradient(circle,rgba(254,169,24,.16) 0%,transparent 70%);top:-10%;right:-5%;animation:f1 8s ease-in-out infinite}
.orb-2{width:500px;height:500px;background:radial-gradient(circle,rgba(255,90,94,.14) 0%,transparent 70%);bottom:10%;left:-8%;animation:f2 9s ease-in-out infinite}
.orb-3{width:350px;height:350px;background:radial-gradient(circle,rgba(254,199,80,.12) 0%,transparent 70%);top:50%;left:50%;animation:f3 7s ease-in-out infinite}
@keyframes f1{0%,100%{transform:translate(0,0)}50%{transform:translate(40px,-30px)}}
@keyframes f2{0%,100%{transform:translate(0,0)}50%{transform:translate(-35px,25px)}}
@keyframes f3{0%,100%{transform:translate(0,0)}50%{transform:translate(25px,35px)}}

/* ---------- Nav ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:100;padding:.85rem 1.5rem;transition:all .35s}
.nav.scrolled{background:rgba(255,255,255,.82);backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid rgba(254,169,24,.08);box-shadow:0 1px 24px rgba(23,19,12,.06)}
.nav-inner{max-width:1120px;margin:0 auto;display:flex;align-items:center;justify-content:space-between}
.nav-brand{font-family:var(--display);font-size:1.2rem;font-weight:700;letter-spacing:-.3px;color:#fff;display:flex;align-items:center;gap:.55rem;text-decoration:none;line-height:1}
.nav-logo{height:26px;width:auto;object-fit:contain;display:block;filter:brightness(0) invert(1);transition:filter .3s}
.nav-links{display:flex;gap:.2rem;align-items:center}
.nav-links a{padding:.5rem .9rem;border-radius:999px;font-size:.95rem;font-weight:500;text-decoration:none;color:rgba(255,255,255,.78);transition:all .2s;line-height:1}
.nav-links a:hover{background:rgba(255,255,255,.12);color:#fff}
.nav-cta{background:var(--violet)!important;color:#fff!important;font-weight:700!important;box-shadow:0 4px 18px rgba(254,169,24,.35)}
.nav-cta:hover{background:var(--violet-2)!important;transform:translateY(-1px);color:#fff!important}
.nav.scrolled .nav-brand{color:var(--ink)}
.nav.scrolled .nav-links a{color:var(--muted)}
.nav.scrolled .nav-links a:hover{background:rgba(254,169,24,.08);color:var(--violet)}
.nav.scrolled .nav-logo{filter:none}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:7.5rem 1.5rem 4.5rem;color:#fff;background:linear-gradient(165deg,#141009 0%,#1c150c 45%,#251a0e 100%);overflow:hidden}
.hero>*{position:relative;z-index:1}

.chip{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.1);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.16);border-radius:999px;padding:.35rem 1rem;font-size:.82rem;font-weight:600;color:rgba(255,255,255,.85);margin-bottom:1.6rem;line-height:1}
.chip-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(254,199,80,.25);animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 3px rgba(254,199,80,.25)}50%{box-shadow:0 0 0 9px rgba(254,199,80,0)}}
@keyframes pop{from{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}

.hero h1{font-family:var(--display);font-size:clamp(3rem,9vw,5.5rem);font-weight:700;letter-spacing:-2px;line-height:1.02;margin-bottom:1.3rem}
.hero h1 .line{display:block}
.hero h1 .hl{background:linear-gradient(120deg,var(--lime),#ff8a5c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hero-sub{font-size:1.22rem;font-weight:400;color:rgba(255,255,255,.8);max-width:600px;line-height:1.6;margin-bottom:2.2rem}
.hero-ctas{display:flex;gap:.85rem;flex-wrap:wrap;justify-content:center;margin-bottom:2.6rem}

.landing .btn{display:inline-flex;align-items:center;justify-content:center;gap:.55rem;padding:.85rem 1.7rem;border-radius:999px;font-size:1rem;font-weight:600;text-decoration:none;font-family:var(--body);transition:all .25s;-webkit-tap-highlight-color:transparent;cursor:pointer;line-height:1}
.landing .btn i{font-size:.9rem}
.landing .btn:active{transform:scale(.97)}
.landing .btn-primary{background:var(--violet);color:#fff;box-shadow:0 6px 26px rgba(254,169,24,.4)}
.landing .btn-primary:hover{background:var(--violet-2);box-shadow:0 10px 34px rgba(254,169,24,.5);transform:translateY(-2px)}
.landing .btn-ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.22);backdrop-filter:blur(8px)}
.landing .btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.4);transform:translateY(-2px)}
.landing .btn-white{background:#fff;color:var(--violet);box-shadow:0 6px 24px rgba(0,0,0,.18)}
.landing .btn-white:hover{transform:translateY(-2px);box-shadow:0 10px 32px rgba(0,0,0,.24)}

/* ---------- punty card ---------- */
.hero-visual{position:relative;margin-bottom:2.6rem}
.hero-card{position:relative;width:min(360px,86vw);padding:1.6rem 1.7rem 1.5rem;border-radius:30px;background:linear-gradient(140deg,rgba(255,255,255,.16),rgba(255,255,255,.05));border:1.5px solid rgba(255,255,255,.22);backdrop-filter:blur(14px);box-shadow:0 30px 70px rgba(0,0,0,.4);overflow:hidden;transform-style:preserve-3d;transition:transform .3s ease-out;will-change:transform}
.hero-card::before{content:'';position:absolute;inset:auto -30% -60% -30%;height:70%;background:radial-gradient(circle at 30% 0%,rgba(254,199,80,.28),transparent 60%),radial-gradient(circle at 80% 0%,rgba(255,90,94,.3),transparent 60%);filter:blur(30px)}
.card-top{display:flex;align-items:center;gap:.6rem;margin-bottom:1.5rem;position:relative}
.card-logo{height:22px;width:auto;filter:brightness(0) invert(1)}
.card-chip{margin-left:auto;font-size:.95rem;font-weight:400;letter-spacing:1px;background:rgba(254,199,80,.18);color:var(--lime);border:1px solid rgba(254,199,80,.35);padding:.15rem .7rem;border-radius:999px;line-height:1.4}
.card-dots{display:flex;gap:.45rem;position:relative;margin-bottom:1.4rem;flex-wrap:wrap}
.card-dots i{width:34px;height:34px;border-radius:50%;display:inline-block}
.card-dots i.on{background:linear-gradient(135deg,var(--lime),#ffb163);box-shadow:0 0 16px rgba(254,199,80,.55);animation:pop .4s backwards}
.card-dots i.off{background:rgba(255,255,255,.14);border:1.5px dashed rgba(255,255,255,.3)}
.card-pts{display:flex;align-items:baseline;gap:.6rem;position:relative}
.card-pts b{font-family:var(--display);font-size:3.4rem;font-weight:700;letter-spacing:-2px;line-height:1}
.card-pts span{font-weight:700;letter-spacing:4px;font-size:.9rem;color:rgba(255,255,255,.75);line-height:1}
.card-foot{position:relative;margin-top:.35rem;font-size:.85rem;color:rgba(255,255,255,.6);letter-spacing:.4px}
@keyframes pop{from{transform:scale(0)}70%{transform:scale(1.25)}to{transform:scale(1)}}
.card-dots i.on:nth-child(1){animation-delay:.6s}.card-dots i.on:nth-child(2){animation-delay:.68s}.card-dots i.on:nth-child(3){animation-delay:.76s}.card-dots i.on:nth-child(4){animation-delay:.84s}.card-dots i.on:nth-child(5){animation-delay:.92s}.card-dots i.on:nth-child(6){animation-delay:1s}.card-dots i.on:nth-child(7){animation-delay:1.08s}

.badge-move{position:absolute;will-change:transform}
.badge{display:inline-flex;align-items:center;gap:.5rem;padding:.45rem 1.1rem;border-radius:999px;font-size:.92rem;font-weight:600;letter-spacing:.3px;white-space:nowrap;line-height:1;box-shadow:0 10px 30px rgba(0,0,0,.35);animation:float 6s ease-in-out infinite}
.badge i{font-size:.85rem}
.bm1{top:-14px;left:-30px}.bm1 .badge{background:var(--lime);color:#3a2400}
.bm2{top:34px;right:-52px}.bm2 .badge{background:var(--azure);color:#3d0808;animation-delay:1s}
.bm3{bottom:-8px;left:-44px}.bm3 .badge{background:var(--coral);color:#3d0808;animation-delay:1.8s}
.bm4{bottom:52px;right:-34px}.bm4 .badge{background:#fff;color:var(--violet);animation-delay:2.6s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

.hero-stats{display:flex;gap:2rem;justify-content:center;flex-wrap:wrap;margin-top:.4rem}
.hero-stat{display:flex;flex-direction:column;gap:.05rem}
.hero-stat b{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1;color:#fff}
.hero-stat span{font-size:.9rem;color:rgba(255,255,255,.6)}
@media(max-width:700px){.badge-move{display:none}}
@media(max-width:520px){.hero-stats{gap:1.2rem}.hero-stat b{font-size:1.4rem}}

/* ---------- Wave divider (kept for subpages) ---------- */
.wave{position:relative;z-index:2;margin-top:-2px}
.wave svg{display:block;width:100%;height:auto}

/* ---------- Sections ---------- */
.section{padding:6.5rem 1.5rem;position:relative;z-index:1}
.section-center{text-align:center;max-width:720px;margin:0 auto}
.section-alt{background:#fff}
.cta-final,.cta-section{background:linear-gradient(160deg,var(--violet-2),var(--violet));border-radius:0;color:#fff}
.cta-final .big,.cta-section .big{color:#fff}
.cta-final .big .hl,.cta-section .big .hl{background:linear-gradient(120deg,var(--lime),#ff8a5c);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.cta-final .sub,.cta-section .landing .sub{color:rgba(255,255,255,.8)}
.cta-final .btn-ghost,.cta-section .landing .btn-ghost{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3)}

.big{font-family:var(--display);font-size:clamp(2rem,4.5vw,3rem);font-weight:700;letter-spacing:-1px;line-height:1.1;margin-bottom:1.05rem}
.big .hl{background:linear-gradient(120deg,var(--violet),var(--azure));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.landing .sub{font-size:1.12rem;color:var(--muted);line-height:1.65;margin-bottom:.2rem}

.mini-chip{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid rgba(254,169,24,.14);border-radius:999px;padding:.35rem 1rem;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:1.4px;color:var(--violet);margin-bottom:1.35rem;line-height:1;box-shadow:0 4px 16px rgba(254,169,24,.08)}

/* ---------- Pills (circuito) ---------- */
.pill-row{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:center;margin-top:2rem;max-width:760px;margin-left:auto;margin-right:auto}
.pill{display:inline-flex;align-items:center;gap:.5rem;background:#fff;border:1px solid rgba(254,169,24,.1);border-radius:999px;padding:.55rem 1.3rem;font-size:.98rem;font-weight:500;color:var(--ink);line-height:1;box-shadow:0 4px 14px rgba(23,19,12,.05);transition:all .25s;white-space:nowrap}
.pill i{font-size:.95rem;color:var(--violet)}
.pill:hover{border-color:var(--violet);transform:translateY(-3px);box-shadow:0 10px 24px rgba(254,169,24,.16)}
.pill.dark{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.16);color:rgba(255,255,255,.85)}
.pill.dark i{color:var(--lime)}

/* ---------- Feature tiles ---------- */
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:980px;margin:3rem auto 0}
.feat-card{background:#fff;border:1px solid rgba(254,169,24,.1);border-radius:var(--radius);padding:1.7rem 1.5rem;text-align:left;transition:all .3s;box-shadow:0 4px 18px rgba(23,19,12,.05)}
.feat-card:hover{border-color:rgba(254,169,24,.3);transform:translateY(-5px);box-shadow:0 18px 40px rgba(254,169,24,.14)}
.feat-icon{width:58px;height:58px;border-radius:17px;background:linear-gradient(135deg,var(--violet),var(--azure));display:flex;align-items:center;justify-content:center;margin-bottom:1.1rem;box-shadow:0 6px 18px rgba(254,169,24,.28)}
.feat-icon i{font-size:1.7rem;color:#fff}
.feat-title{font-family:var(--display);font-weight:700;font-size:1.15rem;line-height:1;margin-bottom:.45rem}
.feat-text{font-size:.95rem;color:var(--muted);line-height:1.6}
.feat-card.lime .feat-icon{background:linear-gradient(135deg,var(--lime),#ffb163);box-shadow:0 6px 18px rgba(254,199,80,.35)}
.feat-card.lime .feat-icon i{color:#3a2400}
.feat-card.coral .feat-icon{background:linear-gradient(135deg,var(--coral),#ff9f6b);box-shadow:0 6px 18px rgba(255,107,107,.32)}
@media(max-width:820px){.feat-grid{grid-template-columns:1fr}.feat-card{padding:1.4rem}}

/* ---------- Steps ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;max-width:980px;margin:3rem auto 0}
.step-card{position:relative;background:#fff;border:1px solid rgba(254,169,24,.1);border-radius:var(--radius);padding:1.6rem 1.3rem;text-align:left;transition:all .3s;box-shadow:0 4px 18px rgba(23,19,12,.05)}
.step-card:hover{border-color:rgba(254,169,24,.3);transform:translateY(-5px);box-shadow:0 18px 40px rgba(254,169,24,.14)}
.step-num{position:absolute;top:1.15rem;right:1.25rem;font-family:var(--display);font-weight:700;font-size:1.6rem;color:rgba(254,169,24,.14);line-height:1}
.step-icon{width:56px;height:56px;border-radius:16px;background:linear-gradient(135deg,var(--violet),var(--azure));display:flex;align-items:center;justify-content:center;margin-bottom:1.05rem;box-shadow:0 6px 18px rgba(254,169,24,.28)}
.step-icon i{font-size:1.7rem;color:#fff}
.step-title{font-family:var(--display);font-weight:700;font-size:1.05rem;line-height:1;margin-bottom:.35rem}
.step-text{font-size:.9rem;color:var(--muted);line-height:1.6}
@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Duo cards ---------- */
.duo-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;max-width:920px;margin:3rem auto 0}
.duo-card{border-radius:28px;padding:2rem 1.9rem;text-align:left;position:relative;overflow:hidden;transition:all .3s;display:flex;flex-direction:column;gap:1.05rem}
.duo-card:hover{transform:translateY(-6px)}
.duo-card.client{background:linear-gradient(140deg,var(--violet-2),var(--violet) 42%,var(--azure));color:#fff;box-shadow:0 18px 48px rgba(254,169,24,.34)}
.duo-card.merchant{background:#fff;border:1px solid rgba(254,169,24,.12);box-shadow:0 12px 36px rgba(23,19,12,.06)}
.duo-card>*{position:relative;z-index:1}
.duo-icon{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.16);margin-bottom:.2rem}
.duo-icon i{font-size:1.9rem;color:#fff}
.duo-card.merchant .duo-icon{background:rgba(254,169,24,.12)}
.duo-card.merchant .duo-icon i{color:var(--violet)}
.duo-title{font-family:var(--display);font-size:1.5rem;font-weight:700;line-height:1}
.duo-card.merchant .duo-title{color:var(--ink)}
.duo-desc{font-size:.98rem;line-height:1.55;color:rgba(255,255,255,.85)}
.duo-card.merchant .duo-desc{color:var(--muted)}
.duo-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.95rem}
.duo-list li{display:flex;align-items:center;gap:.6rem;line-height:1.4}
.duo-list i{font-size:.9rem;flex-shrink:0}
.duo-card.client .duo-list i{color:var(--lime)}
.duo-card.merchant .duo-list i{color:#4ade80}
.duo-cta{margin-top:auto}.duo-card.client .duo-cta .landing .btn{background:#fff;color:var(--violet)}
.duo-card.merchant .duo-cta .landing .btn{background:var(--violet);color:#fff}
@media(max-width:700px){.duo-grid{grid-template-columns:1fr}}

/* ---------- Pricing (subpage) ---------- */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;max-width:980px;margin:3rem auto 0}
.price-card{position:relative;background:#fff;border:1px solid rgba(254,169,24,.12);border-radius:26px;padding:1.8rem 1.6rem;transition:all .3s;box-shadow:0 6px 22px rgba(23,19,12,.05)}
.price-card:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(254,169,24,.16)}
.price-card.yearly{border-color:var(--violet);box-shadow:0 0 0 1px var(--violet),0 18px 44px rgba(254,169,24,.2)}
.price-badge{position:absolute;top:1rem;right:1rem;background:var(--lime);color:#3a2400;font-size:.95rem;font-weight:400;padding:.05rem .7rem;border-radius:999px;line-height:1.5}
.price-label{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:1.4px;color:var(--violet);margin-bottom:.9rem}
.price-amount{font-family:var(--display);font-size:2.2rem;font-weight:700;letter-spacing:-1px;color:var(--ink);margin-bottom:.3rem;line-height:1}
.price-amount span{font-size:.95rem;font-weight:500;color:var(--muted)}
.price-period{font-size:.9rem;color:var(--muted);margin-bottom:1.2rem}
.price-list{list-style:none;display:flex;flex-direction:column;gap:.5rem;font-size:.92rem}
.price-list li{display:flex;align-items:center;gap:.55rem;color:var(--muted);line-height:1.4}
.price-list i{font-size:.85rem;color:#4ade80;flex-shrink:0}
.price-cta{display:block;text-align:center;padding:.72rem;border-radius:999px;background:rgba(254,169,24,.08);color:var(--violet);font-weight:600;font-size:.95rem;text-decoration:none;transition:all .25s;line-height:1}
.price-cta:hover{background:var(--violet);color:#fff}
@media(max-width:820px){.pricing-grid{grid-template-columns:1fr}}

/* ---------- Contact form (subpage) ---------- */
.contact-form{max-width:520px;margin:2rem auto 0;background:#fff;border:1px solid rgba(255,255,255,.16);border-radius:26px;padding:1.8rem;display:grid;gap:1rem;box-shadow:0 20px 50px rgba(0,0,0,.18)}
.contact-form input,.contact-form textarea{width:100%;padding:.9rem 1.1rem;border-radius:14px;border:1.5px solid rgba(254,169,24,.16);font-family:var(--body);font-size:1rem;color:var(--ink);transition:border-color .2s;background:#fff}
.contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--violet)}
.contact-form textarea{min-height:110px;resize:vertical}

/* ---------- Center CTA ---------- */
.center-cta{display:flex;gap:.85rem;justify-content:center;flex-wrap:wrap;margin-top:2.6rem}
.center-cta .landing .btn{min-width:230px}

/* ---------- Footer ---------- */
.footer{padding:2rem 1.5rem;background:#14100a;text-align:center;position:relative;z-index:1}
.footer-brand{font-family:var(--display);font-size:1.05rem;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:.7rem;letter-spacing:-.2px;line-height:1}
.footer-links{display:flex;align-items:center;justify-content:center;gap:.6rem;font-size:.9rem}
.footer-links a{color:rgba(255,255,255,.34);text-decoration:none;transition:color .2s;line-height:1.3}
.footer-links a:hover{color:rgba(255,255,255,.7)}
.footer-links span{color:rgba(255,255,255,.14)}

/* ---------- Tutorial ---------- */
.tutorial-stage{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start;max-width:980px;margin:3rem auto 0}
.tutorial-scene{position:relative;display:flex;align-items:center;justify-content:center;min-height:640px;will-change:transform}
.scene-card{position:relative;width:min(340px,86%);padding:1.5rem;border-radius:28px;background:linear-gradient(140deg,#ff5a5e 0%,#fea918 100%);box-shadow:0 30px 70px rgba(215,132,0,.35);color:#fff;text-align:left}
.scene-head{display:flex;align-items:center;gap:.55rem;margin-bottom:1.1rem}
.scene-logo{height:16px;width:auto;filter:brightness(0) invert(1)}
.scene-id{margin-left:auto;font-size:.85rem;color:rgba(255,255,255,.75);letter-spacing:.5px;line-height:1}
.scene-qr{position:relative;height:auto;background:#fff;border-radius:16px;padding:12px;margin-bottom:1.1rem;transition:box-shadow .3s}
.scene-qr svg{display:block;width:100%;height:auto}
.scene-beam{position:absolute;left:-6%;right:-6%;top:50%;height:4px;border-radius:99px;background:linear-gradient(90deg,transparent,var(--coral),var(--lime),var(--azure),transparent);box-shadow:0 0 18px rgba(254,199,80,.9),0 0 30px rgba(255,107,107,.5);opacity:0;pointer-events:none}
.scene-dots{display:flex;gap:6px;margin-bottom:1rem;flex-wrap:wrap}
.scene-dots i{width:22px;height:22px;border-radius:50%}
.scene-dots i.on{background:#fff;box-shadow:0 0 12px rgba(255,255,255,.7);animation:pop .35s backwards}
.scene-dots i.off{background:rgba(255,255,255,.25);border:1.5px dashed rgba(255,255,255,.4)}
.scene-pts{display:flex;align-items:baseline;gap:.5rem}
.scene-pts b{font-family:var(--display);font-weight:700;font-size:2.2rem;line-height:1}
.scene-pts span{font-weight:700;letter-spacing:3px;font-size:.85rem;color:rgba(255,255,255,.8);line-height:1}
.scene-badge{position:absolute;display:inline-flex;align-items:center;gap:.4rem;padding:.4rem .9rem;border-radius:999px;font-size:.88rem;font-weight:600;letter-spacing:.3px;line-height:1;box-shadow:0 12px 30px rgba(0,0,0,.3);white-space:nowrap;opacity:0}
.scene-badge i{font-size:.8rem}
.scene-badge.add{top:10%;right:-10px;background:var(--lime);color:#3a2400}
.scene-badge.done{bottom:8%;left:-10px;background:#fff;color:var(--violet)}

.tutorial-steps{display:flex;flex-direction:column;gap:1.2rem;padding-top:1rem}
.tstep{display:flex;gap:1.1rem;align-items:flex-start;padding:1.3rem 1.4rem;border-radius:22px;background:#fff;border:1px solid rgba(254,169,24,.1);box-shadow:0 4px 18px rgba(23,19,12,.05);transition:all .45s;opacity:.5;transform:scale(.97)}
.tstep.active{opacity:1;transform:scale(1);border-color:var(--violet);box-shadow:0 16px 40px rgba(254,169,24,.16)}
.tstep-num{font-family:var(--display);font-weight:700;font-size:1.4rem;line-height:1;width:44px;height:44px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:rgba(254,169,24,.08);color:var(--violet);flex-shrink:0;transition:all .45s}
.tstep.active .tstep-num{background:var(--violet);color:#fff}
.tstep-title{font-family:var(--display);font-weight:700;font-size:1.1rem;line-height:1;margin-bottom:.3rem}
.tstep-text{font-size:.92rem;color:var(--muted);line-height:1.55}
@media(max-width:859px){
    .tutorial-stage{grid-template-columns:1fr;gap:2rem}
    .tutorial-scene{min-height:auto;padding:1.5rem 0}
    .tstep{opacity:1}
}

/* ---------- Scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(40px);transition:opacity .7s cubic-bezier(.4,0,.2,1),transform .7s cubic-bezier(.4,0,.2,1)}
.reveal.vis{opacity:1;transform:translateY(0)}
.reveal-s{opacity:0;transform:scale(.95);transition:opacity .6s cubic-bezier(.4,0,.2,1),transform .6s cubic-bezier(.4,0,.2,1)}
.reveal-s.vis{opacity:1;transform:scale(1)}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
}

/* ======================================================================
   Da qui in poi ci sono le regole che stavano in _shared/style.css.
   ======================================================================
   Sono quelle che _shared non aveva uguali a quelle qui sopra: o le
   correggeva, o riguardano l'area gestore. Le regole identiche sono
   state tolte, perche' ripeterle non cambiava niente.

   ATTENZIONE ALL'ORDINE: queste devono restare IN FONDO. Prima il
   gestore caricava _shared/style.css dopo css/style.css e cosi' le
   sovrascriveva. Spostarle in mezzo annulla quegli override.
   Per lo stesso motivo alcune regole qui sotto aggiungono properties a
   un blocco piu' in alto invece di sostituirlo: vedi body.landing.
   ====================================================================== */



/* Visibile solo agli screen reader: mantiene il testo nel documento senza
   occupare spazio visibile. */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


.card-chip {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.8rem 0.4rem 0.4rem;
    background: #fff;
    border: 1.5px solid #ece7db;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    box-shadow: 0 1px 4px rgba(0,0,0,0.05);
    transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
    -webkit-tap-highlight-color: transparent;
}


.wallet-empty {
    background: #fff;
    border: 1.5px dashed #e5e0d5;
    border-radius: 14px;
    padding: 1.4rem 1rem;
    text-align: center;
    color: #8a8478;
    font-size: 0.84rem;
    line-height: 1.5;
}

.wallet-empty-ico { font-size: 1.6rem; display: block; margin-bottom: 0.4rem; }


/* === PRIZES === */
.section-prizes { margin-bottom: 0.5rem; }


.section-prizes-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}


.section-prizes-header h2 { font-size: 0.95rem; }


.badge-available {
    font-size: 0.65rem;
    font-weight: 700;
    background: var(--success);
    color: white;
    padding: 0.15rem 0.5rem;
    border-radius: 20px;
    animation: badge-bounce 2s ease-in-out infinite;
}


.prizes-subtitle {
    font-size: 0.75rem;
    color: var(--text-light);
    margin: 0.6rem 0 0.3rem;
    font-weight: 500;
}


/* === NEXT GOAL & PROGRESS === */
.next-goal {
    background: linear-gradient(160deg, #fffaf0, #fff);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 0.85rem 0.95rem;
    margin-bottom: 0.7rem;
    box-shadow: var(--shadow);
}


.next-goal-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.64rem;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--muted);
}


.next-goal-cost {
    color: var(--primary-ink);
    background: rgba(254,169,24,0.14);
    padding: 0.14rem 0.5rem;
    border-radius: 999px;
}


.next-goal-name {
    display: block;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1rem;
    margin: 0.4rem 0 0.55rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.next-goal-bar {
    height: 9px;
    background: #f0ebdf;
    border-radius: 999px;
    overflow: hidden;
}


.next-goal-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, #ffd54a, #fea918 60%, #ff5a5e);
    transition: width 0.5s ease;
}


.next-goal-foot {
    display: flex;
    justify-content: space-between;
    font-size: 0.72rem;
    color: var(--text-light);
    margin-top: 0.45rem;
}


.next-goal-foot strong {
    color: var(--coral);
}


.qr-modal-card {
    position: relative;
    z-index: 1;
    background: var(--card-bg);
    border-radius: 24px;
    padding: 2rem 1.5rem 1.5rem;
    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    width: 100%;
    max-width: 360px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.25s;
}


.qr-modal-close {
    position: absolute;
    top: 0.75rem;
    right: 0.85rem;
    width: 32px;
    height: 32px;
    border: none;
    background: #f6f3ec;
    border-radius: 50%;
    font-size: 1.2rem;
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: background 0.15s;
}


.qr-modal-close:hover { background: #e8e3d6; }


.qr-modal-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin-bottom: 0.15rem;
}


.qr-modal-sub {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 1.25rem;
}


/* === PRIZES === */
.section-prizes { margin-bottom: 1rem; }


.section-prizes-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}


.section-prizes-header h2 { font-size: 1.1rem; }


.badge-available {
    font-size: 0.7rem;
    font-weight: 700;
    background: var(--success);
    color: white;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    animation: badge-bounce 2s ease-in-out infinite;
}


.prizes-subtitle {
    font-size: 0.8rem;
    color: var(--text-light);
    margin-bottom: 0.5rem;
    font-weight: 500;
}


@keyframes pulse-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* --- Brand bar --- */
.admin-brand {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 0.7rem 0.85rem;
    margin-bottom: 1rem;
    box-shadow: 0 4px 14px rgba(23, 19, 12, 0.05);
}

.admin-brand-activity {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    min-width: 0;
}

.admin-brand-logo {
    flex: none;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #f3f1ec;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.admin-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-brand-fallback {
    font-size: 1.5rem;
    color: var(--accent, var(--primary));
    line-height: 1;
}

.admin-brand-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.admin-brand-name {
    font-size: 0.95rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.admin-brand-role {
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--muted);
    margin-top: 2px;
}

.admin-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.5rem;
}

.admin-login-brand-logo {
    width: 64px;
    height: 64px;
    border-radius: 18px;
    background: #f3f1ec;
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin-bottom: 0.9rem;
    box-shadow: 0 6px 18px rgba(23, 19, 12, 0.08);
}

.admin-login-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.admin-login-brand-fallback {
    font-size: 1.8rem;
    color: var(--accent, var(--primary));
    line-height: 1;
}

.admin-login-punty {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    margin-top: 1.6rem;
    padding-top: 1.1rem;
    border-top: 1px dashed var(--border);
    font-size: 0.72rem;
    color: var(--muted);
}

.admin-login-punty img {
    height: 14px;
    width: auto;
    display: block;
}

.admin-login-punty strong { color: var(--text); }


/* --- Section blocks --- */
.admin-section {
    background: var(--card-bg);
    border-radius: 16px;
    padding: 1.25rem;
    box-shadow: 0 1px 6px rgba(0,0,0,0.04);
    margin-bottom: 0.75rem;
    height: 100%;
}


/* --- Scanner --- */
/* La sezione dello scanner non e' una card come le altre: contiene un solo
   elemento, quindi il riquadro, il padding generoso e il titolo visibile
   pesavano piu' del contenuto. Qui si azzera tutto e resta solo il bottone. */
.scan-section {
    background: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    height: auto;
    margin-bottom: 1rem;
}


.admin-scan-btn.scan-on { background: #0e2b21; border: 1px solid rgba(0,224,138,.6); color: #eafff5; cursor: default; }

.admin-scan-btn.scan-on svg { stroke: #00e08a; }

.admin-scan-btn.scan-err { background: #3a1414; border: 1px solid rgba(255,107,107,.6); color: #ffe1e1; }


.scan-dot { width: 10px; height: 10px; border-radius: 50%; background: #00e08a; box-shadow: 0 0 0 0 rgba(0,224,138,.55); animation: scan-pulse 1.6s infinite; flex: none; }

.admin-scan-btn.scan-idle .scan-dot, .admin-scan-btn.scan-err .scan-dot { animation: none; background: #b9b3a8; box-shadow: none; }

@keyframes scan-pulse { 0% { box-shadow: 0 0 0 0 rgba(0,224,138,.55); } 70% { box-shadow: 0 0 0 9px rgba(0,224,138,0); } 100% { box-shadow: 0 0 0 0 rgba(0,224,138,0); } }


#scanner-region { position: fixed; left: -10000px; top: 0; width: 340px; height: 340px; overflow: hidden; pointer-events: none; }

#scanner-region video, #scanner-region canvas { width: 340px !important; height: 340px !important; object-fit: cover; }


/*html5-qrcode crea questo riquadro come fratello prima di #scanner-region e ci
   scrive dentro degli stili in linea: gli !important servono per tenerlo fuori
   dal flusso della pagina, altrimenti appare uno spazio vuoto sotto il bottone. */
#qr-shaded-region { position: fixed !important; left: -10000px !important; top: 0 !important; width: 0 !important; height: 0 !important; overflow: hidden !important; pointer-events: none !important; }


.slc {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    cursor: pointer;
    clip-path: polygon(50% 50%, 27% 10.16%, 29.12% 9.01%, 31.29% 7.98%, 33.52% 7.06%, 35.79% 6.25%, 38.1% 5.57%, 40.44% 5.01%, 42.8% 4.57%, 45.19% 4.25%, 47.59% 4.06%, 50% 4%, 52.41% 4.06%, 54.81% 4.25%, 57.2% 4.57%, 59.56% 5.01%, 61.91% 5.57%, 64.21% 6.25%, 66.49% 7.06%, 68.71% 7.98%, 70.88% 9.01%, 73% 10.16%);
    transform: rotate(var(--rot));
    background: conic-gradient(from -30deg, var(--c1) 0deg 30deg, var(--c2) 30deg 60deg, transparent 60deg);
    -webkit-tap-highlight-color: transparent;
    transition: filter 0.12s;
    -webkit-user-select: none;
    user-select: none;
}


.admin-points-minus {
    display: flex;
    justify-content: center;
}


.admin-points-minus {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}


/* ---------- Punto automatico: interruttore grafico ---------- */

.toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    background: #faf8f4;
    transition: border-color 0.2s, background 0.2s;
}


.toggle-row.is-on {
    border-color: var(--primary);
    background: color-mix(in srgb, var(--primary) 7%, #fff);
}


/* Il bottone non eredita nulla dal form: aspetto e reset sono espliciti,
   altrimenti il browser lo disegna come un button grigio predefinito. */
.toggle-switch {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--text-light);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}


.toggle-track {
    position: relative;
    display: block;
    flex: none;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: #d6cfc2;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.12);
    transition: background 0.22s ease;
}


.toggle-switch.is-on .toggle-track {
    background: var(--primary);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}


.toggle-switch.is-on .toggle-state { color: var(--primary); }

.toggle-switch:focus-visible .toggle-track {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}


.admin-alert.sub-ok { background: #e6fcf5; color: #006b4f; border-left: 4px solid #00b894; }

.admin-alert.sub-warn { background: #fff7e0; color: #8a5a00; border-left: 4px solid #fdcb6e; }

.admin-alert.sub-grace { background: #ffe9d6; color: #8a3d00; border-left: 4px solid #e17055; }

.admin-alert.sub-locked { background: #ffe3e3; color: #9c1b1b; border-left: 4px solid #e74c3c; }


.wheel-wrap.readonly .wheel { opacity: 0.45; filter: grayscale(0.35); pointer-events: none; }

.wheel-readonly-note {
    text-align: center; font-size: 0.8rem; font-weight: 700; color: #8a3d00;
    background: #ffe9d6; border-radius: 10px; padding: 0.4rem 0.6rem; margin-bottom: 0.6rem;
}


@keyframes pulse-anim {
    0% { transform: scale(1); }
    50% { transform: scale(1.15); }
    100% { transform: scale(1); }
}


.legal-header {
    padding: 2rem 0 1.5rem;
}

        .topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem}

        .topbar-brand{display:flex;align-items:center;gap:.55rem;font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--text)}

        .topbar-brand img{width:80px;height:80px;object-fit:contain}

        .topbar-right a{font-size:.78rem;font-weight:600;color:var(--muted);padding:.42rem .85rem;border-radius:10px;border:1px solid var(--border);background:var(--card)}

        .topbar-right a:hover{color:var(--primary);border-color:var(--primary)}

        .pcard-brand img{width:130px;height:60px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.3))}

        .pcard-right{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35rem}

        .pcard-qr canvas,.pcard-qr img{display:block;width:170px;height:170px}

        .omaggio::before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,rgba(10,10,26,.68),rgba(10,10,26,.22))}

        .wallet-empty{background:var(--card);border:1px dashed var(--border);border-radius:16px;padding:2rem 1.4rem;text-align:center;color:var(--muted);font-size:.85rem;line-height:1.55;margin-bottom:1.5rem}

        .wallet-empty-ico{font-size:2.2rem;display:block;margin-bottom:.5rem}

        .premi-item{display:flex;align-items:center;gap:.85rem;padding:.75rem 1rem;background:rgba(255,255,255,.88);color:var(--text);transition:background .2s;backdrop-filter:blur(6px)}

        .tabbar{position:fixed;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:80;display:flex;justify-content:space-around;align-items:center;background:rgba(255,255,255,.94);backdrop-filter:blur(12px);border-top:1px solid var(--border);padding:.4rem .5rem calc(.4rem + env(safe-area-inset-bottom))}

        .tab-badge{position:absolute;top:.1rem;right:.45rem;min-width:16px;height:16px;border-radius:8px;background:#e8590c;color:#fff;font-size:.56rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 .25rem}

        .pcard-right{cursor:pointer}

        .hub .qr-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:1.4rem;background:rgba(16,12,34,.55);backdrop-filter:blur(8px);opacity:0;pointer-events:none;transition:opacity .25s}

        .qr-modal-card{position:relative;background:var(--card);border-radius:24px;padding:1.6rem 1.4rem 1.5rem;width:100%;max-width:340px;text-align:center;box-shadow:0 30px 70px rgba(16,12,34,.5);transform:translateY(14px) scale(.96);transition:transform .25s}

        .qr-modal-close{position:absolute;top:.7rem;right:.8rem;width:34px;height:34px;border:none;border-radius:10px;background:#f1f0fb;color:var(--muted);font-size:1.3rem;line-height:1;cursor:pointer;transition:all .2s}

        .qr-modal-close:hover{background:#e7e3fc;color:var(--primary)}

        .qr-modal-title{font-family:var(--display);font-weight:700;font-size:1.02rem}

        .qr-modal-sub{font-size:.8rem;color:var(--muted);margin:.35rem 0 0;line-height:1.45}

.auth-page .brand img{width:130px;height:30px;object-fit:contain}

/* =========================================== */
/* === LANDING (marketing pages)             === */
body.landing{--radius:26px}

body.landing{font-family:var(--body);font-size:1.08rem;line-height:1.55;color:var(--ink);-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--bg)}

.card-chip{margin-left:auto;font-size:.95rem;font-weight:400;letter-spacing:1px;background:rgba(254,199,80,.18);color:var(--lime);border:1px solid rgba(254,199,80,.35);padding:.15rem .7rem;border-radius:999px;line-height:1.4}

@media(max-width:700px){.badge-move{display:none}}

@media(max-width:520px){.hero-stats{gap:1.2rem}.hero-stat b{font-size:1.4rem}}

@media(max-width:820px){.feat-grid{grid-template-columns:1fr}.feat-card{padding:1.4rem}}

@media(max-width:820px){.steps{grid-template-columns:1fr 1fr}}

@media(max-width:520px){.steps{grid-template-columns:1fr}}

@media(max-width:700px){.duo-grid{grid-template-columns:1fr}}

@media(max-width:820px){.pricing-grid{grid-template-columns:1fr}}


/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
    html{scroll-behavior:auto}
}