/* =========================================================
   SFX SPACE — stylesheet
   Palet & efek timbul diambil langsung dari sfxspace.id
     dasar        #1C1F20
     cekung       #161819
     timbul       #1C1F20 -> #1F2223 + garis bawah putih 10%
     teks         #E9E9E9
     teks redup   #969CA0
   Tampilan sengaja dibuat diam: tidak ada animasi berulang.
   ========================================================= */

/* Kunci tampilan: tidak boleh dizoom, ukuran teks tidak boleh
   diubah otomatis oleh peramban, dan ketuk-dua-kali tidak
   memperbesar layar. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
html,body{max-width:100vw;overflow-x:hidden;overscroll-behavior-y:none}
:root{
  --bg:#141617;
  --sunken:#0F1112;
  --raise-a:#151819;
  --raise-b:#181B1C;
  --raise-hi:#1C2021;
  --rim:rgba(255,255,255,.085);
  --rim-soft:rgba(255,255,255,.04);
  --text:#E9E9E9;
  --muted:#969CA0;
  --muted-2:#6E7477;
  --like:#E5484D;
  --gold:#E8C55F;
  --ok:#3E9E77;
  --up:#40C88C;      /* profit / TP */
  --down:#E5484D;    /* loss / SL */
  /* Garis tepi kartu. Dibuat terpisah dari --rim karena --rim
     berwarna putih di tema terang, sehingga tidak terlihat di
     atas kartu yang juga putih. */
  --edge:rgba(255,255,255,.085);
  --shadow:0 8px 18px rgba(0,0,0,.55);
  --shadow-lg:0 18px 44px rgba(0,0,0,.66);
  --glass:rgba(20,22,23,.78);
  /* kaca dibuat setipis mungkin: ada, tapi hampir tak terlihat */
  --glass-edge:rgba(255,255,255,.022);
  --r-lg:24px;
  --r-md:18px;
  --tile:16px;
  --logo-filter:none;
}

[data-theme="light"]{
  --bg:#EDEFF0;
  --sunken:#E2E5E6;
  --raise-a:#F5F7F7;
  --raise-b:#E9ECEC;
  --raise-hi:#FFFFFF;
  --rim:rgba(255,255,255,.95);
  --rim-soft:rgba(255,255,255,.6);
  --text:#1B1E1F;
  --muted:#6B7173;
  --muted-2:#8B9092;
  --shadow:0 4px 10px rgba(0,0,0,.055);
  --shadow-lg:0 10px 26px rgba(0,0,0,.075);
  --glass:rgba(237,239,240,.74);
  --glass-edge:rgba(255,255,255,.55);
  --logo-filter:invert(1) brightness(.28) contrast(1.35);
  --up:#1E9E6A;
  --down:#D33B41;
  --edge:rgba(0,0,0,.10);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:14.5px;
  line-height:1.45;
  overscroll-behavior-y:none;
}
img{display:block;max-width:100%}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.hidden{display:none !important}
h1,h2,h3,h4,b,strong{font-family:'Poppins',sans-serif;font-weight:600}

.ic{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ic-fill{width:21px;height:21px;fill:currentColor}

/* =========================================================
   Permukaan timbul & cekung
   ========================================================= */
.tile,.btn,.circle-btn,.me-pill,.head-pill,.field-row,.row-field,
.notif,.chat-item,.stat,.cm-name,.chip-btn,.like-bar,.total-chip,.link-chip,
.seg,.post,.owner-panel,.caption-box,.bell,.edit-fab,.tool-btn,.call-btn,.sq-btn,
.chat-top,.send-btn,.reply-hint,.update-bar{
  background:linear-gradient(180deg,var(--raise-a) 0%,var(--raise-b) 100%);
  border:0;
  /* Dulu garis bawah setebal 2px berwarna putih membuat tepi tombol
     tampak menyala terang. Diganti garis rambut yang sangat samar
     mengelilingi tombol, ditambah bayangan gelap yang lembut. */
  border-bottom:1px solid rgba(255,255,255,.028);
  box-shadow:
    0 5px 14px rgba(0,0,0,.42),
    inset 0 0 0 1px var(--edge),
    inset 0 1px 0 rgba(255,255,255,.020);
}
.post-media,.drop,.cover-media,.composer .field,.msg-list,.skel{
  background:var(--sunken);
  box-shadow:inset 0 2px 7px rgba(0,0,0,.55), inset 0 -1px 0 var(--rim-soft);
}
[data-theme="light"] .post-media,[data-theme="light"] .drop,
[data-theme="light"] .cover-media,[data-theme="light"] .composer .field,
[data-theme="light"] .msg-list,[data-theme="light"] .skel{
  box-shadow:inset 0 2px 6px rgba(0,0,0,.10), inset 0 -1px 0 rgba(255,255,255,.75);
}

/* ---------- Ripple: sekali, cepat ---------- */
.ripple{position:relative;overflow:hidden;isolation:isolate;transition:transform .12s ease}
.ripple .rp{
  position:absolute;border-radius:50%;transform:scale(0);pointer-events:none;
  background:rgba(255,255,255,.13);animation:rp .45s ease-out forwards
}
[data-theme="light"] .ripple .rp{background:rgba(0,0,0,.07)}
@keyframes rp{to{transform:scale(2.6);opacity:0}}
.ripple:active{transform:scale(.985)}

/* =========================================================
   Splash & Login
   ========================================================= */
.screen-full{position:fixed;inset:0;z-index:60;background:var(--bg);overflow:hidden}
.splash{display:flex;flex-direction:column;align-items:center;justify-content:center}
.wm{position:absolute;width:min(52vw,260px);opacity:.05;filter:var(--logo-filter);pointer-events:none}
.wm-tl{top:-5vw;left:-12vw}
.wm-br{bottom:-5vw;right:-12vw}

.splash-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 30px}
.splash-logo{width:104px;filter:var(--logo-filter)}
.brand-title{font-size:27px;letter-spacing:.14em;margin:18px 0 6px;font-weight:600}
.brand-sub{margin:0;color:var(--muted);font-size:12px;letter-spacing:.03em}

.btn-google{
  margin-top:36px;display:inline-flex;align-items:center;gap:12px;
  background:linear-gradient(180deg,var(--raise-a),var(--raise-b));
  border-bottom:2px solid var(--rim);box-shadow:var(--shadow);
  padding:15px 30px;border-radius:999px;font-size:12px;font-weight:600;
  font-family:'Poppins',sans-serif;letter-spacing:.13em;text-transform:uppercase;
  transition:transform .12s ease
}
.btn-google:active{transform:scale(.985)}
.btn-google.busy{pointer-events:none;opacity:.6}
.login-note{margin-top:20px;color:var(--muted);font-size:11px;line-height:1.6}

.splash-loader{position:absolute;bottom:84px;display:flex;gap:7px}
.splash-loader span{width:6px;height:6px;border-radius:50%;background:var(--muted-2);opacity:.4}
.splash-loader span:nth-child(2){opacity:.7}
.splash-loader span:nth-child(3){opacity:1}

.version-tag{position:absolute;right:18px;bottom:16px;font-size:10px;color:var(--muted-2);letter-spacing:.12em;z-index:3}

/* =========================================================
   Kerangka aplikasi
   ========================================================= */
#app{min-height:100dvh;background:var(--bg);display:flex;flex-direction:column;
  max-width:520px;margin:0 auto;position:relative}

.app-header{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  gap:10px;padding:calc(env(safe-area-inset-top) + 12px) 16px 12px;
  /* Rapat, bukan kaca buram: konten yang lewat di baliknya tertutup
     bersih sehingga tidak terlihat seperti bayangan yang belepotan. */
  /* Tanpa garis dan tanpa bayangan: dulu keduanya membentuk pita
     tipis yang terlihat seperti layar terpotong. Warnanya sama persis
     dengan latar, jadi header menyatu bersih. */
  background:var(--bg)
}
.brand{display:flex;align-items:center;gap:10px;padding:4px;border-radius:var(--tile);
  transition:none;transform:none}
.brand:active{transform:none}
.brand img{width:28px;filter:var(--logo-filter)}
.brand-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.15}
.brand-text b{font-size:13px;letter-spacing:.15em;font-weight:600}
.brand-text i{font-style:normal;font-size:9px;color:var(--muted);letter-spacing:.06em}

.bell{width:46px;height:46px;display:grid;place-items:center;border-radius:var(--tile)}
.badge-wrap{position:relative;flex:none;display:block}
.badge{
  position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;
  display:grid;place-items:center;border-radius:999px;background:var(--like);color:#fff;
  font-size:10px;font-weight:600;font-family:'Poppins',sans-serif;line-height:1;
  box-shadow:0 0 0 2.5px var(--bg), 0 2px 6px rgba(0,0,0,.5);pointer-events:none;z-index:2
}

.view{flex:1;padding:4px 16px calc(env(safe-area-inset-bottom) + 88px)}
body.has-composer .view{padding-bottom:calc(env(safe-area-inset-bottom) + 84px)}

.page-title{
  text-align:center;font-size:11px;letter-spacing:.26em;margin:10px 0 20px;
  font-weight:600;text-transform:uppercase
}

/* ---------- Bar bawah ---------- */
.bottom-bar{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;z-index:35;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  /* Ikon duduk lebih rendah, menempel rapi pada tepi bawah layar.
     Ruang untuk garis home iPhone diambil dari safe-area, jadi di HP
     tanpa garis itu bar-nya ikut merapat sendiri. */
  /* Ikon turun merapat ke tepi bawah. Ruang untuk garis home iPhone
     tetap disisakan, tapi tidak berlebihan seperti sebelumnya. */
  padding:6px 16px max(2px, calc(env(safe-area-inset-bottom) - 30px));
  /* Rapat, tanpa blur, tanpa garis, tanpa bayangan. */
  background:var(--bg);
  pointer-events:auto
}
body.has-composer .bottom-bar{display:none}
.bottom-bar>*{pointer-events:auto}
.bb-left{display:flex;gap:10px}
.circle-btn{width:48px;height:48px;border-radius:var(--tile);display:grid;place-items:center}
.circle-btn.active{background:linear-gradient(180deg,var(--raise-hi),var(--raise-a))}
.me-pill{display:flex;align-items:center;gap:11px;padding:7px 8px 7px 18px;border-radius:999px;max-width:64%}
.me-text{display:flex;flex-direction:column;align-items:flex-start;line-height:1.2;overflow:hidden}
.me-text b{font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:124px}
.me-text i{font-style:normal;font-size:10px;color:var(--muted);white-space:nowrap}
.me-ava{width:38px;height:38px;border-radius:50%;overflow:hidden;background:var(--sunken);flex:none}
.me-ava img{width:100%;height:100%;object-fit:cover}

/* =========================================================
   Baris story
   ========================================================= */
.story-row{display:flex;gap:14px;overflow-x:auto;padding:6px 2px 18px;scrollbar-width:none}
.story-row::-webkit-scrollbar{display:none}
.story-item{position:relative;flex:none;display:flex;flex-direction:column;align-items:center;gap:9px;width:70px}
.story-ring{
  width:64px;height:64px;border-radius:50%;padding:2.5px;border:0;
  background:linear-gradient(155deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 48%,rgba(255,255,255,.07) 100%);
  box-shadow:0 5px 12px rgba(0,0,0,.42), inset 0 1px 0 var(--glass-edge);
  transition:transform .14s ease
}
.story-ring.unseen{
  background:linear-gradient(155deg,rgba(255,255,255,.62) 0%,rgba(255,255,255,.16) 45%,rgba(255,255,255,.40) 100%)
}
.story-item:active .story-ring{transform:scale(.955)}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:var(--sunken);
  border:2.5px solid var(--bg)}
.story-name{font-size:9.5px;color:var(--muted);max-width:70px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;letter-spacing:.02em}
.story-add{
  position:absolute;top:44px;right:2px;width:22px;height:22px;border-radius:50%;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));color:var(--text);
  display:grid;place-items:center;border:2.5px solid var(--bg);
  box-shadow:0 3px 8px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-edge)
}
.story-add svg{width:11px;height:11px;stroke-width:2.4}
.cm-reply-to{font-size:9.5px;color:var(--muted-2);letter-spacing:.03em;margin-left:6px}

/* =========================================================
   Kartu postingan
   ========================================================= */
.post{border-radius:var(--r-lg);overflow:hidden;margin-bottom:14px}
.post-head{display:flex;align-items:center;gap:10px;padding:12px 12px 10px}
.head-pill{display:flex;align-items:center;gap:10px;border-radius:999px;padding:5px 18px 5px 5px;max-width:100%}
.ava{width:36px;height:36px;border-radius:50%;overflow:hidden;background:var(--sunken);flex:none;display:block}
.ava img{width:100%;height:100%;object-fit:cover}
.ava.sm{width:31px;height:31px}
.ava.xs{width:25px;height:25px}
.head-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.head-meta b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:600}
.music-line{font-style:normal;font-size:9.5px;color:var(--muted);display:flex;align-items:center;gap:5px;min-width:0}
.music-line svg{width:10px;height:10px;flex:none}
.music-line span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.post-media{position:relative;aspect-ratio:800/360;display:grid;place-items:center;overflow:hidden;
  margin:0 12px;border-radius:var(--r-md)}
.post-media img,.post-media video{width:100%;height:100%;object-fit:cover}
.post-media img{cursor:zoom-in}
.post-media .caption{
  position:absolute;left:14px;right:14px;bottom:12px;font-size:11.5px;color:#fff;
  text-shadow:0 1px 10px rgba(0,0,0,.9);line-height:1.4
}
.post-media .loc{
  position:absolute;left:12px;top:12px;display:flex;align-items:center;gap:5px;font-size:10px;
  background:rgba(0,0,0,.55);padding:5px 11px;border-radius:999px;color:#fff
}
.post-media .empty{padding:0;color:var(--muted)}
.post-actions{display:flex;align-items:center;gap:20px;padding:14px 18px}
.act{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);transition:transform .12s ease}
.act:active{transform:scale(.94)}
.act.liked{color:var(--like)}
.act.liked .ic{fill:var(--like);stroke:var(--like)}

.like-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border-radius:999px;padding:9px 16px;margin:0 0 18px;font-size:10.5px}
.like-bar .left{display:flex;align-items:center;gap:8px;min-width:0}
.like-bar .heart{width:12px;height:12px;fill:var(--like);flex:none}
.like-bar .who{color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.like-bar .right{color:var(--muted);white-space:nowrap;font-size:10px}

.dbl-heart{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.dbl-heart svg{width:86px;height:86px;fill:#fff;opacity:.9;filter:drop-shadow(0 4px 18px rgba(0,0,0,.6))}

/* =========================================================
   Komentar
   ========================================================= */
.comment{display:flex;gap:10px;margin-bottom:12px}
.comment-wrap{margin-bottom:2px}

/* Utas balasan: dilekukkan dan diberi garis penghubung tipis,
   sehingga rantai percakapan terbaca jelas sampai beberapa tingkat. */
.cm-thread{margin-left:18px;padding-left:16px;border-left:1.5px solid var(--rim);margin-top:2px}
.cm-thread.hidden{display:none}

.cm-toggle{
  display:flex;align-items:center;gap:9px;margin:0 0 10px 18px;padding:5px 0;
  font-size:10px;letter-spacing:.06em;color:var(--muted);background:none;box-shadow:none;border:0
}
.cm-toggle i{display:block;width:22px;height:1.5px;background:var(--rim);flex:none}
.cm-toggle span{white-space:nowrap}


.cm-body{flex:1;min-width:0}
.cm-name{display:inline-flex;border-radius:999px;padding:5px 15px;font-size:11px;font-weight:600;
  font-family:'Poppins',sans-serif;letter-spacing:.04em}
.cm-text{font-size:12.5px;margin:6px 0 0;padding-left:4px;word-break:break-word}
.cm-tools{display:flex;align-items:center;gap:12px;margin-top:8px;padding-left:4px}
.cm-like{display:flex;align-items:center;gap:5px;font-size:10px;color:var(--muted)}
.cm-like.liked{color:var(--like)}
.cm-like.liked .ic{fill:var(--like);stroke:var(--like)}
.cm-like .ic{width:14px;height:14px}
.chip-btn{display:flex;align-items:center;gap:6px;border-radius:9px;padding:5px 11px;font-size:9.5px;
  color:var(--muted);letter-spacing:.04em}
.chip-btn svg{width:12px;height:12px}
.total-chip{display:inline-block;border-radius:9px;padding:6px 13px;font-size:10px;color:var(--muted);margin-bottom:16px}

.composer{
  position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:520px;z-index:36;
  display:flex;flex-direction:column;gap:8px;
  padding:6px 16px max(2px, calc(env(safe-area-inset-bottom) - 30px));
  background:var(--bg)
}
.composer-row{display:flex;align-items:center;gap:10px}

/* Penanda "sedang membalas" menempel di dalam kolom yang sama,
   jadi tidak pernah ada dua kolom tulis di layar. */
.composer-reply-chip{
  display:flex;align-items:center;gap:9px;border-radius:11px;padding:7px 10px 7px 12px;
  background:var(--sunken);box-shadow:inset 0 1px 2px rgba(0,0,0,.45);
  font-size:10.5px;color:var(--muted)
}
.composer-reply-chip .crc-mark{display:grid;place-items:center;flex:none}
.composer-reply-chip .crc-mark svg{width:13px;height:13px;stroke:var(--muted)}
.composer-reply-chip .crc-text{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.composer-reply-chip .crc-close{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  flex:none;background:none;box-shadow:none;border:0}
.composer-reply-chip .crc-close svg{width:13px;height:13px}
.composer .field{flex:1;display:flex;align-items:center;gap:8px;border-radius:999px;padding:11px 18px}
.composer input{flex:1;background:none;border:0;outline:none;font-size:12.5px;min-width:0}
.composer input::placeholder{color:var(--muted-2)}
.send-btn{width:44px;height:44px;border-radius:var(--tile);display:grid;place-items:center;flex:none;
  transition:transform .12s ease}
.send-btn:active{transform:scale(.93)}
.reply-hint{
  position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 76px);
  width:calc(100% - 32px);max-width:488px;z-index:36;display:flex;align-items:center;justify-content:space-between;
  border-radius:12px;padding:8px 14px;font-size:10.5px;color:var(--muted)
}
.reply-hint .chip-btn{box-shadow:none;border:0;background:none;padding:4px}

/* =========================================================
   Notifikasi
   ========================================================= */
.notif{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:12px 14px;
  margin-bottom:11px;position:relative;overflow:hidden}
.notif.unread{background:linear-gradient(180deg,var(--raise-hi),var(--raise-a))}
.notif.unread::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--text);opacity:.7}
.notif .nf-body{flex:1;min-width:0}
.notif .nf-body b{display:block;font-size:11.5px;letter-spacing:.07em;text-transform:uppercase;font-weight:600}
.notif .nf-body p{margin:3px 0 0;font-size:11px;color:var(--muted);line-height:1.45}
.notif .nf-body .quote{color:var(--text);font-style:italic}
.notif .nf-thumb{width:44px;height:44px;border-radius:12px;background:var(--sunken);overflow:hidden;flex:none}
.notif .nf-thumb img,.notif .nf-thumb video{width:100%;height:100%;object-fit:cover}
.notif time{font-size:9.5px;color:var(--muted-2);display:block;margin-top:4px}
.nf-del{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;color:var(--muted-2);
  flex:none;background:none;border:0;box-shadow:none;transition:transform .12s ease,color .12s ease}
.nf-del svg{width:13px;height:13px}
.nf-del:active{transform:scale(.88);color:var(--like)}
.notif.system .sys-logo{width:38px;height:38px;border-radius:50%;background:var(--sunken);display:grid;place-items:center;flex:none}
.notif.system .sys-logo img{width:22px;filter:var(--logo-filter)}

/* =========================================================
   Obrolan
   ========================================================= */
.chat-item{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:12px 14px;margin-bottom:11px}
.chat-item .ci-body{flex:1;min-width:0}
.chat-item .ci-body b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;font-weight:600}
.chat-item .ci-body p{margin:2px 0 0;font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.call-btn{width:42px;height:42px;border-radius:var(--tile);display:grid;place-items:center;flex:none;
  transition:transform .12s ease}
.call-btn:active{transform:scale(.93)}

.msg-list{display:flex;flex-direction:column;gap:9px;padding:14px;border-radius:var(--r-lg);
  margin-bottom:10px;min-height:240px}
.msg{max-width:78%;padding:10px 15px;border-radius:16px;font-size:13px;word-break:break-word}
.msg.them{align-self:flex-start;background:linear-gradient(180deg,var(--raise-a),var(--raise-b));
  border-bottom:2px solid var(--rim);border-bottom-left-radius:6px}
.msg.me{align-self:flex-end;background:var(--text);color:var(--bg);border-bottom-right-radius:6px}
.msg time{display:block;font-size:9px;opacity:.5;margin-top:4px}
.chat-top{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);padding:10px 14px;margin-bottom:12px}
.chat-top .ct-body{flex:1;min-width:0}
.chat-top .ct-body b{display:block;font-size:12.5px}
.chat-top .ct-body i{font-style:normal;font-size:10px;color:var(--muted)}

/* =========================================================
   Berbagi cerita
   ========================================================= */
.seg{display:flex;gap:6px;border-radius:999px;padding:5px;margin:0 0 16px}
.seg button{flex:1;padding:11px;border-radius:999px;font-size:10px;color:var(--muted);
  font-family:'Poppins',sans-serif;letter-spacing:.11em;text-transform:uppercase;font-weight:600}
.seg button.on{background:var(--text);color:var(--bg)}

.drop{position:relative;border-radius:var(--r-lg);aspect-ratio:3/4;display:grid;place-items:center;overflow:hidden}
.drop .ph{display:flex;flex-direction:column;align-items:center;gap:16px;color:var(--muted);pointer-events:none}
.drop .ph span{font-size:12px}
.drop .plus{width:70px;height:70px;border-radius:50%;border:2px solid var(--text);display:grid;place-items:center;color:var(--text)}
.drop .plus svg{width:30px;height:30px;stroke-width:1.9}
.drop.filled .ph{display:none}
.drop img,.drop video{width:100%;height:100%;object-fit:cover}
.drop .clear{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:var(--tile);
  background:rgba(0,0,0,.6);display:grid;place-items:center;color:#fff}

.row-field{display:flex;align-items:center;gap:12px;border-radius:999px;padding:13px 16px;margin-top:12px}
.row-field .lab{flex:none;display:flex;align-items:center;gap:11px;font-family:'Poppins',sans-serif;
  font-weight:600;letter-spacing:.14em;font-size:12px;text-transform:uppercase}
.row-field input{flex:1;background:none;border:0;outline:none;font-size:12.5px;min-width:0;text-align:right}
.row-field input::placeholder{color:var(--muted-2)}
.sq-btn{width:27px;height:27px;border-radius:9px;display:grid;place-items:center;color:var(--muted);flex:none}
.sq-btn svg{width:13px;height:13px}

.caption-box{position:relative;border-radius:var(--r-lg);margin-top:14px;padding:18px 18px 62px}
.caption-box textarea{width:100%;min-height:66px;background:none;border:0;outline:none;resize:none;
  font-size:12.5px;line-height:1.55}
.caption-box textarea::placeholder{color:var(--muted-2)}
.caption-box .send-btn{position:absolute;right:14px;bottom:14px}

/* =========================================================
   Profil
   ========================================================= */
.cover{position:relative;margin-bottom:14px}
.cover-media{height:172px;border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden}
.cover-media img{width:100%;height:100%;object-fit:cover}
.cover-auto{position:absolute;inset:0;background:var(--sunken)}
.ava-auto img{padding:22%;object-fit:contain;filter:var(--logo-filter);opacity:.9}
.ava-auto{box-shadow:inset 0 0 0 1px var(--edge)}
.cover .edit-fab{position:absolute;right:12px;top:12px;z-index:3}

.prof-row{display:flex;align-items:flex-end;gap:14px;margin-top:-42px;position:relative;z-index:2;padding:0 4px}
.avatar-wrap{position:relative;flex:none}
.avatar-wrap .ava{width:88px;height:88px;border:4px solid var(--bg);box-shadow:var(--shadow)}
.avatar-wrap .ph-label{position:absolute;inset:0;display:grid;place-items:center;font-size:8px;font-weight:600;
  font-family:'Poppins',sans-serif;color:var(--muted);pointer-events:none;letter-spacing:.06em}
.avatar-wrap .edit-fab{position:absolute;right:-2px;bottom:4px}
.edit-fab{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:var(--text)}
.edit-fab svg{width:14px;height:14px}

.prof-id{flex:1;min-width:0;padding-bottom:8px}
.prof-id b{display:block;font-size:13.5px;text-transform:uppercase;letter-spacing:.05em;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prof-id i{font-style:normal;font-size:11.5px;color:var(--muted)}
.owner-tag{display:inline-flex;align-items:center;border-radius:999px;padding:3px 10px;font-size:8px;
  font-weight:600;font-family:'Poppins',sans-serif;letter-spacing:.12em;margin-left:8px;vertical-align:middle;
  background:var(--gold);color:#22200E}

.stats{display:flex;gap:10px;margin:18px 0 12px}
.stat{flex:1;border-radius:var(--r-md);padding:13px 8px;text-align:center;transition:transform .12s ease}
.stat:active{transform:scale(.97)}
.stat b{display:block;font-size:17px;font-family:'Poppins',sans-serif;font-weight:600}
.stat i{font-style:normal;font-size:8.5px;color:var(--muted);letter-spacing:.14em;text-transform:uppercase}

.prof-actions{display:flex;gap:10px;margin-bottom:14px}
.btn{flex:1;padding:14px;border-radius:999px;font-size:10.5px;font-weight:600;font-family:'Poppins',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;transition:transform .12s ease;
  display:flex;align-items:center;justify-content:center;gap:9px}
.btn:active{transform:scale(.985)}
.btn.primary{background:var(--text);color:var(--bg);border-bottom-color:rgba(0,0,0,.22)}
.btn.danger{color:var(--like)}
.btn svg{width:15px;height:15px}

.links{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:14px}
.link-chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:9px 16px;
  font-size:10.5px;color:var(--text);text-decoration:none;letter-spacing:.06em}
.link-chip svg{width:13px;height:13px}

.section-head{display:flex;align-items:center;justify-content:space-between;margin:22px 0 10px}
.section-head b{font-size:10px;letter-spacing:.24em;text-transform:uppercase;color:var(--muted)}
.divider{height:2px;border-radius:999px;background:var(--rim);margin-bottom:16px}

.field-row{display:flex;align-items:center;gap:12px;border-radius:999px;padding:14px 16px;margin-bottom:11px}
.field-row label{font-family:'Poppins',sans-serif;font-weight:600;font-size:11.5px;flex:none;letter-spacing:.04em}
.field-row input{flex:1;background:none;border:0;outline:none;font-size:12.5px;min-width:0;text-align:right}
.field-row input::placeholder{color:var(--muted-2)}

.tool-row{display:flex;justify-content:center;gap:40px;margin:34px 0 12px}
.tool-btn{width:54px;height:54px;border-radius:var(--tile);display:grid;place-items:center;transition:transform .12s ease}
.tool-btn:active{transform:scale(.93)}
.tool-btn .ic{width:23px;height:23px}

/* ---------- Panel owner ---------- */
.owner-panel{border-radius:var(--r-lg);padding:18px;margin-bottom:18px;border-bottom:2px solid var(--gold)}
.owner-panel h3{margin:0 0 6px;font-size:11.5px;display:flex;align-items:center;gap:9px;
  letter-spacing:.14em;text-transform:uppercase}
.owner-panel p.hint{margin:0 0 16px;font-size:10.5px;color:var(--muted);line-height:1.55}
.owner-panel .field-row{border-radius:14px}
.owner-panel .field-row input{text-align:left}
.dot-live{width:7px;height:7px;border-radius:50%;background:var(--gold);flex:none}

.maint-banner{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:10px;
  background:var(--gold);color:#22200E;padding:10px 16px;font-size:10.5px;font-weight:600}
.maint-banner .dot-live{background:#22200E}
.mini-btn{background:#22200E;color:var(--gold);border-radius:999px;padding:6px 14px;font-size:10px;
  font-weight:600;margin-left:auto;flex:none;letter-spacing:.06em}

.maint{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 36px;z-index:70}
.maint-logo{width:88px;filter:var(--logo-filter)}
.maint h2{margin:26px 0 10px;font-size:16px;letter-spacing:.08em;text-transform:uppercase}
.maint p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.7;max-width:340px}
.maint-pulse{display:flex;gap:8px;margin-top:28px}
.maint-pulse span{width:7px;height:7px;border-radius:50%;background:var(--muted-2);opacity:.4}
.maint-pulse span:nth-child(2){opacity:.7}
.maint-pulse span:nth-child(3){opacity:1}

/* =========================================================
   Story viewer
   ========================================================= */
.story-viewer{position:fixed;inset:0;z-index:80;background:#000;display:flex;flex-direction:column}
.story-bars{display:flex;gap:4px;padding:calc(env(safe-area-inset-top) + 12px) 14px 6px;z-index:3}
.sbar{flex:1;height:2.5px;border-radius:999px;background:rgba(255,255,255,.25);overflow:hidden}
.sbar i{display:block;height:100%;width:0;background:#fff;border-radius:999px}
.sbar.done i{width:100%}
.sbar.active i{animation:fill linear forwards}
@keyframes fill{from{width:0}to{width:100%}}
.story-head{position:absolute;top:calc(env(safe-area-inset-top) + 24px);left:0;right:0;
  display:flex;align-items:center;justify-content:space-between;padding:10px 14px;z-index:4}
.story-user{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.10);border-radius:999px;padding:5px 18px 5px 5px}
.story-meta{display:flex;flex-direction:column;line-height:1.25}
.story-meta b{font-size:12.5px;color:#fff}
.story-meta .music-line{color:rgba(255,255,255,.72)}
.story-tools{display:flex;gap:9px}
.icon-btn{width:38px;height:38px;border-radius:var(--tile);display:grid;place-items:center;
  background:rgba(255,255,255,.10);color:#fff}
.story-stage{position:absolute;inset:0;display:grid;place-items:center;background:#000}
.story-stage img,.story-stage video{width:100%;height:100%;object-fit:contain}
.story-stage .story-caption{position:absolute;left:22px;right:22px;bottom:108px;color:#fff;font-size:13px;
  text-align:center;text-shadow:0 2px 14px rgba(0,0,0,.9)}
.story-nav{position:absolute;inset:0;display:flex;z-index:2}
.story-nav button{flex:1;background:none}
.story-reply{position:absolute;left:0;right:0;bottom:0;z-index:5;display:flex;align-items:center;gap:10px;
  padding:14px 18px calc(env(safe-area-inset-bottom) + 18px)}
.story-reply input{flex:1;background:rgba(255,255,255,.09);border:0;border-radius:999px;
  padding:13px 20px;color:#fff;outline:none;font-size:12px}
.story-reply input::placeholder{color:rgba(255,255,255,.55)}
.story-reply .send-btn{background:rgba(255,255,255,.14);color:#fff;border-bottom-color:rgba(255,255,255,.16);box-shadow:none}

/* =========================================================
   Sheet, lightbox, toast
   ========================================================= */
.sheet-wrap{position:fixed;inset:0;z-index:90;display:flex;align-items:flex-end;justify-content:center}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.66)}
.sheet{position:relative;width:100%;max-width:520px;background:var(--glass);
  backdrop-filter:blur(24px) saturate(130%);-webkit-backdrop-filter:blur(24px) saturate(130%);border-radius:26px 26px 0 0;
  padding:12px 20px calc(env(safe-area-inset-bottom) + 24px);max-height:86dvh;overflow-y:auto;
  box-shadow:0 -14px 40px rgba(0,0,0,.6)}
.sheet .grab{width:40px;height:4px;border-radius:999px;background:var(--rim);margin:6px auto 18px}
.sheet h3{margin:0 0 14px;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
.sheet .list-item{display:flex;align-items:center;gap:12px;padding:14px 12px;border-radius:14px;width:100%;text-align:left}
.sheet .list-item span{flex:1;font-size:13px}
.sheet .btn{margin-bottom:9px}

.lightbox{position:fixed;inset:0;z-index:95;background:rgba(0,0,0,.95);display:grid;place-items:center}
.lb-inner{display:grid;place-items:center;width:100%;height:100%}
.lightbox img,.lightbox video{width:auto;height:auto;max-width:96vw;max-height:90dvh;
  object-fit:contain;aspect-ratio:auto;border-radius:10px;background:#000}

.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 100px);
  z-index:120;background:var(--text);color:var(--bg);padding:12px 22px;border-radius:999px;
  font-size:11.5px;font-weight:600;box-shadow:var(--shadow-lg);max-width:88vw;text-align:center;line-height:1.5}
.update-bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom) + 100px);
  z-index:110;display:flex;align-items:center;gap:12px;border-radius:999px;
  padding:10px 10px 10px 20px;font-size:11.5px;box-shadow:var(--shadow-lg)}
.update-bar .mini-btn{background:var(--text);color:var(--bg)}

/* =========================================================
   Skeleton diam & keadaan kosong
   ========================================================= */
.skel{border-radius:var(--r-lg);margin-bottom:14px}
.skel.post-skel{height:400px}
.skel.row-skel{height:64px;border-radius:var(--r-md)}
.skel.circle{width:60px;height:60px;border-radius:50%;margin:0}

.empty{text-align:center;padding:58px 24px;color:var(--muted)}
.empty svg{width:40px;height:40px;margin-bottom:16px;opacity:.4;stroke:currentColor;fill:none;stroke-width:1.4}
.empty b{display:block;color:var(--text);font-size:13.5px;margin-bottom:8px;letter-spacing:.04em}
.empty p{margin:0 0 20px;font-size:12px;line-height:1.6}
.empty .btn{display:inline-flex;flex:none;padding:13px 26px}

.pull-hint{text-align:center;font-size:10px;color:var(--muted-2);padding:8px 0 16px;letter-spacing:.08em}

:focus-visible{outline:2px solid var(--text);outline-offset:2px;border-radius:8px}

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

/* =========================================================
   Penyesuaian lintas ukuran layar
   Tujuannya satu: tata letak yang sama terasa pas di HP mungil
   maupun di layar besar, tanpa ada yang terpotong.
   ========================================================= */

/* HP kecil / sempit — mis. iPhone SE, Android 5 inci */
@media (max-width:359px){
  .app-header{padding-left:12px;padding-right:12px}
  .brand img{width:24px}
  .brand-text b{font-size:11.5px;letter-spacing:.11em}
  .brand-text i{font-size:8px}
  .bell{width:40px;height:40px}
  .view{padding-left:12px;padding-right:12px}
  .bottom-bar{gap:8px;padding-left:12px;padding-right:12px}
  .circle-btn{width:42px;height:42px}
  .me-pill{padding:6px 6px 6px 13px;gap:8px;max-width:60%}
  .me-ava{width:33px;height:33px}
  .me-text b{font-size:11.5px;max-width:88px}
  .me-text i{font-size:9px}
  .post-media{margin:0 8px}
  .story-ring{width:56px;height:56px}
  .story-item{width:62px}
  .story-add{top:38px}
  .cm-thread{margin-left:12px;padding-left:11px}
  .cm-toggle{margin-left:12px}
}

/* HP besar dan layar lipat dalam mode lebar */
@media (min-width:430px){
  .view{padding-left:20px;padding-right:20px}
  .bottom-bar{padding-left:20px;padding-right:20px}
  .composer{padding-left:20px;padding-right:20px}
}

/* Layar pendek (HP lawas atau papan ketik terbuka):
   rapatkan jarak agar isi tetap terlihat */
@media (max-height:700px){
  .app-header{padding-top:calc(env(safe-area-inset-top) + 8px);padding-bottom:8px}
  .story-row{padding-bottom:12px}
  .post{margin-bottom:10px}
}

/* =========================================================
   Tablet — termasuk mode potret
   Dulu lebarnya dipatok 520px, sehingga di tablet potret isinya
   menyempit di tengah dan terasa mungil. Sekarang lebar maksimum
   ikut membesar dan ukuran huruf naik sedikit agar tetap terbaca
   nyaman dari jarak pandang tablet.
   ========================================================= */
@media (min-width:600px){
  #app,.bottom-bar,.composer,.sheet{max-width:680px}
  html{font-size:17px}
  .view{padding-left:24px;padding-right:24px}
  .post-media{margin:0 14px}
  .post-text{margin:0 14px;padding:26px 24px}
  .post-text .pt-body{font-size:15.5px}
}

@media (min-width:820px){
  #app,.bottom-bar,.composer,.sheet{max-width:760px}
  html{font-size:18px}
}

/* Tablet potret secara khusus: pakai hampir seluruh lebar layar
   supaya tidak ada pita kosong lebar di kiri dan kanan. */
@media (min-width:600px) and (orientation:portrait){
  #app,.bottom-bar,.composer,.sheet{max-width:min(94vw, 760px)}
}

/* Desktop: aplikasi berdiri di tengah dengan tepi halus */
@media (min-width:640px){
  body{background:#0E1011}
  #app{box-shadow:0 0 0 1px var(--rim-soft), 0 30px 80px rgba(0,0,0,.55)}
  .bottom-bar,.composer{border-radius:0}
}

/* Perangkat tanpa layar sentuh: beri isyarat saat kursor lewat */
@media (hover:hover){
  .circle-btn:hover,.bell:hover,.chip-btn:hover{filter:brightness(1.14)}
  .post-media img:hover{filter:brightness(1.04)}
}

/* =========================================================
   Tarik ke bawah untuk memuat ulang
   ========================================================= */
.pull-refresh{
  position:fixed;left:50%;top:calc(env(safe-area-inset-top) + 8px);z-index:29;
  transform:translate(-50%,-64px);opacity:0;pointer-events:none;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:0 8px 20px rgba(0,0,0,.55), inset 0 1px 0 var(--glass-edge)
}
.pull-refresh .pr-ring{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--rim);border-top-color:var(--muted-2)
}
.pull-refresh .pr-ring img{width:15px;filter:var(--logo-filter);opacity:.75}
.pull-refresh.ready .pr-ring{border-top-color:var(--text)}
.pull-refresh.ready .pr-ring img{opacity:1}
.pull-refresh.spinning .pr-ring{animation:pr-spin .75s linear infinite}
@keyframes pr-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .pull-refresh.spinning .pr-ring{animation:none}
}

/* Komentar yang sudah dihapus & tombol hapus */
.chip-btn.danger{color:var(--like)}
.chip-btn.danger svg{stroke:var(--like)}
.cm-deleted{color:var(--muted-2);font-style:italic}
.comment.is-deleted .ava{opacity:.35}
.comment.is-deleted .cm-name{opacity:.5}

/* Penanda pada balasan: siapa yang sedang dibalas */
.cm-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

/* Pesan yang ditarik & tombol berbahaya di baris obrolan */
.msg.withdrawn span{color:var(--muted-2);font-style:italic}
.msg.pressed{transform:scale(.97);opacity:.75}
.msg{transition:transform .12s ease, opacity .12s ease}
.call-btn.danger svg{stroke:var(--like)}

/* Postingan teks: kartu yang tingginya mengikuti panjang tulisan */
.post-text{
  margin:0 10px;border-radius:18px;padding:22px 20px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 1px 0 var(--glass-edge), 0 8px 20px -16px #000;
  position:relative
}
.post-text .pt-body{
  margin:0;font-size:14.5px;line-height:1.7;color:var(--text);
  white-space:pre-wrap;word-break:break-word
}
.post-text .loc{position:static;margin-top:12px;display:inline-flex}

/* Tautan di dalam teks */
a.tautan{color:#7FB2FF;text-decoration:none;border-bottom:1px solid rgba(127,178,255,.35);word-break:break-all}
a.tautan:active{opacity:.65}

/* =========================================================
   JOURNAL TRADING & SIGNAL OUTLOOK
   ========================================================= */
.tf-tabs{display:flex;gap:9px;margin:2px 0 14px;flex-wrap:wrap}
.tf-tab{padding:9px 16px;border-radius:999px;font-size:11.5px;letter-spacing:.04em;
  color:var(--muted);background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--glass-edge);border:0}
.tf-tab.on{color:var(--text);box-shadow:inset 0 0 0 1.6px var(--muted-2), inset 0 1px 0 var(--glass-edge)}

.tf-link{display:flex;align-items:center;gap:10px;width:100%;margin:0 0 16px;
  padding:12px 16px;border-radius:14px;font-size:11.5px;color:var(--muted);
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge);border:0}
.tf-link svg{width:15px;height:15px;flex:none}

.tf-wrap{display:flex;flex-direction:column;gap:14px}
.tf-grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tf-field{display:flex;flex-direction:column;gap:7px}
.tf-field>span{font-size:9.5px;letter-spacing:.13em;color:var(--muted-2);text-transform:uppercase}

.tf-input{width:100%;border-radius:13px;padding:13px 15px;font-size:13px;color:var(--text);
  background:var(--sunken);border:0;outline:none;
  box-shadow:inset 0 0 0 1px var(--edge);
  font-family:inherit;-webkit-appearance:none;appearance:none}
select.tf-input{background-image:none}
textarea.tf-input{resize:vertical;line-height:1.6}
.tf-input::placeholder{color:var(--muted-2)}
.tf-readonly{display:flex;align-items:center;color:var(--muted);font-weight:700}

.tf-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;align-items:stretch}
.tf-stat{border-radius:14px;padding:14px 8px;text-align:center;min-height:74px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--glass-edge)}
.tf-stat b{display:block;font-size:15px}
.tf-stat i{display:block;margin-top:5px;font-size:8.5px;letter-spacing:.11em;
  color:var(--muted-2);font-style:normal;text-transform:uppercase}

.tf-chart-title{text-align:center;font-size:10px;letter-spacing:.16em;color:var(--muted);
  text-transform:uppercase;margin:4px 0}
.tf-chart{border-radius:16px;padding:8px;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--edge)}
.tf-chart svg{display:block;width:100%;height:132px}

.tf-item{position:relative;border-radius:16px;padding:16px 16px 14px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--glass-edge)}
.tf-item-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.tf-item-top b{font-size:13px}
.tf-badge{font-size:10px;letter-spacing:.1em}
.tf-item-sub{margin:7px 0 0;font-size:11.5px;color:var(--muted);line-height:1.6}
.tf-item time{display:block;margin-top:9px;font-size:10px;color:var(--muted-2)}
.tf-del{margin-top:11px}
.tf-note{margin:9px 0 0;font-size:12px;line-height:1.7;color:var(--muted);
  white-space:pre-wrap;word-break:break-word}
.tf-lead{margin:0;font-size:11.5px;line-height:1.7;color:var(--muted)}

.tf-shots{display:flex;gap:9px;overflow-x:auto;margin-top:11px;padding-bottom:3px}
.tf-shots img{width:82px;height:82px;object-fit:cover;border-radius:11px;flex:none;
  box-shadow:inset 0 0 0 1px var(--edge)}

.tf-pick{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px;border-radius:13px;font-size:11px;color:var(--muted);
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge);border:0}
.tf-pick svg{width:14px;height:14px}
.tf-pick.busy{opacity:.5}

.tf-rows{display:flex;flex-direction:column;gap:9px}
.tf-row{display:flex;align-items:center;gap:8px}
.tf-x{width:38px;height:38px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge);border:0}
.tf-x svg{width:13px;height:13px}

.tf-check{display:flex;align-items:center;gap:11px;font-size:11.5px;color:var(--muted);
  padding:12px 14px;border-radius:13px;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--edge)}
.tf-check input{width:19px;height:19px;accent-color:var(--text)}

/* Kartu signal outlook */
.ol-card{border-radius:18px;padding:16px;margin-bottom:14px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), inset 0 1px 0 var(--glass-edge)}
.ol-head{display:flex;align-items:center;gap:11px;margin-bottom:12px}
.ol-head-body{flex:1;min-width:0}
.ol-head-body b{display:block;font-size:13px}
.ol-head-body i{display:block;margin-top:2px;font-size:10px;color:var(--muted-2);font-style:normal}
.ol-pos{font-size:10px;letter-spacing:.1em;padding:6px 12px;border-radius:999px;flex:none}
.ol-pos.buy{color:var(--up);box-shadow:inset 0 0 0 1px rgba(64,200,140,.35)}
.ol-pos.sell{color:var(--down);box-shadow:inset 0 0 0 1px rgba(232,84,84,.35)}
.ol-label{display:inline-block;margin-bottom:10px;font-size:9px;letter-spacing:.13em;
  color:var(--muted-2);padding:5px 11px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--edge)}
.ol-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:9px 0;box-shadow:inset 0 -1px 0 var(--edge)}
.ol-row span{font-size:9.5px;letter-spacing:.12em;color:var(--muted-2)}
.ol-row b{font-size:12.5px;text-align:right;word-break:break-word}
.ol-tools{display:flex;gap:9px;flex-wrap:wrap;margin-top:13px}

/* Layar sempit: kartu statistik jadi dua kolom */
@media (max-width:359px){
  .tf-stats{grid-template-columns:repeat(2,1fr)}
  .tf-grid2{grid-template-columns:1fr}
}

/* Story sedang dijeda: bilah kemajuan diredupkan sedikit */
#storyViewer.paused .sbar.active i{opacity:.55}
#storyViewer.paused .story-caption{opacity:.35;transition:opacity .18s ease}

/* =========================================================
   Kehadiran, mengetik, dan centang pesan
   ========================================================= */
.ava-wrap-dot{position:relative;display:inline-flex;flex:none}
.pr-dot{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;
  box-shadow:0 0 0 2.5px var(--bg)}
.pr-dot.on{background:var(--up)}
.pr-dot.busy{background:var(--down)}
.pr-dot.away{background:var(--gold)}
.pr-dot.off{background:var(--muted-2)}

.pr-text{display:block;margin-top:2px;font-size:10px;font-style:normal;color:var(--muted-2)}
.pr-text.on{color:var(--up)}
.pr-text.busy{color:var(--down)}
.pr-text.away{color:var(--gold)}

/* Sedang mengetik */
.typing{display:flex;align-items:center;gap:5px;padding:8px 4px 14px}
.typing span{margin-left:5px;font-size:10.5px;color:var(--muted-2)}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--muted-2);
  animation:tp-bounce 1.1s infinite ease-in-out}
.typing i:nth-child(2){animation-delay:.15s}
.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp-bounce{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-4px);opacity:1}}

/* Centang pesan */
.msg-meta{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:3px}
.msg-meta time{font-size:9.5px;color:var(--muted-2)}
.tick{display:inline-flex;align-items:center}
.tick svg{width:15px;height:15px;fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.tick.sent svg,.tick.delivered svg{stroke:var(--muted-2)}
.tick.read svg{stroke:#3B9DFF}

/* Diagram batang performa */
.tf-bars{display:flex;align-items:flex-end;justify-content:space-around;gap:14px;
  padding:14px 12px;border-radius:16px;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--edge);min-height:150px}
.tf-bar{display:flex;flex-direction:column;align-items:center;gap:7px;flex:1}
.tf-bar b{font-size:12.5px}
.tf-bar-track{width:26px;height:88px;border-radius:8px;display:flex;align-items:flex-end;
  background:rgba(128,128,128,.10);overflow:hidden}
.tf-bar-track i{display:block;width:100%;border-radius:8px;min-height:3px;
  transition:height .4s cubic-bezier(.22,1,.36,1)}
.tf-bar span{font-size:8.5px;letter-spacing:.1em;color:var(--muted-2)}

/* Lampiran foto pada kolom komentar */
.foto-btn{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge);border:0}
.foto-btn svg{width:17px;height:17px}
.foto-btn.busy{opacity:.45}
.composer-foto{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:13px;
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge);font-size:10.5px;color:var(--muted)}
.composer-foto span{flex:1}
.cf-thumb{width:38px;height:38px;border-radius:9px;object-fit:cover;flex:none;background:var(--raise-a)}
.cf-x{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;
  background:none;border:0;box-shadow:none}
.cf-x svg{width:13px;height:13px}

/* Foto di dalam komentar */
.cm-isi{display:flex;flex-direction:column;gap:8px;margin:4px 0 0}
.cm-foto{max-width:190px;width:100%;border-radius:12px;display:block;cursor:zoom-in;
  box-shadow:inset 0 0 0 1px var(--edge)}

/* Baris atas halaman signal */
.ol-topbar{display:flex;align-items:center;gap:10px;margin-bottom:12px;flex-wrap:wrap}

/* =========================================================
   Tampilan lanjutan 1.4.0 — ketajaman, animasi, layar baru
   ========================================================= */

/* Rendering lebih tajam: gambar tidak diperhalus berlebihan
   dan teks memakai antialias halus. */
img, video{image-rendering:auto}
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility}
.ava img,.me-ava img,.story-ring img,.cm-foto,.tf-shots img{
  image-rendering:-webkit-optimize-contrast}

/* ---------- Animasi tombol yang lebih halus ---------- */
.circle-btn,.bell,.me-pill,.btn,.chip-btn,.tf-tab,.pill-btn,.call-btn,
.send-btn,.foto-btn,.tf-pick,.row-item,.chat-item{
  transition:transform .16s cubic-bezier(.2,.9,.3,1),
             filter .16s ease, box-shadow .2s ease, opacity .16s ease;
  will-change:transform
}
.circle-btn:active,.bell:active,.call-btn:active,.send-btn:active,.foto-btn:active{
  transform:scale(.9)
}
.btn:active,.chip-btn:active,.tf-tab:active,.pill-btn:active,.tf-pick:active{
  transform:scale(.965)
}
.me-pill:active{transform:scale(.975)}
.row-item:active,.chat-item:active{transform:scale(.99);filter:brightness(1.06)}

/* Kilau kaca yang sangat tipis — terasa ada, hampir tak terlihat */
.btn,.circle-btn,.bell,.me-pill,.tf-stat,.ol-card,.tf-item,.rk-stat{position:relative;overflow:hidden}
.btn::after,.circle-btn::after,.bell::after,.me-pill::after,
.tf-stat::after,.ol-card::after,.tf-item::after,.rk-stat::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,
    rgba(255,255,255,.018) 0%,
    rgba(255,255,255,.006) 34%,
    rgba(255,255,255,0) 62%);
}
@media (prefers-reduced-motion:reduce){
  .circle-btn,.bell,.btn,.chip-btn,.row-item,.chat-item{transition:none}
}

/* ---------- Menu "mau membuat apa" ---------- */
.menu-buat{display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 16px;border-radius:16px;border:0;margin-bottom:10px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.mb-ikon{width:40px;height:40px;flex:none;border-radius:13px;display:grid;place-items:center;
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.mb-ikon svg{width:17px;height:17px}
.mb-teks{display:flex;flex-direction:column;gap:3px;min-width:0}
.mb-teks b{font-size:12.5px}
.mb-teks i{font-size:10.5px;color:var(--muted);font-style:normal;line-height:1.5}

/* ---------- Kolom pencarian ---------- */
.cari-bar{display:flex;align-items:center;gap:11px;padding:12px 16px;border-radius:15px;
  margin-bottom:14px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.cari-bar svg{width:15px;height:15px;flex:none;stroke:var(--muted-2)}
.cari-input{flex:1;background:none;border:0;outline:none;font-size:13px;color:var(--text);
  min-width:0;font-family:inherit;-webkit-appearance:none}
.cari-input::placeholder{color:var(--muted-2)}
.cari-input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---------- Baris orang ---------- */
.row-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:16px;
  margin-bottom:10px;background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.ri-body{flex:1;min-width:0}
.ri-body b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ri-body i{display:block;margin-top:2px;font-size:10px;color:var(--muted-2);font-style:normal}
.pill-btn{padding:8px 15px;border-radius:999px;font-size:10.5px;flex:none;border:0;
  color:var(--muted);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.pill-btn.on{color:var(--text);box-shadow:inset 0 0 0 1.4px var(--muted-2)}
.member-list{margin-top:12px}

/* ---------- Balasan story di dalam obrolan ---------- */
.msg-story{display:flex;align-items:center;gap:9px;margin-bottom:8px;padding:7px 9px;
  border-radius:11px;background:rgba(0,0,0,.22);cursor:zoom-in}
.msg.me .msg-story{background:rgba(0,0,0,.10)}
.msg-story img,.msg-story video{width:34px;height:46px;object-fit:cover;border-radius:7px;flex:none}
.msg-story span{font-size:9.5px;color:var(--muted-2);line-height:1.4}
.msg.me .msg-story span{color:rgba(0,0,0,.5)}

/* ---------- Penonton story ---------- */
.story-views{position:absolute;left:50%;transform:translateX(-50%);
  bottom:calc(env(safe-area-inset-bottom) + 84px);z-index:6;
  display:flex;align-items:center;gap:8px;padding:9px 16px;border-radius:999px;border:0;
  font-size:11px;color:#fff;background:rgba(0,0,0,.45);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.story-views svg{width:15px;height:15px;stroke:#fff}

/* ---------- Rekap signal ---------- */
.rk-wrap{display:flex;flex-direction:column;gap:14px}
.rk-judul{text-align:center;font-size:13px;letter-spacing:.2em;margin:0}
.rk-lead{margin:0;padding:14px 16px;border-radius:16px;font-size:11.5px;line-height:1.7;
  color:var(--muted);background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.rk-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:9px}
.rk-mini{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.rk-stat{border-radius:15px;padding:15px 6px;text-align:center;min-height:78px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.rk-stat b{font-size:17px;line-height:1}
.rk-stat i{font-size:8px;letter-spacing:.11em;color:var(--muted-2);font-style:normal}
.rk-chart-title{text-align:center;font-size:10px;letter-spacing:.18em;color:var(--muted);
  padding:9px 0;border-radius:999px;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--edge);align-self:center;padding-left:26px;padding-right:26px}
.rk-sub{font-size:9.5px;letter-spacing:.15em;color:var(--muted-2);margin-top:4px}
.rk-list{display:flex;flex-direction:column;gap:10px}
.rk-item{display:flex;align-items:center;gap:12px;padding:14px;border-radius:16px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.rk-ikon{width:36px;height:36px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.rk-ikon svg{width:16px;height:16px}
.rk-body{flex:1;min-width:0}
.rk-body b{display:block;font-size:12.5px}
.rk-body i{display:block;margin-top:3px;font-size:10px;color:var(--muted-2);font-style:normal}
.rk-status{font-size:9.5px;letter-spacing:.09em;flex:none}
.tf-aksi{margin-top:11px;display:inline-flex}

@media (max-width:400px){
  .rk-stats{grid-template-columns:repeat(3,1fr)}
}

/* =========================================================
   Layar awal & layar perbaikan — versi lebih hidup
   ========================================================= */

/* Lambang di dua sudut, dipasang presisi dan simetris */
.wm{width:min(56vw,290px);opacity:.05}
/* Tegak, tidak dimiringkan, dan menempel presisi di pojok layar */
.wm-tl{top:-11%;left:-16%;transform:none}
.wm-br{bottom:-11%;right:-16%;transform:none}

/* Lambang utama bernapas pelan, tidak berputar-putar */
.splash-logo,.maint-logo{
  animation:nafas 4.2s ease-in-out infinite;
  filter:var(--logo-filter) drop-shadow(0 10px 26px rgba(0,0,0,.5))
}
@keyframes nafas{
  0%,100%{transform:translateY(0) scale(1);opacity:.94}
  50%{transform:translateY(-5px) scale(1.02);opacity:1}
}

/* Isi layar masuk perlahan dari bawah */
.splash-center,.maint-logo,.maint h2,.maint p,.maint-pulse{
  animation:naikHalus .7s cubic-bezier(.22,1,.36,1) both
}
.maint h2{animation-delay:.08s}
.maint p{animation-delay:.16s}
.maint-pulse{animation-delay:.24s}
@keyframes naikHalus{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* Titik pemuatan benar-benar bergerak, bukan diam */
.splash-loader span,.maint-pulse span{
  animation:titikJalan 1.25s ease-in-out infinite;
  background:var(--muted-2);opacity:.35
}
.splash-loader span:nth-child(2),.maint-pulse span:nth-child(2){animation-delay:.16s}
.splash-loader span:nth-child(3),.maint-pulse span:nth-child(3){animation-delay:.32s}
@keyframes titikJalan{
  0%,70%,100%{transform:translateY(0) scale(1);opacity:.32}
  35%{transform:translateY(-7px) scale(1.28);opacity:1}
}

/* Cincin pemuatan di sekeliling lambang layar perbaikan */
.maint-ring{position:relative;display:grid;place-items:center}
.maint-ring::before{
  content:"";position:absolute;width:132px;height:132px;border-radius:50%;
  border:1.5px solid var(--rim-soft);border-top-color:var(--muted-2);
  animation:putarRing 2.6s linear infinite
}
@keyframes putarRing{to{transform:rotate(360deg)}}

/* Kartu pembungkus pesan perbaikan, seperti panel melayang */
.maint-card{
  position:relative;z-index:2;padding:38px 30px 34px;border-radius:28px;max-width:420px;width:100%;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), var(--shadow-lg);
  display:flex;flex-direction:column;align-items:center;overflow:hidden
}
.maint-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.030),rgba(255,255,255,0) 58%)
}

/* Sapuan cahaya tipis yang lewat sesekali */
.maint-card::before{
  content:"";position:absolute;top:0;left:-60%;width:60%;height:100%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.035),transparent);
  animation:sapuan 5.5s ease-in-out infinite
}
@keyframes sapuan{
  0%,72%{left:-60%}
  100%{left:120%}
}

@media (prefers-reduced-motion:reduce){
  .splash-logo,.maint-logo,.splash-loader span,.maint-pulse span,
  .maint-ring::before,.maint-card::before,.splash-center{animation:none}
}

/* Suka & statistik pada kartu signal */
.ol-like{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:999px;
  font-size:10.5px;color:var(--muted);border:0;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.ol-like svg{width:15px;height:15px;fill:none;stroke:var(--muted)}
.ol-like.on{color:var(--like)}
.ol-like.on svg{fill:var(--like);stroke:var(--like)}

.ol-stat{display:flex;gap:18px;margin-top:12px;padding-top:11px;
  box-shadow:inset 0 1px 0 var(--edge)}
.ol-stat span{display:inline-flex;align-items:center;gap:7px;
  font-size:10px;color:var(--muted-2)}
.ol-stat b{color:var(--text);font-size:11.5px}
.ol-stat svg{width:14px;height:14px;stroke:var(--muted-2)}

/* Bilah sistem Android tidak boleh putih.
   html ikut diberi warna latar supaya area di luar viewport
   aplikasi tetap gelap di semua ponsel. */
html{background:var(--bg);color-scheme:dark}
[data-theme="light"]{color-scheme:light}
body{background:var(--bg);min-height:100dvh}

/* Folder signal outlook */
.fold-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fold{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left;
  padding:16px 15px;border-radius:18px;border:0;min-height:132px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.fold-ikon{width:36px;height:36px;border-radius:12px;display:grid;place-items:center;
  margin-bottom:4px;background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.fold-ikon svg{width:16px;height:16px}
.fold b{font-size:11.5px;letter-spacing:.06em}
.fold i{font-size:9.5px;line-height:1.5;color:var(--muted-2);font-style:normal;flex:1}
.fold-n{font-size:10px;color:var(--muted);padding:5px 11px;border-radius:999px;
  box-shadow:inset 0 0 0 1px var(--edge)}

.ol-labels{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.ol-labels .ol-label{margin-bottom:0}
.ol-label.folder-profit{color:var(--up);box-shadow:inset 0 0 0 1px rgba(64,200,140,.30)}
.ol-label.folder-sl{color:var(--down);box-shadow:inset 0 0 0 1px rgba(229,72,77,.30)}
.ol-label.folder-invalid{color:var(--muted-2)}
.ol-label.folder-valid{color:var(--text)}

@media (max-width:359px){ .fold-grid{grid-template-columns:1fr} }

/* Gambar yang gagal dimuat */
.media-rusak{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:10px;background:var(--sunken)}
.media-rusak svg{width:26px;height:26px;stroke:var(--muted-2)}
.media-rusak p{margin:0;font-size:10.5px;color:var(--muted-2)}
.cm-isi .media-rusak,.tf-shots .media-rusak{position:static;padding:20px;border-radius:12px}

.media-rusak small{font-size:9.5px;color:var(--muted-2);letter-spacing:.04em}
.media-rusak code{font-size:9px;color:var(--muted-2);word-break:break-all;max-width:88%;
  text-align:center;line-height:1.5;font-family:ui-monospace,Menlo,monospace}

/* =========================================================
   Layar login — kartu melayang di tengah
   ========================================================= */
.login-card{
  padding:44px 30px 38px;border-radius:30px;max-width:430px;width:calc(100% - 44px);
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), 0 26px 60px -30px rgba(0,0,0,.85);
  position:relative;overflow:hidden
}
.login-card::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(160deg,rgba(255,255,255,.024),rgba(255,255,255,0) 55%)
}
.login-card .splash-logo{width:118px;margin-bottom:22px}
.login-card .brand-title{font-size:22px;letter-spacing:.24em;margin:0 0 12px}
.login-card .brand-sub{font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);margin:0 0 26px}
.login-card .btn-google{width:100%;justify-content:center;padding:17px;border-radius:999px;
  font-size:13px;letter-spacing:.09em}
.login-card .login-note{margin:22px 4px 0;font-size:11.5px;line-height:1.75;color:var(--muted)}

.login-kredit{position:absolute;bottom:calc(env(safe-area-inset-bottom) + 62px);
  left:50%;transform:translateX(-50%);z-index:2;
  padding:12px 26px;border-radius:999px;font-size:10.5px;color:var(--muted-2);
  box-shadow:inset 0 0 0 1px var(--edge);white-space:nowrap}

/* =========================================================
   Balon obrolan
   ========================================================= */
.balon-wrap{position:fixed;right:14px;z-index:34;width:52px;height:52px;
  bottom:calc(env(safe-area-inset-bottom) + 92px);
  transition:left .22s cubic-bezier(.22,1,.36,1), top .22s cubic-bezier(.22,1,.36,1);
  touch-action:none}
.balon-wrap.menggeser{transition:none;cursor:grabbing}
.balon-wrap.menggeser .balon{transform:scale(1.08)}
.balon{position:relative;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;
  border:0;background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge), 0 10px 22px -12px rgba(0,0,0,.8);
  transition:transform .18s cubic-bezier(.2,.9,.3,1);cursor:grab}
.balon img{width:23px;filter:var(--logo-filter);position:relative;z-index:2;opacity:.95}
.balon-ring{position:absolute;inset:4px;border-radius:50%;
  border:1.2px solid var(--rim-soft);border-top-color:var(--muted-2);
  animation:putarRing 3.4s linear infinite}
.balon-badge{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;
  border-radius:999px;display:grid;place-items:center;font-size:9px;font-weight:700;
  color:#fff;background:var(--like);box-shadow:0 0 0 2px var(--bg);z-index:3}
.balon-x{position:absolute;top:-5px;left:-5px;width:20px;height:20px;border-radius:50%;
  display:grid;place-items:center;border:0;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--edge);z-index:4}
.balon-x svg{width:9px;height:9px}
@media (prefers-reduced-motion:reduce){ .balon-ring{animation:none} }

/* Layar ruang obrolan */
.ruang-top{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;border-radius:18px;margin-bottom:14px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.ruang-top b{display:block;font-size:12px;letter-spacing:.14em}
.ruang-top i{display:block;margin-top:3px;font-size:10px;color:var(--muted-2);font-style:normal}
.ruang-list{display:flex;flex-direction:column;gap:12px}

.ruang-msg{max-width:86%;padding:12px 14px;border-radius:18px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.ruang-msg.me{align-self:flex-end;background:var(--text);color:var(--bg)}
.ruang-msg.me .rm-teks{color:var(--bg)}
.ruang-msg.withdrawn .rm-teks{font-style:italic;color:var(--muted-2)}
.rm-kepala{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.rm-kepala b{font-size:11px}
.rm-isi{display:flex;flex-direction:column;gap:8px}
.rm-teks{margin:0;font-size:13.5px;line-height:1.6;word-break:break-word;white-space:pre-wrap}
.rm-foto{max-width:100%;border-radius:12px;cursor:zoom-in;display:block}
.rm-balas{padding:8px 10px;border-radius:10px;background:rgba(0,0,0,.20);
  border-left:2px solid var(--muted-2)}
.ruang-msg.me .rm-balas{background:rgba(0,0,0,.08)}
.rm-balas b{display:block;font-size:10px;margin-bottom:2px}
.rm-balas span{font-size:10.5px;opacity:.75}
.rm-alat{display:flex;align-items:center;gap:8px;margin-top:9px}
.rm-alat time{margin-left:auto;font-size:9.5px;opacity:.6}
.rm-mini{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;border:0;
  padding:5px 9px;border-radius:999px;color:inherit;opacity:.65;background:none}
.rm-mini svg{width:12px;height:12px}
.rm-mini.danger{color:var(--like);opacity:1}
.sebutan{color:#7FB2FF;font-weight:700}

/* Foto pada obrolan pribadi */
.msg-foto{max-width:100%;border-radius:12px;display:block;margin-bottom:6px;cursor:zoom-in}

/* Lipatan daftar member */
.lipat{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:0;
  padding:14px 15px;border-radius:16px;margin-top:12px;
  background:linear-gradient(180deg,var(--raise-hi),var(--raise-a));
  box-shadow:inset 0 0 0 1px var(--edge)}
.lipat-ikon{width:34px;height:34px;flex:none;border-radius:11px;display:grid;place-items:center;
  background:var(--sunken);box-shadow:inset 0 0 0 1px var(--edge)}
.lipat-ikon svg{width:15px;height:15px}
.lipat-teks{flex:1;min-width:0}
.lipat-teks b{display:block;font-size:12px}
.lipat-teks i{display:block;margin-top:2px;font-size:9.5px;color:var(--muted-2);font-style:normal}
.lipat-tanda{font-size:17px;color:var(--muted);width:22px;text-align:center}

/* Tema terang: bayangan lembut, tidak menghitam */
/* Tema terang: SATU perlakuan bayangan untuk semua permukaan
   timbul. Sebelumnya hanya sebagian selektor yang ditimpa, jadi
   pil nama, kartu postingan, dan gelembung komentar masih memakai
   bayangan lama yang jauh lebih pekat daripada ikon di bawah. */
[data-theme="light"] .tile,[data-theme="light"] .btn,[data-theme="light"] .circle-btn,
[data-theme="light"] .me-pill,[data-theme="light"] .head-pill,[data-theme="light"] .field-row,
[data-theme="light"] .row-field,[data-theme="light"] .notif,[data-theme="light"] .chat-item,
[data-theme="light"] .stat,[data-theme="light"] .cm-name,[data-theme="light"] .chip-btn,
[data-theme="light"] .like-bar,[data-theme="light"] .total-chip,[data-theme="light"] .link-chip,
[data-theme="light"] .seg,[data-theme="light"] .post,[data-theme="light"] .owner-panel,
[data-theme="light"] .caption-box,[data-theme="light"] .bell,[data-theme="light"] .edit-fab,
[data-theme="light"] .tool-btn,[data-theme="light"] .call-btn,[data-theme="light"] .sq-btn,
[data-theme="light"] .chat-top,[data-theme="light"] .send-btn,[data-theme="light"] .row-item,
[data-theme="light"] .post-text,[data-theme="light"] .ol-card,[data-theme="light"] .tf-stat,
[data-theme="light"] .tf-item,[data-theme="light"] .rk-stat,[data-theme="light"] .rk-item,
[data-theme="light"] .fold,[data-theme="light"] .balon,[data-theme="light"] .ruang-msg,
[data-theme="light"] .foto-btn,[data-theme="light"] .pill-btn,[data-theme="light"] .lipat,
[data-theme="light"] .tf-tab,[data-theme="light"] .menu-buat,[data-theme="light"] .login-card{
  box-shadow:0 2px 6px rgba(0,0,0,.045), inset 0 0 0 1px rgba(0,0,0,.05);
  border-bottom:0
}
[data-theme="light"] .story-ring,[data-theme="light"] .ava{box-shadow:0 2px 6px rgba(0,0,0,.06)}
[data-theme="light"] .btn::after,[data-theme="light"] .circle-btn::after,
[data-theme="light"] .bell::after,[data-theme="light"] .me-pill::after,
[data-theme="light"] .tf-stat::after,[data-theme="light"] .ol-card::after,
[data-theme="light"] .tf-item::after,[data-theme="light"] .rk-stat::after,
[data-theme="light"] .login-card::after{background:none}

.diag{margin:0 0 14px;padding:14px;border-radius:14px;background:var(--sunken);
  box-shadow:inset 0 0 0 1px var(--edge);font-size:10.5px;line-height:1.7;
  color:var(--muted);white-space:pre-wrap;word-break:break-all;
  font-family:ui-monospace,Menlo,monospace}