:root {
  --fg: #eaeaea;
  --bg: #0f1115;
  --muted: #9aa0a6;
  --card: #151821;
  --brand: #4f8cff;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans TC", "Helvetica Neue", Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--bg);
  color: var(--fg);
}

.container { width: min(1100px, 94%); margin: 0 auto; }

.site-header { border-bottom: 1px solid #3f3f3f; background: #0d0f14; }
.site-header .container { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.logo { color: var(--fg); text-decoration: none; font-weight: 100; letter-spacing: .5px; }
.logo-sub { color: var(--muted, #8b949e); font-size: 0.72em; font-weight: 400; margin-left: 2px; }
.nav a { color: var(--muted); text-decoration: none; margin-left: 14px; }
.nav a:hover { color: var(--fg); }

.upload-card {
  background: var(--card);
  padding: 18px;
  margin: 22px 0;
  text-align: center;
}
h2 { margin: 0 0 8px 0; font-size: 20px; }
.muted { color: var(--muted); font-size: 14px; margin: 6px 0 14px; }

/* =========================
   美化上傳拖曳區：drop-area
   ========================= */
.drop-area{
  position: relative;
  padding: 28px 20px;
  text-align: center;
  border: 1px dashed #2a2f44;
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(79,140,255,.08), transparent 60%),
    radial-gradient(1000px 500px at 110% 110%, rgba(122,255,214,.06), transparent 60%),
    var(--card);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease;
  will-change: transform, box-shadow;
  overflow: hidden; /* 給 ::before/::after 用 */
}

/* 內文排版（維持你原本內容，不用改 HTML） */
.drop-area h1{
  font-size: 20px;
  margin: 0 0 10px 0;
}
.drop-area .page-subtitle{
  font-size: 13px;
  color: #9aa0a6;
  margin: 0 0 14px 0;
}
.drop-area .muted { margin-top: 6px; }

/* ── 光暈邊框（不動內容，用偽元素畫） ── */
.drop-area::before{
  content:"";
  position:absolute; inset:-1px;
  border-radius:16px;
  padding:1px;

  /* 發光邊框底圖 */
  background:
    conic-gradient(from 180deg at 50% 50%,
      rgba(79,140,255,.00),
      rgba(79,140,255,.25),
      rgba(122,255,214,.25),
      rgba(79,140,255,.25),
      rgba(79,140,255,.00)
    );

  /* 標準遮罩（先宣告） */
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;           /* 兩層相減，挖空中間 */

  /* WebKit 前綴（再宣告一次同樣的兩層）*/
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;       /* WebKit 的相減語法 */

  opacity:0;
  filter:blur(8px);
  transition:opacity .25s ease, filter .25s ease;
  pointer-events:none;
}


/* ── 玻璃感覆蓋層（拖曳時輕微提亮） ── */
.drop-area::after{
  position: absolute; inset: 8px;
  border-radius: 12px;
  background: rgba(17, 24, 39, 0.25);
  backdrop-filter: blur(3px) saturate(110%);
  -webkit-backdrop-filter: blur(3px) saturate(110%);
  display: grid;
  place-items: center;
  color: #e5e7eb;
  font-size: 15px;
  letter-spacing: .2px;
  opacity: 0;
  transform: scale(.98);
  transition: opacity .25s ease, transform .25s ease;
  pointer-events: none;
}

/* ── 拖曳中狀態 ── */
.drop-area.dragover{
  transform: translateY(-1px) scale(1.01);
  border-color: rgba(79,140,255,.75);
  box-shadow:
    0 8px 30px rgba(0,0,0,.35),
    0 0 0 1px rgba(79,140,255,.25) inset;
  background:
    radial-gradient(1000px 500px at 50% 0%, rgba(79,140,255,.10), transparent 60%),
    radial-gradient(800px 400px at 50% 100%, rgba(122,255,214,.08), transparent 60%),
    var(--card);
}
.drop-area.dragover::before{ opacity: 1; filter: blur(6px); }
.drop-area.dragover::after{
  opacity: 1;
  transform: scale(1);
  /* 帶一個小圖示（用 Emoji，免圖片資產；想用你自己的 SVG 也行） */
  content: "⬆"; /* 上傳 */
}

/* ── 支援降低動效的使用者偏好 ── */
@media (prefers-reduced-motion: reduce){
  .drop-area, .drop-area::before, .drop-area::after{
    transition: none !important;
  }
}

/* 你原有的 hover/focus（可選） */
.file-input{
  display:inline-block; border:1px dashed #2a2f44; padding:10px 14px; border-radius:8px; cursor:pointer; margin-right:10px;
  transition: border-color .2s ease, background .2s ease;
}
.file-input:hover{ border-color:#3a4a7a; background: rgba(58, 74, 122, .12); }


.file-input { display: inline-block; border: 1px dashed #2a2f44; padding: 10px 14px; border-radius: 4px; cursor: pointer; margin-right: 10px; }
.file-input input { display: none; }

.btn-primary { border: 1px solid #34487f;
  display: inline-block;
    padding: 10px 14px;
    font-size: 13px;
    background: #171b26;
    color: #d5d9e6;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border-radius: 25px 0px 25px 0px; }
    .btn-primary:hover:not(:disabled) {
      opacity: 0.92;
      transform: translateY(-0.5px);
    }
    .btn-primary:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }


.preview-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 14px; }
.preview-grid img { width: 100%; height: 140px; object-fit: cover; border-radius: 10px; border: 1px solid #262b40; }

/* ====== 上傳前預覽卡（含「編輯」入口，由 main.js 建立） ====== */
.preview-card { position: relative; }
.preview-card img { height: 140px; }
.preview-edit-btn {
  position: absolute; top: 6px; right: 6px;
  min-height: 32px; padding: 4px 10px;
  background: rgba(13, 17, 23, .82);
  border: 1px solid #34487f; border-radius: 6px;
  color: #d5d9e6; font-size: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.preview-edit-btn:hover { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.preview-badge {
  position: absolute; bottom: 6px; left: 6px;
  background: rgba(31, 111, 235, .9); color: #fff;
  font-size: 11px; padding: 2px 7px; border-radius: 999px;
  letter-spacing: .3px;
}

.latest-section .section-head { display: flex; align-items: baseline; justify-content: space-between; margin: 26px 0 10px; }
.see-all { color: var(--muted); text-decoration: none; font-size: 14px; }
.see-all:hover { color: var(--fg); }

/* ====== 本次上傳的九宮格（保持不變） ====== */
.image-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.image-card { display: block; border-radius: 4px; overflow: hidden; border: 1px solid #23283a; background: #0c0e13; }
.image-card img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform .2s ease; }
.image-card:hover img { transform: scale(1.03); }

/* 保證「最新上傳」不受上面固定高度影響（即使誤用 image-card） */
.latest-section .image-card img { height: auto !important; }

.thumb-wrap { position: relative; }
.gif-badge {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.65); color: #fff; font-size: 12px;
  padding: 2px 6px; border-radius: 6px; letter-spacing: .5px;
}

.image-wrapper { display: flex; justify-content: center; align-items: flex-start; gap: 24px; margin-top: 32px; flex-wrap: wrap; }
.image-content { max-width: 800px; width: 100%; padding: 0 10px; flex: 1 1 100%; text-align: center; }
/* 圖片頁麵包屑：.image-content 是置中排版，但麵包屑靠左才符合閱讀慣例（.breadcrumb 共用樣式見上方） */
.image-content > .breadcrumb { text-align: left; margin-top: 0; }
.main-image { width: 80%; height: auto; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.2); margin-bottom: 10px; }

.ad-space {
  width: 160px; min-height: 600px; background-color: #f8f8f8; border: 1px dashed #ccc;
  display: flex; justify-content: center; align-items: center; color: #aaa; font-size: 14px; flex-shrink: 0;
}

.share-codes { margin-top: 24px; padding-top: 12px; border-top: 1px solid #595959; }
.share-codes h4 { font-size: 16px; margin-bottom: 10px; }
.code-block { margin-bottom: 10px; }
.code-block label { display: block; font-size: 14px; margin-bottom: 4px; color: #ffffff; }
.code-block input[type="text"]:hover { background: #969696; cursor: pointer; }

.copy-box {
  background-color: #111218; border: 1px solid #2d2f3a; border-radius: 3px; padding: 10px 12px;
  font-family: monospace; font-size: 14px; color: #e2e2e2; margin-top: 6px; cursor: pointer;
  user-select: none; transition: background 0.2s ease, border-color 0.2s ease; word-break: break-all;
}
.copy-box:hover { background-color: #1c1f29; border-color: #bb88ff; color: #ffffff; }
.copy-box:active { background-color: #2a2f42; border-color: #5888f0; }
.copy-box:focus { outline: none; border-color: #3a6ee8; }

.share-codes { margin-top: 24px; }
.share-codes label { font-size: 13px; color: #999; display: block; margin-bottom: 4px; margin-top: 16px; }

.site-footer { border-top: 1px solid #1d2130; margin-top: 40px; background: var(--footer-bg, transparent); }
.site-footer .container { padding: 2px 0; font-size: 14px; color: var(--muted, #aaa); line-height: 1.8; }
.footer-link { color: var(--accent, #58a6ff); text-decoration: none; transition: opacity 0.2s, text-decoration 0.2s; }
.footer-link:hover { opacity: 0.8; text-decoration: underline; }

/* ====== 最新上傳：Collage/Quilt 拼圖（核心） ====== */
.latest-section .collage-grid{
  display: grid;
  grid-auto-flow: dense;              /* 允許回填空位 */
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  --tile-max: 300px;         
}

.latest-section .collage-grid .tile{
  position: relative;
  overflow: hidden;
  border-radius: 2px;
  background: var(--card-bg,#0c0e13);
  border: 1px solid #23283a;
  box-shadow: 0 1px 2px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease;
  outline: none;
  max-height: var(--tile-max);
}
.latest-section .collage-grid .tile:hover{
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

/* 欄寬（JS 會套 w1/w2；沒套時預設 1 欄寬） */
.latest-section .collage-grid .tile { grid-column: span 1; }
.latest-section .collage-grid .w1   { grid-column: span 1; }
.latest-section .collage-grid .w2   { grid-column: span 2; }

/* 用 ::before 佔位，避免 CLS；高度由比例控制（JS 寫入 --ar） */
.latest-section .collage-grid .tile::before{
  content: "";
  display: block;
  width: 100%;
  aspect-ratio: var(--ar, 1 / 1);
  /* 兼容極舊瀏覽器 */
  min-height: 120px;
  max-height: var(--tile-max);
}

/* 圖片覆蓋整塊卡片 */
.latest-section .collage-grid .tile > img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .22s ease;
  object-position: center;
}
.latest-section .collage-grid .tile:hover > img{ transform: scale(1.03); }

/* tag 頁 tile 疊加標題（只在有 title 且 != id 時由模板渲染） */
.latest-section .collage-grid .tile .tile-overlay-title{
  position: absolute;
  bottom: 0; left: 0;
  width: 100%;
  padding: 26px 12px 10px;              /* 頂部留白讓漸層自然淡出 */
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0) 100%);
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;              /* 過長 → 視覺截斷，DOM 全文保留 */
  z-index: 2;                           /* 蓋在 absolute img 之上 */
  pointer-events: none;                 /* 點擊永遠落在 <a>，避開 iOS Safari 偶發點擊判定問題 */
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}

/* ================================================= */
/* 按鈕風格 開關 (Toggle Switch) CSS              */
/* ================================================= */

/* 1. 基礎容器 - 定義尺寸 */
.switch {
  position: relative;
  display: inline-block;
  width: 48px;
  height: 27px;
  vertical-align: middle;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

/* 2. 滑軌 (Slider Track) - 仿按鈕風格 */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* 仿按鈕樣式 - 關閉狀態 */
  background-color: #171b26; /* 按鈕深色背景 */
  border: 1px solid #34487f; /* 按鈕邊框藍色 */
  transition: 0.3s;
  border-radius: 26px;
}

/* 3. 滑塊 (Slider Knob) - 仿按鈕文字顏色 */
.slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 4px;
  bottom: 4px;
  
  /* 仿按鈕樣式 - 使用按鈕文字顏色 */
  background-color: #d5d9e6; 
  transition: 0.3s;
  border-radius: 50%;
}

/* 4. 開啟狀態 (Checked State) */
input:checked + .slider {
  /* 開啟時背景使用邊框色，邊框變亮 */
  background-color: #34487f; 
  border-color: #d5d9e6; 
}

input:checked + .slider:before {
  transform: translateX(20px); /* 準確的移動距離 */
}

/* 5. 禁用狀態 (Disabled State) */
input:disabled + .slider {
  opacity: 0.6; /* 與按鈕禁用樣式一致 */
  cursor: not-allowed;
}

input:disabled + .slider:before {
  opacity: 0.6; /* 讓滑塊也變暗 */
}

.public-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
  justify-content: center;
}

.label-text {
  color: #ccc;
  font-size: 14px;
}
.cc-revoke {
  display: none !important;
}

/* 🔥 新增：修復手機版 Email 自動變連結的問題 */
.welcome {
  pointer-events: none; /* 禁止點擊 */
  color: inherit;       /* 繼承原本顏色 */
  text-decoration: none;
}

/* 響應式欄數縮減 */
@media (max-width: 1200px){
  .latest-section .collage-grid{ grid-template-columns: repeat(4,1fr); }
}
@media (max-width: 992px){
  .latest-section .collage-grid{ grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 768px){
  .latest-section .collage-grid{ grid-template-columns: repeat(2,1fr); }
  /* 手機避免寬兩欄造成空洞：全部視作單欄 */
  .latest-section .collage-grid .w2{ grid-column: span 1; }
}
@media (max-width: 480px){
  .latest-section .collage-grid{ grid-template-columns: 1fr; }
}

/* 手機佈局微調 */
@media (max-width: 768px) {
  .ad-space { display: none; }
  .image-wrapper { flex-direction: column; align-items: center; padding: 0 10px; }
  .image-content { padding: 0; }
  .site-footer .container { font-size: 13px; padding: 20px 10px; }
  /* footer 連結串換行時，讓「｜」分隔符不落行首 */
  .copyright { line-height: 2.2; word-break: keep-all; }
}

/* =========================================
   📱 iOS Safari 防聚焦自動放大：
   輸入框字級 <16px 時 iOS 會自動縮放頁面且不會還原
   ========================================= */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="url"], input[type="number"], input[type="search"],
  input[type="tel"], textarea, select {
    font-size: 16px !important;
  }
}

/* =========================================
   📱 窄螢幕導航優化：橫向滑動（含平板 769-992px）
   ========================================= */
@media (max-width: 992px) {
  
  /* 1. 確保 Logo 不會被擠壓 */
  .logo {
    flex-shrink: 0;
    margin-right: 10px;
    z-index: 2; /* 確保 Logo 在最上層 */
  }

  /* 2. 導航選單容器設定 */
  .nav {
    display: flex;
    align-items: center;
    
    /* 核心：開啟橫向捲動 */
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch; /* 讓 iOS 滑動更順暢 */
    
    /* 讓容器佔據剩餘空間 */
    flex-grow: 1;
    justify-content: flex-end; /* 內容靠右對齊 */
    
    /* 隱藏捲軸 (美觀) */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
    
    /* 增加一點右側內距，避免最後一個選項貼邊 */
    padding-right: 5px;
    
    /* 加上遮罩效果 (左側淡出)，提示還有內容 (選用) */
    mask-image: linear-gradient(to right, transparent, black 10px);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10px);
  }

  /* 隱藏 Chrome/Safari 的捲軸 */
  .nav::-webkit-scrollbar {
    display: none;
  }

  /* 3. 確保連結不會換行，且好點擊 */
  .nav a {
    flex-shrink: 0; /* 禁止壓縮文字 */
    padding: 12px 8px; /* 增加點擊範圍（建議 ≥44px 高觸控目標） */
    margin-left: 12px;
  }

  /* 4. 🔥 優化：手機版隱藏「歡迎 xxx@gmail...」
     原因：Email 太長了，會佔據手機 70% 寬度，導致主要功能按鈕被擠到看不見。
     隱藏後，使用者能直接看到「首頁、最新、上傳」。 */
  .nav .welcome {
    display: none;
  }
}

/* =========================================================
   🖼 圖片編輯器（image-editor.js）
   結構由 views/index.njk 輸出（data-ie-* 標記）；
   樣式沿用既有深色調與 768 / 992px 斷點。
   ========================================================= */
.ie-overlay {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .82);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 10000;
  display: flex; justify-content: center; align-items: center;
  padding: 16px;
}
.ie-overlay[hidden] { display: none; }

.ie-box {
  display: flex; flex-direction: column;
  width: 100%; max-width: 1040px; max-height: 94vh;
  background: #161b22;
  border: 1px solid #30363d;
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, .6);
  overflow: hidden;
}

.ie-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 12px 16px;
  border-bottom: 1px solid #30363d;
  flex-shrink: 0;
}
.ie-title {
  font-size: 15px; color: #e2e2e2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ie-close {
  background: none; border: none; color: #8b949e;
  font-size: 26px; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px;
  transition: color .2s;
}
.ie-close:hover { color: #fff; }

/* 工具列：桌面橫排、手機底部橫欄（手指易觸達） */
.ie-toolbar {
  display: flex; gap: 8px; overflow-x: auto;
  padding: 10px 16px; border-bottom: 1px solid #30363d;
  flex-shrink: 0;
  scrollbar-width: none;
}
.ie-toolbar::-webkit-scrollbar { display: none; }
.ie-toolbar[hidden] { display: none; }
.ie-tool-btn {
  flex-shrink: 0;
  min-height: 44px; padding: 0 16px;
  background: #171b26; border: 1px solid #34487f; border-radius: 6px;
  color: #d5d9e6; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ie-tool-btn:hover { border-color: #4f8cff; color: #fff; }
.ie-tool-btn.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }

/* 工作區：Canvas 由 JS 排版，黑底凸顯影像邊界 */
.ie-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  min-height: 220px;
  padding: 12px;
  background: #0d1117;
  background-image:
    linear-gradient(45deg, #12161d 25%, transparent 25%),
    linear-gradient(-45deg, #12161d 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #12161d 75%),
    linear-gradient(-45deg, transparent 75%, #12161d 75%);
  background-size: 20px 20px;
  background-position: 0 0, 0 10px, 10px -10px, -10px 0;
  overflow: auto;
  overscroll-behavior: contain;
}
.ie-stage canvas {
  display: block;
  max-width: 100%;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, .5);
}

/* 工具參數面板 */
.ie-panel {
  padding: 10px 16px;
  border-top: 1px solid #30363d;
  flex-shrink: 0;
  max-height: 30vh; overflow-y: auto;
}
.ie-panel[hidden] { display: none; }

.ie-status {
  margin: 0; padding: 8px 16px;
  font-size: 13px; color: #8b949e;
  flex-shrink: 0;
}
.ie-status[hidden] { display: none; }
.ie-status[data-kind="error"] { color: #ff7b72; }
.ie-status[data-kind="info"] { color: #d29922; }

.ie-hint {
  margin: 0; padding: 0 16px 8px;
  font-size: 12px; color: #6e7681; line-height: 1.6;
  flex-shrink: 0;
}

.ie-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  /* 匯出面板（.ie-export）與按鈕同列；窄螢幕若無法換行會把「套用／下載」擠出
     .ie-box 的 overflow:hidden 之外變成點不到，故允許換行（桌面寬度足夠時不影響） */
  flex-wrap: wrap;
  padding: 12px 16px;
  border-top: 1px solid #30363d;
  flex-shrink: 0;
}
.ie-btn {
  min-height: 44px; padding: 0 20px;
  background: #171b26; border: 1px solid #34487f; border-radius: 25px 0 25px 0;
  color: #d5d9e6; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.ie-btn:hover:not(:disabled) { border-color: #4f8cff; color: #fff; }
.ie-btn:disabled { opacity: .5; cursor: not-allowed; }
.ie-btn-primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.ie-btn-primary:hover:not(:disabled) { background: #388bfd; border-color: #388bfd; }

/* 載入／匯出中：整個工作區鎖定指標 */
.ie-overlay[data-ie-state="loading"] .ie-stage,
.ie-overlay[data-ie-state="exporting"] .ie-stage { pointer-events: none; opacity: .7; }

@media (max-width: 768px) {
  .ie-overlay { padding: 0; }
  .ie-box {
    max-width: none; max-height: none;
    width: 100%; height: 100%;
    border-radius: 0; border: none;
  }
  .ie-stage { padding: 8px; }
  .ie-panel { max-height: 26vh; }
  /* 工具列移到畫面底部（手指易觸達） */
  .ie-overlay .ie-box { flex-direction: column; }
  .ie-toolbar {
    order: 10;
    border-bottom: none; border-top: 1px solid #30363d;
  }
  .ie-actions { order: 11; }
  .ie-hint { display: none; }
  .ie-actions .ie-btn { flex: 1; }

  /* 內嵌模式（工具頁）：維持文件流，不套用全螢幕與工具列下移 */
  .ie-box-embed { height: auto; border-radius: 12px; border: 1px solid #30363d; }
  .ie-box-embed .ie-toolbar { order: 0; border-top: none; border-bottom: 1px solid #30363d; }
  .ie-box-embed .ie-actions { order: 0; }
  .ie-box-embed .ie-hint { display: block; }
}

/* --- 工具面板：共用表單控制項 --- */
.ie-field {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ie-field:last-child { margin-bottom: 0; }
.ie-field-label {
  flex-shrink: 0; min-width: 68px;
  font-size: 12px; color: #8b949e;
}
.ie-slider {
  display: flex; align-items: center; gap: 8px;
  flex: 1 1 200px; min-width: 150px;
}
.ie-range {
  flex: 1; min-width: 0;
  height: 28px; margin: 0;
  accent-color: #1f6feb;
  background: transparent; cursor: pointer;
}
.ie-range:disabled { opacity: .4; cursor: not-allowed; }
.ie-range-val {
  flex-shrink: 0; min-width: 52px; text-align: right;
  font-size: 12px; color: #d5d9e6;
  font-variant-numeric: tabular-nums;
}
.ie-seg {
  display: flex; flex-wrap: wrap; gap: 6px;
  flex: 1 1 auto;
}
.ie-seg-btn {
  min-height: 34px; padding: 0 12px;
  background: #171b26; border: 1px solid #34487f; border-radius: 6px;
  color: #d5d9e6; font-size: 12px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.ie-seg-btn:hover { border-color: #4f8cff; color: #fff; }
.ie-seg-btn.active { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.ie-input,
.ie-select {
  flex: 1 1 180px; min-width: 0;
  min-height: 34px; padding: 0 10px;
  background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
  color: #e2e2e2; font-size: 13px;
}
.ie-input:focus,
.ie-select:focus { outline: none; border-color: #4f8cff; }
.ie-note {
  margin: 0 0 10px;
  font-size: 12px; line-height: 1.6; color: #6e7681;
}
.ie-note:last-child { margin-bottom: 0; }

/* --- 馬賽克：區域列表 --- */
.ie-list-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin: 4px 0 8px;
}
.ie-region-list { display: flex; flex-direction: column; gap: 6px; }
.ie-region-item {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  background: #0d1117; border: 1px solid #30363d; border-radius: 6px;
  cursor: pointer;
  transition: border-color .15s, background .15s;
}
.ie-region-item:hover { border-color: #4f8cff; }
.ie-region-item.active { border-color: #1f6feb; background: #132039; }
.ie-region-info {
  flex: 1; font-size: 12px; color: #d5d9e6;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ie-region-del {
  flex-shrink: 0; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  background: none; border: 1px solid #30363d; border-radius: 6px;
  color: #8b949e; font-size: 17px; line-height: 1; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ie-region-del:hover { border-color: #ff7b72; color: #ff7b72; }
.ie-empty { font-size: 12px; color: #6e7681; }

/* --- 水印：九宮格位置與勾選項 --- */
.ie-grid9 {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 4px; width: 96px;
}
.ie-grid-btn {
  min-height: 28px; padding: 0;
  aspect-ratio: 1 / 1;
  background: #0d1117; border: 1px solid #34487f; border-radius: 4px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.ie-grid-btn:hover { border-color: #4f8cff; }
.ie-grid-btn.active { background: #1f6feb; border-color: #1f6feb; }
.ie-check {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 34px;
  font-size: 12px; color: #d5d9e6; cursor: pointer;
}
.ie-check input {
  width: 16px; height: 16px; margin: 0;
  accent-color: #1f6feb; cursor: pointer;
}

/* --- 裁切：自訂尺寸輸入（兩個窄輸入框並排） --- */
.ie-size {
  display: flex; align-items: center; gap: 6px;
  flex: 1 1 auto;
}
.ie-size .ie-input {
  flex: 0 1 96px; min-width: 72px;
  text-align: center;
}
.ie-size-sep { font-size: 12px; color: #8b949e; }

/* --- 匯出面板與上傳結果 --- */
.ie-export {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  flex: 1;
  margin-right: auto;
}
.ie-result {
  margin: 0 16px 12px;
  padding: 10px 12px;
  background: #0d1117; border: 1px solid #1f6feb; border-radius: 6px;
}
.ie-result[hidden] { display: none; }
.ie-result-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ie-result-url {
  flex: 1 1 260px; min-width: 0;
  min-height: 34px; padding: 0 10px;
  background: #161b22; border: 1px solid #30363d; border-radius: 6px;
  color: #e2e2e2; font-size: 12px;
}
.ie-result-url:focus { outline: none; border-color: #4f8cff; }
.ie-result-link {
  flex-shrink: 0;
  font-size: 12px; color: #4f8cff; text-decoration: none;
}
.ie-result-link:hover { text-decoration: underline; }
.ie-result-note { margin: 8px 0 0; font-size: 12px; color: #6e7681; }
.ie-btn-sm {
  min-height: 32px; padding: 0 12px; font-size: 12px;
}

/* --- 內嵌模式（工具頁）：文件流內的一般卡片 --- */
.ie-box-embed {
  max-width: 100%; max-height: none;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}
.ie-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 260px; padding: 36px 20px;
  background:
    radial-gradient(700px 260px at 50% -25%, rgba(79, 140, 255, .10), transparent 62%),
    #0d1117;
  border: 2px dashed #34487f; border-radius: 12px;
  margin: 16px;
  text-align: center;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.ie-drop[hidden] { display: none; }
.ie-drop.dragover {
  border-color: #4f8cff;
  background:
    radial-gradient(700px 260px at 50% -25%, rgba(79, 140, 255, .22), transparent 62%),
    #132039;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, .12);
}
.ie-drop-main {
  margin: 0; font-size: 14px; color: #d5d9e6;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
}
.ie-drop-hint {
  margin: 0; max-width: 460px;
  font-size: 12px; line-height: 1.6; color: #6e7681;
}
.ie-file { display: none; }

/* --- 內嵌模式：工作區給足高度，避免 Canvas 排版塌陷 --- */
.ie-box-embed .ie-stage { min-height: 320px; }

/* =========================================================
   🧰 獨立工具頁（/tools、/tools/:slug）
   沿用全站語彙：--card 卡片、#34487f 邊框、#4f8cff 品牌色、
   16px 圓角＋柔和陰影（與 terms/faq 內容頁一致）、
   招牌按鈕圓角 25px 0、.drop-area 的徑向光暈手法。
   ========================================================= */

/* --- 麵包屑（SEO：內鏈回首頁／上層 + 層級訊號；/tag/* 與 /tools/* 共用） --- */
.breadcrumb {
  font-size: 12.5px;
  color: #8b949e;
  margin-bottom: 14px;
  padding: 0 4px;
}
.breadcrumb a {
  color: #8fb1ff;
  text-decoration: none;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .crumb-sep { margin: 0 6px; color: #484f58; }

.tools-page {
  max-width: 1000px;
  margin: 0 auto;
  padding: 24px 0 48px;
}

/* --- Hero：品牌光暈卡 --- */
.tool-hero {
  position: relative;
  text-align: center;
  padding: 36px 24px 30px;
  margin-bottom: 26px;
  border: 1px solid #262b40;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(900px 340px at 12% -25%, rgba(79, 140, 255, .18), transparent 62%),
    radial-gradient(760px 300px at 108% 118%, rgba(122, 255, 214, .07), transparent 62%),
    var(--card);
}
/* 頂部一道品牌細光 */
.tool-hero::after {
  content: "";
  position: absolute; inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 140, 255, .65), transparent);
}
.tool-hero h1 {
  margin: 0 0 12px;
  font-size: clamp(22px, 3.2vw, 30px);
  font-weight: 600; line-height: 1.3; letter-spacing: .3px;
  color: var(--fg);
}
.tool-tagline {
  max-width: 620px;
  margin: 0 auto 18px;
  font-size: 15px; line-height: 1.8; color: var(--muted);
}
.tool-badges {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: 8px; list-style: none; margin: 0; padding: 0;
}
.tool-badges li {
  padding: 4px 13px;
  font-size: 12px; letter-spacing: .2px; color: #8fb1ff;
  background: rgba(79, 140, 255, .08);
  border: 1px solid #34487f; border-radius: 999px;
}

/* --- 工作區（內嵌編輯器）：僅負責留白，外框交給 .ie-box-embed --- */
.tool-workspace { margin: 0 auto 30px; }
.tool-workspace:empty { display: none; }

/* --- 內容區塊（對齊 .terms-box 的卡片語言） --- */
.tool-section {
  margin: 0 auto 22px;
  padding: 22px 24px;
  background: #0d1117;
  border: 1px solid #21262d;
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, .3);
}
.tool-section h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 16px;
  font-size: 17px; font-weight: 600; color: var(--fg);
}
.tool-section h2::before {
  content: ""; flex-shrink: 0;
  width: 3px; height: 17px; border-radius: 2px;
  background: linear-gradient(180deg, #4f8cff, rgba(79, 140, 255, .25));
}
.tool-steps,
.tool-points {
  margin: 0; padding-left: 22px;
  font-size: 14px; line-height: 1.95; color: #c9d1d9;
}
.tool-steps li,
.tool-points li { margin-bottom: 8px; }
.tool-steps li:last-child,
.tool-points li:last-child { margin-bottom: 0; }
.tool-steps li::marker { color: #4f8cff; font-weight: 600; }
.tool-points li::marker { color: #4f8cff; }
.tool-points strong { color: var(--fg); }

/* --- FAQ（手風琴） --- */
.tool-faq { display: flex; flex-direction: column; gap: 8px; }
.tool-faq-item {
  background: var(--card);
  border: 1px solid #262b40; border-radius: 10px;
  transition: border-color .18s, background .18s;
}
.tool-faq-item:hover { border-color: #34487f; }
.tool-faq-item[open] { border-color: #34487f; }
.tool-faq-item summary {
  position: relative;
  display: block;
  min-height: 46px; padding: 14px 16px 14px 38px;
  font-size: 14px; color: #e2e2e2; cursor: pointer;
  list-style: none;
}
.tool-faq-item summary::-webkit-details-marker { display: none; }
.tool-faq-item summary::before {
  content: "＋";
  position: absolute; left: 16px; top: 13px;
  font-size: 15px; line-height: 1; color: #4f8cff;
}
.tool-faq-item[open] summary::before { content: "－"; }
.tool-faq-item p {
  margin: 0; padding: 0 16px 16px 38px;
  font-size: 13px; line-height: 1.85; color: var(--muted);
}

/* --- CTA 引流 --- */
.tool-cta {
  margin: 0 auto 22px;
  padding: 28px 24px;
  text-align: center;
  border: 1px solid #34487f; border-radius: 16px;
  background:
    radial-gradient(700px 260px at 50% -40%, rgba(79, 140, 255, .22), transparent 65%),
    #132039;
}
.tool-cta h2 { margin: 0 0 8px; font-size: 19px; font-weight: 600; color: var(--fg); }
.tool-cta p { margin: 0 0 16px; font-size: 14px; line-height: 1.8; color: #b6bcc6; }
.tool-cta-btn {
  display: inline-block;
  padding: 12px 30px;
  font-size: 14px; color: #fff; text-decoration: none;
  background: #1f6feb; border: 1px solid #388bfd;
  border-radius: 25px 0 25px 0;
  transition: background .15s, box-shadow .15s, transform .15s;
}
.tool-cta-btn:hover {
  background: #388bfd;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(31, 111, 235, .35);
}

/* --- 樞紐頁：工具卡 --- */
.tool-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 14px;
}
.tool-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 20px;
  background: var(--card);
  border: 1px solid #262b40; border-radius: 12px;
  text-decoration: none; overflow: hidden;
  transition: border-color .18s, background .18s, transform .18s, box-shadow .18s;
}
.tool-card::before {
  content: "";
  position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(79, 140, 255, .6), transparent);
  opacity: 0; transition: opacity .18s;
}
.tool-card:hover {
  border-color: #4f8cff;
  background: #171b26;
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .35);
}
.tool-card:hover::before { opacity: 1; }
.tool-card h3 { margin: 0; font-size: 16px; font-weight: 600; color: var(--fg); }
.tool-card p { margin: 0; font-size: 13px; line-height: 1.75; color: var(--muted); }
.tool-card-go { margin-top: auto; padding-top: 6px; font-size: 13px; color: #4f8cff; }

/* --- 頁尾互鏈 --- */
.tool-more {
  margin: 0 auto;
  padding: 20px 24px;
  background: #0d1117;
  border: 1px solid #21262d; border-radius: 16px;
}
.tool-more h2 {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--fg);
}
.tool-more h2::before {
  content: ""; flex-shrink: 0;
  width: 3px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #4f8cff, rgba(79, 140, 255, .25));
}
.tool-more ul {
  display: flex; flex-wrap: wrap; gap: 10px;
  list-style: none; margin: 0; padding: 0;
}
.tool-more a {
  display: inline-block; padding: 6px 14px;
  font-size: 13px; color: #8fb1ff; text-decoration: none;
  background: #171b26; border: 1px solid #34487f; border-radius: 999px;
  transition: background .15s, border-color .15s, color .15s;
}
.tool-more a:hover { background: #1f6feb; border-color: #1f6feb; color: #fff; }

/* --- 內嵌編輯器：外框對齊全站卡片語言 --- */
.ie-box-embed {
  border-color: #262b40;
  border-radius: 16px;
}

@media (max-width: 768px) {
  .tools-page { padding: 16px 0 36px; }
  .tool-hero { padding: 26px 16px 22px; border-radius: 12px; }
  .tool-hero h1 { font-size: 21px; }
  .tool-tagline { font-size: 14px; }
  .tool-section { padding: 18px 16px; border-radius: 12px; }
  .tool-cta { padding: 22px 16px; border-radius: 12px; }
  .tool-more { padding: 18px 16px; border-radius: 12px; }
  .tool-cards { grid-template-columns: 1fr; }
  .tool-faq-item p { padding-left: 16px; }
  .ie-box-embed { border-radius: 12px; }
  .ie-box-embed .ie-stage { min-height: 240px; }
}

/* =========================================================
   🔄 轉檔工具工作區（.ic-*）
   沿用 .ie-* 與工具頁語彙：卡片 #0d1117、邊框 #34487f、
   品牌色 #1f6feb／#4f8cff、招牌按鈕圓角 25px 0。
   ========================================================= */
.ic-panel {
  padding: 16px;
  background: #0d1117;
  border: 1px solid #262b40; border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* --- 拖放區 --- */
.ic-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px;
  min-height: 220px; padding: 32px 20px;
  background:
    radial-gradient(700px 260px at 50% -25%, rgba(79, 140, 255, .10), transparent 62%),
    #0d1117;
  border: 2px dashed #34487f; border-radius: 12px;
  text-align: center; cursor: pointer;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.ic-drop:hover { border-color: #4f8cff; }
.ic-drop:focus-visible { outline: 2px solid #4f8cff; outline-offset: 2px; }
.ic-drop.dragover {
  border-color: #4f8cff;
  background:
    radial-gradient(700px 260px at 50% -25%, rgba(79, 140, 255, .22), transparent 62%),
    #132039;
  box-shadow: 0 0 0 4px rgba(79, 140, 255, .12);
}
.ic-drop-main { margin: 0; font-size: 14px; color: #d5d9e6; }
.ic-drop-hint {
  margin: 0; max-width: 520px;
  font-size: 12px; line-height: 1.7; color: #6e7681;
}
.ic-input { display: none; }

/* --- 檔案清單 --- */
.ic-list {
  display: flex; flex-direction: column; gap: 8px;
  list-style: none; margin: 14px 0 0; padding: 0;
}
.ic-list[hidden] { display: none; }
.ic-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: #161b22; border: 1px solid #262b40; border-radius: 10px;
}
/* 批次改名：拖曳把手（調整順序＝編號指派順序） */
.ic-grip {
  flex-shrink: 0;
  width: 18px; text-align: center;
  color: #484f58; font-size: 14px;
  cursor: grab; user-select: none;
}
.ic-grip:hover { color: #8b949e; }
.ic-item.dragging { opacity: .45; border-style: dashed; }
/** 批次改名：新檔名（原始檔名下方） */
.ic-newname {
  margin-top: 2px;
  font-size: 13px; color: #7ee2b8;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.ic-thumb {
  flex-shrink: 0;
  width: 44px; height: 44px;
  object-fit: cover; border-radius: 6px; background: #0d1117;
}
.ic-meta { flex: 1 1 auto; min-width: 0; }
.ic-name {
  font-size: 13px; color: #d5d9e6;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ic-sub {
  margin-top: 2px;
  font-size: 12px; color: #6e7681;
  font-variant-numeric: tabular-nums;
}
.ic-badge {
  flex-shrink: 0;
  padding: 2px 9px;
  font-size: 12px; color: #8fb1ff;
  border: 1px solid #34487f; border-radius: 999px;
}
.ic-badge[data-state="processing"] { color: #d29922; border-color: #6b5a1f; }
.ic-badge[data-state="done"] { color: #7ee2b8; border-color: #1f6f4a; }
.ic-badge[data-state="failed"] { color: #ff7b72; border-color: #6b2b28; }
.ic-remove {
  flex-shrink: 0;
  min-height: 32px; padding: 0 12px;
  background: transparent; border: 1px solid #34487f; border-radius: 999px;
  color: #8b949e; font-size: 12px; cursor: pointer;
  transition: border-color .15s, color .15s;
}
.ic-remove:hover:not(:disabled) { border-color: #ff7b72; color: #ff7b72; }
.ic-remove:disabled { opacity: .4; cursor: not-allowed; }

/* --- 輸出選項 --- */
.ic-opts { margin-top: 14px; padding-top: 12px; border-top: 1px solid #262b40; }
.ic-opts[hidden] { display: none; }
.ic-field {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}
.ic-field:last-child { margin-bottom: 0; }
/* .ic-field 為 flex，需覆蓋 UA 的 [hidden]，否則隱藏無效（PNG 目標頁要隱藏品質欄） */
.ic-field[hidden] { display: none; }
.ic-field-label { flex-shrink: 0; min-width: 68px; font-size: 12px; color: #8b949e; }
.ic-target { font-size: 13px; color: #d5d9e6; }
.ic-slider { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; min-width: 150px; }
.ic-range {
  flex: 1; min-width: 0;
  height: 28px; margin: 0;
  accent-color: #1f6feb;
  background: transparent; cursor: pointer;
}
.ic-range:disabled { opacity: .4; cursor: not-allowed; }
.ic-range-val {
  flex-shrink: 0; min-width: 52px; text-align: right;
  font-size: 12px; color: #d5d9e6;
  font-variant-numeric: tabular-nums;
}
.ic-select {
  flex: 1 1 180px; min-width: 0;
  min-height: 38px; padding: 0 10px;
  background: #171b26; border: 1px solid #34487f; border-radius: 6px;
  color: #d5d9e6; font-size: 13px; cursor: pointer;
}
.ic-select:focus { outline: none; border-color: #4f8cff; }
/* 批次改名：欄位內文字輸入框（沿用 .ic-select 樣式基礎） */
.ic-select[type="text"][data-ir-prefix],
.ic-select[type="text"][data-ir-suffix],
.ic-select[type="text"][data-ir-number],
.ic-select[type="text"][data-ir-find],
.ic-select[type="text"][data-ir-replace] {
  flex: 1 1 180px; min-width: 0;
  min-height: 38px; padding: 0 10px;
  background: #171b26; border: 1px solid #34487f; border-radius: 6px;
  color: #d5d9e6; font-size: 13px;
}
.ic-select[type="text"]:focus { outline: none; border-color: #4f8cff; }
.ic-select[type="text"]::placeholder { color: #6e7681; }
/* 批次改名：核取方塊（保留原始檔名） */
.ic-check {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: #d5d9e6; cursor: pointer;
}
.ic-check input { accent-color: #1f6feb; width: 16px; height: 16px; cursor: pointer; }
/* 批次改名：欄位旁的格式提示（編號） */
.ic-field-hint {
  flex-basis: 100%;
  font-size: 12px; color: #6e7681;
}
.ic-field-hint code {
  padding: 1px 6px; border-radius: 4px;
  background: #171b26; border: 1px solid #34487f;
  color: #8fb1ff; font-size: 12px;
}
.ic-note {
  margin: 0 0 10px;
  font-size: 12px; line-height: 1.6; color: #6e7681;
}
.ic-note[hidden] { display: none; }

/* --- 動作列與狀態 --- */
.ic-actions {
  display: flex; justify-content: flex-end; gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px; padding-top: 12px;
  border-top: 1px solid #262b40;
}
.ic-btn {
  min-height: 44px; padding: 0 20px;
  background: #171b26; border: 1px solid #34487f; border-radius: 25px 0 25px 0;
  color: #d5d9e6; font-size: 13px; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, opacity .15s;
}
.ic-btn:hover:not(:disabled) { border-color: #4f8cff; color: #fff; }
.ic-btn:disabled { opacity: .5; cursor: not-allowed; }
.ic-btn-primary { background: #1f6feb; border-color: #1f6feb; color: #fff; }
.ic-btn-primary:hover:not(:disabled) { background: #388bfd; border-color: #388bfd; }
.ic-status { margin: 12px 0 0; font-size: 13px; color: #8b949e; line-height: 1.7; }
.ic-status[hidden] { display: none; }
.ic-status[data-kind="error"] { color: #ff7b72; }
.ic-status[data-kind="info"] { color: #d29922; }

/* --- 批量進度 --- */
.ic-progress {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ic-progress[hidden] { display: none; }
.ic-bar {
  flex: 1 1 200px; min-width: 140px; height: 8px;
  background: #161b22; border: 1px solid #262b40; border-radius: 999px;
  overflow: hidden;
}
.ic-bar-fill {
  display: block; width: 0; height: 100%;
  background: linear-gradient(90deg, #1f6feb, #4f8cff);
  transition: width .2s ease;
}
.ic-progress-text {
  margin: 0;
  font-size: 12px; color: #8b949e;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
  .ic-panel { padding: 14px; border-radius: 12px; }
  .ic-drop { min-height: 180px; padding: 24px 16px; }
  .ic-field-label { min-width: 0; }
  .ic-actions .ic-btn { flex: 1; }
  .ic-progress-text { flex-basis: 100%; order: 2; }
  .ic-progress .ic-btn { flex: 1; order: 3; }
}