:root {
  --mmb-bg: #f6f8fb;
  --mmb-sidebar: #eef2f8;
  --mmb-card: #ffffff;
  --mmb-text: #152238;
  --mmb-muted: #6a768b;
  --mmb-border: #e2e8f2;
  --mmb-radius: 14px;
  --mmb-shadow: 0 8px 24px rgba(22, 34, 56, 0.08);
  --mmb-gap: 16px;
}

.mmb-dashboard { font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color: var(--mmb-text); background: var(--mmb-bg); padding: 20px; border-radius: var(--mmb-radius); }
.mmb-dashboard-root { width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; }
.mmb-dashboard-root *, .mmb-dashboard-root *::before, .mmb-dashboard-root *::after { box-sizing: border-box; }
.mmb-dashboard[data-theme-mode="light"] { color-scheme: light; }
.mmb-dashboard[data-theme-mode="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: light) {
  .mmb-dashboard[data-theme-mode="auto"] { color-scheme: light; }
}
@media (prefers-color-scheme: dark) {
  .mmb-dashboard[data-theme-mode="auto"] { color-scheme: dark; }
}
.mmb-layout { display:grid; grid-template-columns: 300px 1fr; gap: 18px; max-width:100%; }
.mmb-layout > * { min-width: 0; }
.mmb-main { min-width:0; max-width:100%; }
.mmb-sidebar { background: var(--mmb-sidebar); border:1px solid var(--mmb-border); border-radius: var(--mmb-radius); padding: 14px; display:flex; flex-direction:column; max-height: 80vh; }
.mmb-sidebar__head h3 { margin:0; }
.mmb-sidebar__head small { color: var(--mmb-muted); }
.mmb-film-list { list-style:none; margin:12px 0; padding:0; overflow:auto; display:grid; gap:8px; }
.mmb-film-item { width:100%; border:1px solid var(--mmb-border); background:var(--mmb-card); border-radius:12px; text-align:left; padding:10px; display:grid; grid-template-columns:84px 1fr; gap:12px; align-items:center; cursor:pointer; transition: background .18s ease, border-color .18s ease, box-shadow .18s ease; }
.mmb-film-item:hover { background:color-mix(in srgb, var(--mmb-card) 85%, var(--mmb-accent) 15%); border-color: color-mix(in srgb, var(--mmb-border) 55%, var(--mmb-accent) 45%); box-shadow: 0 6px 16px rgba(0,0,0,.18); }
.mmb-film-item img, .mmb-poster-placeholder { width:84px; height:112px; object-fit:cover; border-radius:8px; display:grid; place-items:center; font-size:12px; font-weight:700; background:color-mix(in srgb, var(--mmb-sidebar) 70%, var(--mmb-accent) 30%); color:var(--mmb-text); }
.mmb-film-item strong { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; font-size:14px; line-height:1.25; }
.mmb-film-item small { color: var(--mmb-muted); display:block; margin-top:4px; }
.mmb-film-item.is-selected { border-color: color-mix(in srgb, var(--mmb-accent) 65%, #ffffff 35%); background: color-mix(in srgb, var(--mmb-card) 70%, var(--mmb-accent) 30%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mmb-accent) 65%, #ffffff 35%); }

.mmb-compare-panel { margin-top:auto; background:var(--mmb-card); border:1px solid var(--mmb-border); border-radius:10px; padding:10px; }
.mmb-selected-chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mmb-chip { border:1px solid var(--mmb-border); background:color-mix(in srgb, var(--mmb-card) 85%, var(--mmb-sidebar) 15%); border-radius:999px; padding:3px 8px; font-size:12px; cursor:pointer; }
.mmb-platform-chip-list { display:inline-flex; flex-wrap:wrap; gap:6px; vertical-align:middle; }
.mmb-platform-chip { display:inline-block; border:1px solid var(--mmb-border); border-radius:999px; padding:2px 8px; font-size:11px; background:color-mix(in srgb, var(--mmb-card) 80%, var(--mmb-accent) 20%); }
.mmb-clear-btn { margin-top:8px; border:0; background:var(--mmb-primary, #1f3a67); color:var(--mmb-bg); border-radius:8px; padding:6px 10px; cursor:pointer; }

.mmb-dashboard__title-row h2 { margin:0 0 6px; font-size:1.6rem; }
.mmb-dashboard__title-row p { margin:0; color: var(--mmb-muted); }
.mmb-dashboard__logo { max-width: 180px; max-height: 56px; width: auto; height: auto; display: block; margin-bottom: 8px; }
.mmb-mode-label { margin-top: 10px; padding: 8px 10px; border:1px solid var(--mmb-border); border-radius:10px; color:var(--mmb-muted); background: var(--mmb-card); font-size:12px; }
.mmb-filter-debug { margin-top:10px; padding:8px 10px; border:1px solid var(--mmb-border); border-radius:10px; background:var(--mmb-card); color:var(--mmb-muted); font-size:12px; }
.mmb-filter-caption { margin: 8px 2px 0; color: var(--mmb-muted); font-size: 12px; }
.mmb-dashboard__kpis { display:flex; flex-wrap:wrap; gap: 16px; margin-top: 16px; min-width: 0; }
.mmb-dashboard__kpis .mmb-kpi { flex: 1 1 180px; max-width: 100%; min-width: 0; }
.mmb-kpi, .mmb-card { background: var(--mmb-card); border:1px solid var(--mmb-border); border-radius: var(--mmb-radius); box-shadow: var(--mmb-shadow); padding:16px; }
.mmb-kpi h4 { margin:0 0 8px; font-size:12px; text-transform:uppercase; color:var(--mmb-muted); }
.mmb-kpi p { margin:0; font-size:1.45rem; font-weight:700; }

.mmb-dashboard__filters { display:grid; gap:10px; grid-template-columns:2fr repeat(3,1fr) 1fr 1fr; margin-top:18px; }
.mmb-dashboard__filters input, .mmb-dashboard__filters select, .mmb-detail-top select { border:1px solid var(--mmb-border); border-radius:10px; padding:10px 12px; min-width:0; background:var(--mmb-card); }

.mmb-dashboard__charts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap: var(--mmb-gap); margin-top: 18px; }
.mmb-dashboard canvas { display:block; width:100%; max-width: 100%; }
.mmb-card { min-width: 0; overflow: hidden; }
.mmb-chart-caption { margin: 0 0 8px; color: var(--mmb-muted); font-size: 12px; }
.mmb-card__head { display:flex; justify-content:space-between; gap:10px; align-items:center; }
.mmb-copy-btn { border:1px solid var(--mmb-border); border-radius:8px; background:var(--mmb-card); color:var(--mmb-text); padding:4px 10px; cursor:pointer; font-size:12px; }
.mmb-unknown-list { list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.mmb-unknown-list li { display:flex; justify-content:space-between; gap:8px; font-size:13px; border-bottom:1px dashed var(--mmb-border); padding-bottom:4px; }

.mmb-dashboard__detail { margin-top: 18px; }
.mmb-detail-top { display:flex; justify-content:space-between; align-items:center; }
.mmb-film-detail-grid { display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap:8px 14px; }

.mmb-dashboard__table { margin-top:18px; overflow-x:auto; overflow-y:hidden; background:var(--mmb-card); border:1px solid var(--mmb-border); border-radius: var(--mmb-radius); box-shadow: var(--mmb-shadow); max-width: 100%; }
.mmb-table { width:100%; border-collapse:collapse; }
.mmb-table th, .mmb-table td { border-bottom:1px solid var(--mmb-border); padding:10px 12px; text-align:left; white-space:nowrap; }
.mmb-table th { position:sticky; top:0; background:var(--mmb-card); cursor:pointer; z-index:1; }
.mmb-table tbody tr:nth-child(even){ background:color-mix(in srgb, var(--mmb-card) 92%, var(--mmb-sidebar) 8%); }
.mmb-table tbody tr:hover { background:color-mix(in srgb, var(--mmb-card) 80%, var(--mmb-accent) 20%); }
.mmb-view-btn { border:1px solid var(--mmb-border); background:var(--mmb-card); border-radius:8px; padding:4px 10px; cursor:pointer; }

.mmb-debug-box { background:color-mix(in srgb, var(--mmb-card) 88%, #8a6d1a 12%); border:1px solid color-mix(in srgb, var(--mmb-border) 60%, #8a6d1a 40%); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-size:13px; }
.mmb-debug-box ul{margin:8px 0 0 16px;} .mmb-debug-box--warn{ background:color-mix(in srgb, var(--mmb-card) 90%, #6a5f1f 10%); border-color:color-mix(in srgb, var(--mmb-border) 70%, #6a5f1f 30%); }
.mmb-empty { color: var(--mmb-muted); }

@media (max-width: 1100px){ .mmb-layout{ grid-template-columns:1fr; } .mmb-sidebar{ max-height:none; } }
@media (max-width: 960px){ .mmb-dashboard__filters{ grid-template-columns:repeat(2,minmax(0,1fr)); } .mmb-dashboard__charts{ grid-template-columns:1fr; } .mmb-film-detail-grid{ grid-template-columns:1fr; } }
@media (max-width: 640px){ .mmb-table thead{ display:none; } .mmb-table,.mmb-table tbody,.mmb-table tr,.mmb-table td{ display:block; width:100%; } .mmb-table td{ white-space:normal; padding:6px 12px; } .mmb-table td::before{ content: attr(data-label); display:block; font-size:11px; color:var(--mmb-muted); font-weight:700; margin-bottom:2px; } }

.mmb-section-labels { display:flex; gap:8px; margin-top:14px; flex-wrap:wrap; }
.mmb-section-labels span { border:1px solid var(--mmb-border); border-radius:999px; padding:4px 10px; font-size:12px; color:var(--mmb-muted); }
.mmb-section-labels span.is-active { color:var(--mmb-text); background:color-mix(in srgb, var(--mmb-card) 75%, var(--mmb-accent) 25%); }
.mmb-compare-view .mmb-card canvas,
.mmb-overall-view .mmb-card canvas,
.mmb-insights-view .mmb-card canvas { min-height:280px; }
.mmb-insights-view,.mmb-top-films { margin-top:18px; }
.mmb-chart-empty { border:1px dashed var(--mmb-border); border-radius:10px; padding:18px; color:var(--mmb-muted); font-size:13px; margin-top:10px; }
.mmb-raw-data-controls { margin-top:14px; color:var(--mmb-muted); font-size:13px; }
.mmb-modal[hidden] { display:none; }
.mmb-modal { position:fixed; inset:0; z-index:9999; }
.mmb-modal__backdrop { position:absolute; inset:0; background:rgba(0,0,0,.6); }
.mmb-modal__dialog { position:relative; width:min(900px,92vw); max-height:90vh; overflow:auto; margin:4vh auto; background:var(--mmb-card); border:1px solid var(--mmb-border); border-radius:12px; padding:16px; }
.mmb-modal__close { position:absolute; right:8px; top:8px; border:0; background:transparent; color:var(--mmb-text); font-size:24px; cursor:pointer; }
.mmb-modal-list { list-style:none; margin:10px 0; padding:0; display:grid; gap:8px; }
.mmb-modal-list li { display:flex; gap:10px; align-items:center; }
.mmb-modal-list img, .mmb-modal-list .mmb-poster-placeholder { width:40px; height:56px; border-radius:6px; object-fit:cover; }

.mmb-detail-poster { margin:8px 0 10px; }
.mmb-detail-poster img,.mmb-detail-poster .mmb-poster-placeholder { width:140px; height:190px; border-radius:10px; object-fit:cover; border:1px solid var(--mmb-border); }

.mmb-dashboard__filters .mmb-clear-btn { align-self:stretch; margin-top:0; }
.mmb-link-btn { background:none; border:0; color:var(--mmb-text); cursor:pointer; text-align:left; padding:0; }
.mmb-link-btn:hover { text-decoration:underline; }

.mmb-chart-responsive { position: relative; width: 100%; height: 260px; }
.mmb-chart-responsive canvas { width: 100% !important; height: 100% !important; }

.mmb-chart-square { position:relative; width:100%; max-width:760px; aspect-ratio:1/1; min-height:520px; margin:0 auto; }
.mmb-chart-square canvas { width:100% !important; height:100% !important; }
@media (max-width: 960px) { .mmb-chart-square { max-width:420px; min-height:420px; } }

.mmb-chartjs-legend { color: var(--mmb-chart-key-text, var(--mmb-text)); }
.mmb-chartjs-legend::-webkit-scrollbar { width: 6px; }
.mmb-chartjs-legend::-webkit-scrollbar-thumb { background: var(--mmb-border); border-radius: 8px; }
.mmb-chart-tooltip { box-shadow: 0 8px 24px rgba(0,0,0,.35); max-width: 360px; }
.mmb-chart-fallback { margin-top:10px; }


.mmb-donut-layout { display:grid; grid-template-columns:minmax(280px, 1fr) minmax(220px, 320px); gap:14px; align-items:stretch; }
.mmb-donut-canvas { width:100%; }
.mmb-hover-panel { border:1px solid var(--mmb-border); border-radius:12px; background:color-mix(in srgb, var(--mmb-card) 86%, var(--mmb-sidebar) 14%); padding:12px; min-height:220px; display:flex; flex-direction:column; gap:10px; }
.mmb-hover-empty { color:var(--mmb-muted); font-size:14px; margin:auto 0; }
.mmb-hover-panel__title { font-size:16px; font-weight:700; color:var(--mmb-text); }
.mmb-hover-panel__meta { font-size:13px; color:var(--mmb-muted); }
.mmb-hover-panel__stats { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.mmb-hover-panel__stats div { border:1px solid var(--mmb-border); border-radius:8px; padding:6px 8px; }
.mmb-hover-panel__stats strong { display:block; font-size:11px; color:var(--mmb-muted); text-transform:uppercase; }
.mmb-hover-panel__stats span { font-size:14px; font-weight:600; color:var(--mmb-text); }
.mmb-hover-panel__films { font-size:13px; line-height:1.4; color:var(--mmb-text); max-height:118px; overflow:auto; border-top:1px dashed var(--mmb-border); padding-top:8px; }
@media (max-width: 960px) { .mmb-donut-layout { grid-template-columns:1fr; } .mmb-hover-panel { min-height:unset; } }

.mmb-selected-summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:8px 0 12px; }
.mmb-selected-summary span { border:1px solid var(--mmb-border); border-radius:8px; padding:8px; font-size:13px; }
.mmb-selected-film-list { display:grid; gap:8px; max-height:360px; overflow:auto; margin:8px 0 12px; }
.mmb-selected-film-row { width:100%; border:1px solid var(--mmb-border); border-radius:10px; background:var(--mmb-card); display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; padding:8px; text-align:left; cursor:pointer; }
.mmb-selected-film-row img,.mmb-selected-film-row .mmb-poster-placeholder { width:64px; height:86px; border-radius:8px; object-fit:cover; }
.mmb-selected-film-row small { display:block; color:var(--mmb-muted); }
.mmb-selected-film-row.is-active { border-color: color-mix(in srgb, var(--mmb-accent) 65%, #ffffff 35%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--mmb-accent) 65%, #ffffff 35%); }
@media (max-width: 960px) { .mmb-selected-summary { grid-template-columns:repeat(2,minmax(0,1fr)); } .mmb-film-item { grid-template-columns:72px 1fr; } .mmb-film-item img,.mmb-poster-placeholder { width:72px; height:96px; } .mmb-detail-poster img,.mmb-detail-poster .mmb-poster-placeholder { width:120px; height:160px; } }