/* Admin + Blog styling — Notion/AI aesthetic, aligned with the portfolio. */

/* ---- page-to-page transitions ---- */
body{opacity:1}
body.is-leaving{opacity:0;transform:translateY(-8px);transition:opacity .26s cubic-bezier(.2,.8,.2,1),transform .26s cubic-bezier(.2,.8,.2,1)}
@keyframes ptIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.pt-enter{animation:ptIn .55s cubic-bezier(.2,.8,.2,1) both}
@media(prefers-reduced-motion:reduce){.pt-enter{animation:none}body.is-leaving{transition:none}}

:root{
  --bg:#f7f7f5; --panel:#fff; --text:#37352f; --muted:#787774; --border:#e9e9e7;
  --hover:#efefed; --blue:#2e7dff; --cyan:#00c2e0; --aqua:#18e0c8;
  --grad:linear-gradient(90deg,#2e7dff,#00c2e0 50%,#18e0c8);
  --radius:12px; --radius-sm:8px; --shadow:0 8px 30px rgba(15,15,15,.08);
  --font:'Inter',system-ui,sans-serif; --mono:'JetBrains Mono',monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
.muted{color:var(--muted)} .tiny{font-size:.78rem} .mono{font-family:var(--mono)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;padding:10px 16px;border-radius:9px;font-weight:600;font-size:.9rem;border:1px solid transparent;cursor:pointer;font-family:var(--font);transition:transform .15s,filter .15s,background .2s}
.btn:hover{transform:translateY(-1px)}
.btn--primary{background:var(--grad);color:#fff;box-shadow:0 6px 18px rgba(46,125,255,.3)}
.btn--ghost{background:var(--panel);border-color:var(--border);color:var(--text)}
.btn--ghost:hover{border-color:var(--blue)}
.btn--sm{padding:7px 13px;font-size:.84rem}
.btn--full{width:100%}

/* ---------- Auth ---------- */
body.auth{display:grid;place-items:center;min-height:100vh;background:radial-gradient(circle at 50% 0%,rgba(46,125,255,.10),transparent 55%),var(--bg)}
.auth-wrap{width:min(92vw,400px)}
.auth-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:32px;box-shadow:var(--shadow);display:grid;gap:14px}
.auth-brand{display:flex;justify-content:center}
.brand__mark{width:40px;height:40px;border-radius:11px;background:var(--grad);color:#fff;font-weight:800;display:grid;place-items:center;box-shadow:0 0 16px rgba(46,125,255,.4)}
.auth-card h1{font-size:1.5rem;text-align:center}
.auth-card .muted{text-align:center;margin-top:-6px}
.field{display:grid;gap:5px}
.field span{font-size:.82rem;color:var(--muted);font-weight:500}
.field input,.field textarea,.field select,.filters input,.filters select,.blog-search input{
  width:100%;padding:11px 13px;font-family:var(--font);font-size:.92rem;color:var(--text);
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-sm)}
.field textarea.mono{font-family:var(--mono);font-size:.85rem;line-height:1.6}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(46,125,255,.14)}
.check{display:flex;align-items:center;gap:8px;font-size:.86rem;color:var(--muted)}
.alert{background:#fdecec;border:1px solid #f5c2c2;color:#b42318;padding:10px 12px;border-radius:8px;font-size:.86rem}

/* ---------- Admin shell ---------- */
.layout{display:grid;grid-template-columns:240px 1fr;min-height:100vh}
.side{background:var(--panel);border-right:1px solid var(--border);padding:18px 14px;display:flex;flex-direction:column;gap:18px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;font-weight:700}
.side__nav{display:grid;gap:4px}
.side__nav a{padding:9px 11px;border-radius:8px;color:var(--muted);font-size:.9rem;font-weight:500}
.side__nav a:hover{background:var(--hover);color:var(--text)}
.side__nav a.is-active{background:linear-gradient(90deg,rgba(46,125,255,.12),rgba(24,224,200,.10));color:var(--text);font-weight:600;box-shadow:inset 2px 0 0 var(--blue)}
.side__foot{margin-top:auto;display:grid;gap:10px;font-size:.85rem}
.content{padding:28px clamp(18px,3vw,40px);max-width:1100px}
.page-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:1.7rem}
.count{font-size:.9rem;color:var(--muted);font-weight:500}

/* Metrics */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-bottom:24px}
.metric{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow)}
.metric b{display:block;font-size:1.8rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.metric span{font-size:.82rem;color:var(--muted)}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.panel h2{font-size:1.05rem;margin-bottom:12px}

/* Tables */
.table{width:100%;border-collapse:collapse;font-size:.9rem}
.table th{text-align:left;color:var(--muted);font-weight:600;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;padding:8px 10px;border-bottom:1px solid var(--border)}
.table td{padding:11px 10px;border-bottom:1px solid var(--border);vertical-align:top}
.row-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.link{color:var(--blue);font-size:.84rem;font-weight:500;background:none;border:0;cursor:pointer;padding:0;font-family:var(--font)}
.link--danger{color:#d4380d}
.badge{font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:100px;text-transform:capitalize}
.badge--draft{background:#fff3d6;color:#9a6700}
.badge--published{background:#dcffe4;color:#1a7f37}
.badge--archived{background:#eee;color:#666}

.filters{display:flex;gap:10px;margin-bottom:16px;flex-wrap:wrap}
.filters input{max-width:280px}
.pager{display:flex;align-items:center;gap:16px;justify-content:center;margin-top:20px;color:var(--muted);font-size:.88rem}
.pager a{color:var(--blue);font-weight:600}
.empty{text-align:center;padding:40px;color:var(--muted);display:grid;gap:12px;justify-items:center}
.logs{display:grid;gap:8px;font-size:.85rem}
.logs li{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding-bottom:8px;border-bottom:1px dashed var(--border)}
.logs code{background:var(--hover);padding:2px 7px;border-radius:6px;font-family:var(--mono);font-size:.76rem;color:var(--blue)}
.logs time{margin-left:auto;color:var(--faint,#9b9a97);font-size:.76rem}
.note{margin-top:22px;padding:14px 16px;background:linear-gradient(90deg,rgba(46,125,255,.08),rgba(24,224,200,.06));border:1px solid var(--border);border-radius:var(--radius);font-size:.88rem}

/* Article form */
.form-grid{display:grid;grid-template-columns:1fr 320px;gap:20px}
.col-main{display:grid;gap:14px}
.col-side{display:grid;gap:16px;align-content:start}
.side-box{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:var(--shadow);display:grid;gap:12px}
.side-box h3{font-size:.95rem}
.side-actions{display:grid;gap:8px}

/* ---------- Blog ---------- */
body.blog{background:var(--bg)}
.blog-top{max-width:1000px;margin:0 auto;padding:40px 20px 10px;text-align:center}
.blog-top h1{font-size:2.4rem}
.back{color:var(--blue);font-weight:600;font-size:.86rem}
.blog-search{display:flex;gap:8px;justify-content:center;margin-top:16px}
.blog-search input{max-width:320px}
.blog-wrap{max-width:1000px;margin:0 auto;padding:24px 20px 60px;display:grid;grid-template-columns:1fr 240px;gap:28px}
.post-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.post-card{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);transition:transform .25s,border-color .25s}
.post-card:hover{transform:translateY(-4px);border-color:var(--blue)}
.post-card__img{display:block;height:140px;background-size:cover;background-position:center}
.post-card__body{padding:16px}
.post-card__meta{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.post-card h2{font-size:1.15rem;margin-bottom:6px;line-height:1.3}
.post-card__foot{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.read-more{color:var(--blue);font-weight:600;font-size:.86rem}
.chip{font-size:.74rem;padding:3px 9px;border-radius:100px;background:rgba(46,125,255,.12);color:var(--blue);font-weight:600}
.chip--tag{background:var(--hover);color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.blog-side .side-box{margin-bottom:16px}

/* Article page */
.article{max-width:860px;margin:0 auto;padding:40px 20px 70px}
.article__head h1{font-size:2.3rem;line-height:1.15;margin:12px 0}
.article__meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:10px}
.article__lede{font-size:1.15rem;color:var(--muted);margin-bottom:16px}
.article__cover{width:100%;border-radius:var(--radius);margin:14px 0}
.article__layout{display:grid;grid-template-columns:200px 1fr;gap:30px;margin-top:20px}
.toc{position:sticky;top:20px;align-self:start;font-size:.86rem}
.toc b{display:block;margin-bottom:8px;font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.toc ul{list-style:none;display:grid;gap:6px}
.toc a{color:var(--muted)} .toc a:hover{color:var(--blue)}
.toc .lvl-3{padding-left:12px;font-size:.82rem}
.prose{font-size:1.02rem;line-height:1.75;color:#2c2a26}
.prose h2{font-size:1.5rem;margin:28px 0 12px}
.prose h3{font-size:1.2rem;margin:22px 0 10px}
.prose p{margin:14px 0}
.prose a{color:var(--blue);text-decoration:underline}
.prose ul,.prose ol{margin:12px 0 12px 22px}
.prose pre{background:#0e1320;color:#e6e8f0;padding:16px;border-radius:10px;overflow:auto;font-family:var(--mono);font-size:.85rem;margin:16px 0}
.prose code{font-family:var(--mono);font-size:.86em;background:var(--hover);padding:2px 6px;border-radius:5px}
.prose pre code{background:none;padding:0;color:inherit}
.prose blockquote{border-left:3px solid var(--blue);padding:6px 16px;color:var(--muted);margin:16px 0;background:var(--hover);border-radius:0 8px 8px 0}
.prose table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.9rem}
.prose th,.prose td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.prose img{max-width:100%;border-radius:8px}
.article__tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:24px}
.share{display:flex;gap:14px;align-items:center;margin-top:24px;padding-top:16px;border-top:1px solid var(--border);font-size:.88rem}
.share a{color:var(--blue);font-weight:600}
.related{margin-top:40px;border-top:1px solid var(--border);padding-top:24px}
.related h2{margin-bottom:16px}

/* ---- analytics ---- */
.head-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.mini-select{padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--panel);font-family:var(--font);font-size:.84rem;color:var(--text)}
.alerts-row{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.alert-chip{padding:8px 14px;border-radius:100px;border:1px solid var(--border);background:var(--panel);font-size:.84rem;font-weight:600}
.alert-chip.up{color:#1a7f37;border-color:#bcf0c9} .alert-chip.down{color:#b42318;border-color:#f5c2c2}
.charts{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:16px}
.charts .panel{min-width:0}
.chart-wide{grid-column:1 / -1}
.charts canvas{max-width:100%}
.kv{display:grid;gap:2px}
.kv li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px dashed var(--border);font-size:.88rem}
.kv li:last-child{border-bottom:0}
.kv span{color:var(--muted)} .kv b{text-align:right;max-width:62%;word-break:break-word}
.timeline{list-style:none;display:grid;gap:2px}
.timeline li{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:8px;font-size:.88rem}
.timeline li:hover{background:var(--hover)}
.timeline time{font-family:var(--mono);font-size:.76rem;color:var(--muted);min-width:64px}
.tl-kind{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:6px;min-width:74px;text-align:center}
.tl-pageview{background:rgba(46,125,255,.14);color:#2e7dff}
.tl-click{background:rgba(24,224,200,.16);color:#0aa183}
.tl-scroll{background:rgba(255,138,61,.16);color:#e06c25}
.tl-read{background:rgba(124,92,255,.14);color:#6a4dff}
.tl-label{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---- cookie consent (blog pages) ---- */
#cookie-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:560px;margin:0 auto;
  background:var(--panel);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow);
  padding:16px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap;animation:ccIn .5s cubic-bezier(.2,.8,.2,1)}
#cookie-consent p{font-size:.85rem;color:var(--muted);flex:1;min-width:200px;margin:0}
.cc-actions{display:flex;gap:8px;margin-left:auto}
.cc-btn{padding:8px 16px;border-radius:8px;border:1px solid transparent;font-weight:600;font-size:.84rem;cursor:pointer;font-family:var(--font)}
.cc-primary{background:var(--grad);color:#fff}
.cc-ghost{background:transparent;border-color:var(--border);color:var(--text)}
@keyframes ccIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media(max-width:860px){
  .layout{grid-template-columns:1fr}
  .side{position:static;height:auto;flex-direction:row;flex-wrap:wrap;align-items:center}
  .side__nav{display:flex;flex-wrap:wrap} .side__foot{margin:0 0 0 auto}
  .grid-2,.form-grid,.blog-wrap,.article__layout,.charts{grid-template-columns:1fr}
  .toc{position:static}
}