:root{
  --bg:#0b0d10;        /* page background */
  --card:#12151a;      /* card background */
  --text:#e6edf3;      /* primary text */
  --muted:#9aa4b2;     /* secondary text */
  --brand:#7aa2ff;     /* accent */
  --brand-2:#67e8f9;   /* accent 2 */
  --border:rgba(255,255,255,.10); /* unified border color */
  --nav:rgba(12,14,18,.65);       /* navbar bg */
  --ring:0 0 0 .25rem rgba(122,162,255,.35);
}
[data-theme="light"]{
  --bg:#f7f7fb; --card:#ffffff; --text:#0b1220; --muted:#5b6878; --brand:#3b82f6; --brand-2:#06b6d4; --border:rgba(0,0,0,.08); --nav:rgba(255,255,255,.78); --ring:0 0 0 .25rem rgba(59,130,246,.25);
}

html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--text);}    

/* Typography & Links use theme colors */
h1,h2,h3,h4,h5,h6,p,li,ol,ul,small,em,strong{color:var(--text)}
.subtle{color:var(--muted)!important}
a:not(.btn){color:var(--text); text-decoration:none}
a:not(.btn):hover{color:color-mix(in oklab, var(--text) 85%, var(--brand)); text-decoration:underline}
.link-light{color:var(--text)!important}

/* Nav */
.navbar .nav-link{color:var(--muted)!important}
.navbar .nav-link:hover{color:var(--brand)!important}
.navbar .nav-link.active{color:var(--brand)!important; font-weight:600}
.navbar{backdrop-filter:saturate(180%) blur(12px); background:var(--nav)!important; border-bottom:1px solid var(--border)}

/* Buttons */
.btn-brand{--bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg:#5f86ff; --bs-btn-hover-border-color:#5f86ff; --bs-btn-color:#fff; box-shadow:0 10px 30px -12px rgba(122,162,255,.6)}
.btn-ghost{color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:color-mix(in oklab, var(--text) 6%, transparent)}

/* Forms */
.form-control, .form-select{background:color-mix(in oklab, var(--card) 96%, black); color:var(--text); border-color:var(--border)}
.form-control:focus, .form-select:focus{background:color-mix(in oklab, var(--card) 96%, black); color:var(--text); border-color:var(--brand); box-shadow:var(--ring)}

/* Hero */
.hero{position:relative; padding:8rem 0 5rem; overflow:hidden}
.glow{position:absolute; inset:-10% -20% auto; height:70vh; background:radial-gradient(600px 300px at 20% 30%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 55%), radial-gradient(400px 250px at 80% 20%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 60%); filter: blur(30px); pointer-events:none}
.hero h1{font-weight:800; letter-spacing:-.02em}

/* Cards */
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; color:var(--text)}
.card-title{font-weight:700}
.chip{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:.85rem}
.hover-card{position:relative; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; will-change: transform}
.hover-card:hover{transform: translateY(-6px); box-shadow: 0 24px 60px -24px rgba(0,0,0,.45); border-color: color-mix(in oklab, var(--brand) 55%, var(--border))}

.section-title{font-size:1.75rem; font-weight:800; letter-spacing:-.02em}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1; transform:none}

/* Timeline */
.timeline{position:relative; margin-left:0}
.timeline:before{content:""; position:absolute; left:22px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand), transparent)}
.t-dot{width:10px; height:10px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 6px color-mix(in oklab, var(--brand) 25%, transparent)}

/* Tags */
.tags .chip{margin:.25rem .25rem 0 0}

/* Components themed */
.modal-content{background:var(--card); color:var(--text); border:1px solid var(--border)}
#liveToast.toast, .toast{background:var(--card)!important; color:var(--text)!important; border:1px solid var(--border)!important}
.text-bg-dark{background:var(--card)!important; color:var(--text)!important}

/* Footer */
footer{border-top:1px solid var(--border)}

/* Scrollbar (WebKit) */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--text) 12%, transparent); border-radius:999px}

/* PDF iframe height on mobile */
@media (max-width: 768px){
  .hero{padding:6rem 0 3rem}
}

/* Experience expand/collapse */
.experience-item .experience-details {
  transition: opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}
.experience-toggle {
  color: var(--muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.experience-item:hover .experience-toggle {
  color: var(--brand);
}

/* profile images */
.profile-photo {
  width: 100%;
  max-width: 360px;
  height: 360px;
  object-fit: cover;
  border-radius: 1rem;
  border: 6px solid color-mix(in oklab, var(--card) 70%, transparent);
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  display: block;
  margin: 0 auto;
}
.profile-photo-sm {
  width: 84px;
  height: 84px;
  object-fit: cover;
  border-radius: 999px;
  border: 2px solid var(--border);
  display: inline-block;
}
@media (max-width: 767px) {
  .profile-photo { max-width: 240px; height: 240px; }
  .profile-photo-sm { width: 64px; height: 64px; }
}
:root{
  --bg:#0b0d10;        /* page background */
  --card:#12151a;      /* card background */
  --text:#e6edf3;      /* primary text */
  --muted:#9aa4b2;     /* secondary text */
  --brand:#7aa2ff;     /* accent */
  --brand-2:#67e8f9;   /* accent 2 */
  --border:rgba(255,255,255,.10); /* unified border color */
  --nav:rgba(12,14,18,.65);       /* navbar bg */
  --ring:0 0 0 .25rem rgba(122,162,255,.35);
}
[data-theme="light"]{
  --bg:#f7f7fb; --card:#ffffff; --text:#0b1220; --muted:#5b6878; --brand:#3b82f6; --brand-2:#06b6d4; --border:rgba(0,0,0,.08); --nav:rgba(255,255,255,.78); --ring:0 0 0 .25rem rgba(59,130,246,.25);
}

html,body{height:100%}
body{font-family:Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji", "Segoe UI Emoji"; background:var(--bg); color:var(--text);}    

/* Typography & Links use theme colors */
h1,h2,h3,h4,h5,h6,p,li,ol,ul,small,em,strong{color:var(--text)}
.subtle{color:var(--muted)!important}
a:not(.btn){color:var(--text); text-decoration:none}
a:not(.btn):hover{color:color-mix(in oklab, var(--text) 85%, var(--brand)); text-decoration:underline}
.link-light{color:var(--text)!important}

/* Nav */
.navbar .nav-link{color:var(--muted)!important}
.navbar .nav-link:hover{color:var(--brand)!important}
.navbar .nav-link.active{color:var(--brand)!important; font-weight:600}
.navbar{backdrop-filter:saturate(180%) blur(12px); background:var(--nav)!important; border-bottom:1px solid var(--border)}

/* Buttons */
.btn-brand{--bs-btn-bg: var(--brand); --bs-btn-border-color: var(--brand); --bs-btn-hover-bg:#5f86ff; --bs-btn-hover-border-color:#5f86ff; --bs-btn-color:#fff; box-shadow:0 10px 30px -12px rgba(122,162,255,.6)}
.btn-ghost{color:var(--text); border-color:var(--border)}
.btn-ghost:hover{background:color-mix(in oklab, var(--text) 6%, transparent)}

/* Forms */
.form-control, .form-select{background:color-mix(in oklab, var(--card) 96%, black); color:var(--text); border-color:var(--border)}
.form-control:focus, .form-select:focus{background:color-mix(in oklab, var(--card) 96%, black); color:var(--text); border-color:var(--brand); box-shadow:var(--ring)}

/* Hero */
.hero{position:relative; padding:8rem 0 5rem; overflow:hidden}
.glow{position:absolute; inset:-10% -20% auto; height:70vh; background:radial-gradient(600px 300px at 20% 30%, color-mix(in oklab, var(--brand) 20%, transparent), transparent 55%), radial-gradient(400px 250px at 80% 20%, color-mix(in oklab, var(--brand-2) 18%, transparent), transparent 60%); filter: blur(30px); pointer-events:none}
.hero h1{font-weight:800; letter-spacing:-.02em}

/* Cards */
.card{background:var(--card); border:1px solid var(--border); border-radius:1rem; color:var(--text)}
.card-title{font-weight:700}
.chip{display:inline-flex; align-items:center; gap:.35rem; padding:.35rem .6rem; border-radius:999px; border:1px solid var(--border); color:var(--muted); font-size:.85rem}
.hover-card{position:relative; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease; will-change: transform}
.hover-card:hover{transform: translateY(-6px); box-shadow: 0 24px 60px -24px rgba(0,0,0,.45); border-color: color-mix(in oklab, var(--brand) 55%, var(--border))}

.section-title{font-size:1.75rem; font-weight:800; letter-spacing:-.02em}

/* Reveal on scroll */
.reveal{opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease}
.reveal.show{opacity:1; transform:none}

/* Timeline */
.timeline{position:relative; margin-left:0}
.timeline:before{content:""; position:absolute; left:22px; top:0; bottom:0; width:2px; background:linear-gradient(var(--brand), transparent)}
.t-dot{width:10px; height:10px; border-radius:999px; background:var(--brand); box-shadow:0 0 0 6px color-mix(in oklab, var(--brand) 25%, transparent)}

/* Tags */
.tags .chip{margin:.25rem .25rem 0 0}

/* Components themed */
.modal-content{background:var(--card); color:var(--text); border:1px solid var(--border)}
#liveToast.toast, .toast{background:var(--card)!important; color:var(--text)!important; border:1px solid var(--border)!important}
.text-bg-dark{background:var(--card)!important; color:var(--text)!important}

/* Footer */
footer{border-top:1px solid var(--border)}

/* Scrollbar (WebKit) */
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-thumb{background:color-mix(in oklab, var(--text) 12%, transparent); border-radius:999px}

/* PDF iframe height on mobile */
@media (max-width: 768px){
  .hero{padding:6rem 0 3rem}
}

/* Experience expand/collapse */
.experience-item .experience-details {
  transition: opacity 0.3s ease, max-height 0.3s ease;
  overflow: hidden;
}
.experience-toggle {
  color: var(--muted);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.experience-item:hover .experience-toggle {
  color: var(--brand);
}