/* GPixel product-wide SaaS interface. Loaded after legacy page styles. */
:root {
    --ui-bg: #f3f6fa;
    --ui-surface: #ffffff;
    --ui-surface-subtle: #f8fafc;
    --ui-surface-muted: #f1f4f8;
    --ui-ink: #172033;
    --ui-ink-soft: #344054;
    --ui-muted: #667085;
    --ui-faint: #98a2b3;
    --ui-line: #e1e7ef;
    --ui-line-strong: #d4dce7;
    --ui-brand: #6d3de6;
    --ui-brand-strong: #5627c8;
    --ui-brand-soft: #f1edff;
    --ui-blue: #2563eb;
    --ui-green: #07965b;
    --ui-amber: #d97706;
    --ui-red: #d83b52;
    --ui-teal: #0d9488;
    --ui-radius-sm: 9px;
    --ui-radius: 14px;
    --ui-radius-lg: 18px;
    --ui-shadow-xs: 0 1px 2px rgba(15, 23, 42, .035);
    --ui-shadow-sm: 0 1px 2px rgba(15, 23, 42, .035), 0 10px 28px rgba(15, 23, 42, .045);
    --ui-shadow-md: 0 18px 48px rgba(27, 25, 55, .10);
    --ui-focus: 0 0 0 3px rgba(109, 61, 230, .16);
}

.product-ui { min-width: 320px; color: var(--ui-ink); background: var(--ui-bg); font-size: 14px; }
.product-ui * { scrollbar-color: #c4bbdd transparent; scrollbar-width: thin; }
.product-ui ::selection { color: #fff; background: var(--ui-brand); }
.product-ui a,
.product-ui button,
.product-ui input,
.product-ui select,
.product-ui textarea,
.product-ui summary { -webkit-tap-highlight-color: transparent; }
.product-ui button,
.product-ui select,
.product-ui summary,
.product-ui input[type="checkbox"],
.product-ui input[type="radio"] { cursor: pointer; }

/* Page rhythm and hierarchy */
.product-ui .page-content { display: grid; gap: 20px; }
.product-ui .page-content > .panel,
.product-ui .page-content > .profile-banner,
.product-ui .page-content > .filter-bar,
.product-ui .page-content > .section-tabs,
.product-ui .page-content > .tabs,
.product-ui .page-content > .desktop-tool-tabs,
.product-ui .page-content > .stat-grid,
.product-ui .page-content > .metric-grid,
.product-ui .page-content > .split-grid,
.product-ui .page-content > .detail-grid,
.product-ui .page-content > .action-grid,
.product-ui .page-content > .security-grid,
.product-ui .page-content > .ticket-layout,
.product-ui .page-content > .service-price-grid,
.product-ui .page-content > .release-grid,
.product-ui .page-content > .desktop-hero,
.product-ui .page-content > .credit-hero,
.product-ui .page-content > .credit-analytics-grid { margin-bottom: 0; }

.product-ui .eyebrow { color: #858fa2; font-size: 9px; font-weight: 800; letter-spacing: .13em; }
.product-ui h2 { color: var(--ui-ink); letter-spacing: -.015em; }
.product-ui p { line-height: 1.65; }
.product-ui .muted,
.product-ui .muted-note,
.product-ui .field-help,
.product-ui .fine-print { color: var(--ui-muted); font-size: 12px; line-height: 1.65; }
.product-ui code { overflow-wrap: anywhere; border: 1px solid #e5e9f0; border-radius: 6px; color: #475467; background: #f5f7fa; font-size: 11px; }

/* Surfaces */
.product-ui .panel,
.product-ui .price-card,
.product-ui .service-admin-card,
.product-ui .staff-card,
.product-ui .package-card,
.product-ui .release-card,
.product-ui .readiness-card {
    min-width: 0;
    padding: 22px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: var(--ui-surface);
    box-shadow: var(--ui-shadow-sm);
}
.product-ui .panel { margin-bottom: 0; }
.product-ui .panel-head { min-height: 40px; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.product-ui .panel-head > div { min-width: 0; }
.product-ui .panel-head h2,
.product-ui .panel > h2 { color: var(--ui-ink); font-size: 16px; line-height: 1.25; }
.product-ui .panel-head .eyebrow { margin-bottom: 5px; }
.product-ui .panel-head > .filters { justify-content: flex-end; }
.product-ui .panel:hover { border-color: #d8dfea; }

.product-ui .split-grid,
.product-ui .detail-grid,
.product-ui .action-grid,
.product-ui .security-grid { gap: 20px; }
.product-ui .detail-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.product-ui .action-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 310px), 1fr)); }
.product-ui .security-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Buttons and links */
.product-ui .btn,
.product-ui .button,
.product-ui .link-button {
    display: inline-flex;
    min-height: 44px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 750;
    line-height: 1.2;
    text-align: center;
    transition: color .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease, transform .16s ease;
}
.product-ui .btn:hover,
.product-ui .button:hover,
.product-ui .link-button:hover { transform: translateY(-1px); }
.product-ui .btn:active,
.product-ui .button:active,
.product-ui .link-button:active { transform: translateY(0); }
.product-ui .btn.primary,
.product-ui .button-primary { color: #fff; border-color: #6c3edb; background: linear-gradient(115deg, var(--ui-brand-strong), #8152ec); box-shadow: 0 8px 19px rgba(91, 48, 211, .19); }
.product-ui .btn.primary:hover,
.product-ui .button-primary:hover { background: linear-gradient(115deg, #4f23bb, #7545e3); box-shadow: 0 10px 24px rgba(91, 48, 211, .24); }
.product-ui .btn.soft,
.product-ui .button-secondary { color: #5f36c3; border-color: #e2daf9; background: #f3f0ff; box-shadow: none; }
.product-ui .btn.soft:hover,
.product-ui .button-secondary:hover { border-color: #cfc0f6; background: #eae4ff; }
.product-ui .btn.light { color: #293348; border-color: #e0e6ef; background: #fff; }
.product-ui .btn.danger { color: #fff; border-color: #cf334c; background: linear-gradient(115deg, #c92f48, #e14b61); box-shadow: 0 8px 18px rgba(207, 51, 76, .16); }
.product-ui .btn.danger:hover { background: linear-gradient(115deg, #b5253d, #d93c55); }
.product-ui .btn:disabled,
.product-ui button:disabled { cursor: not-allowed; opacity: .56; transform: none; }
.product-ui .table-link { display: inline-flex; min-height: 36px; align-items: center; color: #633bc5; font-size: 11px; font-weight: 750; }
.product-ui .table-link:hover { color: #4d26ae; text-decoration: underline; text-underline-offset: 3px; }

/* Forms */
.product-ui input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
.product-ui select,
.product-ui textarea {
    width: 100%;
    min-height: 44px;
    border: 1px solid var(--ui-line-strong);
    border-radius: 10px;
    padding: 10px 12px;
    outline: 0;
    color: var(--ui-ink);
    background: #fff;
    font-size: 12px;
    line-height: 1.4;
    transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.product-ui textarea { min-height: 96px; resize: vertical; }
.product-ui input::placeholder,
.product-ui textarea::placeholder { color: #9aa4b5; }
.product-ui input:hover,
.product-ui select:hover,
.product-ui textarea:hover { border-color: #bdc7d5; }
.product-ui input:focus,
.product-ui select:focus,
.product-ui textarea:focus { border-color: #8c69e8; box-shadow: var(--ui-focus); }
.product-ui input:disabled,
.product-ui select:disabled,
.product-ui textarea:disabled { cursor: not-allowed; color: #667085; border-color: #e4e8ee; background: #f3f5f8; }
.product-ui input[aria-invalid="true"],
.product-ui select[aria-invalid="true"],
.product-ui textarea[aria-invalid="true"] { border-color: #df5368; box-shadow: 0 0 0 3px rgba(216, 59, 82, .12); }
.product-ui input[type="checkbox"],
.product-ui input[type="radio"] { width: 18px; height: 18px; flex: none; accent-color: var(--ui-brand); }
.product-ui input[type="file"] { padding: 7px; background: #f8fafc; }
.product-ui input[type="file"]::file-selector-button { height: 30px; margin-right: 10px; border: 0; border-radius: 7px; padding: 0 10px; color: #5e38bf; background: #eee9ff; font-weight: 700; cursor: pointer; }

.product-ui .form-grid,
.product-ui .stack-form,
.product-ui .compact-form,
.product-ui .reply-box,
.product-ui .purchase-review-form,
.product-ui .danger-zone form,
.product-ui .ticket-layout aside form { gap: 16px; }
.product-ui .form-grid label,
.product-ui .stack-form label,
.product-ui .filter-bar label,
.product-ui .reply-box label,
.product-ui .purchase-review-form label,
.product-ui .ticket-layout aside label,
.product-ui .credit-adjust label {
    display: grid;
    min-width: 0;
    gap: 7px;
    color: var(--ui-ink-soft);
    font-size: 11px;
    font-weight: 750;
}
.product-ui .form-grid label small,
.product-ui .stack-form label small,
.product-ui label .field-help { font-weight: 450; }
.product-ui .form-actions { gap: 10px; margin-top: 24px; padding-top: 20px; border-color: var(--ui-line); }
.product-ui .form-divider { display: flex; align-items: center; gap: 10px; color: var(--ui-muted); font-size: 10px; font-weight: 700; text-transform: uppercase; }
.product-ui .form-divider::before,
.product-ui .form-divider::after { content: ""; height: 1px; flex: 1; background: var(--ui-line); }
.product-ui .check-row,
.product-ui label.check,
.product-ui .toggle-row { display: flex; min-height: 44px; align-items: center; gap: 9px; color: var(--ui-ink-soft); font-size: 11px; font-weight: 650; }

.product-ui .nav-children a { display: flex; min-height: 40px; align-items: center; }
.product-ui .inline-form { display: flex; align-items: flex-end; gap: 10px; }
.product-ui .inline-form > input,
.product-ui .inline-form > select { flex: 1; }
.product-ui .field-error { margin-top: -2px; color: #bd2942; font-size: 10px; font-weight: 650; }

/* Filters */
.product-ui .filter-bar,
.product-ui .filter-grid,
.product-ui .credit-search {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: end;
    gap: 12px;
    padding: 16px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-xs);
}

.product-ui .credential-output{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:10px 16px;align-items:center;margin:18px 0}.product-ui .credential-output span{color:var(--muted);font-size:11px;font-weight:700}.product-ui .credential-output code{overflow-wrap:anywhere;user-select:all}.product-ui .api-secret-panel{border-color:#b9ead5;background:#f3fcf8}.product-ui .field-error{color:var(--danger)!important}
.product-ui .integration-tabs { display: inline-flex; gap: 5px; margin: 0 0 16px; padding: 5px; border: 1px solid var(--ui-line); border-radius: 13px; background: #fff; box-shadow: var(--ui-shadow-xs); }
.product-ui .integration-tabs a { display: inline-flex; min-width: 132px; min-height: 44px; align-items: center; justify-content: center; padding: 9px 16px; border-radius: 9px; color: var(--ui-muted); font-size: 11px; font-weight: 800; }
.product-ui .integration-tabs a:hover { color: var(--ui-brand); background: #f5f2ff; }
.product-ui .integration-tabs a.active { color: #fff; background: linear-gradient(135deg, var(--ui-brand), var(--ui-brand-strong)); box-shadow: 0 7px 16px rgba(89, 41, 232, .2); }
.product-ui .reseller-quick-actions { display: grid; grid-template-columns: minmax(260px, 1fr) auto minmax(220px, auto); align-items: center; gap: 20px; }
.product-ui .reseller-quick-actions .eyebrow { margin-left: 0; }
.product-ui .reseller-quick-actions h2 { margin-bottom: 7px; }
.product-ui .reseller-quick-actions p:not(.eyebrow) { max-width: 620px; margin: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.55; }
.product-ui .reseller-quick-action-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.product-ui .reseller-quick-action-links .btn { min-height: 44px; gap: 7px; }
.product-ui .reseller-api-status { display: grid; gap: 6px; margin: 0; padding-left: 20px; border-left: 1px solid var(--ui-line); }
.product-ui .reseller-api-status div { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.product-ui .reseller-api-status dt { color: var(--ui-muted); font-size: 9px; }
.product-ui .reseller-api-status dd { margin: 0; font-size: 11px; font-weight: 800; text-align: right; }
.product-ui .dhru-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    color: #fff;
    border-color: #31236f;
    background: radial-gradient(circle at 88% 0, rgba(96, 165, 250, .28), transparent 32%), linear-gradient(125deg, #251454, #402097 58%, #214f91);
}
.product-ui .dhru-hero h2 { margin-bottom: 9px; color: #fff; font-size: clamp(21px, 3vw, 30px); }
.product-ui .dhru-hero p:not(.eyebrow) { max-width: 760px; margin: 0; color: #ddd7f7; line-height: 1.7; }
.product-ui .dhru-hero .eyebrow { color: #cfc4ff; }
.product-ui .dhru-hero-facts { display: grid; grid-template-columns: repeat(3, minmax(88px, 1fr)); min-width: min(390px, 38%); border: 1px solid rgba(255, 255, 255, .18); border-radius: 14px; background: rgba(255, 255, 255, .08); backdrop-filter: blur(9px); }
.product-ui .dhru-hero-facts div { padding: 17px 14px; text-align: center; border-right: 1px solid rgba(255, 255, 255, .13); }
.product-ui .dhru-hero-facts div:last-child { border-right: 0; }
.product-ui .dhru-hero-facts span,
.product-ui .dhru-hero-facts strong { display: block; }
.product-ui .dhru-hero-facts span { color: #bdb5db; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.product-ui .dhru-hero-facts strong { margin-top: 6px; color: #fff; font-size: 12px; }
.product-ui .api-secret-panel { border-left: 4px solid var(--ui-green); }
.product-ui .copy-field { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 12px; margin-top: 9px; padding: 10px 12px; border: 1px solid #d7e9e1; border-radius: 10px; background: #fff; }
.product-ui .copy-field > span { color: var(--ui-muted); font-size: 10px; font-weight: 750; }
.product-ui .copy-field code { overflow-wrap: anywhere; user-select: all; }
.product-ui .copy-field.secret { border-color: #cfc3f4; background: #faf8ff; }
.product-ui .btn.compact { min-height: 44px; padding: 9px 13px; }
.product-ui .security-note { margin: 14px 0 0; color: #3f5f51; font-size: 10px; line-height: 1.55; }
.product-ui .integration-values { margin: 18px 0 0; border: 1px solid var(--ui-line); border-radius: 11px; }
.product-ui .integration-values > div { display: grid; grid-template-columns: 145px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 48px; padding: 9px 13px; border-bottom: 1px solid var(--ui-line); }
.product-ui .integration-values > div:last-child { border-bottom: 0; }
.product-ui .integration-values dt { color: var(--ui-muted); font-size: 10px; font-weight: 700; }
.product-ui .integration-values dd { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; margin: 0; color: var(--ui-ink-soft); font-size: 11px; }
.product-ui .integration-values code { overflow-wrap: anywhere; user-select: all; }
.product-ui .integration-values button { min-width: 62px; min-height: 44px; border: 1px solid #d8d0ef; border-radius: 8px; color: var(--ui-brand); background: #f7f4ff; font: inherit; font-weight: 750; cursor: pointer; }
.product-ui .dhru-checklist ol,
.product-ui .numbered-guide { display: grid; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.product-ui .dhru-checklist li { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 10px; }
.product-ui .dhru-checklist li > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #7747e8, #4e24bd); font-size: 11px; font-weight: 800; }
.product-ui .dhru-checklist b,
.product-ui .dhru-checklist small { display: block; }
.product-ui .dhru-checklist b { color: var(--ui-ink-soft); font-size: 11px; }
.product-ui .dhru-checklist small { margin-top: 3px; color: var(--ui-muted); font-size: 9px; line-height: 1.45; }
.product-ui .dhru-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 13px; }
.product-ui .dhru-service-card { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 16px; padding: 18px; border: 1px solid var(--ui-line); border-radius: 12px; background: linear-gradient(145deg, #fff, #faf9ff); }
.product-ui .dhru-service-card .service-id { grid-row: 1 / span 2; display: grid; place-content: center; min-height: 106px; padding: 12px; text-align: center; border: 1px solid #d8cdf7; border-radius: 11px; background: #f3efff; }
.product-ui .service-id span,
.product-ui .service-id strong { display: block; }
.product-ui .service-id span { color: #806eaf; font-size: 8px; text-transform: uppercase; letter-spacing: .07em; }
.product-ui .service-id strong { margin-top: 8px; color: #4f25c6; font-size: 20px; }
.product-ui .dhru-service-card h3 { margin: 1px 0 5px; font-size: 14px; }
.product-ui .dhru-service-card p { margin: 0; color: var(--ui-muted); font-size: 10px; line-height: 1.55; }
.product-ui .dhru-service-card dl { display: grid; grid-template-columns: repeat(3, 1fr); grid-column: 2; gap: 7px; margin: 4px 0 0; }
.product-ui .dhru-service-card dl div { padding: 9px; border-radius: 8px; background: #f5f7fa; }
.product-ui .dhru-service-card dt,
.product-ui .dhru-service-card dd { margin: 0; }
.product-ui .dhru-service-card dt { color: var(--ui-muted); font-size: 8px; }
.product-ui .dhru-service-card dd { margin-top: 5px; color: var(--ui-ink-soft); font-size: 9px; line-height: 1.4; }
.product-ui .information-strip { margin-top: 13px; padding: 13px 15px; border: 1px solid #d8e5f7; border-radius: 10px; color: #395476; background: #f4f8fe; font-size: 10px; line-height: 1.6; }
.product-ui .information-strip.warning { border-color: #f0d7a7; color: #805611; background: #fff8e9; }
.product-ui .numbered-guide li { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--ui-line); }
.product-ui .numbered-guide li:last-child { padding-bottom: 0; border-bottom: 0; }
.product-ui .numbered-guide li > span { color: #6d3dda; font: 800 11px/1.4 ui-monospace, SFMono-Regular, Consolas, monospace; }
.product-ui .numbered-guide b { color: var(--ui-ink-soft); font-size: 11px; }
.product-ui .numbered-guide p { margin: 4px 0 0; color: var(--ui-muted); font-size: 10px; line-height: 1.55; }
.product-ui .action-list { display: grid; margin: 18px 0; border: 1px solid var(--ui-line); border-radius: 11px; }
.product-ui .action-list div { display: grid; grid-template-columns: minmax(155px, .6fr) 1fr; align-items: center; gap: 12px; min-height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--ui-line); }
.product-ui .action-list div:last-child { border-bottom: 0; }
.product-ui .action-list span { color: var(--ui-muted); font-size: 10px; }
.product-ui .dhru-details { border-top: 1px solid var(--ui-line); }
.product-ui .dhru-details summary { min-height: 44px; padding: 13px 2px; color: var(--ui-ink-soft); font-size: 11px; font-weight: 750; cursor: pointer; }
.product-ui .dhru-details p,
.product-ui .dhru-details ul { margin: 0 0 14px; color: var(--ui-muted); font-size: 10px; line-height: 1.65; }
.product-ui .revoke-api-form { display: grid; grid-template-columns: minmax(140px, 1fr) auto; align-items: end; gap: 7px; min-width: 240px; }
.product-ui .revoke-api-form label { display: grid; gap: 5px; color: var(--ui-muted); font-size: 8px; font-weight: 700; }
.product-ui .revoke-api-form input { min-width: 0; }
.product-ui .onboarding-card{justify-content:flex-start;overflow-y:auto}.product-ui .onboarding-card .login-brand{margin-bottom:34px}.product-ui .onboarding-form{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px}.product-ui .onboarding-form label:not(.check){display:grid;gap:7px;color:var(--ui-ink-soft);font-size:11px;font-weight:750}.product-ui .onboarding-form input,.product-ui .onboarding-form select{width:100%}.product-ui .onboarding-form .span-2{grid-column:1/-1}.product-ui .onboarding-form .terms-row{grid-column:1/-1;margin:4px 0}.product-ui .onboarding-logout{text-align:center;margin-top:18px}.product-ui .onboarding-logout button{border:0;background:transparent;color:var(--ui-muted);cursor:pointer;text-decoration:underline}
.product-ui .filters { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.product-ui .filters input { min-width: min(260px, 100%); }
.product-ui .filters select { width: auto; min-width: 140px; }
.product-ui .filter-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }

/* Stats and product metrics */
.product-ui .stat-grid { gap: 12px; }
.product-ui .stat-card {
    min-height: 120px;
    padding: 18px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius);
    background: #fff;
    box-shadow: var(--ui-shadow-sm);
}
.product-ui .stat-card::before { top: -30px; right: -28px; width: 88px; height: 88px; opacity: .055; }
.product-ui .stat-card::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: currentColor; opacity: .75; }
.product-ui .stat-card span { color: #667085; font-size: 10px; font-weight: 750; }
.product-ui .stat-card strong { margin: 14px 0 7px; color: var(--ui-ink); font-size: 27px; letter-spacing: -.025em; }
.product-ui .stat-card small { color: #98a2b3; font-size: 9px; line-height: 1.45; }
.product-ui .stat-card.red { color: var(--ui-red); }

/* Legacy metric markup is shared by reseller, finance, compatibility and security pages. */
.product-ui .metric-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.product-ui .metric-card:not(:has(.metric-copy)) {
    display: grid;
    min-height: 112px;
    align-content: center;
    gap: 6px;
    padding: 18px;
}
.product-ui .metric-card:not(:has(.metric-copy)) > span { color: #667085; font-size: 10px; font-weight: 750; letter-spacing: .035em; }
.product-ui .metric-card:not(:has(.metric-copy)) > strong { margin: 5px 0 1px; color: var(--ui-ink); font-size: clamp(20px, 2vw, 26px); letter-spacing: -.025em; }
.product-ui .metric-card:not(:has(.metric-copy)) > small { color: #98a2b3; font-size: 9px; line-height: 1.45; }
.product-ui .dashboard-command .metric-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* Tables */
.product-ui .table-wrap,
.product-ui .table-scroll,
.product-ui .pricing-table-shell {
    width: 100%;
    overflow-x: auto;
    border: 1px solid var(--ui-line);
    border-radius: 11px;
    background: #fff;
}
.product-ui .panel > .table-wrap,
.product-ui .panel > .table-scroll { margin-top: 2px; }
.product-ui table { min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 12px; }
.product-ui th {
    position: sticky;
    z-index: 2;
    top: 0;
    padding: 12px 14px;
    border-bottom: 1px solid var(--ui-line);
    color: #7e899c;
    background: #f8fafc;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .07em;
    white-space: nowrap;
}
.product-ui td { padding: 13px 14px; border-bottom: 1px solid #edf0f4; color: #536077; line-height: 1.5; vertical-align: middle; }
.product-ui tbody tr:last-child td { border-bottom: 0; }
.product-ui tbody tr { transition: background .14s ease; }
.product-ui tbody tr:hover { background: #f9fbfd; }
.product-ui td > small,
.product-ui td .block { display: block; margin-top: 4px; color: #8d97a8; font-size: 9px; line-height: 1.45; }
.product-ui td > b,
.product-ui td > strong { color: var(--ui-ink-soft); }
.product-ui td form { display: grid; min-width: 180px; gap: 8px; }
.product-ui .empty { min-height: 120px; padding: 38px 20px !important; color: #8d97a8 !important; font-size: 11px; }

/* Customer series pricing workspace */
.product-ui .series-pricing-panel { overflow: visible; padding: 0; }
.product-ui .pricing-panel-head { align-items: flex-start; margin: 0; padding: 24px 24px 20px; border-bottom: 1px solid var(--ui-line); }
.product-ui .pricing-panel-head > div { max-width: 760px; }
.product-ui .pricing-panel-head h2 { font-size: 19px; }
.product-ui .pricing-panel-head p:not(.eyebrow) { max-width: 690px; margin: 8px 0 0; color: var(--ui-muted); font-size: 12px; }
.product-ui .pricing-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; border-bottom: 1px solid var(--ui-line); background: var(--ui-line); }
.product-ui .pricing-summary > div { display: flex; min-width: 0; align-items: center; gap: 11px; padding: 15px 24px; background: #fbfcfe; }
.product-ui .pricing-summary-icon { display: grid; width: 36px; height: 36px; flex: none; place-items: center; border-radius: 10px; color: #5d38be; background: #efeaff; }
.product-ui .pricing-summary-icon.override { color: #08784c; background: #eaf8f1; }
.product-ui .pricing-summary-icon.series { color: #2563eb; background: #edf3ff; }
.product-ui .pricing-summary > div > span:last-child { display: grid; min-width: 0; gap: 3px; }
.product-ui .pricing-summary small { color: #8a94a6; font-size: 9px; font-weight: 700; letter-spacing: .035em; text-transform: uppercase; }
.product-ui .pricing-summary strong { overflow: hidden; color: var(--ui-ink); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.product-ui .pricing-guidance { display: flex; align-items: flex-start; gap: 10px; margin: 20px 24px 0; padding: 13px 15px; border: 1px solid #ddd4f8; border-radius: 11px; color: #5e39bc; background: #f7f5ff; }
.product-ui .pricing-guidance > .ui-icon { flex: none; margin-top: 2px; }
.product-ui .pricing-guidance p { display: grid; gap: 3px; margin: 0; }
.product-ui .pricing-guidance strong { color: #5030a5; font-size: 11px; }
.product-ui .pricing-guidance span { color: #72668d; font-size: 10px; line-height: 1.55; }
.product-ui .series-pricing-panel > .form-error-box { margin: 16px 24px 0; }
.product-ui .series-pricing-form { display: grid; gap: 18px; padding: 20px 24px 24px; }
.product-ui .pricing-series-list { display: grid; gap: 16px; }
.product-ui .pricing-series-card { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 13px; background: #fff; box-shadow: var(--ui-shadow-xs); }
.product-ui .pricing-series-head { display: flex; min-height: 68px; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid var(--ui-line); background: linear-gradient(90deg, #f8fafc, #fff); }
.product-ui .series-generation { display: grid; width: 40px; height: 40px; flex: none; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #7445e8, #5525c8); box-shadow: 0 8px 18px rgba(91, 48, 211, .16); font-size: 16px; font-weight: 800; }
.product-ui .pricing-series-head > div { min-width: 0; flex: 1; }
.product-ui .pricing-series-head .eyebrow { margin: 0 0 3px; }
.product-ui .pricing-series-head h3 { margin: 0; color: var(--ui-ink); font-size: 15px; letter-spacing: -.015em; }
.product-ui .pricing-service-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.product-ui .pricing-service-card { min-width: 0; margin: 0; padding: 16px; border: 0; border-right: 1px solid var(--ui-line); background: #fff; transition: background .16s ease, box-shadow .16s ease; }
.product-ui .pricing-service-card:last-child { border-right: 0; }
.product-ui .pricing-service-card[data-mode="override"] { position: relative; z-index: 1; background: #fbfaff; box-shadow: inset 3px 0 #7142de; }
.product-ui .pricing-service-card legend { width: 100%; padding: 0; color: var(--ui-ink); font-size: 12px; font-weight: 800; line-height: 1.35; }
.product-ui .pricing-card-topline { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 8px; margin: 7px 0 12px; }
.product-ui .pricing-source-badge { display: inline-flex; min-height: 24px; align-items: center; gap: 6px; border: 1px solid #dfe4eb; border-radius: 999px; padding: 4px 8px; color: #667085; background: #f4f6f8; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.product-ui .pricing-source-badge i { width: 6px; height: 6px; border-radius: 50%; background: #98a2b3; }
.product-ui [data-mode="override"] .pricing-source-badge { color: #6335c4; border-color: #ddd2fa; background: #f0ecff; }
.product-ui [data-mode="override"] .pricing-source-badge i { background: #7545df; box-shadow: 0 0 0 3px rgba(117, 69, 223, .12); }
.product-ui .pricing-card-topline .service-code { overflow: hidden; color: #98a2b3; font-size: 8px; text-overflow: ellipsis; text-transform: uppercase; white-space: nowrap; }
.product-ui .pricing-baseline { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 3px 10px; margin-bottom: 14px; padding: 11px; border: 1px solid #e5e9ef; border-radius: 9px; background: #f8fafc; }
.product-ui .pricing-baseline span { color: #7f8a9e; font-size: 8px; font-weight: 750; letter-spacing: .045em; text-transform: uppercase; }
.product-ui .pricing-baseline strong { color: var(--ui-ink); font-size: 18px; line-height: 1; }
.product-ui .pricing-baseline small { grid-column: 1 / -1; color: #8993a5; font-size: 9px; }
.product-ui .pricing-service-card > label,
.product-ui .pricing-value-grid > label { display: grid; min-width: 0; gap: 6px; color: var(--ui-ink-soft); font-size: 10px; font-weight: 750; }
.product-ui .pricing-service-card > label { margin-bottom: 12px; }
.product-ui .pricing-value-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.product-ui .pricing-input { position: relative; display: block; }
.product-ui .pricing-input input { min-width: 0; padding-right: 47px !important; font-variant-numeric: tabular-nums; }
.product-ui .pricing-input > small { position: absolute; top: 50%; right: 10px; color: #98a2b3; font-size: 8px; font-weight: 700; pointer-events: none; transform: translateY(-50%); }
.product-ui .pricing-field-note { color: #8a94a6; font-size: 8px; font-weight: 500; line-height: 1.4; }
.product-ui [data-mode="inherit"] .pricing-value-grid { opacity: .62; }
.product-ui [data-mode="override"] .pricing-value-grid { opacity: 1; }
.product-ui .pricing-save-bar { position: static; z-index: 12; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 13px 14px 13px 16px; border: 1px solid #ddd4f4; border-radius: 12px; background: rgba(255, 255, 255, .94); box-shadow: 0 16px 40px rgba(24, 23, 43, .15); backdrop-filter: blur(14px); }
.product-ui .pricing-save-bar p { display: flex; align-items: center; gap: 8px; margin: 0; color: #667085; font-size: 10px; font-weight: 700; }
.product-ui .pricing-save-bar p i { width: 8px; height: 8px; border-radius: 50%; background: #10a36a; box-shadow: 0 0 0 4px rgba(16, 163, 106, .10); }
.product-ui .series-pricing-form[data-dirty="true"] .pricing-save-bar { position: sticky; bottom: 14px; border-color: #cfc0f6; }
.product-ui .series-pricing-form[data-dirty="true"] .pricing-save-bar p { color: #5f36c3; }
.product-ui .series-pricing-form[data-dirty="true"] .pricing-save-bar p i { background: #7545df; box-shadow: 0 0 0 4px rgba(117, 69, 223, .11); }
.product-ui .pricing-empty { display: grid; min-height: 180px; place-items: center; align-content: center; gap: 7px; color: #8a94a6; text-align: center; }
.product-ui .pricing-empty strong { color: var(--ui-ink); }
.product-ui .pricing-empty span { font-size: 10px; }

@media (max-width: 1280px) {
    .product-ui .pricing-service-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-ui .pricing-service-card:nth-child(2n) { border-right: 0; }
    .product-ui .pricing-service-card:nth-child(n+3) { border-top: 1px solid var(--ui-line); }
}

@media (max-width: 760px) {
    .product-ui .pricing-panel-head { padding: 19px 17px 17px; }
    .product-ui .pricing-panel-head > .btn { width: 100%; }
    .product-ui .pricing-summary { grid-template-columns: 1fr; }
    .product-ui .pricing-summary > div { padding: 12px 17px; }
    .product-ui .pricing-guidance { margin: 16px 17px 0; }
    .product-ui .series-pricing-panel > .form-error-box { margin-inline: 17px; }
    .product-ui .series-pricing-form { padding: 17px; }
    .product-ui .pricing-service-grid { grid-template-columns: 1fr; }
    .product-ui .pricing-service-card,
    .product-ui .pricing-service-card:nth-child(2n) { border-right: 0; }
    .product-ui .pricing-service-card:nth-child(n+2) { border-top: 1px solid var(--ui-line); }
    .product-ui .pricing-save-bar { align-items: stretch; flex-direction: column; }
    .product-ui .series-pricing-form[data-dirty="true"] .pricing-save-bar { bottom: 9px; }
    .product-ui .pricing-save-bar .btn { width: 100%; }
}

@media (max-width: 420px) {
    .product-ui .pricing-series-head .badge { display: none; }
    .product-ui .pricing-value-grid { grid-template-columns: 1fr; }
}

/* Status and progress */
.product-ui .badge {
    min-height: 26px;
    align-items: center;
    gap: 5px;
    border: 1px solid #e1e5eb;
    border-radius: 999px;
    padding: 4px 8px;
    color: #667085;
    background: #f3f5f8;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .025em;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}
.product-ui .badge.active,
.product-ui .badge.connected,
.product-ui .badge.succeeded,
.product-ui .badge.completed,
.product-ui .badge.published,
.product-ui .badge.available { color: #08784c; border-color: #ccebdc; background: #eaf8f1; }
.product-ui .badge.running,
.product-ui .badge.queued,
.product-ui .badge.info,
.product-ui .badge.open { color: #2d5fc5; border-color: #d8e4ff; background: #edf3ff; }
.product-ui .badge.pending,
.product-ui .badge.reserved,
.product-ui .badge.capacity_exceeded,
.product-ui .badge.waiting_support,
.product-ui .badge.waiting_customer,
.product-ui .badge.high { color: #a7650a; border-color: #f1dfb9; background: #fff7e7; }
.product-ui .badge.failed,
.product-ui .badge.released,
.product-ui .badge.disabled,
.product-ui .badge.suspended,
.product-ui .badge.cancelled,
.product-ui .badge.urgent,
.product-ui .badge.critical { color: #b32e45; border-color: #f1ccd3; background: #fff0f2; }
.product-ui .mini-progress,
.product-ui .progress-track,
.product-ui .upload-progress-track { overflow: hidden; height: 7px; border-radius: 999px; background: #e8ecf2; }
.product-ui .mini-progress i,
.product-ui .progress-track i,
.product-ui .upload-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ui-brand), #8b5cf6); }
.product-ui .mini-progress.success i { background: linear-gradient(90deg, #16a66a, #35c98a); }
.product-ui .mini-progress.failed i { background: linear-gradient(90deg, #d62f4b, #ef6075); }
.product-ui .progress-caption { display: block; margin-top: 5px; color: #667085; font-weight: 700; white-space: nowrap; }
.product-ui .progress-caption.success { color: #08784c; }
.product-ui .progress-caption.failed { color: #b32e45; }

/* Tabs */
.product-ui .section-tabs,
.product-ui .tabs,
.product-ui .desktop-tool-tabs {
    display: flex;
    max-width: 100%;
    align-items: center;
    gap: 5px;
    overflow-x: auto;
    padding: 5px;
    border: 1px solid var(--ui-line);
    border-radius: 12px;
    background: #fff;
    box-shadow: var(--ui-shadow-xs);
}
.product-ui .section-tabs a,
.product-ui .tabs a,
.product-ui .desktop-tool-tabs a {
    display: inline-flex;
    min-height: 40px;
    align-items: center;
    justify-content: center;
    flex: none;
    border-radius: 8px;
    padding: 8px 12px;
    color: #667085;
    font-size: 10px;
    font-weight: 750;
    white-space: nowrap;
}
.product-ui .section-tabs a:hover,
.product-ui .tabs a:hover,
.product-ui .desktop-tool-tabs a:hover { color: #5830b9; background: #f6f3ff; }
.product-ui .section-tabs a.active,
.product-ui .tabs a.active,
.product-ui .desktop-tool-tabs a.active { color: #fff; background: linear-gradient(110deg, #5c30ca, #8051eb); box-shadow: 0 6px 14px rgba(91, 48, 211, .16); }

/* Profiles, details and activity */
.product-ui .profile-banner {
    display: flex;
    min-height: 132px;
    align-items: center;
    gap: 22px;
    padding: 24px;
    border: 1px solid var(--ui-line);
    border-radius: var(--ui-radius-lg);
    background: linear-gradient(135deg, #fff, #faf9ff);
    box-shadow: var(--ui-shadow-sm);
}
.product-ui .profile-banner h2 { margin: 2px 0 6px; font-size: 21px; }
.product-ui .profile-banner p { color: var(--ui-muted); font-size: 11px; }
.product-ui .profile-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); flex: 1; gap: 0; margin-left: auto; }
.product-ui .profile-metrics > div { min-width: 90px; padding: 9px 16px; border-left: 1px solid var(--ui-line); }
.product-ui .profile-metrics small { color: #8b95a7; font-size: 8px; font-weight: 750; text-transform: uppercase; }
.product-ui .profile-metrics strong { color: var(--ui-ink); font-size: 14px; }
.product-ui .detail-list { display: grid; margin: 0; }
.product-ui .detail-list > div { display: grid; grid-template-columns: minmax(120px, .7fr) minmax(0, 1.3fr); gap: 18px; padding: 13px 0; border-bottom: 1px solid #edf0f4; }
.product-ui .detail-list > div:last-child { border-bottom: 0; }
.product-ui .detail-list dt { color: #8a94a6; font-size: 10px; font-weight: 700; }
.product-ui .detail-list dd { min-width: 0; margin: 0; color: var(--ui-ink-soft); font-size: 11px; font-weight: 650; text-align: right; overflow-wrap: anywhere; }

/* Operation execution metadata: dimensional admin surface */
.product-ui .operation-execution-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    border-color: #dcd5f2;
    background:
        radial-gradient(circle at 92% 0, rgba(96, 165, 250, .16), transparent 27%),
        radial-gradient(circle at 4% 2%, rgba(124, 78, 227, .13), transparent 31%),
        linear-gradient(145deg, #fff 0%, #fbfaff 52%, #f6f8fd 100%);
    box-shadow: 0 22px 52px rgba(39, 46, 79, .12), 0 3px 8px rgba(52, 35, 94, .07), inset 0 1px 0 rgba(255, 255, 255, .95);
}
.product-ui .operation-execution-card::after {
    position: absolute;
    z-index: -1;
    top: -74px;
    right: -54px;
    width: 190px;
    height: 190px;
    border: 1px solid rgba(116, 76, 222, .12);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, rgba(255, 255, 255, .95), rgba(122, 81, 226, .10) 52%, rgba(96, 165, 250, .05) 70%, transparent 71%);
    box-shadow: inset 12px 12px 30px rgba(255, 255, 255, .8), inset -12px -12px 28px rgba(96, 69, 176, .08);
    content: '';
}
.product-ui .operation-execution-head { position: relative; z-index: 1; align-items: center; }
.product-ui .operation-execution-title { display: flex; min-width: 0; align-items: center; gap: 13px; }
.product-ui .operation-execution-title small { display: block; margin-top: 5px; color: var(--ui-muted); font-size: 10px; }
.product-ui .operation-execution-icon {
    display: grid;
    width: 47px;
    height: 47px;
    flex: none;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .84);
    border-radius: 15px;
    color: #fff;
    background: linear-gradient(145deg, #8e66f2, #5b2bc8 62%, #45209e);
    box-shadow: 0 10px 20px rgba(93, 46, 199, .24), inset 2px 2px 5px rgba(255, 255, 255, .42), inset -3px -3px 8px rgba(35, 12, 91, .28);
}
.product-ui .operation-export-button { min-height: 44px; gap: 7px; border-color: #d7ccf6; background: linear-gradient(145deg, #fff, #f0ebff); box-shadow: 0 7px 15px rgba(64, 45, 111, .10), inset 0 1px 0 #fff; }
.product-ui .operation-detail-list { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.product-ui .operation-detail-list > div {
    display: grid;
    min-width: 0;
    grid-template-columns: 1fr;
    align-content: start;
    gap: 8px;
    padding: 14px 15px;
    border: 1px solid rgba(216, 220, 233, .94);
    border-radius: 12px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .98), rgba(246, 248, 252, .96));
    box-shadow: 7px 8px 17px rgba(48, 56, 83, .07), -4px -4px 12px rgba(255, 255, 255, .88), inset 0 1px 0 #fff;
}
.product-ui .operation-detail-list > div:last-child { border-bottom: 1px solid rgba(216, 220, 233, .94); }
.product-ui .operation-detail-list dt { color: #7d879a; font-size: 8px; letter-spacing: .08em; text-transform: uppercase; }
.product-ui .operation-detail-list dd { color: #1d2739; font-size: 11px; line-height: 1.55; text-align: left; }
.product-ui .operation-detail-list code { display: inline-block; max-width: 100%; padding: 5px 7px; border: 1px solid #dfe3ee; border-radius: 7px; color: #5330b5; background: linear-gradient(145deg, #f8f6ff, #fff); font-size: 10px; line-height: 1.45; overflow-wrap: anywhere; word-break: break-word; white-space: normal; }
.product-ui .operation-detail-list .operation-detail-wide { grid-column: 1 / -1; }
.product-ui .operation-detail-list .operation-detail-alert { border-color: #f1c8cf; background: linear-gradient(145deg, #fff, #fff4f5); box-shadow: 7px 8px 17px rgba(153, 47, 64, .07), inset 0 1px 0 #fff; }
.product-ui .operation-detail-list .operation-detail-alert dt { color: #b53b50; }
.product-ui .operation-detail-list .operation-detail-diagnosis { border-color: #d9cef8; background: linear-gradient(145deg, #fff, #f6f2ff); }
.product-ui .operation-detail-list .operation-detail-diagnosis dt { color: #6840c8; }

.product-ui .activity-list { border: 1px solid var(--ui-line); border-radius: 11px; overflow: hidden; }
.product-ui .activity { min-height: 64px; gap: 12px; padding: 11px 13px; border-bottom-color: #edf0f4; background: #fff; }
.product-ui a.activity { transition: background .14s ease; }
.product-ui a.activity:hover { background: #f9fbfd; }
.product-ui .activity-icon { width: 36px; height: 36px; flex: none; border-radius: 10px; color: #6037c5; background: #f0ecff; font-size: 11px; }
.product-ui .activity b { color: var(--ui-ink-soft); font-size: 11px; }
.product-ui .activity small { color: #8c96a7; font-size: 9px; line-height: 1.45; }

/* Hero systems */
.product-ui .desktop-hero,
.product-ui .credit-hero,
.product-ui .entitlement-banner {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: var(--ui-radius-lg);
    color: #fff;
    background:
        radial-gradient(circle at 92% 0, rgba(96, 165, 250, .20), transparent 34%),
        radial-gradient(circle at 5% 0, rgba(139, 92, 246, .38), transparent 38%),
        linear-gradient(125deg, #11192d, #141b30 58%, #0b1426);
    box-shadow: var(--ui-shadow-md);
}
.product-ui .desktop-hero { display: flex; min-height: 180px; align-items: center; justify-content: space-between; gap: 28px; padding: 28px 30px; }
.product-ui .desktop-hero h2 { margin: 4px 0 9px; color: #fff; font-size: 25px; }
.product-ui .desktop-hero p { max-width: 720px; margin: 0; color: #aeb8ca; font-size: 12px; }
.product-ui .credit-hero { padding: 27px 30px; }
.product-ui .credit-hero .eyebrow { color: #b8c1d3; }
.product-ui .balance-line strong { color: #fff; font-size: clamp(36px, 5vw, 54px); }
.product-ui .balance-track { height: 8px; background: rgba(255, 255, 255, .12); }
.product-ui .balance-track i { background: linear-gradient(90deg, #34d399, #60a5fa); }

/* Charts and financial surfaces */
.product-ui .credit-analytics-grid { gap: 20px; }
.product-ui .bar-chart { min-height: 230px; padding: 18px 10px 0; border-radius: 12px; background: linear-gradient(180deg, #f9fafc, #fff); }
.product-ui .bar-column i { border-radius: 7px 7px 2px 2px; background: linear-gradient(180deg, #8a5eed, #6030c9); }
.product-ui .chart-summary,
.product-ui .mini-report-grid,
.product-ui .report-callouts,
.product-ui .value-grid { gap: 10px; }
.product-ui .chart-summary > div,
.product-ui .mini-report-grid > div,
.product-ui .report-callouts > div,
.product-ui .value-grid > div { padding: 14px; border: 1px solid var(--ui-line); border-radius: 10px; background: var(--ui-surface-subtle); }
.product-ui .usage-donut { box-shadow: inset 0 0 0 12px #eef1f5; }
.product-ui .compact-device { min-height: 64px; border-color: var(--ui-line); border-radius: 10px; background: #f8fafc; }
.product-ui .compact-device.online { border-color: #ccebdc; background: #f0fbf6; }

/* Services, packages, staff and releases */
.product-ui .service-price-grid,
.product-ui .service-admin-grid,
.product-ui .package-grid,
.product-ui .staff-list,
.product-ui .release-grid,
.product-ui .readiness-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.product-ui .price-card,
.product-ui .service-admin-card,
.product-ui .package-card,
.product-ui .staff-card,
.product-ui .release-card,
.product-ui .readiness-card { display: grid; align-content: start; gap: 14px; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.product-ui .price-card:hover,
.product-ui .service-admin-card:hover,
.product-ui .package-card:hover,
.product-ui .staff-card:hover,
.product-ui .release-card:hover { border-color: #cfc3ef; box-shadow: 0 16px 38px rgba(44, 33, 84, .08); transform: translateY(-2px); }
.product-ui .price-display { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.product-ui .price-display > div { padding: 14px; border: 1px solid var(--ui-line); border-radius: 10px; background: #f8fafc; }
.product-ui .price-display small,
.product-ui .price-display span { color: #8b95a7; font-size: 9px; }
.product-ui .price-display strong { display: block; margin: 5px 0; color: var(--ui-ink); font-size: 22px; }
.product-ui .workflow-strip { overflow: hidden; border: 1px solid var(--ui-line); border-radius: 12px; background: #f8fafc; }
.product-ui .workflow-strip > div { min-height: 84px; border-color: var(--ui-line); }
.product-ui .workflow-strip b { color: #fff; background: var(--ui-brand); }
.product-ui .release-file-field { border: 1px dashed #bfc8d7; border-radius: 12px; background: #f8fafc; }
.product-ui .upload-progress { border: 1px solid #dcd4f7; border-radius: 11px; padding: 14px; background: #f7f4ff; }

/* Security and dangerous actions */
.product-ui .danger-zone { border-color: #f0cbd2; background: linear-gradient(145deg, #fff, #fff8f9); }
.product-ui .danger-zone h2 { color: #a92d42; }
.product-ui .danger-zone p { color: #805661; font-size: 11px; }
.product-ui .secret-box { display: grid; gap: 8px; padding: 15px; border: 1px solid #dcd4f7; border-radius: 11px; background: #f7f4ff; }
.product-ui .secret-box small { color: #7f6aa9; font-size: 8px; font-weight: 800; text-transform: uppercase; }
.product-ui .secret-box code { padding: 9px; border-color: #ddd5f4; background: #fff; }
.product-ui .recovery-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.product-ui .recovery-grid code { padding: 10px; text-align: center; }

/* Support, messages and notifications */
.product-ui .ticket-layout { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, .6fr); gap: 20px; align-items: start; }
.product-ui .ticket-layout > aside { display: grid; gap: 20px; }
.product-ui .messages { display: grid; gap: 12px; padding: 4px 0 20px; }
.product-ui .message { max-width: 84%; padding: 13px 15px; border: 1px solid var(--ui-line); border-radius: 14px 14px 14px 4px; background: #f7f9fc; }
.product-ui .message.staff { margin-left: auto; border-color: #ddd4f8; border-radius: 14px 14px 4px 14px; background: #f3efff; }
.product-ui .message.internal { border-style: dashed; background: #fff8e9; }
.product-ui .message > div { display: flex; justify-content: space-between; gap: 10px; }
.product-ui .message b { color: var(--ui-ink-soft); font-size: 10px; }
.product-ui .message small { color: #8c96a8; font-size: 8px; }
.product-ui .message p { margin: 8px 0 0; color: #4d596e; font-size: 11px; white-space: pre-wrap; }
.product-ui .reply-box { display: grid; padding-top: 18px; border-top: 1px solid var(--ui-line); }
.product-ui .notification-list { display: grid; gap: 10px; }
.product-ui .notification-item { padding: 15px; border: 1px solid var(--ui-line); border-radius: 11px; background: #fff; box-shadow: var(--ui-shadow-xs); }
.product-ui .notification-item.unread { border-color: #d8cdf6; background: #f8f6ff; box-shadow: inset 3px 0 var(--ui-brand); }

/* Logs and technical data */
.product-ui .log-console {
    min-height: 220px;
    max-height: 520px;
    overflow: auto;
    padding: 16px;
    border: 1px solid #26324b;
    border-radius: 11px;
    color: #cbd5e1;
    background: #0b1220;
    font: 11px/1.65 "Fira Code", Consolas, monospace;
    white-space: pre-wrap;
}

/* Pagination */
.product-ui .record-limit { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; color: #667085; font-size: 9px; font-weight: 750; }
.product-ui .record-limit select { min-width: 70px; }
.product-ui .record-pagination { display: flex; min-height: 58px; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--ui-line); }
.product-ui .pagination-summary { margin: 0; color: #667085; font-size: 10px; }
.product-ui .pagination-summary strong { color: var(--ui-ink); font-variant-numeric: tabular-nums; }
.product-ui .pagination-pages { display: flex; align-items: center; gap: 6px; }
.product-ui .pagination-link { display: inline-flex; min-width: 38px; min-height: 38px; align-items: center; justify-content: center; border: 1px solid #ded7f4; border-radius: 8px; padding: 0 11px; color: #6238c5; background: #f7f4ff; font-size: 10px; font-weight: 750; line-height: 1; }
.product-ui a.pagination-link:hover { border-color: #bdaef0; background: #eee9ff; }
.product-ui .pagination-link.current { color: #fff; border-color: #6940d4; background: linear-gradient(110deg, #5c30ca, #8051eb); }
.product-ui .pagination-link.disabled { color: #98a2b3; border-color: #e5e7eb; background: #f7f8fa; cursor: not-allowed; }

/* Customer model pricing */
.product-ui .model-pricing-panel { margin-top: 20px; }
.product-ui .pricing-legend { display: flex; align-items: center; gap: 7px; }
.product-ui .badge.pricing-override { color: #5d32bf; border-color: #dcd0fa; background: #f3efff; }
.product-ui .badge.pricing-global { color: #1d5f94; border-color: #cfe3f4; background: #edf7ff; }
.product-ui .model-price-table th:not(:first-child) { min-width: 155px; }
.product-ui .model-price-table td:first-child { min-width: 160px; }
.product-ui .model-price-value { display: grid; justify-items: start; gap: 5px; }
.product-ui .model-price-value > strong { color: var(--ui-ink); font-size: 14px; font-variant-numeric: tabular-nums; }
.product-ui .model-price-value > small { color: #7b8495; font-size: 9px; }
.product-ui .model-price-value > em { color: #667085; font-size: 9px; font-style: normal; font-variant-numeric: tabular-nums; }
.product-ui .sequence-status { display: grid; min-width: 145px; gap: 4px; padding-left: 9px; border-left: 3px solid #98a2b3; }
.product-ui .sequence-status b { color: #475467; font-size: 10px; white-space: nowrap; }
.product-ui .sequence-status small { max-width: 220px; color: #7b8495; font-size: 8px; line-height: 1.4; }
.product-ui .sequence-status.complete { border-left-color: #16a66a; }
.product-ui .sequence-status.complete b { color: #08784c; }
.product-ui .sequence-status.incomplete { border-left-color: #d58a16; }
.product-ui .sequence-status.incomplete b { color: #8b590b; }

/* Feedback */
.product-ui .alert,
.product-ui .form-error-box,
.product-ui .issue-box,
.product-ui .monitor-alert,
.product-ui .compatibility-alert,
.product-ui .release-warning,
.product-ui .wipe-warning {
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 13px 15px;
    font-size: 11px;
    line-height: 1.55;
}
.product-ui .alert.success { color: #08784c; border-color: #ccebdc; background: #eaf8f1; }
.product-ui .alert.warning { color: #9c600b; border-color: #efdcb3; background: #fff7e7; }
.product-ui .issue-box.warning { color: #80500c; border-color: #efdcb3; border-left: 4px solid #d58a16; background: #fff9eb; }
.product-ui .issue-box.warning strong { display: block; color: #684009; font-size: 12px; }
.product-ui .issue-box.warning p { margin: 4px 0 0; color: #805e2e; }
.product-ui .alert.danger,
.product-ui .form-error-box { color: #a82b42; border-color: #efc8d0; background: #fff0f2; }

/* Authentication */
.login-body.product-ui { background: #0d1426; }
.product-ui .login-panel { min-height: 100dvh; grid-template-columns: minmax(410px, 42%) minmax(0, 1fr); background: #0d1426; }
.product-ui .login-card { position: relative; z-index: 2; padding: clamp(36px, 8vh, 84px) clamp(34px, 6vw, 92px); background: #fff; box-shadow: 24px 0 60px rgba(3, 7, 18, .22); }
.product-ui .login-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: linear-gradient(90deg, #6d3de6, #8b5cf6, #3b82f6); }
.auth-portal-reseller.product-ui .login-card::before { background: linear-gradient(90deg, #047857, #10b981, #0ea5e9); }
.auth-portal-reseller.product-ui .login-brand small { border-color: #bbf7d0; color: #047857; background: #ecfdf5; }
.auth-portal-reseller.product-ui .visual-badge { color: #047857; }
.auth-portal-admin.product-ui .login-card::before { background: linear-gradient(90deg, #9f1239, #e11d48, #f59e0b); }
.auth-portal-admin.product-ui .login-brand small { border-color: #fecdd3; color: #9f1239; background: #fff1f2; }
.auth-portal-admin.product-ui .visual-badge { color: #9f1239; }
.product-ui .login-brand { margin-bottom: clamp(45px, 8vh, 76px); color: var(--ui-ink); }
.product-ui .login-brand small { border: 1px solid #ded5fa; color: #6138c5; background: #f3f0ff; }
.product-ui .login-card h1 { color: var(--ui-ink); font-size: clamp(28px, 3vw, 35px); letter-spacing: -.035em; }
.product-ui .login-card > label:not(.check) { margin: 0 0 7px; color: var(--ui-ink-soft); font-size: 11px; font-weight: 750; }
.product-ui .login-card > input { height: 48px; margin-bottom: 16px; }
.product-ui .login-help { color: #8a94a6; font-size: 10px; }
.product-ui nav.login-help { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 16px; }
.product-ui nav.login-help a { min-height: 32px; display: inline-flex; align-items: center; color: #6138c5; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.product-ui nav.login-help a:focus-visible { outline: 3px solid rgba(109, 61, 230, .25); outline-offset: 3px; border-radius: 4px; }
.product-ui .login-visual {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 84% 8%, rgba(96, 165, 250, .22), transparent 28%),
        radial-gradient(circle at 14% 92%, rgba(52, 211, 153, .13), transparent 28%),
        radial-gradient(circle at 22% 12%, rgba(139, 92, 246, .38), transparent 30%),
        linear-gradient(135deg, #11192e, #0b1325 68%, #0e182b);
}
.product-ui .login-visual::after { z-index: -1; width: 420px; height: 420px; border: 1px solid rgba(255, 255, 255, .06); background: transparent; box-shadow: 0 0 0 55px rgba(255, 255, 255, .025), 0 0 0 110px rgba(255, 255, 255, .015); }
.product-ui .login-copy h2 { color: #fff; font-size: clamp(28px, 4vw, 40px); line-height: 1.15; letter-spacing: -.035em; }
.product-ui .login-copy > p { color: #aeb9cc; }
.product-ui .visual-badge { color: #dcd3ff; border: 1px solid rgba(167, 139, 250, .25); background: rgba(139, 92, 246, .13); box-shadow: none; }
.product-ui .visual-grid { border-color: rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .055); box-shadow: 0 28px 70px rgba(0, 0, 0, .24); backdrop-filter: blur(14px); }
.product-ui .visual-device { border-color: rgba(255, 255, 255, .10); color: #fff; background: rgba(255, 255, 255, .06); }
.product-ui .visual-device .phone-shape { color: #bda9ff; border-color: #7f6eaa; background: rgba(255, 255, 255, .04); }
.product-ui .visual-device small { color: #55d6a4; }

/* Focus is never removed. */
.product-ui a:focus-visible,
.product-ui button:focus-visible,
.product-ui summary:focus-visible,
.product-ui input[type="checkbox"]:focus-visible,
.product-ui input[type="radio"]:focus-visible { outline: 2px solid var(--ui-brand); outline-offset: 3px; }

@media (max-width: 1250px) {
    .product-ui .dashboard-command .metric-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-ui .stat-grid.six { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .product-ui .profile-banner { align-items: flex-start; flex-wrap: wrap; }
    .product-ui .profile-metrics { width: 100%; margin: 0; }
    .product-ui .profile-metrics > div:first-child { border-left: 0; }
}

@media (max-width: 1000px) {
    .product-ui .reseller-quick-actions { grid-template-columns: 1fr; align-items: stretch; }
    .product-ui .reseller-quick-action-links { justify-content: flex-start; }
    .product-ui .reseller-api-status { padding: 14px 0 0; border-top: 1px solid var(--ui-line); border-left: 0; }
    .product-ui .split-grid,
    .product-ui .split-grid.narrow-right,
    .product-ui .detail-grid,
    .product-ui .security-grid,
    .product-ui .ticket-layout { grid-template-columns: 1fr; }
    .product-ui .desktop-hero { align-items: flex-start; flex-direction: column; }
    .product-ui .login-panel { grid-template-columns: 1fr; }
    .product-ui .login-visual { display: none; }
    .product-ui .login-card { width: 100%; max-width: 560px; min-height: 100dvh; margin: auto; }
    .product-ui .dhru-hero { align-items: stretch; flex-direction: column; }
    .product-ui .dhru-hero-facts { width: 100%; min-width: 0; }
    .product-ui .dhru-service-grid { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
    .product-ui .integration-tabs { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .product-ui .integration-tabs a { min-width: 0; }
    .product-ui .dashboard-command .metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-ui .panel,
    .product-ui .price-card,
    .product-ui .service-admin-card,
    .product-ui .staff-card,
    .product-ui .package-card,
    .product-ui .release-card,
    .product-ui .readiness-card { padding: 17px; border-radius: 13px; }
    .product-ui .panel-head { align-items: stretch; flex-direction: column; }
    .product-ui .panel-head > .btn,
    .product-ui .panel-head > .filters,
    .product-ui .panel-head > form.filters { width: 100%; }
    .product-ui .filters { align-items: stretch; flex-direction: column; }
    .product-ui .filters input,
    .product-ui .filters select,
    .product-ui .filters .btn { width: 100%; min-width: 0; }
    .product-ui .form-grid { grid-template-columns: 1fr; }
    .product-ui .form-grid .span-2,
    .product-ui .form-grid .span-two { grid-column: 1; }
    .product-ui .onboarding-form { grid-template-columns: 1fr; }
    .product-ui .onboarding-form .span-2,
    .product-ui .onboarding-form .terms-row { grid-column: 1; }
    .product-ui .credential-output { grid-template-columns: 1fr; }
    .product-ui .copy-field { grid-template-columns: 1fr; }
    .product-ui .copy-field .btn { width: 100%; }
    .product-ui .integration-values > div { grid-template-columns: 1fr; gap: 5px; padding-block: 12px; }
    .product-ui .integration-values dd { align-items: stretch; flex-direction: column; }
    .product-ui .dhru-service-card { grid-template-columns: 1fr; }
    .product-ui .dhru-service-card .service-id { grid-row: auto; min-height: 82px; }
    .product-ui .dhru-service-card dl { grid-template-columns: 1fr; grid-column: 1; }
    .product-ui .revoke-api-form { grid-template-columns: 1fr; min-width: 210px; }
    .product-ui .inline-form { align-items: stretch; flex-direction: column; }
    .product-ui .form-actions { align-items: stretch; flex-direction: column; }
    .product-ui .form-actions .btn { width: 100%; }
    .product-ui .stat-grid,
    .product-ui .stat-grid.six { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .product-ui .stat-card { min-height: 110px; }
    .product-ui .profile-metrics { grid-template-columns: repeat(2, 1fr); }
    .product-ui .profile-metrics > div { border-bottom: 1px solid var(--ui-line); }
    .product-ui .detail-list > div { grid-template-columns: 1fr; gap: 6px; }
    .product-ui .detail-list dd { text-align: left; }
    .product-ui .operation-detail-list { grid-template-columns: 1fr; }
    .product-ui .operation-detail-list .operation-detail-wide { grid-column: auto; }
    .product-ui .operation-execution-title { align-items: flex-start; }
    .product-ui .operation-execution-icon { width: 43px; height: 43px; border-radius: 13px; }
    .product-ui .credit-hero { flex-direction: column; padding: 22px; }
    .product-ui .credit-hero-actions { width: 100%; }
    .product-ui .credit-hero-actions .btn,
    .product-ui .credit-hero-actions form { width: 100%; }
    .product-ui .message { max-width: 94%; }
    .product-ui .record-pagination { align-items: stretch; flex-direction: column; }
    .product-ui .pagination-pages { max-width: 100%; overflow-x: auto; padding-bottom: 2px; }
}

@media (max-width: 480px) {
    .product-ui .topbar-heading h1 { max-width: 52vw; font-size: 17px; }
    .product-ui .nav-children a,
    .product-ui .table-link { min-height: 44px; }
    .product-ui .dashboard-command .metric-grid { grid-template-columns: 1fr; }
    .product-ui .stat-grid,
    .product-ui .stat-grid.six { grid-template-columns: 1fr; }
    .product-ui .stat-card { min-height: 96px; }
    .product-ui .filter-bar,
    .product-ui .filter-grid,
    .product-ui .credit-search { grid-template-columns: 1fr; padding: 13px; }
    .product-ui .profile-metrics { grid-template-columns: 1fr; }
    .product-ui .profile-metrics > div { border-left: 0; }
    .product-ui .price-display { grid-template-columns: 1fr; }
    .product-ui .login-card { padding-inline: 25px; }
    .product-ui .login-brand { margin-bottom: 42px; }
}

@media (prefers-reduced-motion: reduce) {
    .product-ui .btn,
    .product-ui .button,
    .product-ui .link-button,
    .product-ui .panel,
    .product-ui .price-card,
    .product-ui .service-admin-card,
    .product-ui .package-card,
    .product-ui .staff-card,
    .product-ui .release-card { transition: none; }
}

/* Customer credit store */
.product-ui .purchase-page { display: grid; gap: 20px; }
.product-ui .purchase-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    padding: 28px;
    border: 1px solid #7655df;
    border-radius: 20px;
    color: #fff;
    background:
        radial-gradient(circle at 82% 0, rgba(93, 203, 255, .32), transparent 30%),
        linear-gradient(125deg, #28145f 0%, #5425c9 50%, #3164dc 100%);
    box-shadow: 0 4px 0 #1d1246, 0 24px 55px rgba(58, 34, 138, .23);
}
.product-ui .purchase-hero::after {
    position: absolute;
    z-index: -1;
    inset: auto -80px -150px auto;
    width: 330px;
    height: 330px;
    border: 55px solid rgba(255, 255, 255, .065);
    border-radius: 50%;
    content: "";
}
.product-ui .purchase-hero-copy { display: flex; align-items: center; gap: 18px; max-width: 760px; }
.product-ui .purchase-hero-icon {
    display: grid;
    width: 64px;
    height: 64px;
    flex: 0 0 64px;
    place-items: center;
    border: 1px solid rgba(255, 255, 255, .36);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(145deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), 0 13px 25px rgba(19, 8, 60, .28);
}
.product-ui .purchase-hero .eyebrow { margin: 0 0 7px; color: #d9d2ff; }
.product-ui .purchase-hero h2 { margin: 0; color: #fff; font-size: clamp(21px, 2.1vw, 31px); line-height: 1.15; }
.product-ui .purchase-hero p:not(.eyebrow) { max-width: 680px; margin: 10px 0 0; color: #e4e8ff; font-size: 12px; }
.product-ui .purchase-balance { display: grid; min-width: 340px; grid-template-columns: repeat(3, minmax(90px, 1fr)); margin: 0; border: 1px solid rgba(255, 255, 255, .2); border-radius: 14px; background: rgba(10, 14, 57, .23); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13); backdrop-filter: blur(8px); }
.product-ui .purchase-balance div { padding: 16px; border-right: 1px solid rgba(255, 255, 255, .15); }
.product-ui .purchase-balance div:last-child { border-right: 0; }
.product-ui .purchase-balance dt { color: #cad2f4; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.product-ui .purchase-balance dd { margin: 7px 0 0; color: #fff; font-size: 23px; font-weight: 800; }
.product-ui .purchase-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; overflow: hidden; margin: 0; padding: 0; border: 1px solid var(--ui-line); border-radius: 14px; list-style: none; background: var(--ui-line); box-shadow: var(--ui-shadow-sm); }
.product-ui .purchase-steps li { display: flex; min-height: 76px; align-items: center; gap: 12px; padding: 14px 18px; background: #fff; }
.product-ui .purchase-steps li > span { display: grid; width: 34px; height: 34px; flex: 0 0 34px; place-items: center; border-radius: 11px; color: #fff; background: linear-gradient(145deg, #8458ef, #5425cf); box-shadow: 0 5px 12px rgba(91, 42, 220, .24); font-size: 12px; font-weight: 800; }
.product-ui .purchase-steps b,
.product-ui .purchase-steps small { display: block; }
.product-ui .purchase-steps b { font-size: 11px; }
.product-ui .purchase-steps small { margin-top: 4px; color: var(--ui-muted); font-size: 9px; }
.product-ui .purchase-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(330px, .55fr); align-items: start; gap: 20px; }
.product-ui .purchase-package-panel,
.product-ui .purchase-checkout-panel { padding: 22px; border: 1px solid var(--ui-line); border-radius: 18px; background: #fff; box-shadow: var(--ui-shadow-sm); }
.product-ui .purchase-checkout-panel { position: sticky; top: 18px; box-shadow: 0 3px 0 #d7ccef, 0 18px 42px rgba(43, 31, 84, .09); }
.product-ui .purchase-section-heading { display: flex; min-height: 42px; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 18px; }
.product-ui .purchase-section-heading .eyebrow { margin: 0 0 5px; }
.product-ui .purchase-section-heading h2 { margin: 0; font-size: 17px; }
.product-ui .purchase-section-heading > span { padding: 7px 10px; border-radius: 20px; color: var(--ui-green); background: #e9f9f1; font-size: 9px; font-weight: 800; text-transform: uppercase; }
.product-ui .purchase-section-heading > svg { color: var(--ui-brand); }
.product-ui .purchase-package-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.product-ui .purchase-package-card { position: relative; display: grid; min-height: 220px; align-content: start; padding: 18px; border: 1px solid var(--ui-line); border-radius: 15px; background: linear-gradient(155deg, #fff 25%, #f8f7ff); box-shadow: 0 2px 0 #e7e9f0, 0 10px 24px rgba(33, 27, 68, .055); cursor: pointer; transition: border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.product-ui .purchase-package-card:hover { border-color: #b8a5ef; box-shadow: 0 3px 0 #cfc2ef, 0 15px 30px rgba(59, 37, 127, .10); }
.product-ui .purchase-package-card.is-selected,
.product-ui .purchase-package-card:has(input:checked) { border-color: #7043e4; background: linear-gradient(155deg, #fff 15%, #f0ebff); box-shadow: 0 3px 0 #5a2bc7, 0 16px 32px rgba(81, 43, 181, .16), inset 0 0 0 1px rgba(112, 67, 228, .18); }
.product-ui .purchase-package-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.product-ui .purchase-package-card:has(input:focus-visible) { outline: 3px solid rgba(109, 61, 230, .25); outline-offset: 3px; }
.product-ui .purchase-package-check { position: absolute; top: 16px; right: 16px; width: 21px; height: 21px; border: 2px solid #c8d0dc; border-radius: 50%; background: #fff; }
.product-ui .purchase-package-card.is-selected .purchase-package-check,
.product-ui .purchase-package-card:has(input:checked) .purchase-package-check { border: 6px solid var(--ui-brand); }
.product-ui .purchase-package-card > .badge { width: max-content; margin-bottom: 16px; }
.product-ui .purchase-package-card > strong { padding-right: 28px; font-size: 15px; }
.product-ui .purchase-package-card > small { min-height: 34px; margin-top: 6px; color: var(--ui-muted); font-size: 10px; line-height: 1.55; }
.product-ui .purchase-package-credits { display: flex; align-items: baseline; gap: 6px; margin-top: 18px; color: var(--ui-brand-strong); font-size: 28px; font-weight: 850; }
.product-ui .purchase-package-credits small { color: var(--ui-muted); font-size: 10px; font-weight: 700; }
.product-ui .purchase-package-price { margin-top: 7px; color: var(--ui-ink); font-size: 14px; font-weight: 750; }
.product-ui .purchase-package-unit { margin-top: 3px; color: var(--ui-faint); font-size: 9px; }
.product-ui .purchase-order-summary { overflow: hidden; margin-bottom: 18px; border: 1px solid #ded5f7; border-radius: 12px; background: #faf8ff; }
.product-ui .purchase-order-summary > div { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 14px; border-bottom: 1px solid #e9e3f7; }
.product-ui .purchase-order-summary > div:last-child { border-bottom: 0; }
.product-ui .purchase-order-summary span { color: var(--ui-muted); font-size: 10px; }
.product-ui .purchase-order-summary b { text-align: right; font-size: 11px; }
.product-ui .purchase-order-summary .purchase-order-total { color: #fff; background: linear-gradient(105deg, #5929dc, #7144e6); }
.product-ui .purchase-order-summary .purchase-order-total span { color: #e7e0ff; }
.product-ui .purchase-order-summary .purchase-order-total b { color: #fff; font-size: 17px; }
.product-ui .purchase-checkout-form { display: grid; gap: 14px; }
.product-ui .purchase-checkout-form label { display: grid; gap: 7px; color: var(--ui-ink-soft); font-size: 10px; font-weight: 700; }
.product-ui .purchase-checkout-form label small { color: var(--ui-muted); font-size: 9px; font-weight: 500; }
.product-ui .purchase-checkout-form input,
.product-ui .purchase-checkout-form textarea { width: 100%; }
.product-ui .purchase-security-note { display: flex; align-items: flex-start; gap: 8px; margin: 0; color: var(--ui-muted); font-size: 9px; line-height: 1.55; }
.product-ui .purchase-security-note svg { flex: 0 0 auto; margin-top: 1px; color: var(--ui-green); }
.product-ui .purchase-history-panel { overflow: hidden; }

@media (max-width: 1050px) {
    .product-ui .purchase-hero { align-items: flex-start; flex-direction: column; }
    .product-ui .purchase-balance { width: 100%; min-width: 0; }
    .product-ui .purchase-layout { grid-template-columns: 1fr; }
    .product-ui .purchase-checkout-panel { position: static; }
}
@media (max-width: 700px) {
    .product-ui .purchase-hero { padding: 22px; }
    .product-ui .purchase-hero-copy { align-items: flex-start; }
    .product-ui .purchase-hero-icon { width: 52px; height: 52px; flex-basis: 52px; border-radius: 15px; }
    .product-ui .purchase-balance { grid-template-columns: 1fr; }
    .product-ui .purchase-balance div { display: flex; align-items: center; justify-content: space-between; padding: 12px 15px; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .15); }
    .product-ui .purchase-balance div:last-child { border-bottom: 0; }
    .product-ui .purchase-balance dd { margin: 0; font-size: 18px; }
    .product-ui .purchase-steps { grid-template-columns: 1fr; }
    .product-ui .purchase-steps li { min-height: 66px; }
    .product-ui .purchase-package-grid { grid-template-columns: 1fr; }
    .product-ui .purchase-package-panel,
    .product-ui .purchase-checkout-panel { padding: 17px; }
}
@media (prefers-reduced-motion: reduce) {
    .product-ui .purchase-package-card { transition: none; }
}

/* Customer registration, verification, and recovery */
.product-ui .auth-form { display: grid; }
.product-ui .auth-form label { margin: 0 0 8px; color: #344057; font-size: 11px; font-weight: 700; }
.product-ui .auth-form input { width: 100%; height: 51px; margin-bottom: 18px; }
.product-ui .auth-form .auth-field-help { margin: -10px 0 16px; color: #7b879d; font-size: 10px; }
.product-ui .auth-form .btn { margin-top: 4px; }
.product-ui .auth-code-input { text-align: center; font-size: 25px; font-weight: 850; letter-spacing: .28em; font-variant-numeric: tabular-nums; }
.product-ui .auth-secondary-form { margin-top: 10px; }
.product-ui .auth-inline-link { align-self: flex-end; min-height: 30px; margin: -12px 0 10px; color: #6138c5; font-size: 10px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.product-ui .auth-footer-links { margin-top: 20px; }
.product-ui .auth-form .login-help { margin-top: 16px; line-height: 1.6; }
.product-ui .auth-form .login-help a { color: #6138c5; font-weight: 700; text-decoration: underline; }