/* ==========================================================================
   FlowKit · components
   品牌、印相台视觉、上传区、任务卡、预览层。
   ========================================================================== */

/* --------------------------------------------------------------- 品牌 */

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:17px;
  font-weight:700;
  letter-spacing:-.01em;
  color:var(--ink);
}
.brand-logo{display:block;width:34px;height:34px;object-fit:contain;border-radius:9px;flex:0 0 auto}
.brand-slogan{
  padding-left:10px;
  border-left:1px solid var(--line);
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:0!important;
  color:var(--faint);
}
.logo{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:9px;
  background:var(--sunken);
  border:1px solid var(--line);
  color:var(--faint);
  font-size:17px;
  font-weight:700;
}

/* 状态徽标：左侧圆点表示「本地、安全」 */
.privacy{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 12px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.04em;
  color:var(--muted);
  background:var(--sunken);
  border:1px solid var(--line);
  border-radius:99px;
}
.privacy::before{
  content:"";
  width:6px;
  height:6px;
  flex:none;
  border-radius:50%;
  background:var(--ok);
}

/* ---------------------------------------------------------- 语言开关 */

/* 与预览弹层的分段控件同一套语言：sunken 轨道 + ink 选中胶囊。
   注意 base.css 的 button:hover:enabled 权重 (0,2,1) 会盖住同层级的选中态，
   所以选中态必须显式补一条 :hover:enabled 压回去。 */
.lang-toggle{
  display:inline-flex;
  align-items:center;
  gap:2px;
  padding:2px;
  flex:none;
  background:var(--sunken);
  border:1px solid var(--line);
  border-radius:99px;
}
.lang-toggle button{
  min-width:32px;
  padding:3px 8px;
  border:0;
  border-radius:99px;
  background:transparent;
  font-family:var(--font-mono);
  font-size:12px;
  font-weight:600;
  letter-spacing:.02em;
  line-height:1.5;
  color:var(--muted);
}
.lang-toggle button:hover:enabled:not([aria-pressed=true]){background:var(--surface);color:var(--ink)}
.lang-toggle button[aria-pressed=true]{background:var(--ink);color:#fff}
.lang-toggle button[aria-pressed=true]:hover:enabled{background:#23272E;color:#fff}

/* ------------------------------------------------- 印相台视觉（首页） */

.intro-visual{width:100%}

.sheet{
  --mk:#C4CBD3;
  --mklen:9px;
  --mkw:1.5px;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  padding:18px;
  position:relative;
  background-color:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  /* 四角定位角标：印相台上的套准标记 */
  background-image:
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk));
  background-repeat:no-repeat;
  background-size:
    var(--mklen) var(--mkw),var(--mkw) var(--mklen),
    var(--mklen) var(--mkw),var(--mkw) var(--mklen),
    var(--mklen) var(--mkw),var(--mkw) var(--mklen),
    var(--mklen) var(--mkw),var(--mkw) var(--mklen);
  background-position:
    left 7px top 7px,left 7px top 7px,
    right 7px top 7px,right 7px top 7px,
    left 7px bottom 7px,left 7px bottom 7px,
    right 7px bottom 7px,right 7px bottom 7px;
}

.sheet-cell{display:grid;gap:6px;min-width:0}
.sheet-cell .frame{
  display:block;
  aspect-ratio:4/3;
  border-radius:7px;
  border:1px solid var(--line-2);
  background:linear-gradient(150deg,#D6DCE2,#BCC5CF);
}
/* 每格一帧不同的抽象构图，读起来像一叠待处理的照片 */
.sheet-cell:not(.marked):nth-child(1) .frame{background:linear-gradient(180deg,#DAE0E6 0 58%,#C0C9D2 58% 100%)}
.sheet-cell:not(.marked):nth-child(2) .frame{
  background:
    radial-gradient(13% 17% at 74% 28%,#F4F6F8 0 100%,transparent 100%),
    linear-gradient(180deg,#D9DFE5 0 62%,#C1CAD3 62% 100%);
}
.sheet-cell:not(.marked):nth-child(4) .frame{background:linear-gradient(126deg,#D8DEE4 0 47%,#C1CAD3 47% 100%)}
.sheet-cell:not(.marked):nth-child(5) .frame{background:repeating-linear-gradient(118deg,#DBE0E6 0 11px,#CBD3DB 11px 22px)}
.sheet-cell:not(.marked):nth-child(6) .frame{background:repeating-conic-gradient(#E6E9ED 0% 25%,#D3D9E0 0% 50%) 50%/13px 13px}
/* 被标记的一帧：品牌紫 + 选中勾，呼应「从中挑出」的动作 */
.sheet-cell.marked{position:relative}
.sheet-cell.marked .frame{
  border-color:transparent;
  background:linear-gradient(145deg,#DCD6FB,#B7AAF6);
  box-shadow:0 0 0 2px var(--surface),0 0 0 3.5px var(--brand);
}
.sheet-cell.marked::after{
  content:"";
  position:absolute;
  top:6px;
  right:6px;
  width:14px;
  height:14px;
  border-radius:50%;
  background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2 4.9 8.5 9.4 3.8' fill='none' stroke='white' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/9px no-repeat;
}

/* ------------------------------------------------------- 工具入口卡片 */

.hub-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding-bottom:clamp(30px,5vw,56px)}

.hub-card{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:24px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  color:var(--text);
  transition:border-color .18s ease,transform .18s ease,box-shadow .18s ease;
}
a.hub-card:hover{
  color:var(--text);
  border-color:#C4CBD3;
  transform:translateY(-2px);
  box-shadow:var(--shadow-1);
}
.hub-card h2{margin:16px 0 0}
.hub-card p{margin:8px 0 0;font-size:13px;max-width:36ch}
.hub-card.disabled{
  background:transparent;
  border-style:dashed;
  opacity:.72;
}
.card-cta{
  margin-top:18px;
  font-family:var(--font-mono);
  font-size:12px;
  letter-spacing:.06em;
  color:var(--brand-ink);
}
.card-cta.muted{color:var(--faint)}

/* --------------------------------------------------------- 上传投放区 */

.drop-zone{
  --mk:#C9CFD6;
  --mklen:14px;
  --mkw:1.5px;
  position:relative;
  margin:12px;
  padding:52px 24px 44px;
  text-align:center;
  border:1px solid var(--line);
  border-radius:var(--radius);
  background-color:var(--sunken);
  background-image:
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk)),
    linear-gradient(var(--mk),var(--mk)),linear-gradient(var(--mk),var(--mk));
  background-repeat:no-repeat;
  background-size:
    var(--mklen) var(--mkw),var(--mkw) var(--mklen),
    var(--mklen) var(--mkw),var(--mkw) var(--mklen),
    var(--mklen) var(--mkw),var(--mkw) var(--mklen),
    var(--mklen) var(--mkw),var(--mkw) var(--mklen);
  background-position:
    left 12px top 12px,left 12px top 12px,
    right 12px top 12px,right 12px top 12px,
    left 12px bottom 12px,left 12px bottom 12px,
    right 12px bottom 12px,right 12px bottom 12px;
  transition:border-color .2s ease,background-color .2s ease;
}
.drop-zone.dragging{border-color:var(--brand);background-color:var(--brand-tint)}
.drop-zone.dragging .upload-icon{background:var(--brand);color:#fff;border-color:var(--brand)}
.drop-zone h2{margin-bottom:4px}
.drop-zone .actions{justify-content:center;margin:22px 0 4px}
.drop-zone small{display:block;line-height:1.9}

.upload-icon{
  display:grid;
  place-items:center;
  width:54px;
  height:54px;
  margin:0 auto 16px;
  color:var(--brand-ink);
  background:var(--brand-tint);
  border:1px solid var(--brand-line);
  border-radius:var(--radius);
  transition:background .2s ease,color .2s ease,border-color .2s ease;
}

/* ---------------------------------------------------------- 列表工具条 */

.toolbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:12px 16px;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.toolbar label{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;color:var(--muted)}
.toolbar select{font-size:12px;padding:6px 28px 6px 9px}
.toolbar button{font-size:12px;padding:6px 11px}

/* ------------------------------------------------------------ 任务卡 */

.task-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(178px,1fr));
  gap:14px;
  padding:16px;
}
.task-grid.list{grid-template-columns:1fr}

.task-card{
  display:flex;
  flex-direction:column;
  min-width:0;
  padding:8px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.task-card:hover{border-color:#C9CFD6}
.task-card.processing,
.task-card.retrying{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-tint)}
.task-card.failed{border-color:#E8C6C1;background:#FEFAF9}
.task-card>.check{font-size:12px;color:var(--faint);margin-bottom:8px}

.thumb{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:132px;
  padding:0;
  border:1px solid var(--line-2);
  border-radius:var(--radius-sm);
  background:repeating-conic-gradient(#F0F2F4 0% 25%,#FFFFFF 0% 50%) 50%/14px 14px;
  overflow:hidden;
}
.thumb:hover:enabled{border-color:#C9CFD6;background:repeating-conic-gradient(#E9ECEF 0% 25%,#FBFCFC 0% 50%) 50%/14px 14px}
.thumb img{width:100%;height:100%;object-fit:contain}

.task-name{
  margin:10px 0 4px;
  font-size:12.5px;
  font-weight:600;
  color:var(--ink);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.task-meta{
  margin:0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--faint);
  overflow-wrap:anywhere;
}
/* 预估行：滚动进入视口后才算出来；未完成时保留占位，避免滚动中卡片高度跳动 */
.task-estimate{
  margin:2px 0 0;
  font-family:var(--font-mono);
  font-size:12px;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.task-status{
  margin:2px 0 0;
  font-size:12px;
  color:var(--muted);
  overflow-wrap:anywhere;
}
.completed .task-status{color:var(--ok);font-family:var(--font-mono)}
.failed .task-status{color:var(--danger)}

.task-actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.task-actions button{font-size:12px;padding:5px 9px}

/* 列表布局：勾选 / 缩略图 / 信息 / 操作
   用 flex 而非定列栅格：结果模式下没有勾选框，定列栅格会错位。 */
.list .task-card{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:14px;
  padding:10px 12px;
}
.list .task-card>.check{flex:none;margin:0}
.list .thumb{width:64px;height:64px;flex:none}
.list .task-card>div{min-width:0}
.list .task-card>div:not(.task-actions){flex:1 1 auto}
.list .task-name{margin:0}
.list .task-actions{flex:none;margin:0}

/* ------------------------------------------ 参数控件（压缩质量档位） */

/* 名称与读数一行，档位按钮组独占一行 */
.field-block{margin-bottom:14px}
.field-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:7px}
.field-head>span{font-size:13px}
.field-head output{font-family:var(--font-mono);font-size:13px;color:var(--ink)}

/* 五段按钮组：与预览标签同一交互语言，静止灰字 / 悬停白胶囊 / 选中墨黑胶囊 */
#params .seg{display:flex;gap:4px;padding:3px;background:var(--sunken);border:1px solid var(--line-2);border-radius:var(--radius)}
#params .seg .seg-item{
  position:relative;
  display:flex;
  flex:1;
  min-width:0;
  flex-direction:column;
  align-items:center;
  gap:1px;
  margin:0;
  padding:6px 2px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  color:var(--muted);
  transition:background .15s ease,color .15s ease;
}
/* 原生 radio 保留键盘与表单语义，仅隐藏外观 */
#params .seg .seg-item input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
#params .seg .seg-item>span{display:block;font-size:12px;font-weight:600;line-height:1.3;white-space:nowrap}
#params .seg .seg-item small{display:block;font-family:var(--font-mono);font-size:10px;line-height:1.2;color:var(--faint)}
#params .seg .seg-item:hover{background:var(--surface);color:var(--ink)}
#params .seg .seg-item:has(input:checked){background:var(--ink);color:#fff}
#params .seg .seg-item:has(input:checked) small{color:rgba(255,255,255,.6)}
#params .seg .seg-item:has(input:focus-visible){outline:2px solid var(--brand);outline-offset:2px}
/* PNG 不适用：整体淡化，且不响应悬停（含已选中段） */
#params .seg:has(input:disabled){opacity:.5}
#params .seg:has(input:disabled) .seg-item:hover{background:transparent;color:var(--muted)}
#params .seg:has(input:disabled) .seg-item:has(input:checked):hover{background:var(--ink);color:#fff}
/* 六段里「自定义」是三个字，多分一点宽度 */
#params .seg .seg-item-custom{flex:1.3}

/* 自定义档展开的百分比滑块 */
#params .range-row{margin-top:8px}
#params .range-row:has(input:disabled){opacity:.5}

/* 越界提示：与全站提示条同一语言（品牌紫） */
#quality-note{
  display:flex;
  gap:7px;
  align-items:flex-start;
  margin:8px 0 0;
  padding:8px 10px;
  font-size:12px;
  line-height:1.5;
  color:var(--brand-ink);
  background:var(--brand-tint);
  border:1px solid var(--brand-line);
  border-radius:var(--radius-sm);
}
#quality-note::before{
  content:"!";
  flex:none;
  width:15px;
  height:15px;
  margin-top:2px;
  border-radius:50%;
  background:var(--brand);
  color:#fff;
  font-family:var(--font-mono);
  font-size:10px;
  font-weight:700;
  line-height:15px;
  text-align:center;
}

/* ------------------------------------------------------------ 提示条 */

/* 浮动在视口底部居中：导入几百张时汇总会挂很久，占在正文里会把版面顶开。
   时长随文本长度走，悬停暂停；与 #toast 同区，层级略高一点。 */
#notice{
  position:fixed;
  bottom:max(30px,env(safe-area-inset-bottom));
  left:50%;
  transform:translateX(-50%);
  width:max-content;
  max-width:min(680px,calc(100vw - 32px));
  padding:11px 18px;
  font-size:13px;
  line-height:1.55;
  color:var(--brand-ink);
  background:var(--brand-tint);
  border:1px solid var(--brand-line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-2);
  z-index:210;
}

@media(prefers-reduced-motion:no-preference){
  #notice{animation:notice-rise .22s cubic-bezier(.22,.61,.36,1)}
  @keyframes notice-rise{
    from{opacity:0;transform:translate(-50%,10px)}
    to{opacity:1;transform:translate(-50%,0)}
  }
}

/* ---------------------------------------------------------- 预览浮层 */

dialog{
  width:min(1020px,94vw);
  max-height:92vh;
  overflow:auto;
  padding:24px;
  color:var(--text);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
}
dialog::backdrop{background:rgba(15,17,21,.62);backdrop-filter:blur(3px)}

.image-viewport{
  display:flex;
  align-items:center;
  justify-content:center;
  height:380px;
  overflow:hidden;
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  background:repeating-conic-gradient(#EBEEF1 0% 25%,#FFFFFF 0% 50%) 50%/16px 16px;
  touch-action:none;
  cursor:grab;
}
.image-viewport img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  user-select:none;
  -webkit-user-drag:none;
  transform-origin:center;
}
#preview-info{font-size:13px}

@media(max-width:760px){
  /* 隐私徽标在窄屏让位给语言开关：两枚控件加品牌一起放不进 360px */
  .brand-slogan,.privacy{display:none}
  .hub-grid{grid-template-columns:1fr}
  .task-grid{grid-template-columns:repeat(2,minmax(0,1fr));padding:12px;gap:10px}
  .toolbar{padding:10px 12px;gap:8px;flex-wrap:wrap}
  .toolbar select{max-width:118px}
  .drop-zone{padding:40px 16px 36px}
  .list .task-card{gap:10px;padding:8px 10px}
  .list .thumb{width:52px;height:52px}
  .list .task-actions{gap:4px}
  .list .task-actions button{padding:4px 7px}
  .zoom{align-items:flex-start;flex-direction:column;gap:6px}
  dialog{padding:18px}
}

/* ------------------------------------------ SEO 说明区（跟随界面语言） */

/* 工具页正文之后的一段说明文字，服务检索与 AI 解析：
   处理流程 / 可以做什么 / 隐私说明 / FAQ。
   中英两页各有一份，结构完全相同、只差语言：文案一律挂在字典的 seo.* 键上，
   靠 applyI18n 跟着界面语言重刷——界面切成英文就整块变英文，切回中文再变回来。
   所以这里不挂 data-lang-only：那个标记只留给 head 里真正只属于一侧的标签
   （中文页的 applicable-device），正文挂上它会让切语言时整块消失。
   首屏的主动作（拖入图片）仍在上方，说明文字退到折叠线以下。 */
.seo-copy{
  margin-top:34px;
  padding-top:26px;
  border-top:1px solid var(--line-2);
}

.seo-copy h2{font-size:16px;margin:0 0 12px}
.seo-copy h3{font-size:13.5px;margin:0 0 4px}
.seo-copy p{font-size:13.5px;line-height:1.72}

/* 段落不设行宽上限，中英都跟着容器宽度自然折行。
   这里原本写 max-width:74ch——`ch` 是当前字体里「0」的宽度，一个汉字
   占两格，同一个数值英文是 74 个字符、中文只剩约 37 个字，中文段落会在
   容器一半处折行、右侧空出一大片，与同区块里满宽的 h2 也对不齐。 */
.seo-copy>.seo-block+.seo-block{margin-top:30px}

/* 三步流程：序号已写在文案里，这里只负责分栏与行距 */
.seo-list{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px 18px;
}
.seo-list li{font-size:13.5px;line-height:1.72;color:var(--muted);overflow-wrap:anywhere}

/* 能力清单：两项一行，白卡片压住纸底，与工具页的面板同一套语言 */
.seo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.seo-item{
  padding:14px 16px;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius);
}
.seo-item p{margin:0;font-size:13px}

/* FAQ：问题用墨色压住，答案低对比 */
.seo-faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 26px}
.seo-faq-item h3{color:var(--ink)}
.seo-faq-item p{margin:0;font-size:13px}

/* 首页说明区的折叠（工具页仍是常显的说明区）。
   用原生 <details> 而不是 JS 折叠：内容始终留在 HTML 里，爬虫读得到；
   键盘操作、aria 展开状态、页内查找自动展开都由浏览器白送。
   标题放进 summary，收起时四个小标题与文档大纲都还在。
   原生 details 的平滑展开动画各浏览器支持不一，这里刻意不做动画。 */
.fold+.fold{border-top:1px solid var(--line-2)}
.fold>summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 0;
  cursor:pointer;
  list-style:none;
}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary h2{margin:0}
/* 加号用等宽字体，与站点其它技术标注同一层语言；展开时换成减号 */
.fold>summary::after{
  content:'+';
  flex:0 0 auto;
  font-family:var(--font-mono);
  font-size:15px;
  line-height:1;
  color:var(--muted);
}
.fold[open]>summary::after{content:'−'}
.fold>summary:hover::after{color:var(--brand)}
.fold>.seo-block{padding-bottom:18px}
/* 首个区块的 summary 自己不再留上边距，由 .seo-copy 的 padding-top 定间距 */
.seo-copy>.fold:first-child>summary{padding-top:0}

@media(max-width:860px){
  .seo-list,.seo-grid,.seo-faq{grid-template-columns:1fr}
}