/* StoryLens static reference, scoped to marketplace only to avoid affecting profile/admin. */
.market-page{--mk-a:#7c5cff;--mk-b:#22d3ee;--mk-muted:#a6b2c7;--mk-border:rgba(255,255,255,.13);max-width:1200px;margin:0 auto;padding:12px 20px 65px;color:#eef2ff;font-family:Inter,system-ui,sans-serif}
.market-page *{box-sizing:border-box}.market-page a{color:inherit;text-decoration:none}.market-brand{height:138px;display:flex;align-items:center}.market-brand img{max-width:370px;width:100%;height:117px;object-fit:contain;object-position:left center}.market-hero{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:112px;padding:16px 22px;border:1px solid var(--mk-border);border-radius:24px;background:radial-gradient(ellipse at 80% 5%,rgba(34,211,238,.16),transparent 50%),linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.06));box-shadow:0 10px 32px rgba(2,6,23,.35)}
.market-hero h1{margin:0 0 4px;font-size:clamp(25px,3.5vw,42px);line-height:1.2;font-weight:800;letter-spacing:-.035em}.market-hero p{margin:0;color:#d1d5db;font-size:14px}.market-actions{display:flex;gap:8px}.market-iconbtn{cursor:pointer;width:52px;height:42px;border-radius:12px;border:1px solid rgba(148,163,184,.25);background:rgba(255,255,255,.06);display:grid;place-items:center;color:#b9c5da}.market-iconbtn svg{width:19px;height:19px}.market-iconbtn.active{background:linear-gradient(105deg,var(--mk-a),var(--mk-b));color:#0b1020;border-color:transparent}.market-iconbtn:disabled{opacity:.55;cursor:not-allowed}.market-categories{display:flex;flex-wrap:wrap;gap:9px;margin:20px 0;justify-content:center}.market-chip{display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border:1px solid #28334e;border-radius:999px;background:#11182a;font-size:12px;white-space:nowrap;font-weight:650}.market-chip:hover{border-color:#6c80c4}.market-chip.selected{color:#071524;background:linear-gradient(90deg,#7c5cff,#22d3ee);border-color:transparent}.market-count{background:rgba(148,163,184,.18);border-radius:999px;padding:1px 8px;font-size:11px}.market-dot{display:inline-block;width:8px;height:8px;background:#35bdee;border-radius:50%}.market-authors{display:flex;gap:18px;align-items:flex-start;overflow-x:auto;padding:6px 1px 14px;margin:0 0 8px;scrollbar-width:thin}.market-author{flex:0 0 88px;display:flex;flex-direction:column;align-items:center;gap:7px;min-width:0;border:0;background:none;color:#cad3e6;font:500 11px Inter,system-ui;cursor:pointer}.market-author>span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:95px}.market-avatar{display:grid;place-items:center;width:66px;height:66px;border-radius:50%;border:2px solid #354665;background:linear-gradient(140deg,#1d2a4c,#283b60);color:#bcd6ff;font-weight:800;font-size:18px;box-shadow:0 6px 20px #040918}.market-author.selected .market-avatar{background:linear-gradient(130deg,var(--mk-a),var(--mk-b));border-color:#8d7dff;color:#091323;box-shadow:0 0 0 3px rgba(124,92,255,.20)}.market-avatar-all{font-size:12px}.market-controls{display:grid;grid-template-columns:minmax(180px,1fr) 220px 220px;gap:10px;margin:10px 0 18px}.market-controls input,.market-controls select{height:46px;width:100%;border-radius:12px;background-color:#11192c;border:1px solid #2b395a;color:#e6eeff;padding:0 16px;font:500 13px Inter,system-ui;outline:none}.market-controls select{appearance:none;padding-right:41px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='m5 7.5 5 5 5-5' stroke='%23b6c7e9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;background-size:14px}.market-controls input:focus,.market-controls select:focus{border-color:#7b9fff;box-shadow:0 0 0 3px rgba(87,139,255,.15)}.market-controls input::placeholder{color:#8c9bb6}
.market-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}.market-card{min-width:0;display:flex;flex-direction:column;overflow:hidden;background:linear-gradient(180deg,#1d2436,#141b2d);border:1px solid rgba(162,177,213,.15);border-radius:20px;box-shadow:0 8px 25px rgba(0,0,0,.22)}.market-card[hidden]{display:none!important}.market-card-media{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(135deg,#1a2c48,#304169)}.market-card-media img{width:100%;height:100%;display:block;object-fit:cover;transition:transform .2s}.market-card:hover img{transform:scale(1.035)}.market-category-label{position:absolute;top:10px;right:10px;padding:4px 9px;background:rgba(255,255,255,.91);color:#172039;border-radius:999px;font-size:10px;font-weight:700}.market-card-body{display:flex;flex:1;flex-direction:column;padding:14px;gap:9px}.market-card-body h2{font-size:15px;line-height:1.35;font-weight:800;min-height:2.7em;max-height:2.7em;overflow:hidden;margin:0}.market-card-desc{font-size:12px;line-height:1.5;color:#c7d0e0;min-height:3em;max-height:3em;overflow:hidden;margin:0}.market-meta{display:flex;gap:6px;flex-wrap:wrap;font-size:10px;color:#98a8c8}.market-card-tags{display:flex;gap:5px;flex-wrap:wrap;min-height:26px}.market-card-tags span{font-size:10px;border:1px solid rgba(176,189,218,.15);background:rgba(255,255,255,.07);border-radius:7px;padding:4px 7px}.market-card-footer{margin-top:auto;padding-top:12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}.market-cta{flex:1;text-align:center;background:linear-gradient(100deg,var(--mk-a),var(--mk-b));padding:11px 12px;border-radius:9px;color:#091427!important;font-size:12px;font-weight:800}.market-edit{font-size:11px;text-decoration:underline!important;color:#b4cbff!important}.market-empty{text-align:center;padding:35px;color:#aebbd4}.market-cards.is-list{grid-template-columns:1fr}.market-cards.is-list .market-card{flex-direction:row;min-height:185px}.market-cards.is-list .market-card-media{flex:0 0 260px;aspect-ratio:auto}.market-cards.is-list .market-card-body h2,.market-cards.is-list .market-card-desc{min-height:0}
@media(max-width:1050px){.market-cards{grid-template-columns:repeat(3,minmax(0,1fr))}.market-controls{grid-template-columns:1fr 170px 170px}}@media(max-width:720px){.market-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.market-hero{align-items:flex-start;flex-direction:column}.market-controls{grid-template-columns:1fr 1fr}.market-controls input{grid-column:1/-1}.market-brand{height:100px}.market-brand img{height:85px;max-width:290px}.market-cards.is-list .market-card-media{flex-basis:150px}}@media(max-width:480px){.market-page{padding:8px 14px 30px}.market-cards{grid-template-columns:1fr}.market-hero h1{font-size:27px}.market-hero{border-radius:18px}.market-cards.is-list .market-card{flex-direction:column}.market-cards.is-list .market-card-media{aspect-ratio:16/10}.market-controls{grid-template-columns:1fr}.market-controls input{grid-column:auto}}

/* Category chips fill the same container width as the hero on desktop. */
.market-page .market-categories {
    display: flex;
    width: 100%;
    flex-wrap: nowrap;
    justify-content: stretch;
    gap: 9px;
}
.market-page .market-categories > .market-chip {
    flex: 1 1 0;
    min-width: 0;
    justify-content: center;
    padding-inline: 9px;
}
@media (max-width: 920px) {
    .market-page .market-categories {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 7px;
        scrollbar-width: thin;
    }
    .market-page .market-categories > .market-chip {
        flex: 0 0 auto;
        padding-inline: 13px;
    }
}

/* Marketplace article details: match static HTML layout */
.market-authors{display:grid;grid-template-columns:repeat(var(--market-author-count,6),minmax(0,1fr));gap:8px;width:100%;overflow:visible;margin-bottom:14px}
.market-author{width:100%;min-width:0;flex:none;text-align:center;margin:0 auto;justify-self:center}
.market-author>span:last-child{max-width:100%;white-space:normal;line-height:1.3}
.market-card{border-radius:20px;background:linear-gradient(180deg,#262a36,#161a29)}
.market-card-media{aspect-ratio: 16 / 10}
.market-card-body{padding:16px;gap:9px}
.market-card-body h2{font-size:17px;line-height:1.25;min-height:2.5em;max-height:2.5em;letter-spacing:-.025em}
.market-card-desc{font-size:14px;line-height:1.48;min-height:3em;max-height:3em}
.market-meta{font-size:11px;color:#a8b6d2}
.market-card-tags{min-height:32px;align-content:start}
.market-card-tags span{font-size:12px;padding:6px 9px;border-radius:9px}
.market-featured{position:absolute;left:10px;top:10px;padding:6px 10px;border-radius:999px;background:linear-gradient(100deg,#8358f8,#25c2ef);color:#0a1122;font-weight:800;font-size:11px}
.market-price-row{display:flex;justify-content:space-between;align-items:center;gap:10px;min-height:30px;margin-top:4px}
.market-price-row strong{font-size:18px;font-weight:850;color:#f0f4ff}
.market-premium{border-radius:9px;background:linear-gradient(120deg,#fce89d,#e8b74f);box-shadow:0 0 18px rgba(248,194,75,.16);color:#3c2a0a;padding:6px 10px;font-size:11px;font-weight:800}
.market-card-footer{margin-top:auto;padding-top:14px}
.market-cta{min-height:42px;display:flex;align-items:center;justify-content:center;font-size:13px}
.market-admin-flags{display:flex;gap:14px;flex-wrap:wrap;margin:14px 0 20px}
.market-admin-flags label{display:flex;gap:10px;align-items:center;border:1px solid #344363;border-radius:12px;padding:12px 16px;color:#eaf2ff;cursor:pointer}
.market-admin-flags input{accent-color:#7966f9;width:18px;height:18px}
@media(max-width:700px){.market-authors{display:flex;overflow-x:auto;gap:14px}.market-author{flex:0 0 88px}.market-card-body h2{font-size:16px}.market-card-desc{font-size:13px}}

/* Marketplace category filters: use the original static HTML visual design,
   independent of global button styling and support multiple selected chips. */
.market-page .market-categories {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 12px;
    align-items: stretch;
    justify-content: space-between;
    margin: 20px 0 14px;
}
.market-page .market-categories > button.market-chip {
    box-sizing: border-box;
    display: inline-flex;
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    min-height: 40px;
    padding: 7px 12px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid #34405a;
    border-radius: 999px;
    background: linear-gradient(180deg, #202638 0%, #1a2030 100%);
    box-shadow: none;
    color: #f1f5ff;
    font: 600 12px/1.2 Inter, system-ui, sans-serif;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    transition: border-color .16s, background .16s, box-shadow .16s;
}
.market-page .market-categories > button.market-chip:hover:not(.selected) {
    border-color: #7689b8;
    background: #252e44;
    color: #fff;
}
.market-page .market-categories > button.market-chip.selected,
.market-page .market-categories > button.market-chip[aria-pressed="true"] {
    border-color: transparent;
    background: linear-gradient(105deg, #7955fa 0%, #23c4e9 100%);
    box-shadow: none;
    color: #071524;
}
.market-page .market-categories > button.market-chip.selected:hover {
    background: linear-gradient(105deg, #8b66ff 0%, #32d4f2 100%);
    color: #071524;
}
.market-page .market-categories > button.market-chip:focus-visible {
    outline: 2px solid #a6c9ff;
    outline-offset: 3px;
}
.market-page .market-categories .market-count {
    display: inline-flex;
    min-width: 23px;
    justify-content: center;
    border-radius: 999px;
    padding: 3px 7px;
    background: rgba(151, 163, 188, .20);
    color: inherit;
    font-size: 11px;
    line-height: 1;
}
.market-page .market-categories .market-dot { flex: 0 0 9px; height: 9px; border-radius: 50%; }
@media (max-width: 960px) {
    .market-page .market-categories {
        overflow-x: auto;
        justify-content: flex-start;
        padding-bottom: 7px;
        scrollbar-width: thin;
    }
    .market-page .market-categories > button.market-chip {
        flex: 0 0 auto;
        padding-inline: 16px;
    }
}

/* Keep each color dot inside its own category pill. Distribute according to
   content width rather than forcing equal-width pills that overflow. */
.market-page .market-categories > button.market-chip {
    flex: 1 0 auto;
    min-width: max-content;
    overflow: hidden;
    gap: 8px;
}
.market-page .market-categories > button.market-chip > .market-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    min-width: 9px;
    flex: 0 0 9px;
    margin: 0;
    position: static;
}
.market-page .market-categories > button.market-chip > .market-count {
    flex: 0 0 auto;
}
@media (max-width: 1200px) {
    .market-page .market-categories {
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: thin;
    }
}