/* ============================================================
   BIMA APP — Sovereign design system (dark forest + gold)
   Tokens from the Stitch exports (DESIGN.md). Rupiah + BIMA.
   ============================================================ */

:root {
	--bima-surface: #04170f;
	--bima-surface-lowest: #01110a;
	--bima-surface-low: #0c1f17;
	--bima-surface-mid: #10231b;
	--bima-surface-high: #1b2e25;
	--bima-surface-highest: #26392f;
	--bima-on-surface: #d1e8da;
	--bima-on-variant: #d1c5af;
	--bima-outline: #9a907c;
	--bima-outline-dim: #4e4635;
	--bima-primary: #ffd56d;
	--bima-primary-deep: #e5b842;
	--bima-on-primary: #3e2e00;
	--bima-secondary: #4edea3;
	--bima-secondary-deep: #00a572;
	--bima-on-secondary: #003824;
	--bima-border: #1e382b;
	--bima-radius: 12px;
	--bima-radius-lg: 16px;
	--bima-radius-xl: 24px;
}

/* ---- Full-screen app shell (pages without theme chrome) ---- */
body.bima-app-shell {
	background: var(--bima-surface);
	margin: 0;
	padding: 0;
	-webkit-font-smoothing: antialiased;
}
body.bima-app-shell #page,
body.bima-app-shell .wp-site-blocks { min-height: 0; }

/* ---- Scope: BIMA area/join pages ---- */
.bima-main, .bima-join {
	font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
	background: radial-gradient(ellipse at 50% -20%, rgba(16,185,129,.12), transparent 70%), var(--bima-surface);
	color: var(--bima-on-surface);
	min-height: 100vh;
	padding: 88px 16px 120px;
	max-width: 560px;
	margin: 0 auto;
}
.bima-join { padding-top: 24px; }
.bima-stack { display: flex; flex-direction: column; gap: 16px; }

/* ---- Typography ---- */
.bima-h1 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 4px; }
.bima-h2 { font-size: 22px; font-weight: 700; margin: 0; }
.bima-eyebrow {
	font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
	color: var(--bima-outline); display: block;
}
.bima-metric { font-size: 32px; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.bima-metric-md { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bima-muted { color: var(--bima-outline); font-size: 12px; }
.bima-feed-title { font-weight: 700; font-size: 14px; }
.text-primary { color: var(--bima-primary); }
.text-secondary { color: var(--bima-secondary); }
.font-bold { font-weight: 800; }
.mt-sm { margin-top: 8px; }
.ms {
	font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
	display: inline-block; line-height: 1; vertical-align: middle; font-size: 18px;
	font-variation-settings: 'FILL' 1;
}

/* ---- Cards ---- */
.bima-card {
	background: linear-gradient(180deg, rgba(15,35,27,.9), rgba(18,21,20,.95));
	border: 1px solid var(--bima-border);
	border-radius: var(--bima-radius-lg);
	padding: 16px;
	box-shadow: 0 8px 32px -8px rgba(0,0,0,.6);
	position: relative;
	overflow: hidden;
}
.bima-card::before {
	content: ''; position: absolute; top: 0; left: 16px; right: 16px; height: 1px;
	background: linear-gradient(90deg, transparent, rgba(243,202,101,.4), transparent);
}
.bima-card-label {
	font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
	color: var(--bima-on-variant); margin-bottom: 6px;
}
.bima-card-gold { border-color: rgba(229,184,66,.4); box-shadow: 0 0 24px -4px rgba(229,184,66,.25), 0 8px 32px -8px rgba(0,0,0,.6); }
.bima-card-alert { display: flex; gap: 12px; align-items: flex-start; }

/* ---- Buttons ---- */
.bima-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
	border-radius: 10px; padding: 10px 16px; font-size: 12px;
	border: 1px solid transparent; cursor: pointer; text-decoration: none;
	transition: transform .12s ease, filter .12s ease;
}
.bima-btn:active { transform: scale(.97); }
.bima-btn-gold {
	background: linear-gradient(135deg, #f3ca65, #e5b842);
	color: var(--bima-on-primary); border-color: #f3ca65;
	box-shadow: 0 4px 20px rgba(229,184,66,.3);
}
.bima-btn-gold:disabled { opacity: .4; cursor: not-allowed; box-shadow: none; }
.bima-btn-glass { background: rgba(15,35,27,.6); border-color: var(--bima-border); color: var(--bima-on-surface); }
.bima-btn-glass:hover { border-color: rgba(229,184,66,.5); }
.bima-btn-sm { padding: 6px 12px; font-size: 10px; }
.bima-btn-lg { width: 100%; padding: 14px; font-size: 13px; }

/* ---- Chips / badges ---- */
.bima-chip {
	display: inline-flex; align-items: center; gap: 4px;
	font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px;
	background: var(--bima-surface-highest); color: var(--bima-on-surface);
}
.bima-chip-green { background: rgba(16,185,129,.12); color: var(--bima-secondary); }
.bima-chip-gold { background: rgba(229,184,66,.12); color: var(--bima-primary); border: 1px solid rgba(229,184,66,.4); }
.bima-badge { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--bima-primary); }
.bima-badge-diamond { color: #e0f2fe; text-shadow: 0 0 12px rgba(224,242,254,.4); }
.bima-badge-muted { color: var(--bima-outline); }
.bima-tag {
	font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 4px;
	background: rgba(1,17,10,.8); color: var(--bima-primary);
}

/* ---- Topbar ---- */
.bima-topbar {
	position: fixed; top: 0; left: 0; right: 0; z-index: 50;
	background: rgba(4,23,15,.85); backdrop-filter: blur(16px);
	border-bottom: 1px solid rgba(30,56,43,.6);
}
.bima-topbar-inner {
	max-width: 560px; margin: 0 auto; height: 64px;
	display: flex; align-items: center; justify-content: space-between; padding: 0 16px;
}
.bima-topbar-id { display: flex; align-items: center; gap: 10px; }
.bima-node-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bima-primary); animation: bima-ping 1.8s infinite; }
.bima-node-name { font-size: 14px; font-weight: 700; }
.bima-node-rank { font-size: 10px; }
.bima-topbar-title { font-size: 14px; font-weight: 700; }
@keyframes bima-ping { 0% { box-shadow: 0 0 0 0 rgba(255,213,109,.4); } 70% { box-shadow: 0 0 0 8px rgba(255,213,109,0); } 100% { box-shadow: 0 0 0 0 rgba(255,213,109,0); } }

/* ---- Bottom nav ---- */
.bima-nav {
	position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
	background: rgba(1,17,10,.92); backdrop-filter: blur(16px);
	border-top: 1px solid rgba(30,56,43,.6);
}
.bima-nav { display: flex; justify-content: space-around; padding: 4px 8px 10px; }
.bima-nav-item {
	display: flex; flex-direction: column; align-items: center; gap: 2px;
	font-size: 10px; font-weight: 600; color: var(--bima-on-variant);
	padding: 8px 10px; text-decoration: none; border-radius: 12px;
	min-width: 60px;
}
.bima-nav-item .ms { font-size: 22px; }
.bima-nav-item.is-active { color: var(--bima-primary); font-weight: 800; text-shadow: 0 0 12px rgba(255,213,109,.4); }

/* ---- KPI boxes ---- */
.bima-kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.bima-kpi-box {
	background: var(--bima-surface-high); border: 1px solid var(--bima-border);
	border-radius: 10px; padding: 10px; display: flex; flex-direction: column; gap: 4px;
}
.bima-kpi-val { font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; }
.bima-kpi-val em { font-style: normal; font-size: 10px; font-weight: 400; color: var(--bima-outline); }

/* ---- Dual columns ---- */
.bima-dual { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.bima-dual > div {
	background: var(--bima-surface-lowest); border-radius: 10px; padding: 12px;
	display: flex; flex-direction: column; gap: 4px;
}
.bima-leg-label { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }

/* ---- Bars ---- */
.bima-bar { height: 8px; border-radius: 999px; background: var(--bima-surface-lowest); overflow: hidden; margin-top: 8px; }
.bima-bar-fill { height: 100%; border-radius: 999px; background: var(--bima-surface-highest); }
.bima-bar-gold { background: linear-gradient(90deg, var(--bima-secondary-deep), var(--bima-primary)); }
.bima-bar-green { background: linear-gradient(90deg, #059669, var(--bima-secondary)); }
.bima-bar-gradient { background: linear-gradient(90deg, var(--bima-secondary), var(--bima-primary)); }

/* ---- Rows ---- */
.bima-row-between { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }

/* ---- Section titles ---- */
.bima-section-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.bima-section-title h3 { font-size: 16px; font-weight: 700; margin: 0; display: flex; align-items: center; gap: 6px; }
.bima-section-title .ms { color: var(--bima-primary); }
.bima-section-title-left { display: flex; align-items: center; gap: 8px; }
.bima-pulse-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--bima-primary); animation: bima-ping 1.8s infinite; }

/* ---- Feed ---- */
.bima-feed-item {
	display: flex; align-items: flex-start; gap: 12px;
	background: var(--bima-surface-high); border: 1px solid var(--bima-border);
	border-radius: var(--bima-radius); padding: 12px;
}
.bima-feed-item .ms { font-size: 20px; margin-top: 2px; }
.bima-feed-item > div:nth-child(2) { flex: 1; min-width: 0; }
.bima-feed-amount { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- Pending cards ---- */
.bima-pending { display: flex; flex-direction: column; gap: 8px; }

/* ---- Segmented control ---- */
.bima-seg {
	display: flex; gap: 4px; background: var(--bima-surface-lowest);
	border-radius: 12px; padding: 4px; border: 1px solid var(--bima-border);
}
.bima-seg a {
	flex: 1; text-align: center; padding: 8px; border-radius: 8px;
	font-size: 12px; font-weight: 700; color: var(--bima-on-variant); text-decoration: none;
	display: flex; align-items: center; justify-content: center; gap: 6px;
}
.bima-seg a.is-active { background: var(--bima-surface-high); color: var(--bima-primary); box-shadow: 0 2px 12px rgba(255,213,109,.15); }

/* ---- Tree ---- */
.bima-tree-scroll { overflow-x: auto; padding: 8px 0; }
.bima-tree { min-width: 520px; display: flex; flex-direction: column; align-items: center; }
.bima-tnode {
	width: 240px; background: linear-gradient(180deg, var(--bima-surface-high), var(--bima-surface-mid));
	border: 1px solid var(--bima-border); border-radius: 12px; padding: 10px;
	box-shadow: 0 8px 32px rgba(0,0,0,.6); position: relative;
}
.bima-tnode.is-root { border-color: rgba(229,184,66,.5); }
.bima-tnode.is-root::before {
	content: ''; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
	width: 128px; height: 2px; background: linear-gradient(90deg, transparent, var(--bima-primary), transparent);
}
.bima-tnode-head { display: flex; align-items: center; gap: 8px; }
.bima-tnode-head > div { flex: 1; min-width: 0; }
.bima-tnode-name { font-size: 13px; font-weight: 700; }
.bima-tnode-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin-top: 8px; font-size: 11px; color: var(--bima-on-variant); }
.bima-tbranch { display: flex; gap: 24px; width: 100%; justify-content: center; }
.bima-tcol { display: flex; flex-direction: column; align-items: center; flex: 1; max-width: 320px; }
.bima-tspacer { width: 2px; height: 20px; background: var(--bima-surface-variant, #26392f); }
.bima-tempty {
	margin-top: 20px; font-size: 11px; color: var(--bima-outline);
	border: 1px dashed var(--bima-border); border-radius: 8px; padding: 6px 10px;
	display: flex; align-items: center; gap: 4px;
}

/* ---- Matahari ---- */
.bima-matahari { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.bima-matahari-item {
	display: flex; align-items: center; gap: 8px;
	background: var(--bima-surface-high); border: 1px solid var(--bima-border);
	border-radius: 8px; padding: 8px 10px; font-size: 13px;
}
.bima-gen { font-size: 9px; font-weight: 800; color: var(--bima-secondary); letter-spacing: .1em; }

/* ---- Ladder ---- */
.bima-ladder { position: relative; display: flex; flex-direction: column; gap: 12px; padding-left: 8px; }
.bima-ladder::before {
	content: ''; position: absolute; left: 23px; top: 24px; bottom: 24px; width: 2px;
	background: var(--bima-surface-highest);
}
.bima-ladder-item { display: flex; gap: 12px; align-items: flex-start; position: relative; }
.bima-ladder-node {
	width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; margin-top: 8px;
	background: var(--bima-surface-low); color: var(--bima-on-variant);
	display: flex; align-items: center; justify-content: center; z-index: 1;
	border: 1px solid var(--bima-border);
}
.bima-ladder-item.is-claimed .bima-ladder-node { background: var(--bima-secondary-deep); color: var(--bima-on-secondary); }
.bima-ladder-item.is-claimable .bima-ladder-node {
	background: var(--bima-primary); color: var(--bima-on-primary);
	box-shadow: 0 0 16px rgba(255,213,109,.8); animation: bima-ping 1.6s infinite;
}
.bima-ladder-item .bima-card { flex: 1; }

/* ---- Join page ---- */
.bima-join-head { margin: 20px 0 8px; }
.bima-join-done {
	display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
	background: var(--bima-surface-high); border: 1px solid var(--bima-border);
	border-radius: var(--bima-radius-lg); padding: 16px;
}
.bima-join-done .ms { font-size: 24px; }
.bima-join-tabs { display: flex; flex-direction: column; gap: 8px; margin: 12px 0; }
.bima-join-tab {
	display: flex; align-items: center; gap: 10px; padding: 12px;
	border-radius: var(--bima-radius); border: 1px solid var(--bima-border);
	background: var(--bima-surface-low); cursor: pointer; position: relative;
}
.bima-join-tab.is-active { background: var(--bima-surface-high); box-shadow: 0 0 20px rgba(255,213,109,.15); border-color: rgba(229,184,66,.4); }
.bima-join-tab .ms { color: var(--bima-outline); }
.bima-join-tab.is-active .ms { color: var(--bima-primary); }
.bima-join-tab > div:nth-child(2) { flex: 1; min-width: 0; }
.bima-join-tab-right { text-align: right; display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.bima-bundle { display: flex; flex-direction: column; gap: 10px; }
.bima-bundle-price { text-align: right; display: flex; flex-direction: column; }
.bima-stepper { display: flex; align-items: center; justify-content: space-between; background: var(--bima-surface-low); border-radius: 8px; padding: 6px 10px; }
.bima-step-btn {
	width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
	background: var(--bima-surface-highest); color: var(--bima-primary);
	display: flex; align-items: center; justify-content: center;
}
.bima-step-plus { background: var(--bima-primary); color: var(--bima-on-primary); box-shadow: 0 2px 10px rgba(255,213,109,.3); }
.bima-step-btn:disabled { opacity: .35; cursor: not-allowed; }
.bima-step-val { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bima-primary); min-width: 28px; text-align: center; }
.bima-bundle-sub { text-align: right; }
#bima-summary-pills { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.bima-summary-pill {
	font-size: 11px; font-weight: 600; padding: 5px 10px; border-radius: 8px;
	background: var(--bima-surface-low); display: inline-flex; align-items: center; gap: 6px;
}
.bima-summary-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--bima-primary); display: inline-block; }
.bima-summary-pill i.green { background: var(--bima-secondary); }
.bima-join-sticky {
	position: sticky; bottom: 16px; z-index: 40; margin-top: 24px;
	background: var(--bima-surface-high); border: 1px solid var(--bima-border);
	border-radius: var(--bima-radius-lg); padding: 14px; display: flex; flex-direction: column; gap: 10px;
	box-shadow: 0 -4px 24px rgba(0,0,0,.8);
}

/* ---- List ---- */
.bima-list { margin: 8px 0 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.6; color: var(--bima-on-variant); }
.bima-list li { margin-bottom: 4px; }
.bima-list strong { color: var(--bima-on-surface); }

/* ---- Ref bar ---- */
.bima-refbar { display: flex; align-items: center; gap: 10px; }
.bima-ref-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; color: var(--bima-on-variant); }

/* ---- Toast ---- */
.bima-toast {
	position: fixed; bottom: 96px; left: 16px; right: 16px; z-index: 100;
	max-width: 528px; margin: 0 auto;
	background: var(--bima-surface-highest); border: 1px solid var(--bima-border);
	border-radius: var(--bima-radius); padding: 14px 16px; font-size: 13px; font-weight: 700;
	transform: translateY(32px); opacity: 0; pointer-events: none; transition: all .3s ease;
	box-shadow: 0 8px 32px rgba(0,0,0,.7);
}
.bima-toast.is-show { transform: translateY(0); opacity: 1; pointer-events: auto; }

/* ---- Responsive ---- */
@media (max-width: 360px) {
	.bima-main, .bima-join { padding-left: 12px; padding-right: 12px; }
}
@media (min-width: 720px) {
	.bima-kpis { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Payout forms ---- */
.bima-payout-form {
	display: flex; flex-direction: column; gap: 8px; margin-top: 14px;
	padding: 12px; border-radius: 10px; background: var(--bima-surface-lowest);
	border: 1px solid var(--bima-border);
}
.bima-payout-form input {
	background: var(--bima-surface-low); border: 1px solid var(--bima-border);
	color: var(--bima-on-surface); border-radius: 8px; padding: 10px 12px;
	font-size: 14px; min-height: 44px;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.bima-payout-form input:focus {
	border-color: var(--bima-primary);
	box-shadow: 0 0 0 3px rgba(229,184,66,.15);
	outline: none;
}

/* ============================================================
   Motion — purposeful, 150-300ms, transform/opacity only.
   ============================================================ */
.bima-stack > * { animation: bima-rise .3s cubic-bezier(.2,.8,.2,1) both; }
.bima-stack > *:nth-child(1) { animation-delay: .02s; }
.bima-stack > *:nth-child(2) { animation-delay: .05s; }
.bima-stack > *:nth-child(3) { animation-delay: .08s; }
.bima-stack > *:nth-child(4) { animation-delay: .11s; }
.bima-stack > *:nth-child(5) { animation-delay: .14s; }
.bima-stack > *:nth-child(6) { animation-delay: .17s; }
@keyframes bima-rise {
	from { opacity: 0; transform: translateY(8px); }
	to   { opacity: 1; transform: none; }
}

.bima-card { transition: transform .18s cubic-bezier(.2,.8,.2,1), border-color .18s cubic-bezier(.2,.8,.2,1); }
.bima-card:hover { border-color: rgba(229,184,66,.28); }

.bima-ladder-item.is-claimable .bima-card {
	animation: bima-glow 1.8s ease-in-out infinite;
}
@keyframes bima-glow {
	0%, 100% { box-shadow: 0 0 0 0 rgba(255,213,109,.0); }
	50%      { box-shadow: 0 0 24px -2px rgba(255,213,109,.35); }
}

.bima-nav-item { transition: color .18s ease, transform .18s ease; }
.bima-nav-item:active { transform: scale(.94); }

@media (prefers-reduced-motion: reduce) {
	.bima-stack > *, .bima-card, .bima-ladder-item.is-claimable .bima-card {
		animation: none !important; transition: none !important;
	}
}