* { scroll-behavior: smooth; }
body { background: #f9fafb; }
.fade-in { animation: fadeIn 0.3s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.plan-card {
    transition: border-color 0.2s, box-shadow 0.2s;
    cursor: pointer;
    position: relative;
}
.plan-card:hover { border-color: #2563eb; box-shadow: 0 8px 24px rgba(37, 99, 235, 0.08); }
.plan-card.selected { border-color: #2563eb; background: #eff6ff; }
.badge-sale {
    position: absolute; top: -10px; right: -8px; background: #ef4444; color: white; font-size: 0.6rem; font-weight: 700;
    padding: 0.2rem 0.6rem; border-radius: 20px; letter-spacing: 0.3px; box-shadow: 0 2px 6px rgba(239, 68, 68, 0.3);
}
#qrcode-container { display: inline-block; background: white; padding: 8px; border-radius: 12px; border: 1px solid #e5e7eb; }
#qrcode-container canvas { display: block !important; margin: 0 auto; width: 256px !important; height: 256px !important; }
#qrcode-container img { display: none !important; }
.tooltip-trigger {
    position: relative; cursor: help; display: inline-block; border-bottom: 1px dashed #9ca3af;
}
.tooltip-trigger .tooltip-text {
    visibility: hidden; width: 220px; background-color: #1e293b; color: #f8fafc; text-align: left;
    border-radius: 8px; padding: 10px 12px; position: absolute; z-index: 10; bottom: 130%; left: 50%;
    transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease, visibility 0.3s ease;
    font-size: 0.75rem; font-weight: 400; line-height: 1.4; white-space: normal; word-wrap: break-word;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); pointer-events: none;
}
.tooltip-trigger .tooltip-text::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 6px solid transparent; border-top-color: #1e293b;
}
.tooltip-trigger:hover .tooltip-text { visibility: visible; opacity: 1; }
.info-icon {
    display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px;
    border-radius: 50%; background: #e5e7eb; color: #4b5563; font-size: 11px; font-weight: 700;
    margin-left: 4px; transition: background 0.2s; user-select: none;
}
.tooltip-trigger:hover .info-icon { background: #d1d5db; }
.logo-section { flex-shrink: 0; padding-top: 2rem; padding-bottom: 2rem; }
.content-section { flex: 1; display: flex; justify-content: center; align-items: flex-start; width: 100%; }
#app {
    width: 100%; max-width: 28rem; background: white; border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.05);
    padding: 24px; transition: none; min-height: auto;
}