/* ==================== 基础重置 ==================== */
* { margin:0; padding:0; box-sizing:border-box; }
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    background: linear-gradient(180deg, #fff5ee 0%, #fef3e8 30%, #fdf0e4 60%, #fef9f5 100%);
    background-attachment: fixed;
    color: #3d3027;
    display: flex; justify-content: center; min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}
.container { width: 100%; max-width: 460px; padding: 24px 18px 40px; }

/* ==================== 头部 ==================== */
.header {
    text-align: center; padding: 28px 10px 16px;
    position: relative;
}
.header::before {
    content: '🌸';
    font-size: 36px;
    display: block;
    margin-bottom: 8px;
    animation: float 3s ease-in-out infinite;
}
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}
.title {
    font-size: 28px; font-weight: 800;
    background: linear-gradient(135deg, #e0884a, #d4726a);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 2px;
}
.subtitle { font-size: 13px; color: #c4a98b; margin-top: 6px; letter-spacing: 1px; }
.user-bar {
    display: inline-flex; align-items: center; gap: 10px;
    margin-top: 10px; padding: 8px 20px;
    background: rgba(255,255,255,0.6); border-radius: 20px;
    font-size: 13px; color: #8a6d5d;
    backdrop-filter: blur(6px);
}
.user-icon { font-size: 16px; }

/* ==================== Tab 切换 ==================== */
.tabs {
    display: flex; margin: 18px 0; padding: 5px;
    background: rgba(255,255,255,0.5); border-radius: 24px;
    backdrop-filter: blur(10px);
    box-shadow: 0 2px 12px rgba(180,140,100,0.08);
}
.tab {
    flex:1; text-align: center; padding: 11px 8px; font-size: 14px;
    cursor: pointer; border-radius: 20px; border: none;
    background: transparent; color: #b5a08a; transition: all .25s;
    font-weight: 500;
}
.tab.active {
    background: linear-gradient(135deg, #f0a860, #e08050);
    color: #fff; font-weight: 600;
    box-shadow: 0 4px 14px rgba(224,130,80,0.3);
}

/* ==================== 卡片 ==================== */
.card {
    background: rgba(255,255,255,0.75);
    backdrop-filter: blur(10px);
    border-radius: 20px; padding: 24px 20px; margin-bottom: 16px;
    box-shadow: 0 4px 24px rgba(160,120,80,0.08);
    border: 1px solid rgba(255,255,255,0.8);
    transition: transform .2s, box-shadow .2s;
}
.section-title {
    font-size: 18px; font-weight: 700; color: #4a3525;
    margin-bottom: 4px; display: flex; align-items: center; gap: 8px;
}
.section-title::before {
    content: '';
    display: inline-block; width: 4px; height: 18px;
    background: linear-gradient(180deg, #f0a860, #e08060);
    border-radius: 2px;
}
.helper-text { font-size: 13px; color: #b5a090; margin-top: 6px; line-height: 1.5; }

/* ==================== 表单 ==================== */
.form-item { margin-top: 16px; }
.form-item label {
    display: block; font-size: 13px; color: #8a7060;
    margin-bottom: 6px; font-weight: 500; letter-spacing: 0.5px;
}
.form-item input[type="text"],
.form-item input[type="password"],
.form-item input[type="number"] {
    width: 100%; padding: 12px 16px;
    border: 1.5px solid #e8d5c4; border-radius: 12px;
    font-size: 15px; outline: none;
    background: rgba(255,255,255,0.7);
    color: #3d3027;
    transition: all .25s;
}
.form-item input[type="date"], .form-item input[type="time"] {
    width:100%; padding:12px 16px; min-height:44px; border:1.5px solid #e8d5c4;
    border-radius:12px; font-size:15px; background:rgba(255,255,255,.7); color:#3d3027;
    -webkit-appearance:none; appearance:none;
}
.form-item input:focus {
    border-color: #e8a870; background: #fff;
    box-shadow: 0 0 0 3px rgba(240,160,100,0.1);
}
.pwd-wrap { position: relative; }
.pwd-wrap input { padding-right: 44px !important; }
.eye {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    cursor: pointer; font-size: 18px; user-select: none; opacity: 0.6; transition: .2s;
}
.eye:hover { opacity: 1; }
.captcha-row { display: flex; align-items: center; gap: 10px; }

/* ==================== 按钮 ==================== */
.btn-primary {
    width: 100%; padding: 13px; margin-top: 20px;
    background: linear-gradient(135deg, #f0a860, #e08050);
    color: #fff; border: none; border-radius: 14px;
    font-size: 16px; font-weight: 700; cursor: pointer;
    transition: all .25s; letter-spacing: 1px;
    box-shadow: 0 6px 20px rgba(224,130,80,0.25);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 28px rgba(224,130,80,0.35); }
.btn-primary:active { transform: scale(.98); }
.btn-primary:disabled {
    background: #d4c0b0; box-shadow: none; cursor: not-allowed; transform: none;
}
.btn-secondary {
    width: 100%; padding: 12px; margin-top: 10px;
    background: rgba(255,255,255,0.7); color: #e08050;
    border: 1.5px solid #e8c0a0; border-radius: 14px;
    font-size: 15px; cursor: pointer; transition: .2s; font-weight: 600;
}
.btn-secondary:hover { background: #fff5ee; }
.btn-danger {
    padding: 10px 18px; background: #fff; color: #d4786a;
    border: 1px solid #e8b8b0; border-radius: 10px;
    font-size: 13px; cursor: pointer; flex: 1; font-weight: 500; transition: .2s;
}
.btn-danger:hover { background: #fff5f3; }
.text-btn {
    background: none; border: none; color: #e08050; font-size: 13px;
    cursor: pointer; padding: 2px 6px; font-weight: 500; transition: .2s;
}
.text-btn:hover { color: #c06838; }
.text-btn:focus-visible,
.close-button:focus-visible {
    outline: 3px solid rgba(224,128,80,.24);
    outline-offset: 2px;
}

.auth-help-row {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

/* 会员充值暂停公告：与普通错误提示区分，强调当前服务状态。 */
.recharge-notice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0 0 14px;
    padding: 14px 16px;
    border: 1px solid #e6b979;
    border-left: 4px solid #c97832;
    border-radius: 14px;
    background: linear-gradient(105deg, #fff8e8, #fff1dc);
    color: #79502e;
    box-shadow: 0 5px 18px rgba(157, 99, 42, .08);
}
.recharge-notice-mark {
    display: inline-grid;
    place-items: center;
    flex: 0 0 24px;
    width: 24px;
    height: 24px;
    margin-top: 1px;
    border-radius: 50%;
    background: #b85f2b;
    color: #fff;
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
}
.recharge-notice strong {
    display: block;
    color: #8c461f;
    font-size: 14px;
    line-height: 1.5;
}
.recharge-notice p {
    margin: 3px 0 0;
    font-size: 12px;
    line-height: 1.65;
}
.recharge-notice-compact { margin: 4px 0 14px; }
.account-recovery-notice{margin:0 0 14px;border:1px solid #edcf9e;border-radius:14px;background:linear-gradient(135deg,#fff9e9,#fff2df);color:#79542e;box-shadow:0 5px 16px rgba(178,116,57,.08);overflow:hidden}.account-recovery-notice summary{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 15px;cursor:pointer;font-size:13px;line-height:1.5;list-style:none}.account-recovery-notice summary::-webkit-details-marker{display:none}.account-recovery-notice summary strong{color:#a15e2b}.account-recovery-notice-more{flex:0 0 auto;color:#c4793d;font-size:12px}.account-recovery-notice[open] .account-recovery-notice-more{font-size:0}.account-recovery-notice[open] .account-recovery-notice-more::after{content:'收起';font-size:12px}.account-recovery-notice-body{display:grid;gap:7px;padding:0 15px 14px;border-top:1px dashed #ecd4b4}.account-recovery-notice-body p{font-size:12px;line-height:1.6;color:#8a6c50}.account-recovery-notice-body p:first-child{padding-top:12px}.account-recovery-notice-warning{color:#b56b38!important}.phone-binding-note{margin-top:10px;color:#9a806b;font-size:12px;line-height:1.55}

@media (max-width: 480px) {
    .recharge-notice {
        gap: 10px;
        padding: 12px 13px;
        border-radius: 12px;
    }
    .recharge-notice-mark {
        flex-basis: 22px;
        width: 22px;
        height: 22px;
        font-size: 13px;
    }
    .recharge-notice p { line-height: 1.55; }
}

/* ==================== 消息提示 ==================== */
.msg {
    margin-top: 14px; padding: 12px 16px; border-radius: 12px;
    font-size: 13px; line-height: 1.5; display: none;
}
.msg.success { background: #eef7e9; color: #5a8a4a; display: block; border: 1px solid #c8e0b8; }
.msg.error { background: #fdf0ee; color: #c05050; display: block; border: 1px solid #f0c8c0; }

/* ==================== Zepp 账号信息 ==================== */
.zepp-info {
    background: linear-gradient(135deg, #fefaf5, #fff8f0);
    padding: 16px; border-radius: 14px;
    border: 1px solid #eeddcc;
}
.info-row { margin: 8px 0; font-size: 14px; display: flex; align-items: center; gap: 8px; }
.info-row span { color: #8a7060; }
.info-row strong { color: #3d3027; }

/* ==================== 账号恢复 ==================== */
.account-security {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #eee0d0;
}
.account-security-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}
.account-security h3 {
    margin: 0;
    color: #4a3525;
    font-size: 16px;
}
.account-security p {
    margin: 6px 0 0;
    color: #9b8473;
    font-size: 12px;
    line-height: 1.6;
}
.security-badge {
    flex: 0 0 auto;
    padding: 4px 9px;
    border: 1px solid #ead8c7;
    border-radius: 999px;
    background: #fffaf5;
    color: #9a806c;
    font-size: 11px;
    font-weight: 700;
}
.security-badge.ready {
    border-color: #c9dfc0;
    background: #eff8eb;
    color: #55834a;
}
.security-action { margin-top: 14px; }
.recovery-modal-content { max-width: 420px; }
.recovery-intro {
    margin: 0;
    color: #8a7060;
    font-size: 13px;
    line-height: 1.65;
}
.close-button {
    padding: 0;
    border: 0;
    background: transparent;
}
.captcha-image {
    height: 42px;
    border: 1px solid #e8d5c4;
    border-radius: 10px;
    cursor: pointer;
}
.captcha-answer { margin-top: 10px; }
.recovery-support {
    margin-top: 12px;
    text-align: center;
    color: #a18a78;
    font-size: 12px;
}

/* ==================== 提交记录 ==================== */
.record-item {
    background: #fdfaf6; border-radius: 12px; padding: 14px;
    margin-bottom: 10px; border: 1px solid #eee0d0;
    transition: .2s;
}
.record-item:hover { background: #fffaf3; }
.records-pager {display:flex;align-items:center;justify-content:center;gap:10px;margin-top:14px;color:#8a7060;font-size:13px;}
.records-pager button {min-height:42px;padding:0 16px;border:1px solid #e1c8b2;border-radius:10px;background:#fff;color:#8b654b;cursor:pointer;}
.records-pager button:disabled {opacity:.4;cursor:not-allowed;}
@media (max-width:767px) {.records-pager button{min-height:44px;flex:1}.records-pager{gap:8px}.records-pager span{white-space:nowrap}}

/* ==================== 模态框 ==================== */
.modal {
    position: fixed; top:0; left:0; width:100%; height:100%;
    background: rgba(60,30,10,0.4); backdrop-filter: blur(2px);
    display: flex; justify-content: center; align-items: center; z-index: 1000;
    animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content {
    background: #fff; border-radius: 20px; padding: 0 24px 24px;
    width: 90%; max-width: 400px; max-height: 88vh; overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 20px 60px rgba(100,60,30,0.2);
    animation: slideUp .3s ease;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.modal-header {
    position: sticky; top: 0; z-index: 2; background: #fff;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 18px; font-weight: 700; color: #4a3525;
    padding: 22px 0 14px; margin-bottom: 8px;
    border-bottom: 1px solid #f0e8e0;
}
.close {
    cursor: pointer; font-size: 22px; color: #c0b0a0;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; transition: .2s;
}
.close:hover { background: #f5f0eb; color: #8a7060; }

/* ==================== 步骤引导通用 ==================== */
.step-num {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: linear-gradient(135deg, #f0a860, #e08050);
    color: #fff; font-size: 14px; font-weight: 700;
    flex-shrink: 0; margin-top: 1px;
}
.bind-note {
    margin-top: 18px; padding: 14px 16px;
    background: linear-gradient(135deg, #fff8e8, #fff3dc);
    border-radius: 12px; font-size: 13px; color: #9a7d3b; line-height: 1.7;
    border: 1px solid #f0e0b0;
}

/* ==================== 获取卡密引导 ==================== */
.guide-step {
    padding: 12px 0 16px;
    border-bottom: 1px solid #f0e8e0;
}
.guide-step:last-of-type { border-bottom: none; }
.guide-step-title {
    display: flex; align-items: flex-start; gap: 12px;
    font-size: 14px; font-weight: 600; color: #4a3525; line-height: 1.6;
}
.guide-img {
    display: block; margin: 14px auto 0;
    border-radius: 12px; border: 1px solid #f0e8e0;
    max-width: 100%; height: auto;
}
.guide-img-qr { width: 180px; max-width: 58%; }
.guide-img-shot {
    width: auto; max-height: 260px; max-width: 70%;
    box-shadow: 0 6px 18px rgba(100,60,30,0.12);
}

/* 桌面端：弹窗加宽，两步左右并排，避免竖向内容过高被截断 */
@media (min-width: 640px) {
    #qrcodeModal .modal-content { max-width: 720px; }
    #qrcodeModal .guide-grid {
        display: flex; gap: 28px; align-items: stretch;
    }
    #qrcodeModal .guide-step {
        flex: 1; min-width: 0;
        padding: 12px 0 8px; border-bottom: none;
    }
    #qrcodeModal .guide-step:first-child {
        border-right: 1px solid #f0e8e0; padding-right: 28px;
    }
    #qrcodeModal .guide-img-qr { width: 100%; max-width: 220px; }
    #qrcodeModal .guide-img-shot { max-height: 300px; max-width: 80%; }
}

/* ==================== 客服悬浮按钮 ==================== */
.kefu-fab {
    position: fixed; right: 20px; bottom: 28px; z-index: 900;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 2px; width: 60px; height: 60px; border: none; border-radius: 50%;
    background: linear-gradient(135deg, #f0a860, #e08050);
    color: #fff; cursor: pointer;
    box-shadow: 0 6px 20px rgba(224,130,80,0.4);
    transition: transform .2s, box-shadow .2s;
}
.kefu-fab:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(224,130,80,0.5); }
.kefu-fab:active { transform: scale(.95); }
.kefu-fab-icon { font-size: 22px; line-height: 1; }
.kefu-fab-text { font-size: 11px; font-weight: 600; letter-spacing: 1px; }

/* ==================== 客服弹窗 ==================== */
.kefu-body { text-align: center; padding: 6px 0 4px; }
.kefu-tip { font-size: 14px; color: #6a5545; line-height: 1.6; margin-bottom: 16px; }
.kefu-img {
    width: 220px; max-width: 80%; height: auto;
    border-radius: 14px; border: 1px solid #f0e8e0;
    box-shadow: 0 6px 18px rgba(100,60,30,0.12);
}
.kefu-hint { font-size: 12px; color: #b5a090; margin-top: 14px; }

@media (max-width: 400px) {
    .kefu-fab { width: 54px; height: 54px; right: 14px; bottom: 20px; }
    .kefu-fab-icon { font-size: 20px; }
    .kefu-img { width: 200px; }
}

/* ==================== 底部 ==================== */
.footer {
    text-align: center; padding: 28px 0 12px;
}
.footer-brand {
    display: block;
    font-size: 11px; color: #c8b8a5; letter-spacing: 1px;
}
.footer-sub {
    display: block;
    margin-top: 4px; font-size: 11px; color: #d8ccbb;
}

/* ==================== 移动端适配 ==================== */
@media (max-width: 400px) {
    .container { padding: 16px 10px 32px; }
    .card { padding: 18px 14px; border-radius: 16px; }
    .title { font-size: 24px; }
    .modal-content { width: 95%; max-height: 90vh; padding: 0 16px 20px; }
    .modal-header { padding: 18px 0 12px; font-size: 17px; }
    .guide-img-qr { width: 160px; }
    .guide-img-shot { max-height: 230px; }
    .account-security-head { gap: 8px; }
    .account-recovery-notice summary{align-items:flex-start;padding:12px}.account-recovery-notice-body{padding:0 12px 12px}.account-recovery-notice-more{margin-top:2px}
}

@media (prefers-reduced-motion: reduce) {
    .recovery-modal-content { animation: none; }
}

/* 矮屏（横屏或小高度设备）进一步压缩引导图，保证不被截断 */
@media (max-height: 720px) {
    .guide-img-qr { width: 150px; }
    .guide-img-shot { max-height: 200px; }
}

/* ==================== 教程入口 & FAQ ==================== */
.section-title-with-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.section-title-with-action .section-title { margin-bottom: 0; }
.tutorial-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 11px;
    background: linear-gradient(135deg, #fff6ea, #ffecd6);
    border: 1px solid #f0d8b8;
    border-radius: 999px;
    font-size: 12px;
    color: #b57b3e;
    cursor: pointer;
    transition: all .2s;
    font-weight: 500;
}
.tutorial-tag:hover {
    background: linear-gradient(135deg, #fff0d8, #ffe3c0);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(224,150,80,0.15);
}
.tutorial-tag:active { transform: scale(.96); }

/* FAQ 折叠卡片 */
.faq-card {
    margin-top: 18px;
    background: rgba(255,255,255,0.7);
    border: 1px solid rgba(255,255,255,0.8);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(160,120,80,0.06);
}
.faq-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    background: transparent;
    border: none;
    font-size: 14px;
    font-weight: 600;
    color: #4a3525;
    cursor: pointer;
    transition: background .2s;
}
.faq-header:hover { background: rgba(240,160,100,0.06); }
.faq-header-left { display: flex; align-items: center; gap: 8px; }
.faq-arrow {
    display: inline-block;
    font-size: 13px;
    color: #b5a090;
    transition: transform .25s;
}
.faq-card.collapsed .faq-arrow { transform: rotate(-90deg); }
.faq-body {
    max-height: 3000px;
    overflow: hidden;
    transition: max-height .35s ease, padding .25s ease, opacity .25s ease;
    opacity: 1;
    padding: 0 16px 16px;
}
.faq-card.collapsed .faq-body {
    max-height: 0;
    padding: 0 16px;
    opacity: 0;
}
.faq-img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid #f0e8e0;
}

/* 教程轮播弹窗 */
#tutorialModal .modal-content {
    width: 92%;
    max-width: 520px;
    padding: 0 20px 20px;
}
.tutorial-subtitle {
    font-size: 12px;
    color: #b5a090;
    margin: -6px 0 14px;
    line-height: 1.5;
}
.tutorial-carousel {
    position: relative;
}
.tutorial-swiper {
    overflow: hidden;
    border-radius: 14px;
    background: #f8f4ef;
    border: 1px solid #f0e8e0;
    aspect-ratio: 3 / 4;
}
.tutorial-track {
    display: flex;
    transition: transform .35s ease;
    will-change: transform;
    height: 100%;
}
.tutorial-slide {
    flex: 0 0 100%;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 10px;
    box-sizing: border-box;
    overflow-y: auto;
}
.tutorial-slide img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* 引导封面 */
.tutorial-cover {
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 24px 20px;
    box-sizing: border-box;
    border-radius: 12px;
}
.cover-intro {
    background: linear-gradient(180deg, #fffaf4 0%, #fff3e4 100%);
}
.cover-emoji {
    font-size: 64px;
    line-height: 1;
    margin-bottom: 18px;
    filter: drop-shadow(0 8px 16px rgba(224,130,80,0.18));
}
.cover-title {
    font-size: 22px;
    font-weight: 800;
    color: #4a3525;
    letter-spacing: 1px;
    margin-bottom: 12px;
}
.cover-desc {
    font-size: 14px;
    color: #7a6550;
    line-height: 1.7;
    max-width: 280px;
    margin-bottom: 16px;
}
.cover-note {
    font-size: 12px;
    color: #b5a090;
    background: rgba(255,255,255,0.7);
    padding: 8px 14px;
    border-radius: 999px;
    margin-bottom: 28px;
}
.cover-hint {
    font-size: 12px;
    color: #e08050;
    font-weight: 500;
    animation: pulseHint 2s ease-in-out infinite;
}
@keyframes pulseHint {
    0%, 100% { opacity: .7; transform: translateX(0); }
    50% { opacity: 1; transform: translateX(4px); }
}

.cover-steps {
    background: linear-gradient(180deg, #fffaf4 0%, #fff3e4 100%);
    align-items: flex-start;
    text-align: left;
}
.cover-steps .cover-title {
    width: 100%;
    text-align: center;
    margin-bottom: 22px;
}
.cover-step-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 18px;
}
.cover-step-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(255,255,255,0.85);
    border-radius: 14px;
    font-size: 14px;
    color: #5e4a39;
    box-shadow: 0 2px 10px rgba(160,120,80,0.06);
    border: 1px solid rgba(240,220,200,0.5);
}
.cover-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #f0a860, #e08050);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    flex-shrink: 0;
}

.tutorial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.92);
    color: #8a7060;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 10px rgba(80,50,20,0.12);
    transition: all .2s;
    z-index: 2;
}
.tutorial-nav:hover { background: #fff; color: #e08050; }
.tutorial-nav:active { transform: translateY(-50%) scale(.92); }
.tutorial-prev { left: 8px; }
.tutorial-next { right: 8px; }

/* 手机端：箭头放到轮播下方，避免遮挡内容 */
@media (max-width: 767px) {
    .tutorial-carousel { padding-bottom: 40px; }
    .tutorial-swiper { aspect-ratio: 4 / 5; }
    .tutorial-nav {
        top: auto;
        bottom: 0;
        transform: none;
        width: 28px;
        height: 28px;
        font-size: 14px;
        opacity: .9;
    }
    .tutorial-nav:active { transform: scale(.92); }
    .tutorial-prev { left: auto; right: 52px; }
    .tutorial-next { right: 16px; }
    .cover-hint { display: none; }
    .cover-title { font-size: 19px; }
    .cover-desc { font-size: 13px; max-width: 240px; }
    .cover-step-item { padding: 12px 14px; font-size: 13px; }
}

.tutorial-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}
.tutorial-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #e0d5c8;
    cursor: pointer;
    transition: all .25s;
}
.tutorial-dot.active {
    width: 18px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f0a860, #e08050);
}
.tutorial-page {
    text-align: center;
    margin-top: 8px;
    font-size: 12px;
    color: #b5a090;
}

/* PC 端：弹窗更宽，让截图更清晰 */
@media (min-width: 768px) {
    #tutorialModal .modal-content { max-width: 680px; }
    .tutorial-swiper { aspect-ratio: 4 / 3; }
    .cover-title { font-size: 26px; }
    .cover-desc { font-size: 15px; max-width: 340px; }
    .cover-step-item { font-size: 15px; padding: 16px 18px; }
    .tutorial-slide img { border-radius: 12px; }
}

/* 矮屏手机：封面内边距稍小 */
@media (max-height: 700px) {
    .tutorial-cover { padding: 16px 14px; }
    .cover-emoji { font-size: 48px; margin-bottom: 12px; }
    .cover-title { font-size: 18px; }
    .cover-step-item { padding: 11px 13px; font-size: 13px; }
}

/* ==================== 会员 / 支付 ==================== */
/* 提交页会员横幅 */
.vip-banner {
    background: linear-gradient(135deg, #fff3df, #ffe9cf);
    border: 1px solid #f0cfa0;
    color: #9a6a2a;
    border-radius: 14px;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.6;
    margin-bottom: 14px;
}

/* 维护公告横幅 */
.maint-banner {
    background: linear-gradient(135deg, #ffe7d6, #ffd9c2);
    border: 1px solid #f0b48a;
    color: #b3502a;
    border-radius: 14px;
    padding: 14px 16px;
    font-size: 14px;
    line-height: 1.7;
    margin: 6px 0 14px;
    text-align: center;
}
.maint-banner strong { color: #a23e1c; }

/* 会员状态框 */
.vip-status {
    border-radius: 16px;
    padding: 18px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.7;
    text-align: center;
}
.vip-status.vip-active {
    background: linear-gradient(135deg, #fff1d6, #ffe3b8);
    border: 1px solid #efc88a;
    color: #8a5a18;
}
.vip-status.vip-inactive {
    background: rgba(255,255,255,0.7);
    border: 1px dashed #e3cdb8;
    color: #9a8470;
}
.vip-status .vip-expire { font-size: 13px; font-weight: 500; color: #b08a5a; }
.vip-renew-tip { font-size: 12px; font-weight: 400; color: #b5a08a; margin-top: 6px; }

/* 套餐卡片 */
.plan-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 18px;
}
.plan-card {
    position: relative;
    width: 100%;
    min-width: 0;
    border: 1.5px solid #e8d5c4;
    border-radius: 16px;
    padding: 18px 8px 14px;
    text-align: center;
    cursor: pointer;
    background: rgba(255,255,255,0.7);
    transition: all .2s;
    color: inherit;
    font: inherit;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
}
.plan-card:hover {
    border-color: #deb996;
    background: rgba(255,250,245,0.96);
}
.plan-card:focus-visible {
    outline: 3px solid rgba(224,128,80,0.28);
    outline-offset: 2px;
}
.plan-card.recommended {
    padding-top: 32px;
}
.plan-card.selected {
    border-color: #e08050;
    background: linear-gradient(145deg, #fff9f3, #ffead7);
    box-shadow: 0 7px 20px rgba(224,130,80,0.2);
    transform: translateY(-2px);
}
.plan-badge {
    position: absolute;
    top: 7px;
    right: 7px;
    padding: 3px 7px;
    border-radius: 999px;
    background: linear-gradient(135deg, #b85831, #963d26);
    color: #fff;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: .5px;
    box-shadow: 0 3px 8px rgba(210,105,60,0.22);
}
.plan-title { font-size: 13px; color: #7a6550; font-weight: 600; }
.plan-price { font-size: 26px; font-weight: 800; color: #e0703a; margin: 6px 0 2px; }
.plan-yen { font-size: 14px; font-weight: 600; margin-right: 1px; }
.plan-days { font-size: 12px; color: #7f695a; }
.plan-hosting-limit { margin-top:8px; font-size:11px; line-height:1.45; color:#9b6848; font-weight:600; }
.plan-saving {
    margin-top: 7px;
    color: #9f4025;
    font-size: 11px;
    font-weight: 700;
}

/* 支付渠道 */
.pay-channel { margin-top: 20px; }
.pay-channel-title { display: block; font-size: 13px; color: #8a7060; margin-bottom: 10px; }
.channel-options { display: flex; gap: 10px; }
.channel-opt {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1.5px solid #e8d5c4;
    border-radius: 12px;
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
    color: #6a5847;
    background: rgba(255,255,255,0.7);
    transition: all .2s;
}
.channel-opt.selected { border-color: #e08050; background: #fff6ee; color: #c06838; font-weight: 600; }
.channel-icon { font-size: 18px; }

/* 支付弹窗 */
.pay-body { text-align: center; padding: 8px 0 4px; }
.pay-amount { font-size: 15px; color: #7a6550; margin-bottom: 16px; }
.pay-amount strong { font-size: 24px; color: #e0703a; }
.pay-qr {
    width: 220px; height: 220px;
    border-radius: 12px;
    border: 1px solid #eee0d0;
    background: #fff;
    padding: 8px;
}
.pay-tip { font-size: 13px; color: #b5a090; margin-top: 12px; }
.pay-status { font-size: 14px; color: #8a7060; margin-top: 14px; font-weight: 600; }

/* 窄屏：保留双列，压缩字级与留白以避免横向溢出 */
@media (max-width: 360px) {
    .plan-list { gap: 8px; }
    .plan-card { padding: 18px 6px 12px; }
    .plan-card.recommended { padding-top: 32px; }
    .plan-price { font-size: 22px; }
    .plan-title { font-size: 12px; }
    .plan-days { font-size: 11px; }
}

/* 自动托管 */
.hosting-entitlement {display:flex;flex-direction:column;gap:4px;margin-top:16px;padding:14px;border-radius:14px;background:#fff4e6;color:#8a5a2d;font-size:13px;}
.hosting-entitlement em {font-style:normal;color:#ba4f3b;overflow-wrap:anywhere;}
.field-error {display:block;min-height:0;margin-top:5px;color:#bd4c4c;font-size:11px;line-height:1.4;overflow-wrap:anywhere;}
.hosting-locked {margin-top:16px;padding:20px;border:1px dashed #e5bb8d;border-radius:16px;text-align:center;background:#fffaf4;color:#866d57;}
.hosting-locked p {font-size:13px;line-height:1.6;margin-top:7px;}
.btn-secondary {width:100%;min-height:44px;margin-top:8px;border:1px solid #dec5ad;border-radius:13px;background:#fff;color:#8a6d5d;font-weight:600;}
.hosting-setup-grid {display:grid;grid-template-columns:1fr;gap:14px;margin-top:20px;align-items:start;}
.hosting-form {min-width:0;padding:16px;border:1px solid #ead8c7;border-radius:16px;background:rgba(255,255,255,.55);}
.hosting-plan-summary {grid-column:1/-1;margin-top:14px;padding:10px 12px;border-radius:11px;background:#fff4e6;color:#8a5a2d;font-size:12px;font-weight:600;text-align:center;}
.hosting-notices {min-width:0;border:1px solid #ead8c7;border-radius:16px;background:rgba(255,250,244,.86);overflow:hidden;}
.hosting-notices-toggle {display:flex;width:100%;min-height:50px;align-items:center;justify-content:space-between;gap:12px;padding:11px 14px;border:0;background:#fff7ed;color:#74533b;text-align:left;cursor:pointer;}
.hosting-notices-toggle>span:first-child {display:flex;flex-direction:column;gap:2px;}.hosting-notices-toggle strong{font-size:14px}.hosting-notices-toggle small{font-size:11px;color:#a78c75;font-weight:500;}
.hosting-notices-chevron {font-size:17px;color:#bd8b63;transition:transform .2s;}.hosting-notices:not(.expanded) .hosting-notices-chevron{transform:rotate(180deg);}
.hosting-notices-body {display:grid;grid-template-columns:1fr;gap:8px;max-height:420px;padding:10px;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#d9b99f transparent;}
.hosting-notices-body[hidden] {display:none;}
.hosting-notices article {display:flex;gap:9px;padding:10px;border-radius:11px;background:rgba(255,255,255,.72);border:1px solid #f0dfcf;}
.hosting-notices article>span {font-size:18px;line-height:1.3;}
.hosting-notices strong {font-size:13px;color:#74533b;}
.hosting-notices p {margin-top:2px;font-size:11.5px;line-height:1.48;color:#9a806b;overflow-wrap:anywhere;}
.hosting-section {margin-top:26px;}
.hosting-section h3 {font-size:15px;color:#5f4736;margin-bottom:10px;}
.hosting-empty {padding:20px;text-align:center;color:#b5a090;font-size:13px;}
.hosting-task {padding:14px;margin-top:10px;border:1px solid #ead8c7;border-radius:14px;background:rgba(255,255,255,.78);overflow:hidden;}
.hosting-task-head {display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:13px;}
.hosting-status {padding:3px 8px;border-radius:999px;font-size:11px;background:#eee;color:#777;white-space:nowrap;}
.hosting-status.pending,.hosting-status.retry {background:#fff0cf;color:#9a641d}.hosting-status.running{background:#e9f2ff;color:#3971a9}.hosting-status.success{background:#eaf6e7;color:#4d8145}.hosting-status.failed{background:#ffebeb;color:#ad4545}.hosting-status.skipped,.hosting-status.cancelled{background:#eeeae6;color:#7c7167}
.hosting-task-range {margin-top:10px;font-size:14px;color:#674c38;font-weight:600;}.hosting-task-steps,.hosting-task-result,.hosting-task-message{margin-top:6px;font-size:12px;line-height:1.55;color:#927965;overflow-wrap:anywhere;}
.hosting-task-message {padding:8px;border-radius:8px;background:#fff7ef;color:#a65e42;}
.hosting-failure-detail {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:9px;padding:10px 11px;border:1px solid #f1caca;border-radius:10px;background:#fff5f3;color:#8f4545;}
.hosting-failure-copy {min-width:0;}.hosting-failure-title{display:flex;align-items:center;gap:7px;flex-wrap:wrap}.hosting-failure-title strong{font-size:12px}.hosting-failure-attempts{padding:2px 7px;border-radius:999px;background:#f9dddd;color:#a64b4b;font-size:10px;font-weight:700;white-space:nowrap;}
.hosting-failure-detail p {margin-top:3px;font-size:12px;line-height:1.5;font-weight:600;overflow-wrap:anywhere;}.hosting-failure-detail small{display:block;margin-top:2px;color:#a66d61;font-size:11px;line-height:1.45;overflow-wrap:anywhere;}
.hosting-failure-detail>button {flex:0 0 auto;min-height:38px;padding:0 12px;border:1px solid #e5aaa5;border-radius:9px;background:#fff;color:#a54b48;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;}.hosting-failure-detail>button:focus-visible{outline:0;box-shadow:0 0 0 3px rgba(190,84,78,.17);}
.hosting-task-actions {display:flex;gap:8px;margin-top:12px;}.hosting-task-actions button,.hosting-pager button{min-height:40px;padding:0 15px;border:1px solid #e1c8b2;border-radius:10px;background:#fff;color:#8b654b;cursor:pointer;}.hosting-task-actions .danger{color:#b54f4f;border-color:#efc5c5;}
.hosting-pager {display:flex;align-items:center;justify-content:center;gap:12px;margin-top:14px;font-size:12px;color:#8a7060;}.hosting-pager button:disabled{opacity:.4;}
.hosting-history-heading {display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.hosting-history-heading h3 {margin-bottom:0;}
.hosting-history-total {padding:4px 10px;border-radius:999px;background:#f3e4d5;color:#8b654b;font-size:11px;font-weight:700;white-space:nowrap;}
.hosting-history-filters {display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end;padding:12px;border:1px solid #ead8c7;border-radius:14px;background:rgba(255,250,244,.82);}
.hosting-history-filters[data-status="FAILED"] {border-color:#efbcbc;background:#fff5f3;}.hosting-history-filters[data-status="FAILED"] select {border-color:#df8e8e;color:#a84646;}
.hosting-history-filters label {display:flex;flex-direction:column;gap:5px;color:#8a7060;font-size:11px;font-weight:600;}
.hosting-history-filters select,.hosting-history-filters input {width:100%;min-height:40px;padding:0 10px;border:1px solid #e1c8b2;border-radius:10px;background:#fff;color:#5f4736;font-size:13px;outline:none;}
.hosting-history-filters select:focus,.hosting-history-filters input:focus,.hosting-history-filters button:focus-visible,.hosting-pager button:focus-visible,.hosting-load-more:focus-visible {border-color:#dc8d5b;box-shadow:0 0 0 3px rgba(220,141,91,.18);}
.hosting-history-filters label:first-child,.hosting-filter-actions {grid-column:1/-1;}.hosting-filter-actions {display:flex;gap:7px;}.hosting-filter-actions button {flex:1;min-height:40px;padding:0 14px;border:1px solid #dec5ad;border-radius:10px;background:#fff;color:#8b654b;font-weight:600;cursor:pointer;}
.hosting-filter-actions .hosting-filter-primary {border-color:#db8a58;background:#e89562;color:#fff;}
.hosting-history-filters button:disabled,.hosting-history-filters input:disabled,.hosting-history-filters select:disabled {opacity:.58;cursor:wait;}
.hosting-history-message {min-height:18px;padding-top:6px;color:#a65e42;font-size:12px;}
.hosting-pager {flex-wrap:wrap;gap:7px;}.hosting-pager button {min-width:40px;padding:0 11px;}.hosting-pager .hosting-page-number.active {border-color:#db8a58;background:#e89562;color:#fff;}
.hosting-pager.loading {pointer-events:none;opacity:.58;}
.hosting-load-more {width:100%;min-height:44px;margin-top:14px;border:1px solid #dec5ad;border-radius:12px;background:#fffaf4;color:#8b654b;font-weight:700;cursor:pointer;}.hosting-load-more:disabled{opacity:.55;cursor:wait;}

@media (min-width: 768px) {
    .container.hosting-wide {max-width:900px;}
    .hosting-setup-grid {grid-template-columns:minmax(0,3fr) minmax(270px,2fr);gap:16px;}
    .hosting-form {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 12px;}
    .hosting-form .btn-primary,.hosting-form .btn-secondary,.hosting-form .msg {grid-column:1/-1;}
    .hosting-notices {height:466px;}
    .hosting-notices-toggle {cursor:default;}
    .hosting-notices-body {max-height:414px;}
}

@media (max-width: 767px) {
    #mainTabs {overflow-x:auto;justify-content:flex-start;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
    #mainTabs::-webkit-scrollbar{display:none} #mainTabs .tab{flex:0 0 auto;min-width:84px;min-height:44px;padding:10px 9px;font-size:13px;}
    .hosting-form {display:grid;grid-template-columns:1fr;padding:13px;}.hosting-task-actions button{flex:1;min-height:44px;}
    .hosting-notices-body {max-height:252px;}.hosting-notices-toggle{min-height:48px;}
    .hosting-history-filters {padding:11px;gap:9px;}.hosting-filter-actions button{min-height:44px;}
    .hosting-pager {display:none;}
    .hosting-failure-detail {align-items:stretch;flex-direction:column;gap:9px;}.hosting-failure-detail>button{width:100%;min-height:44px;}
}

/* 两页图文教程 */
.tutorial-info-card {
    width: 100%;
    padding: 22px;
    background: #fff;
    text-align: left;
}

.tutorial-step-heading {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 16px;
    border-bottom: 1px solid #eee8e1;
}

.tutorial-step-number {
    display: inline-flex;
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #53bd64;
    color: #fff;
    font-size: 22px;
    font-weight: 700;
}

.tutorial-step-heading h4 {
    margin: 0 0 3px;
    color: #3f3027;
    font-size: 22px;
}

.tutorial-step-heading p {
    margin: 0;
    color: #a09287;
    font-size: 14px;
}

.tutorial-copy {
    padding: 16px 2px 8px;
    color: #70645b;
    font-size: 16px;
    line-height: 1.75;
}

.tutorial-copy p { margin: 0 0 10px; }
.tutorial-copy strong { color: #42362e; }

.tutorial-note,
.tutorial-complete {
    padding: 10px 12px;
    border-radius: 8px;
    font-weight: 600;
}

.tutorial-note {
    background: #fff8dd;
    color: #9b6a00;
}

.tutorial-complete {
    background: #ecf9ef;
    color: #24823b;
}

.tutorial-slide img.tutorial-source-image {
    display: block;
    width: min(100%, 430px);
    height: auto;
    margin: 8px auto 0;
    border: 1px solid #eee7df;
    border-radius: 12px;
    background: #f8f5f1;
}

.tutorial-slide img.tutorial-source-image-wide { width: 100%; }

/* FAQ 文字内容 */
.faq-text-content {
    padding: 4px 2px 2px;
    color: #55483f;
}

.faq-text-content h4 {
    margin: 0 0 14px;
    color: #3f3027;
    font-size: 17px;
}

.faq-text-content ol {
    margin: 0;
    padding-left: 24px;
}

.faq-text-content li {
    margin-bottom: 14px;
    padding-left: 3px;
}

.faq-text-content li:last-child { margin-bottom: 0; }

.faq-question {
    margin: 0 0 5px;
    color: #493a31;
    font-weight: 700;
    line-height: 1.5;
}

.faq-answer {
    margin: 0;
    color: #7b6f66;
    line-height: 1.65;
}

@media (max-width: 600px) {
    .tutorial-info-card { padding: 16px 14px; }

    .tutorial-step-heading {
        gap: 10px;
        padding-bottom: 12px;
    }

    .tutorial-step-number {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
        font-size: 18px;
    }

    .tutorial-step-heading h4 { font-size: 18px; }

    .tutorial-copy {
        padding-top: 12px;
        font-size: 14px;
        line-height: 1.65;
    }

    .tutorial-slide img.tutorial-source-image { border-radius: 9px; }
    .faq-text-content h4 { font-size: 16px; }
    .faq-text-content ol { padding-left: 21px; }
    .faq-question,
    .faq-answer { font-size: 14px; }
}
.manual-step-queue{margin-top:12px;padding:12px 14px;border:1px solid #efd09b;border-radius:12px;background:#fff8e9;color:#8a6332;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:14px}.manual-step-queue button{flex:0 0 auto;border:1px solid #dc9b63;border-radius:9px;background:#fff;color:#b76b38;padding:7px 11px;cursor:pointer}@media(max-width:600px){.manual-step-queue{align-items:flex-start;flex-direction:column}.manual-step-queue button{width:100%;justify-content:center}}