:root{
  --violet:#6D28D9; --violet-light:#8B5CF6; --ink:#1A1330; --ink-soft:#574B75;
  --cloud:#F6F4FF; --mint:#16C784; --coral:#FF6B81; --amber:#FFB020;
}
*{box-sizing:border-box;}
html{overflow-x:hidden;}
body{
  font-family:'Inter',system-ui,sans-serif; background:var(--cloud); color:var(--ink);
  margin:0; padding:2.5rem 1.2rem; line-height:1.6; overflow-x:hidden; width:100%;
}
.wrap{max-width:480px; margin:0 auto;}
.wrap.wide{max-width:960px;}
.card{background:#fff; border-radius:18px; padding:2rem; box-shadow:0 10px 30px -12px rgba(36,19,77,.22); border:1px solid #ECE5FF; overflow-wrap:anywhere;}
.table-scroll{width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;}
.table-scroll table{min-width:640px;}
h1{font-size:1.5rem; margin:0 0 .3rem;}
.subtitle{color:var(--ink-soft); font-size:.92rem; margin-bottom:1.5rem;}
label{display:block; font-size:.85rem; font-weight:600; margin:1rem 0 .3rem;}
input, textarea, select{
  width:100%; padding:.7rem .9rem; border-radius:10px; border:1.5px solid #E4DCFB;
  font-size:.92rem; background:#FBFAFF;
}
input:focus, textarea:focus, select:focus{outline:none; border-color:var(--violet); background:#fff;}
button, .btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
  font-weight:700; font-size:.92rem; padding:.75rem 1.4rem; border-radius:999px;
  border:none; cursor:pointer; text-decoration:none; margin-top:1.3rem;
  background:linear-gradient(135deg,var(--violet),var(--violet-light)); color:#fff;
}
button.btn-block, .btn-block{width:100%;}
.btn-outline{background:#fff; color:var(--violet); border:2px solid var(--violet);}
.btn-danger{background:var(--coral); color:#fff;}
.btn-sm{padding:.45rem .9rem; font-size:.8rem; margin-top:0;}
.muted-link{display:block; text-align:center; margin-top:1.2rem; font-size:.88rem; color:var(--ink-soft);}
.muted-link a{color:var(--violet); font-weight:600;}
.alert{padding:.8rem 1rem; border-radius:10px; font-size:.88rem; margin-bottom:1.2rem;}
.alert-success{background:#E8FBF3; color:#0B7A50; border:1px solid #B9F0D8;}
.alert-error{background:#FFF0F1; color:#B3253B; border:1px solid #FFD2D8;}
.badge{display:inline-block; padding:.25rem .7rem; border-radius:999px; font-size:.75rem; font-weight:700;}
.badge-pending{background:#FFF4E5; color:#946200;}
.badge-approved{background:#E8FBF3; color:#0B7A50;}
.badge-rejected{background:#FFF0F1; color:#B3253B;}
table{width:100%; border-collapse:collapse; font-size:.85rem;}
th, td{text-align:left; padding:.65rem .5rem; border-bottom:1px solid #EFE9FF; vertical-align:top;}
th{font-size:.75rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-soft);}
.topbar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5rem; max-width:960px; margin-left:auto; margin-right:auto;}
.topbar a{color:var(--violet); font-weight:700; text-decoration:none; font-size:.9rem;}
.pay-box{display:flex; gap:1.5rem; flex-wrap:wrap; align-items:flex-start;}
.pay-box img{width:200px; border-radius:12px; border:2px dashed #E4DCFB; padding:.6rem;}
.thumb-link img{width:70px; border-radius:8px; border:1px solid #E4DCFB;}

@media (max-width: 600px){
  body{padding:1.4rem .8rem;}
  .card{padding:1.2rem;}
  .topbar{padding:0 .2rem;}
  h1{font-size:1.25rem;}
  .pay-box img{width:150px;}
}