/* src/components/UnboxedItemPopup.css */
.popup-overlay, .popup-content {
  font-family: ArialPixel, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

.popup-overlay {
  position: fixed;
  display: flex;
  z-index: 1000;
  cursor: pointer;
  background-color: #000000b3;
  justify-content: center;
  align-items:  center;
  inset: 0;
}

.popup-content {
  background-color: var(--bg);
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  position: relative;
  text-align: center;
  cursor: default;
  border-radius: 0;
  width: 450px;
  max-width: 90%;
  padding: 20px 25px;
  box-shadow: 0 4px 8px #0006;
}

.popup-close-button {
  position: absolute;
  color: var(--text-3);
  cursor: pointer;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  display: flex;
  background: none;
  background-color: var(--bg);
  justify-content: center;
  align-items:  center;
  width: 18px;
  height: 18px;
  padding: 0;
  font-size: 2rem;
  line-height: 1;
  top: 10px;
  right: 15px;
}

.popup-close-button:hover {
  color: var(--text);
  background-color: var(--secondary-bg);
}

.popup-close-button:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.popup-title {
  color: var(--text);
  text-shadow: 1px 1px 0 var(--border-dark);
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 1.3em;
}

.popup-item-name {
  text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
  letter-spacing: 2px;
  margin-top: 5px;
  margin-bottom: 15px;
  font-size: 1.8em;
  font-weight: bold;
}

.popup-item-percentage {
  color: var(--secondary-text);
  margin-top: -10px;
  margin-bottom: 10px;
  font-size: .9em;
}

.popup-item-image {
  display: block;
  object-fit: contain;
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  background-color: var(--secondary-bg);
  border-radius: 0;
  max-width: 80%;
  max-height: 250px;
  margin: 15px auto;
  padding: 2px;
}

.popup-item-rules {
  border-top: 1px solid var(--border-color);
  text-align: left;
  color: var(--secondary-text);
  margin-top: 20px;
  padding-top: 15px;
  font-size: .9em;
}

.popup-item-rules h4 {
  color: var(--text);
  text-shadow: 1px 1px 0 var(--border-dark);
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 1.5em;
}

.popup-item-rules p {
  white-space: pre-wrap;
  letter-spacing: .5px;
  margin-bottom: 0;
  font-size: 1.4em;
}

/* src/components/CaseOpener.css */
.case-opener-viewport {
  overflow: hidden;
  position: relative;
  border: 2px solid var(--border-dark);
  background-color: var(--secondary-bg);
  width: 100%;
  max-width: 800px;
  height: 160px;
  margin: 20px auto;
}

.case-opener-reel {
  display: flex;
  height: 100%;
}

.case-opener-item {
  display: flex;
  border-right: 1px solid var(--border-dark);
  border-left: 1px solid var(--border-dark);
  text-align: center;
  background-color: var(--bg);
  box-sizing: border-box;
  white-space: normal;
  overflow-wrap: break-word;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-start;
  align-items:  center;
  min-width: 150px;
  height: 100%;
  margin: 0;
  padding: 10px;
  font-weight: bold;
}

.case-opener-item.no-image {
  justify-content: center;
}

.case-opener-item-name {
  -webkit-text-stroke: 1px black;
  paint-order: stroke fill;
  letter-spacing: 2px;
  display: block;
  overflow: hidden;
  width: 100%;
  max-height: 3em;
  margin-bottom: 5px;
  font-size: 1.1em;
  line-height: 1.2em;
}

.case-opener-item-name--small {
  max-height: 3.3em;
  font-size: .95em;
}

.case-opener-item-name--scrolling {
  white-space: nowrap;
  overflow: visible;
  animation: scroll-text 8s linear infinite alternate;
  cursor: default;
  max-height: none;
}

.case-opener-item-name--scrolling:hover {
  animation-play-state: paused;
}

@keyframes scroll-text {
  0% {
    transform: translateX(0%);
  }

  100% {
    transform: translateX(calc(110px - 100%));
  }
}

.case-opener-item-image {
  object-fit: contain;
  display: block;
  flex-shrink: 0;
  max-width: 90%;
  max-height: 80px;
  margin: 0 auto;
}

.case-opener-marker {
  position: absolute;
  background-color: var(--accent);
  z-index: 2;
  box-shadow: 0 0 5px var(--accent);
  width: 4px;
  height: 100%;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.case-selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  border: 1px solid var(--border-color);
  background-color: var(--secondary-bg);
  border-radius: 4px;
  gap: 15px;
  padding: 10px;
}

.case-grid-item {
  border: 2px solid var(--border-dark);
  background-color: var(--bg);
  text-align: center;
  cursor: pointer;
  display: flex;
  position: relative;
  overflow: hidden;
  border-radius: 4px;
  flex-direction: column;
  justify-content: center;
  align-items:  center;
  min-height: 100px;
  padding: 0;
  transition: background-color .2s, border-color .2s;
}

.case-grid-item-image {
  display: block;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform .3s;
}

.case-grid-item:hover .case-grid-item-image {
  transform: scale(1.05);
}

.case-grid-item:hover {
  border-color: var(--accent-light);
}

.case-grid-item.selected {
  border-color: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.case-grid-item-name-overlay {
  position: absolute;
  color: #fff;
  box-sizing: border-box;
  text-align: center;
  -webkit-text-stroke: 1px black;
  paint-order: stroke fill;
  word-break: break-word;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  background-color: #0009;
  width: 100%;
  padding: 5px;
  font-size: .9em;
  font-weight: bold;
  bottom: 0;
  left: 0;
}

.history-panel h4 {
  color: var(--accent-light);
  border-bottom: 1px solid var(--border-color);
  margin-top: 0;
  margin-bottom: 10px;
  padding-bottom: 5px;
}

.history-panel li {
  transition: background-color .2s;
}

@media (max-width: 800px) {
  .case-opener-viewport {
    max-width: 95%;
  }

  .case-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 10px;
  }
}

@media (max-width: 600px) {
  .case-opener-viewport {
    height: 140px;
    margin: 15px auto;
  }

  .case-opener-item {
    min-width: 120px;
    padding: 8px;
  }

  .case-opener-item-name {
    max-height: 2.8em;
    font-size: 1em;
  }

  .case-opener-item-name--small {
    max-height: 3em;
    font-size: .85em;
  }

  .case-opener-item-image {
    max-height: 70px;
  }

  .case-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 10px;
  }

  .case-grid-item-name-overlay {
    font-size: .8em;
  }
}

@media (max-width: 480px) {
  .case-opener-viewport {
    height: 120px;
    margin: 10px auto;
  }

  .case-opener-item {
    min-width: 100px;
    padding: 5px;
  }

  .case-opener-item-name {
    letter-spacing: 1px;
    max-height: 2.5em;
    font-size: .9em;
  }

  .case-opener-item-name--small {
    max-height: 2.8em;
    font-size: .8em;
  }

  .case-opener-item-image {
    max-height: 60px;
  }

  .case-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
    gap: 8px;
  }
}

@media (max-width: 360px) {
  .case-selection-grid {
    grid-template-columns: repeat(auto-fill, minmax(75px, 1fr));
    gap: 5px;
  }

  .case-opener-item {
    min-width: 80px;
  }

  .case-opener-item-name {
    font-size: .8em;
  }
}

.case-opener-item-percentage {
  display: block;
  color: #ccc;
  text-align: center;
  position: absolute;
  white-space: nowrap;
  z-index: 1;
  background-color: #0009;
  border-radius: 3px;
  margin-top: 3px;
  padding: 1px 5px;
  font-size: .75em;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
}

/* src/components/WheelSpinner.css */
.wheel-spinner-container {
  padding-bottom: 20px;
}

.wheel-visual-container {
  position: relative;
  width: 600px;
  height: 600px;
  margin: 30px auto;
}

.wheel-marker {
  position: absolute;
  border-left: 15px solid #0000;
  border-right: 15px solid #0000;
  border-top: 20px solid var(--accent);
  z-index: 2;
  filter: drop-shadow(1px -1px 0 var(--border-dark)) drop-shadow(1px 1px 0 var(--border-dark)) drop-shadow(-1px 1px 0 var(--border-dark)) drop-shadow(-1px -1px 0 var(--border-dark));
  width: 0;
  height: 0;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
}

.wheel-graphic {
  border: 3px solid var(--border-dark);
  box-shadow: inset 0 0 0 3px var(--border-light), 0 0 10px #00000080;
  will-change: transform;
  position: relative;
  overflow: hidden;
  background-color: var(--secondary-bg);
  border-radius: 50%;
  width: 100%;
  height: 100%;
}

.wheel-center-image {
  position: absolute;
  object-fit: cover;
  z-index: 1;
  border: 3px solid var(--border-dark);
  box-shadow: inset 0 0 0 3px var(--border-light), 0 0 8px #0006;
  background-color: var(--secondary-bg);
  border-radius: 50%;
  width: 170px;
  height: 170px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.wheel-item-texts {
  position: absolute;
  z-index: 3;
  inset: 0;
}

.wheel-item-text {
  color: var(--text);
  text-shadow: 1px 1px 0 var(--border-dark);
  white-space: nowrap;
  z-index: 3;
  font-family: ArialPixel, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
}

.segment-name {
  display: inline-block;
  word-break: keep-all;
  text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
  z-index: 3;
  overflow: hidden;
  text-overflow: ellipsis;
  filter: drop-shadow(0 0 2px #00000080);
  letter-spacing: .1em;
  border-radius: 3px;
  max-width: 120px;
  padding: 3px 6px;
  font-size: 1.2em;
  font-weight: bold;
  line-height: 1.1;
}

.won-item-details {
  text-align: center;
}

/* src/styles/style.css */
:root {
  --bg: #4a5942;
  --secondary-bg: #3e4637;
  --tertiary-bg: #5c6b54;
  --accent: #c4b550;
  --secondary-accent: #958831;
  --text: #dedfd6;
  --secondary-text: #d8ded3;
  --text-3: #a0aa95;
  --border-light: #8c9284;
  --border-dark: #292c21;
  --disabled-text: #292c21;
  --disabled-text-shadow: #75806f;
  --outline: #000;
  --slider: #7f8c7f;
  --slider-bg: #1f1f1f;
  --scrollbar-track: #5a6a50;
}

*, *:before, *:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-weight: 400;
}

@font-face {
  font-family: ArialPixel;
  src: url("https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf") format(truetype);
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: var(--bg);
  color: var(--text);
  animation: scrollBackground 30s linear infinite;
  background-image: url("data:image/webp;base64,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");
  background-repeat: repeat;
  background-size: 100px 100px;
  font-family: ArialPixel, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  font-size: clamp(.875rem, .8rem + .5vw, 1.1rem);
  font-weight: 400;
  line-height: 1.5;
}

@keyframes scrollBackground {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 100px 100px;
  }
}

.content-wrapper {
  display: flex;
  align-items: stretch;
  gap: 20px;
}

header h1 {
  text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
  font-size: 1.8em;
}

header .cs-fieldset .radio-wrapper {
  display: inline-block;
  margin-bottom: 0;
  margin-right: 15px;
}

header .cs-fieldset .radio-wrapper:last-child {
  margin-right: 0;
}

.history-panel-right ul li span {
  text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
  vertical-align: middle;
  font-size: 1.2em;
}

.history-panel-right ul li img {
  vertical-align: middle;
  object-fit: contain;
  width: 40px;
  height: 40px;
  margin-right: 8px;
}

.main-content-area, .history-panel, .unbox-result-area {
  border: 1px solid var(--border-dark);
  position: relative;
  z-index: 1;
  background-color: #4a5942e6;
  padding: 10px;
  box-shadow: 0 2px 5px #0000004d;
}

.history-panel {
  background-color: #3e4637e6;
  padding: 10px;
}

.unbox-result-area {
  border-bottom: 1px solid var(--border-light);
  text-shadow: 1px 1px 2px #000000b3;
  background-color: #4a5942e6;
  margin-bottom: 15px;
  padding: 20px;
}

.case-content-panel, .history-panel-right {
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border-dark);
  background-color: #3e4637e6;
  flex: none;
  max-height: 80vh;
  padding: 10px;
  box-shadow: 0 2px 5px #0000004d;
}

.case-content-panel {
  border-left: 1px solid var(--border-dark);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  border-right: 1px solid var(--border-dark);
  order: 1;
  width: 450px;
}

.case-content-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.case-content-panel li {
  border-bottom: 1px dashed var(--border-color-2);
  display: flex;
  align-items:  center;
  gap: 8px;
  margin-bottom: 8px;
  padding-bottom: 8px;
}

.case-content-panel li img {
  object-fit: contain;
  border: 1px solid var(--border-dark);
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.case-content-panel li span {
  text-shadow: -1px -1px #000, 1px -1px #000, -1px 1px #000, 1px 1px #000;
  word-break: break-word;
  font-size: 1.2em;
}

.case-content-panel .item-percentage {
  color: var(--text-3);
  flex-shrink: 0;
  margin-left: auto;
  font-size: .9em;
}

.history-panel-right {
  border-right: 1px solid var(--border-dark);
  border-top: 1px solid var(--border-dark);
  border-bottom: 1px solid var(--border-dark);
  border-left: 1px solid var(--border-dark);
  order: 3;
  width: 320px;
}

.main-content-area {
  flex: auto;
  order: 2;
  align-self:  flex-start;
  max-width: none;
  margin: 0;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background-color: #3e463780;
  border: none;
  width: 8px;
}

::-webkit-scrollbar-thumb {
  background-color: #a0aa95b3;
  border: none;
  border-radius: 4px;
  width: 6px;
}

::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track);
}

::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

::-webkit-scrollbar-button:vertical:start:increment {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:end:increment {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:end:decrement {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:start {
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

::-webkit-scrollbar-button:vertical:end {
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

::-webkit-scrollbar-button:vertical:start:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

::-webkit-scrollbar-button:vertical:end:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

::-webkit-scrollbar-button:vertical:start:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:start:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:end:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cs-btn {
  background-color: var(--bg);
  color: #fff;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 4px 5px 3px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-btn.close {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E") center no-repeat;
  width: 18px;
  height: 18px;
  padding: 0;
}

.cs-btn:focus-visible {
  outline: 1px solid var(--outline);
  padding: 3px 4px 2px;
}

.cs-btn:focus-visible.close {
  outline: 0;
  padding: 0;
}

.cs-btn:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.cs-btn:disabled {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

@media (max-width: 800px) {
  .content-wrapper {
    flex-direction: column;
    align-items: stretch;
  }

  .case-content-panel, .history-panel-right, .main-content-area {
    order: initial;
    width: 100%;
    height: auto;
    max-height: none;
  }

  .case-content-panel {
    margin-bottom: 20px;
  }

  .history-panel-right {
    margin-top: 20px;
  }

  header h1 {
    font-size: 1.5em;
  }
}

.cs-hr {
  border-left: 0;
  border-right: 0;
  border-top-color: var(--border-dark);
  border-bottom-color: var(--border-light);
}

.cs-checkbox {
  position: relative;
}

.cs-checkbox input {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0;
  width: 1px;
  height: 1px;
  padding: 0;
}

.cs-checkbox input:focus:not(:focus-visible) {
  outline: none;
}

.cs-checkbox input:focus-visible + .cs-checkbox__label {
  outline: dotted 2px var(--outline);
  outline-offset: 3px;
}

.cs-checkbox input:checked + .cs-checkbox__label:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E");
}

.cs-checkbox input:checked + .cs-checkbox__label {
  color: var(--accent);
}

.cs-checkbox .cs-checkbox__label {
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--secondary--text);
  line-height: .9375rem;
}

.cs-checkbox .cs-checkbox__label:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-color: var(--secondary-bg);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  width: 12px;
  height: 12px;
  margin-right: 7px;
}

.cs-checkbox .cs-checkbox__label:hover {
  color: #fff;
}

.cs-input {
  outline: 0;
  background-color: var(--secondary-bg);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  color: var(--secondary--text);
  padding: 3px 2px 2px;
  font-size: 1rem;
  line-height: 1.0625rem;
}

.cs-input:focus + .cs-input__label {
  color: var(--accent);
}

.cs-input::selection {
  background-color: var(--secondary-accent);
  color: #fff;
}

.cs-input:disabled {
  background-color: var(--bg);
  pointer-events: none;
  color: var(--text-3);
}

.cs-input:disabled + .cs-input__label {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-input__label {
  color: var(--secondary--text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.cs-select {
  outline: 0;
  background-color: var(--secondary-bg);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--secondary--text);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E");
  background-position: right 6px top 50%;
  background-repeat: no-repeat;
  background-size: 7px;
  border-radius: 0;
  min-width: 150px;
  padding: 5px 3px;
  line-height: .9375rem;
}

.cs-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cs-select:focus-within {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cs-select option {
  background-color: var(--bg);
  color: var(--text-3);
}

.cs-select__label {
  color: var(--secondary--text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-fieldset {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
}

.cs-fieldset legend {
  color: var(--secondary--text);
  margin-bottom: 10px;
}

.cs-fieldset > div {
  padding-left: 10px;
}

.cs-fieldset:disabled input[type="radio"] + label {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-fieldset:disabled legend {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-fieldset input[type="radio"] {
  opacity: 0;
}

.cs-fieldset input[type="radio"] + label {
  position: relative;
  cursor: pointer;
  color: var(--secondary--text);
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-fieldset input[type="radio"] + label:before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E");
  width: 12px;
  height: 12px;
  top: 1px;
  left: -25px;
}

.cs-fieldset input[type="radio"] + label:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 4px;
  left: -22px;
}

.cs-fieldset input[type="radio"]:checked + label {
  color: var(--accent);
}

.cs-fieldset input[type="radio"]:checked + label:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E");
}

.cs-slider {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-direction: column-reverse;
  width: 150px;
}

.cs-slider input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--slider-bg);
  outline: none;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  width: 150px;
  height: 4px;
}

.cs-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  border-radius: 0;
  width: 8px;
  height: 16px;
}

.cs-slider input::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  border-radius: 0;
  width: 8px;
  height: 16px;
}

.cs-slider label {
  color: var(--secondary--text);
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-slider:has(input:focus) label {
  color: var(--accent);
}

.cs-slider .ruler {
  background-image: linear-gradient(to right, var(--slider) 1px, transparent 1px);
  z-index: -1;
  background-size: 15px 5px;
  width: calc(100% + 5px);
  height: 5px;
  margin-top: 4px;
  margin-left: 4px;
}

.cs-slider .value {
  color: var(--slider);
  display: flex;
  justify-content: space-between;
  align-items:  center;
  font-size: .8125rem;
  line-height: .9375rem;
}

.cs-dialog {
  position: fixed;
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  min-width: 350px;
  max-width: 510px;
  margin: auto;
  padding: 4px;
  top: 0;
  right: 0;
}

.cs-dialog .heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-top: 3px;
  padding-left: 2px;
}

.cs-dialog .heading .wrapper {
  display: flex;
  align-items:  center;
  gap: 5px;
}

.cs-dialog .heading .wrapper .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E");
  width: 16px;
  height: 15px;
}

.cs-dialog .heading .wrapper .text {
  color: #fff;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-dialog .content {
  padding: 10px;
}

.cs-dialog .footer-btns {
  float: right;
  margin: 4px 8px 8px 0;
}

.cs-dialog .footer-btns .cs-btn {
  text-align: left;
  width: 72px;
}

.cs-tooltip {
  position: relative;
  display: inline-block;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: 1.25rem;
}

.cs-tooltip:hover .text {
  visibility: visible;
}

.cs-tooltip .text {
  visibility: hidden;
  white-space: pre-wrap;
  background-color: var(--secondary-accent);
  text-align: left;
  position: absolute;
  z-index: 10;
  border: 1px solid var(--border-dark);
  pointer-events: none;
  max-width: 280px;
  margin-left: 5px;
  padding: 4px 6px;
  font-size: 1.4rem;
  line-height: 1.2;
  top: 0;
  left: 100%;
  color: #fff !important;
}

.cs-progress-bar {
  background-color: var(--secondary-bg);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  width: 260px;
  height: 24px;
  padding: 3px;
}

.cs-progress-bar .bars {
  background-image: linear-gradient(to right, var(--accent) 8px, transparent 2px);
  background-size: 12px 16px;
  height: 100%;
}

.cs-tabs {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-wrap: wrap;
  align-items:  center;
}

.cs-tabs .radiotab {
  position: absolute;
  opacity: 0;
}

.cs-tabs .label {
  cursor: pointer;
  color: #fff;
  text-align: left;
  position: relative;
  background-color: var(--bg);
  border-top: solid 1px var(--border-light);
  border-left: solid 1px var(--border-light);
  border-right: solid 1px var(--border-dark);
  z-index: 10;
  border-bottom: none;
  min-width: 64px;
  height: 27px;
  margin-right: 1px;
  padding: 4px 5px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-tabs .radiotab:checked + .label {
  background: var(--bg);
  color: var(--accent);
  height: 29px;
  padding: 5px;
}

.cs-tabs .radiotab:checked + .label:before {
  content: "";
  position: absolute;
  background-color: var(--bg);
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}

.cs-tabs .panel {
  display: none;
  position: relative;
  background: var(--bg);
  border-left: solid 1px var(--border-light);
  border-bottom: solid 1px var(--border-dark);
  border-right: solid 1px var(--border-dark);
  border-top: solid 1px var(--border-light);
  color: var(--text);
  order: 99;
  width: 100%;
  padding: 32px 39px 27px;
  bottom: 1px;
}

.cs-tabs .radiotab:checked + .label + .panel {
  display: block;
  position: relative;
}

/* src/components/ItemTemplateManager.css */
.template-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 3px;
  gap: 15px;
  max-height: 500px;
  padding: 10px;
}

.template-grid-item {
  border: 1px solid var(--border-color-2);
  display: flex;
  text-align: center;
  background-color: var(--background-color-2);
  border-radius: 5px;
  flex-direction: column;
  align-items:  center;
  padding: 10px;
}

.template-grid-item img {
  object-fit: contain;
  border: 1px solid var(--border-color);
  background-color: var(--background-color-3);
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
}

.template-grid-item .placeholder-image {
  display: flex;
  background-color: var(--background-color-3);
  color: var(--secondary-text);
  border: 1px solid var(--border-color);
  justify-content: center;
  align-items:  center;
  width: 100px;
  height: 100px;
  margin-bottom: 10px;
  font-size: .9em;
}

.template-grid-item strong {
  word-break: break-word;
  margin-bottom: 5px;
  font-size: 1em;
}

.template-grid-item .template-id {
  color: var(--secondary-text);
  margin-bottom: 10px;
  font-size: .8em;
}

.template-grid-item .actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  width: 100%;
  margin-top: auto;
}

.template-grid-item .actions button {
  flex-grow: 1;
  padding: 6px 10px;
  font-size: .9em;
}

/* src/styles/cs16.css */
:root {
  --bg: #4a5942;
  --secondary-bg: #3e4637;
  --accent: #c4b550;
  --secondary-accent: #958831;
  --text: #dedfd6;
  --secondary-text: #d8ded3;
  --text-3: #a0aa95;
  --border-light: #8c9284;
  --border-dark: #292c21;
  --disabled-text: #292c21;
  --disabled-text-shadow: #75806f;
  --outline: #000;
  --slider: #7f8c7f;
  --slider-bg: #1f1f1f;
  --scrollbar-track: #5a6a50;
}

*, *:before, *:after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
  font-weight: 400;
}

@font-face {
  font-family: ArialPixel;
  src: url("https://cdn.jsdelivr.net/gh/ekmas/cs16.css@main/ArialPixel.ttf") format(truetype);
  font-weight: 400;
  font-style: normal;
}

body {
  background-color: var(--bg);
  color: var(--text);
  font-family: ArialPixel, system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, sans-serif;
  font-weight: 400;
  line-height: 1.5;
}

::-webkit-scrollbar {
  width: 18px;
}

::-webkit-scrollbar-track {
  background-color: var(--scrollbar-track);
  border: 1px solid var(--border-dark);
  border-left: 0;
  width: 18px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--bg);
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  width: 17px;
}

::-webkit-scrollbar-corner {
  background-color: var(--scrollbar-track);
}

::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical:end:increment {
  display: block;
}

::-webkit-scrollbar-button:vertical:start:increment {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:end:increment {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:end:decrement {
  background-repeat: no-repeat;
  height: 17px;
}

::-webkit-scrollbar-button:vertical:start {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M6,8 7,8 7,9 6,9 M7,9 8,9 8,10 7,10 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M8,6 9,6 9,7 8,7 M9,9 10,9 10,10 9,10 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,9 11,9 11,10 10,10 M10,8 11,8 11,9 10,9 M11,9 12,9 12,10 11,10 ' fill='%23a0aa95'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:start {
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

::-webkit-scrollbar-button:vertical:end {
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
}

::-webkit-scrollbar-button:vertical:start:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

::-webkit-scrollbar-button:vertical:end:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

::-webkit-scrollbar-button:vertical:start:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:start:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M10,9 11,9 11,10 10,10 M11,9 12,9 12,10 11,10 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M9,8 10,8 10,9 9,9 M10,8 11,8 11,9 10,9 M7,7 8,7 8,8 7,8 M8,7 9,7 9,8 8,8 M9,7 10,7 10,8 9,8 M8,6 9,6 9,7 8,7 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:end {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M9,8 10,8 10,9 9,9 M9,7 10,7 10,8 9,8 M10,7 11,7 11,8 10,8 ' fill='%23a0aa95'/%3E%3C/svg%3E");
}

::-webkit-scrollbar-button:vertical:end:active {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='16' viewBox='0 0 15 16'%3E%3Cpath d='M5,6 6,6 6,7 5,7 M11,6 12,6 12,7 11,7 M10,6 11,6 11,7 10,7 M9,6 10,6 10,7 9,7 M8,6 9,6 9,7 8,7 M7,6 8,6 8,7 7,7 M6,6 7,6 7,7 6,7 M6,7 7,7 7,8 6,8 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M8,7 9,7 9,8 8,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M9,8 10,8 10,9 9,9 M8,9 9,9 9,10 8,10 M8,8 9,8 9,9 8,9 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cs-btn {
  background-color: var(--bg);
  color: #fff;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  padding: 4px 5px 3px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-btn.close {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M3,3 4,3 4,4 3,4 M4,3 5,3 5,4 4,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,4 6,4 6,5 5,5 M5,6 6,6 6,7 5,7 M6,6 7,6 7,7 6,7 M6,5 7,5 7,6 6,6 M6,7 7,7 7,8 6,8 M6,8 7,8 7,9 6,9 M7,8 8,8 8,9 7,9 M7,7 8,7 8,8 7,8 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M8,5 9,5 9,6 8,6 M9,5 10,5 10,6 9,6 M9,6 10,6 10,7 9,7 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,3 11,3 11,4 10,4 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M10,9 11,9 11,10 10,10 M10,10 11,10 11,11 10,11 M9,10 10,10 10,11 9,11 M11,10 12,10 12,11 11,11 M11,11 12,11 12,12 11,12 M10,11 11,11 11,12 10,12 M5,8 6,8 6,9 5,9 M5,9 6,9 6,10 5,10 M6,9 7,9 7,10 6,10 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M3,10 4,10 4,11 3,11 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 ' fill='%238c9284'/%3E%3C/svg%3E") center no-repeat;
  width: 18px;
  height: 18px;
  padding: 0;
}

.cs-btn:focus-visible {
  outline: 1px solid var(--outline);
  padding: 3px 4px 2px;
}

.cs-btn:focus-visible.close {
  outline: 0;
  padding: 0;
}

.cs-btn:active {
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
}

.cs-btn:disabled {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-hr {
  border-left: 0;
  border-right: 0;
  border-top-color: var(--border-dark);
  border-bottom-color: var(--border-light);
}

.cs-checkbox {
  position: relative;
}

.cs-checkbox input {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  border: 0;
  width: 1px;
  height: 1px;
  padding: 0;
}

.cs-checkbox input:focus:not(:focus-visible) {
  outline: none;
}

.cs-checkbox input:focus-visible + .cs-checkbox__label {
  outline: dotted 2px var(--outline);
  outline-offset: 3px;
}

.cs-checkbox input:checked + .cs-checkbox__label:before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath d='M2,6 3,6 3,7 2,7 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M2,4 3,4 3,5 2,5 M3,6 4,6 4,7 3,7 M3,7 4,7 4,8 3,8 M4,6 5,6 5,7 4,7 M4,7 5,7 5,8 4,8 M4,8 5,8 5,9 4,9 M5,7 6,7 6,8 5,8 M5,6 6,6 6,7 5,7 M5,5 6,5 6,6 5,6 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M6,6 7,6 7,7 6,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M8,2 9,2 9,3 8,3 ' fill='%23c4b550'/%3E%3C/svg%3E");
}

.cs-checkbox input:checked + .cs-checkbox__label {
  color: var(--accent);
}

.cs-checkbox .cs-checkbox__label {
  cursor: pointer;
  display: inline-block;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  color: var(--secondary--text);
  line-height: .9375rem;
}

.cs-checkbox .cs-checkbox__label:before {
  content: "";
  display: inline-block;
  vertical-align: middle;
  background-color: var(--secondary-bg);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  width: 12px;
  height: 12px;
  margin-right: 7px;
}

.cs-checkbox .cs-checkbox__label:hover {
  color: #fff;
}

.cs-input {
  outline: 0;
  background-color: var(--secondary-bg);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  color: var(--secondary--text);
  padding: 3px 2px 2px;
  font-size: 1rem;
  line-height: 1.0625rem;
}

.cs-input:focus + .cs-input__label {
  color: var(--accent);
}

.cs-input::selection {
  background-color: var(--secondary-accent);
  color: #fff;
}

.cs-input:disabled {
  background-color: var(--bg);
  pointer-events: none;
  color: var(--text-3);
}

.cs-input:disabled + .cs-input__label {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-input__label {
  color: var(--secondary--text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.cs-select {
  outline: 0;
  background-color: var(--secondary-bg);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  color: var(--secondary--text);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M3,3 4,3 4,4 3,4 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23a0aa95'/%3E%3C/svg%3E");
  background-position: right 6px top 50%;
  background-repeat: no-repeat;
  background-size: 7px;
  border-radius: 0;
  min-width: 150px;
  padding: 5px 3px;
  line-height: .9375rem;
}

.cs-select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cs-select:focus-within {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='4' viewBox='0 0 7 4'%3E%3Cpath d='M0,0 1,0 1,1 0,1 M1,0 2,0 2,1 1,1 M1,1 2,1 2,2 1,2 M2,1 3,1 3,2 2,2 M2,2 3,2 3,3 2,3 M3,3 4,3 4,4 3,4 M3,2 4,2 4,3 3,3 M3,1 4,1 4,2 3,2 M2,0 3,0 3,1 2,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,2 5,2 5,3 4,3 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 ' fill='%23ffffff'/%3E%3C/svg%3E");
}

.cs-select option {
  background-color: var(--bg);
  color: var(--text-3);
}

.cs-select__label {
  color: var(--secondary--text);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-fieldset {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  border: none;
}

.cs-fieldset legend {
  color: var(--secondary--text);
  margin-bottom: 10px;
}

.cs-fieldset > div {
  padding-left: 10px;
}

.cs-fieldset:disabled input[type="radio"] + label {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-fieldset:disabled legend {
  color: var(--disabled-text);
  text-shadow: var(--disabled-text-shadow) 1px 1px;
  pointer-events: none;
}

.cs-fieldset input[type="radio"] {
  opacity: 0;
}

.cs-fieldset input[type="radio"] + label {
  position: relative;
  cursor: pointer;
  color: var(--secondary--text);
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-fieldset input[type="radio"] + label:before {
  content: "";
  position: absolute;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M10,2 11,2 11,3 10,3 M10,3 11,3 11,4 10,4 M11,4 12,4 12,5 11,5 M11,5 12,5 12,6 11,6 M11,6 12,6 12,7 11,7 M11,7 12,7 12,8 11,8 M10,8 11,8 11,9 10,9 M10,9 11,9 11,10 10,10 M8,10 9,10 9,11 8,11 M9,10 10,10 10,11 9,11 M7,11 8,11 8,12 7,12 M6,11 7,11 7,12 6,12 M5,11 6,11 6,12 5,12 M2,10 3,10 3,11 2,11 M3,10 4,10 4,11 3,11 M4,11 5,11 5,12 4,12 ' fill='%23889180'/%3E%3Cpath d='M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M4,0 5,0 5,1 4,1 M5,0 6,0 6,1 5,1 M6,0 7,0 7,1 6,1 M7,0 8,0 8,1 7,1 M8,1 9,1 9,2 8,2 M9,1 10,1 10,2 9,2 M0,4 1,4 1,5 0,5 M0,5 1,5 1,6 0,6 M0,6 1,6 1,7 0,7 M0,7 1,7 1,8 0,8 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 ' fill='%23292c21'/%3E%3Cpath d='M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M6,1 7,1 7,2 6,2 M7,1 8,1 8,2 7,2 M8,2 9,2 9,3 8,3 M9,2 10,2 10,3 9,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M10,4 11,4 11,5 10,5 M10,5 11,5 11,6 10,6 M10,6 11,6 11,7 10,7 M10,7 11,7 11,8 10,8 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M9,9 10,9 10,10 9,10 M8,9 9,9 9,10 8,10 M7,9 8,9 8,10 7,10 M7,10 8,10 8,11 7,11 M6,10 7,10 7,11 6,11 M5,10 6,10 6,11 5,11 M4,10 5,10 5,11 4,11 M6,9 7,9 7,10 6,10 M5,9 6,9 6,10 5,10 M4,9 5,9 5,10 4,10 M3,9 4,9 4,10 3,10 M2,9 3,9 3,10 2,10 M2,8 3,8 3,9 2,9 M1,7 2,7 2,8 1,8 M1,4 2,4 2,5 1,5 M2,3 3,3 3,4 2,4 M2,2 3,2 3,3 2,3 M3,2 4,2 4,3 3,3 M4,2 5,2 5,3 4,3 M5,2 6,2 6,3 5,3 M6,2 7,2 7,3 6,3 M7,2 8,2 8,3 7,3 M3,3 4,3 4,4 3,4 M2,4 3,4 3,5 2,5 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M1,6 2,6 2,7 1,7 M2,6 3,6 3,7 2,7 M2,7 3,7 3,8 2,8 M3,8 4,8 4,9 3,9 M3,7 4,7 4,8 3,8 M3,6 4,6 4,7 3,7 M3,5 4,5 4,6 3,6 M3,4 4,4 4,5 3,5 M4,3 5,3 5,4 4,4 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,8 5,8 5,9 4,9 M4,7 5,7 5,8 4,8 M4,6 5,6 5,7 4,7 M4,4 5,4 5,5 4,5 M4,5 5,5 5,6 4,6 M5,5 6,5 6,6 5,6 M5,6 6,6 6,7 5,7 M5,7 6,7 6,8 5,8 M5,8 6,8 6,9 5,9 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M6,6 7,6 7,7 6,7 M6,3 7,3 7,4 6,4 M6,4 7,4 7,5 6,5 M6,5 7,5 7,6 6,6 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,8 9,8 9,9 8,9 M8,7 9,7 9,8 8,8 M7,6 8,6 8,7 7,7 M7,5 8,5 8,6 7,6 M7,4 8,4 8,5 7,5 M7,3 8,3 8,4 7,4 M8,3 9,3 9,4 8,4 M8,4 9,4 9,5 8,5 M8,5 9,5 9,6 8,6 M8,6 9,6 9,7 8,7 M9,6 10,6 10,7 9,7 M9,5 10,5 10,6 9,6 ' fill='%233e4637'/%3E%3C/svg%3E");
  width: 12px;
  height: 12px;
  top: 1px;
  left: -25px;
}

.cs-fieldset input[type="radio"] + label:after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  top: 4px;
  left: -22px;
}

.cs-fieldset input[type="radio"]:checked + label {
  color: var(--accent);
}

.cs-fieldset input[type="radio"]:checked + label:after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6' viewBox='0 0 6 6'%3E%3Cpath d='M1,0 2,0 2,1 1,1 M3,0 4,0 4,1 3,1 M4,0 5,0 5,1 4,1 M4,1 5,1 5,2 4,2 M5,1 6,1 6,2 5,2 M5,2 6,2 6,3 5,3 M5,3 6,3 6,4 5,4 M5,4 6,4 6,5 5,5 M4,5 5,5 5,6 4,6 M3,5 4,5 4,6 3,6 M2,5 3,5 3,6 2,6 M1,5 2,5 2,6 1,6 M0,4 1,4 1,5 0,5 M0,3 1,3 1,4 0,4 M0,2 1,2 1,3 0,3 M1,2 2,2 2,3 1,3 M1,3 2,3 2,4 1,4 M1,4 2,4 2,5 1,5 M2,4 3,4 3,5 2,5 M2,3 3,3 3,4 2,4 M2,0 3,0 3,1 2,1 M2,1 3,1 3,2 2,2 M3,1 4,1 4,2 3,2 M3,3 4,3 4,4 3,4 M3,4 4,4 4,5 3,5 M4,4 5,4 5,5 4,5 M4,3 5,3 5,4 4,4 M4,2 5,2 5,3 4,3 M3,2 4,2 4,3 3,3 M2,2 3,2 3,3 2,3 M1,1 2,1 2,2 1,2 M0,1 1,1 1,2 0,2 ' fill='%23c4b550'/%3E%3C/svg%3E");
}

.cs-slider {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-direction: column-reverse;
  width: 150px;
}

.cs-slider input {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--slider-bg);
  outline: none;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  width: 150px;
  height: 4px;
}

.cs-slider input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  border-radius: 0;
  width: 8px;
  height: 16px;
}

.cs-slider input::-moz-range-thumb {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: var(--bg);
  cursor: pointer;
  box-sizing: border-box;
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  border-radius: 0;
  width: 8px;
  height: 16px;
}

.cs-slider label {
  color: var(--secondary--text);
  margin-bottom: 12px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-slider:has(input:focus) label {
  color: var(--accent);
}

.cs-slider .ruler {
  background-image: linear-gradient(to right, var(--slider) 1px, transparent 1px);
  z-index: -1;
  background-size: 15px 5px;
  width: calc(100% + 5px);
  height: 5px;
  margin-top: 4px;
  margin-left: 4px;
}

.cs-slider .value {
  color: var(--slider);
  display: flex;
  justify-content: space-between;
  align-items:  center;
  font-size: .8125rem;
  line-height: .9375rem;
}

.cs-dialog {
  position: fixed;
  background-color: var(--bg);
  color: var(--text);
  border: 1px solid;
  border-color: var(--border-light) var(--border-dark) var(--border-dark) var(--border-light);
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  min-width: 350px;
  max-width: 510px;
  margin: auto;
  padding: 4px;
  top: 0;
  right: 0;
}

.cs-dialog .heading {
  display: flex;
  justify-content: space-between;
  align-items:  center;
  margin-top: 3px;
  padding-left: 2px;
}

.cs-dialog .heading .wrapper {
  display: flex;
  align-items:  center;
  gap: 5px;
}

.cs-dialog .heading .wrapper .icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='15' viewBox='0 0 16 15'%3E%3Cpath d='M1,12 2,12 2,13 1,13 M2,13 3,13 3,14 2,14 M3,12 4,12 4,13 3,13 M14,7 15,7 15,8 14,8 ' fill='%238c9284'/%3E%3Cpath d='M3,14 4,14 4,15 3,15 ' fill='%23a5aa9c'/%3E%3Cpath d='M0,11 1,11 1,12 0,12 M10,3 11,3 11,4 10,4 M10,5 11,5 11,6 10,6 M12,3 13,3 13,4 12,4 M12,5 13,5 13,6 12,6 M12,8 13,8 13,9 12,9 ' fill='%23bdbeb5'/%3E%3Cpath d='M0,10 1,10 1,11 0,11 M0,9 1,9 1,10 0,10 M0,8 1,8 1,9 0,9 M1,8 2,8 2,9 1,9 M1,9 2,9 2,10 1,10 M1,10 2,10 2,11 1,11 M2,10 3,10 3,11 2,11 M2,9 3,9 3,10 2,10 M3,9 4,9 4,10 3,10 M3,10 4,10 4,11 3,11 M4,9 5,9 5,10 4,10 M4,10 5,10 5,11 4,11 M5,10 6,10 6,11 5,11 M1,11 2,11 2,12 1,12 M2,11 3,11 3,12 2,12 M3,11 4,11 4,12 3,12 M4,11 5,11 5,12 4,12 M5,11 6,11 6,12 5,12 M3,13 4,13 4,14 3,14 M6,8 7,8 7,9 6,9 M6,7 7,7 7,8 6,8 M7,7 8,7 8,8 7,8 M7,8 8,8 8,9 7,9 M8,7 9,7 9,8 8,8 M8,8 9,8 9,9 8,9 M9,7 10,7 10,8 9,8 M9,8 10,8 10,9 9,9 M10,7 11,7 11,8 10,8 M10,8 11,8 11,9 10,9 M7,9 8,9 8,10 7,10 M8,9 9,9 9,10 8,10 M9,9 10,9 10,10 9,10 M7,6 8,6 8,7 7,7 M8,6 9,6 9,7 8,7 M8,5 9,5 9,6 8,6 M8,4 9,4 9,5 8,5 M8,3 9,3 9,4 8,4 M7,11 8,11 8,12 7,12 M11,3 12,3 12,4 11,4 M11,4 12,4 12,5 11,5 M10,4 11,4 11,5 10,5 M11,5 12,5 12,6 11,6 M12,4 13,4 13,5 12,5 M9,2 10,2 10,3 9,3 M13,2 14,2 14,3 13,3 M13,7 14,7 14,8 13,8 M14,6 15,6 15,7 14,7 M14,5 15,5 15,6 14,6 M14,4 15,4 15,5 14,5 M14,3 15,3 15,4 14,4 M10,1 11,1 11,2 10,2 M11,1 12,1 12,2 11,2 M12,1 13,1 13,2 12,2 ' fill='%23ffffff'/%3E%3Cpath d='M0,7 1,7 1,8 0,8 M11,0 12,0 12,1 11,1 M7,4 8,4 8,5 7,5 M8,1 9,1 9,2 8,2 ' fill='%23848e84'/%3E%3Cpath d='M2,8 3,8 3,9 2,9 M3,8 4,8 4,9 3,9 M6,14 7,14 7,15 6,15 M7,13 8,13 8,14 7,14 M10,9 11,9 11,10 10,10 M15,4 16,4 16,5 15,5 M15,5 16,5 16,6 15,6 ' fill='%239ca29c'/%3E%3Cpath d='M4,8 5,8 5,9 4,9 M6,9 7,9 7,10 6,10 ' fill='%23d6d7ce'/%3E%3Cpath d='M4,14 5,14 5,15 4,15 M5,14 6,14 6,15 5,15 M8,10 9,10 9,11 8,11 ' fill='%23dedfde'/%3E%3Cpath d='M5,8 6,8 6,9 5,9 M11,7 12,7 12,8 11,8 M12,7 13,7 13,8 12,8 M11,8 12,8 12,9 11,9 ' fill='%23f7f7f7'/%3E%3Cpath d='M2,12 3,12 3,13 2,13 M6,13 7,13 7,14 6,14 M7,12 8,12 8,13 7,13 M7,10 8,10 8,11 7,11 M7,5 8,5 8,6 7,6 ' fill='%23efefef'/%3E%3Cpath d='M4,12 5,12 5,13 4,13 M5,12 6,12 6,13 5,13 M9,6 10,6 10,7 9,7 ' fill='%23cecfce'/%3E%3Cpath d='M8,2 9,2 9,3 8,3 M9,1 10,1 10,2 9,2 M13,1 14,1 14,2 13,2 M14,2 15,2 15,3 14,3 ' fill='%23d6dbd6'/%3E%3Cpath d='M13,6 14,6 14,7 13,7 ' fill='%23949e94'/%3E%3Cpath d='M5,9 6,9 6,10 5,10 M6,10 7,10 7,11 6,11 M6,11 7,11 7,12 6,12 M6,12 7,12 7,13 6,13 M4,13 5,13 5,14 4,14 M5,13 6,13 6,14 5,14 M13,5 14,5 14,6 13,6 M13,3 14,3 14,4 13,4 M13,8 14,8 14,9 13,9 M9,10 10,10 10,11 9,11 M7,14 8,14 8,15 7,15 ' fill='%235a6952'/%3E%3Cpath d='M10,6 11,6 11,7 10,7 M11,6 12,6 12,7 11,7 M12,6 13,6 13,7 12,7 M13,4 14,4 14,5 13,5 M12,2 13,2 13,3 12,3 M11,2 12,2 12,3 11,3 M10,2 11,2 11,3 10,3 M9,3 10,3 10,4 9,4 M9,4 10,4 10,5 9,5 M9,5 10,5 10,6 9,6 M5,7 6,7 6,8 5,8 M7,2 8,2 8,3 7,3 M7,3 8,3 8,4 7,4 M9,0 10,0 10,1 9,1 M10,0 11,0 11,1 10,1 M12,0 13,0 13,1 12,1 M14,1 15,1 15,2 14,2 ' fill='%23525d4a'/%3E%3Cpath d='M6,6 7,6 7,7 6,7 ' fill='%23adb6ad'/%3E%3C/svg%3E");
  width: 16px;
  height: 15px;
}

.cs-dialog .heading .wrapper .text {
  color: #fff;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-dialog .content {
  padding: 10px;
}

.cs-dialog .footer-btns {
  float: right;
  margin: 4px 8px 8px 0;
}

.cs-dialog .footer-btns .cs-btn {
  text-align: left;
  width: 72px;
}

.cs-tooltip {
  position: relative;
  display: inline-block;
  color: #fff;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  line-height: 1.25rem;
}

.cs-tooltip:hover .text {
  visibility: visible;
}

.cs-tooltip .text {
  visibility: hidden;
  background-color: var(--secondary-accent);
  color: #000;
  text-align: center;
  position: absolute;
  z-index: 1;
  border: 1px solid var(--border-dark);
  width: max-content;
  padding: 2px 2px 1px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-progress-bar {
  background-color: var(--secondary-bg);
  border: 1px solid;
  border-color: var(--border-dark) var(--border-light) var(--border-light) var(--border-dark);
  width: 260px;
  height: 24px;
  padding: 3px;
}

.cs-progress-bar .bars {
  background-image: linear-gradient(to right, var(--accent) 8px, transparent 2px);
  background-size: 12px 16px;
  height: 100%;
}

.cs-tabs {
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  flex-wrap: wrap;
  align-items:  center;
}

.cs-tabs .radiotab {
  position: absolute;
  opacity: 0;
}

.cs-tabs .label {
  cursor: pointer;
  color: #fff;
  text-align: left;
  position: relative;
  background-color: var(--bg);
  border-top: solid 1px var(--border-light);
  border-left: solid 1px var(--border-light);
  border-right: solid 1px var(--border-dark);
  z-index: 10;
  border-bottom: none;
  min-width: 64px;
  height: 27px;
  margin-right: 1px;
  padding: 4px 5px;
  font-size: 1rem;
  line-height: .9375rem;
}

.cs-tabs .radiotab:checked + .label {
  background: var(--bg);
  color: var(--accent);
  height: 29px;
  padding: 5px;
}

.cs-tabs .radiotab:checked + .label:before {
  content: "";
  position: absolute;
  background-color: var(--bg);
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}

.cs-tabs .panel {
  display: none;
  position: relative;
  background: var(--bg);
  border-left: solid 1px var(--border-light);
  border-bottom: solid 1px var(--border-dark);
  border-right: solid 1px var(--border-dark);
  border-top: solid 1px var(--border-light);
  color: var(--text);
  order: 99;
  width: 100%;
  padding: 32px 39px 27px;
  bottom: 1px;
}

.cs-tabs .radiotab:checked + .label + .panel {
  display: block;
  position: relative;
}

@media (max-width: 600px) {
  .cs-dialog {
    width: 90vw;
    min-width: 0;
    max-width: 95vw;
    padding: 2px;
  }

  .cs-dialog .heading .text {
    font-size: .9rem;
  }

  .cs-dialog .content {
    padding: 8px;
  }

  .cs-dialog .footer-btns {
    margin: 2px 4px 4px 0;
  }

  .cs-dialog .footer-btns .cs-btn {
    width: auto;
    padding: 3px 8px;
    font-size: .9rem;
  }

  .cs-input, .cs-select {
    max-width: 100%;
  }

  .cs-slider {
    width: 100%;
    max-width: 200px;
  }

  .cs-slider input {
    width: 100%;
  }

  .cs-tabs .label {
    min-width: 50px;
    height: 25px;
    padding: 4px;
    font-size: .9rem;
  }

  .cs-tabs .radiotab:checked + .label {
    height: 27px;
    padding: 4px;
  }

  .cs-tabs .panel {
    padding: 15px;
  }

  .cs-tooltip .text {
    max-width: 200px;
    font-size: .9rem;
  }
}

@media (max-width: 400px) {
  .cs-dialog .heading .text, .cs-dialog .footer-btns .cs-btn {
    font-size: .85rem;
  }

  .cs-tabs .label {
    min-width: 40px;
    font-size: .85rem;
  }

  .cs-tabs .panel {
    padding: 10px;
  }
}