/* ===== 响应式设计 ===== */

/* 手机 - 小屏幕 */
@media (max-width: 360px) {
    .app-container {
        padding: 16px 12px 24px;
    }

    .app-title {
        font-size: 20px;
    }

    .subtitle {
        font-size: 12px;
    }

    .rate-main {
        font-size: 16px;
    }

    .btn {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* 平板及更大屏幕 */
@media (min-width: 481px) {
    body {
        background: #ECEFF1;
    }

    .app-container {
        margin-top: 20px;
        margin-bottom: 20px;
        min-height: auto;
        border-radius: 24px;
        box-shadow: 0 4px 20px rgba(0,0,0,0.08);
        overflow: hidden;
    }
}

/* 桌面端 */
@media (min-width: 768px) {
    .app-container {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    .app-title {
        font-size: 28px;
    }

    .rate-card {
        padding: 20px 24px;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    body {
        background: #121212;
        color: #E0E0E0;
    }

    .app-container {
        background: #1E1E1E;
    }

    .app-title {
        color: #FFF;
    }

    .subtitle {
        color: #888;
    }

    .reminder-text {
        color: #777;
    }

    .section-title {
        color: #E0E0E0;
    }

    .rate-card {
        background: #2A2A2A;
        box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    }

    .rate-main {
        color: #FFF;
    }

    .rate-sub {
        color: #888;
    }

    .modal-content {
        background: #2A2A2A;
    }

    .modal-content h3 {
        color: #FFF;
    }

    .modal-hint {
        color: #888;
    }

    .time-picker input {
        background: #1E1E1E;
        border-color: #444;
        color: #FFF;
    }

    .time-picker input:focus {
        background: #1E1E1E;
        border-color: #FF9800;
    }

    .time-separator {
        color: #FFF;
    }

    .btn-text {
        color: #AAA;
    }
}