:root{
  --navy:#1a3a6e;
  --navy-deep:#142d56;
  --gold:#b48a3c;
  --gold-soft:#d6b56b;
  --bg:#f6f3ec;
  --paper:#ffffff;
  --line:#dcd6c5;
  --text:#23262e;
  --muted:#7b7d86;
  --danger:#b8302e;
  --ok:#2f8d5b;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,-apple-system,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.55;
  font-size:15px;
}

/* ========== Header ========== */
.page-header{
  background:var(--paper);
  border-bottom:3px solid var(--gold);
}
.banner-frame{
  max-width:880px;margin:0 auto;
  text-align:center;
  padding:2rem 1.2rem 1.4rem;
  border-bottom:1px solid var(--line);
  background:
    linear-gradient(180deg,#fbf7ea 0%,#ffffff 100%);
}
.banner-emblem{
  display:inline-flex;align-items:center;justify-content:center;
  width:64px;height:64px;border-radius:50%;
  overflow:hidden;margin-bottom:.4rem;
  box-shadow:0 0 0 4px #fff, 0 0 0 5px var(--gold);
}
.banner-emblem img{
  width:100%;height:100%;object-fit:cover;display:block;
}
.banner-frame h1{
  margin:.4rem 0 .2rem;
  font-size:1.75rem;
  color:var(--navy-deep);
  letter-spacing:.08em;
  font-weight:600;
}
.banner-en{
  margin:0;
  font-size:.78rem;
  letter-spacing:.32em;
  color:var(--gold);
  font-weight:500;
}

/* ========== Main / Cards ========== */
.page-main{
  max-width:880px;
  margin:1.6rem auto 3rem;
  padding:0 1rem;
}
.page-footer{
  text-align:center;color:var(--muted);font-size:.8rem;
  padding:1.4rem 1rem 2rem;
}

.flash{
  padding:.7rem 1rem;border-radius:6px;margin-bottom:1rem;
  font-size:.92rem;
}
.flash-error{background:#fdecec;color:var(--danger);border:1px solid #f3c9c9}
.flash-success{background:#eaf6ee;color:var(--ok);border:1px solid #c3e3cc}
.flash-info{background:#eef4ff;color:var(--navy);border:1px solid #c9d6ef}

/* ========== Form sections ========== */
.apply-form, .login-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:8px;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
  overflow:hidden;
}
.sect{
  padding:1.1rem 1.4rem 1.4rem;
  border-bottom:1px solid var(--line);
}
.sect:last-child{border-bottom:none}
.sect-title{
  margin:-1.1rem -1.4rem 1.1rem;
  padding:.65rem 1.4rem;
  background:var(--navy);
  color:#fff;
  font-size:1.02rem;
  font-weight:600;
  letter-spacing:.06em;
}

.grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem 1.2rem;
}
.subgroup{
  margin-top:1.2rem;border:1px dashed var(--line);
  border-radius:6px;padding:.8rem 1rem;
}
.subgroup legend{
  padding:0 .4rem;color:var(--navy);font-weight:600;font-size:.9rem;
}

.field{display:flex;flex-direction:column;gap:.3rem}
.field-full{grid-column:1/-1}
.field > span, .field-label{
  font-size:.85rem;color:var(--navy-deep);font-weight:500;
}
.field em{color:var(--danger);font-style:normal}
.field small{color:var(--muted);font-weight:400;margin-left:.3em}

.field input[type=text],
.field input[type=email],
.field input[type=date],
.field input[type=password],
.field input:not([type]),
.field select,
.field textarea,
.apply-form textarea{
  width:100%;
  padding:.55rem .7rem;
  border:1px solid #c9c4b3;
  border-radius:5px;
  background:#fffdf7;
  font-size:.95rem;
  font-family:inherit;
  color:var(--text);
  transition:border-color .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none;
  border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(26,58,110,.15);
  background:#fff;
}
.field textarea{resize:vertical;min-height:80px}
.field input[type=file]{
  padding:.4rem 0;font-size:.9rem;
}

.inline-pair{display:flex;gap:.5rem;align-items:center}
.inline-pair input{flex:1;min-width:0}
.suffix{color:var(--muted);font-size:.9rem;white-space:nowrap}

.radio-row,.checkbox-row{
  display:flex;flex-wrap:wrap;gap:.3rem .9rem;
  padding:.35rem 0;
}
.radio-row label,.checkbox-row label{
  display:inline-flex;align-items:center;gap:.3rem;
  font-size:.92rem;cursor:pointer;
}
.inline-other{align-items:center !important}
.other-text{
  width:11rem;padding:.25rem .4rem !important;
  border:1px solid var(--line) !important;border-radius:4px !important;
  font-size:.88rem;background:#fff !important;
}

.pledge{
  background:#fbf6e8;
  border-left:3px solid var(--gold);
  padding:.7rem 1rem;
  font-size:.92rem;
  margin:0 0 .8rem;
  color:#3a3a3a;
}
.pledge-check{
  display:flex;align-items:center;gap:.45rem;
  margin-bottom:.9rem;font-size:.95rem;
}
.signature-input{
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;
  font-size:1.15rem;letter-spacing:.1em;
}

.field-photo small{color:var(--muted);font-size:.78rem;margin:0}

/* ========== Actions ========== */
.form-actions{
  padding:1.2rem 1.4rem 1.4rem;
  background:#fafaf4;
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
}
.form-actions .hint{margin:0;color:var(--muted);font-size:.85rem;text-align:center}
.btn-primary{
  background:var(--navy);color:#fff;border:none;
  padding:.7rem 2.2rem;border-radius:5px;
  font-size:1rem;font-weight:600;letter-spacing:.1em;
  cursor:pointer;transition:background .15s;
}
.btn-primary:hover{background:var(--navy-deep)}
.btn-secondary{
  background:#fff;color:var(--navy);border:1px solid var(--navy);
  padding:.45rem 1rem;border-radius:5px;font-size:.9rem;
  cursor:pointer;text-decoration:none;display:inline-block;
}
.btn-secondary:hover{background:#eef2f9}
.btn-link{color:var(--navy);text-decoration:none;font-size:.9rem;margin-left:.8rem}
.btn-link:hover{text-decoration:underline}

/* ========== Done & info cards ========== */
.done-card{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:2rem 1.6rem;text-align:center;
}
.done-card h2{margin:.4rem 0;color:var(--navy-deep)}
.done-badge{
  width:56px;height:56px;border-radius:50%;
  background:var(--ok);color:#fff;font-size:1.7rem;
  display:inline-flex;align-items:center;justify-content:center;margin-bottom:.4rem;
}
.callout{
  background:#fbf6e8;border-left:3px solid var(--gold);
  padding:1rem 1.2rem;border-radius:4px;text-align:left;
  margin:1.2rem auto 0;max-width:640px;
}
.callout h3{margin:0 0 .5rem;color:var(--navy-deep);font-size:1rem}
.copy-row{display:flex;gap:.5rem;margin-top:.4rem}
.copy-row input{
  flex:1;padding:.5rem .7rem;border:1px solid var(--line);border-radius:4px;
  font-family:ui-monospace,Menlo,monospace;font-size:.88rem;background:#fff;
}
.message-tpl{
  background:#fff;border:1px dashed var(--line);border-radius:4px;
  padding:.7rem .9rem;font-size:.88rem;white-space:pre-wrap;
  font-family:inherit;color:#444;margin:.4rem 0 0;
}
.muted{color:var(--muted)}
.small-tip{font-size:.82rem;margin-top:1rem}
code{background:#f1ede0;padding:.05em .35em;border-radius:3px;font-size:.85em}

.info-card{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:1rem 1.3rem;margin-bottom:1rem;
}
.info-card h2{margin:.2rem 0 .4rem;color:var(--navy-deep);font-size:1.1rem}
.info-card.collapsible details summary{
  cursor:pointer;font-weight:500;color:var(--navy);font-size:.92rem;
  padding:.3rem 0;
}

/* ========== Login ========== */
.login-card{
  max-width:380px;margin:2rem auto;
  padding:1.6rem;
}
.login-card h2{margin:0 0 1rem;color:var(--navy-deep);text-align:center}
.login-card button{margin-top:1rem;width:100%}

/* ========== Admin ========== */
.admin-toolbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:.6rem;margin-bottom:1rem;flex-wrap:wrap;
}
.admin-toolbar h2{margin:0;color:var(--navy-deep);font-size:1.2rem}
.admin-table{
  width:100%;border-collapse:collapse;
  background:var(--paper);border:1px solid var(--line);border-radius:6px;
  overflow:hidden;font-size:.9rem;
}
.admin-table th,.admin-table td{
  padding:.65rem .7rem;text-align:left;
  border-bottom:1px solid var(--line);vertical-align:top;
}
.admin-table th{
  background:var(--navy);color:#fff;font-weight:500;font-size:.85rem;
}
.admin-table tr:last-child td{border-bottom:none}
.admin-table tr:hover td{background:#fbf9f0}
.small{font-size:.8rem}
.empty{text-align:center;color:var(--muted);padding:2rem !important}

.tag{
  display:inline-block;padding:.15rem .55rem;border-radius:99px;
  font-size:.78rem;font-weight:500;
}
.tag-ok{background:#dff1e4;color:var(--ok)}
.tag-warn{background:#fbf0d4;color:#9a6a17}
.tag-no{background:#fdecec;color:var(--danger)}
.tag-pending{background:#eee;color:#666}

.readonly-list{
  display:grid;grid-template-columns:9rem 1fr;gap:.4rem .8rem;
  margin:0;
}
.readonly-list.cols-2{
  grid-template-columns:8rem 1fr 8rem 1fr;
}
.readonly-list dt{color:var(--muted);font-size:.85rem}
.readonly-list dd{margin:0;font-size:.93rem}
.readonly-list dd.sig{
  font-family:"Kaiti SC","STKaiti","KaiTi",serif;font-size:1.1rem;color:var(--navy-deep);
}
.readonly-block{
  background:#fbf9f0;border:1px solid var(--line);border-radius:4px;
  padding:.7rem .9rem;font-family:inherit;white-space:pre-wrap;margin:0;
  font-size:.92rem;
}
.thumb{max-width:90px;max-height:120px;border:1px solid var(--line);border-radius:4px}
.rec-block{
  border:1px solid var(--line);border-radius:6px;
  padding:.8rem 1rem;margin-bottom:.7rem;background:#fbf9f0;
}
.rec-block h4{margin:0 0 .5rem;color:var(--navy-deep)}

/* ========== Charter landing ========== */
.charter-intro{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:1.3rem 1.5rem;margin-bottom:1rem;
}
.charter-intro h2{margin:0 0 .5rem;color:var(--navy-deep);font-size:1.2rem}
.charter-intro p{margin:0;font-size:.95rem}
.charter-doc{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:1.6rem 1.5rem;margin-bottom:1rem;
}
.charter-head{
  text-align:center;border-bottom:2px solid var(--gold);
  padding-bottom:1rem;margin-bottom:1.2rem;
}
.charter-head h1{
  margin:0;color:var(--navy-deep);font-size:1.5rem;letter-spacing:.1em;
}
.charter-sub{margin:.4rem 0 0;color:var(--gold);font-size:.85rem}
.charter-doc .chapter{
  color:var(--navy);font-size:1.08rem;letter-spacing:.04em;
  margin:1.6rem 0 .7rem;padding-bottom:.35rem;
  border-bottom:1px solid var(--line);
}
.charter-doc .chapter:first-of-type{margin-top:.4rem}
.charter-doc .article{
  margin:.6rem 0;line-height:1.75;font-size:.95rem;
  text-align:justify;
}
.charter-doc .article b{color:var(--navy-deep);margin-right:.15em}
.charter-doc .sub-list{
  margin:.3rem 0 .7rem;padding-left:2.6rem;
  list-style:none;counter-reset:sub;
}
.charter-doc .sub-list li{
  margin:.32rem 0;line-height:1.7;font-size:.93rem;text-align:justify;
  position:relative;
}
.charter-doc .sub-list li::before{
  counter-increment:sub;
  content:"（" counter(sub, cjk-ideographic) "）";
  position:absolute;left:-2.5rem;color:var(--navy);
}
.charter-doc .workgroup-list{
  margin:.4rem 0 .7rem;padding:.7rem 1rem;
  background:#fbf9f0;border-radius:6px;
  display:grid;grid-template-columns:auto 1fr;gap:.4rem .8rem;
}
.charter-doc .workgroup-list dt{
  color:var(--navy-deep);font-weight:600;white-space:nowrap;font-size:.93rem;
}
.charter-doc .workgroup-list dd{margin:0;font-size:.93rem;line-height:1.6}
.charter-sign{
  margin-top:1.6rem;text-align:right;color:var(--navy-deep);
}
.charter-sign p{margin:.2rem 0;font-size:.95rem}
.charter-gate{
  background:var(--paper);border:1px solid var(--line);border-radius:8px;
  padding:1.3rem 1.5rem;display:flex;flex-direction:column;
  align-items:center;gap:.9rem;
}
.charter-gate .pledge-check{margin:0;font-size:1rem}
.btn-primary.btn-disabled{
  background:#b9bcc4;cursor:not-allowed;pointer-events:auto;
}
.btn-primary.btn-disabled:hover{background:#b9bcc4}
a.btn-primary{text-decoration:none;display:inline-block}

/* ========== Topbar ========== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--navy-deep);color:#fff;
  padding:.5rem 1.1rem;font-size:.88rem;
}
.topbar-brand{
  color:var(--gold-soft);text-decoration:none;font-weight:600;
  letter-spacing:.05em;
}
.topbar-actions{display:flex;align-items:center;gap:.9rem}
.topbar-actions a{color:#dfe5f0;text-decoration:none}
.topbar-actions a:hover{color:#fff;text-decoration:underline}
.topbar-user{color:var(--gold-soft);font-size:.85rem}

/* ========== Login / register extras ========== */
.login-tip{font-size:.85rem;margin:-.4rem 0 1rem;text-align:center}
.login-switch{font-size:.85rem;text-align:center;margin:.6rem 0 0}
.login-switch a{color:var(--navy);font-weight:500}

/* ========== Draft note & buttons ========== */
.draft-note strong{color:var(--navy-deep);font-size:.95rem}
.draft-note p{margin:.35rem 0 0;font-size:.88rem}
.field-err{font-size:.8rem}
.photo-current{
  display:flex;align-items:center;gap:.7rem;
  margin:.2rem 0 .4rem;
}
.photo-current img{
  max-width:80px;max-height:106px;
  border:1px solid var(--line);border-radius:4px;
}
.btn-row{
  display:flex;gap:.8rem;flex-wrap:wrap;justify-content:center;
}
.btn-lg{padding:.7rem 1.8rem;font-size:1rem;font-weight:600}

/* ========== Admin reset password ========== */
.reset-pw-form{
  display:flex;align-items:flex-end;gap:.7rem;flex-wrap:wrap;
  margin-top:.9rem;padding-top:.9rem;border-top:1px dashed var(--line);
}
.reset-pw-form .field{flex:1;min-width:200px}

/* ========== Responsive ========== */
@media (max-width:640px){
  .grid{grid-template-columns:1fr}
  .readonly-list,.readonly-list.cols-2{grid-template-columns:6rem 1fr}
  .banner-frame h1{font-size:1.4rem}
  .sect{padding:1rem}
  .sect-title{margin:-1rem -1rem 1rem;padding:.6rem 1rem}
  .admin-table{font-size:.82rem}
  .admin-table th,.admin-table td{padding:.5rem .4rem}
  .inline-pair{flex-wrap:wrap}
  .inline-pair input,.inline-pair select{flex:1 1 100%}
  .btn-row{flex-direction:column;width:100%}
  .btn-row button{width:100%}
  .topbar{font-size:.82rem;padding:.45rem .8rem}
  .pdf-wrap iframe{height:55vh}
}