.site-header,
.site-footer,
.blog-hero,
.blog-list-section,
.blog-article-page {
  font-family: Inter, Arial, sans-serif;
}

.blog-hero {
  padding: 64px 0 58px;
  background: radial-gradient(circle at 16% 16%, rgba(255,138,61,.18), transparent 22%), radial-gradient(circle at 84% 10%, rgba(118,87,255,.22), transparent 26%), linear-gradient(180deg, #fff7f1 0%, #f5f8ff 55%, #fff 100%);
  border-bottom: 1px solid var(--line);
}
.blog-hero-inner { text-align: center; }
.blog-hero h1 { max-width: 880px; margin: 0 auto 18px; color: var(--navy); font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: 0; }
.blog-hero p { max-width: 980px; margin: 0 auto; color: var(--blue); font-size: clamp(34px, 4.2vw, 58px); line-height: 1.08; font-weight: 900; text-align: center; white-space: normal; }
.blog-list-section { padding: 72px 0 96px; background: #fff; }
.blog-list-head { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-bottom:28px; }
.blog-list-head h2 { margin:0; color:var(--navy); font-family:Inter, Arial, sans-serif; font-size:36px; font-weight:900; line-height:1.1; letter-spacing:0; }
.blog-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:24px; }
.blog-card { overflow:hidden; border:1px solid #dce6f7; border-radius:24px; background:#f8fbff; }
.blog-card-media { display:block; aspect-ratio: 16 / 10; background:#eaf2ff; overflow:hidden; }
.blog-card-media img { width:100%; height:100%; object-fit:cover; display:block; transition: transform .28s ease; }
.blog-card:hover .blog-card-media img { transform: scale(1.035); }
.blog-card-placeholder { display:flex; align-items:center; justify-content:center; width:100%; height:100%; color:#0757f8; font-size:28px; font-weight:900; background:linear-gradient(135deg,#eef6ff,#fff); }
.blog-card-body { padding:22px; }
.blog-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-bottom:12px; color:#667085; font-size:13px; font-weight:900; }
.blog-meta span { color:#0757f8; }
.blog-card h2 { margin:0 0 12px; color:var(--navy); font-family:Inter, Arial, sans-serif; font-size:22px; font-weight:900; line-height:1.15; letter-spacing:0; }
.blog-card p { margin:0 0 18px; color:#263248; font-size:15px; font-weight:650; line-height:1.55; }
.blog-read, .blog-back { color:#0757f8; font-weight:900; }
.blog-article-page { padding:72px 0 96px; background:linear-gradient(180deg,#f7faff 0,#fff 220px); }
.blog-article { max-width:900px; }
.blog-article-hero { margin:26px 0 26px; }
.blog-category { display:inline-flex; align-items:center; min-height:34px; padding:0 14px; border-radius:999px; color:#0757f8; background:#eef5ff; font-weight:900; font-size:13px; }
.blog-article-hero h1 { margin:18px 0 14px; color:var(--navy); font-family:Inter, Arial, sans-serif; font-size:clamp(36px,5vw,62px); font-weight:900; line-height:1; letter-spacing:0; }
.blog-article-hero time { color:#667085; font-weight:800; }
.blog-hero-image { width:100%; max-height:520px; object-fit:cover; display:block; margin:0 0 34px; border-radius:24px; border:1px solid #dce6f7; }
.blog-content { color:#1f2a44; font-size:18px; line-height:1.75; }
.blog-content h2, .blog-content h3, .blog-content h4 { color:var(--navy); line-height:1.15; margin:38px 0 14px; }
.blog-content h2 { font-size:34px; }
.blog-content h3 { font-size:26px; }
.blog-content p { margin:0 0 18px; }
.blog-content a { color:#0757f8; font-weight:900; text-decoration:underline; }
.blog-content img { max-width:100%; height:auto; border-radius:18px; border:1px solid #dce6f7; }
.blog-content figure { margin:28px 0; }
.blog-content ul, .blog-content ol { padding-left:28px; margin:0 0 20px; }
.blog-content table { width:100%; border-collapse:collapse; margin:24px 0; font-size:15px; }
.blog-content th, .blog-content td { border:1px solid #dce6f7; padding:10px; vertical-align:top; }
.blog-editor-main { padding:56px 0 90px; background:#f7faff; }
.editor-shell { display:grid; grid-template-columns: minmax(0, 1fr) minmax(360px, .8fr); gap:24px; }
.editor-panel { border:1px solid #dce6f7; border-radius:24px; background:#fff; padding:24px; }
.editor-panel h1, .editor-panel h2 { margin:0 0 18px; color:var(--navy); }
.editor-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.editor-field { display:flex; flex-direction:column; gap:7px; margin-bottom:14px; color:#263248; font-weight:900; }
.editor-field input, .editor-field textarea, .editor-field select { border:1px solid #dce6f7; border-radius:14px; padding:12px 14px; background:#f8fbff; color:#111827; }
.editor-field textarea { min-height:140px; resize:vertical; }
.editor-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:16px; }
.button-preview {
  color: #ffffff;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  box-shadow: 0 18px 36px rgba(34, 197, 94, 0.24);
}
.button-danger {
  color: #ffffff;
  background: linear-gradient(135deg, #dc2626, #ef4444);
  box-shadow: 0 18px 36px rgba(239, 68, 68, 0.24);
}
.editor-preview { min-height:420px; overflow:auto; }
.editor-note { color:#667085; font-size:14px; font-weight:700; }
.editor-delete-list { display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.editor-delete-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:12px 14px; border:1px solid #dce6f7; border-radius:14px; background:#f8fbff; }
.editor-delete-row strong { color:var(--navy); font-size:14px; line-height:1.25; }
.editor-delete-row span { display:block; color:#667085; font-size:12px; font-weight:800; }
.editor-danger { color:#ffffff; background:#ef4444; box-shadow:none; }
.editor-danger:hover { background:#dc2626; }

@media (max-width: 980px) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .editor-shell { grid-template-columns:1fr; } }
@media (max-width: 680px) { .blog-hero { padding:48px 0 42px; } .blog-hero p { white-space: normal; } .blog-grid { grid-template-columns:1fr; } .blog-list-head { align-items:flex-start; flex-direction:column; } .blog-content { font-size:16px; } .blog-content h2 { font-size:28px; } .editor-grid { grid-template-columns:1fr; } }


.auth-screen {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  background: #ffffff;
}
.auth-card {
  width: min(460px, 100%);
  padding: 28px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 24px;
}
.auth-card h1 {
  margin: 0 0 10px;
  color: var(--navy);
  font-size: clamp(30px, 5vw, 42px);
  line-height: 1.04;
}
.auth-card p {
  color: #344054;
  font-weight: 650;
  line-height: 1.55;
}
.auth-card form {
  display: grid;
  gap: 14px;
  margin-top: 22px;
}
.auth-card label {
  display: grid;
  gap: 7px;
  color: #1f2a44;
  font-size: 13px;
  font-weight: 900;
}
.auth-card input {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid #cfdaf0;
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
  font-weight: 650;
}
.auth-error {
  min-height: 22px;
  margin: 0;
  color: #d92d20;
}
body.is-locked > .site-header,
body.is-locked > main,
body.is-locked > .site-footer {
  display: none;
}
body:not(.is-locked) .auth-screen {
  display: none;
}
.editor-status {
  min-height: 24px;
  margin: 0 0 16px;
  color: var(--blue);
  font-weight: 800;
}
.editor-status.is-error {
  color: #d92d20;
}


.editor-upload-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 14px;
  align-items: end;
  margin-bottom: 14px;
}
.editor-file-field input[type="file"] {
  padding: 10px 12px;
  cursor: pointer;
}
.editor-upload-row .button {
  min-height: 48px;
  margin-bottom: 14px;
}
@media (max-width: 680px) {
  .editor-upload-row {
    grid-template-columns: 1fr;
  }
  .editor-upload-row .button {
    width: 100%;
    margin-bottom: 0;
  }
}


.editor-delete-area {
  margin-top: 30px;
  padding-top: 22px;
  border-top: 1px solid #dce6f7;
}
.editor-delete-toggle {
  display: grid;
  width: 100%;
  gap: 8px;
  padding: 18px;
  color: var(--navy);
  background: #f8fbff;
  border: 1px solid #dce6f7;
  border-radius: 18px;
  text-align: left;
  cursor: pointer;
}
.editor-delete-toggle span {
  font-size: 22px;
  font-weight: 900;
}
.editor-delete-toggle small {
  color: #667085;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.45;
}
.editor-delete-area .editor-delete-list {
  display: none;
}
.editor-delete-area.is-open .editor-delete-list {
  display: flex;
}
.editor-rich-field {
  gap: 10px;
}
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px;
  background: #f8fbff;
  border: 1px solid #dce6f7;
  border-radius: 14px;
}
.rich-toolbar button,
.rich-toolbar label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 10px;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid #cfdaf0;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 900;
  cursor: pointer;
}
.rich-toolbar input[type="color"] {
  width: 34px;
  min-height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rich-toolbar select {
  width: auto;
  min-height: 28px;
  padding: 2px 6px;
  border-radius: 8px;
}
.rich-editor {
  height: 140px;
  min-height: 140px;
  max-height: 140px;
  padding: 12px 14px;
  color: #111827;
  background: #f8fbff;
  border: 1px solid #dce6f7;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 650;
  line-height: 1.65;
  outline: none;
  overflow: auto;
}
.rich-editor:empty::before {
  content: attr(data-placeholder);
  color: #98a2b3;
}
.rich-editor:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 4px rgba(7, 87, 248, .08);
}


.media-browser {
  margin: 0 0 18px;
  padding: 16px;
  background: #f8fbff;
  border: 1px solid #dce6f7;
  border-radius: 18px;
}
.media-browser-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--navy);
}
.media-browser-head button {
  min-height: 34px;
  padding: 6px 10px;
  color: var(--blue);
  background: #ffffff;
  border: 1px solid #cfdaf0;
  border-radius: 10px;
  font-weight: 900;
  cursor: pointer;
}
.media-browser-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-height: 420px;
  overflow: auto;
}
.media-item {
  display: grid;
  gap: 8px;
  padding: 8px;
  color: var(--navy);
  background: #ffffff;
  border: 1px solid #dce6f7;
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
}
.media-item:hover {
  border-color: var(--blue);
}
.media-item img {
  width: 100%;
  height: 100px;
  object-fit: cover;
  border-radius: 10px;
  background: #eef5ff;
}
.media-item span {
  overflow: hidden;
  color: #263248;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.editor-preview .blog-content p,
.editor-preview .blog-content h2,
.editor-preview .blog-content h3,
.editor-preview .blog-content h4,
.editor-preview .blog-content li,
.editor-preview .blog-content blockquote,
.editor-preview h2 {
  cursor: pointer;
}
.editor-preview .blog-content p:hover,
.editor-preview .blog-content h2:hover,
.editor-preview .blog-content h3:hover,
.editor-preview .blog-content h4:hover,
.editor-preview .blog-content li:hover,
.editor-preview .blog-content blockquote:hover,
.editor-preview h2:hover {
  outline: 2px solid rgba(7, 87, 248, .22);
  outline-offset: 4px;
  border-radius: 8px;
}
.rich-editor .is-editor-target {
  outline: 2px solid rgba(7, 87, 248, .35);
  outline-offset: 4px;
  border-radius: 8px;
}