body { margin: 0; font-family: Arial, sans-serif; background: #171c19; color: #f5f1e7; }
.video-close-dialog {
    position: fixed; inset: 0; margin: auto; width: min(300px, calc(100vw - 32px));
    max-height: calc(100dvh - 32px); overflow-y: auto; box-sizing: border-box;
    padding: 16px; border: 1px solid #cbd2c1; border-radius: 12px;
    background: #f8f5ec; color: #354236; font: 13px/1.5 Arial, sans-serif;
    box-shadow: 0 12px 36px #17271b33;
}
.video-close-dialog::backdrop { background: #14231866; }
.video-close-dialog > strong { font-size: 15px; line-height: 1.4; }
.video-close-dialog p { margin: 7px 0 14px; }
.video-close-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.video-close-actions button { min-height: 40px; padding: 8px; border: 1px solid #d7c6bc; border-radius: 7px; background: #f6e9e3; color: #873e34; font: 12px/1.4 Arial, sans-serif; cursor: pointer; }
.video-close-actions [data-keep-waiting] { background: #354b38; color: #fff; border-color: #354b38; }
.video-close-actions button:focus-visible { outline: 2px solid #8a9c7a; outline-offset: 2px; }
.picture-info-edit { margin-top: 12px; padding: 10px 14px; border: 1px solid #cbd2c1; border-radius: 7px; background: #e4e9dc; color: #354236; cursor: pointer; font: inherit; }
.local-export-panel { position: fixed; top: 12px; right: 12px; z-index: 60; width: min(260px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); box-sizing: border-box; overflow: auto; padding: 12px; border: 1px solid #cbd2c1; border-radius: 12px; background: #f8f5ec; color: #354236; box-shadow: 0 4px 22px #23372930; font-size: 12px; }
.local-export-panel canvas { display: block; width: 100%; height: auto; max-height: min(32dvh, 200px); object-fit: contain; margin: 10px 0; border-radius: 6px; background: #e4e9dc; }
.local-export-panel p { line-height: 1.5; }
.local-export-panel button, .local-video-download { display: inline-block; padding: 9px 12px; margin: 3px 4px 3px 0; border: 1px solid #cbd2c1; border-radius: 6px; background: #e4e9dc; color: #354236; font: inherit; text-decoration: none; cursor: pointer; }
.local-video-download { background: #354b38; color: #fff; }
.picture-info-editor { max-height: calc(100dvh - 24px); overflow-y: auto; overscroll-behavior: contain; touch-action: auto; }
#theme-editor {
    z-index: 40; width: min(340px, calc(100vw - 24px));
    max-height: min(640px, calc(100dvh - 88px));
    padding: 12px; overflow-y: auto; overscroll-behavior: contain;
    background: #f8f5ec; color: #354236; border: 1px solid #cbd2c1;
    border-radius: 12px; box-shadow: 0 6px 24px #23372930; font-size: 13px;
}
#theme-editor .theme-editor-header {
    position: sticky; top: -12px; z-index: 2; background: #f8f5ec;
    gap: 8px; margin: 0; padding-bottom: 8px;
}
#theme-editor .theme-editor-title { font-size: 14px; line-height: 1.4; }
#theme-editor .theme-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
#theme-editor .theme-editor-save, #theme-editor .theme-editor-close {
    min-height: 32px; padding: 6px 10px; border-radius: 6px; font: inherit;
    background: #e4e9dc; color: #354236; border: 1px solid #cbd2c1;
}
#theme-editor .theme-editor-save { background: #354b38; border-color: #354b38; color: white; }
#theme-editor .theme-editor-status { min-height: 0; margin: 4px 0 8px; color: #50634c; line-height: 1.4; }
#theme-editor .theme-editor-status:empty { display: none; }
#theme-editor .theme-editor-frame-style {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 8px;
    padding: 6px 0; margin: 0; border: 0; border-bottom: 1px solid #d9ddcf; font-size: 12px;
}
#theme-editor select { min-height: 32px; padding: 5px 7px; border-radius: 6px; background: #eef1e7; color: #354236; border: 1px solid #cbd2c1; }
#theme-editor .theme-editor-grid { gap: 0; }
#theme-editor .theme-editor-row { grid-template-columns: minmax(0, 1fr) 40px; gap: 12px; min-height: 32px; padding: 3px 0; box-sizing: border-box; border-color: #d9ddcf; }
#theme-editor .theme-editor-name { font-size: 12px; line-height: 1.35; overflow-wrap: normal; }
#theme-editor .theme-editor-picker { width: 40px; height: 26px; cursor: pointer; }
#theme-editor .theme-editor-value { display: none; }
@media (min-width: 769px) and (min-height: 501px) {
    #theme-editor { width: min(420px, calc(100vw - 32px)); }
    #theme-editor .theme-editor-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
    #theme-editor .theme-editor-row { grid-template-columns: minmax(0, 1fr) 32px; gap: 8px; }
    #theme-editor .theme-editor-picker { width: 32px; }
}
@media (max-width: 768px), (max-height: 500px) and (pointer: coarse) {
    #theme-editor {
        top: max(8px, env(safe-area-inset-top)); right: 8px;
        z-index: 40;
        width: min(320px, calc(100vw - 16px));
        max-height: calc(100dvh - max(8px, env(safe-area-inset-top)) - 72px - env(safe-area-inset-bottom));
        overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
        padding: 10px; box-sizing: border-box;
    }
    #theme-editor .theme-editor-header { top: -10px; gap: 6px; }
}
@media (max-width: 768px) { .picture-info-editor input, .picture-info-editor textarea { font-size: 16px !important; } }
    .gallery-mobile-navigation { position: fixed; z-index: 35; bottom: 0; left: 0; right: 0; height: calc(56px + env(safe-area-inset-bottom)); box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 6px 12px calc(6px + env(safe-area-inset-bottom)); border-top: 1px solid #d9ddcf; background: #f8f5ec; }
    .gallery-mobile-navigation button { width: 40px; height: 40px; padding: 0; border-radius: 8px; border: 1px solid #cbd2c1; background: #e4e9dc; color: #354236; font: 23px Arial, sans-serif; touch-action: none; user-select: none; cursor: pointer; }
    .gallery-mobile-navigation button:active { background: #c6d4bc; }
    .gallery-mobile-navigation [data-direction="left"] { order: 0; }
    .gallery-mobile-navigation [data-direction="forward"] { order: 1; }
    .gallery-mobile-navigation [data-direction="backward"] { order: 2; }
    .gallery-mobile-navigation [data-direction="right"] { order: 3; }
    .local-help, #info { display: none !important; }
@media (max-width: 768px) { .local-help { bottom: 132px !important; } }
.local-toolbar { position: fixed; top: 14px; left: 14px; z-index: 25; width: min(370px, calc(100vw - 90px)); padding: 16px; border: 1px solid #ffffff25; border-radius: 16px; background: #18201bea; box-sizing: border-box; box-shadow: 0 8px 32px #0004; }
.local-toolbar h1 { margin: 0 0 5px; font-size: 18px; }
.local-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.local-heading button { min-height: 30px; padding: 4px 10px; }
.local-toolbar.is-collapsed > :not(.local-heading) { display: none; }
.local-toolbar p { margin: 7px 0 12px; font-size: 12px; line-height: 1.5; color: #c5cabc; }
.local-toolbar label { display: block; font-size: 12px; margin: 12px 0; }
.local-toolbar input[type=text] { display: block; width: 100%; box-sizing: border-box; margin-top: 5px; background: #ffffff0c; color: inherit; border: 1px solid #ffffff35; border-radius: 7px; padding: 9px; }
.local-toolbar button, .local-toolbar .local-file { min-height: 42px; padding: 9px 12px; border: 1px solid #ffffff30; border-radius: 8px; color: #f6f2e9; background: #ffffff0c; cursor: pointer; font: 13px Arial, sans-serif; display: inline-flex; align-items: center; box-sizing: border-box; margin: 0; }
.local-toolbar button:disabled { opacity: .5; cursor: wait; }
.local-toolbar .local-primary { background: #cdb67b; color: #22291f; border-color: #cdb67b; font-weight: 700; }
.local-toolbar .local-row { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.local-toolbar details { margin-top: 12px; } .local-toolbar summary { cursor: pointer; font-size: 13px; padding: 8px 0; }
.local-toolbar [hidden] { display: none !important; }
.local-toolbar [data-status] { margin-bottom: 0; overflow-wrap: anywhere; }
.local-toolbar :focus-visible { outline: 2px solid #e0c47d; outline-offset: 3px; }
.local-view-title { position: fixed; top: 20px; left: 20px; z-index: 5; padding: 12px 16px; border-radius: 10px; background: #18201bdc; color: #fff; max-width: calc(100vw - 72px); }
.local-help { position: fixed; bottom: 12px; left: 12px; padding: 9px 12px; background: #18201bcf; color: #f6f2e9; font-size: 12px; border-radius: 8px; z-index: 5; }
#layout-editor { max-height: calc(100dvh - 32px); overflow: auto; }
.layout-editor-align { border: 1px solid #ffffff30; border-radius: 7px; padding: 9px 12px; color: #fff; background: #425548; cursor: pointer; font: inherit; min-height: 40px; }
.layout-editor-align:disabled { opacity: .5; cursor: wait; }
@media(max-width:600px) { .local-toolbar { padding: 12px; max-height: 48dvh; overflow: auto; } .local-toolbar h1 { font-size: 16px; } .local-help { font-size: 11px; max-width: 75vw; } }
/* Compact, light editor panels on desktop and mobile. */
    .local-toolbar {
        top: max(8px, env(safe-area-inset-top)); left: 8px;
        width: min(258px, calc(100vw - 66px)); max-height: 40dvh;
        padding: 8px; border-radius: 10px; font-size: 11px;
    }
    .local-toolbar h1 { margin: 0; font-size: 12px; line-height: 1.3; }
    .local-heading { gap: 5px; }
    .local-toolbar p { font-size: 10px; line-height: 1.35; margin: 5px 0 7px; }
    .local-toolbar label { font-size: 10px; margin: 7px 0; }
    .local-toolbar input[type=text] { margin-top: 3px; padding: 5px 6px; font-size: 11px; }
    .local-toolbar button, .local-toolbar .local-file {
        min-height: 28px; padding: 4px 6px; border-radius: 5px; font-size: 10px; line-height: 1.3;
    }
    .local-toolbar .local-row { gap: 4px; margin-top: 5px; }
    .local-toolbar .local-row > * { flex: 1 1 90px; justify-content: center; text-align: center; }
    .local-toolbar .local-heading button { min-height: 24px; width: 24px; flex: 0 0 24px; padding: 2px; }
    .local-toolbar details { margin-top: 6px; }
    .local-toolbar summary { font-size: 11px; padding: 5px 0; }
    #layout-editor {
        right: 8px; left: 8px; bottom: max(8px, env(safe-area-inset-bottom));
        width: calc(100vw - 16px); max-height: 28dvh;
        padding: 8px; border-radius: 10px; font-size: 11px;
    }
    #layout-editor .layout-editor-header { gap: 5px; }
    #layout-editor .layout-editor-header strong { font-size: 11px; }
    #layout-editor .layout-editor-header-actions { gap: 4px; }
    #layout-editor .layout-editor-actions { gap: 4px; justify-content: flex-start; }
    #layout-editor button, #layout-editor .layout-editor-upload {
        min-height: 28px; padding: 4px 6px; border-radius: 5px; font-size: 10px; line-height: 1.3;
    }
    #layout-editor .layout-editor-close { width: 24px; height: 24px; min-height: 24px; padding: 0; font-size: 18px; }
    #layout-editor .layout-editor-help { margin: 5px 0; font-size: 10px; line-height: 1.3; }
    #layout-editor .layout-editor-status { margin-top: 6px; font-size: 10px; line-height: 1.3; }
    #layout-editor .layout-picture-selection { margin-top: 7px; padding: 7px; gap: 7px; border-radius: 7px; }
    #layout-editor .layout-picture-preview { width: 32px; height: 42px; }
    #layout-editor .layout-picture-details { font-size: 10px; }
    #layout-editor .layout-picture-buttons { gap: 4px; margin-top: 4px; }
    .local-help { bottom: 8px; left: 8px; padding: 5px 7px; max-width: calc(100vw - 30px); font-size: 9px; }
    .local-toolbar, #layout-editor {
        color: #354236; background: rgba(248, 245, 236, .98);
        border: 1px solid #d9ddcf; box-shadow: 0 5px 22px #23372926;
    }
    .local-toolbar p, #layout-editor .layout-editor-help, #layout-editor .layout-editor-status { color: #596451; }
    .local-toolbar input[type=text] { color: #354236; background: #fffdf7; border-color: #cbd2c1; }
    .local-toolbar button, .local-toolbar .local-file, #layout-editor button, #layout-editor .layout-editor-upload {
        color: #354236; background: #e4e9dc; border: 1px solid #cbd2c1;
    }
    .local-toolbar button:hover, .local-toolbar .local-file:hover, #layout-editor button:hover, #layout-editor .layout-editor-upload:hover { background: #d7e1cf; }
    .local-toolbar .local-primary { color: #4a4026; background: #e5d5a8; border-color: #d2bf89; }
    #layout-editor .layout-editor-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    #layout-editor .layout-editor-actions > * {
        display: flex; align-items: center; justify-content: center;
        width: 100%; height: 32px; min-width: 0; margin: 0;
        box-sizing: border-box; text-align: center;
    }
    #layout-editor .layout-editor-status[data-state="dirty"] { color: #79601e; }
    #layout-editor .layout-editor-status[data-state="success"] { color: #356344; }
    #layout-editor .layout-editor-status[data-state="error"], #layout-editor .layout-picture-remove { color: #963f35; }
    #layout-editor .layout-picture-selection { background: #fffdf7; border-color: #d5dccd; }
/* A single light window palette on desktop and mobile. */
.local-toolbar, #layout-editor, #theme-editor, #theme-menu, #gallery-admin-login,
#gallery-video-export, .picture-info-dialog, .picture-info-editor,
.local-export-panel, .local-video-preview {
    background: #f8f5ec; color: #354236; border: 1px solid #cbd2c1;
    box-shadow: 0 6px 24px #23372930;
}
#theme-menu-toggle { background: #f8f5ec; color: #354236; border: 1px solid #cbd2c1; }
.theme-menu-item, #gallery-admin-login button, #gallery-video-export button,
#gallery-video-export select, .picture-info-dialog button, .picture-info-editor button {
    background: #e4e9dc; color: #354236; border: 1px solid #cbd2c1;
}
#gallery-admin-login input, .picture-info-editor input, .picture-info-editor textarea {
    background: #fffdf7; color: #354236; border-color: #cbd2c1;
}
#gallery-admin-login p, .picture-info-dialog .picture-info-text,
.picture-info-editor label, .picture-info-editor .picture-info-editor-footer {
    color: #4b5e50;
}
#gallery-admin-login button[type=submit], #gallery-video-export [data-create],
#gallery-video-export [data-download], .picture-info-editor button[type=submit] {
    background: #354b38; color: #fff; border-color: #354b38;
}
#gallery-admin-login .gallery-admin-status, .picture-info-editor .picture-info-remove {
    color: #963f35;
}
/* Readable creation tools, with explanations next to the relevant action. */
.local-toolbar {
    width: min(310px, calc(100vw - 48px)); padding: 12px; border-radius: 12px;
    max-height: calc(100dvh - 88px - env(safe-area-inset-bottom));
    overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y;
    color: #354236; font-size: 13px;
}
.local-toolbar h1 { font-size: 16px; line-height: 1.4; }
.local-toolbar .local-heading { gap: 8px; margin-bottom: 10px; }
.local-toolbar label { font-size: 13px; margin: 8px 0; }
.local-toolbar input[type=text] { padding: 8px; margin-top: 5px; font-size: 14px; }
.local-toolbar button, .local-toolbar .local-file {
    min-height: 36px; padding: 7px 8px; border-radius: 7px; font-size: 13px; line-height: 1.35;
}
.local-toolbar .local-heading button { width: 28px; flex-basis: 28px; min-height: 28px; font-size: 16px; }
.local-toolbar .local-row { gap: 7px; margin-top: 8px; }
.local-toolbar .local-tool-group { margin-top: 12px; padding-top: 10px; border-top: 1px solid #d5dccd; }
.local-toolbar .local-tool-group > .local-row { margin-top: 0; }
.local-toolbar .local-tool-group > button { width: 100%; justify-content: center; }
.local-toolbar p { font-size: 13px; line-height: 1.5; color: #40543e; margin: 7px 0 0; }
.local-toolbar .local-primary { background: #354b38; border-color: #354b38; color: #fff; }
.local-toolbar .local-primary:hover { background: #293e2c; }
.local-toolbar .local-wide { display: flex; width: 100%; justify-content: center; text-align: center; margin-top: 8px; }
.local-toolbar .local-paypal { background: #ffc439; border-color: #e4ae29; color: #17375e; font-weight: 700; }
.local-toolbar button:disabled { cursor: default; }
.local-export-panel .local-video-download { display: flex; justify-content: center; width: 100%; box-sizing: border-box; min-height: 40px; align-items: center; background: #354b38; border-color: #354b38; color: #fff; font-weight: 700; }
.local-toolbar details { margin-top: 6px; }
.local-toolbar summary { font-size: 13px; line-height: 1.5; padding: 7px 0; font-weight: 600; }
.local-toolbar [data-status] { padding-top: 10px; margin-top: 12px; border-top: 1px solid #d5dccd; font-size: 13px; color: #40543e; }
@media (max-width: 768px) { .local-toolbar input[type=text] { font-size: 16px; } }
.local-video-preview { position: fixed; right: 12px; top: 64px; z-index: 40; width: min(5cm, calc(100vw - 24px)); height: 5cm; box-sizing: border-box; padding: 8px; border: 1px solid #d5dccd; border-radius: 10px; background: #f8f5ec; color: #354236; display: flex; flex-wrap: wrap; align-content: center; justify-content: center; gap: 6px; box-shadow: 0 5px 22px #23372926; }
.local-video-preview canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 4px; }
.local-video-preview small { width: 100%; text-align: center; font-size: 10px; }
.local-video-preview button { padding: 4px 6px; border: 1px solid #cbd2c1; border-radius: 5px; background: #e4e9dc; color: #354236; font-size: 10px; cursor: pointer; }
.layout-editor-dock { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 45; }
.layout-editor-tab { position: relative; width: 20px; height: 56px; padding: 0; border: 1px solid #d9ddcf; border-right: 0; border-radius: 8px 0 0 8px; background: #f8f5ec; color: #354236; font: 24px Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
.layout-editor-dock.is-open .layout-editor-tab { transform: translateX(-108px); }
.layout-editor-dock #layout-editor { position: absolute; top: 50%; bottom: auto; left: auto; right: 0; transform: translateY(-50%); width: min(108px, calc(100vw - 44px)); height: calc(100dvh - 32px); max-height: calc(100dvh - 32px); box-sizing: border-box; visibility: hidden; opacity: 0; pointer-events: none; }
.layout-editor-dock.is-open #layout-editor { visibility: visible; opacity: 1; pointer-events: auto; }
.layout-editor-dock #layout-editor .layout-editor-actions { grid-template-columns: 1fr; }
.layout-editor-dock #layout-editor .layout-editor-header { flex-direction: column; align-items: stretch; gap: 8px; }
.layout-editor-dock #layout-editor .layout-editor-header-actions { justify-content: space-between; }
.layout-editor-dock #layout-editor .layout-editor-help { margin: 12px 0; line-height: 1.5; }
.layout-editor-dock #layout-editor .layout-editor-actions { gap: 10px; margin-top: 48px; }
.layout-editor-dock #layout-editor .layout-editor-actions > * { aspect-ratio: 1; min-height: 0; height: auto; white-space: normal; border-radius: 4px; }
.layout-editor-dock #layout-editor .layout-picture-selection { flex-direction: column; align-items: flex-start; }
.layout-editor-dock #layout-editor .layout-picture-buttons { display: flex; flex-direction: column; }
.layout-editor-dock #layout-editor .layout-editor-status { margin-top: 16px; line-height: 1.5; }
.layout-editor-dock #layout-editor .layout-editor-header > strong,
.layout-editor-dock #layout-editor .layout-editor-help,
.layout-editor-dock #layout-editor .layout-picture-details > strong,
.layout-editor-dock #layout-editor .layout-editor-status:not([data-state="error"]) { display: none; }
@media (max-width: 768px) {
    .layout-editor-tab::before { content: ""; position: absolute; top: -6px; bottom: -6px; left: -24px; right: 0; }
    .layout-editor-dock.is-open .layout-editor-tab { transform: translateX(-54px); }
    .layout-editor-dock #layout-editor { width: 54px; height: auto; max-height: min(calc(100dvh - 16px), 400px); padding: 4px; border-radius: 8px 0 0 8px; }
    .layout-editor-dock #layout-editor .layout-editor-header-actions { flex-direction: column; align-items: center; gap: 4px; }
    .layout-editor-dock #layout-editor .layout-editor-toggle { width: 44px; padding: 4px 1px; font-size: 9px; }
    .layout-editor-dock #layout-editor .layout-editor-actions { margin-top: 8px; gap: 6px; }
    .layout-editor-dock #layout-editor .layout-editor-actions > * { padding: 3px 1px; font-size: 8px; line-height: 1.3; overflow-wrap: anywhere; }
    .layout-editor-dock #layout-editor .layout-picture-selection { padding: 3px; }
    .layout-editor-dock #layout-editor .layout-picture-buttons button { width: 100%; padding: 4px 1px; font-size: 8px; overflow-wrap: anywhere; }
    .layout-editor-dock #layout-editor .layout-editor-status { font-size: 9px; overflow-wrap: anywhere; }
}