* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background: #0d1117;
  color: #c9d1d9;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.container {
  width: 100%;
  max-width: 520px;
  padding: 20px;
}

.card {
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 8px;
  padding: 32px;
}

h1 {
  font-size: 24px;
  margin-bottom: 16px;
  color: #58a6ff;
}

h2 { font-size: 18px; margin-bottom: 16px; color: #8b949e; }
h3 { font-size: 16px; margin: 24px 0 12px; color: #8b949e; }

/* Tabs */
.tab-bar { display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid #30363d; }
.tab {
  flex: 1; padding: 10px; background: none; border: none; color: #8b949e;
  font-size: 14px; cursor: pointer; border-bottom: 2px solid transparent;
  border-radius: 0; font-weight: 500;
}
.tab:hover { color: #c9d1d9; }
.tab.active { color: #58a6ff; border-bottom-color: #58a6ff; }
.tab-content { }

/* Nav bar */
.nav-bar {
  display: flex; gap: 0; margin-bottom: 20px; border-bottom: 1px solid #30363d;
}
.nav-link {
  padding: 10px 16px; color: #8b949e; text-decoration: none; font-size: 14px;
  border-bottom: 2px solid transparent; font-weight: 500;
}
.nav-link:hover { color: #c9d1d9; }
.nav-link.active { color: #58a6ff; border-bottom-color: #58a6ff; }
#logoutBtn { margin-left: auto; color: #f85149; }

/* Forms */
.form-group { margin-bottom: 14px; }
label { display: block; margin-bottom: 6px; font-size: 13px; color: #8b949e; font-weight: 500; }
input, textarea {
  width: 100%; padding: 10px 12px; background: #0d1117; border: 1px solid #30363d;
  border-radius: 6px; color: #c9d1d9; font-size: 14px; outline: none; font-family: inherit;
}
input:focus, textarea:focus { border-color: #58a6ff; }
textarea { font-family: 'Courier New', monospace; resize: vertical; min-height: 120px; }

button {
  width: 100%; padding: 10px; background: #1f6feb; border: none; border-radius: 6px;
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer; margin-top: 4px;
}
button:hover { background: #388bfd; }
button.danger { background: #da3633; }
button.danger:hover { background: #f85149; }
button.small { width: auto; padding: 4px 12px; font-size: 12px; margin: 0; }

/* Messages */
.msg { font-size: 13px; margin-bottom: 10px; padding: 8px 12px; border-radius: 6px; }
.msg.error { color: #f85149; background: rgba(248,81,73,0.1); }
.msg.success { color: #3fb950; background: rgba(63,185,80,0.1); }
.hidden { display: none; }

/* Config list */
.config-item {
  background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
  padding: 12px; margin-bottom: 10px;
}
.config-item .name { font-weight: 600; color: #c9d1d9; display: block; margin-bottom: 4px; }
.config-item .preview {
  font-size: 12px; color: #8b949e; overflow-x: auto; white-space: pre-wrap;
  word-break: break-all; max-height: 100px; overflow-y: auto;
}
.config-item .actions { margin-top: 8px; display: flex; gap: 8px; }

.muted { color: #8b949e; font-size: 13px; }
.url-display { color: #58a6ff; word-break: break-all; }
.avatar-section { margin: 12px 0; }
.avatar-preview { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; border: 2px solid #30363d; }
.source-badge { font-size: 11px; padding: 2px 6px; border-radius: 3px; margin-left: 8px; }
.source-badge.online { background: rgba(56,139,253,0.15); color: #58a6ff; }
.source-badge.local { background: rgba(63,185,80,0.15); color: #3fb950; }
.source-badge.storage { background: rgba(200,200,200,0.1); color: #8b949e; }