:root{--ink:#00120e;--panel:#001a14;--paper:#effff4;--violet:#a68ffc;--green:#00ec00;--deepblue:#2a4e75;--deepteal:#002019;--forest:#006342;--indigo:#1f1750;--gray:#6e8a82;--line:rgba(239,255,244,0.1);--radius:18px}*{box-sizing:border-box}html,body{margin:0;padding:0}body{background:radial-gradient(circle at 12% 8%,rgba(31,23,80,0.55),transparent 40%),radial-gradient(circle at 88% 18%,rgba(0,99,66,0.5),transparent 42%),radial-gradient(circle at 50% 100%,rgba(42,78,117,0.35),transparent 55%),var(--deepteal);background-attachment:fixed;color:var(--paper);font-family:"Inter",sans-serif;min-height:100vh;position:relative}body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:0;background-image:linear-gradient(rgba(239,255,244,0.035) 1px,transparent 1px),linear-gradient(90deg,rgba(239,255,244,0.035) 1px,transparent 1px);background-size:42px 42px;mask-image:linear-gradient(to bottom,rgba(0,0,0,0.9),transparent 75%)}header,.hero,.stage,footer{position:relative;z-index:1}::selection{background:var(--green);color:#00120e}header{padding:26px clamp(20px,4vw,64px);display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:12px}.brand img{height:26px;width:auto;display:block}.brand small{display:block;font-size:11px;color:var(--gray);font-weight:500;margin-top:2px;letter-spacing:0}.tag{font-size:11px;text-transform:uppercase;letter-spacing:0.12em;color:var(--green);border:1px solid rgba(0,236,0,0.35);background:rgba(0,236,0,0.06);padding:7px 13px;border-radius:6px;display:flex;align-items:center;gap:8px}.tag::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green)}.hero{padding:clamp(28px,5vw,56px) clamp(20px,4vw,64px) 8px;max-width:1200px;margin:0 auto}.eyebrow{display:flex;align-items:center;gap:10px;color:var(--green);font-size:12px;text-transform:uppercase;letter-spacing:0.14em;font-weight:500;margin-bottom:18px}.eyebrow::before{content:">_";color:var(--green);font-weight:700}h1{font-size:clamp(32px,5vw,56px);line-height:1.05;margin:0 0 16px;font-weight:600;max-width:820px;color:#fff}h1 span{background:linear-gradient(100deg,var(--green),var(--violet) 75%);-webkit-background-clip:text;background-clip:text;color:transparent}.lede{color:#a9c4bc;max-width:560px;font-size:16px;line-height:1.6;margin-bottom:0}.stage{display:grid;grid-template-columns:1.05fr 0.95fr;gap:40px;padding:40px clamp(20px,4vw,64px) 80px;max-width:1200px;margin:0 auto;align-items:start}@media (max-width:880px){.stage{grid-template-columns:1fr}}.panel{background:linear-gradient(180deg,rgba(31,23,80,0.25),rgba(0,26,20,0.4)),var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:28px}.panel h2{font-size:13px;text-transform:uppercase;letter-spacing:0.1em;color:var(--gray);margin:0 0 22px;font-weight:500;display:flex;align-items:center;gap:10px}.panel h2 .num{color:#00120e;background:var(--green);font-weight:700;width:22px;height:22px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;font-size:12px}.field{margin-bottom:18px}.field label{display:block;font-size:11px;color:var(--gray);margin-bottom:8px;text-transform:uppercase;letter-spacing:0.08em}.field input[type="text"]{width:100%;background:#00100c;border:1px solid var(--line);color:var(--paper);padding:12px 14px;border-radius:8px;font-size:14px;outline:none;transition:border-color 0.15s ease,box-shadow 0.15s ease}.field input[type="text"]:focus{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,236,0,0.12)}.field input[type="text"]::placeholder{color:#4a6058}.dropzone{border:1.5px dashed var(--line);border-radius:12px;padding:26px 16px;text-align:center;cursor:pointer;transition:border-color 0.15s ease,background 0.15s ease;margin-bottom:8px}.dropzone:hover,.dropzone.drag{border-color:var(--green);background:rgba(0,236,0,0.05)}.dropzone strong{display:block;font-size:14px;margin-bottom:4px}.dropzone span{font-size:12px;color:var(--gray)}.dropzone input{display:none}.zoomrow{display:flex;align-items:center;gap:14px;margin-top:14px}.zoomrow input[type="range"]{flex:1;accent-color:var(--green)}.zoomval{font-size:13px;color:var(--green);min-width:44px;text-align:right}.hint{font-size:12px;color:var(--gray);margin-top:6px}.btn{width:100%;padding:15px 20px;border-radius:8px;border:none;cursor:pointer;font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center;gap:8px;transition:transform 0.12s ease,opacity 0.12s ease,box-shadow 0.15s ease}.btn:active{transform:scale(0.98)}.btn-primary{background:linear-gradient(100deg,var(--green),#7cf77c);color:#00120e;margin-top:6px}.btn-primary:hover:not(:disabled){box-shadow:0 0 24px rgba(0,236,0,0.35)}.btn-primary:disabled{opacity:0.35;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--paper);border:1px solid var(--line);margin-top:10px}.btn-ghost:hover{border-color:var(--gray)}.preview-wrap{position:sticky;top:24px;display:flex;flex-direction:column;align-items:center;gap:18px}.badge-shell{position:relative;filter:drop-shadow(0 30px 60px rgba(0,0,0,0.45))}canvas#badgeCanvas{display:block;border-radius:16px;width:340px;height:auto;touch-action:none;cursor:grab}canvas#badgeCanvas:active{cursor:grabbing}.preview-caption{font-size:12px;color:var(--gray);text-align:center;max-width:300px}.preview-caption b{color:var(--paper)}