:root {
  --blog-card-bg: rgba(255,255,255,.96);
  --blog-card-bg-soft: linear-gradient(180deg, #ffffff, #f6f9fc);
  --blog-card-border: rgba(42,57,78,.14);
  --blog-card-border-strong: rgba(23,105,232,.2);
  --blog-pill-bg: rgba(23,105,232,.07);
  --blog-pill-border: rgba(23,105,232,.18);
  --blog-pill-text: #174f9e;
  --blog-tag-bg: rgba(25,198,174,.1);
  --blog-tag-border: rgba(25,198,174,.3);
  --blog-tag-text: #0d5f55;
  --blog-input-bg: #ffffff;
  --blog-code-bg: #101820;
  --blog-code-text: #e9f7f5;
}

.blog-hero { grid-template-columns:minmax(0,.88fr) minmax(320px,.72fr); }
[hidden] { display:none !important; }
.blog-meta, .article-meta { display:flex; flex-wrap:wrap; gap:10px; align-items:center; color:var(--muted); font-size:13px; }
.blog-meta span, .article-meta span { border:1px solid var(--blog-pill-border); border-radius:999px; padding:5px 8px; background:var(--blog-pill-bg); color:var(--blog-pill-text); font-weight:760; }
.blog-feature-card, .blog-list-card, .article-card, .admin-panel, .editor-panel { border:1px solid var(--blog-card-border); background:var(--blog-card-bg-soft); color:var(--text); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.blog-feature-card { padding:24px; min-height:100%; }
.blog-feature-card h3 { color:var(--text); font-size:clamp(24px,2.4vw,34px); }
.blog-feature-card p, .article-card p, .admin-panel p, .editor-panel p { color:var(--soft); }
.blog-list { display:grid; gap:16px; }
.blog-list-card { display:grid; grid-template-columns:minmax(0,.72fr) minmax(220px,.28fr); gap:18px; padding:22px; align-items:start; }
.blog-list-card h3 { margin-bottom:8px; color:var(--text); }
.blog-list-card p { color:var(--soft); }
.blog-tags { display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.blog-tags a, .blog-tags span { color:var(--blog-tag-text); border:1px solid var(--blog-tag-border); background:var(--blog-tag-bg); border-radius:999px; padding:4px 8px; font-size:12px; font-weight:760; }
.blog-search-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(160px,.25fr); gap:10px; margin:18px 0 0; }
.blog-search-row input, .blog-search-row select, .admin-field input, .admin-field select, .admin-field textarea { width:100%; border:1px solid var(--line-strong); background:var(--blog-input-bg); color:var(--text); border-radius:var(--radius); padding:11px 12px; outline:none; box-shadow:inset 0 1px 0 rgba(16,24,32,.03); }
.blog-search-row input::placeholder, .admin-field input::placeholder, .admin-field textarea::placeholder { color:#7a8797; opacity:1; }
.blog-search-row input:focus, .blog-search-row select:focus, .admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { border-color:rgba(23,105,232,.45); box-shadow:0 0 0 3px rgba(23,105,232,.1); }
.blog-layout { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:24px; align-items:start; }
.blog-sidebar { position:sticky; top:92px; display:grid; gap:14px; }
.blog-sidebar .chain-card { background:var(--blog-card-bg); border-color:var(--blog-card-border); }
.blog-sidebar .chain-card h3 { color:var(--text); }
.blog-sidebar .chain-card p { color:var(--soft); }
.article-wrap { max-width:860px; margin:0 auto; }
.article-hero { padding-bottom:22px; }
.article-card { padding:clamp(22px,4vw,42px); }
.article-content { color:var(--soft); font-size:17px; line-height:1.78; }
.article-content h1, .article-content h2, .article-content h3 { color:var(--text); }
.article-content h2 { margin-top:36px; }
.article-content h3 { margin-top:26px; }
.article-content p, .article-content li { color:var(--soft); }
.article-content a { color:#0d5f55; text-decoration:underline; text-underline-offset:3px; font-weight:760; }
.article-content pre { overflow:auto; padding:16px; border-radius:var(--radius); background:var(--blog-code-bg); border:1px solid rgba(16,24,32,.22); color:var(--blog-code-text); }
.article-content code { color:#0d5f55; background:rgba(25,198,174,.1); border-radius:4px; padding:1px 4px; }
.article-content pre code { color:var(--blog-code-text); background:transparent; padding:0; }
.article-content blockquote { margin:24px 0; padding:16px 18px; border-left:3px solid var(--brand); background:rgba(25,198,174,.08); color:var(--soft); }
.admin-layout { display:grid; grid-template-columns:320px minmax(0,1fr); gap:18px; align-items:start; }
.admin-panel, .editor-panel { padding:20px; }
.admin-panel h2, .admin-panel h3, .editor-panel h2, .editor-panel h3 { color:var(--text); }
.admin-list { display:grid; gap:10px; margin-top:14px; }
.admin-post-row { border:1px solid var(--blog-card-border); background:#fff; border-radius:var(--radius); padding:12px; cursor:pointer; text-align:left; color:var(--text); box-shadow:0 8px 20px rgba(32,48,71,.05); }
.admin-post-row small { color:var(--muted); }
.admin-post-row:hover, .admin-post-row.active { border-color:rgba(25,198,174,.5); background:rgba(25,198,174,.08); }
.admin-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.admin-field { display:grid; gap:6px; margin-bottom:12px; color:var(--soft); font-size:13px; font-weight:720; }
.admin-field textarea { min-height:260px; font-family:var(--mono); line-height:1.5; resize:vertical; }
.admin-field.full { grid-column:1/-1; }
.admin-toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-bottom:14px; }
.admin-actions { display:flex; flex-wrap:wrap; gap:8px; }
.admin-actions .button.danger { border-color:rgba(185,28,28,.38); background:rgba(185,28,28,.1); color:#991b1b; box-shadow:none; }
.admin-actions .button.danger:hover { background:rgba(185,28,28,.16); border-color:rgba(185,28,28,.52); }
.editor-divider { border:0; border-top:1px solid var(--line); margin:24px 0; }
.preview-box { border:1px solid var(--line-strong); border-radius:var(--radius); background:#fff; padding:18px; min-height:260px; overflow:auto; }
.status-dot { display:inline-flex; align-items:center; gap:7px; color:var(--soft); font-size:13px; font-weight:720; }
.status-dot::before { content:""; width:8px; height:8px; border-radius:999px; background:var(--amber); box-shadow:0 0 0 3px rgba(183,121,31,.12); }
.status-dot.ok::before { background:var(--green); box-shadow:0 0 0 3px rgba(23,138,88,.12); }
.admin-login { max-width:520px; margin:0 auto; }
@media (max-width: 920px) { .blog-hero, .blog-list-card, .blog-layout, .admin-layout, .admin-grid { grid-template-columns:1fr; } .blog-sidebar { position:static; } }