:root {
  --navy:#20334e;
  --orange:#ee851e;
  --text:#233247;
  --muted:#7b8795;
  --line:#e4e9ef;
  --bg:#f5f7fa;
}

* {
  box-sizing:border-box;
}

body {
  margin:0;
  font-family:'Segoe UI','Malgun Gothic',sans-serif;
  color:var(--text);
  background:var(--bg);
  font-size:15px;
  line-height:1.6;
}

a {
  color:inherit;
  text-decoration:none;
}

a:hover {
  color:#c9680a;
}

button,input,textarea {
  font:inherit;
}

.site-header {
  background:#fff;
  border-bottom:1px solid var(--line);
}

.header-inner {
  max-width:1040px;
  margin:auto;
  padding:0 28px;
  height:82px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.site-title {
  font-size:24px;
  font-weight:800;
  letter-spacing:-1px;
  color:var(--navy);
  white-space:nowrap;
}

.title-dot {
  display:inline-block;
  width:6px;
  height:6px;
  background:var(--orange);
  border-radius:50%;
  margin:0 0 3px 5px;
}

nav {
  display:flex;
  align-items:center;
  gap:25px;
  font-size:14px;
}

.nav-link {
  color:#788391;
}

.nav-link.active {
  color:var(--navy);
  font-weight:700;
}

.user-name {
  padding-left:24px;
  border-left:1px solid var(--line);
  font-weight:600;
}

.container {
  max-width:1040px;
  margin:auto;
  padding:56px 28px 80px;
  min-height:calc(100vh - 157px);
}

.eyebrow {
  font-size:11px;
  font-weight:700;
  letter-spacing:2px;
  color:var(--orange);
  margin:0 0 9px;
}

h1 {
  font-size:30px;
  line-height:1.4;
  letter-spacing:-1px;
  margin:0 0 10px;
  color:var(--navy);
}

.description {
  font-size:14px;
  color:var(--muted);
  margin:0;
}

.page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:32px;
}

.button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:15px;
  border:1px solid var(--orange);
  background:var(--orange);
  color:#fff;
  border-radius:6px;
  min-height:43px;
  padding:9px 22px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  white-space:nowrap;
}

.button:hover {
  background:#d97512;
  color:#fff;
}

.button.secondary {
  background:white;
  color:#627084;
  border-color:#d9e0e8;
}

.button.secondary:hover {
  background:#f1f4f8;
}

.button.danger {
  background:#fff;
  color:#b54e45;
  border-color:#efd8d4;
}

.board-panel,.editor-panel,.article-panel,.auth-panel {
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
}

.table-caption {
  display:flex;
  justify-content:space-between;
  padding:22px 25px;
  font-size:14px;
  font-weight:600;
}

.subtle {
  color:var(--muted);
  font-weight:400;
}

.table-caption .subtle {
  font-size:12px;
}

.table-scroll {
  overflow-x:auto;
}

table {
  border-collapse:collapse;
  width:100%;
  text-align:left;
}

th {
  background:#f8fafc;
  color:#7d8896;
  font-size:12px;
  font-weight:500;
}

th,td {
  padding:18px 24px;
  border-bottom:1px solid var(--line);
}

tbody tr:last-child td {
  border-bottom:0;
}

.number {
  width:85px;
  text-align:center;
}

.author {
  width:130px;
  font-size:13px;
}

.date {
  width:190px;
  white-space:nowrap;
  font-size:12px;
}

.post-title {
  font-weight:600;
  min-width:180px;
  overflow-wrap:anywhere;
}

.post-title a {
  display:block;
}

.empty-state {
  text-align:center;
  padding:65px 15px 80px;
}

.empty-state h2 {
  font-size:18px;
  font-weight:600;
  margin:0 0 8px;
}

.empty-state p {
  color:var(--muted);
  font-size:14px;
}

.empty-state a {
  font-size:13px;
  color:#c9680a;
}

.site-footer {
  border-top:1px solid var(--line);
}

.site-footer>div {
  max-width:1040px;
  margin:auto;
  padding:23px 28px;
  color:#94a0ad;
  font-size:12px;
  display:flex;
  justify-content:space-between;
}

.back-link {
  display:inline-block;
  font-size:13px;
  color:var(--muted);
  margin-bottom:26px;
}

.editor-panel,.article-panel {
  padding:32px;
}

label {
  display:block;
  font-size:14px;
  font-weight:600;
  margin:0 0 9px;
}

input,textarea {
  display:block;
  width:100%;
  border:1px solid #d9e0e8;
  border-radius:5px;
  padding:12px 14px;
  background:#fff;
  color:var(--text);
}

input::placeholder,textarea::placeholder {
  color:#a4adba;
  font-size:14px;
}

input:focus,textarea:focus {
  outline:2px solid #ffc98f;
  outline-offset:2px;
}

input+label {
  margin-top:25px;
}

.label-hint {
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  margin-left:10px;
}

textarea {
  resize:vertical;
  line-height:1.8;
}

.form-actions {
  display:flex;
  justify-content:flex-end;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:24px;
  margin-top:28px;
}

.article-panel h1 {
  overflow-wrap:anywhere;
}

.post-meta {
  display:flex;
  gap:20px;
  font-size:13px;
  color:var(--muted);
  margin:15px 0 25px;
}

.post-body {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  min-height:220px;
  border-top:1px solid var(--line);
  padding:30px 0;
  line-height:1.9;
}

.post-body img {
  max-width:100%;
  height:auto;
}

.article-actions {
  display:flex;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-top:24px;
}

.article-actions form {
  margin:0;
}

.auth-panel {
  max-width:440px;
  margin:20px auto;
  padding:38px;
}

.auth-panel form {
  margin-top:30px;
}

.full {
  width:100%;
  margin-top:28px;
}

.auth-switch {
  font-size:12px;
  color:var(--muted);
  text-align:center;
  margin:24px 0 0;
}

.auth-switch a {
  color:var(--navy);
  font-weight:600;
  margin-left:5px;
}

.error-message {
  padding:14px 18px;
  background:#fff0ee;
  border:1px solid #f0d5d0;
  border-radius:6px;
  color:#a33d32;
  margin-bottom:24px;
  font-size:14px;
}

@media(max-width:640px) {
  .header-inner {
    padding:0 18px;
    height:auto;
    min-height:76px;
    flex-wrap:wrap;
    gap:8px;
    padding-top:15px;
    padding-bottom:15px;
  }
  nav {
    gap:14px;
    font-size:12px;
  }
  .site-title {
    font-size:21px;
  }
  .user-name {
    padding-left:12px;
  }
  .container {
    padding:32px 18px 60px;
  }
  h1 {
    font-size:25px;
  }
  .page-heading {
    margin-bottom:24px;
  }
  .date {
    display:none;
  }
  th,td {
    padding:15px 12px;
  }
  .number {
    width:48px;
  }
  .author {
    width:85px;
  }
  .editor-panel,.article-panel {
    padding:22px;
  }
  .auth-panel {
    padding:28px 23px;
  }
  .site-footer>div {
    padding:20px 18px;
  }
  .button {
    padding:9px 16px;
  }
  .table-caption {
    padding:18px;
  }
}

.search-form {
  margin-bottom: 24px;
}

.search-form label {
  font-size: 13px;
  color: var(--muted);
}

.search-controls {
  display: flex;
  gap: 10px;
}

.search-controls input {
  flex: 1;
  min-width: 0;
}

.search-summary {
  font-size: 14px;
  color: var(--muted);
  overflow-wrap: anywhere;
}

.search-summary strong {
  color: var(--navy);
}

@media (max-width: 640px) {
  .search-controls {
    flex-wrap: wrap;
  }

  .search-controls input {
    flex-basis: 100%;
  }
}