:root {
        --ui-bg: #f5f7fb;
        --ui-card: #ffffff;
        --ui-text: #172033;
        --ui-muted: #697386;
        --ui-border: #e5e9f2;
        --ui-primary: #c1282d;
        --ui-primary-dark: #3730a3;
        --ui-success: #078b63;
        --ui-danger: #c0392b;
        --ui-shadow: 0 16px 45px rgba(25, 35, 60, .08);
        --ui-radius: 20px;
    }

    .upload-page {
        min-height: 100vh;
        padding: 32px 18px 56px;
        background:
            radial-gradient(circle at 10% 0%, rgba(79, 70, 229, .08), transparent 28%),
            radial-gradient(circle at 90% 5%, rgba(14, 165, 233, .08), transparent 25%),
            var(--ui-bg);
        color: var(--ui-text);
        font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    }

    .upload-shell {
        width: min(1180px, 100%);
        margin: 0 auto;
    }

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

    .brand h1 {
        margin: 0;
        font-size: clamp(28px, 4vw, 38px);
        letter-spacing: -.04em;
    }

    .brand p {
        margin: 7px 0 0;
        color: var(--ui-muted);
        font-size: 14px;
    }

    .top-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        justify-content: flex-end;
    }

    .top-actions a {
        text-decoration: none;
        color: var(--ui-text);
        background: rgba(255,255,255,.85);
        border: 1px solid var(--ui-border);
        border-radius: 12px;
        padding: 10px 13px;
        font-size: 13px;
        font-weight: 700;
        transition: .2s ease;
    }

    .top-actions a:hover {
        transform: translateY(-1px);
        box-shadow: 0 8px 22px rgba(25,35,60,.08);
    }

    .top-actions .logout {
        color: #fff;
        background: #1f2937;
        border-color: #1f2937;
    }

    .card {
        background: var(--ui-card);
        border: 1px solid rgba(229,233,242,.9);
        border-radius: var(--ui-radius);
        box-shadow: var(--ui-shadow);
    }

    .upload-card {
        padding: clamp(20px, 4vw, 34px);
        margin-bottom: 22px;
    }

    .section-title {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-bottom: 18px;
    }

    .section-title h2 {
        margin: 0;
        font-size: 20px;
    }

    .section-title span {
        color: var(--ui-muted);
        font-size: 13px;
    }

    .dropzone {
        position: relative;
        border: 1.5px dashed #cbd3e1;
        border-radius: 18px;
        padding: 34px 20px;
        text-align: center;
        background: #fafbfe;
        transition: .2s ease;
        cursor: pointer;
    }

    .dropzone:hover,
    .dropzone.dragover {
        border-color: var(--ui-primary);
        background: #f5f5ff;
    }

    .drop-icon {
        width: 58px;
        height: 58px;
        margin: 0 auto 14px;
        display: grid;
        place-items: center;
        border-radius: 16px;
        background: #ecebff;
        color: var(--ui-primary);
        font-size: 27px;
        font-weight: 800;
    }

    .dropzone strong {
        display: block;
        font-size: 16px;
    }

    .dropzone small {
        display: block;
        margin-top: 7px;
        color: var(--ui-muted);
    }

    .file-input {
        position: absolute;
        inset: 0;
        opacity: 0;
        cursor: pointer;
    }

    .preview-list {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 12px;
        margin-top: 16px;
    }

    .preview {
        min-width: 0;
        border: 1px solid var(--ui-border);
        border-radius: 14px;
        padding: 8px;
        background: #fff;
    }

    .preview img {
        display: block;
        width: 100%;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        border-radius: 10px;
        background: #f1f3f7;
    }

    .preview-name {
        margin-top: 7px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--ui-muted);
        font-size: 12px;
    }

    .preview-pdf {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        aspect-ratio: 16 / 10;
        border-radius: 10px;
        background: #f1f3f7;
        color: var(--ui-danger);
        font-size: 15px;
        font-weight: 800;
        letter-spacing: .06em;
    }

    .upload-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        margin-top: 18px;
    }

    .hint {
        color: var(--ui-muted);
        font-size: 12px;
        line-height: 1.5;
    }

    .upload-btn {
        border: 0;
        border-radius: 13px;
        padding: 12px 20px;
        color: #fff;
        background: var(--ui-primary);
        font-weight: 800;
        cursor: pointer;
        box-shadow: 0 8px 20px rgba(79,70,229,.25);
        transition: .2s ease;
    }

    .upload-btn:hover {
        background: var(--ui-primary-dark);
        transform: translateY(-1px);
    }

    .upload-btn:disabled {
        opacity: .6;
        cursor: wait;
        transform: none;
    }

    .alert {
        padding: 12px 15px;
        margin-bottom: 18px;
        border-radius: 12px;
        background: #eafaf4;
        color: var(--ui-success);
        border: 1px solid #c7f0e2;
        font-size: 14px;
        font-weight: 700;
    }

    .error-box {
        padding: 12px 15px;
        margin-bottom: 18px;
        border-radius: 12px;
        background: #fff1ef;
        color: var(--ui-danger);
        border: 1px solid #ffd4cf;
        font-size: 14px;
    }

    .table-card {
        overflow: hidden;
    }

    .table-head {
        padding: 22px 24px 12px;
    }

    .table-head h2 {
        margin: 0;
        font-size: 20px;
    }

    .table-wrap {
        overflow-x: auto;
    }

    .url-table {
        width: 100%;
        min-width: 760px;
        border-collapse: collapse;
    }

    .url-table th,
    .url-table td {
        padding: 15px 18px;
        border-top: 1px solid var(--ui-border);
        text-align: left;
        vertical-align: middle;
        font-size: 13px;
    }

    .url-table th {
        color: var(--ui-muted);
        background: #fafbfc;
        font-size: 12px;
        text-transform: uppercase;
        letter-spacing: .04em;
        white-space: nowrap;
    }

    .sort-link {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: inherit;
        text-decoration: none;
        font-weight: 700;
        color: #c1282d;
        transition: color .2s ease;
    }

    .sort-link:hover,
    .sort-link.active {
        color: var(--ui-primary);
    }

    .sort-arrow {
        font-size: 10px;
        line-height: 1;
    }

    .sort-arrow.idle {
        opacity: .45;
    }

    .table-tools {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: flex-end;
        gap: 12px;
    }

    .table-meta {
        color: var(--ui-muted);
        font-size: 13px;
    }

    .per-page {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        margin: 0;
        color: var(--ui-muted);
        font-size: 13px;
        font-weight: 600;
        white-space: nowrap;
    }

    .per-page-select.form-select {
        width: auto;
        min-width: 74px;
        padding: 6px 30px 6px 10px;
        border: 1px solid var(--ui-border);
        border-radius: 10px;
        background-color: #fff;
        color: var(--ui-text);
        font-size: 13px;
        font-weight: 700;
        box-shadow: none;
        cursor: pointer;
    }

    .per-page-select.form-select:focus {
        border-color: var(--ui-primary);
        box-shadow: 0 0 0 3px rgba(79, 70, 229, .15);
    }

    .table-footer {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 22px 20px;
        border-top: 1px solid var(--ui-border);
    }

    .footer-left {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 14px;
    }

    .footer-info {
        color: var(--ui-muted);
        font-size: 13px;
    }

    .footer-right .pagination {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .footer-right .page-link {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        border: 1px solid var(--ui-border);
        border-radius: 10px;
        background: #fff;
        color: var(--ui-text);
        font-size: 13px;
        font-weight: 700;
        text-decoration: none;
        transition: .2s ease;
    }

    .footer-right .page-link:hover {
        border-color: #b9c2d4;
        background: #f8f9fc;
    }

    .footer-right .page-item.active .page-link {
        background: var(--ui-primary);
        border-color: var(--ui-primary);
        color: #fff;
        box-shadow: 0 6px 16px rgba(79, 70, 229, .25);
    }

    .footer-right .page-item.disabled .page-link {
        opacity: .45;
        cursor: not-allowed;
    }

    @media (max-width: 560px) {
        .table-footer,
        .footer-left {
            align-items: flex-start;
            flex-direction: column;
        }
    }

    .url-cell {
        max-width: 290px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .thumb-link {
        display: inline-flex;
        line-height: 0;
        border-radius: 8px;
    }

    .thumb {
        display: block;
        width: 64px;
        height: 48px;
        object-fit: cover;
        border: 1px solid var(--ui-border);
        border-radius: 8px;
        background: #f1f3f7;
        transition: .2s ease;
    }

    .thumb-link:hover .thumb {
        border-color: var(--ui-primary);
        box-shadow: 0 6px 16px rgba(79, 70, 229, .2);
    }

    .thumb-file {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: var(--ui-muted);
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .04em;
    }

    .url-cell a {
        color: var(--ui-primary);
        text-decoration: none;
    }

    .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 7px;
    }

    .action-btn {
        border: 1px solid var(--ui-border);
        border-radius: 9px;
        background: #fff;
        color: var(--ui-text);
        padding: 7px 9px;
        font-size: 12px;
        font-weight: 700;
        cursor: pointer;
        text-decoration: none;
    }

    .action-btn:hover {
        border-color: #b9c2d4;
        background: #f8f9fc;
    }

    .copy-status {
        position: fixed;
        right: 18px;
        bottom: 18px;
        z-index: 99;
        padding: 11px 15px;
        border-radius: 12px;
        color: #fff;
        background: #172033;
        box-shadow: 0 12px 30px rgba(0,0,0,.18);
        opacity: 0;
        transform: translateY(8px);
        pointer-events: none;
        transition: .2s ease;
        font-size: 13px;
        font-weight: 700;
    }

    .copy-status.show {
        opacity: 1;
        transform: translateY(0);
    }

    @media (max-width: 800px) {
        .topbar {
            align-items: flex-start;
            flex-direction: column;
        }

        .top-actions {
            width: 100%;
            justify-content: flex-start;
        }

        .preview-list {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    @media (max-width: 560px) {
        .upload-page {
            padding: 20px 12px 36px;
        }

        .top-actions a {
            flex: 1 1 auto;
            text-align: center;
        }

        .upload-card {
            padding: 18px;
        }

        .preview-list {
            grid-template-columns: 1fr 1fr;
        }

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

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