:root{
  --blue:#16224d;--blue-dark:#0d1636;--blue-mid:#1b3b6f;--blue-soft:#eef3fa;
  --orchid:#114e91;--dove:#aebbd0;--pale-dove:#c8d3e2;--cyan:#8298d6;
  --white:#fff;--page:#fff;--ink:#16224d;--muted:#526078;--line:#c8d3e2;--surface:#f4f7fb;--surface-raised:#fff;
  --contact-icon-filter:brightness(0);--dashboard-hover-bg:#16224d;--dashboard-hover-fg:#fff;--focus-strip-bg:#fff;--focus-strip-fg:#16224d;--sg-letter-filter:none;--sg-active-filter:invert(1) grayscale(1) brightness(2);
  --hero-primary-bg:var(--admin-accent);--hero-primary-fg:#fff;--hero-primary-border:var(--admin-accent);--hero-secondary-bg:var(--admin-panel);--hero-secondary-fg:var(--admin-text);--hero-secondary-border:var(--admin-line);
}
html{background:var(--page);color-scheme:light}body{padding-top:76px;background:var(--page)}
.site-header{position:fixed;inset:0 0 auto;width:100%;padding-inline:max(24px,calc((100% - 1180px)/2));background:color-mix(in srgb,var(--page) 96%,transparent);border-bottom:1px solid var(--line);backdrop-filter:blur(12px)}
.header-actions{display:flex;align-items:center;gap:18px}.theme-toggle{display:inline-grid;grid-template-columns:auto auto;align-items:center;gap:7px;min-width:44px;min-height:44px;padding:8px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface-raised);color:var(--ink);font-weight:700}.theme-toggle:hover{background:var(--blue-soft)}.theme-toggle:focus-visible{outline:3px solid var(--blue-mid);outline-offset:2px}.theme-toggle-icon{font-size:1rem;line-height:1}.theme-toggle-label{font-size:.76rem}
:root[data-theme='dark']{--blue:#8298d6;--blue-dark:#afc0f0;--blue-mid:#90a7e0;--blue-soft:#1b3b6f;--orchid:#93b9e6;--dove:#8997ad;--pale-dove:#394b9b;--cyan:#afc0f0;--white:#f3f6fb;--page:#0b1224;--ink:#f3f6fb;--muted:#b7c3d6;--line:#394b66;--surface:#121d39;--surface-raised:#1c2a58;--contact-icon-filter:brightness(0) invert(1);--dashboard-hover-bg:#f3f6fb;--dashboard-hover-fg:#0b1224;--focus-strip-bg:#fff;--focus-strip-fg:#16224d;--sg-letter-filter:invert(1) grayscale(1) brightness(2);--hero-primary-bg:#8298d6;--hero-primary-fg:#0b1224;--hero-primary-border:#8298d6;--hero-secondary-bg:#121d39;--hero-secondary-fg:#f3f6fb;--hero-secondary-border:#394b66;color-scheme:dark}
:root[data-theme='dark'] body,:root[data-theme='dark'] .page-main,:root[data-theme='dark'] .page-fill{background:var(--page);color:var(--ink)}
:root[data-theme='dark'] .site-header,:root[data-theme='dark'] .site-header nav,:root[data-theme='dark'] .explore .explore-links>a,:root[data-theme='dark'] .academic-profile-list>a,:root[data-theme='dark'] .contact-method,:root[data-theme='dark'] input,:root[data-theme='dark'] select,:root[data-theme='dark'] textarea,:root[data-theme='dark'] dialog{background:var(--surface-raised)!important;color:var(--ink)!important}
:root[data-theme='dark'] .hero,:root[data-theme='dark'] #publications.records,:root[data-theme='dark'] #supervisor.supervisor,:root[data-theme='dark'] #projects,:root[data-theme='dark'] #blog,:root[data-theme='dark'] #iprs.blue-section,:root[data-theme='dark'] #contact.contact,:root[data-theme='dark'] .academic-profiles,:root[data-theme='dark'] .explore{background:var(--surface)!important;color:var(--ink)!important}
:root[data-theme='dark'] footer{background:#070d1b;color:var(--ink);box-shadow:0 0 0 100vmax #070d1b;clip-path:inset(0 -100vmax)}
.focus-strip{background:var(--focus-strip-bg);color:var(--focus-strip-fg)}
.focus-strip>span{color:inherit}
.contact-actions{grid-template-columns:repeat(2,minmax(0,1fr))}
#contact .contact-method img{filter:var(--contact-icon-filter);transition:filter var(--motion-ui) ease}
.explore .explore-links>a:is(:hover,:focus-visible),.academic-profile-list>a:is(:hover,:focus-visible){background:var(--dashboard-hover-bg)!important;color:var(--dashboard-hover-fg)!important}
:root[data-theme='dark'] .explore .explore-links>a:is(:hover,:focus-visible),:root[data-theme='dark'] .academic-profile-list>a:is(:hover,:focus-visible){background:var(--dashboard-hover-bg)!important;color:var(--dashboard-hover-fg)!important}
:root[data-theme='dark'] .academic-profile-list>a img{filter:brightness(0) invert(1)!important}
:root[data-theme='dark'] .academic-profile-list>a:is(:hover,:focus-visible) img{filter:brightness(0)!important}
:root[data-theme='dark'] .academic-profile-list>a:is([data-profile="sinta"],[data-profile="garuda"]) img{filter:var(--sg-letter-filter)!important}
.academic-profile-list>a:is([data-profile="sinta"],[data-profile="garuda"]):is(:hover,:focus-visible) img{filter:var(--sg-active-filter)!important}
:root{--admin-bg:#f4f7fb;--admin-panel:#fff;--admin-text:#16224d;--admin-muted:#526078;--admin-line:#c8d3e2;--admin-accent:#16224d;--admin-accent-soft:#eef3fa;--admin-orchid:#114e91;--admin-dove:#aebbd0;--admin-danger:#9f241d}
:root[data-theme='dark']{--admin-bg:#0b1224;--admin-panel:#121d39;--admin-text:#f3f6fb;--admin-muted:#b7c3d6;--admin-line:#394b66;--admin-accent:#8298d6;--admin-accent-soft:#1b3b6f;--admin-orchid:#93b9e6;--admin-dove:#8997ad;--admin-danger:#ffb4ac}
.admin-body{padding-top:0}.admin-header,.login-card,.photo-manager,.admin-panel,.admin-tabs,.admin-summary>div,.custom-link-row,.row-actions button,.admin-body dialog{background:var(--admin-panel);color:var(--admin-text)}
.admin-body input,.admin-body select,.admin-body textarea,.admin-body .rich-editor,.admin-body .editor-toolbar,.admin-body .editor-toolbar button{background:var(--admin-panel);color:var(--admin-text);border-color:var(--admin-line)}
.admin-body .button.primary{background:var(--admin-accent);border-color:var(--admin-accent);color:#fff}:root[data-theme='dark'] .admin-body .button.primary{color:#0b1224}
.admin-body .admin-tabs button:hover,.admin-body .admin-panel tbody tr:hover{background:var(--admin-accent-soft);color:var(--admin-text)}
.admin-body .row-actions button:not(.delete){color:var(--admin-text)}.admin-body .row-actions .delete{color:var(--admin-danger)}
@media(max-width:900px){.header-actions{gap:8px}.site-header nav{left:0;right:0;background:var(--page)}.theme-toggle-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.site-header{padding-inline:16px}}
@media print{body{padding-top:0}.site-header{position:static}.theme-toggle{display:none}}

/* React Bits-inspired canvas effects, adapted for this static portfolio. */
.hero{isolation:isolate}
.floating-lines-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;pointer-events:none;opacity:.68;mix-blend-mode:multiply;overflow:hidden}
.floating-lines-canvas canvas{display:block;width:100%!important;height:100%!important}
:root[data-theme='dark'] .floating-lines-canvas{opacity:.78;mix-blend-mode:normal}
.splash-cursor-canvas{position:fixed;inset:0;z-index:35;width:100vw;height:100vh;pointer-events:none}
main,footer{position:relative}
footer{box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);background:#fff}
:root[data-theme='dark'] footer{background:#070d1b!important;box-shadow:0 0 0 100vmax #070d1b!important}

/* Theme contrast corrections. */
:root[data-theme='dark'] footer .social-icon img,:root[data-theme='dark'] .social-links .social-icon img{filter:brightness(0) invert(1)!important}
.academic-profile-list>a:is([data-profile="sinta"],[data-profile="garuda"]):is(:hover,:focus-visible) img{filter:brightness(0)!important}
:root[data-theme='dark'] .academic-profile-list>a:is([data-profile="sinta"],[data-profile="garuda"]):is(:hover,:focus-visible) img{filter:brightness(0)!important}
.focus-strip,:root[data-theme='dark'] .focus-strip{background:#16224d!important;color:#fff!important}
.focus-strip>span{padding:10px 14px;border:0;color:#fff!important;transition:none!important;transform:none!important;box-shadow:none!important}

/* Sinta/Garuda: light navy→white, dark white→navy; letters stay inverse. */
.academic-profile-list>a:is([data-profile="sinta"],[data-profile="garuda"]) img{filter:none!important}
.academic-profile-list>a[data-profile="sinta"]:is(:hover,:focus-visible) img{content:url("assets/logos/sinta-inverse.svg");filter:none!important}
.academic-profile-list>a[data-profile="garuda"]:is(:hover,:focus-visible) img{content:url("assets/logos/garuda-inverse.svg");filter:none!important}
:root[data-theme='dark'] .academic-profile-list>a[data-profile="sinta"] img{content:url("assets/logos/sinta-inverse.svg");filter:none!important}
:root[data-theme='dark'] .academic-profile-list>a[data-profile="garuda"] img{content:url("assets/logos/garuda-inverse.svg");filter:none!important}
:root[data-theme='dark'] .academic-profile-list>a[data-profile="sinta"]:is(:hover,:focus-visible) img{content:url("assets/logos/sinta.svg");filter:none!important}
:root[data-theme='dark'] .academic-profile-list>a[data-profile="garuda"]:is(:hover,:focus-visible) img{content:url("assets/logos/garuda.svg");filter:none!important}

/* Contact actions use the same bordered tile grammar as Academic Profiles. */
#contact .contact-actions{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)}
#contact .contact-method{min-height:116px;padding:24px;border:0!important;border-right:1px solid var(--line)!important;border-bottom:1px solid var(--line)!important;border-radius:0!important;background:var(--surface-raised)!important;color:var(--ink)!important;transition:transform var(--motion-ui) ease,background-color var(--motion-ui) ease,color var(--motion-ui) ease,box-shadow var(--motion-ui) ease}
#contact .contact-method img{filter:var(--contact-icon-filter)!important}
#contact .contact-method:is(:hover,:focus-visible){position:relative;z-index:1;background:var(--dashboard-hover-bg)!important;color:var(--dashboard-hover-fg)!important;box-shadow:0 5px 10px rgb(13 22 54 / 16%);transform:translateY(-5px)}
#contact .contact-method:is(:hover,:focus-visible) img{filter:brightness(0) invert(1)!important}
:root[data-theme='dark'] #contact .contact-method:is(:hover,:focus-visible) img{filter:brightness(0)!important}
@media(prefers-reduced-motion:reduce){.floating-lines-canvas,.splash-cursor-canvas{display:none}}

/* Dashboard and Contact never use the white scroll curtain. */
body:has(.hero) .motion-reveal::before,body:has(.public-contact-form) .motion-reveal::before,body:has(#publication-list) .motion-reveal::before{content:none!important}
body:has(.hero) .motion-reveal,body:has(.hero) .motion-reveal>*,body:has(.public-contact-form) .motion-reveal,body:has(.public-contact-form) .motion-reveal>*,body:has(#publication-list) .motion-reveal,body:has(#publication-list) .motion-reveal>*{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}

/* Project category tabs: dark idle navy/black, selected white/black. */
:root[data-theme='dark'] #projects .tabs button{background:#8298d6!important;border-color:#8298d6!important;color:#0b1224!important}
:root[data-theme='dark'] #projects .tabs button:is(:hover,:focus-visible),:root[data-theme='dark'] #projects .tabs button[aria-selected='true']{background:#fff!important;border-color:#fff!important;color:#0b1224!important}

/* One divider per content row: remove stacked heading/list lines, keep dove row separators. */
#publications .toolbar,#iprs .toolbar,#projects .toolbar,#supervisor .toolbar,#blog .toolbar{border-bottom:0!important}
.publication-list,.book-list,.ipr-list,.project-list,.blog-list,.timeline{border-top:1px solid var(--dove)!important}
.supervision-group>h2,.supervision-group+.supervision-group{border-top:0!important;border-bottom:0!important}
.publication-row,.book-item,.ipr-item,.project-item,.timeline-item,.blog-item{border-bottom-color:var(--dove)!important}

/* One button system across every public page and theme. */
body:not(.admin-body) .button,body:not(.admin-body) .load-more,body:not(.admin-body) #iprs .text-button{min-height:46px;padding:11px 18px;border:1px solid #16224d!important;border-radius:6px!important;background:#16224d!important;color:#fff!important;font-weight:700;text-decoration:none;transition:background-color var(--motion-ui) ease,color var(--motion-ui) ease,border-color var(--motion-ui) ease,transform var(--motion-ui) ease}
body:not(.admin-body) .button:is(:hover,:focus-visible),body:not(.admin-body) .load-more:is(:hover,:focus-visible),body:not(.admin-body) #iprs .text-button:is(:hover,:focus-visible){background:#fff!important;border-color:#16224d!important;color:#16224d!important;transform:translateY(-2px)}
:root[data-theme='dark'] body:not(.admin-body) .button,:root[data-theme='dark'] body:not(.admin-body) .load-more,:root[data-theme='dark'] body:not(.admin-body) #iprs .text-button{background:#fff!important;border-color:#fff!important;color:#0b1224!important}
:root[data-theme='dark'] body:not(.admin-body) .button:is(:hover,:focus-visible),:root[data-theme='dark'] body:not(.admin-body) .load-more:is(:hover,:focus-visible),:root[data-theme='dark'] body:not(.admin-body) #iprs .text-button:is(:hover,:focus-visible){background:#16224d!important;border-color:#fff!important;color:#fff!important}

/* Win over old page-specific button rules, including Contact and IPRs. */
body:not(.admin-body) #contact .button.light,body:not(.admin-body) #iprs .text-button{background:#16224d!important;border-color:#16224d!important;color:#fff!important}
body:not(.admin-body) #contact .button.light:is(:hover,:focus-visible),body:not(.admin-body) #iprs .text-button:is(:hover,:focus-visible){background:#fff!important;border-color:#16224d!important;color:#16224d!important}
:root[data-theme='dark'] body:not(.admin-body) #contact .button.light,:root[data-theme='dark'] body:not(.admin-body) #iprs .text-button{background:#fff!important;border-color:#fff!important;color:#0b1224!important}
:root[data-theme='dark'] body:not(.admin-body) #contact .button.light:is(:hover,:focus-visible),:root[data-theme='dark'] body:not(.admin-body) #iprs .text-button:is(:hover,:focus-visible){background:#16224d!important;border-color:#fff!important;color:#fff!important}

/* Footer stays icon-only; only the hover/focus tooltip is white with black text in dark mode. */
:root[data-theme='dark'] footer .social-icon,:root[data-theme='dark'] footer .social-icon:is(:hover,:focus-visible){width:32px;height:32px;padding:0;background:transparent!important;color:var(--cyan)!important}
:root[data-theme='dark'] footer .social-icon:after{background:#fff!important;color:#0b1224!important}

/* Uploaded images preserve their natural portrait or landscape orientation. */
.book-cover-wrap{aspect-ratio:auto;overflow:visible;background:transparent}.book-cover{width:100%;height:auto;max-height:none;object-fit:contain}.supervision-photo{width:100%;max-width:620px;height:auto;aspect-ratio:auto;object-fit:contain}#blog .blog-cover{width:100%;height:auto;max-height:none;aspect-ratio:auto;object-fit:contain}.photo-preview{height:auto;max-height:240px;aspect-ratio:auto;background:transparent}.photo-preview img{width:100%;height:auto;max-height:240px;object-fit:contain}


/* Homepage portrait sits below the About heading, not beside the hero. */
body:has(#about) .hero{grid-template-columns:minmax(0,1fr)!important}
body:has(#about) .hero-copy{max-width:900px}
.about-profile-photo{position:relative!important;top:auto!important;width:min(420px,100%)!important;max-width:100%;min-height:0;margin:40px 0 0!important;aspect-ratio:4/5;transform:none!important}
.about-profile-photo img{width:100%;height:100%;object-fit:cover}
@media(max-width:760px){.about-profile-photo{width:100%!important;margin-top:28px!important}}

/* Admin dark mode: table headers, rows, statuses, and actions follow admin theme tokens. */
:root[data-theme='dark'] .admin-body .admin-panel table,
:root[data-theme='dark'] .admin-body .admin-panel thead,
:root[data-theme='dark'] .admin-body .admin-panel tbody,
:root[data-theme='dark'] .admin-body .admin-panel tr,
:root[data-theme='dark'] .admin-body .admin-panel th,
:root[data-theme='dark'] .admin-body .admin-panel td{background:var(--admin-panel)!important;color:var(--admin-text)!important;border-color:var(--admin-line)!important}
:root[data-theme='dark'] .admin-body .admin-panel th{color:var(--admin-muted)!important}
:root[data-theme='dark'] .admin-body .admin-panel tbody tr:hover,
:root[data-theme='dark'] .admin-body .admin-panel tbody tr:hover td{background:var(--admin-accent-soft)!important}
:root[data-theme='dark'] .admin-body .status-pill{background:var(--admin-bg)!important;border-color:var(--admin-line)!important;color:var(--admin-muted)!important}
:root[data-theme='dark'] .admin-body .status-pill.published{background:var(--admin-accent-soft)!important;color:var(--admin-accent)!important}
:root[data-theme='dark'] .admin-body .row-actions button{background:var(--admin-panel)!important;border-color:var(--admin-line)!important}
:root[data-theme='dark'] .admin-body .row-actions button:hover{background:var(--admin-accent-soft)!important}

/* Admin completeness: readable actions, type filters, natural media orientation. */
:root{--admin-danger:#b42318}
:root[data-theme='dark']{--admin-danger:#ff9b95}
.admin-body .row-actions button:not(.delete){color:var(--admin-text)!important}
.admin-body .row-actions .delete{color:var(--admin-danger)!important}
.admin-type-filters{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.admin-type-filters>span{margin-right:4px;color:var(--admin-muted);font-size:.75rem;font-weight:700}
.admin-type-filters button{min-height:34px;padding:6px 10px;border:1px solid var(--admin-line);border-radius:6px;background:var(--admin-panel);color:var(--admin-text)}
.admin-type-filters button.active{background:var(--admin-accent);border-color:var(--admin-accent);color:#fff}
.book-cover-wrap{aspect-ratio:auto!important;background:transparent!important}
.book-cover{width:100%;height:auto!important;object-fit:contain!important}
.supervision-photo{width:100%;max-width:620px;height:auto;aspect-ratio:auto;object-fit:contain!important}
#blog .blog-cover{width:100%;height:auto;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important}
/* Public buttons mirror Admin tokens in both themes. */
body:not(.admin-body) :is(.button,.load-more,#iprs .text-button,.tabs button){font-family:var(--sans);font-weight:700}
body:not(.admin-body) :is(.button.primary,.load-more,#iprs .text-button,.tabs button[aria-selected='true']){background:var(--admin-accent)!important;border-color:var(--admin-accent)!important;color:#fff!important}
body:not(.admin-body) :is(.button.secondary,.button.light,.tabs button:not([aria-selected='true'])){background:var(--admin-panel)!important;border-color:var(--admin-line)!important;color:var(--admin-text)!important}
body:not(.admin-body) :is(.button.primary,.load-more,#iprs .text-button,.tabs button[aria-selected='true']):is(:hover,:focus-visible){background:var(--admin-accent-soft)!important;border-color:var(--admin-accent)!important;color:var(--admin-accent)!important}
body:not(.admin-body) :is(.button.secondary,.button.light,.tabs button:not([aria-selected='true'])):is(:hover,:focus-visible){background:var(--admin-accent)!important;border-color:var(--admin-accent)!important;color:#fff!important}
:root[data-theme='dark'] body:not(.admin-body) :is(.button.primary,.load-more,#iprs .text-button,.tabs button[aria-selected='true']){color:#0b1224!important}
:root[data-theme='dark'] body:not(.admin-body) :is(.button.primary,.load-more,#iprs .text-button,.tabs button[aria-selected='true']):is(:hover,:focus-visible){background:var(--admin-accent-soft)!important;color:var(--admin-text)!important}
:root[data-theme='dark'] body:not(.admin-body) :is(.button.secondary,.button.light,.tabs button:not([aria-selected='true'])){background:var(--admin-panel)!important;border-color:var(--admin-line)!important;color:var(--admin-text)!important}

/* Homepage pair swaps exact idle appearances on hover and keyboard focus. */
.hero-actions .button.primary{background:var(--hero-primary-bg)!important;border-color:var(--hero-primary-border)!important;color:var(--hero-primary-fg)!important}
.hero-actions .button.secondary{background:var(--hero-secondary-bg)!important;border-color:var(--hero-secondary-border)!important;color:var(--hero-secondary-fg)!important}
.hero-actions .button.primary:is(:hover,:focus-visible){background:var(--hero-secondary-bg)!important;border-color:var(--hero-secondary-border)!important;color:var(--hero-secondary-fg)!important}
.hero-actions .button.secondary:is(:hover,:focus-visible){background:var(--hero-primary-bg)!important;border-color:var(--hero-primary-border)!important;color:var(--hero-primary-fg)!important}
:root[data-theme='dark'] .hero-actions .button.primary{background:#8298d6!important;border-color:#8298d6!important;color:#0b1224!important}
:root[data-theme='dark'] .hero-actions .button.secondary{background:#121d39!important;border-color:#394b66!important;color:#f3f6fb!important}
:root[data-theme='dark'] .hero-actions .button.primary:is(:hover,:focus-visible){background:#121d39!important;border-color:#394b66!important;color:#f3f6fb!important}
:root[data-theme='dark'] .hero-actions .button.secondary:is(:hover,:focus-visible){background:#8298d6!important;border-color:#8298d6!important;color:#0b1224!important}

/* Supervision dark mode: keep cards dark; make the content readable. */
.supervision-card .supervision-photo{width:168px!important;max-width:calc(100% - 36px)!important;height:168px!important;aspect-ratio:1!important;object-fit:cover!important;object-position:center!important;padding:0!important;border-radius:50%!important}
:root[data-theme='dark'] .supervision-card{background:transparent!important;border-color:var(--line)!important}
:root[data-theme='dark'] .supervision-card h3,
:root[data-theme='dark'] .supervision-card time,
:root[data-theme='dark'] .supervision-card dt,
:root[data-theme='dark'] .supervision-card dd{color:#f3f6fb!important}
.footer-credit a{color:var(--muted)!important}.footer-credit a:hover,.footer-credit a:focus-visible{color:var(--blue)!important}