#posterPeoplePane.fg-editor-panel {
    height: 100%;
    padding: 5px;
    overflow: hidden;
    color: #f4f4f4;
    background: #252525;
}

.fg-editor-shell {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    height: 100%;
    min-height: 0;
}

.fg-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 3px 4px 7px;
}

.fg-editor-head b { font-size: 12px; }
.fg-editor-head small { color: #bdbdbd; font-size: 8px; }

.fg-editor-scroll {
    min-height: 0;
    padding-right: 3px;
    overflow: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

.fg-generation { margin: 0 0 8px; }

.fg-generation-title {
    position: sticky;
    top: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 4px;
    padding: 4px 7px;
    color: #241600;
    background: #f2a018;
    border-radius: 6px;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .025em;
    text-transform: uppercase;
}

.fg-couple-list { display: grid; gap: 5px; }

.fg-couple-editor {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 6px;
    padding: 6px;
    border: 1px solid #515151;
    border-radius: 9px;
    background: #181818;
}

.fg-couple-editor.is-selected {
    border-color: #ffae22;
    box-shadow: 0 0 0 2px rgba(255, 174, 34, .24);
}

.fg-couple-title {
    overflow: hidden;
    color: #f5c86f;
    font-size: 9px;
    font-weight: 800;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fg-couple-actions { display: flex; gap: 4px; }

.fg-person-row {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr) 27px;
    align-items: center;
    gap: 6px;
}

.fg-photo {
    position: relative;
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    color: #a9a9a9;
    background: #303030;
    border: 1px solid #666;
    border-radius: 50%;
    cursor: pointer;
}

.fg-photo img { width: 100%; height: 100%; object-fit: cover; }
.fg-photo input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.fg-person-fields {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    min-width: 0;
    gap: 4px 5px;
}
.fg-field { display: grid; min-width: 0; gap: 2px; }
.fg-field span { color: #aaa; font-size: 7px; font-weight: 800; text-transform: uppercase; }
.fg-field input {
    width: 100%;
    min-width: 0;
    height: 29px;
    padding: 4px 7px;
    color: #fff;
    background: #2b2b2b;
    border: 1px solid #5c5c5c;
    border-radius: 6px;
    font-size: 11px;
}
.fg-field input:focus { outline: 2px solid #f2a018; border-color: #f2a018; }

.fg-icon-button,
.fg-add-button {
    border: 1px solid #6a6a6a;
    border-radius: 6px;
    color: #fff;
    background: #343434;
    font-weight: 800;
    cursor: pointer;
}
.fg-icon-button { width: 27px; height: 27px; padding: 0; }
.fg-icon-button.danger { color: #ffd8d8; border-color: #8d3a3a; background: #652626; }
.fg-add-button { min-height: 25px; padding: 3px 8px; color: #2c1900; border-color: #f2a018; background: #f2a018; font-size: 9px; }

.fg-child-branch {
    display: grid;
    gap: 5px;
    padding: 5px;
    border: 1px dashed #5b5b5b;
    border-radius: 9px;
}
.fg-child-branch-head { display: flex; align-items: center; justify-content: space-between; gap: 6px; }
.fg-child-branch-head b { overflow: hidden; color: #ddd; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }

#svg [data-person-id] { cursor: pointer; }

@media (max-width: 899px) {
    #posterPeoplePane.fg-editor-panel { padding: 3px; }
    .fg-editor-head { padding-bottom: 4px; }
    .fg-generation { margin-bottom: 6px; }
    .fg-couple-editor { padding: 5px; }
    .fg-person-row { grid-template-columns: 31px minmax(0, 1fr) 25px; gap: 5px; }
    .fg-photo { width: 31px; height: 31px; }
    .fg-person-fields { gap: 3px 4px; }
    .fg-field input { height: 27px; font-size: 10px; }
    .fg-icon-button { width: 25px; height: 25px; }
}

/* Android WebView: inline Four Generations entry needs the whole area above
   the IME. display:none deliberately wins over older poster min-height rules. */
body.fg-keyboard-open #container {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    flex: 0 0 0 !important;
    overflow: hidden !important;
}

body.fg-keyboard-open #rootSelector {
    height: 0 !important;
    min-height: 0 !important;
    flex: 1 1 0 !important;
}

/* Four Generations: clearer contextual add actions. */
.fg-add-child {
    display: block;
    width: 100%;
    margin: 0 0 6px;
    min-height: 31px;
    font-size: 10px;
}

.fg-add-inline {
    min-height: 27px;
    padding: 3px 8px;
    white-space: nowrap;
    font-size: 9px;
}

.fg-child-branch-head > div {
    display: grid;
    min-width: 0;
    gap: 1px;
}

.fg-child-branch-head small {
    color: #979797;
    font-size: 7px;
}

.fg-empty-note {
    display: block;
    padding: 7px 8px;
    color: #aaa;
    background: #202020;
    border-radius: 6px;
    font-size: 8px;
    line-height: 1.35;
}

@media (max-width: 899px) {
    .fg-couple-title { align-self: center; }
    .fg-couple-actions { align-items: center; }
    .fg-add-inline { min-height: 25px; padding: 2px 6px; font-size: 8px; }
    .fg-add-child { min-height: 29px; }
}

/* Generations product: compact 3/4/5/6 selector. */
.fg-generation-chooser {
    display: flex;
    align-items: center;
    gap: 3px;
    flex: 0 0 auto;
}

.fg-generation-chooser > span {
    margin-right: 2px;
    color: #bdbdbd;
    font-size: 8px;
    font-weight: 800;
    text-transform: uppercase;
}

.fg-generation-choice {
    min-width: 27px;
    height: 27px;
    padding: 0 6px;
    color: #ddd;
    background: #343434;
    border: 1px solid #666;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
}

.fg-generation-choice:hover,
.fg-generation-choice:focus-visible {
    border-color: #f2a018;
    outline: none;
}

.fg-generation-choice.is-active {
    color: #2c1900;
    background: #f2a018;
    border-color: #f2a018;
}

@media (max-width: 899px) {
    .fg-editor-head { align-items: flex-start; }
    .fg-generation-chooser > span { display: none; }
    .fg-generation-choice { min-width: 25px; height: 25px; padding: 0 5px; font-size: 9px; }
}