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

body {
  background: #0f1117;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #e0e0ff;
  min-height: 100vh;
}

a { text-decoration: none; color: inherit; }

.topbar {
  background: #0d0f1a;
  border-bottom: 1px solid #1e2040;
  padding: 16px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.topbar-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #7c6aff;
}
.topbar-actions { display: flex; gap: 16px; align-items: center; }
.topbar-actions a { font-size: 12px; color: #444; transition: color 0.2s; }
.topbar-actions a:hover { color: #7c6aff; }

.main { max-width: 860px; margin: 0 auto; padding: 48px 24px; }

.greeting { margin-bottom: 40px; }
.greeting h1 { font-size: 28px; font-weight: 300; color: #c0b8ff; margin-bottom: 4px; }
.greeting h1 span { color: #7c6aff; font-weight: 600; }
.greeting p { font-size: 13px; color: #444; }

.section-label {
  font-size: 10px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: #444; margin-bottom: 10px;
}

.hero-card {
  background: linear-gradient(135deg, #1a1d2e, #1e1a3a);
  border: 1px solid #7c6aff55;
  border-radius: 14px; padding: 24px 28px;
  display: flex; align-items: center; gap: 20px;
  cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s;
  margin-bottom: 24px;
}
.hero-card:hover { border-color: #7c6aff; box-shadow: 0 0 24px #7c6aff22; }
.hero-icon {
  width: 52px; height: 52px; background: #2a2050;
  border-radius: 12px; display: flex; align-items: center;
  justify-content: center; font-size: 26px; flex-shrink: 0;
}
.hero-info h2 { font-size: 18px; font-weight: 600; color: #d0c8ff; margin-bottom: 4px; }
.hero-info p { font-size: 13px; color: #666; }
.hero-arrow { margin-left: auto; color: #7c6aff; font-size: 20px; opacity: 0.7; }

.apps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.app-card {
  background: #13161f; border: 1px solid #1e2040;
  border-radius: 12px; padding: 20px 16px;
  text-align: center; cursor: pointer;
  transition: border-color 0.2s, background 0.2s; display: block;
}
.app-card:hover { border-color: #7c6aff55; background: #1a1d2e; }
.app-card .icon { font-size: 28px; margin-bottom: 10px; }
.app-card .name { font-size: 13px; font-weight: 600; color: #c0b8ff; margin-bottom: 4px; }
.app-card .desc { font-size: 11px; color: #444; }

.center-wrap { display: flex; align-items: center; justify-content: center; min-height: 100vh; }
.form-card { width: 100%; max-width: 400px; padding: 24px; }
.brand { text-align: center; margin-bottom: 36px; }
.brand-icon {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, #2a2050, #1a1d2e);
  border: 1px solid #7c6aff55; border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 28px; margin: 0 auto 14px;
}
.brand h1 { font-size: 20px; font-weight: 600; color: #c0b8ff; margin-bottom: 4px; }
.brand p { font-size: 12px; color: #444; letter-spacing: 1px; text-transform: uppercase; }

.card { background: #13161f; border: 1px solid #1e2040; border-radius: 16px; padding: 32px; }
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: 11px; font-weight: 600;
  letter-spacing: 1px; text-transform: uppercase; color: #555; margin-bottom: 8px;
}
.field input {
  width: 100%; background: #0d0f1a; border: 1px solid #1e2040;
  border-radius: 8px; padding: 12px 14px;
  font-size: 14px; color: #e0e0ff; outline: none; transition: border-color 0.2s;
}
.field input:focus { border-color: #7c6aff; }
.field input::placeholder { color: #2a2d4a; }

.btn {
  width: 100%; background: #7c6aff; border: none; border-radius: 8px;
  padding: 13px; font-size: 14px; font-weight: 600; color: #fff;
  cursor: pointer; margin-top: 8px; transition: background 0.2s; letter-spacing: 0.5px;
}
.btn:hover { background: #6a58e8; }
.btn-secondary {
  width: 100%; background: transparent; border: 1px solid #1e2040;
  border-radius: 8px; padding: 11px; font-size: 13px; color: #555;
  cursor: pointer; margin-top: 10px; transition: border-color 0.2s, color 0.2s;
}
.btn-secondary:hover { border-color: #7c6aff55; color: #c0b8ff; }

.alert { border-radius: 8px; padding: 10px 14px; font-size: 12px; margin-bottom: 18px; }
.alert-error { background: #2a1020; border: 1px solid #5a2030; color: #ff6b8a; }
.alert-success { background: #0a2015; border: 1px solid #1a5030; color: #6bffaa; }

.page-footer { text-align: center; margin-top: 60px; font-size: 11px; color: #2a2d4a; }

.settings-section { margin-bottom: 40px; }
.settings-section h3 {
  font-size: 13px; font-weight: 600; color: #7c6aff;
  margin-bottom: 16px; letter-spacing: 1px; text-transform: uppercase;
}
.divider { border: none; border-top: 1px solid #1e2040; margin: 32px 0; }