:root { --ink:#15211d; --muted:#6f7a75; --paper:#f4f2eb; --card:#fffefa; --green:#176b4d; --lime:#c8f04b; --line:#dfe3da; --danger:#a83e32; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; color:var(--ink); background:var(--paper); font:15px/1.6 Inter, "Microsoft YaHei", system-ui, sans-serif; }
button,input,textarea { font:inherit; }
button { cursor:pointer; }
.hidden { display:none !important; }
.brand { display:flex; align-items:center; gap:11px; font-weight:800; letter-spacing:.04em; }
.brand span { display:grid; place-items:center; width:38px; height:38px; color:white; background:var(--green); border-radius:10px 10px 10px 3px; }
.eyebrow { margin:0 0 12px; color:var(--green); font-size:12px; font-weight:800; letter-spacing:.2em; }
.claim-page { background:linear-gradient(115deg,#183e31 0 48%,var(--paper) 48%); }
.claim-shell { min-height:100vh; max-width:1180px; margin:auto; padding:70px 48px; display:grid; grid-template-columns:1fr 480px; gap:100px; align-items:center; }
.intro { color:white; }
.intro .brand { margin-bottom:80px; }.intro .brand span { color:var(--ink); background:var(--lime); }
.intro .eyebrow { color:var(--lime); }.intro h1 { margin:0; font-size:clamp(46px,6vw,78px); line-height:1.08; letter-spacing:-.05em; }.intro h1 em { color:var(--lime); font-style:normal; }.intro .lead { max-width:480px; color:#cbd8d2; font-size:17px; }
.steps { display:flex; gap:25px; margin-top:64px; color:#bdd0c8; }.steps span { display:flex; gap:8px; align-items:center; }.steps b { color:var(--lime); font-size:11px; }
.claim-card,.login-panel,.admin-card,.table-card { background:var(--card); border:1px solid rgba(18,47,36,.1); border-radius:22px; box-shadow:0 24px 70px rgba(16,42,32,.13); }
.claim-card { padding:42px; }.card-top { color:var(--green); font-size:12px; font-weight:700; }.status-dot { display:inline-block; width:8px; height:8px; margin-right:7px; background:#3fbd76; border-radius:50%; box-shadow:0 0 0 5px #dff5e8; }.claim-card h2 { margin:30px 0 0; font-size:32px; }.claim-card>p { color:var(--muted); margin:4px 0 28px; }
label { display:block; margin-bottom:7px; color:#44514b; font-size:13px; font-weight:700; }
input,textarea { width:100%; color:var(--ink); background:#fafaf6; border:1px solid var(--line); border-radius:10px; outline:none; padding:13px 14px; }.input-wrap { display:flex; align-items:center; border:1px solid var(--line); border-radius:12px; background:#fafaf6; overflow:hidden; }.input-wrap:focus-within,input:focus,textarea:focus { border-color:var(--green); box-shadow:0 0 0 3px rgba(23,107,77,.1); }.input-wrap span { margin-left:15px; color:var(--green); }.input-wrap input { border:0; box-shadow:none; background:transparent; font-family:ui-monospace,monospace; letter-spacing:.08em; }
.generate-row { display:grid; grid-template-columns:1fr auto; gap:10px; }.generate-row input { font-family:ui-monospace,monospace; letter-spacing:.05em; }.random-button { padding:0 18px; color:var(--green); background:#e5f1e9; border:1px solid #b8d1c2; border-radius:10px; font-weight:800; white-space:nowrap; }.random-button:hover { color:white; background:var(--green); }.field-hint { margin:6px 0 0; color:var(--muted); font-size:12px; }
form>button,.claim-card form button { width:100%; margin-top:18px; padding:14px 18px; color:white; background:var(--green); border:0; border-radius:11px; font-weight:800; }.claim-card form button { display:flex; justify-content:space-between; }.claim-card form button:hover,form>button:hover { background:#10563d; }button:disabled { opacity:.55; cursor:wait; }
.message { margin-top:16px; padding:11px 13px; border-radius:9px; color:#225b43; background:#e4f5ea; }.message.error { color:#8c3028; background:#fbe8e5; }
.claim-panel { margin-top:18px; padding:20px; border:1px solid #c7ddce; border-radius:14px; background:#f1f8f3; }.balance-line { display:flex; justify-content:space-between; align-items:center; margin-bottom:16px; }.balance-line>span { color:var(--green); font-weight:800; }.balance-line p { margin:0; color:var(--muted); }.balance-line strong { color:var(--green); font-size:22px; }.quantity-row { display:grid; grid-template-columns:44px 1fr 44px; gap:8px; }.quantity-row button { color:var(--green); background:white; border:1px solid #b8d1c2; border-radius:9px; font-size:20px; font-weight:800; }.quantity-row input { text-align:center; font-weight:800; }.claim-panel form>small { display:block; margin-top:5px; color:var(--muted); }
.result { margin-top:20px; padding:22px; text-align:center; border:1px solid #b9dfc7; border-radius:14px; background:#eff9f2; }.success-mark { display:grid; place-items:center; width:34px; height:34px; margin:0 auto 8px; color:white; background:var(--green); border-radius:50%; }.result small { color:var(--green); }.secret-row { display:flex; margin:12px 0 8px; border:1px dashed #8abd9f; background:white; border-radius:9px; overflow:hidden; }.secret-row code { flex:1; padding:12px; overflow-wrap:anywhere; }.secret-row button { border:0; padding:0 14px; color:var(--green); background:#e2f2e7; font-weight:700; }.result p { margin:0; color:var(--muted); }.tip { padding-top:20px; border-top:1px solid var(--line); font-size:12px; }
.result-head { display:flex; justify-content:space-between; align-items:center; margin-top:14px; }.result-head button { padding:6px 10px; color:var(--green); background:white; border:1px solid #b8d1c2; border-radius:7px; font-weight:700; }.result pre { max-height:240px; margin:8px 0 12px; padding:14px; overflow:auto; text-align:left; white-space:pre-wrap; overflow-wrap:anywhere; color:#174d3a; background:white; border:1px dashed #8abd9f; border-radius:9px; font:13px/1.8 ui-monospace,monospace; }
.admin-header { height:72px; padding:0 max(24px,calc((100% - 1180px)/2)); display:flex; justify-content:space-between; align-items:center; color:white; background:#153a2d; }.admin-header a { color:#d9e8e1; text-decoration:none; }.admin-shell { max-width:1180px; margin:auto; padding:46px 24px 80px; }.login-panel { max-width:440px; margin:8vh auto; padding:38px; }.login-panel h1 { margin:0; }.login-panel>p:not(.eyebrow) { color:var(--muted); }.dashboard-title,.section-head { display:flex; align-items:center; justify-content:space-between; }.dashboard-title h1 { margin:0; }.ghost,.mini { color:var(--green); background:transparent; border:1px solid #bfcac3; border-radius:8px; padding:8px 13px; }.metrics { display:grid; grid-template-columns:repeat(4,1fr); gap:15px; margin:28px 0; }.metrics article { padding:23px; background:#173e30; color:white; border-radius:16px; }.metrics small { display:block; color:#bbccc5; }.metrics strong { font-size:34px; color:var(--lime); }.admin-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }.admin-card,.table-card { padding:25px; box-shadow:none; }.section-head { margin-bottom:19px; }.section-head small { color:var(--green); font-weight:800; letter-spacing:.14em; }.section-head h2 { margin:0; font-size:20px; }.form-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:12px; }.table-card { margin-top:18px; }.table-scroll { overflow:auto; }table { width:100%; border-collapse:collapse; }th,td { padding:13px 10px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }th { color:var(--muted); font-size:12px; }td code { color:#174d3a; }.mini { margin-left:8px; padding:4px 8px; font-size:12px; }.mini.danger { color:var(--danger); border-color:#debdb8; }.mini.danger:hover { color:white; background:var(--danger); border-color:var(--danger); }.badge { display:inline-block; padding:3px 9px; border-radius:20px; font-size:12px; }.badge.on { color:#176b4d; background:#def2e5; }.badge.off { color:#7a5c56; background:#eee8e6; }.remaining { display:block; color:var(--muted); }.empty { padding:35px; text-align:center; color:var(--muted); }
@media (max-width:850px) { .claim-page { background:linear-gradient(180deg,#183e31 0 38%,var(--paper) 38%); }.claim-shell { padding:30px 20px 50px; grid-template-columns:1fr; gap:45px; }.intro .brand { margin-bottom:45px; }.intro h1 { font-size:46px; }.steps { margin-top:30px; flex-wrap:wrap; }.claim-card { padding:27px 22px; }.metrics { grid-template-columns:1fr 1fr; }.admin-grid { grid-template-columns:1fr; } }
@media (max-width:520px) { .metrics { grid-template-columns:1fr; }.form-row { grid-template-columns:1fr; }.generate-row { grid-template-columns:1fr; }.random-button { padding:11px; }.admin-header { padding:0 16px; }.admin-header a { font-size:12px; } }