.archive {
  padding: 130px 0 160px;
}
.archive h1 {
  font-size: clamp(54px, 7vw, 96px);
  margin: 30px 0;
}
.archive-intro {
  color: var(--muted);
  line-height: 2;
  max-width: 650px;
  margin-bottom: 80px;
}
.article {
  width: min(760px, calc(100% - 40px));
  margin: 0 auto;
  padding: 120px 0 160px;
}
.article-head {
  text-align: center;
  margin-bottom: 75px;
}
.article-head .section-tag {
  display: block;
}
.article-head h1 {
  font-size: clamp(42px, 6vw, 72px);
  line-height: 1.2;
  margin: 28px -100px 25px;
}
.article-head .dek {
  font-size: 18px;
  color: #8ca0a6;
  line-height: 1.9;
}
.byline {
  font: 10px ui-monospace;
  color: #5d747a;
  letter-spacing: 0.12em;
  margin-top: 28px;
}
.article-body {
  font-family: "Noto Serif SC", "Songti SC", serif;
  font-size: 17px;
  line-height: 2.1;
  color: #becbce;
}
.article-body h2 {
  font-family: Inter, "PingFang SC", sans-serif;
  color: #eaf5f5;
  font-size: 30px;
  font-weight: 400;
  margin: 65px 0 20px;
}
.article-body p {
  margin: 0 0 28px;
}
.article-body blockquote {
  margin: 45px 0;
  padding: 25px 30px;
  border-left: 2px solid var(--cyan);
  background: rgba(101, 242, 224, 0.035);
  color: #d9e8e9;
  font-size: 20px;
}
.article-body ul {
  padding-left: 22px;
}
.article-body .privacy-note {
  font-family: Inter, "PingFang SC", sans-serif;
  border: 1px solid var(--line);
  padding: 22px;
  color: #789097;
  font-size: 13px;
}
.article-nav {
  margin-top: 80px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--cyan);
}
.admin-shell {
  padding: 110px 0 160px;
}
.admin-shell > h1 {
  font-size: clamp(46px, 6vw, 82px);
  max-width: 950px;
}
.admin-notice {
  border: 1px solid rgba(255, 180, 94, 0.3);
  background: rgba(255, 180, 94, 0.04);
  padding: 25px 28px;
  max-width: 760px;
  margin: 55px 0;
  color: var(--amber);
}
.admin-notice p {
  color: #8b9ca1;
  line-height: 1.8;
  margin-bottom: 0;
}
.writing-guide {
  max-width: 850px;
  margin-top: 90px;
}
.writing-guide h2 {
  font-size: 32px;
  font-weight: 400;
}
.writing-guide ol {
  list-style: none;
  padding: 0;
  margin-top: 35px;
  border-top: 1px solid var(--line);
}
.writing-guide li {
  display: grid;
  grid-template-columns: 55px 1fr;
  padding: 25px 0;
  border-bottom: 1px solid var(--line);
}
.writing-guide li > b {
  font: 10px ui-monospace;
  color: var(--cyan);
}
.writing-guide li span {
  display: flex;
  gap: 20px;
  color: #7f9399;
}
.writing-guide strong {
  color: #dce9eb;
  min-width: 120px;
}
.comments {
  margin-top: 90px;
  padding-top: 55px;
  border-top: 1px solid var(--line);
}
.comments > h2 {
  font-size: 30px;
  font-weight: 400;
}
.comment-list {
  margin: 32px 0;
}
.comment-list article {
  padding: 22px 0;
  border-bottom: 1px solid var(--line);
}
.comment-list header {
  display: flex;
  justify-content: space-between;
}
.comment-list strong {
  font-size: 14px;
  font-weight: 500;
}
.comment-list time,
.comment-empty {
  font: 10px ui-monospace;
  color: #61777d;
}
.comment-list p {
  color: #9caeb2;
  line-height: 1.8;
}
.comments form {
  display: grid;
  gap: 18px;
  padding: 28px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.015);
}
.comments label {
  display: grid;
  gap: 8px;
  color: #80949a;
  font-size: 12px;
}
.comments input,
.comments textarea {
  width: 100%;
  border: 1px solid var(--line);
  background: #070d14;
  color: #e7f2f3;
  padding: 13px 14px;
  font: 14px inherit;
  outline: none;
}
.comments textarea {
  min-height: 130px;
  resize: vertical;
}
.comments input:focus,
.comments textarea:focus {
  border-color: rgba(101, 242, 224, 0.5);
}
.comments button {
  justify-self: start;
  border: 0;
  background: var(--cyan);
  color: #05100f;
  padding: 13px 21px;
  font-weight: 600;
  cursor: pointer;
}
.comment-status {
  margin: 0;
  color: #71868c;
  font-size: 11px;
}
.comment-trap {
  position: absolute !important;
  left: -9999px !important;
}
.admin-login {
  display: grid;
  gap: 18px;
  max-width: 440px;
  margin-top: 40px;
  padding: 28px;
  border: 1px solid var(--line);
}
.admin-login label {
  display: grid;
  gap: 9px;
  color: #82969c;
  font-size: 12px;
}
.admin-login input {
  padding: 14px;
  background: #070d14;
  border: 1px solid var(--line);
  color: var(--text);
  font-size: 16px;
}
.admin-login button,
.moderation-list button {
  justify-self: start;
  border: 0;
  background: var(--cyan);
  color: #05100f;
  padding: 12px 20px;
  font-weight: 600;
  cursor: pointer;
}
.admin-message {
  color: var(--amber);
  font-size: 12px;
}
.admin-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}
.admin-title h1 {
  margin-bottom: 10px;
}
.admin-title p {
  color: #74888e;
}
.ghost-button {
  border: 1px solid var(--line);
  background: transparent;
  color: #9db0b4;
  padding: 11px 16px;
  cursor: pointer;
}
.moderation-tabs {
  display: flex;
  gap: 8px;
  margin: 45px 0 20px;
}
.moderation-tabs button {
  border: 1px solid var(--line);
  background: transparent;
  color: #758a90;
  padding: 10px 15px;
  cursor: pointer;
}
.moderation-tabs button.active {
  border-color: var(--cyan);
  color: var(--cyan);
}
.moderation-list {
  display: grid;
  gap: 12px;
}
.moderation-list article {
  border: 1px solid var(--line);
  padding: 22px;
  background: rgba(255, 255, 255, 0.015);
}
.moderation-list article header {
  display: flex;
  justify-content: space-between;
}
.moderation-list header div {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.moderation-list small {
  color: #61767c;
}
.moderation-list article > p {
  color: #a2b2b5;
  line-height: 1.8;
  white-space: pre-wrap;
}
.moderation-list footer {
  display: flex;
  gap: 9px;
  margin-top: 18px;
}
.moderation-list button.reject {
  background: transparent;
  color: #d58c83;
  border: 1px solid rgba(213, 140, 131, 0.3);
}
.badge {
  font: 9px ui-monospace;
  padding: 6px 8px;
  border: 1px solid var(--line);
  height: max-content;
}
.badge.pending {
  color: var(--amber);
}
.badge.approved {
  color: var(--cyan);
}
.badge.rejected {
  color: #d58c83;
}
.admin-empty {
  padding: 40px;
  border: 1px dashed var(--line);
  color: #62767c;
  text-align: center;
}
.console-body {
  background: #071019;
  color: #dce8ea;
  min-height: 100vh;
}
.console-login {
  min-height: 100vh;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: 42px 6vw;
  background:
    radial-gradient(
      circle at 70% 30%,
      rgba(34, 141, 145, 0.16),
      transparent 35%
    ),
    linear-gradient(135deg, #060d14, #0a1720);
}
.login-brand,
.console-brand {
  display: flex;
  align-items: center;
  gap: 13px;
}
.login-brand > div,
.console-brand > div {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.login-brand b,
.console-brand b {
  font-size: 14px;
  letter-spacing: 0.08em;
}
.login-brand small,
.console-brand small {
  font: 8px ui-monospace;
  color: var(--cyan);
  letter-spacing: 0.18em;
}
.login-card {
  width: min(430px, 100%);
  align-self: center;
  justify-self: center;
  padding: 42px;
  border: 1px solid rgba(139, 188, 193, 0.16);
  background: rgba(7, 15, 23, 0.75);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(18px);
}
.login-card h1 {
  font-size: 38px;
  font-weight: 400;
  letter-spacing: -0.03em;
  margin: 15px 0 8px;
}
.login-card > p:not(.section-tag) {
  color: #72878d;
  font-size: 13px;
}
.login-card .admin-login {
  border: 0;
  padding: 0;
  margin-top: 32px;
  max-width: none;
}
.login-card .admin-login input {
  border-radius: 4px;
}
.login-card .admin-login button {
  width: 100%;
  display: flex;
  justify-content: space-between;
  padding: 14px 16px;
}
.login-foot {
  font: 8px ui-monospace;
  color: #41585e;
  letter-spacing: 0.18em;
  text-align: center;
}
.console {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 250px 1fr;
}
.console-side {
  position: fixed;
  inset: 0 auto 0 0;
  width: 250px;
  padding: 29px 20px;
  display: flex;
  flex-direction: column;
  background: #080f17;
  border-right: 1px solid rgba(139, 188, 193, 0.1);
}
.console-brand {
  padding: 0 10px 27px;
  border-bottom: 1px solid rgba(139, 188, 193, 0.1);
}
.console-nav {
  display: grid;
  gap: 7px;
  margin-top: 28px;
}
.console-nav button,
.console-nav a {
  width: 100%;
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  text-align: left;
  border: 0;
  background: transparent;
  color: #6f858b;
  padding: 12px 13px;
  border-radius: 5px;
  cursor: pointer;
}
.console-nav button.active {
  color: #c9e0e1;
  background: rgba(101, 242, 224, 0.07);
}
.console-nav button.active > span {
  color: var(--cyan);
}
.console-nav b {
  font-size: 13px;
  font-weight: 400;
}
.console-nav i {
  font: normal 9px ui-monospace;
  background: var(--cyan);
  color: #071019;
  border-radius: 20px;
  padding: 3px 7px;
}
.console-nav small {
  font-size: 9px;
  color: #41565c;
}
.console-user {
  margin-top: auto;
  display: grid;
  grid-template-columns: 34px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 16px 8px 0;
  border-top: 1px solid rgba(139, 188, 193, 0.1);
}
.console-user > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(101, 242, 224, 0.1);
  color: var(--cyan);
  font: 10px ui-monospace;
}
.console-user > div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.console-user b {
  font-size: 11px;
  font-weight: 400;
}
.console-user small {
  font-size: 8px;
  color: #53676d;
}
.console-user button {
  border: 0;
  background: transparent;
  color: #6c8187;
  cursor: pointer;
}
.console-main {
  grid-column: 2;
  padding: 42px 4.5vw 80px;
  max-width: 1400px;
  width: 100%;
}
.console-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.console-top p {
  font-size: 10px;
  color: #53686e;
  margin: 0;
}
.console-top h1 {
  font-size: 30px;
  font-weight: 400;
  margin: 8px 0 0;
}
.live-state {
  font-size: 10px;
  color: #688087;
}
.live-state i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 9px var(--cyan);
  margin-right: 7px;
}
.console-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin: 35px 0;
}
.console-stats article {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 22px 24px;
  border: 1px solid rgba(139, 188, 193, 0.12);
  background: #0a141d;
}
.console-stats span {
  font-size: 11px;
  color: #789097;
}
.console-stats strong {
  grid-row: 1/3;
  grid-column: 2;
  font: 300 34px ui-monospace;
  color: #d8e9e9;
}
.console-stats small {
  font-size: 9px;
  color: #40565c;
  margin-top: 9px;
}
.moderation-panel {
  border: 1px solid rgba(139, 188, 193, 0.12);
  background: #09131c;
}
.moderation-panel > header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px;
  border-bottom: 1px solid rgba(139, 188, 193, 0.1);
}
.moderation-panel h2 {
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 6px;
}
.moderation-panel header p {
  font-size: 10px;
  color: #52676d;
  margin: 0;
}
.moderation-panel .moderation-tabs {
  margin: 0;
}
.moderation-list {
  padding: 14px;
}
.moderation-list article {
  background: #0b1720;
  border-color: rgba(139, 188, 193, 0.1);
  border-radius: 4px;
}
.comment-author {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 11px;
}
.comment-author > span {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(101, 242, 224, 0.09);
  color: var(--cyan);
  font-size: 12px;
}
.loading-line {
  height: 90px;
  border: 1px solid var(--line);
  background: linear-gradient(90deg, #0a151e, #0d1b24, #0a151e);
  background-size: 200% 100%;
  animation: loading 1.6s infinite;
}
.loading-line.short {
  margin-top: 10px;
  opacity: 0.65;
}
@keyframes loading {
  to {
    background-position: -200% 0;
  }
}
.console-mobile-nav {
  display: none;
}
.console-primary {
  border: 0;
  background: var(--cyan);
  color: #05100f;
  padding: 12px 18px;
  font-weight: 600;
  cursor: pointer;
}
.text-button {
  border: 0;
  background: transparent;
  color: #789097;
  padding: 0 0 9px;
  cursor: pointer;
}
.content-panel {
  border: 1px solid rgba(139, 188, 193, 0.12);
  background: #09131c;
}
.content-panel > header {
  padding: 24px;
  border-bottom: 1px solid var(--line);
}
.content-panel h2 {
  font-size: 17px;
  font-weight: 400;
  margin: 0 0 6px;
}
.content-panel header p {
  font-size: 10px;
  color: #52676d;
  margin: 0;
}
.post-admin-list {
  padding: 14px;
  display: grid;
  gap: 9px;
}
.post-admin-list > article {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 20px;
  border: 1px solid rgba(139, 188, 193, 0.1);
  background: #0b1720;
}
.post-admin-list h3 {
  font-size: 17px;
  font-weight: 400;
  margin: 9px 0 5px;
}
.post-admin-list p {
  font-size: 12px;
  color: #6d8389;
  margin: 0 0 9px;
}
.post-admin-list small {
  font-size: 9px;
  color: #465c62;
}
.post-admin-list button {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--cyan);
  padding: 9px 14px;
  cursor: pointer;
}
.post-state {
  font: 9px ui-monospace;
  padding: 4px 7px;
  border: 1px solid var(--line);
}
.post-state.published {
  color: var(--cyan);
}
.post-state.draft {
  color: var(--amber);
}
.editor-actions {
  display: flex;
  gap: 8px;
}
.post-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: 16px;
  margin-top: 28px;
}
.editor-main,
.editor-side {
  border: 1px solid rgba(139, 188, 193, 0.12);
  background: #09131c;
  padding: 25px;
}
.editor-main {
  display: grid;
  gap: 19px;
}
.editor-main label {
  display: grid;
  gap: 8px;
  font-size: 11px;
  color: #71878d;
}
.editor-main input,
.editor-main textarea {
  width: 100%;
  background: #071019;
  border: 1px solid var(--line);
  color: #dce8ea;
  padding: 13px 14px;
  font: 14px/1.7 inherit;
  outline: none;
}
.editor-main input:focus,
.editor-main textarea:focus {
  border-color: rgba(101, 242, 224, 0.5);
}
.editor-main textarea[name="body"] {
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.editor-hint {
  font-size: 10px;
  color: #4f656b;
  margin: 0;
}
.editor-side {
  height: max-content;
  display: grid;
  gap: 18px;
}
.editor-side > div {
  display: flex;
  justify-content: space-between;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--line);
}
.editor-side span {
  font-size: 10px;
  color: #5d7379;
}
.editor-side strong {
  font-size: 11px;
  font-weight: 400;
  color: #a8babc;
}
.danger-button {
  border: 1px solid rgba(213, 140, 131, 0.3);
  background: transparent;
  color: #d58c83;
  padding: 10px;
  cursor: pointer;
}
.editor-side > p {
  font-size: 11px;
  color: var(--amber);
  line-height: 1.6;
}
.preview-dialog {
  width: min(780px, calc(100% - 32px));
  max-height: 90vh;
  padding: 0;
  border: 1px solid var(--line);
  background: #071019;
  color: #dce8ea;
}
.preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(5px);
}
.preview-dialog > article {
  padding: 55px;
}
.preview-dialog h1 {
  font-size: 42px;
  font-weight: 400;
}
.preview-summary {
  color: #82969c;
  line-height: 1.8;
}
.preview-body {
  color: #b6c6c9;
  line-height: 2;
  margin-top: 45px;
}
.preview-body h1,
.preview-body h2 {
  font-size: 26px;
  font-weight: 400;
  margin-top: 40px;
}
.preview-body blockquote {
  border-left: 2px solid var(--cyan);
  padding-left: 20px;
}
.dialog-close {
  position: absolute;
  right: 18px;
  top: 15px;
  border: 0;
  background: transparent;
  color: #91a5aa;
  font-size: 25px;
  cursor: pointer;
}
@media (max-width: 760px) {
  .console-login {
    padding: 24px 18px;
  }
  .login-card {
    padding: 30px 22px;
  }
  .console {
    display: block;
    padding-bottom: 70px;
  }
  .console-side {
    display: none;
  }
  .console-main {
    padding: 24px 16px 50px;
  }
  .console-top {
    align-items: flex-start;
  }
  .console-top h1 {
    font-size: 26px;
  }
  .console-stats {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin: 25px 0;
  }
  .console-stats article {
    padding: 17px;
  }
  .console-stats article:last-child {
    grid-column: 1/3;
  }
  .moderation-panel > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 20px;
  }
  .moderation-tabs {
    width: 100%;
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px !important;
  }
  .moderation-tabs button {
    padding: 9px 5px !important;
    font-size: 10px;
  }
  .moderation-list {
    padding: 8px;
  }
  .moderation-list article {
    padding: 17px;
  }
  .moderation-list article header {
    gap: 10px;
  }
  .console-mobile-nav {
    position: fixed;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    left: 0;
    right: 0;
    bottom: 0;
    height: 64px;
    background: #08121a;
    border-top: 1px solid var(--line);
    z-index: 20;
  }
  .console-mobile-nav button,
  .console-mobile-nav a {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    border: 0;
    background: transparent;
    color: #647a80;
    font-size: 9px;
  }
  .console-mobile-nav .active {
    color: var(--cyan);
  }
  .post-editor {
    grid-template-columns: 1fr;
  }
  .editor-side {
    order: -1;
  }
  .editor-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .editor-actions .console-primary {
    grid-column: 1/3;
  }
  .post-admin-list > article {
    gap: 15px;
  }
  .preview-dialog > article {
    padding: 40px 22px;
  }
  .preview-dialog h1 {
    font-size: 32px;
  }
}
@media (max-width: 850px) {
  .archive {
    padding: 90px 0;
  }
  .article {
    padding-top: 80px;
  }
  .article-head h1 {
    margin: 25px 0;
  }
  .article-body {
    font-size: 16px;
  }
  .article-nav {
    gap: 25px;
  }
  .writing-guide li span {
    display: block;
  }
  .writing-guide strong {
    display: block;
    margin-bottom: 8px;
  }
}
[hidden] {
  display: none !important;
}