:root{
  --bg-top:#f5f5f7;
  --bg-bottom:#ececf1;
  --surface:rgba(255,255,255,0.72);
  --surface-strong:rgba(255,255,255,0.88);
  --surface-soft:rgba(255,255,255,0.56);
  --surface-tint:rgba(250,250,252,0.92);
  --border:rgba(15, 23, 42, 0.08);
  --border-strong:rgba(15, 23, 42, 0.12);
  --text:#111827;
  --text-soft:#4b5563;
  --text-faint:#6b7280;
  --accent:#0a84ff;
  --accent-strong:#0066cc;
  --accent-soft:rgba(10, 132, 255, 0.12);
  --success-soft:rgba(52, 199, 89, 0.14);
  --teal:var(--accent);
  --teal-deep:var(--accent-strong);
  --teal-soft:var(--accent-soft);
  --navy:#23384e;
  --coral:#be6d56;
  --gold:#8f7a53;
  --muted:var(--text-faint);
  --muted-strong:var(--text-soft);
  --shadow-xl:0 24px 64px rgba(15, 23, 42, 0.10);
  --shadow-lg:0 18px 44px rgba(15, 23, 42, 0.08);
  --shadow-md:0 10px 28px rgba(15, 23, 42, 0.06);
  --shadow-sm:0 4px 14px rgba(15, 23, 42, 0.05);
  --radius-xl:30px;
  --radius-lg:24px;
  --radius-md:18px;
  --radius-sm:14px;
  --danger:#ab4d4c;
  --radius-pill:999px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{color-scheme:light}
body{
  min-height:100vh;
  color:var(--text);
  font-family:Inter, "SF Pro Display", "SF Pro Text", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  background:
    radial-gradient(circle at top left, rgba(10, 132, 255, 0.10), transparent 28%),
    radial-gradient(circle at 85% 15%, rgba(120, 119, 198, 0.10), transparent 22%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bottom) 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.30), rgba(255,255,255,0.08)),
    radial-gradient(circle at 20% 20%, rgba(255,255,255,0.38), transparent 32%);
}

a{color:var(--teal);text-decoration:none}
a:hover{text-decoration:underline}
button,input,textarea,select{font:inherit}

.site-shell,.login-shell{
  max-width:1180px;
  margin:0 auto;
  padding:20px 16px 40px;
  position:relative;
  z-index:1;
}

.login-shell{
  min-height:100vh;
  display:grid;
  place-items:center;
}

.hero,.card,.conversation-card,.member-card,.login-card{
  position:relative;
  background:linear-gradient(180deg, var(--surface-strong), var(--surface));
  border:1px solid var(--border);
  border-radius:var(--radius-xl);
  box-shadow:var(--shadow-xl);
  backdrop-filter:blur(22px);
  -webkit-backdrop-filter:blur(22px);
  overflow:hidden;
}

.hero{
  padding:30px;
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) minmax(280px, .75fr);
  gap:24px;
  align-items:start;
  overflow:hidden;
  position:relative;
}

.hero::before,
.hero::after{
  content:"";
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.hero::before{
  width:220px;
  height:220px;
  inset:auto -80px -80px auto;
  background:radial-gradient(circle, rgba(10,132,255,0.16), rgba(10,132,255,0));
}

.hero::after{
  width:0;
  height:0;
}

.hero-copy,
.hero-meta,
.top-links{position:relative;z-index:1}

.hero-copy{max-width:720px}

.hero-meta{
  display:grid;
  gap:12px;
  justify-items:end;
}

.eyebrow,.section-kicker{
  margin:0 0 8px;
  color:var(--text-faint);
  font-size:11px;
  font-weight:700;
  letter-spacing:.14em;
  text-transform:uppercase;
}

.hero h1,
.login-card h1,
.card-header h2,
.feed-header h2,
.conversation-subject{
  font-family:"Iowan Old Style","Palatino Linotype","Book Antiqua",Georgia,serif;
  letter-spacing:-.03em;
}

.hero h1,
.login-card h1{
  margin:0 0 10px;
  max-width:none;
  white-space:nowrap;
  font-size:clamp(2.15rem, 3.4vw, 3.5rem);
  line-height:.94;
  font-weight:700;
}

.hero-text{
  margin:0;
  max-width:58ch;
  color:var(--text-soft);
  font-size:16px;
  line-height:1.6;
}

.hero-line{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin:0 0 14px;
  padding:8px 14px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(10,132,255,0.14), rgba(10,132,255,0.08));
  border:1px solid rgba(10,132,255,0.16);
  color:var(--accent-strong);
  font-size:16px;
  font-weight:700;
  font-style:normal;
  letter-spacing:.04em;
  line-height:1;
  box-shadow:0 6px 16px rgba(10,132,255,0.08);
}

@media (max-width:640px){
  .hero-line{
    font-size:14px;
    padding:7px 12px;
  }
}

.identity-card,
.loading-note{
  width:min(100%, 300px);
  padding:16px 18px;
  border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.90), rgba(255,255,255,.64));
  border:1px solid rgba(15,23,42,.06);
  box-shadow:var(--shadow-sm);
}

.identity-label{
  display:block;
  margin-bottom:6px;
  color:var(--text-faint);
  font-size:11px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.identity-card strong{
  display:block;
  font-size:20px;
  line-height:1.1;
  font-weight:600;
}

.identity-email,.status-text{
  display:block;
  color:var(--text-faint);
}

.identity-email{
  margin-top:6px;
  font-size:13px;
}

.loading-note{
  color:var(--text-soft);
  background:linear-gradient(180deg, rgba(240,248,255,0.9), rgba(255,255,255,0.68));
}

.top-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  justify-content:flex-end;
}

.top-links a,.link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:38px;
  padding:0 14px;
  border-radius:var(--radius-pill);
  border:1px solid rgba(15,23,42,0.08);
  background:rgba(255,255,255,0.64);
  color:var(--text);
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow-sm);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
  backdrop-filter:blur(14px);
}

.top-links a:hover,
.link-button:hover{
  text-decoration:none;
  transform:translateY(-1px);
  border-color:rgba(10,132,255,0.18);
  background:rgba(255,255,255,0.86);
  box-shadow:var(--shadow-md);
}

.page-grid{
  display:grid;
  gap:14px;
  margin-top:16px;
}

.card{
  padding:18px 20px;
}

.composer-card .card-header{
  margin-bottom:8px;
}

.composer-card input[name="subject"]{
  margin-bottom:4px;
}

.card-header,.feed-header{
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:flex-end;
}

.feed-header-meta{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:flex-end;
  align-items:flex-end;
}

.card-header h2,
.feed-header h2{
  margin:0;
  font-size:30px;
  line-height:1;
}

.feed-header{
  padding:2px 2px 0;
}

.composer-card{
  position:relative;
  overflow:hidden;
}

.composer-card::after{
  content:"";
  position:absolute;
  inset:auto -60px -60px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(181,208,243,.20), rgba(181,208,243,0));
  pointer-events:none;
}

.composer-card .stack-form,
.member-grid-form,
.reply-form{position:relative;z-index:1}

.stack-form{
  display:grid;
  gap:10px;
}

.composer-card textarea,
.stack-form input,
.stack-form textarea,
.member-grid-form input,
.member-grid-form select{
  width:100%;
  border:1px solid var(--border);
  border-radius:18px;
  padding:12px 14px;
  background:rgba(255,255,255,.84);
  color:var(--text);
  outline:none;
  transition:border-color .18s ease, box-shadow .18s ease, background .18s ease;
}

.composer-card textarea,
.stack-form textarea{
  resize:vertical;
  min-height:90px;
}

.composer-card textarea:focus,
.stack-form input:focus,
.stack-form textarea:focus,
.member-grid-form input:focus,
.member-grid-form select:focus{
  border-color:rgba(37,99,235,.44);
  background:rgba(255,255,255,.98);
  box-shadow:0 0 0 4px rgba(37,99,235,.10);
}

.form-actions{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
}

.button-primary,.button-secondary,.pill{
  border:none;
  border-radius:var(--radius-pill);
  cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.button-primary,
.button-secondary{
  min-height:42px;
  padding:0 18px;
  color:#fff;
  font-weight:700;
  box-shadow:0 10px 20px rgba(17,44,41,.12);
}

.button-primary{
  background:linear-gradient(135deg, #1f7af1 0%, #234a86 100%);
}

.button-secondary{
  background:linear-gradient(135deg, #1f7af1 0%, #1d64db 100%);
}

.button-primary:hover,
.button-secondary:hover,
.pill:hover{
  transform:translateY(-1px);
  filter:saturate(1.05);
}

.sort-pills{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}

.pill{
  min-height:38px;
  padding:0 14px;
  background:rgba(234,238,244,.96);
  color:#4b596b;
  font-weight:700;
  box-shadow:var(--shadow-sm);
  font-size:13px;
}

.pill.is-active{
  background:linear-gradient(135deg, #1f7af1 0%, #234a86 100%);
  color:#fff;
}

.conversation-feed,
.member-list,
.focused-conversation{
  display:grid;
  gap:16px;
}

.focused-conversation .conversation-card{
  margin-top:6px;
}

.focused-conversation.is-focused .card{
  box-shadow:0 0 0 1px rgba(37,99,235,.18), 0 24px 64px rgba(37,99,235,.12), var(--shadow-xl);
  border-color:rgba(37,99,235,.20);
}

.focused-conversation.is-focused .conversation-card{
  box-shadow:0 0 0 1px rgba(37,99,235,.16), 0 18px 48px rgba(37,99,235,.12), var(--shadow-md);
}

.conversation-card,
.member-card{
  padding:18px 20px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md);
}

.conversation-card{
  position:relative;
  overflow:hidden;
}

.conversation-card.is-new{
  box-shadow:0 18px 48px rgba(37,99,235,.14), var(--shadow-md);
}

.conversation-card::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:linear-gradient(180deg, var(--accent), rgba(120,119,198,0.72));
}

.conversation-banner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
  margin-bottom:12px;
}

.conversation-subject{
  font-size:23px;
  line-height:1.03;
  font-weight:700;
}

.conversation-new-badge,
.message-new-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(37,99,235,.12);
  color:#1d4ed8;
  font-size:10px;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  vertical-align:middle;
}

.conversation-meta,.message-meta{
  color:var(--muted);
  font-size:12px;
}

.conversation-meta,
.message-meta{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
}

.conversation-author,
.message-author{
  color:var(--text);
  font-weight:700;
}

.conversation-date,
.message-date,
.conversation-count{
  color:var(--muted);
  font-weight:600;
}

.message-block + .message-block{margin-top:12px}

.message-html{
  font-size:15px;
  line-height:1.55;
  color:var(--text);
}

.message-html p{margin:0 0 10px}
.message-html hr{
  border:none;
  border-top:1px solid rgba(101,131,124,.18);
  margin:12px 0;
}

.conversation-root{
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(244,249,248,.98), rgba(255,255,255,.9));
  border:1px solid rgba(101,131,124,.14);
}

.conversation-root.is-new,
.reply-card.is-new{
  border-color:rgba(37,99,235,.22);
  background:linear-gradient(180deg, rgba(240,247,255,.98), rgba(255,255,255,.96));
  box-shadow:0 0 0 1px rgba(37,99,235,.08), 0 10px 24px rgba(37,99,235,.08);
}

.conversation-replies{
  display:grid;
  gap:10px;
  margin-top:12px;
}

.reply-card{
  padding:12px 14px;
  border-radius:16px;
  background:linear-gradient(180deg, rgba(235,245,242,.95), rgba(248,251,250,.92));
  border:1px solid rgba(101,131,124,.12);
}

.reply-form{
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid rgba(101,131,124,.16);
}

.attachment-list{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:8px;
}

.attachment-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:7px 10px;
  border-radius:var(--radius-pill);
  background:var(--teal-soft);
  color:var(--teal-deep);
  font-size:12px;
  font-weight:700;
  border:1px solid rgba(15,118,103,.14);
}

.member-grid-form{
  display:grid;
  grid-template-columns:1.3fr 1.4fr 160px 160px auto;
  gap:8px;
  align-items:center;
}

.member-actions{
  display:flex;
  gap:10px;
  justify-content:flex-end;
  margin-top:10px;
}

.danger-button{
  color:var(--danger);
}

.hidden{display:none !important}

.login-card{
  width:min(560px,100%);
  padding:28px 30px;
  position:relative;
  overflow:hidden;
}

.login-card::before{
  content:"";
  position:absolute;
  inset:auto -50px -60px auto;
  width:150px;
  height:150px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(15,118,103,.10), rgba(15,118,103,0));
}

.login-card::after{
  content:"";
  position:absolute;
  inset:-60px auto auto -40px;
  width:120px;
  height:120px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(212,109,78,.08), rgba(212,109,78,0));
}

.login-card > *{position:relative;z-index:1}

.status-text{
  min-height:20px;
  font-size:13px;
}

.feed-footer{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  justify-content:center;
  align-items:center;
  padding:4px 0 8px;
}

.load-more-button{
  min-width:220px;
}

@media (max-width:1040px){
  .hero{
    grid-template-columns:1fr;
  }

  .hero-meta{
    justify-items:start;
  }

  .top-links{
    justify-content:flex-start;
  }
}

@media (max-width:960px){
  .card-header,
  .feed-header,
  .conversation-banner,
  .member-grid-form{
    display:grid;
    grid-template-columns:1fr;
    align-items:start;
  }

  .feed-header-meta{
    justify-content:flex-start;
  }

  .conversation-subject{
    font-size:29px;
  }
}

@media (max-width:640px){
  .site-shell,.login-shell{
    padding:18px 12px 40px;
  }

  .hero,.card,.conversation-card,.member-card,.login-card{
    border-radius:22px;
  }

  .hero{
    padding:24px 20px 26px;
  }

  .card{
    padding:22px 20px;
  }

  .hero h1,.login-card h1{
    max-width:15ch;
    white-space:normal;
    font-size:clamp(2.5rem, 11vw, 3.8rem);
  }

  .hero-text{
    font-size:16px;
  }

  .card-header h2,
  .feed-header h2{
    font-size:24px;
  }

  .conversation-subject{
    font-size:22px;
  }
}

.conversation-card {
  padding:18px 18px 16px;
}

.conversation-banner {
  margin-bottom:12px;
}

.conversation-root {
  position:relative;
  padding:18px 18px 16px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(248,250,253,.98), rgba(255,255,255,.92));
  border:1px solid rgba(214,221,228,.82);
  box-shadow:0 8px 20px rgba(38,56,72,.04);
}

.conversation-root::before {
  content:"Original message";
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 10px;
  margin:0 0 12px;
  border-radius:999px;
  background:rgba(227,234,243,.95);
  color:#4d5b6d;
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.conversation-replies {
  position:relative;
  display:grid;
  gap:12px;
  margin-top:14px;
  margin-left:28px;
  padding-left:22px;
}

.conversation-replies::before {
  content:"";
  position:absolute;
  left:0;
  top:6px;
  bottom:8px;
  width:2px;
  border-radius:999px;
  background:linear-gradient(180deg, rgba(145,176,219,.50), rgba(145,176,219,.14));
}

.reply-card {
  position:relative;
  padding:14px 16px;
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.86), rgba(249,251,253,.72));
  border:1px solid rgba(214,221,228,.82);
  box-shadow:0 6px 14px rgba(38,56,72,.04);
}

.reply-card::before {
  content:"";
  position:absolute;
  left:-22px;
  top:22px;
  width:18px;
  height:2px;
  border-radius:999px;
  background:rgba(145,176,219,.36);
}

.reply-toggle {
  width:fit-content;
  margin:0 0 2px 0;
  padding:0;
  border:none;
  background:none;
  color:var(--accent-strong);
  font-size:12px;
  font-weight:700;
  cursor:pointer;
  text-align:left;
}

.reply-toggle:hover {
  text-decoration:underline;
}

.reply-toggle-inline {
  margin-bottom:6px;
}

.reply-form {
  margin-top:14px;
  margin-left:28px;
  padding-top:14px;
  padding-left:22px;
  border-top:none;
  border-left:2px solid rgba(145,176,219,.26);
}

.reply-form textarea {
  min-height:74px;
  background:rgba(255,255,255,.86);
}

.message-meta {
  margin-bottom:8px;
  font-size:12px;
  font-weight:600;
}

.conversation-root .message-html {
  font-size:15.5px;
}

.reply-card .message-html {
  color:var(--muted-strong);
}

.message-block.is-new .message-html{
  color:var(--text);
}

.message-block.is-new .message-meta,
.reply-card.is-new .message-meta,
.conversation-root.is-new .message-meta{
  color:#334155;
}

@media (max-width:640px){
  .conversation-replies,
  .reply-form {
    margin-left:16px;
    padding-left:16px;
  }

  .reply-card::before {
    left:-16px;
    width:12px;
  }
}