.community-page [hidden], .library-dialog [hidden] { display: none !important; }
.community-page .page-shell { min-height: 100dvh; }
.nav-links a[aria-current="page"], .mobile-menu a[aria-current="page"] { color: #e3eaff; }
.community-page .nav-links a[aria-current="page"] { position: relative; }
.community-page .nav-links a[aria-current="page"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -10px; height: 2px; border-radius: 2px; background: #9aacdf; }
.community-library { min-height: calc(100dvh - 125px); padding-top: 145px; padding-bottom: 90px; }
.library-breadcrumb { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 39px; color: #929bb1; font-size: 0.71rem; }
.library-breadcrumb:hover { color: #e2e8fc; }
.library-breadcrumb svg { width: 14px; height: 14px; }
.community-library-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding-bottom: 33px; border-bottom: 1px solid #ffffff12; }
.library-kicker { display: block; margin-bottom: 13px; color: #9aaad6; font-size: 0.63rem; font-weight: 700; letter-spacing: 0.16em; }
.community-library h1 { margin: 0; font-size: clamp(2.45rem, 5vw, 3.6rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.055em; }
.community-library-heading p { margin: 15px 0 0; color: #959fb7; font-size: 0.84rem; line-height: 1.8; }
.library-add-button { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; gap: 8px; min-height: 41px; padding: 0 17px; border: 1px solid #a6b8f44d; border-radius: 10px; background: #819aea17; color: #d9e2ff; font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: background 180ms, border-color 180ms; }
.library-add-button:hover { background: #819aea27; border-color: #a6b8f480; }
.library-add-button svg { width: 16px; height: 16px; }
.library-search { display: flex; align-items: center; gap: 12px; margin: 24px 0 0; padding: 0 12px 0 16px; min-height: 50px; border: 1px solid #a7b5da24; border-radius: 12px; background: #0b0f18b3; color: #8998b8; transition: border-color 160ms, box-shadow 160ms; }
.library-search:focus-within { border-color: #9aafea8c; box-shadow: 0 0 0 3px #91a8ef0d; }
.library-search > svg { flex: 0 0 auto; width: 19px; height: 19px; }
.library-search input { flex: 1; width: 100%; min-width: 0; padding: 14px 0; border: 0; outline: 0; background: transparent; color: #e1e8fa; font: inherit; font-size: .8rem; }
.library-search input::placeholder { color: #7583a0; }
.library-search input::-webkit-search-cancel-button, .library-search input::-webkit-search-decoration { -webkit-appearance: none; }
.library-search-clear { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border: 0; border-radius: 8px; background: #a1b4e30a; color: #acbad9; cursor: pointer; }
.library-search-clear[hidden] { display: none; }
.library-search-clear:hover { background: #a1b4e31a; color: #edf2ff; }
.library-search-clear svg { width: 16px; height: 16px; }
.library-empty p { overflow-wrap: anywhere; }
.library-meta-bar { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 75px; color: #959fb7; font-size: 0.69rem; }
.library-count { color: #d0d8ee; font-weight: 600; }
.library-sort { display: inline-flex; align-items: center; gap: 7px; }
.library-sort svg { width: 13px; height: 13px; }
.library-empty { display: grid; justify-items: center; padding: 88px 25px 93px; border: 1px dashed #a7b9ed24; border-radius: 16px; background: radial-gradient(ellipse at 50% 40%, #6d86c90b, transparent 65%), #0c0f180b; text-align: center; }
.library-empty-icon { position: relative; display: grid; place-items: center; width: 66px; height: 66px; margin-bottom: 24px; border: 1px solid #a1b4ee24; border-radius: 19px; background: linear-gradient(140deg, #8ca6eb12, #6575ae06); color: #9daed6; box-shadow: 0 10px 35px #0003; }
.library-empty-icon svg { width: 29px; height: 29px; stroke-width: 1.25; }
.library-empty h2 { margin: 0 0 11px; font-size: 1.2rem; font-weight: 700; letter-spacing: -0.025em; }
.library-empty > p { max-width: 330px; margin: 0; color: #949fb7; font-size: 0.77rem; line-height: 1.8; }
.library-empty-action { display: inline-flex; align-items: center; gap: 7px; margin-top: 24px; padding: 8px 0; border: 0; background: none; color: #bfcef9; font-size: 0.75rem; font-weight: 600; cursor: pointer; }
.library-empty-action svg { width: 14px; height: 14px; }
.library-feedback { margin: 0 0 19px; }
.library-loading { padding: 100px 20px; color: #9eabc9; font-size: 0.8rem; text-align: center; }
.library-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.entry-card { display: flex; flex-direction: column; min-width: 0; min-height: 258px; padding: 23px; border: 1px solid #ffffff13; border-radius: 13px; background: linear-gradient(145deg, #161d2b55, #0b0d1499); transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease; }
.entry-card:focus-within { border-color: #9aafea52; box-shadow: 0 0 18px #879eeb0b; }
@media (hover: hover) { .entry-card:hover { transform: translateY(-2px); border-color: #9aafea45; box-shadow: 0 6px 20px #879eeb0c; } }
@media (prefers-reduced-motion: reduce) { .entry-card { transition: none; } .entry-card:hover { transform: none; } }
.entry-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.entry-icon { display: grid; place-items: center; width: 37px; height: 37px; border: 1px solid #91a8f121; border-radius: 11px; background: #839de510; color: #a4b7ec; }
.entry-icon svg { width: 19px; height: 19px; }
.entry-version { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 4px 7px; border: 1px solid #ffffff12; border-radius: 6px; color: #9aa6c1; font-size: 0.61rem; }
.entry-card h2 { margin: 0 0 10px; color: #eef2fd; font-size: 1rem; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.entry-description { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 23px; color: #939fb9; font-size: 0.74rem; line-height: 1.8; overflow-wrap: anywhere; }
.entry-footer { margin-top: auto; padding-top: 17px; border-top: 1px solid #ffffff0d; }
.entry-byline { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 15px; color: #949fb7; font-size: 0.64rem; }
.entry-byline > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-byline time { flex: 0 0 auto; color: #76829d; }
.entry-actions { display: flex; align-items: center; gap: 12px; }
.entry-download { display: inline-flex; align-items: center; gap: 6px; min-height: 31px; padding: 0 10px; border: 1px solid #8da6e730; border-radius: 7px; background: #8da6e710; color: #c6d5ff; font: inherit; font-size: 0.65rem; cursor: pointer; }
.entry-download svg { width: 13px; height: 13px; }
.entry-source, .entry-delete { padding: 7px 0; border: 0; background: none; color: #9caac8; font-size: 0.65rem; cursor: pointer; }
.entry-delete { margin-left: auto; color: #c08e9d; }
.library-more { display: block; margin: 28px auto 0; padding: 12px 22px; border: 1px solid #ffffff20; border-radius: 9px; background: #ffffff04; color: #c7d2ed; font-size: 0.74rem; cursor: pointer; }
.library-dialog { width: min(510px, calc(100% - 32px)); max-height: calc(100dvh - 32px); padding: 0; border: 1px solid #303342; border-radius: 18px; background: #101119; color: #f3f4fa; box-shadow: 0 32px 120px #000a; scrollbar-width: thin; scrollbar-color: #414758 transparent; }
.library-dialog::backdrop { background: #010206c4; backdrop-filter: blur(9px); }
.library-dialog[open] { animation: auth-enter 180ms ease-out; }
.library-dialog-card { position: relative; padding: 31px; }
.library-dialog h2 { margin: 10px 0; font-size: 1.7rem; letter-spacing: -0.045em; outline: none; }
.library-dialog-intro { margin: 0 0 24px; color: #9ca6bc; font-size: 0.75rem; line-height: 1.75; }
.submission-form { display: grid; gap: 17px; }
.submission-field { display: grid; gap: 8px; }
.submission-field label, .submission-file-label { color: #ccd4e8; font-size: 0.71rem; font-weight: 600; }
.submission-field label small { margin-left: 4px; color: #7d89a3; font-weight: 500; }
.submission-field input, .submission-field textarea { width: 100%; min-width: 0; padding: 12px 13px; border: 1px solid #ffffff20; border-radius: 9px; outline: 0; background: #090b12; color: #e4eafb; font: inherit; font-size: 0.77rem; line-height: 1.6; transition: border-color 180ms, box-shadow 180ms; }
.submission-field input::placeholder, .submission-field textarea::placeholder { color: #626f89; }
.submission-field textarea { min-height: 92px; resize: vertical; }
.submission-field input:focus, .submission-field textarea:focus { border-color: #8a9fe5; box-shadow: 0 0 0 3px #819df410; }
.submission-short-fields { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 15px; }
.submission-file { position: relative; display: grid; justify-items: center; gap: 7px; min-height: 113px; padding: 20px 15px; border: 1px dashed #829bdd50; border-radius: 11px; background: #7e94cc07; color: #bdcbed; text-align: center; cursor: pointer; }
.submission-file svg { width: 22px; height: 22px; color: #91a7d9; }
.submission-file span { max-width: 100%; font-size: 0.74rem; overflow-wrap: anywhere; }
.submission-file small { color: #838fa9; font-size: 0.64rem; }
.submission-file input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.submission-file:focus-within { outline: 2px solid #9eb5ff; outline-offset: 3px; }
.plugin-upload-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.plugin-upload-options .submission-file { min-width: 0; }
.plugin-upload-hint { margin: 12px 0 0; color: #919bb1; font-size: 12px; line-height: 1.6; }
.plugin-selected-files { margin-top: 16px; border: 1px solid #a5b4fc29; border-radius: 12px; padding: 14px; background: #06080e66; }
.plugin-file-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: #c7d2f1; }
.plugin-file-heading button, .plugin-selected-files li button { border: 0; background: transparent; color: #a3acc2; cursor: pointer; font: inherit; }
.plugin-file-heading button:hover, .plugin-selected-files li button:hover { color: #fff; }
.plugin-selected-files ul { list-style: none; padding: 0; margin: 12px 0 0; max-height: 190px; overflow: auto; }
.plugin-selected-files li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid #a5b4fc12; font-size: 12px; }
.plugin-selected-files li span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plugin-selected-files li button { font-size: 20px; padding: 0 6px; }
.plugin-selected-files .submission-field { margin-top: 14px; }
.plugin-selected-files select { width: 100%; background: #0c0e17; color: #e3e8fa; border: 1px solid #353b51; border-radius: 9px; padding: 11px 12px; font: inherit; }
@media (max-width: 420px) { .plugin-upload-options { grid-template-columns: 1fr; } }
.submission-form .auth-email-submit { margin-top: 0; }
.submission-form .library-feedback { margin: 0; }
.submission-publish-note { margin: -5px 0 0; color: #8896b3; font-size: 0.65rem; line-height: 1.7; text-align: center; }
.library-dialog button:disabled, .community-library button:disabled { opacity: 0.5; cursor: wait; }
.library-dialog button:focus-visible, .community-library button:focus-visible, .community-library a:focus-visible { outline: 2px solid #9eb5ff; outline-offset: 4px; }
.delete-entry-name { color: #dce5fc; overflow-wrap: anywhere; }
.delete-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.delete-actions button { min-height: 38px; padding: 0 15px; border: 1px solid #ffffff1c; border-radius: 9px; background: #ffffff05; color: #cbd5ec; font: inherit; font-size: 0.75rem; cursor: pointer; }
.delete-actions .delete-confirm { border-color: #d6798a40; background: #d6798a18; color: #efb1be; }

@media (max-width: 1020px) { .community-library { padding-top: 120px; } .library-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) {
  .community-library { padding-top: 108px; padding-bottom: 55px; }
  .library-breadcrumb { margin-bottom: 30px; }
  .community-library-heading { align-items: flex-start; flex-direction: column; gap: 23px; padding-bottom: 26px; }
  .community-library-heading p { font-size: 0.78rem; }
  .library-empty { padding: 68px 20px; }
  .library-grid { grid-template-columns: 1fr; }
  .library-dialog-card { padding: 27px 22px; }
  .submission-short-fields { grid-template-columns: 1fr; }
  .library-meta-bar { min-height: 65px; }
}
@media (prefers-reduced-motion: reduce) { .library-dialog[open] { animation: none; } }

/* A focused composer: editable details beside the actual community card. */
.submission-dialog { width: min(1060px, calc(100% - 40px)); border-color: #353847; border-radius: 22px; background: #0f1119; }
.submission-dialog .library-dialog-card { padding: 0; }
.composer-heading { padding: 32px 36px 25px; border-bottom: 1px solid #ffffff0e; }
.composer-heading .library-kicker { margin-bottom: 12px; color: #9baada; font-size: .58rem; }
.composer-heading h2 { font-size: 1.85rem; }
.composer-heading .library-dialog-intro { margin-bottom: 0; }
.submission-dialog .auth-close { top: 24px; right: 25px; }
.composer-layout { display: grid; grid-template-columns: 1.08fr 1fr; }
.composer-layout .submission-form { padding: 28px 36px 30px; gap: 17px; }
.composer-section-label { display: flex; align-items: center; gap: 9px; margin-bottom: 2px; color: #e3e8f7; font-size: .73rem; font-weight: 650; }
.composer-section-label > span { display: grid; place-items: center; width: 23px; height: 23px; border: 1px solid #ffffff18; border-radius: 7px; color: #8490ac; font-size: .57rem; font-weight: 500; }
.composer-layout .submission-short-fields { grid-template-columns: 100px minmax(0,1fr); gap: 12px; }
.composer-layout .submission-file { min-height: 98px; padding: 15px 12px; border-color: #9aadd538; background: #a8b9ec04; transition: background .15s, border-color .15s; }
.composer-layout .submission-file:hover { background: #a8b9ec0b; border-color: #a8b9ec70; }
.composer-layout .submission-file svg { width: 20px; height: 20px; }
.composer-layout .submission-file small { line-height: 1.65; }
.composer-layout .submission-field textarea { min-height: 90px; }
.media-remove { justify-self: end; padding: 3px 0; border: 0; background: transparent; color: #a3aec7; font: inherit; font-size: .65rem; cursor: pointer; }
.composer-preview { min-width: 0; padding: 31px 30px; border-left: 1px solid #ffffff0e; background: radial-gradient(ellipse at 60% 20%, #7288c20c, transparent 65%), #090c1280; }
.preview-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 24px; color: #a0abc4; font-size: .55rem; letter-spacing: .14em; }
.preview-live-dot { display: flex; align-items: center; gap: 6px; color: #78869f; font-size: .58rem; letter-spacing: 0; }
.preview-live-dot::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #8eb7a0; box-shadow: 0 0 9px #8eb7a032; }
.preview-card { min-height: 380px; padding: 22px; border-color: #ffffff1c; background: #121620; box-shadow: 0 18px 45px #0003; }
.preview-banner { display: grid; place-items: center; aspect-ratio: 16/9; margin: -22px -22px 22px; overflow: hidden; border-radius: 12px 12px 0 0; background: radial-gradient(ellipse at 30% 15%, #7189cb22, transparent 70%), #171d2a; }
.preview-placeholder { display: grid; justify-items: center; gap: 14px; color: #7d8ba9; font-size: .66rem; }
.preview-placeholder > svg { width: 36px; height: 36px; stroke-width: 1; color: #93a6cf; }
.preview-kind { color: #8999bb; font-size: .55rem; letter-spacing: .12em; }
.preview-card .entry-topline { margin-bottom: 16px; }
.preview-card h2 { margin: 0 0 10px; font-size: 1.15rem; line-height: 1.4; }
.preview-card .entry-description { display: block; min-height: 60px; white-space: pre-wrap; margin-bottom: 18px; }
.preview-file { margin-bottom: 18px; color: #7c8aa7; font-family: ui-monospace, monospace; font-size: .59rem; overflow-wrap: anywhere; }
.preview-download { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 7px; background: #bdcbf0; color: #141c30; font-size: .66rem; font-weight: 650; }
.preview-download svg { width: 13px; height: 13px; }
.preview-caption { margin: 17px 3px; color: #707e99; font-size: .62rem; line-height: 1.8; text-align: center; }
.entry-banner { position: relative; width: calc(100% + 46px); aspect-ratio: 16/9; margin: -23px -23px 22px; overflow: hidden; border-radius: 12px 12px 0 0; background: #171d2a; }
.entry-banner img, .entry-banner video { display: block; width: 100%; height: 100%; object-fit: cover; }
.preview-banner .entry-banner { width: 100%; height: 100%; margin: 0; border-radius: 0; }
.banner-toggle { position: absolute; bottom: 10px; right: 10px; padding: 6px 10px; border: 1px solid #ffffff38; border-radius: 7px; background: #080b16b3; color: #fff; font: inherit; font-size: .6rem; backdrop-filter: blur(8px); cursor: pointer; }
.banner-unavailable { display: grid; place-items: center; height: 100%; color: #9ba8c3; font-size: .7rem; }
.entry-stats { display: flex; align-items: center; gap: 5px; margin-bottom: 14px; color: #a3b0cc; font-size: .64rem; }
.entry-stats svg { width: 12px; height: 12px; }
.entry-author { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: #a9b8d9; }
.entry-author:hover { color: #e1eaff; }
.entry-author > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry-author-avatar { display: grid; place-items: center; flex: 0 0 auto; width: 23px; height: 23px; overflow: hidden; border: 1px solid #ffffff18; border-radius: 50%; background: #283450; color: #d0ddfa; font-size: .56rem; }
.entry-author-avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 821px) { .composer-preview { position: relative; } .composer-preview > .preview-heading { position: sticky; top: 25px; } .composer-preview > .preview-card { position: sticky; top: 65px; } }
@media (max-width: 820px) { .submission-dialog { width: min(600px, calc(100% - 24px)); } .composer-layout { grid-template-columns: 1fr; } .composer-heading { padding: 28px 24px 24px; } .composer-layout .submission-form { padding: 24px; } .composer-preview { padding: 25px 24px; border-left: 0; border-top: 1px solid #ffffff0e; } }
@media (max-width: 400px) { .composer-heading h2 { font-size: 1.55rem; } .composer-layout .submission-short-fields { grid-template-columns: 1fr; } .preview-heading { flex-wrap: wrap; } }