/* ============ 格線編輯器（後台） ============ */
.a-msg.info { background: #eef4fb; color: #1f4e79; line-height: 1.7; }
.ge { display: grid; grid-template-columns: 250px minmax(0, 1fr) 330px; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.ge-top { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; padding: 7px 12px; background: #fff; border-bottom: 1px solid var(--a-line); flex-wrap: wrap; }
.ge-top select#ge-page { font-weight: 700; max-width: 240px; }
.ge-top .sp { flex: 1; }
.ge-dirty { font-size: 12px; color: var(--a-green); } .ge-dirty.on { color: #b36b00; font-weight: 700; }
.ge-status { font-size: 12px; color: var(--a-sub); }
.seg { display: inline-flex; border: 1px solid var(--a-line); border-radius: 6px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 5px 11px; cursor: pointer; font: inherit; font-size: 13px; } .seg button.on { background: #22201d; color: #fff; }
.ge-left, .ge-right { background: #fff; min-height: 0; overflow: auto; }
.ge-left { border-right: 1px solid var(--a-line); display: flex; flex-direction: column; }
.ge-right { border-left: 1px solid var(--a-line); }
.ge-canvas { position: relative; min-height: 0; overflow: auto; background: #2b2926; padding: 44px 26px 80px; }
.ge-scaler { position: relative; margin: 0 auto; }
.ge-frame { position: absolute; top: 0; left: 0; transform-origin: 0 0; box-shadow: 0 20px 60px rgba(0, 0, 0, .45); }
.ge-frame.mobile { width: 390px; border-radius: 22px; box-shadow: 0 0 0 10px #111, 0 0 0 11px #555, 0 30px 70px rgba(0, 0, 0, .6); }
.ge-frame.mobile .ge-page { border-radius: 20px; }
.ge-mhint { position: sticky; bottom: -60px; margin: 18px auto 0; max-width: 520px; background: #22201d; color: #f1d9a8; border: 1px dashed #d9a441; border-radius: 10px; padding: 8px 14px; font-size: 13px; text-align: center; }
.ge-endadd { background: #1a1816; padding: 18px; text-align: center; }
.ge-endadd .a-btn { background: transparent; color: #e8c77a; border: 1px dashed #e8c77a; }

/* 畫布內：選取、拖曳、格線、工具列 */
.ge-page { position: relative; }
.ge-page .sec { overflow: visible; }
.ge-page .sec-bgimg { inset: 0; }
.ge-page .sec-grain { inset: 0; animation: none; }
.ge-page .sec.div-slant { clip-path: none; margin-top: 0; }
.ge-page .sec.full-h { min-height: calc(100vh - 150px); }
.ge-page iframe { pointer-events: none; }
.ge-page .blk { cursor: grab; outline: 1px dashed transparent; outline-offset: 2px; transition: outline-color .15s; }
.ge-page .blk:hover { outline-color: rgba(232, 199, 122, .6); }
.ge-page .blk.ge-bsel { outline: 2px solid #e8c77a; z-index: 50 !important; }
.ge-page .blk.ge-dragging { cursor: grabbing; opacity: .88; z-index: 80 !important; outline-style: dashed; }
.ge-page .blk a { cursor: inherit; }
.ge-h { position: absolute; width: 12px; height: 12px; background: #fff; border: 2px solid #c9a24f; border-radius: 3px; z-index: 60; }
.ge-h-n { top: -8px; left: 50%; margin-left: -6px; cursor: ns-resize; } .ge-h-s { bottom: -8px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.ge-h-e { right: -8px; top: 50%; margin-top: -6px; cursor: ew-resize; } .ge-h-w { left: -8px; top: 50%; margin-top: -6px; cursor: ew-resize; }
.ge-h-ne { right: -8px; top: -8px; cursor: nesw-resize; } .ge-h-sw { left: -8px; bottom: -8px; cursor: nesw-resize; }
.ge-h-nw { left: -8px; top: -8px; cursor: nwse-resize; } .ge-h-se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.ge-btb { position: absolute; bottom: calc(100% + 10px); left: -2px; z-index: 62; display: flex; align-items: center; gap: 2px; padding: 3px; background: #22201d; border: 1px solid #c9a24f; border-radius: 7px; white-space: nowrap; font: 12px/1 "Microsoft JhengHei", system-ui, sans-serif; box-shadow: 0 6px 18px rgba(0, 0, 0, .4); cursor: default; }
.ge-btb b { color: #e8c77a; padding: 0 8px; font-weight: 700; }
.ge-btb button { border: 0; background: #34302b; color: #fff; padding: 6px 9px; border-radius: 5px; cursor: pointer; font: inherit; }
.ge-btb button:hover { background: #e8c77a; color: #1a140a; }
.ge-cols { grid-column: 1 / -1; grid-row: 1 / -1; display: none; grid-template-columns: repeat(24, minmax(0, 1fr)); column-gap: inherit; pointer-events: none; z-index: 0;
  background-image: repeating-linear-gradient(180deg, transparent 0 calc(var(--row) - 1px), rgba(232, 199, 122, .14) calc(var(--row) - 1px) var(--row)); }
.ge-cols i { background: rgba(232, 199, 122, .06); box-shadow: inset 1px 0 rgba(232, 199, 122, .22), inset -1px 0 rgba(232, 199, 122, .22); }
.ge-grid-on .ge-cols, .ge-ssel .ge-cols { display: grid; }
@container pg (max-width: 767px) { .ge-cols { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.ge-ssel { outline: 2px solid #5ca0ff; outline-offset: -2px; }
.ge-drop { outline: 3px dashed #5ca0ff; outline-offset: -3px; }
.ge-sbar { position: absolute; top: 8px; left: 8px; z-index: 40; display: none; align-items: center; gap: 2px; padding: 3px; background: rgba(34, 32, 29, .94); border: 1px solid #5ca0ff; border-radius: 7px; font: 12px/1 "Microsoft JhengHei", system-ui, sans-serif; cursor: default; }
.ge-sbar b { color: #9cc4ff; padding: 0 8px; }
.ge-sbar button { border: 0; background: #34302b; color: #fff; padding: 6px 8px; border-radius: 5px; cursor: pointer; font: inherit; }
.ge-sbar button:hover { background: #5ca0ff; }
.sec:hover > .ge-sbar, .ge-ssel > .ge-sbar { display: flex; }
.ge-sres { position: absolute; bottom: 0; left: 50%; transform: translate(-50%, 50%); z-index: 41; display: none; cursor: ns-resize; background: #22201d; color: #9cc4ff; font: 11px/1 "Microsoft JhengHei", sans-serif; padding: 5px 12px; border-radius: 12px; border: 1px solid #5ca0ff; user-select: none; }
.sec:hover > .ge-sres, .ge-ssel > .ge-sres { display: block; }
.ge-addsec { position: relative; z-index: 45; height: 0; display: flex; justify-content: center; }
.ge-addsec button { position: absolute; top: -13px; height: 26px; padding: 0 14px; border-radius: 13px; border: 1px dashed #e8c77a; background: #22201d; color: #e8c77a; font: 12px "Microsoft JhengHei", sans-serif; cursor: pointer; opacity: 0; transition: opacity .2s; }
.ge-addsec:hover button, .ge-addsec button:focus { opacity: 1; }
.ge-addsec::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 28px; }
.ge-ghost { background: rgba(232, 199, 122, .22); border: 2px dashed #e8c77a; z-index: 70; pointer-events: none; border-radius: 4px; }
.ge-editing { outline: 2px solid #5ca0ff !important; outline-offset: 3px; cursor: text; background: rgba(92, 160, 255, .08); }
.ge-rtb { position: fixed; z-index: 200; display: flex; gap: 2px; padding: 3px; background: #22201d; border: 1px solid #5ca0ff; border-radius: 7px; font: 13px "Microsoft JhengHei", sans-serif; box-shadow: 0 8px 22px rgba(0, 0, 0, .4); }
.ge-rtb button { border: 0; background: #34302b; color: #fff; padding: 6px 10px; border-radius: 5px; cursor: pointer; } .ge-rtb button:hover { background: #5ca0ff; } .ge-rtb .done { background: #5ca0ff; }
#ge-tip { position: fixed; z-index: 300; background: #22201d; color: #fff; font: 12px "Microsoft JhengHei", sans-serif; padding: 4px 8px; border-radius: 5px; pointer-events: none; }

/* 右側面板 */
.bp { display: flex; flex-direction: column; min-height: 100%; }
.bp-h { display: flex; justify-content: space-between; align-items: center; padding: 12px 14px; border-bottom: 1px solid var(--a-line); font-size: 15px; }
.bp-tabs { display: flex; border-bottom: 1px solid var(--a-line); position: sticky; top: 0; background: #fff; z-index: 2; }
.bp-tabs button { flex: 1; padding: 9px 0; border: 0; background: none; cursor: pointer; font: inherit; color: var(--a-sub); border-bottom: 2px solid transparent; }
.bp-tabs button.on { color: var(--a-ink); font-weight: 700; border-bottom-color: #c9a24f; }
.bp-body { padding: 12px 14px; flex: 1; }
.bp-body h4 { margin: 18px 0 8px; font-size: 13px; color: #3c3a36; border-top: 1px solid #f0ede8; padding-top: 12px; }
.bp-body h4:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.bp-foot { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--a-line); position: sticky; bottom: 0; background: #fff; }
.pf { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pf > label, .pf > span { font-size: 12px; color: #4a4640; font-weight: 700; }
.pf small { color: var(--a-sub); font-size: 11px; line-height: 1.5; }
.pf input:not([type=range]):not([type=checkbox]):not([type=color]), .pf select, .pf textarea { width: 100%; }
.tip { color: var(--a-sub); font-size: 12px; line-height: 1.6; margin: 0 0 10px; }
.rg { display: flex; align-items: center; gap: 6px; } .rg input[type=range] { flex: 1; accent-color: #c9a24f; } .rg input[type=number] { width: 64px !important; flex: none; } .rg span { font-size: 11px; color: var(--a-sub); min-width: 26px; }
.sw { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.sw button { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #ccc; cursor: pointer; font-size: 11px; color: #999; background: #fff; }
.sw button.on { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #c9a24f; }
.sw input[type=color] { width: 30px; height: 26px; padding: 0; border: 1px solid #ccc; border-radius: 5px; }
.seg3 { display: flex; flex-wrap: wrap; gap: 4px; } .seg3.full { margin: 6px 0; }
.seg3 button { flex: 1; min-width: 50px; padding: 6px; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; cursor: pointer; font: inherit; font-size: 12px; }
.seg3 button:hover { border-color: #c9a24f; } .seg3 button.on { background: #22201d; color: #fff; border-color: #22201d; }
.adm label.chk { margin: 6px 0; line-height: 1.5; font-size: 12.5px; align-items: flex-start; } .adm label.chk input { margin-top: 3px; }
.imgprev { background: #f4f2ee; border-radius: 6px; min-height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; overflow: hidden; font-size: 12px; color: var(--a-sub); }
.imgprev img { max-width: 100%; max-height: 150px; display: block; } .imgprev.small img { max-height: 90px; }
.animgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.animgrid button { text-align: left; padding: 8px 10px; border: 1px solid var(--a-line); border-radius: 8px; background: #fff; cursor: pointer; font: inherit; }
.animgrid button b { display: block; font-size: 13px; } .animgrid button small { color: var(--a-sub); font-size: 11px; }
.animgrid button.on { border-color: #c9a24f; background: #fff8e8; box-shadow: inset 0 0 0 1px #c9a24f; }
.icogrid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.icogrid button { aspect-ratio: 1; border: 1px solid var(--a-line); border-radius: 6px; background: #fff; cursor: pointer; padding: 5px; color: #22201d; }
.icogrid button svg { width: 100%; height: 100%; } .icogrid button.on { background: #22201d; color: #e8c77a; }
.galed { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 8px; }
.galed div { position: relative; } .galed img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 4px; display: block; }
.galed span { position: absolute; left: 2px; right: 2px; bottom: 2px; display: flex; justify-content: space-between; }
.galed button { border: 0; background: rgba(0, 0, 0, .7); color: #fff; border-radius: 3px; cursor: pointer; font-size: 11px; padding: 2px 5px; }
.faqed > div { border: 1px solid var(--a-line); border-radius: 8px; padding: 8px; margin-bottom: 8px; display: flex; flex-direction: column; gap: 5px; }
.faqed span { display: flex; gap: 4px; justify-content: flex-end; } .faqed button { border: 1px solid var(--a-line); background: #fff; border-radius: 4px; cursor: pointer; }
.posgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.gp { padding: 14px; } .gp h3 { font-size: 15px; margin: 14px 0 8px; } .gp h3:first-child { margin-top: 0; }
.guide { background: #fffaf0; border: 1px solid #f1d9a0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }
.guide ol { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.75; } .guide li { margin-bottom: 4px; }
.pal { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-bottom: 12px; }
.pal button { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--a-line); border-radius: 8px; background: #fff; cursor: grab; font: inherit; font-size: 12px; }
.pal button span { font-size: 20px; line-height: 1; color: #8a6d2f; } .pal button:hover { border-color: #c9a24f; background: #fffaf0; }
.gloss { margin-top: 10px; font-size: 12px; } .gloss summary { cursor: pointer; font-weight: 700; } .gloss dt { font-weight: 700; margin-top: 6px; } .gloss dd { margin: 2px 0 0; color: var(--a-sub); }

/* 對話框 */
.ge-modal { position: fixed; inset: 0; z-index: 250; background: rgba(0, 0, 0, .55); display: flex; align-items: center; justify-content: center; padding: 20px; font: 14px/1.5 "Microsoft JhengHei", system-ui, sans-serif; color: #22201d; }
.ge-mbox { position: relative; background: #fff; border-radius: 14px; padding: 22px; width: min(920px, 100%); max-height: 88vh; overflow: auto; box-shadow: 0 30px 80px rgba(0, 0, 0, .5); }
.ge-mbox h3 { margin: 0 0 8px; } .ge-mx { position: absolute; top: 12px; right: 12px; border: 0; background: #f0ede8; border-radius: 50%; width: 32px; height: 32px; cursor: pointer; }
.ge-mbox .pf input { padding: 7px 9px; border: 1px solid #cfcac2; border-radius: 6px; font: inherit; }
.ge-mbox .row-btns { display: flex; gap: 8px; margin-top: 8px; }
.ge-mbox .a-btn { display: inline-flex; align-items: center; padding: 7px 14px; border: 1px solid #e2dfda; border-radius: 6px; background: #fff; cursor: pointer; font: inherit; }
.ge-mbox .a-btn.primary { background: #2f5d8a; border-color: #2f5d8a; color: #fff; }
.tplgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tplgrid button { text-align: left; border: 1px solid #e2dfda; border-radius: 10px; background: #fff; padding: 10px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 4px; }
.tplgrid button:hover { border-color: #c9a24f; box-shadow: 0 6px 18px rgba(0, 0, 0, .1); } .tplgrid small { color: #6f6a63; }
.tplmock { position: relative; display: block; height: 92px; border-radius: 6px; background: #1a1816; overflow: hidden; margin-bottom: 4px; }
.tplmock i { position: absolute; background: #57514a; border-radius: 2px; }
.tpl-blank i { display: none; }
.tpl-hero { background: linear-gradient(#3a2d22, #1a1816); } .tpl-hero i:nth-child(1) { left: 20%; right: 20%; top: 26%; height: 14px; background: #f3efe8; } .tpl-hero i:nth-child(2) { left: 30%; right: 30%; top: 48%; height: 6px; } .tpl-hero i:nth-child(3) { left: 40%; right: 40%; top: 66%; height: 14px; background: #e8c77a; border-radius: 7px; } .tpl-hero i:nth-child(4) { display: none; }
.tpl-imgText i:nth-child(1) { left: 6%; width: 42%; top: 12%; bottom: 12%; background: #7b6a55; } .tpl-imgText i:nth-child(2) { left: 55%; right: 8%; top: 25%; height: 10px; background: #f3efe8; } .tpl-imgText i:nth-child(3) { left: 55%; right: 14%; top: 45%; height: 6px; } .tpl-imgText i:nth-child(4) { left: 55%; width: 22%; top: 65%; height: 10px; background: #e8c77a; border-radius: 5px; }
.tpl-themepart { background: linear-gradient(#2a211a, #1a1816); } .tpl-themepart i:nth-child(1) { left: 6%; width: 30%; top: 10%; bottom: 10%; background: #7b6a55; } .tpl-themepart i:nth-child(2) { left: 42%; right: 10%; top: 26%; height: 14px; background: #f3efe8; } .tpl-themepart i:nth-child(3) { left: 42%; right: 24%; top: 50%; height: 6px; background: #e8c77a; } .tpl-themepart i:nth-child(4) { left: 42%; width: 30%; top: 68%; height: 8px; }
.tpl-themerow i:nth-child(1) { left: 6%; width: 30%; top: 8%; bottom: 8%; background: #7b6a55; } .tpl-themerow i:nth-child(2) { left: 44%; right: 12%; top: 22%; height: 16px; background: #f3efe8; } .tpl-themerow i:nth-child(3) { left: 44%; right: 20%; top: 50%; height: 6px; } .tpl-themerow i:nth-child(4) { left: 44%; width: 22%; top: 70%; height: 10px; background: #e8c77a; border-radius: 5px; }
.tplh { margin: 14px 0 6px; font-size: 14px; color: #6f6a63; }
.tpl-textImg i:nth-child(1) { right: 6%; width: 42%; top: 12%; bottom: 12%; background: #7b6a55; } .tpl-textImg i:nth-child(2) { left: 8%; right: 55%; top: 25%; height: 10px; background: #f3efe8; } .tpl-textImg i:nth-child(3) { left: 8%; right: 60%; top: 45%; height: 6px; } .tpl-textImg i:nth-child(4) { display: none; }
.tpl-themes i { top: 18%; bottom: 14%; width: 19%; background: #6a4a3a; } .tpl-themes i:nth-child(1) { left: 4%; } .tpl-themes i:nth-child(2) { left: 28%; } .tpl-themes i:nth-child(3) { left: 52%; } .tpl-themes i:nth-child(4) { left: 76%; }
.tpl-cards i { top: 28%; bottom: 20%; width: 27%; border: 1px solid #8a7a60; background: transparent; } .tpl-cards i:nth-child(1) { left: 5%; } .tpl-cards i:nth-child(2) { left: 36%; } .tpl-cards i:nth-child(3) { left: 67%; } .tpl-cards i:nth-child(4) { display: none; }
.tpl-gallery i { top: 14%; bottom: 22%; width: 30%; background: #6f6356; } .tpl-gallery i:nth-child(1) { left: 2%; } .tpl-gallery i:nth-child(2) { left: 35%; } .tpl-gallery i:nth-child(3) { left: 68%; } .tpl-gallery i:nth-child(4) { left: 44%; width: 12%; top: auto; bottom: 8%; height: 5px; background: #e8c77a; }
.tpl-faq i { left: 40%; right: 6%; height: 8px; background: #57514a; } .tpl-faq i:nth-child(1) { top: 20%; } .tpl-faq i:nth-child(2) { top: 40%; } .tpl-faq i:nth-child(3) { top: 60%; } .tpl-faq i:nth-child(4) { left: 6%; right: auto; width: 26%; top: 20%; height: 12px; background: #f3efe8; }
.tpl-cta { background: linear-gradient(135deg, #2b1413, #1a1816); } .tpl-cta i:nth-child(1) { left: 25%; right: 25%; top: 30%; height: 12px; background: #f3efe8; } .tpl-cta i:nth-child(2) { left: 38%; right: 38%; top: 56%; height: 16px; background: #e8c77a; border-radius: 8px; } .tpl-cta i:nth-child(3), .tpl-cta i:nth-child(4) { display: none; }
.tpl-contact i:nth-child(1) { left: 6%; width: 38%; top: 22%; height: 18%; border: 1px solid #8a7a60; background: transparent; } .tpl-contact i:nth-child(2) { left: 6%; width: 38%; top: 50%; height: 18%; border: 1px solid #8a7a60; background: transparent; } .tpl-contact i:nth-child(3) { right: 6%; width: 44%; top: 12%; bottom: 12%; background: #5c6660; } .tpl-contact i:nth-child(4) { display: none; }
.amtop { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0 12px; } .amtop input#am-q { padding: 6px 9px; border: 1px solid #cfcac2; border-radius: 6px; }
.amgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
.amgrid button { position: relative; border: 2px solid transparent; border-radius: 8px; padding: 0; background: #1a1816; cursor: pointer; overflow: hidden; aspect-ratio: 1; }
.amgrid button:hover { border-color: #c9a24f; } .amgrid button.picked { border-color: #2e7d32; }
.amgrid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.amgrid em { position: absolute; left: 4px; top: 4px; font-size: 10px; font-style: normal; background: #c9a24f; color: #1a140a; padding: 1px 5px; border-radius: 4px; }
.amcell { position: relative; } .amcell > button[data-src] { width: 100%; }
.amgrid .amdel { position: absolute; right: 4px; top: 4px; width: 26px; height: 26px; aspect-ratio: auto; border-radius: 6px; background: rgba(20,18,16,.85); color: #fff; font-size: 13px; line-height: 1; border: 1px solid #555; }
.amgrid .amdel:hover { background: #c0392b; border-color: #c0392b; }
.helpgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; } .helpgrid div { background: #faf9f7; border-radius: 10px; padding: 12px 14px; } .helpgrid p { margin: 6px 0 0; font-size: 13px; line-height: 1.7; color: #4a4640; }

/* 左側（頁面、選單、樣式、版本） */
.stabs { display: flex; border-bottom: 1px solid var(--a-line); } .stabs button { flex: 1 1 auto; padding: 9px 4px; white-space: nowrap; border: 0; background: none; cursor: pointer; font: inherit; color: var(--a-sub); border-bottom: 2px solid transparent; }
.stabs button.on { color: var(--a-ink); font-weight: 700; border-bottom-color: #c9a24f; }
.sbody { flex: 1; overflow: auto; padding: 12px; }
.plist, .mlist, .vlist { list-style: none; margin: 10px 0; padding: 0; }
.plist li { display: flex; align-items: center; gap: 4px; border: 1px solid transparent; border-radius: 7px; padding: 2px 4px; margin-bottom: 2px; }
.plist li.cur { background: #fff8e8; border-color: #f1d9a0; } .plist li.hid .pname { color: #999; }
.plist li.over, .mlist li.over { border-top: 2px solid #c9a24f; } .dragging { opacity: .4; }
.grip { cursor: grab; color: #aaa; font-size: 12px; user-select: none; padding: 0 2px; }
.pname { flex: 1; text-align: left; border: 0; background: none; cursor: pointer; font: inherit; padding: 5px 2px; color: var(--a-ink); min-width: 0; } .pname small { display: block; color: var(--a-sub); font-size: 11px; }
.pact button { border: 0; background: none; cursor: pointer; font-size: 15px; color: #777; padding: 2px 4px; } .pact button:hover { color: var(--a-ink); }
.pform { border: 1px solid var(--a-line); border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 8px; background: #faf9f7; } .pform h4 { margin: 0; } .pform small { color: var(--a-sub); font-size: 11px; }
.mlist li { border: 1px solid var(--a-line); border-radius: 7px; padding: 6px; margin-bottom: 6px; background: #fff; } .mlist li.hid { opacity: .6; }
.mlist .sub { margin: 6px 0 6px 12px; } .mlist li.child { background: #faf9f7; }
.mrow, .mrow2 { display: flex; gap: 4px; align-items: center; } .mrow2 { margin-top: 4px; padding-left: 16px; flex-wrap: wrap; }
.mrow input[data-f=label] { flex: 1; } .mrow button { border: 0; background: none; color: var(--a-red); cursor: pointer; } .mrow2 select, .mrow2 input { max-width: 150px; }
.vlist li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0ede8; } .vlist small { display: block; color: var(--a-sub); }
@media (max-width: 1200px) { .ge { grid-template-columns: 210px minmax(0, 1fr) 290px; } }

/* 畫布縮小時，編輯工具維持正常大小 */
.ge-btb { transform: scale(var(--ge-inv, 1)); transform-origin: 0 100%; }
.ge-sbar { transform: scale(var(--ge-inv, 1)); transform-origin: 0 0; }
.ge-sres { transform: translate(-50%, 50%) scale(var(--ge-inv, 1)); }
.ge-h { transform: scale(var(--ge-inv, 1)); }
.ge-addsec button { transform: scale(var(--ge-inv, 1)); }
.ge-endadd { font-size: calc(14px * var(--ge-inv, 1)); } .ge-endadd .a-btn { transform: scale(var(--ge-inv, 1)); }

/* 字型預覽清單、文字特效 */
.fpick { max-height: 300px; overflow-y: auto; border: 1px solid var(--a-line); border-radius: 8px; background: #faf9f7; padding: 4px; }
.fpick .fp-g { position: sticky; top: -4px; z-index: 1; background: #22201d; color: #e8c77a; font-size: 11px; font-weight: 700; padding: 5px 8px; border-radius: 5px; margin: 6px 0 4px; }
.fpick button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 7px 10px; margin-bottom: 3px; border: 1px solid transparent; border-radius: 6px; background: #fff; cursor: pointer; text-align: left; font: inherit; }
.fpick button:hover { border-color: #c9a24f; }
.fpick button.on { border-color: #c9a24f; background: #fff8e8; box-shadow: inset 0 0 0 1px #c9a24f; }
.fpick .fp-s { font-size: 22px; line-height: 1.25; color: #22201d; }
.fpick small { font-size: 11px; color: var(--a-sub); }
.fxgrid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; }
.fxgrid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 2px 5px; border: 1px solid #3a3733; border-radius: 7px; background: #1a1816; cursor: pointer; font: inherit; }
.fxgrid button.on { border-color: #e8c77a; box-shadow: 0 0 0 1px #e8c77a; }
.fxgrid .fxs { font-family: "Noto Serif TC", serif; font-size: 20px; font-weight: 900; color: #f3efe8; line-height: 1.2; }
.fxgrid small { font-size: 10px; color: #bdb7ae; }
/* 暫停線上預約的主題：預約按鈕在前台不顯示，編輯器裡半透明＋標示（Owner 2026-10-01） */
.ge .bk-paused { opacity: .5; outline: 2px dashed #c0392b; outline-offset: 2px; }
.ge .bk-paused::after { content: "暫停預約中：前台不顯示"; position: absolute; left: 0; top: -20px; font-size: 11px; background: #c0392b; color: #fff; padding: 1px 6px; border-radius: 4px; white-space: nowrap; }
.ge .sec-offline { opacity: .55; outline: 2px dashed #c0392b; outline-offset: -2px; }
.ge .sec-offline::before { content: "這個主題還沒上架：前台不顯示這一排"; position: absolute; left: 8px; top: 8px; z-index: 50; font-size: 12px; background: #c0392b; color: #fff; padding: 2px 8px; border-radius: 4px; }
/* 圖片：點預覽選裁切重點、比例按鈕（Codex 上線前完整審查 12） */
.imgprev { position: relative; }
.imgprev.focusable { cursor: crosshair; }
.imgprev .focus-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: 50%; background: rgba(201,162,79,.85); box-shadow: 0 0 0 1px rgba(0,0,0,.5); pointer-events: none; }
.ratio-btns { flex-wrap: wrap; } .ratio-btns button { flex: 1 1 30%; }
.imgprev .fwrap { position: relative; display: inline-block; line-height: 0; }