:root{
  /* page background */
  --pct-bg:#f2f3f5;
  --pct-text:#111;
  --pct-muted:#666;
  --pct-panel-bg:#fff;
  --pct-panel-bg-2:#fafafa;
  --pct-border:#ddd;
  --pct-border-strong:#bbb;
  --pct-btn-bg:#f7f7f7;
  --pct-btn-text:#111;
  --pct-btn-border:#ccc;
  --pct-canvas-bg:#fafafa;
--pct-control-bg:#ffffff;
  --pct-control-border:#cfd3d8;
  --pct-control-border-strong:#b8bec6;
  --pct-btn-bg-hover:#ededf0;
  --pct-btn-bg-active:#e3e4e8;
  --pct-focus-ring:rgba(70, 90, 255, .22);
}
.pct-theme-dark{
  /* anthracite page background */
  --pct-bg:#121216;
  --pct-text:#eaeaea;
  --pct-muted:#a8a8a8;
  --pct-panel-bg:#1b1b20;
  --pct-panel-bg-2:#16161b;
  --pct-border:#2b2b33;
  --pct-border-strong:#3a3a45;
  --pct-btn-bg:#22222a;
  --pct-btn-text:#eaeaea;
  --pct-btn-border:#3a3a45;
  --pct-canvas-bg:#111115;
--pct-control-bg:#22222a;
  --pct-control-border:#2f2f39;
  --pct-control-border-strong:#3a3a46;
  --pct-btn-bg-hover:#2a2a34;
  --pct-btn-bg-active:#30303b;
  --pct-focus-ring:rgba(140, 150, 255, .18);
}

/* Page background + default text */
html, body{
  background: var(--pct-bg);
  color: var(--pct-text);
}

.pct-wrap { max-width: 1200px; margin: 20px auto; padding: 12px;  color: var(--pct-text); }

.pct-title { display:flex; align-items:baseline; gap:8px; margin: 0 0 10px; }
.pct-version { font-size: 12px; color: var(--pct-muted); font-weight: 400; }

/* Small right-aligned label above the first right panel */
.pct-discord-tag{
  text-align: right;
  font-size: 11px;
  color: var(--pct-muted);
  margin: 0 0 6px 0;
  user-select: none;
}

.pct-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }

.pct-box { border: 1px solid var(--pct-border); border-radius: 10px; padding: 10px; margin: 10px 0; background: var(--pct-panel-bg); }

.pct-label { display:block; font-weight:600; margin: 6px 0; }

/* List header (label + catalog button) */
.pct-list-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pct-list-head .pct-label{margin:6px 0}
.pct-textarea { width: 100%; box-sizing: border-box; margin: 0; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

.pct-row { display:flex; gap: 8px; align-items:center; margin: 8px 0; flex-wrap: wrap; }
.pct-row label { min-width: 130px; font-weight: 600; }

.pct-actions { gap: 10px; }
.pct-downloads { gap: 10px; margin-top: 6px; }

.pct-btn { border: 1px solid var(--pct-btn-border); background: var(--pct-btn-bg); padding: 8px 12px; border-radius: 10px; cursor:pointer;  color: var(--pct-btn-text); }
.pct-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.pct-btn-primary { background:#111; color:#fff; border-color:#111; }

/* Cleaner controls (inputs/selects) */
.pct-wrap input[type="text"],
.pct-wrap input[type="number"],
.pct-wrap input[type="search"],
.pct-wrap input[type="url"],
.pct-wrap select,
.pct-wrap textarea{
  background: var(--pct-control-bg);
  color: var(--pct-text);
  border: 1px solid var(--pct-control-border);
  border-radius: 10px;
  padding: 6px 8px;
  line-height: 1.2;
  box-shadow: none;
}

.pct-wrap input::placeholder,
.pct-wrap textarea::placeholder{
  color: var(--pct-muted);
  opacity: .85;
}

.pct-wrap input:focus,
.pct-wrap select:focus,
.pct-wrap textarea:focus{
  outline: none;
  border-color: var(--pct-control-border-strong);
  box-shadow: 0 0 0 3px var(--pct-focus-ring);
}

/* Buttons: less contrast-noise */
.pct-btn{
  box-shadow: 0 1px 0 rgba(0,0,0,.05);
}
.pct-btn:hover{
  background: var(--pct-btn-bg-hover);
}
.pct-btn:active{
  background: var(--pct-btn-bg-active);
}
.pct-theme-dark .pct-btn{
  box-shadow: 0 1px 0 rgba(0,0,0,.25);
}

.pct-btn-primary{
  background: #2a2a34;
  border-color: #2f2f39;
  color: var(--pct-text);
}
.pct-btn-primary:hover{ background: #30303b; }
.pct-theme-dark .pct-btn-primary{
  background: #2a2a34;
  border-color: #353541;
  color: #f3f3f3;
}

.pct-status { margin-top: 10px; font-weight: 600; }

.pct-check { display:block; margin:6px 0; }

.pct-side { display:flex; gap: 12px; align-items:flex-start; margin-top: 10px; }
.pct-side-left { flex: 1 1 55%; }
.pct-side-right { flex: 1 1 45%; }

#pctCanvas {
  width: 100%;
  height: auto;
  display: block;
  border: 1px dashed var(--pct-border-strong);
  border-radius: 10px;
  background: var(--pct-canvas-bg);
}

/* Sortable sheet grid (looks like the preview raster) */
.pct-sheet-grid{
  width: 100%;
  aspect-ratio: 520 / 720; /* matches the canvas element size */
  border: 1px dashed var(--pct-border-strong);
  border-radius: 10px;
  background: var(--pct-panel-bg-2);
  padding: 10px;
  box-sizing: border-box;
  display: grid;
  gap: 10px;
  align-content: start;
}


.pct-sheet-cell{
  position: relative;
  border: 1px solid var(--pct-border);
  border-radius: 10px;
  background: var(--pct-panel-bg);
  overflow: hidden;
}

.pct-sheet-cell.dragover{ outline: 2px solid #111; }

.pct-theme-dark .pct-sheet-cell.dragover{ outline: 2px solid rgba(158,203,255,.85); }

.pct-sheet-cell img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pct-sheet-badge{
  position: absolute;
  top: 6px;
  left: 6px;
  font-size: 11px;
  background: rgba(0,0,0,.7);
  color: #fff;
  padding: 3px 6px;
  border-radius: 999px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.pct-rot90-btn{
  border: 0;
  background: rgba(255,255,255,.18);
  color: #fff;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  cursor: pointer;
}
.pct-rot90-btn:hover{ background: rgba(255,255,255,.28); }
.pct-rot90-btn:active{ transform: translateY(1px); }

.pct-sort-area { display:flex; flex-wrap:wrap; gap:10px; margin-top:10px; }
.pct-sort-item {
  width: 92px;
  border: 1px solid var(--pct-border);
  border-radius: 10px;
  padding: 6px;
  background: var(--pct-panel-bg);
}
.pct-sort-item img { width:100%; height:auto; display:block; border-radius: 8px; }
.pct-sort-item .pct-sort-cap { font-size: 11px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pct-sort-item.dragging { opacity: 0.5; }

/* Upload dropzone */
.pct-dropzone {
  border: 2px dashed var(--pct-border-strong);
  border-radius: 12px;
  padding: 14px;
  background: var(--pct-panel-bg-2);
  text-align: center;
}
.pct-dropzone.dragover {
  border-color: #111;
  background: #f0f0f0;
}

.pct-theme-dark .pct-dropzone.dragover {
  border-color: var(--pct-border-strong);
  background: rgba(255,255,255,.04);
}
.pct-dropzone-title { font-weight: 700; margin-bottom: 6px; }
.pct-dropzone-sub { margin: 6px 0; color: var(--pct-muted); }
.pct-dropzone-hint { margin-top: 10px; font-size: 12px; color: var(--pct-muted); }

/* Paste-URL controls inside dropzone */
.pct-paste-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  width:100%;
  align-items:center;
  margin-top:6px;
}

.pct-autopaste{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
}

.pct-autopaste span{
  font-size:12px;
  color: var(--pct-muted);
}

.pct-upload-list {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pct-upload-item {
  display: grid;
  grid-template-columns: 74px 1fr auto auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--pct-border);
  border-radius: 12px;
  padding: 10px;
  background: var(--pct-panel-bg);
}
.pct-upload-thumb {
  width: 74px;
  height: 104px;
  border-radius: 10px;
  border: 1px solid var(--pct-border);
  object-fit: cover;
  background: var(--pct-panel-bg);
}
.pct-upload-name {
  font-size: 13px;
  word-break: break-word;
}
.pct-upload-qty {
  display:flex;
  align-items:center;
  gap: 6px;
  font-size: 13px;
}
.pct-upload-qty input {
  width: 70px;
}
.pct-upload-remove {
  border-color: var(--pct-btn-border);
}

/* modal */
.pct-modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; z-index:99999; }
.pct-hidden { display:none; }

.pct-modal-inner { width: min(900px, 92vw); max-height: 85vh; background: var(--pct-panel-bg); border-radius: 14px; overflow:hidden; }
.pct-modal-head { display:flex; justify-content:space-between; align-items:center; padding: 10px; border-bottom:1px solid #eee; }
.pct-modal-body { padding: 10px; overflow:auto; max-height: 70vh; display:flex; flex-wrap:wrap; gap: 12px; }

.pct-art-note{ flex: 0 0 100%; font-size: 13px; color: var(--pct-muted); margin-bottom: 4px; }
.pct-modal-foot { padding: 10px; border-top:1px solid #eee; display:flex; justify-content:flex-end; gap:10px; }

.pct-theme-dark .pct-modal-head{ border-bottom: 1px solid var(--pct-border); }
.pct-theme-dark .pct-modal-foot{ border-top: 1px solid var(--pct-border); }

.pct-art-card {
  width: 180px;
  border: 1px solid var(--pct-border);
  border-radius: 12px;
  padding:8px;
  background: var(--pct-panel-bg);
}
.pct-art-card img { width:100%; height:auto; display:block; border-radius: 10px; }

/* Catalog image loading spinner */
.pct-img-wrap{position:relative;width:100%;}
.pct-spinner{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.55);border-radius:10px;}
.pct-spin{width:28px;height:28px;border-radius:50%;border:3px solid rgba(0,0,0,.15);border-top-color:rgba(0,0,0,.55);animation:pctSpin 1s linear infinite;}
@keyframes pctSpin{to{transform:rotate(360deg);}}
.pct-art-card button { width:100%; margin-top:8px; }


/* Preview navigation */
.pct-wrap .pct-preview-nav{
  display:flex !important;
  flex-direction:row !important;
  flex-wrap:nowrap !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  margin-top:10px !important;
}
.pct-wrap .pct-btn-small{
  padding:6px 10px;
  font-size:12px;
}
.pct-wrap .pct-page-info{
  font-size:12px;
  color: var(--pct-muted);
  min-width:90px;
  text-align:center;
}

/* Theme-override safety */
.pct-wrap .pct-preview-nav > *{margin:0 !important; flex:0 0 auto !important;}
.pct-wrap .pct-preview-nav button{display:inline-flex !important; width:auto !important; max-width:none !important;}
.pct-wrap .pct-page-info{display:inline-block !important;}


/* Art selection grid (scrollable) */
.pct-art-grid{
  flex: 0 0 100%;
  max-height: 70vh;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  padding-right: 6px;
}

.pct-art-grid .pct-art-card{
  width: auto;
}


.pct-title-version{font-size:12px;opacity:.65;margin-left:8px;}


/* Top bar */
.pct-topbar{
  display:flex;
  align-items:flex-start;           /* statt center */
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.pct-title-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
}

.pct-faq-link{
  font-size:18px;
  opacity:.75;
  text-decoration:none;
  color: var(--pct-muted);
  line-height:1;
}

.pct-faq-link:hover{
  opacity:1;
  text-decoration:underline;
}



/* Split box (Game&Source + Config) */
.pct-split { display:flex; gap: 12px; align-items:flex-start; }
.pct-split-col { flex: 1; min-width: 0; }
.pct-row-buttons { display:flex; gap: 8px; flex-wrap: wrap; }

.pct-btn-small { padding: 6px 10px; font-size: 13px; }
.pct-btn-ghost { background: transparent; border: 1px solid var(--pct-border); color: var(--pct-text); }
.pct-btn-ghost:hover { border-color: #bbb; }

.pct-theme-select{
  background: transparent;
  border: 1px solid var(--pct-border);
  color: var(--pct-text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
}
.pct-theme-select:hover{ border-color: var(--pct-border-strong); }
.pct-theme-dark .pct-theme-select{ background: rgba(255,255,255,.02); }


/* Responsive */
@media (max-width: 900px) {
  .pct-topbar { align-items:flex-start; flex-direction:column; }
  .pct-split { flex-direction: column; }
}


.pct-side-right-full{width:100%;}
.pct-side-right-full{width:100%;}
.pct-btn.active{outline:2px solid rgba(124,77,255,.45);}


/* Highlight for dropping onto Prev/Next while sorting */
.pct-nav-drop{ outline:2px dashed rgba(124,77,255,.55); outline-offset:2px; }

.pct-hidden {
  display: none;
}

#pctFormat {
  display: none !important;
}

#pctFormat {
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}

#pctFormat {
  background: none !important;
  box-shadow: none !important;
}

.pct-row label:contains("EXPORT") {
  display: none;
}




.pct-theme-dark .pct-textarea,
.pct-theme-dark input,
.pct-theme-dark select{
  background: var(--pct-panel-bg-2);
  color: var(--pct-text);
  border-color: var(--pct-border);
}
.pct-theme-dark a{ color: #9ecbff; }
.pct-theme-dark .pct-modal-inner{ background: var(--pct-panel-bg); }
.pct-theme-dark .pct-spinner{ background: rgba(0,0,0,.35); }
.pct-theme-dark .pct-spin{ border:3px solid rgba(255,255,255,.18); border-top-color: rgba(255,255,255,.65); }


.pct-title-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pct-theme-toggle{padding:6px 10px; line-height:1;}