@import url(
'https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap'
);

*{

margin:0;

padding:0;

box-sizing:border-box;

font-family:

"Manrope",

"Segoe UI",

sans-serif;

}

body{

background:

linear-gradient(
135deg,
#f5f7fb,
#eef3fa
);

color:#111;

font-weight:500;

letter-spacing:-0.25px;

text-rendering:

optimizeLegibility;

}

button,

input,

table{

font-family:

inherit;

}

h1{

font-weight:800;

letter-spacing:-1px;

}

.summary h2{

font-weight:800;

}

.content-header{

font-weight:800;

}

th{

font-size:13px;

letter-spacing:1px;

font-weight:700;

}

td{

font-size:14px;

font-weight:500;

}

    
    
    body{
    
    background:
    
    linear-gradient(
    135deg,
    #f5f7fb,
    #eef3fa
    );
    
    color:#111;
    
    }
    
    
    
    .container{
    
    max-width:1900px;
    
    margin:auto;
    
    padding:24px;
    
    }
    
    
    
    /* HEADER */
    
    
    
    .topbar{
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    padding:24px;
    
    border-radius:28px;
    
    background:
    
    linear-gradient(
    135deg,
    #0f172a,
    #111827
    );
    
    margin-bottom:24px;
    
    }
    
    
    
    .brand{
    
    display:flex;
    
    align-items:center;
    
    gap:30px;
    
    }
    
    .brand{

display:flex;
align-items:center;
gap:18px;
flex-wrap:wrap;

}
    
    
    /* LOGO */
    
    .logo{
    width:220px;
    max-width:100%;
    height:auto;
    object-fit:contain;
}
    
    
    
    /* LOGO AREA */
    
    .brand{
    
    padding:8px 24px;
    
    border-radius:26px;
    
    background:
    
    #000;
    
    }
    
    
    
    .brand h1{
    
    color:white;
    
    font-size:
    
    clamp(
    34px,
    4vw,
    64px
    );
    
    }
    
    
    
    .brand p{
    
    color:
    
    rgba(
    255,
    255,
    255,
    0.7
    );
    
    margin-top:10px;
    
    }
    
    
    
    /* BUTTON */
    
    button{
    
    height:58px;
    
    padding:0 32px;
    
    border:none;
    
    border-radius:18px;
    
    cursor:pointer;
    
    font-weight:700;
    
    background:
    
    linear-gradient(
    135deg,
    #f5b000,
    #ffcf33
    );
    
    }
    
    
    
    button:hover{
    
    transform:
    
    translateY(-2px);
    
    }
    
    
    
    /* UPLOAD */
    
    .upload-card{
    
    background:white;
    
    padding:28px;
    
    border-radius:28px;
    
    display:flex;
    
    justify-content:space-between;
    
    align-items:center;
    
    margin-bottom:22px;
    
    }
    
    
    
    input[type=file]{
    
    margin-top:14px;
    
    }
    
    
    
    /* KPI */
    
    .summary{
    
    display:grid;
    
    grid-template-columns:
    
    repeat(
    6,
    1fr
    );
    
    gap:16px;
    
    margin-bottom:20px;
    
    }
    
    
    
    .card{

background:white;

padding:26px;

border-radius:24px;

box-shadow:

0 10px 30px

rgba(

0,

0,

0,

0.06

);

transition:

.25s;

border:

1px solid

rgba(

0,

0,

0,

0.04

);

}
    
 .card:hover{

transform:

translateY(-4px);

box-shadow:

0 20px 45px

rgba(

0,

0,

0,

0.08

);

}   
    
    .label{

font-size:13px;

font-weight:700;

letter-spacing:1px;

text-transform:uppercase;

color:#6b7280;

}
    
    
    
    .card h2{

font-size:42px;

margin-top:16px;

font-weight:800;

color:#111827;

line-height:1.1;

}
    
.card small{

display:block;

margin-top:10px;

font-size:14px;

font-weight:700;

color:#6b7280;

letter-spacing:.5px;

text-transform:uppercase;

}  

    /* BODY */
    
    
    
    .main-layout{
    
    display:grid;
    
    grid-template-columns:
    
    330px
    
    1fr;
    
    gap:22px;
    
    }
    
    
    
    /* FILTER */
    
    
    
    .filter{
    
    background:white;
    
    border-radius:28px;
    
    padding:22px;
    
    height:fit-content;
    
    position:sticky;
    
    top:18px;
    
    }
    
    
    
    .filter h3{
    
    margin-bottom:18px;
    
    }
    
    
    
    .filter input{
    
    width:100%;
    
    height:56px;
    
    padding:14px;
    
    border-radius:14px;
    
    border:
    
    1px solid #ddd;
    
    }
    
    
    
    .filter-box{
    
    margin-top:20px;
    
    }
    
    
    
    .filter-title{
    
    font-weight:700;
    
    margin-bottom:12px;
    
    }
    
    
    
    .filter-box div{
    
    display:flex;
    
    flex-wrap:wrap;
    
    gap:10px;
    
    }
    
    
    
    .filter label{
    
    display:flex;
    
    gap:10px;
    
    padding:10px 16px;
    
    background:
    
    #f4f4f4;
    
    border-radius:999px;
    
    cursor:pointer;
    
    }
    
    
    
    .filter input[type=checkbox]{
    
    width:18px;
    
    height:18px;
    
    }
    
    
    
    #resetFilter{
    
    margin-top:24px;
    
    width:100%;
    
    }

    .preset-box select{
    
    width:100%;
    
    height:46px;
    
    margin-top:10px;
    
    padding:10px;
    
    border-radius:14px;
    
    border:
    
    1px solid #ddd;
    
    background:white;
    
    }

    .preset-actions{
    
    display:grid !important;
    
    grid-template-columns:
    
    repeat(
    3,
    1fr
    );
    
    gap:8px !important;
    
    margin-top:10px;
    
    }

    .preset-actions button{
    
    height:42px;
    
    padding:0 8px;
    
    border-radius:12px;
    
    font-size:12px;
    
    }
    
    
    
    /* TABLE */
    
    
    
    .content{
    
    background:white;
    
    padding:24px;
    
    border-radius:28px;
    
    }
    
    
    
    .content-header{
    
    margin-bottom:20px;
    
    font-weight:700;
    
    }
    
    
    
    .table-wrap{
    
    max-height:74vh;
    
    overflow:auto;
    
    }
    
    
    
    table{
    
    width:100%;
    
    border-collapse:collapse;
    
    }
    
    
    
    thead{
    
    position:sticky;
    
    top:0;
    
    }
    
    
    
    th{
    
    background:
    
    linear-gradient(
    135deg,
    #111827,
    #000
    );
    
    color:white;
    
    padding:18px;
    
    }
    
    
    
    td{
    
    padding:16px;
    
    border-bottom:
    
    1px solid #eee;
    
    }
    
    
    
    tbody tr:hover{
    
    background:
    
    #fff8db;
    
    }
    
    
    
    /* FOOTER */
    
    .footer{
    
    margin-top:40px;
    
    text-align:center;
    
    padding:28px;
    
    color:#666;
    
    }
    
    
    
    .footer strong{
    
    color:black;
    
    }

    .gt-modal{
    
    position:fixed;
    
    inset:0;
    
    display:flex;
    
    align-items:center;
    
    justify-content:center;
    
    padding:24px;
    
    background:
    
    rgba(
    15,
    23,
    42,
    0.58
    );
    
    z-index:20;
    
    }

    .gt-modal.hidden{
    
    display:none;
    
    }

    .gt-modal-panel{
    
    width:min(
    520px,
    100%
    );
    
    background:white;
    
    border-radius:24px;
    
    padding:24px;
    
    box-shadow:
    
    0 30px 80px
    rgba(
    0,
    0,
    0,
    0.24
    );
    
    }

    .gt-modal-head{
    
    display:flex;
    
    justify-content:space-between;
    
    gap:18px;
    
    align-items:flex-start;
    
    margin-bottom:18px;
    
    }

    .gt-modal-head h3{
    
    font-size:26px;
    
    }

    .gt-icon-btn{
    
    width:44px;
    
    height:44px;
    
    padding:0;
    
    border-radius:50%;
    
    font-size:26px;
    
    line-height:1;
    
    }

    .gt-print-stats{
    
    display:grid;
    
    grid-template-columns:
    
    1fr
    1fr;
    
    gap:12px;
    
    margin-bottom:18px;
    
    }

    .gt-print-stats div{
    
    background:#f4f6fa;
    
    border-radius:16px;
    
    padding:16px;
    
    }

    .gt-print-stats span,
    .gt-field span{
    
    display:block;
    
    color:#666;
    
    font-size:12px;
    
    margin-bottom:8px;
    
    }

    .gt-print-stats strong{
    
    font-size:28px;
    
    }

    .gt-field input{
    
    width:100%;
    
    height:52px;
    
    padding:14px;
    
    border-radius:14px;
    
    border:
    
    1px solid #ddd;
    
    }

    .gt-modal-actions{
    
    display:flex;
    
    justify-content:flex-end;
    
    gap:10px;
    
    margin-top:18px;
    
    }
    
    
    
/* =====================================
   TABLET
===================================== */
@media (max-width:1024px){

.container{
    padding:14px;
}

.topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
    padding:18px;
}

.brand{
    width:100%;
}

.logo{
    width:180px;
    height:80px;
}

.brand h1{
    font-size:28px;
}

.summary{
    grid-template-columns:repeat(3,1fr);
}

.main-layout{
    grid-template-columns:1fr;
}

.filter{
    position:static;
}

}

/* =====================================
   MOBILE
===================================== */
@media (max-width:768px){

.container{
    padding:10px;
}

/* HEADER */

.topbar{
    padding:14px;
    border-radius:18px;
}

.brand{
    flex-direction:row;
    align-items:center;
    gap:14px;
    padding:12px;
}

.logo{
    width:110px;
    height:48px;
}

.brand h1{
    font-size:18px;
}

.brand p{
    font-size:11px;
    margin-top:4px;
}

.topbar>div:last-child{
    width:100%;
    display:flex;
}

.topbar button{
    flex:1;
    height:42px;
    font-size:13px;
    padding:0;
}

/* UPLOAD */

.upload-card{
    padding:14px;
    flex-direction:column;
    align-items:stretch;
    gap:12px;
}

.upload-card button{
    width:100%;
}

/* KPI */

.summary{
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.card{
    padding:14px;
    border-radius:16px;
}

.card h2{
    font-size:22px;
    margin-top:8px;
}

.card small{
    font-size:11px;
}

/* FILTER */

.filter{
    padding:14px;
    border-radius:16px;
}

.filter input{
    height:42px;
    font-size:13px;
}

/* CONTENT */

.content{
    padding:12px;
    border-radius:16px;
}

.content-header{
    font-size:15px;
}

.table-wrap{
    max-height:none;
    overflow:auto;
}

table{
    min-width:900px;
    font-size:12px;
}

th{
    padding:10px;
    font-size:11px;
}

td{
    padding:9px;
    font-size:12px;
    white-space:nowrap;
}

/* MODAL */

.gt-modal{
    padding:12px;
}

.gt-modal-panel{
    border-radius:18px;
    padding:16px;
}

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

/* FOOTER */

.footer{
    margin-top:20px;
    padding:16px;
    font-size:11px;
}

.gt-loading h3{
    font-size:22px;
}

.gt-loading p{
    font-size:12px;
}

}

/* =====================================
   EXTRA SMALL PHONE
===================================== */
@media (max-width:420px){

.summary{
    grid-template-columns:1fr 1fr;
}

.logo{
    width:90px;
    height:40px;
}

.brand h1{
    font-size:16px;
}

button{
    height:40px;
    font-size:12px;
}

.card h2{
    font-size:18px;
}

.card{
    padding:10px;
}

}

    /* ===== GT LOADING ===== */

.gt-loading{

position:fixed;

inset:0;

z-index:99999;

display:flex;

flex-direction:column;

align-items:center;

justify-content:center;

background:

rgba(
255,
255,
255,
0.88
);

backdrop-filter:

blur(
12px
);

opacity:0;

pointer-events:none;

transition:.25s;

}

.gt-loading.show{

opacity:1;

pointer-events:auto;

}

.gt-spinner{

width:82px;

height:82px;

border-radius:50%;

border:

7px solid #ebedf2;

border-top:

7px solid #0f172a;

animation:

gtSpin .8s linear infinite;

}

.gt-loading h3{

margin-top:26px;

font-size:30px;

font-weight:800;

}

.gt-loading p{

margin-top:10px;

font-size:14px;

color:#666;

}

@keyframes gtSpin{

100%{

transform:

rotate(

360deg

)

}

}

/* ==========================================
   MOBILE COMPACT
========================================== */
@media (max-width:768px){

.container{
    padding:10px;
}

/* Header */
.topbar{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
}

.topbar .brand{
    width:100%;
}

.topbar h1{
    font-size:20px;
}

.topbar p{
    font-size:11px;
}

.topbar button{
    flex:1;
    padding:10px;
    font-size:13px;
}

/* Upload */
.upload-card{
    flex-direction:column;
    gap:12px;
}

.upload-card button{
    width:100%;
}

/* Summary */
.summary{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:8px;
}

.card{
    padding:10px;
}

.card h2{
    font-size:20px;
}

.card small{
    font-size:11px;
}

/* Layout */
.main-layout{
    display:block;
}

/* Filter */
.filter{
    width:100%;
    margin-bottom:12px;
    padding:12px;
}

.filter input{
    font-size:13px;
    padding:8px;
}

/* Table */
.table-wrap{
    overflow-x:auto;
}

table{
    min-width:900px;
    font-size:12px;
}

th,td{
    padding:8px;
    white-space:nowrap;
}

/* Footer */
.footer{
    font-size:11px;
    padding:10px;
}

/* Loading */
.gt-loading h3{
    font-size:18px;
}

.gt-loading p{
    font-size:13px;
}

}