:root{--pink:#ff1493;--pink2:#ff5aad;--black:#0d0d0f;--bg:#f6f6f8;--text:#1b1b1d;--muted:#74747b;--border:#e4e4e8}
*{box-sizing:border-box}body{margin:0;font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--text)}a{color:inherit} .shell{max-width:1180px;margin:auto;padding:20px}.top{display:flex;gap:16px;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap}.brand{font-weight:800;font-size:21px}.brand span{color:var(--pink)}.nav{display:flex;gap:8px;flex-wrap:wrap}.nav a,.btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:10px 15px;border-radius:10px;text-decoration:none;border:1px solid var(--border);background:white;cursor:pointer;font-weight:700}.btn.primary{background:var(--pink);border-color:var(--pink);color:#fff}.btn.dark{background:#17171a;color:white;border-color:#17171a}.card{background:white;border:1px solid var(--border);border-radius:16px;padding:20px;margin-bottom:18px}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}label{display:block;font-weight:700;font-size:13px;margin-bottom:6px}input,select,textarea{width:100%;padding:12px 13px;border:1px solid #d9d9de;border-radius:10px;font-size:16px;background:white}textarea{min-height:90px}.muted{color:var(--muted)}.flash{padding:12px 14px;border-radius:10px;margin-bottom:16px;background:#fff;border-left:4px solid var(--pink)}table{width:100%;border-collapse:collapse;background:white}th,td{padding:12px;text-align:left;border-bottom:1px solid var(--border);font-size:14px}.table-wrap{overflow:auto;border:1px solid var(--border);border-radius:14px}.badge{display:inline-block;border-radius:999px;padding:5px 9px;background:#f0f0f3;font-size:12px;font-weight:800}.badge.active{background:#e9f8ef;color:#176d39}.badge.partially_used{background:#fff5df;color:#8a5a00}.badge.used{background:#eee;color:#555}.badge.expired,.badge.cancelled{background:#ffe8e8;color:#9c2424}.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.stat{background:white;border:1px solid var(--border);border-radius:14px;padding:17px}.stat strong{display:block;font-size:24px;margin-top:5px}.right{text-align:right}.actions{display:flex;gap:8px;flex-wrap:wrap}.voucher-preview{background:#0b0b0d;color:white;border-radius:18px;overflow:hidden;min-height:330px;display:grid;grid-template-columns:36% 64%;position:relative}.voucher-left{position:relative;background:linear-gradient(145deg,#130711,#250314)}.ribbon-v{position:absolute;left:45%;top:-15%;width:68px;height:130%;background:linear-gradient(90deg,#df0075,#ff4bb0,#ad005c);transform:rotate(-35deg);box-shadow:0 0 18px #0006}.ribbon-h{position:absolute;left:-10%;top:47%;width:120%;height:66px;background:linear-gradient(#d80072,#ff4caf,#b0005e);transform:rotate(8deg)}.bow{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:72px;color:#ff2d9e;text-shadow:0 5px 18px #000}.voucher-right{padding:30px 34px;display:flex;flex-direction:column;justify-content:center}.gift{font-family:Georgia,serif;font-style:italic;font-size:43px;line-height:.75}.voucher-word{font-weight:900;color:var(--pink);font-size:39px;letter-spacing:2px;margin-bottom:26px}.line{background:white;color:#17171a;padding:10px 12px;margin:5px 0;font-weight:800;letter-spacing:2px}.line small{color:var(--pink);margin-right:10px}.value{font-size:22px;margin:18px 0 5px}.code{color:#ddd;font-size:13px;margin-top:16px}.qr{background:white;padding:5px;border-radius:6px;width:86px;height:86px;object-fit:contain}.voucher-footer{display:flex;justify-content:space-between;align-items:end;gap:16px}.login{max-width:430px;margin:80px auto}.login .brand{text-align:center;font-size:28px;margin-bottom:20px}@media(max-width:760px){.grid,.grid3,.stats{grid-template-columns:1fr}.voucher-preview{grid-template-columns:1fr}.voucher-left{min-height:170px}.voucher-right{padding:24px}.gift{font-size:36px}.voucher-word{font-size:31px}}

/* === EVA SPOT exact voucher artwork ===
   The supplied artwork is the background. Only live voucher data is overlaid.
   This keeps every voucher visually identical to the approved design. */
.voucher-preview{
  position:relative;
  width:100%;
  aspect-ratio:3/2;
  min-height:0;
  display:block;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:#000;
  container-type:inline-size;
  margin-bottom:18px;
}
.voucher-preview .voucher-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  display:block;
  z-index:1;
}
.voucher-preview .voucher-data{
  position:absolute;
  z-index:3;
  color:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  display:flex;
  align-items:center;
}
.voucher-preview .voucher-code{
  left:81.45%; top:7.95%; width:13.2%; height:5.1%;
  font-size:1.72cqw;
}
.voucher-preview .voucher-to{
  left:40.05%; top:30.72%; width:38.25%; height:7.05%;
  padding:0 1.0%; font-size:2.06cqw; letter-spacing:.02em;
}
.voucher-preview .voucher-from{
  left:40.05%; top:39.57%; width:38.25%; height:7.05%;
  padding:0 1.0%; font-size:1.88cqw; letter-spacing:.01em;
}
.voucher-preview .voucher-gift{
  left:40.05%; top:48.63%; width:36.4%; height:7.75%;
  padding:0 1.0%; font-size:3.05cqw; font-weight:800;
}
.voucher-preview .voucher-expiry{
  left:63.2%; top:69.05%; width:18.9%; height:5.55%;
  padding:0 .5%; font-size:2.15cqw; font-weight:800;
}
.voucher-preview .voucher-qr{
  position:absolute;
  z-index:4;
  left:82.05%; top:37.55%; width:12.55%; height:18.55%;
  object-fit:contain;
  background:#fff;
  padding:.35%;
}
.voucher-preview .voucher-qr-error{
  position:absolute;z-index:4;left:82.05%;top:37.55%;width:12.55%;height:18.55%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  color:#222;background:#fff;font-size:1.1cqw;font-weight:700;padding:1%;
}
@media(max-width:760px){
  .voucher-preview{border-radius:10px}
}