:root{
  --bg1:#cdd2ff;
  --bg2:#eceeff;
  --bg3:#ffffff;
  --panel:#eef1ff;
  --ink:#1e2b52;
  --muted:#4e5b86;
  --blue1:#2f56e2;
  --blue2:#2447cc;
  --blue3:#1a35b4;
  --line:rgba(70,90,160,.18);
  --glass:rgba(255,255,255,.55);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  color:var(--ink);
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  background:
    radial-gradient(1200px 520px at 50% 8%, rgba(255,255,255,.75), rgba(255,255,255,0) 70%),
    radial-gradient(900px 420px at 50% 0%, rgba(74,98,255,.35), transparent 72%),
    linear-gradient(180deg, var(--bg1), var(--bg2) 50%, var(--bg3) 100%);
}
a{color:inherit;text-decoration:none}
.page{
  min-height:100%;
  display:flex;
  justify-content:center;
  padding:34px 18px 60px;
}
.shell{
  width:min(980px, 100%);
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.75);
  box-shadow: 0 40px 110px rgba(20,30,70,.35);
  background: rgba(255,255,255,.18);
  backdrop-filter: blur(8px);
}
.shell::before{
  content:"";
  display:block;
  height:0;
  border-top:1px solid rgba(255,255,255,.65);
}
.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  padding:18px 26px;
  background: linear-gradient(180deg, rgba(54,86,220,.38), rgba(54,86,220,.16));
  border-bottom:1px solid rgba(255,255,255,.55);
}

.lang{
  display:flex;
  align-items:center;
  gap:10px;
}

.lang select{
  background: rgba(255,255,255,.35);
  border:1px solid rgba(255,255,255,.55);
  padding:8px 10px;
  border-radius:12px;
  outline:none;
}
.brand{
  display:flex;
  align-items:center;
  gap:14px;
}
.crest{
  width:48px;height:48px;
  border-radius:10px;
  display:grid;
  place-items:center;
  background: rgba(10,20,70,.12);
}
.crest svg{width:46px;height:46px}
.brandText{
  font-family: Georgia, "Times New Roman", serif;
  font-size:28px;
  letter-spacing:.6px;
  color:#1c2a55;
}
.nav{
  font-size:16px;
  color:#2b3763;
  opacity:.92;
}
.nav:hover{opacity:1;text-decoration:underline}
.main{
  padding:56px 22px 34px;
  text-align:center;
  background:
    repeating-linear-gradient(180deg, rgba(140,160,230,.08) 0, rgba(140,160,230,.08) 1px, transparent 1px, transparent 54px);
}
h1{
  margin:0 0 18px;
  font-family: Georgia, "Times New Roman", serif;
  font-weight:500;
  font-size:48px;
  color:#1f2c58;
}
.sub{
  margin:0 auto 34px;
  max-width:720px;
  color:var(--muted);
  font-size:17px;
  line-height:1.65;
}
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width: 420px;
  padding:16px 26px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background: linear-gradient(180deg, var(--blue1), var(--blue2) 55%, var(--blue3));
  color:#fff;
  text-transform:uppercase;
  font-weight:800;
  letter-spacing:1px;
  box-shadow: 0 16px 38px rgba(20,35,110,.35);
  cursor:pointer;
}

.iconBtn{
  border:1px solid rgba(16,24,40,.14);
  background: rgba(255,255,255,.75);
  border-radius:10px;
  padding:8px 10px;
  cursor:pointer;
}
.iconBtn:hover{background:#fff}
.iconBtn.danger{border-color: rgba(220,40,40,.35); color:#b11226}
.btn:disabled{opacity:.65;cursor:not-allowed}
.list{
  margin:26px auto 0;
  width:min(420px, 100%);
  display:flex;
  flex-direction:column;
  gap:14px;
  align-items:flex-start;
  text-align:left;
  color:#2b3763;
}
.li{
  display:flex;
  gap:12px;
  align-items:flex-start;
  font-size:16px;
}
.li svg{width:22px;height:22px;flex:0 0 auto;margin-top:2px}
.footer{
  text-align:center;
  padding:18px 16px 24px;
  color:#5b6794;
  font-size:13.5px;
  background: rgba(255,255,255,.10);
}

/* ===== Responsive ===== */
@media (max-width: 640px){
  .page{padding:18px 12px 40px}
  .topbar{padding:14px 16px; flex-wrap:wrap}
  .brandText{font-size:22px}
  .main{padding:36px 16px 22px}
  h1{font-size:34px}
  .sub{font-size:15.5px}
  .btn{min-width:0; width:100%}
  .list{width:100%}
}
/* Check page input card */
.box{
  margin:26px auto 0;
  width:min(640px, 100%);
  border-radius:14px;
  border:1px solid rgba(200,210,250,.85);
  background: rgba(255,255,255,.55);
  box-shadow: 0 18px 50px rgba(20,30,70,.18);
  padding:22px 18px;
}
.input{
  width:min(520px, 100%);
  padding:14px 16px;
  font-size:16px;
  border-radius:10px;
  border:1px solid rgba(130,150,210,.35);
  outline:none;
  background: rgba(255,255,255,.75);
}
.input:focus{box-shadow:0 0 0 4px rgba(47,86,226,.16);border-color:rgba(47,86,226,.55)}
.hint{margin-top:10px;color:#6a76a6;font-size:13px}
/* Result styles (when backend running) */
.result{margin-top:14px;text-align:left}
.pill{display:inline-flex;align-items:center;padding:8px 12px;border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.4px;border:1px solid rgba(255,255,255,.65)}
.pill.pending{background:rgba(255,231,186,.6);color:#5a3c00}
.pill.issued{background:rgba(197,255,214,.6);color:#144b24}
.pill.cancelled{background:rgba(255,199,199,.6);color:#5a1212}
.files{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.file{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.68);border:1px solid rgba(210,220,250,.75)}
.file a{color:#1b36b5;font-weight:700}
.small{color:#6a76a6;font-size:13px}

/* Admin (keep usable) */
.adminWrap{max-width:1100px;margin:0 auto;padding:22px 14px 60px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{border-bottom:1px solid rgba(215,218,242,.8);padding:10px;text-align:left;font-size:14px}
.table th{color:#6a76a6;font-weight:800}
.actions{display:flex;gap:8px;flex-wrap:wrap}
.btnSecondary{border:0;border-radius:10px;padding:10px 12px;font-weight:800;background:#0f1b33;color:#fff;cursor:pointer}