:root{
    --ink: #16241b;
    --green: #00611b;
    --green-deep: #004813;
    --green-soft: #e6f0e8;
    --white: #ffffff;
    --line: rgba(0,97,27,0.18);
    --error: #b6402f;
    --ok: #00611b;
    --amber: #a06a00;
    --amber-soft: #fbf1de;
    --blue: #1c5aa8;
    --blue-soft: #e8f0fa;
    --muted: #7c8780;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--green-soft);
    font-family: 'Tajawal', sans-serif;
    color: var(--ink);
    min-height: 100vh;
  }

  /* ===================== shared bits ===================== */
  .hidden{ display:none !important; }
  a{ color: inherit; }

  /* ===================== PUBLIC APPLICATION FORM ===================== */
  #publicView{
    display:flex;
    justify-content:center;
    padding: 40px 14px;
  }
  .wrap{ width: 100%; max-width: 640px; }

  .header{ padding: 0 6px 26px; text-align: center; }
  .logo{ width: 120px; height: auto; margin: 0 auto 14px; display:block; }
  h1{
    font-family:'Cairo', sans-serif;
    font-weight: 900;
    color: var(--green-deep);
    font-size: clamp(24px, 6vw, 30px);
    margin: 0 0 10px;
  }
  .intro{
    color: var(--green);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.7;
    max-width: 480px;
    margin: 0 auto;
  }

  form{
    background: var(--white);
    border-radius: 12px;
    padding: 32px 26px 30px;
    box-shadow: 0 20px 50px rgba(0,72,19,0.18);
    border: 1px solid var(--line);
  }

  .field-group{ margin-bottom: 22px; }
  .field-group:last-of-type{ margin-bottom: 0; }

  .q-label{
    display:flex; align-items:center; gap: 8px;
    font-family:'Cairo', sans-serif;
    font-weight: 700; font-size: 15.5px;
    color: var(--green-deep);
    margin-bottom: 10px;
  }
  .q-num{
    width: 22px; height: 22px; border-radius: 50%;
    background: var(--green); color: var(--white);
    font-size: 12px; font-weight: 700;
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
  }
  .required-star{ color: var(--error); font-weight: 700; }
  .optional-tag{
    font-size: 12px; font-weight: 500; color: #7c8780;
    background: #f1f1ec; padding: 2px 9px; border-radius: 20px;
  }

  .row2{ display:grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  @media (max-width: 480px){ .row2{ grid-template-columns: 1fr; } }

  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="password"], select{
    width: 100%;
    font-family: 'Tajawal', sans-serif;
    font-size: 15px;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink);
    outline: none;
    transition: border-color 0.15s ease;
  }
  input:focus, select:focus{ border-color: var(--green); }
  input.invalid, select.invalid{ border-color: var(--error); }
  ::placeholder{ color: #9aa39c; font-family:'Tajawal', sans-serif; }

  .phone-row{ display:flex; gap: 10px; }
  .phone-row select{ width: 110px; flex-shrink: 0; direction: ltr; text-align: center; }
  .phone-row input{ direction: ltr; text-align: right; }

  .nat-row{ display:grid; grid-template-columns: 1.2fr 1fr; gap: 12px; }
  @media (max-width: 480px){ .nat-row{ grid-template-columns: 1fr; } }

  .radio-group, .toggle-group{ display:flex; gap: 12px; }
  .radio-pill{ flex:1; position: relative; }
  .radio-pill input{
    position:absolute; opacity:0; inset:0; cursor:pointer; margin:0;
    width:100%; height:100%;
  }
  .radio-pill label{
    display:flex; align-items:center; justify-content:center; gap: 8px;
    padding: 12px 10px; border-radius: 8px;
    border: 1.5px solid var(--line);
    background: #fff; font-size: 14.5px; font-weight: 600;
    color: var(--ink); cursor: pointer;
    transition: all 0.15s ease;
  }
  .radio-pill input:checked + label{
    border-color: var(--green); background: var(--green); color: var(--white);
  }

  .upload-box{
    border: 1.5px dashed var(--line); border-radius: 10px;
    padding: 22px 16px; text-align: center;
    background: #fbfdfb; cursor: pointer;
    transition: border-color 0.15s ease; display:block;
  }
  .upload-box.invalid{ border-color: var(--error); }
  .upload-box:hover{ border-color: var(--green); }
  .upload-box input[type="file"]{ display:none; }
  .upload-btn{
    display:inline-flex; align-items:center; gap: 8px;
    background: var(--green); color: var(--white); border:none;
    padding: 10px 20px; border-radius: 7px;
    font-family:'Cairo', sans-serif; font-weight: 700; font-size: 14px;
    cursor: pointer; margin-bottom: 8px;
  }
  .upload-hint{ display:block; font-size: 12.5px; color: #7c8780; margin-top: 4px; }
  .file-name{
    margin-top: 10px; display:inline-flex; align-items:center; gap: 6px;
    background: var(--green-soft); color: var(--green-deep);
    font-size: 13.5px; font-weight: 600; padding: 6px 12px; border-radius: 20px;
  }

  .err-msg{ color: var(--error); font-size: 12.5px; font-weight: 600; margin-top: 6px; display:none; }
  .err-msg.show{ display:block; }

  .submit-btn{
    width: 100%; margin-top: 30px; padding: 15px; border-radius: 9px;
    border: none; font-family:'Cairo', sans-serif; font-weight: 800; font-size: 16px;
    cursor: pointer; background: var(--green); color: var(--white);
    transition: opacity 0.15s ease, transform 0.1s ease;
  }
  .submit-btn:disabled{ background: #cfd6cf; color: #8a9089; cursor: not-allowed; }
  .submit-btn:not(:disabled):active{ transform: scale(0.99); }

  .form-note{ text-align:center; font-size: 12.5px; color: #7c8780; margin-top: 12px; }

  .admin-entry{
    text-align:center; margin-top: 22px;
  }
  .admin-entry button{
    background: none; border: none; color: #9aa39c; font-family:'Tajawal', sans-serif;
    font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 6px;
  }
  .admin-entry button:hover{ color: var(--green); }
  .admin-entry a{
    color: #9aa39c; font-family:'Tajawal', sans-serif;
    font-size: 12.5px; text-decoration: underline; cursor: pointer; padding: 6px;
  }
  .admin-entry a:hover{ color: var(--green); }

  .submit-btn.is-locked{ background: #cfd6cf; color: #8a9089; }
  .submit-btn:disabled{ background: #cfd6cf; color: #8a9089; cursor: not-allowed; }

  /* ===================== GENERIC MODAL OVERLAY ===================== */
  .modal-overlay{
    position: fixed; inset:0; background: rgba(10,20,13,0.55);
    display:flex; align-items:center; justify-content:center;
    padding: 16px; z-index: 60; overflow-y:auto;
  }
  .confirm-card{
    background: var(--white); border-radius: 12px; padding: 32px 26px;
    width: 100%; max-width: 480px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    text-align:center; margin: auto;
  }
  .confirm-card h2{ font-family:'Cairo', sans-serif; font-weight: 800; color: var(--green-deep); margin: 14px 0 8px; }
  .confirm-card > p{ color: var(--green); font-size: 14px; line-height:1.7; margin:0 0 18px; }
  .confirm-card .detail-inner{
    text-align: right; background: #fbfdfb; border: 1px solid var(--line);
    border-radius: 10px; padding: 16px 18px; grid-template-columns: 1fr 1fr;
  }
  .preview-card{
    background: var(--white); border-radius: 12px; overflow:hidden;
    width: 100%; max-width: 720px; box-shadow: 0 20px 50px rgba(0,0,0,0.3);
    margin: auto; display:flex; flex-direction:column; max-height: 88vh;
  }
  .preview-header{
    display:flex; align-items:center; justify-content:space-between;
    padding: 14px 18px; border-bottom: 1px solid var(--line);
    font-family:'Cairo', sans-serif; color: var(--green-deep);
  }
  .preview-body{ padding: 0; flex:1; overflow:auto; background:#f2f4f2; min-height: 200px; }
  .preview-body iframe{ width:100%; height: 65vh; border:none; display:block; }
  .preview-body .preview-msg{ padding: 40px 20px; text-align:center; color: var(--muted); font-size: 14px; line-height:1.7; }
  .preview-footer{ padding: 12px 18px; border-top: 1px solid var(--line); text-align:left; }
  .preview-footer .btn{ text-decoration:none; }

  .success-card{
    display:none; background: var(--white); border-radius: 12px;
    padding: 46px 28px; text-align:center;
    box-shadow: 0 20px 50px rgba(0,72,19,0.18);
    border: 1px solid var(--line);
  }
  .success-card.show{ display:block; }
  .success-icon{
    width: 62px; height:62px; border-radius: 50%; background: var(--ok);
    display:flex; align-items:center; justify-content:center; margin: 0 auto 18px;
  }
  .success-card h2{ font-family:'Cairo', sans-serif; font-weight: 800; color: var(--green-deep); margin: 0 0 10px; }
  .success-card p{ color: var(--green); font-size: 14.5px; line-height:1.7; margin:0; }

  /* ===================== ADMIN GATE ===================== */
  #adminGate{
    position: fixed; inset:0; background: rgba(10,20,13,0.55);
    display:flex; align-items:center; justify-content:center;
    padding: 16px; z-index: 50;
  }
  .gate-card{
    background: var(--white); border-radius: 12px; padding: 30px 26px;
    width: 100%; max-width: 360px; box-shadow: 0 20px 50px rgba(0,0,0,0.25);
    text-align:center;
  }
  .gate-card h3{ font-family:'Cairo', sans-serif; color: var(--green-deep); margin: 0 0 6px; font-size: 18px; }
  .gate-card p{ color: var(--muted); font-size: 13px; margin: 0 0 18px; line-height:1.6; }
  .gate-card input{ margin-bottom: 12px; text-align:center; }
  .gate-card .gate-err{ color: var(--error); font-size: 12.5px; font-weight:600; min-height:18px; margin-bottom: 4px; }
  .gate-btn{
    width:100%; padding: 12px; border-radius: 8px; border:none;
    background: var(--green-deep); color:#fff; font-family:'Cairo',sans-serif;
    font-weight:700; font-size:14px; cursor:pointer;
  }
  .gate-cancel{
    display:block; margin-top: 12px; background:none; border:none; color: var(--muted);
    font-size: 12.5px; cursor:pointer; text-decoration: underline;
  }

  /* ===================== ADMIN DASHBOARD ===================== */
  #adminView{
    max-width: 1180px; margin: 0 auto; padding: 28px 18px 60px;
  }
  .admin-header{
    display:flex; align-items:flex-start; justify-content:space-between; gap: 16px;
    flex-wrap: wrap; margin-bottom: 22px;
  }
  .admin-title{ font-family:'Cairo', sans-serif; font-weight: 900; color: var(--green-deep); font-size: 24px; margin: 0 0 4px; }
  .admin-sub{ color: var(--muted); font-size: 13.5px; margin:0; }
  .admin-actions{ display:flex; gap: 10px; flex-wrap: wrap; }
  .btn{
    font-family:'Cairo', sans-serif; font-weight:700; font-size: 13.5px;
    padding: 10px 16px; border-radius: 8px; border: 1.5px solid var(--line);
    background: #fff; color: var(--green-deep); cursor:pointer;
    display:inline-flex; align-items:center; gap:6px;
    transition: all .12s ease;
  }
  .btn:hover{ border-color: var(--green); }
  .btn-primary{ background: var(--green); color:#fff; border-color: var(--green); }
  .btn-primary:hover{ background: var(--green-deep); }
  .btn-ghost{ border-color: transparent; background: transparent; color: var(--muted); }

  .stat-row{ display:grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-bottom: 22px; }
  @media (max-width: 760px){ .stat-row{ grid-template-columns: repeat(2,1fr); } }
  .stat-card{
    background:#fff; border:1px solid var(--line); border-radius: 10px; padding: 16px 18px;
  }
  .stat-num{ font-family:'Cairo', sans-serif; font-weight:900; font-size: 26px; color: var(--green-deep); }
  .stat-label{ font-size: 12.5px; color: var(--muted); margin-top:2px; }

  .toolbar{
    display:flex; gap: 10px; flex-wrap: wrap; align-items:center;
    background:#fff; border:1px solid var(--line); border-radius: 10px;
    padding: 12px; margin-bottom: 16px;
  }
  .toolbar input[type="search"]{
    flex: 1 1 220px; font-family:'Tajawal',sans-serif; font-size: 14px;
    padding: 9px 12px; border-radius: 7px; border: 1.5px solid var(--line); outline:none;
  }
  .toolbar select{
    font-family:'Tajawal',sans-serif; font-size: 13.5px; padding: 9px 10px;
    border-radius: 7px; border: 1.5px solid var(--line); background:#fff; width:auto;
  }

  .table-wrap{
    background:#fff; border:1px solid var(--line); border-radius: 10px; overflow:auto;
  }
  table{ width:100%; border-collapse: collapse; font-size: 13.5px; min-width: 920px; }
  thead th{
    text-align: right; font-family:'Cairo', sans-serif; font-weight:700; font-size: 12.5px;
    color: var(--muted); background: #f7faf7; padding: 12px 14px; border-bottom: 1.5px solid var(--line);
    white-space: nowrap;
  }
  tbody td{ padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr:hover{ background: #fbfdfb; }
  .cell-name{ font-weight: 700; color: var(--ink); }
  .cell-sub{ font-size: 12px; color: var(--muted); margin-top: 2px; }
  .mono{ direction: ltr; text-align:right; display:inline-block; }

  .badge{
    display:inline-flex; align-items:center; gap:5px;
    padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight:700;
    white-space:nowrap;
  }
  .badge-yes{ background: var(--green-soft); color: var(--green-deep); }
  .badge-no{ background: #f1eaea; color: var(--error); }

  .status-select{
    font-family:'Tajawal',sans-serif; font-size: 12.5px; font-weight:700;
    padding: 6px 8px; border-radius: 7px; border: 1.5px solid var(--line);
    cursor:pointer; background:#fff;
  }
  .status-new{ color: var(--blue); background: var(--blue-soft); border-color: transparent; }
  .status-reviewed{ color: var(--amber); background: var(--amber-soft); border-color: transparent; }
  .status-shortlisted{ color: var(--green-deep); background: var(--green-soft); border-color: transparent; }
  .status-rejected{ color: var(--error); background: #f6e9e7; border-color: transparent; }

  .reveal-btn{
    background:none; border:none; cursor:pointer; color: var(--green); font-size: 12px;
    text-decoration: underline; padding:0; font-family:'Tajawal',sans-serif;
  }
  .row-actions{ display:flex; gap: 8px; }
  .icon-btn{
    background:none; border:1.5px solid var(--line); border-radius:7px; cursor:pointer;
    padding: 6px 8px; color: var(--muted); display:inline-flex;
  }
  .icon-btn:hover{ border-color: var(--error); color: var(--error); }

  .empty-state{ text-align:center; padding: 60px 20px; color: var(--muted); }
  .empty-state strong{ display:block; color: var(--green-deep); font-family:'Cairo',sans-serif; font-size:16px; margin-bottom:6px; }

  .detail-row td{ background: #fbfdfb; padding: 0; }
  .detail-inner{ padding: 16px 20px; display:grid; grid-template-columns: repeat(3,1fr); gap: 12px 20px; }
  @media (max-width: 700px){ .detail-inner{ grid-template-columns: 1fr; } }
  .detail-item .k{ font-size: 11.5px; color: var(--muted); margin-bottom: 2px; }
  .detail-item .v{ font-size: 13.5px; font-weight: 600; color: var(--ink); }

  .toast{
    position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
    background: var(--green-deep); color:#fff; padding: 11px 20px; border-radius: 30px;
    font-size: 13.5px; font-weight:600; box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    opacity:0; pointer-events:none; transition: opacity .2s ease, transform .2s ease; z-index:80;
  }
  .toast.show{ opacity:1; transform: translateX(-50%) translateY(-6px); }