:root{
  --ink:#1B2430;
  --paper:#F7F7F5;
  --card:#FFFFFF;
  --line:rgba(27,36,48,0.14);
  --muted:#5B6470;
  --accent:#3E5C76;
}
*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height:1.55;
}
.wrap{ max-width:440px; margin:0 auto; padding:4rem 1.5rem; }
h1{ font-size:24px; margin:0 0 0.4rem; }
p.sub{ color:var(--muted); font-size:14.5px; margin:0 0 2rem; }
.field{ margin-bottom:1.1rem; }
label{ display:block; font-size:13px; color:var(--muted); margin-bottom:0.35rem; }
input[type=text], input[type=email], input[type=password], input[type=file]{
  width:100%;
  padding:0.7rem 0.85rem;
  border:1px solid var(--line);
  border-radius:5px;
  font-size:15px;
  background:var(--card);
  color:var(--ink);
}
input:focus{ outline:none; border-color:var(--accent); }
button{
  width:100%;
  background:var(--ink);
  color:#fff;
  border:none;
  border-radius:5px;
  padding:0.85rem;
  font-size:15px;
  font-weight:600;
  cursor:pointer;
}
button:active{ opacity:0.85; }
.error{ color:#A32D2D; font-size:13.5px; margin-top:0.8rem; display:none; }
.hint{ font-size:12.5px; color:var(--muted); margin-top:0.4rem; }
a{ color:var(--accent); }
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:6px;
  padding:1.5rem;
  margin-bottom:1.2rem;
}
.url-box{
  font-family:monospace;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:4px;
  padding:0.6rem 0.8rem;
  font-size:14px;
  word-break:break-all;
}
.status{ font-size:13.5px; margin-top:0.8rem; min-height:1.2em; }
.status.ok{ color:#2E7D4F; }
.status.error{ color:#A32D2D; }
.top-nav{ display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.top-nav a{ font-size:13px; text-decoration:none; }