:root { color-scheme: light; }
html { scroll-behavior: smooth; }
body { background: radial-gradient(circle at 12% 0%, #dcecff 0, transparent 32%), radial-gradient(circle at 86% 14%, #edf5ff 0, transparent 25%), #f8fbff !important; color: #172b4d; }
body::before { content: ''; position: fixed; inset: -20% auto auto -12%; width: 38vw; height: 38vw; min-width: 280px; min-height: 280px; background: radial-gradient(circle, rgba(59,130,246,.12), transparent 68%); pointer-events: none; z-index: -1; animation: ui-glow 13s ease-in-out infinite alternate; }
.fixed-navbar { background: rgba(255,255,255,.86) !important; border-bottom: 1px solid #dbeafe !important; box-shadow: 0 8px 30px rgba(37,99,235,.06); backdrop-filter: blur(18px); }
.fixed-navbar .text-white { color: #1d4ed8 !important; }
.fixed-navbar a, .fixed-navbar span { letter-spacing: -.015em; }
main > div { animation: ui-enter .45s ease both; }
main .bg-white, main .bg-gray-50, main [class*="bg-[#"] { border-radius: 16px; }
main .border, main [class*="border-[#"] { border-color: #dbe7f6 !important; }
main .shadow-sm { box-shadow: 0 10px 28px rgba(30,64,175,.07) !important; }
main button, main a, .fixed-navbar button, .fixed-navbar a { transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease; }
main button:hover:not(:disabled), main a:hover, .fixed-navbar button:hover { transform: translateY(-2px); }
main button:active:not(:disabled), .fixed-navbar button:active { transform: translateY(0) scale(.98); }
main input, main select, main textarea { border-radius: 11px !important; }
main input:focus, main select:focus, main textarea:focus { outline: 2px solid rgba(59,130,246,.32); outline-offset: 1px; }
main table { border-collapse: separate; border-spacing: 0; }
.ui-hero { position: relative; overflow: hidden; background: linear-gradient(135deg, #fff 0%, #eaf3ff 58%, #dbeafe 100%) !important; box-shadow: 0 22px 60px rgba(37,99,235,.11); }
.ui-hero::after { content: ''; position: absolute; width: 260px; height: 260px; border: 1px solid rgba(59,130,246,.18); border-radius: 50%; top: -130px; right: -80px; box-shadow: 0 0 0 35px rgba(59,130,246,.04), 0 0 0 72px rgba(59,130,246,.03); pointer-events: none; }
.ui-hero h1 { font-size: clamp(1.6rem, 4vw, 2.6rem) !important; font-weight: 750 !important; line-height: 1.18; letter-spacing: -.035em; }
.ui-balance-card { overflow: hidden; box-shadow: 0 20px 55px rgba(37,99,235,.1); }
.ui-balance-card > div:first-child { background: linear-gradient(90deg, #dbeafe, #eff6ff) !important; }
.ui-balance-card #balanceReal, .ui-balance-card #balanceHidden { font-size: clamp(1.4rem, 4vw, 2.2rem) !important; font-weight: 750 !important; letter-spacing: -.035em; }
.ui-stat-card { overflow: hidden; box-shadow: 0 10px 28px rgba(30,64,175,.07); }
.ui-stat-card:hover { transform: translateY(-3px); box-shadow: 0 18px 38px rgba(30,64,175,.12); }
main tbody tr { transition: background-color .2s ease; }
.ui-theme-toggle { width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #cfe0fa; border-radius: 12px; background: #eff6ff; color: #1d4ed8; cursor: pointer; box-shadow: 0 5px 14px rgba(37,99,235,.08); }
.ui-theme-toggle:hover { background: #dbeafe; }
.ui-theme-floating { position: fixed; right: 18px; top: 16px; z-index: 100; }
.ui-theme-toggle .ui-sun { display: none; }
html[data-theme="dark"] { color-scheme: dark; }
html[data-theme="dark"] body { background: radial-gradient(circle at 10% 0%, #122c50 0, transparent 32%), #081526 !important; color: #e8f2ff !important; }
html[data-theme="dark"] .fixed-navbar { background: rgba(9,24,43,.9) !important; border-color: #203c5d !important; }
html[data-theme="dark"] .fixed-navbar .text-white { color: #dbeafe !important; }
html[data-theme="dark"] .mobile-menu, html[data-theme="dark"] .bg-white, html[data-theme="dark"] .bg-gray-50, html[data-theme="dark"] .bg-gray-100, html[data-theme="dark"] .bg-blue-50 { background-color: #10243c !important; }
html[data-theme="dark"] .bg-blue-100 { background-color: #1a3a60 !important; }
html[data-theme="dark"] .ui-hero { background: linear-gradient(135deg, #102a48, #0c1c32 72%, #153960) !important; }
html[data-theme="dark"] .ui-balance-card > div:first-child { background: #193c63 !important; }
html[data-theme="dark"] .text-gray-800, html[data-theme="dark"] .text-gray-700, html[data-theme="dark"] .text-gray-600 { color: #e5f0ff !important; }
html[data-theme="dark"] .text-gray-500, html[data-theme="dark"] .text-gray-400 { color: #a9bed7 !important; }
html[data-theme="dark"] .text-blue-500, html[data-theme="dark"] .text-blue-600 { color: #80b7ff !important; }
html[data-theme="dark"] main .border, html[data-theme="dark"] main [class*="border-[#"], html[data-theme="dark"] .border-gray-200 { border-color: #294564 !important; }
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea { background-color: #0b1d33 !important; color: #edf6ff !important; border-color: #365170 !important; }
html[data-theme="dark"] input::placeholder, html[data-theme="dark"] textarea::placeholder { color: #8fa8c5 !important; }
html[data-theme="dark"] .ui-theme-toggle { background: #193755; border-color: #3a5d81; color: #fcd34d; }
html[data-theme="dark"] .ui-theme-toggle .ui-moon { display: none; }
html[data-theme="dark"] .ui-theme-toggle .ui-sun { display: inline; }
@keyframes ui-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ui-glow { to { transform: translate(12vw, 6vh); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }

/* Layout utama: gunakan ruang desktop, tetap nyaman pada layar kecil. */
* { box-sizing: border-box; }
body { min-width: 320px; }
main { width: 100%; max-width: none !important; padding: 24px clamp(12px, 2.5vw, 42px) 42px !important; }
main > div { width: 100%; max-width: 1440px !important; margin-inline: auto !important; padding-inline: clamp(8px, 1vw, 18px) !important; }
main > .ui-docs-page { max-width: 1280px !important; }
main > .ui-settings-page { max-width: 1180px !important; }
.fixed-navbar > div { max-width: none !important; padding-inline: clamp(18px, 3vw, 48px) !important; height: 64px !important; }
.fixed-navbar .font-medium { font-weight: 700; }
.mobile-menu { top: 64px !important; }
.mobile-menu-overlay { top: 64px !important; height: calc(100dvh - 64px) !important; }
main .bg-white, main .bg-gray-50, main [class*="bg-[#"] { border-radius: 20px !important; }
main .bg-white, main .bg-gray-50 { box-shadow: 0 12px 38px rgba(27, 71, 132, .055); }
main [class*="rounded-[2px]"] { border-radius: 16px !important; }
main :is(button, a):focus-visible, .fixed-navbar :is(button, a):focus-visible, .ui-banner :is(button, a):focus-visible { outline: 3px solid #60a5fa; outline-offset: 3px; }
main :is(input, select, textarea) { min-height: 42px; }
main table { width: 100%; }
main .overflow-x-auto { -webkit-overflow-scrolling: touch; }

/* Pengumuman yang diatur admin. */
.ui-announcement { position: relative; z-index: 2; display: flex; align-items: center; gap: 14px; width: calc(100% - 28px); max-width: 1440px; margin: -12px auto 20px; padding: 14px 18px; color: #164171; border: 1px solid #bfd9ff; border-radius: 16px; background: linear-gradient(100deg, #e6f1ff, #f4f9ff); box-shadow: 0 10px 30px rgba(40, 98, 185, .07); }
.ui-announcement-icon { display: grid; place-items: center; flex: 0 0 38px; height: 38px; border-radius: 12px; background: #cfe4ff; }
.ui-announcement strong { display: block; font-size: 13px; }
.ui-announcement p { margin: 2px 0 0; font-size: 12px; line-height: 1.5; }
.ui-announcement a { margin-left: auto; flex: none; color: #135ab4; font-weight: 700; font-size: 12px; }
.ui-announcement a:hover { text-decoration: underline; }

/* Slider beranda. */
.ui-home-page { max-width: 1440px !important; }
.ui-banner { position: relative; overflow: hidden; margin-bottom: 28px; border-radius: 28px; background: linear-gradient(115deg, #07234a, #135aba 58%, #4499ec); color: white; box-shadow: 0 24px 65px rgba(22, 73, 143, .23); }
.ui-banner::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 72% 12%, rgba(255,255,255,.22), transparent 25%), radial-gradient(circle at 90% 95%, rgba(83, 177, 255, .35), transparent 36%); pointer-events: none; }
.ui-banner-slide { position: relative; min-height: 330px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, .7fr); align-items: center; gap: 26px; padding: clamp(28px, 5vw, 72px); animation: ui-banner-in .55s ease both; }
.ui-banner-slide[hidden] { display: none; }
.ui-banner-copy { position: relative; z-index: 1; max-width: 700px; }
.ui-eyebrow { display: inline-block; color: #3979cf; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.ui-banner .ui-eyebrow { color: #add8ff; }
.ui-banner h2 { margin: 12px 0 12px; font-size: clamp(30px, 4vw, 58px); line-height: 1.08; letter-spacing: -.05em; font-weight: 800; }
.ui-banner p { max-width: 560px; color: #d8eaff; font-size: clamp(13px, 1.2vw, 16px); line-height: 1.65; }
.ui-banner-link { display: inline-flex; align-items: center; gap: 10px; margin-top: 20px; padding: 12px 18px; border-radius: 12px; background: white; color: #1559ab; font-weight: 750; font-size: 13px; }
.ui-banner-link:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(0,0,0,.16); }
.ui-banner-image { width: 100%; height: 250px; border-radius: 22px; object-fit: cover; box-shadow: 0 20px 35px rgba(1,20,45,.18); }
.ui-banner-art { justify-self: center; position: relative; display: grid; place-items: center; width: min(240px, 25vw); height: min(240px, 25vw); min-width: 170px; min-height: 170px; border: 1px solid rgba(255,255,255,.25); border-radius: 30%; background: rgba(255,255,255,.13); transform: rotate(-12deg); box-shadow: 0 0 0 28px rgba(255,255,255,.06), 0 0 0 58px rgba(255,255,255,.035); }
.ui-banner-art span { font-size: clamp(54px, 8vw, 100px); font-weight: 900; letter-spacing: -.13em; transform: rotate(12deg); }
.ui-banner-art i { position: absolute; top: 14px; right: 14px; font-size: 28px; color: #facc15; }
.ui-banner-controls { position: absolute; z-index: 2; right: 24px; bottom: 20px; display: flex; align-items: center; gap: 14px; }
.ui-banner-controls > button { width: 34px; height: 34px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.14); }
.ui-banner-dots { display: flex; align-items: center; gap: 6px; }
.ui-banner-dots button { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.48); transition: width .2s ease, background .2s ease; }
.ui-banner-dots button.is-active { width: 24px; background: white; }
.ui-home-page > .ui-hero { padding: clamp(30px, 5vw, 70px) !important; }
.ui-home-page > .ui-hero .flex.flex-col.gap-3 { flex-direction: row; justify-content: center; max-width: 540px; margin-inline: auto; }
.ui-home-page > .ui-hero .flex.flex-col.gap-3 a { width: auto; flex: 1; }
.ui-home-page > div:not(.ui-hero):not(.ui-banner) .grid { gap: 20px; }

/* Dashboard pengguna. */
.ui-dashboard-page .ui-balance-card { background: linear-gradient(110deg, #0b3267, #165db7) !important; border: 0 !important; color: white; }
.ui-dashboard-page .ui-balance-card > div:first-child { background: transparent !important; border-color: rgba(255,255,255,.2) !important; }
.ui-dashboard-page .ui-balance-card :is(span, h2) { color: white !important; }
.ui-dashboard-page .ui-balance-card #balanceReal { font-size: clamp(30px, 4vw, 54px) !important; }
.ui-dashboard-page .grid { gap: 18px; }
.ui-dashboard-page .ui-stat-card { transition: transform .2s ease, box-shadow .2s ease; }
.ui-dashboard-section { margin-top: 38px; }
.ui-section-heading { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 16px; }
.ui-section-heading h2 { margin: 3px 0 0; color: #183858; font-size: clamp(18px, 2vw, 24px); font-weight: 800; letter-spacing: -.03em; }
.ui-section-heading p, .ui-section-heading a { margin: 0; color: #57718e; font-size: 12px; }
.ui-section-heading a { color: #1e63b5; font-weight: 750; }
.ui-quick-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.ui-quick-grid a { position: relative; display: flex; flex-direction: column; gap: 8px; min-height: 160px; padding: 20px; border: 1px solid #dbe7f6; border-radius: 20px; background: white; box-shadow: 0 12px 30px rgba(30,64,175,.055); }
.ui-quick-grid a:hover { transform: translateY(-4px); box-shadow: 0 18px 35px rgba(30,64,175,.12); }
.ui-quick-grid strong { color: #183858; font-size: 14px; }
.ui-quick-grid small { color: #6c8097; font-size: 11px; line-height: 1.45; }
.ui-quick-grid a > .fa-arrow-right { position: absolute; right: 20px; top: 29px; color: #6d9ddd; }
.ui-quick-icon, .ui-recent-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; color: #1e63b5; background: #e7f1ff; }
.ui-recent-list { overflow: hidden; border: 1px solid #dbe7f6; border-radius: 20px; background: white; }
.ui-recent-item { display: flex; align-items: center; gap: 15px; padding: 15px 20px; border-bottom: 1px solid #eaf0f8; }
.ui-recent-item:last-child { border: 0; }
.ui-recent-item > span:nth-child(2) { min-width: 0; }
.ui-recent-item strong, .ui-recent-item small { display: block; }
.ui-recent-item strong { color: #183858; font-size: 12px; overflow-wrap: anywhere; }
.ui-recent-item small { color: #7790a9; font-size: 11px; margin-top: 3px; }
.ui-recent-amount { margin-left: auto; text-align: right; white-space: nowrap; }

/* Dokumentasi yang mudah dipindai dan disalin. */
.ui-docs-page > .mb-6:first-child { padding: 26px 28px; border-radius: 24px; background: linear-gradient(110deg, #0b3267, #2369c1); color: white; }
.ui-docs-page > .mb-6:first-child :is(h1, p) { color: white !important; }
.ui-docs-page > .mb-6:first-child h1 { margin: 5px 0; font-size: clamp(23px, 3vw, 36px); font-weight: 800; }
.ui-docs-page > .mb-6:first-child .ui-eyebrow { color: #a9d5ff; }
.ui-docs-start { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 26px; border: 1px solid #d7e8fc; border-radius: 20px; background: #f0f7ff; margin-bottom: 16px; }
.ui-docs-start h2 { color: #173b69; font-weight: 800; font-size: 18px; }
.ui-docs-start p { color: #52708f; font-size: 12px; line-height: 1.5; }
.ui-docs-start a { flex: none; color: #1b61b4; font-size: 12px; font-weight: 800; }
.ui-docs-key { margin-bottom: 26px; padding: 18px 22px; border: 1px solid #dbe7f6; border-radius: 18px; background: white; }
.ui-docs-key label { display: block; margin-bottom: 9px; color: #244564; font-size: 12px; font-weight: 750; }
.ui-docs-key > div { display: flex; align-items: center; border: 1px solid #cadcf1; border-radius: 12px; }
.ui-docs-key input { width: 100%; padding: 10px 13px; border: 0; background: transparent; font-size: 13px; }
.ui-docs-key button { padding: 10px 14px; color: #496a91; }
.ui-docs-key p { margin: 8px 0 0; color: #71869c; font-size: 11px; }
.ui-docs-page > section { padding: 24px 26px; border: 1px solid #dbe7f6; border-radius: 20px; background: white; box-shadow: 0 12px 30px rgba(30,64,175,.045); }
.ui-docs-page > section h2 { font-size: 18px; font-weight: 800; margin-bottom: 10px; }
.ui-docs-page [data-code-switcher] { border-radius: 14px !important; border-color: #dbe7f6 !important; }
.ui-docs-page [data-code-switcher] pre { max-height: 350px; overflow: auto; padding-top: 40px; white-space: pre !important; overflow-wrap: normal; }
.ui-docs-page [data-code-switcher] code { white-space: pre; }
.ui-docs-page .ui-copy-button { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid #c9ddf4 !important; border-radius: 9px; background: white !important; color: #235a9b !important; font-size: 11px; font-weight: 750; }

/* Login desktop dengan panel informasi dan gerak halus. */
.ui-auth-layout { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(320px, 430px); grid-template-rows: auto auto; align-content: center; column-gap: clamp(28px, 5vw, 100px); width: 100%; padding: clamp(30px, 6vw, 80px) max(5vw, calc((100vw - 1360px)/2)) !important; background: transparent !important; }
.ui-auth-intro { grid-row: 1 / 3; position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 530px; padding: clamp(28px, 4vw, 60px); overflow: hidden; border-radius: 32px; background: linear-gradient(135deg, #092951, #1454a1 68%, #3485d1); color: white; box-shadow: 0 25px 65px rgba(25, 77, 150, .18); animation: ui-enter .65s ease both; }
.ui-auth-intro::after { content: ''; position: absolute; width: 350px; height: 350px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; right: -100px; bottom: -170px; box-shadow: 0 0 0 50px rgba(255,255,255,.04), 0 0 0 100px rgba(255,255,255,.025); }
.ui-auth-brand { position: absolute; top: 35px; left: 38px; display: inline-flex; align-items: center; gap: 10px; color: white; font-weight: 800; font-size: 16px; }
.ui-auth-brand span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255,255,255,.18); }
.ui-auth-intro .ui-eyebrow { color: #a9d5ff; }
.ui-auth-intro h1 { position: relative; z-index: 1; max-width: 560px; margin: 15px 0; font-size: clamp(35px, 4.5vw, 68px); line-height: 1.06; font-weight: 800; letter-spacing: -.06em; }
.ui-auth-intro p { position: relative; z-index: 1; max-width: 490px; font-size: 15px; line-height: 1.7; color: #d7e9ff; }
.ui-auth-orbit { position: absolute; right: 13%; bottom: 9%; width: 95px; height: 95px; border: 1px solid rgba(255,255,255,.35); border-radius: 50%; animation: ui-orbit 14s linear infinite; }
.ui-auth-orbit-center { position: absolute; inset: 17px; display: grid; place-items: center; border-radius: 20px; background: rgba(255,255,255,.18); font-size: 24px; }
.ui-auth-orbit-dot { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: #7dd3fc; }
.ui-auth-orbit-dot.one { top: -7px; left: 42px; }.ui-auth-orbit-dot.two { bottom: 10px; left: -5px; width: 9px; height: 9px; background: #facc15; }
.ui-auth-card { grid-column: 2; width: 100%; max-width: none !important; border-radius: 26px !important; box-shadow: 0 22px 60px rgba(29,72,132,.1) !important; animation: ui-enter .7s .1s ease both; }
.ui-auth-card h2 { font-size: 22px; font-weight: 800; }
.ui-auth-card button[type="submit"] { min-height: 48px; border-radius: 12px; font-size: 14px; font-weight: 750; }
.ui-auth-links { grid-column: 2; margin-top: 16px !important; gap: 8px !important; }
@keyframes ui-banner-in { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ui-orbit { to { transform: rotate(360deg); } }

@media (min-width: 1024px) {
  body.has-account-nav { padding-top: 72px; }
  body.has-account-nav .fixed-navbar { height: 64px; }
  body.has-account-nav .fixed-navbar label[for="sidebar-toggle"] { display: none; }
  body.has-account-nav .mobile-menu { position: fixed; top: 64px !important; left: 0; width: 244px; height: calc(100dvh - 64px); max-height: none !important; overflow-y: auto; border-right: 1px solid #dbe7f6; background: rgba(255,255,255,.93); box-shadow: 8px 0 24px rgba(26,70,126,.035); backdrop-filter: blur(18px); }
  body.has-account-nav .mobile-menu-inner { padding: 20px 12px; }
  body.has-account-nav .mobile-menu-inner > div { padding: 0; }
  body.has-account-nav .mobile-menu-inner a { justify-content: flex-start; gap: 12px; padding: 11px 14px; border-radius: 11px; font-size: 13px; }
  body.has-account-nav .mobile-menu-overlay { display: none; }
  body.has-account-nav main, body.has-account-nav > footer, body.has-account-nav > .ui-announcement { margin-left: 244px; width: calc(100% - 244px); }
  body.has-account-nav main > div { max-width: 1440px !important; }
}
@media (max-width: 1023px) {
  .mobile-menu { overflow-y: auto; }
  .sidebar-checkbox:checked ~ .mobile-menu { max-height: calc(100dvh - 64px) !important; }
  .ui-auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 600px; margin-inline: auto; gap: 20px; }
  .ui-auth-intro { grid-row: auto; min-height: 230px; padding: 48px 30px 30px; }
  .ui-auth-intro h1 { font-size: 35px; }
  .ui-auth-intro p { font-size: 12px; }
  .ui-auth-orbit { display: none; }
  .ui-auth-card, .ui-auth-links { grid-column: 1; }
  .ui-auth-brand { top: 17px; left: 30px; font-size: 12px; }
}
@media (max-width: 700px) {
  main { padding: 12px 10px 28px !important; }
  main > div { padding-inline: 6px !important; }
  .ui-announcement { flex-wrap: wrap; margin: 0 auto 12px; }
  .ui-announcement a { margin-left: 52px; }
  .ui-banner { border-radius: 20px; }
  .ui-banner-slide { grid-template-columns: 1fr; min-height: 285px; padding: 28px 24px 58px; }
  .ui-banner h2 { font-size: clamp(28px, 8vw, 42px); }
  .ui-banner-art, .ui-banner-image { display: none; }
  .ui-banner-controls { right: 18px; bottom: 15px; }
  .ui-home-page > .ui-hero .flex.flex-col.gap-3 { flex-direction: column; }
  .ui-home-page > .ui-hero .flex.flex-col.gap-3 a { width: 100%; }
  .ui-quick-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ui-quick-grid a { min-height: 145px; padding: 15px; }
  .ui-section-heading p { display: none; }
  .ui-docs-start { align-items: flex-start; flex-direction: column; }
  .ui-docs-page > section { padding: 17px 15px; }
  .ui-docs-page [data-code-switcher] pre { font-size: 11px; }
  .ui-auth-layout { padding: 20px 14px 50px !important; }
  .ui-auth-intro { min-height: 205px; }
  .ui-auth-intro h1 { font-size: 30px; }
}
@media (max-width: 420px) {
  .ui-quick-grid { grid-template-columns: 1fr; }
  .ui-quick-grid a { min-height: 110px; }
  .ui-recent-item { padding: 12px; gap: 10px; }
  .ui-recent-amount strong { font-size: 11px; }
}
html[data-theme="dark"] .ui-announcement { background: #17395d; border-color: #35608f; color: #e8f2ff; }
html[data-theme="dark"] .ui-announcement-icon { background: #28527f; }
html[data-theme="dark"] .ui-announcement a { color: #a9d4ff; }
html[data-theme="dark"] .ui-section-heading h2, html[data-theme="dark"] .ui-quick-grid strong, html[data-theme="dark"] .ui-recent-item strong { color: #e8f2ff; }
html[data-theme="dark"] .ui-quick-grid a, html[data-theme="dark"] .ui-recent-list, html[data-theme="dark"] .ui-docs-key, html[data-theme="dark"] .ui-docs-page > section { background: #10243c; border-color: #294564; }
html[data-theme="dark"] .ui-docs-start { background: #17395d; border-color: #35608f; }
html[data-theme="dark"] .ui-docs-start h2 { color: #e8f2ff; }
html[data-theme="dark"] .ui-docs-start p { color: #bfd1e5; }
html[data-theme="dark"] .ui-docs-key label { color: #e8f2ff; }
html[data-theme="dark"] body.has-account-nav .mobile-menu { background: rgba(9,24,43,.94); border-color: #294564; }
.ui-payment-page { width: calc(100% - 28px); max-width: 820px !important; min-height: calc(100dvh - 28px); margin: 14px auto; overflow: hidden; border: 1px solid #dbe7f6; border-radius: 24px !important; box-shadow: 0 24px 70px rgba(22, 66, 119, .1) !important; }
.ui-payment-page > div:first-child { background: #f8fbff; }
.ui-payment-page > div:nth-child(2) { width: 100%; padding: clamp(20px, 4vw, 44px) !important; }
.ui-payment-page table { overflow: hidden; border-radius: 16px; background: #f8fbff; }
.ui-payment-page table td { padding: 13px 18px !important; font-size: 13px; }
.ui-payment-page #qrCodeWrapper img { width: clamp(210px, 24vw, 270px); height: clamp(210px, 24vw, 270px); }
.ui-payment-page #payButton { max-width: 360px; border-radius: 12px; min-height: 46px; font-weight: 700; }
@media (max-width: 700px) { .ui-payment-page { width: 100%; min-height: 100dvh; margin: 0; border: 0; border-radius: 0 !important; } .ui-payment-page table td { padding: 10px !important; font-size: 11px; } }