body {
    font-family: sans-serif;
    margin: 0;
    line-height: 1.6;
    background-color: #f8f9fa;
}

#app {
    width: 100%;
    min-height: 100vh;
}

/* 输入区域完全居中容器 */
.input-section-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    width: 100%;
}

/* 输入区域样式 */
.input-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 600px;
    padding: 40px;
    box-sizing: border-box;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.controls {
    width: 100%;
    justify-content: center;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.controls label {
    font-weight: bold;
    font-size: 1.1em;
}

.controls input[type="text"] {
    padding: 12px 15px;
    font-size: 1.2em;
    text-align: center;
    flex-grow: 2;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.controls button {
    padding: 12px 24px;
    font-size: 1.2em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.controls button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

.controls button:not(:disabled):hover {
    background-color: #0056b3;
}

.print-button {
    background-color: #28a745;
}

.print-button:not(:disabled):hover {
    background-color: #218838;
}

.error-message {
    width: 100%;
    margin-top: 15px;
    text-align: center;
    color: red;
    padding: 10px;
    border: 1px solid red;
    background-color: #ffebeb;
    border-radius: 4px;
    box-sizing: border-box;
}

/* 虚拟键盘样式 */
.virtual-keyboard {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 12px;
    width: 100%;
    margin-top: 20px;
    padding: 20px;
    background-color: #f0f0f0;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.num-key {
    padding: 15px 20px;
    font-size: 1.5em;
    min-width: 60px;
    text-align: center;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1 0 auto;
    font-weight: bold;
}

.num-key:hover {
    background-color: #e9ecef;
    transform: translateY(-1px);
    border-color: #ccc;
}

.num-key:active {
    transform: translateY(1px);
}

.clear-key {
    min-width: 80px;
    background-color: #dc3545;
    color: white;
    border: none;
}

.clear-key:hover {
    background-color: #c82333;
}

/* Loading 遮罩样式 */
.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.loader {
    border: 8px solid #f3f3f3;
    border-top: 8px solid #3498db;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* 打印弹窗样式 */
.print-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000;
}

.print-modal {
    background-color: white;
    border-radius: 8px;
    width: 90%;
    max-width: 1200px;
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.print-modal-header {
    padding: 16px 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.print-modal-header h2 {
    margin: 0;
    font-size: 1.5rem;
}

.print-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
}

.print-modal-close:hover {
    color: #000;
}

.print-modal-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
}

.print-modal-footer {
    padding: 16px 20px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}

.print-modal-footer button {
    padding: 10px 20px;
    border-radius: 4px;
    border: none;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s;
}

.print-modal-footer .close-button {
    background-color: #6c757d;
    color: white;
}

.print-modal-footer .close-button:hover {
    background-color: #5a6268;
}

.print-modal-footer .print-button {
    background-color: #28a745;
    color: white;
}

.print-modal-footer .print-button:hover {
    background-color: #218838;
}

/* 打印区域样式 */
.print-area {
    background-color: #fff;
    width: 100%;
    box-sizing: border-box;
}

/* 打印标识信息 - 默认隐藏 */
.print-info {
    display: none;
    margin-bottom: 10px;
    font-size: 0.8em;
    color: #666;
    text-align: right;
}

/* --- 表格样式 --- */
.table-style table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 15px;
    table-layout: fixed;
}

/* 移除旧的表头行样式 */
/*
.print-header-row th {
    text-align: center;
    border: none !important;
    padding-bottom: 15px !important;
    background-color: white !important;
}

.print-header-row h2 {
    margin: 0 0 5px 0;
}

.print-header-row .header-info {
    display: flex;
    justify-content: space-between;
    font-size: 1.1em;
    color: #555;
    font-weight: normal;
    margin-top: 5px;
}
*/

/* 新增：表格外部表头容器样式 */
.table-header-outside {
    text-align: center;
    margin-bottom: 15px;
    /* 表头和表格之间的间距 */
}

.table-header-outside h2 {
    margin: 0 0 8px 0;
    /* 标题和信息之间的间距 */
    font-size: 1.8em;
    /* 调整非打印时标题大小 */
}

.table-header-outside .header-info {
    display: flex;
    justify-content: space-between;
    width: 100%;
    font-size: 1.1em;
    /* 调整非打印时信息大小 */
    color: #555;
}

.table-style th,
.table-style td {
    border: 1px solid #ddd;
    padding: 6px;
    text-align: center;
    font-size: 0.85em;
    vertical-align: middle;
    line-height: 2;
    height: 28px;
}

.table-style th {
    /* background-color: #f2f2f2; */
    /* 移除背景色 */
    font-weight: bold;
    white-space: nowrap;
}

.table-style .footer {
    text-align: right;
    font-weight: bold;
    margin-top: 10px;
    margin-bottom: 30px;
}

/* 表格底部总价样式 */
.table-style .table-footer {
    text-align: right;
    margin-top: 10px;
    margin-bottom: 20px;
    padding-right: 20px;
}

.table-style .footer-text {
    font-size: 1.2em;
    font-weight: bold;
    color: #333;
}

/* --- 新签收单样式 --- */
.new-receipt-print-area {
    width: 100%;
}

.new-receipt-item {
    width: 100%;
    margin-bottom: 20px;
    page-break-inside: avoid;
    page-break-after: always;
    box-sizing: border-box;
}

.new-receipt-item:last-child {
    page-break-after: auto;
    /* 最后一个不分页 */
}

/* "左列" 内容区，现在是全宽块，内容居中 */
.receipt-left-column {
    width: 100%;
    /* 占据全部宽度 */
    box-sizing: border-box;
    display: flex;
    /* 使用flex来居中其子项 */
    flex-direction: column;
    align-items: center;
    margin-top: 50px;
}

/* 左侧产品标题区域 - 用户已修改为使用 ::before 和 ::after */
.receipt-product-title-area {
    /* margin-bottom: 25px; -- 用户已移除 */
    line-height: 1.4;
    width: 70%;
    /* 用户已设置 */
    position: relative;
    margin-bottom: 30px;
    /* 用户已设置 */
}

/* 清理之前 r- 系列的类，因为HTML结构已改变 */
/*
.r-main-title-line { ... }
.r-product-name { ... }
.r-packaging-info-block { ... }
.r-packaging-tag { ... }
.r-packaging-subtitle-en { ... }
*/

/* "右列" 内容区，现在是全宽块，文本右对齐 */
.receipt-right-column {
    width: 100%;
    /* 占据全部宽度 */
    padding: 10px;
    /* 保持一些内边距 */
    box-sizing: border-box;
    text-align: right;
    /* 其内部文本（制单日期等）右对齐 */
}

.receipt-field {
    display: flex;
    width: 50%;
    /* 用户已设置 */
    color: #000;
    font-size: 14px;
    /* 统一字体大小 */
    line-height: 1.7;
    min-height: 35px;
    /* 用户已设置 */
    align-items: center;
    box-sizing: border-box;
}

.receipt-field:last-child {
    border-bottom: none;
    /* 最后一个字段无下边框 */
}

.receipt-field .receipt-label {
    text-align: left;
    /* 用户已设置 */
    padding: 5px 0px 5px 5px;
    /* 用户已设置 */
    min-width: 60px;
    white-space: nowrap;
    font-size: 14px;
    /* 统一字体大小 */
}

.receipt-field .receipt-value {
    text-align: left;
    /* 用户已设置 */
    padding: 5px 5px 5px 0px;
    /* 用户已设置 */
    white-space: normal;
    word-break: break-word;
    flex-grow: 1;
    border-bottom: 1px solid #000 !important;
    /* 用户已设置 */
    font-size: 14px;
    /* 统一字体大小 */
}

/* 特殊处理日期行 */
.receipt-left-column .receipt-field:first-child .receipt-value {
    font-size: 30px;
}

/* 特殊处理备注行 */
.receipt-field-remark {
    align-items: flex-start;

}


.receipt-field-remark .receipt-value {
    white-space: pre-wrap;
    border-bottom: none !important;
}


/* 右侧样式 */
.receipt-field-right {
    font-size: 14px;
    /* 统一字体大小 */
    line-height: 1.6;
}

.receipt-field-right.product-name {
    font-size: 14px;
    /* 统一字体大小 - 注意：原为较大字号和加粗，按要求统一 */
    font-weight: bold;
    /* 保留加粗以作区分，如果不需要可移除 */
    color: #000;
    /* margin-bottom: 25px; -- 用户已移除 */
}

.receipt-field-right:last-child {
    margin-bottom: 0;
}

.receipt-product-title-area::after {
    /* "Product Information" */
    content: "Product Information";
    position: absolute;
    left: 0;
    /* 用户已设置 */
    bottom: -30px;
    /* 用户已设置 */
    padding: 5px 18px 5px 5px;
    /* 用户已设置 */
    min-width: 90px;
    /* 用户已设置 */
    white-space: nowrap;
    /* 用户已设置 */
    font-size: 14px;
    /* 统一字体大小 */
}

.receipt-product-title-area::before {
    /* "功能沙发" */
    content: "功能沙发";
    /*  实际内容应来自JS {{item.productName}}，CSS content仅用于占位演示，若要动态需JS处理 */
    position: absolute;
    left: -100px;
    /* 用户已设置 */
    top: 0;
    /* 用户已设置 */
    padding: 5px 18px 5px 5px;
    /* 用户已设置 */
    min-width: 90px;
    /* 用户已设置 */
    white-space: nowrap;
    /* 用户已设置 */
    font-size: 14px;
    /* 统一字体大小 */
}

/* --- 打印样式 --- */
@media print {

    /* 基本页面设置 */
    html,
    body {
        margin: 0 !important;
        padding: 0 !important;
        background-color: #fff !important;
        font-size: 10pt !important;
        /* 略微调整基础打印字体大小 */
        width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        -webkit-print-color-adjust: exact !important;
        print-color-adjust: exact !important;
    }

    /* 隐藏所有不需要打印的元素 */
    body * {
        visibility: hidden;
    }

    /* 重置打印模态框样式 */
    .print-modal-overlay {
        position: absolute !important;
        background-color: transparent !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
        display: block !important;
        left: 0 !important;
        top: 0 !important;
    }

    .print-modal {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        max-height: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
        display: block !important;
    }

    /* 隐藏弹窗头部和底部 */
    .print-modal-header,
    .print-modal-footer {
        display: none !important;
    }

    /* 优化打印内容区域 */
    .print-modal-body {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        overflow: visible !important;
        display: block !important;
        visibility: visible !important;
    }

    /* 确保打印区域内所有内容可见 */
    .print-modal-body *,
    .print-area,
    .print-area * {
        visibility: visible !important;
        overflow: visible !important;
    }

    /* 显示打印标识信息 */
    .print-info {
        display: block !important;
        margin-bottom: 10px !important;
        font-size: 8pt !important;
        color: #666 !important;
    }

    /* 表格打印样式优化 */
    .table-style {
        width: 100% !important;
        border: none !important;
    }

    .table-style table {
        border-collapse: collapse !important;
        border: none !important;
        width: 100% !important;
    }

    .table-style th,
    .table-style td {
        border: 1px solid #000 !important;
        font-size: 9.5pt !important;
        /* 减小 2pt */
        padding: 2px 3px !important;
        page-break-inside: avoid !important;
    }

    /* 新增：设置备注单元格字体大小 */
    .table-style .remark-cell {
        font-size: 9.5pt !important;
        /* 比其他单元格小 2pt */
    }

    /* 新增：居中备注表头 */
    .table-style .remark-header {
        text-align: center !important;
    }

    /* 避免表格内单元格断页 */
    .table-style tr {
        page-break-inside: avoid !important;
    }

    /* 表头每页重复显示 */
    thead {
        display: table-header-group !important;
    }

    tbody {
        display: table-row-group !important;
    }

    /* 备注相关元素样式 - 仅保留文本相关属性 */
    .remark-header,
    .remark-cell {
        text-align: left !important;
        white-space: pre-wrap !important;
        word-break: break-word !important;
        font-size: 9pt !important;
    }

    /* 调整表头字体 */
    .table-header-outside .header-info {
        font-size: 12pt !important;
        /* 减小 2pt */
        margin-top: 5px !important;
        /* display: flex 和 justify-content 在打印时也需要 */
        display: flex !important;
        justify-content: space-between !important;
        width: 100% !important;
    }

    .table-header-outside h2 {
        font-size: 16pt !important;
        /* 减小 2pt */
        margin-bottom: 8px !important;
        text-align: center !important;
        /* 确保打印时居中 */
    }

    /* 调整总价信息样式 */
    .table-style .table-footer {
        display: block !important;
        text-align: right !important;
        margin-top: 8px !important;
        margin-bottom: 5mm !important;
        padding-right: 5mm !important;
    }

    .table-style .footer-text {
        font-size: 11pt !important;
        font-weight: bold !important;
        color: #000 !important;
        visibility: visible !important;
    }

    /* 新签收单打印样式 */
    .new-receipt-print-area {
        width: 100% !important;
        margin-top: 0 !important;
        /* 打印时无需顶部边距 */
        page-break-before: always !important;
        /* 每个签收单块从新页面开始 */
    }

    .new-receipt-print-area:first-child {
        page-break-before: auto !important;
        /* 第一个签收单块不需要在新页面开始 */
    }

    .new-receipt-item {
        page-break-inside: avoid !important;
        page-break-after: always !important;
        margin: 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 0 !important;
        /* align-items: flex-start !important; */
        /* 移除flex对齐 */
    }

    .new-receipt-item:last-child {
        page-break-after: auto !important;
    }

    /* 打印时："左列"内容区 */
    .receipt-left-column {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        /* 打印时间距 */
    }

    /* 打印时：左侧产品标题区域样式 */
    .receipt-product-title-area {
        /* margin-bottom: 10px !important; -- 已被用户CSS修改中的其他地方移除 */
        line-height: 1.3 !important;
    }

    /* 清理打印时 r- 系列的类 */
    /*
    .r-main-title-line { ... }
    .r-product-name { ... }
    .r-packaging-info-block { ... }
    .r-packaging-tag { ... }
    .r-packaging-subtitle-en { ... }
    */

    /* 左列标签打印样式 */
    .receipt-field .receipt-label {
        font-size: 15pt !important;
    }

    .receipt-field .receipt-value {
        border-bottom: 1px solid #000 !important;
        font-size: 15pt !important;
        /* 统一打印字体大小 */
    }

    .receipt-field-remark .receipt-value {
        border-bottom: none !important;
    }


    .receipt-field {
        font-size: 15pt !important;
        /* 统一打印字体大小 */
        min-height: 35px !important;
        color: #000 !important;
    }

    .receipt-field:last-child {
        border-bottom: none !important;
    }

    /* 打印时："右列"内容区 */
    .receipt-right-column {
        width: 100% !important;
        padding: 2mm !important;
        text-align: right !important;
    }

    /* 调整打印字体大小 */
    .receipt-field-right {
        font-size: 15pt !important;
        /* 统一打印字体大小 */
        color: #000 !important;
        text-align: right !important;
    }

    .receipt-field-right.product-name {
        font-size: 15pt !important;
        /* 统一打印字体大小 */
    }

    /* 打印时伪元素字体 */
    .receipt-product-title-area::before,
    .receipt-product-title-area::after {
        font-size: 15pt !important;
        /* 统一打印字体大小 */
    }

    /* 原有的打印样式 .receipt-main-title, .receipt-subtitle 可以移除或注释 */

    /* 签收单页面设置 - 纵向 */
    @page receipt-page {
        size: portrait !important;
        margin: 15mm !important;
    }

    /* 将签收单区域应用特定页面样式 */
    .new-receipt-print-area {
        page: receipt-page;
    }

    /* 默认页面设置 (表格) - 横向 */
    @page {
        size: landscape !important;
        margin: 8mm !important;
    }
}