/* Gaya get-help (wizard) dan pelacak case. Berdiri sendiri (kelas gh-*) karena site.css tidak dibangun ulang dan tidak memuat semua kelas Tailwind
   yang dipakai halaman lama. Tampilan meniru GetHelp.tsx / CaseTracker.tsx: latar #F0F4F8 bertitik, kartu putih bulat, biru #1565C0, merah #E53935. */
.gh-page { min-height: 100vh; background: #F0F4F8; background-image: radial-gradient(circle, #D0DCF0 1px, transparent 1px); background-size: 20px 20px; font-family: Inter, ui-sans-serif, system-ui, sans-serif; color: #111827; line-height: 1.5; }
.gh-page *, .gh-page *::before, .gh-page *::after { box-sizing: border-box; }
.gh-page [hidden] { display: none !important; }
html[data-deep] [data-phase="extension"] { display: none; }
html[data-deep] [data-phase="analyzing"] { display: block; }
html[data-deep] [data-phase="analyzing"][hidden] { display: block !important; }

.gh-header { background: #fff; border-bottom: 1px solid #e5e7eb; position: sticky; top: 0; z-index: 40; box-shadow: 0 1px 2px rgba(0, 0, 0, .05); }
.gh-header-in { max-width: 48rem; margin: 0 auto; padding: .75rem 1rem; display: flex; align-items: center; justify-content: space-between; }
.gh-logo { height: 1.75rem; object-fit: contain; display: block; }
.gh-wrap { max-width: 42rem; margin: 0 auto; padding: 2rem 1rem; }
.gh-wrap-wide { max-width: 48rem; }

.gh-card { background: #fff; border-radius: 1.5rem; border: 1px solid rgba(226, 232, 240, .8); box-shadow: 0 1px 2px rgba(0, 0, 0, .05); padding: 1.5rem; margin-bottom: 1.25rem; }
.gh-card-sm { border-radius: 1rem; border-color: #e5e7eb; }
@media (min-width: 768px) { .gh-card { padding: 2rem; } .gh-card-sm { padding: 1.5rem; } }
.gh-complete { border: 2px solid #E53935; }

.gh-head { text-align: left; margin-bottom: 1.5rem; }
.gh-eyebrow { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; color: #1565C0; margin: 0; }
.gh-green { color: #2E7D32; }
.gh-muted { color: #9ca3af; }
.gh-h1, .gh-h2, .gh-h3 { font-family: Manrope, ui-sans-serif, system-ui, sans-serif; font-weight: 700; color: #111827; margin: 0; }
.gh-h1 { font-size: 1.875rem; line-height: 1.2; margin-top: .75rem; }
.gh-h2 { font-size: 1.5rem; line-height: 1.25; }
.gh-h3 { font-size: 1.25rem; margin-bottom: .75rem; }
@media (min-width: 768px) { .gh-head .gh-h2 { font-size: 1.875rem; } }
.gh-sub { margin: .5rem 0 0; font-size: .875rem; color: #475569; }
.gh-body { margin: 0; font-size: .875rem; line-height: 1.6; color: #334155; }
.gh-small { margin: .375rem 0 0; font-size: .75rem; line-height: 1.5; color: #64748b; }
.gh-tiny { margin: 0; font-size: .75rem; color: #9ca3af; }
.gh-q { margin: 0; font-size: .875rem; font-weight: 600; color: #1f2937; }
.gh-strong { font-weight: 600; margin: 0; color: #111827; }
.gh-mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; }
.gh-upper { text-transform: uppercase; }
.gh-center { text-align: center; justify-content: center; }
.gh-block { display: block; }
.gh-push { margin-left: auto; color: #9ca3af; }
.gh-hidden { display: none; }
.gh-grow { flex: 1; }
.gh-mt-xs { margin-top: .25rem; } .gh-mt-sm { margin-top: .75rem; } .gh-mt-md { margin-top: 1rem; } .gh-mt-lg { margin-top: 1.5rem; }
.gh-mb { margin-bottom: 1.25rem; } .gh-mb-sm { margin-bottom: .75rem; } .gh-mb-xs { margin-bottom: .5rem; }
.gh-between { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gh-start { align-items: flex-start; }
.gh-row { display: flex; flex-direction: column; gap: .75rem; }
@media (min-width: 640px) { .gh-row { flex-direction: row; align-items: stretch; } }

/* ikon (lucide inline) */
.gh-ic { width: 1rem; height: 1rem; flex-shrink: 0; }
.gh-ic-sm { width: .875rem; height: .875rem; flex-shrink: 0; }
.gh-ic-xs { width: .75rem; height: .75rem; flex-shrink: 0; }
.gh-ic-lg { width: 1.75rem; height: 1.75rem; }
.gh-ic-xl { width: 3rem; height: 3rem; margin: 0 auto .75rem; display: block; }
.gh-check { width: 1.75rem; height: 1.75rem; color: #16a34a; flex-shrink: 0; margin-top: .25rem; }

/* tombol */
.gh-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; min-height: 2.75rem; padding: .75rem 1rem; border-radius: .75rem; border: 1px solid transparent; font: inherit; font-size: .875rem; font-weight: 700; text-align: center; text-decoration: none; cursor: pointer; transition: opacity .15s, background .15s; }
.gh-btn:hover { opacity: .9; }
.gh-btn:disabled { opacity: .5; cursor: not-allowed; }
.gh-btn:focus-visible, .gh-input:focus-visible, .gh-chip:focus-visible, .gh-tab:focus-visible, .gh-iconbtn:focus-visible { outline: 2px solid #1565C0; outline-offset: 2px; }
.gh-btn-red { background: #E53935; color: #fff; }
.gh-btn-blue { background: #1565C0; color: #fff; }
.gh-btn-green { background: #2E7D32; color: #fff; }
.gh-btn-ghost { background: #fff; border-color: #d1d5db; color: #374151; font-weight: 500; }
.gh-btn-outline { background: #fff; border-color: #e5e7eb; color: #4b5563; font-weight: 600; min-height: 2.5rem; }
.gh-btn-block { width: 100%; }
.gh-btn-sm { min-height: 2.75rem; padding: .5rem .75rem; flex-shrink: 0; }
.gh-btn-md { min-height: 2.5rem; padding: 0 1.25rem; }
.gh-btn-xl { min-height: 3.5rem; font-size: 1rem; }
@media (min-width: 640px) { .gh-btn-ghost, .gh-btn-red.gh-btn-block, .gh-row > .gh-btn-ghost { font-size: 1rem; } .gh-row > .gh-btn-ghost { padding: .75rem 1.25rem; } }
.gh-link { display: inline-flex; align-items: center; gap: .375rem; font-size: .875rem; font-weight: 600; color: #1565C0; text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; }
.gh-link:hover { text-decoration: underline; }
.gh-link.gh-center { display: flex; width: 100%; }
.gh-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; border: 0; background: none; color: #6b7280; cursor: pointer; }
.gh-iconbtn:hover { background: #f3f4f6; }
.gh-iconbtn-sm { width: 1.5rem; height: 1.5rem; border-radius: 9999px; color: #9ca3af; }
.gh-iconbtn.is-ok { color: #16a34a; }

/* isian */
.gh-label { display: block; font-size: .875rem; font-weight: 600; color: #374151; margin-bottom: .5rem; }
.gh-label-sm { font-size: .75rem; font-weight: 600; color: #334155; }
.gh-labelrow { display: flex; align-items: center; gap: .375rem; margin-bottom: .375rem; }
.gh-field { margin-bottom: 1rem; }
.gh-input { display: block; width: 100%; height: 3rem; border: 1px solid #cbd5e1; border-radius: .75rem; padding: 0 1rem; font: inherit; font-size: 1rem; background: #fff; color: #111827; }
.gh-input:focus { outline: none; border-color: #1565C0; box-shadow: 0 0 0 3px rgba(21, 101, 192, .25); }
.gh-input-sm { height: 2.5rem; padding: 0 .75rem; font-size: .875rem; }
.gh-select { appearance: auto; }
.gh-grid2 { display: grid; grid-template-columns: 1fr; gap: 1rem; margin-bottom: .25rem; }
@media (min-width: 640px) { .gh-grid2 { grid-template-columns: 1fr 1fr; } }
.gh-error { display: flex; align-items: flex-start; gap: .375rem; margin: .375rem 0 0; font-size: .75rem; color: #b91c1c; }
.gh-error .gh-ic-sm { margin-top: .125rem; }
.gh-error-line { margin: 0 0 .75rem; font-size: .75rem; color: #dc2626; }
.gh-alert { margin: 1rem 0 0; border: 1px solid #fecaca; background: #fef2f2; border-radius: .75rem; padding: .75rem; font-size: .875rem; color: #b91c1c; }
.gh-privacy { display: flex; align-items: center; gap: .375rem; margin: 1rem 0 0; font-size: .75rem; color: #94a3b8; }
.gh-privacy.gh-center { justify-content: center; }
.gh-hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.gh-referral { margin-bottom: 1rem; border: 1px solid #fcd34d; background: #fffbeb; border-radius: .75rem; padding: .75rem; font-size: .75rem; color: #78350f; }
.gh-referral label { display: flex; align-items: flex-start; gap: .5rem; }
.gh-referral input { margin-top: .125rem; width: 1rem; height: 1rem; flex-shrink: 0; }

/* banner kasus aktif */
.gh-banner { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.5rem; padding: 1rem; border-radius: .75rem; border: 1px solid #90CAF9; background: #E3F0FF; }
.gh-banner-title { margin: 0; font-size: .875rem; font-weight: 600; color: #1565C0; }
.gh-banner-id { margin: 0; font-size: .875rem; font-family: "JetBrains Mono", ui-monospace, monospace; color: #1565C0; word-break: break-all; }

/* video gerbang cakupan */
.gh-video { margin-top: .75rem; overflow: hidden; border-radius: .75rem; border: 1px solid #e5e7eb; background: #f8fafc; }
.gh-video video { display: block; width: 100%; aspect-ratio: 1366 / 720; }
.gh-video-sm { border-radius: .5rem; }

/* analyzing */
.gh-analyzing { padding: 2rem 0; text-align: center; }
.gh-spinner { width: 2.5rem; height: 2.5rem; border-radius: 9999px; border: 4px solid #dbeafe; border-top-color: #2563eb; margin: 0 auto 1rem; animation: gh-spin 1s linear infinite; }
@keyframes gh-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gh-spinner { animation-duration: 3s; } }

/* confidence */
.gh-conf-head { display: flex; align-items: flex-start; gap: .75rem; margin-top: .25rem; }
.gh-panel { margin-top: 1.25rem; background: #f9fafb; border-radius: .75rem; padding: 1.25rem; }
.gh-upper-label { font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; color: #6b7280; margin-bottom: .25rem; }
.gh-strain { font-size: 1.25rem; font-weight: 700; color: #111827; }
.gh-green-note { margin: .5rem 0 0; font-size: .875rem; line-height: 1.6; color: #15803d; }
.gh-prob { margin-top: 1rem; font-size: .875rem; }
.gh-prob .gh-between { margin-bottom: .25rem; }
.gh-bar { height: .75rem; width: 100%; background: #e5e7eb; border-radius: 9999px; overflow: hidden; }
.gh-barfill { height: 100%; border-radius: 9999px; transition: width 1s; }
.gh-stats { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-top: 1.25rem; }
@media (min-width: 640px) { .gh-stats { grid-template-columns: repeat(3, 1fr); } }
.gh-stat { border: 1px solid #dbeafe; background: rgba(239, 246, 255, .6); border-radius: .75rem; padding: .75rem; text-align: center; }
.gh-stat .gh-tiny { color: #6b7280; margin-bottom: .25rem; }

/* sampel dan detail */
.gh-section { border: 1px solid #e5e7eb; border-radius: .75rem; padding: 1rem; margin-bottom: .75rem; }
.gh-section-title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .25rem; font-family: Manrope, ui-sans-serif, sans-serif; font-size: .875rem; font-weight: 700; color: #111827; }
.gh-pill { font-size: .625rem; font-weight: 700; color: #fff; background: #E53935; padding: .125rem .5rem; border-radius: 9999px; }
.gh-optional { font-size: .625rem; font-weight: 600; color: #9ca3af; }
.gh-helpbtn { display: inline-flex; background: none; border: 0; padding: 0; cursor: pointer; color: #94a3b8; }
.gh-helpbtn:hover { color: #475569; }
.gh-pop { margin-bottom: .5rem; border: 1px solid #e2e8f0; border-radius: .5rem; background: #fff; padding: .75rem; font-size: .75rem; line-height: 1.6; color: #475569; box-shadow: 0 4px 12px rgba(0, 0, 0, .08); }
.gh-pop-title { margin: 0 0 .375rem; font-weight: 600; color: #1e293b; }
.gh-list { margin: 0; padding: 0; list-style: none; }
.gh-list li { margin-bottom: .25rem; }
.gh-tabs { display: flex; background: #f1f5f9; border-radius: .5rem; padding: .1875rem; margin-bottom: .5rem; }
.gh-tab { flex: 1; border: 0; background: none; padding: .375rem .5rem; border-radius: .375rem; font: inherit; font-size: .75rem; font-weight: 600; color: #64748b; cursor: pointer; }
.gh-tab.is-active { background: #fff; color: #111827; box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }
.gh-drop { display: block; border: 2px dashed #d1d5db; border-radius: .75rem; padding: 1rem; text-align: center; cursor: pointer; color: #9ca3af; transition: border-color .15s; }
.gh-drop:hover { border-color: #60a5fa; }
.gh-drop > span:first-child { display: block; line-height: 0; }
.gh-drop svg { margin: 0 auto; }
.gh-drop-name { margin-top: .375rem; font-size: .75rem; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gh-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.gh-chip { height: 2rem; padding: 0 .75rem; border-radius: 9999px; border: 1px solid #d1d5db; background: #fff; color: #374151; font: inherit; font-size: .75rem; cursor: pointer; }
.gh-chip:hover { border-color: #60a5fa; }
.gh-chip.is-on { background: #1565C0; border-color: transparent; color: #fff; }

/* pencarian case */
.gh-lookup { padding: 1.5rem; }
@media (min-width: 640px) { .gh-lookup { padding: 2.5rem; } }
.gh-lookup-icon { width: 3.5rem; height: 3.5rem; border-radius: 1rem; background: #eff6ff; color: #1565C0; display: flex; align-items: center; justify-content: center; margin: 0 auto 1.25rem; }
.gh-lookup .gh-sub { max-width: 34rem; margin-left: auto; margin-right: auto; line-height: 1.7; font-size: 1rem; }
.gh-lookup-form { max-width: 32rem; margin: 2rem auto 0; }
.gh-input-icon { position: relative; }
.gh-input-icon .gh-input { padding-left: 2.5rem; font-size: .875rem; }
.gh-input-hash { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: #94a3b8; }
.gh-notfound { max-width: 32rem; margin: 1.5rem auto 0; border: 1px solid #fde68a; background: #fffbeb; border-radius: 1rem; padding: 1.25rem; text-align: center; }
.gh-notfound h2 { margin: 0; font-size: 1rem; font-weight: 700; color: #78350f; }
.gh-notfound p { margin: .25rem 0 .75rem; font-size: .875rem; line-height: 1.6; color: #92400e; }

/* pelacak */
.gh-idrow { display: flex; align-items: center; gap: .375rem; margin-top: .375rem; }
.gh-badge { display: inline-flex; align-items: center; gap: .375rem; padding: .375rem .75rem; border-radius: 9999px; font-size: .75rem; font-weight: 700; white-space: nowrap; }
.gh-badge-active { background: #1565C0; color: #fff; }
.gh-badge-done { background: #dcfce7; color: #15803d; }
.gh-dot { width: .375rem; height: .375rem; border-radius: 9999px; background: #fff; animation: gh-pulse 1.4s ease-in-out infinite; }
.gh-badge-done .gh-dot { background: #22c55e; animation: none; }
@keyframes gh-pulse { 50% { opacity: .35; } }
.gh-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #f3f4f6; }
.gh-meta p.gh-strong { font-size: .875rem; overflow-wrap: anywhere; }
.gh-engineer { display: flex; align-items: center; gap: .75rem; }
.gh-avatar { width: 2.5rem; height: 2.5rem; border-radius: 9999px; background: #1565C0; color: #fff; font-weight: 700; font-size: .875rem; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.gh-steps { list-style: none; margin: 0; padding: 0; }
.gh-step { display: flex; gap: 1rem; position: relative; }
.gh-rail { display: flex; flex-direction: column; align-items: center; }
.gh-node { width: 2rem; height: 2rem; border-radius: 9999px; background: #e5e7eb; color: #9ca3af; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.is-done .gh-node { background: #22c55e; color: #fff; }
.is-current .gh-node { background: #1565C0; color: #fff; }
.gh-line { width: 2px; flex: 1; margin: .25rem 0; min-height: 24px; background: #e5e7eb; }
.is-done .gh-line { background: #4ade80; }
.gh-step-body { flex: 1; padding-bottom: 1.25rem; min-width: 0; }
.gh-step:last-child .gh-step-body { padding-bottom: 0; }
.gh-step-title { margin: 0; font-size: .875rem; font-weight: 700; color: #9ca3af; }
.is-current .gh-step-title { color: #111827; }
.is-done .gh-step-title { color: #15803d; }
.gh-uploads { margin-top: .75rem; }
.gh-uploads summary { cursor: pointer; font-size: .75rem; font-weight: 600; color: #1565C0; }
.gh-file { display: flex; align-items: center; gap: .75rem; margin-top: .5rem; padding: .75rem; border: 1px solid #e5e7eb; border-radius: .75rem; font-size: .875rem; font-weight: 500; color: #111827; text-decoration: none; overflow-wrap: anywhere; }
.gh-file:hover { border-color: #93c5fd; background: #eff6ff; }
.gh-file .gh-ic, .gh-file .gh-ic-sm:first-child { color: #1565C0; }
.gh-pay { margin: .5rem 0 0; font-size: .75rem; color: #4b5563; }
.gh-tone { margin-top: .5rem; border: 1px solid; border-radius: .75rem; padding: .75rem; font-size: .875rem; }
.gh-tone-green { border-color: #bbf7d0; background: #f0fdf4; color: #166534; }
.gh-tone-amber { border-color: #fde68a; background: #fffbeb; color: #92400e; }
.gh-tone-red { border-color: #fecaca; background: #fef2f2; color: #b91c1c; }
.gh-dialog { border: 0; border-radius: 1rem; padding: 1.5rem; max-width: 28rem; width: calc(100vw - 2rem); box-shadow: 0 20px 40px rgba(0, 0, 0, .25); }
.gh-dialog[open] { position: fixed; inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 2rem); overflow: auto; }
.gh-dialog::backdrop { background: rgba(0, 0, 0, .5); }
.gh-dialog h3 { margin: 0 0 .5rem; font-family: Manrope, ui-sans-serif, sans-serif; font-size: 1.125rem; }
.gh-dialog p { margin: 0 0 1rem; font-size: .875rem; line-height: 1.6; color: #4b5563; }
@media (max-width: 480px) { .gh-banner { flex-direction: column; align-items: stretch; } .gh-meta { grid-template-columns: 1fr 1fr; } .gh-card-sm > .gh-between.gh-start { flex-wrap: wrap; } }

/* pilihan paket analisis */
.gh-tiers { display: grid; gap: .5rem; }
.gh-tier { display: block; width: 100%; border: 2px solid #e5e7eb; border-radius: .75rem; background: #fff; padding: .75rem; text-align: left; font: inherit; cursor: pointer; transition: border-color .15s; position: relative; }
.gh-tier:hover { border-color: #93c5fd; }
.gh-tiers .gh-tier { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.gh-tier-label { font-size: .75rem; font-weight: 700; color: #6b7280; }
.gh-tier-right { text-align: right; }
.gh-tier-price { display: block; font-family: Manrope, ui-sans-serif, sans-serif; font-size: .875rem; font-weight: 700; color: #111827; }
.gh-tier-eta { display: block; font-size: .625rem; color: #6b7280; }
.gh-tier-card { padding: 1rem; }
.gh-faster { position: absolute; top: -.5rem; right: -.5rem; font-size: .625rem; font-weight: 700; color: #fff; background: #f59e0b; padding: .125rem .5rem; border-radius: 9999px; }
.gh-dlg-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.gh-dialog h3:empty { display: none; }
.gh-locked { opacity: .6; }
.gh-locked .gh-section-title { color: #9ca3af; }
.gh-tierline { grid-template-columns: 1fr; }
.gh-noteimg { display: block; cursor: zoom-in; }
.gh-noteimg img { display: block; width: 100%; height: auto; }

/* kartu pembayaran manual di pelacak */
.gh-paycard { margin-top: .75rem; }
.gh-paycard .gh-tone { margin-top: 0; }
.gh-uploaded { display: flex; align-items: center; gap: .5rem; border: 1px solid #bbf7d0; background: #f0fdf4; color: #166534; border-radius: .75rem; padding: .75rem; font-size: .875rem; }