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

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{
height:100vh;
overflow:hidden;

padding:8px;

background:
radial-gradient(circle at top,#111827,#020617);

color:white;
}

/* ===== APP ===== */

.app{
height:calc(100vh - 16px);

max-width:1500px;

margin:auto;

display:flex;
flex-direction:column;

overflow:hidden;

border-radius:24px;

background:
linear-gradient(
145deg,
rgba(15,23,42,.96),
rgba(2,6,23,.99)
);

border:
1px solid rgba(139,92,246,.14);
}

/* ===== TOPBAR ===== */

.topbar{
height:60px;

padding:0 20px;

display:flex;
align-items:center;
justify-content:space-between;

flex-shrink:0;

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

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

.logo-section{
display:flex;
align-items:center;
gap:12px;
}

.logo-box{
width:38px;
height:38px;

border-radius:12px;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

display:flex;
align-items:center;
justify-content:center;

font-size:18px;
}

.logo-section h1{
font-size:22px;
font-weight:800;
}

.logo-section p{
font-size:11px;
color:#9ca3af;
}

/* ===== NAV ===== */

.nav{
display:flex;
gap:10px;
}

.nav a{
text-decoration:none;

color:#d4d4d8;

padding:7px 11px;

border-radius:10px;

font-size:13px;
font-weight:600;
}

.nav a:hover,
.active{
background:
rgba(124,58,237,.14);

color:#c084fc;
}

/* ===== PROFILE ===== */

.profile-wrap{
display:flex;
align-items:center;
gap:12px;
}

.profile{
width:36px;
height:36px;

border-radius:50%;

background:
linear-gradient(
135deg,
#7c3aed,
#4f46e5
);

display:flex;
align-items:center;
justify-content:center;
}

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

.main{
flex:1;

padding:10px;

display:grid;

grid-template-columns:
2.3fr .9fr;

grid-template-rows:
1fr 1fr;

gap:10px;

overflow:hidden;
}

/* ===== PANELS ===== */

.subjects-panel,
.overall-panel,
.panel{

background:
linear-gradient(
145deg,
rgba(15,23,42,.98),
rgba(17,24,39,.96)
);

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

border-radius:20px;

padding:14px;

overflow:hidden;
}

/* ===== SUBJECTS ===== */

.subjects-panel{
grid-column:1;
grid-row:1;

display:flex;
flex-direction:column;
}

.subjects-grid{
flex:1;

display:grid;

grid-template-columns:
1fr 1fr;

grid-template-rows:
1fr 1fr;

gap:12px;

min-height:0;
}

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

.subject-card{

background:
linear-gradient(
145deg,
rgba(30,41,59,.95),
rgba(15,23,42,.97)
);

border-radius:18px;

padding:14px;

display:flex;
flex-direction:column;

text-decoration:none;

color:white;

overflow:hidden;
}

.subject-icon{
width:42px;
height:42px;

border-radius:12px;

display:flex;
align-items:center;
justify-content:center;

font-size:20px;

margin-bottom:10px;
}

/* COLORS */

.blue{
background:linear-gradient(135deg,#3b82f6,#2563eb);
}

.green{
background:linear-gradient(135deg,#22c55e,#10b981);
}

.purple{
background:linear-gradient(135deg,#9333ea,#7c3aed);
}

.orange{
background:linear-gradient(135deg,#f59e0b,#f97316);
}

.subject-card h3{
font-size:15px;
margin-bottom:2px;
}

.subject-card p{
font-size:11px;
color:#9ca3af;
margin-bottom:10px;
}

.progress-bar{
height:7px;

background:#1e293b;

border-radius:999px;

overflow:hidden;

margin-bottom:8px;
}

.progress-fill{
height:100%;
}

.blue-fill{
width:78%;
background:#3b82f6;
}

.green-fill{
width:65%;
background:#22c55e;
}

.purple-fill{
width:82%;
background:#9333ea;
}

.orange-fill{
width:71%;
background:#f59e0b;
}

.subject-percent{
margin-top:auto;

font-size:14px;
font-weight:800;
}

/* ===== OVERALL PROGRESS ===== */

.overall-panel{
grid-column:2;
grid-row:1;

display:flex;
flex-direction:column;
}

.circle-wrap{
display:flex;
justify-content:center;

margin:4px 0 10px;
}

.circle{
width:118px;
height:118px;

border-radius:50%;

background:
conic-gradient(
#9333ea 0deg,
#a855f7 266deg,
#1e293b 266deg
);

display:flex;
align-items:center;
justify-content:center;
}

.circle-inner{
width:86px;
height:86px;

border-radius:50%;

background:#0f172a;

display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
}

.circle-inner h1{
font-size:24px;
font-weight:800;
}

.circle-inner p{
font-size:10px;
color:#9ca3af;
}

.overall-text{
text-align:center;

font-size:11px;

line-height:1.35;

margin-bottom:10px;

color:#cbd5e1;
}

.stats-row{
margin-top:auto;

display:grid;

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

gap:6px;

text-align:center;
}

.stats-row span{
font-size:10px;
color:#9ca3af;
}

.stats-row h3{
font-size:15px;
color:#a855f7;
}

/* ===== BOTTOM LEFT AREA ===== */

.bottom-left{
grid-column:1;
grid-row:2;

display:grid;

grid-template-columns:
1fr 1fr;

gap:10px;

min-height:0;
}

/* ===== BOTTOM RIGHT ===== */

.coming-panel{
grid-column:2;
grid-row:2;
}

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

.panel{
display:flex;
flex-direction:column;
justify-content:space-between;
}

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

.panel h2{
font-size:18px;
margin-bottom:10px;
}

/* ===== WEEKLY QUEST ===== */

.weekly-progress{
height:7px;

background:#1e293b;

border-radius:999px;

overflow:hidden;

margin:12px 0;
}

.weekly-fill{
width:70%;
height:100%;

background:
linear-gradient(
90deg,
#9333ea,
#7c3aed
);
}

.quest-bottom{
display:flex;
align-items:center;
justify-content:space-between;

margin-top:auto;
}

.quest-bottom button,
.coming-content button{

background:
linear-gradient(
135deg,
#9333ea,
#7c3aed
);

border:none;

color:white;

padding:8px 11px;

border-radius:10px;

font-size:11px;
font-weight:700;
}

/* ===== ITEMS ===== */

.paper-item,
.target-item{

display:flex;
align-items:center;
justify-content:space-between;

padding:7px 0;

font-size:12px;

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

/* ===== COMING SOON ===== */

.coming-content{
display:flex;
flex-direction:column;
justify-content:space-between;

height:100%;
}

.coming-content h1{
font-size:18px;
line-height:1.1;
margin-bottom:8px;
}

.coming-content p{
font-size:11px;
line-height:1.4;

color:#cbd5e1;

margin-bottom:10px;
}

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

@media(max-width:1200px){

body{
overflow:auto;
height:auto;
}

.app{
height:auto;
}

.main{
display:flex;
flex-direction:column;
}

.bottom-left{
grid-template-columns:1fr;
}

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

}

@media(max-width:850px){

.nav{
display:none;
}

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

body{
padding:0;
}

.app{
border-radius:0;
}

}