:root{
  --bg:#f4f7fb;
  --card:#fff;
  --accent:#C62828;
  --accent2:#87ceeb;
  --muted:#6b7280;
  --radius:12px;
  --maxw:760px;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
*{box-sizing:border-box}
body{margin:0;background:linear-gradient(135deg,#e6f0ff,#fff);color:#111;min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:28px}
.container{width:100%;max-width:var(--maxw);background:var(--card);padding:22px;border-radius:var(--radius);box-shadow:0 10px 30px rgba(15,23,42,0.06)}
h1{margin:0 0 8px;color:var(--accent)}
.lead{margin:0 0 18px;color:var(--muted)}
.field{display:block;margin:10px 0}
.field span{display:block;margin-bottom:6px;color:#374151}
input[type="text"]{width:100%;padding:10px;border-radius:8px;border:1px solid #e6e9ef}
.row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
button{background:linear-gradient(90deg,var(--accent),var(--accent2));border:0;color:white;padding:10px 14px;border-radius:10px;cursor:pointer}
.muted{color:var(--muted);margin-bottom:10px}
.list{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.item{display:flex;justify-content:space-between;align-items:center;padding:12px;border-radius:10px;border:1px solid #eef2ff;background:linear-gradient(180deg,#fff,#fbfcff)}
.item .meta{flex:1}
.item strong{display:block}
.hint{font-size:13px;color:var(--muted);margin-top:8px}
.code{font-family:monospace;background:#f1f5f9;padding:4px 6px;border-radius:6px}
@media (max-width:640px){ .row{flex-direction:column} }