/* ---------------------------------------------------------------------
   base.css — resets, toolbar chrome, and utility classes shared by every
   theme. Visual "skin" (colors, sidebar layout) lives in theme01.css etc.
   --------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  font-family: "Segoe UI", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  background: #eef1f6;
  color: #1c2331;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.js-hidden { display: none !important; }
.print-only { display: none; }

/* ==================== Floating glass toolbar ====================
   The toolbar is a "liquid glass" pill floating directly above the
   CV sheet, right-aligned so its right edge lines up with the right
   edge of the sheet below it. */
.cv-toolbar {
  position: relative;
  z-index: 20;
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 0 0;
  display: flex;
  justify-content: flex-end;
}

.cv-toolbar-actions {
  --glass-border: rgba(255, 255, 255, 0.72);
  --glass-shadow: rgba(20, 30, 50, 0.14);

  position: relative;
  display: flex;
  align-items: center;
  gap: .45rem;

  width: fit-content;
  max-width: 100%;
  padding: .38rem;

  border: 1px solid var(--glass-border);
  border-radius: 999px;

  /* fallback solid for browsers without backdrop-filter */
  background: rgba(255,255,255,.82);

  backdrop-filter: blur(22px) saturate(180%);
  -webkit-backdrop-filter: blur(22px) saturate(180%);

  box-shadow:
    0 8px 30px var(--glass-shadow),
    inset 0 1px 0 rgba(255, 255, 255, .85),
    inset 0 -1px 0 rgba(255, 255, 255, .25);
}

/* Subtle glass reflection */
.cv-toolbar-actions::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  background:
    linear-gradient(
      115deg,
      rgba(255, 255, 255, .42),
      transparent 35%,
      transparent 65%,
      rgba(255, 255, 255, .18)
    );
  pointer-events: none;
}
.cv-toolbar-actions > * { position: relative; z-index: 1; }

.cv-tool-btn {
  appearance: none;
  -webkit-appearance: none;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .42rem;

  min-height: 34px;
  padding: 0 .72rem;

  border: 0;
  border-radius: 999px;

  background: transparent;
  color: #293241;

  font: inherit;
  font-size: .82rem;
  font-weight: 500;
  line-height: 1;

  text-decoration: none;
  white-space: nowrap;
  list-style: none;

  cursor: pointer;

  transition:
    background .2s ease,
    color .2s ease,
    box-shadow .2s ease,
    transform .15s ease;
}
.cv-tool-btn::-webkit-details-marker { display: none; }
.cv-tool-btn .cv-icon { width: 17px; height: 17px; flex: 0 0 auto; }
.cv-tool-btn:hover {
  background: rgba(255, 255, 255, .52);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 2px 8px rgba(30, 40, 60, .07);
  color: #111827;
}
.cv-tool-btn:active { transform: scale(.97); }
.cv-tool-btn:focus-visible {
  outline: 2px solid var(--cv-grad-end, #d49a35);
  outline-offset: 2px;
}

.cv-tool-btn-text { display: none; }
.cv-tool-btn-primary .cv-tool-btn-text { display: inline; }
@media (min-width: 720px) {
  .cv-tool-btn-text { display: inline; }
}

.cv-tool-btn-primary {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #e1ad57,
      #b87918
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .35),
    0 3px 10px rgba(180, 120, 25, .25);
}
.cv-tool-btn-primary:hover {
  color: #fff;
  background:
    linear-gradient(
      135deg,
      #e7b765,
      #c58220
    );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .45),
    0 5px 14px rgba(180, 120, 25, .30);
}

.cv-toolbar-divider {
  width: 1px;
  height: 21px;
  margin: 0 .12rem;
  background: rgba(30, 40, 55, .14);
}

/* details/summary based popovers -- zero JS, native disclosure */
.cv-tool-popover { position: relative; }
.cv-tool-popover > summary { list-style: none; }
.cv-tool-popover > summary::-webkit-details-marker { display: none; }
.cv-tool-popover[open] > summary {
  background: rgba(255, 255, 255, .62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .82),
    0 2px 9px rgba(20, 30, 50, .08);
}

.cv-tool-panel {
  position: absolute;
  top: calc(100% + .65rem);
  right: 0;

  min-width: 175px;
  padding: .42rem;

  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 16px;

  background: rgba(255,255,255,.86);
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, .80),
      rgba(245, 247, 250, .62)
    );

  backdrop-filter: blur(26px) saturate(180%);
  -webkit-backdrop-filter: blur(26px) saturate(180%);

  box-shadow:
    0 18px 45px rgba(20, 30, 50, .16),
    inset 0 1px 0 rgba(255, 255, 255, .9);

  display: flex;
  flex-direction: column;
  gap: .2rem;

  z-index: 60;

  animation: cv-glass-in .16s ease-out;
}

@keyframes cv-glass-in {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.cv-tool-panel-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  min-height: 36px;
  padding: 0 .7rem;

  border-radius: 10px;

  color: #293241;

  font-size: .8rem;
  text-decoration: none;

  transition: background .16s ease, color .16s ease;
}
.cv-tool-panel-item:hover { background: rgba(255, 255, 255, .58); color: #111827; }
.cv-tool-panel-item.is-active {
  background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8);
  font-weight: 600;
}

.cv-tool-panel-form { min-width: 230px; padding: .7rem; gap: .25rem; }
.cv-tool-panel-label {
  display: grid;
  gap: .35rem;
  padding: .35rem .25rem;

  color: #687181;

  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.cv-tool-panel-select {
  width: 100%;
  min-height: 34px;

  padding: 0 2rem 0 .65rem;

  border: 1px solid rgba(255, 255, 255, .7);
  border-radius: 9px;

  background: rgba(255, 255, 255, .52);

  color: #293241;

  font: inherit;
  font-size: .78rem;

  outline: none;
  cursor: pointer;

  box-shadow: inset 0 1px 2px rgba(20, 30, 50, .04);

  transition:
    border-color .18s ease,
    background .18s ease,
    box-shadow .18s ease;
}
.cv-tool-panel-select:hover { background: rgba(255, 255, 255, .7); }
.cv-tool-panel-select:focus {
  border-color: rgba(212, 154, 53, .65);
  box-shadow: 0 0 0 3px rgba(212, 154, 53, .12);
}

/* --- Colors swatches — 3D transparent glass orb (modern) --- */
.cv-tool-panel-colors {
  display: grid;
  gap: .58rem;
  padding: .65rem .6rem .65rem;
  justify-items: stretch;
  text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,.42), rgba(255,255,255,.22));
  border: 1px solid rgba(255,255,255,.58);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 4px 18px rgba(18, 28, 48, .06);
}
.cv-tool-panel-colors-title {
  display: flex;
  align-items: center;
  gap: .5rem;
  width: 100%;
  color: #7a8195;
  font-size: .58rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1;
}
.cv-tool-panel-colors-title::before,
.cv-tool-panel-colors-title::after {
  content: "";
  flex: 1 1 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(18,28,48,.08), transparent);
}
.cv-scheme-swatches {
  display: flex;
  gap: .45rem;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  padding: .12rem 0;
}
.cv-scheme-swatch {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  border: none;
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(10px) saturate(180%);
  -webkit-backdrop-filter: blur(10px) saturate(180%);
  box-shadow:
    0 8px 18px rgba(18, 28, 48, .16),
    0 2px 6px rgba(18, 28, 48, .12),
    inset 0 1px 1px rgba(255,255,255,.65),
    inset 0 -1px 1px rgba(255,255,255,.25);
  cursor: pointer;
  position: relative;
  display: inline-block;
  flex: 0 0 auto;
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transform: translateZ(0);
  transition:
    transform .28s cubic-bezier(.34, 1.56, .64, 1),
    box-shadow .28s ease,
    filter .28s ease;
}
/* 3D glass color — dual tone with frosted translucency + volumetric highlight (no white seam) */
.cv-scheme-swatch::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    /* top specular — glossy glass reflection */
    radial-gradient(ellipse 78% 52% at 32% 26%, rgba(255,255,255,.72) 0%, rgba(255,255,255,.28) 22%, transparent 58%),
    /* clean diagonal split without white hairline */
    linear-gradient(135deg, var(--color-1) 50%, var(--color-2) 50%);
  opacity: .96;
  box-shadow:
    inset 0 1px 1.5px rgba(255,255,255,.45),
    inset 0 -7px 12px rgba(0,0,0,.16),
    inset 0 6px 10px rgba(255,255,255,.14);
}
/* secondary soft highlight streak for depth — subtle liquid lens */
.cv-scheme-swatch::after {
  content: "";
  position: absolute;
  width: 64%;
  height: 34%;
  left: 18%;
  top: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(255,255,255,.92) 0%, rgba(255,255,255,.42) 32%, transparent 72%);
  filter: blur(.4px);
  opacity: .82;
  transform: rotate(-10deg);
  pointer-events: none;
  transition: opacity .22s ease, transform .28s ease;
}
.cv-scheme-swatch:hover {
  transform: scale(1.1) translateY(-2px);
  box-shadow:
    0 14px 26px rgba(18, 28, 48, .20),
    0 5px 12px rgba(18, 28, 48, .14),
    inset 0 1px 1px rgba(255,255,255,.75),
    inset 0 -1px 2px rgba(255,255,255,.35);
  filter: saturate(1.06);
}
.cv-scheme-swatch:hover::after {
  opacity: .95;
  transform: rotate(-10deg) scale(1.04);
}
.cv-scheme-swatch:focus-visible {
  outline: 2px solid #1c2331;
  outline-offset: 2px;
}
/* active: replace soft streak with frosted glass check badge — keeps 3D illusion */
.cv-scheme-swatch.is-active::after {
  width: 15px;
  height: 15px;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-radius: 999px;
  background-color: rgba(255,255,255,.96);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23131d31' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.6 6.05L4.95 8.45L9.45 3.7'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 22%, rgba(255,255,255,.95), rgba(255,255,255,.78) 48%, rgba(255,255,255,.96) 100%);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: 8px 8px, cover;
  backdrop-filter: blur(6px) saturate(160%);
  -webkit-backdrop-filter: blur(6px) saturate(160%);
  border: 1px solid rgba(255,255,255,.88);
  box-shadow:
    0 2px 6px rgba(0,0,0,.26),
    inset 0 1px 0 rgba(255,255,255,.95);
  opacity: 1;
  filter: none;
}

/* --- Appearance toggle inside Display (dark / light) — elegant pill --- */
.cv-tool-panel-mode{
  display:flex; align-items:center; justify-content:space-between;
  gap:.75rem;
  margin-top:.15rem;
  padding:.58rem .3rem .12rem;
  border-top:1px solid rgba(18,28,48,.07);
}
.cv-tool-panel-mode-label{
  font-size:.60rem; font-weight:700;
  letter-spacing:.13em; text-transform:uppercase;
  color:#7a8195; line-height:1; flex:none;
}
.cv-theme-mode-toggle{
  display:inline-flex; align-items:center; gap:.48rem;
  padding:.26rem .48rem .26rem .30rem;
  border:1px solid rgba(18,28,48,.10);
  background:rgba(255,255,255,.62);
  border-radius:999px;
  cursor:pointer;
  font:inherit; font-size:.74rem; font-weight:600; color:#334155;
  line-height:1; white-space:nowrap;
  transition:all .2s ease;
}
.cv-theme-mode-toggle:hover{ background:rgba(255,255,255,.82); border-color:rgba(18,28,48,.14); transform:translateY(-1px); box-shadow:0 3px 10px rgba(18,28,48,.08); }
.cv-theme-mode-toggle-track{
  position:relative; width:40px; height:22px;
  border-radius:999px; background:#e2e8f0; border:1px solid #cbd5e1;
  flex:none; transition:background .22s ease, border-color .22s ease;
}
.cv-theme-mode-toggle-thumb{
  position:absolute; top:50%; left:2px;
  width:16px; height:16px; border-radius:50%; background:#fff;
  box-shadow:0 2px 6px rgba(15,23,42,.18), 0 1px 2px rgba(15,23,42,.12);
  transform:translateY(-50%);
  display:flex; align-items:center; justify-content:center;
  transition:transform .28s cubic-bezier(.34,1.56,.64,1), background .22s ease;
}
.cv-theme-mode-toggle-icon{ position:absolute; font-size:.64rem; line-height:1; transition:opacity .18s ease, transform .18s ease; }
.cv-theme-mode-toggle-icon-sun{ opacity:1; transform:scale(1); }
.cv-theme-mode-toggle-icon-moon{ opacity:0; transform:scale(.7) rotate(-30deg); }
.cv-theme-mode-toggle-text{ font-size:.72rem; padding-right:.08rem; }
[data-theme-mode="dark"] .cv-theme-mode-toggle{ background:rgba(15,23,42,.62); border-color:rgba(255,255,255,.12); color:#cbd5e1; }
[data-theme-mode="dark"] .cv-theme-mode-toggle:hover{ background:rgba(30,41,59,.78); border-color:rgba(255,255,255,.16); }
[data-theme-mode="dark"] .cv-theme-mode-toggle-track{ background:#0f172a; border-color:#334155; }
[data-theme-mode="dark"] .cv-theme-mode-toggle-thumb{ background:#f1f5f9; transform:translateY(-50%) translateX(18px); }
[data-theme-mode="dark"] .cv-theme-mode-toggle-icon-sun{ opacity:0; transform:scale(.7) rotate(30deg); }
[data-theme-mode="dark"] .cv-theme-mode-toggle-icon-moon{ opacity:1; transform:scale(1) rotate(0); }

/* Close popovers when clicking elsewhere handled by native <details> blur is not automatic;
   app.js adds a small helper to close on outside click. */

@media (max-width: 700px) {
  .cv-toolbar { padding: 2rem .6rem 0; }
  .cv-toolbar-actions {
    border-radius: 18px;
    flex-wrap: wrap;
    justify-content: center;
  }
  .cv-tool-btn { min-width: 35px; padding: 0 .55rem; }
  .cv-toolbar-divider { height: 18px; }

  /* Smartphone: panel muncul tepat di tengah di bawah button Sort/Display.
     Desktop tetap right:0 (rata kanan), mobile di-override jadi center. */
  .cv-tool-panel {
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(100vw - 1.2rem);
    animation: cv-glass-in-mobile .16s ease-out;
  }
  .cv-tool-panel-form {
    min-width: min(230px, calc(100vw - 1.2rem));
  }
}

@keyframes cv-glass-in-mobile {
  from { opacity: 0; transform: translateX(-50%) translateY(-5px) scale(.98); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}

/* ---------------- Page shell ---------------- */
.cv-sheet {
  max-width: 1180px;
  margin: 1rem auto 4rem;
  padding: 0;
  display: flex;
  align-items: stretch;
}
.cv-sheet > .cv-sidebar { flex: 0 0 320px; width: 320px; }
.cv-sheet > .cv-content { flex: 1 1 auto; min-width: 0; }
@media (max-width: 860px) {
  .cv-sheet { flex-direction: column; }
  .cv-sheet > .cv-sidebar { flex: 0 0 auto; width: 100%; }
}

.cv-icon { width: 1.8em; height: 1.8em; vertical-align: -0.2em; }

/* ---------------- Entry list & entry card ---------------- */
.cv-entry-list {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}

/* Timeline visual (connecting line + dot per entry) is opt-in via
   .cv-entry-list-timeline -- only sections that are genuinely
   chronological in a meaningful way (Education, Experience,
   Organizational Experience) render it. Sections like Publications or
   Awards use the plain list above instead, since ordering there isn't
   really "a timeline" the reader benefits from seeing visually. */
.cv-entry-list-timeline {
  gap: 1.3rem;
  padding-left: 1.5rem;
}
/* A single continuous connecting line running through every dot. Entries
   hidden behind "Load more" don't affect this: display:none elements take
   up no space, so the line simply spans whatever is currently visible —
   and grows to include them the moment they're revealed. */
.cv-entry-list-timeline::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: #e8eaf0;
}
.cv-entry-list-timeline > .cv-entry { position: relative; }
.cv-entry-list-timeline > .cv-entry::before {
  content: "";
  position: absolute;
  left: -1.5rem;
  top: .5rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--cv-accent, #f4b400);
  box-shadow: 0 0 0 3px #fff;
}

.cv-entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
}
.cv-entry-title { margin: 0; font-size: 1rem; flex: 1 1 auto; min-width: 0; }
.cv-entry-subtitle { font-weight: 600; margin-top: .1rem; }
.cv-entry-meta { opacity: .85; }
.cv-entry-period { font-weight: 600; opacity: .75; font-size: .85em; flex: none; white-space: nowrap; padding-left: 1rem; }

.cv-show-details-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  background: transparent;
  border: 1.5px solid #d8dce4;
  color: #45506b;
  padding: .3rem .65rem;
  border-radius: 999px;
  font-size: .74rem;
  cursor: pointer;
  white-space: nowrap;
}
.cv-show-details-btn .cv-icon { width: 12px; height: 12px; transition: transform .15s ease; }
.cv-show-details-btn:hover { border-color: var(--cv-accent, #f4b400); color: #1c2331; }
.cv-show-details-btn.is-open .cv-icon { transform: rotate(180deg); }

.cv-highlights-panel { margin-top: .55rem; }
.cv-highlights { margin: 0; padding-left: 1.15rem; }
.cv-highlights li { margin: .2rem 0; }

.cv-entry-citation { margin-top: .35rem; line-height: 1.55; }
.cv-link-chips { margin-top: .45rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.cv-link-chip {
  font-size: .74rem;
  padding: .25rem .6rem;
  border-radius: 999px;
  background: #f1f2f6;
  color: #384057;
  text-decoration: none;
}
.cv-link-chip:hover { background: #e6e8ee; }

/* ---------------- Publication simple / full toggle ---------------- */
.cv-pub-simple { margin-bottom: .3rem; }
.cv-pub-venue {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .25rem;
  font-size: .85rem;
  color: #6b7488;
}
.cv-pub-sep { opacity: .5; }
.cv-pub-full { margin-bottom: .3rem; }

.cv-load-more-btn {
  display: block;
  margin: .7rem auto 0;
  background: transparent;
  border: 1.5px dashed #c7cddb;
  color: #45506b;
  padding: .4rem .85rem;
  border-radius: 999px;
  font-size: .8rem;
  cursor: pointer;
}
.cv-load-more-btn:hover { border-color: var(--cv-accent, #f4b400); color: #1c2331; }

.cv-more-detail-btn {
  margin-top: .55rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: transparent;
  border: 1.5px dashed #e0c877;
  color: #8a6d1f;
  padding: .32rem .7rem;
  border-radius: 999px;
  font-size: .74rem;
  cursor: pointer;
}
.cv-more-detail-btn .cv-icon { width: 12px; height: 12px; }
.cv-more-detail-btn:hover { background: #fbf6e7; }

.cv-detail-panel {
  margin-top: .5rem;
  padding: .75rem .9rem;
  background: #fbf6e7;
  border: 1px dashed #e7d489;
  border-radius: 12px;
  font-size: .85rem;
  color: #55502f;
}
.cv-detail-list { margin: 0; }
.cv-detail-list dt { font-weight: 700; margin-top: .5rem; }
.cv-detail-list dt:first-child { margin-top: 0; }
.cv-detail-list dd { margin: .1rem 0 0; }

.cv-photo-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 28px; height: 28px;
  /* Explicit centering: <button>'s built-in vertical alignment varies per
     browser and can leave the ‹ › glyph sitting visibly low. Flex removes
     that variance; the extra bottom padding then shrinks the content box
     so the centered glyph rides ~2px higher — an optical correction,
     because the angle-quote glyphs read as slightly low even when
     geometrically centered. */
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 6px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,.45);
  color: #fff;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.cv-photo-prev { left: -6px; }
.cv-photo-next { right: -6px; }
.cv-photo-nav:hover { background: rgba(0,0,0,.7); }

/* ==================== Front dark mode — professional elegant ==================== */
[data-theme-mode="dark"],
html[data-theme-mode="dark"]{
  color-scheme:dark;
  /* Gradient dipindah ke html agar area di atas toolbar (yang sebelumnya
     margin 2rem dan collapse di luar body) tetap punya warna sama.
     Sebelumnya html hanya #0b1220 flat, body yang punya gradient ->
     terlihat belang 2rem di atas toolbar saat dark mode. */
  background:
    radial-gradient(900px 520px at 85% -10%, rgba(244,180,0,.06), transparent 60%),
    radial-gradient(700px 420px at -10% 0%, rgba(56,189,248,.05), transparent 55%),
    #0b1220;
}
[data-theme-mode="dark"] body,
html[data-theme-mode="dark"] body{
  /* Body transparan agar gradient dari html terlihat utuh tanpa duplikasi
     offset. Ini membuat top padding toolbar menyatu natural dengan background. */
  background: transparent;
  color:#e2e8f0;
}
/* glass toolbar dark */
html[data-theme-mode="dark"] .cv-toolbar-actions{
  --glass-border: rgba(255,255,255,.10);
  --glass-shadow: rgba(0,0,0,.42);
  background: linear-gradient(135deg, rgba(30,41,59,.74), rgba(15,23,42,.62));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 8px 30px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.08);
}
html[data-theme-mode="dark"] .cv-toolbar-actions::before{
  background: linear-gradient(115deg, rgba(255,255,255,.08), transparent 35%, transparent 65%, rgba(255,255,255,.04));
}
html[data-theme-mode="dark"] .cv-tool-btn{ color:#cbd5e1; }
html[data-theme-mode="dark"] .cv-tool-btn:hover{ background:rgba(255,255,255,.08); color:#f1f5f9; box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 2px 8px rgba(0,0,0,.22); }
html[data-theme-mode="dark"] .cv-tool-popover[open] > summary{ background:rgba(255,255,255,.10); }
html[data-theme-mode="dark"] .cv-toolbar-divider{ background:rgba(255,255,255,.10); }
html[data-theme-mode="dark"] .cv-tool-panel{
  background: linear-gradient(145deg, rgba(30,41,59,.92), rgba(15,23,42,.78));
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 18px 45px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter: blur(26px) saturate(160%);
  -webkit-backdrop-filter: blur(26px) saturate(160%);
}
html[data-theme-mode="dark"] .cv-tool-panel-item{ color:#cbd5e1; }
html[data-theme-mode="dark"] .cv-tool-panel-item:hover{ background:rgba(255,255,255,.06); color:#f1f5f9; }
html[data-theme-mode="dark"] .cv-tool-panel-item.is-active{ background:rgba(255,255,255,.10); }
html[data-theme-mode="dark"] .cv-tool-panel-label{ color:#94a3b8; }
html[data-theme-mode="dark"] .cv-tool-panel-select{
  background:rgba(15,23,42,.6); border-color:rgba(255,255,255,.10); color:#e2e8f0;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.22);
}
html[data-theme-mode="dark"] .cv-tool-panel-select:focus{ border-color:rgba(244,180,0,.45); box-shadow:0 0 0 3px rgba(244,180,0,.16); }
html[data-theme-mode="dark"] .cv-tool-panel-colors{
  background: linear-gradient(180deg, rgba(30,41,59,.52), rgba(15,23,42,.32));
  border-color:rgba(255,255,255,.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 4px 18px rgba(0,0,0,.22);
}
html[data-theme-mode="dark"] .cv-tool-panel-colors-title{ color:#94a3b8; }
html[data-theme-mode="dark"] .cv-tool-panel-colors-title::before,
html[data-theme-mode="dark"] .cv-tool-panel-colors-title::after{ background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
html[data-theme-mode="dark"] .cv-tool-panel-mode{ border-top-color:rgba(255,255,255,.07); }
html[data-theme-mode="dark"] .cv-tool-panel-mode-label{ color:#94a3b8; }

/* generic sheet dark */
html[data-theme-mode="dark"] .cv-sheet{ box-shadow:0 30px 70px rgba(0,0,0,.55); }

/* per-theme dark — Sidebar Classic family (theme01/02) */
html[data-theme-mode="dark"][data-theme="theme01"] .cv-sheet,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-sheet{
  background:#1e293b;
}
html[data-theme-mode="dark"][data-theme="theme01"] .cv-content,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-content{
  background:#1e293b;
}
html[data-theme-mode="dark"][data-theme="theme01"] .cv-card-title,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-card-title{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-card-title::after,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-card-title::after{
  background: linear-gradient(to right, var(--cv-grad-start) 33px, #334155 35px);
}
html[data-theme-mode="dark"][data-theme="theme01"] .cv-card-hero .cv-card-body,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-card-hero .cv-card-body,
html[data-theme-mode="dark"][data-theme="theme01"] .cv-card-intro,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-card-intro{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry,
html[data-theme-mode="dark"][data-theme="theme01"] .cv-pub-venue,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-pub-venue,
html[data-theme-mode="dark"][data-theme="theme01"] .cv-highlights,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-highlights,
html[data-theme-mode="dark"][data-theme="theme01"] .cv-highlights-panel,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-highlights-panel{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry-title,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry-title{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry-subtitle,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry-subtitle{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry-meta,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry-meta,
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry-period,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry-period{ color:#94a3b8; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry-list-timeline::before,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry-list-timeline::before{ background:#334155; }
html[data-theme-mode="dark"][data-theme="theme01"] .cv-entry-list-timeline > .cv-entry::before,
html[data-theme-mode="dark"][data-theme="theme02"] .cv-entry-list-timeline > .cv-entry::before{ box-shadow:0 0 0 3px #1e293b; }
html[data-theme-mode="dark"][data-theme="theme02"] .cv-name{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme02"] .cv-name-first{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme02"] .cv-name-tagline{ color:#e2e8f0; }

/* theme03 dark — Dark Sidebar Classic (ex-theme04) */
html[data-theme-mode="dark"][data-theme="theme03"] .cv-sheet{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-sidebar{ background:#0f172a; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-sidebar-light{ background:#162032; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-content{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-name-header{ background:#162032; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-content-body{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-card-title,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-name{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-name-first{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-card-body,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-card-intro,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-entry,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-entry-meta,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-pub-venue,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-highlights,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-highlights-panel{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-entry-title,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-entry-subtitle{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-sidebar-light .cv-sidebar-heading{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-skill-name{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-skill-track{ background:#334155; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-tag-cloud li{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-contact-list li{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-contact-label{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-contact-txt a,
html[data-theme-mode="dark"][data-theme="theme03"] .cv-contact-txt > span:not(.cv-contact-label){ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme03"] .cv-social-icon{ background:#1e293b; border-color:#334155; color:#f1f5f9; }

/* theme04 dark — Light Sidebar Dots (ex-theme05) */
html[data-theme-mode="dark"][data-theme="theme04"] .cv-sheet{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-sidebar{ background:#162032; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-content{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-name-header{ background:transparent; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-content-body{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-name,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-card-title{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-name-first{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-name-tagline{ color:#e2e8f0; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-card-body,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-card-intro,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-entry,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-pub-venue,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-highlights,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-highlights-panel,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-entry-period{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-entry-title,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-entry-subtitle,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-entry-quote{ color:#e2e8f0; border-left-color:var(--cv-accent); }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-sidebar-heading{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-contact-list li{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-skill-name,
html[data-theme-mode="dark"][data-theme="theme04"] .cv-interest{ color:#e2e8f0; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-skill-dots i{ background:#334155; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-skill-dots i.is-filled{ background:var(--cv-accent); }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-social-icon{ background:#1e293b; border-color:#334155; color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme04"] .cv-contact-ic{ background:var(--cv-accent); color:var(--cv-accent-ink); }

/* theme05 dark — Minimal Mono (ex-theme06) */
html[data-theme-mode="dark"][data-theme="theme05"] .cv-sheet{ background:#1e293b; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-name{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-name-first{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-name-tagline,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-header-site{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-name-rule,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-header-row-rule,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-section-heading{ border-bottom-color:#334155; color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-hicon{ border-color:#475569; color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-about-body,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-contact-value,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-interest-list li,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-entry,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-card-body,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-pub-venue,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-highlights,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-highlights-panel{ color:#cbd5e1; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-contact-label,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-skill-name,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-entry-title,
html[data-theme-mode="dark"][data-theme="theme05"] .cv-entry-subtitle{ color:#f1f5f9; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-skill-dots i{ background:#0f172a; border-color:#475569; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-skill-dots i.is-filled{ background:#475569; border-color:#475569; }
html[data-theme-mode="dark"][data-theme="theme05"] .cv-interest-list li::before{ background:#475569; }

/* generic dark for detail/highlights/load-more — brighter for readability */
html[data-theme-mode="dark"] .cv-highlights-panel{ color:#cbd5e1; }
html[data-theme-mode="dark"] .cv-pub-venue{ color:#cbd5e1; }
html[data-theme-mode="dark"] .cv-detail-panel{ background:rgba(244,180,0,.10); border-color:rgba(244,180,0,.18); color:#fde68a; }
html[data-theme-mode="dark"] .cv-link-chip{ background:#0f172a; color:#94a3b8; border:1px solid #334155; }
html[data-theme-mode="dark"] .cv-link-chip:hover{ background:#1e293b; }
html[data-theme-mode="dark"] .cv-show-details-btn,
html[data-theme-mode="dark"] .cv-load-more-btn{ border-color:#334155; color:#94a3b8; }
html[data-theme-mode="dark"] .cv-show-details-btn:hover,
html[data-theme-mode="dark"] .cv-load-more-btn:hover{ border-color:var(--cv-accent); color:#f1f5f9; }

/* smooth transition */
html[data-theme-mode="dark"] .cv-sheet, html[data-theme-mode="dark"] .cv-content, html[data-theme-mode="dark"] .cv-card{
  transition: background-color .22s ease, color .22s ease, border-color .22s ease;
}
@media print{
  html[data-theme-mode="dark"],
  html[data-theme-mode="dark"] body{
    background:#fff !important; background-image:none !important; color:#1c2331 !important;
  }
  /* Paksa semua sheet/content kembali light saat print — mengalahkan semua selector dark */
  html[data-theme-mode="dark"] .cv-sheet,
  html[data-theme-mode="dark"][data-theme="theme01"] .cv-sheet,
  html[data-theme-mode="dark"][data-theme="theme02"] .cv-sheet,
  html[data-theme-mode="dark"][data-theme="theme03"] .cv-sheet,
  html[data-theme-mode="dark"][data-theme="theme04"] .cv-sheet,
  html[data-theme-mode="dark"][data-theme="theme05"] .cv-sheet{
    background:#fff !important; box-shadow:none !important;
  }
  html[data-theme-mode="dark"] .cv-content,
  html[data-theme-mode="dark"] .cv-content-body,
  html[data-theme-mode="dark"] .cv-name-header,
  html[data-theme-mode="dark"][data-theme="theme03"] .cv-sidebar,
  html[data-theme-mode="dark"][data-theme="theme04"] .cv-sidebar{
    background:#fff !important;
  }
  /* Kembalikan warna teks ke mode terang agar print tajam */
  html[data-theme-mode="dark"] .cv-card-title,
  html[data-theme-mode="dark"] .cv-entry-title,
  html[data-theme-mode="dark"] .cv-entry-subtitle,
  html[data-theme-mode="dark"] .cv-name,
  html[data-theme-mode="dark"] .cv-section-heading{
    color:#1c2331 !important;
  }
  html[data-theme-mode="dark"] .cv-entry,
  html[data-theme-mode="dark"] .cv-card-body,
  html[data-theme-mode="dark"] .cv-card-intro,
  html[data-theme-mode="dark"] .cv-entry-meta{
    color:#4b5468 !important;
  }
}