/* ===== 重置与基础 ===== */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; height: 100%; overflow: hidden; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    background: #0a0e1a;
    color: #e8eaed;
    font-size: 14px;
    line-height: 1.5;
}
.icon { display: inline-block; vertical-align: middle; flex-shrink: 0; }

/* ===== 粒子背景 ===== */
.particle-canvas {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 0; pointer-events: none;
}

/* ===== App容器 ===== */
#app {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    position: relative;
    background: radial-gradient(ellipse at top, #1a2238 0%, #0a0e1a 60%);
    overflow: hidden;
}
#app::before {
    content: '';
    position: absolute; top: -200px; left: 50%; transform: translateX(-50%);
    width: 600px; height: 600px;
    background: radial-gradient(circle, var(--theme-color, #FFD700) 0%, transparent 70%);
    opacity: 0.12;
    filter: blur(60px);
    transition: background 0.8s ease;
    z-index: 0;
    animation: pulse-bg 4s ease-in-out infinite;
}
@keyframes pulse-bg {
    0%, 100% { opacity: 0.08; transform: translateX(-50%) scale(1); }
    50% { opacity: 0.18; transform: translateX(-50%) scale(1.1); }
}

/* ===== 顶部导航 ===== */
.app-header {
    position: relative; z-index: 2;
    padding: 12px 20px 8px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
    padding-top: max(12px, env(safe-area-inset-top));
}
.location-bar {
    display: flex; align-items: center; gap: 4px;
    color: #e8eaed; font-size: 16px; font-weight: 600;
    cursor: pointer; padding: 6px 10px 6px 12px; border-radius: 20px;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(10px);
    transition: background 0.3s;
}
.location-bar.locating #locationName {
    opacity: 0.7;
}
.location-bar:active { background: rgba(255,255,255,0.12); }
.location-bar .chevron { opacity: 0.5; }
.locate-btn {
    border: none;
    background: transparent;
    color: rgba(232,234,237,0.7);
    padding: 2px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 50%;
}
.locate-btn:active { color: var(--theme-color, #FFD700); }
.location-bar.locating .locate-btn {
    animation: spinLocate 1s linear infinite;
    color: var(--theme-color, #FFD700);
}
@keyframes spinLocate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.date { font-size: 12px; color: rgba(232,234,237,0.5); font-weight: 400; }

/* ===== 主内容 ===== */
.main-content {
    flex: 1; overflow-y: auto; overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    position: relative; z-index: 1;
    padding: 0 16px 80px;
    scrollbar-width: none;
}
.main-content::-webkit-scrollbar { display: none; }

/* ===== ICP 备案号 ===== */
.beian-footer {
    text-align: center;
    padding: 8px 0 16px;
}
.beian-footer a {
    color: rgba(232,234,237,0.4);
    font-size: 12px;
    text-decoration: none;
}
.beian-footer a:hover,
.beian-footer a:active {
    color: rgba(232,234,237,0.7);
    text-decoration: underline;
}

/* ===== 花粉主卡片 ===== */
.pollen-card {
    background: linear-gradient(135deg, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0.02) 100%);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 24px;
    padding: 28px 20px 24px;
    margin-bottom: 16px;
    text-align: center;
    position: relative; overflow: hidden;
    animation: cardFadeIn 0.6s ease;
}
.pollen-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--theme-color, #FFD700), transparent);
    opacity: 0.6;
}
@keyframes cardFadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.pollen-ring-container {
    position: relative; width: 260px; height: 260px;
    margin: 0 auto 16px;
    display: flex; align-items: center; justify-content: center;
}
.pollen-ring-svg {
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    transition: filter 0.5s;
}
.pollen-ring-center {
    position: relative; z-index: 1;
    text-align: center;
}
.pollen-level-num {
    font-size: 64px; font-weight: 200;
    line-height: 1; color: var(--theme-color, #FFD700);
    text-shadow: 0 0 30px rgba(255, 215, 0, 0.3);
    transition: color 0.5s;
    animation: levelPulse 2s ease-in-out infinite;
}
@keyframes levelPulse {
    0%, 100% { text-shadow: 0 0 20px rgba(255, 215, 0, 0.2); }
    50% { text-shadow: 0 0 40px rgba(255, 215, 0, 0.5); }
}
.pollen-level-unit {
    display: inline-block; font-size: 14px; color: rgba(232,234,237,0.4);
    margin-top: -8px;
}
.pollen-level-text {
    font-size: 18px; font-weight: 600; color: #e8eaed;
    margin-top: 8px; letter-spacing: 2px;
}
.pollen-concentration {
    font-size: 13px; color: rgba(232,234,237,0.45);
    margin-top: 6px;
}
.pollen-desc {
    font-size: 14px; color: rgba(232,234,237,0.6);
    margin-bottom: 12px; line-height: 1.6;
}
.air-quality-bar {
    margin: 0 0 18px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    font-size: 12px;
}
.aq-label { color: rgba(232,234,237,0.45); }
.aq-value { color: rgba(232,234,237,0.85); }
.aq-chip {
    padding: 3px 10px;
    border-radius: 999px;
    font-weight: 600;
    color: #0a0e1a;
    background: #FFD700;
}

/* 花粉种类条 */
.pollen-types {
    display: flex; flex-direction: column; gap: 10px;
    text-align: left;
}
.pollen-type-item {
    display: flex; align-items: center; gap: 12px;
}
.pollen-type-name {
    font-size: 13px; color: rgba(232,234,237,0.7);
    width: 50px; flex-shrink: 0;
}
.pollen-type-bar {
    flex: 1; height: 8px; background: rgba(255,255,255,0.06);
    border-radius: 4px; overflow: hidden; position: relative;
}
.pollen-type-fill {
    height: 100%; border-radius: 4px;
    width: 0; transition: width 1.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}
.pollen-type-fill::after {
    content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 20px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
}
.pollen-type-value {
    font-size: 12px; color: rgba(232,234,237,0.5);
    width: 70px; text-align: right; flex-shrink: 0;
}

/* ===== 通用Section ===== */
.section-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 15px; font-weight: 600; color: #e8eaed;
    margin-bottom: 14px; padding: 0 4px;
}
.section-title .icon { color: var(--theme-color, #FFD700); }

.advice-section, .trend-section, .reminder-section {
    background: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 20px;
    padding: 20px 16px;
    margin-bottom: 16px;
    animation: cardFadeIn 0.6s ease;
}

/* ===== 防护建议 ===== */
.advice-list { display: flex; flex-direction: column; gap: 10px; }
.advice-item {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border-radius: 14px;
    border-left: 3px solid var(--advice-color, #4ECB71);
    transition: transform 0.3s, background 0.3s;
    animation: adviceSlideIn 0.5s ease backwards;
}
.advice-item:active { transform: scale(0.98); background: rgba(255,255,255,0.08); }
@keyframes adviceSlideIn {
    from { opacity: 0; transform: translateX(-15px); }
    to { opacity: 1; transform: translateX(0); }
}
.advice-icon {
    width: 36px; height: 36px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    background: var(--advice-bg, rgba(78, 203, 113, 0.15));
    flex-shrink: 0;
}
.advice-icon svg { color: var(--advice-color, #4ECB71); }
.advice-text { flex: 1; }
.advice-title-text { font-size: 14px; font-weight: 600; color: #e8eaed; margin-bottom: 2px; }
.advice-desc-text { font-size: 12px; color: rgba(232,234,237,0.5); line-height: 1.5; }

/* ===== 趋势图表 ===== */
.trend-chart-wrap {
    position: relative; width: 100%; height: 180px;
    margin-bottom: 12px;
}
#trendChart { width: 100%; height: 100%; }
.trend-tooltip {
    position: absolute;
    background: rgba(20, 25, 40, 0.95);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px; padding: 8px 12px;
    font-size: 12px; pointer-events: none;
    backdrop-filter: blur(10px);
    transform: translate(-50%, -100%);
    transition: opacity 0.2s;
    white-space: nowrap; z-index: 10;
}
.trend-tooltip-date { color: rgba(232,234,237,0.5); font-size: 11px; }
.trend-tooltip-level { color: var(--tip-color, #FFD700); font-weight: 600; font-size: 14px; }
.trend-tooltip-conc { color: rgba(232,234,237,0.7); }
.trend-legend {
    display: flex; justify-content: space-around;
    font-size: 11px; color: rgba(232,234,237,0.4);
}
.legend-item { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.legend-dot { width: 8px; height: 8px; border-radius: 50%; }
.legend-label { font-size: 10px; }

/* ===== 提醒设置 ===== */
.reminder-toggle {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 0;
}
.reminder-toggle-title { font-size: 15px; font-weight: 500; }
.reminder-toggle-desc { font-size: 12px; color: rgba(232,234,237,0.4); margin-top: 2px; }

.switch { position: relative; display: inline-block; width: 52px; height: 30px; }
.switch input { opacity: 0; width: 0; height: 0; }
.slider {
    position: absolute; cursor: pointer; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(255,255,255,0.1);
    border-radius: 30px; transition: 0.3s;
}
.slider::before {
    content: ''; position: absolute; height: 24px; width: 24px;
    left: 3px; bottom: 3px; background: #fff; border-radius: 50%;
    transition: 0.3s; box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
input:checked + .slider {
    background: linear-gradient(135deg, var(--theme-color, #FFD700), #FF8C00);
    box-shadow: 0 0 15px rgba(255, 215, 0, 0.3);
}
input:checked + .slider::before { transform: translateX(22px); }

.reminder-config {
    border-top: 1px solid rgba(255,255,255,0.06);
    padding-top: 16px;
    animation: configSlide 0.4s ease;
}
@keyframes configSlide {
    from { opacity: 0; max-height: 0; }
    to { opacity: 1; max-height: 600px; }
}
.config-row {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 0; gap: 12px;
}
.config-row.channel-row { flex-direction: column; align-items: stretch; gap: 10px; }
.channel-list { display: flex; flex-direction: column; gap: 8px; }
.channel-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px; border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.3s;
    animation: channelSlide 0.4s ease backwards;
}
.channel-item:nth-child(1) { animation-delay: 0s; }
.channel-item:nth-child(2) { animation-delay: 0.08s; }
.channel-item:nth-child(3) { animation-delay: 0.16s; }
@keyframes channelSlide {
    from { opacity: 0; transform: translateX(-10px); }
    to { opacity: 1; transform: translateX(0); }
}
.channel-item:active { transform: scale(0.98); }
.channel-item.active {
    background: rgba(255,215,0,0.06);
    border-color: rgba(255,215,0,0.2);
}
.channel-icon {
    width: 38px; height: 38px; border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 14px; font-weight: 700;
}
.wecom-icon { background: rgba(45,140,240,0.2); color: #2d8cf0; }
.wechat-icon { background: rgba(7,193,96,0.2); color: #07c160; }
.feishu-icon { background: rgba(51,112,255,0.2); color: #3370ff; }
.dingtalk-icon { background: rgba(0,137,255,0.2); color: #0089ff; }
.pushplus-icon { background: rgba(255,107,53,0.2); color: #ff6b35; }
.qqmail-icon { background: rgba(18,183,245,0.2); color: #12b7f5; }
.channel-tip {
    margin-top: 8px;
    font-size: 12px;
    color: rgba(232,234,237,0.45);
    line-height: 1.5;
}
.channel-info { flex: 1; }
.channel-name { font-size: 14px; font-weight: 500; color: #e8eaed; }
.channel-desc { font-size: 11px; color: rgba(232,234,237,0.35); margin-top: 1px; }
.channel-check {
    width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.15);
    display: flex; align-items: center; justify-content: center;
    transition: all 0.3s; flex-shrink: 0;
}
.channel-check svg { opacity: 0; transition: opacity 0.3s; color: #0a0e1a; }
.channel-item.active .channel-check {
    background: var(--theme-color, #FFD700);
    border-color: var(--theme-color, #FFD700);
    box-shadow: 0 0 8px rgba(255,215,0,0.3);
}
.channel-item.active .channel-check svg { opacity: 1; }
.webhook-row, .email-row { flex-direction: column; align-items: stretch; gap: 8px; }
.webhook-input { width: 100%; font-size: 12px; font-family: monospace; }
.smtp-setup {
    margin-top: 4px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
}
.email-subscribe {
    padding: 4px 0 8px;
}
.email-subscribe-desc {
    font-size: 13px;
    color: rgba(232,234,237,0.55);
    margin-bottom: 12px;
}
.email-subscribe-row {
    display: flex;
    gap: 10px;
    align-items: center;
}
.email-subscribe-input {
    flex: 1;
    min-width: 0;
}
.email-subscribe-status {
    margin-top: 10px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(232,234,237,0.55);
}
.email-subscribe-status.ok { color: #4ECB71; }
.email-subscribe-status.bad { color: #FF8C00; }

.subscribe-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.sub-card {
    padding: 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.sub-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}
.sub-card-title {
    font-size: 14px;
    font-weight: 600;
    color: #e8eaed;
}
.sub-card-desc {
    font-size: 12px;
    color: rgba(232,234,237,0.45);
    margin-top: 2px;
}
.sub-card-hint {
    margin-top: 8px;
    font-size: 11px;
    color: rgba(232,234,237,0.35);
}
.sub-card-hint a {
    color: rgba(78, 203, 113, 0.85);
    text-decoration: none;
}
.sub-card-highlight {
    border-color: rgba(7, 193, 96, 0.35);
    background: rgba(7, 193, 96, 0.06);
}
.paid-channels {
    margin-top: 4px;
    padding: 10px 0 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.paid-channels > summary {
    cursor: pointer;
    color: rgba(232,234,237,0.4);
    font-size: 12px;
    list-style: none;
    margin-bottom: 10px;
}
.paid-channels > summary::-webkit-details-marker { display: none; }
.paid-channels .sub-card { margin-bottom: 10px; }
.bot-detect {
    margin-top: 8px;
    font-size: 12px;
    color: #4ECB71;
}
.ding-secret-wrap,
.wx-token-wrap {
    margin-top: 8px;
}
.active-subs {
    margin-top: 14px;
    padding: 12px;
    border-radius: 12px;
    background: rgba(78, 203, 113, 0.08);
    border: 1px solid rgba(78, 203, 113, 0.18);
}
.active-subs-title {
    font-size: 12px;
    color: rgba(232,234,237,0.55);
    margin-bottom: 8px;
}
.active-sub-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 0;
    border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 13px;
    color: #e8eaed;
}
.active-sub-item:first-of-type { border-top: none; }
.active-sub-item button {
    border: none;
    background: transparent;
    color: rgba(255,140,0,0.9);
    font-size: 12px;
    cursor: pointer;
    padding: 4px 8px;
}
.advanced-push {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.advanced-push > summary {
    cursor: pointer;
    color: rgba(232,234,237,0.45);
    font-size: 12px;
    list-style: none;
    user-select: none;
}
.advanced-push > summary::-webkit-details-marker { display: none; }
.advanced-push[open] > summary { margin-bottom: 12px; color: rgba(232,234,237,0.7); }
.smtp-status {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 10px;
    color: rgba(232,234,237,0.7);
}
.smtp-status.ok { color: #4ECB71; }
.smtp-status.bad { color: #FF8C00; }
.smtp-help {
    font-size: 11px;
    color: rgba(232,234,237,0.4);
    margin: 4px 0 10px;
    line-height: 1.5;
}
.smtp-form .config-row { margin-bottom: 8px; }
.test-row { justify-content: center; padding-top: 14px; }
.test-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 10px 24px; border-radius: 22px;
    background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(255,140,0,0.1));
    border: 1px solid rgba(255,215,0,0.2);
    color: var(--theme-color, #FFD700);
    font-size: 13px; font-weight: 500;
    cursor: pointer; transition: all 0.3s; outline: none;
}
.test-btn:active { transform: scale(0.96); }
.test-btn svg { color: var(--theme-color, #FFD700); }
.test-btn.loading { opacity: 0.6; pointer-events: none; }
.test-btn.success { background: rgba(78,203,113,0.15); border-color: rgba(78,203,113,0.3); color: #4ECB71; }
.test-btn.success svg { color: #4ECB71; }
.config-label { font-size: 14px; color: rgba(232,234,237,0.7); flex-shrink: 0; }
.config-input {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px; padding: 8px 12px;
    color: #e8eaed; font-size: 14px; outline: none;
}
.threshold-control { display: flex; align-items: center; gap: 8px; font-size: 12px; color: rgba(232,234,237,0.5); }
.threshold-pills { display: flex; gap: 6px; }
.threshold-pill {
    padding: 5px 12px; border-radius: 16px;
    font-size: 12px; color: rgba(232,234,237,0.5);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    cursor: pointer; transition: all 0.3s;
}
.threshold-pill.active {
    color: #0a0e1a; font-weight: 600;
    background: var(--theme-color, #FFD700);
    border-color: var(--theme-color, #FFD700);
    box-shadow: 0 0 10px rgba(255, 215, 0, 0.3);
}
.push-options {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
}
.push-option {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 13px; color: rgba(232,234,237,0.75); cursor: pointer;
}
.push-option input { accent-color: var(--theme-color, #FFD700); }
.test-row { display: flex; gap: 10px; flex-wrap: wrap; }
.test-btn.secondary {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    color: rgba(232,234,237,0.85);
}
.push-preview {
    margin-top: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(0,0,0,0.28);
    border: 1px solid rgba(255,255,255,0.08);
    color: rgba(232,234,237,0.85);
    font-size: 12px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ===== 底部Tab（未完成功能暂隐藏） ===== */
.tabbar[hidden] { display: none !important; }
.tabbar {
    position: relative; z-index: 2;
    display: flex; align-items: center; justify-content: space-around;
    height: 64px;
    background: rgba(10, 14, 26, 0.8);
    backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    padding-bottom: env(safe-area-inset-bottom);
}
.tab-item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    color: rgba(232,234,237,0.3); font-size: 10px;
    cursor: pointer; transition: color 0.3s;
    padding: 4px 12px;
}
.tab-item.active { color: var(--theme-color, #FFD700); }
.tab-item.active .icon { animation: tabBounce 0.3s ease; }
@keyframes tabBounce {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.2); }
}

/* ===== 城市选择弹窗 ===== */
.modal-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);
    z-index: 100; display: flex; align-items: flex-end;
    animation: overlayFade 0.3s ease;
}
@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
.city-modal {
    width: 100%; max-height: 75%; overflow-y: auto;
    background: #161b2e; border-radius: 24px 24px 0 0;
    padding: 20px 20px 40px;
    animation: modalSlideUp 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    padding-bottom: max(40px, env(safe-area-inset-bottom));
}
@keyframes modalSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.modal-header h3 { font-size: 18px; font-weight: 600; }
.modal-close { font-size: 24px; color: rgba(232,234,237,0.4); cursor: pointer; padding: 4px 8px; }
.city-search {
    display: flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.06); border-radius: 12px;
    padding: 10px 14px; margin-bottom: 16px;
}
.city-search .icon { color: rgba(232,234,237,0.3); }
.city-search input {
    flex: 1; background: none; border: none; outline: none;
    color: #e8eaed; font-size: 14px;
}
.city-current {
    display: flex; align-items: center; gap: 8px;
    padding: 12px 14px; margin-bottom: 20px;
    background: rgba(78, 203, 113, 0.08); border-radius: 12px;
    color: #4ECB71; font-size: 14px; font-weight: 500;
    cursor: pointer;
}
.city-list-title { font-size: 12px; color: rgba(232,234,237,0.3); margin-bottom: 12px; }
.city-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.city-grid-item {
    padding: 12px 0; text-align: center;
    background: rgba(255,255,255,0.04); border-radius: 12px;
    font-size: 13px; color: rgba(232,234,237,0.7);
    cursor: pointer; transition: all 0.3s;
}
.city-grid-item:active { background: rgba(255,255,255,0.1); transform: scale(0.95); }

/* ===== Toast ===== */
.toast {
    position: fixed; bottom: 100px; left: 50%; transform: translateX(-50%);
    background: rgba(20, 25, 40, 0.95); backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px; padding: 12px 24px;
    font-size: 13px; color: #e8eaed;
    z-index: 200; opacity: 0; pointer-events: none;
    transition: opacity 0.3s, transform 0.3s;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-10px); }

/* ===== 加载动画 ===== */
.loading-dot {
    display: inline-block; width: 8px; height: 8px;
    border-radius: 50%; background: var(--theme-color, #FFD700);
    animation: dotPulse 1s infinite ease-in-out;
}
@keyframes dotPulse {
    0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
    40% { opacity: 1; transform: scale(1.2); }
}

/* ===== 响应式 ===== */
@media (min-width: 768px) {
    .main-content { max-width: 480px; margin: 0 auto; width: 100%; }
    .tabbar { max-width: 480px; margin: 0 auto; left: 50%; transform: translateX(-50%); position: fixed; bottom: 0; }
}