:root {
  font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;
  color:#141310;
  background:#f3f1ec;
  font-size:14px;
  font-synthesis:none;
  --line:#dcd8cf;
  --purple:#6d3cf0
}

* {
  box-sizing:border-box
}

body {
  margin:0
}

button,input,textarea,select {
  font:inherit;
  color:inherit
}

button {
  cursor:pointer;
  border:1px solid var(--line);
  background:transparent;
  padding:10px 14px
}

button:hover {
  border-color:#141310
}

button:disabled {
  opacity:.5;
  cursor:wait
}

a {
  color:inherit
}

button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid var(--purple);
  outline-offset:3px
}

.skip {
  position:absolute;
  top:-60px
}

.skip:focus {
  top:10px;
  z-index:99;
  background:white
}

header {
  display:flex;
  align-items:center;
  gap:28px;
  padding:0 40px;
  min-height:64px;
  border-bottom:1px solid var(--line);
  position:sticky;
  top:0;
  background:#f3f1ecf5;
  z-index:5
}

.brand {
  text-decoration:none;
  font-size:22px;
  font-weight:500;
  letter-spacing:-1px
}

.brand span {
  color:var(--purple)
}

nav {
  display:flex;
  gap:22px;
  align-self:stretch;
  flex:1
}

nav button {
  border:0;
  border-bottom:2px solid transparent;
  padding:0;
  font-size:13px;
  color:#6b6862
}

nav button[aria-current] {
  border-color:#141310;
  color:#141310
}

.primary {
  background:#141310;
  color:#f3f1ec;
  border-color:#141310
}

.primary:hover {
  background:var(--purple);
  border-color:var(--purple)
}

.avatar {
  border-radius:50%;
  padding:12px;
  background:#e4e0d8;
  font-size:12px
}

.notice {
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 40px;
  border-bottom:1px solid var(--line);
  font-size:12px
}

.notice strong {
  font-weight:500;
  color:var(--purple)
}

#connection {
  color:#6b6862
}

main {
  padding:42px 40px 80px;
  max-width:1800px;
  margin:auto
}

h1 {
  font-size:clamp(64px,8vw,132px);
  font-weight:300;
  line-height:.92;
  letter-spacing:-.065em;
  margin:18px 0 24px
}

h2 {
  font-weight:300;
  letter-spacing:-.05em;
  font-size:clamp(42px,6vw,84px);
  line-height:1.02;
  margin:28px 0 40px;
  overflow-wrap:anywhere
}

h3 {
  font-size:15px;
  font-weight:500
}

p {
  line-height:1.6
}

.muted,.eyebrow {
  color:#6b6862
}

.eyebrow {
  font-size:12px
}

.hero {
  display:flex;
  gap:40px;
  justify-content:space-between;
  align-items:end
}

.hero aside {
  max-width:340px;
  padding:22px;
  background:#fcfbf8;
  border:1px solid var(--line);
  line-height:1.6
}

.accent {
  color:var(--purple)
}

.filters {
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:36px 0 24px
}

.filters input {
  margin-left:auto;
  min-width:220px
}

.filters button[aria-pressed=true] {
  background:#141310;
  color:#fff
}

.filters label {
  display:flex;
  gap:8px;
  align-items:center
}

.filters input[type=checkbox] {
  min-width:0
}

.board {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  border-top:1px solid #141310;
  margin-top:50px
}

.column {
  padding:18px 12px 36px;
  border-right:1px solid var(--line);
  min-height:360px
}

.column:first-child {
  padding-left:0
}

.column:last-child {
  border:0
}

.col-heading {
  display:flex;
  justify-content:space-between;
  gap:8px;
  align-items:baseline;
  margin:12px 0 20px;
  padding-bottom:20px;
  border-bottom:1px solid var(--line)
}

.count {
  font-size:72px;
  line-height:1;
  font-weight:300;
  letter-spacing:-.07em
}

.col-heading small {
  color:#6b6862
}

.card {
  display:block;
  text-align:left;
  width:100%;
  background:#fcfbf8;
  margin-bottom:10px;
  padding:16px 14px;
  transition:transform .2s
}

.card:hover {
  transform:translateY(-2px)
}

.card strong {
  display:block;
  font-size:17px;
  font-weight:500;
  margin:14px 0 6px;
  overflow-wrap:anywhere
}

.card .eyebrow {
  display:block
}

.card .meta {
  display:block;
  font-size:11px;
  color:#6b6862;
  margin-top:20px;
  border-top:1px solid var(--line);
  padding-top:10px
}

.dot {
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--purple);
  margin-right:5px
}

.empty {
  color:#817b70;
  border:1px dashed var(--line);
  padding:24px 12px;
  line-height:1.6
}

.total {
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:36px
}

.split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:70px;
  margin-top:48px
}

.big {
  font-size:clamp(48px,6vw,92px);
  font-weight:300;
  letter-spacing:-.06em;
  margin:20px 0
}

.stat-row {
  border-bottom:1px solid var(--line);
  padding:20px 0;
  display:flex;
  justify-content:space-between;
  gap:16px
}

.bar {
  display:block;
  width:100%;
  height:8px;
  accent-color:var(--purple);
  margin:12px 0 22px
}

.list {
  margin-top:40px;
  border-top:1px solid #141310
}

.list-row {
  width:100%;
  text-align:left;
  border:0;
  border-bottom:1px solid var(--line);
  padding:24px 0;
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center
}

.list-row strong {
  font-size:24px;
  font-weight:400;
  letter-spacing:-.03em
}

.list-row small {
  display:block;
  color:#6b6862;
  margin-top:7px
}

.panel {
  padding:24px;
  border:1px solid var(--line);
  background:#fcfbf8
}

.audit {
  list-style:none;
  padding:0
}

.audit li {
  padding:18px 0;
  border-bottom:1px solid var(--line);
  line-height:1.6
}

.audit small {
  display:block;
  color:#6b6862
}

dialog {
  border:0;
  padding:28px 40px 40px;
  background:#f3f1ec;
  color:#141310;
  width:min(1100px,96vw);
  max-height:94vh
}

dialog::backdrop {
  background:#14131088;
  backdrop-filter:blur(3px)
}

.dialog-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  border-bottom:1px solid var(--line);
  padding-bottom:16px;
  color:#6b6862;
  font-size:12px
}

.dialog-top button {
  border:0
}

.field-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px
}

.field {
  display:flex;
  flex-direction:column;
  gap:9px;
  font-size:12px;
  color:#6b6862
}

.field.full {
  grid-column:1/-1
}

input,select,textarea {
  background:#fcfbf8;
  border:1px solid var(--line);
  padding:12px;
  min-width:0;
  width:100%;
  border-radius:0
}

input[type=checkbox] {
  width:auto;
  accent-color:var(--purple)
}

textarea {
  min-height:110px;
  resize:vertical
}

fieldset {
  border:0;
  border-top:1px solid var(--line);
  padding:20px 0;
  margin:30px 0 0
}

legend {
  padding-right:16px;
  font-size:14px
}

.doc {
  display:flex;
  gap:12px;
  align-items:center;
  padding:10px 0;
  border-bottom:1px solid var(--line)
}

.doc label {
  flex:1;
  display:flex;
  align-items:center;
  gap:12px
}

.doc-name {
  flex:1
}

.doc button {
  font-size:12px
}

.doc-add {
  display:flex;
  gap:12px;
  margin-top:16px
}

.actions {
  display:flex;
  flex-wrap:wrap;
  gap:12px;
  align-items:center;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:32px
}

#save-hint {
  color:#6b6862;
  font-size:11px
}

#form-error {
  color:#a02323;
  margin-top:20px;
  line-height:1.5
}

#conflict {
  border:1px solid #a02323;
  padding:16px;
  margin-top:20px
}

#toast {
  position:fixed;
  bottom:22px;
  left:50%;
  transform:translateX(-50%);
  background:#141310;
  color:white;
  padding:12px 20px;
  z-index:10;
  max-width:90vw;
  pointer-events:none
}

#toast:empty {
  display:none
}

.draft {
  margin-top:20px
}

.draft textarea {
  margin-top:12px
}

.offline {
  color:#a02323!important
}

@media(max-width:1050px) {
  header {
  padding:0 20px;
  gap:18px
}

nav {
  gap:16px
}

.avatar {
  display:none
}

main {
  padding:32px 20px 60px
}

.notice {
  padding:10px 20px
}

.board {
  grid-template-columns:repeat(5,230px);
  overflow-x:auto
}

.hero aside {
  max-width:260px
}

.split {
  gap:30px
}


}

@media(max-width:680px) {
  header {
  flex-wrap:wrap;
  padding:16px 16px 0;
  gap:16px
}

.brand {
  flex:1
}

nav {
  order:3;
  flex-basis:100%;
  height:44px;
  justify-content:space-between;
  gap:8px
}

.notice {
  padding:12px 16px;
  flex-direction:column;
  gap:5px
}

main {
  padding:28px 16px 60px
}

h1 {
  font-size:68px
}

.hero {
  display:block
}

.hero aside {
  max-width:none;
  margin-top:24px
}

.filters input {
  flex-basis:100%;
  margin:8px 0
}

.filters label {
  width:100%
}

.board {
  margin-top:28px
}

.split,.field-grid {
  grid-template-columns:1fr;
  gap:24px
}

.field.full {
  grid-column:auto
}

dialog {
  padding:20px;
  width:100%;
  max-height:100vh;
  height:100vh
}

.list-row {
  align-items:start
}

.list-row strong {
  font-size:20px
}

.actions {
  position:sticky;
  bottom:-40px;
  background:#f3f1ec;
  padding-bottom:20px
}

.big {
  font-size:56px
}


}



[hidden] { display: none !important; }
#login-dialog { width: min(580px, 96vw); height: auto; }
#login-error { color: #a02323; }
input:disabled, select:disabled, textarea:disabled { opacity: .65; cursor: not-allowed; }