/* ============================================================
   camp.css — shared chrome for apply / payment / scholarship
   Matches 260530_mit-camp-landing.html design tokens.
   ============================================================ */
:root{
  --red:#e2484b;
  --blue:#3fb4e8;
  --blue-deep:#1f96cf;
  --teal:#006f87;
  --green:#10a36a;
  --amber:#f0a92a;
  --ink:#203a42;
  --ink-soft:#33525c;
  --cream:#f3efe6;
  --paper:#eceae3;
  --line-green:#06c755;
  --shadow:0 12px 30px rgba(32,58,66,.13);
  --maxw:760px;
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:"Noto Sans TC",sans-serif;background:var(--paper);color:var(--ink);
  -webkit-font-smoothing:antialiased;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;
  word-break:normal;overflow-wrap:break-word;text-wrap:pretty;}
.latin{font-family:"Archivo","Noto Sans TC",sans-serif;}
.nb{white-space:nowrap;}
.field input.locked{background:rgba(32,58,66,.05);color:var(--ink);cursor:not-allowed;}
.consent-dl{display:flex;flex-wrap:wrap;gap:10px;margin:4px 0 12px;}
.consent-dl a{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;
  color:var(--blue-deep);background:rgba(63,180,232,.1);border:1px solid rgba(31,150,207,.3);
  border-radius:9px;padding:9px 14px;text-decoration:none;}
.consent-dl a:hover{background:rgba(63,180,232,.18);}
.file-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0;}
.filebtn{display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-weight:700;font-size:14px;
  color:var(--ink);background:#fff;border:1.6px solid var(--ink);border-radius:10px;padding:11px 18px;transition:.15s;}
.filebtn:hover{background:var(--ink);color:#fff;}
.filebtn svg{width:17px;height:17px;}
.file-name{margin-left:12px;font-size:13.5px;color:var(--ink-soft);vertical-align:middle;word-break:break-all;}
.file-name.has{color:var(--green);font-weight:700;}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px;width:100%;}

/* ============ NAV ============ */
.nav{position:sticky;top:0;z-index:60;background:rgba(243,239,230,.9);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(32,58,66,.10);}
.nav-in{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:20px;}
.brand{display:flex;align-items:center;}
.brand-logo{height:51px;width:auto;display:block;}
.nav-right{margin-left:auto;display:flex;align-items:center;gap:12px;}
.nav-back{font-weight:700;font-size:14.5px;color:var(--ink-soft);display:inline-flex;align-items:center;gap:6px;}
.nav-back:hover{color:var(--ink);}
.nav-back svg{width:16px;height:16px;}
.nav-back .nbk-short{display:none;}
.lang-toggle{display:flex;border:1.5px solid rgba(32,58,66,.25);border-radius:999px;overflow:hidden;}
.lang-toggle button{border:none;background:transparent;font-family:"Archivo",sans-serif;font-weight:800;
  font-size:13px;padding:6px 13px;cursor:pointer;color:var(--ink-soft);letter-spacing:.5px;}
.lang-toggle button.on{background:var(--ink);color:var(--cream);}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;border-radius:12px;
  padding:15px 26px;font-family:inherit;font-weight:900;font-size:17px;cursor:pointer;transition:transform .12s,box-shadow .12s;}
.btn:hover{transform:translateY(-2px);}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;}
.btn-primary{background:var(--red);color:#fff;box-shadow:0 10px 22px rgba(226,72,75,.35);}
.btn-line{background:var(--line-green);color:#fff;box-shadow:0 10px 22px rgba(6,199,85,.30);}
.btn-ghost{background:transparent;color:var(--ink);border:2px solid var(--ink);}
.btn svg{width:20px;height:20px;}
.btn-block{width:100%;}

/* ============ PAGE HEADER ============ */
main{flex:1;}
.phead{background:var(--amber);padding:38px 0 34px;}
.phead .ptag{font-family:"Archivo",sans-serif;font-weight:800;font-size:13px;letter-spacing:2px;
  text-transform:uppercase;color:var(--ink);opacity:.7;}
.phead h1{font-weight:900;font-size:38px;line-height:1.12;margin-top:6px;color:var(--ink);}
.phead p{margin-top:10px;font-size:16.5px;font-weight:500;color:var(--ink);}

/* ============ MINI STEPPER ============ */
.steps{display:flex;align-items:center;gap:6px;margin-top:20px;flex-wrap:wrap;}
.steps .st{display:inline-flex;align-items:center;gap:8px;font-weight:800;font-size:13.5px;color:var(--ink);opacity:.45;}
.steps .st .n{width:24px;height:24px;border-radius:50%;background:rgba(32,58,66,.18);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:"Archivo",sans-serif;font-size:13px;}
.steps .st.on{opacity:1;}
.steps .st.on .n{background:var(--ink);color:var(--cream);}
.steps .sep{width:18px;height:2px;background:rgba(32,58,66,.25);border-radius:2px;}

/* ============ CONTENT / CARDS ============ */
.sect{padding:36px 0 56px;}
.card{background:#fff;border-radius:20px;padding:28px 30px;box-shadow:var(--shadow);
  border:1px solid rgba(32,58,66,.06);}
.card + .card{margin-top:20px;}
.card h2{font-weight:900;font-size:20px;margin-bottom:4px;}
.card .lead{font-size:14.5px;color:var(--ink-soft);font-weight:500;margin-bottom:18px;}

/* ============ FORM ============ */
.field{margin-top:18px;}
.field:first-child{margin-top:0;}
.field > label{display:block;font-weight:800;font-size:14.5px;margin-bottom:7px;}
.field .req{color:var(--red);margin-left:3px;}
.field input:not([type=checkbox]):not([type=radio]),.field textarea,.field select{
  width:100%;border:2px solid rgba(32,58,66,.16);border-radius:11px;padding:12px 14px;font-family:inherit;
  font-size:15.5px;color:var(--ink);background:#fff;transition:border-color .15s;}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue-deep);}
.field textarea{min-height:108px;resize:vertical;line-height:1.6;}
.field .hint{font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:6px;}

/* plan radio cards */
.plans{display:grid;gap:11px;}
.plan{position:relative;border:2px solid rgba(32,58,66,.14);border-radius:14px;padding:15px 17px;cursor:pointer;
  transition:border-color .15s,background .15s;display:flex;align-items:center;gap:14px;}
.plan:hover{border-color:var(--ink-soft);}
.plan.sel{border-color:var(--red);background:rgba(226,72,75,.05);}
.plan input{position:absolute;opacity:0;pointer-events:none;}
.plan .pl-radio{flex-shrink:0;width:21px;height:21px;border-radius:50%;border:2px solid rgba(32,58,66,.3);
  display:flex;align-items:center;justify-content:center;transition:.15s;}
.plan.sel .pl-radio{border-color:var(--red);}
.plan.sel .pl-radio::after{content:"";width:11px;height:11px;border-radius:50%;background:var(--red);}
.plan .pl-info{flex:1;min-width:0;}
.plan .pl-name{font-weight:800;font-size:15.5px;line-height:1.3;}
.plan .pl-sub{font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:2px;}
.plan .pl-bonus{display:block;margin-top:6px;font-size:12.5px;font-weight:700;color:var(--green);line-height:1.4;}
.plan .pl-price{font-family:"Archivo",sans-serif;font-weight:900;font-size:19px;white-space:nowrap;color:var(--ink);}
.plan .pl-price small{font-size:12px;font-weight:800;}

/* sub-choice + add-on */
.subchoice{margin-top:-3px;padding:14px 16px;background:rgba(63,180,232,.08);border-radius:12px;
  border:1px dashed rgba(31,150,207,.35);}
.subchoice.hide{display:none;}
.subchoice .sc-h{font-weight:800;font-size:13.5px;margin-bottom:9px;}
.opt-row{display:flex;gap:10px;flex-wrap:wrap;}
.opt{flex:1;min-width:160px;border:2px solid rgba(32,58,66,.16);border-radius:10px;padding:10px 13px;cursor:pointer;
  font-weight:700;font-size:14px;background:#fff;transition:.15s;display:flex;align-items:center;gap:9px;}
.opt:hover{border-color:var(--ink-soft);}
.opt.sel{border-color:var(--blue-deep);background:rgba(63,180,232,.12);}
.opt input{position:absolute;opacity:0;pointer-events:none;}
.opt .dot{width:16px;height:16px;border-radius:50%;border:2px solid rgba(32,58,66,.3);flex-shrink:0;}
.opt.sel .dot{border-color:var(--blue-deep);background:var(--blue-deep);box-shadow:inset 0 0 0 3px #fff;}
.opt .opt-sub{display:block;font-size:11.5px;color:var(--ink-soft);font-weight:600;margin-top:1px;}

.addon{margin-top:14px;display:flex;align-items:center;gap:13px;border:2px solid rgba(32,58,66,.14);
  border-radius:13px;padding:14px 16px;cursor:pointer;transition:.15s;}
.addon:hover{border-color:var(--ink-soft);}
.addon.sel{border-color:var(--green);background:rgba(16,163,106,.07);}
.addon input{position:absolute;opacity:0;pointer-events:none;}
.addon .ck{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:2px solid rgba(32,58,66,.3);
  display:flex;align-items:center;justify-content:center;transition:.15s;}
.addon.sel .ck{background:var(--green);border-color:var(--green);}
.addon .ck svg{width:14px;height:14px;opacity:0;}
.addon.sel .ck svg{opacity:1;}
.addon .ad-info{flex:1;}
.addon .ad-name{font-weight:800;font-size:14.5px;}
.addon .ad-sub{font-size:12.5px;color:var(--ink-soft);font-weight:500;margin-top:1px;}
.addon .ad-price{font-family:"Archivo",sans-serif;font-weight:900;font-size:16px;white-space:nowrap;}

/* radio list (scholarship need-level) */
.radiolist{display:grid;gap:9px;margin-top:4px;}
.ropt{position:relative;display:flex;gap:12px;align-items:flex-start;border:2px solid rgba(32,58,66,.14);
  border-radius:12px;padding:13px 15px;cursor:pointer;transition:border-color .15s,background .15s;
  font-size:14.5px;font-weight:600;line-height:1.45;}
.ropt:hover{border-color:var(--ink-soft);}
.ropt.sel{border-color:var(--red);background:rgba(226,72,75,.05);}
.ropt input{position:absolute;opacity:0;pointer-events:none;}
.ropt .rd{flex-shrink:0;width:20px;height:20px;border-radius:50%;border:2px solid rgba(32,58,66,.3);margin-top:1px;
  display:flex;align-items:center;justify-content:center;}
.ropt.sel .rd{border-color:var(--red);}
.ropt.sel .rd::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--red);}
.confirm-check{display:flex;gap:11px;align-items:flex-start;margin-top:20px;cursor:pointer;
  font-size:14px;font-weight:600;line-height:1.5;}
.confirm-check input{position:absolute;opacity:0;pointer-events:none;}
.confirm-check .cb{flex-shrink:0;width:22px;height:22px;border-radius:6px;border:2px solid rgba(32,58,66,.3);
  display:flex;align-items:center;justify-content:center;margin-top:1px;transition:.15s;}
.confirm-check.on .cb{background:var(--green);border-color:var(--green);}
.confirm-check .cb svg{width:14px;height:14px;opacity:0;}
.confirm-check.on .cb svg{opacity:1;}

/* total bar */
.totalbar{position:sticky;bottom:14px;background:var(--ink);color:var(--cream);border-radius:14px;
  padding:15px 20px;display:flex;align-items:center;justify-content:space-between;margin-top:20px;box-shadow:var(--shadow);}
.totalbar .tl{font-weight:700;font-size:14px;color:rgba(255,255,255,.8);}
.totalbar .tv{font-family:"Archivo",sans-serif;font-weight:900;font-size:26px;color:#fff;}
.totalbar .tv small{font-size:15px;}

.form-note{margin-top:14px;font-size:13px;color:var(--ink-soft);font-weight:500;text-align:center;line-height:1.6;}
.err{color:var(--red);font-weight:700;font-size:13px;margin-top:6px;display:none;}
.err.show{display:block;}

/* ============ PAYMENT BITS ============ */
.summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 0;}
.summary + .summary{border-top:1px solid rgba(32,58,66,.12);}
.summary .s-name{font-weight:700;font-size:15px;}
.summary .s-amt{font-family:"Archivo",sans-serif;font-weight:900;font-size:20px;white-space:nowrap;}
.grandtotal{display:flex;align-items:center;justify-content:space-between;margin-top:8px;padding-top:16px;
  border-top:2px solid var(--ink);}
.grandtotal .gl{font-weight:800;font-size:16px;}
.grandtotal .gv{font-family:"Archivo",sans-serif;font-weight:900;font-size:30px;color:var(--red);}
.grandtotal .gv small{font-size:17px;}

.bankbox{background:var(--cream);border-radius:14px;padding:20px 22px;margin-top:4px;}
.bankrow{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:1px dashed rgba(32,58,66,.18);}
.bankrow:last-child{border-bottom:none;}
.bankrow .bk{font-weight:700;font-size:14px;color:var(--ink-soft);flex-shrink:0;}
.bankrow .bv{font-weight:800;font-size:15.5px;text-align:right;font-family:"Archivo","Noto Sans TC",sans-serif;}
.placeholder{background:rgba(240,169,42,.25);border-radius:5px;padding:1px 8px;color:#8a5d0c;}

.todo-flag{background:rgba(226,72,75,.1);border:1.5px dashed var(--red);border-radius:12px;
  padding:12px 16px;margin-bottom:18px;font-size:13px;font-weight:700;color:var(--red);}

.infolist{list-style:none;display:grid;gap:13px;margin-top:4px;}
.infolist li{display:flex;gap:13px;align-items:flex-start;font-size:15px;font-weight:500;color:var(--ink);line-height:1.5;}
.infolist .ic{flex-shrink:0;width:30px;height:30px;border-radius:50%;background:var(--amber);
  display:flex;align-items:center;justify-content:center;font-weight:900;font-family:"Archivo",sans-serif;
  font-size:14px;color:var(--ink);}
.infolist li b{color:var(--red);}
.deadline-tag{display:inline-block;background:var(--red);color:#fff;font-weight:800;font-size:12px;
  padding:2px 9px;border-radius:6px;margin-left:4px;}

/* LINE help card */
.line-help{margin-top:20px;display:flex;align-items:center;gap:16px;background:var(--ink);border-radius:16px;
  padding:18px 22px;}
.line-help .lh-ic{flex-shrink:0;width:42px;height:42px;border-radius:11px;background:var(--line-green);
  display:flex;align-items:center;justify-content:center;}
.line-help .lh-ic svg{width:24px;height:24px;}
.line-help .lh-t{color:#fff;font-weight:800;font-size:15px;}
.line-help .lh-s{color:rgba(255,255,255,.72);font-size:13px;margin-top:2px;}
.line-help .lh-go{margin-left:auto;color:var(--line-green);font-weight:800;font-size:14px;white-space:nowrap;}

/* scholarship story */
.story{background:var(--ink);color:var(--cream);border-radius:18px;padding:24px 26px;margin-bottom:20px;}
.story h2{color:#fff;font-weight:900;font-size:19px;margin-bottom:10px;}
.story p{font-size:14.5px;line-height:1.8;color:rgba(255,255,255,.9);font-weight:500;}
.notice{background:rgba(240,169,42,.16);border-radius:12px;padding:14px 18px;font-size:14px;font-weight:600;
  color:var(--ink);line-height:1.6;margin-bottom:18px;display:flex;gap:11px;align-items:flex-start;}
.notice .ni{flex-shrink:0;font-size:18px;}

/* thank-you state */
.thanks{text-align:center;padding:20px 0;}
.thanks .big{width:72px;height:72px;border-radius:50%;background:var(--green);margin:0 auto 18px;
  display:flex;align-items:center;justify-content:center;}
.thanks .big svg{width:38px;height:38px;}
.thanks h2{font-size:24px;font-weight:900;}
.thanks p{font-size:15px;color:var(--ink-soft);font-weight:500;margin-top:10px;max-width:30em;margin-left:auto;margin-right:auto;}
.hide{display:none !important;}

/* ============ FOOTER ============ */
footer{background:#18272d;color:rgba(255,255,255,.7);padding:30px 0;margin-top:auto;}
.foot-in{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;
  justify-content:space-between;gap:18px;flex-wrap:wrap;}
.foot-logo{display:inline-flex;background:#fff;border-radius:11px;padding:8px 12px;}
.foot-logo img{height:40px;width:auto;display:block;}
.fnote{font-size:13px;}

/* ============ RESPONSIVE ============ */
@media(max-width:560px){
  .nav-back .nbk-full{display:none;}
  .nav-back .nbk-short{display:inline;}
  .phead h1{font-size:30px;}
  .card{padding:22px 20px;}
  .plan .pl-price{font-size:17px;}
  .summary .s-amt{font-size:18px;}
  .grandtotal .gv{font-size:26px;}
  .bankrow{flex-direction:column;gap:3px;}
  .bankrow .bv{text-align:left;}
  .line-help{flex-wrap:wrap;}
  .line-help .lh-go{margin-left:0;width:100%;}
}