:root{
  --navy:#0f2740;
  --navy-2:#16375a;
  --blue:#1c5d8c;
  --blue-light:#e7f0f7;
  --orange:#e8630c;
  --orange-dark:#c14f08;
  --yellow:#f2b705;
  --paper:#f2f4f6;
  --card:#ffffff;
  --ink:#182430;
  --ink-soft:#5b6b78;
  --line:#dde3e8;
  --success:#1f7a4d;
  --success-bg:#e7f5ee;
  --danger:#c23b32;
  --danger-bg:#fbeae8;
  --warn-bg:#fff6e0;
  --radius:10px;
  --stripe: repeating-linear-gradient(135deg, var(--orange) 0 14px, var(--navy) 14px 28px);
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:'Noto Sans HK', 'PingFang HK', sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,.display{font-family:'Oswald','Noto Sans HK',sans-serif; letter-spacing:.02em;}
.mono{font-family:'JetBrains Mono', monospace;}
button{font-family:inherit;}
a{color:inherit;}

/* ---------- Layout shell ---------- */
#app{min-height:100vh; display:flex; flex-direction:column;}
.stripe-bar{height:6px; background:var(--stripe); background-size:40px 40px;}
header.topbar{
  background:var(--navy);
  color:#fff;
  padding:14px 24px;
  display:flex; align-items:center; justify-content:space-between;
  gap:16px;
}
.brand{display:flex; align-items:center; gap:12px; cursor:pointer;}
.brand-mark{
  width:40px; height:40px; border-radius:8px;
  background:var(--orange);
  display:flex; align-items:center; justify-content:center;
  font-family:'Oswald',sans-serif; font-weight:700; font-size:16px; color:var(--navy);
  flex-shrink:0;
}
.brand-text .zh{font-family:'Oswald',sans-serif; font-weight:600; font-size:17px; line-height:1.2;}
.brand-text .en{font-size:11px; color:#b9c9d8; letter-spacing:.04em;}
.top-actions{display:flex; align-items:center; gap:10px; font-size:13px;}
.pill-btn{
  background:transparent; border:1px solid #3b5878; color:#dce8f2;
  padding:7px 14px; border-radius:20px; cursor:pointer; font-size:13px;
  transition:.15s;
}
.pill-btn:hover{background:#1d3b5c;}
.pill-btn.active{background:var(--orange); border-color:var(--orange); color:#fff;}

main{flex:1; padding:28px 20px 60px; display:flex; justify-content:center;}
.wrap{width:100%; max-width:840px;}
.wrap.wide{max-width:1040px;}

.page-title{margin:0 0 4px;}
.page-title .zh{font-size:24px; font-weight:600; color:var(--navy);}
.page-title .en{font-size:13px; color:var(--ink-soft); font-weight:500; text-transform:uppercase; letter-spacing:.06em;}
.page-sub{color:var(--ink-soft); font-size:14px; margin:6px 0 24px;}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:24px;
  margin-bottom:18px;
}
.card h3{margin:0 0 14px; font-size:16px; color:var(--navy); font-weight:600; display:flex; align-items:center; gap:8px;}
.card h3 .en-tag{font-size:11px; color:var(--ink-soft); font-weight:500; text-transform:uppercase; letter-spacing:.04em;}
/* ---------- Home tiles ---------- */
.tile-grid{display:grid; 
  /*grid-template-columns:1fr 1fr; */ 
  gap:16px;}
@media(max-width:640px){.tile-grid{grid-template-columns:1fr;}}
.tile{
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  padding:20px; cursor:pointer; text-align:left; position:relative; overflow:hidden;
  transition:.15s; display:flex; gap:14px; align-items:flex-start;
}
.tile:hover{border-color:var(--orange); box-shadow:0 4px 14px rgba(20,40,60,.08); transform:translateY(-1px);}
.tile .num{
  font-family:'Oswald',sans-serif; font-weight:700; font-size:22px; color:var(--orange);
  width:34px; flex-shrink:0;
}
.tile .t-zh{font-size:15.5px; font-weight:700; color:var(--navy); margin-bottom:3px;}
.tile .t-en{font-size:12px; color:var(--ink-soft);}
.tile .t-desc{font-size:12.5px; color:var(--ink-soft); margin-top:6px; line-height:1.5;}

/* ---------- Stepper ---------- */
.stepper{display:flex; align-items:center; margin-bottom:26px; gap:0;}
.step{display:flex; align-items:center; gap:10px; flex:1;}
.step-circle{
  width:28px; height:28px; border-radius:50%; background:#dfe6ec; color:var(--ink-soft);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0;
}
.step.active .step-circle{background:var(--orange); color:#fff;}
.step.done .step-circle{background:var(--success); color:#fff;}
.step-label{font-size:12.5px; color:var(--ink-soft); font-weight:500;}
.step.active .step-label{color:var(--navy); font-weight:700;}
.step-line{height:2px; background:var(--line); flex:1; margin:0 6px;}

/* ---------- Forms ---------- */
.field{margin-bottom:16px;}
.field label{display:block; font-size:13.5px; font-weight:700; color:var(--navy); margin-bottom:5px;}
.field label .en{font-weight:500; color:var(--ink-soft); font-size:11.5px; margin-left:6px; text-transform:none;}
.field .req{color:var(--danger); margin-left:2px;}
.field input[type=text], .field input[type=date], .field input[type=email], .field input[type=tel], .field input[type=password], .field input[type=number], .field input[type=time], .field select{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:7px; font-size:14px; color:var(--ink);
  background:#fff; font-family:inherit;
}
.field input:focus, .field select:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue);}
.hint{font-size:0.7rem; margin:5px 0; color:#AAA;}
.field .hint{font-size:12px; color:var(--ink-soft); margin-top:5px;}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
@media(max-width:560px){.grid2{grid-template-columns:1fr;}}
.checkbox-row{display:flex; align-items:center; gap:8px; margin-top:6px; font-size:13px; color:var(--ink-soft);}
.checkbox-row input{width:16px; height:16px;}
.radio-set{display:flex; gap:22px; margin-top:4px;}
.radio-opt{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--ink);}
.radio-opt input{width:16px; height:16px;}

.upload-box{
  border:1.5px dashed var(--line); border-radius:8px; padding:18px; text-align:center;
  font-size:13px; color:var(--ink-soft); cursor:pointer; background:#fafbfc;
}
.upload-box:hover{border-color:var(--blue);}
.upload-box.filled{border-style:solid; border-color:var(--success); background:var(--success-bg); color:var(--success); font-weight:600;}

.notice{
  border-radius:8px; padding:14px 16px; font-size:13.5px; margin:14px 0; line-height:1.6;
}
.notice.warn{background:var(--warn-bg); border:1px solid #f0d27a; color:#7a5b04;}
.notice.danger{background:var(--danger-bg); border:1px solid #eab6b0; color:var(--danger);}
.notice.success{background:var(--success-bg); border:1px solid #a9d8c0; color:var(--success);}
.notice.info{background:var(--blue-light); border:1px solid #b9d3e6; color:var(--navy-2);}

/* ---------- Buttons ---------- */
.btn-row{
  display:flex;
  gap:10px;
  margin:22px 0px;
  flex-wrap:wrap;
}
.btn-row-special{
  display:flex;
  gap:10px;
  margin:22px 0px;
  flex-wrap:wrap;
  border:1px solid #ccc;
  border-radius:5px;
  background:#FFF;
  padding:10px;
}
.btn{
  padding:11px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; border:none;
  display:inline-flex; align-items:center; gap:8px; transition:.15s;
}
.btn-primary{background:var(--orange); color:#fff;}
.btn-primary:hover{background:var(--orange-dark);}
.btn-secondary{background:#fff; color:var(--navy); border:1.5px solid var(--line);}
.btn-secondary:hover{border-color:var(--blue); color:var(--blue);}
.btn-ghost{background:transparent; color:var(--ink-soft); border:1.5px solid #ccc;}
.btn-ghost:hover{color:var(--navy);}
.btn:disabled{opacity:.45; cursor:not-allowed;}

/* ---------- Course cards ---------- */
.course-option{
  border:1.5px solid var(--line); border-radius:9px; padding:16px; margin-bottom:12px; cursor:pointer;
  display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
}
.course-option.selected{border-color:var(--orange); background:#fff8f2;}
.course-option.full{opacity:.55; cursor:not-allowed;}
.co-left .lang-tag{
  display:inline-block; font-size:11px; font-weight:700; padding:2px 8px; border-radius:12px; margin-bottom:6px;
  background:var(--blue-light); color:var(--blue);
}
.co-left .co-date{font-weight:700; font-size:15px; color:var(--navy);}
.co-left .co-sub{font-size:12.5px; color:var(--ink-soft); margin-top:3px;}
.co-right{text-align:right; font-size:12px; color:var(--ink-soft); min-width:120px;}
.capacity-bar{width:120px; height:6px; background:#e6eaee; border-radius:4px; overflow:hidden; margin-top:5px; margin-left:auto;}
.capacity-fill{height:100%; background:var(--blue);}
.capacity-fill.almost{background:var(--yellow);}
.capacity-fill.full{background:var(--danger);}
.recorded-course-action{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  margin:0 0 14px; padding:12px 14px; border-radius:8px;
  background:var(--blue-light); color:var(--navy-2); font-size:13px;
}
.recorded-course-action .btn{padding:8px 18px; flex-shrink:0;}
.course-popup-card{display:none;}
.course-popup-card.active{display:block;}
.modal-backdrop{
  position:fixed; inset:0; z-index:20; display:flex; align-items:center; justify-content:center;
  padding:20px; background:rgba(15,39,64,.45);
}
.modal-card{
  width:100%; max-width:480px; background:var(--card); border:1px solid var(--line);
  border-radius:var(--radius); padding:24px; box-shadow:0 14px 40px rgba(15,39,64,.25);
}
.modal-card h3{margin:0 0 14px; color:var(--navy);}

/* ---------- Summary table ---------- */
.summary-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.summary-table tr{border-bottom:1px solid var(--line);}
.summary-table tr:last-child{border-bottom:none;}
.summary-table td{padding:9px 4px; vertical-align:top;}
.summary-table td.k{color:var(--ink-soft); width:38%; font-weight:500;}
.summary-table td.v{font-weight:700; color:var(--navy);}

/* ---------- Permit card ---------- */
.permit-wrap{display:flex; justify-content:center; margin:20px 0;}
.permit{
  width:340px; border-radius:14px; overflow:hidden; background:linear-gradient(155deg, var(--navy) 0%, var(--navy-2) 65%, var(--blue) 100%);
  color:#fff; box-shadow:0 12px 30px rgba(15,39,64,.28); position:relative;
}
.permit::before{content:''; position:absolute; top:0; right:0; width:56px; height:100%; background:var(--stripe); background-size:22px 22px; opacity:.9;}
.permit-inner{padding:18px 20px; position:relative; z-index:1;}
.permit-top{display:flex; justify-content:space-between; align-items:flex-start;}
.permit-org .zh{font-size:13px; font-weight:700;}
.permit-org .en{font-size:9.5px; color:#a9c1d6; letter-spacing:.04em;}
.permit-badge{background:var(--orange); font-size:10px; font-weight:700; padding:3px 9px; border-radius:10px;}
.permit-body{display:flex; gap:14px; margin-top:16px; align-items:center;}
.permit-photo{width:58px; height:70px; border-radius:6px; background:rgba(255,255,255,.14); display:flex; align-items:center; justify-content:center; font-size:22px; flex-shrink:0; border:1px solid rgba(255,255,255,.25);}
.permit-name{font-size:16px; font-weight:700;}
.permit-id{font-family:'JetBrains Mono',monospace; font-size:12.5px; color:#cfe0ee; margin-top:4px;}
.permit-meta{display:flex; gap:18px; margin-top:14px; font-size:11px; color:#b9cade;}
.permit-meta b{display:block; color:#fff; font-size:12.5px; font-family:'JetBrains Mono',monospace; margin-top:2px;}
.permit-chip{width:30px; height:22px; border-radius:4px; background:linear-gradient(135deg,#e8c46a,#c99a2e); margin-bottom:8px;}

/* ---------- Admin roster ---------- */
.roster-table{width:100%; border-collapse:collapse; font-size:13px;}
.roster-table th{text-align:left; padding:9px 8px; background:var(--blue-light); color:var(--navy); font-size:12px; border-bottom:2px solid var(--line);}
.roster-table td{padding:8px; border-bottom:1px solid var(--line); vertical-align:middle;}
.roster-table input, .roster-table select{width:100%; padding:6px 7px; border:1px solid var(--line); border-radius:5px; font-size:12.5px;}
.roster-table .name-cell{font-weight:700; color:var(--navy); white-space:nowrap;}
.roster-table th.sortable-th{cursor:pointer; user-select:none; white-space:nowrap;}
.roster-table th.sortable-th:hover{background:var(--blue-light2, #dfeaf5);}
.status-chip{font-size:11px; font-weight:700; padding:2px 8px; border-radius:10px;}
.status-chip.saved{background:var(--success-bg); color:var(--success);}
.status-chip.pending{background:var(--warn-bg); color:#8a6a03;}

.admin-menu{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
@media(max-width:600px){.admin-menu{grid-template-columns:1fr;}}
.admin-menu .tile{align-items:center;}

.hint-box{background:var(--blue-light); border:1px solid #bcd6e8; border-radius:8px; padding:12px 14px; font-size:12.5px; color:var(--navy-2); margin-bottom:18px; line-height:1.6;}
.hint-box b{color:var(--navy);}
code.mono-inline{background:#fff; border:1px solid #bcd6e8; padding:1px 6px; border-radius:4px; font-family:'JetBrains Mono',monospace; font-size:11.5px;}

footer{text-align:center; font-size:11.5px; color:var(--ink-soft); padding:18px; border-top:1px solid var(--line); background:#fff;}