/* ── Karma Palmis — style.css ───────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600&family=Crimson+Pro:ital,wght@0,300;0,400;1,300&display=swap');

#karma-palmis-app {
  --kp-gold:    #C9A84C;
  --kp-gold-lt: #E8C97A;
  --kp-bg:      #0D0A1A;
  --kp-surface: #13102B;
  --kp-bm:      rgba(201,168,76,0.25);
  --kp-td:      rgba(220,210,255,0.60);
  --kp-tb:      rgba(240,235,255,0.95);
  --kp-acc:     #7B5EA7;

  font-family: 'Crimson Pro', serif;
  max-width: 680px;
  margin: 0 auto;
  padding: 1rem 0 3rem;
}

/* Steps */
.kp-step { display: none; }
.kp-step.kp-active { display: block; animation: kpFade .5s ease; }
@keyframes kpFade { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }

/* Header */
.kp-header { text-align: center; padding: 2rem 1rem 1rem; }
.kp-symbol {
  display: block; font-size: 2.5rem; color: var(--kp-gold);
  animation: kpFloat 4s ease-in-out infinite; margin-bottom: .4rem;
}
@keyframes kpFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-7px)} }
.kp-header h2 {
  font-family: 'Cinzel', serif; font-size: 1.7rem; font-weight: 600;
  color: var(--kp-gold); letter-spacing: .15em; text-transform: uppercase; margin: 0;
}
.kp-header p { font-size: .95rem; color: var(--kp-td); font-style: italic; margin: .3rem 0 0; }

/* Divider */
.kp-divider {
  display: flex; align-items: center; gap: .75rem;
  margin: 1rem 0;
}
.kp-divider::before, .kp-divider::after {
  content: ''; flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, var(--kp-gold-lt), transparent);
}
.kp-divider span { color: var(--kp-gold); font-size: .72rem; white-space: nowrap; }

/* Card */
.kp-card {
  background: var(--kp-surface);
  border: 1px solid var(--kp-bm);
  border-radius: 16px;
  padding: 1.75rem;
  color: var(--kp-tb);
}

/* Label */
.kp-label {
  font-family: 'Cinzel', serif; font-size: .63rem;
  letter-spacing: .2em; color: var(--kp-gold);
  text-transform: uppercase; margin-bottom: .75rem;
}

/* Upload */
.kp-upload {
  position: relative; overflow: hidden;
  border: 1.5px dashed var(--kp-bm); border-radius: 12px;
  padding: 1.75rem 1.5rem; text-align: center; cursor: pointer;
  transition: all .3s; background: rgba(123,94,167,.04);
}
.kp-upload:hover { border-color: var(--kp-gold); background: rgba(201,168,76,.05); }
.kp-upload.kp-has-img { border-color: var(--kp-gold); background: rgba(201,168,76,.07); }
.kp-upload input[type="file"] {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%;
}
.kp-upload img {
  width: 100%; max-height: 200px; object-fit: cover;
  border-radius: 8px; display: none; margin-bottom: .75rem;
}
.kp-upload-icon { font-size: 2.2rem; display: block; margin-bottom: .5rem; }
.kp-upload-title { font-size: 1rem; color: var(--kp-tb); margin: 0; }
.kp-upload-hint  { font-size: .82rem; color: var(--kp-td); font-style: italic; margin: .2rem 0 0; }

/* Form grid */
.kp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .9rem; margin-top: 1rem; }
.kp-field { display: flex; flex-direction: column; gap: .35rem; }
.kp-field.kp-full { grid-column: 1 / -1; }
.kp-field label {
  font-family: 'Cinzel', serif; font-size: .6rem;
  letter-spacing: .15em; color: var(--kp-gold); text-transform: uppercase;
}
.kp-field input,
.kp-field select {
  background: rgba(255,255,255,.04); border: 1px solid var(--kp-bm);
  border-radius: 8px; padding: .55rem .75rem; color: var(--kp-tb);
  font-family: 'Crimson Pro', serif; font-size: 1rem; width: 100%;
  transition: border-color .2s; box-shadow: none;
}
.kp-field input:focus,
.kp-field select:focus { outline: none; border-color: var(--kp-gold); background: rgba(201,168,76,.05); }
.kp-field select option { background: #13102B; color: var(--kp-tb); }

/* Error */
.kp-error {
  background: rgba(160,50,50,.15); border: 1px solid rgba(200,80,80,.3);
  border-radius: 8px; padding: .65rem 1rem; color: #F09595;
  font-size: .88rem; font-style: italic; margin-top: .75rem; display: none;
}

/* Buttons */
.kp-btn-main {
  width: 100%; margin-top: 1.25rem; padding: .9rem;
  background: linear-gradient(135deg, var(--kp-acc), #4A3580);
  border: 1px solid var(--kp-gold); border-radius: 10px;
  color: var(--kp-gold-lt); font-family: 'Cinzel', serif;
  font-size: .87rem; letter-spacing: .15em; cursor: pointer;
  text-transform: uppercase; transition: all .3s;
}
.kp-btn-main:hover { filter: brightness(1.15); transform: translateY(-2px); }
.kp-btn-main:disabled { opacity: .5; cursor: default; transform: none; }

.kp-btn-new {
  width: 100%; margin-top: 1rem; padding: .75rem;
  background: transparent; border: 1px solid var(--kp-bm); border-radius: 10px;
  color: var(--kp-td); font-family: 'Cinzel', serif; font-size: .73rem;
  letter-spacing: .15em; cursor: pointer; text-transform: uppercase; transition: all .3s;
}
.kp-btn-new:hover { border-color: var(--kp-gold); color: var(--kp-gold); }

/* Loading */
.kp-loading { text-align: center; padding: 3rem 1rem; }
.kp-spinner {
  width: 60px; height: 60px; border: 2px solid transparent;
  border-top-color: var(--kp-gold); border-left-color: var(--kp-acc);
  border-radius: 50%; animation: kpSpin 1.5s linear infinite;
  margin: 0 auto 1.25rem; position: relative;
}
.kp-spinner::after {
  content: '✦'; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%,-50%); color: var(--kp-gold); font-size: 1.2rem;
  animation: kpCSpin 1.5s linear infinite;
}
@keyframes kpSpin  { to { transform: rotate(360deg); } }
@keyframes kpCSpin { to { transform: translate(-50%,-50%) rotate(-360deg); } }
.kp-load-title {
  font-family: 'Cinzel', serif; color: var(--kp-gold);
  font-size: .82rem; letter-spacing: .2em; margin-bottom: 1rem;
}
.kp-phase { font-size: .88rem; color: var(--kp-td); font-style: italic; padding: .22rem 0; transition: color .5s; }
.kp-phase-active { color: var(--kp-gold-lt) !important; }

/* Score */
.kp-score {
  text-align: center; padding: 1.1rem;
  background: rgba(201,168,76,.07); border: 1px solid var(--kp-bm);
  border-radius: 12px; margin-bottom: 1.1rem;
}
.kp-score-num { font-family: 'Cinzel', serif; font-size: 3.2rem; color: var(--kp-gold); line-height: 1; }
.kp-score-lbl { font-size: .8rem; color: var(--kp-td); font-style: italic; margin-top: .2rem; }

/* Tags */
.kp-tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .65rem; justify-content: center; }
.kp-tag {
  background: rgba(123,94,167,.2); border: 1px solid rgba(123,94,167,.4);
  border-radius: 20px; padding: .2rem .65rem;
  font-size: .78rem; color: rgba(200,180,255,.9); font-style: italic;
}

/* Result cards */
.kp-rcard {
  background: rgba(123,94,167,.07); border: 1px solid var(--kp-bm);
  border-radius: 12px; padding: 1.1rem; margin-bottom: .85rem;
}
.kp-rcard h3 {
  font-family: 'Cinzel', serif; font-size: .68rem; letter-spacing: .18em;
  color: var(--kp-gold); text-transform: uppercase; margin: 0 0 .65rem;
  display: flex; align-items: center; gap: .5rem;
}
.kp-rcard h3::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--kp-bm), transparent); }
.kp-rcard p { color: var(--kp-tb); font-size: .98rem; line-height: 1.8; font-style: italic; margin: 0; }

/* Responsive */
@media (max-width: 480px) {
  .kp-grid { grid-template-columns: 1fr; }
  .kp-field.kp-full { grid-column: 1; }
  .kp-card { padding: 1.25rem; }
}