/* Collection client v2 — calibrated to the real Damue desktop app. */
.box-library {
  --client-line: color-mix(in srgb, var(--atlas-line) 82%, transparent);
  --client-panel: color-mix(in srgb, var(--box-machine-2) 96%, var(--atlas-accent) 4%);
}

.box-library-head {
  height: 58px !important;
  padding: 0 14px 0 16px !important;
  background: var(--client-panel) !important;
  border-bottom: 1px solid var(--client-line) !important;
  box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 58%, transparent) !important;
}

.box-client-identity {
  gap: 9px !important;
  min-width: 0;
}

.box-client-logo {
  display: block;
  width: 31px;
  height: 31px;
  flex: 0 0 31px;
  object-fit: cover;
  border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--atlas-accent) 22%, var(--atlas-line));
  background: var(--atlas-surface);
  box-shadow: 0 5px 14px color-mix(in srgb, var(--atlas-accent) 16%, transparent), inset 0 1px 0 rgba(255,255,255,.55);
}

.box-client-identity strong {
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: .01em !important;
}

.box-client-identity small {
  margin-top: 2px !important;
  font-size: 8px !important;
  letter-spacing: .18em !important;
  color: var(--atlas-muted) !important;
}

.box-window-actions {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 100%;
  margin-left: auto;
}

.box-window-actions i {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  transition: background-color .18s ease;
}

.box-window-actions i::before,
.box-window-actions i::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 11px;
  height: 1px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--atlas-text) 72%, transparent);
  transform: translate(-50%, -50%);
}

.box-window-actions .is-minimize::before { transform: translate(-50%, 4px); }
.box-window-actions .is-minimize::after { display: none; }
.box-window-actions .is-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.box-window-actions .is-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.box-window-actions i:hover { background: color-mix(in srgb, var(--atlas-accent) 9%, transparent); }
.box-window-actions .is-close:hover { background: color-mix(in srgb, #e55d69 15%, transparent); }

.box-client-body {
  grid-template-columns: 132px minmax(0, 1fr) !important;
  min-height: 468px !important;
  background: var(--client-panel) !important;
}

.box-client-sidebar {
  display: flex !important;
  flex-direction: column;
  padding: 10px 8px 9px !important;
  gap: 1px !important;
  background: color-mix(in srgb, var(--box-machine-1) 98%, var(--atlas-accent) 2%) !important;
  border-right: 1px solid var(--client-line) !important;
}

.box-client-caption {
  display: block;
  margin: 4px 9px 3px !important;
  font-size: 8px !important;
  line-height: 15px !important;
  letter-spacing: .12em !important;
  color: color-mix(in srgb, var(--atlas-muted) 80%, transparent) !important;
}

.box-client-system {
  margin-top: 6px !important;
  padding-top: 5px !important;
  border-top: 1px solid var(--client-line);
}

.box-client-sidebar button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  height: 28px !important;
  min-height: 28px;
  padding: 0 9px !important;
  border: 0;
  border-radius: 8px !important;
  color: var(--atlas-text);
  background: transparent;
  font-size: 10px !important;
  font-weight: 650;
  text-align: left;
  white-space: nowrap;
}

.box-client-sidebar button i {
  display: grid;
  place-items: center;
  width: 15px !important;
  flex: 0 0 15px;
  font-size: 12px !important;
  line-height: 1;
  font-style: normal;
  color: color-mix(in srgb, var(--atlas-text) 86%, var(--atlas-accent));
}

.box-client-sidebar button b {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
}

.box-client-sidebar button::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: transparent;
}

.box-client-sidebar button.is-active {
  color: var(--atlas-accent) !important;
  background: color-mix(in srgb, var(--atlas-accent) 10%, transparent) !important;
}

.box-client-sidebar button.is-active::before { background: var(--atlas-accent); }
.box-client-sidebar button.is-active i { color: var(--atlas-accent); }
.box-client-sidebar button.is-mod { margin-top: auto; color: #e5a400 !important; }
.box-client-sidebar button.is-mod i { color: #e5a400; }

.box-client-workspace {
  padding: 12px 14px 11px !important;
  grid-template-rows: 50px 32px 318px 27px !important;
  gap: 7px !important;
  background: color-mix(in srgb, var(--box-machine-2) 98%, transparent) !important;
}

.box-workspace-title {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

.box-workspace-title > div { flex: 0 0 auto; }
.box-workspace-title > div > span { font-size: 7px !important; letter-spacing: .14em !important; }

.box-workspace-title h2 {
  margin-top: 2px !important;
  font-size: 16px !important;
  line-height: 1.2 !important;
}

.box-library-refresh {
  width: 22px !important;
  height: 22px !important;
  font-size: 15px !important;
}

.box-workspace-title .box-search {
  width: min(310px, 40%);
  height: 34px !important;
  margin-left: auto;
  flex: 0 1 310px;
  border-radius: 16px !important;
  background: color-mix(in srgb, var(--atlas-surface) 78%, transparent) !important;
}

.box-workspace-title .box-search > span {
  font-size: 19px !important;
  color: var(--atlas-accent) !important;
}

.box-search input { min-width: 0; font-size: 10px !important; }
.box-search kbd { font-size: 7px !important; }

.box-library-tools {
  display: flex !important;
  align-items: center;
  justify-content: flex-end !important;
  height: 32px !important;
  gap: 10px;
  border-bottom: 1px solid var(--client-line);
}

.box-toolbar {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-left: auto;
}

.box-toolbar button {
  height: 26px !important;
  padding: 0 9px !important;
  border-radius: 7px !important;
  font-size: 9px !important;
}

.box-workspace-status {
  display: flex;
  align-items: center;
  gap: 5px;
  order: -1;
  margin: 0 auto 0 2px !important;
  font-size: 8px !important;
  color: var(--atlas-muted);
}

.box-workspace-status i {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #35d690;
  box-shadow: 0 0 8px rgba(53,214,144,.55);
}

.box-workspace-status strong { color: var(--atlas-text); }
.box-carousel-viewport { border-radius: 8px; }

.box-game-card {
  transform: translateZ(0) !important;
  border-radius: 8px !important;
  box-shadow: 0 3px 7px rgba(13,18,34,.08) !important;
}

.box-game-card:hover {
  transform: translateZ(0) scale(1.018) !important;
  z-index: 3;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--atlas-accent) 18%, rgba(13,18,34,.16)) !important;
}

.box-game-card.is-selected {
  transform: translateZ(0) !important;
  border-color: var(--atlas-accent) !important;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--atlas-accent) 65%, transparent), 0 10px 22px color-mix(in srgb, var(--atlas-accent) 18%, transparent) !important;
}

.box-game-card.is-selected:hover { transform: translateZ(0) scale(1.018) !important; }
.box-card-index { font-size: 7px !important; }
.box-card-state { font-size: 7px !important; }

[data-theme="dark"] .box-library,
[data-theme="gold"] .box-library {
  --client-panel: color-mix(in srgb, var(--box-machine-2) 98%, #000 2%);
}

[data-theme="gold"] .box-client-sidebar button.is-active {
  color: var(--atlas-accent) !important;
  background: color-mix(in srgb, var(--atlas-accent) 12%, transparent) !important;
}

@media (max-width: 1380px) {
  .box-client-body { grid-template-columns: 116px minmax(0, 1fr) !important; }
  .box-client-sidebar { padding-inline: 7px !important; }
  .box-client-sidebar button { padding-inline: 7px !important; gap: 5px; font-size: 9px !important; }
  .box-client-sidebar button::before { left: -7px; }
}

@media (max-width: 1120px) {
  .box-client-body { grid-template-columns: 1fr !important; }
  .box-client-sidebar { display: none !important; }
  .box-client-workspace { grid-template-rows: 48px auto 318px 27px !important; }
}

@media (max-width: 720px) {
  .box-library-head { height: 52px !important; }
  .box-window-actions { display: none; }
  .box-workspace-title .box-search { width: 54%; flex-basis: 54%; }
  .box-toolbar button { padding-inline: 7px !important; }
}