:root{
  --primary:#1683e2;
  --primary-dark:#0f5f9f;
  --primary-light:#eaf5ff;
  --yellow:#ffb31a;
  --green:#22a06b;
  --red:#d64545;
  --bg:#f5f9fc;
  --card:#ffffff;
  --line:#cfddea;
  --text:#203040;
  --muted:#66788a;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  min-height:100vh;
  font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  background:#f5f9fc;
  color:var(--text);
}
a{color:var(--primary-dark);text-decoration:none}
a:hover{text-decoration:underline}

.container{width:min(1120px,calc(100% - 28px));margin:auto}

.top{
  background:#ffffff;
  border-bottom:3px solid var(--primary);
  position:sticky;
  top:0;
  z-index:3;
}
.nav{
  min-height:66px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.brand{
  font-weight:900;
  color:var(--primary-dark);
  font-size:21px;
}
.nav nav{display:flex;flex-wrap:wrap;gap:16px}
.nav nav a{font-weight:800;color:#245b87}
.nav nav a:hover{color:var(--primary);text-decoration:none}

.hero{
  margin:28px 0 22px;
  padding:34px;
  border:2px solid #b7d9f5;
  border-left:10px solid var(--primary);
  border-radius:8px;
  background:#eef8ff;
}
h1,h2,h3{color:#155b91}
.hero h1{font-size:clamp(30px,5vw,50px);margin:4px 0 10px}
.hero p{margin-bottom:0}

.grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
  margin:20px 0;
}

.card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:8px;
  padding:22px;
}
.card h3{margin-top:0}

.btn{
  display:inline-block;
  border:0;
  border-radius:6px;
  background:var(--primary);
  color:#fff;
  padding:11px 18px;
  font-weight:900;
  cursor:pointer;
}
.btn:hover{background:#0f70c7;text-decoration:none}
.btn.secondary{background:#71869a}
.btn.warn{background:#f0a400}
.btn.danger{background:var(--red)}
.small-btn{padding:7px 11px;font-size:14px}

input,select,textarea{
  width:100%;
  padding:11px 12px;
  border:1px solid #b9cddd;
  border-radius:5px;
  background:#fff;
  font:inherit;
}
input:focus,select:focus,textarea:focus{
  outline:2px solid #a8d7ff;
  border-color:var(--primary);
}
label{font-weight:800;display:block;margin:12px 0 6px}
.required-mark{color:#e00000;font-weight:900}

.conditional-field{
  padding:12px 14px;
  margin:8px 0;
  border:1px solid #c8dfef;
  border-left:5px solid var(--primary);
  background:#f7fcff;
  border-radius:5px;
}

.row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.table-wrap{overflow:auto}
.table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
}
.table th,.table td{
  padding:11px;
  border:1px solid var(--line);
  text-align:left;
  white-space:nowrap;
}
.table th{
  background:#dff0ff;
  color:#134f7c;
}
.table tbody tr:nth-child(even){background:#fafcfe}
.table tbody tr:hover{background:#eef8ff}

.flash{
  margin:18px 0;
  padding:13px 16px;
  border-radius:5px;
  background:#e9f8ef;
  color:#256441;
  border:1px solid #bfe1cc;
}
.flash.err{
  background:#fff0f0;
  color:#9a3030;
  border-color:#edc3c3;
}

.meta{color:var(--muted);font-size:14px}

.tag{
  display:inline-block;
  padding:3px 8px;
  border-radius:4px;
  background:#e6f3ff;
  margin-right:6px;
  font-size:13px;
}

.captcha{
  display:flex;
  gap:5px;
  padding:12px;
  background:#e8f4ff;
  border:1px solid #c1dff5;
  border-radius:5px;
  letter-spacing:2px;
  font-weight:900;
  font-size:21px;
  user-select:none;
}
.captcha-image{height:52px;max-width:100%}

.announcement{padding:14px 0;border-bottom:1px solid var(--line)}
.announcement:hover{background:#f3f9ff}

footer{
  margin-top:36px;
  background:#ffffff;
  border-top:2px solid #cfe0ee;
  padding:22px 0;
  color:var(--muted);
}

.status{font-weight:900}
.status.open{color:var(--green)}
.status.closed{color:var(--red)}

.badge{
  display:inline-block;
  padding:4px 8px;
  border-radius:4px;
  font-size:13px;
  font-weight:800;
}
.badge.ok{background:#e5f5eb;color:#216b48}
.badge.muted{background:#eef2f5;color:#687783}

.pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
  margin:20px 0;
}
.pagination a,.pagination span{
  padding:8px 12px;
  border-radius:5px;
  background:#fff;
  border:1px solid var(--line);
}

.setup-wrap{max-width:760px;padding-top:42px}
.setup-card{padding:30px}
.setup-icon{
  width:56px;
  height:56px;
  border-radius:6px;
  display:grid;
  place-items:center;
  background:var(--primary);
  color:#fff;
  font-size:24px;
  font-weight:900;
}
.security-note{
  padding:13px 15px;
  background:#fff7df;
  border:1px solid #edd38b;
  border-radius:5px;
  color:#6d5521;
}

.result-summary{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
  margin:16px 0;
}
.result-summary>div{
  padding:16px;
  border:1px solid var(--line);
  background:#f8fbfd;
  border-radius:6px;
}
.result-summary span{display:block;color:var(--muted);font-size:14px;margin-bottom:4px}
.result-summary strong{font-size:19px;color:#124f80}
.result-class{color:#d77800!important}

.register-card{max-width:900px;margin:24px auto}
.captcha-row{align-items:center}
.readonly-box{
  padding:11px 13px;
  border:1px solid #c9d9e7;
  border-radius:5px;
  background:#f7fafc;
  font-weight:700;
  color:#234d70;
  min-height:44px;
  display:flex;
  align-items:center;
}

/* 正式公告欄 */
.notice-board{
  padding:0;
  overflow:hidden;
  border-radius:6px;
  border:1px solid #bfcfdd;
  background:#fff;
}
.notice-board-title{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  padding:16px 18px;
  background:#e7f3ff;
  border-bottom:3px solid var(--primary);
}
.notice-board-title h2{margin:0;color:#164f7c;font-size:22px}
.bulletin-table{
  width:100%;
  border-collapse:collapse;
  background:#fff;
  table-layout:fixed;
}
.bulletin-table th{
  background:#d7eaf9;
  color:#214f73;
  font-weight:800;
  text-align:center;
  padding:12px 10px;
  border:1px solid #bfcfdd;
}
.bulletin-table td{
  padding:12px 10px;
  border:1px solid #d3dfe8;
  vertical-align:middle;
}
.bulletin-table tbody tr:nth-child(even){background:#f9fcff}
.bulletin-table tbody tr:hover{background:#edf7ff}
.bulletin-table .col-no{width:76px;text-align:center}
.bulletin-table .col-author{width:150px;text-align:center}
.bulletin-table .col-time{width:165px;text-align:center;white-space:nowrap}
.bulletin-title{white-space:normal!important}
.bulletin-title a{color:#173f5f;font-weight:700}
.bulletin-title a:hover{color:#0b69b3}
.bulletin-tag{
  border:1px solid var(--tag-color);
  color:var(--tag-color);
  background:#fff;
  border-radius:4px;
  padding:2px 7px;
  font-weight:800;
  margin-right:8px;
  white-space:nowrap;
}

.section-title-row{display:flex;align-items:center;justify-content:space-between}
.color-picker-row{display:flex;align-items:center;gap:14px}
.color-picker-row input[type=color]{width:76px;height:46px;padding:3px;cursor:pointer}
.color-preview{
  display:inline-block;
  border:1px solid var(--tag-color);
  color:var(--tag-color);
  background:#fff;
  padding:5px 10px;
  border-radius:4px;
  font-weight:800;
}
.tag-list{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.tag-list-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:5px;
  background:#fbfdff;
}
.tag-manager-form{padding-bottom:8px}

/* 前台功能 */
.feature-card{display:flex;flex-direction:column}
.feature-card .btn{margin-top:auto;align-self:flex-start}
.feature-time{
  padding:9px 11px;
  background:#edf7ff;
  border-left:5px solid var(--primary);
  border-radius:5px;
  color:#41647f;
  font-size:14px;
  line-height:1.9;
  white-space:pre-line;
}

/* 後台設定 */
.settings-card{
  margin:28px 0;
  padding:26px 28px;
  background:#fff;
  border:1px solid #cbd9e5;
  border-radius:7px;
}
.settings-card-heading{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin:0 0 22px;
  padding-bottom:14px;
  border-bottom:2px solid #d9e6f0;
}
.settings-card-heading h2{margin:0 0 6px;font-size:24px}
.settings-main-card{border-top:6px solid var(--primary)}
.settings-feature-parent{border-top:6px solid #25a06b}
.settings-other-card{border-top:6px solid var(--yellow)}

.feature-setting-card{
  margin:22px 0 0;
  padding:22px 24px;
  border:1px solid #d0dde7;
  border-radius:6px;
  background:#fff;
}
.feature-setting-card + .feature-setting-card{margin-top:22px}
.feature-setting-card h3{
  margin:0 0 18px;
  padding:0 0 10px;
  border-bottom:1px solid #dfe8ef;
  font-size:21px;
}
.feature-registration{border-left:7px solid var(--primary)}
.feature-score{border-left:7px solid var(--green)}
.feature-result{border-left:7px solid var(--yellow)}

.settings-save-bar{
  display:flex;
  justify-content:flex-end;
  margin:22px 0 34px;
  padding:16px 18px;
  border:1px solid var(--line);
  border-radius:6px;
  background:#eef7ff;
}
.admin-two-column{
  display:grid;
  grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);
  gap:20px;
  margin:20px 0;
}
.current-file-box{
  margin-top:12px;
  padding:11px 13px;
  border:1px solid #d4e0e9;
  border-radius:5px;
  background:#f7fafc;
}
.form-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.inline-form{display:inline}
.action-cell{display:flex;align-items:center;gap:8px;white-space:nowrap}
.download-admin-desc{white-space:normal;max-width:520px;margin-top:5px;line-height:1.5}

@media(max-width:760px){
  .nav{align-items:flex-start;flex-direction:column;padding:14px 0}
  .grid{grid-template-columns:1fr}
  .row,.result-summary{grid-template-columns:1fr}
  .hero{padding:22px}
  .table th,.table td{padding:9px;font-size:14px}
  .setup-card{padding:22px}
  .bulletin-table{min-width:720px}
  .notice-board{overflow:visible}
  .notice-board .table-wrap{overflow-x:auto}
  .bulletin-table .col-no{width:64px}
  .bulletin-table .col-author{width:125px}
  .bulletin-table .col-time{width:150px}
  .settings-card{padding:20px 16px}
  .feature-setting-card{padding:18px 16px}
  .admin-two-column{grid-template-columns:1fr}
  .action-cell{display:table-cell}
  .inline-form{display:inline-block;margin-top:6px}
}


/* v13 年度資料清空：高風險操作 */
.danger-settings-card{
  border-top:6px solid #d64545;
  background:#fffafa;
}
.danger-zone{
  max-width:920px;
  margin:24px auto;
  border:2px solid #d64545;
  border-top:8px solid #d64545;
  background:#fffafa;
}
.danger-zone h2,.danger-zone h3{color:#a92727}
.danger-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
  margin:18px 0 24px;
}
.danger-summary>div{
  padding:14px;
  border:1px solid #efc0c0;
  background:#fff;
  border-radius:6px;
  text-align:center;
}
.danger-summary span{
  display:block;
  color:#7f5555;
  font-size:14px;
  margin-bottom:5px;
}
.danger-summary strong{
  display:block;
  color:#a92727;
  font-size:24px;
}
@media(max-width:760px){
  .danger-summary{grid-template-columns:1fr 1fr}
}


/* v14 成績總分與排名 */
.score-summary{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:20px 0;
}
.score-summary>div{
  border:1px solid #bcd4e6;
  border-top:5px solid #1683e2;
  background:#fff;
  border-radius:6px;
  padding:16px;
  text-align:center;
}
.score-summary span{
  display:block;
  color:#66788a;
  margin-bottom:6px;
}
.score-summary strong{
  color:#0f5f9f;
  font-size:24px;
}
.ranking-table th,.ranking-table td{text-align:center}
@media(max-width:760px){
  .score-summary{grid-template-columns:1fr}
}

.badge.pin{
  background:#fff0d6;
  color:#a95d00;
  border:1px solid #f2c06d;
  margin-right:6px;
}


/* v18 註冊動作與密碼顯示 */
.register-action-box{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:22px;
  align-items:flex-start;
}
.register-now-btn{
  font-size:20px;
  padding:15px 28px;
  background:#f08a00;
  border:2px solid #cf7200;
}
.register-now-btn:hover{background:#d97900}
.register-only-btn{
  font-size:14px;
  padding:8px 13px;
  background:#8797a5;
}
.login-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:18px;
}
.password-field{
  position:relative;
  width:100%;
}
.password-field input{
  padding-right:48px;
}
.password-eye{
  position:absolute;
  right:7px;
  top:50%;
  transform:translateY(-50%);
  width:36px;
  height:34px;
  border:0;
  border-radius:5px;
  background:#eef4f8;
  color:#31546f;
  cursor:pointer;
  font-size:18px;
  line-height:1;
}
.password-eye:hover{
  background:#dcebf5;
}


/* v19 登入頁按鈕同尺寸 */
.login-actions .btn{
  min-width:120px;
  text-align:center;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:10px 18px;
}


/* v20 登入頁按鈕字級一致 */
.login-actions .btn{
  font-size:16px;
  font-weight:900;
  line-height:1;
}


/* v21 全站按鈕字體、字級與高度統一 */
:root{
  --btn-height:44px;
  --btn-font-size:16px;
  --btn-font-weight:800;
  --btn-font-family:"Noto Sans TC","Microsoft JhengHei",system-ui,sans-serif;
  --small-btn-height:34px;
  --small-btn-font-size:14px;
}

.btn,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn{
  min-height:var(--btn-height);
  height:var(--btn-height);
  width:auto;
  min-width:0;
  padding:0 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
  font-family:var(--btn-font-family);
  font-size:var(--btn-font-size);
  font-weight:var(--btn-font-weight);
  line-height:1;
  vertical-align:middle;
  text-align:center;
}

button,
input[type="submit"],
input[type="button"]{
  font-family:var(--btn-font-family);
}

/* 文字較長時自動加寬，但不增加高度 */
.register-now-btn,
.register-only-btn,
.login-actions .btn,
.form-actions .btn,
.settings-save-bar .btn{
  width:auto;
  min-width:120px;
  height:var(--btn-height);
  min-height:var(--btn-height);
  padding-left:20px;
  padding-right:20px;
  font-size:var(--btn-font-size);
  font-weight:var(--btn-font-weight);
}

/* 主要強調按鈕只改顏色，不再用不同字級或高度 */
.register-now-btn{
  background:#f08a00;
  border:2px solid #cf7200;
}
.register-now-btn:hover{background:#d97900}

.register-only-btn{
  background:#8797a5;
}

/* 小型列表操作按鈕：同類統一高度 */
.small-btn,
.btn.small-btn{
  min-height:var(--small-btn-height);
  height:var(--small-btn-height);
  padding:0 11px;
  font-size:var(--small-btn-font-size);
  font-weight:800;
  line-height:1;
}

/* 密碼眼睛按鈕是圖示控制，不套一般按鈕高度 */
.password-eye{
  font-family:var(--btn-font-family);
  font-size:18px;
  font-weight:700;
}

/* 避免手機因空間不足讓長按鈕換行後變高 */
@media(max-width:760px){
  .register-action-box,
  .login-actions,
  .form-actions{
    align-items:flex-start;
  }
  .btn,
  button.btn,
  a.btn,
  input[type="submit"].btn,
  input[type="button"].btn{
    max-width:100%;
    white-space:nowrap;
  }
}


/* v22 主要註冊按鈕維持較大且醒目 */
.register-now-btn{
  min-height:52px !important;
  height:52px !important;
  padding:0 26px !important;
  font-size:18px !important;
  font-weight:900 !important;
  background:#f08a00 !important;
  border:2px solid #cf7200 !important;
}
.register-now-btn:hover{
  background:#d97900 !important;
}

/* 次要註冊按鈕維持一般尺寸 */
.register-only-btn{
  min-height:44px !important;
  height:44px !important;
  padding:0 20px !important;
  font-size:16px !important;
  font-weight:800 !important;
}


/* v24 首頁主視覺上移與簡化 */
.hero{
  margin-top:18px;
  padding-top:24px;
}
.hero h1{
  margin-top:0;
}