/* greeting.css - 完整修改版（统一使用 padding-bottom: 10px） */
.greeting-section { padding: 0 0 10px 0; position: relative; }

.greeting-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--container-padding-xs);
}
@media (min-width:576px) { .greeting-container { padding: 0 var(--container-padding-sm); } }
@media (min-width:768px) {
    .greeting-container { padding: 0 var(--container-padding-md); gap: 12px; }
    .greeting-section { padding: 0 0 10px 0; }
}
@media (min-width:992px) {
    .greeting-container { padding: 0 var(--container-padding-lg); gap: 12px; }
    .greeting-section { padding: 0 0 10px 0; }
}
@media (min-width:1200px) {
    .greeting-container { padding: 0 var(--container-padding-xl); }
    .greeting-section { padding: 0 0 10px 0; }
}

.greeting-main-card {
    background: var(--bg-card);
    border-radius: 10px;
    border: 1px solid var(--border-color);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.greeting-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    flex-wrap: nowrap;
    padding: 0;
}

.greeting-left-card {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 8px;
    border: none;
    border-radius: 8px;
    background: var(--bg-card);
}

.greeting-text h1 {
    font-size: 1.5em !important;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: .02em;
    display: inline-block;
}
.greeting-text h1 .greeting-emoji {
    display: inline-block;
    margin-right: 6px;
    color: var(--primary-color);
}
.greeting-text h1 .greeting-text-content {
    color: var(--text-primary);
    font-weight: 700;
}

.primary-holiday-container {
    display: flex;
    align-items: center;
    min-width: 0;
    width: 100%;
}
.primary-holiday {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.5em;
    min-width: 0;
    flex-wrap: nowrap;
    width: 100%;
}
.primary-holiday .holiday-icon { font-size: 1em; flex-shrink: 0; }
.primary-holiday .holiday-name {
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1 1 auto;
}
.primary-holiday .holiday-countdown {
    background: rgba(67,97,238,.15);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: .7em;
    font-weight: 500;
    color: #fff !important;
    display: inline-block;
    white-space: nowrap;
    flex-shrink: 0;
}
.primary-holiday .holiday-countdown.active-countdown {
    background: #10b981;
    color: #fff;
}

.secondary-holidays-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0;
    width: 100%;
}
.secondary-holiday-item {
    display: inline-flex;
    align-items: center;
    background: rgba(67,97,238,.08);
    padding: 4px 10px;
    border-radius: 20px;
    font-size: 11px;
    color: var(--text-primary);
    max-width: 100%;
    flex-shrink: 0;
}
.secondary-name { display: inline-block; }

.datetime {
    background: var(--bg-card);
    padding: 8px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 120px;
    flex-shrink: 0;
}
.datetime-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.expand-holiday-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 10px;
    cursor: pointer;
    color: var(--primary-color);
    transition: all .2s;
    white-space: nowrap;
    flex-shrink: 0;
    line-height: 1.5;
}
.expand-holiday-btn:hover {
    background: rgba(67,97,238,.1);
    border-color: var(--primary-color);
}

#currentTime {
    font-size: 1.05em;
    font-weight: 600;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    margin-left: auto;
    text-align: right;
}
#currentDate {
    font-size: .75em;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: right;
}

.fish-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 0;
    margin-top: 12px;
}

.fish-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    min-height: 44px;
    overflow: visible;
    user-select: none;
    box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.fish-btn:active { transform: scale(.95); }
.fish-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,.1);
}
.fish-btn[data-type="merit"] {
    background: var(--bg-card);
    color: #70c1ff;
    border-color: rgba(112,193,255,.3);
}
.fish-btn[data-type="luck"] {
    background: var(--bg-card);
    color: #ff9e9e;
    border-color: rgba(255,158,158,.3);
}
.fish-btn[data-type="wealth"] {
    background: var(--bg-card);
    color: #FFB600;
    border-color: rgba(255,214,112,.3);
}
.fish-btn[data-type="health"] {
    background: var(--bg-card);
    color: #8ddf8d;
    border-color: rgba(141,223,141,.3);
}
.fish-btn i {
    font-size: 16px;
    transition: transform .2s ease;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}
.fish-btn:hover i {
    transform: scale(1.05) translateY(-1px);
    filter: drop-shadow(0 2px 4px rgba(0,0,0,.2));
}
.fish-count {
    font-size: .9em;
    font-weight: 700;
    background: rgba(0,0,0,.05);
    padding: 2px 6px;
    border-radius: 6px;
    min-width: 26px;
    text-align: center;
    transition: all .2s ease;
    text-shadow: 0 1px 1px rgba(0,0,0,.1);
}

.bookmark-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 16px;
    text-decoration: none;
    color: #9575CD;
    width: 100%;
    font-size: 12px;
    font-weight: 500;
}
.bookmark-btn i { font-size: 16px; }
.bookmark-btn span { font-size: 12px; }

@keyframes floatUp {
    from { opacity:1; transform:translate(-50%,-50%) scale(1); }
    to { opacity:0; transform:translate(-50%,-100px) scale(1.3); }
}
.fish-effect {
    animation: floatUp 1.2s ease-out forwards;
    z-index: 1000;
    pointer-events: none;
}

/* 响应式 - 大屏到中屏 */
@media (max-width:992px) {
    .greeting-main-card { padding: 6px; gap: 6px; }
    .greeting-top-row { gap: 6px; }
    .greeting-left-card { padding: 6px; gap: 6px; }
    .greeting-text h1 { font-size:1.3em !important; }
    .primary-holiday { font-size:1.3em; }
    .primary-holiday .holiday-countdown { padding:2px 5px; font-size:.7em; }
    .datetime { padding:6px; gap:6px; }
    .datetime-row { gap:6px; }
    #currentTime { font-size:.95em; }
    #currentDate { font-size:.7em; }
    .expand-holiday-btn { font-size:9px; padding:2px 6px; }
    .fish-section { gap:6px; margin-top:10px; }
    .fish-btn { padding:5px 8px; min-height:40px; }
    .fish-btn i { font-size:14px; }
    .fish-count { font-size:.85em; padding:2px 5px; }
    .bookmark-btn { gap:6px; }
}
@media (max-width:768px) {
    .greeting-section { padding: 0 0 10px 0; }
    .greeting-main-card { padding:5px; gap:5px; }
    .greeting-top-row { gap:5px; }
    .greeting-left-card { padding:5px; gap:5px; }
    .greeting-text h1 { font-size:1.1em !important; }
    .primary-holiday { font-size:1.1em; }
    .primary-holiday .holiday-countdown { padding:2px 4px; font-size:.65em; }
    .datetime { padding:5px; gap:5px; min-width:100px; }
    #currentTime { font-size:.85em; }
    #currentDate { font-size:.65em; }
    .expand-holiday-btn { font-size:8px; padding:2px 5px; }
    .fish-section { gap:5px; margin-top:10px; }
    .fish-btn { padding:4px 6px; min-height:36px; }
    .fish-btn i { font-size:12px; }
    .fish-count { font-size:.8em; padding:1px 4px; }
    .secondary-holiday-item { padding:2px 6px; font-size:10px; }
    .bookmark-btn { gap:5px; padding:8px 12px; }
}
@media (max-width:576px) {
    .greeting-section { padding: 0 0 10px 0; }
    .greeting-main-card { padding:4px; gap:4px; }
    .greeting-top-row { gap:4px; }
    .greeting-left-card { padding:4px; gap:4px; }
    .greeting-text h1 { font-size:1em !important; }
    .primary-holiday { font-size:1em; }
    .primary-holiday .holiday-countdown { padding:2px 4px; font-size:.6em; }
    .datetime { padding:4px; gap:4px; min-width:90px; }
    #currentTime { font-size:.8em; }
    #currentDate { font-size:.6em; }
    .expand-holiday-btn { font-size:7px; padding:2px 4px; }
    .fish-section { gap:4px; margin-top:8px; }
    .fish-btn { padding:4px 5px; min-height:34px; }
    .fish-btn i { font-size:11px; }
    .fish-count { font-size:.75em; padding:1px 3px; min-width:22px; }
    .secondary-holidays-list { gap:4px; }
    .secondary-holiday-item { font-size:9px; padding:2px 6px; }
    .bookmark-btn { gap:4px; padding:6px 10px; }
}
@media (max-width:400px) {
    .datetime { min-width:85px; }
    .datetime-row { flex-wrap:nowrap; gap:4px; }
    #currentTime { font-size:.75em; }
    .expand-holiday-btn { font-size:7px; padding:1px 6px; }
    .fish-section { margin-top:6px; }
}

/* 深色模式 */
.dark-mode .greeting-main-card {
    background: var(--bg-card);
    border-color: var(--border-color);
}
.dark-mode .greeting-left-card {
    background: var(--bg-card);
    border-color: transparent;
}
.dark-mode .datetime {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.dark-mode .bookmark-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
    color: #a78bfa;
}
.dark-mode .fish-btn {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.dark-mode .fish-btn[data-type="merit"] {
    background: var(--bg-secondary);
    color: #70c1ff;
    border-color: rgba(112,193,255,.3);
}
.dark-mode .fish-btn[data-type="luck"] {
    background: var(--bg-secondary);
    color: #ff9e9e;
    border-color: rgba(255,158,158,.3);
}
.dark-mode .fish-btn[data-type="wealth"] {
    background: var(--bg-secondary);
    color: #ffd670;
    border-color: rgba(255,214,112,.3);
}
.dark-mode .fish-btn[data-type="health"] {
    background: var(--bg-secondary);
    color: #8ddf8d;
    border-color: rgba(141,223,141,.3);
}
.dark-mode .fish-count { background: rgba(255,255,255,.1); }
.dark-mode .greeting-text h1 .greeting-text-content { color: var(--text-primary); }
.dark-mode .greeting-text h1 .greeting-emoji { color: var(--primary-color); }
.dark-mode .primary-holiday .holiday-name { color: var(--text-secondary); }
.dark-mode .primary-holiday .holiday-countdown { background: rgba(123,156,255,.2); }
.dark-mode .expand-holiday-btn {
    border-color: var(--border-color);
    color: #7b9cff;
}
.dark-mode .expand-holiday-btn:hover {
    background: rgba(123,156,255,.15);
    border-color: #7b9cff;
}
.dark-mode .secondary-holiday-item { background: rgba(123,156,255,.15); }
.dark-mode .secondary-name { color: var(--text-primary); }