@charset "utf-8";
.cft-list-wrap.cft-sf {
    position: relative; max-width: 1200px; margin: 12px auto; padding: 22px 26px 20px;
    --sf-portrait-bg: linear-gradient(160deg, #101011 0%, #242426 55%, #454548 100%);
    border: 1px solid var(--sf-line); border-radius: 5px;
    background: rgb(from var(--sf-stage) r g b / 80%); color: var(--sf-text);
    box-shadow: inset 0 0 0 8px rgb(from var(--sf-stage) r g b / 60%); isolation: isolate;
}
.cft-list-wrap.cft-sf::before {content: ''; position: absolute; inset: 9px; border: 1px solid var(--sf-line); pointer-events: none; z-index: -1;}
.cft-list-wrap.cft-sf .cft-list-fasteners {position: absolute; inset: 0; pointer-events: none;}
.cft-list-wrap.cft-sf .cft-list-fasteners i {position: absolute; width: 4px; height: 4px; border: 1px solid var(--sf-muted); border-radius: 50%;}
.cft-list-fasteners i:nth-child(1) {left: 3px; top: 3px;}
.cft-list-fasteners i:nth-child(2) {right: 3px; top: 3px;}
.cft-list-fasteners i:nth-child(3) {left: 3px; bottom: 3px;}
.cft-list-fasteners i:nth-child(4) {right: 3px; bottom: 3px;}
.cft-list-wrap.cft-sf :is(.cft-category,.cft-filter-options,.cft-list-actions) {display: flex; flex-wrap: wrap; gap: 5px; align-items: center;}
.cft-list-wrap.cft-sf .cft-category {margin: 0 0 12px; gap: 4px;}
.cft-list-wrap.cft-sf :is(.cft-category a,.cft-filter-btn) {display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border: 1px solid transparent; border-radius: 2px; font-size: 12px; color: var(--sf-muted); text-decoration: none; background: transparent;}
.cft-list-wrap.cft-sf :is(.cft-category a.active,.cft-filter-btn.active) {color: var(--sf-text); border-color: var(--sf-line); background: rgb(from var(--sf-raised) r g b / 72%); box-shadow: inset 2px 0 var(--sf-mark);}
.cft-list-wrap.cft-sf :is(.cft-category a,.cft-filter-btn):hover {color: var(--sf-text); background: rgb(from var(--sf-raised) r g b / 58%);}
.cft-list-wrap.cft-sf .cft-list-header {display: flex; flex-wrap: wrap; gap: 10px; align-items: center; border-bottom: 1px solid var(--sf-line); padding: 0 0 10px;}
.cft-list-wrap.cft-sf .cft-search-form {display: flex; flex: 0 1 230px; width: 230px; align-items: center; gap: 6px; min-width: 0; max-width: 100%; margin-left: auto; order: 2; padding: 3px 0; border-bottom: 1px solid var(--sf-line);}
.cft-list-wrap.cft-sf .cft-search-form .cft-input {min-width: 0; width: 100%; flex: 1;}
.cft-list-wrap.cft-sf :is(.cft-input,.cft-select,.cft-filter-select) {font-size: 12px; min-height: 30px; border: 0; border-bottom: 1px solid var(--sf-line); border-radius: 0; background: transparent; color: var(--sf-text); padding: 5px 6px;}
.cft-list-wrap.cft-sf option {background: var(--sf-surface); color: var(--sf-text);}
.cft-list-wrap.cft-sf .cft-filters {display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; flex: 1 1 460px; order: 1;}
.cft-list-wrap.cft-sf .cft-filter-group {display: flex; gap: 5px; align-items: center; min-width: 0;}
.cft-list-wrap.cft-sf .cft-filter-label {color: var(--sf-muted); font-size: 10px; white-space: nowrap; margin-right: 3px;}
.cft-list-wrap.cft-sf .cft-filter-select {max-width: 140px;}
.cft-list-wrap.cft-sf .cft-filter-reset {color: var(--sf-muted); font-size: 11px; white-space: nowrap; margin-left: auto;}
.cft-list-wrap.cft-sf .cft-filter-row {display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 10px;}
.cft-list-wrap.cft-sf .cft-list-info {color: var(--sf-muted); font-size: 11px;}
.cft-list-wrap.cft-sf .cft-list-info strong {color: var(--sf-text); font-weight: 500;}
.cft-list-wrap.cft-sf :is(.cft-btn-write,.cft-btn-sort,.cft-btn-search) {display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-shrink: 0; padding: 5px 8px; min-height: 30px; border: 0; border-radius: 2px; background: transparent; color: var(--sf-text); font: 12px/1.4 var(--sf-font); text-decoration: none; cursor: pointer; white-space: nowrap;}
.cft-list-wrap.cft-sf :is(.cft-btn-write,.cft-btn-sort,.cft-btn-search):hover {background: rgb(from var(--sf-raised) r g b / 72%);}
.cft-list-wrap.cft-sf .cft-btn-sort.cft-editing {box-shadow: inset 0 -1px var(--sf-mark); color: var(--sf-mark);}
.cft-list-wrap.cft-sf .cft-btn-sort:disabled {opacity: .6; cursor: wait;}
.cft-list-wrap.cft-sf .cft-card-grid {display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 18px 12px; position: relative;}
.cft-list-wrap.cft-sf .cft-card {min-width: 0; width: 100%; max-width: none; height: auto; position: relative; background: transparent; border: 0; border-radius: 0; box-shadow: none; transition: none;}
.cft-list-wrap.cft-sf .cft-card::before {content: none;}
.cft-list-wrap.cft-sf .cft-card:hover {transform: none; box-shadow: none;}
.cft-list-wrap.cft-sf .cft-card-link {display: block; color: inherit; text-decoration: none; overflow: visible;}
.cft-list-wrap.cft-sf .cft-card-portrait-line {display: flex; align-items: flex-start; gap: 5px; padding-right: 15px; position: relative;}
.cft-list-wrap.cft-sf .cft-card-cover {width: 100%; position: relative; padding: 2px; background: rgb(from var(--sf-stage) r g b / 40%); border: 1px solid var(--sf-line); border-radius: 4px; box-shadow: inset 0 0 0 2px rgb(from var(--sf-stage) r g b / 40%); backdrop-filter: blur(4px); transition: border-color 150ms;}
.cft-list-wrap.cft-sf .cft-card-cover .cft-list-fasteners i {width: 3px; height: 3px;}
.cft-list-wrap.cft-sf .cft-card-cover img {display: block; width: 100%; height: auto; max-width: 100%; aspect-ratio: 3 / 0.1; object-fit: cover; object-position: center top; background: var(--sf-portrait-bg); border: 1px solid var(--sf-line); transform: none;}
.cft-list-wrap.cft-sf .cft-card-no-image {display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; aspect-ratio: 3 / 4; border: 1px solid var(--sf-line); color: #bcbcc0; background: var(--sf-portrait-bg);}
.cft-list-wrap.cft-sf .cft-card-no-image i {font-size: 24px; opacity: .5;}
.cft-list-wrap.cft-sf .cft-card-no-image span {font-size: 10px;}
.cft-list-wrap.cft-sf .cft-card-rank-stars {position: absolute; right: 0; top: 0; display: flex; flex-direction: column; gap: 1px; width: 12px; color: var(--sf-mark); font-size: 8px; line-height: 1.2; letter-spacing: 0;}
.cft-list-wrap.cft-sf .cft-card-badges {position: absolute; top: 13px; left: 13px; right: 13px; display: flex; gap: 4px; justify-content: flex-end;}
.cft-list-wrap.cft-sf .cft-card-badge {padding: 2px 5px; background: rgb(from var(--sf-surface) r g b / 72%); color: var(--sf-text); font-size: 10px; border-radius: 2px; backdrop-filter: blur(4px);margin-top:12px}
.cft-list-wrap.cft-sf .cft-card-identity {padding: 8px 15px 0 10px; min-width: 0; text-align: left;}
.cft-list-wrap.cft-sf .cft-card-name-line {display: flex; justify-content: flex-start; align-items: baseline; flex-wrap: wrap; gap: 2px 5px;}
.cft-list-wrap.cft-sf .cft-card-title {font-size: 10px; color: var(--sf-mark); overflow-wrap: anywhere;}
.cft-list-wrap.cft-sf .cft-card-name {margin: 0; font: 500 12px/1.5 var(--sf-font); color: var(--sf-muted); text-shadow: none; overflow-wrap: anywhere;}
.cft-list-wrap.cft-sf :is(.cft-card-original,.cft-card-name.cft-name-only) {font: 650 clamp(17px,1.5vw,20px)/1.15 var(--sf-font); letter-spacing: -.04em; margin: 0; color: var(--sf-text); overflow-wrap: anywhere;}
.cft-list-wrap.cft-sf .cft-card:hover .cft-card-cover {border-color: var(--sf-mark);}
.cft-list-wrap.cft-sf .cft-card:hover :is(.cft-card-original,.cft-name-only) {color: var(--sf-mark);}
.cft-list-wrap.cft-sf .cft-card-grid.cft-editing .cft-card {outline: 1px dashed var(--sf-mark); outline-offset: 5px; cursor: grab;}
.cft-list-wrap.cft-sf .cft-card-grid.cft-editing .cft-card-link {pointer-events: none;}
.cft-list-wrap.cft-sf .cft-card.ui-sortable-helper {background: var(--sf-stage); cursor: grabbing; opacity: .85;}
.cft-list-wrap.cft-sf .sortable-placeholder {border: 1px dashed var(--sf-mark); background: rgb(from var(--sf-raised) r g b / 40%); min-width: 0;}
.cft-list-wrap.cft-sf .cft-pagination {margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--sf-line); text-align: center;}
.cft-list-wrap.cft-sf .cft-no-data {grid-column: 1/-1; padding: 60px 15px; text-align: center; color: var(--sf-muted);}
.cft-list-wrap.cft-sf .cft-no-data > i {font-size: 28px; opacity: .5;}
.cft-list-wrap.cft-sf :is(button,a,input,select):focus-visible {outline: 2px solid var(--sf-mark); outline-offset: 4px;}
@media(max-width:1000px) {
 .cft-list-wrap.cft-sf {padding: 20px;}
 .cft-list-wrap.cft-sf .cft-card-grid {grid-template-columns: repeat(4,minmax(0,1fr));}
}
@media(max-width:768px) {
 .cft-list-wrap.cft-sf {margin: 0; padding: 16px 12px; border: 0; border-radius: 0; box-shadow: none; background: transparent;}
 .cft-list-wrap.cft-sf::before,.cft-list-wrap.cft-sf > .cft-list-fasteners {display: none;}
 .cft-list-wrap.cft-sf .cft-category {margin-bottom: 10px;}
 .cft-list-wrap.cft-sf .cft-list-header {gap: 8px; padding-block: 8px;}
 .cft-list-wrap.cft-sf .cft-search-form {flex: 0 1 230px; max-width: 100%;}
 .cft-list-wrap.cft-sf .cft-filters {gap: 8px 12px;}
 .cft-list-wrap.cft-sf .cft-filter-group {flex-wrap: wrap;}
 .cft-list-wrap.cft-sf .cft-filter-options {gap: 2px;}
 .cft-list-wrap.cft-sf .cft-filter-btn {font-size: 11px; padding: 3px 7px;}
 .cft-list-wrap.cft-sf .cft-btn-sort {display: none;}
 .cft-list-wrap.cft-sf .cft-card-grid {grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px 10px;}
 .cft-list-wrap.cft-sf .cft-card-portrait-line {padding-right: 13px; gap: 4px;}
 .cft-list-wrap.cft-sf .cft-card-cover {padding: 5px;}
 .cft-list-wrap.cft-sf .cft-card-rank-stars {font-size: 8px; width: 9px;}
 .cft-list-wrap.cft-sf .cft-card-identity {padding-top: 7px; padding-right: 13px;}
 .cft-list-wrap.cft-sf .cft-card-name-line {gap: 2px 5px;}
 .cft-list-wrap.cft-sf .cft-card-title {font-size: 9px;}
 .cft-list-wrap.cft-sf .cft-card-name {font-size: 11px;}
 .cft-list-wrap.cft-sf :is(.cft-card-original,.cft-card-name.cft-name-only) {font-size: 18px;}
}
@media(prefers-reduced-motion:reduce) {.cft-list-wrap.cft-sf * {transition: none!important;}}

.cft-list-wrap.cft-sf .cft-search-form .cft-input {border: 0; background: transparent; border-radius: 0; padding: 3px 0; min-height: 26px; font-size: 11px; box-shadow: none;}
.cft-list-wrap.cft-sf .cft-search-form .cft-input::placeholder {color: var(--sf-muted);}
.cft-list-wrap.cft-sf .cft-search-form .cft-btn-search {width: 26px; min-height: 26px; padding: 0; background: transparent; color: var(--sf-muted);}
.cft-list-wrap.cft-sf.cft-list-standalone .cft-list-header {border: 0; padding: 0;}
.cft-list-wrap.cft-sf.cft-list-standalone .cft-search-form {flex: 0 1 180px; width: 180px;}


/* Classification belongs to the portrait: flag outside, class inside. */
.cft-list-wrap.cft-sf .cft-card-faction-flag {position: absolute; right: 0; bottom: 6px; width: 12px; display: flex; justify-content: center; color: var(--faction-color, var(--sf-mark)); font-size: 11px; line-height: 1;}
.cft-list-wrap.cft-sf .cft-card-class-overlay {position: absolute; left: 10px; bottom: 10px; max-width: calc(100% - 20px); padding: 2px 5px; border: 1px solid rgb(from var(--sf-line) r g b / 70%); border-radius: 2px; background: rgb(from var(--sf-surface) r g b / 78%); color: var(--sf-text); backdrop-filter: blur(4px); font-size: 10px; line-height: 1.4; overflow-wrap: anywhere;}
@media(max-width:768px) {
 .cft-list-wrap.cft-sf .cft-card-faction-flag {width: 9px; font-size: 9px;}
 .cft-list-wrap.cft-sf .cft-card-class-overlay {font-size: 9px; padding: 2px 4px;}
}