/* ZyroDevv CPanel Cloud V1.6.9 — Dual Theme: Normal + High Contrast Monochrome */

.theme-mode-toggle{
  position:fixed;
  top:max(82px,calc(env(safe-area-inset-top) + 68px));
  right:16px;
  z-index:9998;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-width:92px;
  height:42px;
  padding:0 14px;
  border:1px solid rgba(148,163,184,.4);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  color:#0f172a;
  box-shadow:0 12px 30px rgba(15,23,42,.15);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  font:800 11px/1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  cursor:pointer;
}
.theme-mode-toggle svg{width:17px;height:17px;display:block}
.theme-mode-toggle:active{transform:scale(.97)}
@media(max-width:720px){
  .theme-mode-toggle{top:max(76px,calc(env(safe-area-inset-top) + 62px));right:12px;min-width:78px;height:38px;padding:0 11px;border-radius:12px}
}

/* High-contrast monochrome inspired by the supplied black grid reference. */
html[data-theme="mono"]{
  color-scheme:dark;
  --bg:#050505;
  --surface:#0c0c0c;
  --surface-2:#111111;
  --ink:#f7f7f7;
  --muted:#a4a4a4;
  --line:#2a2a2a;
  --primary:#ffffff;
  --primary2:#d4d4d4;
  --cyan:#ffffff;
  --green:#eeeeee;
  --yellow:#bcbcbc;
  --red:#777777;
  --shadow:0 20px 55px rgba(0,0,0,.55);
  background:#050505;
}
html[data-theme="mono"] body,
html[data-theme="mono"] .admin-body{
  background-color:#050505 !important;
  background-image:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 18% 0,rgba(255,255,255,.05),transparent 35%) !important;
  background-size:32px 32px,32px 32px,100% 100% !important;
  color:#f7f7f7 !important;
}
html[data-theme="mono"] #app,
html[data-theme="mono"] #adminApp,
html[data-theme="mono"] #modalRoot,
html[data-theme="mono"] #toastRoot{filter:none !important}
html[data-theme="mono"] img,
html[data-theme="mono"] video,
html[data-theme="mono"] canvas,
html[data-theme="mono"] .brand-lockup img,
html[data-theme="mono"] .side-brand img,
html[data-theme="mono"] .user-card img,
html[data-theme="mono"] .avatar,
html[data-theme="mono"] .boot img{filter:grayscale(1) contrast(1.08) !important}
html[data-theme="mono"] ::selection{background:#fff;color:#050505}

html[data-theme="mono"] .content,
html[data-theme="mono"] main,
html[data-theme="mono"] .admin-main{color:#f7f7f7 !important}
html[data-theme="mono"] h1,
html[data-theme="mono"] h2,
html[data-theme="mono"] h3,
html[data-theme="mono"] h4,
html[data-theme="mono"] b,
html[data-theme="mono"] strong,
html[data-theme="mono"] label,
html[data-theme="mono"] .top-title,
html[data-theme="mono"] .card-title{color:#f7f7f7 !important}
html[data-theme="mono"] p,
html[data-theme="mono"] small,
html[data-theme="mono"] .muted,
html[data-theme="mono"] .top-sub,
html[data-theme="mono"] .field-help,
html[data-theme="mono"] .tiny{color:#a4a4a4 !important}

html[data-theme="mono"] .card,
html[data-theme="mono"] .auth-card,
html[data-theme="mono"] .modal,
html[data-theme="mono"] .modal-card,
html[data-theme="mono"] .smart-select-menu,
html[data-theme="mono"] .sidebar-drawer,
html[data-theme="mono"] .admin-card,
html[data-theme="mono"] .panel-card,
html[data-theme="mono"] .target-card,
html[data-theme="mono"] .user-row,
html[data-theme="mono"] .notification-card,
html[data-theme="mono"] .review-card,
html[data-theme="mono"] .payment-card,
html[data-theme="mono"] .security-action-card,
html[data-theme="mono"] .security-score-card{
  background:rgba(11,11,11,.94) !important;
  border:1px solid #292929 !important;
  box-shadow:0 18px 48px rgba(0,0,0,.48) !important;
  color:#f7f7f7 !important;
}
html[data-theme="mono"] .topbar,
html[data-theme="mono"] .admin-topbar{
  background:rgba(5,5,5,.92) !important;
  border-color:#242424 !important;
  color:#fff !important;
  backdrop-filter:blur(18px);
}
html[data-theme="mono"] .sidebar,
html[data-theme="mono"] .auth-brand,
html[data-theme="mono"] .admin-sidebar{
  background:#080808 !important;
  border-color:#242424 !important;
  color:#fff !important;
}
html[data-theme="mono"] .sidebar::before,
html[data-theme="mono"] .auth-brand::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:28px 28px;
  opacity:.7;
}
html[data-theme="mono"] .side-brand,
html[data-theme="mono"] .user-card,
html[data-theme="mono"] .side-footer,
html[data-theme="mono"] .nav,
html[data-theme="mono"] .side-label{position:relative;z-index:1}
html[data-theme="mono"] .user-card,
html[data-theme="mono"] .side-upgrade{
  background:#101010 !important;
  border:1px solid #2b2b2b !important;
}
html[data-theme="mono"] .nav a{color:#b8b8b8 !important}
html[data-theme="mono"] .nav a:hover,
html[data-theme="mono"] .nav a.active{
  background:#f4f4f4 !important;
  color:#090909 !important;
  border-color:#fff !important;
}
html[data-theme="mono"] .nav a.active .nav-icon{color:#090909 !important}

html[data-theme="mono"] .hero,
html[data-theme="mono"] .role-upgrade-hero,
html[data-theme="mono"] .role-tax-hero,
html[data-theme="mono"] .auth-copy{
  background:#090909 !important;
  border:1px solid #303030 !important;
  color:#fff !important;
  box-shadow:0 24px 70px rgba(0,0,0,.6) !important;
}
html[data-theme="mono"] .hero p,
html[data-theme="mono"] .role-upgrade-hero p,
html[data-theme="mono"] .auth-copy p,
html[data-theme="mono"] .brand-lockup p{color:#b7b7b7 !important}
html[data-theme="mono"] .typewriter:after,
html[data-theme="mono"] .motion-typewriter::after{background:#fff !important;box-shadow:0 0 15px rgba(255,255,255,.7)}

html[data-theme="mono"] .input-wrap,
html[data-theme="mono"] .premium-input,
html[data-theme="mono"] .smart-select-trigger,
html[data-theme="mono"] .runtime-option,
html[data-theme="mono"] .credential-value-row code,
html[data-theme="mono"] .billing-row,
html[data-theme="mono"] .panel-resource-grid>div,
html[data-theme="mono"] input,
html[data-theme="mono"] textarea,
html[data-theme="mono"] select{
  background:#0b0b0b !important;
  border-color:#303030 !important;
  color:#f5f5f5 !important;
}
html[data-theme="mono"] input::placeholder,
html[data-theme="mono"] textarea::placeholder{color:#777 !important}
html[data-theme="mono"] .input-wrap:focus-within,
html[data-theme="mono"] .smart-select.open .smart-select-trigger,
html[data-theme="mono"] .smart-select-trigger:focus,
html[data-theme="mono"] input:focus,
html[data-theme="mono"] textarea:focus,
html[data-theme="mono"] select:focus{
  border-color:#eee !important;
  box-shadow:0 0 0 3px rgba(255,255,255,.11) !important;
}

html[data-theme="mono"] .btn-primary,
html[data-theme="mono"] .btn-cyan,
html[data-theme="mono"] .btn-success,
html[data-theme="mono"] .btn-gradient,
html[data-theme="mono"] .credential-copy-all,
html[data-theme="mono"] .deploy-button,
html[data-theme="mono"] .tax-pay-button,
html[data-theme="mono"] .upgrade-button,
html[data-theme="mono"] button[class*="gradient"],
html[data-theme="mono"] a[class*="gradient"]{
  background:#f5f5f5 !important;
  color:#080808 !important;
  border-color:#fff !important;
  box-shadow:0 12px 28px rgba(255,255,255,.08) !important;
}
html[data-theme="mono"] .btn-danger,
html[data-theme="mono"] .power.stop{background:#202020 !important;color:#fff !important;border-color:#3b3b3b !important}
html[data-theme="mono"] .power.start{background:#f2f2f2 !important;color:#080808 !important;border-color:#fff !important}
html[data-theme="mono"] .power.restart{background:#4a4a4a !important;color:#fff !important;border-color:#626262 !important}
html[data-theme="mono"] .btn-ghost,
html[data-theme="mono"] .btn-outline,
html[data-theme="mono"] .google-btn,
html[data-theme="mono"] .icon-btn,
html[data-theme="mono"] .menu-btn,
html[data-theme="mono"] .avatar-btn,
html[data-theme="mono"] .close-btn{
  background:#0d0d0d !important;
  border-color:#303030 !important;
  color:#f3f3f3 !important;
}

html[data-theme="mono"] .role-chip,
html[data-theme="mono"] .chip,
html[data-theme="mono"] .status,
html[data-theme="mono"] .server-online-pill,
html[data-theme="mono"] .smart-select-option-badge,
html[data-theme="mono"] .eyebrow,
html[data-theme="mono"] .access-badge,
html[data-theme="mono"] .plan-badge,
html[data-theme="mono"] .badge{
  background:#151515 !important;
  color:#ededed !important;
  border-color:#383838 !important;
}
html[data-theme="mono"] .count-dot{background:#fff !important;color:#080808 !important;border-color:#080808 !important}
html[data-theme="mono"] .notice,
html[data-theme="mono"] .access-cumulative-note,
html[data-theme="mono"] .credentials-intro,
html[data-theme="mono"] .renewal-tip,
html[data-theme="mono"] .role-tax-banner{
  background:#111 !important;
  color:#ddd !important;
  border-color:#333 !important;
}
html[data-theme="mono"] .smart-select-leading,
html[data-theme="mono"] .field-leading,
html[data-theme="mono"] .server-status-icon,
html[data-theme="mono"] .server-target-icon,
html[data-theme="mono"] .smart-select-option-icon,
html[data-theme="mono"] .stat-icon,
html[data-theme="mono"] .buyer-card-icon,
html[data-theme="mono"] .billing-icon,
html[data-theme="mono"] .renewal-icon,
html[data-theme="mono"] .deploy-title-icon,
html[data-theme="mono"] .credential-item-head>span{
  background:#151515 !important;
  border-color:#353535 !important;
  color:#fff !important;
}
html[data-theme="mono"] .smart-select-option:hover,
html[data-theme="mono"] .smart-select-option.selected,
html[data-theme="mono"] .runtime-option:has(input:checked),
html[data-theme="mono"] .select-card.active,
html[data-theme="mono"] .plan-card.selected{
  background:#1a1a1a !important;
  border-color:#eee !important;
  box-shadow:0 0 0 2px rgba(255,255,255,.09) !important;
}
html[data-theme="mono"] .smart-select-check,
html[data-theme="mono"] .runtime-option:has(input:checked) .runtime-check{background:#fff !important;border-color:#fff !important;color:#080808 !important}

html[data-theme="mono"] .server-target-row,
html[data-theme="mono"] .target-row,
html[data-theme="mono"] .status-card{background:#0d0d0d !important;border-color:#2d2d2d !important}
html[data-theme="mono"] .server-target-row.online,
html[data-theme="mono"] .target-row.online,
html[data-theme="mono"] .status-online{background:#101010 !important;border-color:#4b4b4b !important}
html[data-theme="mono"] .server-target-row.maintenance,
html[data-theme="mono"] .target-row.maintenance,
html[data-theme="mono"] .status-maintenance{background:#151515 !important;border-color:#676767 !important}
html[data-theme="mono"] .server-target-row.offline,
html[data-theme="mono"] .target-row.offline,
html[data-theme="mono"] .status-offline{background:#090909 !important;border-color:#363636 !important}
html[data-theme="mono"] .server-target-copy b,
html[data-theme="mono"] .server-target-meta strong{color:#fff !important}
html[data-theme="mono"] .server-target-copy small,
html[data-theme="mono"] .server-target-meta small{color:#8e8e8e !important}
html[data-theme="mono"] .server-target-dot,
html[data-theme="mono"] .status-dot,
html[data-theme="mono"] .live-dot,
html[data-theme="mono"] .pulse-dot{background:#fff !important;box-shadow:0 0 0 0 rgba(255,255,255,.25) !important}
html[data-theme="mono"] .server-target-row.online .server-target-dot,
html[data-theme="mono"] .status-online .status-dot{animation:monoHighPulse 1.8s infinite !important}
html[data-theme="mono"] .server-target-row.maintenance .server-target-dot,
html[data-theme="mono"] .status-maintenance .status-dot{background:#aaa !important;animation:monoHighPulse 1.4s infinite !important}
html[data-theme="mono"] .server-target-row.offline .server-target-dot,
html[data-theme="mono"] .status-offline .status-dot{background:#555 !important;animation:monoHighPulse 1.1s infinite !important}
html[data-theme="mono"] .server-online-pill>span{background:#fff !important;animation:monoHighPulse 1.8s infinite !important}
@keyframes monoHighPulse{0%,100%{box-shadow:0 0 0 0 rgba(255,255,255,.26);opacity:.78}50%{box-shadow:0 0 0 9px rgba(255,255,255,0);opacity:1}}

html[data-theme="mono"] .panel-resource-grid em,
html[data-theme="mono"] .progress>span,
html[data-theme="mono"] .progress-bar>span{background:linear-gradient(90deg,#fff,#777) !important}
html[data-theme="mono"] .stars,
html[data-theme="mono"] .star-picker button,
html[data-theme="mono"] .star-picker button.active,
html[data-theme="mono"] .rating-big{color:#fff !important}
html[data-theme="mono"] .qr-wrap,
html[data-theme="mono"] .payment-qr{filter:grayscale(1) contrast(1.35)}
html[data-theme="mono"] .toast,
html[data-theme="mono"] .toast.success,
html[data-theme="mono"] .toast.warning,
html[data-theme="mono"] .toast.error{background:#f4f4f4 !important;color:#090909 !important;border-color:#fff !important}
html[data-theme="mono"] .theme-mode-toggle{background:#f5f5f5;color:#080808;border-color:#fff;box-shadow:0 12px 30px rgba(0,0,0,.55)}

@media(max-width:720px){
  html[data-theme="mono"] body,
  html[data-theme="mono"] .admin-body{background-size:26px 26px,26px 26px,100% 100% !important}
  html[data-theme="mono"] .card,
  html[data-theme="mono"] .auth-card,
  html[data-theme="mono"] .modal,
  html[data-theme="mono"] .modal-card{box-shadow:0 14px 38px rgba(0,0,0,.52) !important}
}