body:has(> .portal) { min-height: 100dvh; display: flex; flex-direction: column; }
.portal { flex: 1; padding-block: 42px 75px; }
.portal h1 { font-size: clamp(2.65rem, 5.1vw, 4.6rem); letter-spacing: -.06em; margin: 0 0 8px; }
.portal-title { margin-bottom: 26px; }
.library-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 24px; align-items: end; }
.library-heading h1 { grid-column: 1; }
.library-heading p { grid-column: 1; margin-bottom: 0; }
.library-purchase { grid-column: 2; grid-row: 1 / 3; min-width: 220px; min-height: 54px; font-size: .95rem; }
@media (max-width: 640px) {
  .library-heading { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .library-purchase { grid-column: 1; grid-row: auto; width: 100%; }
}
.portal-title p, .portal-status { color: var(--muted); }
.portal-status { margin-block: 15px; }
.portal-status:empty { display: none; }
.sections { margin: 0 0 19px; gap: 7px; flex-wrap: wrap; }
.sections a { padding: 9px 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); }
.sections a[aria-current] { border-color: var(--accent); background: #362018; }
.filters { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: 11px; margin-bottom: 12px; }
.portal label { display: grid; gap: 5px; color: var(--muted); font-size: .86rem; }
.portal input:not([type="checkbox"]), .portal select {
  width: 100%; min-height: 46px; padding: 8px 11px; color: var(--text);
  background: #191617; border: 1px solid #57464a; border-radius: 6px;
}
.listing { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.listing .card { display: flex; flex-direction: column; }
.listing .card > div { flex: 1; }
.listing .card:hover { border-color: var(--accent); }
.listing .empty-photo { width: 100%; aspect-ratio: 16 / 9; background: linear-gradient(145deg,#37241e,#221c20); display: grid; place-items: center; color: var(--muted); font-size: .8rem; }
.listing h2 { font-size: 1.42rem; margin-block: 6px 9px; letter-spacing: -.035em; overflow-wrap: anywhere; }
.listing .tag { color: var(--muted); font-size: .78rem; }
.more { margin-top: 18px; }
.mod-page { padding-block: 42px 75px; }
.mod-page .portal-title { margin-bottom: 20px; }
.mod-page h1 { overflow-wrap: anywhere; }
.detail-back { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 6px; color: var(--muted); }
.detail-back:hover { color: var(--accent); }
.detail { display: grid; grid-template-columns: minmax(0, 420px); gap: 16px; align-items: start; }
.detail-with-photo { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); }
.detail-cover, .detail-download { background: var(--panel); border: 1px solid var(--line); border-radius: 9px; }
.detail-cover { display: grid; overflow: hidden; cursor: zoom-in; }
.detail-cover:hover { border-color: var(--accent); }
.detail-photo { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 68svh; object-fit: contain; background: var(--background); }
.detail-cover-label { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 14px; min-height: 44px; font-size: .875rem; font-weight: 800; }
.detail-cover-label span, .detail-dependencies a { color: var(--accent); }
.detail-download-main, .detail-dependencies { padding: 16px 18px; }
.detail-download-main { display: grid; gap: 10px; }
.detail-download h2 { font-size: 1.7rem; }
.detail-download h3 { font-size: 1.15rem; }
.detail-download p { color: var(--muted); overflow-wrap: anywhere; }
.detail-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; color: var(--muted); font-size: .82rem; }
.detail-tag { padding: 2px 8px; border-radius: 5px; color: var(--accent); background: #39231e; font-weight: 800; }
.detail-dependencies, .detail-discord { border-top: 1px solid var(--line); }
.detail-dependencies ul { margin: 6px 0 0; padding-left: 18px; }
.detail-dependencies li { padding-block: 3px; color: var(--muted); overflow-wrap: anywhere; }
.detail-discord { display: flex; align-items: center; min-height: 44px; padding: 8px 18px; color: var(--muted); font-size: .85rem; }
.detail-discord:hover { color: var(--accent); }
.mod-gallery figure { touch-action: pan-y pinch-zoom; }
.mod-gallery h2 { overflow-wrap: anywhere; }
.profile .feature { padding: 20px; margin-bottom: 13px; }
.profile h2 { font-size: clamp(1.65rem, 3vw, 2.2rem); margin: 0 0 12px; }
.profile p { margin: 0 0 10px; color: var(--muted); }
.profile li { padding-block: 5px; overflow-wrap: anywhere; }
.profile a:not(.button) { color: var(--accent); }
.profile-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 13px; }
.profile .feature p { max-width: 65ch; }
.profile-summary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 24px;
  margin-bottom: 16px; padding: clamp(16px, 3vw, 30px); border: 1px solid #604038; border-radius: 12px;
  background: radial-gradient(ellipse at top right, #59302590, transparent 65%), var(--panel);
}
.profile-identity { display: flex; align-items: center; gap: 14px; min-width: 0; }
.profile-identity .discord-avatar { width: 64px; height: 64px; flex: 0 0 64px; font-size: 1.3rem; }
.profile-identity h2 { margin: 0 0 5px; overflow-wrap: anywhere; }
.profile-identity p, .profile-balance p, .profile .profile-credit-note { margin: 0; font-size: .85rem; }
.profile-wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.profile-balance strong { display: block; color: var(--accent); font: 700 clamp(1.35rem, 3vw, 1.95rem)/1.15 var(--display); }
.profile-credit-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.profile .profile-credit-note { flex: 1 0 100%; padding-top: 11px; border-top: 1px solid var(--line); }
.subscription-notice {
  margin-block: 14px;
  padding: 12px 14px;
  border: 1px solid #955840;
  border-radius: 7px;
  background: #44271e;
  color: #ffe5d7;
}
.subscription-notice p { margin-top: 4px; }
.profile-grid .feature { margin-bottom: 0; }
.profile .feature { overflow: visible; }
.profile .feature .button { margin-top: 5px; }
/* Visual references: swift-liger-76 (Smit-Prajapati), helpless-wasp-32 (3bdel3ziz-T)
   and tiny-moose-42 (ahmed_8975), all on Uiverse.io. */
.portal:has(.login-card) { display: grid; align-content: center; padding-block: clamp(24px, 6vh, 64px); }
.portal:has(.login-card) .portal-title { display: none; }
.login-layout { display: grid; justify-items: center; }
.login-card {
  width: min(100%, 430px); display: grid; gap: 13px;
  padding: clamp(22px, 5vw, 38px);
  background: linear-gradient(160deg, #2b2020, #1a1718 54%);
  border: 1px solid #664039; border-radius: 32px;
  box-shadow: 0 22px 50px #0009, 0 16px 40px -22px #c83112b0;
}
.login-card > img { justify-self: center; object-fit: contain; }
.login-card > h1 { margin: 0; text-align: center; font-size: clamp(1.85rem, 6vw, 2.5rem); }
.login-card > p { color: var(--muted); text-align: center; font-size: .88rem; }
.login-card > p:empty, .pix-dialog > p:empty { display: none; }
.login-card .login-demo { color: var(--accent); font-size: .75rem; }
.login-providers, .login-form { display: grid; gap: 10px; }
.login-form input:not([type="checkbox"]) { border-radius: 16px; min-width: 0; }
.login-restart { justify-self: center; min-height: 44px; background: none; border: 0; color: var(--accent); text-decoration: underline; }
.pix-dialog {
  width: min(100% - 28px, 410px); max-height: calc(100dvh - 28px);
  padding: clamp(16px, 4vw, 25px); color: var(--text);
  background: #161314; border: 1px solid #5c3932; border-radius: 25px;
  box-shadow: 0 24px 70px #000b;
}
.pix-dialog::backdrop { background: #090607d9; }
.pix-heading { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 16px; }
.pix-heading h2 { margin: 0; font-size: clamp(1.4rem, 5vw, 1.85rem); }
.pix-form { display: grid; gap: 12px; margin-bottom: 12px; }
.pix-form :is(select, input:not([type="checkbox"])) { min-width: 0; border-radius: 13px; }
.pix-form .terms-check label { display: flex; align-items: center; gap: 9px; min-height: 44px; cursor: pointer; }
.pix-form .terms-check input { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.pix-form .terms-check input:checked { filter: drop-shadow(0 0 5px #ff805377); }
.pix-form .terms-check > a { display: inline-block; margin-left: 31px; font-size: .8rem; text-decoration: underline; }
.pix-result:not(:empty) { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 12px; }
.pix-result img { width: min(210px, 100%); background: white; padding: 7px; display: block; margin: 0 auto 10px; }
.orders { list-style: none; padding: 0; margin: 0; }
.orders li + li { border-top: 1px solid var(--line); }
.orders li { display: grid; grid-template-columns: 1fr auto; gap: 9px; align-items: center; }
.orders li p { margin: 0; }
.portal button:disabled { opacity: .55; cursor: default; }
.pill { display: inline-block; color: var(--accent); font-size: .78rem; }
@media (min-width: 1500px) {
  .listing { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .listing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid, .detail { grid-template-columns: 1fr; }
}
@media (max-width: 530px) {
  .portal { padding-top: 26px; }
  .filters { grid-template-columns: 1fr 1fr; }
  .filters label:first-child { grid-column: 1 / -1; }
  .listing { gap: 8px; }
  .listing .card > div { padding: 10px; }
  .listing h2 { font-size: 1.13rem; }
  .listing .label { font-size: .65rem; letter-spacing: .02em; }
  .mod-gallery { padding: 12px; }
  .mod-gallery img { height: auto; aspect-ratio: 4 / 3; }
  .profile-wallet { align-items: start; flex-direction: column; }
}