.curriculum-panel {
    /* take remaining space between add-course and upgrade-card */
    flex: 1;
    min-height: 0; /* important to allow proper flexbox scrolling */
    overflow-y: auto;
}

/* Right Sidebar */
.right-sidebar {
    width: 22%;
    background-color: var(--sidebar-bg);
    border-left: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow-y: auto;
}
:root {
    --primary-color: #4F46E5;
    --sidebar-bg: #F9FAFB;
    --chat-bg: #FFFFFF;
    --border-color: #E5E7EB;
    --text-primary: #111827;
    --text-secondary: #6B7280;
    --success-color: #10B981;
}

body, html {
    height: 100%;
    margin: 0;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: var(--text-primary);
    background-color: var(--sidebar-bg);
}

.main-container {
    display: flex;
    height: 100vh;
    background-color: var(--chat-bg);
}

/* Left Sidebar */
.left-sidebar {
    width: 25%;
    background-color: var(--sidebar-bg);
    border-right: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* prevent page from growing and contain scroll inside */
    overflow: hidden;
}

/* Hide left sidebar on mobile when needed */
@media (max-width: 991.98px) {
  .left-sidebar.hidden-mobile {
    display: none !important;
  }
}

.add-course {
    margin-bottom: 1.5rem;
}

.progress-bar {
    background-color: var(--primary-color);
    border-radius: 4px;
}

.course-topics {
    flex-grow: 1;
    overflow-y: auto;
}

.topic-item {
    display: flex;
    align-items: center;
    padding: 0.75rem 1rem;
    margin: 0.25rem 0;
    border-radius: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.topic-item:hover {
    background-color: #F3F4F6;
}

.topic-item.completed {
    background-color: #EEF2FF;
}

.topic-item.completed .topic-icon {
    color: var(--success-color);
}

.topic-item.in-progress .topic-icon {
    color: var(--primary-color);
}

.topic-icon {
    margin-right: 0.75rem;
    color: #9CA3AF;
}

.topic-info {
    flex-grow: 1;
}

.topic-name {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.topic-progress {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.upgrade-card {
    margin-top: 1.5rem;
    padding: 0 0.5rem;
}

.upgrade-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.35rem 0.5rem; /* ~2x smaller */
    background-color: #FFE4C2;
    color: #F59E0B;
    border: 1px solid #F59E0B;
    border-radius: 0.5rem;
    font-weight: 500;
    font-size: 0.8rem; /* make text smaller */
    cursor: pointer;
    transition: all 0.2s ease;
}

.upgrade-btn i {
    margin-right: 0.35rem; /* tighter spacing for smaller button */
    font-size: 0.8rem; /* icon smaller to match text */
}

.upgrade-btn:hover {
    background-color: #F59E0B;
    color: white;
}

/* Main Chat Area */
.chat-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--chat-bg);
    overflow-x: hidden; /* prevent horizontal overflow */
    position: relative; /* allow floating buttons inside */
}

.chat-header {
    padding: 1.25rem 2rem;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.chat-title-main {
    font-size: 1.25rem;
    font-weight: 600;
}

.ai-status {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    color: var(--success-color);
    background-color: #E6F9F2;
    padding: 0.25rem 0.75rem;
    border-radius: 1rem;
}

.status-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--success-color);
    border-radius: 50%;
    margin-right: 0.5rem;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem 2rem;
}

.message {
    max-width: 70%;
    margin-bottom: 1.5rem;
    display: flex;
    flex-direction: column;
}

.message-ai {
    align-self: flex-start;
    background-color: #F3F4F6;
    padding: 0.75rem 1.25rem;
    border-radius: 1.25rem;
    border-top-left-radius: 0.25rem;
}

.message-user {
    align-self: flex-end;
    background-color: var(--primary-color);
    color: white;
    padding: 0.75rem 1.25rem;
    border-radius: 1.25rem;
    border-bottom-right-radius: 0.25rem;
}

.chat-input-container {
    padding: 8px 12px; /* moved from app.html */
    border-top: 1px solid var(--border-color);
    background-color: white;
    width: 100%;
}

.chat-input-wrapper {
    position: relative;
    display: flex;
    align-items: center; /* moved from app.html */
    gap: 8px; /* moved from app.html */
    width: 100%;
    box-sizing: border-box;
}

.chat-input {
    width: 100%;
    flex: 1 1 auto;
    min-width: 0; /* allow shrink inside flex to avoid overflow */
    box-sizing: border-box;
    padding: 0.75rem 1rem; /* icon removed, no extra left padding needed */
    margin: 0; /* remove any default margins */
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    font-size: 0.9375rem;
    transition: all 0.2s;
    resize: none; /* moved from app.html */
}

.chat-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.2);
}

.chat-input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-secondary);
}

.send-button {
    position: static;
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 36px; height: 36px; /* ~1.5x smaller */
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.send-button:hover { background: #4338CA; }

/* Quiz button inline next to send button */
.quiz-button {
    position: static;
    background: var(--primary-color);
    color: #fff;
    border: none;
    width: 36px; height: 36px; /* match send button */
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}
.quiz-button:hover { background: #4338CA; }

/* Icons inside the action buttons */
.send-button i,
.quiz-button i { font-size: 1.05rem; }

/* Disabled states (moved from app.html) */
.send-button:disabled,
.quiz-button:disabled {
    opacity: 0.5;
    filter: grayscale(0.6);
    cursor: not-allowed;
}
.chat-input:disabled {
    background-color: #f6f7f9;
    color: #9aa0a6;
    border-color: #e5e7eb;
    cursor: not-allowed;
}

/* Non-blocking hint message shown until course/content selected (moved from app.html) */
.chat-messages { position: relative; }
#chat-locked-message {
    position: absolute; inset: 0;
    display: none;
    align-items: center; justify-content: center;
    text-align: center; padding: 16px;
    pointer-events: none;
}
#chat-locked-message .msg {
    display: inline-block;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 12px 16px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.08);
    pointer-events: auto;
}

/* Centered feedback link in right sidebar (moved) */
.right-sidebar { display: flex; flex-direction: column; }
.feedback-center { margin: auto 0; text-align: center; }
.feedback-center a { color: #0d6efd; text-decoration: underline; cursor: pointer; }
.feedback-center a:hover { text-decoration: none; }

/* Hide default Userback launcher button (we use our own link) */
#userback_button, .userback-button, .ub-widget-button { display: none !important; }

/* Micro animation for blocked actions (moved) */
@keyframes shake {
    0% { transform: translateX(0); }
    20% { transform: translateX(-4px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}
.shake { animation: shake 300ms ease-in-out; }

/* Temporary highlight for left sidebar */
.sidebar-highlight {
    box-shadow: 0 0 0 3px rgba(25, 118, 210, 0.35) inset;
    transition: box-shadow 300ms ease-in-out;
}

/* Context menu for mobile long-press */
.context-menu {
    position: fixed;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.12);
    z-index: 2000;
    min-width: 160px;
    padding: 4px 0;
}
.context-menu.hidden { display: none; }
.context-menu .item {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 0.95rem;
}
.context-menu .item:hover {
    background: #f5f7fb;
}

/* Left sidebar hover styles (moved from app.html) */
.left-sidebar .accordion-button {
    transition: background-color .15s ease, color .15s ease;
}
.left-sidebar .accordion-button:hover {
    background-color: #f5f7fb;
    color: #0d6efd;
    cursor: pointer;
}
.left-sidebar .lesson-list { list-style: none; margin: 0; padding: .25rem .5rem; }
.left-sidebar .lesson-item {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    padding: .4rem .5rem;
    border-radius: .375rem;
    transition: background-color .15s ease, color .15s ease;
    cursor: pointer;
}
.left-sidebar .lesson-item:hover { background-color: #f1f5ff; }
.left-sidebar .lesson-item .lesson-title { transition: color .15s ease; }
.left-sidebar .lesson-item:hover .lesson-title { color: #0d6efd; }

/* Persistently selected lesson */
.left-sidebar .lesson-item.active {
    background-color: #e9f2ff; /* slightly stronger than hover */
}
.left-sidebar .lesson-item.active .lesson-title {
    color: #0d6efd;
}

/* Chat input auto-resize (moved from app.html) */
.chat-input-wrapper { align-items: flex-end; }
.chat-input {
    max-height: 200px;
    overflow-y: auto;
    resize: none; /* textarea behavior */
    line-height: 1.4;
}

/* Premium Subscription Modal */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    justify-content: center;
    align-items: center;
    padding: 20px;
    transition: opacity 0.3s ease;
}

.modal-overlay.show {
    display: flex;
    opacity: 1;
    align-items: flex-start;
    padding-top: 5vh;
}

/* Support alternative JS toggling via .open class */
.modal-overlay.open {
    display: flex;
    opacity: 1;
    align-items: flex-start;
    padding-top: 5vh;
}

.modal-content {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 30px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
}

.modal-header h4 {
    font-size: 24px;
    font-weight: 600;
    margin: 0;
    color: #333;
}

.close-modal {
    background: none;
    border: none;
    font-size: 28px;
    cursor: pointer;
    color: #666;
    padding: 5px 10px;
    line-height: 1;
}

/* Fullscreen modal on small devices */
@media (max-width: 576px) {
  .modal-overlay {
    align-items: stretch;
    padding: 0;
  }
  .modal-content {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    border-radius: 0;
    padding: 16px;
  }
  .modal-header h4 { font-size: 20px; }
}

.close-modal:hover {
    color: #333;
}

.subscription-options {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
}

.subscription-option {
    flex: 1;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    padding: 25px;
    position: relative;
    transition: all 0.3s ease;
}

.subscription-option:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.subscription-option.recommended {
    border: 2px solid #4CAF50;
    position: relative;
    overflow: hidden;
}

.recommended-badge {
    position: absolute;
    top: 0;
    right: 0;
    background: #4CAF50;
    color: white;
    padding: 5px 15px;
    font-size: 12px;
    font-weight: 600;
    border-bottom-left-radius: 10px;
}

.option-header {
    margin-bottom: 20px;
    text-align: center;
}

.option-header h5 {
    font-size: 20px;
    margin: 0 0 10px 0;
    color: #333;
}

.price {
    font-size: 28px;
    font-weight: 700;
    color: #2196F3;
    margin-bottom: 5px;
}

.price span {
    font-size: 16px;
    font-weight: 400;
    color: #666;
}

.savings {
    font-size: 14px;
    color: #4CAF50;
    font-weight: 500;
}

.features-list {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}

.features-list li {
    padding: 8px 0;
    color: #555;
    display: flex;
    align-items: center;
}

.features-list i {
    color: #4CAF50;
    margin-right: 10px;
    font-size: 14px;
}

.btn-subscribe {
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    background: #f5f5f5;
    color: #666;
}

.btn-subscribe.primary {
    background: #2196F3;
    color: white;
}

.btn-subscribe:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.payment-methods {
    text-align: center;
    margin: 30px 0;
    padding: 20px 0;
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
}

.payment-methods p {
    margin: 0 0 15px 0;
    color: #666;
}

.payment-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
}

.payment-icons i {
    font-size: 30px;
    color: #666;
}

.money-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #666;
    font-size: 14px;
    margin-top: 20px;
}

.money-back i {
    color: #4CAF50;
}

/* Right Sidebar */
.right-sidebar {
    width: 25%;
    background-color: white;
    border-left: 1px solid var(--border-color);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
}

.chat-header-right {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.new-chat-btn {
    background-color: transparent;
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    transition: all 0.2s;
}

.new-chat-btn:hover {
    background-color: var(--primary-color);
    color: white;
}

.new-chat-btn i {
    margin-right: 0.5rem;
}

.language-selector {
    padding: 0.25rem 0.5rem;
    border: 1px solid var(--border-color);
    border-radius: 0.375rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    background-color: white;
    cursor: pointer;
}

.chat-history {
    flex-grow: 1;
    overflow-y: auto;
}

.chat-item {
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.chat-item:hover {
    background-color: #F9FAFB;
}

.chat-item.active {
    background-color: #EEF2FF;
    border-left: 3px solid var(--primary-color);
}

.chat-title {
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.chat-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.user-profile {
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-color);
}

.profile-info {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
}

.profile-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #E0E7FF;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.75rem;
    color: var(--primary-color);
    font-weight: 600;
}

.profile-details {
    flex-grow: 1;
}

.profile-name {
    font-weight: 500;
    margin-bottom: 0.125rem;
}

.profile-email {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.premium-badge {
    display: inline-block;
    background: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
    color: white;
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 0.125rem 0.5rem;
    border-radius: 1rem;
    margin-top: 0.25rem;
}

.settings-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0.25rem;
    border-radius: 0.25rem;
}

.settings-btn:hover {
    background-color: #F3F4F6;
    color: var(--text-primary);
}

.auth-container {
    max-width: 400px;
    margin: 5rem auto;
    padding: 2rem;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}

body {
    background-color: #f8f9fa;
}

/* Chat messages */
.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.message {
    max-width: 80%;
    padding: 12px 16px;
    border-radius: 18px;
    line-height: 1.4;
    position: relative;
    word-wrap: break-word;
}

.user-message {
    align-self: flex-end;
    background-color: #4F46E5;
    color: white;
    border-bottom-right-radius: 4px;
}

.ai-message {
    align-self: flex-start;
    background-color: #F3F4F6;
    color: #111827;
    border-bottom-left-radius: 4px;
}

.message-content {
    white-space: pre-wrap;
}

/* Typing indicator */
.ai-typing {
    background-color: #F3F4F6 !important;
    padding: 12px 16px !important;
}

.typing-indicator {
    display: flex;
    gap: 6px;
    padding: 4px 0;
}

.typing-indicator span {
    width: 8px;
    height: 8px;
    background-color: #9CA3AF;
    border-radius: 50%;
    display: inline-block;
    animation: bounce 1.4s infinite ease-in-out both;
}

.typing-indicator span:nth-child(1) { animation-delay: 0s; }
.typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
.typing-indicator span:nth-child(3) { animation-delay: 0.4s; }

@keyframes bounce {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}

/* Chat input area */
.chat-input-container {
    padding: 15px 20px;
    border-top: 1px solid #E5E7EB;
    background-color: white;
}

.chat-input-wrapper {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.chat-input {
    flex: 1;
    border: 1px solid #E5E7EB;
    border-radius: 20px;
    padding: 12px 20px;
    font-size: 15px;
    resize: none;
    max-height: 150px;
    line-height: 1.4;
    transition: border-color 0.2s;
}

.chat-input:focus {
    outline: none;
    border-color: #4F46E5;
    box-shadow: 0 0 0 2px rgba(79, 70, 229, 0.1);
}

.send-button {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background-color: #4F46E5;
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.send-button:hover {
    background-color: #4338CA;
}

.send-button:disabled {
    background-color: #9CA3AF;
    cursor: not-allowed;
}

.sidebar-toggle-btn {
    background: none;
    border: none;
    color: var(--text-secondary);
    font-size: 1.25rem;
    cursor: pointer;
    padding: 0.5rem;
    margin: 0 0.5rem;
}

/* Responsive Design */
@media (max-width: 991.98px) {
    /* Keep input always visible on mobile by fixing it to viewport bottom */
    .chat-input-container {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1100;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
    }

    /* Add enough bottom padding so last messages are not covered by fixed input */
    .chat-messages {
        padding-bottom: calc(7.5rem + env(safe-area-inset-bottom)); /* input height + safe space */
    }
    .left-sidebar,
    .right-sidebar {
        position: fixed;
        top: 0;
        height: 100%;
        width: 300px;
        z-index: 1050;
        background-color: var(--sidebar-bg);
        transition: transform 0.3s ease-in-out;
        box-shadow: 0 0 15px rgba(0,0,0,0.2);
    }

    .left-sidebar {
        left: 0;
        transform: translateX(-100%);
    }

    .right-sidebar {
        right: 0;
        transform: translateX(100%);
    }

    .left-sidebar.open {
        transform: translateX(0);
    }

    .right-sidebar.open {
        transform: translateX(0);
    }

    .chat-container {
        width: 100%;
    }

    .main-container.left-sidebar-open .chat-container,
    .main-container.right-sidebar-open .chat-container {
        filter: brightness(0.7);
    }
}

@media (min-width: 992px) {
    .sidebar-toggle-btn {
        display: none;
    }
}

/* === Curriculum Panel (moved from app.html) === */
.curriculum-panel { font-size: 0.95rem; }
.curriculum-title { color: #0d6efd; font-weight: 700; margin: 0 0 .5rem 0; }
.curriculum-subtitle { color: #6c757d; font-size: .85rem; margin-bottom: .75rem; }
.accordion.curriculum-accordion { border-radius: .5rem; overflow: hidden; border: 1px solid #e9ecef; background: #fff; }
.accordion-item { border: 0; border-bottom: 1px solid #e9ecef; }
.accordion-button { padding: .75rem 1rem; background-color: #fff; }
.accordion-button:not(.collapsed) { background-color: #f8fafc; box-shadow: inset 0 -1px 0 rgba(0,0,0,.05); }
.module-badge { color: #6c757d; font-size: .85rem; margin-right: .5rem; }
.lesson-list { list-style: none; padding: 0; margin: 0; }
.lesson-item { display: flex; align-items: flex-start; gap: .75rem; padding: .5rem 1rem; }
.lesson-item + .lesson-item { border-top: 1px solid #f1f3f5; }
.lesson-dot { width: .65rem; height: .65rem; border-radius: 50%; background: #dee2e6; flex: 0 0 .65rem; margin-top: .45rem; }
.lesson-title { font-size: .95rem; line-height: 1.25rem; }
.lesson-meta { color: #6c757d; font-size: .85rem; }

/* Minimal styling for pricing modal */
#premiumModal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1050; align-items: center; justify-content: center; }
#premiumModal.open { display: flex; }
body.modal-open { overflow: hidden; }
#premiumModal .modal-content { max-width: 860px; width: 96%; }
#premiumModal .modal-header { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid #eee; }
#premiumModal .modal-body { padding:20px; }
#premiumModal .close-modal { border:none; background:transparent; font-size:28px; line-height:1; cursor:pointer; }
.pricing-grid { display:grid; grid-template-columns: repeat(2, 1fr); gap:16px; }
.plan-card { position:relative; border:1px solid #e6e6e6; border-radius:12px; padding:20px; background:#fff; box-shadow: 0 4px 16px rgba(0,0,0,0.06); cursor: pointer; transition: box-shadow .2s, border-color .2s, transform .05s; }
.plan-card.recommended { border-color:#2d6cdf; box-shadow: 0 6px 24px rgba(45,108,223,0.2); }
.plan-card.selected { border-color:#111827; box-shadow: 0 8px 28px rgba(0,0,0,0.15); }
.plan-card:active { transform: scale(0.998); }
/* Hover state for tariff cards */
#premiumModal .plan-card:hover { border-color:#2d6cdf; box-shadow: 0 8px 24px rgba(45,108,223,0.18); }
#premiumModal .plan-card.selected:hover { border-color:#0b5ed7; box-shadow: 0 10px 30px rgba(13,110,253,0.22); }
.plan-badge { position:absolute; top:12px; right:12px; background:#2d6cdf; color:#fff; font-size:12px; padding:4px 8px; border-radius:999px; }
.plan-title { display:flex; align-items:baseline; gap:8px; margin-bottom:8px; }
.plan-title h5 { margin:0; font-weight:700; }
.plan-price { font-size:28px; font-weight:800; }
.plan-price span { font-size:14px; color:#6b7280; font-weight:500; margin-left:4px; }
.features { margin:12px 0 16px; padding-left:18px; }
.features li { margin:6px 0; }
.btn-purchase { display:block; width:100%; border-radius:10px; padding:12px 14px; font-weight:700; border:1px solid #2d6cdf; background:#2d6cdf; color:#fff; transition: opacity .2s; }
.btn-purchase.secondary { background:#fff; color:#2d6cdf; }
.btn-purchase[disabled] { opacity: .65; cursor: not-allowed; }
/* Hover states for purchase buttons */
#premiumModal .btn-purchase:hover:not([disabled]) { background:#1f5bd6; border-color:#1f5bd6; color:#fff; }
#premiumModal .btn-purchase.secondary:hover:not([disabled]) { background:#2d6cdf; color:#fff; border-color:#2d6cdf; }
/* Keyboard focus */
#premiumModal .plan-card:focus-visible { outline: 3px solid rgba(45,108,223,0.35); outline-offset: 2px; }
#premiumModal .btn-purchase:focus-visible { box-shadow: 0 0 0 3px rgba(45,108,223,0.35); }
.payment-strip { display:flex; align-items:center; gap:12px; margin-top:8px; color:#6b7280; font-size:13px; }
.payment-icons i { font-size:22px; opacity:0.9; }
.guarantee { display:flex; align-items:center; gap:8px; margin-top:12px; color:#374151; font-size:13px; }
@media (max-width: 720px) {
    .pricing-grid { grid-template-columns: 1fr; }
}

/* OAuth brand buttons */
.btn-icon { display: inline-flex; align-items: center; gap: 8px; }
.btn-icon svg { width: 18px; height: 18px; }

/* Facebook brand button */
.btn-facebook {
  background-color: #1877F2 !important;
  border-color: #1877F2 !important;
  color: #fff !important;
  transition: box-shadow .2s ease;
}
.btn-facebook:hover,
.btn-facebook:focus {
  background-color: #166FE5 !important;
  border-color: #166FE5 !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}

/* Google brand button (white background, colored G) */
.btn-google {
  background-color: #ffffff !important;
  color: #3c4043 !important; /* Google Gray 800 */
  border: 1px solid #cfcfcf !important;
  transition: box-shadow .2s ease;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
  outline: 2px solid #e6e6e6;
  outline-offset: 0;
}
.btn-google:hover,
.btn-google:focus {
  background-color: #f8f9fa !important;
  border-color: #c6c6c6 !important;
  color: #3c4043 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}