/* 移动端行间距和间距优化样式 */
/* 专门用于缩小手机端显示的行间距和元素间距 */

/* 基础移动端优化 */
@media (max-width: 768px) {
    /* 全局行间距优化 */
    * {
        line-height: 1.3 !important;
    }
    
    body {
        line-height: 1.4 !important;
        padding: 10px !important;
        font-size: 14px !important;
    }
    
    /* 标题间距优化 */
    h1, .main-title {
        font-size: 1.5rem !important;
        margin: 12px 0 8px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
    }

    /* 首页品牌标题特殊处理 - 不受通用样式影响 */
    .brand-title.initial-state {
        font-size: 4.5rem !important;
        margin: 0 0 16px 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        letter-spacing: 0.08em !important;
        color: #6d4c2b !important;
        font-weight: 200 !important;
    }

    .brand-subtitle.initial-state {
        font-size: 1.1rem !important;
        margin: 0 0 12px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
        color: #666 !important;
        font-weight: 300 !important;
    }

    .brand-header.initial-state {
        padding: 40px 20px 20px 20px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    h2 {
        font-size: 1.1rem !important;
        margin: 10px 0 6px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
    }
    
    h3 {
        font-size: 1rem !important;
        margin: 8px 0 5px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
    }
    
    h4 {
        font-size: 0.95rem !important;
        margin: 6px 0 4px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
    }
    
    h5, h6 {
        font-size: 0.9rem !important;
        margin: 5px 0 3px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
    }
    
    /* 段落和文本间距优化 */
    p {
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
        margin: 0 0 6px 0 !important;
        padding: 0 !important;
    }
    
    /* 列表间距优化 */
    ul, ol {
        margin: 6px 0 !important;
        padding-left: 16px !important;
    }
    
    li {
        margin-bottom: 3px !important;
        line-height: 1.3 !important;
        font-size: 0.85rem !important;
    }
    
    /* 容器间距优化 */
    .container, .content-container {
        padding: 10px 8px !important;
        margin: 0 !important;
    }
    
    .card, .section, .chart-section {
        padding: 12px 8px !important;
        margin-bottom: 8px !important;
        border-radius: 10px !important;
    }
    
    /* 表单元素间距优化 */
    .form-group {
        margin-bottom: 10px !important;
    }
    
    .form-control, input, textarea, select {
        padding: 8px 10px !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
        min-height: 36px !important;
    }
    
    label {
        font-size: 0.85rem !important;
        margin-bottom: 4px !important;
        line-height: 1.2 !important;
    }
    
    /* 按钮间距优化 */
    .btn, button {
        padding: 8px 14px !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        min-height: 36px !important;
        border-radius: 8px !important;
    }
    
    /* 表格间距优化 */
    table {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
    }
    
    th, td {
        padding: 6px 4px !important;
        line-height: 1.2 !important;
    }
    
    /* 模态框间距优化 */
    .modal-content {
        padding: 12px 8px !important;
        margin: 8px !important;
        border-radius: 12px !important;
    }

    .modal-header {
        padding: 10px !important;
        margin-bottom: 6px !important;
        border-bottom: 1px solid #eee !important;
    }

    .modal-header h3 {
        font-size: 1rem !important;
        margin: 0 !important;
        line-height: 1.2 !important;
    }

    .modal-body {
        padding: 10px !important;
        line-height: 1.2 !important;
    }

    .modal-footer {
        padding: 8px !important;
        margin-top: 6px !important;
    }

    /* 登录注册表单优化 */
    .form-group {
        margin-bottom: 8px !important;
    }

    .form-group label {
        font-size: 0.8rem !important;
        margin-bottom: 3px !important;
        line-height: 1.1 !important;
        display: block !important;
    }

    .form-group input,
    .form-group select,
    .form-control {
        padding: 8px 10px !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        margin-bottom: 4px !important;
        min-height: 32px !important;
        border-radius: 6px !important;
    }

    /* 认证按钮优化 */
    .auth-btn {
        padding: 8px 12px !important;
        font-size: 0.85rem !important;
        line-height: 1.2 !important;
        margin-bottom: 6px !important;
        min-height: 32px !important;
        border-radius: 6px !important;
    }

    /* 验证码输入组优化 */
    .code-input-group,
    .verification-input-group {
        gap: 8px !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
    }

    .code-input-group input,
    .verification-input-group input {
        flex: 2 !important; /* 给输入框更多空间 */
        min-width: 0 !important; /* 允许收缩 */
        font-size: 16px !important; /* 防止iOS自动缩放 */
    }

    .send-code-btn {
        padding: 8px 10px !important;
        font-size: 0.75rem !important;
        min-width: 70px !important;
        max-width: 85px !important; /* 限制按钮最大宽度 */
        min-height: 32px !important;
        border-radius: 6px !important;
        flex-shrink: 0 !important; /* 防止按钮被压缩 */
        white-space: nowrap !important;
    }

    /* 认证切换链接优化 */
    .auth-switch {
        font-size: 0.8rem !important;
        margin-top: 8px !important;
        line-height: 1.2 !important;
        text-align: center !important;
    }

    .auth-extra-links {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        margin-top: 6px !important;
    }

    /* 错误和成功消息优化 */
    .error-message,
    .success-message,
    .auth-error,
    .auth-success {
        font-size: 0.75rem !important;
        line-height: 1.2 !important;
        padding: 4px 6px !important;
        margin: 4px 0 !important;
        border-radius: 4px !important;
    }
    
    /* 导航间距优化 */
    .nav, .navbar {
        padding: 8px 10px !important;
    }
    
    .nav-item, .nav-link {
        padding: 6px 8px !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    /* 侧边栏间距优化 */
    .sidebar {
        padding: 10px 8px !important;
    }
    
    .sidebar-menu {
        gap: 4px !important;
    }
    
    .sidebar-menu-item {
        padding: 8px 10px !important;
        margin-bottom: 4px !important;
        font-size: 0.9rem !important;
        line-height: 1.2 !important;
    }
    
    /* 聊天界面间距优化 */
    .chat-message {
        margin-bottom: 8px !important;
        padding: 8px 10px !important;
        line-height: 1.3 !important;
        font-size: 0.9rem !important;
    }
    
    .chat-input-area {
        padding: 8px 10px !important;
    }
    
    .chat-input {
        padding: 6px 10px !important;
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        min-height: 32px !important;
    }
    
    /* 特殊元素间距优化 */
    .alert, .notification {
        padding: 8px 10px !important;
        margin-bottom: 8px !important;
        font-size: 0.85rem !important;
        line-height: 1.3 !important;
    }
    
    .badge, .tag, .label {
        padding: 2px 6px !important;
        font-size: 0.75rem !important;
        line-height: 1.1 !important;
        margin: 1px 2px !important;
    }
    
    /* 分隔线间距优化 */
    hr {
        margin: 8px 0 !important;
    }
    
    /* 图片和媒体间距优化 */
    img, video, iframe {
        margin-bottom: 6px !important;
    }
    
    /* 代码块间距优化 */
    pre, code {
        font-size: 0.8rem !important;
        line-height: 1.2 !important;
        padding: 6px 8px !important;
        margin: 4px 0 !important;
    }
}

/* 小屏手机进一步优化 */
@media (max-width: 480px) {
    /* 进一步缩小间距 */
    body {
        padding: 8px !important;
        font-size: 13px !important;
        line-height: 1.3 !important;
    }
    
    h1, .main-title {
        font-size: 1.4rem !important;
        margin: 10px 0 6px 0 !important;
    }

    /* 小屏幕首页品牌标题特殊处理 */
    .brand-title.initial-state {
        font-size: 4rem !important;
        margin: 0 0 12px 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        letter-spacing: 0.06em !important;
        color: #6d4c2b !important;
        font-weight: 200 !important;
    }

    .brand-subtitle.initial-state {
        font-size: 1rem !important;
        margin: 0 0 8px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
        color: #666 !important;
        font-weight: 300 !important;
    }

    .brand-header.initial-state {
        padding: 25px 20px 0 20px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    h2 {
        font-size: 1rem !important;
        margin: 8px 0 5px 0 !important;
    }
    
    h3 {
        font-size: 0.95rem !important;
        margin: 6px 0 4px 0 !important;
    }
    
    p {
        font-size: 0.8rem !important;
        margin: 0 0 5px 0 !important;
    }
    
    .container, .content-container {
        padding: 8px 6px !important;
    }
    
    .card, .section, .chart-section {
        padding: 10px 6px !important;
        margin-bottom: 6px !important;
    }
    
    .btn, button {
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
        min-height: 32px !important;
    }
    
    .form-control, input, textarea, select {
        padding: 6px 8px !important;
        font-size: 0.85rem !important;
        min-height: 32px !important;
    }

    /* 小屏手机登录注册表单进一步优化 */
    .modal-content {
        padding: 8px 6px !important;
        margin: 6px !important;
        border-radius: 10px !important;
    }

    .modal-header {
        padding: 8px !important;
        margin-bottom: 4px !important;
    }

    .modal-header h3 {
        font-size: 0.95rem !important;
    }

    .modal-body {
        padding: 8px !important;
    }

    .form-group {
        margin-bottom: 6px !important;
    }

    .form-group label {
        font-size: 0.75rem !important;
        margin-bottom: 2px !important;
    }

    .form-group input,
    .form-group select {
        padding: 6px 8px !important;
        font-size: 0.8rem !important;
        min-height: 30px !important;
        border-radius: 5px !important;
    }

    .auth-btn {
        padding: 6px 10px !important;
        font-size: 0.8rem !important;
        min-height: 30px !important;
        border-radius: 5px !important;
        margin-bottom: 4px !important;
    }

    .send-code-btn {
        padding: 8px 6px !important;
        font-size: 0.7rem !important;
        min-width: 60px !important;
        max-width: 75px !important; /* 限制按钮宽度 */
        min-height: 30px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .auth-switch {
        font-size: 0.75rem !important;
        margin-top: 6px !important;
    }

    .code-input-group {
        gap: 6px !important;
        display: flex !important;
        align-items: center !important;
    }

    .code-input-group input {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 16px !important; /* 防止iOS自动缩放 */
    }
}

/* 超小屏幕极致优化 */
@media (max-width: 360px) {
    body {
        padding: 6px !important;
        font-size: 12px !important;
    }
    
    .container, .content-container {
        padding: 6px 4px !important;
    }
    
    .card, .section, .chart-section {
        padding: 8px 4px !important;
        margin-bottom: 4px !important;
    }
    
    h1, .main-title {
        font-size: 1.3rem !important;
        margin: 8px 0 5px 0 !important;
    }

    /* 超小屏幕首页品牌标题特殊处理 */
    .brand-title.initial-state {
        font-size: 3.5rem !important;
        margin: 0 0 10px 0 !important;
        line-height: 1 !important;
        padding: 0 !important;
        letter-spacing: 0.05em !important;
        color: #6d4c2b !important;
        font-weight: 200 !important;
    }

    .brand-subtitle.initial-state {
        font-size: 0.9rem !important;
        margin: 0 0 6px 0 !important;
        line-height: 1.2 !important;
        padding: 0 !important;
        color: #666 !important;
        font-weight: 300 !important;
    }

    .brand-header.initial-state {
        padding: 20px 12px 0 12px !important;
        margin: 0 !important;
        text-align: center !important;
    }
    
    p {
        font-size: 0.75rem !important;
        margin: 0 0 4px 0 !important;
    }

    /* 超小屏幕登录注册表单极致优化 */
    .modal-content {
        padding: 6px 4px !important;
        margin: 4px !important;
        border-radius: 8px !important;
        width: 98% !important;
        max-height: 95vh !important;
    }

    .modal-header {
        padding: 6px !important;
        margin-bottom: 3px !important;
    }

    .modal-header h3 {
        font-size: 0.9rem !important;
    }

    .modal-body {
        padding: 6px !important;
    }

    .form-group {
        margin-bottom: 4px !important;
    }

    .form-group label {
        font-size: 0.7rem !important;
        margin-bottom: 1px !important;
    }

    .form-group input,
    .form-group select {
        padding: 4px 6px !important;
        font-size: 0.75rem !important;
        min-height: 28px !important;
        border-radius: 4px !important;
    }

    .auth-btn {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
        min-height: 28px !important;
        border-radius: 4px !important;
        margin-bottom: 3px !important;
    }

    .send-code-btn {
        padding: 6px 4px !important;
        font-size: 0.65rem !important;
        min-width: 50px !important;
        max-width: 65px !important; /* 限制按钮宽度 */
        min-height: 28px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    .auth-switch {
        font-size: 0.7rem !important;
        margin-top: 4px !important;
    }

    .auth-extra-links {
        font-size: 0.7rem !important;
        margin-top: 3px !important;
    }

    .code-input-group {
        gap: 4px !important;
        display: flex !important; /* 保持水平布局 */
        flex-direction: row !important;
        align-items: center !important;
    }

    .code-input-group input {
        flex: 1 !important;
        min-width: 0 !important;
        font-size: 16px !important; /* 防止iOS自动缩放 */
        margin-bottom: 0 !important;
    }

    .error-message,
    .success-message {
        font-size: 0.65rem !important;
        padding: 3px 4px !important;
        margin: 2px 0 !important;
    }

    /* 步骤指示器优化 */
    .step-indicator {
        margin-bottom: 8px !important;
    }

    .step-indicator .step {
        width: 20px !important;
        height: 20px !important;
        font-size: 0.6rem !important;
        line-height: 20px !important;
    }
}