:root {
    color-scheme: light;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: #2c3e50;
    background: #e9ecef;
    font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #006b7b; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible { outline: 3px solid #0876b4; outline-offset: 4px; }
.app-container { max-width: 480px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; display: flex; flex-direction: column; background: #f4f7fb; box-shadow: 0 0 20px #00000018; }
.header { padding: 35px 20px 25px; background: #006b7b; color: white; text-align: center; }
.header h1 { margin: 0; font-size: 21px; line-height: 1.4; }
.header p { margin: 8px 0 0; font-size: 14px; line-height: 1.6; }
.batch { display: inline-block; padding: 5px 12px; margin-top: 15px; border: 1px solid #ffffff40; border-radius: 20px; font-size: 12px; line-height: 1.4; }
main { flex: 1; }
.menu-list { padding: 25px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.menu-item { display: flex; align-items: center; gap: 16px; padding: 18px; border: 1px solid #e5ebf0; border-radius: 16px; text-decoration: none; color: inherit; background: white; transition: background .15s ease, border-color .15s ease; }
.menu-item:hover { background: #fafdff; border-color: #b9d2dc; }
.menu-item:active { background: #edf6f9; }
.icon-box { display: flex; align-items: center; justify-content: center; flex: 0 0 54px; height: 54px; border-radius: 14px; font-size: 32px; line-height: 1; font-weight: 600; }
.icon-register { color: #0872c8; background: #e6f2ff; }
.icon-download { color: #ad5100; background: #fff0e6; }
.icon-guide { color: #7e3ab1; background: #f2e6ff; font-size: 26px; }
.menu-content { flex: 1; min-width: 0; }
.menu-content strong { display: block; margin-bottom: 5px; font-size: 16px; }
.menu-content > span { display: block; font-size: 13px; line-height: 1.5; color: #627382; }
.chevron { font-size: 25px; color: #95a7b2; }
.footer { padding: 20px; text-align: center; color: #627382; font-size: 13px; }
.footer a { white-space: nowrap; }
.back-link { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: inherit; font-size: 14px; }
.guide-header { text-align: left; padding-top: 15px; }
.guide-header h1 { margin-top: 12px; font-size: 25px; }
.guide-content { padding: 22px 20px 4px; }
.steps { margin: 0; padding: 0; list-style: none; counter-reset: steps; }
.steps > li { counter-increment: steps; margin-bottom: 16px; padding: 20px; border: 1px solid #e5ebf0; border-radius: 16px; background: white; }
.steps h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 17px; line-height: 1.5; }
.steps h2::before { content: counter(steps); display: flex; align-items: center; justify-content: center; flex: 0 0 28px; height: 28px; background: #e7f3f5; color: #006b7b; border-radius: 50%; font-size: 14px; }
.steps p, .payment p { margin: 12px 0 0; font-size: 14px; line-height: 1.7; }
.document-list { padding-left: 20px; margin: 12px 0; font-size: 14px; line-height: 1.7; }
.document-list li + li { margin-top: 6px; }
.tip { padding: 12px; border-radius: 8px; background: #f0f6fa; color: #4d6275; }
.button { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; padding: 10px 16px; border: 1px solid #b5d2d8; border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1.5; text-decoration: none; }
.steps .button { margin-top: 16px; }
.primary { color: white; background: #006b7b; border-color: #006b7b; }
.primary:hover { background: #005361; }
.payment { margin: 20px 0; padding: 18px 20px; border: 1px solid #e5ebf0; border-radius: 16px; background: white; }
.payment summary { font-size: 16px; font-weight: 650; cursor: pointer; line-height: 1.5; }
.account { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 18px; }
.transfer-format { overflow-wrap: anywhere; }
.guide-actions { display: flex; justify-content: center; padding: 0 0 12px; }
@media (max-width: 360px) {
    .header { padding-right: 16px; padding-left: 16px; }
    .header h1 { font-size: 19px; }
    .menu-list { padding-right: 14px; padding-left: 14px; }
    .menu-item { gap: 12px; padding: 15px 12px; }
    .icon-box { flex-basis: 45px; height: 45px; }
    .guide-content { padding-right: 14px; padding-left: 14px; }
    .steps > li { padding: 16px; }
}

.payment-warning { color: #b42318; background: #fff1f0; border-left: 4px solid #b42318; border-radius: 6px; padding: 12px 14px; font-size: 14px; font-weight: 700; line-height: 1.6; }

.icon-lookup { color: #147856; background: #e4f5ed; }

.payment-contact { font-size: 14px; line-height: 1.6; margin: 12px 0 16px; }
.payment-contact a { font-weight: 700; white-space: nowrap; }