/* ════════════════════════════════════════════════
   1. 按鈕 — Foundation Button 覆蓋 → CTBA 品牌色
════════════════════════════════════════════════ */
/* .btn alias */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.btn.btn-primary  { background: rgb(var(--primary)); color: #fff; border: 1.5px solid rgb(var(--primary)); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.btn.btn-primary:hover { background: rgb(var(--primary-mid)); transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn.btn-outline  { background: transparent; color: rgb(var(--primary)); border: 1.5px solid rgba(var(--primary)/.35); border-radius: var(--radius); }
.btn.btn-outline:hover { background: rgb(var(--primary-pale)); border-color: rgba(var(--primary)/.55); }
.btn.btn-danger   { background: transparent; color: rgb(var(--warning)); border: 1.5px solid rgba(var(--warning)/.3); border-radius: var(--radius); }
.btn.btn-danger:hover { background: rgb(var(--red-pale)); }
.btn.btn-teal     { background: transparent; color: rgb(0,128,128); border: 1.5px solid rgba(0,128,128,.35); border-radius: var(--radius); }
.btn.btn-teal:hover { background: rgba(0,128,128,.07); }
.btn.btn-green    { background: transparent; color: rgb(var(--success)); border: 1.5px solid rgba(43,155,37,.35); border-radius: var(--radius); }
.btn.btn-green:hover { background: rgba(43,155,37,.07); }
.btn.btn-word     { background: transparent; color: #1e5c9e; border: 1.5px solid rgba(30,92,158,.35); border-radius: var(--radius); }
.btn.btn-word:hover { background: rgba(30,92,158,.07); }
.btn:disabled { opacity: .55; cursor: not-allowed; transform: none !important; }
.btn-full { width: 100%; height: 50px; font-size: .95rem; }
.btn-sm   { height: 34px; padding: 0 14px; font-size: .8rem; }
.btn-xs   { height: 28px; padding: 0 10px; font-size: .72rem; }
.action-bar { display: flex; align-items: center; justify-content: center; gap: 8px; flex-wrap: wrap; }
.save-row   { display: flex; justify-content: center; gap: 10px; padding-top: .875rem; }
.btn-group  { display: flex; justify-content: flex-end; gap: 10px; }

/* ════════════════════════════════════════════════
   2. 表單元件 — Foundation Form 覆蓋
════════════════════════════════════════════════ */
[type=color],[type=date],[type=datetime-local],[type=datetime],
[type=email],[type=month],[type=number],[type=password],
[type=search],[type=tel],[type=text],[type=time],[type=url], input.flatpickr-input[readonly],
[type=week],textarea,select {
  width: 100%; min-width: 100px; height: 46px; padding: 0 12px;
  box-sizing: border-box;
  font-size: .875rem; font-family: var(--font-main);
  color: rgba(var(--black)/.85); background: rgb(var(--white));
  border: 1.5px solid rgba(var(--black)/.20);
  border-radius: var(--radius); box-shadow: var(--shadow-input);
  transition: border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none; appearance: none; margin: 0;
}
input.flatpickr-input[readonly] {
        background-: #fff !important;
        color: inherit !important;
        cursor: pointer !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
textarea { height: auto; min-height: 88px; padding: 10px 12px; }
[type=date] { padding: 0 10px; }
[type=text]:focus,[type=email]:focus,[type=password]:focus,
[type=date]:focus,[type=tel]:focus,[type=number]:focus, input.flatpickr-input[readonly]:focus,
textarea:focus,select:focus {
  border-color: rgba(var(--primary)/.6);
  box-shadow: 0 0 0 3px rgba(var(--primary),.08); outline: none;
}
[type=text]:hover:not(:focus),[type=email]:hover:not(:focus),
[type=password]:hover:not(:focus),select:hover:not(:focus) {
  border-color: rgba(var(--primary)/.35);
}
[disabled],[readonly] {
  background: rgba(var(--black)/.04); color: rgba(var(--black)/.45);
  border-color: rgba(var(--black)/.12); cursor: not-allowed; box-shadow: none;
}
select {
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a274d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 13px; cursor: pointer;
}
select:disabled {
  /*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b4bac8' stroke-width='2'%3E%3Crect x='3' y='11' width='18' height='11' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E");*/
}
::placeholder { color: rgba(var(--black)/.35); font-size: .825rem; }
.help-text,.form-hint { font-size: .72rem; color: rgba(var(--black),.55); margin-top: 4px; display: block; }
.form-error {
  display: flex; align-items: center; gap: 3px;
  font-size: .7rem; font-weight: 500; color: rgb(var(--warning)); margin-top: 4px;
}
.form-error::before {
  content: '!'; display: inline-flex; align-items: center; justify-content: center;
  width: 13px; height: 13px; background: rgb(var(--warning)); color: #fff;
  border-radius: 50%; font-size: 9px; font-weight: 900; flex-shrink: 0;
}
.has-error input,.has-error select,.has-error textarea,.is-invalid-input {
  border-color: rgb(var(--warning)) !important;
  box-shadow: 0 0 0 3px rgba(var(--warning),.10) !important;
}
.has-success input,.has-success select {
  border-color: rgb(var(--success)) !important;
  box-shadow: 0 0 0 3px rgba(43,155,37,.10) !important;
}
label,.form-label {
  display: flex; align-items: center; gap: 4px;
  font-size: .82rem; font-weight: 700; color: rgba(var(--primary),.85); margin-bottom: 4px;
}
label .required,.form-label .required, .required { color: rgb(var(--warning)); margin-left: 5px }
label .label-hint,.form-label .label-hint {
  margin-left: auto; padding: 1px 7px;
  font-size: .7rem; font-weight: 400; color: rgba(var(--black)/.55);
  background: rgba(var(--primary-pale)); border-radius: 5px;
}
.input-icon-wrap { display: flex; align-items: center; position: relative; }
.input-icon-wrap .input-icon {
  position: absolute; left: 11px; display: flex; 
  width: 16px; height: 16px; color: rgba(var(--black)/.35); pointer-events: none; transition: color var(--ease);
}
.input-icon-wrap .input-icon svg { width: 100%; height: 100%; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.input-icon-wrap input,.input-icon-wrap select { padding-left: 35px; }
.input-icon-wrap input { width: 100%; height: 44px; box-sizing: border-box; line-height: normal; display: block; }
.input-icon-wrap:focus-within .input-icon { color: rgb(var(--primary)); }
.input-icon-wrap .input-action {
  position: absolute; right: 9px; top: 50%; transform: translateY(-50%);
  background: none; border: none; padding: 0; cursor: pointer;
  color: rgba(var(--black),.35); transition: color var(--ease);
  display: flex; align-items: center; justify-content: center; height: 24px; width: 24px;
}
.input-icon-wrap .input-action:hover { color: rgb(var(--primary)); }
.input-icon-wrap .input-action svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; }
.input-icon-wrap input.has-action { padding-right: 33px; }
.input-group { display: flex; align-items: stretch; }
.input-group .input-group-label {
  display: flex; align-items: center; padding: 0 12px;
  background: rgba(var(--black),.04); border: 1.5px solid rgba(var(--black),.20);
  border-right: none; border-radius: var(--radius) 0 0 var(--radius);
  font-size: .875rem; color: rgba(var(--black),.55); white-space: nowrap;
}
.input-group .input-group-field { flex: 1; border-radius: 0 var(--radius) var(--radius) 0; }
.form-group { display: flex; flex-direction: column; gap: 0; }
.col-span-3{ grid-column: span 3}

/* ════════════════════════════════════════════════
   3. 通知框 — Foundation Callout → CTBA
════════════════════════════════════════════════ */
.callout { border-radius: var(--radius); border-width: 1px; padding: .75rem 1rem; font-size: .825rem; }
.callout.primary { background: rgb(var(--primary-pale)); border-color: rgba(var(--primary),.25); color: rgb(var(--primary)); }
.callout.success { background: rgba(43,155,37,.08); border-color: rgba(43,155,37,.25); color: rgb(30,100,28); }
.callout.warning { background: rgb(var(--red-pale)); border-color: rgba(var(--warning),.3); color: rgb(var(--warning)); }
.callout.alert   { background: rgba(231,196,102,.15); border-color: rgba(231,196,102,.4); color: rgb(120,90,0); }

/* .notice-red / form-notice — 因色彩變數不同，分開定義 */
.form-notice.notice-warning {
  display: flex; align-items: center; gap: 8px;
  padding: .5rem .875rem; margin-bottom: 0;
  background: rgb(var(--red-pale));
  border-left: 3px solid rgba(var(--warning)/.5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .775rem; font-weight: 500; color: rgb(var(--warning));
}
.notice-red {
  display: flex; align-items: center; gap: 7px;
  padding: .55rem .875rem; margin-top: .75rem;
  background: rgb(var(--red-pale));
  border-left: 3px solid rgba(var(--warning)/.5);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: .75rem; font-weight: 500; color: rgb(var(--warning));
}
.form-notice.notice-info {
  background: rgb(var(--primary-pale));
  border-left: 3px solid rgba(var(--primary),.5);
  color: rgb(var(--primary));
}
.form-notice svg,.notice-red svg {
  width: 14px; height: 14px; flex-shrink: 0; margin-top: 2px;
  stroke: currentColor; fill: none; stroke-width: 2;
}

/* ════════════════════════════════════════════════
   4. 標籤 / 徽章 — Foundation Badge/Label
════════════════════════════════════════════════ */
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 7px;
  border-radius: 20px; font-size: .72rem; font-weight: 700; line-height: 1;
}
.badge.primary { background: rgb(var(--primary)); color: #fff; }
.badge.success { background: rgb(var(--success)); color: #fff; }
.badge.warning { background: rgb(var(--warning)); color: #fff; }
.count-badge {
  background: rgb(var(--primary)); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 20px; padding: 0 6px;
  border-radius: 20px; font-size: .7rem; font-weight: 700; vertical-align: middle;
}
.label { border-radius: 20px; font-size: .72rem; font-weight: 700; padding: 3px 10px; }
.label.primary  { background: rgb(var(--primary-pale)); color: rgb(var(--primary)); border: 1px solid rgba(var(--primary)/.2); }
.label.success  { background: rgba(43,155,37,.1); color: rgb(43,155,37); border: 1px solid rgba(43,155,37/.25); }
.label.warning  { background: rgb(var(--red-pale)); color: rgb(var(--warning)); border: 1px solid rgba(var(--warning)/.25); }
.label.secondary{ background: rgba(var(--black)/.06); color: rgba(var(--black),.55); border: 1px solid rgba(var(--black)/.15); }
.status-badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 5px; font-size: .72rem; font-weight: 700; line-height:1rem; }
/* ── 狀態 badge（共用一組，勿重複）── */
.badge-done    { background: rgba(var(--success)/.1);  color: rgb(var(--success)); border: 1px solid rgba(var(--success)/.5 ); }
.badge-pending { background: rgb(var(--red-pale)); color: rgb(var(--warning)); border: 1px solid rgba(var(--warning)/.25); }
.badge-ing     { background: rgb(var(--primary-pale)); color: rgb(var(--primary)); border: 1px solid rgba(var(--primary)/.2); }
.badge-wait    { background: rgba(var(--black)/.04); color: rgba(var(--black)/.55); border: 1px solid rgba(var(--black)/.12); }
.badge-cancel  { background: rgb(var(--red-pale)); color: rgb(var(--warning)); border: 1px solid rgba(var(--warning)/.25); }

/* ════════════════════════════════════════════════
   5. 卡片 — Foundation Card → CTBA .reg-card
════════════════════════════════════════════════ */
.card,.reg-card { background: rgb(var(--white)); border: 1px solid rgba(var(--black)/.08); border-radius: 5px; box-shadow: var(--shadow-md); overflow: hidden; }
.card-divider,.reg-header { padding: 1rem 1.4rem .875rem; border-bottom: 1px solid rgba(var(--black)/.08); }
.apply.reg-header{ display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;}
.card-section,.reg-body { padding: 1.1rem 1.4rem; }
.reg-title    { font-size: 1.2rem; font-weight: 700; color: rgb(var(--primary)); margin-bottom: 2px; }
.reg-title span{ color: rgb(var(--warning)); font-weight: normal; }
.reg-subtitle { font-size: .78rem; color: rgba(var(--black)/.55); margin: 0; display: flex; flex-direction: row;gap: 15px;}
.reg-subtitle strong{ color: rgba(var(--black)/.8) }
.reg-footer   { text-align: center; padding: .75rem 1.4rem 1rem; border-top: 1px solid rgba(var(--black)/.08); font-size: .9rem; color: rgba(var(--black)/.55); }
.reg-footer a { font-weight: 700; color: rgb(var(--warning)); text-decoration: none; }
.reg-footer a:hover { color: rgb(var(--red-bright)); }
.info-container { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; }
@media screen and (max-width: 768px) { 
  .info-container { grid-template-columns: 1fr !important; row-gap: 1.5rem; } 
  .reg-subtitle { flex-direction: column; gap: 4px; margin-top: 10px}
  .reg-subtitle span { display: block;}
}
.sub-section { margin-bottom: 1rem; padding: .875rem 1rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.08); border-radius: var(--radius); }
.sub-section:last-of-type { margin-bottom: 0; }
.sub-heading {
  font-size: .78rem; font-weight: 900; color: rgb(var(--primary)); letter-spacing: .05em;
  padding-bottom: 6px; margin-bottom: .75rem;
  border-bottom: 1.5px solid rgba(var(--black)/.10);
  position: relative; display: flex; align-items: center; gap: 8px;
}
.sub-heading::before { content: ''; position: absolute; bottom: -1.5px; left: 0; width: 28px; height: 1.5px; background: rgb(var(--warning)); border-radius: 2px; }
.sub-heading-sm { border: 1px solid rgba(var(--black)/.05); background: rgba(var(--white)/.5); border-radius: 3px; padding-left: 10px; font-size: .72rem; font-weight: 700; color: rgba(var(--black)/.55); margin-bottom: .5rem; }
.sub-heading-note { font-size: .7rem; font-weight: 400; color: rgba(var(--black)/.55); background: rgba(var(--primary-pale)); padding: 1px 7px; border-radius: 5px; margin-left: 2px; }
.sub-heading span{ font-weight: normal; color: rgba(var(--black)/.8);}
.section-heading {
  position: relative; font-size: .825rem; font-weight: 900; color: rgb(var(--primary)); letter-spacing: .05em;
  padding-bottom: 6px; margin-bottom: .875rem;
  border-bottom: 2px solid rgba(var(--black)/.10);
  display: flex; align-items: center; gap: 8px;
}
.section-heading::before { content: ''; position: absolute; bottom: -2px; left: 0; width: 32px; height: 2px; background: rgb(var(--warning)); border-radius: 2px; }

/* ════════════════════════════════════════════════
   6. Grid — Foundation Grid 補充
════════════════════════════════════════════════ */
.form-grid { display: grid; grid-template-columns: 1fr; gap: .75rem; }
.form-grid--body-skill { grid-template-columns: .6fr .6fr 0.6fr 0.6fr 2fr;}/*-- 身體與球技欄位寬度設定 --*/
@media (max-width: 640px) {.form-grid--body-skill { grid-template-columns: 1fr; }}
.grid-2 { grid-template-columns: 1fr 1fr; }
.grid-3 { grid-template-columns: 1fr 1fr 1fr; }
.grid-4 { grid-template-columns: repeat(4,1fr); }
.grid-5 { grid-template-columns: repeat(5,1fr); }
.grid-6 { grid-template-columns: repeat(6,1fr); }
.col-full { grid-column: 1 / -1; }
/* 平板：grid-5 改為 3 欄 */
@media (max-width: 768px) { .grid-5 { grid-template-columns: repeat(3,1fr); } }
/* 手機：單欄，col-span-3 強制滿版 */
@media (max-width: 640px) { .grid-4,.grid-5,.grid-6 { grid-template-columns: 1fr; } .col-span-3 { grid-column: 1 / -1; } }
@media (max-width: 580px) { .grid-2,.grid-3, .grid-6 { grid-template-columns: 1fr; } }
@media (max-width: 420px) { .grid-4,.grid-5 { grid-template-columns: 1fr; } }
.section-row { display: flex; gap: .875rem; margin-bottom: .875rem; }
.section-row .sub-section { flex: 1; margin-bottom: 0; }
@media (max-width: 768px) { .section-row { flex-direction: column; } }
.section-row.section-row-half .sub-section { flex: 1; }

/* ════════════════════════════════════════════════
   7. 頁面容器
════════════════════════════════════════════════ */
body.form-page {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  min-height: 100vh; padding: 2rem 1rem 3rem;
  background: linear-gradient(rgba(10,39,77,.72),rgba(10,39,77,.72)), url('../image/bg-baseball.jpg') center / cover no-repeat fixed;
}
body.form-page.center-layout { justify-content: center; }
.page-wrap { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: 1rem; animation: slideUp .4s ease both; }
.page-wrap.wide   { max-width: 1000px; }
.page-wrap.wider  { max-width: 1200px; }
.page-wrap.narrow { max-width: 480px; }
@keyframes slideUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }

/* ════════════════════════════════════════════════
   8. 球隊資訊卡
════════════════════════════════════════════════ */
.team-info-card { background: rgb(var(--white)); border-radius: 8px; overflow: hidden; box-shadow: var(--shadow-card); }
.team-info-header { display: flex; align-items: center; gap: 14px; padding: .875rem 1.4rem; background: rgb(var(--primary)); position: relative; overflow: hidden; }
.team-info-header::after { content: ''; position: absolute; top: 0; right: 0; width: 120px; height: 100%; background: repeating-linear-gradient(-45deg, transparent, transparent 5px, rgba(255,255,255,.04) 5px, rgba(255,255,255,.04) 10px); }
.team-logo { width: 80px; height: 80px; flex-shrink: 0; border-radius: 50%; border: 2px solid rgba(255,255,255,.3); background: rgb(var(--white)); display: flex; align-items: center; justify-content: center; overflow: hidden; z-index: 1; }
.team-info-title { z-index: 1; }
.team-info-title .team-name { font-size: 1.1rem; font-weight: 900; color: #fff; letter-spacing: .03em; line-height: 1.2; }
.team-info-title .team-meta { font-size: .75rem; color: rgba(255,255,255,.65); margin-top: 2px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.team-meta-sep { color: rgba(255,255,255,.3); }
.team-info-body { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid rgba(var(--black)/.08); }
@media (max-width: 600px) { .team-info-body { grid-template-columns: repeat(2,1fr); } }
.team-info-field { padding: .625rem 1.1rem; border-right: 1px solid rgba(var(--black)/.08); display: flex; flex-direction: column; gap: 2px; }
.team-info-field:last-child { border-right: none; }
.field-label { font-size: .68rem; font-weight: 700; color: rgba(var(--black)/.35); text-transform: uppercase; letter-spacing: .06em; }
.field-value { font-size: .825rem; font-weight: 700; color: rgb(var(--primary)); }

/* ════════════════════════════════════════════════
   9. 成功 Banner / 空白狀態
════════════════════════════════════════════════ */
.success-banner { display: flex; align-items: center; gap: 14px; padding: 1rem 1.4rem; background: rgba(43,155,37,.08); border: 1.5px solid rgba(43,155,37,.25); border-radius: 8px; box-shadow: var(--shadow-card); flex-wrap: wrap; margin-bottom: 1rem;}
.success-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--success)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.success-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.success-icon i{ color: white}
.success-text h2 { font-size: 1rem; font-weight: 900; color: rgb(30,100,28); margin-bottom: 2px; }
.success-text p  { font-size: .78rem; color: rgba(var(--black)/.55); margin: 0; }
.success-badge   { padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 700; background: rgb(var(--success)); color: #fff; white-space: nowrap; }
.empty-state { text-align: center; padding: 2.5rem; color: rgba(var(--black)/.35); font-size: .825rem; }
.empty-state svg { width: 36px; height: 36px; stroke: rgba(var(--black)/.2); fill: none; stroke-width: 1.5; margin: 0 auto .75rem; display: block; }

.pending-banner { display: flex; align-items: center; gap: 14px; padding: 1rem 1.4rem; background: rgba(var(--alert)/.1); border: 1.5px solid rgba(var(--alert)/.25); border-radius: 8px; box-shadow: var(--shadow-card); flex-wrap: wrap; margin-bottom: 1rem;}
.pending-icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--alert)); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); }
.pending-icon svg { width: 22px; height: 22px; stroke: #fff; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.pending-icon i{ color: white}
.pending-text h2 { font-size: 1rem; font-weight: 900; color: rgb(30,100,28); margin-bottom: 2px; }
.pending-text p  { font-size: .78rem; color: rgba(var(--black)/.55); margin: 0; }
.pending-badge   { padding: 4px 12px; border-radius: 20px; font-size: .72rem; font-weight: 700; background: rgb(var(--success)); color: #fff; white-space: nowrap; }

/* ════════════════════════════════════════════════
   10. 上傳控件
════════════════════════════════════════════════ */
input[type="file"].hidden-file { display: none; }
.upload-wrap { display: flex; flex-direction: column; width: 100%; max-width: 160px;}
.upload-row { display: flex; align-items: center; gap: .25rem; margin-bottom: .375rem; overflow: hidden; width: 100%;}
.upload-row .btn-upload { display: inline-flex !important; align-items: center; gap: .25rem; white-space: nowrap !important; flex-shrink: 0;}
.btn-upload { display: flex; align-items: center; gap: .25rem; white-space: nowrap !important; flex-shrink: 0; flex-wrap: nowrap; height: 34px; padding: 0 12px; background: rgb(var(--primary-pale)); border: 1.5px solid rgba(var(--primary)/.25); border-radius: var(--radius); cursor: pointer; font-size: .75rem; font-weight: 700; font-family: inherit; color: rgb(var(--primary)); transition: all var(--ease); flex-shrink: 0;}
.btn-upload:hover { background: rgba(var(--primary)/.12); }
.upload-item-label { font-size: .78rem; font-weight: 700; color: rgba(var(--primary)/.85); }
.upload-item-spec  { font-size: .67rem; color: rgba(var(--black)/.35); margin-top: -3px; }
.upload-filename   { font-size: .68rem; color: rgba(var(--black)/.55); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.file-info {
    display: flex; align-items: center; flex: 1; min-width: 0; gap: 8px; background: #f4f4f4; /* 可選：加個淺底色區分區塊 */
    padding: 2px 4px; border-radius: 4px;
}
.file-info .btn-delete {
    flex-shrink: 0; /* 絕對不能被擠壓 */ width: 20px; height: 20px; 
    display: flex; /* 改為 flex 以確保內容居中 */ align-items: center; justify-content: center; cursor: pointer;
    background-color: rgba(var(--black)/.3); color: white; border: none; border-radius: 50%; transition: background-color 0.2s ease;
}
/* ── 預覽圖片區 ── */
.upload-preview { border: 1.5px dashed rgba(0,0,0,.15); border-radius: 6px; margin-bottom: .375rem; width: 160px; height: 120px; /* 可根據需求調整高度 */ overflow: hidden; position: relative; display: flex; /* 確保圖片載入前內容置中 */align-items: center; justify-content: center;}
.upload-preview img {  width: 100%; height: 100%; object-fit: cover; /* 確保圖片填滿且比例正確 */ display: block;}
/* 刪除按鈕樣式 (右上角 X) */
.upload-preview .btn-delete {
    position: absolute; top: 10px; right: 10px; z-index: 10;
    width: 20px; height: 20px; padding: 0; border: none; border-radius: 50%;
    background-color: rgba(var(--black)/.35); color: white; font-size: 15px; line-height: 1; cursor: pointer;
    display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease;
    /* 移除 button 預設樣式 */
    appearance: none; -webkit-appearance: none;

}
.upload-preview .btn-delete:hover, .file-info .btn-delete:hover { background-color: rgba(var(--warning)/0.7); /* 滑鼠移入變紅色 */}
/*.upload-preview .btn-delete { opacity: 0; transition: 0.2s; }
.upload-preview:hover .btn-delete { opacity: 1; }*/

/* .photo-preview：單一定義（刪除 ctba-forms 的重複版）*/
.photo-preview { display: none; width: 80px; height: 52px; border-radius: var(--radius); border: 1px solid rgba(var(--black)/.10); overflow: hidden; margin-top: 2px; }
.photo-preview img { width: 100%; height: 100%; object-fit: cover; display: block; }
.photo-preview.has-img { display: block; }
.upload-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 1.5rem; background: rgba(var(--black)/.02); border: 2px dashed rgba(var(--black)/.18); border-radius: 8px; cursor: pointer; transition: all var(--ease); text-align: center; }
.upload-zone:hover,.upload-zone.dragover { border-color: rgba(var(--primary),.5); background: rgb(var(--primary-pale)); }
.upload-zone svg { width: 28px; height: 28px; stroke: rgba(var(--black)/.2); fill: none; stroke-width: 1.5; }
.upload-zone:hover svg { stroke: rgb(var(--primary)); }
.upload-zone-label { font-size: .825rem; font-weight: 700; color: rgba(var(--black)/.55); }
.upload-zone:hover .upload-zone-label { color: rgb(var(--primary)); }
.upload-zone-hint { font-size: .7rem; color: rgba(var(--black)/.35); }
.upload-file-list { display: flex; flex-direction: column; gap: 6px; margin-top: .75rem; }
.upload-file-item { display: flex; align-items: center; gap: 8px; padding: .5rem .75rem; background: rgb(var(--white)); border: 1px solid rgba(var(--black)/.10); border-radius: var(--radius); font-size: .78rem; }
.upload-file-icon { width: 28px; height: 28px; border-radius: 4px; background: rgb(var(--primary-pale)); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.upload-file-icon svg { width: 14px; height: 14px; stroke: rgb(var(--primary)); fill: none; stroke-width: 2; }
.upload-file-name { flex: 1; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-file-size { font-size: .7rem; color: rgba(var(--black)/.35); flex-shrink: 0; }
.upload-file-del { width: 22px; height: 22px; padding: 0; background: none; border: none; cursor: pointer; color: rgba(var(--black)/.35); display: flex; align-items: center; justify-content: center; border-radius: 3px; transition: color var(--ease), background var(--ease); }
.upload-file-del:hover { color: rgb(var(--warning)); background: rgb(var(--red-pale)); }
.upload-file-del svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.5; }
/* .upload-count-badge：單一定義（刪除 ctba-entry 的重複版）*/
.upload-count-badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.upload-count-badge.has-files { background: rgba(43,155,37,.1); color: rgb(43,155,37); border: 1px solid rgba(43,155,37,.25); }
.upload-count-badge.no-files  { background: rgba(var(--black)/.04); color: rgba(var(--black)/.55); border: 1px solid rgba(var(--black)/.10); }
.upload-count-badge svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2.5; }
/*-- 下載文件 --*/
.dl-file{ border: 1.5px dashed rgba(0,0,0,.15); border-radius: 6px; background: rgba(0,0,0,.02);margin-bottom: .375rem; padding: 8px; line-height: .8;} 
.dl-file .icon{ width:16px; } 
.dl-file a{ font-size: 13px;} 
.dl-file.hidden-file{ display: none;}

/* ════════════════════════════════════════════════
   11. 人員欄 / Radio / Checkbox
════════════════════════════════════════════════ */
.person-cell { display: flex; align-items: center; gap: 8px; min-width: 90px }
.person-avatar-wrap { position: relative; flex-shrink: 0; }
.person-avatar-wrap .avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--black)/.12); display: block; }
/*.col-name .person-name {
    flex: 1;
    min-width: 0;      
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}*/
.avatar-ph { width: 36px; height: 36px; border-radius: 50%; background: rgba(var(--black)/.04); border: 2px dashed rgba(var(--black)/.18); display: flex; align-items: center; justify-content: center; }
.avatar-ph svg { width: 16px; height: 16px; stroke: rgba(var(--black)/.25); fill: none; stroke-width: 1.5; }
.avatar-reupload { position: absolute; inset: 0; border-radius: 50%; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background var(--ease); opacity: 0; }
.person-avatar-wrap:hover .avatar-reupload { background: rgba(0,0,0,.5); opacity: 1; }
.avatar-reupload svg { width: 13px; height: 13px; stroke: #fff; fill: none; stroke-width: 2.5; }
.avatar-reupload-tip { position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.75); color: #fff; font-size: .6rem; white-space: nowrap; padding: 2px 5px; border-radius: 3px; opacity: 0; pointer-events: none; transition: opacity var(--ease); }
.person-avatar-wrap:hover .avatar-reupload-tip { opacity: 1; }
.person-name { font-weight: 700; font-size: .825rem; }
.avatar-sm { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(var(--black)/.12); display: block; }
.avatar-ph-sm { width: 32px; height: 32px; border-radius: 50%; background: rgba(var(--black)/.04); border: 2px dashed rgba(var(--black)/.18); display: flex; align-items: center; justify-content: center; }
.avatar-ph-sm svg { width: 14px; height: 14px; stroke: rgba(var(--black)/.25); fill: none; stroke-width: 1.5; }
.btn-del { width: 28px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; color: rgba(var(--black)/.5); cursor: pointer; transition: all var(--ease); }
.btn-del:hover { color: rgb(var(--warning));}
.btn-del svg { display: block; width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;}
.btn-del i{ font-size: 1rem }
.radio-group,.role-group,.radio-inline,.check-inline { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1rem; margin-top: 0; }
.radio-item,.role-item {
  display: inline-flex !important; align-items: center !important; gap: 6px;
  padding: 12px 14px;
  border: 1px solid rgba(var(--black)/.15); border-radius: var(--radius); background: rgb(var(--white));
  cursor: pointer; user-select: none; font-size: .9rem; font-weight: 500; color: rgba(var(--black)/.8); line-height: 1.2;
  margin: 0 !important; transition: border-color var(--ease), background var(--ease), color var(--ease);
}
.radio-item:hover,.role-item:hover { border: 1px solid rgba(var(--warning)/.5); background: rgba(var(--warning)/.04); color: rgb(var(--warning)); }
.radio-item.is-checked, .check-item.is-checked,.role-item.is-checked { border: 1px solid rgba(var(--warning)/.5); background: rgba(var(--warning)/.03); color: rgb(var(--warning)); font-weight: 700; }
.radio-item input[type="radio"],.role-item input[type="radio"],.radio-item input[type="checkbox"], .role-item  input[type="checkbox"]  {
  -webkit-appearance: auto !important; appearance: auto !important;
  width: 16px !important; height: 16px !important; min-height: unset !important;
  margin: 0 !important; padding: 0 !important; border: none !important;
  box-shadow: none !important; background: transparent !important;
  vertical-align: middle !important; flex-shrink: 0; accent-color: rgb(var(--warning)); cursor: pointer;
}

/* ════════════════════════════════════════════════
   12. 雜項工具
════════════════════════════════════════════════ */
.school-combo { display: flex; flex-direction: row; gap: .5rem; }
.school-combo .city-select{ width: 80px;}
.form-cards-wrap { display: flex; flex-direction: column; gap: 1rem; width: 100%; padding: 1.5rem 0 2rem; }
.form-cards-wrap .page-wrap { max-width: 100%; animation: none; }
.table-scroll { overflow-x: auto; }

/* ════════════════════════════════════════════════
   ── TABLES ──
   13a. 共用基底（.edit-table 與 .conf-table 相同部分）
════════════════════════════════════════════════ */
.edit-table-wrap,.conf-table-wrap { overflow-x: auto; }
.edit-table, .conf-table {
  width: 100%; border-collapse: collapse; font-size: 0.78rem;
}
.edit-table thead tr, .conf-table thead tr {
  background: linear-gradient(180deg, #fff 5%, #fafafa 10%, #f5f5f5 90%, #dcdcdc 100%);
}
.edit-table thead th, .conf-table thead th {
  text-align: center;
  font-size: 0.7rem; font-weight: 700; color: rgba(var(--black)/.8);
  white-space: nowrap; letter-spacing: .03em; border: 1px solid rgba(var(--black)/.1);
}
.edit-table thead th:last-child,
.conf-table thead th:last-child { border-right: none; }
.edit-table tbody tr,
.conf-table tbody tr {
  border-bottom: 1px solid rgba(var(--black)/.08);
  background: rgb(var(--white)); transition: background var(--ease);
}
.edit-table tbody tr:hover,
.conf-table tbody tr:hover { background: rgba(var(--warning)/.05); cursor: pointer;}
.edit-table tbody tr:last-child,
.conf-table tbody tr:last-child { border-bottom: none; }
.edit-table td, .conf-table td { vertical-align: middle; white-space: nowrap;  border: 1px solid rgba(var(--black)/.1);}
.edit-table td.col-no, .conf-table td.col-no { text-align: center; font-weight: 700; color: rgba(var(--black),.4); width: 36px; }

/* 13b. .edit-table */
.edit-table thead tr { border-top: 1px solid rgba(var(--primary)/.2); border-bottom: 1px solid rgba(var(--white)/1); }
.edit-table thead th { padding: .3rem .7rem .2rem; border-right: 1px solid rgba(var(--black)/.3);}
.edit-table td { padding: .4rem .6rem; }
.edit-table th.col-del,.edit-table td.col-del { text-align: center; width: 36px; }

/* 13c. .conf-table*/
.conf-table thead tr { border-bottom: 1px solid rgba(var(--primary)/.5); }
.conf-table thead th { padding: .3rem .7rem; border-right: 1px solid rgba(var(--black)/.05); }
.conf-table tbody tr:nth-child(even) { background: rgba(var(--black)/.02); }
.conf-table td { padding: .4rem .7rem; text-align: center; }
.conf-table td.col-num { text-align: center; font-weight: 900; color: rgb(var(--primary)); }
.conf-table td.col-name{ text-align: left;  font-weight: 900;}
.col-expand { width: 34px; text-align: center; }
.col-no  { width: 36px; text-align: center; }
.col-num { width: 50px; text-align: center; }
.col-name{ min-width: 120px; text-align: left;}
.col-gender { width: 50px; text-align: center; }
.col-act { width: 60px; text-align: center; }
.col-hide-print { width: 42px; }
.pos-tag { display: inline-block; padding: 3px 7px 2px; line-height: 1.25em; background: rgba(var(--primary)/.1); color: rgb(var(--primary)); border-radius: 3px; font-size: .68rem; font-weight: 900; }

/* ── 表格內輔助 ── */
.tbl-input { height: 30px; padding: 0 7px; font-size: .8rem; font-family: inherit; color: rgba(var(--black)/.8); background: transparent; border: 1.5px solid rgba(var(--black)/.15); border-radius: 3px; outline: none; transition: border-color var(--ease), background var(--ease); min-width: 50px; width: 100%; }
.tbl-input:hover  { border-color: rgba(var(--black),.20); background: rgb(var(--white)); }
.tbl-input:focus  { border-color: rgba(var(--primary),.6); background: rgb(var(--white)); box-shadow: 0 0 0 2px rgba(var(--primary),.08); }
.tbl-select { height: 30px; padding: 0 22px 0 7px; font-size: .8rem; font-family: inherit; color: rgb(var(--black)); background: transparent; border: 1.5px solid rgba(var(--black)/.15); border-radius: 3px; outline: none; -webkit-appearance: none; appearance: none; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a274d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 11px; transition: border-color var(--ease), background var(--ease); }
.tbl-select:hover { border-color: rgba(var(--black),.20); background-color: rgb(var(--white)); }
.tbl-select:focus { border-color: rgba(var(--primary),.6); background-color: rgb(var(--white)); box-shadow: 0 0 0 2px rgba(var(--primary),.08); }
.btn-del-row { width: 32px; height: 32px; padding: 0; display: inline-flex; align-items: center; justify-content: center; background: rgb(var(--red-pale)); border: 1.5px solid rgba(var(--warning),.2); border-radius: var(--radius); color: rgb(var(--warning)); cursor: pointer; transition: all var(--ease); }
.btn-del-row:hover { background: rgba(var(--warning)/.12); border-color: rgba(var(--warning)/.45); }
.btn-del-row svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1; }
.table-header { display: flex; align-items: center; gap: 8px; margin-bottom: .75rem; }
.table-header .section-heading { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.table-header .section-heading::before { display: none; }
.btn-add-row { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; background: transparent; border: 1.5px solid rgba(var(--primary),.3); border-radius: var(--radius); font-size: .72rem; font-weight: 700; font-family: inherit; color: rgb(var(--primary)); cursor: pointer; transition: all var(--ease); margin-left: auto; }
.btn-add-row svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.btn-add-row:hover { background: rgb(var(--primary-pale)); border-color: rgba(var(--primary),.5); }

/* ── 14. .member-table ── */
.member-table-wrap { overflow-x: auto; }
.member-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.member-table thead tr { background: rgb(var(--white)); border-bottom: 2px solid rgba(var(--primary),.15); }
.member-table thead th { padding: .55rem .75rem; text-align: left; font-size: .72rem; font-weight: 700; color: rgba(var(--black),.6); white-space: nowrap; letter-spacing: .03em; }
.member-table thead th.col-no     { width: 44px; text-align: center; }
.member-table thead th.col-expand { width: 40px; text-align: center; }
.member-table thead th.col-act    { width: 60px; text-align: center; }
.member-table tbody tr { border-bottom: 1px solid rgba(var(--black)/.08); transition: background var(--ease); background: rgb(var(--white)); }
.member-table tbody tr:not(.expand-row):hover { background: rgb(var(--primary-pale)); }
.member-table tbody tr:last-child:not(.expand-row) { border-bottom: none; }
.member-table td { padding: .5rem .75rem; vertical-align: middle; white-space: nowrap; }
.member-table td.col-no     { text-align: center; font-weight: 700; color: rgba(var(--black),.45); }
.member-table td.col-expand,.member-table td.col-act { text-align: center; }
.member-table .form-control { height: 34px; font-size: .8rem; padding: 0 8px; box-shadow: none; border: 1.5px solid transparent; background: transparent; }
.member-table .form-control:hover { border-color: rgba(var(--black)/.20); background: rgb(var(--white)); }
.member-table .form-control:focus { border-color: rgba(var(--primary),.5); background: rgb(var(--white)); box-shadow: 0 0 0 2px rgba(var(--primary),.08); }

/* ── 15. .player-table ── */
.player-table-wrap { width: 100%; overflow-x: auto; }
.player-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.player-table thead tr { background: rgba(var(--black)/.04); border-bottom: 2px solid rgba(var(--black)/.10); }
.player-table thead th { padding: .4rem .6rem; text-align: left; font-size: .7rem; font-weight: 700; color: rgba(var(--black)/.55); white-space: nowrap; }
.player-table thead th.col-expand { width: 34px; text-align: center; }
.player-table thead th.col-no     { width: 34px; text-align: center; }
.player-table thead th.col-num    { width: 46px; text-align: center; }
.player-table thead th.col-act    { width: 38px; text-align: center; }
.player-table tbody tr { border-bottom: 1px solid rgba(var(--black)/.10); transition: background var(--ease); }
.player-table tbody tr:not(.expand-row):hover { background: rgba(var(--black)/.02); }
.player-table tbody tr:last-child:not(.expand-row) { border-bottom: none; }
.player-table td { padding: .35rem .55rem; vertical-align: middle; white-space: nowrap; }
.player-table td.col-no{ text-align: center;}
.player-table td.col-expand,.player-table td.col-act { text-align: center; }
.player-table .form-control { height: 30px; font-size: .775rem; padding: 0 6px; box-shadow: none; border-color: transparent; background: transparent; }
.player-table .form-control:hover { border-color: rgba(var(--black)/.20); background: rgb(var(--white)); }
.player-table .form-control:focus { border-color: rgba(var(--primary),.6); background: rgb(var(--white)); box-shadow: 0 0 0 2px rgba(var(--primary),.08); }
.player-table input[type="date"].form-control { padding: 0 4px; }
.player-table select.form-control { padding-right: 22px; background-size: 11px; background-position: right 4px center; }
.player-table tr.is-expanded .expand-btn { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: white; }
.player-table tr.is-expanded .expand-btn svg { transform: rotate(180deg); }

/* ── 16. expand-btn ── */
.expand-btn { width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--primary),.1); border: 1.5px solid rgba(var(--primary),.2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: all var(--ease); color: rgb(var(--primary)); font-family: inherit; padding: 0; }
.expand-btn i { display: inline-block; transition: transform 0.3s ease;}
.expand-btn.active i { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; transition: transform var(--ease); transform: rotate(180deg); }
.expand-btn:hover { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: white; }
.member-table tr.is-expanded .expand-btn { background: rgb(var(--primary)); border-color: rgb(var(--primary)); color: white; }
.expand-row          { display: none; opacity: 0; transition: opacity 0.4s ease; background: rgba(var(--black)/.1);}
.expand-row.show     { display: table-row; opacity: 1;}
.expand-inner { display: flex; /*flex-wrap: wrap;*/ align-items: stretch; border-top: 0px solid rgba(var(--primary)/.12); overflow: hidden; max-height: 0; transition: max-height .4s ease-in-out, padding .4s ease-in-out; padding: 0 15px; }
.expand-row.show .expand-inner { max-height: 1200px; padding: 10px 15px; }
.player-table .expand-row td,.edit-table .expand-row td,.member-table .expand-row td { padding: 0 !important; background: rgba(var(--black)/.03); border-bottom: 2px solid rgba(var(--primary)/.15); }
.expand-row td{ text-align: left;padding: 0;}
.expand-content-wrapper { padding: 1rem; overflow: hidden;}

/* ── 17. expand panel（球員展開）── */
.expand-panel { display: flex; flex-direction: column; padding: .75rem 1rem; flex: 1;}
.expand-panel + .expand-panel { border-left: 1px solid rgba(var(--primary)/.12); }
.expand-panel-title { font-size: .67rem; font-weight: 900; color: rgb(var(--primary)); letter-spacing: .05em; padding-bottom: 6px; margin-bottom: 8px; border-bottom: 1px solid rgba(var(--primary),.12); display: flex; align-items: center; gap: 5px; }
.expand-panel-title svg { width: 12px; height: 12px; stroke: rgb(var(--warning)); fill: none; stroke-width: 2; }
.expand-panel-fields { display: flex; flex-direction: column; gap: 8px; }
.expand-sub-row { display: flex; gap: 6px; }
.expand-sub-row .expand-field { flex: 1; }
.expand-field { display: flex; flex-direction: column; gap: 3px; }
.expand-field.w-sm { min-width: 80px; } .expand-field.w-md { min-width: 110px; } .expand-field.w-lg { min-width: 140px; }
.expand-field-label { font-size: .67rem; font-weight: 700; color: rgba(var(--black)/.35); text-transform: uppercase; letter-spacing: .04em; }
.expand-field .form-control { /*height: 30px; font-size: .78rem; padding: 0 8px;*/ box-shadow: none; border-color: rgba(var(--black)/.12); }
.expand-field .form-control:focus { border-color: rgba(var(--primary),.5); box-shadow: 0 0 0 2px rgba(var(--primary),.08); }

/* ── 18. exp-panel（人員展開）── */
.exp-panel { display: flex; flex-direction: column; gap: 20px; width: 100%; min-width: 0; }
.exp-fields { width: 100%; }
.exp-fields-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.exp-field { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.exp-field-sm { flex: 1 1 100px; } .exp-field-md { flex: 1 1 120px; } .exp-field-full { flex: 1 1 100%; }
@media (max-width: 768px) { .exp-field { min-width: calc(33.33% - 8px); } }
.exp-label { font-size: .7rem; font-weight: 700; color: rgba(var(--black),.5); letter-spacing: .03em; display: block; white-space: nowrap; }
.exp-ctrl { height: 36px; font-size: .8rem; padding: 0 9px; border: 1.5px solid rgba(var(--black),.18); background: rgb(var(--white)); box-shadow: none; border-radius: var(--radius); width: 100%; font-family: inherit; color: rgb(var(--black)); }
.exp-ctrl:hover { border-color: rgba(var(--primary),.4); }
.exp-ctrl:focus { border-color: rgba(var(--primary),.6); box-shadow: 0 0 0 2px rgba(var(--primary),.08); outline: none; }
select.exp-ctrl { -webkit-appearance: none; appearance: none; padding-right: 26px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a274d' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 7px center; background-size: 11px; cursor: pointer; }
.exp-photos { display: grid; grid-template-columns: repeat(6,1fr); gap: 12px; padding-top: 15px; border-top: 1px solid #eee; width: 100%; }
.exp-photo-item { display: flex; flex-direction: column; align-items: center; width: 100%; }
.exp-photo-box { width: 100%; aspect-ratio: 4/3; background: #f8f9fa; border: 1px dashed #ccc; border-radius: 4px; display: flex; justify-content: center; align-items: center; margin-bottom: 8px; }
.exp-photo-box svg { width: 30%; stroke: #aaa; }
@media (max-width: 992px) { .exp-photos { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 480px) { .exp-field { min-width: calc(50% - 6px); flex: 1 1 calc(50% - 6px); } .exp-photos { grid-template-columns: repeat(4,1fr); gap: 10px; } .exp-label { font-size: 14px; } }
.expand-upload-btn { display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; background: rgba(var(--primary)/.2); border: 1.5px solid rgba(var(--primary),.25); border-radius: var(--radius); cursor: pointer; font-size: .72rem; font-weight: 700; font-family: inherit; color: rgb(var(--primary)); transition: all var(--ease); white-space: nowrap; }
.expand-upload-btn svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; }
.expand-upload-btn:hover { background: rgba(var(--white)/.8); border-color: rgba(var(--primary),.4); }
.col-person { min-width: 110px; } .gender { min-width: 60px; }

/* ── 19. cert-grid（人員教練證）── */
.cert-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: .5rem .875rem; }
@media (max-width: 600px) { .cert-grid { grid-template-columns: 1fr; } }
.cert-divider { height: 1px; background: rgba(var(--black),.10); margin: .875rem 0; }
.cert-upload-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
@media (max-width: 480px) { .cert-upload-row { grid-template-columns: 1fr; } }
.cert-upload-item { display: flex; flex-direction: column; gap: .5rem; padding-right: 1.25rem; }
.cert-upload-item:last-child { padding-right: 0; padding-left: 1.25rem; border-left: 1px solid rgba(var(--black),.10); }
@media (max-width: 480px) { .cert-upload-item:last-child { padding-left: 0; border-left: none; padding-top: .875rem; border-top: 1px solid rgba(var(--black),.10); } }
.cert-upload-meta   { display: flex; align-items: baseline; gap: 7px; }
.cert-upload-label  { font-size: .8rem; font-weight: 700; color: rgba(var(--primary),.85); }
.cert-upload-spec   { font-size: .67rem; color: rgba(var(--black),.35); }
.cert-upload-body   { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; }
.cert-preview       { width: 80px !important; height: 50px !important; border-radius: 4px; flex-shrink: 0; }

/* ════════════════════════════════════════════════
    20. 登入卡片
════════════════════════════════════════════════ */
.login-card { width: 100%; max-width: 440px; flex: none; animation: slideUp .45s ease both; }
.login-card .reg-card { box-shadow: var(--shadow-login); }
.login-logo-wrap { display: flex; flex-direction: column; align-items: center; padding: 1.4rem 1.5rem 1rem; border-bottom: 1px solid rgba(var(--black)/.10); }
.login-logo { width: 60px; height: 60px; border-radius: 50%; border: 2px solid rgba(var(--black)/.10); background: rgb(var(--white)); display: flex; align-items: center; justify-content: center; margin-bottom: .75rem; box-shadow: var(--shadow-md); }
.login-title    { font-size: 1.2rem; font-weight: 900; color: rgb(var(--primary)); letter-spacing: .04em; margin-bottom: 3px; }
.login-subtitle { font-size: .78rem; color: rgba(var(--black)/.55); text-align: center; line-height: 1.5; }
.role-label { font-size: .8rem; font-weight: 700; color: rgba(var(--primary),.85); margin-bottom: 6px; display: block; }
.login-aux { display: flex; align-items: center; justify-content: space-between; margin: .5rem 0 1.1rem; }
.remember-label { display: flex; align-items: center; gap: 7px; font-size: .825rem; color: rgba(var(--black)/.55); cursor: pointer; user-select: none; line-height: 1; }
.remember-label input { width: 15px; height: 15px; accent-color: rgb(var(--warning)); cursor: pointer; }
.remember-label input[type="checkbox"] { margin: 0; display: block;}
.link-forgot { font-size: .825rem; font-weight: 700; color: rgb(var(--warning)); text-decoration: none; transition: color var(--ease); }
.link-forgot:hover { color: rgb(var(--red-bright)); }
.btn-login { width: 100%; height: 50px; display: flex; align-items: center; justify-content: center; gap: 8px; font-family: inherit; font-size: .9rem; font-weight: 700; letter-spacing: .06em; border: none; border-radius: var(--radius); cursor: pointer; background: rgb(var(--primary)); color: white; box-shadow: 0 4px 14px rgba(var(--primary),.28); transition: background var(--ease), box-shadow var(--ease), transform var(--ease); }
.btn-login svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.btn-login:hover { background: rgb(var(--primary-mid)); box-shadow: 0 6px 20px rgba(var(--primary),.35); transform: translateY(-1px); }
.btn-login:active { transform: translateY(0); }
.btn-login:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.step-dots { display: flex; align-items: center; justify-content: center; gap: 6px; margin-bottom: 1.25rem; }
.step-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(var(--black)/.20); transition: all var(--ease); }
.step-dot.active { width: 22px; border-radius: 4px; background: rgb(var(--primary)); }
.link-back { display: inline-flex; align-items: center; gap: 5px; font-size: .825rem; font-weight: 700; color: rgb(var(--warning)); text-decoration: none; transition: color var(--ease); }
.link-back svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.link-back:hover { color: rgb(var(--red-bright)); }
.alert-success { display: none; align-items: flex-start; gap: 10px; padding: .75rem 1rem; margin-bottom: 1.1rem; background: rgba(43,155,37,.07); border: 1px solid rgba(43,155,37,.3); border-radius: var(--radius); font-size: .825rem; font-weight: 500; color: rgb(30,100,28); }
.alert-success.show { display: flex; }
.alert-success svg { width: 16px; height: 16px; stroke: rgb(43,155,37); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }
.pwd-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; align-items: start; }
@media (max-width: 560px) { .pwd-row { grid-template-columns: 1fr; } }
.pwd-row .form-hint,.pwd-row .form-error { min-height: 1.2rem; }
/* .acct-notice：單一定義（刪除 ctba-forms 內的重複版）*/
.acct-notice { display: flex; align-items: flex-start; gap: 7px; padding: .45rem .875rem; margin-bottom: .875rem; background: rgb(var(--red-pale)); border-left: 3px solid rgba(var(--warning),.5); border-radius: 0 var(--radius) var(--radius) 0; font-size: .75rem; font-weight: 500; color: rgb(var(--warning)); }
.acct-notice svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }

/* ── 21. 上傳 Grid ── */
.upload-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .625rem; width: 100%; max-width: 1500px; margin: 0 auto;}
.upload-grid.col-2 { grid-template-columns: repeat(2,auto); justify-content: flex-start;}
.upload-grid.col-4 { grid-template-columns: repeat(4,auto); justify-content: flex-start;}
.upload-grid--wide-last { grid-template-columns: 2fr 2fr 3fr; }
@media (max-width: 900px) { 
  .upload-grid { grid-template-columns: repeat(4,1fr); } 
  .upload-grid.col-2 { grid-template-columns: repeat(2,auto); justify-content: flex-start;}
  .upload-grid.col-4 { grid-template-columns: repeat(4,auto); justify-content: flex-start;}
  .upload-grid--wide-last { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { 
  .upload-grid { grid-template-columns: repeat(1,1fr);} 
  .upload-grid.col-2 { grid-template-columns: repeat(2,auto); justify-content: flex-start; }
  .upload-grid.col-4 { grid-template-columns: repeat(4,auto); justify-content: flex-start;}
  .upload-grid--wide-last { grid-template-columns: 1fr; }
}
.upload-grid .upload-item { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px;}

/* ── 22. 學員專區 Tab ── */
.student-nav { background: rgb(var(--white)); border-radius: 8px 8px 0 0; box-shadow: var(--shadow-card); display: flex; overflow: hidden; border-bottom: 2px solid rgb(var(--primary-pale)); }
.student-nav-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: .7rem .5rem; text-decoration: none; font-size: .75rem; font-weight: 700; color: rgba(var(--black)/.55); border-right: 1px solid rgba(var(--black)/.10); position: relative; cursor: pointer; background: none; border-top: none; border-bottom: none; border-left: none; font-family: inherit; transition: background var(--ease), color var(--ease); }
.student-nav-item:last-child { border-right: none; }
.student-nav-item:hover  { background: rgba(var(--black)/.02); color: rgb(var(--primary)); }
.student-nav-item.active { color: rgb(var(--primary)); background: rgb(var(--primary-pale)); }
.student-nav-item.active::after { content: ''; position: absolute; bottom: -2px; left: 0; right: 0; height: 2px; background: rgb(var(--warning)); }
@media (max-width: 480px) { .student-nav-item { font-size: .65rem; padding: .6rem .25rem; } }
.student-card { background: rgb(var(--white)); border-radius: 0 0 8px 8px; box-shadow: var(--shadow-card); overflow: hidden; }
.student-card-header  { padding: 1.1rem 1.5rem 1rem; border-bottom: 1px solid rgba(var(--black)/.10); }
.student-card-title   { font-size: .95rem; font-weight: 900; color: rgb(var(--primary)); margin-bottom: 2px; }
.student-card-subtitle{ font-size: .75rem; color: rgba(var(--black)/.55); }
.student-card-body    { padding: 1.25rem 1.5rem; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ── 23. 統計卡 / 時間軸（學習歷程）── */
.stat-row { display: grid; grid-template-columns: repeat(4,1fr); gap: .75rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .stat-row { grid-template-columns: repeat(2,1fr); } }
.stat-card { background: rgb(var(--white)); border: 1px solid rgba(var(--black)/.10); border-radius: 8px; padding: .875rem 1rem; text-align: center; box-shadow: var(--shadow-sm); }
.stat-num   { font-size: 1.75rem; font-weight: 900; line-height: 1.1; margin-bottom: 4px; }
.stat-label { font-size: .72rem; font-weight: 700; color: rgba(var(--black)/.45); letter-spacing: .03em; }
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 20px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 8px; bottom: 8px; width: 1.5px; background: rgba(var(--black)/.12); }
.timeline-item { position: relative; padding: .75rem 0 .75rem 1.25rem; border-bottom: 1px solid rgba(var(--black)/.06); }
.timeline-item:last-child { border-bottom: none; }
.timeline-dot { position: absolute; left: -16px; top: 1.05rem; width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(var(--black)/.20); background: rgb(var(--white)); }
.timeline-dot.done    { background: rgb(var(--success)); border-color: rgb(var(--success)); }
.timeline-dot.ing     { background: rgb(var(--primary)); border-color: rgb(var(--primary)); }
.timeline-dot.pending { background: rgb(var(--white)); border-color: rgba(var(--black)/.25); }
.timeline-date   { font-size: .7rem; color: rgba(var(--black)/.4); margin-bottom: 3px; }
.timeline-title  { font-size: .875rem; font-weight: 700; color: rgba(var(--black)/.85); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 3px; }
.timeline-badge  { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 20px; font-size: .68rem; font-weight: 700; }
.timeline-desc   { font-size: .75rem; color: rgba(var(--black)/.5); line-height: 1.5; }
.timeline-credit { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 2px 8px; background: rgb(var(--primary-pale)); border-radius: 20px; font-size: .68rem; font-weight: 700; color: rgb(var(--primary)); }

/* ── 24. 報名資料卡 / 申請補換發 ── */
.entry-list { display: flex; flex-direction: column; gap: .625rem; }
.entry-card { display: flex; align-items: center; gap: 12px; padding: .75rem 1rem; background: rgb(var(--white)); border: 1px solid rgba(var(--black)/.10); border-radius: 8px; box-shadow: var(--shadow-sm); transition: box-shadow var(--ease); }
.entry-card:hover { box-shadow: var(--shadow-md); }
.entry-card-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius); background: rgb(var(--primary-pale)); display: flex; align-items: center; justify-content: center; }
.entry-card-icon svg { width: 18px; height: 18px; stroke: rgb(var(--primary)); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.entry-card-info    { flex: 1; min-width: 0; }
.entry-card-title   { font-size: .875rem; font-weight: 700; color: rgba(var(--black)/.85); margin-bottom: 3px; }
.entry-card-meta    { font-size: .72rem; color: rgba(var(--black)/.45); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-card-status  { flex-shrink: 0; }
.apply-type-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .75rem; margin-bottom: 0; }
@media (max-width: 480px) { .apply-type-grid { grid-template-columns: 1fr; } }
.apply-type-btn { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 1rem .75rem; background: rgb(var(--white)); border: 2px solid rgba(var(--black)/.12); border-radius: 8px; cursor: pointer; font-family: inherit; transition: all var(--ease); text-align: center; }
.apply-type-btn:hover { border-color: rgba(var(--primary),.4); background: rgb(var(--primary-pale)); }
.apply-type-btn.is-selected { border-color: rgb(var(--primary)); background: rgb(var(--primary-pale)); }
.apply-type-btn .aicon { width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--primary),.08); display: flex; align-items: center; justify-content: center; }
.apply-type-btn.is-selected .aicon { background: rgb(var(--primary)); }
.apply-type-btn .aicon svg { width: 20px; height: 20px; stroke: rgb(var(--primary)); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.apply-type-btn.is-selected .aicon svg { stroke: white; }
.apply-type-btn .aname { font-size: .875rem; font-weight: 700; color: rgba(var(--black)/.8); }
.apply-type-btn .adesc { font-size: .7rem; color: rgba(var(--black)/.4); }
.apply-type-btn.is-selected .aname { color: rgb(var(--primary)); }
.apply-form { display: none; }
.apply-form.show { display: block; }

/* ── 25. 講習報名 ── */
.ws-info-card { background: rgb(var(--primary-pale)); border: 1.5px solid rgba(var(--primary),.2); border-radius: 8px; padding: 1rem 1.1rem; }
.ws-info-title { font-size: .9rem; font-weight: 900; color: rgb(var(--primary)); margin-bottom: .75rem; padding-bottom: .5rem; border-bottom: 1.5px solid rgba(var(--primary),.15); }
.ws-info-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: .4rem 1rem; margin-top: .25rem; }
@media (max-width: 680px) { .ws-info-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .ws-info-grid { grid-template-columns: 1fr; } }
.ws-info-field { display: flex; flex-direction: column; gap: 2px; }
.ws-info-field.ws-info-full { grid-column: 1 / -1; }
.ws-info-label { font-size: .67rem; font-weight: 700; color: rgba(var(--primary),.5); text-transform: uppercase; letter-spacing: .05em; }
.ws-info-val   { font-size: .82rem; font-weight: 600; color: rgba(var(--black)/.8); }
.ws-deadline   { color: rgb(var(--warning)); }
.ws-fee        { color: rgb(var(--primary)); font-size: .9rem; font-weight: 900; }
.qual-item { border: 1.5px solid rgba(var(--black)/.10); border-radius: var(--radius); margin-bottom: .625rem; background: rgb(var(--white)); overflow: hidden; transition: border-color var(--ease); }
.qual-item:has(.qual-cb:checked) { border-color: rgba(var(--primary)/.35); background: rgb(var(--primary-pale)); }
.qual-item-header { display: flex; align-items:center; gap: 10px; padding: .75rem 1rem; cursor: pointer; margin: 0; }
.qual-cb { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: rgb(var(--primary)); cursor: pointer; }
.qual-item-title { display: flex; flex-direction: column; gap: 2px; }
.qual-label { font-size: .82rem; font-weight: 700; color: rgba(var(--black)/.8); }
.qual-note  { font-size: .7rem; color: rgba(var(--black)/.45); }
.qual-fields { padding: .75rem 1rem .875rem; border-top: 1px solid rgba(var(--primary)/.12); background: rgba(var(--white)/.7); }
.qual-upload-row { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: .5rem; }
.qual-upload-label { font-size: .72rem; font-weight: 700; color: rgba(var(--black)/.7); min-width: 140px; }
.multi-team-row { display: flex; gap: 6px; align-items: center; margin-bottom: 5px; }
.multi-team-row .form-control { flex: 1; }
.check-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.check-item { display: inline-flex; align-items: center; gap: 5px; padding: 8px 10px; border: 1px solid rgba(var(--black)/.12); border-radius: var(--radius); font-size: .775rem; cursor: pointer; transition: border-color var(--ease), background var(--ease); }
.check-item:has(input:checked) { border: 1px solid rgba(var(--warning)/.5); background: rgba(var(--warning)/.03); color: rgb(var(--warning)); font-weight: 700; }
.check-item input { width: 13px; height: 13px; accent-color: rgb(var(--warning)); margin: 0; }
.doc-upload-card { background: rgb(var(--white)); border: 1.5px solid rgba(var(--black)/.10); border-radius: var(--radius); padding: .75rem; }
.doc-upload-header { margin-bottom: .5rem; }
.doc-upload-title  { font-size: .82rem; font-weight: 700; color: rgba(var(--black)/.8); }
.doc-note { font-size: .68rem; color: rgba(var(--black)/.4); display: block; margin-top: 2px; }
.doc-upload-body { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ── 26. 帶入資料 Banner（考試報名）── */
.member-prefill-banner { display: flex; align-items: center; gap: 12px; padding: .75rem 1rem; background: rgb(var(--primary-pale)); border: 1.5px solid rgba(var(--primary),.2); border-radius: var(--radius); margin-bottom: 1rem; }
.prefill-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; background: rgb(var(--primary)); display: flex; align-items: center; justify-content: center; }
.prefill-icon svg { width: 18px; height: 18px; stroke: white; fill: none; stroke-width: 1.5; }
.prefill-text { flex: 1; }
.prefill-title { font-size: .82rem; font-weight: 700; color: rgb(var(--primary)); }
.prefill-note  { font-size: .7rem; color: rgba(var(--black)/.45); margin-top: 1px; }
.prefill-edit-link { display: inline-flex; align-items: center; gap: 4px; font-size: .72rem; font-weight: 700; color: rgb(var(--primary)); text-decoration: none; border: 1px solid rgba(var(--primary),.3); padding: 4px 10px; border-radius: var(--radius); transition: all var(--ease); flex-shrink: 0; }
.prefill-edit-link svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; }
.prefill-edit-link:hover { background: rgba(var(--primary),.1); border-color: rgba(var(--primary),.55); }
.prefill-read-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .4rem .75rem; padding: .75rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.08); border-radius: var(--radius); }
@media (max-width: 600px) { .prefill-read-grid { grid-template-columns: 1fr 1fr; } }
.prefill-read-grid .col-full { grid-column: 1 / -1; }
.prefill-field { display: flex; flex-direction: column; gap: 2px; }
.prefill-field-label { font-size: .66rem; font-weight: 700; color: rgba(var(--black)/.35); text-transform: uppercase; letter-spacing: .05em; }
.prefill-field-val   { font-size: .82rem; font-weight: 600; color: rgba(var(--black)/.8); }
.prefill-file-row { display: flex; align-items: center; gap: 10px; padding: .5rem .625rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.08); border-radius: var(--radius); }
.prefill-file-icon { width: 34px; height: 34px; flex-shrink: 0; border-radius: 6px; background: rgb(var(--primary-pale)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.prefill-file-icon svg { width: 16px; height: 16px; stroke: rgb(var(--primary)); fill: none; stroke-width: 1.5; }
.prefill-photo-thumb { width: 100%; height: 100%; object-fit: cover; }
.prefill-file-info   { flex: 1; min-width: 0; }
.prefill-file-name   { font-size: .78rem; font-weight: 700; color: rgba(var(--black)/.8); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prefill-file-status { font-size: .68rem; margin-top: 1px; }
.prefill-file-status.ok   { color: rgb(var(--success)); }
.prefill-file-status.warn { color: rgb(var(--warning)); }
.prefill-new-file-row { display: flex; align-items: center; gap: 7px; margin-top: 6px; padding: 4px 8px; background: rgba(43,155,37,.06); border: 1px solid rgba(43,155,37,.2); border-radius: var(--radius); font-size: .72rem; }
.btn-link-danger { margin-left: auto; background: none; border: none; padding: 0; font-size: .68rem; font-weight: 700; color: rgb(var(--warning)); cursor: pointer; font-family: inherit; transition: color var(--ease); }
.btn-link-danger:hover { color: rgb(var(--red-bright)); }

/* ── 27. 地址三段式 ── */
.addr-wrap { display: grid; grid-template-columns: 90px 1fr 1fr 4fr; gap: .8rem; }
@media (max-width: 700px) { .addr-wrap { grid-template-columns: 80px 1fr 1fr; } .addr-wrap .addr-street { grid-column: 1 / -1; } }
@media (max-width: 480px) { .addr-wrap { grid-template-columns: 70px 1fr; } .addr-wrap .addr-dist,.addr-wrap .addr-street { grid-column: 1 / -1; } }
.addr-wrap input, .addr-wrap select { min-width: 0;  /* 覆蓋全域的 min-width: 100px */}
/* ════════════════════════════════════════════════
    28. 賽事選擇 / 計數器
════════════════════════════════════════════════ */
.event-select-wrap { display: flex; align-items: flex-end; gap: 1rem; padding: 1.1rem 1.25rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.10); border-radius: var(--radius); margin-bottom: 1rem; }
.event-select-wrap .form-group { flex: 1; }
.deadline-badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 20px; font-size: .72rem; font-weight: 700; white-space: nowrap; }
.deadline-badge.open   { background: rgba(43,155,37,.1); color: rgb(43,155,37); border: 1px solid rgba(43,155,37,.25); }
.deadline-badge.closed { background: rgba(var(--warning)/.03); color: rgb(var(--warning)); border: 1px solid rgba(var(--warning),.25); }
.deadline-badge svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; }
.event-badge-container { padding-top: 35px; }
@media screen and (max-width: 768px) {
  .event-select-wrap { flex-direction: column; align-items: stretch; gap: .5rem; }
  .event-select-wrap .form-group { flex: none; width: 100%; }
  .event-badge-container { padding-top: 0;}
  #eventBadge { padding-top: 0 !important; display: flex; justify-content: flex-start; }
  .deadline-badge { font-size: .82rem; padding: 6px 12px; }
}
.entry-counter { display: flex; align-items: center; gap: 1.25rem; padding: .75rem 1.1rem; background: rgba(var(--primary-pale)/.8); border: 1px solid rgba(var(--primary)/.1); border-radius: var(--radius); margin-bottom: 1rem; flex-wrap: wrap; }
.counter-item  { display: flex; align-items: center; gap: 6px; font-size: .78rem; flex-shrink: 0; }
.counter-desc  { flex: 1 1 auto; flex-shrink: 1; flex-wrap: wrap; }
.counter-label { }
.counter-value { font-weight: 900; font-size: 1rem; color: rgb(var(--primary)); }
.counter-value.over { color: rgb(var(--warning)); }
.counter-sep   { width: 1px; height: 20px; background: rgba(var(--primary)/.15); flex-shrink: 0; }
@media (max-width: 640px) {
  .counter-desc { flex: 1 1 100%; }
  .counter-desc + .counter-sep { display: none; }
}

/* 29. entry-table（勾選報名表）*/
.entry-table-wrap { overflow-x: auto; border-radius: 8px; border: 1px solid rgba(var(--black)/.10); box-shadow: 0 2px 12px rgba(10,39,77,.06); }
.entry-table { width: 100%; border-collapse: collapse; font-size: .8rem; }
.entry-table thead tr { background: linear-gradient(135deg,#1a6eb5 0%,#0a274d 100%); }
.entry-table thead th { padding: .3rem .7rem .2rem; text-align: left; vertical-align: middle; font-size: .7rem; font-weight: 700; color: rgba(255,255,255,.95); white-space: nowrap; border-right: 1px solid rgba(255,255,255,.08); }
.entry-table thead th:last-child { border-right: none; }
.entry-table thead th.col-cb  { width: 44px; text-align: center; }
.entry-table thead th.col-no  { width: 38px; text-align: center; }
.entry-table thead th.col-num { width: 48px; }
.entry-table tbody tr { border-bottom: 1px solid rgba(var(--black)/.10); transition: background var(--ease), box-shadow var(--ease); }
.entry-table tbody tr:nth-child(even) { background: linear-gradient(90deg,rgba(232,239,250,.45),rgba(255,255,255,0)); }
.entry-table tbody tr:nth-child(odd)  { background: rgb(var(--white)); }
.entry-table tbody tr:hover    { background: linear-gradient(90deg,rgba(26,110,181,.07),rgba(26,110,181,.02)); box-shadow: inset 3px 0 0 0 rgba(26,110,181,.35); }
.entry-table tbody tr.is-selected { background: linear-gradient(90deg,rgba(26,110,181,.12),rgba(232,239,250,.3)); box-shadow: inset 3px 0 0 0 #1a6eb5; }
.entry-table tbody tr.is-selected:hover { background: linear-gradient(90deg,rgba(26,110,181,.18),rgba(232,239,250,.5)); }
.entry-table tbody tr:last-child { border-bottom: none; }
.entry-table td { padding: .45rem .7rem; vertical-align: middle; white-space: nowrap; }
.entry-table td.col-cb { text-align: center; }
.entry-table td.col-no { text-align: center; font-weight: 700; color: rgba(var(--black)/.35); font-size: .72rem; }
.school{ width: 360px }
.col-cb { width: 30px; text-align: center !important; }
.entry-checkbox { width: 17px; height: 17px; accent-color: #1a6eb5; cursor: pointer; margin: 0; vertical-align: middle; }
.col-cb input[type="checkbox"] { display: block; margin: 0 auto; }
.entry-avatar    { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(26,110,181,.2); box-shadow: 0 1px 4px rgba(10,39,77,.12); display: block; }
.entry-avatar-ph { width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(135deg,rgb(var(--primary-pale)),rgba(var(--black)/.04)); border: 2px dashed rgba(var(--black)/.20); display: flex; align-items: center; justify-content: center; }
.entry-avatar-ph svg { width: 14px; height: 14px; stroke: rgba(var(--black)/.35); fill: none; stroke-width: 1.5; }
.entry-pos-tag { display: inline-block; padding: 2px 7px; background: linear-gradient(135deg,#1a6eb5 0%,#0a274d 100%); color: white; border-radius: 4px; font-size: .67rem; font-weight: 900; letter-spacing: .04em; box-shadow: 0 1px 4px rgba(10,39,77,.2); }

/* 就讀、畢業學校 */
.school-cell { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.school-name { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.school-name::before { font-size: .75rem; padding: 2px 6px; border-radius: 4px; font-weight: 700; line-height: 1; }
/*.status-current::before  { content: "就讀"; background: rgb(var(--primary)); color: #fff; }
.status-graduated::before{ content: "畢業"; background: rgba(var(--black)/.1); color: rgba(var(--black)/.5); }*/
.status-current:not(:last-child)::after { content: "/"; margin-left: 6px; color: rgba(var(--black)/.2); font-weight: 300; font-size: 1.2rem; }
@media screen and (max-width: 576px) { .school-cell { gap: 8px; } .status-current:not(:last-child)::after { display: none; } }

/* 家長姓名 */
.parent-section { margin-top: 1rem; padding: 1rem 1.1rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.10); border-radius: var(--radius); }
.parent-section-title { font-size: .8rem; font-weight: 900; color: rgb(var(--primary)); margin-bottom: .75rem; display: flex; align-items: center; gap: 6px; }
.parent-section-title svg { width: 14px; height: 14px; stroke: rgb(var(--warning)); fill: none; stroke-width: 2; }
.parent-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
@media (max-width: 560px) { .parent-grid { grid-template-columns: 1fr; } }
.parent-row { display: flex; align-items: center; gap: .5rem; }
.parent-row .player-tag { flex: 0 0 auto; font-size: .75rem; color: rgba(var(--black)/.55); white-space: nowrap; }
.legal-notice { display: flex; align-items: center; gap: 7px; padding: .65rem 1rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.10); border-radius: var(--radius); font-size: .75rem; color: rgba(var(--black)/.55); margin-top: 1rem; }
.legal-notice svg { width: 13px; height: 13px; stroke: rgba(var(--black)/.35); fill: none; stroke-width: 2; flex-shrink: 0; margin-top: 1px; }

/* 30. notice-block */
.notice-block { padding: .875rem 1rem; background: rgba(var(--primary)/.04); border: 1px solid rgba(var(--primary)/.15); border-left: 3px solid rgb(var(--primary)); border-radius: 0 var(--radius) var(--radius) 0; margin: 1rem 0; }
.notice-title  { display: flex; align-items: center; gap: 7px; font-size: .82rem; font-weight: 900; color: rgb(var(--primary)); margin-bottom: .5rem; }
.notice-title svg { width: 15px; height: 15px; flex-shrink: 0; stroke: rgb(var(--primary)); fill: none; stroke-width: 2; max-width: 15px; min-width: 15px; }
.notice-block ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: .25rem; }
.notice-block ul li { font-size: .78rem; color: rgba(var(--black)/.7); line-height: 1.5; }
.notice-block ul li strong { color: rgb(var(--warning)); }

/* 31. 資訊區塊 */
.info-block { padding: .875rem 1.1rem; background: rgba(var(--black)/.02); border: 1px solid rgba(var(--black)/.10); border-radius: var(--radius); }
.info-block-title { font-size: .72rem; font-weight: 900; color: rgb(var(--primary)); letter-spacing: .05em; padding-bottom: 6px; margin-bottom: .625rem; border-bottom: 1.5px solid rgba(var(--black)/.10); position: relative; display: flex; align-items: center; gap: 7px; }
.info-block-title::before { content: ''; position: absolute; bottom: -1.5px; left: 0; width: 28px; height: 1.5px; background: rgb(var(--warning)); border-radius: 2px; }
.info-block-title svg { width: 13px; height: 13px; stroke: rgb(var(--warning)); fill: none; stroke-width: 2; }
.info-block-title i{ color: rgb(var(--warning)) }
.info-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: .4rem; font-size: .78rem; }
.info-row:last-child { margin-bottom: 0; }
.info-key { flex: 0 0 68px; color: rgba(var(--black)/.55); font-weight: 500; white-space: nowrap; }
.info-val { flex: 1; color: rgba(var(--black)/.8); font-weight: 700; word-break: break-all; }
.info-val.fee { font-size: 1.1rem; color: rgb(var(--warning)); font-weight: 900; }
.info-val.mark{ color: rgb(var(--warning)); }
.info-val.done{ color: rgb(var(--success)); }
.transfer-box { margin-top: .75rem; padding: .875rem 1rem; background: rgb(var(--primary-pale)); border: 1px solid rgba(var(--primary),.18); border-radius: var(--radius); }
.transfer-row { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: .78rem; }
.transfer-row:last-child { margin-bottom: 0; }
.transfer-key { flex: 0 0 52px; color: rgba(var(--black)/.55); font-size: .7rem; font-weight: 700; }
.transfer-val { font-weight: 900; color: rgb(var(--primary)); font-size: .825rem; letter-spacing: .04em; }
.copy-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px; border-radius: 3px; background: rgba(var(--primary),.1); border: 1px solid rgba(var(--primary),.2); font-size: .68rem; font-weight: 700; color: rgb(var(--primary)); cursor: pointer; font-family: inherit; transition: all var(--ease); }
.copy-btn:hover { background: rgba(var(--primary),.2); }
.copy-btn svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; }

/* 32. 報名紀錄卡片 */
.record-list { display: flex; flex-direction: column; gap: .75rem; }
.record-card { background: rgb(var(--white)); border: 1.5px solid rgba(var(--black)/.10); border-radius: 8px; overflow: hidden; box-shadow: 0 1px 6px rgba(10,39,77,.05); transition: box-shadow var(--ease); }
.record-card:hover { box-shadow: 0 4px 16px rgba(10,39,77,.1); }
.record-card-header { display: flex; align-items: center; gap: 10px; padding: .75rem 1rem; border-bottom: 1px solid rgba(var(--black)/.10); }
.record-card-icon { width: 36px; height: 36px; flex-shrink: 0; border-radius: var(--radius); background: rgb(var(--primary-pale)); display: flex; align-items: center; justify-content: center; }
.record-card-icon svg { width: 18px; height: 18px; stroke: rgb(var(--primary)); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.record-card-title { flex: 1; font-size: .875rem; font-weight: 900; color: rgb(var(--primary)); }
.record-card-body { display: grid; grid-template-columns: repeat(4,1fr); padding: .625rem 1rem; gap: .4rem; }
@media (max-width: 560px) { .record-card-body { grid-template-columns: repeat(2,1fr); } }
.record-field { display: flex; flex-direction: column; gap: 2px; }
.record-field-label { font-size: .65rem; font-weight: 700; color: rgba(var(--black)/.35); text-transform: uppercase; letter-spacing: .05em; }
.record-field-value { font-size: .78rem; font-weight: 700; color: rgb(var(--black)); }
.record-card-footer { display: flex; align-items: center; justify-content: flex-end; padding: .5rem 1rem; background: rgba(var(--black)/.02); border-top: 1px solid rgba(var(--black)/.10); flex-wrap: wrap; gap: 8px; }
.status-paid    { background: rgba(43,155,37,.1); color: rgb(43,155,37); border: 1px solid rgba(43,155,37,.25); }
.status-pending { background: rgba(var(--alert)/.05); color: rgb(var(--alert)); border: 1px solid rgba(var(--alert)/.25); }
.status-review  { background: rgb(var(--primary-pale)); color: rgb(var(--primary)); border: 1px solid rgba(var(--primary)/.45); }

/* 33. 付款 Modal */
.pay-modal-bg { display: none; position: fixed; inset: 0; background: rgba(10,39,77,.55); z-index: 1000; align-items: flex-start; justify-content: center; padding: 1.5rem 1rem; overflow-y: auto; }
.pay-modal-bg.show { display: flex; }
.pay-modal { background: rgb(var(--white)); border-radius: 8px; width: 100%; max-width: 600px; box-shadow: 0 12px 40px rgba(10,39,77,.3); animation: slideUp .25s ease both; overflow: hidden; margin: auto; }
.pay-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid rgba(var(--black)/.10); background: rgb(var(--primary)); }
.pay-modal-title { font-size: 1rem; font-weight: 900; color: white; display: flex; align-items: center; gap: 8px; }
.pay-modal-title svg { width: 16px; height: 16px; stroke: rgba(255,255,255,.85); fill: none; stroke-width: 2; }
.pay-modal-close-btn { background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25); border-radius: var(--radius); width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: white; transition: background var(--ease); }
.pay-modal-close-btn:hover { background: rgba(255,255,255,.25); }
.pay-modal-close-btn svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2.5; }
.pay-modal-body    { padding: 1rem 1.1rem; }
.pay-section { margin-bottom: 1.25rem; }
.pay-section:last-child { margin-bottom: 0; }
.pay-section-title { font-size: .78rem; font-weight: 900; color: rgb(var(--primary)); letter-spacing: .05em; padding-bottom: 8px; margin-bottom: .875rem; border-bottom: 1.5px solid rgba(var(--black)/.10); position: relative; display: flex; align-items: center; gap: 7px; }
.pay-section-title::before { content: ''; position: absolute; bottom: -1.5px; left: 0; width: 28px; height: 1.5px; background: rgb(var(--warning)); border-radius: 2px; }
.pay-section-title svg { width: 13px; height: 13px; stroke: rgb(var(--warning)); fill: none; stroke-width: 2; }
.pay-method-radio { display: flex; align-items: center; gap: 7px; font-size: .825rem; font-weight: 700; color: rgb(var(--primary)); margin-bottom: .875rem; }
.pay-method-radio input { width: 15px; height: 15px; accent-color: rgb(var(--primary)); cursor: pointer; }
.pay-feedback { margin-top: .875rem; padding: .875rem 1rem; background: rgb(var(--primary-pale)); border: 1px solid rgba(var(--primary),.18); border-radius: var(--radius); }
.pay-feedback-label { font-size: .72rem; font-weight: 700; color: rgba(var(--black)/.55); margin-bottom: .5rem; display: flex; align-items: center; gap: 5px; }
.pay-feedback-label svg { width: 11px; height: 11px; stroke: rgb(var(--warning)); fill: none; stroke-width: 2; }
.pay-feedback-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; }
@media (max-width: 700px) { .pay-feedback-grid { grid-template-columns: 1fr;}}
.receipt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.receipt-grid .col-full { grid-column: 1/-1; }
.pay-modal-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: .75rem 1.1rem; border-top: 1px solid rgba(var(--black)/.10); background: rgba(var(--black)/.02); }

/* 34. 回傳檔案 */
.file-type-tag  { display: inline-block; padding: 1px 6px; border-radius: 3px; font-size: .67rem; font-weight: 700; margin-right: 5px; flex-shrink: 0; }
.tag-reg        { background: rgb(var(--primary-pale)); color: rgb(var(--primary)); }
.tag-school     { background: rgba(0,128,128,.1); color: rgb(0,100,100); }
.tag-insurance  { background: rgba(43,155,37,.1); color: rgb(30,100,28); }
.tag-other      { background: rgba(var(--black)/.04); color: rgba(var(--black)/.55); }
.upload-cards   { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
@media (max-width: 700px) { .upload-cards { grid-template-columns: 1fr; } }
.upload-card { display: flex; flex-direction: column; gap: .75rem; padding: 1rem; background: rgb(var(--white)); border: 1.5px solid rgba(var(--black),.10); border-radius: 8px; box-shadow: var(--shadow-sm); }
.upload-card-header { display: flex; align-items: center; gap: 8px; padding-bottom: .625rem; border-bottom: 1px solid rgba(var(--black),.08); }
.upload-card-icon   { width: 28px; height: 28px; flex-shrink: 0; border-radius: 6px; display: flex; align-items: center; justify-content: center; }
.upload-card-icon svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.upload-icon-red   { background: rgba(var(--warning)/.1);     color: rgb(var(--warning)); }
.upload-icon-teal  { background: rgba(0,128,128/.1);      color: rgb(0,100,100); }
.upload-icon-green { background: rgba(var(--success)/.1); color: rgb(var(--success)); }
.upload-card-title  { font-size: .85rem; font-weight: 700; color: rgba(var(--black)/.85); flex: 1; }
.upload-card-status { font-size: .68rem; font-weight: 700; white-space: nowrap; }
.upload-card-status.done    { color: rgb(var(--success)); }
.upload-card-status.pending { color: rgba(var(--black)/.35); }
.upload-zone-sm { padding: 1rem .75rem; min-height: 80px; }
.upload-zone-sm svg { width: 22px; height: 22px; }
.upload-zone-sm .upload-zone-label { font-size: .78rem; }

/* 35. 空白提示 / accordion */
.empty-table-state { /*display: none;*/ text-align: center; padding: 2.5rem 1rem; color: rgba(var(--black),.35); font-size: .875rem; font-weight: 500; }
.empty-table-state svg { width: 40px; height: 40px; stroke: rgba(var(--black),.18); fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: block; margin: 0 auto .75rem; }
.registration-accordion .accordion-title { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 1.2rem 2rem; font-size: 1.1rem; font-weight: 700; background: rgba(var(--primary-pale)); color: rgb(var(--primary)); border: 1px solid rgba(var(--primary)/.15) !important; border-radius: 8px !important; box-shadow: var(--shadow-md); text-decoration: none !important; transition: all .3s ease; }
.registration-accordion .accordion-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s ease; flex-shrink: 0; }
.registration-accordion .accordion-item.is-active .accordion-title { background: rgb(var(--primary-pale)) !important; color: rgb(var(--primary)) !important; border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.registration-accordion .accordion-item.is-active .accordion-icon { transform: rotate(180deg); }
.registration-accordion .accordion-title::before,.registration-accordion .accordion-title::after { content: none !important; display: none !important; }
.registration-accordion .accordion-content { display: none; border: 1px solid rgba(var(--primary)/.15); border-top: none !important; background: #fff; padding: 1.5rem; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; box-shadow: var(--shadow-md); }
.registration-accordion .accordion-item .accordion-content { border: 1px solid rgba(var(--primary)/.15) !important; border-top: none !important; background-color: #fff !important; padding: 1.5rem; border-bottom-left-radius: 8px !important; border-bottom-right-radius: 8px !important; margin-bottom: 0 !important; }

/* 36. 賽事資訊共用 */
.info-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 700px) { .info-grid { grid-template-columns: 1fr; } }
.event-info-bar { display: flex; gap: 1rem; }
.event-info-row { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem 1.5rem; margin-bottom: .5rem; }
.event-info-row .info-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: .4rem; font-size: .78rem; flex: none; min-width: 0; }
@media screen and (max-width: 768px) { .event-info-row { grid-template-columns: 1fr !important; gap: 0; } .event-info-bar { flex-direction: column; } .event-info-row .info-row { margin-bottom: .6rem; } }
.stat-counts { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .75rem; }
.stat-count-item { display: flex; align-items: center; justify-content: space-between; padding: .6rem .875rem; background: rgba(var(--black)/.03); border: 1px solid rgba(var(--black)/.10); border-radius: var(--radius); }
.stat-count-item.total { background: rgb(var(--primary)); border-color: rgb(var(--primary)); }
.stat-count-label { font-size: .8rem; color: rgba(var(--black)/.55); font-weight: 600; }
.stat-count-num   { font-size: 1.5rem; font-weight: 900; color: rgb(var(--primary)); line-height: 1; }
.stat-count-item.total .stat-count-label { color: rgba(255,255,255,.8); }
.stat-count-item.total .stat-count-num   { color: white; font-size: 1.75rem; }
.event-info-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: .5rem 1rem; }
@media (max-width: 700px) { .event-info-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 480px) { .event-info-grid { grid-template-columns: 1fr; } }
.info-field { display: flex; flex-direction: column; gap: 2px; }
.info-field-label { font-size: .68rem; font-weight: 700; color: rgba(var(--black)/.4); text-transform: uppercase; letter-spacing: .04em; }
.info-field-val   { font-size: .875rem; font-weight: 600; color: rgba(var(--black)/.85); }
.info-field-val.hi { color: rgb(var(--warning)); font-weight: 700; }

/*-- 報名摘要 --*/
.confirm-event-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;padding:.875rem 1.1rem;background:rgba(var(--primary-pale)/.8);border:1px solid rgba(var(--primary)/.1);border-radius:var(--radius);margin-bottom:1rem;}
.confirm-event-bar .event-name{font-size:1.2rem;font-weight:900;color:rgb(var(--primary));flex:1 1 auto;}
.confirm-count-row{display:flex;gap:.75rem;flex-wrap:wrap;flex-shrink:0;}
.confirm-count-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 15px;border-radius:20px;font-size:.78rem;font-weight:700;background:rgb(var(--white));color:rgba(var(--black)/.8);border:1px solid rgba(var(--primary)/.1);}
@media(max-width:600px){
  .confirm-event-bar .event-name{flex:1 1 100%;}
  .confirm-count-row{width:100%;}
}
/*-- 賽事header logo --*/
.sub-logo-header .logo-link {
    display: flex;
    align-items: center; /* 垂直居中 */
    text-decoration: none;
    padding: 10px 0;
}
.sub-logo-header .logo-img {
    /*background: url(../image/logo_s.png) no-repeat center;
    background-size: contain;*/
    width: 70px;
    height: 70px;
    flex-shrink: 0;
}
.sub-logo-header .logo-text {
    margin-left: 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sub-logo-header .title {
    font-size: 1.1rem;
    color: rgb(var(--black));
    font-weight: 700;
    line-height: 1.2;
    margin: 0; /* 移除預設 margin */
}
.sub-logo-header .title small{ font-size: .8rem; color: rgba(var(--black)/.8); font-weight: normal;}
.sub-logo-header .subtitle {
    font-size: .6rem; 
    color: rgb(var(--primary));
    margin: 3px 0 0 0;
    line-height: 1.2;
    white-space: nowrap; /* 避免英文換行 */
    display: flex;
    flex-direction: column;
}

/* --- 桌機版 (64em / 1024px 以上) --- */
@media screen and (min-width: 64em) {
    .sub-logo-header .logo-link {
        padding: 15px 0;
    }
    .sub-logo-header .logo-img {
        width: 100px;
        height: 100px; 
    }
    .sub-logo-header .logo-text {
        margin-left: 15px; 
    }
    .sub-logo-header .title {
        font-size: 1.55rem;
        letter-spacing: 1.2;
    }
    .sub-logo-header .subtitle {
        font-size: 15px;
        margin-top: 4px;
        letter-spacing: 0.5px;
        flex-direction: row;
        gap: 12px;
    }
}

/* Foundation Accordion 課程資訊卡覆蓋 */
.ws-course-accordion { border:1.5px solid rgba(var(--primary)/.15); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm); list-style:none; }
.ws-course-accordion .accordion-title { background:rgba(var(--primary-pale)/.8); color:rgba(var(--black)/.8); font-size:.85rem; font-weight:900; border:none; border-bottom:1.5px solid rgba(var(--primary)/.15); padding:.75rem 1rem; }
.ws-course-accordion .accordion-title:hover,
.ws-course-accordion .accordion-title:focus { background:rgba(var(--primary-pale)/1); color:rgba(var(--primary)/1); }
.ws-course-accordion .accordion-title::before { color:rgb(var(--primary)); font-size:1rem; }
.ws-course-accordion .accordion-content { padding:.75rem 1rem 1rem; border:none; background:rgb(var(--white)); }
/*  訊息公告跑馬燈 */
.member-announcement-bar.callout{
  background-color: rgba(var(--primary-pale)/.5);
  border-bottom: 1px solid rgb(var(--primary-pale)); 
  font-size: 0.85rem; font-weight: 700; color: rgb(var(--primary)/.75); 
  overflow: hidden; padding: 10px; border-radius: var(--radius);
}
/* 跑馬燈動畫軌道 */
.announcement-marquee { display: flex; overflow: hidden; white-space: nowrap;}
.marquee-content { display: flex; animation: marquee-scroll 30s linear infinite;}
.marquee-item { padding-right: 80px;}
/* 暫停功能 */
.member-announcement-bar:hover .marquee-content { animation-play-state: paused;}
@keyframes marquee-scroll { 
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.label.secondary { background: rgba(var(--primary)/.65); color: #fff; margin-right: 10px;}
.hist-subnav .button{box-shadow: var(--shadow-md);}