/* =========================================================
   PERSISTENT LIGHT / DARK THEME
   Loaded after every section-specific stylesheet.
========================================================= */

:root,
html[data-theme="dark"] {
  color-scheme: dark;
}

html[data-theme="light"] {
  color-scheme: light;
}

/* =========================================================
   THEME SWITCHER
========================================================= */

#color-switcher .color-pallet,
#color-switcher .pallet-button {
  border: 1px solid rgba(255, 255, 255, .08);
  background: rgba(42, 43, 47, .96);
  box-shadow: 0 14px 36px rgba(0, 0, 0, .24);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

#color-switcher .theme-skin-title,
#color-switcher .color-scheme {
  background: transparent;
}

#color-switcher .theme-skin-title {
  color: #a2a3a7;
}

#color-switcher .color-scheme li a {
  color: #d7d8da;
  background: rgba(255, 255, 255, .045);
  font-size: 13px;
}

#color-switcher .pallet-button i {
  color: #d5d6d8;
}

/* =========================================================
   LIGHT THEME: GLOBAL SHELL
========================================================= */

html[data-theme="light"] body,
html[data-theme="light"] .ajax-page-content {
  background: #e9ebf0 !important;
  color: #24262b !important;
}

html[data-theme="light"] .left-side,
html[data-theme="light"] .right-side,
html[data-theme="light"] #main > section {
  background: #ffffff !important;
  color: #24262b !important;
  box-shadow: 0 18px 55px rgba(36, 39, 48, .07);
}

html[data-theme="light"] .menu li a,
html[data-theme="light"] .menu li a span,
html[data-theme="light"] .social a {
  color: #777b84 !important;
}

html[data-theme="light"] .menu li a:hover,
html[data-theme="light"] .menu li a.active,
html[data-theme="light"] .menu li a:hover span,
html[data-theme="light"] .menu li a.active span,
html[data-theme="light"] .menu li a:hover i,
html[data-theme="light"] .menu li a.active i,
html[data-theme="light"] #date b {
  color: #d99d09 !important;
}

html[data-theme="light"] .menu-toggle,
html[data-theme="light"] .next-prev-page button,
html[data-theme="light"] .mobile-blog-nav.blog-next-prev-page a {
  background: rgba(255, 255, 255, .94) !important;
  color: #bd8705 !important;
  border: 1px solid rgba(204, 146, 7, .3) !important;
  box-shadow: 0 9px 25px rgba(36, 39, 48, .1);
}

html[data-theme="light"] .menu-toggle span {
  background: #bd8705 !important;
}

html[data-theme="light"] .area .circles li,
html[data-theme="light"] .circles li {
  border-color: rgba(213, 157, 20, .18) !important;
  background: rgba(213, 157, 20, .025) !important;
  box-shadow: 0 0 18px rgba(213, 157, 20, .05);
}

html[data-theme="light"] .mCSB_scrollTools .mCSB_draggerRail {
  background: rgba(31, 34, 41, .16) !important;
}

html[data-theme="light"] .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {
  background: rgba(213, 157, 20, .82) !important;
}

/* =========================================================
   LIGHT THEME: HERO
========================================================= */

html[data-theme="light"] #hero .hero-main-title,
html[data-theme="light"] #hero .hero-title-line {
  color: #1f2228 !important;
}

html[data-theme="light"] #hero .hero-name,
html[data-theme="light"] #hero .hero-role-line,
html[data-theme="light"] #hero .hero-work-btn,
html[data-theme="light"] #hero .hero-work-arrow {
  color: #cc9307 !important;
}

html[data-theme="light"] #hero .hero-work-btn {
  border-color: #cc9307 !important;
  background: rgba(204, 147, 7, .035) !important;
}

html[data-theme="light"] #hero .hero-work-btn:hover {
  background: rgba(204, 147, 7, .1) !important;
  box-shadow: 0 12px 28px rgba(183, 128, 0, .13);
}

html[data-theme="light"] #hero .hero-image img {
  border-color: #fff;
  box-shadow: 0 15px 34px rgba(39, 42, 49, .15);
}

/* =========================================================
   LIGHT THEME: ABOUT
========================================================= */

html[data-theme="light"] #about.about-v2 {
  --about-bg: #ffffff;
  --about-card: #f5f6f8;
  --about-card-soft: #f0f2f5;
  --about-border: rgba(31, 35, 43, .09);
  --about-muted: #686d76;
  --about-text: #424750;
}

html[data-theme="light"] #about h1,
html[data-theme="light"] #about h2,
html[data-theme="light"] #about h3,
html[data-theme="light"] #about h4,
html[data-theme="light"] #about h5,
html[data-theme="light"] #about h6 {
  color: #22252b;
}

html[data-theme="light"] #about .about-v2-description,
html[data-theme="light"] #about .about-v2-lead,
html[data-theme="light"] #about .about-v2-section-heading p,
html[data-theme="light"] #about .about-v2-why-intro p,
html[data-theme="light"] #about .about-tool-category-label p,
html[data-theme="light"] #about .about-process-step p,
html[data-theme="light"] #about .about-v2-capability-card p,
html[data-theme="light"] #about .about-v2-final p {
  color: #626771 !important;
}

html[data-theme="light"] #about .about-v2-floating-card,
html[data-theme="light"] #about .about-v2-metric,
html[data-theme="light"] #about .about-tool-card,
html[data-theme="light"] #about .about-process-step,
html[data-theme="light"] #about .about-v2-capability-card,
html[data-theme="light"] #about .about-v2-why,
html[data-theme="light"] #about .about-v2-final {
  background: #f5f6f8 !important;
  border-color: rgba(31, 35, 43, .09) !important;
  box-shadow: 0 12px 28px rgba(39, 42, 49, .05);
}

html[data-theme="light"] #about .about-v2-image-overlay {
  background: linear-gradient(to top, rgba(25, 28, 33, .52), transparent 65%);
}

/* =========================================================
   LIGHT THEME: RESUME
========================================================= */

html[data-theme="light"] #resume.resume-v2 {
  --resume-card: #f5f6f8;
  --resume-card-soft: #f0f2f5;
  --resume-border: rgba(31, 35, 43, .09);
  --resume-muted: #686d76;
  --resume-text: #424750;
}

html[data-theme="light"] #resume h1,
html[data-theme="light"] #resume h2,
html[data-theme="light"] #resume h3,
html[data-theme="light"] #resume h4,
html[data-theme="light"] #resume h5,
html[data-theme="light"] #resume h6 {
  color: #22252b;
}

html[data-theme="light"] #resume .resume-v2-intro > p,
html[data-theme="light"] #resume .resume-section-heading > p,
html[data-theme="light"] #resume .resume-service-copy > p,
html[data-theme="light"] #resume .career-learning li,
html[data-theme="light"] #resume .experience-card p,
html[data-theme="light"] #resume .education-main p {
  color: #626771 !important;
}

html[data-theme="light"] #resume .resume-capability-tab,
html[data-theme="light"] #resume .resume-service-lab,
html[data-theme="light"] #resume .resume-final-cta,
html[data-theme="light"] #resume .experience-card,
html[data-theme="light"] #resume .education-card,
html[data-theme="light"] #resume .career-learning,
html[data-theme="light"] #resume .resume-interaction-guide {
  background: #f5f6f8 !important;
  border-color: rgba(31, 35, 43, .1) !important;
  color: #5e646e;
}

html[data-theme="light"] #resume .resume-capability-tab:hover,
html[data-theme="light"] #resume .resume-capability-tab:focus-visible,
html[data-theme="light"] #resume .resume-capability-tab.active {
  background: rgba(213, 157, 20, .095) !important;
  border-color: rgba(193, 137, 3, .45) !important;
  color: #b77f00;
  box-shadow: 0 12px 25px rgba(39, 42, 49, .08);
}

html[data-theme="light"] #resume .resume-browser,
html[data-theme="light"] #resume .resume-design-compare,
html[data-theme="light"] #resume .resume-seo-demo,
html[data-theme="light"] #resume .resume-data-demo,
html[data-theme="light"] #resume .resume-automation-demo,
html[data-theme="light"] #resume .resume-support-demo {
  border-color: rgba(31, 35, 43, .12) !important;
  box-shadow: 0 18px 38px rgba(39, 42, 49, .09);
}

/* =========================================================
   LIGHT THEME: PORTFOLIO
========================================================= */

html[data-theme="light"] #portfolio.portfolio-v2 {
  --portfolio-card: #f5f6f8;
  --portfolio-card-soft: #f0f2f5;
  --portfolio-dark: #e9ebef;
  --portfolio-border: rgba(31, 35, 43, .09);
  --portfolio-muted: #666b74;
}

html[data-theme="light"] #portfolio h1,
html[data-theme="light"] #portfolio h2,
html[data-theme="light"] #portfolio h3,
html[data-theme="light"] #portfolio h4,
html[data-theme="light"] #portfolio h5,
html[data-theme="light"] #portfolio h6 {
  color: #22252b;
}

html[data-theme="light"] #portfolio .portfolio-toolbar,
html[data-theme="light"] #portfolio .portfolio-v2-card,
html[data-theme="light"] #portfolio .portfolio-creative-collection,
html[data-theme="light"] #portfolio .portfolio-final-cta {
  background-color: #f5f6f8 !important;
  border-color: rgba(31, 35, 43, .09) !important;
  box-shadow: 0 13px 29px rgba(39, 42, 49, .045);
}

html[data-theme="light"] #portfolio .portfolio-v2-card:hover {
  border-color: rgba(193, 137, 3, .3) !important;
  box-shadow: 0 19px 39px rgba(39, 42, 49, .09);
}

html[data-theme="light"] #portfolio .portfolio-v2-intro > p,
html[data-theme="light"] #portfolio .portfolio-v2-card-content > p,
html[data-theme="light"] #portfolio .portfolio-creative-copy > p,
html[data-theme="light"] #portfolio .portfolio-final-cta p {
  color: #666b74 !important;
}

html[data-theme="light"] #portfolio .portfolio-project-tags span,
html[data-theme="light"] #portfolio .portfolio-v2-filter a,
html[data-theme="light"] #portfolio .portfolio-toolbar-label {
  color: #676c75;
}

html[data-theme="light"] #portfolio .portfolio-v2-filter a:hover,
html[data-theme="light"] #portfolio .portfolio-v2-filter a.active {
  color: #b77f00;
  background: rgba(213, 157, 20, .09);
  border-color: rgba(193, 137, 3, .34);
}

html[data-theme="light"] #portfolio .portfolio-demo-note {
  color: #565b64;
  background: rgba(213, 157, 20, .075);
  border-color: rgba(193, 137, 3, .28);
}

/* The browser/card previews intentionally remain dark for contrast. */

/* =========================================================
   LIGHT THEME: BLOG
========================================================= */

html[data-theme="light"] #blog.blog-v2 {
  --blog-card: #f5f6f8;
  --blog-card-soft: #f0f2f5;
  --blog-dark: #e9ebef;
  --blog-border: rgba(31, 35, 43, .09);
  --blog-muted: #686d76;
}

html[data-theme="light"] #blog h1,
html[data-theme="light"] #blog h2,
html[data-theme="light"] #blog h3,
html[data-theme="light"] #blog h4,
html[data-theme="light"] #blog h5,
html[data-theme="light"] #blog h6 {
  color: #22252b;
}

html[data-theme="light"] #blog .blog-v2-filter-wrap,
html[data-theme="light"] #blog .blog-featured-article,
html[data-theme="light"] #blog .blog-v2-card,
html[data-theme="light"] #blog .blog-thinking-section,
html[data-theme="light"] #blog .blog-interest-section,
html[data-theme="light"] #blog .blog-v2-final {
  background: #f5f6f8 !important;
  border-color: rgba(31, 35, 43, .09) !important;
  box-shadow: 0 13px 29px rgba(39, 42, 49, .045);
}

html[data-theme="light"] #blog .blog-v2-intro-side > p,
html[data-theme="light"] #blog .blog-featured-content > p,
html[data-theme="light"] #blog .blog-v2-card-content > p,
html[data-theme="light"] #blog .blog-thinking-intro p,
html[data-theme="light"] #blog .blog-v2-final p {
  color: #666b74 !important;
}

html[data-theme="light"] #blog .blog-filter-btn {
  color: #696e77;
}

html[data-theme="light"] #blog .blog-filter-btn:hover,
html[data-theme="light"] #blog .blog-filter-btn.active {
  color: #b77f00;
  background: rgba(213, 157, 20, .09);
  border-color: rgba(193, 137, 3, .34);
}

/* =========================================================
   LIGHT THEME: CONTACT
========================================================= */

html[data-theme="light"] #contact.contact-v2 {
  --contact-card: #f5f6f8;
  --contact-card-soft: #f0f2f5;
  --contact-border: rgba(31, 35, 43, .09);
  --contact-border-gold: rgba(193, 137, 3, .35);
  --contact-muted: #686d76;
  --contact-text: #424750;
}

html[data-theme="light"] #contact h1,
html[data-theme="light"] #contact h2,
html[data-theme="light"] #contact h3,
html[data-theme="light"] #contact h4,
html[data-theme="light"] #contact h5,
html[data-theme="light"] #contact h6,
html[data-theme="light"] #contact .info-text h5 {
  color: #22252b !important;
}

html[data-theme="light"] #contact .contact-v2-info-card,
html[data-theme="light"] #contact .contact-v2-form-card {
  background: #f5f6f8 !important;
  border-color: rgba(31, 35, 43, .09) !important;
  box-shadow: 0 13px 29px rgba(39, 42, 49, .045);
}

html[data-theme="light"] #contact .info-text small,
html[data-theme="light"] #contact .contact-v2-form-card p {
  color: #666b74 !important;
}

html[data-theme="light"] #contact .form-control,
html[data-theme="light"] #contact input,
html[data-theme="light"] #contact textarea {
  background: #ffffff !important;
  border-color: rgba(31, 35, 43, .14) !important;
  color: #272a30 !important;
}

html[data-theme="light"] #contact .form-control::placeholder,
html[data-theme="light"] #contact input::placeholder,
html[data-theme="light"] #contact textarea::placeholder {
  color: #8a8f98 !important;
}

/* =========================================================
   LIGHT THEME: CHATBOT
========================================================= */

html[data-theme="light"] .robot-head {
  background: #f7f8fa;
}

html[data-theme="light"] .robot-mouth {
  background: #656a73;
}

html[data-theme="light"] .chatbot-online-dot {
  border-color: #ffffff;
}

html[data-theme="light"] .chatbot-teaser,
html[data-theme="light"] .chatbot-panel {
  background: rgba(255, 255, 255, .98);
  color: #282b31;
  box-shadow: 0 22px 58px rgba(39, 42, 49, .18);
}

html[data-theme="light"] .chatbot-teaser::after {
  background: #ffffff;
}

html[data-theme="light"] .chatbot-header,
html[data-theme="light"] .chatbot-input-area {
  background: #f4f5f7;
  border-color: rgba(31, 35, 43, .09);
}

html[data-theme="light"] .chatbot-header-profile strong {
  color: #24272d;
}

html[data-theme="light"] .chatbot-header-profile span,
html[data-theme="light"] .chatbot-quick-actions > span {
  color: #747983;
}

html[data-theme="light"] .chat-message-bubble {
  background: #f0f2f5;
  color: #343840;
}

html[data-theme="light"] .user-message .chat-message-bubble {
  background: rgba(213, 157, 20, .12);
  color: #2d3036;
  border-color: rgba(193, 137, 3, .28);
}

html[data-theme="light"] .chat-message-avatar {
  background: rgba(213, 157, 20, .08);
}

html[data-theme="light"] .chatbot-input-area input {
  background: #ffffff !important;
  color: #282b31 !important;
  border-color: rgba(31, 35, 43, .13) !important;
}

html[data-theme="light"] .chatbot-input-area input::placeholder {
  color: #8a8f98;
}

/* =========================================================
   LIGHT THEME: PROJECT DRAWER
========================================================= */

html[data-theme="light"] .portfolio-project-drawer {
  background: #ffffff;
  color: #2a2d33;
  border-left-color: rgba(31, 35, 43, .11);
}

html[data-theme="light"] .portfolio-project-drawer h2 {
  color: #22252b;
}

html[data-theme="light"] .portfolio-drawer-summary,
html[data-theme="light"] .portfolio-drawer-list div {
  color: #646a74;
}

html[data-theme="light"] .portfolio-drawer-tags span {
  color: #4d525b;
  background: rgba(213, 157, 20, .075);
}

/* =========================================================
   LIGHT THEME: THEME CONTROL ITSELF
========================================================= */

html[data-theme="light"] #color-switcher .color-pallet,
html[data-theme="light"] #color-switcher .pallet-button {
  background: rgba(255, 255, 255, .97);
  border-color: rgba(31, 35, 43, .09);
  box-shadow: 0 14px 36px rgba(39, 42, 49, .13);
}

html[data-theme="light"] #color-switcher .theme-skin-title {
  color: #717680;
}

html[data-theme="light"] #color-switcher .color-scheme li a {
  background: #f0f2f5;
  color: #30343b;
}

html[data-theme="light"] #color-switcher .pallet-button i {
  color: #525761;
}

/* =========================================================
   TRANSITION AND REDUCED MOTION
========================================================= */

body,
.left-side,
.right-side,
#main > section,
.portfolio-v2-card,
.resume-capability-tab,
.contact-v2-info-card,
.contact-v2-form-card,
.blog-v2-card,
.chatbot-panel,
.chatbot-teaser {
  transition-property: background-color, color, border-color, box-shadow, opacity, transform;
  transition-duration: .25s;
  transition-timing-function: ease;
}

@media (prefers-reduced-motion: reduce) {
  body,
  .left-side,
  .right-side,
  #main > section,
  .portfolio-v2-card,
  .resume-capability-tab,
  .contact-v2-info-card,
  .contact-v2-form-card,
  .blog-v2-card,
  .chatbot-panel,
  .chatbot-teaser {
    transition-duration: .01ms !important;
  }
}


/* =========================================================
   2026 THEME CONTROL MOTION + AUTO-CLOSE STATES
========================================================= */
#color-switcher .color-pallet {
  transform-origin: top right;
  transition: opacity .28s ease, transform .32s cubic-bezier(.2,.8,.2,1), visibility .28s ease !important;
}

#color-switcher .color-pallet:not(.show) {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transform: translateY(-8px) scale(.94) !important;
}

#color-switcher .color-pallet.show {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
  animation: themePanelPop .38s cubic-bezier(.2,.8,.2,1) both;
}

#color-switcher .color-pallet.theme-panel-closing {
  animation: themePanelFade .3s ease both !important;
}

@keyframes themePanelPop { from{opacity:0;transform:translateY(-10px) scale(.9)} to{opacity:1;transform:none} }
@keyframes themePanelFade { from{opacity:1;transform:none} to{opacity:0;transform:translateY(-7px) scale(.94)} }

#color-switcher .cp-toggle {
  position:relative;
  overflow:hidden;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease !important;
}

#color-switcher .cp-toggle::after {
  content:"";
  position:absolute;
  inset:-45%;
  background:conic-gradient(from 90deg,transparent,rgba(235,176,32,.28),transparent 45%);
  animation:themeGearGlow 4s linear infinite;
}

#color-switcher .cp-toggle i { position:relative;z-index:1;transition:transform .45s cubic-bezier(.2,.8,.2,1); }
#color-switcher .cp-toggle:hover { transform:translateY(-2px);border-color:rgba(235,176,32,.55)!important;box-shadow:0 10px 24px rgba(0,0,0,.16); }
#color-switcher .cp-toggle:hover i { transform:rotate(90deg); }
@keyframes themeGearGlow{to{transform:rotate(360deg)}}

#color-switcher .color-scheme a {
  position:relative;
  overflow:hidden;
  transition:transform .24s ease, background .24s ease, color .24s ease, border-color .24s ease, opacity .24s ease !important;
}
#color-switcher .color-scheme a::before { content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent,rgba(255,255,255,.12),transparent);transform:translateX(-120%);transition:transform .45s ease; }
#color-switcher .color-scheme a:hover::before { transform:translateX(120%); }
#color-switcher .color-scheme a:hover { transform:translateY(-2px) scale(1.02); }
#color-switcher .color-scheme a.active { box-shadow:0 0 0 3px rgba(235,176,32,.08); }
#color-switcher .color-scheme a.active i { animation:themeChoicePulse 1.8s ease-in-out infinite; }
@keyframes themeChoicePulse{0%,100%{transform:scale(1)}50%{transform:scale(1.16)}}

html.theme-is-changing body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  background:rgba(235,176,32,.035);
  animation:themeWash .5s ease both;
}
@keyframes themeWash{0%{opacity:0}35%{opacity:1}100%{opacity:0}}

html[data-theme="light"] .mobile-menu-drawer-header strong,
html[data-theme="light"] .left-side h1 { color:#22242a!important; }
html[data-theme="light"] .left-side .menu .list-group-item a span { color:#575a62!important; }
html[data-theme="light"] .left-side .mobile-menu-drawer-header,
html[data-theme="light"] .left-side .menu-content-align,
html[data-theme="light"] .left-side .menu-footer { border-color:rgba(0,0,0,.08)!important; }

/* Light-theme support for the live resume dashboard */
html[data-theme="light"] #resume .resume-live-dashboard,
html[data-theme="light"] #resume .resume-dashboard-metric,
html[data-theme="light"] #resume .resume-dashboard-chart-card,
html[data-theme="light"] #resume .resume-dashboard-bars-card {
  background-color: #f5f6f8 !important;
  border-color: rgba(31, 35, 43, .1) !important;
  box-shadow: 0 12px 28px rgba(39, 42, 49, .045);
}

html[data-theme="light"] #resume .resume-dashboard-metric strong,
html[data-theme="light"] #resume .resume-chart-heading strong,
html[data-theme="light"] #resume .resume-dashboard-bar b {
  color: #2b2e34 !important;
}

html[data-theme="light"] #resume .resume-dashboard-topbar p,
html[data-theme="light"] #resume .resume-dashboard-metric small,
html[data-theme="light"] #resume .resume-chart-heading small {
  color: #676c75 !important;
}

html[data-theme="light"] #resume .resume-dashboard-view-switch {
  background: rgba(31, 35, 43, .035);
  border-color: rgba(31, 35, 43, .09);
}

html[data-theme="light"] #resume .resume-chart-grid-lines line {
  stroke: rgba(31, 35, 43, .08);
}


/* =========================================================
   2026 ANIMATED SUN / MOON SWITCH
========================================================= */

#color-switcher .color-pallet {
  min-width: 148px;
  padding: 13px 14px 14px;
}

#color-switcher .theme-skin-title {
  margin: 0 0 10px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
}

#color-switcher .theme-mode-control {
  display: flex;
  justify-content: center;
}

#color-switcher .theme-mode-switch {
  width: 116px;
  height: 50px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#color-switcher .theme-mode-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: inherit;
  background:
    radial-gradient(circle at 78% 24%, rgba(255,255,255,.13) 0 1px, transparent 2px),
    radial-gradient(circle at 67% 66%, rgba(255,255,255,.1) 0 1px, transparent 2px),
    linear-gradient(135deg, #15161a, #24262b);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 10px 24px rgba(0,0,0,.2);
  transition: background .45s ease, border-color .45s ease, box-shadow .45s ease;
}

#color-switcher .theme-mode-thumb {
  position: absolute;
  left: 5px;
  top: 5px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f8f8fa;
  color: #18191d;
  box-shadow: 0 7px 17px rgba(0,0,0,.28);
  transform: translateX(66px);
  transition:
    transform .52s cubic-bezier(.2,.9,.2,1.12),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
  z-index: 3;
}

#color-switcher .theme-mode-thumb i {
  position: absolute;
  font-size: 18px;
  transition: opacity .28s ease, transform .5s ease;
}

#color-switcher .theme-thumb-sun {
  opacity: 0;
  transform: rotate(-90deg) scale(.55);
}

#color-switcher .theme-thumb-moon {
  opacity: 1;
  transform: rotate(0) scale(1);
}

#color-switcher .theme-mode-ambient {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  font-size: 14px;
  opacity: .42;
  transition: opacity .35s ease, transform .45s ease;
}

#color-switcher .theme-mode-ambient-sun { left: 17px; color: #f3bb2d; }
#color-switcher .theme-mode-ambient-moon { right: 17px; color: #b8c9ff; }

#color-switcher .theme-mode-switch.is-light .theme-mode-track {
  border-color: rgba(218,164,29,.28);
  background:
    radial-gradient(circle at 74% 22%, rgba(255,255,255,.9) 0 2px, transparent 3px),
    linear-gradient(135deg, #dce9ff, #fff2bc);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 10px 25px rgba(176,130,15,.14);
}

#color-switcher .theme-mode-switch.is-light .theme-mode-thumb {
  transform: translateX(0);
  background: #fff;
  color: #d59500;
  box-shadow: 0 7px 18px rgba(158,113,0,.18);
}

#color-switcher .theme-mode-switch.is-light .theme-thumb-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
  animation: themeSunBreathe 2.8s ease-in-out infinite;
}

#color-switcher .theme-mode-switch.is-light .theme-thumb-moon {
  opacity: 0;
  transform: rotate(90deg) scale(.55);
}

#color-switcher .theme-mode-switch.is-dark .theme-mode-ambient-moon,
#color-switcher .theme-mode-switch.is-light .theme-mode-ambient-sun {
  opacity: .18;
}

#color-switcher .theme-mode-switch:hover .theme-mode-thumb {
  box-shadow: 0 9px 22px rgba(0,0,0,.34);
}

#color-switcher .theme-mode-switch:focus-visible {
  outline: 2px solid #ebb020 !important;
  outline-offset: 4px;
}

#color-switcher .color-pallet.theme-panel-closing {
  animation: themePanelClose .36s ease both;
}

@keyframes themeSunBreathe {
  0%,100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(18deg) scale(1.08); }
}

@keyframes themePanelClose {
  from { opacity: 1; transform: translateY(0) scale(1); }
  to { opacity: 0; transform: translateY(-8px) scale(.96); }
}

html[data-theme="light"] #color-switcher .color-pallet,
html[data-theme="light"] #color-switcher .pallet-button {
  border-color: rgba(31,35,43,.1);
  background: rgba(255,255,255,.96);
  box-shadow: 0 14px 36px rgba(42,45,53,.14);
}

@media (prefers-reduced-motion: reduce) {
  #color-switcher .theme-mode-switch *,
  #color-switcher .color-pallet.theme-panel-closing {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   LIGHT THEME SUPPORT - DATA-ONLY DASHBOARD
========================================================= */
html[data-theme="light"] #resume .resume-data-dashboard {
  background:
    radial-gradient(circle at 85% 0%, rgba(79,112,230,.1), transparent 30%),
    #f4f6f9 !important;
  border-color: rgba(59,154,196,.2) !important;
}

html[data-theme="light"] #resume .resume-data-dashboard-heading > div > strong,
html[data-theme="light"] #resume .data-dashboard-card-heading small,
html[data-theme="light"] #resume .data-dashboard-insight-copy > p,
html[data-theme="light"] #resume .scatter-legend,
html[data-theme="light"] #resume .data-dashboard-axis {
  color: #69717d !important;
}

html[data-theme="light"] #resume .resume-data-dashboard .data-demo-metrics article,
html[data-theme="light"] #resume .data-dashboard-card {
  border-color: rgba(31,35,43,.09) !important;
  background: rgba(255,255,255,.78) !important;
  box-shadow: 0 10px 26px rgba(39,42,49,.045);
}

html[data-theme="light"] #resume .resume-data-dashboard .data-demo-metrics strong,
html[data-theme="light"] #resume .data-dashboard-card-heading strong,
html[data-theme="light"] #resume .data-percentage-ring strong,
html[data-theme="light"] #resume .data-dashboard-insight-copy > strong {
  color: #262a31 !important;
}

html[data-theme="light"] #resume .data-scatter-plot {
  background:
    linear-gradient(rgba(31,35,43,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31,35,43,.055) 1px, transparent 1px),
    #f8fafc !important;
  background-size: 25% 25% !important;
}

html[data-theme="light"] #resume .data-dashboard-grid-lines line {
  stroke: rgba(31,35,43,.09) !important;
}

html[data-theme="light"] #resume .data-percentage-ring::before {
  background: #ffffff !important;
}

html[data-theme="light"] #resume .resume-data-dashboard .data-chart-bars {
  background:
    linear-gradient(rgba(31,35,43,.055) 1px, transparent 1px),
    #f8fafc !important;
  background-size: 100% 25% !important;
}


/* =========================================================
   DIRECT SUN / MOON THEME SWITCH
   Replaces the previous gear and popup entirely.
========================================================= */
#color-switcher.direct-theme-switcher {
  position: fixed;
  top: 25px;
  right: 25px;
  z-index: 1200;
  width: auto;
  height: auto;
}

#color-switcher.direct-theme-switcher .theme-mode-switch {
  width: 82px;
  height: 40px;
  display: block;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,.24));
}

#color-switcher.direct-theme-switcher .theme-mode-track {
  position: relative;
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: inherit;
  background:
    radial-gradient(circle at 70% 24%, rgba(255,255,255,.78) 0 1px, transparent 2px),
    radial-gradient(circle at 81% 60%, rgba(255,255,255,.56) 0 1px, transparent 2px),
    radial-gradient(circle at 58% 72%, rgba(255,255,255,.45) 0 1px, transparent 2px),
    linear-gradient(135deg, #101116, #242631);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
  transition: background .8s ease, border-color .8s ease, box-shadow .8s ease;
}

#color-switcher.direct-theme-switcher .theme-mode-thumb {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #d99b00;
  background: #fff9d9;
  box-shadow: 0 5px 13px rgba(0,0,0,.28);
  transform: translateX(42px) rotate(360deg);
  transition:
    transform .88s cubic-bezier(.6,-.18,.24,1.2),
    color .6s ease,
    background .6s ease,
    box-shadow .6s ease;
  z-index: 4;
}

#color-switcher.direct-theme-switcher .theme-mode-thumb i {
  position: absolute;
  font-size: 16px;
  transition: opacity .42s ease, transform .82s cubic-bezier(.2,.8,.2,1);
}

#color-switcher.direct-theme-switcher .theme-thumb-sun {
  opacity: 0;
  transform: rotate(-160deg) scale(.4);
}

#color-switcher.direct-theme-switcher .theme-thumb-moon {
  opacity: 1;
  color: #202534;
  transform: rotate(0) scale(1);
}

#color-switcher.direct-theme-switcher .theme-mode-stars {
  position: absolute;
  inset: 0;
  opacity: 1;
  transition: opacity .55s ease;
}

#color-switcher.direct-theme-switcher .theme-mode-cloud {
  position: absolute;
  left: 46px;
  bottom: 7px;
  width: 25px;
  height: 7px;
  border-radius: 10px;
  background: rgba(255,255,255,.68);
  opacity: 0;
  transform: translateX(12px);
  transition: opacity .55s ease, transform .75s ease;
}

#color-switcher.direct-theme-switcher .theme-mode-cloud::before,
#color-switcher.direct-theme-switcher .theme-mode-cloud::after {
  content: "";
  position: absolute;
  bottom: 0;
  border-radius: 50%;
  background: inherit;
}

#color-switcher.direct-theme-switcher .theme-mode-cloud::before {
  left: 4px;
  width: 10px;
  height: 10px;
}

#color-switcher.direct-theme-switcher .theme-mode-cloud::after {
  right: 3px;
  width: 13px;
  height: 13px;
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-mode-track {
  border-color: rgba(215,158,17,.28);
  background:
    radial-gradient(circle at 75% 20%, rgba(255,255,255,.96) 0 2px, transparent 3px),
    linear-gradient(135deg, #8fd0ff, #ffefad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.84);
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-mode-thumb {
  transform: translateX(0) rotate(0);
  color: #d28f00;
  background: #fff;
  box-shadow: 0 5px 14px rgba(149,101,0,.22);
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-thumb-sun {
  opacity: 1;
  transform: rotate(0) scale(1);
  animation: directThemeSunPulse 3s ease-in-out infinite;
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-thumb-moon {
  opacity: 0;
  transform: rotate(160deg) scale(.4);
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-mode-stars {
  opacity: 0;
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-mode-cloud {
  opacity: .72;
  transform: translateX(0);
}

#color-switcher.direct-theme-switcher .theme-mode-switch:hover .theme-mode-track {
  border-color: rgba(235,176,32,.54);
}

#color-switcher.direct-theme-switcher .theme-mode-switch:hover .theme-mode-thumb {
  box-shadow: 0 7px 18px rgba(0,0,0,.34);
}

#color-switcher.direct-theme-switcher .theme-mode-switch:focus-visible {
  outline: 2px solid #ebb020 !important;
  outline-offset: 4px;
}

#color-switcher.direct-theme-switcher .theme-mode-switch.is-rolling .theme-mode-thumb {
  animation: directThemeRollBounce .88s cubic-bezier(.2,.8,.2,1);
}

.theme-transition-curtain {
  position: fixed;
  inset: 0;
  z-index: 1190;
  pointer-events: none;
  will-change: clip-path, opacity;
}

.theme-transition-curtain.theme-transition-to-dark {
  background:
    radial-gradient(circle at var(--theme-origin-x) var(--theme-origin-y), rgba(235,176,32,.08), transparent 22%),
    #15161a;
}

.theme-transition-curtain.theme-transition-to-light {
  background:
    radial-gradient(circle at var(--theme-origin-x) var(--theme-origin-y), rgba(255,231,157,.48), transparent 24%),
    #eef1f6;
}

@keyframes directThemeSunPulse {
  0%,100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(18deg) scale(1.08); }
}

@keyframes directThemeRollBounce {
  0%,100% { margin-top: 0; }
  45% { margin-top: -3px; }
}

@media (max-width: 991px) {
  #color-switcher.direct-theme-switcher {
    top: 20px;
    right: 74px;
  }

  #color-switcher.direct-theme-switcher .theme-mode-switch {
    width: 72px;
    height: 36px;
  }

  #color-switcher.direct-theme-switcher .theme-mode-thumb {
    width: 28px;
    height: 28px;
    transform: translateX(36px) rotate(360deg);
  }

  #color-switcher.direct-theme-switcher .theme-mode-switch.is-light .theme-mode-thumb {
    transform: translateX(0) rotate(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  #color-switcher.direct-theme-switcher *,
  .theme-transition-curtain {
    animation: none !important;
    transition-duration: .01ms !important;
  }
}

html[data-theme="light"] .left-side .menu-profile-name { color:#22242a !important; }

/* =========================================================
   DAY MODE CONTRAST + RESPONSIVE COMPLETION
   Keeps the light palette readable after the newer shell and
   mobile hero styles that load later in the cascade.
========================================================= */

html[data-theme="light"] {
  --day-ink: #14161a;
  --day-muted: #505660;
  --day-gold: #9b6900;
  --day-gold-fill: #bd8500;
  --day-line: rgba(20, 22, 26, .14);
}

html[data-theme="light"] body,
html[data-theme="light"] #main > section {
  color: var(--day-ink) !important;
}

html[data-theme="light"] #about.about-v2 {
  --about-gold: var(--day-gold);
  --about-muted: var(--day-muted);
  --about-text: #30343b;
}

html[data-theme="light"] #resume.resume-v2 {
  --resume-gold: var(--day-gold);
  --resume-muted: var(--day-muted);
  --resume-text: #30343b;
}

html[data-theme="light"] #portfolio.portfolio-v2 {
  --portfolio-gold: var(--day-gold);
  --portfolio-muted: var(--day-muted);
}

html[data-theme="light"] #blog.blog-v2 {
  --blog-gold: var(--day-gold);
  --blog-muted: var(--day-muted);
}

html[data-theme="light"] #contact.contact-v2 {
  --contact-gold: var(--day-gold);
  --contact-muted: var(--day-muted);
  --contact-text: #30343b;
}

html[data-theme="light"] .base-color,
html[data-theme="light"] .subtitle,
html[data-theme="light"] .heading-meta-container .description,
html[data-theme="light"] #date b,
html[data-theme="light"] .menu li a:hover,
html[data-theme="light"] .menu li a.active,
html[data-theme="light"] .menu li a:hover span,
html[data-theme="light"] .menu li a.active span,
html[data-theme="light"] .menu li a:hover i,
html[data-theme="light"] .menu li a.active i {
  color: var(--day-gold) !important;
}

html[data-theme="light"] .menu li a,
html[data-theme="light"] .menu li a span,
html[data-theme="light"] .social a,
html[data-theme="light"] .right-side .social-box .social a {
  color: #4c5159 !important;
}

html[data-theme="light"] .primary-button,
html[data-theme="light"] .left-side a.download-cv {
  color: #111317 !important;
  background: var(--day-gold-fill) !important;
  border-color: var(--day-gold-fill) !important;
}

html[data-theme="light"] #about h1,
html[data-theme="light"] #about h2,
html[data-theme="light"] #about h3,
html[data-theme="light"] #about h4,
html[data-theme="light"] #about h5,
html[data-theme="light"] #about h6,
html[data-theme="light"] #resume h1,
html[data-theme="light"] #resume h2,
html[data-theme="light"] #resume h3,
html[data-theme="light"] #resume h4,
html[data-theme="light"] #resume h5,
html[data-theme="light"] #resume h6,
html[data-theme="light"] #portfolio h1,
html[data-theme="light"] #portfolio h2,
html[data-theme="light"] #portfolio h3,
html[data-theme="light"] #portfolio h4,
html[data-theme="light"] #portfolio h5,
html[data-theme="light"] #portfolio h6,
html[data-theme="light"] #blog h1,
html[data-theme="light"] #blog h2,
html[data-theme="light"] #blog h3,
html[data-theme="light"] #blog h4,
html[data-theme="light"] #blog h5,
html[data-theme="light"] #blog h6,
html[data-theme="light"] #contact h1,
html[data-theme="light"] #contact h2,
html[data-theme="light"] #contact h3,
html[data-theme="light"] #contact h4,
html[data-theme="light"] #contact h5,
html[data-theme="light"] #contact h6 {
  color: var(--day-ink) !important;
}

@media (max-width: 991px) {
  html[data-theme="light"] #main > section#hero {
    background:
      radial-gradient(circle at 12% 18%, rgba(187, 133, 0, .16), transparent 27%),
      radial-gradient(circle at 92% 78%, rgba(187, 133, 0, .08), transparent 30%),
      linear-gradient(145deg, #fffdf7 0%, #f8f6ef 64%, #eef1f4 100%) !important;
  }

  html[data-theme="light"] #hero::after {
    background: radial-gradient(circle, rgba(187, 133, 0, .12), rgba(187, 133, 0, .035) 43%, transparent 71%);
  }

  html[data-theme="light"] #hero .hero-main-title,
  html[data-theme="light"] #hero .hero-title-line,
  html[data-theme="light"] #hero .hero-mobile-capabilities strong {
    color: var(--day-ink) !important;
  }

  html[data-theme="light"] #hero .hero-name,
  html[data-theme="light"] #hero .hero-role-line,
  html[data-theme="light"] #hero .hero-mobile-capabilities span {
    color: var(--day-gold) !important;
  }

  html[data-theme="light"] #hero .hero-mobile-capabilities {
    background: rgba(255, 255, 255, .86) !important;
    border-color: var(--day-line) !important;
    box-shadow: 0 18px 42px rgba(24, 27, 33, .09) !important;
  }

  html[data-theme="light"] #hero .hero-mobile-capabilities div + div {
    border-left-color: var(--day-line) !important;
  }

  html[data-theme="light"] #hero .hero-footer .social a {
    color: #4c5159 !important;
  }

  html[data-theme="light"] .left-side {
    border-color: rgba(20, 22, 26, .11) !important;
    box-shadow: -22px 0 55px rgba(23, 26, 32, .16) !important;
  }

  html[data-theme="light"] .menu-overlay {
    background: rgba(224, 228, 234, .84) !important;
  }

  html[data-theme="light"] .mobile-menu-drawer-header {
    background: rgba(255, 255, 255, .98) !important;
    border-bottom-color: rgba(20, 22, 26, .1) !important;
  }

  html[data-theme="light"] .mobile-menu-drawer-header strong,
  html[data-theme="light"] .mobile-theme-setting-copy strong {
    color: var(--day-ink) !important;
  }

  html[data-theme="light"] .left-side .menu-content-align,
  html[data-theme="light"] .mobile-theme-setting,
  html[data-theme="light"] .left-side .menu-footer {
    background: #f7f6f2 !important;
    border-color: rgba(20, 22, 26, .1) !important;
  }

  html[data-theme="light"] .left-side .menu .list-group-item a {
    color: #363b43 !important;
    background: rgba(20, 22, 26, .018) !important;
    border-color: rgba(20, 22, 26, .07) !important;
  }

  html[data-theme="light"] .left-side .menu .list-group-item a::after {
    color: rgba(20, 22, 26, .38) !important;
  }

  html[data-theme="light"] .left-side .menu .list-group-item a i,
  html[data-theme="light"] .left-side .menu .list-group-item a.active span,
  html[data-theme="light"] .left-side .menu .list-group-item a.active i,
  html[data-theme="light"] .mobile-menu-drawer-header span,
  html[data-theme="light"] .mobile-theme-setting-copy > i {
    color: var(--day-gold) !important;
  }

  html[data-theme="light"] .left-side .menu .list-group-item a.active,
  html[data-theme="light"] .left-side .menu .list-group-item a:hover {
    background: rgba(187, 133, 0, .09) !important;
    border-color: rgba(155, 105, 0, .34) !important;
  }

  html[data-theme="light"] .left-side .menu-footer .social a {
    color: #363b43 !important;
    background: #fff !important;
    border-color: rgba(20, 22, 26, .1) !important;
  }
}