/* Base styling, taken from the standalone Product CSV Checker (which follows the original Shiptheory CSV Tool) */
        * { box-sizing: border-box; }
        body { font-family: "Inter", sans-serif; color: #333; margin: 0; background: #fff; line-height: 1.5; }

        .header { padding: 55px 20px; text-align: center; background-image: url("../assets/background.png"); background-color: #cccccc; background-size: cover; color: white; font-size: 30px; }
        .header h1 { font-size: 38px; margin: 0 0 12px; font-weight: 600; }
        .header p { font-size: 18px; margin: 0 auto 10px; max-width: 760px; }
        .header h5 { font-size: 15px; font-weight: 400; margin: 0 auto; max-width: 760px; color: white; }

        .container { max-width: 960px; margin: 0 auto; padding: 0 20px 60px; }
        h2, h3, h5 { color: #333; }
        h2 { font-size: 22px; margin: 30px 0 10px; }
        h3 { font-size: 18px; margin: 24px 0 8px; }
        p, li { font-size: 14px; line-height: 20px; }
        a { color: #133EF5; }
        hr { border: 0; border-top: 1px dashed #333; margin: 30px 0; }
        code { font-family: monospace; background: #eee; padding: 1px 5px; border-radius: 3px; font-size: 12px; }

        /* Message boxes: same colours as the uploader's info / success / warning / error panels */
        .info, .success, .warning, .error {
            text-align: left; font-size: 14px; border: 1px solid; margin: 12px 0; padding: 14px 14px 14px 56px;
            background-repeat: no-repeat; background-position: 12px 14px; background-size: 32px 32px;
        }
        .info    { color: #00529B; background-color: #BDE5F8; background-image: url('../assets/info.png'); }
        .success { color: #4F8A10; background-color: #DFF2BF; background-image: url('../assets/success.png'); }
        .warning { color: #9F6000; background-color: #FEEFB3; background-image: url('../assets/warning.png'); }
        .error   { color: #D8000C; background-color: #FFBABA; background-image: url('../assets/error.png'); }
        .info p, .success p, .warning p, .error p { font-size: 14px; margin: 4px 0; }
        .info strong, .success strong, .warning strong, .error strong { display: block; font-size: 16px; margin-bottom: 2px; }

        /* Upload form */
        .dropzone { border: 3px dashed #ccc; border-radius: 6px; padding: 34px 20px; text-align: center; margin: 18px 0 8px; transition: background .15s, border-color .15s; }
        .dropzone.over { background: #f0f6ff; border-color: #133EF5; }
        .dropzone label { font-size: 22px; display: block; margin-bottom: 10px; cursor: pointer; }
        input[type="file"] { border: 3px solid #eee; padding: .4em 1em; border-radius: 6px; font-family: inherit; max-width: 100%; }
        .btn { font-family: inherit; background-color: #28a8e6; color: #fafafa; text-transform: uppercase; border-radius: 20px; padding: 8px 22px; font-size: 16px; font-weight: 700; border: none; line-height: 22px; cursor: pointer; }
        .btn:hover { filter: brightness(.95); }
        .btn[disabled] { background-color: #bbb; cursor: not-allowed; filter: none; }
        .btn.secondary { background-color: #133EF5; }
        .btn.small { font-size: 12px; padding: 5px 14px; text-transform: none; }
        .linkbtn { background: none; border: none; color: #133EF5; text-decoration: underline; cursor: pointer; font: inherit; font-size: 14px; padding: 0; }
        .center { text-align: center; }

        /* Summary */
        .stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }
        .stat { flex: 1 1 130px; border: 3px solid #eee; border-radius: 6px; padding: 10px 14px; text-align: center; }
        .stat b { display: block; font-size: 28px; line-height: 34px; }
        .stat span { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; }
        .stat.e b { color: #D8000C; } .stat.w b { color: #9F6000; } .stat.i b { color: #00529B; }

        /* Issue groups */
        .filters { margin: 10px 0; font-size: 14px; }
        .filters label { margin-right: 16px; cursor: pointer; font-size: 14px; }
        details.group { border: 1px solid #e0e0e0; border-left-width: 6px; border-radius: 4px; margin: 8px 0; background: #fff; }
        details.group.sev-error { border-left-color: #D8000C; } details.group.sev-warning { border-left-color: #e0a100; } details.group.sev-info { border-left-color: #28a8e6; }
        details.group > summary { padding: 10px 14px; cursor: pointer; font-size: 14px; list-style-position: inside; }
        details.group > summary b { font-weight: 600; }
        .count { display: inline-block; background: #eee; border-radius: 10px; padding: 0 9px; font-size: 12px; margin-left: 8px; }
        .tag { display: inline-block; font-size: 11px; text-transform: uppercase; font-weight: 700; padding: 1px 7px; border-radius: 3px; margin-right: 8px; color: #fff; }
        .tag.error { background: #D8000C; } .tag.warning { background: #b27800; } .tag.info { background: #28a8e6; }
        .tag.error, .tag.warning, .tag.info { border: 0; padding: 1px 7px; margin: 0 8px 0 0; background-image: none; font-size: 11px; display: inline-block; }
        .group .why { padding: 0 14px 6px; margin: 0; color: #555; }
        .group ul { margin: 0; padding: 4px 14px 12px 34px; max-height: 340px; overflow: auto; }
        .group li { font-size: 13px; padding: 2px 0; }
        .group li .fixnote { color: #4F8A10; }
        .mono { font-family: monospace; background: #f4f4f4; padding: 0 4px; border-radius: 3px; word-break: break-all; }

        /* Data preview */
        .preview-wrap { overflow: auto; max-height: 460px; border: 1px solid #e0e0e0; border-radius: 4px; }
        table.preview { font-size: 12px; border-collapse: collapse; width: max-content; min-width: 100%; }
        table.preview th, table.preview td { border: 1px solid #e6e6e6; padding: 4px 8px; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align: left; }
        table.preview th { background: #28a8e6; color: #fff; position: sticky; top: 0; z-index: 1; }
        table.preview tr:nth-child(even) td { background: #f7f7f7; }
        table.preview td.rn { color: #888; background: #eee !important; text-align: right; position: sticky; left: 0; }
        table.preview td.c-error { background: #FFBABA !important; color: #D8000C; font-weight: 600; }
        table.preview td.c-warning { background: #FEEFB3 !important; color: #7a4a00; }
        table.preview td.c-info { background: #BDE5F8 !important; color: #00529B; }
        table.preview th.h-error { background: #D8000C; } table.preview th.h-warning { background: #b27800; }

        /* Reference table (same look as the uploader's) */
        #reference { font-size: 12px; width: 100%; border-collapse: collapse; }
        #reference th { text-align: left; padding: 8px 15px; border-bottom: 1px solid #e0e0e0; }
        #reference td { padding: 8px 15px; vertical-align: top; }
        #reference tr:nth-child(even) { background: #eeeeee; }
        #reference td:nth-child(1) { font-weight: bold; }
        #reference td:nth-child(2) { font-family: monospace; }

        /* Fix panel */
        .fixrow { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; border-bottom: 1px solid #eee; font-size: 14px; }
        .fixrow input { margin-top: 4px; }
        .fixrow .risk { font-size: 11px; text-transform: uppercase; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-left: 6px; }
        .risk.safe { background: #DFF2BF; color: #4F8A10; } .risk.review { background: #FEEFB3; color: #9F6000; }
        .ack { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; font-size: 14px; }
        .ack input { margin-top: 4px; }
        table.log { font-size: 12px; border-collapse: collapse; width: 100%; }
        table.log th, table.log td { border-bottom: 1px solid #e6e6e6; padding: 4px 8px; text-align: left; vertical-align: top; word-break: break-word; }
        table.log th { background: #eee; }
        .hidden { display: none !important; }
        .muted { color: #777; font-size: 13px; }
        @media (max-width: 600px) { .header h1 { font-size: 28px; } .header { padding: 35px 16px; } }