/* user.css - Professional Design for RemindMe+ (Enhanced Version) */

/* Clean color palette with medical accents */
:root {
    --primary: #0071e3;
    --primary-dark: #0060d0;
    --primary-light: #4d9ff5;
    --success: #34c759;
    --error: #ff3b30;
    --warning: #ff9500;
    --info: #007aff;
    --text: #1d1d1f;
    --text-secondary: #86868b;
    --text-light: #aeaeb2;
    --border: #d6d6d6;
    --bg: #f5f5f7;
    --white: #ffffff;
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.12);
    --transition: all 0.2s ease;
    
    /* Enhanced font sizes for better readability */
    --font-size-base: 18px;
    --font-size-large: 24px;
    --font-size-small: 16px;
}

/* Base styling with better readability */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    color: var(--text);
    background-color: var(--bg);
    line-height: 1.6;
    font-size: var(--font-size-base);
}

/* Typography - Larger and clearer */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1rem;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; }
h3 { font-size: 1.75rem; }
h4 { font-size: 1.5rem; }

/* Card styling with subtle gradient and animation */
.card {
    background: var(--white);
    border-radius: 16px;
    box-shadow: var(--shadow-sm);
    padding: 2rem;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: var(--transition);
}

.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

/* Form elements - Larger and clearer */
.form-group {
    margin-bottom: 1.75rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text);
    font-size: var(--font-size-base);
}

input[type="text"],
input[type="tel"],
input[type="date"],
input[type="time"],
textarea,
select {
    width: 100%;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: var(--font-size-base);
    transition: var(--transition);
    background-color: var(--white);
    color: var(--text);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.1);
    outline: none;
    transform: scale(1.01);
}

/* Button styling - Larger with better touch targets */
.btn {
    background-color: var(--primary);
    color: white;
    padding: 16px 32px;
    border-radius: 12px;
    font-weight: 500;
    font-size: var(--font-size-base);
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.15);
}

.btn:hover:not(:disabled) {
    background-color: var(--primary-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.25);
}

.btn.disabled,
.btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

/* Tab styling with animation */
.tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 2rem;
    background-color: #f0f0f2;
    padding: 4px;
    border-radius: 12px;
    width: 100%; /* Make sure it spans full width */
}

.tab {
    flex: 1;
    padding: 14px 20px;
    text-align: center;
    cursor: pointer;
    border-radius: 8px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: var(--transition);
    font-size: var(--font-size-base);
}

.tab:hover {
    color: var(--text);
    background-color: rgba(255, 255, 255, 0.5);
}

.tab.active {
    background-color: var(--white);
    color: var(--text);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Clean toast notifications with larger font */
.toast-container {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    width: 90%;
    max-width: 420px;
}

.toast {
    background: white;
    padding: 18px 24px;
    border-radius: 12px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
    margin-bottom: 10px;
    font-size: var(--font-size-base);
    color: #333;
    display: flex;
    align-items: center;
    position: relative;
    border-left: 4px solid transparent;
    animation: slideUp 0.3s ease forwards;
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideDown {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

.toast.fade-out {
    animation: slideDown 0.3s ease forwards;
}

/* Success toast with green left border */
.toast-success {
    border-left-color: #4CAF50;
}

/* Error toast with red left border */
.toast-error {
    border-left-color: #f44336;
}

/* Info toast with blue left border */
.toast-info {
    border-left-color: #2196F3;
}

/* Warning toast with orange left border */
.toast-warning {
    border-left-color: #ff9500;
}

/* Quick template buttons - Enhanced with gradients and animations */
.quick-templates {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.quick-template-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border: none;
    border-radius: 12px;
    background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
    color: var(--text);
    font-size: var(--font-size-base);
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.quick-template-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Colored template buttons based on category */
.quick-template-btn:nth-child(1):hover {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
}

.quick-template-btn:nth-child(2):hover {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
}

.quick-template-btn:nth-child(3):hover {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
}

.quick-template-btn:nth-child(4):hover {
    background: linear-gradient(135deg, #fff3e0, #ffe0b2);
}

/* Usage progress bar - Enhanced visibility */
.usage-progress {
    margin-bottom: 24px;
}

.usage-progress-bar-container {
    width: 100%;
    height: 12px;
    background-color: #f0f0f2;
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 8px;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.1);
}

.usage-progress-bar {
    height: 100%;
    border-radius: 6px;
    transition: width 0.4s ease, background-color 0.3s ease;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.usage-progress-text {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

/* Recurrence options - Improved visual hierarchy */
.recurrence-options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 12px;
    margin-bottom: 24px;
}

.recurrence-option {
    position: relative;
    padding: 18px 12px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    transition: var(--transition);
    background-color: var(--white);
}

.recurrence-option:hover {
    border-color: var(--primary);
    background-color: rgba(0, 113, 227, 0.04);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.recurrence-option.selected {
    border-color: var(--primary);
    background-color: rgba(0, 113, 227, 0.08);
    border-width: 2px;
    transform: scale(1.02);
}

.recurrence-name {
    font-weight: 500;
    color: var(--text);
    text-transform: capitalize;
    font-size: var(--font-size-base);
}

/* Professional locked features - MODIFIED TO SHOW CONTENT */
.feature-locked {
    position: relative;
    overflow: visible; /* Changed from hidden to visible */
    cursor: pointer !important; /* Changed from not-allowed to pointer */
    opacity: 0.75; /* Added opacity instead of entirely hiding */
}

.feature-locked::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(245, 245, 247, 0.7); /* Made more transparent */
    backdrop-filter: blur(2px); /* Less blur */
    z-index: 1;
    border-radius: 12px;
}

.feature-locked::after {
    content: "";
    position: absolute;
    top: 8px;
    right: 8px;
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%238e8e93' stroke-width='2' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='5' y='11' width='14' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0110 0v4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 24px;
    z-index: 2;
}

/* Enhanced tooltip for locked features */
.feature-locked:hover .tooltip-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.tooltip-content {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: rgba(29, 29, 31, 0.95);
    color: white;
    padding: 10px 18px;
    border-radius: 10px;
    font-size: var(--font-size-small);
    font-weight: 500;
    white-space: nowrap;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}

.tooltip-content::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: rgba(29, 29, 31, 0.95) transparent transparent transparent;
}

/* Reminder preview - Enhanced with animations */
.reminder-preview {
    background: linear-gradient(135deg, #fafcff 0%, #f0f7ff 100%);
    border: 1px solid rgba(0, 113, 227, 0.12);
    border-radius: 16px;
    padding: 24px;
    margin-top: 24px;
    position: relative;
    overflow: hidden;
    transition: var(--transition);
}

.reminder-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 113, 227, 0.12);
}

.reminder-preview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary), var(--primary-light));
}

.preview-header {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.preview-app-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--primary), var(--primary-light));
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.2);
}

.preview-app-name {
    font-weight: 600;
    color: var(--text);
    font-size: var(--font-size-base);
}

.preview-time {
    margin-left: auto;
    font-size: var(--font-size-small);
    color: var(--text-light);
}

.preview-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.preview-message {
    color: var(--text-secondary);
    margin-bottom: 12px;
    font-size: var(--font-size-base);
}

.preview-date {
    font-size: var(--font-size-small);
    color: var(--primary);
    font-weight: 500;
}

/* Category-based reminder coloring */
.reminder-item[data-category="medicine"] {
    border-left: 4px solid #e91e63;
}

.reminder-item[data-category="appointment"] {
    border-left: 4px solid #2196f3;
}

.reminder-item[data-category="task"] {
    border-left: 4px solid #4caf50;
}

.reminder-item[data-category="personal"] {
    border-left: 4px solid #ff9800;
}

.reminder-item[data-category="billing"] {
    border-left: 4px solid #9c27b0;
}

.reminder-item[data-category="education"] {
    border-left: 4px solid #ff9800;
}

.reminder-item[data-category="celebration"] {
    border-left: 4px solid #f44336;
}

/* Current plan section - Enhanced design */
.current-plan-section {
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    border-radius: 20px;
    padding: 28px;
    margin-bottom: 36px;
    border: 1px solid rgba(0, 113, 227, 0.08);
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.05);
}

.current-plan-display {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-top: 16px;
}

.plan-icon {
    width: 72px;
    height: 72px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: var(--white);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Colorful plan icons */
.plan-icon.free {
    background: linear-gradient(135deg, #f5f5f7, #e8e8ec);
    color: #666;
}

.plan-icon.lite {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
}

.plan-icon.pro {
    background: linear-gradient(135deg, #fff8e1, #ffe082);
    color: #f57c00;
}

.plan-icon.ultra {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    color: #c2185b;
}

.plan-details {
    flex: 1;
}

.current-plan-name {
    font-size: var(--font-size-large);
    font-weight: 600;
    color: var(--text);
    margin-bottom: 4px;
}

.current-plan-limits {
    color: var(--text-secondary);
    font-size: var(--font-size-base);
}

/* Plan cards - Enhanced with animations and gradients */
.subscription-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-bottom: 48px;
}

.plan-card {
    background: var(--white);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.3s ease;
    position: relative;
    border: 1px solid transparent;
}

.plan-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
}

/* Plan card color themes */
.plan-card[data-plan="free"] {
    border-color: #d6d6d6;
}

.plan-card[data-plan="lite"] {
    border-color: rgba(33, 150, 243, 0.3);
}

.plan-card[data-plan="pro"] {
    border-color: rgba(255, 152, 0, 0.3);
    position: relative;
}

.plan-card[data-plan="ultra"] {
    border-color: rgba(194, 24, 91, 0.3);
}

.plan-card.active {
    box-shadow: 0 0 0 3px var(--primary);
}

.plan-header {
    padding: 28px 24px 24px;
    text-align: center;
    position: relative;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Plan header gradients */
.plan-card[data-plan="free"] .plan-header {
    background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
}

.plan-card[data-plan="lite"] .plan-header {
    background: linear-gradient(135deg, #e3f2fd 0%, #e1f5fe 100%);
}

.plan-card[data-plan="pro"] .plan-header {
    background: linear-gradient(135deg, #fff8e1 0%, #ffe0b2 100%);
}

.plan-card[data-plan="ultra"] .plan-header {
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
}

.popular-tag {
    position: absolute;
    top: 20px;
    right: 20px;
    background: var(--warning);
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 24px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3);
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3); }
    50% { box-shadow: 0 4px 20px rgba(255, 149, 0, 0.5); }
    100% { box-shadow: 0 4px 12px rgba(255, 149, 0, 0.3); }
}

.plan-icon-header {
    font-size: 48px;
    margin-bottom: 16px;
}

.plan-icon-header i {
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Colorful plan headers - Added colors to icons */
.plan-card[data-plan="free"] .plan-icon-header i {
    color: #666;
}

.plan-card[data-plan="lite"] .plan-icon-header i {
    color: #1976d2;
}

.plan-card[data-plan="pro"] .plan-icon-header i {
    color: #f57c00;
}

.plan-card[data-plan="ultra"] .plan-icon-header i {
    color: #c2185b;
}

.plan-header h4 {
    font-size: 28px;
    margin-bottom: 4px;
}

.plan-tagline {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-bottom: 20px;
}

.plan-price {
    font-size: 48px;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}

.plan-price-currency {
    font-size: 24px;
    font-weight: 500;
    vertical-align: super;
}

.plan-period {
    color: var(--text-secondary);
    font-size: var(--font-size-small);
    margin-top: 4px;
}

/* Plan features - Enhanced typography */
.plan-features {
    list-style: none;
    padding: 28px;
    margin: 0;
}

.plan-features li {
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
    color: var(--text);
    font-size: var(--font-size-base);
    line-height: 1.5;
    text-transform: none;
}

.plan-features li::first-letter {
    text-transform: uppercase;
}

.plan-features li:last-child {
    margin-bottom: 0;
}

.plan-features li::before {
    content: "";
    width: 24px;
    height: 24px;
    margin-right: 12px;
    flex-shrink: 0;
    background-size: 20px;
    background-position: center;
    background-repeat: no-repeat;
    margin-top: 2px;
}

.plan-features li[data-included="true"]::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.7071 5.29289C17.0976 5.68342 17.0976 6.31658 16.7071 6.70711L8.70711 14.7071C8.31658 15.0976 7.68342 15.0976 7.29289 14.7071L3.29289 10.7071C2.90237 10.3166 2.90237 9.68342 3.29289 9.29289C3.68342 8.90237 4.31658 8.90237 4.70711 9.29289L8 12.5858L15.2929 5.29289C15.6834 4.90237 16.3166 4.90237 16.7071 5.29289Z' fill='%2334c759'/%3E%3C/svg%3E");
}

.plan-features li[data-included="false"] {
    color: var(--text-light);
}

.plan-features li[data-included="false"]::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.29289 4.29289C4.68342 3.90237 5.31658 3.90237 5.70711 4.29289L10 8.58579L14.2929 4.29289C14.6834 3.90237 15.3166 3.90237 15.7071 4.29289C16.0976 4.68342 16.0976 5.31658 15.7071 5.70711L11.4142 10L15.7071 14.2929C16.0976 14.6834 16.0976 15.3166 15.7071 15.7071C15.3166 16.0976 14.6834 16.0976 14.2929 15.7071L10 11.4142L5.70711 15.7071C5.31658 16.0976 4.68342 16.0976 4.29289 15.7071C3.90237 15.3166 3.90237 14.6834 4.29289 14.2929L8.58579 10L4.29289 5.70711C3.90237 5.31658 3.90237 4.68342 4.29289 4.29289Z' fill='%23aeaeb2'/%3E%3C/svg%3E");
}

.plan-features li.plan-for-text {
    color: var(--primary);
    font-weight: 500;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--border);
}

.plan-features li.plan-for-text::before {
    background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10 11.25C12.0711 11.25 13.75 9.57107 13.75 7.5C13.75 5.42893 12.0711 3.75 10 3.75C7.92893 3.75 6.25 5.42893 6.25 7.5C6.25 9.57107 7.92893 11.25 10 11.25ZM10 12.5C12.7614 12.5 15 10.2614 15 7.5C15 4.73858 12.7614 2.5 10 2.5C7.23858 2.5 5 4.73858 5 7.5C5 10.2614 7.23858 12.5 10 12.5ZM5 16.25C5 13.9028 6.90279 12 9.25 12H10.75C13.0972 12 15 13.9028 15 16.25V17.5H5V16.25ZM3.75 16.25C3.75 13.2126 6.21258 10.75 9.25 10.75H10.75C13.7874 10.75 16.25 13.2126 16.25 16.25V18.125C16.25 18.4702 15.9702 18.75 15.625 18.75H4.375C4.02982 18.75 3.75 18.4702 3.75 18.125V16.25Z' fill='%230071e3'/%3E%3C/svg%3E");
}

/* Plan action button - Enhanced */
.plan-action {
    padding: 0 24px 28px;
}

.btn-plan {
    width: 100%;
    padding: 16px 24px;
    font-size: var(--font-size-base);
    font-weight: 500;
    border-radius: 14px;
    box-shadow: 0 4px 16px rgba(0, 113, 227, 0.15);
}

.btn-plan:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 113, 227, 0.25);
}

.btn-plan.disabled {
    background-color: #f0f0f2;
    color: var(--text-secondary);
    cursor: default;
    box-shadow: none;
}

/* Feature comparison table - Improved styling */
.plan-table-container {
    overflow-x: auto;
    margin-top: 16px;
    border-radius: 16px;
}

.plan-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.plan-table th,
.plan-table td {
    padding: 18px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    font-size: var(--font-size-base);
}

.plan-table th {
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    font-weight: 600;
    color: var(--text);
}

.plan-table td:first-child {
    text-align: left;
    font-weight: 500;
}

.feature-check i,
.feature-cross i {
    font-size: 24px;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.feature-check i {
    color: var(--success);
}

.feature-cross i {
    color: var(--error);
}

/* Manage reminders - Enhanced cards with animations */
.reminder-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.reminder-item {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    transition: all 0.3s ease;
    border-left-width: 4px;
    position: relative;
    overflow: hidden;
}

.reminder-item:hover {
    transform: translateX(4px);
    box-shadow: var(--shadow-md);
}

.reminder-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(0, 113, 227, 0.1);
}

.reminder-info {
    flex: 1;
}

.reminder-title {
    font-weight: 600;
    color: var(--text);
    margin-bottom: 6px;
    font-size: 18px;
}

.reminder-message {
    color: var(--text-secondary);
    margin-bottom: 10px;
    font-size: var(--font-size-base);
}

.reminder-time {
    font-size: var(--font-size-small);
    color: var(--text-light);
}

.reminder-duration {
    font-size: var(--font-size-small);
    color: var(--primary);
    margin-top: 6px;
}

/* Forever reminder indicators */
.forever-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    font-weight: 500;
}

.subscription-dependent {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--warning);
    margin-left: 12px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}

/* Priority badge for Ultra reminders */
.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: linear-gradient(135deg, #fce4ec 0%, #f8bbd0 100%);
    color: #c2185b;
    padding: 4px 10px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    margin-left: 8px;
}

/* Status badges with enhanced colors */
.reminder-status {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 24px;
    font-size: 14px;
    font-weight: 500;
    text-transform: capitalize;
    margin-top: 8px;
}

.reminder-status.pending {
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--warning);
}

.reminder-status.active {
    background-color: rgba(52, 199, 89, 0.1);
    color: var(--success);
}

.reminder-status.completed {
    background-color: rgba(134, 134, 139, 0.1);
    color: var(--text-secondary);
}

.reminder-status.cancelled {
    background-color: rgba(255, 59, 48, 0.1);
    color: var(--error);
}

.reminder-recurrence-badge {
    display: inline-block;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 8px;
    margin-left: 8px;
    background-color: rgba(0, 113, 227, 0.1);
    color: var(--primary);
    text-transform: capitalize;
    font-weight: 500;
}

/* Action buttons for reminders */
.reminder-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-icon {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px;
    transition: var(--transition);
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-cancel {
    color: var(--warning);
}

.btn-cancel:hover {
    background-color: rgba(255, 149, 0, 0.1);
    transform: scale(1.1);
}

.btn-delete {
    color: var(--error);
}

.btn-delete:hover {
    background-color: rgba(255, 59, 48, 0.1);
    transform: scale(1.1);
}

/* Empty state - Enhanced with illustration */
.empty-state {
    text-align: center;
    padding: 60px 24px;
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    border-radius: 20px;
    border: 2px dashed var(--primary);
}

.empty-state-icon {
    font-size: 56px;
    margin-bottom: 20px;
    color: var(--primary);
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.empty-state-title {
    font-size: 28px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.empty-state-description {
    color: var(--text-secondary);
    margin-bottom: 28px;
    font-size: var(--font-size-base);
}

/* Loading state - Enhanced spinner */
.loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 60px;
    text-align: center;
}

.spinner {
    border: 4px solid var(--border);
    border-radius: 50%;
    border-top-color: var(--primary);
    width: 48px;
    height: 48px;
    animation: spin 1s linear infinite;
}

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

/* Forever warning notice */
.forever-warning {
    background: linear-gradient(135deg, #fff8f0 0%, #fff3e0 100%);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-top: 16px;
    font-size: var(--font-size-small);
    color: var(--warning);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 8px;
}

.warning-notice {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    padding: 8px 12px;
    background-color: rgba(255, 149, 0, 0.1);
    color: var(--warning);
    border-radius: 8px;
    font-size: 14px;
}

/* Payment processing - Professional overlay */
.payment-processing {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    color: white;
    text-align: center;
    backdrop-filter: blur(8px);
}

.payment-processing-content {
    max-width: 420px;
    padding: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 20px;
    backdrop-filter: blur(10px);
}

.security-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.1);
    padding: 10px 20px;
    border-radius: 30px;
    margin-bottom: 28px;
    font-size: var(--font-size-base);
}

.security-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 20px;
    font-size: var(--font-size-small);
    opacity: 0.8;
}

/* Upgrade hint - Eye-catching design */
.upgrade-hint {
    background: linear-gradient(135deg, #fff8f0 0%, #fff3e0 100%);
    border: 1px solid rgba(255, 149, 0, 0.2);
    border-radius: 16px;
    padding: 20px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    animation: slideIn 0.4s ease forwards;
    box-shadow: 0 4px 16px rgba(255, 149, 0, 0.15);
}

.upgrade-hint-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.upgrade-hint-icon {
    font-size: 32px;
}

.upgrade-hint-text {
    font-size: var(--font-size-base);
}

.upgrade-hint-subtitle {
    font-size: var(--font-size-small);
    color: var(--text-secondary);
    margin-top: 4px;
}

.plan-highlight {
    font-weight: 600;
    color: var(--primary);
}

.btn-upgrade {
    padding: 12px 24px;
    font-size: var(--font-size-base);
    background: var(--warning);
    color: white;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(255, 149, 0, 0.25);
}

.btn-upgrade:hover {
    background: #e08900;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 149, 0, 0.35);
}

/* Upgrade success message */
.upgrade-success {
    background: linear-gradient(135deg, #f0fff4 0%, #e6ffed 100%);
    border: 1px solid rgba(52, 199, 89, 0.2);
    padding: 24px;
    border-radius: 16px;
    margin-bottom: 28px;
    display: flex;
    align-items: center;
    gap: 16px;
    animation: slideIn 0.4s ease forwards;
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.15);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.upgrade-success-icon {
    font-size: 40px;
    color: var(--success);
    background: rgba(52, 199, 89, 0.1);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.upgrade-success-text {
    flex: 1;
}

.upgrade-success-title {
    font-weight: 600;
    font-size: 20px;
    color: var(--text);
    margin-bottom: 4px;
}

.upgrade-success-dismiss {
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: 28px;
    cursor: pointer;
    padding: 8px;
    border-radius: 10px;
    transition: var(--transition);
}

.upgrade-success-dismiss:hover {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text);
}

/* FAQ Styles - Enhanced with colored backgrounds */
.faq-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq-category {
    background: var(--white);
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid var(--border);
    transition: var(--transition);
}

.faq-category:hover {
    box-shadow: var(--shadow-md);
}

.faq-category-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
    transition: var(--transition);
}

.faq-category-header:hover {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f5ff 100%);
}

.faq-category-icon {
    font-size: 28px;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Colored backgrounds for FAQ category icons */
.faq-category[data-category="subscription"] .faq-category-icon {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1976d2;
}

.faq-category[data-category="cooldown"] .faq-category-icon {
    background: linear-gradient(135deg, #fff8e1, #ffe0b2);
    color: #f57c00;
}

.faq-category[data-category="priority"] .faq-category-icon {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
}

.faq-category[data-category="features"] .faq-category-icon {
    background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
    color: #388e3c;
}

.faq-category[data-category="technical"] .faq-category-icon {
    background: linear-gradient(135deg, #e0f2f1, #b2dfdb);
    color: #00796b;
}

.faq-category[data-category="usage"] .faq-category-icon {
    background: linear-gradient(135deg, #fce4ec, #f8bbd0);
    color: #c2185b;
}

.faq-category-title {
    flex: 1;
    font-weight: 600;
    font-size: 20px;
    color: var(--text);
}

.faq-category-toggle {
    color: var(--text-secondary);
    transition: transform 0.3s ease;
}

.faq-category.expanded .faq-category-toggle {
    transform: rotate(180deg);
}

.faq-items {
    display: none;
    padding: 24px;
}

.faq-category.expanded .faq-items {
    display: block;
}

.faq-item {
    padding: 20px 0;
    border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.faq-question {
    font-weight: 500;
    color: var(--text);
    margin-bottom: 10px;
    font-size: var(--font-size-base);
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.faq-question::before {
    content: "Q:";
    color: var(--primary);
    font-weight: 600;
    flex-shrink: 0;
}

.faq-answer {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-left: 32px;
    font-size: var(--font-size-base);
}

.faq-highlight {
    color: var(--primary);
    font-weight: 500;
}

/* Form validation */
.form-group.error input,
.form-group.error textarea {
    border-color: var(--error);
    background-color: rgba(255, 59, 48, 0.02);
}

.form-group .error-message {
    color: var(--error);
    font-size: var(--font-size-small);
    margin-top: 6px;
    font-weight: 500;
}

/* Hourly options - Enhanced visibility */
.hourly-interval-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin-top: 12px;
}

.hourly-option {
    padding: 14px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 10px;
    cursor: pointer;
    transition: var(--transition);
    font-size: var(--font-size-base);
    font-weight: 500;
}

.hourly-option:hover {
    border-color: var(--primary);
    background-color: rgba(0, 113, 227, 0.04);
    transform: translateY(-2px);
}

.hourly-option.selected {
    border-color: var(--primary);
    background-color: rgba(0, 113, 227, 0.08);
    color: var(--primary);
    font-weight: 600;
    transform: scale(1.02);
}

/* Duration container */
.duration-container {
    margin-top: 12px;
}

.duration-container small {
    display: block;
    margin-top: 8px;
    color: var(--text-secondary);
    font-size: var(--font-size-small);
}

/* Verification notice - Professional styling */
.verification-notice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: linear-gradient(135deg, #f8fbff 0%, #f0f7ff 100%);
    border-radius: 12px;
    margin-bottom: 24px;
    border: 1px solid rgba(0, 113, 227, 0.08);
    box-shadow: 0 2px 8px rgba(0, 113, 227, 0.05);
}

.verified-badge {
    background-color: var(--success);
    color: white;
    padding: 6px 16px;
    border-radius: 24px;
    font-size: var(--font-size-small);
    font-weight: 600;
}

.plan-badge {
    padding: 6px 16px;
    border-radius: 24px;
    font-size: var(--font-size-small);
    font-weight: 600;
}

.plan-badge.free {
    background-color: #f0f0f2;
    color: #666;
}

.plan-badge.lite {
    background-color: #e3f2fd;
    color: #1976d2;
}

.plan-badge.pro {
    background-color: #fff3e0;
    color: #f57c00;
}

.plan-badge.ultra {
    background-color: #fce4ec;
    color: #c2185b;
}

.used-reminders {
    display: block;
    font-size: var(--font-size-small);
    color: var(--text-secondary);
}

/* Responsive design - Enhanced breakpoints */
@media (max-width: 768px) {
    :root {
        --font-size-base: 16px;
        --font-size-large: 22px;
        --font-size-small: 14px;
    }
    
    .tabs {
        gap: 4px;
        overflow-x: auto;
        padding: 4px;
    }
    
    .tab {
        white-space: nowrap;
        padding: 12px 18px;
    }
    
    .subscription-plans {
        grid-template-columns: 1fr;
    }
    
    .recurrence-options {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .upgrade-hint {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .upgrade-hint .btn {
        width: 100%;
        margin-top: 12px;
    }
    
    .quick-templates {
        flex-direction: column;
    }
    
    .quick-template-btn {
        width: 100%;
        justify-content: center;
    }
    
    .faq-category-header {
        padding: 16px;
    }
    
    .faq-items {
        padding: 16px;
    }
    
    .faq-item {
        padding: 12px 0;
    }
    
    .plan-table th,
    .plan-table td {
        padding: 12px 8px;
    }
    
    .feature-check,
    .feature-cross {
        font-size: 20px;
    }
    
    .hourly-interval-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-base: 16px;
        --font-size-large: 20px;
        --font-size-small: 14px;
    }
    
    .card {
        padding: 20px;
    }
    
    .btn {
        padding: 14px 24px;
    }
    
    .plan-card {
        margin-bottom: 16px;
    }
    
    .plan-price {
        font-size: 36px;
    }
    
    .plan-header {
        padding: 20px;
    }
    
    .plan-features {
        padding: 20px;
    }
    
    .current-plan-display {
        flex-direction: column;
        text-align: center;
        gap: 12px;
    }
    
    .reminder-item {
        flex-direction: column;
    }
    
    .reminder-actions {
        width: 100%;
        justify-content: flex-end;
        margin-top: 12px;
    }
    
    .toast-container {
        width: calc(100% - 32px);
        margin: 0 16px;
        left: 0;
        transform: none;
    }
}

/* Tab content visibility */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* Button loading state - Enhanced */
.btn.loading {
    opacity: 0.7;
    cursor: not-allowed;
}

.btn.loading .spinner {
    display: inline-block !important;
    margin-right: 8px;
}

.btn-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    :root {
        --primary: #0051a2;
        --text: #000000;
        --text-secondary: #333333;
        --border: #000000;
        --bg: #ffffff;
        --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
        --shadow-md: 0 3px 6px rgba(0, 0, 0, 0.3);
        --shadow-lg: 0 6px 12px rgba(0, 0, 0, 0.4);
    }
    
    .card {
        border: 2px solid var(--border);
    }
    
    .btn {
        border: 2px solid var(--border);
    }
    
    .plan-card.active {
        box-shadow: 0 0 0 4px var(--primary);
    }
}


/* Print styles */
@media print {
    .tabs,
    .btn,
    .btn-icon,
    .reminder-actions,
    .toast-container,
    .payment-processing {
        display: none !important;
    }
    
    body {
        background: white;
        color: black;
    }
    
    .card {
        box-shadow: none;
        border: 1px solid #ccc;
    }
    
    .reminder-item {
        border: 1px solid #ccc;
        margin-bottom: 10px;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--bg);
}

::-webkit-scrollbar-thumb {
    background: var(--border);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--text-secondary);
}

/* Focus indicators for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.btn:focus-visible {
    outline-offset: 4px;
}

/* Skip to main content link for accessibility */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px;
    z-index: 100;
    text-decoration: none;
}

.skip-link:focus {
    top: 0;
}


/* Force light mode and dark mode classes */
.force-light {
    --primary: #0071e3;
    --primary-dark: #0060d0;
    --primary-light: #4d9ff5;
    --text: #1d1d1f;
    --text-secondary: #86868b;
    --text-light: #aeaeb2;
    --border: #d6d6d6;
    --bg: #f5f5f7;
    --white: #ffffff;
}


/* Additional utility classes */
.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }

.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }

/* Visual feedback for loading states */
.loading-skeleton {
    background: linear-gradient(90deg, var(--border) 25%, var(--bg) 50%, var(--border) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    border-radius: 8px;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* Error states */
.error-state {
    background: rgba(255, 59, 48, 0.05);
    border: 1px solid rgba(255, 59, 48, 0.2);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin: 20px 0;
}

.error-state-icon {
    font-size: 48px;
    color: var(--error);
    margin-bottom: 12px;
}

.error-state-message {
    color: var(--error);
    font-weight: 500;
    margin-bottom: 8px;
}

/* Success animation */
@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

.success-animation {
    animation: successPulse 0.5s ease;
}

/* Fade animation utility */
.fade-enter {
    opacity: 0;
}

.fade-enter-active {
    opacity: 1;
    transition: opacity 0.3s ease;
}

.fade-exit {
    opacity: 1;
}

.fade-exit-active {
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Interactive hover states */
.interactive:hover {
    cursor: pointer;
    background-color: rgba(0, 113, 227, 0.04);
}

/* Badge utilities */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 16px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.5;
}

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

.badge-success {
    background-color: var(--success);
    color: white;
}

.badge-warning {
    background-color: var(--warning);
    color: white;
}

.badge-error {
    background-color: var(--error);
    color: white;
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

/* Custom checkbox styling */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.custom-checkbox input[type="checkbox"] {
    opacity: 0;
    position: absolute;
}

.custom-checkbox-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 6px;
    margin-right: 12px;
    position: relative;
    transition: var(--transition);
}

.custom-checkbox input[type="checkbox"]:checked + .custom-checkbox-indicator {
    background-color: var(--primary);
    border-color: var(--primary);
}

.custom-checkbox input[type="checkbox"]:checked + .custom-checkbox-indicator::after {
    content: '?';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
}

/* Custom radio button styling */
.custom-radio {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.custom-radio input[type="radio"] {
    opacity: 0;
    position: absolute;
}

.custom-radio-indicator {
    width: 24px;
    height: 24px;
    border: 2px solid var(--border);
    border-radius: 50%;
    margin-right: 12px;
    position: relative;
    transition: var(--transition);
}

.custom-radio input[type="radio"]:checked + .custom-radio-indicator {
    border-color: var(--primary);
}

.custom-radio input[type="radio"]:checked + .custom-radio-indicator::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--primary);
}

/* Modal overlay */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.modal-content {
    background: var(--white);
    border-radius: 20px;
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    padding: 32px;
    position: relative;
}

.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: var(--text-secondary);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    transition: var(--transition);
}

.modal-close:hover {
    background: var(--bg);
    color: var(--text);
}

/* Dropdown styling */
.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    position: absolute;
    top: 100%;
    left: 0;
    background: var(--white);
    min-width: 200px;
    box-shadow: var(--shadow-lg);
    border-radius: 12px;
    border: 1px solid var(--border);
    z-index: 100;
    margin-top: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
}

.dropdown.active .dropdown-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-item {
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--transition);
    border-bottom: 1px solid var(--border);
}

.dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-item:hover {
    background: var(--bg);
}

html {
       color-scheme: light !important;
   }
   body {
       background-color: var(--bg) !important;
       color: var(--text) !important;
   }

/* End of user.css - Professional Design for RemindMe+ (Enhanced Version) */