#galleryModal { --pe-accent:#e5c586; --pe-ink:#f4f4f6; --pe-muted:#c0c3cc; --pe-surface:#22252e; --pe-field:#11141b; }
#galleryModal[data-category="movie"] { --pe-accent:#ffb7bb; }
#galleryModal[data-category="series"] { --pe-accent:#a8d5ff; }
#galleryModal[data-category="anime"] { --pe-accent:#ffbd8a; }
#galleryModal[data-category="game"] { --pe-accent:#a8d8f0; }
#galleryModal[data-category="cartoon"] { --pe-accent:#ffdf75; }
#galleryModal[data-category="music"] { --pe-accent:#8be3a7; }
#galleryModal[data-category="characters"] { --pe-accent:#d7bbff; }
#galleryModal[data-category="rolemodels"] { --pe-accent:#ffb9d2; }
#galleryModal[data-category="book"], #galleryModal[data-category="food"] { --pe-accent:#f1cf99; }
#galleryModal[data-category="travel"] { --pe-accent:#96ddd9; }
#galleryModal .modal-content { overflow-x:hidden; }
#galleryModal .modal-close, #galleryModal #modalBackBtn { z-index:14; }
.pe-actions { position:sticky; top:0; z-index:12; display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:14px 100px 14px 18px; background:#161922; border-bottom:1px solid #4b4e58; }
#galleryModal button.pe-btn, #galleryModal .pe-btn { min-height:44px; padding:10px 14px; border:1px solid #737886; border-radius:8px; background:#292d38; color:var(--pe-ink); font:600 14px/1.35 Sarabun,sans-serif; cursor:pointer; }
#galleryModal .pe-btn.pe-primary { background:var(--pe-accent); border-color:var(--pe-accent); color:#171922; }
#galleryModal .pe-btn.pe-danger { color:#ffb9bc; border-color:#bc6e76; background:#40232a; }
#galleryModal .pe-btn:hover { filter:brightness(1.12); }
#galleryModal :is(button,input,select,textarea,[contenteditable]):focus-visible { outline:3px solid var(--pe-accent); outline-offset:3px; }
#galleryModal button:disabled { cursor:wait; opacity:.65; }
.pe-tools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:0 0 18px; padding:14px; background:var(--pe-surface); border-radius:10px; }
.pe-tools h3 { flex-basis:100%; margin:0 0 4px; color:var(--pe-accent); font:500 18px Mitr,sans-serif; }
#galleryModal .pe-builder { display:block; margin:0 0 18px; border:1px solid #707580; border-radius:10px; background:var(--pe-surface); color:var(--pe-ink); }
.pe-builder summary { display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:48px; padding:10px 16px; cursor:pointer; list-style:none; color:var(--pe-accent); font:500 18px Mitr,sans-serif; }
.pe-builder summary::-webkit-details-marker { display:none; }
.pe-builder summary:focus-visible { outline:3px solid var(--pe-accent); outline-offset:3px; }
.pe-disclosure { font:600 24px Sarabun,sans-serif; transition:transform .18s ease-out; }
.pe-builder[open] .pe-disclosure { transform:rotate(180deg); }
.pe-tool-list { display:flex; flex-wrap:wrap; gap:8px; padding:0 16px 16px; }
.pe-optional-cover { border-top:1px solid #707580; margin-top:12px; }
.pe-optional-cover summary { display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px; color:var(--pe-ink); cursor:pointer; font:600 15px Sarabun,sans-serif; }
.pe-optional-cover summary span { color:var(--pe-muted); font-weight:400; font-size:14px; }
.pe-optional-cover summary:focus-visible { outline:3px solid var(--pe-accent); outline-offset:3px; }
@media(max-width:600px) { .pe-tool-list .pe-btn { flex:1 1 160px; text-align:left; } }
#galleryModal .pe-btn[aria-expanded="true"] { border-color:var(--pe-accent); background:#3b414d; }
#galleryModal .pe-subcard { min-width:0; align-self:start; }
#galleryModal .pe-subcard-title { color:#fff; margin:0 0 4px; font-size:.95em; line-height:1.5; white-space:normal; overflow-wrap:anywhere; }
.pe-panel { margin:0 0 20px; padding:20px; background:var(--pe-surface); border-radius:10px; color:var(--pe-ink); animation:pe-open .18s ease-out; }
.pe-panel h3, .pe-edit-zone { margin:0 0 16px; color:var(--pe-accent); font:500 20px Mitr,sans-serif; }
.pe-fields { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; }
.pe-field { display:flex; flex-direction:column; gap:7px; min-width:0; color:var(--pe-muted); font-size:14px; }
#galleryModal .pe-field :is(input,select,textarea), .pe-search { box-sizing:border-box; min-height:44px; width:100%; border:1px solid #737886; border-radius:8px; padding:10px 12px; background:var(--pe-field); color:var(--pe-ink); font:16px Sarabun,sans-serif; color-scheme:dark; }
#galleryModal input::placeholder, #galleryModal textarea::placeholder { color:#b9bdc7; opacity:1; }
.pe-wide { grid-column:1/-1; }
.pe-help { color:var(--pe-muted); font-size:14px; line-height:1.65; margin:8px 0 16px; }
.pe-footer { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; margin-top:18px; }
.pe-cover-preview { display:block; width:100%; max-height:180px; object-fit:contain; margin:12px 0; background:#10131a; }
.pe-drop { padding:18px; border:1px dashed #a3a9b8; border-radius:8px; text-align:center; cursor:pointer; }
.pe-drop:focus { border-color:var(--pe-accent); }
.pe-results { max-height:250px; overflow:auto; display:flex; flex-direction:column; gap:8px; margin-top:12px; }
.pe-result { text-align:left; display:flex; gap:10px; align-items:center; width:100%; }
.pe-result img { width:42px; height:52px; object-fit:cover; border-radius:4px; }
.pe-result small { display:block; color:var(--pe-muted); margin-top:4px; }
#galleryModal [contenteditable="true"] { outline:1px solid #737886; border-radius:8px; padding:12px; background:var(--pe-field); min-height:52px; }
.pe-write-status { color:var(--pe-muted); font-size:14px; }
.pe-notice { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:10001; max-width:calc(100vw - 32px); box-sizing:border-box; padding:14px 18px; background:#22252e; border:1px solid #737886; border-radius:10px; color:#fff; display:flex; align-items:center; flex-wrap:wrap; gap:12px; font:15px Sarabun,sans-serif; }
.pe-notice button { padding:9px 12px; background:#e5c586; color:#171922; border:0; border-radius:6px; min-height:44px; cursor:pointer; font-weight:700; }
.pe-rating-label { display:inline-block; padding:4px 8px; border-radius:5px; font-size:13px; background:#262932; color:#e0e2e8; }
.pe-rating-label.is-bad, .rate-0 { background:#49252d; color:#ffb8be; }
.rate-unrated { background:#292d37; color:#cbd0da; }
@keyframes pe-open { from { transform:translateY(-5px); opacity:.7; } to { transform:none; opacity:1; } }
@media(max-width:600px) { .pe-actions { padding:12px 82px 12px 12px; gap:6px; } #galleryModal .pe-actions .pe-btn { flex:1 1 150px; } .pe-fields { grid-template-columns:1fr; } .pe-panel { padding:15px; } .pe-tools .pe-btn { flex:1 1 130px; } #galleryModal .modal-body { padding:20px 16px; } }
@media(prefers-reduced-motion:reduce) { .pe-panel { animation:none; } .pe-disclosure { transition:none; } }

#galleryModal .rating-badge.rate-5 { background:#513d19; color:#ffe6a6; }
#galleryModal .rating-badge.rate-4 { background:#214536; color:#baf0d2; }
#galleryModal .rating-badge.rate-3 { background:#213f59; color:#c4e3ff; }
#galleryModal .rating-badge.rate-2 { background:#494226; color:#f1e5ae; }
#galleryModal .rating-badge.rate-1 { background:#49404c; color:#ead7ed; }
#galleryModal #modalSubMedia button { border-color:#707580 !important; }
#galleryModal .pe-tools, #galleryModal .pe-panel { border:1px solid #707580; }

#galleryModal [contenteditable="true"] { border:1px solid #737886; outline:none; color:var(--pe-ink); }
#galleryModal .pe-cover-preview[hidden] { display:none; }

body:not(.admin-mode) #galleryModal .pcms-admin-only { display:none !important; }
body.admin-mode #galleryModal :is(.pe-actions,.pe-tools) { display:flex; }

/* Personal detail: a dark media reader, with management in quiet navigation. */
#galleryModal { --pd-bg:#181b21; --pd-ink:#f0f1f4; --pd-muted:#b4bac5; --pd-line:#414751; --pe-accent:#b5c5d9; padding:24px; }
#galleryModal .modal-content { max-width:1040px; max-height:calc(100dvh - 48px); border:1px solid #555e6b; border-radius:14px; background:var(--pd-bg); color:var(--pd-ink); box-shadow:none; scrollbar-color:#606976 var(--pd-bg); }
#galleryModal .pe-nav { position:sticky; top:0; z-index:14; display:flex; align-items:center; gap:12px; min-height:66px; padding:10px 24px; box-sizing:border-box; background:#20242c; border-bottom:1px solid #434a55; }
#galleryModal .pe-breadcrumb { flex:1; min-width:0; color:#bbc2cd; font:500 14px/1.4 Sarabun,sans-serif; }
#galleryModal .pe-nav :is(.modal-close,#modalBackBtn) { position:static; display:flex; align-items:center; justify-content:center; flex-shrink:0; min-width:44px; min-height:44px; width:auto; height:auto; padding:0 10px; border:1px solid #5a6575; border-radius:7px; background:transparent; color:#e9ecf2; cursor:pointer; font:500 24px/1 Sarabun,sans-serif; }
#galleryModal #modalBackBtn { gap:7px; }
#galleryModal #modalBackBtn span { font:500 14px/1 Sarabun,sans-serif; }
#galleryModal .modal-body { padding:32px 36px 38px; }
#galleryModal .pe-hero { display:grid; grid-template-columns:240px minmax(0,1fr); align-items:center; gap:36px; margin-bottom:30px; }
#galleryModal .modal-cover { width:100%; height:360px; border-radius:9px; background:#111319 !important; overflow:hidden; }
#galleryModal .modal-cover img { width:100%; height:100%; object-fit:contain !important; }
#galleryModal .modal-cover:not(:has(img)) { display:flex !important; align-items:center; justify-content:center; color:#e9ecf2; }
#galleryModal .modal-cover[style*="display: none"] { display:none !important; }
#galleryModal .pe-hero:has(.modal-cover[style*="display: none"]) { grid-template-columns:1fr; }
#galleryModal .pe-hero[data-cover-shape="wide"] { grid-template-columns:1fr; gap:24px; }
#galleryModal .pe-hero[data-cover-shape="wide"] .modal-cover { height:300px; }
#galleryModal .modal-tag { display:inline-flex; background:#2a303a; color:#d4dae4; border:1px solid #5a6575; font:500 13px/1.4 Sarabun,sans-serif; letter-spacing:.02em; padding:5px 9px; border-radius:4px; margin:0 0 18px; }
#galleryModal .modal-title { color:var(--pd-ink); font:500 clamp(26px,3vw,36px)/1.4 Mitr,sans-serif; letter-spacing:-.02em; text-wrap:balance; overflow-wrap:anywhere; margin:0 0 20px; }
#galleryModal #modalMeta { display:flex; flex-wrap:wrap; gap:8px; margin:0; }
#galleryModal #modalMeta .rating-badge { position:static; font:600 13px/1.5 Sarabun,sans-serif; padding:5px 10px; border-radius:5px; }
#galleryModal #modalMeta > span:not(.rating-badge) { background:#2b313c !important; color:#d4dae4 !important; border:1px solid #596578; }
#galleryModal .pe-actions, body.admin-mode #galleryModal .pe-actions { position:static; display:flex; flex-wrap:nowrap; gap:8px; padding:0; margin:0; background:transparent; border:0; }
#galleryModal button.pe-btn, #galleryModal .pe-btn { min-height:44px; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 13px; border:1px solid #667488; border-radius:7px; background:#2b323d; color:#e9edf4; font:500 14px/1.4 Sarabun,sans-serif; box-shadow:none; }
#galleryModal .pe-btn.pe-primary { background:#354458; border-color:#7d91ab; color:#f7f8fb; }
#galleryModal .pe-btn.pe-pinned { background:rgba(201,168,76,0.18); color:#e5c586; border-color:rgba(201,168,76,0.45); }
#galleryModal .pe-btn.pe-pinned:hover { background:rgba(201,168,76,0.28); border-color:#e5c586; }
#galleryModal .pe-btn.pe-danger { background:#3f2830; color:#ffccd1; border-color:#aa6875; }
#galleryModal .pe-btn:hover { background:#3c4655; filter:none; }
#galleryModal .pe-btn[aria-expanded="true"] { background:#3d4a5d; border-color:#9bb0ce; }
#galleryModal .pe-builder { position:relative; flex:0 0 auto; margin:0; border:0; border-radius:0; background:transparent; color:var(--pd-ink); }
#galleryModal .pe-builder summary { display:flex; align-items:center; justify-content:center; gap:7px; min-height:44px; padding:10px 12px; box-sizing:border-box; border:1px solid #647183; border-radius:7px; background:transparent; color:#d8dee8; font:500 14px/1.4 Sarabun,sans-serif; }
#galleryModal .pe-disclosure { flex-shrink:0; transition:transform .18s ease-out; }
#galleryModal .pe-builder[open] summary { background:#303947; border-color:#91a2ba; }
#galleryModal .pe-builder[open] .pe-disclosure { transform:rotate(180deg); }
#galleryModal .pe-tool-list { position:absolute; top:calc(100% + 10px); right:0; z-index:2; box-sizing:border-box; width:230px; display:flex; flex-direction:column; gap:2px; margin:0; padding:7px; border:1px solid #6c798d; border-radius:9px; background:#272e38; box-shadow:0 6px 12px #0006; }
#galleryModal .pe-tool-list .pe-btn { flex:0 0 auto; box-sizing:border-box; width:100%; justify-content:flex-start; border:0; border-radius:4px; background:transparent; color:#eef1f7; padding:10px 12px; }
#galleryModal .pe-tool-list .pe-btn:hover { background:#3c4657; }
#galleryModal .modal-text:not([contenteditable="true"]) { font:400 17px/1.85 Sarabun,sans-serif; color:#dce1e9; overflow-wrap:anywhere; }
#galleryModal .modal-text:not([contenteditable="true"]):empty { display:none; }
#galleryModal .modal-text :is(h2,h3,h4) { color:var(--pd-ink); font-family:Mitr,sans-serif; }
#galleryModal .modal-text a:not(.yt-embed-link) { color:#b3d3ff; text-decoration:underline; text-underline-offset:3px; }
#galleryModal .modal-text :is(img,iframe,video) { max-width:100%; }
#galleryModal .modal-text .cms-linked-card button { background:#252d39 !important; border-color:#59667b !important; }
#galleryModal .modal-text .cms-linked-card button > div:last-child > div { color:#e2e8f2 !important; }
#galleryModal :is(.pe-panel h3,.pe-tools h3,.pe-edit-zone) { color:#e0e7f2; }
#galleryModal .pe-panel, #galleryModal .pe-tools { border-color:#586779; background:#232a35; }
#galleryModal .pe-field :is(input,select,textarea), #galleryModal .pe-search, #galleryModal [contenteditable="true"] { border-color:#667488; background:#111720; color:#e9edf4; }
#galleryModal #modalSubMedia:empty { display:none; }
#galleryModal #modalSubMedia { margin-top:30px; padding-top:24px; border-top:1px solid #46505e; }
#galleryModal .pe-subcards-heading { display:flex; align-items:center; flex-wrap:wrap; justify-content:space-between; gap:14px; margin-bottom:18px; }
#galleryModal .pe-subcards-heading h3 { margin:0; color:#e9edf4; font:500 21px/1.4 Mitr,sans-serif; }
#galleryModal .pe-child-count { display:inline-block; margin-left:8px; color:var(--pd-muted); font:400 14px/1.5 Sarabun,sans-serif; }
#galleryModal .pe-subcards-heading .pe-btn { background:transparent; border-color:#67758a; color:#cbd6e6; }
#galleryModal .pe-subcards-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 18px; }
#galleryModal #modalSubMedia .pe-subcard { display:flex; align-items:center; gap:14px; width:100%; min-height:110px; min-width:0; padding:12px; text-align:left; font:inherit; border:1px solid #6d7a90 !important; border-radius:8px; background:#232a35; color:#e9edf4; cursor:pointer; transition:background .18s ease-out; }
#galleryModal .pe-subcard:hover { background:#303b4c !important; }
#galleryModal .pe-subcard-image { flex:0 0 60px; width:60px; height:84px; border-radius:4px; overflow:hidden; background:#121923; display:flex; align-items:center; justify-content:center; font-size:26px; }
#galleryModal .pe-subcard-image img { width:100%; height:100%; object-fit:cover; }
#galleryModal .pe-subcard-info { flex:1; min-width:0; }
#galleryModal .pe-subcard-title { display:block; color:#e9edf4; font:500 15px/1.55 Mitr,sans-serif; margin:0 0 8px; overflow-wrap:anywhere; white-space:normal; }
#galleryModal .pe-subcard-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; color:#bec7d5; font:400 13px/1.5 Sarabun,sans-serif; }
#galleryModal .pe-subcard-meta .rating-badge { position:static; font:600 12px/1.4 Sarabun,sans-serif; padding:4px 7px; border-radius:4px; }
#galleryModal .pe-subcard-arrow { flex:0 0 16px; font-size:20px; color:#b6c8df; }
#galleryModal .pe-subcards-empty { margin:0; padding:18px 0 4px; color:#d5dce8; font:400 16px/1.5 Sarabun,sans-serif; }
#galleryModal .pe-subcards-empty span { display:block; color:#b5bdcb; font-size:14px; margin-top:5px; }
#galleryModal :is(button,summary,input,select,textarea,[contenteditable]):focus-visible { outline:2px solid #bed3ee; outline-offset:3px; }
@media(min-width:1900px) { #galleryModal .modal-content { max-width:1120px; } }
@media(max-width:600px) {
 #galleryModal { padding:8px; }
 #galleryModal .modal-content { max-height:calc(100dvh - 16px); border-radius:10px; }
 #galleryModal .pe-nav { padding:8px 12px; gap:8px; min-height:60px; }
 #galleryModal .pe-breadcrumb { font-size:12px; }
 #galleryModal .pe-actions .pe-btn { flex:0 0 auto; padding:9px 10px; font-size:13px; }
 #galleryModal .pe-builder summary { padding:9px 10px; font-size:13px; gap:5px; }
 #galleryModal .pe-nav:has(#modalBackBtn[style*="flex"]) .pe-breadcrumb, #galleryModal .pe-nav:has(.is-editing) .pe-breadcrumb { display:none; }
 #galleryModal .modal-body { padding:24px 20px 28px; }
 #galleryModal .pe-hero { grid-template-columns:100px minmax(0,1fr); gap:18px; align-items:start; margin-bottom:24px; }
 #galleryModal .modal-cover { height:150px; border-radius:5px; }
 #galleryModal .modal-tag { margin-bottom:10px; font-size:12px; padding:4px 7px; }
 #galleryModal .modal-title { font-size:21px; margin-bottom:14px; line-height:1.5; text-wrap:pretty; }
 #galleryModal .pe-hero[data-cover-shape="wide"] .modal-cover { height:200px; }
 #galleryModal .pe-subcards-list { grid-template-columns:1fr; }
 #galleryModal .pe-subcards-heading h3 { font-size:19px; }
 #galleryModal .pe-subcards-heading .pe-btn { font-size:13px; padding:9px 10px; }
 #galleryModal .modal-text:not([contenteditable="true"]) { font-size:16px; }
}
@media(max-width:360px) { #galleryModal .pe-breadcrumb { display:none; } #galleryModal .pe-nav { justify-content:flex-end; } #galleryModal .pe-hero { grid-template-columns:82px minmax(0,1fr); gap:14px; } #galleryModal .modal-cover { height:123px; } #galleryModal .modal-title { font-size:20px; } }
@media(prefers-reduced-motion:reduce) { #galleryModal, #galleryModal .modal-content, #galleryModal .pe-subcard, #galleryModal .pe-disclosure { transition:none; } }

@media(max-width:600px) {
 #galleryModal .pe-actions.is-editing .pe-builder summary { width:44px; padding:10px; }
 #galleryModal .pe-actions.is-editing .pe-builder summary > span, #galleryModal .pe-actions.is-editing .pe-disclosure { display:none; }
}
@media(max-width:360px) {
 #galleryModal .pe-nav { gap:6px; padding-inline:8px; }
 #galleryModal #modalBackBtn span { display:none; }
 #galleryModal .pe-builder summary > svg:first-child { display:none; }
 #galleryModal .pe-actions.is-editing .pe-builder summary > svg:first-child { display:block; }
}

#galleryModal #modalRelations:not(:empty){margin-top:30px;padding-top:24px;border-top:1px solid #46505e}
#galleryModal .pr-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
#galleryModal .pr-item{min-width:0;border:1px solid #6d7a90;border-radius:8px;background:#232a35}
#galleryModal .pr-card{display:flex;align-items:center;gap:14px;width:100%;min-height:104px;padding:12px;background:transparent;border:0;color:#e9edf4;text-align:left;cursor:pointer;box-sizing:border-box}
#galleryModal .pr-card>img,#galleryModal .pr-card>span:first-child{width:54px;height:72px;object-fit:cover;border-radius:4px;flex-shrink:0}
#galleryModal .pr-card>span:not(.pr-art){min-width:0;flex:1}#galleryModal .pr-card>.pr-art{flex:0 0 54px;display:grid;place-items:center;background:#151b25}#galleryModal .pr-card :is(small,strong,em){display:block;overflow-wrap:anywhere}
#galleryModal .pr-card small{color:#bfcee4;font:400 14px/1.5 Sarabun,sans-serif}#galleryModal .pr-card strong{font:500 16px/1.5 Mitr,sans-serif;margin:4px 0}#galleryModal .pr-card em{font:400 13px/1.5 Sarabun,sans-serif;color:#bbc4d1}
#galleryModal .pr-remove{margin:0 12px 12px;min-height:44px;font-size:13px}#galleryModal .pe-tool-list-inline{display:flex;gap:8px;flex-wrap:wrap}#galleryModal .pr-error{color:#f3b8b8}
@media(max-width:600px){#galleryModal .pr-list{grid-template-columns:1fr}}

#galleryModal .pr-summary{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}#galleryModal .pr-summary-link{min-height:44px;padding:8px 10px;border:1px solid #65738a;border-radius:6px;background:transparent;color:#d1dced;font:400 13px/1.5 Sarabun,sans-serif;text-align:left;overflow-wrap:anywhere;cursor:pointer}