body .my-page {
    color: #222;
    background-color: #f5f6f7;
    background-image: linear-gradient(to bottom, rgba(245,246,247,0) 65px, rgba(245,246,247,.35) 105px, #f5f6f7 172px), linear-gradient(125deg, #e4faf3 0%, #edf6ff 56%, #f5efff 100%);
    background-repeat: no-repeat;
    background-size: 100% 180px;
    transition: color .2s ease, background-color .2s ease;
}

.my-hero {
    position: relative;
    min-height: 0;
    height: auto;
    padding: 14px 15px 26px;
    overflow: hidden;
    box-sizing: border-box;
    background: transparent;
}

.my-toolbar {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 9px;
}

.my-search {
    display: flex;
    min-width: 0;
    height: 44px;
    flex: 1;
    align-items: center;
    padding: 0 13px;
    background: rgba(255, 255, 255, .92);
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 14px;
    box-shadow: 0 5px 18px rgba(36, 76, 63, .045);
}

.my-search button {
    display: flex;
    width: 28px;
    height: 100%;
    flex: none;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    color: #989da0;
    background: transparent;
    border: 0;
}

.my-search svg {
    width: 20px;
    height: 20px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
}

.my-search input {
    width: 100%;
    min-width: 0;
    height: 100%;
    padding: 0;
    color: #222;
    background: transparent;
    border: 0;
    outline: 0;
    font-size: 14px;
}

.my-search input::placeholder { color: #a5a8aa; }

.my-tool-button {
    display: flex;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: #2b302f;
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(255,255,255,.68);
    border-radius: 13px;
    box-shadow: 0 4px 14px rgba(36, 76, 63, .04);
    cursor: pointer;
    transition: transform .16s ease, background-color .16s ease;
    -webkit-tap-highlight-color: transparent;
}

.my-tool-button svg {
    width: 23px;
    height: 23px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.9;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.my-tool-button:not(.my-theme-toggle) > svg circle { fill: currentColor; stroke: none; }
.my-theme-toggle .theme-sun { display: none; }

body .my-page .my-shell {
    position: relative;
    z-index: 2;
    padding: 0 15px 20px;
    margin-top: -12px;
}

body .my-page .my-card {
    border: 1px solid rgba(34, 43, 39, .035);
    border-radius: 15px;
    box-shadow: 0 6px 22px rgba(34, 43, 39, .055);
    box-sizing: border-box;
}

body .my-page .my-profile-card {
    position: relative;
    min-height: 82px;
    overflow: hidden;
    padding: 13px 15px 13px 18px;
    background: linear-gradient(110deg, rgba(255,255,255,.98), rgba(248,255,252,.96));
    transition: transform .16s ease, box-shadow .16s ease;
}

body .my-page .my-profile-card::before { content: ""; position: absolute; left: 0; top: 24px; width: 4px; height: 34px; background: linear-gradient(#39c9af, #61aee8); border-radius: 0 5px 5px 0; }
body .my-page .my-profile-card:active { transform: scale(.993); box-shadow: 0 3px 14px rgba(34, 43, 39, .045); }
body .my-page .my-avatar { border: 2px solid rgba(255,255,255,.9); border-radius: 14px; background: #efd0aa; box-shadow: 0 5px 14px rgba(89, 70, 48, .12); }
body .my-page .my-vip-banner { border-radius: 15px; background: linear-gradient(135deg, #163a37 0%, #1b3440 52%, #20293c 100%); box-shadow: 0 7px 20px rgba(20,48,49,.14); }
body .my-page .my-menu-card { border-radius: 15px; }
body .my-page .my-menu-item { transition: background-color .15s ease; -webkit-tap-highlight-color: transparent; }
body .my-page .my-menu-item:active { background: #f2faf7; }
body .my-page .my-menu-icon { width: 32px; height: 32px; filter: drop-shadow(0 3px 5px rgba(50,70,63,.08)); }
body .my-page .my-chevron { width: 17px; height: 17px; opacity: .72; transition: transform .15s ease; }
body .my-page .my-menu-item:active .my-chevron { transform: translateX(2px); }
body .my-page #openVipBtn { box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 5px 14px rgba(224,168,77,.16); }

.my-more-mask {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: flex;
    justify-content: flex-end;
    background: rgba(15, 18, 18, .42);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility 0s linear .24s;
}

.my-more-mask.show {
    display: flex;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.my-more-drawer {
    width: min(80vw, 310px);
    height: 100%;
    padding: 18px 16px;
    color: #222;
    background: #fff;
    box-shadow: -12px 0 38px rgba(0,0,0,.14);
    transform: translateX(105%);
    transition: transform .24s cubic-bezier(.22,.78,.28,1);
}

.my-more-mask.show .my-more-drawer { transform: translateX(0); }

@media (min-width: 415px) {
    .my-more-drawer { margin-right: max(0px, calc((100vw - 414px) / 2)); }
}

@media (min-width: 751px) {
    .my-more-drawer {
        width: min(32vw, 340px);
        min-width: 310px;
        margin-right: 0;
        border-radius: 18px 0 0 18px;
    }
}

.my-drawer-head {
    display: flex;
    height: 48px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
}

.my-drawer-head h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 650;
}

.my-drawer-head button {
    width: 36px;
    height: 36px;
    padding: 0;
    color: #777;
    background: #f5f5f5;
    border: 0;
    border-radius: 50%;
    font-size: 25px;
    line-height: 34px;
    cursor: pointer;
}

.my-drawer-action {
    display: flex;
    width: 100%;
    min-height: 72px;
    align-items: center;
    gap: 12px;
    padding: 12px;
    margin-bottom: 10px;
    color: #222;
    text-align: left;
    background: #f7f8f8;
    border: 0;
    border-radius: 14px;
    cursor: pointer;
}

.my-drawer-action > span:nth-child(2) { min-width: 0; flex: 1; }
.my-drawer-action b { display: block; margin-bottom: 5px; font-size: 15px; font-weight: 600; }
.my-drawer-action small { display: block; color: #999; font-size: 12px; }
.my-drawer-action i { color: #aaa; font-size: 22px; font-style: normal; }

.drawer-action-icon,
.drawer-logout-icon {
    display: flex;
    width: 42px;
    height: 42px;
    flex: none;
    align-items: center;
    justify-content: center;
    color: #684713;
    background: linear-gradient(145deg, #ffe6a8, #ffc459);
    border-radius: 12px;
    box-shadow: 0 5px 12px rgba(214, 156, 55, .18);
    font-size: 12px;
    font-weight: 800;
}

.drawer-logout-icon { color: #df5c5c; background: #fff0f0; box-shadow: none; }
.drawer-logout-icon svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

html[data-site-theme="dark"] body,
html[data-site-theme="dark"] .readbox.site-theme-page { background: #101315; }

html[data-site-theme="dark"] body .my-page {
    background-color: #101315;
    background-image: linear-gradient(to bottom, rgba(16,19,21,0) 65px, rgba(16,19,21,.42) 110px, #101315 174px), linear-gradient(115deg, #18302a, #242e2a 55%, #35311f);
}

html[data-site-theme="dark"] .my-hero { background: transparent; }

html[data-site-theme="dark"] .my-search { color: #eef3f2; background: #2b3032; border-color: #3a4143; box-shadow: none; }
html[data-site-theme="dark"] .my-tool-button { color: #eef3f2; background: rgba(27,33,32,.9); border-color: rgba(255,255,255,.07); box-shadow: none; }
html[data-site-theme="dark"] .my-search input { color: #f4f4f4; background-color: transparent; }
html[data-site-theme="dark"] .my-search input::placeholder { color: #aeb4b5; }
html[data-site-theme="dark"] .my-theme-toggle .theme-moon { display: none; }
html[data-site-theme="dark"] .my-theme-toggle .theme-sun { display: block; }
html[data-site-theme="dark"] body .my-page .my-card,
html[data-site-theme="dark"] body .my-page .my-menu-card { color: #e8ebea; background: #1b2022; border-color: #282f31; box-shadow: 0 6px 18px rgba(0,0,0,.14); }
html[data-site-theme="dark"] body .my-page .my-profile-card { background: linear-gradient(110deg, #1c2424, #1b2022); }
html[data-site-theme="dark"] body .my-page .my-vip-banner { background: linear-gradient(135deg, #183532, #1c3038 52%, #202738); border: 1px solid #2b3d40; }
html[data-site-theme="dark"] body .my-page #userinfo_name,
html[data-site-theme="dark"] body .my-page .my-menu-text { color: #edf0ef; }
html[data-site-theme="dark"] body .my-page #userinfo_id { color: #92999b; background: #282d2f; }
html[data-site-theme="dark"] body .my-page #vip_container { color: #a9afb1; }
html[data-site-theme="dark"] body .my-page .my-menu-item { border-bottom-color: #2c3234; }
html[data-site-theme="dark"] body .my-page .my-menu-item:active { background: #22292a; }
html[data-site-theme="dark"] body .my-page .my-menu-item + .my-menu-item::before { background: #2c3234; }
html[data-site-theme="dark"] body .my-page .my-menu-icon { filter: drop-shadow(0 3px 5px rgba(0,0,0,.2)); }
html[data-site-theme="dark"] body .my-page .my-chevron { opacity: .42; filter: invert(1); }
html[data-site-theme="dark"] .my-more-drawer { color: #edf0ef; background: #181c1e; }
html[data-site-theme="dark"] .my-drawer-head button,
html[data-site-theme="dark"] .my-drawer-action { color: #edf0ef; background: #242a2c; }
html[data-site-theme="dark"] .my-drawer-action small { color: #98a0a2; }
html[data-site-theme="dark"] .activation-dialog { color: #edf0ef; background: #1b2022; border-color: #2b3234; box-shadow: 0 2rem 6rem rgba(0,0,0,.38); }
html[data-site-theme="dark"] .activation-dialog::before { background: linear-gradient(115deg, #18352e, #26312b 58%, #3b3520); }
html[data-site-theme="dark"] .activation-close { color: #b2bab8; background: rgba(25,31,30,.72); }
html[data-site-theme="dark"] .activation-icon { color: #62dfca; background: linear-gradient(145deg, #25302e, #183a34); border-color: rgba(255,255,255,.05); box-shadow: none; }
html[data-site-theme="dark"] .activation-title { color: #f1f3f2; }
html[data-site-theme="dark"] .activation-desc,
html[data-site-theme="dark"] .activation-tip { color: #929a98; }
html[data-site-theme="dark"] .activation-field-label { color: #c5cbc9; }
html[data-site-theme="dark"] .activation-input-shell { background: #242a2c; border-color: #343b3d; }
html[data-site-theme="dark"] .activation-input { color: #f2f4f3; }
html[data-site-theme="dark"] .activation-btn.cancel { color: #c2c8c6; background: #292f31; }
html[data-site-theme="dark"] .bottom-tabs { background: #171a1c; border-top-color: #292d2f; }
html[data-site-theme="dark"] .bottom-tabs a { color: #858b8e; }
html[data-site-theme="dark"] .bottom-tabs a[aria-current="page"] { color: #fff; }

.my-search:focus-within,
.my-tool-button:focus-visible,
.my-drawer-action:focus-visible,
.my-drawer-head button:focus-visible { outline: 2px solid #24bca6; outline-offset: 2px; }
.my-tool-button:active { transform: scale(.96); }