/* HUNG VPS | Cosmic sky. Keep after the existing styles. */
:root {
  --hungvps-ui-version: "cosmic-20261026-1";
  color-scheme: dark;
  --bg-page: #0c1534;
  --app-bg: #121d3c;
  --card-bg: #121d3c;
  --surface: rgba(18, 29, 60, .92);
  --surface-raised: #1c294b;
  --surface-input: #101b36;
  --surface-selected: #293d68;
  --line: #455579;
  --text-title: #f1f5ff;
  --text-body: #d4dff6;
  --text-muted: #adbddd;
  --purple-border: #ad9cf5;
  --purple-brand: #b5a1ff;
  --primary-color: #93beff;
  --purple-glow: rgba(125, 157, 255, .12);
  --accent: #94dcff;
  --gold: #8de2ff;
  --positive: #86edc7;
  --negative: #ffb4c7;
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm: 10px;
}
/* A contrasting, inherited text baseline also covers the old inline text colors. */
*, *::before, *::after {
  color: inherit !important;
  border-color: var(--line) !important;
}
html, body, body.cs-body-bg {
  color: var(--text-body) !important;
  background-color: var(--bg-page) !important;
}
html { scrollbar-color: #667ba6 #121d3c; }
body, body.cs-body-bg {
  display: block !important;
  background: #0c1534 url("cosmos.svg?v=cosmic-20261026-1") center / cover fixed !important;
  min-height: 100vh;
  line-height: 1.55;
}
::selection { background: #4d5990; color: #f1f5ff; }
.app-container, .dashboard-page {
  margin: 0 auto;
  max-width: 1120px !important;
  background: rgba(12, 21, 52, .22) !important;
  border: 1px solid #455579 !important;
  box-shadow: 0 24px 70px rgba(3, 9, 30, .22) !important;
  overflow: visible !important;
}
.dashboard-wide-container { max-width: 1200px; }
.main-content { position: relative; }
h1, h2, h3, h4, h5, h6, .brand-name, .cs-box-title, .cs-card-name,
.cs-name-edit, .server-name, .cycle-name, .val, .spec-value-line {
  color: var(--text-title) !important;
}
.brand-name {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  letter-spacing: -.5px;
}
a { color: var(--accent) !important; }
.header {
  background: #141e40 !important;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line) !important;
  box-shadow: 0 10px 24px rgba(3, 9, 30, .3) !important;
  backdrop-filter: none !important;
}
.header-bal-badge, .btn-logout, .back-link {
  background: #253658 !important;
  color: #bdd8ff !important;
  border-color: #53618c !important;
}
.logo-icon {
  background: linear-gradient(135deg, #6592e4, #8968cf) !important;
  color: #f4f7ff !important;
  box-shadow: 0 5px 16px rgba(111, 133, 245, .24) !important;
}
.hamburger-btn span { background: var(--accent) !important; }
.dropdown-nav { background: #172344 !important; }
.dropdown-nav .nav-item { border-bottom-color: #35466c !important; }
.dropdown-nav .nav-item:hover { background: #2b3c65 !important; }
.hero-title { font-size: clamp(29px, 4vw, 42px); letter-spacing: -1px; }
.hero-section { padding: 20px 0 8px; }
.hero-subtitle {
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  color: var(--gold) !important;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
}

/* Panels and service management. */
.auth-card, .info-card, .faq-item, .action-btn, .price-plan-card,
.server-card, .balance-card, .stat-box, .empty-state-box,
.cs-exact-card, .cs-box-card, .cs-summary-panel, .bottom-summary-box,
.cs-mgmt-card, .card, .plan-card, .banking-info-box,
.cs-modal-box, .modal-box, .loading-spinner-modal {
  background: var(--surface) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
  box-shadow: 0 10px 28px rgba(3, 9, 30, .28) !important;
}
.cs-box-card, .cs-summary-panel, .bottom-summary-box, .auth-card {
  border-radius: 22px !important;
}
.auth-card { border-top: 2px solid #8470bf !important; }
.cs-price-gray-box, .cs-pill-item, .cs-sum-plan-box, .bottom-details-left,
.cs-mgmt-creds-box, .cs-mgmt-specs-info, .cs-mgmt-dates-grid,
.cs-addon-cell, .cs-os-tab-bar, .cs-memo-field, .px-card-top-bar,
.px-connect-grid-box, .px-renew-box, .cs-modal-footer, .modal-header,
.fee-display-card, .renew-price-summary-box, .pass-rules-box,
.server-ip-box, .server-specs, .server-credential, .server-dates,
.specs-pill-summary span, .mock-chart-visual, .search-box {
  background: var(--surface-raised) !important;
  color: var(--text-body) !important;
  border-color: var(--line) !important;
}
.cs-mgmt-header, .cs-card-top-head, .cs-box-header, .cs-sum-head,
.bottom-sum-head, .cs-sum-total-group, .cs-modal-head, .panel-header {
  border-color: var(--line) !important;
}
.detail-line, .cs-sum-details-list, .plan-sub-specs, .cs-header-hint,
.balance-label, .catalog-heading p, .auth-subtitle, .info-card-content p,
.cs-price-unit, .cred-label, .spec-label-title, .spec-os-line,
.renew-hint-text, .date-sub, .lbl, .m-field label, .form-group label,
.faq-answer, .footer, .stat-title, .stat-top, .meter-info {
  color: var(--text-muted) !important;
}
.cs-price-number, .px-price-val, .plan-price, .big-total-price,
.big-total-display, .balance-amount, .stat-value, .cycle-val,
.detail-line strong, .fee-line strong {
  color: var(--gold) !important;
  font-variant-numeric: tabular-nums;
}
.cs-price-number, .big-total-price, .big-total-display { letter-spacing: -.6px; }
.cs-check-icon, .input-icon, .select-icon, .toggle-password { color: #a9bef1 !important; }
.cs-check-icon { opacity: .36; }
.cs-cycle-item.active .cs-check-icon { opacity: 1; color: #8fe5ff !important; }
.cs-card-head-icon, .cs-sum-head > i, .info-card-icon, .action-btn .btn-icon,
.cs-step-badge { background: #293d68 !important; color: #b9d5ff !important; }

/* Inputs and credentials remain readable against the sky. */
input, select, textarea, .input-wrapper, .select-wrapper, .cred-input-wrap,
.cs-stepper-box, .stepper-mini, .cs-input-disabled {
  background-color: var(--surface-input) !important;
  color: var(--text-title) !important;
  border-color: #53688f !important;
  caret-color: var(--accent);
}
input, select, textarea { font-size: 14px; }
input::placeholder, textarea::placeholder { color: #9bafcf !important; opacity: 1; }
input:-webkit-autofill, input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-title) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--surface-input) inset !important;
}
button, input, select, textarea { font-family: inherit; }
button { cursor: pointer; }
button:focus-visible, a:focus-visible, input:focus, select:focus, textarea:focus {
  outline: 3px solid #91d7ff !important;
  outline-offset: 3px;
}
input[type="checkbox"], input[type="radio"] { accent-color: #75dcce; }
.pill-btn, .pill-qty-opt, .btn-proto-choice, .btn-os-choice, .btn-os-category,
.cs-cycle-item, .cs-proxy-card-item, .btn-step-act,
.btn-modal-cancel, .btn-gen-pass, .btn-quick-amount, .btn-cs-back,
.btn-vps-action-trigger, .btn-copy-proxy-full, .btn-api-cmd, .btn-action-control {
  background: #293858 !important;
  color: var(--text-title) !important;
  border-color: #5675a2 !important;
  box-shadow: none !important;
}
.pill-btn.active, .pill-qty-opt.active, .btn-proto-choice.active,
.btn-os-choice.active, .btn-os-category.active, .btn-quick-amount.active,
.cs-cycle-item.active, .cs-proxy-card-item.active {
  background: #293d68 !important;
  color: #f1f5ff !important;
  border: 2px solid #91d7ff !important;
  box-shadow: 0 0 0 3px rgba(141, 226, 255, .15) !important;
}
.nav-login-btn, .btn-submit, .btn-recharge-top, .btn-create-order-action,
.btn-choose-plan-act, .btn-modal-action, .btn-buy-plan, .btn-primary,
.btn-register, .btn-login, .btn-pill-action, .btn-copy-proxy-full {
  background: linear-gradient(135deg, #79b8fa, #a7a4f9) !important;
  color: #112441 !important;
  border-color: #a9c9ff !important;
  box-shadow: 0 6px 16px rgba(114, 147, 255, .16) !important;
}
.btn-create-order-action { min-height: 54px !important; border-radius: 15px !important; }

.btn-service, .btn-zalo { background: #2a3b67 !important; color: #dfd7ff !important; }
.btn-copy-mini, .btn-eye-mini, .btn-edit-icon, .btn-quick-copy,
.btn-eye, .btn-copy, .edit-pen { color: #9cd9ff !important; }
.btn-choose-plan-act:hover, .btn-submit:hover, .btn-create-order-action:hover {
  filter: brightness(1.12);
}
.cs-cycle-item:hover, .cs-proxy-card-item:hover, .pill-btn:hover,
.pill-qty-opt:hover, .btn-os-choice:hover { border-color: #91d7ff !important; }
button:disabled, .btn-create-order-action:disabled {
  opacity: .5; cursor: not-allowed; transform: none !important;
}
.slider { background-color: #42577a !important; }
.slider::before { background-color: #eff5ff !important; }
.switch input:checked + .slider { background: #3a9d91 !important; }
.cs-discount-tag, .plan-badge { background: #ffadc3 !important; color: #441831 !important; }

/* Status messages retain their meaning on dark panels. */
.status-green, .status-running, .px-status-tag, .success, .badge-item.success {
  background: #153e3b !important; color: var(--positive) !important; border-color: #437e70 !important;
}
.status-creating, .cs-alert-yellow, .proxy-warning-card {
  background: #483b25 !important; color: #ffda95 !important; border-color: #ad8444 !important;
}
.status-gray, .status-cancelled, .status-cancelled, .status-ip {
  background: #283854 !important; color: #c6d3ee !important;
}
.cs-alert-red, .alert-box.error, .error {
  background: #49263f !important; color: #ffd0dd !important; border-color: #985c7c !important;
}
.icon-green, .pill-v-green i, .pill-v-green .lbl { color: var(--positive) !important; }
.icon-red { color: var(--negative) !important; }
.icon-orange, .pill-v-orange i, .pill-v-orange .lbl { color: #ffcc8c !important; }
.icon-purple, .pill-v-purple i, .pill-v-purple .lbl { color: #d0b8ff !important; }
.icon-blue, .pill-v-blue i, .pill-v-blue .lbl { color: #a9cfff !important; }
.icon-cyan { color: #97e2ec !important; }
.px-origin-pill, .px-proto-badge, .copy-badge, .badge-item, .filter-badges button {
  background: #293759 !important; color: #d2ccff !important; border-color: #586b97 !important;
}
.cs-action-menu-popup, .vps-dropdown-menu, .submenu-box, .cs-submenu-list {
  background: #192744 !important; color: var(--text-title) !important;
  border-color: #53618c !important; box-shadow: 0 16px 40px rgba(3, 9, 30, .5) !important;
}
.cs-menu-opt:hover, .cs-submenu-opt:hover, .submenu-item:hover, .menu-item:hover {
  background: #34476f !important;
}
.cs-menu-divider { background: #4b5b7c !important; }
.cs-modal-backdrop, .modal-overlay, .loading-overlay-backdrop {
  background: rgba(5, 10, 30, .76) !important;
}
.top-toast-bar, .copy-toast { background: #2c4d70 !important; color: #f3f7ff !important; }
.meter-bar { background: #334769 !important; }
.meter-fill { background: linear-gradient(90deg, #7fa9ff, #c09aff) !important; }
.chart-col { background: #89b9ff !important; }
.footer { background: transparent !important; border-top-color: var(--line) !important; }
.pill-nav, .cycle-selector, .faq-answer, .px-val-copy,
.pill-v-blue, .pill-v-green, .pill-v-orange, .pill-v-purple {
  background: var(--surface-raised) !important;
}
.cycle-select { background: var(--surface-input) !important; color: var(--text-title) !important; }
.btn-quick-copy { background: #2e4266 !important; color: #b8e7ff !important; }
.m-num { background: #79b8fa !important; color: #112441 !important; }

/* Layout refinements, preserving the existing pages and controls. */
.auth-container { max-width: 660px !important; margin-inline: auto; }
.quick-grid { gap: 14px !important; }
.action-btn { min-height: 76px !important; }
.cs-order-layout { gap: 22px !important; }
.cs-left-col, .cs-right-col { min-width: 0; }
.cs-cycles-flex-grid { gap: 12px; }
.cycle-name { font-size: 13px; }
.cycle-val { font-size: 16px; }
.pill-nav { flex-wrap: wrap; gap: 8px; }
.pill-nav-container { scrollbar-width: thin; }
.pill-btn { min-height: 40px; }
.cs-cycle-item, .cs-proxy-card-item { transition: border-color .18s ease, box-shadow .18s ease; }
.cs-feat-row, .fee-line, .cs-sum-details-list { font-size: 13px; }
.faq-question { color: var(--text-title) !important; background: transparent !important; }
#cosmos-canvas {
  display: block !important;
  position: fixed !important;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none !important;
  z-index: 0 !important;
  opacity: 1;
}
@media (max-width: 700px) {
  .app-container, .dashboard-page { border-inline: 0 !important; border-radius: 0 !important; }
  .header { padding: 13px 14px; gap: 10px; }
  .brand-name { font-size: 18px; }
  .header-right { gap: 6px; }
  .header-bal-badge { padding: 6px 9px; font-size: 11.5px; }
  .main-content { padding-inline: 14px !important; }
  .cs-exact-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .cs-box-card, .cs-summary-panel, .bottom-summary-box { padding: 18px !important; }
  .cs-cycles-flex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .cs-cycle-item { padding: 18px 10px; }
  .balance-card { gap: 10px; }
  .balance-amount { font-size: 20px !important; }
  .cs-header-hint { max-width: 140px; font-size: 11px; text-align: right; }
  .cs-box-title { font-size: 16px; }
  .hero-section { padding-top: 12px; }
  #cosmos-canvas { opacity: 1; }
}
@media (max-width: 370px) {
  .header { flex-wrap: wrap; }
  .header-right { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Dark equivalents for backgrounds embedded in the original templates. */
[style*="background-color: #f8fafc"] { background: #1c294b !important; }
[style*="background: #16a34a"] { background: #121d3c !important; }
[style*="background: #397d70"] { background: #121d3c !important; }
[style*="background: #7c3aed"] { background: #121d3c !important; }
[style*="background: #dcfce7"] { background: #121d3c !important; }
[style*="background: #eff6ff"] { background: #121d3c !important; }
[style*="background: #f0fdf4"] { background: #121d3c !important; }
[style*="background: #f1f5f9"] { background: #1c294b !important; }
[style*="background: #f8fafc"] { background: #1c294b !important; }
[style*="background: #faf5ff"] { background: #1c294b !important; }
[style*="background: #fdf4ff"] { background: #1c294b !important; }
[style*="background: #fdf8fd"] { background: #121d3c !important; }
[style*="background: #fef2f2"] { background: #49263f !important; }
[style*="background: #fef3c7"] { background: #121d3c !important; }
[style*="background: #fff"] { background: #121d3c !important; }
[style*="background: #fff7ed"] { background: #121d3c !important; }
[style*="background: #fffbeb"] { background: #121d3c !important; }
[style*="background: #ffffff"] { background: #121d3c !important; }
[style*="background:#e6f9ed"] { background: #153e3b !important; }
[style*="background:#eff6ff"] { background: #121d3c !important; }
[style*="background:#f1f5f9"] { background: #1c294b !important; }
[style*="background:#f8fafc"] { background: #1c294b !important; }
[style*="background:#faf5ff"] { background: #1c294b !important; }
[style*="background:#fdf4ff"] { background: #1c294b !important; }
[style*="background:#fee2e2"] { background: #49263f !important; }
[style*="background:#fff"] { background: #121d3c !important; }
[style*="background:linear-gradient"], [style*="background: linear-gradient"] { background: linear-gradient(135deg, #79b8fa, #a7a4f9) !important; }


/* Sky stays behind content. Visible on every page, including the auth screens. */
.app-container, .dashboard-page { position: relative; z-index: 1; min-height: 100vh; }
body::before { content: none !important; }
.brand-name { color: #e8edff !important; }
.auth-card, .cs-box-card, .cs-summary-panel { border: 1px solid #52628b !important; }
.header-bal-badge { color: #a6eed4 !important; }
.header { background: rgba(20, 30, 64, .97) !important; }
.action-btn { border: 1px solid !important; border-radius: 17px !important; }
.action-btn *, .btn-submit *, .btn-create-order-action *, .btn-choose-plan-act * { color: inherit !important; }
.action-btn .btn-icon { background: rgba(9, 24, 55, .1) !important; color: inherit !important; }
.btn-text strong, .btn-text span, .btn-text small { color: inherit !important; }
.btn-text small, .btn-text span { opacity: 1 !important; }

/* Distinct, high-contrast action colors: labels and icons remain in place. */
.btn-register {
  background: linear-gradient(135deg, #8aefd1, #5ed8b6) !important;
  color: #07382d !important; border-color: #b5ffe5 !important;
}
.btn-login, .nav-login-btn, .btn-submit {
  background: linear-gradient(135deg, #9ccaff, #7fb3f8) !important;
  color: #10294c !important; border-color: #c7e2ff !important;
}
form[action="dangky.php"] .btn-submit {
  background: linear-gradient(135deg, #8aefd1, #5ed8b6) !important;
  color: #07382d !important; border-color: #b5ffe5 !important;
}
.btn-service, .btn-modal-action {
  background: linear-gradient(135deg, #d0b5ff, #b69aec) !important;
  color: #2a174e !important; border-color: #e2cdff !important;
}
.btn-zalo {
  background: linear-gradient(135deg, #ffcf9a, #ffb681) !important;
  color: #542b13 !important; border-color: #ffe3bf !important;
}

.btn-recharge-top, button[onclick*="submitRenew"], button[onclick*="submitProxyRenew"] {
  background: linear-gradient(135deg, #7be9c9, #48d4b0) !important;
  color: #06392f !important; border-color: #a5ffe3 !important;
}
.btn-create-order-action, .btn-choose-plan-act, .btn-buy-plan, .btn-primary, .btn-pill-action {
  background: linear-gradient(135deg, #ffd19c, #ffae73) !important;
  color: #542b13 !important; border-color: #ffe3b7 !important;
  box-shadow: 0 5px 22px rgba(255, 174, 115, .18) !important;
  font-weight: 800 !important;
}
.btn-logout, button[onclick*="submitChangeIp"], button[onclick*="submitProxyChangeIp"] {
  background: #ffb5c8 !important; color: #5c1833 !important; border-color: #ffd3e1 !important;
}
.btn-gen-pass, button[onclick="generateRandomPass()"], button[onclick="randomProxyBoth()"] {
  background: #f0dc91 !important; color: #4d3913 !important; border-color: #fff1bc !important;
}
.btn-copy-proxy-full, .btn-api-cmd, .btn-quick-copy {
  background: #98e1ee !important; color: #113e4b !important; border-color: #c5f6ff !important;
}
.btn-modal-cancel, .btn-cs-back, .back-link {
  background: #384b72 !important; color: #eff4ff !important; border-color: #7b90b9 !important;
}
.btn-vps-action-trigger, .btn-action-control {
  background: #b5c9ff !important; color: #203968 !important; border-color: #d4e3ff !important;
}
.btn-copy-mini, .btn-eye-mini, .btn-edit-icon, .btn-eye, .btn-copy, .edit-pen {
  color: #b1e8ff !important;
}
.btn-copy-mini, .btn-eye-mini { background: #2c4266 !important; border-radius: 6px; }
.pill-nav { padding: 8px !important; border: 1px solid #455579 !important; border-radius: 17px; }
.pill-nav > .pill-btn:nth-child(6n+1) { --tab-bg: #9fc9ff; --tab-ink: #112c54; }
.pill-nav > .pill-btn:nth-child(6n+2) { --tab-bg: #c5b0ff; --tab-ink: #2d1b55; }
.pill-nav > .pill-btn:nth-child(6n+3) { --tab-bg: #8bdfed; --tab-ink: #103d4a; }
.pill-nav > .pill-btn:nth-child(6n+4) { --tab-bg: #f0b7da; --tab-ink: #4e1f40; }
.pill-nav > .pill-btn:nth-child(6n+5) { --tab-bg: #f3d793; --tab-ink: #4b3512; }
.pill-nav > .pill-btn:nth-child(6n+6) { --tab-bg: #83e4bc; --tab-ink: #113d2d; }
.pill-nav > .pill-btn {
  background: var(--tab-bg) !important; color: var(--tab-ink) !important;
  border: 2px solid transparent !important; font-weight: 700;
}
.pill-nav > .pill-btn.active {
  border-color: #f1f5ff !important; outline: 2px solid #829ed6;
  outline-offset: 1px; text-decoration: underline; text-underline-offset: 5px;
  box-shadow: 0 0 14px rgba(147, 190, 255, .2) !important;
}
.pill-qty-opt, .btn-os-choice, .btn-proto-choice, .btn-quick-amount {
  background: #293b60 !important; color: #e5edff !important;
}
.pill-qty-opt.active, .btn-os-choice.active, .btn-proto-choice.active, .btn-quick-amount.active {
  background: #94dcff !important; color: #12344f !important; border-color: #d5f3ff !important;
}
.btn-step-act { background: #b4ccff !important; color: #193557 !important; border-color: #d7e5ff !important; }
.cs-cycle-item.active .cycle-name { color: #f1f5ff !important; }
.cs-cycle-item.active .cycle-val { color: #9de8ff !important; }
.cs-cycle-item.active { outline: 1px solid #94dcff; outline-offset: 2px; }
button, .action-btn, .nav-login-btn, .btn-choose-plan-act {
  transition: filter .15s ease, box-shadow .15s ease, border-color .15s ease;
}
button:hover, .action-btn:hover, .nav-login-btn:hover, .btn-choose-plan-act:hover { filter: brightness(1.08); }
button:active, .action-btn:active { filter: brightness(.96); }
.dropdown-nav a[href="logout.php"], .cs-menu-opt[onclick*="cancel"], .cs-menu-opt[onclick*="delete"] { color: #ffb5c8 !important; }
.hamburger-btn { background: #283b60 !important; border-radius: 10px; }
.hamburger-btn span { background: #c5e6ff !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; }
}

.space-motion-toggle {
  position: fixed; left: 12px; bottom: 12px; z-index: 40;
  background: #263959 !important; color: #c7e8ff !important;
  border: 1px solid #7b9dc4 !important; border-radius: 20px;
  padding: 7px 12px; font-family: inherit; font-size: 11px; font-weight: 600; line-height: 1.4;
  box-shadow: 0 2px 12px rgba(5, 12, 32, .25);
}
.space-motion-toggle[hidden] { display: none !important; }
.stepper-mini button { background: #b4ccff !important; color: #193557 !important; border-color: #d7e5ff !important; }
@media (max-width: 700px) { .footer { padding-bottom: 58px !important; } }