*{box-sizing:border-box;margin:0;padding:0;}
nav.navbar{background:var(--clr-surface-elevated)!important;backdrop-filter:blur(20px);border-bottom:1px solid var(--clr-border);padding:12px 0;}
.navbar-brand{font-size:1.3rem;font-weight:900;color:var(--clr-on-surface)!important;}
.hero-section{padding:80px 0 50px;text-align:center;position:relative;overflow:hidden;}
.blob{position:absolute;border-radius:50%;filter:blur(80px);opacity:0.1;pointer-events:none;}
.glass-card{background:var(--clr-surface-glass);border:1px solid var(--clr-border);border-radius:18px;padding:22px;backdrop-filter:blur(12px);transition:all 0.3s;}
.glass-card:hover{border-color:rgba(99,102,241,0.25);transform:translateY(-3px);}
.resource-card{background:var(--clr-surface-glass);border:1px solid var(--clr-border);border-radius:16px;overflow:hidden;transition:all 0.3s;}
.resource-card:hover{border-color:rgba(99,102,241,0.2);transform:translateY(-3px);box-shadow:0 12px 40px rgba(99,102,241,0.08);}
.resource-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:3rem;}
.resource-body{padding:16px;}
.type-badge{font-size:0.62rem;font-weight:800;padding:3px 8px;border-radius:50px;}
.filter-btn{padding:7px 16px;border-radius:8px;border:1px solid var(--clr-border);background:transparent;color:var(--clr-white-soft);font-family:'Cairo',sans-serif;font-size:0.8rem;font-weight:700;cursor:pointer;transition:all 0.2s;}
.filter-btn.active{background:rgba(99,102,241,0.12);border-color:rgba(99,102,241,0.25);color:var(--p2);}
.form-control{background:var(--clr-white-hover)!important;border:1px solid var(--clr-border)!important;color:var(--clr-text)!important;border-radius:12px!important;font-family:'Cairo',sans-serif!important;font-size:0.88rem!important;padding:11px 16px!important;}
.form-control::placeholder{color:var(--clr-muted)!important;}
footer{background:var(--clr-surface);border-top:1px solid var(--clr-border);padding:40px 0 20px;}

/* ── Light Mode ── */
html[data-theme="light"] .glass-card { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
html[data-theme="light"] .glass-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.1); }
html[data-theme="light"] .resource-card { box-shadow: 0 2px 12px rgba(0,0,0,0.06); }
html[data-theme="light"] .resource-card:hover { box-shadow: 0 12px 32px rgba(0,0,0,0.1); }
html[data-theme="light"] .filter-btn { box-shadow: 0 1px 3px rgba(0,0,0,0.03); }
html[data-theme="light"] .form-control { box-shadow: 0 1px 3px rgba(0,0,0,0.03) !important; }
html[data-theme="light"] .resource-card { background: #fff; }
html[data-theme="light"] .glass-card { background: #fff; }
html[data-theme="light"] .filter-btn { background: #fff; }