.platform-body {
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 12% -8%,
      color-mix(in srgb,var(--accent) 23%,transparent),
      transparent 31%
    ),
    var(--bg);
}

.platform-topbar {
  min-height: 70px;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 12px clamp(18px,4vw,54px);
  border-bottom: 1px solid var(--line);
  background:
    color-mix(in srgb,var(--bg) 92%,transparent);
  backdrop-filter: blur(18px);
  position: sticky;
  top: 0;
  z-index: 20;
}

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

.environment-pill,
.platform-role,
.status-pill {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 9px;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.environment-pill {
  color: var(--warning);
}

.platform-role {
  color: var(--success);
}

.platform-gate {
  min-height: calc(100vh - 71px);
  display: grid;
  place-items: center;
  padding: 24px;
}

.gate-card {
  width: min(620px,100%);
  padding: clamp(28px,6vw,58px);
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--surface);
  box-shadow: var(--shadow);
}

.gate-card h1 {
  margin: 17px 0 12px;
  font-size: clamp(34px,6vw,62px);
  line-height: 1;
  letter-spacing: -.045em;
}

.gate-card p {
  color: var(--muted);
  line-height: 1.6;
}

.primary-link {
  display: inline-flex;
  border-radius: 11px;
  background: var(--accent);
  color: white;
  padding: 11px 15px;
  text-decoration: none;
  font-weight: 800;
}

.platform-shell {
  width: min(1540px,calc(100% - 32px));
  margin: 0 auto;
  padding: clamp(28px,5vw,62px) 0 80px;
}

.platform-heading {
  display: flex;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 24px;
}

.platform-heading h1 {
  margin: 8px 0 8px;
  font-size: clamp(38px,5vw,70px);
  line-height: .98;
  letter-spacing: -.05em;
}

.platform-heading p,
.directory-heading p,
.detail-header p {
  margin: 0;
  color: var(--muted);
}

.platform-heading > button {
  margin-left: auto;
}

.payments-banner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid
    color-mix(in srgb,var(--warning) 45%,var(--line));
  border-radius: 14px;
  background:
    color-mix(in srgb,var(--warning) 9%,var(--surface));
}

.payments-banner strong {
  color: var(--warning);
  white-space: nowrap;
}

.payments-banner span {
  color: var(--muted);
  font-size: 11px;
}

.platform-metrics {
  display: grid;
  grid-template-columns: repeat(5,minmax(0,1fr));
  gap: 12px;
  margin-bottom: 18px;
}

.platform-metrics article {
  min-height: 136px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: var(--surface);
}

.platform-metrics span,
.platform-metrics small {
  color: var(--muted);
  font-size: 10px;
}

.platform-metrics strong {
  font-size: clamp(24px,3vw,38px);
  letter-spacing: -.04em;
}

.studio-directory-card,
.detail-card,
.detail-storage-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--surface);
}

.unit-license-card {
  margin-top: 18px;
}

.unit-license-card .directory-heading {
  flex-wrap: wrap;
}

.unit-license-card .directory-heading > div:first-child {
  max-width: 590px;
}

.unit-license-card .directory-heading > .primary {
  margin-left: auto;
}

.unit-filters {
  width: 100%;
  margin-left: 0;
  grid-template-columns: minmax(220px,1fr) 190px auto;
}

.directory-heading {
  display: flex;
  align-items: flex-end;
  gap: 18px;
  padding: 19px 20px;
  border-bottom: 1px solid var(--line);
}

.directory-heading h2,
.detail-card h3 {
  margin: 0 0 5px;
}

.directory-filters {
  margin-left: auto;
  display: grid;
  grid-template-columns: minmax(220px,340px) 170px auto;
  gap: 8px;
}

.studio-table-wrap {
  overflow-x: auto;
}

.studio-table {
  width: 100%;
  min-width: 1080px;
  border-collapse: collapse;
}

.unit-license-table {
  min-width: 980px;
}

.studio-table th,
.studio-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.studio-table th {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.studio-table td {
  font-size: 11px;
}

.studio-identity {
  display: grid;
  gap: 3px;
}

.studio-identity span,
.table-secondary {
  color: var(--muted);
  font-size: 9px;
}

.storage-cell {
  min-width: 145px;
}

.mini-meter,
.storage-meter {
  height: 6px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface-2);
}

.mini-meter span,
.storage-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--accent);
}

.mini-meter {
  margin-top: 6px;
}

.status-trialing { color: var(--accent); }
.status-active { color: var(--success); }
.status-grace { color: var(--warning); }
.status-revoked,
.status-past_due,
.status-suspended,
.status-expired,
.status-canceled { color: var(--danger); }

.backup-good { color: var(--success); }
.backup-attention { color: var(--danger); }

.directory-footer {
  min-height: 58px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 17px;
}

.directory-footer span {
  color: var(--muted);
  font-size: 10px;
}

.directory-footer button {
  margin-left: auto;
}

.platform-detail-dialog {
  width: min(1240px,calc(100% - 24px));
  max-width: none;
  max-height: calc(100vh - 24px);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 30px 100px rgba(0,0,0,.6);
}

.platform-detail-dialog::backdrop {
  background: rgba(2,6,12,.78);
  backdrop-filter: blur(6px);
}

.platform-detail-shell {
  padding: clamp(18px,4vw,34px);
}

.detail-header {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 16px;
}

.detail-header h2 {
  margin: 6px 0;
  font-size: clamp(28px,4vw,48px);
  letter-spacing: -.04em;
}

.detail-header button {
  margin-left: auto;
}

.detail-storage-card {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 18px;
  align-items: center;
  padding: 17px 18px;
  margin-bottom: 14px;
}

.detail-storage-card article {
  display: grid;
  gap: 5px;
}

.detail-storage-card span {
  color: var(--muted);
  font-size: 9px;
  text-transform: uppercase;
}

.detail-storage-card strong {
  font-size: 17px;
}

.storage-meter {
  margin-top: 7px;
}

.detail-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}

.detail-card {
  padding: 19px;
}

.detail-card > .security-label {
  display: block;
  margin-bottom: 7px;
}

.detail-help {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.55;
}

.platform-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 11px;
}

.platform-form textarea {
  min-height: 76px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--text);
  padding: 11px 12px;
  font: inherit;
}

.span-two {
  grid-column: 1 / -1;
}

.plan-price-note {
  min-height: 38px;
  padding: 10px 11px;
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
}

.detail-ledger-card {
  margin-bottom: 12px;
}

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

.history-list {
  max-height: 320px;
  overflow-y: auto;
  display: grid;
  align-content: start;
  gap: 7px;
}

.history-item,
.history-empty {
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.history-item {
  display: grid;
  gap: 4px;
}

.history-item strong {
  font-size: 10px;
}

.history-item span,
.history-empty {
  color: var(--muted);
  font-size: 9px;
  line-height: 1.5;
}

.unit-dialog {
  width: min(960px,calc(100% - 24px));
}

.unit-issue-form {
  margin-top: 22px;
}

.unit-serial-reveal {
  margin-top: 22px;
  padding: clamp(20px,4vw,32px);
  border: 1px solid
    color-mix(in srgb,var(--success) 52%,var(--line));
  border-radius: 18px;
  background:
    color-mix(in srgb,var(--success) 8%,var(--surface));
}

.unit-serial-reveal h3 {
  margin: 9px 0 13px;
  font-size: clamp(24px,4vw,40px);
  letter-spacing: -.04em;
}

.unit-serial-reveal output {
  display: block;
  overflow-wrap: anywhere;
  padding: 17px;
  border: 1px dashed var(--success);
  border-radius: 12px;
  background: var(--bg);
  color: var(--success);
  font-family: ui-monospace,SFMono-Regular,Consolas,monospace;
  font-size: clamp(16px,3vw,25px);
  font-weight: 900;
  letter-spacing: .06em;
  text-align: center;
}

.unit-serial-reveal p {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.6;
}

.unit-reveal-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}

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

.unit-detail-columns {
  grid-template-columns: 1.3fr .7fr;
}

.unit-device-list {
  max-height: 430px;
}

.unit-device-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 14px;
  align-items: center;
}

.unit-device-row > div {
  display: grid;
  gap: 4px;
}

.unit-device-row .device-state {
  grid-column: 1 / -1;
}

.danger-button {
  border-color:
    color-mix(in srgb,var(--danger) 55%,var(--line));
  background:
    color-mix(in srgb,var(--danger) 14%,var(--surface-2));
  color: var(--danger);
}

.danger-button:disabled {
  opacity: .46;
}

@media (max-width: 1120px) {
  .platform-metrics {
    grid-template-columns: repeat(3,minmax(0,1fr));
  }

  .directory-heading,
  .platform-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .directory-filters,
  .platform-heading > button {
    width: 100%;
    margin-left: 0;
  }

  .unit-license-card .directory-heading > .primary {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 800px) {
  .platform-topbar {
    flex-wrap: wrap;
  }

  .platform-topbar .spacer {
    display: none;
  }

  .platform-role {
    margin-left: auto;
  }

  .platform-metrics,
  .detail-columns,
  .detail-history-grid,
  .unit-detail-columns,
  .unit-summary {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 600px) {
  .platform-shell {
    width: min(100% - 20px,1540px);
  }

  .directory-filters,
  .unit-filters,
  .platform-form,
  .detail-storage-card {
    grid-template-columns: 1fr;
  }

  .span-two {
    grid-column: auto;
  }

  .payments-banner {
    align-items: flex-start;
    flex-direction: column;
  }

  .unit-reveal-actions > button {
    width: 100%;
  }
}