:root {
  --bg-deepest: #0b0f0e;
  --bg-base: #101514;
  --bg-raised: #151c1b;
  --bg-elevated: #1b2422;
  --bg-surface: #222e2b;
  --purple-400: #ff8b78;
  --purple-500: #ff6b57;
  --purple-600: #e65343;
  --purple-glow: rgba(255, 107, 87, .18);
  --green: #35b7a5;
  --blue: #4cb8d5;
  --pink: #ff8b78;
  --border: #2a3633;
  --border-light: #3b4b47;
  --text: #f4f7f6;
  --text-secondary: #bac5c2;
  --muted: #7f918c;
  --radius-sm: 6px;
  --radius: 8px;
  --radius-lg: 8px;
  --premium-night: #0b0f0e;
  --premium-card: rgba(24, 32, 30, .96);
  --premium-card-2: rgba(31, 42, 39, .94);
  --premium-purple: #ff6b57;
  --premium-purple-light: #ff9b8b;
  --premium-gold: #35b7a5;
  --premium-gold-light: #7ed8cc;
  --premium-border: rgba(255, 107, 87, .28);
  --premium-gold-border: rgba(53, 183, 165, .46);
  --premium-text: #f4f7f6;
  --premium-soft: #bac5c2;
  --premium-muted: #7f918c;
}

body.app-shell,
body.auth-page,
body.admin-page {
  background: #0b0f0e;
}

body.app-shell::after,
body.auth-page::after,
body.admin-page::after {
  background: none;
}

body.app-shell::before,
body.auth-page::before,
body.admin-page::before {
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 32px 32px;
  opacity: 1;
}

.app-shell .topbar {
  background: rgba(11, 15, 14, .94);
  border-bottom-color: rgba(53, 183, 165, .28);
}

.brand-icon,
.app-shell .brand-icon {
  overflow: hidden;
  padding: 0;
  border-radius: 7px;
  background: #f4f7f6;
  border: 1px solid rgba(255, 139, 120, .45);
  box-shadow: 0 4px 18px rgba(0,0,0,.28);
}

.brand-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.app-shell .brand-title {
  background: none;
  -webkit-text-fill-color: #f4f7f6;
  color: #f4f7f6;
  letter-spacing: 0;
}

.app-shell .sidebar {
  background: #101715;
  border-right-color: rgba(53, 183, 165, .2);
}

.app-shell .nav-mode-btn.active,
.app-shell .nav-item.active {
  border-color: rgba(53, 183, 165, .48);
  background: rgba(53, 183, 165, .13);
  box-shadow: none;
}

.app-shell .btn-primary,
.auth-page .btn-primary,
.admin-page .btn-primary {
  background: #ff6b57 !important;
  border-color: #ff6b57 !important;
  box-shadow: none !important;
}

.app-shell .home-hero {
  background: #151c1b;
  border-color: rgba(53, 183, 165, .34);
  box-shadow: none;
}

.app-shell .home-section,
.app-shell .workflow-card,
.app-shell .advantage-card,
.app-shell .modal,
.auth-card,
.login-panel,
.admin-page .panel {
  border-radius: 8px !important;
  background-image: none !important;
}

.app-shell .capability-tag {
  border-radius: 999px;
  border-color: rgba(53, 183, 165, .35);
  background: rgba(53, 183, 165, .1);
  color: #a5e6dd;
}

.auth-logo,
.login-icon,
.admin-title-icon {
  background: #f4f7f6 !important;
  border-radius: 8px !important;
  box-shadow: none !important;
  overflow: hidden;
}

.auth-page .auth-card,
.admin-page .login-panel {
  border-color: rgba(53, 183, 165, .34) !important;
  box-shadow: 0 18px 50px rgba(0,0,0,.38) !important;
}

.auth-page .auth-title,
.admin-page .login-title,
.admin-page .admin-title-text {
  color: #f4f7f6 !important;
  -webkit-text-fill-color: #f4f7f6 !important;
  background: none !important;
}

.auth-page .auth-tabs,
.auth-page .auth-input,
.admin-page .form-input {
  border-color: #33423e !important;
  background: #111816 !important;
}

.auth-page .auth-tab.active,
.admin-page .admin-tab.active {
  background: #35b7a5 !important;
  border-color: #35b7a5 !important;
  color: #07100e !important;
  box-shadow: none !important;
}

.auth-page .auth-input:focus,
.admin-page .form-input:focus {
  border-color: #35b7a5 !important;
  box-shadow: 0 0 0 3px rgba(53, 183, 165, .15) !important;
}

.auth-logo img,
.login-icon img,
.admin-title-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.team-toolbar {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) minmax(120px, 1fr) minmax(140px, 1fr) auto;
  gap: 8px;
  margin: 12px 0;
}

.team-toolbar input {
  min-width: 0;
  padding: 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg-surface);
  color: var(--text);
}

.team-member-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.2fr) minmax(100px, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}

.team-member-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 720px) {
  .team-toolbar { grid-template-columns: 1fr; }
  .team-member-row { grid-template-columns: 1fr; }
  .team-member-actions { justify-content: flex-start; }
}