:root{
  --grad:linear-gradient(96deg,#4285F4 0%,#9b72cb 48%,#e8710a 100%);
  --grad-soft:linear-gradient(96deg,rgba(66,133,244,.12),rgba(155,114,203,.12),rgba(232,113,10,.10));
  --blue:#1a73e8; --purple:#9b72cb; --ink:#1f2330; --ink2:#3c4043; --muted:#5f6472; --faint:#8a90a0;
  --line:#e7eaf3; --line2:#dfe3ee; --card:#ffffff; --field:#f2f5fc; --field2:#eef2fb;
  --ok:#188038; --err:#d93025; --amber:#e37400;
  --r-card:26px; --r-ctl:14px; --shadow:0 1px 2px rgba(60,64,67,.06),0 8px 28px rgba(60,64,67,.08);
  --shadow-lg:0 12px 40px rgba(60,64,67,.14);
  --sans:"Google Sans","Google Sans Text","Outfit",Inter,Roboto,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:var(--sans);line-height:1.65;-webkit-font-smoothing:antialiased;
  min-height:100vh;background:
    radial-gradient(1100px 520px at 12% -10%,rgba(66,133,244,.10),transparent 55%),
    radial-gradient(1000px 520px at 92% -6%,rgba(217,101,112,.09),transparent 52%),
    radial-gradient(900px 600px at 50% 120%,rgba(155,114,203,.08),transparent 55%),
    #f7f9fe;}
a{color:var(--blue);text-decoration:none}
.wrap{max-width:720px;margin:0 auto;padding:22px 18px 72px}
.wrap.wide{max-width:1180px}
.gtext{background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}

/* top bar */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin:6px 2px 22px}
.brand{display:flex;align-items:center;gap:13px}
.brand .ic{width:46px;height:46px;border-radius:15px;display:flex;align-items:center;justify-content:center;font-size:22px;color:#fff;background:var(--grad);box-shadow:0 6px 18px rgba(120,90,200,.28)}
.brand h1{font-size:19px;margin:0;font-weight:600;letter-spacing:-.2px}
.brand .sub{font-size:12.5px;color:var(--muted);margin-top:1px}
.pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;color:var(--ink2);background:var(--card);border:1px solid var(--line);padding:8px 15px;border-radius:999px;box-shadow:var(--shadow)}
.dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px rgba(24,128,56,.14)}
.dot.red{background:var(--err);box-shadow:0 0 0 3px rgba(217,48,37,.14)}

/* hero */
.hero{text-align:center;padding:16px 8px 26px}
.hero h2{font-size:36px;line-height:1.18;margin:8px 0 14px;font-weight:600;letter-spacing:-.9px}
.hero p{color:var(--muted);font-size:15.5px;margin:0 auto;max-width:540px}
.chip{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink2);background:var(--card);border:1px solid var(--line);border-radius:999px;padding:8px 15px;margin:6px 5px 0;box-shadow:0 1px 2px rgba(60,64,67,.05)}
.chip .g{width:8px;height:8px;border-radius:50%;background:var(--grad)}
.note{display:inline-block;margin-top:18px;font-size:12px;color:var(--muted);background:var(--grad-soft);border-radius:999px;padding:7px 17px}

/* three-step overview */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:6px 0 26px}
.fcard{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:20px 16px;box-shadow:var(--shadow);text-align:center}
.fcard .num{width:40px;height:40px;border-radius:50%;background:var(--grad);color:#fff;font-weight:600;font-size:17px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 6px 16px rgba(120,90,200,.25)}
.fcard .ft{font-size:14.5px;font-weight:600;margin-bottom:3px}
.fcard .fd{font-size:12.5px;color:var(--muted)}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:28px;margin-bottom:18px;box-shadow:var(--shadow)}
.card h2{font-size:19px;margin:0 0 8px;font-weight:600;letter-spacing:-.3px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;margin-bottom:6px}
.desc{font-size:13px;color:var(--muted);margin:0 0 16px;line-height:1.7}
label{font-size:12.5px;color:var(--muted);display:block;margin:14px 0 7px;font-weight:500}
input,textarea,select{width:100%;background:var(--field);border:1px solid transparent;color:var(--ink);border-radius:var(--r-ctl);padding:13px 16px;font:inherit;transition:background .15s,border-color .15s,box-shadow .15s}
input::placeholder,textarea::placeholder{color:var(--faint)}
input:focus,textarea:focus,select:focus{outline:none;background:var(--card);border-color:#c9d6f5;box-shadow:0 0 0 4px rgba(66,133,244,.14)}
textarea{resize:vertical;min-height:104px}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%235f6472' stroke-width='2'><path d='M6 8l4 4 4-4'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:40px}
code{background:var(--field2);border-radius:7px;padding:2px 7px;font-size:12.5px;color:#3949ab;font-family:ui-monospace,Menlo,monospace}

/* buttons */
.btn{cursor:pointer;border:none;border-radius:999px;padding:13px 24px;font:inherit;font-weight:600;color:#fff;background:var(--grad);
  box-shadow:0 4px 14px rgba(120,90,200,.24);transition:transform .08s,box-shadow .2s,filter .2s}
.btn:hover{filter:brightness(1.04);box-shadow:0 7px 20px rgba(120,90,200,.32)}
.btn:active{transform:translateY(1px)}
.btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none;filter:none}
.btn.secondary{background:var(--card);color:var(--ink2);border:1px solid var(--line2);box-shadow:none}
.btn.secondary:hover{background:var(--field);filter:none}
.btn.success{background:linear-gradient(96deg,#34a853,#188038)}
.btn.danger{background:linear-gradient(96deg,#ea4335,#c5221f)}
.btn.sm{padding:8px 15px;font-size:12.5px;border-radius:999px}

.row{display:flex;gap:11px;flex-wrap:wrap;align-items:center}
.row>*{flex:1;min-width:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.msg{font-size:13px;margin-top:12px;min-height:18px}
.msg.ok{color:var(--ok)}.msg.err{color:var(--err)}
.muted{color:var(--muted)}
.hidden{display:none}
.locked{opacity:.5;pointer-events:none}

/* badges */
.badge{font-size:11.5px;padding:5px 12px;border-radius:999px;background:var(--field2);color:var(--muted);font-weight:600}
.badge.queued,.badge.redeeming{background:rgba(66,133,244,.12);color:#1a56c4}
.badge.processing{background:rgba(232,113,10,.13);color:#b1560a}
.badge.completed{background:rgba(24,128,56,.13);color:#137333}
.badge.failed,.badge.refund_review,.badge.needs_manual_review,.badge.cancelled{background:rgba(217,48,37,.1);color:#c5221f}

/* progress steps */
.steps{display:flex;justify-content:space-between;margin:20px 0 6px;position:relative}
.steps::before{content:"";position:absolute;top:16px;left:8%;right:8%;height:3px;background:var(--line2);border-radius:3px}
.step{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);flex:1;text-align:center}
.step .n{width:34px;height:34px;border-radius:50%;background:var(--card);border:2px solid var(--line2);display:flex;align-items:center;justify-content:center;font-weight:600;color:var(--faint)}
.step.active .n{border-color:transparent;background:var(--grad);color:#fff;box-shadow:0 5px 14px rgba(120,90,200,.3)}
.step.done .n{border-color:transparent;background:linear-gradient(96deg,#34a853,#188038);color:#fff}

/* terminal / logs */
.term{background:#0f1524;border-radius:16px;border:1px solid #1b2338;padding:16px;font-family:ui-monospace,"Courier New",monospace;font-size:12px;max-height:280px;overflow:auto;color:#cfd6e6}
.term .ln{padding:2px 0;white-space:pre-wrap;word-break:break-word}

/* faq */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:2px 20px;margin-bottom:11px;box-shadow:0 1px 2px rgba(60,64,67,.05)}
.faq summary{cursor:pointer;list-style:none;padding:17px 0;font-weight:600;font-size:15px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--purple);font-size:22px;font-weight:400;line-height:1}
.faq details[open] summary::after{content:"–"}
.faq .a{font-size:13.5px;color:var(--muted);padding:0 0 18px;margin-top:-4px;line-height:1.75}
.section-title{text-align:center;font-size:16px;font-weight:600;margin:34px 0 16px;color:var(--ink2)}

/* metric chips (admin stats) */
.metrics{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:4px}
.metric{background:var(--field);border-radius:14px;padding:10px 16px;min-width:84px}
.metric .v{font-size:20px;font-weight:600;line-height:1.2}
.metric .l{font-size:11.5px;color:var(--muted);margin-top:1px}

/* table */
table{width:100%;border-collapse:collapse;font-size:13px}
th,td{text-align:left;padding:11px 10px;border-bottom:1px solid var(--line)}
th{color:var(--muted);font-weight:600;font-size:12px}
tbody tr:hover{background:var(--field)}

/* admin layout + login */
.split{display:grid;grid-template-columns:400px 1fr;gap:18px;align-items:start}
.login-wrap{max-width:440px;margin:8vh auto 0}
.card-header{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:6px}

/* modal */
.modal{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:var(--shadow-lg)}
.mask{position:fixed;inset:0;background:rgba(23,27,40,.42);backdrop-filter:blur(2px);z-index:40}

/* footer */
.foot{text-align:center;font-size:12.5px;color:var(--muted);margin-top:30px;line-height:1.95}
.foot strong{color:var(--ink2);font-weight:600}

@media(max-width:820px){.split{grid-template-columns:1fr}}
@media(max-width:600px){.hero h2{font-size:27px}.flow{grid-template-columns:1fr}.grid2{grid-template-columns:1fr}}