/* peduliAI rebuild — visual language lifted from flutter_assets:
   cyan #E31E4A accents, blue gradient headers, purple-pink chat banner,
   gold coin art, dark splash, rounded 12-16px cards. */
* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { height:100%; background:#0e1116; font-family:Inter,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif; }
button { font-family:inherit; border:none; background:none; cursor:pointer; }
input { font-family:inherit; border:none; outline:none; background:transparent; }
img { -webkit-user-drag:none; user-select:none; }
.hidden { display:none !important; }

#phone {
  position:relative; width:100%; max-width:480px; height:100dvh; margin:0 auto;
  background:#F5F7FB; overflow:hidden; display:flex; flex-direction:column;
}
.screen { position:absolute; inset:0; display:flex; flex-direction:column; background:#F5F7FB; }

/* ---------- SPLASH ---------- */
#screen-splash { background:#fff; align-items:center; justify-content:center; gap:22px; }
.splash-logo { width:clamp(110px,32vw,150px); height:clamp(104px,30vw,140px); border-radius:24px; object-fit:contain; animation:splashIn .7s ease both; }
.splash-name { color:#E31E4A; font-size:clamp(32px,11vw,44px); font-weight:700; letter-spacing:.5px; font-family:'Space Grotesk',Inter,sans-serif; animation:splashIn .7s .12s ease both; }
.splash-tag { color:#E31E4A; font-size:clamp(11px,3.4vw,13px); font-weight:600; letter-spacing:.3px; padding:0 20px; text-align:center; animation:splashIn .7s .24s ease both; }
.splash-sub { color:#9aa0a6; font-size:clamp(10px,3.2vw,12px); padding:0 20px; text-align:center; animation:splashIn .7s .32s ease both; }
@keyframes splashIn { from { opacity:0; transform:translateY(10px) scale(.92); } to { opacity:1; transform:none; } }

/* ---------- LOGIN / PERFECT ---------- */
.login-bg, .perfect-bg {
  position:absolute; inset:0;
  background:linear-gradient(180deg,#E31E4A 0%,#BFEAFB 14%,#F5F7FB 30%);
  pointer-events:none;
}
.login-body { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; padding:calc(48px + env(safe-area-inset-top)) 24px calc(24px + env(safe-area-inset-bottom)); overflow-y:auto; }
.login-logo { width:84px; height:84px; border-radius:20px; margin-bottom:16px; }
.login-title { font-size:22px; font-weight:700; color:#1C2333; font-family:'Space Grotesk',Inter,sans-serif; }
.login-sub { font-size:12px; color:#8A93A6; margin-top:6px; text-align:center; }
.login-card { width:100%; margin-top:26px; display:flex; flex-direction:column; gap:14px; }
.login-row {
  display:flex; align-items:center; background:#fff; border-radius:12px; padding:0 14px;
  box-shadow:0 2px 10px rgba(28,42,66,.06); height:52px;
}
.login-prefix { font-weight:700; color:#1C2333; margin-right:10px; padding-right:10px; border-right:1px solid #E6EAF2; }
.login-row input { flex:1; font-size:15px; color:#1C2333; }
.link-btn { color:#E31E4A; font-size:12px; }
.btn-primary {
  height:52px; border-radius:26px; font-size:16px; font-weight:700; color:#fff;
  background:linear-gradient(90deg,#E31E4A,#FF5A76);
  box-shadow:0 6px 16px rgba(227,30,74,.35);
}
.btn-primary:disabled { opacity:.5; box-shadow:none; }
.login-agree { font-size:11px; color:#8A93A6; display:flex; align-items:center; gap:6px; }
.login-agree a { color:#E31E4A; }
.login-lang { margin-top:auto; font-size:12px; color:#8A93A6; padding-top:24px; }
.login-lang .on { color:#E31E4A; font-weight:700; }
.gender-pick { display:flex; gap:18px; margin-top:26px; }
.gender-card {
  width:120px; padding:14px 10px; background:#fff; border-radius:16px; text-align:center;
  border:2px solid transparent; box-shadow:0 2px 10px rgba(28,42,66,.06);
}
.gender-card img { width:72px; height:72px; border-radius:50%; object-fit:cover; }
.gender-card span { display:block; margin-top:8px; font-size:14px; color:#1C2333; }
.gender-card.sel { border-color:#E31E4A; background:#FDECEF; }

/* ---------- TABS ---------- */
#screen-tabs { background:#F5F7FB; }
#tab-pages { flex:1; overflow:hidden; position:relative; }
.tab-page { position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain; padding-bottom:calc(70px + env(safe-area-inset-bottom)); }
#tabbar {
  height:calc(64px + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px);
  border-top:1px solid #EDF0F5; display:flex; flex-shrink:0;
}
.tab { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; position:relative; }
.tab img { width:24px; height:24px; }
.tab span { font-size:10px; color:#8A93A6; }
.tab.active span { color:#E31E4A; font-weight:700; }
.badge {
  position:absolute; top:10px; left:calc(50% + 4px); min-width:16px; height:16px;
  background:#FF5A76; border-radius:8px; color:#fff; font-size:10px; font-style:normal;
  display:flex; align-items:center; justify-content:center; padding:0 4px;
}

/* ---------- SHARED UI ---------- */
.topbar {
  min-height:52px; display:flex; align-items:center; gap:10px; padding:env(safe-area-inset-top) 14px 0;
  background:transparent; position:sticky; top:0; z-index:5;
}
.topbar.solid { background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid #EDF0F5; padding-bottom:8px; }
.topbar .logo-sm { width:30px; height:30px; border-radius:8px; }
.topbar .title { flex:1; font-size:17px; font-weight:700; color:#1C2333; font-family:'Space Grotesk',Inter,sans-serif; }
.icon-btn { font-size:20px; color:#1C2333; width:36px; height:36px; display:flex; align-items:center; justify-content:center; }
.card {
  background:#fff; border-radius:16px; margin:10px 14px; padding:14px;
  box-shadow:0 2px 10px rgba(28,42,66,.06);
}
.card-title { font-size:15px; font-weight:700; color:#1C2333; margin-bottom:10px; display:flex; align-items:center; gap:8px; }
.card-title .more { margin-left:auto; font-size:12px; color:#8A93A6; font-weight:400; }
.btn-grad {
  height:40px; border-radius:20px; color:#fff; font-weight:700; font-size:13px; padding:0 18px;
  background:linear-gradient(90deg,#E31E4A,#FF5A76);
}
.btn-gold {
  height:40px; border-radius:20px; color:#7A4B00; font-weight:700; font-size:13px; padding:0 18px;
  background:linear-gradient(90deg,#FFD76E,#FFB636);
}
.btn-outline {
  height:40px; border-radius:20px; color:#E31E4A; font-weight:700; font-size:13px; padding:0 18px;
  border:1.5px solid #E31E4A; background:#fff;
}
.pill { display:inline-flex; align-items:center; gap:4px; font-size:11px; color:#8A93A6; background:#F2F4F9; border-radius:10px; padding:3px 9px; }
.hsection { padding:14px 16px 4px; font-size:15px; font-weight:700; color:#1C2333; display:flex; align-items:center; }
.hsection .more { margin-left:auto; font-size:12px; color:#8A93A6; font-weight:400; }
.empty { text-align:center; color:#9AA3B5; font-size:13px; padding:40px 0; }

/* ---------- HOME ---------- */
#page-home { background:linear-gradient(180deg,#E31E4A 0%,#D9F3FC 240px,#F5F7FB 340px); }
.home-idrow { display:flex; align-items:center; gap:8px; padding:6px 14px; }
.home-idrow .greet { flex:1; color:#fff; }
.home-idrow .greet b { font-size:16px; display:block; }
.home-idrow .greet span { font-size:11px; opacity:.85; }
.avatar-sm { width:34px; height:34px; border-radius:50%; object-fit:cover; }
.wallet-card {
  margin:10px 14px; border-radius:18px; padding:16px; color:#fff;
  background:linear-gradient(120deg,#E31E4A,#C21A3E 55%,#FF5A76);
  box-shadow:0 8px 20px rgba(227,30,74,.25);
  display:flex; align-items:center;
}
.wallet-card .amt { flex:1; }
.wallet-card .amt .lbl { font-size:12px; opacity:.85; }
.wallet-card .amt .val { font-size:26px; font-weight:800; margin-top:2px; }
.wallet-card img { width:74px; height:74px; object-fit:contain; }
.points-strip { display:flex; gap:10px; margin:10px 14px; }
.points-strip .mini {
  flex:1; background:#fff; border-radius:14px; padding:10px 12px; box-shadow:0 2px 10px rgba(28,42,66,.06);
  display:flex; align-items:center; gap:10px;
}
.points-strip .mini img { width:34px; height:34px; object-fit:contain; }
.points-strip .mini .lbl { font-size:11px; color:#8A93A6; }
.points-strip .mini .val { font-size:15px; font-weight:800; color:#1C2333; }
.banner { display:block; width:calc(100% - 28px); margin:10px 14px; border-radius:16px; object-fit:cover; }
.drama-row, .live-row, .goods-row { display:flex; gap:10px; overflow-x:auto; padding:4px 14px 10px; scrollbar-width:none; }
.drama-row::-webkit-scrollbar, .live-row::-webkit-scrollbar, .goods-row::-webkit-scrollbar { display:none; }
.drama-card { flex:0 0 108px; }
.drama-card img { width:108px; height:160px; object-fit:cover; border-radius:12px; }
.drama-card .t { font-size:12px; color:#1C2333; margin-top:6px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.live-card { flex:0 0 130px; position:relative; }
.live-card img { width:130px; height:174px; object-fit:cover; border-radius:12px; }
.live-card .tag { position:absolute; top:8px; left:8px; background:rgba(255,90,118,.9); color:#fff; font-size:10px; padding:2px 8px; border-radius:8px; }
.live-card .t { position:absolute; bottom:8px; left:8px; right:8px; color:#fff; font-size:12px; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.task-strip { display:flex; align-items:center; }
.task-strip .t { flex:1; }
.task-strip .t b { font-size:14px; color:#1C2333; display:block; }
.task-strip .t span { font-size:11px; color:#8A93A6; }
.task-strip img.sign { width:64px; height:52px; object-fit:contain; }
.datalist { margin:0 14px; }
.data-item { display:flex; align-items:center; gap:10px; padding:10px 0; border-bottom:1px solid #F0F2F7; }
.data-item:last-child { border-bottom:none; }
.data-item img { width:40px; height:40px; border-radius:10px; object-fit:cover; }
.data-item .t { flex:1; }
.data-item .t b { font-size:14px; color:#1C2333; display:block; }
.data-item .t span { font-size:11px; color:#8A93A6; }
.data-item .r { text-align:right; }
.data-item .r b { font-size:14px; color:#FF8A00; display:block; }
.data-item .r span { font-size:10px; color:#8A93A6; }

/* ---------- SQUARE ---------- */
.post { background:#fff; border-radius:16px; margin:10px 14px; padding:12px 14px; box-shadow:0 2px 10px rgba(28,42,66,.06); }
.post-head { display:flex; align-items:center; gap:10px; }
.post-head img { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.post-head b { font-size:14px; color:#1C2333; display:block; }
.post-head span { font-size:11px; color:#8A93A6; }
.post-head .lv { margin-left:4px; background:#FFF2D9; color:#C77700; font-size:10px; border-radius:6px; padding:1px 6px; }
.post .txt { font-size:14px; color:#2A3242; margin-top:8px; line-height:1.45; }
.post .imgs { display:flex; gap:6px; margin-top:8px; }
.post .imgs img { width:33%; aspect-ratio:1; object-fit:cover; border-radius:8px; }
.post-foot { display:flex; gap:18px; margin-top:10px; }
.post-foot button { font-size:12px; color:#8A93A6; display:flex; align-items:center; gap:4px; }
.post-foot button.on { color:#FF5A76; }

/* ---------- MESSAGE LIST ---------- */
.conv { display:flex; align-items:center; gap:12px; padding:12px 14px; background:#fff; border-bottom:1px solid #F0F2F7; }
.conv img { width:50px; height:50px; border-radius:50%; object-fit:cover; }
.conv .t { flex:1; min-width:0; }
.conv .t b { font-size:15px; color:#1C2333; display:block; }
.conv .t span { font-size:12px; color:#8A93A6; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.conv .meta { text-align:right; }
.conv .meta time { font-size:10px; color:#B0B7C6; display:block; }
.conv .meta i { font-style:normal; background:#FF5A76; color:#fff; font-size:10px; border-radius:8px; padding:0 5px; min-width:16px; height:16px; display:inline-flex; align-items:center; justify-content:center; margin-top:4px; }
.conv .meta .ai { color:#E31E4A; border:1px solid #E31E4A; background:#FDECEF; border-radius:6px; font-size:10px; padding:0 5px; }

/* ---------- CHAT ---------- */
#screen-chat { background:#EDEFF4; }
.chat-header {
  min-height:56px; padding-top:env(safe-area-inset-top);
  background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid #EDF0F5;
  display:flex; align-items:center; padding-left:8px; padding-right:8px; gap:8px; flex-shrink:0;
}
.chat-peer { flex:1; display:flex; align-items:center; gap:8px; }
.chat-peer img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.chat-peer span { font-size:16px; font-weight:700; color:#1C2333; }
.chat-list { flex:1; overflow-y:auto; overscroll-behavior:contain; padding:12px 12px 6px; display:flex; flex-direction:column; gap:10px; background:linear-gradient(180deg,#FBE9ED 0%,#EDEFF4 120px); }
.bubble { max-width:74%; padding:10px 13px; font-size:14.5px; line-height:1.4; border-radius:14px; position:relative; }
.bubble.ai { align-self:flex-start; background:#fff; color:#2A3242; border-top-left-radius:4px; box-shadow:0 1px 4px rgba(28,42,66,.08); }
.bubble.me { align-self:flex-end; background:linear-gradient(120deg,#E31E4A,#FF5A76); color:#fff; border-top-right-radius:4px; }
.bubble.voice { display:flex; align-items:center; gap:8px; min-width:110px; }
.bubble.voice img { width:20px; height:20px; }
.chat-inputbar { min-height:56px; background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); border-top:1px solid #EDF0F5; display:flex; align-items:center; gap:8px; padding:8px 10px calc(8px + env(safe-area-inset-bottom)); flex-shrink:0; }
.chat-inputbar input { flex:1; height:40px; background:#F2F4F9; border-radius:20px; padding:0 14px; font-size:14px; color:#1C2333; }
.btn-send { height:38px; padding:0 16px; border-radius:19px; color:#fff; font-weight:700; background:linear-gradient(90deg,#E31E4A,#FF5A76); font-size:13px; }
.typing { align-self:flex-start; color:#8A93A6; font-size:12px; padding:2px 6px; }

/* ---------- CALL ---------- */
#screen-call { background:#101319; }
.call-bg { position:absolute; inset:0; background:radial-gradient(circle at 50% 30%,#26324d 0%,#101319 70%); }
.call-body { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; padding-top:90px; }
.call-body > img { width:120px; height:120px; border-radius:50%; object-fit:cover; border:3px solid rgba(63,201,241,.6); }
.call-name { color:#fff; font-size:22px; font-weight:700; margin-top:18px; }
.call-status { color:#8A93A6; font-size:13px; margin-top:6px; }
.call-timer { color:#E31E4A; font-size:18px; font-weight:700; margin-top:6px; font-variant-numeric:tabular-nums; }
.call-wave { display:flex; gap:6px; margin-top:16px; }
.call-wave img { width:26px; height:26px; }
.call-controls { margin-top:auto; margin-bottom:56px; display:flex; gap:26px; }
.call-btn { display:flex; flex-direction:column; align-items:center; gap:6px; font-size:24px; color:#fff; }
.call-btn span { font-size:11px; color:#8A93A6; }
.call-btn.end { background:#FF5A76; color:#fff; width:64px; height:64px; border-radius:50%; font-size:26px; justify-content:center; }
.call-btn.end span { display:none; }
.call-rate { color:#5d6575; font-size:11px; padding:0 30px 24px; text-align:center; }

/* ---------- FRIENDS ---------- */
.invite-hero { margin:10px 14px; border-radius:16px; padding:16px; color:#fff; background:linear-gradient(120deg,#FF7A45,#FF4E76); box-shadow:0 8px 20px rgba(255,78,118,.25); }
.invite-hero b { font-size:16px; display:block; }
.invite-hero span { font-size:12px; opacity:.9; display:block; margin-top:4px; }
.invite-hero .code { margin-top:10px; display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.18); border-radius:10px; padding:6px 12px; font-weight:700; letter-spacing:1px; }

/* ---------- ME ---------- */
#page-me { padding-bottom:0; }
.me-hero { padding:0 0 20px; background:linear-gradient(180deg,#E31E4A 0%,#D9F3FC 100%); }
.me-hero .row { display:flex; align-items:center; gap:14px; padding:60px 16px 0; }
.me-hero .row img.av { width:64px; height:64px; border-radius:50%; object-fit:cover; border:2px solid #fff; }
.me-hero .id b { font-size:18px; color:#1C2333; display:block; }
.me-hero .id span { font-size:12px; color:#54627c; }
.me-hero .lv { background:#1C2333; color:#FFD76E; font-size:11px; border-radius:10px; padding:3px 10px; font-weight:700; }
.me-stats { display:flex; margin-top:16px; background:#fff; border-radius:16px 16px 0 0; padding:14px 0; box-shadow:0 2px 10px rgba(28,42,66,.06); }
.me-stats div { flex:1; text-align:center; border-right:1px solid #F0F2F7; }
.me-stats div:last-child { border-right:none; }
.me-stats b { font-size:17px; color:#1C2333; display:block; }
.me-stats span { font-size:11px; color:#8A93A6; }
.menu-grid { display:flex; flex-wrap:wrap; background:#fff; }
.menu-grid button { width:25%; display:flex; flex-direction:column; align-items:center; gap:8px; padding:14px 0; }
.menu-grid img { width:30px; height:30px; object-fit:contain; }
.menu-grid span { font-size:11px; color:#414B60; }
.list-item { display:flex; align-items:center; gap:10px; padding:13px 16px; background:#fff; border-bottom:1px solid #F0F2F7; }
.list-item img { width:24px; height:24px; object-fit:contain; }
.list-item .t { flex:1; font-size:14px; color:#1C2333; }
.list-item .arrow { color:#C3C9D6; }

/* ---------- PUSH PAGES ---------- */
#push { z-index:30; background:#F5F7FB; }
#push-body { flex:1; display:flex; flex-direction:column; overflow-y:auto; }
.push-header { min-height:52px; padding-top:env(safe-area-inset-top); background:rgba(255,255,255,.92); backdrop-filter:saturate(1.4) blur(12px); border-bottom:1px solid #EDF0F5; display:flex; align-items:center; gap:8px; padding:0 8px; position:sticky; top:0; z-index:5; }
.push-header .title { flex:1; font-size:17px; font-weight:700; color:#1C2333; text-align:center; margin-right:36px; font-family:'Space Grotesk',Inter,sans-serif; }
.recharge-grid { display:flex; flex-wrap:wrap; gap:10px; padding:0 14px; }
.recharge-opt { flex:1 0 30%; background:#fff; border:1.5px solid #EDF0F5; border-radius:12px; padding:12px 8px; text-align:center; }
.recharge-opt.sel { border-color:#E31E4A; background:#FDECEF; }
.recharge-opt b { font-size:15px; color:#1C2333; }
.recharge-opt span { display:block; font-size:11px; color:#FF8A00; margin-top:2px; }
.pay-row { display:flex; align-items:center; gap:10px; background:#fff; border-radius:12px; margin:8px 14px; padding:12px 14px; }
.pay-row img.paylogo { width:28px; height:28px; border-radius:6px; }
.pay-row input[type=radio] { accent-color:#E31E4A; margin-left:auto; }
.goods-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; padding:0 14px 20px; }
.goods-card { background:#fff; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(28,42,66,.06); }
.goods-card img { width:100%; aspect-ratio:1; object-fit:cover; }
.goods-card .b { padding:8px 10px; }
.goods-card .b .t { font-size:13px; color:#1C2333; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.goods-card .b .p { color:#FF5A76; font-weight:800; font-size:14px; margin-top:4px; }
.goods-card .b .p small { color:#B0B7C6; font-weight:400; text-decoration:line-through; margin-left:4px; }
.welfare-pool { margin:10px 14px; border-radius:18px; padding:18px; color:#fff; background:linear-gradient(120deg,#C21A3E,#8F112F); box-shadow:0 8px 20px rgba(143,17,47,.3); }
.welfare-pool .lbl { font-size:12px; opacity:.9; }
.welfare-pool .val { font-size:30px; font-weight:800; margin:6px 0 2px; }
.welfare-pool .sub { font-size:11px; opacity:.8; }
.progress { height:8px; background:rgba(255,255,255,.25); border-radius:4px; margin-top:12px; overflow:hidden; }
.progress i { display:block; height:100%; background:#FFD76E; border-radius:4px; }

/* ---------- TOAST ---------- */
#toast {
  position:absolute; left:50%; bottom:110px; transform:translateX(-50%);
  background:rgba(20,26,38,.9); color:#fff; font-size:13px; padding:10px 18px;
  border-radius:20px; z-index:99; max-width:80%; text-align:center;
}

/* ================= DESKTOP WEB (>=900px) ================= */
@media (min-width: 900px) {
  body { background:#141822; }
  #phone { width:1180px; max-width:100%; height:100dvh; box-shadow:0 0 80px rgba(0,0,0,.55); }

  /* shell: sidebar + content */
  #screen-tabs { flex-direction:row; }
  #tabbar {
    order:-1; width:232px; height:auto; flex-direction:column;
    justify-content:flex-start; align-items:stretch; padding:18px 12px;
    border-top:none; border-right:1px solid #EDF0F5; gap:4px;
  }
  #tabbar::before {
    content:""; display:block; width:160px; height:58px; margin:4px auto 20px;
    background:url("../assets/img/redkee_logo.jpg") center/contain no-repeat;
  }
  .tab { flex-direction:row; justify-content:flex-start; align-items:center; gap:14px; padding:12px 18px; border-radius:12px; }
  .tab img { width:26px; height:26px; }
  .tab span { font-size:14px; }
  .tab.active { background:#FDECEF; }
  .badge { top:6px; left:40px; }

  /* centered content column */
  #tab-pages { flex:1; }
  .tab-page { padding:20px 48px 48px; }
  .tab-page > * { max-width:760px; margin-left:auto; margin-right:auto; }
  .topbar { padding:6px 0; }

  /* pushed pages + chat centered */
  #push, #screen-chat, #screen-call { max-width:860px; margin:0 auto; width:100%; }
  #push { box-shadow:0 0 40px rgba(0,0,0,.18); }
  #screen-chat { box-shadow:0 0 40px rgba(0,0,0,.18); }

  /* login / perfect info centered card */
  .login-body { max-width:460px; margin:0 auto; width:100%; }
  .login-bg, .perfect-bg { background:linear-gradient(180deg,#E31E4A 0%,#F7C2CD 30%,#F5F7FB 55%); }

  /* menu grid breathes more */
  .menu-grid button { width:16.66%; padding:20px 0; }
  .me-stats { max-width:760px; margin-left:auto; margin-right:auto; }
}

/* ================= MOBILE RESPONSIVE & FEEL ================= */
.btn-primary:active,.btn-grad:active,.btn-gold:active,.btn-outline:active,.btn-send:active { transform:scale(.97); opacity:.9; }
button { transition:transform .12s ease,opacity .12s ease; }
.recharge-opt:active,.goods-card:active,.drama-card:active,.live-card:active { transform:scale(.97); }
#toast { animation:toastIn .25s ease both; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%,8px); } to { opacity:1; transform:translate(-50%,0); } }
.conv:active,.data-item:active,.list-item:active { background:#F7F8FB; }
.greet b { font-family:'Space Grotesk',Inter,sans-serif; }

/* mid-size portrait screens: framed centered column */
@media (min-width:480px) and (max-width:899px) {
  #phone { border-left:1px solid rgba(255,255,255,.09); border-right:1px solid rgba(255,255,255,.09); }
}

/* small phones */
@media (max-width:380px) {
  .card { margin:8px 10px; padding:12px; }
  .banner { width:calc(100% - 20px); margin:8px 10px; }
  .points-strip { margin:8px 10px; gap:8px; }
  .wallet-card { margin:8px 10px; padding:14px; }
  .wallet-card .amt .val { font-size:22px; }
  .wallet-card img { width:60px; height:60px; }
  .hsection { padding:12px 12px 4px; font-size:14px; }
  .drama-row,.live-row,.goods-row { padding:4px 10px 10px; }
  .menu-grid button { padding:12px 0; }
  .login-body { padding-left:16px; padding-right:16px; }
  .gender-card { width:104px; }
  .gender-card img { width:60px; height:60px; }
  .me-stats b { font-size:15px; }
  .me-hero .row { padding:calc(44px + env(safe-area-inset-top)) 14px 0; }
}

/* short / landscape phone screens */
@media (max-height:540px) and (max-width:899px) {
  #screen-splash { gap:10px; }
  .splash-logo { width:84px; height:80px; }
  .splash-name { font-size:26px; }
  .login-body { padding-top:20px; }
  .login-logo { width:60px; height:60px; margin-bottom:10px; }
  .login-card { margin-top:14px; gap:10px; }
  .btn-primary { height:46px; }
  #tabbar { height:calc(52px + env(safe-area-inset-bottom)); }
  .tab img { width:20px; height:20px; }
  .tab span { font-size:9px; }
  .topbar { min-height:44px; }
  .chat-list { padding:8px; }
}

/* ================= PANDUAN & TUR ================= */
.guide-intro { display:flex; align-items:center; gap:12px; margin:14px 14px 6px; padding:14px; background:#fff; border-radius:16px; box-shadow:0 2px 10px rgba(28,42,66,.06); }
.guide-intro img { width:52px; height:48px; object-fit:contain; border-radius:10px; }
.guide-intro b { font-size:14px; color:#1C2333; display:block; font-family:'Space Grotesk',Inter,sans-serif; }
.guide-intro span { font-size:12px; color:#8A93A6; }
.guide-sec { background:#fff; border-radius:14px; margin:8px 14px; box-shadow:0 2px 10px rgba(28,42,66,.06); overflow:hidden; }
.guide-sec summary { list-style:none; display:flex; align-items:center; gap:12px; padding:13px 14px; cursor:pointer; }
.guide-sec summary::-webkit-details-marker { display:none; }
.g-ico { font-size:22px; width:36px; text-align:center; }
.g-t { flex:1; min-width:0; }
.g-t b { font-size:14px; color:#1C2333; display:block; }
.g-t small { font-size:11px; color:#8A93A6; display:block; margin-top:2px; }
.g-arrow { color:#C3C9D6; font-size:16px; transition:transform .2s ease; }
.guide-sec[open] .g-arrow { transform:rotate(90deg); }
.g-steps { margin:0; padding:0 14px 14px 56px; }
.g-steps li { font-size:13px; color:#2A3242; line-height:1.55; margin-top:8px; }
.g-steps li::marker { color:#E31E4A; font-weight:700; }

.tour { position:absolute; inset:0; z-index:80; background:rgba(14,17,22,.72); backdrop-filter:blur(6px); display:flex; align-items:flex-end; animation:tourFade .25s ease both; }
@keyframes tourFade { from { opacity:0; } to { opacity:1; } }
.tour-card { width:100%; background:#fff; border-radius:22px 22px 0 0; padding:24px 22px calc(24px + env(safe-area-inset-bottom)); text-align:center; animation:tourUp .3s ease both; }
@keyframes tourUp { from { transform:translateY(40px); opacity:0; } to { transform:none; opacity:1; } }
.tour-logo { width:64px; height:58px; object-fit:contain; }
.tour-ico { font-size:40px; margin-top:10px; }
.tour-card h3 { font-size:19px; color:#1C2333; margin-top:8px; font-family:'Space Grotesk',Inter,sans-serif; }
.tour-card p { font-size:13.5px; color:#54627c; line-height:1.6; margin-top:8px; min-height:66px; }
.tour-dots { display:flex; justify-content:center; gap:6px; margin:14px 0 16px; }
.tour-dots i { width:7px; height:7px; border-radius:4px; background:#E3D5D9; transition:all .2s ease; }
.tour-dots i.on { width:20px; background:#E31E4A; }
.tour-btns { display:flex; align-items:center; gap:12px; }
.tour-skip { flex:1; height:46px; border-radius:23px; color:#8A93A6; font-weight:600; background:#F2F4F9; }
.tour-next { flex:2; height:46px; border-radius:23px; }
@media (min-width:900px) {
  .tour { align-items:center; justify-content:center; }
  .tour-card { width:420px; border-radius:22px; }
}