*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: -apple-system, system-ui, sans-serif;
  max-width: 900px;
  margin: 0 auto;
  padding: 20px;
  color: #1a1a1a;
  line-height: 1.6;
}

nav { padding: 10px 0; border-bottom: 1px solid #ddd; margin-bottom: 30px; }
nav a { margin-right: 15px; color: #0066cc; text-decoration: none; }
nav a:hover { text-decoration: underline; }
.nav-user { float: right; color: #666; font-size: 14px; }

h1 { margin-bottom: 5px; }
.subtitle { color: #666; margin-top: 0; margin-bottom: 30px; }

label { display: block; font-weight: bold; margin-bottom: 3px; }
input, select, textarea {
  display: block; width: 100%; padding: 8px;
  margin-bottom: 15px; border: 1px solid #ccc; font-size: 16px;
}
button {
  padding: 10px 24px; font-size: 16px; cursor: pointer;
  border: 1px solid #333; background: #333; color: #fff;
}
button:hover { background: #555; }
button:disabled { background: #999; border-color: #999; cursor: not-allowed; }

.file-drop {
  border: 2px dashed #ccc; padding: 40px 20px;
  text-align: center; cursor: pointer; margin-bottom: 15px; display: block;
}
.file-drop:hover { border-color: #666; }
.file-drop.has-file { border-color: #0066cc; border-style: solid; }

table { width: 100%; border-collapse: collapse; margin: 15px 0; }
th, td { padding: 8px 12px; border: 1px solid #ddd; text-align: left; }
th { background: #f5f5f5; }

.error { color: #cc0000; }
.success { color: #008800; }

pre, code { background: #f5f5f5; font-family: monospace; font-size: 14px; }
code { padding: 2px 6px; }
pre { padding: 15px; overflow-x: auto; }

.progress-bar { background: #eee; height: 24px; margin: 10px 0; }
.progress-fill { background: #0066cc; height: 100%; transition: width 0.3s; }

.plan-cards { display: flex; gap: 20px; margin: 20px 0; }
.plan-card { flex: 1; border: 1px solid #ddd; padding: 20px; }
.plan-card.current { border-color: #0066cc; border-width: 2px; }
.plan-card h3 { margin-top: 0; }
.plan-price { font-size: 24px; font-weight: bold; margin: 10px 0; }
.plan-card ul { padding-left: 20px; }
.plan-card li { margin-bottom: 5px; }

.status-completed { color: #008800; font-weight: bold; }
.status-processing { color: #cc8800; }
.status-failed { color: #cc0000; }
.status-pending { color: #666; }

.muted { color: #666; font-size: 14px; }
fieldset { border: 1px solid #ddd; padding: 20px; margin-bottom: 20px; }
legend { font-weight: bold; padding: 0 5px; }
.hidden { display: none; }