:root{
  --text:#142033;
  --muted:#5b6b83;
  --glass: rgba(255,255,255,.72);
  --border: rgba(120,160,220,.35);
  --shadow: 0 18px 60px rgba(20,40,80,.16);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;

  /* ✅ レンガ背景 + 読みやすいベール */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.55), rgba(230,246,255,.78)),
    radial-gradient(900px 420px at 50% 0%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),
    url("assets/bg-brick.jpg");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.wrap{ max-width:860px; margin:0 auto; padding:44px 18px 60px; }

.card{
  border:1px solid var(--border);
  background:var(--glass);
  backdrop-filter: blur(10px);
  border-radius:22px;
  padding:22px;
  box-shadow:var(--shadow);
}

.hero{ padding:26px 22px; }

h1,h2{ margin:0 0 12px; }

input{
  width:100%;
  padding:12px 14px;
  border:1px solid rgba(120,160,220,.5);
  border-radius:14px;
  font-size:16px;
  margin-top:10px;
  background:rgba(255,255,255,.85);
}

button, .btn{
  padding:12px 16px;
  border:1px solid rgba(90,140,210,.55);
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,255,255,.95),rgba(230,246,255,.75));
  font-size:16px;
  font-weight:700;
  cursor:pointer;
}

.msg{ margin-top:12px; color:var(--muted); }

.topbar{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:10px;
  margin-bottom:10px;
}
.tiny{ padding:8px 12px; border-radius:12px; font-size:14px; }