/* NetEdison Community Registry — Design System */
@import url('https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@700,900&f[]=satoshi@400,500,700&display=swap');

:root {
  --navy:      #0D1F2D;
  --navy-mid:  #152B3C;
  --teal:      #3DB5BE;
  --teal-dark: #2A8C94;
  --amber:     #E87B1E;
  --white:     #FFFFFF;
  --off-white: #F4F8F9;
  --muted:     #6B8A99;
  --border:    #D0E0E6;
  --text:      #1A2E3B;
  --success:   #2EAF70;
  --warning:   #E8A11E;
  --danger:    #D94F4F;
}

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

body {
  font-family: 'Satoshi', system-ui, sans-serif;
  background: var(--off-white);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
}

/* ── Layout ── */
.site-header {
  background: var(--navy);
  padding: 0 2rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 64px;
  border-bottom: 3px solid var(--teal);
}
.site-header .logo {
  display: flex; align-items: center; gap: .75rem; text-decoration: none;
}
.site-header .logo-mark {
  width: 32px; height: 32px;
}
.site-header .logo-text {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900; font-size: 1.25rem;
  color: var(--white); letter-spacing: -.01em;
}
.site-header .logo-text span { color: var(--teal); }
.site-header nav { margin-left: auto; display: flex; gap: 1.5rem; }
.site-header nav a { color: var(--muted); text-decoration: none; font-size: .9rem; transition: color .2s; }
.site-header nav a:hover, .site-header nav a.active { color: var(--teal); }

.container { max-width: 900px; margin: 0 auto; padding: 0 1.5rem; }
.container-wide { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }

/* ── Hero (form page) ── */
.page-hero {
  background: var(--navy);
  color: var(--white);
  padding: 3.5rem 1.5rem 3rem;
  text-align: center;
}
.page-hero h1 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 900; font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -.02em; margin-bottom: .75rem;
}
.page-hero h1 em { color: var(--teal); font-style: normal; }
.page-hero p { color: #8BAFC0; font-size: 1.05rem; max-width: 560px; margin: 0 auto; }

/* ── Cards & Form ── */
.card {
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 2rem;
  margin-bottom: 1.5rem;
}
.card h2 {
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700; font-size: 1.25rem;
  color: var(--navy); margin-bottom: 1.25rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid var(--teal);
}
.card h2.amber { border-color: var(--amber); }
.card h2.navy  { border-color: var(--navy); }
.card h2.gold  { border-color: #c9a200; color: #c9a200; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 600px) { .form-grid { grid-template-columns: 1fr; } }
.form-grid .full { grid-column: 1 / -1; }

.form-group { display: flex; flex-direction: column; gap: .4rem; }
.form-group label { font-size: .85rem; font-weight: 600; color: var(--navy); }
.form-group label .req { color: var(--amber); margin-left: 2px; }
.form-group input,
.form-group select,
.form-group textarea {
  padding: .65rem .9rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: .95rem;
  color: var(--text);
  background: var(--white);
  transition: border-color .2s;
  width: 100%;
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(61,181,190,.12);
}
.form-group textarea { resize: vertical; min-height: 90px; }

.check-row { display: flex; align-items: center; gap: .6rem; cursor: pointer; }
.check-row input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--teal); }
.check-row span { font-size: .9rem; }

/* Persona tabs */
.persona-tabs { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.persona-tab {
  padding: .5rem 1.25rem; border-radius: 6px;
  border: 1.5px solid var(--border);
  font-size: .9rem; font-weight: 600; cursor: pointer;
  background: var(--white); color: var(--muted);
  transition: all .2s;
}
.persona-tab:hover { border-color: var(--teal); color: var(--teal); }
.persona-tab.active-coder   { background: #EAF8F9; border-color: var(--teal); color: var(--teal-dark); }
.persona-tab.active-engineer { background: #FEF3E8; border-color: var(--amber); color: #B85E0D; }
.persona-tab.active-user     { background: #EAF0F5; border-color: var(--navy); color: var(--navy); }
.persona-tab.active-investor { background: #FDF8E1; border-color: #c9a200; color: #8a6e00; }

.persona-fields { display: none; }
.persona-fields.active { display: block; }

/* Multi-select pills */
.pill-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.pill-check { display: none; }
.pill-label {
  padding: .3rem .75rem; border-radius: 20px;
  border: 1.5px solid var(--border);
  font-size: .8rem; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.pill-check:checked + .pill-label {
  background: var(--teal); border-color: var(--teal); color: var(--white);
}
.amber .pill-check:checked + .pill-label {
  background: var(--amber); border-color: var(--amber); color: var(--white);
}
.gold .pill-check:checked + .pill-label {
  background: #c9a200; border-color: #c9a200; color: var(--white);
}

/* Submit button */
.btn-submit {
  display: block; width: 100%;
  padding: 1rem 2rem;
  background: var(--teal); color: var(--white);
  border: none; border-radius: 10px;
  font-family: 'Cabinet Grotesk', sans-serif;
  font-weight: 700; font-size: 1.1rem;
  cursor: pointer; transition: background .2s;
  margin-top: .5rem;
}
.btn-submit:hover { background: var(--teal-dark); }

/* ── Admin ── */
.admin-bar {
  background: var(--navy-mid);
  border-bottom: 1px solid rgba(255,255,255,.1);
  padding: .75rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
}
.admin-bar .admin-label { color: var(--muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .08em; }
.admin-bar a { color: var(--muted); text-decoration: none; font-size: .85rem; }
.admin-bar a:hover { color: var(--teal); }
.admin-bar a.logout { margin-left: auto; color: #E8816B; }

.stats-row { display: flex; gap: 1rem; margin: 1.5rem 0; flex-wrap: wrap; }
.stat-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: 10px; padding: 1.25rem 1.5rem;
  flex: 1; min-width: 140px;
  border-top: 4px solid var(--teal);
}
.stat-card.amber { border-top-color: var(--amber); }
.stat-card.navy  { border-top-color: var(--navy); }
.stat-card.green { border-top-color: var(--success); }
.stat-card.gold  { border-top-color: #c9a200; }
.stat-card.gold .stat-num { color: #c9a200; }
.stat-card .stat-num { font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900; font-size: 2rem; color: var(--navy); }
.stat-card .stat-label { font-size: .8rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.view-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--border); margin-bottom: 1.5rem; }
.view-tab {
  padding: .65rem 1.5rem; font-weight: 600; font-size: .9rem;
  color: var(--muted); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: all .2s;
}
.view-tab:hover { color: var(--teal); }
.view-tab.active { color: var(--teal); border-bottom-color: var(--teal); }
.view-tab.amber.active { color: var(--amber); border-bottom-color: var(--amber); }
.view-tab.navy.active  { color: var(--navy); border-bottom-color: var(--navy); }
.view-tab.gold         { color: #c9a200; }
.view-tab.gold.active  { color: #c9a200; border-bottom-color: #c9a200; }

/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.data-table th {
  background: var(--navy); color: var(--white);
  padding: .7rem 1rem; text-align: left;
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 700;
  font-size: .78rem; text-transform: uppercase; letter-spacing: .06em;
  white-space: nowrap;
}
.data-table td { padding: .7rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table tr:hover td { background: #F0F7F8; }
.data-table tr:last-child td { border-bottom: none; }

.badge {
  display: inline-block; padding: .2rem .6rem; border-radius: 20px;
  font-size: .75rem; font-weight: 600;
}
.badge-pending  { background: #FEF3E8; color: #B85E0D; }
.badge-active   { background: #E4F7EF; color: #1A7D4F; }
.badge-verified { background: #EAF8F9; color: var(--teal-dark); }
.badge-inactive { background: #F3F3F3; color: var(--muted); }
.badge-coder    { background: #EAF8F9; color: var(--teal-dark); }
.badge-engineer { background: #FEF3E8; color: #B85E0D; }
.badge-user     { background: #EAF0F5; color: var(--navy); }
.badge-investor { background: #FDF8E1; color: #8a6e00; }

.action-btn {
  padding: .25rem .65rem; border-radius: 5px;
  font-size: .78rem; font-weight: 600;
  border: 1px solid var(--border);
  background: var(--white); color: var(--text);
  cursor: pointer; text-decoration: none;
}
.action-btn:hover { border-color: var(--teal); color: var(--teal); }
.action-btn.danger:hover { border-color: var(--danger); color: var(--danger); }

.export-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .5rem 1rem; border-radius: 7px;
  background: var(--navy); color: var(--white);
  font-size: .85rem; font-weight: 600; text-decoration: none;
  transition: background .2s;
}
.export-btn:hover { background: var(--navy-mid); }

.search-bar {
  display: flex; gap: .75rem; align-items: center; margin-bottom: 1.25rem;
}
.search-bar input {
  padding: .55rem .9rem; border: 1.5px solid var(--border);
  border-radius: 8px; font-family: inherit; font-size: .9rem;
  flex: 1; max-width: 320px;
}
.search-bar input:focus { outline: none; border-color: var(--teal); }

/* Login */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--navy);
}
.login-card {
  background: var(--white); border-radius: 14px; padding: 2.5rem;
  width: 100%; max-width: 380px;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.login-card h1 {
  font-family: 'Cabinet Grotesk', sans-serif; font-weight: 900;
  font-size: 1.5rem; color: var(--navy);
  margin-bottom: .25rem;
}
.login-card p { color: var(--muted); font-size: .9rem; margin-bottom: 1.75rem; }

/* Alerts */
.alert {
  padding: .9rem 1.25rem; border-radius: 8px;
  margin-bottom: 1.25rem; font-size: .9rem;
}
.alert-success { background: #E4F7EF; color: #1A7D4F; border: 1px solid #B5E8D0; }
.alert-error   { background: #FDECEC; color: #A32D2D; border: 1px solid #F0BFBF; }

/* Footer */
.site-footer {
  background: var(--navy); color: var(--muted);
  text-align: center; padding: 2rem; font-size: .8rem;
  margin-top: 3rem;
}
.site-footer a { color: var(--teal); text-decoration: none; }

.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }
.text-muted { color: var(--muted); font-size: .85rem; }
.table-wrap { overflow-x: auto; border-radius: 10px; border: 1px solid var(--border); }