@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--bg:#080808;--gold:#39FF88;--white:#fff;--muted:#a0a0a0;--card:#151515;--line:rgba(57,255,136,.28)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--bg);color:var(--white);font-family:'Space Grotesk',sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}.topbar{height:82px;padding:0 7%;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(255,255,255,.07);position:sticky;top:0;background:rgba(8,8,8,.94);backdrop-filter:blur(14px);z-index:10}.brand{font:600 30px 'Rajdhani';letter-spacing:-2px}.brand span,.welcome-mark span{color:var(--gold)}.nav{display:flex;gap:10px}.nav a{display:flex;align-items:center;gap:8px;padding:11px 15px;border:1px solid transparent;border-radius:3px;color:var(--muted);font-size:11px;letter-spacing:1px;transition:.25s}.nav a span{font-size:19px;color:var(--gold)}.nav a:hover,.nav a.active{border-color:var(--line);color:white;background:rgba(57,255,136,.06)}.container{width:min(1160px,86%);margin:auto}.welcome-screen{min-height:calc(100vh - 82px);display:flex;align-items:center;padding:8% 13%;position:relative;overflow:hidden;background:radial-gradient(ellipse at 85% 50%,rgba(57,255,136,.10),transparent 38%)}.welcome-content{position:relative;z-index:1;max-width:650px}.eyebrow{font-size:10px;letter-spacing:3px;color:var(--gold);font-weight:700}.welcome-content h1,.hero h1,.page-title h1{font:500 clamp(48px,7vw,88px)/1.05 'Rajdhani';margin:22px 0}.welcome-content h1 em,.hero h1 em,.page-title h1 em,.section-heading h2 em,.profile-banner h2 em{color:var(--gold);font-weight:500}.muted{color:var(--muted);line-height:1.8}.gold-btn{margin-top:28px;background:var(--gold);color:#100d08;border:0;padding:16px 23px;font-size:10px;font-weight:700;letter-spacing:1.8px;transition:.25s}.gold-btn:hover{transform:translateY(-3px);box-shadow:0 8px 30px #39ff8840}.gold-btn span{margin-left:22px}.welcome-mark{position:absolute;right:12%;top:24%;font:italic 220px 'Rajdhani';color:rgba(57,255,136,.08)}.welcome-line{position:absolute;width:1px;height:65%;right:9%;top:18%;background:linear-gradient(transparent,var(--gold),transparent);opacity:.5}.hero{display:grid;grid-template-columns: .85fr 1.15fr;gap:9%;align-items:center;padding:95px 0 85px}.hero-photo{height:510px;max-width:390px;position:relative;border:1px solid var(--gold);padding:10px}.hero-photo img,.profile-image img,.family-photo img{width:100%;height:100%;object-fit:cover;display:block;background:#151515}.photo-upload-wrap{position:relative}.upload-chip{position:absolute;bottom:12px;left:12px;background:#080808e8;border:1px solid var(--gold);padding:9px 12px;color:var(--gold);font-size:10px;letter-spacing:.7px;cursor:pointer}.upload-chip input{display:none}.hero-copy .hello{letter-spacing:5px;color:var(--muted);font-size:12px;margin:32px 0 0}.hero h1{font-size:clamp(50px,6vw,78px);margin:12px 0 24px}.gold-rule{width:75px;height:1px;background:var(--gold);margin:28px 0}.small-note{font-size:13px;color:var(--muted);line-height:1.8;max-width:430px}.home-navigation{padding:35px 0 100px}.section-heading h2{font:500 40px 'Rajdhani';margin:12px 0 35px}.nav-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.nav-card{min-height:175px;border:1px solid var(--line);background:var(--card);padding:23px;display:flex;flex-direction:column;position:relative;transition:.3s}.nav-card:hover{transform:translateY(-7px);border-color:var(--gold);box-shadow:0 10px 35px #39ff8815}.nav-icon{font-size:27px;color:var(--gold);margin-bottom:22px}.nav-card b{font-size:10px;letter-spacing:1.2px}.nav-card small{color:var(--muted);margin-top:8px;font-size:11px}.arrow{position:absolute;right:18px;top:20px;color:var(--gold)}footer{text-align:center;border-top:1px solid #ffffff12;padding:25px;color:#777;font-size:9px;letter-spacing:2px}footer span{color:var(--gold);padding:0 8px}.page-main{padding:70px 0 100px}.page-title{text-align:center;margin-bottom:55px}.page-title h1{font-size:clamp(42px,6vw,68px);margin:15px 0}.page-title .muted{font-size:13px}.profile-banner{display:grid;grid-template-columns:240px 1fr;gap:40px;align-items:center;padding:25px;border:1px solid var(--line);background:linear-gradient(110deg,#151515,#0c0c0c);margin-bottom:55px}.profile-image{height:270px;border:1px solid var(--gold);padding:7px}.profile-banner h2{font:500 42px 'Rajdhani';margin:12px 0}.info-section{margin:45px 0}.info-section h2{font:500 26px 'Rajdhani';margin-bottom:20px}.info-section h2 span{color:var(--gold);margin-right:10px}.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.info-card{padding:20px;background:var(--card);border:1px solid #ffffff10;min-height:83px}.info-card small{display:block;color:var(--gold);font-size:9px;letter-spacing:1.5px;margin-bottom:10px}.info-card b{font-size:13px;font-weight:500;line-height:1.6;outline:none}.info-card b:focus{border-bottom:1px solid var(--gold)}.info-card.wide{grid-column:span 3}.edit-tip{font-size:11px;color:#888;border-left:2px solid var(--gold);padding:12px 16px;background:#151515}.tabs{display:flex;justify-content:center;gap:10px;margin:0 auto 35px;flex-wrap:wrap}.tab,.outline-btn{padding:13px 20px;background:transparent;border:1px solid var(--line);color:var(--muted);font-size:10px;letter-spacing:1.2px;transition:.25s}.tab:hover,.tab.active,.outline-btn:hover{color:var(--gold);border-color:var(--gold);background:#39ff880d}.gallery-heading{text-align:center;margin-bottom:25px}.gallery-heading h2{font:500 30px 'Rajdhani'}.gallery-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}.achievement-card{border:1px solid var(--line);background:var(--card);padding:8px;cursor:pointer;transition:.25s;min-width:0}.achievement-card:hover{transform:translateY(-5px);border-color:var(--gold);box-shadow:0 10px 25px #39ff8812}.achievement-thumb{height:150px;background:linear-gradient(145deg,#24211c,#101010);display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}.achievement-thumb img{width:100%;height:100%;object-fit:cover}.placeholder-icon{font:40px 'Rajdhani';color:#39ff8870}.achievement-card h3{font-size:11px;margin:12px 5px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.achievement-card small{display:block;color:var(--muted);font-size:9px;margin:0 5px 8px}.upload-small{display:block;margin:8px 5px 5px;color:var(--gold);font-size:9px;cursor:pointer}.upload-small input{display:none}.family-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.family-card{background:var(--card);border:1px solid var(--line);transition:.3s}.family-card:hover{transform:translateY(-5px);border-color:var(--gold)}.family-photo{height:330px;padding:9px}.family-copy{padding:20px 22px 25px}.family-copy h2{font:500 27px 'Rajdhani';margin:8px 0}.family-copy p:not(.eyebrow){font-size:12px;line-height:1.8;color:var(--muted);min-height:85px}.text-btn{background:none;border:0;color:var(--gold);font-size:9px;letter-spacing:1.2px;padding:10px 0}.family-quote{text-align:center;margin:100px auto 20px;padding:45px 20px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.family-quote span{font:70px 'Rajdhani';color:var(--gold)}.family-quote h2{font:500 34px/1.4 'Rajdhani'}.modal{position:fixed;inset:0;z-index:30;display:none;align-items:center;justify-content:center;padding:20px}.modal.open{display:flex}.modal-backdrop{position:absolute;inset:0;background:#000d;backdrop-filter:blur(8px)}.modal-box{position:relative;z-index:1;width:min(600px,95vw);background:#151515;border:1px solid var(--gold);padding:35px;animation:pop .25s ease}.modal-close{position:absolute;right:15px;top:10px;background:none;border:0;color:var(--gold);font-size:28px}.flip-card{height:500px;perspective:1200px;cursor:pointer}.flip-inner{height:100%;position:relative;transform-style:preserve-3d;transition:transform .7s}.flip-card.flipped .flip-inner{transform:rotateY(180deg)}.flip-front,.flip-back{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);padding:15px;display:flex;align-items:center;justify-content:center;flex-direction:column}.flip-front img{width:100%;height:100%;object-fit:contain;background:#090909}.flip-front span{position:absolute;bottom:22px;background:#080808d9;color:var(--gold);padding:9px 14px;font-size:9px;letter-spacing:2px}.flip-back{transform:rotateY(180deg);text-align:center;padding:40px}.flip-back h2{font:500 32px 'Rajdhani'}.flip-back p{max-width:400px}.gold-text{color:var(--gold)}.message-box{max-width:520px;padding:55px 45px}.message-box p:last-child{font:500 22px/1.8 'Rajdhani';color:#eee}.outline-btn{margin-top:15px}@keyframes pop{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.nav-cards{grid-template-columns:repeat(2,1fr)}.gallery-grid{grid-template-columns:repeat(3,1fr)}.family-grid{grid-template-columns:1fr 1fr}.hero{gap:5%}.info-grid{grid-template-columns:repeat(2,1fr)}.info-card.wide{grid-column:span 2}}@media(max-width:600px){.topbar{height:auto;min-height:72px;padding:12px 5%;align-items:flex-start;gap:12px;flex-direction:column}.nav{width:100%;justify-content:space-between;gap:2px}.nav a{padding:8px 5px;gap:4px;flex-direction:column;font-size:8px}.nav a span{font-size:17px}.container{width:90%}.welcome-screen{min-height:75vh;padding:12% 8%}.welcome-mark{font-size:130px;right:4%;top:15%}.hero{grid-template-columns:1fr;padding:55px 0;gap:35px}.hero-photo{height:420px;width:85%;margin:auto}.hero-copy{text-align:center}.gold-rule{margin:25px auto}.nav-cards{grid-template-columns:1fr 1fr}.nav-card{padding:16px;min-height:155px}.nav-card b{font-size:9px}.page-main{padding:45px 0 70px}.profile-banner{grid-template-columns:1fr;text-align:center}.profile-image{width:210px;margin:auto}.info-grid{grid-template-columns:1fr 1fr;gap:8px}.info-card{padding:14px}.info-card.wide{grid-column:span 2}.gallery-grid{grid-template-columns:repeat(2,1fr);gap:9px}.achievement-thumb{height:125px}.family-grid{grid-template-columns:1fr}.family-photo{height:370px}.flip-card{height:430px}.modal-box{padding:25px 18px}.message-box{padding:45px 25px}.family-quote h2{font-size:27px}}

/* FIXED-SCREEN PRESENTATION: every page fits the browser window without page scrolling. */
html, body { width:100%; height:100%; min-height:0; overflow:hidden; }
html { scroll-behavior:auto; }
body { height:100dvh; }
.topbar { height:72px; min-height:72px; position:relative; padding:0 5%; }
footer { height:30px; padding:9px 12px; position:relative; font-size:8px; }
body > main { height:calc(100dvh - 102px); min-height:0; overflow:hidden; }
.container { width:90%; max-width:1240px; }
/* Home */
body[data-page="home"] > main { position:relative; }
#welcomeScreen { position:absolute; inset:0; z-index:20; min-height:0; height:100%; padding:5% 12%; }
.hero { height:66%; min-height:0; padding:2.5vh 0 1vh; gap:7%; }
.hero-photo { height:min(48vh,430px); max-width:330px; }
.hero h1 { font-size:clamp(42px,5vw,68px); }
.home-navigation { height:31%; padding:1vh 0 1.5vh; }
.section-heading h2 { font-size:30px; margin:5px 0 14px; }
.nav-card { min-height:112px; padding:16px; }
.nav-icon { margin-bottom:10px; }
/* Compact personal-information dashboard */
body[data-page="personal"] .page-main { height:100%; padding:2vh 0 1vh; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:auto auto 1fr auto; column-gap:18px; row-gap:8px; }
body[data-page="personal"] .page-title { grid-column:1/-1; margin:0; }
body[data-page="personal"] .page-title h1 { font-size:clamp(30px,3.4vw,46px); margin:3px 0; }
body[data-page="personal"] .page-title .muted { display:none; }
body[data-page="personal"] .profile-banner { grid-column:1/-1; grid-template-columns:105px 1fr; gap:18px; padding:9px 14px; margin:0; min-height:0; }
body[data-page="personal"] .profile-image { height:105px; padding:4px; }
body[data-page="personal"] .profile-banner h2 { font-size:25px; margin:3px 0; }
body[data-page="personal"] .profile-banner .small-note { font-size:10px; line-height:1.35; margin:4px 0; }
body[data-page="personal"] .profile-banner .muted { font-size:11px; line-height:1.3; margin:4px 0; }
body[data-page="personal"] .info-section { margin:0; min-width:0; overflow:hidden; }
body[data-page="personal"] .info-section h2 { font-size:18px; margin:3px 0 7px; }
body[data-page="personal"] .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
body[data-page="personal"] .info-card { min-height:0; padding:7px 9px; overflow:hidden; }
body[data-page="personal"] .info-card small { font-size:7px; margin-bottom:3px; letter-spacing:1px; }
body[data-page="personal"] .info-card b { display:block; font-size:9px; line-height:1.25; overflow-wrap:anywhere; }
body[data-page="personal"] .info-card.wide { grid-column:span 2; }
body[data-page="personal"] .edit-tip { grid-column:1/-1; margin:0; padding:6px 10px; font-size:9px; }
/* Achievements: all ten flashcards visible at once */
body[data-page="achievements"] .page-main { height:100%; padding:2vh 0 1vh; }
body[data-page="achievements"] .page-title { margin:0 0 10px; }
body[data-page="achievements"] .page-title h1 { font-size:clamp(32px,4vw,50px); margin:5px 0; }
body[data-page="achievements"] .page-title .muted { font-size:10px; line-height:1.35; }
body[data-page="achievements"] .tabs { margin:0 auto 10px; gap:7px; }
body[data-page="achievements"] .tab { padding:9px 14px; font-size:9px; }
.gallery-heading { margin-bottom:10px; }
.gallery-heading h2 { font-size:21px; margin:3px 0; }
.gallery-heading .muted { font-size:10px; }
.gallery-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; }
.achievement-card { padding:5px; }
.achievement-thumb { height:clamp(76px,13vh,118px); }
.achievement-card h3 { font-size:9px; margin:6px 3px 3px; }
.achievement-card small,.upload-small { font-size:8px; margin:4px 3px; }
.flip-card { height:min(64vh,480px); }
/* Family: three profile cards fit in one presentation screen */
body[data-page="family"] .page-main { height:100%; padding:2vh 0 1vh; }
body[data-page="family"] .page-title { margin:0 0 12px; }
body[data-page="family"] .page-title h1 { font-size:clamp(34px,4vw,52px); margin:4px 0; }
body[data-page="family"] .page-title .muted { font-size:10px; }
.family-grid { height:calc(100% - 115px); grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.family-card { min-height:0; overflow:hidden; }
.family-photo { height:53%; min-height:0; padding:6px; }
.family-copy { padding:10px 13px; }
.family-copy h2 { font-size:21px; margin:4px 0; }
.family-copy p:not(.eyebrow) { font-size:10px; line-height:1.45; min-height:0; margin:6px 0; }
.family-copy .eyebrow { font-size:8px; }
.family-quote { display:none; }
/* Keep the layout fixed on smaller screens too; content is condensed rather than page-scrolled. */
@media (max-width:900px) {
 .topbar { padding:0 3%; }
 .nav { gap:2px; }
 .nav a { padding:8px 9px; font-size:9px; }
 .container { width:94%; }
 .hero { gap:4%; }
 .hero-photo { height:42vh; }
 .nav-card { min-height:90px; }
 body[data-page="personal"] .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .gallery-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:5px; }
 .family-grid { gap:8px; }
 .family-copy { padding:8px; }
}
@media (max-width:600px) {
 .topbar { height:76px; min-height:76px; padding:6px 3%; align-items:center; flex-direction:row; }
 .brand { font-size:23px; }
 .nav { width:auto; flex:1; justify-content:flex-end; }
 .nav a { padding:5px 4px; gap:2px; font-size:7px; }
 .nav a span { font-size:14px; }
 body > main { height:calc(100dvh - 106px); }
 .hero { grid-template-columns:.8fr 1.2fr; padding:2vh 0; height:65%; gap:12px; }
 .hero-photo { width:100%; height:34vh; }
 .hero-copy .hello { font-size:9px; margin-top:12px; }
 .hero h1 { font-size:clamp(28px,7vw,42px); }
 .hero-copy .muted,.hero-copy .small-note { font-size:9px; line-height:1.4; }
 .home-navigation { height:34%; padding:1vh 0; }
 .section-heading h2 { font-size:21px; }
 .nav-cards { grid-template-columns:repeat(2,1fr); gap:6px; }
 .nav-card { min-height:74px; padding:8px; }
 .nav-icon { font-size:17px; margin-bottom:5px; }
 .nav-card b { font-size:7px; }
 .nav-card small { font-size:7px; margin-top:3px; }
 #welcomeScreen { padding:12% 8%; }
 .welcome-content h1 { font-size:48px; }
 body[data-page="personal"] .page-main { grid-template-columns:1fr 1fr; column-gap:7px; row-gap:5px; padding:1vh 0; }
 body[data-page="personal"] .page-title h1 { font-size:25px; }
 body[data-page="personal"] .eyebrow { font-size:7px; letter-spacing:1px; }
 body[data-page="personal"] .profile-banner { grid-template-columns:68px 1fr; gap:8px; padding:6px; }
 body[data-page="personal"] .profile-image { height:72px; }
 body[data-page="personal"] .profile-banner h2 { font-size:17px; }
 body[data-page="personal"] .profile-banner .small-note { display:none; }
 body[data-page="personal"] .info-section h2 { font-size:13px; }
 body[data-page="personal"] .info-grid { gap:4px; }
 body[data-page="personal"] .info-card { padding:5px; }
 body[data-page="personal"] .info-card small { font-size:6px; }
 body[data-page="personal"] .info-card b { font-size:7px; }
 body[data-page="personal"] .edit-tip { font-size:7px; }
 body[data-page="achievements"] .page-title h1 { font-size:27px; }
 body[data-page="achievements"] .page-title .muted { display:none; }
 body[data-page="achievements"] .tab { padding:7px 6px; font-size:7px; }
 .gallery-grid { grid-template-columns:repeat(5,minmax(0,1fr)); gap:3px; }
 .achievement-card { padding:3px; }
 .achievement-thumb { height:8vh; min-height:48px; }
 .achievement-card h3 { font-size:6px; margin:3px 1px; }
 .achievement-card small,.upload-small { font-size:6px; margin:2px 1px; }
 body[data-page="family"] .page-title h1 { font-size:29px; }
 .family-grid { height:calc(100% - 90px); gap:5px; }
 .family-photo { height:45%; padding:3px; }
 .family-copy { padding:5px; }
 .family-copy h2 { font-size:15px; }
 .family-copy p:not(.eyebrow) { font-size:8px; line-height:1.3; }
 .family-copy .text-btn { font-size:7px; }
 .modal-box { padding:22px 12px; }
 .flip-card { height:60vh; }
}
body[data-page="personal"] .page-main { grid-template-rows:auto auto minmax(0,1fr) minmax(0,1fr) auto; }
body[data-page="personal"] .info-section { align-self:stretch; }


/* DARK GREEN + BLACK TECHNOLOGY THEME */
:root{--bg:#030906;--gold:#39FF88;--white:#E9FFF1;--muted:#91A99A;--card:#07130D;--line:rgba(57,255,136,.30)}
html,body{background:#030906;color:#E9FFF1;overflow:hidden}
body{background-image:linear-gradient(rgba(57,255,136,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,136,.035) 1px,transparent 1px);background-size:34px 34px}
.topbar{background:rgba(3,9,6,.96);border-bottom:1px solid rgba(57,255,136,.22);box-shadow:0 8px 30px #0008}
.brand,.welcome-content h1,.hero h1,.page-title h1,.section-heading h2,.profile-banner h2,.info-section h2,.gallery-heading h2,.family-copy h2{font-family:'Rajdhani',sans-serif;letter-spacing:.4px}
.brand span,.welcome-mark span,.nav a span,.nav-icon,.arrow,footer span{color:#39FF88}
.nav a:hover,.nav a.active{border-color:rgba(57,255,136,.55);background:rgba(57,255,136,.07);box-shadow:0 0 18px rgba(57,255,136,.08)}
.eyebrow{color:#39FF88;font-family:'Space Grotesk',sans-serif}
.gold-btn{background:#39FF88;color:#031008;box-shadow:0 0 22px rgba(57,255,136,.15)}
.gold-btn:hover{box-shadow:0 0 30px rgba(57,255,136,.32)}
.gold-rule{background:#39FF88;box-shadow:0 0 12px #39FF88}
.nav-card,.info-card,.family-card,.achievement-card{background:linear-gradient(145deg,#0a1b11,#050b07);border-color:rgba(57,255,136,.22)}
.nav-card:hover,.achievement-card:hover,.family-card:hover{border-color:#39FF88;box-shadow:0 0 24px rgba(57,255,136,.12)}
.profile-banner{background:linear-gradient(110deg,#0a1b11,#040a06);border-color:rgba(57,255,136,.3)}
.hero-photo,.profile-image{border-color:#39FF88}
.upload-chip{background:#030906ed;border-color:#39FF88;color:#39FF88}
.tab:hover,.tab.active,.outline-btn:hover{color:#39FF88;border-color:#39FF88;background:rgba(57,255,136,.08)}
.achievement-thumb{background:linear-gradient(145deg,#10291a,#050b07)}
.family-card{border-color:rgba(57,255,136,.25)}
footer{border-color:rgba(57,255,136,.15);background:#030906}
/* The welcome message and homepage are ONE landing page, not separate screens. */
body[data-page="home"]>main.home-main{height:calc(100dvh - 102px);position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;overflow:hidden}
.home-welcome{height:100%;min-height:0;display:grid;grid-template-columns:1.2fr .8fr;align-items:center;gap:8%;padding:2vh 0 1vh}
.welcome-copy{position:relative;z-index:1}
.welcome-copy h1{font:600 clamp(43px,6vw,76px)/.98 'Rajdhani',sans-serif;margin:12px 0 8px;text-transform:uppercase;letter-spacing:1px}
.welcome-copy h1 em,.welcome-copy h2 em{color:#39FF88;font-style:normal;text-shadow:0 0 22px rgba(57,255,136,.22)}
.welcome-copy .hello{font-size:10px;letter-spacing:4px;color:#91A99A;margin:15px 0 0}
.welcome-copy h2{font:600 clamp(30px,4vw,48px)/1 'Rajdhani',sans-serif;margin:2px 0 12px}
.welcome-copy .muted{font-size:12px;max-width:480px;line-height:1.55}
.status-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#39FF88;box-shadow:0 0 10px #39FF88;margin-right:8px}
.tech-tags{display:flex;gap:8px;margin-top:20px;flex-wrap:wrap}
.tech-tags span{font:600 9px 'Space Grotesk',sans-serif;letter-spacing:1px;color:#39FF88;border:1px solid rgba(57,255,136,.28);padding:7px 10px;background:rgba(57,255,136,.04)}
.home-welcome .hero-photo{height:min(48vh,390px);width:min(100%,300px);justify-self:center;border:0;padding:0;filter:drop-shadow(0 0 24px rgba(57,255,136,.1))}
.photo-frame{height:100%;padding:9px;border:1px solid rgba(57,255,136,.65);background:linear-gradient(145deg,rgba(57,255,136,.12),transparent 45%);clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,12% 100%,0 88%)}
.photo-frame img{height:100%;width:100%;object-fit:cover;display:block;background:#07130D;clip-path:polygon(0 0,88% 0,100% 12%,100% 100%,12% 100%,0 88%)}
.photo-corner{position:absolute;width:24px;height:24px;border-color:#39FF88;border-style:solid;pointer-events:none}
.corner-a{top:-7px;left:-7px;border-width:2px 0 0 2px}.corner-b{bottom:-7px;right:-7px;border-width:0 2px 2px 0}
.home-navigation{height:auto;padding:0 0 1.5vh}
.home-navigation .section-heading h2{font:600 clamp(20px,2.2vw,27px) 'Rajdhani',sans-serif;margin:2px 0 9px;text-transform:uppercase;letter-spacing:1px}
.nav-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.nav-card{min-height:86px;padding:10px 14px;border-radius:2px}
.nav-icon{font-size:18px;margin-bottom:5px}.nav-card b{font-size:9px;letter-spacing:1px}.nav-card small{font-size:9px;margin-top:3px}
.home-code{position:absolute;right:5%;top:3%;font:600 8px 'Space Grotesk',sans-serif;letter-spacing:1.5px;color:#587363}.home-code span{color:#39FF88}
@media(max-width:900px){.home-welcome{gap:4%}.home-welcome .hero-photo{height:38vh}.home-navigation{padding-bottom:1vh}.nav-card{min-height:78px}}
@media(max-width:600px){
 body[data-page="home"]>main.home-main{height:calc(100dvh - 106px);grid-template-rows:minmax(0,1fr) auto}
 .home-welcome{grid-template-columns:1.1fr .9fr;gap:8px;padding:2vh 0 1vh}
 .welcome-copy h1{font-size:clamp(30px,8vw,43px)}.welcome-copy .muted{font-size:8px;line-height:1.35}.welcome-copy .hello{font-size:8px;letter-spacing:2px}.welcome-copy h2{font-size:25px}.welcome-copy .eyebrow{font-size:7px;letter-spacing:1px}.tech-tags{gap:4px;margin-top:10px}.tech-tags span{font-size:6px;padding:5px}
 .home-welcome .hero-photo{height:28vh;width:100%;max-width:180px}
 .home-navigation{padding-bottom:1vh}.home-navigation .section-heading h2{font-size:18px;margin-bottom:6px}.home-navigation .eyebrow{font-size:7px}.nav-cards{gap:5px}.nav-card{min-height:62px;padding:6px}.nav-icon{font-size:14px;margin-bottom:3px}.nav-card b{font-size:6px}.nav-card small{font-size:6px}.home-code{display:none}
}


/* PERSONAL PAGE FIX: tabbed panels prevent content from being cropped. */
body[data-page="personal"] { height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body[data-page="personal"] .topbar { flex:0 0 70px; height:70px; min-height:70px; }
body[data-page="personal"] .page-main { flex:1 1 auto; height:auto; min-height:0; width:min(1160px,92%); padding:10px 0 8px; display:flex; flex-direction:column; gap:8px; overflow:hidden; }
body[data-page="personal"] .page-title { flex:0 0 auto; margin:0; text-align:left; }
body[data-page="personal"] .page-title .eyebrow { margin:0 0 2px; font-size:8px; }
body[data-page="personal"] .page-title h1 { font-size:clamp(24px,3.2vw,38px); margin:0; }
body[data-page="personal"] .page-title .muted { display:none; }
body[data-page="personal"] .profile-banner { flex:0 0 auto; grid-template-columns:58px 1fr; gap:10px; padding:6px 10px; margin:0; min-height:0; }
body[data-page="personal"] .profile-image { height:58px; padding:3px; }
body[data-page="personal"] .profile-banner h2 { font-size:19px; margin:0; }
body[data-page="personal"] .profile-banner .eyebrow { margin:0; font-size:7px; }
body[data-page="personal"] .profile-banner .muted { font-size:9px; margin:2px 0; line-height:1.2; }
body[data-page="personal"] .profile-banner .small-note { display:none; }
.personal-tabs { flex:0 0 auto; display:flex; gap:6px; flex-wrap:wrap; }
.personal-tab { flex:1 1 120px; min-width:0; padding:8px 10px; color:#91A99A; background:#06110B; border:1px solid rgba(57,255,136,.24); font:600 9px 'Space Grotesk',sans-serif; letter-spacing:1px; cursor:pointer; }
.personal-tab:hover,.personal-tab.active { color:#39FF88; border-color:#39FF88; background:rgba(57,255,136,.09); box-shadow:inset 0 0 14px rgba(57,255,136,.05); }
body[data-page="personal"] .personal-panel { flex:1 1 auto; min-height:0; margin:0; overflow:hidden; }
body[data-page="personal"] .personal-panel[hidden] { display:none !important; }
body[data-page="personal"] .personal-panel h2 { margin:2px 0 7px; font-size:18px; }
body[data-page="personal"] .personal-panel .info-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; }
body[data-page="personal"] .personal-panel .info-card { min-height:0; padding:9px 11px; overflow:hidden; }
body[data-page="personal"] .personal-panel .info-card small { font-size:8px; margin-bottom:4px; }
body[data-page="personal"] .personal-panel .info-card b { display:block; font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
body[data-page="personal"] .personal-panel .info-card.wide { grid-column:span 2; }
body[data-page="personal"] .edit-tip { flex:0 0 auto; margin:0; padding:5px 9px; font-size:8px; }
body[data-page="personal"] footer { flex:0 0 auto; padding:7px; font-size:7px; }
@media(max-height:520px) {
 body[data-page="personal"] .topbar { flex-basis:48px; height:48px; min-height:48px; }
 body[data-page="personal"] .page-main { gap:4px; padding:4px 0; }
 body[data-page="personal"] .profile-image { height:42px; }
 body[data-page="personal"] .profile-banner { grid-template-columns:42px 1fr; padding:3px 7px; }
 body[data-page="personal"] .personal-tab { padding:5px 7px; font-size:7px; }
 body[data-page="personal"] .personal-panel h2 { font-size:14px; margin:0 0 3px; }
 body[data-page="personal"] .personal-panel .info-grid { gap:4px; }
 body[data-page="personal"] .personal-panel .info-card { padding:4px 6px; }
 body[data-page="personal"] .personal-panel .info-card small { font-size:6px; margin-bottom:2px; }
 body[data-page="personal"] .personal-panel .info-card b { font-size:8px; line-height:1.15; }
 body[data-page="personal"] .edit-tip { display:none; }
 body[data-page="personal"] footer { display:none; }
}
@media(max-width:600px) {
 body[data-page="personal"] .topbar { flex:0 0 58px; height:58px; min-height:58px; flex-direction:row; align-items:center; }
 body[data-page="personal"] .nav a { flex-direction:row; font-size:7px; }
 body[data-page="personal"] .personal-tabs { gap:4px; }
 body[data-page="personal"] .personal-tab { flex-basis:calc(50% - 4px); }
 body[data-page="personal"] .personal-panel .info-card b { font-size:8px; }
}

/* ACHIEVEMENTS: left-side category panel, right-side 10-photo gallery */
body[data-page="achievements"] > main.achievement-layout {
  display:grid; grid-template-columns:minmax(215px, 270px) minmax(0,1fr); gap:clamp(18px,3vw,42px);
  align-items:stretch; padding:clamp(18px,3vh,32px) 0; height:calc(100dvh - 102px); overflow:hidden;
}
.achievement-sidebar { border-right:1px solid rgba(57,255,136,.25); padding:clamp(10px,2vh,24px) clamp(12px,2vw,25px) 10px 0; display:flex; flex-direction:column; min-height:0; }
.achievement-sidebar h1 { font:500 clamp(34px,3.5vw,52px)/1.05 'Rajdhani'; margin:10px 0 14px; }
.achievement-sidebar h1 em { color:var(--gold); font-weight:500; }
.achievement-sidebar > .muted { font-size:12px; line-height:1.7; margin:0 0 26px; }
.achievement-sidebar .tabs { flex-direction:column; align-items:stretch; gap:9px; margin:0; }
.achievement-sidebar .tab { text-align:left; padding:15px 13px; font-size:9px; }
.achievement-sidebar .tab::before { content:'›'; color:var(--gold); font-size:15px; margin-right:10px; }
.sidebar-note { margin-top:auto; padding:13px; border:1px solid rgba(57,255,136,.18); background:rgba(57,255,136,.035); color:var(--muted); font-size:10px; line-height:1.6; }
.sidebar-note span { color:var(--gold); margin-right:7px; }
.achievement-gallery-area { min-width:0; min-height:0; display:flex; flex-direction:column; justify-content:center; overflow:hidden; }
.achievement-gallery-area #achievementGallery { width:100%; }
body[data-page="achievements"] .gallery-heading { text-align:left; margin:0 0 16px; }
body[data-page="achievements"] .gallery-heading h2 { font-size:clamp(21px,2.3vw,30px); margin:4px 0; }
body[data-page="achievements"] .gallery-heading .muted { font-size:10px; line-height:1.5; }
body[data-page="achievements"] .gallery-grid { grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(2,minmax(0,1fr)); gap:clamp(7px,1vw,13px); }
body[data-page="achievements"] .achievement-card { min-height:0; padding:6px; }
body[data-page="achievements"] .achievement-thumb { height:clamp(90px,17vh,155px); }
body[data-page="achievements"] .achievement-card h3 { font-size:clamp(8px,.8vw,10px); }
body[data-page="achievements"] .achievement-card small, body[data-page="achievements"] .upload-small { font-size:8px; }
@media (max-width:850px) {
 body[data-page="achievements"] > main.achievement-layout { grid-template-columns:180px minmax(0,1fr); gap:14px; }
 body[data-page="achievements"] .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); }
 body[data-page="achievements"] .achievement-thumb { height:clamp(55px,9vh,85px); }
 body[data-page="achievements"] .achievement-card h3 { font-size:8px; }
}
@media (max-width:560px) {
 body[data-page="achievements"] > main.achievement-layout { grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); gap:8px; padding:8px 0; }
 .achievement-sidebar { border-right:0; border-bottom:1px solid var(--line); padding:0 0 8px; }
 .achievement-sidebar h1 { font-size:25px; margin:2px 0 5px; }
 .achievement-sidebar > .eyebrow, .achievement-sidebar > .muted, .sidebar-note { display:none; }
 .achievement-sidebar .tabs { flex-direction:row; }
 .achievement-sidebar .tab { flex:1; text-align:center; padding:7px 4px; font-size:7px; }
 .achievement-sidebar .tab::before { display:none; }
 .achievement-gallery-area { overflow:hidden; }
 body[data-page="achievements"] .gallery-heading { margin:0 0 6px; }
 body[data-page="achievements"] .gallery-heading h2 { font-size:18px; }
 body[data-page="achievements"] .gallery-heading .muted { display:none; }
 body[data-page="achievements"] .gallery-grid { grid-template-columns:repeat(2,minmax(0,1fr)); grid-template-rows:repeat(5,minmax(0,1fr)); gap:4px; }
 body[data-page="achievements"] .achievement-thumb { height:clamp(38px,7vh,60px); }
 body[data-page="achievements"] .achievement-card { padding:3px; }
 body[data-page="achievements"] .achievement-card h3 { font-size:7px; margin:2px; }
 body[data-page="achievements"] .achievement-card small, body[data-page="achievements"] .upload-small { font-size:6px; margin:1px 2px; }
}

/* User-provided achievement list on the left; photo gallery only on the right */
body[data-page="achievements"] > main.achievement-custom-layout{display:grid;grid-template-columns:minmax(340px,42%) minmax(0,1fr);gap:clamp(16px,2vw,30px);height:calc(100dvh - 102px);padding:clamp(10px,1.5vh,18px) 0;overflow:hidden;align-items:stretch}
.achievement-text-panel{overflow:hidden;min-height:0;padding-right:clamp(12px,1.5vw,22px);border-right:1px solid rgba(57,255,136,.3)}
.achievement-text-panel h1{font-size:clamp(25px,2.5vw,36px);margin:4px 0 12px;line-height:1.05}
.achievement-list-block{margin:0 0 12px}.achievement-list-block h2{font:600 12px 'Rajdhani',sans-serif;letter-spacing:1.5px;color:var(--gold);margin:0 0 6px;border-bottom:1px solid rgba(57,255,136,.25);padding-bottom:4px}
.achievement-list-block ul{list-style:none;margin:0;padding:0}.achievement-list-block li{font-size:clamp(8px,.78vw,10px);line-height:1.28;color:var(--text);margin:0 0 2px}.achievement-list-block li b{color:var(--gold);font-weight:600}.achievement-list-block li.sub-item{padding-left:42px;color:#c5d2c9}
.achievement-photo-only{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}.photo-only-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:clamp(7px,1vw,13px)}
.photo-only-card{position:relative;display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden;border:1px solid rgba(57,255,136,.35);background:linear-gradient(145deg,#0b2115,#080d0a);cursor:pointer;transition:.2s}.photo-only-card:hover{border-color:#39ff88;box-shadow:0 0 18px #39ff8830}.photo-only-card img{width:100%;height:100%;object-fit:cover}.photo-placeholder{display:flex;flex-direction:column;align-items:center;gap:5px;color:#39ff88;font-size:27px}.photo-placeholder small{font:9px 'Rajdhani';letter-spacing:1px}.photo-only-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media(max-width:850px){body[data-page="achievements"] > main.achievement-custom-layout{grid-template-columns:minmax(230px,42%) minmax(0,1fr);gap:10px}.achievement-list-block li{font-size:8px}.photo-only-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr))}}

/* Three-level achievement dashboard: text left, 10 portrait photos right */
body[data-page="achievements"] > main.achievement-custom-layout{display:grid;grid-template-columns:minmax(360px,43%) minmax(0,1fr);gap:clamp(14px,1.8vw,26px);height:calc(100dvh - 102px);padding:clamp(10px,1.4vh,16px) 0;overflow:hidden;align-items:stretch}
.achievement-text-panel{display:flex;flex-direction:column;overflow:hidden;min-height:0;padding-right:clamp(12px,1.5vw,22px);border-right:1px solid rgba(57,255,136,.3)}
.achievement-text-panel>.eyebrow{margin:0 0 3px;font-size:9px}
.achievement-text-panel>h1{font-size:clamp(24px,2.25vw,34px);margin:2px 0 10px;line-height:1.04}
.achievement-level-tabs{display:flex;gap:6px;margin:0 0 10px;flex-wrap:nowrap}
.achievement-level-tab{flex:1;min-width:0;padding:9px 5px;border:1px solid rgba(57,255,136,.28);background:#07140d;color:#a8b8ad;font-size:clamp(7px,.72vw,9px);font-weight:700;letter-spacing:.4px;line-height:1.2}
.achievement-level-tab.active,.achievement-level-tab:hover{background:rgba(57,255,136,.13);border-color:#39ff88;color:#39ff88;box-shadow:0 0 13px #39ff8818}
.achievement-text-content{min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:8px}
.achievement-selected-heading{font:600 clamp(13px,1.2vw,17px) 'Rajdhani',sans-serif;letter-spacing:1.3px;color:#39ff88;margin:0 0 1px}
.achievement-list-block{margin:0}.achievement-list-block h3{font:600 10px 'Rajdhani',sans-serif;letter-spacing:1.15px;color:#39ff88;margin:0 0 4px;border-bottom:1px solid rgba(57,255,136,.25);padding-bottom:3px}
.achievement-list-block ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:2px}
.achievement-list-block li{font-size:clamp(8px,.76vw,10px);line-height:1.22;color:#e2ebe5;margin:0}
.achievement-list-block li.grade-entry{color:#fff;font-weight:600}
.achievement-list-block li.sub-entry{padding-left:12px;color:#c3d2c8}
.achievement-photo-only{display:flex;align-items:center;justify-content:center;min-width:0;min-height:0;overflow:hidden}
.photo-only-grid{width:100%;height:100%;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px;align-content:center}
.photo-only-card{position:relative;display:block;min-width:0;min-height:0;aspect-ratio:4/5;overflow:hidden;border:1px solid rgba(57,255,136,.38);background:linear-gradient(145deg,#0b2115,#080d0a);cursor:pointer;transition:.2s}
.photo-only-card:hover{border-color:#39ff88;box-shadow:0 0 18px #39ff8830}
.photo-only-card img{width:100%;height:100%;object-fit:cover;display:block}
.photo-only-card .photo-placeholder{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#39ff88;font-size:28px;pointer-events:none}
.photo-only-card input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
@media(max-height:720px) and (min-width:851px){.achievement-list-block li{font-size:8px;line-height:1.13}.achievement-text-content{gap:5px}.achievement-list-block h3{margin-bottom:2px}.achievement-level-tab{padding:7px 3px}}
@media(max-width:850px){body[data-page="achievements"] > main.achievement-custom-layout{grid-template-columns:minmax(230px,42%) minmax(0,1fr);gap:10px}.achievement-list-block li{font-size:8px}.photo-only-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:8px}.photo-only-card{aspect-ratio:4/5;max-height:100%}}
@media(max-width:600px){body[data-page="achievements"] > main.achievement-custom-layout{grid-template-columns:1fr;grid-template-rows:minmax(0,1.05fr) minmax(0,1fr);height:calc(100dvh - 130px);gap:8px}.achievement-text-panel{border-right:0;border-bottom:1px solid rgba(57,255,136,.3);padding:0 0 7px}.achievement-text-panel>.eyebrow{display:none}.achievement-text-panel>h1{font-size:21px;margin:0 0 6px}.achievement-level-tabs{margin-bottom:6px}.achievement-level-tab{font-size:7px;padding:6px 2px}.achievement-text-content{gap:4px}.achievement-list-block h3{font-size:8px}.achievement-list-block li{font-size:7px;line-height:1.12}.achievement-photo-only{overflow:hidden}.photo-only-grid{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:8px}.photo-only-card{aspect-ratio:4/5}}


/* FINAL ACHIEVEMENT GALLERY SPACING FIX: keep the two photo rows one inch apart. */
.photo-only-grid{
  grid-template-rows:repeat(2, minmax(0, 1fr));
  row-gap:1in !important;
  column-gap:8px !important;
  align-content:center !important;
}
.photo-only-card{aspect-ratio:4 / 5; min-height:0;}
.photo-only-card img[hidden],
.photo-only-card .photo-placeholder[hidden]{display:none !important;}
@media(max-width:850px){
  .photo-only-grid{grid-template-rows:repeat(5,minmax(0,1fr));row-gap:1in !important;}
}
@media(max-width:600px){
  .photo-only-grid{grid-template-rows:repeat(2,minmax(0,1fr));row-gap:1in !important;}
}

/* FINAL POLISH: equal photo spacing and prominent centered personal-section navigation */
.photo-only-grid {
  column-gap: 8px !important;
  row-gap: 8px !important;
}
@media (max-width:850px) {
  .photo-only-grid { row-gap: 8px !important; }
}
@media (max-width:600px) {
  .photo-only-grid { row-gap: 8px !important; }
}
body[data-page="personal"] .personal-tabs {
  width: min(900px, 100%);
  margin: 5px auto 8px;
  justify-content: center;
  align-items: stretch;
  gap: 12px;
}
body[data-page="personal"] .personal-tab {
  position: relative;
  flex: 1 1 0;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid rgba(57,255,136,.55);
  border-radius: 8px;
  color: #d5e8dc;
  background: linear-gradient(145deg, #0c2417, #06100a);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-align: center;
  box-shadow: 0 0 12px rgba(57,255,136,.10), inset 0 0 16px rgba(57,255,136,.035);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
body[data-page="personal"] .personal-tab::before {
  content: "✧";
  display: inline-block;
  margin-right: 8px;
  color: #39ff88;
  font-size: 15px;
  vertical-align: -1px;
}
body[data-page="personal"] .personal-tab:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: #39ff88;
  box-shadow: 0 0 18px rgba(57,255,136,.28), inset 0 0 18px rgba(57,255,136,.08);
}
body[data-page="personal"] .personal-tab.active {
  color: #041009;
  border-color: #39ff88;
  background: linear-gradient(135deg, #39ff88, #159b55);
  box-shadow: 0 0 24px rgba(57,255,136,.42), 0 0 5px rgba(57,255,136,.5);
}
body[data-page="personal"] .personal-tab.active::before { color: #041009; }
@media (max-width:600px) {
  body[data-page="personal"] .personal-tabs { gap: 6px; }
  body[data-page="personal"] .personal-tab { min-height: 42px; padding: 8px 5px; font-size: 8px; letter-spacing: .5px; }
  body[data-page="personal"] .personal-tab::before { margin-right: 3px; font-size: 11px; }
}

/* HOMEPAGE REDESIGN — inspired by the supplied split-sidebar reference */
body.home-redesign{height:100dvh;min-height:0;overflow:hidden;background:#030907;display:grid;grid-template-columns:126px minmax(0,1fr);font-family:'Space Grotesk',sans-serif}
body.home-redesign>main.home-layout{height:100dvh;min-height:0;overflow:hidden;width:100%;max-width:none;margin:0;padding:0 22px 14px;display:grid;grid-template-rows:minmax(0,1fr) auto 24px;gap:16px;position:relative;background:radial-gradient(ellipse at 78% 24%,rgba(0,255,120,.09),transparent 38%),linear-gradient(135deg,#030907,#050d09 58%,#020605)}
.home-sidebar{height:100dvh;min-height:0;display:flex;flex-direction:column;padding:25px 13px 18px;background:linear-gradient(180deg,#07110c,#030806);border-right:1px solid rgba(52,255,143,.22);position:relative;z-index:2}
.side-brand{display:flex;flex-direction:column;align-items:center;gap:2px;margin:0 auto 38px;color:#baffd4}
.side-brand span{font:500 30px 'Rajdhani';letter-spacing:2px;color:#48ff9b;text-shadow:0 0 15px #39ff8866}
.side-brand small{font-size:7px;letter-spacing:2px;color:#9db9a8}
.side-nav{display:flex;flex-direction:column;gap:8px}
.side-nav a{display:flex;align-items:center;gap:9px;padding:10px 8px;border:1px solid transparent;border-radius:5px;color:#9fb5a8;font-size:9px;transition:.25s}
.side-nav a span{width:16px;text-align:center;font-size:16px;color:#43f995}
.side-nav a b{font-weight:500;white-space:nowrap}
.side-nav a:hover,.side-nav a.active{background:linear-gradient(90deg,rgba(49,255,135,.2),rgba(49,255,135,.06));border-color:#39ff8866;color:#f3fff7;box-shadow:0 0 18px #39ff8812}
.side-footer{margin-top:auto;display:flex;flex-direction:column;gap:9px;padding:8px 5px;color:#7c9b89}
.side-footer span{font-size:7px;letter-spacing:1px;line-height:1.6}
.side-footer i{width:24px;height:1px;background:#39ff88;box-shadow:0 0 9px #39ff88}
.side-footer small{font-size:6px;letter-spacing:1px}
.home-hero-panel{min-height:0;position:relative;display:grid;grid-template-columns:minmax(190px,.82fr) minmax(250px,1.18fr);align-items:center;justify-items:center;gap:3%;padding:18px 5% 0;overflow:hidden;border-bottom:1px solid rgba(57,255,136,.13)}
.home-hero-panel:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(57,255,136,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(57,255,136,.035) 1px,transparent 1px);background-size:38px 38px;mask-image:linear-gradient(90deg,black,transparent 95%);pointer-events:none}
.hero-orbit{position:absolute;border:1px solid rgba(0,255,130,.15);border-radius:50%;transform:rotate(-18deg);pointer-events:none}
.orbit-one{width:55%;height:42%;right:-10%;top:-12%;box-shadow:0 0 28px #00ff8010}
.orbit-two{width:48%;height:34%;left:28%;bottom:-22%;border-color:rgba(0,180,255,.13)}
.home-portrait-wrap{position:relative;z-index:1;width:min( min(26vw,300px), 80%);aspect-ratio:1;display:grid;place-items:center}
.home-portrait-ring{width:100%;height:100%;border-radius:50%;padding:5px;background:conic-gradient(from 20deg,#43ff9b,#0c8d68,#b6ffe0,#0b5b48,#43ff9b);box-shadow:0 0 0 1px #39ff8866,0 0 35px #00ff8020}
.home-portrait-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;display:block;background:#07130d;border:4px solid #06100b}
.home-upload{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);white-space:nowrap;padding:7px 11px;border:1px solid #39ff8877;background:#031009ee;color:#6effad;font-size:7px;letter-spacing:1px;cursor:pointer;border-radius:3px}
.home-upload input{display:none}
.home-intro{position:relative;z-index:1;width:100%;max-width:560px}
.home-kicker{font-size:9px;letter-spacing:3px;color:#d5f5e2;margin:0 0 9px}
.home-kicker span{display:inline-block;width:17px;height:1px;vertical-align:middle;margin-right:8px;background:#39ff88;box-shadow:0 0 8px #39ff88}
.home-intro h1{font:500 clamp(39px,5vw,70px)/1.02 'Rajdhani';letter-spacing:-1px;margin:0;color:#f5fff8}
.home-intro h1 em{font-style:normal;color:#58ffa0}
.home-subtitle{font-size:8px;letter-spacing:2.2px;color:#9ab7a5;margin:13px 0 0}
.home-rule{width:65px;height:1px;background:#39ff88;margin:20px 0;box-shadow:0 0 10px #39ff88}
.home-description{font-size:11px;line-height:1.8;color:#b4c9bc;margin:0}
.home-tech-label{font-size:7px;letter-spacing:1.4px;color:#668b75;margin-top:25px}
.home-tech-label span{color:#39ff88;text-shadow:0 0 8px #39ff88}.home-tech-label b{color:#39ff88;padding:0 5px}
.home-module-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(780px,88%);margin:0 auto}
.home-module{position:relative;min-height:104px;border:1px solid #39ff8855;border-radius:8px;background:linear-gradient(145deg,rgba(10,34,22,.96),rgba(4,13,9,.98));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:12px 8px 10px;transition:.25s;overflow:hidden}
.home-module:before{content:"";position:absolute;inset:0;background:linear-gradient(130deg,transparent,rgba(57,255,136,.08),transparent);opacity:0;transition:.25s}
.home-module:hover{transform:translateY(-4px);border-color:#58ffa0;box-shadow:0 0 22px #39ff8830}
.home-module:hover:before{opacity:1}
.module-icon{font-size:22px;color:#53ffa0;line-height:1;margin-bottom:8px;text-shadow:0 0 12px #39ff8855}
.home-module b{font-size:9px;line-height:1.25;letter-spacing:.3px;color:#effff4}
.home-module small{font-size:7px;color:#8da999;margin-top:5px}
.home-module i{position:absolute;right:8px;top:7px;font-style:normal;font-size:6px;color:#4b8965}
.module-personal{border-color:#32d9a077}.module-achievements{border-color:#39ff8877}.module-family{border-color:#00b8a077}
.home-bottom-line{display:flex;justify-content:space-between;align-items:center;padding:0 2px;color:#587565;font-size:6px;letter-spacing:1.4px}
@media(max-width:700px){body.home-redesign{grid-template-columns:86px minmax(0,1fr)}.home-sidebar{padding:18px 7px 12px}.side-nav a{justify-content:center;padding:10px 3px;flex-direction:column;gap:3px;font-size:7px}.side-nav a span{font-size:17px}.side-brand{margin-bottom:25px}.side-brand span{font-size:25px}.side-brand small{font-size:6px}.side-footer span{font-size:6px}.home-layout{padding:0 12px 10px!important;gap:10px!important}.home-hero-panel{grid-template-columns:minmax(110px,.8fr) minmax(130px,1.2fr);padding:10px 2% 0;gap:4%}.home-portrait-wrap{width:min(27vw,190px)}.home-intro h1{font-size:clamp(28px,6vw,44px)}.home-kicker{font-size:7px;letter-spacing:2px}.home-subtitle{font-size:6px;letter-spacing:1px}.home-description{font-size:9px}.home-tech-label{font-size:6px;margin-top:15px}.home-module-grid{width:96%;gap:6px}.home-module{min-height:83px;padding:8px 4px}.module-icon{font-size:18px;margin-bottom:5px}.home-module b{font-size:7px}.home-module small{font-size:6px}}
@media(max-width:420px){.home-module-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.home-layout{grid-template-rows:minmax(0,1fr) auto 18px!important}.home-module{min-height:66px}.home-hero-panel{grid-template-columns:1fr 1.2fr}.home-portrait-wrap{width:min(30vw,135px)}}

/* FULL-BLEED TECHNOLOGY HOMEPAGE — based on user's visual reference */
body.hero-home{margin:0;height:100dvh;min-height:0;overflow:hidden;background:#020805;color:#f4fff7}
body.hero-home .hero-home-main{height:100dvh;max-width:none;margin:0;padding:0 28px 12px;display:grid;grid-template-rows:48px minmax(0,1fr) 142px 18px;gap:10px;overflow:hidden;position:relative;background:radial-gradient(ellipse at 75% 36%,#0b4027 0%,#06180f 32%,#020805 72%)}
.hero-topbar{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #39ff8830;position:relative;z-index:3}
.hero-wordmark{display:flex;align-items:center;gap:8px;color:#d9ffe7}.hero-wordmark span{font:22px 'Rajdhani';color:#4cff9b;text-shadow:0 0 12px #39ff88}.hero-wordmark small{font-size:8px;letter-spacing:2px;color:#a4cbb2}
.hero-topnav{display:flex;align-items:center;gap:clamp(15px,3vw,38px)}.hero-topnav a{font-size:9px;color:#b4c9bc;transition:.2s;padding:8px 0;border-bottom:1px solid transparent}.hero-topnav a:hover,.hero-topnav a.active{color:#63ffa6;border-color:#39ff88}
.hero-status{font-size:7px;letter-spacing:1px;color:#72a989}.hero-status i{display:inline-block;width:6px;height:6px;border-radius:50%;background:#39ff88;box-shadow:0 0 8px #39ff88;margin-right:5px}
.hero-stage{position:relative;min-height:0;display:flex;align-items:center;overflow:hidden;padding:12px 2%}
.hero-tech-grid{position:absolute;inset:0;background-image:linear-gradient(#39ff8809 1px,transparent 1px),linear-gradient(90deg,#39ff8809 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(90deg,black,transparent 100%);pointer-events:none}
.hero-bg-glow{position:absolute;width:50vw;height:50vw;right:0;top:-40%;border:1px solid #39ff881b;border-radius:50%;box-shadow:0 0 90px #00ff8010,inset 0 0 60px #00ff8008}
.hero-copy{position:relative;z-index:2;width:54%;padding-left:2%;pointer-events:none}
.hero-eyebrow{font-size:8px;letter-spacing:3px;color:#8fb9a0;margin:0 0 15px}.hero-eyebrow span{display:inline-block;width:20px;height:1px;background:#39ff88;vertical-align:middle;margin-right:8px;box-shadow:0 0 8px #39ff88}
.hero-copy h1{font:500 clamp(64px,9vw,130px)/.78 'Rajdhani',serif;letter-spacing:-3px;margin:0;color:#effff4;text-shadow:0 0 35px #39ff8814}.hero-copy h1 span{color:#55f99b}
.hero-subtitle{font-size:8px;letter-spacing:2.8px;color:#a7c6b2;margin:22px 0 0}.hero-accent-line{width:58px;height:2px;background:#39ff88;margin:19px 0;box-shadow:0 0 12px #39ff88}.hero-tagline{font-size:11px;line-height:1.8;color:#c0d4c7;margin:0}.hero-code{font-size:7px;letter-spacing:1.8px;color:#648b73;margin-top:23px}.hero-code b{color:#39ff88;padding:0 5px}
.hero-portrait-area{position:absolute;right:5%;top:0;bottom:0;width:45%;display:flex;align-items:center;justify-content:center;z-index:1}
.hero-portrait-frame{height:92%;width:100%;position:relative;overflow:hidden;border-radius:48% 48% 8px 8px / 45% 45% 8px 8px;background:radial-gradient(ellipse at 50% 30%,#1d6540,#092116 55%,transparent 75%);border:1px solid #39ff8833;box-shadow:0 0 50px #00ff8015}
.hero-portrait-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#06140d 0%,transparent 38%,#02080522 100%),linear-gradient(0deg,#020805 0%,transparent 38%);z-index:1;pointer-events:none}
.hero-portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:center 25%;display:block;opacity:.88}
.hero-portrait-frame img[src=""]{opacity:0}
.hero-photo-upload{position:absolute;z-index:3;bottom:12px;right:8px;padding:7px 10px;background:#031009eF;border:1px solid #39ff8877;color:#70ffaa;font-size:7px;letter-spacing:1px;cursor:pointer}.hero-photo-upload input{display:none}
.hero-link-cards{position:relative;z-index:3;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;width:min(100%,1000px);margin:0 auto}
.hero-link-card{position:relative;min-width:0;overflow:hidden;border:1px solid #39ff8855;border-radius:5px;background:linear-gradient(145deg,#10291b,#050c08);display:flex;flex-direction:column;padding:0 12px 10px;transition:.25s;box-shadow:0 8px 25px #0008}
.hero-link-card:hover{transform:translateY(-4px);border-color:#62ffa5;box-shadow:0 0 24px #39ff8830}
.hero-card-art{height:67px;margin:0 -12px 8px;display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(135deg,#173d29,#07150d 55%,#0b3020)}
.hero-card-art:after{content:"";position:absolute;inset:0;background-image:linear-gradient(#39ff8810 1px,transparent 1px),linear-gradient(90deg,#39ff8810 1px,transparent 1px);background-size:18px 18px}
.hero-card-art span{font-size:29px;color:#68ffa9;text-shadow:0 0 15px #39ff88;z-index:1}.hero-card-art i{position:absolute;top:7px;left:10px;font-size:6px;font-style:normal;letter-spacing:1px;color:#8eb69c;z-index:1}
.hero-link-card>b{font-size:9px;color:#effff4;font-weight:600}.hero-link-card>small{font-size:7px;color:#8da999;margin-top:4px}.hero-link-card>em{position:absolute;right:11px;bottom:11px;font-style:normal;color:#54ff9b;font-size:12px}
.hero-footer{display:flex;justify-content:space-between;align-items:center;color:#557563;font-size:6px;letter-spacing:1.5px}
@media(max-width:650px){body.hero-home .hero-home-main{padding:0 12px 8px;grid-template-rows:43px minmax(0,1fr) 126px 16px;gap:7px}.hero-topnav{gap:10px}.hero-topnav a{font-size:7px}.hero-status{display:none}.hero-stage{align-items:flex-start;padding-top:11%}.hero-copy{width:65%;padding-left:0}.hero-copy h1{font-size:clamp(54px,12vw,83px)}.hero-portrait-area{right:-7%;width:53%;top:10%;bottom:0;opacity:.72}.hero-eyebrow{font-size:6px;letter-spacing:2px}.hero-subtitle{font-size:6px;letter-spacing:1.5px}.hero-tagline{font-size:9px}.hero-code{font-size:6px}.hero-link-cards{gap:6px}.hero-link-card{padding:0 6px 8px}.hero-card-art{height:57px;margin:0 -6px 7px}.hero-link-card>b{font-size:7px}.hero-link-card>small{font-size:6px}.hero-link-card>em{right:6px;bottom:7px;font-size:10px}}
@media(max-width:400px){.hero-topnav{gap:7px}.hero-topnav a{font-size:6px}.hero-link-cards{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:55px}.hero-link-card{display:grid;grid-template-columns:38px 1fr;grid-template-rows:1fr 1fr;align-items:center;padding:4px}.hero-card-art{grid-row:1/3;height:45px;margin:0}.hero-card-art i{display:none}.hero-card-art span{font-size:20px}.hero-link-card>b{font-size:7px}.hero-link-card>small{font-size:6px}.hero-link-card>em{display:none}.hero-home-main{grid-template-rows:43px minmax(0,1fr) 120px 16px!important}}

/* FIX: remove inherited sidebar grid that squeezed the homepage */
html:has(body.hero-home), body.hero-home{
  display:block !important;
  width:100% !important;
  min-width:0 !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  grid-template-columns:none !important;
  grid-template-rows:none !important;
  overflow:hidden !important;
}
body.hero-home .hero-home-main{
  display:grid !important;
  position:relative !important;
  width:100% !important;
  max-width:none !important;
  min-width:0 !important;
  margin:0 !important;
  box-sizing:border-box !important;
  left:0 !important;
  grid-column:auto !important;
}

/* PERSONAL PROFILE PHOTO FIX: stable portrait frame and non-overlapping upload control */
body[data-page="personal"] .profile-banner{
  display:grid !important;
  grid-template-columns:96px minmax(0,1fr) !important;
  align-items:center !important;
  gap:18px !important;
  min-height:120px !important;
  padding:12px 18px !important;
}
body[data-page="personal"] .profile-image{
  position:relative !important;
  display:block !important;
  width:88px !important;
  height:104px !important;
  min-width:88px !important;
  max-width:88px !important;
  padding:3px !important;
  margin:0 !important;
  overflow:visible !important;
  box-sizing:border-box !important;
  border:1px solid #39FF88 !important;
  background:#06130b !important;
}
body[data-page="personal"] .profile-image img{
  display:block !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center top !important;
  border-radius:2px !important;
}
body[data-page="personal"] .profile-image .upload-chip{
  position:absolute !important;
  left:50% !important;
  right:auto !important;
  bottom:-10px !important;
  top:auto !important;
  transform:translateX(-50%) !important;
  z-index:5 !important;
  white-space:nowrap !important;
  padding:5px 8px !important;
  font-size:8px !important;
  line-height:1.2 !important;
  background:#031009 !important;
  border:1px solid #39FF88 !important;
  color:#39FF88 !important;
  border-radius:3px !important;
}
@media(max-width:700px){
 body[data-page="personal"] .profile-banner{grid-template-columns:82px minmax(0,1fr)!important;gap:12px!important;padding:10px!important;min-height:108px!important}
 body[data-page="personal"] .profile-image{width:74px!important;min-width:74px!important;max-width:74px!important;height:88px!important}
 body[data-page="personal"] .profile-image .upload-chip{font-size:7px!important;padding:4px 6px!important}
}