:root{
  --paper:#FAF7FB;
  --paper-2:#F4EFF7;
  --card:#FFFFFF;
  --ink:#221B2E;
  --ink-2:#6B6379;
  --line:#E7DFEC;
  --line-soft:#F0EAF4;
  --rose:#E0447F;
  --rose-deep:#C42F69;
  --rose-soft:#FFEAF1;
  --violet:#7B6BE8;
  --violet-soft:#EEEBFD;
  --peach:#F0913F;
  --peach-soft:#FFF0DF;
  --mint:#0E9C88;
  --mint-soft:#DAF4EE;
  --money:#3D8A1E;
  --money-soft:#E9F5D9;
  --work:#2E6FB7;
  --work-soft:#DEEBFA;
  --health:#127D91;
  --health-soft:#DDF1F5;
  --selfcare:#A8459A;
  --selfcare-soft:#F7E6F4;
  --food:#C24A22;
  --food-soft:#FCE6DD;
  /* Tiga kategori terakhir mengisi celah rona yang masih kosong: hijau
     zamrud, nila, dan perunggu. Dengan 12 kategori paletnya sudah padat,
     jadi jaraknya diukur, bukan dikira-kira. */
  --friendship:#0F8F52;
  --friendship-soft:#DEF3E7;
  --school:#5238C4;
  --school-soft:#E3E5FA;
  --family:#9A6B15;
  --family-soft:#F8EEDA;
  --gold:#C77A16;
  --gold-line:#F0C98A;
  --gold-soft:#FFF4E2;
  --ok:#0F9B84;
  --danger:#C42F69;
  --on-accent:#FFFFFF;
  --aurora:linear-gradient(140deg,#8FA5FF 0%,#C9A3F5 34%,#F2A3BE 68%,#FFC49B 100%);
  --blob-a:rgba(143,165,255,.30);
  --blob-b:rgba(242,163,190,.30);
  --blob-c:rgba(255,196,155,.24);
  --shadow-sm:0 2px 10px rgba(34,27,46,.06);
  --shadow-md:0 10px 30px rgba(34,27,46,.10);
  --shadow-lg:0 26px 60px rgba(34,27,46,.16);
  --shadow-rose:0 12px 30px rgba(224,68,127,.28);
  --sheen:rgba(255,255,255,.55);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#131020;
    --paper-2:#1C1730;
    --card:#1F1934;
    --ink:#F3EFF9;
    --ink-2:#A69FBA;
    --line:#312A48;
    --line-soft:#282141;
    --rose:#FF7FAC;
    --rose-deep:#FF9CC0;
    --rose-soft:#3A1F32;
    --violet:#A99BFF;
    --violet-soft:#282246;
    --peach:#FFB877;
    --peach-soft:#3A2A1B;
    --mint:#5FD9C2;
    --mint-soft:#123330;
    --money:#A8D46A;
    --money-soft:#22300F;
    --work:#7FB3EC;
    --work-soft:#122A42;
    --gold:#F2C177;
    --gold-line:#6B5326;
    --gold-soft:#33280F;
    --ok:#4BD6BA;
    --danger:#FF8FB0;
    --on-accent:#1A1428;
    --blob-a:rgba(120,140,255,.20);
    --blob-b:rgba(226,120,168,.18);
    --blob-c:rgba(255,168,110,.13);
    --shadow-sm:0 2px 10px rgba(0,0,0,.34);
    --shadow-md:0 10px 30px rgba(0,0,0,.42);
    --shadow-lg:0 26px 60px rgba(0,0,0,.55);
    --shadow-rose:0 12px 30px rgba(255,127,172,.22);
    --sheen:rgba(255,255,255,.16);
  }
}
:root[data-theme="dark"]{
  --paper:#131020;
  --paper-2:#1C1730;
  --card:#1F1934;
  --ink:#F3EFF9;
  --ink-2:#A69FBA;
  --line:#312A48;
  --line-soft:#282141;
  --rose:#FF7FAC;
  --rose-deep:#FF9CC0;
  --rose-soft:#3A1F32;
  --violet:#A99BFF;
  --violet-soft:#282246;
  --peach:#FFB877;
  --peach-soft:#3A2A1B;
  --mint:#5FD9C2;
  --mint-soft:#123330;
  --money:#A8D46A;
  --money-soft:#22300F;
  --work:#7FB3EC;
  --work-soft:#122A42;
  --gold:#F2C177;
  --gold-line:#6B5326;
  --gold-soft:#33280F;
  --ok:#4BD6BA;
  --danger:#FF8FB0;
  --on-accent:#1A1428;
  --blob-a:rgba(120,140,255,.20);
  --blob-b:rgba(226,120,168,.18);
  --blob-c:rgba(255,168,110,.13);
  --shadow-sm:0 2px 10px rgba(0,0,0,.34);
  --shadow-md:0 10px 30px rgba(0,0,0,.42);
  --shadow-lg:0 26px 60px rgba(0,0,0,.55);
  --shadow-rose:0 12px 30px rgba(255,127,172,.22);
  --sheen:rgba(255,255,255,.16);
}

*{box-sizing:border-box}
/* Heading layar kuis diisi JavaScript; jaga tingginya tanpa  . */
.question:empty,.band:empty{min-height:1.2em}
/* Terbaca pembaca layar, tidak menempati ruang visual. */
.sronly{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Kartu, chip, logo, dan pagination kini tautan asli — jangan bergaris bawah.
   Garis bawah hanya dipakai di teks halaman statis. */
a{text-decoration:none;color:inherit}
/* Halaman statis: baris teks yang melebar sepanjang layar sulit diikuti
   mata karena lompatan balik ke awal baris jadi jauh. */
.prose{max-width:68ch}
.prose a{text-decoration:underline;color:var(--rose)}

/* ---------- poin dan badge ---------- */
/* Tanpa nama tingkat, pembedanya warna dan nomor. */
.badgebox{
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  padding:16px 16px 14px;margin-bottom:18px;
}
.badgebox[hidden]{display:none}
.badgehead{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.badgemark{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:46px;height:46px;border-radius:14px;color:#fff;
  font-size:17px;font-weight:700;box-shadow:var(--shadow-sm);
}
.badgeinfo b{display:block;font-size:16px;line-height:1.2}
.badgeinfo span{font-size:12px;color:var(--ink-2)}
.poinpill{font-size:12px;font-weight:700;color:#fff;padding:4px 10px;border:0}
.poinpill[hidden]{display:none}
/* Satu warna per tingkat, dan tiap warna harus beda jelas dari SEMUA warna
   lain — bukan cuma dari tetangganya. Versi sebelumnya memakai abu untuk
   tingkat 0 dan abu kebiruan untuk tingkat 2; di lingkaran 46px keduanya
   nyaris kembar, jadi naik dari 1 kuis ke 5 kuis tidak terlihat sama sekali.
   Sekarang jalurnya menyeberangi rona: abu, biru, teal, ungu, rose, amber —
   dari belum jelas menuju terang. Semua digelapkan sampai kontras teks putih lewat 4,5:1 — warna ini
   juga dipakai pil poin 12px di appbar, jadi ambang teks kecil yang
   berlaku, bukan ambang teks besar. */
.t0{background:#6E6A7C}
.t1{background:#2F6FC7}
.t2{background:#0E7C6D}
.t3{background:#7A4FD0}
.t4{background:#C43F7E}
.t5{background:#8F6706}

/* ---------- ajakan ---------- */
.refbox{margin-bottom:18px}
.refbox[hidden]{display:none}
.refbaris{display:flex;align-items:stretch;gap:8px}
.refbaris code{
  flex:1;min-width:0;display:flex;align-items:center;padding:10px 14px;
  background:var(--paper-2);border:1px solid var(--line);border-radius:14px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px;overflow-wrap:anywhere;
}
.refbaris button{
  flex:none;min-height:44px;padding:0 16px;cursor:pointer;font-family:inherit;
  font-size:13px;font-weight:600;color:#fff;background:var(--rose);
  border:0;border-radius:14px;
}
.refbaris button:hover{background:var(--rose-deep)}

/* ---------- layar profil ---------- */
.proftop{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.profid{display:flex;align-items:center;gap:11px;min-width:0}
.profid b{display:block;font-size:15px;line-height:1.25}
.profid span span{font-size:12px;color:var(--ink-2);overflow-wrap:anywhere}
.profav{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:44px;height:44px;border-radius:50%;background:var(--aurora);
  color:#fff;font-size:15px;font-weight:700;letter-spacing:.02em;
}
.profav.sm{width:26px;height:26px;font-size:11px}
.profbtn{padding:4px}
.temabtn{flex:none}
.profbtn[hidden]{display:none}
/* Tombol masuk di appbar. Sengaja tidak memakai emas seperti pil poin — ini
   pintu masuk, bukan angka pencapaian, dan keduanya tidak pernah tampil
   bersamaan. */
.masukbtn{
  background:var(--card);color:var(--ink);border:1px solid var(--line);
  padding:5px 12px 5px 6px;box-shadow:var(--shadow-sm);
}
.masukbtn:hover{border-color:var(--rose);filter:none}
.masukbtn[hidden]{display:none}
.gmark.sm{width:20px;height:20px;font-size:11px}
#profUnduh[hidden]{display:none}
.histhint{font-size:12px;color:var(--ink-2);margin:0 0 10px}
.hist{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.hrow{display:flex;align-items:stretch;gap:8px}
.hrow .hitem{flex:1;min-width:0}
.hunduh{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:52px;min-height:44px;cursor:pointer;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);border-radius:16px;
}
.hunduh:hover{border-color:var(--rose);color:var(--rose)}
.hunduh svg{width:18px;height:18px}
.hitem{
  display:flex;align-items:center;gap:10px;width:100%;min-height:44px;
  padding:12px 14px;cursor:pointer;font-family:inherit;text-align:left;
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  color:var(--ink);
}
.hitem:hover{border-color:var(--rose)}
.hitem>span:first-child{flex:1;min-width:0}
.hitem b{display:block;font-size:13.5px;font-weight:600;line-height:1.3}
.hband{font-size:11.5px;color:var(--ink-2)}
.hitem .chev{color:var(--ink-2);flex:none}
.empty{font-size:13px;color:var(--ink-2);margin:0}
.rasiogrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.rasio{
  display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:16px 12px;min-height:44px;cursor:pointer;font-family:inherit;
  background:var(--card);border:1px solid var(--line);border-radius:18px;
  color:var(--ink);text-align:center;
  transition:border-color .15s ease,transform .15s ease;
}
.rasio:hover{border-color:var(--rose);transform:translateY(-2px)}
.rasio b{font-size:13.5px;font-weight:600}
.rasio span{font-size:11.5px;color:var(--ink-2);line-height:1.35}
.rasiobox{display:block;background:var(--aurora);border-radius:6px}
.r-feed{width:44px;height:55px}
.r-reels{width:36px;height:64px}
/* Halaman statis baru memakai daftar dan kode inline; tanpa ini keduanya
   jatuh ke gaya bawaan peramban dan terlihat asing di antara teks lain. */
.prose ul{margin:0 0 14px;padding-left:20px}
.prose li{margin-bottom:6px;line-height:1.6}
.prose code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:.88em;background:var(--paper-2);
  border:1px solid var(--line);border-radius:6px;padding:1px 5px;
  overflow-wrap:anywhere;
}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(600px 460px at 10% -6%, var(--blob-a), transparent 70%),
    radial-gradient(560px 480px at 94% 6%, var(--blob-b), transparent 70%),
    radial-gradient(640px 420px at 55% 104%, var(--blob-c), transparent 70%);
}
h1,h2,h3{font-family:Georgia,"Iowan Old Style","Times New Roman",serif;font-weight:700}

/* ---------- app shell ---------- */
.appbar{
  position:sticky;top:0;z-index:30;background:var(--card);
  border-bottom:1px solid var(--line-soft);padding:12px 20px;
}
.appbar .inner{max-width:1140px;margin:0 auto;display:flex;align-items:center;gap:9px}

/* ---------- app bar ---------- */
.appbar{
  display:flex;align-items:center;gap:8px;padding:15px 18px;
  background:var(--card);position:sticky;top:0;z-index:5;
  border-bottom:1px solid var(--line-soft);
}
.brand{
  display:flex;align-items:center;gap:10px;min-width:0;
  border:0;background:none;padding:0;cursor:pointer;color:var(--ink);font-family:inherit;
}
.brand:hover .mark{transform:rotate(-6deg)}
.brand .mark{transition:transform .18s ease}
.mark{
  width:30px;height:30px;border-radius:11px;flex:none;background:var(--aurora);
  display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:15px;font-weight:700;color:#fff;
  box-shadow:var(--shadow-sm);
}
.brand b{font-family:Georgia,serif;font-size:18px;letter-spacing:-.02em;white-space:nowrap}
.spacer{margin-left:auto}
.seg{display:flex;background:var(--paper-2);border-radius:999px;padding:2px}
.seg button{
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  font-family:inherit;font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;
}
.seg button[aria-pressed="true"]{background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.iconbtn{
  width:32px;height:32px;border-radius:999px;border:0;background:var(--paper-2);
  color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center;flex:none;
}
.iconbtn:hover{color:var(--rose)}
.pill{
  display:inline-flex;align-items:center;gap:5px;flex:none;cursor:pointer;border:0;
  background:var(--gold-soft);color:var(--gold);border-radius:999px;padding:6px 11px;
  font-family:inherit;font-size:12px;font-weight:700;font-variant-numeric:tabular-nums;
}
.pill:hover{filter:brightness(.97)}
.pill svg{width:12px;height:12px}

/* ---------- screens ---------- */
.screen{display:none;padding:26px 20px 10px}
#scHome{max-width:1140px;margin:0 auto}
#scIntro{max-width:780px;margin:0 auto}
#scCheck{max-width:620px;margin:0 auto}
#scResult{max-width:700px;margin:0 auto}
#scMe{max-width:780px;margin:0 auto}
.screen.active{display:block}
.screen.active > *{animation:rise .42s cubic-bezier(.2,.7,.3,1) both}
.screen.active > *:nth-child(2){animation-delay:.05s}
.screen.active > *:nth-child(3){animation-delay:.09s}
.screen.active > *:nth-child(4){animation-delay:.13s}
.screen.active > *:nth-child(5){animation-delay:.17s}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- hero ---------- */
.hero{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:6px}
.hero .eyebrow,.hero h1{margin:0}
.eyebrow{
  display:inline-block;margin:0 0 10px;padding:4px 11px;border-radius:999px;
  background:var(--rose-soft);color:var(--rose);font-size:11px;font-weight:600;
}
h1{
  font-size:clamp(28px,4.6vw,42px);line-height:1.1;letter-spacing:-.028em;
  margin:0 0 10px;text-wrap:balance;
}
.hero p{margin:0;color:var(--ink-2);font-size:15px;line-height:1.55;max-width:46ch}

.searchwrap{position:relative;display:flex;align-items:center;margin-top:20px}
.searchwrap > svg{position:absolute;left:16px;width:17px;height:17px;color:var(--ink-3);pointer-events:none}
.searchwrap input{
  width:100%;padding:13px 46px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:14.5px;
}
.searchwrap input::placeholder{color:var(--ink-3)}
.searchwrap input:focus{outline:2px solid var(--rose);outline-offset:1px;border-color:transparent}
.searchclear{
  position:absolute;right:8px;width:31px;height:31px;border-radius:999px;border:0;
  background:var(--paper-2);color:var(--ink-2);cursor:pointer;font-size:16px;line-height:1;
  display:flex;align-items:center;justify-content:center;
}
.searchclear[hidden]{display:none}
#loadMore[hidden]{display:none}
a.btn{text-decoration:none}
.pagenav{display:flex;align-items:center;gap:10px;margin-top:14px}
.pagenav a{
  font-size:12.5px;color:var(--ink-2);text-decoration:none;
  border:1px solid var(--line);border-radius:999px;padding:8px 14px;
  min-height:44px;display:inline-flex;align-items:center;
}
.pagenav a:hover{border-color:var(--rose);color:var(--rose)}
.pagenav .sp{flex:1}
.pagenav[hidden]{display:none}

/* ---------- chips ---------- */
#searchInput::-webkit-search-cancel-button,
#searchInput::-webkit-search-decoration{-webkit-appearance:none;appearance:none}

/* QC-07 — strip kategori bisa digeser tapi scrollbar-nya sengaja
   disembunyikan, jadi tidak ada tanda apa pun bahwa masih ada isi di kanan.
   Bayangan tepi muncul hanya selama masih ada yang bisa digeser. */
.chipswrap{position:relative}
.chips{display:flex;flex-wrap:wrap;gap:7px;padding:18px 0 4px}
.chips::-webkit-scrollbar{display:none}
/* Lebih kecil daripada tombol lain supaya sebelas chip tidak menghabiskan
   layar saat membungkus. Tetap di atas ambang minimum target sentuh. */
.chip{
  display:inline-flex;align-items:center;gap:5px;flex:none;cursor:pointer;min-height:36px;
  border:1px solid var(--line);border-radius:999px;background:var(--card);
  padding:6px 12px;font-family:inherit;font-size:12.5px;color:var(--ink);
  transition:background .15s ease,border-color .15s ease,color .15s ease;
}
.chip:hover{border-color:var(--rose)}
/* Di layar sempit sebelas chip bisa memakan sepertiga layar sebelum kuis
   pertama terlihat. Dirapatkan, dan emoji dikecilkan agar barisnya
   berkurang tanpa menghilangkan pembedanya. */
@media (max-width:480px){
  .chips{gap:6px;padding:14px 0 2px}
  .chip{min-height:32px;padding:5px 9px;font-size:11.5px;gap:4px}
  .chip em{font-size:11.5px}
  .chip-simpan{font-size:11.5px}
}
.chip-hot{border-color:var(--gold-line);background:var(--gold-soft);color:var(--gold)}
.chip-simpan{font-family:inherit;font-size:12.5px}
.chip-simpan[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}
.chip-hot[aria-pressed="true"]{background:var(--rose);border-color:var(--rose);color:#fff}
.chip svg{width:14px;height:14px;display:block}
.chip[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--card)}
.chip[aria-pressed="true"] span{color:var(--card)}
.c-trending{color:var(--rose);display:flex}
.c-relationship{color:var(--rose);display:flex}
.c-personality{color:var(--violet);display:flex}
.c-psychology{color:var(--mint);display:flex}
.c-brand{color:var(--gold);display:flex}
.c-money{color:var(--money);display:flex}
.c-work{color:var(--work);display:flex}
.c-hobby{color:var(--peach);display:flex}
.c-health{color:var(--health);display:flex}
.c-selfcare{color:var(--selfcare);display:flex}
.c-food{color:var(--food);display:flex}
.c-friendship{color:var(--friendship);display:flex}
.c-school{color:var(--school);display:flex}
.c-family{color:var(--family);display:flex}

.listhead{
  display:flex;align-items:baseline;justify-content:space-between;
  font-size:12.5px;color:var(--ink-2);margin:16px 0 12px;font-variant-numeric:tabular-nums;
}

/* ---------- quiz cards ---------- */
.list{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:720px){ .list{grid-template-columns:1fr 1fr} }
@media (min-width:1080px){ #scHome .list{grid-template-columns:repeat(3,1fr)} }
.qcard{
  display:block;width:100%;text-align:left;padding:0;overflow:hidden;
  background:var(--card);border:1px solid var(--line);border-radius:24px;cursor:pointer;
  font-family:inherit;color:var(--ink);box-shadow:var(--shadow-sm);
  transition:transform .18s ease,box-shadow .18s ease;
}
.qcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.cover{
  width:100%;height:150px;position:relative;
  display:flex;align-items:flex-end;justify-content:flex-start;padding:16px;
}
.covemoji{font-size:46px;line-height:1;filter:drop-shadow(0 3px 8px rgba(34,27,46,.28))}
.chip em{font-style:normal;font-size:13px;line-height:1}
.cv-relationship{background:linear-gradient(140deg,#FFA6C8,#EE6E96)}
.cv-personality{background:linear-gradient(140deg,#AFBBFF,#8878EE)}
.cv-psychology{background:linear-gradient(140deg,#9FE8D7,#4CBFAA)}
.cv-brand{background:linear-gradient(140deg,#FFDD9B,#EFA83C)}
.cv-money{background:linear-gradient(140deg,#C3E89B,#63A83A)}
.cv-work{background:linear-gradient(140deg,#A9C9F2,#5A8FD2)}
.cv-hobby{background:linear-gradient(140deg,#FFCEA6,#F0996B)}
.cv-health{background:linear-gradient(140deg,#A6E4EF,#4FBBD0)}
.cv-selfcare{background:linear-gradient(140deg,#F3C4EC,#C776BC)}
.cv-food{background:linear-gradient(140deg,#FFC2A3,#E8734A)}
.cv-friendship{background:linear-gradient(140deg,#9FE3BC,#35A96C)}
.cv-school{background:linear-gradient(140deg,#B0A6F5,#6247D9)}
.cv-family{background:linear-gradient(140deg,#F3D79A,#C79B33)}
/* Menandai tes yang belum punya angka peserta. Digantikan angkanya begitu
   tesnya cukup ramai — dua-duanya tidak pernah tampil bersamaan. */
.barulbl{
  position:absolute;top:14px;right:16px;background:var(--rose);color:#fff;
  border-radius:999px;padding:5px 11px;font-size:11px;font-weight:700;
  letter-spacing:.02em;box-shadow:var(--shadow-sm);
}
/* Menggantikan "New!" untuk tes yang sudah dikerjakan akun ini. */
.sudahlbl{background:var(--ok);color:#fff}
/* Penanda trending menyatu dengan chip kategori: pojok kanan sudah dipakai
   "New!" dan "Sudah dikerjakan", dan lebar nama kategori berbeda-beda
   sehingga tidak bisa ditempatkan dengan posisi tetap. */
.hotlbl{font-style:normal;margin-right:5px}
.barulbl[hidden]{display:none}
.phcount[hidden]{display:none}
.qcard .body{display:block;padding:15px 17px 17px}
.qcard h3{font-size:19px;line-height:1.24;letter-spacing:-.02em;margin:0 0 5px;text-wrap:balance}
.qcard p{margin:0 0 10px;font-size:13px;color:var(--ink-2);line-height:1.45}
.meta{display:flex;align-items:center;gap:7px;flex-wrap:wrap;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.tag{padding:3px 9px;border-radius:999px;font-size:10.5px;font-weight:600}
.tg-relationship{background:var(--rose-soft);color:var(--rose)}
.tg-personality{background:var(--violet-soft);color:var(--violet)}
.tg-psychology{background:var(--mint-soft);color:var(--mint)}
.tg-brand{background:var(--gold-soft);color:var(--gold)}
.tg-money{background:var(--money-soft);color:var(--money)}
.tg-work{background:var(--work-soft);color:var(--work)}
.tg-hobby{background:var(--peach-soft);color:var(--peach)}
.tg-health{background:var(--health-soft);color:var(--health)}
.tg-selfcare{background:var(--selfcare-soft);color:var(--selfcare)}
.tg-food{background:var(--food-soft);color:var(--food)}
.tg-friendship{background:var(--friendship-soft);color:var(--friendship)}
.tg-school{background:var(--school-soft);color:var(--school)}
.tg-family{background:var(--family-soft);color:var(--family)}
.hot{color:var(--rose);font-weight:700}

/* Label kategori di sampul kartu. Sempat terdefinisi dua kali; yang di atas
   tidak pernah berpengaruh karena kalah cascade, jadi dibuang. */
.featlbl{
  position:absolute;top:12px;left:14px;background:rgba(255,255,255,.92);color:#3A2340;
  border-radius:999px;padding:4px 11px;font-size:10.5px;font-weight:700;
}

/* social row */
/* Tombol simpan kini saudara dari anchor (lihat partials.mjs), jadi
   ditumpangkan di posisi lamanya supaya tampilannya tidak berubah. */
.qcardwrap{position:relative;display:flex}
.qcardwrap>.qcard{flex:1;min-width:0}
.qcardwrap>.kartuaksi{position:absolute;right:8px;bottom:9px;z-index:2;display:flex;gap:2px}

.social{
  display:flex;align-items:center;gap:9px;margin-top:11px;padding-top:10px;
  border-top:1px solid var(--line-soft);min-height:34px;padding-right:88px;
}
.phcount{
  display:inline-flex;align-items:center;gap:7px;border:1px dashed var(--line);
  border-radius:999px;padding:4px 11px;font-size:11.5px;color:var(--ink-3);
}
/* Dua aksi kartu berdampingan: bagikan dan simpan. Keduanya di luar
   anchor, jadi menekannya tidak membuka kuisnya. */
.kartubtn{
  background:none;border:0;cursor:pointer;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:8px;
}
.kartubtn:hover{color:var(--rose)}
.kartubtn svg{width:17px;height:17px}
.save{
  background:none;border:0;cursor:pointer;color:var(--ink-2);
  display:inline-flex;align-items:center;justify-content:center;
  min-width:44px;min-height:44px;border-radius:8px;
}
.save:hover{color:var(--rose)}
.save svg{width:17px;height:17px}
.save.on{color:var(--rose)}

/* sponsored */
.qcard.sponsored{border-color:var(--gold-line);background:var(--gold-soft)}

.empty{
  border:1px dashed var(--line);border-radius:20px;padding:28px 18px;text-align:center;
  color:var(--ink-2);font-size:13px;margin:0;
}

.trust{
  margin:26px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
  font-size:12px;line-height:1.55;color:var(--ink-3);max-width:60ch;
}
#scResult .trust{margin:0 0 22px;padding-top:0;border-top:0}

/* ---------- slot iklan ---------- */
/* Tinggi TIDAK dipatok. Slot yang dipesan setinggi 250px lalu tidak terisi —
   karena adblocker, atau karena Adsterra memang tidak punya iklan untuk
   pengunjung itu — meninggalkan lubang kosong yang terlihat seperti halaman
   rusak. Dibiarkan setinggi isinya, slot yang gagal menyusut jadi nol dan
   tidak ada yang tahu ada iklan di situ. */
#adRect:empty, #adCheck:empty, #adFeed:empty { display:none }
#adRect, #adCheck { margin:0 0 22px; display:flex; justify-content:center }
.adfeed{margin:14px 0; display:flex; justify-content:center; min-width:0}
.adfeed iframe, #adRect iframe, #adCheck iframe { max-width:100% }

/* ---------- intro kuis ---------- */

.introcover{height:clamp(190px,26vw,290px);border-radius:26px;position:relative;display:flex;align-items:flex-end;padding:18px}
.introemoji{font-size:66px;line-height:1;filter:drop-shadow(0 4px 10px rgba(34,27,46,.28))}
.introback{
  position:absolute;top:16px;left:16px;width:34px;height:34px;border-radius:999px;border:0;
  background:rgba(255,255,255,.92);color:#3A2340;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}
.introtag{
  position:absolute;top:18px;right:16px;background:rgba(255,255,255,.92);color:#3A2340;
  border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:600;
}
.intropad{padding:20px 2px 6px}
.introtitle{font-size:clamp(26px,3.6vw,34px);line-height:1.18;letter-spacing:-.028em;margin:0 0 10px;text-wrap:balance}
.introdesc{margin:0 0 14px;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.introsocial{
  display:flex;align-items:center;gap:9px;margin:0 0 20px;padding:12px 0;
  border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft);
}
.oclist{
  display:flex;flex-direction:column;margin:0 0 24px;
  border-top:1px solid var(--line-soft);
}
.oc{
  display:flex;align-items:center;gap:11px;padding:11px 2px;
  border-bottom:1px solid var(--line-soft);
  font-size:13.5px;color:var(--ink-2);
}
.ocdot{width:7px;height:7px;border-radius:50%;flex:none;background:currentColor}
.btnwide{width:100%;font-size:15px;padding:15px}
.introfoot{margin:12px 0 0;font-size:12px;color:var(--ink-2);text-align:center}
.introfoot b{color:var(--gold);font-weight:700}

/* ---------- quiz screen ---------- */
#scQuiz{max-width:700px;margin:0 auto;padding-bottom:86px}
.qtop{display:flex;align-items:center;gap:12px;margin-bottom:8px}
.back{
  border:0;background:var(--paper-2);color:var(--ink);cursor:pointer;border-radius:999px;
  width:32px;height:32px;display:flex;align-items:center;justify-content:center;flex:none;
}
.back:hover{color:var(--rose)}
.counter{font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.track{height:6px;background:var(--paper-2);border-radius:999px;overflow:hidden;flex:1}
.fill{height:100%;width:0;background:var(--aurora);border-radius:999px;transition:width .38s cubic-bezier(.2,.7,.3,1)}
.milestone{font-size:12px;color:var(--ok);margin:0 0 12px;min-height:18px}
.quizbrand{
  display:inline-flex;align-items:center;gap:6px;background:var(--gold-soft);color:var(--gold);
  border-radius:999px;padding:5px 12px;font-size:11.5px;font-weight:600;margin-bottom:14px;
}
h2.question{font-size:clamp(22px,2.8vw,28px);line-height:1.3;letter-spacing:-.02em;margin:0 0 18px;text-wrap:balance}
.opts{display:flex;flex-direction:column;gap:10px}
.opt{
  width:100%;text-align:left;padding:15px 16px;border:1px solid var(--line);
  border-radius:20px;background:var(--card);color:var(--ink);cursor:pointer;
  font-family:inherit;font-size:14.5px;line-height:1.4;
  display:flex;align-items:center;gap:12px;
  transition:border-color .15s ease,transform .15s ease,background .15s ease,box-shadow .15s ease;
}
.opt:hover{border-color:var(--rose);box-shadow:var(--shadow-sm);transform:translateY(-1px)}
.opt .key{
  font-size:11.5px;font-weight:700;color:var(--ink-2);background:var(--paper-2);
  border-radius:9px;width:24px;height:24px;flex:none;
  display:flex;align-items:center;justify-content:center;
}
.opt.picked{background:var(--rose);border-color:var(--rose);color:#fff;box-shadow:var(--shadow-rose)}
.opt.picked .key{background:rgba(255,255,255,.24);color:#fff}
.qhint{margin:18px 0 0;font-size:12px;color:var(--ink-2)}
.anchor{
  position:fixed;left:0;right:0;bottom:0;height:58px;z-index:25;
  border-top:1px solid var(--line);background:var(--paper-2);
  display:none;align-items:center;justify-content:center;
  padding:4px 0;
}
.anchor.on{display:flex}

/* ---------- result ---------- */
.stamp{
  display:inline-block;background:var(--ok);color:#fff;border-radius:999px;
  padding:5px 13px;margin-bottom:14px;font-size:12px;font-weight:600;
  animation:stampin .42s cubic-bezier(.2,1.3,.4,1) both;
}
@keyframes stampin{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
h2.band{font-size:30px;line-height:1.16;letter-spacing:-.028em;margin:0 0 12px;text-wrap:balance}
.rdesc{margin:0 0 22px;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.meter{margin-bottom:24px}
.meterbar{height:10px;border-radius:999px;background:var(--aurora);position:relative}
.pin{
  position:absolute;top:50%;width:18px;height:18px;border-radius:50%;
  background:var(--ink);box-shadow:0 0 0 3px var(--paper),var(--shadow-sm);
  transform:translate(-50%,-50%);transition:left .55s cubic-bezier(.2,.7,.3,1);
}
.meterlabels{display:flex;justify-content:space-between;margin-top:9px;font-size:11.5px;color:var(--ink-2)}

/* ---------- pratinjau kartu hasil ---------- */
/* Kanvasnya 1080x1350 sungguhan, cuma dikecilkan lewat CSS — jadi yang
   dilihat orang persis berkas yang nanti dibagikan, bukan tiruannya. */
.kartuprev{margin:22px 0 0;display:flex;justify-content:center}
.kartuprev[hidden]{display:none}
.kartuprev canvas{
  display:block;width:100%;max-width:260px;height:auto;
  border-radius:18px;box-shadow:var(--shadow-sm);
}

/* ---------- tindakan sekunder di layar hasil ---------- */
.aksikecil{
  display:flex;flex-wrap:wrap;justify-content:center;gap:6px 4px;
  margin:12px 0 22px;
}
.tautkecil{
  padding:10px 12px;min-height:40px;background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
  border-radius:999px;
}
.tautkecil:hover{color:var(--rose);background:var(--paper-2)}
.tautkecil[hidden]{display:none}

/* ---------- gerbang masuk di layar intro kuis kedua ---------- */
/* Menggantikan tombol "Mulai kuis", jadi bobotnya harus setara: ini memang
   satu-satunya jalan maju di layar itu, bukan tawaran sampingan. */
.gerbang{
  margin-top:22px;padding:18px;border-radius:22px;background:var(--paper-2);
}
.gerbangteks{margin:0 0 14px;font-size:13.5px;line-height:1.55;color:var(--ink)}
.gerbang .btn{width:100%;background:var(--card);color:var(--ink);box-shadow:var(--shadow-sm)}
.gerbang .btn:hover{filter:none;background:var(--card)}
.gerbangnota{margin:12px 0 0;font-size:12px;line-height:1.5;color:var(--ink-2);text-align:center}

.btn{
  flex:1;padding:14px 16px;border-radius:999px;border:0;
  background:var(--rose);color:#fff;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:600;
  display:flex;align-items:center;justify-content:center;gap:8px;
  box-shadow:var(--shadow-rose);transition:transform .15s ease,filter .15s ease;
}
.btn:hover{transform:translateY(-2px);filter:brightness(1.04)}
.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}
.btn:disabled:hover{transform:none;filter:none}
.btn.ghost{background:var(--paper-2);color:var(--ink);box-shadow:none}
.btn.ghost:hover{filter:brightness(.97)}
.btn svg{width:16px;height:16px}
.sectionhead{font-size:12.5px;font-weight:600;color:var(--ink-2);margin:0 0 12px}

.tally{display:flex;flex-direction:column;gap:9px}
.trow{display:grid;grid-template-columns:112px 1fr 26px;gap:10px;align-items:center;font-size:12.5px}
.trow i{display:block;height:9px;border-radius:999px;background:var(--paper-2);position:relative;overflow:hidden}
.trow i b{position:absolute;inset:0 auto 0 0;background:var(--aurora);border-radius:999px}
.trow.win{font-weight:700;color:var(--rose)}
.trow span:last-child{text-align:right;color:var(--ink-2);font-variant-numeric:tabular-nums}

/* ---------- recommendation ---------- */
.rechead{font-size:19px;letter-spacing:-.02em;margin:0 0 6px}
.recsub{margin:0 0 14px;font-size:12.5px;color:var(--ink-2)}
.recsub b{color:var(--gold);font-weight:700}
.qcard.rec{position:relative;overflow:hidden;border-color:var(--rose);animation:recpulse 2.6s ease-in-out infinite}
.qcard.rec::after{
  content:"";position:absolute;top:0;left:-60%;width:42%;height:100%;pointer-events:none;
  transform:skewX(-18deg);background:linear-gradient(90deg,transparent,var(--sheen),transparent);
  animation:recsweep 3.2s ease-in-out infinite;
}
@keyframes recpulse{0%,100%{box-shadow:var(--shadow-sm)}50%{box-shadow:var(--shadow-rose)}}
@keyframes recsweep{0%{left:-60%}55%,100%{left:125%}}

/* ---------- signup ---------- */
.signup{border-radius:24px;background:var(--paper-2);padding:18px;margin-bottom:22px}
.signup h3{font-size:19px;line-height:1.22;letter-spacing:-.02em;margin:0 0 6px}
.signup p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.gmark{
  width:22px;height:22px;border-radius:50%;background:var(--card);flex:none;
  border:1px solid var(--line);display:flex;align-items:center;justify-content:center;
  font-family:Georgia,serif;font-size:12px;font-weight:700;color:var(--violet);
}
.emailrow{display:flex;gap:8px}
.emailrow input{
  flex:1;min-width:0;padding:13px 15px;border-radius:999px;border:1px solid var(--line);
  background:var(--card);color:var(--ink);font-family:inherit;font-size:14px;
}
.emailrow input::placeholder{color:var(--ink-2)}
.emailrow button{
  padding:13px 20px;border-radius:999px;border:0;background:var(--rose);color:#fff;
  cursor:pointer;font-family:inherit;font-size:13.5px;font-weight:600;
}

/* ---------- affiliate + brand ---------- */
.disclose{font-size:11.5px;color:var(--ink-2);margin:0 0 11px}
.afflist{display:flex;flex-direction:column;gap:10px;margin-bottom:22px}
.aff{
  display:grid;grid-template-columns:46px 1fr 14px;gap:12px;align-items:center;
  padding:11px;border:1px solid var(--line);border-radius:20px;background:var(--card);
  cursor:pointer;text-align:left;font-family:inherit;color:var(--ink);width:100%;
  box-shadow:var(--shadow-sm);transition:transform .15s ease,box-shadow .15s ease;
}
.aff:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.affimg{
  width:46px;height:46px;border-radius:15px;background:var(--violet-soft);
  display:flex;align-items:center;justify-content:center;color:var(--violet);
}
.affimg svg{width:20px;height:20px}
.aff b{display:block;font-size:13.5px;font-weight:600;line-height:1.3;margin-bottom:2px}
.aff span{font-size:12px;color:var(--ink-2);line-height:1.35}
.aff .chev{color:var(--ink-2)}

.brandpanel{border:1px solid var(--gold-line);background:var(--gold-soft);border-radius:24px;padding:18px;margin-bottom:22px}
.brandpanel .lbl{font-size:11.5px;font-weight:600;color:var(--gold);margin:0 0 8px}
.brandpanel h3{font-size:19px;letter-spacing:-.02em;margin:0 0 6px}
.brandpanel p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.brandbtn{
  width:100%;padding:14px;border-radius:999px;border:0;background:var(--ink);color:var(--card);
  cursor:pointer;font-family:inherit;font-size:14px;font-weight:600;
}
.brandbtn:hover{filter:brightness(1.15)}
.optin{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;font-size:12.5px;color:var(--ink-2);cursor:pointer;line-height:1.45}
.optin input{margin:2px 0 0;flex:none;width:17px;height:17px;accent-color:var(--rose)}
.btnrow-wide{width:100%;margin-top:22px}
.prog{height:10px;border-radius:999px;background:var(--paper-2);overflow:hidden}
.prog i{display:block;height:100%;background:var(--aurora);border-radius:999px;transition:width .45s ease}
.progtxt{margin:9px 0 0;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums}
.hist{display:flex;flex-direction:column;gap:9px}
.hitem{
  display:grid;grid-template-columns:1fr auto 14px;align-items:center;gap:11px;width:100%;
  padding:13px 15px;border:0;border-radius:18px;background:var(--paper-2);
  font-family:inherit;font-size:13px;line-height:1.4;text-align:left;color:var(--ink);cursor:pointer;
  transition:transform .14s ease,filter .14s ease;
}
.hitem:hover{transform:translateX(2px);filter:brightness(.97)}
.hitem b{display:block;font-weight:600;font-size:13.5px;margin-bottom:2px}
.hitem .hband{font-size:12px;color:var(--ink-2)}
.hitem .chev{color:var(--ink-3);display:flex}
.histhint{margin:-6px 0 11px;font-size:12px;color:var(--ink-3)}

/* ---------- footer ---------- */
.appfoot{
  border-top:1px solid var(--line-soft);padding:22px 20px 96px;margin-top:34px;
  font-size:12px;color:var(--ink-2);
}
.appfoot .inner{max-width:1140px;margin:0 auto;display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
/* Tiga tautan tidak pernah rata di dua kolom — selalu ada satu yang
   tertinggal sendiri. Di layar sempit ditumpuk saja, jadi terlihat memang
   dirancang begitu, bukan hasil pembungkusan yang tidak sengaja. */
@media (max-width:400px){
  .appfoot .inner{display:grid;grid-template-columns:1fr;gap:0;justify-items:start}
}
@media (min-width:720px){ .appfoot .inner{justify-content:center} }
.appfoot b{color:var(--ink);font-family:Georgia,serif;font-size:13px}
.appfoot a{color:var(--ink-2);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.appfoot a:hover{color:var(--rose)}
/* Pemilih bahasa dipindah ke footer. Sebelumnya ia terkubur di menu member
   yang tombol pembukanya digerbangi features.points — flag yang bernilai
   false, jadi tidak ada pengunjung yang pernah bisa membukanya, dan
   terjemahan EN tidak bisa dipakai siapa pun. */
.footseg{margin-top:4px}
.footseg button{min-height:36px;padding:0 12px}

.sheetbg{
  position:fixed;inset:0;z-index:70;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(18,12,28,.55);
}
.sheetbg[hidden]{display:none}
@media (min-width:640px){ .sheetbg{align-items:center} }
.sheet{
  width:100%;max-width:460px;background:var(--card);border:1px solid var(--line);
  border-radius:24px 24px 0 0;padding:20px 18px 22px;box-shadow:var(--shadow-lg);
}
@media (min-width:640px){ .sheet{border-radius:24px} }
.sheet h3{font-size:19px;letter-spacing:-.02em;margin:0 0 5px}
.sheet > p{margin:0 0 14px;font-size:13px;color:var(--ink-2)}
.sharebox{
  background:var(--paper-2);border-radius:14px;padding:12px 14px;margin-bottom:16px;
  font-size:12.5px;line-height:1.5;color:var(--ink-2);word-break:break-word;
}
.sharegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:14px}
.sharebtn{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding:13px 4px;
  border:1px solid var(--line);border-radius:16px;background:var(--card);cursor:pointer;
  font-family:inherit;font-size:11px;color:var(--ink);
}
.sharebtn:hover{border-color:var(--rose);transform:translateY(-2px)}
.sharebtn i{
  width:36px;height:36px;border-radius:50%;background:var(--paper-2);
  display:flex;align-items:center;justify-content:center;color:var(--ink-2);
}
.sharebtn svg{width:18px;height:18px}
.sheetnote{margin:0 0 14px;font-size:11.5px;color:var(--ink-3);line-height:1.45}

/* ---------- toast ---------- */
.toast{
  position:fixed;left:50%;bottom:76px;transform:translate(-50%,14px);
  background:var(--ink);color:var(--card);padding:11px 18px;border-radius:999px;
  font-size:13px;opacity:0;pointer-events:none;z-index:60;max-width:min(88%,420px);text-align:center;
  box-shadow:var(--shadow-md);transition:opacity .22s ease,transform .22s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

:focus-visible{outline:2px solid var(--rose);outline-offset:2px}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .qcard.rec,.qcard.rec::after{animation:none !important}
  .qcard.rec::after{display:none}
}