/* ログイン画面。
   入口なので独立させている（invite.css は招待URL・見つからないときで使う）。 */

:root{
  --ink:#060A14;
  --text:#101724;
  --muted:#6B7686;
  --line:#DFE5EE;
  --teal:#0E9AA0;
  --teal-lit:#1EC3CA;
  --teal-deep:#07555A;
}

*{box-sizing:border-box}

body{
  margin:0;min-height:100vh;min-height:100dvh;
  display:grid;place-items:center;padding:32px 20px;
  color:var(--text);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic UI",system-ui,sans-serif;
  font-size:14px;line-height:1.7;font-feature-settings:"palt" 1;
  -webkit-font-smoothing:antialiased;
  background:var(--ink);
  overflow-x:hidden;
}

/* 奥の光と、細かい格子。 */
body::before,body::after{content:"";position:fixed;inset:-30%;pointer-events:none;z-index:0}
body::before{
  background:
    radial-gradient(44% 40% at 16% 10%,rgba(30,195,202,.34),transparent 64%),
    radial-gradient(50% 44% at 86% 90%,rgba(58,86,180,.36),transparent 66%),
    radial-gradient(30% 28% at 70% 8%,rgba(14,154,160,.14),transparent 70%);
  filter:blur(10px);
  animation:drift 30s ease-in-out infinite alternate;
}
body::after{
  background-image:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(64% 58% at 50% 45%,#000,transparent 80%);
  -webkit-mask-image:radial-gradient(64% 58% at 50% 45%,#000,transparent 80%);
}
@keyframes drift{
  from{transform:translate3d(-1.5%,-1%,0) scale(1)}
  to{transform:translate3d(2%,1.5%,0) scale(1.07)}
}

/* 外枠。細い明るい線を額縁にして、中身を1段沈める。 */
.wrap{
  position:relative;z-index:1;
  width:100%;max-width:880px;
  padding:1px;border-radius:25px;
  background:linear-gradient(150deg,rgba(255,255,255,.32),rgba(255,255,255,.05) 38%,rgba(120,160,255,.30));
  box-shadow:0 60px 110px -50px rgba(0,0,0,.92),0 12px 40px -24px rgba(0,0,0,.7);
  animation:up .6s cubic-bezier(.2,.9,.25,1) both;
}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

.panes{
  display:grid;grid-template-columns:.86fr 1fr;
  border-radius:24px;overflow:hidden;background:#fff;
}

/* 左：名乗り */
.side{
  position:relative;isolation:isolate;
  padding:44px 34px;display:flex;flex-direction:column;justify-content:space-between;
  background:linear-gradient(155deg,#1E3160,#141F3D 48%,#0A1226);
  color:#fff;overflow:hidden;
}
/* 斜めの細い線 */
.side::before{
  content:"";position:absolute;inset:0;z-index:-2;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.055) 0 1px,transparent 1px 15px);
}
/* 大きな印を、透かしとして沈める。角で切れるように置く。 */
.side::after{
  content:"";position:absolute;right:-96px;bottom:-104px;width:310px;height:310px;z-index:-1;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>") no-repeat center/contain;
  opacity:.09;
}
/* 左上から光を1枚かぶせて、面がのっぺりしないようにする */
.side>*{position:relative;z-index:1}
.side .glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(56% 44% at 16% 6%,rgba(90,150,255,.30),transparent 72%),
    radial-gradient(44% 40% at 88% 96%,rgba(150,120,245,.24),transparent 74%);
}

.brand{display:flex;align-items:center;gap:13px}
.brand-mark{
  width:auto;height:58px;flex:0 0 auto;display:block;
  filter:drop-shadow(0 10px 22px rgba(0,0,0,.55));
}
.brand-name{font-size:19px;font-weight:900;letter-spacing:.05em;line-height:1.25}

.side-foot{display:flex;align-items:center;gap:9px;font-size:11.5px;letter-spacing:.08em;color:rgba(203,216,245,.78)}
.side-foot .dot{width:6px;height:6px;border-radius:50%;background:#5CC8FF;box-shadow:0 0 0 4px rgba(92,200,255,.20)}

/* 右：入力 */
.form{padding:44px 40px;display:flex;flex-direction:column;justify-content:center;background:#fff}
.form h1{
  margin:0 0 4px;font-size:21px;font-weight:900;letter-spacing:.05em;color:var(--text);
}
.rule{width:34px;height:3px;border-radius:2px;margin-bottom:22px;
  background:linear-gradient(90deg,var(--teal-lit),var(--teal-deep))}

.lbl{font-size:11.5px;font-weight:700;letter-spacing:.07em;color:var(--muted);margin-top:16px}

.f{position:relative;margin-top:6px}
.f>svg{
  position:absolute;left:14px;top:50%;transform:translateY(-50%);
  width:16px;height:16px;fill:none;stroke:#9AA6B6;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;pointer-events:none;transition:stroke .18s;
}
.fld{
  width:100%;padding:13px 14px 13px 41px;
  border:1px solid var(--line);border-radius:13px;
  font:inherit;font-size:14px;color:var(--text);background:#F6F8FC;
  transition:border-color .18s,box-shadow .18s,background .18s;
}
.fld::placeholder{color:#AEB8C6}
.fld:hover{background:#F1F4FA}
.fld:focus{outline:none;background:#fff;border-color:var(--teal);box-shadow:0 0 0 3px rgba(14,154,160,.16)}
.fld:focus-visible{outline:none}
.f:focus-within>svg{stroke:var(--teal)}

.go{
  width:100%;margin-top:26px;padding:14px;border:0;border-radius:14px;cursor:pointer;
  font:inherit;font-size:14px;font-weight:900;letter-spacing:.12em;color:#fff;
  background:linear-gradient(135deg,var(--teal-lit),var(--teal-deep));
  box-shadow:0 16px 30px -16px rgba(7,85,90,.95),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .14s,box-shadow .2s,filter .2s;
}
.go:hover{filter:brightness(1.07);box-shadow:0 20px 36px -16px rgba(7,85,90,1),inset 0 1px 0 rgba(255,255,255,.32)}
.go:active{transform:translateY(1px);box-shadow:0 9px 20px -14px rgba(7,85,90,.9)}
.go:focus-visible{outline:3px solid rgba(30,195,202,.6);outline-offset:2px}

/* 知らせ */
.err{
  display:flex;gap:8px;align-items:flex-start;
  font-size:12.5px;color:#9B3423;background:#FCEDEA;
  border:1px solid #F2CFC8;border-radius:12px;padding:10px 12px;margin:0;
}
.ok{
  font-size:12.5px;color:#15616D;background:#E8F4F4;
  border:1px solid #CDE7E8;border-radius:12px;padding:10px 12px;margin:0;line-height:1.7;
}
.foot{font-size:12.5px;text-align:center;margin:0}
.foot a{color:#5A6B7B;text-decoration:none}
.foot a:hover{text-decoration:underline}
.err svg{flex:0 0 auto;margin-top:3px;stroke:#C4422F;stroke-width:2;fill:none}

.num{font-variant-numeric:tabular-nums}

/* 横に並べられない幅では、上下に積む */
@media (max-width:720px){
  .wrap{max-width:430px;border-radius:21px}
  .panes{grid-template-columns:1fr;border-radius:20px}
  .side{padding:22px 22px 20px;flex-direction:row;align-items:center;justify-content:space-between;gap:14px}
  .side::after{right:-118px;bottom:-96px;width:210px;height:210px;opacity:.08}
  .brand-mark{height:44px}
  .brand-name{font-size:17px}
  .side-foot{font-size:10.5px}
  .form{padding:26px 22px 24px}
  .form h1{font-size:19px}
  .fld{font-size:16px}          /* iOS で勝手に拡大されないように */
}
@media (max-width:400px){
  .side-foot{display:none}
}

@media (prefers-reduced-motion:reduce){
  .wrap{animation:none}
  body::before{animation:none}
  .go,.fld,.f>svg{transition:none}
}