:root {
    --editor-surface: #fff;
    --editor-primary: #025753;
    --editor-hover: #4caf50;
    --editor-faces: color(srgb 0.405 0.485 0.4101);
    --editor-tools: color(srgb 0.3088 0.345 0.3105);
    --editor-export: color(srgb 0.0088 0.3428 0.3271);
    --editor-effect: #c2d5c3;
    --editor-effect-hover: #eaf3ea;
}

#content, .video-workspace { background: var(--editor-surface); }
.video-workspace {
    --video-photo-faces: var(--editor-faces);
    --video-photo-tools: var(--editor-tools);
    --video-photo-export: var(--editor-export);
    padding: 0;
    color: #333;
}
#content button, .video-workspace button { font-family: inherit; }

.editor-faces-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 12px;
}
.photo-history-tools, .video-people-tools {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 0 0 0 auto;
    padding: 0;
    background: transparent;
    color: inherit;
}
#photoUndo, #videoUndoFaces {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    border: 1px solid transparent;
    border-radius: 5px;
    background: var(--editor-primary);
    color: #fff;
}
#photoUndo:hover:not(:disabled), #videoUndoFaces:hover:not(:disabled) { background: var(--editor-hover); transform: none; }
#photoUndo:active, #videoUndoFaces:active { transform: none; }
#photoUndo:disabled, #videoUndoFaces:disabled { opacity: .45; cursor: default; }
#photoUndo:focus-visible, #videoUndoFaces:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#content > .editor-panel, .video-workspace .editor-panel {
    box-sizing: border-box;
    margin: 0;
    padding: 16px 20px;
    color: #fff;
}
.editor-panel.editor-panel-faces { background: var(--editor-faces); }
.editor-panel.editor-panel-tools { background: var(--editor-tools); }
.editor-panel.editor-panel-export { background: var(--editor-export); }
#content .photo-faces-content { padding: 0; }

#content .editor-section-toggle, .video-workspace .editor-section-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 46px;
    margin: 0 0 12px;
    padding: 12px 20px;
    border: 0;
    border-radius: 5px;
    background: var(--editor-primary);
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
}
#content .editor-section-toggle:not(.active),
.video-workspace .editor-section-toggle[aria-expanded="false"] { margin-bottom: 0; }
#content .editor-faces-heading .editor-section-toggle,
.video-workspace .editor-faces-heading .editor-section-toggle { margin: 0; }
.editor-faces-heading + .photo-faces-content,
.editor-faces-heading + #videoFacesContent { margin-top: 12px; }
#content .editor-section-toggle:hover, .video-workspace .editor-section-toggle:hover { background: var(--editor-hover); transform: none; }
#content .editor-section-toggle:active, .video-workspace .editor-section-toggle:active { transform: none; }
.editor-section-toggle .video-section-chevron { width: auto; height: auto; border: 0; transform: none; }
.editor-section-toggle[aria-expanded="true"] .video-section-chevron { transform: rotate(90deg); }

#selectAllButton, #videoSelectAll, .video-workspace #videoAddMask,
#content .photo-tools-content > .button {
    box-sizing: border-box;
    min-height: 42px;
    margin: 0;
    padding: 10px 14px;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    border-radius: 5px;
    background: var(--editor-primary);
    color: #fff;
}
#selectAllButton:hover, #videoSelectAll:hover, .video-workspace #videoAddMask:hover,
#content .photo-tools-content > .button:hover { background: var(--editor-hover); transform: none; }
#selectAllButton:active, #videoSelectAll:active, .video-workspace #videoAddMask:active,
#content .photo-tools-content > .button:active { transform: none; }

/* Use the same circular portrait in compact cards. Expanded video cards can
 * still shrink it on narrow screens to leave room for their passage timeline. */
#facesContainer .photo-face-toggle, .video-workspace .video-face {
    width: 116px;
    height: 116px;
    min-height: 116px;
    border-width: 8px;
}
.video-face-card[data-expanded="true"] { grid-template-columns: 116px minmax(0, 1fr); }

#facesContainer .photo-face-effects button,
.video-workspace .video-effect-button,
.video-workspace .video-style-buttons > .video-face-emoji,
.video-workspace .video-style-buttons > #videoMaskEmoji {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    height: 44px;
    min-height: 44px;
    padding: 6px;
    border: 2px solid transparent;
    border-radius: 5px;
    background: var(--editor-effect);
    color: var(--editor-primary);
    line-height: 1;
}
#facesContainer .photo-face-effects button:hover,
.video-workspace .video-effect-button:hover,
.video-workspace .video-face-emoji:hover,
.video-workspace #videoMaskEmoji:hover { background: var(--editor-effect-hover); border-color: var(--editor-primary); }
#facesContainer .photo-face-effects button[aria-pressed="true"],
.video-workspace .video-effect-button[aria-pressed="true"],
.video-workspace .video-face-emoji[data-active="true"],
.video-workspace #videoMaskEmoji[data-active="true"] {
    background: var(--editor-primary);
    color: #fff;
    border-color: #fff;
    box-shadow: 0 0 0 1px var(--editor-primary);
}
#facesContainer .photo-face-effects .choose-emoji-button,
.video-workspace .video-face-emoji { font-size: 23px; }
#facesContainer .photo-face-strength input, .video-workspace input[type="range"] { accent-color: var(--editor-primary); }
#content .editor-panel button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

#photoFullscreen.media-fullscreen-button, #videoFullscreen.media-fullscreen-button {
    box-sizing: border-box;
    position: absolute;
    right: 10px;
    bottom: 10px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-height: 44px;
    margin: 0;
    padding: 0;
    border: 1px solid #ffffff80;
    border-radius: 6px;
    background: var(--editor-primary);
    color: #fff;
    font-size: 18px;
    line-height: 1;
    box-shadow: 0 1px 5px #0005;
}
#photoFullscreen.media-fullscreen-button:hover, #videoFullscreen.media-fullscreen-button:hover { background: var(--editor-hover); transform: translateY(-2px); }
#photoFullscreen.media-fullscreen-button:active, #videoFullscreen.media-fullscreen-button:active { transform: translateY(1px); }
#photoFullscreen.media-fullscreen-button:focus-visible, #videoFullscreen.media-fullscreen-button:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

.photo-export-actions, .video-export-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px 10px;
    margin: 0;
}
#resolutionContainer { color: #333; }
.photo-export-actions { margin-top: 16px; }
.photo-face-guides {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.photo-face-guides[hidden] { display: none; }
.photo-preview-controls {
    display: flex;
    justify-content: flex-end;
    padding: 10px 20px;
    background: var(--editor-export);
}
#photoGuides, #videoGuides {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    margin: 0;
    padding: 10px 14px;
    border: 1px solid #ffffff80;
    border-radius: 5px;
    background: var(--editor-primary);
    color: #fff;
    font: inherit;
}
#photoGuides[aria-pressed="true"], #videoGuides[aria-pressed="true"] { background: var(--editor-effect); color: var(--editor-primary); }
#photoGuides:hover, #videoGuides:hover { background: var(--editor-hover); color: #fff; transform: none; }
#photoGuides:focus-visible, #videoGuides:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
#downloadButton, #copyButton, #videoExport, #videoExportSilent {
    box-sizing: border-box;
    display: inline-block;
    min-height: 50px;
    height: auto;
    max-width: 100%;
    margin: 0;
    padding: 10px 20px;
    border: 0;
    border-radius: 5px;
    background: var(--editor-hover);
    color: #fff;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.35;
    text-align: center;
    box-shadow: 0 4px 6px #0000001a;
}
#downloadButton:hover, #copyButton:hover,
#videoExport:hover:not(:disabled), #videoExportSilent:hover:not(:disabled) { background: #45a049; transform: translateY(-2px); }

@media (max-width: 600px) {
    #content > .editor-panel, .video-workspace .editor-panel { padding: 16px 12px; }
    .video-face-card[data-expanded="true"] { grid-template-columns: 82px minmax(0, 1fr); }
    .video-face-card[data-expanded="true"] .video-face { width: 78px; height: 78px; min-height: 78px; border-width: 6px; }
}
@media (max-width: 380px) {
    .video-face-card[data-expanded="true"] { grid-template-columns: minmax(0, 1fr); }
    .editor-faces-heading { column-gap: 6px; }
    #content .editor-faces-heading .editor-section-toggle,
    .video-workspace .editor-faces-heading .editor-section-toggle { padding-right: 10px; padding-left: 10px; gap: 6px; }
    .editor-faces-heading .editor-section-toggle i { margin-left: 6px; }
    #photoUndo, #videoUndoFaces { padding-right: 10px; padding-left: 10px; }
}