/* 主内容区 */
    .main-content {
        margin-top: 64px;
        padding: 20px 0 40px;
    }
    .page-content {
        width: 1280px;
        max-width: calc(100% - 48px);
        margin: 40px auto 0;
        padding: 0 0 40px;
    }
    .card-form {
        background: #fff;
        border-radius: 8px;
        box-shadow: 0 2px 12px rgba(0,0,0,0.08);
        padding: 25px;
    }

    /* 表单区块 */
    .form-section {
        margin-bottom: 25px;
        padding-bottom: 25px;
        border-bottom: 1px solid #eee;
    }
    .form-section:last-child {
        border-bottom: none;
        margin-bottom: 0;
        padding-bottom: 0;
    }
    .section-title {
        font-size: 16px;
        font-weight: 600;
        color: #333;
        margin-bottom: 15px;
        padding-left: 10px;
        border-left: 3px solid #ff6600;
    }

    /* 卡类选择 */
    .category-tabs {
        display: flex;
        gap: 10px;
        flex-wrap: wrap;
    }
    .category-tab {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 10px 25px;
        border: 2px solid #e8e8e8;
        border-radius: 25px;
        cursor: pointer;
        transition: all 0.3s;
        font-size: 14px;
        color: #666;
        background: #fff;
    }
    .category-tab:hover,
    .category-tab.active {
        border-color: #ff6600;
        color: #ff6600;
        background: rgba(255,102,0,0.05);
    }
    .category-tab-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        height: 20px;
        flex: 0 0 auto;
        color: currentColor;
        font-size: 16px;
        object-fit: contain;
    }
    img.category-tab-icon {
        border-radius: 50%;
    }
    .category-tab-text {
        line-height: 20px;
    }

    /* 卡种选择 */
    .card-type-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    .card-type-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        min-height: 126px;
        border: 2px solid #e8e8e8;
        border-radius: 8px;
        padding: 12px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
        position: relative;
    }
    .card-type-item.maintenance {
        background: #fff;
        border-color: #e8e8e8;
        cursor: not-allowed;
    }
    .card-type-item:hover {
        border-color: #ff6600;
        box-shadow: 0 2px 8px rgba(255,102,0,0.1);
    }
    .card-type-item.maintenance:hover {
        border-color: #e8e8e8;
        box-shadow: none;
    }
    .card-type-item.maintenance .card-type-icon,
    .card-type-item.maintenance .card-type-name,
    .card-type-item.maintenance .card-type-discount {
        opacity: .62;
    }
    .card-type-item.selected {
        border-color: #ff6600;
        background: rgba(255,102,0,0.05);
    }
    .card-type-item.selected::after {
        content: '✓';
        position: absolute;
        top: 5px;
        right: 5px;
        width: 18px;
        height: 18px;
        background: #ff6600;
        color: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 10px;
    }
    .card-type-item.maintenance.selected {
        border-color: #e8e8e8;
        background: #fff;
    }
    .card-type-item.maintenance.selected::after {
        display: none;
        content: none;
    }
    .card-type-icon {
        width: 96px;
        height: 52px;
        margin: 0 auto 8px;
        border-radius: 4px;
        overflow: visible;
    }
    .card-type-icon img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    .card-type-name {
        font-size: 13px;
        color: #333;
        font-weight: 500;
        margin-bottom: 4px;
        line-height: 1.3;
    }
    .card-status-badge {
        position: absolute;
        top: 7px;
        left: 7px;
        padding: 2px 7px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 600;
        line-height: 1.5;
    }
    .card-status-badge.off {
        color: #fff;
        background: #ff3b30;
        box-shadow: 0 3px 9px rgba(255,59,48,.32);
    }
    .card-type-discount {
        min-height: 18px;
        font-size: 12px;
        color: #ff6600;
        font-weight: 600;
        line-height: 18px;
    }

    /* 面值选择 */
    .amount-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 10px;
    }
    .amount-item {
        border: 2px solid #e8e8e8;
        border-radius: 8px;
        padding: 12px 8px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }
    .amount-item:hover {
        border-color: #ff6600;
    }
    .amount-item.selected {
        border-color: #ff6600;
        background: rgba(255,102,0,0.05);
    }
    .amount-value {
        font-size: 15px;
        font-weight: 600;
        color: #333;
        margin-bottom: 4px;
    }
    .amount-price {
        font-size: 13px;
        color: #ff6600;
        font-weight: 600;
    }
    .amount-discount {
        font-size: 11px;
        color: #999;
    }
    .amount-discount.range {
        color: #ff6600;
    }

    /* 定义折扣 */
    .custom-discount-box {
        background: #fff;
    }
    .discount-input-group {
        display: flex;
        align-items: center;
        width: fit-content;
        border: 1px solid #ddd;
        border-radius: 4px;
        overflow: hidden;
    }
    .discount-btn {
        width: 36px;
        height: 36px;
        border: none;
        background: #f5f5f5;
        color: #666;
        font-size: 18px;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .discount-btn:hover {
        background: #e8e8e8;
        color: #333;
    }
    .discount-btn.discount-minus {
        border-right: 1px solid #ddd;
    }
    .discount-btn.discount-plus {
        border-left: 1px solid #ddd;
    }
    .discount-input {
        width: 70px;
        height: 36px;
        padding: 0 5px;
        border: none;
        outline: none;
        font-size: 14px;
        text-align: center;
        font-weight: 600;
        color: #ff6600;
    }
    .discount-unit {
        padding: 0 12px;
        height: 36px;
        line-height: 36px;
        background: #fff;
        color: #666;
        font-size: 14px;
    }
    .discount-tips {
        margin-top: 10px;
        font-size: 12px;
        color: #ff6600;
    }
    .discount-range-info {
        margin-top: 8px;
        font-size: 12px;
        color: #999;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* 提交方式 */
    .submit-methods {
        display: flex;
        gap: 15px;
    }
    .method-item {
        /* flex: 1; */
        width: 20%;
        padding: 10px 12px;
        border: 2px solid #e8e8e8;
        border-radius: 6px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }
    .method-item:hover,
    .method-item.active {
        border-color: #ff6600;
        background: rgba(255,102,0,0.05);
    }
    .method-icon {
        font-size: 18px;
        margin-bottom: 2px;
    }
    .method-title {
        font-size: 13px;
        font-weight: 600;
        color: #333;
    }

    /* 提示信息 */
    .notice-box {
        background: #fff7e6;
        border: 1px solid #ffd591;
        border-radius: 6px;
        padding: 12px 15px;
        margin-bottom: 20px;
        font-size: 13px;
        color: #d46b08;
        line-height: 1.6;
    }
    .notice-box strong {
        color: #fa8c16;
    }

    /* 表单输入 */
    .form-group {
        margin-bottom: 20px;
    }
    .form-label {
        display: block;
        font-size: 14px;
        font-weight: 600;
        color: #333;
        margin-bottom: 8px;
    }
    .form-input-row {
        display: flex;
        align-items: center;
        gap: 12px;
    }
    .form-input-wrap {
        width: 280px;
        flex-shrink: 0;
    }
    .form-input {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        transition: all 0.3s;
        outline: none;
        box-sizing: border-box;
    }
    .form-input.error {
        border-color: #ff4d4f;
        box-shadow: 0 0 0 2px rgba(255,77,79,0.15);
    }
    .form-input:focus {
        border-color: #ff6600;
        box-shadow: 0 0 0 2px rgba(255,102,0,0.1);
    }
    .form-error {
        display: none;
        color: #ff4d4f;
        font-size: 13px;
        line-height: 38px;
        white-space: nowrap;
    }
    .form-error.show {
        display: inline-block;
    }
    textarea.form-input {
        resize: vertical;
        min-height: 100px;
        font-family: inherit;
    }

    /* 提交按钮 */
    .submit-btn {
        width: 100%;
        padding: 12px;
        background: linear-gradient(135deg, #ff6600 0%, #ff7722 100%);
        color: #fff;
        border: none;
        border-radius: 6px;
        font-size: 15px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.3s;
        margin-top: 15px;
    }
    .submit-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 12px rgba(255,102,0,0.3);
    }
    .submit-btn.disabled,
    .submit-btn:disabled {
        cursor: not-allowed;
        background: #c8c8c8;
        box-shadow: none;
        transform: none;
    }

    .tips-text {
        margin-top: 8px;
        font-size: 12px;
        color: #999;
    }

    /* 响应式 */
    @media (max-width: 768px) {
        .card-form { padding: 18px; border-radius: 0; }
        .form-section { margin-bottom: 18px; padding-bottom: 18px; }
        .section-title { font-size: 15px; margin-bottom: 12px; }
        .category-tabs { gap: 8px; }
        .category-tab { padding: 8px 16px; font-size: 13px; }
        .card-type-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
        .card-type-item { min-height: 118px; padding: 10px; }
        .card-type-icon { width: 86px; height: 48px; margin-bottom: 6px; }
        .card-type-name { font-size: 12px; }
        .card-type-discount { font-size: 11px; }
        .amount-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
        .amount-item { padding: 10px 6px; }
        .amount-value { font-size: 14px; }
        .amount-price { font-size: 12px; }
        .submit-methods { flex-direction: row; gap: 8px; }
        .method-item { flex: 1; width: auto; min-width: 0; }
        .form-input-row { flex-direction: column; align-items: flex-start; gap: 4px; }
        .form-input-wrap { width: 100%; }
        .form-error { white-space: normal; line-height: 1.4; margin-top: 4px; }
        .notice-box { padding: 10px 12px; font-size: 12px; }
        .submit-btn { padding: 11px; font-size: 14px; }
        .discount-input-group { width: 100%; }
        .discount-input { flex: 1; width: auto; }
    }

    @media (max-width: 480px) {
        .page-content {
            max-width: calc(100% - 24px);
        }
        .card-form { padding: 12px; }
        .category-tab { padding: 6px 12px; font-size: 12px; }
        .card-type-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
        .card-type-item { min-height: 108px; padding: 8px; }
        .card-type-icon { width: 78px; height: 44px; }
        .amount-grid { grid-template-columns: repeat(2, 1fr); }
        .submit-methods { gap: 6px; }
        .form-input { padding: 9px 10px; font-size: 13px; }
    }