:root{
  --bg: #0E2A3A;
  --surface: #FBF3E7;
  --surface-2: #F3E4CE;
  --border: #E6D2AE;
  --text: #26201A;
  --text-muted: #8A7A63;
  --accent: #4FD8C4;
  --accent-strong: #33B39F;
  --peach: #F6D7B0;
  --peach-strong: #EFC48A;
  --warn: #D98A2B;
  --danger: #E15353;
  --danger-strong: #C93E3E;
  --status-online: #1FA352;
  --status-offline-bg: #DADDE0;
  --status-offline-text: #55585E;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
  --shadow: 0 12px 28px rgba(20,30,25,0.22);
}

*{ box-sizing: border-box; }
html,body{ margin:0; padding:0; }
body{
  background: linear-gradient(180deg, #BEE3F2 0%, #8FCBDD 40%, #4FA3B8 100%);
  background-attachment: scroll; /* diperbaiki: 'fixed' bikin blank/lag di banyak browser mobile */
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height: 100vh;
  min-height: 100dvh;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea{ font-family: inherit; }
h1,h2,h3,p{ margin: 0; }
a{ color: inherit; }

.app{ max-width: 480px; margin: 0 auto; min-height: 100vh; min-height: 100dvh; display:flex; flex-direction:column; position: relative; }

/* ---------- Top bar ---------- */
.topbar{
  position: sticky; top:0; z-index: 20;
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px 18px; background: rgba(251,243,231,0.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
}
.topbar .title{ font-size: 17px; font-weight: 750; letter-spacing: 0.2px; color: var(--text); }
.topbar .sub{ font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.icon-btn{
  width:auto; height:42px; padding: 0 16px; border-radius: 999px; border:1px solid var(--border);
  background: var(--peach); display:flex; align-items:center; justify-content:center;
  cursor:pointer; flex-shrink:0; font-weight: 700; font-size: 14px; color: var(--text);
}
.icon-btn:active{ transform: scale(0.96); }

/* ---------- Main content ---------- */
/* v2.0.6 — tinggi halaman mengikuti viewport tanpa rongga bawah tambahan. */
main{ flex:1; padding: 18px; }

.card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 14px;
  box-shadow: var(--shadow);
}

.field{ margin-bottom: 14px; }
.field:last-child{ margin-bottom: 0; }
.field label{ display:block; font-size: 13px; color: var(--text-muted); margin-bottom: 7px; font-weight: 600; }
.field input, .field textarea{
  width:100%; padding: 13px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: 15px; outline: none; transition: border-color .15s;
}
.field input:focus, .field textarea:focus{ border-color: var(--accent-strong); }

.btn{
  width:100%; padding: 14px 16px; border-radius: var(--radius-md);
  border:none; font-size: 15px; font-weight: 700; cursor:pointer;
  transition: transform .1s, opacity .15s;
}
.btn:active{ transform: scale(0.98); }
.btn-primary{ background: var(--accent); color: #06231D; }
.btn-primary:hover{ background: var(--accent-strong); }
.btn-ghost{ background: var(--peach); color: var(--text); border:1px solid var(--border); }
.btn-danger{ background: transparent; color: var(--danger-strong); border:1px solid rgba(201,62,62,0.4); }
.btn-danger:hover{ background: rgba(201,62,62,0.08); }
.btn-sm{ padding: 10px 14px; font-size: 13.5px; width:auto; }
.btn-block-gap{ margin-top: 10px; }
.btn:disabled, .btn.disabled{ opacity:0.45; cursor:not-allowed; }
.btn:disabled:active, .btn.disabled:active{ transform:none; }

.section-title{ font-size: 20px; font-weight: 750; margin-bottom: 4px; color: var(--text); }
.section-hint{ font-size: 13px; color: var(--text-muted); margin-bottom: 16px; }

.divider{
  display:flex; align-items:center; gap: 12px; color: var(--text-muted);
  font-size: 12px; margin: 22px 0 14px;
}
.divider::before, .divider::after{ content:''; flex:1; height:1px; background: var(--border); }

.msg{
  padding: 12px 14px; border-radius: var(--radius-md); font-size: 13.5px;
  margin-bottom: 14px; display:none;
}
.msg.show{ display:block; }
.msg-error{ background: rgba(201,62,62,0.1); color: #A83232; border:1px solid rgba(201,62,62,0.25); }
.msg-success{ background: rgba(31,163,82,0.12); color: #17753F; border:1px solid rgba(31,163,82,0.3); }

.code-display{
  text-align:center; padding: 26px 10px; background: var(--surface-2);
  border-radius: var(--radius-md); border:1px dashed var(--border); margin-bottom: 16px;
}
.code-display .code{
  font-size: 40px; font-weight: 800; letter-spacing: 6px; color: var(--accent-strong);
  font-variant-numeric: tabular-nums;
}
.code-display .exp{ font-size: 12.5px; color: var(--text-muted); margin-top: 10px; }

.row-2{ display:flex; gap: 10px; }
.row-2 .btn{ flex:1; }

.admin-block{ padding-bottom: 18px; margin-bottom: 18px; border-bottom: 1px solid var(--border); }
.admin-block:last-child{ border-bottom:none; margin-bottom:0; padding-bottom:0; }
.admin-block .admin-label{ font-size: 13px; color: var(--text-muted); margin-bottom: 10px; font-weight: 700; }

.empty-state{ text-align:center; padding: 34px 10px; color: var(--text-muted); font-size: 14px; }

/* ---------- Drawer / hamburger menu ---------- */
.overlay{
  position: fixed; inset:0; background: rgba(20,20,15,0.5);
  opacity:0; pointer-events:none; transition: opacity .2s; z-index: 30;
}
.overlay.show{ opacity:1; pointer-events:auto; }

.drawer{
  position: fixed; top:0; bottom:0; left:0; width: 80%; max-width: 320px;
  background: var(--surface); border-right: 1px solid var(--border);
  transform: translateX(-100%); transition: transform .22s ease; z-index: 31;
  display:flex; flex-direction:column; padding: 20px 16px;
}
.drawer.show{ transform: translateX(0); }
.drawer .drawer-head{ margin-bottom: 22px; }
.drawer .drawer-head .who{ font-size: 15px; font-weight: 750; color: var(--text); }
.drawer .drawer-head .role{ font-size: 12.5px; color: var(--accent-strong); margin-top: 3px; font-weight: 700; }
.drawer nav{ display:flex; flex-direction:column; gap: 4px; flex:1; overflow-y: auto; }
.drawer nav button{
  text-align:left; padding: 13px 12px; border-radius: var(--radius-sm);
  background: transparent; border:none; color: var(--text); font-size: 15px;
  cursor:pointer;
}
.drawer nav button.active{ background: var(--peach); color: var(--text); font-weight:700; }
.drawer nav button:active{ background: var(--surface-2); }
.drawer .logout-btn{ margin-top: auto; }

.login-wrap{ padding-top: 10px; }
.login-hero-image{
  width:100%; aspect-ratio: 16/9; border-radius: var(--radius-lg); overflow:hidden;
  background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  margin-bottom: 18px; display:flex; align-items:center; justify-content:center;
}
.login-hero-image img{ width:100%; height:100%; object-fit:cover; }
.login-hero-image .placeholder{ color: var(--text-muted); font-size: 13px; }
.login-title{
  text-align:center; font-size: 21px; font-weight: 800; color: var(--text); margin-bottom: 16px;
}

.toast{
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px);
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  padding: 12px 18px; border-radius: var(--radius-md); font-size: 13.5px;
  box-shadow: var(--shadow); opacity:0; pointer-events:none; transition: all .25s ease;
  z-index: 50; max-width: 90%; text-align:center;
}
.toast.show{ opacity:1; transform: translateX(-50%) translateY(0); }

/* ---------- Admin panel corner trigger (halaman login) ---------- */
.admin-trigger{
  position: fixed; left: 14px; bottom: 14px; z-index: 46;
  background: var(--surface); border:1px solid var(--border); color: var(--text-muted);
  font-size: 12.5px; padding: 9px 13px; border-radius: 999px;
  display:flex; align-items:center; gap:6px; cursor:pointer; box-shadow: var(--shadow); font-weight: 600;
}
.admin-trigger:active{ transform: scale(0.97); }
.admin-trigger .chev{ transition: transform .15s; font-size: 12px; }
.admin-trigger.open .chev{ transform: rotate(90deg); }

.admin-sheet{
  position: fixed; left: 14px; right: 14px; bottom: 62px; z-index: 45;
  max-width: 452px; margin: 0 auto;
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius-lg);
  padding: 16px; box-shadow: var(--shadow);
}
.admin-sheet-head{ margin-bottom: 12px; }
.admin-sheet-head .t{ font-size: 15px; font-weight: 750; color: var(--text); }
.admin-sheet-head .s{ font-size: 12.5px; color: var(--text-muted); margin-top: 3px; }


/* ---------- Owner/Admin Login v2.0.4 ---------- */
.owner-admin-login-wrap{
  width:100%;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:stretch;
}
.owner-admin-login-wrap .login-hero-image{
  width:100%;
  max-width:none;
  aspect-ratio:16/9;
  margin:0 0 18px;
}
.owner-admin-login-card{
  width:100%;
  max-width:none;
  box-sizing:border-box;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:18px;
  box-shadow:var(--shadow);
}
.owner-admin-login-head{
  text-align:left;
  margin-bottom:16px;
}
.owner-admin-login-title{
  font-size:22px;
  line-height:1.15;
  font-weight:800;
  color:var(--text);
}
.owner-admin-login-subtitle{
  display:none;
}
.owner-admin-captcha-placeholder{
  width:100%;
  height:65px;
  margin:0 0 10px;
  box-sizing:border-box;
  border:0;
  background:transparent;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.owner-admin-login-submit{ margin-top:0; }
.owner-admin-back{
  position:static;
  width:100%;
  min-width:0;
  margin:12px 0 0;
}

.owner-admin-main{
  min-height:0;
  padding-bottom:0;
}

@media (max-width:420px){
  .owner-admin-login-wrap .login-hero-image{ margin-bottom:16px; }
  .owner-admin-login-card{ padding:16px; }
  .owner-admin-login-head{ margin-bottom:14px; }
  .owner-admin-login-title{ font-size:21px; }
  .owner-admin-login-subtitle{ font-size:16px; }
  .owner-admin-captcha-placeholder{ height:65px; margin-bottom:10px; }
  .owner-admin-back{ margin-top:10px; }
}

/* ---------- Website OFFLINE overlay ---------- */
.offline-overlay{
  position: fixed; inset:0; z-index: 40;
  background: rgba(15,20,18,0.55); backdrop-filter: blur(6px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding: 24px; gap: 14px;
}
.offline-box{
  background: #0F2A3D; color: #FF7A7A; font-weight: 800; font-size: 19px;
  padding: 18px 26px; border-radius: 16px; text-align:center; letter-spacing: 0.5px;
  box-shadow: var(--shadow); max-width: 92%;
}
.offline-message-box{
  background: #0F2A3D; color: #FFB7B7; font-size: 14.5px; font-weight: 500;
  padding: 16px 22px; border-radius: 16px; text-align:center; max-width: 92%;
  box-shadow: var(--shadow); white-space: pre-wrap;
}

/* ---------- Browse list (Member: kategori & part) ---------- */
.browse-item{
  display:flex; align-items:center; justify-content:space-between;
  padding: 16px; margin-bottom: 12px; cursor:pointer;
}
.browse-item:active{ transform: scale(0.99); }
.browse-item .name{ font-size: 15px; font-weight: 700; }
.browse-item .chev{ color: var(--text-muted); font-size: 15px; }

.back-row{ margin-bottom: 12px; }
.back-btn{
  background: var(--surface); border:1px solid var(--border); color: var(--text);
  font-size: 14.5px; padding: 11px 18px; border-radius: var(--radius-md);
  cursor:pointer; font-weight: 700; display:flex; align-items:center; gap:6px;
}
.back-btn:active{ transform: scale(0.97); }

/* ---------- Kartu Server (Member & Server List Admin) ---------- */
.server-card{ padding: 0; overflow:hidden; }
.server-image{
  display:block; width:100%; aspect-ratio: 16 / 9; object-fit: cover;
  background: var(--surface-2);
}
.server-image.placeholder{
  display:flex; align-items:center; justify-content:center;
  color: var(--text-muted); font-size: 13px; background: var(--surface-2);
}
.server-image.category-image-916{ aspect-ratio: 9 / 16; }
.server-card-body{ padding: 16px 18px 18px; }
.server-name{ font-size: 16.5px; font-weight: 800; margin-bottom: 10px; color: var(--text); }
.server-action-row{ display:flex; align-items:center; gap: 10px; margin-bottom: 2px; }
.server-enter-btn{ flex: 1.3; width:auto; }

.status-pill{
  flex: 1; padding: 10px 10px; border-radius: 999px;
  font-size: 12.5px; font-weight: 700; text-align:center; white-space:nowrap; border:none;
  display:flex; align-items:center; justify-content:center; gap:7px;
  background: var(--surface-2); color: var(--text-muted);
}
.status-pill::before{
  content:''; width:8px; height:8px; border-radius:50%; flex-shrink:0;
  background: currentColor;
}
.status-pill.status-online{ color: var(--status-online); }
.status-pill.status-shutdown{ color: var(--warn); }
.status-pill.status-offline{ color: var(--status-offline-text); }
.status-pill.clickable{ cursor:pointer; }

.status-options{ display:flex; gap: 8px; margin: 10px 0 4px; }
.status-option{
  flex:1; padding: 9px 6px; border-radius: var(--radius-sm); border:none;
  font-size: 12px; font-weight: 700; cursor:pointer;
}
.status-option.status-online{ background: rgba(31,163,82,0.14); color: var(--status-online); }
.status-option.status-shutdown{ background: rgba(217,138,43,0.16); color: var(--warn); }
.status-option.status-offline{ background: var(--status-offline-bg); color: var(--status-offline-text); }

.server-code-field{ margin-top: 10px; }
.server-breadcrumb{ font-size: 12px; color: var(--text-muted); margin: 4px 2px 8px; font-weight: 600; }
.server-note{ font-size: 12px; color: var(--text-muted); margin-top: 10px; }

/* ---------- Badge kunjungan website (pojok kiri atas, Owner/Admin) ---------- */
.visit-badge{
  position: fixed; left: 14px; top: 14px; z-index: 15;
  background: var(--surface); border:1px solid var(--border); color: var(--text-muted);
  font-size: 12px; padding: 7px 12px; border-radius: 999px; box-shadow: var(--shadow); font-weight: 600;
}

/* ---------- v1.3.9: image loading ---------- */
img{ max-width:100%; }
/* Native lazy-loading is intentionally used for non-priority server images. */
img[loading="lazy"]{ content-visibility:auto; }

/* ---------- v1.3: Server Settings card recovery ---------- */
.server-edit-card{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin: 0 0 18px;
  box-shadow: var(--shadow);
}
.server-edit-card .admin-label{
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---------- v1.3: Spy/Owner mode buttons ---------- */
.spy-toggle-btn{
  margin-top: 12px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: #C93E3E;
}
.spy-toggle-btn:hover{ background: var(--surface-2); }

/* View badge */
.visit-badge{
  position: fixed;
  left: 18px;
  top: 84px;
  z-index: 18;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 10px 15px;
  font-weight: 700;
  font-size: 14px;
  box-shadow: var(--shadow);
}


/* v1.3 Menu button */
.menu-text-btn{ gap:8px; font-size:16px; }
.menu-text-btn .burger-lines{ display:flex; flex-direction:column; gap:3px; }
.menu-text-btn .burger-lines span{ width:18px; height:2px; background:currentColor; border-radius:2px; display:block; }


/* v1.3.1 bug fixes: Tools menu controls */
.drawer .spy-toggle-btn{
  /* v1.3.9: kembalikan posisi Spy/Owner Mode sebagai kontrol bawah
     yang tetap berada tepat di atas Logout dengan jarak konsisten. */
  flex: 0 0 auto;
  margin-top: 12px;
  margin-bottom: 10px;
  border: 1px solid var(--danger-strong);
  color: var(--danger-strong);
  background: transparent;
}
.drawer .spy-toggle-btn:hover{
  background: rgba(201,62,62,0.08);
}
.drawer .logout-btn{
  flex: 0 0 auto;
  margin-top: 0;
  border: 1px solid var(--danger-strong);
}

/* ---------- v1.3.8: Background Image brightness ---------- */
.background-brightness{
  margin: -2px 0 18px;
  padding: 0 2px;
}
.background-brightness .brightness-title{
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 7px;
}
.brightness-range{
  width: 100%;
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.brightness-labels{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top: 3px;
  color: var(--text-muted);
  font-size: 12px;
}
.brightness-labels span:nth-child(2){
  text-align:center;
}

/* v2.0.3 — POSITION LOCK: Member Logout + Spy Mode indicator.
   These selectors are intentionally scoped so other layout elements are untouched. */
.drawer .member-logout-btn{
  margin-top: auto !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
}
.visit-badge.spy-mode-indicator{
  position: fixed !important;
  left: 14px !important;
  top: 14px !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 15 !important;
}

/* ---------- Owner/Admin Turnstile v2.0.5 ---------- */
.owner-admin-captcha-placeholder{
  min-height:65px;
  height:65px;
  box-sizing:border-box;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#fff;
  border:1px solid #d7d7d7;
  border-radius:8px;
}
.owner-admin-captcha-placeholder .cf-turnstile{
  width:100%;
  min-height:63px;
  display:flex;
  justify-content:center;
  align-items:center;
}