/* ZyroDevv CPanel Cloud V1.6.8 — Permanent Monochrome Edition
   Seluruh buyer UI dan Admin Control Center dikunci ke palet hitam, putih, dan abu-abu. */
:root{
  --bg:#eeeeee;
  --surface:#ffffff;
  --surface-2:#f5f5f5;
  --ink:#101010;
  --muted:#6b6b6b;
  --line:#d4d4d4;
  --primary:#111111;
  --primary2:#656565;
  --cyan:#2f2f2f;
  --green:#303030;
  --yellow:#777777;
  --red:#050505;
  --shadow:0 18px 46px rgba(0,0,0,.10);
}
html{background:#e9e9e9;color-scheme:light}
body,
.admin-body{
  background:
    radial-gradient(circle at 12% 0,rgba(255,255,255,.95),transparent 29%),
    radial-gradient(circle at 94% 8%,rgba(190,190,190,.30),transparent 27%),
    linear-gradient(180deg,#f7f7f7 0%,#e9e9e9 100%) !important;
  color:#101010;
}
#app,#adminApp,#modalRoot,#toastRoot{filter:grayscale(1)}
img,video,canvas,.brand-lockup img,.side-brand img,.user-card img,.avatar,.boot img{filter:grayscale(1) contrast(1.03)}
::selection{background:#181818;color:#fff}

/* Permanent neutral surfaces */
.card,.auth-card,.topbar,.modal,.modal-card,.smart-select-menu,.sidebar-drawer,.admin-card,
.panel-card,.target-card,.user-row,.notification-card,.review-card,.payment-card{
  border-color:#d7d7d7 !important;
  box-shadow:0 16px 42px rgba(0,0,0,.09) !important;
}
.card,.auth-card,.modal,.modal-card,.smart-select-menu,.panel-card,.target-card{
  background:rgba(255,255,255,.94) !important;
}
.surface,.surface-2,.input-wrap,.premium-input,.smart-select-trigger,.runtime-option,
.credential-value-row code,.billing-row,.panel-resource-grid>div{
  background:#f7f7f7 !important;
  border-color:#d4d4d4 !important;
}

/* Main navigation and hero */
.sidebar,.auth-brand{
  background:linear-gradient(160deg,#050505 0%,#181818 57%,#3a3a3a 100%) !important;
  color:#fff !important;
}
.user-card,.side-upgrade{
  background:linear-gradient(145deg,#171717,#333333) !important;
  border-color:rgba(255,255,255,.13) !important;
}
.nav a:hover,.nav a.active{
  background:linear-gradient(135deg,#ffffff22,#ffffff0d) !important;
  color:#fff !important;
}
.hero,.role-upgrade-hero,.role-tax-hero,.renewal-icon{
  background:linear-gradient(135deg,#050505 0%,#252525 58%,#666 100%) !important;
  color:#fff !important;
  box-shadow:0 24px 64px rgba(0,0,0,.22) !important;
}
.hero:before,.hero:after,.auth-brand:before,.auth-brand:after,.role-upgrade-hero:before,.role-upgrade-hero:after{
  background:radial-gradient(circle,rgba(255,255,255,.20),transparent 68%) !important;
}
.hero p,.role-upgrade-hero p,.auth-copy p,.brand-lockup p{color:#d8d8d8 !important}
.typewriter:after,.motion-typewriter::after{background:#fff !important;box-shadow:0 0 12px rgba(255,255,255,.55)}

/* All primary actions are monochrome */
.btn-primary,.btn-cyan,.btn-success,.btn-danger,.btn-gradient,.credential-copy-all,
.deploy-button,.side-upgrade .btn,.tax-pay-button,.upgrade-button,
button[class*="gradient"],a[class*="gradient"]{
  background:linear-gradient(135deg,#050505,#555555) !important;
  color:#fff !important;
  border-color:#1c1c1c !important;
  box-shadow:0 13px 28px rgba(0,0,0,.18) !important;
}
.btn-ghost,.btn-outline,.google-btn,.icon-btn,.menu-btn,.avatar-btn{
  background:#fff !important;
  border-color:#d1d1d1 !important;
  color:#181818 !important;
}
.btn-danger,.power.stop{background:#151515 !important;color:#fff !important}
.btn-success,.power.start{background:#e8e8e8 !important;color:#111 !important;border:1px solid #bdbdbd}
.power.restart{background:#cfcfcf !important;color:#151515 !important}

/* Chips, badges, notices, forms */
.role-chip,.chip,.status,.server-online-pill,.smart-select-option-badge,.eyebrow,
.access-badge,.count-dot,.plan-badge,.badge{
  background:#efefef !important;
  color:#171717 !important;
  border-color:#c8c8c8 !important;
}
.count-dot{background:#151515 !important;color:#fff !important;border-color:#fff !important}
.notice,.access-cumulative-note,.credentials-intro,.renewal-tip,.role-tax-banner{
  background:linear-gradient(135deg,#f7f7f7,#e9e9e9) !important;
  color:#222 !important;
  border-color:#c9c9c9 !important;
}
.input-wrap:focus-within,.smart-select.open .smart-select-trigger,.smart-select-trigger:focus,
input:focus,textarea:focus,select:focus{
  border-color:#222 !important;
  box-shadow:0 0 0 4px rgba(0,0,0,.10) !important;
}
.smart-select-leading,.field-leading,.server-status-icon,.server-target-icon,
.smart-select-option-icon,.stat-icon,.buyer-card-icon,.billing-icon,.renewal-icon,
.deploy-title-icon,.credential-item-head>span{
  background:linear-gradient(145deg,#fafafa,#dedede) !important;
  border-color:#cfcfcf !important;
  color:#171717 !important;
}
.smart-select-option:hover,.smart-select-option.selected,.runtime-option:has(input:checked),
.select-card.active,.plan-card.selected{
  background:linear-gradient(135deg,#f5f5f5,#dddddd) !important;
  border-color:#5b5b5b !important;
  box-shadow:0 0 0 3px rgba(0,0,0,.08) !important;
}
.smart-select-check,.runtime-option:has(input:checked) .runtime-check{
  background:#151515 !important;
  border-color:#151515 !important;
  color:#fff !important;
}

/* Monochrome live status while retaining labels and pulse motion */
.server-target-row,.target-row,.status-card{background:#f8f8f8 !important;border-color:#d0d0d0 !important}
.server-target-row.online,.target-row.online,.status-online{
  background:linear-gradient(135deg,#fafafa,#e3e3e3) !important;
  border-color:#b8b8b8 !important;
}
.server-target-row.maintenance,.target-row.maintenance,.status-maintenance{
  background:linear-gradient(135deg,#f1f1f1,#d3d3d3) !important;
  border-color:#999 !important;
}
.server-target-row.offline,.target-row.offline,.status-offline{
  background:linear-gradient(135deg,#e7e7e7,#c5c5c5) !important;
  border-color:#777 !important;
}
.server-target-dot,.status-dot,.live-dot,.pulse-dot{background:#444 !important;box-shadow:0 0 0 0 rgba(68,68,68,.34) !important}
.server-target-row.online .server-target-dot,.status-online .status-dot{background:#777 !important;animation:monoPulseSoft 1.8s infinite !important}
.server-target-row.maintenance .server-target-dot,.status-maintenance .status-dot{background:#444 !important;animation:monoPulseMedium 1.45s infinite !important}
.server-target-row.offline .server-target-dot,.status-offline .status-dot{background:#090909 !important;animation:monoPulseStrong 1.15s infinite !important}
.server-target-meta strong,.server-target-row.online .server-target-meta strong,
.server-target-row.maintenance .server-target-meta strong,.server-target-row.offline .server-target-meta strong{
  color:#171717 !important;
  text-shadow:none !important;
}
.server-online-pill>span{background:#555 !important;animation:monoPulseSoft 1.8s infinite !important}
@keyframes monoPulseSoft{0%,100%{box-shadow:0 0 0 0 rgba(90,90,90,.34);opacity:.9}50%{box-shadow:0 0 0 9px rgba(90,90,90,0);opacity:1}}
@keyframes monoPulseMedium{0%,100%{box-shadow:0 0 0 0 rgba(45,45,45,.38)}50%{box-shadow:0 0 0 10px rgba(45,45,45,0)}}
@keyframes monoPulseStrong{0%,100%{box-shadow:0 0 0 0 rgba(0,0,0,.42)}50%{box-shadow:0 0 0 11px rgba(0,0,0,0)}}

/* Progress, ratings, invoices and QR remain neutral */
.panel-resource-grid em,.progress>span,.progress-bar>span{
  background:linear-gradient(90deg,#151515,#8b8b8b) !important;
}
.stars,.star-picker button,.star-picker button.active,.rating-big{color:#202020 !important}
.qr-wrap,.payment-qr{filter:grayscale(1) contrast(1.2)}

/* Toast semantics in grayscale */
.toast,.toast.success,.toast.warning,.toast.error{
  background:#171717 !important;
  color:#fff !important;
  border-color:#333 !important;
}

/* Remove any remaining bright inline accents visually */
[style*="color:#"],[style*="color: #"]{filter:grayscale(1)}
input[type="color"]{filter:grayscale(1);border:1px solid #aaa;background:#eee}

@media(max-width:720px){
  body,.admin-body{background:linear-gradient(180deg,#f7f7f7,#e8e8e8) !important}
  .card,.auth-card,.modal,.modal-card{box-shadow:0 12px 34px rgba(0,0,0,.09) !important}
}