html, body { margin: 0; padding: 0; overflow-x: hidden; }
body { background: #0d0f12; color: #f2f2f2; }
.loane-page, .loane-page * { box-sizing: border-box; }
.loane-page { width: calc(100% - 80px); margin: 35px auto 80px; }
.loane-message { display:flex;align-items:center;gap:9px;margin-bottom:18px;padding:12px 15px;border:1px solid #34543f;border-radius:8px;background:#17231b;color:#a7d8b3;font-size:.88rem; }
.loane-header { display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:25px; }
.loane-label,.group-kicker { display:block;margin-bottom:5px;color:#6e8eb2;font-size:.68rem;font-weight:800;letter-spacing:.12em; }
.loane-header h1 { margin:0;font-size:2rem; }
.loane-header p { margin:6px 0 0;color:#8f949d; }
.loane-progress-card { width:min(390px,100%);padding:15px 17px;border:1px solid #29333e;border-radius:11px;background:#15181d; }
.progress-top { display:flex;align-items:center;justify-content:space-between;margin-bottom:10px; }
.progress-top strong { color:#eef3f7;font-size:1.05rem; }
.progress-top span { color:#8caed3;font-size:.8rem;font-weight:700; }
.progress-track { height:7px;overflow:hidden;border-radius:999px;background:#242a31; }
.progress-value { height:100%;border-radius:inherit;background:#467fb9; }
.loane-progress-card small { display:block;margin-top:8px;color:#727a84;font-size:.7rem; }
.loane-tools { padding:18px;border:1px solid #262a30;border-radius:12px;background:#15181d; }
.loane-search { position:relative;margin-bottom:12px; }
.loane-search i { position:absolute;top:50%;left:14px;color:#727781;transform:translateY(-50%);pointer-events:none; }
.loane-search input { width:100%;padding:12px 14px 12px 42px;border:1px solid #30343b;border-radius:8px;outline:none;background:#0f1115;color:#f2f2f2;font-size:.95rem; }
.loane-search input:focus,.loane-filters select:focus { border-color:#666d78; }
.loane-search input::placeholder { color:#6f747c; }
.loane-filters { display:grid;grid-template-columns:minmax(160px,220px) minmax(240px,1fr);gap:10px; }
.loane-filters select { width:100%;min-width:0;padding:10px 34px 10px 11px;border:1px solid #30343b;border-radius:7px;outline:none;background:#0f1115;color:#dfe1e5;cursor:pointer; }
.loane-information { display:flex;justify-content:flex-end;margin:18px 2px 0;color:#9298a1;font-size:.85rem; }
.loane-group { margin-top:28px; }
.group-heading { display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #252b32; }
.group-heading h2 { margin:0;color:#eef2f5;font-size:1.25rem; }
.group-count { color:#747d87;font-size:.76rem; }
.films-container { display:grid;grid-template-columns:repeat(auto-fill,minmax(175px,1fr));gap:18px; }
.film-card { display:flex;min-width:0;overflow:hidden;flex-direction:column;border:1px solid #24282e;border-radius:10px;background:#15181d;transition:transform .2s ease,border-color .2s ease,background .2s ease; }
.film-card:hover { transform:translateY(-4px);border-color:#4a5059;background:#191d22; }
.film-card.loane-watched { border-color:#31513d; }
.film-main-link { display:flex;min-width:0;flex:1;flex-direction:column;color:inherit;text-decoration:none; }
.film-image-container { position:relative;width:100%;aspect-ratio:2/3;overflow:hidden;background:#101216; }
.film-image { position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover; }
.film-placeholder { position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;padding:20px;background:linear-gradient(145deg,#191c21,#101216);color:#656b74;text-align:center; }
.film-placeholder i { font-size:2.3rem; }
.film-placeholder span { font-size:.85rem; }
.loane-watched-badge { position:absolute;top:9px;right:9px;display:inline-flex;align-items:center;gap:5px;padding:5px 8px;border:1px solid #4a785a;border-radius:6px;background:#14281bcc;color:#9dd8ad;font-size:.68rem;font-weight:800;backdrop-filter:blur(5px); }
.film-card-content { display:flex;flex:1;flex-direction:column;padding:12px; }
.film-card-content h3 { margin:0 0 9px;overflow:hidden;color:#f1f1f1;font-size:.95rem;font-weight:600;line-height:1.35;text-overflow:ellipsis;white-space:nowrap; }
.film-info { display:flex;min-width:0;align-items:center;gap:7px;margin:4px 0 0;color:#858b94;font-size:.78rem; }
.film-info i { width:14px;flex-shrink:0;color:#69717c;text-align:center; }
.film-info span { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.previous-watches { color:#8b95a2; }
.film-card-actions { padding:0 10px 10px; }
.film-watched-button,.loane-complete-button { display:flex;width:100%;min-height:36px;align-items:center;justify-content:center;gap:7px;padding:7px 9px;border-radius:7px;font-size:.78rem;font-weight:600; }
.film-watched-button { border:1px solid #34404c;background:#182029;color:#aebdcb;text-decoration:none;transition:border-color .2s ease,background .2s ease,color .2s ease; }
.film-watched-button:hover { border-color:#3b82f6;background:#14253a;color:#cbe1fb; }
.loane-complete-button { border:1px solid #315b40;background:#15251b;color:#8fcba0; }
.no-results { display:none;align-items:center;justify-content:center;flex-direction:column;gap:7px;padding:70px 20px;color:#747d87;text-align:center; }
.no-results.visible { display:flex; }
.no-results i { margin-bottom:5px;font-size:2rem; }
.no-results strong { color:#b6bec7; }
.no-results span { font-size:.82rem; }
@media(max-width:850px){.loane-header{align-items:stretch;flex-direction:column}.loane-progress-card{width:100%}}
@media(max-width:700px){.loane-page{width:calc(100% - 24px);margin-top:20px}.loane-header h1{font-size:1.7rem}.loane-filters{grid-template-columns:1fr}.films-container{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.film-card-content{padding:10px}.film-card-content h3{font-size:.88rem}.film-info{font-size:.72rem}.film-card-actions{padding:0 8px 8px}.film-watched-button,.loane-complete-button{font-size:.72rem}}
@media(max-width:430px){.loane-tools{padding:12px}.group-heading{align-items:flex-start}.group-heading h2{font-size:1.08rem}}