:root{
  --blue:#2591c9;
  --blue2:#3ba9d6;
  --blue-rgb:37,145,201;
  --bg-1:#eef3f7;
  --bg-2:#dde6ee;
  --text-dark:#2b3a4a;
  --text-gray:#5b6b7b;
  --border:#eef1f4;
  --card-bg:#ffffff;
  --input-bg:#f4f7fa;
  --switch-off:#d5dbe1;
  transition:color .3s ease;
}
html[data-theme="dark"]{
  --bg-1:#12161e;
  --bg-2:#0b0e13;
  --text-dark:#eaeef2;
  --text-gray:#98a5b3;
  --border:rgba(255,255,255,.08);
  --card-bg:rgba(18,24,35,.92);
  --input-bg:rgba(10,14,22,.55);
  --switch-off:#3a4552;
}

*{box-sizing:border-box;}

body{
  margin:0;
  min-height:100vh;
  background:linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
  color:var(--text-dark);
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.7;
}

a{ color:var(--blue2); }

.page-wrap{
  max-width:760px;
  margin:0 auto;
  padding:28px 20px 70px;
}

.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:28px;
  gap:10px;
}
.header-controls{
  display:flex;
  align-items:center;
  gap:8px;
}
.header-toggle-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  color:var(--text-gray);
  cursor:pointer;
  font-size:12px;
  font-weight:700;
  transition:color .2s ease, border-color .2s ease;
}
.header-toggle-btn:hover{ color:var(--blue2); border-color:rgba(var(--blue-rgb),.4); }
.header-toggle-btn svg{ width:17px; height:17px; }
.header-toggle-btn .icon-sun{ display:none; }
html[data-theme="light"] .header-toggle-btn .icon-moon{ display:none; }
html[data-theme="light"] .header-toggle-btn .icon-sun{ display:block; }
.site-logo{
  display:flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  color:var(--text-dark);
  font-weight:800;
  font-size:19px;
}
.site-logo img{ width:34px; height:34px; border-radius:9px; }
.back-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--text-gray);
  text-decoration:none;
  font-size:14px;
  font-weight:600;
  padding:8px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--input-bg);
  transition:color .2s ease, border-color .2s ease;
}
.back-link:hover{ color:var(--blue2); border-color:rgba(var(--blue-rgb),.4); }

.page-card{
  background:var(--card-bg);
  border:1px solid var(--border);
  border-radius:20px;
  padding:28px 26px;
  box-shadow:0 20px 45px rgba(0,0,0,.25);
}

.page-title{
  font-size:clamp(22px, 4vw, 30px);
  font-weight:800;
  margin:0 0 6px;
  letter-spacing:-.3px;
}
.page-updated{
  color:var(--text-gray);
  font-size:13px;
  margin:0 0 26px;
}

.page-card h2{
  font-size:17px;
  font-weight:700;
  margin:28px 0 10px;
  color:var(--text-dark);
}
.page-card h2:first-of-type{ margin-top:6px; }
.page-card p{
  color:var(--text-gray);
  font-size:14.5px;
  margin:0 0 14px;
}
.page-card ul{
  color:var(--text-gray);
  font-size:14.5px;
  margin:0 0 14px;
  padding-inline-start:20px;
}
.page-card li{ margin-bottom:6px; }
.page-card strong{ color:var(--text-dark); }

.site-footer{
  max-width:760px;
  margin:36px auto 0;
  padding:0 20px;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  justify-content:center;
  font-size:13px;
}
.site-footer a{
  color:var(--text-gray);
  text-decoration:none;
}
.site-footer a:hover{ color:var(--blue2); }

/* Contact form */
.form-group{ margin-bottom:16px; }
.form-group label{
  display:block;
  font-size:13.5px;
  font-weight:600;
  margin-bottom:7px;
  color:var(--text-dark);
}
.form-group input, .form-group textarea{
  width:100%;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:12px 14px;
  font-size:14px;
  color:var(--text-dark);
  font-family:inherit;
  outline:none;
}
.form-group textarea{ min-height:120px; resize:vertical; line-height:1.6; }
.form-group input:focus, .form-group textarea:focus{ border-color:rgba(var(--blue-rgb),.5); }

.submit-btn{
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  border:none;
  border-radius:12px;
  padding:14px 26px;
  font-size:14.5px;
  font-weight:700;
  cursor:pointer;
}
.submit-btn:disabled{ opacity:.6; cursor:default; }

.form-status{
  margin-top:14px;
  font-size:13.5px;
  padding:12px 14px;
  border-radius:10px;
  display:none;
}
.form-status.show{ display:block; }
.form-status.ok{ background:rgba(47,191,113,.12); color:#2fbf71; }
.form-status.err{ background:rgba(229,85,90,.12); color:#e5555a; }

.contact-info{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:12px;
  padding:14px 16px;
  margin-bottom:22px;
  font-size:14.5px;
}

/* Articles list page */
.articles-page-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
  margin-top:8px;
}
.article-card-link{
  display:block;
  text-decoration:none;
  color:inherit;
  background:var(--input-bg);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s ease, box-shadow .2s ease;
}
.article-card-link:hover{ transform:translateY(-3px); box-shadow:0 14px 26px rgba(0,0,0,.25); }
.article-card-thumb{
  width:100%;
  aspect-ratio:16/10;
  background:rgba(255,255,255,.04);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-gray);
  overflow:hidden;
}
.article-card-thumb img{ width:100%; height:100%; object-fit:cover; }
.article-card-thumb svg{ width:28px; height:28px; opacity:.4; }
.article-card-link-title{
  padding:10px 12px 14px;
  font-size:13.5px;
  font-weight:700;
  color:var(--text-dark);
  line-height:1.5;
}

.add-article-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  background:linear-gradient(135deg, var(--blue), var(--blue2));
  color:#fff;
  text-decoration:none;
  padding:11px 18px;
  border-radius:12px;
  font-size:13.5px;
  font-weight:700;
  margin-bottom:22px;
}

.article-detail-image{
  width:100%;
  aspect-ratio:16/9;
  border-radius:16px;
  background:var(--input-bg);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--text-gray);
  overflow:hidden;
  margin-bottom:20px;
}
.article-detail-image img{ width:100%; height:100%; object-fit:cover; }
.article-detail-image svg{ width:40px; height:40px; opacity:.4; }
.article-detail-content{
  color:var(--text-gray);
  font-size:14.5px;
  line-height:1.9;
  white-space:pre-wrap;
}

.empty-note{
  color:var(--text-gray);
  font-size:14px;
  text-align:center;
  padding:30px 0;
}

@media (max-width:480px){
  .page-wrap{ padding:20px 14px 50px; }
  .page-card{ padding:20px 18px; border-radius:16px; }
}