/* HISYNC theme — dimuat SETELAH style.css. Hanya mengubah tampilan, bukan logika. */

:root{
  --brand:#7f95ff;--brand2:#a9b8ff;--brand-ink:#4a5fd6;
  --bg:#f6f7ff;--card:#ffffff;--soft:#eef1ff;--fg:#1f2340;--mute:#7b8099;--line:#e4e8fa;
  --cov1:#c6d6ff;--cov2:#e9efff;--shadow:0 6px 22px rgba(94,115,200,.10);
  --acc:#7f95ff;
  --ui:"Plus Jakarta Sans",-apple-system,"Helvetica Neue",Arial,sans-serif;
  --hand:"Caveat","Segoe Script","Bradley Hand",cursive;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12141f;--card:#1b1e2e;--soft:#242840;--fg:#eef0ff;--mute:#9a9fba;--line:#2a2e48;
  --cov1:#2c3a78;--cov2:#1d2347;--shadow:0 6px 22px rgba(0,0,0,.35)}}
:root[data-theme="dark"]{
  --bg:#12141f;--card:#1b1e2e;--soft:#242840;--fg:#eef0ff;--mute:#9a9fba;--line:#2a2e48;
  --cov1:#2c3a78;--cov2:#1d2347;--shadow:0 6px 22px rgba(0,0,0,.35)}

body{font-family:var(--ui);background:linear-gradient(180deg,var(--cov2) 0,var(--bg) 340px) no-repeat,var(--bg);background-color:var(--bg)}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
input,textarea{background:var(--card);border-radius:14px}
input:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent)}

/* ---------- Header ---------- */
body header{background:color-mix(in srgb,var(--bg) 86%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:0;padding:12px 16px;gap:8px}
body header .logo{margin-right:auto;font-size:19px;font-weight:800;letter-spacing:.28em;line-height:1.1}
body header .logo::after{content:"Always with you ♡";display:block;font:700 15px/1 var(--hand);letter-spacing:0;color:var(--brand-ink);margin-top:3px}
body #hi{display:none}
body .bell{width:40px;height:40px;padding:0;display:grid;place-items:center;background:var(--card);box-shadow:var(--shadow);border-radius:50%;font-size:16px}
body .bell i{top:-2px;right:-2px}

/* ---------- Tombol ---------- */
body .btn,body .box button,body .cbar button,body .cin button{background:linear-gradient(135deg,var(--brand2),var(--brand));color:#fff;border-radius:14px}
body .btn.ghost{background:var(--card);color:var(--fg);box-shadow:var(--shadow)}
body .ib,body .box .ib{background:var(--soft);color:var(--brand-ink);border-radius:99px}
body .sb{background:var(--card);border-radius:14px;box-shadow:var(--shadow);border-color:transparent}

/* ---------- Beranda ---------- */
.hero{position:relative;margin:4px 16px 8px;border-radius:22px;overflow:hidden;height:148px;background:linear-gradient(135deg,#bcd0ff,#e7d9ff);box-shadow:var(--shadow)}
.hero .hp{display:flex;height:100%}
.hero .hp img{flex:1;min-width:0;height:100%;object-fit:cover;object-position:50% 18%;opacity:.92}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(40,55,130,.55))}
.hero .ht{position:absolute;left:16px;bottom:12px;z-index:1;color:#fff}
.hero .ht b{display:block;font:800 22px/1 var(--ui);letter-spacing:.22em}
.hero .ht span{font:700 17px/1.1 var(--hand)}

body .stories{border-bottom:0;padding:10px 16px}
body .st .av{outline:2.5px solid var(--c,var(--line));outline-offset:2px}
body .st:first-child .av{background:var(--card);box-shadow:var(--shadow);color:var(--brand-ink);outline-color:var(--line)}

body .box{margin:8px 16px;padding:12px 14px;border:0;border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
body .box textarea{border:0;background:transparent;padding:6px 4px;box-shadow:none}

body #fchips{padding:6px 16px 10px;border-bottom:0}
body #fchips button{background:var(--card);border:0;box-shadow:var(--shadow);color:var(--fg);padding:8px 16px}
body #fchips button.on{background:var(--c,var(--brand));color:#fff;box-shadow:none}

body .post{margin:10px 16px;padding:16px;border:0;border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
body .post .nm{font-size:15px}
body .pim{border-radius:16px}
body .acts{gap:18px;margin-top:6px}
body .like.on{color:var(--c,var(--brand-ink))}
body .empty{background:var(--card);margin:10px 16px;border-radius:20px;box-shadow:var(--shadow)}

/* ---------- Navigasi bawah ---------- */
body nav{border-top:0;background:var(--card);box-shadow:0 -6px 24px rgba(94,115,200,.12);border-radius:24px 24px 0 0;padding-top:8px}
body nav button{font-family:var(--ui);font-weight:600;font-size:11px}
body nav button b{margin-bottom:2px}
body nav button b svg{width:23px;height:23px;display:block;margin:0 auto;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
body nav button.on{color:var(--brand-ink)}
body nav button.on b svg{fill:color-mix(in srgb,var(--brand) 24%,transparent)}

/* ---------- Inbox ---------- */
body .ibh{font-size:26px;font-weight:800;padding:12px 18px 4px}
body .ibr{margin:8px 16px;padding:12px 14px;border:0;border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
body .chip{background:var(--soft)}
body .ibt{background:color-mix(in srgb,var(--bg) 90%,transparent);backdrop-filter:blur(12px);border-bottom:0}

/* ---------- Member ---------- */
body #mems{padding-top:6px}
body #mems .card{--mc:#8e8e93;border:0;border-radius:24px;padding:16px;box-shadow:var(--shadow);background:color-mix(in srgb,var(--mc) 13%,var(--card))}
body #mems .card:nth-child(1){--mc:#8a94c8}
body #mems .card:nth-child(2){--mc:#ec5f86}
body #mems .card:nth-child(3){--mc:#4f7bff}
body #mems .card .mp{width:78px;height:78px;outline-width:3px}
body #mems .card .nm{font:700 32px/1 var(--hand);color:var(--mc);letter-spacing:.01em}
body #mems .card .tm{margin-top:4px}
body #mems::after{content:"Different vibes\A Same heart ♡";white-space:pre;display:block;text-align:center;font:700 26px/1.15 var(--hand);color:var(--brand);padding:34px 0 10px}

/* ---------- Profil ---------- */
body .prof{background:linear-gradient(180deg,var(--cov1) 0,var(--cov2) 112px,transparent 112px);padding:74px 24px 6px}
body .prof .av{box-shadow:0 0 0 4px var(--bg),var(--shadow)}
body .prof .nm{font-weight:800}
body .pfs{background:var(--card);margin:12px 16px;border-radius:20px;box-shadow:var(--shadow);padding:14px 10px}
body .ptabs{border-bottom:0;margin:12px 16px 0}
body .ptabs button.on{color:var(--brand-ink);box-shadow:inset 0 -2px 0 var(--brand)}
body .pc{background:var(--card);margin:10px 16px;border:0;border-radius:18px;box-shadow:var(--shadow)}
body .dsr{margin:6px 16px;border:0;border-radius:16px;background:var(--card);box-shadow:var(--shadow)}
body #gear{background:color-mix(in srgb,var(--card) 80%,transparent);box-shadow:var(--shadow);color:var(--brand-ink)}

/* ---------- Pengaturan ---------- */
body #stp{background:var(--bg)}
body .sh{padding-top:20px}
body .sr{margin:0 16px;border:0;border-bottom:1px solid var(--line);background:var(--card)}
body .sbtn{background:var(--card);box-shadow:var(--shadow);border-radius:16px}
body .sw.on{background:var(--brand)}
body .sseg button{background:var(--card);border-color:transparent;box-shadow:var(--shadow);border-radius:12px}
body .sseg button.on{background:var(--soft);box-shadow:inset 0 0 0 2px var(--brand)}

/* ---------- Kartu umum, sheet, live, auth ---------- */
body .card{border:0;border-radius:20px;background:var(--card);box-shadow:var(--shadow)}
body .sheet{border-radius:26px 26px 0 0;background:var(--card)}
body .cbar{background:var(--card);border-top:0;box-shadow:0 -6px 20px rgba(94,115,200,.10)}
body .cbar input{border-radius:99px;background:var(--soft);border:0;padding:12px 16px}
body .m.me .b{border-radius:18px 18px 4px 18px}
body .b{border-radius:18px 18px 18px 4px;background:var(--card);box-shadow:var(--shadow)}
body .live{background:linear-gradient(135deg,#ff6b8b,#ff4d6d);box-shadow:0 4px 12px rgba(255,77,109,.35)}
body .lvv{border-radius:22px}
body .rb{background:var(--card);border-color:transparent;box-shadow:var(--shadow)}
body .bias button{background:var(--card);border-radius:18px;box-shadow:var(--shadow)}
body .bias button.on{box-shadow:0 0 0 2px var(--c),var(--shadow)}
body .wrap h1.logo{font-size:34px;font-weight:800;letter-spacing:.28em;color:var(--brand-ink)}

@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}