/* ════════════════════════════════════════════════════════════════
   電子導覽書 共用前台編輯器（design-token tweak）樣式
   4 版共用。面板深色懸浮，與內容隔離（自帶命名空間 #eb-*）。
   ════════════════════════════════════════════════════════════════ */
#eb-gear{position:fixed;top:14px;left:14px;z-index:2147483000;width:34px;height:34px;border-radius:50%;
  border:none;background:rgba(20,28,44,.62);color:#fff;font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;backdrop-filter:blur(4px);
  box-shadow:0 2px 10px rgba(0,0,0,.3);transition:.25s;line-height:1}
#eb-gear:hover{background:rgba(20,28,44,.92);transform:rotate(35deg)}

#eb-panel{position:fixed;top:0;right:0;width:320px;max-width:88vw;height:100dvh;z-index:2147483600;
  background:#10151d;color:#e7edf4;font-family:"Noto Sans TC","Microsoft JhengHei",sans-serif;
  font-size:13px;line-height:1.6;box-shadow:-8px 0 32px rgba(0,0,0,.5);
  transform:translateX(102%);transition:transform .32s cubic-bezier(.6,.05,.2,1);
  display:flex;flex-direction:column;overscroll-behavior:contain}
#eb-panel.open{transform:none}
#eb-hd{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #232c38;flex:0 0 auto}
#eb-hd b{font-size:14px;font-weight:600;letter-spacing:.06em}
#eb-close{background:none;border:none;color:#8a97a6;font-size:20px;cursor:pointer;line-height:1;padding:0 2px}
#eb-close:hover{color:#fff}
#eb-body{flex:1 1 auto;overflow-y:auto;padding:6px 16px 20px;scrollbar-width:thin}
#eb-body::-webkit-scrollbar{width:7px}#eb-body::-webkit-scrollbar-thumb{background:#2c3744;border-radius:4px}

#eb-panel .eb-sec{margin-top:16px}
#eb-panel .eb-sec>h4{font-size:11px;font-weight:600;letter-spacing:.18em;color:#7f8b99;margin:0 0 8px;text-transform:uppercase}
#eb-panel .eb-row{display:flex;align-items:center;gap:10px;margin:9px 0}
#eb-panel .eb-row label{flex:1 1 auto;color:#aeb8c4;font-size:12.5px}
#eb-panel select,#eb-panel input[type=range]{background:#070a0e;color:#e7edf4;border:1px solid #2a3340;border-radius:6px;font-family:inherit}
#eb-panel select{padding:5px 7px;font-size:12.5px;max-width:160px}
#eb-panel input[type=range]{-webkit-appearance:none;height:4px;padding:0;flex:0 0 120px;background:#2a3340}
#eb-panel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#f0c020;cursor:pointer}
#eb-panel .eb-val{flex:0 0 38px;text-align:right;font-size:11.5px;color:#8a97a6;font-variant-numeric:tabular-nums}
#eb-panel input[type=color]{width:30px;height:24px;padding:0;border:1px solid #2a3340;border-radius:5px;background:none;cursor:pointer}
#eb-panel input[type=color]::-webkit-color-swatch-wrapper{padding:2px}#eb-panel input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}
#eb-panel .eb-hex{flex:0 0 66px;background:#070a0e;border:1px solid #2a3340;color:#e7edf4;border-radius:5px;padding:4px 6px;font-size:11.5px;font-family:ui-monospace,monospace}

#eb-panel .eb-img{display:flex;align-items:center;gap:8px;margin:9px 0}
#eb-panel .eb-img .nm{flex:1 1 auto;font-size:12.5px;color:#aeb8c4;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#eb-panel .eb-btn{background:#1b2530;border:1px solid #2c3a4a;color:#cfe3ff;border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:inherit}
#eb-panel .eb-btn:hover{background:#243140}
#eb-panel .eb-btn.sm{padding:4px 8px;font-size:11px}

#eb-foot{flex:0 0 auto;padding:12px 16px 16px;border-top:1px solid #232c38;display:grid;grid-template-columns:1fr 1fr;gap:8px}
#eb-foot button{padding:9px;border:none;border-radius:7px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit}
#eb-foot .save{background:#1b2530;color:#cfe3ff;border:1px solid #2c3a4a;grid-column:1/3}
#eb-foot .savedef{background:#f0c020;color:#1a1a1a;grid-column:1/3}
#eb-foot .imp{background:#1b2530;color:#cfe3ff;border:1px solid #2c3a4a}
#eb-foot .exp{background:#1b2530;color:#cfe3ff;border:1px solid #2c3a4a}
#eb-foot .reset{background:transparent;color:#8a97a6;border:1px solid #2a3340;grid-column:1/3}
#eb-foot .reset:hover{color:#ff9a9a;border-color:#5a3a3a}

/* 文字編輯模式 */
#eb-panel .eb-edit-toggle{width:100%;padding:10px;border-radius:7px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;background:#1b2530;color:#cfe3ff;border:1px solid #2c3a4a}
#eb-panel .eb-edit-toggle.on{background:#f0c020;color:#1a1a1a;border-color:#f0c020}
#eb-panel .eb-hint{font-size:11.5px;color:#7f8b99;line-height:1.55;margin-top:8px}
body.eb-editing [data-ek]{outline:1px dashed rgba(15,65,150,.5);outline-offset:1px;cursor:text;border-radius:2px;transition:background .15s}
body.eb-editing [data-ek]:hover{background:rgba(240,192,32,.12)}
body.eb-editing [data-ek]:focus{outline:2px solid #0F4196;background:rgba(240,192,32,.16)}
/* 選取元素樣式工具列 */
#eb-selbar{position:fixed;bottom:64px;left:50%;transform:translateX(-50%) translateY(16px);z-index:2147483640;
  display:flex;align-items:center;gap:10px;background:#10151d;color:#e7edf4;border:1px solid #2c3a4a;
  border-radius:10px;padding:9px 14px;font-family:"Noto Sans TC",sans-serif;font-size:12px;
  box-shadow:0 6px 24px rgba(0,0,0,.45);opacity:0;pointer-events:none;transition:.25s}
#eb-selbar.show{opacity:1;pointer-events:auto;transform:translateX(-50%)}
#eb-selbar .lb{color:#8a97a6;letter-spacing:.08em;flex:0 0 auto}
#eb-selbar input[type=range]{-webkit-appearance:none;width:110px;height:4px;background:#2a3340;border-radius:2px}
#eb-selbar input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:#f0c020;cursor:pointer}
#eb-selbar .vl{width:40px;text-align:right;color:#cfe3ff;font-variant-numeric:tabular-nums}
#eb-selbar input[type=color]{width:28px;height:24px;padding:0;border:1px solid #2a3340;border-radius:5px;background:none;cursor:pointer}
#eb-selbar input[type=color]::-webkit-color-swatch-wrapper{padding:2px}#eb-selbar input[type=color]::-webkit-color-swatch{border:none;border-radius:3px}
#eb-selbar button{background:#1b2530;border:1px solid #2c3a4a;color:#cfe3ff;border-radius:6px;padding:3px 9px;font-size:13px;cursor:pointer;line-height:1.3}
#eb-selbar button:hover{background:#243140}
.eb-sel{outline:2px solid #F0C020!important;outline-offset:2px}
/* 照片移動模式 */
body.eb-moving img[data-mk]{outline:2px dashed rgba(240,192,32,.85);outline-offset:2px;cursor:grab}
body.eb-moving img[data-mk]:active{cursor:grabbing}

#eb-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);z-index:2147483647;
  background:#1a2230;color:#e7edf4;border:1px solid #2c3a4a;border-radius:8px;padding:9px 18px;font-size:13px;
  font-family:"Noto Sans TC",sans-serif;opacity:0;transition:.3s;pointer-events:none}
#eb-toast.show{opacity:1;transform:translateX(-50%)}
@media print{#eb-gear,#eb-panel,#eb-toast,#eb-selbar{display:none!important}}
