/* ===================================
   SIUH V2 PREMIUM DESIGN SYSTEM
=================================== */

:root{

--bg:#070b14;
--surface:#0f172a;
--card:#111827;

--primary:#3b82f6;
--primary-hover:#2563eb;

--success:#10b981;
--danger:#ef4444;

--text:#f8fafc;
--muted:#94a3b8;

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

--radius-sm:14px;
--radius-md:20px;
--radius-lg:28px;

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

}

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

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

html{
scroll-behavior:smooth;
}

body{

background:
radial-gradient(
circle at top,
#162033,
#070b14
);

color:var(--text);

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

line-height:1.6;

min-height:100vh;

overflow-x:hidden;

}

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

.container{

width:min(1600px,92%);

margin-inline:auto;

padding:
clamp(16px,3vw,40px);

}

/* ===================================
   SIUH LOGO
=================================== */

#logo{

font-size:
clamp(
3rem,
8vw,
6rem
);

font-weight:900;

letter-spacing:.15em;

text-align:center;

margin:
clamp(30px,5vw,80px)
0;

cursor:pointer;

user-select:none;

transition:.3s ease;

}

#logo:hover{

transform:
scale(1.03);

}

/* ===================================
   HEADINGS
=================================== */

h1{

font-size:
clamp(
2rem,
5vw,
4rem
);

}

h2{

font-size:
clamp(
1.3rem,
2vw,
2rem
);

margin-top:40px;

margin-bottom:15px;

}

h3{

font-size:
1.1rem;

}

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

#notes,
#photos,
#pdfs{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(
min(100%,320px),
1fr
)
);

gap:24px;

margin-top:25px;

}

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

.card{

background:
linear-gradient(
180deg,
rgba(255,255,255,.08),
rgba(255,255,255,.03)
);

backdrop-filter:
blur(18px);

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

border-radius:
var(--radius-lg);

padding:
clamp(
18px,
2vw,
28px
);

box-shadow:
var(--shadow);

transition:
all .25s ease;

overflow:hidden;

}

.card:hover{

transform:
translateY(-6px);

}

/* ===================================
   IMAGES
=================================== */

.photo{

width:100%;

aspect-ratio:16/10;

object-fit:cover;

border-radius:
20px;

display:block;

}

/* ===================================
   VIDEO
=================================== */

.video{

width:100%;

border-radius:
20px;

display:block;

}

/* ===================================
   PDF
=================================== */

iframe{

width:100%;

height:400px;

border:none;

border-radius:
20px;

background:white;

}

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

button,
a{

display:inline-flex;

align-items:center;

justify-content:center;

gap:10px;

padding:
14px 22px;

border:none;

border-radius:
16px;

cursor:pointer;

font-weight:600;

text-decoration:none;

transition:.25s;

}

button{

background:
linear-gradient(
135deg,
var(--primary),
var(--primary-hover)
);

color:white;

}

button:hover{

transform:
translateY(-2px);

}

a{

background:
rgba(
59,
130,
246,
.15
);

color:#60a5fa;

border:
1px solid
rgba(
59,
130,
246,
.3
);

}

/* ===================================
   FORM
=================================== */

input,
textarea,
select{

width:100%;

padding:
16px;

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

border:
1px solid
var(--border);

color:white;

border-radius:
16px;

outline:none;

font-size:16px;

margin-top:10px;

transition:.2s;

}

input:focus,
textarea:focus,
select:focus{

border-color:
var(--primary);

box-shadow:
0 0 0 4px
rgba(
59,
130,
246,
.15
);

}

textarea{

min-height:200px;

resize:vertical;

}

/* ===================================
   DASHBOARD
=================================== */

.dashboard{

display:grid;

grid-template-columns:
repeat(
auto-fit,
minmax(220px,1fr)
);

gap:20px;

margin:30px 0;

}

.stat{

background:
linear-gradient(
180deg,
rgba(255,255,255,.06),
rgba(255,255,255,.03)
);

border:
1px solid
var(--border);

border-radius:
24px;

padding:25px;

min-height:140px;

display:flex;

flex-direction:column;

justify-content:center;

}

.stat h3{

color:var(--muted);

font-size:14px;

margin-bottom:10px;

}

.stat p{

font-size:
clamp(
1.8rem,
4vw,
3rem
);

font-weight:800;

}

/* ===================================
   STORAGE
=================================== */

#storageUsed{

color:#22c55e;

font-weight:800;

}

/* ===================================
   LOGIN POPUP
=================================== */

.popup{

display:none;

position:fixed;

inset:0;

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

backdrop-filter:
blur(12px);

justify-content:center;

align-items:center;

z-index:9999;

}

.box{

background:
#111827;

padding:
30px;

border-radius:
24px;

width:min(
420px,
90%
);

border:
1px solid
var(--border);

}

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

::-webkit-scrollbar{

width:8px;

}

::-webkit-scrollbar-thumb{

background:#334155;

border-radius:20px;

}

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

@media (max-width:768px){

.container{

width:95%;

}

#logo{

letter-spacing:.08em;

}

button,
a{

width:100%;

}

.card{

padding:16px;

}

}

/* ===================================
   ULTRA WIDE
=================================== */

@media (min-width:1800px){

.container{

width:min(
1800px,
90%
);

}

}