/* Vercel + Medium + Apple Newsroom inspired blog theme
   Drop-in replacement for your existing CSS. Keeps current class names. */

:root{
  --bg:#ffffff;
  --surface:#ffffff;
  --surface-soft:#fafafa;
  --surface-muted:#f5f5f7;

  --text:#111111;
  --text-soft:#2f3437;
  --muted:#6b7280;
  --muted-light:#9ca3af;

  --border:#e5e7eb;
  --border-soft:#f0f0f0;
  --border-strong:#d1d5db;

  --primary:#111111;
  --primary-hover:#000000;
  --link:#111111;
  --danger:#dc2626;

  --warning-bg:#fff7e6;
  --warning-border:#ffd591;
  --warning-text:#874d00;

  --radius-sm:8px;
  --video-radius:6px;
  --radius:12px;
  --radius-lg:18px;
  --radius-xl:28px;

  --container:1120px;
  --article:760px;
  --admin:1040px;

  --shadow-sm:0 1px 2px rgba(0,0,0,.04);
  --shadow:0 12px 40px rgba(0,0,0,.06);
  --shadow-lg:0 24px 80px rgba(0,0,0,.16);

  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,"Microsoft YaHei",Arial,sans-serif;
  --font-serif:Georgia,"Times New Roman","Songti SC",serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:16px;
  line-height:1.6;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--link);text-decoration:none;text-underline-offset:3px;transition:color .18s ease,opacity .18s ease,border-color .18s ease,background .18s ease,transform .18s ease}
a:hover{color:#000}
img,video{max-width:100%;display:block}
::selection{background:#111;color:#fff}

.wrap{
  width:min(var(--container),calc(100% - 40px));
  margin:0 auto;
  padding:32px 0;
}

/* Top navigation: Vercel-like translucent bar */
.top{
  position:sticky;
  top:0;
  z-index:100;
  background:rgba(255,255,255,.82);
  border-bottom:1px solid rgba(229,231,235,.8);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
}
.top .wrap{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:68px;
  padding:0;
}
.brand{
  color:#111!important;
  font-size:24px;
  line-height:1;
  font-weight:800;
  letter-spacing:-.045em;
}
.top a{color:#555;font-size:14px;font-weight:500;margin-left:22px}
.top a:hover{color:#111}

/* General surfaces */
.card{
  background:var(--surface);
  border:1px solid var(--border-soft);
  border-radius:var(--radius-lg);
  padding:28px;
  margin:20px 0;
  box-shadow:var(--shadow-sm);
}
.muted{color:var(--muted);font-size:14px}
.empty{padding:56px 0;color:var(--muted);font-size:17px}
.danger{color:var(--danger)}

/* Forms */
input,textarea,select{
  width:100%;
  padding:13px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:#fff;
  color:var(--text);
  font:inherit;
  outline:none;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
textarea{min-height:360px;font-family:var(--font-mono);line-height:1.7;resize:vertical}
input:focus,textarea:focus,select:focus{border-color:#111;box-shadow:0 0 0 4px rgba(17,17,17,.06)}

.row{display:flex;gap:14px;align-items:center}.row>*{flex:1}
.actions a{margin-right:12px}

.btn,.btn-new,button.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-height:42px;
  padding:10px 18px;
  border:1px solid #111;
  border-radius:999px;
  background:#111;
  color:#fff!important;
  font-size:14px;
  font-weight:650;
  line-height:1;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(0,0,0,.08);
  transition:transform .18s ease,background .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.btn:hover,.btn-new:hover,button.btn:hover{transform:translateY(-1px);background:#000;border-color:#000;box-shadow:0 10px 22px rgba(0,0,0,.12)}
.btn2{background:#f4f4f5!important;color:#111!important;border-color:#e4e4e7!important;box-shadow:none}
.btn2:hover{background:#ececef!important;border-color:#d4d4d8!important}

/* Blog listing: Vercel editorial cards */
.post-list{max-width:var(--container);margin:0 auto}
.post-item{
  display:grid;
  grid-template-columns:minmax(260px,420px) 1fr;
  gap:44px;
  align-items:center;
  padding:72px 0;
  border-bottom:1px solid var(--border-soft);
}
.post-cover{display:block;margin:0;overflow:hidden;border-radius:var(--radius-xl);background:var(--surface-muted)}
.post-cover img{width:100%;aspect-ratio:16/10;object-fit:cover;background:var(--surface-muted);transition:transform .45s ease,filter .45s ease}
.post-cover:hover img{transform:scale(1.025);filter:saturate(1.04)}
.post-title{margin:0 0 14px;font-size:clamp(22px,3vw,34px);line-height:1.18;font-weight:760;letter-spacing:-.035em;text-wrap:balance;overflow-wrap:anywhere}
.post-title a{color:#111}.post-title a:hover{opacity:.72}
.post-date{margin-bottom:18px;color:var(--muted);font-size:14px;font-weight:500;letter-spacing:.01em}
.post-summary{max-width:720px;color:#4b5563;font-size:18px;line-height:1.85}

/* Article page: Medium readability + Apple headline scale */
.article-flat,.article{
  max-width:var(--article);
  margin:0 auto;
  padding:72px 0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.article-flat h1,.article h1{
  margin:0 0 18px;
  font-size:clamp(30px,4.8vw,46px);
  line-height:1.12;
  font-weight:780;
  letter-spacing:-.045em;
  text-wrap:balance;
  overflow-wrap:anywhere;
}
.article-flat .muted,.article .muted{margin-bottom:42px;font-size:15px;color:var(--muted)}
.article-content{
  color:#242424;
  font-size:20px;
  line-height:1.9;
  letter-spacing:-.006em;
}
.article-content p{margin:0 0 1.35em}
.article-content h2{margin:2em 0 .65em;font-size:32px;line-height:1.16;letter-spacing:-.04em}
.article-content h3{margin:1.8em 0 .55em;font-size:24px;line-height:1.25;letter-spacing:-.03em}
.article-content a{text-decoration:underline;text-decoration-thickness:1px}
.article-content blockquote{margin:2em 0;padding:0 0 0 24px;border-left:3px solid #111;color:#333;font-family:var(--font-serif);font-size:24px;line-height:1.55}
.article-content ul,.article-content ol{padding-left:1.35em;margin:0 0 1.35em}
.article-content li{margin:.45em 0}
.article-content code{font-family:var(--font-mono);font-size:.88em;background:#f5f5f5;border:1px solid #eee;border-radius:6px;padding:.15em .35em}
.article-content pre{overflow:auto;background:#0a0a0a;color:#fafafa;border-radius:var(--radius-lg);padding:20px;font-family:var(--font-mono);font-size:14px;line-height:1.7}
.article img,.article-content img{width:100%;height:auto;margin:36px 0;border-radius:var(--radius-lg);background:var(--surface-muted)}
.blog-video{margin:40px 0}.blog-video video,.blog-video-box video{width:100%;max-height:70vh;background:#000;border-radius:var(--video-radius)}
.article video,.article-content video{max-width:100%;border-radius:var(--video-radius)}

/* Admin list */
.admin-list{max-width:var(--admin);margin:0 auto}
.admin-header{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;padding:48px 0 28px;border-bottom:1px solid var(--border-soft)}
.admin-header h1{margin:0;font-size:clamp(30px,4.8vw,44px);line-height:1.12;font-weight:780;letter-spacing:-.045em;overflow-wrap:anywhere}
.post-row{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center;padding:30px 0;border-bottom:1px solid var(--border-soft)}
.post-main h2{margin:0 0 8px;font-size:24px;line-height:1.25;font-weight:720;letter-spacing:-.035em}.post-main h2 a{color:#111}.post-main h2 a:hover{opacity:.7}
.post-meta{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:14px}.post-meta::first-letter{text-transform:uppercase}
.post-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.post-actions a{padding:8px 13px;border:1px solid var(--border);border-radius:999px;color:#333;background:#fff;font-size:14px;font-weight:560}.post-actions a:hover{border-color:#111;color:#111;transform:translateY(-1px)}
.delete-link{color:var(--danger)!important}.delete-link:hover{border-color:var(--danger)!important;color:var(--danger)!important}

/* Editor page: Notion-like writing surface */
.editor-page{max-width:980px;margin:0 auto;padding:56px 0}
.editor-page input,.editor-page textarea,.editor-page select{border:0;border-bottom:1px solid var(--border);border-radius:0;background:transparent;padding:15px 0;box-shadow:none}
.editor-page input:focus,.editor-page textarea:focus,.editor-page select:focus{border-color:#111;box-shadow:none}
.editor-page input[name="title"]{font-size:clamp(24px,3.8vw,36px);line-height:1.18;font-weight:760;letter-spacing:-.035em;padding:18px 0;color:#111}
.editor-page input[name="slug"]{font-size:18px;color:#666}
.editor-page textarea{border:1px solid var(--border);border-radius:var(--radius-lg);background:#fff;padding:18px;min-height:420px}
.editor-toolbar{border:1px solid var(--border);border-bottom:0;border-radius:var(--radius-lg) var(--radius-lg) 0 0;background:#fafafa;overflow:hidden}
.editor-box{height:650px;border:1px solid var(--border);border-radius:0 0 var(--radius-lg) var(--radius-lg);background:#fff;overflow:auto}
.editor-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:28px 0;padding:0}.editor-actions .btn{border-radius:999px}.editor-page button.btn{margin-top:24px;padding:12px 22px}

/* Modal / media picker */
.modal-mask{position:fixed;inset:0;z-index:999;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.modal-card{width:min(920px,96vw);max-height:88vh;overflow:auto;border-radius:var(--radius-xl);background:#fff;padding:22px;box-shadow:var(--shadow-lg)}
.modal-head{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px}.modal-head h2,.modal-head h3{margin:0;letter-spacing:-.04em}
.image-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:12px}.image-item{border:1px solid var(--border);background:#fff;border-radius:var(--radius);padding:6px;cursor:pointer;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.image-item:hover{transform:translateY(-2px);border-color:#111;box-shadow:var(--shadow)}.image-item img{width:100%;height:96px;object-fit:cover;border-radius:9px}
.progress{height:8px;background:#eee;border-radius:99px;overflow:hidden}.progress>div{height:100%;width:0;background:#111;border-radius:99px}
.video-processing{padding:16px 18px;background:var(--warning-bg);border:1px solid var(--warning-border);border-radius:var(--radius);color:var(--warning-text);margin:18px 0}

@media(max-width:860px){
  .post-item{grid-template-columns:1fr;gap:24px;padding:52px 0}.post-cover img{aspect-ratio:16/9}.article-flat,.article{padding:56px 0}.article-content{font-size:18px;line-height:1.85}.admin-header{align-items:flex-start;flex-direction:column}.post-row{grid-template-columns:1fr}.post-actions{justify-content:flex-start}
}
@media(max-width:640px){
  .wrap{width:min(100% - 28px,var(--container));padding:24px 0}.top .wrap{min-height:60px}.brand{font-size:21px}.top a{margin-left:14px;font-size:13px}.card{padding:20px;border-radius:16px}.row{flex-direction:column;align-items:stretch}.post-title{letter-spacing:-.045em}.article-flat h1,.article h1{letter-spacing:-.055em}.article-content{font-size:17px}.admin-header{padding-top:34px}.editor-page{padding:36px 0}.editor-box{height:560px}.modal-card{padding:18px;border-radius:20px}
}

/* Editor popup/dropdown fix
   Prevent toolbar dropdowns, color pickers, link panels, image modals, etc. from being clipped or hidden. */
.editor-page,
.editor-page .wrap,
.editor-toolbar,
.editor-actions{
  position:relative;
  overflow:visible !important;
}

.editor-toolbar{
  z-index:300;
}

.editor-actions{
  z-index:320;
}

.editor-box{
  position:relative;
  z-index:1;
}

/* Common editor popover/dropdown selectors */
.editor-toolbar .ql-picker-options,
.editor-toolbar .ql-tooltip,
.editor-toolbar .ql-expanded .ql-picker-options,
.editor-toolbar [role="menu"],
.editor-toolbar .dropdown,
.editor-toolbar .popover,
.editor-actions .dropdown,
.editor-actions .popover{
  z-index:1000 !important;
}

/* Modals should always sit above sticky nav and editor */
.modal-mask{
  z-index:9999 !important;
}

.modal-card{
  position:relative;
  z-index:10000;
}