:root{ --red:#ff3b3b; --yellow:#ffb300; --line:#eee; }
body{margin:0;font-family:Arial;background:#fff;}

.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 14px;
  background:#BBFD07;
  border-bottom:1px solid var(--line);
}

/* LOGO */
.brand img{
  height:30px;
  display:block;
}

.kefu{
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:50%;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
}

.kefuIcon{
  width:20px;
  height:20px;
  fill:#111;
}

.toast{
  margin:10px 12px;
  background:#fff5f5;
  border:1px solid #ffd2d2;
  color:#c30000;
  padding:10px 12px;
  border-radius:12px;
  font-size:13px;
}

.container{
  padding:12px 12px 86px;
  min-height: calc(100vh - 110px);
  background:
    radial-gradient(circle at 20% 20%, rgba(255,220,120,.22), transparent 45%),
    radial-gradient(circle at 80% 30%, rgba(120,220,255,.16), transparent 55%),
    radial-gradient(circle at 40% 85%, rgba(255,160,200,.12), transparent 55%);
}

.sectionTitle{font-size:18px;font-weight:700;margin:6px 0 10px;}

/* Tabbar */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex;
  background:#fff;
  border-top:1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}

.tb{
  flex:1;
  height:56px;
  border:0;
  background:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.tb span{
  font-size:13px;
  color:#999;
  letter-spacing:.5px;
  transition:.2s;
}

/* 选中态 */
.tb.on span{
  color:#111;
  font-weight:700;
}

/* 轻微点击反馈 */
.tb:active{
  background:#f6f6f6;
}


/* 平台页（图1） */
.searchWrap{display:flex;align-items:center;gap:10px;margin:6px 0 12px;}
#platKw{
  flex:1;height:35px;padding:0 14px;font-size:22px;
  border:2px solid var(--yellow);border-radius:8px;outline:none;background:#fff;
}
.iconBtn{width:48px;height:48px;border:0;background:transparent;cursor:pointer;font-size:22px;}

.platGrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px;}
.pitem{
  position:relative;           /* ✅ 关键：让 pbest 相对每个卡片定位 */
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
  text-decoration:none;
}

/* 平台圆圈 */
.pavatarWrap{
  position:relative;
  width:64px;
  height:64px;
  border-radius:50%;
  border:0;              /* ✅ 去掉黄色边框 */
  background:transparent;/* ✅ 不要白底（透明PNG不会白圈） */
  overflow:hidden;       /* ✅ 裁成圆（必须） */
}


.pavatar{
  width:100%;
  height:100%;
  display:block;
  border-radius:50%;
  object-fit:cover;
  background:transparent;
  /* ✅ 关键：吃掉PNG四周留白/白边（两张不同就是因为留白不同） */
  transform: scale(1.12);
  transform-origin:center;
}

.pbest{
  position:absolute;
  left:-6px;
  top:-10px;
  z-index:10;                  /* ✅ 关键：保证压在头像上面 */
  background:#ff2d2d;
  color:#fff;
  font-weight:700;
  font-size:10px;
  padding:2px 6px;
  border-radius:6px;
  border:2px solid #fff;
  transform: rotate(-4deg);
  box-shadow:0 2px 8px rgba(0,0,0,.12);
  pointer-events:none;
}

.pname{
  font-size:14px;     
  color:#ff3b3b;
  line-height:1.1;
  text-align:center;
  white-space:nowrap;  
  overflow:hidden;
  text-overflow:ellipsis; 
  max-width:80px;    
}


.empty{padding:12px;color:#777;font-size:13px;}
.newsBox{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px;color:#777;font-size:13px;}

/* 任务卡片 */
.gtitle{margin:12px 0 8px;font-weight:700;}
/* 任务卡片高级版 */
.tcard{
  background:rgba(255,255,255,.88);
  border:1px solid rgba(255,255,255,.65);
  border-radius:18px;
  padding:14px;
  margin:12px 0;
  backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
}
.tcard.current{border-color: rgba(0,180,90,.35);}
.tcard.preview{border-color: rgba(255,180,0,.35);}
.tcard.history{border-color: rgba(120,120,120,.18); opacity:.92;}

.thead{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
.tname{font-size:18px;font-weight:800;line-height:1.1;}
.tstatus{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid #eee;background:#fff;color:#111;white-space:nowrap;}

.tmeta{display:grid;gap:6px;font-size:13px;color:#333;}
.tmeta span{color:#777;}

.tfooter{margin-top:12px;display:flex;justify-content:flex-end;}
.tbtn{
  border-radius:14px;
  padding:11px 14px;
  border:1px solid #e5e7eb;
  background:#fff;
  cursor:pointer;
  font-size:14px;
}
.tbtn.primary{background:#111;color:#fff;border-color:#111;}
.tbtn.ghost{background:#fff;color:#555;}
.tbtn:disabled{opacity:.45;cursor:not-allowed;}

.trow{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.tleft{display:flex;align-items:center;gap:10px;}
.tlogo{width:44px;height:44px;border-radius:12px;border:1px solid var(--line);background:#fff;object-fit:contain;}
.tpt{font-weight:700;}
.tsub{font-size:12px;color:#777;margin-top:2px;}
.tgo{font-size:12px;color:#111;border:1px solid var(--line);padding:6px 10px;border-radius:12px;background:#fff;}

/* ========= 图2风格：登录/注册弹窗 ========= */
.mask{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.authWrap{
  width:min(92vw, 380px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}

.authCard{
  width:100%;
  background:#fff;
  border-radius:18px;
  overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.18);
}

/* 顶部 Registro / Login */
.authTabs{
  display:flex;
  background:#fff;
  border-bottom:1px solid #eee;
}

.authTab{
  flex:1;
  height:44px;
  border:0;
  background:#fff;
  cursor:pointer;
  font-weight:700;
  color:#666;
}

.authTab.on{
  color:#0a7a4b;                 /* 你 OKOK 绿色系 */
  box-shadow: inset 0 -3px 0 #0a7a4b;  /* 下划线效果 */
}

/* iframe 容器 */
.authFrameBox{
  background:#fff;
}

/* iframe 高度：做得更像图2（更饱满） */
#authFrame{
  width:100%;
  height:320px;   /* 你想更短：480；更长：560 */
  display:block;
}

/* 底部圆形关闭按钮（图2那种） */
.authCloseBottom{
  width:44px;
  height:44px;
  border-radius:50%;
  border:0;
  background:#fff;
  box-shadow:0 6px 18px rgba(0,0,0,.20);
  cursor:pointer;
  font-size:24px;
  line-height:1;
  color:#666;
}
.authCloseBottom:active{ transform:translateY(1px); }


.pop{width:min(92vw,380px);background:#fff;border-radius:16px;border:1px solid var(--line);padding:14px;}
.popTitle{font-weight:700;margin-bottom:6px;}
.popText{font-size:13px;color:#777;}
.popBtns{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px;}
.pbtn{padding:10px 14px;border:1px solid #ddd;border-radius:12px;background:#fff;text-decoration:none;color:#111;cursor:pointer;}
.pbtn.primary{background:#111;color:#fff;border-color:#111;}