/* MioFlow visual layer for Home, Library and Team pages.
   This file intentionally overrides legacy page-local styles without changing behaviour. */

body.mio-core-page {
  min-width: 0 !important;
  color: var(--mio-text-1) !important;
  background: var(--mio-bg) !important;
  background-image: none !important;
  font-family: var(--mio-font-sans) !important;
  letter-spacing: 0;
}

body.mio-core-page *,
body.mio-core-page *::before,
body.mio-core-page *::after { box-sizing: border-box; font-family: inherit; }

body.mio-core-page::before,
body.mio-core-page::after { display: none !important; }

.mio-core-page > .sidebar,
.mio-core-page > #toolboxPanel,
.mio-core-page > #toolboxOverlay { display: none !important; }

.mio-core-page .main-content {
  width: calc(100% - 64px) !important;
  max-width: none !important;
  height: 100vh !important;
  min-height: 100vh !important;
  margin: 0 0 0 64px !important;
  padding: 28px 32px 72px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  color: var(--mio-text-1) !important;
  background: var(--mio-bg) !important;
}

.mio-core-page .main-content > * {
  width: 100%;
  max-width: 1680px;
  margin-right: auto;
  margin-left: auto;
  animation: none !important;
}

.mio-core-page .panel,
.mio-core-page .content-panel,
.mio-core-page .stat-card,
.mio-core-page .page-head,
.mio-core-page .table-wrap,
.mio-core-page .member-table-wrap {
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.mio-core-page .panel::before,
.mio-core-page .content-panel::before,
.mio-core-page .stat-card::before,
.mio-core-page .page-head::before { display: none !important; }

.mio-core-page .panel:hover,
.mio-core-page .content-panel:hover,
.mio-core-page .stat-card:hover { transform: none !important; box-shadow: none !important; }

.mio-core-page .panel-header,
.mio-core-page .section-head {
  min-height: 52px !important;
  padding: 0 18px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--mio-line-soft) !important;
}

.mio-core-page .panel-title,
.mio-core-page .section-title {
  color: var(--mio-text-1) !important;
  font-size: 14px !important;
  font-weight: 620 !important;
  letter-spacing: .01em !important;
}

.mio-core-page .panel-title svg,
.mio-core-page .section-title svg { color: var(--mio-gold-300) !important; stroke: currentColor !important; }

.mio-core-page .panel-count {
  min-width: 22px;
  padding: 2px 7px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-3) !important;
  border: 1px solid var(--mio-line-soft) !important;
  border-radius: 999px !important;
}

.mio-core-page .btn,
.mio-core-page .btn-primary,
.mio-core-page .btn-secondary,
.mio-core-page .btn-ghost,
.mio-core-page .btn-danger,
.mio-core-page .btn-danger-ghost,
.mio-core-page .btn-batch,
.mio-core-page .brand-import-btn {
  min-height: 36px !important;
  padding: 0 14px !important;
  border-radius: 7px !important;
  font-size: 12px !important;
  font-weight: 620 !important;
  line-height: 34px !important;
  box-shadow: none !important;
  transform: none !important;
}

.mio-core-page .btn-primary,
.mio-core-page .brand-import-btn {
  color: #17130d !important;
  background: var(--mio-gold-400) !important;
  background-image: none !important;
  border: 1px solid var(--mio-gold-400) !important;
}

.mio-core-page .btn-primary:hover,
.mio-core-page .brand-import-btn:hover {
  color: #120f0a !important;
  background: var(--mio-gold-300) !important;
  border-color: var(--mio-gold-300) !important;
}

.mio-core-page .btn-secondary,
.mio-core-page .btn-ghost,
.mio-core-page .btn-batch {
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  border: 1px solid var(--mio-line-strong) !important;
}

.mio-core-page .btn-secondary:hover,
.mio-core-page .btn-ghost:hover,
.mio-core-page .btn-batch:hover {
  color: var(--mio-text-1) !important;
  background: var(--mio-surface-3) !important;
  border-color: var(--mio-line-strong) !important;
}

.mio-core-page .btn-danger,
.mio-core-page .btn-danger-ghost {
  color: var(--mio-danger) !important;
  background: rgba(196, 111, 111, .08) !important;
  border: 1px solid rgba(196, 111, 111, .24) !important;
}

.mio-core-page input,
.mio-core-page textarea,
.mio-core-page select,
.mio-core-page .search-wrap,
.mio-core-page .search-box,
.mio-core-page .filter-dropdown,
.mio-core-page .date-input,
.mio-core-page .multi-select-trigger {
  color: var(--mio-text-1) !important;
  background: var(--mio-bg) !important;
  background-image: none !important;
  border-color: var(--mio-line-strong) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.mio-core-page .filter-dropdown,
.mio-core-page .search-wrap,
.mio-core-page .search-box,
.mio-core-page .date-input { min-height: 36px !important; }

.mio-core-page .filter-dropdown:hover { color: var(--mio-text-1) !important; background: var(--mio-surface-2) !important; }
.mio-core-page .search-icon,
.mio-core-page .search-box svg { color: var(--mio-text-3) !important; stroke: currentColor !important; }

.mio-core-page .filter-chip,
.mio-core-page .period-tab,
.mio-core-page .proj-tab,
.mio-core-page .rec-chip,
.mio-core-page .view-btn,
.mio-core-page .team-role-tag,
.mio-core-page .status-pill {
  color: var(--mio-text-3) !important;
  background: transparent !important;
  background-image: none !important;
  border-color: transparent !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}

.mio-core-page .filter-chip:hover,
.mio-core-page .period-tab:hover,
.mio-core-page .proj-tab:hover,
.mio-core-page .rec-chip:hover,
.mio-core-page .view-btn:hover { color: var(--mio-text-2) !important; background: rgba(255, 255, 255, .04) !important; }

.mio-core-page .filter-chip.active,
.mio-core-page .period-tab.active,
.mio-core-page .proj-tab.active,
.mio-core-page .rec-chip.active,
.mio-core-page .view-btn.active {
  color: var(--mio-gold-300) !important;
  background: rgba(184, 137, 63, .11) !important;
  border-color: rgba(184, 137, 63, .16) !important;
}

.mio-core-page .team-role-tag {
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-3) !important;
  border: 1px solid var(--mio-line) !important;
}

.mio-core-page table { border-collapse: collapse !important; }
.mio-core-page thead th {
  height: 40px !important;
  color: var(--mio-text-3) !important;
  background: var(--mio-surface-2) !important;
  border-color: var(--mio-line-soft) !important;
  font-size: 11px !important;
  font-weight: 560 !important;
  letter-spacing: .04em !important;
}

.mio-core-page tbody td {
  min-height: 48px !important;
  color: var(--mio-text-2) !important;
  border-color: var(--mio-line-soft) !important;
}

.mio-core-page tbody tr:hover td { background: rgba(255, 255, 255, .025) !important; }

.mio-core-page .modal-overlay {
  background: rgba(0, 0, 0, .74) !important;
  backdrop-filter: blur(8px) !important;
}

.mio-core-page .modal-box,
.mio-core-page .lib-modal-card,
.mio-core-page [class*="modal-content"] {
  color: var(--mio-text-1) !important;
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line-strong) !important;
  border-radius: 14px !important;
  box-shadow: var(--mio-shadow-3) !important;
}

.mio-core-page .modal-head,
.mio-core-page .lib-modal-head {
  border-color: var(--mio-line) !important;
  background: transparent !important;
}

.mio-core-page .modal-title,
.mio-core-page .lib-modal-title { color: var(--mio-text-1) !important; }
.mio-core-page .modal-subtitle,
.mio-core-page .form-label,
.mio-core-page .lib-modal-subtitle { color: var(--mio-text-3) !important; }

/* Home */
.mio-home-page #protoSwitcher { display: none !important; }

.mio-home-page .hero-section {
  min-height: 306px !important;
  margin-bottom: 30px !important;
  gap: 14px !important;
  grid-template-columns: minmax(0, 2.2fr) minmax(230px, .8fr) !important;
}

.mio-home-page .banner {
  min-height: 306px !important;
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
  isolation: isolate;
}

.mio-home-page .banner::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: -1 !important;
  opacity: .7 !important;
  background-image: linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px) !important;
  background-size: 36px 36px !important;
  mask-image: linear-gradient(90deg, #000, transparent 75%) !important;
}

.mio-home-page .banner-large::after {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  right: 6% !important;
  bottom: -42% !important;
  width: 280px !important;
  height: 280px !important;
  border: 1px solid rgba(184, 137, 63, .2) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 44px rgba(184,137,63,.025), 0 0 0 88px rgba(184,137,63,.018) !important;
  background: transparent !important;
  opacity: 1 !important;
}

.mio-home-page .banner:hover { transform: translateY(-1px) !important; border-color: var(--mio-line-strong) !important; box-shadow: var(--mio-shadow-1) !important; }
.mio-home-page .banner-inner { padding: 34px !important; }
.mio-home-page .banner-badge,
.mio-home-page .coming-tag {
  color: var(--mio-gold-300) !important;
  background: rgba(184,137,63,.1) !important;
  border: 1px solid rgba(184,137,63,.18) !important;
  border-radius: 999px !important;
  box-shadow: none !important;
}
.mio-home-page .banner-badge svg circle { fill: var(--mio-gold-400) !important; }
.mio-home-page .banner h2 {
  color: var(--mio-text-1) !important;
  background: none !important;
  -webkit-text-fill-color: currentColor !important;
  font-size: 34px !important;
  line-height: 1.12 !important;
  letter-spacing: -.035em !important;
  text-shadow: none !important;
}
.mio-home-page .banner p { color: var(--mio-text-2) !important; }
.mio-home-page .banner-cta {
  color: #17130d !important;
  background: var(--mio-gold-400) !important;
  border-color: var(--mio-gold-400) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.mio-home-page .banner-small { background: var(--mio-surface-2) !important; }
.mio-home-page .banner-small-icon { color: var(--mio-gold-300) !important; background: rgba(184,137,63,.1) !important; border-color: rgba(184,137,63,.18) !important; box-shadow: none !important; }
.mio-home-page .banner-small-icon svg { stroke: currentColor !important; }

.mio-home-page .section-header { margin: 0 0 12px !important; }
.mio-home-page .section-title { font-size: 15px !important; }
.mio-home-page .section-title::before { background: var(--mio-gold-400) !important; box-shadow: none !important; }
.mio-home-page .section-link { color: var(--mio-text-3) !important; }
.mio-home-page .section-link:hover { color: var(--mio-gold-300) !important; }

.mio-home-page .workflow-cards { margin-bottom: 30px !important; gap: 10px !important; }
.mio-home-page .workflow-card,
.mio-home-page .tool-card {
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.mio-home-page .workflow-card::before,
.mio-home-page .workflow-card::after,
.mio-home-page .tool-card::before,
.mio-home-page .tool-card::after { display: none !important; }
.mio-home-page .workflow-card:hover,
.mio-home-page .tool-card:hover { transform: translateY(-1px) !important; background: var(--mio-surface-2) !important; border-color: var(--mio-line-strong) !important; box-shadow: var(--mio-shadow-1) !important; }
.mio-home-page .workflow-icon,
.mio-home-page .tool-icon-wrap {
  color: var(--mio-gold-300) !important;
  background: rgba(184,137,63,.09) !important;
  background-image: none !important;
  border: 1px solid rgba(184,137,63,.14) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.mio-home-page .workflow-icon svg,
.mio-home-page .tool-icon-wrap svg { stroke: currentColor !important; }
.mio-home-page .workflow-text h3,
.mio-home-page .tool-info { color: var(--mio-text-1) !important; }
.mio-home-page .workflow-text p { color: var(--mio-text-3) !important; }
.mio-home-page .arrow-btn {
  color: var(--mio-text-3) !important;
  background: var(--mio-surface-2) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.mio-home-page .workflow-card:hover .arrow-btn,
.mio-home-page .tool-card:hover .arrow-btn { color: var(--mio-gold-300) !important; background: rgba(184,137,63,.09) !important; border-color: rgba(184,137,63,.18) !important; }

.mio-home-page .main-content section > [onclick*="ops.html"] {
  border-radius: 10px !important;
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  box-shadow: none !important;
}
.mio-home-page .main-content section > [onclick*="ops.html"]:hover { transform: translateY(-1px) !important; border-color: var(--mio-line-strong) !important; box-shadow: var(--mio-shadow-1) !important; }
.mio-home-page .main-content section > [onclick*="ops.html"] > div > div:first-child { color: #17130d !important; background: var(--mio-gold-400) !important; background-image: none !important; border-radius: 10px !important; }
.mio-home-page .main-content section > [onclick*="ops.html"] h3 { color: var(--mio-text-1) !important; }
.mio-home-page .main-content section > [onclick*="ops.html"] p { color: var(--mio-text-2) !important; }
.mio-home-page .main-content section > [onclick*="ops.html"] span { color: var(--mio-text-2) !important; background: var(--mio-surface-2) !important; border-color: var(--mio-line) !important; border-radius: 6px !important; }

.mio-home-page .tools-grid { margin-bottom: 30px !important; gap: 10px !important; }
.mio-home-page .work-card { border: 1px solid var(--mio-line) !important; border-radius: 10px !important; box-shadow: none !important; }
.mio-home-page .work-card:hover { transform: translateY(-1px) !important; box-shadow: var(--mio-shadow-1) !important; }
.mio-home-page .work-card:hover img { transform: scale(1.015) !important; }
.mio-home-page .work-card-overlay { background: linear-gradient(to top, rgba(10,10,11,.94), rgba(10,10,11,.08)) !important; }
.mio-home-page .work-type-dot { background: var(--mio-gold-400) !important; box-shadow: none !important; }

/* Library */
.mio-library-page .main-content { padding-top: 0 !important; }
.mio-library-page .top-header-bar {
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
  min-height: 62px !important;
  margin: 0 auto 22px !important;
  padding: 0 !important;
  background: rgba(10,10,11,.94) !important;
  border-bottom: 1px solid var(--mio-line) !important;
  backdrop-filter: blur(14px) !important;
}
.mio-library-page .tab-container {
  width: max-content !important;
  padding: 4px !important;
  gap: 2px !important;
  background: var(--mio-surface-1) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
}
.mio-library-page .tab-container .nav-tab {
  min-width: 62px !important;
  padding: 8px 14px !important;
  color: var(--mio-text-3) !important;
  border: 0 !important;
  border-radius: 7px !important;
  white-space: nowrap !important;
}
.mio-library-page .tab-container .nav-tab::after { display: none !important; }
.mio-library-page .tab-container .nav-tab:hover { color: var(--mio-text-2) !important; background: rgba(255,255,255,.035) !important; }
.mio-library-page .tab-container .nav-tab.active { color: var(--mio-gold-300) !important; background: rgba(184,137,63,.11) !important; }
.mio-library-page .toolbar-row {
  min-height: 52px !important;
  margin-bottom: 16px !important;
  padding: 8px 10px !important;
  background: var(--mio-surface-1) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
}
.mio-library-page .filter-divider { background: var(--mio-line) !important; }
.mio-library-page .view-toggle-pill {
  padding: 3px !important;
  background: var(--mio-bg) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
}
.mio-library-page .asset-grid,
.mio-library-page .gallery-grid,
.mio-library-page .project-list-grid,
.mio-library-page .brands-grid,
.mio-library-page .products-grid { gap: 12px !important; }
.mio-library-page .asset-card,
.mio-library-page .gallery-item,
.mio-library-page .project-folder-card,
.mio-library-page .brand-card,
.mio-library-page .product-card {
  overflow: hidden !important;
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.mio-library-page .asset-card:hover,
.mio-library-page .gallery-item:hover,
.mio-library-page .project-folder-card:hover,
.mio-library-page .brand-card:hover,
.mio-library-page .product-card:hover {
  transform: translateY(-1px) !important;
  border-color: var(--mio-line-strong) !important;
  box-shadow: var(--mio-shadow-1) !important;
}
.mio-library-page .asset-card:hover .asset-img,
.mio-library-page .brand-card:hover img,
.mio-library-page .product-card:hover img { transform: scale(1.015) !important; }
.mio-library-page .asset-info,
.mio-library-page .project-folder-info { background: var(--mio-surface-1) !important; border-color: var(--mio-line-soft) !important; }
.mio-library-page .filter-tag {
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 999px !important;
}
.mio-library-page .filter-tag.active { color: var(--mio-gold-300) !important; background: rgba(184,137,63,.1) !important; border-color: rgba(184,137,63,.18) !important; }
.mio-library-page .brand-import-hero,
.mio-library-page .brand-import-result-card {
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.mio-library-page .brand-import-bar { background: var(--mio-bg) !important; border-color: var(--mio-line-strong) !important; border-radius: 7px !important; box-shadow: none !important; }
.mio-library-page .brand-import-bar:focus-within { border-color: rgba(184,137,63,.72) !important; box-shadow: var(--mio-focus) !important; }
.mio-library-page .brand-add-card,
.mio-library-page .product-add-card { border-color: rgba(184,137,63,.25) !important; background: transparent !important; }
.mio-library-page .brand-add-card:hover,
.mio-library-page .product-add-card:hover { transform: translateY(-1px) !important; border-color: rgba(184,137,63,.48) !important; background: rgba(184,137,63,.035) !important; box-shadow: none !important; }
.mio-library-page .brand-add-icon,
.mio-library-page .product-add-icon { color: var(--mio-gold-300) !important; border-color: rgba(184,137,63,.45) !important; }
.mio-library-page .brand-add-label,
.mio-library-page .product-add-label,
.mio-library-page .product-count-badge { color: var(--mio-gold-300) !important; }
.mio-library-page .lf-input-filled { border-color: rgba(184,137,63,.72) !important; box-shadow: var(--mio-focus) !important; }
.mio-library-page .lib-modal-apply { color: var(--mio-gold-300) !important; background: rgba(184,137,63,.09) !important; border-color: rgba(184,137,63,.22) !important; }
.mio-library-page .lib-modal-copy { color: var(--mio-text-2) !important; background: var(--mio-surface-2) !important; border-color: var(--mio-line) !important; }
.mio-library-page .lib-empty { color: var(--mio-text-3) !important; }

/* Library · Project / My cards */
.mio-library-page #sheet-project .project-folder-card,
.mio-library-page #sheet-materials .project-folder-card,
.mio-library-page #sheet-project .asset-card,
.mio-library-page #sheet-materials .asset-card {
  background: var(--mio-surface-1) !important;
  background-image: none !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.mio-library-page #sheet-project .project-folder-card:hover,
.mio-library-page #sheet-materials .project-folder-card:hover,
.mio-library-page #sheet-project .asset-card:hover,
.mio-library-page #sheet-materials .asset-card:hover {
  background: var(--mio-surface-2) !important;
  border-color: rgba(184, 137, 63, .34) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .28) !important;
  transform: translateY(-1px) !important;
}

.mio-library-page #sheet-project .folder-art,
.mio-library-page #sheet-materials .folder-art {
  width: 72px !important;
  height: 54px !important;
  border: 1px solid rgba(215, 181, 109, .36) !important;
  border-radius: 8px 8px 10px 10px !important;
  background: var(--mio-gold-400) !important;
  background-image: none !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 12px 24px rgba(0,0,0,.28) !important;
}

.mio-library-page #sheet-project .folder-art::before,
.mio-library-page #sheet-materials .folder-art::before {
  width: 38px !important;
  height: 12px !important;
  border: 1px solid rgba(215, 181, 109, .34) !important;
  border-bottom: 0 !important;
  border-radius: 7px 7px 0 0 !important;
  background: var(--mio-gold-300) !important;
  background-image: none !important;
}

.mio-library-page #sheet-project .folder-art::after,
.mio-library-page #sheet-materials .folder-art::after {
  height: 1px !important;
  top: 9px !important;
  background: rgba(255,255,255,.18) !important;
}

.mio-library-page #sheet-project .project-folder-card:hover .folder-art,
.mio-library-page #sheet-materials .project-folder-card:hover .folder-art {
  transform: translate(-50%, -55%) scale(1.02) !important;
}

.mio-library-page #sheet-project .project-folder-title,
.mio-library-page #sheet-materials .project-folder-title {
  min-height: 42px !important;
  padding: 11px 13px !important;
  color: var(--mio-text-2) !important;
  background: rgba(21, 21, 23, .96) !important;
  background-image: none !important;
  border-top: 1px solid var(--mio-line-soft) !important;
  font-size: 12px !important;
  font-weight: 560 !important;
  line-height: 19px !important;
}

.mio-library-page #sheet-project .badge,
.mio-library-page #sheet-materials .badge {
  color: var(--mio-text-2) !important;
  background: rgba(21, 21, 23, .9) !important;
  border: 1px solid var(--mio-line-strong) !important;
  box-shadow: none !important;
  backdrop-filter: blur(8px) !important;
}

.mio-library-page #sheet-project .badge svg,
.mio-library-page #sheet-materials .badge svg { color: var(--mio-gold-300) !important; stroke: currentColor !important; }

.mio-library-page #sheet-project .badge-right.favorite,
.mio-library-page #sheet-materials .badge-right.favorite {
  color: var(--mio-gold-300) !important;
  background: rgba(184,137,63,.14) !important;
  border-color: rgba(184,137,63,.28) !important;
}

.mio-library-page #sheet-project .asset-card .asset-img,
.mio-library-page #sheet-materials .asset-card .asset-img { filter: saturate(.88) contrast(.98) !important; }

.mio-library-page #sheet-project .asset-card:hover .asset-img,
.mio-library-page #sheet-materials .asset-card:hover .asset-img { filter: saturate(.96) contrast(1) !important; transform: scale(1.015) !important; }

.mio-library-page #sheet-project .avatar-info,
.mio-library-page #sheet-materials .avatar-info {
  color: var(--mio-text-2) !important;
  background: linear-gradient(180deg, transparent, rgba(10,10,11,.94)) !important;
}

.mio-library-page #sheet-project .breadcrumb,
.mio-library-page #sheet-materials .breadcrumb { color: var(--mio-text-3) !important; }

.mio-library-page #sheet-project .breadcrumb .current,
.mio-library-page #sheet-materials .breadcrumb .current,
.mio-library-page #sheet-project .breadcrumb span:hover,
.mio-library-page #sheet-materials .breadcrumb span:hover { color: var(--mio-gold-300) !important; }

.mio-library-page #sheet-project .dropdown-menu,
.mio-library-page #sheet-materials .dropdown-menu {
  background: var(--mio-surface-2) !important;
  border-color: var(--mio-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--mio-shadow-2) !important;
}

.mio-library-page #sheet-project .dropdown-item,
.mio-library-page #sheet-materials .dropdown-item { color: var(--mio-text-3) !important; border-radius: 7px !important; }

.mio-library-page #sheet-project .dropdown-item:hover,
.mio-library-page #sheet-materials .dropdown-item:hover { color: var(--mio-text-1) !important; background: rgba(255,255,255,.04) !important; }

.mio-library-page #sheet-project .dropdown-item.active,
.mio-library-page #sheet-materials .dropdown-item.active { color: var(--mio-gold-300) !important; background: rgba(184,137,63,.11) !important; }

.mio-library-page #sheet-materials #private-upload-card > div {
  color: var(--mio-gold-300) !important;
  background: var(--mio-surface-1) !important;
  border: 1px dashed rgba(184,137,63,.32) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}

.mio-library-page #sheet-materials #private-upload-card > div:hover {
  background: rgba(184,137,63,.07) !important;
  border-color: rgba(184,137,63,.52) !important;
}

.mio-library-page #sheet-materials #private-upload-card svg,
.mio-library-page #sheet-materials #private-upload-card span {
  color: var(--mio-gold-300) !important;
  stroke: currentColor !important;
}

.mio-library-page #sheet-materials .asset-card > div[style*="radial-gradient"] {
  background: var(--mio-surface-2) !important;
  background-image: radial-gradient(circle at center, rgba(184,137,63,.1), transparent 64%) !important;
}

.mio-library-page #sheet-materials .asset-card > div[style*="radial-gradient"] svg { stroke: var(--mio-gold-300) !important; opacity: .72 !important; }

/* Team overview and detail pages */
.mio-team-page .main-content { padding-top: 28px !important; }
.mio-team-page .page-head {
  min-height: 0 !important;
  margin-bottom: 18px !important;
  padding: 0 !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
}
.mio-team-page .team-avatar,
.mio-team-page .hero-avatar {
  color: #17130d !important;
  background: var(--mio-gold-400) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.mio-team-page .team-name,
.mio-team-page .hero-name { color: var(--mio-text-1) !important; }
.mio-team-page .team-sub,
.mio-team-page .team-meta,
.mio-team-page .hero-meta { color: var(--mio-text-3) !important; }
.mio-team-page .team-switcher-trigger {
  padding: 0 !important;
  color: var(--mio-text-2) !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.mio-team-page .team-switcher-trigger:hover {
  background: transparent !important;
  border-color: transparent !important;
}
.mio-team-page .grp-sw-btn {
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.mio-team-page .stats-grid { gap: 12px !important; margin-bottom: 18px !important; }
.mio-team-page .stat-card { min-height: 126px !important; padding: 18px !important; }
.mio-team-page .stat-label { color: var(--mio-text-3) !important; font-size: 11px !important; letter-spacing: .03em !important; }
.mio-team-page .stat-label span { color: var(--mio-gold-400) !important; text-shadow: none !important; }
.mio-team-page .stat-value { color: var(--mio-text-1) !important; font-size: 25px !important; font-weight: 620 !important; letter-spacing: -.02em !important; text-shadow: none !important; }
.mio-team-page .stat-unit { color: var(--mio-text-3) !important; font-size: 12px !important; }
.mio-team-page .stat-delta,
.mio-team-page .stat-desc { color: var(--mio-text-3) !important; }
.mio-team-page .search-row,
.mio-team-page .filter-row,
.mio-team-page .period-row {
  background: transparent !important;
  border-color: var(--mio-line-soft) !important;
}
.mio-team-page .period-tabs,
.mio-team-page .rec-filter-row {
  padding: 3px !important;
  background: var(--mio-surface-1) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
}
.mio-team-page .date-range-row {
  padding: 10px !important;
  background: var(--mio-surface-1) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 10px !important;
}
.mio-team-page .project-grid { gap: 12px !important; }
.mio-team-page .project-card,
.mio-team-page [class*="project-item"],
.mio-team-page .proj-card,
.mio-team-page .group-card,
.mio-team-page .compute-metric-tile {
  background: var(--mio-surface-2) !important;
  background-image: none !important;
  border-color: var(--mio-line) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
}
.mio-team-page .project-card:hover,
.mio-team-page [class*="project-item"]:hover,
.mio-team-page .proj-card:hover,
.mio-team-page .group-card:hover { transform: translateY(-1px) !important; border-color: var(--mio-line-strong) !important; box-shadow: var(--mio-shadow-1) !important; }
.mio-team-page .proj-card.overdue { border-color: rgba(196,111,111,.24) !important; box-shadow: inset 2px 0 0 rgba(196,111,111,.46) !important; }
.mio-team-page .proj-status-badge {
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-3) !important;
  border-color: var(--mio-line) !important;
}
.mio-team-page .proj-status-badge.active { color: var(--mio-success) !important; background: rgba(117,168,132,.08) !important; border-color: rgba(117,168,132,.2) !important; }
.mio-team-page .proj-status-badge.pending { color: var(--mio-warning) !important; background: rgba(198,161,92,.08) !important; border-color: rgba(198,161,92,.2) !important; }
.mio-team-page .proj-status-badge.done { color: var(--mio-text-3) !important; }
.mio-team-page .proj-progress-pct { color: var(--mio-text-2) !important; }
.mio-team-page .proj-progress-bar,
.mio-team-page .breakdown-bar { background: var(--mio-surface-4) !important; }
.mio-team-page .proj-progress-fill,
.mio-team-page .breakdown-bar-fill { background: var(--mio-gold-400) !important; box-shadow: none !important; }
.mio-team-page .progress-bar,
.mio-team-page [class*="progress-track"] { background: var(--mio-surface-4) !important; }
.mio-team-page .progress-fill,
.mio-team-page [class*="progress-fill"] { background: var(--mio-gold-400) !important; background-image: none !important; box-shadow: none !important; }
.mio-team-page .compute-metric-tile::before { display: none !important; }
.mio-team-page .compute-tile-label,
.mio-team-page .compute-section-divider { color: var(--mio-text-3) !important; }
.mio-team-page .compute-tile-value { color: var(--mio-text-1) !important; }
.mio-team-page .compute-group-balance { color: var(--mio-gold-300) !important; }
.mio-team-page .compute-pct-chip { color: var(--mio-text-2) !important; background: var(--mio-surface-3) !important; border-color: var(--mio-line) !important; }
.mio-team-page #computeGroupRows [style*="width:9px"] { background: var(--mio-gold-400) !important; }
.mio-team-page #computeGroupRows [style*="height:4px"] { background: var(--mio-surface-4) !important; }
.mio-team-page #computeGroupRows [style*="height:4px"] > div { background: var(--mio-gold-400) !important; }
.mio-team-page .member-avatar,
.mio-team-page [class*="avatar pal-"] { box-shadow: none !important; }
.mio-team-page .m-dropdown,
.mio-team-page .grp-sw-dropdown,
.mio-team-page .multi-select-dropdown {
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-2) !important;
  border: 1px solid var(--mio-line-strong) !important;
  border-radius: 10px !important;
  box-shadow: var(--mio-shadow-2) !important;
}
.mio-team-page .m-dropdown-item:hover,
.mio-team-page .multi-select-option:hover { color: var(--mio-text-1) !important; background: rgba(255,255,255,.04) !important; }
.mio-team-page input[type="checkbox"] { accent-color: var(--mio-gold-400) !important; }
.mio-team-page .detail-grid { gap: 14px !important; }
.mio-team-page .panel-body { color: var(--mio-text-2) !important; }
.mio-team-page .spark-big { color: var(--mio-text-1) !important; }
.mio-team-page .spark-unit,
.mio-team-page .spark-delta { color: var(--mio-text-3) !important; }
.mio-team-page .spark-svg stop { stop-color: var(--mio-gold-400) !important; }
.mio-team-page .spark-svg path[stroke] { stroke: var(--mio-gold-300) !important; }
.mio-team-page .spark-svg circle { fill: var(--mio-gold-300) !important; }
.mio-team-page .back-btn {
  min-height: 34px !important;
  padding: 0 11px !important;
  color: var(--mio-text-2) !important;
  background: var(--mio-surface-1) !important;
  border: 1px solid var(--mio-line) !important;
  border-radius: 7px !important;
  box-shadow: none !important;
}
.mio-team-page .back-btn:hover { color: var(--mio-text-1) !important; background: var(--mio-surface-2) !important; }

@media (max-width: 1439px) {
  .mio-core-page .main-content { padding-right: 24px !important; padding-left: 24px !important; }
  .mio-home-page .workflow-cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mio-library-page .asset-grid,
  .mio-library-page .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
}

@media (max-width: 1023px) {
  .mio-home-page .hero-section { min-height: 0 !important; grid-template-columns: 1fr !important; }
  .mio-home-page .banner-large { min-height: 280px !important; }
  .mio-home-page .banner-small { min-height: 170px !important; }
  .mio-team-page .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mio-team-page .detail-grid { grid-template-columns: 1fr !important; }
  .mio-library-page .asset-grid,
  .mio-library-page .gallery-grid,
  .mio-library-page .brands-grid,
  .mio-library-page .products-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 767px) {
  .mio-core-page .mio-global-nav { display: none !important; }
  .mio-core-page .main-content {
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    margin-left: 0 !important;
    padding: 20px 16px 48px !important;
  }
  .mio-home-page .workflow-cards { flex-direction: column !important; }
  .mio-home-page .workflow-card { flex: none !important; width: 100% !important; }
  .mio-home-page .tools-grid { grid-template-columns: 1fr !important; }
  .mio-home-page .banner-inner { padding: 24px !important; }
  .mio-home-page .main-content section > [onclick*="ops.html"] { align-items: flex-start !important; padding: 18px !important; }
  .mio-library-page .main-content { padding-top: 0 !important; }
  .mio-library-page .top-header-bar { overflow-x: auto !important; }
  .mio-library-page .tab-container { width: max-content !important; }
  .mio-library-page .toolbar-row { align-items: stretch !important; flex-direction: column !important; }
  .mio-library-page .filters-left-group { width: 100% !important; overflow-x: auto !important; }
  .mio-library-page .actions-right-group {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto auto !important;
    gap: 8px !important;
    overflow: visible !important;
  }
  .mio-library-page .actions-right-group .search-wrap { width: auto !important; min-width: 0 !important; }
  .mio-library-page .actions-right-group .btn-batch { flex: 0 0 auto !important; min-width: 76px !important; white-space: nowrap !important; }
  .mio-library-page .asset-grid,
  .mio-library-page .gallery-grid,
  .mio-library-page .brands-grid,
  .mio-library-page .products-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .mio-team-page .page-head { align-items: flex-start !important; flex-direction: column !important; gap: 14px !important; }
  .mio-team-page .toolbar { width: 100% !important; flex-wrap: wrap !important; }
  .mio-team-page .stats-grid { grid-template-columns: 1fr !important; }
  .mio-team-page .period-row { align-items: flex-start !important; flex-direction: column !important; gap: 10px !important; }
  .mio-team-page .member-table-wrap,
  .mio-team-page .table-wrap,
  .mio-team-page .table-scroll { overflow-x: auto !important; }
  .mio-team-page table { min-width: 720px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .mio-core-page *,
  .mio-core-page *::before,
  .mio-core-page *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}