:root {
    --bg: #f4f6f8;
    --card: #ffffff;
    --text: #18202a;
    --muted: #6d7785;
    --line: #e4e8ed;
    --primary: #1e293b;
    --success: #16794b;
    --success-bg: #eaf8f1;
    --danger: #b42318;
    --danger-bg: #fff0ee;
    --warning: #9a6700;
    --warning-bg: #fff7df;
    --radius: 14px;
    --shadow: 0 8px 30px rgba(23, 34, 48, .06);
}
* { box-sizing: border-box; }
body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
a { color: inherit; }
code, .mono, pre { font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace; }

.app-shell {
    min-height: 100vh;
    display: grid;
    grid-template-columns: 240px 1fr;
}
.sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 24px 16px;
    background: #111827;
    color: #fff;
    display: flex;
    flex-direction: column;
}
.brand { display: flex; gap: 11px; align-items: center; }
.brand strong, .brand small { display: block; }
.brand small { color: #98a2b3; margin-top: 2px; }
.brand-mark {
    width: 38px; height: 38px;
    display: grid; place-items: center;
    border-radius: 10px;
    background: #fff; color: #111827;
    font-weight: 800;
}
.nav { display: grid; gap: 4px; margin-top: 28px; }
.nav a {
    text-decoration: none;
    padding: 11px 12px;
    border-radius: 9px;
    color: #cbd5e1;
}
.nav a:hover, .nav a.active { background: #243044; color: #fff; }
.sidebar-footer {
    margin-top: auto;
    border-top: 1px solid #2b3749;
    padding-top: 16px;
}
.user-mini strong, .user-mini small { display: block; }
.user-mini small { color: #98a2b3; overflow: hidden; text-overflow: ellipsis; }
.link-button {
    margin-top: 10px; padding: 0; border: 0;
    background: none; color: #cbd5e1; cursor: pointer;
}

.content { padding: 32px; width: 100%; max-width: 1320px; }
.page-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 20px; margin-bottom: 24px;
}
.page-head h1 { margin: 0 0 4px; font-size: 28px; }
h2 { font-size: 18px; margin: 0 0 16px; }
h3 { font-size: 15px; }
p { line-height: 1.55; }
.muted { color: var(--muted); }
.back-link, .text-link { color: #334155; text-decoration: none; }
.text-link:hover, .back-link:hover { text-decoration: underline; }

.cards { display: grid; gap: 16px; margin-bottom: 18px; }
.cards.four { grid-template-columns: repeat(4, 1fr); }
.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
    margin-bottom: 18px;
}
.metric span { display: block; color: var(--muted); font-size: 13px; }
.metric strong { display: block; margin-top: 10px; font-size: 26px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 20px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.grid-2 .card { margin-bottom: 0; }

.status-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.status-chip { border-radius: 999px; padding: 8px 12px; font-size: 13px; }
.status-chip.ok { background: var(--success-bg); color: var(--success); }
.status-chip.bad { background: var(--warning-bg); color: var(--warning); }

.badge {
    display: inline-flex; align-items: center;
    border-radius: 999px; padding: 5px 9px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
}
.badge.large { padding: 8px 12px; font-size: 12px; }
.badge.paid { background: var(--success-bg); color: var(--success); }
.badge.pending { background: var(--warning-bg); color: var(--warning); }
.badge.expired, .badge.cancelled { background: var(--danger-bg); color: var(--danger); }
.badge.neutral { background: #eef2f7; color: #475467; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td {
    text-align: left; padding: 12px 10px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
th {
    font-size: 12px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--muted);
}
td { font-size: 14px; }

label { display: grid; gap: 7px; font-size: 13px; font-weight: 650; }
input, textarea, select {
    width: 100%; padding: 11px 12px;
    border: 1px solid #d7dde5; border-radius: 9px;
    background: #fff; color: var(--text); font: inherit; outline: none;
}
textarea {
    resize: vertical;
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 12px;
}
input:focus, textarea:focus, select:focus {
    border-color: #94a3b8;
    box-shadow: 0 0 0 3px rgba(148, 163, 184, .15);
}
.stack { display: grid; gap: 14px; }
.form-grid {
    display: grid;
    grid-template-columns: 150px 1fr 1fr 1fr auto;
    gap: 12px;
    align-items: end;
}
.form-action { display: flex; }

.btn {
    display: inline-flex; min-height: 40px;
    align-items: center; justify-content: center;
    padding: 9px 14px;
    border: 1px solid #cfd6df; border-radius: 9px;
    background: #fff; color: var(--text); font-weight: 700;
    cursor: pointer; text-decoration: none;
}
.btn:hover { background: #f7f9fb; }
.btn-primary { background: var(--primary); color: #fff; border-color: var(--primary); }
.btn-primary:hover { background: #273449; }
.btn-danger { border-color: #f4b7b2; background: var(--danger-bg); color: var(--danger); }
.btn-small { min-height: 32px; padding: 6px 10px; font-size: 12px; }

.button-row {
    display: flex; gap: 10px; align-items: center;
    flex-wrap: wrap; margin-top: 16px;
}
.alert {
    padding: 12px 14px; border-radius: 10px;
    margin-bottom: 18px; border: 1px solid;
}
.alert-success { background: var(--success-bg); color: var(--success); border-color: #b7e3cc; }
.alert-error { background: var(--danger-bg); color: var(--danger); border-color: #f1c0bc; }

.details { display: grid; margin: 0; }
.details > div {
    display: grid; grid-template-columns: 160px 1fr;
    gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line);
}
.details dt { color: var(--muted); }
.details dd { margin: 0; word-break: break-word; }

.center { text-align: center; }
.qr-image {
    display: block; width: min(340px, 100%);
    height: auto; margin: 10px auto; background: #fff;
}
.pay-big { display: block; font-size: 28px; margin-top: 12px; }
.sandbox-box {
    padding: 28px;
    border: 1px dashed #cbd5e1;
    border-radius: 12px;
    background: #f8fafc; color: #64748b;
}
.empty { padding: 24px 0; color: var(--muted); }
.mini-list { display: grid; gap: 10px; }
.mini-list > div { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.mini-list small { display: block; color: var(--muted); margin-top: 4px; }

.copy-row { display: flex; gap: 8px; margin: 12px 0; }
.copy-row input { flex: 1; }
.key-reveal { border-color: #b8c8df; }
.endpoint-list { display: grid; gap: 8px; font-size: 13px; }

pre {
    overflow-x: auto; padding: 14px;
    border-radius: 10px; background: #0f172a;
    color: #e2e8f0; font-size: 12px; line-height: 1.6;
}
hr { border: 0; border-top: 1px solid var(--line); margin: 22px 0; }

.login-wrap, .checkout-wrap {
    min-height: 100vh; display: grid; place-items: center; padding: 24px;
}
.login-card, .checkout-card {
    width: min(460px, 100%);
    padding: 28px; background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px; box-shadow: var(--shadow);
}
.login-brand { margin-bottom: 28px; }
.login-card h1 { margin-bottom: 4px; }
.checkout-card { text-align: center; }
.checkout-card h1 { font-size: 34px; margin: 18px 0 0; }

.checkout-status {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 12px; border-radius: 10px; margin: 16px 0;
}
.checkout-status.pending { background: var(--warning-bg); color: var(--warning); }
.checkout-status.paid { background: var(--success-bg); color: var(--success); }
.checkout-status.expired, .checkout-status.cancelled { background: var(--danger-bg); color: var(--danger); }
.checkout-qr { margin-top: 18px; }
.countdown { margin-top: 18px; padding: 12px; border-top: 1px solid var(--line); }
.paid-message {
    margin-top: 14px; border-radius: 10px; padding: 12px;
    background: var(--success-bg); color: var(--success); font-weight: 800;
}
.hidden { display: none; }
.error-code { font-size: 56px; font-weight: 900; color: #94a3b8; }

@media (max-width: 980px) {
    .app-shell { grid-template-columns: 1fr; }
    .sidebar { position: static; height: auto; padding: 14px; }
    .nav { display: flex; overflow-x: auto; margin-top: 14px; }
    .nav a { white-space: nowrap; }
    .sidebar-footer { display: none; }
    .cards.four { grid-template-columns: 1fr 1fr; }
    .grid-2 { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr 1fr; }
    .form-action { grid-column: 1 / -1; }
    .content { padding: 20px; }
}
@media (max-width: 620px) {
    .cards.four { grid-template-columns: 1fr; }
    .form-grid { grid-template-columns: 1fr; }
    .page-head { align-items: flex-start; }
    .details > div { grid-template-columns: 1fr; gap: 4px; }
    .copy-row { flex-direction: column; }
}

/* ===== QRIS Builder / Retro Checkout ===== */
.qris-builder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.qris-builder-panel {
    background: #ece8dc;
    border: 1px solid #8f8f84;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
}
.panel-head {
    background: linear-gradient(180deg, #4372c4 0%, #2f5da8 100%);
    color: #fff;
    padding: 10px 14px;
    border-bottom: 1px solid #2a4f90;
}
.panel-badge {
    font-weight: 800;
    letter-spacing: .02em;
}
.qris-builder-panel > :not(.panel-head) {
    padding-left: 16px;
    padding-right: 16px;
}
.qris-builder-panel > form:last-child,
.qris-builder-panel > div:last-child { padding-bottom: 16px; }
.panel-lead {
    margin: 14px 0;
    color: #5a5d66;
    font-size: 14px;
}
.compact-stack { gap: 10px; }
.qris-wide-btn {
    width: 100%;
    min-height: 42px;
    border-radius: 0;
    background: linear-gradient(180deg, #4a73d5 0%, #2f56aa 100%);
    border-color: #25488f;
}
.qris-wide-btn:disabled {
    opacity: .55;
    cursor: not-allowed;
}
.qris-delete-btn {
    width: 100%;
    min-height: 42px;
    border-radius: 0;
    background: #ece8dc;
    border-color: #9d998f;
}
.qris-block-gap { margin-top: 14px; }
.qris-status-line {
    padding: 10px 0 6px;
    color: #1f7a56;
    font-size: 13px;
}
.qris-status-off { color: #b45309; }
.triple-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.qris-inline-empty {
    border: 1px dashed #c6c0b5;
    background: #f5f2e9;
    padding: 12px;
    margin-top: 16px;
}
.qris-order-preview {
    margin-top: 16px;
    border: 1px solid #9b9b91;
    background: #f8f7f2;
    padding: 14px;
}
.qris-breakdown {
    white-space: pre-line;
    color: #4b5563;
    font-size: 14px;
    margin-bottom: 8px;
}
.qris-pay-head {
    color: #4b5563;
    font-size: 14px;
}
.qris-pay-amount {
    font-size: 40px;
    line-height: 1.05;
    color: #d36c00;
    font-weight: 900;
    margin-bottom: 10px;
}
.qris-live-image {
    display: block;
    width: min(280px, 100%);
    margin: 0 auto 12px;
    background: #fff;
    border: 1px solid #d6d3cd;
    padding: 8px;
}
.qris-preview-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.qris-preview-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
}
.retro-checkout-wrap {
    background: linear-gradient(180deg, #98b3d6 0%, #86a6d1 100%);
}
.retro-checkout-card {
    width: min(420px, 100%);
    border: 1px solid #6a727e;
    background: #ebe8dd;
    box-shadow: 0 6px 0 rgba(0, 0, 0, .08);
}
.retro-topbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: linear-gradient(180deg, #3e69ba 0%, #2c56a0 100%);
    color: #fff;
    font-weight: 800;
}
.retro-brand { font-size: 24px; line-height: 1; }
.retro-topbar-right { font-size: 13px; letter-spacing: .08em; }
.retro-body { padding: 18px 16px 20px; }
.retro-label {
    color: #626876;
    font-size: 12px;
    margin-bottom: 6px;
}
.retro-merchant {
    font-size: 17px;
    font-weight: 900;
    color: #1f2937;
    margin-bottom: 8px;
}
.retro-amount {
    color: #d06e00;
    font-size: 48px;
    font-weight: 900;
    line-height: 1.05;
}
.retro-order-id {
    color: #4b5563;
    margin-top: 8px;
    margin-bottom: 12px;
}
.retro-alert {
    background: #fff1d8;
    border: 1px solid #f2b66b;
    color: #7c4b12;
    padding: 10px 12px;
    margin-bottom: 14px;
}
.retro-qr-box {
    background: #fff;
    border: 1px solid #b6b2a6;
    padding: 12px;
}
.retro-qr-image {
    width: 100%;
    max-width: 300px;
    margin: 0 auto;
}
.retro-download-btn {
    width: 100%;
    margin-top: 14px;
    min-height: 40px;
    border-radius: 0;
    background: #ece8dc;
    border-color: #9d998f;
}
.retro-steps {
    margin: 16px 0;
    padding-left: 20px;
    color: #384152;
}
.retro-steps li { margin-bottom: 8px; }
.retro-timer-bar {
    background: linear-gradient(180deg, #293a85 0%, #1c2f79 100%);
    color: #fff;
    text-align: center;
    padding: 10px 12px;
    font-weight: 700;
    margin-bottom: 12px;
}
.retro-status-box {
    text-align: center;
    padding: 12px;
    border: 1px solid #9d998f;
    background: #efede5;
    color: #4b5563;
}
.retro-status-box.pending { color: #6b7280; }
.retro-status-box.paid { color: #16794b; background: #e8f7ef; border-color: #b8dcc8; }
.retro-status-box.expired,
.retro-status-box.cancelled { color: #b42318; background: #feefee; border-color: #f0c1bc; }
.retro-footer-note {
    text-align: center;
    color: #6b7280;
    margin-top: 18px;
    font-size: 12px;
}

@media (max-width: 980px) {
    .qris-builder-grid { grid-template-columns: 1fr; }
    .triple-grid { grid-template-columns: 1fr; }
}

/* ===== PayKita Global Panel Theme =====
   Menyamakan seluruh halaman dashboard dengan gaya kotak QRIS Checkout. */
:root {
    --retro-panel-bg: #ece8dc;
    --retro-panel-border: #8f8f84;
    --retro-panel-blue-top: #4372c4;
    --retro-panel-blue-bottom: #2f5da8;
    --retro-panel-blue-border: #274f91;
}

/* Semua card utama di area dashboard */
.content .card {
    background: var(--retro-panel-bg);
    border: 1px solid var(--retro-panel-border);
    border-radius: 0;
    box-shadow: 0 4px 0 rgba(0, 0, 0, .08);
}

/* Judul card otomatis menjadi bar biru seperti halaman QRIS */
.content .card > h2:first-child {
    margin: -20px -20px 16px;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--retro-panel-blue-top) 0%, var(--retro-panel-blue-bottom) 100%);
    border-bottom: 1px solid var(--retro-panel-blue-border);
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .015em;
}

/* Card yang memakai card-head (contoh Dashboard / daftar order) */
.content .card > .card-head:first-child {
    margin: -20px -20px 16px;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--retro-panel-blue-top) 0%, var(--retro-panel-blue-bottom) 100%);
    border-bottom: 1px solid var(--retro-panel-blue-border);
    color: #fff;
}
.content .card > .card-head:first-child h2 {
    margin: 0;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
}
.content .card > .card-head:first-child .text-link {
    color: #fff;
    text-decoration: underline;
}

/* Dokumentasi API menggunakan endpoint-title sebagai header card */
.content .card.api-section > .endpoint-title:first-child {
    margin: -20px -20px 16px;
    padding: 10px 14px;
    background: linear-gradient(180deg, var(--retro-panel-blue-top) 0%, var(--retro-panel-blue-bottom) 100%);
    border-bottom: 1px solid var(--retro-panel-blue-border);
    color: #fff;
}
.content .card.api-section > .endpoint-title:first-child h2 { color: #fff; }
.content .card.api-section > .endpoint-title:first-child .endpoint-path {
    background: rgba(255,255,255,.16);
    color: #fff;
}
.content .card.api-section > .endpoint-title:first-child .mode-tag {
    background: rgba(255,255,255,.18);
    color: #fff;
}

/* Metric dashboard juga punya kepala biru */
.content .card.metric > span:first-child {
    display: block;
    margin: -20px -20px 12px;
    padding: 9px 12px;
    background: linear-gradient(180deg, var(--retro-panel-blue-top) 0%, var(--retro-panel-blue-bottom) 100%);
    border-bottom: 1px solid var(--retro-panel-blue-border);
    color: #fff;
    font-size: 12px;
    font-weight: 800;
}
.content .card.metric > strong {
    color: #111827;
}

/* Kotak status lebih tegas */
.status-chip {
    border-radius: 0;
    border: 1px solid #aaa69c;
    box-shadow: 0 2px 0 rgba(0,0,0,.05);
}
.status-chip.ok { border-color: #9bcdb2; }
.status-chip.bad { border-color: #e2c17d; }

/* Form di seluruh dashboard mengikuti tampilan QRIS */
.content input,
.content textarea,
.content select {
    border-radius: 0;
    border-color: #b9b7af;
    background: #fff;
}
.content input:focus,
.content textarea:focus,
.content select:focus {
    border-color: #5577b5;
    box-shadow: 0 0 0 2px rgba(67, 114, 196, .12);
}

.content .btn {
    border-radius: 0;
}
.content .btn-primary {
    background: linear-gradient(180deg, #4a73d5 0%, #2f56aa 100%);
    border-color: #25488f;
}
.content .btn-primary:hover {
    background: linear-gradient(180deg, #3e68c4 0%, #284c99 100%);
}

/* Tabel dibuat seperti panel data klasik */
.content .table-wrap {
    border: 1px solid #c8c3b8;
    background: #fff;
}
.content table th {
    background: #e1ddd2;
    color: #3f4652;
}
.content table th,
.content table td {
    border-bottom-color: #d8d4ca;
}
.content table tbody tr:hover {
    background: #f7f5ef;
}

/* Detail list di card */
.content .details > div {
    border-bottom-color: #cfcac0;
}

/* API / note / status blocks ikut tema */
.content .api-note,
.content .status-box,
.content .key-help > div,
.content .sandbox-box,
.content .empty {
    border-radius: 0;
}
.content .api-nav a {
    border-radius: 0;
    background: var(--retro-panel-bg);
    border-color: #aaa69c;
}

/* Login/register/verify dibuat senada tanpa mengubah struktur */
.login-card {
    background: var(--retro-panel-bg);
    border: 1px solid var(--retro-panel-border);
    border-radius: 0;
    box-shadow: 0 5px 0 rgba(0,0,0,.08);
}
.login-card .btn-primary {
    border-radius: 0;
    background: linear-gradient(180deg, #4a73d5 0%, #2f56aa 100%);
    border-color: #25488f;
}
.login-card input,
.login-card textarea,
.login-card select {
    border-radius: 0;
}

/* Kotak error juga konsisten */
.checkout-card:not(.retro-checkout-card) {
    border-radius: 0;
}

@media (max-width: 620px) {
    .content .card > h2:first-child,
    .content .card > .card-head:first-child,
    .content .card.api-section > .endpoint-title:first-child,
    .content .card.metric > span:first-child {
        margin-left: -20px;
        margin-right: -20px;
    }
}

/* ===== Retro Sidebar + Profile ===== */
.retro-sidebar {
    background: #ece8dc;
    color: #1f2937;
    border-right: 1px solid #8f8f84;
    padding: 0;
    box-shadow: 4px 0 0 rgba(0,0,0,.04);
}
.retro-sidebar-top {
    background: linear-gradient(180deg, #4372c4 0%, #2f5da8 100%);
    border-bottom: 1px solid #274f91;
    padding: 17px 16px;
}
.retro-sidebar .sidebar-brand {
    color: #fff;
}
.retro-sidebar .sidebar-brand strong { color: #fff; }
.retro-sidebar .sidebar-brand small { color: #e2e9f7; }
.retro-sidebar .brand-mark {
    background: #fff;
    color: #244f9c;
    border-radius: 0;
    border: 1px solid rgba(0,0,0,.16);
}
.retro-sidebar-label {
    margin: 14px 14px 6px;
    padding-bottom: 6px;
    border-bottom: 1px solid #b9b4a9;
    color: #6b665d;
    font: 700 11px/1.2 "SFMono-Regular", Consolas, monospace;
    letter-spacing: .04em;
}
.retro-nav {
    margin: 0 14px;
    display: grid;
    gap: 7px;
}
.retro-nav a {
    border: 1px solid #aaa69c;
    border-radius: 0;
    background: #f6f3eb;
    color: #273142;
    padding: 10px 11px;
    box-shadow: 0 2px 0 rgba(0,0,0,.04);
}
.retro-nav a:hover {
    background: #e7e2d7;
    color: #111827;
}
.retro-nav a.active {
    background: linear-gradient(180deg, #4a73d5 0%, #2f56aa 100%);
    border-color: #25488f;
    color: #fff;
}
.retro-sidebar-footer {
    margin-top: auto;
    padding: 12px 14px 16px;
    border-top: 0;
    color: #1f2937;
}
.retro-sidebar-footer .footer-label {
    margin: 0 0 10px;
}
.retro-sidebar-footer .user-mini {
    border: 1px solid #aaa69c;
    background: #f6f3eb;
    padding: 10px;
}
.retro-sidebar-footer .user-mini strong { color: #111827; }
.retro-sidebar-footer .user-mini small { color: #6b7280; }
.retro-logout {
    width: 100%;
    margin-top: 8px;
    padding: 9px 10px;
    border: 1px solid #aaa69c;
    background: #f6f3eb;
    color: #273142;
    text-align: left;
}
.retro-logout:hover { background: #e7e2d7; }

.profile-page { max-width: 1180px; }
.profile-panel {
    background: #ece8dc;
    border: 1px solid #8f8f84;
    box-shadow: 0 4px 0 rgba(0,0,0,.08);
    margin-bottom: 18px;
}
.profile-panel-body { padding: 18px; }
.profile-main-panel { width: 100%; }
.profile-hero {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 18px;
}
.profile-avatar {
    width: 64px;
    height: 64px;
    display: grid;
    place-items: center;
    background: #fff;
    border: 1px solid #8f8f84;
    color: #234f9d;
    font-size: 28px;
    font-weight: 900;
}
.profile-display-name {
    font-size: 23px;
    font-weight: 900;
    color: #18202a;
}
.profile-role {
    margin-top: 3px;
    color: #6b7280;
    font: 700 12px/1.2 "SFMono-Regular", Consolas, monospace;
}
.profile-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid #c8c3b8;
    border-left: 1px solid #c8c3b8;
}
.profile-info-item {
    padding: 12px;
    border-right: 1px solid #c8c3b8;
    border-bottom: 1px solid #c8c3b8;
    background: #f7f5ef;
}
.profile-info-item span,
.profile-info-item small {
    display: block;
    color: #6b7280;
    margin-bottom: 5px;
}
.profile-info-item strong {
    display: block;
    color: #111827;
    word-break: break-word;
}
.profile-ok { color: #13784a !important; }
.profile-action-row {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}
.profile-logout-inline { background: #f6f3eb; }
.profile-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.profile-panel-intro { margin-top: 0; }
.profile-forgot-link {
    display: inline-block;
    margin-top: 14px;
    color: #244f9c;
    text-decoration: none;
    font-weight: 700;
}
.profile-forgot-link:hover { text-decoration: underline; }
.twofa-status {
    display: inline-block;
    margin-bottom: 14px;
    border: 1px solid #aaa69c;
    background: #f7f5ef;
    padding: 8px 10px;
    font-weight: 700;
}
.twofa-on {
    color: #13784a;
    border-color: #9bcdb2;
    background: #edf8f2;
}
.twofa-start-btn { width: 100%; }
.twofa-setup-box,
.twofa-disable-box {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid #c8c3b8;
}
.twofa-qr {
    display: block;
    width: min(240px, 100%);
    margin: 12px auto;
    padding: 8px;
    background: #fff;
    border: 1px solid #a7a298;
}
.twofa-secret {
    word-break: break-all;
    border: 1px solid #a7a298;
    background: #fff;
    padding: 10px;
    margin-bottom: 14px;
}
.twofa-cancel-form { margin-top: 8px; }
.auth-links-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.auth-resend-form { margin-top: 12px; text-align: center; }
.auth-resend-form .link-button { color: #244f9c; }

@media (max-width: 980px) {
    .retro-sidebar {
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid #8f8f84;
    }
    .retro-sidebar-label { display: none; }
    .retro-nav {
        display: flex;
        overflow-x: auto;
        margin: 10px 14px 14px;
    }
    .retro-nav a { white-space: nowrap; }
    .retro-sidebar-footer { display: none; }
    .profile-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
    .profile-info-grid { grid-template-columns: 1fr; }
    .profile-action-row .btn { width: 100%; }
}

/* ===== Collapsible left sidebar ===== */
.app-shell {
    grid-template-columns: 240px minmax(0, 1fr);
    transition: grid-template-columns .2s ease;
}
.app-shell.sidebar-collapsed {
    grid-template-columns: 72px minmax(0, 1fr);
}
.retro-sidebar {
    position: sticky;
    top: 0;
    height: 100vh;
    min-width: 0;
    overflow-x: hidden;
    z-index: 30;
    transition: width .2s ease;
}
.retro-sidebar-top {
    position: relative;
    min-height: 73px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sidebar-brand {
    min-width: 0;
    flex: 1;
}
.sidebar-brand-copy {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-toggle {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    border: 1px solid rgba(255,255,255,.55);
    background: rgba(255,255,255,.14);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    font-weight: 900;
    line-height: 1;
}
.sidebar-toggle:hover { background: rgba(255,255,255,.24); }
.retro-nav a,
.retro-logout {
    display: flex;
    align-items: center;
    gap: 11px;
    font-weight: 800;
}
.retro-nav .nav-label,
.retro-logout .nav-label {
    font-weight: 800;
    white-space: nowrap;
}
.nav-icon {
    width: 24px;
    min-width: 24px;
    display: inline-grid;
    place-items: center;
    font-size: 18px;
    line-height: 1;
}

/* Collapsed = rail icon saja */
.sidebar-collapsed .retro-sidebar-top {
    padding: 10px 8px;
    min-height: 96px;
    flex-direction: column;
    justify-content: center;
}
.sidebar-collapsed .retro-sidebar .sidebar-brand-copy,
.sidebar-collapsed .retro-sidebar .sidebar-section-copy,
.sidebar-collapsed .retro-sidebar .sidebar-user-copy,
.sidebar-collapsed .retro-sidebar .nav-label {
    display: none !important;
}
.sidebar-collapsed .retro-sidebar .sidebar-brand {
    flex: 0 0 auto;
}
.sidebar-collapsed .retro-sidebar .brand-mark {
    width: 38px;
    height: 38px;
}
.sidebar-collapsed .retro-sidebar .sidebar-toggle {
    width: 38px;
    height: 24px;
    flex-basis: 24px;
}
.sidebar-collapsed .retro-nav {
    margin: 12px 7px;
    gap: 8px;
}
.sidebar-collapsed .retro-nav a,
.sidebar-collapsed .retro-logout {
    justify-content: center;
    padding: 11px 7px;
}
.sidebar-collapsed .retro-sidebar-footer {
    padding: 8px 7px 14px;
}
.sidebar-collapsed .retro-sidebar-footer form { width: 100%; }
.sidebar-collapsed .retro-logout { margin-top: 0; }

/* Tablet: tetap sidebar di kiri */
@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 190px minmax(0, 1fr);
    }
    .app-shell.sidebar-collapsed {
        grid-template-columns: 66px minmax(0, 1fr);
    }
    .retro-sidebar {
        position: sticky;
        top: 0;
        height: 100vh;
        border-right: 1px solid #8f8f84;
        border-bottom: 0;
    }
    .retro-sidebar-label { display: block; }
    .retro-nav {
        display: grid;
        overflow: visible;
        margin: 0 10px;
    }
    .retro-nav a { white-space: normal; }
    .retro-sidebar-footer {
        display: block;
        padding-left: 10px;
        padding-right: 10px;
    }
    .content {
        min-width: 0;
        padding: 20px 16px;
    }
}

/* Handphone: rail tetap di kiri; saat dibuka sidebar meng-overlay konten */
@media (max-width: 760px) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        grid-template-columns: 64px minmax(0, 1fr);
    }
    .retro-sidebar {
        width: 210px;
        max-width: calc(100vw - 42px);
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        height: 100dvh;
        box-shadow: 5px 0 14px rgba(0,0,0,.16);
    }
    .sidebar-collapsed .retro-sidebar {
        width: 64px;
        box-shadow: 2px 0 5px rgba(0,0,0,.08);
    }
    .content {
        grid-column: 2;
        width: 100%;
        max-width: none;
        padding: 16px 11px;
        min-width: 0;
    }
    .retro-sidebar-top {
        padding-left: 10px;
        padding-right: 8px;
    }
    .sidebar-collapsed .retro-sidebar-top {
        padding-left: 6px;
        padding-right: 6px;
    }
    .sidebar-collapsed .retro-nav {
        margin-left: 5px;
        margin-right: 5px;
    }
    .sidebar-collapsed .retro-nav a,
    .sidebar-collapsed .retro-logout {
        padding-left: 4px;
        padding-right: 4px;
    }
    .nav-icon {
        width: 26px;
        min-width: 26px;
        font-size: 19px;
    }
    .page-head h1 { font-size: 23px; }
    .profile-page { max-width: none; }
}

/* ===== GoPay Provider ===== */
.provider-panel-body {
    padding: 16px !important;
}
.provider-details {
    margin-bottom: 14px;
}
.provider-alert {
    margin-top: 14px;
    margin-bottom: 14px;
}
.provider-form {
    margin-top: 14px;
}
.provider-form-separated {
    border-top: 1px solid #b9b4a8;
    padding-top: 16px;
}
.provider-actions {
    margin-top: 16px;
}
.provider-steps {
    margin: 0;
    padding-left: 22px;
    color: #49515d;
}
.provider-steps li {
    margin-bottom: 10px;
    line-height: 1.5;
}
.provider-recent-card {
    margin-top: 18px;
}
.status-chip.warn {
    background: var(--warning-bg);
    color: var(--warning);
}

/* Form Order sekarang punya kolom provider tambahan. */
.form-grid {
    grid-template-columns: 110px 160px minmax(150px, 1fr) minmax(150px, 1fr) minmax(140px, .8fr) auto;
}

@media (max-width: 1180px) {
    .form-grid { grid-template-columns: 1fr 1fr 1fr; }
    .form-action { grid-column: auto; }
}
@media (max-width: 760px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-action { grid-column: 1; }
}
.provider-panel-body .api-note {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid #b9b4a8;
    background: #f7f3e8;
    color: #4b5563;
}


/* Active QRIS provider: provider is chosen by installed QRIS, never per order */
.qris-active-provider-box,
.qris-setup-provider-note,
.qris-auto-detector {
    margin: 14px 16px 0;
    padding: 12px 14px;
    border: 1px solid #9d998f;
    background: #f7f3e8;
}
.qris-active-provider-box span,
.qris-auto-detector span {
    display: block;
    color: #6b7280;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .06em;
}
.qris-active-provider-box strong,
.qris-auto-detector strong {
    display: block;
    margin-top: 4px;
    font-size: 16px;
    color: #1f6f4a;
}
.qris-active-provider-box small {
    display: block;
    margin-top: 5px;
    color: #6b7280;
}
.qris-setup-provider-note {
    color: #384152;
    border-left: 4px solid #315eac;
}
.qris-auto-detector {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Multi-provider QRIS: satu aktif, lainnya standby */
.provider-qris-overview {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.provider-qris-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    background: #ece8dc;
    border: 1px solid #9b9b91;
}
.provider-qris-summary.is-active {
    box-shadow: inset 4px 0 0 #2f5da8;
}
.provider-qris-summary strong,
.provider-qris-summary small { display: block; }
.provider-qris-summary small { color: var(--muted); margin-top: 4px; }
.provider-qris-summary-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.provider-qris-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
    margin-top: 14px;
}
.provider-qris-actions form { margin: 0; }
.provider-activate-btn {
    background: #e8f7ef;
    border-color: #9fceb3;
    color: #16643e;
}
.provider-activate-btn:hover { background: #dcf2e6; }
.provider-active-note,
.provider-standby-note {
    margin-top: 14px;
    padding: 10px 12px;
    border: 1px solid #b6b2a6;
    background: #f6f3eb;
    font-size: 13px;
}
.provider-active-note {
    color: #16643e;
    border-color: #acd2bd;
    background: #edf8f1;
}
.provider-standby-note { color: #5f6470; }
.provider-qris-box {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #bdb8ac;
}
.provider-qris-status-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    font-weight: 700;
}
.provider-active-badge { min-height: 40px; padding: 0 12px; }
.qris-active-provider-box.is-empty strong { color: #8a5b14; }

@media (max-width: 760px) {
    .provider-qris-overview { grid-template-columns: 1fr; }
    .provider-qris-summary { align-items: flex-start; }
    .provider-qris-summary-right { justify-content: flex-start; }
}


/* ===== PayKita Typography Refresh: Poppins + compact sizing ===== */
html {
    font-size: 14px;
}
body,
button,
input,
textarea,
select,
option,
table,
code,
pre,
.mono {
    font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
body {
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}

/* Headings dibuat lebih compact agar panel tidak terasa penuh */
.page-head h1 {
    font-size: 23px;
    line-height: 1.25;
    font-weight: 600;
    letter-spacing: -.02em;
}
h1 { font-weight: 600; }
h2 {
    font-size: 15px;
    line-height: 1.35;
    font-weight: 600;
}
h3 {
    font-size: 13px;
    line-height: 1.4;
    font-weight: 600;
}
p { line-height: 1.55; }

/* Card / panel title */
.content .card > h2:first-child,
.content .card > .card-head:first-child h2,
.content .card.api-section > .endpoint-title:first-child h2,
.panel-badge {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .01em;
}
.content .card.metric > span:first-child {
    font-size: 11px;
    font-weight: 500;
}
.metric span,
.status-chip,
.panel-lead,
.qris-breakdown,
.qris-pay-head,
.endpoint-list,
.provider-active-note,
.provider-standby-note {
    font-size: 12px;
}
.metric strong {
    font-size: 21px;
    font-weight: 600;
}

/* Form dibuat ringan */
label {
    font-size: 12px;
    font-weight: 500;
}
input,
textarea,
select {
    font-size: 12.5px;
    font-weight: 400;
}
textarea {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
}
.btn {
    min-height: 37px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 500;
}
.btn-small {
    min-height: 30px;
    font-size: 11px;
}
th {
    font-size: 10.5px;
    font-weight: 600;
}
td { font-size: 12px; }
.badge {
    font-size: 10px;
    font-weight: 600;
}
.badge.large { font-size: 11px; }
pre {
    font-size: 11px;
    line-height: 1.65;
}

/* Nominal tetap terlihat jelas, tapi tidak oversized */
.qris-pay-amount {
    font-size: 30px;
    font-weight: 600;
}
.pay-big { font-size: 24px; }
.retro-brand {
    font-size: 19px;
    font-weight: 600;
}
.retro-merchant {
    font-size: 15px;
    font-weight: 600;
}
.retro-amount {
    font-size: 36px;
    font-weight: 600;
}
.retro-topbar { font-weight: 500; }
.retro-topbar-right { font-size: 11px; }
.retro-label,
.retro-footer-note { font-size: 11px; }

/* Profile */
.profile-avatar {
    font-size: 21px;
    font-weight: 600;
}
.profile-display-name {
    font-size: 19px;
    font-weight: 600;
}
.profile-role {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
}
.profile-info-item strong,
.profile-forgot-link,
.twofa-status {
    font-weight: 500;
}

/* Sidebar: Poppins, tidak bold */
.retro-sidebar,
.retro-sidebar button,
.retro-sidebar a,
.retro-sidebar strong,
.retro-sidebar small {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
}
.retro-sidebar .sidebar-brand strong {
    font-size: 14px;
    font-weight: 600;
}
.retro-sidebar .sidebar-brand small {
    font-size: 10.5px;
    font-weight: 400;
}
.retro-sidebar-label {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif;
    font-size: 9.5px;
    font-weight: 500;
}
.retro-nav a,
.retro-logout,
.retro-nav .nav-label,
.retro-logout .nav-label {
    font-size: 12.5px;
    font-weight: 400;
}
.retro-nav a.active {
    font-weight: 500;
}
.retro-sidebar-footer .user-mini strong {
    font-size: 12px;
    font-weight: 500;
}
.retro-sidebar-footer .user-mini small {
    font-size: 10px;
    font-weight: 400;
}
.sidebar-toggle {
    font-size: 12px;
    font-weight: 500;
}
.nav-icon {
    font-size: 16px;
}

/* Reduce sedikit ruang agar layout terasa lebih estetik */
.content { padding: 28px; }
.page-head { margin-bottom: 20px; }
.card { padding: 18px; }
.content .card > h2:first-child {
    margin: -18px -18px 14px;
    padding: 9px 12px;
}
.content .card > .card-head:first-child {
    margin: -18px -18px 14px;
    padding: 9px 12px;
}
.content .card.api-section > .endpoint-title:first-child {
    margin: -18px -18px 14px;
    padding: 9px 12px;
}
.content .card.metric > span:first-child {
    margin: -18px -18px 10px;
    padding: 8px 11px;
}

@media (max-width: 760px) {
    body { font-size: 12.5px; }
    .page-head h1 { font-size: 20px; }
    .content { padding: 14px 10px; }
    .retro-nav a,
    .retro-logout,
    .retro-nav .nav-label,
    .retro-logout .nav-label { font-size: 12px; }
    .nav-icon { font-size: 16px; }
    .qris-pay-amount { font-size: 27px; }
    .retro-amount { font-size: 32px; }
}

/* Checkout paid success state */
.checkout-success-card {
    margin-top: 10px;
    padding: 18px 16px;
    border: 1px solid #b8dcc8;
    background: linear-gradient(180deg, #f3fbf6 0%, #ecf8f1 100%);
    text-align: center;
}
.success-checkmark-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.success-checkmark-circle {
    width: 76px;
    height: 76px;
    border-radius: 999px;
    background: #16a34a;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    font-weight: 700;
    box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
}
.checkout-success-title {
    font-size: 24px;
    font-weight: 700;
    color: #166534;
    margin-bottom: 6px;
}
.checkout-success-desc {
    color: #4b5563;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 16px;
}
.checkout-success-summary {
    text-align: left;
    background: #fff;
    border: 1px solid #d4e9dc;
    padding: 12px 14px;
    margin-bottom: 14px;
}
.success-summary-row {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px dashed #dbe6df;
    font-size: 14px;
}
.success-summary-row:last-child { border-bottom: 0; }
.success-text { color: #15803d; }
.checkout-success-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.success-action-btn {
    min-height: 42px;
    width: 100%;
}


/* ===== PayKita Unified Landing Theme =====
   Menyamakan warna dashboard dengan landing page baru. */
:root {
    --pk-bg: #f4f6f8;
    --pk-card: #ffffff;
    --pk-card-soft: #f7f8fa;
    --pk-line: #d8dde6;
    --pk-line-strong: #c9d1dd;
    --pk-text: #172033;
    --pk-muted: #657087;
    --pk-blue: #315fae;
    --pk-blue-dark: #214989;
    --pk-blue-soft: #edf3ff;
    --pk-green: #0f9f58;
    --pk-green-bg: #e9f8ef;
    --pk-orange: #cc6a00;
    --pk-orange-bg: #fff6df;
    --pk-red: #b42318;
    --pk-red-bg: #fff0ee;
    --pk-shadow: 0 14px 42px rgba(28, 45, 76, .08);
    --pk-radius: 18px;
}

body {
    background: var(--pk-bg);
    color: var(--pk-text);
    font-family: "Poppins", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.content {
    max-width: 1380px;
}

.page-head h1,
.content h1,
.content h2,
.content h3,
.content h4,
.content strong {
    color: var(--pk-text);
}

.muted,
p,
.section-label,
.metric span,
.details dt,
.mini-list small,
.retro-label,
.retro-order-id,
.retro-footer-note,
.panel-lead,
.empty {
    color: var(--pk-muted);
}

/* ===== Sidebar ===== */
.retro-sidebar {
    background: #111827;
    color: #fff;
    border-right: 1px solid #1f2a3a;
    box-shadow: none;
}
.retro-sidebar-top {
    background: transparent;
    border-bottom: 1px solid #243044;
}
.retro-sidebar .brand-mark {
    background: var(--pk-blue);
    color: #fff;
    border: 1px solid var(--pk-blue-dark);
    border-radius: 0;
}
.retro-sidebar .sidebar-brand strong,
.retro-sidebar .sidebar-brand small { color: #fff; }
.retro-sidebar .sidebar-brand small { opacity: .76; }
.retro-sidebar-label {
    color: #8ea0bd;
    border-bottom-color: #243044;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: .03em;
}
.retro-nav a,
.retro-logout {
    background: transparent;
    border: 1px solid transparent;
    color: #ccd6e5;
    border-radius: 12px;
    box-shadow: none;
    font-weight: 500;
}
.retro-nav .nav-label,
.retro-logout .nav-label {
    font-weight: 500;
}
.retro-nav a:hover,
.retro-logout:hover {
    background: #182335;
    border-color: #243044;
    color: #fff;
}
.retro-nav a.active {
    background: var(--pk-blue);
    border-color: var(--pk-blue-dark);
    color: #fff;
}
.retro-sidebar-footer .user-mini {
    background: #0f1727;
    border: 1px solid #243044;
    border-radius: 14px;
}
.retro-sidebar-footer .user-mini strong { color: #fff; }
.retro-sidebar-footer .user-mini small { color: #9eb0ca; }
.retro-sidebar-footer .footer-label { color: #8ea0bd; }

/* ===== Cards / tables / forms ===== */
.content .card,
.profile-panel,
.qris-builder-panel,
.login-card,
.checkout-card:not(.retro-checkout-card) {
    background: var(--pk-card);
    border: 1px solid var(--pk-line);
    border-radius: var(--pk-radius);
    box-shadow: var(--pk-shadow);
}

.content .card > h2:first-child,
.content .card > .card-head:first-child,
.content .card.api-section > .endpoint-title:first-child,
.content .card.metric > span:first-child {
    margin: 0 0 16px;
    padding: 0;
    background: none;
    border: 0;
    color: var(--pk-text);
}
.content .card > h2:first-child,
.content .card > .card-head:first-child h2,
.content .card.api-section > .endpoint-title:first-child h2 {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--pk-text);
}
.content .card > .card-head:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}
.content .card > .card-head:first-child .text-link,
.content .card.api-section > .endpoint-title:first-child .endpoint-path,
.content .card.api-section > .endpoint-title:first-child .mode-tag {
    color: var(--pk-blue);
    background: var(--pk-blue-soft);
    border: 1px solid #cddaf3;
    border-radius: 999px;
    text-decoration: none;
}
.content .card.metric > span:first-child {
    color: var(--pk-muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 600;
}
.content .card.metric > strong {
    color: var(--pk-text);
    font-size: 30px;
    letter-spacing: -.03em;
}

.content .table-wrap {
    border: 1px solid var(--pk-line);
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
}
.content table th {
    background: #f7f8fa;
    color: #667289;
    border-bottom-color: var(--pk-line);
}
.content table th,
.content table td {
    border-bottom-color: var(--pk-line);
}
.content table tbody tr:hover {
    background: #fafcff;
}

.content input,
.content textarea,
.content select,
.login-card input,
.login-card textarea,
.login-card select {
    border-radius: 12px;
    border: 1px solid var(--pk-line-strong);
    background: #fff;
    color: var(--pk-text);
}
.content input:focus,
.content textarea:focus,
.content select:focus,
.login-card input:focus,
.login-card textarea:focus,
.login-card select:focus {
    border-color: #86a5db;
    box-shadow: 0 0 0 4px rgba(49, 95, 174, .12);
}

label {
    font-size: 13px;
    font-weight: 600;
}

.btn {
    border-radius: 12px;
    border: 1px solid var(--pk-line-strong);
    background: #fff;
    color: var(--pk-text);
    font-weight: 600;
}
.btn:hover {
    background: #f8fafc;
}
.btn-primary,
.login-card .btn-primary,
.content .btn-primary,
.qris-wide-btn {
    background: var(--pk-blue);
    border-color: var(--pk-blue-dark);
    color: #fff;
}
.btn-primary:hover,
.login-card .btn-primary:hover,
.content .btn-primary:hover,
.qris-wide-btn:hover {
    background: var(--pk-blue-dark);
}
.btn-danger {
    background: var(--pk-red-bg);
    border-color: #efc1bc;
    color: var(--pk-red);
}
.qris-delete-btn {
    background: #fff;
    border: 1px solid var(--pk-line-strong);
}

.badge.paid,
.status-chip.ok,
.profile-ok,
.twofa-on,
.retro-status-box.paid {
    background: var(--pk-green-bg);
    color: var(--pk-green);
}
.badge.pending,
.status-chip.bad,
.retro-status-box.pending {
    background: var(--pk-orange-bg);
    color: var(--pk-orange);
}
.badge.expired,
.badge.cancelled,
.retro-status-box.expired,
.retro-status-box.cancelled {
    background: var(--pk-red-bg);
    color: var(--pk-red);
}
.alert-success {
    background: var(--pk-green-bg);
    color: var(--pk-green);
    border-color: #b8dcc8;
}
.alert-error {
    background: var(--pk-red-bg);
    color: var(--pk-red);
    border-color: #efc1bc;
}

/* ===== QRIS / provider / profile panels ===== */
.panel-head,
.retro-topbar {
    background: linear-gradient(180deg, #3d6dc0 0%, #2f5ba8 100%);
    color: #fff;
    border-bottom: 1px solid var(--pk-blue-dark);
}
.qris-builder-panel,
.profile-panel {
    background: #fff;
}
.qris-inline-empty,
.sandbox-box,
.profile-info-item,
.twofa-status,
.provider-alert,
.checkout-success-summary {
    background: #f8fafc;
    border-color: var(--pk-line);
}
.profile-info-grid,
.profile-info-item,
.twofa-setup-box,
.twofa-disable-box,
.provider-form-separated {
    border-color: var(--pk-line);
}
.profile-avatar {
    background: var(--pk-blue-soft);
    border-color: #cddaf3;
    color: var(--pk-blue);
}
.profile-role,
.auth-resend-form .link-button,
.profile-forgot-link,
.text-link,
.back-link {
    color: var(--pk-blue);
}

/* ===== Checkout ===== */
.retro-checkout-wrap {
    background: linear-gradient(180deg, #9bb4d9 0%, #87a6d2 100%);
}
.retro-checkout-card {
    border: 1px solid #d6dce8;
    background: #fff;
    border-radius: 22px;
    box-shadow: 0 20px 44px rgba(26, 42, 70, .16);
}
.retro-topbar {
    border-radius: 22px 22px 0 0;
}
.retro-amount,
.qris-pay-amount {
    color: var(--pk-orange);
}
.retro-alert {
    background: #fff6df;
    border-color: #e6c986;
    color: #79581d;
}
.retro-qr-box {
    border: 1px solid var(--pk-line);
}
.retro-download-btn {
    border-radius: 12px;
    background: #fff;
    border: 1px solid var(--pk-line-strong);
}
.retro-timer-bar {
    background: linear-gradient(180deg, #315fae 0%, #214989 100%);
}
.paid-message,
.retro-status-box,
.checkout-success-card {
    border-radius: 14px;
}
.checkout-success-card {
    background: linear-gradient(180deg, #f3fbf6 0%, #eef8f2 100%);
    border-color: #cde9d7;
}
.success-checkmark-circle {
    background: var(--pk-green);
}
.checkout-success-title {
    color: #12663b;
}

/* Keep mobile behavior but theme-friendly */
@media (max-width: 760px) {
    .retro-sidebar {
        box-shadow: 6px 0 18px rgba(15, 23, 39, .22);
    }
    .sidebar-collapsed .retro-sidebar {
        box-shadow: 2px 0 8px rgba(15, 23, 39, .12);
    }
}


/* ==========================================================
   PAYKITA FINAL UI POLISH
   Satu gaya dengan landing page:
   - Poppins
   - navy + PayKita blue
   - card putih/cream
   - border tipis
   - bentuk tegas, minim rounded
   - spacing konsisten
   ========================================================== */

:root {
    --pk-bg: #f4f6f8;
    --pk-surface: #ffffff;
    --pk-surface-soft: #f7f8fa;
    --pk-cream: #f0ede2;
    --pk-cream-border: #b8b4aa;
    --pk-text: #172033;
    --pk-muted: #657087;
    --pk-line: #d8dde6;
    --pk-line-dark: #c4cbd6;
    --pk-blue: #315fae;
    --pk-blue-dark: #214989;
    --pk-blue-soft: #edf3ff;
    --pk-navy: #111827;
    --pk-navy-soft: #182335;
    --pk-green: #0f9f58;
    --pk-green-soft: #e9f8ef;
    --pk-orange: #cc6a00;
    --pk-orange-soft: #fff6df;
    --pk-red: #b42318;
    --pk-red-soft: #fff0ee;
}

/* ---------- Global ---------- */

html {
    background: var(--pk-bg);
}

body {
    background: var(--pk-bg);
    color: var(--pk-text);
    font-family: "Poppins", ui-sans-serif, system-ui, -apple-system,
                 BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.content {
    width: 100%;
    max-width: 1380px;
    padding: 30px 34px 48px;
}

.page-head {
    margin-bottom: 22px;
}

.page-head h1 {
    margin: 0 0 5px;
    font-size: 27px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -.025em;
    color: var(--pk-text);
}

.page-head p {
    margin: 0;
    font-size: 13px;
    color: var(--pk-muted);
}

h2 {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -.015em;
}

h3 {
    font-size: 15px;
    font-weight: 650;
}

.muted {
    color: var(--pk-muted) !important;
}

/* ---------- Sidebar: gaya footer landing page ---------- */

.app-shell {
    grid-template-columns: 224px minmax(0, 1fr);
    background: var(--pk-bg);
}

.app-shell.sidebar-collapsed {
    grid-template-columns: 68px minmax(0, 1fr);
}

.retro-sidebar {
    background: var(--pk-navy) !important;
    color: #fff;
    border-right: 1px solid #263247 !important;
    box-shadow: none !important;
}

.retro-sidebar-top {
    min-height: 70px;
    padding: 15px 14px !important;
    background: var(--pk-navy) !important;
    border-bottom: 1px solid #263247 !important;
}

.retro-sidebar .brand-mark {
    width: 35px;
    height: 35px;
    background: var(--pk-blue) !important;
    color: #fff !important;
    border: 1px solid #4774c3 !important;
    border-radius: 0 !important;
    font-size: 11px;
    font-weight: 700;
}

.retro-sidebar .sidebar-brand strong {
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
}

.retro-sidebar .sidebar-brand small {
    margin-top: 1px;
    color: #93a3bd !important;
    font-size: 10px;
    font-weight: 400;
}

.sidebar-toggle {
    width: 27px;
    height: 27px;
    flex-basis: 27px;
    border: 1px solid #3c4b63;
    background: #172235;
    color: #d9e2f0;
    font-weight: 500;
    transition: background .16s ease, border-color .16s ease;
}

.sidebar-toggle:hover {
    background: #22304a;
    border-color: #53647f;
}

.retro-sidebar-label {
    margin: 15px 13px 7px;
    padding: 0;
    border: 0;
    color: #73839d;
    font-family: "Poppins", sans-serif;
    font-size: 9px;
    line-height: 1;
    font-weight: 600;
    letter-spacing: .1em;
}

.retro-nav {
    margin: 0 10px;
    gap: 3px;
}

.retro-nav a,
.retro-logout {
    min-height: 42px;
    padding: 9px 10px;
    gap: 10px;
    border: 1px solid transparent !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    color: #bdc8d9 !important;
    font-size: 12px;
    font-weight: 400 !important;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.retro-nav .nav-label,
.retro-logout .nav-label {
    font-weight: 400 !important;
}

.retro-nav a:hover,
.retro-logout:hover {
    background: var(--pk-navy-soft) !important;
    border-color: #263247 !important;
    color: #fff !important;
}

.retro-nav a.active {
    background: var(--pk-blue) !important;
    border-color: var(--pk-blue-dark) !important;
    color: #fff !important;
}

.nav-icon {
    width: 22px;
    min-width: 22px;
    font-size: 16px;
}

.retro-sidebar-footer {
    padding: 10px 10px 14px;
}

.retro-sidebar-footer .footer-label {
    margin-left: 3px;
}

.retro-sidebar-footer .user-mini {
    padding: 10px;
    background: #0e1625 !important;
    border: 1px solid #263247 !important;
    border-radius: 0 !important;
}

.retro-sidebar-footer .user-mini strong {
    color: #fff !important;
    font-size: 11px;
    font-weight: 500;
}

.retro-sidebar-footer .user-mini small {
    margin-top: 2px;
    color: #8697b2 !important;
    font-size: 9px;
}

.retro-logout {
    margin-top: 5px;
    width: 100%;
}

/* ---------- Cards: sama dengan feature-card landing ---------- */

.card,
.content .card,
.profile-panel,
.login-card,
.checkout-card:not(.retro-checkout-card) {
    background: var(--pk-surface) !important;
    border: 1px solid var(--pk-line) !important;
    border-radius: 0 !important;
    box-shadow: 0 7px 22px rgba(30, 45, 70, .035) !important;
}

.card,
.content .card {
    padding: 20px;
    margin-bottom: 16px;
}

.content .card > h2:first-child,
.content .card > .card-head:first-child,
.content .card.api-section > .endpoint-title:first-child,
.content .card.metric > span:first-child {
    margin: 0 0 16px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--pk-text) !important;
}

.content .card > h2:first-child,
.content .card > .card-head:first-child h2,
.content .card.api-section > .endpoint-title:first-child h2 {
    margin: 0;
    color: var(--pk-text) !important;
    font-size: 17px !important;
    line-height: 1.3;
    font-weight: 650 !important;
    letter-spacing: -.015em;
}

/* Metric = stat-card landing */
.cards {
    gap: 12px;
    margin-bottom: 16px;
}

.content .card.metric {
    min-height: 110px;
    padding: 17px 18px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--pk-cream) !important;
    border-color: var(--pk-cream-border) !important;
    box-shadow: none !important;
}

.content .card.metric > span:first-child {
    margin: 0 !important;
    color: var(--pk-muted) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: .055em;
}

.content .card.metric > strong {
    margin-top: 14px;
    color: var(--pk-text) !important;
    font-size: 25px;
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: -.03em;
}

/* ---------- Buttons: sama dengan landing-btn ---------- */

.btn,
.content .btn,
.login-card .btn,
.qris-delete-btn,
.retro-download-btn {
    min-height: 39px;
    padding: 9px 14px;
    border: 1px solid var(--pk-line-dark) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--pk-text) !important;
    box-shadow: none !important;
    font-size: 12px;
    font-weight: 550;
    line-height: 1.2;
    transition: transform .14s ease,
                box-shadow .14s ease,
                background .14s ease,
                border-color .14s ease;
}

.btn:hover,
.content .btn:hover,
.login-card .btn:hover {
    background: #f8fafc !important;
    border-color: #aeb8c7 !important;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(27,45,75,.08) !important;
}

.btn:active,
.content .btn:active {
    transform: translateY(0);
}

.btn-primary,
.content .btn-primary,
.login-card .btn-primary,
.qris-wide-btn {
    background: var(--pk-blue) !important;
    border-color: var(--pk-blue-dark) !important;
    color: #fff !important;
}

.btn-primary:hover,
.content .btn-primary:hover,
.login-card .btn-primary:hover,
.qris-wide-btn:hover {
    background: var(--pk-blue-dark) !important;
    border-color: #173b73 !important;
    color: #fff !important;
}

.btn-danger,
.content .btn-danger {
    background: var(--pk-red-soft) !important;
    border-color: #efc0bb !important;
    color: var(--pk-red) !important;
}

.btn-danger:hover,
.content .btn-danger:hover {
    background: #ffe6e3 !important;
    border-color: #e7aaa4 !important;
}

.btn-small {
    min-height: 31px;
    padding: 6px 9px;
    font-size: 10px;
}

/* ---------- Forms ---------- */

label {
    gap: 6px;
    color: #303a4a;
    font-size: 11px;
    font-weight: 550;
    letter-spacing: .01em;
}

input,
textarea,
select,
.content input,
.content textarea,
.content select,
.login-card input,
.login-card textarea,
.login-card select {
    min-height: 40px;
    padding: 9px 11px;
    border: 1px solid var(--pk-line-dark) !important;
    border-radius: 0 !important;
    background: #fff !important;
    color: var(--pk-text) !important;
    font-size: 12px;
    box-shadow: none !important;
}

textarea {
    min-height: 90px;
}

input:focus,
textarea:focus,
select:focus,
.content input:focus,
.content textarea:focus,
.content select:focus {
    border-color: #6f91cc !important;
    box-shadow: 0 0 0 3px rgba(49,95,174,.09) !important;
}

.stack {
    gap: 12px;
}

/* ---------- Status ---------- */

.status-row {
    gap: 8px;
    margin-bottom: 16px;
}

.status-chip,
.badge,
.twofa-status {
    border-radius: 999px !important;
    box-shadow: none !important;
}

.status-chip {
    padding: 7px 10px;
    border: 1px solid var(--pk-line);
    font-size: 10px;
    font-weight: 500;
}

.badge {
    padding: 4px 8px;
    font-size: 9px;
    font-weight: 600;
}

.status-chip.ok,
.badge.paid,
.twofa-on {
    background: var(--pk-green-soft) !important;
    border-color: #b9dfc8 !important;
    color: var(--pk-green) !important;
}

.status-chip.bad,
.badge.pending {
    background: var(--pk-orange-soft) !important;
    border-color: #e8cf94 !important;
    color: #8a6017 !important;
}

.badge.expired,
.badge.cancelled {
    background: var(--pk-red-soft) !important;
    border-color: #efc0bb !important;
    color: var(--pk-red) !important;
}

.badge.neutral {
    background: #eef2f7 !important;
    border: 1px solid #d8dee8 !important;
    color: #526075 !important;
}

/* ---------- Tables ---------- */

.content .table-wrap {
    overflow: hidden;
    border: 1px solid var(--pk-line) !important;
    border-radius: 0 !important;
    background: #fff !important;
}

.content table {
    background: #fff;
}

.content th {
    padding: 11px 10px;
    background: var(--pk-surface-soft) !important;
    color: #68758a !important;
    border-bottom: 1px solid var(--pk-line) !important;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
}

.content td {
    padding: 11px 10px;
    color: #303a4a;
    border-bottom: 1px solid #e7ebf0 !important;
    font-size: 11px;
}

.content tbody tr:hover {
    background: #fafcff !important;
}

/* ---------- Module panels: terminal look landing ---------- */

.qris-builder-panel,
.profile-panel {
    overflow: hidden;
    background: var(--pk-cream) !important;
    border: 1px solid var(--pk-cream-border) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.panel-head,
.retro-topbar {
    min-height: 41px;
    padding: 10px 13px;
    background: linear-gradient(180deg, #3d6dc0 0%, #2f5ba8 100%) !important;
    border-bottom: 1px solid var(--pk-blue-dark) !important;
    color: #fff !important;
}

.panel-badge {
    font-size: 10px;
    font-weight: 650;
    letter-spacing: .045em;
}

.provider-panel-body,
.profile-panel-body {
    padding: 16px !important;
}

.qris-active-provider-box,
.qris-auto-detector,
.provider-qris-box,
.qris-order-preview,
.qris-inline-empty,
.provider-standby-note,
.sandbox-box {
    border-radius: 0 !important;
}

/* Detail box di dalam cream panel */
.qris-active-provider-box,
.provider-qris-box,
.qris-order-preview,
.profile-info-item {
    background: #fff !important;
    border-color: #cfc9bd !important;
}

.qris-inline-empty,
.provider-standby-note,
.sandbox-box {
    background: #f8f6ef !important;
    border-color: #d5d0c5 !important;
}

/* ---------- Profile ---------- */

.profile-page {
    max-width: 1160px;
}

.profile-hero {
    margin-bottom: 16px;
}

.profile-avatar {
    width: 56px;
    height: 56px;
    background: #fff !important;
    color: var(--pk-blue) !important;
    border: 1px solid #c9c3b7 !important;
    border-radius: 0 !important;
    font-size: 22px;
}

.profile-display-name {
    color: var(--pk-text);
    font-size: 20px;
    font-weight: 650;
}

.profile-role {
    font-family: "Poppins", sans-serif;
    color: var(--pk-muted);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
}

.profile-info-grid {
    border-color: #cbc6ba;
}

.profile-info-item {
    padding: 11px 12px;
    border-color: #d3cec3;
}

.profile-info-item span,
.profile-info-item small {
    font-size: 10px;
}

.profile-info-item strong {
    font-size: 12px;
    font-weight: 600;
}

/* ---------- API ---------- */

pre,
.code-card {
    border-radius: 0 !important;
    background: #101827 !important;
    border: 1px solid #2a3547;
}

.content .api-nav a,
.content .api-note,
.content .status-box,
.content .key-help > div {
    border-radius: 0 !important;
}

/* ---------- Auth ---------- */

.login-wrap {
    background:
        radial-gradient(circle at 15% 5%, rgba(49,95,174,.08), transparent 32%),
        var(--pk-bg);
}

.login-card {
    width: min(430px, 100%);
    padding: 26px;
    background: #fff !important;
}

.login-card .brand-mark {
    background: var(--pk-blue);
    color: #fff;
    border-radius: 0;
}

.login-card h1 {
    margin: 0 0 4px;
    font-size: 24px;
    font-weight: 700;
}

.login-brand {
    margin-bottom: 24px;
}

/* ---------- Checkout: terminal/card landing ---------- */

.retro-checkout-wrap {
    background: #9bb4d9 !important;
}

.retro-checkout-card {
    width: min(410px, 100%);
    overflow: hidden;
    background: var(--pk-cream) !important;
    border: 1px solid #7d8797 !important;
    border-radius: 0 !important;
    box-shadow: 0 15px 36px rgba(27,45,75,.16) !important;
}

.retro-topbar {
    border-radius: 0 !important;
}

.retro-brand {
    font-size: 17px;
    font-weight: 650;
}

.retro-topbar-right {
    font-size: 9px;
}

.retro-body {
    padding: 16px;
}

.retro-merchant {
    font-size: 14px;
    font-weight: 650;
}

.retro-amount {
    color: var(--pk-orange) !important;
    font-size: 31px;
    font-weight: 650;
}

.retro-order-id {
    font-size: 10px;
}

.retro-alert {
    padding: 10px;
    background: var(--pk-orange-soft) !important;
    border-color: #e6c986 !important;
    color: #79581d !important;
    font-size: 10px;
}

.retro-qr-box {
    background: #fff;
    border-color: #c8c3b9 !important;
}

.retro-download-btn {
    margin-top: 10px;
}

.retro-steps {
    font-size: 10px;
}

.retro-timer-bar {
    background: var(--pk-blue-dark) !important;
    font-size: 10px;
}

.retro-status-box {
    border-radius: 0 !important;
    font-size: 10px;
}

.checkout-success-card {
    border-radius: 0 !important;
    box-shadow: none !important;
}

.success-checkmark-circle {
    width: 66px;
    height: 66px;
    background: var(--pk-green) !important;
    font-size: 31px;
}

.checkout-success-title {
    font-size: 20px;
    font-weight: 650;
}

.checkout-success-desc,
.success-summary-row {
    font-size: 11px;
}

/* ---------- Alerts ---------- */

.alert {
    border-radius: 0 !important;
    padding: 10px 12px;
    font-size: 11px;
}

.alert-success {
    background: var(--pk-green-soft) !important;
    border-color: #badfc9 !important;
    color: #137744 !important;
}

.alert-error {
    background: var(--pk-red-soft) !important;
    border-color: #efc0bb !important;
    color: var(--pk-red) !important;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 188px minmax(0, 1fr);
    }

    .app-shell.sidebar-collapsed {
        grid-template-columns: 64px minmax(0, 1fr);
    }

    .content {
        padding: 22px 18px 38px;
    }

    .cards.four {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 760px) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        grid-template-columns: 60px minmax(0, 1fr);
    }

    .retro-sidebar {
        width: 202px;
        max-width: calc(100vw - 38px);
    }

    .sidebar-collapsed .retro-sidebar {
        width: 60px;
    }

    .content {
        padding: 15px 10px 30px;
    }

    .page-head h1 {
        font-size: 21px;
    }

    .cards.four {
        grid-template-columns: 1fr;
    }

    .qris-builder-grid,
    .profile-grid-2,
    .grid-2 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 520px) {
    body {
        font-size: 12px;
    }

    .content {
        padding-left: 8px;
        padding-right: 8px;
    }

    .card,
    .content .card {
        padding: 15px;
    }

    .retro-nav a,
    .retro-logout {
        min-height: 40px;
    }
}


/* ======================================================================
   PAYKITA PRO UI — FINAL VISUAL SYSTEM
   Target: premium, clean, consistent. No orange/amber theme states.
   Navy + PayKita Blue + White + Cool Gray + Green success only.
   ====================================================================== */
:root {
    --pro-bg: #f5f7fb;
    --pro-surface: #ffffff;
    --pro-surface-soft: #f8faff;
    --pro-navy: #101827;
    --pro-navy-2: #172238;
    --pro-blue: #315fae;
    --pro-blue-hover: #28539b;
    --pro-blue-soft: #edf3ff;
    --pro-blue-border: #cbd9f1;
    --pro-text: #172033;
    --pro-muted: #67748a;
    --pro-line: #dbe2ec;
    --pro-line-strong: #c9d2df;
    --pro-success: #128653;
    --pro-success-soft: #eaf8f1;
    --pro-success-line: #b8dfca;
    --pro-danger: #b42318;
    --pro-danger-soft: #fff0ee;
    --pro-danger-line: #efc2bd;
    --pro-neutral: #5f6d82;
    --pro-neutral-soft: #f0f3f8;
    --pro-neutral-line: #d5dde8;
    --pro-shadow: 0 10px 28px rgba(24, 39, 68, .055);
}

/* 1. Canvas / typography */
body {
    background: var(--pro-bg) !important;
    color: var(--pro-text) !important;
}
.content {
    width: 100% !important;
    max-width: none !important;
    padding: 30px 34px 48px !important;
}
.page-head {
    align-items: center !important;
    margin-bottom: 24px !important;
}
.page-head h1 {
    color: var(--pro-text) !important;
    font-size: 26px !important;
    font-weight: 650 !important;
    letter-spacing: -.025em !important;
}
.page-head p {
    max-width: 900px;
    color: var(--pro-muted) !important;
    font-size: 12px !important;
}

/* 2. Sidebar: premium dark rail, no bold menu */
.retro-sidebar {
    background: var(--pro-navy) !important;
    border-right: 1px solid #273248 !important;
}
.retro-sidebar-top {
    background: var(--pro-navy) !important;
    border-bottom: 1px solid #273248 !important;
}
.retro-nav a,
.retro-logout,
.retro-nav .nav-label,
.retro-logout .nav-label {
    font-weight: 400 !important;
}
.retro-nav a {
    color: #c2ccdc !important;
    background: transparent !important;
    border-color: transparent !important;
}
.retro-nav a:hover {
    color: #fff !important;
    background: var(--pro-navy-2) !important;
    border-color: #2a3851 !important;
}
.retro-nav a.active {
    color: #fff !important;
    background: var(--pro-blue) !important;
    border-color: #3d6dbb !important;
}
.retro-sidebar-footer .user-mini {
    background: #0d1524 !important;
    border-color: #29364d !important;
}

/* 3. Status language: NO amber/orange */
.status-chip,
.badge {
    box-shadow: none !important;
}
.status-chip.neutral,
.status-chip.bad:not(.error),
.badge.neutral {
    color: var(--pro-neutral) !important;
    background: var(--pro-neutral-soft) !important;
    border-color: var(--pro-neutral-line) !important;
}
.status-chip.info,
.badge.info {
    color: var(--pro-blue) !important;
    background: var(--pro-blue-soft) !important;
    border-color: var(--pro-blue-border) !important;
}
.status-chip.ok,
.badge.paid,
.provider-active-note,
.twofa-on {
    color: var(--pro-success) !important;
    background: var(--pro-success-soft) !important;
    border-color: var(--pro-success-line) !important;
}
.status-chip.bad.error,
.badge.expired,
.badge.cancelled,
.alert-error {
    color: var(--pro-danger) !important;
    background: var(--pro-danger-soft) !important;
    border-color: var(--pro-danger-line) !important;
}
/* legacy pending/warn is rendered blue, never orange */
.status-chip.warn,
.badge.pending {
    color: var(--pro-blue) !important;
    background: var(--pro-blue-soft) !important;
    border-color: var(--pro-blue-border) !important;
}

/* 4. Cards: clean white, subtle premium depth */
.card,
.content .card,
.profile-panel,
.qris-builder-panel {
    background: var(--pro-surface) !important;
    border: 1px solid var(--pro-line) !important;
    box-shadow: var(--pro-shadow) !important;
}
.content .card.metric {
    position: relative;
    min-height: 108px !important;
    background: var(--pro-surface) !important;
    border-color: var(--pro-line) !important;
    overflow: hidden;
}
.content .card.metric::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 3px;
    background: var(--pro-blue);
}
.content .card.metric > span:first-child {
    color: var(--pro-muted) !important;
}
.content .card.metric > strong {
    color: var(--pro-text) !important;
}

/* 5. Panel header: one exact blue everywhere */
.panel-head,
.retro-topbar {
    background: var(--pro-blue) !important;
    border-bottom: 1px solid #244d91 !important;
    min-height: 40px !important;
}
.panel-badge {
    color: #fff !important;
    font-weight: 600 !important;
    letter-spacing: .035em !important;
}

/* 6. Two-column layout: never stretch shorter card to taller card */
.grid-2,
.qris-builder-grid,
.profile-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: start !important;
    gap: 18px !important;
}
.grid-2 > *,
.qris-builder-grid > *,
.profile-grid-2 > * {
    min-width: 0 !important;
}
.triple-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* 7. Details: label/value columns line up and never collide */
.details > div {
    display: grid !important;
    grid-template-columns: minmax(118px, 32%) minmax(0, 1fr) !important;
    align-items: center !important;
    gap: 16px !important;
    min-height: 44px;
    padding: 10px 0 !important;
    border-bottom: 1px solid var(--pro-line) !important;
}
.details dt {
    color: var(--pro-muted) !important;
    font-size: 11px !important;
    line-height: 1.35;
}
.details dd {
    min-width: 0 !important;
    color: var(--pro-text) !important;
    font-size: 12px !important;
    line-height: 1.45;
    overflow-wrap: anywhere;
}

/* 8. Forms: label and control spacing normalized */
label {
    color: #334057 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .025em;
}
input,
textarea,
select,
.content input,
.content textarea,
.content select {
    border-color: var(--pro-line-strong) !important;
    background: #fff !important;
    color: var(--pro-text) !important;
}
input:focus,
textarea:focus,
select:focus,
.content input:focus,
.content textarea:focus,
.content select:focus {
    border-color: #7798cf !important;
    box-shadow: 0 0 0 3px rgba(49, 95, 174, .09) !important;
}

/* 9. Buttons: no orange, one primary language */
.btn-primary,
.content .btn-primary,
.qris-wide-btn,
.login-card .btn-primary {
    background: var(--pro-blue) !important;
    border-color: #244d91 !important;
    color: #fff !important;
}
.btn-primary:hover,
.content .btn-primary:hover,
.qris-wide-btn:hover,
.login-card .btn-primary:hover {
    background: var(--pro-blue-hover) !important;
    border-color: #1f4687 !important;
}
.provider-activate-btn {
    color: var(--pro-blue) !important;
    background: var(--pro-blue-soft) !important;
    border-color: var(--pro-blue-border) !important;
}
.provider-activate-btn:hover {
    background: #e1ebfc !important;
}

/* 10. QRIS page */
.qris-builder-panel {
    overflow: hidden;
}
.qris-active-provider-box,
.qris-auto-detector,
.provider-qris-box,
.qris-order-preview,
.qris-inline-empty,
.provider-standby-note,
.api-note {
    background: var(--pro-surface-soft) !important;
    border-color: var(--pro-line) !important;
}
.qris-active-provider-box {
    padding: 15px !important;
}
.qris-active-provider-box span {
    color: var(--pro-muted) !important;
    font-weight: 600 !important;
}
.qris-active-provider-box strong {
    color: var(--pro-text) !important;
    font-size: 15px !important;
    font-weight: 650 !important;
}
.qris-active-provider-box.is-empty strong {
    color: var(--pro-neutral) !important;
}
.qris-auto-detector {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 13px 15px !important;
}
.qris-auto-detector span {
    color: var(--pro-muted) !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
}
.qris-auto-detector strong {
    margin: 0 !important;
    color: var(--pro-blue) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
    text-align: right;
}
.qris-status-line,
.provider-active-note {
    color: var(--pro-success) !important;
}
/* orange amount removed: use PayKita blue */
.qris-pay-amount,
.retro-amount {
    color: var(--pro-blue) !important;
}
.qris-breakdown {
    color: #536177 !important;
}
.qris-live-image {
    border-color: var(--pro-line) !important;
}

/* 11. Provider pages */
.provider-panel-body {
    padding: 18px !important;
}
.provider-details {
    margin-bottom: 16px !important;
}
.provider-qris-box {
    margin-top: 16px !important;
    padding: 16px !important;
    border: 1px solid var(--pro-line) !important;
}
.provider-qris-status-row {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 12px !important;
}
.provider-qris-status-row strong {
    min-width: 0;
    color: var(--pro-text);
    font-size: 12px;
    font-weight: 650;
}
.provider-form-separated {
    border-top: 1px solid var(--pro-line) !important;
}
.provider-standby-note {
    color: var(--pro-neutral) !important;
}
.provider-steps {
    color: #435069 !important;
    line-height: 1.7;
}
.provider-steps li {
    padding-left: 3px;
    margin-bottom: 7px !important;
}

/* 12. Profile: fix green bars and field alignment */
.profile-panel {
    overflow: hidden;
}
.profile-info-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    border-color: var(--pro-line) !important;
}
.profile-info-item {
    min-width: 0;
    padding: 13px 14px !important;
    background: #fff !important;
    border-color: var(--pro-line) !important;
}
.profile-info-item > span {
    color: var(--pro-muted) !important;
    font-size: 10px !important;
}
.profile-info-item > strong {
    color: var(--pro-text) !important;
    font-size: 12px !important;
    overflow-wrap: anywhere;
}
.profile-info-item .profile-ok {
    display: inline-flex !important;
    width: auto !important;
    margin-top: 4px !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    color: var(--pro-success) !important;
    font-weight: 550 !important;
}
.profile-avatar {
    color: var(--pro-blue) !important;
    background: var(--pro-blue-soft) !important;
    border-color: var(--pro-blue-border) !important;
}
.twofa-status:not(.twofa-on) {
    color: var(--pro-neutral) !important;
    background: var(--pro-neutral-soft) !important;
    border-color: var(--pro-neutral-line) !important;
}

/* 13. Dashboard / tables */
.table-wrap {
    border-color: var(--pro-line) !important;
}
th {
    background: #f7f9fc !important;
    color: var(--pro-muted) !important;
}
td {
    color: #344158 !important;
}
.text-link,
.back-link {
    color: var(--pro-blue) !important;
}

/* 14. Checkout success/pending: only blue + green */
.retro-timer-bar {
    background: var(--pro-blue) !important;
}
.retro-alert {
    color: #435069 !important;
    background: var(--pro-blue-soft) !important;
    border-color: var(--pro-blue-border) !important;
}
.checkout-success-card {
    background: #f3fbf7 !important;
    border-color: var(--pro-success-line) !important;
}

/* 15. Responsive alignment */
@media (max-width: 980px) {
    .content {
        padding: 22px 18px 38px !important;
    }
    .grid-2,
    .qris-builder-grid,
    .profile-grid-2 {
        grid-template-columns: 1fr !important;
    }
    .triple-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}
@media (max-width: 700px) {
    .content {
        padding: 16px 10px 30px !important;
    }
    .triple-grid,
    .profile-info-grid {
        grid-template-columns: 1fr !important;
    }
    .details > div {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
        align-items: start !important;
    }
    .qris-auto-detector {
        grid-template-columns: 1fr !important;
        gap: 3px !important;
    }
    .qris-auto-detector strong {
        text-align: left;
    }
}
/* =========================================================
   PAYKITA DASHBOARD · HISTORY / DELIVERY RECORD
   ========================================================= */
.dashboard-page {
    max-width: 1500px;
}

.dashboard-metrics .metric {
    min-height: 126px;
}

.dashboard-metrics .metric > span:first-child {
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.dashboard-metrics .metric > strong {
    font-size: clamp(24px, 2.15vw, 34px) !important;
    letter-spacing: -.035em;
    word-break: break-word;
}

.dashboard-chart-card,
.delivery-record-card {
    padding: 0 !important;
    overflow: visible;
}

.dashboard-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.dashboard-section-head > div:first-child {
    min-width: 0;
}

.dashboard-kicker {
    display: block;
    margin-bottom: 3px;
    color: #315fae;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .055em;
}

.dashboard-section-head h2 {
    margin: 0 !important;
    font-size: 15px !important;
    font-weight: 600;
    color: #172033;
}

.dashboard-chart-summary {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: flex-end;
    color: #657087;
    font-size: 12px;
}

.dashboard-chart-summary strong {
    color: #172033;
    font-weight: 700;
}

.dashboard-chart-legend {
    display: flex;
    gap: 16px;
    align-items: center;
    padding: 14px 20px 0;
    color: #657087;
    font-size: 11px;
}

.dashboard-chart-legend span {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.legend-dot {
    width: 9px;
    height: 9px;
    border-radius: 3px;
    display: inline-block;
}

.legend-dot.total {
    background: #d9e5f8;
    border: 1px solid #b8cceb;
}

.legend-dot.paid {
    background: #315fae;
}

.dashboard-chart {
    height: 245px;
    display: grid;
    grid-template-columns: repeat(14, minmax(30px, 1fr));
    align-items: end;
    gap: 8px;
    padding: 22px 20px 18px;
    overflow-x: auto;
}

.dashboard-chart-day {
    min-width: 34px;
    height: 190px;
    display: grid;
    grid-template-rows: 20px 1fr 26px;
    align-items: end;
    text-align: center;
}

.dashboard-chart-value {
    min-height: 20px;
    color: #657087;
    font-size: 10px;
    line-height: 20px;
}

.dashboard-chart-track {
    position: relative;
    height: 142px;
    border-bottom: 1px solid #d8dde6;
}

.dashboard-chart-track::before,
.dashboard-chart-track::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    border-top: 1px dashed #edf0f4;
}

.dashboard-chart-track::before {
    top: 33%;
}

.dashboard-chart-track::after {
    top: 66%;
}

.dashboard-chart-bar {
    position: absolute;
    bottom: 0;
    border-radius: 4px 4px 1px 1px;
    transition: height .18s ease;
}

.dashboard-chart-bar.total {
    left: 16%;
    right: 16%;
    min-height: 2px;
    background: #d9e5f8;
    border: 1px solid #b8cceb;
}

.dashboard-chart-bar.paid {
    left: 33%;
    right: 33%;
    min-height: 2px;
    background: #315fae;
    border: 1px solid #315fae;
}

.dashboard-chart-day small {
    display: block;
    padding-top: 7px;
    color: #7a8493;
    font-size: 9px;
    white-space: nowrap;
}

.delivery-head {
    position: relative;
    z-index: 5;
}

.dashboard-export {
    position: relative;
}

.dashboard-export summary {
    list-style: none;
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #214989;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    user-select: none;
}

.dashboard-export summary::-webkit-details-marker {
    display: none;
}

.dashboard-export[open] summary {
    border-color: #9db5dc;
    box-shadow: 0 0 0 3px rgba(49, 95, 174, .08);
}

.dashboard-export-menu {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 20;
    width: 190px;
    padding: 6px;
    border: 1px solid #d8dde6;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 16px 38px rgba(23, 32, 51, .14);
}

.dashboard-export-menu a {
    display: block;
    padding: 9px 10px;
    border-radius: 7px;
    color: #334155;
    text-decoration: none;
    font-size: 12px;
}

.dashboard-export-menu a:hover {
    background: #f1f5fb;
    color: #214989;
}

.dashboard-filters {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding: 13px 20px;
    border-bottom: 1px solid var(--line);
}

.dashboard-filters a {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border: 1px solid transparent;
    border-radius: 7px;
    color: #657087;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
}

.dashboard-filters a:hover {
    background: #f5f7fa;
    color: #214989;
}

.dashboard-filters a.active {
    border-color: #c8d6eb;
    background: #edf3fc;
    color: #214989;
    font-weight: 600;
}

.dashboard-table-wrap {
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
}

.dashboard-orders-table {
    min-width: 980px;
}

.dashboard-orders-table thead th {
    background: #fbfcfe;
    color: #697386;
    font-size: 10px;
    letter-spacing: .035em;
}

.dashboard-orders-table th,
.dashboard-orders-table td {
    padding: 13px 14px;
}

.dashboard-orders-table tbody tr:last-child td {
    border-bottom: 0;
}

.dashboard-orders-table tbody tr:hover {
    background: #fbfdff;
}

.dashboard-order-id {
    display: block;
    max-width: 220px;
    overflow: hidden;
    color: #214989;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    font-weight: 600;
}

.dashboard-order-id:hover,
.dashboard-checkout-link:hover,
.dashboard-action-link:hover {
    text-decoration: underline;
}

.dashboard-provider,
.dashboard-amount small {
    display: block;
    margin-top: 4px;
    color: #8a94a3;
    font-size: 9px;
    font-weight: 500;
}

.dashboard-amount strong {
    display: block;
    color: #172033;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-orders-table .badge {
    text-transform: lowercase;
    letter-spacing: 0;
    font-weight: 600;
}

.dashboard-ref {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    font-size: 11px;
}

.dashboard-checkout-link,
.dashboard-action-link {
    color: #315fae;
    text-decoration: none;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.dashboard-time {
    color: #657087;
    font-size: 11px;
    white-space: nowrap;
}

.dashboard-empty {
    padding: 32px 20px;
    color: #657087;
    font-size: 13px;
}

.dashboard-pagination {
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    color: #657087;
    font-size: 11px;
}

.dashboard-pagination-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}

.dashboard-pagination-buttons a,
.dashboard-pagination-buttons span {
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 10px;
    border: 1px solid #d8dde6;
    border-radius: 7px;
    background: #fff;
    color: #315fae;
    text-decoration: none;
    font-weight: 600;
}

.dashboard-pagination-buttons a:hover {
    border-color: #b7c7df;
    background: #f5f8fd;
}

.dashboard-pagination-buttons .disabled {
    color: #a9b0ba;
    background: #f8f9fb;
    cursor: default;
}

@media (max-width: 900px) {
    .dashboard-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-chart-summary {
        justify-content: flex-start;
    }

    .delivery-head {
        flex-direction: row;
        align-items: center;
    }

    .dashboard-chart {
        grid-template-columns: repeat(14, 46px);
    }
}

@media (max-width: 620px) {
    .dashboard-metrics {
        grid-template-columns: 1fr 1fr !important;
    }

    .dashboard-metrics .metric {
        min-height: 105px;
    }

    .dashboard-metrics .metric > strong {
        font-size: 22px !important;
    }

    .dashboard-section-head,
    .dashboard-filters,
    .dashboard-pagination {
        padding-left: 14px;
        padding-right: 14px;
    }

    .dashboard-chart {
        padding-left: 14px;
        padding-right: 14px;
    }

    .dashboard-chart-summary {
        gap: 10px;
    }

    .delivery-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .dashboard-export,
    .dashboard-export summary {
        width: 100%;
    }

    .dashboard-export summary {
        justify-content: center;
    }

    .dashboard-export-menu {
        left: 0;
        right: 0;
        width: 100%;
    }

    .dashboard-pagination {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* =========================================================
   GOPAY RECOMMENDATION / HYBRID SETTINGS
   ========================================================= */
.gopay-recommendation-card {
    padding: 0 !important;
    overflow: hidden;
}

.gopay-recommendation-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--line);
    background: #f8fafc;
}

.gopay-recommendation-head > div:first-child {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.gopay-recommendation-icon {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    border: 1px solid #d8dde6;
    border-radius: 11px;
    background: #fff;
    font-size: 20px;
}

.gopay-recommendation-head h2 {
    margin: 0 0 3px !important;
    font-size: 16px !important;
    font-weight: 650;
    color: #172033;
}

.gopay-recommendation-head p {
    margin: 0;
    color: #657087;
    font-size: 12px;
}

.gopay-recommendation-body {
    padding: 20px;
}

.gopay-recommendation-body > p {
    margin: 0 0 10px;
    color: #334155;
    font-size: 13px;
}

.gopay-recommendation-list {
    margin: 0;
    padding-left: 20px;
    color: #526074;
    font-size: 13px;
    line-height: 1.75;
}

.gopay-hybrid-box {
    margin-top: 18px;
    padding: 15px 16px;
    border: 1px solid #cbd9ee;
    border-radius: 10px;
    background: #f4f8fe;
}

.gopay-hybrid-box > strong {
    color: #214989;
    font-size: 13px;
}

.gopay-hybrid-box > p {
    margin: 7px 0 0;
    color: #526074;
    font-size: 12px;
    line-height: 1.7;
}

.gopay-hybrid-example {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 12px;
}

.gopay-hybrid-example span {
    padding: 9px 10px;
    border: 1px solid #d9e3f2;
    border-radius: 8px;
    background: #fff;
    color: #526074;
    font-size: 11px;
}

.gopay-payment-settings {
    margin-top: 18px;
    border-top: 1px solid #e1e6ed;
    padding-top: 8px;
}

.gopay-setting-row {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 13px 0;
    border-bottom: 1px solid #edf0f4;
}

.gopay-setting-row strong,
.gopay-setting-row small {
    display: block;
}

.gopay-setting-row strong {
    color: #172033;
    font-size: 13px;
    font-weight: 600;
}

.gopay-setting-row small {
    margin-top: 4px;
    color: #7a8493;
    font-size: 11px;
    line-height: 1.55;
}

.gopay-payment-settings > .btn {
    margin-top: 14px;
}

.gopay-switch {
    position: relative;
    flex: 0 0 44px;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.gopay-switch input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.gopay-switch span {
    position: absolute;
    inset: 0;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    background: #e9edf2;
    transition: .18s ease;
}

.gopay-switch span::after {
    content: "";
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(23, 32, 51, .2);
    transition: .18s ease;
}

.gopay-switch input:checked + span {
    border-color: #315fae;
    background: #315fae;
}

.gopay-switch input:checked + span::after {
    transform: translateX(20px);
}

.gopay-switch input:focus-visible + span {
    box-shadow: 0 0 0 3px rgba(49, 95, 174, .14);
}

@media (max-width: 620px) {
    .gopay-recommendation-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .gopay-hybrid-example {
        grid-template-columns: 1fr;
    }

    .gopay-setting-row {
        align-items: flex-start;
    }
}
/* =========================================================
   PROVIDER SETUP GUIDE
   ========================================================= */
.provider-guide-card {
    margin-bottom: 18px;
    padding: 0 !important;
    overflow: hidden;
}

.provider-guide-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 20px 22px;
    border-bottom: 1px solid #d8dde6;
    background: #f8fafc;
}

.provider-guide-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid #cbd7ea;
    border-radius: 10px;
    background: #eef4fc;
    font-size: 20px;
}

.provider-guide-head h2 {
    margin: 0 0 6px !important;
    color: #172033;
    font-size: 17px !important;
    font-weight: 650;
    line-height: 1.35;
}

.provider-guide-head h2 span {
    color: #657087;
    font-size: 13px;
    font-weight: 500;
}

.provider-guide-head p {
    max-width: 900px;
    margin: 0;
    color: #657087;
    font-size: 12px;
    line-height: 1.7;
}

.provider-guide-body {
    padding: 20px 22px 22px;
}

.provider-guide-steps {
    margin: 0;
    padding-left: 22px;
    color: #334155;
}

.provider-guide-steps li {
    padding-left: 5px;
    margin-bottom: 11px;
    font-size: 12px;
    line-height: 1.7;
}

.provider-guide-steps li:last-child {
    margin-bottom: 0;
}

.provider-guide-steps a {
    color: #315fae;
    font-weight: 600;
    text-decoration: none;
}

.provider-guide-steps a:hover {
    text-decoration: underline;
}

.provider-guide-steps code {
    padding: 2px 5px;
    border: 1px solid #dce3ed;
    border-radius: 5px;
    background: #f6f8fb;
    color: #214989;
    font-size: 11px;
    word-break: break-all;
}

.provider-guide-warning {
    margin-top: 18px;
    padding: 14px 15px;
    border: 1px solid #d7e0ed;
    border-left: 3px solid #315fae;
    border-radius: 8px;
    background: #f7f9fc;
}

.provider-guide-warning strong {
    display: block;
    margin-bottom: 4px;
    color: #25344d;
    font-size: 12px;
}

.provider-guide-warning p {
    margin: 0;
    color: #657087;
    font-size: 11px;
    line-height: 1.7;
}

@media (max-width: 620px) {
    .provider-guide-head,
    .provider-guide-body {
        padding-left: 15px;
        padding-right: 15px;
    }

    .provider-guide-head {
        gap: 10px;
    }

    .provider-guide-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 17px;
    }

    .provider-guide-head h2 {
        font-size: 15px !important;
    }
}

/* =========================================================
   PROFILE · API KEY · POLISHED
   ========================================================= */
.profile-api-panel {
    margin-top: 18px;
    overflow: visible !important;
    background: #fff !important;
    border: 1px solid #d9e0e9 !important;
    border-radius: 12px !important;
}

.profile-api-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px;
    border-bottom: 1px solid #e1e6ed;
    background: #f8fafc;
    border-radius: 12px 12px 0 0;
}

.profile-api-header-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
}

.profile-api-header-icon {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    display: grid;
    place-items: center;
    border: 1px solid #c9d7ea;
    border-radius: 10px;
    background: #edf3fc;
    color: #315fae;
    font-size: 23px;
    font-weight: 700;
}

.profile-api-eyebrow,
.profile-api-modal-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: #315fae;
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .09em;
}

.profile-api-header h2 {
    margin: 0 0 4px !important;
    color: #172033;
    font-size: 18px !important;
    font-weight: 650;
}

.profile-api-header p {
    max-width: 760px;
    margin: 0;
    color: #657087;
    font-size: 11px;
    line-height: 1.6;
}

.profile-api-doc-button {
    min-height: 36px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    flex: 0 0 auto;
    padding: 8px 11px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    color: #315fae;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
}

.profile-api-doc-button:hover {
    border-color: #aebfd7;
    background: #f4f7fb;
}

.profile-api-panel-content {
    padding: 20px 22px 22px;
}

.profile-api-email-row {
    min-height: 54px;
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    padding: 10px 12px;
    border: 1px solid #dce3eb;
    border-radius: 9px;
    background: #fafbfd;
}

.profile-api-email-row > div:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.profile-api-email-row strong,
.profile-api-email-row span {
    display: block;
}

.profile-api-email-row strong {
    color: #25344d;
    font-size: 11px;
    font-weight: 650;
}

.profile-api-email-row span {
    margin-top: 2px;
    overflow: hidden;
    color: #788396;
    font-size: 10px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-api-email-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 800;
}

.profile-api-email-row.verified .profile-api-email-icon {
    background: #e9f7ef;
    color: #0f8f51;
}

.profile-api-email-row.unverified .profile-api-email-icon {
    background: #fbeceb;
    color: #b42318;
}

.profile-api-code-form.polished {
    display: grid;
    grid-template-columns: minmax(220px, 360px) auto;
    align-items: end;
    gap: 10px;
    margin: -5px 0 16px;
    padding: 12px;
    border: 1px solid #dce3eb;
    border-radius: 9px;
    background: #f8fafc;
}

.profile-api-code-form.polished label {
    margin: 0;
    font-size: 11px;
}

.profile-api-live-card {
    padding: 18px;
    border: 1px solid #d6dee9;
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 5px 18px rgba(25, 43, 70, .04);
}

.profile-api-live-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.profile-api-live-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.profile-api-live-title-row strong {
    color: #172033;
    font-size: 14px;
    font-weight: 650;
}

.profile-api-live-badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 3px 7px;
    border: 1px solid #bcd0ed;
    border-radius: 6px;
    background: #edf4ff;
    color: #315fae;
    font-size: 9px;
    font-weight: 800;
    letter-spacing: .06em;
}

.profile-api-live-card-head p {
    margin: 7px 0 0;
    color: #6d7889;
    font-size: 10px;
    line-height: 1.55;
}

.profile-api-live-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 5px 8px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
}

.profile-api-live-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.profile-api-live-status.active {
    background: #eaf7f0;
    color: #0f8f51;
}

.profile-api-live-status.active i {
    background: #16a05d;
}

.profile-api-live-status.empty {
    background: #eef1f5;
    color: #657087;
}

.profile-api-live-status.empty i {
    background: #9ba4b1;
}

.profile-api-key-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    min-height: 66px;
    padding: 11px 12px;
    border: 1px solid #dce3ed;
    border-radius: 9px;
    background: #f7f9fc;
}

.profile-api-key-box.revealed {
    border-color: #aebfda;
    background: #f2f6fc;
}

.profile-api-key-box-copy {
    min-width: 0;
    flex: 1;
}

.profile-api-key-box-copy > span {
    display: block;
    margin-bottom: 5px;
    color: #8a94a3;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .09em;
}

.profile-api-key-box code {
    display: block;
    overflow: hidden;
    color: #214989;
    font-size: 12px;
    font-weight: 600;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-api-key-buttons {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
    flex: 0 0 auto;
}

.profile-api-key-buttons form {
    margin: 0;
}

.profile-api-primary-btn,
.profile-api-secondary-btn {
    min-height: 34px;
    padding: 7px 10px !important;
    border-radius: 7px !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.profile-api-secondary-btn {
    border-color: #cbd5e1 !important;
    background: #fff !important;
    color: #315fae !important;
}

.profile-api-secondary-btn:hover {
    border-color: #aebfd7 !important;
    background: #f4f7fb !important;
}

.profile-api-details {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 12px;
}

.profile-api-details > div {
    padding: 10px 11px;
    border: 1px solid #e3e8ef;
    border-radius: 8px;
    background: #fbfcfd;
}

.profile-api-details span,
.profile-api-details strong {
    display: block;
}

.profile-api-details span {
    margin-bottom: 3px;
    color: #8a94a3;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.profile-api-details strong {
    color: #334155;
    font-size: 10px;
    font-weight: 600;
}

.profile-api-legacy-note.polished {
    margin-top: 12px;
    padding: 10px 11px;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #f8fafc;
    color: #657087;
    font-size: 10px;
    line-height: 1.6;
}

.profile-api-security-card {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-top: 14px;
    padding: 13px 14px;
    border: 1px solid #dce3eb;
    border-left: 3px solid #315fae;
    border-radius: 8px;
    background: #f7f9fc;
}

.profile-api-security-icon {
    width: 27px;
    height: 27px;
    flex: 0 0 27px;
    display: grid;
    place-items: center;
    border-radius: 7px;
    background: #eaf1fb;
    color: #315fae;
    font-size: 15px;
}

.profile-api-security-card strong {
    display: block;
    margin-bottom: 3px;
    color: #25344d;
    font-size: 11px;
    font-weight: 650;
}

.profile-api-security-card p {
    margin: 0;
    color: #687487;
    font-size: 10px;
    line-height: 1.6;
}

/* Modal */
body.profile-api-modal-open {
    overflow: hidden;
}

.profile-api-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 18px;
}

.profile-api-modal.is-open {
    display: flex;
}

.profile-api-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, .54);
    backdrop-filter: blur(2px);
}

.profile-api-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(100%, 455px);
    overflow: hidden;
    border: 1px solid #d4dce7;
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 22px 60px rgba(15, 23, 42, .22);
}

.profile-api-modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    padding: 17px 18px 14px;
    border-bottom: 1px solid #e3e8ef;
    background: #f8fafc;
}

.profile-api-modal-head h3 {
    margin: 0;
    color: #172033;
    font-size: 16px;
    font-weight: 650;
}

.profile-api-modal-close {
    width: 31px;
    height: 31px;
    display: grid;
    place-items: center;
    border: 1px solid #d7dee8;
    border-radius: 7px;
    background: #fff;
    color: #657087;
    cursor: pointer;
    font-size: 18px;
    line-height: 1;
}

.profile-api-modal-close:hover {
    background: #f1f4f8;
    color: #172033;
}

.profile-api-modal-form {
    padding: 17px 18px 18px;
}

.profile-api-modal-copy {
    margin: 0 0 14px;
    color: #657087;
    font-size: 11px;
    line-height: 1.6;
}

.profile-api-modal-form label {
    margin: 0;
    color: #334155;
    font-size: 11px;
    font-weight: 600;
}

.profile-api-modal-form input[type="password"] {
    margin-top: 6px;
}

.profile-api-modal-forgot {
    display: inline-block;
    margin-top: 8px;
    color: #315fae;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.profile-api-modal-forgot:hover {
    text-decoration: underline;
}

.profile-api-modal-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #e7ebf0;
}

.profile-api-modal-actions .btn {
    min-width: 88px;
}

.profile-api-rotate-alert {
    margin-bottom: 14px;
    padding: 11px 12px;
    border: 1px solid #efc8c5;
    border-radius: 8px;
    background: #fff6f5;
}

.profile-api-rotate-alert strong,
.profile-api-rotate-alert span {
    display: block;
}

.profile-api-rotate-alert strong {
    margin-bottom: 3px;
    color: #9f2f27;
    font-size: 11px;
}

.profile-api-rotate-alert span {
    color: #7a4a46;
    font-size: 10px;
    line-height: 1.55;
}

@media (max-width: 720px) {
    .profile-api-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .profile-api-doc-button {
        width: 100%;
        justify-content: center;
    }

    .profile-api-key-box {
        align-items: stretch;
        flex-direction: column;
    }

    .profile-api-key-buttons {
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .profile-api-details {
        grid-template-columns: 1fr;
    }

    .profile-api-code-form.polished {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .profile-api-header,
    .profile-api-panel-content {
        padding-left: 14px;
        padding-right: 14px;
    }

    .profile-api-header-copy {
        align-items: flex-start;
    }

    .profile-api-header-icon {
        width: 36px;
        height: 36px;
        flex-basis: 36px;
        font-size: 19px;
    }

    .profile-api-live-card {
        padding: 14px;
    }

    .profile-api-live-card-head {
        flex-direction: column;
    }

    .profile-api-key-buttons,
    .profile-api-key-buttons .btn,
    .profile-api-key-buttons form {
        width: 100%;
    }

    .profile-api-key-buttons .btn {
        justify-content: center;
    }

    .profile-api-modal-actions {
        flex-direction: column-reverse;
    }

    .profile-api-modal-actions .btn {
        width: 100%;
    }
}
/* =========================================================
   PAYKITA SURFACE CARD SYSTEM
   Reusable soft rounded card style
   ========================================================= */
.surface-card {
    background: #ffffff !important;
    border: 1px solid #d9e0e9 !important;
    border-radius: 12px !important;
    box-shadow: 0 7px 22px rgba(23, 32, 51, .045) !important;
    overflow: hidden;
}

.surface-card-head {
    min-height: 88px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
    border-bottom: 1px solid #e1e6ed;
    background: #f8fafc;
}

.surface-card-head-copy {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 13px;
}

.surface-card-icon {
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    display: grid;
    place-items: center;
    border: 1px solid #c9d7ea;
    border-radius: 10px;
    background: #edf3fc;
    color: #315fae;
    font-size: 18px;
    font-weight: 700;
}

.surface-card-eyebrow {
    display: block;
    margin-bottom: 2px;
    color: #315fae;
    font-size: 8px;
    font-weight: 750;
    letter-spacing: .09em;
}

.surface-card-head h2 {
    margin: 0 0 4px !important;
    color: #172033;
    font-size: 15px !important;
    font-weight: 650;
}

.surface-card-head p {
    max-width: 580px;
    margin: 0;
    color: #657087;
    font-size: 10px;
    line-height: 1.55;
}

.surface-card-body {
    padding: 18px 20px 20px;
}

.surface-card-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    min-height: 26px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 9px;
    font-weight: 650;
}

.surface-card-status i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.surface-card-status.active {
    background: #eaf7f0;
    color: #0f8f51;
}

.surface-card-status.active i {
    background: #16a05d;
}

.surface-card-status.setup {
    background: #edf3fc;
    color: #315fae;
}

.surface-card-status.setup i {
    background: #315fae;
}

.surface-card-status.inactive {
    background: #eef1f5;
    color: #657087;
}

.surface-card-status.inactive i {
    background: #9ba4b1;
}

.profile-security-grid {
    margin-top: 0;
}

.profile-security-card {
    margin-bottom: 0 !important;
}

.profile-security-form {
    gap: 12px !important;
}

.profile-security-form label {
    margin: 0;
    color: #334155;
    font-size: 10px;
    font-weight: 600;
}

.profile-security-form input {
    margin-top: 6px;
    border-radius: 8px !important;
    background: #fbfcfd !important;
}

.profile-security-form input:focus {
    background: #fff !important;
}

.profile-security-submit {
    width: 100%;
    min-height: 38px;
    margin-top: 2px;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 650 !important;
}

.surface-card-footer-link {
    margin-top: 13px;
    padding-top: 12px;
    border-top: 1px solid #e5e9ef;
}

.surface-card-footer-link a {
    color: #315fae;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.surface-card-footer-link a:hover {
    text-decoration: underline;
}

.surface-info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 10px 11px;
    border: 1px solid #e0e6ed;
    border-radius: 8px;
    background: #fafbfd;
}

.surface-info-row span {
    color: #7c8798;
    font-size: 9px;
}

.surface-info-row strong {
    color: #334155;
    font-size: 10px;
    font-weight: 600;
}

.surface-action-box {
    padding: 14px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fafbfd;
}

.surface-action-box-head {
    margin-bottom: 13px;
}

.surface-action-box-head strong,
.surface-action-box-head span {
    display: block;
}

.surface-action-box-head strong {
    margin-bottom: 3px;
    color: #25344d;
    font-size: 11px;
    font-weight: 650;
}

.surface-action-box-head span {
    color: #6f7a8b;
    font-size: 9px;
    line-height: 1.55;
}

.surface-empty-state {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    padding: 13px 14px;
    border: 1px solid #dfe5ec;
    border-radius: 9px;
    background: #fafbfd;
}

.surface-empty-icon {
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #edf3fc;
    color: #315fae;
    font-size: 16px;
}

.surface-empty-state strong {
    display: block;
    margin-bottom: 3px;
    color: #25344d;
    font-size: 11px;
    font-weight: 650;
}

.surface-empty-state p {
    margin: 0;
    color: #6f7a8b;
    font-size: 9px;
    line-height: 1.55;
}

.surface-twofa-setup {
    display: grid;
    gap: 12px;
}

.surface-twofa-setup .twofa-qr {
    width: 170px;
    max-width: 100%;
    margin: 0 auto;
    border: 1px solid #dce3eb;
    border-radius: 10px;
    background: #fff;
    padding: 8px;
}

.surface-twofa-secret {
    padding: 10px 11px;
    border: 1px solid #dce3eb;
    border-radius: 8px;
    background: #fff;
}

.surface-twofa-secret span,
.surface-twofa-secret code {
    display: block;
}

.surface-twofa-secret span {
    margin-bottom: 4px;
    color: #8791a0;
    font-size: 8px;
    font-weight: 650;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.surface-twofa-secret code {
    overflow-wrap: anywhere;
    color: #214989;
    font-size: 10px;
    font-weight: 600;
}

.surface-secondary-full {
    width: 100%;
    min-height: 36px;
    border-radius: 8px !important;
    font-size: 10px !important;
}

/* Main profile card also adopts the same visual language */
.profile-main-panel.surface-card {
    border-radius: 12px !important;
}

.profile-main-panel.surface-card > .panel-head {
    min-height: 38px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #e1e6ed !important;
}

.profile-main-panel.surface-card > .panel-head .panel-badge {
    color: #315fae !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .08em !important;
}

.profile-main-panel.surface-card .profile-avatar {
    border-color: #cfd9e6;
    border-radius: 12px;
    box-shadow: none;
}

.profile-main-panel.surface-card .profile-info-grid {
    overflow: hidden;
    border: 1px solid #dce3eb;
    border-radius: 9px;
}

.profile-main-panel.surface-card .profile-info-item {
    background: #fbfcfd;
    border-color: #e1e6ed;
}

@media (max-width: 900px) {
    .profile-security-grid {
        grid-template-columns: 1fr !important;
    }
}

@media (max-width: 560px) {
    .surface-card-head {
        align-items: flex-start;
        flex-direction: column;
        min-height: 0;
        padding: 15px;
    }

    .surface-card-body {
        padding: 15px;
    }

    .surface-card-status {
        margin-left: 51px;
    }
}
/* ==========================================================
   PAYKITA PRO CHECKOUT FINAL
   Menyamakan checkout dengan UI final dashboard.
   ========================================================== */
.checkout-pro-wrap {
    min-height: 100vh !important;
    padding: 42px 18px !important;
    background:
        radial-gradient(circle at 50% 0%, rgba(49, 95, 174, .07), transparent 34%),
        #f4f6f8 !important;
}

.checkout-pro-card {
    width: min(430px, 100%) !important;
    overflow: hidden !important;
    background: #fff !important;
    border: 1px solid #d8dde6 !important;
    border-radius: 0 !important;
    box-shadow: 0 18px 48px rgba(28, 45, 76, .11) !important;
}

.checkout-pro-topbar {
    min-height: 58px !important;
    padding: 11px 15px !important;
    background: #111827 !important;
    border-bottom: 1px solid #263247 !important;
}

.checkout-pro-brand {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.checkout-pro-brand-mark {
    width: 31px;
    height: 31px;
    flex: 0 0 31px;
    display: grid;
    place-items: center;
    background: #315fae;
    border: 1px solid #4774c3;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
}

.checkout-pro-topbar .retro-brand {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    letter-spacing: -.01em;
}

.checkout-pro-topbar .retro-topbar-right {
    color: #9fb0c9 !important;
    font-size: 8px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}

.checkout-pro-body {
    padding: 20px !important;
    background: #fff !important;
}

.checkout-pro-merchant-block {
    padding-bottom: 17px;
    margin-bottom: 17px;
    border-bottom: 1px solid #e1e5eb;
}

.checkout-pro-body .retro-label {
    margin-bottom: 5px !important;
    color: #7a8699 !important;
    font-size: 9px !important;
    font-weight: 600;
    letter-spacing: .07em;
}

.checkout-pro-body .retro-merchant {
    margin-bottom: 12px !important;
    color: #172033 !important;
    font-size: 15px !important;
    font-weight: 650 !important;
    line-height: 1.35;
    overflow-wrap: anywhere;
}

.checkout-pro-body .retro-amount {
    margin: 0 0 7px !important;
    color: #315fae !important;
    font-size: 30px !important;
    font-weight: 700 !important;
    line-height: 1.05 !important;
    letter-spacing: -.035em;
}

.checkout-pro-body .retro-order-id {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 !important;
    color: #748095 !important;
    font-size: 9px !important;
    line-height: 1.5;
}

.checkout-pro-body .retro-order-id strong {
    min-width: 0;
    color: #4e5b70 !important;
    font-weight: 500 !important;
    overflow-wrap: anywhere;
}

.checkout-pro-dot {
    color: #a4adbb;
}

.checkout-pro-info {
    margin-bottom: 14px !important;
    padding: 11px 12px !important;
    background: #edf3ff !important;
    border: 1px solid #cfddf5 !important;
    color: #42516a !important;
    font-size: 10px !important;
    line-height: 1.6;
}

.checkout-pro-info strong {
    color: #214989 !important;
}

.checkout-pro-qr-box {
    padding: 14px !important;
    background: #fff !important;
    border: 1px solid #d8dde6 !important;
}

.checkout-pro-qr-box .retro-qr-image {
    width: 100% !important;
    max-width: 285px !important;
}

.checkout-pro-secondary-btn {
    width: 100% !important;
    margin-top: 10px !important;
    min-height: 39px !important;
    background: #fff !important;
    border: 1px solid #c9d1dd !important;
    color: #344158 !important;
    font-size: 10px !important;
    font-weight: 550 !important;
}

.checkout-pro-secondary-btn:hover {
    background: #f7f9fc !important;
    border-color: #aeb8c7 !important;
}

.checkout-pro-steps {
    margin: 16px 0 !important;
    padding-left: 18px !important;
    color: #536078 !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
}

.checkout-pro-steps li {
    margin-bottom: 6px !important;
}

.checkout-pro-timer {
    margin-bottom: 9px !important;
    padding: 9px 11px !important;
    background: #315fae !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.checkout-pro-status {
    padding: 10px 11px !important;
    border: 1px solid #d8dde6 !important;
    background: #f7f9fc !important;
    color: #657087 !important;
    font-size: 10px !important;
    font-weight: 500 !important;
}

.checkout-pro-status.paid {
    background: #edf8f2 !important;
    border-color: #b9dfc8 !important;
    color: #0f8d50 !important;
}

.checkout-pro-success {
    margin: 0 !important;
    padding: 20px 16px 16px !important;
    background: #fff !important;
    border: 1px solid #d8dde6 !important;
    text-align: center;
}

.checkout-pro-check {
    width: 64px !important;
    height: 64px !important;
    margin-bottom: 2px;
    background: #0f9f58 !important;
    color: #fff !important;
    font-size: 30px !important;
    font-weight: 600 !important;
    box-shadow: 0 8px 20px rgba(15, 159, 88, .16) !important;
}

.checkout-pro-success .checkout-success-title {
    margin-top: 5px !important;
    color: #172033 !important;
    font-size: 19px !important;
    font-weight: 650 !important;
    letter-spacing: -.02em;
}

.checkout-pro-success .checkout-success-desc {
    max-width: 330px;
    margin: 6px auto 16px !important;
    color: #657087 !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
}

.checkout-pro-summary {
    margin: 0 0 14px !important;
    padding: 4px 13px !important;
    background: #f8fafc !important;
    border: 1px solid #dfe4eb !important;
    text-align: left !important;
}

.checkout-pro-summary .success-summary-row {
    min-height: 38px;
    padding: 9px 0 !important;
    display: grid !important;
    grid-template-columns: 82px minmax(0, 1fr) !important;
    align-items: start !important;
    gap: 10px !important;
    border-bottom: 1px solid #e4e8ee !important;
    font-size: 10px !important;
}

.checkout-pro-summary .success-summary-row:last-child {
    border-bottom: 0 !important;
}

.checkout-pro-summary .success-summary-row > span {
    color: #7a8699 !important;
}

.checkout-pro-summary .success-summary-row > strong {
    min-width: 0;
    color: #172033 !important;
    font-weight: 600 !important;
    text-align: right;
    overflow-wrap: anywhere;
}

.checkout-pro-summary .success-summary-row .success-text {
    color: #0f9f58 !important;
}

.checkout-pro-order-value {
    font-size: 9px !important;
    line-height: 1.55;
}

.checkout-pro-primary-btn {
    width: 100% !important;
    min-height: 42px !important;
    background: #315fae !important;
    border: 1px solid #214989 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
}

.checkout-pro-primary-btn:hover {
    background: #214989 !important;
    border-color: #173b73 !important;
}

.checkout-pro-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: 16px !important;
    color: #8490a3 !important;
    font-size: 9px !important;
}

.checkout-pro-security-dot {
    width: 6px;
    height: 6px;
    border-radius: 999px;
    background: #0f9f58;
}

/* Hilangkan pesan sukses lama agar tidak muncul dua kali. */
.checkout-pro-card .paid-message {
    display: none !important;
}

@media (max-width: 520px) {
    .checkout-pro-wrap {
        padding: 14px 10px !important;
        align-items: start !important;
    }

    .checkout-pro-card {
        width: 100% !important;
    }

    .checkout-pro-body {
        padding: 16px !important;
    }

    .checkout-pro-summary .success-summary-row {
        grid-template-columns: 72px minmax(0, 1fr) !important;
    }
}

/* =========================================================
   PAYKITA GLOBAL SURFACE UI · FINAL OVERRIDE
   One visual language across merchant UI
   ========================================================= */
:root {
    --surface-bg: #f4f6f8;
    --surface-card: #ffffff;
    --surface-soft: #f8fafc;
    --surface-soft-2: #fbfcfd;
    --surface-line: #d9e0e9;
    --surface-line-soft: #e5e9ef;
    --surface-line-strong: #cbd5e1;
    --surface-text: #172033;
    --surface-muted: #657087;
    --surface-blue: #315fae;
    --surface-blue-dark: #214989;
    --surface-blue-soft: #edf3fc;
    --surface-green: #0f8f51;
    --surface-green-soft: #eaf7f0;
    --surface-red: #b42318;
    --surface-red-soft: #fff2f0;
    --surface-radius: 12px;
    --surface-radius-small: 9px;
    --surface-shadow: 0 7px 22px rgba(23, 32, 51, .045);
    --surface-shadow-hover: 0 12px 28px rgba(23, 32, 51, .065);
}

/* ---------- Canvas / page rhythm ---------- */
body {
    background: var(--surface-bg) !important;
    color: var(--surface-text) !important;
}

.content {
    padding-top: 30px !important;
}

.page-head {
    margin-bottom: 22px !important;
}

.page-head h1 {
    color: var(--surface-text) !important;
    font-weight: 650 !important;
    letter-spacing: -.028em !important;
}

.page-head p,
.page-head .muted {
    color: var(--surface-muted) !important;
}

/* ---------- Global Surface Card ---------- */
.card,
.content .card,
.profile-panel,
.qris-builder-panel,
.provider-guide-card,
.api-section,
.login-card,
.checkout-card:not(.retro-checkout-card),
.surface-card {
    border: 1px solid var(--surface-line) !important;
    border-radius: var(--surface-radius) !important;
    background: var(--surface-card) !important;
    box-shadow: var(--surface-shadow) !important;
}

.card,
.profile-panel,
.qris-builder-panel,
.provider-guide-card,
.api-section,
.login-card,
.surface-card {
    transition: border-color .16s ease, box-shadow .16s ease;
}

.card:hover,
.provider-guide-card:hover,
.api-section:hover {
    border-color: #ccd6e3 !important;
}

/* no harsh rectangular blue strip on internal cards */
.panel-head,
.dashboard-section-head,
.provider-guide-head,
.profile-api-header,
.surface-card-head {
    background: var(--surface-soft) !important;
    color: var(--surface-text) !important;
    border-bottom: 1px solid var(--surface-line-soft) !important;
    box-shadow: none !important;
}

.panel-head {
    min-height: 48px !important;
    padding: 13px 16px !important;
    border-radius: var(--surface-radius) var(--surface-radius) 0 0 !important;
}

.panel-badge {
    color: var(--surface-blue) !important;
    font-size: 10px !important;
    font-weight: 750 !important;
    letter-spacing: .055em !important;
}

.card > h2:first-child,
.card > h3:first-child,
.api-section > h2:first-child {
    color: var(--surface-text) !important;
    font-weight: 650 !important;
}

/* ---------- Dashboard ---------- */
.dashboard-metrics {
    gap: 12px !important;
}

.dashboard-metrics .metric {
    min-height: 112px !important;
    padding: 18px !important;
    border-radius: var(--surface-radius) !important;
    overflow: hidden !important;
}

.dashboard-metrics .metric::before {
    display: none !important;
}

.dashboard-metrics .metric > span:first-child {
    color: var(--surface-muted) !important;
    font-size: 10px !important;
    font-weight: 550 !important;
}

.dashboard-metrics .metric > strong {
    margin-top: 14px !important;
    color: var(--surface-text) !important;
    font-size: clamp(24px, 2vw, 32px) !important;
    font-weight: 680 !important;
}

.dashboard-chart-card,
.delivery-record-card {
    border-radius: var(--surface-radius) !important;
    overflow: hidden !important;
}

.dashboard-section-head {
    padding: 17px 19px !important;
}

.dashboard-kicker {
    color: var(--surface-blue) !important;
    font-family: inherit !important;
    font-size: 9px !important;
    font-weight: 750 !important;
    letter-spacing: .075em !important;
}

.dashboard-section-head h2 {
    color: var(--surface-text) !important;
    font-size: 14px !important;
    font-weight: 650 !important;
}

.dashboard-chart {
    background: #fff !important;
}

.dashboard-chart-track {
    border-bottom-color: var(--surface-line) !important;
}

.dashboard-chart-track::before,
.dashboard-chart-track::after {
    border-top-color: #edf1f5 !important;
}

.dashboard-chart-bar.total {
    background: #dce7f7 !important;
    border-color: #bfd0ea !important;
}

.dashboard-chart-bar.paid {
    background: var(--surface-blue) !important;
    border-color: var(--surface-blue) !important;
}

.dashboard-filters {
    background: #fff !important;
    border-bottom-color: var(--surface-line-soft) !important;
}

.dashboard-filters a {
    border-radius: 8px !important;
}

.dashboard-filters a.active {
    border-color: #c6d5ea !important;
    background: var(--surface-blue-soft) !important;
    color: var(--surface-blue-dark) !important;
}

.dashboard-export summary,
.dashboard-pagination-buttons a,
.dashboard-pagination-buttons span {
    border-color: var(--surface-line-strong) !important;
    border-radius: 8px !important;
}

.dashboard-export-menu {
    border-color: var(--surface-line) !important;
    border-radius: 10px !important;
    box-shadow: 0 16px 38px rgba(23, 32, 51, .12) !important;
}

/* ---------- Tables ---------- */
.table-wrap,
.dashboard-table-wrap {
    border-color: var(--surface-line) !important;
}

table {
    background: #fff;
}

thead th,
.dashboard-orders-table thead th {
    background: var(--surface-soft) !important;
    color: #6d7889 !important;
    border-bottom: 1px solid var(--surface-line) !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .045em !important;
}

tbody td {
    border-bottom-color: #e8ecf1 !important;
}

tbody tr:hover td {
    background: #fbfdff !important;
}

/* ---------- Forms ---------- */
label {
    color: #334155 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

input,
textarea,
select,
.content input,
.content textarea,
.content select,
.login-card input,
.login-card textarea,
.login-card select {
    min-height: 40px;
    border: 1px solid var(--surface-line-strong) !important;
    border-radius: 8px !important;
    background: var(--surface-soft-2) !important;
    color: var(--surface-text) !important;
    box-shadow: none !important;
}

textarea {
    min-height: 88px;
}

input:hover,
textarea:hover,
select:hover {
    border-color: #b7c3d1 !important;
}

input:focus,
textarea:focus,
select:focus,
.content input:focus,
.content textarea:focus,
.content select:focus {
    border-color: #7899cf !important;
    background: #fff !important;
    box-shadow: 0 0 0 3px rgba(49, 95, 174, .09) !important;
}

/* ---------- Buttons ---------- */
.btn,
.content .btn,
.login-card .btn {
    min-height: 38px;
    border-radius: 8px !important;
    font-size: 10px !important;
    font-weight: 620 !important;
    box-shadow: none !important;
}

.btn:not(.btn-primary):not(.btn-danger),
.content .btn:not(.btn-primary):not(.btn-danger) {
    border-color: var(--surface-line-strong) !important;
    background: #fff !important;
    color: #334155 !important;
}

.btn:not(.btn-primary):not(.btn-danger):hover {
    border-color: #aebdce !important;
    background: #f6f8fb !important;
}

.btn-primary,
.content .btn-primary,
.login-card .btn-primary,
.qris-wide-btn {
    background: var(--surface-blue) !important;
    border-color: var(--surface-blue) !important;
    color: #fff !important;
}

.btn-primary:hover,
.content .btn-primary:hover,
.login-card .btn-primary:hover,
.qris-wide-btn:hover {
    background: var(--surface-blue-dark) !important;
    border-color: var(--surface-blue-dark) !important;
}

.btn-danger {
    border-color: #efc2bd !important;
    background: var(--surface-red-soft) !important;
    color: var(--surface-red) !important;
}

.qris-wide-btn,
.qris-delete-btn {
    border-radius: 8px !important;
}

/* ---------- Status pills ---------- */
.status-chip,
.badge,
.mode-tag,
.surface-card-status,
.profile-api-live-status {
    border-radius: 999px !important;
    box-shadow: none !important;
}

.status-chip {
    border: 1px solid var(--surface-line) !important;
    padding: 7px 10px !important;
    font-size: 9px !important;
}

.status-chip.ok,
.badge.paid {
    background: var(--surface-green-soft) !important;
    border-color: #c5e5d2 !important;
    color: var(--surface-green) !important;
}

.status-chip.neutral,
.badge.neutral {
    background: #f1f4f7 !important;
    border-color: #d8e0e8 !important;
    color: #5e6b7e !important;
}

.badge.pending,
.status-chip.warn,
.status-chip.info {
    background: var(--surface-blue-soft) !important;
    border-color: #c7d7ed !important;
    color: var(--surface-blue-dark) !important;
}

.badge.expired,
.badge.cancelled,
.status-chip.bad.error {
    background: var(--surface-red-soft) !important;
    border-color: #efc9c5 !important;
    color: var(--surface-red) !important;
}

/* ---------- QRIS Checkout ---------- */
.qris-builder-grid {
    gap: 16px !important;
}

.qris-builder-panel {
    overflow: hidden !important;
    border-radius: var(--surface-radius) !important;
}

.qris-builder-panel > :not(.panel-head) {
    padding-left: 18px !important;
    padding-right: 18px !important;
}

.qris-active-provider-box,
.provider-qris-box,
.qris-order-preview,
.qris-inline-empty,
.qris-auto-detector,
.provider-standby-note {
    border: 1px solid var(--surface-line) !important;
    border-radius: var(--surface-radius-small) !important;
    background: var(--surface-soft-2) !important;
    box-shadow: none !important;
}

.qris-active-provider-box {
    margin-top: 15px !important;
}

.qris-active-provider-box span,
.qris-pay-head {
    color: var(--surface-muted) !important;
}

.qris-active-provider-box strong {
    color: var(--surface-text) !important;
}

.qris-status-line {
    color: var(--surface-green) !important;
}

.qris-pay-amount {
    color: var(--surface-blue) !important;
    font-size: 34px !important;
    font-weight: 700 !important;
    letter-spacing: -.035em !important;
}

.qris-order-preview {
    margin-bottom: 18px !important;
}

.qris-live-image {
    border-radius: 10px !important;
}

/* ---------- Provider pages: Shopee / GoPay ---------- */
.provider-guide-card {
    overflow: hidden !important;
}

.provider-guide-head {
    border-radius: var(--surface-radius) var(--surface-radius) 0 0 !important;
}

.provider-guide-icon {
    border-color: #c9d7ea !important;
    border-radius: 10px !important;
    background: var(--surface-blue-soft) !important;
}

.provider-guide-warning,
.gopay-recommendation,
.gopay-payment-settings,
.provider-qris-box,
.provider-standby-note {
    border-radius: var(--surface-radius-small) !important;
    box-shadow: none !important;
}

.provider-guide-warning {
    background: var(--surface-soft) !important;
    border-color: var(--surface-line) !important;
    border-left: 3px solid var(--surface-blue) !important;
}

.provider-panel-body {
    padding: 18px !important;
}

.provider-details {
    overflow: hidden;
    border: 1px solid var(--surface-line) !important;
    border-radius: var(--surface-radius-small) !important;
    background: var(--surface-soft-2) !important;
}

.provider-qris-status-row {
    padding-bottom: 10px;
    border-bottom: 1px solid var(--surface-line-soft);
}

/* ---------- Documentation ---------- */
.api-hero {
    gap: 16px !important;
}

.api-section,
.api-hero > .card {
    overflow: hidden !important;
}

.api-section {
    padding: 18px !important;
}

.api-nav {
    gap: 7px !important;
}

.api-nav a {
    border-color: var(--surface-line) !important;
    border-radius: 8px !important;
    background: #fff !important;
    color: #536177 !important;
    font-size: 10px !important;
    font-weight: 600 !important;
}

.api-nav a:hover {
    border-color: #bac8d8 !important;
    background: var(--surface-blue-soft) !important;
    color: var(--surface-blue-dark) !important;
}

.api-note,
.status-box,
.key-help > div,
.mini-list > div {
    border-color: var(--surface-line) !important;
    border-radius: var(--surface-radius-small) !important;
    background: var(--surface-soft) !important;
}

.api-note.warning {
    /* warning is blue-gray instead of amber */
    border-color: #cbd8ea !important;
    background: #f4f7fc !important;
    color: #435775 !important;
}

.api-note.success {
    border-color: #c5e5d2 !important;
    background: var(--surface-green-soft) !important;
    color: var(--surface-green) !important;
}

pre {
    border: 1px solid #dbe2eb !important;
    border-radius: 9px !important;
    background: #111827 !important;
}

/* ---------- Profile ---------- */
.profile-main-panel,
.profile-api-panel,
.profile-security-card,
.surface-card {
    border-radius: var(--surface-radius) !important;
}

.profile-info-grid,
.profile-api-live-card,
.profile-api-key-box,
.profile-api-details > div,
.profile-api-email-row,
.profile-api-security-card,
.surface-action-box,
.surface-empty-state {
    border-radius: var(--surface-radius-small) !important;
}

/* ---------- Settings / Order detail / generic grid cards ---------- */
.grid-2 > .card,
.grid-2 > section.card {
    align-self: start;
}

.details {
    overflow: hidden;
    border: 1px solid var(--surface-line) !important;
    border-radius: var(--surface-radius-small) !important;
    background: #fff;
}

.details > div {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-bottom: 1px solid var(--surface-line-soft) !important;
}

.details > div:last-child {
    border-bottom: 0 !important;
}

.details dt {
    color: var(--surface-muted) !important;
}

.details dd {
    color: var(--surface-text) !important;
}

/* ---------- Auth pages ---------- */
.login-wrap {
    background:
        radial-gradient(circle at 20% 0%, rgba(49, 95, 174, .08), transparent 34%),
        var(--surface-bg) !important;
}

.login-card {
    width: min(460px, calc(100vw - 28px)) !important;
    padding: 24px !important;
    border-radius: 16px !important;
    box-shadow: 0 18px 50px rgba(23, 32, 51, .09) !important;
}

.login-card .brand-mark {
    border: 1px solid #cbd8ea !important;
    border-radius: 10px !important;
    background: var(--surface-blue-soft) !important;
    color: var(--surface-blue-dark) !important;
}

.login-card h1 {
    color: var(--surface-text) !important;
}

.auth-link,
.auth-resend,
.auth-resend-form .link-button {
    color: var(--surface-blue) !important;
}

/* ---------- Public checkout ---------- */
.retro-checkout-wrap {
    background: var(--surface-bg) !important;
}

.retro-checkout-card {
    overflow: hidden;
    border: 1px solid var(--surface-line) !important;
    border-radius: 14px !important;
    background: #fff !important;
    box-shadow: 0 18px 50px rgba(23, 32, 51, .10) !important;
}

.retro-topbar {
    min-height: 46px !important;
    padding: 0 16px !important;
    background: var(--surface-blue) !important;
    border-bottom: 0 !important;
}

.retro-body {
    background: #fff !important;
}

.retro-alert,
.retro-qr-box,
.retro-status-box,
.checkout-success-summary {
    border-radius: 9px !important;
}

.retro-amount {
    color: var(--surface-blue) !important;
}

.checkout-success-card {
    border-radius: var(--surface-radius) !important;
}

/* ---------- Landing page surface language ---------- */
.hero-terminal,
.stat-card,
.step-card,
.feature-card,
.provider-card {
    border: 1px solid var(--surface-line) !important;
    border-radius: var(--surface-radius) !important;
    box-shadow: var(--surface-shadow) !important;
}

.stat-card,
.step-card,
.feature-card,
.provider-card {
    background: #fff !important;
}

.hero-terminal {
    overflow: hidden;
}

.feature-icon,
.provider-icon,
.step-no {
    border-radius: 9px !important;
}

.landing-btn {
    border-radius: 8px !important;
}

.landing-btn.primary {
    background: var(--surface-blue) !important;
    border-color: var(--surface-blue) !important;
}

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

/* ---------- Empty / informational surfaces ---------- */
.empty,
.sandbox-box,
.alert,
.checkout-success-summary,
.surface-info-row {
    border-radius: var(--surface-radius-small) !important;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
    .dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 700px) {
    .content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

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

    .dashboard-metrics .metric {
        min-height: 100px !important;
        padding: 14px !important;
    }

    .dashboard-metrics .metric > strong {
        font-size: 22px !important;
    }

    .qris-builder-panel > :not(.panel-head) {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .provider-guide-head,
    .provider-guide-body,
    .dashboard-section-head {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}

@media (max-width: 480px) {
    .dashboard-metrics {
        grid-template-columns: 1fr !important;
    }

    .page-head h1 {
        font-size: 23px !important;
    }

    .login-card {
        padding: 20px 16px !important;
    }
}


/* =========================================================
   PAYKITA BRAND ASSETS · SAFE LOGO INSTALL
   ========================================================= */
.brand-has-logo { align-items:center !important; }
.brand-logo-icon { display:block; width:38px; height:38px; object-fit:contain; flex:0 0 38px; }
.brand-logo-wordmark { display:block; height:auto; object-fit:contain; }
.sidebar-logo-icon { width:38px !important; height:38px !important; border-radius:11px; box-shadow:0 5px 14px rgba(20,61,126,.18); }
.sidebar-logo-wordmark { width:105px; max-width:100%; }
.retro-sidebar .sidebar-brand small { margin-top:3px; }
.auth-logo-icon { width:46px; height:46px; flex-basis:46px; border-radius:13px; box-shadow:0 9px 22px rgba(33,80,167,.16); }
.auth-brand-copy { display:flex; flex-direction:column; gap:3px; min-width:0; }
.auth-logo-wordmark { width:136px; max-width:100%; }
.auth-brand-copy small { color:#657087; }
.checkout-pro-brand-logo-wrap { min-height:31px; }
.checkout-brand-logo { display:block; width:112px; max-width:100%; height:auto; object-fit:contain; filter:brightness(0) invert(1); }
.sidebar-collapsed .retro-sidebar .sidebar-logo-icon { width:38px !important; height:38px !important; }
.sidebar-collapsed .retro-sidebar .sidebar-brand-copy { display:none !important; }

/* =========================================================
   PAYKITA LOGO SIZE FIX · FINAL
   ========================================================= */
.retro-sidebar .sidebar-brand.brand-has-logo {
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
}

.retro-sidebar .sidebar-logo-icon {
    display: block !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    flex: 0 0 38px !important;
    object-fit: contain !important;
    border-radius: 10px !important;
}

.retro-sidebar .sidebar-brand-copy {
    min-width: 0 !important;
    overflow: hidden !important;
}

.retro-sidebar .sidebar-logo-wordmark {
    display: block !important;
    width: 104px !important;
    height: auto !important;
    max-width: 104px !important;
    max-height: 32px !important;
    object-fit: contain !important;
    object-position: left center !important;
}

.retro-sidebar .sidebar-brand-copy small {
    display: block !important;
    margin-top: 2px !important;
    white-space: nowrap !important;
}

.sidebar-collapsed .retro-sidebar .sidebar-logo-icon {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    max-width: 38px !important;
}

.sidebar-collapsed .retro-sidebar .sidebar-brand-copy {
    display: none !important;
}

/* Auth / checkout logo safety */
.login-card .auth-logo-icon {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    max-width: 46px !important;
    object-fit: contain !important;
}

.login-card .auth-logo-wordmark {
    width: 136px !important;
    height: auto !important;
    max-width: 136px !important;
    max-height: 42px !important;
    object-fit: contain !important;
}

.retro-topbar .checkout-brand-logo {
    display: block !important;
    width: 112px !important;
    height: auto !important;
    max-width: 112px !important;
    max-height: 30px !important;
    object-fit: contain !important;
}

/* =========================================================
   PAYKITA · DASHBOARD TABLE SCROLL + MOBILE SIDEBAR · CLEAN FINAL
   Source: actual paykita.zip
   ========================================================= */

/* ---------------------------------------------------------
   RIWAYAT ORDER: swipe / scroll horizontal
   --------------------------------------------------------- */
.content .dashboard-table-wrap,
.dashboard-table-wrap {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    scrollbar-color: #b8c7db #f3f6fa;
}

.dashboard-table-wrap::-webkit-scrollbar {
    height: 8px;
}

.dashboard-table-wrap::-webkit-scrollbar-track {
    background: #f3f6fa;
}

.dashboard-table-wrap::-webkit-scrollbar-thumb {
    background: #b8c7db;
    border: 2px solid #f3f6fa;
    border-radius: 999px;
}

.dashboard-orders-table {
    width: 100% !important;
    min-width: 980px !important;
}

/* Semua kontrol collapse/sidebar lama dimatikan. */
.sidebar-toggle,
.sidebar-restore-button,
.sidebar-mobile-trigger,
.sidebar-mobile-backdrop,
.mobile-sidebar-checkbox,
.mobile-sidebar-overlay {
    display: none !important;
}

/* Elemen final */
.mobile-sidebar-burger,
.mobile-sidebar-clickout {
    display: none;
}

/* ---------------------------------------------------------
   DESKTOP + TABLET (>760px)
   Sidebar selalu tampil. Tidak ada hide/collapse.
   --------------------------------------------------------- */
@media (min-width: 761px) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        grid-template-columns: 240px minmax(0, 1fr) !important;
    }

    .app-shell .retro-sidebar,
    .app-shell.sidebar-collapsed .retro-sidebar,
    .app-shell:not(.sidebar-collapsed) .retro-sidebar,
    .sidebar-collapsed .retro-sidebar {
        position: relative !important;
        inset: auto !important;
        width: auto !important;
        min-width: 0 !important;
        max-width: none !important;
        height: auto !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
        overflow-x: hidden !important;
        box-shadow: none !important;
        border-right-width: 1px !important;
    }

    .app-shell .content,
    .app-shell.sidebar-collapsed .content {
        grid-column: 2 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    /* Paksa isi sidebar tetap full jika ada class legacy tersisa. */
    .sidebar-collapsed .retro-sidebar .sidebar-brand-copy,
    .sidebar-collapsed .retro-sidebar .sidebar-section-copy,
    .sidebar-collapsed .retro-sidebar .sidebar-user-copy,
    .sidebar-collapsed .retro-sidebar .nav-label {
        display: initial !important;
    }

    .sidebar-collapsed .retro-sidebar .sidebar-brand-copy {
        display: block !important;
    }
}

@media (min-width: 761px) and (max-width: 980px) {
    .app-shell,
    .app-shell.sidebar-collapsed {
        grid-template-columns: 190px minmax(0, 1fr) !important;
    }
}

/* ---------------------------------------------------------
   HANDPHONE (<=760px)
   Sidebar off-canvas.
   Klik area putih transparan = close.
   --------------------------------------------------------- */
@media (max-width: 760px) {
    html,
    body {
        overflow-x: hidden !important;
    }

    .app-shell,
    .app-shell.sidebar-collapsed {
        display: block !important;
        grid-template-columns: none !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .app-shell .content,
    .app-shell.sidebar-collapsed .content {
        grid-column: auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        padding-top: 64px !important;
    }

    /* Burger hanya HP, kiri atas. */
    .mobile-sidebar-burger {
        position: fixed !important;
        left: 10px !important;
        top: 10px !important;
        z-index: 2003 !important;

        display: grid !important;
        place-items: center !important;

        width: 42px !important;
        height: 42px !important;
        padding: 0 !important;

        border: 1px solid #344258 !important;
        border-radius: 10px !important;
        background: #111827 !important;
        color: #fff !important;
        box-shadow: 0 7px 18px rgba(17, 24, 39, .20) !important;

        cursor: pointer !important;
        font: 600 22px/1 "Poppins", sans-serif !important;
        user-select: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }

    /*
       CLOSED.
       Selector sengaja sangat spesifik untuk mengalahkan rule sidebar
       lama yang sebelumnya memaksa translateX(0).
    */
    body:not(.paykita-mobile-sidebar-open)
    .app-shell
    #paykita-sidebar.retro-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 2002 !important;

        width: 220px !important;
        min-width: 220px !important;
        max-width: min(220px, calc(100vw - 44px)) !important;
        height: 100dvh !important;

        transform: translate3d(-105%, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: none !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        transition: transform .18s ease !important;
        box-shadow: 7px 0 24px rgba(17, 24, 39, .20) !important;
        border-right: 1px solid #31405a !important;
    }

    /*
       OPEN.
    */
    body.paykita-mobile-sidebar-open
    .app-shell
    #paykita-sidebar.retro-sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        z-index: 2002 !important;

        width: 220px !important;
        min-width: 220px !important;
        max-width: min(220px, calc(100vw - 44px)) !important;
        height: 100dvh !important;

        transform: translate3d(0, 0, 0) !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;

        overflow-x: hidden !important;
        overflow-y: auto !important;
        transition: transform .18s ease !important;
        box-shadow: 7px 0 24px rgba(17, 24, 39, .20) !important;
        border-right: 1px solid #31405a !important;
    }

    body.paykita-mobile-sidebar-open .mobile-sidebar-burger {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /*
       Transparan 100%: halaman tetap terlihat putih.
       Tetapi layer ini menangkap tap di luar sidebar.
    */
    .mobile-sidebar-clickout {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2001 !important;

        display: block !important;
        width: 100vw !important;
        height: 100dvh !important;

        background: transparent !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;

        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    body.paykita-mobile-sidebar-open .mobile-sidebar-clickout {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Riwayat order tetap swipe di HP. */
    .dashboard-orders-table {
        min-width: 900px !important;
    }
}

/* =========================================================
   PAYKITA · MOBILE LOGIN + DASHBOARD METRICS · FINAL
   HP only. Desktop/tablet tetap.
   ========================================================= */
@media (max-width: 760px) {
    /* ---------- LOGIN: benar-benar center di viewport ---------- */
    .login-wrap {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100dvh !important;
        margin: 0 !important;
        padding: 16px !important;

        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .login-card {
        width: 100% !important;
        max-width: 430px !important;
        min-width: 0 !important;
        margin: 0 auto !important;
        padding: 20px 16px !important;
    }

    /* ---------- DASHBOARD: 4 metric = 2 x 2 ---------- */
    .dashboard-metrics,
    .cards.four.dashboard-metrics {
        width: 100% !important;
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
        align-items: stretch !important;
    }

    .dashboard-metrics .metric,
    .cards.four.dashboard-metrics .metric {
        width: 100% !important;
        min-width: 0 !important;
        min-height: 0 !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        margin: 0 !important;
        padding: 14px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: space-between !important;
    }

    .dashboard-metrics .metric > span:first-child {
        width: 100% !important;
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.35 !important;
    }

    .dashboard-metrics .metric > strong {
        width: 100% !important;
        margin: 0 !important;
        font-size: clamp(20px, 6vw, 25px) !important;
        line-height: 1.1 !important;
        word-break: break-word !important;
    }
}

/* HP sangat kecil tetap 2x2, jangan kembali menjadi 1 kolom. */
@media (max-width: 480px) {
    .dashboard-metrics,
    .cards.four.dashboard-metrics {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* =========================================================
   PAYKITA · MOBILE DASHBOARD METRIC CARDS · REFINED
   Bentuk mengikuti referensi user: 2 kolom, landscape card.
   ========================================================= */
@media (max-width: 760px) {
    .dashboard-metrics,
    .cards.four.dashboard-metrics {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        align-items: stretch !important;
    }

    .dashboard-metrics .metric,
    .cards.four.dashboard-metrics .metric {
        width: 100% !important;
        min-width: 0 !important;

        /* BUKAN kotak 1:1 — dibuat landscape seperti referensi */
        aspect-ratio: auto !important;
        min-height: 138px !important;
        height: 138px !important;

        margin: 0 !important;
        padding: 16px 14px !important;

        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: space-between !important;

        border-radius: 14px !important;
        overflow: hidden !important;
    }

    .dashboard-metrics .metric > span:first-child {
        margin: 0 !important;
        font-size: 11px !important;
        line-height: 1.4 !important;
    }

    .dashboard-metrics .metric > strong {
        margin: 0 !important;
        font-size: clamp(21px, 6vw, 27px) !important;
        line-height: 1.1 !important;
        word-break: normal !important;
        overflow-wrap: anywhere !important;
    }
}

@media (max-width: 390px) {
    .dashboard-metrics,
    .cards.four.dashboard-metrics {
        gap: 10px !important;
    }

    .dashboard-metrics .metric,
    .cards.four.dashboard-metrics .metric {
        height: 128px !important;
        min-height: 128px !important;
        padding: 14px 12px !important;
    }
}

/* =========================================================
   PAYKITA · GOOGLE AUTH
   ========================================================= */
.btn-google-auth,
.login-card .btn-google-auth {
    width: 100%;
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 14px;
    padding: 10px 16px;
    border: 1px solid #d7dce4;
    border-radius: 10px;
    background: #fff;
    color: #20242b;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.btn-google-auth:hover,
.login-card .btn-google-auth:hover {
    border-color: #bfc7d2;
    background: #f8fafc;
    color: #111827;
    transform: none;
}

.google-auth-mark {
    display: inline-grid;
    place-items: center;
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    line-height: 0;
}

.google-auth-logo {
    display: block;
    width: 18px;
    height: 18px;
}

.auth-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 2px 0 16px;
    color: #7a8491;
    font-size: 12px;
    white-space: nowrap;
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    height: 1px;
    flex: 1 1 auto;
    background: #e3e7ed;
}

@media (max-width: 760px) {
    .btn-google-auth,
    .login-card .btn-google-auth {
        min-height: 44px;
        margin-bottom: 12px;
    }

    .auth-divider {
        gap: 9px;
        margin-bottom: 14px;
        font-size: 11px;
    }
}

/* =========================================================
   PAYKITA · TYPOGRAPHY REFINE V5
   Fokus: ritme teks lebih bersih seperti dokumentasi modern,
   tanpa mengubah layout/warna/fitur aplikasi.
   ========================================================= */

body {
    font-family: "Poppins", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif !important;
    font-weight: 400 !important;
    line-height: 1.62 !important;
    letter-spacing: -0.006em;
}

p,
.muted,
small,
.api-note,
.panel-lead,
.provider-active-note,
.provider-standby-note,
.qris-breakdown,
.qris-pay-head {
    font-weight: 400 !important;
    line-height: 1.65 !important;
}

.muted,
small {
    letter-spacing: 0 !important;
}

.page-head h1,
h1 {
    font-weight: 700 !important;
    letter-spacing: -0.028em !important;
}

h2,
h3,
.content .card > h2:first-child,
.content .card > .card-head:first-child h2,
.content .card.api-section > .endpoint-title:first-child h2 {
    font-weight: 700 !important;
    letter-spacing: -0.018em !important;
}

label,
.btn,
button,
.badge,
.status-chip,
.method,
.mode-tag,
.api-nav a,
th {
    font-weight: 600 !important;
    letter-spacing: 0 !important;
}

input,
textarea,
select,
option {
    font-weight: 400 !important;
    line-height: 1.5 !important;
}

td {
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

pre,
pre code,
code,
.mono,
.endpoint-path,
.endpoint-table .mono,
.field-table code {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas,
        "Liberation Mono", monospace !important;
    letter-spacing: -0.015em !important;
}

pre,
pre code {
    font-weight: 500 !important;
    line-height: 1.7 !important;
}

:not(pre) > code,
.endpoint-path {
    font-weight: 500 !important;
}

.retro-sidebar,
.retro-sidebar button,
.retro-sidebar a,
.retro-sidebar strong,
.retro-sidebar small,
.retro-sidebar .nav-label {
    font-family: "Poppins", ui-sans-serif, system-ui, sans-serif !important;
    letter-spacing: 0 !important;
}

.retro-nav a,
.retro-logout,
.retro-nav .nav-label,
.retro-logout .nav-label {
    font-weight: 400 !important;
}

.retro-nav a.active {
    font-weight: 500 !important;
}

.retro-sidebar .sidebar-brand strong,
.retro-sidebar-footer .user-mini strong {
    font-weight: 600 !important;
}

@media (max-width: 760px) {
    body {
        line-height: 1.64 !important;
    }

    p,
    .muted,
    .api-note {
        line-height: 1.68 !important;
    }

    pre,
    pre code {
        line-height: 1.68 !important;
    }
}

/* =========================================================
   PAYKITA · SIDEBAR CARD MODEL V6
   Model: menu berbentuk rounded card/pill seperti referensi,
   warna tetap navy + PayKita blue.
   ========================================================= */

.retro-sidebar {
    background: #0f1724 !important;
    border-right: 1px solid #273348 !important;
}

.retro-sidebar-top {
    padding: 16px 16px 12px !important;
    min-height: auto !important;
}

.retro-sidebar .sidebar-brand.brand-has-logo {
    padding: 0 !important;
}

.retro-sidebar .sidebar-brand-copy small {
    color: #8fa1bb !important;
    font-size: 11px !important;
    font-weight: 400 !important;
}

.retro-sidebar-label {
    margin: 10px 16px 8px !important;
    padding: 0 !important;
    color: #7f91ab !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: .08em !important;
}

.retro-nav {
    display: grid !important;
    gap: 8px !important;
    margin: 0 12px !important;
    padding: 0 !important;
}

.retro-nav a,
.retro-logout {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    border: 1px solid #2b374a !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .018) !important;
    color: #e7edf7 !important;
    box-shadow: none !important;
    text-decoration: none !important;
    transition:
        background-color .16s ease,
        border-color .16s ease,
        transform .16s ease,
        box-shadow .16s ease !important;
}

.retro-nav a:hover,
.retro-logout:hover {
    background: rgba(255, 255, 255, .055) !important;
    border-color: #3b4b63 !important;
    transform: translateY(-1px) !important;
}

.retro-nav a.active {
    background: linear-gradient(180deg, #3568ba 0%, #2f5da8 100%) !important;
    border-color: #3f72c7 !important;
    color: #fff !important;
    box-shadow: 0 8px 18px rgba(36, 86, 168, .26) !important;
    font-weight: 600 !important;
}

.retro-nav .nav-label,
.retro-logout .nav-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    color: inherit !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

.retro-nav a.active .nav-label {
    font-weight: 600 !important;
}

.retro-nav .nav-icon,
.retro-logout .nav-icon {
    display: grid !important;
    place-items: center !important;
    width: 21px !important;
    height: 21px !important;
    min-width: 21px !important;
    color: #d6e3f8 !important;
}

.retro-nav a.active .nav-icon {
    color: #fff !important;
}

.retro-nav .nav-icon svg,
.retro-logout .nav-icon svg {
    display: block !important;
    width: 19px !important;
    height: 19px !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.retro-sidebar-footer {
    margin-top: auto !important;
    padding: 14px 12px 16px !important;
    background: transparent !important;
    border-top: 0 !important;
}

.retro-sidebar-footer .footer-label {
    margin: 0 4px 8px !important;
}

.retro-sidebar-footer .user-mini {
    margin: 0 0 8px !important;
    padding: 10px 12px !important;
    border: 1px solid #273449 !important;
    border-radius: 14px !important;
    background: rgba(255, 255, 255, .02) !important;
}

.retro-sidebar-footer .user-mini strong {
    color: #edf3fb !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.retro-sidebar-footer .user-mini small {
    color: #91a3bc !important;
    font-size: 10.5px !important;
    font-weight: 400 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

.retro-sidebar-footer form {
    width: 100% !important;
}

.retro-logout {
    justify-content: flex-start !important;
    cursor: pointer !important;
    font-family: "Poppins", sans-serif !important;
}

.retro-logout .nav-icon {
    color: #d8e5f7 !important;
}

/* Divider lembut antara menu utama dan akun */
.retro-sidebar-footer::before {
    content: "" !important;
    display: block !important;
    height: 1px !important;
    margin: 0 4px 14px !important;
    background: #253147 !important;
}

/* Tablet tetap compact tanpa merusak model card */
@media (min-width: 761px) and (max-width: 980px) {
    .retro-nav {
        margin-left: 9px !important;
        margin-right: 9px !important;
        gap: 7px !important;
    }

    .retro-nav a,
    .retro-logout {
        padding: 9px 10px !important;
        border-radius: 13px !important;
    }

    .retro-nav .nav-label,
    .retro-logout .nav-label {
        font-size: 11.5px !important;
    }
}

/* HP: sidebar tetap off-canvas; kartu menu dibuat sedikit lebih lega */
@media (max-width: 760px) {
    .retro-sidebar-top {
        padding-top: 16px !important;
    }

    .retro-nav {
        margin: 0 10px !important;
        gap: 8px !important;
    }

    .retro-nav a,
    .retro-logout {
        min-height: 45px !important;
        border-radius: 14px !important;
        padding: 10px 12px !important;
    }

    .retro-sidebar-footer {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
}


/* ---------- Subscription status card ---------- */
.subscription-status-layout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.subscription-status-main {
    min-width: 0;
}

.subscription-status-topline {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #66758a;
    margin-bottom: 8px;
}

.subscription-status-chip-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.subscription-status-title {
    font-size: 16px;
    font-weight: 700;
    color: #1f2937;
    line-height: 1.3;
}

.subscription-status-desc {
    margin: 0;
    line-height: 1.55;
}

/* =========================================================
   PROVIDER MODERN WORKSPACE + TUTORIAL
   2026-08-12
   ========================================================= */
.provider-modern-page .page-head {
    margin-bottom: 16px;
}

.provider-read-required {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 18px;
    padding: 13px 15px;
    border: 1px solid #c8d8ef;
    border-radius: 11px;
    background: #f3f7fd;
    color: #214989;
    text-decoration: none;
    transition: border-color .16s ease, background .16s ease, transform .16s ease;
}

.provider-read-required:hover {
    border-color: #8eadd9;
    background: #edf4fd;
    transform: translateY(-1px);
}

.provider-read-required-icon {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    display: grid;
    place-items: center;
    border: 1px solid #c8d8ef;
    border-radius: 9px;
    background: #fff;
    font-size: 17px;
}

.provider-read-required > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.provider-read-required strong,
.provider-read-required small {
    display: block;
}

.provider-read-required strong {
    color: #163b78;
    font-size: 13px;
    font-weight: 700;
}

.provider-read-required small {
    margin-top: 2px;
    color: #63728a;
    font-size: 11px;
    line-height: 1.5;
}

.provider-read-required-arrow {
    flex: 0 0 auto;
    font-family: "JetBrains Mono", monospace;
    font-size: 18px;
    color: #315fae;
}

.provider-dashboard-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(340px, .85fr);
    gap: 16px;
    align-items: start;
}

.provider-dashboard-card {
    margin: 0 !important;
    min-width: 0;
}

.provider-section-title {
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 14px 18px;
    border-bottom: 1px solid var(--surface-line, #d8dde6);
    background: #fff;
}

.provider-section-icon {
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    display: grid;
    place-items: center;
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 16px;
}

.provider-section-title h2,
.provider-section-title small {
    display: block;
}

.provider-section-title h2 {
    margin: 0 !important;
    color: #111827;
    font-size: 16px !important;
    font-weight: 700;
    line-height: 1.3;
}

.provider-section-title small {
    margin-top: 2px;
    color: #6f7a8d;
    font-size: 10px;
    line-height: 1.45;
}

.provider-info-note {
    margin-top: 12px;
    padding: 11px 12px;
    border: 1px solid #c8dcfa;
    border-radius: 8px;
    background: #eef5ff;
    color: #31547f;
    font-size: 11px;
    line-height: 1.55;
}

.provider-info-note.success-note {
    border-color: #bee8d1;
    background: #effbf4;
    color: #16794b;
}

.provider-actions-spaced {
    margin-top: 14px;
}

.provider-setting-form {
    padding: 12px 18px 18px;
}

.provider-setting-row {
    min-height: 68px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border-bottom: 1px solid #e7ebf0;
}

.provider-setting-row > div {
    min-width: 0;
}

.provider-setting-row strong,
.provider-setting-row small {
    display: block;
}

.provider-setting-row strong {
    color: #172033;
    font-size: 12px;
    font-weight: 650;
}

.provider-setting-row small {
    margin-top: 4px;
    color: #778295;
    font-size: 10px;
    line-height: 1.5;
}

.provider-setting-form > .btn {
    margin-top: 14px;
}

.provider-inline-doc-link {
    display: inline-flex;
    align-items: center;
    margin-top: 11px;
    color: #315fae;
    font-size: 11px;
    font-weight: 650;
    text-decoration: none;
}

.provider-inline-doc-link:hover {
    text-decoration: underline;
}

.provider-inline-input-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 8px;
}

.provider-inline-input-action label {
    margin: 0;
}

.provider-inline-input-action .btn {
    min-height: 42px;
    white-space: nowrap;
}

.provider-otp-form {
    margin-top: 10px;
}

.provider-qris-summary-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    padding: 11px 12px;
    border: 1px solid #dce2ea;
    border-radius: 9px;
    background: #f8fafc;
}

.provider-qris-summary-line strong,
.provider-qris-summary-line small {
    display: block;
}

.provider-qris-summary-line strong {
    color: #182238;
    font-size: 12px;
}

.provider-qris-summary-line small {
    margin-top: 3px;
    color: #7a8493;
    font-size: 10px;
}

.provider-qris-input-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    margin-top: 12px;
}

.provider-upload-box-form,
.provider-qris-string-form {
    min-width: 0;
}

.provider-upload-box {
    min-height: 155px;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px;
    border: 1px dashed #bfc9d7;
    border-radius: 9px;
    background: #fbfcfd;
    color: #27354c;
    text-align: center;
    cursor: pointer;
}

.provider-upload-box input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
}

.provider-upload-box.is-disabled {
    opacity: .55;
    cursor: not-allowed;
}

.provider-upload-icon {
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 30px;
    line-height: 1;
}

.provider-upload-box strong {
    font-size: 11px;
}

.provider-upload-box small {
    color: #7b8595;
    font-size: 9px;
}

.provider-upload-box-form > .btn {
    margin-top: 8px;
}

.provider-qris-string-form textarea {
    min-height: 154px;
    resize: vertical;
}

.provider-hybrid-copy {
    margin: 0 0 12px !important;
    font-size: 11px !important;
    line-height: 1.6;
}

.provider-hybrid-example-list {
    display: grid;
    gap: 7px;
}

.provider-hybrid-example-list > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid #dfe4eb;
    border-radius: 8px;
    background: #f7f8fa;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
}

.provider-hybrid-example-list strong {
    color: #174c9d;
}

.provider-mode-state {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 12px;
    color: #4f5c70;
    font-size: 10px;
}

.provider-status-card {
    grid-column: 2;
}

.provider-modern-recent {
    margin-top: 16px;
}

/* Tutorial */
.tutorial-page {
    scroll-behavior: smooth;
}

.tutorial-page section[id] {
    scroll-margin-top: 24px;
}

.tutorial-page-head {
    margin-bottom: 16px;
}

.tutorial-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px;
    border: 1px solid #cbd6e6;
    border-radius: 14px;
    background: linear-gradient(135deg, #f9fbff 0%, #eef4fd 100%);
}

.tutorial-kicker,
.tutorial-section-label {
    display: block;
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.tutorial-hero-card h2 {
    margin: 8px 0 8px;
    color: #111827;
    font-size: 24px;
}

.tutorial-hero-card p {
    max-width: 760px;
    margin: 0;
    color: #5d687a;
    font-size: 12px;
    line-height: 1.75;
}

.tutorial-hero-badge {
    flex: 0 0 auto;
    padding: 9px 12px;
    border: 1px solid #b9e3cb;
    border-radius: 999px;
    background: #eefaf3;
    color: #16794b;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
}

.tutorial-checklist-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.tutorial-check-card {
    min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    padding: 13px;
    border: 1px solid #d8dee8;
    border-radius: 10px;
    background: #fff;
}

.tutorial-check-card > span {
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
}

.tutorial-check-card strong,
.tutorial-check-card small,
.tutorial-check-card b {
    display: block;
}

.tutorial-check-card strong {
    color: #172033;
    font-size: 11px;
}

.tutorial-check-card small {
    margin-top: 3px;
    color: #7a8493;
    font-size: 9px;
    line-height: 1.5;
}

.tutorial-check-card b {
    grid-column: 2;
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
}

.tutorial-jump-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0 0;
    padding: 10px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    background: #fff;
}

.tutorial-jump-nav a {
    padding: 7px 9px;
    border: 1px solid #e2e6ec;
    border-radius: 7px;
    color: #42516a;
    background: #f8fafc;
    font-size: 10px;
    font-weight: 600;
    text-decoration: none;
}

.tutorial-jump-nav a:hover {
    border-color: #b8c9e1;
    color: #315fae;
}

.tutorial-section {
    margin-top: 16px;
    padding: 22px;
    border: 1px solid #d8dee8;
    border-radius: 13px;
    background: #fff;
}

.tutorial-section h2 {
    margin: 6px 0 9px;
    color: #111827;
    font-size: 20px;
}

.tutorial-section > p,
.tutorial-lead {
    color: #5f6b7d;
    font-size: 12px;
    line-height: 1.75;
}

.tutorial-provider-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin-top: 16px;
}

.tutorial-provider-grid a {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px;
    padding: 14px;
    border: 1px solid #dce2ea;
    border-radius: 10px;
    color: inherit;
    text-decoration: none;
}

.tutorial-provider-grid a:hover {
    border-color: #b7c9e3;
    background: #f8fbff;
}

.tutorial-provider-grid span {
    grid-row: 1 / span 2;
    font-size: 20px;
}

.tutorial-provider-grid strong,
.tutorial-provider-grid small {
    display: block;
}

.tutorial-provider-grid strong {
    color: #182238;
    font-size: 12px;
}

.tutorial-provider-grid small {
    color: #7c8697;
    font-size: 9px;
}

.tutorial-step-list {
    display: grid;
    gap: 10px;
    margin-top: 14px;
}

.tutorial-step-list article {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 14px;
    padding: 15px;
    border: 1px solid #e0e5ec;
    border-radius: 10px;
    background: #fafbfc;
}

.tutorial-step-no {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #315fae;
    color: #fff;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
}

.tutorial-step-list h3,
.tutorial-feature-grid h3 {
    margin: 0 0 5px;
    color: #172033;
    font-size: 13px;
}

.tutorial-step-list p,
.tutorial-feature-grid p,
.tutorial-warning p,
.tutorial-info p {
    margin: 0;
    color: #657087;
    font-size: 11px;
    line-height: 1.7;
}

.tutorial-tip,
.tutorial-info,
.tutorial-warning {
    margin-top: 10px !important;
    padding: 10px 11px;
    border-radius: 8px;
}

.tutorial-tip,
.tutorial-info {
    border: 1px solid #c8dcfa;
    background: #eef5ff;
    color: #31547f !important;
}

.tutorial-warning {
    border: 1px solid #ead8c3;
    border-left: 3px solid #9a6426;
    background: #fffaf3;
}

.tutorial-warning strong,
.tutorial-info strong {
    display: block;
    margin-bottom: 4px;
    color: #26364f;
    font-size: 11px;
}

.tutorial-action-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 10px;
}

.tutorial-number-list {
    margin: 12px 0 14px;
    padding-left: 22px;
    color: #536177;
    font-size: 11px;
    line-height: 1.8;
}

.tutorial-number-list li {
    margin-bottom: 5px;
}

.tutorial-number-list a,
.tutorial-feature-grid a {
    color: #315fae;
    font-weight: 600;
}

.tutorial-section code {
    padding: 2px 5px;
    border: 1px solid #dce3ed;
    border-radius: 5px;
    background: #f6f8fb;
    color: #214989;
    font-size: 10px;
    word-break: break-all;
}

.gopay-recommendation-tutorial {
    border-color: #bfd1ec;
    background: #fbfdff;
}

.tutorial-recommend-grid,
.tutorial-feature-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.tutorial-recommend-grid article,
.tutorial-feature-grid article {
    padding: 14px;
    border: 1px solid #dfe5ed;
    border-radius: 9px;
    background: #fff;
}

.tutorial-recommend-grid article > span,
.tutorial-feature-grid article > span {
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    font-weight: 700;
}

.tutorial-recommend-grid strong {
    display: block;
    margin: 5px 0;
    color: #182238;
    font-size: 12px;
}

.tutorial-recommend-grid p {
    margin: 0;
    color: #697588;
    font-size: 10px;
    line-height: 1.6;
}

.tutorial-hybrid-demo {
    display: grid;
    gap: 7px;
    margin: 14px 0;
}

.tutorial-hybrid-demo > div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 11px;
    border: 1px solid #dce3ed;
    border-radius: 8px;
    background: #f5f8fc;
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
}

.tutorial-hybrid-demo strong {
    color: #174c9d;
}

.tutorial-feature-grid article > span {
    font-family: inherit;
    font-size: 20px;
}

.tutorial-feature-grid a {
    display: inline-block;
    margin-top: 8px;
    font-size: 10px;
}

.tutorial-faq-list {
    display: grid;
    gap: 8px;
    margin-top: 12px;
}

.tutorial-faq-list details {
    border: 1px solid #dfe4eb;
    border-radius: 9px;
    background: #fafbfc;
}

.tutorial-faq-list summary {
    padding: 13px 14px;
    color: #1d2a40;
    font-size: 11px;
    font-weight: 650;
    cursor: pointer;
}

.tutorial-faq-list p {
    margin: 0;
    padding: 0 14px 14px;
    color: #687487;
    font-size: 11px;
    line-height: 1.7;
}

@media (max-width: 980px) {
    .provider-dashboard-grid {
        grid-template-columns: 1fr;
    }

    .provider-status-card {
        grid-column: auto;
    }

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

@media (max-width: 680px) {
    .provider-read-required {
        align-items: flex-start;
    }

    .provider-read-required-arrow {
        margin-top: 5px;
    }

    .provider-inline-input-action,
    .provider-qris-input-grid {
        grid-template-columns: 1fr;
    }

    .provider-inline-input-action .btn {
        width: 100%;
    }

    .provider-setting-row {
        align-items: flex-start;
    }

    .provider-qris-summary-line,
    .provider-mode-state,
    .provider-hybrid-example-list > div,
    .tutorial-hybrid-demo > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .tutorial-hero-card {
        align-items: flex-start;
        flex-direction: column;
        padding: 18px;
    }

    .tutorial-hero-card h2 {
        font-size: 20px;
    }

    .tutorial-checklist-grid,
    .tutorial-provider-grid,
    .tutorial-recommend-grid,
    .tutorial-feature-grid {
        grid-template-columns: 1fr;
    }

    .tutorial-section {
        padding: 16px;
    }
}


/* ---------- Provider brand icons + risk links ---------- */
.provider-icon-shared {
    display: inline-grid;
    place-items: center;
    flex: 0 0 auto;
    color: currentColor;
}
.provider-icon-shared svg {
    display: block;
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.provider-page-title {
    display: flex;
    align-items: center;
    gap: 13px;
    min-width: 0;
}
.provider-page-title > div:last-child { min-width: 0; }
.provider-page-title h1 { margin-bottom: 3px; }
.provider-brand-icon {
    width: 46px;
    height: 46px;
    padding: 10px;
    border-radius: 13px;
    color: #315fae;
    background: #edf3ff;
    border: 1px solid #ccdaf0;
}
.provider-read-required-brand {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    padding: 7px;
    color: currentColor;
}
.provider-read-required-brand svg { width: 20px; height: 20px; }
.provider-risk-required {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    margin: 10px 0 18px;
    padding: 13px 15px;
    border: 1px solid #efc8c8;
    border-radius: 12px;
    background: #fff7f7;
    color: #7f1d1d;
    text-decoration: none;
    transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.provider-risk-required:hover {
    transform: translateY(-1px);
    border-color: #e5a8a8;
    box-shadow: 0 8px 20px rgba(127, 29, 29, .08);
}
.provider-risk-required > span:nth-child(2) { min-width: 0; flex: 1; }
.provider-risk-required strong,
.provider-risk-required small { display: block; }
.provider-risk-required strong { font-size: 13px; color: #991b1b; }
.provider-risk-required small { margin-top: 3px; color: #7f4b4b; line-height: 1.45; }
.provider-risk-required-icon {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #fee2e2;
    border: 1px solid #fecaca;
    color: #b91c1c;
    font-weight: 800;
}
.provider-guide-brand-icon {
    width: 44px !important;
    height: 44px !important;
    padding: 10px;
    border-radius: 12px;
    background: #edf3ff;
    border: 1px solid #ccdaf0;
    color: #315fae;
}

/* ---------- Tutorial provider logos / GoPay risk ---------- */
.tutorial-provider-logo {
    width: 32px;
    height: 32px;
    padding: 6px;
    color: #315fae;
    background: #edf3ff;
    border: 1px solid #ccdaf0;
    border-radius: 9px;
}
.tutorial-provider-heading {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 8px;
}
.tutorial-provider-heading h2 { margin: 0; }
.tutorial-section-provider-icon {
    width: 38px;
    height: 38px;
    padding: 8px;
    color: #315fae;
    background: #edf3ff;
    border: 1px solid #ccdaf0;
    border-radius: 11px;
}
.tutorial-danger {
    margin: 16px 0 20px;
    padding: 16px 18px;
    border: 1px solid #efb1b1;
    border-left: 4px solid #b42318;
    border-radius: 12px;
    background: #fff4f3;
    color: #7a271a;
}
.tutorial-danger strong { display: block; margin-bottom: 6px; color: #912018; }
.tutorial-danger p { margin: 0; line-height: 1.6; }

/* ---------- Privacy page ---------- */
.privacy-public-shell {
    min-height: 100vh;
    background: #f7f8fa;
}
.privacy-public-header {
    position: sticky;
    top: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 70px;
    padding: 12px clamp(18px, 4vw, 48px);
    background: rgba(255,255,255,.96);
    border-bottom: 1px solid #e2e6ec;
    backdrop-filter: blur(12px);
}
.privacy-brand-link img { display: block; width: auto; height: 32px; }
.privacy-public-actions { display: flex; gap: 8px; }
.privacy-page { scroll-behavior: smooth; }
.privacy-public-content {
    width: min(1120px, calc(100% - 32px));
    margin: 0 auto;
    padding: 36px 0 72px;
}
.privacy-page section[id] { scroll-margin-top: 90px; }
.privacy-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(260px, .7fr);
    gap: 24px;
    align-items: stretch;
    margin-bottom: 18px;
    padding: clamp(24px, 4vw, 38px);
    border: 1px solid #dce2ea;
    border-radius: 18px;
    background: #fff;
}
.privacy-kicker {
    display: block;
    margin-bottom: 9px;
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    color: #315fae;
}
.privacy-hero h1 { margin: 0 0 12px; font-size: clamp(27px, 4vw, 42px); line-height: 1.15; }
.privacy-hero p { max-width: 760px; margin: 0 0 12px; color: #536174; line-height: 1.7; }
.privacy-hero small { color: #788496; }
.privacy-summary-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 20px;
    border: 1px solid #cbd9ee;
    border-radius: 14px;
    background: #f3f7fd;
}
.privacy-summary-card strong { color: #214989; }
.privacy-summary-card span { font-size: 13px; color: #52647d; line-height: 1.45; }
.privacy-jump-nav {
    position: sticky;
    top: 8px;
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 18px;
    padding: 10px;
    border: 1px solid #dde3ea;
    border-radius: 12px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 5px 18px rgba(15, 23, 42, .05);
}
.privacy-jump-nav a {
    padding: 7px 10px;
    border-radius: 8px;
    color: #40516a;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}
.privacy-jump-nav a:hover { background: #edf3ff; color: #214989; }
.privacy-section {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 18px;
    margin-bottom: 14px;
    padding: clamp(22px, 3vw, 30px);
    border: 1px solid #dde3ea;
    border-radius: 16px;
    background: #fff;
}
.privacy-section-no {
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #edf3ff;
    border: 1px solid #ccdaf0;
    color: #315fae;
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    font-weight: 700;
}
.privacy-section h2 { margin: 4px 0 12px; font-size: 23px; }
.privacy-section h3 { margin: 8px 0; font-size: 16px; }
.privacy-section p,
.privacy-section li { color: #526174; line-height: 1.7; }
.privacy-section ul { margin: 10px 0 0; padding-left: 20px; }
.privacy-section code { padding: 2px 5px; border-radius: 5px; background: #f0f2f5; font-size: .9em; }
.privacy-provider-list,
.privacy-data-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 15px;
}
.privacy-provider-list article,
.privacy-data-grid article {
    padding: 16px;
    border: 1px solid #e0e5ec;
    border-radius: 12px;
    background: #fafbfc;
}
.privacy-provider-list article { display: flex; align-items: flex-start; gap: 11px; }
.privacy-provider-list p,
.privacy-data-grid p { margin: 5px 0 0; font-size: 13px; }
.privacy-provider-icon {
    width: 34px;
    height: 34px;
    padding: 7px;
    color: #315fae;
    background: #edf3ff;
    border: 1px solid #ccdaf0;
    border-radius: 9px;
}
.privacy-note,
.privacy-danger {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 11px;
    line-height: 1.6;
}
.privacy-note { background: #f2f6fc; border: 1px solid #d4dfef; color: #3f5473; }
.privacy-danger { background: #fff4f3; border: 1px solid #efb1b1; color: #7a271a; }
.privacy-danger p { margin: 5px 0 0; color: inherit; }
.privacy-risk-section > div:last-child > p { margin-bottom: 15px; }
.privacy-risk-card {
    margin: 12px 0;
    padding: 18px;
    border: 1px solid #e0e5ec;
    border-radius: 13px;
    background: #fafbfc;
}
.privacy-risk-card-strong { border-color: #efb1b1; background: #fff7f6; }
.privacy-risk-title { display: flex; align-items: center; gap: 10px; color: #243b5a; }
.privacy-risk-title strong { font-size: 16px; }
.privacy-risk-card ul { margin-bottom: 12px; }

@media (max-width: 860px) {
    .privacy-hero { grid-template-columns: 1fr; }
    .privacy-provider-list,
    .privacy-data-grid { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
    .provider-page-title { align-items: flex-start; }
    .provider-brand-icon { width: 40px; height: 40px; padding: 9px; }
    .provider-risk-required { align-items: flex-start; }
    .privacy-public-header { padding: 10px 16px; }
    .privacy-public-actions .btn:first-child { display: none; }
    .privacy-jump-nav { position: static; overflow-x: auto; flex-wrap: nowrap; }
    .privacy-jump-nav a { white-space: nowrap; }
    .privacy-section { grid-template-columns: 1fr; gap: 10px; padding: 18px; }
    .privacy-section-no { width: 36px; height: 36px; }
    .privacy-section h2 { font-size: 20px; }
}

/* =========================================================
   PAYKITA · MERCHANT TYPOGRAPHY SYNC V1
   Patokan: typography Dashboard. Sidebar dan monospace teknis
   dipertahankan agar tidak mengubah identitas/navigation/code.
   ========================================================= */
.app-shell > main.content,
.app-shell > main.content button,
.app-shell > main.content input,
.app-shell > main.content textarea,
.app-shell > main.content select,
.app-shell > main.content option,
.app-shell > main.content table,
.privacy-page,
.privacy-page button,
.privacy-page input,
.privacy-page textarea,
.privacy-page select,
.privacy-page option,
.privacy-page table {
    font-family: "Be Vietnam Pro", sans-serif !important;
}

/* Elemen teknis tetap mengikuti pola Dashboard (monospace). */
.app-shell > main.content code,
.app-shell > main.content pre,
.app-shell > main.content .mono,
.app-shell > main.content .dbs-chip,
.app-shell > main.content .dbs-trend,
.app-shell > main.content .dbs-export summary,
.app-shell > main.content .dbs-chart-legend,
.app-shell > main.content .dbs-day small,
.app-shell > main.content .dbs-filters a,
.app-shell > main.content .dbs-table th,
.app-shell > main.content .dbs-order-link,
.app-shell > main.content .dbs-pagination,
.app-shell > main.content .endpoint-path,
.app-shell > main.content .endpoint-table .mono,
.app-shell > main.content .field-table code,
.privacy-page code,
.privacy-page pre {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace !important;
}

/* =========================================================
   PAYKITA · TYPOGRAPHY SYSTEM V2
   Referensi: Be Vietnam Pro untuk headline/body,
   JetBrains Mono untuk label/navigation/technical UI.
   Fokus typography saja; tidak mengubah layout/warna/logic.
   ========================================================= */

/* Headline + body */
.app-shell > main.content,
.app-shell > main.content p,
.app-shell > main.content h1,
.app-shell > main.content h2,
.app-shell > main.content h3,
.app-shell > main.content h4,
.app-shell > main.content h5,
.app-shell > main.content h6,
.app-shell > main.content input,
.app-shell > main.content textarea,
.app-shell > main.content select,
.app-shell > main.content option,
.app-shell > main.content td,
.app-shell > main.content .muted,
.app-shell > main.content .panel-lead,
.privacy-page,
.privacy-page p,
.privacy-page h1,
.privacy-page h2,
.privacy-page h3,
.privacy-page h4,
.privacy-page input,
.privacy-page textarea,
.privacy-page select,
.privacy-page option,
.privacy-page td {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system,
        BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* Label UI: mengikuti sistem typography pada desain referensi. */
.retro-sidebar,
.retro-sidebar a,
.retro-sidebar button,
.retro-sidebar .nav-label,
.app-shell > main.content label,
.app-shell > main.content button,
.app-shell > main.content .btn,
.app-shell > main.content .badge,
.app-shell > main.content .status-chip,
.app-shell > main.content th,
.app-shell > main.content .method,
.app-shell > main.content .mode-tag,
.app-shell > main.content .api-nav a,
.privacy-page label,
.privacy-page button,
.privacy-page .btn,
.privacy-page .badge,
.privacy-page th {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas,
        "Liberation Mono", monospace !important;
}

/* Brand/user copy di sidebar tetap human-readable, bukan kode. */
.retro-sidebar .sidebar-brand strong,
.retro-sidebar .sidebar-brand small,
.retro-sidebar-footer .user-mini strong,
.retro-sidebar-footer .user-mini small {
    font-family: "Be Vietnam Pro", ui-sans-serif, system-ui, sans-serif !important;
}

/* Data teknis tetap mono. */
.app-shell > main.content code,
.app-shell > main.content pre,
.app-shell > main.content .mono,
.app-shell > main.content .dbs-chip,
.app-shell > main.content .dbs-trend,
.app-shell > main.content .dbs-export summary,
.app-shell > main.content .dbs-chart-legend,
.app-shell > main.content .dbs-day small,
.app-shell > main.content .dbs-filters a,
.app-shell > main.content .dbs-table th,
.app-shell > main.content .dbs-order-link,
.app-shell > main.content .dbs-pagination,
.app-shell > main.content .endpoint-path,
.app-shell > main.content .endpoint-table .mono,
.app-shell > main.content .field-table code,
.privacy-page code,
.privacy-page pre {
    font-family: "JetBrains Mono", "SFMono-Regular", Consolas,
        "Liberation Mono", monospace !important;
}