[data-library-items] { display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr)); gap:16px; }
[data-library-items] .card { display:flex; flex-direction:column; align-items:flex-start; gap:12px; min-width:0; min-height:0; padding:18px; overflow:hidden; }
[data-library-items] a { display:block; width:100%; overflow-wrap:anywhere; font-weight:700; font-size:1.15rem; }
[data-library-items] .card > button { margin-top:auto; }
[data-library-items] img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; margin-bottom:12px; }
[data-library-items] progress { display:block; width:100%; height:5px; margin-top:12px; accent-color:#e50914; }
[data-library-more] { margin-top:20px; }
.history-filters { display:flex; flex-wrap:wrap; gap:16px; margin:16px 0 24px; }
.history-filters label { display:flex; flex-direction:column; gap:6px; }
.history-filters select { color:#eee; background:#191919; border:1px solid #444; border-radius:8px; padding:10px 14px; font:inherit; }
#device-editor { background:#171717; color:#fff; border:1px solid #444; border-radius:16px; width:min(440px,calc(100% - 32px)); padding:24px; }
#device-editor::backdrop { background:rgb(0 0 0 / .7); }
#device-editor input { box-sizing:border-box; width:100%; padding:12px; margin:12px 0; color:inherit; background:#222; border:1px solid #555; border-radius:8px; }
#device-editor button { padding:10px 16px; background:#292929; color:#fff; border:1px solid #555; border-radius:8px; }
#device-editor [aria-label="Закрыть"] { float:right; }
#device-edit-result { color:#ff9a9a; }

/* Series subscriptions stay inside their history card so the user keeps the
   current page and scroll position while choosing a translation. */
[data-library-items] .library-subscription {
    width: 100%;
    margin-top: auto;
    color: #f5f2f4;
    font-size: 16px;
    line-height: 1.45;
}
.library-subscription *, .library-subscription *::before, .library-subscription *::after { box-sizing: border-box; }
.library-subscription button {
    min-width: 0;
    min-height: 48px;
    max-width: 100%;
    margin: 0;
    padding: .65em .8em;
    border: 1px solid #ffffff24;
    border-radius: 9px;
    background: #ffffff08;
    color: inherit;
    font: inherit;
    font-weight: 650;
    line-height: 1.3;
    white-space: normal;
    overflow-wrap: anywhere;
    cursor: pointer;
    touch-action: manipulation;
}
.library-subscription > button { width: 100%; }
.library-subscription button:hover { border-color: #ef485362; background: #ff304017; }
.library-subscription button:disabled { opacity: .55; cursor: default; }
.library-subscription button:focus-visible, .library-subscription input:focus-visible {
    outline: 2px solid #ff6873;
    outline-offset: -3px;
    border-color: #ff6873;
}
.library-subscription-panel {
    width: 100%;
    margin-top: 12px;
    padding: 12px;
    border: 1px solid #ffffff20;
    border-radius: 12px;
    background: linear-gradient(145deg, #32171dda, #161416ee 65%);
}
.library-subscription-panel[hidden] { display: none; }
.library-subscription-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 12px; }
.library-subscription-heading strong { min-width: 0; font-size: 1em; font-weight: 750; line-height: 1.35; overflow-wrap: anywhere; }
.library-subscription-heading .library-subscription-close {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    padding: 0;
    font-size: 24px;
    line-height: 1;
}
.library-subscription-current { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.library-subscription-current:empty { display: none; }
.library-subscription-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid #ffffff14; }
.library-subscription-row > span { flex: 1 1 110px; min-width: 0; color: #d9cfd4; font-size: .9em; overflow-wrap: anywhere; }
.library-subscription-row > button { flex: 0 1 auto; font-size: .9em; color: #ff9299; }
.library-subscription-field { display: flex; flex-direction: column; gap: 7px; margin: 12px 0; font-size: 1em; color: #d9cfd4; }
.library-subscription-field > span { font-size: .9em; }
.library-subscription-field input {
    width: 100%;
    min-width: 0;
    min-height: 48px;
    margin: 0;
    padding: 10px;
    border: 1px solid #ffffff2a;
    border-radius: 8px;
    background: #09070988;
    color: #f5f2f4;
    font: inherit;
    line-height: 1.4;
}
.library-subscription-field input::placeholder { color: #998e95; opacity: 1; }
.library-subscription-check { display: flex; align-items: center; gap: 10px; min-height: 48px; margin: 12px 0; padding: 8px; border: 1px solid #ffffff17; border-radius: 8px; color: #d9cfd4; cursor: pointer; }
.library-subscription-check input { flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; margin: 0; accent-color: #ed2c3a; }
.library-subscription-check span { min-width: 0; font-size: .9em; line-height: 1.4; overflow-wrap: anywhere; }
.library-subscription-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.library-subscription-actions > button { flex: 1 1 auto; background: linear-gradient(130deg, #c41725, #980f1b); border-color: #ff75834d; color: #fff; }
.library-subscription-actions > button:hover { background: #d21c2c; }
.library-subscription-status { margin: 12px 0 0; color: #f4b6bf; font-size: .9em; line-height: 1.45; overflow-wrap: anywhere; }
.library-subscription-status:empty { display: none; }