:root{
  --ink:#122a3d; --ink2:#1d3f57; --amber:#c07f2c; --amber-dark:#9c661f;
  --bg:#f6f4ee; --card:#ffffff; --border:#e3ddd0; --text:#1c1c1a; --muted:#6b6558;
  --danger:#a8402a; --success:#2f7a54; --radius:14px;
}
*{box-sizing:border-box;}
body{margin:0;background:var(--bg);color:var(--text);font-family:'Tajawal',sans-serif;min-height:100vh;}
.wrap{max-width:720px;margin:0 auto;padding:0 16px 60px;}
header.top{background:var(--ink);color:#fff;padding:18px 16px;display:flex;align-items:center;gap:14px;}
.crest{height:52px;flex:0 0 auto;display:flex;align-items:center;}
.crest img{height:100%;width:auto;object-fit:contain;}
header.top .titles{flex:1;min-width:0;}
header.top h1{font-size:16px;margin:0;font-weight:800;line-height:1.35;}
header.top p{margin:2px 0 0;font-size:12.5px;opacity:.82;}
header.top a.logout{color:#fff;font-size:13px;opacity:.85;text-decoration:none;border:1px solid rgba(255,255,255,.3);padding:6px 12px;border-radius:20px;}

.progressRow{display:flex;align-items:center;justify-content:space-between;margin:22px 0 6px;}
.progressPill{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:4px 14px;font-size:13px;color:var(--muted);font-weight:700;}
.stepTitle{font-size:19px;font-weight:800;color:var(--text);}
.progressTrack{height:6px;border-radius:6px;background:var(--border);margin:10px 0 26px;overflow:hidden;}
.progressFill{height:100%;background:var(--amber);border-radius:6px;transition:width .35s ease;}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px 20px;}
.field{margin-bottom:20px;}
.field label{display:block;font-size:14px;font-weight:700;margin-bottom:8px;}
.field .hint{font-size:12px;color:var(--muted);margin-top:6px;}
.field .err{font-size:12px;color:var(--danger);margin-top:6px;}
input[type=text],input[type=tel],input[type=email],input[type=number],input[type=date],input[type=password],select,textarea{
  width:100%;padding:12px 14px;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;
  font-size:15px;background:var(--bg);color:var(--text);
}
textarea{min-height:90px;resize:vertical;}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber);}
.toggleRow{display:flex;gap:10px;}
.toggleRow label{flex:1;}
.toggleRow input{display:none;}
.toggleRow span{display:block;padding:12px;text-align:center;border-radius:10px;border:1.5px solid var(--border);background:var(--bg);font-weight:700;cursor:pointer;}
.toggleRow input:checked + span{background:var(--ink);border-color:var(--ink);color:#fff;}
.chkRow{display:flex;align-items:flex-start;gap:10px;background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:12px 14px;cursor:pointer;}
.chkRow input{width:18px;height:18px;margin-top:2px;flex:0 0 auto;}
.chkRow span{font-size:14px;line-height:1.6;}

.fileBox{border:1.5px dashed var(--border);border-radius:10px;padding:14px;display:flex;align-items:center;gap:12px;}
.fileBox input[type=file]{font-size:13px;width:100%;}

.navRow{display:flex;gap:12px;margin-top:26px;}
.btn-primary,.btn-secondary{flex:1;padding:14px;border-radius:10px;font-family:inherit;font-size:15px;font-weight:800;cursor:pointer;border:1.5px solid transparent;}
.btn-primary{background:var(--ink);color:#fff;}
.btn-secondary{background:transparent;border-color:var(--border);color:var(--text);}
.btn-primary.amber{background:var(--amber);color:var(--ink);}

.banner{background:#fdecec;border:1px solid #e6b3ab;color:#7a1f10;border-radius:10px;padding:12px 14px;font-size:13px;margin-bottom:18px;}
.banner.ok{background:#e9f5ee;border-color:#a9d7bd;color:#1d5c3c;}
.doneWrap{text-align:center;padding:40px 10px;}
.doneWrap .check{width:70px;height:70px;border-radius:50%;background:var(--success);color:#fff;display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto 18px;}
.doneWrap h2{margin:0 0 8px;font-size:20px;}
.doneWrap p{color:var(--muted);font-size:14px;margin:0 0 22px;}
.refCode{font-family:monospace;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:10px 14px;display:inline-block;font-size:15px;letter-spacing:1px;}

.stepSection{display:none;}
.stepSection.active{display:block;}
.hiddenField{display:none;}

/* admin */
.adminBar{display:flex;gap:10px;margin:20px 0;}
.adminBar input{flex:1;padding:10px 14px;border:1.5px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-family:inherit;}
.appRow{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px;text-decoration:none;color:inherit;}
.appRow:hover{border-color:var(--amber);}
.appRow .who{font-weight:800;font-size:14.5px;}
.appRow .meta{font-size:12.5px;color:var(--muted);margin-top:3px;}
.pill{font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap;}
.pill.pending{background:#eef1e2;color:#5c6b2f;}
.pill.approved{background:#e2f0e7;color:var(--success);}
.pill.rejected{background:#f5e3de;color:var(--danger);}
.backLink{color:var(--amber-dark);font-weight:700;font-size:13.5px;cursor:pointer;display:inline-block;margin-bottom:14px;text-decoration:none;}
.emptyState{text-align:center;padding:60px 10px;color:var(--muted);}
.statusRow{display:flex;gap:10px;margin-top:18px;}
.statusRow select{flex:1;}
.reviewSection{border-bottom:1px solid var(--border);padding:16px 0;}
.reviewSection:last-child{border-bottom:none;}
.reviewHead h3{font-size:15px;margin:0 0 10px;font-weight:800;}
.reviewRow{display:flex;justify-content:space-between;gap:14px;padding:6px 0;font-size:14px;}
.reviewRow .k{color:var(--muted);flex:0 0 42%;}
.reviewRow .v{font-weight:600;text-align:left;flex:1;word-break:break-word;}
.pagination{margin-top:16px;}
.tabRow{display:flex;gap:8px;overflow-x:auto;margin-bottom:14px;}
.tabRow .tab{flex:0 0 auto;padding:8px 16px;border-radius:20px;border:1.5px solid var(--border);background:var(--card);color:var(--muted);font-size:13px;font-weight:700;text-decoration:none;white-space:nowrap;}
.tabRow .tab.active{background:var(--ink);border-color:var(--ink);color:#fff;}

/* landing page */
.choiceGrid{display:flex;flex-direction:column;gap:14px;margin-top:24px;}
.choiceCard{display:block;background:var(--card);border:1.5px solid var(--border);border-radius:var(--radius);padding:24px 20px;text-decoration:none;color:inherit;transition:border-color .15s;}
.choiceCard:hover{border-color:var(--amber);}
.choiceIcon{font-size:30px;margin-bottom:10px;}
.choiceTitle{font-size:17px;font-weight:800;margin-bottom:6px;}
.choiceDesc{font-size:13.5px;color:var(--muted);line-height:1.7;}

/* track result */
.statusCard .reviewRow{border-bottom:1px solid var(--border);}
.statusCard .reviewRow:last-of-type{border-bottom:none;}