.reference-showcase {
    --reference-accent: var(--bs-primary, #f26b00);
    --reference-bg: var(--bs-body-bg, #f7f8fa);
    --reference-surface: var(--bs-tertiary-bg, #eef1f4);
    --reference-card: var(--bs-body-bg, #ffffff);
    --reference-text: var(--bs-body-color, #18202a);
    --reference-muted: var(--bs-secondary-color, #65707d);
    --reference-border: var(--bs-border-color, rgba(24, 32, 42, .14));
    --reference-shadow: 0 14px 34px rgba(20, 28, 38, .1);
    width: min(1460px, calc(100% - 32px));
    margin: 1.5rem auto 3rem;
    overflow: hidden;
    color: var(--reference-text);
    background: var(--reference-bg);
    border: 1px solid var(--reference-border);
    border-radius: 18px;
    box-shadow: var(--reference-shadow);
}

[data-bs-theme='dark'] .reference-showcase,
body.dark .reference-showcase,
body.dark-mode .reference-showcase,
body.theme-dark .reference-showcase,
.dark-mode .reference-showcase,
.dark-theme .reference-showcase {
    --reference-bg: #071019;
    --reference-surface: #0c151e;
    --reference-card: #111b24;
    --reference-text: #f6f8fa;
    --reference-muted: #aeb6bf;
    --reference-border: rgba(255, 255, 255, .11);
    --reference-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

[data-theme='dark'] .reference-showcase,
[data-color-mode='dark'] .reference-showcase {
    --reference-bg: #071019;
    --reference-surface: #0c151e;
    --reference-card: #111b24;
    --reference-text: #f6f8fa;
    --reference-muted: #aeb6bf;
    --reference-border: rgba(255, 255, 255, .11);
    --reference-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

.reference-hero {
    position: relative;
    isolation: isolate;
    min-height: 280px;
    display: grid;
    place-items: center;
    padding: 46px clamp(24px, 5vw, 78px);
    overflow: hidden;
    text-align: center;
    background:
        radial-gradient(circle at 88% 35%, color-mix(in srgb, var(--reference-accent) 22%, transparent), transparent 34%),
        linear-gradient(135deg, var(--reference-surface), var(--reference-bg));
    border-bottom: 1px solid var(--reference-border);
}

.reference-hero::before,
.reference-hero::after {
    content: '';
    position: absolute;
    z-index: -1;
    right: -60px;
    width: 560px;
    height: 1px;
    background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--reference-accent) 68%, transparent));
    transform: rotate(-18deg);
    box-shadow: 0 56px 0 color-mix(in srgb, var(--reference-accent) 20%, transparent), 0 112px 0 color-mix(in srgb, var(--reference-accent) 12%, transparent);
}

.reference-hero::before { top: 76px; }
.reference-hero::after { top: 164px; right: -130px; transform: rotate(13deg); }

.reference-hero-inner { position: relative; z-index: 1; max-width: 920px; }
.reference-kicker { color: var(--reference-accent); font-weight: 700; letter-spacing: .13em; text-transform: uppercase; font-size: .78rem; }
.reference-hero h1 { margin: .4rem 0 .35rem; color: var(--reference-text); font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; letter-spacing: -.045em; }
.reference-hero p { margin: 0 auto; max-width: 760px; color: var(--reference-muted); font-size: clamp(1rem, 1.6vw, 1.17rem); }

.reference-benefits {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    margin-top: 30px;
    border-top: 1px solid var(--reference-border);
}

.reference-benefits span { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 22px; color: var(--reference-muted); }
.reference-benefits span + span { border-left: 1px solid var(--reference-border); }
.reference-benefits i { color: var(--reference-accent); font-size: 1.35rem; }
.reference-benefits b { color: var(--reference-text); font-size: .92rem; }

.reference-toolbar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 22px clamp(20px, 4vw, 58px);
    background: var(--reference-surface);
    border-bottom: 1px solid var(--reference-border);
}

.reference-filters { display: flex; flex: 1; gap: 10px; flex-wrap: wrap; }
.reference-filters button,
.reference-search {
    border: 1px solid var(--reference-border);
    background: var(--reference-card);
    color: var(--reference-muted);
    border-radius: 9px;
}

.reference-filters button { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 8px 15px; font: inherit; font-size: .87rem; transition: .2s ease; }
.reference-filters button:hover { color: var(--reference-text); border-color: color-mix(in srgb, var(--reference-accent) 50%, var(--reference-border)); transform: translateY(-1px); }
.reference-filters button.is-active { color: #fff; border-color: var(--reference-accent); background: var(--reference-accent); box-shadow: 0 7px 20px color-mix(in srgb, var(--reference-accent) 24%, transparent); }

.reference-search { display: flex; align-items: center; gap: 10px; width: min(310px, 100%); padding: 0 14px; }
.reference-search i { color: var(--reference-muted); }
.reference-search input { width: 100%; height: 42px; border: 0; outline: 0; color: var(--reference-text); background: transparent; }
.reference-search input::placeholder { color: var(--reference-muted); opacity: .8; }

.reference-resultbar { padding: 16px clamp(20px, 4vw, 58px) 0; background: var(--reference-bg); color: var(--reference-muted); font-size: .86rem; }
.reference-resultbar span { display: inline-flex; align-items: center; gap: 8px; }
.reference-resultbar span::before { content: ''; width: 3px; height: 15px; border-radius: 4px; background: var(--reference-accent); }

.reference-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; padding: 18px clamp(20px, 4vw, 58px) 26px; background: var(--reference-bg); }
.reference-card { min-width: 0; overflow: hidden; display: flex; flex-direction: column; color: var(--reference-text); background: var(--reference-card); border: 1px solid var(--reference-border); border-radius: 13px; box-shadow: 0 7px 22px rgba(16, 25, 35, .08); transition: transform .23s ease, box-shadow .23s ease, border-color .23s ease; }
.reference-card:hover { transform: translateY(-5px); border-color: color-mix(in srgb, var(--reference-accent) 42%, var(--reference-border)); box-shadow: var(--reference-shadow); }
.reference-card[hidden] { display: none; }
.reference-card.is-featured { box-shadow: inset 0 3px 0 var(--reference-accent), 0 7px 22px rgba(16, 25, 35, .1); }

.reference-image { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--reference-surface); }
.reference-image[aria-disabled='true'] { pointer-events: none; }
.reference-image img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .45s ease; }
.reference-card:hover .reference-image img { transform: scale(1.035); }
.reference-featured { position: absolute; top: 12px; left: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 6px 9px; color: #fff; background: color-mix(in srgb, var(--reference-accent) 88%, #111); border-radius: 7px; font-size: .72rem; font-weight: 700; }

.reference-card-body { flex: 1; display: flex; flex-direction: column; padding: 17px 18px 16px; }
.reference-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.reference-heading h2 { margin: 0; color: var(--reference-text); font-size: 1.05rem; line-height: 1.3; font-weight: 750; }
.reference-heading h2 a { color: inherit; text-decoration: none; }
.reference-heading h2 a:hover { color: var(--reference-accent); }
.reference-client { margin: 4px 0 0; color: var(--reference-accent); font-size: .76rem; font-weight: 650; }
.reference-external { flex: 0 0 31px; height: 31px; display: grid; place-items: center; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 7px; text-decoration: none; }
.reference-external:hover { color: #fff; background: var(--reference-accent); border-color: var(--reference-accent); }
.reference-description { flex: 1; margin: 10px 0 13px; color: var(--reference-muted); font-size: .86rem; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.reference-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.reference-tags span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 7px; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 6px; font-size: .69rem; line-height: 1.1; }
.reference-tags i { color: var(--reference-accent); }
.reference-card time { margin-top: 12px; color: var(--reference-muted); font-size: .7rem; }

.reference-empty { margin: 18px clamp(20px, 4vw, 58px) 28px; min-height: 180px; display: grid; place-items: center; align-content: center; gap: 8px; color: var(--reference-muted); background: var(--reference-surface); border: 1px dashed var(--reference-border); border-radius: 12px; }
.reference-empty[hidden] { display: none; }
.reference-empty i { color: var(--reference-accent); font-size: 2rem; }
.reference-empty p { margin: 0; }

.reference-cta { display: flex; align-items: center; gap: 18px; max-width: 920px; margin: 0 auto 28px; padding: 18px 24px; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 12px; }
.reference-cta > i { color: var(--reference-accent); font-size: 2.25rem; }
.reference-cta div { display: grid; }
.reference-cta strong { font-size: 1rem; }
.reference-cta span { color: var(--reference-muted); font-size: .82rem; }
.reference-cta > a { margin-left: auto; min-width: 190px; min-height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 9px 20px; color: var(--reference-accent); background: transparent; border: 1px solid var(--reference-accent); border-radius: 8px; font-size: .86rem; font-weight: 700; text-decoration: none; transition: .2s ease; }
.reference-cta > a:hover { color: #fff; background: var(--reference-accent); box-shadow: 0 8px 22px color-mix(in srgb, var(--reference-accent) 24%, transparent); transform: translateY(-1px); }
.reference-cta > a i { transition: transform .2s ease; }
.reference-cta > a:hover i { transform: translateX(3px); }

/* Project detail */
.reference-detail {
    --reference-accent: var(--bs-primary, #f26b00);
    --reference-bg: var(--bs-body-bg, #f7f8fa);
    --reference-surface: var(--bs-tertiary-bg, #eef1f4);
    --reference-card: var(--bs-body-bg, #ffffff);
    --reference-text: var(--bs-body-color, #18202a);
    --reference-muted: var(--bs-secondary-color, #65707d);
    --reference-border: var(--bs-border-color, rgba(24, 32, 42, .14));
    --reference-shadow: 0 14px 34px rgba(20, 28, 38, .1);
    width: min(1460px, calc(100% - 32px));
    margin: 1.25rem auto 3rem;
    color: var(--reference-text);
}

[data-bs-theme='dark'] .reference-detail,
body.dark .reference-detail,
body.dark-mode .reference-detail,
body.theme-dark .reference-detail,
.dark-mode .reference-detail,
.dark-theme .reference-detail,
[data-theme='dark'] .reference-detail,
[data-color-mode='dark'] .reference-detail {
    --reference-bg: #071019;
    --reference-surface: #0c151e;
    --reference-card: #111b24;
    --reference-text: #f6f8fa;
    --reference-muted: #aeb6bf;
    --reference-border: rgba(255, 255, 255, .11);
    --reference-shadow: 0 18px 42px rgba(0, 0, 0, .34);
}

.reference-detail * { box-sizing: border-box; }
.reference-detail-breadcrumb { display: flex; align-items: center; gap: 10px; margin: 0 2px 18px; color: var(--reference-muted); font-size: .85rem; }
.reference-detail-breadcrumb a { color: var(--reference-muted); text-decoration: none; }
.reference-detail-breadcrumb a:hover { color: var(--reference-accent); }
.reference-detail-breadcrumb i { font-size: .68rem; }
.reference-detail-breadcrumb strong { color: var(--reference-text); }
.reference-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 350px; gap: 18px; align-items: start; }
.reference-detail-main { min-width: 0; display: grid; gap: 16px; }
.reference-detail-hero-card,
.reference-detail-section,
.reference-detail-overview,
.reference-detail-related { overflow: hidden; background: linear-gradient(145deg, var(--reference-card), var(--reference-surface)); border: 1px solid var(--reference-border); border-radius: 13px; box-shadow: var(--reference-shadow); }
.reference-detail-hero-card { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, 1fr); min-height: 390px; }
.reference-detail-cover { min-height: 390px; background: var(--reference-surface); border-right: 1px solid var(--reference-border); }
.reference-detail-cover img { width: 100%; height: 100%; min-height: 390px; display: block; object-fit: cover; }
.reference-detail-intro { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; padding: clamp(28px, 4vw, 50px); }
.reference-detail-category { display: inline-flex; padding: 5px 10px; color: var(--reference-accent); background: color-mix(in srgb, var(--reference-accent) 10%, var(--reference-card)); border: 1px solid color-mix(in srgb, var(--reference-accent) 28%, var(--reference-border)); border-radius: 999px; font-size: .75rem; font-weight: 700; }
.reference-detail-intro h1 { margin: 15px 0 10px; color: var(--reference-text); font-size: clamp(2rem, 3.3vw, 3.1rem); line-height: 1.05; letter-spacing: -.035em; }
.reference-detail-intro p { margin: 0; color: var(--reference-muted); font-size: 1rem; line-height: 1.65; }
.reference-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.reference-detail-actions a,
.reference-detail-wide-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 43px; padding: 10px 17px; color: var(--reference-text); background: transparent; border: 1px solid var(--reference-border); border-radius: 8px; font-weight: 700; text-decoration: none; transition: .2s ease; }
.reference-detail-actions a:hover { color: var(--reference-accent); border-color: var(--reference-accent); transform: translateY(-1px); }
.reference-detail-actions a.is-primary,
.reference-detail-wide-button { color: #fff; background: var(--reference-accent); border-color: var(--reference-accent); }
.reference-detail-section { padding: 18px; }
.reference-detail-section h2,
.reference-detail-overview h2,
.reference-detail-related h2 { margin: 0 0 15px; color: var(--reference-text); font-size: 1.02rem; }
.reference-detail-section p { margin: 0; color: var(--reference-muted); line-height: 1.65; }
.reference-detail-feature-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.reference-detail-feature-grid > div { min-width: 0; display: flex; align-items: center; gap: 11px; padding: 13px; background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 9px; }
.reference-detail-feature-grid i { flex: 0 0 34px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--reference-accent); background: color-mix(in srgb, var(--reference-accent) 10%, var(--reference-card)); border-radius: 7px; }
.reference-detail-feature-grid span { min-width: 0; display: grid; }
.reference-detail-feature-grid b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .82rem; }
.reference-detail-feature-grid small { color: var(--reference-muted); font-size: .68rem; }
.reference-detail-screenshots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.reference-detail-screenshots figure { min-width: 0; margin: 0; overflow: hidden; background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 9px; }
.reference-detail-screenshots a { display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.reference-detail-screenshots img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform .3s ease; }
.reference-detail-screenshots a:hover img { transform: scale(1.035); }
.reference-detail-screenshots figcaption { padding: 8px 10px; color: var(--reference-muted); font-size: .72rem; text-align: center; }
.reference-detail-bottom-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.reference-detail-plugin-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.reference-detail-plugin-item { min-width: 0; display: flex; align-items: center; gap: 8px; padding: 9px 10px; background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 8px; font-size: .8rem; }
.reference-detail-plugin-item span { min-width: 0; display: flex; align-items: center; gap: 9px; }
.reference-detail-plugin-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reference-detail-plugin-item a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--reference-accent); font-size: .72rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.reference-detail-plugin-item a:hover i { transform: translateX(2px); }
.reference-detail-plugin-list i { color: var(--reference-accent); }
.reference-detail-sidebar { position: sticky; top: 88px; display: grid; gap: 16px; }
.reference-detail-overview h2,
.reference-detail-related h2 { padding: 17px 19px; margin: 0; border-bottom: 1px solid var(--reference-border); }
.reference-detail-overview dl { margin: 0; padding: 0 18px; }
.reference-detail-overview dl > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--reference-border); }
.reference-detail-overview dt { display: flex; align-items: center; gap: 10px; color: var(--reference-muted); font-size: .78rem; font-weight: 500; }
.reference-detail-overview dt i { color: var(--reference-text); font-size: .95rem; }
.reference-detail-overview dd { margin: 0; color: var(--reference-text); font-size: .8rem; font-weight: 700; text-align: right; }
.reference-detail-yes { display: inline-flex; padding: 3px 8px; color: #b8e69a; background: #244a1b; border-radius: 5px; }
.reference-detail-wide-button { margin: 17px 18px 18px; }
.reference-detail-wide-button:hover { color: #fff; filter: brightness(1.08); transform: translateY(-1px); }
.reference-detail-related { padding-bottom: 14px; }
.reference-detail-related > a:not(.reference-detail-all) { display: grid; grid-template-columns: 65px minmax(0, 1fr) auto; align-items: center; gap: 11px; margin: 10px 14px 0; padding: 7px; color: var(--reference-text); background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 8px; text-decoration: none; }
.reference-detail-related img { width: 65px; height: 42px; object-fit: cover; border-radius: 5px; }
.reference-detail-related span { min-width: 0; display: grid; }
.reference-detail-related b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
.reference-detail-related small { color: var(--reference-muted); font-size: .68rem; }
.reference-detail-related > a > i { color: var(--reference-muted); }
.reference-detail-all { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 14px 14px 0; min-height: 41px; color: var(--reference-accent); border: 1px solid var(--reference-accent); border-radius: 8px; font-size: .8rem; font-weight: 700; text-decoration: none; }
.reference-detail-all:hover { color: #fff; background: var(--reference-accent); }

/* Website submission */
.reference-submit {
    --reference-accent: var(--bs-primary, #f26b00);
    --reference-bg: var(--bs-body-bg, #f7f8fa);
    --reference-surface: var(--bs-tertiary-bg, #eef1f4);
    --reference-card: var(--bs-body-bg, #ffffff);
    --reference-text: var(--bs-body-color, #18202a);
    --reference-muted: var(--bs-secondary-color, #65707d);
    --reference-border: var(--bs-border-color, rgba(24, 32, 42, .14));
    --reference-shadow: 0 14px 34px rgba(20, 28, 38, .1);
    width: min(1460px, calc(100% - 32px));
    margin: 1.25rem auto 3rem;
    color: var(--reference-text);
}
[data-bs-theme='dark'] .reference-submit,
body.dark .reference-submit,
body.dark-mode .reference-submit,
body.theme-dark .reference-submit,
.dark-mode .reference-submit,
.dark-theme .reference-submit,
[data-theme='dark'] .reference-submit,
[data-color-mode='dark'] .reference-submit {
    --reference-bg: #071019; --reference-surface: #0c151e; --reference-card: #111b24;
    --reference-text: #f6f8fa; --reference-muted: #aeb6bf; --reference-border: rgba(255,255,255,.11);
    --reference-shadow: 0 18px 42px rgba(0,0,0,.34);
}
.reference-submit * { box-sizing: border-box; }
.reference-submit-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr) 290px; gap: 16px; align-items: start; }
.reference-submit-promo,
.reference-submit-form-card,
.reference-submit-side section,
.reference-submit-success { color: var(--reference-text); background: linear-gradient(145deg, var(--reference-card), var(--reference-surface)); border: 1px solid var(--reference-border); border-radius: 13px; box-shadow: var(--reference-shadow); }
.reference-submit-promo { position: sticky; top: 88px; padding: 25px; }
.reference-submit-promo h1 { margin: 0; font-size: 1.7rem; line-height: 1.08; }
.reference-submit-promo h1 em { color: var(--reference-accent); font-style: normal; }
.reference-submit-promo > p { margin: 12px 0 18px; color: var(--reference-muted); line-height: 1.55; }
.reference-submit-promo > img { width: 100%; aspect-ratio: 16 / 10; display: block; object-fit: cover; border: 1px solid var(--reference-border); border-radius: 9px; }
.reference-submit-promo ul,
.reference-submit-side ul { list-style: none; margin: 22px 0 0; padding: 0; display: grid; gap: 18px; }
.reference-submit-promo li { display: flex; gap: 12px; }
.reference-submit-promo li > i { color: var(--reference-accent); font-size: 1.35rem; }
.reference-submit-promo li span { display: grid; }
.reference-submit-promo li b { font-size: .85rem; }
.reference-submit-promo li small { color: var(--reference-muted); font-size: .75rem; line-height: 1.45; }
.reference-submit-form-card { padding: 22px; }
.reference-submit-form-card > h1 { margin: 0 0 6px; font-size: 1.65rem; }
.reference-submit-form-card > p { margin: 0 0 18px; color: var(--reference-muted); line-height: 1.55; }
.reference-submit-errors { margin-bottom: 16px; padding: 12px 15px; color: #b42318; background: #fef3f2; border: 1px solid #fecdca; border-radius: 8px; }
.reference-submit-errors ul { margin: 0; padding-left: 20px; }
.reference-submit-form { display: grid; gap: 20px; }
.reference-submit-form fieldset { min-width: 0; margin: 0; padding: 18px 0 0; border: 0; border-top: 1px solid var(--reference-border); }
.reference-submit-form legend { float: none; width: auto; margin: 0 0 13px; color: var(--reference-text); font-size: .95rem; font-weight: 750; }
.reference-submit-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }
.reference-submit-form label { min-width: 0; display: grid; gap: 6px; }
.reference-submit-form label > span { color: var(--reference-text); font-size: .78rem; font-weight: 650; }
.reference-submit-form .is-wide { grid-column: 1 / -1; }
.reference-submit-form input:not([type='checkbox']):not([type='file']),
.reference-submit-form select,
.reference-submit-form textarea { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--reference-text); background: var(--reference-card); border: 1px solid var(--reference-border); border-radius: 7px; outline: 0; font: inherit; font-size: .82rem; }
.reference-submit-form textarea { resize: vertical; }
.reference-submit-form input:focus,
.reference-submit-form select:focus,
.reference-submit-form textarea:focus { border-color: var(--reference-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--reference-accent) 14%, transparent); }
.reference-upload { position: relative; place-items: center; padding: 22px; color: var(--reference-muted); background: var(--reference-surface); border: 1px dashed color-mix(in srgb, var(--reference-muted) 55%, transparent); border-radius: 9px; text-align: center; cursor: pointer; }
.reference-upload:hover { border-color: var(--reference-accent); }
.reference-upload > i { color: var(--reference-accent); font-size: 1.45rem; }
.reference-upload > b { color: var(--reference-text); font-size: .84rem; }
.reference-upload > small { font-size: .72rem; }
.reference-upload input { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; }
.reference-upload.is-compact { margin-top: 11px; padding: 15px; }
.reference-submit-live-preview { margin-top: 10px; overflow: hidden; border: 1px solid var(--reference-border); border-radius: 8px; }
.reference-submit-live-preview[hidden] { display: none; }
.reference-submit-live-preview img { width: 100%; max-height: 260px; display: block; object-fit: cover; }
.reference-file-count { display: block; margin-top: 6px; color: var(--reference-muted); font-size: .72rem; text-align: right; }
.reference-plugin-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.reference-plugin-choices label { display: flex; align-items: center; gap: 7px; padding: 9px; background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 7px; cursor: pointer; }
.reference-plugin-choices input { accent-color: var(--reference-accent); }
.reference-plugin-choices span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .74rem; }
.reference-feature-field { margin-top: 12px; }
.reference-confirm { display: flex !important; align-items: flex-start; gap: 10px !important; padding: 13px; background: var(--reference-surface); border: 1px solid var(--reference-border); border-radius: 8px; }
.reference-confirm input { margin-top: 3px; accent-color: var(--reference-accent); }
.reference-confirm span { color: var(--reference-muted) !important; line-height: 1.5; }
.reference-submit-button { min-height: 46px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 20px; color: #fff; background: var(--reference-accent); border: 1px solid var(--reference-accent); border-radius: 8px; font: inherit; font-weight: 750; cursor: pointer; }
.reference-submit-button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.reference-submit-side { position: sticky; top: 88px; display: grid; gap: 16px; }
.reference-submit-side section { padding: 18px; }
.reference-submit-side h2 { margin: 0; padding-bottom: 13px; border-bottom: 1px solid var(--reference-border); font-size: .95rem; }
.reference-submit-side ul { margin-top: 15px; gap: 13px; }
.reference-submit-side li { display: flex; gap: 9px; color: var(--reference-muted); font-size: .75rem; line-height: 1.45; }
.reference-submit-side li i { color: #42b883; }
.reference-submit-side li:last-child i { color: #e45b45; }
.reference-submit-example img { width: 100%; margin-top: 14px; aspect-ratio: 16 / 10; display: block; object-fit: cover; border-radius: 8px; }
.reference-submit-example > span { display: inline-flex; margin-top: 10px; padding: 4px 7px; color: #fff; background: var(--reference-accent); border-radius: 5px; font-size: .65rem; }
.reference-submit-example h3 { margin: 9px 0 5px; font-size: 1rem; }
.reference-submit-example p { margin: 0; color: var(--reference-muted); font-size: .74rem; line-height: 1.5; }
.reference-submit-success { max-width: 720px; margin: 70px auto; padding: 48px; text-align: center; }
.reference-submit-success > i { color: #42b883; font-size: 3rem; }
.reference-submit-success h1 { margin: 12px 0 8px; }
.reference-submit-success p { color: var(--reference-muted); }
.reference-submit-success a { display: inline-flex; margin-top: 12px; padding: 10px 16px; color: #fff; background: var(--reference-accent); border-radius: 8px; text-decoration: none; }

@media (max-width: 1180px) { .reference-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .reference-toolbar { align-items: flex-start; flex-direction: column; } .reference-search { width: 100%; } }
@media (max-width: 1180px) { .reference-submit-layout { grid-template-columns: 240px minmax(0, 1fr); } .reference-submit-side { position: static; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 1100px) { .reference-detail-layout { grid-template-columns: 1fr; } .reference-detail-sidebar { position: static; grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .reference-detail-hero-card { grid-template-columns: 1fr; } .reference-detail-cover { border-right: 0; border-bottom: 1px solid var(--reference-border); } .reference-detail-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reference-detail-screenshots { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 820px) { .reference-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .reference-benefits { grid-template-columns: 1fr; } .reference-benefits span + span { border-left: 0; border-top: 1px solid var(--reference-border); } }
@media (max-width: 680px) { .reference-cta { align-items: flex-start; flex-wrap: wrap; } .reference-cta > a { width: 100%; margin-left: 0; } }
@media (max-width: 760px) { .reference-submit { width: calc(100% - 18px); } .reference-submit-layout { grid-template-columns: 1fr; } .reference-submit-promo { position: static; } .reference-submit-side { grid-column: auto; grid-template-columns: 1fr; } .reference-plugin-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .reference-submit-fields { grid-template-columns: 1fr; } .reference-submit-form-card { padding: 16px; } .reference-plugin-choices { grid-template-columns: 1fr 1fr; } .reference-submit-success { padding: 30px 18px; } }
@media (max-width: 620px) { .reference-detail { width: calc(100% - 18px); } .reference-detail-breadcrumb { overflow-x: auto; white-space: nowrap; } .reference-detail-sidebar, .reference-detail-bottom-grid { grid-template-columns: 1fr; } .reference-detail-feature-grid, .reference-detail-screenshots { grid-template-columns: 1fr; } .reference-detail-intro { padding: 25px 20px; } }
@media (max-width: 560px) { .reference-showcase { width: calc(100% - 18px); margin-top: .75rem; border-radius: 12px; } .reference-hero { padding: 38px 20px; } .reference-grid { grid-template-columns: 1fr; padding-inline: 14px; } .reference-toolbar { padding-inline: 14px; } .reference-filters button { flex: 1 1 auto; justify-content: center; } .reference-cta { margin-inline: 14px; } }

@media (prefers-reduced-motion: reduce) { .reference-card, .reference-image img, .reference-filters button { transition: none; } }