* { box-sizing: border-box; }
body {
    margin: 0;
    color: #222;
    font-family: Arial, Helvetica, sans-serif;
    background-color: #d9d4c7;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,0.18) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.18) 75%, rgba(255,255,255,0.18)),
        linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%, rgba(0,0,0,0.04));
    background-size: 24px 24px;
    background-position: 0 0, 12px 12px;
}
.page-wrap {
    max-width: 700px;
    margin: 30px auto;
    padding: 28px 28px 48px;
    background: #fff;
    min-height: auto;
    font-size: 18px;
    line-height: 1.55;
    border: 6px solid #222;
    border-radius: 10px;
}
h1 { font-size: 2rem; line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: 1.45rem; line-height: 1.25; margin: 1.4rem 0 0.7rem; }
p { margin: 0 0 1rem; }
ul { margin-top: 0; padding-left: 1.4rem; }
li { margin-bottom: 0.45rem; }
a { color: #0645ad; }
.button, button { display: inline-block; border: 0; border-radius: 8px; background: #222; color: #fff; padding: 0.7rem 1rem; text-decoration: none; font-size: 1rem; cursor: pointer; }
.notice { border: 1px solid #ddd; background: #fafafa; padding: 0.9rem 1rem; border-radius: 8px; margin: 1rem 0; }
.code-form { display: flex; gap: 0.5rem; align-items: center; margin: 1rem 0; }
.code-form input { flex: 1; min-width: 0; padding: 0.7rem; font-size: 1.1rem; border: 1px solid #bbb; border-radius: 8px; text-transform: uppercase; letter-spacing: 0.08em; }
.small-note { font-size: 0.9rem; color: #666; }
hr { border: 0; border-top: 1px solid #ddd; margin: 1.5rem 0; }
@media (max-width: 600px) {
    .page-wrap {
        margin: 12px;
        padding: 20px 14px 42px;
        font-size: 17px;
        border: 5px solid #222;
        border-radius: 8px;
    }
}
    h1 { font-size: 1.7rem; }
    .code-form { flex-direction: column; align-items: stretch; }
    .button, button { width: 100%; text-align: center; }
}