.module-collapsible .collapse-outer{position:relative;}
.module-toggle-floating{position:absolute; right:.5rem; bottom:.5rem; box-shadow:0 4px 12px -4px rgba(0,0,0,.5);}
.module-collapsible[data-collapsed="true"] .module-toggle-floating{background:var(--gray-700);} 
.module-collapsible[data-collapsed="false"] .module-toggle-floating{background:var(--gradient-1); color:#111; border-color:var(--accent);} 
/* Core palette */
:root{
  --gray-900:#121316;
  --gray-800:#1d1f23;
  --gray-700:#2a2d32;
  --gray-600:#3a3f46;
  --gray-100:#f2f4f6;
  --primary:#0d6efd;
  --accent: #ff6a3d; /* vivid orange */
  --pink:#ff3d81;
  --green:#42dc3d;
  --blue:#4dabf7;
  --maroon:#6d1431;
  --gradient-1: linear-gradient(135deg,var(--accent) 0%,var(--pink) 40%,var(--blue) 80%);
  --gradient-2: linear-gradient(120deg,var(--maroon),var(--accent));
  --gradient-3: linear-gradient(120deg,var(--blue),var(--primary));
  --gradient-soft: linear-gradient(145deg,#ffecd2 0%,#fcb7d4 25%,#c2e9fb 70%,#e0ffe3 100%);
  --radius-sm:6px;
  --radius:14px;
  --shadow-sm:0 2px 4px -2px rgba(0,0,0,.2),0 1px 3px rgba(0,0,0,.15);
  --shadow:0 6px 20px -8px rgba(0,0,0,.35),0 3px 6px -2px rgba(0,0,0,.25);
  --trans-fast:.18s cubic-bezier(.4,0,.2,1);
  --trans-slow:.5s cubic-bezier(.4,0,.2,1);
  --muted:#e0e1e2;
}

html{height:100%;}
body{font-family:Inter,Roboto,Arial,Helvetica,sans-serif; background:var(--gray-900); color:var(--gray-100); -webkit-font-smoothing:antialiased; min-height:100vh; display:flex; flex-direction:column;}

/* Typography tweaks */
h1,h2,h3,h4,h5,h6{letter-spacing:.5px; margin-bottom:0;}
.gradient-text{background:var(--gradient-3); -webkit-background-clip:text; background-clip:text; color:transparent;}
.gradient-text-alt{background:var(--gradient-1); -webkit-background-clip:text; background-clip:text; color:transparent;}
.retired{color:var(--muted); font-style:italic; }
.text-blue{color:var(--blue);}
.text-accent{color:var(--accent);}
.text-pink{color:var(--pink);}
.text-green{color:var(--green);}
.text-muted {color: var(--muted) !important;;}
/* Site header */
.site-header{background:linear-gradient(100deg,var(--gray-800),var(--gray-700)); box-shadow:var(--shadow-sm); position:sticky; top:0; z-index:20; border-bottom:1px solid rgba(255,255,255,.08);} 
.site-header .site-nav a{color:#fff; text-decoration:none; margin-left:1.2rem; position:relative; padding:.25rem 0;}
.site-header .site-nav a::after{content:""; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--gradient-1); transition:width var(--trans-fast);} 
.site-header .site-nav a:hover::after,.site-header .site-nav a.active::after{width:100%;}

/* Hero section */
.hero-intro{position:relative; overflow:hidden; padding:clamp(3rem,8vh,6rem) 0 4rem;}
.hero-intro .hero-bg{position:absolute; inset:0; background:
  linear-gradient(160deg,rgba(255,106,61,.9),rgba(109,20,49,.95)) ,
  repeating-linear-gradient(-55deg,rgba(255,255,255,.08) 0 12px, rgba(255,255,255,.02) 12px 24px);
  mix-blend-mode:hard-light;}
.hero-intro::before,.hero-intro::after{content:""; position:absolute; width:160%; height:120%; left:-30%; top:-10%; transform:rotate(-8deg); background:var(--gradient-soft); opacity:.18; filter:blur(8px); pointer-events:none;}
.hero-intro::after{transform:rotate(12deg); opacity:.12;}

/* Blue/Green variant for Web Dev hub */
.hero-intro.webdev-emerald .hero-bg{background:
  linear-gradient(160deg, rgba(77,171,247,.92), rgba(66,220,61,.92)) , /* blue -> green */
  repeating-linear-gradient(-55deg, rgba(255,255,255,.08) 0 12px, rgba(255,255,255,.02) 12px 24px);
}
.hero-actions .btn{box-shadow:var(--shadow-sm);} 

/* Floating content area overlapping hero */
.content-float{margin-top:-3rem; background:var(--gray-800); border:1px solid var(--gray-700); border-radius:var(--radius); box-shadow:var(--shadow); padding:2.5rem 2rem;} 

/* Fancy underline */
.fancy-underline{position:relative; display:inline-block;}
.fancy-underline::after{content:""; position:absolute; left:0; bottom:-6px; height:5px; width:100%; background:var(--gradient-1); border-radius:4px; filter:blur(1px);}
.section-subtitle{font-size:0.9rem; letter-spacing:2.5px; color:var(--accent);}
.tracking-wide{letter-spacing:2px;}

/* Cards */
.card{background:var(--gray-700); border:1px solid var(--gray-600); border-radius:var(--radius-sm); transition:transform var(--trans-fast), background var(--trans-slow), box-shadow var(--trans-fast);}
.card-chroma{position:relative; overflow:hidden;}
.card-chroma::before{content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(255,106,61,.35), rgba(255,61,129,.35) 40%, rgba(77,171,247,.35) 80%); opacity:0; transition:opacity var(--trans-fast); mix-blend-mode:overlay;}
.card-chroma:hover::before{opacity:1;}
.card:hover{box-shadow:0 10px 30px -10px rgba(239, 77, 191, 0.55);}
.card-title{font-weight:600; color:var(--accent);}

/* Buttons */
.btn-accent{--bs-btn-bg:var(--accent); --bs-btn-border-color:var(--accent); --bs-btn-hover-bg:var(--pink); --bs-btn-hover-border-color:var(--pink); --bs-btn-color:#111; font-weight:600; letter-spacing:.5px;}
.btn-outline-gradient{color:var(--accent); border:2px solid var(--accent); font-weight:600; letter-spacing:.5px;}
.btn-outline-gradient:hover{color:#fff; background:var(--gradient-1); border-color:var(--pink);}
.module-res-btn{cursor:pointer; z-index: 5;}
.module-res-btn .badge{pointer-events:none;}

/* Module resources modal grid */
.modal-content .res-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:1rem;}
.modal-content .res-item{position:relative; background:var(--gray-800); border:1px solid var(--gray-700); border-radius:12px; padding:.9rem .8rem .8rem; min-height:120px; display:flex; flex-direction:column; gap:.5rem; overflow:hidden;}
.modal-content .res-item .res-order{position:absolute; top:.45rem; right:.5rem; font-size:.6rem; background:var(--gray-700); color:#fff; padding:.1rem .4rem; border-radius:10px; border:1px solid var(--gray-600);}
.modal-content .res-icon{font-size:1.4rem; color:var(--accent);}
.modal-content .res-icon img{max-width:28px; max-height:28px; display:block;}
.modal-content .res-title{font-size:.85rem; font-weight:600; line-height:1.25;}
.modal-content .res-title a{color:var(--blue); text-decoration:none;}
.modal-content .res-title a:hover{color:#fff;}
.modal-xl{--bs-modal-width:min(95vw,1100px);} /* allow extra-wide modal on large viewports */

/* Utility nav link styling for home only */
body.home a{transition:color var(--trans-fast), background var(--trans-fast);} 

/* Footer */
.site-footer{background:linear-gradient(100deg,var(--gray-800),var(--gray-900)); color:var(--gray-100); border-top:1px solid var(--gray-700);} 

/* List group tweaks on dark */
.list-group-item{background:var(--gray-700); color:var(--gray-100); border-color:var(--gray-600);} 
.list-group-item-action:hover,
.list-group-item-action:focus {
  background: var(--gradient-2) !important;
  color: var(--gray-100) !important;
  transition: background 0.9s 0.9s /* 0.5s duration, 0.5s delay */ !important;
}

/* Scrollbar (webkit) subtle styling */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--gray-800);}
::-webkit-scrollbar-thumb{background:var(--gray-600); border-radius:20px; border:2px solid var(--gray-800);} 
::-webkit-scrollbar-thumb:hover{background:var(--accent);} 

/* Responsive adjustments */
@media (max-width: 991px){
  .content-float{margin-top:-2rem; padding:2rem 1.25rem;}
  .hero-intro{padding:4rem 0 3rem;}
  .hero-actions .btn{width:100%;}
  .site-header .site-nav a{margin-left:.9rem;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important;}
}

/* =============================
   Lesson Page Enhancements
   ============================= */
body.lesson-page{background:radial-gradient(circle at 20% 15%,rgba(255,106,61,.08),transparent 60%), radial-gradient(circle at 80% 70%,rgba(77,171,247,.08),transparent 65%), var(--gray-900);}
.lesson-hero{position:relative; padding:4.5rem 0 3.5rem; overflow:hidden;}
.lesson-hero::before{content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,106,61,.5),rgba(255,61,129,.4) 45%, rgba(61,220,151,.35) 75%, rgba(77,171,247,.55)); mix-blend-mode:lighten; opacity:.55;}
.lesson-hero::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(-60deg,rgba(255,255,255,.04) 0 14px, transparent 14px 28px); opacity:.4;}
.gradient-soft-bg{background:linear-gradient(140deg,var(--gray-800),var(--gray-700));}

/* Pills */
.pill{display:inline-flex; align-items:center; font-size:.7rem; text-transform:uppercase; letter-spacing:1px; padding:.45rem .7rem .4rem; border-radius:2rem; font-weight:600; background:var(--gray-700); color:#fff; border:1px solid var(--gray-600);} 
.pill-green{background:linear-gradient(120deg,var(--green),#b8ff5a); color:#102915;}
.pill-blue{background:linear-gradient(120deg,var(--blue),#82d4ff); color:#062338;}
.pill-pink{background:linear-gradient(120deg,var(--pink),#ff9ac1); color:#3d0a20;}
.pill-accent{background:linear-gradient(120deg,var(--accent),#ffd9cb); color:#3a1306;}

/* Topic cards */
.topic-card{background:var(--gray-700); border:1px solid var(--gray-600); padding:1rem .9rem; border-radius:var(--radius-sm); position:relative; overflow:hidden; transition:background var(--trans-fast), transform var(--trans-fast);} 
.topic-card::before{content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,106,61,.22),rgba(255,61,129,.22) 40%, rgba(77,171,247,.22)); opacity:0; transition:opacity var(--trans-fast); mix-blend-mode:overlay;} 
.topic-card:hover{transform:translateY(-4px);} 
.topic-card:hover::before{opacity:1;}
.topic-card h5{font-size:1rem; margin-bottom:.35rem;}

/* Code blocks */
.code-block, .code-card{background:var(--gray-800); border:1px solid var(--gray-600); border-radius:var(--radius-sm); position:relative;}
.code-block pre,.code-card pre{margin:0; padding:1rem 1.1rem; font-family:Menlo,Consolas,Monaco,monospace; font-size:.85rem; line-height:1.35; color:#e6f6ff; background:linear-gradient(120deg,#1c2530,#1e2733);} 
.code-card{padding:.25rem;}

/* Callouts */
.callout{border:1px solid var(--gray-600); border-left-width:5px; margin:0.5rem; padding:1rem 1rem .95rem; border-radius:var(--radius-sm); background:var(--gray-800); font-size:.9rem; line-height:1.45; color:var(--gray-100);} 
.callout-blue{border-left-color:var(--blue);} 
.callout-green{border-left-color:var(--green);} 
.callout-accent{border-left-color:var(--accent);} 

/* Checklist */
.checklist{list-style:none; padding-left:0; margin:0; display:grid; gap:.6rem;}
.checklist li{position:relative; padding-left:1.6rem; font-size:.9rem;}
.checklist li .fa-check{position:absolute; left:0; top:.15rem; color:var(--green);} 

/* TOC */
.toc{position:sticky; top:6.5rem;}
.toc-list li{margin-bottom:.4rem;}
.toc-list a{color:var(--gray-100); text-decoration:none; display:block; padding:.35rem .55rem; border-radius:6px; font-weight:500; font-size:.85rem; transition:background var(--trans-fast), color var(--trans-fast);} 
.toc-list a:hover{background:var(--gray-700);} 
.toc-list a.active{background:var(--gradient-1); color:#111;}

/* Section heading adjustments */
.section-heading{font-size:1.25rem; margin-bottom:1rem;}

/* Skip link */
.skip-link{position:absolute; left:-999px; top:auto; width:1px; height:1px; overflow:hidden;}
.skip-link:focus{left:1rem; top:1rem; width:auto; height:auto; background:#000; color:#fff; padding:.6rem 1rem; border-radius:var(--radius-sm); z-index:1000;}

/* Hero illustration */
.hero-illustration{position:relative;}
.hero-illustration::after{content:""; position:absolute; inset:0; background:radial-gradient(circle at 70% 30%,rgba(61,220,151,.5),transparent 60%); filter:blur(60px); opacity:.55; pointer-events:none; mix-blend-mode:overlay;}

/* Accessibility: focus states */
*:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

@media (max-width:1199px){
  .toc{display:flex; overflow-x:auto; background:var(--gray-800); padding:.6rem .75rem; border:1px solid var(--gray-700); border-radius:var(--radius-sm); margin-bottom:2rem; top:0;}
  .toc-list{display:flex; gap:.4rem;}
  .toc-list li{margin:0;}
  .toc-list a{white-space:nowrap;}
}

@media (max-width: 575px){
  .lesson-hero{padding:3.2rem 0 2.2rem;}
  .section-heading{font-size:1.15rem;}
}

/* Code example output blocks */
.example-output{background:#fff; border:1px solid var(--gray-600); padding:.9rem 1rem .95rem; border-radius:var(--radius-sm); font-size:.83rem; line-height:1.35; margin-top:.6rem; position:relative;}
.example-output::before{content:"Output"; position:absolute; top:-0.55rem; left:.85rem; background:var(--gradient-1); color:#111; font-size:.55rem; padding:2px 6px 3px; border-radius:12px; letter-spacing:1px; font-weight:600; box-shadow:0 2px 4px -1px rgba(0,0,0,.4);} 
.example-output code{background:rgba(255,255,255,.08); padding:2px 5px; border-radius:4px; font-size:.75rem;}
.example-output table{width:100%; border-collapse:collapse; font-size:.75rem;}
.example-output th,.example-output td{border:1px solid var(--gray-600); padding:.35rem .5rem; text-align:left;}
.example-output caption{caption-side:top; font-weight:600; margin-bottom:.35rem; font-size:.7rem; letter-spacing:1px; text-transform:uppercase;}
.example-output figure{margin:0;}
.example-output figcaption{font-size:.65rem; opacity:.8; margin-top:.3rem;}
.example-output a{color:var(--green);}
.example-output form{display:grid; gap:.5rem; max-width:340px;}
.example-output fieldset{border:1px solid var(--gray-600); padding:.6rem .8rem 1rem; border-radius:8px;}
.example-output legend{padding:0 .4rem; font-size:.7rem; letter-spacing:1px; text-transform:uppercase;}
.example-output button{background:var(--accent); border:none; padding:.45rem .75rem; border-radius:6px; font-size:.75rem; font-weight:600;}
.example-note{font-size:.7rem; opacity:.75; margin-top:.4rem;}

/* =============================
  Portal / Welcome Page Styles
  ============================= */
.welcome-hero{position:relative; padding:5rem 0 3.2rem; overflow:hidden;}
.welcome-hero::before{content:""; position:absolute; inset:-10%; background:radial-gradient(circle at 25% 35%,rgba(255,106,61,.55),transparent 60%), radial-gradient(circle at 70% 60%,rgba(77,171,247,.5),transparent 65%), linear-gradient(120deg,var(--gray-900),var(--gray-800)); filter:blur(40px); opacity:.65;}
.welcome-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(140deg,var(--accent),var(--pink),var(--blue)); mix-blend-mode:overlay; opacity:.22; animation:slowShift 14s linear infinite alternate;}
@keyframes slowShift{0%{transform:scale(1);}100%{transform:scale(1.12) translate3d(0,-2%,0);}}
.portal-grid .portal-card{background:var(--gray-800); border:1px solid var(--gray-700); padding:1.2rem 1.15rem 1.05rem; border-radius:18px; position:relative; display:flex; flex-direction:column; gap:.65rem; overflow:hidden; transition:transform .22s ease, box-shadow .25s ease;}
.portal-card:hover{transform:translateY(-6px); box-shadow:0 18px 42px -18px rgba(0,0,0,.7);}
.portal-card::before{content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(255,106,61,.55),rgba(255,61,129,.45),rgba(77,171,247,.55)); mix-blend-mode:overlay; opacity:0; transition:opacity .35s ease;}
.portal-card:hover::before{opacity:.9;}
.portal-card h3{font-size:1rem; margin:0; font-weight:600; letter-spacing:.5px;}
.portal-card p{font-size:.78rem; margin:0; line-height:1.35;}
.badge-ribbon{font-size:.55rem; text-transform:uppercase; background:var(--gray-700); padding:.22rem .6rem .18rem; border-radius:14px; font-weight:600; letter-spacing:.6px; align-self:flex-start;}
.badge-gradient{background:linear-gradient(120deg,var(--blue),var(--green)); color:#06231e;}
.quick-links a{font-size:.6rem; background:var(--gray-700); padding:.3rem .65rem .28rem; border-radius:16px; text-decoration:none; margin-right:.35rem; display:inline-block; margin-bottom:.35rem;}
.quick-links a:hover{background:var(--blue); color:#111;}
.mini-hero-card{background:linear-gradient(120deg,var(--gray-800),var(--gray-700)); border:1px solid var(--gray-700); padding:1rem 1.1rem; border-radius:16px; font-size:.8rem;}

/* =============================
  Simplified Home Page
  ============================= */
.home-welcome{background:linear-gradient(115deg,var(--gray-800),var(--gray-900)); border-bottom:1px solid var(--gray-700);} 
.home-section .section-title{margin-bottom:.6rem; letter-spacing:.5px;}
.home-section .section-hint{font-size:.9rem; opacity:.75; margin-top:-.2rem; margin-bottom:.9rem;}
.simple-list{list-style:none; padding:0; margin:0; display:grid; gap:.55rem; max-width:620px;}
.simple-list li{background:var(--gray-800); border:1px solid var(--gray-700); padding:.75rem .9rem; border-radius:12px; font-size:.88rem; line-height:1.25; transition:background var(--trans-fast), border-color var(--trans-fast);}
.simple-list li a{font-weight:600; text-decoration:none; color:var(--blue);} 
.simple-list li:hover{background:var(--gray-700); border-color:var(--gray-600);} 
.support-tip{background:var(--gray-800); border:1px solid var(--gray-700); padding:.85rem 1rem .8rem; border-radius:12px; font-size:.8rem;}

/* Home two-column layout with sticky avatar */
.home-layout{position:relative;}
.home-avatar-col{position:relative;}
.avatar-stick{position:sticky; bottom:0;}
@media (max-width: 991px){
  .avatar-stick{position:static; padding-bottom:0; margin-top:1rem;}
}

/* Mini block grids */
.mini-block-grid{display:grid; gap:1rem; grid-template-columns:1fr;}
@media (min-width: 992px){
  .mini-block-grid{grid-template-columns:1fr 1fr;}
}
.mini-block{display:flex; flex-direction:column; gap:.25rem; background:var(--gray-800); border:1px solid var(--gray-700); padding:.85rem .95rem .9rem; border-radius:14px; text-decoration:none; position:relative; overflow:hidden; transition:background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);}
.mini-block::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,106,61,.35),rgba(255,61,129,.35) 45%,rgba(77,171,247,.35)); opacity:0; mix-blend-mode:overlay; transition:opacity var(--trans-fast);} 
.mini-block:hover::before{opacity:.85;} 
.mini-block:hover{transform:translateY(-4px); border-color:var(--gray-600);} 
.mini-block:focus-visible{outline:2px solid var(--accent); outline-offset:3px;}
.mini-block-eyebrow{color:var(--accent); letter-spacing:1px; text-transform:uppercase; font-weight:600; opacity:.65;}
.mini-block-title{font-size:1.2rem; font-weight:600; letter-spacing:.5px;}
.mini-block-desc{font-size:0.8rem; opacity:.75;}
.webdev-mini-block .mini-block-eyebrow{color:var(--blue);}
.webdev-mini-block .mini-block::before{background:linear-gradient(135deg,rgba(77,171,247,.35),rgba(61,220,151,.35));}
.webdev-mini-block .mini-block:hover::before{opacity:.9;}
.webdev-mini-block .mini-block-title{color:var(--blue);}
.webdev-mini-block .mini-block:hover .mini-block-eyebrow{color:var(--green); opacity:.85;}
.webdev-mini-block .mini-block:hover .mini-block-title{color:#fff;}
.webdev-mini-block .mini-block:hover .mini-block-desc{opacity:.9;}
@media (max-width: 575px){
  .mini-block{padding:.75rem .85rem .8rem;}
  .mini-block-title{font-size:1rem;}
}

/* =============================
  Full-screen Home Panels
  ============================= */

/* Full-screen home panels */
@media (min-width: 768px){
  .vh-section{min-height:100vh; display:flex; flex-direction:column; justify-content:center; padding-block:4rem;}
  .vh-section:first-of-type{padding-top:5rem;} /* offset for header space */
}
@media (max-width: 767.98px){
  .vh-section{min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding-top:5.5rem; padding-bottom:3rem;}
}
.vh-section + .vh-section{border-top:1px solid var(--gray-800); position:relative;}
.vh-section + .vh-section::before{content:""; position:absolute; top:-1px; left:0; width:100%; height:1px;}

/* Optional smooth scroll snap (comment out if not desired) */

html, body{scroll-snap-type:y proximity; scroll-padding-top:4.5rem;}
.vh-section{scroll-snap-align:start;}
/* Let the final panel release so footer is reachable */
.vh-section:last-of-type{scroll-snap-align:none; min-height:calc(100vh - 12rem); padding-bottom:4rem;}

/* Scroll indicator */
.scroll-indicator{position:absolute; left:50%; bottom:1.75rem; transform:translateX(-50%); text-decoration:none; width:40px; height:40px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:1px solid var(--gray-600); background:rgba(0,0,0,.35); backdrop-filter:blur(4px); transition:background .3s,border-color .3s,opacity .4s;}
.scroll-indicator:hover{background:var(--gradient-1); border-color:var(--accent);} 
.scroll-indicator .chevron{position:relative; width:14px; height:14px; display:block;}
.chevron-down::before,.chevron-down::after{content:""; position:absolute; left:0; top:0; width:8px; height:2px; background:var(--gray-100); transform-origin:left center;}
.chevron-down::before{transform:rotate(40deg);} .chevron-down::after{transform:translateX(4px) rotate(-40deg);} 
.scroll-indicator.fade-out{opacity:0; pointer-events:none;}

/* Reveal animation */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease;}
.reveal.in-view{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1; transform:none; transition:none;}
}

/* Panel navigation dots */
.panel-nav{position:fixed; right:1.25rem; top:50%; transform:translateY(-50%); z-index:50;}
.panel-nav ul{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:.9rem;}
.panel-nav a.panel-dot{--size:14px; width:var(--size); height:var(--size); background:var(--gray-700); border:2px solid var(--gray-600); display:block; border-radius:50%; position:relative; transition:background .35s,border-color .35s, transform .35s;}
.panel-nav a.panel-dot:hover{background:var(--accent); border-color:var(--pink);} 
.panel-nav a.panel-dot.active{background:var(--gradient-1); border-color:var(--accent); box-shadow:0 0 0 4px rgba(255,106,61,.15);} 
@media (max-width: 991px){
  .panel-nav{top:auto; bottom:1rem; left:50%; right:auto; transform:translateX(-50%);}
  .panel-nav ul{flex-direction:row;}
}


/* No-JS fallback: ensure content visible */
.no-js .reveal{opacity:1!important; transform:none!important;}

/* =============================
  Footer Columns
  ============================= */
.footer-heading{font-size:.75rem; text-transform:uppercase; letter-spacing:1.5px; opacity:.7; margin-bottom:.6rem;}
.footer-links{list-style:none; padding:0; margin:0; display:grid; gap:.4rem; font-size:.72rem;}
.footer-links a{color:var(--gray-100); text-decoration:none;}
.footer-links a:hover{color:var(--accent);} 

/* =============================
  Courses Hub Styles
  ============================= */
.welcome-hero .filter-bar{display:flex; flex-wrap:wrap; gap:.65rem; margin:1rem 0 1.4rem;}
.filter-bar button{background:var(--gray-700); color:var(--gray-100); border:1px solid var(--gray-600); padding:.45rem .85rem; border-radius:28px; font-size:.65rem; letter-spacing:.5px; font-weight:600; cursor:pointer; transition:background .18s ease, color .18s ease;}
.filter-bar button.active,.filter-bar button:hover{background:var(--gradient-1); color:#111;}
@keyframes pulse{0%{transform:scale(1) rotate(0deg);}100%{transform:scale(1.25) rotate(8deg);}}
.course-grid .course-card{background:var(--gray-700); border:1px solid var(--gray-600); border-radius:16px; padding:1.3rem 1.15rem 1.15rem; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.55rem; transition:transform .2s ease, box-shadow .2s ease;}
.course-card:hover{transform:translateY(-6px); box-shadow:0 14px 34px -12px rgba(0,0,0,.65);}
.course-card::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,106,61,.55),rgba(255,61,129,.45) 40%,rgba(77,171,247,.5) 80%); mix-blend-mode:overlay; opacity:0; transition:opacity .3s ease;}
.course-card:hover::before{opacity:.9;}
.course-meta{font-size:.55rem; letter-spacing:1.2px; font-weight:600; opacity:.6; text-transform:uppercase;}
.course-card h3{font-size:1rem; margin:0; font-weight:600; letter-spacing:.5px;}
.course-desc{font-size:.72rem; line-height:1.2; flex-grow:1;}
.course-desc p,
.course-desc ul,
.course-desc ol,
.course-desc li{font-size:.72rem; line-height:1.2; margin:0 0 .35rem 0;}
.course-desc ul,
.course-desc ol{padding-left:1rem; list-style:disc outside;}
.course-desc ol{list-style:decimal outside;}
.course-desc ul ul, .course-desc ol ul{list-style:circle outside;}
.course-desc ul, .course-desc ol{margin-bottom:.5rem;}
/* Fallback: if markup uses <p class="course-desc"> then a list (browser auto-closes <p>)
  the list becomes a sibling, not a descendant — style those too */
.course-desc + ul,
.course-desc + ol{font-size:.72rem; line-height:1.2; padding-left:1rem; list-style:disc outside; margin-bottom:.5rem;}
.course-desc + ol{list-style:decimal outside;}
.course-desc + ul li,
.course-desc + ol li{font-size:.72rem; line-height:1.35;}
.topic-badges{display:flex; flex-wrap:wrap; gap:.35rem;}
.topic-badges span{background:var(--gray-700); font-size:.55rem; padding:.25rem .55rem .2rem; border-radius:14px; letter-spacing:.5px; font-weight:600; color:#fff;}
.webdev-badge{background:linear-gradient(120deg,var(--blue),var(--green)); color:#06231e!important;}
.shared-webdev a{font-size:.65rem; text-decoration:none; background:var(--gray-700); padding:.25rem .55rem; border-radius:20px;}
.shared-webdev a:hover{background:var(--blue); color:#111;}
.multi-link-badge{font-size:.55rem; background:var(--accent); color:#111; padding:.2rem .55rem; border-radius:14px; font-weight:600; letter-spacing:.5px;}
.retired-badge{font-size:.55rem; background:var(--muted); color:#111; padding:.2rem .55rem; border-radius:14px; font-weight:600; letter-spacing:.5px; text-transform:uppercase;}
.global-announcement{background:linear-gradient(180deg,var(--pink),var(--accent)); border:1px solid var(--gray-700); padding:1rem 1.15rem; border-radius:14px; display:flex; gap:.9rem; align-items:flex-start;}
.global-announcement i{font-size:1.2rem; background:var(--maroon); -webkit-background-clip:text; background-clip:text; color:transparent;}
@media (max-width: 575px){.welcome-hero{padding:3.5rem 0 2.2rem;} .course-card{padding:1.1rem 1rem;}}

/* =============================
  Web Dev Hub Styles
  ============================= */
.hub-hero{position:relative; padding:4.2rem 0 3rem; overflow:hidden;}
.hub-hero::before{content:""; position:absolute; inset:-10%; background:
  radial-gradient(circle at 30% 40%, rgba(255,106,61,.5), transparent 60%),
  radial-gradient(circle at 75% 65%, rgba(255,61,129,.45), transparent 65%),
  linear-gradient(115deg, var(--gray-900), var(--gray-800));
  opacity:.6;}
.hub-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(145deg, var(--accent) 0%, var(--pink) 100%); mix-blend-mode:overlay; opacity:.18;}
.resource-card{background:var(--gray-800); border:1px solid var(--gray-700); border-radius:18px; padding:1.2rem 1.15rem 1rem; display:flex; flex-direction:column; gap:.65rem; position:relative; overflow:hidden; transition:transform .18s ease, box-shadow .25s ease;}
.resource-card:hover{transform:translateY(-6px); box-shadow:0 18px 42px -16px rgba(0,0,0,.7);}
.resource-card::before{content:""; position:absolute; inset:0; background:linear-gradient(125deg,rgba(255,106,61,.5),rgba(255,61,129,.45),rgba(77,171,247,.55)); mix-blend-mode:overlay; opacity:0; transition:opacity .3s;}
.resource-card:hover::before{opacity:.85;}
.resource-card h3{font-size:.95rem; margin:0; letter-spacing:.5px; font-weight:600;}
.resource-card p{font-size:.75rem; line-height:1.35; margin:0;}
.badge-tier{font-size:.55rem; text-transform:uppercase; letter-spacing:1px; font-weight:600; background:var(--gray-700); padding:.25rem .55rem .2rem; border-radius:14px; display:inline-block;}
.diff-badge{background:linear-gradient(120deg,var(--accent),var(--pink)); color:#111;}
.topic-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem;}
.topic-list li{font-size:.55rem; background:var(--gray-700); padding:.25rem .55rem .2rem; border-radius:14px; letter-spacing:.5px; font-weight:600;}
.topic-list li.core{background:linear-gradient(120deg,var(--blue),var(--green)); color:#06231e;}
.collection-section{margin-top:3.5rem;}
.progression-map{background:var(--gray-800); border:1px solid var(--gray-700); padding:1rem 1.15rem; border-radius:16px; font-size:.7rem; line-height:1.3;}
.wave{position:absolute; left:0; bottom:0; width:100%; height:70px; pointer-events:none;}
.wave svg{width:100%; height:100%; display:block;}
.flip-x{transform:scaleX(-1);}
.support-box{background:linear-gradient(110deg,var(--gray-800),var(--gray-700)); border:1px solid var(--gray-700); padding:1rem 1.1rem; border-radius:14px; font-size:.75rem;}
.support-box strong{background:var(--gradient-1); -webkit-background-clip:text; background-clip:text; color:transparent;}
.index-grid .resource-card ul{margin:0; padding-left:1.05rem; font-size:.65rem; line-height:1.25;}
.anchor-list{columns:2; gap:1.25rem; font-size:.65rem;}
@media (max-width: 650px){.anchor-list{columns:1;} .hub-hero{padding:3.2rem 0 2.2rem;}}

/* =============================
  Fundamentals Hub Styles
  ============================= */
.fundamentals-hero{position:relative; padding:4rem 0 2.5rem; background:linear-gradient(135deg,rgba(255,106,61,.75),rgba(255,61,129,.6) 40%,rgba(61,220,151,.55) 70%,rgba(77,171,247,.65)); overflow:hidden;}
.fundamentals-hero::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(-55deg,rgba(255,255,255,.08) 0 14px, transparent 14px 28px); mix-blend-mode:overlay; opacity:.35;}
.module-card{background:var(--gray-800); border:1px solid var(--gray-700); border-radius:14px; padding:1.25rem 1.15rem 1.1rem; height:100%; position:relative; overflow:hidden; display:flex; flex-direction:column; gap:.4rem; transition:transform .18s ease, box-shadow .18s ease; color: var(--gray-100);}
.module-card:hover{transform:translateY(-6px); box-shadow:0 14px 32px -12px rgba(0,0,0,.55);}    
.module-card::before{content:""; position:absolute; inset:0; background:linear-gradient(140deg, rgba(255,106,61,.4), rgba(255,61,129,.35) 40%, rgba(77,171,247,.35) 80%); opacity:0; transition:opacity .25s ease; mix-blend-mode:overlay;}
.module-card:hover::before{opacity:.9;}
.module-card h3{font-size:1rem; margin:0; font-weight:600; letter-spacing:.5px;}
.module-meta{font-size:.65rem; letter-spacing:1px; text-transform:uppercase; opacity:.65; font-weight:600;}
.module-desc{font-size:.8rem; line-height:1.35; flex-grow:1;}
.module-tags{display:flex; flex-wrap:wrap; gap:.35rem;}
.module-tags span{background:var(--gray-700); color:#fff; font-size:.55rem; padding:.25rem .55rem .2rem; border-radius:20px; letter-spacing:.5px; font-weight:600;}
.module-card a.stretched-link{z-index:2;}
.category-label{display:inline-block; background:var(--gray-800); border:1px solid var(--gray-700); padding:.5rem .9rem; border-radius:40px; font-size:.65rem; letter-spacing:1px; text-transform:uppercase; margin-bottom:1.2rem;}
.topics-grid{margin-top:2rem;}
@media (max-width: 575px){.fundamentals-hero{padding:3.2rem 0 1.5rem;}}

/* Light theme option for Fundamentals page */
body.fundamentals-light{background:#fff; color:#111;}
.light-surface{background:#fff; color:#111;}
.light-surface h1,.light-surface h2,.light-surface h3,.light-surface h4,.light-surface h5,.light-surface h6{color:#111;}
.light-surface p,.light-surface li,.light-surface small{color:#222;}

/* Light card variant (Fundamentals page) */
body.fundamentals-light .module-card{background:#fff; border-color:#eee; color:#111; box-shadow:0 4px 16px -10px rgba(0,0,0,.12);} 
body.fundamentals-light .module-card:hover{transform:translateY(-6px); box-shadow:0 14px 36px -18px rgba(0,0,0,.18), 0 10px 26px -18px rgba(255,61,129,.25);} 
body.fundamentals-light .module-card::before{background:linear-gradient(140deg, rgba(255,106,61,.28), rgba(255,61,129,.24) 40%, rgba(77,171,247,.28) 80%); mix-blend-mode:normal;} 
body.fundamentals-light .module-card:hover::before{opacity:.75;} 

/* Paper sheet container (off-white page with subtle side shadows) */
.paper-sheet{position:relative; background:#fffdf8; color:#111; border:1px solid #eee; border-radius:16px; padding:1.5rem 1.25rem; box-shadow:0 18px 48px -24px rgba(0,0,0,.25), 0 6px 24px -18px rgba(0,0,0,.15);} 
.paper-sheet::before,.paper-sheet::after{content:""; position:absolute; top:12px; bottom:12px; width:18px; pointer-events:none;} 
.paper-sheet::before{left:-10px; background:radial-gradient(closest-side, rgba(0,0,0,.12), transparent 70%);} 
.paper-sheet::after{right:-10px; background:radial-gradient(closest-side, rgba(0,0,0,.12), transparent 70%);} 
.paper-sheet h1,.paper-sheet h2,.paper-sheet h3,.paper-sheet h4,.paper-sheet h5,.paper-sheet h6{color:#111;}
.paper-sheet p,.paper-sheet li,.paper-sheet small{color:#222;}
body.fundamentals-light .module-card h3{color:#111;} 
body.fundamentals-light .module-meta{opacity:.7; color:#666;} 
body.fundamentals-light .module-desc{color:#333;} 
body.fundamentals-light .module-tags span{background:#f7f7f8; color:#333; border:1px solid #eee;} 
/* Rebuilt Web Dev Hub additions */
.webdev-hub .hub-intro{font-size:.8rem; line-height:1.4; max-width:760px;}
.level-badge{--badge-bg:var(--gray-700); display:inline-block; font-size:.55rem; font-weight:600; letter-spacing:1px; text-transform:uppercase; background:var(--badge-bg); color:#fff; padding:.28rem .55rem .22rem; border-radius:14px; line-height:1; position:relative; top:-1px;}
.level-l2{--badge-bg:linear-gradient(120deg,var(--blue),var(--green)); color:#06231e;}
.level-l3{--badge-bg:linear-gradient(120deg,var(--pink),var(--accent)); color:#111;}
.level-shared{--badge-bg:linear-gradient(120deg,var(--accent),var(--blue)); color:#111;}
.level-stretch{--badge-bg:linear-gradient(120deg,var(--maroon),var(--pink));}
.badge-legend{display:flex; flex-wrap:wrap; gap:.45rem;}
.track-grid{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(230px,1fr));}
.track-card{background:var(--gray-800); border:1px solid var(--gray-700); border-radius:18px; padding:1.05rem .95rem .9rem; position:relative; display:flex; flex-direction:column; gap:.55rem; overflow:hidden; transition:transform .2s ease, box-shadow .25s ease, border-color .25s ease;}
.track-card::before{content:""; position:absolute; inset:0; background:linear-gradient(130deg,rgba(255,106,61,.5),rgba(255,61,129,.45),rgba(77,171,247,.55)); mix-blend-mode:overlay; opacity:0; transition:opacity .35s ease;}
.track-card:hover{transform:translateY(-6px); box-shadow:0 18px 46px -18px rgba(0,0,0,.75); border-color:var(--gray-600);} 
.track-card:hover::before{opacity:.85;}
.track-card.coming{opacity:.6;}

/* =============================
  Simple Web Dev Hub Header
  ============================= */
.slim-topbar{height:6px; background: var(--gray-900);} 
.hero-simple{position:relative; padding:5rem 0 3rem; background:var(--gray-900); color:#fff; overflow:hidden;}
.hero-simple::before{content:""; position:absolute; inset:-12%; background:
  radial-gradient(circle at 25% 35%, var(--accent) 0 40%, transparent 90%),
  radial-gradient(circle at 72% 68%, var(--pink) 0 40%, transparent 95%);
  opacity:.18; pointer-events:none; z-index:0;}
.hero-simple::after{content:""; position:absolute; inset:0; background:
  linear-gradient(140deg, var(--accent), var(--pink));
  opacity:.90; mix-blend-mode:normal; pointer-events:none; z-index:0;}
.hero-simple .container{position:relative; z-index:2;}
.hero-simple h1{margin:0;}
.hero-simple .wave{position:absolute; left:0; top:0; width:100%; height:70px; z-index:1;}
.hero-simple .wave svg{width:100%; height:100%; display:block;}
.hero-simple .wave path{fill:var(--gray-900);} /* match header color so it looks whole */

/* Wave at the top edge of the hero */
.hero-simple .wave-top{position:absolute; left:0; top:-1px; width:100%; height:70px; z-index:1;}
.hero-simple .wave-top svg{width:100%; height:100%; display:block; transform:scaleY(-1);} /* flip vertically */
.hero-simple .wave-top path{fill:var(--gray-900);} /* match header color */

/* Diagonal slash bottom alternative */
.slash-bottom{position:absolute; left:0; bottom:0; width:100%; height:120px; background:var(--gray-900); z-index:1;} 
/* Diagonal slash bottom (~steep). Adjust 85% to control steepness, and height for visual impact */
.slash-bottom{clip-path: polygon(0 0, 100% 85%, 100% 100%, 0% 100%);} 
.track-card-head{display:flex; align-items:center; gap:.5rem;}
.track-card-head h3{font-size:.78rem; margin:0; font-weight:600; letter-spacing:.6px;}
.track-card p{font-size:.68rem; line-height:1.25; margin:0;}
.mini-list{list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap:.35rem;}
.mini-list li{font-size:.55rem; background:var(--gray-700); padding:.25rem .5rem .2rem; border-radius:14px; letter-spacing:.5px; font-weight:600;}
.pill-link{display:inline-block; font-size:.55rem; letter-spacing:1px; font-weight:600; text-transform:uppercase; padding:.4rem .9rem .35rem; border-radius:18px; background:var(--gradient-1); color:#111; text-decoration:none; margin-top:auto; align-self:flex-start; box-shadow:0 4px 12px -4px rgba(0,0,0,.6);}
.pill-link:hover{filter:brightness(1.1);} 
.pill-link.disabled{opacity:.45; pointer-events:none; background:var(--gray-700); color:#fff; box-shadow:none;}
.section-intro{font-size:.7rem; line-height:1.3; opacity:.85; max-width:780px;}
.pathway-grid{display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));}
.pathway-block{background:var(--gray-800); border:1px solid var(--gray-700); border-radius:20px; padding:1.1rem 1rem 1rem; display:flex; flex-direction:column; gap:.6rem; position:relative; overflow:hidden; transition:transform .25s ease, border-color .25s ease, box-shadow .3s ease;}
.pathway-block::before{content:""; position:absolute; inset:0; background:linear-gradient(140deg,rgba(255,106,61,.5),rgba(255,61,129,.45) 40%,rgba(77,171,247,.55)); mix-blend-mode:overlay; opacity:0; transition:opacity .35s ease;}
.pathway-block:hover{transform:translateY(-6px); border-color:var(--gray-600); box-shadow:0 20px 48px -16px rgba(0,0,0,.75);} 
.pathway-block:hover::before{opacity:.9;}
.pathway-block header{display:flex; align-items:center; justify-content:space-between; gap:.75rem;}
.pathway-block header h3{font-size:.8rem; margin:0; letter-spacing:.6px; font-weight:600;}
.pathway-block p{font-size:.68rem; line-height:1.3; margin:0;}
.learning-map{font-size:.68rem; line-height:1.4; padding-left:1.05rem; counter-reset:step; display:grid; gap:.45rem;}
.learning-map li{margin:0 0 .1rem;}
@media (max-width:680px){
  .track-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
  .pathway-grid{grid-template-columns:repeat(auto-fill,minmax(190px,1fr));}
}
/* =============================
  Course Detail Pages
  ============================= */
body.course-detail .lesson-hero{padding:4.2rem 0 3.2rem;}
.module-block{background:var(--gray-800); border:1px solid var(--gray-700); border-radius:14px; padding:1.3rem 1.25rem 1.15rem; position:relative; overflow:hidden; transition:background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);} 
.module-block::before{content:""; position:absolute; inset:0; background:linear-gradient(135deg,rgba(255,106,61,.4),rgba(255,61,129,.35) 45%,rgba(77,171,247,.4) 80%); mix-blend-mode:overlay; opacity:0; transition:opacity .35s ease;} 
.module-block:hover{transform:translateY(-4px); border-color:var(--gray-600);} 
.module-block:hover::before{opacity:.9;}
.module-block h3{font-size:1rem;}
/* Module header with toggle */
.module-head{display:flex; gap:1rem; align-items:flex-start;}
.module-head-text{flex:1 1 auto; min-width:0;}
.module-toggle{background:var(--gray-700); border:1px solid var(--gray-600); color:var(--gray-100); width:34px; height:34px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; padding:0; cursor:pointer; transition:background var(--trans-fast), border-color var(--trans-fast), transform var(--trans-fast);} 
.module-toggle:hover{background:var(--gradient-1); color:#111; border-color:var(--accent);} 
.module-toggle:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
.module-toggle i{transition:transform .35s ease; font-size:.85rem;}
.module-toggle.open i{transform:rotate(180deg);} 
.visually-hidden{position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important;}
/* Bottom-right toggle placement */
.module-toggle-wrap{display:flex; justify-content:flex-end; margin-top:.6rem;}
.module-toggle-wrap .module-toggle{margin-left:auto;}
/* Character preview */
.module-preview{font-size:.78rem; line-height:1.35; opacity:.85; position:relative;}
.module-collapsible .collapse-inner{display:none;} /* hidden until expanded */
.module-collapsible[data-collapsed="false"] .collapse-inner{display:block;}
body.course-detail .toc{max-height:80vh; overflow:auto;}
body.course-detail .toc-list a{font-size:.7rem; letter-spacing:.4px;}
@media (max-width:1199px){body.course-detail .toc-list a{font-size:.75rem;}}
@media (max-width:575px){body.course-detail .lesson-hero{padding:3.3rem 0 2.2rem;} .module-block{padding:1.05rem 1rem .95rem;} }
/* Timeline & custom chips */
.timeline{list-style:decimal; padding-left:1.15rem; line-height:1.4;}
.timeline li{margin-bottom:.4rem; font-size:.72rem;}
.admin table code{font-size:.65rem;}
.admin .tracking-wide{letter-spacing:1.5px; font-size:.6rem; opacity:.7;}
.admin .module-item,.admin .resource-item{background:var(--gray-800);}
.admin .module-item strong,.admin .resource-item strong{font-weight:600;}
.resource-chips .pill{font-size:.55rem; padding:.35rem .65rem .3rem;}
/* Collapsible modules */
.module-collapsible .collapse-outer{position:relative; overflow:hidden; transition:max-height .45s ease;}
.module-collapsible .collapse-outer.is-truncatable[data-collapsed="true"]::after{content:""; position:absolute; left:0; right:0; bottom:0; height:55px; background:linear-gradient(to bottom,rgba(29,31,35,0), var(--gray-800) 70%);} 
.module-collapsible .toggle-more{background:var(--gray-700); border:1px solid var(--gray-600); color:var(--gray-100); font-size:.6rem; letter-spacing:.5px; padding:.4rem .75rem .35rem; border-radius:18px; cursor:pointer; font-weight:600; margin-top:.75rem; transition:background var(--trans-fast), border-color var(--trans-fast), color var(--trans-fast);} 
.module-collapsible .toggle-more:hover{background:var(--gradient-1); color:#111; border-color:var(--accent);} 
.unit-resources{background:var(--gray-700); border:1px solid var(--gray-600); border-radius:12px; padding:.9rem .95rem .85rem; font-size:.7rem; position:relative;}
.unit-resources .unit-subheading{font-size:.65rem; text-transform:uppercase; letter-spacing:1px; margin:0 0 .5rem; opacity:.75; font-weight:600;}
.unit-resources .unit-links{list-style:none; padding:0; margin:0; display:grid; gap:.4rem; font-size:.8rem;}
.unit-resources .unit-links a{color:var(--blue); text-decoration:none; font-weight:600;}
.unit-resources .unit-links a:hover{color:var(--accent);} 
/* Resource icon grid */
.resource-icon-grid{list-style:none; padding:0; margin:0; display:grid; gap:1.2rem; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:stretch;}
.resource-icon-grid li{margin:0;}
.resource-icon{--icon-bg:var(--gray-700); position:relative; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; text-decoration:none; background:var(--icon-bg); border:1px solid var(--gray-600); border-radius:14px; padding:1rem .65rem .75rem; gap:.55rem; font-size:.9rem; letter-spacing:.5px; text-align:center; font-weight:600; min-height:140px; overflow:hidden; transition:background var(--trans-fast), transform var(--trans-fast), border-color var(--trans-fast), box-shadow var(--trans-fast);} 
.resource-icon i{font-size:4rem; line-height:1.5; background:var(--gradient-2); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 4px 10px rgba(0,0,0,.4));}
.resource-icon span{display:block; line-height:1.15; opacity:.85;}
.resource-icon:hover{transform:translateY(-6px); border-color:var(--accent); box-shadow:0 10px 26px -10px rgba(0,0,0,.65);} 
.resource-icon:hover i{filter:drop-shadow(0 6px 14px rgba(0,0,0,.55));}
.resource-icon.icon-pdf{--icon-bg:linear-gradient(140deg,var(--gray-700),var(--gray-800));}
.resource-icon.icon-slides{--icon-bg:linear-gradient(140deg,var(--gray-700),var(--gray-700));}
.resource-icon.icon-sheet{--icon-bg:linear-gradient(140deg,var(--gray-700),var(--gray-800));}
.resource-icon.icon-guide{--icon-bg:linear-gradient(140deg,var(--gray-700),var(--gray-800));}
.resource-icon.icon-check{--icon-bg:linear-gradient(140deg,var(--gray-700),var(--gray-800));}
.resource-icon.icon-tips{--icon-bg:linear-gradient(140deg,var(--gray-700),var(--gray-800));}
@media (max-width:900px){
  .resource-icon-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:575px){
  .resource-icon-grid{grid-template-columns:1fr; gap:.85rem;}
  .resource-icon{min-height:120px; padding:.85rem .55rem .65rem;}
  .resource-icon i{font-size:2rem;}
}