:root{
  --bg:#fffdfc;
  --surface:#fffdfc;
  --soft:#f9f9fb;
  --soft2:#f5f3f2;
  --text:#0e2045;
  --muted:rgba(14,32,69,.75);
  --line:#e4e3e1;
  --accent:#3740ff;
  --button:#3740ff;
  --buttonText:#fffdfc;

  --header:65px;
  --sideCollapse:75px;
  --sideExpand:230px;
  --rightbar:280px;
  --contentMax:1300px;
  --postMax:780px;
  --contentPad:22px;
  --contentGap:40px;

  --font:'Noto Sans',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --fontAlt:'Fira Sans','Noto Sans',sans-serif;
  --fontCode:'Fira Mono',monospace;
}

html[data-theme="dark"]{
  --bg:#22262d;
  --surface:#22262d;
  --soft:#2d3138;
  --soft2:#161c24;
  --text:#d9e2f0;
  --muted:rgba(217,226,240,.70);
  --line:#35393f;
  --accent:#8775f5;
  --button:#8775f5;
  --buttonText:#22262d;
}

html[data-width="narrow"]{--contentMax:1120px;--rightbar:260px}
html[data-width="normal"]{--contentMax:1300px;--rightbar:280px}
html[data-width="wide"]{--contentMax:1500px;--rightbar:300px}
html[data-rightbar="hide"]{--rightbar:0px}

*{box-sizing:border-box}
html{font-size:14px;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  font-size:14px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,textarea{font-family:inherit}
svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round}

.ml-progress{
  position:fixed;top:0;left:0;z-index:999;
  height:2px;width:0;background:var(--accent);
}

/* Header */
.ml-header{
  position:sticky;top:0;z-index:100;
  height:var(--header);
  display:grid;
  grid-template-columns:45px 190px minmax(220px,1fr) auto;
  align-items:center;
  gap:15px;
  padding:0 22px 0 15px;
  background:var(--surface);
  border-bottom:1px solid var(--line);
}

.ml-menu,.ml-circle,.ml-bookmark{
  border:0;background:transparent;color:var(--text);cursor:pointer;
  width:35px;height:35px;display:grid;place-items:center;
}
.ml-menu svg,.ml-circle svg,.ml-bookmark svg{width:24px;height:24px}

.ml-brand{display:flex;align-items:center;gap:10px;min-width:0}
.ml-brand img{width:34px;height:34px}
.ml-brand span{font-size:1.143em;font-weight:500;color:var(--text);white-space:nowrap}

.ml-search-trigger{
  border:0;background:transparent;color:var(--muted);
  display:flex;align-items:center;gap:14px;justify-self:start;
  min-width:320px;height:42px;font-size:1rem;cursor:pointer;
}
.ml-search-trigger:hover{color:var(--text)}

.ml-actions{display:flex;align-items:center;gap:10px}
.ml-bookmark{position:relative}
.ml-bookmark sup{position:absolute;top:0;right:0;color:var(--accent);font-size:10px}

/* Sidebar */
.ml-sidebar{
  position:fixed;left:0;top:var(--header);bottom:0;z-index:80;
  width:var(--sideCollapse);
  background:var(--surface);
  border-right:1px solid var(--line);
  overflow:hidden;
  transition:width .18s ease, transform .18s ease;
}

html[data-side="expanded"] .ml-sidebar{width:var(--sideExpand)}

.ml-side-nav{
  width:100%;
  display:flex;
  flex-direction:column;
  gap:4px;
  padding:15px 12px 80px;
}

.ml-side-nav a,
.ml-side-details summary{
  min-height:42px;width:100%;
  display:flex;align-items:center;gap:14px;
  padding:0 8px;
  color:var(--text);
  opacity:.85;
  border-radius:4px;
  cursor:pointer;
  white-space:nowrap;
  background:transparent;
}

.ml-side-nav a:hover,
.ml-side-nav a.active,
.ml-side-details summary:hover{
  color:var(--accent);
  opacity:1;
}

.ml-side-nav svg,
.ml-side-details summary svg{
  width:20px;height:20px;min-width:20px;
}

.ml-side-nav span,
.ml-side-nav em,
.ml-side-details span,
.ml-side-details b{
  opacity:0;visibility:hidden;transform:translateX(-6px);
  transition:.15s ease;
}

html[data-side="expanded"] .ml-side-nav span,
html[data-side="expanded"] .ml-side-nav em,
html[data-side="expanded"] .ml-side-details span,
html[data-side="expanded"] .ml-side-details b{
  opacity:1;visibility:visible;transform:none;
}

.ml-side-nav em,
.ml-side-details b{
  margin-left:auto;
  font-style:normal;
  color:var(--muted);
  font-size:14px;
}

.ml-side-nav strong{color:var(--accent);font-weight:400}
.ml-side-nav hr{width:100%;border:0;border-top:1px solid var(--line);margin:12px 0}

.ml-side-details summary{list-style:none}
.ml-side-details summary::-webkit-details-marker{display:none}
.ml-side-details div{display:none;padding:4px 0 8px 42px}
html[data-side="expanded"] .ml-side-details[open] div{display:grid;gap:4px}
.ml-side-details div a{
  min-height:28px!important;
  width:auto!important;
  padding:0!important;
  color:var(--muted)!important;
  font-size:13px!important;
}
.ml-side-details div a:hover{color:var(--accent)!important}

/* Main layout */
.ml-main{
  padding-left:var(--sideCollapse);
  transition:padding-left .18s ease;
}
html[data-side="expanded"] .ml-main{padding-left:var(--sideExpand)}

.ml-layout{
  max-width:var(--contentMax);
  margin:0 auto;
  padding:22px var(--contentPad) 70px;
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--rightbar);
  gap:var(--contentGap);
}
html[data-rightbar="hide"] .ml-layout{grid-template-columns:minmax(0,1fr)}
html[data-rightbar="hide"] .ml-rightbar{display:none}

.ml-content{min-width:0}
.ml-ad{
  height:70px;
  border:1px solid var(--line);
  background:var(--surface);
  display:grid;
  place-items:center;
  color:var(--muted);
  margin-bottom:40px;
}

/* Post/sample */
.ml-sample-post,
.ml-article{
  max-width:var(--postMax);
}

.ml-breadcrumb{
  display:flex;align-items:center;gap:10px;
  color:var(--muted);
  font-size:1rem;
  margin-bottom:25px;
}
.ml-breadcrumb a:hover{color:var(--accent)}

.ml-sample-head{
  display:grid;
  grid-template-columns:minmax(0,1fr) 100px;
  align-items:end;
  gap:20px;
  margin-bottom:40px;
}
.ml-sample-head h1,
.ml-title,
.ml-feature-copy h1,
.ml-article-head h1{
  margin:0;
  color:var(--text);
  font-family:var(--fontAlt);
  font-size:2.6rem;
  font-weight:400;
  line-height:1.3;
  letter-spacing:0;
}

.ml-sample-actions,
.ml-share-row{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
}
.ml-sample-actions button,
.ml-share-row button{
  border:0;background:transparent;color:var(--muted);
  display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;
  font-size:.93rem;
}
.ml-sample-actions button:hover,
.ml-share-row button:hover{color:var(--accent)}
.ml-sample-actions svg,.ml-share-row svg{width:20px;height:20px}

.ml-sample-cover,
.ml-card-img{
  background:var(--soft);
  overflow:hidden;
  border-radius:2px;
}
.ml-sample-cover img,
.ml-card-img img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:2px;
}
.ml-placeholder-cover{
  height:380px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
}
.ml-placeholder-cover div{text-align:center}
.ml-placeholder-cover strong{display:block;color:var(--accent);font-size:42px;font-weight:700}
.ml-placeholder-cover span{color:var(--muted)}

.ml-article-meta,.ml-meta{
  display:flex;flex-wrap:wrap;gap:10px;
  color:var(--muted);
  font-size:.93rem;
  margin:18px 0;
}

.ml-prose{
  color:var(--text);
  font-family:var(--font);
  font-size:1.143rem;
  line-height:1.7;
}
.ml-prose p{margin:0 0 1.8em}
.ml-home-excerpt p{color:var(--muted)}

.ml-read{
  display:inline-flex;
  align-items:center;
  margin-top:8px;
  padding:.75rem 1rem;
  border-radius:4px;
  background:var(--button);
  color:var(--buttonText);
  line-height:1.5;
}

/* Rightbar */
.ml-rightbar{
  position:sticky;
  top:calc(var(--header) + 10px);
  align-self:start;
  width:var(--rightbar);
  display:grid;
  gap:40px;
}

.ml-widget-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
}
.ml-widget-title h3{
  margin:0;
  color:var(--text);
  font-size:1.072rem;
  font-weight:400;
}
.ml-widget-title i{
  width:10px;
  height:1px;
  background:var(--line);
}

.ml-popular{display:grid;gap:25px}
.ml-popular-item>img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:2px;
  margin-bottom:15px;
}
.ml-popular-text{
  display:grid;
  grid-template-columns:36px 1fr;
  gap:10px;
}
.ml-popular-text em{
  color:var(--muted);
  font-size:1.6rem;
  font-style:normal;
  font-weight:700;
  line-height:1;
}
.ml-popular-text small{
  color:var(--muted);
  font-size:.86rem;
}
.ml-popular-text strong{
  display:block;
  color:var(--text);
  font-family:var(--fontAlt);
  font-size:1.15rem;
  line-height:1.35;
  font-weight:400;
  margin:.55em 0;
}
.ml-popular-text p{
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
  margin:0;
}

/* Sections and cards */
.ml-section{margin-top:40px}
.ml-section-title{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:20px;
}
.ml-section-title h2{
  margin:0;
  color:var(--text);
  font-size:1.072rem;
  font-weight:400;
}
.ml-section-title a{color:var(--muted);font-size:.93rem}
.ml-section-title a:hover{color:var(--accent)}

.ml-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:22px;
}
.ml-grid.listing{grid-template-columns:repeat(2,1fr)}

.ml-card{
  background:transparent;
  border:0;
  border-radius:0;
}
.ml-card-body{padding:12px 0 0}
.ml-card-body span{
  color:var(--muted);
  font-size:.86rem;
}
.ml-card-body h3{
  margin:.5em 0;
  color:var(--text);
  font-family:var(--fontAlt);
  font-size:1.2em;
  line-height:1.3;
  font-weight:400;
}
.ml-card-body p{
  color:var(--muted);
  font-size:1rem;
  line-height:1.5;
  margin:0;
}

/* Pages */
.ml-page-intro{max-width:var(--postMax)}
.ml-title{margin-bottom:12px}
.ml-subtitle{
  color:var(--muted);
  font-size:1.13rem;
  line-height:1.4;
  margin:0;
}

.ml-inline-search{
  display:flex;
  gap:10px;
  margin-top:24px;
  max-width:550px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:8px;
}
.ml-inline-search input{
  flex:1;
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  color:var(--text);
}
.ml-inline-search button{
  border:0;
  border-radius:4px;
  background:var(--button);
  color:var(--buttonText);
  padding:0 15px;
  cursor:pointer;
}

.ml-filter,.ml-labels{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.ml-filter{margin:24px 0 28px}
.ml-filter a,.ml-labels a{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border:1px solid var(--line);
  border-radius:20px;
  color:var(--muted);
}
.ml-filter a:hover,.ml-filter a.active,.ml-labels a:hover{
  color:var(--accent);
  border-color:var(--accent);
}

/* Article */
.ml-article-head{margin-bottom:30px}
.ml-share-row{margin-top:25px}
.ml-article-cover{
  width:100%;
  border-radius:2px;
  margin:34px 0 22px;
}

/* Components from post snippets */
.hidden{display:none!important}
.tbHd{
  display:flex;
  gap:8px;
  border-bottom:1px solid var(--line);
  margin:25px 0 15px;
  overflow:auto;
}
.tbHd label{
  padding:10px 14px;
  color:var(--muted);
  border-radius:4px 4px 0 0;
  cursor:pointer;
  white-space:nowrap;
}
.tbHd label:before{content:attr(data-text)}
.tbIn:nth-of-type(1):checked ~ .tbHd label:nth-child(1),
.tbIn:nth-of-type(2):checked ~ .tbHd label:nth-child(2),
.tbIn:nth-of-type(3):checked ~ .tbHd label:nth-child(3),
.tbIn:nth-of-type(4):checked ~ .tbHd label:nth-child(4){
  color:var(--accent);
  background:var(--soft);
}
.tbCn>div{display:none}
#fTabs-1:checked ~ .tbCn .tbText-1,
#fTabs-2:checked ~ .tbCn .tbText-2,
#fTabs-3:checked ~ .tbCn .tbText-3,
#fTabs-4:checked ~ .tbCn .tbText-4{display:block}

.blogPg{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:25px 0;
}
.blogPg a,.blogPg span{
  min-width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--muted);
}
.blogPg .current{
  color:var(--accent);
  border-color:var(--accent);
}

/* Publication/About/Contact */
.ml-publication-list,.ml-about-box,.ml-contact-box{max-width:var(--postMax)}
.ml-publication-list{display:grid;gap:16px}
.ml-publication{
  display:grid;
  grid-template-columns:72px 1fr;
  gap:18px;
  padding:18px;
  border:1px solid var(--line);
  border-radius:4px;
}
.ml-pub-year{
  width:58px;height:58px;display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--muted);
}
.ml-publication span{color:var(--muted)}
.ml-publication h3{
  margin:.4em 0;
  font-family:var(--fontAlt);
  font-size:1.25rem;
  font-weight:400;
}
.ml-publication p{color:var(--muted);margin:0;line-height:1.6}
.ml-pub-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ml-pub-actions a{
  padding:8px 12px;
  border:1px solid var(--line);
  border-radius:4px;
  color:var(--muted);
}
.ml-pub-actions a:hover{color:var(--accent);border-color:var(--accent)}

.ml-about-box,.ml-contact-box{
  border:1px solid var(--line);
  border-radius:4px;
  padding:22px;
}
.ml-about-box h2,.ml-about-grid h3{
  font-family:var(--fontAlt);
  font-weight:400;
  margin:0 0 12px;
}
.ml-about-box p,.ml-about-grid p{color:var(--muted);line-height:1.65}
.ml-about-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}
.ml-about-grid div{
  border:1px solid var(--line);
  border-radius:4px;
  padding:16px;
}

.ml-contact-form{display:grid;gap:10px}
.ml-contact-form label{color:var(--text)}
.ml-contact-form input,.ml-contact-form textarea{
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px;
  background:transparent;
  color:var(--text);
  outline:0;
}
.ml-contact-form button{
  width:max-content;
  border:0;
  border-radius:4px;
  background:var(--button);
  color:var(--buttonText);
  padding:12px 16px;
  cursor:pointer;
}
.ml-alert{padding:12px;border-radius:4px;margin-bottom:15px}
.ml-alert.success{background:#ecfdf3;color:#067647}
.ml-alert.error{background:#fef3f2;color:#b42318}

/* Sitemap */
.ml-sitemap{
  max-width:var(--postMax);
  display:grid;
  grid-template-columns:150px 1fr;
  gap:20px;
  border:1px solid var(--line);
  border-radius:4px;
  padding:18px;
}
.ml-sitemap nav{display:grid;align-content:start}
.ml-sitemap nav button{
  border:0;background:transparent;text-align:left;
  color:var(--muted);padding:10px;border-radius:4px;cursor:pointer;
}
.ml-sitemap nav button.active{color:var(--accent);background:var(--soft)}
.ml-sitemap-panel{display:none;margin:0;padding-left:20px}
.ml-sitemap-panel.active{display:block}
.ml-sitemap-panel li{padding:8px 0}
.ml-sitemap-panel time{display:block;color:var(--muted);font-size:.86rem}

/* Search */
.ml-search-modal{
  position:fixed;inset:0;z-index:200;
  display:none;place-items:start center;
  padding:90px 20px;
  background:rgba(14,32,69,.35);
  backdrop-filter:blur(10px);
}
.ml-search-modal.open{display:grid}
.ml-search-card{
  width:min(550px,100%);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:24px;
  position:relative;
}
.ml-search-card>button{
  position:absolute;right:14px;top:10px;
  border:0;background:transparent;color:var(--muted);
  font-size:28px;cursor:pointer;
}
.ml-search-card h2{
  margin:0 0 8px;
  font-family:var(--fontAlt);
  font-weight:400;
}
.ml-search-card p{color:var(--muted)}
.ml-search-card form{display:flex;gap:10px}
.ml-search-card input{
  flex:1;
  border:1px solid var(--line);
  border-radius:4px;
  padding:12px;
  background:transparent;
  color:var(--text);
}
.ml-search-card button[type=submit]{
  border:0;border-radius:4px;background:var(--button);color:var(--buttonText);
  padding:0 15px;
}

/* Layout lab panel */
.ml-floating-setting{
  position:fixed;
  right:22px;
  bottom:22px;
  z-index:180;
  width:280px;
  display:none;
  background:var(--surface);
  color:var(--text);
  border:1px solid var(--line);
  border-radius:10px;
  padding:18px;
}
.ml-floating-setting.open{display:block}
.ml-floating-setting>button{
  position:absolute;right:12px;top:8px;
  border:0;background:transparent;color:var(--muted);
  font-size:24px;cursor:pointer;
}
.ml-floating-setting h3{margin:0 0 6px;font-weight:400}
.ml-floating-setting p{color:var(--muted);margin:0 0 14px}
.ml-floating-setting label{
  display:block;
  color:var(--muted);
  margin:14px 0 8px;
}
.ml-segment{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line);
  border-radius:4px;
  overflow:hidden;
}
.ml-segment button{
  border:0;background:transparent;color:var(--muted);
  padding:9px 5px;cursor:pointer;
}
.ml-segment button:hover{background:var(--soft);color:var(--accent)}

/* Mobile */
.ml-bottom{display:none}

@media(max-width:1100px){
  .ml-layout,.ml-layout.article{grid-template-columns:1fr}
  .ml-rightbar{position:static;width:auto}
  .ml-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  .ml-header{
    grid-template-columns:40px 1fr auto;
    padding:0 15px;
  }
  .ml-search-trigger{display:none}
  .ml-bookmark{display:none}
  .ml-main,html[data-side="expanded"] .ml-main{padding-left:0}
  .ml-sidebar{
    transform:translateX(-100%);
    top:var(--header);
    width:var(--sideCollapse)!important;
  }
  .ml-sidebar.open{transform:translateX(0)}
  html[data-side="expanded"] .ml-sidebar{width:var(--sideCollapse)!important}
  html[data-side="expanded"] .ml-side-nav span,
  html[data-side="expanded"] .ml-side-nav em,
  html[data-side="expanded"] .ml-side-details span,
  html[data-side="expanded"] .ml-side-details b{
    opacity:0;visibility:hidden;
  }

  .ml-layout{
    padding:15px 15px 80px;
    grid-template-columns:1fr;
    gap:30px;
  }
  .ml-ad{margin-bottom:30px}
  .ml-sample-post,.ml-article,.ml-page-intro{max-width:none}
  .ml-sample-head{
    grid-template-columns:1fr;
    gap:15px;
    margin-bottom:25px;
  }
  .ml-sample-head h1,
  .ml-title,
  .ml-article-head h1{
    font-size:2rem;
  }
  .ml-grid,.ml-grid.listing,.ml-about-grid{grid-template-columns:1fr}
  .ml-sitemap{grid-template-columns:1fr}
  .ml-publication{grid-template-columns:1fr}
  .ml-floating-setting{
    left:12px;right:12px;bottom:84px;width:auto;
  }

  .ml-bottom{
    position:fixed;
    left:12px;right:12px;bottom:12px;
    z-index:120;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:4px;
    padding:8px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
  }
  .ml-bottom a,.ml-bottom button{
    border:0;background:transparent;color:var(--muted);
    display:grid;place-items:center;gap:3px;font-size:11px;
  }
  .ml-bottom svg{width:21px;height:21px}
}

/* =========================================================
   HEADER ACTION ICON IMPROVEMENT
   ========================================================= */

.ml-actions{
  display:flex;
  align-items:center;
  gap:10px;
}

.ml-action-btn{
  position:relative;
  isolation:isolate;
}

.ml-circle,
.ml-bookmark{
  width:40px;
  height:40px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
  color:var(--text);
  display:grid;
  place-items:center;
  transition:
    background .18s ease,
    border-color .18s ease,
    transform .18s ease,
    color .18s ease,
    box-shadow .18s ease;
}

.ml-circle svg,
.ml-bookmark svg{
  width:23px;
  height:23px;
  stroke-width:1.45;
  transition:transform .18s ease;
}

.ml-circle:hover,
.ml-bookmark:hover{
  background:var(--soft);
  border-color:var(--line);
  color:var(--accent);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(0,0,0,.06);
}

html[data-theme="dark"] .ml-circle:hover,
html[data-theme="dark"] .ml-bookmark:hover{
  box-shadow:0 6px 18px rgba(0,0,0,.22);
}

.ml-circle:hover svg,
.ml-bookmark:hover svg{
  transform:scale(1.04);
}

.ml-circle:focus-visible,
.ml-bookmark:focus-visible{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(55,64,255,.14);
}

.ml-bookmark{
  text-decoration:none;
}

.ml-bookmark sup{
  position:absolute;
  top:-1px;
  right:-1px;
  min-width:16px;
  height:16px;
  padding:0 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--surface);
  color:var(--accent);
  font-size:10px;
  line-height:1;
  border:1px solid var(--line);
  font-weight:600;
}

/* Tooltip hover */
.ml-action-btn[data-tip]::after{
  content:attr(data-tip);
  position:absolute;
  left:50%;
  top:calc(100% + 10px);
  transform:translateX(-50%) translateY(-4px);
  white-space:nowrap;
  background:var(--text);
  color:var(--bg);
  padding:7px 10px;
  border-radius:8px;
  font-size:12px;
  line-height:1.2;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:30;
  box-shadow:0 10px 24px rgba(0,0,0,.14);
}

.ml-action-btn[data-tip]::before{
  content:"";
  position:absolute;
  left:50%;
  top:calc(100% + 4px);
  transform:translateX(-50%) translateY(-4px);
  width:8px;
  height:8px;
  background:var(--text);
  rotate:45deg;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:29;
}

.ml-action-btn:hover::after,
.ml-action-btn:hover::before,
.ml-action-btn:focus-visible::after,
.ml-action-btn:focus-visible::before{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

@media(max-width:760px){
  .ml-actions{
    gap:8px;
  }

  .ml-circle,
  .ml-bookmark{
    width:38px;
    height:38px;
    border-radius:10px;
  }

  .ml-action-btn[data-tip]::after,
  .ml-action-btn[data-tip]::before{
    display:none;
  }
}

/* =========================================================
   END HEADER ACTION ICON IMPROVEMENT
   ========================================================= */

/* =========================================================
   PUBLIC MEDIA/PUBLICATION SUPPORT
   ========================================================= */

.ml-page-head{
  margin:18px 0 24px;
}

.ml-page-head > span{
  color:var(--accent);
  font-size:12px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.ml-grid-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
}

.ml-card-cover{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  border-radius:16px;
  background:var(--soft);
  margin-bottom:14px;
}

.ml-card-cover img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.ml-card-body{
  display:grid;
  gap:8px;
}

.ml-location{
  margin:0;
  font-weight:700;
  color:var(--text);
}

.ml-pub-list{
  display:grid;
  gap:14px;
}

.ml-pub-card{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:18px;
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--surface);
}

.ml-pub-card h2{
  margin:8px 0;
  font-size:1.35rem;
  line-height:1.25;
  font-weight:500;
  letter-spacing:-.03em;
}

.ml-pub-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65;
}

.ml-pub-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

@media(max-width:860px){
  .ml-grid-list{
    grid-template-columns:1fr;
  }

  .ml-pub-card{
    grid-template-columns:1fr;
  }

  .ml-pub-actions{
    justify-content:flex-start;
  }
}

/* =========================================================
   END PUBLIC MEDIA/PUBLICATION SUPPORT
   ========================================================= */

/* =========================================================
   PUBLIC CONTACT PAGE TO ADMIN INBOX
   ========================================================= */

.mh-contact-page{
  display:grid;
  gap:24px;
}

.mh-contact-hero{
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:22px;
  align-items:stretch;
  padding:30px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:30px;
  background:
    radial-gradient(circle at 14% 12%, rgba(14,32,69,.08), transparent 34%),
    radial-gradient(circle at 88% 18%, rgba(0,0,0,.05), transparent 30%),
    var(--surface, #fffdfc);
}

.mh-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:999px;
  color:var(--muted, #6b7280);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
}

.mh-contact-hero h1{
  margin:14px 0 10px;
  color:var(--text, #0e2045);
  font-size:clamp(38px,5vw,64px);
  line-height:1;
  letter-spacing:-.06em;
  font-weight:600;
}

.mh-contact-hero p{
  max-width:720px;
  margin:0;
  color:var(--muted, #6b7280);
  line-height:1.75;
  font-size:15px;
}

.mh-contact-card{
  display:grid;
  align-content:center;
  gap:6px;
  padding:22px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:24px;
  background:rgba(255,255,255,.66);
}

.mh-contact-card span,
.mh-contact-info-list span{
  color:var(--muted, #6b7280);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mh-contact-card strong,
.mh-contact-info-list strong{
  color:var(--text, #0e2045);
  font-size:15px;
  word-break:break-word;
}

.mh-contact-layout{
  display:grid;
  grid-template-columns:360px minmax(0,1fr);
  gap:22px;
  align-items:start;
}

.mh-contact-info,
.mh-contact-form-card{
  padding:24px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:26px;
  background:var(--surface, #fffdfc);
}

.mh-contact-info h2,
.mh-contact-form-card h2{
  margin:0 0 10px;
  color:var(--text, #0e2045);
  font-size:28px;
  line-height:1.1;
  letter-spacing:-.04em;
}

.mh-contact-info p{
  margin:0;
  color:var(--muted, #6b7280);
  line-height:1.75;
}

.mh-contact-info-list{
  display:grid;
  gap:12px;
  margin-top:20px;
}

.mh-contact-info-list div{
  display:grid;
  gap:4px;
  padding:14px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:18px;
  background:var(--soft, #f7f5f2);
}

.mh-contact-form{
  display:grid;
  gap:14px;
  margin-top:18px;
}

.mh-form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:14px;
}

.mh-form-row{
  display:grid;
  gap:7px;
}

.mh-form-row label{
  color:var(--text, #0e2045);
  font-size:13px;
  font-weight:900;
}

.mh-form-row input,
.mh-form-row textarea{
  width:100%;
  border:1px solid var(--line, #e4e3e1);
  border-radius:16px;
  background:var(--surface, #fffdfc);
  color:var(--text, #0e2045);
  padding:13px 14px;
  font:inherit;
  outline:none;
}

.mh-form-row textarea{
  resize:vertical;
  min-height:180px;
  line-height:1.7;
}

.mh-form-row input:focus,
.mh-form-row textarea:focus{
  border-color:var(--text, #0e2045);
  box-shadow:0 0 0 4px rgba(14,32,69,.08);
}

.mh-form-row small{
  color:var(--muted, #6b7280);
  font-size:12px;
}

.mh-contact-submit{
  min-height:48px;
  border:0;
  border-radius:16px;
  background:var(--text, #0e2045);
  color:#fff;
  font-weight:900;
  cursor:pointer;
}

.mh-contact-submit:hover{
  transform:translateY(-1px);
}

.mh-contact-alert{
  padding:13px 14px;
  border-radius:16px;
  margin-top:14px;
  font-weight:800;
  line-height:1.6;
}

.mh-contact-alert.success{
  color:#067647;
  background:rgba(6,118,71,.09);
  border:1px solid rgba(6,118,71,.18);
}

.mh-contact-alert.error{
  color:#b42318;
  background:rgba(180,35,24,.09);
  border:1px solid rgba(180,35,24,.18);
}

.mh-hp-field{
  position:absolute!important;
  left:-9999px!important;
  width:1px!important;
  height:1px!important;
  overflow:hidden!important;
}

@media(max-width:980px){
  .mh-contact-hero,
  .mh-contact-layout{
    grid-template-columns:1fr;
  }
}

@media(max-width:640px){
  .mh-contact-hero,
  .mh-contact-info,
  .mh-contact-form-card{
    padding:18px;
    border-radius:22px;
  }

  .mh-form-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   END PUBLIC CONTACT PAGE TO ADMIN INBOX
   ========================================================= */

/* =========================================================
   ARTICLE CONTENT RENDER FIX
   Enter dari textarea admin tampil sebagai paragraf/br.
   ========================================================= */

.mh-article-rendered{
  display:block;
  color:var(--text, #0e2045);
  font-size:17px;
  line-height:1.88;
}

.mh-article-rendered p{
  margin:0 0 1.25em;
}

.mh-article-rendered h2,
.mh-article-rendered h3,
.mh-article-rendered h4{
  margin:1.55em 0 .65em;
  color:var(--text, #0e2045);
  line-height:1.18;
  letter-spacing:-.035em;
}

.mh-article-rendered h2{
  font-size:32px;
}

.mh-article-rendered h3{
  font-size:26px;
}

.mh-article-rendered h4{
  font-size:21px;
}

.mh-article-rendered ul,
.mh-article-rendered ol{
  margin:0 0 1.25em 1.35em;
  padding:0;
}

.mh-article-rendered li{
  margin:.45em 0;
}

.mh-article-rendered blockquote{
  margin:1.35em 0;
  padding:16px 18px;
  border-left:4px solid var(--text, #0e2045);
  border-radius:14px;
  background:var(--soft, #f7f5f2);
  color:var(--muted, #4b5563);
  line-height:1.8;
}

/* fallback kalau masih ada selector lama yang langsung cetak teks */
.article-content,
.article-body,
.post-content,
.post-body,
.single-content,
.entry-content{
  white-space:normal;
}

.article-content > p,
.article-body > p,
.post-content > p,
.post-body > p,
.single-content > p,
.entry-content > p{
  margin-bottom:1.25em;
}

.mh-empty-content{
  color:var(--muted, #6b7280);
  font-style:italic;
}

/* =========================================================
   END ARTICLE CONTENT RENDER FIX
   ========================================================= */

/* =========================================================
   PUBLIC ARTICLE ADVANCED RENDER
   ========================================================= */

.mh-article-rendered{
  display:block;
  color:var(--text, #0e2045);
  font-size:17px;
  line-height:1.88;
}

.mh-article-rendered p{ margin:0 0 1.25em; }

.mh-article-rendered h2,
.mh-article-rendered h3,
.mh-article-rendered h4{
  scroll-margin-top:90px;
  margin:1.55em 0 .65em;
  color:var(--text, #0e2045);
  line-height:1.18;
  letter-spacing:-.035em;
}

.mh-article-rendered h2{ font-size:32px; }
.mh-article-rendered h3{ font-size:26px; }
.mh-article-rendered h4{ font-size:21px; }

.mh-article-rendered a{
  color:var(--text, #0e2045);
  text-decoration:underline;
  text-underline-offset:3px;
  font-weight:800;
}

.mh-article-rendered strong{ font-weight:900; }

.mh-article-rendered code{
  padding:2px 6px;
  border-radius:7px;
  background:rgba(14,32,69,.08);
  font-family:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size:.92em;
}

.mh-code-block{
  position:relative;
  overflow:auto;
  margin:1.4em 0;
  padding:18px;
  border-radius:18px;
  background:#111827;
  color:#f9fafb;
  line-height:1.65;
}

.mh-code-block::before{
  content:attr(data-lang);
  display:block;
  margin-bottom:8px;
  color:#9ca3af;
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mh-code-block code{
  padding:0;
  background:transparent;
  color:inherit;
  white-space:pre;
}

.mh-article-rendered ul,
.mh-article-rendered ol{
  margin:0 0 1.25em 1.35em;
  padding:0;
}

.mh-article-rendered li{ margin:.45em 0; }

.mh-article-rendered blockquote{
  margin:1.35em 0;
  padding:16px 18px;
  border-left:4px solid var(--text, #0e2045);
  border-radius:14px;
  background:var(--soft, #f7f5f2);
  color:var(--muted, #4b5563);
  line-height:1.8;
}

.mh-article-rendered hr{
  margin:2em 0;
  border:0;
  border-top:1px solid var(--line, #e4e3e1);
}

.mh-table-wrap{
  max-width:100%;
  overflow-x:auto;
  margin:1.45em 0;
  border:1px solid var(--line, #e4e3e1);
  border-radius:16px;
}

.mh-table-wrap table{
  width:100%;
  min-width:620px;
  border-collapse:collapse;
  background:var(--surface, #fffdfc);
}

.mh-table-wrap th,
.mh-table-wrap td{
  padding:12px 14px;
  border-bottom:1px solid var(--line, #e4e3e1);
  border-right:1px solid var(--line, #e4e3e1);
  vertical-align:top;
}

.mh-table-wrap th{
  background:var(--soft, #f7f5f2);
  font-weight:900;
}

.mh-table-wrap tr:last-child td{ border-bottom:0; }

.mh-article-figure{ margin:1.5em 0; }

.mh-article-figure img{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line, #e4e3e1);
}

.mh-article-figure figcaption{
  margin-top:8px;
  color:var(--muted, #6b7280);
  font-size:13px;
  line-height:1.6;
  text-align:center;
}

.mh-callout{
  margin:1.45em 0;
  padding:17px 18px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:18px;
  background:var(--soft, #f7f5f2);
}

.mh-callout strong{
  display:block;
  margin-bottom:7px;
  color:var(--text, #0e2045);
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mh-callout-data{ border-left:4px solid #067647; }
.mh-callout-warning,
.mh-callout-danger{ border-left:4px solid #b42318; }
.mh-callout-info,
.mh-callout-note,
.mh-callout-metode,
.mh-callout-method{ border-left:4px solid var(--text, #0e2045); }

.mh-article-toc{
  margin:0 0 1.8em;
  padding:18px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:18px;
  background:var(--soft, #f7f5f2);
}

.mh-article-toc strong{
  display:block;
  margin-bottom:8px;
  color:var(--text, #0e2045);
  font-weight:900;
}

.mh-article-toc ol{ margin:0 0 0 1.1em; }
.mh-article-toc li{ margin:.35em 0; }
.mh-article-toc li.h3{ margin-left:1em; font-size:.95em; }

.mh-footnotes{
  margin-top:2em;
  padding-top:1.5em;
  border-top:1px solid var(--line, #e4e3e1);
}

.mh-footnotes h3{ margin-top:0; }
.mh-footnotes li{
  color:var(--muted, #4b5563);
  font-size:14px;
}

.mh-footnote-back{ text-decoration:none!important; }
.mh-empty-content{
  color:var(--muted, #6b7280);
  font-style:italic;
}

/* =========================================================
   END PUBLIC ARTICLE ADVANCED RENDER
   ========================================================= */

/* =========================================================
   ARTICLE POLISH + COPY CODE
   ========================================================= */

.mh-article-rendered{
  max-width:100%;
}

.mh-code-block{
  position:relative!important;
  padding-top:42px!important;
}

.mh-copy-code{
  position:absolute;
  top:10px;
  right:10px;
  min-height:28px;
  padding:0 10px;
  border:1px solid rgba(255,255,255,.16);
  border-radius:9px;
  background:rgba(255,255,255,.08);
  color:#f9fafb;
  font-size:12px;
  font-weight:900;
  cursor:pointer;
}

.mh-copy-code:hover{
  background:rgba(255,255,255,.16);
}

.mh-table-wrap{
  box-shadow:0 14px 38px rgba(14,32,69,.045);
}

.mh-table-wrap table{
  font-size:14px;
}

.mh-table-wrap th,
.mh-table-wrap td{
  color:var(--text, #0e2045);
}

.mh-article-figure{
  display:grid;
  gap:8px;
}

.mh-article-figure img{
  box-shadow:0 18px 48px rgba(14,32,69,.08);
}

.mh-callout{
  box-shadow:0 14px 36px rgba(14,32,69,.045);
}

.mh-article-toc a{
  text-decoration:none;
  font-weight:800;
}

.mh-article-toc a:hover{
  text-decoration:underline;
}

@media(max-width:700px){
  .mh-article-rendered{
    font-size:16px;
    line-height:1.82;
  }

  .mh-article-rendered h2{
    font-size:27px;
  }

  .mh-article-rendered h3{
    font-size:23px;
  }

  .mh-code-block{
    border-radius:14px;
    font-size:13px;
  }

  .mh-table-wrap{
    border-radius:14px;
  }
}

/* =========================================================
   END ARTICLE POLISH + COPY CODE
   ========================================================= */

/* =========================================================
   PUBLIC TAGS + RELATED POSTS
   ========================================================= */

.mh-article-tags{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin:0 0 22px;
  padding:14px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:18px;
  background:var(--soft, #f7f5f2);
}

.mh-article-tags strong{
  color:var(--text, #0e2045);
  font-size:13px;
  font-weight:900;
}

.mh-article-tags a{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 11px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:999px;
  background:var(--surface, #fffdfc);
  color:var(--text, #0e2045);
  font-size:12px;
  font-weight:900;
  text-decoration:none;
}

.mh-article-tags a:hover{
  transform:translateY(-1px);
  box-shadow:0 10px 26px rgba(14,32,69,.08);
}

.mh-related-posts{
  margin-top:44px;
  padding-top:26px;
  border-top:1px solid var(--line, #e4e3e1);
}

.mh-related-head span,
.mh-tag-eyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 11px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:999px;
  color:var(--muted, #6b7280);
  font-size:11px;
  font-weight:900;
  letter-spacing:.1em;
}

.mh-related-head h2{
  margin:10px 0 18px;
  color:var(--text, #0e2045);
  font-size:30px;
  line-height:1.1;
  letter-spacing:-.04em;
}

.mh-related-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:14px;
}

.mh-related-card{
  overflow:hidden;
  border:1px solid var(--line, #e4e3e1);
  border-radius:18px;
  background:var(--surface, #fffdfc);
}

.mh-related-img{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--soft, #f7f5f2);
}

.mh-related-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mh-related-card > div{
  padding:15px;
}

.mh-related-card span{
  color:var(--muted, #6b7280);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mh-related-card h3{
  margin:7px 0 6px;
  font-size:17px;
  line-height:1.25;
}

.mh-related-card h3 a{
  color:var(--text, #0e2045);
  text-decoration:none;
}

.mh-related-card p{
  margin:0;
  color:var(--muted, #6b7280);
  font-size:13px;
  line-height:1.6;
}

.mh-tag-page{
  display:grid;
  gap:22px;
}

.mh-tag-hero{
  padding:28px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:28px;
  background:
    radial-gradient(circle at 12% 12%, rgba(14,32,69,.08), transparent 34%),
    var(--surface, #fffdfc);
}

.mh-tag-hero h1{
  margin:12px 0 8px;
  color:var(--text, #0e2045);
  font-size:clamp(36px,5vw,58px);
  line-height:1;
  letter-spacing:-.055em;
}

.mh-tag-hero p{
  margin:0;
  color:var(--muted, #6b7280);
}

.mh-tag-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:16px;
}

.mh-tag-card{
  overflow:hidden;
  border:1px solid var(--line, #e4e3e1);
  border-radius:22px;
  background:var(--surface, #fffdfc);
}

.mh-tag-card-img{
  display:block;
  aspect-ratio:16/9;
  overflow:hidden;
  background:var(--soft, #f7f5f2);
}

.mh-tag-card-img img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.mh-tag-card > div{
  padding:18px;
}

.mh-tag-card-cat{
  color:var(--muted, #6b7280);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.mh-tag-card h2{
  margin:8px 0 8px;
  font-size:23px;
  line-height:1.15;
  letter-spacing:-.035em;
}

.mh-tag-card h2 a{
  color:var(--text, #0e2045);
  text-decoration:none;
}

.mh-tag-card p{
  margin:0 0 14px;
  color:var(--muted, #6b7280);
  line-height:1.65;
}

.mh-tag-read{
  color:var(--text, #0e2045);
  font-weight:900;
  text-decoration:none;
}

.mh-tag-empty{
  grid-column:1/-1;
  display:grid;
  gap:5px;
  padding:28px;
  border:1px solid var(--line, #e4e3e1);
  border-radius:22px;
  background:var(--surface, #fffdfc);
  color:var(--muted, #6b7280);
}

.mh-tag-empty strong{
  color:var(--text, #0e2045);
}

@media(max-width:760px){
  .mh-related-grid,
  .mh-tag-grid{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   END PUBLIC TAGS + RELATED POSTS
   ========================================================= */

/* =========================================================
   PUBLIC ARTICLE VISUAL HTML SUPPORT
   ========================================================= */

.mh-article-visual-rendered p{
  margin:0 0 1.25em;
}

.mh-article-visual-rendered b,
.mh-article-visual-rendered strong{
  font-weight:900;
}

.mh-article-visual-rendered i,
.mh-article-visual-rendered em{
  font-style:italic;
}

.mh-article-visual-rendered u{
  text-underline-offset:3px;
}

.mh-article-visual-rendered figure{
  margin:1.5em 0;
}

.mh-article-visual-rendered figure img{
  width:100%;
  height:auto;
  border-radius:18px;
  border:1px solid var(--line, #e4e3e1);
  box-shadow:0 18px 48px rgba(14,32,69,.08);
}

.mh-article-visual-rendered figcaption{
  margin-top:8px;
  color:var(--muted, #6b7280);
  font-size:13px;
  line-height:1.6;
  text-align:center;
}

/* =========================================================
   END PUBLIC ARTICLE VISUAL HTML SUPPORT
   ========================================================= */

/* =========================================================
   ADMIN PREVIEW PUBLIC NOTICE
   ========================================================= */

.admin-preview-notice{
  margin-bottom:18px;
  padding:13px 15px;
  border:1px solid rgba(181,71,8,.18);
  border-radius:14px;
  background:rgba(181,71,8,.08);
  color:#b54708;
  font-weight:900;
}

.admin-preview-notice a{
  margin-left:10px;
  color:#b54708;
  text-decoration:underline;
}

/* =========================================================
   END ADMIN PREVIEW PUBLIC NOTICE
   ========================================================= */