:root{
--primary:#33d3c7;
--primary-700:#168b7e;
--primary-50:#e6fbf8;
--bg:#0b0f12;
--surface:#ffffff;
--text:#0f1720;
--muted:#55616d;
--danger:#e04f4f;
}
body{
font-family:Inter, Arial, sans-serif;
background:linear-gradient(135deg, var(--primary-50), #f7fbfc);
margin:0;
padding:40px;
color:var(--text);
}

.container{
max-width:1200px;
margin:auto;
}

h1{
text-align:center;
font-weight:700;
letter-spacing:0.5px;
background:linear-gradient(90deg, var(--primary-700), var(--primary));
-webkit-background-clip:text;
background-clip:text;
color:transparent;
margin-bottom:24px;
}
.subtitle{
text-align:center;
font-weight:600;
color:var(--muted);
margin-top:-12px;
margin-bottom:6px;
}
.brand-credit{
text-align:center;
font-weight:600;
color:var(--muted);
margin-bottom:20px;
}
.brand-credit a{
color:var(--primary-700);
text-decoration:none;
}
.brand-credit a:hover{
text-decoration:underline;
}
.brand-logo{
display:block;
width:84px;
height:auto;
margin:0 auto 8px auto;
filter:drop-shadow(0 6px 14px rgba(0,0,0,0.12));
}

.dropZone{
border:2px dashed var(--primary-700);
padding:40px;
text-align:center;
background:var(--surface);
margin-bottom:20px;
border-radius:16px;
box-shadow:0 10px 30px rgba(0,0,0,0.06);
transition:all .2s ease;
}
.dropZone.dragover{
border-color:var(--primary);
background:#e9fbf8;
transform:scale(1.01);
}

button{
padding:10px 18px;
margin:10px 6px;
border:none;
cursor:pointer;
border-radius:12px;
font-weight:600;
transition:all .2s ease;
}
button.primary{
background:linear-gradient(90deg, var(--primary-700), var(--primary));
color:white;
}
button.primary:hover{
filter:brightness(1.05);
transform:translateY(-1px);
}
button.ghost{
background:transparent;
color:var(--primary-700);
border:2px solid var(--primary-700);
}
button.ghost:hover{
background:var(--primary-50);
}
button.danger{
background:var(--danger);
color:white;
}
button.danger:hover{
filter:brightness(1.05);
}

table{
width:100%;
border-collapse:separate;
border-spacing:0;
margin-top:20px;
background:var(--surface);
border-radius:14px;
overflow:hidden;
box-shadow:0 10px 24px rgba(0,0,0,0.06);
}

th,td{
border-bottom:1px solid #eef2f6;
padding:12px 14px;
}

th{
background:linear-gradient(180deg, #f8fbfc, #eef6f5);
position:sticky;
top:0;
z-index:1;
text-align:left;
}

.noPK{
background:#fff5f5;
}

#search{
margin-left:20px;
padding:10px 12px;
border:1px solid #dbe4ea;
border-radius:10px;
outline:none;
transition:all .2s ease;
}
#search:focus{
border-color:var(--primary-700);
box-shadow:0 0 0 3px rgba(51,211,199,0.25);
}
#totalsBar{
display:none;
margin-top:10px;
background:var(--surface);
padding:14px;
border:1px solid #e5edf1;
border-radius:12px;
box-shadow:0 6px 16px rgba(0,0,0,0.04);
display:flex;
align-items:center;
gap:18px;
}
#totalsBar span{
margin-right:0;
font-weight:700;
color:var(--muted);
}
.panel{
background:var(--surface);
border:1px solid #e5edf1;
border-radius:14px;
padding:16px;
box-shadow:0 10px 24px rgba(0,0,0,0.05);
display:flex;
flex-wrap:wrap;
gap:12px 18px;
align-items:center;
}
.panel label{
color:var(--muted);
font-weight:600;
}
.panel select,.panel input[type="file"],.panel input[type="date"]{
padding:10px 12px;
border:1px solid #dbe4ea;
border-radius:10px;
outline:none;
}
.panel select:focus,.panel input[type="file"]:focus,.panel input[type="date"]:focus{
border-color:var(--primary-700);
box-shadow:0 0 0 3px rgba(51,211,199,0.25);
}
.card{
background:var(--surface);
border:1px solid #e5edf1;
border-radius:14px;
padding:8px;
box-shadow:0 10px 24px rgba(0,0,0,0.05);
}
.fileName{
margin-top:8px;
font-weight:600;
color:var(--primary-700);
}
.change-less{
color:#e04f4f;
font-weight:700;
}
.change-more{
color:#1a9e6d;
font-weight:700;
}
#totalsBar{
display:none;
margin-top:10px;
background:white;
padding:10px;
border:1px solid #ddd;
}
#totalsBar span{
margin-right:20px;
font-weight:bold;
}