/* ============================================================
   KYZEL CLARITY AI™ — Power Upgrade Pack Extended Styles
   Powered by 4P3X Intelligent AI™ Created by Kyzel Kreates™
   Non-breaking add-on styles. Only scoped to .kpu-* selectors.
   ============================================================ */
.kpu-wrap {
  color: #f5f2e9;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.kpu-wrap * { box-sizing: border-box; }
.kpu-masthead { margin-bottom: 24px; }
.kpu-eyebrow  { color: #d4af37; text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; margin: 0 0 6px; }
.kpu-wrap h2  { margin: 0 0 10px; font-size: clamp(1.7rem, 4.5vw, 2.8rem); }
.kpu-sub      { color: #c8c4bc; line-height: 1.6; margin: 0; }
.kpu-muted    { color: #9e9a93; font-size: .9rem; margin: 4px 0 14px; }

/* Tabs */
.kpu-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}
.kpu-tab {
  border: 1px solid rgba(212,175,55,.35);
  border-radius: 12px;
  padding: 9px 14px;
  background: rgba(255,255,255,.05);
  color: #c8c4bc;
  cursor: pointer;
  font-weight: 700;
  font-size: .85rem;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
.kpu-tab:hover { background: rgba(212,175,55,.12); color: #f5f2e9; }
.kpu-tab-active { background: rgba(212,175,55,.18); color: #f5f2e9; border-color: rgba(212,175,55,.7); }

/* Panels */
.kpu-panel h3 { margin: 0 0 8px; font-size: clamp(1.2rem, 3vw, 1.7rem); }

/* Form elements */
.kpu-textarea {
  display: block; width: 100%; min-height: 90px; resize: vertical;
  border-radius: 16px; padding: 13px 15px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
  color: #f5f2e9; font-size: .94rem; line-height: 1.55; margin-top: 8px;
}
.kpu-textarea:focus { outline: 2px solid rgba(212,175,55,.5); }
.kpu-input {
  display: block; width: 100%; padding: 12px 14px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; color: #f5f2e9; font-size: .94rem; margin-top: 6px;
}
.kpu-input:focus { outline: 2px solid rgba(212,175,55,.5); }
.kpu-select {
  display: block; width: 100%; padding: 11px 14px;
  background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.15);
  border-radius: 14px; color: #f5f2e9; font-size: .94rem; margin-top: 6px;
}
.kpu-label { display: grid; gap: 4px; color: #b8b4ad; font-size: .88rem; font-weight: 600; }
.kpu-form-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; margin-bottom: 14px; }

/* Buttons */
.kpu-btn-gold {
  border: 1px solid rgba(212,175,55,.55);
  border-radius: 14px; padding: 12px 20px;
  background: linear-gradient(135deg, #f6df92, #d4af37);
  color: #110f08; cursor: pointer; font-weight: 800; font-size: .95rem;
}
.kpu-btn-gold:hover { filter: brightness(1.1); }
.kpu-btn-ghost {
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px; padding: 12px 20px;
  background: rgba(255,255,255,.06); color: #d8d4cc;
  cursor: pointer; font-weight: 700; font-size: .9rem;
}
.kpu-btn-ghost:hover { background: rgba(255,255,255,.12); }
.kpu-btn-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0; }

/* Output */
.kpu-output {
  background: rgba(0,0,0,.38); border: 1px solid rgba(255,255,255,.12);
  border-radius: 18px; padding: 16px; margin-top: 14px;
  white-space: pre-wrap; overflow: auto; max-height: 480px;
  color: #e8e4db; font-size: .92rem; line-height: 1.6;
}

/* Audience buttons */
.kpu-aud-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; }
.kpu-aud-btn {
  border: 1px solid rgba(255,255,255,.2); border-radius: 12px;
  padding: 9px 16px; background: rgba(255,255,255,.06); color: #ccc8c0;
  cursor: pointer; font-weight: 700;
}
.kpu-aud-btn:hover { background: rgba(157,107,255,.18); }
.kpu-aud-active  { background: rgba(157,107,255,.28); border-color: rgba(157,107,255,.6); color: #f5f2e9; }

/* Question list */
.kpu-question-list ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.kpu-q-btn {
  width: 100%; text-align: left;
  border: 1px solid rgba(255,255,255,.15); border-radius: 14px;
  padding: 11px 16px; background: rgba(0,0,0,.3); color: #e8e4db;
  cursor: pointer; font-size: .92rem;
}
.kpu-q-btn:hover { background: rgba(212,175,55,.12); border-color: rgba(212,175,55,.4); }

/* Quality score */
.kpu-score-grid { display: grid; grid-template-columns: repeat(4,1fr) auto auto; gap: 10px; margin: 14px 0; align-items: center; }
.kpu-score-item { text-align: center; padding: 10px; background: rgba(255,255,255,.06); border-radius: 12px; }
.kpu-score-val  { display: block; font-size: 1.6rem; font-weight: 900; color: #d4af37; }
.kpu-score-overall .kpu-score-val { color: #35e78e; font-size: 2rem; }
.kpu-ql { grid-column: -2/-1; padding: 10px 14px; border-radius: 12px; text-align: center; font-weight: 800; font-size: .9rem; }
.kpu-ql-great { background: rgba(53,231,142,.18); color: #35e78e; }
.kpu-ql-good  { background: rgba(212,175,55,.18); color: #d4af37; }
.kpu-ql-warn  { background: rgba(255,100,100,.15); color: #ff9090; }

/* Simulation */
.kpu-sim-modes { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.kpu-sim-active { background: rgba(53,231,142,.18) !important; border-color: rgba(53,231,142,.5) !important; color: #35e78e !important; }
.kpu-sim-q { font-size: 1.1rem; font-weight: 700; padding: 16px; background: rgba(255,255,255,.06); border-radius: 16px; margin-bottom: 14px; }

/* Proposal card */
.kpu-proposal-card { padding: 14px; }
.kpu-proposal-card ul { padding-left: 18px; line-height: 2; }
.kpu-copy-area { margin-top: 16px; }

/* Roadmap card */
.kpu-roadmap-card { padding: 14px; }
.kpu-roadmap-card ol { padding-left: 20px; line-height: 2; }

/* Evidence locker */
.kpu-ev-records { list-style: none; padding: 0; margin: 16px 0 0; display: grid; gap: 12px; }
.kpu-ev-record  { padding: 14px; border: 1px solid rgba(255,255,255,.12); border-radius: 16px; background: rgba(0,0,0,.28); }
.kpu-ev-status  { margin-left: 10px; padding: 2px 10px; border-radius: 8px; background: rgba(212,175,55,.18); color: #d4af37; font-size: .78rem; font-weight: 700; }
.kpu-ev-record a { color: #9d6bff; word-break: break-all; }
.kpu-ev-record small { color: #8a8680; font-size: .8rem; }

/* Suggest list inside orchestrator */
.kpu-suggest-list { margin-top: 14px; }
.kpu-suggest-list ul { list-style: none; padding: 0; display: grid; gap: 8px; }
.kpu-orch-result p { margin: 6px 0; line-height: 1.55; }

/* Status messages */
.kpu-status-msg { color: #35e78e; font-size: .9rem; margin-top: 10px; }
.kpu-success    { color: #35e78e; }
.kpu-warn       { color: #ffbe60; }

/* Brand footer */
.kpu-brand-footer { font-size: .68rem; color: rgba(183,186,193,.35); text-align: center; margin-top: 24px; }

/* Responsive */
@media (max-width: 768px) {
  .kpu-form-row { grid-template-columns: 1fr; }
  .kpu-score-grid { grid-template-columns: repeat(2,1fr) 1fr; }
  .kpu-ql { grid-column: 1/-1; }
}
@media (max-width: 520px) {
  .kpu-tabs { gap: 6px; }
  .kpu-tab  { padding: 8px 10px; font-size: .8rem; }
  .kpu-score-grid { grid-template-columns: repeat(2,1fr); }
  .kpu-btn-row { flex-direction: column; }
  .kpu-btn-gold, .kpu-btn-ghost { width: 100%; }
}
@media (max-width: 375px) {
  .kpu-score-grid { grid-template-columns: 1fr 1fr; }
}