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

:root{
  --bg:#080d16;
  --surface:#0e1623;
  --surface2:#131e2e;
  --border:rgba(255,255,255,0.07);
  --border-hover:rgba(255,255,255,0.13);
  --accent:#00e5c3;
  --accent2:#7c5cfc;
  --text:#e2e8f0;
  --muted:#64748b;
  --sidebar:240px;
}

body{font-family:'Outfit',sans-serif;background:var(--bg);color:var(--text);display:flex;overflow-x:hidden;min-height:100vh}

/* ---- BACKGROUND ---- */
.mesh-bg{position:fixed;inset:0;z-index:0;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(120px);opacity:.12}
.orb1{width:600px;height:600px;background:#00e5c3;top:-200px;left:-100px}
.orb2{width:500px;height:500px;background:#7c5cfc;bottom:-150px;right:-100px}
.orb3{width:300px;height:300px;background:#3b82f6;top:50%;right:20%;opacity:.07}

/* ---- SIDEBAR ---- */
.sidebar{
  width:var(--sidebar);min-height:100vh;background:rgba(10,15,25,0.95);
  border-right:1px solid var(--border);padding:28px 16px;position:fixed;
  display:flex;flex-direction:column;z-index:100;
  backdrop-filter:blur(20px);transition:.3s;
}
.logo{display:flex;align-items:center;gap:10px;margin-bottom:40px;padding:0 8px}
.logo-icon{width:38px;height:38px;background:var(--accent);border-radius:10px;display:flex;align-items:center;justify-content:center;color:#080d16;font-size:1rem;font-weight:700}
.logo-text{font-size:1.3rem;font-weight:700;color:var(--accent)}
.nav{display:flex;flex-direction:column;gap:4px;flex:1}
.nav-footer{margin-top:auto;padding-top:16px;border-top:1px solid var(--border)}
.nav-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  border-radius:14px;color:var(--muted);cursor:pointer;transition:.25s;
  text-decoration:none;font-size:.9rem;font-weight:500;position:relative;
}
.nav-item:hover{color:var(--text);background:var(--surface2)}
.nav-item.active{background:rgba(0,229,195,.1);color:var(--accent);border:1px solid rgba(0,229,195,.2)}
.nav-ico{width:36px;height:36px;display:flex;align-items:center;justify-content:center;font-size:.95rem;border-radius:10px;flex-shrink:0}
.nav-item.active .nav-ico{background:rgba(0,229,195,.15)}

/* ---- MAIN ---- */
.main{margin-left:var(--sidebar);width:calc(100% - var(--sidebar));padding:28px 32px;position:relative;z-index:1}

/* ---- TOPBAR ---- */
.topbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;gap:16px}
.topbar-left{display:flex;align-items:center;gap:16px}
.topbar h1{font-size:1.6rem;font-weight:700;color:var(--text)}
.topbar p{font-size:.82rem;color:var(--muted);margin-top:2px}
.topbar-right{display:flex;align-items:center;gap:12px}
.search-box{display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px 16px}
.search-box i{color:var(--muted);font-size:.85rem}
.search-box input{background:transparent;border:none;outline:none;color:var(--text);font-family:'Outfit',sans-serif;font-size:.88rem;width:160px}
.hamburger{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);cursor:pointer;font-size:.9rem;display:none}
.icon-btn{position:relative;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px 12px;color:var(--text);cursor:pointer;font-size:.9rem;transition:.2s}
.icon-btn:hover{border-color:var(--border-hover)}
.badge-dot{position:absolute;top:-6px;right:-6px;background:#ff375f;color:#fff;font-size:.65rem;font-weight:700;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-family:'DM Mono',monospace}
.avatar{width:42px;height:42px;border-radius:50%;border:2px solid var(--accent);object-fit:cover;cursor:pointer}

/* ---- NOTIFICATION PANEL ---- */
.notif-panel{
  position:fixed;top:90px;right:28px;width:320px;background:var(--surface);
  border:1px solid var(--border);border-radius:20px;padding:20px;z-index:200;
  display:none;box-shadow:0 20px 60px rgba(0,0,0,.5);
}
.notif-panel.open{display:block}
.notif-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}
.notif-header h3{font-size:1rem;font-weight:600}
.notif-list{display:flex;flex-direction:column;gap:12px}
.notif-item{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface2);border-radius:12px}
.notif-item p{font-size:.85rem;color:var(--text);margin-bottom:2px}
.notif-item small{font-size:.75rem;color:var(--muted)}
.notif-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.notif-ico.teal{background:rgba(0,229,195,.15);color:#00e5c3}
.notif-ico.pink{background:rgba(244,114,182,.15);color:#f472b6}
.notif-ico.blue{background:rgba(125,211,252,.15);color:#7dd3fc}

/* ---- CONTENT ---- */
.content{position:relative}
.section{display:none}
.section.active{display:block}

/* ---- CARDS ---- */
.card{
  background:var(--surface);border:1px solid var(--border);border-radius:22px;
  padding:22px;transition:.25s;
}
.card:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px;gap:12px;flex-wrap:wrap}
.card-head h3{font-size:1rem;font-weight:600;color:var(--text)}
.card-head p{font-size:.8rem;color:var(--muted);margin-top:3px}

/* ---- STAT CARDS ---- */
.stat-row{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:20px;transition:.25s}
.stat-card:hover{border-color:var(--border-hover);transform:translateY(-3px)}
.stat-top{display:flex;align-items:center;gap:10px;margin-bottom:14px}
.stat-label{font-size:.8rem;color:var(--muted);font-weight:500;letter-spacing:.02em;text-transform:uppercase}
.stat-ico{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.stat-ico.teal{background:rgba(0,229,195,.15);color:#00e5c3}
.stat-ico.orange{background:rgba(251,146,60,.15);color:#fb923c}
.stat-ico.pink{background:rgba(244,114,182,.15);color:#f472b6}
.stat-ico.blue{background:rgba(125,211,252,.15);color:#7dd3fc}
.stat-ico.purple{background:rgba(139,92,246,.15);color:#8b5cf6}
.stat-num{font-size:1.9rem;font-weight:700;color:var(--text);margin-bottom:10px;line-height:1}
.stat-num small{font-size:1rem;color:var(--muted);font-weight:400}
.stat-hint{font-size:.78rem;color:var(--muted);margin-top:6px}
.bar-track{height:5px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden;margin-bottom:4px}
.bar-fill{height:100%;border-radius:99px;transition:width .8s ease}
.bar-fill.teal{background:linear-gradient(90deg,#00e5c3,#00b09f)}
.bar-fill.orange{background:linear-gradient(90deg,#fb923c,#ef7c1a)}
.bar-fill.pink{background:linear-gradient(90deg,#f472b6,#e0589f)}
.bar-fill.blue{background:linear-gradient(90deg,#7dd3fc,#38bdf8)}
.bar-fill.purple{background:linear-gradient(90deg,#8b5cf6,#7c3aed)}
.mono{font-family:'DM Mono',monospace}
.teal-text{color:#00e5c3}

/* ---- PILLS ---- */
.pill-green{background:rgba(48,209,88,.12);color:#30d158;font-size:.73rem;font-weight:600;padding:5px 12px;border-radius:99px;border:1px solid rgba(48,209,88,.2)}
.pill-purple{background:rgba(139,92,246,.12);color:#8b5cf6;font-size:.73rem;font-weight:600;padding:5px 12px;border-radius:99px;border:1px solid rgba(139,92,246,.2)}
.link-btn{background:none;border:none;color:var(--accent);font-size:.82rem;font-family:'Outfit',sans-serif;cursor:pointer;font-weight:500}
.link-btn:hover{opacity:.8}

/* ---- MID/BOT ROWS ---- */
.mid-row{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:20px}
.bot-row{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-bottom:20px}

/* ---- CHART CARD ---- */
.chart-card{}
.tab-group{display:flex;gap:4px;background:var(--surface2);border-radius:10px;padding:4px}
.tab{background:none;border:none;color:var(--muted);font-family:'Outfit',sans-serif;font-size:.8rem;padding:6px 12px;border-radius:8px;cursor:pointer;transition:.2s;font-weight:500}
.tab.active{background:var(--accent);color:#080d16}

/* ---- RINGS ---- */
.rings-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.rings-svg-wrap{flex-shrink:0}
.ring-prog{transition:stroke-dashoffset 1.2s ease;stroke-dasharray:inherit}
.ring-legend{display:flex;flex-direction:column;gap:14px}
.rleg-item{display:flex;align-items:center;gap:10px}
.rleg-item .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
.rleg-item p{font-size:.85rem;font-weight:500;color:var(--text)}
.rleg-item small{font-size:.75rem;color:var(--muted)}

/* ---- WORKOUT LIST ---- */
.workout-list{display:flex;flex-direction:column;gap:12px}
.workout-row{display:flex;align-items:center;gap:14px;padding:12px;background:var(--surface2);border-radius:14px;cursor:pointer;transition:.2s}
.workout-row:hover{border:1px solid var(--border-hover)}
.workout-row img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex-shrink:0}
.wk-info{flex:1}
.wk-info h4{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:3px}
.wk-info p{font-size:.75rem;color:var(--muted)}
.start-btn{background:var(--accent);color:#080d16;border:none;border-radius:10px;padding:8px 18px;font-family:'Outfit',sans-serif;font-weight:600;font-size:.82rem;cursor:pointer;transition:.2s;flex-shrink:0}
.start-btn:hover{opacity:.85}
.block-btn{width:100%;margin-top:14px;padding:12px}

/* ---- RECOVERY/DONUT ---- */
.sleep-donut-wrap{position:relative;width:140px;margin:0 auto 16px}
.donut-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.donut-label h2{font-size:1.4rem;font-weight:700;font-family:'DM Mono',monospace}
.donut-label p{font-size:.72rem;color:var(--muted)}
.rec-stats{display:flex;justify-content:space-between;gap:8px}
.rec-item{text-align:center}
.rec-item span{font-size:.75rem;color:var(--muted);display:block}
.rec-item b{font-size:.9rem;font-weight:600;font-family:'DM Mono',monospace}

/* ---- AI TIPS ---- */
.ai-tips{display:flex;flex-direction:column;gap:12px}
.ai-tip{display:flex;align-items:center;gap:14px;padding:14px;background:var(--surface2);border-radius:14px;transition:.2s}
.ai-tip:hover{border:1px solid var(--border-hover)}
.tip-ico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:.9rem;flex-shrink:0}
.tip-ico.teal{background:rgba(0,229,195,.15);color:#00e5c3}
.tip-ico.purple{background:rgba(139,92,246,.15);color:#8b5cf6}
.tip-ico.orange{background:rgba(251,146,60,.15);color:#fb923c}
.tip-body{flex:1}
.tip-body h4{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:3px}
.tip-body p{font-size:.77rem;color:var(--muted);line-height:1.5}
.done-btn{background:none;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-family:'Outfit',sans-serif;font-size:.78rem;padding:6px 12px;cursor:pointer;transition:.2s;flex-shrink:0}
.done-btn:hover{border-color:var(--accent);color:var(--accent)}
.ai-tip.done-tip{opacity:.5}

/* ---- WEEK SCHEDULE ---- */
.week-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:16px}
.day-box{text-align:center;padding:10px 4px;border-radius:12px;background:var(--surface2)}
.day-box span{font-size:.7rem;color:var(--muted);display:block;margin-bottom:8px;font-weight:500}
.day-box small{font-size:.65rem;color:var(--muted);margin-top:6px;display:block}
.day-pip{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.1);margin:0 auto}
.done-pip{background:#30d158}
.today-pip{background:var(--accent);box-shadow:0 0 8px var(--accent)}
.today-box{border:1px solid rgba(0,229,195,.3)}
.next-session h4{font-size:.9rem;font-weight:600;color:var(--text)}
.next-session p{font-size:.78rem;color:var(--muted);margin-top:3px}

/* ---- WATER ---- */
.glass-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:6px;margin-bottom:16px}
.glass{background:var(--surface2);border:1px solid var(--border);border-radius:10px;aspect-ratio:1;display:flex;align-items:center;justify-content:center;font-size:.9rem;cursor:pointer;transition:.25s;color:var(--muted)}
.glass.filled{background:rgba(125,211,252,.12);border-color:rgba(125,211,252,.3);color:#7dd3fc}
.glass:hover{border-color:var(--border-hover)}
.water-visual{position:relative;height:80px;background:var(--surface2);border-radius:12px;overflow:hidden;margin:8px 0}
.water-fill{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(to top,rgba(125,211,252,.3),rgba(125,211,252,.1));transition:.5s;border-radius:12px 12px 0 0}
.water-label{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.85rem;font-weight:600;font-family:'DM Mono',monospace;color:#7dd3fc}

/* ---- HEALTH ROWS ---- */
.health-rows{display:flex;flex-direction:column;gap:16px}
.health-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hlabel{display:flex;align-items:center;gap:8px;width:130px;flex-shrink:0}
.hlabel span{font-size:.82rem;color:var(--muted)}
.hright{display:flex;align-items:center;gap:12px;flex:1}
.prog-track{height:6px;background:rgba(255,255,255,.07);border-radius:99px;flex:1;overflow:hidden}
.prog-fill{height:100%;border-radius:99px;transition:width .8s ease}
.hright b{font-size:.8rem;font-weight:600;color:var(--text);min-width:60px;text-align:right}

/* ---- SLEEP TIPS ---- */
.tips-list{display:flex;flex-direction:column;gap:10px}
.tip-row{display:flex;align-items:flex-start;gap:12px;padding:12px 14px;background:var(--surface2);border-radius:12px;cursor:pointer;transition:.2s}
.tip-row:hover{background:var(--surface)}
.tip-row>i:first-child{font-size:.9rem;margin-top:2px;flex-shrink:0}
.tip-row div{flex:1}
.tip-row h4{font-size:.85rem;font-weight:600;color:var(--text);margin-bottom:4px}
.tip-row p{font-size:.77rem;color:var(--muted);line-height:1.5;max-height:0;overflow:hidden;transition:.3s}
.tip-row.open p{max-height:80px}
.chev{font-size:.75rem;color:var(--muted);transition:.3s;margin-top:3px}
.tip-row.open .chev{transform:rotate(180deg)}

/* ---- ACTIVITY LOG ---- */
.activity-log{display:flex;flex-direction:column;gap:10px}
.log-row{display:flex;align-items:center;gap:12px;padding:12px;background:var(--surface2);border-radius:12px}
.log-ico{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;flex-shrink:0}
.teal-ico{background:rgba(0,229,195,.12);color:#00e5c3}
.orange-ico{background:rgba(251,146,60,.12);color:#fb923c}
.purple-ico{background:rgba(139,92,246,.12);color:#8b5cf6}
.blue-ico{background:rgba(125,211,252,.12);color:#7dd3fc}
.log-body{flex:1}
.log-body h4{font-size:.84rem;font-weight:600;color:var(--text);margin-bottom:2px}
.log-body p{font-size:.75rem;color:var(--muted)}
.log-kcal{font-size:.82rem;font-weight:600;font-family:'DM Mono',monospace}

/* ---- PROFILE ---- */
.profile-hero{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-bottom:16px}
.profile-card{overflow:visible}
.profile-banner{height:80px;background:linear-gradient(120deg,rgba(0,229,195,.2),rgba(124,92,252,.2));border-radius:14px 14px 0 0;margin:-22px -22px 0;border-bottom:1px solid var(--border)}
.profile-body{display:flex;align-items:flex-start;gap:16px;padding-top:12px;flex-wrap:wrap}
.profile-av-wrap{position:relative;flex-shrink:0;margin-top:-40px}
.profile-av{width:80px;height:80px;border-radius:50%;border:3px solid var(--accent);object-fit:cover}
.av-edit-btn{position:absolute;bottom:0;right:0;background:var(--accent);color:#080d16;border:none;border-radius:50%;width:24px;height:24px;font-size:.65rem;cursor:pointer;display:flex;align-items:center;justify-content:center}
.profile-info{flex:1}
.profile-info h2{font-size:1.2rem;font-weight:700;color:var(--text);margin-bottom:3px}
.profile-info p{font-size:.8rem;color:var(--muted)}
.tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ptag{background:var(--surface2);border:1px solid var(--border);border-radius:8px;padding:4px 10px;font-size:.75rem;color:var(--muted)}
.edit-profile-btn{background:none;border:1px solid var(--border);border-radius:10px;color:var(--muted);font-family:'Outfit',sans-serif;font-size:.8rem;padding:8px 14px;cursor:pointer;transition:.2s;white-space:nowrap}
.edit-profile-btn:hover{border-color:var(--accent);color:var(--accent)}
.p-stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.p-stat{text-align:center;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:6px}
.p-stat h3{font-size:1.5rem;font-weight:700;font-family:'DM Mono',monospace;color:var(--text)}
.p-stat p{font-size:.78rem;color:var(--muted)}
.p-stat i{font-size:1.1rem}

/* ---- EDIT FORM ---- */
.edit-form-card{margin-bottom:16px}
.form-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.form-group{display:flex;flex-direction:column;gap:6px}
.form-group label{font-size:.78rem;color:var(--muted);font-weight:500}
.form-inp{background:var(--surface2);border:1px solid var(--border);border-radius:10px;padding:10px 14px;color:var(--text);font-family:'Outfit',sans-serif;font-size:.88rem;outline:none;transition:.2s;width:100%}
.form-inp:focus{border-color:var(--accent)}
.save-btn{margin-top:16px;padding:12px 24px}

/* ---- BADGES ---- */
.badges-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:12px}
.badge-cell{text-align:center;padding:16px 8px;border-radius:14px;transition:.2s}
.badge-cell i{font-size:1.4rem;display:block;margin-bottom:8px}
.badge-cell p{font-size:.7rem;color:var(--muted)}
.badge-cell.earned{background:rgba(0,229,195,.08);border:1px solid rgba(0,229,195,.2)}
.badge-cell.earned i{color:var(--accent)}
.badge-cell.locked{background:var(--surface2);border:1px solid var(--border);opacity:.5}
.badge-cell.locked i{color:var(--muted)}
.badge-cell:hover{transform:translateY(-3px)}

/* ---- MODAL ---- */
.overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:500;align-items:center;justify-content:center;backdrop-filter:blur(4px)}
.overlay.open{display:flex}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:24px;padding:28px;width:380px;max-width:95vw}
.settings-modal{width:480px}
.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.modal-head h3{font-size:1.1rem;font-weight:600}
.timer-wrap{position:relative;width:160px;margin:0 auto 24px}
.timer-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.timer-center span{font-size:1.5rem;font-weight:700;font-family:'DM Mono',monospace;color:var(--text)}
.timer-center small{font-size:.7rem;color:var(--muted);display:block}
.modal-stats{display:flex;justify-content:space-around;margin-bottom:24px;gap:8px}
.modal-stats div{text-align:center}
.modal-stats h4{font-size:1.3rem;font-weight:700;font-family:'DM Mono',monospace;color:var(--text)}
.modal-stats p{font-size:.72rem;color:var(--muted)}
.modal-controls{display:flex;justify-content:center;gap:12px}
.ctrl-btn{width:52px;height:52px;border-radius:50%;border:1px solid var(--border);background:var(--surface2);color:var(--text);cursor:pointer;font-size:.9rem;transition:.2s;display:flex;align-items:center;justify-content:center;font-family:'Outfit',sans-serif}
.ctrl-btn.primary{background:var(--accent);color:#080d16;border-color:var(--accent);width:auto;padding:0 24px;border-radius:14px;font-weight:600;font-size:.88rem;gap:6px}
.ctrl-btn.danger{background:rgba(255,55,95,.12);border-color:rgba(255,55,95,.3);color:#ff375f}
.ctrl-btn:hover{opacity:.85}

/* ---- SETTINGS ---- */
.settings-body{display:flex;flex-direction:column;gap:12px}
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--surface2);border-radius:12px;gap:12px}
.setting-row h4{font-size:.88rem;font-weight:600;color:var(--text);margin-bottom:2px}
.setting-row p{font-size:.77rem;color:var(--muted)}
.toggle{width:44px;height:24px;border-radius:99px;background:rgba(255,255,255,.1);position:relative;cursor:pointer;transition:.3s;flex-shrink:0}
.toggle.on{background:var(--accent)}
.knob{width:20px;height:20px;border-radius:50%;background:#fff;position:absolute;top:2px;left:2px;transition:.3s;box-shadow:0 1px 4px rgba(0,0,0,.3)}
.toggle.on .knob{left:22px}

/* ---- RESPONSIVE ---- */
@media(max-width:1280px){
  .stat-row{grid-template-columns:repeat(2,1fr)}
  .badges-grid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:1060px){
  .mid-row{grid-template-columns:1fr}
  .bot-row{grid-template-columns:1fr}
  .profile-hero{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  :root{--sidebar:0px}
  .sidebar{transform:translateX(-240px);width:240px}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0;width:100%;padding:20px 16px}
  .hamburger{display:flex}
}
@media(max-width:640px){
  .stat-row{grid-template-columns:1fr 1fr}
  .week-grid{grid-template-columns:repeat(4,1fr)}
  .glass-grid{grid-template-columns:repeat(4,1fr)}
  .p-stats-grid{grid-template-columns:1fr 1fr}
  .form-grid{grid-template-columns:1fr}
  .badges-grid{grid-template-columns:repeat(4,1fr)}
  .search-box input{width:100px}
}
/* =========================
   INTRO SCREEN
========================= */

.intro-screen{
    position:fixed;
    inset:0;
    background:#050811;
    z-index:99999;

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

    overflow:hidden;

    animation:introFadeOut 1s ease forwards;
    animation-delay:3.6s;
}

.intro-screen::before{
    content:'';
    position:absolute;
    width:700px;
    height:700px;
    background:radial-gradient(circle,#00e5c320 0%,transparent 70%);
    animation:pulseOrb 4s infinite linear;
}

.intro-logo{
    position:relative;
    z-index:2;
    text-align:center;
}

.intro-icon{
    width:90px;
    height:90px;
    margin:auto;
    border-radius:24px;

    background:linear-gradient(135deg,#00e5c3,#7c5cfc);

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

    color:#050811;
    font-size:2rem;

    box-shadow:
      0 0 40px rgba(0,229,195,.4),
      0 0 80px rgba(124,92,252,.3);

    animation:floatIcon 3s ease-in-out infinite;
}

.intro-title{
    margin-top:24px;
    font-size:4rem;
    font-weight:800;
    letter-spacing:4px;
    color:white;
}

.intro-sub{
    margin-top:10px;
    color:#64748b;
    font-size:1rem;
    letter-spacing:3px;
    text-transform:uppercase;
}

@keyframes introFadeOut{
    to{
        opacity:0;
        visibility:hidden;
        pointer-events:none;
    }
}

@keyframes floatIcon{
    0%{
        transform:translateY(0px) rotate(0deg);
    }

    50%{
        transform:translateY(-10px) rotate(4deg);
    }

    100%{
        transform:translateY(0px) rotate(0deg);
    }
}

@keyframes pulseOrb{
    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }
}

/* =========================
   SCRAMBLE TEXT EFFECT
========================= */

.scramble{
    position:relative;
}

/* =========================
   MAIN WEBSITE ENTRY
========================= */

.main,
.sidebar{
    animation:mainReveal 1.4s ease;
}

@keyframes mainReveal{
    from{
        opacity:0;
        transform:translateY(30px) scale(.98);
        filter:blur(10px);
    }

    to{
        opacity:1;
        transform:translateY(0) scale(1);
        filter:blur(0);
    }
}
.about-section {
    width: 100%;
    margin-top: 30px;
    padding: 30px;
    background: #0d1326;
    border-radius: 20px;
    color: white;
    display: block;
    clear: both;
    grid-column: 1 / -1;
}

.about-section h2 {
    font-size: 32px;
    margin-bottom: 20px;
    color: white;
}

.about-section p {
    font-size: 18px;
    line-height: 1.7;
    margin-bottom: 20px;
    color: #dcdcdc;
}

.contributors {
    margin-top: 30px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}

.member {
    background: rgba(255,255,255,0.05);
    padding: 20px;
    border-radius: 15px;
}

.member h3 {
    color: #ffffff;
    margin-bottom: 10px;
}

.member p {
    margin: 5px 0;
    font-size: 16px;
}
/* CONTACT PAGE */

.contact-section {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

.contact-form {
  margin-top: 20px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.full-width {
  grid-column: span 2;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #cbd5e1;
}

.form-inp {
  width: 100%;
  padding: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  background: rgba(255,255,255,0.04);
  color: white;
  font-size: 14px;
  outline: none;
}

.form-inp:focus {
  border-color: #00e5c3;
}

textarea.form-inp {
  resize: none;
}

.save-btn {
  margin-top: 20px;
  width: 100%;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.info-row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.info-row i {
  font-size: 18px;
  color: #00e5c3;
  margin-top: 4px;
}

.info-row h4 {
  margin: 0;
  font-size: 15px;
  color: white;
}

.info-row p {
  margin: 4px 0 0;
  font-size: 14px;
  color: #94a3b8;
}

@media(max-width: 900px) {
  .contact-section {
    grid-template-columns: 1fr;
  }

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

  .full-width {
    grid-column: span 1;
  }
}