:root {
    --ci-panel: #11182e;
    --ci-panel-soft: rgba(17, 24, 46, 0.78);
    --ci-edge: rgba(189, 196, 255, 0.2);
    --ci-gold: #f4d89b;
}

body[data-character-import] {
    min-height: 100vh;
    background: linear-gradient(180deg, #050816 0%, #040713 100%);
}

.ci-page {
    width: min(100%, 1600px);
    min-height: calc(100vh - 89px);
    margin: 0 auto;
}

.ci-access {
    width: min(calc(100% - 48px), 760px);
    margin: 72px auto;
}

.ci-shell {
    display: grid;
    grid-template-columns: 246px minmax(0, 1fr) 386px;
    min-height: calc(100vh - 89px);
}

.ci-rail {
    display: flex;
    flex-direction: column;
    padding: 36px 18px;
    border-right: 1px solid rgba(189, 196, 255, 0.07);
    background: rgba(3, 6, 16, 0.58);
}

.ci-kicker {
    margin: 0 0 10px;
    color: var(--ci-gold);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.ci-rail h1,
.ci-heading h2,
.ci-context h2,
.ci-import-card h3,
.ci-next h3 {
    margin: 0;
    color: var(--aa-text);
    font-family: "Cinzel", Georgia, serif;
}

.ci-rail h1 {
    font-size: 1.3rem;
    line-height: 1.38;
}

.ci-steps {
    display: grid;
    gap: 8px;
    margin: 30px 0 0;
    padding: 0;
    list-style: none;
}

.ci-steps li {
    display: grid;
    grid-template-columns: 30px 1fr;
    gap: 10px;
    align-items: center;
    padding: 15px 13px;
    border: 1px solid transparent;
    border-radius: 12px;
    color: var(--aa-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.ci-steps b {
    color: var(--aa-soft);
    font-size: 0.66rem;
    letter-spacing: 0.16em;
}

.ci-steps .is-active {
    border-color: rgba(216, 195, 154, 0.38);
    background: rgba(46, 37, 59, 0.7);
    color: var(--aa-text);
}

.ci-steps .is-active b { color: var(--ci-gold); }

.ci-rail-note {
    margin-top: auto;
    padding: 20px 16px;
    border: 1px solid var(--ci-edge);
    border-radius: 14px;
    background: var(--ci-panel-soft);
}

.ci-rail-note p,
.ci-rail-note strong,
.ci-context-card li,
.ci-import-card p,
.ci-heading > p,
.ci-next p,
.ci-seat span,
.ci-actions span {
    color: var(--aa-muted);
    font-size: 0.76rem;
    line-height: 1.55;
}

.ci-rail-note strong {
    display: block;
    margin-top: 18px;
    color: var(--ci-gold);
    font-weight: 800;
}

.ci-content {
    min-width: 0;
    padding: 42px 36px 62px;
}

.ci-heading {
    max-width: 760px;
}

.ci-heading h2 {
    font-size: clamp(2rem, 3vw, 3.15rem);
    line-height: 1.25;
}

.ci-heading > p {
    max-width: 720px;
    margin: 20px 0 0;
    font-size: 0.96rem;
}

.ci-import-card,
.ci-next,
.ci-result,
.ci-context-card {
    border: 1px solid var(--ci-edge);
    border-radius: 18px;
    background: var(--ci-panel);
}

.ci-import-card {
    display: grid;
    gap: 17px;
    max-width: 790px;
    margin-top: 34px;
    padding: 30px;
}

.ci-card-head {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.ci-card-head h3 { font-size: 1.23rem; }
.ci-card-head p { max-width: 570px; margin: 8px 0 0; }

.ci-status {
    align-self: start;
    padding: 7px 11px;
    border: 1px solid rgba(127, 219, 193, 0.26);
    border-radius: 999px;
    color: var(--aa-green);
    background: rgba(38, 84, 79, 0.62);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ci-status.is-invalid {
    border-color: rgba(255, 156, 151, 0.28);
    color: var(--aa-red);
    background: rgba(103, 43, 54, 0.52);
}

.ci-field,
.ci-file-field {
    display: grid;
    gap: 8px;
}

.ci-field > span,
.ci-file-field > span {
    color: var(--ci-gold);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ci-field input,
.ci-field textarea,
.ci-field select,
.ci-file-field input {
    width: 100%;
    border: 1px solid rgba(189, 196, 255, 0.25);
    border-radius: 10px;
    outline: none;
    background: #03050e;
    color: var(--aa-text);
    font: 500 0.86rem/1.45 "Manrope", sans-serif;
}

.ci-field input,
.ci-field select { min-height: 50px; padding: 13px 17px; }
.ci-field textarea { min-height: 170px; padding: 14px 17px; resize: vertical; }
.ci-file-field input { padding: 10px; }
.ci-field small { color: var(--aa-soft); font-size: 0.7rem; }

.ci-portrait-field {
    display: grid;
    gap: 9px;
}

.ci-portrait-field > span {
    color: var(--ci-gold);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.ci-portrait-field > .aa-btn { justify-self: start; }

.ci-portrait-field small {
    color: var(--aa-soft);
    font-size: 0.7rem;
    line-height: 1.5;
}

.ci-portrait-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--aa-muted);
    font-size: 0.74rem;
    line-height: 1.45;
}

.ci-portrait-preview img {
    width: 54px;
    height: 54px;
    flex: 0 0 auto;
    border: 2px solid var(--ci-gold);
    border-radius: 50%;
    object-fit: cover;
    background: #03050e;
}

.ci-field input:focus,
.ci-field textarea:focus,
.ci-field select:focus {
    border-color: rgba(244, 216, 155, 0.68);
    box-shadow: 0 0 0 3px rgba(244, 216, 155, 0.08);
}

.ci-confirmation {
    display: flex;
    gap: 11px;
    align-items: flex-start;
    color: var(--aa-muted);
    font-size: 0.76rem;
    line-height: 1.5;
}

.ci-confirmation input { margin-top: 3px; accent-color: var(--ci-gold); }

.ci-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 18px;
}

.ci-actions .aa-btn {
    min-width: 190px;
    border: 0;
    color: #16121a;
    background: var(--ci-gold);
}

.ci-actions .aa-btn[disabled] { color: #16121a; }

.ci-source-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    margin: 0;
    padding: 15px;
    border: 1px solid var(--ci-edge);
    border-radius: 10px;
}
.ci-source-choice legend { color: var(--ci-gold); font-size: 0.75rem; padding: 0 6px; }
.ci-source-choice label { display: flex; align-items: center; gap: 8px; color: var(--aa-text); font-size: 0.8rem; }
.ci-source-choice input { accent-color: var(--ci-gold); }
.ci-field em { font-style: normal; color: var(--aa-muted); text-transform: none; letter-spacing: 0; }
.ci-file-panel { padding: 16px; border: 1px dashed var(--ci-gold); border-radius: 10px; }
.ci-file-field small, .ci-service-note { color: var(--aa-muted); font-size: 0.75rem; line-height: 1.6; }
.ci-feedback { padding: 14px; color: var(--aa-text); border: 1px solid var(--ci-edge); border-radius: 10px; font-size: 0.82rem; line-height: 1.6; overflow-wrap: anywhere; }
.ci-feedback.is-error { border-color: #dba880; color: #ffe2c3; background: #33211d; }
.ci-actions .aa-btn:disabled { opacity: 0.6; cursor: not-allowed; }
.ci-source-choice input:focus-visible, .ci-file-field input:focus-visible { outline: 2px solid var(--ci-gold); outline-offset: 3px; }
body[data-character-import] [hidden] { display: none !important; }

.ci-result {
    display: grid;
    gap: 14px;
    max-width: 790px;
    margin-top: 18px;
    padding: 22px 24px;
    border-color: rgba(127, 219, 193, 0.34);
}

.ci-result h3 { margin: 0; color: var(--aa-text); font-family: "Cinzel", Georgia, serif; }
.ci-result p { margin: 0; color: var(--aa-muted); line-height: 1.6; }
.ci-result .aa-actions { margin-top: 0; }

.ci-next {
    max-width: 790px;
    margin-top: 24px;
    padding: 26px 30px;
}

.ci-next > div {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    margin-top: 22px;
}

.ci-next article b { color: var(--ci-gold); font-size: 0.8rem; }
.ci-next p { margin: 8px 0 0; }

.ci-context {
    padding: 32px 30px;
    border-left: 1px solid rgba(189, 196, 255, 0.07);
    background: rgba(3, 6, 16, 0.25);
}

.ci-context-card { padding: 28px; }
.ci-context h2 { font-size: 1.45rem; line-height: 1.3; }
.ci-context .ci-field { margin-top: 24px; }

.ci-seat {
    display: grid;
    gap: 6px;
    margin-top: 20px;
    padding: 20px;
    border: 1px solid var(--ci-edge);
    border-radius: 14px;
    background: rgba(4, 7, 18, 0.54);
}

.ci-seat .ci-kicker { margin: 0; }
.ci-seat strong { color: var(--aa-text); font-family: "Cinzel", Georgia, serif; }
.ci-seat.is-blocked { border-color: rgba(255, 156, 151, 0.34); }

.ci-privacy {
    margin-top: 28px;
    padding-top: 22px;
    border-top: 1px solid var(--ci-edge);
}

.ci-privacy ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 19px; }

.ci-library-link { display: flex; justify-content: center; width: 100%; margin-top: 22px; }

@media (max-width: 1180px) {
    .ci-shell { grid-template-columns: 220px minmax(0, 1fr); }
    .ci-context { grid-column: 2; border-top: 1px solid rgba(189, 196, 255, 0.07); border-left: 0; }
}

@media (max-width: 780px) {
    .ci-page { min-height: 0; }
    .ci-shell { display: block; min-height: 0; }
    .ci-rail { padding: 24px 20px; border-right: 0; border-bottom: 1px solid rgba(189, 196, 255, 0.07); }
    .ci-rail-note { display: none; }
    .ci-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 18px; }
    .ci-steps li { grid-template-columns: 1fr; padding: 11px; }
    .ci-content, .ci-context { padding: 28px 20px; }
    .ci-context { border-top: 1px solid rgba(189, 196, 255, 0.07); }
    .ci-heading h2 { font-size: 2rem; }
    .ci-import-card, .ci-next, .ci-context-card { padding: 22px; }
    .ci-card-head { display: grid; }
    .ci-next > div { grid-template-columns: 1fr; gap: 14px; }
}

@media (max-width: 470px) {
    .ci-steps { display: block; }
    .ci-steps li { margin-top: 5px; grid-template-columns: 30px 1fr; }
    .ci-actions { align-items: stretch; }
    .ci-actions .aa-btn { width: 100%; }
}