/* ==========================================
   RESET
========================================== */

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

html{
scroll-behavior:smooth;
}

body{

font-family:
Segoe UI,
sans-serif;

background:
#080203;

color:white;

overflow-x:hidden;

min-height:100vh;
}

/* ==========================================
   AURORA
========================================== */

.aurora{

position:fixed;

border-radius:50%;

filter:blur(180px);

opacity:.35;

pointer-events:none;

z-index:-1;

animation:
auroraMove 20s linear infinite;
}

.aurora-1{

width:500px;
height:500px;

background:#ff003c;

top:-200px;
left:-150px;
}

.aurora-2{

width:600px;
height:600px;

background:#990000;

right:-200px;
top:30%;
}

.aurora-3{

width:450px;
height:450px;

background:#ff4455;

bottom:-150px;
left:30%;
}

@keyframes auroraMove{

0%{
transform:
translate(0,0)
scale(1);
}

50%{
transform:
translate(80px,-60px)
scale(1.2);
}

100%{
transform:
translate(0,0)
scale(1);
}

}

/* ==========================================
   HEADER
========================================== */

.header{

position:sticky;

top:0;

z-index:999;

backdrop-filter:
blur(25px);

background:
rgba(25,0,0,.65);

border-bottom:
1px solid rgba(255,80,80,.15);

overflow:hidden;
}

.header-glow{

position:absolute;

top:0;
left:-50%;

width:50%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.12),
transparent
);

animation:
shine 5s linear infinite;
}

@keyframes shine{

100%{
left:150%;
}

}

.header-content{

padding:24px;

text-align:center;
}

.header h1{

font-size:32px;

font-weight:700;

letter-spacing:1px;

text-shadow:
0 0 20px #ff3344;
}

.header p{

margin-top:8px;

color:#ffb7b7;
}

/* ==========================================
   CONTAINER
========================================== */

.container{

width:95%;

max-width:1800px;

margin:auto;

padding:25px;
}

/* ==========================================
   PANEL
========================================== */

.panel{

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

border-radius:24px;

backdrop-filter:
blur(25px);

padding:25px;

margin-bottom:25px;

position:relative;

overflow:hidden;
}

.panel::before{

content:"";

position:absolute;

top:0;
left:-100%;

width:60%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.06),
transparent
);

animation:
shine 8s linear infinite;
}

.panel-title{

font-size:18px;

font-weight:700;

margin-bottom:20px;

color:#ff8080;
}

/* ==========================================
   INPUT
========================================== */

.input-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:20px;
}

.input-card h3{

margin-bottom:10px;

color:#ffbaba;
}

textarea{

width:100%;

height:280px;

background:
rgba(0,0,0,.4);

border:
1px solid rgba(255,255,255,.08);

border-radius:18px;

padding:15px;

color:white;

resize:none;

outline:none;
}

textarea:focus{

border-color:#ff3344;

box-shadow:
0 0 20px rgba(255,0,50,.35);
}

/* ==========================================
   BUTTON
========================================== */

.button-row{

display:flex;

gap:15px;

margin-top:20px;
}

.btn-primary,
.btn-secondary{

border:none;

padding:14px 28px;

border-radius:14px;

cursor:pointer;

font-weight:700;

transition:.3s;
}

.btn-primary{

background:
linear-gradient(
135deg,
#ff003c,
#8a001a
);

color:white;
}

.btn-primary:hover{

transform:
translateY(-3px);

box-shadow:
0 0 25px #ff003c;
}

.btn-secondary{

background:#252525;

color:white;
}

/* ==========================================
   KPI
========================================== */

.kpi-grid{

display:grid;

grid-template-columns:
repeat(5,1fr);

gap:18px;

margin-bottom:25px;
}

.kpi-card{

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

backdrop-filter:
blur(20px);

border-radius:22px;

padding:22px;

text-align:center;

position:relative;

overflow:hidden;
}

.kpi-card::after{

content:"";

position:absolute;

top:0;
left:-120%;

width:50%;
height:100%;

background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,.08),
transparent
);

animation:
shine 6s linear infinite;
}

.kpi-card span{

font-size:13px;

color:#ffbaba;
}

.kpi-card h2{

margin-top:10px;

font-size:34px;

color:#fff;
}

/* ==========================================
   TABLE
========================================== */

.preview-grid{

display:grid;

grid-template-columns:
1fr 1fr;

gap:20px;

margin-bottom:25px;
}

.table-container{

max-height:500px;

overflow:auto;

border-radius:18px;
}

table{

width:100%;

border-collapse:collapse;
}

thead{

position:sticky;

top:0;

z-index:5;
}

th{

background:#4a000d;

padding:14px;

font-size:13px;
}

td{

padding:12px;

border-bottom:
1px solid rgba(255,255,255,.06);

font-size:13px;
}

/* ==========================================
   RESULT
========================================== */

.result-grid{

display:grid;

grid-template-columns:
repeat(2,1fr);

gap:20px;

padding-bottom:40px;
}

.result-card{

background:
rgba(255,255,255,.04);

border:
1px solid rgba(255,255,255,.08);

border-radius:24px;

padding:20px;

backdrop-filter:
blur(20px);

min-height:320px;
}

.result-title{

font-weight:700;

font-size:18px;

margin-bottom:15px;

color:#ff7b7b;
}

.result-list{

max-height:500px;

overflow:auto;
}

.result-item{

padding:10px;

margin-bottom:8px;

border-radius:12px;

background:
rgba(255,255,255,.04);

font-size:13px;
}

/* ==========================================
   SCROLLBAR
========================================== */

::-webkit-scrollbar{

width:8px;
height:8px;
}

::-webkit-scrollbar-thumb{

background:#aa001f;

border-radius:10px;
}

::-webkit-scrollbar-track{

background:#180303;
}

/* ==========================================
   MOBILE
========================================== */

@media(max-width:1200px){

.kpi-grid{
grid-template-columns:
repeat(2,1fr);
}

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

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

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

}