/* ==========================================================================
   data upload/import/export pages shared styles
   ========================================================================== */

.data-page {
    --bear-green: #27ae60;
    --bear-green-soft: #ecfdf5;
    --bear-green-dark: #065f46;
    --bear-blue: #2196F3;
    --bear-blue-soft: #eff6ff;
    --bear-orange: #f59e0b;
    --bear-orange-dark: #92400e;
    --bear-red: #ef4444;
    --bear-red-soft: #fef2f2;
    --bear-yellow-soft: #fffbeb;
    --bg-body: #f4f7fa;
    --text-title: #1d1d1f;
    --text-main: #48484a;
    --text-sub: #86868b;
    --code-bg: #1e293b;
    --card-shadow: 0 10px 40px rgba(0,0,0,0.06);
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: var(--bg-body);
    color: var(--text-main);
    line-height: 1.6;
    padding: 30px 16px 60px;
    min-height: calc(100vh - 120px);
}

.data-page .container { max-width: 1300px; margin: 0 auto; padding: 0 20px; box-sizing: border-box; width: 100%; }

/* --- page header --- */
.data-page .page-header { margin-bottom: 32px; text-align: center; }
.data-page .page-header .app-icon {
    width: 56px; height: 56px; border-radius: 14px;
    overflow: hidden; display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 28px; color: #fff; margin-bottom: 12px;
    box-shadow: 0 6px 16px rgba(0,0,0,0.15);
}
.data-page .page-header .app-icon img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.data-page .page-header h1 {
    font-size: 28px; font-weight: 800; color: var(--text-title);
    letter-spacing: -0.5px; margin: 0 0 8px 0;
}
.data-page .page-header p { font-size: 14px; color: var(--text-sub); margin: 0; }

/* --- step card (upload form) --- */
.data-page .step-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}
.data-page .step-label {
    display: inline-flex; align-items: center; gap: 6px;
    background: linear-gradient(135deg, var(--bear-green), #2ecc71);
    color: #fff;
    padding: 5px 14px; border-radius: 8px;
    font-size: 12px; font-weight: 700; margin-bottom: 18px;
    letter-spacing: 0.5px;
}
.data-page .step-title {
    font-size: 19px; font-weight: 700; color: var(--text-title);
    margin: 0 0 18px 0;
}

/* --- guide list --- */
.data-page .guide-list { list-style: none; margin: 0; padding: 0; }
.data-page .guide-list li {
    position: relative; padding-left: 28px; margin-bottom: 12px;
    font-size: 14px; color: var(--text-main); line-height: 1.7;
}
.data-page .guide-list li::before {
    content: ""; position: absolute; left: 0; top: 6px;
    width: 18px; height: 18px; border-radius: 50%;
    background: var(--bear-green-soft);
}
.data-page .guide-list li::after {
    content: "✓"; position: absolute; left: 4px; top: 6px;
    color: var(--bear-green); font-weight: bold; font-size: 12px;
    width: 18px; text-align: center; line-height: 18px;
}
.data-page .guide-list b { color: var(--bear-blue); font-weight: 600; }

/* numbered variant (for result/step pages) */
.data-page .guide-list.numbered { counter-reset: step; margin-bottom: 0; }
.data-page .guide-list.numbered li {
    padding: 10px 0 10px 42px; margin-bottom: 0;
    line-height: 1.8; border-bottom: 1px solid #f5f5f5;
}
.data-page .guide-list.numbered li:last-child { border-bottom: none; }
.data-page .guide-list.numbered li::before {
    counter-increment: step; content: counter(step);
    width: 28px; height: 28px; top: 12px;
    color: var(--bear-green); font-weight: 700; font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.data-page .guide-list.numbered li::after { display: none; }
.data-page .guide-list.numbered b { color: var(--text-title); font-weight: 700; }

/* --- form elements --- */
.data-page .form-group { margin-bottom: 24px; }
.data-page .form-label {
    display: flex; align-items: center; gap: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--text-title); margin-bottom: 10px;
}
.data-page .form-hint {
    font-size: 12px; color: var(--text-sub); margin-top: 6px;
}
.data-page .input-main {
    width: 100%; padding: 13px 16px; border-radius: 12px;
    border: 1.5px solid #e5e7eb; font-size: 15px;
    transition: var(--transition); outline: none; background: #fafbfc;
    font-family: inherit; color: var(--text-main);
    box-sizing: border-box;
}
.data-page .input-main:focus {
    border-color: var(--bear-green); background: #fff;
    box-shadow: 0 0 0 4px rgba(39, 174, 96, 0.1);
}

/* --- vehicle grid --- */
.data-page .vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
}
.data-page .vehicle-item {
    position: relative; background: #f8fafc; border: 1.5px solid #e5e7eb;
    padding: 14px 10px; border-radius: 12px; text-align: center;
    cursor: pointer; transition: var(--transition); user-select: none;
}
.data-page .vehicle-item input { position: absolute; opacity: 0; pointer-events: none; }
.data-page .vehicle-item span {
    font-size: 13px; font-weight: 600; color: var(--text-main);
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.data-page .vehicle-item:hover {
    border-color: var(--bear-green); background: var(--bear-green-soft);
}
.data-page .vehicle-item.active {
    border-color: var(--bear-green); background: var(--bear-green-soft);
    border-width: 2px;
    box-shadow: 0 4px 14px rgba(39, 174, 96, 0.15);
}
.data-page .vehicle-item.active span { color: var(--bear-green); }

/* --- upload zone --- */
.data-page .upload-zone {
    border: 2px dashed #d1d5db; background: #fafbfc; border-radius: 16px;
    padding: 36px 20px; text-align: center; cursor: pointer; transition: var(--transition);
}
.data-page .upload-zone:hover {
    background: var(--bear-green-soft); border-color: var(--bear-green);
}
.data-page .upload-zone.dragover,
.data-page .upload-zone.has-file {
    background: var(--bear-green-soft); border-color: var(--bear-green);
    border-style: solid;
}
.data-page .upload-icon {
    font-size: 40px; margin-bottom: 12px; display: block;
}
.data-page .upload-hint p {
    margin: 0; font-size: 14px; color: var(--text-main);
}
.data-page .upload-hint b { color: var(--bear-green); font-weight: 600; }
.data-page .upload-subhint {
    font-size: 12px; color: var(--text-sub); margin-top: 6px;
}
.data-page .upload-hint-row {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 8px;
}

/* --- badges --- */
.data-page .badge-required {
    background: var(--bear-red-soft); color: var(--bear-red);
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 6px; letter-spacing: 0.5px;
}
.data-page .badge-optional {
    background: #f1f5f9; color: var(--text-sub);
    font-size: 11px; font-weight: 700; padding: 2px 8px;
    border-radius: 6px; letter-spacing: 0.5px;
}

/* --- buttons --- */
.data-page .btn-submit {
    width: 100%; height: 52px; background: linear-gradient(135deg, var(--bear-green), #2ecc71);
    color: #fff; border: none; border-radius: 14px; font-size: 16px; font-weight: 700;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.25);
    cursor: pointer; transition: var(--transition); font-family: inherit;
    letter-spacing: 0.5px;
}
.data-page .btn-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(39, 174, 96, 0.35);
}
.data-page .btn-submit:active { transform: translateY(0); }
.data-page .btn-submit:disabled {
    opacity: 0.7; cursor: not-allowed; transform: none;
}

.data-page .btn-primary {
    display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 28px;
    background: linear-gradient(135deg, var(--bear-green), #2ecc71);
    color: #fff; border: none; border-radius: 14px;
    font-size: 15px; font-weight: 700;
    box-shadow: 0 8px 20px rgba(39, 174, 96, 0.25);
    cursor: pointer; transition: var(--transition);
    text-decoration: none; font-family: inherit;
}
.data-page .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(39, 174, 96, 0.35);
    color: #fff; text-decoration: none;
}

.data-page .btn-outline {
    display: inline-flex; align-items: center; gap: 8px;
    height: 48px; padding: 0 28px;
    background: #fff; color: var(--bear-green);
    border: 2px solid var(--bear-green); border-radius: 14px;
    font-size: 15px; font-weight: 700;
    cursor: pointer; transition: var(--transition);
    text-decoration: none; font-family: inherit;
}
.data-page .btn-outline:hover {
    background: var(--bear-green-soft); color: var(--bear-green);
    text-decoration: none; transform: translateY(-2px);
}

.data-page .btn-download {
    display: inline-flex; align-items: center; gap: 8px;
    height: 42px; padding: 0 22px;
    background: linear-gradient(135deg, var(--bear-green), #2ecc71);
    color: #fff; border: none; border-radius: 12px;
    font-size: 14px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(39, 174, 96, 0.22);
    cursor: pointer; transition: var(--transition);
    text-decoration: none; font-family: inherit;
}
.data-page .btn-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(39, 174, 96, 0.32);
    color: #fff; text-decoration: none;
}
.data-page .btn-download.disabled {
    background: #d1d5db; box-shadow: none; cursor: not-allowed;
    pointer-events: none; opacity: 0.7;
}

.data-page .action-row {
    text-align: center; margin-top: 8px; margin-bottom: 8px;
}

/* --- result card --- */
.data-page .result-card {
    background: #ffffff;
    border-radius: 20px;
    padding: 36px 32px;
    margin-bottom: 24px;
    box-shadow: var(--card-shadow);
    border: 1px solid rgba(0,0,0,0.04);
    text-align: center;
}
.data-page .result-icon {
    width: 80px; height: 80px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 40px; margin-bottom: 18px;
}
.data-page .result-icon.success {
    background: var(--bear-green-soft); color: var(--bear-green);
}
.data-page .result-icon.error {
    background: var(--bear-red-soft); color: var(--bear-red);
}
.data-page .result-title {
    font-size: 24px; font-weight: 800; color: var(--text-title);
    margin: 0 0 10px 0;
}
.data-page .result-title.error { color: var(--bear-red); }
.data-page .result-desc {
    font-size: 15px; color: var(--text-sub); margin: 0 0 20px 0;
}
.data-page .stats-row {
    display: flex; justify-content: center; gap: 32px;
    margin: 24px 0 8px; flex-wrap: wrap;
}
.data-page .stat-item { text-align: center; }
.data-page .stat-value {
    font-size: 36px; font-weight: 800; color: var(--bear-green);
    line-height: 1.2;
}
.data-page .stat-label {
    font-size: 13px; color: var(--text-sub); margin-top: 4px;
}

/* --- car info box (on result card) --- */
.data-page .car-info-box {
    background: var(--bear-green-soft); border-radius: 12px;
    padding: 14px 18px; margin: 16px auto 0; max-width: 420px;
    font-size: 14px; color: var(--bear-green-dark);
    display: inline-flex; flex-wrap: wrap; gap: 6px 20px; justify-content: center;
}
.data-page .car-info-box .field-label { color: var(--text-sub); font-size: 13px; margin-right: 4px; }
.data-page .car-info-box .field-value { font-weight: 700; color: var(--text-title); }
.data-page .new-car-tag {
    background: var(--bear-green); color: #fff; font-size: 11px;
    font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 6px;
}
.data-page .merge-car-tag {
    background: var(--bear-blue); color: #fff; font-size: 11px;
    font-weight: 700; padding: 2px 8px; border-radius: 4px; margin-left: 6px;
}

/* --- account box (inside guide list) --- */
.data-page .account-box {
    background: var(--bear-green-soft);
    border-radius: 12px;
    padding: 14px 18px;
    margin: 10px 0;
    font-size: 14px; color: var(--bear-green-dark);
    display: flex; flex-wrap: wrap; gap: 8px 24px;
}
.data-page .account-box .field-label {
    color: var(--text-sub); font-size: 13px; margin-right: 6px;
}
.data-page .account-box .field-value {
    font-weight: 700; color: var(--text-title);
}

/* --- warn card (txcx skipped rows) --- */
.data-page .warn-card {
    background: var(--bear-yellow-soft);
    border-radius: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    border: 1px solid #fde68a;
}
.data-page .warn-card .warn-title {
    font-size: 15px; font-weight: 700; color: var(--bear-orange-dark);
    margin: 0 0 10px 0;
    display: flex; align-items: center; gap: 6px;
}
.data-page .warn-card ul {
    margin: 0; padding-left: 20px; font-size: 13px;
    color: #78350f; line-height: 1.8;
}

/* note box (txcx example note) */
.data-page .note-box {
    background: var(--bear-blue-soft); border-left: 3px solid var(--bear-blue);
    border-radius: 0 8px 8px 0; padding: 12px 16px; margin-top: 12px;
    font-size: 13px; color: #1e40af; line-height: 1.6;
}

/* --- data section / data card (preview) --- */
.data-page .data-section {
    background: #ffffff; border-radius: 20px; padding: 28px 32px;
    margin-bottom: 20px; box-shadow: var(--card-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}
.data-page .section-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 16px; flex-wrap: wrap; gap: 8px;
}
.data-page .section-title {
    font-size: 16px; font-weight: 700; color: var(--text-title);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.data-page .section-title .icon {
    width: 32px; height: 32px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 16px;
}
.data-page .section-title .icon.fuel { background: #fef3c7; color: #d97706; }
.data-page .section-title .icon.exp { background: #dbeafe; color: #2563eb; }
.data-page .data-block-title .icon.fuel { background: #fef3c7; color: #d97706; }
.data-page .data-block-title .icon.exp { background: #dbeafe; color: #2563eb; }
.data-page .count-badge {
    background: var(--bear-green-soft); color: var(--bear-green);
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
}
.data-page .count-tag {
    font-size: 12px; color: var(--text-sub); background: #fff;
    padding: 2px 10px; border-radius: 6px; border: 1px solid #e5e7eb;
}
.data-page .count-tag b { color: var(--bear-green); font-weight: 700; }

.data-page .preview-hint {
    font-size: 12px; color: var(--text-sub); margin-top: 10px; text-align: center;
}

/* --- car card (export/result) --- */
.data-page .car-card {
    background: #ffffff; border-radius: 20px; padding: 28px 32px;
    margin-bottom: 20px; box-shadow: var(--card-shadow);
    border: 1px solid rgba(0,0,0,0.04);
}
.data-page .car-title {
    font-size: 17px; font-weight: 700; color: var(--text-title);
    margin: 0 0 16px 0;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.data-page .car-title .car-emoji {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--bear-green-soft); display: inline-flex;
    align-items: center; justify-content: center; font-size: 18px;
    flex-shrink: 0;
}
.data-page .car-title .car-badge {
    background: var(--bear-green-soft); color: var(--bear-green);
    font-size: 12px; font-weight: 700; padding: 3px 10px; border-radius: 6px;
}

/* --- data table (shared by example + preview) --- */
.data-page .table-wrap {
    width: 100%; overflow-x: auto;
    border-radius: 12px; border: 1px solid #f0f0f0;
}
.data-page .data-table,
.data-page .example-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.data-page .example-table { min-width: 680px; margin: 8px 0 14px; font-size: 12px; }
.data-page .data-table { min-width: 640px; }
.data-page .data-table th,
.data-page .example-table th {
    background: #f8fafc; color: var(--text-sub);
    padding: 11px 12px; text-align: left; font-weight: 600;
    white-space: nowrap; border-bottom: 2px solid #e5e7eb;
    font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px;
}
.data-page .example-table th {
    text-transform: none; letter-spacing: 0; font-size: 12px;
    border-bottom: 1px solid #eee; padding: 10px 12px;
}
.data-page .data-table td,
.data-page .example-table td {
    padding: 10px 12px; border-bottom: 1px solid #f5f5f5;
    color: var(--text-main); white-space: nowrap;
}
.data-page .example-table td { padding: 10px 12px; }
.data-page .data-table tbody tr:hover,
.data-page .example-table tbody tr:hover { background: #fafbfc; }
.data-page .data-table tbody tr:last-child td,
.data-page .example-table tbody tr:last-child td { border-bottom: none; }
.data-page .example-table tr:last-child td {
    text-align: center; color: var(--text-sub); font-style: italic;
}
.data-page .yes-tag {
    display: inline-block; background: var(--bear-green-soft); color: var(--bear-green);
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
}
.data-page .no-tag {
    display: inline-block; background: #f1f5f9; color: var(--text-sub);
    font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 4px;
}

/* --- CSV-upload specific --- */
.data-page .example-label {
    font-size: 13px; color: var(--text-sub); font-weight: 600;
    margin: 20px 0 10px 0;
}
.data-page .section-subtitle {
    font-size: 16px; font-weight: 700; color: var(--text-title);
    margin: 28px 0 14px 0; padding-left: 12px;
    border-left: 3px solid var(--bear-green);
}
.data-page .section-subtitle:first-of-type { margin-top: 8px; }
.data-page .format-box {
    background: var(--code-bg); color: #e2e8f0;
    border-radius: 10px; padding: 14px 18px;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 13px; line-height: 1.7;
    overflow-x: auto; margin: 10px 0 14px;
    word-break: break-all; white-space: pre-wrap;
}
.data-page .field-list { list-style: none; margin: 0 0 14px 0; padding: 0; }
.data-page .field-list li {
    position: relative; padding: 8px 0 8px 20px;
    font-size: 13px; color: var(--text-main); line-height: 1.7;
    border-bottom: 1px dashed #f0f0f0;
}
.data-page .field-list li:last-child { border-bottom: none; }
.data-page .field-list li::before {
    content: "•"; position: absolute; left: 4px; top: 8px;
    color: var(--bear-green); font-weight: bold; font-size: 16px;
}
.data-page .field-list b { color: var(--bear-blue); font-weight: 600; }
.data-page .code-example {
    background: #f8fafc; border: 1px solid #e2e8f0;
    border-radius: 10px; padding: 14px 18px;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px; line-height: 1.8;
    overflow-x: auto; margin: 10px 0 12px;
    color: #334155; white-space: pre;
}
.data-page .note-text {
    font-size: 13px; color: var(--text-sub);
    margin: 8px 0; font-style: italic;
}
.data-page .note-text b { color: var(--bear-red); font-style: normal; }
.data-page .sample-link {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--bear-blue); font-size: 13px; font-weight: 600;
    text-decoration: none; padding: 6px 14px;
    background: var(--bear-blue-soft); border-radius: 8px;
    transition: var(--transition); margin: 4px 0;
}
.data-page .sample-link:hover {
    background: var(--bear-blue); color: #fff; text-decoration: none;
}
.data-page .warn-box {
    background: var(--bear-yellow-soft); border-left: 3px solid var(--bear-orange);
    border-radius: 0 8px 8px 0; padding: 12px 16px; margin: 12px 0;
    font-size: 13px; color: var(--bear-orange-dark); line-height: 1.6;
}

/* --- export page --- */
.data-page .data-block {
    background: #f8fafc; border-radius: 14px; padding: 18px 20px;
    margin-bottom: 0; border: 1px solid #eef2f7;
    display: flex; flex-direction: column;
}
.data-page .export-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 16px;
}
.data-page .data-block-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 12px; flex-wrap: wrap; gap: 8px;
}
.data-page .data-block-title {
    font-size: 14px; font-weight: 700; color: var(--text-title);
    display: flex; align-items: center; gap: 8px; margin: 0;
}
.data-page .data-block-title .icon {
    width: 28px; height: 28px; border-radius: 7px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 14px;
}
.data-page .format-line {
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px; color: var(--text-sub); background: #fff;
    padding: 8px 12px; border-radius: 8px; border: 1px solid #e5e7eb;
    margin-bottom: 10px; overflow-x: auto; white-space: pre;
    word-break: break-all;
}
.data-page .csv-preview {
    width: 100%; box-sizing: border-box;
    background: var(--code-bg); color: #94a3b8;
    border: none; border-radius: 10px; padding: 14px 16px;
    font-family: "SF Mono", "Menlo", "Consolas", monospace;
    font-size: 12px; line-height: 1.7; resize: vertical;
    min-height: 80px; max-height: 260px;
    overflow-x: auto; white-space: pre; margin-bottom: 12px;
    flex: 1;
}
.data-page .data-block .btn-download {
    width: 100%; justify-content: center;
    margin-top: auto;
}
.data-page .no-data-tip {
    text-align: center; padding: 24px 20px;
    color: var(--text-sub); font-size: 13px;
    flex: 1; display: flex; align-items: center; justify-content: center;
}

/* --- support banner (upload pages) --- */
.data-page .support-banner {
    border-radius: 16px; padding: 20px 24px;
    display: flex; align-items: center; gap: 16px; margin-top: 8px;
}
.data-page .support-banner.yellow {
    background: linear-gradient(135deg, var(--bear-yellow-soft) 0%, #fff 100%);
    border: 1px solid #fde68a;
}
.data-page .support-banner.green {
    background: linear-gradient(135deg, var(--bear-green-soft) 0%, #fff 100%);
    border: 1px solid #a7f3d0;
    text-align: center;
}
.data-page .support-icon {
    font-size: 28px; flex-shrink: 0;
}
.data-page .support-banner.green .support-icon {
    font-size: 32px; margin-bottom: 8px; display: block;
}
.data-page .support-info { flex: 1; }
.data-page .support-banner.green .support-info { text-align: center; }
.data-page .support-info h4 {
    font-size: 15px; margin: 0 0 4px 0; font-weight: 600;
}
.data-page .support-banner.yellow .support-info h4 { color: var(--bear-orange-dark); }
.data-page .support-banner.green .support-info h4 { color: var(--bear-green-dark); font-size: 16px; font-weight: 700; }
.data-page .support-info p {
    font-size: 13px; margin: 0; line-height: 1.6;
}
.data-page .support-banner.yellow .support-info p { color: #b45309; }
.data-page .support-banner.green .support-info p { color: #047857; margin: 0 0 4px 0; line-height: 1.7; }
.data-page .btn-buy {
    background: linear-gradient(135deg, var(--bear-orange), #fbbf24);
    color: #fff; text-decoration: none;
    padding: 10px 20px; border-radius: 10px;
    font-size: 13px; font-weight: 700; white-space: nowrap;
    transition: var(--transition); display: inline-block;
}
.data-page .support-banner.green .btn-buy {
    padding: 12px 28px; border-radius: 12px; font-size: 15px;
    margin-top: 16px;
}
.data-page .btn-buy:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3);
    color: #fff; text-decoration: none;
}
.data-page .btn-buy .price {
    color: #fef3c7; font-weight: 800; margin-left: 4px;
}

/* --- responsive --- */

/* large desktop (901px ~ 1300px) - base styles are optimized for this range */
@media (min-width: 901px) {
    .data-page { padding: 40px 24px 80px; }
    .data-page .page-header h1 { font-size: 30px; }
    .data-page .page-header .app-icon { width: 64px; height: 64px; border-radius: 16px; font-size: 32px; }
    .data-page .step-card,
    .data-page .result-card,
    .data-page .car-card,
    .data-page .data-section { padding: 36px 40px; border-radius: 22px; }
    .data-page .step-title { font-size: 20px; }
    .data-page .guide-list li { font-size: 15px; line-height: 1.8; margin-bottom: 14px; padding-left: 30px; }
    .data-page .csv-preview { min-height: 120px; max-height: 320px; font-size: 13px; }
}

/* tablet (641px ~ 900px) - base styles already optimized for this range */
@media (min-width: 641px) and (max-width: 900px) {
    .data-page .container { padding: 0 12px; }
    .data-page .vehicle-grid {
        grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    }
}

/* mobile (≤640px) */
@media (max-width: 640px) {
    .data-page { padding: 20px 0 40px; }
    .data-page .container { padding: 0 12px; }
    .data-page .page-header h1 { font-size: 22px; }
    .data-page .page-header .app-icon { width: 50px; height: 50px; font-size: 24px; }
    .data-page .step-card { padding: 22px 18px; border-radius: 16px; }
    .data-page .step-title { font-size: 17px; }
    .data-page .guide-list li { font-size: 13px; padding-left: 24px; margin-bottom: 10px; }
    .data-page .guide-list.numbered li { font-size: 13px; padding-left: 36px; }
    .data-page .guide-list.numbered li::before { width: 24px; height: 24px; font-size: 12px; top: 11px; }
    .data-page .vehicle-grid {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr)); gap: 8px;
    }
    .data-page .vehicle-item { padding: 12px 8px; }
    .data-page .result-card, .data-page .car-card, .data-page .data-section {
        padding: 24px 18px; border-radius: 16px;
    }
    .data-page .result-title { font-size: 20px; }
    .data-page .stats-row { gap: 20px; }
    .data-page .stat-value { font-size: 28px; }
    .data-page .data-block { padding: 14px; }
    .data-page .export-grid { grid-template-columns: 1fr; gap: 12px; }
    .data-page .data-table th, .data-page .data-table td,
    .data-page .example-table th, .data-page .example-table td {
        padding: 8px 10px; font-size: 12px;
    }
    .data-page .section-subtitle { font-size: 15px; }
    .data-page .format-box, .data-page .code-example,
    .data-page .format-line, .data-page .csv-preview { font-size: 11px; padding: 10px 12px; }
    .data-page .csv-preview { min-height: 60px; max-height: 180px; }
    .data-page .support-banner {
        flex-direction: column; text-align: center; padding: 18px;
    }
    .data-page .support-banner.green { padding: 20px 16px; }
}

/* ==========================================================================
   Dark Mode (follows project palette from hp/styles/app.css)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
    /* --- global page background for dark mode (outside .data-page scope) --- */
    html, body {
        background-color: #12141a !important;
        color: #cbd5e1;
    }

    /* --- navigation bar dark mode --- */
    .head-mobile {
        background-color: #1c1f26 !important;
        border-bottom-color: #2d333f !important;
    }
    .head-mobile .logo-slogan {
        color: #94a3b8 !important;
    }
    .head-mobile .navi-bar-item {
        color: #cbd5e1 !important;
    }
    .head-mobile .navi-bar-item a {
        color: inherit !important;
    }
    .head-mobile .navi-bar-item a:hover {
        color: #66BB6A !important;
    }
    .head-mobile .navi-bar-item.active a,
    .head-mobile .navi-bar-item.active {
        color: #66BB6A !important;
        border-bottom-color: #66BB6A !important;
    }
    .head-mobile .search .search-input {
        background-color: #252932 !important;
        border-color: #2d333f !important;
    }
    .head-mobile .search .search-input input {
        color: #e2e8f0 !important;
        background-color: transparent !important;
    }
    .head-mobile .search .search-input input::placeholder {
        color: #64748b !important;
    }
    .head-mobile .search .search-input .search-icon {
        opacity: 0.7;
    }
    .head-mobile .search .login {
        color: #cbd5e1 !important;
    }
    .head-mobile .navi-bar-item.active::after {
        background-color: #66BB6A !important;
    }
    .head-mobile .search .login:hover {
        color: #66BB6A !important;
    }

    .data-page {
        --bear-green: #66BB6A;
        --bear-green-soft: rgba(102, 187, 106, 0.15);
        --bear-green-dark: #a5d6a7;
        --bear-blue: #64B5F6;
        --bear-blue-soft: rgba(100, 181, 246, 0.15);
        --bear-orange: #fbbf24;
        --bear-orange-dark: #fcd34d;
        --bear-red: #ef5350;
        --bear-red-soft: rgba(239, 83, 80, 0.15);
        --bear-yellow-soft: rgba(251, 191, 36, 0.12);
        --bg-body: #12141a;
        --text-title: #e2e8f0;
        --text-main: #cbd5e1;
        --text-sub: #94a3b8;
        --code-bg: #0f172a;
        --card-shadow: 0 10px 40px rgba(0,0,0,0.4);
        background-color: var(--bg-body);
        color: var(--text-main);
    }

    /* --- cards & surfaces --- */
    .data-page .step-card,
    .data-page .result-card,
    .data-page .car-card,
    .data-page .data-section {
        background-color: #1c1f26;
        border-color: #2d333f;
        box-shadow: 0 4px 20px rgba(0,0,0,0.4);
    }

    /* --- page header --- */
    .data-page .page-header .app-icon {
        box-shadow: 0 6px 16px rgba(0,0,0,0.5);
    }

    /* --- guide list numbered border --- */
    .data-page .guide-list.numbered li {
        border-bottom-color: #2d333f;
    }

    /* --- form elements --- */
    .data-page .input-main {
        background-color: #252932;
        border-color: #2d333f;
        color: var(--text-main);
    }
    .data-page .input-main:focus {
        background-color: #252932;
        border-color: var(--bear-green);
        box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.15);
    }

    /* --- vehicle grid --- */
    .data-page .vehicle-item {
        background-color: #252932;
        border-color: #2d333f;
    }
    .data-page .vehicle-item:hover,
    .data-page .vehicle-item.active {
        background-color: var(--bear-green-soft);
        border-color: var(--bear-green);
    }
    .data-page .vehicle-item span { color: var(--text-main); }
    .data-page .vehicle-item.active span { color: var(--bear-green); }

    /* --- upload zone --- */
    .data-page .upload-zone {
        background-color: #1c1f26;
        border-color: #3a4152;
    }
    .data-page .upload-zone:hover,
    .data-page .upload-zone.dragover,
    .data-page .upload-zone.has-file {
        background-color: var(--bear-green-soft);
        border-color: var(--bear-green);
    }
    .data-page .upload-hint p { color: var(--text-main); }
    .data-page .upload-subhint { color: var(--text-sub); }

    /* --- badges --- */
    .data-page .badge-optional {
        background-color: #2d333f;
        color: var(--text-sub);
    }

    /* --- result card --- */
    .data-page .result-icon.success { background-color: var(--bear-green-soft); color: var(--bear-green); }
    .data-page .result-icon.error { background-color: var(--bear-red-soft); color: var(--bear-red); }

    /* --- car info box --- */
    .data-page .car-info-box {
        background-color: var(--bear-green-soft);
        color: var(--bear-green-dark);
    }

    /* --- account box --- */
    .data-page .account-box {
        background-color: var(--bear-green-soft);
        color: var(--bear-green-dark);
    }

    /* --- warn card --- */
    .data-page .warn-card {
        background-color: var(--bear-yellow-soft);
        border-color: rgba(251, 191, 36, 0.3);
    }
    .data-page .warn-card .warn-title { color: #fcd34d; }
    .data-page .warn-card ul { color: #fbbf24; }

    /* --- note box --- */
    .data-page .note-box {
        background-color: var(--bear-blue-soft);
        border-left-color: var(--bear-blue);
        color: #93c5fd;
    }

    /* --- data section / car card --- */
    .data-page .count-tag {
        background-color: #252932;
        color: var(--text-sub);
        border-color: #2d333f;
    }
    .data-page .count-tag b { color: var(--bear-green); }

    /* --- data tables --- */
    .data-page .table-wrap {
        border-color: #2d333f;
    }
    .data-page .data-table th,
    .data-page .example-table th {
        background-color: #252932;
        color: var(--text-sub);
        border-bottom-color: #2d333f;
    }
    .data-page .data-table td,
    .data-page .example-table td {
        border-bottom-color: #1e2330;
        color: var(--text-main);
    }
    .data-page .data-table tbody tr:hover,
    .data-page .example-table tbody tr:hover {
        background-color: #252932;
    }
    .data-page .example-table tr:last-child td { color: var(--text-sub); }
    .data-page .no-tag {
        background-color: #2d333f;
        color: var(--text-sub);
    }

    /* --- CSV upload specific --- */
    .data-page .format-box {
        background-color: var(--code-bg);
        color: #cbd5e1;
    }
    .data-page .code-example {
        background-color: #1a1f2e;
        border-color: #2d333f;
        color: #cbd5e1;
    }
    .data-page .field-list li {
        border-bottom-color: #2d333f;
    }
    .data-page .sample-link {
        background-color: var(--bear-blue-soft);
        color: var(--bear-blue);
    }
    .data-page .sample-link:hover {
        background-color: var(--bear-blue);
        color: #fff;
    }
    .data-page .warn-box {
        background-color: var(--bear-yellow-soft);
        border-left-color: var(--bear-orange);
        color: var(--bear-orange-dark);
    }

    /* --- export page --- */
    .data-page .data-block {
        background-color: #1a1f2e;
        border-color: #2d333f;
    }
    .data-page .format-line {
        background-color: #252932;
        color: var(--text-sub);
        border-color: #2d333f;
    }
    .data-page .csv-preview {
        background-color: var(--code-bg);
        color: #94a3b8;
    }
    .data-page .no-data-tip { color: var(--text-sub); }

    /* --- support banner --- */
    .data-page .support-banner.yellow {
        background: linear-gradient(135deg, rgba(251, 191, 36, 0.12) 0%, #1c1f26 100%);
        border-color: rgba(251, 191, 36, 0.25);
    }
    .data-page .support-banner.yellow .support-info h4 { color: #fcd34d; }
    .data-page .support-banner.yellow .support-info p { color: #fbbf24; }
    .data-page .support-banner.green {
        background: linear-gradient(135deg, var(--bear-green-soft) 0%, #1c1f26 100%);
        border-color: rgba(102, 187, 106, 0.25);
    }
    .data-page .support-banner.green .support-info h4 { color: var(--bear-green); }
    .data-page .support-banner.green .support-info p { color: #a5d6a7; }

    /* --- buttons (gradients kept but slightly desaturated for dark bg) --- */
    .data-page .btn-submit,
    .data-page .btn-primary,
    .data-page .btn-download {
        box-shadow: 0 6px 16px rgba(102, 187, 106, 0.2);
    }
    .data-page .btn-submit:hover,
    .data-page .btn-primary:hover {
        box-shadow: 0 10px 22px rgba(102, 187, 106, 0.3);
    }
    .data-page .btn-download:hover {
        box-shadow: 0 8px 18px rgba(102, 187, 106, 0.28);
    }
    .data-page .btn-outline {
        background-color: transparent;
        color: var(--bear-green);
        border-color: var(--bear-green);
    }
    .data-page .btn-outline:hover {
        background-color: var(--bear-green-soft);
        color: var(--bear-green);
    }

    /* --- section subtitle border --- */
    .data-page .section-subtitle {
        border-left-color: var(--bear-green);
    }

    /* --- new-car / merge-car tags --- */
    .data-page .new-car-tag { background-color: var(--bear-green); color: #fff; }
    .data-page .merge-car-tag { background-color: var(--bear-blue); color: #fff; }

    /* --- step label gradient fine-tune --- */
    .data-page .step-label {
        background: linear-gradient(135deg, var(--bear-green), #43a047);
    }

    /* --- guide-list numbered circle bg --- */
    .data-page .guide-list.numbered li::before {
        background: var(--bear-green-soft);
    }

    /* --- icon backgrounds in section/data-block titles --- */
    .data-page .section-title .icon.fuel { background: rgba(217, 119, 6, 0.2); color: #fbbf24; }
    .data-page .section-title .icon.exp { background: rgba(37, 99, 235, 0.2); color: #64B5F6; }
    .data-page .data-block-title .icon.fuel { background: rgba(217, 119, 6, 0.2); color: #fbbf24; }
    .data-page .data-block-title .icon.exp { background: rgba(37, 99, 235, 0.2); color: #64B5F6; }

    /* --- logo icons: slightly dimmed to avoid harsh contrast on dark bg --- */
    .data-page .page-header .app-icon img {
        filter: brightness(0.92) contrast(1.05);
    }
    .data-page .app-icon[style*="#ffffff"],
    .data-page .app-icon[style*="#fff;"] {
        background-color: #f0f0f0 !important;
    }

    /* --- buy button (orange) --- */
    .data-page .btn-buy {
        box-shadow: 0 6px 16px rgba(245, 158, 11, 0.25);
    }
    .data-page .btn-buy:hover {
        box-shadow: 0 8px 20px rgba(245, 158, 11, 0.35);
    }
    .data-page .support-banner.yellow .support-info p { color: #fbbf24; }

    /* --- disabled button --- */
    .data-page .btn-submit:disabled,
    .data-page .btn-download:disabled,
    .data-page .btn-download.disabled {
        background: #3a4152;
        color: #6b7280;
        box-shadow: none;
        cursor: not-allowed;
    }

    /* --- page header title & subtitle --- */
    .data-page .page-header h1 { color: var(--text-title); }
    .data-page .page-header .page-subtitle { color: var(--text-sub); }
    .data-page .page-header .page-subtitle .highlight { color: var(--bear-green); }

    /* --- stats row --- */
    .data-page .stat-label { color: var(--text-sub); }
    .data-page .result-desc { color: var(--text-main); }

    /* --- step card title colors hardcoded check --- */
    .data-page .step-title { color: var(--text-title); }
    .data-page .stat-value { color: var(--text-title); }
    .data-page .result-title { color: var(--text-title); }
    .data-page .car-title { color: var(--text-title); }
    .data-page .section-title { color: var(--text-title); }
    .data-page .data-block-title { color: var(--text-title); }

    /* --- upload-icon emoji brightness --- */
    .data-page .upload-icon {
        filter: brightness(0.85);
    }
    .data-page .data-block-title .emoji,
    .data-page .section-title .emoji,
    .data-page .result-icon,
    .data-page .car-emoji {
        filter: brightness(0.9);
    }
}