/* ======================================================
   LOAN EMI CALCULATOR
   Part 2 - Global Styles
====================================================== */

:root{

--primary:#3B82F6;
--primary-dark:#2563EB;

--secondary:#22C55E;

--danger:#EF4444;

--bg:#F5F7FB;

--card:#FFFFFF;

--border:#E5E7EB;

--text:#111827;

--muted:#6B7280;

--shadow:
0 10px 30px rgba(0,0,0,.08);

--shadow-hover:
0 20px 60px rgba(0,0,0,.15);

--radius:22px;

--transition:.35s cubic-bezier(.4,0,.2,1);

}

*{

margin:0;

padding:0;

box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

font-family:'Inter',sans-serif;

background:var(--bg);

color:var(--text);

line-height:1.5;

overflow-x:hidden;

}

/* ===========================
BACKGROUND
=========================== */

.page-bg{

position:fixed;

inset:0;

z-index:-2;



}

/* Floating Blur */

.page-bg::before{

content:"";

position:absolute;

width:420px;

height:420px;

background:#60A5FA;

filter:blur(120px);

opacity:.18;

top:-100px;

left:-100px;

animation:float1 12s infinite alternate;

}

.page-bg::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:#34D399;

filter:blur(120px);

opacity:.15;

right:-120px;

bottom:-100px;

animation:float2 14s infinite alternate;

}

@keyframes float1{

to{

transform:

translateY(50px)

translateX(60px);

}

}

@keyframes float2{

to{

transform:

translateY(-50px)

translateX(-60px);

}

}

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

.container{

width:min(1400px,94%);

margin:auto;

padding:50px 0;

}

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

.heading{

text-align:center;

margin-bottom:50px;

}

.badge{

display:inline-flex;

align-items:center;

gap:8px;

padding:8px 16px;

border-radius:999px;

background:white;

box-shadow:var(--shadow);

font-weight:600;

font-size:14px;

margin-bottom:20px;

}

.heading h1{

font-size:48px;

font-weight:800;

letter-spacing:-1px;

margin-bottom:18px;

}

.heading p{

font-size:18px;

color:var(--muted);

max-width:700px;

margin:auto;

}

/* ===========================
MAIN GRID
=========================== */

.calculator-wrapper{

display:grid;

grid-template-columns:

460px
1fr;

gap:35px;

align-items:start;

}

/* ===========================
GLASS CARD
=========================== */

.glass-card{

background:

rgba(255,255,255,.70);

backdrop-filter:

blur(18px);

border:

1px solid rgba(255,255,255,.45);

border-radius:30px;

padding:35px;

box-shadow:

0 20px 50px rgba(0,0,0,.08);

transition:var(--transition);

}

.glass-card:hover{

transform:translateY(-4px);

box-shadow:var(--shadow-hover);

}

/* ===========================
FIELDS
=========================== */

.field{

margin-bottom:5px;

}

.label-row{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:15px;

}

.label-row label{

font-weight:700;

font-size:15px;

}

.value{

display:flex;

align-items:center;

gap:8px;

font-weight:700;

font-size:18px;

color:var(--primary);

}

.value input{

width:120px;

border:none;

background:transparent;

font-size:22px;

font-weight:700;

text-align:right;

outline:none;

color:var(--text);

}

/* ===========================
RANGE
=========================== */

input[type=range]{

appearance:none;

width:100%;

height:8px;

border-radius:999px;

background:

linear-gradient(

90deg,

#25ebba,

#60A5FA);

cursor:pointer;

}

input[type=range]::-webkit-slider-thumb{

appearance:none;

width:24px;

height:24px;

border-radius:50%;

background:white;

border:5px solid var(--primary);

box-shadow:

0 8px 25px rgba(37,99,235,.35);

transition:.25s;

}

input[type=range]::-webkit-slider-thumb:hover{

transform:scale(1.2);

}

/* ===========================
BUTTONS
=========================== */

.buttons{

display:flex;

gap:15px;

margin-top:35px;

}

.buttons button{

flex:1;

border:none;

border-radius:16px;

padding:16px;

font-size:16px;

font-weight:700;

cursor:pointer;

transition:.35s;

}

#calculateBtn{

background:

linear-gradient(

135deg,

#25ebba,

#3B82F6);

color:white;



}

#calculateBtn:hover{

transform:translateY(-3px);

}

#resetBtn{

background:#EEF2FF;

color:#1E3A8A;

}

#resetBtn:hover{

background:#E0E7FF;

}

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

.result-panel{

display:flex;

flex-direction:column;

gap:25px;

}

/* ===========================
SUMMARY CARD
=========================== */

.summary-card{

padding:35px;

border-radius:30px;

background:white;

box-shadow:var(--shadow);

text-align:center;

transition:var(--transition);

}

.summary-card:hover{

transform:translateY(-5px);

}

.summary-title{

font-size:15px;

color:var(--muted);

margin-bottom:12px;

}

.emi{

font-size:52px;

font-weight:800;

color:#25ebba;

letter-spacing:-2px;

}

/* ===========================
GRID
=========================== */

.summary-grid{

display:grid;

grid-template-columns:

repeat(2,1fr);

gap:20px;

}

.summary-box{

background:white;

padding:28px;

border-radius:24px;

box-shadow:var(--shadow);

transition:.35s;

}

.summary-box:hover{

transform:

translateY(-6px);

}

.summary-box span{

display:block;

font-size:14px;

color:var(--muted);

margin-bottom:12px;

}

.summary-box h3{

font-size:28px;

font-weight:800;

}

/* ===========================
CHART
=========================== */

.chart-card{

position:relative;

padding:40px;

background:white;

border-radius:30px;

box-shadow:var(--shadow);

display:flex;

justify-content:center;

align-items:center;

min-height:360px;

}

.chart-card svg{

width:270px;

height:270px;

transform:rotate(-90deg);

}

.chart-bg{

fill:none;

stroke:#E5E7EB;

stroke-width:20;

}

.principal-arc{

fill:none;

stroke:#2563EB;

stroke-width:20;

stroke-linecap:round;

stroke-dasharray:565;

stroke-dashoffset:565;

transition:1s;

}

.interest-arc{

fill:none;

stroke:#22C55E;

stroke-width:20;

stroke-linecap:round;

stroke-dasharray:565;

stroke-dashoffset:565;

transition:1s;

}

.chart-center{

position:absolute;

text-align:center;

}

.chart-center div{

font-size:14px;

color:var(--muted);

}

.chart-center strong{

display:block;

margin-top:10px;

font-size:36px;

}

/* Schedule section and advanced responsive rules will be added in Part 3 to keep each part manageable. */
/* ======================================================
   PART 3
   RESPONSIVE + TABLE + DARK MODE + POLISH
====================================================== */


/* ===========================
SCHEDULE CARD
=========================== */

.schedule-card{

margin-top:45px;

background:white;

border-radius:30px;

padding:35px;

box-shadow:var(--shadow);

}


.table-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:25px;

}


.table-header h2{

font-size:28px;

font-weight:800;

}


#downloadCsv{

border:none;

background:

linear-gradient(
135deg,
#22C55E,
#16A34A
);

color:white;

padding:13px 22px;

border-radius:14px;

font-weight:700;

cursor:pointer;

transition:.3s;

}


#downloadCsv:hover{

transform:translateY(-3px);

box-shadow:

0 12px 30px rgba(34,197,94,.3);

}


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


.table-responsive{

overflow-x:auto;

border-radius:20px;

}


table{

width:100%;

border-collapse:collapse;

min-width:750px;

}


thead{

background:

linear-gradient(
135deg,
#EFF6FF,
#DBEAFE
);

}


th{

padding:18px;

text-align:left;

font-size:14px;

color:#1E40AF;

font-weight:700;

}


td{

padding:16px 18px;

border-bottom:

1px solid #F1F5F9;

font-size:15px;

color:#374151;

}


tbody tr{

transition:.25s;

}


tbody tr:hover{

background:#F8FAFC;

transform:scale(1.005);

}


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


::-webkit-scrollbar{

width:10px;

height:10px;

}


::-webkit-scrollbar-track{

background:#F1F5F9;

}


::-webkit-scrollbar-thumb{

background:

linear-gradient(
180deg,
#3B82F6,
#22C55E
);

border-radius:20px;

}


/* ===========================
CARD ANIMATION
=========================== */


.summary-box,
.schedule-card,
.chart-card{

animation:

fadeUp .7s ease both;

}


@keyframes fadeUp{

from{

opacity:0;

transform:

translateY(30px);

}

to{

opacity:1;

transform:

translateY(0);

}

}


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


.value input:focus{

color:var(--primary);

}


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


@media(max-width:1100px){


.calculator-wrapper{

grid-template-columns:1fr;

}


.input-panel{

max-width:700px;

width:100%;

margin:auto;

}


.heading h1{

font-size:40px;

}


}


/* Tablet */

@media(max-width:768px){


.container{

width:92%;

padding:0px 0;

}


.heading{

margin-bottom:35px;

}


.heading h1{

font-size:34px;

}


.heading p{

font-size:16px;

}


.glass-card{

padding:25px;

border-radius:24px;

}


.summary-grid{

grid-template-columns:1fr;

}


.emi{

font-size:40px;

}


.chart-card{

min-height:300px;

padding:20px;

}


.chart-card svg{

width:230px;

height:230px;

}


.schedule-card{

padding:22px;

border-radius:24px;

}


.table-header{

flex-direction:column;

align-items:flex-start;

gap:18px;

}


.table-header h2{

font-size:22px;

}


}


/* Small phones */

@media(max-width:480px){


.heading h1{

font-size:29px;

}


.badge{

font-size:12px;

}


.label-row{

flex-direction:column;

align-items:flex-start;

gap:10px;

}


.value{

width:100%;

}


.value input{

width:100%;

text-align:left;

font-size:20px;

}


.buttons{

flex-direction:column;

}


.summary-card{

padding:25px;

}


.summary-box{

padding:22px;

}


.summary-box h3{

font-size:23px;

}


.chart-center strong{

font-size:30px;

}


}


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


body.dark{


--bg:#020617;

--card:#0F172A;

--text:#F8FAFC;

--muted:#94A3B8;

--border:#1E293B;

}


body.dark .summary-card,
body.dark .summary-box,
body.dark .chart-card,
body.dark .schedule-card,
body.dark .glass-card{

background:

rgba(15,23,42,.85);

color:white;

}


body.dark table{

color:white;

}


body.dark td{

color:#CBD5E1;

border-color:#1E293B;

}


body.dark thead{

background:#1E293B;

}


body.dark th{

color:#93C5FD;

}


/* ===========================
PRINT MODE
=========================== */


@media print{


.page-bg{

display:none;

}


body{

background:white;

}


.buttons,
#downloadCsv{

display:none;

}


.summary-card,
.summary-box,
.chart-card,
.schedule-card{

box-shadow:none;

border:1px solid #ddd;

}


}


/* ===========================
ACCESSIBILITY
=========================== */


button:focus,
input:focus{

outline:

3px solid rgba(59,130,246,.35);

outline-offset:3px;

}


/* ===========================
LOADING SHIMMER
=========================== */


.loading{

position:relative;

overflow:hidden;

}


.loading::after{

content:"";

position:absolute;

inset:0;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.5),
transparent
);

animation:

shimmer 1.5s infinite;

}


@keyframes shimmer{


100%{

transform:

translateX(100%);

}

}


/* ===========================
SMOOTH NUMBER CHANGE
=========================== */


.number-change{

animation:

numberPop .3s ease;

}


@keyframes numberPop{


50%{

transform:scale(1.08);

}


}


/* ===========================
FLOATING EFFECT
=========================== */


.summary-card:hover,
.chart-card:hover,
.schedule-card:hover{

box-shadow:

0 25px 70px rgba(15,23,42,.15);

}