/* ======================================================================================
   Sync365 v5: tab Rubrik (peta, misi, kad belajar) dan avatar Akaun pada kepala halaman (telefon).
   Warna petak ialah SATU rona (teal) dari cair ke pekat = kekuatan; tiada warna tambahan. Setiap petak ada label teks dan jadual alternatif.
   ====================================================================================== */
.v-av-top { position: relative; flex: none; align-self: center; text-decoration: none; }
.v-av .dot { position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--warn); color: #231700; font: 600 11px/18px var(--f-ui); font-style: normal; text-align: center; }
@media (min-width: 900px) { .v-av-top { display: none; } }

/* ---- ikon rubrik: tiga bar naik bergilir ---- */
:is(:is(a, button, summary, .v-row, .v-addrow, .v-chip, .v-linkrow, .act-row, .v-dim-h):is(:hover, :active), .v-shell[data-enter] [aria-current="page"]) svg.i[data-i="rubrik"] path:nth-child(n+2) { transform-origin: 50% 100%; animation: ic-bars .55s var(--ease-out) both; }
:is(:is(a, button, summary, .v-row, .v-addrow, .v-chip, .v-linkrow, .act-row, .v-dim-h):is(:hover, :active), .v-shell[data-enter] [aria-current="page"]) svg.i[data-i="rubrik"] path:nth-child(3) { animation-delay: .07s; }
:is(:is(a, button, summary, .v-row, .v-addrow, .v-chip, .v-linkrow, .act-row, .v-dim-h):is(:hover, :active), .v-shell[data-enter] [aria-current="page"]) svg.i[data-i="rubrik"] path:nth-child(4) { animation-delay: .14s; }
@keyframes ic-bars { from { transform: scaleY(.35); } 60% { transform: scaleY(1.08); } }

/* ---- hero peta ---- */
.rb-hero { padding: 20px 18px 16px; border-radius: 26px; background: var(--hero-bg); color: var(--hero-ink); position: relative; overflow: hidden; box-shadow: 0 24px 50px -28px rgba(13, 14, 11, .55); }
.rb-hero::before { content: ""; position: absolute; right: -80px; top: -110px; width: 280px; height: 280px; border-radius: 50%; background: radial-gradient(closest-side, rgba(44, 240, 201, .2), transparent); pointer-events: none; }
.rb-hero > * { position: relative; }
.rb-hero-top { display: flex; align-items: center; gap: 16px; }
.v-ringbox.sm { width: 84px; height: 84px; } .v-ringbox.sm svg { width: 84px; height: 84px; } .v-pcbig.sm { font-size: 22px; }
.rb-stage { font: 400 28px/1.1 var(--f-display); letter-spacing: -.01em; } .rb-hero-top p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: var(--hero-ink2); }
.rb-mini { display: grid; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hero-line); }
.rb-mini-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px; align-items: center; }
.rb-mini-l { display: grid; font-size: 12px; line-height: 1.25; color: var(--hero-ink2); } .rb-mini-l b { color: var(--hero-ink); font: 600 12px var(--f-mono); }
.rb-mini-sq { display: flex; flex-wrap: wrap; gap: 6px 12px; } .rb-grp { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.rb-sq { position: relative; width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid rgba(255, 255, 255, .22); background: transparent; transition: transform .14s var(--ease-out), background-color .2s; flex: none; }
.rb-sq.lemah { background: rgba(44, 240, 201, .28); border-color: rgba(44, 240, 201, .35); } .rb-sq.sederhana { background: rgba(44, 240, 201, .6); border-color: rgba(44, 240, 201, .7); }
.rb-sq.kuat { background: #2cf0c9; border-color: #2cf0c9; } .rb-sq.off { border-style: dashed; opacity: .45; }
.rb-sq:hover { transform: scale(1.18); } .rb-sq:active { transform: scale(.92); }
.rb-sq .pd { position: absolute; top: -3px; right: -3px; width: 8px; height: 8px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 0 2px var(--hero-bg); }
.v-page.enter .rb-sq:not(.mini) { animation: rbpop .5s var(--spring) calc(var(--n, 0) * 22ms + 120ms) both; } @keyframes rbpop { from { transform: scale(.2); opacity: 0; } }
.rb-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; font-size: 12px; color: var(--hero-ink2); } .rb-legend span { display: inline-flex; align-items: center; gap: 7px; }
.rb-sq.mini { width: 12px; height: 12px; border-radius: 4px; }

/* ---- misi ---- */
.rb-sp { height: 14px; }
.rb-mission { padding: 18px; border-radius: 22px; background: var(--accent-tint); border: 1px solid var(--accent-line); margin-top: 14px; }
.rb-mission h3 { margin: 8px 0 4px; font: 600 18px/1.25 var(--f-ui); letter-spacing: -.01em; } .rb-mission p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.45; color: var(--ink2); }
.rb-mk { display: inline-flex; align-items: center; gap: 7px; font: 600 12px var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); } .rb-mk svg.i { width: 16px; height: 16px; }
.rb-mk.plain { color: var(--ink3); }
.rb-mission.done p { margin-bottom: 0; }

/* ---- senarai mengikut dimensi/unsur ---- */
.rb-dim .v-sec-h { align-items: baseline; } .rb-w { font-size: 12.5px; color: var(--ink3); }
.rb-el { margin-bottom: 12px; background: var(--panel); border: 1px solid var(--rule); border-radius: 22px; box-shadow: var(--sh-card); overflow: hidden; }
.rb-el-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 14px 16px 10px; } .rb-el-h b { font-size: 15.5px; } .rb-el-h span { font-size: 12.5px; color: var(--ink3); }
.rb-asp { display: flex; align-items: center; gap: 12px; padding: 13px 16px; min-height: 68px; border-top: 1px solid var(--rule); transition: background .12s, transform .14s var(--ease-out); } .rb-asp:hover { background: var(--hover); } .rb-asp:active { transform: scale(.985); }
.rb-asp .t { display: block; font-size: 15px; font-weight: 550; line-height: 1.3; } .rb-asp .m { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 12.5px; color: var(--ink3); }
.rb-asp .m em { font-style: normal; font-weight: 600; color: var(--warn-text); } .rb-asp > svg.i { width: 16px; height: 16px; color: var(--ink3); flex: none; }
.rb-dots { display: inline-flex; gap: 4px; } .rb-dots i { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--rule2); background: transparent; } .rb-dots i.on { background: var(--accent-text); border-color: var(--accent-text); }
.v-page.enter .rb-dots i.on { animation: rbpop .45s var(--spring) calc(var(--n) * 90ms + 300ms) both; }

/* ---- kad belajar (aspek) ---- */
.rb-card { padding: 18px 18px 16px; margin-bottom: 14px; background: var(--panel); border: 1px solid var(--rule); border-radius: 24px; box-shadow: var(--sh-card); }
.rb-card .v-h2 { margin-bottom: 10px; }
.rb-plain { margin: 8px 0 12px; font: 400 21px/1.35 var(--f-display); letter-spacing: -.005em; }
.v-more.sm { margin-top: 4px; } .v-more.sm > summary { min-height: 40px; font-size: 14px; font-weight: 550; color: var(--ink2); }
.rb-meter { margin-bottom: 14px; } .rb-meter .l { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 14px; } .rb-meter .l span { color: var(--ink3); font-variant-numeric: tabular-nums; }
.rb-meter .bar { height: 8px; border-radius: 5px; } .rb-meter .bar i { border-radius: 5px; transition: width .7s var(--ease-out); }
.rb-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 4px; margin: 2px 0 6px; } .rb-months i { height: 26px; border-radius: 6px; background: var(--hover); position: relative; } .rb-months i.on { background: var(--accent-text); } .rb-months i.fut { opacity: .4; }
.rb-months i.cur::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: var(--ink); }
.rb-hint { margin: 12px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink2); } .rb-hint.warn { color: var(--warn-text); }
.rb-lv-bars { display: flex; align-items: flex-end; gap: 8px; height: 112px; }
.rb-lv { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: 6px; height: 100%; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink3); font-size: 11.5px; font-weight: 550; }
.rb-lv i { display: block; height: var(--h); border-radius: 9px 9px 5px 5px; background: var(--hover); transition: background-color .25s, transform .2s var(--ease-out); transform-origin: 50% 100%; }
.rb-lv.fill i { background: color-mix(in srgb, var(--accent-text) calc(var(--n) * 14% + 12%), var(--hover)); } .rb-lv.on i { background: var(--accent-text); transform: scaleY(1.06); } .rb-lv.on { color: var(--ink); }
.rb-lv:active i { transform: scaleY(.94); } .rb-lv span { text-align: center; line-height: 1.1; font-size: 11px; letter-spacing: -.015em; }
.rb-lv-text { margin-top: 14px; padding: 14px; border-radius: 16px; background: var(--hover); } .rb-lv-text b { display: block; font-size: 15px; } .rb-lv-text p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink2); }
.rb-types { list-style: none; margin: 0; padding: 0; } .rb-types li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--rule); } .rb-types li:first-child { border-top: 0; }
.rb-types .ck { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--rule2); display: grid; place-items: center; } .rb-types li.on .ck { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); } .rb-types .ck svg.i { width: 14px; height: 14px; stroke-width: 2.6; }
.rb-docs { margin-top: 12px; } .rb-docs .chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rb-next { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 16px 18px; border-radius: 22px; background: var(--ink); color: var(--bg); transition: transform .14s var(--ease-out); } .rb-next:active { transform: scale(.98); }
.rb-next .k { display: block; font-size: 12px; opacity: .65; margin-bottom: 2px; } .rb-next b { font-size: 16px; } .rb-next svg.i { width: 20px; height: 20px; }

@media (min-width: 1100px) { .rb-mini-row { grid-template-columns: 140px minmax(0, 1fr); } }
html[data-reduce] .rb-sq, html[data-reduce] .rb-dots i, html[data-reduce] .rb-lv i { animation: none !important; transition: none !important; }