/* =====================================================================
   Vidyapath shared design system
   Import this once (e.g. in __root.tsx) so tokens are available everywhere.
   ===================================================================== */
:root{
  --ink:#14171F; --ink-soft:#20242F; --paper:#F3EFE6; --paper-2:#EAE3D3;
  --marigold:#E8A33D; --marigold-dark:#B97A22; --coral:#FF5A46; --teal:#2F5D50;
  --teal-light:#CFE0D8; --slate:#6B7280; --line:#DAD3C3; --line-dark:#33384280;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Inter',sans-serif;background:var(--paper);color:var(--ink);line-height:1.5;overflow-x:hidden;}
h1,h2,h3,.display{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;text-decoration:none;}
img,svg{display:block;}
.wrap{max-width:1120px;margin:0 auto;padding:0 32px;}

.logo{font-size:1.15rem;font-weight:700;display:flex;align-items:center;gap:8px;}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--coral);}

.btn-primary{
  background:var(--coral);color:white;padding:13px 24px;border-radius:10px;
  font-weight:600;font-size:0.92rem;transition:transform .2s ease, box-shadow .2s ease;
  display:inline-block;border:none;cursor:pointer;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px -8px rgba(255,90,70,0.5);}
.btn-ghost{
  border:1px solid var(--line-dark);color:var(--ink);padding:13px 24px;border-radius:10px;
  font-weight:600;font-size:0.92rem;transition:background .2s ease;background:transparent;cursor:pointer;
}
.btn-ghost:hover{background:var(--paper-2);}

.pulse{width:8px;height:8px;border-radius:50%;background:#4ADE80;animation:pulse 2s infinite;flex-shrink:0;}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(74,222,128,0.55);}
  70%{box-shadow:0 0 0 8px rgba(74,222,128,0);}
  100%{box-shadow:0 0 0 0 rgba(74,222,128,0);}
}
@media (prefers-reduced-motion: reduce){.pulse,.resume-item{animation:none !important;opacity:1 !important;}}

/* ===== LANDING ===== */
nav.site-nav{position:sticky;top:0;z-index:50;background:rgba(243,239,230,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.nav-inner{display:flex;align-items:center;justify-content:space-between;padding:20px 32px;max-width:1120px;margin:0 auto;}
.nav-links{display:flex;gap:32px;list-style:none;align-items:center;}
.nav-links a{font-size:0.92rem;font-weight:500;color:var(--slate);transition:color .2s;cursor:pointer;}
.nav-links a:hover{color:var(--ink);}
.nav-cta{background:var(--ink);color:var(--paper);padding:10px 20px;border-radius:100px;font-size:0.88rem;font-weight:600;transition:transform .2s ease, background .2s ease;cursor:pointer;}
.nav-cta:hover{background:var(--coral);transform:translateY(-1px);}
@media(max-width:760px){.nav-links{display:none;}}

.hero{padding:88px 0 96px;display:grid;grid-template-columns:1.05fr 0.95fr;gap:56px;align-items:center;}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding:56px 0;}}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:0.78rem;font-weight:500;letter-spacing:0.02em;color:var(--teal);background:var(--teal-light);padding:6px 14px;border-radius:100px;margin-bottom:24px;}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--teal);}
.hero h1{font-size:clamp(2.4rem,4.4vw,3.6rem);font-weight:700;letter-spacing:-0.02em;line-height:1.06;margin-bottom:22px;}
.hero h1 em{font-style:normal;color:var(--marigold-dark);}
.hero p.lede{font-size:1.08rem;color:var(--slate);max-width:480px;margin-bottom:32px;}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:40px;}
.hero-note{font-size:0.85rem;color:var(--slate);display:flex;align-items:center;gap:10px;}
.avatars{display:flex;}
.avatars span{width:26px;height:26px;border-radius:50%;border:2px solid var(--paper);margin-left:-8px;display:inline-block;}
.avatars span:first-child{margin-left:0;}

.resume-card{background:var(--ink);color:var(--paper);border-radius:20px;padding:28px;position:relative;box-shadow:0 30px 60px -20px rgba(20,23,31,0.45);}
.resume-card::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(600px 200px at 90% -10%, rgba(232,163,61,0.18), transparent 60%);pointer-events:none;}
.resume-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;}
.sync-badge{display:flex;align-items:center;gap:8px;font-size:0.76rem;color:#B9E4D0;}
.resume-name{font-size:1.25rem;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.resume-role{font-size:0.85rem;color:#9AA1AE;margin-top:2px;}
.resume-section-label{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.08em;color:#7C8494;margin:20px 0 10px;}
.resume-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;border-top:1px solid #2B2F3A;font-size:0.86rem;opacity:0;animation:fadein 0.5s ease forwards;}
.resume-item span.check{color:#4ADE80;font-size:0.8rem;}
@keyframes fadein{to{opacity:1;}}
.r-items .resume-item:nth-child(1){animation-delay:0.4s;}
.r-items .resume-item:nth-child(2){animation-delay:0.7s;}
.r-items .resume-item:nth-child(3){animation-delay:1.0s;}
.r-items .resume-item:nth-child(4){animation-delay:1.3s;}
.resume-footer{margin-top:22px;padding-top:16px;border-top:1px solid #2B2F3A;display:flex;justify-content:space-between;align-items:center;}
.resume-footer .tag{font-size:0.72rem;background:rgba(232,163,61,0.15);color:var(--marigold);padding:4px 10px;border-radius:100px;}

.stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:36px 0;}
.stats-inner{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left;}
@media(max-width:760px){.stats-inner{grid-template-columns:repeat(2,1fr);}}
.stat-num{font-size:1.9rem;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.stat-label{font-size:0.82rem;color:var(--slate);margin-top:2px;}

.section{padding:96px 0;}
.section-head{max-width:560px;margin-bottom:56px;}
.section-kicker{font-size:0.78rem;font-weight:600;color:var(--coral);text-transform:uppercase;letter-spacing:0.08em;margin-bottom:14px;}
.section-head h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-0.02em;margin-bottom:14px;}
.section-head p{color:var(--slate);font-size:1.02rem;}

.pipeline{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:white;}
.p-row{display:grid;grid-template-columns:64px 1fr 1.3fr;gap:24px;padding:32px;border-bottom:1px solid var(--line);align-items:center;}
.p-row:last-child{border-bottom:none;}
@media(max-width:760px){.p-row{grid-template-columns:44px 1fr;}.p-row .p-visual{display:none;}}
.p-index{font-family:'JetBrains Mono',monospace;font-size:0.85rem;color:var(--slate);width:40px;height:40px;border-radius:10px;background:var(--paper-2);display:flex;align-items:center;justify-content:center;}
.p-body h3{font-size:1.15rem;font-weight:600;margin-bottom:6px;}
.p-body p{color:var(--slate);font-size:0.94rem;max-width:420px;}
.p-tag{display:inline-block;margin-top:10px;font-size:0.72rem;font-family:'JetBrains Mono',monospace;color:var(--teal);background:var(--teal-light);padding:3px 10px;border-radius:100px;}
.p-visual{height:100%;min-height:80px;border-radius:12px;background:linear-gradient(135deg, var(--paper-2), var(--paper));display:flex;align-items:center;justify-content:center;font-size:0.78rem;color:var(--slate);border:1px dashed var(--line-dark);transition:border-color .15s ease, color .15s ease;}
.p-visual:hover{border-color:var(--marigold);border-style:solid;color:var(--ink);}

/* Simplified homepage nav: menu button beside logo */
.nav-left{display:flex;align-items:center;gap:14px;}
.home-btn{
  display:flex;align-items:center;gap:7px;
  height:36px;padding:0 16px;border-radius:100px;
  border:1px solid var(--line);background:var(--paper);
  font-size:0.86rem;font-weight:600;color:var(--ink);
  cursor:pointer;flex-shrink:0;transition:border-color .2s ease, background .2s ease;
}
.home-btn svg{width:15px;height:15px;stroke:var(--ink);flex-shrink:0;}
.home-btn:hover{border-color:var(--line-dark);}
.home-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper);}
.home-btn[aria-expanded="true"] svg{stroke:var(--paper);}
.mobile-menu{
  position:fixed;top:0;left:0;bottom:0;width:280px;max-width:80vw;
  background:var(--paper);border-right:1px solid var(--line);
  display:flex;flex-direction:column;padding:80px 28px 24px;
  box-shadow:24px 0 40px -24px rgba(20,23,31,0.35);
  transform:translateX(-100%);transition:transform .28s ease;
  z-index:70;
}
.mobile-menu.open{transform:translateX(0);}
.mobile-menu-close{
  position:absolute;top:20px;right:20px;width:36px;height:36px;
  border:1px solid var(--line);border-radius:8px;background:var(--paper);
  font-size:1.4rem;line-height:1;color:var(--ink);cursor:pointer;
}
.mobile-menu-close:hover{border-color:var(--line-dark);}
.mobile-menu a{padding:14px 4px;font-size:0.95rem;color:var(--slate);border-bottom:1px solid var(--line);}
.mobile-menu a:last-child{border-bottom:none;}
.mobile-menu a:hover{color:var(--ink);}
.menu-backdrop{
  position:fixed;inset:0;background:rgba(20,23,31,0.4);
  opacity:0;pointer-events:none;transition:opacity .28s ease;z-index:60;
}
.menu-backdrop.open{opacity:1;pointer-events:auto;}
@media (prefers-reduced-motion: reduce){.mobile-menu,.menu-backdrop{transition:none;}}

/* Simplified quick-links strip, replaces the old pillar/compare/pricing/testimonial blocks */
.quick-links{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;margin-top:8px;}
@media(max-width:820px){.quick-links{grid-template-columns:repeat(3,1fr);}}
@media(max-width:520px){.quick-links{grid-template-columns:repeat(2,1fr);}}
.quick-link{
  background:white;border:1px solid var(--line);border-radius:14px;
  padding:22px 14px;text-align:center;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.quick-link:hover{transform:translateY(-2px);box-shadow:0 14px 24px -16px rgba(20,23,31,0.25);border-color:var(--line-dark);}
.quick-link-icon{
  width:40px;height:40px;border-radius:10px;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;margin:0 auto 12px;
}
.quick-link-icon svg{width:18px;height:18px;stroke:var(--ink);}
.quick-link span{display:block;font-size:0.86rem;font-weight:500;}
.p-visual.feed{background:linear-gradient(135deg,#fbeedd,#fff);}
.p-visual .feed-arrow{font-family:'JetBrains Mono',monospace;color:var(--marigold-dark);}

.compare-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr 1fr 1fr;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:white;}
.compare-grid > div{padding:18px 16px;font-size:0.85rem;border-bottom:1px solid var(--line);border-right:1px solid var(--line);}
.compare-grid > div:nth-child(5n){border-right:none;}
.compare-grid .head{font-weight:600;background:var(--paper-2);font-size:0.82rem;}
.compare-grid .row-label{font-weight:500;color:var(--ink);}
.compare-grid .yes{color:var(--teal);font-weight:600;}
.compare-grid .no{color:var(--slate);}
.compare-grid .vidyapath-col{background:rgba(232,163,61,0.08);}
@media(max-width:900px){.compare-wrap{overflow-x:auto;}.compare-grid{min-width:680px;}}

.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}}
.price-card{background:white;border:1px solid var(--line);border-radius:16px;padding:32px;position:relative;display:flex;flex-direction:column;}
.price-card.featured{border:2px solid var(--marigold);background:linear-gradient(180deg,#fff,#FBF3E4);}
.price-badge{position:absolute;top:-13px;left:32px;background:var(--marigold);color:var(--ink);font-size:0.72rem;font-weight:700;padding:5px 12px;border-radius:100px;}
.price-name{font-family:'Space Grotesk',sans-serif;font-size:1.1rem;font-weight:600;margin-bottom:8px;}
.price-amount{font-family:'Space Grotesk',sans-serif;font-size:2.1rem;font-weight:700;margin-bottom:10px;}
.price-amount span{font-size:0.85rem;font-weight:500;color:var(--slate);font-family:'Inter',sans-serif;}
.price-desc{color:var(--slate);font-size:0.9rem;margin-bottom:20px;}
.price-list{list-style:none;margin-bottom:28px;flex:1;}
.price-list li{font-size:0.88rem;color:var(--ink);padding:8px 0 8px 22px;position:relative;border-top:1px solid var(--line);}
.price-list li:first-child{border-top:none;}
.price-list li::before{content:'✓';position:absolute;left:0;color:var(--teal);font-weight:700;}
.price-btn{width:100%;text-align:center;}

.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
@media(max-width:900px){.testi-grid{grid-template-columns:1fr;}}
.testi-card{background:white;border:1px solid var(--line);border-radius:16px;padding:28px;}
.testi-card p{font-size:0.95rem;color:var(--ink);margin-bottom:20px;font-style:italic;}
.testi-author{display:flex;align-items:center;gap:12px;}
.testi-avatar{width:38px;height:38px;border-radius:50%;color:white;font-weight:700;font-size:0.85rem;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.testi-author strong{display:block;font-size:0.88rem;}
.testi-author small{color:var(--slate);font-size:0.78rem;}

.cta-band{background:var(--ink);color:var(--paper);border-radius:24px;padding:64px 48px;display:flex;justify-content:space-between;align-items:center;gap:32px;flex-wrap:wrap;}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.1rem);font-weight:700;max-width:460px;letter-spacing:-0.02em;}
.cta-band p{color:#9AA1AE;margin-top:10px;max-width:420px;font-size:0.95rem;}

footer.site-footer{padding:48px 0 64px;border-top:1px solid var(--line);}
.footer-inner{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;}
.footer-links{display:flex;gap:28px;list-style:none;font-size:0.85rem;color:var(--slate);}

/* ===== AUTH ===== */
.auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:56px 32px;}
.auth-shell{display:grid;grid-template-columns:1fr 1fr;max-width:960px;width:100%;border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -25px rgba(20,23,31,0.35);}
@media(max-width:820px){.auth-shell{grid-template-columns:1fr;max-width:440px;}.visual-side{display:none;}}
.form-side{background:white;padding:48px 44px;}
.back-link{font-size:0.82rem;color:var(--slate);margin-bottom:20px;display:inline-block;cursor:pointer;}
.back-link:hover{color:var(--ink);}
.tabs{display:flex;gap:4px;background:var(--paper-2);padding:4px;border-radius:10px;margin-bottom:28px;}
.tab{flex:1;text-align:center;padding:9px 0;border-radius:8px;font-size:0.86rem;font-weight:600;color:var(--slate);cursor:pointer;transition:all .2s ease;border:none;background:transparent;}
.tab.active{background:var(--ink);color:var(--paper);}
h1.form-title{font-size:1.5rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;}
.form-sub{color:var(--slate);font-size:0.9rem;margin-bottom:28px;}
form.auth-form{display:flex;flex-direction:column;gap:16px;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{font-size:0.82rem;font-weight:600;}
.field input{padding:11px 13px;border:1px solid var(--line);border-radius:9px;font-size:0.92rem;font-family:inherit;background:var(--paper);transition:border-color .2s, box-shadow .2s;width:100%;}
.field input:focus{outline:none;border-color:var(--marigold);box-shadow:0 0 0 3px rgba(232,163,61,0.18);background:white;}
.row-between{display:flex;justify-content:space-between;align-items:center;font-size:0.85rem;}
.checkbox{display:flex;align-items:center;gap:8px;color:var(--slate);}
.checkbox input{width:auto;}
.link{color:var(--marigold-dark);font-weight:600;cursor:pointer;background:none;border:none;font-size:inherit;}
.btn-submit{background:var(--coral);color:white;border:none;padding:13px;border-radius:9px;font-weight:600;font-size:0.95rem;cursor:pointer;margin-top:4px;transition:transform .2s ease, box-shadow .2s ease;width:100%;}
.btn-submit:hover{transform:translateY(-1px);box-shadow:0 10px 22px -10px rgba(255,90,70,0.55);}
.divider{display:flex;align-items:center;gap:12px;color:var(--slate);font-size:0.78rem;margin:22px 0;}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--line);}
.btn-social{display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:var(--paper);padding:11px;border-radius:9px;font-weight:600;font-size:0.86rem;cursor:pointer;transition:background .2s;}
.btn-social:hover{background:white;border-color:var(--ink);}
.switch-line{text-align:center;margin-top:24px;font-size:0.86rem;color:var(--slate);}
.visual-side{background:var(--ink);color:var(--paper);padding:48px 40px;position:relative;display:flex;flex-direction:column;justify-content:space-between;}
.visual-side::before{content:'';position:absolute;inset:0;background:radial-gradient(500px 220px at 100% 0%, rgba(232,163,61,0.16), transparent 60%);}
.visual-top{position:relative;z-index:1;}
.visual-top h2{font-size:1.5rem;font-weight:600;margin-bottom:10px;letter-spacing:-0.01em;}
.visual-top p{color:#9AA1AE;font-size:0.9rem;max-width:280px;}
.mini-resume{position:relative;z-index:1;background:var(--ink-soft);border:1px solid #2B2F3A;border-radius:14px;padding:18px;}
.mini-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;}
.mini-sync{display:flex;align-items:center;gap:6px;font-size:0.7rem;color:#B9E4D0;}
.mini-item{display:flex;justify-content:space-between;font-size:0.78rem;padding:8px 0;border-top:1px solid #2B2F3A;color:#C7CCD6;}
.mini-item:first-child{border-top:none;}
.mini-item span.check{color:#4ADE80;}
.visual-bottom{position:relative;z-index:1;font-size:0.78rem;color:#7C8494;}

/* ===== DASHBOARD ===== */
.topbar{background:white;border-bottom:1px solid var(--line);padding:14px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;}
.topbar .logo{cursor:pointer;background:none;border:none;}
.top-search{background:var(--paper);border:1px solid var(--line);padding:9px 14px;border-radius:8px;width:280px;font-size:0.85rem;}
.top-search:focus{outline:none;border-color:var(--marigold);}
.top-right{display:flex;align-items:center;gap:18px;}
.icon-btn{position:relative;font-size:1.1rem;color:var(--slate);cursor:pointer;background:none;border:none;}
.badge-dot{position:absolute;top:-3px;right:-4px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:1.5px solid white;}
.avatar-btn{width:34px;height:34px;border-radius:50%;background:var(--ink);color:var(--paper);display:flex;align-items:center;justify-content:center;font-weight:600;font-size:0.82rem;cursor:pointer;border:none;}
.shell{display:flex;min-height:calc(100vh - 61px);}
.sidebar{width:240px;background:white;border-right:1px solid var(--line);padding:24px 16px;flex-shrink:0;}
.side-label{font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--slate);margin:18px 12px 8px;}
.side-label:first-child{margin-top:0;}
.side-link{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:9px;font-size:0.88rem;color:var(--slate);font-weight:500;margin-bottom:2px;transition:all .15s;cursor:pointer;}
.side-link:hover{background:var(--paper-2);color:var(--ink);}
.side-link.active{background:var(--ink);color:var(--paper);}
.side-link .ico{width:16px;text-align:center;font-size:0.9rem;}
.main{flex:1;padding:32px 36px;max-width:1200px;}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:28px;flex-wrap:wrap;gap:16px;}
.page-head h1{font-size:1.7rem;font-weight:700;letter-spacing:-0.01em;margin-bottom:6px;}
.page-head p{color:var(--slate);font-size:0.92rem;}
.sync-banner{background:var(--ink);color:var(--paper);border-radius:16px;padding:22px 26px;display:flex;justify-content:space-between;align-items:center;margin-bottom:28px;flex-wrap:wrap;gap:16px;}
.sync-left{display:flex;align-items:center;gap:14px;}
.sync-left h3{font-size:0.98rem;font-weight:600;margin-bottom:2px;}
.sync-left p{font-size:0.82rem;color:#9AA1AE;}
.btn-ghost-dark{border:1px solid #3A3F4C;color:var(--paper);padding:9px 16px;border-radius:8px;font-size:0.83rem;font-weight:600;cursor:pointer;background:none;}
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:32px;}
@media(max-width:900px){.stat-grid{grid-template-columns:repeat(2,1fr);}}
.stat-card{background:white;border:1px solid var(--line);border-radius:14px;padding:18px 20px;}
.stat-value{font-size:1.6rem;font-weight:700;font-family:'Space Grotesk',sans-serif;}
.stat-delta{font-size:0.76rem;color:var(--teal);margin-top:6px;}
.cols{display:grid;grid-template-columns:1.5fr 1fr;gap:24px;align-items:start;}
@media(max-width:960px){.cols{grid-template-columns:1fr;}}
.card{background:white;border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:24px;}
.card h2{font-size:1.05rem;font-weight:600;margin-bottom:16px;}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;}
@media(max-width:500px){.portfolio-grid{grid-template-columns:repeat(2,1fr);}}
.p-thumb{aspect-ratio:1;border-radius:10px;background:linear-gradient(135deg,var(--paper-2),var(--paper));border:1px dashed var(--line);display:flex;align-items:center;justify-content:center;font-size:0.72rem;color:var(--slate);text-align:center;padding:6px;}
.p-thumb.add{border:1px dashed var(--marigold);color:var(--marigold-dark);cursor:pointer;font-weight:600;}
.path-row{display:flex;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line);}
.path-row:first-child{border-top:none;}
.path-icon{width:36px;height:36px;border-radius:9px;background:var(--teal-light);color:var(--teal);display:flex;align-items:center;justify-content:center;font-size:0.85rem;flex-shrink:0;font-weight:700;}
.path-info{flex:1;}
.path-info h4{font-size:0.88rem;font-weight:600;margin-bottom:4px;}
.path-bar{height:5px;background:var(--paper-2);border-radius:4px;overflow:hidden;}
.path-fill{height:100%;background:var(--marigold);border-radius:4px;}
.path-pct{font-size:0.78rem;color:var(--slate);width:34px;text-align:right;}
.job-row{padding:14px 0;border-top:1px solid var(--line);}
.job-row:first-child{border-top:none;}
.job-top{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px;}
.job-top h4{font-size:0.9rem;font-weight:600;}
.job-tag{font-size:0.7rem;background:var(--teal-light);color:var(--teal);padding:3px 9px;border-radius:100px;font-weight:600;}
.job-meta{font-size:0.8rem;color:var(--slate);}
.comment-row{display:flex;gap:10px;padding:12px 0;border-top:1px solid var(--line);}
.comment-row:first-child{border-top:none;}
.c-avatar{width:30px;height:30px;border-radius:50%;color:white;font-size:0.7rem;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.comment-body p{font-size:0.83rem;margin-bottom:2px;}
.comment-body small{font-size:0.74rem;color:var(--slate);}

/* ===== EXTRA: RESUME PAGE ===== */
.resume-doc{background:white;border:1px solid var(--line);border-radius:16px;padding:40px;max-width:760px;margin:0 auto;}
.resume-doc-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:20px;margin-bottom:24px;}
.resume-doc-head h1{font-size:1.6rem;font-weight:700;margin-bottom:4px;}
.resume-doc-head p{color:var(--slate);font-size:0.9rem;}
.resume-doc-section{margin-bottom:26px;}
.resume-doc-section h2{font-size:0.78rem;text-transform:uppercase;letter-spacing:0.08em;color:var(--marigold-dark);margin-bottom:12px;border-bottom:1px solid var(--line);padding-bottom:6px;}
.resume-entry{margin-bottom:14px;}
.resume-entry-top{display:flex;justify-content:space-between;font-size:0.92rem;font-weight:600;}
.resume-entry-sub{font-size:0.84rem;color:var(--slate);margin-top:2px;}
.resume-entry-desc{font-size:0.86rem;color:var(--ink);margin-top:6px;}
.skill-pill{display:inline-block;background:var(--paper-2);color:var(--ink);font-size:0.78rem;padding:5px 12px;border-radius:100px;margin:0 6px 6px 0;}

/* ===== EXTRA: JOBS PAGE FILTERS ===== */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px;}
.filter-chip{background:white;border:1px solid var(--line);padding:8px 16px;border-radius:100px;font-size:0.84rem;font-weight:500;color:var(--slate);cursor:pointer;}
.filter-chip.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.job-card{background:white;border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:14px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;}
.job-card-info h3{font-size:1rem;font-weight:600;margin-bottom:4px;}
.job-card-info p{font-size:0.85rem;color:var(--slate);}
.job-card-tags{display:flex;gap:8px;margin-top:8px;}

/* ===== EXTRA: COMMUNITY PAGE ===== */
.composer{background:white;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:24px;}
.composer textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:12px;font-family:inherit;font-size:0.9rem;resize:vertical;min-height:70px;background:var(--paper);}
.composer textarea:focus{outline:none;border-color:var(--marigold);}
.feed-card{background:white;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:14px;}
.feed-card-top{display:flex;gap:10px;align-items:center;margin-bottom:10px;}
.feed-card-top strong{font-size:0.9rem;}
.feed-card-top small{color:var(--slate);font-size:0.78rem;display:block;}
.feed-card p{font-size:0.9rem;}

/* ===== EXTRA: LEARNING PAGE ===== */
.course-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:760px){.course-grid{grid-template-columns:1fr;}}
.course-card2{background:white;border:1px solid var(--line);border-radius:14px;padding:20px;}
.course-card2 h3{font-size:1rem;font-weight:600;margin-bottom:6px;}
.course-card2 p{font-size:0.85rem;color:var(--slate);margin-bottom:12px;}

/* ===== EXTRA: PUBLIC PROFILE PAGE ===== */
.public-nav{position:sticky;top:0;z-index:50;background:rgba(243,239,230,0.9);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);}
.public-nav-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 32px;max-width:1120px;margin:0 auto;}
.public-nav-actions{display:flex;gap:10px;align-items:center;}

.profile-hero{background:var(--ink);color:var(--paper);border-radius:20px;padding:36px 40px;position:relative;box-shadow:0 30px 60px -20px rgba(20,23,31,0.45);margin:40px 0 24px;overflow:hidden;}
.profile-hero::before{content:'';position:absolute;inset:0;border-radius:20px;background:radial-gradient(600px 200px at 90% -10%, rgba(232,163,61,0.18), transparent 60%);pointer-events:none;}
.profile-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;}
.profile-id{display:flex;gap:18px;align-items:center;}
.profile-avatar{width:64px;height:64px;border-radius:50%;background:var(--ink-soft);border:1px solid #2B2F3A;display:flex;align-items:center;justify-content:center;font-family:'Space Grotesk',sans-serif;font-size:1.3rem;font-weight:600;flex-shrink:0;}
.profile-name{font-size:1.5rem;font-weight:600;font-family:'Space Grotesk',sans-serif;}
.profile-meta{font-size:0.86rem;color:#9AA1AE;margin-top:4px;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.profile-dot{width:3px;height:3px;border-radius:50%;background:#4A505E;display:inline-block;}
.profile-sync{margin-top:16px;position:relative;z-index:1;}
.profile-actions{display:flex;gap:10px;flex-shrink:0;position:relative;z-index:1;}
.profile-actions .btn-ghost{border-color:#3A3F4C;color:var(--paper);}
.profile-actions .btn-ghost:hover{background:var(--ink-soft);}

.vbadge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:20px;position:relative;z-index:1;}
.vbadge{display:flex;align-items:center;gap:6px;background:rgba(74,222,128,0.13);border:1px solid rgba(74,222,128,0.35);color:#8FE3AE;font-size:0.76rem;padding:5px 12px;border-radius:100px;}

.public-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px;}
@media(max-width:760px){.public-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:500px){.public-grid{grid-template-columns:1fr;}}
.public-piece{background:white;border:1px solid var(--line);border-radius:14px;overflow:hidden;transition:transform .15s ease, box-shadow .15s ease;}
.public-piece:hover{transform:translateY(-2px);box-shadow:0 12px 24px -14px rgba(20,23,31,0.25);}
.public-thumb{height:140px;background:linear-gradient(135deg,var(--paper-2),var(--paper));}
.public-thumb svg{width:100%;height:100%;display:block;}
.public-body{padding:14px 16px 16px;}
.piece-tag{font-family:'JetBrains Mono',monospace;font-size:0.68rem;color:var(--slate);text-transform:uppercase;letter-spacing:0.05em;}
.piece-title{font-size:0.92rem;font-weight:600;margin-top:5px;}
.piece-foot{display:flex;justify-content:space-between;align-items:center;margin-top:10px;}
.piece-date{font-size:0.76rem;color:var(--slate);}
.mini-verified{display:flex;align-items:center;gap:4px;font-size:0.72rem;color:var(--teal);font-weight:600;}

.tl{border-top:1px solid var(--line);}
.tl-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:flex-start;}
.tl-check{width:26px;height:26px;border-radius:50%;background:var(--teal-light);color:var(--teal);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:0.75rem;font-weight:700;margin-top:1px;}
.tl-main{flex:1;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.tl-title{font-size:0.92rem;font-weight:600;}
.tl-org{font-size:0.82rem;color:var(--slate);margin-top:2px;}
.tl-when{font-size:0.78rem;color:var(--slate);font-family:'JetBrains Mono',monospace;white-space:nowrap;padding-top:2px;}

.profile-tabs{display:flex;gap:24px;margin:0 0 32px;border-bottom:1px solid var(--line);}
.profile-tab{padding:12px 2px;font-size:0.88rem;color:var(--slate);font-weight:500;border-bottom:2px solid transparent;margin-bottom:-1px;}
.profile-tab:hover{color:var(--ink);}
.profile-tab.active{color:var(--ink);border-bottom-color:var(--marigold);}

/* Richer portfolio piece card: image hover reveal, description, view/like stats, view-project button */
.public-piece{display:flex;flex-direction:column;}
.public-thumb{position:relative;height:150px;}
.thumb-overlay{
  position:absolute;inset:0;
  background:linear-gradient(to top, rgba(20,23,31,0.82), rgba(20,23,31,0) 65%);
  display:flex;align-items:flex-end;padding:12px 14px;
  opacity:0;transition:opacity .25s ease;
}
.public-piece:hover .thumb-overlay{opacity:1;}
.thumb-overlay span{color:#F4F1E9;font-size:0.8rem;font-weight:600;}
.piece-desc{font-size:0.8rem;color:var(--slate);margin-top:6px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.piece-stats{display:flex;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--line);}
.piece-stat{display:flex;align-items:center;gap:4px;font-size:0.75rem;color:var(--slate);}
.piece-stat svg{width:13px;height:13px;stroke:var(--slate);}
.piece-view-btn{
  display:block;width:100%;text-align:center;margin-top:12px;
  padding:8px 0;border-radius:8px;font-size:0.82rem;font-weight:500;
  background:var(--ink);color:#F4F1E9;transition:background .15s ease;
}
.piece-view-btn:hover{background:var(--ink-soft);}

/* Stat card with icon, used on profile overview */
.icon-stat-card{background:var(--paper);padding:20px 22px;border:1px solid var(--line);border-radius:14px;
  display:flex;justify-content:space-between;align-items:flex-start;}
.icon-stat-card svg{width:34px;height:34px;stroke:var(--paper-2);color:var(--paper-2);}