
:root{
  --brand:#E11937; /* badge red */
  --ink:#121212;
  --muted:#6b7280;
  --paper:#f7f7f9;
  --stroke:#e5e7eb;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;background:var(--paper);color:var(--ink)}
.header{position:sticky;top:0;background:#fff;border-bottom:1px solid var(--stroke);z-index:100}
.header .wrap{max-width:1100px;margin:0 auto;padding:14px 18px;display:flex;align-items:center;gap:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.badge{background:var(--brand);color:#fff;border-radius:8px;padding:8px 10px;font-weight:700;line-height:1;display:inline-flex;align-items:center}
.title{font-weight:800;font-size:18px;letter-spacing:.2px}
.by{font-size:12px;color:var(--muted)}
.menu{margin-left:auto;position:relative}
.menu button{background:#fff;border:1px solid var(--stroke);border-radius:10px;padding:10px 12px;cursor:pointer}
.menu ul{position:absolute;right:0;margin-top:8px;list-style:none;padding:8px;background:#fff;border:1px solid var(--stroke);border-radius:12px;display:none;min-width:240px}
.menu li a{display:block;padding:10px 12px;text-decoration:none;color:var(--ink)}
.menu li a:hover{background:var(--paper)}
.hero{max-width:1100px;margin:24px auto 0;padding:0 18px 42px}
.card{background:#fff;border:1px solid var(--stroke);border-radius:14px;padding:22px}
.card h1{margin:0 0 8px;font-size:28px}
.card p{margin:0;color:var(--muted)}
.uploader{margin-top:14px;border:2px dashed var(--stroke);border-radius:14px;padding:24px;text-align:center;background:linear-gradient(#fff,#fff) padding-box, repeating-linear-gradient(45deg,#fafafa 0,#fafafa 8px,#fff 8px,#fff 16px) border-box}
.uploader input[type=file]{display:none}
.uploader .btn{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--stroke);border-radius:10px;padding:10px 14px;background:#fff;cursor:pointer}
.uploader .hint{margin-top:8px;font-size:12px;color:var(--muted)}
.actions{display:none;margin-top:16px;gap:10px;flex-wrap:wrap;justify-content:center}
.primary{background:var(--brand);color:#fff;border:0;border-radius:10px;padding:10px 14px;font-weight:600;cursor:pointer}
.ghost{background:#fff;border:1px solid var(--stroke);border-radius:10px;padding:10px 14px;cursor:pointer}
.footer{max-width:1100px;margin:30px auto;padding:0 18px 40px;color:var(--muted);font-size:12px}
.footer a{color:inherit}
