/* =========================================================
   STUDENT UTILITY HUB
   UNIT CONVERTER
   PREMIUM SAAS UI
========================================================= */

:root{

--primary:#6C63FF;
--secondary:#4F46E5;
--accent:#7C3AED;

--success:#22C55E;
--danger:#EF4444;
--warning:#F59E0B;

--bg:#0B1020;
--card:#111827;
--card2:#1A2338;

--border:rgba(255,255,255,.08);

--text:#ffffff;
--text2:#B8C2D4;
--text3:#94A3B8;

--glass:rgba(255,255,255,.05);

--shadow:
0 15px 45px rgba(0,0,0,.45);

--radius:22px;

--transition:.35s;

}

/* ========================================================= */

*{

margin:0;
padding:0;
box-sizing:border-box;

}

html{

scroll-behavior:smooth;

}

body{

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

background:
linear-gradient(
135deg,
#050816 0%,
#0B1020 30%,
#101B36 70%,
#0B1020 100%
);

color:var(--text);

min-height:100vh;

overflow-x:hidden;

position:relative;

}

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

.background-blur{

position:fixed;

border-radius:50%;

filter:blur(140px);

opacity:.6;

pointer-events:none;

z-index:-1;

animation:float 10s infinite ease-in-out;

}

.blur1{

width:420px;
height:420px;

background:#6C63FF;

top:-120px;
left:-100px;

}

.blur2{

width:450px;
height:450px;

background:#06B6D4;

bottom:-150px;
right:-120px;

animation-delay:3s;

}

@keyframes float{

0%{

transform:translateY(0px);

}

50%{

transform:translateY(-35px);

}

100%{

transform:translateY(0px);

}

}

/* =========================================================
LAYOUT
========================================================= */

.converter-wrapper{

width:100%;

display:flex;

justify-content:center;

align-items:center;

padding:70px 20px;

}

.converter-card{

width:100%;

max-width:760px;

background:rgba(17,24,39,.72);

backdrop-filter:blur(25px);

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

border-radius:28px;

padding:35px;

box-shadow:var(--shadow);

position:relative;

overflow:hidden;

}

/* =========================================================
TOP BORDER EFFECT
========================================================= */

.converter-card::before{

content:"";

position:absolute;

top:0;
left:0;

width:100%;
height:4px;

background:

linear-gradient(
90deg,

#6C63FF,

#7C3AED,

#06B6D4

);

}

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

.header{

display:flex;

justify-content:space-between;

align-items:center;

gap:20px;

margin-bottom:35px;

}

.header h1{

font-size:34px;

font-weight:700;

display:flex;

align-items:center;

gap:12px;

}

.header h1 i{

color:#7C3AED;

}

.header p{

margin-top:8px;

font-size:14px;

color:var(--text2);

}

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

.home-btn{

display:flex;

align-items:center;

gap:10px;

padding:13px 22px;

background:

linear-gradient(
135deg,
#6C63FF,
#4F46E5
);

border-radius:14px;

color:#fff;

text-decoration:none;

font-size:14px;

font-weight:600;

transition:var(--transition);

box-shadow:

0 8px 25px rgba(108,99,255,.35);

}

.home-btn:hover{

transform:translateY(-3px);

box-shadow:

0 15px 35px rgba(108,99,255,.55);

}

/* =========================================================
SECTION TITLE
========================================================= */

.category-title{

font-size:17px;

font-weight:600;

margin-bottom:18px;

display:flex;

align-items:center;

gap:10px;

}

.category-title::before{

content:"";

width:5px;

height:22px;

border-radius:30px;

background:

linear-gradient(
180deg,
#6C63FF,
#06B6D4
);

}

/* =========================================================
COMMON CARD
========================================================= */

.card{

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

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

border-radius:18px;

padding:18px;

}

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

::-webkit-scrollbar{

width:10px;

}

::-webkit-scrollbar-track{

background:#0B1020;

}

::-webkit-scrollbar-thumb{

background:#6C63FF;

border-radius:30px;

}

::-webkit-scrollbar-thumb:hover{

background:#7C3AED;

}

/* =========================================================
TEXT SELECTION
========================================================= */

::selection{

background:#6C63FF;

color:#fff;

}

/* =========================================================
END OF PART 1
NEXT:
CATEGORY GRID
INPUT BOXES
SEARCH
SELECT
SWAP BUTTON
========================================================= */

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

.category-grid{

display:grid;

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

gap:14px;

margin-bottom:35px;

}

.category{

height:90px;

border:none;

outline:none;

cursor:pointer;

border-radius:18px;

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

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

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:10px;

color:#fff;

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

font-size:14px;

font-weight:500;

transition:.35s;

}

.category i{

font-size:26px;

color:#A78BFA;

transition:.35s;

}

.category span{

font-size:13px;

}

.category:hover{

transform:translateY(-6px);

background:rgba(108,99,255,.15);

border-color:#6C63FF;

box-shadow:

0 15px 30px rgba(108,99,255,.25);

}

.category:hover i{

transform:scale(1.2);

color:#fff;

}

.category.active{

background:

linear-gradient(135deg,#6C63FF,#4F46E5);

border-color:transparent;

box-shadow:

0 20px 40px rgba(108,99,255,.45);

}

.category.active i{

color:#fff;

}

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

.converter-grid{

display:grid;

grid-template-columns:1fr auto 1fr;

align-items:end;

gap:20px;

margin-bottom:35px;

}

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

.input-card{

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

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

border-radius:20px;

padding:22px;

display:flex;

flex-direction:column;

gap:14px;

transition:.3s;

}

.input-card:hover{

border-color:#6C63FF;

box-shadow:

0 15px 35px rgba(108,99,255,.15);

}

.input-card label{

font-size:14px;

font-weight:600;

color:#CBD5E1;

}

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

.input-card input[type=number],

.input-card input[type=text]{

width:100%;

height:52px;

padding:0 18px;

border-radius:14px;

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

background:#0F172A;

color:#fff;

font-size:16px;

font-family:Poppins,sans-serif;

outline:none;

transition:.3s;

}

.input-card input::placeholder{

color:#94A3B8;

}

.input-card input:focus{

border-color:#6C63FF;

box-shadow:

0 0 0 4px rgba(108,99,255,.18);

}

/* =========================================================
SEARCH BOX
========================================================= */

#searchFrom,

#searchTo{

margin-top:4px;

margin-bottom:2px;

}

/* =========================================================
SELECT
========================================================= */

.input-card select{

height:54px;

padding:0 16px;

border-radius:14px;

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

background:#0F172A;

color:#fff;

font-size:15px;

font-family:Poppins,sans-serif;

outline:none;

cursor:pointer;

transition:.3s;

}

.input-card select:hover{

border-color:#6C63FF;

}

.input-card select:focus{

border-color:#6C63FF;

box-shadow:

0 0 0 4px rgba(108,99,255,.18);

}

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

.swap-box{

display:flex;

justify-content:center;

align-items:center;

}

#swapBtn{

width:70px;

height:70px;

border-radius:50%;

border:none;

cursor:pointer;

font-size:24px;

background:

linear-gradient(

135deg,

#6C63FF,

#7C3AED

);

color:#fff;

transition:.35s;

box-shadow:

0 15px 35px rgba(108,99,255,.35);

}

#swapBtn:hover{

transform:rotate(180deg) scale(1.08);

box-shadow:

0 20px 45px rgba(108,99,255,.55);

}

#swapBtn:active{

transform:scale(.95);

}

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

.input-card:focus-within{

border-color:#6C63FF;

box-shadow:

0 20px 40px rgba(108,99,255,.18);

}

/* =========================================================
SMALL ANIMATION
========================================================= */

@keyframes pop{

0%{

transform:scale(.9);

opacity:0;

}

100%{

transform:scale(1);

opacity:1;

}

}

.input-card{

animation:pop .5s ease;

}

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

.result-card{

margin-top:35px;

padding:28px;

background:
linear-gradient(
135deg,
rgba(108,99,255,.12),
rgba(17,24,39,.95)
);

border:1px solid rgba(108,99,255,.18);

border-radius:22px;

box-shadow:
0 15px 35px rgba(0,0,0,.35);

animation:fadeUp .5s ease;

}

.result-header{

display:flex;

justify-content:space-between;

align-items:center;

margin-bottom:18px;

}

.result-header h3{

display:flex;

align-items:center;

gap:10px;

font-size:18px;

font-weight:600;

}

.result-header h3 i{

color:#22C55E;

}

#resultText{

font-size:38px;

font-weight:700;

color:#fff;

margin-bottom:12px;

word-break:break-word;

}

#formulaText{

font-size:15px;

color:#B8C2D4;

line-height:1.8;

}

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

.actions{

display:flex;

gap:16px;

margin-top:30px;

}

.actions button{

flex:1;

height:56px;

border:none;

outline:none;

cursor:pointer;

border-radius:16px;

font-family:Poppins,sans-serif;

font-size:15px;

font-weight:600;

transition:.35s;

display:flex;

justify-content:center;

align-items:center;

gap:10px;

}

#copyBtn{

background:
linear-gradient(
135deg,
#06B6D4,
#2563EB
);

color:#fff;

padding:12px 22px;

border:none;

border-radius:12px;

cursor:pointer;

font-size:14px;

font-weight:600;

transition:.3s;

display:flex;

align-items:center;

gap:8px;

}

#copyBtn:hover{

transform:translateY(-3px);

box-shadow:
0 15px 30px rgba(37,99,235,.35);

}

#clearBtn{

background:
linear-gradient(
135deg,
#EF4444,
#DC2626
);

color:#fff;

}

#clearBtn:hover{

transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(239,68,68,.35);

}

#resetBtn{

background:
linear-gradient(
135deg,
#6C63FF,
#4F46E5
);

color:#fff;

}

#resetBtn:hover{

transform:translateY(-4px);

box-shadow:
0 15px 35px rgba(108,99,255,.35);

}

.actions button:active{

transform:scale(.96);

}

/* =========================================================
FEATURE SECTION
========================================================= */

.features{

display:grid;

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

gap:18px;

margin-top:40px;

}

.feature{

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

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

border-radius:18px;

padding:20px;

display:flex;

align-items:center;

gap:16px;

transition:.35s;

}

.feature:hover{

transform:translateY(-6px);

border-color:#6C63FF;

box-shadow:
0 20px 40px rgba(108,99,255,.15);

}

.feature-icon{

width:58px;

height:58px;

border-radius:16px;

background:
linear-gradient(
135deg,
#6C63FF,
#4F46E5
);

display:flex;

justify-content:center;

align-items:center;

font-size:22px;

color:#fff;

flex-shrink:0;

}

.feature h4{

font-size:17px;

margin-bottom:6px;

}

.feature p{

font-size:13px;

color:#B8C2D4;

line-height:1.5;

}

/* =========================================================
FOOTER
========================================================= */

.footer{

margin-top:45px;

padding-top:22px;

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

display:flex;

justify-content:space-between;

align-items:center;

flex-wrap:wrap;

gap:15px;

}

.footer p{

font-size:14px;

color:#94A3B8;

}

.footer a{

text-decoration:none;

color:#A78BFA;

font-weight:600;

transition:.3s;

display:flex;

align-items:center;

gap:8px;

}

.footer a:hover{

color:#fff;

transform:translateX(-3px);

}

/* =========================================================
ANIMATIONS
========================================================= */

@keyframes fadeUp{

from{

opacity:0;

transform:translateY(30px);

}

to{

opacity:1;

transform:translateY(0);

}

}

.result-card,
.features,
.footer{

animation:fadeUp .6s ease;

}

/* =========================================================
TOAST
========================================================= */

.toast{

position:fixed;

bottom:30px;

right:30px;

background:rgba(17,24,39,.95);

backdrop-filter:blur(20px);

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

border-left:5px solid #22C55E;

padding:18px 22px;

border-radius:16px;

display:flex;

align-items:center;

gap:12px;

color:#fff;

font-weight:600;

box-shadow:0 15px 40px rgba(0,0,0,.35);

opacity:0;

visibility:hidden;

transform:translateY(30px);

transition:.35s;

z-index:9999;

}

.toast.show{

opacity:1;

visibility:visible;

transform:translateY(0);

}

.toast i{

font-size:22px;

color:#22C55E;

}

/* =========================================================
LOADER
========================================================= */

.loader{

position:fixed;

top:0;

left:0;

width:100%;

height:100%;

background:rgba(5,8,22,.85);

backdrop-filter:blur(10px);

display:flex;

flex-direction:column;

justify-content:center;

align-items:center;

gap:20px;

z-index:99999;

visibility:hidden;

opacity:0;

transition:.3s;

}

.loader.show{

visibility:visible;

opacity:1;

}

.spinner{

width:65px;

height:65px;

border:6px solid rgba(255,255,255,.12);

border-top:6px solid #6C63FF;

border-radius:50%;

animation:spin 1s linear infinite;

}

.loader p{

font-size:16px;

font-weight:600;

color:#fff;

letter-spacing:.5px;

}

@keyframes spin{

100%{

transform:rotate(360deg);

}

}

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

input,
select,
button{

transition:.3s;

}

button:hover{

cursor:pointer;

}

button:active{

transform:scale(.97);

}

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

@media(max-width:900px){

.converter-card{

padding:28px;

}

.category-grid{

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

}

.converter-grid{

grid-template-columns:1fr;

}

.swap-box{

padding:10px 0;

}

#swapBtn{

transform:rotate(90deg);

}

#swapBtn:hover{

transform:rotate(270deg);

}

.features{

grid-template-columns:1fr;

}

.footer{

flex-direction:column;

text-align:center;

}

.header{

flex-direction:column;

align-items:flex-start;

gap:18px;

}

.header h1{

font-size:28px;

}

}

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

@media(max-width:600px){

body{

padding:15px;

}

.converter-wrapper{

padding:20px 0;

}

.converter-card{

padding:20px;

border-radius:20px;

}

.category-grid{

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

gap:12px;

}

.category{

height:80px;

}

.category i{

font-size:22px;

}

.category span{

font-size:12px;

}

.input-card{

padding:16px;

}

.input-card input,

.input-card select{

height:50px;

font-size:14px;

}

.result-card{

padding:22px;

}

#resultText{

font-size:28px;

}

.actions{

flex-direction:column;

}

.actions button{

width:100%;

}

.home-btn{

width:100%;

justify-content:center;

}

.toast{

left:15px;

right:15px;

bottom:15px;

}

}

/* =========================================================
EXTRA POLISH
========================================================= */

.converter-card{

animation:cardLoad .6s ease;

}

@keyframes cardLoad{

0%{

opacity:0;

transform:translateY(40px) scale(.96);

}

100%{

opacity:1;

transform:translateY(0) scale(1);

}

}

.category,
.feature,
.result-card,
.input-card{

transition:all .35s ease;

}

button{

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

}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button{

-webkit-appearance:none;
appearance:none;

margin:0;

}

input[type=number]{

-moz-appearance:textfield;
appearance:textfield;

}

/* =========================================================
END OF FILE
========================================================= */