* { box-sizing: border-box; }
body {
    margin: 0;
    background: #eef1f6;
    color: #1f2430;
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
}
a { color: inherit; text-decoration: none; }
.rp-wrap { max-width: 480px; margin: 0 auto; min-height: 100vh; background: #f4f6fa; padding-bottom: 140px; }
.rp-top {
    position: sticky; top: 0; z-index: 5;
    height: 48px; display: flex; align-items: center; justify-content: center;
    background: #fff; font-size: 17px; font-weight: 600;
    border-bottom: 1px solid #eef0f4;
}
.rp-back {
    position: absolute; left: 12px; top: 0; height: 48px;
    display: flex; align-items: center; font-size: 22px; color: #333; padding: 0 6px;
}
.rp-user { margin: 0 0 10px; color: #667; font-size: 13px; }
.rp-home-page { background: #eef6ff; }
.rp-home-page .rp-wrap {
    background: linear-gradient(180deg, #edf5fc 0, #f8fbff 55%, #f2f6fb 100%);
    padding: 0 14px 110px;
}
.rp-home-page .rp-top { margin: 0 -14px 14px; }
.rp-banner {
    height: 190px; border: 1px solid rgba(40,128,210,.1); border-radius: 14px; overflow: hidden; position: relative;
    background:
        radial-gradient(circle at 18% 8%, rgba(255,255,255,.9), transparent 29%),
        linear-gradient(135deg, #e6f8ff 0%, #a9e1ff 56%, #d9f2ff 100%);
    box-shadow: 0 6px 20px rgba(47, 112, 174, .1);
}
.rp-banner::before {
    content: ""; position: absolute; width: 270px; height: 130px; right: -42px; top: -50px;
    border-radius: 50%; background: rgba(255,255,255,.34); transform: rotate(-18deg);
}
.rp-banner-copy { position: relative; z-index: 2; padding: 22px 0 0 20px; }
.rp-banner-tag {
    display: inline-flex; align-items: center; height: 24px; border-radius: 15px;
    padding: 0 13px; background: linear-gradient(90deg, #0758bd, #258edb);
    color: #fff; font-size: 12px; letter-spacing: 1px;
}
.rp-banner h1 { margin: 10px 0 3px; color: #071a3b; font-size: 25px; line-height: 1.25; font-weight: 800; letter-spacing: .5px; }
.rp-banner-copy p { margin: 0; color: #203a5e; font-size: 13px; }
.rp-banner-copy i { display: block; width: 32px; height: 3px; margin-top: 12px; border-radius: 2px; background: #0878f3; }
.rp-banner-art { position: absolute; z-index: 1; right: -10px; top: 19px; width: 185px; height: 138px; }
.rp-banner-items {
    display: flex; position: absolute; z-index: 3; left: 20px; bottom: 18px; gap: 17px;
    color: #173657; font-size: 12px; white-space: nowrap;
}
.rp-banner-items span { display: flex; align-items: center; gap: 7px; }
.rp-banner-items b {
    width: 18px; height: 18px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #0878f3; color: #fff; font-size: 12px; line-height: 1;
}
.rp-auth {
    margin-top: 10px; border: 1px solid rgba(178,126,22,.1); border-radius: 14px; padding: 15px 14px 12px; position: relative; overflow: hidden;
    background:
        radial-gradient(170px 90px at 80% 15%, rgba(255,255,255,.5), transparent 72%),
        linear-gradient(135deg, #ffe4ad 0%, #f7d276 100%);
    box-shadow: 0 5px 16px rgba(155, 112, 32, .1);
}
.rp-auth::after {
    content: ""; position: absolute; width: 130px; height: 145px; right: -30px; top: 0;
    background: linear-gradient(135deg, transparent 25%, rgba(205,145,27,.08) 26%, transparent 27%);
    transform: skewX(-12deg); pointer-events: none;
}
.rp-auth-head { display: flex; align-items: center; gap: 10px; margin-bottom: 13px; position: relative; z-index: 1; }
.rp-auth-head h2 { margin: 0 0 2px; font-size: 19px; line-height: 1.2; }
.rp-auth-head p { margin: 0; color: #6b5429; font-size: 12px; }
.rp-auth-ico {
    width: 46px; height: 46px; flex: 0 0 46px; border-radius: 12px; display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #fff1c8, #e4ae47); border: 1px solid #f6d98d;
    box-shadow: 0 3px 8px rgba(112,77,12,.18), inset 0 1px 0 rgba(255,255,255,.75);
}
.rp-auth-ico svg { width: 39px; height: 39px; display: block; }
.rp-auth-ico .badge { fill: #9b6507; stroke: #704400; stroke-width: 1; }
.rp-auth-ico .building {
    fill: none; stroke: #fff4c8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
.rp-auth-ico .dot { fill: #f7d45e; }
.rp-search {
    display: flex; align-items: center; position: relative; z-index: 1; height: 46px;
    background: #fff; border: 3px solid rgba(255,255,255,.75); border-radius: 25px; overflow: hidden;
}
.rp-search-ico {
    width: 17px; height: 17px; flex: 0 0 17px; margin-left: 15px; border: 2px solid #8290a0; border-radius: 50%; position: relative;
}
.rp-search-ico::after {
    content: ""; position: absolute; width: 7px; height: 2px; right: -5px; bottom: -2px;
    border-radius: 1px; background: #8290a0; transform: rotate(45deg);
}
.rp-search input { flex: 1; min-width: 0; border: 0; outline: 0; padding: 0 10px; font-size: 14px; background: transparent; }
.rp-search button {
    align-self: stretch; width: 86px; border: 0; border-radius: 23px; background: linear-gradient(135deg, #1184ff, #075ee8);
    color: #fff; font-size: 16px; font-weight: 600; box-shadow: -3px 0 9px rgba(9,101,230,.12);
}
.rp-served { position: relative; z-index: 1; margin: 9px 7px 0; font-size: 12px; color: #70572a; }
.rp-served span { color: #ff6b2c; }
.rp-served b { color: #f05a37; font-size: 14px; }
.rp-card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.rp-card {
    min-width: 0; min-height: 104px; background: #fff; border: 1px solid #edf1f5; border-radius: 12px; padding: 15px 8px;
    display: flex; align-items: flex-start; gap: 8px; position: relative; overflow: hidden;
    box-shadow: 0 4px 14px rgba(38, 83, 128, .05);
}
.rp-card::after {
    content: ""; position: absolute; left: -20px; right: -20px; bottom: -29px; height: 42px;
    border-radius: 50%; opacity: .55;
}
.rp-card-blue::after { background: #e4f5ff; }
.rp-card-green::after { background: #dffff0; }
.rp-card-purple::after { background: #f0e7ff; }
.rp-card-orange::after { background: #fff0cf; }
.rp-card > div { min-width: 0; position: relative; z-index: 1; }
.rp-card h3 { margin: 3px 0 7px; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.rp-card p { margin: 0; color: #8491a4; font-size: 11.5px; line-height: 1.4; white-space: nowrap; }
.rp-card em { position: absolute; z-index: 2; right: 7px; top: 30px; color: #8794a4; font-size: 19px; font-style: normal; line-height: 1; }
.rp-ico {
    width: 36px; height: 36px; border-radius: 50%; flex: 0 0 36px;
    display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1;
}
.rp-ico svg { width: 23px; height: 23px; display: block; }
.rp-card-blue .rp-ico { color: #1197ef; background: #dff3ff; }
.rp-card-green .rp-ico { color: #12c789; background: #ddfaed; }
.rp-card-purple .rp-ico { color: #923ef0; background: #f0e2ff; }
.rp-card-orange .rp-ico { color: #ff9d25; background: #fff0d4; }
@media (max-width: 370px) {
    .rp-banner h1 { font-size: 22px; }
    .rp-banner-art { right: -25px; opacity: .9; }
    .rp-banner-items { gap: 10px; }
    .rp-card { padding-left: 7px; gap: 6px; }
    .rp-card p { font-size: 10.5px; }
}
.rp-list { padding: 12px; }
.rp-company { background: #fff; border-radius: 14px; padding: 14px 14px 12px; margin-bottom: 12px; }
.rp-company-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.rp-company-hd strong { flex: 1; min-width: 0; font-size: 16px; line-height: 1.4; }
.rp-go {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
    background: #2f7bff; color: #fff; border: 0; border-radius: 8px;
    height: 32px; padding: 0 12px; font-size: 13px; line-height: 1;
}
.rp-meta { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f0f2f6; color: #667; font-size: 14px; line-height: 1.8; }
.rp-empty { text-align: center; color: #8b93a7; padding: 40px 16px; }
.rp-miss {
    display: flex; align-items: center; gap: 12px; margin-top: 4px;
    background: #f4f8ff; border: 1px solid #d7e6ff; border-radius: 14px; padding: 14px 12px;
}
.rp-miss-text { flex: 1; min-width: 0; }
.rp-miss-text h3 { margin: 0 0 4px; font-size: 16px; }
.rp-miss-text p { margin: 0; color: #7d8ba3; font-size: 12px; line-height: 1.5; }
.rp-miss-btn {
    flex: 0 0 118px; border: 1px solid #2f7bff; background: #fff; color: #2f7bff;
    border-radius: 10px; padding: 8px 10px; font-size: 14px; font-weight: 600;
    line-height: 1.35; text-align: center;
}
.rp-manual { overflow: auto; }
.rp-manual-title { display: flex; align-items: center; gap: 8px; }
.rp-manual-title i { width: 4px; height: 16px; border-radius: 2px; background: #2f7bff; display: block; }
.rp-manual label { display: block; margin: 12px 0 8px; font-size: 15px; font-weight: 600; }
.rp-manual input {
    width: 100%; height: 44px; border: 0; border-radius: 10px; background: #f3f5f8;
    padding: 0 14px; font-size: 14px; outline: none;
}
.rp-note { margin: 12px; background: linear-gradient(180deg, #e7f6ff, #f7fbff); border-radius: 16px; padding: 16px; }
.rp-note h2 { margin: 0 0 10px; color: #2f8f6b; font-size: 22px; }
.rp-note .box, .rp-plain {
    background: rgba(255,255,255,.86); border-radius: 12px; padding: 12px; color: #555; font-size: 13px; line-height: 1.7; margin-bottom: 10px;
}
.rp-section-title { text-align: center; color: #2f8f6b; font-size: 22px; margin: 18px 12px 10px; }
.rp-compare { display: flex; gap: 8px; margin: 0 12px; }
.rp-compare .col { flex: 1; background: #fff; border-radius: 12px; padding: 12px; text-align: center; }
.rp-compare h4 { margin: 0 0 8px; font-size: 16px; }
.rp-ok { color: #3cb371; font-size: 22px; }
.rp-no { color: #f0a3a8; font-size: 22px; }
.rp-compare p { margin: 6px 0 0; font-size: 13px; color: #666; line-height: 1.5; }
.rp-flow { display: flex; justify-content: space-between; align-items: center; margin: 8px 12px 0; background: #fff; border-radius: 12px; padding: 14px 10px; }
.rp-flow .step { flex: 1; text-align: center; font-size: 13px; color: #555; }
.rp-flow .arrow { color: #7eb6ff; }
.rp-types { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 12px; }
.rp-type {
    background: #fff; border: 1px solid #e6eaf2; border-radius: 10px; min-height: 72px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer;
}
.rp-type.on { background: #2f7bff; color: #fff; border-color: #2f7bff; }
.rp-type .n { font-size: 15px; }
.rp-type .p { color: #e23b3b; font-weight: 700; margin-top: 4px; }
.rp-type.on .p { color: #fff; }
.rp-hint { margin: 0 12px 10px; background: #eef5ff; color: #3a6db5; border-radius: 10px; padding: 10px 12px; font-size: 13px; }
.rp-form { margin: 0 12px 12px; background: #f7f8fa; border-radius: 14px; padding: 12px 14px; }
.rp-form h3 { margin: 0 0 10px; font-size: 13px; font-weight: 500; color: #b0b4be; }
.rp-form input[type=text], .rp-form input[type=tel] {
    width: 100%; height: 40px; border: 1px solid #eceef2; border-radius: 8px; padding: 0 12px; margin-bottom: 10px;
    font-size: 13px; background: #f3f4f6; color: #8b909a;
}
.rp-form input::placeholder { color: #c5c8d0; }
.rp-agree { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #666; line-height: 1.5; }
.rp-agree input { margin-top: 3px; }
.rp-agree a { color: #2f7bff; }
.rp-submit {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 74px; width: min(456px, calc(100% - 24px));
    height: 46px; border: 0; border-radius: 24px; background: #2f7bff; color: #fff; font-size: 16px; z-index: 6;
}
.rp-tab {
    position: fixed; left: 50%; transform: translateX(-50%); bottom: 0; width: min(480px, 100%);
    height: 68px; background: rgba(255,255,255,.98); display: flex; border-top: 1px solid #eef0f4; z-index: 7;
    box-shadow: 0 -5px 18px rgba(43,76,112,.06);
}
.rp-tab a { flex: 1; text-align: center; font-size: 12px; color: #929baa; padding-top: 9px; position: relative; }
.rp-tab a.on { color: #2f7bff; }
.rp-tab .i { height: 25px; display: flex; align-items: center; justify-content: center; margin-bottom: 3px; }
.rp-tab .i svg { width: 23px; height: 23px; display: block; }
.rp-tab a.on::after {
    content: ""; position: absolute; left: 50%; bottom: 4px; width: 25px; height: 3px;
    border-radius: 2px; background: #2f7bff; transform: translateX(-50%);
}
.rp-tab a.off { cursor: default; }
.rp-msg { margin: 12px; padding: 12px; background: #fff4f4; color: #c0392b; border-radius: 10px; font-size: 14px; }
.rp-order { background: #fff; border-radius: 12px; padding: 12px 14px; margin: 16px 12px 10px; }
.rp-order .hd { display: flex; justify-content: space-between; font-size: 14px; }
.rp-order .st { color: #2f7bff; }
.rp-order .sub { color: #888; font-size: 12px; margin-top: 6px; line-height: 1.6; }
.rp-doc { margin: 12px; background: #fff; border-radius: 12px; padding: 16px; line-height: 1.8; color: #444; font-size: 14px; }
.rp-complaint { margin: 12px; background: #fff; border-radius: 12px; padding: 16px 16px 18px; box-shadow: 0 1px 4px rgba(20,40,80,.04); }
.rp-complaint h3 { margin: 0 0 4px; font-size: 17px; font-weight: 700; }
.rp-complaint .lab { display: block; margin: 16px 0 8px; font-size: 15px; font-weight: 600; }
.rp-pick {
    height: 44px; border-radius: 8px; background: #f4f5f7; color: #c5c8d0; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font-size: 14px;
}
#orderText { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 8px; }
.rp-pick.on { color: #1f2430; }
.rp-pick .arrow { color: #c5c8d0; font-size: 18px; line-height: 1; }
.rp-complaint input[type=tel], .rp-complaint textarea {
    width: 100%; border: 1px solid #e6e8ee; border-radius: 8px; font-size: 14px; background: #fff; color: #1f2430;
    outline: none; font-family: inherit;
}
.rp-complaint input[type=tel] { height: 44px; padding: 0 12px; }
.rp-complaint textarea { min-height: 118px; padding: 10px 12px 28px; resize: none; line-height: 1.5; }
.rp-count-wrap { position: relative; }
.rp-count { position: absolute; right: 10px; bottom: 8px; color: #b0b4be; font-size: 12px; }
.rp-send {
    width: 100%; height: 46px; margin-top: 18px; border: 0; border-radius: 24px;
    background: #3b7cff; color: #fff; font-size: 16px;
}
.rp-send:disabled { opacity: .7; }
.rp-kefu {
    position: fixed; z-index: 8; right: max(18px, calc(50% - 222px)); bottom: 78px;
    width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; color: #5b67f6;
}
.rp-kefu svg { width: 32px; height: 32px; display: block; }
.rp-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 20; display: flex; align-items: flex-end; justify-content: center; }
.rp-mask[hidden] { display: none; }
.rp-sheet { width: min(480px, 100%); background: #fff; border-radius: 16px 16px 0 0; padding: 14px 14px 18px; max-height: 72vh; display: flex; flex-direction: column; }
.rp-sheet-hd { display: flex; align-items: center; justify-content: space-between; font-size: 16px; font-weight: 600; margin-bottom: 12px; }
.rp-sheet-hd button { border: 0; background: transparent; font-size: 22px; line-height: 1; color: #888; padding: 0 4px; }
.rp-sheet-search { display: flex; gap: 8px; margin-bottom: 10px; }
.rp-sheet-search input { flex: 1; height: 40px; border: 1px solid #e6e8ee; border-radius: 8px; padding: 0 12px; font-size: 14px; background: #fff; }
.rp-complaint input:-webkit-autofill,
.rp-sheet-search input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 1000px #fff inset;
    box-shadow: 0 0 0 1000px #fff inset;
}
.rp-sheet-search button { width: 72px; border: 0; border-radius: 8px; background: #3b7cff; color: #fff; }
.rp-sheet-list { overflow: auto; }
.rp-order-item { padding: 12px 2px; border-bottom: 1px solid #f0f2f6; }
.rp-order-item strong { display: block; font-size: 15px; }
.rp-order-item span { display: block; margin-top: 4px; color: #8b93a7; font-size: 12px; }