/* =====================================================================
   Mukairos - Character System (refactor v2 / 2026-05-11)
   Professional, aligned, easy to maintain.
   Robust for 1..N characters (no stretched single-card bug).
   ===================================================================== */

/* ---------- Tokens (scoped to character system) ---------------------- */
.character-system-page {
    --cs-border: 1px solid rgba(201,168,76,0.14);
    --cs-border-soft: 1px solid rgba(201,168,76,0.08);
    --cs-bg-shell: linear-gradient(180deg, rgba(8,10,14,0.97), rgba(4,6,10,0.98));
    --cs-bg-panel: rgba(7,10,16,0.92);
    --cs-bg-card: linear-gradient(180deg, rgba(16,20,30,0.96), rgba(7,9,14,0.96));
    --cs-bg-inner: rgba(10,14,22,0.82);
    --cs-fg: #f1e7cb;
    --cs-fg-dim: rgba(236,228,208,0.74);
    --cs-fg-mute: rgba(219,211,193,0.6);
    --cs-gold: rgba(201,168,76,0.32);
    --cs-radius: 6px;
    --cs-gap: 16px;

    margin-top: 18px;
}

/* ---------- Shell ---------------------------------------------------- */
.character-system-shell {
    display: grid;
    gap: var(--cs-gap);
    padding: var(--cs-gap);
    border: var(--cs-border);
    border-radius: var(--cs-radius);
    background: var(--cs-bg-shell);
    box-shadow: 0 18px 40px rgba(0,0,0,0.34);
}

/* ---------- Top bar -------------------------------------------------- */
.character-system-shell-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: var(--cs-gap);
    border-bottom: var(--cs-border-soft);
}

.character-system-shell-copy {
    display: grid;
    gap: 6px;
    max-width: 70%;
}

.character-system-shell-copy h1 {
    margin: 0;
    font-size: 1.55rem;
    line-height: 1.1;
    color: #f5ecd3;
}

.character-system-shell-copy p {
    margin: 0;
    color: var(--cs-fg-dim);
    font-size: 13px;
}

.character-system-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.character-system-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
    padding: 0 14px;
    border-radius: 4px;
    border: 1px solid rgba(201,168,76,0.18);
    background: rgba(10,14,22,0.88);
    color: var(--cs-fg);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.08em;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.character-system-chip:hover {
    border-color: var(--cs-gold);
    color: #fff4d6;
}

.character-system-chip-passive {
    cursor: default;
    color: var(--cs-fg-dim);
}

.character-system-chip-passive:hover {
    border-color: rgba(201,168,76,0.18);
    color: var(--cs-fg-dim);
}

/* ---------- Reusable panel ------------------------------------------ */
.character-system-card-block,
.character-system-actions-panel,
.character-system-selected,
.character-system-workspace-shell,
.panel-frame-shell {
    border: var(--cs-border-soft);
    border-radius: var(--cs-radius);
    background: var(--cs-bg-panel);
    overflow: hidden;
}

.character-system-section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 14px;
    border-bottom: var(--cs-border-soft);
    color: var(--cs-fg);
    font-size: 11px;
    font-family: var(--f-m);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* ---------- Character cards (horizontal strip, like Mudinho) -------- */
.character-system-card-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 14px;
}

.character-system-card {
    /* Fixed width prevents single-card stretch bug */
    flex: 0 0 180px;
    max-width: 180px;
    display: grid;
    gap: 8px;
    padding: 10px;
    border: var(--cs-border-soft);
    border-radius: 5px;
    background: var(--cs-bg-card);
    color: #efe5c7;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}

.character-system-card:hover,
.character-system-card.is-selected {
    border-color: var(--cs-gold);
    box-shadow: 0 10px 22px rgba(0,0,0,0.28);
    transform: translateY(-2px);
}

.character-system-card-photo {
    aspect-ratio: 1 / 1;
    border: 1px solid rgba(201,168,76,0.1);
    border-radius: 4px;
    overflow: hidden;
    background: rgba(3,5,8,0.94);
}

.character-system-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.character-system-card-meta strong {
    display: block;
    font-family: var(--f-d);
    font-size: 0.98rem;
    color: #f3ead0;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.character-system-card-meta span {
    display: block;
    margin-top: 2px;
    color: rgba(219,211,193,0.68);
    font-size: 11px;
}

.character-system-card-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 8px;
}

.character-system-card-facts span {
    color: rgba(236,228,208,0.82);
    font-size: 11px;
}

.character-system-card-note {
    color: var(--cs-fg-mute);
    font-size: 11px;
    line-height: 1.3;
}

/* ---------- Body: actions left + workspace right -------------------- */
.character-system-body {
    display: grid;
    grid-template-columns: 220px minmax(0, 1fr);
    gap: var(--cs-gap);
    align-items: start;
}

/* Actions */
.character-system-action-list {
    display: grid;
    gap: 6px;
    padding: 10px;
}

.character-system-action {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 42px;
    padding: 0 12px;
    border: var(--cs-border-soft);
    border-radius: 4px;
    background: rgba(12,18,28,0.94);
    color: rgba(236,228,208,0.88);
    font-size: 12px;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}

.character-system-action:hover,
.character-system-action.is-active {
    border-color: var(--cs-gold);
    background: rgba(18,26,38,0.98);
    color: var(--gold-l, #f5d27a);
}

.character-system-action i {
    width: 16px;
    text-align: center;
}

/* Workspace */
.character-system-workspace-panel {
    display: grid;
    gap: var(--cs-gap);
    min-width: 0;
}

.character-system-selected {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr);
    gap: 14px;
    align-items: center;
    padding: 14px;
}

.character-system-avatar {
    width: 96px;
    height: 96px;
    border: 1px solid rgba(201,168,76,0.14);
    border-radius: 5px;
    overflow: hidden;
    background: rgba(3,5,8,0.96);
}

.character-system-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.character-system-summary {
    display: grid;
    gap: 8px;
    min-width: 0;
}

.character-system-summary h2 {
    margin: 0;
    font-size: 1.2rem;
    line-height: 1.1;
    color: #f5ecd3;
}

.character-system-stat-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.character-system-stat {
    padding: 8px 10px;
    border: var(--cs-border-soft);
    border-radius: 4px;
    background: var(--cs-bg-inner);
}

.character-system-stat span {
    display: block;
    color: var(--cs-fg-mute);
    font-size: 10px;
    font-family: var(--f-m);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.character-system-stat strong {
    display: block;
    margin-top: 3px;
    color: #f3ead0;
    font-size: 0.95rem;
}

/* Workspace iframe shell */
.character-system-workspace-note {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border-bottom: var(--cs-border-soft);
    color: var(--cs-fg-dim);
    font-size: 12px;
}

.character-system-workspace-body {
    background: rgba(4,6,10,0.92);
}

.character-system-frame {
    display: block;
    width: 100%;
    height: clamp(640px, 76vh, 940px);
    min-height: 640px;
    border: 0;
    background: transparent;
}

/* ---------- Frame template (inside iframe) -------------------------- */
.panel-frame-body {
    min-height: 100%;
    margin: 0;
    padding: 12px;
    background: transparent;
}

.panel-frame-shell {
    padding: 14px;
}

.panel-frame-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    justify-content: space-between;
    gap: 14px;
    padding-bottom: 14px;
    border-bottom: var(--cs-border-soft);
}

.panel-frame-title {
    display: grid;
    gap: 4px;
}

.panel-frame-title strong {
    color: #f3ead0;
    font-family: var(--f-d);
    font-size: 1.1rem;
}

.panel-frame-title span {
    color: var(--cs-fg-dim);
    font-size: 12px;
}

.panel-frame-selector {
    min-width: min(320px, 100%);
}

.panel-frame-select-row {
    display: grid;
    gap: 6px;
}

.panel-frame-select-row label {
    color: var(--cs-fg-mute);
    font-size: 10px;
    font-family: var(--f-m);
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.panel-frame-select-row select {
    width: min(340px, 100%);
}

.panel-frame-content {
    padding-top: 14px;
}

.panel-frame-content > .quadros:last-child,
.panel-frame-content > .qdestaques:last-child,
.panel-frame-content > .qdestaques2:last-child {
    margin-bottom: 0;
}

/* ---------- Empty state --------------------------------------------- */
.character-system-empty {
    display: grid;
    place-items: center;
    gap: 8px;
    margin: 14px;
    padding: 28px 18px;
    border: 1px dashed rgba(201,168,76,0.16);
    border-radius: 5px;
    background: rgba(4,6,10,0.55);
    text-align: center;
    color: var(--cs-fg-dim);
}

.character-system-empty i {
    font-size: 28px;
    color: rgba(201,168,76,0.55);
}

.character-system-empty p {
    margin: 0;
    color: #f1e7cb;
    font-size: 14px;
}

.character-system-empty span {
    color: var(--cs-fg-mute);
    font-size: 12px;
    max-width: 420px;
}

/* ---------- Responsive ---------------------------------------------- */
@media (max-width: 1080px) {
    .character-system-body {
        grid-template-columns: 1fr;
    }

    .panel-frame-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .panel-frame-selector {
        min-width: 0;
    }

    .character-system-stat-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .character-system-frame {
        height: 72vh;
        min-height: 600px;
    }
}

@media (max-width: 780px) {
    .character-system-shell-copy {
        max-width: 100%;
    }

    .character-system-selected {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
    }

    .character-system-summary {
        justify-items: center;
    }

    .character-system-stat-list {
        grid-template-columns: 1fr 1fr;
    }

    .character-system-card {
        flex: 1 1 calc(50% - 12px);
        max-width: none;
    }

    .character-system-frame {
        height: 68vh;
        min-height: 480px;
    }
}

@media (max-width: 460px) {
    .character-system-card {
        flex: 1 1 100%;
    }
}