/*
  Purple brand polish
  Adds the richer purple direction throughout the interface while keeping the dark hosting style.
  Focus areas: buttons, cards/panels, form controls, table headers, badges and public sections.
*/

:root{
  --brand:#8b20ff!important;
  --brand-2:#4f8cff!important;
  --brand-3:#c447ff!important;
  --purple-glow:rgba(139,32,255,.26);
  --purple-line:rgba(183,120,255,.24);
  --purple-line-soft:rgba(183,120,255,.12);
  --purple-surface:rgba(44,20,82,.32);
  --purple-surface-soft:rgba(139,32,255,.075);
}

/* Overall dark surface: slightly more purple depth, less flat blue. */
html body{
  background:
    radial-gradient(circle at 12% -8%,rgba(139,32,255,.13),transparent 34rem),
    radial-gradient(circle at 88% 0%,rgba(76,51,196,.10),transparent 32rem),
    linear-gradient(180deg,#060b16 0%,#050914 48%,#040812 100%)!important;
}

/* Public topbar and app/sidebar accents. */
html body .topbar,
html body .dashboard-sidebar,
html body .admin-side{
  background:
    radial-gradient(circle at 18% 0%,rgba(139,32,255,.12),transparent 18rem),
    linear-gradient(180deg,rgba(12,13,29,.82),rgba(7,10,22,.78))!important;
}

html body .top-link::after,
html body .side-link.active::before,
html body .admin-side .side-link.active::before{
  background:linear-gradient(90deg,#c447ff,#8b20ff,#4f8cff)!important;
}

/* Primary buttons: richer purple, less default blue. */
html body :where(.btn.primary,.action-btn.primary,button.primary,.package-order,.add-balance-btn),
html body :where(.uc-hero-actions .btn.primary,.uc-page-actions .btn.primary,.uc-auth-form .btn.primary,.uc-contact-form .btn.primary,.dedicated-card-bottom .btn.primary){
  border:0!important;
  color:#fff!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.24),transparent 38%),
    linear-gradient(135deg,#c447ff 0%,#8b20ff 45%,#4f63ff 100%)!important;
  box-shadow:
    0 18px 46px rgba(139,32,255,.26),
    0 0 0 1px rgba(255,255,255,.08) inset!important;
}

html body :where(.btn.primary,.action-btn.primary,button.primary,.package-order,.add-balance-btn):hover,
html body :where(.uc-hero-actions .btn.primary,.uc-page-actions .btn.primary,.uc-auth-form .btn.primary,.uc-contact-form .btn.primary,.dedicated-card-bottom .btn.primary):hover{
  transform:translateY(-1px)!important;
  background:
    radial-gradient(circle at 20% 0%,rgba(255,255,255,.28),transparent 38%),
    linear-gradient(135deg,#d66cff 0%,#9a35ff 45%,#5c72ff 100%)!important;
  box-shadow:
    0 22px 58px rgba(139,32,255,.32),
    0 0 0 1px rgba(255,255,255,.12) inset!important;
}

/* Ghost / secondary buttons should still feel purple-branded. */
html body :where(.btn.ghost,.action-btn,.icon-btn,.wallet-chip,.language-switcher,.flag-language-switcher,.api-method-filter button){
  border-color:rgba(183,120,255,.18)!important;
  background:
    linear-gradient(180deg,rgba(139,32,255,.10),rgba(255,255,255,.035))!important;
  color:#e9ddff!important;
  box-shadow:none!important;
}

html body :where(.btn.ghost,.action-btn,.icon-btn,.wallet-chip,.api-method-filter button):hover{
  border-color:rgba(199,103,255,.30)!important;
  background:
    radial-gradient(circle at 30% 0%,rgba(199,103,255,.18),transparent 60%),
    linear-gradient(180deg,rgba(139,32,255,.16),rgba(255,255,255,.05))!important;
  color:#fff!important;
}

/* Form fields and focus states. */
html body :where(input,select,textarea,.compact-select){
  border-color:rgba(183,120,255,.16)!important;
}

html body :where(input,select,textarea,.compact-select):focus{
  border-color:rgba(199,103,255,.58)!important;
  box-shadow:
    0 0 0 4px rgba(139,32,255,.14),
    inset 0 0 0 1px rgba(199,103,255,.36)!important;
}

/* Cards / panels: replace hard boxed look with purple tinted depth. */
html body :where(.card,.panel,.clean-panel,.dashboard-card,.status-card,.admin-table-card,.admin-form-card,.service-table-card,.metric,.stat,.kpi,.featured-card,.one-plan-card,.dedicated-inventory-card,.contact-support-grid article,.platform-feature-row article,.api-endpoint,.api-doc-card,.api-docs-tools,.faq-layout details,.legal-page,.auth-card){
  border-color:transparent!important;
  background:
    radial-gradient(circle at 100% 0%,rgba(139,32,255,.105),transparent 185px),
    linear-gradient(180deg,rgba(255,255,255,.047),rgba(255,255,255,.020))!important;
  box-shadow:
    0 24px 70px rgba(0,0,0,.18),
    0 0 0 1px rgba(183,120,255,.075) inset!important;
}

html body :where(.card,.panel,.clean-panel,.dashboard-card,.status-card,.admin-table-card,.admin-form-card,.service-table-card,.featured-card,.one-plan-card,.dedicated-inventory-card,.contact-support-grid article,.platform-feature-row article,.api-endpoint):hover{
  box-shadow:
    0 28px 86px rgba(0,0,0,.22),
    0 0 0 1px rgba(183,120,255,.14) inset,
    0 0 46px rgba(139,32,255,.06)!important;
}

/* More visible purple top accents on cards. */
html body :where(.refined-server-card,.dedicated-inventory-card,.contact-support-grid article,.platform-feature-row article,.api-endpoint,.admin-table-card,.service-table-card)::before{
  background:linear-gradient(90deg,#c447ff,#8b20ff,#4f8cff)!important;
}

/* Popular / most selected cards stand out with a premium purple glow. */
html body :where(.one-plan-card.one-plan-popular,.featured-card.featured,.refined-server-card.featured){
  background:
    radial-gradient(circle at 88% 4%,rgba(199,103,255,.25),transparent 190px),
    radial-gradient(circle at 8% 100%,rgba(79,140,255,.15),transparent 210px),
    linear-gradient(180deg,rgba(44,20,82,.42),rgba(9,15,31,.82))!important;
  box-shadow:
    0 34px 100px rgba(0,0,0,.34),
    0 0 0 1px rgba(199,103,255,.25) inset,
    0 0 85px rgba(139,32,255,.18)!important;
}

html body .one-popular-label,
html body :where(.plan-tag,.dedicated-status-pill.available,.status-pill.active,.pill.success){
  border:0!important;
  background:linear-gradient(135deg,rgba(199,103,255,.95),rgba(139,32,255,.92),rgba(79,140,255,.82))!important;
  color:#fff!important;
  box-shadow:0 14px 36px rgba(139,32,255,.22)!important;
}

/* Tables: headers get a subtle purple glass layer. */
html body :where(table,.table,.csp-enhanced-table) thead th,
html body :where(.table th,table.csp-enhanced-table th){
  background:
    linear-gradient(180deg,rgba(139,32,255,.15),rgba(255,255,255,.035))!important;
  color:#f1e9ff!important;
  border-bottom-color:rgba(183,120,255,.13)!important;
}

html body :where(.table td,table.csp-enhanced-table td){
  background:rgba(139,32,255,.025)!important;
}

html body :where(.table tr:hover td,table.csp-enhanced-table tr:hover td){
  background:rgba(139,32,255,.055)!important;
}

/* Dashboard/sidebar nav items. */
html body .side-link.active,
html body .side-link:hover{
  background:
    radial-gradient(circle at 0% 50%,rgba(199,103,255,.18),transparent 75%),
    linear-gradient(90deg,rgba(139,32,255,.16),rgba(255,255,255,.03))!important;
  color:#fff!important;
}

html body .side-ico,
html body .nav-ico,
html body .icon,
html body .kpi-icon,
html body .panel-icon{
  background:linear-gradient(135deg,rgba(139,32,255,.20),rgba(79,140,255,.12))!important;
  color:#e6d7ff!important;
  border-color:rgba(183,120,255,.16)!important;
}

/* Hero panels and form panels receive the purple treatment too. */
html body :where(.uc-signup-panel,.uc-auth-panel,.uc-contact-panel,.uc-page-facts div){
  background:
    radial-gradient(circle at 100% 0%,rgba(199,103,255,.14),transparent 160px),
    linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.032))!important;
  box-shadow:
    0 30px 90px rgba(0,0,0,.22),
    0 0 0 1px rgba(183,120,255,.12) inset!important;
}

html body :where(.uc-auth-panel,.uc-contact-panel)::before,
html body .uc-signup-panel::before{
  background:linear-gradient(90deg,#c447ff,#8b20ff,#4f8cff)!important;
}

/* Ribbons/abstract lines: keep the richer purple route without adding orbs. */
html body :where(.uc-ribbon,.uc-page-ribbon,.uc-auth-ribbon,.uc-contact-ribbon){
  background:
    linear-gradient(90deg,transparent 0%,rgba(199,103,255,.05) 12%,rgba(199,103,255,.55) 34%,rgba(139,32,255,.46) 58%,rgba(79,140,255,.12) 72%,transparent 100%)!important;
  box-shadow:0 0 60px rgba(139,32,255,.16)!important;
}

html body :where(.uc-ribbon-two,.uc-page-ribbon-two,.uc-auth-ribbon-two,.uc-contact-ribbon-two){
  background:
    linear-gradient(90deg,transparent,rgba(79,140,255,.10),rgba(139,32,255,.35),rgba(199,103,255,.26),transparent)!important;
}

/* Make small badges/chips consistent. */
html body :where(.eyebrow,.plan-tag,.section-chip-row span,.map-stat-row span,.dedicated-card-meta span,.language-flag.active){
  border-color:rgba(183,120,255,.20)!important;
  background:rgba(139,32,255,.12)!important;
  color:#d9c6ff!important;
}

/* Alerts keep their semantics but with better dark-theme surface. */
html body .alert,
html body .pill{
  border-color:rgba(183,120,255,.18)!important;
  background:rgba(139,32,255,.10)!important;
}

/* Admin action states still keep meaning while matching palette. */
html body .action-btn.success,
html body .status-pill.active{
  background:linear-gradient(135deg,rgba(67,232,137,.14),rgba(139,32,255,.08))!important;
  color:#9cf8bd!important;
}

html body .action-btn.danger,
html body .status-pill.suspended,
html body .pill.danger,
html body .alert.danger{
  background:linear-gradient(135deg,rgba(217,75,75,.16),rgba(139,32,255,.08))!important;
  color:#ffb5b5!important;
}

/* Package feature strip should feel integrated, not boxed. */
html body .one-feature-strip article::before{
  background:linear-gradient(135deg,rgba(199,103,255,.28),rgba(79,140,255,.16))!important;
}

html body .one-feature-strip article::after{
  background:#c447ff!important;
  box-shadow:0 0 18px rgba(199,103,255,.58)!important;
}