* { box-sizing: border-box; }
body{
font-family: "Segoe UI", Tahoma, Arial, sans-serif;
background:#f5f7fa;
margin:0; padding:20px;
min-height:100vh;
display:flex; justify-content:center;
color:#1f2937;
}
.wrap{ width:100%; max-width:900px; }
header, main, footer{
background:#fff;
border-radius:14px;
box-shadow:0 10px 25px rgba(0,0,0,.08);
}
header{
padding:18px 22px;
margin-bottom:16px;
display:flex; justify-content:space-between; align-items:center;
gap:10px; flex-wrap:wrap;
}
header .brand{ font-size:1.3rem; font-weight:700; color:#1f2937; text-decoration:none; }
header nav a{ color:#2563eb; text-decoration:none; font-weight:600; }
main{ padding:26px 28px; line-height:1.6; }
main h1{ margin:0 0 6px; font-size:1.6rem; }
main h2{ margin:26px 0 8px; font-size:1.15rem; }
main p, main li{ color:#374151; }
main a{ color:#2563eb; }
.updated{ color:#6b7280; font-size:.9rem; margin:0 0 18px; }
.notice{
background:#fff7ed; border:1px solid #fed7aa; color:#9a3412;
border-radius:12px; padding:14px 16px; margin:16px 0;
}
form{ display:flex; flex-direction:column; gap:14px; max-width:560px; margin-top:18px; }
label{ font-weight:600; display:flex; flex-direction:column; gap:6px; }
input, textarea, select{
padding:10px 12px; border-radius:10px; border:1.8px solid #cbd5e1;
font:inherit; background:#fff;
}
textarea{ min-height:140px; resize:vertical; }
input:focus, textarea:focus, select:focus{ outline:none; border-color:#2563eb; }
button{
padding:12px 14px; border:0; border-radius:12px;
background:#2563eb; color:#fff; font-weight:700; font-size:1rem; cursor:pointer;
transition: background .2s ease;
}
button:hover{ background:#1d4ed8; }
button:disabled{ background:#93c5fd; cursor:default; }
.hidden{ display:none; }
.status{ padding:12px 14px; border-radius:12px; }
.status.ok{ background:#ecfdf5; color:#065f46; border:1px solid #a7f3d0; }
.status.err{ background:#fef2f2; color:#991b1b; border:1px solid #fecaca; }
footer{
margin-top:16px;
padding:16px 18px;
color:#6b7280;
font-size:.92rem;
display:flex; justify-content:space-between; gap:10px; flex-wrap:wrap;
}
footer a{ color:#2563eb; text-decoration:none; }
footer a:hover{ text-decoration:underline; }