:root{
    --panel-bg: #191b1f;
    --panel-bg2: #212328;
    --ink: #eceef1;
    --ink-dim: #8b909b;
    --line: #2c2f36;
    --accent: #ff8a3d;
    --accent2: #2ec4b6;
  }
  *{box-sizing:border-box;}
  html, body{
    margin:0;
    font-family:"Noto Sans TC", sans-serif;
    background:#0f1013;
    color:var(--ink);
    min-height:100vh;
    overflow-x:hidden;
    overflow-y:auto;
  }
  .app{ display:flex; flex-wrap:wrap; min-height:100vh; }

  /* ---------- LEFT PANEL ---------- */
  .left{
    flex:0 1 430px;
    min-width:340px;
    background:var(--panel-bg);
    border-right:1px solid var(--line);
    display:flex; flex-direction:column;
    max-height:100vh;
    overflow-y:auto;
    font-size:15px;
  }
  .left::-webkit-scrollbar{width:6px;}
  .left::-webkit-scrollbar-thumb{background:#333; border-radius:3px;}

  .brand{ padding:20px 22px 16px; border-bottom:1px solid var(--line); }
  .brand .logo{ font-size:16px; font-weight:900; letter-spacing:0.5px; display:flex; align-items:center; gap:8px; }
  .brand .logo .dot{width:9px;height:9px;border-radius:50%;background:var(--accent);}
  .brand .sub{font-size:12.5px; color:var(--ink-dim); margin-top:5px;}

  .section{ padding:18px 22px; border-bottom:1px solid var(--line); }
  .section-title{
    font-size:12.5px; font-weight:700; color:var(--ink-dim);
    letter-spacing:1px; text-transform:uppercase; margin-bottom:12px;
    display:flex; justify-content:space-between; align-items:center;
  }
  .section-title .count{ color:#666; font-weight:500; text-transform:none; letter-spacing:0; }

  /* template dropdown */
  .tpl-preview{
    height:90px; border-radius:10px; border:1px solid var(--line);
    margin-bottom:12px; position:relative; overflow:hidden;
  }
  .tpl-preview .tag{
    position:absolute; bottom:7px; left:9px;
    font-size:12px; background:rgba(0,0,0,.45); color:#fff;
    padding:3px 10px; border-radius:100px; backdrop-filter:blur(2px);
  }
  select#tplSelect{
    width:100%; background:#101114; border:1px solid var(--line);
    color:var(--ink); border-radius:8px; padding:12px 10px; font-size:15px;
    font-family:inherit; cursor:pointer;
  }
  .tpl-hint{ font-size:12.5px; color:var(--ink-dim); margin-top:9px; line-height:1.6; }

  /* layer list */
  .layer-item{
    display:flex; align-items:center; gap:9px;
    padding:11px 12px; border-radius:8px; cursor:pointer;
    font-size:14.5px; color:var(--ink-dim); border:1px solid transparent; margin-bottom:5px;
  }
  .layer-item:hover{background:var(--panel-bg2);}
  .layer-item.active{ background:var(--panel-bg2); border-color:var(--accent); color:var(--ink); }
  .layer-icon{
    width:24px;height:24px;border-radius:6px;
    display:flex;align-items:center;justify-content:center;
    font-size:12px; background:#2a2d34; flex-shrink:0;
  }
  .layer-icon.img-type{ background:#33363d; }

  /* controls */
  .ctrl-group{margin-bottom:18px;}
  .ctrl-label{ display:flex; justify-content:space-between; font-size:13.5px; color:var(--ink-dim); margin-bottom:7px; }
  .ctrl-label b{color:var(--ink); font-weight:600;}
  input[type=range]{ width:100%; accent-color:var(--accent); height:5px; cursor:pointer; }
  textarea, select, input[type=text]{
    width:100%; background:#101114; border:1px solid var(--line);
    color:var(--ink); border-radius:7px; padding:10px 11px; font-size:15px;
    font-family:inherit; resize:vertical;
  }
  textarea:focus, select:focus, input:focus{outline:1px solid var(--accent);}

  .color-row{display:flex; gap:9px; flex-wrap:wrap; margin-top:7px;}
  .swatch{ width:27px;height:27px;border-radius:50%; cursor:pointer; border:2px solid #33363d; transition:transform .1s ease; }
  .swatch:hover{transform:scale(1.12);}
  .swatch.active{border-color:#fff;}
  .color-custom{ display:flex;align-items:center;gap:9px;margin-top:9px; }
  .color-custom input[type=color]{ width:30px;height:30px;border:none;background:none;padding:0;cursor:pointer; }

  .empty-hint{ font-size:14px; color:var(--ink-dim); line-height:1.7; padding:6px 2px; }

  .upload-box{
    border:1.5px dashed var(--line); border-radius:9px; padding:16px;
    text-align:center; cursor:pointer; font-size:14px; color:var(--ink-dim);
    margin-bottom:14px; transition:border-color .15s;
  }
  .upload-box:hover{ border-color:var(--accent); color:var(--ink); }
  .upload-box.has-img{ border-style:solid; }
  .img-thumb-preview{ width:100%; height:80px; border-radius:6px; object-fit:cover; margin-bottom:9px; }
  .frame-note{
    font-size:13px; color:var(--ink-dim); background:#101114;
    border:1px solid var(--line); border-radius:7px; padding:10px 11px; margin-bottom:16px; line-height:1.6;
  }
  .frame-note b{color:var(--accent);}

  .export-row{ display:flex; gap:9px; padding:18px 22px; margin-top:auto; border-top:1px solid var(--line); }
  .btn{
    flex:1; padding:12px 8px; border-radius:8px; border:1px solid var(--line);
    background:var(--panel-bg2); color:var(--ink); font-size:13.5px; font-weight:600;
    cursor:pointer; transition:background .15s ease, border-color .15s;
  }
  .btn:hover{border-color:var(--accent); background:#26282e;}
  .btn.primary{ background:var(--accent); border-color:var(--accent); color:#1a1a1a; }
  .btn.primary:hover{filter:brightness(1.08);}

  /* ---------- RIGHT (PREVIEW) ---------- */
  .right{
    flex:1 1 420px;
    min-width:320px;
    background:
      linear-gradient(45deg,#1a1b1e 25%, transparent 25%),
      linear-gradient(-45deg,#1a1b1e 25%, transparent 25%),
      linear-gradient(45deg, transparent 75%, #1a1b1e 75%),
      linear-gradient(-45deg, transparent 75%, #1a1b1e 75%);
    background-size:20px 20px;
    background-position:0 0, 0 10px, 10px -10px, -10px 0px;
    background-color:#111318;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    position:relative; padding:40px;
    overflow:hidden; /* 防止內部 layout 回流擴散到外部造成畫面晃動 */
  }
  .canvas-wrap{ box-shadow:0 20px 60px rgba(0,0,0,.55); border-radius:6px; overflow:hidden; position:relative; will-change:width,height; }
  #stage{ position:relative; overflow:hidden; will-change:contents; }
  .stage-scaler{ transform-origin: top left; will-change:transform; }
  .layer-el{ position:absolute; transform-origin:center center; user-select:none; }
  .img-mask{ position:absolute; overflow:hidden; }
  .img-fill{ width:100%; height:100%; background-repeat:no-repeat; position:relative; }
  .img-placeholder-label{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  }
  .img-placeholder-label .pill-inner{
    background:rgba(0,0,0,.42); color:#fff; font-size:12.5px; padding:7px 14px;
    border-radius:100px; white-space:nowrap; backdrop-filter:blur(2px);
  }
  .toolbar-top{
    position:absolute; top:16px; left:0; right:0;
    display:flex; justify-content:center; gap:10px; font-size:12px; color:var(--ink-dim); z-index:20;
  }
  .toolbar-top .pill{ background:var(--panel-bg2); border:1px solid var(--line); padding:6px 14px; border-radius:100px; }
  .toast{
    position:absolute; bottom:24px; left:50%; transform:translateX(-50%);
    background:#1a1c20; border:1px solid var(--accent); color:var(--ink);
    padding:10px 18px; border-radius:8px; font-size:12.5px;
    opacity:0; pointer-events:none; transition:opacity .25s ease, transform .25s ease; max-width:70%;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(-6px);}

  /* ---------- 匯出設定 Modal ---------- */
  .export-modal-overlay{
    position:fixed; inset:0; background:rgba(0,0,0,.65);
    display:flex; align-items:center; justify-content:center; z-index:999;
    opacity:0; pointer-events:none; transition:opacity .2s;
  }
  .export-modal-overlay.open{ opacity:1; pointer-events:auto; }
  .export-modal{
    background:var(--panel-bg); border:1px solid var(--line);
    border-radius:14px; padding:28px 28px 22px; width:360px; max-width:92vw;
    box-shadow:0 24px 64px rgba(0,0,0,.55);
  }
  .export-modal h3{ font-size:17px; font-weight:900; margin:0 0 20px; color:var(--ink); }
  .exp-section{ margin-bottom:18px; }
  .exp-label{ font-size:12.5px; color:var(--ink-dim); margin-bottom:8px; }
  .exp-btn-group{ display:flex; gap:8px; }
  .exp-opt{
    flex:1; padding:9px 6px; border-radius:8px; border:1px solid var(--line);
    background:var(--panel-bg2); color:var(--ink); font-size:13px; font-weight:600;
    cursor:pointer; text-align:center; transition:border-color .15s, background .15s;
  }
  .exp-opt:hover{ border-color:#555; }
  .exp-opt.active{ border-color:var(--accent); background:#26282e; color:var(--ink); }
  .exp-quality-row{ display:flex; align-items:center; gap:10px; }
  .exp-quality-row input{ flex:1; accent-color:var(--accent); }
  .exp-quality-val{ min-width:36px; font-size:13px; color:var(--ink); text-align:right; font-weight:600; }
  .exp-actions{ display:flex; gap:10px; margin-top:22px; }
  .exp-cancel{ flex:1; padding:11px; border-radius:8px; border:1px solid var(--line);
    background:var(--panel-bg2); color:var(--ink-dim); font-size:14px; font-weight:600; cursor:pointer; }
  .exp-go{ flex:2; padding:11px; border-radius:8px; border:none;
    background:var(--accent); color:#1a1a1a; font-size:14px; font-weight:900; cursor:pointer; }
  .exp-go:disabled{ opacity:.5; cursor:not-allowed; }
  .exp-progress{ display:none; align-items:center; gap:10px; margin-top:14px;
    font-size:13px; color:var(--ink-dim); }
  .exp-progress.show{ display:flex; }
  .exp-spinner{
    width:18px; height:18px; border:2px solid var(--line);
    border-top-color:var(--accent); border-radius:50%;
    animation:spin .7s linear infinite; flex-shrink:0;
  }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  /* ===== 手機版響應式（≤780px） ===== */
  /* ===== 布局：由 JS 加上 .m-portrait class 控制，不依賴 orientation 媒體查詢 ===== */

  /* 手機直式布局（JS 加 .m-portrait 時生效） */
  .m-portrait .right{
    position:fixed; top:0; left:0; right:0; z-index:90;
    min-height:120px; max-height:68vh;
    padding:6px 8px 4px; background:#111318;
  }
  .m-portrait.app{ flex-direction:column; min-height:100vh; }
  .m-portrait.app{ padding-top:var(--preview-h, 200px); }
  .m-portrait .left{
    order:2; width:100%; min-width:0; flex:none;
    max-height:none; border-right:none; border-top:1px solid var(--line);
  }
  .m-portrait .canvas-wrap{ max-width:100%; }
  .m-portrait .toolbar-top{ display:none; } /* 直式手機空間有限，隱藏頂部標籤 */
  #mobileNav{ display:none; }
  .m-portrait #mobileNav{ display:flex; }

  /* 觸控目標放大（窄螢幕通用，直式橫式都適用） */
  @media (max-width:780px){
    input[type=range]{ height:8px; accent-color:var(--accent); }
    .swatch{ width:32px!important; height:32px!important; }
    .layer-item{ padding:13px 12px; font-size:15px; }
    .ctrl-label{ font-size:14px; margin-bottom:8px; }
    .ctrl-group{ margin-bottom:20px; }
    .btn{ padding:12px 8px; font-size:14px; min-height:44px; }
    .btn-sm{ padding:10px 14px; font-size:13px; min-height:40px; }
    .exp-opt{ padding:13px 6px; font-size:14px; min-height:44px; }
    .toolbar-top .pill{ font-size:11px; padding:4px 10px; }
    .export-row{ flex-direction:column; gap:10px; padding:14px 16px; }
    .export-row .btn{ padding:14px; font-size:15px; }
    select#tplSelect{ padding:12px 10px; font-size:15px; }
    .brand .sub{ display:none; }
    .brand{ padding:10px 14px 8px; }
  }

  /* 橫式手機：左側面板縮小以節省空間 */
  @media (max-width:1000px) and (orientation:landscape) and (max-height:520px){
    .left{ flex:0 1 300px; min-width:240px; font-size:13px; }
    .section{ padding:10px 14px; }
    .ctrl-group{ margin-bottom:10px; }
    .layer-item{ padding:8px 10px; font-size:13px; }
  }


  /* 手機版 tab 導航樣式（媒體查詢外，避免被覆蓋） */
  #mobileNav{
    display:none; /* 預設隱藏，手機版 CSS 覆蓋為 flex */
    background:var(--panel);
    border-top:1px solid var(--line);
    position:sticky; bottom:0; z-index:100;
  }
  .m-tab{
    flex:1; display:flex; flex-direction:column; align-items:center;
    justify-content:center; gap:2px; padding:8px 4px;
    font-size:10.5px; color:var(--ink-dim); cursor:pointer;
    border:none; background:none;
  }
  .m-tab .m-icon{ font-size:19px; line-height:1; }
  .m-tab.active{ color:var(--accent); }


  /* HSB 色相滑桿樣式 */
  .hue-slider{
    -webkit-appearance:none; appearance:none; width:100%; height:12px;
    border-radius:6px; outline:none; cursor:pointer;
    background:linear-gradient(to right,
      hsl(0,100%,50%),hsl(30,100%,50%),hsl(60,100%,50%),hsl(90,100%,50%),
      hsl(120,100%,50%),hsl(150,100%,50%),hsl(180,100%,50%),hsl(210,100%,50%),
      hsl(240,100%,50%),hsl(270,100%,50%),hsl(300,100%,50%),hsl(330,100%,50%),hsl(360,100%,50%));
  }
  .hue-slider::-webkit-slider-thumb{
    -webkit-appearance:none; width:18px; height:18px;
    border-radius:50%; border:2px solid #fff; box-shadow:0 1px 4px rgba(0,0,0,.5);
    cursor:grab;
  }
  .color-preview-dot{
    width:28px; height:28px; border-radius:50%;
    border:2px solid var(--line); flex-shrink:0;
  }
/* 畫布尺寸快速預設按鈕 — active 高亮 */
.canvas-size-btn.active{
  border-color:var(--accent) !important;
  color:var(--accent) !important;
  background:rgba(255,138,61,.12) !important;
  font-weight:700;
}