@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;
} .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); } } .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; } .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; } .kp-card {
background: var(--kp-surface);
border: 1px solid var(--kp-bm);
border-radius: 16px;
padding: 1.75rem;
color: var(--kp-tb);
} .kp-label {
font-family: 'Cinzel', serif; font-size: .63rem;
letter-spacing: .2em; color: var(--kp-gold);
text-transform: uppercase; margin-bottom: .75rem;
} .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; } .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); } .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;
} .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); } .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; } .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; } .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;
} .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; } @media (max-width: 480px) {
.kp-grid { grid-template-columns: 1fr; }
.kp-field.kp-full { grid-column: 1; }
.kp-card { padding: 1.25rem; }
}