*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;color:#1f2937}
.card{background:#fff;
  color: #161515;
  font-family: "Nunito", Arial, sans-serif;
  border-radius:16px;padding:32px;width:100%;max-width:520px;box-shadow:0 20px 50px rgba(29, 27, 27, 0.25)}
.card.wide{max-width:760px}

/* Background image: one fixed full-screen layer, never tiles */
body:not(.admin)::before{content:"";position:fixed;inset:0;z-index:-1;
   background:url('mhti.jpg');
    background-repeat: no-repeat;
    background-size: 120px 90px;
    background-position: top;
    background-color: #991b1b;
    margin-top: 2px;
}

/* assets/style.css */

/* =========================================================
   THEME TOKENS — single source of truth
   ========================================================= */
:root{
  /* Primary (dashboard sidebar / header) */
  --brand:        #7B1E28;   /* maroon */
  --brand-dark:   #5C1219;
  --brand-soft:   #FDF6F7;
  --brand-line:   #E8D5D9;

  /* Neutrals */
  --ink:          #0F0F10;
  --ink-2:        #1A1A1C;
  --ink-3:        #2B2B2E;
  --muted:        #6B7280;
  --muted-2:      #9CA3AF;
  --line:         #E5E7EB;
  --line-2:       #D1D5DB;
  --bg:           #F2F4F8;
  --panel:        #FFFFFF;
  --off:          #F9FAFB;
  --off-2:        #F3F4F6;

  /* Accent palette */
  --blue:         #1E40AF;
  --teal:         #0F766E;
  --orange:       #B45309;
  --purple:       #6D28D9;

  /* Shape */
  --radius:       12px;
  --radius-sm:    8px;
  --radius-pill:  40px;
  --shadow-sm:    0 1px 3px rgba(0,0,0,.05);
  --shadow-md:    0 4px 12px rgba(0,0,0,.06);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.06);

  /* Type */
  --font: "Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --fs-xs: 10px;
  --fs-sm: 11px;
  --fs-base: 12.5px;
  --fs-md: 14px;
  --fs-lg: 16px;
  --fs-xl: 22px;
  --fs-2xl: 30px;
}

/* =========================================================
   BASE
   ========================================================= */
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font);
  font-size:var(--fs-base);
  line-height:1.5;
  color:var(--ink);
  background:var(--bg);
}
a{color:var(--brand);text-decoration:none}
a:hover{color:var(--brand-dark)}
h1,h2,h3,h4{margin:0;font-weight:700;color:var(--ink)}

/* =========================================================
   SHARED: BUTTONS
   ========================================================= */
.btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--line-2);background:#fff;
  font-size:var(--fs-base);font-weight:500;color:var(--ink);
  text-decoration:none;cursor:pointer;font-family:inherit;
  transition:all .15s ease;white-space:nowrap;
}
.btn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600;
  box-shadow:0 2px 6px rgba(123,30,40,.2)}
.btn.primary:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.btn.grey{background:var(--off);border-color:var(--line);color:var(--muted)}
.btn.grey:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft)}
.btn.success{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.btn.success:hover{background:#0B5C56;border-color:#0B5C56;color:#fff}

/* =========================================================
   SHARED: PANEL / CARD
   ========================================================= */
.panel{
  background:var(--panel);
  border-radius:var(--radius);
  box-shadow:var(--shadow-md);
  padding:22px 24px;
  margin-bottom:20px;
}
.panel h1{font-size:var(--fs-xl);margin-bottom:6px}
.panel h2{font-size:var(--fs-lg);margin-bottom:6px}

/* =========================================================
   SHARED: HEADER BAR
   ========================================================= */
.hdr{
  background:var(--ink-2);color:#fff;
  padding:14px 20px;
  border-radius:var(--radius) var(--radius) 0 0;
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;flex-wrap:wrap;position:relative;overflow:hidden;
}
.hdr::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:5px;
  background:var(--brand);
}
.hdr h1{
  font-size:14px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#fff;
}
.hdr .date{
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  color:#D1D5DB;font-weight:500;
}

/* =========================================================
   SHARED: SUB HEADER
   ========================================================= */
.subhdr{
  border:1px solid var(--line);border-top:none;
  padding:16px 20px;background:#fff;
  border-radius:0 0 var(--radius) var(--radius);
  display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;
}
.subhdr .big{
  font-size:var(--fs-2xl);font-weight:800;color:var(--brand);
  letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums;
}
.subhdr .big-lbl{
  font-size:var(--fs-xs);letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:700;
}

/* =========================================================
   SHARED: KPI CARDS
   ========================================================= */
.kpis{
  display:grid;grid-template-columns:repeat(4,1fr);gap:12px;
  margin:18px 0 6px;
}
.kpi{
  background:var(--off);border-radius:var(--radius-sm);
  padding:12px 14px;border-left:4px solid var(--blue);
  transition:transform .15s ease, box-shadow .15s ease;
}
.kpi:hover{transform:translateY(-1px);box-shadow:var(--shadow-md)}
.kpi .v{
  font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--blue);
}
.kpi .k{
  font-size:var(--fs-xs);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);font-weight:700;margin-top:5px;
}
.kpi.teal  {border-left-color:var(--teal)}   .kpi.teal .v  {color:var(--teal)}
.kpi.orange{border-left-color:var(--orange)} .kpi.orange .v{color:var(--orange)}
.kpi.maroon{border-left-color:var(--brand)}  .kpi.maroon .v{color:var(--brand)}

/* =========================================================
   SHARED: SECTION TITLES
   ========================================================= */
.sec-title{
  font-size:13px;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);
  margin:22px 0 10px;padding-bottom:6px;
  border-bottom:2px solid var(--ink);
  display:flex;align-items:center;gap:8px;
}
.sec-title .count{color:var(--brand);font-weight:800;letter-spacing:0;font-size:14px}
.sec-title.pending{border-bottom-color:var(--orange)}
.sec-title.pending .count{color:var(--orange)}

/* =========================================================
   SHARED: TABLES
   ========================================================= */
table{width:100%;border-collapse:collapse;font-size:var(--fs-base)}
thead th{
  background:var(--ink-2);color:#fff;text-align:left;font-weight:700;
  font-size:var(--fs-xs);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 11px;white-space:nowrap;
  border-top:2px solid var(--brand);
}
thead th:first-child{border-left:4px solid var(--brand)}
tbody td{
  padding:7px 11px;border-bottom:1px solid var(--line);
  vertical-align:middle;color:var(--ink);
}
tbody tr:nth-child(even){background:var(--off)}
tbody tr:hover{background:var(--off-2)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.idx{color:var(--muted-2);font-weight:600;width:36px}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;color:#4B5563}
.empty{color:var(--muted-2);font-style:italic}

/* Status badge */
.status{
  display:inline-block;padding:2px 10px;border-radius:999px;
  font-size:10.5px;font-weight:700;letter-spacing:.03em;
  background:#ECFDF5;color:#065F46;border:1px solid #A7F3D0;
}
.status.pending{background:#FEF3C7;color:#92400E;border:1px solid #FDE68A}

/* =========================================================
   SHARED: SUMMARY BARS
   ========================================================= */
.summary{display:flex;flex-direction:column;gap:2px}
.summary-row{
  display:grid;grid-template-columns:140px 1fr 120px;
  align-items:center;gap:16px;padding:7px 0;
  border-bottom:1px solid var(--off-2);
}
.summary-row:last-child{border-bottom:none}
.summary-row .lbl{font-weight:700;font-size:var(--fs-base);color:var(--ink)}
.summary-row .val{text-align:right;font-variant-numeric:tabular-nums;
  font-weight:700;font-size:var(--fs-base);color:var(--ink)}
.summary-row .val .pct{color:var(--muted);font-weight:500;font-size:var(--fs-sm);margin-left:4px}

.bar-track{display:block;height:12px;background:var(--off-2);
  border-radius:6px;overflow:hidden;width:100%}
.bar-fill{display:block;height:100%;border-radius:6px}
.bar-blue{background:var(--blue)}
.bar-orange{background:var(--orange)}
.bar-teal{background:var(--teal)}
.bar-purple{background:var(--purple)}
.bar-maroon{background:var(--brand)}

/* =========================================================
   SHARED: WRAP CONTAINER
   ========================================================= */
.wrap{
  max-width:1100px;margin:0 auto;padding:22px;
}

/* =========================================================
   SHARED: PRINT
   ========================================================= */
@media print{
  body{background:#fff;margin:0}
  .wrap{max-width:none;padding:0}
  .noprint{display:none !important}
  .panel{box-shadow:none;padding:0;margin:0;border-radius:0}
  .hdr,.subhdr{border-radius:0}
  thead{display:table-header-group}
  tr,.panel,.kpi,.summary-row{break-inside:avoid}
  .hdr,thead th,.kpi,.bar-fill,.status{
    -webkit-print-color-adjust:exact;print-color-adjust:exact;
  }
}
@page{size:A4 portrait;margin:12mm 10mm}

h1{margin:0;
  font-family: "Nunito", Arial, sans-serif;
  font-size:1.6rem;text-align:center}
.sub{text-align:center;color:#6e0f0f;margin:4px 0 20px}
[hidden]{display:none!important}

/* ---- forms ---- */
form label{display:block;
  font-family: "Nunito", Arial, sans-serif;
  color: #080707;
  font-size:.9rem;font-weight:600;margin-bottom:14px}
form input{display:block;width:100%;margin-top:5px;padding:11px;border:1px solid #d1d5db;border-radius:8px;font-size:1rem}
form select,form textarea{display:block;width:100%;margin-top:5px;padding:11px;border:1px solid #d1d5db;border-radius:8px;font-size:1rem;font-family:inherit;background:#fff}
form input:focus,form select:focus,form textarea:focus{outline:2px solid #700b0b;border-color:transparent}
form input[type=checkbox],form input[type=radio]{display:inline-block;width:auto;margin:0 8px 0 0;vertical-align:middle}
form input[type=file]{padding:8px;background:#f9fafb}
form label.opt{display:inline-flex;align-items:center;font-weight:400;margin:0 18px 10px 0}
fieldset{border:1px solid #750909;border-radius:10px;padding:14px 14px 6px;margin:0 0 16px}
legend{font-weight:700;padding:0 8px;
  background: #700707;
  color:#fff}
.row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0 14px}
.lbl{font-weight:600;font-size:.9rem;margin:6px 0}
.hint{font-size:.8rem;color:#0d0d0e;font-weight:400}
.hp{position:absolute;left:-9999px}
.submit{width:100%;padding:13px;background:#750d0d;color:#fff;border:0;border-radius:10px;font-size:1.05rem;cursor:pointer}
.submit:hover{background:#0a0a0c}
.alert{padding:12px;border-radius:8px;margin-bottom:16px}
.alert.success{background:#dcfce7;color:#166534}.alert.error{background:#fee2e2;color:#991b1b}
.admin-link{display:block;text-align:center;margin-top:18px;font-size:.8rem;color:black;text-decoration:none}

/* ---- landing page ---- */
.hub{display:grid;gap:12px}
.hub a{display:block;padding:18px;border:2px solid #d1d5db;border-radius:12px;text-decoration:none;color:#fff;background:#720513;font-weight:600;font-size:1.05rem}
.hub a small{display:block;font-weight:400;color:#fff;margin-top:4px;font-size:.85rem}
.hub a:hover{border-color:#8b0a10;background:#080808}

/* ---- admin ---- */
body.admin{display:block;background:#f3f4f6;padding:0}
.topbar{background:#1e3a8a;color:#fff;padding:14px 24px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px}
.topbar a{color:#fff;margin-left:14px;text-decoration:none}
.wrap{max-width:1200px;margin:24px auto;padding:0 16px}
.tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}
.tabs a{padding:10px 18px;border-radius:8px;background:#e5e7eb;color:#1f2937;text-decoration:none;font-weight:600}
.tabs a.on{background:#1e3a8a;color:#fff}
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:22px}
.stat{background:#fff;border-radius:12px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.08)}
.stat b{display:block;font-size:2rem}.stat span{color:#6b7280;font-size:.9rem}
.panel{background:#fff;border-radius:12px;padding:18px;box-shadow:0 1px 4px rgba(0,0,0,.08);margin-bottom:22px}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:end}
.filters label{font-size:.8rem;font-weight:600}
.filters input,.filters select{display:block;padding:9px;border:1px solid #d1d5db;border-radius:8px}
.btn{display:inline-block;padding:10px 16px;background:#1e3a8a;color:#fff;border:0;border-radius:8px;cursor:pointer;text-decoration:none;font-size:.9rem}
.btn.green{background:#0f766e}.btn.grey{background:#6b7280}.btn.red{background:#dc2626;padding:6px 10px}
.tbl-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:10px;text-align:left;border-bottom:1px solid #e5e7eb;white-space:nowrap}
th{background:#f9fafb}
.kv th{width:230px;background:#f9fafb;vertical-align:top}.kv td{white-space:normal}
.logo{max-height:90px;border:1px solid #e5e7eb;border-radius:8px;padding:4px}
.bar{height:14px;border-radius:7px;background:#e5e7eb;overflow:hidden;margin:4px 0 12px}
.bar i{display:block;height:100%}
.login{max-width:360px;margin:12vh auto;background:#fff;padding:28px;border-radius:14px}
.login label{display:block;font-weight:600;margin-bottom:12px}
.login input{display:block;width:100%;padding:10px;margin-top:5px;border:1px solid #d1d5db;border-radius:8px}
@media print{.noprint,.topbar{display:none!important}body.admin{background:#fff}.panel,.stat{box-shadow:none;border:1px solid #ddd}}