:root {
    --bg-start: #f4f5ff;
    --bg-end: #eef0ff;
    --panel: #ffffff;
    --ink: #1f2138;
    --muted: #6b6f8a;
    --line: #dfe1f5;
    --primary: #673de6;
    --primary-strong: #4f2bc4;
    --accent: #ff8200;
    --accent-2: #0047bb;
    --good: #0a8f5a;
    --warn: #b8860b;
    --bad: #d62839;
    --shadow: 0 18px 44px rgba(31, 33, 56, 0.10);
    --radius: 16px;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    font-family: 'DM Sans', Arial, sans-serif;
    color: var(--ink);
    background: linear-gradient(130deg, var(--bg-start), var(--bg-end));
    position: relative;
    overflow-x: hidden;
}

body::before, body::after {
    content: "";
    position: fixed;
    z-index: -1;
    border-radius: 50%;
    filter: blur(70px);
    opacity: 0.28;
    pointer-events: none;
}

body::before {
    width: 480px;
    height: 480px;
    top: -160px;
    right: -140px;
    background: radial-gradient(circle at 30% 30%, var(--accent), transparent 70%);
}

body::after {
    width: 520px;
    height: 520px;
    bottom: -220px;
    left: -160px;
    background: radial-gradient(circle at 60% 60%, var(--accent-2), transparent 70%);
}

.cursor-trail {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.cursor-trail-dot {
    position: fixed;
    top: 0;
    left: 0;
    border-radius: 50%;
    filter: blur(38px);
    pointer-events: none;
    will-change: transform, background-color;
}

h1, h2, h3 {
    margin: 0;
    letter-spacing: -0.01em;
}

p {
    margin: 0;
    color: var(--muted);
}

a {
    color: var(--primary);
}

.auth-shell {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 24px;
}

.auth-card {
    width: min(440px, 100%);
    padding: 32px;
    border-radius: var(--radius);
    background: var(--panel);
    box-shadow: var(--shadow);
    border: 1px solid var(--line);
}

.auth-badge {
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--primary);
    background: rgba(103, 61, 230, 0.1);
    padding: 4px 10px;
    border-radius: 999px;
    margin-bottom: 12px;
}

.auth-card h1 {
    font-size: 22px;
    margin-bottom: 4px;
}

.auth-subtitle {
    margin-bottom: 20px;
}

.auth-form label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
}

.auth-form input {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 14px;
    font-family: inherit;
}

.auth-form button, .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: none;
    background: linear-gradient(120deg, var(--primary), var(--primary-strong));
    color: #fff;
    font-weight: 700;
    font-size: 14px;
    padding: 11px 18px;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(103, 61, 230, 0.25);
    transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.auth-form button:hover, .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(103, 61, 230, 0.32);
}

.btn.secondary {
    background: #fff;
    color: var(--primary);
    border: 1px solid var(--line);
    box-shadow: none;
}

.btn.secondary:hover {
    background: #f4f2ff;
    box-shadow: none;
}

.btn[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.auth-error, .flash-error {
    background: rgba(214, 40, 57, 0.08);
    color: var(--bad);
    border: 1px solid rgba(214, 40, 57, 0.25);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
}

.flash-ok {
    background: rgba(10, 143, 90, 0.08);
    color: var(--good);
    border: 1px solid rgba(10, 143, 90, 0.25);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 16px;
}

.app-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 24px 64px;
}

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
}

.brand-mark {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
}

.eyebrow {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--primary);
}

.topbar h1 {
    font-size: 26px;
    background: linear-gradient(120deg, var(--primary-strong), var(--accent) 70%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.identity {
    text-align: right;
    font-size: 13px;
    line-height: 1.3;
}

.identity small {
    display: block;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
}

.logout-link {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
}

.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 24px;
    margin-bottom: 24px;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.panel h2 {
    font-size: 18px;
    margin-bottom: 6px;
}

.panel > p {
    margin-bottom: 16px;
}

.upload-zone {
    position: relative;
    border: 2px dashed var(--line);
    border-radius: 18px;
    padding: 40px 28px;
    text-align: center;
    background: linear-gradient(180deg, #faf9ff, #f5f3ff);
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}

.upload-zone:hover {
    border-color: var(--primary);
}

.upload-zone.dragover {
    border-color: var(--primary);
    background: linear-gradient(180deg, #f0ecff, #ece6ff);
    transform: scale(1.01);
    box-shadow: 0 0 0 6px rgba(103, 61, 230, 0.08);
}

.upload-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 12px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(103, 61, 230, 0.12), rgba(255, 93, 162, 0.14));
    color: var(--primary);
}

.upload-zone strong {
    font-size: 16px;
}

.upload-hint {
    font-size: 12px;
    margin-top: 8px;
}

.upload-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.auth-form button, .btn {
    min-height: 44px;
}

.camera-btn {
    display: none;
}

@media screen and (max-width: 640px), (pointer: coarse) {
    .camera-btn {
        display: inline-flex;
    }
}

/* Some mobile browsers (notably iOS Safari and Firefox for Android) fail to
   launch the native camera/file picker when a file input is hidden via
   display:none, visibility:hidden, or a zero-area clip rect - assistive
   tech / some mobile engines treat those as "not interactive" and refuse to
   open the native picker, especially with the capture attribute. Per MDN's
   own guidance, opacity is the safe way to visually hide a file input while
   keeping it interactive. Keep the input technically rendered (opacity: 0)
   but visually hidden instead. */
.sr-only-file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    opacity: 0;
    border: 0;
}

.file-list {
    margin-top: 14px;
    font-size: 13px;
}

.file-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 14px;
    font-size: 12px;
    color: var(--muted);
}

.link-btn {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    font-weight: 600;
    font-size: 12px;
    color: var(--primary);
    cursor: pointer;
    text-decoration: underline;
}

.link-btn:hover {
    color: var(--primary-strong);
}

.file-list .file-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 0;
    border-bottom: 1px solid var(--line);
}

.file-list .file-item span:first-child {
    overflow-wrap: anywhere;
    flex: 1;
}

.file-list .file-item-invalid {
    color: var(--bad);
}

.file-item-remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(214, 40, 57, 0.08);
    color: var(--bad);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, transform 0.15s ease;
}

.file-item-remove:hover {
    background: rgba(214, 40, 57, 0.18);
    transform: scale(1.08);
}

.form-actions {
    margin-top: 18px;
    display: flex;
    gap: 12px;
    align-items: center;
}

.spinner {
    display: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-top-color: #fff;
    animation: isitai-spin 0.7s linear infinite;
}

@keyframes isitai-spin {
    to { transform: rotate(360deg); }
}

.summary-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}

.summary-card {
    background: #faf9ff;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 16px;
}

.summary-card .value {
    font-size: 24px;
    font-weight: 800;
}

.summary-card .label {
    font-size: 12px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.history-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 14px;
    font-size: 13px;
    color: var(--muted);
}

table.report-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

table.report-table th, table.report-table td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid var(--line);
}

table.report-table th {
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    letter-spacing: 0.04em;
}

.report-table-wrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.detail-cell {
    max-width: 260px;
    color: var(--bad);
    font-size: 12px;
    white-space: normal;
    word-break: break-word;
}

.file-cell {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.file-cell .file-name {
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.thumb-wrap {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    z-index: 1;
}

.thumb {
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: #fff;
    display: block;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    transform-origin: left center;
    cursor: zoom-in;
}

/* The zoomed state is toggled by JS (initThumbZoom in app.js), which pins the
   thumbnail to position:fixed at its current on-screen coordinates before
   scaling it up. Using position:fixed (instead of the table's normal static
   flow) lets the enlarged preview escape the report table's scroll/overflow
   clipping (.report-table-wrap uses overflow-x:auto for responsiveness),
   instead of being cut off by the table's boundaries. */
.thumb.thumb-zoomed {
    position: fixed;
    transform: scale(6);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
    z-index: 999;
}

.badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
}

.badge.ai {
    background: rgba(214, 40, 57, 0.12);
    color: var(--bad);
}

.badge.doubt {
    background: rgba(184, 134, 11, 0.14);
    color: var(--warn);
}

.badge.human {
    background: rgba(10, 143, 90, 0.12);
    color: var(--good);
}

.badge.error {
    background: rgba(107, 111, 138, 0.15);
    color: var(--muted);
}

.hint-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: 4px;
    border-radius: 50%;
    background: rgba(184, 134, 11, 0.16);
    color: var(--warn);
    font-size: 11px;
    font-weight: 700;
    font-style: normal;
    cursor: help;
    vertical-align: middle;
}

.hint-icon-strong {
    width: auto;
    height: auto;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    background: rgba(184, 134, 11, 0.22);
}

.info-note {
    background: rgba(184, 134, 11, 0.08);
    color: var(--ink);
    border: 1px solid rgba(184, 134, 11, 0.25);
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13px;
    margin: 14px 0;
}

.report-accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.report-group {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: #faf9ff;
    overflow: hidden;
}

.report-group summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 13px;
    color: var(--ink);
}

.report-group summary::-webkit-details-marker {
    display: none;
}

.report-group summary::before {
    content: "\25B8";
    display: inline-block;
    margin-right: 10px;
    color: var(--primary);
    transition: transform 0.15s ease;
}

.report-group[open] summary::before {
    transform: rotate(90deg);
}

.report-group .group-path {
    flex: 1;
    overflow-wrap: anywhere;
}

.report-group .group-count {
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 3px 10px;
    white-space: nowrap;
}

.report-group table.report-table {
    background: #fff;
    padding: 0 16px 12px;
}

.report-actions {
    display: flex;
    gap: 10px;
    margin-top: 18px;
    flex-wrap: wrap;
}

.form-actions {
    flex-wrap: wrap;
}

.modal-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(20, 20, 40, 0.45);
    align-items: center;
    justify-content: center;
    z-index: 50;
}

.modal-backdrop.open {
    display: flex;
}

.modal-card {
    background: #fff;
    border-radius: var(--radius);
    padding: 24px;
    width: min(420px, 90vw);
    box-shadow: var(--shadow);
}

.modal-card h3 {
    margin-bottom: 12px;
    font-size: 16px;
}

.modal-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ink);
    margin-bottom: 14px;
}

.modal-card input, .modal-card textarea {
    display: block;
    width: 100%;
    margin-top: 6px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
}

.settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
}

.settings-grid label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
}

.settings-grid input {
    width: 100%;
    padding: 9px 10px;
    border-radius: 8px;
    border: 1px solid var(--line);
    font-size: 13px;
    font-family: inherit;
}

.site-link {
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary-strong);
    border: 1px solid var(--line);
    padding: 8px 12px;
    border-radius: 10px;
    background: #fff;
}

.site-link:hover {
    border-color: var(--primary);
}

.legal-content h2 {
    font-size: 19px;
    margin-top: 28px;
    margin-bottom: 10px;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content h3 {
    font-size: 15px;
    margin-top: 20px;
    margin-bottom: 6px;
}

.legal-content p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink);
    margin: 0 0 10px;
}

.legal-content ul {
    margin: 0 0 12px;
    padding-left: 20px;
}

.legal-content li {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 6px;
}

.legal-content code {
    background: rgba(0, 0, 0, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 13px;
}

.legal-content a {
    color: var(--primary-strong);
}

.app-footer {
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 24px 40px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--line);
    font-size: 13px;
    color: var(--muted);
}

.footer-copy {
    margin: 0;
}

.footer-links {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.footer-links a {
    color: var(--muted);
    text-decoration: none;
    font-weight: 600;
}

.footer-links a:hover {
    color: var(--primary-strong);
    text-decoration: underline;
}

.cookie-banner {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 200;
    max-width: 720px;
    margin: 0 auto;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 16px 20px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.cookie-banner p {
    margin: 0;
    font-size: 13px;
    color: var(--ink);
    flex: 1 1 380px;
}

.cookie-banner a {
    color: var(--primary-strong);
}

.cookie-banner[hidden] {
    display: none;
}

@media screen and (max-width: 640px) {
    .app-shell {
        padding: 20px 14px 48px;
    }

    .topbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .topbar-right {
        width: 100%;
    }

    .identity {
        text-align: left;
    }

    .panel {
        padding: 18px 16px;
    }

    .upload-zone {
        padding: 28px 16px;
    }

    .upload-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .upload-actions .btn {
        width: 100%;
    }

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .report-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .report-actions .btn {
        width: 100%;
    }

    .modal-card .form-actions {
        flex-direction: column-reverse;
    }

    .app-footer {
        flex-direction: column;
        align-items: flex-start;
    }

    .cookie-banner {
        flex-direction: column;
        align-items: stretch;
        text-align: left;
    }
}

@media screen and (max-width: 700px) {
    table.report-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    table.report-table, table.report-table tbody, table.report-table tr {
        display: block;
        width: 100%;
    }

    table.report-table tr {
        border: 1px solid var(--line);
        border-radius: 12px;
        margin-bottom: 12px;
        padding: 4px 14px;
        background: #fff;
    }

    table.report-table tr:last-child {
        margin-bottom: 0;
    }

    table.report-table td {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 8px 0;
        border-bottom: 1px dashed var(--line);
        text-align: right;
    }

    table.report-table td:last-child {
        border-bottom: none;
    }

    table.report-table td::before {
        content: attr(data-label);
        flex: 0 0 auto;
        font-size: 11px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--muted);
        text-align: left;
    }

    table.report-table td.file-cell {
        justify-content: flex-start;
        text-align: left;
    }

    table.report-table td.file-cell::before {
        display: none;
    }

    .detail-cell {
        max-width: none;
        text-align: right;
    }

    .report-group table.report-table {
        padding: 0 12px 12px;
    }
}