@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

body {
    background: #050607;
    margin-bottom: 48px;
}

.deep-filter-header {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: space-between;
    position: sticky;
    top: 0;
    z-index: 10;
    min-width: 0;
}

.deep-filter-header h2 {
    margin-bottom: 6px;
}

#actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    min-width: 0;
}

.deep-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.deep-button-link {
    align-items: center;
    background: #11151a;
    border: 1px solid #2b333a;
    border-radius: 8px;
    box-sizing: border-box;
    color: #dfe8e5 !important;
    display: inline-flex;
    font-weight: 600;
    justify-content: center;
    min-height: 36px;
    padding: 0 14px;
}

.deep-button-link:hover {
    border-color: rgb(100 214 176 / 35%);
}

.deep-error-card {
    border-color: rgb(214 179 100 / 34%);
}

.deep-error-card p {
    color: #9da9a7;
    line-height: 1.45;
    margin: 0 0 14px;
}

.deep-filter-summary {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin-bottom: 16px;
}

.deep-filter-summary > div {
    background:
        linear-gradient(180deg, rgb(255 255 255 / 3%), transparent 54%),
        #0f1317;
    border: 1px solid #232b31;
    border-radius: 8px;
    box-sizing: border-box;
    min-height: 78px;
    min-width: 0;
    padding: 12px;
    transition: border-color 120ms ease;
}

.deep-filter-summary > div:hover {
    border-color: rgb(100 214 176 / 24%);
}

.deep-filter-summary span {
    color: #eef5f2;
    display: block;
    font-size: clamp(16px, 2.2vw, 22px);
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.1;
    overflow-wrap: anywhere;
}

.deep-filter-summary strong {
    color: #9da9a7;
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-top: 8px;
    overflow-wrap: anywhere;
}

#buttonUpdate.active {
    pointer-events: none;
}

#buttonUpdate.active .fa-icon svg,
body.working #buttonUpdate:not(.disabled) .fa-icon svg {
    animation: spin 1s linear infinite;
    transform-origin: 50%;
}

body.updating #actions,
body.working #actions {
    cursor: progress;
}

body.updating #actions #buttonUpdate,
body.working #actions button {
    pointer-events: none;
}

.deep-filter-options {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(3, 1fr);
}

.deep-filter-options .li {
    margin: 0;
}

.deep-filter-options label {
    align-items: center;
    background: #0f1317;
    border: 1px solid #222a31;
    border-radius: 8px;
    box-sizing: border-box;
    display: flex;
    min-height: 54px;
    min-width: 0;
    padding: 10px 12px;
}

.deep-filter-options label > span:last-child {
    min-width: 0;
    overflow-wrap: anywhere;
}

.listExpander {
    font-size: 18px;
    min-width: 20px;
    padding: 0;
}

.listExpander svg {
    transform: rotate(90deg);
    transform-origin: 50%;
}

#lists .rootstats.expanded .listExpander svg,
#lists .listEntry[data-role="node"].expanded > .detailbar .listExpander svg {
    transform: rotate(180deg);
}

#listsOfBlockedHostsPrompt {
    color: #9da9a7;
    cursor: default;
    font-size: 13px;
}

#lists .rootstats {
    align-items: center;
    color: #eef5f2;
    display: flex;
    font-weight: 600;
    margin-bottom: 12px;
}

#lists .searchfield {
    display: flex;
    margin-bottom: 14px;
    width: min(420px, 100%);
    min-width: 0;
}

#lists .searchfield input {
    width: 100%;
}

#lists.searchMode > .listEntries .listEntries,
#lists.searchMode > .listEntries .listEntry.searchMatch {
    display: flex !important;
}

#lists.searchMode > .listEntries .listEntry {
    display: none;
}

#lists.searchMode > .listEntries .listExpander {
    visibility: hidden;
}

#lists .listEntries {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-inline-start: 20px;
    min-width: 0;
}

#lists > .listEntries {
    margin-inline-start: 0;
}

#lists .listEntry {
    align-items: stretch;
    display: flex;
    flex-direction: column;
    margin: 0;
    min-width: 0;
    white-space: normal;
}

#lists .listEntry[data-key="user"] {
    display: none;
}

#lists .listEntry > .detailbar {
    align-items: center;
    background:
        linear-gradient(180deg, rgb(255 255 255 / 2%), transparent),
        #0e1115;
    border: 1px solid #222a31;
    border-radius: 8px;
    box-sizing: border-box;
    column-gap: 8px;
    display: inline-flex;
    min-height: 42px;
    padding: 8px 10px;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
    transition: border-color 120ms ease;
}

#lists .listEntry[data-role="leaf"] > .detailbar:hover {
    border-color: rgb(100 214 176 / 26%);
}

#lists .listEntry[data-parent="root"] > .detailbar {
    background: #11161b;
}

#lists .listEntry.checked > .detailbar {
    border-color: rgb(100 214 176 / 32%);
}

#lists .deep-list-badge {
    background: rgb(100 214 176 / 10%);
    border: 1px solid rgb(100 214 176 / 20%);
    border-radius: 999px;
    color: #aee8d1;
    font-size: 11px;
    font-weight: 700;
    margin-inline-start: 4px;
    padding: 2px 7px;
    white-space: nowrap;
}

#lists .deep-list-badge.deep-badge-regional {
    background: rgb(148 166 220 / 12%);
    border-color: rgb(148 166 220 / 28%);
    color: #c2cdef;
}

#lists .listEntry[data-parent="root"]:not(.expanded) > .listEntries > .listEntry:not(.checked):not(.isDefault):not(.stickied) {
    display: none;
}

#lists .listEntry:not([data-parent="root"]):not(.expanded) > .listEntries > .listEntry {
    display: none;
}

#lists .listname {
    min-width: 0;
    overflow-wrap: anywhere;
}

#lists .nodestats,
#lists .leafstats {
    color: #9da9a7;
    cursor: default;
    font-size: 12px;
}

#lists .leafstats {
    display: none;
    margin-inline-start: calc(var(--checkbox-size) + var(--checkbox-margin-end));
}

#lists .listEntry.checked > .leafstats,
#lists .listEntry.checked > .detailbar .leafstats {
    display: inline-flex;
}

#lists .iconbar {
    align-items: center;
    column-gap: 6px;
    color: #9da9a7;
    display: inline-flex;
    flex-direction: row;
    flex-shrink: 0;
    font-size: 115%;
}

#lists .listEntry > .detailbar label {
    min-width: 0;
}

#lists .listEntry > .detailbar label > span:last-child {
    min-width: 0;
}

:root.deep-rtl .deep-filter-header {
    text-align: right;
}

#lists .iconbar a,
#lists .iconbar .fa-icon {
    color: #9da9a7;
    fill: #9da9a7;
}

#lists .iconbar .content,
#lists .iconbar .support,
#lists .iconbar .mustread,
#lists .iconbar .remove,
#lists .iconbar .unsecure,
#lists .iconbar .status {
    display: none;
}

#lists .listEntry.external > .detailbar .iconbar .remove,
#lists .listEntry.checked.unsecure > .detailbar .iconbar .unsecure,
#lists .listEntry.failed > .detailbar .iconbar .failed,
#lists .listEntry.checked.cached:not(.obsolete) > .detailbar .iconbar .cache,
body:not(.updating,.working) #lists .listEntry.checked.obsolete > .detailbar .iconbar .obsolete {
    display: inline-flex;
}

#lists .iconbar .remove,
#lists .iconbar .unsecure,
#lists .iconbar .failed {
    color: #ff7d86;
    cursor: pointer;
    fill: #ff7d86;
}

#lists .iconbar .obsolete {
    color: #d6b364;
    fill: #d6b364;
}

#lists .listEntry.cached.recent:not(.obsolete) > .detailbar .iconbar .cache {
    color: #64d6b0;
    fill: #64d6b0;
}

#lists .iconbar .cache {
    cursor: pointer;
}

#lists .iconbar .updating {
    transform-origin: 50%;
}

body.updating #lists .listEntry.checked.obsolete > .detailbar .iconbar .updating,
body.working #lists .listEntry.checked.obsolete:not(.cached) > .detailbar .iconbar .updating {
    animation: spin 1s steps(8) infinite;
    display: inline-flex;
}

#lists .listEntry.toRemove .checkbox {
    visibility: hidden;
}

#lists .listEntry.toRemove .listname {
    text-decoration: line-through;
}

#lists .listEntry[data-role="import"] textarea {
    box-sizing: border-box;
    display: block;
    height: 6em;
    margin: 0;
    resize: vertical;
    visibility: hidden;
    white-space: pre;
    width: 100%;
}

#lists .listEntry[data-role="import"].expanded textarea {
    visibility: visible;
}

@media (max-width: 720px) {
    .deep-filter-header {
        align-items: stretch;
        flex-direction: column;
    }

    #actions {
        flex-wrap: wrap;
    }

    .deep-filter-options {
        grid-template-columns: 1fr;
    }

    .deep-filter-summary {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .deep-filter-summary {
        grid-template-columns: 1fr;
    }
}
