:root{
--primary:#0B3C8C;
--secondary:#1F6FEB;
--accent:#1EC8A5;
--dark:#08275a;
--bg:#eef5ff;
--light:#f8fbff;
--white:#ffffff;
--activeGlow:#00e0ff;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior:smooth;
}

body{
font-family:Arial,sans-serif;
background:linear-gradient(135deg,#eef5ff,#f8fbff);
overflow-x:hidden;
color:#222;
}

/* HEADER */

.page-title{
background: linear-gradient(90deg,var(--dark),var(--primary));
color:#fff;
padding:16px;
text-align:center;
font-size:24px;
font-weight:700;
box-shadow:0 2px 10px rgba(0,0,0,0.15);
}

/* TOOLBAR */

.toolbar{
width:95%;
margin:18px auto;
background:#fff;
border-radius:18px;
padding:18px;
display:flex;
flex-wrap:wrap;
gap:12px;
align-items:center;
box-shadow:0 6px 20px rgba(0,0,0,0.08);
border:1px solid #dce8ff;
}

input,
select,
button{
padding:12px 14px;
border-radius:12px;
border:1px solid #d6e1ff;
font-size:14px;
outline:none;
transition:0.25s;
}

input:focus,
select:focus{
border-color:var(--secondary);
box-shadow:0 0 0 3px rgba(31,111,235,0.12);
}

button{
border:none;
cursor:pointer;
font-weight:700;
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
}

button:hover{
transform:translateY(-1px);
opacity:0.96;
}

/* FILE AREA */

.file-upload-box{
width:100%;
border:2px dashed var(--secondary);
padding:22px;
border-radius:18px;
background:#f7fbff;
text-align:center;
position:relative;
transition:0.3s;
}

.file-upload-box.dragover{
background:#e8f1ff;
border-color:var(--accent);
}

.file-upload-box h3{
color:var(--primary);
margin-bottom:10px;
}

.file-upload-box p{
font-size:13px;
color:#666;
margin-top:8px;
}

#fileInput{
display:none;
}

.upload-btn{
background:linear-gradient(135deg,var(--accent),#17b391);
padding:12px 18px;
display:inline-block;
cursor:pointer;
border-radius:12px;
font-weight:bold;
color:#fff;
margin-top:10px;
}

/* FILE INFO */

.file-info{
width:95%;
margin:auto;
margin-top:10px;
background:#fff;
padding:12px 16px;
border-radius:14px;
box-shadow:0 3px 12px rgba(0,0,0,0.05);
font-weight:bold;
color:var(--primary);
display:none;
}

/* STATS */

.stats-wrapper{
width:95%;
margin:18px auto;
display:grid;
grid-template-columns:repeat(5,1fr);
gap:15px;
}

.stat-card{
background:#fff;
border-radius:18px;
padding:20px;
text-align:center;
box-shadow:0 5px 16px rgba(0,0,0,0.06);
border:1px solid #dce8ff;
}

.stat-title{
font-size:13px;
font-weight:bold;
color:#666;
margin-bottom:10px;
}

.stat-value{
font-size:30px;
font-weight:800;
color:var(--primary);
}

/* MODE BUTTONS */

.mode-btn{
padding:14px 18px;
font-size:15px;
border-radius:14px;
font-weight:700;
min-width:155px;
}

.mode-btn.active{
background:linear-gradient(135deg,var(--accent),#14a785);
transform:scale(1.03);
}

.copy-all-btn{
background:linear-gradient(135deg,#ff9800,#ff7700);
}

/* STATUS */

.status-msg{
width:95%;
margin:15px auto;
padding:14px;
border-radius:14px;
background:#fff3cd;
color:#856404;
font-weight:bold;
display:none;
box-shadow:0 3px 10px rgba(0,0,0,0.05);
}

/* LOADER */

#loader{
width:95%;
margin:15px auto;
background:#fff;
padding:16px;
border-radius:14px;
display:none;
box-shadow:0 4px 12px rgba(0,0,0,0.06);
}

.loader-top{
display:flex;
justify-content:space-between;
margin-bottom:10px;
font-weight:bold;
color:var(--primary);
}

.progress-bar{
width:100%;
height:16px;
background:#dce8ff;
border-radius:20px;
overflow:hidden;
}

.progress-fill{
height:100%;
width:0%;
background:linear-gradient(90deg,var(--accent),var(--secondary));
transition:0.3s;
}

/* TABLE */

.table-box{
width:95%;
margin:18px auto;
background:#fff;
border-radius:18px;
overflow:auto;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
border:1px solid #dce8ff;
max-height:80vh;
position:relative;
}

table{
width:max-content;
min-width:100%;
border-collapse:separate;
border-spacing:0;
}

th,td{
border:1px solid #e3ebff;
padding:10px;
text-align:center;
white-space:nowrap;
font-size:13px;
transition:0.2s;
}

th{
background:linear-gradient(135deg,var(--primary),var(--secondary));
color:#fff;
position:sticky;
top:0;
z-index:50;
}

.preview-th{
background:linear-gradient(135deg,#6a11cb,#2575fc)!important;
}

td{
background:#fff;
}

tr:hover td{
background:#f7fbff;
}

.dup-cell{
background:#ffe0e0!important;
}

.highlight-cell{
background:#d8fff3!important;
font-weight:700;
border:2px solid #00c48c!important;
}

.active-column{
box-shadow:inset 0 -4px 0 var(--activeGlow);
}

.col-box{
display:flex;
flex-direction:column;
gap:8px;
align-items:center;
min-width:180px;
}

.col-title{
font-size:13px;
font-weight:800;
line-height:1.4;
word-break:break-word;
}

.col-btn{
padding:8px 12px;
border-radius:30px;
font-size:12px;
width:100%;
font-weight:bold;
transition:0.25s;
position:relative;
overflow:hidden;
}

.col-btn:hover{
opacity:0.94;
transform:scale(1.02);
}

.col-btn.active{
background:#fff!important;
color:var(--primary)!important;
border:2px solid #00d2ff!important;
box-shadow:
0 0 12px rgba(0,210,255,0.6),
0 0 0 2px rgba(255,255,255,0.7) inset;
transform:scale(1.03);
}

.col-btn.unique-active{
background:#e8fff6!important;
color:#008f63!important;
border:2px solid #00b57d!important;
}

.col-btn.dup-active{
background:#fff0f0!important;
color:#d80000!important;
border:2px solid #ff4d4d!important;
}

.selected-indicator{
display:inline-block;
margin-left:6px;
font-size:11px;
font-weight:800;
}

/* PAGINATION */

.pagination,
.preview-pagination{
display:flex;
justify-content:center;
align-items:center;
gap:10px;
flex-wrap:wrap;
margin:20px;
}

.page-box{
display:flex;
gap:8px;
align-items:center;
}

/* PREVIEW */

.preview-box{
width:95%;
margin:18px auto;
background:#fff;
border-radius:18px;
padding:18px;
box-shadow:0 5px 16px rgba(0,0,0,0.08);
display:none;
border:2px solid #8cb5ff;
}

.preview-header{
text-align:center;
margin-bottom:18px;
}

.preview-header h2{
font-size:28px;
color:#2563eb;
margin-bottom:6px;
}

.preview-header p{
font-weight:bold;
color:#666;
}

.preview-search{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-bottom:15px;
}

/* SCROLLBAR */

.table-box::-webkit-scrollbar{
height:12px;
width:12px;
}

.table-box::-webkit-scrollbar-thumb{
background:linear-gradient(135deg,var(--secondary),var(--accent));
border-radius:20px;
}

.table-box::-webkit-scrollbar-track{
background:#eef4ff;
}

.tool-instructions {
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    margin-top: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    font-family: Arial, sans-serif;
}

.tool-instructions h3 {
    margin: 0 0 16px;
    font-size: 22px;
    color: #1f2937;
}

.tool-instructions ol {
    margin: 0;
    padding-left: 20px;
}

.tool-instructions ol li {
    margin-bottom: 14px;
    line-height: 1.7;
    color: #4b5563;
}

.tool-instructions ul {
    margin-top: 10px;
    padding-left: 20px;
}

.tool-instructions ul li {
    margin-bottom: 8px;
}

.important-note {
    margin-top: 24px;
    padding: 18px;
    background: #fff8e1;
    border-left: 5px solid #f59e0b;
    border-radius: 8px;
}

.important-note h4 {
    margin: 0 0 10px;
    color: #92400e;
    font-size: 18px;
}

.important-note p {
    margin: 0 0 12px;
    color: #78350f;
    line-height: 1.7;
}

.important-note p:last-child {
    margin-bottom: 0;
}

/* MOBILE */

@media(max-width:768px){

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

.stats-wrapper{
grid-template-columns:1fr;
}

button,
input,
select{
width:100%;
}

.mode-btn{
width:100%;
}

.table-box{
width:100%;
border-radius:0;
}

.preview-box{
width:100%;
border-radius:0;
padding:12px;
}

th,td{
font-size:11px;
padding:8px;
}

.col-box{
min-width:150px;
}
/* FOOTER */

footer{
background:#ffffff;
border-top:1px solid #e2e8f0;
padding:70px 50px 40px;
margin-top:50px;
overflow:hidden;
}

.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr 1fr;
gap:40px;
}

.footer-logo{
width:180px;
margin-bottom:20px;
max-width:100%;
cursor:pointer;
}

.footer-text{
color:#64748b;
line-height:1.8;
max-width:320px;
}

.footer-col h4{
margin-bottom:20px;
font-size:20px;
}

.footer-col a{
display:block;
margin-bottom:12px;
color:#64748b;
text-decoration:none;
transition:.3s;
word-break:break-word;
}

.footer-col a:hover{
color:#2563eb;
}

.copy{
margin-top:50px;
padding-top:25px;
border-top:1px solid #e2e8f0;
text-align:center;
color:#64748b;
line-height:1.7;
}
}