andertsdb/subscriptionsense-pro

1:root {2    --primary: #6366f1;3    --primary-dark: #4f46e5;4    --text-light: #6b7280;5    --text-dark: #1f2937;6    --bg-light: #ffffff;7    --bg-dark: #111827;8}9 10.dark {11    --text-light: #9ca3af;12    --text-dark: #f3f4f6;13    --bg-light: #111827;14    --bg-dark: #030712;15}16 17body {18    font-family: 'Inter', sans-serif;19    transition: background-color 0.3s, color 0.3s;20}21 22.subscription-card {23    background: var(--bg-light);24    border-radius: 0.5rem;25    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);26    padding: 1.5rem;27    display: flex;28    align-items: center;29    transition: transform 0.2s;30}31 32.subscription-card:hover {33    transform: translateY(-2px);34}35 36.subscription-icon {37    width: 3rem;38    height: 3rem;39    border-radius: 50%;40    display: flex;41    align-items: center;42    justify-content: center;43    margin-right: 1rem;44    color: white;45    font-size: 1.25rem;46}47 48.subscription-details {49    flex-grow: 1;50}51 52.subscription-name {53    font-weight: 600;54    color: var(--text-dark);55    margin-bottom: 0.25rem;56}57 58.subscription-price {59    font-weight: 700;60    color: var(--primary);61}62 63.subscription-date {64    font-size: 0.875rem;65    color: var(--text-light);66}67 68.modal {69    z-index: 1000;70}71 72@media (min-width: 640px) {73    .subscription-list {74        grid-template-columns: repeat(2, 1fr);75    }76}77 78@media (min-width: 1024px) {79    .subscription-list {80        grid-template-columns: repeat(3, 1fr);81    }82}