.account-page button,
.account-page input,
.account-page select,
.account-page textarea {
  font: inherit;
}

.account-page button {
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-lg);
  border: 1px outset #777;
  border-radius: 0;
  color: #ddd;
  background: #333;
  cursor: pointer;
}

.account-page button:active { border-style: inset; }
.account-page button:disabled { color: #777; cursor: wait; }

.account-page input,
.account-page select,
.account-page textarea {
  border: 1px inset #555;
  border-radius: 0;
  color: #ddd;
  background: #080808;
}

.account-page input {
  width: min(310px, 100%);
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-sm);
  text-transform: uppercase;
}

.account-page select {
  min-height: var(--control-height);
  padding: var(--space-xs) var(--space-sm);
}

.account-page textarea {
  display: block;
  width: 100%;
  margin: var(--space-xs) 0 var(--space-sm);
  padding: var(--space-md);
  resize: vertical;
}

.account-page [hidden] { display: none !important; }

.account-main {
  max-width: 900px;
  margin: 0 auto;
}

.account-nav {
  font-size: var(--font-size-small);
}

.account-box {
  margin-bottom: var(--space-lg);
  padding: var(--space-lg) var(--space-xl);
  border: 1px solid #303030;
  background: #171717;
}

.box-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin: calc(0px - var(--space-lg)) calc(0px - var(--space-xl)) var(--space-lg);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid #303030;
  background: #1d1d1d;
}

.box-title h1,
.box-title h2 {
  margin: 0;
  font-size: var(--font-size-base);
  line-height: var(--font-size-display);
}

.status,
.hint,
.empty {
  color: #8e8e8e;
  font-size: var(--font-size-meta);
  line-height: var(--font-size-base);
}

.status.online { color: #bbb; }

.login-form {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid #303030;
}

.login-form label,
.post-form label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: #aaa;
  font-size: var(--font-size-small);
}

.login-form label { flex-basis: 100%; margin-bottom: 0; }

.recovery {
  margin-bottom: var(--space-lg);
  padding: var(--space-md);
  border: 1px solid #555;
  background: #111;
}

.recovery p { margin: 0 0 var(--space-sm); }

.account-code {
  display: block;
  margin: var(--space-2xs) 0 var(--space-md);
  color: #eee;
  font: bold var(--font-size-emphasis)/var(--line-height-base) Tahoma, Arial, sans-serif;
  letter-spacing: 1px;
  overflow-wrap: anywhere;
}

.warning { color: #aaa; font-size: var(--font-size-meta); }

.identity-summary {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-md);
}

.identity-summary #rotate-identity { margin-left: auto; }

.identity {
  color: #eee;
  font-family: Tahoma, Arial, sans-serif;
  letter-spacing: 1px;
}

.identity.small { font-size: var(--font-size-small); }

.identity-history {
  margin: var(--space-md) 0;
  border-top: 1px solid #303030;
  border-bottom: 1px solid #303030;
}

.identity-history summary {
  padding: var(--space-sm) 0;
  color: #aaa;
  cursor: pointer;
}

.identity-history ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.identity-history li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding: var(--space-sm) 0;
  border-top: 1px dotted #333;
}

.identity-history code { color: #ccc; overflow-wrap: anywhere; }
.text-button { margin-top: var(--space-sm); }

.display-settings {
  display: grid;
  gap: var(--space-md);
}

.display-setting {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

.display-setting > label:first-child {
  color: #aaa;
  font-size: var(--font-size-small);
}

.display-setting > label:first-child { min-width: 5em; }
.display-setting select { min-width: 8em; }

.message {
  min-height: var(--font-size-base);
  margin: var(--space-md) 0 0;
  color: #aaa;
  font-size: var(--font-size-meta);
  line-height: var(--font-size-base);
}

.message.error { color: #d88; }

.account-summary { margin: 0; color: #ddd; }
.flags-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xl);
}
.flags-summary h3 {
  margin: 0 0 var(--space-sm);
  color: #ddd;
  font-size: var(--font-size-base);
}
.flags-summary dl { margin: 0; }
.flags-summary dl div {
  display: flex;
  justify-content: space-between;
  padding: var(--space-sm) 0;
  border-top: 1px dotted #333;
}
.flags-summary dt,
.flags-summary dd { margin: 0; }
.white-flag-text,
.flags-summary a.white-flag-text:visited,
.flags-summary a.white-flag-text:hover,
.flags-summary a.white-flag-text:focus { color: #ddd; }
.gold-flag-text,
.flags-summary a.gold-flag-text:visited,
.flags-summary a.gold-flag-text:hover,
.flags-summary a.gold-flag-text:focus { color: #d4af37; }
.red-flag-text,
.flags-summary a.red-flag-text:visited,
.flags-summary a.red-flag-text:hover,
.flags-summary a.red-flag-text:focus { color: #c66; }
.favorite-threads {
  margin: 0;
  padding: 0;
  list-style: none;
}
.favorite-threads li {
  padding: var(--space-md) var(--space-3xs);
  border-bottom: 1px solid #303030;
}
.favorite-threads li:last-child { border-bottom: 0; }
.flag-history-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}
.flag-history-heading a { font-weight: 700; }
.flag-history-count {
  flex: 0 0 auto;
  font-size: var(--font-size-meta);
}
.flag-history-position {
  margin: var(--space-2xs) 0 0;
  color: #bbb;
  font-size: var(--font-size-meta);
}
.flag-history-preview {
  margin: var(--space-sm) 0 0;
  padding: var(--space-sm) var(--space-md);
  border-left: 3px solid #444;
  background: #181818;
  color: #ccc;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.flag-detail-more {
  display: block;
  width: min(100%, 24rem);
  margin: var(--space-lg) auto 0;
}
.flag-detail-more[hidden] { display: none; }
.favorite-meta {
  margin: var(--space-2xs) 0 0;
  color: #888;
  font-size: var(--font-size-meta);
}

.post-form {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid #303030;
}

.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  color: #888;
  font-size: var(--font-size-meta);
}

.posts {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post {
  padding: var(--space-md) var(--space-3xs);
  border-bottom: 1px solid #303030;
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  color: #888;
  font: var(--font-size-meta)/var(--line-height-base) Tahoma, Arial, sans-serif;
}

.post-meta .post-id { color: #aaa; }

.post-body {
  margin: var(--space-sm) 0 0;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

@media (max-width: 600px) {
  .account-main { padding: var(--space-sm); }
  .flags-summary { grid-template-columns: 1fr; }
  .post-actions { align-items: stretch; flex-direction: column; gap: var(--space-sm); }
}