.table-responsive{overflow:auto;border-radius:14px}
/* theme tokens: default light */
:root{
  --main-bg:#ffffff;
  --content-bg:#f7f8fa;
  --fg:#111827;
  --muted:#6b7280;
  --border:#e5e7eb;
  --accent:#7c3aed;
  --accent-2:#10b981;
  --link:#2563eb;
  --code:#f3f4f6;
  --shadow-lg:0 12px 28px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.08);
  --shadow-md:0 8px 18px rgba(0,0,0,.1), 0 3px 8px rgba(0,0,0,.06);
  --text-secondary:#6b7280;
  --hover-surface: rgba(0,0,0,.03);
  --hover-border: #d1d5db;
  /* heatmap (light) */
  --heat0:#e5e7eb; /* empty */
  --heat1:#dbeafe; /* 1-2 */
  --heat2:#bfdbfe; /* 3-4 */
  --heat3:#93c5fd; /* 5-6 */
  --heat4:#60a5fa; /* 7+ */
  --heat-outline: rgba(0,0,0,.05);
  --topbar-bg: rgba(255,255,255,.75);
  --topbar-bg-scrolled: linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,.75));
  --topbar-border: rgba(0,0,0,.06);
  /* buttons */
  --btn-bg:#f3f4f6;
  --btn-fg:#111827;
  --btn-border:#d1d5db;
  --btn-bg-hover:#e5e7eb;
  --btn-fg-hover:#111827;
  --btn-border-hover:#cbd5e1;
  --btn-disabled-bg:#f1f5f9;
  --btn-disabled-fg:#9ca3af;
  --btn-primary-bg: linear-gradient(135deg, var(--accent), #5b21b6);
  --btn-primary-fg: #ffffff;
  --btn-primary-bg-hover: linear-gradient(135deg, #8b5cf6, #5b21b6);
  --topbar-h: 56px;
}

:root[data-theme="dark"]{
  --main-bg:#1a1a1a;
  --content-bg:#242424;
  --fg:#e8eaed;
  --muted:#a1a7af;
  --border:#2b2f3a;
  --accent:#7c3aed;
  --accent-2:#10b981;
  --link:#a9b8ff;
  --code:#0c1220;
  --shadow-lg:0 10px 30px rgba(0,0,0,.35), 0 4px 14px rgba(0,0,0,.2);
  --shadow-md:0 6px 18px rgba(0,0,0,.28), 0 3px 10px rgba(0,0,0,.16);
  --text-secondary:#9aa0a6;
  --hover-surface:#2b2b2b;
  --hover-border:#3a2b66;
  /* heatmap (dark) */
  --heat0:#0c1220; /* empty */
  --heat1:rgba(124,58,237,.28);
  --heat2:rgba(124,58,237,.46);
  --heat3:rgba(124,58,237,.64);
  --heat4:rgba(124,58,237,.85);
  --heat-outline: rgba(255,255,255,.08);
  --topbar-bg: linear-gradient(180deg, rgba(20,22,30,.65), rgba(20,22,30,.45));
  --topbar-bg-scrolled: linear-gradient(180deg, rgba(20,22,30,.85), rgba(20,22,30,.6));
  --topbar-border: rgba(255,255,255,.08);
  /* buttons */
  --btn-bg:#1f2937;
  --btn-fg:#e8eaed;
  --btn-border:#374151;
  --btn-bg-hover:#212a50;
  --btn-fg-hover:#ffffff;
  --btn-border-hover:#475569;
  --btn-disabled-bg:#111827;
  --btn-disabled-fg:#6b7280;
  --btn-primary-bg: linear-gradient(135deg, var(--accent), #5b21b6);
  --btn-primary-fg: #ffffff;
  --btn-primary-bg-hover: linear-gradient(135deg, #8b5cf6, #5b21b6);
}

/* Keep vertical scrollbar space reserved to avoid header shift between pages */
html{ overflow-y: scroll; }

body{margin:0;background:var(--main-bg);color:var(--fg);font:16px/1.7 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial;padding-top:var(--topbar-h)}
.topbar{position:fixed;left:0;right:0;top:0;z-index:100;display:flex;gap:16px;align-items:center;justify-content:space-between;padding:14px 20px;background:var(--topbar-bg);backdrop-filter: blur(12px);border-bottom:1px solid var(--topbar-border)}
.topbar.is-scrolled{background:var(--topbar-bg-scrolled);border-bottom:1px solid var(--topbar-border);box-shadow:var(--shadow-md)}
.brand{display:flex;gap:12px;align-items:center}
.avatar{width:36px;height:36px;border-radius:10px;object-fit:cover}
.name{font-weight:700}
.sub{font-size:12px;color:var(--muted)}
.nav{display:flex;gap:6px}
.nav a{color:var(--muted);text-decoration:none;padding:8px 12px;border-radius:999px;transition:color .2s ease, background .2s ease, transform .2s ease}
.nav a.active{color:var(--fg);background:linear-gradient(135deg, rgba(124,58,237,.25), rgba(124,58,237,.1))}
.nav a:hover{color:var(--fg);background:var(--hover-surface);transform:translateY(-2px)}
.actions{display:flex;gap:10px;align-items:center}
.actions .link, .nav .link{color:var(--fg);text-decoration:none}
button{
  background: var(--btn-bg);
  color: var(--btn-fg);
  border:1px solid var(--btn-border);
  border-radius:10px;padding:8px 12px;cursor:pointer;
  transition:background .2s ease, transform .2s ease, box-shadow .2s ease, color .2s ease, border-color .2s ease
}
button:hover{background:var(--btn-bg-hover);color:var(--btn-fg-hover);border-color:var(--btn-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-md)}
button:disabled{background:var(--btn-disabled-bg);color:var(--btn-disabled-fg);border-color:var(--btn-border);cursor:not-allowed;transform:none;box-shadow:none}
.btn-primary{background:var(--btn-primary-bg);color:var(--btn-primary-fg);border-color:transparent}
.btn-primary:hover{background:var(--btn-primary-bg-hover);filter:brightness(1.05);box-shadow:var(--shadow-lg)}
.btn-primary:disabled{opacity:.7;filter:none}

/* login page tweaks */
.admin .btn-primary{background:linear-gradient(135deg, var(--accent), #5b21b6)}
.container{max-width:980px;margin:40px auto;padding:0 16px}
@media (min-width: 1200px){ .container{ max-width: 1100px; } }
@media (max-width: 640px){
  .topbar{ padding: 10px 12px; }
  .nav{ display:none; }
  .container{ margin:24px auto; }
  .page-title{ font-size:26px; }
  .post-item{ padding:12px; }
}
.page-title{font-size:32px;margin:6px 0 4px}
.muted{color:var(--muted)}
.footer{display:flex;justify-content:center;margin:40px 0}
.post-list{display:flex;flex-direction:column;gap:16px;margin-top:18px}
.post-list.grid-cards{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width: 900px){ .post-list.grid-cards{ grid-template-columns: 1fr 1fr; } }
.post-item{padding:16px;border:1px solid transparent;border-radius:16px;transition:transform .25s ease, background .25s ease, box-shadow .25s ease;background:
  linear-gradient(var(--content-bg), var(--content-bg)) padding-box,
  linear-gradient(135deg, rgba(124,58,237,.32), rgba(124,58,237,.15)) border-box}
.post-item:hover{transform:translateY(-3px);background:var(--hover-surface);box-shadow:var(--shadow-lg)}
.post-item a{color:var(--fg);text-decoration:none}
.post-item h3{font-size:18px;line-height:1.4;margin:0 0 6px}
.post-item .meta{font-size:13px}
.meta{display:flex;gap:8px;align-items:center}
.chip{display:inline-flex;gap:6px;align-items:center;padding:4px 10px;border:1px solid var(--border);border-radius:999px;color:var(--muted);font-size:12px;background:rgba(124,58,237,.08);transition:color .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease}
.chip:hover{color:#111827;border-color:var(--hover-border);background:var(--hover-surface);box-shadow:0 2px 8px rgba(0,0,0,.06)}
:root[data-theme="dark"] .chip:hover{color:var(--fg);border-color:#3a2b66;background:rgba(124,58,237,.18)}
.card{padding:16px;border:1px solid transparent;border-radius:16px;margin-top:20px;display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow-md);transition:transform .25s cubic-bezier(.22,.61,.36,1), box-shadow .25s ease;background:
  linear-gradient(var(--content-bg), var(--content-bg)) padding-box,
  linear-gradient(135deg, rgba(124,58,237,.24), rgba(124,58,237,.10)) border-box}
.card:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
label{display:flex;flex-direction:column;gap:6px}
input,textarea{background:var(--code);color:var(--fg);border:1px solid var(--border);border-radius:10px;padding:10px}
input:focus,textarea:focus{outline:none;border-color:#2e3b7c;box-shadow:0 0 0 3px rgba(124,58,237,.25)}
.toolbar button{padding:6px 8px;font-size:12px}
.toolbar select{padding:6px 8px}
.toolbar{display:flex;align-items:center;gap:10px}
.toolbar input[type="number"]{width:90px}
.markdown-body{line-height:1.8}
.markdown-body h1,.markdown-body h2,.markdown-body h3{margin-top:22px}
.markdown-body pre{background:var(--code);border:1px solid var(--border);padding:12px;border-radius:12px;overflow:auto}
.markdown-body code{background:var(--code);padding:2px 6px;border:1px solid var(--border);border-radius:6px}
.markdown-body img{max-width:100%;border-radius:12px;display:block}
/* cards grid spacing adapt in grid mode */
.grid .post-list.grid-cards .post-item{ height: 100%; }
/* ensure anchor scroll offset for fixed header */
.markdown-body h2, .markdown-body h3{ scroll-margin-top: var(--topbar-h); }
/* heading anchors */
.markdown-body h2 .anchor,.markdown-body h3 .anchor{opacity:.95;margin-left:8px;text-decoration:none;color:var(--muted);transition:opacity .2s ease;font-size:.95em;cursor:pointer;user-select:none}
.markdown-body h2:hover .anchor,.markdown-body h3:hover .anchor{opacity:1}
img[loading="lazy"]{ content-visibility:auto; }
.link{color:var(--link)}
.link:hover{text-decoration:underline}

/* table & rows hover micro-interaction */
table{width:100%;border-collapse:collapse}
thead th{color:var(--muted);font-weight:600}
tbody tr{transition:transform .25s ease, background .25s ease}
tbody tr:hover{transform:translateY(-3px);background:rgba(255,255,255,.03)}

/* type scale */
.main-title{font-size:38px;font-weight:600;margin:6px 0 10px}
.card-footer,.date,.meta .muted{color:var(--text-secondary);font-size:12px}

/* sidebar animation (if used) */
.sidebar{transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s ease}

/* post detail enhancements */
.progress-track{position:sticky;top:var(--topbar-h);height:3px;background:rgba(255,255,255,.06);z-index:90}
.progress-bar{height:100%;width:0;background:linear-gradient(90deg, var(--accent), #5b21b6)}
.toc{display:flex;flex-direction:column;gap:6px}
.toc .toc-item{color:var(--muted);text-decoration:none;font-size:13px}
.toc .toc-item:hover{color:var(--fg)}
.toc .level-3{padding-left:10px}
.toc .toc-item.is-active{color:var(--fg);font-weight:600;border-left:2px solid var(--accent);padding-left:8px}

/* timeline layout */
.timeline{display:grid;gap:16px;scroll-snap-type:y proximity}
.tl-group{background:var(--content-bg);border:1px solid var(--border);border-radius:16px;padding:16px;scroll-snap-align:start}
.tl-month{font-weight:700;margin:4px 0 12px;position:sticky; top:var(--sticky-offset, calc(var(--topbar-h) + 10px)); z-index:2; background:var(--content-bg); padding:4px 8px; border-radius:8px; box-shadow:0 4px 10px rgba(0,0,0,.05)}
.tl-list{position:relative;list-style:none;margin:0;padding-left:26px}
.tl-list::before{content:"";position:absolute;left:10px;top:0;bottom:0;width:2px;background:var(--tl-line, rgba(0,0,0,.08))}
:root[data-theme="dark"] .tl-list::before{background:rgba(255,255,255,.08)}
.tl-item{position:relative;margin:10px 0;padding-left:12px}
.tl-item::before{content:"";position:absolute;left:0;top:8px;width:8px;height:8px;background:var(--accent);border-radius:50%;box-shadow:0 0 0 0 rgba(124,58,237,.0);transition:box-shadow .2s ease}
.tl-item:hover::before{box-shadow:0 0 12px rgba(124,58,237,.6)}
.tl-item.hot-2::before{width:9px;height:9px}
.tl-item.hot-3::before{width:10px;height:10px;box-shadow:0 0 14px rgba(124,58,237,.7)}
.tl-item:active::before{box-shadow:0 0 18px rgba(124,58,237,.9)}
.tl-item a{color:var(--fg);text-decoration:none}
.tl-item a:hover{text-decoration:underline}
.tl-item .time{color:var(--muted);font-size:12px;margin-left:8px}
/* month stats */
.tl-stats{font-size:12px;color:var(--muted);margin:4px 0 8px}
/* two-column layout for pages with sidebar */
.layout-two-col{display:grid;grid-template-columns:280px 1fr;gap:20px;align-items:start}
@media (max-width: 900px){ .layout-two-col{ grid-template-columns: 1fr; } }
.sidebar{position:sticky;top:90px;display:flex;flex-direction:column;gap:12px}
.content{min-width:0}
/* sidebar cards consistency */
.sidebar .card{position:sticky; top: calc(var(--topbar-h) + 20px)}

/* tag cloud */
.tag-cloud{display:flex;flex-wrap:wrap;gap:10px}
.tag-cloud{transition:opacity .25s ease}
.tag-cloud .chip{background:rgba(124,58,237,.10);border-color:var(--border);transition:transform .2s ease, box-shadow .2s ease, background .2s ease}
.tag-cloud .chip:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.tag-cloud .chip.is-active{color:var(--fg);background:linear-gradient(135deg, rgba(124,58,237,.32), rgba(124,58,237,.18));border-color:rgba(124,58,237,.45)}

/* floating year index */
.year-index{position:fixed;right:18px;top:100px;display:flex;flex-direction:column;gap:6px;z-index:40}
.year-index .chip{font-size:12px;padding:4px 8px}
.year-index .chip.is-active{background:linear-gradient(135deg, rgba(124,58,237,.32), rgba(124,58,237,.18)); border-color:rgba(124,58,237,.45); color:var(--fg)}

/* heatmap */
.heatmap-wrap{overflow:auto}
.heatmap{display:grid;grid-template-columns:repeat(53,12px);grid-auto-rows:12px;gap:3px;align-items:start; padding:8px; border-radius:10px}
.heatmap .cell{width:12px;height:12px;border-radius:3px;background:var(--heat0); box-shadow: inset 0 0 0 1px var(--heat-outline)}
.heatmap .c-1{background:var(--heat1)}
.heatmap .c-2{background:var(--heat2)}
.heatmap .c-3{background:var(--heat3)}
.heatmap .c-4{background:var(--heat4)}
.heatmap .c-1,.heatmap .c-2,.heatmap .c-3,.heatmap .c-4{ box-shadow: inset 0 0 0 1px rgba(0,0,0,.08) }
:root[data-theme="dark"] .heatmap .c-1,
:root[data-theme="dark"] .heatmap .c-2,
:root[data-theme="dark"] .heatmap .c-3,
:root[data-theme="dark"] .heatmap .c-4{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.12) }

/* skeleton loading */
.skeleton{position:relative;overflow:hidden;background:linear-gradient(90deg, rgba(255,255,255,.06), rgba(255,255,255,.12), rgba(255,255,255,.06));
  background-size:200% 100%; animation:skeleton-move 1.2s ease-in-out infinite; border-radius:8px}
@keyframes skeleton-move{0%{background-position:200% 0}100%{background-position:-200% 0}}
.skeleton-line{height:14px;margin:8px 0;border-radius:6px}
.skeleton-card{padding:16px;border:1px solid var(--border);background:var(--content-bg);border-radius:16px}

/* subtle enter animations */
.slide-fade-in{animation:slide-fade-in .26s cubic-bezier(.22,.61,.36,1) both}
@keyframes slide-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* page view transitions (fallback) */
body.page-enter{animation:page-fade-in .18s ease both}
body.page-leave{animation:page-fade-out .12s ease both}
@keyframes page-fade-in{from{opacity:.0}to{opacity:1}}
@keyframes page-fade-out{from{opacity:1}to{opacity:.0}}

/* theme switch transition */
.theme-transition{transition:background-color .2s ease, color .2s ease}

/* image fade-in */
img.img-fade{opacity:0;filter:blur(8px);transition:opacity .35s ease, filter .35s ease}
img.img-in{opacity:1;filter:blur(0)}

/* global search overlay removed */

/* back-to-top button */
.back-to-top{position:fixed;right:18px;bottom:22px;padding:10px 12px;border-radius:12px;display:none;z-index:90}

/* code line numbers */
pre.with-lines code{counter-reset: linen}
pre.with-lines code .line{display:block;position:relative;padding-left:2.4em}
pre.with-lines code .line::before{content: counter(linen);counter-increment: linen;position:absolute;left:0;top:0;color:var(--muted)}

/* code language badge */
.code-lang{font-size:12px;color:var(--muted)}

/* link preview card */
.link-preview{position:fixed;z-index:120;background:var(--content-bg);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow-lg);padding:10px 12px;display:none;max-width:320px}
.link-preview .host{display:flex;align-items:center;gap:8px;font-weight:600}
.link-preview .host img{width:16px;height:16px;border-radius:4px}
.link-preview .title{color:var(--muted);margin-top:6px;font-size:13px;word-break:break-all}

/* image lightbox group */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.85);display:flex;align-items:center;justify-content:center;z-index:9999}
.lightbox img{max-width:90vw;max-height:90vh;border-radius:12px;box-shadow:0 20px 60px rgba(0,0,0,.6)}
.lightbox .nav{position:fixed;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;user-select:none}
.lightbox .prev{left:20px}
.lightbox .next{right:20px}
.lightbox .close{position:fixed;top:20px;right:20px;width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.12);color:#fff;cursor:pointer}

/* mobile TOC drawer */
.toc-fab{display:none;position:fixed;right:18px;bottom:80px;z-index:90}
.toc-drawer-mask{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;z-index:200}
.toc-drawer{position:fixed;right:-340px;top:0;height:100vh;width:320px;background:var(--content-bg);border-left:1px solid var(--border);box-shadow:var(--shadow-lg);transition:right .25s ease;z-index:201;padding:16px;overflow:auto}
.toc-drawer.open{right:0}
.toc-drawer-mask.show{display:block}
@media (max-width: 900px){ .toc-fab{display:block} }

/* arrow hint in post cards */
.post-item .arrow{float:right;opacity:.4;transition:transform .2s ease, opacity .2s ease}
.post-item:hover .arrow{transform:translateX(2px);opacity:.8}

/* reading mode & accent features removed per request */

/* skeletons for timeline/tag cloud */
.tl-skeleton{display:grid;gap:12px}
.tl-skeleton .skeleton-card{height:auto}
.tag-skeleton{display:flex;gap:10px;flex-wrap:wrap}
.tag-skeleton .chip{width:64px;height:24px}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}