/* 南洋AI圆桌派 · 报名页与后台共用样式（亮色：与首页同一套白昼天空色板） */
:root{
  --ink:#EEF2FA; --ink2:#E3EAF7; --panel:rgba(255,255,255,.86);
  --text:#232A4A; --dim:#5C658C; --faint:#8B93B8; --line:#C9D0E4;
  --gold:#B8841E; --cyan:#17838F; --violet:#6949BE; --warm:#B26A12;
  --ok:#1E7A4A; --warn:#A9701A; --bad:#B4402E;
  --serif:"Songti SC","Noto Serif SC","Source Han Serif SC","STSong",serif;
  --sans:"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  --mono:ui-monospace,"SF Mono","Menlo",monospace;
}
*{box-sizing:border-box}
/* hidden 属性必须真的隐藏。
   浏览器默认样式是 [hidden]{display:none}，优先级极低——任何用 class 设了
   display 的元素（.check/.row/.when 都是 flex）都会把它盖掉，于是
   el.hidden = true 看着毫无反应。这一行是所有 hidden 的兜底。 */
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  min-height:100vh; background:
    radial-gradient(70% 50% at 80% 0%, rgba(105,73,190,.1), transparent 70%),
    radial-gradient(60% 50% at 10% 100%, rgba(23,131,143,.09), transparent 70%),
    linear-gradient(180deg,#F3F6FD,#E8EEF9 45%,#DFE7F5);
  color:var(--text); font-family:var(--sans); -webkit-font-smoothing:antialiased;
  padding:clamp(20px,5vw,56px) clamp(16px,4vw,32px);
}
a{color:var(--warm)}
.wrap{width:100%; max-width:560px; margin:0 auto}
.wrap.wide{max-width:1080px}

.brand{display:flex; align-items:baseline; gap:.7rem; margin-bottom:2rem; flex-wrap:wrap}
.brand h1{
  margin:0; font-family:var(--serif); font-weight:700;
  font-size:clamp(21px,4vw,28px); letter-spacing:.08em;
}
.brand .ai{font-family:var(--mono); font-weight:400; font-size:.78em; color:var(--gold); padding:0 .1em}
.brand .sub{font-size:10.5px; letter-spacing:.2em; color:var(--faint)}

.card{
  background:var(--panel); border:1px solid var(--line); border-radius:14px;
  padding:clamp(18px,3.5vw,30px); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
}
.card + .card{margin-top:1rem}
h2{margin:0 0 .3em; font-family:var(--serif); font-size:19px; font-weight:700; letter-spacing:.05em}
.lede{margin:0 0 1.6rem; font-size:12px; line-height:1.8; color:var(--dim)}
h3{margin:1.6rem 0 .7rem; font-size:11.5px; letter-spacing:.18em; color:var(--warm); font-weight:400}

label{display:block; margin-bottom:1.05rem}
label .lb{display:block; font-size:11px; letter-spacing:.12em; color:var(--dim); margin-bottom:.45rem}
label .lb i{font-style:normal; color:var(--gold)}
input[type=text],input[type=tel],input[type=email],input[type=password],select,textarea{
  width:100%; font-family:inherit; font-size:14px; color:var(--text);
  background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:9px;
  padding:.72em .85em; transition:border-color .2s;
}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--warm)}
input::placeholder{color:#9AA2BF}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--dim) 50%),linear-gradient(135deg,var(--dim) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%,calc(100% - 13px) 52%; background-size:5px 5px,5px 5px; background-repeat:no-repeat}
.trap{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}

.check{display:flex; gap:.6rem; align-items:flex-start; font-size:11.5px; line-height:1.7; color:var(--dim)}
.check input{width:15px; height:15px; margin:.15rem 0 0; accent-color:var(--gold); flex:0 0 auto}

button{font-family:inherit; cursor:pointer; transition:background .2s,border-color .2s,color .2s}
.btn{
  width:100%; font-size:13px; letter-spacing:.18em; text-indent:.18em;
  color:var(--warm); background:rgba(184,132,30,.08);
  border:1px solid rgba(184,132,30,.5); border-radius:999px; padding:.85em 1.5em;
}
.btn:hover:not(:disabled){background:rgba(184,132,30,.16); border-color:rgba(184,132,30,.85)}
.btn:disabled{opacity:.45; cursor:not-allowed}
.btn.small{width:auto; font-size:11px; padding:.5em 1.1em; letter-spacing:.1em; text-indent:.1em}
.btn.ghost{color:var(--dim); background:none; border-color:var(--line)}
.btn.ghost:hover{color:var(--text); border-color:var(--dim); background:rgba(35,42,74,.04)}
:focus-visible{outline:1px solid var(--warm); outline-offset:2px}

.msg{margin:1rem 0 0; padding:.75rem .9rem; border-radius:9px; font-size:12px; line-height:1.7}
.msg.err{border:1px solid rgba(180,64,46,.45); background:rgba(180,64,46,.07); color:#8E2F20}
.msg.ok{border:1px solid rgba(30,122,74,.45); background:rgba(30,122,74,.07); color:#15613A}
.msg.note{border:1px dashed rgba(184,132,30,.45); background:rgba(184,132,30,.06); color:var(--dim)}

.steps{list-style:none; padding:0; margin:.6rem 0 0; display:flex; flex-direction:column; gap:.55rem}
.steps li{display:flex; gap:.7rem; align-items:flex-start; padding:.65rem .85rem;
  border:1px solid rgba(201,208,228,.95); border-radius:9px; font-size:12px; line-height:1.7}
.steps .n{flex:0 0 auto; font-family:var(--mono); font-size:10px; color:var(--warm);
  border:1px solid rgba(184,132,30,.4); border-radius:50%; width:1.7em; height:1.7em;
  display:grid; place-items:center; margin-top:.1em}

.ref{
  font-family:var(--mono); font-size:clamp(22px,5vw,30px); letter-spacing:.14em;
  color:var(--warm); text-align:center; padding:.7em 0;
}
.qr{display:grid; place-items:center; gap:.7rem; padding:1rem 0}
.qr img{width:min(240px,60vw); height:auto; border-radius:12px; background:#fff; padding:10px; border:1px solid var(--line)}
.qr .ph{
  width:min(240px,60vw); aspect-ratio:1; display:grid; place-items:center; text-align:center;
  border:1px dashed var(--line); border-radius:12px; color:var(--faint); font-size:11px;
  line-height:1.8; padding:1rem;
}
.fee{font-family:var(--mono); font-size:17px; color:var(--text); text-align:center; letter-spacing:.04em}

/* 后台表格 */
.bar{display:flex; gap:.7rem; align-items:center; flex-wrap:wrap; margin-bottom:1.1rem}
.bar select{width:auto; min-width:150px; font-size:12px; padding:.5em 2.2em .5em .8em}
.bar .grow{flex:1}
.tally{display:flex; gap:1.1rem; flex-wrap:wrap; font-size:11.5px; color:var(--dim); margin-bottom:1rem}
.tally b{font-family:var(--mono); color:var(--text); font-weight:400; font-variant-numeric:tabular-nums}
.tw{overflow-x:auto; -webkit-overflow-scrolling:touch}
table{width:100%; border-collapse:collapse; font-size:12px; min-width:720px}
th{text-align:left; font-weight:400; font-size:10px; letter-spacing:.14em; color:var(--faint);
  padding:.55rem .6rem; border-bottom:1px solid var(--line); white-space:nowrap}
td{padding:.6rem; border-bottom:1px solid rgba(201,208,228,.8); vertical-align:middle}
tr:last-child td{border-bottom:0}
td.ref{font-family:var(--mono); font-size:11.5px; color:var(--warm); letter-spacing:.06em; text-align:left; padding:.6rem}
td.num{font-variant-numeric:tabular-nums; white-space:nowrap; font-family:var(--mono); font-size:11px; color:var(--dim)}
.pill{display:inline-block; font-size:10px; letter-spacing:.1em; padding:.25em .7em; border-radius:999px; border:1px solid; white-space:nowrap}
.pill.pending{color:var(--warn); border-color:rgba(169,112,26,.5); background:rgba(169,112,26,.08)}
.pill.paid{color:var(--ok); border-color:rgba(30,122,74,.45); background:rgba(30,122,74,.08)}
.pill.cancelled{color:var(--faint); border-color:var(--line)}
.acts{display:flex; gap:.35rem; flex-wrap:wrap}
.tog{font-size:10px; letter-spacing:.06em; padding:.35em .7em; border-radius:999px;
  border:1px solid var(--line); background:none; color:var(--dim)}
.tog:hover{border-color:var(--dim); color:var(--text)}
.tog.on{border-color:rgba(30,122,74,.5); color:var(--ok); background:rgba(30,122,74,.09)}
/* 确认收款：后台唯一会「发信 + 记账」的动作，两件事都撤不回来，所以给它实心样式，
   跟旁边那些可以随便点的开关明显区分开 */
.tog.go{border-color:rgba(30,122,74,.55); color:#fff; background:var(--ok); font-weight:500}
.tog.go:hover{filter:brightness(1.08); color:#fff}
.empty{text-align:center; padding:2.5rem 1rem; color:var(--faint); font-size:12px; line-height:1.9}
.foot{margin-top:1.6rem; font-size:10.5px; color:var(--faint); line-height:1.9; text-align:center}

/* 收款方信息（缴费页与报名成功页共用）：
   转账前唯一能自查「有没有扫错码」的依据，所以给它足够的分量。 */
.payto{
  margin:.9rem auto 0; max-width:300px; padding:.75rem .95rem; border-radius:11px;
  border:1px solid rgba(184,132,30,.34); background:rgba(184,132,30,.05);
  display:grid; grid-template-columns:auto 1fr; gap:.35em .9em; align-items:baseline; text-align:left;
}
.payto .k{font-size:10px; letter-spacing:.16em; color:var(--faint); white-space:nowrap}
.payto .v{font-family:var(--mono); font-size:17px; color:var(--text); letter-spacing:.03em}
.payto .v.name{font-family:var(--sans); font-size:14px}