/* In-game Paragon (Obsidian) window replica. Colours come from each game's real theme. */
#preview { position: fixed; inset: 0; z-index: 60; display: none; place-items: center; padding: 16px;
  background: rgba(6, 4, 8, .72); backdrop-filter: blur(6px); }
#preview.open { display: grid; }
.ui { --accent: #fc94fc; --solid: #fc94fc;
  position: relative; width: min(780px, 100%); height: min(620px, 100%);
  display: grid; grid-template-rows: 49px 1fr 22px; background: #141414; color: #fff;
  border: 2px solid var(--solid); border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 22px color-mix(in srgb, var(--solid) 70%, transparent), 0 0 60px color-mix(in srgb, var(--solid) 30%, transparent);
  font-family: Figtree, "Builder Sans", system-ui, sans-serif; font-weight: 700; user-select: none; }
.ui svg { stroke-width: 2.25; }
.ui .top { display: grid; grid-template-columns: 230px 1fr 44px; align-items: center; border-bottom: 1px solid #282828; }
.ui .top .title { display: flex; align-items: center; justify-content: center; gap: 8px; height: 100%; border-right: 1px solid #282828; font-size: 18px; }
.ui .top .title img { width: 30px; height: 30px; }
.ui .search { margin: 0 8px; height: 31px; border: 1px solid #282828; border-radius: 4px; background: #191919;
  display: grid; grid-template-columns: 26px 1fr 26px; align-items: center; color: rgba(255, 255, 255, .45); font-size: 14px; text-align: center; }
.ui .search svg { width: 16px; height: 16px; margin-left: 8px; color: #fff; }
.ui .move { display: grid; place-items: center; color: var(--accent); cursor: pointer; }
.ui .move svg { width: 26px; height: 26px; }
.ui .mid { display: grid; grid-template-columns: 230px 1fr; min-height: 0; }
.ui .tabs { border-right: 1px solid #282828; overflow-y: auto; scrollbar-width: none; }
.ui .tabs button { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; background: none; border: none;
  color: #fff; opacity: .5; font: inherit; font-size: 15px; cursor: pointer; text-align: left; }
.ui .tabs button:hover { opacity: .75; }
.ui .tabs button.active { background: #191919; opacity: 1; }
.ui .tabs button svg { width: 20px; height: 20px; color: var(--accent); flex: none; }
.ui .content { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 6px; overflow-y: auto; align-content: start; scrollbar-width: thin; scrollbar-color: #2b2b2b transparent; }
.ui .col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ui .grp { padding: 0; background: #191919; border: 1px solid #282828; border-radius: 4px; }
.ui .grp header { display: flex; align-items: center; gap: 8px; height: 34px; padding: 0 8px 0 7px; border-bottom: 1px solid #282828; font-size: 15px; }
.ui .grp header .gi { width: 22px; height: 22px; flex: none; color: var(--gc); }
.ui .grp header .gt { color: var(--gc); }
.ui .grp header .chev { margin-left: auto; width: 18px; height: 18px; color: #fff; }
.ui .grp .body { padding: 7px 8px 8px; display: flex; flex-direction: column; gap: 6px; }
.ui .ctl { font-size: 13px; }
.ui .toggle { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 20px; cursor: pointer; }
.ui .toggle .tl { opacity: .5; }
.ui .toggle.on .tl { opacity: 1; }
.ui .toggle .tl.plain { color: #fff; }
.ui .switch { width: 32px; height: 18px; border-radius: 9px; background: #141414; border: 1px solid #282828; position: relative; flex: none; }
.ui .switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 10px; height: 10px; border-radius: 50%; background: #fff; transition: left .12s; }
.ui .toggle.on .switch { background: var(--gc); border-color: transparent; }
.ui .toggle.on .switch::after { left: 17px; }
.ui .slider .sl, .ui .field .sl { display: block; margin-bottom: 4px; }
.ui .bar { position: relative; height: 18px; background: #141414; border: 1px solid #282828; border-radius: 3px; overflow: hidden; }
.ui .bar .fill { height: 100%; background: var(--gc); }
.ui .bar b { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; color: #fff; }
.ui .box { display: flex; align-items: center; justify-content: space-between; height: 22px; padding: 0 6px; background: #191919; border: 1px solid #282828; border-radius: 3px; font-size: 13px; }
.ui .box svg { width: 16px; height: 16px; }
.ui .box.muted { color: rgba(255, 255, 255, .4); }
.ui .btnrow { display: grid; place-items: center; height: 26px; background: #191919; border: 1px solid #282828; border-radius: 3px; color: #fff; opacity: .85; }
.ui .btnrow:hover { opacity: 1; }
.ui .btnrow.risky { color: #ff4f4f; }
.ui .keyrow { display: flex; justify-content: space-between; align-items: center; }
.ui .keyrow .kb { padding: 2px 8px; background: #191919; border: 1px solid #282828; border-radius: 3px; font-size: 13px; }
.ui .lbl { font-size: 13px; line-height: 1.35; }
.ui .foot { display: grid; place-items: center; border-top: 1px solid #282828; font-size: 13px; }
.ui .foot .dc { color: #5865f2; }
.ui .foot .copy { width: 13px; height: 13px; color: #5865f2; margin-left: 6px; vertical-align: -2px; }
.ui .grip { position: absolute; right: 4px; bottom: 3px; width: 15px; height: 15px; color: rgba(255, 255, 255, .5); }
.ui .x { position: absolute; top: 8px; right: -46px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid #333; background: #191919; color: #fff; font-size: 20px; cursor: pointer; }
.sh { background-clip: text !important; -webkit-background-clip: text !important; color: transparent !important; }
svg.sh, .shsvg { color: #fff; }
@media (max-width: 860px) { .ui .x { right: 8px; top: auto; bottom: 30px; z-index: 3; } }
@media (max-width: 700px) {
  .ui { grid-template-rows: 49px auto 1fr 22px; }
  .ui .top { grid-template-columns: auto 1fr 44px; }
  .ui .top .title { padding: 0 12px; }
  .ui .mid { display: contents; }
  .ui .tabs { display: flex; overflow-x: auto; border-right: none; border-bottom: 1px solid #282828; }
  .ui .tabs button { width: auto; white-space: nowrap; }
  .ui .content { grid-template-columns: 1fr; }
}