/* Shared responsive rules */
*, *::before, *::after { box-sizing: border-box; }
html {
  width: 100%;
  max-width: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
}
img, video, iframe, canvas, svg {
  max-width: 100%;
}
input, textarea, select, button {
  font-size: 16px;
  max-width: 100%;
}
input[type="text"], input[type="password"], textarea {
  box-sizing: border-box;
}
textarea {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  line-height: 1.6;
}
button { min-height: 40px; padding: 7px 12px; }
table { max-width: 100%; }

@media (max-width: 600px) {
  body { margin: 0; min-width: 0; }
  h1 { overflow-wrap: anywhere; }
  input[type="text"], input[type="password"], select {
    width: 100%;
    min-height: 42px;
  }
  input[type="file"] { width: 100%; min-width: 0; }
  textarea { min-height: 55vh; padding: 10px; }
}

/* Home page */
.page-home .header-inner { min-width: 0; flex-wrap: wrap; gap: 12px; }
.page-home .nav { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.page-home .nav a { margin-left: 0; }
.page-home .container, .page-home footer { width: 100%; min-width: 0; }
.page-home .post-preview, .page-home .post-title { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .page-home .header-inner {
    padding: 16px;
    flex-direction: column;
    align-items: flex-start;
  }
  .page-home .container { margin: 28px auto; padding: 0 16px; }
  .page-home .welcome { margin-bottom: 24px; }
  .page-home .welcome h1 { font-size: 26px; }
  .page-home .post-card {
    padding: 16px 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }
  .page-home .post-title { font-size: 20px; }
  .page-home .empty { padding: 24px 0; border: 0; border-radius: 0; }
  .page-home footer { padding: 0 16px; overflow-wrap: anywhere; }
}

/* Article page */
.page-post { width: 100%; }
.page-post .content {
  min-width: 0;
  max-width: 100%;
  line-height: 1.8;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}
.page-post .content img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 12px 0;
}
.page-post .content video,
.page-post .content iframe { max-width: 100%; }
.page-post .content pre,
.page-post .content table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
}
@media (max-width: 600px) {
  .page-post { padding: 16px; }
  .page-post h1 { font-size: 26px; line-height: 1.4; }
  .page-post .meta { margin-bottom: 22px; }
}

/* Login page */
.page-login {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 32px 20px;
}
.page-login form, .page-login form p {
  min-width: 0;
  max-width: 100%;
}
@media (max-width: 600px) {
  .page-login { padding: 24px 16px; }
  .page-login form p { margin: 18px 0; }
}

/* Admin dashboard */
.page-dashboard { width: 100%; }
.page-dashboard table { width: 100%; border-collapse: collapse; }
.page-dashboard th, .page-dashboard td { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .page-dashboard { padding: 18px 16px; }
  .page-dashboard .top { display: flex; flex-wrap: wrap; gap: 8px 18px; }
  .page-dashboard .top a { margin: 0; }
  .page-dashboard table, .page-dashboard tbody {
    display: block;
    width: 100%;
  }
  .page-dashboard thead { display: none; }
  .page-dashboard tbody tr {
    display: block;
    padding: 12px 0;
    margin-bottom: 12px;
  }
  .page-dashboard th, .page-dashboard td { border: 0; }
  .page-dashboard tbody td { display: block; padding: 4px 0; }
  .page-dashboard tbody td:first-child { font-size: 18px; font-weight: 600; }
  .page-dashboard tbody td:nth-child(2)::before { content: "创建时间："; color: #777; }
  .page-dashboard tbody td:nth-child(3)::before { content: "阅读量："; color: #777; }
  .page-dashboard tbody td.actions { display: flex; flex-wrap: wrap; gap: 12px; }
  .page-dashboard .actions a, .page-dashboard .actions button { margin: 0; }
}

/* New/edit article pages */
.page-editor {
  width: 100%;
  max-width: 1000px;
  margin: 32px auto;
  padding: 0 24px;
}
.page-editor form { width: 100%; min-width: 0; }
.page-editor input[type="text"] { width: 100%; max-width: 500px; }
.page-editor #uploadStatus { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .page-editor { margin: 0; padding: 18px 16px; }
  .page-editor form p { min-width: 0; }
  .page-editor #content { min-height: 55vh; }
  .page-editor #uploadStatus { display: block; margin-top: 8px; }
}

/* Image management */
.page-images {
  width: 100%;
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 20px;
}
.page-images .images {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}
.page-images .image-item {
  min-width: 0;
  border: 0;
  padding: 0;
}
.page-images .image-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: contain;
}
@media (max-width: 600px) {
  .page-images { margin: 0; padding: 18px 16px; }
  .page-images .images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 22px 14px;
  }
}
@media (max-width: 360px) {
  .page-images .images { grid-template-columns: minmax(0, 1fr); }
}