* { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: -apple-system, sans-serif; background: #f5f6f8; color: #1a1a2e; padding: 20px; }
.page { max-width: 800px; margin: 0 auto; }
h1 { font-size: 24px; margin-bottom: 20px; }

.login-box { max-width: 360px; margin: 80px auto; text-align: center; }
.login-box h2 { margin-bottom: 16px; }
.login-box input { width: 100%; padding: 12px; font-size: 16px; border: 1px solid #ddd; border-radius: 8px; }
.login-box button { margin-top: 12px; width: 100%; padding: 12px; background: #2563eb; color: #fff; border: none; border-radius: 8px; font-size: 16px; cursor: pointer; }

.tabs { display: flex; gap: 4px; margin-bottom: 20px; }
.tab { padding: 10px 20px; border: 1px solid #ddd; border-radius: 8px 8px 0 0; cursor: pointer; background: #fff; font-size: 14px; }
.tab.active { background: #2563eb; color: #fff; border-color: #2563eb; }

.panel { background: #fff; border: 1px solid #ddd; border-radius: 8px; padding: 20px; margin-bottom: 20px; }
.panel h3 { margin-bottom: 16px; }
label { display: block; margin-bottom: 6px; font-weight: 600; font-size: 14px; }
textarea, input[type="text"], input[type="number"], input[type="color"], select { width: 100%; padding: 10px; font-size: 14px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 12px; }
textarea { min-height: 120px; resize: vertical; }
.row { display: flex; gap: 12px; }
.row > * { flex: 1; }
.btn { padding: 10px 24px; background: #2563eb; color: #fff; border: none; border-radius: 6px; font-size: 14px; cursor: pointer; }
.btn:hover { opacity: .9; }
.btn.danger { background: #dc2626; }
.msg { padding: 10px; border-radius: 6px; margin-top: 12px; font-size: 14px; }
.msg.ok { background: #f0fdf4; color: #059669; border: 1px solid #bbf7d0; }
.msg.err { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

.result-box { margin-top: 12px; padding: 12px; background: #f9fafb; border-radius: 6px; font-size: 14px; }
.result-box pre { white-space: pre-wrap; font-size: 13px; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th, td { padding: 8px 12px; text-align: left; border-bottom: 1px solid #eee; }
th { font-weight: 700; color: #666; font-size: 13px; }