:root {
  font-family: Manrope, Inter, system-ui, sans-serif;
  color: #271d2c;
  background: #faf7f3;
  font-synthesis: none;
}
* { box-sizing: border-box; }
body { margin: 0; }
a { color: #3b1558; }
button, input, textarea, select { font: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid #c89663; outline-offset: 3px; }

button, .button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: .7rem 1.1rem;
  border: 1px solid #3b1558;
  border-radius: 9px;
  background: #3b1558;
  color: #fff;
  font-weight: 700;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
button:hover, .button:hover { background: #542276; border-color: #542276; }
button:active, .button:active { transform: translateY(1px); }
button:disabled { opacity: .55; cursor: wait; }
button.secondary, .button.secondary { background: #f2eaf5; border-color: #f2eaf5; color: #3b1558; }
button.secondary:hover, .button.secondary:hover { background: #e8dbed; border-color: #e8dbed; }
button.danger { background: #8b2432; border-color: #8b2432; }
button.danger:hover { background: #a92e3f; border-color: #a92e3f; }

.shell {
  display: grid;
  grid-template-columns: 250px minmax(0, 1fr);
  min-height: 100vh;
  align-items: stretch;
}
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  position: sticky;
  top: 0;
  height: 100vh;
  padding: 2rem 1rem 1.25rem;
  background: linear-gradient(155deg, #2d123f 0%, #241033 65%, #1d0d2a 100%);
  color: #fff;
}
.brand { display: block; padding: .35rem .7rem; }
.sidebar .brand img {
  display: block;
  width: 170px;
  max-width: 100%;
  height: auto;
  filter: brightness(0) invert(1);
}
.navlinks { display: grid; gap: .25rem; }
.navlinks a {
  display: block;
  padding: .75rem .95rem;
  border-radius: 9px;
  color: #e6ddeb;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.navlinks a:hover, .navlinks a.active { background: #513064; color: #fff; }
.navlinks a.active { box-shadow: inset 3px 0 #c89663; }
.sidebar-footer { margin-top: auto; padding: 1rem .8rem .25rem; border-top: 1px solid #ffffff24; }
.sidebar-footer a { color: #d7c8de; font-size: .88rem; text-decoration: none; }
.sidebar-footer a:hover { color: #fff; text-decoration: underline; }

.main {
  align-self: start;
  width: min(100%, 1440px);
  margin: 0 auto;
  padding: clamp(1.5rem, 3vw, 3.25rem);
}
.main > .top:first-child {
  padding-bottom: 1.75rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid #e7dfe5;
}
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.top small { color: #8a5a37; font-size: .72rem; font-weight: 800; letter-spacing: .16em; }
.top h1 { margin: .25rem 0 0; }
.account { display: flex; align-items: center; gap: .8rem; }
.account-name { color: #605467; font-size: .9rem; font-weight: 600; }
h1, h2, h3 { color: #241d28; line-height: 1.2; }
h1 { font-size: clamp(1.65rem, 2.4vw, 2.25rem); letter-spacing: -.035em; }
h2 { margin: 0; font-size: clamp(1.4rem, 2vw, 1.75rem); letter-spacing: -.025em; }
h3 { margin: 0 0 .5rem; }
p { line-height: 1.55; }
.page-heading { margin-bottom: 1.35rem; }
.page-heading p { margin: .4rem 0 0; color: #6e6271; }

.card, .signup {
  margin: 1rem 0;
  padding: 1.35rem;
  border: 1px solid #e8e0e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px #24103308;
}
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(175px, 1fr)); gap: 1rem; }
.grid .card { margin: 0; }
.metric { border-top: 3px solid #c89663; }
.metric span { color: #6e6271; font-size: .86rem; font-weight: 600; }
.metric strong { display: block; margin-top: .75rem; color: #3b1558; font-size: 2rem; line-height: 1; }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; margin: 1.35rem 0; }
.toolbar input[type="text"], .toolbar input:not([type]) { min-width: min(260px, 100%); }
input, select, textarea {
  max-width: 100%;
  min-height: 44px;
  padding: .65rem .8rem;
  border: 1px solid #cfc3d1;
  border-radius: 8px;
  background: #fff;
  color: #241d28;
}
input::placeholder, textarea::placeholder { color: #918794; }
textarea { width: 100%; min-height: 150px; }
label { display: block; margin: .7rem 0; font-weight: 600; }
label input:not([type=checkbox]), label select { display: block; width: 100%; margin-top: .35rem; }
.check { display: flex; align-items: center; gap: .65rem; font-weight: 500; line-height: 1.35; }
.check input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  accent-color: #3b1558;
}
fieldset {
  margin: 1.25rem 0;
  padding: .9rem 1rem 1rem;
  border: 1px solid #e5dce6;
  border-radius: 10px;
}
legend { padding: 0 .35rem; color: #493a50; font-weight: 700; }
.choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .55rem; }
.choice-grid .check {
  min-height: 44px;
  margin: 0;
  padding: .65rem .8rem;
  border: 1px solid #eee8ef;
  border-radius: 8px;
  background: #fcfafc;
  cursor: pointer;
}
.choice-grid .check:hover { border-color: #cbb5d5; background: #f8f3fa; }
.choice-grid .check:has(input:checked) { border-color: #9b76ae; background: #f3eaf7; }
.choice-scroll { max-height: 240px; overflow-y: auto; }
.consent-check {
  align-items: flex-start;
  margin: 1.1rem 0;
  padding: .9rem;
  border: 1px solid #e5dce6;
  border-radius: 8px;
  background: #fbf8fc;
}
.consent-check input[type="checkbox"] { margin-top: .15rem; }
#recipient-count { margin: 1rem 0; padding: .8rem 1rem; border-radius: 8px; background: #f7f1f8; color: #493a50; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 0 1rem; }
.table-card { padding: 0; overflow: hidden; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 1rem 1.1rem; border-bottom: 1px solid #eee8ed; text-align: left; vertical-align: middle; }
th { background: #fcfafc; color: #736777; font-size: .75rem; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: #fcfafc; }
td { font-size: .9rem; }
td button { min-height: 34px; padding: .35rem .65rem; font-size: .82rem; }
.tag { display: inline-block; padding: .25rem .65rem; border-radius: 30px; background: #eee7f1; color: #503463; font-size: .78rem; font-weight: 700; white-space: nowrap; }
.tag.ok { background: #e0f3e8; color: #14572b; }
.tag.bad { background: #fce4e4; color: #80222c; }
.empty-state { padding: clamp(2rem, 5vw, 4rem) 1.5rem; text-align: center; }
.empty-state-icon {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 1.1rem;
  border-radius: 17px;
  background: #f2eaf5;
  color: #3b1558;
}
.empty-state p { max-width: 410px; margin: .5rem auto 1.25rem; color: #6e6271; }
.muted { color: #6e6271; }
.message { margin: 1rem 0; padding: .8rem 1rem; border-left: 4px solid #3b1558; border-radius: 6px; background: #f3eee8; }
.error { border-color: #9b2835; color: #80222c; }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.signup { max-width: 560px; margin: 5vh auto; padding: 2rem; }
.password-label { margin-bottom: .35rem; }
.password-field { position: relative; margin-bottom: .9rem; }
.password-field input { display: block; width: 100%; padding-right: 3.5rem; }
button.password-toggle {
  position: absolute;
  top: 50%;
  right: .35rem;
  width: 44px;
  min-height: 44px;
  padding: 0;
  transform: translateY(-50%);
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #64546c;
}
button.password-toggle:hover { background: #f2eaf5; color: #3b1558; }
button.password-toggle:active { transform: translateY(-50%); }
.password-toggle svg { display: block; }
.password-toggle .eye-off-icon,
.password-toggle[aria-pressed="true"] .eye-icon { display: none; }
.password-toggle[aria-pressed="true"] .eye-off-icon { display: block; }
.trap { position: absolute; left: -10000px; }
dialog { width: min(540px, 95vw); max-height: 90vh; overflow-y: auto; padding: 1.5rem; border: 0; border-radius: 14px; box-shadow: 0 18px 60px #0005; }
dialog::backdrop { background: #1d0d2ab0; }
pre.preview { padding: 1rem; border-radius: 8px; background: #faf7f3; font: inherit; white-space: pre-wrap; }
dialog#conversation-dialog { width: min(540px, 95vw); }
.conversation-list { max-height: 60vh; overflow: auto; margin: 1rem 0; }
.conversation-entry { padding: .75rem 0; border-bottom: 1px solid #e8e1e8; }
.conversation-entry strong { margin-right: .5rem; }
.conversation-entry p { margin: .35rem 0; overflow-wrap: anywhere; white-space: pre-wrap; }

@media (max-width: 800px) {
  .shell { display: block; }
  .sidebar { position: static; height: auto; gap: .7rem; padding: 1rem; }
  .sidebar .brand img { width: 145px; }
  .navlinks { display: flex; gap: .25rem; overflow-x: auto; padding-bottom: .25rem; }
  .navlinks a { flex: none; padding: .55rem .75rem; white-space: nowrap; }
  .navlinks a.active { box-shadow: inset 0 -3px #c89663; }
  .sidebar-footer { display: none; }
  .main { padding: 1.25rem; }
}
@media (max-width: 560px) {
  .main > .top:first-child { align-items: flex-start; flex-direction: column; gap: .9rem; margin-bottom: 1.5rem; padding-bottom: 1.25rem; }
  .page-heading { align-items: flex-start; flex-direction: column; }
  .toolbar { align-items: stretch; }
  .toolbar input, .toolbar select { width: 100%; }
  .signup { margin: 1rem; padding: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
  button, .button, .navlinks a { transition: none; }
}