body.pf-root {
  margin: 0;
  font-family: system-ui, sans-serif;
  background: #050608;
  color: #f5f5f5;
}

.pf-shell {
  display: grid;
  grid-template-columns: 280px 1fr 320px;
  height: 100vh;
}

.pf-panel {
  padding: 16px;
  box-sizing: border-box;
}

.pf-left {
  background: #050608;
  border-right: 1px solid #222;
}

.pf-center {
  background: #08090c;
  border-right: 1px solid #222;
}

.pf-right {
  background: #050608;
}

.pf-logo-mark {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.pf-logo-img {
  max-width: 100%;
  height: auto;
  display: block;
}


.pf-section h2,
.pf-section h3 {
  margin: 0 0 8px;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #ffb347;
}

#pf-categories,
#pf-engines,
#pf-history {
  list-style: none;
  padding: 0;
  margin: 0;
  max-height: 180px;
  overflow-y: auto;
}
#pf-history li {
  list-style: none;
  padding: 6px;
  margin-bottom: 6px;
  background: #0b0c10;
  border: 1px solid #3a3a3a;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pf-history-delete {
  background: #ff4d4d;
  border: none;
  color: #fff;
  padding: 2px 6px;
  border-radius: 4px;
  cursor: pointer;
}

#pf-categories li,
#pf-engines li {
  padding: 4px 6px;
  margin-bottom: 2px;
  cursor: pointer;
  border-radius: 4px;
  font-size: 0.85rem;
}

#pf-categories li:hover,
#pf-engines li:hover {
  background: #14151a;
}

#pf-categories li.active,
#pf-engines li.active {
  background: #ffb34722;
  border: 1px solid #ffb34755;
}

#pf-input {
  width: 100%;
  height: 180px;
  background: #050608;
  color: #f5f5f5;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px;
  resize: vertical;
}

.pf-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

select {
  width: 100%;
  padding: 4px;
  background: #050608;
  color: #f5f5f5;
  border: 1px solid #333;
  border-radius: 4px;
}

.pf-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

button {
  padding: 6px 12px;
  border-radius: 4px;
  border: 1px solid #ffb34755;
  background: #0b0c10;
  color: #ffb347;
  cursor: pointer;
  font-size: 0.85rem;
}

button:hover {
  background: #ffb34722;
}

#pf-output {
  background: #050608;
  border: 1px solid #333;
  border-radius: 6px;
  padding: 8px;
  min-height: 200px;
  white-space: pre-wrap;
  font-size: 0.85rem;
}
/* ============================
   PROMPTFORGE — MOBILE FIXES
   ============================ */
@media (max-width: 899px) {
  .pf-shell {
    display: grid !important;
    grid-template-columns: 1fr !important;
    height: auto !important;
    min-height: 100vh;
    padding: 8px !important;
    gap: 12px !important;
  }
  .pf-panel, .pf-left, .pf-center, .pf-right {
    width: 100% !important;
    border: 1px solid #ff6a00 !important;
    border-radius: 8px !important;
    border-right: none !important;
  }
  .forgecore-topbar {
    flex-wrap: wrap !important;
    padding: 8px !important;
    gap: 6px !important;
    justify-content: center !important;
  }
  .forgecore-topbar .forge-btn {
    font-size: 0.75rem !important;
    padding: 8px 12px !important;
  }
  .pf-grid, .pf-grid-3, .pf-grid-4 {
    grid-template-columns: 1fr !important;
  }
  #pf-input {
    height: 140px !important;
    font-size: 16px !important;
  }
  #pf-output {
    font-size: 0.85rem !important;
    min-height: 160px !important;
  }
  .pf-logo-mark { height: 80px !important; }
  .pf-logo { font-size: 1.1rem !important; }
  button { min-height: 44px !important; padding: 8px 14px !important; }
  select { min-height: 44px !important; font-size: 16px !important; }
  #pf-categories, #pf-engines, #pf-history { max-height: 120px !important; }
  .pf-actions { flex-wrap: wrap !important; }
}
@media (max-width: 480px) {
  .pf-shell { padding: 4px !important; gap: 8px !important; }
  .pf-panel { padding: 10px !important; }
  .forgecore-topbar { padding: 6px !important; }
  .forgecore-topbar .forge-btn { font-size: 0.7rem !important; padding: 6px 10px !important; }
  #pf-input { height: 120px !important; }
  .pf-logo-mark { height: 60px !important; }
}