:root {
    --navy: #12305c;
    --navy-deep: #0c2244;
    --gold: #c9a227;
    --ink: #1d2733;
    --muted: #5b6878;
    --line: #dde3ea;
    --surface: #ffffff;
    --canvas: #f2f5f9;
    --danger: #b3261e;
    --success: #1b6e3c;
    --success-bg: #e7f4ec;
    --radius: 12px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--canvas);
    background-image: linear-gradient(180deg, var(--navy) 0, var(--navy-deep) 240px, transparent 240px);
    color: var(--ink);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

a { color: var(--navy); }

h1 { margin: 0; font-size: 1.375rem; line-height: 1.3; }

.shell {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
    width: 100%;
    max-width: 432px;
    min-height: 100vh;
    margin: 0 auto;
    padding: 32px 16px;
}

.card {
    padding: 32px 28px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgb(12 34 68 / 14%);
}

.card-center { text-align: center; }

.card-center .button { display: inline-block; width: auto; margin-top: 8px; text-decoration: none; }

.brand { margin-bottom: 24px; text-align: center; }

.brand img { display: block; margin: 0 auto 12px; }

.brand p, .hint { margin: 6px 0 0; color: var(--muted); font-size: 0.875rem; }

.hint { margin-top: 18px; text-align: center; }

.field { margin-bottom: 16px; }

label { display: block; margin-bottom: 6px; font-size: 0.875rem; font-weight: 600; }

input:not([type="hidden"]) {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    color: var(--ink);
    font: inherit;
    background: var(--surface);
    border: 1px solid #b6c1cd;
    border-radius: 8px;
}

input:focus-visible, .button:focus-visible {
    outline: 3px solid rgb(201 162 39 / 55%);
    outline-offset: 1px;
    border-color: var(--navy);
}

input[aria-invalid="true"] { border-color: var(--danger); }

.code-input { font-size: 1.375rem; letter-spacing: 0.3em; text-align: center; }

.code-otp { position: relative; }

.code-otp.is-ready .code-input { position: absolute; inset: 0; z-index: 1; height: 100%; font-size: 1rem; cursor: text; opacity: 0; }

.code-slots { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }

.code-slot {
    display: grid;
    place-items: center;
    height: 52px;
    font-size: 1.375rem;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    background: var(--surface);
    border: 1px solid #b6c1cd;
    border-radius: 8px;
}

.code-slot:not(:empty) { border-color: var(--navy); }

.code-input[aria-invalid="true"] ~ .code-slots .code-slot { border-color: var(--danger); }

.code-input:focus ~ .code-slots .code-slot.is-active {
    outline: 3px solid rgb(201 162 39 / 55%);
    outline-offset: 1px;
    border-color: var(--navy);
}

.field-error { margin: 6px 0 0; color: var(--danger); font-size: 0.875rem; }

.button {
    width: 100%;
    min-height: 44px;
    padding: 10px 18px;
    font: inherit;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: 8px;
    cursor: pointer;
}

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

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

.button-quiet { color: var(--navy); background: var(--surface); border-color: var(--line); }

.button-quiet:hover { background: var(--canvas); }

.alert { margin: 0 0 16px; padding: 10px 12px; border-radius: 8px; font-size: 0.875rem; }

.alert-success { color: var(--success); background: var(--success-bg); }

.portal-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    color: #fff;
}

.portal-header .button { width: auto; }

.portal-brand { display: flex; align-items: center; gap: 12px; min-width: 0; }

.portal-brand img { flex: none; padding: 4px; background: #fff; border-radius: 10px; }

.portal-brand p { margin: 0; color: #cdd8e6; font-size: 0.875rem; overflow-wrap: anywhere; }

.footer { color: var(--muted); font-size: 0.8125rem; text-align: center; }

/* Panduan integrasi */

.shell-doc { justify-content: flex-start; max-width: 960px; }

.shell-doc .footer { margin-top: auto; }

.doc {
    padding: 28px;
    background: var(--surface);
    border-radius: var(--radius);
    box-shadow: 0 12px 32px rgb(12 34 68 / 14%);
}

.doc section + section { margin-top: 40px; }

.doc h2 { margin: 0 0 12px; font-size: 1.25rem; line-height: 1.3; }

.doc h3 { margin: 24px 0 8px; font-size: 1.0625rem; }

.doc h4 { margin: 20px 0 8px; font-size: 0.9375rem; }

.doc p, .doc li { max-width: 72ch; }

.doc ul, .doc ol { padding-left: 1.25rem; }

.doc li + li { margin-top: 6px; }

.doc code { font-family: ui-monospace, "Cascadia Mono", Consolas, "Liberation Mono", monospace; font-size: 0.875em; overflow-wrap: anywhere; }

.doc :not(pre) > code { padding: 1px 5px; background: var(--canvas); border-radius: 4px; }

.doc-toc {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 28px;
    padding-bottom: 16px;
    font-size: 0.875rem;
    border-bottom: 1px solid var(--line);
}

.doc-flow li::marker, .doc-steps > li::marker { color: var(--navy); font-weight: 700; }

.doc-steps > li + li { margin-top: 20px; }

.doc-steps h3 { margin-top: 0; }

.doc-table { margin: 12px 0; overflow-x: auto; }

.doc-table table { width: 100%; font-size: 0.875rem; border-collapse: collapse; }

.doc-table th, .doc-table td { padding: 8px 10px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }

.doc-table thead th { color: var(--muted); font-weight: 600; }

.doc-table tbody th { width: 30%; min-width: 140px; font-weight: 600; }

.doc-code { position: relative; margin: 12px 0; }

.doc-code pre {
    margin: 0;
    padding: 16px;
    overflow-x: auto;
    color: #e6edf5;
    font-size: 0.875rem;
    line-height: 1.55;
    tab-size: 4;
    background: var(--navy-deep);
    border-radius: 8px;
}

.doc-code pre code { overflow-wrap: normal; }

.doc-copy {
    position: absolute;
    top: 8px;
    right: 8px;
    padding: 4px 10px;
    color: #e6edf5;
    font: inherit;
    font-size: 0.8125rem;
    background: rgb(255 255 255 / 10%);
    border: 1px solid rgb(255 255 255 / 25%);
    border-radius: 6px;
    cursor: pointer;
}

.doc-copy:hover { background: rgb(255 255 255 / 18%); }

.doc-tablist {
    display: flex;
    gap: 4px;
    overflow-x: auto;
    border-bottom: 1px solid var(--line);
}

.doc-tablist[hidden] { display: none; }

.doc-tablist [role="tab"] {
    flex: none;
    padding: 10px 14px;
    color: var(--muted);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    background: none;
    border: 0;
    border-bottom: 3px solid transparent;
    cursor: pointer;
}

.doc-tablist [role="tab"][aria-selected="true"] { color: var(--navy); border-bottom-color: var(--gold); }

.doc-tablist [role="tab"]:focus-visible, .doc-copy:focus-visible { outline: 3px solid rgb(201 162 39 / 55%); outline-offset: 1px; }

.doc-panel + .doc-panel { margin-top: 32px; }

.doc-tabs.is-ready .doc-panel { margin-top: 0; }

.doc-tabs.is-ready .doc-panel > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.doc-library { margin: 16px 0 0; color: var(--muted); font-size: 0.875rem; }

.doc-notes { color: var(--muted); font-size: 0.875rem; }

.doc-warning { padding: 10px 12px; color: var(--danger); background: #fbeceb; border-radius: 8px; }

@media (max-width: 600px) {
    .doc { padding: 20px 16px; }
    .doc-table tbody th { width: auto; min-width: 110px; }
}

.doc-callout {
    margin: 16px 0;
    padding: 14px 16px;
    font-size: 0.875rem;
    background: #fbf6e6;
    border-left: 4px solid var(--gold);
    border-radius: 8px;
}

.doc-callout p { margin: 0; }

.doc-callout ul { margin: 8px 0; }

.doc-badge {
    display: inline-block;
    padding: 1px 8px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.6;
    letter-spacing: 0.02em;
    vertical-align: middle;
    border-radius: 999px;
}

.doc-badge-example { color: #7a5b00; background: #f7efd3; }

.doc-badge-real { color: var(--success); background: var(--success-bg); }

.doc-code pre.doc-prompt { max-height: 420px; white-space: pre-wrap; }

.doc-code pre.doc-prompt code { overflow-wrap: anywhere; }

/* Penanda lingkungan */

.env-bar {
    padding: 4px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-align: center;
}

.env-bar-demo { color: #3d2e00; background: var(--gold); }

.env-bar-production { color: #cdd8e6; background: var(--navy-deep); }

.env-bar + .shell { min-height: calc(100vh - 26px); }