/* ============================================================
   RAH VIBRANT v4 — Control Panel premium re-theme.
   Loaded LAST (after theme.css, rah-enhance.css, master.css).
   Goal: match the redesigned landing — twilight navy + multi-hue
   glows (sakura + gold + blue + emerald), colorful gradients,
   soft rounded glass cards, lively hover/focus. Pure CSS override:
   NO markup, form, module, or auth changes. Fully additive.
   Palette pulled 1:1 from /var/www/rah-landing/index.php :root.
   ============================================================ */

:root{
  --v-navy:#070d1a; --v-navy2:#0b1428; --v-navy3:#101c38;
  --v-gold:#f5c869; --v-gold-lite:#ffe9b3; --v-gold-deep:#a76d22;
  --v-sakura:#ff9ec4; --v-sakura-lite:#ffd8e7; --v-sakura-deep:#e0568f;
  --v-blue:#54b9ff; --v-blue-deep:#3b7fd4; --v-emerald:#2bd6a3;
  --v-text:#fdf3e6; --v-muted:#b9c4dc;
  --v-stroke:rgba(245,200,105,.24);
  --v-radius:20px;
  /* signature multi-hue gradients from the landing */
  --v-grad-head:linear-gradient(100deg,#ffe9b3 0%,#ff9ec4 34%,#f5c869 62%,#ffe9b3 100%);
  --v-grad-line:linear-gradient(90deg,var(--v-sakura),var(--v-gold),var(--v-blue));
  --v-grad-gold:linear-gradient(135deg,#ffe9b3 0%,#f5c869 42%,#d99a34 100%);
  --v-grad-play:linear-gradient(135deg,#ffd8e7 0%,#ff9ec4 34%,#f5c869 100%);
}

/* ============================================================
   1. ATMOSPHERE — kill the "black void", bring the landing's
   layered twilight glow. Overrides the dim roh-bg backdrop with
   a brighter, richer, multi-color radial field so short pages
   still feel alive top-to-bottom.
   ============================================================ */
html,body{background:var(--v-navy) !important;color:var(--v-text)}
/* base layered gradient field (landing body::before clone) */
body::before{
  content:"" !important;position:fixed !important;inset:0 !important;
  pointer-events:none !important;z-index:-3 !important;opacity:1 !important;
  background:
    radial-gradient(1200px 760px at 50% -6%, rgba(84,185,255,.30), transparent 56%),
    radial-gradient(1000px 780px at 90% 4%, rgba(255,158,196,.24), transparent 54%),
    radial-gradient(1000px 780px at 6% 16%, rgba(245,200,105,.22), transparent 54%),
    radial-gradient(900px 680px at 18% 98%, rgba(43,214,163,.16), transparent 48%),
    radial-gradient(900px 680px at 86% 94%, rgba(255,158,196,.16), transparent 48%),
    linear-gradient(180deg,#0c1a3a 0%,#0a1631 34%,#070d1a 68%,#05090f 100%) !important;
  filter:none !important;transform:none !important;
}
/* the roh-bg art layer — keep as a faint textured wash, not a black brick */
body::after{
  content:"" !important;position:fixed !important;inset:0 !important;
  pointer-events:none !important;z-index:-2 !important;
  background:
    linear-gradient(180deg, rgba(7,13,26,.62), rgba(5,9,15,.90) 78%),
    url('../img/roh-bg.png') center top / cover no-repeat !important;
  filter:blur(3px) saturate(1.12) brightness(.72) !important;
  transform:scale(1.04) !important;opacity:.9 !important;
}

/* ============================================================
   2. HEADERS — multi-hue shimmer titles (landing .sec-head h2)
   ============================================================ */
.cp-content h1,.cp-content h2,.page-title,.card h3,
.m-wrap h1,.rah-hero h1{
  background:var(--v-grad-head) !important;background-size:220% auto !important;
  -webkit-background-clip:text !important;background-clip:text !important;
  -webkit-text-fill-color:transparent !important;color:transparent !important;
  filter:drop-shadow(0 6px 18px rgba(0,0,0,.5)) !important;
  animation:vShimmer 9s linear infinite;
}
@keyframes vShimmer{to{background-position:220% center}}
/* small section subheads (m-wrap h2, card subtitles) — sakura-gold, no shimmer needed */
.m-wrap h2,.cp-content h3:not(.card h3){
  color:var(--v-gold-lite) !important;-webkit-text-fill-color:currentColor !important;
}

/* ============================================================
   3. TOP NAVBAR — vibrant tri-color underline + petal shimmer
   ============================================================ */
.topbar{
  background:linear-gradient(180deg,rgba(7,13,26,.92),rgba(7,13,26,.54)) !important;
  border-bottom:1px solid rgba(245,200,105,.16) !important;
}
/* tri-color shimmer line under the navbar (was mono gold) */
.topbar::after{
  background:linear-gradient(90deg,transparent,var(--v-sakura) 24%,var(--v-gold) 50%,var(--v-blue) 76%,transparent) !important;
  background-size:200% 100% !important;height:2px !important;opacity:.85;
  animation:vBarflow 12s linear infinite;
}
@keyframes vBarflow{to{background-position:200% 0}}
/* nav link underline = landing sakura→gold→blue */
.hnav-link::after,.hnav-top::after{
  background:var(--v-grad-line) !important;height:2px !important;border-radius:2px;
}
.hnav-link:hover,.hnav-top:hover,.hnav-link.active{
  color:#fff !important;text-shadow:0 0 14px rgba(255,158,196,.45) !important;
}
.brand img{box-shadow:0 0 0 3px rgba(245,200,105,.14),0 12px 30px rgba(0,0,0,.5)}
.topbar .brand:hover img{filter:drop-shadow(0 0 12px rgba(255,158,196,.55)) !important}
.hnav-drop{
  background:linear-gradient(180deg,#0d1730,#05080f) !important;
  border-color:rgba(245,200,105,.30) !important;
}
.hnav-drop a:hover{
  background:linear-gradient(90deg,rgba(255,158,196,.14),rgba(84,185,255,.12)) !important;
  color:#ffe9c2 !important;
}

/* ============================================================
   4. BUTTONS — colorful family (gold primary, sakura play,
   blue ghost) matching landing. Keep semantics: register/primary
   = gold; secondary accents get sakura/blue tints on hover.
   ============================================================ */
/* topbar action pills */
.actions .btn{
  color:#ffe6a7;background:rgba(255,255,255,.05);
  border:1px solid rgba(245,200,105,.32);
}
.actions .btn:hover{border-color:rgba(255,158,196,.5) !important}
.actions .btn.green,.btn.green,.actions .btn.gold,.btn.gold{
  color:#2a1607 !important;background:var(--v-grad-gold) !important;
  border-color:rgba(245,200,105,.55) !important;
  box-shadow:0 14px 34px rgba(245,200,105,.28),inset 0 1px 0 rgba(255,255,255,.7) !important;
}
/* DAFTAR / register — make it the sakura "play" gradient to pop like landing */
.actions .btn.green{
  background:var(--v-grad-play) !important;border-color:rgba(255,158,196,.55) !important;
  box-shadow:0 14px 38px rgba(255,158,196,.32),inset 0 1px 0 rgba(255,255,255,.7) !important;
}
.actions .btn.dc:hover{border-color:rgba(120,140,255,.6) !important;color:#cfd6ff !important}
.btn:hover,button:hover{transform:translateY(-3px);filter:brightness(1.05)}

/* content submit buttons — gold gradient, shine already in enhance */
.cp-content input[type=submit],.cp-content button,.cp-content .submit,
button[type=submit],input[type=submit],.m-btn{
  color:#2a1607 !important;background:var(--v-grad-gold) !important;
  border:1px solid rgba(245,200,105,.55) !important;border-radius:12px !important;
  box-shadow:0 14px 34px rgba(245,200,105,.24),inset 0 1px 0 rgba(255,255,255,.65) !important;
}
.m-btn:hover{transform:translateY(-3px);filter:brightness(1.06)}
/* ghost / secondary buttons get a blue landing tint */
.m-btn.ghost,.m-btn.sec,.cp-content input[type=button]{
  color:#dce8ff !important;background:rgba(84,185,255,.08) !important;
  border:1px solid rgba(84,185,255,.34) !important;box-shadow:none !important;
}
.m-btn.ghost:hover,.m-btn.sec:hover{border-color:rgba(84,185,255,.6) !important;background:rgba(84,185,255,.14) !important}

/* ============================================================
   5. CARDS / PANELS / FORMS — glass with colored corner glow
   ============================================================ */
.card,.cp-content form,.cp-content fieldset,.m-card,.rah-news-card,
.mall-card,.spec-card,.stat-card{
  border-color:rgba(245,200,105,.26) !important;
  background:linear-gradient(180deg,rgba(11,20,40,.78),rgba(5,10,20,.90)) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 24px 64px rgba(0,0,0,.42) !important;
  border-radius:18px !important;position:relative;
}
/* colored corner glow — alternates gold / sakura / blue feel */
.card::after,.m-card::after,.mall-card::after,.rah-news-card::after{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:
    radial-gradient(150px 130px at 100% 0%, rgba(255,158,196,.10), transparent 60%),
    radial-gradient(150px 130px at 0% 100%, rgba(84,185,255,.08), transparent 60%);
}
.card:hover,.m-card:hover,.rah-news-card:hover{
  transform:translateY(-4px);
  box-shadow:0 28px 66px rgba(0,0,0,.5),0 0 0 1px rgba(255,158,196,.35),0 0 30px rgba(245,200,105,.14) !important;
}
.mall-card:hover,.spec-card:hover,.stat-card:hover{
  transform:translateY(-4px);
  box-shadow:0 20px 46px rgba(0,0,0,.48),0 0 0 1px rgba(84,185,255,.35),0 0 26px rgba(255,158,196,.14) !important;
}
/* login card — center it, give it a real glow so it's not lost in the void */
.m-narrow{
  max-width:460px;margin:52px auto 40px !important;padding:30px 30px 26px !important;
  box-shadow:0 30px 90px rgba(0,0,0,.55),0 0 0 1px rgba(245,200,105,.22),0 0 40px rgba(255,158,196,.10) !important;
}
.m-narrow::before{
  content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:18px 18px 0 0;
  background:var(--v-grad-line);opacity:.9;
}
/* login/register: the inner <form> should blend into the card, not look like a
   second flat box stacked on the first. Make it transparent & borderless. */
.m-narrow form,.m-card form{
  background:transparent !important;border:0 !important;box-shadow:none !important;
  padding:0 !important;border-radius:0 !important;
}
.m-narrow form::before,.m-card form::before,.m-narrow form::after,.m-card form::after{display:none !important}

/* ============================================================
   6. TABLES / INPUTS — readable, colorful accents
   ============================================================ */
.cp-content table th,.m-tbl th,.m-info td.k{color:var(--v-gold-lite) !important}
.cp-content table tr:hover td,.m-tbl tr:hover td{
  background:linear-gradient(90deg,rgba(255,158,196,.06),rgba(84,185,255,.05)) !important;
}
label,.m-wrap label{color:#f3e3bf !important}
input:focus,select:focus,textarea:focus,
.cp-content input:focus,.cp-content select:focus,.m-wrap input:focus,.m-wrap select:focus,
.search-form input[type=text]:focus,.search-form select:focus{
  border-color:var(--v-gold) !important;
  box-shadow:0 0 0 3px rgba(245,200,105,.16),0 0 18px rgba(255,158,196,.12) !important;
}

/* ============================================================
   7. PILLS / BADGES / CHIPS — multi-hue like landing accents
   ============================================================ */
.m-pill.gm,.mbadge.price{background:rgba(245,200,105,.16) !important;color:var(--v-gold) !important;border:1px solid rgba(245,200,105,.42) !important}
.m-pill.vip{background:rgba(255,158,196,.16) !important;color:var(--v-sakura-lite) !important;border:1px solid rgba(255,158,196,.42) !important}
.m-pill.ok,.m-flash.ok{background:rgba(43,214,163,.14) !important;color:#8ff0cd !important;border:1px solid rgba(43,214,163,.4) !important}
.m-links a,.cp-content a:not(.btn){color:var(--v-gold-lite)}
.cp-content a:not(.btn):hover,.m-links a:hover{color:#fff;text-shadow:0 0 10px rgba(255,158,196,.5)}
/* mall category chips — blue active state */
.mall-filter .chipbtn.on,.chipbtn.on{
  background:linear-gradient(135deg,rgba(84,185,255,.24),rgba(255,158,196,.16)) !important;
  border-color:rgba(84,185,255,.5) !important;color:#eaf4ff !important;
}
/* gmtool chip-on / green buttons stay meaningful but get vibrancy */
.chip.chip-on{border-color:rgba(43,214,163,.5) !important;box-shadow:0 0 14px rgba(43,214,163,.16)}

/* ============================================================
   8. SCROLLBAR + SELECTION — colorful
   ============================================================ */
::selection{background:rgba(255,158,196,.32);color:#fff}
::-webkit-scrollbar-thumb{background:linear-gradient(#f5c869,#e0568f) !important}
::-webkit-scrollbar-thumb:hover{background:linear-gradient(#54b9ff,#f5c869) !important}

/* ============================================================
   9. FOOTER — subtle tri-color top edge
   ============================================================ */
.footer{position:relative}
.footer::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,158,196,.4),rgba(245,200,105,.5),rgba(84,185,255,.4),transparent);
}
.footer a:hover{color:var(--v-sakura-lite)}

/* ============================================================
   10. MOTION SAFETY
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.001s !important}
}