body {
    font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
    background-color: #f4f4f4;
    color: #333;
}

.container {
    max-width: 900px;
    margin: auto;
    background: #fff;
    padding: 20px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

header h1, footer p {
    text-align: center;
}

.input-section textarea {
    width: 98%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.api-key-input {
    margin-bottom: 15px;
}

.api-key-input label {
    display: block;
    margin-bottom: 5px;
}

.api-key-input input {
    width: calc(98% - 22px); /* Adjust for padding and border */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-bottom: 5px;
}

.api-key-input small {
    font-size: 0.8em;
    color: #666;
}

button {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-bottom: 10px;
    font-size: 16px;
}

button:hover {
    background-color: #0056b3;
}

.output-section {
    margin-top: 20px;
}

.print-area {
    border: 1px dashed #ccc;
    padding: 20mm; /* A4-like padding */
    background: white;
    min-height: 297mm; /* Approximate A4 height for preview */
    width: 210mm;      /* Approximate A4 width for preview */
    margin: 20px auto; /* Center the preview */
    box-sizing: border-box;
    overflow: auto; /* Handle content overflow */
}

.print-area .placeholder-text {
    color: #aaa;
    text-align: center;
    margin-top: 50px;
}

.print-area h1 {
    font-size: 26px; /* 主标题字号 */
    margin-bottom: 25px;
    color: #333;
}

.print-area h2 {
    font-size: 20px; /* 区块标题字号 */
    margin-bottom: 15px;
    color: #444;
}

.print-area h3 {
    font-size: 17px; /* 子区块标题字号 */
    margin-bottom: 10px;
    color: #555;
}

.print-area ul {
    list-style-type: none;
    padding-left: 0; /* Will add padding to li itself */
}

.print-area li {
    margin-bottom: 10px; /* 列表项间距 */
    line-height: 1.5;    /* 列表项行高，改善多行文本可读性 */
    position: relative; /* For pseudo-element positioning */
    padding-left: 30px; /* Increased space for the larger custom checkbox */
}

.print-area li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px; /* Adjust for vertical alignment */
    width: 16px;
    height: 16px;
    border: 1.5px solid #a1a1aa; /* Neutral border color */
    background-color: #fff;
    border-radius: 4px;
    display: inline-block;
    box-sizing: border-box;
    cursor: pointer; /* Indicate it's clickable */
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out; /* Smooth transition */
}

.print-area li.task-completed::before {
    background-color: #007bff; /* Primary color for completed state */
    border-color: #007bff;
    /* White SVG checkmark */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='white'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px; /* Adjust size of the checkmark */
}

.print-area .section {
    margin-bottom: 25px; /* 区块下边距 */
    padding-bottom: 15px; /* 区块内下边距 */
    border-bottom: 1px solid #e0e0e0; /* 更柔和的分隔线 */
}

.print-area .section:last-child {
    border-bottom: none;
}

.print-area .notes {
    font-style: italic;
    color: #555;
    margin-top: 15px;
    padding: 10px 15px;
    border-left: 4px solid #007bff; /* 加强左边框 */
    background-color: #f8f9fa; /* 浅背景色 */
    border-radius: 4px; /* 轻微圆角 */
    font-size: 0.95em; /* 备注字体略小 */
}

/* Print-specific styles */
@media print {
    .output-section > h2 {
        display: none !important; /* Hide the H2 title in output-section when printing */
    }

    body {
        background-color: #fff; /* Ensure background is white for printing */
        padding: 0;
        margin: 0;
    }

    .container {
        width: 100%;
        margin: 0;
        padding: 0;
        box-shadow: none;
    }

    .input-section, header, footer, button#formatButton, button#printButton, .api-key-input {
        display: none !important; /* Hide non-printable elements */
    }

    .output-section {
        margin: 0;
    }

    .print-area {
        width: 100%; /* Use full page width */
        min-height: 0; /* Reset min-height for printing */
        border: none;
        padding: 10mm; /* Adjust margins for actual printing */
        margin: 0;
        box-shadow: none;
        overflow: visible;
        page-break-inside: avoid;
        font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif; /* Ensure CJK fonts for printing */
    }

    .print-area .section {
        page-break-inside: avoid;
    }
}