/* 茄子直播间 · 新人专区 —— id + 元素选择器（无类名前缀），星探风，<dialog> 弹窗，外链单 CSS */
:root { --bg:#ffffff; --light:#f5fbfa; --ink:#2b3a3a; --dim:#7a8c8c; --pink:#ff6b9d; --teal:#14b8a6; --line:#e3eeee; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:"PingFang SC","Microsoft YaHei",sans-serif; background:var(--bg); color:var(--ink); line-height:1.9; }
a { color:inherit; text-decoration:none; }

/* 顶栏 */
#mast { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:20px 5% 12px; }
#logo { font-size:26px; font-weight:800; color:var(--teal); letter-spacing:3px; }
#slogan { font-size:14px; color:var(--dim); }

/* 目录导航 ol */
#toc { background:var(--light); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
#toc ol { list-style:none; margin:0; padding:0 5%; display:flex; flex-wrap:wrap; gap:4px; }
#toc a { display:inline-block; padding:12px 18px; font-size:15px; color:var(--dim); }
#toc a:hover { color:var(--teal); }

/* hero */
#start { text-align:center; padding:54px 20px 40px; background:linear-gradient(180deg, var(--light), #fff); }
#start h1 { font-size:46px; color:var(--pink); margin:0 0 14px; letter-spacing:8px; }
#start p { max-width:640px; margin:0 auto; font-size:17px; }
.start-cta { margin-top:24px; }
.start-cta a { display:inline-block; padding:12px 38px; border-radius:999px; font-size:16px; letter-spacing:2px; color:#fff; background:var(--teal); box-shadow:0 8px 20px rgba(20,184,166,.3); transition:.2s; }
.start-cta a:hover { background:var(--pink); }

/* 双栏主体 */
#stage { max-width:1080px; margin:0 auto; padding:30px 20px 40px; display:grid; grid-template-columns:240px 1fr; gap:24px; }
#glance { background:var(--light); border:1px solid var(--line); border-radius:12px; padding:20px; align-self:start; }
#glance h2 { margin:0 0 12px; font-size:17px; color:var(--teal); }
#glance ul { list-style:none; margin:0 0 12px; padding:0; }
#glance li { padding:8px 0; border-bottom:1px dashed var(--line); font-size:14px; }
#glance mark { background:#fff0f5; color:var(--pink); padding:1px 6px; border-radius:4px; font-size:12px; margin-right:6px; }
#glance p { font-size:13px; color:var(--dim); margin:0; }

#rookie h2 { font-size:24px; color:var(--teal); margin:0 0 12px; padding-left:14px; border-left:5px solid var(--pink); letter-spacing:1px; }
#rookie > p { margin:0 0 12px; color:#4a5a5a; text-align:justify; }

/* 新人卡片 ul */
#rookie-cards { list-style:none; margin:18px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, 1fr); gap:16px; }
#rookie-cards li { border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#rookie-cards figure { margin:0; }
#rookie-cards img { width:100%; height:130px; object-fit:cover; display:block; background:var(--light); }
#rookie-cards figcaption { padding:8px 12px; font-size:13px; color:var(--pink); background:#fffafc; }
#rookie-cards h3 { margin:10px 12px 0; font-size:17px; }
#rookie-cards p { margin:4px 12px 14px; font-size:14px; color:var(--dim); }

/* 正文段落（rank/scout/grow/join） */
#rank, #scout, #grow, #join { max-width:1080px; margin:0 auto 34px; padding:0 20px; }
#rank h2, #scout h2, #grow h2, #join h2 { font-size:24px; color:var(--teal); margin:0 0 12px; padding-left:14px; border-left:5px solid var(--pink); letter-spacing:1px; }
#rank p, #scout p, #grow p, #join p { margin:0 0 12px; color:#4a5a5a; text-align:justify; }

/* 榜单 tabs + list */
#rank-tabs { display:flex; gap:8px; margin:14px 0; flex-wrap:wrap; }
.rank-tab { border:1px solid var(--line); background:#fff; color:var(--ink); padding:7px 20px; border-radius:999px; cursor:pointer; font-size:14px; }
.rank-tab.on { background:var(--teal); color:#fff; border-color:var(--teal); }
#rank-list { display:grid; grid-template-columns:repeat(3, 1fr); gap:16px; }
#rank-list figure { margin:0; border:1px solid var(--line); border-radius:12px; overflow:hidden; }
#rank-list img { width:100%; height:150px; object-fit:cover; display:block; background:var(--light); }
#rank-list figcaption { padding:10px 12px; font-size:15px; display:flex; align-items:center; gap:8px; }
#rank-list mark { background:var(--pink); color:#fff; border-radius:50%; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; font-size:13px; }

/* 手记 */
#note { border:1px solid var(--line); border-left:4px solid var(--pink); border-radius:0 12px 12px 0; padding:16px 20px; margin-top:16px; background:#fffafc; }
#note h3 { margin:0 0 8px; font-size:16px; color:var(--pink); }
#note p { margin:0; color:#5a6a6a; }

/* 报名按钮 */
#apply { background:var(--pink); color:#fff; border:none; padding:10px 28px; border-radius:999px; cursor:pointer; font-size:16px; margin-top:8px; }
#apply:hover { background:#f04f85; }

/* 页脚 */
#foot { border-top:1px solid var(--line); background:var(--light); padding:34px 20px 28px; text-align:center; margin-top:20px; }
#foot > p { font-size:15px; color:var(--ink); margin:0 0 14px; }
#foot-menu { list-style:none; margin:0 auto 14px; padding:0; display:flex; justify-content:center; gap:20px; flex-wrap:wrap; }
#foot-menu li { margin:0; }
#foot-menu a { font-size:14px; color:var(--dim); }
#foot-menu a:hover { color:var(--teal); }
#foot small { display:block; font-size:13px; color:#9db0b0; letter-spacing:1px; }

/* 弹窗 */
#joinDialog { border:1px solid var(--line); border-radius:14px; padding:24px; width:min(400px, 90vw); }
#joinDialog::backdrop { background:rgba(0,0,0,.35); }
#joinDialog h3 { margin:0 0 8px; color:var(--pink); }
#joinDialog p { margin:0 0 14px; color:var(--dim); font-size:14px; }
#joinDialog form { display:flex; flex-direction:column; gap:10px; }
#joinDialog input { border:1px solid var(--line); border-radius:8px; padding:9px 12px; font-size:14px; }
#joinDialog form div { display:flex; gap:10px; justify-content:flex-end; }
#joinDialog button { border:1px solid var(--line); background:#fff; border-radius:8px; padding:8px 20px; cursor:pointer; font-size:14px; }
#joinDialog button[value="ok"] { background:var(--pink); color:#fff; border-color:var(--pink); }

@media (max-width:820px) {
  #start h1 { font-size:34px; letter-spacing:5px; }
  #stage { grid-template-columns:1fr; }
  #rookie-cards { grid-template-columns:1fr; }
  #rank-list { grid-template-columns:1fr; }
}