:root {
    --bg: #f6f7f9;
    --ink: #1d2433;
    --muted: #647084;
    --line: #d9dee8;
    --panel: #ffffff;
    --primary: #0f766e;
    --primary-dark: #115e59;
    --danger: #b42318;
    --warning: #b76e00;
    --shadow-sm: 0 8px 18px rgba(15, 23, 42, .06);
    --shadow-md: 0 18px 40px rgba(15, 23, 42, .12);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: radial-gradient(1200px circle at 20% 0%, #ffffff 0%, var(--bg) 45%, #eef2f7 100%);
    color: var(--ink);
    font-family: Arial, Helvetica, sans-serif;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

.topbar {
    align-items: center;
    background: rgba(255, 255, 255, .86);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-sm);
    display: flex;
    justify-content: space-between;
    padding: 16px clamp(16px, 4vw, 48px);
    position: sticky;
    top: 0;
    z-index: 50;
}

.nav {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    padding: 0 18px;
}

.nav a {
    border-radius: 5px;
    border: 1px solid transparent;
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 9px;
}

.nav a:hover {
    background: rgba(238, 242, 247, .9);
    border-color: rgba(217, 222, 232, .9);
    color: var(--ink);
}

.nav a.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

details.nav-more {
    position: relative;
}

details.nav-more > summary {
    list-style: none;
}

details.nav-more > summary::-webkit-details-marker {
    display: none;
}

.nav-more-trigger {
    border-radius: 5px;
    border: 1px solid transparent;
    color: var(--muted);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 700;
    padding: 7px 9px;
    user-select: none;
}

.nav-more-trigger.active {
    background: rgba(238, 242, 247, .9);
    border-color: rgba(217, 222, 232, .9);
    color: var(--ink);
}

.nav-more-trigger:hover {
    background: rgba(238, 242, 247, .9);
    border-color: rgba(217, 222, 232, .9);
    color: var(--ink);
}

details.nav-more[open] > summary.nav-more-trigger {
    background: rgba(238, 242, 247, .9);
    border-color: rgba(217, 222, 232, .9);
    color: var(--ink);
}

.nav-dropdown {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: var(--shadow-md);
    display: grid;
    gap: 2px;
    left: auto;
    min-width: 220px;
    padding: 8px;
    position: absolute;
    right: 0;
    top: calc(100% + 10px);
    z-index: 60;
}

.nav-dropdown-group {
    display: grid;
    gap: 2px;
    padding: 6px;
}

.nav-dropdown-group + .nav-dropdown-group {
    border-top: 1px solid var(--line);
    margin-top: 6px;
    padding-top: 10px;
}

.nav-dropdown-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    padding: 6px 10px 4px;
    text-transform: uppercase;
}

.nav-dropdown a {
    border-radius: 8px;
    color: var(--ink);
    display: block;
    font-size: 13px;
    font-weight: 700;
    padding: 8px 10px;
}

.nav-dropdown a:hover {
    background: rgba(238, 242, 247, .9);
}

.nav-dropdown a.active {
    background: var(--primary);
    color: #fff;
}

.nav-badge {
    background: var(--danger);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 11px;
    line-height: 1;
    margin-left: 5px;
    padding: 3px 6px;
}

.customer-nav {
    justify-content: flex-end;
}

.brand {
    font-size: 18px;
    font-weight: 700;
}

.login-page {
    align-items: center;
    display: flex;
    min-height: 100vh;
    padding: 24px;
}

.login-box {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-md);
    margin: 0 auto;
    max-width: 420px;
    padding: 28px;
    width: 100%;
}

.login-box h1 {
    margin: 0 0 8px;
}

.login-box p {
    color: var(--muted);
    margin: 0 0 20px;
}

.login-box label {
    display: block;
    margin-bottom: 14px;
}

.login-box label span {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.customer-login-page {
    align-items: center;
    background: #eef2f5;
    color: var(--ink);
    display: flex;
    min-height: 100vh;
    padding: 24px;
}

.customer-login-shell {
    display: grid;
    gap: 0;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
    margin: 0 auto;
    max-width: 1040px;
    width: 100%;
}

.customer-login-intro,
.customer-login-card {
    min-height: 620px;
}

.customer-login-intro {
    background: #10262b;
    border: 1px solid #1f3b42;
    border-radius: 8px 0 0 8px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(28px, 5vw, 48px);
}

.login-brand {
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 6px;
    color: #fff;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    padding: 8px 11px;
    width: max-content;
}

.customer-login-intro .eyebrow {
    color: #99f6e4;
}

.customer-login-intro h1 {
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1.05;
    margin: 0 0 18px;
    max-width: 620px;
}

.customer-login-intro p:not(.eyebrow) {
    color: rgba(255, 255, 255, .76);
    font-size: 17px;
    margin: 0;
    max-width: 560px;
}

.login-highlights {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 34px 0 22px;
}

.login-highlights article {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    padding: 14px;
}

.login-highlights span {
    color: #99f6e4;
    display: block;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.login-highlights strong {
    display: block;
    font-size: 14px;
    line-height: 1.35;
}

.login-secondary {
    background: #fff;
    color: var(--primary-dark);
    width: max-content;
}

.customer-login-card {
    border-left: 0;
    border-radius: 0 8px 8px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0;
    max-width: none;
    padding: clamp(28px, 4vw, 44px);
}

.customer-login-card h2 {
    font-size: 30px;
    line-height: 1.1;
    margin: 0 0 8px;
}

.customer-login-card form {
    margin-top: 4px;
}

.customer-login-card input {
    min-height: 48px;
}

.customer-login-card .button.primary {
    min-height: 48px;
    width: 100%;
}

.login-footer-row {
    display: flex;
    flex-wrap: wrap;
    font-size: 13px;
    font-weight: 700;
    gap: 10px;
    justify-content: space-between;
    margin-top: 18px;
}

.login-footer-row a {
    color: var(--primary-dark);
}

.field-note {
    color: var(--muted);
    display: block;
    font-size: 12px;
    line-height: 1.35;
    margin-top: 6px;
}

.payment-method-detail {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 16px;
}

.payment-method-detail[hidden] {
    display: none;
}

.payment-method-detail h2 {
    font-size: 20px;
    margin: 0 0 12px;
}

.payment-method-detail dl {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0;
}

.payment-method-detail div {
    min-width: 0;
}

.payment-method-detail dt {
    color: var(--muted);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.payment-method-detail dd {
    font-weight: 700;
    margin: 2px 0 0;
    overflow-wrap: anywhere;
}

.payment-method-detail p:not(.eyebrow) {
    color: var(--muted);
    margin: 12px 0 0;
}

.customer-dashboard-hero {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr);
    margin-bottom: 16px;
}

.customer-hero-main,
.customer-hero-side,
.customer-stat-card {
    border-radius: 8px;
}

.customer-hero-main {
    background: #10262b;
    border: 1px solid #1f3b42;
    color: #fff;
    padding: 26px;
}

.customer-hero-main .eyebrow {
    color: #99f6e4;
}

.customer-hero-main h2 {
    font-size: clamp(28px, 4vw, 42px);
    line-height: 1.08;
    margin: 0 0 18px;
    max-width: 760px;
}

.customer-hero-main p:not(.eyebrow),
.customer-hero-side p {
    color: rgba(255, 255, 255, .72);
    margin: 12px 0 0;
}

.customer-api-copy {
    align-items: center;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    max-width: 680px;
    padding: 10px;
}

.customer-api-copy code {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-hero-side {
    background: var(--primary);
    border: 1px solid var(--primary-dark);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
}

.customer-hero-side span,
.customer-stat-card span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.customer-hero-side span {
    color: rgba(255, 255, 255, .78);
}

.customer-hero-side strong {
    display: block;
    font-size: 58px;
    line-height: 1;
    margin: 14px 0 2px;
}

.customer-hero-side .button.outline {
    background: #fff;
    border-color: #fff;
    color: var(--primary-dark);
    margin-top: 20px;
    width: 100%;
}

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

.customer-stat-card {
    background: var(--panel);
    border: 1px solid var(--line);
    padding: 16px;
}

.customer-stat-card span,
.customer-stat-card p {
    color: var(--muted);
}

.customer-stat-card strong {
    display: block;
    font-size: 30px;
    line-height: 1;
    margin: 8px 0 6px;
}

.customer-stat-card p {
    margin: 0;
}

.customer-action-band {
    align-items: flex-start;
}

.customer-dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr;
}

.shell {
    margin: 0 auto;
    max-width: 1180px;
    padding: 32px 16px 56px;
}

.page-heading {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 24px;
}

.page-heading h1 {
    font-size: 32px;
    line-height: 1.15;
    margin: 0;
}

.page-subtitle {
    color: var(--muted);
    margin: 8px 0 0;
    max-width: 620px;
}

.eyebrow {
    color: var(--muted);
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 6px;
    text-transform: uppercase;
}

.button {
    align-items: center;
    background: #eef2f7;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--ink);
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 700;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
}

.button.primary {
    background: var(--primary);
    color: #fff;
}

.button.primary:hover {
    background: var(--primary-dark);
}

.button.small {
    font-size: 13px;
    min-height: 34px;
    padding: 6px 10px;
}

.button.danger {
    background: var(--danger);
    color: #fff;
}

.button.outline {
    background: transparent;
    border-color: var(--danger);
    color: var(--danger);
}

.alert {
    border-radius: 6px;
    margin-bottom: 18px;
    padding: 12px 14px;
}

.alert.success {
    background: #dcfce7;
    color: #14532d;
}

.alert.error {
    background: #fee2e2;
    color: #7f1d1d;
}

.search {
    display: flex;
    gap: 8px;
    max-width: 520px;
    width: min(100%, 520px);
}

input,
select,
textarea {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font: inherit;
    min-height: 42px;
    padding: 9px 11px;
    width: 100%;
}

textarea {
    resize: vertical;
}

.stats {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 22px;
}

.stats article,
.detail-grid article,
.license-form,
.table-wrap,
.danger-zone,
.setup-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.api-panel {
    align-items: center;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 18px;
}

.api-panel span,
.small-note {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.inline-form {
    align-items: center;
    display: flex;
    gap: 8px;
}

.inline-form select {
    min-width: 120px;
}

.table-toolbar {
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 12px;
}

.table-toolbar input[type="search"] {
    min-width: 260px;
}

.table-toolbar select {
    min-width: 160px;
}

.mt {
    margin-top: 22px;
}

.quick-actions {
    display: grid;
    flex: 1;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 22px;
}

.dashboard-band .quick-actions {
    margin-bottom: 0;
}

.quick-actions a {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    color: var(--ink);
    display: flex;
    flex-direction: column;
    font-weight: 700;
    gap: 4px;
    min-height: 86px;
    padding: 16px;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease, color .15s ease;
}

.quick-actions a:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-md);
    color: var(--primary-dark);
    transform: translateY(-1px);
}

.quick-actions span {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

.dashboard-hero {
    background: #122126;
    border: 1px solid #20333a;
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: 1px;
    grid-template-columns: 1.4fr 1fr 1fr;
    margin-bottom: 16px;
    overflow: hidden;
}

.hero-metric {
    background: #182b31;
    min-height: 150px;
    padding: 24px;
}

.hero-metric.primary-metric {
    background: #0f766e;
}

.hero-metric span,
.metric-card span {
    display: block;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.hero-metric span,
.hero-metric p {
    color: rgba(255, 255, 255, .74);
}

.hero-metric strong {
    display: block;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.05;
    margin: 12px 0 8px;
}

.hero-metric p,
.metric-card p {
    margin: 0;
}

.metric-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    margin-bottom: 16px;
}

.metric-card,
.dashboard-band,
.dashboard-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
}

.metric-card {
    padding: 16px;
}

.metric-card span,
.metric-card p {
    color: var(--muted);
}

.metric-card strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    margin: 8px 0 6px;
}

.dashboard-band {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 16px;
    padding: 18px;
}

.dashboard-band h2,
.dashboard-panel h2 {
    font-size: 20px;
    margin: 0;
}

.dashboard-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.6fr) minmax(320px, .9fr);
}

.guide-hero {
    background: #122126;
    border: 1px solid #20333a;
    border-radius: 8px;
    color: #fff;
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
    margin-bottom: 16px;
    overflow: hidden;
}

.guide-hero > div,
.guide-hero > aside {
    background: #182b31;
    padding: 26px;
}

.guide-hero > div {
    background: #0f766e;
}

.guide-hero h1 {
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.08;
    margin: 0 0 12px;
}

.guide-hero p {
    color: rgba(255,255,255,.76);
    margin: 0;
    max-width: 760px;
}

.guide-hero aside {
    display: grid;
    gap: 10px;
    align-content: center;
}

.guide-hero aside span {
    color: #99f6e4;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
}

.guide-hero aside strong {
    display: block;
    font-size: 24px;
    line-height: 1.2;
}

.guide-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

.guide-nav a {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 6px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 700;
    padding: 8px 11px;
}

.guide-nav a:hover {
    border-color: var(--primary);
    color: var(--primary-dark);
}

.guide-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 16px;
}

.guide-card,
.guide-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
}

.guide-card {
    display: grid;
    gap: 10px;
    min-height: 210px;
    padding: 16px;
}

.guide-card > span {
    align-items: center;
    background: var(--primary);
    border-radius: 999px;
    color: #fff;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    height: 26px;
    justify-content: center;
    width: 26px;
}

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

.guide-card p,
.guide-steps p,
.signature-box p {
    color: var(--muted);
    margin: 0;
}

.guide-card .button {
    align-self: end;
    width: max-content;
}

.guide-panel {
    margin-top: 16px;
    padding: 20px;
}

.guide-panel-title {
    margin-bottom: 14px;
}

.guide-panel-title h2 {
    margin: 0;
}

.guide-steps {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.guide-steps > div,
.guide-checks span,
.signature-box {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.guide-steps strong {
    display: block;
    margin-bottom: 6px;
}

.signature-box {
    display: grid;
    gap: 8px;
    margin-bottom: 12px;
}

.signature-box code {
    max-width: 100%;
    overflow-wrap: anywhere;
}

.guide-checks {
    display: grid;
    gap: 10px;
}

.guide-checks span {
    display: block;
}

.dashboard-panel {
    min-width: 0;
    padding: 18px;
}

.dashboard-panel.wide {
    padding: 0;
}

.dashboard-panel.wide .panel-heading {
    padding: 18px 18px 0;
}

.panel-heading {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    margin-bottom: 14px;
}

.compact-table {
    border: 0;
}

.compact-table table {
    min-width: 760px;
}

.compact-table th,
.compact-table td {
    padding: 13px 18px;
}

.activity-list {
    display: grid;
    gap: 10px;
}

.activity-item {
    border: 1px solid var(--line);
    border-radius: 8px;
    box-shadow: var(--shadow-sm);
    padding: 12px;
}

.activity-item strong,
.activity-item small {
    display: block;
}

.activity-item strong {
    margin-top: 8px;
}

.activity-item p {
    color: var(--muted);
    margin: 4px 0 8px;
}

.activity-item small {
    color: var(--muted);
    font-size: 12px;
}

.mini-empty {
    margin: 0;
    padding: 18px;
}

.order-heading {
    justify-content: center;
    text-align: center;
}

.order-choice-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin: 0 auto;
    max-width: 860px;
}

.order-choice-grid article {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px;
}

.order-choice-grid h2 {
    font-size: 24px;
    margin: 0 0 10px;
}

.order-choice-grid p:not(.eyebrow) {
    color: var(--muted);
    margin: 0 0 22px;
}

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

.notification-item {
    align-items: flex-start;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    padding: 16px;
}

.notification-item.unread {
    border-color: var(--primary);
}

.notification-item h2 {
    font-size: 18px;
    margin: 4px 0;
}

.notification-item p {
    color: var(--muted);
    margin: 0 0 10px;
}

.notification-item span {
    color: var(--muted);
    font-size: 13px;
}

.stats article {
    padding: 18px;
}

.stats span,
.detail-grid span,
.license-form label span {
    color: var(--muted);
    display: block;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 6px;
}

.stats strong {
    display: block;
    font-size: 30px;
    line-height: 1;
}

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

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

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 14px;
    text-align: left;
    vertical-align: middle;
}

th {
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
}

td span {
    color: var(--muted);
    display: block;
    font-size: 13px;
}

code {
    background: #f0f3f7;
    border-radius: 5px;
    display: inline-block;
    font-family: Consolas, Monaco, monospace;
    padding: 4px 6px;
}

.cell-code {
    display: block;
    max-width: 320px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.badge {
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    padding: 4px 9px;
    text-transform: uppercase;
}

.badge.active {
    background: #d1fae5;
    color: #065f46;
}

.badge.inactive {
    background: #e2e8f0;
    color: #334155;
}

.badge.expired {
    background: #fef3c7;
    color: var(--warning);
}

.badge.revoked {
    background: #fee2e2;
    color: var(--danger);
}

.badge.trial {
    background: #dbeafe;
    color: #1e3a8a;
}

.badge.suspended {
    background: #e2e8f0;
    color: #334155;
}

.badge.pending {
    background: #fef3c7;
    color: var(--warning);
}

.badge.paid {
    background: #dbeafe;
    color: #1e3a8a;
}

.empty {
    color: var(--muted);
    padding: 32px;
    text-align: center;
}

.license-form,
.detail-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 22px;
}

.license-form .full,
.detail-grid .full,
.form-actions {
    grid-column: 1 / -1;
}

.detail-grid article {
    padding: 16px;
}

.detail-grid p {
    margin: 0;
}

.danger-zone {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    margin-top: 18px;
    padding: 16px;
}

.setup-panel {
    padding: 22px;
}

.info-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.info-item {
    align-items: center;
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 8px;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    padding: 12px;
}

.info-item code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.setup-panel p {
    margin-top: 0;
}

.setup-panel li {
    margin: 8px 0;
}

.muted {
    color: var(--muted);
}

.pagination {
    display: flex;
    gap: 6px;
    list-style: none;
    padding: 18px 0 0;
}

.pagination a,
.pagination li {
    border-radius: 5px;
    color: var(--muted);
    display: inline-flex;
    min-width: 34px;
    padding: 6px 9px;
}

.pagination .active {
    background: var(--primary);
    color: #fff;
}

.admin-dashboard {
    display: grid;
    gap: 18px;
}

.admin-hero {
    align-items: stretch;
    background: linear-gradient(135deg, #0f2a32 0%, #0f766e 58%, #2563eb 100%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    color: #fff;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr);
    overflow: hidden;
    padding: clamp(22px, 4vw, 34px);
    position: relative;
}

.admin-hero:before {
    background: linear-gradient(90deg, rgba(255,255,255,.12), transparent);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.admin-hero-main,
.admin-hero-card {
    position: relative;
    z-index: 1;
}

.admin-hero .eyebrow {
    color: #a7f3d0;
}

.admin-hero h1 {
    font-size: clamp(34px, 5vw, 54px);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 0 0 12px;
    max-width: 720px;
}

.admin-hero p {
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    margin: 0;
    max-width: 680px;
}

.admin-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}

.admin-hero .button.primary {
    background: #fff;
    color: var(--primary-dark);
}

.admin-hero .button.primary:hover {
    background: #eefcf8;
}

.button.hero-light {
    background: rgba(255, 255, 255, .13);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.button.hero-light:hover {
    background: rgba(255, 255, 255, .20);
}

.admin-hero-card {
    align-self: stretch;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .20);
    border-radius: 12px;
    display: grid;
    min-height: 190px;
    padding: 20px;
}

.admin-hero-card span,
.admin-kpi-card span,
.health-card span,
.admin-command-grid span {
    color: var(--muted);
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.admin-hero-card span {
    color: #a7f3d0;
}

.admin-hero-card strong {
    align-self: end;
    display: block;
    font-size: clamp(30px, 4vw, 44px);
    letter-spacing: 0;
    line-height: 1;
}

.admin-hero-card p {
    font-size: 14px;
    margin-top: 8px;
}

.admin-kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.admin-kpi-card,
.health-card,
.admin-command-panel,
.admin-panel {
    background: rgba(255, 255, 255, .92);
    border: 1px solid var(--line);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
}

.admin-kpi-card {
    display: grid;
    gap: 7px;
    min-height: 160px;
    padding: 16px;
    position: relative;
}

.kpi-icon {
    align-items: center;
    background: #e8f7f4;
    border-radius: 10px;
    color: var(--primary-dark);
    display: inline-flex;
    font-weight: 900;
    height: 40px;
    justify-content: center;
    margin-bottom: 4px;
    width: 40px;
}

.admin-kpi-card strong {
    display: block;
    font-size: 34px;
    line-height: 1;
}

.admin-kpi-card p,
.health-card p,
.admin-command-panel p {
    color: var(--muted);
    margin: 0;
}

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

.health-card {
    display: grid;
    gap: 8px;
    padding: 16px;
}

.health-card strong {
    font-size: 26px;
    line-height: 1;
}

.admin-command-panel {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, .45fr) minmax(0, 1fr);
    padding: 18px;
}

.admin-command-panel h2,
.admin-panel h2 {
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
}

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

.admin-command-grid a {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 10px;
    display: grid;
    gap: 5px;
    min-height: 116px;
    padding: 13px;
}

.admin-command-grid a:hover {
    background: #eefcf8;
    border-color: rgba(15, 118, 110, .32);
}

.admin-command-grid strong {
    font-size: 15px;
}

.admin-command-grid small {
    color: var(--muted);
    line-height: 1.35;
}

.admin-content-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
}

.admin-panel {
    min-width: 0;
    overflow: hidden;
}

.admin-panel-heading {
    padding: 18px 18px 0;
}

.admin-table {
    border: 0;
    box-shadow: none;
    margin-top: 6px;
}

.admin-table table {
    min-width: 760px;
}

.admin-table td,
.admin-table th {
    padding: 14px 18px;
}

.admin-filter-form {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 14px 18px;
}

.admin-filter-form input,
.admin-filter-form select {
    min-height: 40px;
}

.admin-activity-feed {
    display: grid;
    gap: 0;
    padding: 0 18px 18px;
}

.admin-activity-item {
    display: grid;
    gap: 10px;
    grid-template-columns: 14px 1fr;
    padding: 13px 0;
    position: relative;
}

.admin-activity-item + .admin-activity-item {
    border-top: 1px solid var(--line);
}

.activity-dot {
    background: var(--primary);
    border: 3px solid #d1fae5;
    border-radius: 999px;
    height: 14px;
    margin-top: 5px;
    width: 14px;
}

.activity-top {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.activity-top strong {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-top span {
    background: #eef2f7;
    border-radius: 999px;
    color: var(--muted);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 800;
    padding: 4px 8px;
    text-transform: uppercase;
}

.admin-activity-item p {
    color: var(--muted);
    margin: 4px 0 6px;
}

.admin-activity-item small {
    color: var(--muted);
    font-size: 12px;
}

.license-dashboard {
    display: grid;
    gap: 18px;
}

.ops-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, .42fr);
    gap: 18px;
    align-items: stretch;
    color: #fff;
    background: linear-gradient(135deg, #10262b 0%, #0f766e 58%, #2563eb 100%);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 16px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
    padding: clamp(22px, 4vw, 34px);
}

.ops-hero-copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 260px;
}

.ops-hero .eyebrow {
    color: #a7f3d0;
}

.ops-hero h1 {
    font-size: clamp(36px, 5vw, 58px);
    letter-spacing: 0;
    line-height: 1;
    margin: 0 0 12px;
}

.ops-lead {
    color: rgba(255, 255, 255, .78);
    font-size: 16px;
    margin: 0;
    max-width: 680px;
}

.ops-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 24px;
}

.ops-hero .button.primary {
    background: #fff;
    color: var(--primary-dark);
}

.ops-hero .button.primary:hover {
    background: #eefcf8;
}

.ops-hero-side {
    display: grid;
    gap: 12px;
}

.ops-status,
.ops-revenue {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 14px;
    display: grid;
    gap: 8px;
    padding: 18px;
}

.ops-status span,
.ops-revenue span,
.ops-kpi span,
.ops-health-card span,
.ops-command-grid span {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.ops-status span,
.ops-revenue span {
    color: #a7f3d0;
}

.ops-status strong,
.ops-revenue strong {
    font-size: clamp(26px, 3vw, 38px);
    line-height: 1;
}

.ops-status p,
.ops-revenue p {
    color: rgba(255, 255, 255, .78);
    margin: 0;
}

.ops-kpi-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.ops-kpi,
.ops-health-card,
.ops-command-panel,
.ops-panel {
    background: rgba(255, 255, 255, .94);
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-sm);
}

.ops-kpi {
    display: grid;
    gap: 8px;
    min-height: 150px;
    padding: 18px;
}

.ops-kpi span,
.ops-health-card span,
.ops-command-grid span {
    color: var(--muted);
}

.ops-kpi strong {
    font-size: 36px;
    line-height: 1;
}

.ops-kpi p,
.ops-health-card p,
.ops-command-panel p,
.ops-command-grid small {
    color: var(--muted);
    margin: 0;
}

.ops-kpi.teal {
    border-top: 4px solid var(--primary);
}

.ops-kpi.blue {
    border-top: 4px solid #2563eb;
}

.ops-kpi.violet {
    border-top: 4px solid #7c3aed;
}

.ops-kpi.amber {
    border-top: 4px solid #b76e00;
}

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

.ops-health-card {
    display: grid;
    gap: 14px;
    padding: 18px;
}

.ops-health-card strong {
    display: block;
    font-size: 28px;
    line-height: 1;
    margin: 7px 0 4px;
}

.ops-progress {
    background: #edf2f7;
    border-radius: 999px;
    height: 9px;
    overflow: hidden;
}

.ops-progress i {
    background: linear-gradient(90deg, var(--primary), #2563eb);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.ops-command-panel {
    align-items: center;
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
    padding: 20px;
}

.ops-command-panel h2,
.ops-panel h2 {
    font-size: 22px;
    line-height: 1.1;
    margin: 0;
}

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

.ops-command-grid a {
    background: #f8fafc;
    border: 1px solid var(--line);
    border-radius: 12px;
    display: grid;
    gap: 5px;
    min-height: 116px;
    padding: 14px;
}

.ops-command-grid a:hover {
    background: #eefcf8;
    border-color: rgba(15, 118, 110, .32);
}

.ops-command-grid strong {
    font-size: 15px;
}

.ops-command-grid small {
    line-height: 1.35;
}

.ops-main-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1.35fr) minmax(340px, .65fr);
}

.ops-panel {
    min-width: 0;
    overflow: hidden;
}

.ops-panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 18px 0;
}

.ops-table {
    border: 0;
    box-shadow: none;
    margin-top: 8px;
}

.ops-table table {
    min-width: 760px;
}

.ops-table td,
.ops-table th {
    padding: 14px 18px;
}

.ops-filter {
    display: grid;
    gap: 8px;
    grid-template-columns: 1fr;
    padding: 14px 18px;
}

.ops-filter input,
.ops-filter select {
    min-height: 40px;
}

.ops-feed {
    display: grid;
    padding: 0 18px 18px;
}

.ops-feed-item {
    display: grid;
    gap: 10px;
    grid-template-columns: 14px 1fr;
    padding: 13px 0;
}

.ops-feed-item + .ops-feed-item {
    border-top: 1px solid var(--line);
}

.ops-feed-item p {
    color: var(--muted);
    margin: 4px 0 6px;
}

.ops-feed-item small {
    color: var(--muted);
    font-size: 12px;
}

@media (max-width: 760px) {
    .topbar,
    .page-heading,
    .danger-zone,
    .api-panel,
    .dashboard-band,
    .panel-heading {
        align-items: stretch;
        flex-direction: column;
    }

    .nav {
        justify-content: flex-start;
        padding: 12px 0 0;
    }

    .search,
    .actions {
        width: 100%;
    }

    .stats,
    .quick-actions,
    .dashboard-hero,
    .guide-hero,
    .guide-grid,
    .guide-steps,
    .customer-dashboard-hero,
    .customer-stat-grid,
    .metric-grid,
    .dashboard-grid,
    .customer-dashboard-grid,
    .order-choice-grid,
    .license-form,
    .detail-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-panel .table-wrap {
        margin: 0 -18px;
    }

    .hero-metric {
        min-height: 120px;
    }

    .customer-login-page {
        padding: 14px;
    }

    .customer-login-shell {
        grid-template-columns: 1fr;
    }

    .customer-login-intro,
    .customer-login-card {
        min-height: auto;
    }

    .customer-login-intro {
        border-radius: 8px 8px 0 0;
        gap: 26px;
        padding: 26px;
    }

    .customer-login-card {
        border-left: 1px solid var(--line);
        border-radius: 0 0 8px 8px;
    }

    .login-highlights {
        grid-template-columns: 1fr;
        margin: 22px 0 0;
    }

    .login-secondary {
        width: 100%;
    }

    .customer-hero-main,
    .customer-hero-side {
        padding: 20px;
    }

    .customer-api-copy {
        align-items: stretch;
        flex-direction: column;
    }

    .admin-hero,
    .admin-kpi-grid,
    .admin-health-grid,
    .admin-command-panel,
    .admin-command-grid,
    .admin-content-grid,
    .ops-hero,
    .ops-kpi-grid,
    .ops-health-grid,
    .ops-command-panel,
    .ops-command-grid,
    .ops-main-grid {
        grid-template-columns: 1fr;
    }

    .admin-hero-actions,
    .admin-hero-actions .button,
    .ops-actions,
    .ops-actions .button {
        width: 100%;
    }

    .admin-panel-heading,
    .activity-top,
    .ops-panel-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (min-width: 761px) and (max-width: 1040px) {
    .metric-grid,
    .customer-stat-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .dashboard-grid,
    .customer-dashboard-hero,
    .admin-hero,
    .admin-command-panel,
    .admin-content-grid,
    .ops-hero,
    .ops-command-panel,
    .ops-main-grid {
        grid-template-columns: 1fr;
    }

    .admin-kpi-grid,
    .admin-command-grid,
    .ops-kpi-grid,
    .ops-command-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-health-grid {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 761px) and (max-width: 900px) {
    .dashboard-band {
        align-items: stretch;
        flex-direction: column;
    }

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

/* Global visual refresh */
:root {
    --surface-soft: #f8fafc;
    --surface-tint: #edf7f5;
    --ink-soft: #334155;
    --ring: rgba(15, 118, 110, .18);
}

body {
    background:
        linear-gradient(180deg, #f8fafc 0%, #eef4f7 48%, #f7fafc 100%);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}

.topbar {
    background: rgba(255, 255, 255, .92);
    border-bottom-color: rgba(148, 163, 184, .28);
    box-shadow: 0 12px 32px rgba(15, 23, 42, .07);
    gap: 16px;
    min-height: 74px;
}

.brand {
    align-items: center;
    color: #0f3f3b;
    display: inline-flex;
    font-size: 18px;
    font-weight: 900;
    gap: 10px;
    letter-spacing: 0;
    white-space: nowrap;
}

.brand::before {
    background: linear-gradient(135deg, #0f766e, #2563eb);
    border-radius: 8px;
    box-shadow: 0 10px 24px rgba(15, 118, 110, .28);
    content: "";
    height: 34px;
    width: 34px;
}

.nav {
    gap: 8px;
}

.nav a,
.nav-more-trigger {
    border-radius: 8px;
    color: #475569;
    min-height: 36px;
    padding: 8px 11px;
    transition: background .18s ease, border-color .18s ease, color .18s ease, transform .18s ease;
}

.nav a:hover,
.nav-more-trigger:hover,
details.nav-more[open] > summary.nav-more-trigger {
    background: #eef6f4;
    border-color: rgba(15, 118, 110, .22);
    color: #0f766e;
    transform: translateY(-1px);
}

.nav a.active,
.nav-dropdown a.active {
    background: linear-gradient(135deg, #0f766e, #2563eb);
    border-color: transparent;
    box-shadow: 0 10px 20px rgba(15, 118, 110, .2);
}

.nav-more-trigger.active {
    background: #eef6f4;
    border-color: rgba(15, 118, 110, .22);
    color: #0f766e;
}

.nav-dropdown {
    border-color: rgba(148, 163, 184, .28);
    border-radius: 8px;
    box-shadow: 0 22px 48px rgba(15, 23, 42, .14);
}

.nav-dropdown a {
    border-radius: 7px;
}

.shell {
    max-width: 1280px;
    padding: 28px clamp(16px, 3vw, 38px) 54px;
}

.page-heading {
    background: linear-gradient(135deg, #ffffff 0%, #f4fbf9 100%);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .08);
    gap: 18px;
    margin-bottom: 22px;
    padding: 24px;
}

.page-heading h1,
.guide-hero h1,
.customer-hero-main h2,
.ops-hero h1 {
    color: #102033;
    letter-spacing: 0;
}

.page-heading h1 {
    font-size: clamp(27px, 3vw, 38px);
}

.page-subtitle,
.small-note,
.field-note,
.empty,
.mini-empty {
    color: #64748b;
}

.eyebrow {
    color: #0f766e;
    letter-spacing: .08em;
}

.button {
    border-radius: 8px;
    box-shadow: none;
    font-weight: 800;
    min-height: 38px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.button:hover {
    border-color: rgba(15, 118, 110, .28);
    box-shadow: 0 10px 22px rgba(15, 23, 42, .1);
    transform: translateY(-1px);
}

.button.primary {
    background: linear-gradient(135deg, #0f766e, #2563eb);
    border-color: transparent;
}

.button.primary:hover {
    background: linear-gradient(135deg, #115e59, #1d4ed8);
}

.button.outline {
    background: #fff;
    border-color: rgba(15, 118, 110, .22);
    color: #0f766e;
}

.button.danger {
    background: #b42318;
    border-color: #b42318;
}

input,
select,
textarea {
    background: #fff;
    border: 1px solid #d6dee8;
    border-radius: 8px;
    color: #102033;
    outline: none;
    transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #0f766e;
    box-shadow: 0 0 0 4px var(--ring);
}

.search input,
.table-toolbar input[type="search"],
.table-toolbar select,
.inline-form select,
.ops-filter input,
.ops-filter select {
    border-radius: 8px;
}

.stats article,
.detail-grid article,
.license-form,
.table-wrap,
.danger-zone,
.setup-panel,
.api-panel,
.dashboard-band,
.dashboard-panel,
.metric-card,
.customer-hero-main,
.customer-hero-side,
.customer-stat-card,
.guide-card,
.guide-panel,
.payment-method-detail,
.order-choice-grid article,
.notification-item,
.ops-panel,
.ops-kpi,
.ops-health-card,
.ops-command-panel {
    border-color: rgba(148, 163, 184, .26);
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.stats article:hover,
.detail-grid article:hover,
.dashboard-panel:hover,
.customer-stat-card:hover,
.guide-card:hover,
.ops-kpi:hover,
.ops-health-card:hover,
.ops-panel:hover {
    box-shadow: 0 20px 48px rgba(15, 23, 42, .1);
}

.stats article,
.detail-grid article,
.metric-card,
.customer-stat-card,
.ops-kpi,
.ops-health-card {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
}

.stats span,
.detail-grid span,
.license-form label span,
.customer-stat-card span,
.metric-card span,
.ops-kpi span,
.ops-health-card span {
    color: #64748b;
    letter-spacing: .06em;
}

.table-wrap {
    background: #fff;
    overflow: auto;
}

.table-wrap table {
    border-collapse: separate;
    border-spacing: 0;
}

.table-wrap th {
    background: #f8fafc;
    border-bottom: 1px solid #dce4ed;
    color: #64748b;
    font-size: 12px;
    letter-spacing: .06em;
}

.table-wrap td {
    border-bottom-color: #eef2f7;
    color: #1e293b;
}

.table-wrap tr:hover td {
    background: #f8fcfb;
}

.cell-code,
code,
.customer-api-copy code {
    background: #f1f5f9;
    border: 1px solid #dbe5ef;
    border-radius: 7px;
    color: #0f3f3b;
    overflow-wrap: anywhere;
}

.badge {
    border-radius: 999px;
    font-weight: 900;
    letter-spacing: .03em;
}

.license-form {
    background: #fff;
    gap: 18px;
    padding: 24px;
}

.license-form .form-actions,
.form-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.api-panel {
    background: linear-gradient(135deg, #ffffff 0%, #eef9f7 100%);
}

.danger-zone {
    background: linear-gradient(135deg, #fff 0%, #fff7f6 100%);
    border-color: rgba(180, 35, 24, .16);
}

.setup-panel {
    background: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
}

.quick-actions a,
.ops-command-grid a {
    border-radius: 8px;
    min-height: 104px;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.quick-actions a:hover,
.ops-command-grid a:hover {
    box-shadow: 0 14px 30px rgba(15, 118, 110, .12);
    transform: translateY(-2px);
}

.dashboard-band,
.customer-action-band {
    background: linear-gradient(135deg, #0f3f3b 0%, #0f766e 55%, #2563eb 100%);
    color: #fff;
}

.dashboard-band .eyebrow,
.dashboard-band .page-subtitle,
.customer-action-band .eyebrow,
.customer-action-band .page-subtitle {
    color: rgba(255, 255, 255, .82);
}

.dashboard-band .quick-actions a,
.customer-action-band .quick-actions a {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .22);
    color: #fff;
}

.dashboard-band .quick-actions small,
.customer-action-band .quick-actions small {
    color: rgba(255, 255, 255, .78);
}

.guide-hero,
.customer-dashboard-hero,
.ops-hero {
    border-radius: 12px;
    box-shadow: 0 24px 58px rgba(15, 23, 42, .12);
}

.customer-login-page {
    background: linear-gradient(145deg, #e8f4f1 0%, #f8fafc 48%, #eaf1fb 100%);
}

.customer-login-shell {
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 14px;
    box-shadow: 0 30px 72px rgba(15, 23, 42, .16);
    overflow: hidden;
}

.customer-login-intro {
    background:
        linear-gradient(135deg, rgba(15, 63, 59, .96), rgba(15, 118, 110, .9) 58%, rgba(37, 99, 235, .88));
}

.customer-login-card {
    background: rgba(255, 255, 255, .96);
}

.login-brand {
    align-items: center;
    display: inline-flex;
    gap: 9px;
}

.login-brand::before {
    background: rgba(255, 255, 255, .2);
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: 8px;
    content: "";
    height: 28px;
    width: 28px;
}

.login-box {
    border-color: rgba(148, 163, 184, .28);
    border-radius: 10px;
}

.alert {
    border-radius: 8px;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .06);
}

.actions {
    align-items: center;
    gap: 8px;
}

.actions form {
    display: inline-flex;
}

.resource-toolbar,
.table-toolbar,
.panel-heading,
.ops-panel-head {
    gap: 12px;
}

.ops-hero {
    background:
        linear-gradient(135deg, #0f3f3b 0%, #0f766e 48%, #1d4ed8 100%);
}

.ops-hero h1,
.ops-hero .ops-lead,
.ops-hero .eyebrow {
    color: #fff;
}

.ops-hero .ops-lead {
    opacity: .86;
}

.ops-hero .eyebrow {
    opacity: .9;
}

.ops-hero::after {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 12px;
}

.ops-kpi b,
.metric-card strong,
.stats strong,
.customer-stat-card strong {
    color: #102033;
}

.ops-progress {
    background: #e2e8f0;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.ops-progress i {
    background: linear-gradient(90deg, #0f766e, #2563eb);
    border-radius: inherit;
    display: block;
    height: 100%;
}

@media (max-width: 760px) {
    .topbar {
        align-items: stretch;
        gap: 12px;
        min-height: auto;
    }

    .brand {
        justify-content: flex-start;
    }

    .nav {
        overflow-x: auto;
        padding: 0;
    }

    details.nav-more {
        width: 100%;
    }

    .nav-more-trigger,
    .nav a {
        width: 100%;
    }

    .nav-dropdown {
        position: static;
        width: 100%;
    }

    .page-heading,
    .license-form,
    .api-panel,
    .setup-panel,
    .danger-zone {
        padding: 18px;
    }

    .customer-login-shell {
        border-radius: 10px;
    }
}

/* Customer dashboard polish */
.customer-dashboard-hero {
    overflow: hidden;
}

.customer-hero-main,
.customer-hero-side {
    position: relative;
}

.customer-hero-main {
    background:
        linear-gradient(135deg, rgba(12, 45, 52, .96), rgba(15, 118, 110, .92) 58%, rgba(37, 99, 235, .88));
    display: grid;
    gap: 18px;
    min-height: 340px;
}

.customer-hero-kicker,
.customer-profile-mini {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.customer-hero-kicker {
    justify-content: space-between;
}

.customer-status-pill {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

.customer-profile-mini span {
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .15);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 700;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 7px 10px;
}

.customer-hero-main h2 {
    margin-bottom: 0;
    max-width: 680px;
}

.customer-api-copy {
    margin-top: 4px;
}

.customer-api-copy .button {
    flex: 0 0 auto;
}

.customer-hero-side {
    background: linear-gradient(160deg, #ffffff 0%, #ecfdf9 100%);
    border-color: rgba(15, 118, 110, .22);
    color: #102033;
}

.customer-hero-side span {
    color: #64748b;
}

.customer-hero-side p {
    color: #64748b;
}

.customer-hero-meter {
    background: #d9efe9;
    border-radius: 999px;
    height: 10px;
    margin-top: 18px;
    overflow: hidden;
}

.customer-hero-meter i {
    background: linear-gradient(90deg, #0f766e, #2563eb);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.customer-stat-card {
    border-top: 4px solid #94a3b8;
    min-height: 132px;
}

.customer-stat-card.is-licenses {
    border-top-color: #2563eb;
}

.customer-stat-card.is-active {
    border-top-color: #0f766e;
}

.customer-stat-card.is-expired {
    border-top-color: #b42318;
}

.customer-stat-card.is-pending {
    border-top-color: #b76e00;
}

.customer-stat-card.is-activations {
    border-top-color: #475569;
}

.customer-action-band {
    align-items: center;
}

.customer-action-band .quick-actions a {
    align-content: start;
    display: grid;
    gap: 6px;
    min-height: 126px;
    padding: 14px;
}

.customer-action-band .quick-actions a strong {
    color: #fff;
    font-size: 15px;
    line-height: 1.25;
}

.customer-action-band .quick-actions a span {
    color: rgba(255, 255, 255, .72);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.customer-action-band .quick-actions a small {
    font-size: 12px;
    line-height: 1.4;
}

.customer-dashboard-grid .dashboard-panel {
    overflow: hidden;
}

.customer-dashboard-grid .panel-heading {
    background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
    border-bottom: 1px solid var(--line);
    margin-bottom: 0;
    padding-bottom: 18px;
}

.customer-dashboard-grid .compact-table th,
.customer-dashboard-grid .compact-table td {
    vertical-align: middle;
}

.customer-dashboard-grid code {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .customer-hero-kicker,
    .customer-profile-mini,
    .customer-action-band {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-status-pill,
    .customer-profile-mini span {
        width: fit-content;
    }

    .customer-hero-main {
        min-height: auto;
    }

    .customer-dashboard-grid code {
        max-width: 190px;
    }
}

/* Admin license command dashboard */
.license-command {
    display: grid;
    gap: 16px;
}

.license-hero {
    background:
        linear-gradient(135deg, rgba(15, 63, 59, .98) 0%, rgba(15, 118, 110, .94) 50%, rgba(37, 99, 235, .9) 100%);
    border: 1px solid rgba(15, 118, 110, .22);
    border-radius: 12px;
    box-shadow: 0 26px 64px rgba(15, 23, 42, .16);
    color: #fff;
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(0, 1.45fr) minmax(260px, .65fr) minmax(260px, .72fr);
    overflow: hidden;
}

.license-hero-main,
.license-hero-status,
.license-hero-money {
    background: rgba(255, 255, 255, .08);
    min-height: 250px;
    padding: clamp(22px, 3vw, 30px);
}

.license-hero-main {
    align-content: center;
    display: grid;
}

.license-hero .eyebrow,
.license-hero-copy,
.license-hero-status p,
.license-hero-money p,
.license-hero-status span,
.license-hero-money span {
    color: rgba(255, 255, 255, .82);
}

.license-hero h1 {
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 0 0 12px;
    max-width: 760px;
}

.license-hero-copy {
    font-size: 17px;
    margin: 0;
    max-width: 760px;
}

.license-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    margin-top: 22px;
}

.license-hero-actions .button.hero-light {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.license-hero-status,
.license-hero-money {
    align-content: center;
    display: grid;
    gap: 10px;
}

.license-hero-status span,
.license-hero-money span,
.license-workflow-card span,
.license-kpi span,
.license-health span,
.shortcut-grid span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.license-hero-status strong,
.license-hero-money strong {
    display: block;
    font-size: clamp(27px, 3vw, 40px);
    line-height: 1;
}

.license-hero-status p,
.license-hero-money p {
    margin: 0;
}

.license-workflow-grid,
.license-kpi-grid,
.license-health-grid {
    display: grid;
    gap: 12px;
}

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

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

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

.license-workflow-card,
.license-kpi,
.license-health,
.license-panel {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.license-workflow-card,
.license-kpi {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 16px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.license-workflow-card:hover,
.license-kpi:hover,
.priority-list a:hover,
.shortcut-grid a:hover {
    border-color: rgba(15, 118, 110, .34);
    box-shadow: 0 18px 42px rgba(15, 118, 110, .12);
    transform: translateY(-2px);
}

.license-workflow-card.primary {
    background: #10262b;
    border-color: #10262b;
    color: #fff;
}

.license-workflow-card span,
.license-kpi span,
.license-health span,
.license-workflow-card small,
.license-kpi small,
.license-health small {
    color: #64748b;
}

.license-workflow-card.primary span,
.license-workflow-card.primary small {
    color: rgba(255, 255, 255, .72);
}

.license-workflow-card strong {
    font-size: 18px;
    line-height: 1.25;
}

.license-kpi {
    border-top: 4px solid #94a3b8;
}

.license-kpi.teal {
    border-top-color: #0f766e;
}

.license-kpi.blue {
    border-top-color: #2563eb;
}

.license-kpi.violet {
    border-top-color: #7c3aed;
}

.license-kpi.amber {
    border-top-color: #b76e00;
}

.license-kpi strong {
    color: #102033;
    font-size: 36px;
    line-height: 1;
}

.license-health {
    display: grid;
    gap: 14px;
    padding: 16px;
}

.license-health strong {
    color: #102033;
    display: block;
    font-size: 30px;
    line-height: 1;
    margin: 8px 0 5px;
}

.license-health.warning {
    border-left: 5px solid #b76e00;
}

.license-health.danger {
    border-left: 5px solid #b42318;
}

.license-health.good {
    border-left: 5px solid #0f766e;
}

.license-meter {
    background: #e2e8f0;
    border-radius: 999px;
    height: 8px;
    overflow: hidden;
}

.license-meter i {
    background: linear-gradient(90deg, #0f766e, #2563eb);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.license-health.warning .license-meter i {
    background: linear-gradient(90deg, #b76e00, #f59e0b);
}

.license-health.danger .license-meter i {
    background: linear-gradient(90deg, #b42318, #ef4444);
}

.license-command-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.48fr) minmax(340px, .72fr);
}

.license-command-main,
.license-command-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.license-panel {
    min-width: 0;
    overflow: hidden;
}

.license-panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 18px 0;
}

.license-panel-head.compact {
    align-items: flex-start;
}

.license-panel-head h2 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
}

.priority-list {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.priority-list a {
    align-items: start;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    display: grid;
    gap: 12px;
    grid-template-columns: 14px minmax(0, 1fr);
    padding: 13px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.priority-list strong,
.shortcut-grid strong {
    display: block;
    line-height: 1.35;
}

.priority-list small {
    color: #64748b;
    display: block;
    margin-top: 3px;
}

.priority-dot {
    background: #2563eb;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    height: 12px;
    margin-top: 5px;
    width: 12px;
}

.priority-dot.warning {
    background: #b76e00;
    box-shadow: 0 0 0 4px rgba(183, 110, 0, .14);
}

.priority-dot.danger {
    background: #b42318;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .12);
}

.priority-dot.muted {
    background: #64748b;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, .14);
}

.license-table {
    border: 0;
    box-shadow: none;
    margin-top: 10px;
}

.license-table table {
    min-width: 780px;
}

.license-table td,
.license-table th {
    padding: 14px 18px;
    vertical-align: middle;
}

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

.shortcut-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    padding: 16px 18px 18px;
}

.shortcut-grid a {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    display: grid;
    gap: 5px;
    min-height: 90px;
    padding: 13px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.shortcut-grid span {
    color: #0f766e;
}

.license-log-filter {
    display: grid;
    gap: 8px;
    padding: 14px 18px;
}

.license-log-filter input,
.license-log-filter select {
    min-height: 40px;
}

.license-feed {
    display: grid;
    padding: 0 18px 18px;
}

.license-feed-item {
    display: grid;
    gap: 10px;
    grid-template-columns: 14px minmax(0, 1fr);
    padding: 13px 0;
}

.license-feed-item + .license-feed-item {
    border-top: 1px solid #e2e8f0;
}

.license-feed-item p {
    color: #64748b;
    margin: 4px 0 6px;
}

.license-feed-item small {
    color: #64748b;
    font-size: 12px;
}

.activity-dot {
    background: linear-gradient(135deg, #0f766e, #2563eb);
    border-radius: 999px;
    height: 10px;
    margin-top: 6px;
    width: 10px;
}

.activity-top {
    align-items: center;
    display: flex;
    gap: 8px;
    justify-content: space-between;
}

.activity-top span {
    background: #eef6f4;
    border-radius: 999px;
    color: #0f766e;
    font-size: 11px;
    font-weight: 900;
    padding: 4px 8px;
    text-transform: uppercase;
}

@media (max-width: 760px) {
    .license-hero,
    .license-workflow-grid,
    .license-kpi-grid,
    .license-health-grid,
    .license-command-layout,
    .shortcut-grid {
        grid-template-columns: 1fr;
    }

    .license-hero-main,
    .license-hero-status,
    .license-hero-money {
        min-height: auto;
    }

    .license-hero-actions,
    .license-hero-actions .button {
        width: 100%;
    }

    .license-panel-head,
    .activity-top {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (min-width: 761px) and (max-width: 1080px) {
    .license-hero,
    .license-command-layout {
        grid-template-columns: 1fr;
    }

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

    .license-health-grid {
        grid-template-columns: 1fr;
    }
}

/* Customer command dashboard */
.customer-command {
    display: grid;
    gap: 16px;
}

.customer-command-hero {
    background:
        linear-gradient(135deg, rgba(12, 45, 52, .97) 0%, rgba(15, 118, 110, .94) 54%, rgba(37, 99, 235, .88) 100%);
    border: 1px solid rgba(15, 118, 110, .22);
    border-radius: 12px;
    box-shadow: 0 26px 64px rgba(15, 23, 42, .16);
    color: #fff;
    display: grid;
    gap: 1px;
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .62fr);
    overflow: hidden;
}

.customer-command-main,
.customer-command-status {
    background: rgba(255, 255, 255, .08);
    min-height: 330px;
    padding: clamp(22px, 3vw, 30px);
}

.customer-command-main {
    align-content: center;
    display: grid;
}

.customer-command-hero .eyebrow,
.customer-command-copy,
.customer-command-status p,
.customer-command-status span {
    color: rgba(255, 255, 255, .82);
}

.customer-command-hero h1 {
    color: #fff;
    font-size: clamp(34px, 5vw, 58px);
    letter-spacing: 0;
    line-height: 1.02;
    margin: 0 0 12px;
    max-width: 780px;
}

.customer-command-copy {
    font-size: 17px;
    margin: 0;
    max-width: 760px;
}

.customer-profile-pills,
.customer-command-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
}

.customer-profile-pills {
    margin-top: 18px;
}

.customer-profile-pills span {
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 999px;
    color: rgba(255, 255, 255, .88);
    font-size: 13px;
    font-weight: 800;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 7px 10px;
}

.customer-command-actions {
    margin-top: 22px;
}

.customer-command-actions .button.hero-light {
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .24);
    color: #fff;
}

.customer-command-status {
    align-content: center;
    display: grid;
    gap: 12px;
}

.customer-command-status span,
.customer-workflow-card span,
.customer-command-stat span,
.customer-panel .eyebrow,
.snapshot-list span {
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .07em;
    text-transform: uppercase;
}

.customer-command-status strong {
    display: block;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1;
}

.customer-command-status p {
    margin: 0;
}

.customer-command-meter {
    background: rgba(255, 255, 255, .2);
    border-radius: 999px;
    height: 10px;
    overflow: hidden;
}

.customer-command-meter i {
    background: #fff;
    border-radius: inherit;
    display: block;
    height: 100%;
}

.customer-api-panel {
    align-items: center;
    background: linear-gradient(135deg, #ffffff 0%, #eef9f7 100%);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(260px, .6fr) minmax(0, 1fr);
    padding: 18px;
}

.customer-api-panel h2,
.customer-panel-head h2 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0;
}

.customer-api-panel p {
    color: #64748b;
    margin: 6px 0 0;
}

.customer-api-box {
    align-items: center;
    display: flex;
    gap: 8px;
    min-width: 0;
}

.customer-api-box code {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    padding: 10px 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.customer-api-box form {
    display: inline-flex;
}

.customer-workflow-grid,
.customer-command-stats {
    display: grid;
    gap: 12px;
}

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

.customer-command-stats {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.customer-workflow-card,
.customer-command-stat,
.customer-panel {
    background: rgba(255, 255, 255, .96);
    border: 1px solid rgba(148, 163, 184, .28);
    border-radius: 10px;
    box-shadow: 0 16px 38px rgba(15, 23, 42, .07);
}

.customer-workflow-card {
    display: grid;
    gap: 8px;
    min-height: 132px;
    padding: 16px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.customer-workflow-card:hover,
.customer-priority-list a:hover,
.snapshot-list a:hover,
.customer-payment-feed a:hover {
    border-color: rgba(15, 118, 110, .34);
    box-shadow: 0 18px 42px rgba(15, 118, 110, .12);
    transform: translateY(-2px);
}

.customer-workflow-card.primary {
    background: #10262b;
    border-color: #10262b;
    color: #fff;
}

.customer-workflow-card span,
.customer-workflow-card small,
.customer-command-stat span,
.customer-command-stat small,
.snapshot-list span,
.snapshot-list small {
    color: #64748b;
}

.customer-workflow-card.primary span,
.customer-workflow-card.primary small {
    color: rgba(255, 255, 255, .72);
}

.customer-workflow-card strong {
    font-size: 18px;
    line-height: 1.25;
}

.customer-command-stat {
    border-top: 4px solid #94a3b8;
    display: grid;
    gap: 8px;
    min-height: 128px;
    padding: 16px;
}

.customer-command-stat.is-licenses {
    border-top-color: #2563eb;
}

.customer-command-stat.is-active {
    border-top-color: #0f766e;
}

.customer-command-stat.is-expired {
    border-top-color: #b42318;
}

.customer-command-stat.is-pending {
    border-top-color: #b76e00;
}

.customer-command-stat.is-activations {
    border-top-color: #475569;
}

.customer-command-stat strong {
    color: #102033;
    font-size: 34px;
    line-height: 1;
}

.customer-command-layout {
    align-items: start;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1.45fr) minmax(340px, .72fr);
}

.customer-command-maincol,
.customer-command-side {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.customer-panel {
    min-width: 0;
    overflow: hidden;
}

.customer-panel-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 18px 18px 0;
}

.customer-panel-head.compact {
    align-items: flex-start;
}

.customer-priority-list {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.customer-priority-list a,
.snapshot-list a,
.customer-payment-feed a {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 9px;
    transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.customer-priority-list a {
    align-items: start;
    display: grid;
    gap: 12px;
    grid-template-columns: 14px minmax(0, 1fr);
    padding: 13px;
}

.customer-priority-list strong,
.snapshot-list strong {
    display: block;
    line-height: 1.35;
}

.customer-priority-list small {
    color: #64748b;
    display: block;
    margin-top: 3px;
}

.customer-priority-dot {
    background: #2563eb;
    border-radius: 999px;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
    height: 12px;
    margin-top: 5px;
    width: 12px;
}

.customer-priority-dot.good {
    background: #0f766e;
    box-shadow: 0 0 0 4px rgba(15, 118, 110, .12);
}

.customer-priority-dot.warning {
    background: #b76e00;
    box-shadow: 0 0 0 4px rgba(183, 110, 0, .14);
}

.customer-priority-dot.danger {
    background: #b42318;
    box-shadow: 0 0 0 4px rgba(180, 35, 24, .12);
}

.customer-priority-dot.muted {
    background: #64748b;
    box-shadow: 0 0 0 4px rgba(100, 116, 139, .14);
}

.customer-command-table {
    border: 0;
    box-shadow: none;
    margin-top: 10px;
}

.customer-command-table table {
    min-width: 780px;
}

.customer-command-table td,
.customer-command-table th {
    padding: 14px 18px;
    vertical-align: middle;
}

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

.customer-command-table code {
    display: inline-block;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
    white-space: nowrap;
}

.snapshot-list,
.customer-payment-feed {
    display: grid;
    gap: 10px;
    padding: 16px 18px 18px;
}

.snapshot-list a {
    display: grid;
    gap: 5px;
    min-height: 94px;
    padding: 13px;
}

.customer-payment-feed a {
    align-items: start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
    padding: 13px;
}

.customer-payment-feed strong,
.customer-payment-feed span,
.customer-payment-feed b,
.customer-payment-feed small {
    display: block;
}

.customer-payment-feed span {
    color: #64748b;
    font-size: 13px;
    margin-top: 3px;
}

.customer-payment-feed b {
    color: #102033;
    text-align: right;
    white-space: nowrap;
}

.customer-payment-feed .badge {
    margin-top: 5px;
    text-align: center;
}

@media (max-width: 760px) {
    .customer-command-hero,
    .customer-api-panel,
    .customer-workflow-grid,
    .customer-command-stats,
    .customer-command-layout {
        grid-template-columns: 1fr;
    }

    .customer-command-main,
    .customer-command-status {
        min-height: auto;
    }

    .customer-command-actions,
    .customer-command-actions .button,
    .customer-api-box,
    .customer-api-box .button,
    .customer-api-box form,
    .customer-api-box form .button {
        width: 100%;
    }

    .customer-api-box,
    .customer-panel-head,
    .customer-payment-feed a {
        align-items: stretch;
        flex-direction: column;
    }

    .customer-payment-feed b {
        text-align: left;
    }
}

@media (min-width: 761px) and (max-width: 1080px) {
    .customer-command-hero,
    .customer-api-panel,
    .customer-command-layout {
        grid-template-columns: 1fr;
    }

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