.wxcloud-page {
    --wx-ink: #151515;
    --wx-muted: #777773;
    --wx-line: #e5e5e1;
    min-height: 100%;
    padding: 14px 16px calc(116px + env(safe-area-inset-bottom));
    color: var(--wx-ink);
    background: #f5f5f2;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.wxcloud-hero {
    position: relative;
    overflow: hidden;
    padding: 26px 22px 22px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 30px;
    color: white;
    background: #171717;
    box-shadow: 0 18px 44px rgba(0,0,0,.12);
}

.wxcloud-hero::after {
    content: "";
    position: absolute;
    right: -38px;
    top: -42px;
    width: 150px;
    height: 150px;
    border: 1px solid rgba(255,255,255,.13);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(255,255,255,.035), 0 0 0 46px rgba(255,255,255,.02);
    pointer-events: none;
}

.wxcloud-kicker {
    position: relative;
    z-index: 1;
    margin: 0 0 8px;
    color: rgba(255,255,255,.48);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .2em;
}

.wxcloud-hero h2 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-size: clamp(27px, 8vw, 36px);
    line-height: 1.08;
    letter-spacing: -.055em;
}

.wxcloud-intro {
    position: relative;
    z-index: 1;
    max-width: 290px;
    margin: 13px 0 22px;
    color: rgba(255,255,255,.62);
    font-size: 11px;
    line-height: 1.7;
}

.wxcloud-stage-row {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 7px;
}

.wxcloud-stage-row span {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: rgba(255,255,255,.42);
    font-size: 10px;
    white-space: nowrap;
}

.wxcloud-stage-row span b {
    display: grid;
    width: 22px;
    height: 22px;
    place-items: center;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    font-size: 8px;
}

.wxcloud-stage-row span.is-done { color: #fff; }
.wxcloud-stage-row span.is-done b { color: #151515; background: #fff; }
.wxcloud-stage-row i { height: 1px; flex: 1; background: rgba(255,255,255,.13); }

.wxcloud-card {
    margin-top: 12px;
    padding: 19px;
    border: 1px solid var(--wx-line);
    border-radius: 25px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 8px 26px rgba(0,0,0,.035);
}

.wxcloud-card-head {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin-bottom: 17px;
}

.wxcloud-card-head > span {
    display: grid;
    width: 30px;
    height: 30px;
    flex: 0 0 30px;
    place-items: center;
    border-radius: 10px;
    color: white;
    background: #1b1b1b;
    font-size: 9px;
    font-weight: 800;
}

.wxcloud-card-head h3 { margin: 0; font-size: 15px; line-height: 1.3; letter-spacing: -.02em; }
.wxcloud-card-head p { margin: 4px 0 0; color: var(--wx-muted); font-size: 10px; line-height: 1.45; }

.wxcloud-field { display: block; margin-top: 12px; }
.wxcloud-field > span {
    display: block;
    margin: 0 0 7px 3px;
    color: #8a8a85;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: .13em;
}

.wxcloud-field input,
.wxcloud-field select {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 0 14px;
    border: 1px solid #deded9;
    border-radius: 15px;
    outline: none;
    color: #181818;
    background: #f7f7f4;
    font-size: 12px;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.wxcloud-field input:focus,
.wxcloud-field select:focus {
    border-color: #9c9c96;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(0,0,0,.045);
}

.wxcloud-hint { margin: 10px 3px 0; color: #92928c; font-size: 9px; line-height: 1.55; }
.wxcloud-actions { display: grid; grid-template-columns: .82fr 1.18fr; gap: 9px; margin-top: 16px; }

.wxcloud-button {
    min-height: 45px;
    padding: 0 14px;
    border: 1px solid transparent;
    border-radius: 15px;
    font-size: 12px;
    font-weight: 700;
    transition: transform .15s ease, opacity .15s ease, background .15s ease;
}

.wxcloud-button:active { transform: scale(.985); }
.wxcloud-button.primary { color: #fff; background: #181818; }
.wxcloud-button.secondary { color: #292929; border-color: #deded9; background: #f3f3ef; }
.wxcloud-button.wide { width: 100%; margin-top: 5px; }
.wxcloud-page.is-busy .wxcloud-button { pointer-events: none; opacity: .5; }

.wxcloud-operation-modal {
    position: fixed;
    z-index: 12050;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(20, 24, 30, .2);
    backdrop-filter: blur(9px);
    -webkit-backdrop-filter: blur(9px);
}

.wxcloud-operation-modal[hidden] { display: none; }
.wxcloud-operation-sheet {
    width: min(100%, 304px);
    padding: 25px 24px 20px;
    border: 1px solid rgba(17,17,17,.06);
    border-radius: 26px;
    color: #151515;
    text-align: center;
    background: rgba(255,255,255,.98);
    box-shadow: 0 20px 60px rgba(21,26,32,.16);
    animation: wxcloud-operation-in .22s ease both;
}
.wxcloud-operation-mark {
    display: grid;
    width: 42px;
    height: 42px;
    margin: 0 auto 13px;
    place-items: center;
    border-radius: 15px;
    color: #fff;
    background: #161616;
}
.wxcloud-operation-mark span { width: 15px; height: 15px; border: 2px solid rgba(255,255,255,.32); border-top-color:#fff; border-radius:50%; animation:wxcloud-spin .8s linear infinite; }
.wxcloud-operation-kicker { margin:0 0 7px; color:#9aa1aa; font-size:8px; font-weight:800; letter-spacing:.17em; }
.wxcloud-operation-sheet h3 { margin:0; font-size:17px; font-weight:720; letter-spacing:-.025em; }
.wxcloud-operation-sheet > p:not(.wxcloud-operation-kicker) { min-height:34px; margin:8px 2px 0; color:#727a84; font-size:11px; line-height:1.55; }
.wxcloud-operation-close { width:100%; height:42px; margin-top:16px; border:0; border-radius:14px; color:#fff; background:#161616; font-size:12px; font-weight:700; }
.wxcloud-operation-modal[data-state="success"] .wxcloud-operation-mark { background:#202020; }
.wxcloud-operation-modal[data-state="success"] .wxcloud-operation-mark span { width:16px; height:9px; border-width:0 0 2px 2px; border-color:#fff; border-radius:0; transform:rotate(-45deg) translate(1px,-1px); animation:none; }
.wxcloud-operation-modal[data-state="error"] .wxcloud-operation-mark { color:#252525; background:#eceff3; }
.wxcloud-operation-modal[data-state="error"] .wxcloud-operation-mark span { position:relative; width:16px; height:16px; border:0; animation:none; }
.wxcloud-operation-modal[data-state="error"] .wxcloud-operation-mark span:before,.wxcloud-operation-modal[data-state="error"] .wxcloud-operation-mark span:after { content:""; position:absolute; top:7px; left:0; width:16px; height:2px; border-radius:2px; background:#40464e; transform:rotate(45deg); }
.wxcloud-operation-modal[data-state="error"] .wxcloud-operation-mark span:after { transform:rotate(-45deg); }
@keyframes wxcloud-spin { to { transform:rotate(360deg); } }
@keyframes wxcloud-operation-in { from { opacity:0; transform:translateY(7px) scale(.985); } to { opacity:1; transform:translateY(0) scale(1); } }

.wxcloud-qr {
    margin: 15px auto 2px;
    padding: 16px 16px 12px;
    border: 1px solid var(--wx-line);
    border-radius: 21px;
    text-align: center;
    background: #f7f7f4;
}

.wxcloud-qr[hidden] { display: none; }
.wxcloud-qr img { display: block; width: 184px; height: 184px; max-width: 72vw; margin: 0 auto; border-radius: 13px; background: #fff; object-fit: contain; }
.wxcloud-qr img:not([src]), .wxcloud-qr img[src=""] { visibility: hidden; height: 0; }
.wxcloud-qr p { margin: 10px 0 0; color: var(--wx-muted); font-size: 10px; }

.wxcloud-text-button {
    display: block;
    margin: 13px auto 0;
    padding: 5px 10px;
    border: 0;
    color: #777773;
    background: transparent;
    font-size: 10px;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.wxcloud-setting-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 14px 15px;
    border: 1px solid rgba(17,17,17,.065);
    border-radius: 19px;
    background: #f0f3f7;
}

.wxcloud-setting-row > div { min-width: 0; }
.wxcloud-setting-row b { display: block; color: #202225; font-size: 12px; font-weight: 720; }
.wxcloud-setting-row p { margin: 5px 0 0; color: #7b838d; font-size: 9px; line-height: 1.55; }

.wxcloud-switch {
    position: relative;
    width: 46px;
    height: 28px;
    flex: 0 0 46px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dfe3e8;
    transition: background .2s ease;
}

.wxcloud-switch span {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 7px rgba(20,25,32,.12);
    transition: transform .2s ease;
}

.wxcloud-switch[aria-checked="true"] { background: #171717; }
.wxcloud-switch[aria-checked="true"] span { transform: translateX(18px); }
.wxcloud-switch:active span { transform: scale(.94); }
.wxcloud-switch[aria-checked="true"]:active span { transform: translateX(18px) scale(.94); }
.wxcloud-switch.small { width: 42px; height: 26px; flex-basis: 42px; }
.wxcloud-switch.small span { width: 20px; height: 20px; }
.wxcloud-switch.small[aria-checked="true"] span { transform: translateX(16px); }
.wxcloud-switch.small[aria-checked="true"]:active span { transform: translateX(16px) scale(.94); }

.wxcloud-proactive-options {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid rgba(17,17,17,.065);
    border-radius: 19px;
    background: #f0f3f7;
}
.wxcloud-proactive-options[hidden] { display: none; }
.wxcloud-proactive-options-kicker { margin: 0 1px 10px; color: #9aa2ad; font-size: 8px; font-weight: 700; letter-spacing: 1.35px; }
.wxcloud-proactive-interval, .wxcloud-proactive-quiet-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.wxcloud-proactive-interval > span, .wxcloud-proactive-quiet-row > div { min-width: 0; }
.wxcloud-proactive-interval b, .wxcloud-proactive-quiet-row b { display: block; color: #202225; font-size: 11px; font-weight: 720; }
.wxcloud-proactive-interval small, .wxcloud-proactive-quiet-row p { display: block; margin-top: 4px; color: #7b838d; font-size: 9px; line-height: 1.5; }
.wxcloud-proactive-quiet-row { margin-top: 13px; padding-top: 13px; border-top: 1px solid rgba(17,17,17,.065); }
.wxcloud-proactive-quiet-row p { margin-bottom: 0; }
.wxcloud-proactive-interval i { display: flex; align-items: center; gap: 6px; font-style: normal; }
.wxcloud-proactive-interval input {
    width: 46px;
    height: 32px;
    box-sizing: border-box;
    border: 1px solid rgba(17,17,17,.07);
    border-radius: 11px;
    color: #1f2328;
    background: #fff;
    font: 700 12px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    text-align: center;
    outline: none;
}
.wxcloud-proactive-interval em { color: #707883; font-size: 10px; font-style: normal; }
.wxcloud-proactive-quiet-times { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.wxcloud-proactive-quiet-times[hidden] { display: none; }
.wxcloud-proactive-quiet-times label { display: flex; align-items: center; gap: 5px; min-width: 0; color: #7b838d; font-size: 9px; }
.wxcloud-proactive-quiet-times input {
    width: 76px;
    max-width: 23vw;
    height: 31px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid rgba(17,17,17,.07);
    border-radius: 10px;
    color: #282c32;
    background: #fff;
    font: 650 10px/1 -apple-system, BlinkMacSystemFont, "PingFang SC", sans-serif;
    outline: none;
}
.wxcloud-proactive-quiet-times > i { color: #a0a7b0; font-size: 9px; font-style: normal; }
.wxcloud-proactive-actions { display: flex; gap: 8px; margin-top: 13px; }
.wxcloud-proactive-save, .wxcloud-proactive-test {
    display: block;
    min-width: 0;
    flex: 1 1 0;
    padding: 10px 14px;
    border-radius: 13px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .15px;
}
.wxcloud-proactive-save { border: 0; color: #fff; background: #171717; }
.wxcloud-proactive-test { border: 1px solid rgba(17,17,17,.1); color: #31363d; background: #fff; }
.wxcloud-proactive-save:active { transform: scale(.985); }
.wxcloud-proactive-test:active { transform: scale(.985); background: #f8f9fa; }
.wxcloud-proactive-test-note { margin: 8px 1px 0; color: #9299a3; font-size: 8px; line-height: 1.55; }
.wxcloud-proactive-rule { margin: 11px 4px 0; color: #30343a; font-size: 9px; font-weight: 680; line-height: 1.5; }
.wxcloud-proactive-note { margin: 11px 4px 0; color: #8b929b; font-size: 9px; line-height: 1.65; }

.wxcloud-diagnostics-card { padding-bottom: 12px; }
.wxcloud-diagnostic-results[hidden] { display: none; }
.wxcloud-diagnostic-results:not([hidden]) { margin-top: 12px; }
.wxcloud-diagnostic-list {
    overflow: hidden;
    border: 1px solid rgba(17,17,17,.065);
    border-radius: 18px;
    background: #f0f3f7;
}
.wxcloud-diagnostic-item {
    padding: 12px 13px;
    border-bottom: 1px solid rgba(17,17,17,.065);
}
.wxcloud-diagnostic-item:last-child { border-bottom: 0; }
.wxcloud-diagnostic-item > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.wxcloud-diagnostic-item b { color: #25272a; font-size: 11px; font-weight: 720; }
.wxcloud-diagnostic-item small { flex: 0 0 auto; color: #9ba2ab; font-size: 9px; }
.wxcloud-diagnostic-item p { margin: 5px 0 0; color: #69707a; font-size: 10px; line-height: 1.55; word-break: break-word; }
.wxcloud-diagnostic-item.is-error { background: #f8eeee; }
.wxcloud-diagnostic-item.is-error b { color: #7c3939; }
.wxcloud-diagnostic-item.is-warn { background: #f5f5f4; }
.wxcloud-diagnostic-empty { padding: 15px 13px; color: #8d959f; font-size: 10px; line-height: 1.55; }

.wxcloud-status {
    margin-top: 12px;
    padding: 13px 15px;
    border: 1px solid #e2e2dd;
    border-radius: 16px;
    color: #666661;
    background: #eeeeea;
    font-size: 10px;
    line-height: 1.55;
}

.wxcloud-status[data-tone="success"] { color: #1f3829; border-color: #d7e4da; background: #eaf2ec; }
.wxcloud-status[data-tone="working"] { color: #353535; background: #e8e8e4; }
.wxcloud-status[data-tone="error"] { color: #652b2b; border-color: #ead6d4; background: #f5e8e6; }

.wxcloud-security {
    margin: 12px 2px 0;
    padding: 16px;
    border: 1px dashed #d5d5cf;
    border-radius: 19px;
    color: #686863;
    background: rgba(255,255,255,.5);
}

.wxcloud-security b { display: block; margin-bottom: 5px; color: #363633; font-size: 10px; }
.wxcloud-security p { margin: 0; font-size: 9px; line-height: 1.65; }

@media (min-width: 560px) {
    .wxcloud-page { max-width: 520px; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
    .wxcloud-button, .wxcloud-field input, .wxcloud-field select, .wxcloud-switch, .wxcloud-switch span, .wxcloud-proactive-save, .wxcloud-proactive-test { transition: none; }
}