/* Shared theme mt.b1bnk.site: landing, /mt/, /accu/, login, admin. Vars override each app's own :root names. */
:root {
  /* Brand */
  --c1: #70E1F5;
  --c2: #FFD194;
  --c1-ink: #0B7285;  /* versi gelap c1 untuk teks di atas putih (kontras ≥ 4.5:1) */
  --c2-ink: #9C5A00;  /* versi gelap c2 untuk teks */
  --ink: #0B2530;     /* teks di atas gradasi */
  --grad: linear-gradient(135deg, #70E1F5 0%, #FFD194 100%);
  --grad-soft: linear-gradient(135deg, rgba(112, 225, 245, .16) 0%, rgba(255, 209, 148, .2) 100%);
  --grad-ink: linear-gradient(135deg, #0B7285 0%, #B86E0A 100%);
  --page-bg:
    radial-gradient(1100px 620px at 0% 0%, rgba(112, 225, 245, .24), transparent 62%),
    radial-gradient(1000px 620px at 100% 100%, rgba(255, 209, 148, .3), transparent 62%),
    #FBFCFD;
  --shadow: 0 1px 2px rgba(16, 35, 46, .04), 0 8px 28px rgba(16, 35, 46, .06);
  --hub-h: 56px;

  /* Surface */
  --bg: #F5F9FB;
  --card: #FFFFFF;
  --card-bg: #FFFFFF;
  --card2: #F5F9FB;
  --text: #16232E;
  --text-light: #5B6B78;
  --muted: #5B6B78;
  --border: #E3EAEF;
  --hover-row: rgba(112, 225, 245, .12);

  /* Nama var bawaan tiap app, dipetakan ke palet */
  --primary: #0B7285;
  --primary-light: #0B7285;
  --primary-dark: #0B2530;
  --accent: #E9A23B;
  --accent-light: #9C5A00;
  --success: #0F8A5F;
  --danger: #C53B3B;
  --warning: #9C5A00;
  --info: #0B7285;
  --purple: #9C5A00;

  --sidebar-bg: rgba(255, 255, 255, .82);
  --sidebar-text: #16232E;
  --sidebar-muted: #5B6B78;
  --sidebar-hover: #EEF7FA;
  --sidebar-accent: #0B7285;

  color-scheme: light;
}

body {
  background: var(--page-bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Segoe UI Variable Text', 'Segoe UI', system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(112, 225, 245, .35); }

.grad-text {
  background: var(--grad-ink);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ══ ICON (SVG sprite: /icons.svg) ══ */
.ico {
  width: 1em; height: 1em; flex-shrink: 0; vertical-align: -0.14em;
  fill: none; stroke: currentColor; stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.ico-tile {
  display: inline-grid; place-items: center; flex-shrink: 0;
  width: 2.25em; height: 2.25em; border-radius: .7em;
  background: var(--grad); color: var(--ink);
  box-shadow: 0 4px 14px rgba(112, 225, 245, .35);
}

/* ══ HUB NAV (sama persis di semua halaman) ══ */
.hub-nav {
  position: sticky; top: 0; z-index: 1000;
  height: var(--hub-h);
  display: flex; align-items: center; gap: 28px;
  padding: 0 24px;
  background: rgba(255, 255, 255, .78);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  font-size: 14px; line-height: 1;
}
.hub-nav::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px; background: var(--grad); opacity: .8;
}
.hub-brand {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 17px; font-weight: 700; letter-spacing: .2px; text-decoration: none; color: var(--text);
}
.hub-brand::before {
  content: ''; width: 22px; height: 22px; border-radius: 7px; background: var(--grad);
  box-shadow: 0 2px 8px rgba(112, 225, 245, .45);
}
.hub-tabs { display: flex; gap: 4px; }
.hub-tabs a {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 999px;
  color: var(--muted); text-decoration: none; font-weight: 600;
  transition: color .15s, background .15s;
}
.hub-tabs a:hover { color: var(--text); background: rgba(112, 225, 245, .14); }
.hub-tabs a[aria-current="page"] {
  background: var(--grad); color: var(--ink);
  box-shadow: 0 2px 10px rgba(112, 225, 245, .35);
}
.hub-user { margin-left: auto; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40vw; }
.hub-user + .hub-logout { margin-left: 0; }
.hub-logout {
  margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
  color: var(--muted); text-decoration: none; font-weight: 600;
  padding: 8px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--card);
}
.hub-logout:hover { color: var(--danger); border-color: rgba(197, 59, 59, .35); }
.hub-nav a:focus-visible { outline: 2px solid var(--c1-ink); outline-offset: 2px; }
@media (max-width: 640px) {
  .hub-nav { gap: 10px; padding: 0 12px; }
  .hub-brand { font-size: 0; gap: 0; }
  .hub-tabs a { padding: 8px 10px; }
  .hub-user { display: none; }
}