/* ==========================================================================
   Herbarium Digital — Tanamore
   Palette & type: App 1 (forest / gold / parchment, Fraunces + IBM Plex Mono + Inter)
   Layout & content: App 2 (topbar + tabs, dataset detail, code toggles)
   ========================================================================== */

/* ---------------------------------- Tokens ---------------------------------- */
:root{
  /* raw palette */
  --forest-950: #10201a;
  --forest-900: #16281f;
  --forest-800: #1f3a2c;
  --sage-600:   #5a7c62;
  --sage-300:   #a9c2ab;
  --parchment:      #f2ede2;
  --parchment-dim:  #e7e0d0;
  --gold:       #b98b3e;
  --gold-soft:  #d7ac66;
  --rust:       #a45a3c;

  /* semantic (light = default) */
  --bg:         var(--parchment);
  --bg-soft:    var(--parchment-dim);
  --surface:    #fffdf8;
  --border:     rgba(22,40,31,0.14);
  --text:       var(--forest-950);
  --text-soft:  var(--sage-600);
  --accent:     var(--gold);
  --accent-soft:var(--gold-soft);
  --on-accent:  var(--parchment);
  --shadow:     0 20px 50px -30px rgba(16,32,26,0.55);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;

  --font-display: 'Fraunces', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace;
}

[data-theme="dark"]{
  --bg:         var(--forest-950);
  --bg-soft:    var(--forest-900);
  --surface:    #1c3327;
  --border:     rgba(242,237,226,0.14);
  --text:       var(--parchment);
  --text-soft:  var(--sage-300);
  --accent:     var(--gold-soft);
  --accent-soft:var(--gold);
  --on-accent:  var(--forest-950);
  --shadow:     0 20px 50px -24px rgba(0,0,0,0.6);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-soft);
  color:var(--text);
  font-family:var(--font-body);
  transition:background .35s ease, color .35s ease;
  background-image:
    radial-gradient(circle at 15% 8%, rgba(90,124,98,0.08), transparent 40%),
    radial-gradient(circle at 90% 92%, rgba(185,139,62,0.08), transparent 45%);
}
::selection{ background:var(--gold-soft); color:var(--forest-950); }
a{ color:inherit; }

/* ---------------------------------- Shell & Sidebar ---------------------------------- */
.shell{ display:flex; min-height:100vh; }
.sidebar{
  width:278px; flex-shrink:0;
  background:linear-gradient(180deg, var(--forest-950), var(--forest-900) 60%, var(--forest-800));
  color:var(--parchment);
  display:flex; flex-direction:column;
  position:sticky; top:0; height:100vh;
  z-index:30;
}
.brand{ padding:28px 24px 18px; border-bottom:1px solid rgba(242,237,226,0.12); }
.brand .logo-row{ display:flex; align-items:center; gap:8px; margin-bottom:14px; }
.brand .logo-big{
  width:auto; max-width:56px; height:42px; flex-shrink:0; overflow:visible;
  background:none; border:none; border-radius:0;
  display:flex; align-items:center; justify-content:center;
}
.brand .logo-big img{ width:auto; height:100%; max-width:56px; object-fit:contain; }
.brand .logo-big .fallback{
  font-family:var(--font-display); font-style:italic; font-weight:600; color:var(--gold-soft); font-size:14px;
  width:38px; height:38px; border-radius:50%; background:rgba(242,237,226,0.08); border:1px solid rgba(242,237,226,0.18);
  align-items:center; justify-content:center;
}
.brand .logo-plus{ font-family:var(--font-mono); font-size:12px; color:rgba(242,237,226,0.4); }
.brand .eyebrow{
  font-family:var(--font-mono); font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-soft);
}
.brand h1{
  font-family:var(--font-display); font-weight:500; font-style:italic; font-size:21px; line-height:1.18; margin:6px 0 0;
  color:var(--parchment);
}
.brand p{ font-size:11.5px; line-height:1.5; color:var(--sage-300); margin:10px 0 0; }

nav.menu{ padding:16px 12px; flex:1; }
nav.menu .item{
  display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  padding:12px 12px; border:none; background:none; cursor:pointer;
  color:var(--sage-300); font-family:var(--font-body); font-size:13.5px; font-weight:500;
  border-radius:6px; position:relative; margin-bottom:2px;
  transition:background .18s ease, color .18s ease;
}
nav.menu .item .n{
  font-family:var(--font-mono); font-size:10.5px; color:rgba(242,237,226,0.35); width:16px; flex-shrink:0; opacity:1;
}
nav.menu .item:hover{ background:rgba(242,237,226,0.06); color:var(--parchment); }
nav.menu .item.active{ background:rgba(215,172,102,0.14); color:var(--parchment); }
nav.menu .item.active .n{ color:var(--gold-soft); }
nav.menu .item.active::before{
  content:""; position:absolute; left:-12px; top:8px; bottom:8px; width:3px;
  background:var(--gold-soft); border-radius:2px;
}

.sidebar-foot{
  padding:16px 20px 22px; border-top:1px solid rgba(242,237,226,0.12);
  display:flex; flex-direction:column; gap:12px;
}
.theme-toggle{
  display:flex; align-items:center; justify-content:center; gap:8px; width:100%;
  padding:10px 14px; border-radius:999px;
  background:rgba(242,237,226,0.07); border:1px solid rgba(242,237,226,0.16);
  cursor:pointer; font-family:var(--font-mono); font-size:11px; color:var(--parchment);
  transition:background .2s ease;
}
.theme-toggle:hover{ background:var(--gold-soft); color:var(--forest-950); }
.theme-toggle svg{ width:14px; height:14px; flex-shrink:0; }
.sidebar-version{
  font-family:var(--font-mono); font-size:10px; color:rgba(242,237,226,0.4); letter-spacing:.03em; text-align:center;
}

.menu-toggle{ display:none; }

/* ---------------------------------- Layout ---------------------------------- */
main{ flex:1; min-width:0; }
.page-wrap{ max-width:1180px; margin:0 auto; padding:44px 40px 90px; }
.page{ display:none; animation:rise .45s ease; }
.page.active{ display:block; }
@keyframes rise{ from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);} }

.page-head{ margin-bottom:32px; }
.page-head .eyebrow{
  font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent);
}
.page-head h2{
  font-family:var(--font-display); font-weight:500; font-size:34px; margin:8px 0 8px; color:var(--text);
}
.page-head p{ font-size:14px; color:var(--text-soft); max-width:680px; line-height:1.65; margin:0; }

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md);
  box-shadow:var(--shadow);
}

.section-divider{
  display:flex; align-items:center; gap:12px; margin:40px 0 20px;
}
.section-divider span{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-soft); white-space:nowrap;
}
.section-divider::after{ content:""; flex:1; height:1px; background:var(--border); }

/* ---------------------------------- Informasi Penelitian ---------------------------------- */
.collab-grid{ display:grid; grid-template-columns:1fr; gap:16px; margin-bottom:16px; }
.collab-card{ padding:28px 32px; display:flex; gap:24px; align-items:center; }
.collab-card .logo-box{
  width:auto; max-width:120px; height:100px; flex-shrink:0; overflow:visible;
  background:none; border:none;
  display:flex; align-items:center; justify-content:center;
}
.collab-card .logo-box img{ width:auto; height:100%; max-width:120px; object-fit:contain; }
.collab-card .logo-box .fallback{
  font-family:var(--font-display); font-weight:600; color:var(--gold-soft); font-size:28px;
  width:100px; height:100px; border-radius:50%; background:linear-gradient(145deg, var(--forest-800), var(--forest-950));
  border:1px solid var(--border); align-items:center; justify-content:center;
}
.collab-card .campus-role{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--accent);
  display:block; margin-bottom:6px;
}
.collab-card .campus-name{ font-family:var(--font-display); font-size:25px; font-style:italic; color:var(--text); margin:0; line-height:1.25; }
.collab-card .campus-sub{ font-size:11.5px; color:var(--text-soft); margin:0; line-height:1.4; }

.info-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:16px; }
.info-field{ padding:22px 24px; }
.info-field .label{
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); display:block; margin-bottom:8px;
}
.info-field .value{ font-size:16px; font-weight:600; margin:0 0 4px; color:var(--text); }
.info-field .sub{ font-size:12.5px; color:var(--text-soft); margin:0; }

.scheme-badge{
  display:inline-flex; align-items:center; gap:9px; margin-top:6px;
  padding:11px 20px; border-radius:999px; background:var(--forest-950); color:var(--parchment);
}
[data-theme="dark"] .scheme-badge{ background:var(--accent); color:var(--forest-950); }
.scheme-badge .dot{ width:7px; height:7px; border-radius:50%; background:var(--gold-soft); }
[data-theme="dark"] .scheme-badge .dot{ background:var(--forest-900); }
.scheme-badge span{ font-family:var(--font-mono); font-size:11.5px; }

.about-block{ padding:26px 28px; margin-top:18px; }
.about-block .label{ margin-bottom:12px; display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); }
.about-block p{ font-size:13.5px; line-height:1.75; color:var(--text); margin:0 0 12px; }
.about-block p:last-child{ margin:0; }

/* ---------------------------------- Dashboard ---------------------------------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.stat-card{ padding:22px 20px; }
.stat-card .tag{ font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em; color:var(--text-soft); }
.stat-card .big{ font-family:var(--font-display); font-size:30px; font-weight:500; margin:6px 0 2px; color:var(--text); }
.stat-card .caption{ font-size:11.5px; color:var(--text-soft); }
.stat-card.accent{ background:linear-gradient(150deg, var(--forest-950), var(--forest-800)); }
.stat-card.accent .tag, .stat-card.accent .caption{ color:var(--sage-300); }
.stat-card.accent .big{ color:var(--gold-soft); }

.model-summary-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.model-summary{ padding:24px; }
.m-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:12px; }
.m-head h3{ font-family:var(--font-display); font-size:18px; margin:0; color:var(--text); }
.m-head .pill{
  font-family:var(--font-mono); font-size:9.5px; padding:4px 10px; border-radius:999px;
  background:var(--bg-soft); color:var(--text-soft);
}
.acc-row{ display:flex; align-items:baseline; gap:8px; margin-bottom:12px; }
.acc-row .num{ font-family:var(--font-display); font-size:34px; font-weight:500; color:var(--accent); }
.acc-row .label{ font-size:11.5px; color:var(--text-soft); }
.bar-track{ height:7px; background:var(--bg-soft); border-radius:99px; overflow:hidden; margin-bottom:14px; }
.bar-fill{ height:100%; border-radius:99px; background:linear-gradient(90deg, var(--sage-600), var(--accent)); }
.model-summary ul{ list-style:none; padding:0; margin:0; font-size:12.5px; }
.model-summary li{ display:flex; justify-content:space-between; padding:6px 0; border-top:1px dashed var(--border); color:var(--text); }
.model-summary li:first-child{ border-top:none; }
.model-summary li b{ font-weight:600; }

.dataset-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.dataset-card{ padding:24px; }
.dataset-card h4{ font-family:var(--font-display); font-size:16.5px; margin:0 0 4px; color:var(--text); }
.dataset-card .src{ font-size:11px; color:var(--accent); font-family:var(--font-mono); margin-bottom:12px; }
.dataset-card p{ font-size:12.5px; line-height:1.7; color:var(--text-soft); margin:0 0 12px; }
.chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
.chip{
  font-size:11px; padding:5px 11px; border-radius:999px;
  background:var(--bg-soft); color:var(--text); border:1px solid var(--border);
}
.chip.chip-disease{ background:transparent; border-style:dashed; color:var(--text-soft); }
.dataset-sub{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--border); }
.dataset-sub .sub-label{
  display:block; font-family:var(--font-mono); font-size:9.5px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); margin-bottom:8px;
}

/* ---------------------------------- Preprocessing ---------------------------------- */
.pipeline{ display:flex; gap:0; flex-wrap:wrap; }
.pipe-step{ flex:1; min-width:150px; padding:20px 16px; }
.pipe-step .idx{ font-family:var(--font-mono); font-size:11px; color:var(--accent); margin-bottom:6px; }
.pipe-step h4{ font-family:var(--font-display); font-size:15.5px; margin:0 0 6px; color:var(--text); }
.pipe-step p{ font-size:11.5px; line-height:1.6; color:var(--text-soft); margin:0; }
.pipe-arrow{ width:30px; flex-shrink:0; display:flex; align-items:center; justify-content:center; color:var(--sage-300); }

.pp-model-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.pp-model{ padding:24px 26px; }
.pp-model h4{ font-family:var(--font-display); font-size:16.5px; margin:0 0 3px; color:var(--text); }
.pp-model .sub{ font-size:11.5px; color:var(--text-soft); margin:0 0 14px; }
.pp-model ol{ margin:0; padding-left:18px; font-size:12.5px; line-height:2; color:var(--text); }
.pp-model ol li::marker{ color:var(--accent); font-family:var(--font-mono); font-size:11px; }
.pp-model .split-row{ display:flex; gap:8px; margin-top:14px; }
.split-chip{ flex:1; text-align:center; padding:10px 6px; border-radius:var(--radius-sm); background:var(--bg-soft); }
.split-chip .v{ font-family:var(--font-display); font-weight:500; font-size:15px; color:var(--accent); }
.split-chip .l{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--text-soft); }

/* Balancing note */
.balance-note{ padding:24px 26px; margin-top:14px; }
.balance-note h4{ font-family:var(--font-display); font-size:16.5px; margin:0 0 8px; color:var(--text); }
.balance-note p{ font-size:12.5px; line-height:1.75; color:var(--text-soft); margin:0 0 10px; }
.balance-note ul{ margin:0; padding-left:18px; font-size:12.5px; line-height:1.95; color:var(--text); }
.balance-note ul li::marker{ color:var(--accent); font-family:var(--font-mono); font-size:11px; }
.balance-note .target-chip{
  display:inline-flex; align-items:center; gap:8px; margin:10px 0 14px;
  padding:8px 16px; border-radius:999px; background:var(--forest-950); color:var(--parchment);
  font-family:var(--font-mono); font-size:11.5px;
}
[data-theme="dark"] .balance-note .target-chip{ background:var(--accent); color:var(--forest-950); }

/* Distribution / balancing image cards */
.dist-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:14px; }
.dist-card{ padding:22px; }
.dist-card .dist-label{
  display:block; font-family:var(--font-mono); font-size:10px; text-transform:uppercase; letter-spacing:.08em;
  color:var(--accent); margin-bottom:10px;
}
.dist-card img{ width:100%; border-radius:8px; border:1px solid var(--border); display:block; background:#fff; }

/* ---------------------------------- Model ---------------------------------- */
.model-detail{ padding:28px 30px; margin-bottom:20px; }
.m-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px; flex-wrap:wrap; margin-bottom:18px; }
.model-detail h3{ font-family:var(--font-display); font-size:22px; margin:0 0 5px; color:var(--text); }
.model-detail .task{ font-size:12.5px; color:var(--text-soft); }
.arch-tag{
  font-family:var(--font-mono); font-size:11px; padding:8px 15px; border-radius:6px;
  background:var(--forest-950); color:var(--gold-soft); white-space:nowrap;
}
[data-theme="dark"] .arch-tag{ background:var(--accent); color:var(--forest-950); }
.spec-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:18px 0; }
.spec{ padding:13px 15px; background:var(--bg-soft); border-radius:var(--radius-sm); }
.spec .k{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; letter-spacing:.05em; color:var(--text-soft); }
.spec .v{ font-size:13.5px; font-weight:600; margin-top:4px; color:var(--text); }

.arch-flow{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:16px 0; padding-top:16px; border-top:1px dashed var(--border); }
.arch-flow .node{ font-family:var(--font-mono); font-size:10.5px; padding:6px 12px; border-radius:6px; background:var(--surface); border:1px solid var(--border); color:var(--text); }
.arch-flow .sep{ color:var(--text-soft); font-size:12px; }

.code-toggle{
  display:inline-flex; align-items:center; gap:7px; margin-top:6px;
  font-family:var(--font-mono); font-size:11px; color:var(--accent);
  background:none; border:1px solid var(--border); border-radius:999px; padding:7px 14px; cursor:pointer;
}
.code-toggle:hover{ background:var(--bg-soft); }
pre.code-block{
  display:none; margin-top:12px; padding:18px 20px; border-radius:var(--radius-sm);
  background:var(--forest-950); color:#dff5e1; overflow-x:auto;
  font-family:var(--font-mono); font-size:11.5px; line-height:1.7;
}
pre.code-block.open{ display:block; }
pre.code-block .cm{ color:#7fae86; }
pre.code-block .kw{ color:#a5d6a7; }
pre.code-block .fn{ color:#ffd699; }
pre.code-block .st{ color:#c9e8cb; }

/* ---------------------------------- Akurasi ---------------------------------- */
.acc-hero-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.acc-card{ padding:24px; }
.acc-card .m-title{ display:flex; align-items:center; gap:8px; margin-bottom:3px; }
.acc-card .dotcolor{ width:9px; height:9px; border-radius:50%; }
.acc-card h4{ font-family:var(--font-display); font-size:16.5px; margin:0; color:var(--text); }
.acc-card .desc{ font-size:11px; color:var(--text-soft); margin:2px 0 12px 17px; }
.acc-card img{ width:100%; border-radius:8px; border:1px solid var(--border); display:block; background:#fff; }
.acc-card .metrics{ display:flex; gap:16px; margin-top:14px; flex-wrap:wrap; }
.acc-card .metrics .mv{ font-family:var(--font-display); font-size:19px; font-weight:500; color:var(--accent); }
.acc-card .metrics .ml{ font-family:var(--font-mono); font-size:9px; text-transform:uppercase; color:var(--text-soft); }

/* Confusion matrix: image + per-class table */
.cf-wrap{ padding:26px; margin-top:14px; }
.cf-wrap .cf-head{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:14px; flex-wrap:wrap; gap:8px; }
.cf-wrap h4{ font-family:var(--font-display); font-size:17px; margin:0; color:var(--text); }
.cf-wrap .cf-count{ font-family:var(--font-mono); font-size:10.5px; color:var(--text-soft); }
.cf-wrap img{ width:100%; border-radius:8px; border:1px solid var(--border); display:block; background:#fff; margin-bottom:18px; }
.cf-table-scroll{ overflow-x:auto; border:1px solid var(--border); border-radius:var(--radius-sm); max-height:520px; overflow-y:auto; }
table.cf-table{ width:100%; border-collapse:collapse; font-size:11.5px; min-width:520px; }
table.cf-table thead th{
  position:sticky; top:0; z-index:1;
  font-family:var(--font-mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--on-accent); text-align:left; padding:10px 12px; background:var(--forest-950);
  white-space:nowrap;
}
[data-theme="dark"] table.cf-table thead th{ background:var(--accent); color:var(--forest-950); }
table.cf-table td{ padding:7px 12px; border-bottom:1px dashed var(--border); color:var(--text); white-space:nowrap; }
table.cf-table tbody tr:nth-child(odd){ background:var(--bg-soft); }
table.cf-table tbody tr:hover td{ background:rgba(185,139,62,0.12); }
table.cf-table td.num{ font-family:var(--font-mono); font-size:11px; }
table.cf-table td.cls-name{ white-space:normal; min-width:220px; }

.conclusion{
  margin-top:20px; padding:26px 30px; border-radius:var(--radius-md); color:var(--parchment);
  background:linear-gradient(150deg, var(--forest-950), var(--forest-800));
}
.conclusion .eyebrow{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-soft); }
.conclusion p{ font-size:13px; line-height:1.75; color:rgba(242,237,226,0.9); margin:10px 0 0; max-width:820px; }

/* ---------------------------------- Responsive ---------------------------------- */
@media (max-width: 880px){
  .shell{ flex-direction:column; }
  .sidebar{ position:relative; height:auto; width:100%; }
  nav.menu{ display:none; }
  nav.menu.open{ display:block; }
  .menu-toggle{
    display:flex; margin:0 24px 16px; padding:10px 14px;
    background:rgba(242,237,226,0.08); border:1px solid rgba(242,237,226,0.15); border-radius:6px;
    color:var(--parchment); font-family:var(--font-mono); font-size:11px;
    align-items:center; justify-content:space-between; cursor:pointer;
  }
  .page-wrap{ padding:30px 18px 70px; }
  .collab-grid, .info-grid, .model-summary-grid, .dataset-grid, .pp-model-grid, .acc-hero-grid, .dist-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .pipeline{ flex-direction:column; }
  .pipe-arrow{ transform:rotate(90deg); width:100%; padding:2px 0; }
  .spec-grid{ grid-template-columns:1fr 1fr; }
}
@media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } }