/* Professional library */
.cn-library.cn-library-professional {
  display: grid;
  min-height: 0;
  grid-template-columns: 168px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid #30393a;
  border-radius: 5px;
  background: #0a0e0f;
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 7px 18px rgba(0,0,0,.2);
}
.cn-library-browser { display: grid; min-width: 0; min-height: 0; grid-template-rows: 39px minmax(0,1fr); border-right: 1px solid #313a3a; background: #0d1213; }
.cn-library-browser > header { display: flex; align-items: center; justify-content: space-between; padding: 0 8px 0 11px; border-bottom: 1px solid #293132; color: #e8edec; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.cn-library-browser > header button, .cn-library-refresh { display: grid; width: 28px; height: 28px; padding: 0; place-items: center; border: 1px solid #3b4646; border-radius: 3px; color: #abb6b3; background: #151b1c; }
.cn-library-browser > header button:hover, .cn-library-refresh:hover { border-color: #60706d; color: #fff; }
.cn-library-browser > header svg, .cn-library-refresh svg { width: 14px; height: 14px; }
.cn-library-browser nav { min-height: 0; overflow: auto; padding: 5px 5px 10px; scrollbar-color: #43504e #0d1213; scrollbar-width: thin; }
.cn-nav-heading { display: block; padding: 8px 7px 4px; color: #70807d; font-size: 9px; font-weight: 850; text-transform: uppercase; }
.cn-library-nav-item { display: grid; width: 100%; min-width: 0; min-height: 29px; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 0 6px; border: 0; border-left: 2px solid transparent; border-radius: 2px; color: #aeb8b6; background: transparent; text-align: left; }
.cn-library-nav-item:hover { color: #eef3f2; background: #171d1e; }
.cn-library-nav-item.is-active { border-left-color: var(--cn-a); color: #f4f8f7; background: #172321; }
.cn-library-nav-item svg { width: 13px; height: 13px; }
.cn-library-nav-item span { min-width: 0; overflow: hidden; font-size: 10px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cn-library-nav-item b { min-width: 20px; overflow: hidden; color: #7f8c89; font-size: 9px; font-weight: 800; text-align: right; text-overflow: ellipsis; white-space: nowrap; }
.cn-library-nav-item b.is-ready { color: var(--cn-green); }
.cn-library-nav-item b.is-waiting { color: var(--cn-warning); }
.cn-library-nav-item b.is-offline { color: var(--cn-danger); }
.cn-library-nav-empty { display: block; padding: 5px 8px; color: #677370; font-size: 10px; }

.cn-library-workarea { display: grid; min-width: 0; min-height: 0; grid-template-rows: 40px minmax(0,1fr); }
.cn-library-toolbar { display: grid; min-width: 0; grid-template-columns: minmax(220px, 1fr) auto 30px; align-items: center; gap: 7px; padding: 5px 7px; border-bottom: 1px solid #303839; background: #14191a; }
.cn-library-search { display: grid; min-width: 0; height: 30px; grid-template-columns: 16px minmax(0,1fr) auto; align-items: center; gap: 6px; padding: 0 8px; border: 1px solid #394445; border-radius: 3px; background: #080c0d; }
.cn-library-search:focus-within { border-color: #6e8581; box-shadow: 0 0 0 1px rgba(89,201,190,.2); }
.cn-library-search svg { width: 14px; height: 14px; color: #7e8a88; }
.cn-library-search input { width: 100%; min-width: 0; height: 27px; padding: 0; border: 0; outline: 0; color: #edf2f1; background: transparent; font: inherit; font-size: 11px; }
.cn-library-search input::placeholder { color: #72807d; opacity: 1; }
.cn-library-search kbd { padding: 2px 5px; border: 1px solid #35403f; border-radius: 2px; color: #87928f; background: #151b1c; font-family: inherit; font-size: 9px; }
.cn-library-filters { display: flex; height: 30px; overflow: hidden; border: 1px solid #394344; border-radius: 3px; }
.cn-library-filters button { min-width: 56px; padding: 0 8px; border: 0; border-right: 1px solid #394344; color: #82908d; background: #101516; font-size: 9px; font-weight: 800; }
.cn-library-filters button:last-child { border-right: 0; }
.cn-library-filters button:hover { color: #e4e9e8; }
.cn-library-filters button.is-active { color: #07100f; background: #aab5b2; }

.cn-library-surface { display: grid; min-width: 0; min-height: 0; grid-template-rows: 31px minmax(0,1fr); }
.cn-library-context { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 12px; padding: 0 9px; border-bottom: 1px solid #252d2e; background: #0f1415; }
.cn-library-context > span:first-child { display: flex; min-width: 0; align-items: baseline; gap: 8px; }
.cn-library-context strong { overflow: hidden; color: #e6ebea; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.cn-library-context small, .cn-library-context > span:last-child { color: #73817e; font-size: 9px; }
.cn-library-context > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-library-context > span:last-child.is-error { color: #f18b83; }
.cn-library-table-scroll { min-width: 0; min-height: 0; overflow: auto; scrollbar-color: #45514f #0a0e0f; scrollbar-width: thin; }
.cn-library-table { min-width: 1090px; min-height: 100%; background: #090d0e; }
.cn-library-columns-pro, .cn-library-row-pro { display: grid; grid-template-columns: minmax(180px,1.5fr) minmax(110px,.9fr) 82px 48px 48px 60px 94px 108px 232px; align-items: center; gap: 7px; padding: 0 8px; }
.cn-library-columns-pro { position: sticky; z-index: 3; top: 0; min-height: 27px; border-bottom: 1px solid #2b3434; color: #7f8c89; background: #0d1213; box-shadow: 0 2px 5px rgba(0,0,0,.24); }
.cn-library-columns-pro > button { display: flex; min-width: 0; height: 26px; align-items: center; gap: 3px; padding: 0; border: 0; color: inherit; background: transparent; font-size: 9px; font-weight: 800; text-align: left; }
.cn-library-columns-pro > button:hover, .cn-library-columns-pro > button.is-sorted { color: #d8dfdd; }
.cn-library-columns-pro > button svg { width: 11px; height: 11px; color: var(--cn-a); }
.cn-library-columns-pro > span { font-size: 9px; font-weight: 800; }
.cn-library-list { min-height: 100%; overflow: visible; background: #090d0e; }
.cn-library-row-pro { min-height: 43px; border-bottom: 1px solid #1f2727; color: #b7c1bf; font-size: 10px; }
.cn-library-row-pro:nth-child(even) { background: #0c1112; }
.cn-library-row-pro:hover { background: #141b1b; }
.cn-library-row-pro.is-selected { background: #162321; box-shadow: inset 3px 0 var(--cn-teal); }
.cn-library-row-pro.is-associated { box-shadow: inset 2px 0 var(--cn-green); }
.cn-library-row-pro[draggable="true"] { cursor: grab; }
.cn-library-row-pro[draggable="true"]:active, .cn-library-row-pro.is-dragging { cursor: grabbing; }
.cn-library-row-pro.is-dragging { opacity: .42; }
.cn-library-row-pro > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cn-library-row-pro .cn-library-track { grid-template-columns: 11px 31px minmax(0,1fr); gap: 7px; }
.cn-row-grip { display: grid; color: #52605e; cursor: grab; }
.cn-row-grip:active { cursor: grabbing; }
.cn-row-grip svg { width: 11px; height: 15px; }
.cn-library-row-pro .cn-library-art { width: 31px; height: 31px; }
.cn-library-row-pro .cn-library-copy strong { font-size: 11px; }
.cn-library-row-pro .cn-library-copy span { font-size: 9px; }
.cn-numeric, .cn-key-cell { color: #d7dddc; font-variant-numeric: tabular-nums; }
.cn-key-cell { font-weight: 800; }
.cn-source-badge { display: inline-flex; min-height: 20px; align-items: center; padding: 0 5px; border: 1px solid #44504f; border-radius: 2px; color: #adb7b5; background: #151b1c; font-size: 8px; font-style: normal; font-weight: 850; text-transform: uppercase; }
.cn-source-badge.is-local { border-color: #3e7168; color: #9fe1d5; background: #10231f; }
.cn-source-badge.is-authorized { border-color: #456d80; color: #acd8eb; background: #11212a; }
.cn-source-badge.is-spotify { border-color: #4b7054; color: #a5dfb4; background: #122019; }
.cn-source-badge.is-reference { border-color: #75524c; color: #e4aca2; background: #241512; }
.cn-source-badge.is-demo { color: #a3aeac; background: #1a1f20; }
.cn-availability { display: inline-flex; min-width: 0; align-items: center; gap: 4px; font-size: 9px; font-weight: 750; }
.cn-availability svg { width: 12px; height: 12px; flex: 0 0 auto; }
.cn-availability.is-ready { color: var(--cn-green); }
.cn-availability.is-waiting, .cn-availability.is-preview { color: var(--cn-warning); }
.cn-availability.is-reference { color: #d5978c; }
.cn-availability.is-missing { color: var(--cn-danger); }
.cn-availability.is-demo { color: #7d8986; }
.cn-row-actions { display: flex; min-width: 0; align-items: center; gap: 3px; overflow: visible !important; }
.cn-row-actions > button, .cn-explicit-load button { display: grid; width: 25px; height: 25px; flex: 0 0 auto; padding: 0; place-items: center; border: 1px solid #364140; border-radius: 2px; color: #8f9b98; background: #111718; }
.cn-row-actions > button:hover:not(:disabled), .cn-explicit-load button:hover:not(:disabled) { border-color: #687673; color: #fff; background: #1c2424; }
.cn-row-actions > button:disabled, .cn-explicit-load button:disabled { cursor: not-allowed; opacity: .3; }
.cn-row-actions > button.is-active { border-color: #9f7e35; color: #f1c95f; background: #2a220f; }
.cn-row-actions svg { width: 12px; height: 12px; }
.cn-explicit-load { display: flex; margin-left: 2px; overflow: hidden; border: 1px solid #465250; border-radius: 2px; }
.cn-explicit-load button { width: 22px; border: 0; border-right: 1px solid #465250; border-radius: 0; font-size: 9px; font-weight: 900; }
.cn-explicit-load button:first-child { color: var(--cn-a); }
.cn-explicit-load button:nth-child(2) { color: var(--cn-b); }
.cn-explicit-load button:nth-child(3) { color: #70a6d8; }
.cn-explicit-load button:nth-child(4) { color: #d486b5; }
.cn-explicit-load button:last-child { border-right: 0; }
.cn-library-empty { display: grid; min-height: 92px; place-content: center; justify-items: center; gap: 4px; color: #65716f; }
.cn-library-empty svg { width: 20px; height: 20px; }
.cn-library-empty strong { color: #aeb8b6; font-size: 11px; }
.cn-library-empty span { font-size: 9px; }

.cn-library-surface > .cn-provider-panel { grid-row: 1 / -1; }
.cn-provider-panel { display: grid; min-width: 0; min-height: 0; grid-template-rows: 31px minmax(0,1fr) auto; overflow: hidden; background: #090d0e; }
.cn-provider-panel > .cn-library-context { min-height: 31px; }
.cn-provider-list { min-width: 0; min-height: 0; overflow: auto; }
.cn-provider-row { display: grid; width: 100%; min-width: 0; min-height: 53px; grid-template-columns: 36px minmax(240px,1fr) minmax(130px,170px) minmax(94px,116px) auto; align-items: center; gap: 10px; padding: 6px 12px; border-bottom: 1px solid #222a2a; }
.cn-provider-icon { display: grid; width: 32px; height: 32px; place-items: center; border: 1px solid #3e4948; border-radius: 3px; color: #c2ccca; background: #151b1c; }
.cn-provider-icon svg { width: 15px; height: 15px; }
.cn-provider-row > span:nth-child(2) { min-width: 0; }
.cn-provider-row strong, .cn-provider-row small { display: block; }
.cn-provider-row strong { color: #e7eceb; font-size: 11px; }
.cn-provider-row small { margin-top: 3px; overflow: hidden; color: #7f8b89; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.cn-provider-row em { justify-self: start; padding: 4px 6px; border: 1px solid #46514f; border-radius: 2px; color: #abb5b3; font-size: 9px; font-style: normal; font-weight: 800; }
.cn-provider-row em.is-ready { border-color: #3e7052; color: #9bd6aa; background: #122019; }
.cn-provider-row em.is-waiting { border-color: #74602f; color: #e2bd60; background: #251f0e; }
.cn-provider-row em.is-offline { border-color: #6b3f3b; color: #e39a93; background: #241312; }
.cn-provider-row em.is-reference { border-color: #75524c; color: #e4aca2; background: #241512; }
.cn-provider-row > b { color: #85918f; font-size: 9px; font-weight: 750; }
.cn-provider-row > button { min-width: 86px; min-height: 28px; padding: 0 8px; border: 1px solid #465351; border-radius: 3px; color: #d1d9d7; background: #161d1d; font-size: 9px; font-weight: 800; }
.cn-provider-row > button:hover:not(:disabled) { border-color: #6e7d7a; color: #fff; }
.cn-provider-row > button:disabled { opacity: .42; }
.cn-provider-actions { display: flex; justify-self: end; gap: 5px; }
.cn-provider-actions > button { display: inline-flex; min-height: 28px; align-items: center; gap: 5px; padding: 0 8px; border: 1px solid #465351; border-radius: 3px; color: #d1d9d7; background: #161d1d; font-size: 9px; font-weight: 800; }
.cn-provider-actions > button:first-child { border-color: #74423b; color: #f0aaa0; background: #241311; }
.cn-provider-actions > button:hover { border-color: #7e918d; color: #fff; }
.cn-provider-actions svg { width: 13px; height: 13px; }
.cn-provider-footer { display: flex; min-width: 0; min-height: 44px; align-items: center; gap: 10px; padding: 6px 12px; border-top: 1px solid #222a2a; color: #98a3a1; }
.cn-provider-footer small { color: #6f7b78; }
.cn-provider-footer button { display: inline-flex; min-height: 29px; align-items: center; gap: 5px; margin-left: auto; padding: 0 9px; border: 1px solid #3d4947; border-radius: 3px; color: #c0cac8; background: #151b1c; font-size: 9px; font-weight: 800; }
.cn-provider-footer button svg { width: 12px; height: 12px; }

.cn-deck.is-drop-target { border-color: var(--cn-a); box-shadow: inset 0 0 0 2px rgba(89,201,190,.32), 0 0 18px rgba(89,201,190,.16); }
.cn-oper-now.is-drop-target, .cn-oper-next.is-drop-target { outline: 2px solid var(--cn-green); outline-offset: -2px; }
.cn-rundown-item { cursor: pointer; }
.cn-rundown-item.is-selected { box-shadow: inset 3px 0 var(--cn-a); background: #172321; }
.cn-rundown-item.is-drop-target { outline: 2px solid var(--cn-green); outline-offset: -2px; }
.cn-library-list.is-drop-target { box-shadow: inset 0 0 0 2px rgba(118,189,144,.55); }
.cn-is-dragging-track [data-cn-deck-drop], .cn-is-dragging-track [data-cn-rundown-drop] { transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease; }
.cn-is-dragging-track [data-cn-rundown-drop] { box-shadow: inset 3px 0 rgba(118,189,144,.5); }

@media (max-width:1599px) {
  .cn-library.cn-library-professional { grid-template-columns: 154px minmax(0,1fr); }
  .cn-library-table { min-width: 780px; }
  .cn-library-columns-pro, .cn-library-row-pro { grid-template-columns: minmax(145px,1.35fr) minmax(90px,.8fr) 60px 38px 38px 50px 62px 78px 125px; gap: 5px; padding-right: 6px; padding-left: 6px; }
  .cn-explicit-load { display: none; }
  .cn-row-actions > button { width: 22px; }
  .cn-library-filters button { min-width: 49px; padding: 0 6px; }
}

@media (max-height:760px) {
  .cn-library.cn-library-professional { margin: 0 5px 5px; grid-template-rows: minmax(0,1fr); }
  .cn-library-workarea { grid-template-rows: 36px minmax(0,1fr); }
  .cn-library-toolbar { padding-top: 3px; padding-bottom: 3px; }
  .cn-library-row-pro { min-height: 38px; }
  .cn-library-row-pro .cn-library-art { width: 28px; height: 28px; }
  .cn-library-row-pro .cn-library-track { grid-template-columns: 10px 28px minmax(0,1fr); }
}