/* ============================================
   全局响应式适配 — 横屏/竖屏自动切换
   优先级最高，放在所有CSS最后加载
   ============================================ */

/* Safe Area 适配（刘海屏） */
html {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

/* ==========================================================
   一、横屏（16:9）— 保持双栏，sidebar 用弹性比例
   ========================================================== */
@media (orientation: landscape) {
    /* 功能页双栏：sidebar 弹性宽度，画布自适应 */
    .container {
        grid-template-columns: minmax(280px, 380px) 1fr !important;
        height: calc(100vh - 80px) !important;
        gap: 16px !important;
    }
    .main-layout {
        grid-template-columns: minmax(280px, 380px) 1fr !important;
    }
    .sidebar {
        overflow-y: auto !important;
        max-height: calc(100vh - 100px) !important;
    }
}

/* 横屏 + 宽度足够（桌面/大平板横屏）：sidebar 更宽 */
@media (orientation: landscape) and (min-width: 1200px) {
    .container {
        grid-template-columns: 400px 1fr !important;
    }
    .main-layout {
        grid-template-columns: 400px 1fr !important;
    }
}

/* 横屏 + 高度很矮（手机横屏）：紧凑模式 */
@media (orientation: landscape) and (max-height: 500px) {
    .header {
        padding: 6px 0 !important;
    }
    .header-content {
        padding: 0 12px !important;
    }
    .header-content .logo img {
        height: 28px !important;
    }
    .container {
        margin: 6px auto !important;
        padding: 0 10px !important;
        height: calc(100vh - 50px) !important;
        grid-template-columns: minmax(220px, 300px) 1fr !important;
    }
    .sidebar {
        padding: 10px !important;
    }
    .module-card {
        margin-bottom: 6px !important;
    }
    .page-title {
        font-size: 16px !important;
        margin-bottom: 4px !important;
    }
    .page-desc {
        font-size: 12px !important;
        margin-bottom: 8px !important;
    }
    .canvas-container {
        min-height: 180px !important;
    }
}

/* ==========================================================
   二、竖屏（9:16）— 单栏堆叠，sidebar 在上画布在下
   ========================================================== */
@media (orientation: portrait) {
    /* 功能页：强制单栏 */
    .container {
        grid-template-columns: 1fr !important;
        height: auto !important;
        gap: 12px !important;
        margin: 12px auto !important;
        padding: 0 12px !important;
    }
    .main-layout {
        grid-template-columns: 1fr !important;
    }
    .sidebar {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: none !important;
        overflow-y: visible !important;
        position: relative !important;
        top: 0 !important;
    }
    .main-content {
        order: 2 !important;
        width: 100% !important;
    }

    /* 画布区域自适应高度 */
    .canvas-container {
        min-height: 40vh !important;
    }

    /* 首页适配 */
    .top-toolbar {
        flex-wrap: wrap;
        gap: 12px;
        padding: 14px 16px !important;
    }
    .toolbar-left { width: 100%; justify-content: center; }
    .toolbar-right { width: 100%; justify-content: center; }
    .header-section {
        flex-direction: column !important;
        gap: 16px !important;
        text-align: center;
        margin-bottom: 24px !important;
    }
    .title-section { text-align: center; }
}

/* ==========================================================
   三、竖屏 + 宽屏平板（如 iPad 竖屏 810px+）
   ========================================================== */
@media (orientation: portrait) and (min-width: 600px) {
    .container {
        padding: 0 24px !important;
        gap: 16px !important;
    }
    .sidebar {
        padding: 20px !important;
    }
    .main-content {
        padding: 20px !important;
    }
    .main-card {
        padding: 30px 28px !important;
    }
    .logo-container {
        width: 120px !important;
        height: 120px !important;
    }
    .logo-container img {
        width: 100px !important;
        height: 100px !important;
    }
    .main-title {
        font-size: 28px !important;
    }
    .features-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
    .style-options {
        grid-template-columns: repeat(4, 1fr) !important;
    }
    .canvas-container {
        min-height: 50vh !important;
    }
}

/* ==========================================================
   四、竖屏 + 手机（<600px 宽）
   ========================================================== */
@media (orientation: portrait) and (max-width: 599px) {
    body {
        font-size: 14px;
    }

    /* 头部紧凑 */
    .header {
        padding: 10px 0 !important;
    }
    .header-content {
        padding: 0 12px !important;
    }
    .header-content .logo img {
        height: 32px !important;
    }
    .header-content .logo span {
        font-size: 16px !important;
    }

    /* 首页 */
    .top-toolbar {
        padding: 10px 12px !important;
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .toolbar-btn {
        padding: 7px 12px !important;
        font-size: 12px !important;
        border-radius: 10px !important;
    }
    .user-info-bar {
        flex-wrap: wrap;
        gap: 8px !important;
        padding: 8px 12px !important;
    }
    .credits-display {
        font-size: 12px !important;
        padding: 5px 10px !important;
    }
    .username-display { font-size: 12px !important; }
    .main-card {
        padding: 16px 14px !important;
        margin-bottom: 16px !important;
        border-radius: 14px !important;
    }
    .header-section {
        gap: 12px !important;
        margin-bottom: 16px !important;
        padding-bottom: 12px !important;
    }
    .logo-container {
        width: 72px !important;
        height: 72px !important;
    }
    .logo-container img {
        width: 60px !important;
        height: 60px !important;
    }
    .logo-container::after {
        top: -8px !important; left: -8px !important;
        right: -8px !important; bottom: -8px !important;
    }
    .main-title {
        font-size: 20px !important;
        letter-spacing: 0 !important;
    }
    .main-subtitle {
        font-size: 12px !important;
    }

    /* 功能卡片网格 */
    .features-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    .feature-card-top {
        flex: 0 0 110px !important;
        height: 110px !important;
        min-height: 110px !important;
    }
    .feature-title { font-size: 13px !important; }
    .feature-desc { font-size: 11px !important; }

    /* 分类按钮横向滚动 */
    .category-filters {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px !important;
        padding-bottom: 6px;
    }
    .category-filters::-webkit-scrollbar { display: none; }
    .category-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 6px 12px !important;
        font-size: 12px !important;
    }

    /* 功能页通用 */
    .sidebar {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .main-content {
        padding: 14px !important;
        border-radius: 10px !important;
    }
    .page-title {
        font-size: 17px !important;
    }
    .page-desc {
        font-size: 12px !important;
    }
    .module-card {
        margin-bottom: 8px !important;
    }
    .module-content {
        padding: 10px !important;
    }
    .form-label {
        font-size: 13px !important;
    }
    .form-select {
        font-size: 14px !important;
        padding: 10px !important;
    }
    .tag {
        padding: 5px 10px !important;
        font-size: 12px !important;
    }

    /* 画布区域 */
    .canvas-container {
        min-height: 35vh !important;
    }
    .canvas-empty-state .empty-state-icon {
        font-size: 40px !important;
    }
    .canvas-empty-state .empty-state-title {
        font-size: 14px !important;
    }
    .canvas-empty-state .empty-state-desc {
        font-size: 12px !important;
    }

    /* 按钮触摸优化 */
    .btn, .btn-primary, .btn-secondary,
    .btn-primary-action, .operation-btn,
    button, [role="button"] {
        min-height: 44px;
    }
    /* 防止iOS输入框缩放 */
    input[type="text"], input[type="email"],
    input[type="password"], textarea, select {
        font-size: 16px !important;
    }

    /* 文生图风格选项 */
    .style-options {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 8px !important;
    }
    .style-option {
        padding: 10px 6px !important;
    }
    .style-icon {
        font-size: 22px !important;
        margin-bottom: 3px !important;
    }
    .style-name {
        font-size: 11px !important;
    }
    .size-options {
        flex-wrap: wrap !important;
    }
    .size-option {
        flex: 1 1 calc(50% - 5px) !important;
        min-width: calc(50% - 5px);
    }
    .preview-area {
        min-height: 250px !important;
    }
    .prompt-input {
        min-height: 70px !important;
    }

    /* 操作按钮栏 */
    .canvas-operations {
        flex-direction: column !important;
        gap: 10px !important;
        padding: 10px !important;
    }
    .operations-left,
    .operations-right {
        width: 100% !important;
        justify-content: center !important;
    }
    .btn-primary-action {
        width: 100% !important;
    }
    .operation-btn .btn-text {
        display: none !important;
    }
    .view-mode-btn .view-label {
        display: none !important;
    }
}

/* ==========================================================
   五、超小屏手机竖屏（<380px，如 iPhone SE）
   ========================================================== */
@media (orientation: portrait) and (max-width: 379px) {
    .features-grid {
        gap: 6px !important;
    }
    .feature-card-top {
        flex: 0 0 90px !important;
        height: 90px !important;
        min-height: 90px !important;
    }
    .main-card {
        padding: 12px 10px !important;
    }
    .main-title {
        font-size: 18px !important;
    }
    .style-options {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .slider-labels span {
        font-size: 10px !important;
    }
    .prompt-tpl, .prompt-template-btn {
        font-size: 11px !important;
        padding: 4px 8px !important;
    }
}