:root {
  --app-blue: #1a56db;
  --app-blue-dark: #1747b8;
  --app-blue-soft: #eff6ff;
  --app-green: #16a34a;
  --app-green-soft: #f0fdf4;
  --app-ink: #0f172a;
  --app-text: #334155;
  --app-muted: #64748b;
  --app-line: #e2e8f0;
  --app-soft: #f8fafc;
  --app-card: #ffffff;
  --app-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
  --app-radius: 8px;
}

body {
  background:
    radial-gradient(circle at 12% 8%, rgba(26, 86, 219, 0.08), transparent 28rem),
    linear-gradient(180deg, #f8fbff 0%, #f8fafc 46%, #fff 100%) !important;
}

body.loaded #main-wrapper {
  min-height: 100vh;
}

#app-nav {
  height: 64px !important;
  background: rgba(255, 255, 255, 0.94) !important;
  border-bottom: 1px solid var(--app-line) !important;
  box-shadow: 0 1px 0 rgba(15, 23, 42, 0.03) !important;
}

#app-nav .nav-inner {
  max-width: 1160px !important;
  padding: 0 22px !important;
}

#app-nav .nav-logo img {
  width: 34px !important;
  height: 34px !important;
  border-radius: 8px !important;
}

#app-nav .nav-logo-text {
  color: var(--app-ink) !important;
  font-weight: 800 !important;
}

#app-nav .nav-links {
  padding: 4px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: 999px !important;
  background: var(--app-soft) !important;
}

#app-nav .nav-links a {
  min-height: 34px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  color: var(--app-text) !important;
  font-weight: 700 !important;
}

#app-nav .nav-links a:hover,
#app-nav .nav-links a.nav-active,
#app-nav .nav-links a.active {
  background: #fff !important;
  color: var(--app-blue) !important;
  box-shadow: 0 1px 6px rgba(15, 23, 42, 0.08) !important;
}

#app-nav .nav-btn {
  min-height: 38px !important;
  border-radius: 999px !important;
  font-weight: 800 !important;
}

#app-nav .nav-btn--logout {
  color: #b91c1c !important;
  background: #fff !important;
}

#main-wrapper {
  padding-top: 64px !important;
}

#instruction_panel,
#simInstructions,
#purchaseService_panel,
#payment_panel,
#simActivation_panel,
#cardSummary_panel {
  color: var(--app-text) !important;
}

.instr-page {
  max-width: 920px !important;
  padding: 34px 20px 84px !important;
}

.instr-brand {
  width: 100% !important;
  justify-content: flex-start !important;
  align-items: center !important;
  padding: 22px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow) !important;
}

.instr-brand h1 {
  font-size: 1.55rem !important;
  font-weight: 900 !important;
  color: var(--app-ink) !important;
  letter-spacing: 0 !important;
}

.instr-brand p {
  margin-top: 4px !important;
  color: var(--app-muted) !important;
}

.instr-grid {
  gap: 16px !important;
}

.menu-card {
  border-radius: var(--app-radius) !important;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.06) !important;
}

.menu-card a {
  min-height: 156px !important;
}

.menu-card-icon {
  border-radius: var(--app-radius) !important;
  background: var(--app-blue-soft) !important;
}

.menu-card-body h2 {
  font-weight: 850 !important;
  color: var(--app-ink) !important;
}

.menu-card-body p {
  color: var(--app-muted) !important;
}

.panel-hero,
.payment-hero,
.activation-hero {
  max-width: 960px;
  margin: 0 auto 18px;
  padding: 22px;
  border: 1px solid var(--app-line);
  border-radius: var(--app-radius);
  background: #fff;
  box-shadow: var(--app-shadow);
}

#purchaseService_panel > .panel-hero {
  float: none !important;
  width: auto !important;
  max-width: 960px !important;
  margin: 0 auto 18px !important;
  padding: 22px !important;
  background: #fff !important;
}

.panel-kicker {
  display: block;
  margin-bottom: 7px;
  color: var(--app-blue);
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.panel-hero h1,
.payment-hero h1,
.activation-hero h1 {
  margin: 0;
  color: var(--app-ink);
  font-size: 1.65rem;
  line-height: 1.15;
  font-weight: 900;
}

.panel-hero p,
.payment-hero p,
.activation-hero p {
  max-width: 720px;
  margin: 8px 0 0;
  color: var(--app-muted);
  font-size: 0.95rem;
  line-height: 1.55;
}

#purchaseService_panel {
  padding: 24px 18px 70px !important;
  background: transparent !important;
}

#purchaseService_panel > div:nth-child(2) {
  max-width: 960px !important;
  margin: 0 auto 14px !important;
  padding: 0 !important;
  float: none !important;
  background: transparent !important;
}

#tableSearch {
  display: block !important;
  max-width: 420px !important;
  width: 100% !important;
  height: 44px !important;
  margin: 0 auto 16px !important;
  padding: 0 14px !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
}

#paymentTable {
  width: min(960px, 100%) !important;
  margin: 0 auto !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--app-line) !important;
  border-radius: var(--app-radius) !important;
  background: #fff !important;
  box-shadow: var(--app-shadow) !important;
}

#paymentTable th {
  padding: 12px 10px !important;
  background: var(--app-soft) !important;
  color: var(--app-ink) !important;
  font-size: 0.78rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
}

#paymentTable td {
  padding: 12px 10px !important;
  border-top: 1px solid #f1f5f9 !important;
}

#paymentTable_pagination {
  max-width: 960px !important;
  margin: 14px auto !important;
}

#purchaseService_checkOutButton,
#placeServiceOrderButton,
#ActivateTrackerButton {
  border-radius: var(--app-radius) !important;
  background: var(--app-blue) !important;
  color: #fff !important;
  font-weight: 900 !important;
  box-shadow: 0 14px 28px rgba(26, 86, 219, 0.22) !important;
}

#purchaseService_checkOutButton:hover,
#placeServiceOrderButton:hover,
#ActivateTrackerButton:hover {
  background: var(--app-blue-dark) !important;
  transform: translateY(-1px) !important;
}

#payment_panel,
#simActivation_panel {
  padding: 24px 18px 70px !important;
  background:
    radial-gradient(circle at 10% 10%, rgba(26, 86, 219, 0.08), transparent 24rem),
    var(--app-soft) !important;
}

#payment_panel .row.flex-column-reverse,
#simActivation_panel .shadow1 {
  max-width: 960px !important;
}

#payment_panel .col-75,
#payment_panel #order_summary,
#simActivation_panel .shadow1 > div > div,
#simActivation_panel .activation-steps,
#simActivation_panel #message_body {
  border-radius: var(--app-radius) !important;
}

#payment_panel #order_summary {
  border: 1px solid var(--app-line) !important;
}

#payment_panel label,
#simActivation_panel label {
  color: var(--app-text) !important;
}

#payment_panel input[type="text"],
#payment_panel input[type="email"],
#payment_panel .form-control,
#simActivation_panel .form-control {
  border-radius: var(--app-radius) !important;
}

#simActivation_panel .activation-steps {
  background: #fff !important;
  border: 1px solid var(--app-line) !important;
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.04) !important;
}

#simActivation_panel .step-badge {
  background: var(--app-blue) !important;
  font-weight: 900 !important;
}

#cardSummary_panel.sim-panel {
  max-width: 1160px !important;
  margin: 24px auto 70px !important;
  padding: 0 18px !important;
}

#cardSummary_content,
.sim-panel-header,
.sim-instructions {
  border-radius: var(--app-radius) !important;
}

.page {
  padding-left: 16px !important;
  padding-right: 16px !important;
}

.brand-header h1 {
  font-size: 1.45rem !important;
  font-weight: 900 !important;
  color: var(--app-ink) !important;
}

.login-benefits {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin: -10px 0 18px;
}

.login-benefits span {
  display: inline-flex;
  min-height: 30px;
  align-items: center;
  padding: 5px 10px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: #fff;
  color: var(--app-muted);
  font-size: 0.78rem;
  font-weight: 800;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.04);
}

.app-download-callout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px 12px;
  max-width: 460px;
  margin: -6px auto 18px;
  padding: 10px 12px;
  border: 1px solid #bfdbfe;
  border-radius: var(--app-radius);
  background: var(--app-blue-soft);
  color: var(--app-text);
  font-size: 0.9rem;
  font-weight: 700;
  text-align: center;
}

.app-download-callout a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--app-blue);
  font-weight: 900;
  text-decoration: none;
}

.app-download-callout svg {
  flex: 0 0 auto;
}

.app-download-callout a:hover {
  text-decoration: underline;
}

.card {
  border-radius: var(--app-radius) !important;
  box-shadow: var(--app-shadow) !important;
}

.btn-primary {
  border-radius: var(--app-radius) !important;
  font-weight: 900 !important;
  background: var(--app-blue) !important;
}

.btn-primary:hover {
  background: var(--app-blue-dark) !important;
}

@media (max-width: 760px) {
  #app-nav {
    height: 60px !important;
  }

  #main-wrapper {
    padding-top: 60px !important;
  }

  #app-nav .nav-links {
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
  }

  .instr-page {
    padding-top: 22px !important;
  }

  .instr-brand,
  .panel-hero,
  .payment-hero,
  .activation-hero {
    padding: 18px !important;
  }

  .instr-grid {
    grid-template-columns: 1fr !important;
  }

  .menu-card a {
    min-height: 120px !important;
  }

  #paymentTable {
    display: block !important;
    overflow-x: auto !important;
  }
}