* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Hiragino Sans', 'Noto Sans JP', sans-serif;
            background: #f5f5f5;
            color: #333;
        }

        /* プレースホルダーと入力済み文字のコントラスト改善 */
        input::placeholder,
        textarea::placeholder {
            color: #aaa;
            opacity: 1;
        }

        input::-webkit-input-placeholder,
        textarea::-webkit-input-placeholder {
            color: #aaa;
            opacity: 1;
        }

        input::-moz-placeholder,
        textarea::-moz-placeholder {
            color: #aaa;
            opacity: 1;
        }

        input:-ms-input-placeholder,
        textarea:-ms-input-placeholder {
            color: #aaa;
        }

        /* 入力済みテキストをより濃い色に */
        .invoice-container input,
        .invoice-container textarea,
        .invoice-container select,
        .tools-panel input,
        .tools-panel textarea {
            color: #111;
        }

        /* Fixed Top Bar */
        .top-bar {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background: linear-gradient(135deg, #3A47C6 0%, #2d366e 100%);
            color: white;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 32px;
            box-shadow: 0 2px 20px rgba(58, 71, 198, 0.25);
            z-index: 1000;
        }

        .top-bar-left {
            display: flex;
            align-items: center;
            gap: 24px;
        }

        .brand-section {
            display: flex;
            align-items: center;
            gap: 10px;
            cursor: pointer;
            /* Require for clickable feeling */
        }


        .brand-icon {
            width: 32px;
            height: 32px;
            border-radius: 6px;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        .brand-name {
            font-size: 17px;
            font-weight: 600;
            letter-spacing: 0.3px;
        }

        .top-bar-divider {
            width: 1px;
            height: 24px;
            background: rgba(255, 255, 255, 0.2);
        }

        .top-bar-actions {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .action-btn {
            padding: 8px 16px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 6px;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.9);
            font-size: 13px;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s ease;
        }

        .action-btn:hover {
            background: rgba(255, 255, 255, 0.15);
            border-color: rgba(255, 255, 255, 0.35);
            color: white;
        }

        .action-btn.action-primary {
            /* High Visibility: Orange/Gold Gradient */
            background: linear-gradient(180deg, #FFB74D 0%, #FF9800 100%);
            border: 1px solid #EF6C00;
            color: #ffffff;
            font-weight: 700;
            font-size: 13px;
            padding: 4px 48px;
            min-width: 160px;
            border-radius: 30px;
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
            /* Warm shadow */
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2),
                inset 0 1px 0 rgba(255, 255, 255, 0.4);
            letter-spacing: 0.05em;
            transition: all 0.2s ease-in-out;
            cursor: pointer;
            line-height: 1.4;
        }

        .action-btn.action-primary:hover {
            /* Brighter on hover */
            background: linear-gradient(180deg, #FFCC80 0%, #FFA726 100%);
            transform: translateY(-1px);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25),
                inset 0 1px 0 rgba(255, 255, 255, 0.5);
            border-color: #E65100;
        }

        .action-btn.action-primary:active {
            transform: translateY(0);
            background: linear-gradient(180deg, #FF9800 0%, #FFB74D 100%);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15),
                inset 0 1px 2px rgba(0, 0, 0, 0.1);
            border-color: #EF6C00;
        }

        .preview-action-container {
            position: relative;
            display: flex;
            align-items: center;
            transform: translateY(6px);
            cursor: pointer;
        }

        .preview-hint-text {
            position: absolute;
            bottom: 100%;
            left: 50%;
            transform: translateX(-50%);
            margin-bottom: 1px;
            font-size: 9px;
            font-weight: bold;
            color: #FFB74D;
            white-space: nowrap;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            letter-spacing: 1px;
        }



        .document-toggle {
            display: flex;
            gap: 4px;
            background: rgba(255, 255, 255, 0.1);
            padding: 4px;
            border-radius: 8px;
        }

        .document-toggle button {
            padding: 6px 16px;
            border: none;
            background: transparent;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            font-size: 13px;
            font-weight: 500;
            transition: all 0.2s ease;
            border-radius: 5px;
        }

        .document-toggle button.active {
            background: white;
            color: #3A47C6;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }

        .document-toggle button:not(.active):hover {
            color: white;
            background: rgba(255, 255, 255, 0.1);
        }

        /* Main Container */
        .container {
            display: flex;
            gap: 20px;
            max-width: 1800px;
            margin: 20px auto;
            padding: 0 20px;
            height: calc(100vh - 96px);
            /* 高さ固定: 100vh - (Header 56px + Margin Top 20px + Margin Bottom 20px) */
        }

        .main-area {
            flex: 1;
            background: white;
            border-radius: 12px;
            padding: 40px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
            overflow-y: auto;
            height: 100%;
            /* 親要素の高さに合わせる */
            /* Ensure the main area handles the overflow if scale doesn't work perfectly immediately */
            overflow-x: hidden;
        }

        .tools-panel {
            width: 300px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
            overflow-y: auto;
            height: 100%;
            /* 親要素の高さに合わせる */
            order: -1;
            /* 左側に配置 */
            flex-shrink: 0;
        }

        /* ========== Invoice Canvas Styles ========== */
        .invoice-wrapper {
            width: 100%;
            display: flex;
            justify-content: center;
        }

        .invoice-container {
            width: 820px;
            /* Fixed width for A4 consistency */
            min-width: 820px;
            /* max-width removed to prevent reflow */
            margin: 0 auto;
            background: white;
            border: 1px solid #e0e0e0;
            padding: 50px 45px;
            line-height: 1.8;
            font-size: 13px;
            transform-origin: top center;
            /* Scale from top */
            transition: transform 0.1s ease-out;
            /* Smooth scaling */
        }

        .invoice-container.print-mode {
            border: none !important;
            box-shadow: none !important;
        }

        /* Visual Hint for Editable Fields */
        .invoice-container input:not([readonly]):not([type="hidden"]),
        .invoice-container textarea:not([readonly]),
        .invoice-container select:not([readonly]) {
            background-color: rgba(58, 71, 198, 0.05);
            /* Light blue tint */
            transition: background-color 0.2s ease;
        }

        .invoice-container input:not([readonly]):not([type="hidden"]):focus,
        .invoice-container textarea:not([readonly]):focus,
        .invoice-container select:not([readonly]):focus {
            background-color: rgba(58, 71, 198, 0.08);
            /* Slightly darker on focus */
        }

        /* Remove background for print/preview */
        @media print {

            .invoice-container input,
            .invoice-container textarea,
            .invoice-container select {
                background-color: transparent !important;
            }
        }

        .invoice-container.print-mode input,
        .invoice-container.print-mode textarea,
        .invoice-container.print-mode select {
            background-color: transparent !important;
        }

        /* Invoice Header Bar */
        .invoice-header-bar {
            background-color: #3A47C6;
            color: white;
            text-align: center;
            padding: 15px;
            margin: -50px -45px 30px -45px;
            font-size: 32px;
            font-weight: bold;
            letter-spacing: 2px;
        }

        .invoice-title {
            display: block;
        }

        .receipt-title {
            display: none;
        }

        .invoice-container.receipt-mode .invoice-title {
            display: none;
        }

        .invoice-container.receipt-mode .receipt-title {
            display: block;
        }

        /* Top Section: Client on Left, Invoice Details on Right */
        .invoice-top-section {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 40px;
            margin: 0 0 30px 0;
        }

        .top-left {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .client-company-block {
            display: flex;
            align-items: baseline;
            gap: 0;
        }

        .client-company-name {
            font-size: 20px;
            font-weight: bold;
            border: none;
            border-bottom: 1px solid #333;
            padding: 4px 0;
            background: transparent;
            font-family: inherit;
            flex: 1;
            resize: none;
            overflow: hidden;
            display: block;
            min-height: 38px;
            /* Approximate height for one line */
            line-height: 1.5;
        }

        .client-company-name:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }



        .honorific {
            font-weight: bold;
            color: #333;
            font-size: 14px;
            white-space: nowrap;
            flex-shrink: 0;
        }

        .honorific-select {
            font-weight: bold;
            color: #333;
            font-size: 14px;
            white-space: nowrap;
            flex-shrink: 0;
            border: 1px solid #ddd;
            background: #f8f8f8;
            font-family: inherit;
            cursor: pointer;
            padding: 4px 8px;
            border-radius: 4px;
            transition: all 0.15s ease;
        }

        .honorific-select:hover {
            border-color: #bbb;
            background-color: #f0f0f0;
        }

        .honorific-select:focus {
            outline: none;
            border-color: #3A47C6;
            box-shadow: 0 0 0 2px rgba(58, 71, 198, 0.15);
        }

        /* Print mode: hide dropdown appearance */
        .print-mode .honorific-select {
            border: none;
            background: transparent;
            padding: 0;
            pointer-events: none;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
        }

        .payment-deadline {
            display: flex;
            align-items: baseline;
            gap: 8px;
        }

        .deadline-label {
            font-weight: bold;
            font-size: 12px;
            white-space: nowrap;
        }

        .deadline-input {
            flex: 1;
            border: none;
            border-bottom: 1px solid #999;
            padding: 4px 0;
            font-size: 12px;
            background: transparent;
            font-family: inherit;
        }

        .deadline-input:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }

        .top-right {
            display: flex;
            justify-content: flex-end;
            gap: 50px;
        }

        .invoice-info-inline {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            gap: 5px;
            justify-content: flex-end;
        }

        .invoice-info-item {
            display: flex;
            align-items: baseline;
            gap: 5px;
        }

        .invoice-no-label,
        .invoice-date-label {
            font-size: 14px;
            font-weight: bold;
            color: #333;
            white-space: nowrap;
        }

        .invoice-no-input {
            border: none;
            border-bottom: 1px solid #333;
            padding: 4px 0;
            font-size: 14px;
            font-weight: bold;
            width: auto;
            min-width: 30px;
            max-width: 400px;
            text-align: right;
            background: transparent;
            font-family: inherit;
        }

        .invoice-no-input:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }

        .invoice-date-input {
            border: none;
            border-bottom: 1px solid #333;
            font-family: inherit;
            font-size: 14px;
            font-weight: bold;
            background: transparent;
            text-align: right;
            width: 130px;
        }

        .invoice-date-input:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }

        /* Invoice Info Section */


        .info-block {
            font-size: 11px;
            line-height: 1.8;
        }

        .info-label {
            font-weight: bold;
            margin-bottom: 10px;
            font-size: 11px;
        }

        .info-content {
            color: #555;
        }

        .info-content input,
        .info-content textarea {
            width: 100%;
            border: none;
            border-bottom: 1px solid #999;
            padding: 4px 0;
            font-family: inherit;
            font-size: 11px;
            margin: 4px 0;
            background: transparent;
            resize: none;
            overflow: hidden;
            display: block;
        }

        .info-content input:focus {
            outline: none;
            border-bottom-color: #3A47C6;
            background: rgba(58, 71, 198, 0.02);
        }

        .postal-code {
            font-weight: 500;
        }

        .address {
            margin: 6px 0 !important;
        }

        .address {
            margin: 6px 0 !important;
            line-height: 1.4;
        }

        .phone {
            margin: 6px 0 !important;
            line-height: 1.4;
        }

        .email {
            color: #0066cc;
            margin: 6px 0 !important;
        }

        .person-name {
            margin: 6px 0 !important;
        }

        .issuer-company {
            font-size: 16px !important;
            font-weight: bold;
            margin: 8px 0 4px 0 !important;
        }

        .issuer-address,
        .issuer-phone,
        .issuer-email,
        .issuer-postal {
            margin: 0 !important;
            font-size: 11px;
            color: #555;
        }

        .issuer-registration-number {
            font-weight: normal;
            font-size: 10px;
            color: #666;
            margin-top: 4px !important;
        }

        .tax-breakdown-row {
            display: flex;
            justify-content: flex-end;
            font-size: 10px;
            color: #666;
            padding: 4px 12px;
            background: #f9f9f9;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
        }


        /* Items Table */
        .items-table {
            width: 100%;
            border-collapse: collapse;
            margin: 20px 0;
        }

        .items-table th {
            background-color: #f2f2f2;
            border: 1px solid #333;
            padding: 8px;
            text-align: center;
            font-weight: bold;
            font-size: 11px;
            color: #000;
        }

        .items-table th:first-child {
            width: 5%;
        }

        .items-table td {
            border: 1px solid #333;
            padding: 8px;
            text-align: right;
            background: white;
            font-size: 11px;
            vertical-align: middle;
        }

        .items-table td:first-child {
            text-align: center;
        }


        .items-table td:nth-child(2) {
            text-align: left;
        }

        /* Header Styling: Restore enclosing border for the header */
        .items-table th {
            border: 1px solid #333;
        }

        /* Ensure header has its outer borders */
        .items-table thead tr:first-child th {
            border-top: 1px solid #333;
        }

        .items-table th:first-child {
            border-left: 1px solid #333;
        }

        .items-table th:last-child {
            border-right: 1px solid #333;
        }

        .item-no {
            text-align: center;
            font-weight: bold;
        }

        .items-table input,
        .items-table textarea {
            width: 100%;
            border: none;
            background: transparent;
            padding: 0;
            text-align: inherit;
            font-family: inherit;
            font-size: inherit;
            resize: none;
            overflow: hidden;
            display: block;
        }

        .items-table textarea {
            vertical-align: middle;
            line-height: 1.4;
        }

        .items-table input:focus {
            outline: none;
            background: rgba(58, 71, 198, 0.08);
        }

        .item-amount {
            font-weight: bold;
        }

        .add-item-btn {
            background: #666;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 4px;
            cursor: pointer;
            font-size: 12px;
            margin: 10px 0;
            white-space: nowrap;
        }

        .add-item-btn:hover {
            background: #444;
        }

        /* Totals Section - Unified Box */
        .totals-section {
            display: flex;
            flex-direction: column;
            width: 100%;
            margin: 25px 0 20px 0;
            padding: 20px;
            border-radius: 6px;
            background: #fafafa;
            gap: 15px;
            page-break-inside: avoid;
        }




        .totals-row-primary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 30px;
            font-size: 14px;
            color: #333;
            padding: 10px 0;
            border-bottom: 1px solid #ccc;
        }

        .total-item {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .total-label-sm {
            font-weight: bold;
            font-size: 13px;
        }

        .total-value-sm {
            font-family: 'Courier New', monospace;
            font-weight: bold;
            font-size: 15px;
            min-width: 80px;
            text-align: right;
        }

        .total-divider {
            width: 1px;
            height: 18px;
            background: #999;
        }

        .print-mode .tax-rate-display {
            display: inline !important;
        }

        /* Item Tax Rate - Print Mode */
        .item-tax-rate-display {
            display: none;
            font-size: 11px;
        }

        @media print {
            .item-tax-rate {
                display: none !important;
            }

            .item-tax-rate-display {
                display: block !important;
            }
        }

        .print-mode .item-tax-rate {
            display: none !important;
        }

        .print-mode .item-tax-rate-display {
            display: block !important;
        }

        /* Hide calendar icons in print mode */
        @media print {
            .date-picker-icon {
                display: none !important;
            }
        }

        .print-mode .date-picker-icon {
            display: none !important;
        }

        /* Styling for editable date display inputs */
        .date-display-input {
            border: none;
            background: transparent;
            font-size: 14px;
            font-weight: bold;
            font-family: inherit;
            color: inherit;
            cursor: text;
            padding: 0;
            margin: 0;
            /* width: 100% removed to fix spacing issue */
        }

        .date-display-input:focus {
            outline: none;
            border-bottom: 1px solid #3A47C6;
            background: rgba(58, 71, 198, 0.05);
        }

        .totals-row-secondary {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 40px;
        }

        .grand-total-block {
            display: flex;
            align-items: center;
            gap: 25px;
            padding: 10px 20px;
        }

        .total-label-lg {
            font-size: 16px;
            font-weight: bold;
            color: #333;
        }

        .total-value-lg {
            font-size: 22px;
            font-weight: bold;
            font-family: 'Courier New', monospace;
            color: #000;
        }

        .deadline-block {
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .deadline-label {
            font-size: 13px;
            font-weight: bold;
        }

        .deadline-input {
            border: none;
            border-bottom: 2px solid #666;
            padding: 4px 6px;
            font-size: 14px;
            font-family: inherit;
            background: transparent;
            text-align: center;
            width: 150px;
        }

        .deadline-input:focus {
            outline: none;
            border-bottom-color: #333;
        }


        /* Footer Section - 振込先と備考欄を囲む親要素 */
        .footer-section {
            /* Flexboxをやめて単純なブロック配置にする（html2canvas対策） */
            display: block;
            margin-top: 0;
            page-break-inside: avoid;
            /* PDFで途切れないようにする */
        }

        /* 2番目以降の要素（備考欄）にマージンをつける */
        .footer-section>*:not(:first-child) {
            margin-top: 25px;
        }

        /* Bank Info */
        .bank-info {
            margin: 0;
            padding: 20px;
            background-color: #fff;
            border: 1px solid #333;
            border-radius: 2px;
            page-break-inside: avoid;
            position: relative;
            /* Added for absolute positioning of title */
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

        .bank-details-container {
            flex: 1;
            transition: all 0.3s ease;
        }

        .bank-qr-container {
            display: none;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 120px;
            margin-left: 15px;
            padding-left: 15px;
            border-left: 1px dashed #ddd;
            flex-shrink: 0;
        }

        .bank-info.has-clockclock-id .bank-qr-container {
            display: flex;
        }

        .bank-qr-title {
            font-size: 10px;
            font-weight: bold;
            color: #555;
            margin-bottom: 5px;
            text-align: center;
            border: 1px solid #333;
            padding: 2px 6px;
            border-radius: 10px;
            white-space: nowrap;
        }

        #bankQrCode img {
            max-width: 100%;
            height: auto;
        }

        .bank-info-title {
            position: absolute;
            top: -8px;
            left: 8px;
            background: white;
            padding: 0 5px;
            font-size: 13px;
            /* Increased from 11px */
            font-weight: bold;
            color: #333;
            line-height: 1;
            margin: 0;
        }

        .bank-info-row {
            display: flex;
            margin: 8px 0;
            font-size: 12px;
        }

        .bank-info-label {
            min-width: 70px;
            font-weight: bold;
        }

        .bank-info-row input {
            flex: 1;
            border: none;
            background: transparent;
            border-bottom: 1px solid #999;
            padding: 2px 0;
            font-family: inherit;
            font-size: inherit;
        }

        .bank-info-row input:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }

        .bank-info-line {
            display: flex;
            align-items: baseline;
            gap: 10px;
            margin: 8px 0;
            font-size: 12px;
            flex-wrap: wrap;
        }

        .bank-info-line span {
            white-space: nowrap;
        }

        .bank-info-line input {
            border: none;
            border-bottom: 1px solid #999;
            background: transparent;
            padding: 2px 4px;
            /* 少しパディングを追加 */
            font-family: inherit;
            font-size: inherit;
            min-width: 60px;
            /* 最小幅を設定 */
        }

        .bank-info-line input:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }

        /* 個別のフレックス設定 */
        #bankName,
        #branchName,
        #accountName {
            flex: 1;
            /* 名前系は均等に伸びるように */
        }

        #branchNumber {
            width: 40px;
            /* 支店番号は固定 */
            min-width: 40px;
        }

        #accountNumber {
            width: 100px;
            /* 口座番号はある程度固定でOKだが、flex入れても良い */
            flex: 0 0 100px;
        }

        .account-type-select {
            border: none;
            border-bottom: 1px solid #999;
            background: transparent;
            font-family: inherit;
            font-size: inherit;
            padding: 2px 4px;
            cursor: pointer;
            appearance: none;
            /* デフォルトの矢印を消す場合 */
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
            background-repeat: no-repeat;
            background-position: right 0px center;
            background-size: 12px;
            padding-right: 18px;
        }

        .account-type-select:focus {
            outline: none;
            border-bottom-color: #3A47C6;
        }

        .remarks {
            margin: 0;
            padding: 15px;
            border: 1px solid #333;
            border-radius: 2px;
            page-break-inside: avoid;
            position: relative;
            /* Added for absolute positioning of label */
        }

        .remarks-label {
            position: absolute;
            top: -8px;
            left: 8px;
            background: white;
            padding: 0 5px;
            font-size: 13px;
            /* Increased from 11px */
            font-weight: bold;
            color: #333;
            line-height: 1;
            margin: 0;
        }

        .remarks textarea {
            width: 100%;
            border: none;
            border-bottom: 1px solid #ddd;
            /* Minimalist line */
            padding: 4px;
            font-family: inherit;
            font-size: 12px;
            resize: vertical;
            min-height: 60px;
        }

        .remarks textarea:focus {
            outline: none;
            border-color: #3A47C6;
            background: rgba(58, 71, 198, 0.02);
        }

        .auth-badge {
            display: none;
            background: #4caf50;
            color: white;
            padding: 10px 14px;
            border-radius: 20px;
            font-size: 11px;
            font-weight: bold;
            margin-top: 20px;
            text-align: center;
        }

        .auth-badge.active {
            display: block;
        }

        /* PDF Page Break Rules */
        .items-table tr {
            page-break-inside: avoid;
        }

        .totals-section {
            page-break-inside: avoid;
        }

        /* ========== Tools Panel Styles ========== */
        .tools-section {
            margin-bottom: 25px;
            padding-bottom: 20px;
            border-bottom: 1px solid #e0e0e0;
        }

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

        .section-title {
            font-weight: bold;
            font-size: 13px;
            margin-bottom: 12px;
            color: #333;
        }

        .control-group {
            margin-bottom: 12px;
        }

        .control-label {
            display: block;
            font-size: 11px;
            color: #666;
            margin-bottom: 6px;
            font-weight: 500;
        }

        .control-input {
            width: 100%;
            padding: 8px;
            border: 1px solid #ddd;
            border-radius: 4px;
            font-size: 12px;
            font-family: inherit;
        }

        .control-input:focus {
            outline: none;
            border-color: #3A47C6;
            box-shadow: 0 0 0 2px rgba(58, 71, 198, 0.1);
        }



        .color-picker-group {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .color-item {
            display: flex;
            flex-direction: column;
            gap: 6px;
        }

        .color-item input[type="color"] {
            width: 100%;
            height: 40px;
            border: 1px solid #ddd;
            border-radius: 4px;
            cursor: pointer;
        }

        .color-hex {
            font-size: 10px;
            color: #666;
            text-align: center;
        }

        .button-group {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        .btn {
            padding: 12px;
            border: none;
            border-radius: 6px;
            font-size: 13px;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.3s ease;
            text-align: center;
        }

        .btn-primary {
            background: #3A47C6;
            color: white;
        }

        .btn-primary:hover {
            background: #2d366e;
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(58, 71, 198, 0.4);
        }

        .btn-secondary {
            background: #f0f0f0;
            color: #333;
            border: 1px solid #ddd;
        }

        .btn-secondary:hover {
            background: #e8e8e8;
        }

        .info-text {
            font-size: 11px;
            color: #666;
            margin: 15px 0;
            padding: 10px;
            background: #f5f5f5;
            border-radius: 4px;
            border-left: 3px solid #3A47C6;
        }

        .delete-item-btn {
            background: #ff6b6b;
            color: white;
            border: none;
            padding: 4px 8px;
            border-radius: 3px;
            cursor: pointer;
            font-size: 11px;
        }

        .delete-item-btn:hover {
            background: #ee5a52;
        }



        /* Copy Notification Toast */
        .copy-notification {
            position: fixed;
            top: 80px;
            left: 50%;
            transform: translateX(-50%) translateY(-20px);
            background: linear-gradient(135deg, #4caf50 0%, #45a049 100%);
            color: white;
            padding: 14px 28px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 600;
            box-shadow: 0 6px 20px rgba(76, 175, 80, 0.4);
            z-index: 2000;
            opacity: 0;
            visibility: hidden;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            pointer-events: none;
        }

        .copy-notification.show {
            opacity: 1;
            visibility: visible;
            transform: translateX(-50%) translateY(0);
        }


        /* Guide Panel Styles */
        .guide-panel {
            width: 300px;
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
            /* Allow active card to pop out */
            overflow: visible;
            height: 100%;
            /* 親要素の高さに合わせる */
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        .guide-scroll-area {
            flex: 1;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            gap: 15px;
            /* Create space on left for pop-out, preserving visual alignment */
            margin-left: -50px;
            padding-left: 50px;
            /* Adjust right side to keep scrollbar inside if possible, or simple padding */
            padding-right: 5px;
            /* Add top padding to prevent overlap with section title when card is active */
            padding-top: 15px;

            /* Slight negative margins vertically if needed to counteract padding */
            margin-bottom: -10px;
            padding-bottom: 10px;
        }

        .guide-card {
            background: #fdfdfd;
            border: 1px solid #eee;
            border-radius: 8px;
            padding: 15px;
            transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            /* Bouncy pop */
            opacity: 0.6;
            margin-left: 0;
            backface-visibility: hidden;
        }

        .guide-card.active {
            opacity: 1;
            border-color: #3A47C6;
            background: #fff;
            box-shadow: 0 8px 25px rgba(58, 71, 198, 0.25);
            /* Move left significantly to "jump over" the section width */
            transform: scale(1.05) translateX(-25px);
            border-left: 6px solid #3A47C6;
            position: relative;
            z-index: 100;
        }

        .guide-card.active::before {
            content: '';
            position: absolute;
            right: 100%;
            top: 25px;
            margin-top: -10px;
            border: 12px solid transparent;
            border-right-color: #3A47C6;
        }

        .guide-title {
            font-weight: bold;
            font-size: 13px;
            color: #333;
            margin-bottom: 8px;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .guide-content {
            font-size: 11px;
            color: #666;
            line-height: 1.6;
        }

        .guide-content ul {
            padding-left: 15px;
            margin: 5px 0;
        }

        .guide-content li {
            margin-bottom: 4px;
        }



        @media (max-width: 1200px) {

            .tools-panel,
            .guide-panel {
                width: 100%;
            }
        }

        /* Promo Card Styles */
        .promo-card {
            background: linear-gradient(135deg, #3A47C6 0%, #764ba2 100%);
            color: white;
            border: none;
            box-shadow: 0 4px 15px rgba(58, 71, 198, 0.3);
        }

        .promo-card .guide-title {
            color: white;
            font-size: 14px;
            border-bottom: 1px solid rgba(255, 255, 255, 0.2);
            padding-bottom: 8px;
            margin-bottom: 10px;
        }

        .promo-card .guide-content {
            color: rgba(255, 255, 255, 0.95);
        }

        .promo-link {
            display: block;
            background: white;
            color: #3A47C6;
            padding: 10px;
            border-radius: 6px;
            font-weight: bold;
            font-size: 12px;
            text-decoration: none;
            margin-top: 12px;
            transition: all 0.2s ease;
            text-align: center;
        }

        .promo-link:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            background: #f8f9fa;
        }

        .promo-secondary-link {
            display: block;
            text-align: center;
            color: rgba(255, 255, 255, 0.8);
            font-size: 11px;
            margin-top: 8px;
            text-decoration: underline;
            transition: color 0.2s;
        }

        .promo-secondary-link:hover {
            color: white;
        }

        /* Copy Notification Toast */
        .preview-iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: none;
            z-index: 900;
        }

        .edit-mode-btn {
            position: fixed;
            bottom: 30px;
            right: 30px;
            background: #3A47C6;
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 20px rgba(58, 71, 198, 0.4);
            cursor: pointer;
            z-index: 1000;
            border: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .edit-mode-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(88, 101, 224, 0.6);
            background: #5865E0;
        }

        .download-pdf-btn {
            position: fixed;
            bottom: 30px;
            right: 220px;
            /* edit button is at right: 30px, width approx 180px? padding 30px. Let's space it out */
            background: #4caf50;
            color: white;
            padding: 15px 30px;
            border-radius: 50px;
            font-size: 16px;
            font-weight: bold;
            box-shadow: 0 4px 20px rgba(76, 175, 80, 0.4);
            cursor: pointer;
            z-index: 1000;
            border: none;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .download-pdf-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 25px rgba(76, 175, 80, 0.5);
            background: #43a047;
        }

        /* PDF Send Screen */
        .pdf-send-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #f5f5f5;
            z-index: 2000;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 80px 20px 40px;
            overflow-y: auto;
            box-sizing: border-box;
        }

        .pdf-send-header {
            text-align: center;
            margin-bottom: 30px;
        }

        .pdf-send-header h1 {
            color: #333;
            font-size: 28px;
            margin: 0 0 10px 0;
            font-weight: 600;
        }

        .pdf-send-header p {
            color: #666;
            font-size: 14px;
            margin: 0;
        }

        .pdf-send-content {
            display: flex;
            flex-direction: column;
            gap: 24px;
            width: 100%;
            max-width: 700px;
        }

        .pdf-send-card {
            background: white;
            border: 1px solid #e0e0e0;
            border-radius: 12px;
            padding: 30px;
            box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
        }

        .pdf-send-card h3 {
            color: #333;
            font-size: 16px;
            margin: 0 0 20px 0;
            display: flex;
            align-items: center;
            gap: 10px;
            font-weight: 600;
            padding-bottom: 15px;
            border-bottom: 1px solid #eee;
        }

        .pdf-send-card h3 .icon {
            font-size: 20px;
        }

        .pdf-send-textarea {
            width: 100%;
            min-height: 180px;
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 8px;
            padding: 16px;
            color: #333;
            font-size: 14px;
            line-height: 1.6;
            resize: vertical;
            font-family: inherit;
            box-sizing: border-box;
            transition: all 0.2s ease;
        }

        .pdf-send-textarea:focus {
            outline: none;
            border-color: #3A47C6;
            background: white;
            box-shadow: 0 0 0 3px rgba(58, 71, 198, 0.1);
        }

        .pdf-send-actions {
            display: flex;
            gap: 12px;
            margin-top: 20px;
            flex-wrap: wrap;
        }

        .pdf-send-btn {
            padding: 10px 20px;
            border-radius: 6px;
            font-size: 14px;
            font-weight: 600;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            border: none;
        }

        .pdf-send-btn-primary {
            background: #3A47C6;
            color: white;
        }

        .pdf-send-btn-primary:hover {
            background: #2d366e;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(58, 71, 198, 0.25);
        }

        .pdf-send-btn-secondary {
            background: white;
            color: #333;
            border: 1px solid #ddd;
        }

        .pdf-send-btn-secondary:hover {
            background: #f5f5f5;
            border-color: #bbb;
        }

        .pdf-send-url-display {
            width: 100%;
            background: #f9f9f9;
            border: 1px solid #ddd;
            border-radius: 6px;
            padding: 12px 16px;
            color: #333;
            font-size: 13px;
            font-family: monospace;
            word-break: break-all;
            margin-bottom: 20px;
            user-select: all;
        }

        .pdf-send-back-btn {
            position: fixed;
            bottom: 20px;
            left: 20px;
            top: auto;
            background: white;
            color: #333;
            padding: 12px 24px;
            border-radius: 50px;
            font-size: 14px;
            cursor: pointer;
            border: 1px solid #ddd;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 8px;
            z-index: 2200;
            font-weight: 600;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
        }

        /* PDF Send Mode Body State */
        body.pdf-send-mode .top-bar {
            display: flex !important;
            z-index: 2100;
            /* Ensure header is above overlay */
        }

        body.pdf-send-mode .pdf-send-overlay {
            top: 56px;
            /* Below header */
            height: calc(100% - 56px);
            z-index: 2147483647;
            padding-top: 60px;
            /* Reduced top padding since header is there */
        }

        /* Hide specific header buttons in PDF Send Mode */
        body.pdf-send-mode #generateUrlBtnHeader,
        body.pdf-send-mode #previewModeBtnHeader {
            display: none !important;
        }

        .pdf-send-back-btn:hover {
            background: #f5f5f5;
            border-color: #bbb;
            transform: translateY(-1px);
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .pdf-send-filename {
            color: #555;
            font-size: 13px;
            margin-bottom: 12px;
            font-weight: 500;
        }

        .copy-success {
            color: #4caf50 !important;
            border-color: #4caf50 !important;
            background-color: rgba(76, 175, 80, 0.1) !important;
        }

        /* Stamp Styles */
        .stamp-container {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            /* Center vertically */
            pointer-events: none;
            z-index: 5;
            mix-blend-mode: multiply;
            /* Make it transparent/blend */
        }

        .stamp {
            display: flex;
            justify-content: center;
            align-items: center;
            color: #db4d52;
            /* Slightly more realistic vermilion */
            border: 3px solid #db4d52;
            font-family: 'Hiragino Mincho ProN', 'Yu Mincho', serif;
            font-weight: bold;
            opacity: 0.8;
            user-select: none;
            background-color: transparent;

            white-space: pre-wrap;
            /* Preserve whitespace/newlines */
        }

        .stamp.square {
            width: 80px;
            height: 80px;
            border-radius: 4px;
            padding: 2px 4px;
            /* Reduced padding to fit 4 chars */
            writing-mode: vertical-rl;
            text-orientation: upright;
            font-size: 15px;
            /* Slightly smaller base size */
            line-height: 1.2;
            letter-spacing: 1px;
            /* Reduced spacing */
        }

        /* .stamp.square.large-text removed as per user request */

        .stamp.round.large-text {
            font-size: 18px;
            /* Larger font for short text */
            letter-spacing: 1px;
            line-height: 1.2;
        }

        .stamp.round {
            width: 74px;
            height: 74px;
            border-radius: 50%;
            border-width: 3px;
            /* Thicker border for round */
            font-size: 13px;
            writing-mode: horizontal-tb;
            text-align: center;
            padding: 10px;
            word-break: break-all;
            /* Flex center for round */
            flex-direction: column;
            line-height: 1.3;
        }

        /* ========== Download Mode Styles ========== */
        body.download-mode .top-bar,
        body.download-mode .tools-panel,
        body.download-mode .guide-panel,
        body.download-mode .edit-mode-btn,
        /* body.download-mode .download-pdf-btn,  <-- ENABLED */
        body.download-mode .add-item-btn,
        body.download-mode .delete-item-btn {
            display: none !important;
        }

        /* Reposition Download Button in Download Mode */
        body.download-mode .download-pdf-btn {
            right: 30px;
            /* Move to corner */
        }

        body.download-mode .container {
            flex-direction: column;
            align-items: center;
            margin-top: 20px;
            /* Removed top bar space */
        }

        body.download-mode .main-area {
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
            max-width: 900px;
            width: 100%;
            overflow: visible;
            max-height: none;
        }

        body.download-mode .invoice-container {
            border: none;
            box-shadow: none;
            margin: 0 auto;
        }

        /* Read-only tweaks for inputs in download mode */
        body.download-mode .invoice-container input,
        body.download-mode .invoice-container textarea,
        body.download-mode .invoice-container select {
            background-color: transparent;
            pointer-events: none;
            /* Prevent interaction */
            border-bottom: none;
            /* Remove underline to look like text */
        }

        /* Exception for select appearance if needed, but text is better */
        body.download-mode select {
            -webkit-appearance: none;
            appearance: none;
            background-image: none;
        }

        /* Keep borders for tables if desired, or make it look cleaner */
        /* Let's keep table borders for structure */

        /* Promo Section */
        .download-promo-section {
            display: none;
            /* Hidden by default */
            width: 100%;
            max-width: 820px;
            margin: 30px auto;
            padding: 20px;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
        }

        body.download-mode .download-promo-section {
            display: block;
        }

        .promo-content {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 15px;
        }

        .promo-title {
            font-size: 18px;
            font-weight: bold;
            color: #333;
        }

        .promo-desc {
            font-size: 14px;
            color: #666;
        }

        .promo-btn {
            display: inline-block;
            background: #3A47C6;
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            text-decoration: none;
            font-weight: bold;
            transition: all 0.3s ease;
            box-shadow: 0 4px 10px rgba(58, 71, 198, 0.3);
        }

        .promo-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(58, 71, 198, 0.4);
            background: #2d366e;
        }

        @media print {
            .download-promo-section {
                display: none !important;
            }
        }

        .stamp-text-inner {
            display: block;
        }

        /* Billing Summary Section */
        /* プレビュー・印刷時に下線を消す */
        @media print {

            #issueDateDisplay,
            .invoice-no-input {
                border-bottom: none !important;
            }

            .remarks textarea {
                border-bottom: none !important;
                resize: none;
                /* 印刷時はリサイズハンドルも消す */
            }
        }

        .invoice-container.print-mode #issueDateDisplay,
        .invoice-container.print-mode .invoice-no-input {
            border-bottom: none !important;
        }

        .invoice-container.print-mode .remarks textarea {
            border-bottom: none !important;
            resize: none;
        }

        /* 振込先情報のプレビュー・印刷時スタイル */
        @media print {

            /* 矢印消す & 個別の下線は消す（行全体に引くため） */
            .bank-info input,
            .bank-info select,
            .bank-info-line input,
            .bank-info-row input,
            .account-type-select {
                border-bottom: none !important;
                background: transparent !important;
                appearance: none !important;
                -webkit-appearance: none !important;
                background-image: none !important;
                padding-left: 0;
                padding-right: 0;
            }

            /* レイアウト調整: 左詰め & コンパクト化 & 行下線 */
            .bank-info-row,
            .bank-info-line {
                justify-content: flex-start;
                gap: 1em;
                /* 全角スペース1個分 */
                border-bottom: 1px solid #999;
                /* 行全体の下線 */
                padding-bottom: 4px;
                margin-bottom: 8px;
                /* 下線と次の行の間隔 */
                width: 100%;
            }

            .bank-info-label {
                width: auto;
                min-width: auto;
                margin-right: 0;
                /* gapで制御 */
            }

            /* inputの幅を内容に合わせて自動調整っぽく見せるために flex解除 & 幅制限 */
            /* 完全な自動幅はinputでは難しいが、flex-growを止めることで伸びなくする */
            #bankName,
            #branchName,
            #accountName,
            #branchNumber,
            #accountNumber {
                flex: 0 0 auto;
                width: auto;
                max-width: none;
                min-width: 0;
            }

            /* マージンはgapで制御するため削除 */
            #bankName {
                margin-right: 0;
            }

            #branchName {
                margin-right: 0;
            }

            #accountType {
                margin-right: 0;
                width: auto;
            }

            #accountNumber {
                margin-right: 0;
            }
        }

        /* .print-mode クラスにも同様の適用（プレビュー用） */
        .invoice-container.print-mode .bank-info input,
        .invoice-container.print-mode .bank-info select,
        .invoice-container.print-mode .bank-info-line input,
        .invoice-container.print-mode .bank-info-row input,
        .invoice-container.print-mode .account-type-select {
            border-bottom: none !important;
            background: transparent !important;
            appearance: none !important;
            -webkit-appearance: none !important;
            background-image: none !important;
            padding-left: 0;
            padding-right: 0;
            /* 右パディングもなくす */
        }

        .invoice-container.print-mode .bank-info-row,
        .invoice-container.print-mode .bank-info-line {
            justify-content: flex-start;
            gap: 1em;
            /* 全角スペース1個分 */
            border-bottom: 1px solid #999;
            /* 行全体の下線 */
            padding-bottom: 4px;
            margin-bottom: 8px;
            width: 100%;
        }

        .invoice-container.print-mode .bank-info-label {
            width: auto;
            min-width: auto;
            margin-right: 0;
        }

        .invoice-container.print-mode #bankName,
        .invoice-container.print-mode #branchName,
        .invoice-container.print-mode #accountName,
        .invoice-container.print-mode #branchNumber,
        .invoice-container.print-mode #accountNumber {
            flex: 0 0 auto;
            width: auto;
            max-width: none;
            min-width: 0;
        }

        .invoice-container.print-mode #bankName {
            margin-right: 0;
        }

        .invoice-container.print-mode #branchName {
            margin-right: 0;
        }

        .invoice-container.print-mode #accountType {
            margin-right: 0;
            width: auto;
        }

        .invoice-container.print-mode #accountNumber {
            margin-right: 0;
        }

        /* ========== Landing Page Styles ========== */
        .landing-page {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding: 40px 20px;
            background: linear-gradient(180deg, #f8f9fa 0%, #e9ecef 100%);
        }

        .landing-brand {
            display: flex;
            align-items: center;
            gap: 12px;
            margin-bottom: 50px;
        }

        .landing-brand img {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        .landing-brand span {
            font-size: 22px;
            font-weight: 700;
            color: #3A47C6;
        }

        .landing-header {
            text-align: center;
            margin-bottom: 50px;
        }

        .landing-header h1 {
            font-size: 28px;
            font-weight: 700;
            color: #333;
            margin-bottom: 12px;
            line-height: 1.4;
        }

        .landing-header p {
            font-size: 15px;
            color: #666;
        }

        .billing-type-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
            max-width: 800px;
            width: 100%;
        }

        @media (max-width: 768px) {
            .billing-type-grid {
                grid-template-columns: 1fr;
            }

            .landing-header h1 {
                font-size: 22px;
            }
        }

        .billing-type-card {
            background: white;
            border-radius: 16px;
            padding: 28px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 2px solid transparent;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        .billing-type-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 8px 30px rgba(58, 71, 198, 0.15);
            border-color: #3A47C6;
        }

        .billing-type-card:active {
            transform: translateY(-2px);
        }

        .billing-type-card .card-icon {
            font-size: 40px;
            margin-bottom: 16px;
        }

        .billing-type-card .card-title {
            font-size: 18px;
            font-weight: 700;
            color: #333;
            margin-bottom: 10px;
        }

        .billing-type-card .card-description {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
            margin-bottom: 16px;
        }

        .billing-type-card .card-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
        }

        .billing-type-card .card-tag {
            background: #f0f2f5;
            color: #555;
            font-size: 11px;
            padding: 4px 10px;
            border-radius: 12px;
        }

        .landing-skip {
            margin-top: 40px;
            text-align: center;
        }

        .landing-skip a {
            color: #888;
            font-size: 13px;
            text-decoration: none;
            transition: color 0.2s;
        }

        .landing-skip a:hover {
            color: #3A47C6;
            text-decoration: underline;
        }

        /* ========== Two-Step Selection Styles ========== */
        .landing-step {
            display: none;
            width: 100%;
            max-width: 800px;
            animation: fadeIn 0.3s ease;
        }

        .landing-step.active {
            display: block;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .step-indicator {
            display: flex;
            justify-content: center;
            gap: 8px;
            margin-bottom: 30px;
        }

        .step-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #ddd;
            transition: all 0.3s;
        }

        .step-dot.active {
            background: #3A47C6;
            transform: scale(1.2);
        }

        .step-dot.completed {
            background: #3A47C6;
        }

        .user-type-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 24px;
            width: 100%;
        }

        @media (max-width: 600px) {
            .user-type-grid {
                grid-template-columns: 1fr;
            }
        }

        .user-type-card {
            background: white;
            border-radius: 20px;
            padding: 40px 32px;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            border: 2px solid transparent;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            text-align: center;
        }

        .user-type-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 40px rgba(58, 71, 198, 0.18);
            border-color: #3A47C6;
        }

        .user-type-card:active {
            transform: translateY(-3px);
        }

        .user-type-card .card-icon {
            font-size: 56px;
            margin-bottom: 20px;
        }

        .user-type-card .card-title {
            font-size: 20px;
            font-weight: 700;
            color: #333;
            margin-bottom: 12px;
        }

        .user-type-card .card-description {
            font-size: 13px;
            color: #666;
            line-height: 1.6;
        }

        .back-button {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            background: none;
            border: none;
            color: #666;
            font-size: 14px;
            cursor: pointer;
            padding: 8px 16px;
            border-radius: 8px;
            transition: all 0.2s;
            margin-bottom: 20px;
        }

        .back-button:hover {
            background: #f0f2f5;
            color: #333;
        }

        .back-button::before {
            content: '←';
        }

        /* ========== Mobile/Tablet Responsive Styles ========== */

        /* Visibility Toggles */
        .mobile-only {
            display: none;
        }

        @media (max-width: 1200px) {
            .desktop-only {
                display: none !important;
            }

            .mobile-only {
                display: block !important;
            }

            /* Reset body overflow for mobile form scrolling */
            body {
                overflow: auto;
                /* Allow body scroll */
                background-color: #f5f7fa;
            }

            .mobile-app-container {
                display: block;
                /* Normal flow */
                min-height: 100vh;
                background-color: #f5f7fa;
                padding-bottom: 80px;
                /* Space for fixed button */
            }

            /* Wizard Content Area: Just padding now */
            .mobile-wizard-content {
                padding: 15px;
            }

            /* Guide Banner (Top) - KEEP for specific step usage or general info */
            .mobile-guide-banner {
                background: #e8eaf6;
                /* Light Indigo */
                border-left: 4px solid #3A47C6;
                padding: 12px 15px;
                display: flex;
                gap: 12px;
                align-items: flex-start;
                margin: 0;
            }

            .guide-icon {
                font-size: 18px;
            }

            .guide-text {
                font-size: 12px;
                color: #333;
                line-height: 1.5;
            }

            /* Embedded Guide Info (Per Section) */
            .mobile-guide-info {
                background-color: #e8eaf6;
                border-left: 3px solid #3A47C6;
                padding: 10px 12px;
                margin-bottom: 20px;
                border-radius: 4px;
                font-size: 12px;
                color: #333;
                line-height: 1.5;
            }

            .mobile-guide-info ul {
                margin: 5px 0 0 0;
                padding-left: 20px;
            }

            .mobile-guide-info li {
                margin-bottom: 4px;
            }

            .mobile-guide-info strong {
                color: #3A47C6;
            }

            /* Step Sections: Always visible */
            .mobile-section {
                display: block;
                margin-bottom: 20px;
            }

            /* Navigation Buttons (Footer) */
            .mobile-nav-buttons {
                position: fixed;
                bottom: 0;
                left: 0;
                width: 100%;
                background: white;
                padding: 12px 15px;
                box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
                display: flex;
                gap: 12px;
                z-index: 20;
            }

            .mobile-nav-btn {
                height: 44px;
                border-radius: 22px;
                font-weight: bold;
                font-size: 14px;
                border: none;
                cursor: pointer;
                transition: background 0.2s;
            }

            .prev-btn {
                background: #f0f0f0;
                color: #666;
                flex: 0 0 80px;
            }

            .prev-btn:disabled {
                opacity: 0.5;
                cursor: not-allowed;
            }

            .next-btn {
                background: #333;
                color: white;
                flex: 1;
            }

            .mobile-preview-btn-nav {
                flex: 1;
                height: 48px;
                border-radius: 24px;
                font-weight: 700;
                font-size: 15px;

                background: linear-gradient(180deg, #FFB74D 0%, #FF9800 100%);
                border: none;
                color: white;
                text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);

                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
                cursor: pointer;
                transition: transform 0.2s ease, box-shadow 0.2s ease;
            }

            .mobile-preview-btn-nav:active {
                transform: scale(0.98);
                background: linear-gradient(180deg, #FF9800 0%, #FFB74D 100%);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            }

            /* Adjust existing styles */
            .mobile-card {
                background: white;
                border-radius: 12px;
                padding: 15px;
                box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
                margin-bottom: 15px;
            }

            .input-group {
                margin-bottom: 15px;
            }

            /* Hide old fixed preview button since we use nav now */
            .mobile-bottom-actions {
                display: none;
            }
        }

        /* Tablet Portrait / Large Phone (900px以下) */
        @media (max-width: 900px) {

            /* トップバー最適化 */
            .top-bar {
                padding: 0 12px;
                height: 50px;
            }

            .top-bar-left {
                gap: 8px;
            }

            .brand-name {
                font-size: 14px;
            }

            .brand-icon {
                width: 28px;
                height: 28px;
            }

            .top-bar-divider {
                display: none;
            }

            #newCreateBtn {
                display: none;
            }

            .document-toggle button {
                padding: 6px 12px;
                font-size: 12px;
            }

            .action-btn {
                padding: 6px 12px;
                font-size: 12px;
            }

            /* コンテナレイアウト */
            .container {
                flex-direction: column;
                height: auto;
                padding: 10px;
                gap: 15px;
            }

            /* メインエリア */
            .main-area {
                padding: 15px;
                height: auto;
                overflow: visible;
            }

            /* 請求書コンテナのスケーリング */
            .invoice-wrapper {
                overflow-x: auto;
                -webkit-overflow-scrolling: touch;
            }

            .invoice-container {
                transform: scale(0.65);
                transform-origin: top left;
                margin-bottom: -300px;
                /* スケール後の余白調整 */
            }

            /* ツールパネル */
            .tools-panel {
                width: 100%;
                order: 2;
                max-height: none;
                height: auto;
            }

            /* ガイドパネル */
            .guide-panel {
                width: 100%;
                order: 3;
                max-height: none;
                height: auto;
            }
        }

        /* Phone (600px以下) */
        @media (max-width: 600px) {
            .top-bar {
                padding: 0 10px;
                height: 48px;
            }

            .brand-name {
                display: none;
            }

            .document-toggle {
                padding: 3px;
            }

            .document-toggle button {
                padding: 5px 10px;
                font-size: 11px;
            }

            .action-btn {
                padding: 5px 10px;
                font-size: 11px;
            }

            #generateUrlBtnHeader {
                display: none;
            }

            /* 請求書をさらに縮小 */
            .invoice-container {
                transform: scale(0.45);
                margin-bottom: -450px;
            }

            .main-area {
                padding: 10px;
            }

            .tools-panel {
                padding: 15px;
            }

            .tools-panel .section-title {
                font-size: 13px;
            }

            .tools-panel .control-label {
                font-size: 11px;
            }

            .top-bar-actions {
                display: none !important;
            }
        }

        /* Very Small Phone (400px以下) */
        @media (max-width: 400px) {
            .invoice-container {
                transform: scale(0.38);
                margin-bottom: -520px;
            }

            .top-bar-actions {
                display: none !important;
            }
        }

        /* Mobile Form UI Styles */
        .mobile-app-container {
            padding: 20px 16px;
            background: #f5f5f5;
            min-height: 100vh;
            padding-bottom: 100px;
        }

        .mobile-section {
            margin-bottom: 32px;
        }

        .mobile-section-header h2 {
            font-size: 18px;
            font-weight: 700;
            color: #333;
            margin-bottom: 12px;
            padding-left: 4px;
        }

        .mobile-card {
            background: white;
            padding: 20px;
            border-radius: 16px;
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        }

        /* Inputs */
        .input-group {
            margin-bottom: 24px;
        }

        .input-group:last-child {
            margin-bottom: 0;
        }

        .input-group label {
            display: block;
            font-size: 13px;
            font-weight: 700;
            color: #444;
            margin-bottom: 8px;
        }

        .mobile-input,
        .mobile-select,
        .mobile-textarea {
            width: 100%;
            padding: 12px 14px;
            font-size: 16px;
            /* Prevent zoom on iOS */
            border: 1px solid #ddd;
            border-radius: 10px;
            background: #fcfcfc;
            appearance: none;
            -webkit-appearance: none;
            transition: all 0.2s;
            color: #333;
            font-family: inherit;
        }

        .mobile-input:focus,
        .mobile-select:focus,
        .mobile-textarea:focus {
            background: white;
            border-color: #3A47C6;
            outline: none;
            box-shadow: 0 0 0 3px rgba(58, 71, 198, 0.1);
        }

        .select-wrapper {
            position: relative;
        }

        .select-wrapper::after {
            content: '▼';
            font-size: 10px;
            color: #888;
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            pointer-events: none;
        }

        .input-help {
            font-size: 11px;
            color: #888;
            margin-top: 6px;
            line-height: 1.4;
        }

        /* Mobile Color Buttons */
        .mobile-color-btn {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 2px solid white;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
            flex-shrink: 0;
        }

        /* Preview Button */
        .mobile-bottom-actions {
            position: fixed;
            bottom: 24px;
            left: 20px;
            right: 20px;
            z-index: 900;
        }

        .mobile-preview-btn {
            width: 100%;
            padding: 16px;
            background: linear-gradient(135deg, #3A47C6 0%, #2d366e 100%);
            color: white;
            font-weight: bold;
            font-size: 16px;
            border: none;
            border-radius: 50px;
            box-shadow: 0 4px 20px rgba(58, 71, 198, 0.3);
            cursor: pointer;
            transition: transform 0.1s;
        }

        .mobile-preview-btn:active {
            transform: scale(0.98);
        }

        /* Item Card Styles */
        .mobile-item-card {
            background: #fcfcfc;
            border: 1px solid #eee;
            border-radius: 10px;
            padding: 15px;
            margin-bottom: 15px;
            position: relative;
        }

        .mobile-item-delete {
            position: absolute;
            top: 10px;
            right: 10px;
            background: #ffecb3;
            color: #f57f17;
            border: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            font-size: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        .mobile-add-btn {
            width: 100%;
            padding: 12px;
            background: white;
            border: 1px dashed #3A47C6;
            color: #3A47C6;
            border-radius: 10px;
            font-weight: bold;
            font-size: 14px;
            margin-bottom: 15px;
            cursor: pointer;
        }

        .mobile-total-row {
            display: flex;
            justify-content: space-between;
            font-size: 13px;
            color: #555;
            padding: 8px 0;
            border-bottom: 1px solid #eee;
        }

        .mobile-total-row.grand-total {
            font-size: 16px;
            font-weight: bold;
            color: #333;
            border-bottom: none;
            margin-top: 5px;
            padding-top: 12px;
            border-top: 2px solid #333;
        }

        .radio-label {
            display: flex;
            align-items: center;
            gap: 6px;
            font-size: 14px;
            color: #333;
        }

        .checkbox-label {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
            font-weight: normal !important;
            cursor: pointer;
        }

        /* Preview Iframe */
        .preview-iframe {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100vh;
            border: none;
            z-index: 9999;
            background: #fff;
        }

        /* Edit/Download Buttons in Preview Mode */
        .edit-mode-btn {
            position: fixed;
            bottom: 20px;
            right: 220px;
            z-index: 10000;
            background: #fff;
            border: 1px solid #ddd;
            color: #333;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .edit-mode-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(88, 101, 224, 0.3);
            background: #f0f2ff;
            border-color: #5865E0;
        }

        .download-pdf-btn {
            position: fixed;
            bottom: 20px;
            right: 20px;
            z-index: 10000;
            background: #3A47C6;
            color: white;
            padding: 12px 24px;
            border-radius: 50px;
            font-weight: bold;
            box-shadow: 0 4px 12px rgba(58, 71, 198, 0.4);
            cursor: pointer;
            border: none;
            transition: all 0.2s ease;
        }

        .download-pdf-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 16px rgba(58, 71, 198, 0.5);
            background: #2d366e;
        }

        /* Footer Area in Edit Mode */
        #appFooter {
            width: 100%;
            background: transparent;
            padding-bottom: 20px;
        }

        #appFooter .pdf-send-footer {
            margin-top: 0 !important;
        }

        /* Mobile Color Selection Row */
        .color-selection-row {
            display: flex;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 12px;
        }

        /* ========== Preview Mode Active (Mobile Fix) ========== */
        /* Force show desktop container on mobile when in preview mode for HTML check */
        body.preview-active .mobile-only {
            display: none !important;
        }

        body.preview-active .desktop-only {
            display: block !important;
        }

        body.preview-active .container.desktop-only {
            display: flex !important;
            width: 100%;
            max-width: 100%;
            margin: 0;
            padding: 10px;
            box-sizing: border-box;
            align-items: center;
            /* Ensure it centers */
        }

        body.preview-active .main-area {
            width: 100%;
            max-width: 900px;
            height: auto;
            overflow: visible;
            box-shadow: none;
            /* Clean look */
            padding: 0;
            margin: 0 auto;
        }

        body.preview-active .invoice-wrapper {
            overflow: visible;
            /* Allow scaling without scrollbars clipping weirdly if possible */
            display: flex;
            justify-content: center;
            width: 100%;
        }

        /* Specific scale adjustments for mobile preview */
        @media (max-width: 600px) {
            body.preview-active .invoice-container {
                /* Use a slightly larger scale than the tiny 0.45, or keep it readable */
                transform: scale(0.48);
                transform-origin: top center;
                margin-bottom: -550px;
                /* Adjust for scale gap */
            }

            /* Fix button overlap on mobile */
            body.preview-active .edit-mode-btn {
                right: auto;
                left: 20px;
                bottom: 20px;
                padding: 10px 20px;
                font-size: 14px;
                width: auto;
            }

            body.preview-active .download-pdf-btn {
                right: 20px;
                bottom: 20px;
                padding: 10px 20px;
                font-size: 14px;
                width: auto;
            }
        }

        /* Print Mode & Preview Compatibility */
        .print-mode .add-item-btn,
        .print-mode .delete-item-btn,
        .print-mode [data-html2canvas-ignore="true"] {
            display: none !important;
        }

        /* Mobile Preview Action Bar (Fixed Bottom) */
        .mobile-preview-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background: white;
            padding: 12px 16px 24px 16px;
            /* Extra bottom padding for safe area */
            box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
            display: flex;
            gap: 12px;
            z-index: 200;
            align-items: center;
        }

        .mobile-action-btn {
            height: 48px;
            border-radius: 24px;
            font-weight: bold;
            font-size: 14px;
            border: none;
            cursor: pointer;
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: transform 0.1s;
        }

        .mobile-action-btn:active {
            transform: scale(0.98);
        }

        .mobile-action-btn.primary {
            background: linear-gradient(135deg, #FFB74D 0%, #FF9800 100%);
            color: white;
            box-shadow: 0 4px 10px rgba(255, 152, 0, 0.3);
        }

        .mobile-action-btn.secondary {
            background: #f5f5f5;
            color: #666;
            border: 1px solid #ddd;
            flex: 0 0 100px;
            /* Smaller width for back button */
        }