/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* ---- Base ---- */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f3f4f8;
  color: #1f2430;
}

a { color: inherit; }

/* ---- Layout wrapper (centers the page, not the content) ---- */
.wrapper {
  max-width: 880px;
  margin: 28px auto;
  padding: 0 14px;
}

/* ---- Lunarstorm-ish box system ---- */
.box {
  background: #ffffff;
  border: 1px solid #cfd5e3;
  border-radius: 14px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.04);
  padding: 14px;
  margin-bottom: 14px;
}

.box_title {
  font-weight: 700;
  margin-bottom: 10px;
}

/* ---- Header ---- */
.header {
  padding: 16px;
  background: linear-gradient(180deg, #ffffff, #f6f7ff);
}

.header_inner {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}

.site-name {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.2px;
}

.tagline {
  font-size: 13px;
  opacity: 0.8;
}

/* ---- Navigation ---- */
.nav {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.nav_link {
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid #cfd5e3;
  border-radius: 999px;
  background: #fff;
}

.nav_link:hover {
  background: #f2f4ff;
}

/* ---- Two-column grid ---- */
.grid {
  display: grid;
  grid-template-columns: 270px 1fr;
  gap: 14px;
}

/* Mobile fallback */
@media (max-width: 820px) {
  .grid { grid-template-columns: 1fr; }
}

/* ---- Profile card ---- */
.profile_top {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 12px;
  align-items: center;
  margin-bottom: 10px;
}

.avatar {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  border: 1px solid #cfd5e3;
  background: linear-gradient(180deg, #e9ebff, #ffffff);
}

.profile_name {
  font-weight: 800;
  margin-bottom: 2px;
}

.profile_status {
  font-size: 13px;
  opacity: 0.8;
}

.profile_rows .row {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px dashed #dde2ef;
}

.profile_rows .label {
  font-size: 12px;
  opacity: 0.7;
}

.profile_rows .value {
  font-size: 12px;
  font-weight: 600;
  text-align: right;
}

/* ---- Sidebar list ---- */
.list {
  display: grid;
  gap: 8px;
}

.list_item {
  text-decoration: none;
  padding: 10px 10px;
  border: 1px solid #cfd5e3;
  border-radius: 12px;
  background: #fbfbff;
}

.list_item:hover {
  background: #f2f4ff;
}

/* ---- Posts ---- */
.post_title {
  font-size: 18px;
  font-weight: 900;
  margin-bottom: 6px;
}

.post_meta {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 10px;
}

.muted {
  opacity: 0.7;
  font-size: 13px;
}

/* ---- Chips ---- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip {
  text-decoration: none;
  padding: 8px 10px;
  border: 1px solid #cfd5e3;
  border-radius: 999px;
  background: #fff;
}

.chip:hover {
  background: #f2f4ff;
}

/* ---- Footer ---- */
.footer {
  text-align: center;
  padding: 10px 0 20px;
}