/* ╔══════════════════════════════════════════════════════════════╗
   ║  PORTFOLIO THEME SYSTEM  –  themes/theme-transition.css     ║
   ║  Modes: dark (default) | light | system (auto)              ║
   ║                                                              ║
   ║  HOW TO ADD NEW CONTENT (no theme work needed):              ║
   ║  Use the shared variables in your CSS and both modes adapt   ║
   ║  automatically:                                              ║
   ║    var(--bg) var(--bg2) var(--card) var(--text) var(--muted) ║
   ║    var(--line) var(--main) var(--main2) var(--gold)          ║
   ║  For dialogs/popovers:  var(--dlg-bg) var(--dlg-text)        ║
   ║    var(--dlg-muted) var(--dlg-body) var(--dlg-border)        ║
   ║    var(--dlg-soft) var(--dlg-soft2) var(--dlg-line)          ║
   ║  For image wells: var(--img-bg) · nav: var(--nav-bg)         ║
   ║  Dark defaults live in style.css :root; the light values     ║
   ║  for those same variables live in §9 of this file.           ║
   ║                                                              ║
   ║  SECTION INDEX                                               ║
   ║  §1   Anchor variables (toggle position)                     ║
   ║  §2   Smooth-transition class (html.theme-switching)         ║
   ║  §3   Overlay element                                        ║
   ║  §4   DARK → LIGHT animation  (mint sunrise bloom,  2 s)     ║
   ║  §5   LIGHT → DARK animation  (deep-night ripple,   2 s)     ║
   ║  §6   Mode toggle – desktop pill (sliding indicator)         ║
   ║  §7   Mode toggle – mobile single-icon cycling button        ║
   ║  §8   Header layout (toggle pinned to the top-right corner)  ║
   ║  §9   LIGHT MODE – palette + semantic variable overrides     ║
   ║  §10  LIGHT MODE – body & backgrounds                        ║
   ║  §11  LIGHT MODE – navigation                                ║
   ║  §12  LIGHT MODE – hero                                      ║
   ║  §13  LIGHT MODE – buttons                                   ║
   ║  §14  LIGHT MODE – cards & tiles (mint, never glaring white) ║
   ║  §15  LIGHT MODE – chip panel & marquee                      ║
   ║  §16  LIGHT MODE – CTA / contact                             ║
   ║  §17  LIGHT MODE – timeline & skills                         ║
   ║  §18  LIGHT MODE – footer                                    ║
   ║  §19  LIGHT MODE – history dialog & confirmation extras      ║
   ║  §20  LIGHT MODE – gallery, lightbox, pager                  ║
   ║  §21  LIGHT MODE – publications                              ║
   ║  §22  LIGHT MODE – academics & awards                        ║
   ║  §23  LIGHT MODE – profile card                              ║
   ║  §24  LIGHT MODE – miscellaneous                             ║
   ║  §25  PHOTO FRAMES – animated gradient border (both modes)   ║
   ╚══════════════════════════════════════════════════════════════╝ */

/* ── §1  Anchor variables (set by JS from the toggle position) ── */
:root {
  --toggle-x: 95%;
  --toggle-y: 35px;
}

/* ── §2  Smooth transition class (applied by JS while swapping) ─ */
html.theme-switching body,
html.theme-switching .nav,
html.theme-switching .card,
html.theme-switching .tile,
html.theme-switching .tile-img,
html.theme-switching .footer,
html.theme-switching .cta,
html.theme-switching .chip-panel,
html.theme-switching form input,
html.theme-switching form textarea,
html.theme-switching .info-link,
html.theme-switching .award-summary,
html.theme-switching .marquee-track span,
html.theme-switching .timeline,
html.theme-switching .pager a,
html.theme-switching .to-top,
html.theme-switching .history-dialog,
html.theme-switching .history-confirmation,
html.theme-switching .story-controls,
html.theme-switching .story-visual,
html.theme-switching .story-deeper,
html.theme-switching .story-stage-strip button,
html.theme-switching .story-chapters button {
  transition:
    background-color .6s ease,
    background       .6s ease,
    color            .5s ease,
    border-color     .5s ease,
    box-shadow       .5s ease !important;
}

/* ── §3  Overlay element (created by JS) ──────────────────────── */
#theme-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
  display: none;
  will-change: clip-path, opacity;
}

/* ── §4  DARK → LIGHT : mint sunrise bloom (2 s) ─────────────── */
/*  0–30%   clip-path expands from the toggle button
    30–68%  full coverage; the theme swaps underneath
    68–100% opacity fades – smooth reveal of the new theme      */
#theme-overlay.animate-bloom {
  animation: theme-bloom 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  background: radial-gradient(
    circle at var(--toggle-x) var(--toggle-y),
    #a8e6c4 0%, #c8f0da 25%, #e2f8ee 55%, #f0faf5 80%
  );
}
@keyframes theme-bloom {
  0%   { clip-path: circle(0%   at var(--toggle-x) var(--toggle-y)); opacity: 1; }
  30%  { clip-path: circle(160% at var(--toggle-x) var(--toggle-y)); opacity: 1; }
  68%  { clip-path: circle(160% at var(--toggle-x) var(--toggle-y)); opacity: 1; }
  100% { clip-path: circle(160% at var(--toggle-x) var(--toggle-y)); opacity: 0; }
}
/* Sparkle layer */
#theme-overlay.animate-bloom::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(60,210,120,.65)  2px,   transparent 2px),
    radial-gradient(circle, rgba(30,190,100,.50)  1.5px, transparent 1.5px),
    radial-gradient(circle, rgba(100,230,150,.55) 1px,   transparent 1px),
    radial-gradient(circle, rgba(180,255,210,.75) 2px,   transparent 2px);
  background-size: 130px 130px, 85px 85px, 190px 190px, 55px 55px;
  background-position: 28px 44px, 62px 20px, 108px 75px, 12px 96px;
  animation: gleam-in 2s ease forwards;
  pointer-events: none;
}
@keyframes gleam-in {
  0%, 10%  { opacity: 0; }
  28%, 62% { opacity: .75; }
  100%     { opacity: 0; }
}
/* Sunray conic sweep */
#theme-overlay.animate-bloom::after {
  content: '';
  position: absolute; inset: 0;
  background: conic-gradient(
    from 270deg at var(--toggle-x) var(--toggle-y),
    transparent 0deg,
    rgba(242,220,130,.22) 18deg,
    transparent 45deg,
    rgba(190,255,205,.14) 85deg,
    transparent 125deg
  );
  animation: ray-spin 2s ease forwards;
  pointer-events: none;
}
@keyframes ray-spin {
  0%   { opacity: 0; transform: rotate(0deg); }
  22%  { opacity: 1; }
  68%  { opacity: .4; transform: rotate(14deg); }
  100% { opacity: 0; transform: rotate(18deg); }
}

/* ── §5  LIGHT → DARK : deep-night ripple (2 s) ──────────────── */
#theme-overlay.animate-nightfall {
  animation: theme-nightfall 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  background: radial-gradient(
    circle at var(--toggle-x) var(--toggle-y),
    #100820 0%, #0c0918 28%, #09070f 56%, #07060d 80%
  );
}
@keyframes theme-nightfall {
  0%   { clip-path: circle(0%   at var(--toggle-x) var(--toggle-y)); opacity: 1; }
  30%  { clip-path: circle(160% at var(--toggle-x) var(--toggle-y)); opacity: 1; }
  68%  { clip-path: circle(160% at var(--toggle-x) var(--toggle-y)); opacity: 1; }
  100% { clip-path: circle(160% at var(--toggle-x) var(--toggle-y)); opacity: 0; }
}
/* Star-field layer */
#theme-overlay.animate-nightfall::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.95) 1px,    transparent 1px),
    radial-gradient(circle, rgba(255,255,255,.78) 1px,    transparent 1px),
    radial-gradient(circle, rgba(192,132,252,.88) 1.5px,  transparent 1.5px),
    radial-gradient(circle, rgba(255,255,255,.65) 1px,    transparent 1px),
    radial-gradient(circle, rgba(140,180,255,.72) 1px,    transparent 1px);
  background-size: 160px 160px, 105px 105px, 220px 220px, 75px 75px, 145px 145px;
  background-position: 16px 26px, 54px 66px, 90px 16px, 40px 86px, 125px 50px;
  animation: stars-in 2s ease forwards;
  pointer-events: none;
}
@keyframes stars-in {
  0%, 14%  { opacity: 0; }
  30%, 65% { opacity: .85; }
  100%     { opacity: 0; }
}
/* Nebula glow layer */
#theme-overlay.animate-nightfall::after {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(
    ellipse 60% 40% at var(--toggle-x) var(--toggle-y),
    rgba(110,50,190,.28), transparent 70%
  );
  animation: nebula-glow 2s ease forwards;
  pointer-events: none;
}
@keyframes nebula-glow {
  0%   { opacity: 0; }
  24%  { opacity: 1; }
  68%  { opacity: .55; }
  100% { opacity: 0; }
}

/* ── §6  MODE TOGGLE – desktop glass pill + sliding indicator ── */
.mode-toggle-desktop {
  position: relative;
  margin-left: auto;      /* pushes the pill to the right end of the bar */
  flex-shrink: 0;
}
.mode-toggle-track {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow:
    0 4px 30px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.11),
    inset 0 -1px 0 rgba(0,0,0,.16);
}
.mode-btn {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: none;
  background: transparent;
  color: rgba(255,255,255,.38);
  cursor: pointer;
  padding: 0;
  transition: color .25s, transform .25s cubic-bezier(.34,1.56,.64,1);
  -webkit-tap-highlight-color: transparent;
}@media (hover:hover) and (pointer:fine){
.mode-btn:hover { color: rgba(255,255,255,.85); transform: scale(1.15); }}
.mode-btn[aria-pressed="true"] { color: #fff; }
.mode-btn[aria-pressed="true"] .mode-icon {
  filter: drop-shadow(0 0 5px rgba(255,255,255,.55));
  animation: icon-pop .35s cubic-bezier(.34,1.56,.64,1);
}
@keyframes icon-pop {
  0%   { transform: scale(.6) rotate(-10deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.mode-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mode-icon {
  width: 16px; height: 16px;
  display: block;
  pointer-events: none;
  flex-shrink: 0;
  transition: filter .25s;
}
.mode-indicator {
  position: absolute;
  top: 5px; left: 5px;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--main, #8b7bff), var(--main2, #7c6cf0) 60%, rgba(139,123,255,.7));
  box-shadow:
    0 3px 16px rgba(139,123,255,.58),
    0 1px 4px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.24);
  transition: transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease;
  z-index: 1;
  pointer-events: none;
}
.mode-indicator[data-pos="0"] { transform: translateX(0); }
.mode-indicator[data-pos="1"] { transform: translateX(34px); }
.mode-indicator[data-pos="2"] { transform: translateX(68px); }
html[data-theme="light"] .mode-toggle-track {
  background: rgba(0,70,40,.08);
  border-color: rgba(0,90,55,.18);
  box-shadow:
    0 4px 24px rgba(0,55,35,.15),
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(0,55,35,.09);
}
html[data-theme="light"] .mode-btn { color: rgba(10,45,28,.45); }@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .mode-btn:hover { color: var(--text); }}
html[data-theme="light"] .mode-btn[aria-pressed="true"] { color: #fff; }
html[data-theme="light"] .mode-indicator {
  background: linear-gradient(135deg, #5a4fcf, #7c6cf0);
  box-shadow:
    0 3px 16px rgba(90,79,207,.48),
    0 1px 4px rgba(0,0,0,.10),
    inset 0 1px 0 rgba(255,255,255,.32);
}

/* ── §7  MODE TOGGLE – mobile single-icon cycling button ─────── */
/* Different style from the desktop pill, made for small screens:
   one compact button that shows only the active mode's icon and
   cycles dark → system → light on every tap.                    */
.mode-toggle-mobile {
  display: none;          /* shown by the ≤1000 px media query in §8 */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  cursor: pointer;
  color: var(--text);
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
  transition: background .3s, border-color .3s, transform .22s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.mode-toggle-mobile svg {
  width: 20px; height: 20px;
  display: block;
  pointer-events: none;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .28s;
}@media (hover:hover) and (pointer:fine){
.mode-toggle-mobile:hover {
  background: rgba(139,123,255,.20);
  border-color: rgba(139,123,255,.52);
  transform: scale(1.08);
}}
.mode-toggle-mobile:active { transform: scale(.91); }
.mode-toggle-mobile:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
html[data-theme="light"] .mode-toggle-mobile {
  background: rgba(90,79,207,.10);
  border-color: rgba(90,79,207,.28);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .mode-toggle-mobile:hover {
  background: rgba(90,79,207,.20);
  border-color: rgba(90,79,207,.45);
}}

/* ── §8  HEADER LAYOUT – toggle pinned to the top-right corner ─ */
/*
   Desktop: the pill sits at the very corner of the screen, exactly
   opposite the hamburger on mobile. The shift only moves the pill
   visually (position:relative) so the logo and menu stay exactly
   where they were. The calc mirrors the .wrap width rule
   (width:min(1120px,92%)) minus a 16 px corner margin.
*/
.mode-toggle-desktop {
  right: calc(16px - (100vw - min(1120px, 92vw)) / 2);
  z-index: 5;
}
@media (max-width: 1000px) {
  .mode-toggle-desktop { display: none; }
  .mode-toggle-mobile  { display: flex; }
}
@media (min-width: 1001px) {
  .mode-toggle-mobile { display: none; }
}

/* ── §9  LIGHT MODE – palette + semantic variable overrides ──── */
/* Soft sage-mint palette: gentle and refreshing, never glaring. */
html[data-theme="light"] {
  --bg:    #e9f3ec;
  --bg2:   #dcebe2;
  --card:  rgba(16,110,75,.06);
  --line:  rgba(0,100,60,.16);
  --text:  #122b20;
  --muted: #40614f;
  --main:  #5a4fcf;
  --main2: #7c6cf0;
  --gold:  #a87010;
  --grad:  linear-gradient(135deg, #5a4fcf, #7c6cf0);
  --scheme: light;
  --on-main: #ffffff;
  --on-gold: #ffffff;
  --nav-bg: rgba(233,243,236,.85);
  --nav-bg-scrolled: rgba(233,243,236,.97);
  --nav-bg-mobile: rgba(233,243,236,.97);
  --nav-shadow: 0 8px 30px rgba(0,80,50,.10);
  --img-bg: #d3ecdc;
  --lightbox-bg: rgba(216,238,227,.96);
  /* Dialogs (semiconductor history + confirmation) */
  --dlg-bg: #e7f4ec;
  --dlg-text: #0f2418;
  --dlg-muted: #436451;
  --dlg-body: #264435;
  --dlg-border: rgba(90,79,207,.30);
  --dlg-line: rgba(0,90,55,.20);
  --dlg-soft: #d4e9dc;
  --dlg-soft2: #c2e0cd;
  --dlg-track: rgba(0,80,50,.12);
  --dlg-bar: #ddeee4;
  --dlg-visual: #dcefe2;
  --dlg-visual-grad: radial-gradient(ellipse at 50% 38%, #cde9d7, #dcefe2 75%);
  --dlg-backdrop: rgba(15,35,25,.52);
  --dlg-shadow: 0 32px 100px rgba(0,40,25,.18);
  /* SVG scene colours */
  --sv-text: #0f2418;
  --sv-purple-fill: rgba(90,79,207,.14);
  --sv-purple-stroke: #5a4fcf;
  --sv-gold-fill: rgba(168,112,16,.16);
  --sv-gold-stroke: #a87010;
  --sv-oxide-fill: rgba(168,112,16,.28);
  --sv-oxide-stroke: #b0790e;
  --sv-accent: #6a5bd8;
  color-scheme: light;
}

/* ── §10  LIGHT MODE – body & backgrounds ────────────────────── */
html[data-theme="light"] body { background: var(--bg); color: var(--text); }
html[data-theme="light"] body::before {
  background:
    radial-gradient(600px 400px at 15% 10%,  rgba(90,79,207,.08),  transparent),
    radial-gradient(500px 400px at 90% 40%,  rgba(124,108,240,.06), transparent),
    radial-gradient(500px 300px at 30% 100%, rgba(176,120,16,.05),  transparent);
}
html[data-theme="light"] body::after {
  background-image:
    linear-gradient(rgba(0,80,50,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,80,50,.035) 1px, transparent 1px);
  background-size: 52px 52px;
}
html[data-theme="light"] #loader { background: var(--bg); }
html[data-theme="light"] .load-bar { background: rgba(0,80,50,.12); }

/* ── §11  LIGHT MODE – navigation ────────────────────────────── */
/* Bar/background colours come from --nav-* variables (see §9). */
html[data-theme="light"] .nav { border-bottom-color: var(--line); }
html[data-theme="light"] .nav ul a       { color: var(--muted); }@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .nav ul a:hover { color: var(--text); background: rgba(0,80,50,.06); }}
html[data-theme="light"] .nav ul a.active {
  color: var(--main);
  background: rgba(90,79,207,.10);
  box-shadow: inset 0 0 0 1px rgba(90,79,207,.4);
}
html[data-theme="light"] .menu-btn { border-color: var(--line); }
html[data-theme="light"] .menu-btn span { background: var(--text); }

/* ── §12  LIGHT MODE – hero ──────────────────────────────────── */
html[data-theme="light"] .hero h1 {
  background: linear-gradient(120deg, #5a4fcf 0%, #7c6cf0 48%, #a87010 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
html[data-theme="light"] .photo-badge {
  background: rgba(233,243,236,.93);
  border-color: var(--line);
  color: var(--text);
}

/* ── §13  LIGHT MODE – buttons ───────────────────────────────── */
html[data-theme="light"] .btn.primary {
  color: #fff;
  background: linear-gradient(135deg, #5a4fcf, #7c6cf0);
  box-shadow: 0 10px 30px rgba(90,79,207,.38);
  border: none;
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .btn.primary:hover {
  box-shadow: 0 14px 42px rgba(90,79,207,.56);
  transform: translateY(-3px);
}}
html[data-theme="light"] .btn.cv-premium {
  border-color: rgba(168,112,16,.60);
  color: var(--gold);
  background: linear-gradient(125deg, rgba(168,112,16,.12), rgba(90,79,207,.08));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.36);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .btn.cv-premium:hover {
  border-color: var(--gold);
  box-shadow: 0 8px 28px rgba(168,112,16,.18);
}}

/* ── §14  LIGHT MODE – cards & tiles (mint, never white) ─────── */
html[data-theme="light"] .card {
  background: linear-gradient(145deg, rgba(186,226,203,.62), rgba(209,236,221,.55));
  box-shadow: 0 4px 22px rgba(0,80,50,.07);
  border-color: var(--line);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .card:hover {
  box-shadow: 0 14px 38px rgba(90,79,207,.13);
  border-color: rgba(90,79,207,.35);
}}
html[data-theme="light"] .tile {
  background: linear-gradient(145deg, rgba(186,226,203,.66), rgba(209,236,221,.58));
  box-shadow: 0 4px 22px rgba(0,80,50,.07);
  border-color: var(--line);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .tile:hover { box-shadow: 0 18px 46px rgba(90,79,207,.14); }}
html[data-theme="light"] .tile-img::after {
  background: linear-gradient(180deg, transparent 55%, rgba(10,60,30,.22));
}
html[data-theme="light"] .tile-cat {
  background: rgba(233,243,236,.90);
  color: var(--gold);
  border-color: rgba(168,112,16,.30);
}

/* ── §15  LIGHT MODE – chip panel & marquee ──────────────────── */
html[data-theme="light"] .chip-panel {
  background: linear-gradient(160deg, rgba(90,79,207,.06), rgba(186,226,203,.55));
  border-color: var(--line);
}
html[data-theme="light"] .chip-stats { border-left-color: var(--line); }
html[data-theme="light"] .stat { border-bottom-color: var(--line); border-right-color: var(--line); }
html[data-theme="light"] .chip-view {
  background-image:
    linear-gradient(rgba(90,79,207,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(90,79,207,.07) 1px, transparent 1px);
  background-size: 26px 26px;
}
html[data-theme="light"] .marquee { border-block-color: var(--line); }
html[data-theme="light"] .marquee-track span {
  background: rgba(196,230,211,.80);
  border-color: var(--line);
}

/* ── §16  LIGHT MODE – CTA / contact ─────────────────────────── */
html[data-theme="light"] .cta {
  background: linear-gradient(160deg, rgba(90,79,207,.09), rgba(22,140,90,.10));
  border-color: var(--line);
}
html[data-theme="light"] .info-link {
  background: rgba(186,226,203,.60);
  border-color: var(--line);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .info-link:hover { border-color: var(--main); }}
html[data-theme="light"] .ico { background: rgba(90,79,207,.12); }
html[data-theme="light"] .cv-card {
  background: linear-gradient(160deg, rgba(168,112,16,.07), rgba(90,79,207,.04));
  border-color: rgba(168,112,16,.35);
}
html[data-theme="light"] form input,
html[data-theme="light"] form textarea,
html[data-theme="light"] form select {
  background: rgba(255,255,255,.55);
  border-color: var(--line);
  color: var(--text);
}
html[data-theme="light"] form input:focus,
html[data-theme="light"] form textarea:focus,
html[data-theme="light"] form select:focus {
  border-color: var(--main);
  box-shadow: 0 0 0 4px rgba(90,79,207,.12);
  background: rgba(240,250,244,.90);
}
html[data-theme="light"] form ::placeholder { color: var(--muted); opacity: .62; }
html[data-theme="light"] .contact-form { color-scheme: light; }
html[data-theme="light"] .contact-form input:-webkit-autofill,
html[data-theme="light"] .contact-form textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--text);
  -webkit-box-shadow: 0 0 0 1000px #dcebe2 inset;
  caret-color: var(--text);
}
html[data-theme="light"] .delivery-note { border-left-color: rgba(168,112,16,.45); }
html[data-theme="light"] .draft-tools { background: rgba(90,79,207,.04); border-color: var(--line); }
html[data-theme="light"] .sent-note { background: rgba(168,112,16,.07); border-color: rgba(168,112,16,.35); }
html[data-theme="light"] .form-status { border-color: var(--line); color: var(--text); }
html[data-theme="light"] .form-status.error { color: #b22222; border-color: rgba(178,34,34,.3); }

/* ── §17  LIGHT MODE – timeline & skills ─────────────────────── */
html[data-theme="light"] .timeline { border-left-color: var(--line); }
html[data-theme="light"] .t-item { border-left-color: rgba(90,79,207,.3); }
html[data-theme="light"] .t-item::before {
  background: var(--bg);
  border-color: var(--main);
  box-shadow: 0 0 10px var(--main);
}
html[data-theme="light"] .skill-card .tag {
  background: rgba(0,80,50,.05);
  border-color: var(--line);
  color: var(--text);
}

/* ── §18  LIGHT MODE – footer ────────────────────────────────── */
html[data-theme="light"] .footer {
  background: linear-gradient(180deg, #dcebe2, #cbe3d4);
  border-top-color: var(--line);
}
html[data-theme="light"] .footer p,
html[data-theme="light"] .footer-bottom { color: var(--muted); }
html[data-theme="light"] .footer h4 { color: var(--text); }
html[data-theme="light"] .footer li a { color: var(--muted); }@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .footer li a:hover { color: var(--gold); padding-left: 5px; }}
html[data-theme="light"] .to-top { border-color: var(--line); color: var(--text); }@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .to-top:hover { border-color: var(--gold); color: var(--gold); }}
html[data-theme="light"] .footer a.footer-link {
  background: rgba(186,226,203,.55);
  border-color: var(--line);
  color: var(--muted);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .footer li a.footer-link:hover {
  border-color: var(--main);
  color: var(--text);
  background: rgba(90,79,207,.07);
  padding-left: 12px;
}}
/* LinkedIn – keep the solid brand blue in both modes */
html[data-theme="light"] .footer a.footer-link.footer-linkedin {
  background: #0a66c2;
  border-color: #0a66c2;
  color: #fff;
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .footer a.footer-link.footer-linkedin:hover {
  background: #0958a8;
  border-color: #0958a8;
  color: #fff;
  padding-left: 12px;
}}
/* Download CV – keep the gold style */
html[data-theme="light"] .footer a.footer-link.footer-cv {
  border-color: rgba(168,112,16,.60);
  color: var(--gold);
  background: linear-gradient(125deg, rgba(168,112,16,.10), rgba(90,79,207,.08));
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .footer a.footer-link.footer-cv:hover {
  border-color: var(--gold);
  color: var(--gold);
  background: linear-gradient(125deg, rgba(168,112,16,.16), rgba(90,79,207,.12));
  padding-left: 12px;
}}@media (hover:hover) and (pointer:fine){

/* ── §19  LIGHT MODE – history dialog & confirmation extras ──── */
/* Backgrounds, text, buttons, SVG scenes and chapter pills inside
   the dialogs are driven by the --dlg-* / --sv-* variables (§9),
   so the whole window and every chapter switch automatically.
   Only the few non-variable extras remain here.                */
html[data-theme="light"] .story-close:hover {
  background: rgba(90,79,207,.15);
  border-color: var(--main);
}}
html[data-theme="light"] .story-chapters { background: rgba(211,236,222,.55); }@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .story-chapters button:hover {
  color: var(--text);
  background: rgba(90,79,207,.10);
}}
html[data-theme="light"] .story-note {
  background: rgba(168,112,16,.07);
  border-left-color: var(--gold);
}
html[data-theme="light"] .story-progress span {
  background: linear-gradient(90deg, var(--main), var(--gold));
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .story-playback button:hover {
  background: rgba(90,79,207,.12);
  border-color: var(--main);
}}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .history-confirm-actions button:hover {
  background: rgba(90,79,207,.10);
  border-color: var(--main);
}}

/* ── §20  LIGHT MODE – gallery, lightbox, pager ──────────────── */
html[data-theme="light"] .gallery figure {
  background: rgba(186,226,203,.75);
  border-color: var(--line);
}
html[data-theme="light"] .pager a {
  background: rgba(186,226,203,.65);
  border-color: var(--line);
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .pager a:hover { border-color: var(--main); }}
html[data-theme="light"] .text-block p { color: var(--muted); }

/* ── §21  LIGHT MODE – publications ──────────────────────────── */
html[data-theme="light"] .pub.journal {
  border-color: rgba(168,112,16,.45);
  background: linear-gradient(160deg, rgba(168,112,16,.08), rgba(90,79,207,.04));
}@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .pub.journal:hover { border-color: var(--gold); }}
html[data-theme="light"] .pub.conf { border-color: rgba(90,79,207,.25); }

/* ── §22  LIGHT MODE – academics & awards ────────────────────── */
html[data-theme="light"] .award-summary {
  background:
    radial-gradient(ellipse at 95% 0, rgba(168,112,16,.08), transparent 60%),
    linear-gradient(135deg, rgba(90,79,207,.07), rgba(196,230,211,.88));
}
html[data-theme="light"] .recog { border-top-color: rgba(168,112,16,.4); }

/* ── §23  LIGHT MODE – profile card ──────────────────────────── */
html[data-theme="light"] .card-preview { border-color: rgba(90,79,207,.25); }
html[data-theme="light"] .profile-card-sides img { border-color: rgba(90,79,207,.20); }

/* ── §24  LIGHT MODE – miscellaneous ─────────────────────────── */
html[data-theme="light"] .update-notice {
  background: var(--bg2);
  border-color: var(--gold);
  color: var(--text);
}
html[data-theme="light"] .chip-history-hint { color: var(--muted); }@media (hover:hover) and (pointer:fine){
html[data-theme="light"] .chip-history-trigger:hover .chip-history-hint { color: var(--text); }}

/* ── §25  PHOTO FRAMES – animated gradient border (both modes) ─ */
/* Home-page profile photo – light mode (dark mode lives in
   style.css; both use the same violet→gold moving gradient).    */
html[data-theme="light"] .photo-frame {
  background: linear-gradient(135deg, var(--main), var(--main2), var(--gold), var(--main));
  background-size: 300% 300%;
  animation: borderMove 6s linear infinite;
  box-shadow: 0 20px 60px rgba(90,79,207,.28);
}
/* About-page cover image – BOTH modes */
.about-photo .photo-frame {
  padding: 3px;
  background: linear-gradient(135deg, var(--main), var(--main2), var(--gold), var(--main));
  background-size: 300% 300%;
  animation: borderMove 6s linear infinite;
  box-shadow: 0 20px 60px rgba(139,123,255,.25);
}
html[data-theme="light"] .about-photo .photo-frame {
  box-shadow: 0 20px 60px rgba(90,79,207,.22);
}