.up-page,
.up-page *,
.up-page *::before,
.up-page *::after {
    box-sizing: border-box;
}

.up-page {
    font-family: 'Be Vietnam Pro', sans-serif;
}

.up-page button,
.up-page input,
.up-page textarea,
.up-page select {
    font-family: inherit;
}

.up-page {
    width: 100%;
    max-width: 1520px;
    margin: 0 auto;
    min-height: calc(100vh - 160px);
    padding: 40px 28px 80px;
    color: #11283f;
    background: #edf3f7;
}

.up-hero,
.up-service-tabs,
.up-content-grid {
    width: 100%;
}

.up-hero {
    position: relative;
    display: flex;
    min-height: 0;
    align-items: center;
    justify-content: space-between;
    gap: 34px;
    overflow: hidden;
    padding: 22px 24px;
    border: 1px solid #d7e8ed;
    border-left: 3px solid #10b7be;
    border-radius: 8px;
    color: #11283f;
    background: #fff;
    box-shadow: 0 8px 18px rgba(31, 66, 91, .06);
}

.up-hero::after {
    position: absolute;
    top: 20px;
    right: 270px;
    width: 1px;
    height: calc(100% - 40px);
    background: #d7e8ed;
    content: '';
}

.up-hero-copy {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.up-eyebrow,
.up-panel-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #82e2e7;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.up-eyebrow {
    margin-bottom: 7px;
    padding-left: 9px;
    border-left: 3px solid #10b7be;
    color: #078fa0;
}

.up-hero h1 {
    margin: 0 0 5px;
    color: #11283f;
    font-size: 30px;
    font-weight: 800;
    letter-spacing: 0;
    line-height: 1.1;
}

.up-hero p {
    max-width: 610px;
    margin: 0;
    color: #617b8f;
    font-size: 12.5px;
    line-height: 1.45;
}

.up-wallet-card {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 185px;
    gap: 5px;
    padding-left: 24px;
    padding-bottom: 1px;
    text-align: right;
}

.up-wallet-card span { color: #6c8494; font-size: 11px; }
.up-wallet-card strong { color: #0c91aa; font-size: 21px; line-height: 1.25; }
.up-wallet-card a { color: #11677d; font-size: 12px; font-weight: 700; text-decoration: none; }
.up-wallet-card a:hover { color: #078fa0; }

.up-service-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    margin-bottom: 20px;
}

.up-service-tab {
    position: relative;
    display: flex;
    min-height: 76px;
    align-items: center;
    gap: 13px;
    overflow: hidden;
    padding: 13px 15px;
    border: 1px solid #d2e2eb;
    border-radius: 9px;
    color: #17344f;
    background: #fff;
    text-decoration: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}

.up-service-tab::before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: #10b7be;
    content: '';
}

.up-service-tab--blue::before { background: #347de0; }
.up-service-tab--pink::before { background: #d94388; }
.up-service-tab--red::before { background: #d71920; }
.up-service-tab:hover,
.up-service-tab:focus-visible,
.up-service-tab.is-active {
    border-color: #00b9c2;
    box-shadow: 0 10px 22px rgba(23, 70, 96, .12);
    outline: none;
}

.up-service-tab--blue:focus-visible,
.up-service-tab--blue.is-active { border-color: #347de0; }
.up-service-tab--pink:focus-visible,
.up-service-tab--pink.is-active { border-color: #d94388; }
.up-service-tab--red:focus-visible,
.up-service-tab--red.is-active { border-color: #d71920; }

.up-service-tab-icon {
    display: grid;
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    place-items: center;
    border-radius: 10px;
    font-size: 18px;
}

.up-service-tab--teal .up-service-tab-icon { color: #008f9b; background: #ddf6f7; }
.up-service-tab--blue .up-service-tab-icon { color: #226fca; background: #e4efff; }
.up-service-tab--red .up-service-tab-icon { color: #b30f16; background: #fff0f1; }
.up-service-tab--pink .up-service-tab-icon { color: #d23a7d; background: #fde8f1; }
.up-service-tab > span:nth-child(2) { display: grid; min-width: 0; gap: 4px; }
.up-service-tab strong { color: #17344f; font-size: 13px; line-height: 1.35; }
.up-service-tab small { overflow: hidden; color: #617b8f; font-size: 11px; line-height: 1.4; text-overflow: ellipsis; white-space: nowrap; }
.up-service-tab-arrow { margin-left: auto; color: #8aa3b4; font-size: 11px; }

.up-history-link-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: -6px 0 20px;
    padding: 10px 13px;
    border: 1px solid #d6e8ed;
    border-radius: 8px;
    background: #f7fcfd;
    color: #5c7688;
    font-size: 11px;
    line-height: 1.45;
}

.up-history-link-row span { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.up-history-link-row span > i { color: #0b9ba8; }
.up-history-link-row a { flex: 0 0 auto; color: #007f8a; font-weight: 800; text-decoration: none; }
.up-history-link-row a:hover { color: #005d65; text-decoration: underline; }

.up-history-overview {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    margin-bottom: 18px;
    padding-bottom: 18px;
    border-bottom: 1px solid #d7e7ed;
}

.up-history-page { max-width: 1420px; }
.up-history-page .up-history-panel { border-top: 3px solid #0caeb7; box-shadow: 0 14px 30px rgba(24, 76, 90, .08); }
.up-history-overview-copy { min-width: 0; }
.up-history-overview h1 { margin: 7px 0 5px; color: #13314a; font-size: 25px; font-weight: 800; line-height: 1.22; }
.up-history-overview p { margin: 0; color: #607b8e; font-size: 12px; line-height: 1.55; }
.up-history-back-link { display: inline-flex; min-height: 40px; align-items: center; gap: 7px; flex: 0 0 auto; padding: 9px 13px; border: 1px solid #b7dde2; border-radius: 7px; color: #007c86; background: #f5fcfc; box-shadow: 0 3px 8px rgba(24, 76, 90, .05); font-size: 12px; font-weight: 800; text-decoration: none; }
.up-history-back-link:hover { border-color: #0caeb7; color: #00616a; background: #ebfafa; }

.up-history-panel { padding: 24px; }
.up-history-filter { display: grid; grid-template-columns: minmax(190px, 240px) minmax(150px, 220px) minmax(0, 1fr); align-items: end; gap: 14px; margin-bottom: 18px; padding: 13px 14px; border: 1px solid #dce9ee; border-radius: 8px; background: #f8fbfc; }
.up-history-filter label { display: grid; min-width: 0; gap: 6px; color: #31536a; font-size: 11px; font-weight: 700; }
.up-history-filter select { min-height: 37px; border: 1px solid #cbdfe9; border-radius: 7px; padding: 7px 31px 7px 10px; color: #294b62; background: #fbfdfe; font-size: 12px; }
.up-history-filter select:focus-visible { border-color: #00aeb7; box-shadow: 0 0 0 3px rgba(0, 174, 183, .16); outline: none; }
.up-history-summary { justify-self: end; padding-bottom: 10px; color: #688195; font-size: 11px; text-align: right; }
.up-history-summary strong { color: #0b8e98; font-size: 13px; }
.up-history-table-wrap { overflow-x: auto; border: 1px solid #d6e5ec !important; border-radius: 8px; background: #fff; box-shadow: 0 5px 14px rgba(24, 76, 90, .04); }
.up-history-table { width: 100%; min-width: 760px; border: 0 !important; border-collapse: collapse; color: #35576e; font-size: 12px; }
.up-history-table thead,
.up-history-table tbody,
.up-history-table tr,
.up-history-table th,
.up-history-table td { border: 0 !important; }
.up-history-table th { padding: 12px 14px; border-bottom: 1px solid #d6e5ec !important; color: #627d8f; background: #f4f9fb; font-size: 10px; font-weight: 800; letter-spacing: .05em; text-align: left; text-transform: uppercase; white-space: nowrap; }
.up-history-table td { padding: 15px 14px; border-top: 1px solid #e1edf1 !important; vertical-align: middle; }
.up-history-table tbody tr:hover { background: #f9fcfd; }
.up-history-table tbody tr:first-child td { border-top: 0 !important; }
.up-history-table tbody tr:last-child td { border-bottom: 0 !important; }
.up-history-service { display: grid; gap: 3px; min-width: 150px; }
.up-history-service strong { color: #173b56; font-size: 12px; }
.up-history-service small, .up-history-time { color: #7790a0; font-size: 10px; }
.up-history-id { color: #45657b; font-family: monospace; font-size: 11px; }
.up-history-result { color: #007c86; font-size: 11px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.up-history-result:hover { color: #005d65; text-decoration: underline; }
.up-history-result--empty { color: #91a4b0; font-size: 11px; }
.up-history-charge { color: #0a7780; font-size: 12px; font-weight: 800; white-space: nowrap; }
.up-history-status { display: inline-flex; align-items: center; min-height: 25px; padding: 4px 8px; border: 1px solid; border-radius: 999px; font-size: 10px; font-weight: 800; white-space: nowrap; }
.up-history-status--success { border-color: #a9dfc8; color: #087655; background: #effbf5; }
.up-history-status--pending { border-color: #ecd498; color: #896117; background: #fff9eb; }
.up-history-status--error { border-color: #efb4b4; color: #a13d3d; background: #fff5f5; }
.up-history-empty { display: grid; min-height: 190px; place-items: center; align-content: center; gap: 8px; padding: 26px; color: #668094; text-align: center; }
.up-history-empty i { color: #12a6af; font-size: 25px; }
.up-history-empty strong { color: #24475f; font-size: 14px; }
.up-history-empty span { max-width: 340px; font-size: 11px; line-height: 1.55; }
.up-history-pagination { display: flex; justify-content: flex-end; margin-top: 16px; }
.up-history-pagination .pagination { margin: 0; }

.up-content-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    gap: 20px;
    margin-top: 0;
}

.up-panel {
    min-width: 0;
    padding: 24px;
    border: 1px solid #d3e2eb;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 12px 28px rgba(24, 53, 76, .07);
}

.up-panel-heading,
.up-side-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
}

.up-heading-main {
    display: flex;
    align-items: center;
    min-width: 0;
    flex: 1;
    gap: 16px;
}

.up-heading-copy,
.up-side-heading > div {
    min-width: 0;
    flex: 1;
}

.up-heading-title-row {
    display: flex;
    min-width: 0;
    align-items: flex-start;
}

.up-step {
    display: grid;
    width: 72px;
    height: 72px;
    flex: 0 0 72px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: #2184cb;
    font-size: 21px;
    font-weight: 800;
}

.up-panel h2,
.up-side-panel h2 {
    margin: 0 0 5px;
    color: #122b46;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.3;
}

.up-heading-title-row h2 { margin: 0; }

.up-panel-heading p,
.up-side-heading p { margin: 0; color: #617b8f; font-size: 12px; line-height: 1.55; }
.up-panel-kicker { margin-bottom: 6px; color: #0b9ba8; font-size: 11px; letter-spacing: .08em; }

.up-service-state {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 7px;
    margin-top: 3px;
    padding: 4px 8px;
    border: 1px solid #f0d5a2;
    border-radius: 999px;
    color: #8a5b14;
    background: #fff9ed;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.up-service-state i { width: 7px; height: 7px; border-radius: 50%; background: #e4a72e; box-shadow: 0 0 0 4px #fff3d7; }
.up-service-state--ready { border-color: #9bdfca; color: #087b60; background: #effcf7; }
.up-service-state--ready i { background: #11a878; box-shadow: 0 0 0 4px #dff8ef; }

.up-notice {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 20px 0 14px;
    padding: 13px 14px;
    border: 1px solid #c8e7ea;
    border-radius: 8px;
    background: #effafb;
    color: #315c68;
}

.up-notice > i { margin-top: 2px; color: #009ea7; }
.up-notice div { display: grid; gap: 4px; }
.up-notice strong { font-size: 13px; }
.up-notice span { font-size: 12px; line-height: 1.5; }

.up-form-lock {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding: 12px 13px;
    border: 1px solid #d8e7ed;
    border-radius: 8px;
    color: #5d7688;
    background: #f7fafb;
}

.up-form-lock > i {
    display: grid;
    width: 34px;
    height: 34px;
    margin: 0;
    place-items: center;
    border-radius: 8px;
    color: #5e849a;
    background: #e9f2f5;
}
.up-form-lock div { display: grid; min-width: 0; gap: 3px; }
.up-form-lock strong { color: #23435b; font-size: 12px; }
.up-form-lock span { font-size: 11px; line-height: 1.5; }
.up-form--locked { opacity: .72; }

.up-form { display: grid; gap: 16px; }
.up-field, .up-upload-field { display: grid; gap: 7px; }
.up-field > span, .up-upload-field > span, .up-fieldset legend { color: #173650; font-size: 12px; font-weight: 700; }
.up-field input, .up-field textarea { width: 100%; border: 1px solid #cbdfe9; border-radius: 7px; padding: 12px 13px; background: #fbfdfe; color: #5d778c; font: inherit; font-size: 13px; line-height: 1.5; resize: vertical; }
.up-field input:disabled, .up-field textarea:disabled { cursor: not-allowed; opacity: .8; }
.up-field small { color: #678197; font-size: 11px; line-height: 1.5; }
.up-field input::placeholder, .up-field textarea::placeholder { color: #91a7b7; }

.up-fieldset { margin: 0; padding: 0; border: 0; }
.up-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 7px; }
.up-choice { min-height: 42px; border: 1px solid #d3e3ec; border-radius: 7px; background: #fff; color: #5e768c; font: inherit; font-size: 12px; font-weight: 600; }
.up-choice.is-selected { border-color: #d34a91; background: #fff4f9; color: #b72e6d; }

.up-upload-box { display: grid; min-height: 120px; place-items: center; align-content: center; gap: 5px; padding: 16px; border: 1px dashed #bdd7e3; border-radius: 8px; background: #fbfdfe; color: #6d879b; text-align: center; cursor: not-allowed; transition: border-color 180ms ease, background-color 180ms ease, box-shadow 180ms ease; }
.up-upload-box.is-enabled { cursor: pointer; }
.up-upload-box.is-enabled:hover { border-color: #00aeb7; background: #f4fcfc; }
.up-upload-box > i { color: #00a6b3; font-size: 20px; }
.up-upload-box strong { color: #33566d; font-size: 12px; }
.up-upload-box small { font-size: 10px; line-height: 1.45; }
.up-upload-status { display: block; width: 100%; min-height: 27px; margin-top: 2px; padding: 6px 9px; border: 1px solid #d8e6ec; border-radius: 6px; color: #607d90; background: #f3f8fa; font-size: 11px !important; font-weight: 700; }
.up-upload-status[data-state='checking'] { border-color: #b8dbea; color: #216d8e; background: #eff9fd; }
.up-upload-status[data-state='valid'] { border-color: #a8e1ca; color: #087655; background: #effbf5; }
.up-upload-status[data-state='error'] { border-color: #efb4b4; color: #a13d3d; background: #fff5f5; }
.up-upload-box input { display: none; }
.up-image-preview { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #d7e5eb; border-radius: 8px; background: #f8fbfc; }
.up-image-preview[hidden] { display: none; }
.up-image-preview img { width: 58px; height: 58px; border: 1px solid #cfe0e7; border-radius: 6px; object-fit: cover; background: #eef5f7; }
.up-image-preview-copy { display: grid; min-width: 0; gap: 4px; }
.up-image-preview-copy strong { overflow-wrap: anywhere; color: #234961; font-size: 11px; line-height: 1.4; }
.up-image-preview-copy small { color: #5c7b8f; font-size: 10px; line-height: 1.4; }
.up-image-preview-remove { display: inline-flex; min-height: 30px; align-items: center; gap: 4px; flex: 0 0 auto; border: 1px solid #efb4b4; border-radius: 6px; padding: 5px 8px; color: #a13d3d; background: #fff5f5; font: inherit; font-size: 10px; font-weight: 700; cursor: pointer; }
.up-image-preview-remove:hover { border-color: #d97777; background: #ffeded; }
.up-image-preview-remove:focus-visible { border-color: #d74343; box-shadow: 0 0 0 3px rgba(215, 67, 67, .14); outline: none; }

.up-submit-button { min-height: 46px; border: 0; border-radius: 7px; background: #dce9ee; color: #7290a1; font: inherit; font-size: 13px; font-weight: 700; cursor: not-allowed; transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms ease; }
.up-submit-button:not(:disabled) { color: #fff; background: #009ea7; cursor: pointer; }
.up-submit-button:not(:disabled):hover { background: #008c95; box-shadow: 0 8px 16px rgba(0, 158, 167, .22); transform: translateY(-1px); }
.up-submit-button:not(:disabled):focus-visible { box-shadow: 0 0 0 3px rgba(0, 174, 183, .22); outline: none; }
.up-submit-button i { margin-right: 6px; }

.up-price-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid #dce9ee; border-radius: 8px; background: #f8fbfc; color: #5e778c; font-size: 12px; }
.up-price-row strong { color: #0b7580; font-size: 14px; font-weight: 800; }
.up-result { display: grid; gap: 5px; margin-top: 16px; padding: 13px 14px; border: 1px solid #a8e1ca; border-radius: 8px; color: #18634e; background: #effcf7; font-size: 12px; line-height: 1.5; }
.up-result strong { color: #0b694e; font-size: 13px; }
.up-result a { width: max-content; max-width: 100%; color: #007980; font-weight: 700; text-decoration: none; }
.up-result a:hover { text-decoration: underline; }
.up-notice[data-type='success'] { border-color: #a8e1ca; color: #17634d; background: #effcf7; }
.up-notice[data-type='error'] { border-color: #f3b3b3; color: #992e2e; background: #fff5f5; }
.up-notice[data-type='success'] > i { color: #0f9c70; }
.up-notice[data-type='error'] > i { color: #d74343; }

.up-side-panel { align-self: start; color: #24445b; background: #f2fbfb; border-color: #c5e3e7; border-top: 4px solid #09b4bd; box-shadow: 0 10px 22px rgba(24, 76, 90, .08); }
.up-side-heading { align-items: center; padding: 1px 0 22px; border-bottom: 1px solid #d5ebed; }
.up-side-panel h2 { color: #16344d; }
.up-side-heading p { color: #617b8f; }
.up-side-panel .up-step { background: #0caeb7; }
.up-check-list { display: grid; gap: 15px; margin: 25px 0; padding: 0; list-style: none; }
.up-check-list li { display: flex; align-items: flex-start; gap: 10px; color: #4f6f82; font-size: 12px; line-height: 1.55; }
.up-check-list i { flex: 0 0 auto; margin-top: 2px; color: #0da782; }
.up-safety-note { display: flex; align-items: flex-start; gap: 9px; padding: 13px; border: 1px solid #c8e7ea; border-radius: 7px; background: #e8f7f7; color: #477080; font-size: 11px; line-height: 1.55; }
.up-safety-note i { color: #009ea7; }

.up-hero { animation: up-fade-in 360ms ease-out both; }
.up-service-tab { animation: up-fade-in 360ms ease-out both; }
.up-service-tab:nth-child(2) { animation-delay: 45ms; }
.up-service-tab:nth-child(3) { animation-delay: 90ms; }
.up-service-tab:nth-child(4) { animation-delay: 135ms; }
.up-panel { animation: up-fade-in 420ms ease-out 100ms both; }

@keyframes up-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.up-field input:focus-visible,
.up-field textarea:focus-visible,
.up-choice:focus-visible,
.up-upload-box:focus-within {
    border-color: #00aeb7;
    box-shadow: 0 0 0 3px rgba(0, 174, 183, .16);
    outline: none;
}

@media (max-width: 1199px) {
    .up-service-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991px) {
    .up-page { padding: 28px 20px 64px; }
    .up-hero::after { right: 210px; }
    .up-content-grid { grid-template-columns: 1fr; gap: 16px; }
    .up-side-panel { align-self: start; }
}

@media (max-width: 600px) {
    .up-page { padding: 18px 12px 56px; }
    .up-hero { display: grid; gap: 18px; min-height: 0; padding: 20px 18px; }
    .up-hero::after { display: none; }
    .up-hero h1 { font-size: 25px; }
    .up-wallet-card { min-width: 0; padding: 14px 0 0; border-top: 1px solid #d7e8ed; text-align: left; }
    .up-service-tabs { grid-template-columns: 1fr; gap: 8px; }
    .up-service-tab { min-height: 66px; }
    .up-history-link-row { align-items: flex-start; flex-direction: column; margin-top: -8px; }
    .up-history-overview { align-items: flex-start; flex-direction: column; gap: 13px; }
    .up-history-overview h1 { font-size: 21px; }
    .up-history-back-link { width: 100%; justify-content: center; }
    .up-history-panel { padding: 16px; }
    .up-history-filter { grid-template-columns: 1fr; align-items: stretch; gap: 10px; padding: 12px; }
    .up-history-filter label { min-width: 0; }
    .up-history-summary { justify-self: start; padding-bottom: 0; text-align: left; }
    .up-history-pagination { justify-content: center; }
    .up-panel { padding: 19px; }
    .up-panel-heading { display: grid; gap: 13px; }
    .up-service-state { margin-top: 14px; }
    .up-step { width: 58px; height: 58px; flex-basis: 58px; border-radius: 13px; font-size: 18px; }
    .up-panel h2, .up-side-panel h2 { font-size: 17px; }
    .up-field input, .up-field textarea { font-size: 16px; }
    .up-price-row { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    .up-hero,
    .up-service-tab,
    .up-panel { animation: none; }
    .up-service-tab,
    .up-upload-box,
    .up-submit-button { transition: none; }
}