/* =========================
   全局基础
========================= */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:
            -apple-system,
            BlinkMacSystemFont,
            "Segoe UI",
            "PingFang SC",
            "Microsoft YaHei",
            Arial,
            sans-serif;
    background:#f7faf8;
    color:#101713;
}

a{
    text-decoration:none;
    color:inherit;
}

.container{
    width:100%;
    /* 原本1200，页面两边宽度，值越大留白越少 */
    max-width:1400px;
    margin:auto;
    padding:0 24px;
}

/* =========================
   顶部导航
========================= */
.topbar{
    height:72px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:white;
    border-bottom:1px solid #e5ebe7;
    position:sticky;
    top:0;
    z-index:100;
}

.logo{
    display:flex;
    align-items:center;
    gap:12px;
    font-size:22px;
    font-weight:700;
}

.logo-icon{
    width:38px;
    height:38px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:12px;
    color:white;
    font-size:20px;
    font-weight:bold;
    background:
            linear-gradient(
                    135deg,
                    #0c7b58,
                    #16c784
            );
}
.nav{
    display:flex;
    align-items:center;
    gap:30px;
    font-size:15px;
    color:#52615a;
}
.nav a{
    cursor: pointer;
}
.nav a:hover{
    color:#00996b;
}

/* =========================
 HERO
========================= */
.hero{
    margin-top:28px;
    padding:55px 55px;
    border-radius:28px;
    background:
            radial-gradient(
                    circle at 80% 10%,
                    rgba(120,255,210,.35),
                    transparent 30%
            ),
            linear-gradient(
                    120deg,
                    #10251e,
                    #087c5c
            );
    display:grid;
    grid-template-columns:
    1.1fr
    .9fr;
    gap:40px;
    color:white;
}

.hero-tag{
    display:inline-flex;
    padding:7px 15px;
    border-radius:50px;
    background:
            rgba(255,255,255,.12);
    color:#a7f5da;
    font-size:14px;
    margin-bottom:22px;
}

.hero h1{
    font-size:48px;
    line-height:1.15;
    letter-spacing:-1px;
}
.logo-icon img {
    width: 48px;
    height: 48px;
    object-fit: contain;
    display:block;
}
.hero p{
    margin-top:20px;
    max-width:520px;
    line-height:1.8;
    color:
            rgba(255,255,255,.75);
    font-size:16px;
}

.hero-buttons{
    margin-top:32px;
    display:flex;
    gap:15px;
    flex-wrap:wrap;
}

.btn-primary{
    padding:14px 28px;
    background:white;
    color:#07583f;
    border-radius:14px;
    font-weight:700;
    cursor: pointer;
}

.btn-secondary{
    padding:14px 28px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.3);
    background:
            rgba(255,255,255,.1);
    color:white;
    cursor: pointer;
}

.hero-note{
    margin-top:18px;
    font-size:12px;
    color:
            rgba(255,255,255,.55);
}

/* =========================
 数据卡
========================= */
.live-card {
    background: #f0f7f4;                                  /* 极淡的清瓷雾面绿 */
    color: #163825;                                       /* 深墨绿色字，对比清晰 */
    border-radius: 24px;
    padding: 28px;
    box-shadow: 0 12px 35px rgba(0, 30, 15, 0.2);        /* 柔和深绿环境光阴影 */
    border: 1px solid #d2e6dc;                            /* 细腻的青瓷边框 */
}

/* 内部奖励条：采用对比度舒适的提亮色 */
.live-card .stat-main {
    background: #ffffff !important;                       /* 内部嵌套纯白，增加层次对比 */
    border: 1px solid #c2dfd1 !important;
    border-radius: 14px;
}

.live-title{
    font-size:14px;
    color:#76847d;
}

.stat-main{
    margin-top:30px;
    padding:20px;
    border-radius:18px;
    background:#e8faf3;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.stat-main strong{
    font-size:34px;
    color:#008c62;
}

.stats{
    margin-top:15px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
}

.stat{
    padding:20px;
    border-radius:18px;
    background:#fafafa;
    border:1px solid #edf1ef;
}

.stat span{
    color:#77837d;
    font-size:13px;
}

.stat b{
    display:block;
    margin-top:10px;
    font-size:22px;
}

/* =========================
   通用 Section
========================= */
.section{
    margin-top: 20px;     /* 从 40px 缩小到 20px */
    padding: 30px 0;      /* 从 70px 缩小到 30px */
}

.section-title{
    margin-bottom: 24px;  /* 从 40px 缩小到 24px，让标题和表格/卡片也更紧凑 */
}

.section-title span{
    color:#008c62;
    font-size:14px;
    font-weight:700;
}

.section-title h2{
    margin-top: 8px;     /* 从 12px 略微调紧至 8px */
    font-size: 32px;
}
/* =========================
   优势卡片
========================= */
.feature-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.feature-card{
    background:white;
    border:1px solid #e5ebe7;
    border-radius:22px;
    padding:28px;
}

.feature-icon{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:14px;
    background:#e8faf3;
    font-size:24px;
}

.feature-card h3{
    margin-top:20px;
}

.feature-card p{
    margin-top:12px;
    color:#66736d;
    line-height:1.7;
}

/* =========================
   表格
========================= */
.table-box{
    overflow-x:auto;
    background:white;
    border-radius:20px;
    border:1px solid #e5ebe7;
}

table{
    width:100%;
    border-collapse:collapse;
}

th,
td{
    padding:18px;
    text-align:center;
    border-bottom:1px solid #edf1ef;
}

th{
    background:#f5f8f6;
}

/* =========================
   Tier
========================= */
.tier-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.tier-card{
    background:white;
    padding:30px;
    border-radius:22px;
    border:1px solid #e5ebe7;
}

.tier-card h3{
    color:#008c62;
}

.tier-card p{
    margin:15px 0;
    color:#66736d;
}

/* =========================
   流程
========================= */
.process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px;
}

.process-card{
    background:white;
    padding:30px;
    border-radius:22px;
    border:1px solid #e5ebe7;
}

.number{
    font-size:30px;
    font-weight:800;
    color:#008c62;
}

.process-card h3{
    margin-top:20px;
}

.process-card p{
    margin-top:10px;
    color:#66736d;
    line-height:1.6;
}

/* ====================== 登录弹窗样式 开始====================== */
.login-modal {
    display: none; /* 默认隐藏 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.35);
    z-index: 999;
    align-items: center;
    justify-content: center;
}
.login-modal-box {
    background: #ffffff;
    width: 420px;
    padding: 36px 32px;
    border-radius: 20px;
    border: 1px solid #eee;
    text-align: center;
}
.login-modal-box .logo-text{
    font-size:26px;
    font-weight:bold;
    margin-bottom:8px;
}
.login-modal-box .sub-desc{
    color:#666;
    font-size:15px;
    margin-bottom:30px;
}
.login-modal-box h2{
    font-size:22px;
    margin-bottom:12px;
}
.login-modal-box .tip-text{
    color:#707070;
    font-size:14px;
    line-height:1.6;
    margin-bottom:24px;
}
.invite-input{
    width:100%;
    padding:14px 16px;
    border:1px solid #e4e4e4;
    border-radius:12px;
    font-size:15px;
    margin-bottom:20px;
}
.invite-input::placeholder{
    color:#b8b8b8;
}
.x-login-btn{
    width:100%;
    padding:15px;
    background:#222222;
    color:white;
    border:none;
    border-radius:12px;
    font-size:16px;
    font-weight:600;
    cursor:pointer;
    transition:0.2s;
}
.x-login-btn:hover{
    background:#000000;
}
.bottom-small-text{
    margin-top:20px;
    font-size:12px;
    color:#949494;
    line-height:1.6;
}

.nav-regist-cta{
    padding:11px 20px;
    margin-left:14px;
    font-size:14px;
    font-weight:600;
    color:#ffffff;
    background:#09996c;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    transition:background 0.2s;
    cursor: pointer;
}

.nav-regist-cta:hover{
    background:#08855e;
}

.nav-login-cta{
    padding:11px 20px;
    margin-left:14px;
    font-size:14px;
    font-weight:600;
    color:#ffffff;
    background:#09996c;
    border-radius:12px;
    display:inline-flex;
    align-items:center;
    transition:background 0.2s;
    cursor: pointer;
}

.nav-login-cta:hover{
    background:#08855e;
}

.nav-charge-cta{
    padding:10px 24px;
    border-radius:999px;
    background-color:#00a878;
    color:#ffffff;
    cursor: pointer;
    font-size:18px;
    display:none;
}
.nav-logout-cta{
    padding:10px 24px;
    border-radius:999px;
    border:1px solid #88aa99;
    background:#fff;
    color:#222;
    cursor: pointer;
    font-size:18px;
    display:none;
}

/*全局提示框CSS*/
/* 消息弹窗外层容器 */
.custom-message-box{
    position: fixed;
    top:20px;
    left:50%;
    transform: translateX(-50%);
    z-index: 10000;
    transition: all 0.3s ease;
}
.custom-message-box.hide{
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
}

.message-content{
    display:flex;
    align-items:center;
    gap:16px;
    padding:16px 32px;
    border-radius:12px;
    background-color: #ffffff;
    font-size:18px;
    font-weight: 500;
}
/* 图标圆形底色 */
.message-icon{
    width:46px;
    height:46px;
    border-radius: 50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
}
/*成功图标绿色圆圈、文字黑色*/
.message-content.success .message-icon{
    background: #22b86c;
}
.message-content.success{
    color:#000000;
}
/*错误图标绿色圆圈、文字红色*/
.message-content.error .message-icon{
    background: #22b86c;
}
.message-content.error{
    color:#e54545;
}
/*全局提示框CSS*/

/* ====================== 登录弹窗样式 结束====================== */

/* ====================== 任务广场 独立样式 开始 ====================== */
:root{
    --border:#dde5e1;
    --muted:#788781;
    --text:#112620;
    --emerald:#087e60;
    --emerald-soft:#e4f8f1;
    --shadow:0 8px 24px rgba(22,54,43,.06);
}

.spark-square{
    max-width:1640px;
    margin:0 auto;
    padding:30px 32px 82px;
}
.spark-market-hero{
    display:grid;
    grid-template-columns:1.35fr .8fr;
    gap:18px;
}
.spark-hero-main{
    position:relative;
    overflow:hidden;
    border:1px solid var(--border);
    border-radius:22px;
    padding:31px 35px;
    background:linear-gradient(125deg,#10251f,#0c7e61 66%,#14bd8f);
    color:#fff;
}
.spark-hero-main::after{
    content:"✦";
    position:absolute;
    right:34px;
    top:-10px;
    color:rgba(255,255,255,.09);
    font-size:150px;
    line-height:1;
    transform:rotate(12deg);
}
.spark-eyebrow{
    display:flex;
    align-items:center;
    gap:7px;
    color:#8cf0d2;
    font-size:11px;
    font-weight:850;
    letter-spacing:.15em;
}
.spark-hero-main h1{
    margin:8px 0 10px;
    font-size:34px;
    letter-spacing:-.03em;
}
.spark-hero-main p{
    max-width:660px;
    color:rgba(255,255,255,.74);
    font-size:14px;
    line-height:1.7;
}
.spark-hero-chips{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    margin-top:24px;
}
.spark-hero-chips span{
    padding:8px 13px;
    border:1px solid rgba(255,255,255,.22);
    border-radius:999px;
    background:rgba(255,255,255,.1);
    font-size:12px;
}

.spark-balance-panel{
    display:flex;
    flex-direction:column;
    justify-content:space-between;
    border:1px solid var(--border);
    border-radius:22px;
    padding:27px 28px;
    background:#fff;
}
.spark-balance-head{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:16px;
}
.spark-panel-label{
    color:#83918b;
    font-size:13px;
}
.spark-panel-balance{
    display:block;
    margin:3px 0 17px;
    color:var(--emerald);
    font-size:24px;
    line-height:1.2;
}
.spark-panel-stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}
.spark-panel-stats div{
    padding:12px;
    border-radius:11px;
    background:#f4f8f6;
}
.spark-panel-stats span{
    display:block;
    color:#87948f;
    font-size:11px;
}
.spark-panel-stats b{
    font-size:17px;
}

.spark-publish-task-button{
    display:flex;
    align-items:center;
    gap:9px;
    width:154px;
    min-height:64px;
    padding:10px 11px;
    border:1px solid rgba(7,126,96,.14);
    border-radius:14px;
    background:linear-gradient(135deg,#087e60,#11bd8d);
    color:#fff;
    text-decoration:none;
    box-shadow:0 9px 22px rgba(8,145,108,.2);
    transition:transform .18s ease,filter .18s ease;
}
.spark-publish-task-button:hover{
    transform:translateY(-2px);
    filter:brightness(1.05);
}
.spark-publish-icon{
    display:grid;
    place-items:center;
    width:31px;
    height:31px;
    flex:0 0 31px;
    border-radius:10px;
    background:rgba(255,255,255,.16);
}
.spark-publish-copy strong{
    display:block;
    font-size:13px;
    font-weight:900;
}
.spark-publish-copy small{
    display:block;
    margin-top:2px;
    color:rgba(255,255,255,.7);
    font-size:9px;
}
.spark-invite-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    margin-top:10px;
    padding:12px 14px;
    border-radius:11px;
    background:linear-gradient(100deg,#087d60,#10b981);
    color:#fff;
    font-size:13px;
    font-weight:900;
    text-decoration:none;
    box-shadow:0 7px 17px rgba(5,150,105,.18);
    transition:transform .18s ease;
}
.spark-invite-button:hover{
    transform:translateY(-1px);
    filter:brightness(1.05);
}
.spark-invite-button span{
    color:rgba(255,255,255,.72);
    font-size:10px;
    font-weight:700;
}

/* ========== 顶部额度信息栏 严格匹配参考图布局 ========== */
.task-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap:16px;
    margin:24px 0 16px;
}
.task-left-info {
    display: flex;
    align-items: center;
    gap:10px;
}
.dot-green{
    width:14px;
    height:14px;
    border-radius:50%;
    background:#16c784;
}
.divider{
    color:#999;
}
.info-tip{
    position: relative;
    cursor: pointer;
}
.tooltip-pop{
    position:absolute;
    top:26px;
    left:0;
    width:360px;
    background:#fff;
    box-shadow:0 2px 12px #00000018;
    border-radius:8px;
    padding:14px;
    font-size:14px;
    color:#333;
    z-index:99;
    display:none;
}
.info-tip:hover .tooltip-pop{
    display:block;
}
.task-center-income{
    padding:6px 16px;
    background:#ecf9f3;
    border-radius:999px;
    color:#0c7b58;
    white-space:nowrap;
}
.task-right-btn .btn-green{
    background:#087e60;
    color:#fff;
    border:none;
    padding:12px 24px;
    border-radius:12px;
    font-size:16px;
    cursor:pointer;
    white-space:nowrap;
}

/* 筛选工具栏 */
.spark-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:15px 18px;
    margin:18px 0 21px;
    border:1px solid var(--border);
    border-radius:16px;
    background:rgba(255,255,255,.9);
}
.spark-toolbar-main{
    display:flex;
    align-items:center;
    gap:12px;
}
.spark-filters{
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:9px;
}
.spark-filters button{
    min-height:40px;
    padding:0 16px;
    border:1px solid var(--border);
    border-radius:999px;
    background:#fff;
    color:var(--muted);
    cursor:pointer;
    font-size:13px;
}
.spark-filters button.active{
    border-color:#81dbc0;
    background:var(--emerald-soft);
    color:#087e60;
    font-weight:750;
}
.spark-sort-control{
    display:inline-flex;
    align-items:center;
    gap:7px;
    height:40px;
    padding:0 12px;
    border:1px solid #d8e6e1;
    border-radius:999px;
    background:linear-gradient(180deg,#fff,#f7fbf9);
    color:#698078;
}
.spark-sort-control select{
    border:0;
    outline:0;
    background:transparent;
    color:#17362d;
    cursor:pointer;
    font-size:12px;
    font-weight:800;
}
.spark-task-count{
    color:#7a8983;
    font-size:14px;
}

.spark-section-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    margin:24px 3px 16px;
}
.spark-section-head h2{
    font-size:24px;
}
.spark-section-head p{
    margin:4px 0 0;
    color:var(--emerald);
    font-size:14px;
}
.spark-section-head>span{
    color:var(--emerald);
    font-size:13px;
    font-weight:700;
}

/* 任务卡片网格 */
.spark-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:16px;
}
.spark-task-card{
    display:grid;
    grid-template-rows:38px 68px 54px 82px 55px;
    height:297px;
    border:1px solid #d8e2de;
    border-radius:16px;
    background:#fff;
    box-shadow:0 6px 16px rgba(30,54,46,.075);
    transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
    cursor:pointer;
}
.spark-task-card:hover{
    transform:translateY(-5px);
    border-color:#22c99a;
    box-shadow:0 18px 36px rgba(10,128,91,.16);
}
.spark-card-period{
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:8px 13px;
    border-bottom:1px solid #dfe8e4;
    background:linear-gradient(180deg,#f9fbfa,#f4f8f6);
    color:#7d8b86;
    font-size:10px;
}
.spark-card-period span::before{
    content:"";
    display:inline-block;
    width:5px;
    height:5px;
    margin-right:5px;
    border-radius:50%;
    background:#13c18f;
    box-shadow:0 0 0 2px rgba(19,193,143,.12);
}
.spark-publisher{
    display:flex;
    align-items:center;
    gap:10px;
    padding:9px 13px;
    border-bottom:1px solid #e7eeeb;
}
.spark-avatar{
    width:40px;
    height:40px;
    border-radius:9px;
    object-fit:cover;
    border:1px solid #edf1ef;
}
.spark-publisher strong{
    display:block;
    font-size:14px;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.spark-publisher span{
    display:block;
    margin-top:1px;
    color:#7f8e88;
    font-size:10px;
    white-space:nowrap;
}
.spark-publisher em{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-left:auto;
    padding:6px 8px;
    border:1px solid #93c5fd;
    border-radius:999px;
    background:#eff6ff;
    color:#2563eb;
    font-style:normal;
    font-size:10px;
    font-weight:850;
}

.spark-tier-rewards{
    margin:0 13px;
    padding-top:7px;
    overflow:hidden;
}
.spark-tier-rewards>span{
    display:block;
    margin-bottom:5px;
    color:#84928c;
    font-size:10px;
}
.spark-tier-rewards>div{
    display:flex;
    flex-wrap:nowrap;
    gap:5px;
}
.spark-tier-rewards b{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:29px;
    height:24px;
    border:1px solid #dde4e1;
    border-radius:6px;
    background:#f3f5f4;
    color:#68756f;
    font-size:11px;
    font-weight:850;
}
.spark-tier-rewards .tier-S{
    border-color:#f2d49c;
    background:#fff3dd;
    color:#ad6500;
}
.spark-tier-rewards .tier-A{
    border-color:#ccddf7;
    background:#eaf2ff;
    color:#3167aa;
}
.spark-tier-rewards .tier-B{
    border-color:#bfe8da;
    background:#e8faf3;
    color:#087b5e;
}
.spark-tier-rewards .tier-C{
    border-color:#cfe7df;
    background:#eff8f5;
    color:#397565;
}
.spark-tier-rewards .tier-D{
    border-color:#d9e1de;
    background:#f2f5f4;
    color:#65736e;
}
.spark-tier-rewards .tier-E{
    border-color:#e1dfe5;
    background:#f6f4f8;
    color:#766f7d;
}

.spark-reward{
    margin:0 13px;
    padding:10px 12px;
    border:1px solid #dfe9e5;
    border-radius:11px;
    background:linear-gradient(145deg,#f8fbfa,#f2f8f5);
}
.spark-reward>span{
    color:#7f8d88;
    font-size:10px;
}
.spark-reward strong{
    display:block;
    margin-top:4px;
    color:#009b72;
    font-size:24px;
    line-height:1.05;
}
.spark-reward small{
    color:#74847e;
    font-size:10px;
}

.spark-card-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
    margin:7px 13px 10px;
    padding:8px 10px;
    border:1px solid #b9e5d7;
    border-radius:8px;
    background:#eaf9f4;
    color:#087d60;
    font-size:11px;
    font-weight:800;
    position:relative;
    --progress:0%;
}
.spark-card-footer::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    height:100%;
    width:var(--progress);
    /*background:linear-gradient(90deg,rgba(18,197,150,.18),rgba(18,197,150,.08));*/
    background:linear-gradient(90deg,rgba(18,197,150,.52),rgba(18,197,150,.26));
    border-right:1px solid rgba(18,197,150,.22);
}
.spark-card-footer>span{
    position:relative;
    z-index:2;
}
.spark-card-footer>span:last-child{
    color:#61716b;
    font-size:10px;
    font-weight:700;
}

/* 响应式适配 */
@media(max-width:1250px){
    .spark-square{
        max-width:1180px;
    }
    .spark-grid{
        grid-template-columns:repeat(3,minmax(0,1fr));
    }
}
@media(max-width:800px){
    .spark-market-hero{
        grid-template-columns:1fr;
    }
    .spark-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}
@media(max-width:640px){
    .spark-square{
        padding:18px 14px 55px;
    }
    .spark-grid{
        grid-template-columns:1fr;
    }
}
/* ====================== 任务广场 独立样式 结束 ====================== */

/* =========================
    【发布任务页面 publish.html 样式】
========================= */
.publish-wrap {
    max-width: 1560px;
    margin: 32px auto;
    padding: 0 24px 60px;
}
/* 顶部切换标签 */
.tab-switch {
    display: flex;
    margin: 0 auto 18px;
    width: max-content;
    padding: 5px;
    border: 1px solid #dfe8e4;
    border-radius: 14px;
    background: #fff;
}
.tab-switch button {
    min-width: 110px;
    min-height: 38px;
    padding: 0 16px;
    border: none;
    border-radius: 10px;
    background: transparent;
    font-size: 14px;
    font-weight: 700;
    color: #61706b;
    cursor: pointer;
    transition: 0.2s;
}
.tab-switch button.active {
    background: #079b74;
    color: #fff;
    box-shadow: 0 3px 12px rgba(7, 155, 116, 0.22);
}
/* 头部横幅 */
.hero-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 30px 32px;
    border-radius: 22px;
    background: linear-gradient(125deg, #10251f, #0c7e61 66%, #14bd8f);
    color: #fff;
    margin-bottom: 24px;
}
.hero-left span {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #9ef1d8;
    letter-spacing: 0.15em;
    font-weight: 800;
}
.hero-left h1 {
    font-size: 30px;
    margin: 8px 0 6px;
}
.hero-left p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 14px;
    max-width: 720px;
    line-height: 1.7;
}
.hero-right a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 12px;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    backdrop-filter: blur(6px);
    transition: 0.2s;
}
.hero-right a:hover {
    background: rgba(255,255,255,0.12);
}
/* 主布局 左右分栏 */
.publish-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 345px;
    gap: 22px;
    align-items: start;
}
.form-card {
    background: #fff;
    border: 1px solid #dfe8e4;
    border-radius: 20px;
    padding: 26px;
    box-shadow: 0 8px 24px rgba(22, 54, 45, 0.06);
    margin-bottom: 16px;
}
.card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}
.card-head b {
    flex: 0 0 34px;
    height: 34px;
    border-radius: 10px;
    background: #e7f9f3;
    color: #008563;
    display: grid;
    place-items: center;
    font-size: 13px;
}
.card-head div span {
    font-size: 10px;
    color: #00a078;
    font-weight: 900;
    letter-spacing: 0.16em;
}
.card-head div h2 {
    font-size: 19px;
    margin: 3px 0 3px;
}
.card-head div p {
    font-size: 12px;
    color: #81908a;
}
/* 任务类型选择网格 */
.type-grid {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 12px;
}
.type-item {
    border:1px solid #dfe7e4;
    border-radius:14px;
    padding:16px;
    cursor: pointer;
    transition:0.2s;
    min-height:114px;
}
.type-item.active {
    border-color:#29c99b;
    background:#effbf7;
    box-shadow:0 0 0 1px #29c99b;
}
.type-item:hover {
    transform: translateY(-2px);
}
.type-item strong {
    display:block;
    margin:10px 0 4px;
    font-size:14px;
}
.type-item small {
    font-size:11px;
    color:#65736e;
    line-height:1.45;
}
/* 输入框区域 */
.warn-tip {
    padding:11px 15px;
    background:#fef3c7;
    border:1px solid #f59e0b;
    border-radius:10px;
    color:#92400e;
    font-size:13px;
    margin-bottom:14px;
}
textarea,input[type="text"],input[type="number"] {
    width:100%;
    border:1px solid #dde5e2;
    border-radius:10px;
    padding:12px 14px;
    font-size:14px;
    outline:none;
    transition:0.2s;
}
textarea:focus,input:focus {
    border-color:#079b74;
    box-shadow:0 0 0 2px rgba(7,155,116,0.15);
}
textarea {
    min-height:110px;
    resize:vertical;
}
/* 创作者等级卡片 */
.tier-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:14px;
}
.tier-card {
    background:#fafcfb;
    border:1px solid #e1e9e6;
    border-radius:14px;
    padding:16px;
}
.tier-top {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.tier-name.S { color:#e69820; }
.tier-name.A { color:#4077e8; }
.tier-name.B { color:#23b974; }
.tier-name.C { color:#888; }
.tier-name.D { color:#888; }
.tier-name.E { color:#888; }
.tier-card label {
    font-family: "Microsoft YaHei", sans‑serif;
    font-weight: 500;  /* 中等粗细，不要太粗 */
    display:block;
    margin-top:14px;
    font-size:11px;
    color:#555;
}
.tier-card input {
    margin-top:6px;
    height:38px;
    text-align:center;
}
.tier-sum {
    display:block;
    margin-top:9px;
    font-size:12px;
    color:#008d69;
    font-weight:700;
}
/* 时长选择 */
.duration-grid {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:12px;
}
.duration-btn {
    border:1px solid #dfe7e4;
    border-radius:14px;
    padding:16px;
    background:#fff;
    text-align:center;
    cursor:pointer;
    transition:0.2s;
}
.duration-btn.active {
    border-color:#24c899;
    background:#effbf7;
}
.duration-btn span {
    display:block;
    font-size:12px;
    color:#84918d;
    margin-top:4px;
}
/* 释放节奏 */
.pace-grid {
    display:grid;
    grid-template-columns: repeat(2, 1fr);
    gap:12px;
}
.pace-btn {
    border:1px solid #dfe7e4;
    border-radius:14px;
    padding:16px;
    background:#fff;
    cursor:pointer;
    transition:0.2s;
}
.pace-btn.active {
    border-color:#24c899;
    background:#effbf7;
}
/* 预算侧边栏 */
.budget-card {
    position:sticky;
    top:90px;
    background:#fff;
    border:1px solid #dfe8e4;
    border-radius:20px;
    padding:24px;
    box-shadow: 0 8px 24px rgba(22, 54, 45, 0.06);
}
.budget-title {
    display:flex;
    align-items:center;
    gap:10px;
    color:#009b74;
    margin-bottom:20px;
}
.budget-row {
    display:flex;
    justify-content:space-between;
    padding:6px 0;
    font-size:13px;
}
.budget-total {
    margin-top:14px;
    padding-top:16px;
    border-top:1px solid #e5ece9;
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.budget-total strong {
    font-size:26px;
}
.budget-desc {
    margin:16px 0 20px;
    font-size:11px;
    color:#71807a;
    line-height:1.6;
}
.suggestion-desc {
    margin:16px 0 20px;
    font-size:11px;
    color:#ff0000;
    line-height:1.6;
}
.submit-custom-btn {
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:linear-gradient(90deg,#008e6a,#13b98a);
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:0.2s;
}
.submit-custom-btn:disabled {
    opacity:0.42;
    cursor:not-allowed;
}
.submit-interact-btn {
    width:100%;
    padding:14px;
    border:none;
    border-radius:12px;
    background:linear-gradient(90deg,#008e6a,#13b98a);
    color:#fff;
    font-size:14px;
    font-weight:800;
    cursor:pointer;
    transition:0.2s;
}
.submit-interact-btn-:disabled {
    opacity:0.42;
    cursor:not-allowed;
}
.tip-error {
    margin-top:12px;
    padding:11px;
    background:#fff1f1;
    border-radius:10px;
    color:#b91c1c;
    font-size:12px;
}
/* 互动任务面板 默认隐藏 */
.panel-interact {
    display:none;
}
.panel-custom {
    display:block;
}
/* 移动端适配 */
@media(max-width:980px){
    .publish-layout {
        grid-template-columns: 1fr;
    }
    .tier-grid,.type-grid {
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width:640px){
    .tier-grid,.type-grid,.duration-grid,.pace-grid {
        grid-template-columns:1fr;
    }
    .hero-banner {
        flex-direction:column;
        padding:22px 18px;
    }
}

/* ======================================
   【发布任务页面 publish.html 专属样式】
====================================== */
.publish-page{
    max-width:1540px;
    margin:0 auto;
    padding:34px 28px 80px;
}

.task-mode-switch{
    display:flex;
    width:max-content;
    margin:0 auto 16px;
    padding:5px;
    border:1px solid #dfe8e4;
    border-radius:13px;
    background:#fff;
    box-shadow:0 6px 20px rgba(20,59,47,.07);
}
.task-mode-switch span,
.task-mode-switch a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:104px;
    min-height:38px;
    padding:0 16px;
    border-radius:9px;
    color:#61706b;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    transition:background .18s ease,color .18s ease;
}
.task-mode-switch .active{
    background:#079b74;
    color:#fff;
    box-shadow:0 4px 12px rgba(7,155,116,.22);
}
.task-mode-switch a:hover{
    background:#eff9f5;
    color:#078664;
}

.publish-hero{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px;
    padding:30px 32px;
    border-radius:22px;
    background:radial-gradient(circle at 75% 20%,rgba(91,255,192,.25),transparent 28%),linear-gradient(125deg,#10251f,#0c7e61 66%,#14bd8f);
    color:#fff;
    box-shadow:0 14px 38px rgba(22,90,67,.13);
}
.publish-hero > div > span{
    display:flex;
    align-items:center;
    gap:7px;
    color:#9ef1d8;
    font-size:10px;
    font-weight:900;
    letter-spacing:.16em;
}
.publish-hero h1{
    margin:8px 0 7px;
    color:#fff;
    font-size:31px;
    letter-spacing:-.03em;
}
.publish-hero p{
    max-width:700px;
    margin:0;
    color:rgba(255,255,255,.73);
    font-size:13px;
    line-height:1.7;
}
.sponsored-entry{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    min-width:170px;
    padding:12px 16px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:12px;
    background:rgba(5,35,29,.35);
    color:#fff;
    font-size:13px;
    font-weight:800;
    text-decoration:none;
    backdrop-filter:blur(8px);
    transition:background .18s ease,transform .18s ease;
    cursor:pointer;
}
.sponsored-entry:hover{
    background:rgba(5,35,29,.55);
    transform:translateY(-1px);
}

.publish-layout{
    display:grid;
    grid-template-columns:minmax(0,1fr) 350px;
    align-items:start;
    gap:20px;
    margin-top:22px;
}
.publish-form{
    display:grid;
    gap:16px;
}
.form-card{
    border:1px solid #dfe8e4;
    border-radius:19px;
    background:#fff;
    box-shadow:0 8px 25px rgba(25,54,45,.065);
    padding:24px;
}
.card-heading{
    display:flex;
    align-items:flex-start;
    gap:13px;
    margin-bottom:19px;
}
.card-heading > b{
    display:grid;
    place-items:center;
    flex:0 0 34px;
    height:34px;
    border-radius:10px;
    background:#e7f9f3;
    color:#008563;
    font-size:12px;
}
.card-heading span{
    color:#00a078;
    font-size:9px;
    font-weight:900;
    letter-spacing:.17em;
}
.card-heading h2{
    margin:3px 0 2px;
    font-size:19px;
}
.card-heading p{
    margin:0;
    color:#81908a;
    font-size:12px;
}
.tier-heading{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
}

.type-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:10px;
}
.choice{
    --task-tone:#65736e;
    --task-tone-border:#dfe7e4;
    --task-tone-soft:#f7f9f8;
    display:flex;
    align-items:flex-start;
    flex-direction:column;
    min-height:112px;
    padding:16px;
    border:1px solid var(--task-tone-border);
    border-radius:14px;
    background:#fff;
    color:var(--task-tone);
    text-align:left;
    cursor:pointer;
    transition:0.2s;
}
.choice.tone-comment{
    --task-tone:#2563eb;
    --task-tone-border:#bfdbfe;
    --task-tone-soft:#eff6ff;
}
.choice.tone-retweet{
    --task-tone:#a85b00;
    --task-tone-border:#f4ce88;
    --task-tone-soft:#fff8e8;
}
.choice.tone-quote{
    --task-tone:#7c3aed;
    --task-tone-border:#d8c7ff;
    --task-tone-soft:#f6f1ff;
}
.choice.active{
    border-color:var(--task-tone);
    background:var(--task-tone-soft);
    color:var(--task-tone);
    box-shadow:0 0 0 1px var(--task-tone);
}
.choice strong{
    margin:10px 0 4px;
    color:var(--task-tone);
    font-size:14px;
}
.choice small{
    font-size:11px;
    line-height:1.4;
}

.target-grid{
    display:grid;
    grid-template-columns:minmax(0,2fr) minmax(240px,1fr);
    align-items:end;
    gap:13px;
}
.field{
    display:flex;
    min-width:0;
    flex-direction:column;
}
.field.full{
    grid-column:1/-1;
}
.field label{
    display:flex;
    min-height:18px;
    align-items:baseline;
    gap:4px;
    font-size:12px;
    font-weight:750;
    line-height:1.4;
}
.field label em{
    color:#94a09c;
    font-size:10px;
    font-style:normal;
    font-weight:400;
}
.field input{
    box-sizing:border-box;
    width:100%;
    min-width:0;
    height:48px;
    margin-top:7px;
    padding:0 14px;
    border:1px solid #dce6e2;
    border-radius:11px;
    background:#fbfdfc;
    font-size:14px;
}

.pace-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:11px;
}
.pace{
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px;
    border:1px solid #dfe7e4;
    border-radius:14px;
    background:#fff;
    color:#71807a;
    text-align:left;
    cursor:pointer;
    transition:0.2s;
}
.pace.active{
    border-color:#24c899;
    background:#effbf7;
    color:#00966f;
    box-shadow:0 0 0 1px #24c899;
}
.pace strong{
    color:#17211e;
    font-size:13px;
}
.pace small{
    font-size:11px;
}

.tier-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:14px;
}
.tier-box{
    min-width:0;
    padding:15px 16px;
    border:1px solid #e1e9e6;
    border-radius:14px;
    background:#fafcfb;
}
.tier-box > div{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:6px;
}
.pill{
    padding:3px 9px;
    border-radius:20px;
    font-size:12px;
    font-weight:bold;
}
.pill-tier-S{background:#fff2d8;color:#b46e00;}
.pill-tier-A{background:#e0ecff;color:#2553b8;}
.pill-tier-B{background:#e4fff4;color:#029466;}
.pill-tier-C{background:#fff2e8;color:#c2622b;}
.pill-tier-D{background:#f1f1f1;color:#444;}
.pill-tier-E{background:#f3f3f3;color:#555;}

.tier-box small{
    color:#778681;
    font-size:10px;
}
.tier-box label{
    display:block;
    margin-top:13px;
    color:#84918d;
    font-size:10px;
}
.tier-box input{
    height:38px;
    margin-top:5px;
    text-align:center;
    font-weight:800;
    border:1px solid #dde5e1;
    border-radius:8px;
}
.tier-box > strong{
    display:block;
    margin-top:9px;
    color:#008d69;
    font-size:11px;
}

/* 右侧预算卡片 */
.budget-card{
    position:sticky;
    top:88px;
    padding:23px;
    border:1px solid #dfe8e4;
    border-radius:19px;
    background:#fff;
    box-shadow:0 8px 25px rgba(25,54,45,.065);
}
.budget-title{
    display:flex;
    align-items:center;
    gap:10px;
    color:#009b74;
}
.budget-title span{
    color:#00a078;
    font-size:9px;
    font-weight:900;
    letter-spacing:.17em;
}
.balance-row{
    margin-top:20px;
    padding:13px;
    border-radius:12px;
    background:#f2f8f5;
}
.balance-row span{
    color:#74827d;
    font-size:11px;
}
.balance-row strong{
    color:#008d69;
    font-size:15px;
}
.budget-lines{
    display:grid;
    gap:12px;
    margin:19px 0;
    padding-bottom:18px;
    border-bottom:1px solid #e5ece9;
}
.budget-lines span{
    color:#74827d;
    font-size:11px;
}
.total{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}
.total strong{
    font-size:24px;
}
.minimum-warning{
    padding:10px 11px;
    border:1px solid #fecaca;
    border-radius:9px;
    background:#fff1f1;
    color:#dc2626;
    font-weight:750;
    margin:18px 0;
    display:flex;
    align-items:flex-start;
    gap:7px;
    font-size:11px;
    line-height:1.6;
}
.publish-button{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    width:100%;
    padding:13px;
    border:0;
    border-radius:11px;
    background:linear-gradient(90deg,#008e6a,#13b98a);
    color:#fff;
    font-size:13px;
    font-weight:850;
    cursor:pointer;
}
.publish-button:disabled{
    cursor:not-allowed;
    opacity:.42;
}

/* 移动端适配 */
@media(max-width:980px){
    .publish-layout{
        grid-template-columns:1fr;
    }
    .budget-card{
        position:static;
        grid-row:1;
    }
    .tier-grid{
        grid-template-columns:repeat(2,1fr);
    }
}
@media(max-width:640px){
    .publish-page{
        padding:22px 14px 60px;
    }
    .publish-hero{
        flex-direction:column;
        align-items:flex-start;
        padding:24px 20px;
    }
    .publish-hero h1{
        font-size:26px;
    }
    .type-grid,.pace-grid,.target-grid,.tier-grid{
        grid-template-columns:1fr;
    }
    .field.full{
        grid-column:auto;
    }
    .form-card{
        padding:19px;
    }
}

/* ===================== Publish页面Tab切换样式 ===================== */
.tab-switch{
    display:flex;
    gap:10px;
    margin-bottom:24px;
}
.tab-switch button{
    padding:10px 24px;
    border:1px solid #ddd;
    background:#fff;
    border-radius:99px;
    cursor:pointer;
    font-size:15px;
}
.tab-switch button.active{
    background:#00966b;
    color:#fff;
    border-color:#00966b;
}

/* 默认两个面板都加载，JS控制显隐 */
.panel-custom,
.panel-interact{
    width:100%;
}

/* ===================== 第3种方案：嵌套提示框样式 ===================== */

/* 1. 问号图标基础 */
.info-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    margin-left: 6px;
    border-radius: 50%;
    background-color: #e2e8f0;
    color: #64748b;
    font-size: 11px;
    font-weight: bold;
    font-family: Arial, sans-serif;
    cursor: pointer;
    transition: all 0.2s ease;
    vertical-align: middle;
    user-select: none;
}

/* Hover 高亮 */
.info-icon:hover {
    background-color: #179e64;
    color: #ffffff;
}

/* 2. 气泡弹窗容器 (.tip-popup) */
.info-icon .tip-popup {
    position: absolute;
    bottom: 125%; /* 悬浮于图标上方 */
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 240px;
    padding: 8px 12px;
    border-radius: 6px;
    background-color: #1e293b;
    color: #f8fafc;
    font-size: 12px;
    font-weight: normal;
    line-height: 1.5;
    text-align: left;
    white-space: normal;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

    /* 默认隐藏状态 */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
    z-index: 100;
}

/* 3. 气泡下方指向小三角 */
.info-icon .tip-popup::before {
    content: '';
    position: absolute;
    top: 100%; /* 在气泡底部外侧 */
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px 5px 0 5px;
    border-style: solid;
    border-color: #1e293b transparent transparent transparent;
}

/* 4. Hover 时展示气泡 */
.info-icon:hover .tip-popup {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* =========================
   配置等级名称 - C/D/E 颜色扩展
========================= */

/* C 档位（流萤）：优雅的紫蓝调 */
.tier-name.C strong {
    color: #7e57c2 !important;
}

/* D 档位（烁点）：沉稳的琥珀黄/棕调 */
.tier-name.D strong {
    color: #ffa726 !important;
}

/* E 档位（星尘）：低调质感的石墨灰/银色调 */
.tier-name.E strong {
    color: #78909c !important;
}
/* =========================
    【发布任务页面样式结束】
========================= */

/* ============== 积分排行榜 - begin ============== */
/* 限制排行榜页面的最大宽度并居中 */
.leaderboard-page {
    max-width: 1200px; /* 可以根据喜好调节：1000px - 1140px 效果都不错 */
    margin: 0 auto;    /* 左右自动外边距，实现水平居中 */
    padding: 0 20px;   /* 防止屏幕缩小后贴边 */
}
.invite-leaderboard-hero {
    padding: 32px 34px;
    border-radius: 23px;
    background-color:#0e7d58;
    color: #ffffff;
    box-shadow: 0 16px 42px rgba(19,92,68,.14);
    margin-bottom:30px;
}
.invite-hero-top-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap:24px;
}
.invite-hero-left > span {
    display: block;
    color:#9cf0d6;
    font-size:10px;
    font-weight: 900;
    letter-spacing: 0.16em;
}
.invite-hero-top-row h1 {
    font-size:32px;
    margin:8px 0 0;
}
.invite-leaderboard-hero p {
    max-width:720px;
    margin:12px 0 0;
    color:rgba(255,255,255,.72);
    font-size:15px;
    line-height:1.7;
}

/* 右上角邀请好友按钮 */
.leaderboard-invite {
    border: 1px solid rgba(255,255,255,0.45);
    border-radius:12px;
    padding:12px 24px;
    color:#fff;
    display:flex;
    gap:8px;
    align-items:center;
    white-space: nowrap;
    text-decoration: none;
    transition: 0.18s ease;
}
.leaderboard-invite:hover {
    background:rgba(255,255,255,0.12);
}

/* section-heading 复用你已有排行榜标题布局 */
.section-heading {
    display:flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom:18px;
}
.section-heading > div > span {
    display:block;
    font-size:10px;
    letter-spacing:0.16em;
    color:#079b75;
    font-weight:850;
}
.section-heading h2 {
    font-size:22px;
    margin:4px 0 0;
    color:#17211e;
}
.tip-right {
    font-size:11px;
    color:#788680;
    margin:0;
}

/* 前三名卡片容器 */
.invite-top3-section {
    margin-bottom:36px;
}
.invite-top3-row {
    display:grid;
    grid-template-columns: repeat(3, 1fr);
    gap:20px;
}

.invite-card {
    background:#ffffff;
    border:1px solid #dfe8e4;
    border-radius:20px;
    padding:24px 18px;
    /* 修复：flex纵向 + 全部内容居中，删除原来 text-align:center */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow:0 8px 24px rgba(25,54,45,.06);
}

/* 第一名特殊浅黄色+金色边框，匹配截图，取消scale放大 */
/* 1. 缩减卡片整体尺寸与内边距 */
.invite-card {
    background: #ffffff;
    border: 1px solid #dfe8e4;
    border-radius: 16px; /* 从 20px 调小 */
    padding: 14px 12px;  /* 从 24px 18px 调小，大幅压缩上下高度 */
    display: flex;
    flex-direction: column;
    align-items: center;
    box-shadow: 0 4px 16px rgba(25,54,45,.05);
}

/* 2. 缩减卡片内各元素的尺寸和间距 */
.invite-card .rank-mark {
    font-size: 13px;       /* 原 15px */
    font-weight: 800;
    margin-bottom: 6px;    /* 原 12px */
}

.invite-card .x-avatar {
    width: 48px !important;  /* 原 64px */
    height: 48px !important;
    border-radius: 50%;
    object-fit: cover;
}

.invite-card .handle {
    margin: 6px 0 4px;     /* 原 10px 0 8px */
    font-weight: 700;
    color: #17211e;
    font-size: 13px;       /* 原 14px */
}

.invite-card .kx-num {
    font-size: 18px;       /* 原 24px，缩小积分数字 */
    font-weight: 850;
    margin: 8px 0 2px;     /* 原 14px 0 4px */
    color: #17211e;
}

.invite-card .desc {
    font-size: 10px;       /* 原 11px */
    color: #788680;
}
.pill-tier-A {
    background:#079b75;
    color:#fff;
}
.pill-tier-B {
    background:#4897bb;
    color:#fff;
}
.pill-tier-C {
    background:#c99427;
    color:#fff;
}
.pill-tier-S{
    background:#9c27b0;
    color:#fff;
}
.pill-tier-D{
    background:#607d8b;
    color:#fff;
}
.pill-tier-E{
    background:#9e9e9e;
    color:#fff;
}

.invite-card .kx-num {
    font-size:24px;
    font-weight:850;
    margin:14px 0 4px;
    color:#17211e;
}
.invite-card .desc {
    font-size:11px;
    color:#788680;
}

/* 完整榜单表格区块间距 */
.invite-full-table-section {
    margin-bottom:20px;
}

/* 移动端覆盖，和你现有媒体查询对齐 */
@media(max-width:900px){
    .invite-top3-row {
        grid-template-columns: repeat(3,1fr);
        gap:12px;
    }
}
@media(max-width:620px){
    .invite-hero-top-row {
        flex-direction: column;
    }
    .invite-top3-row {
        grid-template-columns:1fr;
    }
    .section-heading {
        flex-direction:column;
        align-items:flex-start;
        gap:6px;
    }
}

/* 表格内头像强制小尺寸，不允许被卡片样式覆盖 */
.table-user .x-avatar {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
    flex-shrink: 0;
    border-radius: 50%;
    object-fit: cover;
}

/* ============== 积分排行榜 end ============== */




/* =========================
 账户CSS开始
========================= */
/* 全局变量 */
:root {
    --border: #e2eae6;
    --text: #18212b;
    --muted: #7d8b86;
    --muted-2: #91a0ad;
    --surface: #ffffff;
    --surface-2: #f8fbf9;
    --emerald: #008d69;
    --emerald-soft: #e9faf4;
    --amber: #bd7411;
    --blue: #2563eb;
    --blue-soft: #eff6ff;
}

.me-page {
    max-width: 1240px;
    margin: 0 auto;
    padding: 22px 24px 60px;
}

/* 用户头部横幅 */
.profile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 24px;
    border-radius: 18px;
    background: radial-gradient(circle at 76% 10%, rgba(100,255,198,.27), transparent 28%), linear-gradient(125deg,#10251f,#0b7e61 66%,#14bd8f);
    color: #fff;
    box-shadow: 0 15px 40px rgba(20,91,68,.14);
}
.profile-user {
    display: flex;
    align-items: center;
    gap:15px;
    min-width: 0;
}
.profile-user h1 {
    margin:5px 0 4px;
    font-size:24px;
}
.profile-user p {
    margin:0;
    color:rgba(255,255,255,.7);
    font-size:12px;
}
.profile-user span {
    display:flex;
    align-items:center;
    gap:6px;
    color:#9cf0d6;
    font-size:9px;
    font-weight:900;
    letter-spacing:.16em;
}
.profile-actions {
    display:flex;
    align-items:center;
    gap:9px;
}
.published-tasks-link,.referral-center-link {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    min-width:132px;
    padding:11px 14px;
    border:1px solid rgba(255,255,255,.2);
    border-radius:11px;
    background:rgba(5,37,30,.3);
    color:#fff;
    font-size:12px;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
    backdrop-filter:blur(8px);
    transition:background .18s ease,transform .18s ease;
}
.referral-center-link {
    background:rgba(255,255,255,.14);
}
.published-tasks-link:hover,.referral-center-link:hover {
    background:rgba(5,37,30,.52);
    transform:translatey(-1px);
}

/* 数据卡片区域 */
.stats-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    margin:12px 0;
}
.stat-card {
    position:relative;
    padding:15px 18px;
    border:1px solid var(--border);
    border-radius:15px;
    background:#fff;
    box-shadow:0 7px 22px rgba(25,54,45,.06);
}
.stat-icon {
    position:absolute;
    right:17px;
    top:14px;
    display:grid;
    place-items:center;
    width:32px;
    height:32px;
    border-radius:11px;
    background:var(--emerald-soft);
    color:var(--emerald);
}
.stat-card label {
    color:var(--muted);
    font-size:11px;
}
.stat-card .big {
    margin:3px 0 1px;
    font-size:25px;
    font-weight:850;
}
.stat-card .sub {
    color:var(--muted);
    font-size:11px;
}
.balance-details-link,.xp-details-link {
    position:absolute;
    right:20px;
    bottom:10px;
    display:grid;
    grid-template-columns:30px minmax(125px,1fr)18px;
    align-items:center;
    gap:9px;
    min-width:230px;
    padding:8px 12px;
    border:1px solid #cfe8de;
    border-radius:12px;
    background:linear-gradient(110deg,#f7fcfa,#edf9f4);
    color:#087b5e;
    text-decoration:none;
    transition:.2s;
}
.balance-details-link:hover,.xp-details-link:hover {
    border-color:#8bcab4;
    box-shadow:0 7px 17px rgba(8,123,94,.1);
}
.balance-details-link i,.xp-details-link i {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:#dff5ec;
    font-style:normal;
}
.balance-details-link span,.xp-details-link span {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
}
.balance-details-link b,.xp-details-link b {
    font-size:12px;
    line-height:1.2;
}
.balance-details-link small,.xp-details-link small {
    color:#73978a;
    font-size:9px;
    line-height:1.2;
}
.balance-details-link,.xp-details-link {
    cursor: pointer; /* 新增：悬浮鼠标变成手指 */
}
.balance-details-link:hover,.xp-details-link:hover {
    border-color:#8bcab4;
    box-shadow:0 7px 17px rgba(8,123,94,.1);
}
.balance-details-link i,.xp-details-link i {
    display:grid;
    place-items:center;
    width:30px;
    height:30px;
    border-radius:9px;
    background:#dff5ec;
    font-style:normal;
}
.balance-details-link span,.xp-details-link span {
    display:flex;
    min-width:0;
    flex-direction:column;
    gap:3px;
}
.balance-details-link b,.xp-details-link b {
    font-size:12px;
    line-height:1.2;
}
.balance-details-link small,.xp-details-link small {
    color:#73978a;
    font-size:9px;
    line-height:1.2;
}

.pill-tier-C {
    padding:2px 7px;
    background:#f0faf6;
    color:#008d69;
    border-radius:6px;
    font-weight:700;
}

/* 左右布局容器 */
.account-layout {
    display:grid;
    grid-template-columns:minmax(0,1fr)285px;
    align-items:start;
    gap:14px;
}
.wallet-panel {
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 27px rgba(25,54,45,.07);
    overflow:hidden;
}
.wallet-panel-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:15px 19px;
    border-bottom:1px solid #e4ebe8;
}
.wallet-panel-head h2 {
    margin:4px 0 0;
    font-size:17px;
}
.wallet-panel-head p {
    display:flex;
    align-items:center;
    gap:6px;
    margin:0;
    color:#798680;
    font-size:10px;
}
.wallet-content {
    padding:18px;
}

/* 充值提现Tab */
.swap-tabs {
    display:flex;
    border-bottom:1px solid var(--border);
}
.swap-tabs button {
    flex:1;
    padding:11px 0;
    background:transparent;
    border:none;
    border-bottom:2px solid transparent;
    font-size:15px;
    font-weight:600;
    color:var(--muted);
    cursor:pointer;
    transition:color .2s,border-color .2s;
}
.swap-tabs button.active {
    color:var(--text);
    border-bottom-color:var(--emerald);
}
.swap-info {
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px 14px;
    border-radius:12px;
    background:var(--blue-soft);
    border:1px solid rgba(37,99,235,.2);
    color:var(--text);
    font-size:13px;
    margin-bottom:13px;
}
.swap-row {
    display:flex;
    justify-content:space-between;
    align-items:center;
    min-height:67px;
    margin-bottom:8px;
}
.swap-label {
    font-size:13px;
    color:var(--muted);
}
.swap-token {
    display:flex;
    align-items:center;
    gap:10px;
}
.swap-input {
    font-family:"Geist",sans-serif;
    font-size:27px;
    font-weight:700;
    color:var(--text);
    background:transparent;
    border:none;
    width:180px;
    text-align:right;
    padding:0;
    outline:none;
}
.swap-input.readonly {
    font-size:27px;
    font-weight:700;
    color:var(--text);
    text-align:right;
    width:180px;
    line-height:1.2;
}
.swap-input::placeholder {
    color:var(--muted-2);
}
.swap-badge {
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:5px 10px;
    border-radius:99px;
    background:var(--surface-2);
    border:1px solid var(--border);
    font-size:12px;
    font-weight:600;
    color:var(--muted);
    white-space:nowrap;
}
.swap-arrow {
    text-align:center;
    font-size:20px;
    color:var(--muted-2);
    margin:4px 0 12px;
}
.swap-pct {
    display:flex;
    gap:8px;
    margin:10px 0 13px;
}
.swap-pct button {
    flex:1;
    padding:8px 0;
    border-radius:10px;
    border:1px solid var(--border);
    background:var(--surface);
    color:var(--text);
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    transition:border-color .2s,background .2s;
}
.swap-pct button:hover:not(:disabled) {
    border-color:var(--emerald);
    background:var(--emerald-soft);
}
.swap-pct button:disabled {
    opacity:.5;
    cursor:not-allowed;
}
.btn {
    width:100%;
    min-height:44px;
    border-radius:10px;
    border:none;
    background:var(--emerald);
    color:#fff;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
}
.wallet-warn {
    color:#c83c33;
    font-size:13px;
    margin:0;
}
.deposit-network-note {
    margin:-7px 0 12px;
    color:var(--muted);
    font-size:12px;
}
.field input {
    width:100%;
    box-sizing:border-box;
    padding:10px 12px;
    border-radius:10px;
    border:1px solid var(--border);
    margin-top:6px;
    font-size:14px;
}

/* 右侧侧边栏 */
.activity-sidebar {
    position:sticky;
    top:94px;
    padding:15px;
    border:1px solid var(--border);
    border-radius:17px;
    background:#fff;
    box-shadow:0 9px 27px rgba(25,54,45,.07);
}
.activity-head {
    padding:1px 2px 10px;
    border-bottom:1px solid #e5ece9;
}
.activity-head span {
    color:#009a72;
    font-size:9px;
    font-weight:900;
    letter-spacing:.15em;
}
.activity-head h2 {
    margin:4px 0 2px;
    font-size:17px;
}
.activity-head p {
    margin:0;
    color:#82908b;
    font-size:10px;
}
.record-toggle {
    width:100%;
    min-height:48px;
    margin-top:10px;
    padding:10px 11px;
    border:1px solid #e1e9e6;
    border-radius:11px;
    background:#f8fbf9;
    text-align:left;
    cursor:pointer;
    font-size:14px;
}
.record-toggle:hover {
    border-color:#a9dccc;
    background:#f0faf6;
}
.record-panel {
    margin-top:8px;
    max-height:0;
    overflow:hidden;
    transition:max-height 0.3s ease;
}
.record-panel.open {
    max-height:320px;
}

/* 响应式适配 */
@media(max-width:900px){
    .account-layout {
        grid-template-columns:1fr;
    }
    .activity-sidebar {
        position:static;
        order:2;
    }
}
@media(max-width:720px){
    .me-page {
        padding:22px 14px 60px;
    }
    .profile-head {
        flex-direction:column;
        align-items:flex-start;
    }
    .stats-grid {
        grid-template-columns:1fr;
    }
}
/* =========================
 账户CSS结束
========================= */

/* ===========================
   注册提示框 开始
=========================== */
.custom-message-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 99999;
}

.message-content {
    min-width: 320px;
    padding: 25px 35px;
    background: white;
    border: 3px solid #00c853;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,.25);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: messageShow .3s ease;
}

.message-content.error {
    border-color: #00c853;
}

.message-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #00c853;
    color: white;
    font-size: 28px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-text {
    font-size: 18px;
    color: #333;
    font-weight: 600;
}

.custom-message-box.hide {
    opacity: 0;
    transition: .3s;
}

@keyframes messageShow {
    from {
        transform: translateY(-20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}
/* =========================
 注册提示框 结束
========================= */
/* =========================
 账户 开始
========================= */
.big{
    font-size:36px;
    font-weight:bold;
    color:#111;
}
.sub{
    font-size:14px;
    color:#666;
    margin-top:6px;
}

/* 数值文字绿色
用于用户名、邮箱、用户等级、账户状态、链类型、钱包地址这类展示字段；
font-weight:500 设置中等加粗，提升文字辨识度 */
.text-green{
    color:#009955;
    font-weight:700;
    font-size: 18px;
}
/* 和充值按钮一模一样：纯绿色、大圆角、白色文字
页面所有修改、进入提现、发起提现按钮统一使用该类名
border-radius:999px 实现椭圆超大圆角效果 */
.btn-green{
    background-color:#00a86b;
    color:#ffffff;
    border:none;
    border-radius:999px;
    padding:8px 22px;
    font-size:15px;
    cursor: pointer;
}
/* 按钮悬浮样式：鼠标悬浮时加深绿色底色，提供交互反馈 */
.btn-green:hover{
    background-color:#008c59;
}
/* 设置行样式，分割线、内边距，优化卡片观感
弹性布局，左右两边内容两端对齐，垂直居中；
上下左右设置内边距，底部添加浅灰分割线用来区分每一条配置项 */
.setting-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 12px;
    border-bottom:1px solid #eeeeee;
}
/* 最后一行取消底边
最下方【进入提现】按钮那一行不需要底部分割线，去除边框 */
.setting-row.last-row{
    border-bottom: none;
}
/* 设置面板内层容器样式
白色背景、浅灰色外边框、圆角，做成独立卡片；
padding为卡片内部所有内容预留边距 */
.wallet-content{
    background:#ffffff;
    border:1px solid #e8e8e8;
    border-radius:14px;
    padding:12px;
}
/* tab选项卡外层容器（设置、提现按钮父容器）
弹性布局，让两个标签按钮并排横向摆放 */
.swap-tabs{
    display:flex;
}
/* tab标签基础样式
平分50%宽度、按钮内边距、去除原生边框、白色背景、文字字号 */
.swap-tabs button{
    width:50%;
    padding:14px;
    border:none;
    background:#fff;
    font-size:16px;
}
/* 选中激活状态的tab样式
底部3px绿色下划线标记当前选中页签；字体加粗、标签文字改为主题绿色 */
.swap-tabs button.active{
    border-bottom:3px solid #00a86b;
    font-weight:bold;
    color:#00a86b;
}
/*弹窗遮罩层*/
.modal{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.45);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:999;
}
/*弹窗盒子*/
.modal-box{
    width: 420px;
    background: #ffffff;
    border-radius:14px;
    padding:24px;
}
.modal-box h3{
    text-align:center;
    margin-top:0;
    margin-bottom:20px;
}
.modal-box input{
    width: 100%;
    box-sizing: border-box;
    padding:14px;
    margin-bottom:12px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
}
.modal-btn-wrap{
    display:flex;
    gap:12px;
    margin-top:16px;
}
.cancel-btn{
    flex:1;
    padding:9px;
    border: 1px solid #bbbbbb;
    border-radius:999px;
    background:#fff;
    font-size:15px;
    cursor: pointer;
}
.modal-btn-wrap .btn-green{
    flex:1;
}
/* =========================
 账户 结束
========================= */

/* =========================
 发布任务 开始
========================= */
.publish-page .type-grid {
    display: grid;
    gap:14px;
}
.publish-page .type-item {
    padding:18px 16px;
    border-radius:16px;
    border:1px solid #e2e2e2;
    background:#ffffff;
    cursor:pointer;
    transition: all 0.22s ease;
}
.publish-page .type-item:hover{
    background-color:#f8f8f8;
}

/* ----各个类型主题色---- */
.publish-page .type-like .type-title { color:#f28c22; }
.publish-page .type-like.active {
    border-color:#f28c22;
    background-color:#fff8ef;
}

.publish-page .type-comment .type-title { color:#3483eb; }
.publish-page .type-comment.active {
    border-color:#3483eb;
    background-color:#f0f7ff;
}

.publish-page .type-retweet .type-title { color:#00a86b; }
.publish-page .type-retweet.active {
    border-color:#00a86b;
    background-color:#ecfbf4;
}

.publish-page .type-quote .type-title { color:#9254de; }
.publish-page .type-quote.active {
    border-color:#9254de;
    background-color:#f7f0ff;
}

.publish-page .type-like-comment .type-title { color:#e64998; }
.publish-page .type-like-comment.active {
    border-color:#e64998;
    background-color:#fff0f7;
}

.publish-page .type-icon {
    font-size:24px;
    margin-bottom:8px;
}
.publish-page .type-title {
    font-size:16px;
    font-weight:bold;
    margin-bottom:4px;
}
.publish-page .type-desc {
    font-size:13px;
    color:#888888;
}
.publish-page .tier-price{
    font-weight: 700;
    font-family: "Microsoft YaHei",sans-serif;
    font-size: 12px;
    line-height: 1;
}

.publish-page .warn-pin{background-color:#fff8dc;}

/* 问号提示图标 */
/* 问号提示图标容器 */
.tip-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    /* 将 help 改为 pointer（小手）或 default（普通箭头） */
    cursor: pointer;
}

/* 仅对 ? 问号本体生效 */
.tip-icon > i {
    font-style: normal;
    color: #109964;
    font-size: 18px;
    font-weight: bold;
    line-height: 1;
}

/* 悬浮提示框 */
.tip-popup {
    display: none;
    position: absolute;
    left: 26px;
    top: -5px;
    background: #1e293b; /* 深蓝灰色背景 */
    color: #ffffff; /* 纯白文字 */
    padding: 8px 14px;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    white-space: nowrap;
    z-index: 9999;
    font-size: 13px; /* 提示语建议保持 13px-14px 精致小字 */
    font-weight: normal;
}

.tip-icon:hover .tip-popup {
    display: block;
}



/* =========================
 发布任务 结束
========================= */

/* ========== 邀请好友页面样式 invite-page ========== */
.invite-page{
    max-width: 1200px;
    margin: 0 auto;
    padding:24px 20px;
}
.invite-page .back-btn{
    background:#ffffff;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size:16px;
    margin-bottom:24px;
}
.invite-page .invite-banner{
    background-color:#109964;
    border-radius:20px;
    padding:32px;
    color:white;
    display:flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom: 20px;
}
.invite-page .banner-subtitle{
    font-size:15px;
    opacity: 0.9;
    margin-bottom: 8px;
}
.invite-page .invite-banner h1{
    margin: 0 0 12px;
    font-size: 34px;
}
.invite-page .invite-banner p{
    opacity: 0.92;
    line-height: 1.7;
    max-width: 750px;
}
.invite-page .banner-btn{
    background:rgba(255,255,255,0.22);
    border:none;
    color:white;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 15px;
    cursor:pointer;
}
.invite-page .form-card{
    background:#fff;
    border-radius: 18px;
    padding:26px;
    margin-bottom: 20px;
    display:flex;
    align-items:center;
    justify-content: space-between;
    gap: 20px;
}
.invite-page .card-small-title{
    color:#109964;
    font-weight: 600;
    font-size: 15px;
    margin-bottom: 6px;
}
.invite-page .form-card h3{
    margin: 0 0 8px;
    font-size: 20px;
}
.invite-page .form-card p{
    color:#666;
    margin: 0;
}
.invite-page .link-row{
    display:flex;
    gap:12px;
    flex: 1;
}
.invite-page .link-row input{
    flex: 1;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #e8efeb;
    background-color:#f2f9f5;
    font-size: 16px;
}
.invite-page .copy-btn{
    background:#109964;
    color:white;
    border:none;
    border-radius: 10px;
    padding: 0 26px;
    cursor: pointer;
    font-weight:bold;
}
.invite-page .bind-row{
    display:flex;
    gap: 12px;
    flex: 1;
}
.invite-page .bind-row input{
    flex: 1;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid #ddd;
    font-size: 16px;
}
.invite-page .bind-submit-btn{
    background-color:#109964;
    color:#fff;
    border:none;
    padding:14px 28px;
    border-radius:12px;
    font-size:16px;
    cursor:pointer;
    transition: all 0.2s;
}
/* 禁用状态样式 */
.invite-page .bind-submit-btn:disabled{
    background-color:#80bda0;
    cursor:not-allowed;
    /*不要再写opacity:0.5; 就不会灰蒙蒙！*/
}
.invite-page .stat-grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-bottom: 20px;
}
.invite-page .stat-item{
    background:#ffffff;
    border-radius: 18px;
    padding:24px;
}
.invite-page .stat-label{
    color:#666;
    font-size: 15px;
}
.invite-page .stat-num{
    font-size: 40px;
    color:#109964;
    font-weight:bold;
    margin: 8px 0;
}
.invite-page .stat-desc{
    color:#777;
    font-size: 14px;
}
.invite-page .invite-detail-card{
    background:#fff;
    border-radius:18px;
    padding: 26px;
}
.invite-page .detail-header{
    display:flex;
    justify-content: space-between;
    align-items:center;
    margin-bottom:20px;
}
.invite-page .en-title{
    color:#109964;
    font-weight: 600;
    font-size: 15px;
}
.invite-page .empty-tip{
    text-align:center;
    padding:40px 20px;
    color:#777;
}
.invite-page .toggle-detail-btn{
    border: 1px solid #ddd;
    background:white;
    padding: 8px 14px;
    border-radius: 10px;
    cursor:pointer;
}
/* ========== 邀请好友页面样式 invite-page end========== */


/* ========== 我发布的任务页面 开始========== */
.published-task-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px 20px;
}

.published-task-page .back-btn {
    background: #ffffff;
    border: 1px solid #ddd;
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    margin-bottom: 24px;
}

/* 顶部绿色横幅 */
.published-task-page .page-banner {
    z-index: 99;
    background: linear-gradient(90deg,#0f4b30,#109964);
    border-radius: 20px;
    padding: 32px;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    gap: 20px;
    flex-wrap: wrap;
}

.published-task-page .banner-left span {
    font-size: 14px;
    opacity: 0.9;
}
.published-task-page .banner-left h1 {
    font-size: 32px;
    margin: 8px 0 6px;
}
.published-task-page .banner-left p {
    opacity: 0.85;
}

.published-task-page .banner-right {
    display: flex;
    gap: 14px;
    align-items: center;
}

.published-task-page .publish-btn {
    background: #ffffff;
    color: #0f4b30;
    border: none;
    border-radius: 12px;
    padding: 14px 26px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
}

.published-task-page .empty-box {
    background: #ffffff;
    border: 1px dashed #e6e6e6;
    border-radius: 16px;
    text-align: center;
    padding: 60px 20px;
    color: #888;
    font-size: 17px;
}

.page-bottom-gap {
    height: 80px;
}

/*分页*/
.published-task-page .page-btn-group {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
}
.published-task-page .page-btn {
    border: 1px solid #109964;
    background: #ffffff;
    color: #109964;
    padding: 8px 20px;
    border-radius: 10px;
    cursor: pointer;
}
.published-task-page .page-btn:hover {
    background: #109964;
    color: white;
}
.published-task-page .page-text {
    font-size: 16px;
    color: #444;
}

/* ========= 外层滚动容器 ========= */
.published-task-page .table-wrap {
    overflow-x: auto;
}

/* 每一格表头，固定精确宽度，上下表格完全对齐 */
.fixed-table-header .header-cell{
    padding:14px 12px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}

/* ========== 下方数据表格 ========== */
#taskTable {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: #ffffff;
}
/* =========重点修改top数值！！============ */
#taskTable thead th {
    position: sticky;
    /* 改成足够大的值！和你顶部绿色横幅高度匹配 */
    top: 0;
    z-index: 99;
    background-color: #f3f7f5;
    padding: 14px 12px;
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap;
}
/* ========== 【最终完整版表格美化】放在CSS文件最后！ ========== */
#taskTable thead th {
    background-color: #0f5938 !important;
    color: #ffffff !important;
    font-weight: 600;
}

/*斑马隔行变色*/
#taskTable tbody tr:nth-child(even) {
    background-color: #f8fbf9 !important;
}
#taskTable tbody tr:hover {
    background-color: #e8f4ef !important;
}


/* ========== 我发布的任务页面 结束========== */

/* ======== 贡献奖励榜  ======== */
.invite-leaderboard-hero{
    background-color:#0e7d58;
    border-radius:20px;
    padding:32px;
    color:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:30px;
}
.hero-reward-side{
    background:rgba(255,255,255,0.12);
    padding:20px 26px;
    border-radius:16px;
    text-align:center;
}
/* ========邀请榜前三名卡片行======= */
.invite-top3-section{
    margin-bottom:40px;
}
.tip-right{
    text-align:right;
    font-size:13px;
    color:#666;
}
.invite-top3-row{
    display:grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap:20px;
    margin-top:20px;
}
.invite-card{
    background:#ffffff;
    border-radius:16px;
    padding:28px 16px;
    text-align:center;
    border:1px solid #eee;
}
.invite-card.rank1{
    border: 1px solid #f2c044;
    background-color:#fffdf2;
}
.invite-card .x-avatar{
    width:56px;
    height:56px;
    border-radius:50%;
    margin:12px 0;
}
.invite-card .kx-num{
    font-size:28px;
    font-weight:bold;
    color:#0e7d58;
    margin:12px 0 8px;
}
/* 完整榜单外层容器，设置最大高度，开启垂直滚动，底部预留空白 */
.ranking-full-wrap {
    max-height: 520px;
    overflow-y: auto;
    /* 底部额外留白，滚动到底部后留出空隙 */
    padding-bottom: 120px;
}
/* 滚动条美化（可选） */
.ranking-full-wrap::-webkit-scrollbar {
    width: 6px;
}
.ranking-full-wrap::-webkit-scrollbar-thumb {
    background-color: #cccccc;
    border-radius: 3px;
}

/* 前三名容器 默认：靠左流式布局（不足3人时生效） */
.invite-top3-row{
    display: flex;
    gap:24px;
    flex-wrap: wrap;
    align-items: end;
}

/* 满3人布局：第一名放中间抬高，2、3名左右两侧 */
.invite-top3-row.top3-full-layout{
    justify-content: center;
    align-items: flex-end;
    gap:16px;
}
.invite-top3-row.top3-full-layout .rank1{
    order:2;
    transform: translateY(-20px); /*第一名抬高，视觉突出*/
}
.invite-top3-row.top3-full-layout .rank2{
    order:1;
}
.invite-top3-row.top3-full-layout .rank3{
    order:3;
}

/* 卡片基础 */
.invite-card{
    width:320px;
    padding:24px 16px;
    border-radius:16px;
    background:#fff;
    box-shadow: 0 4px 14px rgba(0,0,0,0.06);
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
}
/* 第一名金色卡片 */
.invite-card.rank-gold{
    background-color: #fffbe8;
    border:2px solid #f7c846;
}

/* 冠冕放大 */
.rank-mark{
    display:flex;
    align-items:center;
    gap:4px;
    font-size:18px;
    font-weight:bold;
}
.crown-icon{
    font-size:32px; /*放大皇冠*/
    line-height:1;
}

.invite-card .x-avatar{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
}
.invite-card .handle{
    font-size:14px;
    color:#555;
}
.invite-card .kx-num{
    font-size:30px;
    font-weight:bold;
    color:#179e64;
}
.invite-card .desc{
    font-size:13px;
    color:#888;
}


/* ======== 贡献奖励榜 end ======== */

/* ==========任务广场网格布局：一行4个，最多3行========== */
.spark-square .spark-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    /* 最多展示3行，单页4*3=12个卡片 */
    grid-auto-rows: auto;
}

/* 不同任务类型差异化颜色，和发布任务页面配色保持一致 */
/* 点赞 LIKE */
.spark-square .spark-task-card.task-like {
    --card-theme:#ff7849;
}
/* 评论 COMMENT */
.spark-square .spark-task-card.task-comment {
    --card-theme:#4285f4;
}
/* 转发 RETWEET */
.spark-square .spark-task-card.task-retweet {
    --card-theme:#22b961;
}
/* 引用 QUOTE */
.spark-square .spark-task-card.task-quote {
    --card-theme:#9c27b0;
}
/* 点赞+评论 LIKE_COMMENT */
.spark-square .spark-task-card.task-like_comment {
    --card-theme:#e84393;
}

/* 定制任务 */
/* 冠名权 NAME_RIGHTS */
.spark-square .spark-task-card.task-name_rights {
    --card-theme:#ffb300;
}
/* 个性签名 BIO_SIGN */
.spark-square .spark-task-card.task-bio_sign {
    --card-theme:#7986cb;
}
/* 原创推文 ORIGIN_POST */
.spark-square .spark-task-card.task-origin_post {
    --card-theme:#00acc1;
}
/* 引用置顶 QUOTE_PIN */
.spark-square .spark-task-card.task-quote_pin {
    --card-theme:#ab47bc;
}
/* 原创置顶 ORIGIN_PIN */
.spark-square .spark-task-card.task-origin_pin {
    --card-theme:#26a69a;
}

/* 卡片内部使用主题色示例，你可以按需扩展边框、标签、标题 */
.spark-square .spark-task-card[class*="task-"] .tone-comment {
    color: var(--card-theme);
}
.spark-square .spark-task-card[class*="task-"] {
    border-top:3px solid var(--card-theme);
}

/* 适配：小屏幕自动降列 */
@media(max-width:1400px){
    .spark-square .spark-grid{
        grid-template-columns: repeat(3,1fr);
    }
}
@media(max-width:1024px){
    .spark-square .spark-grid{
        grid-template-columns: repeat(2,1fr);
    }
}
@media(max-width:640px){
    .spark-square .spark-grid{
        grid-template-columns: 1fr;
    }
}

/* 分页组件 */
pagination-wrap{
    margin-top:32px;
    text-align:center;
}
.spark-square .page-btn{
    border:1px solid #ddd;
    background:#fff;
    padding:8px 14px;
    margin:0 4px;
    border-radius:8px;
    cursor:pointer;
}
.spark-square .page-btn.active{
    background:#109964;
    color:#fff;
    border-color:#109964;
}
.spark-square .page-btn:disabled{
    opacity:0.4;
    cursor:not-allowed;
}
.spark-square .page-dot{
    padding:0 8px;
}

.pagination-wrap button{
    padding:8px 16px;
    border-radius:6px;
    border:1px solid #109964;
    background:#fff;
    color:#109964;
    cursor:pointer;
}
.pagination-wrap button:disabled{
    border:#ccc;
    color:#aaa;
    cursor:not-allowed;
}
/* 名额耗尽，等级标签置灰 */
.spark-tier-rewards b.tier-disabled{
    opacity:0.35;
    filter:grayscale(1);
}

/* ==========任务广场网格布局 end========== */

/* ==========账户余额明细 ========== */

/* ========== KX余额明细页面样式 ========== */
section.balance-page {
    padding: 24px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

section.balance-page .back-btn {
    background-color: #ffffff;
    border: 1px solid #b8e2d3;
    color: #0e7c58;
    font-size: 16px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
section.balance-page .back-btn:hover {
    background-color: #e6f7f0;
    border-color: #74c4a7;
}
/*顶部绿色横幅卡片*/
section.balance-page .balance-banner {
    background: linear-gradient(90deg, #0f4b30, #109964);
    border-radius: 20px;
    padding: 32px;
    color: #ffffff;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}
section.balance-page .balance-banner .banner-left .en-tip {
    font-size: 13px;
    opacity: 0.85;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
section.balance-page .balance-banner .banner-left h1 {
    font-size: 30px;
    font-weight: bold;
    margin: 0 0 8px 0;
}
section.balance-page .balance-banner .banner-left p {
    opacity: 0.82;
    font-size: 14px;
    margin: 0;
}

section.balance-page .balance-banner .banner-right-balance {
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 20px 28px;
    text-align: center;
}

section.balance-page .balance-banner .banner-right-balance .label {
    font-size: 13px;
    opacity: 0.85;
}

section.balance-page .balance-banner .banner-right-balance .num {
    font-size: 30px;
    font-weight: bold;
    margin: 6px 0 2px;
}

section.balance-page .balance-banner .banner-right-balance .unit {
    font-size: 14px;
    opacity: 0.75;
}

/*tab筛选容器*/
section.balance-page .log-wrap {
    background: #ffffff;
    border-radius: 20px;
    padding: 24px;
}

section.balance-page .log-wrap .log-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}

section.balance-page .log-wrap .log-header .title-en {
    font-size: 13px;
    color: #109964;
    letter-spacing: 1px;
}

section.balance-page .log-wrap .log-header h2 {
    margin: 4px 0 0;
    font-size: 22px;
}

section.balance-page .log-wrap .tab-group {
    display: flex;
    background: #ecf7f1;
    border-radius: 14px;
    padding: 4px;
}

section.balance-page .log-wrap .tab-group .tab-item {
    padding: 10px 22px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 16px;
    color: #667770;
    user-select: none;
}

section.balance-page .log-wrap .tab-group .tab-item.active {
    background: #ffffff;
    color: #0f804e;
    font-weight: 500;
    box-shadow: 0 1px 3px #00000012;
}

/*流水列表*/
section.balance-page .log-wrap .log-list {
    min-height: 220px;
}

section.balance-page .log-wrap .log-list .log-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    border-bottom: 1px solid #f0f4f1;
}

section.balance-page .log-wrap .log-list .log-item:last-child {
    border-bottom: none;
}

section.balance-page .log-wrap .log-list .log-item .log-left {
    display: flex;
    gap: 14px;
    align-items: flex-start;
}

section.balance-page .log-wrap .log-list .log-item .log-left .log-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: #e6f7ef;
    color: #109964;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
}

section.balance-page .log-wrap .log-list .log-item .log-left .log-info h4 {
    margin: 0;
    /* h4本身不再管字号，只做flex容器 */
    display: flex;
    align-items: center;
    gap: 8px;
}
/* 真正控制业务标题文字大小 */
section.balance-page .log-wrap .log-list .log-item .log-left .log-info h4 .log-title-text {
    font-size: 16px; /* 修改这里调大标题，18/20自己调 */
    font-weight: 600;
}
/* h4自身带class，h4.xxx 无空格，控制文字颜色 */
section.balance-page .log-wrap .log-list .log-item .log-left .log-info h4.title-income .log-title-text {
    color:#27ae60;
}
section.balance-page .log-wrap .log-list .log-item .log-left .log-info h4.title-out .log-title-text {
    color:#e74c3c;
}
section.balance-page .log-wrap .log-list .log-item .log-left .log-info h4.title-refund .log-title-text {
    color:#2980b9;
}
section.balance-page .log-wrap .log-list .log-item .log-left .log-info .log-tag {
    font-size: 12px;
    background: #ecf2ef;
    color: #335544;
    padding: 2px 8px;
    border-radius: 6px;
}


section.balance-page .log-wrap .log-list .log-item .log-left .log-info .log-desc {
    font-size: 12px;
    color: #778880;
    margin-top: 4px;
}

section.balance-page .log-wrap .log-list .log-item .log-right {
    text-align: right;
}

section.balance-page .log-wrap .log-list .log-item .log-right .log-amount {
    font-size: 18px;
    font-weight: 600;
}

section.balance-page .log-wrap .log-list .log-item .log-right .amount-income {
    color: #0e995f;
}

section.balance-page .log-wrap .log-list .log-item .log-right .amount-out {
    color: #d64545;
}

section.balance-page .log-wrap .log-list .log-item .log-right .log-time {
    font-family:"Microsoft YaHei",sans‑serif;
    font-size: 12px;
    color: #889990;
    margin-top: 4px;
}

/*空状态*/
section.balance-page .log-wrap .empty-log {
    text-align: center;
    padding: 60px 0;
    color: #889990;
}

/*分页*/
section.balance-page .log-wrap .page-box {
    margin-top: 24px;
    display: flex;
    gap: 12px;
    justify-content: center;
}

section.balance-page .log-wrap .page-box button {
    padding: 8px 16px;
    border-radius: 8px;
    border: 1px solid #cce2d6;
    background: #fff;
    cursor: pointer;
}

section.balance-page .log-wrap .page-box button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}
/* 收入-绿色 */
.log-amount.amount-income {
    color: #0e995f;
}
/* 支出-红色 */
.log-amount.amount-out {
    color: #d64545;
}
/* 退回-蓝色 标题+金额统一颜色 */
.log-info h4.title-refund .log-title-text {
    color: #2980b9;
}
.log-amount.amount-refund {
    color: #2980b9;
}
/* ========== 积分明细页面附加样式，复用balance‑page原有样式 ========== */
.points-log-page .log-icon {
    background-color:#e8f5ee;
    color:#209963;
}


/* ==========账户余额明细+积分明细共用 end========== */


/* ==========通知弹窗 end========== */
/* ========== 铃铛通知按钮 ========== */
.notice-bell-btn {
    background: transparent;
    border: none;
    font-size:22px;
    cursor:pointer;
    position:relative;
    padding:0 8px;
}
.notice-red-dot {
    position:absolute;
    top:2px;
    right:4px;
    width:8px;
    height:8px;
    background:#e63946;
    border-radius:50%;
}

/* ========== 通知下拉弹窗，贴铃铛右下角 ========== */
.notice-dropdown-modal {
    position:absolute;
    top:100%;
    right:0;
    width:420px;
    max-height:480px;
    background:#ffffff;
    border-radius:12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    z-index:999;
    overflow:hidden;
}
.notice-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 16px;
    border-bottom:1px solid #eee;
}
.notice-title {
    font-size:17px;
    font-weight:500;
    color:#222;
}
.notice-all-read-btn {
    border:none;
    background:transparent;
    color:#0f6b4c;
    cursor:pointer;
    font-size:15px;
}
.notice-list-container {
    max-height:400px;
    overflow-y:auto;
}
/* 通知列表项 */
.notice-item {
    padding:14px 16px;
    border-bottom:1px solid #f3f3f3;
    cursor:pointer;
    position:relative;
}
.notice-item:hover {
    background-color:#f8f9fa;
}
.notice-item.unread::after{
    content:"";
    position:absolute;
    left:6px;
    top:18px;
    width:7px;
    height:7px;
    background:#e63946;
    border-radius:50%;
}
.notice-item-title {
    font-size:16px;
    color:#222;
    margin-bottom:4px;
}
.notice-item-content {
    font-size:14px;
    color:#555;
}
.notice-item-time {
    font-size:12px;
    color:#999;
    margin-top:6px;
}
/* ========== 通知详情居中弹窗遮罩 ========== */
.notice-detail-modal {
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:1000;
    display:none; /* 默认隐藏，只通过JS设置 display:flex 打开 */
    align-items:center;
    justify-content:center;
}
.notice-detail-box {
    width:440px;
    background:#fff;
    border-radius:12px;
    overflow:hidden;
}
.notice-detail-head {
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:16px 20px;
    border-bottom:1px solid #eee;
}
.detail-close {
    font-size:24px;
    cursor:pointer;
    color:#888;
}
.notice-detail-body {
    padding:20px;
}
#detail-content {
    font-size:15px;
    color:#333;
    line-height:1.6;
}
.detail-time {
    margin-top:16px;
    font-size:13px;
    color:#999;
}

/* ==========通知 end========== */

/* ========== USDT充值页面 recharge-page begin========== */
.recharge-page {
    padding:24px 20px;
    max-width:1200px;
    margin:0 auto;
}
.recharge-page-header {
    margin-bottom:20px;
}
.back-account-btn {
    border:1px solid #d2e9df;
    background:#ffffff;
    padding:9px 16px;
    border-radius:10px;
    cursor:pointer;
    font-size:14px;
}
.back-account-btn:hover {
    background:#f0faf5;
}

.recharge-banner-card {
    background: linear-gradient(90deg,#0e5838,#13a068);
    border-radius:20px;
    padding:30px;
    color:#fff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
    margin-bottom:24px;
}
.recharge-banner-left h2 {
    margin:0 0 8px;
    font-size:26px;
}
.recharge-banner-left p {
    opacity:0.88;
    margin:0;
}
.recharge-banner-right {
    background:rgba(255,255,255,0.15);
    padding:16px 24px;
    border-radius:14px;
    text-align:center;
}
.recharge-banner-right small {
    opacity:0.85;
    display:block;
    font-size:13px;
    margin-bottom:6px;
}
.recharge-banner-right .num {
    font-size:32px;
    font-weight:bold;
}
.recharge-banner-right .num span {
    font-size:16px;
    opacity:0.8;
}

.recharge-main-wrap {
    display:grid;
    grid-template-columns: 1fr 340px;
    gap:20px;
}
.recharge-card, .recharge-record-card {
    background:#ffffff;
    border-radius:18px;
    padding:26px;
    box-shadow:0 2px 12px rgba(12,83,54,0.07);
}
.recharge-card h3, .recharge-record-card h3 {
    margin-top:0;
    font-size:17px;
    color:#222;
}

.recharge-amount-grid {
    display:grid;
    grid-template-columns: repeat(3,1fr);
    gap:12px;
    margin:18px 0;
}
.amount-item {
    border:1px solid #ddeee6;
    padding:14px;
    text-align:center;
    border-radius:12px;
    cursor:pointer;
    transition:0.2s;
}
.amount-item:hover {
    border-color:#72c4a4;
    background:#f4fcf9;
}
.amount-item.active {
    border-color:#109964;
    background:#e4f7ef;
}

.custom-input-wrap {
    margin-top:16px;
}
.custom-input-wrap label {
    display:block;
    margin-bottom:6px;
    font-size:14px;
}
.custom-input-wrap input {
    width:100%;
    box-sizing:border-box;
    padding:12px 14px;
    border:1px solid #ddeee6;
    border-radius:10px;
    font-size:15px;
}
.tip-exchange {
    margin-top:10px;
    color:#0e774c;
}

.recharge-divider {
    height:1px;
    background:#e8efec;
    margin:26px 0;
}

.address-box {
    display:flex;
    gap:10px;
}
.address-box span {
    flex:1;
    background:#f6faf8;
    padding:12px;
    border-radius:10px;
    font-family:monospace;
    font-size:13px;
    word-break:break-all;
}
.address-box button {
    white-space:nowrap;
    padding:0 16px;
    border-radius:10px;
    border:1px solid #b3e2cf;
    background:#e6f7ef;
    cursor:pointer;
}
.warning-tip {
    color:#c24848;
    font-size:13px;
    margin-top:10px;
}

.btn-recharge-green {
    width:100%;
    margin-top:22px;
    padding:14px;
    border-radius:12px;
    background:#109964;
    color:#fff;
    border:none;
    font-size:16px;
    cursor:pointer;
}
.btn-recharge-green:hover {
    background:#0c7c50;
}

.record-list {
    margin-top:14px;
}
.empty-row {
    text-align:center;
    padding:30px;
    color:#999;
}

/* 适配移动端 */
@media (max-width:860px) {
    .recharge-main-wrap {
        grid-template-columns:1fr;
    }
    .recharge-amount-grid {
        grid-template-columns: repeat(2,1fr);
    }
    .recharge-banner-card {
        flex-direction:column;
        align-items:flex-start;
    }
}

/* 充值二维码区域 */
#qrcode-wrap {
    margin-top:20px;
}
.qrcode-box {
    background:#f8fbf9;
    padding:16px;
    border-radius:12px;
    display:inline-block;
}
.qrcode-box img {
    width:220px;
    height:220px;
    object-fit:contain;
}

/*返回我的账户CSS*/
.back-account-btn {
    background-color: #ffffff;
    border: 1px solid #b8e2d3;
    color: #0e7c58;
    font-size: 16px;
    padding: 10px 18px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.back-account-btn:hover {
    background-color: #e6f7f0;
    border-color: #74c4a7;
}

/*按钮外层容器，增加底部留白*/
.recharge-page {
    padding: 24px 20px 60px 20px;  /* 底部60px留白，滚动到底不会贴浏览器底边 */
    max-width: 1200px;
    margin: 0 auto;
}
.btn-recharge-wrap {
    margin-top:28px;
    margin-bottom:40px; /* 按钮下方留出大空白，不会紧贴卡片底部 */
}
.btn-recharge-green {
    width: 100%;
    background-color:#0e8c5e;
    color:#fff;
    border:none;
    padding:14px 0;
    border-radius:12px;
    font-size:17px;
    cursor:pointer;
}
.btn-recharge-green:disabled {
    opacity:0.65;
    cursor:not-allowed;
}
/* 仅支付宝充值：消除父容器多余背景，解决双层方框重叠 */
.alipay-banner .recharge-banner-right {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

/* ========== USDT充值页面 recharge-page end========== */

/* ========== 充值选择弹窗 begin========== */
/* 充值选择弹窗容器 */
.charge-select-box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    background: #ffffff;
    border: 3px solid #0f6b4c;
    border-radius: 16px;
    padding: 28px 32px;
}

.charge-select-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
}

.charge-select-header h3 {
    font-size: 22px;
    color: #0f6b4c;
    margin: 0;
}

/* 右上角红色关闭叉号 */
.charge-close-x {
    font-size: 28px;
    color: #e53935;
    cursor: pointer;
    line-height: 1;
}

.charge-select-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.charge-option-btn {
    width: 100%;
    height: 52px;
    border-radius: 999px;
    border: none;
    background: linear-gradient(90deg, #08a96b, #068f58);
    color: #ffffff;
    font-size: 17px;
    font-weight: 500;
    cursor: pointer;
    transition: 0.2s;
    box-shadow: 0 2px 8px rgba(8, 169, 107, 0.35);
}
.charge-option-btn:hover {
    background: linear-gradient(90deg, #07c77d, #06a469);
    transform: translateY(-1px);
}
.charge-option-btn:active {
    transform: translateY(0);
}

/* ========== 充值选择弹窗 end========== */

/* ========== 支付宝充值页面 begin========== */
/* 支付宝充值页面，大部分复用recharge-page原有样式 */
.alipay-recharge-page{
    padding:24px;
}

.alipay-recharge-page .recharge-banner-card{
    background: linear-gradient(90deg,#0f6b4c,#188760);
    border-radius:16px;
    padding:28px 32px;
    color:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    gap:20px;
}

.alipay-recharge-page .recharge-banner-left h2{
    margin:0 0 8px 0;
    font-size:28px;
}
.alipay-recharge-page .recharge-banner-left p{
    margin:0;
    opacity:0.9;
    font-size:15px;
}

.alipay-recharge-page .recharge-now-balance{
    background:rgba(255,255,255,0.18);
    border-radius:12px;
    padding:14px 24px;
    text-align:right;
}
.alipay-recharge-page .recharge-now-balance small{
    opacity:0.85;
    font-size:14px;
}
.alipay-recharge-page .recharge-now-balance .num{
    font-size:36px;
    font-weight:bold;
    margin-top:4px;
}

.alipay-recharge-page .recharge-main-wrap{
    display:grid;
    grid-template-columns: 620px 1fr;
    gap:24px;
    margin-top:24px;
}

.alipay-recharge-page .recharge-card,
.alipay-recharge-page .recharge-record-card{
    background:#fff;
    border-radius:16px;
    padding:28px;
    box-shadow:0 2px 12px rgba(0,0,0,0.06);
}

.alipay-recharge-page .recharge-amount-grid{
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:14px;
    margin-bottom:20px;
}

.alipay-recharge-page .amount-item{
    border:1px solid #b2d9c9;
    border-radius:10px;
    text-align:center;
    padding:14px 0;
    cursor:pointer;
    transition:0.2s;
}
.alipay-recharge-page .amount-item.active{
    background:#0f6b4c;
    color:#fff;
    border-color:#0f6b4c;
}

.alipay-recharge-page .custom-input-wrap{
    margin-bottom:16px;
}
.alipay-recharge-page .custom-input-wrap label{
    display:block;
    margin-bottom:8px;
}
.alipay-recharge-page .custom-input-wrap input{
    width:100%;
    box-sizing:border-box;
    border:1px solid #b2d9c9;
    border-radius:8px;
    padding:12px 14px;
    font-size:16px;
}

.alipay-recharge-page .tip-exchange{
    font-size:16px;
    color:#0f6b4c;
    font-weight:500;
    margin:12px 0;
}

.alipay-recharge-page .recharge-divider{
    height:1px;
    background:#e8efec;
    margin:20px 0;
}

.alipay-recharge-page .warning-tip{
    color:#d04040;
    font-size:14px;
}

.alipay-recharge-page .btn-recharge-wrap{
    margin-top:24px;
}
.alipay-recharge-page .btn-recharge-green{
    width:100%;
    height:52px;
    border-radius:999px;
    border:none;
    background:#0f6b4c;
    color:#fff;
    font-size:17px;
    cursor:pointer;
}
.alipay-recharge-page .btn-recharge-green:disabled{
    opacity:0.65;
}

.alipay-recharge-page .record-list .empty-row{
    text-align:center;
    color:#888;
    padding:40px 0;
}
/* ===== USDT充值页面：背景、圆角交给父级 recharge‑banner‑right，子容器只做内容容器，不要背景 ===== */
.recharge-page .recharge-now-balance {
    /* 去掉背景圆角，完全使用父容器 recharge‑banner‑right 的样式 */
    background: transparent;
    border-radius: 0;
    padding:0;
    text-align:center;
    min-width:180px;
}
.recharge-page .recharge-now-balance small {
    color:#e8f3ee;
    font-size:14px;
    display:block;
    margin-bottom:4px;
}
.recharge-page .recharge-now-balance .num {
    font-size:36px;
    color:#ffffff;
    font-weight:bold;
}
.recharge-page .recharge-now-balance .num span {
    font-size:18px;
    margin-left:4px;
}

/* ===== 支付宝充值页面：父容器清空背景，子容器recharge‑now‑balance承担卡片背景圆角 ===== */
.alipay-banner .recharge-banner-right {
    background: transparent;
    border-radius: 0;
    padding: 0;
}
.alipay-banner .recharge-now-balance {
    background:rgba(255,255,255,0.22);
    border-radius:12px;
    padding:16px 24px;
    text-align:center;
    min-width:180px;
}
.alipay-banner .recharge-now-balance small {
    color:#e8f3ee;
    font-size:14px;
    display:block;
    margin-bottom:4px;
}
.alipay-banner .recharge-now-balance .num {
    font-size:36px;
    color:#ffffff;
    font-weight:bold;
}
.alipay-banner .recharge-now-balance .num span {
    font-size:18px;
    margin-left:4px;
}

/* ========== 支付宝充值页面 end========== */


/* ========= claimTask页面 【带页面前缀，无重复样式】 ========= */
.claim-task-page {
    /* 将 padding 的底部值调大（例如 100px 到 200px，数值越大底部越能下拉） */
    padding: 20px 15px 130px 15px; /* 顺序为：上 20px, 右 20px, 下 120px, 左 20px */
    box-sizing: border-box;
}

.claim-task-page .claim-task-page-header {
    margin-bottom: 16px;
}

.claim-task-page .back-task-square-btn {
    background: #179e64;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 14px;
    cursor: pointer;
}

/* 顶部横幅 */
.claim-task-page .claim-task-banner {
    background: linear-gradient(90deg, #0e7850, #23b072);
    border-radius: 16px;
    padding: 20px 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    margin-bottom: 20px;
}

.claim-task-page .claim-task-type-tag {
    font-size: 13px;
    opacity: 0.85;
}

.claim-task-page .claim-task-title {
    font-size: 26px;
    margin: 6px 0;
}

.claim-task-page .claim-task-desc {
    opacity: 0.9;
    font-size: 14px;
}

.claim-task-page .claim-task-tag-group {
    margin-top: 12px;
    display: flex;
    gap: 8px;
}

.claim-task-page .tag-item {
    background: rgba(255, 255, 255, 0.22);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}
.claim-task-page .tag-item-task {
    background: rgba(255, 255, 255, 0.22);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.claim-task-page .task-publisher-card {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.claim-task-page .publisher-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #cccccc;
    flex-shrink: 0;
}

/* 核心：三卡片容器 1:2:1 伸缩比例设置 */
.claim-task-page .claim-task-card-wrap {
    display: flex;
    gap: 20px;
    margin-top: 20px;
    align-items: stretch;
}

/* 强制按 1:2:1 比例瓜分宽度，并允许自动计算 min-width 防止溢出 */
.claim-task-page .claim-card-left {
    flex: 1 1 0%;
    min-width: 0;
}

.claim-task-page .claim-card-center {
    flex: 2 1 0%;
    min-width: 0;
}

.claim-task-page .claim-card-right {
    flex: 1 1 0%;
    min-width: 0;
}

.claim-task-page .claim-card {
    background: #ffffff;
    border-radius: 14px;
    padding: 20px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
}

/* 左侧卡片：目标推文 */
.claim-task-page .card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    font-size: 13px;
    font-weight: bold;
    color: #666;
}

.claim-task-page .open-x-link {
    color: #179e64;
    text-decoration: none;
    font-size: 13px;
    word-break: break-all;
    max-width: 60%;
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.claim-task-page .x-post-box {
    border: 1px solid #e7e7e7;
    border-radius: 10px;
    padding: 14px;
    background: #fafafa;
}

.claim-task-page .post-author-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.claim-task-page .post-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ccc;
    flex-shrink: 0;
}

.claim-task-page .post-author {
    font-size: 13px;
    line-height: 1.3;
}

.claim-task-page .post-author span {
    color: #888;
    font-size: 12px;
}

.claim-task-page .x-logo {
    margin-left: auto;
}

.claim-task-page .post-content {
    font-size: 13px;
    color: #333;
    line-height: 1.5;
    word-break: break-word;
}

.claim-task-page .btn-open-xpost {
    width: 100%;
    margin-top: 14px;
    padding: 10px;
    background: #ecf9f3;
    color: #179e64;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}

/* 中间卡片：三步流程 + 额外数据 + 等级奖励 */
.claim-task-page .how-it-works-title {
    position: relative;
    text-align: center;
    margin-bottom: 20px;
}

.claim-task-page .how-it-works-title small {
    color: #888;
    font-size: 11px;
    letter-spacing: 1px;
}

.claim-task-page .how-it-works-title h3 {
    margin: 4px 0 0 0;
    font-size: 18px;
}

.claim-task-page .btn-open-target-x {
    position: absolute;
    right: 0;
    top: 0;
    background: #ecf9f3;
    color: #179e64;
    border: none;
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
}

/* 步骤列调整：均分网格并缩小内边距与字体 */
.claim-task-page .step-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

.claim-task-page .step-item {
    border: 1px solid #e8e8e8;
    border-radius: 10px;
    padding: 12px 10px;
    box-sizing: border-box;
}

.claim-task-page .step-item.step-active {
    border-color: #5088f0;
    background: #f2f6ff;
}

.claim-task-page .step-num {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    background: #2563eb;
    color: #fff;
    text-align: center;
    line-height: 26px;
    font-weight: bold;
    font-size: 13px;
    margin-bottom: 8px;
}

.claim-task-page .step-text h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
}

.claim-task-page .step-text p {
    margin: 0;
    font-size: 12px;
    color: #666;
    line-height: 1.4;
    word-break: break-word;
}

/* 额外元信息区域（关键词/时长） */
.claim-task-page .extra-task-meta {
    margin-top: 16px;
    padding: 10px 12px;
    background: #f9f9f9;
    border-radius: 8px;
    font-size: 14px;
    color: #555;
}

/* 奖励等级列表 */
.claim-task-page .reward-tier-block {
    margin-top: 20px;
}

.claim-task-page .tier-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    font-weight: bold;
    margin-bottom: 8px;
}

.claim-task-page .tier-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px;
    border-bottom: 1px solid #eee;
    font-size: 13px;
}

.claim-task-page .tier-self {
    background: #ecf9f3;
    border-radius: 6px;
    border-bottom: none;
}

.claim-task-page .self-tag {
    font-size: 11px;
    color: #179e64;
    background: #d4f3e4;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
}

.claim-task-page .progress-bar-wrap {
    margin-top: 14px;
}

.claim-task-page .progress-text {
    font-size: 12px;
    color: #666;
    margin-bottom: 4px;
}

.claim-task-page .progress-bg {
    width: 100%;
    height: 6px;
    background: #e9e9e9;
    border-radius: 4px;
    overflow: hidden;
}

.claim-task-page .progress-fill {
    width: 60%;
    height: 100%;
    background: #179e64;
    border-radius: 4px;
}

/* 右侧卡片组件 */
.claim-task-page .task-info-block .task-info-header {
    font-size: 18px;
    font-weight: bold;
}

.claim-task-page .task-info-block .task-info-desc {
    font-size: 12px;
    color: #888;
    margin: 4px 0 12px 0;
}

.claim-task-page .task-info-row {
    font-size: 13px;
    color: #179e64;
}

.claim-task-page .task-seat {
    font-size: 13px;
    color: #555;
    margin-top: 4px;
}

.claim-task-page .task-reward-big {
    font-size: 28px;
    font-weight: bold;
    margin: 8px 0 16px 0;
    color: #111;
}

.claim-task-page .task-already-tip {
    color: #d87800;
    font-size: 13px;
    margin-bottom: 8px;
}

.claim-task-page .claim-task-main-btn,
.claim-task-page .verify-task-main-btn {
    width: 100%;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 15px;
    font-weight: bold;
    cursor: pointer;
}

.claim-task-page .claim-task-main-btn {
    background: #179e64;
    color: #fff;
}

.claim-task-page .verify-task-main-btn {
    background: #179e64;
    color: #fff;
}

.claim-task-page .task-warning-block {
    margin-top: 14px;
    background: #fff5f5;
    border: 1px solid #ffe3e3;
    border-radius: 8px;
    padding: 10px;
    font-size: 14px;
    color: #a92a2a;
    line-height: 1.5;
}

.claim-task-page .warning-item {
    margin-bottom: 4px;
}

.claim-task-page .warning-item:last-child {
    margin-bottom: 0;
}

.claim-task-page .report-task-row {
    margin-top: 12px;
    background: #f8f8f8;
    border-radius: 6px;
    padding: 8px 10px;
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #666;
    cursor: pointer;
}

.customTask-warning-block {
    background-color: #278b57;
    color: #ffffff;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top:12px;
}
.customTask-warning-item {
    font-size:14px;
    line-height:1.65;
    margin-bottom:4px;
}
.customTask-warning-item.warning-title {
    font-weight: bold;
    font-size: 15px;
    margin-bottom: 6px;
}
.customTask-warning-item:last-child {
    margin-bottom:0;
}


/* 弹窗遮罩（独立于页面） */
.modal-mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.claim-confirm-modal {
    width: 400px;
    background: #ffffff;
    border-radius: 16px;
    padding: 24px;
}

.modal-icon-box {
    text-align: center;
    margin-bottom: 8px;
}

.modal-icon {
    font-size: 36px;
}

.modal-title {
    text-align: center;
    margin: 0 0 14px 0;
    font-size: 18px;
}

.modal-content-text {
    line-height: 1.6;
    margin-bottom: 20px;
    font-size: 14px;
}

.modal-btn-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-cancel-btn {
    padding: 10px;
    border-radius: 8px;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
}

.modal-ok-btn {
    padding: 10px;
    border-radius: 8px;
    border: none;
    background: #179e64;
    color: #fff;
    cursor: pointer;
}

/* 移动端/小屏响应式处理：小于 1100px 自动上下堆叠 */
@media (max-width: 1100px) {
    .claim-task-page .claim-task-card-wrap {
        flex-direction: column;
    }
}

/*按钮文字：`后台校验任务中......`，同时视觉置灰，不可点击*/
.verify-task-main-btn:disabled {
    background:#88c9aa !important;
    color:#ffffff !important;
    opacity:0.75;
    cursor:not-allowed;
}
/* 定制任务每一项要求的框样式，和示例框视觉统一 */
.custom‑require‑list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.custom‑require‑item {
    border:1px solid #dde2e8;
    border-radius:8px;
    padding:12px 14px;
    background:#f7f8fa;
    font-family:'Microsoft YaHei',sans-serif;
    font-size:13px;
    color:#444;
    line-height:1.7;
}
.custom‑require‑label {
    font-weight: bold;
    color:#222;
}
.custom‑require‑value {
    color:#179e64;
    word-break: break-all;
}
/* 定制任务问号提示图标 */
.custom‑require‑label {
    display: flex;
    align-items: center;
    gap:6px;
    position: relative;
}
.field‑tip‑icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width:18px;
    height:18px;
    border-radius:50%;
    background:#e8f3ef;
    color:#179e64;
    font-size:12px;
    cursor:pointer;
    user-select:none;
}
.field‑tip‑icon:hover{
    background:#c8e9da;
}

/* tooltip气泡：放在问号下方 */
.field‑tip‑icon::after {
    content: attr(data‑tip);
    position:absolute;
    left:0;
    top:26px;
    z-index:999;
    min-width:260px;
    max-width:380px; /* 稍微加宽一点容纳示例 */
    padding:10px 12px;
    background:#ffffff;
    color:#333;
    font-size:13px;
    line-height:1.55;
    white-space: pre-line; /* 识别 \n 换行 */
    border-radius:8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.12);
    opacity:0;
    pointer-events:none;
    transition: opacity 0.22s ease;
}

/* 三角：向上，指向问号底部 */
.field‑tip‑icon::before{
    content:"";
    position:absolute;
    left:8px;
    top:16px;
    border:6px solid transparent;
    border-bottom-color:#ffffff;
    z-index:1000;
    opacity:0;
    pointer-events:none;
    transition: opacity 0.22s ease;
}
/* hover显示气泡+三角 */
.field‑tip‑icon:hover::after,
.field‑tip‑icon:hover::before{
    opacity:1;
}

.x-post-box {
    overflow: hidden;
}
.post-media-wrap {
    display: none;
}
.post‑media‑img {
    display:block;
}


/* ========= claimTask页面 【带页面前缀，无重复样式】end ========= */

/* ========= 我领取任务 myClaim 的页面 【带页面前缀，无重复样式】begin ========= */
/* 返回按钮 */
.back-btn {
    font-size:16px;
    margin:12px 0;
    cursor:pointer;
    display:inline-block;
}
.back-btn:hover {
    color:#179e64;
}

/* 顶部绿色Banner卡片，和我发布任务完全统一 */
.page-banner {
    width:100%;
    box-sizing: border-box;
    background: linear-gradient(90deg,#0f5938,#178052);
    border-radius:16px;
    padding:32px 28px;
    display:flex;
    justify-content: space-between;
    align-items:center;
    color:#ffffff;
    margin-bottom:20px;
}
.banner-left span {
    font-size:17px;
    opacity:0.85;
    display:block;
    margin-bottom:8px;
}
.banner-left h1 {
    font-size:42px;
    font-weight:bold;
    margin:0 0 10px 0;
}
.banner-left p {
    font-size:18px;
    opacity:0.8;
    margin:0;
}
.banner-right {
    flex-shrink:0;
}

/* 表格外层容器，顶格铺满，无额外缩进 */
.my-claim-table-wrap {
    width:100%;
    overflow-x:auto;
}
.my-claim-table {
    width:100%;
    border-collapse: collapse;
    background:#ffffff;
    border-radius:8px;
    overflow:hidden;
}
.my-claim-table th {
    background-color:#f6f8f6;
    color:#222222;
    font-weight:600;
    text-align:left;
    padding:14px 14px;
    border-bottom:1px solid #e8eee8;
}
.my-claim-table td {
    padding:14px 14px;
    border-bottom:1px solid #f0f4f0;
    vertical-align: middle;
}
.my-claim-table tbody tr:nth-child(even) {
    background-color:#fafcfb;
}
.my-claim-table tbody tr:hover {
    background-color:#f1f7f4;
}

/* 操作按钮 */
.btn-operate-disabled {
    padding:5px 12px;
    background:#cccccc;
    color:#828282;
    border:none;
    border-radius:6px;
    cursor:not-allowed;
    font-size:13px;
}
.btn-operate-normal {
    padding:5px 12px;
    background:#179e64;
    color:#ffffff;
    border:none;
    border-radius:6px;
    cursor:pointer;
    font-size:13px;
}
.btn-operate-normal:hover{
    background:#138454;
}
/* banner右上角白色按钮，和发布任务按钮样式统一 */
.banner-action-btn {
    background:#ffffff;
    color:#0f5938;
    border:none;
    border-radius:12px;
    padding:14px 28px;
    font-size:18px;
    font-weight:600;
    cursor:pointer;
}
.banner-action-btn:hover {
    background:#f0f7f3;
}

/* ========= 我领取任务 myuClaim 的页面 【带页面前缀，无重复样式】end ========= */

/* ========== 留言弹窗 feedback-modal ========== */
.feedback-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.55);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.feedback-modal-inner {
    width: 540px;
    max-width: 92vw;
    background-color: #ffffff;
    border-radius: 16px;
    overflow: hidden;
}

/* 弹窗头部：居中标题与右上角叉号 */
.feedback-modal-header {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 18px 24px;
    border-bottom: 1px solid #f0f0f0;
}

.feedback-modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: bold;
    color: #111827;
    text-align: center;
}

.feedback-close-x {
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #94a3b8;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
    transition: color 0.2s ease;
}

.feedback-close-x:hover {
    color: #ef4444; /* 移入变红 */
}

/* 弹窗主体表单 */
.feedback-modal-body {
    padding: 20px 24px;
}

.feedback-form-item {
    margin-bottom: 18px;
}

.feedback-form-item label {
    display: block;
    margin-bottom: 8px;
    font-size: 15px;
    color: #333;
}

.required-mark {
    color: #e53935;
}

.feedback-form-item select,
.feedback-form-item input[type="email"] {
    width: 100%;
    box-sizing: border-box;
    padding: 11px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    font-size: 15px;
}

.feedback-form-item textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 120px;
    padding: 11px 12px;
    border: 1px solid #dcdcdc;
    border-radius: 10px;
    font-size: 15px;
    resize: vertical;
}

/* 底部按钮：居中、对称与适当间距 */
.feedback-modal-footer {
    padding: 16px 24px 24px 24px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 80px; /* 两个按钮间距拉开 */
}

.feedback-btn {
    min-width: 120px; /* 统一宽度实现对称 */
    padding: 10px 24px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

.feedback-cancel {
    background: #eeeeee;
    color: #333333;
}

.feedback-cancel:hover {
    background: #e2e2e2;
}

.feedback-submit {
    background: #087c5c;
    color: #ffffff;
}

.feedback-submit:hover {
    background: #06644a;
}

/* ================= 导航栏留言按钮橙色高亮 ================= */
.nav-feedback-cta {
    color: #ff6b00 !important; /* 烈焰橙 */
    font-weight: bold;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.nav-feedback-cta:hover {
    color: #ff8c00 !important;
    transform: translateY(-1px);
}
/* ========== 留言弹窗 feedback-modal end ========== */

/* ========== 管理员弹窗 begin ========== */
/* 管理员弹窗样式，和你现有弹窗风格对齐 */
.modal-overlay {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.modal-box {
    background: #ffffff;
    border-radius: 10px;
    min-width: 420px;
    padding: 24px;
    box-sizing: border-box;
    overflow: visible;
}
.form-row{
    margin-bottom:14px;
    display: flex;
    flex-direction: column;
    gap:8px;
}
.form-row label{
    display:block;
    font-size:14px;
    font-weight: 500;
}
.modal-btn-group{
    margin-top:24px;
    display:flex;
    gap:12px;
    justify-content:flex-end;
}
.btn-cancel{
    padding:8px 16px;
    border:1px solid #ccc;
    background:#fff;
    border-radius:6px;
    cursor:pointer;
}
.btn-primary{
    padding:8px 18px;
    background:#179e64;
    color:white;
    border:none;
    border-radius:6px;
    cursor:pointer;
}
.btn-secondary{
    padding:8px 12px;
    border:1px solid #179e64;
    color:#179e64;
    background:#fff;
    border-radius:6px;
    cursor:pointer;
    white-space:nowrap;
}
/* ========== 管理员弹窗 end ========== */

/* ========== 语言选择容器格式 end ========== */
/* 语言选择器容器 */
.lang-select-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
    background-color: #f5f7fa;
    border: 1px solid #e1e4e8;
    border-radius: 20px; /* 圆角胶囊形状 */
    padding: 0 12px 0 10px;
    margin-right: 12px;
    transition: all 0.25s ease;
}

/* 悬浮与聚焦高亮效果 */
.lang-select-wrapper:hover {
    background-color: #ffffff;
    border-color: #27b964; /* 匹配主色调绿色 */
    box-shadow: 0 2px 8px rgba(39, 185, 100, 0.15);
}

/* 前置 🌐 图标 */
.lang-icon {
    font-size: 14px;
    margin-right: 4px;
    user-select: none;
}

/* 核心 select 下拉框样式清理 */
.lang-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: transparent;
    border: none;
    outline: none;
    font-size: 13px;
    font-weight: 500;
    color: #333333;
    padding: 6px 16px 6px 2px;
    cursor: pointer;
    /* 自定义右侧优雅的小下拉箭头 SVG */
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%20666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 12px;
}

/* 下拉菜单内部选项背景重置 */
.lang-select option {
    background-color: #ffffff;
    color: #333333;
    padding: 8px;
}
/* ========== 语言选择容器 end ========== */




/* =========================
 手机适配 开始
========================= */
/* ==========================================================================
   移动端响应式适配 (Mobile Responsive Styles)
   ========================================================================== */
@media (max-width: 768px) {

    /* 1. 全局容器与边距调整 */
    .container,
    .spark-square,
    .publish-wrap,
    .publish-page,
    .leaderboard-page,
    .me-page,
    .invite-page,
    .published-task-page {
        padding-left: 16px !important;
        padding-right: 16px !important;
        margin-top: 12px;
    }

    /* 2. 顶部导航栏 (TopBar) */
    .topbar {
        height: auto;
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .logo {
        font-size: 18px;
    }
    .logo-icon {
        width: 32px;
        height: 32px;
        font-size: 16px;
    }
    .nav {
        width: 100%;
        justify-content: space-between;
        gap: 10px;
        font-size: 13px;
        overflow-x: auto; /* 超出可横向滑动 */
        white-space: nowrap;
        padding-bottom: 4px;
    }
    .nav-regist-cta,
    .nav-login-cta,
    .nav-charge-cta,
    .nav-logout-cta {
        margin-left: 0;
        padding: 6px 12px;
        font-size: 12px;
    }

    /* 3. Hero 区域打散为单列 */
    .hero,
    .spark-market-hero,
    .hero-banner,
    .publish-hero,
    .invite-leaderboard-hero,
    .invite-banner,
    .published-task-page .page-banner {
        grid-template-columns: 1fr !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        padding: 24px 20px !important;
        gap: 20px !important;
    }

    .hero h1,
    .spark-hero-main h1,
    .hero-banner h1,
    .publish-hero h1,
    .invite-hero-top-row h1,
    .invite-banner h1,
    .published-task-page .banner-left h1 {
        font-size: 26px !important;
    }

    .hero-buttons {
        width: 100%;
        flex-direction: column;
    }
    .btn-primary, .btn-secondary {
        width: 100%;
        text-align: center;
    }

    /* 4. 网格系统（Grid）全面降级为单列或双列 */
    .feature-grid,
    .tier-grid,
    .process-grid,
    .spark-grid,
    .type-grid,
    .duration-grid,
    .pace-grid,
    .stats-grid,
    .invite-top3-row,
    .invite-page .stat-grid {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }

    /* 数据卡片与小部件调整 */
    .stats {
        grid-template-columns: 1fr;
    }
    .spark-panel-stats {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .spark-panel-stats div {
        padding: 8px 4px;
        text-align: center;
    }

    /* 5. 表格移动端优化（允许横向滚动） */
    .table-box,
    .published-task-page .table-wrap {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    table {
        min-width: 600px; /* 保证表格不缩成一团 */
    }
    th, td {
        padding: 10px 8px;
        font-size: 13px;
    }

    /* 6. 发布页 & 个人中心 左右分栏转单列 */
    .publish-layout,
    .account-layout {
        grid-template-columns: 1fr !important;
    }

    /* 侧边栏/结算卡片取消吸顶 */
    .budget-card,
    .activity-sidebar {
        position: static !important;
        width: 100%;
    }

    /* 7. 弹窗适配 (Login Modal & Base Modal) */
    .login-modal-box,
    .modal-box {
        width: 92% !important;
        max-width: 400px;
        padding: 24px 18px !important;
    }

    /* 8. 顶部信息栏 & 工具栏（Spark Square Toolbar） */
    .task-header-bar,
    .spark-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    .spark-filters {
        width: 100%;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 6px;
    }
    .spark-filters button {
        flex-shrink: 0;
    }

    /* 9. 提示气泡 (ToolTip/Popovers) 位置调整 */
    .tooltip-pop,
    .tip-popup,
    .info-icon .tip-popup {
        width: 200px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }

    /* 10. 用户个人信息头部调整 */
    .profile-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .profile-actions {
        width: 100%;
        flex-direction: column;
    }
    .published-tasks-link,
    .referral-center-link {
        width: 100%;
    }
}