:root {
  --bg: #f3f5fb;
  --card: #ffffff;
  --line: #dbe1ef;
  --text: #16203d;
  --muted: #66708a;
  --brand: #2f66f0;
  --brand-dark: #2453cb;
  --success: #2e9e4d;
  --danger: #e54848;
  --warning: #f3ca1a;
  --surface-soft: rgba(255, 255, 255, 0.76);
  --surface-strong: rgba(255, 255, 255, 0.9);
  --shadow-soft: 0 20px 55px rgba(20, 38, 88, 0.08);
  --shadow-card: 0 18px 40px rgba(20, 38, 88, 0.1);
  --shadow-hover: 0 24px 56px rgba(20, 38, 88, 0.16);
  --glow-brand: rgba(76, 132, 255, 0.2);
  --glow-warm: rgba(255, 173, 70, 0.18);
  --glow-cyan: rgba(56, 203, 255, 0.16);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: 'PingFang SC', 'Microsoft YaHei', 'Segoe UI', sans-serif;
  background:
    radial-gradient(circle at 0% 0%, rgba(116, 160, 255, 0.15), transparent 28%),
    radial-gradient(circle at 100% 8%, rgba(59, 197, 255, 0.12), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(255, 193, 92, 0.12), transparent 26%),
    linear-gradient(180deg, #f8fbff 0%, #f1f4fb 42%, #eef2f9 100%);
  background-attachment: fixed;
  color: var(--text);
}

a {
  color: var(--brand);
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

.hidden {
  display: none !important;
}

.msg {
  display: none !important;
  min-height: 0;
  margin: 0;
  font-size: 14px;
}

.muted {
  color: var(--muted);
  font-size: 14px;
}

/* Auth */
.auth-screen {
  min-height: 100vh;
  padding: 20px;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

.auth-left-panel,
.auth-right-panel {
  background: var(--card);
  border-radius: 16px;
  border: 1px solid var(--line);
}

.auth-left-panel {
  padding: 32px;
  background: linear-gradient(145deg, #2f86ef, #3578da);
  color: #fff;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-mobile-welcome {
  display: none;
}

.world-shape {
  margin: 0 auto 30px;
  width: min(620px, 90%);
  height: 360px;
  border: 0;
  border-radius: 0;
  background: transparent url('/assets/coolshark-logo.png') center/contain no-repeat;
}

.auth-left-panel .slogan {
  margin: 0;
  font-size: 22px;
  line-height: 1.5;
  text-align: center;
}

.auth-left-panel h2 {
  margin: 36px 0 10px;
  text-align: center;
  font-size: 22px;
}

.slogan-en {
  margin: 0;
  text-align: center;
  opacity: 0.92;
  font-size: 22px;
  line-height: 1.4;
}

.auth-right-panel {
  padding: 34px 36px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.auth-right-panel > h1,
.auth-right-panel > .auth-line,
.auth-right-panel > .auth-form,
.auth-right-panel > .msg,
.auth-right-panel > small {
  width: min(680px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.auth-right-panel h1 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.auth-line {
  margin: 12px 0 24px;
  border-top: 1px solid #d9deea;
  text-align: center;
  position: relative;
}

.auth-line span {
  background: var(--card);
  color: var(--muted);
  font-size: 14px;
  padding: 0 10px;
  position: relative;
  top: -10px;
}

.auth-form {
  display: grid;
  gap: 12px;
}

.auth-form label {
  font-size: 15px;
  color: #1e2745;
  display: grid;
  gap: 8px;
}

.auth-form input,
.auth-form select {
  width: 100%;
  border: 1px solid #cfd6e6;
  border-radius: 10px;
  padding: 10px 12px;
  background: #fff;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.auth-form input:focus,
.auth-form select:focus {
  outline: none;
  border-color: #7f9fff;
  box-shadow: 0 0 0 3px rgba(47, 102, 240, 0.14);
}

.auth-form input:disabled,
.auth-form input.is-locked {
  background: #f3f6fc;
  color: #7d86a3;
  cursor: not-allowed;
}

.auth-form button[type='submit'] {
  border: 0;
  border-radius: 10px;
  background: linear-gradient(90deg, #2f66f0, #3477f1);
  color: #fff;
  padding: 11px 14px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.auth-form button[type='submit']:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(47, 102, 240, 0.25);
}

.auth-form button[type='submit']:active {
  transform: translateY(0);
}

.row-two {
  display: grid;
  grid-template-columns: 1fr 130px;
  gap: 10px;
}

.row-code {
  display: grid;
  grid-template-columns: 1fr 90px;
  gap: 8px;
}

.btn-code {
  border: 0;
  border-radius: 8px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease, background-position 0.18s ease;
}

.btn-code:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(47, 102, 240, 0.2);
}

.btn-code:disabled {
  cursor: not-allowed;
  transform: none;
}

.btn-code.is-loading {
  background: linear-gradient(90deg, #5f8fff, #2f66f0, #5f8fff);
  background-size: 220% 100%;
  box-shadow: 0 8px 18px rgba(47, 102, 240, 0.22);
  animation: btnCodeLoading 1s linear infinite;
}

.btn-code:disabled:not(.is-loading) {
  opacity: 0.82;
  box-shadow: none;
}

.auth-switch {
  text-align: center;
  color: var(--muted);
  font-size: 14px;
}

.auth-switch .sep {
  margin: 0 8px;
  color: #adb5ca;
}

.auth-right-panel small {
  display: block;
  color: #6f7893;
  margin-top: 6px;
}

.agree-wrap {
  display: flex !important;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 8px;
  line-height: 1.4;
  color: #55607f;
}

.agree-wrap input[type='checkbox'] {
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin: 2px 0 0;
  padding: 0;
  border: 1px solid #bfc9e2;
  border-radius: 4px;
  appearance: auto;
  cursor: pointer;
}

.agree-wrap a {
  margin-left: 4px;
}

/* User layout */
.layout-airport {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 290px 1fr;
  position: relative;
  isolation: isolate;
}

.layout-airport::before,
.layout-airport::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
}

.layout-airport::before {
  top: 84px;
  right: 8%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, var(--glow-brand), transparent 70%);
  animation: floatAura 12s ease-in-out infinite;
}

.layout-airport::after {
  bottom: 64px;
  left: 24%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--glow-warm), transparent 70%);
  animation: floatAura 16s ease-in-out infinite reverse;
}

.airport-sidebar {
  position: sticky;
  top: 12px;
  align-self: start;
  height: calc(100vh - 24px);
  margin: 12px 0 12px 12px;
  background:
    linear-gradient(180deg, rgba(248, 251, 255, 0.96), rgba(239, 244, 255, 0.92)),
    #eef1f9;
  border: 1px solid rgba(209, 220, 244, 0.95);
  border-right: 1px solid rgba(209, 220, 244, 0.95);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(16px);
  border-radius: 26px;
  padding: 10px 12px 14px;
  overflow-y: auto;
}

.airport-brand {
  height: 52px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(201, 210, 232, 0.9);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(243, 247, 255, 0.94));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.brand-badge {
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: linear-gradient(135deg, #667ef7, #4f67f0);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}

.airport-brand strong {
  font-size: 18px;
}

.airport-menu {
  margin-top: 10px;
}

.menu-group {
  margin: 16px 12px 6px;
  color: #58627f;
  font-size: 13px;
  font-weight: 700;
}

.menu-item {
  width: 100%;
  border: 1px solid #cfd7ea;
  background: #fff;
  border-radius: 12px;
  padding: 11px 12px;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  color: #172445;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background 0.22s ease;
}

.menu-item:hover {
  transform: translateX(4px);
  border-color: #c2d1f6;
  box-shadow: 0 12px 24px rgba(32, 52, 104, 0.08);
  background: linear-gradient(180deg, #ffffff, #f6f9ff);
}

.menu-item .menu-icon {
  width: 18px;
  color: #5f6b88;
}

.menu-item.active {
  background: linear-gradient(98deg, #2f66f0, #2f66f0 58%, #3c7af8);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 16px 28px rgba(47, 102, 240, 0.28);
}

.menu-item.active .menu-icon {
  color: #fff;
}

.airport-main {
  padding: 16px 18px 22px;
}

.airport-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: 1px solid rgba(215, 223, 240, 0.82);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: blur(18px);
  box-shadow: var(--shadow-soft);
}

.airport-topbar h2 {
  margin: 0;
  font-size: 32px;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  padding-left: 16px;
  border-left: 1px solid rgba(207, 217, 238, 0.8);
}

.mobile-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  min-width: 40px;
  height: 40px;
  padding: 0;
}

.mobile-menu-toggle i {
  font-size: 20px;
}

.mobile-menu-backdrop {
  display: none;
}

body.mobile-menu-lock {
  overflow: hidden;
}

.ghost {
  border: 1px solid #c6d0e7;
  background: #fff;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.ghost:hover {
  transform: translateY(-1px);
  border-color: #b8c8ee;
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  box-shadow: 0 10px 24px rgba(23, 43, 88, 0.1);
}

.danger {
  border: 1px solid #f0b9c3;
  background: #fff5f7;
  color: #cc3d4f;
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.danger:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(204, 61, 79, 0.14);
}

.page-section {
  display: none;
}

.page-section.active {
  display: block;
}

.airport-card {
  background: var(--card);
  border: 1px solid #d7dff0;
  border-radius: 20px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform 0.26s ease, box-shadow 0.26s ease, border-color 0.26s ease;
}

.airport-card::before {
  content: '';
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.7), rgba(95, 143, 255, 0.3), rgba(255, 255, 255, 0));
  opacity: 0.9;
}

.airport-card:hover {
  transform: translateY(-4px);
  border-color: #cad7f4;
  box-shadow: var(--shadow-hover);
}

.content-card {
  padding: 14px;
}

.content-card h3 {
  margin: 0 0 12px;
  font-size: 18px;
}

.airport-invite {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  margin-bottom: 14px;
  padding: 18px 22px;
  min-height: 92px;
  background: linear-gradient(100deg, #f29e2c, #ef6a3f 42%, #d92c67);
  border: 1px solid rgba(255, 255, 255, 0.36);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 24px 44px rgba(217, 44, 103, 0.22);
}

.airport-invite::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 212, 132, 0.5) 1.5px, transparent 1.5px);
  background-size: 18px 18px;
  opacity: 0.65;
}

.airport-invite::after {
  content: '';
  position: absolute;
  top: -28%;
  bottom: -28%;
  left: -18%;
  width: 180px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0));
  transform: rotate(16deg) translateX(-240px);
  animation: inviteSweep 7.6s linear infinite;
}

.invite-left-glow {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 220px;
  background: radial-gradient(circle at left center, rgba(255, 196, 120, 0.6), rgba(255, 196, 120, 0));
}

.invite-envelope {
  position: absolute;
  top: 4px;
  left: 53%;
  transform: translateX(-50%);
  font-size: 22px;
  animation: swing 2.2s ease-in-out infinite;
}

@keyframes swing {
  0%,
  100% { transform: translateX(-50%) rotate(0deg); }
  25% { transform: translateX(-50%) rotate(-8deg); }
  75% { transform: translateX(-50%) rotate(8deg); }
}

.invite-content {
  position: relative;
  z-index: 2;
  text-align: center;
}

.invite-content h3 {
  margin: 0;
  font-size: 36px;
  line-height: 1.15;
  font-weight: 800;
}

.invite-now {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  border-radius: 999px;
  padding: 10px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  cursor: pointer;
  background: linear-gradient(90deg, #ff3f9c, #ff2468);
  z-index: 2;
  box-shadow: 0 14px 24px rgba(255, 36, 104, 0.26);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.invite-now:hover {
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 18px 28px rgba(255, 36, 104, 0.32);
}

.airport-top-grid {
  display: grid;
  grid-template-columns: 1.45fr 0.95fr 0.9fr;
  gap: 14px;
}

.airport-top-grid .airport-card {
  --hero-shift-x: 0px;
  --hero-shift-y: 0px;
  transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0);
  will-change: transform;
}

.airport-top-grid .airport-card:hover {
  transform: translate3d(var(--hero-shift-x), calc(var(--hero-shift-y) - 4px), 0);
}

.home-notice-card {
  margin-top: 10px;
  padding: 18px 20px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(246, 249, 255, 0.92)),
    #fff;
}

.home-notice-card::after {
  content: '';
  position: absolute;
  right: -70px;
  top: -70px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  border: 20px solid rgba(31, 52, 98, 0.04);
  box-shadow: 0 0 0 26px rgba(31, 52, 98, 0.03), 0 0 0 52px rgba(31, 52, 98, 0.02);
  pointer-events: none;
}

.home-notice-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.home-notice-head h4 {
  margin: 0;
  font-size: 34px;
  color: #f0b900;
}

.home-notice-head small {
  color: #7f8aa9;
  font-size: 14px;
}

.home-notice-highlights {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.home-notice-highlight-line {
  margin: 0;
  display: inline-block;
  width: fit-content;
  background: #fff000;
  color: #10193b;
  font-weight: 800;
  font-size: 38px;
  padding: 2px 6px;
}

.home-notice-body {
  color: #5d6888;
  font-size: 20px;
  line-height: 1.7;
  white-space: normal;
}

.user-card {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.22), transparent 26%),
    radial-gradient(circle at 82% 22%, rgba(98, 236, 255, 0.22), transparent 24%),
    linear-gradient(140deg, #2251d4 0%, #2f66f0 38%, #2791f6 100%);
  color: #fff;
  padding: 18px 18px 16px;
  min-height: 264px;
  box-shadow: 0 28px 50px rgba(37, 93, 219, 0.28);
}

.user-card h3 {
  margin: 0 0 10px;
  font-size: 20px;
  letter-spacing: 0.2px;
}

.user-card p {
  margin: 7px 0;
  font-size: 20px;
  position: relative;
  z-index: 1;
}

.user-card strong {
  font-weight: 800;
}

.value-yellow {
  color: #ffe88c;
}

.value-cyan {
  color: #b8ffef;
}

.lightning-mark {
  position: absolute;
  right: 16px;
  top: 2px;
  font-size: 156px;
  opacity: 0.2;
  filter: drop-shadow(0 0 20px rgba(255, 255, 255, 0.12));
  animation: softFloat 6s ease-in-out infinite;
}

.user-card-actions {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  position: relative;
  z-index: 1;
}

.user-card-actions button {
  border: 0;
  border-radius: 14px;
  background: rgba(241, 245, 255, 0.9);
  color: #245bd8;
  font-size: 18px;
  padding: 12px 8px;
  cursor: pointer;
  font-weight: 700;
  box-shadow: 0 12px 22px rgba(14, 34, 84, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease;
}

.user-card-actions button:hover {
  transform: translateY(-2px);
  background: #ffffff;
  box-shadow: 0 16px 26px rgba(14, 34, 84, 0.18);
}

.user-card-actions button i {
  margin-right: 6px;
}

.quick-import-card {
  padding: 14px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(circle at right top, rgba(96, 143, 255, 0.14), transparent 28%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.94));
}

.quick-import-card h4 {
  margin: 0 0 8px;
  font-size: 20px;
  color: #10214a;
}

.quick-import {
  width: 100%;
  border: 0;
  border-radius: 14px;
  margin-bottom: 10px;
  padding: 12px 12px;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(27, 48, 98, 0.12);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;
}

.quick-import:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 30px rgba(27, 48, 98, 0.18);
  filter: saturate(1.06);
}

.quick-item-icon,
.quick-left-icon,
.quick-right-icon {
  font-size: 18px;
  opacity: 0.95;
}

.quick-right-icon {
  margin-left: auto;
}

.quick-copy-animated {
  background: linear-gradient(90deg, #20b4ef, #4e72f5, #95ccf4, #8f8cf6);
  background-size: 220% 220%;
  animation: hueMove 4s ease infinite;
}

@keyframes hueMove {
  0% { background-position: 0 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.quick-blue { background: linear-gradient(90deg, #214aa5, #2c63c8); }
.quick-sky { background: linear-gradient(90deg, #4e97e9, #3d73c2); }
.quick-black { background: #02050e; }
.quick-gray { background: linear-gradient(90deg, #8696aa, #56677f); }

.quick-import:last-child {
  margin-bottom: 0;
}

.quick-import.is-disabled,
.user-card-actions button.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
  filter: saturate(0.55);
}

.sub-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(11, 18, 33, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.sub-action-dialog {
  width: min(520px, 100%);
  background: #fff;
  border-radius: 14px;
  border: 1px solid #d6deef;
  box-shadow: 0 18px 40px rgba(20, 30, 55, 0.25);
  padding: 16px;
  position: relative;
}

.sub-action-dialog h4 {
  margin: 0;
  font-size: 22px;
}

.sub-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: #edf2ff;
  color: #495b8a;
  cursor: pointer;
}

.sub-modal-qr {
  margin-top: 10px;
  border: 1px dashed #cfd8eb;
  border-radius: 12px;
  padding: 10px;
  text-align: center;
  background: #f8faff;
}

.sub-modal-qr img {
  width: min(240px, 100%);
  border-radius: 8px;
  background: #fff;
}

.sub-modal-qr small {
  display: block;
  margin-top: 8px;
  color: #5e6a87;
}

.sub-modal-actions {
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sub-modal-actions .ghost,
.sub-modal-actions .btn-yellow {
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
}

.pay-select-dialog,
.pay-success-dialog {
  width: min(460px, 100%);
}

.pay-select-options {
  margin-top: 10px;
  display: grid;
  gap: 10px;
}

.pay-option-btn {
  border: 1px solid #d8e1f2;
  border-radius: 12px;
  background: #fff;
  padding: 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.pay-option-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(24, 38, 75, 0.12);
}

.pay-option-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  transform: none;
  box-shadow: none;
}

.pay-option-main {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pay-logo-badge {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 800;
  font-size: 14px;
}

.pay-logo-alipay {
  background: linear-gradient(135deg, #1786ff, #0f5fdb);
}

.pay-logo-wechat {
  background: linear-gradient(135deg, #16c95f, #0d9853);
}

.pay-option-title {
  font-size: 18px;
  font-weight: 700;
  color: #18254a;
}

.pay-option-sub {
  color: #6b7692;
  font-size: 13px;
}

.pay-option-tag {
  color: #2f66f0;
  font-size: 13px;
  font-weight: 700;
}

.pay-success-dialog {
  text-align: center;
}

.pay-success-dialog .btn-yellow {
  min-width: 140px;
}

.usage-card {
  padding: 14px;
  text-align: center;
  background:
    radial-gradient(circle at 50% 16%, rgba(142, 203, 114, 0.14), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(248, 251, 255, 0.94));
}

.usage-card h4 {
  margin: 2px 0 2px;
  text-align: left;
  font-size: 22px;
}

.usage-text {
  font-size: 28px;
  font-weight: 800;
  margin-bottom: 8px;
  text-align: left;
}

.donut {
  width: 220px;
  height: 220px;
  margin: 8px auto 10px;
  border-radius: 50%;
  position: relative;
  background: conic-gradient(#5b75d8 0deg 0deg, #8ecb72 0deg 360deg);
  cursor: crosshair;
  box-shadow:
    inset 0 12px 30px rgba(255, 255, 255, 0.3),
    0 24px 34px rgba(58, 97, 185, 0.12);
}

.donut::after {
  content: '';
  position: absolute;
  inset: 44px;
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.98), rgba(242, 247, 255, 0.95));
  border-radius: 50%;
  box-shadow: inset 0 2px 16px rgba(70, 110, 194, 0.08);
}

.donut-hint {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border: 1px solid #7cb269;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.15);
  opacity: 0;
  transition: opacity 0.16s;
}

.donut-hint.show {
  opacity: 1;
}

.legend {
  display: flex;
  justify-content: center;
  gap: 14px;
  font-size: 14px;
  color: #5b637e;
}

.dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  display: inline-block;
  margin-right: 5px;
}

.dot.used { background: #5b75d8; }
.dot.remain { background: #8ecb72; }

/* Tutorial page */
.tutorial-scene {
  padding: 0;
  border: 1px solid #d3dcec;
  overflow: hidden;
}

.tutorial-landing-wrap {
  display: grid;
  gap: 16px;
  background: #eef0f6;
  padding: 16px;
}

.tutorial-hero {
  height: 150px;
  border-radius: 14px;
  background-image:
    radial-gradient(circle at 12% 20%, rgba(12, 135, 194, 0.92), rgba(12, 135, 194, 0) 28%),
    radial-gradient(circle at 44% 34%, rgba(88, 197, 116, 0.9), rgba(88, 197, 116, 0) 33%),
    radial-gradient(circle at 72% 24%, rgba(246, 220, 42, 0.9), rgba(246, 220, 42, 0) 28%),
    radial-gradient(circle at 88% 34%, rgba(252, 150, 24, 0.9), rgba(252, 150, 24, 0) 30%),
    linear-gradient(100deg, #0c7fbf, #f5b31f);
  box-shadow: inset 0 -28px 48px rgba(255, 255, 255, 0.2);
}

.tutorial-platform-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.tutorial-platform-card {
  border: 1px solid #d6dceb;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 143, 255, 0.08), transparent 34%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  min-height: 200px;
  padding: 24px 18px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 0 14px 28px rgba(21, 42, 88, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease, background 0.24s ease;
}

.tutorial-platform-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 40px rgba(24, 35, 60, 0.16);
  border-color: #c3d0ec;
  background:
    radial-gradient(circle at 50% 0%, rgba(96, 143, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff, #f3f8ff);
}

.tutorial-platform-card i {
  font-size: 38px;
  line-height: 1;
  color: #f3b500;
}

.tutorial-platform-card h4 {
  margin: 0;
  font-size: 28px;
  line-height: 1.1;
  font-weight: 500;
  color: #f3b500;
}

.tutorial-platform-card p {
  margin: 0;
  font-size: 14px;
  color: #69718c;
}

.tutorial-platform-card small {
  margin-top: 2px;
  font-size: 12px;
  color: #94a0bd;
}

.tutorial-help-panel {
  border: 1px solid #d6dcea;
  border-radius: 14px;
  background: #f7f8fb;
  padding: 14px 18px;
}

.tutorial-help-head h4 {
  margin: 0;
  color: #f3ae02;
  font-size: 22px;
}

.tutorial-help-head p {
  margin: 4px 0 0;
}

.tutorial-help-accordion {
  margin-top: 12px;
}

.tutorial-help-item {
  border-top: 1px solid #e6e9f1;
}

.tutorial-help-item:first-child {
  border-top: 0;
}

.tutorial-help-toggle {
  width: 100%;
  border: 0;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #0f1b3b;
  font-weight: 700;
  font-size: 20px;
  padding: 14px 8px;
  cursor: pointer;
  text-align: left;
}

.tutorial-help-toggle i {
  color: #9aa6c2;
  font-size: 20px;
}

.tutorial-help-content {
  padding: 0 8px 14px;
}

.tutorial-help-content p {
  margin: 0;
  color: #4e5877;
  line-height: 1.75;
  white-space: pre-wrap;
  font-size: 16px;
}

.tutorial-detail-wrap {
  display: grid;
  gap: 14px;
  background: #eef0f6;
  padding: 16px;
}

.tutorial-detail-top {
  border-radius: 14px;
  padding: 16px 20px;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(11, 149, 205, 0.95), rgba(11, 149, 205, 0) 28%),
    radial-gradient(circle at 42% 28%, rgba(84, 202, 117, 0.92), rgba(84, 202, 117, 0) 36%),
    radial-gradient(circle at 72% 26%, rgba(246, 224, 42, 0.9), rgba(246, 224, 42, 0) 30%),
    radial-gradient(circle at 90% 38%, rgba(248, 148, 28, 0.9), rgba(248, 148, 28, 0) 35%),
    linear-gradient(100deg, #087cb8, #f0ac18);
}

.tutorial-back-btn {
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.tutorial-back-btn:hover {
  background: rgba(255, 255, 255, 0.24);
}

.tutorial-detail-top h3 {
  margin: 0;
  color: #fff;
  font-size: 34px;
  line-height: 1.15;
}

.tutorial-detail-top p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 18px;
}

.tutorial-list-wrap {
  display: grid;
  gap: 12px;
}

.tutorial-detail-item {
  border: 1px solid #d8deeb;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #fbfcff);
  overflow: hidden;
  box-shadow: 0 14px 28px rgba(20, 41, 84, 0.08);
}

.tutorial-detail-item-head {
  padding: 14px 18px;
}

.tutorial-detail-item-head h4 {
  margin: 0;
  font-size: 28px;
  line-height: 1.2;
}

.tutorial-detail-item-body {
  border-top: 1px solid #e7ebf3;
  padding: 14px 18px;
  min-height: 74px;
}

.tutorial-detail-item-body p {
  margin: 0;
  color: #a3abc1;
  line-height: 1.7;
  font-size: 16px;
}

.tutorial-detail-item-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px 16px;
}

.tutorial-detail-item-actions .btn-yellow,
.tutorial-detail-item-actions .tutorial-view-btn {
  border-radius: 999px;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 700;
}

.tutorial-detail-item-actions .tutorial-view-btn {
  background: #12a3f0;
  border: 0;
  color: #fff;
}

.tutorial-subscription-card {
  border: 1px solid #d8deeb;
  border-radius: 14px;
  background: #fff;
  padding: 14px 18px 18px;
}

.tutorial-subscription-card h4 {
  margin: 0;
  font-size: 28px;
}

.tutorial-subscription-card p {
  margin: 8px 0 12px;
  font-size: 16px;
  color: #a2abc2;
}

.btn-magenta {
  border: 0;
  border-radius: 999px;
  background: linear-gradient(120deg, #c92cab, #f45ea6);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  padding: 10px 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.btn-magenta:hover {
  filter: brightness(1.03);
}

.tutorial-admin-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 12px;
}

.tutorial-admin-form {
  display: grid;
  gap: 10px;
}

.tutorial-field-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.tutorial-admin-form input,
.tutorial-admin-form select,
.tutorial-admin-form textarea,
.tutorial-help-form input,
.tutorial-help-form textarea {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.tutorial-admin-form textarea {
  resize: vertical;
  min-height: 170px;
}

.tutorial-block {
  border: 1px dashed #ccd6ea;
  border-radius: 10px;
  background: #f9fbff;
  padding: 10px;
}

.tutorial-content-actions {
  display: flex;
  gap: 8px;
  margin: 8px 0;
}

.tutorial-account-editor {
  margin-top: 8px;
  border: 1px dashed #d2daec;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.tutorial-account-rows {
  display: grid;
  gap: 8px;
  margin: 8px 0;
}

.tutorial-account-row {
  display: grid;
  grid-template-columns: 1.1fr 1.3fr 1fr 1fr 0.8fr auto;
  gap: 8px;
  align-items: center;
}

.tutorial-preview-account-grid {
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 8px;
}

.tutorial-preview-account-card {
  border: 1px solid #d9e3f2;
  border-radius: 10px;
  background: #f8fbff;
  padding: 8px;
}

.tutorial-preview-account-card h6 {
  margin: 0 0 6px;
  font-size: 15px;
}

.tutorial-preview-account-card p {
  margin: 4px 0;
  font-size: 13px;
}

.tutorial-form-actions {
  display: flex;
  gap: 8px;
}

.tutorial-form-actions button {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.tutorial-form-actions .ghost {
  background: #fff;
  border: 1px solid #ccd5ea;
  color: #2b426f;
}

.tutorial-preview-wrap {
  border: 1px solid #d8dff0;
  border-radius: 10px;
  background: #f9fbff;
  padding: 10px;
}

.tutorial-preview-wrap h4 {
  margin: 0 0 8px;
}

.tutorial-live-preview {
  min-height: 240px;
  max-height: 740px;
  overflow: auto;
  border: 1px solid #d9e1f2;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
}

.tutorial-live-preview img {
  max-width: 100%;
  border-radius: 8px;
}

.tutorial-admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 10px;
}

.tutorial-admin-card {
  border: 1px solid #d8e0ef;
  border-radius: 12px;
  background: #fff;
  padding: 10px;
}

.tutorial-admin-card h5 {
  margin: 0;
  font-size: 20px;
}

.tutorial-admin-card p {
  margin: 4px 0;
  color: #4f5e84;
}

.tutorial-admin-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.tutorial-admin-actions button {
  border-radius: 8px;
  border: 1px solid #ccd5ea;
  background: #fff;
  color: #2b426f;
  padding: 6px 10px;
  cursor: pointer;
}

.tutorial-admin-actions .danger {
  border-color: #efc6c6;
  color: #b33939;
}

.tutorial-help-admin {
  border: 1px dashed #d2dbeb;
  border-radius: 12px;
  background: #f9fbff;
  padding: 12px;
}

.tutorial-help-form {
  display: grid;
  gap: 10px;
}

.tutorial-help-form textarea {
  resize: vertical;
  min-height: 100px;
}

.tutorial-help-rows {
  display: grid;
  gap: 10px;
}

.tutorial-help-row {
  border: 1px solid #dce3f1;
  border-radius: 10px;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1.4fr auto;
  gap: 8px;
  align-items: start;
}

.tutorial-help-row button {
  align-self: center;
}

.tutorial-guide-modal {
  position: fixed;
  inset: 0;
  z-index: 1200;
  background: rgba(10, 18, 32, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.tutorial-guide-dialog {
  width: min(920px, 100%);
  max-height: 86vh;
  overflow: hidden;
  background: #fff;
  border-radius: 14px;
  border: 1px solid #d7deee;
  box-shadow: 0 18px 36px rgba(16, 25, 44, 0.25);
  display: grid;
  grid-template-rows: auto 1fr auto;
}

.tutorial-guide-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid #e1e8f3;
}

.tutorial-guide-head h4 {
  margin: 0;
  font-size: 24px;
}

.tutorial-guide-close {
  border: 0;
  border-radius: 999px;
  width: 32px;
  height: 32px;
  background: #edf2ff;
  cursor: pointer;
  color: #4b5f93;
}

.tutorial-guide-content {
  overflow: auto;
  padding: 14px;
}

.tutorial-guide-content h1,
.tutorial-guide-content h2,
.tutorial-guide-content h3,
.tutorial-guide-content h4 {
  margin: 12px 0 8px;
  color: #14203e;
}

.tutorial-guide-content p,
.tutorial-guide-content li {
  line-height: 1.75;
  color: #263354;
  margin: 8px 0;
}

.tutorial-guide-content img {
  max-width: 100%;
  border-radius: 10px;
  margin: 10px 0;
}

.ios-account-layout {
  display: grid;
  gap: 14px;
}

.ios-login-guard {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 14px;
  padding: 18px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 140, 66, 0.28), transparent 24%),
    radial-gradient(circle at 88% 84%, rgba(99, 220, 127, 0.2), transparent 22%),
    linear-gradient(135deg, #121826 0%, #1b2435 55%, #101522 100%);
  box-shadow: 0 20px 40px rgba(15, 24, 42, 0.22);
}

.ios-login-guard::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.08), transparent 42%, transparent 58%, rgba(255, 255, 255, 0.05));
  pointer-events: none;
}

.ios-login-guard-head,
.ios-login-guard-grid,
.ios-login-guard-foot {
  position: relative;
  z-index: 1;
}

.ios-login-guard-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: max-content;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 153, 51, 0.16);
  border: 1px solid rgba(255, 183, 102, 0.26);
  color: #ffd8b0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.2px;
}

.ios-login-guard-head h5 {
  margin: 12px 0 8px;
  color: #ffffff;
  font-size: clamp(28px, 4vw, 38px);
  line-height: 1.08;
  letter-spacing: 0.8px;
}

.ios-login-guard-head p {
  margin: 0;
  max-width: 760px;
  color: rgba(232, 239, 255, 0.88);
  line-height: 1.75;
  font-size: 15px;
}

.ios-login-guard-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.ios-login-rule {
  display: grid;
  gap: 12px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
}

.ios-login-rule.danger {
  box-shadow: inset 0 0 0 1px rgba(255, 137, 55, 0.12);
}

.ios-login-rule.success {
  box-shadow: inset 0 0 0 1px rgba(107, 220, 125, 0.12);
}

.ios-login-rule-visual {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ios-login-rule-app {
  width: 72px;
  height: 72px;
  border-radius: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 24px rgba(0, 0, 0, 0.22);
}

.ios-login-rule-app.settings {
  background: linear-gradient(180deg, #f5f7fb, #dce3ee);
  color: #344056;
}

.ios-login-rule-app.store {
  background: linear-gradient(180deg, #4db8ff, #1f6cff);
  color: #ffffff;
}

.ios-login-rule-mark {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 900;
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.18);
}

.ios-login-rule.danger .ios-login-rule-mark {
  background: linear-gradient(180deg, #ffac45, #ff7a00);
  color: #1f1305;
}

.ios-login-rule.success .ios-login-rule-mark {
  background: linear-gradient(180deg, #7ee26f, #43b93d);
  color: #0d2209;
}

.ios-login-rule-copy {
  display: grid;
  gap: 6px;
}

.ios-login-rule-copy strong {
  color: #ffffff;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.6px;
}

.ios-login-rule-copy small {
  color: rgba(229, 236, 251, 0.84);
  font-size: 14px;
  line-height: 1.65;
}

.ios-login-guard-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ios-login-guard-foot span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffe2b3;
  font-size: 13px;
  font-weight: 700;
}

.ios-account-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 12px;
}

.ios-account-card {
  border: 1px solid #2f8cff;
  border-radius: 12px;
  background: #f6fbff;
  padding: 12px;
}

.ios-account-card h5 {
  margin: 0 0 10px;
  font-size: 30px;
  color: #1b2e54;
}

.ios-account-card p {
  margin: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border-top: 1px solid #e1ebf8;
  padding-top: 8px;
}

.ios-account-card p span {
  color: #6c7896;
  font-weight: 600;
}

.ios-account-card p b {
  color: #1b2e54;
  font-weight: 600;
  word-break: break-all;
}

.ios-account-actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}

.tutorial-guide-foot {
  border-top: 1px solid #e1e8f3;
  padding: 12px 14px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.tutorial-guide-foot .btn-yellow,
.tutorial-guide-foot .ghost {
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 700;
}

.tutorial-article-page {
  background: #f5f7fd;
  padding: 14px;
}

.tutorial-article {
  max-width: 900px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #d8e0ef;
  border-radius: 12px;
  padding: 16px;
}
/* Subscription */
.subscription-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.subscription-settings-panel {
  display: none !important;
}


.subscription-overview h3,
.subscription-settings-panel h3 {
  margin: 0 0 8px;
}

.subscription-overview p {
  margin: 8px 0;
  font-size: 18px;
}

.subscription-main-card {
  min-height: 240px;
  border-radius: 18px;
  padding: 16px;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 255, 255, 0.2), transparent 24%),
    radial-gradient(circle at 86% 18%, rgba(78, 231, 255, 0.2), transparent 18%),
    linear-gradient(135deg, #2457da, #2f66f0 50%, #2f8af2);
  color: #fff;
  box-shadow: 0 24px 40px rgba(47, 102, 240, 0.24);
}

.subscription-main-card h3 {
  margin: 0 0 10px;
  font-size: 22px;
}

.subscription-main-card p {
  margin: 6px 0;
  font-size: 18px;
}

.subscription-main-actions {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.subscription-main-actions .ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border-radius: 10px;
  border: 0;
  background: #eef3ff;
  color: #2f66f0;
  font-weight: 700;
  min-height: 42px;
}

.sub-desc {
  margin: 0 0 12px;
  color: var(--muted);
}

.subscription-links {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.sub-link-pill {
  border: 0;
  border-radius: 999px;
  padding: 10px 14px;
  color: #fff;
  cursor: pointer;
  font-weight: 700;
}

.sub-link-pill.copy { background: linear-gradient(90deg, #f0d65d, #ff7f93); color: #14213e; }
.sub-link-pill.clash { background: #1f4588; }
.sub-link-pill.shadowrocket { background: #56a5f1; }
.sub-link-pill.v2ray { background: #d02d9f; }

.sub-warning {
  background: #ffbb1f;
  color: #5a4102;
  border-radius: 8px;
  padding: 10px;
  font-size: 14px;
  margin-bottom: 10px;
}

.btn-yellow,
.btn-danger {
  border: 0;
  border-radius: 999px;
  padding: 10px 16px;
  cursor: pointer;
  font-weight: 700;
}

.btn-yellow {
  background: #f4d10e;
  color: #1b1b1b;
}

.btn-danger {
  background: #ff5968;
  color: #fff;
}

.subscription-nodes-card {
  margin-top: 12px;
}

.subscription-nodes-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.subscription-nodes-head h3 {
  margin: 0;
}

.subscription-node-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.subscription-node-item {
  border: 1px solid #d8e0f0;
  border-radius: 18px;
  padding: 16px 18px;
  background:
    radial-gradient(circle at right top, rgba(104, 174, 255, 0.12), transparent 28%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  box-shadow: 0 14px 30px rgba(20, 42, 95, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.subscription-node-item:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 38px rgba(20, 42, 95, 0.14);
  border-color: #c7d8fa;
}

.subscription-node-main {
  flex: 1;
  min-width: 0;
}

.subscription-node-title {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 1.35;
  color: #16284c;
}

.subscription-node-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: 0 0 10px;
}

.subscription-node-dot.is-online {
  background: #11bca3;
}

.subscription-node-dot.is-maintenance {
  background: #ff5252;
}

.subscription-node-dot.is-offline {
  background: #8ea2c7;
}

.subscription-node-status,
.subscription-node-check-time {
  margin: 0;
  color: #7282a3;
  font-size: 13px;
  line-height: 1.45;
}

.subscription-node-status {
  margin-top: 10px;
}

.subscription-node-check-time {
  margin-top: 4px;
}

.subscription-node-side {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  flex: 0 0 auto;
}

.subscription-node-side-item {
  min-width: 54px;
  text-align: center;
}

.subscription-node-side-item b {
  display: block;
  font-size: 34px;
  line-height: 1;
  color: #142544;
}

.subscription-node-side-item span {
  display: block;
  margin-top: 6px;
  color: #657596;
  font-size: 13px;
}

.subscription-node-side-item:last-child b {
  font-size: 30px;
}

.subscription-node-item.status-maintenance {
  border-color: #ffd6d6;
}

.subscription-node-item.status-offline {
  border-color: #d8dfef;
  opacity: 0.88;
}

.renew-layout {
  display: grid;
  grid-template-columns: 1.45fr 0.75fr;
  gap: 12px;
}

.renew-left h3,
.renew-right h3 {
  margin: 0 0 10px;
}

.renew-feature-list {
  margin: 8px 0 0;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: #1c2b50;
}

.renew-cycle-wrap {
  margin-top: 16px;
  border-top: 1px dashed #dde4f2;
  padding-top: 12px;
}

.renew-cycle-wrap h4 {
  margin: 0 0 8px;
}

.renew-cycle-buttons {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.renew-cycle-btn {
  border: 1px solid #bfcdea;
  background: #fff;
  border-radius: 10px;
  min-width: 102px;
  height: 42px;
  cursor: pointer;
  font-weight: 700;
}

.renew-cycle-btn.active {
  color: #2f66f0;
  border-color: #2f66f0;
  box-shadow: 0 0 0 2px rgba(47, 102, 240, 0.12);
}

.renew-order-title {
  font-size: 24px;
  font-weight: 700;
}

.renew-flow {
  font-size: 34px;
  font-weight: 800;
  margin: 4px 0 14px;
}

.renew-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 26px;
  font-weight: 700;
}

.renew-total b {
  font-size: 42px;
}

.renew-buy-btn {
  width: 100%;
  margin-top: 12px;
}

.renew-price-lines {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.renew-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  font-size: 16px;
  color: #3e4e79;
}

.renew-line b {
  color: #11285f;
}

.renew-coupon-box {
  display: grid;
  gap: 6px;
}

.renew-coupon-box label {
  font-size: 13px;
  color: #617098;
}

.renew-coupon-inline {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.renew-coupon-inline input {
  width: 100%;
  border: 1px solid #ccd5ea;
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 14px;
}

.renew-coupon-inline .ghost {
  border-radius: 10px;
  border: 1px solid #2f66f0;
  color: #2f66f0;
  background: #eef4ff;
  padding: 0 16px;
  font-weight: 700;
  cursor: pointer;
}

.global-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2000;
  background: #ffffff;
  color: #1c2848;
  border-radius: 16px;
  border: 1px solid #dce4f6;
  width: min(720px, calc(100vw - 32px));
  padding: 16px 20px;
  box-shadow: 0 16px 44px rgba(16, 28, 56, 0.22);
  font-size: 18px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.2px;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.global-toast.error {
  border-color: #f3c1c1;
  color: #b3261e;
  box-shadow: 0 14px 36px rgba(179, 38, 30, 0.18);
}

.global-toast.success {
  border-color: #cfe7d4;
  color: #176b2b;
}

.global-toast.hidden {
  opacity: 0;
  transform: translate(-50%, -12px);
  pointer-events: none;
}

.ios-no-subscription {
  margin: 6px 0;
  font-size: 15px;
}

/* Store */
.store-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.store-tags {
  display: flex;
  gap: 8px;
}

.store-tags span {
  padding: 6px 10px;
  border-radius: 10px;
  background: #5777e6;
  color: #fff;
  font-size: 13px;
}

.store-filter-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}

.store-filter {
  border: 1px solid #ccd4e8;
  background: #fff;
  border-radius: 999px;
  padding: 8px 18px;
  cursor: pointer;
}

.store-filter.active {
  background: #2f66f0;
  color: #fff;
  border-color: transparent;
}

.store-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start;
}

.store-card {
  border: 1px solid #d9dfef;
  border-radius: 20px;
  overflow: hidden;
  background:
    radial-gradient(circle at right top, rgba(96, 143, 255, 0.1), transparent 26%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  display: flex;
  flex-direction: column;
  min-height: 100%;
  box-shadow: 0 18px 34px rgba(22, 40, 81, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.store-card:hover {
  transform: translateY(-6px);
  border-color: #cad6f3;
  box-shadow: 0 26px 46px rgba(22, 40, 81, 0.14);
}

.store-card-head {
  color: #fff;
  padding: 14px 14px 12px;
  min-height: 82px;
  position: relative;
  overflow: hidden;
}

.store-card-head::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.store-card-head h4 {
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
}

.store-head-image {
  width: 100%;
  max-height: 86px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
}
.store-card-head p {
  margin: 4px 0 0;
  font-size: 16px;
  opacity: 0.95;
}

.cover-cyan { background: linear-gradient(90deg, #5f6fe8, #2f9ace); }
.cover-blue { background: linear-gradient(90deg, #5f6fe8, #308bd9); }
.cover-indigo { background: linear-gradient(90deg, #6371ef, #3566dd); }
.cover-teal { background: linear-gradient(90deg, #5e77ed, #33a6de); }

.store-card-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.cycle-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 2px;
}

.cycle-chip {
  border: 1px solid #ccd4e7;
  background: #fff;
  border-radius: 10px;
  padding: 5px 10px;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.cycle-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 20px rgba(32, 53, 101, 0.1);
}

.cycle-chip.active {
  background: #6488f0;
  color: #fff;
  border-color: transparent;
}

.cycle-chip-static {
  cursor: default;
  opacity: 1;
}

.store-price {
  margin: 2px 0 0;
  font-size: 32px;
  color: #4c71ec;
  font-weight: 800;
}

.store-price small {
  font-size: 16px;
  color: #5f6787;
}

.store-valid {
  margin: 0 0 4px;
  color: var(--muted);
}

.store-feature-list {
  margin: 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #2c3557;
}

.store-feature-list strong {
  font-weight: 800;
}

.store-badges {
  margin-top: 6px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.store-badges span {
  border-radius: 6px;
  background: #eff3fd;
  color: #5e6fa3;
  font-size: 12px;
  padding: 4px 8px;
}

.store-buy-btn {
  margin-top: auto;
  width: 100%;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(180deg, #ffd81f, #f2c800);
  box-shadow: 0 16px 26px rgba(242, 200, 0, 0.22);
  transition: transform 0.24s ease, box-shadow 0.24s ease, filter 0.24s ease;
}

.store-buy-btn:hover {
  transform: translateY(-2px) scale(1.01);
  box-shadow: 0 20px 30px rgba(242, 200, 0, 0.28);
  filter: saturate(1.04);
}

.store-buy-btn span {
  position: relative;
  z-index: 2;
}

.store-buy-btn::after {
  content: '';
  position: absolute;
  top: -40%;
  left: -38%;
  width: 32%;
  height: 180%;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0));
  transform: skewX(-24deg);
  animation: storeButtonSweep 3.8s linear infinite;
  opacity: 0.78;
  z-index: 1;
}

.store-buy-btn:hover::after {
  animation-duration: 1.9s;
}

/* Tables and detail */
.table-wrap {
  overflow: auto;
}

.table-scroll-10 {
  --table-visible-rows: 10;
  --table-row-height: 52px;
  max-height: calc(48px + (var(--table-visible-rows) * var(--table-row-height)));
  overflow: auto;
  border: 1px solid #dbe3f3;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 250, 255, 0.98));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.table-scroll-10 .simple-table {
  margin-bottom: 0;
}

.table-scroll-10 .simple-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f8fbff;
  box-shadow: inset 0 -1px 0 #dbe3f3;
}

.table-scroll-10::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.table-scroll-10::-webkit-scrollbar-thumb {
  background: rgba(89, 118, 183, 0.38);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.65);
}

.table-scroll-10::-webkit-scrollbar-track {
  background: rgba(240, 244, 252, 0.9);
  border-radius: 999px;
}

.simple-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.simple-table th,
.simple-table td {
  border-bottom: 1px solid #e1e7f2;
  padding: 9px 8px;
  text-align: left;
  font-size: 14px;
}

.simple-table thead th {
  background: #f8faff;
  color: #445071;
  font-weight: 700;
}

.simple-table td {
  vertical-align: top;
  word-break: break-word;
}

.order-no {
  background: #ecf4e5;
  color: #4f8731;
  border-left: 4px solid #4cc11a;
  display: inline-block;
  padding: 4px 8px;
  border-radius: 4px;
}

.status-pill {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  border: 1px solid #d2d7e8;
  font-size: 12px;
}

.status-pill.paid {
  color: #3f9e33;
  border-color: #95d288;
  background: #f0fbe9;
}

.status-pill.pending {
  color: #b87900;
  border-color: #f2d483;
  background: #fff7df;
}

.status-pill.processing {
  color: #6c4dd9;
  border-color: #c9baff;
  background: #f3efff;
}

.status-pill.agent {
  color: #9a4b05;
  border-color: #f3b97e;
  background: #fff2e4;
}

.status-pill.user {
  color: #295dc4;
  border-color: #a8c1fb;
  background: #eef4ff;
}

.status-pill.cancelled,
.status-pill.refunded,
.status-pill.expired {
  color: #7b8199;
}

.link-btn {
  border: 0;
  background: transparent;
  color: #2f66f0;
  cursor: pointer;
  font-weight: 700;
}

.danger-text {
  color: #d34e5f;
}

.table-action-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.detail-block {
  padding: 8px 0;
  border-bottom: 1px solid #e2e8f3;
}

.detail-block h4 {
  margin: 0 0 8px;
  font-size: 18px;
}

.detail-block p {
  margin: 4px 0;
}

.detail-block .total {
  font-size: 18px;
  font-weight: 800;
}

/* Referrals */
.referral-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}

.stat-box {
  padding: 16px;
  background:
    radial-gradient(circle at right top, rgba(95, 127, 234, 0.1), transparent 26%),
    linear-gradient(180deg, #ffffff, #f8fbff);
}

.stat-box small {
  display: block;
  color: var(--muted);
}

.stat-box b {
  display: block;
  margin-top: 4px;
  font-size: 24px;
}

.split-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.agent-referral-board {
  margin-bottom: 10px;
  background:
    radial-gradient(circle at right top, rgba(255, 156, 68, 0.16), transparent 24%),
    linear-gradient(180deg, #fffdf8, #fff7ed);
}

.agent-invite-link-card {
  display: grid;
  gap: 12px;
  padding: 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 149, 54, 0.12), rgba(255, 255, 255, 0.96));
  border: 1px solid rgba(240, 150, 54, 0.2);
}

.agent-invite-link-main small {
  display: block;
  color: var(--muted);
  margin-bottom: 8px;
}

.agent-invite-link-main code {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(19, 35, 71, 0.92);
  color: #fff2da;
  font-size: 13px;
  line-height: 1.6;
  word-break: break-all;
}

.agent-invite-link-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.agent-invite-link-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 182, 106, 0.28);
  font-size: 13px;
  color: #6b4a1e;
}

.referral-grid-two {
  margin-top: 10px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

@media (max-width: 900px) {
  .referral-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-box {
    min-height: 116px;
  }

  .stat-box b {
    font-size: 20px;
    line-height: 1.18;
    word-break: break-word;
  }

  .split-title {
    flex-wrap: wrap;
    align-items: stretch;
    gap: 10px;
  }

  .split-title .ghost {
    width: 100%;
    justify-content: center;
  }

  .agent-invite-link-meta {
    flex-direction: column;
  }
}

/* Profile */
.profile-banner {
  height: 180px;
  background: radial-gradient(circle at 20% 30%, #7f8be6, #212c7c 44%, #040836 74%);
  margin-bottom: 10px;
}

.profile-wallet {
  margin: -52px auto 12px;
  padding: 14px 20px;
  width: calc(100% - 80px);
  box-shadow: 0 14px 26px rgba(43, 54, 96, 0.12);
}

.profile-wallet h3 {
  margin: 0;
  font-size: 24px;
}

.profile-wallet p {
  margin: 6px 0;
  font-size: 22px;
  font-weight: 700;
}

.profile-wallet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.profile-wallet-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
}

.profile-wallet-meta span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #f5f8ff;
  border: 1px solid #dbe4f6;
  font-size: 13px;
  color: #56627d;
}

.profile-grid-two {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 10px;
}

.stack-form {
  display: grid;
  gap: 10px;
}

.stack-form input {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 10px;
}

.stack-form button {
  border: 0;
  border-radius: 10px;
  background: #2f66f0;
  color: #fff;
  padding: 11px;
  cursor: pointer;
}

.withdraw-dialog {
  max-width: 560px;
}

.withdraw-form {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.withdraw-form label {
  display: grid;
  gap: 8px;
  color: #2b3553;
  font-weight: 600;
}

.withdraw-form input,
.withdraw-form textarea {
  width: 100%;
  border: 1px solid #d4ddf0;
  border-radius: 12px;
  background: #fff;
  padding: 12px 14px;
  font: inherit;
  color: #25314f;
}

.withdraw-form textarea {
  resize: vertical;
  min-height: 92px;
}

.withdraw-form-actions {
  display: flex;
  justify-content: flex-start;
}

.withdraw-qr-preview.hidden {
  display: none;
}

.withdraw-qr-card {
  display: inline-grid;
  gap: 10px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #f7faff, #ffffff);
  border: 1px solid #dce5f7;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.72);
}

.withdraw-qr-card img {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 16px;
  border: 1px solid #d7e0f2;
  background: #fff;
}

.withdraw-qr-card small {
  color: var(--muted);
}

.account-agent .airport-invite {
  background: linear-gradient(135deg, #1f2f63 0%, #2f5eb2 34%, #f59f42 100%);
}

.account-agent .menu-item.active,
.account-agent .invite-now,
.account-agent .btn-yellow {
  background: linear-gradient(135deg, #ff9933, #ff6a00);
}

.account-agent .menu-item.active {
  color: #fff;
}

.account-agent .profile-banner {
  background: radial-gradient(circle at 18% 24%, #ffb35f, #ef7d20 40%, #5d2402 76%);
}

.account-agent .stat-box {
  background:
    radial-gradient(circle at right top, rgba(255, 159, 67, 0.14), transparent 26%),
    linear-gradient(180deg, #ffffff, #fff8ef);
}

.profile-right-col {
  display: grid;
  gap: 10px;
}

@media (max-width: 900px) {
  .profile-wallet-head {
    flex-direction: column;
    align-items: stretch;
  }

  .withdraw-qr-card img {
    width: 100%;
    height: auto;
  }
}

.notify-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 18px;
}

.switch {
  position: relative;
  width: 50px;
  height: 28px;
  display: inline-block;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #cbd2e7;
  transition: 0.2s;
}

.slider::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: 0.2s;
}

.switch input:checked + .slider {
  background: #2f66f0;
}

.switch input:checked + .slider::before {
  transform: translateX(22px);
}

.page-msg {
  margin: 8px 4px;
  font-size: 14px;
}

.contact-float {
  position: fixed;
  right: 16px;
  bottom: 12px;
  border: 0;
  border-radius: 999px;
  background: #2f7bf0;
  color: #fff;
  font-size: 15px;
  padding: 10px 16px;
  box-shadow: 0 8px 20px rgba(36, 75, 150, 0.3);
}

/* Admin layout */
.theme-admin {
  background:
    radial-gradient(circle at 12% 0%, rgba(68, 128, 255, 0.14), transparent 24%),
    radial-gradient(circle at 100% 0%, rgba(82, 206, 255, 0.12), transparent 22%),
    linear-gradient(180deg, #f7f9fd 0%, #eef3fb 100%);
}

.admin-access-gate {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at top, rgba(65, 121, 255, 0.16), transparent 30%),
    rgba(238, 243, 251, 0.92);
  backdrop-filter: blur(12px);
}

.admin-access-gate.hidden {
  display: none;
}

.admin-access-card {
  width: min(100%, 520px);
  padding: 28px 28px 24px;
  border-radius: 28px;
  border: 1px solid rgba(118, 142, 193, 0.2);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(246, 249, 255, 0.96));
  box-shadow: 0 32px 60px rgba(17, 34, 68, 0.18);
}

.admin-access-badge {
  display: inline-flex;
  align-items: center;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgba(47, 102, 240, 0.1);
  color: #2f66f0;
  font-size: 13px;
  font-weight: 700;
}

.admin-access-card h2 {
  margin: 14px 0 8px;
  font-size: 32px;
  color: #1b2a4b;
}

.admin-access-desc {
  margin: 0 0 18px;
  color: #5d6c8b;
  line-height: 1.7;
}

.admin-access-secret {
  display: grid;
  gap: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: #f5f8ff;
  border: 1px solid #d9e4fb;
}

.admin-access-qr-block {
  display: grid;
  gap: 10px;
}

.admin-access-qr-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f5f8ff);
  border: 1px solid #d9e4fb;
}

.admin-access-qr-code {
  width: 160px;
  height: 160px;
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: #fff;
  border: 1px solid #d6dff2;
  box-shadow: inset 0 0 0 1px rgba(47, 102, 240, 0.03);
  overflow: hidden;
}

.admin-access-qr-code img,
.admin-access-qr-code canvas {
  display: block;
  max-width: 100%;
  max-height: 100%;
}

.admin-access-qr-placeholder {
  padding: 0 12px;
  text-align: center;
  color: #7482a1;
  line-height: 1.6;
  font-size: 13px;
}

.admin-access-qr-tip {
  display: grid;
  gap: 8px;
  color: #5f6f8e;
  line-height: 1.7;
}

.admin-access-qr-tip strong {
  color: #1d3763;
  font-size: 15px;
}

.admin-access-qr-tip p {
  margin: 0;
}

.admin-access-secret label,
.admin-access-code-wrap label {
  font-size: 14px;
  font-weight: 700;
  color: #223861;
}

.admin-access-secret-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-access-secret-row code {
  flex: 1;
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #d6dff2;
  color: #21427b;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 1.5px;
  word-break: break-all;
}

.admin-access-secret small {
  color: #6b7690;
  line-height: 1.6;
}

.admin-access-code-wrap {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}

.admin-access-code-wrap input {
  width: 100%;
  border: 1px solid #cfdbf2;
  border-radius: 16px;
  padding: 14px 16px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 3px;
  color: #18345d;
  background: #fff;
}

.admin-access-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.admin-access-actions button {
  min-width: 120px;
}

.admin-access-message {
  min-height: 22px;
  margin: 14px 2px 0;
  color: #d13d50;
  font-size: 14px;
  line-height: 1.6;
}

.admin-access-message.success {
  color: #1b8b4f;
}

.admin-shell-locked {
  visibility: hidden;
}

@media (max-width: 640px) {
  .admin-access-qr-row {
    flex-direction: column;
    align-items: stretch;
  }

  .admin-access-qr-code {
    width: 100%;
    max-width: 220px;
    height: 220px;
    margin: 0 auto;
    flex-basis: auto;
  }
}

.admin-v2-shell {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 240px 1fr;
  position: relative;
  isolation: isolate;
}

.admin-v2-shell::before,
.admin-v2-shell::after {
  content: '';
  position: fixed;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(18px);
}

.admin-v2-shell::before {
  top: 72px;
  left: 18%;
  width: 260px;
  height: 260px;
  background: radial-gradient(circle, rgba(74, 133, 255, 0.18), transparent 72%);
  animation: floatAura 15s ease-in-out infinite;
}

.admin-v2-shell::after {
  right: 4%;
  bottom: 5%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(80, 208, 255, 0.14), transparent 72%);
  animation: floatAura 19s ease-in-out infinite reverse;
}

.admin-v2-sidebar {
  position: sticky;
  top: 14px;
  align-self: start;
  height: calc(100vh - 28px);
  margin: 14px 0 14px 14px;
  background:
    linear-gradient(180deg, rgba(27, 43, 71, 0.98), rgba(32, 50, 77, 0.94)),
    #20324d;
  color: #dfe8f8;
  padding: 14px;
  border: 1px solid rgba(98, 127, 177, 0.16);
  border-radius: 24px;
  box-shadow: 0 24px 48px rgba(11, 22, 42, 0.24);
  overflow-y: auto;
}

.admin-v2-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.admin-v2-brand .logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #40be84;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.admin-v2-brand strong {
  display: block;
  font-size: 20px;
  color: #fff;
}

.admin-v2-brand small {
  color: #a8b6ce;
}

.admin-v2-nav {
  display: grid;
  gap: 10px;
}

.admin-nav-group {
  display: grid;
  gap: 4px;
  border-radius: 14px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.03);
}

.admin-nav-group-title {
  position: relative;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 15px;
  font-weight: 700;
  color: #d8e4fa;
  letter-spacing: 0.2px;
  cursor: pointer;
  user-select: none;
}

.admin-nav-group-title::after {
  content: '▾';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%) rotate(-90deg);
  color: #9cb1d6;
  font-size: 12px;
  transition: transform 0.18s ease;
}

.admin-nav-group.expanded .admin-nav-group-title {
  background: #2b466b;
}

.admin-nav-group.expanded .admin-nav-group-title::after {
  transform: translateY(-50%) rotate(0deg);
}

.admin-nav-item {
  border: 0;
  border-radius: 10px;
  padding: 9px 10px 9px 22px;
  text-align: left;
  cursor: pointer;
  background: transparent;
  color: #d8e4fa;
  margin-left: 4px;
  position: relative;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.admin-nav-item::before {
  content: '';
  position: absolute;
  left: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #9cb1d6;
  transform: translateY(-50%);
  opacity: 0.55;
}

.admin-nav-group:not(.expanded) .admin-nav-item {
  display: none;
}

.admin-nav-item.active,
.admin-nav-item:hover {
  background: linear-gradient(90deg, rgba(56, 94, 145, 0.92), rgba(43, 70, 107, 0.98));
  transform: translateX(3px);
  box-shadow: 0 10px 18px rgba(7, 18, 40, 0.16);
}

.admin-nav-item.active::before {
  opacity: 1;
  background: #d8e7ff;
}

.user-search-bar {
  display: grid;
  grid-template-columns: minmax(280px, 1fr) 120px 120px;
  gap: 8px;
}

.user-search-bar input {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.user-search-bar button {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

#ordersSearchForm {
  grid-template-columns: minmax(260px, 1fr) 180px 180px 100px 100px;
}

.order-detail-body {
  display: grid;
  gap: 12px;
}

.order-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 14px;
}

.order-detail-grid p {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid #dbe3f3;
  border-radius: 8px;
  background: #f8faff;
  display: grid;
  gap: 4px;
}

.order-detail-grid p span {
  color: #6a7694;
  font-size: 13px;
}

.order-detail-grid p b {
  color: #182953;
  word-break: break-all;
}

.order-detail-block {
  border: 1px dashed #cfd9ec;
  border-radius: 8px;
  padding: 10px;
  background: #f9fbff;
}

.order-detail-block strong {
  display: block;
  margin-bottom: 8px;
}

.order-detail-block pre {
  margin: 0;
  white-space: pre-wrap;
  word-break: break-all;
  font-size: 12px;
  color: #334262;
}

.table-pagination {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.table-pagination .ghost[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

.table-pagination .muted {
  min-width: 170px;
  text-align: center;
}

.table-op-btn {
  border: 1px solid #c8d3eb;
  background: #fff;
  color: #2d446f;
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
}

.table-op-btn:hover {
  background: #f4f7ff;
}

#usersTable th,
#usersTable td {
  vertical-align: middle;
  word-break: normal;
  overflow-wrap: anywhere;
}

#usersTable {
  min-width: 1480px;
}

#usersTable .status-pill,
#usersTable .table-op-btn {
  white-space: nowrap;
}

#usersTable .admin-user-col-id {
  min-width: 220px;
  color: #22395f;
  font-weight: 600;
}

#usersTable .admin-user-col-email {
  min-width: 200px;
}

#usersTable .admin-user-col-type,
#usersTable .admin-user-col-invite-code,
#usersTable .admin-user-col-invite-count,
#usersTable .admin-user-col-traffic,
#usersTable .admin-user-col-expiry,
#usersTable .admin-user-col-status,
#usersTable .admin-user-col-action,
#usersTable th:nth-child(3),
#usersTable th:nth-child(4),
#usersTable th:nth-child(5),
#usersTable th:nth-child(8),
#usersTable th:nth-child(9),
#usersTable th:nth-child(10),
#usersTable th:nth-child(11) {
  white-space: nowrap;
  text-align: center;
}

#usersTable .admin-user-col-invite-code {
  min-width: 92px;
  font-family: Consolas, 'Courier New', monospace;
  letter-spacing: 0.4px;
}

#usersTable .admin-user-col-invite-count,
#usersTable .admin-user-col-traffic,
#usersTable .admin-user-col-status,
#usersTable .admin-user-col-action {
  min-width: 96px;
}

#usersTable .admin-user-col-expiry {
  min-width: 132px;
  line-height: 1.5;
}

#usersTable .admin-user-col-password {
  min-width: 240px;
}

#usersTable .admin-user-col-plan {
  min-width: 280px;
}

.admin-user-password {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 7px 10px;
  border-radius: 12px;
  background: linear-gradient(180deg, #f7f9ff, #edf3ff);
  border: 1px solid #d7e1f7;
  color: #284066;
  font-family: Consolas, 'Courier New', monospace;
  line-height: 1.45;
}

.admin-user-password.is-muted {
  color: #5b6887;
  background: linear-gradient(180deg, #f9fbff, #f3f6fc);
}

.admin-user-plan-cell {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.admin-user-plan-cell strong {
  color: #22395f;
  font-size: 14px;
  line-height: 1.45;
}

.admin-user-plan-cell small {
  display: inline-flex;
  align-items: center;
  max-width: max-content;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef4ff;
  color: #4a5f88;
  font-size: 12px;
  line-height: 1.4;
}

.admin-user-status-cell {
  display: grid;
  justify-items: center;
  gap: 4px;
}

.admin-user-status-hint {
  color: #6c7895;
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
}

.admin-modal {
  position: fixed;
  inset: 0;
  z-index: 1300;
  background: rgba(11, 17, 31, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.admin-modal-dialog {
  width: min(1040px, 96vw);
  max-height: 88vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid #d6deef;
  background: #fff;
  box-shadow: 0 16px 36px rgba(12, 24, 52, 0.22);
}

#editPlanId {
  min-width: 100%;
}

.admin-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid #e0e7f4;
}

.admin-modal-head h4 {
  margin: 0;
  font-size: 22px;
}

.admin-modal-body {
  padding: 12px;
  display: grid;
  gap: 10px;
}

.admin-modal-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.admin-modal-grid label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  color: #334268;
}

.admin-modal-grid .span-2 {
  grid-column: span 2;
}

.admin-modal-grid input,
.admin-modal-grid select {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.user-amount-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px;
}

.admin-modal-actions {
  display: flex;
  justify-content: flex-end;
}

.admin-modal-actions button {
  border: 0;
  border-radius: 8px;
  background: #2f66f0;
  color: #fff;
  padding: 9px 16px;
  cursor: pointer;
}

.admin-v2-main {
  padding: 18px 18px 22px;
}

.admin-v2-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(214, 223, 240, 0.86);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(18px);
}

.admin-v2-header h1 {
  margin: 0;
  font-size: 28px;
}

.admin-v2-header p {
  margin: 4px 0 0;
  color: var(--muted);
}

.admin-v2-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.admin-v2-panel {
  display: none;
}

.admin-v2-panel.active {
  display: block;
}

.admin-v2-card {
  background:
    radial-gradient(circle at right top, rgba(84, 140, 255, 0.08), transparent 26%),
    linear-gradient(180deg, #ffffff, #f9fbff);
  border: 1px solid #d7deec;
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 34px rgba(21, 39, 80, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.admin-v2-card:hover {
  transform: translateY(-3px);
  border-color: #cfdaf6;
  box-shadow: 0 22px 42px rgba(21, 39, 80, 0.13);
}

.admin-v2-toolbar {
  margin-bottom: 10px;
}

.dashboard-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.dashboard-time-chip {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid #d1def7;
  background: #f4f8ff;
  color: #0b2a56;
  font-weight: 700;
  letter-spacing: 0.4px;
}

.dashboard-online-chart {
  position: relative;
  border: 1px solid #d7deec;
  border-radius: 16px;
  background:
    radial-gradient(circle at 14% 0%, rgba(76, 124, 249, 0.12), transparent 24%),
    linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  padding: 12px;
  min-height: 260px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65);
}

.dashboard-online-chart-canvas {
  width: 100%;
  min-height: 240px;
}

.dashboard-online-chart svg {
  width: 100%;
  height: 240px;
  display: block;
}

.dashboard-online-chart-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #72809f;
  font-size: 14px;
}

.dashboard-online-grid-line {
  stroke: #dbe4f4;
  stroke-width: 1;
}

.dashboard-online-axis-label {
  fill: #7783a2;
  font-size: 11px;
}

.dashboard-online-area {
  fill: rgba(65, 130, 255, 0.2);
  filter: drop-shadow(0 10px 16px rgba(47, 124, 249, 0.12));
}

.dashboard-online-line {
  fill: none;
  stroke: #2f7cf9;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 12px rgba(47, 124, 249, 0.16));
}

.dashboard-online-line-dot {
  fill: #ffffff;
  stroke: #2f7cf9;
  stroke-width: 2;
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}

.overview-stat {
  border: 1px solid #dbe1ef;
  border-radius: 16px;
  padding: 14px;
  background:
    radial-gradient(circle at right top, rgba(95, 127, 234, 0.1), transparent 26%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  border-top-width: 3px;
  box-shadow: 0 14px 28px rgba(19, 40, 84, 0.08);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.overview-stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 36px rgba(18, 51, 112, 0.14);
}

.overview-grid .overview-stat:nth-child(7n + 1) {
  border-top-color: #f26d8a;
}

.overview-grid .overview-stat:nth-child(7n + 2) {
  border-top-color: #45a0ff;
}

.overview-grid .overview-stat:nth-child(7n + 3) {
  border-top-color: #8f69ff;
}

.overview-grid .overview-stat:nth-child(7n + 4) {
  border-top-color: #35bf9b;
}

.overview-grid .overview-stat:nth-child(7n + 5) {
  border-top-color: #ff8f3d;
}

.overview-grid .overview-stat:nth-child(7n + 6) {
  border-top-color: #2ab35a;
}

.overview-grid .overview-stat:nth-child(7n) {
  border-top-color: #4c7dcf;
}

.overview-stat small {
  color: #596482;
  display: block;
}

.overview-stat b {
  font-size: 30px;
  display: block;
  margin-top: 5px;
}

.dashboard-support-card {
  overflow: hidden;
}

.dashboard-support-card .split-title {
  align-items: flex-start;
}

.dashboard-support-card .split-title h3 {
  margin-bottom: 6px;
}

.dashboard-support-card .split-title .muted {
  display: block;
  margin: 0;
}

.dashboard-support-card .support-admin-layout {
  height: min(70vh, 760px);
  min-height: 580px;
}

.dashboard-support-card .support-conversation-list-wrap,
.dashboard-support-card .support-chat-pane {
  box-shadow: 0 20px 40px rgba(32, 61, 120, 0.08);
  min-height: 0;
  height: 100%;
}

.dashboard-support-card .support-conversation-list {
  min-height: 0;
  height: 100%;
}

.dashboard-support-card .support-admin-messages {
  min-height: 0;
  background:
    radial-gradient(circle at top right, rgba(70, 118, 255, 0.08), transparent 30%),
    linear-gradient(180deg, rgba(247, 250, 255, 0.96), rgba(240, 245, 255, 0.9));
}

.support-integrated-card {
  padding: 20px;
}

.support-integrated-hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 4px;
}

.support-integrated-copy {
  max-width: 760px;
}

.support-integrated-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(71, 115, 243, 0.1);
  color: #3159c8;
  font-size: 13px;
  font-weight: 700;
}

.support-integrated-copy h3 {
  margin: 14px 0 10px;
  font-size: 30px;
  color: #16284f;
}

.support-integrated-copy p {
  margin: 0;
  max-width: 680px;
  color: #60719a;
  line-height: 1.75;
  font-size: 15px;
}

.support-integrated-hero button {
  border: 0;
  border-radius: 16px;
  padding: 14px 22px;
  min-width: 180px;
  background: linear-gradient(135deg, #3f74ff, #274fca);
  color: #fff;
  font-weight: 700;
  box-shadow: 0 16px 32px rgba(47, 102, 240, 0.26);
}

.admin-v2-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.inline-form,
.stack-form,
.smtp-grid {
  display: grid;
  gap: 8px;
}

.inline-form {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.inline-form.compact {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.smtp-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.stack-form input,
.inline-form input,
.inline-form select,
.smtp-grid input,
.smtp-grid select,
.stack-form select {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.stack-form button,
.inline-form button,
.smtp-grid button {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.package-admin-layout {
  display: grid;
  grid-template-columns: 1.25fr 0.75fr;
  gap: 12px;
}

.package-admin-form {
  display: grid;
  gap: 10px;
}

.package-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.package-admin-form input,
.package-admin-form select,
.package-admin-form textarea {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.package-admin-form textarea {
  resize: vertical;
  min-height: 92px;
}

.check-inline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
  color: #334068;
}

.check-inline input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
}

.package-price-group {
  border: 1px dashed #c7d2ea;
  border-radius: 10px;
  padding: 10px;
  background: #f9fbff;
}

.package-group-title {
  margin: 0 0 8px;
  color: #4f5d82;
  font-weight: 700;
}

.package-price-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
}

.package-price-grid.single {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.package-node-group {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d6e0f3;
  border-radius: 16px;
  background:
    radial-gradient(circle at top right, rgba(87, 154, 255, 0.12), transparent 34%),
    linear-gradient(180deg, #fbfdff, #f5f9ff);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.package-node-group .split-title {
  align-items: center;
}

.package-node-group .split-title small {
  color: #68789c;
  line-height: 1.5;
}

.package-node-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.package-node-toolbar .ghost {
  min-width: 132px;
}

.package-node-selector {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}

.package-node-option {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 12px 14px;
  border: 1px solid #d8e3f8;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 250, 255, 0.98));
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.package-node-option:hover {
  transform: translateY(-1px);
  border-color: #9db9ff;
  box-shadow: 0 16px 30px rgba(57, 97, 170, 0.12);
}

.package-node-option input[type='checkbox'] {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #2f66f0;
}

.package-node-option-main {
  min-width: 0;
  display: grid;
  gap: 4px;
}

.package-node-option-main strong {
  color: #18335f;
  font-size: 15px;
}

.package-node-option-main small {
  color: #657593;
  font-size: 12px;
  line-height: 1.55;
  word-break: break-all;
}

.package-node-option-status {
  justify-self: end;
  padding: 5px 10px;
  border-radius: 999px;
  background: #eef3ff;
  color: #4060a3;
  font-size: 12px;
  font-style: normal;
  white-space: nowrap;
}

.package-node-option:has(input:checked) {
  border-color: #5e88f3;
  background:
    radial-gradient(circle at top right, rgba(94, 136, 243, 0.16), transparent 34%),
    linear-gradient(180deg, #f8fbff, #edf4ff);
  box-shadow: 0 18px 34px rgba(59, 100, 183, 0.14);
}

.package-admin-node-meta {
  margin: 8px 0 0;
  color: #4c628f;
  font-size: 13px;
  line-height: 1.6;
}

.package-form-actions {
  display: flex;
  gap: 8px;
}

.package-form-actions button {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.package-form-actions .ghost {
  background: #fff;
  border: 1px solid #ccd5ea;
  color: #2b426f;
}

.quick-subscribe-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.quick-subscribe-form input {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.quick-subscribe-form button {
  grid-column: 1 / -1;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.home-notice-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.home-notice-form input,
.home-notice-form select,
.home-notice-form textarea {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.home-notice-form textarea {
  grid-column: 1 / -1;
  resize: vertical;
  min-height: 90px;
}

.home-notice-form button {
  grid-column: 1 / -1;
  border: 0;
  border-radius: 8px;
  padding: 10px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.package-preview-wrap {
  border: 1px solid #d8dff0;
  border-radius: 10px;
  background: #f9fbff;
  padding: 10px;
}

.package-preview-wrap h4 {
  margin: 0 0 8px;
}

.package-live-preview {
  min-height: 220px;
}

.package-preview-card {
  border: 1px solid #d4ddee;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}

.package-preview-head {
  color: #fff;
  padding: 10px;
}

.package-preview-head h5 {
  margin: 0;
  font-size: 18px;
}

.package-preview-head p {
  margin: 4px 0 0;
  opacity: 0.95;
}

.package-preview-image {
  display: block;
  width: 100%;
  max-height: 92px;
  object-fit: cover;
  border-radius: 8px;
  margin-bottom: 6px;
}

.package-preview-body {
  padding: 10px;
}

.package-preview-prices {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.package-preview-prices span {
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 12px;
  background: #edf2fe;
  color: #4e5f90;
}

.package-preview-features {
  margin: 8px 0 0;
  padding-left: 18px;
  display: grid;
  gap: 4px;
  color: #2d3757;
}

.package-admin-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}

.package-admin-card {
  border: 1px solid #d6dff2;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(circle at right top, rgba(94, 145, 255, 0.1), transparent 24%),
    linear-gradient(180deg, #ffffff, #f8fbff);
  box-shadow: 0 16px 32px rgba(21, 41, 84, 0.08);
  transition: transform 0.24s ease, box-shadow 0.24s ease, border-color 0.24s ease;
}

.package-admin-card:hover {
  transform: translateY(-4px);
  border-color: #cbd8f6;
  box-shadow: 0 22px 40px rgba(21, 41, 84, 0.14);
}

.package-admin-card .head {
  color: #fff;
  padding: 10px;
}

.package-admin-card .head p {
  margin: 4px 0 0;
  opacity: 0.95;
}

.package-admin-card .body {
  padding: 10px;
}

.package-admin-meta {
  color: #5d6786;
  font-size: 13px;
}

.package-price-tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}

.package-price-tags span {
  border-radius: 999px;
  padding: 4px 8px;
  background: #eff4ff;
  color: #50618f;
  font-size: 12px;
}

.package-admin-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.package-admin-actions button {
  border-radius: 8px;
  border: 1px solid #ccd5ea;
  background: #fff;
  color: #2b426f;
  padding: 6px 10px;
  cursor: pointer;
}

.package-admin-actions .danger {
  border-color: #efc6c6;
  color: #b33939;
}

.coupon-admin-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 12px;
}

.coupon-admin-form {
  display: grid;
  gap: 10px;
}

.coupon-field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.coupon-admin-form input,
.coupon-admin-form select,
.coupon-admin-form textarea {
  width: 100%;
  border: 1px solid #ccd4e8;
  border-radius: 8px;
  padding: 8px;
}

.coupon-admin-form textarea {
  resize: vertical;
  min-height: 84px;
}

.coupon-form-actions {
  display: flex;
  gap: 8px;
}

.coupon-form-actions button {
  border: 0;
  border-radius: 8px;
  padding: 9px 12px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.coupon-form-actions .ghost {
  background: #fff;
  border: 1px solid #ccd5ea;
  color: #2b426f;
}

.coupon-table-wrap {
  max-height: 520px;
  overflow: auto;
}

.mt-12 {
  margin-top: 12px;
}

@keyframes inviteSweep {
  0% { transform: rotate(16deg) translateX(-240px); }
  100% { transform: rotate(16deg) translateX(840px); }
}

@keyframes btnCodeLoading {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

@keyframes storeButtonSweep {
  0% { transform: translateX(-220%) skewX(-24deg); }
  100% { transform: translateX(520%) skewX(-24deg); }
}

@keyframes floatAura {
  0%,
  100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(0, -18px, 0) scale(1.06); }
}

@keyframes softFloat {
  0%,
  100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}

@keyframes riseIn {
  0% {
    opacity: 0;
    transform: translate3d(0, 24px, 0) scale(0.985);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

.motion-stage {
  perspective: 1200px;
}

.motion-item {
  opacity: 0;
  transform: translate3d(0, 24px, 0) scale(0.985);
  filter: blur(8px);
  animation: riseIn 0.64s cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  animation-delay: var(--motion-delay, 0ms);
  will-change: transform, opacity, filter;
}

.motion-item.motion-soft {
  animation-duration: 0.54s;
}

.motion-item.motion-fast {
  animation-duration: 0.42s;
}

@media (prefers-reduced-motion: reduce) {
  .layout-airport::before,
  .layout-airport::after,
  .admin-v2-shell::before,
  .admin-v2-shell::after,
  .invite-envelope,
  .airport-invite::after,
  .lightning-mark,
  .btn-code.is-loading,
  .store-buy-btn::after,
  .motion-item {
    animation: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
}

@media (max-width: 1400px) {
  .auth-left-panel .slogan { font-size: 20px; }
  .auth-left-panel h2 { font-size: 24px; }
  .slogan-en { font-size: 18px; }

  .airport-topbar h2 { font-size: 28px; }
  .invite-content h3 { font-size: 30px; }
  .user-card h3 { font-size: 30px; }
  .user-card p { font-size: 16px; }
  .user-card-actions button { font-size: 16px; }
  .quick-import-card h4 { font-size: 18px; }
  .quick-import { font-size: 15px; }
  .usage-card h4 { font-size: 20px; }
  .usage-text { font-size: 24px; }
  .home-notice-head h4 { font-size: 28px; }
  .home-notice-highlight-line { font-size: 30px; }
  .home-notice-body { font-size: 18px; }
}

@media (max-width: 1100px) {
  .auth-screen {
    grid-template-columns: 1fr;
  }

  .auth-left-panel {
    padding: 14px 18px;
    min-height: auto;
    align-items: center;
  }

  .auth-mobile-welcome {
    display: block;
    width: 100%;
    text-align: center;
  }

  .auth-mobile-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 76px;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    color: rgba(255, 255, 255, 0.98);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14);
  }

  .auth-mobile-welcome h2 {
    margin: 10px 0 4px;
    font-size: 26px;
    line-height: 1.12;
    color: #fff;
  }

  .auth-mobile-welcome p {
    margin: 0;
    font-size: 13px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.86);
  }

  .world-shape,
  .auth-left-panel .slogan,
  .auth-left-panel > h2,
  .auth-left-panel .slogan-en {
    display: none;
  }

  .auth-right-panel {
    justify-content: flex-start;
  }

  .auth-right-panel > h1,
  .auth-right-panel > .auth-line,
  .auth-right-panel > .auth-form,
  .auth-right-panel > .msg,
  .auth-right-panel > small {
    width: 100%;
  }

  .auth-right-panel h1 {
    font-size: 26px;
  }

  .auth-line {
    margin: 10px 0 18px;
  }

  .layout-airport {
    grid-template-columns: 1fr;
  }

  .airport-main {
    padding: 10px;
  }

  .airport-topbar {
    position: sticky;
    top: 0;
    z-index: 20;
    background: rgba(248, 251, 255, 0.88);
    padding: 10px 12px;
    gap: 10px;
    border-radius: 16px;
  }

  .airport-topbar h2 {
    margin-right: auto;
    font-size: 24px;
  }

  .topbar-actions {
    gap: 8px;
    font-size: 14px;
    padding-left: 0;
    border-left: 0;
  }

  .topbar-actions span {
    display: none;
  }

  .topbar-actions .ghost {
    padding: 6px 10px;
    border-radius: 9px;
  }

  .mobile-menu-toggle {
    display: inline-flex;
  }

  .airport-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 320px);
    z-index: 40;
    border-right: 1px solid var(--line);
    border-bottom: 0;
    overflow-y: auto;
    transform: translateX(-108%);
    transition: transform 0.24s ease;
    box-shadow: 16px 0 36px rgba(18, 31, 68, 0.2);
    margin: 0;
    height: 100vh;
    border-radius: 0 24px 24px 0;
  }

  .layout-airport.mobile-menu-open .airport-sidebar {
    transform: translateX(0);
  }

  .mobile-menu-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 35;
    border: 0;
    background: rgba(6, 16, 42, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .layout-airport.mobile-menu-open .mobile-menu-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .airport-top-grid,
  .subscription-layout,
  .renew-layout,
  .profile-grid-two,
  .referral-grid-two,
  .admin-v2-grid-2,
  .overview-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-toolbar {
    flex-direction: column;
    align-items: stretch;
  }

  .tutorial-landing-wrap,
  .tutorial-detail-wrap {
    padding: 12px;
  }

  .tutorial-hero {
    height: 120px;
  }

  .tutorial-platform-grid {
    grid-template-columns: 1fr;
  }

  .tutorial-platform-card {
    min-height: 160px;
  }

  .tutorial-platform-card h4 {
    font-size: 24px;
  }

  .tutorial-help-head h4 {
    font-size: 20px;
  }

  .tutorial-help-toggle {
    font-size: 18px;
  }

  .tutorial-help-content p {
    font-size: 16px;
  }

  .tutorial-detail-top h3 {
    font-size: 28px;
  }

  .tutorial-detail-top p {
    font-size: 16px;
  }

  .tutorial-detail-item-head h4 {
    font-size: 24px;
  }

  .tutorial-detail-item-body p {
    font-size: 16px;
  }

  .tutorial-detail-item-actions {
    flex-wrap: wrap;
  }

  .tutorial-detail-item-actions .btn-yellow,
  .tutorial-detail-item-actions .tutorial-view-btn,
  .btn-magenta {
    font-size: 18px;
    padding: 8px 14px;
  }

  .tutorial-subscription-card h4 {
    font-size: 24px;
  }

  .tutorial-subscription-card p {
    font-size: 16px;
  }

  .store-cards {
    grid-template-columns: 1fr;
  }

  .admin-v2-shell {
    grid-template-columns: 1fr;
  }

  .admin-v2-sidebar {
    position: relative;
    top: auto;
    height: auto;
    margin: 0 0 12px;
    border-radius: 22px;
  }

  .admin-v2-main {
    padding: 10px;
  }

  .package-admin-layout,
  .coupon-admin-layout,
  .coupon-field-grid,
  .package-field-grid,
  .package-price-grid,
  .user-search-bar,
  #ordersSearchForm,
  .user-amount-row,
  .admin-modal-grid,
  .quick-subscribe-form,
  .home-notice-form,
  .tutorial-admin-layout,
  .tutorial-field-grid,
  .tutorial-account-row,
  .tutorial-help-row,
  .ios-login-guard-grid,
  .ios-account-grid {
    grid-template-columns: 1fr;
  }

  .subscription-main-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .package-node-selector {
    grid-template-columns: 1fr;
  }

  .admin-modal-grid .span-2 {
    grid-column: span 1;
  }

  .subscription-node-grid {
    grid-template-columns: 1fr;
  }

  .order-detail-grid {
    grid-template-columns: 1fr;
  }

  .renew-coupon-inline {
    grid-template-columns: 1fr;
  }

  .home-notice-head h4 {
    font-size: 24px;
  }

  .home-notice-highlight-line {
    font-size: 22px;
  }

  .home-notice-body {
    font-size: 16px;
  }
}

@media (max-width: 640px) {
  .auth-screen {
    padding: 10px;
    gap: 10px;
  }

  .auth-left-panel {
    padding: 12px 14px;
    border-radius: 16px;
  }

  .auth-mobile-welcome h2 {
    margin: 0;
    font-size: 24px;
  }

  .auth-right-panel {
    padding: 22px 18px;
    border-radius: 18px;
  }

  .auth-right-panel h1 {
    font-size: 24px;
  }

  .theme-user .table-wrap {
    overflow: visible;
  }

  .theme-user .table-wrap.table-scroll-10 {
    overflow: auto;
  }

  .theme-user .simple-table {
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0;
  }

  .theme-user .simple-table thead {
    display: none;
  }

  .theme-user .simple-table tbody {
    display: grid;
    gap: 12px;
  }

  .theme-user .simple-table tr {
    display: block;
    background:
      radial-gradient(circle at right top, rgba(88, 137, 255, 0.08), transparent 28%),
      linear-gradient(180deg, #ffffff, #f8fbff);
    border: 1px solid #dce4f4;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(24, 39, 76, 0.08);
    overflow: hidden;
  }

  .theme-user .simple-table td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    width: 100%;
    padding: 12px 14px;
    border-bottom: 1px solid #edf1f8;
    font-size: 14px;
    text-align: right;
  }

  .theme-user .simple-table td::before {
    content: attr(data-label);
    flex: 0 0 88px;
    color: #5d6a88;
    font-weight: 700;
    text-align: left;
  }

  .theme-user .simple-table td:last-child {
    border-bottom: 0;
  }

  .theme-user .simple-table td > * {
    max-width: calc(100% - 96px);
  }

  .theme-user .simple-table .td-action {
    align-items: center;
  }

  .theme-user .simple-table .td-action .link-btn {
    padding: 0;
  }

  .theme-user .simple-table tr.empty-row td {
    display: block;
    padding: 18px 16px;
    text-align: center;
    color: #66738f;
    border-bottom: 0;
  }

  .theme-user .simple-table tr.empty-row td::before {
    display: none;
  }

  .theme-user .order-no,
  .theme-user .status-pill {
    max-width: 100%;
  }

  .referral-stats {
    grid-template-columns: 1fr;
  }

  .stat-box {
    min-height: auto;
    padding: 14px 16px;
  }

  .stat-box small {
    font-size: 13px;
  }

  .stat-box b {
    font-size: 18px;
  }

  .split-title h3 {
    width: 100%;
    margin-bottom: 0;
  }

  .split-title .ghost {
    width: 100%;
  }

  .tutorial-platform-card h4 {
    font-size: 22px;
  }

  .tutorial-help-toggle {
    font-size: 16px;
  }

  .tutorial-detail-top h3 {
    font-size: 24px;
  }

  .tutorial-detail-item-head h4 {
    font-size: 22px;
  }
}

@media (max-width: 520px) {
  .auth-screen {
    padding: 8px;
  }

  .auth-mobile-badge,
  .auth-mobile-welcome p {
    display: none;
  }

  .auth-mobile-welcome h2 {
    font-size: 22px;
  }

  .auth-right-panel {
    padding: 18px 14px;
  }

  .auth-right-panel h1 {
    font-size: 22px;
  }

  .row-two {
    grid-template-columns: 1fr 112px;
  }

  .row-code {
    grid-template-columns: 1fr 84px;
  }

  .theme-user .simple-table td {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 6px;
  }

  .theme-user .simple-table td::before {
    flex: 0 0 auto;
  }

  .theme-user .simple-table td > * {
    max-width: 100%;
  }

  .theme-user .simple-table .td-action {
    align-items: flex-start;
  }
}




























/* Support chat */
.support-chat-modal {
  position: fixed;
  inset: 0;
  background: rgba(11, 20, 45, 0.36);
  z-index: 2100;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 16px;
}

.support-chat-dialog {
  width: min(420px, calc(100vw - 20px));
  height: min(620px, calc(100vh - 40px));
  background: #fff;
  border: 1px solid #d4dcef;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 56px rgba(18, 32, 67, 0.26);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
}

.support-chat-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 12px 14px 10px;
  border-bottom: 1px solid #e4e9f6;
  gap: 10px;
}

.support-chat-head h4 {
  margin: 0;
  font-size: 18px;
}

.support-chat-head .muted {
  margin: 4px 0 0;
  font-size: 12px;
}

.support-chat-status {
  padding: 8px 14px;
  font-size: 13px;
  color: #35507d;
  background: #eef3ff;
  border-bottom: 1px solid #e2e8f8;
}

.support-chat-status.offline {
  color: #8a5a13;
  background: #fff6df;
}

.support-chat-messages,
.support-admin-messages {
  overflow-y: auto;
  padding: 12px;
  display: grid;
  gap: 10px;
  align-content: start;
  background: #f7f9fe;
}

.support-msg {
  background: #fff;
  border: 1px solid #dbe4f6;
  border-radius: 12px;
  padding: 9px 10px;
  max-width: 94%;
}

.support-msg.mine {
  margin-left: auto;
  border-color: #a6c0ff;
  background: #edf3ff;
}

.support-msg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}

.support-msg-head strong {
  font-size: 13px;
}

.support-msg-head small {
  color: #7280a6;
  font-size: 12px;
}

.support-msg-body {
  font-size: 14px;
  line-height: 1.55;
  color: #1f2e52;
  word-break: break-word;
}

.support-msg-text {
  font-size: 14px;
  line-height: 1.55;
  color: #1f2e52;
  word-break: break-word;
}

.support-msg-image-wrap {
  display: grid;
  gap: 8px;
}

.support-msg-image {
  display: block;
  width: auto;
  max-width: min(320px, 100%);
  max-height: 360px;
  border-radius: 10px;
  border: 1px solid #d7e2f5;
  background: #fff;
  cursor: zoom-in;
}

.support-chat-input-row,
.support-reply-row {
  border-top: 1px solid #dfe6f7;
  background: #fff;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.support-chat-input-row textarea,
.support-reply-row textarea {
  width: 100%;
  resize: none;
  border: 1px solid #cfd8ee;
  border-radius: 10px;
  padding: 8px 10px;
  min-height: 44px;
  background: #fff;
}

.support-input-stack {
  min-width: 0;
  display: grid;
  gap: 6px;
}

.support-input-tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.support-tool-btn {
  border: 1px solid #c7d4ef !important;
  background: #fff !important;
  color: #2b426f !important;
  border-radius: 8px !important;
  padding: 6px 10px !important;
  font-size: 12px;
}

.support-chat-input-row > button,
.support-reply-row > button,
.support-admin-settings-actions button {
  border: 0;
  border-radius: 10px;
  padding: 10px 16px;
  color: #fff;
  background: linear-gradient(90deg, #2f66f0, #3d75f2);
  cursor: pointer;
}

.support-chat-input-row > button[disabled],
.support-reply-row > button[disabled],
.support-tool-btn[disabled],
.support-admin-settings-actions button[disabled] {
  opacity: 0.65;
  cursor: not-allowed;
}

.support-admin-settings {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  gap: 10px;
  align-items: end;
}

.support-admin-settings label {
  display: grid;
  gap: 6px;
  font-size: 14px;
}

.support-admin-settings label.span-2 {
  grid-column: span 1;
}

.support-admin-settings select,
.support-admin-settings input {
  border: 1px solid #ccd6ef;
  border-radius: 10px;
  padding: 9px 10px;
}

.support-admin-layout {
  display: grid;
  grid-template-columns: minmax(420px, 520px) 1fr;
  gap: 12px;
  min-height: 520px;
  align-items: stretch;
}

.support-conversation-list-wrap {
  border: 1px solid #dbe3f5;
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
  min-height: 0;
}

.support-search-row {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 120px 76px;
  gap: 8px;
  border-bottom: 1px solid #e2e8f8;
  background: rgba(255, 255, 255, 0.96);
  position: sticky;
  top: 0;
  z-index: 2;
}

.support-search-row input,
.support-search-row select {
  border: 1px solid #ced8ee;
  border-radius: 10px;
  padding: 8px 10px;
}

.support-search-row button {
  border: 0;
  border-radius: 10px;
  background: #2f66f0;
  color: #fff;
  cursor: pointer;
}

.support-conversation-list {
  overflow-y: auto;
  padding: 8px;
  display: grid;
  gap: 8px;
  align-content: start;
  min-height: 0;
  overscroll-behavior: contain;
}

.support-conversation-item {
  border: 1px solid #d4ddf1;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  padding: 8px 9px;
  cursor: pointer;
  width: 100%;
  display: grid;
  gap: 6px;
}

.support-conversation-item.active {
  border-color: #5d86f4;
  background: #eef4ff;
}

.support-conversation-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.support-conversation-line strong {
  display: block;
  min-width: 0;
  word-break: break-all;
}

.support-conversation-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12px;
  color: #637197;
}

.support-conversation-meta small {
  color: #7181a8;
  white-space: normal;
  flex-shrink: 0;
  text-align: right;
}

.support-conversation-status {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 0 8px;
  border-radius: 999px;
  background: #eef3ff;
  color: #4560a6;
  font-size: 12px;
}

.support-conversation-preview {
  margin: 0;
  font-size: 12px;
  color: #637197;
  line-height: 1.4;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.support-unread {
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #ea4b56;
  color: #fff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.support-chat-pane {
  border: 1px solid #dbe3f5;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 0;
}

.support-chat-pane-head {
  border-bottom: 1px solid #e2e8f8;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: rgba(255, 255, 255, 0.96);
  position: sticky;
  top: 0;
  z-index: 2;
}

.support-chat-pane-head h4 {
  margin: 0;
  font-size: 18px;
}

.support-chat-pane-head .muted {
  margin: 4px 0 0;
  font-size: 12px;
}

.support-admin-messages {
  min-height: 0;
  overscroll-behavior: contain;
}

.support-reply-row {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -14px 26px rgba(20, 49, 103, 0.08);
}

@media (max-width: 1100px) {
  .support-admin-settings {
    grid-template-columns: 1fr;
  }

  .support-admin-layout {
    grid-template-columns: 1fr;
    min-height: 0;
    height: auto;
  }

  .support-search-row {
    grid-template-columns: 1fr;
  }

  .support-chat-input-row,
  .support-reply-row {
    grid-template-columns: 1fr;
  }

  .support-chat-input-row > button,
  .support-reply-row > button {
    width: 100%;
  }

  .dashboard-support-card .support-admin-layout {
    height: auto;
    min-height: 0;
  }

  .dashboard-support-card .support-conversation-list {
    max-height: 280px;
  }

  .dashboard-support-card .support-admin-messages {
    max-height: 420px;
  }

  .support-integrated-hero {
    flex-direction: column;
    align-items: flex-start;
  }

  .support-integrated-hero button {
    width: 100%;
  }

  .support-chat-modal {
    align-items: center;
    justify-content: center;
    padding: 8px;
  }

  .support-chat-dialog {
    width: 100%;
    height: min(680px, calc(100vh - 16px));
  }
}