:root {
  color: #172033;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #eef3fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(24, 90, 219, 0.16), transparent 34rem),
    linear-gradient(180deg, #f8fbff 0%, #eef3fb 46%, #f7f9fc 100%);
  margin: 0;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

button,
.primary,
.secondary,
.ghost {
  align-items: center;
  border: 0;
  border-radius: 14px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  justify-content: center;
  padding: 12px 16px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

button:hover,
.primary:hover,
.secondary:hover,
.ghost:hover {
  transform: translateY(-1px);
}

button,
.primary {
  background: #185adb;
  box-shadow: 0 12px 30px rgba(24, 90, 219, 0.24);
  color: white;
}

button.danger {
  background: #b42318;
  box-shadow: 0 12px 30px rgba(180, 35, 24, 0.18);
}

button.small {
  border-radius: 10px;
  font-size: 12px;
  padding: 8px 10px;
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none;
}

.secondary {
  background: #ffffff;
  border: 1px solid #d6e0ef;
  color: #185adb;
}

.ghost {
  background: transparent;
  color: #185adb;
}

.landing,
.admin,
.adminShell {
  margin: 0 auto;
  max-width: 1240px;
  padding: 24px;
}

.nav,
.sectionHeader,
.tableTitle,
.requestTop,
.panelHeader {
  align-items: center;
  display: flex;
  gap: 16px;
  justify-content: space-between;
}

.nav {
  backdrop-filter: blur(18px);
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid rgba(214, 224, 239, 0.9);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(20, 35, 70, 0.08);
  position: sticky;
  top: 16px;
  z-index: 10;
  padding: 12px 16px;
}

.brand,
.navLinks {
  align-items: center;
  display: flex;
  gap: 12px;
}

.brand {
  color: #0f2d64;
  font-size: 20px;
  font-weight: 900;
}

.brandMark {
  align-items: center;
  background: #185adb;
  border-radius: 12px;
  color: white;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  width: 36px;
}

.navLinks {
  color: #43506a;
  flex-wrap: wrap;
  font-size: 14px;
  font-weight: 700;
}

.hero {
  align-items: center;
  display: grid;
  gap: 44px;
  grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.8fr);
  padding: 82px 0 42px;
}

.eyebrow {
  color: #185adb;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.14em;
  margin: 0 0 10px;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1 {
  color: #0f172a;
  font-size: clamp(38px, 6vw, 66px);
  letter-spacing: -0.055em;
  line-height: 0.98;
  margin-bottom: 22px;
}

h2 {
  color: #0f172a;
  font-size: clamp(28px, 4vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.08;
}

h3 {
  color: #0f172a;
  margin-bottom: 12px;
}

.hero p,
.sectionIntro p,
.splitSection p,
.sectionHeader p,
.licenseForm p,
.terms p {
  color: #5b667c;
  font-size: 17px;
  line-height: 1.65;
}

.hero p {
  max-width: 720px;
}

.heroActions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.heroPanel,
.stepCard,
.plan,
.terms,
.licenseForm,
.dataSection,
.summaryCard,
.paymentCard,
.manualCard,
.emptyState {
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid #dfe7f3;
  border-radius: 26px;
  box-shadow: 0 18px 50px rgba(20, 35, 70, 0.08);
  padding: 24px;
}

.heroPanel {
  min-height: 360px;
}

.heroPanel strong {
  color: #0f172a;
  display: block;
  font-size: 34px;
  letter-spacing: -0.04em;
  margin: 38px 0 10px;
}

.panelHeader {
  color: #64748b;
  font-size: 13px;
  font-weight: 800;
}

.statusDot {
  background: #12b76a;
  border-radius: 999px;
  box-shadow: 0 0 0 8px rgba(18, 183, 106, 0.14);
  display: inline-block;
  height: 10px;
  width: 10px;
}

.metricList {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.metricList div {
  background: #f5f8ff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  display: flex;
  justify-content: space-between;
  padding: 14px;
}

.metricList span,
.summaryCard span,
.summaryCard small,
dt {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
}

.workflow,
.plans,
.manualGrid,
.paymentCards,
.summary,
.requestGrid {
  display: grid;
  gap: 18px;
}

.workflow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 42px;
}

.stepCard span {
  align-items: center;
  background: #e8f0ff;
  border-radius: 999px;
  color: #185adb;
  display: inline-flex;
  font-weight: 900;
  height: 34px;
  justify-content: center;
  margin-bottom: 18px;
  width: 34px;
}

.stepCard p,
.manualCard li,
.paymentCard p {
  color: #5b667c;
  line-height: 1.55;
}

.sectionBlock,
.splitSection {
  margin: 44px 0;
}

.sectionIntro {
  margin-bottom: 20px;
  max-width: 760px;
}

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

.plan {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 260px;
}

.plan.featured {
  background: linear-gradient(150deg, #185adb, #0f2d64);
  color: white;
}

.plan.featured h3,
.plan.featured li,
.plan.featured strong {
  color: white;
}

.plan strong {
  color: #0f172a;
  display: block;
  font-size: 26px;
  letter-spacing: -0.035em;
}

.plan ul,
.manualCard ul {
  line-height: 1.9;
  margin: 0;
  padding-left: 18px;
}

.splitSection {
  align-items: center;
  display: grid;
  gap: 28px;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.8fr);
}

.paymentCards {
  grid-template-columns: 1fr;
}

.paymentCard span {
  color: #185adb;
  font-size: 18px;
  font-weight: 900;
}

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

.manualCard:first-child,
.manualCard:nth-child(2) {
  border-color: #c7d7f4;
}

.terms {
  color: #43506a;
  line-height: 1.7;
}

.footer {
  background: #0f172a;
  border-radius: 30px 30px 0 0;
  color: #cbd5e1;
  display: grid;
  gap: 28px;
  grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr));
  margin-top: 56px;
  padding: 34px;
}

.footer .brand {
  color: #ffffff;
  margin-bottom: 14px;
}

.footer h3 {
  color: #ffffff;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.footer a,
.footer p {
  color: #cbd5e1;
  display: block;
  font-size: 14px;
  line-height: 1.65;
  margin: 0 0 8px;
}

.footer a:hover {
  color: #ffffff;
}

.admin {
  padding-bottom: 90px;
}

.adminKey,
.licenseForm label {
  color: #43506a;
  display: grid;
  font-size: 13px;
  font-weight: 800;
  gap: 6px;
}

.adminKey {
  margin: 24px 0;
}

input,
select {
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  color: #172033;
  min-width: 0;
  padding: 12px;
}

input:focus,
select:focus {
  border-color: #185adb;
  box-shadow: 0 0 0 4px rgba(24, 90, 219, 0.14);
  outline: none;
}

.summary {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 22px 0;
}

.summaryCard {
  padding: 18px;
}

.summaryCard strong {
  color: #0f172a;
  display: block;
  font-size: 30px;
  letter-spacing: -0.04em;
  margin-top: 8px;
}

.summaryCard small {
  display: block;
  margin-top: 8px;
  text-transform: none;
}

.adminLayout {
  align-items: start;
  display: grid;
  gap: 22px;
  grid-template-columns: minmax(0, 1fr) 380px;
}

.adminAside {
  display: grid;
  gap: 18px;
  position: sticky;
  top: 106px;
}

.licenseForm {
  margin: 0;
}

.formGrid {
  display: grid;
  gap: 14px;
  grid-template-columns: 1fr;
  margin: 18px 0;
}

.dataSection {
  margin-bottom: 22px;
  overflow: hidden;
}

.prioritySection {
  border-color: #bdd1f4;
}

.tableTitle {
  margin-bottom: 16px;
}

.tableTitle p {
  color: #64748b;
  line-height: 1.5;
  margin: 0;
}

.tableWrap {
  overflow-x: auto;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 920px;
  width: 100%;
}

td,
th {
  border-bottom: 1px solid #e2e8f0;
  padding: 14px 12px;
  text-align: left;
  vertical-align: middle;
}

th {
  color: #64748b;
  font-size: 12px;
  font-weight: 900;
  text-transform: uppercase;
}

tbody tr:hover {
  background: #f8fbff;
}

code {
  background: #eef3fb;
  border: 1px solid #dbe5f3;
  border-radius: 10px;
  color: #0f2d64;
  display: inline-block;
  font-size: 12px;
  max-width: 260px;
  overflow: hidden;
  padding: 6px 8px;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.badge {
  border-radius: 999px;
  display: inline-flex;
  font-size: 12px;
  font-weight: 900;
  padding: 6px 10px;
  text-transform: uppercase;
  white-space: nowrap;
}

.badge.info {
  background: #e8f0ff;
  color: #185adb;
}

.badge.success {
  background: #dcfae6;
  color: #067647;
}

.badge.warning {
  background: #fff4cc;
  color: #8a5d00;
}

.badge.danger {
  background: #fee4e2;
  color: #b42318;
}

.badge.muted {
  background: #eef2f7;
  color: #475467;
}

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

.rowActions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.requestCard {
  background: #f8fbff;
  border: 1px solid #dbe7f7;
  border-radius: 22px;
  padding: 18px;
}

.requestTop strong,
dd {
  color: #0f172a;
  font-weight: 800;
}

.requestTop span {
  color: #64748b;
  display: block;
  font-size: 13px;
  margin-top: 3px;
}

dl {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 18px 0;
}

dt,
dd {
  margin: 0;
}

dd {
  font-size: 13px;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.emptyState {
  color: #64748b;
  text-align: center;
}

.emptyState.compact {
  border-radius: 18px;
  box-shadow: none;
  padding: 18px;
}

.alert,
#licenseMessage {
  border-radius: 14px;
  font-weight: 800;
  line-height: 1.5;
  padding: 12px 14px;
}

.counterResult {
  background: #eef3fb;
  border: 1px solid #dbe5f3;
  border-radius: 18px;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding: 14px;
}

.counterResult span,
.counterResult small {
  color: #64748b;
  font-size: 12px;
  font-weight: 800;
}

.counterResult code {
  max-width: none;
}

.error,
#licenseMessage.error {
  background: #fee4e2;
  color: #b42318;
}

.success,
#licenseMessage.success {
  background: #dcfae6;
  color: #067647;
}

@media (max-width: 1080px) {
  .hero,
  .splitSection,
  .adminLayout {
    grid-template-columns: 1fr;
  }

  .adminAside {
    position: static;
  }

  .workflow,
  .summary {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .landing,
  .admin,
  .adminShell {
    padding: 16px;
  }

  .nav,
  .sectionHeader,
  .tableTitle {
    align-items: flex-start;
    flex-direction: column;
  }

  .hero {
    padding-top: 48px;
  }

  .plans,
  .manualGrid,
  .footer,
  .workflow,
  .summary,
  .requestGrid {
    grid-template-columns: 1fr;
  }

  .heroActions {
    flex-direction: column;
  }
}