:root {
  --theme-color: #8e7dff !important;
  --theme-color-rgb: 142, 125, 255 !important;
  --card-background-rgb: 17, 24, 39 !important;
  --card-background: rgba(17, 24, 39, .78) !important;
  --card-bg-color: rgba(17, 24, 39, .78) !important;
  --text-color: rgba(244, 247, 255, .96) !important;
  --secondary-text-color: rgba(196, 205, 227, .72) !important;
  --border-color: rgba(181, 194, 234, .14) !important;
}

html, body {
  min-height: 100%;
  background: #090d16 !important;
  color: var(--text-color) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(900px 520px at 8% -8%, rgba(76, 113, 255, .24), transparent 72%),
    radial-gradient(780px 580px at 96% 0%, rgba(150, 78, 255, .18), transparent 66%),
    radial-gradient(700px 520px at 50% 110%, rgba(24, 191, 175, .15), transparent 72%),
    #090d16;
}

.main-board .background-decoration { opacity: .72; }
.main-board .floating-ball { filter: blur(90px); opacity: .38; }

.static-layout .site-logo {
  top: 22px !important;
  left: 28px !important;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(194, 204, 255, .16);
  border-radius: 16px;
  background: rgba(12, 18, 31, .64);
  box-shadow: 0 14px 38px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  letter-spacing: .035em;
}

.static-layout .site-logo-img { border-radius: 9px; box-shadow: 0 0 20px rgba(107, 117, 255, .34); }

.slide-tabs-container { top: 18px !important; }
.slide-tabs-container .slide-tabs-wrapper {
  background: rgba(12, 18, 31, .72) !important;
  border-color: rgba(194, 204, 255, .14) !important;
  box-shadow: 0 16px 42px rgba(0, 0, 0, .28), inset 0 1px rgba(255, 255, 255, .05) !important;
  backdrop-filter: blur(20px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(135%) !important;
}

.slide-tabs-container .nav-item { color: rgba(219, 225, 245, .7) !important; }
.slide-tabs-container .nav-item:hover, .slide-tabs-container .nav-item.active { color: #fff !important; }
.slide-tabs-container .slider-indicator {
  background: linear-gradient(135deg, rgba(111, 121, 255, .32), rgba(166, 94, 255, .25)) !important;
  border-color: rgba(183, 190, 255, .28) !important;
  box-shadow: 0 8px 24px rgba(95, 93, 255, .22) !important;
}

.top-toolbar { top: 22px !important; right: 28px !important; }
.top-toolbar button, .top-toolbar .theme-toggle, .top-toolbar .language-selector {
  border-color: rgba(194, 204, 255, .14) !important;
  background: rgba(12, 18, 31, .68) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .05), 0 10px 28px rgba(0, 0, 0, .2);
}

.content-area { max-width: 1500px; margin: 0 auto; }

.dashboard-card, .stats-card, .plan-card, .order-card, .ticket-card, .profile-card,
.wallet-card, .invite-card, .traffic-card, .server-card, .document-card, .content-card,
.card-container, .shop-card, .notice-card, .info-card {
  border: 1px solid rgba(194, 204, 255, .13) !important;
  background: linear-gradient(145deg, rgba(27, 36, 56, .82), rgba(13, 19, 32, .75)) !important;
  box-shadow: 0 20px 55px rgba(0, 0, 0, .24), inset 0 1px rgba(255, 255, 255, .045) !important;
  backdrop-filter: blur(16px) saturate(125%);
  -webkit-backdrop-filter: blur(16px) saturate(125%);
}

.dashboard-card, .stats-card, .plan-card, .order-card, .ticket-card, .profile-card,
.wallet-card, .invite-card, .traffic-card, .server-card, .document-card, .content-card,
.card-container, .shop-card { border-radius: 20px !important; }

.dashboard-card:hover, .stats-card:hover, .plan-card:hover, .order-card:hover,
.ticket-card:hover, .profile-card:hover, .wallet-card:hover, .invite-card:hover,
.traffic-card:hover, .server-card:hover, .shop-card:hover {
  border-color: rgba(174, 182, 255, .27) !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .32), 0 0 0 1px rgba(128, 112, 255, .05) !important;
}

.card-header, .panel-header, .section-header, .table-header {
  border-bottom-color: rgba(194, 204, 255, .1) !important;
  background: linear-gradient(90deg, rgba(124, 112, 255, .1), transparent 58%) !important;
}

.card-title, .page-title, .section-title, h1, h2, h3 { letter-spacing: -.018em; }
.card-title, .page-title, .section-title { color: #f4f6ff !important; }
.info-label, .secondary-text, .card-subtitle { color: rgba(202, 210, 233, .65) !important; }
.info-value, .stats-value { color: #fff !important; font-weight: 650 !important; }

.btn-outline, .primary-button, .submit-button, .action-button, .popup-action-btn,
.confirm-btn, .renew-plan-btn, .eztheme-btn {
  border-radius: 12px !important;
  border-color: rgba(184, 191, 255, .24) !important;
  box-shadow: 0 8px 22px rgba(69, 67, 187, .16), inset 0 1px rgba(255, 255, 255, .1) !important;
}

.primary-button, .submit-button, .popup-action-btn, .confirm-btn {
  background: linear-gradient(135deg, #6f77f7, #9b62f0) !important;
  color: #fff !important;
  border-color: rgba(220, 223, 255, .24) !important;
}

.btn-outline, .action-button, .eztheme-btn {
  background: rgba(118, 126, 255, .1) !important;
  color: #dedfff !important;
}

.btn-outline:hover, .primary-button:hover, .submit-button:hover, .action-button:hover,
.popup-action-btn:hover, .confirm-btn:hover, .eztheme-btn:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.08);
  box-shadow: 0 13px 30px rgba(91, 81, 230, .28), inset 0 1px rgba(255, 255, 255, .13) !important;
}

input, textarea, select, .input-field, .form-input {
  color: #f6f8ff !important;
  border-color: rgba(194, 204, 255, .16) !important;
  background: rgba(7, 12, 22, .46) !important;
  border-radius: 12px !important;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, .24) !important;
}

input:focus, textarea:focus, select:focus, .input-field:focus, .form-input:focus {
  border-color: rgba(158, 154, 255, .7) !important;
  box-shadow: 0 0 0 4px rgba(133, 124, 255, .13), inset 0 1px 3px rgba(0, 0, 0, .18) !important;
}

.modal-overlay, .notice-modal-overlay, .dialog-overlay {
  background: rgba(2, 5, 12, .72) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-container, .modal-card, .notice-modal, .dialog-content, .coupon-modal {
  border: 1px solid rgba(197, 205, 255, .17) !important;
  background: linear-gradient(145deg, rgba(29, 38, 60, .97), rgba(11, 17, 30, .97)) !important;
  box-shadow: 0 32px 90px rgba(0, 0, 0, .48), inset 0 1px rgba(255, 255, 255, .06) !important;
}

table tr { border-bottom-color: rgba(194, 204, 255, .09) !important; }
table th { color: rgba(224, 229, 249, .7) !important; background: rgba(111, 120, 255, .07) !important; }
table tr:hover td { background: rgba(121, 115, 255, .06) !important; }

@media (max-width: 768px) {
  .static-layout .site-logo { top: 14px !important; left: 16px !important; padding: 8px 10px; }
  .top-toolbar { top: 14px !important; right: 16px !important; }
  .content-area { padding-left: 14px !important; padding-right: 14px !important; }
  .dashboard-card, .stats-card, .plan-card, .order-card, .ticket-card, .profile-card,
  .wallet-card, .invite-card, .traffic-card, .server-card, .shop-card { border-radius: 16px !important; }
}


/* K2 CLOUD · Premium authentication experience */
.auth-container {
  --k2-cyan: #66e8ff;
  --k2-violet: #9587ff;
  --k2-ink: #070b16;
  position: relative !important;
  isolation: isolate;
  display: grid !important;
  place-items: center;
  min-height: 100svh !important;
  padding: 112px 28px 64px !important;
  overflow: hidden !important;
  background:
    radial-gradient(62% 68% at 8% 4%, rgba(78, 127, 255, .28), transparent 70%),
    radial-gradient(54% 62% at 96% 18%, rgba(137, 84, 255, .22), transparent 72%),
    radial-gradient(64% 58% at 48% 112%, rgba(31, 214, 201, .16), transparent 74%),
    linear-gradient(145deg, #070b16 0%, #0b1122 48%, #080c18 100%) !important;
}

.auth-container::before,
.auth-container::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.auth-container::before {
  z-index: -2;
  opacity: .46;
  background-image:
    linear-gradient(rgba(149, 177, 255, .065) 1px, transparent 1px),
    linear-gradient(90deg, rgba(149, 177, 255, .065) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(ellipse 78% 66% at 50% 45%, #000 12%, transparent 82%);
  -webkit-mask-image: radial-gradient(ellipse 78% 66% at 50% 45%, #000 12%, transparent 82%);
}

.auth-container::after {
  z-index: -1;
  inset: auto;
  width: min(72vw, 960px);
  height: min(72vw, 960px);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(131, 185, 255, .12);
  border-radius: 50%;
  box-shadow:
    0 0 0 88px rgba(122, 142, 255, .018),
    0 0 0 176px rgba(124, 105, 255, .012),
    0 0 120px rgba(97, 117, 255, .22);
}

.auth-container .background-decoration {
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  overflow: hidden;
  opacity: 1 !important;
}

.auth-container .floating-ball {
  filter: blur(28px) saturate(130%) !important;
  opacity: .48 !important;
  mix-blend-mode: screen;
  will-change: transform;
}

.auth-container .ball-1 {
  width: min(34vw, 520px) !important;
  height: min(34vw, 520px) !important;
  top: -15% !important;
  left: -8% !important;
  background: radial-gradient(circle at 50% 50%, rgba(78, 145, 255, .78), rgba(78, 145, 255, 0) 68%) !important;
  animation: k2-auth-float-a 18s ease-in-out infinite alternate !important;
}

.auth-container .ball-2 {
  width: min(32vw, 480px) !important;
  height: min(32vw, 480px) !important;
  top: 14% !important;
  right: -10% !important;
  background: radial-gradient(circle at 50% 50%, rgba(165, 99, 255, .6), rgba(165, 99, 255, 0) 68%) !important;
  animation: k2-auth-float-b 21s ease-in-out infinite alternate !important;
}

.auth-container .ball-3 {
  width: min(36vw, 560px) !important;
  height: min(36vw, 560px) !important;
  bottom: -22% !important;
  left: 32% !important;
  background: radial-gradient(circle at 50% 50%, rgba(47, 219, 205, .4), rgba(47, 219, 205, 0) 68%) !important;
  animation: k2-auth-float-c 24s ease-in-out infinite alternate !important;
}

.auth-container .top-toolbar {
  position: fixed !important;
  z-index: 8 !important;
  top: 24px !important;
  right: 28px !important;
  display: flex;
  align-items: center;
  gap: 10px;
}

.auth-container .theme-toggle,
.auth-container .language-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(189, 210, 255, .18) !important;
  border-radius: 14px !important;
  color: #eaf2ff !important;
  background: rgba(12, 20, 38, .54) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .11), 0 12px 28px rgba(0, 0, 0, .22) !important;
  backdrop-filter: blur(18px) saturate(145%);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  transition: transform .22s ease, border-color .22s ease, background .22s ease, box-shadow .22s ease !important;
}

.auth-container .theme-toggle:hover,
.auth-container .language-btn:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(143, 222, 255, .5) !important;
  background: rgba(25, 36, 67, .7) !important;
  box-shadow: 0 16px 32px rgba(21, 81, 167, .24), inset 0 1px rgba(255, 255, 255, .14) !important;
}

.auth-container .auth-card {
  position: relative;
  z-index: 1;
  width: min(100%, 472px) !important;
  padding: 40px 42px 36px !important;
  overflow: hidden;
  border: 1px solid rgba(193, 214, 255, .2) !important;
  border-radius: 28px !important;
  color: #f5f8ff !important;
  background:
    linear-gradient(142deg, rgba(39, 57, 94, .68), rgba(14, 23, 44, .72) 48%, rgba(10, 16, 31, .82)) !important;
  box-shadow:
    0 32px 88px rgba(0, 0, 0, .44),
    0 0 0 1px rgba(132, 169, 255, .06),
    inset 0 1px rgba(255, 255, 255, .13) !important;
  backdrop-filter: blur(28px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(28px) saturate(145%) !important;
  animation: k2-auth-card-in .58s cubic-bezier(.2, .8, .2, 1) both;
}

.auth-container .auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 12%;
  left: 12%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(161, 228, 255, .78), rgba(182, 145, 255, .58), transparent);
  box-shadow: 0 0 18px rgba(109, 206, 255, .45);
}

.auth-container .auth-card > * { position: relative; z-index: 1; }

.auth-container .auth-header {
  margin-bottom: 28px !important;
  text-align: left !important;
}

.auth-container .auth-logo {
  width: 58px !important;
  height: 58px !important;
  display: grid !important;
  place-items: center;
  margin: 0 0 21px !important;
  border: 1px solid rgba(180, 220, 255, .22);
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(115, 179, 255, .17), rgba(131, 98, 255, .12));
  box-shadow: 0 13px 30px rgba(43, 99, 212, .24), inset 0 1px rgba(255, 255, 255, .14);
}

.auth-container .auth-logo img {
  width: 38px !important;
  height: 38px !important;
  object-fit: contain;
  border-radius: 12px !important;
  filter: drop-shadow(0 6px 12px rgba(65, 167, 255, .32));
}

.auth-container .auth-title {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(27px, 3vw, 32px) !important;
  font-weight: 700 !important;
  letter-spacing: -.04em !important;
  line-height: 1.14 !important;
}

.auth-container .auth-subtitle {
  max-width: 330px;
  margin: 10px 0 0 !important;
  color: rgba(215, 228, 255, .66) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

.auth-container .auth-form { margin-top: 4px; }
.auth-container .form-group { margin-bottom: 19px !important; }

.auth-container .form-group label {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 9px !important;
  color: rgba(220, 231, 255, .82) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  letter-spacing: .025em;
}

.auth-container .required { color: #8fe5ff !important; }
.auth-container .input-with-icon { position: relative; }

.auth-container .input-with-icon .input-icon {
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 16px;
  width: 19px;
  height: 19px;
  color: rgba(151, 210, 255, .78) !important;
  transform: translateY(-50%);
  transition: color .2s ease, filter .2s ease;
}

.auth-container .form-control {
  width: 100% !important;
  height: 52px !important;
  padding: 0 48px !important;
  border: 1px solid rgba(185, 207, 255, .15) !important;
  border-radius: 15px !important;
  outline: 0 !important;
  color: #f7faff !important;
  font-size: 14px !important;
  background: rgba(5, 12, 28, .42) !important;
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .22) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}

.auth-container .form-control::placeholder { color: rgba(181, 199, 232, .43) !important; }
.auth-container .form-control:hover { border-color: rgba(157, 202, 255, .3) !important; }
.auth-container .form-control:focus {
  border-color: rgba(124, 223, 255, .66) !important;
  background: rgba(10, 22, 46, .6) !important;
  box-shadow: 0 0 0 4px rgba(100, 204, 255, .11), inset 0 1px 2px rgba(0, 0, 0, .18) !important;
}

.auth-container .input-with-icon:focus-within .input-icon {
  color: #8ce8ff !important;
  filter: drop-shadow(0 0 8px rgba(96, 225, 255, .45));
}

.auth-container .password-toggle {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 14px;
  display: grid;
  width: 26px;
  height: 26px;
  place-items: center;
  border-radius: 9px;
  color: rgba(195, 214, 250, .68) !important;
  cursor: pointer;
  transform: translateY(-50%);
  transition: color .2s ease, background .2s ease;
}

.auth-container .password-toggle:hover { color: #a6edff !important; background: rgba(115, 202, 255, .12); }
.auth-container .error-message { margin-top: 7px !important; color: #ff9db2 !important; font-size: 12px !important; }

.auth-container .form-options {
  margin: 2px 0 22px !important;
  font-size: 12px !important;
}

.auth-container .checkbox-container { gap: 9px; color: rgba(208, 222, 249, .67) !important; }
.auth-container .checkbox-container input { position: absolute; opacity: 0; }
.auth-container .checkbox-container .checkmark {
  width: 17px;
  height: 17px;
  border: 1px solid rgba(186, 210, 255, .28);
  border-radius: 6px;
  background: rgba(4, 11, 27, .52);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.auth-container .checkbox-container input:checked + .checkmark {
  border-color: #73dfff;
  background: linear-gradient(135deg, #55c9ff, #9079ff);
  box-shadow: 0 0 0 3px rgba(97, 207, 255, .11);
}
.auth-container .forgot-password { color: #9edfff !important; font-weight: 600; transition: color .2s ease, text-shadow .2s ease; }
.auth-container .forgot-password:hover { color: #d2f4ff !important; text-shadow: 0 0 12px rgba(122, 216, 255, .55); }

.auth-container .btn.btn-block { min-height: 52px !important; border-radius: 15px !important; font-size: 14px !important; font-weight: 650 !important; letter-spacing: .01em; }
.auth-container .btn-primary {
  border: 1px solid rgba(207, 238, 255, .28) !important;
  color: #fff !important;
  background: linear-gradient(112deg, #4bb8f8 0%, #7086f5 52%, #9b6cf1 100%) !important;
  box-shadow: 0 14px 30px rgba(74, 126, 244, .3), inset 0 1px rgba(255, 255, 255, .28) !important;
}
.auth-container .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  filter: brightness(1.1) saturate(1.05);
  box-shadow: 0 19px 38px rgba(75, 137, 255, .42), inset 0 1px rgba(255, 255, 255, .32) !important;
}
.auth-container .btn-primary:disabled { opacity: .7 !important; cursor: wait; }

.auth-container .auth-footer { margin-top: 27px !important; }
.auth-container .auth-divider { gap: 13px !important; color: rgba(193, 212, 245, .42) !important; }
.auth-container .auth-divider::before,
.auth-container .auth-divider::after { background: rgba(178, 205, 255, .14) !important; }
.auth-container .auth-divider-text { color: rgba(196, 213, 244, .58) !important; font-size: 12px !important; }
.auth-container .btn-secondary {
  margin-top: 13px !important;
  border: 1px solid rgba(185, 212, 255, .18) !important;
  color: #dcecff !important;
  background: rgba(102, 143, 221, .08) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .06) !important;
}
.auth-container .btn-secondary:hover { transform: translateY(-1px) !important; border-color: rgba(143, 222, 255, .42) !important; background: rgba(106, 161, 246, .16) !important; }

.auth-container .language-dropdown,
.auth-container .language-menu {
  border: 1px solid rgba(184, 210, 255, .18) !important;
  border-radius: 16px !important;
  color: #e9f1ff !important;
  background: rgba(12, 20, 39, .88) !important;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .08) !important;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

@keyframes k2-auth-card-in {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes k2-auth-float-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(9vw, 5vh, 0) scale(1.12); } }
@keyframes k2-auth-float-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-8vw, 8vh, 0) scale(1.08); } }
@keyframes k2-auth-float-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vw, -7vh, 0) scale(1.1); } }

@media (max-width: 680px) {
  .auth-container { padding: 84px 16px 30px !important; }
  .auth-container::after { width: 118vw; height: 118vw; }
  .auth-container .top-toolbar { top: 15px !important; right: 16px !important; gap: 8px; }
  .auth-container .theme-toggle, .auth-container .language-btn { width: 38px !important; height: 38px !important; border-radius: 13px !important; }
  .auth-container .auth-card { width: 100% !important; padding: 30px 23px 26px !important; border-radius: 23px !important; }
  .auth-container .auth-logo { width: 52px !important; height: 52px !important; margin-bottom: 17px !important; border-radius: 16px !important; }
  .auth-container .auth-logo img { width: 34px !important; height: 34px !important; }
  .auth-container .auth-title { font-size: 27px !important; }
  .auth-container .auth-subtitle { margin-top: 8px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .auth-container .floating-ball, .auth-container .auth-card { animation: none !important; }
  .auth-container .btn, .auth-container .theme-toggle, .auth-container .language-btn { transition-duration: .01ms !important; }
}


/* K2 CLOUD auth landing layout — high-specificity runtime override */
@media (min-width: 920px) {
  #app .auth-container {
    position: relative !important;
    display: grid !important;
    grid-template-columns: minmax(330px, 1fr) minmax(408px, 472px) !important;
    grid-template-rows: minmax(620px, 1fr) !important;
    align-items: center !important;
    column-gap: clamp(46px, 9vw, 152px) !important;
    width: 100% !important;
    min-height: 100svh !important;
    padding: 104px clamp(44px, 8vw, 156px) 64px !important;
    background:
      radial-gradient(58% 72% at 2% 8%, rgba(56, 137, 255, .35), transparent 72%),
      radial-gradient(52% 70% at 100% 12%, rgba(155, 93, 255, .25), transparent 72%),
      radial-gradient(58% 54% at 55% 100%, rgba(31, 218, 199, .15), transparent 74%),
      linear-gradient(135deg, #050914 0%, #0a1327 46%, #080b18 100%) !important;
  }

  #app .auth-container::before {
    content: "K2 CLOUD\A\A全域智能连接\A为每一次抵达，找到更优路径" !important;
    position: relative !important;
    inset: auto !important;
    z-index: 1 !important;
    display: block !important;
    grid-column: 1 !important;
    grid-row: 1 !important;
    align-self: center !important;
    max-width: 660px !important;
    padding: 72px 0 88px !important;
    border: 0 !important;
    border-radius: 0 !important;
    color: #f6faff !important;
    font-size: clamp(39px, 4.55vw, 70px) !important;
    font-weight: 740 !important;
    line-height: 1.08 !important;
    letter-spacing: -.065em !important;
    white-space: pre-line !important;
    text-shadow: 0 12px 45px rgba(39, 120, 255, .25) !important;
    background: none !important;
    mask-image: none !important;
    -webkit-mask-image: none !important;
  }

  #app .auth-container::after {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    inset: auto !important;
    width: min(64vw, 940px) !important;
    height: min(64vw, 940px) !important;
    top: 50% !important;
    left: 25% !important;
    display: block !important;
    border: 1px solid rgba(139, 191, 255, .13) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    transform: translate(-50%, -50%) !important;
    box-shadow:
      0 0 0 82px rgba(124, 144, 255, .018),
      0 0 0 166px rgba(102, 190, 255, .012),
      0 0 110px rgba(49, 119, 255, .24) !important;
  }

  #app .auth-container .auth-card {
    z-index: 3 !important;
    grid-column: 2 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: center !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 42px 42px 37px !important;
    border: 1px solid rgba(197, 221, 255, .22) !important;
    border-radius: 30px !important;
    background: linear-gradient(142deg, rgba(39, 59, 97, .73), rgba(13, 22, 43, .78) 50%, rgba(9, 15, 29, .86)) !important;
    box-shadow: 0 34px 90px rgba(0, 0, 0, .48), 0 0 0 1px rgba(139, 177, 255, .07), inset 0 1px rgba(255,255,255,.14) !important;
    backdrop-filter: blur(30px) saturate(150%) !important;
    -webkit-backdrop-filter: blur(30px) saturate(150%) !important;
  }

  #app .auth-container .auth-header {
    position: relative !important;
    margin-bottom: 30px !important;
    padding-bottom: 16px !important;
    border-bottom: 1px solid rgba(183, 210, 255, .11) !important;
  }

  #app .auth-container .auth-header::after {
    content: "K2 CLOUD  ·  SECURE ACCESS" !important;
    position: absolute !important;
    right: 0 !important;
    bottom: 16px !important;
    color: rgba(142, 217, 255, .68) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .16em !important;
  }

  #app .auth-container .auth-logo { margin-bottom: 18px !important; }
  #app .auth-container .auth-title { font-size: 30px !important; letter-spacing: -.045em !important; }
  #app .auth-container .auth-subtitle { max-width: 285px !important; }
  #app .auth-container .top-toolbar { z-index: 7 !important; }
}

@media (max-width: 919px) {
  #app .auth-container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    place-items: center !important;
    min-height: 100svh !important;
    padding: 86px 16px 32px !important;
  }
  #app .auth-container::before {
    content: "" !important;
    position: absolute !important;
    z-index: -2 !important;
    inset: 0 !important;
    display: block !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background-image: linear-gradient(rgba(149,177,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(149,177,255,.06) 1px, transparent 1px) !important;
    background-size: 44px 44px !important;
    mask-image: radial-gradient(ellipse 88% 68% at 50% 45%, #000 8%, transparent 82%) !important;
    -webkit-mask-image: radial-gradient(ellipse 88% 68% at 50% 45%, #000 8%, transparent 82%) !important;
  }
  #app .auth-container::after { left: 50% !important; }
  #app .auth-container .auth-card { grid-column: 1 !important; justify-self: center !important; }
}


/* K2 CLOUD · original EZ-THEME-R split authentication visual layer */
#app .login-view-container {
  position: relative !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  color: #f4f8ff !important;
  background: #070b16 !important;
}

#app .login-view-container .auth-split-container {
  display: grid !important;
  grid-template-columns: minmax(0, 1.22fr) minmax(424px, .78fr) !important;
  width: 100% !important;
  min-height: 100svh !important;
  background: #070b16 !important;
}

#app .login-view-container .auth-split-left {
  position: relative !important;
  min-height: 100svh !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background:
    radial-gradient(62% 74% at 8% 4%, rgba(54, 130, 255, .4), transparent 71%),
    radial-gradient(60% 70% at 88% 20%, rgba(149, 81, 255, .28), transparent 72%),
    radial-gradient(58% 56% at 52% 106%, rgba(24, 214, 198, .2), transparent 74%),
    linear-gradient(135deg, #060a15 0%, #0a142a 48%, #080c18 100%) !important;
}

#app .login-view-container .auth-split-left::before,
#app .login-view-container .auth-split-left::after {
  content: "" !important;
  position: absolute !important;
  pointer-events: none !important;
}

#app .login-view-container .auth-split-left::before {
  z-index: -1 !important;
  inset: 0 !important;
  opacity: .58 !important;
  background-image:
    linear-gradient(rgba(153, 185, 255, .075) 1px, transparent 1px),
    linear-gradient(90deg, rgba(153, 185, 255, .075) 1px, transparent 1px) !important;
  background-size: 54px 54px !important;
  mask-image: radial-gradient(ellipse 86% 72% at 43% 49%, #000 8%, transparent 82%) !important;
  -webkit-mask-image: radial-gradient(ellipse 86% 72% at 43% 49%, #000 8%, transparent 82%) !important;
}

#app .login-view-container .auth-split-left::after {
  z-index: -1 !important;
  top: 50% !important;
  left: 50% !important;
  width: min(62vw, 900px) !important;
  height: min(62vw, 900px) !important;
  border: 1px solid rgba(150, 203, 255, .14) !important;
  border-radius: 50% !important;
  transform: translate(-50%, -50%) !important;
  box-shadow:
    0 0 0 88px rgba(125, 154, 255, .02),
    0 0 0 176px rgba(130, 113, 255, .012),
    0 0 124px rgba(67, 126, 255, .27) !important;
  animation: k2-split-orbit 18s ease-in-out infinite alternate !important;
}

#app .login-view-container .auth-split-left .left-content-overlay {
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 !important;
  background: linear-gradient(90deg, rgba(4, 8, 20, .15), transparent 58%, rgba(6, 10, 22, .25)) !important;
}

#app .login-view-container .auth-split-left .site-name {
  position: absolute !important;
  z-index: 2 !important;
  top: 34px !important;
  left: clamp(28px, 5vw, 78px) !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 11px 16px 11px 13px !important;
  border: 1px solid rgba(188, 218, 255, .18) !important;
  border-radius: 16px !important;
  color: #f7fbff !important;
  font-size: 14px !important;
  font-weight: 720 !important;
  letter-spacing: .08em !important;
  background: rgba(10, 20, 40, .46) !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.22), inset 0 1px rgba(255,255,255,.1) !important;
  backdrop-filter: blur(18px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
}

#app .login-view-container .auth-split-left .site-name::before {
  content: "" !important;
  width: 23px !important;
  height: 23px !important;
  border: 1px solid #83e9ff !important;
  border-radius: 50% !important;
  box-shadow: 0 0 18px rgba(104, 220, 255, .58), inset 0 0 12px rgba(119, 156, 255, .28) !important;
}

#app .login-view-container .auth-split-left .greeting-text {
  position: absolute !important;
  z-index: 2 !important;
  right: clamp(28px, 8vw, 124px) !important;
  bottom: clamp(56px, 11vh, 130px) !important;
  left: clamp(28px, 8vw, 124px) !important;
  max-width: 680px !important;
  margin: 0 !important;
  color: #f6faff !important;
  font-size: clamp(42px, 4.7vw, 72px) !important;
  font-weight: 760 !important;
  line-height: 1.06 !important;
  letter-spacing: -.065em !important;
  text-shadow: 0 16px 48px rgba(43, 122, 255, .25) !important;
}

#app .login-view-container .auth-split-left .greeting-text::after {
  content: "全域智能连接 · 每一次抵达，都走更优路径" !important;
  display: block !important;
  max-width: 390px !important;
  margin-top: 23px !important;
  color: rgba(211, 228, 255, .72) !important;
  font-size: 14px !important;
  font-weight: 480 !important;
  line-height: 1.7 !important;
  letter-spacing: .02em !important;
  text-shadow: none !important;
}

#app .login-view-container .auth-split-right {
  position: relative !important;
  display: flex !important;
  min-height: 100svh !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 110px clamp(30px, 5vw, 80px) 62px !important;
  overflow: hidden !important;
  border-left: 1px solid rgba(181, 207, 255, .1) !important;
  background:
    radial-gradient(520px 420px at 100% 2%, rgba(136, 81, 255, .14), transparent 73%),
    radial-gradient(500px 430px at 10% 108%, rgba(43, 194, 210, .1), transparent 72%),
    linear-gradient(150deg, rgba(11, 18, 35, .97), rgba(6, 10, 20, .99)) !important;
}

#app .login-view-container .auth-split-right::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 1px !important;
  background: linear-gradient(transparent, rgba(121, 218, 255, .45), transparent) !important;
  box-shadow: 0 0 18px rgba(104, 201, 255, .38) !important;
}

#app .login-view-container .auth-split-right .top-toolbar {
  position: absolute !important;
  z-index: 5 !important;
  top: 28px !important;
  right: 34px !important;
  display: flex !important;
  gap: 10px !important;
}

#app .login-view-container .auth-split-right .theme-toggle,
#app .login-view-container .auth-split-right .language-btn {
  width: 42px !important;
  height: 42px !important;
  border: 1px solid rgba(192, 215, 255, .17) !important;
  border-radius: 14px !important;
  color: #eaf3ff !important;
  background: rgba(28, 42, 73, .38) !important;
  box-shadow: inset 0 1px rgba(255,255,255,.1), 0 10px 28px rgba(0,0,0,.18) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
}

#app .login-view-container .auth-split-right .auth-form-container {
  position: relative !important;
  z-index: 2 !important;
  width: min(100%, 448px) !important;
  margin: auto !important;
  padding: 39px 40px 35px !important;
  border: 1px solid rgba(193, 217, 255, .19) !important;
  border-radius: 27px !important;
  color: #f5f9ff !important;
  background: linear-gradient(142deg, rgba(37, 56, 93, .62), rgba(13, 22, 43, .76) 54%, rgba(8, 14, 28, .86)) !important;
  box-shadow: 0 30px 78px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.13) !important;
  backdrop-filter: blur(26px) saturate(145%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(145%) !important;
  animation: k2-split-card .58s cubic-bezier(.2,.8,.2,1) both !important;
}

#app .login-view-container .auth-split-right .auth-header {
  position: relative !important;
  margin-bottom: 27px !important;
  padding-bottom: 17px !important;
  border-bottom: 1px solid rgba(183, 209, 255, .1) !important;
  text-align: left !important;
}

#app .login-view-container .auth-split-right .auth-header::after {
  content: "K2 CLOUD · SECURE ACCESS" !important;
  position: absolute !important;
  right: 0 !important;
  bottom: 17px !important;
  color: rgba(139, 220, 255, .65) !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .16em !important;
}

#app .login-view-container .auth-split-right .auth-logo {
  width: 57px !important;
  height: 57px !important;
  display: grid !important;
  place-items: center !important;
  margin: 0 0 19px !important;
  border: 1px solid rgba(180, 218, 255, .22) !important;
  border-radius: 18px !important;
  background: linear-gradient(145deg, rgba(113, 184, 255, .18), rgba(137, 98, 255, .12)) !important;
  box-shadow: 0 13px 30px rgba(43, 99, 212, .22), inset 0 1px rgba(255,255,255,.13) !important;
}

#app .login-view-container .auth-split-right .auth-logo img { width: 37px !important; height: 37px !important; border-radius: 12px !important; }
#app .login-view-container .auth-split-right .auth-title { color: #fff !important; font-size: 30px !important; font-weight: 720 !important; letter-spacing: -.045em !important; }
#app .login-view-container .auth-split-right .auth-subtitle { color: rgba(214, 228, 255, .66) !important; font-size: 13px !important; line-height: 1.65 !important; }
#app .login-view-container .auth-split-right .form-group label { color: rgba(220, 231, 255, .82) !important; font-size: 12px !important; font-weight: 600 !important; }
#app .login-view-container .auth-split-right .form-control { height: 52px !important; border: 1px solid rgba(187, 210, 255, .16) !important; border-radius: 15px !important; color: #f7faff !important; background: rgba(5, 12, 28, .45) !important; }
#app .login-view-container .auth-split-right .form-control:focus { border-color: rgba(117, 221, 255, .68) !important; box-shadow: 0 0 0 4px rgba(97, 203, 255, .11) !important; background: rgba(10, 22, 46, .62) !important; }
#app .login-view-container .auth-split-right .input-with-icon .input-icon { color: rgba(148, 213, 255, .78) !important; }
#app .login-view-container .auth-split-right .forgot-password { color: #9fddff !important; font-weight: 600 !important; }
#app .login-view-container .auth-split-right .btn.btn-block { min-height: 52px !important; border-radius: 15px !important; font-size: 14px !important; font-weight: 650 !important; }
#app .login-view-container .auth-split-right .btn-primary { border: 1px solid rgba(210,240,255,.27) !important; color: #fff !important; background: linear-gradient(112deg, #49b9f8 0%, #7087f5 54%, #9b6cf1 100%) !important; box-shadow: 0 14px 30px rgba(73,128,244,.3), inset 0 1px rgba(255,255,255,.28) !important; }
#app .login-view-container .auth-split-right .btn-primary:hover:not(:disabled) { transform: translateY(-2px) !important; filter: brightness(1.08) !important; box-shadow: 0 19px 38px rgba(75,137,255,.42), inset 0 1px rgba(255,255,255,.31) !important; }
#app .login-view-container .auth-split-right .btn-secondary { border: 1px solid rgba(186,213,255,.18) !important; color: #dcecff !important; background: rgba(102,143,221,.09) !important; }

@keyframes k2-split-card { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes k2-split-orbit { from { transform: translate(-50%, -50%) scale(1) rotate(0deg); } to { transform: translate(-50%, -50%) scale(1.06) rotate(6deg); } }

@media (max-width: 899px) {
  #app .login-view-container .auth-split-container { grid-template-columns: minmax(0, 1fr) !important; }
  #app .login-view-container .auth-split-left { min-height: 250px !important; }
  #app .login-view-container .auth-split-left .site-name { top: 19px !important; left: 20px !important; }
  #app .login-view-container .auth-split-left .greeting-text { right: 24px !important; bottom: 35px !important; left: 24px !important; font-size: 34px !important; }
  #app .login-view-container .auth-split-left .greeting-text::after { margin-top: 12px !important; font-size: 12px !important; }
  #app .login-view-container .auth-split-right { min-height: auto !important; padding: 77px 16px 30px !important; border-left: 0 !important; }
  #app .login-view-container .auth-split-right .top-toolbar { top: 16px !important; right: 16px !important; }
  #app .login-view-container .auth-split-right .auth-form-container { padding: 30px 23px 26px !important; border-radius: 23px !important; }
}

@media (prefers-reduced-motion: reduce) { #app .login-view-container .auth-split-left::after, #app .login-view-container .auth-form-container { animation: none !important; } }


/* K2 CLOUD · full-viewport authentication and elevated account experience */
:root { --k2-ink:#070b16; --k2-panel:rgba(11,20,43,.72); --k2-line:rgba(151,180,255,.16); --k2-cyan:#4cc8ff; --k2-violet:#8b6cff; }
html, body, #app, .login-view-container { min-width:100% !important; min-height:100dvh !important; }
.login-view-container { width:100vw !important; height:100dvh !important; overflow:hidden !important; background:#070b16 !important; }
.auth-split-container { position:relative !important; display:grid !important; grid-template-columns:minmax(0,1.44fr) minmax(420px,.64fr) !important; width:100vw !important; min-width:100vw !important; max-width:none !important; min-height:100dvh !important; height:100dvh !important; overflow:hidden !important; background:radial-gradient(1300px 760px at 8% 0%,rgba(38,117,255,.24),transparent 66%),radial-gradient(900px 680px at 73% 18%,rgba(123,78,246,.18),transparent 68%),#070b16 !important; }
.auth-split-left { position:relative !important; isolation:isolate; min-width:0 !important; min-height:100dvh !important; overflow:hidden !important; background:linear-gradient(130deg,#06152d 0%,#101139 48%,#1b1040 100%) !important; }
.auth-split-left::before { content:"" !important; position:absolute !important; z-index:-1 !important; width:min(68vw,1040px) !important; aspect-ratio:1 !important; left:50% !important; top:50% !important; border-radius:50% !important; transform:translate(-52%,-48%) !important; background:radial-gradient(circle at 50% 50%,rgba(3,12,29,.85) 0 42%,transparent 42.4%),conic-gradient(from 22deg,rgba(80,214,255,0) 0 7%,rgba(80,214,255,.54) 11%,rgba(128,114,255,.16) 17%,transparent 27% 46%,rgba(110,124,255,.34) 56%,transparent 67% 100%) !important; -webkit-mask:radial-gradient(circle,transparent 0 41%,#000 41.4% 47%,transparent 47.4% 54%,#000 54.4% 55%,transparent 55.4%) !important; mask:radial-gradient(circle,transparent 0 41%,#000 41.4% 47%,transparent 47.4% 54%,#000 54.4% 55%,transparent 55.4%) !important; filter:drop-shadow(0 0 35px rgba(85,175,255,.22)) !important; animation:k2-orbit-rotation 28s linear infinite !important; }
.auth-split-left::after { content:"" !important; position:absolute !important; inset:0 !important; z-index:-1 !important; pointer-events:none !important; opacity:.64 !important; background:linear-gradient(rgba(120,179,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(120,179,255,.055) 1px,transparent 1px),radial-gradient(460px 400px at 51% 88%,rgba(12,207,216,.17),transparent 72%) !important; background-size:34px 34px,34px 34px,auto !important; -webkit-mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.5) 70%,transparent) !important; mask-image:linear-gradient(90deg,#000,rgba(0,0,0,.5) 70%,transparent) !important; }
.auth-split-left .background-decoration, .auth-split-left .floating-ball { opacity:0 !important; }
.auth-split-left .site-name { position:relative !important; z-index:2 !important; display:inline-flex !important; align-items:center !important; gap:10px !important; padding:10px 16px 10px 11px !important; border:1px solid rgba(135,201,255,.24) !important; border-radius:14px !important; background:rgba(8,19,50,.5) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 16px 44px rgba(0,0,0,.2) !important; letter-spacing:.08em !important; }
.auth-split-left .site-name::before { content:"" !important; width:18px !important; height:18px !important; border-radius:50% !important; border:1px solid rgba(119,230,255,.9) !important; box-shadow:0 0 0 4px rgba(79,198,255,.08),0 0 20px rgba(79,198,255,.75) !important; animation:k2-signal-pulse 2.8s ease-in-out infinite !important; }
.auth-split-left .left-content-overlay { position:relative !important; z-index:3 !important; max-width:690px !important; }
.auth-split-left .left-content-overlay::after { content:"GLOBAL ACCESS  /  LIVE NETWORK" !important; display:block !important; width:max-content !important; max-width:100% !important; margin-top:18px !important; padding:8px 12px !important; border:1px solid rgba(126,209,255,.18) !important; border-radius:999px !important; color:rgba(174,221,255,.82) !important; background:rgba(6,18,44,.34) !important; font-size:10px !important; font-weight:700 !important; letter-spacing:.18em !important; box-shadow:0 12px 36px rgba(0,0,0,.17) !important; animation:k2-quiet-float 5s ease-in-out infinite !important; }
.auth-split-left .greeting-text { color:#f4f8ff !important; font-size:clamp(44px,5.8vw,96px) !important; line-height:.96 !important; letter-spacing:-.072em !important; text-shadow:0 14px 48px rgba(1,8,28,.62) !important; }
.auth-split-left .greeting-text + * { color:rgba(205,224,255,.76) !important; letter-spacing:.02em !important; }
.auth-split-right { position:relative !important; min-width:0 !important; width:auto !important; min-height:100dvh !important; height:100dvh !important; display:grid !important; place-items:center !important; padding:clamp(28px,5vw,76px) !important; overflow:auto !important; background:linear-gradient(180deg,rgba(11,15,38,.78),rgba(5,11,25,.96)) !important; border-left:1px solid rgba(142,166,255,.13) !important; }
.auth-split-right::before { content:"" !important; position:absolute !important; inset:0 !important; pointer-events:none !important; background:radial-gradient(420px 420px at 50% 26%,rgba(102,124,255,.14),transparent 72%),linear-gradient(135deg,rgba(255,255,255,.025) 25%,transparent 25%) !important; background-size:auto,7px 7px !important; opacity:.78 !important; }
.auth-split-right .top-toolbar { position:absolute !important; z-index:3 !important; top:24px !important; right:26px !important; }
.auth-split-right .auth-form-container { position:relative !important; z-index:2 !important; width:min(100%,440px) !important; max-width:440px !important; margin:0 !important; padding:clamp(28px,3vw,46px) !important; border:1px solid rgba(145,176,255,.22) !important; border-radius:26px !important; background:linear-gradient(145deg,rgba(23,39,79,.78),rgba(7,14,34,.72)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 80px rgba(0,0,0,.36),0 0 0 1px rgba(102,183,255,.035) !important; -webkit-backdrop-filter:blur(24px) saturate(132%) !important; backdrop-filter:blur(24px) saturate(132%) !important; }
.auth-split-right .auth-form-container::before { content:"K2 CLOUD  ·  SECURE ACCESS" !important; display:block !important; margin-bottom:24px !important; color:rgba(128,214,255,.75) !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.17em !important; }
.auth-split-right .auth-header { margin-bottom:26px !important; }
.auth-split-right .auth-title { font-size:30px !important; letter-spacing:-.04em !important; color:#f4f7ff !important; }
.auth-split-right .auth-subtitle { color:rgba(190,207,242,.7) !important; }
.auth-split-right input, .auth-split-right .el-input__inner, .auth-split-right .ant-input { min-height:48px !important; border-radius:13px !important; border-color:rgba(139,177,255,.20) !important; background:rgba(6,15,36,.56) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important; color:#edf3ff !important; }
.auth-split-right input:focus, .auth-split-right .el-input__inner:focus, .auth-split-right .ant-input:focus { border-color:rgba(91,204,255,.85) !important; box-shadow:0 0 0 4px rgba(71,184,255,.12),inset 0 1px 0 rgba(255,255,255,.05) !important; }
.auth-split-right .auth-submit-btn, .auth-split-right button[type="submit"] { min-height:48px !important; border:0 !important; border-radius:13px !important; background:linear-gradient(100deg,#40b7f8,#7a6cf0) !important; box-shadow:0 15px 34px rgba(79,133,255,.30) !important; transition:transform .25s ease,box-shadow .25s ease !important; }
.auth-split-right .auth-submit-btn:hover, .auth-split-right button[type="submit"]:hover { transform:translateY(-2px) !important; box-shadow:0 20px 40px rgba(79,133,255,.42) !important; }
/* Disable every existing or residual customer-service launcher. */
#crisp-chatbox, .crisp-client, [id^="crisp"], [class^="crisp"], [class*=" crisp"], #tidio-chat, #tidio-chat-iframe, [id*="tidio"], [class*="tidio"], #chatwoot-widget, [id*="chatwoot"], [class*="chatwoot"], #intercom-container, .intercom-lightweight-app, [id*="customer-service"], [class*="customer-service"], [id*="customer_service"], [class*="customer_service"], [id*="live-chat"], [class*="live-chat"] { display:none !important; visibility:hidden !important; pointer-events:none !important; }
body > iframe[src*="crisp"], body > iframe[src*="tidio"], body > iframe[src*="chatwoot"], body > iframe[title*="chat" i] { display:none !important; }
/* Keep all original account actions and API behaviour; this block only elevates presentation. */
.main-board, .static-layout { background:transparent !important; }
.main-board { position:relative !important; isolation:isolate !important; }
.main-board::before { content:"" !important; position:fixed !important; inset:0 !important; z-index:-2 !important; pointer-events:none !important; background:radial-gradient(900px 540px at 3% -6%,rgba(55,116,255,.22),transparent 70%),radial-gradient(760px 520px at 105% 10%,rgba(138,79,255,.16),transparent 66%),radial-gradient(680px 460px at 58% 110%,rgba(26,205,196,.12),transparent 70%),#080d19 !important; }
.main-board [class*="card"], .main-board .el-card, .main-board .ant-card, .main-board .n-card { border:1px solid rgba(145,174,255,.15) !important; border-radius:20px !important; background:linear-gradient(145deg,rgba(24,36,70,.74),rgba(10,17,35,.72)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.065),0 18px 46px rgba(0,0,0,.19) !important; -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; }
.main-board [class*="card"]:hover, .main-board .el-card:hover, .main-board .ant-card:hover, .main-board .n-card:hover { border-color:rgba(105,196,255,.28) !important; transform:translateY(-2px) !important; transition:transform .25s ease,border-color .25s ease !important; }
.main-board [class*="sidebar"], .main-board [class*="side-menu"], .main-board .menu-container { border-right:1px solid rgba(147,174,255,.12) !important; background:rgba(8,15,34,.60) !important; -webkit-backdrop-filter:blur(18px) !important; backdrop-filter:blur(18px) !important; }
.main-board [class*="nav-item"], .main-board [class*="menu-item"], .main-board .el-menu-item { border-radius:12px !important; margin:5px 10px !important; transition:background .2s ease,color .2s ease,transform .2s ease !important; }
.main-board [class*="nav-item"]:hover, .main-board [class*="menu-item"]:hover, .main-board .el-menu-item:hover { background:rgba(86,156,255,.12) !important; transform:translateX(2px) !important; }
.main-board button, .main-board .el-button, .main-board .ant-btn, .main-board .n-button { border-radius:11px !important; }
.main-board .el-button--primary, .main-board .ant-btn-primary, .main-board .n-button--primary, .main-board button[class*="primary"] { border-color:transparent !important; background:linear-gradient(100deg,#42bff8,#7d6df0) !important; box-shadow:0 12px 28px rgba(80,130,255,.23) !important; }
.main-board [class*="checkin"], .main-board [class*="check-in"], .main-board [id*="checkin"], .main-board [id*="check-in"] { display:none !important; }
@keyframes k2-orbit-rotation { to { transform:translate(-52%,-48%) rotate(360deg); } }
@keyframes k2-signal-pulse { 0%,100% { transform:scale(.9); opacity:.66; } 50% { transform:scale(1.08); opacity:1; } }
@keyframes k2-quiet-float { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-6px); } }
@media (max-width:860px) { .auth-split-container { display:block !important; height:auto !important; min-height:100dvh !important; } .auth-split-left { min-height:38dvh !important; height:38dvh !important; } .auth-split-left .left-content-overlay { padding-top:18vh !important; } .auth-split-left .greeting-text { font-size:46px !important; } .auth-split-right { min-height:62dvh !important; height:auto !important; padding:34px 20px !important; border-left:0 !important; border-top:1px solid rgba(142,166,255,.13) !important; } .auth-split-right .top-toolbar { top:16px !important; right:18px !important; } }
@media (prefers-reduced-motion:reduce) { .auth-split-left::before, .auth-split-left .site-name::before, .auth-split-left .left-content-overlay::after { animation:none !important; } }


/* K2 CLOUD · viewport fit and account hierarchy correction */
html, body { width:100% !important; max-width:100% !important; margin:0 !important; overflow-x:hidden !important; }
body:has(.auth-split-container) { width:100vw !important; min-width:100vw !important; height:100dvh !important; overflow:hidden !important; background:#070b16 !important; }
body:has(.auth-split-container) > #app { position:fixed !important; inset:0 !important; display:block !important; width:100vw !important; min-width:100vw !important; max-width:none !important; height:100dvh !important; min-height:100dvh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }
body:has(.auth-split-container) .login-view-container, body:has(.auth-split-container) .auth-split-container { position:absolute !important; inset:0 !important; width:100vw !important; min-width:100vw !important; max-width:none !important; height:100dvh !important; min-height:100dvh !important; margin:0 !important; }
body:has(.auth-split-container) .auth-split-container { grid-template-columns:minmax(0,1fr) minmax(400px,29vw) !important; }
/* The customer widget is mounted outside #app in this theme.  Keep no third-party surface on the login view. */
body:has(.auth-split-container) > :not(#app):not(script):not(style):not(link) { display:none !important; visibility:hidden !important; pointer-events:none !important; }
/* A single composed workbench: inner modules are quiet sections instead of separate floating windows. */
.main-board .content-area { position:relative !important; max-width:1480px !important; margin:28px auto !important; padding:clamp(22px,3vw,44px) !important; border:1px solid rgba(144,177,255,.13) !important; border-radius:28px !important; background:linear-gradient(145deg,rgba(20,32,64,.68),rgba(8,14,29,.68)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 28px 80px rgba(0,0,0,.22) !important; -webkit-backdrop-filter:blur(22px) !important; backdrop-filter:blur(22px) !important; }
.main-board .dashboard-card, .main-board .stats-card, .main-board .plan-card, .main-board .order-card, .main-board .ticket-card, .main-board .profile-card, .main-board .wallet-card, .main-board .invite-card, .main-board .traffic-card, .main-board .server-card, .main-board .document-card, .main-board .content-card, .main-board .card-container, .main-board .shop-card, .main-board .notice-card, .main-board .info-card, .main-board .el-card, .main-board .ant-card, .main-board .n-card { position:relative !important; border:0 !important; border-bottom:1px solid rgba(155,186,255,.13) !important; border-radius:0 !important; background:linear-gradient(90deg,rgba(67,105,178,.075),transparent 82%) !important; box-shadow:none !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
.main-board .dashboard-card:first-child, .main-board .stats-card:first-child, .main-board .plan-card:first-child, .main-board .order-card:first-child, .main-board .ticket-card:first-child, .main-board .profile-card:first-child { border-top:1px solid rgba(155,186,255,.11) !important; }
.main-board .dashboard-card:hover, .main-board .stats-card:hover, .main-board .plan-card:hover, .main-board .order-card:hover, .main-board .ticket-card:hover, .main-board .profile-card:hover, .main-board .wallet-card:hover, .main-board .invite-card:hover, .main-board .traffic-card:hover, .main-board .server-card:hover, .main-board .shop-card:hover { transform:none !important; border-color:rgba(122,207,255,.30) !important; box-shadow:inset 3px 0 0 rgba(91,195,255,.68) !important; }
.main-board .card-header, .main-board .panel-header, .main-board .section-header, .main-board .table-header { margin-bottom:0 !important; border-bottom:1px solid rgba(155,186,255,.12) !important; border-radius:0 !important; background:transparent !important; }
.main-board [class*="stats-grid"] > *, .main-board [class*="overview"] > * { border-radius:0 !important; box-shadow:none !important; }
.main-board [class*="stats-grid"] > * + *, .main-board [class*="overview"] > * + * { border-left:1px solid rgba(155,186,255,.12) !important; }
@media (max-width:860px) { body:has(.auth-split-container) > #app { position:relative !important; min-height:100dvh !important; height:auto !important; overflow:visible !important; } body:has(.auth-split-container) .login-view-container, body:has(.auth-split-container) .auth-split-container { position:relative !important; inset:auto !important; height:auto !important; } .main-board .content-area { margin:0 !important; border-radius:0 !important; border-left:0 !important; border-right:0 !important; } }


/* K2 CLOUD · considered authentication refinement (UI/UX Pro Max) */
body:has(.auth-split-container) { color-scheme:dark !important; }
body:has(.auth-split-container) .auth-split-container { grid-template-columns:minmax(0,1.42fr) minmax(430px,.66fr) !important; background:#080d19 !important; }
body:has(.auth-split-container) .auth-split-left { display:flex !important; align-items:flex-end !important; min-height:100dvh !important; padding:clamp(42px,6vw,96px) !important; background:radial-gradient(820px 620px at 19% 5%,rgba(24,83,169,.34),transparent 68%),radial-gradient(680px 520px at 79% 26%,rgba(86,55,160,.28),transparent 70%),linear-gradient(145deg,#071327 0%,#0b1733 54%,#10142d 100%) !important; }
body:has(.auth-split-container) .auth-split-left::before { width:clamp(440px,38vw,680px) !important; height:clamp(440px,38vw,680px) !important; left:43% !important; top:43% !important; z-index:-1 !important; transform:translate(-50%,-50%) !important; border:1px solid rgba(114,193,255,.18) !important; background:radial-gradient(circle at 37% 29%,rgba(113,218,255,.20),transparent 17%),radial-gradient(circle at 50% 52%,rgba(13,45,82,.88) 0 45%,rgba(12,30,64,.58) 46% 56%,rgba(77,112,204,.13) 57% 58%,transparent 59%),radial-gradient(circle at 51% 50%,rgba(55,115,205,.2),transparent 68%) !important; -webkit-mask:none !important; mask:none !important; box-shadow:inset -42px -36px 88px rgba(1,8,22,.76),inset 12px 14px 52px rgba(129,212,255,.10),0 0 110px rgba(65,141,255,.12) !important; filter:none !important; animation:k2-nexus-breathe 7s ease-in-out infinite !important; }
body:has(.auth-split-container) .auth-split-left::after { z-index:-2 !important; opacity:.42 !important; background:linear-gradient(rgba(141,205,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(141,205,255,.045) 1px,transparent 1px),radial-gradient(500px 460px at 44% 60%,rgba(4,194,213,.15),transparent 72%) !important; background-size:42px 42px,42px 42px,auto !important; }
body:has(.auth-split-container) .left-content-overlay { width:min(100%,690px) !important; margin:0 !important; padding:0 !important; }
/* Removes the prior top-edge label that cut into the brand at some desktop widths. */
body:has(.auth-split-container) .left-content-overlay::after { display:none !important; content:none !important; }
body:has(.auth-split-container) .auth-split-left .site-name { position:absolute !important; top:clamp(26px,3vw,54px) !important; left:clamp(28px,4vw,70px) !important; padding:9px 14px 9px 10px !important; border-radius:12px !important; color:#e8f4ff !important; background:rgba(8,21,48,.46) !important; border-color:rgba(147,213,255,.20) !important; font-size:12px !important; font-weight:750 !important; letter-spacing:.065em !important; }
body:has(.auth-split-container) .auth-split-left .site-name::before { width:15px !important; height:15px !important; box-shadow:0 0 0 4px rgba(79,198,255,.08),0 0 15px rgba(79,198,255,.56) !important; }
body:has(.auth-split-container) .auth-split-left .greeting-text { max-width:680px !important; margin:0 !important; color:#f7fbff !important; font-size:clamp(46px,5.4vw,84px) !important; font-weight:720 !important; line-height:.98 !important; letter-spacing:-.065em !important; text-shadow:0 14px 44px rgba(0,7,22,.48) !important; }
body:has(.auth-split-container) .auth-split-left .greeting-text + * { display:block !important; max-width:450px !important; margin-top:18px !important; color:rgba(214,232,255,.76) !important; font-size:15px !important; line-height:1.65 !important; letter-spacing:.01em !important; }
body:has(.auth-split-container) .auth-split-right { align-content:center !important; padding:clamp(30px,5vw,82px) !important; background:radial-gradient(550px 600px at 18% 50%,rgba(48,77,174,.18),transparent 68%),linear-gradient(160deg,#0c1530 0%,#080e1d 72%) !important; }
body:has(.auth-split-container) .auth-split-right::before { opacity:.36 !important; background:linear-gradient(135deg,rgba(255,255,255,.022) 25%,transparent 25%) !important; background-size:8px 8px !important; }
body:has(.auth-split-container) .auth-split-right .auth-form-container { width:min(100%,456px) !important; max-width:456px !important; padding:42px !important; border:1px solid rgba(150,190,255,.18) !important; border-radius:22px !important; background:linear-gradient(160deg,rgba(25,43,83,.92),rgba(9,17,37,.94)) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 28px 70px rgba(0,0,0,.30) !important; -webkit-backdrop-filter:none !important; backdrop-filter:none !important; }
body:has(.auth-split-container) .auth-split-right .auth-form-container::before { margin-bottom:22px !important; color:rgba(135,211,255,.70) !important; font-size:10px !important; letter-spacing:.16em !important; }
body:has(.auth-split-container) .auth-split-right .auth-title { color:#f5f8ff !important; font-size:32px !important; font-weight:700 !important; line-height:1.15 !important; letter-spacing:-.045em !important; }
body:has(.auth-split-container) .auth-split-right .auth-subtitle { margin-top:9px !important; color:rgba(202,218,248,.68) !important; font-size:14px !important; line-height:1.55 !important; }
body:has(.auth-split-container) .auth-split-right label { color:rgba(221,232,255,.88) !important; font-size:13px !important; font-weight:600 !important; }
body:has(.auth-split-container) .auth-split-right input, body:has(.auth-split-container) .auth-split-right .el-input__inner, body:has(.auth-split-container) .auth-split-right .ant-input { min-height:50px !important; border:1px solid rgba(149,190,255,.19) !important; border-radius:12px !important; background:rgba(4,12,30,.74) !important; color:#eef6ff !important; font-size:15px !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.035) !important; transition:border-color .18s ease,box-shadow .18s ease,background .18s ease !important; }
body:has(.auth-split-container) .auth-split-right input::placeholder { color:rgba(184,204,239,.42) !important; }
body:has(.auth-split-container) .auth-split-right input:focus, body:has(.auth-split-container) .auth-split-right .el-input__inner:focus, body:has(.auth-split-container) .auth-split-right .ant-input:focus { outline:none !important; border-color:#71cfff !important; background:rgba(6,18,41,.9) !important; box-shadow:0 0 0 3px rgba(93,193,255,.16) !important; }
body:has(.auth-split-container) .auth-split-right .auth-submit-btn, body:has(.auth-split-container) .auth-split-right button[type="submit"] { min-height:50px !important; margin-top:8px !important; border-radius:12px !important; background:linear-gradient(100deg,#289fe8,#6b63eb) !important; box-shadow:0 14px 30px rgba(49,126,242,.28) !important; font-size:15px !important; font-weight:700 !important; letter-spacing:.01em !important; }
body:has(.auth-split-container) .auth-split-right .auth-submit-btn:focus-visible, body:has(.auth-split-container) .auth-split-right button[type="submit"]:focus-visible, body:has(.auth-split-container) .auth-split-right a:focus-visible { outline:3px solid rgba(117,209,255,.90) !important; outline-offset:3px !important; }
body:has(.auth-split-container) .auth-split-right .top-toolbar { top:28px !important; right:30px !important; }
@keyframes k2-nexus-breathe { 0%,100% { transform:translate(-50%,-50%) scale(1); opacity:.78; } 50% { transform:translate(-50%,-50%) scale(1.025); opacity:1; } }
@media (max-width:860px) { body:has(.auth-split-container) .auth-split-container { display:block !important; } body:has(.auth-split-container) .auth-split-left { display:flex !important; min-height:32dvh !important; height:32dvh !important; padding:28px 24px !important; } body:has(.auth-split-container) .auth-split-left::before { width:300px !important; height:300px !important; left:78% !important; top:48% !important; } body:has(.auth-split-container) .auth-split-left .site-name { top:20px !important; left:20px !important; } body:has(.auth-split-container) .auth-split-left .greeting-text { font-size:42px !important; } body:has(.auth-split-container) .auth-split-left .greeting-text + * { display:none !important; } body:has(.auth-split-container) .auth-split-right { min-height:68dvh !important; padding:30px 18px !important; } body:has(.auth-split-container) .auth-split-right .auth-form-container { width:100% !important; padding:30px 24px !important; border-radius:18px !important; } }
@media (prefers-reduced-motion:reduce) { body:has(.auth-split-container) .auth-split-left::before { animation:none !important; } }


/* K2 CLOUD · motion compliance: no continuous decorative movement */
body:has(.auth-split-container) .auth-split-left::before, body:has(.auth-split-container) .auth-split-left .site-name::before { animation:none !important; }


/* K2 CLOUD · viewport and OAuth icon proportion repair */
html, body { width:100vw !important; min-width:100vw !important; max-width:100vw !important; zoom:1 !important; transform:none !important; }
#app { position:relative !important; width:100vw !important; min-width:100vw !important; max-width:100vw !important; transform:none !important; zoom:1 !important; }
body:has(.auth-split-container), body:has(.auth-split-container) > #app, body:has(.auth-split-container) .login-view-container, body:has(.auth-split-container) .auth-split-container { width:100vw !important; min-width:100vw !important; max-width:100vw !important; transform:none !important; zoom:1 !important; }
body:has(.auth-split-container) > #app { left:0 !important; right:0 !important; }
/* OAuth providers share one square interaction token; preserve the source logo aspect ratio. */
.auth-split-right [class*="third-party"], .auth-split-right [class*="oauth"], .auth-split-right [class*="social-login"] { display:flex !important; align-items:center !important; justify-content:center !important; gap:12px !important; min-height:48px !important; }
.auth-split-right [class*="third-party"] a, .auth-split-right [class*="third-party"] button, .auth-split-right [class*="oauth"] a, .auth-split-right [class*="oauth"] button, .auth-split-right [class*="social-login"] a, .auth-split-right [class*="social-login"] button { display:inline-flex !important; flex:0 0 44px !important; align-items:center !important; justify-content:center !important; width:44px !important; height:44px !important; min-width:44px !important; min-height:44px !important; padding:0 !important; overflow:hidden !important; border-radius:12px !important; background:rgba(34,55,99,.58) !important; border:1px solid rgba(149,190,255,.16) !important; transition:background .18s ease,border-color .18s ease,transform .18s ease !important; }
.auth-split-right [class*="third-party"] a:hover, .auth-split-right [class*="third-party"] button:hover, .auth-split-right [class*="oauth"] a:hover, .auth-split-right [class*="oauth"] button:hover, .auth-split-right [class*="social-login"] a:hover, .auth-split-right [class*="social-login"] button:hover { transform:translateY(-1px) !important; border-color:rgba(111,207,255,.58) !important; background:rgba(50,78,136,.68) !important; }
.auth-split-right [class*="third-party"] img, .auth-split-right [class*="oauth"] img, .auth-split-right [class*="social-login"] img { display:block !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; max-width:28px !important; max-height:28px !important; aspect-ratio:1 / 1 !important; object-fit:contain !important; object-position:center !important; transform:none !important; }
.auth-split-right [class*="third-party"] svg, .auth-split-right [class*="oauth"] svg, .auth-split-right [class*="social-login"] svg { display:block !important; width:28px !important; height:28px !important; min-width:28px !important; min-height:28px !important; aspect-ratio:1 / 1 !important; }


/* K2 CLOUD · remove residual customer-embed width from the authentication route */
body:has(.auth-split-container) .login-view-container, body:has(.auth-split-container) .auth-split-container { margin-right:0 !important; padding-right:0 !important; right:0 !important; }
body:has(.auth-split-container) [class*="customer"], body:has(.auth-split-container) [id*="customer"], body:has(.auth-split-container) [class*="chat-widget"], body:has(.auth-split-container) [id*="chat-widget"], body:has(.auth-split-container) [class*="chat-embed"], body:has(.auth-split-container) [id*="chat-embed"] { display:none !important; width:0 !important; min-width:0 !important; max-width:0 !important; flex:0 0 0 !important; margin:0 !important; padding:0 !important; border:0 !important; overflow:hidden !important; }
/* K2 CLOUD · deterministic full-viewport split authentication repair */
html, body { width:100% !important; min-width:0 !important; max-width:100% !important; overflow-x:clip !important; }
#app:has(.login-view-container) { position:fixed !important; inset:0 !important; width:100vw !important; min-width:0 !important; max-width:none !important; height:100vh !important; margin:0 !important; padding:0 !important; }
.login-view-container { position:fixed !important; inset:0 !important; width:100vw !important; min-width:100vw !important; max-width:none !important; height:100vh !important; min-height:100vh !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }
.auth-split-container { display:flex !important; width:100% !important; min-width:0 !important; max-width:none !important; height:100% !important; min-height:100% !important; margin:0 !important; padding:0 !important; overflow:hidden !important; }
.auth-split-left { flex:1 1 auto !important; width:auto !important; min-width:0 !important; max-width:none !important; margin:0 !important; }
.auth-split-right { box-sizing:border-box !important; flex:0 0 clamp(420px, 32vw, 680px) !important; width:clamp(420px, 32vw, 680px) !important; min-width:420px !important; max-width:none !important; height:100% !important; margin:0 !important; right:auto !important; }
.auth-split-right .auth-form-container { box-sizing:border-box !important; width:min(100%, 480px) !important; max-width:480px !important; margin:0 auto !important; }
@media (max-width:992px) { #app:has(.login-view-container), .login-view-container { position:relative !important; inset:auto !important; width:100% !important; min-width:0 !important; height:auto !important; min-height:100dvh !important; overflow:visible !important; } .auth-split-container { min-height:100dvh !important; overflow:visible !important; } .auth-split-left { display:none !important; } .auth-split-right { flex:1 1 auto !important; width:100% !important; min-width:0 !important; min-height:100dvh !important; } }
/* K2 CLOUD · desktop login panel anchored to viewport edge */
@media (min-width:993px) {
html:has(.login-view-container), body:has(.login-view-container) { width:100vw !important; min-width:100vw !important; max-width:100vw !important; }
body:has(.login-view-container) #app, body:has(.login-view-container) .login-view-container { position:fixed !important; inset:0 !important; width:100vw !important; min-width:100vw !important; max-width:none !important; height:100vh !important; margin:0 !important; padding:0 !important; }
body:has(.login-view-container) .auth-split-container { position:fixed !important; inset:0 !important; display:block !important; width:100vw !important; min-width:100vw !important; max-width:none !important; height:100vh !important; margin:0 !important; padding:0 !important; }
body:has(.login-view-container) .auth-split-left { position:absolute !important; inset:0 clamp(520px, 25vw, 600px) 0 0 !important; display:flex !important; width:auto !important; min-width:0 !important; max-width:none !important; height:100vh !important; margin:0 !important; }
body:has(.login-view-container) .auth-split-right { position:absolute !important; top:0 !important; right:0 !important; bottom:0 !important; left:auto !important; flex:none !important; width:clamp(520px, 25vw, 600px) !important; min-width:520px !important; max-width:none !important; height:100vh !important; margin:0 !important; }
}


/* K2 login edge layout v3 - no conditional selector dependency */
@media (min-width: 993px) {
  html, body, #app {
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    margin: 0 !important;
  }
  #app .login-view-container {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #app .login-view-container .auth-split-container {
    position: absolute !important;
    inset: 0 !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) clamp(520px, 25vw, 600px) !important;
    width: 100vw !important;
    min-width: 100vw !important;
    max-width: none !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }
  #app .login-view-container .auth-split-left {
    grid-column: 1 !important;
    position: relative !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
  }
  #app .login-view-container .auth-split-right {
    grid-column: 2 !important;
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    min-height: 100dvh !important;
    margin: 0 !important;
    padding: clamp(48px, 4vw, 88px) clamp(36px, 3vw, 64px) !important;
    box-sizing: border-box !important;
  }
}

/* K2: customer service is intentionally disabled site-wide */
#crisp-chatbox, #chatwoot_live_chat_widget, .woot-widget-holder, .woot-widget-bubble,
[class*='customer-service'], [class*='customerService'], [class*='chat-widget'],
[class*='chatwoot'], [class*='crisp'], iframe[src*='crisp'], iframe[src*='chatwoot'] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}


/* K2 CLOUD login experience v4: centered secure access and ambient motion */
@media (min-width: 993px) {
  #app .login-view-container .auth-split-container {
    grid-template-columns: minmax(0, 1fr) clamp(660px, 36vw, 820px) !important;
    isolation: isolate !important;
    background: linear-gradient(110deg, #06101f 0%, #0a1730 47%, #080d1a 100%) !important;
  }

  #app .login-view-container .auth-split-container::before {
    content: '' !important;
    position: absolute !important;
    z-index: 0 !important;
    width: min(76vw, 1480px) !important;
    height: min(76vw, 1480px) !important;
    left: -26vw !important;
    top: -31vh !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background: radial-gradient(circle at 50% 50%, rgba(52, 157, 255, .28) 0%, rgba(39, 93, 230, .13) 32%, rgba(8, 18, 42, 0) 68%) !important;
    filter: blur(2px) !important;
    opacity: .94 !important;
    animation: k2-ambient-drift 18s cubic-bezier(.45, 0, .2, 1) infinite alternate !important;
  }

  #app .login-view-container .auth-split-container::after {
    content: '' !important;
    position: absolute !important;
    z-index: 0 !important;
    width: min(47vw, 820px) !important;
    height: min(47vw, 820px) !important;
    left: clamp(11%, 19vw, 30%) !important;
    top: 50% !important;
    border: 1px solid rgba(124, 202, 255, .10) !important;
    border-radius: 50% !important;
    box-shadow: 0 0 0 64px rgba(102, 143, 255, .025), 0 0 96px rgba(36, 112, 255, .11) !important;
    pointer-events: none !important;
    transform: translate3d(-50%, -50%, 0) !important;
    animation: k2-orbit-pulse 14s ease-in-out infinite !important;
  }

  #app .login-view-container .auth-split-left,
  #app .login-view-container .auth-split-right {
    z-index: 1 !important;
  }

  #app .login-view-container .auth-split-left {
    background: linear-gradient(140deg, rgba(9, 29, 65, .48) 0%, rgba(6, 16, 34, .16) 55%, rgba(6, 12, 25, .04) 100%) !important;
  }

  #app .login-view-container .auth-split-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: clamp(56px, 6vh, 96px) clamp(54px, 4vw, 82px) !important;
    background: linear-gradient(135deg, rgba(13, 22, 46, .82), rgba(7, 13, 29, .95)) !important;
  }

  #app .login-view-container .auth-form-container {
    width: min(100%, 480px) !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    padding: 42px clamp(30px, 3.15vw, 48px) !important;
    border: 1px solid rgba(159, 211, 255, .22) !important;
    border-radius: 28px !important;
    background: linear-gradient(145deg, rgba(21, 43, 78, .82) 0%, rgba(11, 25, 51, .88) 62%, rgba(8, 17, 35, .92) 100%) !important;
    box-shadow: 0 28px 72px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .08) !important;
    backdrop-filter: blur(22px) saturate(135%) !important;
    -webkit-backdrop-filter: blur(22px) saturate(135%) !important;
    box-sizing: border-box !important;
    transform: translateZ(0) !important;
    animation: k2-card-arrive .6s cubic-bezier(.16, 1, .3, 1) both !important;
  }

  #app .login-view-container .auth-form-container::before {
    content: '' !important;
    position: absolute !important;
    left: 15% !important;
    right: 15% !important;
    top: 0 !important;
    height: 1px !important;
    background: linear-gradient(90deg, transparent, rgba(101, 213, 255, .85), rgba(155, 113, 255, .72), transparent) !important;
    opacity: .82 !important;
  }

  #app .login-view-container .auth-form-container:focus-within {
    border-color: rgba(120, 208, 255, .44) !important;
    box-shadow: 0 30px 82px rgba(0, 0, 0, .40), 0 0 0 4px rgba(79, 191, 255, .08), inset 0 1px 0 rgba(255, 255, 255, .10) !important;
  }

  #app .login-view-container .auth-split-right .form-control {
    min-height: 54px !important;
    border-color: rgba(157, 207, 255, .16) !important;
    background: rgba(5, 14, 33, .64) !important;
  }

  #app .login-view-container .auth-split-right .form-control:focus {
    border-color: rgba(104, 204, 255, .78) !important;
    box-shadow: 0 0 0 4px rgba(67, 177, 255, .12) !important;
  }
}

@keyframes k2-ambient-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(7%, 5%, 0) scale(1.10); }
}

@keyframes k2-orbit-pulse {
  0%, 100% { opacity: .36; transform: translate3d(-50%, -50%, 0) scale(.96) rotate(0deg); }
  50% { opacity: .72; transform: translate3d(-50%, -50%, 0) scale(1.04) rotate(8deg); }
}

@keyframes k2-card-arrive {
  from { opacity: 0; transform: translate3d(18px, 0, 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  #app .login-view-container .auth-split-container::before,
  #app .login-view-container .auth-split-container::after,
  #app .login-view-container .auth-form-container {
    animation: none !important;
  }
}


/* K2 Login Visual System v5 — network core, dark-form parity, unified OAuth controls */
#app .login-view-container .auth-split-container {
  isolation: isolate !important;
  overflow: hidden !important;
  background:
    linear-gradient(118deg, rgba(4, 17, 42, .94) 0%, rgba(7, 25, 58, .84) 46%, rgba(10, 19, 45, .76) 100%),
    radial-gradient(760px 640px at 41% 46%, rgba(33, 125, 222, .18), transparent 66%),
    radial-gradient(620px 520px at 8% 88%, rgba(91, 72, 220, .14), transparent 72%) !important;
}

#app .login-view-container .auth-split-container::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  top: 47% !important;
  left: 49% !important;
  width: min(54vw, 780px) !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(122, 204, 255, .18) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 50%, rgba(112, 211, 255, .42) 0 1.2%, rgba(47, 141, 230, .27) 1.8% 10%, rgba(17, 81, 157, .30) 15%, rgba(8, 37, 86, .12) 29%, transparent 48%),
    repeating-radial-gradient(circle at 50% 50%, transparent 0 66px, rgba(116, 203, 255, .16) 67px 68px, transparent 69px 132px),
    repeating-linear-gradient(0deg, transparent 0 51px, rgba(145, 212, 255, .055) 52px 53px),
    repeating-linear-gradient(90deg, transparent 0 51px, rgba(145, 212, 255, .055) 52px 53px) !important;
  box-shadow:
    inset 0 0 72px rgba(49, 164, 255, .18),
    inset 0 0 180px rgba(24, 90, 203, .12),
    0 0 82px rgba(40, 151, 255, .14),
    0 0 180px rgba(57, 67, 221, .12) !important;
  transform: translate3d(-50%, -50%, 0) scale(.98) !important;
  animation: k2-network-core 16s cubic-bezier(.4, 0, .2, 1) infinite !important;
}

#app .login-view-container .auth-split-container::after {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  pointer-events: none !important;
  top: 47% !important;
  left: 49% !important;
  width: min(61vw, 875px) !important;
  aspect-ratio: 1 !important;
  border: 1px solid rgba(116, 202, 255, .12) !important;
  border-radius: 50% !important;
  background:
    radial-gradient(circle at 50% 3%, rgba(124, 221, 255, .95) 0 3px, transparent 4px),
    radial-gradient(circle at 86% 24%, rgba(141, 125, 255, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 94% 66%, rgba(69, 190, 255, .85) 0 3px, transparent 4px),
    radial-gradient(circle at 64% 94%, rgba(117, 208, 255, .9) 0 3px, transparent 4px),
    radial-gradient(circle at 18% 81%, rgba(137, 126, 255, .82) 0 3px, transparent 4px),
    radial-gradient(circle at 5% 39%, rgba(70, 189, 255, .88) 0 3px, transparent 4px),
    conic-gradient(from 20deg, transparent 0deg 18deg, rgba(108, 207, 255, .22) 18.5deg 19deg, transparent 19deg 78deg, rgba(132, 120, 255, .18) 78.5deg 79deg, transparent 79deg 144deg, rgba(99, 203, 255, .18) 144.5deg 145deg, transparent 145deg 360deg) !important;
  box-shadow: 0 0 0 72px rgba(74, 157, 255, .025), 0 0 0 148px rgba(83, 113, 248, .018) !important;
  transform: translate3d(-50%, -50%, 0) rotate(0deg) !important;
  animation: k2-network-orbit 26s linear infinite !important;
}

#app .login-view-container .auth-split-container > * {
  position: relative !important;
  z-index: 1 !important;
}

#app .login-view-container .auth-split-container h1 {
  max-width: 640px !important;
  margin-bottom: 12px !important;
  letter-spacing: -.055em !important;
  text-shadow: 0 8px 36px rgba(0, 15, 40, .46) !important;
}

#app .login-view-container .auth-split-container h1 + p,
#app .login-view-container .auth-split-container h1 ~ p {
  max-width: 360px !important;
  color: rgba(211, 231, 255, .72) !important;
  line-height: 1.7 !important;
}

/* Native / custom email-domain selectors must remain readable in dark mode. */
#app .login-view-container .auth-form-container select,
#app .login-view-container .auth-form-container [class*="email"] select,
#app .login-view-container .auth-form-container [class*="mail"] select {
  min-width: 120px !important;
  min-height: 44px !important;
  color: rgba(241, 247, 255, .94) !important;
  color-scheme: dark !important;
  background-color: rgba(8, 20, 46, .96) !important;
  border: 1px solid rgba(139, 187, 255, .22) !important;
  border-radius: 0 12px 12px 0 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .035) !important;
}

#app .login-view-container .auth-form-container select:focus {
  outline: none !important;
  border-color: rgba(103, 192, 255, .78) !important;
  box-shadow: 0 0 0 3px rgba(78, 168, 255, .14), inset 0 1px 0 rgba(255, 255, 255, .05) !important;
}

#app .login-view-container .auth-form-container select option {
  color: #eaf4ff !important;
  background: #0b1a39 !important;
}

#app .login-view-container .auth-form-container [class*="select"] input,
#app .login-view-container .auth-form-container [class*="select"] [role="combobox"],
#app .login-view-container .auth-form-container [class*="select"] button {
  color: rgba(241, 247, 255, .94) !important;
  background-color: rgba(8, 20, 46, .96) !important;
  border-color: rgba(139, 187, 255, .22) !important;
}

/* OAuth options are compact, square and visually consistent across providers. */
#app .login-view-container .auth-form-container [class*="third"] button,
#app .login-view-container .auth-form-container [class*="social"] button,
#app .login-view-container .auth-form-container [class*="oauth"] button,
#app .login-view-container .auth-form-container [class*="third"] a,
#app .login-view-container .auth-form-container [class*="social"] a,
#app .login-view-container .auth-form-container [class*="oauth"] a {
  box-sizing: border-box !important;
  inline-size: 46px !important;
  block-size: 46px !important;
  min-inline-size: 46px !important;
  min-block-size: 46px !important;
  padding: 0 !important;
  border: 1px solid rgba(149, 191, 255, .24) !important;
  border-radius: 14px !important;
  background: linear-gradient(145deg, rgba(30, 65, 124, .82), rgba(14, 28, 66, .94)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 20px rgba(0, 9, 33, .24) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  transition: transform 180ms ease, border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease !important;
}

#app .login-view-container .auth-form-container [class*="third"] button:hover,
#app .login-view-container .auth-form-container [class*="social"] button:hover,
#app .login-view-container .auth-form-container [class*="oauth"] button:hover,
#app .login-view-container .auth-form-container [class*="third"] a:hover,
#app .login-view-container .auth-form-container [class*="social"] a:hover,
#app .login-view-container .auth-form-container [class*="oauth"] a:hover {
  border-color: rgba(113, 205, 255, .72) !important;
  background: linear-gradient(145deg, rgba(43, 96, 175, .92), rgba(39, 48, 112, .96)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13), 0 12px 26px rgba(29, 104, 235, .24) !important;
  transform: translate3d(0, -2px, 0) !important;
}

#app .login-view-container .auth-form-container [class*="third"] button:active,
#app .login-view-container .auth-form-container [class*="social"] button:active,
#app .login-view-container .auth-form-container [class*="oauth"] button:active,
#app .login-view-container .auth-form-container [class*="third"] a:active,
#app .login-view-container .auth-form-container [class*="social"] a:active,
#app .login-view-container .auth-form-container [class*="oauth"] a:active {
  transform: translate3d(0, 0, 0) scale(.97) !important;
}

#app .login-view-container .auth-form-container [class*="third"] img,
#app .login-view-container .auth-form-container [class*="social"] img,
#app .login-view-container .auth-form-container [class*="oauth"] img,
#app .login-view-container .auth-form-container img[src*="google"],
#app .login-view-container .auth-form-container img[src*="telegram"] {
  display: block !important;
  inline-size: 22px !important;
  block-size: 22px !important;
  min-inline-size: 22px !important;
  min-block-size: 22px !important;
  max-inline-size: 22px !important;
  max-block-size: 22px !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: contain !important;
  object-position: center !important;
}

@keyframes k2-network-core {
  0%, 100% { opacity: .78; transform: translate3d(-50%, -50%, 0) scale(.965); }
  50% { opacity: 1; transform: translate3d(-50%, -50%, 0) scale(1.025); }
}

@keyframes k2-network-orbit {
  from { opacity: .74; transform: translate3d(-50%, -50%, 0) rotate(0deg); }
  50% { opacity: 1; transform: translate3d(-50%, -50%, 0) rotate(180deg); }
  to { opacity: .74; transform: translate3d(-50%, -50%, 0) rotate(360deg); }
}

@media (max-width: 959px) {
  #app .login-view-container .auth-split-container::before,
  #app .login-view-container .auth-split-container::after { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  #app .login-view-container .auth-split-container::before,
  #app .login-view-container .auth-split-container::after { animation: none !important; }
  #app .login-view-container .auth-form-container [class*="third"] button,
  #app .login-view-container .auth-form-container [class*="social"] button,
  #app .login-view-container .auth-form-container [class*="oauth"] button,
  #app .login-view-container .auth-form-container [class*="third"] a,
  #app .login-view-container .auth-form-container [class*="social"] a,
  #app .login-view-container .auth-form-container [class*="oauth"] a { transition: none !important; }
}


/* K2 CLOUD Login Visual System v6 — orbital core, balanced hierarchy */
@media (min-width: 993px) {
  #app .login-view-container .auth-split-container {
    background:
      radial-gradient(900px 680px at 24% 44%, rgba(21, 98, 205, .22), transparent 72%),
      radial-gradient(760px 580px at 78% 8%, rgba(95, 77, 202, .13), transparent 70%),
      linear-gradient(112deg, #061126 0%, #081a38 48%, #080d1d 100%) !important;
  }

  #app .login-view-container .auth-split-container::before,
  #app .login-view-container .auth-split-container::after {
    opacity: 0 !important;
    animation: none !important;
  }

  #app .login-view-container .auth-split-left {
    position: relative !important;
    isolation: isolate !important;
    display: block !important;
    overflow: hidden !important;
    padding: 0 !important;
    background:
      radial-gradient(680px 520px at 68% 48%, rgba(32, 122, 233, .13), transparent 70%),
      linear-gradient(130deg, rgba(6, 23, 55, .72) 0%, rgba(7, 20, 47, .34) 54%, rgba(7, 15, 33, .08) 100%) !important;
  }

  #app .login-view-container .auth-split-left::before {
    content: "" !important;
    position: absolute !important;
    z-index: 0 !important;
    top: 48% !important;
    left: 64% !important;
    width: min(51vw, 770px) !important;
    height: min(51vw, 770px) !important;
    border: 1px solid rgba(133, 211, 255, .22) !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    opacity: 1 !important;
    filter: none !important;
    -webkit-mask: none !important;
    mask: none !important;
    background:
      radial-gradient(circle at 31% 27%, rgba(201, 244, 255, .65) 0 .5%, transparent 1.2%),
      radial-gradient(circle at 66% 31%, rgba(113, 205, 255, .52) 0 .55%, transparent 1.25%),
      radial-gradient(circle at 73% 62%, rgba(137, 120, 255, .42) 0 .45%, transparent 1.1%),
      radial-gradient(circle at 41% 75%, rgba(77, 199, 255, .46) 0 .45%, transparent 1.1%),
      radial-gradient(circle at 37% 30%, rgba(104, 220, 255, .30), transparent 28%),
      radial-gradient(circle at 62% 67%, rgba(112, 102, 255, .16), transparent 30%),
      radial-gradient(circle at 50% 50%, rgba(8, 42, 96, .10) 0 31%, rgba(11, 55, 122, .80) 49%, rgba(6, 28, 72, .91) 67%, rgba(5, 16, 42, .24) 72%, transparent 73%) !important;
    box-shadow:
      inset -58px -48px 110px rgba(1, 7, 26, .76),
      inset 24px 22px 72px rgba(149, 225, 255, .15),
      0 0 0 1px rgba(170, 231, 255, .06),
      0 0 92px rgba(49, 149, 255, .20),
      0 0 180px rgba(81, 82, 226, .12) !important;
    transform: translate3d(-50%, -50%, 0) !important;
    animation: k2-orbital-core-drift 16s cubic-bezier(.45, 0, .22, 1) infinite alternate !important;
  }

  #app .login-view-container .auth-split-left::after {
    content: "" !important;
    position: absolute !important;
    z-index: 1 !important;
    top: 48% !important;
    left: 64% !important;
    width: min(58vw, 880px) !important;
    height: min(35vw, 530px) !important;
    border: 1px solid rgba(142, 210, 255, .32) !important;
    border-top-color: rgba(159, 225, 255, .60) !important;
    border-left-color: transparent !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    opacity: .84 !important;
    background:
      radial-gradient(circle at 8% 50%, #8ee7ff 0 2px, transparent 3px),
      radial-gradient(circle at 28% 9%, #8d7aff 0 2px, transparent 3px),
      radial-gradient(circle at 73% 8%, #5edbff 0 2px, transparent 3px),
      radial-gradient(circle at 94% 52%, #9f8dff 0 2px, transparent 3px),
      radial-gradient(circle at 66% 93%, #72dcff 0 2px, transparent 3px),
      radial-gradient(circle at 23% 85%, #7eafff 0 2px, transparent 3px) !important;
    box-shadow:
      0 0 0 48px rgba(96, 142, 255, .022),
      0 0 0 104px rgba(83, 114, 241, .014),
      0 0 52px rgba(77, 185, 255, .13) !important;
    transform: translate3d(-50%, -50%, 0) rotate(-13deg) !important;
    animation: k2-orbital-ring-sweep 26s linear infinite !important;
  }

  #app .login-view-container .auth-split-left .site-name {
    z-index: 4 !important;
  }

  #app .login-view-container .auth-split-left .left-content-overlay {
    position: absolute !important;
    z-index: 3 !important;
    top: 50% !important;
    left: clamp(56px, 5.3vw, 122px) !important;
    bottom: auto !important;
    width: min(410px, 36%) !important;
    max-width: 410px !important;
    margin: 0 !important;
    transform: translate3d(0, -50%, 0) !important;
  }

  #app .login-view-container .auth-split-left .greeting-text {
    max-width: 390px !important;
    font-size: clamp(48px, 4.35vw, 76px) !important;
    font-weight: 730 !important;
    line-height: .98 !important;
    letter-spacing: -.065em !important;
    text-shadow: 0 16px 48px rgba(1, 9, 29, .58) !important;
  }

  #app .login-view-container .auth-split-left .greeting-text + * {
    max-width: 330px !important;
    margin-top: 20px !important;
    color: rgba(210, 230, 255, .78) !important;
    font-size: 14px !important;
    line-height: 1.72 !important;
  }

  #app .login-view-container .auth-split-left .left-content-overlay::after {
    content: "SECURE EDGE  /  REAL-TIME ROUTING" !important;
    margin-top: 24px !important;
    color: rgba(175, 226, 255, .88) !important;
    background: rgba(7, 28, 63, .42) !important;
    border-color: rgba(125, 213, 255, .24) !important;
    animation: k2-quiet-status 6s ease-in-out infinite !important;
  }

  #app .login-view-container .auth-form-container .third-party-login,
  #app .login-view-container .auth-form-container .third-party-login .btn {
    position: relative !important;
    z-index: 8 !important;
    pointer-events: auto !important;
    cursor: pointer !important;
  }
}

@keyframes k2-orbital-core-drift {
  from { transform: translate3d(-50%, -50%, 0) scale(.975); }
  to { transform: translate3d(-48%, -51%, 0) scale(1.025); }
}

@keyframes k2-orbital-ring-sweep {
  from { transform: translate3d(-50%, -50%, 0) rotate(-13deg); }
  to { transform: translate3d(-50%, -50%, 0) rotate(347deg); }
}

@keyframes k2-quiet-status {
  0%, 100% { opacity: .72; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(4px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #app .login-view-container .auth-split-left::before,
  #app .login-view-container .auth-split-left::after,
  #app .login-view-container .auth-split-left .left-content-overlay::after {
    animation: none !important;
  }
}


/* K2 CLOUD Login Visual System v7 — network core */
@media (min-width: 769px) {
  #app .login-view-container .auth-split-left {
    isolation: isolate;
    overflow: hidden !important;
    background:
      radial-gradient(78% 68% at 57% 44%, rgba(37, 126, 255, .15), transparent 67%),
      radial-gradient(52% 50% at 36% 78%, rgba(91, 73, 255, .12), transparent 75%),
      linear-gradient(119deg, #071a36 0%, #0a2550 47%, #071831 100%) !important;
  }

  #app .login-view-container .auth-split-left::before {
    width: min(68vw, 900px) !important;
    height: min(68vw, 900px) !important;
    left: 61% !important;
    top: 48% !important;
    border: 1px solid rgba(142, 207, 255, .23) !important;
    border-radius: 50% !important;
    opacity: 1 !important;
    background:
      radial-gradient(circle at 31% 30%, rgba(197, 233, 255, .82) 0 2px, transparent 3px),
      radial-gradient(circle at 68% 35%, rgba(105, 205, 255, .82) 0 2px, transparent 3px),
      radial-gradient(circle at 79% 65%, rgba(142, 125, 255, .88) 0 2px, transparent 3px),
      radial-gradient(circle at 37% 74%, rgba(86, 191, 244, .78) 0 2px, transparent 3px),
      repeating-radial-gradient(ellipse at 50% 50%, transparent 0 14.8%, rgba(151, 212, 255, .11) 15% 15.18%, transparent 15.42% 24.7%),
      repeating-linear-gradient(90deg, transparent 0 12.25%, rgba(157, 214, 255, .08) 12.42% 12.58%, transparent 12.8% 25%),
      radial-gradient(circle at 48% 48%, rgba(96, 184, 255, .42) 0%, rgba(38, 107, 211, .24) 24%, rgba(10, 45, 103, .34) 47%, rgba(4, 18, 43, .04) 70%) !important;
    box-shadow:
      inset -68px -42px 92px rgba(1, 9, 27, .64),
      inset 48px 42px 76px rgba(122, 197, 255, .14),
      0 0 0 1px rgba(115, 188, 255, .08),
      0 36px 96px rgba(1, 9, 31, .66) !important;
    filter: saturate(1.05) !important;
    animation: k2-network-core-float 15s ease-in-out infinite alternate !important;
  }

  #app .login-view-container .auth-split-left::after {
    width: min(77vw, 1010px) !important;
    height: min(25vw, 335px) !important;
    left: 59% !important;
    top: 48% !important;
    display: block !important;
    border: 1px solid rgba(161, 219, 255, .38) !important;
    border-left-color: rgba(161, 219, 255, .06) !important;
    border-right-color: rgba(138, 110, 255, .32) !important;
    border-radius: 50% !important;
    background:
      radial-gradient(circle at 16% 51%, rgba(167, 229, 255, .94) 0 3px, transparent 4px),
      radial-gradient(circle at 82% 49%, rgba(157, 129, 255, .94) 0 3px, transparent 4px) !important;
    box-shadow: none !important;
    filter: drop-shadow(0 0 10px rgba(77, 176, 255, .20)) !important;
    animation: k2-network-orbit 20s linear infinite !important;
  }

  #app .login-view-container .auth-split-left .left-content-overlay::after {
    content: "K2 CLOUD \00B7 GLOBAL EDGE FABRIC" !important;
    position: absolute !important;
    left: 0 !important;
    bottom: calc(100% + 22px) !important;
    z-index: 2 !important;
    color: rgba(168, 222, 255, .72) !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: .22em !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-shadow: none !important;
    animation: k2-network-signal 4.6s ease-in-out infinite !important;
  }
}

@keyframes k2-network-core-float {
  from { transform: translate3d(-50%, -50%, 0) scale(.985) rotate(-2deg); }
  to { transform: translate3d(-50%, -50%, 0) scale(1.015) rotate(2deg); }
}

@keyframes k2-network-orbit {
  from { transform: translate3d(-50%, -50%, 0) rotate(-18deg); }
  to { transform: translate3d(-50%, -50%, 0) rotate(342deg); }
}

@keyframes k2-network-signal {
  0%, 100% { opacity: .62; transform: translate3d(0, 0, 0); }
  50% { opacity: 1; transform: translate3d(7px, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
  #app .login-view-container .auth-split-left::before,
  #app .login-view-container .auth-split-left::after,
  #app .login-view-container .auth-split-left .left-content-overlay::after {
    animation: none !important;
  }
}


/* K2 CLOUD Dashboard Visual System v8 */
body.k2-dashboard-route {
  min-height: 100vh;
  color: #edf5ff !important;
  background:
    radial-gradient(900px 600px at 14% -10%, rgba(38, 122, 255, .20), transparent 72%),
    radial-gradient(700px 540px at 96% 12%, rgba(133, 91, 255, .14), transparent 70%),
    #08111f !important;
}
body.k2-dashboard-route::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .26;
  background-image: linear-gradient(rgba(150, 196, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 196, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: linear-gradient(to bottom, black, transparent 78%);
}
body.k2-dashboard-route [data-k2-dashboard-shell] {
  width: min(1440px, calc(100% - 48px)) !important;
  min-height: min(760px, calc(100vh - 56px));
  margin: 28px auto 72px !important;
  padding: 28px !important;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(143, 187, 255, .18) !important;
  border-radius: 28px !important;
  background: linear-gradient(135deg, rgba(15, 36, 74, .90), rgba(8, 18, 39, .82) 58%, rgba(16, 21, 56, .86)) !important;
  box-shadow: 0 28px 86px rgba(0, 4, 18, .38), inset 0 1px rgba(255, 255, 255, .07) !important;
}
body.k2-dashboard-route [data-k2-dashboard-shell]::before {
  content: "";
  position: absolute;
  width: 420px;
  height: 420px;
  right: -210px;
  top: -240px;
  pointer-events: none;
  border: 1px solid rgba(115, 183, 255, .15);
  border-radius: 50%;
  box-shadow: 0 0 0 54px rgba(115, 183, 255, .025), 0 0 0 108px rgba(115, 183, 255, .018);
}
body.k2-dashboard-route [data-k2-dashboard-welcome],
body.k2-dashboard-route [data-k2-dashboard-plan],
body.k2-dashboard-route [data-k2-dashboard-clients] {
  position: relative;
  border: 1px solid rgba(154, 196, 255, .16) !important;
  border-radius: 20px !important;
  background: linear-gradient(145deg, rgba(27, 58, 111, .72), rgba(12, 27, 57, .78)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .055), 0 12px 30px rgba(1, 10, 31, .16) !important;
}
body.k2-dashboard-route [data-k2-dashboard-welcome] {
  padding: 28px 32px !important;
  overflow: hidden;
  background: linear-gradient(108deg, rgba(29, 108, 220, .42), rgba(24, 54, 113, .74) 52%, rgba(53, 39, 115, .62)) !important;
}
body.k2-dashboard-route [data-k2-dashboard-welcome]::after {
  content: "K2 CLOUD  /  ACCOUNT OVERVIEW";
  position: absolute;
  right: 26px;
  top: 24px;
  color: rgba(187, 224, 255, .58);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
}
body.k2-dashboard-route [data-k2-dashboard-plan] {
  padding: 26px 28px !important;
  margin-top: 22px !important;
}
body.k2-dashboard-route [data-k2-dashboard-stat] {
  min-height: 112px;
  padding: 20px 22px !important;
  border: 1px solid rgba(145, 187, 255, .14) !important;
  border-radius: 18px !important;
  background: rgba(16, 37, 75, .68) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
body.k2-dashboard-route [data-k2-dashboard-stat]:hover,
body.k2-dashboard-route [data-k2-dashboard-client]:hover {
  transform: translateY(-3px);
  border-color: rgba(111, 188, 255, .42) !important;
  background: rgba(26, 58, 112, .78) !important;
}
body.k2-dashboard-route [data-k2-dashboard-client] {
  min-height: 132px;
  padding: 18px !important;
  border: 1px solid rgba(145, 187, 255, .13) !important;
  border-radius: 16px !important;
  background: linear-gradient(145deg, rgba(21, 47, 91, .68), rgba(10, 25, 53, .72)) !important;
  box-shadow: inset 0 1px rgba(255, 255, 255, .045) !important;
  transition: transform .2s ease, border-color .2s ease, background .2s ease;
}
body.k2-dashboard-route [data-k2-dashboard-shell] button,
body.k2-dashboard-route [data-k2-dashboard-shell] [role="button"] {
  min-height: 40px;
  border-radius: 12px !important;
  border-color: rgba(138, 190, 255, .28) !important;
  box-shadow: none !important;
}
body.k2-dashboard-route [data-k2-dashboard-shell] button:hover,
body.k2-dashboard-route [data-k2-dashboard-shell] [role="button"]:hover { border-color: rgba(126, 194, 255, .62) !important; }
@media (max-width: 820px) {
  body.k2-dashboard-route [data-k2-dashboard-shell] { width: calc(100% - 24px) !important; min-height: 0; margin: 12px auto 40px !important; padding: 14px !important; border-radius: 20px !important; }
  body.k2-dashboard-route [data-k2-dashboard-welcome], body.k2-dashboard-route [data-k2-dashboard-plan], body.k2-dashboard-route [data-k2-dashboard-clients] { border-radius: 16px !important; }
  body.k2-dashboard-route [data-k2-dashboard-welcome]::after { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  body.k2-dashboard-route [data-k2-dashboard-stat], body.k2-dashboard-route [data-k2-dashboard-client] { transition: none !important; }
}


/* ========================================================================
   K2 CLOUD / Frameless Console System v9
   Purpose: remove nested card chrome; create a calm, high-end operations UI.
   Scoped to the dashboard so the landing page and all existing functions stay intact.
   ======================================================================== */
body.k2-dashboard-route {
  --k2-console-canvas: #070b16;
  --k2-console-surface: rgba(15, 25, 47, .38);
  --k2-console-line: rgba(164, 186, 235, .15);
  --k2-console-line-soft: rgba(164, 186, 235, .09);
  --k2-console-text: rgba(246, 249, 255, .98);
  --k2-console-muted: rgba(190, 204, 234, .66);
  --k2-console-accent: #73a6ff;
  --k2-console-cyan: #68e5db;
  background:
    radial-gradient(920px 540px at 78% -12%, rgba(55, 103, 237, .15), transparent 67%),
    radial-gradient(760px 450px at -8% 35%, rgba(35, 194, 186, .07), transparent 70%),
    var(--k2-console-canvas) !important;
}

/* The main dashboard becomes a content canvas instead of a floating card. */
body.k2-dashboard-route [data-k2-dashboard-shell] {
  width: min(1480px, calc(100% - 64px)) !important;
  max-width: 1480px !important;
  min-height: 0 !important;
  margin: 0 auto !important;
  padding: 28px 0 72px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.k2-dashboard-route [data-k2-dashboard-shell] > .el-card__body,
body.k2-dashboard-route [data-k2-dashboard-shell] .el-card__body {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Eliminate the repeated card/window treatment inside the dashboard. */
body.k2-dashboard-route [data-k2-dashboard-shell] .el-card,
body.k2-dashboard-route [data-k2-dashboard-shell] .el-card.is-always-shadow,
body.k2-dashboard-route [data-k2-dashboard-shell] .el-card.is-hover-shadow,
body.k2-dashboard-route [data-k2-dashboard-shell] [class*="card"],
body.k2-dashboard-route [data-k2-dashboard-shell] [class*="panel"] {
  border-color: transparent !important;
  box-shadow: none !important;
}

body.k2-dashboard-route [data-k2-dashboard-shell] .el-card,
body.k2-dashboard-route [data-k2-dashboard-shell] [class*="card"] {
  background: transparent !important;
  border-width: 0 !important;
  border-radius: 0 !important;
}

/* Welcome area: an editorial hero, not a bordered module. */
body.k2-dashboard-route [data-k2-dashboard-welcome] {
  position: relative !important;
  isolation: isolate !important;
  margin: 0 0 28px !important;
  padding: 24px 0 34px !important;
  background: linear-gradient(104deg, rgba(80, 132, 255, .13), rgba(34, 61, 127, .05) 48%, transparent 78%) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--k2-console-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.k2-dashboard-route [data-k2-dashboard-welcome]::before {
  content: "" !important;
  position: absolute !important;
  z-index: -1 !important;
  width: 190px !important;
  height: 190px !important;
  right: 8% !important;
  top: -64px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(107, 160, 255, .24), rgba(107, 160, 255, 0) 68%) !important;
  filter: blur(4px) !important;
  pointer-events: none !important;
}

body.k2-dashboard-route [data-k2-dashboard-welcome] > .el-card__body {
  padding: 0 32px !important;
}

body.k2-dashboard-route [data-k2-dashboard-welcome] h1,
body.k2-dashboard-route [data-k2-dashboard-welcome] h2,
body.k2-dashboard-route [data-k2-dashboard-welcome] .title {
  margin: 0 !important;
  color: var(--k2-console-text) !important;
  font-size: clamp(28px, 2.15vw, 36px) !important;
  font-weight: 700 !important;
  letter-spacing: -.035em !important;
  line-height: 1.12 !important;
  text-shadow: none !important;
}

body.k2-dashboard-route [data-k2-dashboard-welcome] p,
body.k2-dashboard-route [data-k2-dashboard-welcome] .subtitle,
body.k2-dashboard-route [data-k2-dashboard-welcome] .description {
  max-width: 650px !important;
  margin-top: 10px !important;
  color: var(--k2-console-muted) !important;
  font-size: 14px !important;
  line-height: 1.75 !important;
}

/* Plan information reads as a service strip, with no enclosing rectangle. */
body.k2-dashboard-route [data-k2-dashboard-plan] {
  position: relative !important;
  margin: 0 0 22px !important;
  padding: 28px 34px 28px 38px !important;
  background: linear-gradient(90deg, rgba(32, 66, 132, .36), rgba(21, 38, 76, .17) 52%, transparent 100%) !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.k2-dashboard-route [data-k2-dashboard-plan]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 28px !important;
  bottom: 28px !important;
  width: 3px !important;
  border-radius: 99px !important;
  background: linear-gradient(180deg, var(--k2-console-cyan), var(--k2-console-accent)) !important;
  box-shadow: 0 0 20px rgba(102, 174, 255, .34) !important;
}

body.k2-dashboard-route [data-k2-dashboard-plan] > .el-card__body {
  padding: 0 !important;
}

body.k2-dashboard-route [data-k2-dashboard-plan] h2,
body.k2-dashboard-route [data-k2-dashboard-plan] h3,
body.k2-dashboard-route [data-k2-dashboard-plan] .title,
body.k2-dashboard-route [data-k2-dashboard-clients] h2,
body.k2-dashboard-route [data-k2-dashboard-clients] h3,
body.k2-dashboard-route [data-k2-dashboard-clients] .title {
  color: var(--k2-console-text) !important;
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: -.01em !important;
}

body.k2-dashboard-route [data-k2-dashboard-plan] [class*="label"],
body.k2-dashboard-route [data-k2-dashboard-plan] [class*="meta"],
body.k2-dashboard-route [data-k2-dashboard-plan] small {
  color: var(--k2-console-muted) !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
}

/* One clearly primary action, the rest use quiet, compact controls. */
body.k2-dashboard-route [data-k2-dashboard-shell] .el-button,
body.k2-dashboard-route [data-k2-dashboard-shell] button,
body.k2-dashboard-route [data-k2-dashboard-shell] [role="button"] {
  min-height: 42px !important;
  border-radius: 10px !important;
  border: 1px solid rgba(151, 183, 244, .22) !important;
  background: rgba(35, 57, 102, .22) !important;
  color: rgba(240, 246, 255, .92) !important;
  box-shadow: none !important;
  transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease !important;
}

body.k2-dashboard-route [data-k2-dashboard-plan] .el-button--primary,
body.k2-dashboard-route [data-k2-dashboard-plan] button.el-button--primary,
body.k2-dashboard-route [data-k2-dashboard-plan] [data-k2-primary-action] {
  border-color: transparent !important;
  background: linear-gradient(118deg, #4d83ee, #70a2ff) !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(64, 114, 231, .22) !important;
}

body.k2-dashboard-route [data-k2-dashboard-shell] .el-button:hover,
body.k2-dashboard-route [data-k2-dashboard-shell] button:hover,
body.k2-dashboard-route [data-k2-dashboard-shell] [role="button"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(139, 184, 255, .62) !important;
  background: rgba(67, 104, 174, .34) !important;
}

body.k2-dashboard-route [data-k2-dashboard-shell] .el-button:focus-visible,
body.k2-dashboard-route [data-k2-dashboard-shell] button:focus-visible,
body.k2-dashboard-route [data-k2-dashboard-shell] [role="button"]:focus-visible {
  outline: 2px solid rgba(112, 162, 255, .96) !important;
  outline-offset: 3px !important;
}

/* Summary statistics become a calm, aligned data rail rather than four cards. */
body.k2-dashboard-route [data-k2-dashboard-stat] {
  position: relative !important;
  min-height: 126px !important;
  padding: 24px 28px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  overflow: visible !important;
}

body.k2-dashboard-route [data-k2-dashboard-stat] + [data-k2-dashboard-stat]::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 22px !important;
  bottom: 22px !important;
  width: 1px !important;
  background: var(--k2-console-line) !important;
}

body.k2-dashboard-route [data-k2-dashboard-stat] > .el-card__body {
  padding: 0 !important;
}

body.k2-dashboard-route [data-k2-dashboard-stat] [class*="value"],
body.k2-dashboard-route [data-k2-dashboard-stat] [class*="number"],
body.k2-dashboard-route [data-k2-dashboard-stat] strong {
  color: var(--k2-console-text) !important;
  font-size: clamp(24px, 1.85vw, 32px) !important;
  font-weight: 680 !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -.04em !important;
  line-height: 1.15 !important;
}

body.k2-dashboard-route [data-k2-dashboard-stat] [class*="label"],
body.k2-dashboard-route [data-k2-dashboard-stat] [class*="title"],
body.k2-dashboard-route [data-k2-dashboard-stat] small {
  color: var(--k2-console-muted) !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  letter-spacing: .04em !important;
  text-transform: none !important;
}

body.k2-dashboard-route [data-k2-dashboard-stat]:first-child [class*="value"],
body.k2-dashboard-route [data-k2-dashboard-stat]:first-child [class*="number"],
body.k2-dashboard-route [data-k2-dashboard-stat]:first-child strong {
  color: #ffd081 !important;
}

/* Client downloads are a borderless, evenly spaced icon grid. */
body.k2-dashboard-route [data-k2-dashboard-clients] {
  position: relative !important;
  margin: 38px 0 0 !important;
  padding: 30px 0 0 !important;
  background: transparent !important;
  border: 0 !important;
  border-top: 1px solid var(--k2-console-line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

body.k2-dashboard-route [data-k2-dashboard-clients] > .el-card__body {
  padding: 0 !important;
}

body.k2-dashboard-route [data-k2-dashboard-clients] p,
body.k2-dashboard-route [data-k2-dashboard-clients] .description {
  margin: 8px 0 22px !important;
  color: var(--k2-console-muted) !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
}

body.k2-dashboard-route [data-k2-dashboard-client] {
  position: relative !important;
  display: flex !important;
  min-height: 92px !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 16px 14px !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  transition: transform .2s ease, background-color .2s ease !important;
}

body.k2-dashboard-route [data-k2-dashboard-client]::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px 0 !important;
  z-index: -1 !important;
  border-radius: 12px !important;
  background: linear-gradient(135deg, rgba(67, 111, 202, .16), rgba(67, 111, 202, 0)) !important;
  opacity: 0 !important;
  transition: opacity .2s ease !important;
}

body.k2-dashboard-route [data-k2-dashboard-client]:hover {
  transform: translateY(-2px) !important;
}

body.k2-dashboard-route [data-k2-dashboard-client]:hover::before {
  opacity: 1 !important;
}

body.k2-dashboard-route [data-k2-dashboard-client] img,
body.k2-dashboard-route [data-k2-dashboard-client] svg,
body.k2-dashboard-route [data-k2-dashboard-client] [class*="icon"] {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  max-height: 34px !important;
  object-fit: contain !important;
  color: var(--k2-console-cyan) !important;
}

body.k2-dashboard-route [data-k2-dashboard-client] [class*="name"],
body.k2-dashboard-route [data-k2-dashboard-client] strong {
  color: rgba(244, 248, 255, .94) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
}

body.k2-dashboard-route [data-k2-dashboard-client] [class*="desc"],
body.k2-dashboard-route [data-k2-dashboard-client] small {
  color: var(--k2-console-muted) !important;
  font-size: 12px !important;
}

/* Never let the responsive experience fall back to horizontally clipped cards. */
@media (max-width: 960px) {
  body.k2-dashboard-route [data-k2-dashboard-shell] {
    width: min(100% - 32px, 760px) !important;
    padding: 18px 0 48px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-welcome] > .el-card__body {
    padding: 0 20px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-plan] {
    padding: 24px 20px 24px 26px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-stat] {
    min-height: 0 !important;
    padding: 20px 18px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-stat] + [data-k2-dashboard-stat]::before {
    top: 18px !important;
    bottom: 18px !important;
  }
}

@media (max-width: 640px) {
  body.k2-dashboard-route [data-k2-dashboard-shell] {
    width: calc(100% - 24px) !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-welcome] {
    margin-bottom: 18px !important;
    padding: 20px 0 26px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-welcome] h1,
  body.k2-dashboard-route [data-k2-dashboard-welcome] h2 {
    font-size: 27px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-plan] {
    margin-bottom: 12px !important;
    padding: 22px 16px 22px 22px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-stat] {
    padding: 18px 16px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-stat] + [data-k2-dashboard-stat]::before {
    left: 16px !important;
    right: 16px !important;
    top: 0 !important;
    bottom: auto !important;
    width: auto !important;
    height: 1px !important;
  }

  body.k2-dashboard-route [data-k2-dashboard-client] {
    min-height: 78px !important;
    padding: 13px 10px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.k2-dashboard-route [data-k2-dashboard-shell] *,
  body.k2-dashboard-route [data-k2-dashboard-shell] *::before,
  body.k2-dashboard-route [data-k2-dashboard-shell] *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* K2 Unified Transit Console v20 — single-surface dashboard system */
.main-board.k2-unified-console{
  --k2-ink:#eaf5ff;
  --k2-muted:rgba(188,210,229,.68);
  --k2-rule:rgba(139,205,244,.15);
  --k2-rule-strong:rgba(97,211,255,.48);
  --k2-accent:#62d3ff;
  --k2-void:#071421;
  color:var(--k2-ink) !important;
}
.main-board.k2-unified-console .content-area{
  width:min(100% - 48px,1240px) !important;
  max-width:1240px !important;
  min-height:0 !important;
  margin:24px auto 48px !important;
  padding:28px 32px 36px !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.main-board.k2-unified-console [class*="card"],
.main-board.k2-unified-console [class*="Card"],
.main-board.k2-unified-console .el-card,
.main-board.k2-unified-console .ant-card,
.main-board.k2-unified-console .n-card,
.main-board.k2-unified-console .card-container,
.main-board.k2-unified-console .panel-container{
  background:transparent !important;
  background-image:none !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.main-board.k2-unified-console [class*="card"]::before,
.main-board.k2-unified-console [class*="card"]::after,
.main-board.k2-unified-console [class*="Card"]::before,
.main-board.k2-unified-console [class*="Card"]::after,
.main-board.k2-unified-console .el-card::before,
.main-board.k2-unified-console .el-card::after{
  background:none !important;
  background-image:none !important;
  box-shadow:none !important;
  clip-path:none !important;
}
.main-board.k2-unified-console .card-header,
.main-board.k2-unified-console .panel-header,
.main-board.k2-unified-console .section-header,
.main-board.k2-unified-console .table-header,
.main-board.k2-unified-console [class*="page-header"],
.main-board.k2-unified-console [class*="PageHeader"]{
  position:relative !important;
  padding:0 0 18px !important;
  margin:0 0 22px !important;
  background:transparent !important;
  border:0 !important;
  border-bottom:1px solid var(--k2-rule) !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console .card-header::after,
.main-board.k2-unified-console .panel-header::after,
.main-board.k2-unified-console .section-header::after,
.main-board.k2-unified-console .table-header::after,
.main-board.k2-unified-console [class*="page-header"]::after,
.main-board.k2-unified-console [class*="PageHeader"]::after{
  content:"" !important;
  position:absolute !important;
  display:block !important;
  left:0 !important;
  bottom:-1px !important;
  width:42px !important;
  height:2px !important;
  background:linear-gradient(90deg,var(--k2-accent),transparent) !important;
  box-shadow:0 0 14px rgba(98,211,255,.32) !important;
}
.main-board.k2-unified-console .dashboard-card,
.main-board.k2-unified-console .stats-card,
.main-board.k2-unified-console .profile-card,
.main-board.k2-unified-console .wallet-card,
.main-board.k2-unified-console .invite-card,
.main-board.k2-unified-console .traffic-card,
.main-board.k2-unified-console .server-card,
.main-board.k2-unified-console .document-card,
.main-board.k2-unified-console .content-card,
.main-board.k2-unified-console .order-card,
.main-board.k2-unified-console .ticket-card,
.main-board.k2-unified-console .notice-card,
.main-board.k2-unified-console .info-card{
  border-bottom:1px solid var(--k2-rule) !important;
}
.main-board.k2-unified-console .dashboard-card:hover,
.main-board.k2-unified-console .stats-card:hover,
.main-board.k2-unified-console .profile-card:hover,
.main-board.k2-unified-console .wallet-card:hover,
.main-board.k2-unified-console .invite-card:hover,
.main-board.k2-unified-console .traffic-card:hover,
.main-board.k2-unified-console .server-card:hover,
.main-board.k2-unified-console .document-card:hover,
.main-board.k2-unified-console .content-card:hover,
.main-board.k2-unified-console .order-card:hover,
.main-board.k2-unified-console .ticket-card:hover{
  transform:none !important;
  border-bottom-color:var(--k2-rule-strong) !important;
  box-shadow:inset 3px 0 0 rgba(98,211,255,.62) !important;
}
.main-board.k2-unified-console [class*="stats-grid"] > *,
.main-board.k2-unified-console [class*="overview"] > *,
.main-board.k2-unified-console [class*="metric"] > *{
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console [class*="stats-grid"] > * + *,
.main-board.k2-unified-console [class*="overview"] > * + *,
.main-board.k2-unified-console [class*="metric"] > * + *{
  border-left:1px solid var(--k2-rule) !important;
}
.main-board.k2-unified-console button,
.main-board.k2-unified-console .el-button,
.main-board.k2-unified-console .ant-btn,
.main-board.k2-unified-console .n-button{
  border-radius:9px !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console .el-button--primary,
.main-board.k2-unified-console .ant-btn-primary,
.main-board.k2-unified-console .n-button--primary,
.main-board.k2-unified-console button[class*="primary"]{
  color:#04111c !important;
  border-color:transparent !important;
  background:linear-gradient(110deg,#6de0ff,#65bfff) !important;
  box-shadow:0 8px 20px rgba(69,191,255,.16) !important;
}
.main-board.k2-unified-console input,
.main-board.k2-unified-console textarea,
.main-board.k2-unified-console .el-input__inner,
.main-board.k2-unified-console .ant-input,
.main-board.k2-unified-console .n-input__input-el{
  background:rgba(5,17,29,.76) !important;
  border-color:rgba(138,205,244,.20) !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console input:focus,
.main-board.k2-unified-console textarea:focus,
.main-board.k2-unified-console .el-input__inner:focus,
.main-board.k2-unified-console .ant-input:focus{
  border-color:var(--k2-rule-strong) !important;
  box-shadow:0 0 0 3px rgba(98,211,255,.10) !important;
}
.main-board.k2-unified-console [class*="sidebar"],
.main-board.k2-unified-console [class*="side-menu"],
.main-board.k2-unified-console .menu-container{
  background:rgba(5,16,29,.42) !important;
  border-right:1px solid var(--k2-rule) !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:blur(14px) !important;
  backdrop-filter:blur(14px) !important;
}
.main-board.k2-unified-console [class*="nav-item"],
.main-board.k2-unified-console [class*="menu-item"],
.main-board.k2-unified-console .el-menu-item{
  border-radius:8px !important;
  box-shadow:none !important;
  transition:background-color .18s ease,color .18s ease !important;
}
.main-board.k2-unified-console [class*="nav-item"]:hover,
.main-board.k2-unified-console [class*="menu-item"]:hover,
.main-board.k2-unified-console .el-menu-item:hover{
  transform:none !important;
  background:rgba(98,211,255,.10) !important;
}
.main-board.k2-unified-console[data-k2-route="shop"] .shop-card,
.main-board.k2-unified-console[data-k2-route="shop"] .plan-card{
  position:relative !important;
  overflow:hidden !important;
  background:linear-gradient(145deg,rgba(17,45,69,.90),rgba(7,18,31,.96)) !important;
  border:1px solid rgba(98,211,255,.22) !important;
  border-radius:14px !important;
  box-shadow:inset 0 1px 0 rgba(225,247,255,.06),0 14px 32px rgba(0,0,0,.14) !important;
}
.main-board.k2-unified-console[data-k2-route="shop"] .shop-card > [class*="card"],
.main-board.k2-unified-console[data-k2-route="shop"] .plan-card > [class*="card"],
.main-board.k2-unified-console[data-k2-route="shop"] .shop-card .el-card,
.main-board.k2-unified-console[data-k2-route="shop"] .plan-card .el-card{
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console[data-k2-route="tutorial"] .content-area{
  max-width:1180px !important;
  min-height:0 !important;
  padding-top:24px !important;
}
.main-board.k2-unified-console[data-k2-route="tutorial"] .document-card,
.main-board.k2-unified-console[data-k2-route="tutorial"] [class*="tutorial"],
.main-board.k2-unified-console[data-k2-route="tutorial"] [class*="guide"],
.main-board.k2-unified-console[data-k2-route="tutorial"] [class*="knowledge"]{
  min-height:0 !important;
  height:auto !important;
  max-width:none !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console[data-k2-route="tutorial"] [class*="tutorial"] + [class*="tutorial"],
.main-board.k2-unified-console[data-k2-route="tutorial"] [class*="guide"] + [class*="guide"],
.main-board.k2-unified-console[data-k2-route="tutorial"] .document-card + .document-card{
  border-top:1px solid var(--k2-rule) !important;
}
.main-board.k2-unified-console[data-k2-route="invite"] .invite-card,
.main-board.k2-unified-console[data-k2-route="more"] .content-card{
  min-height:0 !important;
  background:transparent !important;
  border-color:transparent !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console .el-table,
.main-board.k2-unified-console .ant-table,
.main-board.k2-unified-console .n-data-table{
  background:transparent !important;
  border-color:var(--k2-rule) !important;
  box-shadow:none !important;
}
.main-board.k2-unified-console .el-table::before,
.main-board.k2-unified-console .ant-table::before{display:none !important;}
.main-board.k2-unified-console .el-table th,
.main-board.k2-unified-console .el-table tr,
.main-board.k2-unified-console .el-table td,
.main-board.k2-unified-console .ant-table-thead > tr > th,
.main-board.k2-unified-console .ant-table-tbody > tr > td{
  background:transparent !important;
  border-color:var(--k2-rule) !important;
}
.main-board.k2-unified-console button:focus-visible,
.main-board.k2-unified-console a:focus-visible,
.main-board.k2-unified-console input:focus-visible{outline:2px solid var(--k2-accent) !important;outline-offset:3px !important;}
@media(max-width:860px){
  .main-board.k2-unified-console .content-area{width:100% !important;margin:0 !important;padding:22px 18px 30px !important;}
  .main-board.k2-unified-console [class*="stats-grid"] > * + *,
  .main-board.k2-unified-console [class*="overview"] > * + *,
  .main-board.k2-unified-console [class*="metric"] > * + *{border-left:0 !important;border-top:1px solid var(--k2-rule) !important;}
}
@media(prefers-reduced-motion:reduce){.main-board.k2-unified-console *, .main-board.k2-unified-console *::before, .main-board.k2-unified-console *::after{animation-duration:.01ms !important;transition-duration:.01ms !important;animation-iteration-count:1 !important;}}


/* ===== k2-unified-ring-v1 =====
   Unified brand mark: blue backlit ring, sampled from
   .auth-split-left .site-name::before (23px / #83e9ff / dual glow).
   Original <img> kept in DOM, hidden visually only. */
#app .static-layout .site-logo .site-logo-img,
.static-layout .site-logo .site-logo-img { display: none !important; }
#app .static-layout .site-logo::before,
.static-layout .site-logo::before {
  content: "" !important; width: 23px !important; height: 23px !important;
  flex: 0 0 23px !important; border: 1px solid #83e9ff !important;
  border-radius: 50% !important; background: none !important;
  box-shadow: 0 0 18px rgba(104,220,255,.58), inset 0 0 12px rgba(119,156,255,.28) !important;
}
#app .auth-container .auth-logo img,
.auth-container .auth-logo img { display: none !important; }
#app .auth-container .auth-logo,
.auth-container .auth-logo { border: 0 !important; background: none !important; box-shadow: none !important; }
#app .auth-container .auth-logo::before,
.auth-container .auth-logo::before {
  content: "" !important; width: 38px !important; height: 38px !important;
  border: 1px solid #83e9ff !important; border-radius: 50% !important;
  background: none !important;
  box-shadow: 0 0 26px rgba(104,220,255,.58), inset 0 0 18px rgba(119,156,255,.28) !important;
}

/* ===== k2-unified-ring-v2 =====
   Fix v1: card logo lives in .login-view-container .auth-split-right,
   v1 targeted only .auth-container so #app-prefixed rules won over it.
   Also unify top-left site-name ring to 23px on both login and register. */

#app .login-view-container .auth-split-right .auth-logo img,
#app .auth-container .auth-logo img,
.auth-split-right .auth-logo img,
.auth-container .auth-logo img { display: none !important; }
#app .login-view-container .auth-split-right .auth-logo,
#app .auth-container .auth-logo,
.auth-split-right .auth-logo,
.auth-container .auth-logo {
  width: 38px !important; height: 38px !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
  display: grid !important; place-items: center !important;
}
#app .login-view-container .auth-split-right .auth-logo::before,
#app .auth-container .auth-logo::before,
.auth-split-right .auth-logo::before,
.auth-container .auth-logo::before {
  content: "" !important; width: 38px !important; height: 38px !important;
  border: 1px solid #83e9ff !important; border-radius: 50% !important;
  background: none !important;
  box-shadow: 0 0 26px rgba(104,220,255,.58), inset 0 0 18px rgba(119,156,255,.28) !important;
}

#app .login-view-container .auth-split-left .site-name::before,
body:has(.auth-split-container) .auth-split-left .site-name::before,
.auth-split-left .site-name::before {
  content: "" !important; width: 23px !important; height: 23px !important;
  flex: 0 0 23px !important;
  border: 1px solid #83e9ff !important; border-radius: 50% !important;
  background: none !important; animation: none !important;
  box-shadow: 0 0 18px rgba(104,220,255,.58), inset 0 0 12px rgba(119,156,255,.28) !important;
}
#app .login-view-container .auth-split-left .site-name,
body:has(.auth-split-container) .auth-split-left .site-name,
.auth-split-left .site-name {
  gap: 12px !important; padding: 11px 16px 11px 13px !important;
  border-radius: 16px !important; font-size: 14px !important;
  font-weight: 720 !important; letter-spacing: .08em !important;
}

/* ===== k2-invite-carousel-v1 =====
   Upstream EZ-THEME-R renders the invite codes as a 3D deck: .prev/.next
   cards hang at translateX(+-60%) with opacity .7 and get clipped by the
   wrapper overflow, which on a dark bg reads as a broken split layout.
   Switch to a plain single-card carousel: full width, only .active visible,
   arrows sit outside the card. Nav logic (selectedCodeIndex) untouched. */

.invite-codes-wrapper .invite-cards-container {
  margin: 22px 0 16px !important;
  padding: 0 !important;
  gap: 10px !important;
}
.invite-codes-wrapper .invite-cards-wrapper {
  max-width: none !important;
  width: 100% !important;
  perspective: none !important;
  overflow: hidden !important;
}
.invite-codes-wrapper .invite-cards {
  height: auto !important;
  min-height: 132px !important;
  display: block !important;
  position: relative !important;
}
.invite-codes-wrapper .invite-card {
  position: absolute !important;
  top: 0 !important; left: 0 !important; right: 0 !important;
  width: 100% !important;
  height: auto !important;
  transform: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity .28s ease !important;
}
.invite-codes-wrapper .invite-card.active {
  position: relative !important;
  transform: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  z-index: 3 !important;
}
.invite-codes-wrapper .invite-card-inner {
  min-height: 132px !important;
  height: auto !important;
}
.invite-codes-wrapper .invite-cards-nav {
  position: static !important;
  flex: 0 0 36px !important;
}
@media (max-width: 860px) {
  .invite-codes-wrapper .invite-cards-container { gap: 6px !important; }
  .invite-codes-wrapper .invite-cards-nav { flex: 0 0 30px !important; width: 30px !important; height: 30px !important; }
  .invite-codes-wrapper .invite-cards { min-height: 148px !important; }
  .invite-codes-wrapper .invite-card-inner { min-height: 148px !important; padding: 16px !important; }
}

/* ===== k2-traffic-table-scroll-v1 =====
   Traffic log table has 6 columns and overflows on phones with no way to
   reach the right-hand ones. Give the container its own horizontal scroll
   (momentum on iOS) and stop cells from wrapping into unreadable stacks.
   Desktop layout is untouched: rules are inside a max-width query. */

@media (max-width: 860px) {
  .traffic-table-container {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-x: contain !important;
    touch-action: pan-x pan-y !important;
    max-width: 100% !important;
    scrollbar-width: thin !important;
    scrollbar-color: rgba(131,233,255,.35) transparent !important;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%) !important;
            mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 10px), transparent 100%) !important;
  }
  .traffic-table-container::-webkit-scrollbar { height: 6px !important; }
  .traffic-table-container::-webkit-scrollbar-track { background: rgba(255,255,255,.05) !important; border-radius: 3px !important; }
  .traffic-table-container::-webkit-scrollbar-thumb { background: rgba(131,233,255,.4) !important; border-radius: 3px !important; }
  .traffic-table-container .traffic-table {
    min-width: 620px !important;
    width: auto !important;
    table-layout: auto !important;
  }
  .traffic-table-container .traffic-table th,
  .traffic-table-container .traffic-table td {
    white-space: nowrap !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}

/* ==== k2-traffic-scroll-css-v3 (2026-08-03) ====
   Pure CSS. Root cause: two rules pin touch-action on the #app subtree
     html.k2-mobile-console-flow #app,#app>*,#app>*>*{touch-action:pan-y pinch-zoom!important}
     body.k2-mobile-console-flow #app{touch-action:pan-y}
   touch-action intersects along the ancestor chain, so pan-x never reaches
   the table no matter what the container itself declares.
   Fix: re-open the whole chain, but ONLY on the pages that actually own a
   .traffic-table-container, via :has(). Other routes keep pan-y as before. */
/* Re-open touch-action on the whole chain when the trafficlog table is present.
   Must beat:
     html.k2-mobile-console-flow #app{...touch-action:pan-y pinch-zoom!important}  (1,1,1)
     body.k2-mobile-console-flow #app{touch-action:pan-y}                         (1,1,1)
   So each rule below has specificity >= (1,1,2) plus !important. */
html.k2-mobile-console-flow body:has(#app .traffic-table-container),
html.k2-mobile-console-flow body:has(#app .traffic-table-container) #app,
html.k2-mobile-console-flow body:has(#app .traffic-table-container) #app > *,
html.k2-mobile-console-flow body:has(#app .traffic-table-container) #app > * > *{
  touch-action:auto!important;
}
#app :is(div,main,section,article):has(> .traffic-table-container){
  touch-action:pan-x pan-y pinch-zoom!important;
}
html.k2-mobile-console-flow body #app .traffic-table-container,#app .traffic-table-container{display:block!important;width:100%!important;max-width:100%!important;overflow-x:auto!important;overflow-y:hidden!important;touch-action:pan-x pan-y pinch-zoom!important;overscroll-behavior-x:contain!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:thin}
#app .traffic-table-container::-webkit-scrollbar{display:block;height:5px}
#app .traffic-table-container::-webkit-scrollbar-thumb{background:rgba(91,178,255,.85);border-radius:999px}
#app .traffic-table-container table{
  display:table!important;
  width:max-content!important;
  min-width:680px!important;
}
#app .traffic-table-container :is(th,td){
  white-space:nowrap!important;
}
/* ---- end k2-traffic-scroll-css-v3 ---- */