/* MicroDraft Theme Plugins Market Stylesheet (StyleX) */
.intro { padding: 56px 0 32px; }
.eyebrow { font-size: 12px; letter-spacing: .1em; color: #397244; }
.intro h1 { font-size: clamp(30px, 4vw, 44px); line-height: 1.25; letter-spacing: -.04em; margin: 16px 0; }
.intro p { color: var(--muted); line-height: 1.8; margin: 0; max-width: 700px; }

/* Toolbar & Filters */
.style-toolbar { display: flex; align-items: flex-start; gap: 24px; justify-content: space-between; margin: 0 0 18px; }
.module-filters { display: flex; flex: 1; flex-wrap: wrap; min-width: 0; gap: 6px; padding: 4px; }
.module-filters button { border: 0; background: transparent; white-space: nowrap; min-height: 40px; padding: 8px 12px; font-size: 13px; border-radius: 4px; cursor: pointer; color: var(--muted); }
.module-filters button[aria-pressed="true"] { background: var(--ink); color: #fff; }
.style-search { width: 100%; height: 40px; border: 1px solid var(--line); border-radius: 4px; background: #fff; padding: 0 12px; font-size: 13px; color: var(--ink); }
.search-label { flex: 0 0 210px; }
.result-caption { font-size: 12px; color: var(--muted); margin: 0 0 22px; }

/* Grid & Cards */
.style-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.style-card { border: 1px solid var(--line); border-radius: 6px; background: #fff; overflow: hidden; }
.style-card[hidden] { display: none; }
.style-card-meta { padding: 20px 20px 0; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.style-card h2 { font-size: 15px; line-height: 1.6; margin: 0; }
.module-tag { font-size: 11px; color: var(--muted); white-space: nowrap; }
.module-tag--app { color: #087d64; font-weight: 600; }
.filter-divider { width: 1px; height: 22px; background: var(--line); margin: 9px 4px; align-self: center; }
.filter-app-caption { font-size: 11px; color: var(--muted); align-self: center; margin: 0 4px; font-weight: 600; }

/* Previews & Artwork */
.style-preview { margin: 16px 20px 0; padding: 20px 14px; min-height: 240px; display: flex; flex-direction: column; justify-content: center; border: 1px solid #eceeea; border-radius: 4px; background: #fff; overflow-wrap: anywhere; overflow: hidden; }
.style-preview p, .style-preview blockquote { margin: 0; }
.sample-heading { width: 100%; }
.sample-number { display: inline-block; border-radius: 3px; padding: 5px 9px; font: 600 13px/20px sans-serif; }
.sample-divider { display: flex; justify-content: center; gap: 9px; align-items: center; }
.sample-divider i { width: 5px; height: 5px; background: currentColor; border-radius: 50%; }
.sample-divider span { height: 1px; width: 100%; background: currentColor; }
.sample-divider-ornament > span { flex: 1; min-width: 0; }
.sample-divider-artwork { flex-shrink: 0; }
.sample-divider-artwork svg { display: block; width: 100%; height: 100%; }
.style-description { margin: 16px 20px 0; color: var(--muted); font-size: 13px; line-height: 1.7; }
.style-preview aside p { margin-top: 8px; }
.style-actions { padding: 18px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.import-app { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 8px 14px; border-radius: 4px; background: var(--ink); color: #fff; font-size: 13px; }
.empty { padding: 50px 0; text-align: center; color: var(--muted); }

/* Import Guide & Toast */
.import-guide { margin: 48px 0; padding: 28px 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 2fr; gap: 32px; }
.import-guide h2 { font-size: 22px; margin: 0; }
.import-guide ol { margin: 0; padding-left: 20px; line-height: 2; color: var(--muted); font-size: 14px; }
.import-guide details { font-size: 13px; color: var(--muted); line-height: 1.8; margin-top: 14px; }
.import-guide summary { cursor: pointer; min-height: 40px; }
.import-guide a { text-decoration: underline; }
.toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 12px 20px; border-radius: 4px; background: var(--ink); color: white; font-size: 13px; z-index: 10; line-height: 1.7; }
.toast:empty { display: none; }

@media (max-width: 980px) {
  .style-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .style-toolbar { display: block; }
  .search-label { display: block; margin: 12px 0 0; max-width: 320px; }
}
@media (max-width: 600px) {
  .intro { padding: 36px 0 24px; }
  .style-grid { grid-template-columns: 1fr; }
  .style-preview { min-height: 210px; }
  .import-guide { grid-template-columns: 1fr; gap: 20px; }
  .style-card-meta { gap: 8px; }
  .search-label { max-width: none; }
}

/* StyleX Compiled Themes Rules */
.xfawy5m{padding:4px}
.x1nks18l:not(#\#){border-color:#eceeea}
.xwf225k:not(#\#){border-color:var(--x1l4ao2w)}
.xixl9f9:not(#\#){border-radius:14px}
.x1ivlg4m:not(#\#){border-radius:var(--xkcsy2q)}
.x1y0btm7:not(#\#){border-style:solid}
.xc342km:not(#\#){border-width:0}
.xmkeg23:not(#\#){border-width:1px}
.x98rzlu:not(#\#){flex:1}
.xmt3bw4:not(#\#){gap:22px}
.x1665zp3:not(#\#){gap:24px}
.x1rzw5jd:not(#\#){gap:32px}
.x17d4w8g:not(#\#){gap:6px}
.xb3r6kr:not(#\#){overflow:hidden}
.x1hl2dhg:not(#\#){text-decoration:none}
@media (max-width: 600px){.x16qppv5.x16qppv5:not(#\#){gap:20px}}
.x6s0dn4:not(#\#):not(#\#){align-items:center}
.x1cy8zhl:not(#\#):not(#\#){align-items:flex-start}
.x1c5tqo3:not(#\#):not(#\#){background-color:#ffffff}
.xjbqb8w:not(#\#):not(#\#){background-color:transparent}
.x1h70ygh:not(#\#):not(#\#){background-color:var(--x1b7czt3)}
.x1f7m26b:not(#\#):not(#\#){color:#ffffff}
.xhr0nky:not(#\#):not(#\#){color:var(--x1b7czt3)}
.xn0bfad:not(#\#):not(#\#){color:var(--x1gqaozl)}
.x1n10r6u:not(#\#):not(#\#){color:var(--x30uskn)}
.x1ypdohk:not(#\#):not(#\#){cursor:pointer}
.x78zum5:not(#\#):not(#\#){display:flex}
.xrvj5dj:not(#\#):not(#\#){display:grid}
.x3nfvp2:not(#\#):not(#\#){display:inline-flex}
.xdt5ytf:not(#\#):not(#\#){flex-direction:column}
.x1a02dak:not(#\#):not(#\#){flex-wrap:wrap}
.xfifm61:not(#\#):not(#\#){font-size:12px}
.x4z9k3i:not(#\#):not(#\#){font-size:13px}
.xl463y0:not(#\#):not(#\#){grid-template-columns:1fr 2fr}
.x185a7wo:not(#\#):not(#\#){grid-template-columns:repeat(3,minmax(0,1fr))}
.xl56j7k:not(#\#):not(#\#){justify-content:center}
.x1qughib:not(#\#):not(#\#){justify-content:space-between}
.x1dor1uw:not(#\#):not(#\#){letter-spacing:.1em}
.xj0a0fe:not(#\#):not(#\#){overflow-wrap:anywhere}
.xuxw1ft:not(#\#):not(#\#){white-space:nowrap}
@media (max-width: 980px){.x1ezf588.x1ezf588:not(#\#):not(#\#){display:block}}
@media (max-width: 600px){.x1nc4n6v.x1nc4n6v:not(#\#):not(#\#){grid-template-columns:1fr}}
@media (max-width: 980px){.x1ya0a2d.x1ya0a2d:not(#\#):not(#\#){grid-template-columns:repeat(2,minmax(0,1fr))}}
.xd2eavf:not(#\#):not(#\#):not(#\#){border-top-color:var(--x1l4ao2w)}
.x13fuv20:not(#\#):not(#\#):not(#\#){border-top-style:solid}
.x178xt8z:not(#\#):not(#\#):not(#\#){border-top-width:1px}
.x1vqgdyp:not(#\#):not(#\#):not(#\#){height:40px}
.x1c436fg:not(#\#):not(#\#):not(#\#){margin-bottom:18px}
.x13ihpsm:not(#\#):not(#\#):not(#\#){margin-bottom:48px}
.x400o59:not(#\#):not(#\#):not(#\#){margin-left:20px}
.x1wh8b8d:not(#\#):not(#\#):not(#\#){margin-right:20px}
.xw7yly9:not(#\#):not(#\#):not(#\#){margin-top:16px}
.xx4vt8u:not(#\#):not(#\#):not(#\#){margin-top:48px}
.x1ficeh5:not(#\#):not(#\#):not(#\#){min-height:240px}
.x1ba4aug:not(#\#):not(#\#):not(#\#){min-height:40px}
.xeuugli:not(#\#):not(#\#):not(#\#){min-width:0}
.xx6bls6:not(#\#):not(#\#):not(#\#){padding-bottom:20px}
.x84yb8i:not(#\#):not(#\#):not(#\#){padding-bottom:28px}
.x1gan7if:not(#\#):not(#\#):not(#\#){padding-bottom:32px}
.xwib8y2:not(#\#):not(#\#):not(#\#){padding-bottom:8px}
.xf18ygs:not(#\#):not(#\#):not(#\#){padding-left:12px}
.xzjhap9:not(#\#):not(#\#):not(#\#){padding-left:14px}
.xnuq7ks:not(#\#):not(#\#):not(#\#){padding-right:12px}
.x19tmk5i:not(#\#):not(#\#):not(#\#){padding-right:14px}
.x1cnzs8:not(#\#):not(#\#):not(#\#){padding-top:20px}
.x7sb2j6:not(#\#):not(#\#):not(#\#){padding-top:28px}
.xn2ks54:not(#\#):not(#\#):not(#\#){padding-top:56px}
.x1y1aw1k:not(#\#):not(#\#):not(#\#){padding-top:8px}
.xh8yej3:not(#\#):not(#\#):not(#\#){width:100%}
@media (max-width: 600px){.x1bropya.x1bropya:not(#\#):not(#\#):not(#\#){min-height:210px}}
@media (max-width: 600px){.x11e0lbk.x11e0lbk:not(#\#):not(#\#):not(#\#){padding-bottom:24px}}
@media (max-width: 600px){.x139w4ru.x139w4ru:not(#\#):not(#\#):not(#\#){padding-top:36px}}