/* =============================================================================
   ALL ABOUT AI — Sifency Addons
   Optimized stylesheet: shared component styles are merged into single
   grouped rules across Agent Showcase (agt-), Tools Directory (std-),
   Prompt Library (apl-), MCP Server Showcase (sifency-mcp-), and
   Submission Form (sf-). Visual output is unchanged except where flagged
   with a "NOTE" comment — those are places where folding the new MCP
   widget in required picking one value over a slightly different one it
   shipped with; check them and delete the note once confirmed.

   CHANGELOG (this revision):
   - apl-featured-badge: added to the shared corner-badge rule (Section 5)
     and to the modal inline-badge reset (Section 12). Previously this
     class had no rule at all, so a "Featured" prompt rendered unstyled.
   - apl-access-premium: added an explicit color rule (Section 8) and
     folded into the pill-shape rule (Section 17b). Previously only
     apl-access-free had a rule; premium items silently fell back to the
     square corner-badge shape instead of matching free's pill shape.
   - std-single-badges .std-featured-badge: swapped hardcoded
     --accent-color for --e-global-color-accent to match the rest of the
     featured-badge family.
   - Brand color pass: remaining --accent-color references (.sf-required,
     .apl-btn-premium) swapped to --e-global-color-accent, since
     --accent-color isn't a defined Elementor global token in this theme.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   TABLE OF CONTENTS
   1.  Filter Bar (shared: agt / std / apl / mcp)
   2.  Category Select + Search (shared bases; agt & mcp each push a search
       control to the right differently — see notes)
   3.  Grid Layouts (agt+apl+mcp shared / std separate / std-simple variant)
   4.  Card Base (shared: agt / apl / mcp) + std-card (separate) + std letter-avatar
   5.  Card Media, Empty States, Featured/Access Badges
   6.  Card Body: Head, Title, Description
   7.  Chip Row (Agent Showcase + MCP Server Showcase)
   8.  Card Footer: Category Tag, Pricing Tag
   9.  Upvote / Favorite Buttons (shared: agt / std / mcp) + apl favorite
   10. Load More + Empty State (shared)
   11. Modal — Shared Shell (agt / std / apl / mcp)
   12. Modal — Header / Title / Tagline / Desc (per-widget, structure differs)
   13. Modal — Media / Gallery (shared)
   14. Archive Page Header (shared: agt / std / apl / mcp)
   15. AI Prompt Library — Card Button (Free/Premium), Variables, Prompt Text, Lock
   16. Single Page Templates — Agent/MCP (56px variant) & Prompt (40px variant)
   17. Submission Form (sf-)
   18. MCP Server Showcase — Unique Bits (Official Toggle, Card Logo, Official
       Check, Install Row, Modal Links, Search Wrap)
   ============================================================================= */

/* =============================================================================
   1. FILTER BAR
   ============================================================================= */
.apl-variables input:focus,
.sifency-agent-showcase .agt-filter-bar select:focus,
.sifency-agent-showcase button:focus,
.sifency-agent-showcase input:focus,
.sifency-agent-showcase .agt-filter-bar input:focus,
.sifency-tools-directory .std-filter-bar select:focus,
.sifency-tools-directory button:focus,
.sifency-tools-directory input:focus,
.sifency-tools-directory .std-filter-bar input:focus,
.sifency-ai-prompt-library .apl-filter-bar select:focus,
.sifency-ai-prompt-library button:focus,
.sifency-ai-prompt-library input:focus,
.sifency-ai-prompt-library .apl-filter-bar input:focus,
.sifency-mcp-showcase .sifency-mcp-filter-bar select:focus,
.sifency-mcp-showcase button:focus,
.sifency-mcp-showcase input:focus,
.sifency-mcp-showcase .sifency-mcp-filter-bar input:focus {
   outline: none;
}

.sifency-agent-showcase .agt-filter-bar,
.sifency-tools-directory .std-filter-bar,
.sifency-ai-prompt-library .apl-filter-bar,
.sifency-mcp-showcase .sifency-mcp-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    margin-bottom: 24px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--theme-border-color);
}
/* =============================================================================
   SIFENCY ROW/COL — Bootstrap-independent fallback grid
   Mirrors: row > col-lg-8 col-md-12 order-2 order-lg-1  /  col-lg-4 col-md-12
   order-1 order-lg-2, using Bootstrap's own breakpoints (768px / 992px) and
   15px gutter so it lines up pixel-for-pixel if Bootstrap IS also present.
   ============================================================================= */

.sifency-row {
   display: flex;
   flex-wrap: wrap;
   margin-left: -15px;
   margin-right: -15px;
}

.sifency-ai-layout-left,
.sifency-ai-layout-right {
   width: 100%;
   padding-left: 15px;
   padding-right: 15px;
   box-sizing: border-box;
}
@media screen and (max-width: 678px) {
.sifency-ai-layout-left,
.sifency-ai-layout-right {
   padding-left: 0px;
   padding-right: 0px;
}
}
.sifency-ai-layout-left {
   order: 2;
}

.sifency-ai-layout-right {
   order: 1;
}

@media (min-width: 768px) {
   .sifency-ai-layout-left,
   .sifency-ai-layout-right {
      flex: 0 0 100%;
      max-width: 100%;
   }
}

@media (min-width: 992px) {
   .sifency-row {
      flex-wrap: nowrap;
   }

   .sifency-ai-layout-left {
      flex: 0 0 66.66667%;
      max-width: 66.66667%;
      order: 1;
   }

   .sifency-ai-layout-right {
      flex: 0 0 33.33333%;
      max-width: 33.33333%;
      order: 2;
   }
}
.sifency-container{
   max-width: 1320px;
   margin: auto;
}
.apl-filter-group,
.agt-filter-group,
.std-filter-group,
.sifency-mcp-filter-group {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   border: 1px solid var(--theme-border-color);
   padding: 5px 10px;
   border-radius: 0.625rem;
}

.apl-filter-group {
   display: flex;
   gap: 6px;
}

.agt-filter-btn,
.std-filter-btn,
.apl-filter-btn,
.sifency-mcp-filter-btn {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    padding: 8px 14px;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    border-radius: 0.625rem;
    transition:
        background .15s ease,
        color .15s ease,
        border-color .15s ease,
        border-radius .15s ease;
}

.agt-filter-btn::before,
.std-filter-btn::before,
.apl-filter-btn::before,
.sifency-mcp-filter-btn::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 3px;
    height: 0;
    border-radius: 0 3px 3px 0;
    background: var(--e-global-color-primary);
    transform: translateY(-50%);
    transition: height .3s ease;
}

.agt-filter-btn:hover,
.agt-filter-btn.is-active,
.std-filter-btn:hover,
.std-filter-btn.is-active,
.apl-filter-btn:hover,
.apl-filter-btn.is-active,
.sifency-mcp-filter-btn:hover,
.sifency-mcp-filter-btn.is-active {
    background: color-mix(in srgb, var(--e-global-color-primary) 8%, transparent);
    color: var(--e-global-color-primary);
    border-color: var(--e-global-color-primary);
    border-radius: 0.425rem;
}

.agt-filter-btn:hover::before,
.agt-filter-btn.is-active::before,
.std-filter-btn:hover::before,
.std-filter-btn.is-active::before,
.apl-filter-btn:hover::before,
.apl-filter-btn.is-active::before,
.sifency-mcp-filter-btn:hover::before,
.sifency-mcp-filter-btn.is-active::before {
    height: 60%;
}
.cs-section-height{
   height: var(--theme-section-height, 120px);
}
.cs-section-height-half{
   height: var(--theme-section-height, 70px);
}
/* =============================================================================
   2. CATEGORY SELECT + SEARCH
   ============================================================================= */
.agt-category-select,
.std-category-select,
.apl-category-select,
.sifency-mcp-category-select {
   font-size: 12px;
   padding: 8px 12px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: 0.625rem;
   background: var(--secondary-color, #F8F9F5);
   color: var(--text-color, #14171C);
}

.agt-category-select {
   margin-left: 0;
}


@media screen and (min-width: 576px) {
   .agt-search-input,
   .sifency-agent-search-input {
      margin-left: auto;
   }
}
.std-search-wrap,
.apl-search-wrap {
   display: flex;
   align-items: center;
   margin-left: auto;
}

.sifency-mcp-search-input,
.agt-search-input,
.sifency-agent-search-input,
.std-search-input,
.apl-search-input {
   font-size: 12px;
   padding: 5px 12px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: 0.625rem;
   color: var(--text-color, #14171C);
   min-width: 220px;
   background-color: transparent;
}
.sf-thumbnail-input::file-selector-button {
  border: 1px solid var(--theme-border-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
  background-color: #ffffff;
  border-radius: 0.65rem;
  padding: var(--theme-button-padding);
  line-height: normal;
}
/* =============================================================================
   3. GRID LAYOUTS
   ============================================================================= */
.agt-grid,
.apl-grid,
.sifency-mcp-grid {
   column-count: 4;
   column-gap: 10px;
   width: 100%;
}

@media (max-width: 991px) {

   .agt-grid,
   .apl-grid,
   .sifency-mcp-grid {
      column-count: 2;
   }
}

.std-grid {
   column-gap: 10px;
   width: 100%;
   column-count: 4;
}

.std-grid.std-grid-simple {
   column-count: initial !important;
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
   gap: 10px;
}

.std-grid.std-grid-simple .std-card {
   margin-bottom: 0;
   break-inside: auto;
}

@media (max-width: 767px) {

   .agt-grid,
   .std-grid,
   .apl-grid,
   .sifency-mcp-grid {
      column-count: 1 !important;
   }

   .sifency-mcp-category-select {
      margin-left: 0;
   }

   .sifency-mcp-search-wrap {
      max-width: 100%;
   }
}

/* =============================================================================
   4. CARD BASE
   ============================================================================= */
.agt-card,
.apl-card,
.sifency-mcp-card {
   display: block;
   width: 100%;
   break-inside: avoid;
   overflow: hidden;
   transition: transform .15s ease, box-shadow .15s ease;
   background: var(--white-color);
   border-radius: 10px;
   border: 1px solid #E3DACC70;
}

.sifency-mcp-card,
.agt-card {
   cursor: pointer;
}
.sifency-mcp-card,
.agt-card {
   margin-bottom: 10px;
}
.std-card {
   display: block;
   width: 100%;
   break-inside: avoid;
   overflow: hidden;
   transition: transform .15s ease, box-shadow .15s ease;
   background: var(--white-color);
   margin-bottom: 10px;
   cursor: pointer;
}

.std-card-simple {
   padding: 22px;
   cursor: pointer;
}

/* =============================================================================
   5. CARD MEDIA / EMPTY STATES / BADGES
   ============================================================================= */
.agt-card-media,
.apl-card-media,
.sifency-mcp-card-media {
   position: relative;
   display: block;
   width: 100%;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   line-height: 0;
}
.apl-card{
   margin-bottom: 10px;
}

.agt-card-video,
.apl-card-video,
.std-card-video,
.sifency-mcp-card-media img,
.sifency-mcp-card-video {
   width: 100%;
   height: auto;
   display: block;
}

.std-card-media {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   padding: 0;
   border: 0;
   background: none;
   cursor: pointer;
   line-height: 0;
}

.sifency-mcp-card-media:hover,
.agt-card-media:hover,
.std-card-media:hover {
   background-color: transparent;
}
.std-card-letter-avatar {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 50px;
   height: 50px;
   font-size: 30px;
   background: var(--e-global-color-primary);
   color: #fff;
   text-transform: uppercase;
   user-select: none;
   overflow: hidden;
   border-radius: 50%;
}

.std-card-letter-avatar::selection {
   background: transparent;
}

.apl-card-media-empty {
   width: 100%;
   aspect-ratio: 4 / 3;
   background: var(--body-color);
}

/* Shared "corner" badge shape used for both the real Featured badges
   (std/agt/mcp/apl) and the Prompt Library's Access badge (free/premium
   base, before the .apl-access-free / .apl-access-premium color
   overrides further down apply). apl-featured-badge added here so a
   "Featured" prompt actually renders styled — previously it had no rule
   at all. Background swapped from the undefined --accent-color token to
   --e-global-color-accent to match the theme's brand palette. */
.std-tools-featured-badge,
.sifency-tools-featured-badge,
.agt-featured-badge,
.apl-access-badge,
.apl-featured-badge,
.sifency-mcp-featured-badge {
   position: absolute;
   top: 12px;
   right: 12px;
   font-size: 10px;
   font-weight: 500;
   line-height: 120%;
   padding: 4px 8px;
   border-radius: 4px;
   background: var(--e-global-color-accent, #FFD400);
   color: var(--black-color, #14171C);
}

/* =============================================================================
   6. CARD BODY: HEAD / TITLE / DESCRIPTION
   ============================================================================= */
.agt-card-body,
.std-card-body,
.sifency-apl-card-body,
.sifency-mcp-card-body {
   padding: 25px;
}

.agt-card-head,
.std-card-head,
.sifency-mcp-card-head {
   display: flex;
   align-items: center;
   margin-bottom: 10px;
}

.agt-card-head,
.std-card-head {
   gap: 10px;
}

.sifency-mcp-card-head {
   gap: 8px;
}

.agt-card-head {
   justify-content: space-between;
}

.sifency-mcp-card-logo,
.agt-card-logo {
   flex-shrink: 0;
   width: 26px;
   height: 26px;
   border-radius: 6px;
   overflow: hidden;
   display: block;
}

.sifency-mcp-card-logo img,
.agt-card-logo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.agt-card-title,
.std-card-title,
.sifency-mcp-card-title {
   font-weight: 600;
   font-size: 16px;
   line-height: 1.3;
   margin: 0;
   color: var(--text-color, #14171C);
}

.std-card-title {
   cursor: pointer;
}

.sifency-mcp-card-title {
   flex: 1;
}

.sifency-mcp-official-check {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 16px;
   height: 16px;
   border-radius: 50%;
   background: var(--e-global-color-primary);
   color: var(--white-color, #FFFFFF);
   font-size: 10px;
   flex-shrink: 0;
}

.apl-card-title {
   cursor: pointer;
   font-size: 16px;
   margin: 0 0 8px;
}

.agt-card-desc,
.std-card-desc,
.apl-card-desc,
.sifency-mcp-card-desc {
   font-size: 13px;
   margin: 0 0 25px;
   max-width: 90%;
}

.agt-card-desc {
   margin-bottom: 12px;
}

.sifency-mcp-card-desc {
   margin-bottom: 10px;
}

.std-card-desc {
   cursor: pointer;
}

/* =============================================================================
   7. CHIP ROW (Agent Showcase + MCP Server Showcase)
   ============================================================================= */
.agt-autonomy-dots {
   display: inline-flex;
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
}

.agt-dot {
   width: 6px;
   height: 6px;
   border-radius: 50%;
   background: var(--theme-border-color, #D3D6CC);
}

.agt-dot.is-filled {
   background: var(--e-global-color-primary);
}

.agt-chip-row,
.sifency-mcp-meta-row {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
   margin-bottom: 14px;
}

.agt-chip,
.sifency-mcp-chip {
   font-size: 10px;
   background: color-mix(in srgb, var(--e-global-color-secondary, #2D6BFF) 5%, transparent);
   color: #14171C;
   padding: 3px 8px;
   border-radius: 4px;
}

.agt-chip-more {
   color: var(--e-global-color-primary, #2D6BFF);
   background: color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 8%, transparent);
}

/* =============================================================================
   8. CARD FOOTER: TAGS / PRICING
   ============================================================================= */
.agt-card-foot,
.std-card-foot,
.apl-card-foot,
.sifency-mcp-card-foot {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
}

.agt-card-tags,
.std-card-tags,
.sifency-mcp-card-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.agt-category-tag,
.std-category-tag,
.apl-category-tag,
.sifency-mcp-category-tag {
   display: inline-flex;
   align-items: center;
   font-size: 10px;
   font-weight: 500;
   background: transparent;
   border: 1px solid color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 30%, transparent);
   color: color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 70%, transparent);
   padding: 2px 10px;
   border-radius: 4px;
}

.agt-pricing-tag,
.std-pricing-tag,
.sifency-mcp-pricing-tag {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   font-size: 10px;
   font-weight: 600;
   padding: 3px 10px;
   border-radius: 999px;
   cursor: pointer;
}

.agt-pricing-free,
.std-pricing-free,
span.apl-access-badge.apl-access-free,
.sifency-mcp-pricing-free {
   color: #16803C;
   background: rgba(22, 128, 60, 0.12);
}

/* Premium counterpart to apl-access-free above. This never had its own
   rule before, so premium prompts inherited the raw yellow/black corner
   badge from Section 5 instead of the free badge's tone. Reuses the same
   gold "paid" treatment as .agt-pricing-paid / .std-pricing-paid /
   .sifency-mcp-pricing-paid so premium reads consistently across every
   directory widget. */
span.apl-access-badge.apl-access-premium {
   color: #8A5B00;
   background: rgba(255, 212, 0, 0.28);
}
.agt-pricing-tag::before,
.std-pricing-tag::before,
.apl-access-badge.apl-access-free::before,
.sifency-mcp-pricing-tag::before {
   content: "";
   width: 5px;
   height: 5px;
   flex-shrink: 0;
   border-radius: 50%;
   background: currentColor;
}

.agt-pricing-freemium,
.std-pricing-freemium,
.sifency-mcp-pricing-freemium {
   color: var(--e-global-color-primary, #2D6BFF);
   background: color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 10%, transparent);
}

.agt-pricing-paid,
.std-pricing-paid,
.sifency-mcp-pricing-paid {
   color: #8A5B00;
   background: rgba(255, 212, 0, 0.28);
}
.agt-pricing-open_source,
.std-pricing-open_source,
.sifency-mcp-pricing-open_source {
   color: var(--white-color, #FFFFFF);
   background: var(--text-color, #14171C);
}

/* =============================================================================
   9. UPVOTE / FAVORITE BUTTONS
   ============================================================================= */
button.said-collect-btn,
.agt-upvote-btn,
button.std-upvote-btn,
.sifency-mcp-upvote-btn {
   display: inline-flex;
   align-items: center;
   gap: 5px;
   background: none;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-1, 3px);
   cursor: pointer;
   font-size: 12px;
   color: var(--text-color, #14171C);
   padding: 5px 10px;
   flex-shrink: 0;
   transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.group-btn-column .apl-view-post-btn{
   width: 100%;
   text-align: center;
}
.group-btn-column{
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 5px;
}
.sifency-mcp-upvote-btn,
.agt-upvote-btn,
.std-upvote-btn {
   width: fit-content;
}
.said-collect-btn:hover,
.sifency-mcp-upvote-btn:hover,
.agt-upvote-btn:hover,
.std-upvote-btn:hover {
   border-color: var(--theme-border-color, #D3D6CC);
   background-color: var(--e-global-color-primary);
   border-radius: var(--theme-border-radius-level-1, 3px);
   border: 1px solid var(--e-global-color-primary);
}

.agt-upvote-btn .agt-upvote-icon,
.std-upvote-btn .std-upvote-icon,
.sifency-mcp-upvote-btn .sifency-mcp-upvote-icon {
   font-size: 10px;
   transition: transform .15s ease;
}

.agt-upvote-btn[data-active="1"],
.std-upvote-btn[data-active="1"],
.sifency-mcp-upvote-btn[data-active="1"] {
   background: var(--e-global-color-primary);
   border-color: var(--e-global-color-primary);
   color: var(--white-color, #FFFFFF);
}

.agt-upvote-btn:active .agt-upvote-icon,
.std-upvote-btn:active .std-upvote-icon,
.sifency-mcp-upvote-btn:active .sifency-mcp-upvote-icon {
   transform: translateY(-2px);
}
.std-upvote-simple {
   border: none;
   background: transparent;
   padding: 2px 10px;
   color: var(--lead-paragraph-color, #6B6F68);
}

.std-upvote-simple[data-active="1"] {
   background: color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 12%, transparent);
   color: var(--e-global-color-primary, #2D6BFF);
}

.apl-fav-btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   background: none;
   border: none;
   cursor: pointer;
   font-size: 12px;
   color: var(--text-color, #14171C);
   padding: 4px;
}

.apl-fav-btn:hover {
   background-color: transparent;
   color: var(--e-global-color-primary);
}

.apl-fav-btn .apl-fav-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 14px;
   transition: transform .15s ease, color .15s ease;
}

.apl-fav-btn .apl-fav-icon svg {
   width: 16px;
   height: 16px;
   stroke: currentColor;
   fill: none;
   transition: fill .15s ease, stroke .15s ease, color .15s ease;
}

.apl-fav-btn[data-active="1"] .apl-fav-icon,
.apl-fav-btn[data-active="1"] .apl-fav-icon svg {
   fill: var(--e-global-color-accent, #FFD400);
   stroke: var(--e-global-color-accent, #FFD400);
   color: var(--e-global-color-accent, #FFD400);
}

.apl-fav-btn:active .apl-fav-icon {
   transform: scale(1.2);
}

.apl-fav-label {
   text-transform: lowercase;
   opacity: 0.8;
}

/* =============================================================================
   10. LOAD MORE + EMPTY STATE
   ============================================================================= */
.agt-load-more,
.std-load-more,
.apl-load-more,
.sifency-mcp-load-more {
   display: block;
   margin: 32px auto 0;
}

.agt-empty-state,
.std-empty-state,
.apl-empty-state,
.sifency-mcp-empty-state {
   font-size: 13px;
   text-align: center;
   padding: 40px 0;
   column-span: all;
}

/* =============================================================================
   11. MODAL — SHARED SHELL
   ============================================================================= */
@media screen and (min-width: 991px) and (min-height: 800px) {
.agt-modal {
   max-width: 760px;
   max-height: min(400px, 95vh);
}
.std-modal{
   max-width: 760px;
   max-height: min(348px, 95vh);
}
.apl-modal{
   max-width: 960px;
   max-height: min(545px, 95vh);
}
.sifency-mcp-modal{
   max-width: 960px;
   max-height: min(430px, 95vh);
}
}
.agt-modal,
.std-modal,
.apl-modal,
.sifency-mcp-modal {
   border: none;
   border-radius: var(--theme-border-radius-level-4, 10px);
   padding: 0;
   width: 90vw;
   overflow: hidden;
}

.sifency-mcp-modal .std-card-letter-avatar {
   margin: 0px;
   padding: 0px;
}

.agt-modal:focus,
.std-modal:focus,
.apl-modal:focus,
.sifency-mcp-modal:focus {
   outline: none;
}

.agt-modal::backdrop,
.std-modal::backdrop,
.apl-modal::backdrop,
.sifency-mcp-modal::backdrop {
   background: rgba(20, 23, 28, 0.6);
}

/* Site-wide login/register/forgot modal (see
   said_render_login_modal(), printed once in wp_footer).
   Deliberately narrower than the item-detail modals above -- it's a
   single-column auth form, not a media/details split. */
.said-login-modal {
   border: none;
   border-radius: var(--theme-border-radius-level-4, 10px);
   padding: 60px;
   width: min(500px, 92vw);
   overflow-y: auto;
}
.said-login-modal .said-acct-tab[data-tab="forgot"] {
  display: none;
}
.said-login-modal::backdrop {
   background: rgba(20, 23, 28, 0.6);
}

.said-login-modal:focus {
   outline: none;
}

/* agt/std/mcp use a side-by-side 1:1 split; apl uses a flex column->row
   layout with a fixed-width detail rail, so it is kept separate below */
/* MCP's dialog markup wraps the split in an extra .sifency-mcp-modal-body
   div that agt/std/apl don't have. Without an explicit height here,
   height:100% on the grid below resolves to `auto`, breaking the chain
   that overflow-y:auto on .sifency-mcp-modal-details depends on. */
.sifency-mcp-modal-body {
   height: 100%;
   min-height: 0;
   overflow: hidden;
}

.agt-modal-split,
.std-modal-split,
.sifency-mcp-modal-split {
   display: grid;
   grid-template-columns: 1fr 1fr;
   grid-auto-rows: 1fr;
   height: 100%;
   min-height: 0;
   overflow: hidden;
}

.agt-modal-split.agt-media-left,
.std-modal-split.std-media-left,
.sifency-mcp-modal-split.sifency-mcp-media-left {
   direction: rtl;
}

.agt-modal-split.agt-media-left>*,
.std-modal-split.std-media-left>*,
.sifency-mcp-modal-split.sifency-mcp-media-left>* {
   direction: ltr;
}

.agt-modal-details,
.std-modal-details,
.sifency-mcp-modal-details {
   height: 100%;
   min-height: 0;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   padding: 40px;
}

.agt-modal-details {
   display: flex;
   flex-direction: column;
   gap: 14px;
}

.std-modal-details {
   display: flex;
   flex-direction: column;
   gap: 16px;
}

.sifency-mcp-modal-details {
   display: flex;
   flex-direction: column;
   gap: 12px;
}

.apl-modal-split {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
   overflow: hidden;
}

.apl-modal-details {
   padding: 24px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   width: 100%;
   min-height: 0;
   height: 100%;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
}

.apl-modal-media {
   flex: 1;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;
   background: var(--body-color, #EDEFEA);
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 240px;
}
.apl-single-media.apl-modal-media{
   display: flex;
   flex-direction: column;
   align-items: flex-start;
}
.apl-modal .sifency-apl-card-btn.apl-copy-btn {
   margin: 0px;

}
@media screen and (max-width: 991px) and (max-height: 800px) {
   .agt-modal,
   .std-modal,
   .apl-modal,
   .sifency-mcp-modal {
      width: calc(100vw - 40px);
      height: calc(100vh - 40px);
      max-width: calc(100vw - 40px);
      max-height: calc(100vh - 40px);
   }

}
@media (min-width: 768px) {
   .apl-modal-split {
      flex-direction: row;
   }

   .apl-modal-details {
      width: 400px;
      flex-shrink: 0;
      max-height: min(545px, 95vh);
      overflow-y: auto;
   }

   .apl-modal-media {
      min-height: 0;
      max-height: 85vh;
   }

   .apl-modal-split.apl-media-right .apl-modal-details {
      border-right: 1px solid var(--theme-border-color, #D3D6CC);
   }

   .apl-modal-split.apl-media-left .apl-modal-details {
      border-left: 1px solid var(--theme-border-color, #D3D6CC);
      order: 2;
   }

   .apl-modal-split.apl-media-left .apl-modal-media {
      order: 1;
   }

   .apl-modal-split.apl-media-right .apl-modal-media {
      order: 2;
   }

   .apl-modal-split.apl-media-right .apl-modal-details {
      order: 1;
   }
}

/* =============================================================================
   12. MODAL — HEADER / TITLE / TAGLINE / DESCRIPTION
   ============================================================================= */
.agt-modal-header,
.std-modal-header {
   display: flex;
   align-items: center;
   gap: 12px;
}

.agt-modal-header {
   justify-content: space-between;
}

.std-modal-header,
.sifency-mcp-modal-header {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.std-modal-logo,
.sifency-mcp-modal-logo,
.agt-modal-logo {
   flex-shrink: 0;
   width: 44px;
   height: 44px;
   border-radius: 8px;
   overflow: hidden;
}

.std-modal-logo img,
.sifency-mcp-modal-logo img,
.agt-modal-logo img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.agt-modal-title,
.std-modal-title,
.apl-modal-title,
.sifency-mcp-modal-title {
   font-weight: 600;
   color: var(--text-color, #14171C);
}

.agt-modal-title {
   font-size: 22px;
   line-height: 1.25;
   margin: 0;
}

.std-modal-title,
.sifency-mcp-modal-title {
   font-size: 22px;
   line-height: 1.25;
   margin: 0 0 4px;
}

/* MCP's title also carries an inline official-check icon */
.sifency-mcp-modal-title {
   display: flex;
   align-items: center;
   gap: 8px;
}

.apl-modal-title {
   font-size: 20px;
   line-height: 1.25;
   margin: 8px 0 4px;
}

.agt-modal-autonomy-label {
   font-size: 11px;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: -8px 0 0;
   text-transform: uppercase;
   letter-spacing: 0.06em;
}

.agt-modal-tagline,
.std-modal-tagline,
.sifency-mcp-modal-tagline {
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 0;
}

.agt-modal-tagline {
   font-size: 14px;
}

.std-modal-tagline,
.sifency-mcp-modal-tagline {
   font-size: 13px;
}

.agt-modal-tags,
.std-modal-tags,
.sifency-mcp-modal-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
}

.std-modal-desc,
.sifency-mcp-modal-desc {
   font-size: 14px;
   line-height: 1.6;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 0;
}

.apl-modal-desc {
   font-size: 13px;
   line-height: 1.6;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 0;
}

.agt-try-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   text-decoration: none;
   align-self: flex-start;
}

.agt-modal-details .agt-upvote-btn {
   align-self: flex-start;
}

.apl-modal-header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 8px;
   margin-bottom: 4px;
}

/* Modal-scoped inline reset: an absolutely-positioned corner badge
   doesn't make sense inside a modal header, so both the access badge
   (free/premium) and the featured badge get flattened to static here.
   apl-featured-badge added alongside apl-access-badge — previously only
   the access badge was reset, so a featured prompt's badge would have
   kept `position: absolute` and floated out of the header layout. */
.apl-modal-header .apl-access-badge,
.apl-modal-header .apl-featured-badge {
   position: static;
   line-height: inherit;
}

.apl-modal-category {
   font-size: 10px;
   font-weight: 500;
   background: rgba(91, 122, 99, 0.1);
   padding: 4px 8px;
   border-radius: 4px;
}
.apl-modal-category {
   background: color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 10%, transparent);
}
.apl-modal-compat {

   font-size: 10px;
   font-weight: 500;
   color: var(--lead-paragraph-color, #6B6F68);
   background: var(--body-color, #EDEFEA);
   padding: 4px 8px;
   border-radius: 4px;
}

/* =============================================================================
   13. MODAL — MEDIA / GALLERY (shared across all widgets)
   ============================================================================= */
.agt-modal-media,
.std-modal-media,
.apl-modal-media,
.sifency-mcp-modal-media {
   background: var(--body-color, #EDEFEA);
   display: flex;
   align-items: center;
   justify-content: center;
   overflow: hidden;
}

.agt-modal-media img,
.agt-modal-media video,
.std-modal-media img,
.std-modal-media video,
.apl-modal-media img,
.apl-modal-media video,
.sifency-mcp-modal-media img,
.sifency-mcp-modal-media video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.agt-media-gallery,
.std-media-gallery,
.apl-media-gallery,
.sifency-mcp-media-gallery {
   display: flex;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   width: 100%;
   height: 100%;
}

.agt-gallery-img,
.std-gallery-img,
.apl-gallery-img,
.sifency-mcp-gallery-img {
   scroll-snap-align: start;
   width: 100%;
   height: 100%;
   object-fit: cover;
   flex-shrink: 0;
}
.apl-media-empty {
   width: 100%;
   height: 100%;
   min-height: 240px;
   background: var(--secondary-color, #F8F9F5);
}
.sifency-mcp-modal-details{
   max-height: min(430px, 95vh);
}
.agt-modal-details{
   max-height: min(400px, 95vh);
}
@media (max-width: 767px) {

   .agt-modal-split,
   .std-modal-split,
   .sifency-mcp-modal-split {
      grid-template-columns: 1fr;
      grid-template-rows: auto 1fr;
      overflow: hidden;
   }

   .agt-modal-split.agt-media-left,
   .std-modal-split.std-media-left,
   .sifency-mcp-modal-split.sifency-mcp-media-left {
      direction: ltr;
   }

   .apl-modal-split {
      flex-direction: column !important;
      overflow: hidden;
   }

   .agt-modal-media,
   .std-modal-media,
   .apl-modal-media,
   .sifency-mcp-modal-media {
      min-height: 220px;
      flex-shrink: 0;
   }

   .agt-modal-details,
   
   .sifency-mcp-modal-details {
      padding: 24px;
      max-height: min(430px, 95vh);
      overflow-y: auto;
   }
   .std-modal-details{
      height: fit-content;
   }

   .apl-modal-details {
      padding: 24px;
      width: 100% !important;
      max-height: 45vh;
      flex: none;
      overflow-y: auto;
   }

   .agt-category-select,
   .std-category-select {
      margin-left: 0;
   }
}

/* =============================================================================
   14. ARCHIVE PAGE HEADER (shared: agt / std / apl / mcp)
   ============================================================================= */
.agt-archive-header,
.std-archive-header,
.apl-archive-header,
.sifency-mcp-archive-header {
   padding: 150px 0 40px;
   border-bottom: 1px solid #E3DACC70;
   margin-bottom: 40px;
   text-align: center;
}

.apl-archive-header-inner,
.apl-archive-wrap {
   margin: 0 auto;
}

.agt-archive-eyebrow,
.std-archive-eyebrow,
.apl-archive-eyebrow,
.sifency-mcp-archive-eyebrow {
   font-size: 12px;
   color: var(--e-global-color-primary);
   text-transform: uppercase;
   letter-spacing: 0.1em;
   margin-bottom: 10px;
}

.agt-archive-title,
.std-archive-title,
.apl-archive-title,
.sifency-mcp-archive-title {
   font-size: clamp(28px, 4vw, 42px);
   color: var(--text-color, #14171C);
   margin: 0 0 12px;
}

.agt-archive-desc,
.std-archive-desc,
.apl-archive-desc,
.sifency-mcp-archive-desc {
   font-size: 14px;
   max-width: 500px;
   margin: auto;
}

.agt-archive-wrap .nav-links,
.std-archive-wrap .pagination,
.std-archive-wrap .nav-links,
.apl-archive-wrap .nav-links,
.sifency-mcp-archive-wrap .nav-links {
   display: flex;
   justify-content: center;
   gap: 12px;
   margin-top: 40px;

   font-size: 13px;
}

.agt-archive-wrap .nav-links a,
.agt-archive-wrap .nav-links span,
.std-archive-wrap .nav-links a,
.std-archive-wrap .nav-links span,
.apl-archive-wrap .nav-links a,
.apl-archive-wrap .nav-links span,
.sifency-mcp-archive-wrap .nav-links a,
.sifency-mcp-archive-wrap .nav-links span {
   padding: 8px 14px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-1, 3px);
   color: var(--text-color, #14171C);
}

.agt-archive-wrap .nav-links .current,
.std-archive-wrap .nav-links .current,
.apl-archive-wrap .nav-links .current,
.sifency-mcp-archive-wrap .nav-links .current {
   background: var(--e-global-color-primary);
   border-color: var(--e-global-color-primary);
   color: var(--white-color, #FFFFFF);
}

/* Breadcrumbs (single-page templates: agt / apl / mcp) */
.agt-breadcrumb,
.apl-breadcrumb,
.std-breadcrumb,
.sifency-mcp-breadcrumb {
   font-size: 12px;
   color: var(--lead-paragraph-color, #6B6F68);
   gap: 8px;
}

.agt-breadcrumb a:hover,
.apl-breadcrumb a:hover,
.sifency-mcp-breadcrumb a:hover {
   color: var(--e-global-color-primary);
}

.agt-breadcrumb-current,
.apl-breadcrumb-current,
.sifency-mcp-breadcrumb-current {
   color: var(--text-color, #14171C);
}
/* =============================================================================
   15. AI PROMPT LIBRARY — CARD BUTTON, VARIABLES, PROMPT TEXT, LOCK
   ============================================================================= */
.sifency-group-buttons,
.sifency-group-button,
.sifency-button-group {
   display: flex;
   align-items: center;
   gap: 10px;
}

.agt-try-btn:hover {
   background-color: var(--e-global-color-primary);
   color: var(--white-color);
}

.sifency-apl-card-btn {
   display: block;
   width: 100%;
   text-align: center;
   font-size: 12px;
   border-radius: var(--theme-button-border-radius, 6px);
   cursor: pointer;
   transition: background .15s ease, color .15s ease, border-color .15s ease;
   margin-top: 10px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   background: transparent;
   color: var(--text-color, #14171C);
   margin-bottom: 15px;
}

.sifency-apl-card-btn.sifency-apl-btn-free:hover {
   background: var(--black-color);
   color: var(--white-color);
   border: 1px solid var(--black-color);
}

.sifency-apl-card-btn.apl-btn-premium {
   background: var(--e-global-color-accent, #FFD400);
   color: var(--black-color, #14171C);
   border-color: var(--e-global-color-accent, #FFD400);
}

.sifency-apl-card-btn.apl-btn-premium:hover {
   background: var(--text-color, #14171C);
   color: var(--white-color, #FFFFFF);
   border: 1px solid var(--text-color, #14171C);
}

.apl-variables {
   display: flex;
   flex-direction: column;
   gap: 12px;
   margin: 0 0 20px;
}

.apl-variable-field {
   display: flex;
   flex-direction: column;
   gap: 4px;

   font-size: 11px;
   color: var(--lead-paragraph-color, #6B6F68);
}

.apl-variable-field input {
   font-size: 14px;
   padding: 8px 12px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   color: var(--text-color, #14171C);
   background: var(--white-color, #FFFFFF);
   border-radius: 0.625rem;
}

.apl-prompt-text {
   font-size: 13px;
   line-height: 1.6;
   color: var(--text-color, #14171C);
   background: var(--body-color, #EDEFEA);
   padding: 16px;
   border-radius: var(--theme-border-radius-level-2, 6px);
   white-space: pre-wrap;
   word-break: break-word;
   margin-bottom: 20px;
}

.apl-prompt-teaser {
   font-size: 14px;
   line-height: 1.6;
   color: var(--lead-paragraph-color, #6B6F68);
   margin-bottom: 20px;
}

.apl-lock {
   text-align: center;
   padding: 24px;
   background: var(--body-color, #EDEFEA);
   border-radius: var(--theme-border-radius-level-2, 6px);
   margin-bottom: 10px;
}

.apl-lock p {
   font-size: 13px;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 0 0 12px;
}
.said-outline-btn i,
.said-primary-btn i,
.said-secondary-btn i,
.apl-unlock-btn i{
   font-size: 10px;
}
.said-outline-btn,
.said-primary-btn,
.said-secondary-btn,
.apl-unlock-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 2px;
   background: var(--text-color, #14171C);
   color: var(--white-color, #FFFFFF);
   font-size: 13px;
   padding: var(--theme-button-padding);
   border-radius: var(--theme-button-border-radius, 6px);
   text-decoration: none;
   transition: opacity .15s ease, background .15s ease;
   border: none;
   cursor: pointer;
   line-height: normal;
}
.said-outline-btn:hover{
   background-color: var(--e-global-color-a3abcf3);
   color: inherit;
   border: 1px solid var(--e-global-color-a3abcf3);
}
.said-outline-btn{
   background-color: transparent;
   border: 1px solid var(--theme-border-color);
   color: var(--black-color);
}
.said-secondary-btn:hover{
   background-color: var(--e-global-color-a3abcf3);
   color: inherit;
}
.said-secondary-btn{
   background-color: var(--body-color);
   color: var(--black-color);
}
.apl-unlock-btn{
   width: 100%;
}
.said-primary-btn:hover,
.apl-unlock-btn:hover {
   background-color: var(--e-global-color-primary);
   color: var(--white-color, #FFFFFF);
}
.std-visit-btn{
   width: fit-content;
}

.apl-unlock-btn svg {
   width: 12px;
   height: 12px;
   stroke: currentColor;
   fill: none;
}

/* =============================================================================
   16. SINGLE PAGE TEMPLATES
   ============================================================================= */
.agt-single-badges,
.apl-single-badges,
.sifency-mcp-single-badges {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 16px;
   align-items: center;
}

.agt-badge-inline,
.apl-badge-inline,
.sifency-mcp-badge-inline {
   position: static;
}

.agt-single-title-row,
.sifency-mcp-single-title-row {
   display: flex;
   align-items: center;
   margin-bottom: 4px;
}

.agt-single-title-row {
   gap: 14px;
}

.sifency-mcp-single-title-row {
   gap: 10px;
}

.agt-single-tagline,
.sifency-mcp-single-tagline {
   font-size: 15px;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 12px 0 16px;
}

.agt-single-actions,
.sifency-mcp-single-actions {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-top: 20px;
}

/* MCP's action row can wrap onto a second line (install button + links + upvote) */
.sifency-mcp-single-actions {
   flex-wrap: wrap;
}

.agt-single-added,
.apl-single-added,
.sifency-mcp-single-added {

   font-size: 12px;
   color: var(--lead-paragraph-color, #6B6F68);
   margin-top: 16px;
}

.agt-single-media,
.sifency-mcp-single-media {
   border-radius: var(--theme-border-radius-level-3, 8px);
   overflow: hidden;
   background: var(--body-color, #EDEFEA);
   min-height: 320px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 10px;
}

.agt-single-media img,
.agt-single-media video,
.sifency-mcp-single-media img,
.sifency-mcp-single-media video {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.agt-single-desc-body p,
.sifency-mcp-single-desc-body p {
   font-size: 15px;
   line-height: 1.7;
   color: var(--lead-paragraph-color, #6B6F68);
   margin-bottom: 14px;
}

.agt-single-report,
.apl-single-report,
.sifency-mcp-single-report {
   padding-bottom: 40px;
   font-size: 12.5px;
}

.agt-single-report a,
.apl-single-report a,
.sifency-mcp-single-report a {
   color: var(--e-global-color-primary);
}
@media (max-width: 860px) {

   .agt-single-hero,
   .apl-single-hero,
   .sifency-mcp-single-hero {
      grid-template-columns: 1fr;
   }

   .agt-single-media,
   .apl-single-media,
   .sifency-mcp-single-media {
      order: -1;
      min-height: 240px;
   }
}

/* ---- Prompt / MCP (single-prompt.php, single-mcp-server.php) — 40px hero-bottom variant ---- */
.apl-single-hero,
.sifency-mcp-single-hero {
   display: flex;
   justify-content: space-between;
   gap: 30px;
   align-items: start;
}

.apl-single-title {

   font-weight: 600;
   font-size: clamp(26px, 3.4vw, 36px);
   color: var(--text-color, #14171C);
   margin: 0 0 12px;
}

.apl-single-desc {
   font-size: 15px;
   line-height: 1.6;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 0;
}

.apl-single-media {
   border-radius: var(--theme-border-radius-level-3, 8px);
   overflow: hidden;
   min-height: 320px;
}

.apl-single-body {
   max-width: 760px;
   padding-bottom: 40px;
}

.apl-single-source {

   font-size: 13px;
}

.apl-single-source a {
   color: var(--e-global-color-primary);
}

/* =============================================================================
   17. SUBMISSION FORM (standalone, no overlap with the widgets above)
   ============================================================================= */
.sifency-submission-form {
   display: flex;
   flex-direction: column;
   gap: 20px;
}

.sf-field {
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.sf-required {
   color: var(--e-global-color-accent, #FFD400);
}

.sf-hint {
   font-size: 12px;
   color: var(--lead-paragraph-color, #6B6F68);
}

.sf-thumbnail-input {
   font-size: 13px;
}

.sf-thumbnail-preview {
   display: block;
   width: 100%;
   max-width: 220px;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   border-radius: var(--theme-border-radius-level-2, 6px);
   border: 1px solid var(--theme-border-color, #D3D6CC);
   margin-top: 8px;
}

.sf-honeypot {
   position: absolute;
   left: -9999px;
   width: 1px;
   height: 1px;
   overflow: hidden;
}

.sf-status {
   font-size: 13px;
   min-height: 0;
}

.sf-status-error {
   color: #C0392B;
   background: rgba(192, 57, 43, 0.08);
   padding: 12px 14px;
   border-radius: var(--theme-border-radius-level-1, 3px);
}

.sf-submit {
   align-self: flex-start;
   border: none;
   cursor: pointer;
}

.sf-submit:disabled {
   opacity: 0.6;
   cursor: not-allowed;
}

.sf-success {
   background: var(--secondary-color, #F8F9F5);
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-2, 6px);
   padding: 24px;
   text-align: center;
}

.sf-success p {
   font-size: 14px;
   color: var(--text-color, #14171C);
   margin: 0;
}

/* =============================================================================
   17b. ACCOUNT WIDGET (Login / Register / Reset)
   ============================================================================= */
.sifency-account-widget .apl-grid,
.sifency-account-widget .agt-grid,
.sifency-account-widget .std-grid,
.sifency-account-widget .sifency-mcp-grid {
   column-count: 2 !important;
}

.said-acct-upvote-group-title {
   font-size: 13px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 20px 0 10px;
}

.said-acct-upvote-group-title:first-child {
   margin-top: 0;
}
.is-dashboard .said-acct-tabs {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 6px;
	margin-bottom: 20px;
}
.said-dashboard-content{
	width: 80%;
}
.said-acct-tabs{
	gap: 15px;
	display: flex;
}
.said-acct-tab,
.said-acct-tab a {
	font-family: inherit;
	font-size: 14px;
	color: var(--black-color);
}
.said-acct-tab {
	position: relative;
	display: flex;
	align-items: center;
	text-align: left;
	border: none;
	background: none;
	cursor: pointer;
	padding: 10px 16px;
	border-radius: 8px;
	opacity: 0.5;
	overflow: hidden;
	transition: color .3s ease, opacity .3s ease, background-color .3s ease;
}
.said-acct-tab a {
	border: none;
	background: none;
	cursor: pointer;
	padding: 0;
	text-decoration: none;
	color: inherit;
}
.said-acct-tab::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 3px;
	height: 0%;
	border-radius: 0 3px 3px 0;
	background: var(--e-global-color-primary);
	transform: translateY(-50%);
	transition: height .3s ease;
}
.said-acct-tab.is-active,
.said-acct-tab:hover {
	color: var(--e-global-color-primary);
	opacity: 1;
	background-color: color-mix(in srgb, var(--e-global-color-primary) 8%, transparent);
}
.said-acct-tab.is-active a,
.said-acct-tab:hover a {
	color: var(--e-global-color-primary);
}
.said-acct-tab.is-active::before,
.said-acct-tab:hover::before {
	height: 60%;
}
.said-acct-tab:focus-visible {
	outline: 2px solid var(--e-global-color-primary);
	outline-offset: 2px;
}
.said-acct-dashboard .aid-acct-tabs{
	min-width: 200px;
}
@media (prefers-reduced-motion: reduce) {
	.said-acct-tab,
	.said-acct-tab::before {
		transition: none;
	}
}

.said-acct-panel {
   display: none;
   flex-direction: column;
   gap: 20px;
}

.said-acct-panel.is-active {
   display: flex;
}
form[data-action="said_request_reset"] button{
   margin-top: 10px;
}
form[data-action="said_request_reset"] {
   margin-top: 20px;
}
.said-acct-remember {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--lead-paragraph-color, #6B6F68);
   cursor: pointer;
}

.said-acct-reset-error {
   font-size: 13px;
   color: #C0392B;
   background: rgba(192, 57, 43, 0.08);
   padding: 12px 14px;
   border-radius: var(--theme-border-radius-level-1, 3px);
   margin-bottom: 16px;
}

.said-acct-logged-in {
   display: flex;
   flex-direction: column;
   gap: 16px;
   align-items: flex-start;
}

.said-acct-status-card {
   display: flex;
   align-items: flex-start;
   gap: 12px;
   padding: 16px;
   border-radius: var(--theme-border-radius-level-2, 6px);
   border: 1px solid var(--theme-border-color, #D3D6CC);
   background: var(--e-global-color-a3abcf3, #F8F9F5);
   margin-bottom: 15px;
}

.said-acct-status-card p {
   margin: 4px 0 0;
   font-size: 13px;
   color: var(--lead-paragraph-color, #6B6F68);
}

.said-acct-status-dot {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   margin-top: 7px;
   flex-shrink: 0;
}
.sifency-account-widget.is-dashboard{
   max-width: 100%;
}

.sifency-account-widget {
    max-width: 420px; 
    width: 100%;
}

.said-acct-status-active .said-acct-status-dot {
   background: var(--e-global-color-primary);
}

.said-acct-status-inactive .said-acct-status-dot {
   background: #9AA093;
}
.said-acct-empty {
   font-size: 13px;
   color: var(--lead-paragraph-color, #6B6F68);
   text-align: center;
   padding: 24px 0;
}

.said-acct-list {
   list-style: none;
   margin: 0;
   padding: 0;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.said-acct-list-item {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   padding: 12px 14px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-2, 6px);
   flex-wrap: wrap;
}

.said-acct-list-title {
   font-size: 14px;
   font-weight: 500;
   color: var(--text-color, #14171C);
   text-decoration: none;
}

a.said-acct-list-title:hover {
   color: var(--e-global-color-primary);
}

.said-acct-submission-item {
   flex-direction: column;
   align-items: flex-start;
}

.said-acct-submission-main {
   display: flex;
   align-items: center;
   gap: 8px;
   flex-wrap: wrap;
}

.said-acct-submission-type {
   font-size: 10px;
   text-transform: uppercase;
   letter-spacing: 0.04em;
   color: var(--lead-paragraph-color, #6B6F68);
   background: var(--body-color, #EDEFEA);
   padding: 2px 8px;
   border-radius: 4px;
}

/* Free / Premium access-badge pill shape, shared with the account
   dashboard's generic status badge. apl-access-premium folded in here
   explicitly (rather than relying on it falling through from
   .apl-access-badge in Section 5) so free and premium badges always
   share the exact same shape — only Section 8 differs their color. */
span.apl-access-badge.apl-access-free,
span.apl-access-badge.apl-access-premium,
.said-acct-status-badge {
   font-size: 11px;
   font-weight: 500;
   padding: 3px 10px;
   border-radius: 999px;
}

.said-acct-status-badge-pending {
   color: var(--black-color, #14171C);
   background: rgba(232, 163, 61, 0.25);
}

.said-acct-status-badge-published {
   color: var(--e-global-color-primary, #2D6BFF);
   background: color-mix(in srgb, var(--e-global-color-primary, #2D6BFF) 10%, transparent);
}

.said-acct-status-badge-rejected {
   color: #C0392B;
   background: rgba(192, 57, 43, 0.08);
}

.said-acct-rejection-reason {
   font-size: 12px;
   color: var(--lead-paragraph-color, #6B6F68);
   margin: 4px 0 0;
   width: 100%;
}

/* =============================================================================
   COLLECTIONS: "Add to Collection" button + popover (used on every card
   across all 4 directory widgets) and the "My Collections" dashboard tab.
   ============================================================================= */
.said-collect-popover {
   /* position is set inline (JS) as `fixed`, viewport-relative -- this
      lets the same popover render correctly both on a plain card (over
      the page) and inside an open item-detail <dialog> (over its
      top-layer content), without being clipped by the dialog's own
      `overflow: hidden`. */
   z-index: 999999;
   width: 260px;
   max-height: 320px;
   overflow-y: auto;
   background: var(--white-color, #FFFFFF);
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-2, 6px);
   box-shadow: 0 16px 40px -12px rgba(20, 23, 28, 0.35);
   padding: 10px;
}

.said-collect-loading,
.said-collect-empty {
   font-size: 13px;
   color: var(--lead-paragraph-color, #6B6F68);
   text-align: center;
   padding: 12px 4px;
   margin: 0;
}

.said-collect-list {
   display: flex;
   flex-direction: column;
   gap: 2px;
   max-height: 220px;
   overflow-y: auto;
}

.said-collect-item {
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   color: var(--text-color, #14171C);
   padding: 6px 4px;
   border-radius: 4px;
   cursor: pointer;
}

.said-collect-item:hover {
   background: var(--body-color, #EDEFEA);
}

.said-collect-item span:first-of-type {
   flex: 1;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.said-collect-count {
   font-size: 11px;
   color: var(--lead-paragraph-color, #6B6F68);
}

.said-collect-new {
   display: flex;
   gap: 6px;
   margin-top: 8px;
   padding-top: 8px;
   border-top: 1px solid var(--theme-border-color, #D3D6CC);
}

.said-collect-new input {
   flex: 1;
   font-size: 13px;
   padding: 6px 8px;
   min-width: 0;
}

.said-collect-new button {
   font-size: 12px;
   font-weight: 500;
   padding: 6px 12px;
   border: none;
   background: var(--e-global-color-primary);
   color: var(--white-color, #FFFFFF);
   cursor: pointer;
   flex-shrink: 0;
}

.said-acct-new-collection-form {
   display: flex;
   gap: 10px;
   margin-bottom: 24px;
}

.said-acct-new-collection-form input {
   flex: 1;
   font-size: 14px;
   padding: 10px 14px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-2, 6px);
}

.said-acct-collections {
   display: flex;
   flex-direction: column;
   gap: 28px;
}

.said-acct-collection-head {
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 12px;
   margin-bottom: 14px;
   padding-bottom: 10px;
   border-bottom: 1px solid var(--theme-border-color, #D3D6CC);
}

.said-acct-collection-title {
   font-size: 16px;
   font-weight: 600;
   color: var(--text-color, #14171C);
   margin: 0;
}

.said-acct-collection-actions {
   display: flex;
   gap: 8px;
   flex-shrink: 0;
}

.said-acct-collection-rename,
.said-acct-collection-delete {
   font-size: 12px;
   padding: 5px 10px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: 4px;
   background: none;
   color: var(--lead-paragraph-color, #6B6F68);
   cursor: pointer;
}

.said-acct-collection-rename:hover {
   background: var(--e-global-color-primary);
   border: 1px solid var(--e-global-color-primary);
   border-radius: 4px;
}

.said-acct-collection-delete:hover {
   background: #C0392B;
   border-color: #C0392B;
   color: #fff;
   border: 1px solid #C0392B;
   border-radius: 4px;
}

/* =============================================================================
   18. MCP SERVER SHOWCASE — UNIQUE BITS
   No equivalent exists in agt/std/apl, so these stay fully separate:
   the official-server toggle, the small card logo + official check
   (wired into section 6's card-head), and the install command row.
   ============================================================================= */
.sifency-mcp-official-toggle {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   font-size: 12px;
   color: var(--text-color, #14171C);
   cursor: pointer;
   user-select: none;
}

.sifency-mcp-official-checkbox {
   accent-color: var(--e-global-color-primary);
   width: 14px;
   height: 14px;
   cursor: pointer;
}

.sifency-mcp-install-row {
   display: flex;
   align-items: center;
   gap: 8px;
   background: var(--body-color, #EDEFEA);
   border: 1px solid var(--e-global-color-8d7a16e, #D3D6CC);
   border-radius: var(--theme-border-radius-level-2, 6px);
   padding: 10px 12px;
   margin: 4px 0 16px;
}
.sifency-mcp-install-row{
   width: 100%;
   max-width: 448px;
   min-width: 0;
   box-sizing: border-box;
   overflow: hidden;
}
.sifency-mcp-install-code {
   flex: 1 1 0%;
   width: 0;
   min-width: 0;
   max-width: 100%;
   overflow-x: auto;
   white-space: nowrap;
   color: var(--black-color);
   background-color: transparent;
}

.sifency-mcp-install-copy {
   flex-shrink: 0;
   font-size: 11px;
   font-weight: 500;
   padding: 6px 12px;
   border: 1px solid var(--theme-border-color, #D3D6CC);
   border-radius: var(--theme-border-radius-level-1, 3px);
   background: var(--secondary-color, #F8F9F5);
   color: var(--text-color, #14171C);
   cursor: pointer;
}

.sifency-mcp-install-copy:hover {
   background: var(--e-global-color-primary);
   color: var(--white-color);
   border: 1px solid var(--e-global-color-primary);
   border-radius: var(--theme-border-radius-level-1, 3px);
}

.sifency-mcp-modal-links {
   display: flex;
   gap: 10px;
   flex-wrap: wrap;
   margin-bottom: 16px;
}

/* =============================================================================
   19. LOADING / CONTENT SKELETON STATES (shared: agt / std / apl / mcp / sf)
   Generic shimmer placeholders shown while grid and modal content is being
   fetched over AJAX. Deliberately widget-agnostic (one shape covers all
   card types) so it doesn't need to track each widget's card markup.
   ============================================================================= */
@keyframes sifency-skeleton-shimmer {
	0%   { background-position: -400px 0; }
	100% { background-position: 400px 0; }
}

.sifency-skeleton-block {
	background-color: rgba(0, 0, 0, .06);
	background-image: linear-gradient(90deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .06) 20%, rgba(0, 0, 0, .12) 40%, rgba(0, 0, 0, 0) 60%);
	background-repeat: no-repeat;
	background-size: 400px 100%;
	animation: sifency-skeleton-shimmer 1.4s ease-in-out infinite;
	border-radius: 8px;
}

/* Grid skeleton — shown on initial load and on filter/search re-fetch,
   replacing the grid the same way a real result set would. */
.sifency-skeleton-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 20px;
}

.sifency-skeleton-card {
	border-radius: 12px;
	overflow: hidden;
	border: 1px solid rgba(0, 0, 0, .06);
	background: #fff;
}

.sifency-skeleton-card .sifency-skeleton-media {
	aspect-ratio: 16 / 9;
	border-radius: 0;
}

.sifency-skeleton-card .sifency-skeleton-body {
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.sifency-skeleton-line {
	height: 12px;
	width: 100%;
}

.sifency-skeleton-line.is-title {
	height: 16px;
	width: 70%;
}

.sifency-skeleton-line.is-short {
	width: 40%;
}

.sifency-skeleton-row {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}

.sifency-skeleton-chip {
	height: 22px;
	width: 64px;
	border-radius: 999px;
}

/* "Busy" overlay — shown over the EXISTING cards during a filter/search
   re-fetch (the skeleton grid above only replaces content on first load
   or an empty result set; see fetchAgents()/fetchTools()/fetchMcp()/
   AplController.fetchPrompts() in ai.js, all of which toggle this class
   via classList + aria-busy). Without this rule the `.is-loading` class
   the JS was already adding had no visual effect at all. */
@keyframes sifency-spinner-spin {
	to { transform: rotate(360deg); }
}

.agt-grid.is-loading,
.std-grid.is-loading,
.apl-grid.is-loading,
.sifency-mcp-grid.is-loading {
	position: relative;
	pointer-events: none;
}

.agt-grid.is-loading::after,
.std-grid.is-loading::after,
.apl-grid.is-loading::after,
.sifency-mcp-grid.is-loading::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(255, 255, 255, .55);
	z-index: 5;
	border-radius: 12px;
}

.agt-grid.is-loading::before,
.std-grid.is-loading::before,
.apl-grid.is-loading::before,
.sifency-mcp-grid.is-loading::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 3px solid rgba(0, 0, 0, .1);
	border-top-color: var(--e-global-color-primary, #4C5B3C);
	border-radius: 50%;
	z-index: 6;
	animation: sifency-spinner-spin .8s linear infinite;
}

/* Modal skeleton — mirrors the real .{prefix}-modal-split layout (media
   column + details column with chip row and button row), shown the
   instant the dialog opens and replaced once the AJAX response lands. */
.sifency-skeleton-modal-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 545px;
	max-height: 545px;
}

.sifency-skeleton-modal-details {
	padding: 40px;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.sifency-skeleton-modal-media-col {
	min-height: 300px;
}

.sifency-skeleton-modal-media-col .sifency-skeleton-block {
	width: 100%;
	height: 100%;
	min-height: 300px;
	border-radius: 0;
}

.sifency-skeleton-modal-actions {
	display: flex;
	gap: 10px;
	margin-top: auto;
	padding-top: 10px;
}

.sifency-skeleton-button {
	height: 44px;
	width: 140px;
	border-radius: 8px;
}

.sifency-skeleton-button.is-icon {
	width: 44px;
}

@media (max-width: 767px) {
	.sifency-skeleton-modal-split {
		grid-template-columns: 1fr;
		min-height: auto;
	}

	.sifency-skeleton-modal-media-col,
	.sifency-skeleton-modal-media-col .sifency-skeleton-block {
		min-height: 220px;
	}
}

/* Dim (rather than blank out) content already on screen during a
   background re-fetch — e.g. clicking a filter chip while a grid is
   already populated. */
[aria-busy="true"] {
	position: relative;
	opacity: .55;
	pointer-events: none;
	transition: opacity .15s ease;
}

@media (prefers-reduced-motion: reduce) {
	.sifency-skeleton-block {
		animation: none;
	}
}
@media screen and (max-width:991px) {
   .sifency-ai-layout-left{
      margin-top: 40px !important;
   }
   .sifency-ai-layout-right{
      display: flex;
      align-items: center;
      justify-content: center;
   }
}
.sifency-ai-layout-right .sifency-ai-layout-right-inner{
   background-color: #F7F4E8;
   padding: 30px;
   padding-bottom: 100px;
   border-radius: 15px;
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   border-top: 1px solid var(--e-global-color-5a32f0f);
   border-left: 1px solid var(--e-global-color-5a32f0f);
   border-right: 1px solid var(--e-global-color-5a32f0f);
}
.sifency-mcp-single-hero .sifency-ai-layout-right-inner{
   max-width: 500px;
}
.sifency-ai-layout-right-inner{
   max-width: 411px;
}
.sifency-svg-shape{
   width: 100%;
}
.sifency-svg-shape,
.sifency-ai-layout-right-inner .sifency-svg-shape{
   position: absolute;
   bottom: 0px;
   width: 90%;
   line-height: 80%;
   display: inline-flex;
   align-items: center;
   justify-content: center;
}
.sifency-svg-related-button:hover{
   color: var(--white-color);
   background-color: var(--themecolor);
}
.sifency-svg-related-button{
   position: absolute;
   bottom: 0px;
   display: inline-flex;
   align-items: center;
   font-size: 14px;
   z-index: 5;
   background-color: var(--black-color);
}
.sifency-ai-layout-right .apl-variable-field input{
   background-color: transparent;
}

span.std-card-logo {
    max-width: 30px;
    border-radius: 30px;
}

/* =============================================================================
   HARDEN THE NATIVE [hidden] ATTRIBUTE
   Several elements rely on the plain HTML `hidden` attribute (not a class)
   to stay invisible: the AI Prompt Library's full-text source textarea
   (only ever meant to be read by the copy-to-clipboard JS, never seen),
   and the submission form's success message. The `hidden` attribute's
   default `display: none` lives in the browser's lowest-priority
   user-agent stylesheet, so ANY theme-level rule that sets `display` on
   `textarea`, `form`, or a generic wrapper (a very common form-styling
   reset) silently wins and un-hides it — regardless of selector
   specificity, since author CSS always beats the UA stylesheet. Pinning
   these explicitly, with !important, makes them un-hide-able by anything
   except this plugin's own JS toggling the attribute off.
   ============================================================================= */
.apl-prompt-source[hidden],
.sf-success[hidden],
form[hidden] {
   display: none !important;
}

/* =============================================================================
   CARD DISPLAY TOGGLES (Elementor "Card Display" section switchers)
   Each widget's render() adds one of these classes to its wrapper element
   when the matching switcher is turned off; the actual hide/show happens
   here, in one shared place, instead of per-widget inline styles.
   ============================================================================= */
.apl-hide-excerpt .apl-card-desc,
.apl-hide-premium-badge .apl-access-premium,
.apl-hide-category-tag .apl-category-tag,
.apl-hide-fav-btn .apl-fav-btn,
.apl-hide-fav-count .apl-fav-count,
.apl-hide-media .apl-card-media,
.agt-hide-media .agt-card-media,
.std-hide-media .std-card-media,
.sifency-mcp-hide-media .sifency-mcp-card-media {
   display: none !important;
}
.sifency-mcp-install-code {
  scrollbar-width: none;
}

.std-archive-header-inner{
   text-align: center;
}

.sifency-mcp-modal .std-card-letter-avatar {
   margin: 0px;
   padding: 0px;
}
.sifency-group-element,
.agt-head-in{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 5px;
}
.sifency-group-element-between{
   display: flex;
   align-items: center;
   justify-content: space-between;
}
.w-100{
   width: 100%;
}
.std-single-logo{
   max-width: 50px;
}
.std-single-added,
.said-single-tagline,
.std-single-tagline{
   font-size: 14px;
   margin: 0px;
}
.std-single-badges{
   margin-bottom: 12px;
}
.std-single-title-row{
   margin-bottom: 20px;
}
.std-single-title{
   margin-bottom: 4px;
}
.std-single-media video,
.std-single-media img{
   border-radius: 1rem;
   margin-bottom: 10px;
   max-width: 100%;
}
.date-and-upvote{
   margin-bottom: 35px;
   width: 100%;
   justify-content: space-between;
}
.sifency-ai-single-report{
   font-size: 14px;
   text-align: center;
}
.std-single-badges{
   display: flex;
   gap: 10px;
}
.std-single-badges .std-pricing-tag,
.std-single-badges .std-category-tag{
   font-size: 12px;
}
.std-breadcrumb{
   margin-bottom: 15px;
}
.sifency-group-btn{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 7px;
}
/* Standalone std single-page featured badge — kept separate from the
   shared corner-badge rule in Section 5 because it uses its own
   right/top offsets, but brought onto the same brand accent token so
   it matches every other featured badge. */
.std-single-badges .std-featured-badge{
   position: absolute;
   right: 15px;
   top: 15px;
   font-size: 14px;
   background-color: var(--e-global-color-accent, #FFD400);
   color: var(--black-color);
   border-radius: 4px;
   padding: 0px 8px;
}
.sifency-ai-layout-right .agt-single-tagline{
   margin-top: 10px;
}
.sifency-ai-layout-right .agt-chip-row{
   margin: 30px 0px;
}
.sifency-ai-layout-right .agt-modal-autonomy-label{
   margin: 0px;
}

.sifency-mcp-single-title-row{
   margin-bottom: 30px;
   margin-top: 15px;
}
.sifency-mcp-single-info{
   margin-bottom: 50px;
}
.sifency-mcp-single-actions.sifency-svg-related-button{
   background-color: transparent;
}

.said-login-modal,
.apl-modal-details,
.std-modal-details,
.sifency-mcp-modal-details,
.agt-modal-details {
	/* Firefox */
	scrollbar-width: thin;
	scrollbar-color: var(--theme-border-color) var(--body-color);
}

/* WebKit browsers (Chrome, Safari, Edge) — was 1px, which is
   functionally scrollable but visually invisible; bumped to a real,
   grabbable thin scrollbar so it actually shows. */
.said-login-modal::-webkit-scrollbar,
.apl-modal-details::-webkit-scrollbar,
.std-modal-details::-webkit-scrollbar,
.sifency-mcp-modal-details::-webkit-scrollbar,
.agt-modal-details::-webkit-scrollbar {
	width: 6px;
}

.said-login-modal::-webkit-scrollbar-track,
.apl-modal-details::-webkit-scrollbar-track,
.std-modal-details::-webkit-scrollbar-track,
.sifency-mcp-modal-details::-webkit-scrollbar-track,
.agt-modal-details::-webkit-scrollbar-track {
	background: var(--body-color);
}

.said-login-modal::-webkit-scrollbar-thumb,
.apl-modal-details::-webkit-scrollbar-thumb,
.std-modal-details::-webkit-scrollbar-thumb,
.sifency-mcp-modal-details::-webkit-scrollbar-thumb,
.agt-modal-details::-webkit-scrollbar-thumb {
	background: var(--theme-border-color);
	border-radius: 3px;
}

.said-login-modal::-webkit-scrollbar-thumb:hover,
.apl-modal-details::-webkit-scrollbar-thumb:hover,
.std-modal-details::-webkit-scrollbar-thumb:hover,
.sifency-mcp-modal-details::-webkit-scrollbar-thumb:hover,
.agt-modal-details::-webkit-scrollbar-thumb:hover {
	background: var(--themecolor);
}
.sifency-mcp-install-code::-webkit-scrollbar,
.sifency-mcp-install-code::-webkit-scrollbar {
  width: 1px;
  height: 1px;
}
.sifency-mcp-install-code::-webkit-scrollbar-track,
.sifency-mcp-install-code::-webkit-scrollbar-track {
  background: transparent;
}
.sifency-mcp-install-code::-webkit-scrollbar-thumb,
.sifency-mcp-install-code::-webkit-scrollbar-thumb {
  border-radius: 1px;
}

.sifency-mcp-official-toggle {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    user-select: none;
}

/* Switch Track */
.sifency-mcp-official-checkbox {
    appearance: none;
    width: 42px;
    height: 24px;
    background-color: var(--e-global-color-8d7a16e);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background-color 0.3s;
    outline: none;
}

/* Switch Knob */
.sifency-mcp-official-checkbox::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    top: 3px;
    left: 3px;
    background-color: #fff;
    transition: transform 0.3s;
}

/* Checked State */
.sifency-mcp-official-checkbox:checked {
    background-color: var(--e-global-color-primary); /* Green color */
}

.sifency-mcp-official-checkbox:checked::before {
    transform: translateX(18px);
}