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

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    line-height: 1.5;
    color: var(--primary-text);
    background: var(--surface-primary);
    min-height: 100vh;
    font-size: 14px;
}

:root {
    --primary-text: #172B4D;
    --secondary-text: #5E6C84;
    --accent-blue: #0052CC;
    --border-color: #DFE1E6;
    --surface-primary: #F8F9FA;
    --surface-secondary: #FFFFFF;
    --text-title: #172B4D;
    --text-section: #174b99;
    --theme-toggle-hover: #E6F7FF;
    --theme-toggle-icon: #172B4D;

    --holiday-bg: #E6F7FF;
    --holiday-border: #91D5FF;
    --holiday-text: #172B4D;
    --holiday-hover-bg: #91D5FF;
    --holiday-hover-border: #40A9FF;
    --holiday-extra-bg: #fff3cd;
    --holiday-extra-border: #ffa500;
    --holiday-description-text: #5E6C84;
    --holiday-extra-info-text: #5E6C84;
    --vip-name-text: #8B4513;

    --widget-calm-bg: #E6F7FF;
    --widget-calm-border: #91D5FF;
    --widget-calm-gift-box: #91D5FF;
    --widget-calm-gift-shadow: #096DD9;
    --widget-calm-gift-lid: #40A9FF;
    --widget-calm-gift-lid-highlight: #91D5FF;
    --widget-calm-ribbon: #0052CC;
    --widget-calm-ribbon-highlight: #1890FF;
    --widget-calm-ribbon-h: #0052CC;
    --widget-calm-ribbon-h-highlight: #1890FF;
    --widget-calm-bow: #0052CC;
    --widget-calm-bow-left: #1890FF;
    --widget-calm-bow-right: #1890FF;
    --widget-calm-bow-center: #096DD9;
    --dropdown-header-bg: linear-gradient(135deg, #E6F7FF 0%, #91D5FF 100%);
    --dropdown-header-text: #172B4D;
    --dropdown-item-hover: #E6F7FF;
    --dropdown-avatar-bg: linear-gradient(135deg, #40A9FF, #1890FF);
    --dropdown-name: #172B4D;
    --dropdown-date: #5E6C84;
    --dropdown-days: #0052CC;
    --dropdown-days-label: #5E6C84;
    --dropdown-scrollbar-thumb: #91D5FF;
    --dropdown-scrollbar-thumb-hover: #40A9FF;
    --dropdown-today-bg: linear-gradient(135deg, #fff9e6, #fff3cd);
    --dropdown-today-border: #ffd54f;
    --dropdown-today-days: #ff8c00;
    --today-badge-bg: #ff8c00;
    --today-badge-text: white;
    --widget-count-text: #172B4D;
    --widget-festive-count-text: #8B4513;
    --widget-festive-bg: linear-gradient(135deg, #fff9e6 0%, #fff3cd 100%);
    --widget-festive-border: #ffd54f;
    --widget-festive-bg-hover: linear-gradient(135deg, #fff3cd 0%, #ffe082 100%);
    --container-bg-gradient: linear-gradient(135deg, var(--surface-secondary) 0%, var(--light-blue) 100%);
    --weather-card-border: var(--medium-blue);
    --weather-card-border-hover: var(--bright-blue);
    --weather-city-text: #172B4D;
    --weather-temperature-text: #172B4D;
    --weather-gradient: linear-gradient(to right,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 255, 255, 0.85) 30%,
    rgba(255, 255, 255, 0.6) 50%,
    rgba(255, 255, 255, 0.3) 70%,
    rgba(255, 255, 255, 0.1) 85%,
    transparent 100%
    );
    --weather-gradient-hover: linear-gradient(to right,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.75) 30%,
    rgba(255, 255, 255, 0.5) 50%,
    rgba(255, 255, 255, 0.25) 70%,
    rgba(255, 255, 255, 0.05) 85%,
    transparent 100%
    );
    --weather-details-text: #5E6C84;
    --weather-feels-like-text: #5E6C84;

    --light-blue: #E6F7FF;
    --medium-blue: #91D5FF;
    --bright-blue: #40A9FF;
    --deep-blue: #1890FF;
    --dark-blue: #096DD9;

    --success-green: #36B37E;
    --warning-orange: #FF991F;
    --error-red: #DE350B;
}

body.dark {
    --surface-primary: #1E2124;
    --surface-secondary: #252A2F;
    --text-title: #FFFFFF;
    --text-section: #E0E0E0;
    --theme-toggle-hover: rgba(64, 169, 255, 0.15);
    --theme-toggle-icon: #FFFFFF;

    --holiday-bg: rgba(0, 82, 204, 0.35);
    --holiday-border: rgba(0, 82, 204, 0.45);
    --holiday-text: #E0E0E0;
    --holiday-hover-bg: rgba(0, 82, 204, 0.45);
    --holiday-hover-border: rgba(64, 169, 255, 0.55);
    --holiday-extra-bg: rgba(255, 153, 31, 0.35);
    --holiday-extra-border: rgba(255, 153, 31, 0.45);
    --holiday-description-text: #A0A0A0;
    --holiday-extra-info-text: #A0A0A0;
    --vip-name-text: #8B4513;

    --widget-calm-bg: rgba(0, 82, 204, 0.25);
    --widget-calm-border: rgba(0, 82, 204, 0.35);
    --widget-calm-gift-box: rgba(145, 213, 255, 0.7);
    --widget-calm-gift-shadow: rgba(145, 213, 255, 0.85);
    --widget-calm-gift-lid: rgba(64, 169, 255, 0.8);
    --widget-calm-gift-lid-highlight: rgba(145, 213, 255, 0.7);
    --widget-calm-ribbon: rgba(0, 82, 204, 0.7);
    --widget-calm-ribbon-highlight: rgba(24, 144, 255, 0.8);
    --widget-calm-ribbon-h: rgba(0, 82, 204, 0.7);
    --widget-calm-ribbon-h-highlight: rgba(24, 144, 255, 0.8);
    --widget-calm-bow: rgba(0, 82, 204, 0.7);
    --widget-calm-bow-left: rgba(24, 144, 255, 0.8);
    --widget-calm-bow-right: rgba(24, 144, 255, 0.8);
    --widget-calm-bow-center: rgba(145, 213, 255, 0.85);
    --dropdown-header-bg: linear-gradient(135deg, rgba(0, 82, 204, 0.25) 0%, rgba(0, 82, 204, 0.35) 100%);
    --dropdown-header-text: #E0E0E0;
    --dropdown-item-hover: rgba(0, 82, 204, 0.2);
    --dropdown-avatar-bg: linear-gradient(135deg, rgba(64, 169, 255, 0.8), rgba(24, 144, 255, 0.9));
    --dropdown-name: #E0E0E0;
    --dropdown-date: #A0A0A0;
    --dropdown-days: #40A9FF;
    --dropdown-days-label: #A0A0A0;
    --dropdown-scrollbar-thumb: rgba(64, 169, 255, 0.4);
    --dropdown-scrollbar-thumb-hover: rgba(64, 169, 255, 0.6);
    --dropdown-today-bg: linear-gradient(135deg, rgba(255, 153, 31, 0.25), rgba(255, 153, 31, 0.35));
    --dropdown-today-border: rgba(255, 153, 31, 0.45);
    --dropdown-today-days: #FF991F;
    --today-badge-bg: rgba(255, 153, 31, 0.45);
    --today-badge-text: #FFFFFF;
    --widget-count-text: #E0E0E0;
    --widget-festive-count-text: #FFFFFF;
    --widget-festive-bg: linear-gradient(135deg, rgba(255, 249, 230, 0.3) 0%, rgba(255, 243, 205, 0.3) 100%);
    --widget-festive-border: rgba(255, 213, 79, 0.3);
    --widget-festive-bg-hover: linear-gradient(135deg, rgba(255, 243, 205, 0.35) 0%, rgba(255, 224, 130, 0.35) 100%);
    --container-bg-gradient: var(--surface-secondary);
    --weather-card-border: rgba(64, 169, 255, 0.4);
    --weather-card-border-hover: rgba(64, 169, 255, 0.6);
    --weather-city-text: #E0E0E0;
    --weather-temperature-text: #FFFFFF;
    --weather-gradient: linear-gradient(to right,
    rgba(30, 33, 36, 0.6) 0%,
    rgba(30, 33, 36, 0.5) 30%,
    rgba(30, 33, 36, 0.4) 50%,
    rgba(30, 33, 36, 0.3) 70%,
    rgba(30, 33, 36, 0.1) 85%,
    transparent 100%
    );
    --weather-gradient-hover: linear-gradient(to right,
    rgba(30, 33, 36, 0.7) 0%,
    rgba(30, 33, 36, 0.6) 30%,
    rgba(30, 33, 36, 0.5) 50%,
    rgba(30, 33, 36, 0.35) 70%,
    rgba(30, 33, 36, 0.15) 85%,
    transparent 100%
    );
    --weather-details-text: #A0A0A0;
    --weather-feels-like-text: #A0A0A0;
}

#app {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background-image: url('../images/background.png');
    background-repeat: repeat;
    background-size: 180px;
}

body.dark #app {
    background-color: rgba(30, 33, 36, 0.7);
    background-blend-mode: multiply;
}

.header {
    background: var(--surface-secondary);
    border-bottom: 1px solid var(--border-color);
    padding: 12px 0;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.header-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-title);
    text-align: center;
    flex: 1;
    letter-spacing: -0.02em;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', sans-serif;
    margin: 0;
    padding: 8px 60px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.theme-toggle {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}

.theme-toggle:hover {
    background: var(--theme-toggle-hover);
}

.theme-icon {
    font-size: 24px;
    line-height: 1;
    user-select: none;
    width: 24px;
    height: 24px;
}

.theme-icon img {
    width: 100%;
    height: 100%;
}

.main-content {
    flex: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
    width: 100%;
}

.section-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-section);
    margin-bottom: 20px;
    text-align: left;
    letter-spacing: -0.01em;
}

.weather-container,
.names-container,
.holidays-container {
    background: var(--surface-secondary);
    padding: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    box-shadow: none;
    background: var(--container-bg-gradient);
}

.weather-section,
.holidays-section,
.names-section {
    margin-bottom: 24px;
}

.holidays-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.holiday-item {
    background: var(--holiday-bg);
    color: var(--holiday-text);
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    border: 1px solid var(--holiday-border);
    transition: all 0.2s ease;
    position: relative;
    padding: 16px 20px;
}

.holiday-item:hover {
    background: var(--holiday-hover-bg);
    border-color: var(--holiday-hover-border);
    transform: translateY(-1px);
}

.holiday-extra-info {
    color: var(--holiday-extra-info-text);
    margin-left: 8px;
    font-size: 0.95em;
}

.holiday-description {
    margin-top: 8px;
    font-size: 0.9em;
    color: var(--holiday-description-text);
    line-height: 1.4;
}

.names-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.name-item {
    background: var(--holiday-bg);
    color: var(--holiday-text);
    border-radius: 6px;
    font-size: 16px;
    font-weight: 500;
    border: 1px solid var(--holiday-border);
    transition: all 0.2s ease;
    position: relative;
    padding: 12px 16px 12px 36px;
}

.name-item::before {
    content: '🎂';
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
}

.name-item.vip-name {
    background: linear-gradient(135deg, #fff3cd, #ffd700);
    border: 2px solid #ffa500;
    font-weight: 600;
    color: var(--vip-name-text);
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}

.name-item.vip-name::before {
    content: '⭐';
    font-size: 18px;
}

.name-item.vip-name:hover {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    border-color: #ff8c00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
}

.name-item:hover {
    background: var(--holiday-hover-bg);
    border-color: var(--holiday-hover-border);
    transform: translateY(-1px);
}

.name-item.loading {
    background: var(--holiday-bg);
    color: var(--secondary-text);
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite;
}

.name-item.loading::before {
    content: '⏳';
    animation: spin 1s linear infinite;
}

.holiday-item.loading {
    background: var(--holiday-bg);
    color: var(--secondary-text);
    font-style: italic;
    animation: pulse 1.5s ease-in-out infinite;
}

.holiday-item.loading::before {
    content: '⏳';
    animation: spin 1s linear infinite;
}

.extra-holiday-item {
    background-color: var(--holiday-extra-bg);
    border: 2px solid var(--holiday-extra-border);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(255, 165, 0, 0.3);
}

.extra-holiday-item:hover {
    background-color: rgba(255, 153, 31, 0.25);
    border-color: #ff8c00;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 165, 0, 0.4);
}

.weather-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

.weather-card {
    background: var(--surface-secondary);
    padding: 0;
    border-radius: 12px;
    border: 1px solid var(--weather-card-border);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
    min-height: 200px;

    background-size: auto 100%;
    background-position: center right;
    background-repeat: no-repeat;
}

.weather-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--weather-gradient);
    z-index: 1;
}

.weather-card-content {
    position: relative;
    z-index: 2;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.weather-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    border-color: var(--weather-card-border-hover);
}

.weather-card:hover::before {
    background: var(--weather-gradient-hover);
}

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

.city-header h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--weather-city-text);
    margin: 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.weather-block {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.weather-emoji {
    font-size: 48px;
}

.temperature {
    font-size: 36px;
    font-weight: 700;
    color: var(--weather-temperature-text);
}

.feels-like {
    font-size: 14px;
    color: var(--weather-feels-like-text);
    margin-bottom: 12px;
}

.weather-details {
    display: flex;
    gap: 16px;
    font-size: 14px;
    color: var(--weather-details-text);
}

.weather-details span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.weather-list .loading {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px;
    color: var(--secondary-text);
    font-style: italic;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

@keyframes spin {
    from {
        transform: translateY(-50%) rotate(0deg);
    }
    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@media (max-width: 768px) {
   .header-content {
       flex-direction: row;
       gap: 8px;
       padding: 0 16px;
       justify-content: space-between;
   }

   .title {
       font-size: 24px;
       text-align: center;
       flex: 1;
       min-width: 0;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
       padding: 0 4px;
   }

   .theme-toggle {
       position: relative;
       right: auto;
       top: auto;
       transform: none;
       flex: 0 0 auto;
   }

   .main-content {
       padding: 16px;
   }

   .weather-container,
   .holidays-container,
   .names-container {
       padding: 20px;
   }

   .holiday-item {
       padding: 12px 16px;
       font-size: 16px;
   }

   .name-item {
       padding: 10px 14px 10px 30px;
       font-size: 14px;
   }

   .name-item:before {
       left: 6px;
   }

    .weather-list {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .weather-card {
        min-height: 180px;
    }

    .weather-card-content {
        padding: 16px;
    }

    .weather-emoji {
        font-size: 40px;
    }

    .temperature {
        font-size: 28px;
    }

    .city-header h3 {
        font-size: 18px;
    }
}

/* === ВИДЖЕТ ДНЕЙ РОЖДЕНИЯ === */
.header-content {
    position: relative;
}

.birthday-widget {
    position: absolute;
    left: 24;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 100;
    -webkit-tap-highlight-color: transparent;
}

.birthday-widget.festive {
    background: var(--widget-festive-bg);
    border: 1px solid var(--widget-festive-border);
}

.birthday-widget.festive:hover {
    background: var(--widget-festive-bg-hover);
}

.birthday-widget.festive .birthday-count {
    color: var(--widget-festive-count-text);
}

.birthday-widget.compact {
    padding: 6px 10px;
}

.gift-icon {
    width: 28px;
    height: 28px;
    position: relative;
}

.gift-icon img,
.gift-icon svg {
    width: 100%;
    height: 100%;
    animation: giftBounce 2s ease-in-out infinite;
}

.birthday-widget.festive .gift-icon {
    filter: drop-shadow(0 0 8px rgba(255, 193, 7, 0.5));
}

/* Спокойный вариант виджета (> 7 дней) */
.birthday-widget.calm {
    background: var(--widget-calm-bg);
    border: 1px solid var(--widget-calm-border);
}

.birthday-widget.calm:hover {
    background: var(--widget-calm-bg);
    border-color: var(--widget-calm-border);
}

.birthday-widget.calm .confetti {
    display: none;
}

.birthday-widget.calm .gift-icon img,
.birthday-widget.calm .gift-icon svg {
    animation: none;
}

/* Цвета SVG иконки для calm варианта */
.birthday-widget.calm .gift-box-main {
    fill: var(--widget-calm-gift-box);
}

.birthday-widget.calm .gift-box-shadow {
    fill: var(--widget-calm-gift-shadow);
}

.birthday-widget.calm .gift-lid-main {
    fill: var(--widget-calm-gift-lid);
}

.birthday-widget.calm .gift-lid-highlight {
    fill: var(--widget-calm-gift-lid-highlight);
}

.birthday-widget.calm .gift-ribbon-main {
    fill: var(--widget-calm-ribbon);
}

.birthday-widget.calm .gift-ribbon-highlight {
    fill: var(--widget-calm-ribbon-highlight);
}

.birthday-widget.calm .gift-ribbon-horizontal {
    fill: var(--widget-calm-ribbon-h);
}

.birthday-widget.calm .gift-ribbon-horizontal-highlight {
    fill: var(--widget-calm-ribbon-h-highlight);
}

.birthday-widget.calm .gift-bow-main {
    fill: var(--widget-calm-bow);
}

.birthday-widget.calm .gift-bow-left {
    fill: var(--widget-calm-bow-left);
}

.birthday-widget.calm .gift-bow-right {
    fill: var(--widget-calm-bow-right);
}

.birthday-widget.calm .gift-bow-center {
    fill: var(--widget-calm-bow-center);
}

/* Цвета SVG иконки для festive варианта (по умолчанию) */
/* Дефолтные цвета SVG иконки (festive) */
.gift-box-main {
    fill: #FF6B6B;
}

.gift-box-shadow {
    fill: #EE5A5A;
}

.gift-lid-main {
    fill: #FF8E8E;
}

.gift-lid-highlight {
    fill: #FFA5A5;
}

.gift-ribbon-main {
    fill: #FFD93D;
}

.gift-ribbon-highlight {
    fill: #FFE066;
}

.gift-ribbon-horizontal {
    fill: #FFD93D;
}

.gift-ribbon-horizontal-highlight {
    fill: #FFE066;
}

.gift-bow-main {
    fill: #FFD93D;
}

.gift-bow-left {
    fill: #FFE066;
}

.gift-bow-right {
    fill: #FFE066;
}

.gift-bow-center {
    fill: #FFC107;
}

.birthday-widget.festive .gift-box-main {
    fill: #FF6B6B;
}

.birthday-widget.festive .gift-box-shadow {
    fill: #EE5A5A;
}

.birthday-widget.festive .gift-lid-main {
    fill: #FF8E8E;
}

.birthday-widget.festive .gift-lid-highlight {
    fill: #FFA5A5;
}

.birthday-widget.festive .gift-ribbon-main {
    fill: #FFD93D;
}

.birthday-widget.festive .gift-ribbon-highlight {
    fill: #FFE066;
}

.birthday-widget.festive .gift-ribbon-horizontal {
    fill: #FFD93D;
}

.birthday-widget.festive .gift-ribbon-horizontal-highlight {
    fill: #FFE066;
}

.birthday-widget.festive .gift-bow-main {
    fill: #FFD93D;
}

.birthday-widget.festive .gift-bow-left {
    fill: #FFE066;
}

.birthday-widget.festive .gift-bow-right {
    fill: #FFE066;
}

.birthday-widget.festive .gift-bow-center {
    fill: #FFC107;
}

.birthday-count {
    font-size: 13px;
    font-weight: 600;
    color: var(--widget-count-text);
    white-space: nowrap;
}

/* Конфетти */
.confetti {
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: confettiFall 3s ease-in-out infinite;
    pointer-events: none;
}

.confetti:nth-child(1) { left: 10%; animation-delay: 0s; background: #ff6b6b; }
.confetti:nth-child(2) { left: 30%; animation-delay: 0.5s; background: #4ecdc4; }
.confetti:nth-child(3) { left: 50%; animation-delay: 1s; background: #ffe66d; }
.confetti:nth-child(4) { left: 70%; animation-delay: 1.5s; background: #95e1d3; }
.confetti:nth-child(5) { left: 90%; animation-delay: 2s; background: #ffa500; }

/* Анимации */
@keyframes giftBounce {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(-5deg); }
    20% { transform: rotate(5deg); }
    30% { transform: rotate(-5deg); }
    40% { transform: rotate(0deg); }
}

@keyframes confettiFall {
    0% { transform: translateY(-10px) rotate(0deg); opacity: 1; }
    100% { transform: translateY(20px) rotate(360deg); opacity: 0; }
}

/* Мобильные стили для виджета */
@media (max-width: 768px) {
    .gift-icon {
        width: 24px;
        height: 24px;
    }

    .birthday-count {
        font-size: 11px;
    }

    .birthday-widget {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        z-index: auto;
        padding: 4px 8px;
    }

    /* Мобильные стили для выпадающего меню */
    .birthday-dropdown {
        width: calc(100vw - 40px);
        max-width: 300px;
    }

    .birthday-list-item {
        padding: 12px 14px;
    }

    .birthday-avatar {
        width: 38px;
        height: 38px;
        font-size: 17px;
    }

    .birthday-name {
        font-size: 14px;
    }

    .birthday-date {
        font-size: 12px;
    }

    .days-count {
        font-size: 14px;
    }

    .days-label {
        font-size: 10px;
    }
}

/* === ВЫПАДАЮЩЕЕ МЕНЮ ДНЕЙ РОЖДЕНИЯ === */
.birthday-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    width: 340px;
    background: var(--surface-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.25s ease;
    z-index: 200;
}

.birthday-widget:hover .birthday-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.birthday-dropdown-header {
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-color);
    background: var(--dropdown-header-bg);
    border-radius: 12px 12px 0 0;
}

.birthday-dropdown-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--dropdown-header-text);
    margin: 0;
}

.birthday-list {
    max-height: 450px;
    overflow-y: auto;
    padding: 8px;
}

/* Скроллбар для списка */
.birthday-list::-webkit-scrollbar {
    width: 6px;
}

.birthday-list::-webkit-scrollbar-track {
    background: var(--surface-primary);
    border-radius: 3px;
}

.birthday-list::-webkit-scrollbar-thumb {
    background: var(--dropdown-scrollbar-thumb);
    border-radius: 3px;
}

.birthday-list::-webkit-scrollbar-thumb:hover {
    background: var(--dropdown-scrollbar-thumb-hover);
}

/* Элементы списка дней рождения */
.birthday-list-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

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

.birthday-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--dropdown-avatar-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: white;
    flex-shrink: 0;
}

.birthday-info {
    flex: 1;
    min-width: 0;
}

.birthday-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--dropdown-name);
    margin-bottom: 2px;
}

.birthday-date {
    font-size: 13px;
    color: var(--dropdown-date);
}

.birthday-days {
    text-align: right;
    flex-shrink: 0;
}

.days-count {
    font-size: 16px;
    font-weight: 700;
    color: var(--dropdown-days);
}

.days-count.urgent {
    color: var(--error-red);
}

.days-count.soon {
    color: var(--warning-orange);
}

.days-label {
    font-size: 11px;
    color: var(--dropdown-days-label);
}

/* Индикатор "сегодня" */
.birthday-list-item.today {
    background: var(--dropdown-today-bg);
    border: 1px solid var(--dropdown-today-border);
}

.birthday-list-item.today .days-count {
    color: var(--dropdown-today-days);
}

.today-badge {
    display: inline-block;
    background: var(--today-badge-bg);
    color: var(--today-badge-text);
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    text-transform: uppercase;
}