body {
    height: 100%;
    position: relative;
}

.border-error {
    border: 1px solid #A9A9A9;
}

.show {
    display: block !important;
}

.hidden {
    display: none !important;
}

.fr {
    float: right;
}

.fl {
    float: left;
}

.upgrade {
    display: block;
    background: #f7f7f7;
    border-top: 1px solid #c6d2d4;
    border-bottom: 1px solid #c6d2d4;
    padding: 8px;
    margin: 18px 0 10px 0;
    line-height: 23px;
}

.upgrade > a {
    color: #005ccf;
    text-decoration: underline;
}

/* ---- Alert-warning: theme-consistent info bar ---- */
.alert.alert-warning {
    background: linear-gradient(135deg, #eef5fc 0%, #e6f0fa 100%) !important;
    border: none !important;
    border-left: 4px solid #0D5C91 !important;
    border-radius: 0 8px 8px 0 !important;
    color: #1a3a5a !important;
    padding: 10px 16px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    box-shadow: 0 1px 4px rgba(13, 92, 145, 0.08) !important;
}

.alert.alert-warning .fields {
    color: #1a3a5a !important;
    margin: 2px 0 !important;
}

.alert.alert-warning p[style*=\"AF0200\"],
.alert.alert-warning p[style*=\"af0200\"] {
    color: #af0200 !important;
}

/* =============================================
   HEADER — brand bar + controls
   ============================================= */
.luf-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 20px 20px 16px;
    border-bottom: 2px solid #eef1f6;
    background: #fff;
    min-height: 64px;
}

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

.luf-brand-accent {
    display: inline-block;
    width: 4px;
    height: 32px;
    background: linear-gradient(180deg, #af0200, #e03535);
    border-radius: 2px;
    flex-shrink: 0;
}

.luf-brand-name {
    display: flex;
    align-items: center;
}

.luf-brand-lenovo {
    font-size: 22px;
    font-weight: 900;
    letter-spacing: 4px;
    color: #111;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1;
}

.luf-brand-sep {
    display: inline-block;
    width: 1.5px;
    height: 16px;
    background: #cdd5e0;
    margin: 0 10px;
    flex-shrink: 0;
}

.lenovo-upload-tool {
    font-size: 23px;
    font-weight: 600;
    color: #af0200;
    letter-spacing: 0.3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    line-height: 1;
    margin-left: 0;
}

/* Controls wrapper on right side */
.selectlanguage-div {
    width: auto;
    margin: 0;
    float: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Hidden native select (still used by JS) */
.lang-select-hidden {
    display: none !important;
}

/* Language switcher — flag button group */
.lang-switcher {
    display: flex;
    gap: 2px;
    background: #f2f5f9;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #dde5ef;
}

.ls-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 5px 9px;
    border: none;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    font-size: 12px;
    color: #6a7a8a;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    line-height: 1;
}

.ls-btn:hover {
    background: rgba(13, 92, 145, 0.09);
    color: #0D5C91;
}

.ls-btn.active {
    background: #fff;
    color: #0D5C91;
    font-weight: 700;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12);
}

.tab-content .fields {
    font-size: 14px;
    margin-left: 20px;
    margin-top: 10px;
    margin-right: 15px;
}

.tab-pane table {
    margin-left: 20px;
    width: 100%;
}

.tab-pane table tr {
    height: auto;
    line-height: normal;
}

.tab-pane table tr > td {
    padding: 4px 6px;
    vertical-align: middle;
}

.tab-pane table tr > td:first-child {
    width: 150px;
}

.textstyle {
    width: 250px;
    height: 34px;
    line-height: 34px;
    outline: none;
    border: 1.5px solid #c8d6e5;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 14px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    color: #1a2f45;
    background: #f8fbff;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.textstyle:hover {
    border-color: #7ab3d8;
    background: #f0f7ff;
}
.textstyle:focus {
    border-color: #0D5C91;
    background: #fff;
    outline: 0;
    box-shadow: 0 0 0 3px rgba(13, 92, 145, 0.12);
}

.reqd {
    display: none;
}

.table-content {
    width: 98%;
    border: 1px solid #dde5ef;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(13, 92, 145, 0.06);
}

.table-content tr {
    height: auto;
}

.table-content .td {
    height: 1px; /* enables height:100% on child .messages */
    vertical-align: top;
}

.table-content tr .td .messages {
    height: 100%;
    overflow: auto;
    min-height: 280px;
}

.messages2 {
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-word;
    width: 100%;
}

.messages2 thead {
    background: linear-gradient(90deg, #0D5C91, #1a7cbf);
}

.messages .messages1 {
    height: 100%;
    min-height: 280px;
    text-align: center;
    font-size: 13px;
    color: #aab4c4;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    background: #f9fafc;
}

.messages .messages1::before {
    content: '\01F4C2';
    font-size: 30px;
    opacity: 0.45;
}

.messages .messages2 {
    display: none;
    border: none;
}

.messages .messages2 tr {
    height: 25px;
}

#banner {
    padding: 8px;
}

.messages2 tr.illegal {
    color: #af0200;
}

.messages2 thead tr > td {
    color: #fff;
    font-weight: 600;
    font-size: 12px;
    padding: 8px 6px !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
    letter-spacing: 0.3px;
}

.messages2 tr > td {
    border: 1px solid #e8eef5;
    padding: 5px 6px;
    font-size: 13px;
    color: #2a3a4a;
}

.messages2 tbody tr:hover td {
    background: #f0f7ff;
}

.messages2 tbody tr.illegal:hover td {
    background: #fff5f5;
}

.messages2 tbody td img {
    width: 18px;
    height: 18px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s, transform 0.15s;
    vertical-align: middle;
}

.messages2 tbody td img:hover {
    opacity: 1;
    transform: scale(1.15);
}

.messages2 tr > td:first-child {
    width: 60%;
}

.messages2 tr > td:nth-child(2) {
    width: 15%;
}

.messages2 tr > td:nth-child(3) {
    width: 20%;
}

.messages2 tr > td:last-child {
    width: 52px;
    text-align: center;
}

.filetd .image-div {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.filetd .upload-error {
    height: 40px;
    line-height: 40px;
    font-size: 14px;
}

.filetd .filepath {
    width: 128px;
    height: 28px;
}

.filetd .table1 {
    width: 100%;
    text-align: center;
}

.table1 .note {
    min-width: 10px;
    margin-left: 10px;
    font-size: 14px;
    font-weight:border;
}

.table1 .span-note {
    min-width: 10px;
    font-size: 14px;
}

.terms-footer {
    background-color: #f0f0f0;
    width: 98%;
    margin:0 auto
}

.terms-footer .footer-left {
    text-align: center;
    line-height: 50px;

}

.terms-footer .footer-left p {
    margin-bottom: 0px;
}

.terms-footer .footer-left p span {
    vertical-align: middle;
}

.terms-footer input[type="checkbox"] {
    cursor: pointer;
    margin-left: 5px;
    vertical-align: middle;
    margin-top: 0px;
    width: 15px;
    height: 15px;
}


.BgDiv {
    background-color: rgba(10, 14, 28, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    position: fixed;
    z-index: 10;
    left: 0;
    top: 0;
    display: none;
    width: 100%;
    height: 100%;
    opacity: 1;
}

.BgDivs {
    display: none; /* replaced by progressbarframe orbital */
}

/* =============================================
   PROGRESS BAR FRAME
   ============================================= */
.progressbarframe {
    width: 82%;
    max-width: 860px;
    padding: 0;
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-radius: 18px;
    border: 1px solid rgba(13, 92, 145, 0.15);
    position: fixed;
    display: none;
    z-index: 11;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 20px 60px rgba(13, 92, 145, 0.18), 0 2px 8px rgba(0,0,0,0.08);
    animation: pbfEntrance 0.38s cubic-bezier(.22,.9,.36,1) both;
    overflow: hidden;
}

/* Animated top-border glow sweep */
.progressbarframe::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 200%; height: 3px;
    background: linear-gradient(90deg, transparent 0%, #0D5C91 40%, #5ab0e8 50%, #0D5C91 60%, transparent 100%);
    animation: pbfTopGlow 2.4s ease-in-out infinite;
    z-index: 1;
}

@keyframes pbfEntrance {
    from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes pbfTopGlow {
    0%   { left: -100%; }
    100% { left: 100%; }
}

/* ---- PBF Header ---- */
.pbf-header {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 24px 14px;
    border-bottom: 1px solid rgba(13, 92, 145, 0.1);
}

.pbf-orbital {
    position: relative;
    width: 56px;
    height: 56px;
    flex-shrink: 0;
}

.pbf-orbit-svg {
    width: 56px;
    height: 56px;
    animation: pbfOrbitSpin 1.8s linear infinite;
}

@keyframes pbfOrbitSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

.pbf-orbit-track {
    stroke: rgba(13, 92, 145, 0.18);
}

.pbf-orbit-dot {
    fill: #0D5C91;
    filter: drop-shadow(0 0 4px #0D5C91);
}

.pbf-orbit-dot2 {
    fill: #5ab0e8;
    opacity: 0.7;
    animation: pbfOrbitSpin 1.8s linear infinite reverse;
    transform-origin: 30px 30px;
}

.pbf-cloud-icon {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 20px;
    color: #0D5C91;
    animation: pbfCloudPulse 1.8s ease-in-out infinite;
}

@keyframes pbfCloudPulse {
    0%, 100% { opacity: 0.75; transform: translate(-50%, -50%) scale(1); }
    50%       { opacity: 1;    transform: translate(-50%, -50%) scale(1.1); }
}

.pbf-header-text {
    flex: 1;
}

.pbf-title {
    font-size: 16px;
    font-weight: 700;
    color: #0D5C91;
    line-height: 1.3;
    margin-bottom: 3px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

.pbf-subtitle {
    font-size: 12px;
    color: #7a8da0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* ---- PBF Notes ---- */
.pbf-notes {
    padding: 10px 24px 8px;
    border-bottom: 1px solid rgba(13, 92, 145, 0.07);
}

.pbf-notes .note {
    font-size: 12px;
    color: #4a6070;
    margin-bottom: 4px;
}

.pbf-notes ul {
    font-size: 11.5px;
    color: #6a7a8a;
    padding-left: 18px;
    margin: 0;
    line-height: 1.8;
}

/* ---- Progress bars ---- */
.pbf-progress-wrap,
.progressbarframe .progress {
    height: 32px !important;
    border-radius: 8px;
    background: #e8eef5 !important;
    margin: 14px 24px 0;
    overflow: hidden;
    position: relative;
}

.progressbarframe #file-progress-container {
    padding: 0 24px 18px;
}

.progressbarframe #file-progress-container .progress {
    margin: 8px 0 0 !important;
    height: 26px !important;
    background: #eef2f8 !important;
}

.progressbarframe #total-progress-text-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 0 12px;
    box-sizing: border-box;
    z-index: 2;
}

.progressbarframe .progress-text {
    color: #fff;
    font-weight: 700;
    font-size: 13px;
    z-index: 10;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.progressbarframe #total-progress-container {
    height: 32px !important;
    position: relative;
}

/* Shimmer keyframe for progress bars */
@keyframes pbfBarShimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

.progressbarframe .progress-bar {
    transition: width 0.5s cubic-bezier(.4,0,.2,1), background-color 0.4s ease;
    position: relative;
    height: 100%;
    text-align: center;
    font-size: 13px;
    color: #fff;
    overflow: hidden;
    border-radius: 8px;
}

/* Shimmer sweep overlay */
.progressbarframe .progress-bar::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(255,255,255,0.28) 40%,
        rgba(255,255,255,0.45) 50%,
        rgba(255,255,255,0.28) 60%,
        transparent 100%);
    background-size: 200% 100%;
    animation: pbfBarShimmer 1.8s linear infinite;
}

.progressbarframe #total-progress-container .bg-success {
    background: linear-gradient(90deg, #0a4a78, #0D5C91, #1a8fd4) !important;
    box-shadow: 0 0 12px rgba(13, 92, 145, 0.5);
}

.progressbarframe #file-progress-container .bg-success {
    background: linear-gradient(90deg, #3a8a28, #5db040, #6AC346) !important;
    box-shadow: 0 0 10px rgba(106, 195, 70, 0.45);
}

/* 已完成文件使用独立的紫色，避免与正在上传的绿色混淆 */
.progressbarframe #file-progress-container .bg-complete {
    background: linear-gradient(90deg, #5540b9, #735bd6, #9b83f1) !important;
    box-shadow: 0 0 11px rgba(115, 91, 214, 0.48);
}

.progressbarframe #file-progress-container .bg-complete::after {
    animation: none;
    opacity: 0.16;
}

.progressbarframe #file-progress-container .bg-failed {
    background: linear-gradient(90deg, #b00020, #df0b39, #ff4060) !important;
    box-shadow: 0 0 10px rgba(223, 11, 57, 0.45);
}

.progressbarframe #file-progress-container .file-label {
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    position: absolute;
    left: 12px;
    z-index: 10;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.progressbarframe #file-progress-container .progress-text {
    font-size: 12px;
    font-weight: 700;
    position: absolute;
    right: 12px;
    color: #fff;
    z-index: 10;
    text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.progressbarframe #file-progress-container .progress-bar-text {
    line-height: 26px;
}

/* =============================================
   SUCCESS / RESULT PAGE  (#MyTsuccess)
   ============================================= */
.success-page {
    background-color: #f4f7fb;
    position: absolute;
    z-index: 15;
    left: 0;
    right: 0;
    top: 10px;
    width: 95%;
    height: calc(100% - 10px);
    margin: 0 auto;
    min-width: 720px;
    border: 1px solid #c8c8c8;
    border-radius: 2px;
    box-sizing: border-box;
    overflow: hidden;
    opacity: 1;
    display: none;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
}

/* Success page header — force same full-width as main luf-header */
.success-page .luf-header {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 1;
}

/* Body container */
.sp-body {
    max-width: 100%;
    height: calc(100% - 64px); /* subtract luf-header height */
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-sizing: border-box;
}

.success-page .success-detail,
.success-page .failure-detail {
    width: 100%;
    display: none;
    flex-direction: column;
    gap: 18px;
    overflow: hidden;
}

/* ---- Status banner (success / failed) ---- */
.sp-status-bar {
    display: flex;
    align-items: center;
    gap: 14px;
    border-radius: 12px;
    padding: 14px 20px;
    font-size: 14px;
}

.sp-status-success {
    background: linear-gradient(135deg, #edfbea 0%, #d6f5cf 100%);
    border: 1px solid rgba(106,195,70,0.35);
    box-shadow: 0 2px 10px rgba(106,195,70,0.12);
}

.sp-status-failed {
    background: linear-gradient(135deg, #fff0f0 0%, #ffd9d9 100%);
    border: 1px solid rgba(223,11,57,0.25);
    box-shadow: 0 2px 10px rgba(223,11,57,0.1);
}

.sp-status-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 18px;
    font-weight: 700;
    flex-shrink: 0;
}

.sp-status-success .sp-status-icon {
    background: #6AC346;
    color: #fff;
    box-shadow: 0 2px 8px rgba(106,195,70,0.4);
}

.sp-status-failed .sp-status-icon {
    background: #df0b39;
    color: #fff;
    box-shadow: 0 2px 8px rgba(223,11,57,0.35);
}

.sp-status-text { flex: 1; }

.sp-status-title {
    font-size: 15px;
    font-weight: 700;
    color: #1a2a1a;
    line-height: 1.3;
}

.sp-status-failed .sp-status-title { color: #6b0018; }

.sp-status-sub {
    font-size: 12.5px;
    color: #4a6040;
    margin-top: 2px;
}

.sp-status-failed .sp-status-sub { color: #8a2030; }

.sp-status-img {
    width: 38px;
    height: 38px;
    object-fit: contain;
    opacity: 0.85;
}

/* ---- File result table ---- */
.sp-table-wrap {
    background: #fff;
    border-radius: 12px;
    border: 1px solid #dde5ef;
    box-shadow: 0 2px 12px rgba(13,92,145,0.07);
    overflow: hidden;
}

.success-table {
    overflow-y: auto;
    max-height: calc(100vh - 420px);
    min-height: 80px;
}

.success-table table {
    width: 100%;
    border-collapse: collapse;
    background: transparent;
}

/* Table header row (first tr injected by JS) */
.success-table table tr:first-child {
    background: linear-gradient(90deg, #0D5C91, #1a7cbf);
}

.success-table table tr:first-child > td {
    color: #fff !important;
    font-weight: 600;
    font-size: 12px;
    padding: 9px 12px !important;
    border: none !important;
}

.success-table table tr {
    height: auto;
    line-height: 1.5;
    transition: background 0.15s;
}

.success-table table tr:not(:first-child):hover td {
    background: #f0f7ff;
}

.success-table table tr:not(:first-child):nth-child(even) td {
    background: #f8fbff;
}

.success-table table tr > td {
    border: none;
    border-bottom: 1px solid #edf2f8;
    vertical-align: middle;
    padding: 9px 12px;
    font-size: 13px;
    color: #2a3a50;
}

.success-table table tr > td > img {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.success-table table tr > td:first-child {
    min-width: 44%;
    font-weight: 600;
    color: #1a3050;
}

.success-table table tr > td:nth-child(2) {
    width: 28%;
    color: #4a6070;
}

.success-table table tr > td:nth-child(3) {
    text-align: center;
    width: 12%;
}

/* ---- Action buttons ---- */
.sp-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin: 20px 20px 0  0;
}

.sp-btn {
    display: inline-block;
    padding: 9px 22px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.18s;
    cursor: pointer;
    border: none;
}

.sp-btn-primary {
    background: linear-gradient(135deg, #0D5C91, #1a7cbf);
    color: #fff !important;
    box-shadow: 0 2px 10px rgba(13,92,145,0.25);
}

.sp-btn-primary:hover {
    background: linear-gradient(135deg, #0a4a78, #0D5C91);
    box-shadow: 0 4px 14px rgba(13,92,145,0.38);
    transform: translateY(-1px);
}

.sp-btn-secondary {
    background: #f0f4f8;
    color: #0D5C91 !important;
    border: 1.5px solid #c8d6e5;
}

.sp-btn-secondary:hover {
    background: #e4edf7;
    border-color: #0D5C91;
    transform: translateY(-1px);
}

/* Keep old selectors alive for JS that may toggle display */
.success-detail .success-yes { display: none; }
.success-detail .failure-no  { display: none; }


/* =============================================
   LOADING BAR (upload in-progress status)
   ============================================= */
.loading-bar {
    background: linear-gradient(90deg, #074e82, #0D5C91, #1a7cbf, #0D5C91, #074e82);
    background-size: 300% 100%;
    animation: lbGradShift 2.4s ease-in-out infinite;
    width: 100%;
    height: 52px;
    line-height: 52px;
    border-radius: 10px;
    box-shadow: 0 4px 18px rgba(13, 92, 145, 0.4), 0 0 0 1px rgba(13, 92, 145, 0.15);
    position: relative;
    overflow: hidden;
}

/* Moving particle shimmer */
.loading-bar::after {
    content: '';
    position: absolute;
    top: 0; left: -60%;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent);
    animation: lbShimmer 2s ease-in-out infinite;
    border-radius: 10px;
}

@keyframes lbGradShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes lbShimmer {
    0%   { left: -60%; }
    100% { left: 130%; }
}

.loading-bar .waiting-msg {
    margin-left: 72px;
    line-height: 52px;
    margin-top: 0;
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.3px;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
    position: relative;
    z-index: 2;
}

/* Outer ring */
.loading-animate {
    display: block;
    width: 24px;
    height: 24px;
    position: absolute;
    left: 14px;
    top: 14px;
    border: 2.5px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: progress-load 0.85s linear infinite;
    z-index: 2;
}

/* Inner ring (counter-rotate) */
.loading-animate2 {
    display: block;
    position: absolute;
    width: 14px;
    height: 14px;
    left: 19px;
    top: 19px;
    border: 2px solid rgba(255,255,255,0.25);
    border-bottom-color: #fff;
    border-radius: 50%;
    animation: progress-load2 1.2s linear infinite;
    z-index: 2;
}

/* Trailing glow line */
.loading-animate-line {
    display: block;
    width: 0%;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7));
    left: 0;
    bottom: 0;
    position: absolute;
    border-radius: 0 2px 2px 0;
    animation: progress-load-line 2.4s ease-in-out infinite;
    z-index: 2;
}

@keyframes progress-load {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@-webkit-keyframes progress-load /*Safari and Chrome*/
{
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@keyframes progress-load2 {
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@-webkit-keyframes progress-load2 /*Safari and Chrome*/
{
    from {
        transform: rotate(360deg);
    }

    to {
        transform: rotate(0deg);
    }
}

@keyframes progress-load-line {
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

@-webkit-keyframes progress-load-line /*Safari and Chrome*/
{
    from {
        width: 0%;
    }

    to {
        width: 100%;
    }
}

.myalerts {
    font-size: 15px;
}
.nav-tables {
    table-layout:fixed;
}
.nav-tables tr td{
    white-space:nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fixed-table-body {
    height: auto !important;
    min-height: 550px;
}

/* ---- Nav tabs — pill button group (matches lang-switcher style) ---- */
#lufTab.nav-tabs {
    display: flex;
    align-items: center;
    gap: 3px;
    background: #f2f5f9;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid #dde5ef !important;
    width: fit-content;
    margin: 12px 0 12px 0;
}

#lufTab.nav-tabs > li {
    float: none;
    margin: 0;
}

.tab-icon {
    margin-right: 5px;
    font-style: normal;
    font-size: 13px;
    line-height: 1;
}

#lufTab.nav-tabs > li > a {
    display: flex !important;
    align-items: center;
    gap: 0;
    padding: 15px 14px !important;
    border-radius: 7px !important;
    border: none !important;
    background: transparent !important;
    color: #6a7a8a !important;
    font-weight: 500 !important;
    font-size: 12px !important;
    line-height: 1 !important;
    transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    white-space: nowrap;
    text-decoration: none !important;
}

#lufTab.nav-tabs > li > a b,
#lufTab.nav-tabs > li > a span:not(.tab-icon) {
    font-weight: inherit;
}

#lufTab.nav-tabs > li > a:hover {
    background: rgba(13, 92, 145, 0.09) !important;
    color: #0D5C91 !important;
}

#lufTab.nav-tabs > li > a.active,
#lufTab.nav-tabs > li.active > a {
    background: #fff !important;
    color: #0D5C91 !important;
    font-weight: 700 !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.12) !important;
    border-bottom: none !important;
}

.nav-tabs {
    border-bottom: 1px solid #E3E3E3 !important;
}

.modal-backdrop.show {
    opacity: .5 !important;
}

.modal.show{
    opacity: 1 !important;
}

/* =============================================
   ANIMATED UPLOAD DROP ZONE
   ============================================= */
.filetd {
    vertical-align: top !important;
    padding: 12px !important;
}

.upload-drop-zone {
    border: 2px dashed #a8c4de;
    border-radius: 16px;
    padding: 24px 16px 18px;
    text-align: center;
    background: linear-gradient(160deg, #f5f9ff 0%, #edf3fc 100%);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    min-height: 230px;
}

.upload-drop-zone:hover {
    border-color: #0D5C91;
    box-shadow: 0 0 0 4px rgba(13, 92, 145, 0.09), 0 6px 24px rgba(13, 92, 145, 0.08);
    background: linear-gradient(160deg, #edf4fd 0%, #e4eef9 100%);
}

/* ---- Cloud + arrow SVG animation ---- */
.upload-anim-container {
    position: relative;
    width: 100px;
    height: 90px;
    margin: 0 auto 6px;
    flex-shrink: 0;
}

.upload-anim-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.cloud-path {
    animation: cloudFloat 3.2s ease-in-out infinite;
    transform-origin: center center;
}

@keyframes cloudFloat {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-5px); }
}

.upload-arrow-group {
    animation: arrowRise 1.8s ease-in-out infinite;
    transform-origin: 53px 73px;
}

@keyframes arrowRise {
    0%   { transform: translateY(0);     opacity: 1; }
    35%  { transform: translateY(-12px); opacity: 0.3; }
    36%  { transform: translateY(10px);  opacity: 0; }
    55%  { transform: translateY(10px);  opacity: 0; }
    75%  { transform: translateY(0);     opacity: 1; }
    100% { transform: translateY(0);     opacity: 1; }
}

/* ---- Floating particles ---- */
.upload-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.upload-particles i {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: #0D5C91;
    opacity: 0;
    animation: particleRise 2.6s ease-in infinite;
}

.upload-particles .p1 { width: 5px; height: 5px; left: 16px; top: 56px; animation-delay: 0.0s; }
.upload-particles .p2 { width: 4px; height: 4px; right: 14px; top: 50px; animation-delay: 0.7s; }
.upload-particles .p3 { width: 4px; height: 4px; left: 38px; bottom: 4px; animation-delay: 1.4s; }
.upload-particles .p4 { width: 3px; height: 3px; right: 28px; bottom: 8px; animation-delay: 2.1s; }

@keyframes particleRise {
    0%   { transform: translateY(0)     scale(1);   opacity: 0; }
    10%  { opacity: 0.85; }
    80%  { transform: translateY(-30px) scale(0.3); opacity: 0.3; }
    100% { transform: translateY(-36px) scale(0);   opacity: 0; }
}

/* ---- Drop zone text & button ---- */
.upload-zone-headline {
    font-size: 15px;
    font-weight: 700;
    color: #1a3050;
    margin: 0 0 4px;
    letter-spacing: 0.2px;
}

.upload-zone-sub {
    font-size: 12px;
    color: #8a9ab0;
    margin: 0 0 10px;
}

.upload-browse-btn {
    position: relative;
    display: inline-block;
    background: linear-gradient(135deg, #0D5C91 0%, #1a7cbf 100%);
    color: #fff !important;
    font-size: 13px;
    padding: 9px 24px;
    border-radius: 7px;
    cursor: pointer;
    overflow: hidden;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(13, 92, 145, 0.32);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    margin-bottom: 14px;
}

.upload-browse-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.24), transparent);
    transition: left 0.45s ease;
    pointer-events: none; /* must not intercept clicks meant for the file input */
}

.upload-browse-btn:hover::before { left: 100%; }

.upload-browse-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 16px rgba(13, 92, 145, 0.42);
}

.upload-browse-btn b {
    position: relative;
    z-index: 1;
    font-weight: 700;
    letter-spacing: 0.4px;
    pointer-events: none; /* let clicks pass through text to the file input below */
}

.upload-browse-btn .filepath {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 2; /* must sit above ::before and b so browser registers direct click on input */
}

/* =============================================
   UNIFIED BUTTON STYLE — same as Browse Files
   Targets: Submit / Reset / Send Code /
            FTP Submit / Modal btns / Icon btns
   ============================================= */
a.submit,
a.disabled,
a#ftpSubmit,
button#sendVerifyCode1,
button#sendVerifyCode2,
button#model_submit,
button#my_retry_btn,
a#sucess_logs_submit,
a#sys-download,
a#retry {
    position: relative !important;
    display: inline-block !important;
    background: linear-gradient(135deg, #0D5C91 0%, #1a7cbf 100%) !important;
    color: #fff !important;
    font-size: 13px !important;
    padding: 9px 20px !important;
    border-radius: 7px !important;
    cursor: pointer !important;
    overflow: hidden !important;
    text-decoration: none !important;
    box-shadow: 0 2px 10px rgba(13, 92, 145, 0.32) !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
    border: none !important;
    line-height: normal !important;
    height: auto !important;
    width: auto !important;
    font-weight: 700 !important;
    letter-spacing: 0.4px !important;
    outline: none !important;
    vertical-align: middle !important;
}

/* Shimmer sweep */
a.submit::before,
a#ftpSubmit::before,
button#sendVerifyCode1::before,
button#sendVerifyCode2::before,
button#model_submit::before,
button#my_retry_btn::before,
a#sucess_logs_submit::before,
a#sys-download::before,
a#retry::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.24), transparent);
    transition: left 0.45s ease;
    pointer-events: none;
}
a.submit:hover::before,
a#ftpSubmit:hover::before,
button#sendVerifyCode1:hover::before,
button#sendVerifyCode2:hover::before,
button#model_submit:hover::before,
button#my_retry_btn:hover::before,
a#sucess_logs_submit:hover::before,
a#sys-download:hover::before,
a#retry:hover::before { left: 100%; }

/* Hover lift */
a.submit:hover,
a#ftpSubmit:hover,
button#sendVerifyCode1:hover,
button#sendVerifyCode2:hover,
button#model_submit:hover,
button#my_retry_btn:hover,
a#sucess_logs_submit:hover,
a#sys-download:hover,
a#retry:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 5px 16px rgba(13, 92, 145, 0.42) !important;
    color: #fff !important;
    text-decoration: none !important;
    background: linear-gradient(135deg, #0D5C91 0%, #1a7cbf 100%) !important;
}

/* Disabled / inactive state */
a.disabled {
    background: linear-gradient(135deg, #9db5c8 0%, #b8ccd8 100%) !important;
    box-shadow: 0 1px 4px rgba(100, 120, 140, 0.2) !important;
    cursor: not-allowed !important;
    opacity: 0.72 !important;
}
a.disabled:hover {
    transform: none !important;
    box-shadow: 0 1px 4px rgba(100, 120, 140, 0.2) !important;
    background: linear-gradient(135deg, #9db5c8 0%, #b8ccd8 100%) !important;
}
a.disabled::before { display: none !important; }

/* Icon-only buttons — compact padding */
a#sucess_logs_submit,
a#sys-download,
a#retry {
    padding: 7px 12px !important;
}

/* ---- Error status messages ---- */
.upload-status-msgs {
    width: 100%;
    margin-bottom: 4px;
}

/* Default hidden state (overridden by JS .show()) */
.upload-status-msgs .reqd {
    display: none;
    color: #c0392b;
    font-size: 12px;
    font-weight: 600;
    background: #fef0ee;
    border: 1px solid #f5c6c0;
    border-radius: 5px;
    padding: 5px 12px;
    margin-bottom: 5px;
    /* force block layout when shown */
    box-sizing: border-box;
    text-align: left;
}

/* When JS calls .show() it sets display:inline — override to block via explicit inline style trick */
.upload-status-msgs span[style*="display"]:not([style*="display: none"]) {
    display: block !important;
    width: 100%;
}

/* ---- Upload notes box ---- */
.upload-notes-box {
    width: 100%;
    background: rgba(13, 92, 145, 0.04);
    border: 1px solid #ccdff0;
    border-radius: 8px;
    padding: 10px 14px;
    text-align: left;
    box-sizing: border-box;
}

.upload-notes-title {
    font-size: 12px;
    color: #0D5C91;
    font-weight: 700;
    margin-bottom: 6px;
    letter-spacing: 0.2px;
}

.upload-notes-list {
    margin: 0;
    padding: 0 0 0 18px;
    list-style: disc;
}

.upload-notes-list li {
    font-size: 11.5px;
    color: #4a5a6a;
    line-height: 1.65;
}

/* =============================================
   DARK MODE
   ============================================= */

/* -- Theme toggle button (light mode default) -- */
.theme-toggle-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1.5px solid #c8d6e5;
    background: #fff;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin-right: 8px;
    padding: 0;
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}

.theme-toggle-btn:hover {
    background: #f0f7ff;
    border-color: #0D5C91;
    box-shadow: 0 0 0 3px rgba(13, 92, 145, 0.1);
}

/* -- Dark theme overrides -- */
[data-theme="dark"] body {
    background: #0f1117;
    color: #dce6f5;
}

[data-theme="dark"] .div {
    border-color: #2e3450;
}

[data-theme="dark"] h1.lenovo-upload-tool {
    color: #d07070;
}

[data-theme="dark"] .upgrade {
    background-color: #1c1a05 !important;
    border-color: #4a3a00 !important;
    color: #d4b84a !important;
}

[data-theme="dark"] .upgrade a {
    color: #5aadee !important;
}

[data-theme="dark"] #lufTab.nav-tabs {
    background: #1e2235 !important;
    border-color: #2e3a5a !important;
}

[data-theme="dark"] #lufTab.nav-tabs > li > a {
    background: transparent !important;
    border: none !important;
    color: #8a9ab8 !important;
}

[data-theme="dark"] #lufTab.nav-tabs > li > a:hover {
    background: rgba(90, 143, 212, 0.12) !important;
    color: #7ab0e8 !important;
}

[data-theme="dark"] #lufTab.nav-tabs > li > a.active,
[data-theme="dark"] #lufTab.nav-tabs > li.active > a {
    background: #252840 !important;
    color: #7ab0e8 !important;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4) !important;
    border-bottom: none !important;
}

[data-theme="dark"] .nav-tabs {
    border-bottom-color: #2e3450 !important;
}

[data-theme="dark"] .tab-content {
    background: #1a1d2e;
}

[data-theme="dark"] .tab-pane table tr > td {
    color: #dce6f5;
}

[data-theme="dark"] .textstyle {
    background: #222537 !important;
    border-color: #3a4260 !important;
    color: #dce6f5 !important;
}

[data-theme="dark"] .textstyle:hover {
    background: #262b45 !important;
    border-color: #5a7aaa !important;
}

[data-theme="dark"] .textstyle:focus {
    background: #1e2338 !important;
    border-color: #5a8fd4 !important;
    box-shadow: 0 0 0 3px rgba(90, 143, 212, 0.2) !important;
}

[data-theme="dark"] .selectlanguage-div #selectlanguage {
    background-color: #222537 !important;
    border-color: #3a4260 !important;
    color: #dce6f5 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238aabcc' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E") !important;
}

[data-theme="dark"] .theme-toggle-btn {
    background: #222537;
    border-color: #3a4260;
    color: #e0e6f5;
}

[data-theme="dark"] .theme-toggle-btn:hover {
    background: #2a3050;
    border-color: #5a8fd4;
}

[data-theme="dark"] .table-content {
    border-color: #2e3450 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .td {
    background-color: #1a1d2e !important;
    border-color: #2e3450 !important;
}

[data-theme="dark"] .filetd {
    background: #171a2c !important;
    border-color: #2e3450 !important;
}

[data-theme="dark"] .messages .messages1 {
    background: #14172a !important;
    color: #6a7a9a !important;
}

[data-theme="dark"] .messages2 thead {
    background: linear-gradient(90deg, #1e2a50, #243670) !important;
}

[data-theme="dark"] .messages2 thead tr > td {
    border-color: rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .messages2 tr > td {
    background: #1a1d2e;
    border-color: #252c45 !important;
    color: #c0cce0 !important;
}

[data-theme="dark"] .messages2 tbody tr:hover td {
    background: #1f2540 !important;
}

[data-theme="dark"] .messages2 tbody tr.illegal td {
    color: #f07070 !important;
}

[data-theme="dark"] .upload-drop-zone {
    background: linear-gradient(160deg, #1a1f38, #171c32) !important;
    border-color: #3a4470 !important;
}

[data-theme="dark"] .upload-drop-zone:hover {
    background: linear-gradient(160deg, #1e2440, #1a2038) !important;
    border-color: #5a7aba !important;
    box-shadow: 0 0 0 4px rgba(90, 122, 186, 0.12) !important;
}

[data-theme="dark"] .upload-zone-headline {
    color: #d0dcf0;
}

[data-theme="dark"] .upload-zone-sub {
    color: #6a7a9a;
}

[data-theme="dark"] .cloud-path {
    fill: #1e304a;
    stroke: #5a8fd4;
}

[data-theme="dark"] .upload-arrow-group line,
[data-theme="dark"] .upload-arrow-group polyline {
    stroke: #5a8fd4;
}

[data-theme="dark"] .upload-particles i {
    background: #5a8fd4;
}

[data-theme="dark"] .upload-notes-box {
    background: rgba(90, 143, 212, 0.07);
    border-color: #2e3d60;
}

[data-theme="dark"] .upload-notes-title {
    color: #7ab0e8;
}

[data-theme="dark"] .upload-notes-list li {
    color: #8a9ab8;
}

[data-theme="dark"] .upload-browse-btn {
    background: linear-gradient(135deg, #1e3d60, #2a5a8c) !important;
}

[data-theme="dark"] .upload-status-msgs .reqd {
    background: #2a1518;
    border-color: #6a2020;
    color: #f5a0a0;
}

[data-theme="dark"] .terms-footer {
    background-color: #141728 !important;
    border-top: 1px solid #2e3450;
    color: #8a9ab8;
}

[data-theme="dark"] .terms-footer a {
    color: #7ab0e8 !important;
}

[data-theme="dark"] .terms-footer .footer-left p span {
    color: #9aaccc;
}

[data-theme="dark"] .BgDiv,
[data-theme="dark"] .BgDivs {
    background-color: rgba(4, 6, 16, 0.72);
}

/* ---- Dark mode: progressbarframe ---- */
[data-theme="dark"] .progressbarframe {
    background: rgba(22, 26, 45, 0.97) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-color: rgba(90, 176, 232, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(90, 176, 232, 0.15) !important;
    color: #dce6f5 !important;
}

/* 确保 Bootstrap .card-body 等不注入浅色背景 */
[data-theme="dark"] .progressbarframe .card-body,
[data-theme="dark"] .progressbarframe .notification-body,
[data-theme="dark"] .progressbarframe .pbf-notes {
    background: transparent !important;
    color: #dce6f5 !important;
}

/* NOTE 区域文字 */
[data-theme="dark"] #uploading-process-notes {
    color: #b8ccde !important;
}

[data-theme="dark"] #uploading-process-notes p.note {
    color: #a8bfd4 !important;
}

[data-theme="dark"] #uploading-process-notes b {
    color: #dce6f5 !important;
}

[data-theme="dark"] #uploading-process-notes li {
    color: #8aaccc !important;
}

[data-theme="dark"] .progressbarframe::before {
    background: linear-gradient(90deg, transparent 0%, #5ab0e8 40%, #a6d8ff 50%, #5ab0e8 60%, transparent 100%);
}

[data-theme="dark"] .pbf-header {
    border-bottom-color: rgba(90, 176, 232, 0.12) !important;
}

[data-theme="dark"] .pbf-orbit-track { stroke: rgba(90, 176, 232, 0.2); }
[data-theme="dark"] .pbf-orbit-dot   { fill: #5ab0e8; filter: drop-shadow(0 0 5px #5ab0e8); }
[data-theme="dark"] .pbf-cloud-icon  { color: #5ab0e8; }

[data-theme="dark"] .pbf-title    { color: #7ed0ff !important; }
[data-theme="dark"] .pbf-subtitle { color: #6a8eae !important; }

[data-theme="dark"] .pbf-notes {
    border-bottom-color: rgba(90, 176, 232, 0.08) !important;
}

[data-theme="dark"] .pbf-notes .note { color: #8aabcc !important; }
[data-theme="dark"] .pbf-notes ul    { color: #7090a8 !important; }

/* 进度条轨道背景 */
[data-theme="dark"] .pbf-progress-wrap,
[data-theme="dark"] .progressbarframe .progress {
    background: #111828 !important;
}

[data-theme="dark"] .progressbarframe #file-progress-container .progress {
    background: #111828 !important;
}

/* 进度条文字 */
[data-theme="dark"] .progressbarframe .progress-text,
[data-theme="dark"] .progressbarframe #file-progress-container .progress-text,
[data-theme="dark"] .progressbarframe .file-label {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.5) !important;
}

/* 进度条填充色 */
[data-theme="dark"] .progressbarframe #total-progress-container .bg-success {
    background: linear-gradient(90deg, #0a3a60, #0D5C91, #2498d0) !important;
    box-shadow: 0 0 14px rgba(13, 92, 145, 0.6);
}

[data-theme="dark"] .progressbarframe #file-progress-container .bg-success {
    background: linear-gradient(90deg, #1e5c10, #3da02a, #6AC346) !important;
    box-shadow: 0 0 12px rgba(106, 195, 70, 0.5);
}

[data-theme="dark"] .progressbarframe #file-progress-container .bg-complete {
    background: linear-gradient(90deg, #49349f, #7254d1, #aa91ff) !important;
    box-shadow: 0 0 13px rgba(148, 119, 238, 0.55);
}

[data-theme="dark"] .progressbarframe #file-progress-container .bg-failed {
    background: linear-gradient(90deg, #7a001a, #c0052e, #ff3355) !important;
    box-shadow: 0 0 12px rgba(255, 51, 85, 0.5);
}

/* ---- Dark mode: loading-bar ---- */
[data-theme="dark"] .loading-bar {
    background: linear-gradient(90deg, #041830, #073a6e, #0D5C91, #073a6e, #041830) !important;
    background-size: 300% 100% !important;
    box-shadow: 0 4px 20px rgba(13, 92, 145, 0.55), 0 0 0 1px rgba(90, 176, 232, 0.2) !important;
}

[data-theme="dark"] .success-page {
    background-color: #0f1220;
    color: #dce6f5;
    border-color: #2a2f4a;
}

[data-theme="dark"] .success-page .success-detail,
[data-theme="dark"] .success-page .failure-detail {
    background-color: transparent;
}

/* Status banners */
[data-theme="dark"] .sp-status-success {
    background: linear-gradient(135deg, #0d2a12 0%, #112e16 100%);
    border-color: rgba(106,195,70,0.3);
}

[data-theme="dark"] .sp-status-failed {
    background: linear-gradient(135deg, #2a0812 0%, #320a16 100%);
    border-color: rgba(223,11,57,0.3);
}

[data-theme="dark"] .sp-status-title { color: #dce6f5; }
[data-theme="dark"] .sp-status-failed .sp-status-title { color: #ffb3c0; }
[data-theme="dark"] .sp-status-sub { color: #7aab70; }
[data-theme="dark"] .sp-status-failed .sp-status-sub { color: #d07080; }

/* Table */
[data-theme="dark"] .sp-table-wrap {
    background: #161a2e;
    border-color: #252a44;
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}

[data-theme="dark"] .success-table table tr:first-child {
    background: linear-gradient(90deg, #0a3a60, #0D5C91);
}

[data-theme="dark"] .success-table table tr:not(:first-child):nth-child(even) td {
    background: #1a1f36;
}

[data-theme="dark"] .success-table table tr:not(:first-child):hover td {
    background: #1e2845;
}

[data-theme="dark"] .success-table table tr > td {
    border-bottom-color: #252a44;
    color: #b8cce0;
}

[data-theme="dark"] .success-table table tr > td:first-child { color: #d0e4f5; }
[data-theme="dark"] .success-table table tr > td:nth-child(2) { color: #8aaccc; }

/* Buttons */
[data-theme="dark"] .sp-btn-primary {
    background: linear-gradient(135deg, #0D5C91, #2498d0);
    box-shadow: 0 2px 10px rgba(13,92,145,0.4);
}

[data-theme="dark"] .sp-btn-secondary {
    background: #1a2035;
    color: #7ed0ff !important;
    border-color: #2e4060;
}

[data-theme="dark"] .sp-btn-secondary:hover {
    background: #1f2845;
    border-color: #5ab0e8;
}

[data-theme="dark"] .nav-tables > li > a {
    color: #9ab8cc !important;
}

[data-theme="dark"] .nav-tables > li.active > a {
    color: #dce6f5 !important;
    background: #232738 !important;
}

[data-theme="dark"] #ftp_content input {
    background: #222537 !important;
    border-color: #3a4260 !important;
    color: #dce6f5 !important;
}

/* -- Dark mode: header -- */
[data-theme="dark"] .luf-header {
    background: #14172a;
    border-bottom-color: #2a2f4a;
}

[data-theme="dark"] .luf-brand-lenovo {
    color: #e8ecf5;
}

[data-theme="dark"] .luf-brand-sep {
    background: #3a4260;
}

[data-theme="dark"] .lenovo-upload-tool {
    color: #d07070;
}

[data-theme="dark"] .luf-brand-accent {
    background: linear-gradient(180deg, #af0200, #e03535);
}

[data-theme="dark"] .lang-switcher {
    background: #1e2235;
    border-color: #2e3a5a;
}

[data-theme="dark"] .ls-btn {
    color: #8a9ab8;
}

[data-theme="dark"] .ls-btn:hover {
    background: rgba(90, 143, 212, 0.12);
    color: #7ab0e8;
}

[data-theme="dark"] .ls-btn.active {
    background: #252840;
    color: #7ab0e8;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.4);
}

/* -- Dark mode: Bootstrap alert-warning -- */
[data-theme="dark"] .alert.alert-warning {
    background: linear-gradient(135deg, #141e30 0%, #111828 100%) !important;
    border-left-color: #3a6fa8 !important;
    color: #9ab8d8 !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .alert.alert-warning .fields {
    color: #9ab8d8 !important;
}

[data-theme="dark"] span.alert-warning {
    background-color: transparent !important;
    border: none !important;
    color: #f5a030 !important;
    font-weight: 600;
}

/* -- Dark mode: SweetAlert2 (v11) popup -- */

/* Backdrop overlay */
[data-theme="dark"] .swal2-container {
    background-color: rgba(0, 0, 0, 0.72) !important;
}

/* Popup box */
[data-theme="dark"] .swal2-popup {
    background: #1e2235 !important;
    color: #dce6f5 !important;
    border: 1px solid #2e3a5a;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6) !important;
}

/* Title */
[data-theme="dark"] .swal2-title {
    color: #dce6f5 !important;
}

/* Body / html content */
[data-theme="dark"] .swal2-html-container {
    color: #b0c0dc !important;
}

/* Close button "x" */
[data-theme="dark"] .swal2-close {
    color: #8a9ab8 !important;
}
[data-theme="dark"] .swal2-close:hover {
    color: #dce6f5 !important;
}

/* Confirm button */
[data-theme="dark"] .swal2-confirm {
    background-color: #1a5c9a !important;
    color: #fff !important;
    border: none !important;
    box-shadow: 0 2px 10px rgba(13, 92, 145, 0.4) !important;
}
[data-theme="dark"] .swal2-confirm:hover {
    background-color: #2272b8 !important;
}
[data-theme="dark"] .swal2-confirm:focus {
    box-shadow: 0 0 0 3px rgba(90, 143, 212, 0.4) !important;
}

/* Cancel button */
[data-theme="dark"] .swal2-cancel {
    background-color: #3a3d50 !important;
    color: #c0cce0 !important;
    border: none !important;
}
[data-theme="dark"] .swal2-cancel:hover {
    background-color: #4a4e65 !important;
}

/* Deny button */
[data-theme="dark"] .swal2-deny {
    background-color: #5a1a1a !important;
    color: #f5a0a0 !important;
}
[data-theme="dark"] .swal2-deny:hover {
    background-color: #741f1f !important;
}

/* Timer progress bar */
[data-theme="dark"] .swal2-timer-progress-bar {
    background: rgba(90, 143, 212, 0.55) !important;
}

/* Validation / input error message */
[data-theme="dark"] .swal2-validation-message {
    background: #2a1010 !important;
    color: #f5a0a0 !important;
    border-color: #6a2020 !important;
}

/* Text input inside popup */
[data-theme="dark"] .swal2-input,
[data-theme="dark"] .swal2-textarea,
[data-theme="dark"] .swal2-select {
    background: #252840 !important;
    color: #dce6f5 !important;
    border-color: #3a4260 !important;
}

/* Icons — success */
[data-theme="dark"] .swal2-icon.swal2-success {
    border-color: #3a8f4a !important;
    color: #4caf60 !important;
}
[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(60, 143, 74, 0.3) !important;
}
[data-theme="dark"] .swal2-icon.swal2-success [class^="swal2-success-circular-line"],
[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-fix {
    background: #1e2235 !important;
}
[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-line-tip,
[data-theme="dark"] .swal2-icon.swal2-success .swal2-success-line-long {
    background-color: #4caf60 !important;
}

/* Icons — error */
[data-theme="dark"] .swal2-icon.swal2-error {
    border-color: #8f2a2a !important;
    color: #f07070 !important;
}
[data-theme="dark"] .swal2-icon.swal2-error .swal2-x-mark-line-left,
[data-theme="dark"] .swal2-icon.swal2-error .swal2-x-mark-line-right {
    background-color: #f07070 !important;
}

/* Icons — warning */
[data-theme="dark"] .swal2-icon.swal2-warning {
    border-color: #9a6a00 !important;
    color: #f5c030 !important;
}

/* Icons — info */
[data-theme="dark"] .swal2-icon.swal2-info {
    border-color: #1a5c9a !important;
    color: #5a9fd4 !important;
}

/* Icons — question */
[data-theme="dark"] .swal2-icon.swal2-question {
    border-color: #3a5a8a !important;
    color: #6aaad8 !important;
}

/* Toast variant */
[data-theme="dark"] .swal2-container.swal2-toast-shown .swal2-popup {
    background: #232840 !important;
    border: 1px solid #2e3a5a !important;
    color: #dce6f5 !important;
}

/* Footer in popup */
[data-theme="dark"] .swal2-footer {
    border-top-color: #2e3a5a !important;
    color: #8a9ab8 !important;
}

/* Loader dots */
[data-theme="dark"] .swal2-loader {
    border-color: #5a8fd4 transparent #5a8fd4 transparent !important;
}

/* -- Dark mode: unified buttons -- */
[data-theme="dark"] a.submit,
[data-theme="dark"] a#ftpSubmit,
[data-theme="dark"] button#sendVerifyCode1,
[data-theme="dark"] button#sendVerifyCode2,
[data-theme="dark"] button#model_submit,
[data-theme="dark"] button#my_retry_btn,
[data-theme="dark"] a#sucess_logs_submit,
[data-theme="dark"] a#sys-download,
[data-theme="dark"] a#retry {
    background: linear-gradient(135deg, #1e3d60, #2a5a8c) !important;
    box-shadow: 0 2px 10px rgba(10, 40, 80, 0.4) !important;
}
[data-theme="dark"] a.submit:hover,
[data-theme="dark"] a#ftpSubmit:hover,
[data-theme="dark"] button#sendVerifyCode1:hover,
[data-theme="dark"] button#sendVerifyCode2:hover,
[data-theme="dark"] button#model_submit:hover,
[data-theme="dark"] button#my_retry_btn:hover,
[data-theme="dark"] a#sucess_logs_submit:hover,
[data-theme="dark"] a#sys-download:hover,
[data-theme="dark"] a#retry:hover {
    background: linear-gradient(135deg, #1e3d60, #2a5a8c) !important;
    box-shadow: 0 5px 16px rgba(10, 40, 80, 0.55) !important;
}
[data-theme="dark"] a.disabled {
    background: linear-gradient(135deg, #2a3545, #3a4a58) !important;
    opacity: 0.55 !important;
    box-shadow: none !important;
}


/* =============================================
   2026 DEEP BLUE UPLOAD WORKSPACE
   ============================================= */
:root {
    --luf-navy-950: #061426;
    --luf-navy-900: #09213a;
    --luf-navy-800: #0d3152;
    --luf-cyan: #1aa7ec;
    --luf-cyan-soft: #66c8ff;
    --luf-panel: #ffffff;
    --luf-surface: #f4f8fc;
    --luf-border: #cbdced;
    --luf-text: #132f48;
    --luf-muted: #6c8296;
}

body {
    min-height: 100%;
    background:
        radial-gradient(circle at 8% 3%, rgba(26, 167, 236, 0.13), transparent 28%),
        linear-gradient(180deg, #eaf3fb 0, #f7fafe 360px, #edf4fa 100%);
}

#filedrag.div {
    width: min(1180px, calc(100% - 32px));
    min-width: 0;
    margin: 18px auto 40px;
    border: 1px solid rgba(20, 74, 116, 0.18);
    border-radius: 18px;
    overflow: visible;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 22px 70px rgba(7, 41, 70, 0.16);
}

#filedrag > .luf-header {
    border-radius: 17px 17px 0 0;
    background: linear-gradient(105deg, var(--luf-navy-950), var(--luf-navy-800));
    border-bottom: 1px solid rgba(102, 200, 255, 0.28);
}

#filedrag .luf-brand-lenovo,
#filedrag .lenovo-upload-tool { color: #fff; }
#filedrag .luf-brand-sep { background: rgba(255,255,255,.35); }
#filedrag .theme-toggle-btn { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.24); color: #fff; }
#filedrag .lang-switcher { background: rgba(2,15,29,.35); border-color: rgba(102,200,255,.18); }
#filedrag .ls-btn { color: #a9cde7; }
#filedrag .ls-btn:hover { color: #fff; background: rgba(26,167,236,.18); }
#filedrag .ls-btn.active { color: #06213a; background: #dff4ff; }

#lufTab.nav-tabs {
    margin: 0;
    padding: 12px 18px 0;
    background: linear-gradient(180deg, #0b2b49, #0d365b);
    border: 0;
}

#lufTab.nav-tabs > li > a {
    color: #9fc6df;
    border: 0 !important;
    border-radius: 10px 10px 0 0;
    margin-right: 5px;
    padding: 12px 18px;
    background: transparent;
}

#lufTab.nav-tabs > li > a:hover { color: #fff; background: rgba(255,255,255,.08); }
#lufTab.nav-tabs > li.active > a,
#lufTab.nav-tabs > li > a.active {
    color: #073154 !important;
    background: #f5f9fd !important;
    box-shadow: 0 -4px 18px rgba(2, 18, 32, .18);
}

.tab-content { padding: 18px 22px 4px; background: #f5f9fd; }

.tech-form-card {
    position: relative;
    padding: 22px;
    margin-bottom: 18px;
    border: 1px solid var(--luf-border);
    border-radius: 14px;
    background:
        linear-gradient(135deg, rgba(26,167,236,.055), transparent 42%),
        var(--luf-panel);
    box-shadow: 0 8px 28px rgba(13, 49, 82, .08);
    overflow: visible;
}

.tech-form-card::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20px;
    bottom: 20px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: linear-gradient(var(--luf-cyan), #155d9b);
    box-shadow: 0 0 14px rgba(26,167,236,.45);
}

.tech-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 26px; }
.tech-field { min-width: 0; position: relative; }
.tech-field-wide { grid-column: 1 / -1; }
.tech-field label { display: block; margin: 0 0 7px; color: var(--luf-text); font-size: 13px; letter-spacing: .2px; }
.tech-field reqIcon { margin-left: 4px; color: #e63f5b; }
.tech-field .textstyle { width: 100%; height: 42px; box-sizing: border-box; border-radius: 8px; background: #f9fcff; }
.case-number-wrapper { width: 100%; }
.email-verify-control { display: flex; align-items: stretch; gap: 9px; }
.email-verify-control .textstyle { flex: 1; min-width: 0; }
.email-verify-control button { flex: 0 0 auto; white-space: nowrap; }
.verification-field { display: grid; grid-template-columns: 180px minmax(240px, 1fr); gap: 8px 14px; align-items: center; padding: 14px; border: 1px solid #cce6f7; border-radius: 10px; background: #f3faff; }
.verification-field label { margin: 0; }
.verification-field .inline-validation { grid-column: 2; margin: 0; font-size: 12px; }

.upload-workspace { padding: 18px 22px 24px; background: #f5f9fd; }
.upload-workspace-grid { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(330px, .82fr); gap: 20px; align-items: stretch; }
.file-preview-panel,
.filetd {
    min-width: 0;
    border: 1px solid var(--luf-border);
    border-radius: 15px;
    background: var(--luf-panel);
    box-shadow: 0 8px 26px rgba(13,49,82,.08);
}
.file-preview-panel { display: flex; flex-direction: column; overflow: hidden; min-height: 410px; }
.file-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 17px 20px; color: #fff; background: linear-gradient(110deg, var(--luf-navy-950), #0b3d66); border-bottom: 1px solid rgba(102,200,255,.25); }
.file-panel-header h3 { margin: 2px 0 0; color: #fff; font-size: 17px; font-weight: 650; }
.file-panel-kicker { color: var(--luf-cyan-soft); font-size: 10px; font-weight: 800; letter-spacing: 1.6px; }
.file-selection-summary { padding: 5px 10px; border: 1px solid rgba(102,200,255,.38); border-radius: 999px; background: rgba(26,167,236,.12); color: #d8f3ff; font-size: 12px; font-weight: 700; }
.messages { flex: 1; min-height: 0; }
.messages .messages1 { min-height: 335px; background: radial-gradient(circle, #f8fcff, #eef5fb); color: #8094a7; }
.messages .messages1::before { content: '\2601'; display: grid; place-items: center; width: 58px; height: 58px; border: 1px solid #cde1f1; border-radius: 18px; background: #fff; color: #2a8dcc; font-size: 30px; box-shadow: 0 8px 24px rgba(14,72,112,.1); opacity: 1; }
.file-card-list { display: none; max-height: 430px; padding: 14px; overflow-y: auto; background: #edf4fa; }
.file-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) auto;
    gap: 13px;
    align-items: center;
    padding: 13px;
    margin-bottom: 10px;
    border: 1px solid #d2e1ed;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 4px 14px rgba(9,46,77,.06);
    transition: transform .2s, border-color .2s, box-shadow .2s;
}
.file-card:last-child { margin-bottom: 0; }
.file-card:hover { transform: translateY(-1px); border-color: #75bde7; box-shadow: 0 8px 22px rgba(9,65,103,.12); }
.file-card.is-error { border-color: #f0b9c2; background: #fffafb; }
.file-thumbnail { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 11px; overflow: hidden; background: linear-gradient(145deg, #0b355a, #12659b); color: #e1f6ff; font-size: 11px; font-weight: 800; letter-spacing: .5px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); }
.file-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.file-card-main { min-width: 0; }
.file-card-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #17344d; font-size: 13px; font-weight: 700; }
.file-card-meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 5px; color: var(--luf-muted); font-size: 11px; }
.file-status { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.file-status::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #35a96b; box-shadow: 0 0 0 3px rgba(53,169,107,.12); }
.file-card.is-error .file-status { color: #c3314d; }
.file-card.is-error .file-status::before { background: #e14b64; box-shadow: 0 0 0 3px rgba(225,75,100,.12); }
.file-card.is-uploading .file-status::before { background: var(--luf-cyan); box-shadow: 0 0 0 3px rgba(26,167,236,.14); animation: cardStatusPulse 1.2s infinite; }
@keyframes cardStatusPulse { 50% { transform: scale(1.35); opacity: .55; } }
.file-card-progress { height: 5px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #e5edf4; }
.file-card-progress-bar { height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #13669e, var(--luf-cyan)); transition: width .3s ease; }
.file-card-delete { display: grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid #d8e3ed; border-radius: 9px; background: #f7fafc; color: #73899d; cursor: pointer; font-size: 18px; line-height: 1; transition: .2s; }
.file-card-delete:hover { color: #d72f4e; border-color: #efb6c0; background: #fff3f5; }
.file-card-delete:disabled { opacity: .4; cursor: not-allowed; }
.filetd { padding: 12px; }
.filetd .upload-drop-zone { min-height: 384px; height: 100%; box-sizing: border-box; border-color: #7eb6d8; background: radial-gradient(circle at 50% 10%, #fbfdff, #e9f3fb 80%); }
#span-note-2-b, #span-note-3-b { color: #b5223f; }

.terms-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; width: 100%; margin: 18px auto 0; padding: 13px 16px; box-sizing: border-box; border: 1px solid #d1e0ec; border-radius: 12px; background: #fff; }
.terms-footer .footer-left { line-height: normal; text-align: left; }
.terms-footer .footer-left:last-child { flex: 0 0 auto; }

[data-theme="dark"] body { background: radial-gradient(circle at 10% 2%, #0b3559, transparent 30%), #040d18; }
[data-theme="dark"] #filedrag.div { background: #091827; border-color: #193c5a; box-shadow: 0 24px 80px rgba(0,0,0,.5); }
[data-theme="dark"] .tab-content,
[data-theme="dark"] .upload-workspace { background: #081725; }
[data-theme="dark"] .tech-form-card,
[data-theme="dark"] .file-preview-panel,
[data-theme="dark"] .filetd,
[data-theme="dark"] .terms-footer { background: #0d2033 !important; border-color: #234763 !important; }
[data-theme="dark"] .tech-field label,
[data-theme="dark"] .file-card-name { color: #d9edfa; }
[data-theme="dark"] .verification-field { background: #0a2a43; border-color: #245578; }
[data-theme="dark"] .file-card-list { background: #071522; }
[data-theme="dark"] .file-card { background: #10283d; border-color: #234763; box-shadow: none; }
[data-theme="dark"] .file-card:hover { border-color: #3d8cba; }
[data-theme="dark"] .file-card.is-error { background: #2a1720; border-color: #713147; }
[data-theme="dark"] .file-card-meta { color: #85a3b8; }
[data-theme="dark"] .file-card-progress { background: #1e3b51; }
[data-theme="dark"] .file-card-delete { background: #122c42; border-color: #2b506b; color: #89a9be; }
[data-theme="dark"] .messages .messages1 { background: radial-gradient(circle, #102a40, #091a29) !important; color: #7895aa !important; }
[data-theme="dark"] .messages .messages1::before { background: #102a40; border-color: #28516f; }

@media (max-width: 860px) {
    #filedrag.div { width: min(100% - 18px, 1180px); margin-top: 9px; }
    .luf-header { flex-wrap: wrap; gap: 12px; }
    .tech-form-grid,
    .upload-workspace-grid { grid-template-columns: 1fr; }
    .file-preview-panel { min-height: 320px; }
    .messages .messages1 { min-height: 245px; }
    .verification-field { grid-template-columns: 1fr; }
    .verification-field .inline-validation { grid-column: 1; }
    .terms-footer { flex-direction: column; align-items: stretch; }
    .terms-footer .footer-left { text-align: center; }
}

@media (max-width: 560px) {
    #filedrag.div { width: 100%; margin: 0; border-radius: 0; }
    #filedrag > .luf-header { border-radius: 0; }
    .luf-header { padding: 15px 12px; }
    .luf-brand-lenovo { font-size: 17px; letter-spacing: 2px; }
    .lenovo-upload-tool { font-size: 17px; }
    .ls-btn { padding: 5px 6px; }
    .ls-btn span { display: none; }
    #lufTab.nav-tabs { padding: 8px 8px 0; }
    #lufTab.nav-tabs > li > a { padding: 10px 9px; font-size: 11px; }
    .tab-content,
    .upload-workspace { padding-left: 10px; padding-right: 10px; }
    .tech-form-card { padding: 16px 13px; }
    .email-verify-control { flex-direction: column; }
    .file-card { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 9px; padding: 10px; }
    .file-thumbnail { width: 46px; height: 46px; }
    .upload-workspace-grid { gap: 12px; }
}

/* jQuery .show() writes display:block; restore the intended verification grid. */
.verification-field[style*="display: block"] { display: grid !important; }


/* =============================================
   LIGHT THEME + BALANCED FILE WORKSPACE FIX
   Explicit selectors prevent the deep-blue base from leaking into light mode.
   ============================================= */
html:not([data-theme="dark"]) #filedrag > .luf-header {
    background: linear-gradient(135deg, #ffffff 0%, #f0f7fd 100%);
    border-bottom: 1px solid #d5e4f0;
    box-shadow: 0 5px 18px rgba(23, 75, 112, 0.06);
}

html:not([data-theme="dark"]) #filedrag .luf-brand-lenovo { color: #172f45; }
html:not([data-theme="dark"]) #filedrag .lenovo-upload-tool { color: #a7202c; }
html:not([data-theme="dark"]) #filedrag .luf-brand-sep { background: #c4d4e1; }
html:not([data-theme="dark"]) #filedrag .theme-toggle-btn {
    color: #42637c;
    background: #ffffff;
    border-color: #c9dbe9;
}
html:not([data-theme="dark"]) #filedrag .theme-toggle-btn:hover {
    color: #0d6eaa;
    background: #eaf6fd;
    border-color: #84bddf;
}
html:not([data-theme="dark"]) #filedrag .lang-switcher {
    background: #eaf2f8;
    border-color: #d0dfeb;
}
html:not([data-theme="dark"]) #filedrag .ls-btn { color: #617b8f; }
html:not([data-theme="dark"]) #filedrag .ls-btn:hover {
    color: #0d659d;
    background: #dceef9;
}
html:not([data-theme="dark"]) #filedrag .ls-btn.active {
    color: #0b5f97;
    background: #ffffff;
    box-shadow: 0 2px 7px rgba(26, 83, 122, 0.12);
}

html:not([data-theme="dark"]) #lufTab.nav-tabs {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 18px;
    gap: 6px;
    border: 0 !important;
    border-bottom: 1px solid #d9e6f0 !important;
    border-radius: 0;
    background: #f4f8fc;
}
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a {
    margin: 0;
    padding: 11px 16px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    color: #657f93 !important;
    background: transparent !important;
}
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a:hover {
    color: #0d659d !important;
    border-color: #d0e4f2 !important;
    background: #e9f4fb !important;
}
html:not([data-theme="dark"]) #lufTab.nav-tabs > li.active > a,
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a.active {
    color: #0b5f97 !important;
    border-color: #bfd9ea !important;
    background: #ffffff !important;
    box-shadow: 0 3px 10px rgba(18, 79, 119, 0.11) !important;
}

html:not([data-theme="dark"]) .file-panel-header {
    color: #173d58;
    background: linear-gradient(135deg, #f8fcff 0%, #e9f5fc 100%);
    border-bottom: 1px solid #cfe1ee;
}
html:not([data-theme="dark"]) .file-panel-header h3 { color: #173d58; }
html:not([data-theme="dark"]) .file-panel-kicker { color: #1785c3; }
html:not([data-theme="dark"]) .file-selection-summary {
    color: #0b6fa9;
    background: #ffffff;
    border-color: #b8d9eb;
    box-shadow: 0 2px 7px rgba(19, 101, 151, 0.09);
}

/* Clear the legacy .filetd { width: 40% } from fromstyle.css. */
.upload-workspace-grid {
    width: 100%;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px;
}
.upload-workspace-grid > .file-preview-panel,
.upload-workspace-grid > .filetd {
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box;
}
.upload-workspace-grid > .filetd { padding: 12px !important; }
.filetd .upload-drop-zone {
    width: 100%;
    min-width: 0;
    padding-left: 24px;
    padding-right: 24px;
}
.upload-browse-btn {
    min-width: 160px;
    box-sizing: border-box;
}
.upload-notes-box { max-width: none; }

/* Reassert the intended deep theme after the high-specificity light/base rules. */
html[data-theme="dark"] #filedrag > .luf-header {
    background: linear-gradient(105deg, #061426, #0d3152);
    border-bottom-color: rgba(102, 200, 255, 0.28);
}
html[data-theme="dark"] #filedrag .luf-brand-lenovo,
html[data-theme="dark"] #filedrag .lenovo-upload-tool { color: #ffffff; }
html[data-theme="dark"] #filedrag .luf-brand-sep { background: rgba(255,255,255,.35); }
html[data-theme="dark"] #lufTab.nav-tabs {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 18px;
    border: 0 !important;
    border-bottom: 1px solid #2e3a5a !important;
    border-radius: 0;
    background: #1e2235 !important;
}
html[data-theme="dark"] .file-panel-header {
    color: #ffffff;
    background: linear-gradient(110deg, #061426, #0b3d66);
    border-bottom-color: rgba(102,200,255,.25);
}
html[data-theme="dark"] .file-panel-header h3 { color: #ffffff; }
html[data-theme="dark"] .file-panel-kicker { color: #66c8ff; }
html[data-theme="dark"] .file-selection-summary {
    color: #d8f3ff;
    background: rgba(26,167,236,.12);
    border-color: rgba(102,200,255,.38);
}

@media (max-width: 860px) {
    .upload-workspace-grid { grid-template-columns: 1fr; }
    .upload-workspace-grid > .file-preview-panel,
    .upload-workspace-grid > .filetd { width: 100% !important; }
}


/* =============================================
   REFERENCE-ALIGNED HEADER, TABS AND FORM FIELDS
   ============================================= */
#filedrag.div {
    width: calc(100% - 32px);
    max-width: 95%;
}

#filedrag > .luf-header {
    min-height: 84px;
    padding: 18px 30px;
    box-sizing: border-box;
}

#filedrag .luf-brand {
    min-width: 380px;
    gap: 14px;
}

#filedrag .luf-brand-accent { display: none; }

.brand-upload-mark {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    flex: 0 0 48px;
    color: #16a9ed;
    filter: drop-shadow(0 5px 12px rgba(22, 169, 237, .25));
}
.brand-upload-mark svg { display: block; width: 48px; height: 48px; }
#filedrag .luf-brand-name { min-width: 0; }
#filedrag .luf-brand-lenovo {
    font-size: 27px;
    line-height: 1;
    letter-spacing: 1px;
    text-transform: none;
}
#filedrag .luf-brand-sep { height: 24px; margin: 0 14px; }
#filedrag .lenovo-upload-tool {
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}

/* Full-width pill tabs with a clear active switching state. */
#lufTab.nav-tabs,
html:not([data-theme="dark"]) #lufTab.nav-tabs,
html[data-theme="dark"] #lufTab.nav-tabs {
    width: calc(100% - 56px);
    min-height: 66px;
    margin: 18px 28px !important;
    padding: 6px !important;
    box-sizing: border-box;
    display: flex;
    align-items: stretch;
    gap: 8px;
    border: 1px solid #cbddea !important;
    border-radius: 999px;
}
#lufTab.nav-tabs > li {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
}
#lufTab.nav-tabs > li.hidden,
#lufTab.nav-tabs > li[style*="display: none"] { display: none !important; }
#lufTab.nav-tabs > li > a,
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a,
html[data-theme="dark"] #lufTab.nav-tabs > li > a {
    width: 100%;
    min-height: 52px;
    margin: 0 !important;
    padding: 11px 20px !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 11px;
    border: 1px solid transparent !important;
    border-radius: 999px !important;
    font-size: 16px !important;
    line-height: 1.25 !important;
    font-weight: 750 !important;
    letter-spacing: .2px;
    transition: color .22s ease, background .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
#lufTab.nav-tabs > li > a b,
#lufTab.nav-tabs > li > a span:not(.tab-icon) {
    font-size: inherit;
    font-weight: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#lufTab .tab-icon {
    display: inline-grid;
    place-items: center;
    min-width: 24px;
    margin: 0;
    color: currentColor;
    font-size: 0;
    line-height: 1;
}
#lufTab .tab-icon::before {
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    font-size: 22px;
    line-height: 1;
}
#lufTab a[href="#tab_CaseNumber"] .tab-icon::before { content: "☷"; }
#lufTab a[href="#tab_MachineType"] .tab-icon::before { content: "♙"; }
#lufTab a[href="#tab_OnlyLogsFile"] .tab-icon::before { content: "⇧"; }
#lufTab a[href="#tab_SucessFile"] .tab-icon::before { content: "✓"; }

html:not([data-theme="dark"]) #lufTab.nav-tabs {
    background: #edf5fa;
    border-color: #cbddea !important;
    box-shadow: inset 0 1px 3px rgba(22, 73, 106, .05);
}
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a {
    color: #617b8f !important;
    background: transparent !important;
}
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a:hover {
    color: #0a659c !important;
    background: rgba(255, 255, 255, .72) !important;
    border-color: #c4dfef !important;
}
html:not([data-theme="dark"]) #lufTab.nav-tabs > li.active > a,
html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a.active {
    color: #ffffff !important;
    background: linear-gradient(135deg, #0d669e, #1297d2) !important;
    border-color: #1ca3dc !important;
    box-shadow: 0 7px 18px rgba(13, 102, 158, .26), inset 0 0 0 1px rgba(255,255,255,.12) !important;
}

html[data-theme="dark"] #lufTab.nav-tabs {
    background: #071729 !important;
    border-color: #123b59 !important;
    box-shadow: inset 0 1px 10px rgba(0,0,0,.32), 0 0 0 1px rgba(22,169,237,.04);
}
html[data-theme="dark"] #lufTab.nav-tabs > li > a {
    color: #69849a !important;
    background: transparent !important;
}
html[data-theme="dark"] #lufTab.nav-tabs > li > a:hover {
    color: #b8d9ed !important;
    background: rgba(13, 92, 145, .18) !important;
    border-color: rgba(22, 169, 237, .22) !important;
}
html[data-theme="dark"] #lufTab.nav-tabs > li.active > a,
html[data-theme="dark"] #lufTab.nav-tabs > li > a.active {
    color: #ecf9ff !important;
    background: linear-gradient(135deg, #073d65, #07588a) !important;
    border-color: #087ab6 !important;
    box-shadow: inset 0 0 18px rgba(13, 134, 195, .18), 0 5px 16px rgba(0,0,0,.28) !important;
}

/* Label icons and reference-sized field typography. */
.tech-form-card { padding: 26px; border-radius: 18px; }
.tech-form-grid { gap: 24px 32px; }
.tech-field label {
    display: flex;
    align-items: center;
    min-height: 22px;
    margin: 0 0 9px;
    font-size: 15px;
    line-height: 1.3;
    font-weight: 750;
    letter-spacing: .2px;
}
.tech-field label b { font-size: inherit; font-weight: inherit; }
.tech-field label::before {
    display: inline-grid;
    place-items: center;
    width: 21px;
    margin-right: 5px;
    color: #13a7e8;
    font-family: "Segoe UI Symbol", "Arial Unicode MS", sans-serif;
    font-size: 18px;
    line-height: 1;
    font-weight: 800;
    text-shadow: 0 0 10px rgba(19, 167, 232, .2);
}
.tech-field label[for^="casenumber"]::before { content: "#"; }
.tech-field label[for^="machinetype"]::before { content: "▦"; }
.tech-field label[for^="serialnumber"]::before { content: "▥"; }
.tech-field label[for^="emailaddress"]::before { content: "✉"; }
.tech-field label[for^="verifyCode"]::before { content: "✓"; }
.tech-field reqIcon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    margin-left: 5px;
    border-radius: 999px;
    color: #e44c65;
    background: rgba(228, 76, 101, .1);
    font-size: 13px;
    font-weight: 900;
}
.tech-field .textstyle {
    width: 100%;
    height: 52px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1px solid #bcd3e3;
    border-radius: 13px;
    color: #17364e;
    background: #f7fbfe;
    font-size: 15px;
    line-height: 52px;
    font-weight: 650;
    letter-spacing: .1px;
    box-shadow: inset 0 1px 2px rgba(16, 63, 94, .035);
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease, transform .2s ease;
}
.tech-field .textstyle::placeholder {
    color: #8196a8;
    font-size: 14px;
    font-weight: 450;
    opacity: 1;
}
.tech-field .textstyle:hover {
    border-color: #75b8dc;
    background: #ffffff;
}
.tech-field .textstyle:focus {
    border-color: #16a5e5;
    background: #ffffff;
    box-shadow: 0 0 0 4px rgba(22, 165, 229, .13), inset 0 1px 2px rgba(16, 63, 94, .03);
}
.email-verify-control { gap: 12px; }
.email-verify-control button#sendVerifyCode1,
.email-verify-control button#sendVerifyCode2 {
    min-width: 122px;
    min-height: 52px;
    padding-left: 18px !important;
    padding-right: 18px !important;
    border-radius: 11px !important;
    font-size: 14px !important;
}

html[data-theme="dark"] .tech-form-card {
    background: #0c1423;
    border-color: #152c43;
    box-shadow: inset 0 0 0 1px rgba(22,169,237,.025), 0 16px 36px rgba(0,0,0,.18);
}
html[data-theme="dark"] .tech-field label { color: #7f9ab0; }
html[data-theme="dark"] .tech-field .textstyle {
    color: #dbeaf5 !important;
    background: #061727 !important;
    border-color: #12314a !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.28);
}
html[data-theme="dark"] .tech-field .textstyle::placeholder { color: #587188; }
html[data-theme="dark"] .tech-field .textstyle:hover {
    background: #081c2e !important;
    border-color: #1a5478 !important;
}
html[data-theme="dark"] .tech-field .textstyle:focus {
    background: #071b2d !important;
    border-color: #15a4e3 !important;
    box-shadow: 0 0 0 4px rgba(21,164,227,.14), inset 0 1px 3px rgba(0,0,0,.24) !important;
}

@media (max-width: 900px) {
    #filedrag .luf-brand { min-width: 0; }
    #lufTab.nav-tabs,
    html:not([data-theme="dark"]) #lufTab.nav-tabs,
    html[data-theme="dark"] #lufTab.nav-tabs {
        width: calc(100% - 28px);
        margin: 14px !important;
    }
    #lufTab.nav-tabs > li > a,
    html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a,
    html[data-theme="dark"] #lufTab.nav-tabs > li > a {
        padding-left: 12px !important;
        padding-right: 12px !important;
        font-size: 14px !important;
    }
}

@media (max-width: 620px) {
    #filedrag > .luf-header { min-height: 72px; padding: 14px 16px; }
    .brand-upload-mark,
    .brand-upload-mark svg { width: 40px; height: 40px; }
    .brand-upload-mark { flex-basis: 40px; }
    #filedrag .luf-brand-lenovo { font-size: 21px; }
    #filedrag .luf-brand-sep { margin: 0 8px; }
    #filedrag .lenovo-upload-tool { font-size: 15px; }
    #lufTab.nav-tabs,
    html:not([data-theme="dark"]) #lufTab.nav-tabs,
    html[data-theme="dark"] #lufTab.nav-tabs {
        width: calc(100% - 20px);
        min-height: 58px;
        margin: 10px !important;
        gap: 3px;
    }
    #lufTab.nav-tabs > li > a,
    html:not([data-theme="dark"]) #lufTab.nav-tabs > li > a,
    html[data-theme="dark"] #lufTab.nav-tabs > li > a {
        min-height: 44px;
        padding: 8px !important;
        font-size: 12px !important;
        gap: 5px;
    }
    #lufTab .tab-icon::before { font-size: 17px; }
    .tech-form-card { padding: 18px 14px; }
    .tech-field label { font-size: 14px; }
    .tech-field .textstyle { height: 48px; line-height: 48px; font-size: 14px; }
}


/* Verification code follows the same half-width field layout as Case Number. */
.tech-form-grid > .verification-field {
    grid-column: auto;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}
.tech-form-grid > .verification-field[style*="display: block"] {
    display: block !important;
}
.tech-form-grid > .verification-field .textstyle { width: 100%; }
.tech-form-grid > .verification-field .inline-validation {
    display: block;
    width: 100%;
    margin: 8px 0 0;
    box-sizing: border-box;
    grid-column: auto;
}
html[data-theme="dark"] .tech-form-grid > .verification-field {
    background: transparent;
    border: 0;
}

@media (max-width: 860px) {
    .tech-form-grid > .verification-field { grid-column: 1 / -1; }
}


/* =============================================
   TOP-ALIGNED RESULT PAGE WITH PREVIEW CARDS
   ============================================= */
.success-page {
    position: fixed;
    inset: 0;
    width: calc(100% - 32px);
    max-width: 95%;
    min-width: 0;
    height: 100vh;
    margin: 0 auto;
    border: 0;
    border-radius: 0;
    overflow-x: hidden;
    overflow-y: auto;
    background: #edf4fa;
}
.success-page .luf-header {
    position: sticky;
    top: 0;
    z-index: 20;
    min-height: 84px;
    padding: 18px 30px;
    background: linear-gradient(135deg, #ffffff, #f0f7fd);
    border-bottom: 1px solid #d5e4f0;
    box-shadow: 0 5px 18px rgba(23,75,112,.08);
}
.success-page .luf-brand { min-width: 380px; gap: 14px; }
.success-page .luf-brand-accent { display: none; }
.success-page .luf-brand-lenovo {
    color: #172f45;
    font-size: 27px;
    line-height: 1;
    letter-spacing: 1px;
}
.success-page .luf-brand-sep { height: 24px; margin: 0 14px; background: #c4d4e1; }
.success-page .lenovo-upload-tool {
    color: #a7202c;
    font-size: 19px;
    line-height: 1.2;
    font-weight: 700;
    white-space: nowrap;
}
.success-page .sp-body {
    width: 100%;
    height: auto;
    min-height: calc(100vh - 84px);
    margin: 0 auto;
    padding: 24px 28px 36px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    box-sizing: border-box;
}
.success-page #success.success-detail {
    width: 100%;
    margin: 0;
    flex-direction: column;
    gap: 16px;
    overflow: visible;
}
.success-page .loading-bar,
.success-page .success-yes,
.success-page .failure-no,
.success-page .sp-table-wrap,
.success-page .sp-actions { flex: 0 0 auto; width: 100%; box-sizing: border-box; }
.success-page .sp-status-bar {
    min-height: 72px;
    padding: 16px 20px;
    border-radius: 14px;
}
.success-page .sp-table-wrap {
    overflow: hidden;
    border: 1px solid #cbddec;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 10px 30px rgba(13,49,82,.09);
}
.success-result-panel { width: 100%; min-width: 0; }
.result-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 72px;
    padding: 14px 20px;
    box-sizing: border-box;
    color: #173d58;
    background: linear-gradient(135deg, #f8fcff, #e9f5fc);
    border-bottom: 1px solid #cfe1ee;
}
.result-panel-kicker {
    display: block;
    color: #1785c3;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.result-panel-title {
    margin: 3px 0 0;
    color: inherit;
    font-size: 18px;
    line-height: 1.25;
    font-weight: 750;
}
.result-file-count {
    display: inline-grid;
    place-items: center;
    min-width: 38px;
    height: 30px;
    padding: 0 10px;
    border: 1px solid #b8d9eb;
    border-radius: 999px;
    color: #0b6fa9;
    background: #ffffff;
    font-size: 12px;
    font-weight: 800;
    box-sizing: border-box;
}
.success-result-list {
    max-height: calc(100vh - 380px);
    min-height: 96px;
    padding: 14px;
    overflow-y: auto;
    box-sizing: border-box;
    background: #edf4fa;
}
.result-file-card {
    grid-template-columns: 56px minmax(0, 1fr) 38px;
    min-height: 78px;
    margin-bottom: 10px;
}
.result-file-card:last-child { margin-bottom: 0; }
.result-file-card .file-card-progress-bar { width: 100%; }
.result-file-card.is-complete .file-card-progress-bar {
    background: linear-gradient(90deg, #26995c, #43c779);
}
.result-file-card.is-error .file-card-progress-bar {
    background: linear-gradient(90deg, #bd2845, #e7556c);
}
.result-file-card.is-uploading .file-card-progress-bar {
    background: linear-gradient(90deg, #13669e, #1aa7ec);
}
.result-file-state-mark {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #ffffff;
    background: #35a96b;
    font-size: 18px;
    line-height: 1;
    font-weight: 900;
    box-shadow: 0 5px 12px rgba(53,169,107,.22);
}
.result-file-card.is-error .result-file-state-mark {
    background: #df3d5a;
    box-shadow: 0 5px 12px rgba(223,61,90,.22);
}
.result-file-card.is-uploading .result-file-state-mark {
    background: #178bca;
    box-shadow: 0 5px 12px rgba(23,139,202,.22);
    animation: cardStatusPulse 1.2s infinite;
}
.success-page .sp-actions {
    justify-content: flex-end;
    margin: 0;
    padding-top: 2px;
}
.success-page .sp-btn { min-height: 42px; padding: 11px 22px; box-sizing: border-box; }

html[data-theme="dark"] .success-page { background: #07111f; }
html[data-theme="dark"] .success-page .luf-header {
    background: linear-gradient(105deg, #061426, #0d3152);
    border-bottom-color: rgba(102,200,255,.28);
    box-shadow: 0 5px 18px rgba(0,0,0,.24);
}
html[data-theme="dark"] .success-page .luf-brand-lenovo,
html[data-theme="dark"] .success-page .lenovo-upload-tool { color: #ffffff; }
html[data-theme="dark"] .success-page .luf-brand-sep { background: rgba(255,255,255,.35); }
html[data-theme="dark"] .success-page .sp-table-wrap {
    background: #0d2033;
    border-color: #234763;
    box-shadow: 0 14px 34px rgba(0,0,0,.28);
}
html[data-theme="dark"] .result-panel-header {
    color: #ffffff;
    background: linear-gradient(110deg, #061426, #0b3d66);
    border-bottom-color: rgba(102,200,255,.25);
}
html[data-theme="dark"] .result-panel-kicker { color: #66c8ff; }
html[data-theme="dark"] .result-file-count {
    color: #d8f3ff;
    background: rgba(26,167,236,.12);
    border-color: rgba(102,200,255,.38);
}
html[data-theme="dark"] .success-result-list { background: #071522; }
html[data-theme="dark"] .result-file-card {
    background: #10283d;
    border-color: #234763;
    box-shadow: none;
}
html[data-theme="dark"] .result-file-card .file-card-name { color: #d9edfa; }
html[data-theme="dark"] .result-file-card .file-card-meta { color: #85a3b8; }
html[data-theme="dark"] .result-file-card .file-card-progress { background: #1e3b51; }

@media (max-width: 760px) {
    .success-page { width: 100%; }
    .success-page .luf-header { min-height: 72px; padding: 14px 16px; }
    .success-page .luf-brand { min-width: 0; }
    .success-page .luf-brand-lenovo { font-size: 21px; }
    .success-page .luf-brand-sep { margin: 0 8px; }
    .success-page .lenovo-upload-tool { font-size: 15px; }
    .success-page .sp-body { min-height: calc(100vh - 72px); padding: 14px 10px 24px; }
    .success-page .sp-status-bar { min-height: 64px; padding: 13px; }
    .result-panel-header { min-height: 62px; padding: 12px 14px; }
    .success-result-list { max-height: none; padding: 10px; }
    .result-file-card { grid-template-columns: 46px minmax(0, 1fr) 34px; min-height: 68px; }
    .result-file-card .file-thumbnail { width: 46px; height: 46px; }
    .result-file-state-mark { width: 30px; height: 30px; font-size: 15px; }
    .success-page .sp-actions { justify-content: stretch; }
    .success-page .sp-btn { flex: 1 1 100%; text-align: center; }
}


/* =============================================
   COMPACT TLS / BROWSER COMPATIBILITY BADGE
   ============================================= */
.compatibility-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    min-height: 42px;
    padding: 0 15px;
    box-sizing: border-box;
    border: 1px solid #82bedf;
    border-radius: 999px;
    color: #315a73;
    background: rgba(235, 247, 253, .92);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.55), 0 5px 14px rgba(15,94,139,.08);
    font-size: 12px;
    line-height: 1;
    font-weight: 700;
    white-space: nowrap;
}
.compatibility-shield {
    display: inline-grid;
    place-items: center;
    width: 21px;
    height: 21px;
    flex: 0 0 21px;
    color: #13a8e8;
    filter: drop-shadow(0 2px 5px rgba(19,168,232,.24));
}
.compatibility-shield svg { display: block; width: 100%; height: 100%; }
.compatibility-state { color: inherit; letter-spacing: .1px; }
.compatibility-dot {
    width: 5px;
    height: 5px;
    flex: 0 0 5px;
    border-radius: 50%;
    background: #168fc9;
    box-shadow: 0 0 0 3px rgba(22,143,201,.1);
}
.compatibility-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 0 4px;
    color: #0872aa !important;
    border-bottom: 1px dashed rgba(8,114,170,.45);
    text-decoration: none !important;
    transition: color .18s ease, border-color .18s ease;
}
.compatibility-link:hover,
.compatibility-link:focus {
    color: #034d78 !important;
    border-bottom-color: currentColor;
    outline: none;
}
.compatibility-external { color: #14a8e7; font-size: 15px; line-height: 1; }

html[data-theme="dark"] .compatibility-badge {
    color: #90a9bd;
    background: rgba(6, 37, 59, .78);
    border-color: #0b5d83;
    box-shadow: inset 0 0 18px rgba(20,155,218,.055), 0 7px 18px rgba(0,0,0,.16);
}
html[data-theme="dark"] .compatibility-shield { color: #20b8f4; }
html[data-theme="dark"] .compatibility-dot {
    background: #168fc9;
    box-shadow: 0 0 0 3px rgba(22,143,201,.1), 0 0 8px rgba(22,143,201,.28);
}
html[data-theme="dark"] .compatibility-link { color: #1ea4e0 !important; border-bottom-color: rgba(30,164,224,.45); }
html[data-theme="dark"] .compatibility-link:hover,
html[data-theme="dark"] .compatibility-link:focus { color: #72d2fa !important; }

@media (max-width: 1100px) {
    #filedrag .luf-brand { min-width: 300px; }
    .compatibility-badge { padding: 0 12px; gap: 7px; }
}
@media (max-width: 900px) {
    .compatibility-link-text { display: none; }
    .compatibility-link { border-bottom: 0; padding: 0; }
}
@media (max-width: 620px) {
    .compatibility-badge {
        order: 3;
        width: 100%;
        min-height: 38px;
        justify-content: center;
        margin-top: 4px;
    }
    .compatibility-link-text { display: inline; }
}


/* =============================================
   COMPACT VERTICAL RHYTHM
   Keep component sizes readable while reducing section whitespace.
   ============================================= */
#banner:empty {
    padding: 0;
}

#lufTab.nav-tabs,
html:not([data-theme="dark"]) #lufTab.nav-tabs,
html[data-theme="dark"] #lufTab.nav-tabs {
    margin: 10px 28px !important;
}

.tab-content {
    padding: 8px 22px 0;
}

.alert.alert-warning {
    margin-bottom: 8px !important;
}

.tech-form-card {
    margin-bottom: 10px;
}

.upload-workspace {
    padding-top: 8px;
    padding-bottom: 14px;
}

.upload-workspace-grid + br {
    display: none;
}

.terms-footer {
    margin-top: 10px;
}

@media (max-width: 900px) {
    #lufTab.nav-tabs,
    html:not([data-theme="dark"]) #lufTab.nav-tabs,
    html[data-theme="dark"] #lufTab.nav-tabs {
        margin: 8px 14px !important;
    }
}

@media (max-width: 860px) {
    .upload-workspace-grid {
        gap: 12px;
    }
}

@media (max-width: 620px) {
    #lufTab.nav-tabs,
    html:not([data-theme="dark"]) #lufTab.nav-tabs,
    html[data-theme="dark"] #lufTab.nav-tabs {
        margin: 7px 10px !important;
    }

    .tab-content,
    .upload-workspace {
        padding-top: 7px;
    }
}


/* =============================================
   MANAGEMENT TABS — SFTP ACCESS + SUCCESS LOGS
   Scoped overrides for Bootstrap Table and the legacy management forms.
   ============================================= */
html:not([data-theme="dark"]) body {
    background: #edf4fa;
}

html[data-theme="dark"] body {
    background: #040d18;
}

#tab_OnlyLogsFile,
#tab_SucessFile {
    min-height: 420px;
    padding-bottom: 16px;
    color: #17364e;
}

.management-card,
.management-page-heading,
.management-filter-card,
.management-table-card {
    box-sizing: border-box;
    border: 1px solid #cbddea;
    border-radius: 16px;
    background: #ffffff;
    box-shadow: 0 9px 28px rgba(13, 68, 105, .08);
}

.management-section-header,
.management-page-heading,
.management-table-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.management-section-header {
    padding: 18px 22px 15px;
    border-bottom: 1px solid #d9e7f1;
    background: linear-gradient(135deg, #f9fcff, #edf7fd);
    border-radius: 15px 15px 0 0;
}

.management-page-heading {
    margin: 0 0 10px;
    padding: 16px 20px;
    background: linear-gradient(135deg, #ffffff, #eef8fd);
}

.management-page-heading.compact {
    margin-bottom: 10px;
}

.management-kicker {
    display: block;
    margin-bottom: 3px;
    color: #1687c4;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 850;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

.management-section-header h2,
.management-page-heading h2,
.management-table-header h3 {
    margin: 0;
    color: #173d58;
    font-weight: 750;
    letter-spacing: .1px;
}

.management-section-header h2,
.management-page-heading h2 {
    font-size: 20px;
}

.management-section-header p,
.management-page-heading p {
    margin: 5px 0 0;
    color: #6d8396;
    font-size: 13px;
    line-height: 1.5;
}

.management-header-icon {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    flex: 0 0 44px;
    border: 1px solid #bcdcec;
    border-radius: 13px;
    color: #1288c7;
    background: #ffffff;
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 5px 15px rgba(16, 118, 174, .12);
}

/* SFTP access card */
#tab_OnlyLogsFile > .alert {
    margin-bottom: 10px !important;
}

#tab_OnlyLogsFile #ftp_content.management-card {
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.sftp-login-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
    padding: 20px 22px;
}

.management-field,
.management-filter-field {
    min-width: 0;
}

.management-field > label,
.management-filter-field > label {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    min-height: 22px;
    margin: 0 0 8px;
    color: #31536c;
    font-size: 13px;
    line-height: 1.35;
    font-weight: 750;
}

.management-field > label::before,
.management-filter-field > label::before {
    content: '';
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: #19a4e5;
    box-shadow: 0 0 0 4px rgba(25, 164, 229, .1);
}

.management-field reqIcon {
    display: inline-grid;
    place-items: center;
    width: 17px;
    height: 17px;
    margin-left: 5px;
    border-radius: 50%;
    color: #dc405d !important;
    background: rgba(220, 64, 93, .1);
    font-size: 12px;
}

#ftp_content .management-field > input.textstyle,
#ftp_content .management-captcha-control > input.textstyle,
.management-filter-field > .form-control {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px;
    margin: 0 !important;
    padding: 0 14px !important;
    box-sizing: border-box;
    border: 1px solid #bad2e3 !important;
    border-radius: 11px !important;
    color: #17364e;
    background: #f7fbfe !important;
    font-size: 14px;
    line-height: 48px !important;
    box-shadow: inset 0 1px 2px rgba(15, 58, 89, .035);
    transition: border-color .2s, background .2s, box-shadow .2s;
}

#ftp_content .management-field > input.textstyle:focus,
#ftp_content .management-captcha-control > input.textstyle:focus,
.management-filter-field > .form-control:focus {
    border-color: #16a5e5 !important;
    background: #ffffff !important;
    box-shadow: 0 0 0 4px rgba(22, 165, 229, .13) !important;
}

.management-captcha-control {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 92px;
    gap: 9px;
}

#ftp_content #ftpValidate {
    width: 100% !important;
}

.captcha-refresh {
    display: grid;
    place-items: center;
    height: 48px;
    padding: 4px 7px;
    border: 1px solid #bad2e3;
    border-radius: 11px;
    background: #edf7fd;
    cursor: pointer;
    transition: border-color .2s, box-shadow .2s, transform .2s;
}

.captcha-refresh:hover {
    border-color: #1a9ad8;
    box-shadow: 0 0 0 3px rgba(26, 154, 216, .11);
    transform: translateY(-1px);
}

.captcha-refresh img {
    display: block;
    max-width: 100%;
    max-height: 36px;
}

.management-card-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 22px;
    border-top: 1px solid #d9e7f1;
    background: #f7fbfe;
}

.management-card-actions #ftpSubmit {
    min-width: 112px;
    padding: 11px 24px !important;
    text-align: center;
}

.management-field .field-error-inline,
.management-filter-field .field-error-inline {
    display: inline-flex;
    align-items: center;
    width: auto;
    margin: 0 0 0 8px;
    padding: 3px 8px;
    border: 1px solid #efb5c0;
    border-radius: 999px;
    color: #c4334f !important;
    background: #fff1f4;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.25;
}

/* Management filters */
#tab_OnlyLogsFile > .tb-container,
#tab_SucessFile {
    width: 100%;
    overflow: visible;
}

.management-filter-card {
    display: block !important;
    width: 100%;
    margin: 0 0 10px !important;
    padding: 16px 18px !important;
}

.management-filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(140px, 1fr));
    gap: 13px 15px;
    align-items: end;
}

.management-pending-filter .management-filter-grid {
    grid-template-columns: minmax(240px, 1fr) auto;
}

.management-filter-field > label.control-label {
    padding: 0;
    text-align: left;
}

.management-filter-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    min-height: 42px;
}

.management-pending-filter .management-filter-actions {
    grid-column: auto;
}

.management-filter-actions .dropdown {
    display: inline-block;
}

#tab_OnlyLogsFile #query_submit,
#tab_SucessFile #sucess_logs_submit,
#tab_SucessFile #sys-download,
#tab_SucessFile #retry {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 40px;
    padding: 9px 15px !important;
    border-radius: 10px !important;
}

.management-action-text {
    font-size: 13px;
    font-weight: 750;
}

#tab_SucessFile .dropdown-menu {
    min-width: 190px !important;
    margin-top: 8px;
    padding: 7px;
    border: 1px solid #cbddea;
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(8, 49, 80, .18);
}

#tab_SucessFile .dropdown-menu > li > a {
    padding: 9px 11px;
    border-radius: 7px;
    color: #31536c !important;
    background: transparent !important;
    font-size: 13px;
}

#tab_SucessFile .dropdown-menu > li > a:hover {
    color: #0b6fa9 !important;
    background: #eaf6fd !important;
}

/* Bootstrap Table card */
.management-table-card {
    position: relative;
    overflow: hidden;
}

.management-table-header {
    min-height: 58px;
    padding: 13px 18px;
    border-bottom: 1px solid rgba(114, 191, 231, .24);
    background: linear-gradient(105deg, #082540, #0c4b75);
}

.management-table-header h3 {
    color: #ffffff;
    font-size: 16px;
}

.management-table-header .management-kicker {
    color: #71d2ff;
}

#tab_OnlyLogsFile .management-table-card .fixed-table-toolbar {
    min-height: 56px;
    margin: 0;
    padding: 9px 14px;
    border-bottom: 1px solid #d9e7f1;
    background: #f7fbfe;
}

#tab_OnlyLogsFile #toolbar {
    margin: 0;
}

#tab_OnlyLogsFile #addCnAndSnSubmit {
    min-height: 38px;
    padding: 8px 15px;
    border: 0;
    border-radius: 9px;
    background: linear-gradient(135deg, #0d669e, #149bd5);
    box-shadow: 0 5px 14px rgba(13, 102, 158, .22);
    font-size: 13px;
    font-weight: 750;
}

#tab_OnlyLogsFile .bootstrap-table,
#tab_SucessFile .bootstrap-table,
#tab_OnlyLogsFile .fixed-table-container,
#tab_SucessFile .fixed-table-container {
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

#tab_OnlyLogsFile .bootstrap-table table,
#tab_SucessFile .bootstrap-table table,
#tab_OnlyLogsFile .fixed-table-container table,
#tab_SucessFile .fixed-table-container table {
    width: 100% !important;
    margin: 0 !important;
    border-collapse: separate;
    border-spacing: 0;
    table-layout: fixed;
}

#tab_OnlyLogsFile .fixed-table-body,
#tab_SucessFile .fixed-table-body {
    height: auto !important;
    min-height: 260px;
    overflow-x: auto;
    background: #ffffff;
}

#tab_OnlyLogsFile .fixed-table-container thead th,
#tab_SucessFile .fixed-table-container thead th {
    height: 44px;
    padding: 0 !important;
    border: 0 !important;
    border-right: 1px solid rgba(255,255,255,.11) !important;
    color: #eaf8ff;
    background: linear-gradient(180deg, #0b3e67, #082e4d) !important;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .15px;
    vertical-align: middle;
}

#tab_OnlyLogsFile .fixed-table-container thead th .th-inner,
#tab_SucessFile .fixed-table-container thead th .th-inner {
    padding: 12px 10px;
    line-height: 20px;
    white-space: nowrap;
}

#tab_OnlyLogsFile .fixed-table-container tbody td,
#tab_SucessFile .fixed-table-container tbody td {
    height: 43px;
    padding: 10px !important;
    border: 0 !important;
    border-bottom: 1px solid #e1ebf3 !important;
    border-right: 1px solid #edf3f7 !important;
    color: #31536c;
    background: transparent;
    font-size: 12px;
    vertical-align: middle;
}

#tab_OnlyLogsFile .fixed-table-container tbody > tr:nth-child(even),
#tab_SucessFile .fixed-table-container tbody > tr:nth-child(even) {
    background: #f7fbfe;
}

#tab_OnlyLogsFile .fixed-table-container tbody > tr:hover,
#tab_SucessFile .fixed-table-container tbody > tr:hover {
    background: #eaf6fd;
}

#tab_SucessFile .fixed-table-container tbody > tr.management-row-synced {
    background: #eef9f3;
    box-shadow: inset 3px 0 #38aa70;
}

#tab_SucessFile .fixed-table-container tbody > tr.management-row-pending {
    background: #f3f7fa;
    box-shadow: inset 3px 0 #8ba2b3;
}

#tab_SucessFile .fixed-table-container tbody > tr.management-row-synced:hover {
    background: #e2f5eb;
}

#tab_SucessFile .fixed-table-container tbody > tr.management-row-pending:hover {
    background: #e8f1f7;
}

#tab_OnlyLogsFile .fixed-table-container tbody td:first-child,
#tab_SucessFile .fixed-table-container tbody td:first-child {
    width: auto;
    text-align: center;
}

#tab_OnlyLogsFile .fixed-table-container .no-records-found td,
#tab_SucessFile .fixed-table-container .no-records-found td {
    height: 210px;
    color: #8297a8;
    background: radial-gradient(circle, #fbfdff, #f0f6fa) !important;
    font-size: 13px;
    text-align: center;
}

#tab_SucessFile tr.detail-view > td {
    padding: 12px 16px !important;
    background: #e9f2f8 !important;
}

#tab_SucessFile tr.detail-view .bootstrap-table {
    overflow: hidden;
    border: 1px solid #c8dce9;
    border-radius: 10px;
    box-shadow: 0 5px 16px rgba(13, 68, 105, .08);
}

#tab_SucessFile .detail-icon {
    color: #117fb8;
    font-size: 16px;
}

#tab_OnlyLogsFile .fixed-table-pagination,
#tab_SucessFile .fixed-table-pagination {
    min-height: 58px;
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid #d9e7f1;
    color: #60798c;
    background: #f7fbfe;
    font-size: 12px;
}

#tab_OnlyLogsFile .fixed-table-pagination .pagination-detail,
#tab_SucessFile .fixed-table-pagination .pagination-detail,
#tab_OnlyLogsFile .fixed-table-pagination .pagination,
#tab_SucessFile .fixed-table-pagination .pagination {
    margin: 0;
}

#tab_OnlyLogsFile .fixed-table-pagination .btn,
#tab_SucessFile .fixed-table-pagination .btn,
#tab_OnlyLogsFile .fixed-table-pagination .pagination > li > a,
#tab_SucessFile .fixed-table-pagination .pagination > li > a {
    min-width: 34px;
    height: 34px;
    padding: 7px 10px;
    border-color: #cbddea;
    color: #46667d;
    background: #ffffff;
    box-shadow: none;
    font-size: 12px;
}

#tab_OnlyLogsFile .fixed-table-pagination .pagination > .active > a,
#tab_SucessFile .fixed-table-pagination .pagination > .active > a {
    color: #ffffff;
    border-color: #148fc8;
    background: linear-gradient(135deg, #0d669e, #149bd5);
}

/* Dark management theme */
html[data-theme="dark"] #tab_OnlyLogsFile,
html[data-theme="dark"] #tab_SucessFile {
    color: #d9ebf6;
}

html[data-theme="dark"] .management-card,
html[data-theme="dark"] .management-page-heading,
html[data-theme="dark"] .management-filter-card,
html[data-theme="dark"] .management-table-card {
    border-color: #1a3b56;
    background: #0b1c2c;
    box-shadow: 0 12px 32px rgba(0,0,0,.22);
}

html[data-theme="dark"] .management-section-header,
html[data-theme="dark"] .management-page-heading {
    border-color: #173850;
    background: linear-gradient(135deg, #0d2437, #0a1c2d);
}

html[data-theme="dark"] .management-section-header h2,
html[data-theme="dark"] .management-page-heading h2,
html[data-theme="dark"] .management-table-header h3 {
    color: #e6f5fd;
}

html[data-theme="dark"] .management-section-header p,
html[data-theme="dark"] .management-page-heading p {
    color: #7897ac;
}

html[data-theme="dark"] .management-kicker {
    color: #39baf1;
}

html[data-theme="dark"] .management-header-icon {
    color: #46c5fa;
    border-color: #20506d;
    background: #0a2940;
    box-shadow: 0 5px 17px rgba(0,0,0,.25);
}

html[data-theme="dark"] .management-field > label,
html[data-theme="dark"] .management-filter-field > label {
    color: #91aec1;
}

html[data-theme="dark"] #ftp_content .management-field > input.textstyle,
html[data-theme="dark"] #ftp_content .management-captcha-control > input.textstyle,
html[data-theme="dark"] .management-filter-field > .form-control {
    color: #dcecf6 !important;
    border-color: #1a405b !important;
    background: #061624 !important;
    box-shadow: inset 0 1px 3px rgba(0,0,0,.3);
}

html[data-theme="dark"] #ftp_content .management-field > input.textstyle:focus,
html[data-theme="dark"] #ftp_content .management-captcha-control > input.textstyle:focus,
html[data-theme="dark"] .management-filter-field > .form-control:focus {
    border-color: #1ba9e7 !important;
    background: #071c2d !important;
}

html[data-theme="dark"] .captcha-refresh {
    border-color: #1a405b;
    background: #0b2940;
}

html[data-theme="dark"] .management-card-actions,
html[data-theme="dark"] #tab_OnlyLogsFile .management-table-card .fixed-table-toolbar,
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-pagination,
html[data-theme="dark"] #tab_SucessFile .fixed-table-pagination {
    border-color: #173850;
    background: #0a1a29;
}

html[data-theme="dark"] #tab_SucessFile .dropdown-menu {
    border-color: #20445e;
    background: #0b2032;
    box-shadow: 0 14px 34px rgba(0,0,0,.5);
}

html[data-theme="dark"] #tab_SucessFile .dropdown-menu > li > a {
    color: #aac4d5 !important;
    background: transparent !important;
}

html[data-theme="dark"] #tab_SucessFile .dropdown-menu > li > a:hover {
    color: #e6f7ff !important;
    background: #12334b !important;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-body,
html[data-theme="dark"] #tab_SucessFile .fixed-table-body {
    background: #091725;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container tbody td,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody td {
    color: #b8cfdd;
    border-bottom-color: #173249 !important;
    border-right-color: #102a3e !important;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container tbody > tr:nth-child(even),
html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr:nth-child(even) {
    background: #0d2030;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container tbody > tr:hover,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr:hover {
    background: #123149;
}

html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr.management-row-synced {
    background: #0c2a27;
    box-shadow: inset 3px 0 #38bb80;
}

html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr.management-row-pending {
    background: #132434;
    box-shadow: inset 3px 0 #65839a;
}

html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr.management-row-synced:hover {
    background: #103832;
}

html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr.management-row-pending:hover {
    background: #183047;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container .no-records-found td,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container .no-records-found td {
    color: #67869b;
    background: radial-gradient(circle, #0d2435, #081724) !important;
}

html[data-theme="dark"] #tab_SucessFile tr.detail-view > td {
    background: #071522 !important;
}

html[data-theme="dark"] #tab_SucessFile tr.detail-view .bootstrap-table {
    border-color: #1c4059;
    box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-pagination,
html[data-theme="dark"] #tab_SucessFile .fixed-table-pagination {
    color: #7897ab;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-pagination .btn,
html[data-theme="dark"] #tab_SucessFile .fixed-table-pagination .btn,
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-pagination .pagination > li > a,
html[data-theme="dark"] #tab_SucessFile .fixed-table-pagination .pagination > li > a {
    color: #9db8c9;
    border-color: #20445e;
    background: #0d2639;
}

@media (max-width: 1180px) {
    .management-filter-grid {
        grid-template-columns: repeat(3, minmax(160px, 1fr));
    }
}

@media (max-width: 860px) {
    .sftp-login-grid,
    .management-filter-grid,
    .management-pending-filter .management-filter-grid {
        grid-template-columns: 1fr;
    }

    .management-filter-actions,
    .management-pending-filter .management-filter-actions {
        grid-column: 1;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    #tab_OnlyLogsFile .fixed-table-body,
    #tab_SucessFile .fixed-table-body {
        min-height: 220px;
    }
}

@media (max-width: 560px) {
    .management-section-header,
    .management-page-heading,
    .management-table-header {
        padding: 13px 14px;
    }

    .sftp-login-grid,
    .management-filter-card {
        padding: 14px !important;
    }

    .management-section-header h2,
    .management-page-heading h2 {
        font-size: 17px;
    }

    .management-header-icon {
        width: 38px;
        height: 38px;
        flex-basis: 38px;
    }

    .management-card-actions {
        padding: 12px 14px;
    }

    .management-filter-actions > a,
    .management-filter-actions > .dropdown,
    .management-filter-actions > .dropdown > a {
        flex: 1 1 auto;
    }

    #tab_OnlyLogsFile .fixed-table-pagination,
    #tab_SucessFile .fixed-table-pagination {
        padding: 9px;
    }
}


/* =============================================
   SINGLE-COLUMN FORMS + AUTO-HEIGHT TABLE HEADER
   Keep each primary form item on its own row and prevent the
   Bootstrap Table fixed-header clone from duplicating column titles.
   ============================================= */
#tab_CaseNumber .tech-form-grid,
#tab_MachineType .tech-form-grid,
#tab_OnlyLogsFile #ftp_content .sftp-login-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
}

#tab_CaseNumber .tech-form-card,
#tab_MachineType .tech-form-card {
    padding: 14px 18px;
}

#tab_CaseNumber .tech-field,
#tab_MachineType .tech-field,
#tab_OnlyLogsFile #ftp_content .management-field {
    width: 50%;
    max-width: 50%;
    box-sizing: border-box;
}

#tab_CaseNumber .tech-field label,
#tab_MachineType .tech-field label,
#tab_OnlyLogsFile #ftp_content .management-field > label {
    min-height: 18px;
    margin-bottom: 5px;
}

#tab_CaseNumber .tech-field .textstyle,
#tab_MachineType .tech-field .textstyle {
    height: 44px;
    padding: 0 13px;
    line-height: 44px;
}

#tab_CaseNumber .email-verify-control button#sendVerifyCode1,
#tab_MachineType .email-verify-control button#sendVerifyCode2 {
    min-height: 44px;
}

#tab_OnlyLogsFile #ftp_content .sftp-login-grid {
    padding: 14px 18px;
}

#tab_OnlyLogsFile #ftp_content .management-field > input.textstyle,
#tab_OnlyLogsFile #ftp_content .management-captcha-control > input.textstyle {
    height: 44px !important;
    min-height: 44px;
    line-height: 44px !important;
}

#tab_OnlyLogsFile #ftp_content .captcha-refresh {
    height: 44px;
}

#tab_OnlyLogsFile #ftp_content .management-card-actions {
    padding: 10px 18px;
}

@media (max-width: 860px) {
    #tab_CaseNumber .tech-field,
    #tab_MachineType .tech-field,
    #tab_OnlyLogsFile #ftp_content .management-field {
        width: 100%;
        max-width: 100%;
    }
}

#tab_OnlyLogsFile .fixed-table-header,
#tab_SucessFile .fixed-table-header {
    display: none !important;
    height: 0 !important;
}

/* A flat columns definition must render exactly one title row. This also
   protects older cached Bootstrap Table wrappers during locale refreshes. */
#myLogsFileTable > thead > tr + tr,
#mySuccessFileTable > thead > tr + tr {
    display: none !important;
}


/* =============================================
   DARK MANAGEMENT TABLE — UNIFORM ROW SURFACES
   Override Bootstrap's cell-level striped backgrounds in both the
   primary log tables and expanded child tables.
   ============================================= */
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container,
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-body,
html[data-theme="dark"] #tab_SucessFile .fixed-table-body,
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container table,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container table,
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container tbody,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody,
html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container tbody > tr,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container tbody > tr {
    background-color: #091725 !important;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container .table > tbody > tr > td,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container .table > tbody > tr > td {
    color: #b8cfdd;
    border-bottom-color: #173249 !important;
    border-right-color: #102a3e !important;
    background-color: #091725 !important;
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container .table > tbody > tr:hover > td,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container .table > tbody > tr:hover > td {
    background-color: #102b40 !important;
}

html[data-theme="dark"] #tab_SucessFile #mySuccessFileTable > tbody > tr.management-row-synced > td {
    background-color: #0b2425 !important;
}

html[data-theme="dark"] #tab_SucessFile #mySuccessFileTable > tbody > tr.management-row-pending > td {
    background-color: #10202e !important;
}

html[data-theme="dark"] #tab_SucessFile #mySuccessFileTable > tbody > tr.management-row-synced:hover > td {
    background-color: #0f312e !important;
}

html[data-theme="dark"] #tab_SucessFile #mySuccessFileTable > tbody > tr.management-row-pending:hover > td {
    background-color: #153047 !important;
}

html[data-theme="dark"] #tab_SucessFile #mySuccessFileTable > tbody > tr.detail-view > td {
    background-color: #061420 !important;
}

html[data-theme="dark"] #tab_SucessFile tr.detail-view .bootstrap-table,
html[data-theme="dark"] #tab_SucessFile tr.detail-view .fixed-table-container,
html[data-theme="dark"] #tab_SucessFile tr.detail-view .fixed-table-body {
    border-color: #173c55;
    background-color: #081a28 !important;
}

html[data-theme="dark"] #tab_SucessFile tr.detail-view .bootstrap-table .table > tbody > tr > td {
    background-color: #0a1c2a !important;
}

html[data-theme="dark"] #tab_SucessFile tr.detail-view .bootstrap-table .table > tbody > tr:hover > td {
    background-color: #102d42 !important;
}


/* =============================================
   EXTRA-COMPACT PRIMARY + SFTP FORMS
   Keep desktop fields at 50% while reducing vertical rhythm.
   ============================================= */
#tab_CaseNumber .tech-form-grid,
#tab_MachineType .tech-form-grid,
#tab_OnlyLogsFile #ftp_content .sftp-login-grid {
    gap: 8px;
}

#tab_CaseNumber .tech-form-card,
#tab_MachineType .tech-form-card {
    padding: 10px 14px;
}

#tab_CaseNumber .tech-field label,
#tab_MachineType .tech-field label,
#tab_OnlyLogsFile #ftp_content .management-field > label {
    min-height: 17px;
    margin-bottom: 3px;
}

#tab_CaseNumber .tech-field .textstyle,
#tab_MachineType .tech-field .textstyle {
    height: 40px;
    padding: 0 12px;
    line-height: 40px;
}

#tab_CaseNumber .email-verify-control button#sendVerifyCode1,
#tab_MachineType .email-verify-control button#sendVerifyCode2 {
    min-height: 40px;
}

#tab_OnlyLogsFile #ftp_content .sftp-login-grid {
    padding: 10px 14px;
}

#tab_OnlyLogsFile #ftp_content .management-field > input.textstyle,
#tab_OnlyLogsFile #ftp_content .management-captcha-control > input.textstyle {
    height: 40px !important;
    min-height: 40px;
    line-height: 40px !important;
}

#tab_OnlyLogsFile #ftp_content .captcha-refresh {
    height: 40px;
}

#tab_OnlyLogsFile #ftp_content .management-card-actions {
    padding: 8px 14px;
}

/* Match the pending-log search action with the other dark management buttons. */
html[data-theme="dark"] #tab_OnlyLogsFile #query_submit,
html[data-theme="dark"] #tab_OnlyLogsFile #query_submit:focus,
html[data-theme="dark"] #tab_OnlyLogsFile #query_submit:active {
    color: #e6f5fd !important;
    border-color: #2b628b !important;
    background: linear-gradient(135deg, #1e3d60, #2a5a8c) !important;
    box-shadow: 0 2px 10px rgba(10, 40, 80, .4) !important;
    text-shadow: none;
}

html[data-theme="dark"] #tab_OnlyLogsFile #query_submit:hover {
    color: #ffffff !important;
    border-color: #3d7ba8 !important;
    background: linear-gradient(135deg, #244a70, #31699b) !important;
    box-shadow: 0 5px 16px rgba(10, 40, 80, .55) !important;
}


/* =============================================
   LOW-LUMINANCE DARK MANAGEMENT TABLES
   Applied by search.js after Bootstrap Table renders or refreshes.
   ============================================= */
html[data-theme="dark"] #tab_OnlyLogsFile .management-table-header,
html[data-theme="dark"] #tab_SucessFile .management-table-header {
    border-bottom-color: #153247;
    background: linear-gradient(105deg, #071827, #0a2a40);
}

html[data-theme="dark"] #tab_OnlyLogsFile .fixed-table-container thead th,
html[data-theme="dark"] #tab_SucessFile .fixed-table-container thead th {
    color: #c9dce8;
    border-right-color: #17364c !important;
    background: linear-gradient(180deg, #09243a, #071a2b) !important;
}

#tab_OnlyLogsFile table.management-table-dark,
#tab_SucessFile table.management-table-dark,
#tab_OnlyLogsFile table.management-table-dark > tbody,
#tab_SucessFile table.management-table-dark > tbody,
#tab_OnlyLogsFile table.management-table-dark > tbody > tr,
#tab_SucessFile table.management-table-dark > tbody > tr {
    background: #071521 !important;
}

#tab_OnlyLogsFile table.management-table-dark > tbody > tr > td,
#tab_SucessFile table.management-table-dark > tbody > tr > td {
    color: #a9c0ce !important;
    border-bottom-color: #142d3f !important;
    border-right-color: #102638 !important;
    background: #071521 !important;
}

#tab_OnlyLogsFile table.management-table-dark > tbody > tr:hover > td,
#tab_SucessFile table.management-table-dark > tbody > tr:hover > td {
    color: #c6d9e4 !important;
    background: #0b2233 !important;
}

#tab_SucessFile #mySuccessFileTable.management-table-dark > tbody > tr.management-row-synced > td {
    background: #0a211f !important;
}

#tab_SucessFile #mySuccessFileTable.management-table-dark > tbody > tr.management-row-pending > td {
    background: #0b1b28 !important;
}

#tab_SucessFile #mySuccessFileTable.management-table-dark > tbody > tr.management-row-synced:hover > td {
    background: #0d2a27 !important;
}

#tab_SucessFile #mySuccessFileTable.management-table-dark > tbody > tr.management-row-pending:hover > td {
    background: #10283a !important;
}

#tab_SucessFile #mySuccessFileTable.management-table-dark > tbody > tr.detail-view > td {
    background: #050f18 !important;
}

#tab_SucessFile tr.detail-view table.management-table-dark,
#tab_SucessFile tr.detail-view table.management-table-dark > tbody,
#tab_SucessFile tr.detail-view table.management-table-dark > tbody > tr,
#tab_SucessFile tr.detail-view table.management-table-dark > tbody > tr > td {
    background: #071722 !important;
}

#tab_SucessFile tr.detail-view table.management-table-dark > tbody > tr:hover > td {
    background: #0b2434 !important;
}

#tab_OnlyLogsFile table.management-table-dark .no-records-found > td,
#tab_SucessFile table.management-table-dark .no-records-found > td {
    color: #617d90 !important;
    background: #071521 !important;
}