:root {
  --brand: #f28c1b;
  --text: #1f2937;
  --muted: #6b7280;
  --line: #e5e7eb;
  --bg: #f5f5f5;
  --panel: #ffffff;
  --danger: #dc2626;
  --ok: #059669;
  --btn: #2563eb;
  --btn-hover: #1d4ed8;
}
* { box-sizing: border-box; }
body { margin:0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif; color:var(--text); background:var(--bg); }

.page { max-width:1200px; margin:16px auto; padding:0 20px; }
.topbar { display:flex; align-items:center; gap:0; margin-bottom:12px; background:#fff; padding:18px 28px; border-radius:8px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
.logo { display:flex; align-items:center; }
.logo-img { height:64px; width:auto; display:block; }
.title { flex:1; text-align:center; font-weight:600; font-size:25px; color:var(--text); margin-left:-64px; }

.rule { display:none; }

.card { border:1px solid var(--line); border-radius:8px; background:#fff; overflow:hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.08); }
.card-inner { display:grid; grid-template-columns: 1fr 1fr; gap:24px; padding:24px; background:var(--panel); }
@media (max-width:860px){ .title{ text-align:left; margin-left:0; } .card-inner{ grid-template-columns:1fr; gap:20px; padding:20px 16px; } }

.form-row { display:grid; grid-template-columns:160px 1fr; align-items:center; gap:12px; margin:10px 0; }
.label { color:#374151; font-size:14px; font-weight:500; text-align:right; }

.form-section { padding-top:36px; }

input[type="text"], input[type="password"]{
  width:100%; border:1px solid #d1d5db; border-radius:6px; padding:8px 12px; font-size:14px; outline:none; background:#fff; transition: all 0.2s ease;
}
input:focus { border-color:#2563eb; box-shadow:0 0 0 3px rgba(37,99,235,.12); }

.note h3 { margin:0 0 10px; font-size:16px; font-weight:600; color:var(--text); }
.note p, .note li { margin:0 0 6px 0; font-size:14px; line-height:1.5; color:#4b5563; }
.note .warn { color:#dc2626; margin-bottom:10px; font-weight:500; }
.note .warn-box { color:#dc2626; margin-bottom:10px; font-weight:500; background:#fef2f2; padding:8px 10px; border-radius:6px; border-left:3px solid #ef4444; }
.note ul { margin:8px 0 0 18px; padding:0; }
.note ul li { margin:4px 0; }
.note .blue { margin-top:10px; color:#1d4ed8; font-weight:500; background:#eff6ff; padding:8px 10px; border-radius:6px; border-left:3px solid #3b82f6; }

.footerbar { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 24px; border-top:1px solid var(--line); background:#fafafa; min-height:50px; }
.status { min-height:18px; font-size:14px; color:var(--muted); white-space: pre-line; text-align: left; max-width: 70%; }
.status.ok { color:var(--ok); font-weight:600; }
.status.err { color:var(--danger); font-weight:600; }
@media (max-width:860px){ .footerbar{ padding:14px 16px; } }

.btn { border:0; border-radius:6px; padding:9px 20px; background:var(--btn); color:#fff; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:14px; transition: all 0.2s ease; box-shadow: 0 1px 3px rgba(37,99,235,0.3); }
.btn:hover { background:var(--btn-hover); box-shadow: 0 2px 6px rgba(37,99,235,0.4); transform:translateY(-1px); }
.btn:active { transform:translateY(0); }
.btn:disabled { opacity:.6; cursor:not-allowed; box-shadow:none; transform:none; }

.hint { margin-top:6px; color:var(--muted); font-size:12px; line-height:1.4; }
.pill { display:inline-block; font-size:11px; padding:2px 8px; border:1px solid var(--line); border-radius:999px; background:#fff; margin-left:6px; color:#374151; }

.copyright { text-align:center; color:#9ca3af; font-size:12px; margin-top:12px; padding:10px; }