/* blog-admin.css — the Blog section of the admin console.
   Built on the console's own tokens (--ink, --muted, --line, --brand,
   --surface-2, --font-display, --font-body), so it follows the console's
   light and dark themes. Everything is scoped under #pBlog. */

#pBlog{--bg-card:color-mix(in srgb,var(--ink) 3%,transparent);--bg-line:var(--line,rgba(127,127,160,.2));--bg-strong:var(--line-strong,rgba(127,127,160,.3));
  --bg-brand:var(--brand,#E0466A);--bg-muted:var(--muted,#8a8fb3);font-family:var(--font-body,system-ui,sans-serif);color:var(--ink)}
#pBlog *{box-sizing:border-box}
#pBlog svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}
#pBlog a{color:inherit}
#pBlog .bg-grow{flex:1}
#pBlog .bg-muted{color:var(--bg-muted);font-size:13px}

/* buttons, inputs */
#pBlog .bg-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:38px;padding:0 15px;border-radius:11px;cursor:pointer;
  border:1px solid var(--bg-strong);background:var(--bg-card);color:var(--ink);font:700 13.5px var(--font-body,inherit);text-decoration:none;white-space:nowrap}
#pBlog .bg-btn:hover{border-color:var(--bg-brand)}
#pBlog .bg-btn:disabled{opacity:.55;cursor:progress}
#pBlog .bg-btn.pri{background:var(--bg-brand);border-color:var(--bg-brand);color:#fff}
#pBlog .bg-btn.pri:hover{filter:brightness(1.07)}
#pBlog .bg-btn.ghost{background:transparent}
#pBlog .bg-btn.danger{color:#E0466A;background:transparent;width:100%;margin-top:4px}
#pBlog .bg-btn.sm{height:34px;padding:0 12px;font-size:13px}
#pBlog .bg-ibtn{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;border:1px solid var(--bg-line);color:var(--bg-muted)}
#pBlog .bg-ibtn:hover{color:var(--ink);border-color:var(--bg-brand)}
#pBlog .bg-in{width:100%;min-width:0;margin:0;padding:9px 11px;border-radius:10px;border:1px solid var(--bg-strong);background:transparent;
  color:var(--ink);font:500 14px var(--font-body,inherit);outline:none;resize:vertical}
#pBlog .bg-in:focus,#pBlog .bg-title:focus,#pBlog .bg-src:focus{border-color:var(--bg-brand)}
#pBlog .bg-lab{display:block;margin:12px 0 5px;font:700 12.5px var(--font-body,inherit);color:var(--ink)}
#pBlog .bg-lab small{font-weight:500;color:var(--bg-muted);margin-left:4px}
#pBlog .bg-seg{display:inline-flex;padding:3px;gap:2px;border-radius:11px;border:1px solid var(--bg-line);background:var(--bg-card)}
#pBlog .bg-seg button{height:32px;padding:0 12px;border:0;border-radius:8px;background:none;cursor:pointer;color:var(--bg-muted);font:700 13px var(--font-body,inherit)}
#pBlog .bg-seg button i{font-style:normal;margin-left:6px;font-size:11.5px;opacity:.7}
#pBlog .bg-seg button.on{background:var(--bg-brand);color:#fff}
#pBlog .bg-seg.sm button{height:28px;padding:0 10px;font-size:12px}
#pBlog .bg-pill{display:inline-block;padding:3px 10px;border-radius:999px;font:800 11.5px var(--font-body,inherit)}
#pBlog .bg-pill.live{color:#1E9A6B;background:rgba(47,199,160,.14)}
#pBlog .bg-pill.scheduled{color:#B87A12;background:rgba(244,184,96,.18)}
#pBlog .bg-pill.draft{color:var(--bg-muted);background:var(--bg-card);border:1px solid var(--bg-line)}

/* list */
#pBlog .bg-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:0 0 16px}
#pBlog .bg-head h2{margin:0;font:600 22px var(--font-display,inherit);letter-spacing:-.02em}
#pBlog .bg-head p{margin:4px 0 0;color:var(--bg-muted);font-size:13.5px}
#pBlog .bg-head a{color:var(--bg-brand);font-weight:700}
#pBlog .bg-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:14px}
#pBlog .bg-find{max-width:280px;margin-left:auto}
#pBlog .bg-rows{display:flex;flex-direction:column;gap:8px}
#pBlog .bg-row{display:grid;grid-template-columns:76px minmax(0,1fr) 84px 170px auto;align-items:center;gap:14px;padding:10px 12px;border-radius:14px;
  border:1px solid var(--bg-line);background:var(--bg-card);cursor:pointer;transition:border-color .15s}
#pBlog .bg-row:hover{border-color:var(--bg-strong)}
#pBlog .bg-thumb{width:76px;height:50px;border-radius:9px;overflow:hidden;display:grid;place-items:center;background:var(--surface-2,rgba(127,127,160,.12));color:var(--bg-muted)}
#pBlog .bg-thumb img{width:100%;height:100%;object-fit:cover}
#pBlog .bg-rmain{min-width:0}
#pBlog .bg-rmain b{display:block;font:700 14.5px var(--font-body,inherit);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pBlog .bg-rmain span{display:block;font-size:12.5px;color:var(--bg-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#pBlog .bg-feat{font-style:normal;font-size:10.5px;font-weight:800;color:#B87A12;background:rgba(244,184,96,.18);padding:1px 7px;border-radius:999px;vertical-align:2px}
#pBlog .bg-rstate small{display:block;margin-top:4px;font-size:11.5px;color:var(--bg-muted)}
#pBlog .bg-racts{display:flex;gap:6px;align-items:center}
#pBlog .bg-empty,#pBlog .bg-loading{padding:44px 20px;text-align:center;border:1px dashed var(--bg-strong);border-radius:16px;color:var(--bg-muted)}
#pBlog .bg-empty b{display:block;color:var(--ink);font-size:16px}
#pBlog .bg-empty p{margin:6px 0 14px}
@media (max-width:760px){
  #pBlog .bg-row{grid-template-columns:60px minmax(0,1fr);grid-template-areas:"t m" "t s";row-gap:6px}
  #pBlog .bg-thumb{width:60px;height:44px;grid-area:t}
  #pBlog .bg-rmain{grid-area:m} #pBlog .bg-rstate{grid-area:s} #pBlog .bg-racts{display:none}
  #pBlog .bg-find{max-width:none;margin-left:0}
}

/* editor */
#pBlog .bg-ebar{position:sticky;top:0;z-index:5;display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 0 12px;margin-bottom:6px;
  background:var(--bg,transparent);border-bottom:1px solid var(--bg-line)}
#pBlog .bg-saved{font-size:12.5px;color:var(--bg-muted)}
#pBlog .bg-egrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:22px;align-items:start;margin-top:14px}
@media (max-width:1100px){ #pBlog .bg-egrid{grid-template-columns:1fr} }
#pBlog .bg-title{width:100%;padding:6px 2px;border:0;border-bottom:1px solid transparent;background:transparent;color:var(--ink);outline:none;
  font:600 clamp(22px,2.6vw,30px)/1.25 var(--font-display,inherit);letter-spacing:-.02em}
#pBlog .bg-slug{display:flex;align-items:center;gap:2px;margin:6px 0 4px;font:600 13px var(--font-body,inherit);color:var(--bg-muted)}
#pBlog .bg-slug input{flex:1;min-width:0;padding:4px 6px;border:1px dashed var(--bg-strong);border-radius:7px;background:transparent;color:var(--ink);font:inherit;outline:none}
#pBlog .bg-ex{font-size:14.5px}
#pBlog .bg-count{text-align:right;font-size:11.5px;color:var(--bg-muted);margin-top:3px}
#pBlog .bg-tools{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:14px 0 8px;padding:6px;border-radius:12px;border:1px solid var(--bg-line);background:var(--bg-card)}
#pBlog .bg-tools > button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 9px;border:0;border-radius:8px;background:none;cursor:pointer;
  color:var(--ink);font:700 12.5px var(--font-body,inherit)}
#pBlog .bg-tools > button:hover{background:var(--surface-2,rgba(127,127,160,.14))}
#pBlog .bg-panes{display:grid;gap:12px;min-height:480px}
#pBlog .bg-panes.split{grid-template-columns:1fr 1fr}
#pBlog .bg-panes.write .bg-prev{display:none}
#pBlog .bg-panes.preview .bg-src{display:none}
@media (max-width:900px){ #pBlog .bg-panes.split{grid-template-columns:1fr} }
#pBlog .bg-src{width:100%;min-height:480px;padding:16px;border-radius:14px;border:1px solid var(--bg-strong);background:transparent;color:var(--ink);resize:vertical;outline:none;
  font:500 14.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;tab-size:2}
#pBlog .bg-src.drop{border-style:dashed;border-color:var(--bg-brand);background:color-mix(in srgb,var(--bg-brand) 6%,transparent)}
#pBlog .bg-prev{min-height:480px;max-height:78vh;overflow:auto;padding:18px 22px;border-radius:14px;border:1px solid var(--bg-line);background:var(--bg-card)}
#pBlog .bg-foot{margin-top:8px;font-size:12.5px;color:var(--bg-muted)}
#pBlog .bg-side{display:flex;flex-direction:column;gap:14px}
#pBlog .bg-card{padding:14px 16px 16px;border-radius:14px;border:1px solid var(--bg-line);background:var(--bg-card)}
#pBlog .bg-card h4{margin:0 0 6px;font:600 14px var(--font-display,inherit);letter-spacing:-.01em}
#pBlog .bg-radio{display:flex;flex-direction:column;gap:8px;margin-top:8px}
#pBlog .bg-radio label,#pBlog .bg-check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13.5px}
#pBlog .bg-radio span{display:flex;flex-direction:column;font-weight:700}
#pBlog .bg-radio small{font-weight:500;color:var(--bg-muted);font-size:12px}
#pBlog .bg-radio input,#pBlog .bg-check input{margin-top:3px;accent-color:var(--bg-brand)}
#pBlog .bg-check{margin-top:12px;font-weight:600}
#pBlog .bg-cover img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:10px;display:block}
#pBlog .bg-cacts{display:flex;gap:8px;margin-top:8px}
#pBlog .bg-drop{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:22px 12px;border-radius:12px;cursor:pointer;
  border:1.5px dashed var(--bg-strong);background:transparent;color:var(--ink);font:inherit}
#pBlog .bg-drop svg{width:24px;height:24px;color:var(--bg-brand)}
#pBlog .bg-drop small{color:var(--bg-muted);font-size:11.5px}
#pBlog .bg-drop:hover{border-color:var(--bg-brand)}
#pBlog .bg-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 8px}
#pBlog .bg-tag{display:inline-flex;align-items:center;gap:4px;padding:3px 4px 3px 10px;border-radius:999px;font:700 12px var(--font-body,inherit);
  color:var(--bg-brand);background:color-mix(in srgb,var(--bg-brand) 12%,transparent)}
#pBlog .bg-tag button{width:20px;height:20px;border:0;border-radius:50%;background:none;color:inherit;cursor:pointer;font-size:14px;line-height:1}
#pBlog .bg-serp{margin-top:12px;padding:12px;border-radius:10px;border:1px solid var(--bg-line);font-family:Arial,sans-serif}
#pBlog .bg-serp small{display:block;font:700 11px var(--font-body,inherit);color:var(--bg-muted);margin-bottom:6px}
#pBlog .bg-serp .u{display:block;font-size:12px;color:#1E9A6B}
#pBlog .bg-serp b{display:block;margin:2px 0;font-size:16px;font-weight:400;color:#6B8CFF}
#pBlog .bg-serp p{margin:0;font-size:12.5px;line-height:1.5;color:var(--bg-muted)}

/* preview typography — the same as the public post */
#pBlog .bm{font-size:16px;line-height:1.75;color:var(--ink);overflow-wrap:break-word}
#pBlog .bm .bg-ptitle{margin:0 0 16px;font:600 26px/1.2 var(--font-display,inherit);letter-spacing:-.02em}
#pBlog .bm h2{margin:28px 0 10px;font:600 21px/1.3 var(--font-display,inherit);letter-spacing:-.015em}
#pBlog .bm h3{margin:22px 0 8px;font:600 17px/1.3 var(--font-display,inherit)}
#pBlog .bm h4{margin:18px 0 6px;font-size:15px}
#pBlog .bm p{margin:0 0 14px}
#pBlog .bm a{color:var(--bg-brand)}
#pBlog .bm ul,#pBlog .bm ol{margin:0 0 14px;padding-left:22px}
#pBlog .bm blockquote{margin:18px 0;padding:4px 0 4px 16px;border-left:3px solid var(--bg-brand);font-style:italic}
#pBlog .bm code{font:.88em ui-monospace,monospace;padding:1px 5px;border-radius:5px;background:var(--surface-2,rgba(127,127,160,.14))}
#pBlog .bm pre{padding:12px 14px;border-radius:10px;background:var(--surface-2,rgba(127,127,160,.14));overflow-x:auto}
#pBlog .bm pre code{background:none;padding:0}
#pBlog .bm hr{margin:26px auto;width:70px;border:0;height:2px;background:linear-gradient(90deg,var(--bg-brand),#F4B860)}
#pBlog .bm img{max-width:100%;border-radius:10px;margin:14px auto;display:block}
#pBlog .bm .bm-fig{margin:16px 0}
#pBlog .bm figcaption{text-align:center;font-size:13px;color:var(--bg-muted)}
#pBlog .bm .bm-table{overflow-x:auto;margin:0 0 14px;border:1px solid var(--bg-line);border-radius:10px}
#pBlog .bm table{width:100%;border-collapse:collapse;font-size:14px}
#pBlog .bm th,#pBlog .bm td{padding:8px 11px;text-align:left;border-top:1px solid var(--bg-line)}
#pBlog .bm th{border-top:0;background:var(--surface-2,rgba(127,127,160,.14))}
#pBlog .bm .bm-call{margin:16px 0;padding:12px 16px;border-radius:10px;border:1px solid var(--bg-line);border-left:4px solid #2FC7A0}
#pBlog .bm .bm-call p{margin:0}
#pBlog .bm .bm-warning,#pBlog .bm .bm-important{border-left-color:#F4B860}
#pBlog .bm .bm-note{border-left-color:#8B7CFF}

/* toast (outside #pBlog, so not scoped) */
.bg-toast{position:fixed;left:50%;right:auto;top:auto;bottom:24px;width:max-content;z-index:9999;transform:translate(-50%,20px);opacity:0;padding:10px 16px;border-radius:12px;
  background:#1E9A6B;color:#fff;font:700 13.5px system-ui,sans-serif;box-shadow:0 12px 30px -12px rgba(0,0,0,.5);transition:all .25s;max-width:90vw}
.bg-toast.bad{background:#C8243E}
.bg-toast.in{transform:translate(-50%,0);opacity:1}

#pBlog .bg-reads{text-align:right;line-height:1.15}
#pBlog .bg-reads b{display:block;font:700 16px var(--font-display,inherit);letter-spacing:-.01em}
#pBlog .bg-reads small{font-size:11.5px;color:var(--bg-muted)}
@media (max-width:760px){ #pBlog .bg-reads{display:none} }

#pBlog .bm .bm-shloka{margin:18px 0;padding:18px 18px 14px;border-radius:12px;text-align:center;border:1px solid rgba(244,184,96,.35);background:rgba(244,184,96,.06)}
#pBlog .bm .bm-shloka p{margin:0 0 10px}
#pBlog .bm .bm-shloka p:first-of-type{font:500 1.15em/1.85 'Noto Sans Devanagari','Tiro Devanagari Hindi',serif;font-style:normal}
#pBlog .bm .bm-shloka p:nth-of-type(2){font-size:.93em;color:var(--bg-muted)}
#pBlog .bm .bm-shloka p:last-of-type{margin:0;padding-top:10px;border-top:1px solid var(--bg-line)}