/* Sync365 · v12: fon Literata + Cabin (lebih jelas dibaca), palet mod gelap teal yang lebih kaya, dan pembetulan kad harga (terpotong di PC).
   Palet gelap dikira dalam OKLCH pada rona 190 dengan kroma rendah (neutral bertint, bukan hitam): deep L.15, bg L.185, panel L.225, panel2 L.265, raise L.30.
   Aksen kekal mint #2cf0c9; kekayaan datang daripada permukaan teal yang berlapis dan satu cahaya aksen lembut pada hero dan sebelah gelap muka depan. */

:root { --deep: #060d0c; --ease-out: cubic-bezier(.23, 1, .32, 1); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1514; --panel: #121e1d; --panel2: #1a2827; --raise: #213230;
    --ink: #eff5f4; --ink2: #b6c0bf; --ink3: #899594;
    --rule: rgba(190, 235, 228, .09); --rule2: rgba(190, 235, 228, .18); --hover: rgba(190, 235, 228, .06); --press: rgba(190, 235, 228, .1);
    --accent-tint: rgba(44, 240, 201, .14); --accent-line: rgba(44, 240, 201, .42);
    --hero-bg: #0c2824; --hero-ink: #eff5f4; --hero-ink2: #a9bbb8; --hero-line: rgba(190, 235, 228, .12);
    --hero-wash: radial-gradient(90% 130% at 100% 0%, rgba(44, 240, 201, .2), transparent 62%), radial-gradient(70% 90% at 0% 100%, rgba(3, 57, 48, .7), transparent 72%);
    --sh-card: 0 0 0 1px rgba(190, 235, 228, .07), inset 0 1px 0 rgba(190, 235, 228, .05); --sh-pop: 0 -8px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(190, 235, 228, .1);
    --overlay: 0 0 0 1px rgba(190, 235, 228, .12), 0 18px 48px rgba(0, 0, 0, .6);
  }
}
:root[data-theme="dark"] {
  --bg: #0b1514; --panel: #121e1d; --panel2: #1a2827; --raise: #213230;
  --ink: #eff5f4; --ink2: #b6c0bf; --ink3: #899594;
  --rule: rgba(190, 235, 228, .09); --rule2: rgba(190, 235, 228, .18); --hover: rgba(190, 235, 228, .06); --press: rgba(190, 235, 228, .1);
  --accent-tint: rgba(44, 240, 201, .14); --accent-line: rgba(44, 240, 201, .42);
  --hero-bg: #0c2824; --hero-ink: #eff5f4; --hero-ink2: #a9bbb8; --hero-line: rgba(190, 235, 228, .12);
  --hero-wash: radial-gradient(90% 130% at 100% 0%, rgba(44, 240, 201, .2), transparent 62%), radial-gradient(70% 90% at 0% 100%, rgba(3, 57, 48, .7), transparent 72%);
  --sh-card: 0 0 0 1px rgba(190, 235, 228, .07), inset 0 1px 0 rgba(190, 235, 228, .05); --sh-pop: 0 -8px 40px rgba(0, 0, 0, .6), 0 0 0 1px rgba(190, 235, 228, .1);
  --overlay: 0 0 0 1px rgba(190, 235, 228, .12), 0 18px 48px rgba(0, 0, 0, .6);
}
.v-hero, .rb-hero { background-image: var(--hero-wash, linear-gradient(180deg, rgba(255, 255, 255, .06), transparent 38%)); }
.v-hero .btn.pri, .rb-hero .btn.pri, .curtain .btn.pri, .auth-side .btn.pri { color: var(--deep); }

/* sebelah gelap (log masuk/daftar), tirai dan lapisan masuk: satu permukaan dalam, dengan cahaya aksen lembut di penjuru */
.auth-side, .curtain, .enterov { --ink2: #b4c2c0; --ink3: #8c9d9b; }
.auth-side { background: radial-gradient(70% 55% at 100% 0%, rgba(44, 240, 201, .14), transparent 64%), radial-gradient(60% 50% at 0% 100%, rgba(3, 57, 48, .6), transparent 72%), var(--deep); --panel: #0f1a19; }
.curtain, .enterov { background: var(--deep); --bg: var(--deep); }
@media (max-width: 1080px) { .auth { background: var(--deep); } }
.hs-pg { fill: #0d1a19; } .hs-badge circle { stroke: var(--deep); }
.hero-frame { background: rgba(190, 235, 228, .035); box-shadow: inset 0 0 0 1px rgba(190, 235, 228, .09); }

/* ---- tipografi: Literata untuk tajuk dan nombor, Cabin untuk UI. Sela huruf tajuk dilonggarkan kerana Literata sudah rapat pada saiz besar ---- */
body { font-size: 15px; line-height: 1.55; letter-spacing: 0; }
h1.display, .auth-side .display, .auth-card h2, .ah h2, .ps h1, .doc-title, .v-name, .v-hero.blank h2 { letter-spacing: -.012em; }
.ah-e, .of-e, .tp-e, .dm-chip, .af label, .ps-chips li { font-size: 12px; }
.ah-s, .of-sub p { font-size: 16px; }
.of-pts li { font-size: 17px; }

/* ---- kad harga: lebar nombor mengikut bilangan digit (RM130 / RM100 / RM75 / RM1,299 tidak lagi terpotong) ---- */
.of-pr { flex-wrap: wrap; row-gap: 2px; }
.of-roll { width: calc(var(--d0, 3) * 1ch + .08em); height: 1.1em; overflow: visible; clip-path: inset(0 -.5em 0 -.1em); font-size: 88px; line-height: 1.1; letter-spacing: -.01em; font-weight: 500; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum" 1, "tnum" 1; transition: width .5s var(--ease-out); }
.of[data-ref="1"] .of-roll { width: calc(var(--d1, 2) * 1ch + .08em); }
.of-n { height: 1.1em; line-height: 1.1; }
.of-rm { font-size: 28px; margin-top: .22em; }
.of-old { white-space: nowrap; font-family: var(--f-ui); font-variant-numeric: lining-nums; }
.of-per { font: 700 13px var(--f-ui); letter-spacing: .1em; text-transform: uppercase; color: var(--ink3); align-self: center; }

/* skrin yang tidak tinggi (komputer riba): sebelah gelap sentiasa muat, dan boleh ditatal sebagai jalan terakhir */
@media (min-width: 1081px) {
  .auth .auth-side { overflow-y: auto; justify-content: safe center; scrollbar-width: none; overscroll-behavior: contain; }
  .auth .auth-side::-webkit-scrollbar { display: none; }
  .auth-side .display { font-size: clamp(34px, min(4.4vw, 7.2vh), 60px); }
}
@media (min-width: 1081px) and (max-height: 860px) {
  .auth-side .lead2 { display: none; }
  .auth-side .brand { padding-bottom: 14px !important; }
  .of { margin-top: 20px; padding: 18px 22px 16px; }
  .of-roll { font-size: clamp(54px, 10.5vh, 84px); } .of-rm { font-size: clamp(20px, 3.4vh, 28px); }
  .of-pr { margin: 8px 0 2px; } .of-sub { margin-bottom: 12px; min-height: 0; }
  .of-pts { gap: 8px; padding-top: 12px; } .of-pts li { font-size: 16px; } .of .of-i { width: 32px; height: 32px; padding: 6px; }
}
@media (min-width: 1081px) and (max-height: 700px) {
  .of-pts { grid-template-columns: repeat(3, minmax(0, 1fr)); } .of-pts li { flex-direction: column; text-align: center; gap: 6px; font-size: 13.5px; }
  .of { padding: 14px 18px 14px; } .of-roll { font-size: clamp(46px, 11vh, 64px); }
}
@media (max-width: 1080px) { .of-roll { font-size: 62px; } .of-rm { font-size: 22px; } .of-pts li { font-size: 13.5px; } }

/* harga lama (dicoret) hanya mengambil ruang apabila kod rujukan sah, supaya label tempoh dekat dengan nombor */
.of-old { max-width: 0; margin-left: -8px; overflow: hidden; transition: opacity .3s ease .12s, transform .5s var(--ease-out) .12s, max-width .5s var(--ease-out), margin-left .5s var(--ease-out); }
.of[data-ref="1"] .of-old { max-width: 8em; margin-left: 0; }