* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --bg-primary: #f8fafc;
    --bg-card: #ffffff;
    --border-color: #e5e7eb;
    --error-color: #ef4444;
    --success-color: #22c55e;
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
}

/* Default body styles (used by landing + admin login, etc.) */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

/* Landing page (index.html) only:
   We want a non-scrollable-looking page at rest, but we must still allow
   the browser to scroll the focused input into view when the virtual
   keyboard opens (otherwise you can get "stuck" in embedded webviews).

   So: keep a stable viewport height, avoid overflow from 100vh+padding,
   and only lock scrolling when the keyboard is NOT open (coarse pointer
   devices typically indicate mobile). */
body:not(.dashboard-body):not(.apps-body) {
    min-height: 100dvh;
}

@supports not (min-height: 100dvh) {
    body:not(.dashboard-body):not(.apps-body) {
        min-height: 100vh;
    }
}

@media (pointer: coarse) {
    body:not(.dashboard-body):not(.apps-body):not(:focus-within) {
        overflow: hidden;
    }
}

/* Buy Me a Coffee mini button (discreet, placed in page headers near username) */
.bmc-mini {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: auto;
    height: 34px;
    padding: 0 10px 0 6px;
    border-radius: 999px;
    text-decoration: none;
    border: 1px solid rgba(229, 231, 235, 0.9);
    background: rgba(255, 255, 255, 0.85);
    box-shadow: var(--shadow-sm);
    transition: transform 0.12s ease, background 0.12s ease;
    z-index: 999;
}

.bmc-mini:hover {
    transform: translateY(-1px);
    background: rgba(255, 255, 255, 0.95);
}

.bmc-mini__icon {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
    color: white;
    font-size: 14px;
}

.bmc-mini__text {
    font-weight: 600;
    font-size: 12px;
    color: var(--text-primary);
    white-space: nowrap;
}

@media (max-width: 480px) {
    .bmc-mini__text {
        display: none;
    }
    .bmc-mini {
        padding-right: 6px;
    }
}

.container {
    display: flex;
    gap: 40px;
    max-width: 1000px;
    width: 100%;
    align-items: center;
}

.login-card {
    background: var(--bg-card);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    padding: 40px;
    width: 100%;
    max-width: 420px;
}

.logo-section {
    text-align: center;
    margin-bottom: 32px;
}

.logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: var(--radius-lg);
    color: white;
    margin-bottom: 16px;
}

.logo-section h1 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.tagline {
    color: var(--text-secondary);
    font-size: 14px;
}

/* Login Method Toggle */
.login-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    background: var(--bg-primary);
    padding: 4px;
    border-radius: var(--radius-md);
}

.toggle-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s;
}

.toggle-btn:hover {
    color: var(--text-primary);
}

.toggle-btn.active {
    background: white;
    color: var(--primary-color);
    box-shadow: var(--shadow-sm);
}

.code-instruction {
    font-size: 14px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 24px;
    line-height: 1.5;
}

.form-section {
    display: none;
}

.form-section.active {
    display: block;
}

.form-section h2 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 24px;
    text-align: center;
}

.input-group {
    margin-bottom: 16px;
}

.input-group label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.input-group input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: 14px;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.input-group input::placeholder {
    color: var(--text-secondary);
}

.forgot-password {
    display: block;
    text-align: right;
    font-size: 13px;
    color: var(--primary-color);
    text-decoration: none;
    margin-bottom: 20px;
}

.forgot-password:hover {
    text-decoration: underline;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    border: none;
    width: 100%;
}

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

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

.btn-social {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
}

.btn-social:hover {
    background: var(--bg-primary);
    border-color: #d1d5db;
}

.divider {
    display: flex;
    align-items: center;
    margin: 24px 0;
}

.divider::before,
.divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border-color);
}

.divider span {
    padding: 0 16px;
    font-size: 13px;
    color: var(--text-secondary);
}

.social-buttons {
    display: flex;
    gap: 12px;
}

.social-buttons .btn {
    flex: 1;
}

.switch-form {
    text-align: center;
    font-size: 14px;
    color: var(--text-secondary);
    margin-top: 24px;
}

.switch-form a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.switch-form a:hover {
    text-decoration: underline;
}

/* Features Section */
.features-section {
    flex: 1;
    color: white;
    display: none;
}

.features-section h3 {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 24px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.feature-item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: var(--radius-md);
    padding: 20px;
    transition: transform 0.2s;
}

.feature-item:hover {
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 28px;
    margin-bottom: 12px;
}

.feature-item h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.feature-item p {
    font-size: 13px;
    opacity: 0.9;
    line-height: 1.5;
}

/* Error and Success Messages */
.message {
    padding: 12px 16px;
    border-radius: var(--radius-md);
    font-size: 14px;
    margin-bottom: 16px;
    display: none;
}

.message.error {
    background: #fef2f2;
    color: var(--error-color);
    border: 1px solid #fecaca;
}

.message.success {
    background: #f0fdf4;
    color: var(--success-color);
    border: 1px solid #bbf7d0;
}

.message.show {
    display: block;
}

/* Loading State */
.btn.loading {
    opacity: 0.7;
    pointer-events: none;
}

.btn.loading::after {
    content: '';
    width: 16px;
    height: 16px;
    border: 2px solid transparent;
    border-top-color: currentColor;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Responsive Design */
@media (min-width: 900px) {
    .features-section {
        display: block;
    }
}

@media (max-width: 480px) {
    .login-card {
        padding: 24px;
    }

    .logo {
        width: 60px;
        height: 60px;
    }

    .logo svg {
        width: 36px;
        height: 36px;
    }

    .social-buttons {
        flex-direction: column;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}