/* ======================================================================================
   Sync365 v6: lapisan kemasan "mahal". Dimuatkan paling akhir.
   Prinsip: lebih sedikit kotak, lebih banyak tipografi; satu aksen digunakan secara jimat (butang utama kini dakwat/ink,
   hijau hanya untuk data dan keadaan aktif); garis halus, bayang berlapis, butiran tekstur (bijian), kepala bahagian gaya
   editorial; tirai pembuka gelap; bar tab terapung; peralihan skrin lancar.
   ====================================================================================== */
:root {
  --bg: #f3f1ea; --panel: #fffefa; --rule: #e3dfd2; --rule2: #cdc8b8;
  --r-card: 20px; --r-ctl: 12px; --tab-h: 78px;
  --sh-card: 0 1px 1px rgba(13, 14, 11, .025), 0 12px 28px -20px rgba(13, 14, 11, .2);
  --fab-bg: #0d0e0b; --fab-fg: #2cf0c9;
  --grain: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .7 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0a0b09; --panel: #11130f; --rule: rgba(255, 255, 255, .08); --rule2: rgba(255, 255, 255, .16); --fab-bg: #2cf0c9; --fab-fg: #03221b; --sh-card: 0 0 0 1px rgba(255, 255, 255, .05); } }
:root[data-theme="dark"] { --bg: #0a0b09; --panel: #11130f; --rule: rgba(255, 255, 255, .08); --rule2: rgba(255, 255, 255, .16); --fab-bg: #2cf0c9; --fab-fg: #03221b; --sh-card: 0 0 0 1px rgba(255, 255, 255, .05); }
body { font-feature-settings: "tnum" 0, "kern" 1; text-rendering: optimizeLegibility; }
h1, h2, .v-h1, .v-name, .rb-plain { text-wrap: balance; } p, .v-sub, .v-att p { text-wrap: pretty; }

/* ---- butang: utama = dakwat (ink), bukan hijau neon ---- */
.btn { border-radius: var(--r-ctl); }
.btn.pri { background: var(--ink); border-color: var(--ink); color: var(--bg); font-weight: 600; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 12px 22px -14px rgba(13, 14, 11, .7); }
.btn.pri:hover { filter: none; background: color-mix(in srgb, var(--ink) 88%, var(--accent-text)); border-color: transparent; }
.v-hero .btn.pri, .rb-hero .btn.pri, .curtain .btn.pri, .auth-side .btn.pri { background: #f1f2ec; border-color: #f1f2ec; color: #0b0c0a; box-shadow: 0 12px 24px -14px rgba(0, 0, 0, .7); }
.btn.pri.loading::after { background: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .22) 50%, transparent 75%); }
.in { border-radius: var(--r-ctl); background: var(--panel); border-color: var(--rule2); }
.in:focus { border-color: var(--ink); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 24%, transparent); transform: none; }
.v-pill { height: 24px; padding: 0 9px; border-radius: 8px; font-size: 11.5px; font-weight: 600; }
.v-chip { border-radius: 10px; height: 36px; } .v-chip i { border-radius: 6px; }
.v-card { border-radius: var(--r-card); }

/* ---- kepala bahagian gaya editorial: label mono + garis halus ---- */
.v-h2 { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; font: 600 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ink3); }
.v-h2::after { content: ""; flex: 1; height: 1px; background: var(--rule); }
.v-sec-h .v-h2 { flex: 1; margin: 0; } .v-sec-h { gap: 14px; }
.v-link { font-size: 13px; }
.v-sec { margin-top: 34px; }
.v-h1 { font-size: clamp(38px, 9vw, 48px); letter-spacing: -.03em; }
.v-name { font-size: clamp(46px, 11vw, 64px); letter-spacing: -.035em; line-height: 1; }
.v-hello .k { font: 500 11px var(--f-mono); letter-spacing: .14em; text-transform: uppercase; }

/* ---- hero: nombor serif besar, tanda ukur, bijian dan garis grid halus ---- */
.v-hero { border-radius: 26px; padding: 22px 22px 20px; background-color: var(--hero-bg); background-image: linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 38%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 34px 54px -34px rgba(13, 14, 11, .7); }
.v-hero::before, .rb-hero::before { content: ""; position: absolute; inset: 0; width: auto; height: auto; border-radius: inherit; background: var(--grain); background-size: 180px; opacity: .08; mix-blend-mode: overlay; pointer-events: none; right: 0; top: 0; }
.v-hero::after, .rb-hero::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 30px 30px; -webkit-mask-image: radial-gradient(120% 90% at 100% 0, #000, transparent 72%); mask-image: radial-gradient(120% 90% at 100% 0, #000, transparent 72%); }
.v-hero > *, .rb-hero > * { position: relative; z-index: 1; }
.v-hero-k { display: flex; justify-content: space-between; font: 500 11px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hero-ink2); }
.v-hero-n { display: flex; align-items: baseline; gap: 6px; margin: 16px 0 8px; }
.v-big { font: 400 clamp(88px, 26vw, 128px)/.86 var(--f-display); letter-spacing: -.045em; font-variant-numeric: tabular-nums; }
.v-hero-n small { font: 400 38px/1 var(--f-display); color: var(--hero-ink2); }
.v-hero-n.sm .v-big { font-size: clamp(64px, 17vw, 84px); } .v-hero-n.sm small { font-size: 28px; }
.v-hero-s { margin: 0 0 20px; font-size: 14px; line-height: 1.45; color: var(--hero-ink2); } .v-hero-s b { color: var(--hero-ink); font-weight: 500; }
.v-ticks { display: flex; align-items: flex-end; gap: 3px; height: 28px; }
.v-ticks i { flex: 1; height: 55%; border-radius: 2px; background: rgba(255, 255, 255, .13); transform-origin: 50% 100%; }
.v-ticks i.on { height: 100%; background: var(--accent); }
.v-page.enter .v-ticks i { animation: tickin .6s var(--spring) calc(var(--n) * 14ms + 180ms) both; } @keyframes tickin { from { transform: scaleY(.15); opacity: 0; } }
.v-stats { margin-top: 20px; } .v-stats b { font: 400 34px/1 var(--f-display); letter-spacing: -.02em; }
.v-hero.blank { padding-bottom: 24px; } .v-hero.blank h2 { font-size: 34px; }
.rb-hero { border-radius: 26px; background-color: var(--hero-bg); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), 0 34px 54px -34px rgba(13, 14, 11, .7); }
.rb-hero .v-hero-k { margin-bottom: 4px; }

/* ---- perhatian: baris rata (bukan kotak dalam kotak) ---- */
.v-att { padding: 18px 0; margin: 0; background: none; border: 0; border-top: 1px solid var(--rule); border-radius: 0; box-shadow: none; }
.v-h2 + .v-att { border-top: 0; padding-top: 2px; }
.v-att.warn { background: none; padding-left: 16px; box-shadow: inset 3px 0 0 var(--warn); }
.v-att .v-ico { width: 36px; height: 36px; border-radius: 11px; background: none; border: 1px solid var(--rule2); }
.v-att.warn .v-ico { background: none; border-color: color-mix(in srgb, var(--warn) 55%, transparent); }
.v-att b { font-size: 15px; }

/* ---- bar tab terapung (telefon) ---- */
@media (max-width: 899px) {
  .v-page { padding-bottom: calc(var(--tab-h) + 52px + env(safe-area-inset-bottom)); }
  .v-tabs { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); height: 64px; padding: 0 6px; border: 1px solid var(--rule); border-radius: 30px; background: color-mix(in srgb, var(--panel) 78%, transparent); -webkit-backdrop-filter: blur(24px) saturate(1.7); backdrop-filter: blur(24px) saturate(1.7); box-shadow: 0 26px 48px -24px rgba(13, 14, 11, .5), inset 0 1px 0 rgba(255, 255, 255, .55); view-transition-name: tabs; }
  .v-tab { height: 64px; border-radius: 22px; }
  .v-tab .pill-bg { position: absolute; inset: 8px 4px; border-radius: 20px; background: color-mix(in srgb, var(--accent-text) 11%, transparent); view-transition-name: tabpill; z-index: -1; }
  .v-tab[aria-current="page"] { color: var(--ink); } .v-tab[aria-current="page"] svg.i { color: var(--accent-text); }
  .v-fab { width: 58px; height: 58px; margin-top: -30px; background: var(--fab-bg); color: var(--fab-fg); box-shadow: 0 16px 30px -10px rgba(13, 14, 11, .55), 0 0 0 6px var(--bg); }
  .v-fab svg.i { width: 26px; height: 26px; stroke-width: 2.2; }
  .toast { bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom)); }
  .gen { bottom: calc(var(--tab-h) + 12px + env(safe-area-inset-bottom)); }
  .tray { bottom: calc(var(--tab-h) + 10px + env(safe-area-inset-bottom)); }
}
.v-tab { position: relative; } .v-tab > * { position: relative; z-index: 1; }
.v-rail { padding-top: 26px; } .v-nav { border-radius: var(--r-ctl); } .v-nav[aria-current="page"] { box-shadow: inset 0 0 0 1px var(--rule), var(--sh-card); }
.v-addbtn { border-radius: 14px; }

/* ---- peralihan skrin (View Transitions) ---- */
::view-transition-old(root) { animation: vt-out .16s var(--ease-out) both; } ::view-transition-new(root) { animation: vt-in .34s var(--ease-out) both; }
@keyframes vt-out { to { opacity: 0; } } @keyframes vt-in { from { opacity: 0; transform: translateY(6px); } }
::view-transition-group(tabpill) { animation-duration: .46s; animation-timing-function: var(--ease-drawer); }
::view-transition-group(tabs), ::view-transition-group(rail) { animation: none; }
.v-rail { view-transition-name: rail; }
html[data-reduce]::view-transition-group(*), html[data-reduce]::view-transition-old(*), html[data-reduce]::view-transition-new(*) { animation: none !important; }

/* ---- tirai pembuka (gelap, bijian) dan lapisan Memasuki ---- */
.curtain, .enterov { --ink: #f1f2ec; --ink2: #a7aa9d; --ink3: #7b7e72; --bg: #0b0c0a; --accent-text: #2cf0c9; --rule: rgba(255, 255, 255, .14); --rule2: rgba(255, 255, 255, .24); }
.curtain { position: fixed; inset: 0; z-index: 200; display: grid; grid-template-rows: 1fr auto; justify-items: center; background: #0b0c0a; color: #f1f2ec; overflow: hidden; will-change: transform; transition: transform .95s cubic-bezier(.76, 0, .18, 1), border-radius .95s cubic-bezier(.76, 0, .18, 1); }
.curtain::before, .enterov::before { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 180px; opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.curtain::after, .enterov::after { content: ""; position: absolute; left: 50%; top: 42%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; background: radial-gradient(closest-side, rgba(44, 240, 201, .1), transparent 62%); pointer-events: none; animation: cuglow 5s ease-in-out infinite; }
@keyframes cuglow { 50% { transform: scale(1.12); opacity: .75; } }
.curtain.lift, .enterov.lift { transform: translateY(-104%); border-bottom-left-radius: 50% 9vh; border-bottom-right-radius: 50% 9vh; pointer-events: none; }
.curtain.lift .cu-in, .curtain.lift .cu-bar { opacity: 0; transition: opacity .35s ease-out; }
.cu-in { align-self: center; display: grid; justify-items: center; gap: 24px; position: relative; z-index: 1; padding-top: 6vh; }
.cu-in .logo { width: 116px; height: 82px; filter: drop-shadow(0 10px 30px rgba(44, 240, 201, .32)); }
.cu-in .wm { font-size: 36px; color: #f1f2ec; opacity: 1; animation: rise .7s var(--ease-out) .5s both; } .cu-in .wm b { color: #2cf0c9; }
.cu-tag { margin: 0; font: italic 400 22px/1.2 var(--f-display); color: rgba(241, 242, 236, .62); animation: rise .8s var(--ease-out) 1.1s both; text-align: center; padding: 0 24px; }
.cu-foot { position: relative; z-index: 1; display: grid; justify-items: center; gap: 12px; padding-bottom: calc(44px + env(safe-area-inset-bottom)); }
.cu-bar { position: relative; width: min(220px, 52vw); height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .14); overflow: hidden; }
.cu-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 40%; background: #2cf0c9; border-radius: 2px; animation: pbar 1.25s var(--ease-in-out) infinite; }
.cu-hint { display: grid; min-height: 20px; margin: 0; font-size: 13px; color: rgba(241, 242, 236, .5); } .cu-hint span { grid-area: 1 / 1; text-align: center; }
.cu-hint .h1 { animation: rise .5s var(--ease-out) 1.2s both, fadeout .4s var(--ease-out) 6s forwards; } .cu-hint .h2 { animation: rise .5s var(--ease-out) 6.2s both; }
.boot-blank { min-height: 100vh; }
.enterov { z-index: 190; background: #0b0c0a; color: #f1f2ec; opacity: 0; overflow: hidden; transition: opacity .35s var(--ease-out), transform .95s cubic-bezier(.76, 0, .18, 1), border-radius .95s cubic-bezier(.76, 0, .18, 1); }
.enterov.on { opacity: 1; } .enterov > * { position: relative; z-index: 1; }
.enterov .wm b { color: #2cf0c9; } .eo-hello { color: #f1f2ec; }
html[data-reduce] .curtain, html[data-reduce] .enterov { transition-duration: .01s; }

/* ---- log masuk: panel kiri gelap (tidak bergantung tema), kad naik seperti helaian di telefon ---- */
.auth-side { position: relative; overflow: hidden; background: #0b0c0a; color: #f1f2ec; border: 0; --ink: #f1f2ec; --ink2: #a7aa9d; --ink3: #7b7e72; --rule: rgba(255, 255, 255, .12); --accent-text: #2cf0c9; --accent: #2cf0c9; --accent-tint: rgba(44, 240, 201, .14); --panel: #15170f; }
.auth-side::before { content: ""; position: absolute; inset: 0; background: var(--grain); background-size: 180px; opacity: .09; mix-blend-mode: overlay; pointer-events: none; }
.auth-side > * { position: relative; z-index: 1; }
.auth-side .display { color: #f1f2ec; } .auth-side .display em { color: #2cf0c9; } .auth-side .lead2 { color: #a7aa9d; } .auth-side .brand .wm { color: #f1f2ec; }
.auth-points .n { color: #7b7e72; } .auth-points b { color: #f1f2ec; }
.auth-art { position: absolute; z-index: 0; right: 44px; bottom: 44px; top: auto; left: auto; width: 200px; opacity: .95; pointer-events: none; display: none; }
@media (min-width: 1081px) { .auth { grid-template-columns: minmax(0, 1.15fr) minmax(380px, 500px); } .auth-side { max-width: none; width: 100%; padding: 64px 72px; margin: 0; } .auth-art { display: block; } .auth-art .art { max-width: 200px; } }
@media (max-width: 1080px) {
  .auth { display: flex; flex-direction: column; min-height: 100vh; background: #0b0c0a; }
  .auth-side { padding: calc(30px + env(safe-area-inset-top)) 24px 62px; } .auth-side .display { font-size: clamp(38px, 11vw, 52px); } .auth-side .lead2 { display: none; }
  .auth-card { flex: 1; margin-top: -30px; position: relative; z-index: 2; background: var(--panel); box-shadow: inset 0 1px 0 var(--rule); border-radius: 30px 30px 0 0; padding: 34px 24px calc(34px + env(safe-area-inset-bottom)); box-shadow: 0 -24px 50px -30px rgba(0, 0, 0, .6); }
}
.auth-card h2 { font-size: 36px; letter-spacing: -.02em; }

html[data-reduce] .curtain::after, html[data-reduce] .enterov::after { animation: none; }