:root{
  --ink:#0f1c24;
  --ink-soft:#4a626e;
  --ink-faint:#7c929c;
  --line:#dbe4e8;
  --line-soft:#eaf0f2;
  --paper:#ffffff;
  --page:#f4f7f8;
  --navy:#1c3f86;
  --navy-hi:#2b58ad;
  --navy-ink:#ffffff;
  --ok:#1f7a3d;
  --warn:#a5620a;
  --bad:#b32d22;
  --display:'Barlow Condensed',Impact,sans-serif;
  --body:'Barlow',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,Consolas,monospace;
  --r:8px;
  --shadow:0 1px 2px rgba(15,28,36,.06), 0 6px 20px rgba(15,28,36,.06);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--body); color:var(--ink); background:var(--page);
  line-height:1.6; -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; min-height:100vh;
}
a{ color:var(--navy); }
img{ max-width:100%; }
.hidden{ display:none !important; }
.muted{ color:var(--ink-soft); }
.small{ font-size:13px; }
.mono{ font-family:var(--mono); font-size:12.5px; }
.right{ text-align:right; }
.nowrap{ white-space:nowrap; }
.rule{ border:none; border-top:1px solid var(--line); margin:22px 0; }

/* ------------------------------------------------------------------ topbar */
.topbar{
  background:#0f1c24; color:#eaf1f4; position:sticky; top:0; z-index:50;
  border-bottom:3px solid var(--navy);
}
.topbar-inner{
  max-width:1180px; margin:0 auto; padding:0 20px;
  display:flex; align-items:center; gap:18px; min-height:62px;
}
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; }
.brand-mark{
  width:34px; height:34px; border-radius:7px; background:var(--navy);
  display:grid; place-items:center; font-family:var(--display); font-weight:700;
  font-size:16px; letter-spacing:.04em; color:#fff;
}
.brand-text{ font-family:var(--display); font-weight:600; font-size:21px; letter-spacing:.06em;
  text-transform:uppercase; }

.nav-links{ margin-left:auto; display:flex; align-items:center; gap:4px; }
.nav-link{
  color:#b9cbd4; text-decoration:none; padding:8px 12px; border-radius:6px;
  font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase;
}
.nav-link:hover{ background:rgba(255,255,255,.07); color:#fff; }
.nav-link.active{ color:#fff; background:rgba(43,88,173,.35); }
.nav-user{ display:flex; align-items:center; gap:8px; margin-left:8px; padding-left:14px;
  border-left:1px solid rgba(255,255,255,.14); }
.nav-name{ font-size:13.5px; color:#cddbe2; max-width:150px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.nav-form{ margin:0; }
.btn-nav{ padding:7px 13px; font-size:14px; }
.nav-toggle{ display:none; background:none; border:none; color:#eaf1f4; font-size:22px;
  cursor:pointer; margin-left:auto; }

/* -------------------------------------------------------------------- wrap */
.wrap{ max-width:960px; margin:0 auto; padding:32px 20px 60px; width:100%; flex:1; }
.wrap-wide{ max-width:1180px; }

.page-title{ font-family:var(--display); font-size:36px; font-weight:600; letter-spacing:.02em;
  margin:0 0 4px; }
.page-sub{ color:var(--ink-soft); margin:0 0 26px; font-size:15.5px; }
.section{ margin-bottom:34px; }
.section-title{ font-family:var(--display); font-size:23px; font-weight:600; letter-spacing:.04em;
  text-transform:uppercase; color:var(--ink-soft); margin:0 0 14px;
  padding-bottom:8px; border-bottom:2px solid var(--line); }

/* -------------------------------------------------------------------- hero */
.hero{
  text-align:center; padding:64px 20px 52px; margin:-32px -20px 34px;
  background:linear-gradient(160deg,#12222c,#0f1c24 55%,#152c47);
  color:#eef4f7;
}
.hero-kicker{ font-family:var(--display); letter-spacing:.28em; text-transform:uppercase;
  font-size:13px; color:#8fb3d8; margin:0 0 10px; }
.hero-title{ font-family:var(--display); font-size:clamp(42px,8vw,76px); font-weight:700;
  letter-spacing:.02em; margin:0 0 26px; line-height:1.02; }
.hero-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

.prose{ max-width:720px; margin:0 auto 40px; font-size:16.5px; }
.prose p{ margin:0 0 18px; }

.feature-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px; margin-bottom:44px; }
.feature{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:22px; box-shadow:var(--shadow); }
.feature h3{ font-family:var(--display); font-size:20px; letter-spacing:.03em; margin:0 0 8px;
  color:var(--navy); }
.feature p{ margin:0; color:var(--ink-soft); font-size:15px; }

.cta{ text-align:center; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:38px 24px; box-shadow:var(--shadow); }
.cta h2{ font-family:var(--display); font-size:30px; margin:0 0 8px; }
.cta p{ color:var(--ink-soft); margin:0 0 20px; }

/* ------------------------------------------------------------------ panels */
.panel{ background:var(--paper); border:1px solid var(--line); border-radius:var(--r);
  padding:24px; box-shadow:var(--shadow); margin-bottom:20px; }
.panel-title{ font-family:var(--display); font-size:21px; letter-spacing:.04em; margin:0 0 14px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  flex-wrap:wrap; margin-bottom:12px; }
.panel-head .panel-title{ margin:0; }
.split{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }

/* ------------------------------------------------------------------ forms */
.stack{ display:flex; flex-direction:column; gap:14px; }
.field{ display:flex; flex-direction:column; gap:5px; }
.field > span{ font-family:var(--display); font-size:14px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); }
.field small{ color:var(--ink-faint); font-size:12.5px; }
input, select, textarea{
  font-family:var(--body); font-size:15px; padding:11px 13px; border-radius:6px;
  border:1px solid var(--line); background:#fff; color:var(--ink); width:100%;
}
input:focus, select:focus, textarea:focus{
  outline:none; border-color:var(--navy); box-shadow:0 0 0 3px rgba(28,63,134,.14);
}
input:disabled{ background:var(--line-soft); color:var(--ink-faint); }
textarea{ resize:vertical; }
.grid2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.grid3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:14px; }
.row{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.check{ display:flex; align-items:center; gap:9px; font-size:14.5px; color:var(--ink-soft); }
.check input{ width:auto; }
.inline{ display:inline; }
.inline-form{ display:flex; gap:8px; }
.inline-form input{ width:220px; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--display); font-size:16px; letter-spacing:.05em; text-transform:uppercase;
  padding:11px 20px; border-radius:6px; border:1px solid transparent; cursor:pointer;
  text-decoration:none; transition:filter .12s, background .12s; white-space:nowrap;
}
.btn-primary{ background:var(--navy); color:#fff; }
.btn-primary:hover{ filter:brightness(1.12); }
.btn-ghost{ background:transparent; color:var(--navy); border-color:var(--line); }
.btn-ghost:hover{ background:var(--line-soft); }
.hero .btn-ghost{ color:#dce8f2; border-color:rgba(255,255,255,.3); }
.hero .btn-ghost:hover{ background:rgba(255,255,255,.1); }
.btn-quiet{ background:var(--line-soft); color:var(--ink); border-color:var(--line); }
.btn-quiet:hover{ background:#dfe7ea; }
.btn-danger{ background:var(--bad); color:#fff; }
.btn-danger:hover{ filter:brightness(1.1); }
.btn-lg{ padding:14px 26px; font-size:18px; }
.btn-sm{ padding:6px 11px; font-size:13.5px; }
.btn-file{ display:inline-block; }

/* ------------------------------------------------------------------- flash */
.flash{ padding:13px 16px; border-radius:6px; margin-bottom:20px; font-size:15px;
  border:1px solid; }
.flash-ok{ background:#e9f6ed; border-color:#bfe3cb; color:var(--ok); }
.flash-error{ background:#fdecea; border-color:#f2c2bd; color:var(--bad); }
.flash-info{ background:#eaf1fb; border-color:#c5d7f2; color:var(--navy); }

/* ------------------------------------------------------------------- auth */
.auth-card{ max-width:430px; margin:20px auto; background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r); padding:32px; box-shadow:var(--shadow); }
.auth-card h1{ font-family:var(--display); font-size:30px; margin:0 0 6px; }
.auth-card > .muted{ margin:0 0 20px; }
.auth-alt{ margin:18px 0 0; text-align:center; color:var(--ink-soft); font-size:14.5px; }

/* ----------------------------------------------------------------- events */
.member-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:18px;
  flex-wrap:wrap; margin-bottom:28px; }
.member-quick{ display:flex; gap:10px; flex-wrap:wrap; }

.event-list{ display:flex; flex-direction:column; gap:12px; }
.event{
  display:grid; grid-template-columns:170px 1fr auto; gap:20px; align-items:center;
  background:var(--paper); border:1px solid var(--line); border-left:4px solid var(--navy);
  border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow);
}
.event-mine{ border-left-color:var(--ok); background:#fbfefc; }
.event-when{ display:flex; flex-direction:column; gap:2px; }
.event-day{ font-family:var(--display); font-size:19px; font-weight:600; letter-spacing:.02em; }
.event-dur{ font-size:13px; color:var(--ink-faint); font-family:var(--mono); }
.event-head{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; margin-bottom:4px; }
.event-head h3{ margin:0; font-size:18px; font-family:var(--display); letter-spacing:.02em; }
.event-body{ margin:0 0 8px; color:var(--ink-soft); font-size:14.5px; }
.event-meta{ display:flex; gap:14px; flex-wrap:wrap; font-size:13px; color:var(--ink-faint); }
.event-action form{ margin:0; }

.chip{ font-family:var(--display); font-size:12.5px; letter-spacing:.1em; text-transform:uppercase;
  background:var(--navy); color:#fff; padding:3px 9px; border-radius:4px; }

.tag{ display:inline-block; font-family:var(--display); font-size:12.5px; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 9px; border-radius:4px;
  background:var(--line-soft); color:var(--ink-soft); }
.tag-ok{ background:#e0f2e6; color:var(--ok); }
.tag-warn{ background:#fdf0dc; color:var(--warn); }
.tag-bad{ background:#fbe4e1; color:var(--bad); }
.tag-admin{ background:#e3ebfa; color:var(--navy); }
.tag-super{ background:var(--navy); color:#fff; }

/* ------------------------------------------------------------------ table */
.table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.table th{ text-align:left; font-family:var(--display); font-size:13.5px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--ink-soft); padding:9px 10px;
  border-bottom:2px solid var(--line); }
.table td{ padding:11px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.table tbody tr:hover td{ background:#fafcfd; }
.muted-row td{ opacity:.55; }

.plain-list{ margin:0 0 16px; padding-left:20px; }
.plain-list li{ margin-bottom:5px; }

.kv{ display:grid; grid-template-columns:120px 1fr; gap:6px 12px; margin:0; font-size:14.5px; }
.kv dt{ font-family:var(--display); font-size:13.5px; letter-spacing:.07em; text-transform:uppercase;
  color:var(--ink-faint); }
.kv dd{ margin:0; }

.empty{ background:var(--paper); border:1px dashed var(--line); border-radius:var(--r);
  padding:36px 22px; text-align:center; color:var(--ink-soft); }
.empty b{ display:block; font-family:var(--display); font-size:19px; letter-spacing:.03em;
  color:var(--ink); margin-bottom:5px; }

/* ------------------------------------------------------------------- tabs */
.tabs{ display:flex; gap:4px; border-bottom:2px solid var(--line); margin-bottom:22px; }
.tab{ padding:10px 18px; text-decoration:none; color:var(--ink-soft);
  font-family:var(--display); font-size:17px; letter-spacing:.04em; text-transform:uppercase;
  border-bottom:3px solid transparent; margin-bottom:-2px; }
.tab:hover{ color:var(--ink); }
.tab.active{ color:var(--navy); border-bottom-color:var(--navy); font-weight:600; }

/* ----------------------------------------------------------------- avatar */
.avatar{ border-radius:50%; object-fit:cover; display:inline-block; vertical-align:middle;
  background:var(--line-soft); }
.avatar-initials{ display:inline-grid; place-items:center; background:var(--navy); color:#fff;
  font-family:var(--display); font-weight:600; letter-spacing:.03em; }
.avatar-row{ display:flex; gap:18px; align-items:center; }
.user-head{ display:flex; gap:18px; align-items:center; }
.user-head .panel-title{ margin:0; }
.user-head p{ margin:2px 0; }

/* ---------------------------------------------------------------- connect */
.connect-row{ display:flex; justify-content:space-between; align-items:center; gap:18px;
  padding:18px 0; border-bottom:1px solid var(--line-soft); flex-wrap:wrap; }
.connect-row:last-child{ border-bottom:none; }
.connect-row h3{ margin:0 0 3px; font-family:var(--display); font-size:19px; letter-spacing:.03em; }
.connect-row p{ margin:0; font-size:14px; }
.copy{ font-family:var(--mono); background:#0f1c24; color:#8fe0a8; padding:11px 15px;
  border-radius:6px; cursor:pointer; font-size:14px; }

/* ----------------------------------------------------------------- footer */
.footer{ background:#0f1c24; color:#8ba3ae; padding:22px 0; margin-top:auto; font-size:14px; }
.footer-inner{ display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding-top:0; padding-bottom:0; }
.footer a{ color:#b9cbd4; text-decoration:none; margin-left:16px; }
.footer a:hover{ color:#fff; }
.footer-links{ display:flex; }

/* ------------------------------------------------------------------ small */
@media (max-width: 860px){
  .nav-toggle{ display:block; }
  .nav-links{
    display:none; position:absolute; top:62px; left:0; right:0;
    background:#0f1c24; flex-direction:column; align-items:stretch; gap:0;
    padding:10px 16px 18px; border-bottom:3px solid var(--navy);
  }
  .nav-links.open{ display:flex; }
  .nav-link, .nav-form, .btn-nav{ width:100%; }
  .nav-user{ margin:10px 0 0; padding:12px 0 0; border-left:none;
    border-top:1px solid rgba(255,255,255,.14); }
  .event{ grid-template-columns:1fr; gap:12px; }
  .event-action{ justify-self:stretch; }
  .event-action .btn{ width:100%; }
  .footer-inner{ flex-direction:column; }
  .footer a{ margin:0 16px 0 0; }
  .table{ font-size:13.5px; }
  .table th, .table td{ padding:8px 6px; }
}