.media-library-page { display: grid; gap: 22px; }
.ml-hero { display: flex; align-items: end; justify-content: space-between; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--mc-line); }
.ml-hero h1 { margin: 3px 0 7px; font-size: clamp(2rem, 4vw, 3.3rem); letter-spacing: -.045em; }
.ml-hero p { max-width: 690px; margin: 0; color: var(--mc-muted); }
.ml-section-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 5px; border: 1px solid var(--mc-line); border-radius: 17px; background: rgba(7, 12, 20, .72); }
.ml-section-tabs button { display: flex; min-height: 46px; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; border: 0; border-radius: 12px; color: var(--mc-muted); background: transparent; cursor: pointer; font-weight: 700; text-align: left; }
.ml-section-tabs button.active { color: #dff8ff; background: rgba(55, 181, 214, .13); box-shadow: inset 0 0 0 1px rgba(84, 205, 235, .2); }
.ml-section-tabs b { display: grid; min-width: 25px; height: 25px; place-items: center; border-radius: 999px; color: var(--mc-subtle); background: rgba(255,255,255,.05); font-size: .65rem; }
.ml-actions-row { display: grid; grid-template-columns: repeat(2, minmax(0, 250px)); gap: 9px; }
.ml-scan { display: grid; min-width: 202px; min-height: 66px; padding: 9px 17px; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 1fr; align-items: center; border: 1px solid rgba(90, 204, 239, .34); border-radius: 16px; color: #d9f8ff; background: radial-gradient(circle at 10% 0, rgba(45, 195, 237, .24), transparent 70%), #0a1a29; cursor: pointer; text-align: left; }
.ml-scan > span { grid-row: 1 / 3; font-size: 1.8rem; color: #55d9f5; }
.ml-scan b { align-self: end; font-size: .84rem; }
.ml-scan small { align-self: start; color: #78a3b1; font-size: .65rem; }
.ml-scan:disabled { opacity: .65; cursor: wait; }
.ml-import { display: grid; min-height: 66px; padding: 9px 17px; grid-template-columns: 40px 1fr; grid-template-rows: 1fr 1fr; align-items: center; border: 1px solid rgba(166, 145, 238, .28); border-radius: 16px; color: #ece5ff; background: radial-gradient(circle at 10% 0, rgba(130, 91, 221, .2), transparent 70%), #151224; cursor: pointer; text-align: left; }
.ml-import input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.ml-import > span { grid-row: 1 / 3; font-size: 1.7rem; color: #b9a3ff; }
.ml-import b { align-self: end; font-size: .84rem; }
.ml-import small { align-self: start; color: #9c91bd; font-size: .65rem; }
.ml-import.disabled { opacity: .65; cursor: wait; }
.ml-scan-result { padding: 12px 15px; border: 1px solid rgba(83, 209, 180, .25); border-radius: 13px; color: #a9e9d4; background: rgba(57, 169, 139, .08); font-size: .78rem; }
.ml-stats { display: flex; gap: 8px; flex-wrap: wrap; }
.ml-stats span { padding: 7px 11px; border: 1px solid var(--mc-line); border-radius: 999px; color: var(--mc-muted); background: rgba(255,255,255,.02); font-size: .7rem; }
.ml-stats b { color: var(--mc-text-soft); }
.ml-add { padding: 14px; border: 1px solid var(--mc-line); border-radius: 16px; background: rgba(11, 17, 28, .72); }
.ml-add form { display: grid; grid-template-columns: 150px minmax(0, 1fr) auto; gap: 9px; margin: 0; }
.ml-add :is(input, select) { min-height: 44px; margin: 0; }
.ml-results { display: grid; margin-top: 12px; gap: 7px; }
.ml-results article { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; gap: 11px; align-items: center; padding: 8px; border-top: 1px solid var(--mc-line); }
.ml-result-poster { display: grid; width: 48px; height: 68px; place-items: center; overflow: hidden; border-radius: 7px; color: var(--mc-subtle); background: var(--mc-surface-3); }
.ml-result-poster img { width: 100%; height: 100%; object-fit: cover; }
.ml-results article > div:nth-child(2) { min-width: 0; display: grid; gap: 2px; }
.ml-results small { color: var(--mc-subtle); }
.ml-results p { max-width: 720px; margin: 2px 0 0; color: var(--mc-muted); font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ml-filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
.ml-filters button { min-height: 36px; padding: 0 13px; border: 1px solid var(--mc-line); border-radius: 999px; color: var(--mc-muted); background: transparent; cursor: pointer; white-space: nowrap; }
.ml-filters button.active { border-color: rgba(93, 210, 240, .32); color: #b9eef8; background: rgba(41, 165, 207, .12); }
.ml-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 17px; align-items: start; }
.ml-card { position: relative; min-width: 0; border: 1px solid var(--mc-line); border-radius: 18px; background: #0b111c; overflow: clip; box-shadow: 0 18px 48px rgba(0,0,0,.18); }
.ml-card.has-news { border-color: rgba(73, 207, 238, .42); box-shadow: 0 0 0 1px rgba(73, 207, 238, .06), 0 20px 58px rgba(0, 128, 173, .13); }
.ml-poster { position: relative; width: 100%; aspect-ratio: 2/2.72; overflow: hidden; background: linear-gradient(145deg, #12283a, #11121d 60%, #241939); }
.ml-poster::after { content: ''; position: absolute; inset: auto 0 0; height: 35%; background: linear-gradient(transparent, #0b111c); pointer-events: none; }
.ml-poster img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.ml-card:hover .ml-poster img { transform: scale(1.025); }
.ml-poster-fallback { display: grid; width: 100%; height: 100%; place-items: center; color: rgba(154, 210, 232, .34); font-size: 4rem; }
.ml-news-badge { position: absolute; z-index: 2; top: 10px; right: 10px; padding: 6px 8px; border-radius: 999px; color: #06131b; background: #5de2f4; font-size: .65rem; font-weight: 800; box-shadow: 0 6px 20px rgba(61, 211, 239, .28); }
.ml-card-body { display: grid; gap: 9px; padding: 2px 14px 15px; }
.ml-card-kicker { display: flex; justify-content: space-between; color: var(--mc-subtle); font-size: .63rem; text-transform: uppercase; letter-spacing: .08em; }
.ml-card h3 { min-height: 2.4em; margin: 0; color: #edf5ff; font-size: 1rem; line-height: 1.2; }
.ml-status { min-height: 35px; margin: 0; padding-block: 5px; border-radius: 10px; font-size: .72rem; }
.ml-progress { height: 5px; overflow: hidden; border-radius: 99px; background: #202b39; }
.ml-progress i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #38b9df, #79e5e0); }
.ml-progress-copy { display: flex; justify-content: space-between; gap: 8px; color: var(--mc-muted); font-size: .68rem; }
.ml-progress-copy small { color: var(--mc-subtle); }
.ml-quick { min-height: 35px; border: 1px solid rgba(79, 203, 229, .2); border-radius: 10px; color: #aee6f2; background: rgba(52, 162, 193, .08); cursor: pointer; font-size: .71rem; font-weight: 700; }
.ml-details { padding-top: 1px; border-top: 1px solid var(--mc-line); }
.ml-details summary { padding: 10px 0 2px; color: var(--mc-muted); cursor: pointer; font-size: .69rem; }
.ml-details > p { color: var(--mc-muted); font-size: .72rem; line-height: 1.55; }
.ml-details dl { display: grid; gap: 5px; }
.ml-details dl > div { display: flex; justify-content: space-between; gap: 10px; color: var(--mc-muted); font-size: .68rem; }
.ml-details dt { color: var(--mc-subtle); }
.ml-details dd { margin: 0; text-align: right; }
.ml-providers { display: grid; gap: 7px; margin-top: 10px; color: var(--mc-muted); font-size: .67rem; }
.ml-providers > div { display: flex; gap: 5px; flex-wrap: wrap; }
.ml-providers span { display: inline-flex; align-items: center; gap: 4px; padding: 4px 6px; border-radius: 7px; background: var(--mc-surface-3); }
.ml-providers img { width: 18px; height: 18px; border-radius: 4px; }
.ml-detail-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 12px; }
.ml-detail-actions .danger { color: #e6989f; }
.ml-empty { grid-column: 1 / -1; display: grid; min-height: 260px; place-items: center; align-content: center; text-align: center; color: var(--mc-muted); }
.ml-empty > span { font-size: 3.4rem; color: rgba(113, 188, 220, .25); }
.ml-empty h2 { margin: 7px 0 0; color: var(--mc-text-soft); }
.ml-empty p { max-width: 480px; }
.ml-memory-head { display: flex; align-items: end; justify-content: space-between; gap: 18px; }
.ml-memory-head h2 { margin: 0 0 5px; color: var(--mc-text-soft); font-size: clamp(1.25rem, 3vw, 1.8rem); }
.ml-memory-head p { max-width: 650px; margin: 0; color: var(--mc-muted); }
.ml-memory-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
.ml-memory-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px; align-items: start; padding: 15px; border: 1px solid var(--mc-line); border-radius: 17px; background: linear-gradient(145deg, rgba(18, 34, 46, .72), rgba(11, 17, 28, .92)); }
.ml-memory-icon { display: grid; width: 48px; height: 48px; place-items: center; border: 1px solid rgba(100, 203, 226, .15); border-radius: 14px; background: rgba(63, 166, 190, .08); font-size: 1.35rem; }
.ml-memory-copy { min-width: 0; }
.ml-memory-copy h3 { margin: 3px 0 5px; color: #edf5ff; font-size: 1rem; }
.ml-memory-copy p { margin: 7px 0; color: var(--mc-muted); font-size: .73rem; line-height: 1.5; }
.ml-memory-copy time, .ml-rating { color: var(--mc-subtle); font-size: .67rem; }
.ml-memory-place { color: #9fddeb !important; }
.ml-memory-card > button { grid-column: 2; justify-self: start; }
.ml-attribution { padding-top: 15px; border-top: 1px solid var(--mc-line); color: var(--mc-subtle); font-size: .61rem; line-height: 1.5; }
.ml-loading { display: grid; min-height: 50vh; place-items: center; align-content: center; gap: 13px; color: var(--mc-muted); }
.ml-loading span { width: 34px; height: 34px; border: 2px solid var(--mc-line); border-top-color: #58d7ed; border-radius: 50%; animation: ml-spin .8s linear infinite; }
@keyframes ml-spin { to { transform: rotate(1turn); } }

@media (max-width: 760px) {
  .ml-hero { display: grid; align-items: start; }
  .ml-section-tabs { grid-template-columns: 1fr; }
  .ml-actions-row { grid-template-columns: 1fr; }
  .ml-scan, .ml-import { width: 100%; min-width: 0; }
  .ml-add form { grid-template-columns: 112px minmax(0, 1fr); }
  .ml-add form .btn { grid-column: 1 / -1; }
  .ml-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .ml-card { border-radius: 14px; }
  .ml-card-body { padding: 1px 9px 11px; gap: 7px; }
  .ml-card h3 { font-size: .86rem; }
  .ml-progress-copy { display: grid; }
  .ml-results article { grid-template-columns: 42px minmax(0, 1fr); }
  .ml-results article > button { grid-column: 1 / -1; width: 100%; }
  .ml-memory-head { display: grid; align-items: start; }
  .ml-memory-head .btn { width: 100%; }
}
@media (max-width: 360px) { .ml-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ml-loading span { animation: none; } .ml-poster img { transition: none; } }