/* 公共样式：首页 /app 工具页 /字体页 /文字翻译页 共用（从原来的 index.html 里抽出来） */
  @font-face {
    font-family: 'UKIJ Tor';
    src: url('/static/fonts/UKIJTor.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  @font-face {
    font-family: 'UKIJ Kesme';
    src: url('/static/fonts/UKIJKesme.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  :root {
    --bg: #f2f2f4;
    --panel: #ffffff;
    --text: #0a0a0b;
    --muted: #6e6e76;
    --line: rgba(0,0,0,.09);
    --accent: #0a0a0b;
    --accent-hover: #26262a;
    --accent-text: #ffffff;
    --danger: #d92d20;
  }
  * { box-sizing: border-box; }
  body {
    margin: 0; background: var(--bg); color: var(--text);
    font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "SF Pro Text",
      "Helvetica Neue", "UKIJ Tor", "PingFang SC", "Microsoft YaHei", sans-serif;
    -webkit-font-smoothing: antialiased; line-height: 1.5;
  }
  .grid-dots {
    position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(circle, rgba(0,0,0,0.083) 1.2px, transparent 1.8px);
    background-size: 20px 20px;
    -webkit-mask-image: radial-gradient(ellipse 56% 52% at 52% 42%, #000 0%, transparent 70%);
    mask-image: radial-gradient(ellipse 56% 52% at 52% 42%, #000 0%, transparent 70%);
  }
  /* 背景：纯 CSS 渐变 + 缓慢漂移（原来是 WebGL 画布，但画布在合成器里是分块更新的，
     切主题时偶尔只更新一部分贴片，会残留一条旧颜色 → 看着"闪一下"。CSS 背景是普通绘制层，没有这个问题。 */
  #grainient {
    position: fixed; inset: 0; z-index: -2; overflow: hidden;
    background:
      radial-gradient(120% 92% at 18% 10%, #ffffff 0%, rgba(255,255,255,0) 62%),
      radial-gradient(100% 82% at 84% 90%, #f2f2f7 0%, rgba(242,242,247,0) 62%),
      linear-gradient(158deg, #fdfdfe 0%, #f4f4f8 100%);
  }
  #grainient::before {
    content: ""; position: absolute; inset: -22%;
    background: radial-gradient(58% 48% at 38% 38%, rgba(255,255,255,.85) 0%, rgba(255,255,255,0) 72%);
    animation: bgDrift 26s ease-in-out infinite alternate;
    pointer-events: none;
  }
  /* 切主题的一瞬间：把背景动画停掉、取消合成层提升。
     持续动画的全屏图层在浏览器里会被提升成合成层并复用旧栅格，
     切主题时那一格没重绘就会残留一条旧颜色（就是那条"闪"）。 */
  html.theme-circle #grainient::before {
    animation: none;
    will-change: auto;
    transform: none;
  }
  @keyframes bgDrift {
    from { transform: translate3d(-2%, -1.5%, 0) scale(1); }
    to   { transform: translate3d(2.5%, 2%, 0) scale(1.07); }
  }
  html[data-bg-theme="dark"] #grainient {
    background:
      radial-gradient(120% 92% at 20% 8%, #1c1c22 0%, rgba(28,28,34,0) 62%),
      radial-gradient(100% 82% at 82% 92%, #0c0c10 0%, rgba(12,12,16,0) 62%),
      linear-gradient(158deg, #121216 0%, #08080b 100%);
  }
  html[data-bg-theme="dark"] #grainient::before {
    background: radial-gradient(58% 48% at 38% 38%, rgba(255,255,255,.07) 0%, rgba(255,255,255,0) 72%);
  }
  /* 压暗 + 暗角：让文字跳出来，背景更有高级感 */
  #grainient::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    /* 中间一团柔光，四周只留极淡的灰，背景永远不出现暗色块 */
    background:
      radial-gradient(ellipse 62% 54% at 50% 42%,
        rgba(255, 255, 255, 0.92) 0%,
        rgba(255, 255, 255, 0.42) 48%,
        rgba(255, 255, 255, 0) 76%),
      radial-gradient(ellipse 100% 100% at 50% 46%,
        rgba(238, 238, 243, 0) 58%,
        rgba(238, 238, 243, 0.5) 100%);
  }
  #grainient canvas { filter: none; }
  /* 黑白切换时，用两块纯色板盖住背景画布再淡出：
     画布（WebGL）在合成器里是分块更新的，偶尔只更新一部分贴片，
     没更新的那一条就会残留旧颜色 → 看着就是"闪一下"。纯色层没有这个问题。 */
  #grainient .bg-solid { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
  #grainient .bg-solid.light { background: #fbfbfd; }
  #grainient .bg-solid.dark { background: #101014; }
  #grainient .bg-solid.anim { transition: opacity .28s linear; }
  .glass {
    background: var(--panel);
    -webkit-backdrop-filter: blur(22px);
    backdrop-filter: blur(22px);
    border: 1px solid var(--line);
  }
  .wrap { max-width: 860px; margin: 0 auto; padding: 24px 20px 64px; }

  .top {
    display: flex; align-items: center; justify-content: space-between; margin-bottom: 34px;
    flex-wrap: wrap; gap: 10px 12px;
    padding: 12px 12px 12px 20px;
    border: 1px solid var(--line); border-radius: 18px;
    background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  }
  /* 顶部按钮越来越多（字体/最近生成/积分明细/文字翻译/退出），
     所以这一排必须允许换行、按钮文字不许竖着断 —— 不然会被挤成一列一列。 */
  .top-right { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
  .brand { display: flex; align-items: center; gap: 10px; font-size: 17px; font-weight: 650;
    letter-spacing: -0.01em; white-space: nowrap; flex: 0 0 auto; }
  .brand::before {
    content: ""; width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
    background: linear-gradient(135deg, #0a0a0b, #8f8f96);
    box-shadow: 0 0 10px rgba(0,0,0,.15);
  }
  .balance-pill {
    display: flex; align-items: center; gap: 8px; padding: 5px 6px 5px 14px;
    border: 1px solid var(--line); border-radius: 999px; background: rgba(0,0,0,0.038);
    font-size: 13px; color: var(--muted); white-space: nowrap;
  }
  .balance-pill b { color: var(--text); font-size: 15px; font-weight: 650; }
  .balance-pill .btn { padding: 6px 14px; border-radius: 999px; font-size: 12.5px; }
  /* 顶栏按钮统一压小一点：现在有 字体/最近生成/积分明细/文字翻译/退出 五个，
     保持紧凑才能在同一行放下（放不下时会自动换行，不会再把字挤成一列）。 */
  .top-right .btn { padding: 8px 14px; font-size: 13px; border-radius: 14px; }
  .btn {
    position: relative;
    border: 1px solid rgba(0,0,0,.14);
    border-radius: 18px;
    padding: 10px 22px;
    font-size: 14px;
    cursor: pointer;
    background: #ffffff;
    color: #0a0a0b;
    font-weight: 500;
    outline: none;
    white-space: nowrap;
    --angle: 45deg;
    --prox: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 2px 10px rgba(0,0,0,.06);
    transition: transform .15s ease, background .18s ease, border-color .18s ease;
  }
  .btn:hover { background: #f6f6f8; border-color: rgba(0,0,0,.22); }
  .btn:active { transform: scale(.97); }
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--angle),
      transparent 0deg,
      rgba(255,255,255, calc(.9 * var(--prox))) 20deg,
      transparent 55deg,
      transparent 360deg);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
  }
  .btn.ghost { background: rgba(0,0,0,0.022); border-color: rgba(0,0,0,0.15); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }

  .drop {
    border: 1px solid rgba(0,0,0,0.105); border-radius: 24px;
    background: rgba(0,0,0,0.03); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    padding: 46px 24px 44px; text-align: center; cursor: pointer; transition: .25s;
  }
  .drop.drag { border-color: rgba(0,0,0,0.3); background: rgba(0,0,0,0.053); }
  .icon-ring {
    width: 62px; height: 62px; margin: 0 auto 18px; border-radius: 20px;
    display: flex; align-items: center; justify-content: center; color: var(--text);
    background: linear-gradient(160deg, rgba(0,0,0,0.112), rgba(0,0,0,0.03));
    border: 1px solid rgba(0,0,0,0.128);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.112), 0 10px 26px rgba(0,0,0,.35);
  }
  .drop .title { font-size: 17px; font-weight: 600; }
  .drop .title b { word-break: break-all; }
  .drop .hint { font-size: 12.5px; color: var(--muted); margin-top: 9px; }
  .drop b { font-weight: 600; }
  .start-row { display: flex; justify-content: center; margin: 20px 0 0; }
  .start-btn { min-width: 232px; }
  .billing-note { text-align: center; font-size: 12px; color: var(--muted); margin-top: 14px; opacity: .85; }
  .lang-row { display: flex; align-items: flex-start; justify-content: center; gap: 30px; margin-bottom: 28px; flex-wrap: wrap; }
  .lang-group { display: flex; flex-direction: column; align-items: center; gap: 9px; }
  .lang-select-label { font-size: 11.5px; color: var(--muted); letter-spacing: .14em; }
  .lang-arrow { color: rgba(0,0,0,0.3); margin-top: 33px; }
  .start-btn {
    border: none; cursor: pointer; outline: none;
    background: #0a0a0b; color: #ffffff;
    font-weight: 600; font-size: 16px;
    padding: 14px 54px; border-radius: 999px;
    letter-spacing: .02em;
    box-shadow: 0 10px 30px rgba(0,0,0,0.06), inset 0 1px 0 rgba(0,0,0,0.08);
    transition: transform .15s ease, background .18s ease, box-shadow .18s ease;
  }
  .start-btn:hover { background: #26262a; box-shadow: 0 14px 38px rgba(0,0,0,0.14), inset 0 1px 0 rgba(255,255,255,.15); }
  .start-btn:active { transform: scale(.97); }
  .start-btn:disabled {
    background: rgba(0,0,0,0.098); color: rgba(0,0,0,0.38);
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.045); cursor: not-allowed;
  }
  .lang-select select option { background: #ffffff; color: #0a0a0b; }
  .lang-pop { position: relative; }
  .lang-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    color: #000;
    border: none;
    border-radius: 9999px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-shadow: none;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.22);
    transition: box-shadow .2s ease;
  }
  .lang-trigger:hover { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12), 0 6px 18px rgba(0,0,0,.28); }
  .lang-chevron {
    width: 11px; height: 11px;
    fill: none; stroke: currentColor; stroke-width: 1.8;
    stroke-linecap: round; stroke-linejoin: round;
    transition: transform .28s ease;
  }
  .lang-pop.open .lang-chevron { transform: rotate(180deg); }
  .lang-options {
    --base: #000000;
    --pill-bg: #ffffff;
    --pill-text: #000000;
    --hover-text: #ffffff;
    position: absolute;
    top: calc(100% + 7px);
    left: 0;
    display: flex;
    align-items: stretch;
    gap: 3px;
    padding: 3px;
    background: var(--base);
    border-radius: 9999px;
    height: 40px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,.08);
    clip-path: inset(0 100% 0 0);
    transition: clip-path .42s cubic-bezier(.22,.61,.36,1);
    pointer-events: none;
    z-index: 40;
  }
  .lang-pop.open .lang-options {
    clip-path: inset(0 0 0 0);
    pointer-events: auto;
  }
  .pill {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    padding: 0 16px;
    border: none;
    border-radius: 9999px;
    background: var(--pill-bg);
    color: var(--pill-text);
    font-family: inherit;
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    line-height: 0;
    text-shadow: none;
  }
  .pill .hover-circle {
    position: absolute;
    left: 50%;
    bottom: 0;
    border-radius: 50%;
    background: var(--base);
    z-index: 1;
    pointer-events: none;
    will-change: transform;
    transform: translateX(-50%) scale(0);
    transition: transform .38s cubic-bezier(.22,.61,.36,1);
  }
  .pill .label-stack { position: relative; display: inline-block; line-height: 1; z-index: 2; }
  .pill .pill-label, .pill .pill-label-hover { display: inline-block; line-height: 1; }
  .pill .pill-label {
    transform: translateY(0); opacity: 1;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
  }
  .pill .pill-label-hover {
    position: absolute; left: 0; top: 0;
    color: var(--hover-text);
    transform: translateY(150%); opacity: 0;
    transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .22s ease;
  }
  .pill:hover .hover-circle, .pill.is-active .hover-circle { transform: translateX(-50%) scale(1.2); }
  .pill:hover .pill-label, .pill.is-active .pill-label { transform: translateY(-150%); opacity: 0; }
  .pill:hover .pill-label-hover, .pill.is-active .pill-label-hover { transform: translateY(0); opacity: 1; }
  .pill-check {
    position: relative;
    z-index: 2;
    margin-left: 6px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .2s ease, transform .2s ease;
  }
  .pill.is-active .pill-check { opacity: 1; transform: scale(1); }

  /* BorderGlow 边框发光 */
  .border-glow-card {
    --edge-proximity: 0;
    --cursor-angle: 45deg;
    --edge-sensitivity: 20;
    --color-sensitivity: 40;
    --border-radius: 50px;
    --glow-padding: 40px;
    --cone-spread: 25;
    --fill-opacity: 0.5;
    --card-bg: #ffffff;
    --glow-color: hsl(0deg 0% 42% / 100%);
    --glow-color-60: hsl(0deg 0% 42% / 78%);
    --glow-color-50: hsl(0deg 0% 42% / 65%);
    --glow-color-40: hsl(0deg 0% 42% / 52%);
    --glow-color-30: hsl(0deg 0% 42% / 39%);
    --glow-color-20: hsl(0deg 0% 42% / 26%);
    --glow-color-10: hsl(0deg 0% 42% / 13%);
    --gradient-one: radial-gradient(at 80% 55%, #b8b8bf 0px, transparent 50%);
    --gradient-two: radial-gradient(at 69% 34%, #9a9aa2 0px, transparent 50%);
    --gradient-three: radial-gradient(at 8% 6%, #cfcfd6 0px, transparent 50%);
    --gradient-four: radial-gradient(at 41% 38%, #b8b8bf 0px, transparent 50%);
    --gradient-five: radial-gradient(at 86% 85%, #9a9aa2 0px, transparent 50%);
    --gradient-six: radial-gradient(at 82% 18%, #cfcfd6 0px, transparent 50%);
    --gradient-seven: radial-gradient(at 51% 4%, #9a9aa2 0px, transparent 50%);
    --gradient-base: linear-gradient(#b8b8bf 0 100%);

    position: relative;
    border-radius: var(--border-radius);
    isolation: isolate;
    transform: translate3d(0, 0, 0.01px);
    border: 1px solid rgba(0,0,0,.12);
    background: var(--card-bg);
    overflow: visible;
    box-shadow:
      rgba(0, 0, 0, 0.1) 0px 1px 2px,
      rgba(0, 0, 0, 0.1) 0px 2px 4px,
      rgba(0, 0, 0, 0.1) 0px 4px 8px,
      rgba(0, 0, 0, 0.1) 0px 8px 16px,
      rgba(0, 0, 0, 0.1) 0px 16px 32px,
      rgba(0, 0, 0, 0.1) 0px 32px 64px;
  }
  .border-glow-card::before,
  .border-glow-card::after,
  .border-glow-card > .edge-light {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    transition: opacity 0.25s ease-out;
    z-index: -1;
  }
  .border-glow-card:not(:hover):not(.sweep-active)::before,
  .border-glow-card:not(:hover):not(.sweep-active)::after,
  .border-glow-card:not(:hover):not(.sweep-active) > .edge-light {
    opacity: 0;
    transition: opacity 0.75s ease-in-out;
  }
  .border-glow-card::before {
    border: 1px solid transparent;
    background:
      linear-gradient(var(--card-bg) 0 100%) padding-box,
      linear-gradient(rgb(255 255 255 / 0%) 0% 100%) border-box,
      var(--gradient-one) border-box,
      var(--gradient-two) border-box,
      var(--gradient-three) border-box,
      var(--gradient-four) border-box,
      var(--gradient-five) border-box,
      var(--gradient-six) border-box,
      var(--gradient-seven) border-box,
      var(--gradient-base) border-box;
    opacity: calc((var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
    mask-image: conic-gradient(from var(--cursor-angle) at center, black calc(var(--cone-spread) * 1%), transparent calc((var(--cone-spread) + 15) * 1%), transparent calc((100 - var(--cone-spread) - 15) * 1%), black calc((100 - var(--cone-spread)) * 1%));
  }
  .border-glow-card::after {
    border: 1px solid transparent;
    background:
      var(--gradient-one) padding-box,
      var(--gradient-two) padding-box,
      var(--gradient-three) padding-box,
      var(--gradient-four) padding-box,
      var(--gradient-five) padding-box,
      var(--gradient-six) padding-box,
      var(--gradient-seven) padding-box,
      var(--gradient-base) padding-box;
    -webkit-mask-image:
      linear-gradient(to bottom, black, black),
      radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
      conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    mask-image:
      linear-gradient(to bottom, black, black),
      radial-gradient(ellipse at 50% 50%, black 40%, transparent 65%),
      radial-gradient(ellipse at 66% 66%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 66% 33%, black 5%, transparent 40%),
      radial-gradient(ellipse at 33% 66%, black 5%, transparent 40%),
      conic-gradient(from var(--cursor-angle) at center, transparent 5%, black 15%, black 85%, transparent 95%);
    -webkit-mask-composite: subtract, add, add, add, add, add;
    mask-composite: subtract, add, add, add, add, add;
    opacity: calc(var(--fill-opacity) * (var(--edge-proximity) - var(--color-sensitivity)) / (100 - var(--color-sensitivity)));
    mix-blend-mode: soft-light;
  }
  .border-glow-card > .edge-light {
    inset: calc(var(--glow-padding) * -1);
    pointer-events: none;
    z-index: 1;
    -webkit-mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    mask-image: conic-gradient(from var(--cursor-angle) at center, black 2.5%, transparent 10%, transparent 90%, black 97.5%);
    opacity: calc((var(--edge-proximity) - var(--edge-sensitivity)) / (100 - var(--edge-sensitivity)));
    mix-blend-mode: plus-lighter;
  }
  .border-glow-card > .edge-light::before {
    content: "";
    position: absolute;
    inset: var(--glow-padding);
    border-radius: inherit;
    box-shadow:
      inset 0 0 0 1px var(--glow-color),
      inset 0 0 1px 0 var(--glow-color-60),
      inset 0 0 3px 0 var(--glow-color-50),
      inset 0 0 6px 0 var(--glow-color-40),
      inset 0 0 15px 0 var(--glow-color-30),
      inset 0 0 25px 2px var(--glow-color-20),
      inset 0 0 50px 2px var(--glow-color-10),
      0 0 1px 0 var(--glow-color-60),
      0 0 3px 0 var(--glow-color-50),
      0 0 6px 0 var(--glow-color-40),
      0 0 15px 0 var(--glow-color-30),
      0 0 25px 2px var(--glow-color-20),
      0 0 50px 2px var(--glow-color-10);
  }

  .status { margin-top: 20px; display: none; }
  .bar { height: 5px; background: rgba(0,0,0,0.075); border-radius: 999px; overflow: hidden; }
  .bar > i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s; }
  .stage { font-size: 13px; color: var(--muted); margin-top: 10px; }
  .error { color: var(--danger); margin-top: 14px; font-size: 14px; display: none; text-align: center; }

  .result { margin-top: 24px; display: none; }
  .sub-panel { margin-bottom: 20px; }
  .sub-panel h2 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0 0 10px; }
  textarea {
    width: 100%; min-height: 160px; border: 1px solid var(--line); border-radius: 16px;
    padding: 16px; font-size: 17px; resize: vertical;
    background: var(--panel); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    color: var(--text); outline: none; transition: border-color .18s;
  }
  textarea:focus { border-color: rgba(0,0,0,0.188); }
  #textUg { direction: rtl; font-family: 'UKIJ Tor', 'Noto Naskh Arabic', serif; }
  #textZh { direction: ltr; }
  .edit-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 12px; }
  .edit-head h2 { font-size: 14px; font-weight: 600; color: var(--muted); margin: 0; }
  .edit-hint { margin-left: auto; font-size: 12px; color: var(--muted); }
  .seg-list { max-height: 48vh; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding-right: 4px; }
  .seg {
    background: var(--panel); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px);
    border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px;
  }
  .seg.edited { border-color: rgba(0,0,0,.35); background: rgba(0,0,0,.05); }
  .seg-time { font-size: 11px; color: var(--muted); margin-bottom: 6px; }
  .seg-ta {
    width: 100%; min-height: 0; background: transparent; border: none; border-radius: 0;
    padding: 0; resize: none; overflow: hidden; color: var(--text); font-size: 15px; line-height: 1.6;
  }
  .seg-ta:focus { border: none; }
  .seg-ta.ug { direction: rtl; text-align: right; font-family: 'UKIJ Tor', 'Noto Naskh Arabic', serif; }
  .seg-ta.zh { color: var(--muted); font-size: 13px; margin-top: 4px; }
  .exp-head { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
  .exp-seg { display: flex; gap: 6px; padding: 5px; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; }
  /* 生成页顶部的运行模式开关：只识别 / 识别+翻译 */
  .runmode-row { display: flex; justify-content: center; margin-bottom: 16px; }
  #runModeSeg .exp-opt { min-width: 108px; text-align: center; }
  .exp-opt { border: none; background: transparent; color: var(--muted); font-size: 14px; padding: 7px 16px; border-radius: 999px; cursor: pointer; font-family: inherit; }
  .exp-opt.active { background: #fff; color: #111827; font-weight: 600; }
  /* 只识别不翻译：「翻译为」这一段压暗、点不动 */
  .lang-group.is-locked { opacity: .45; }
  .lang-group.is-locked .lang-pop { pointer-events: none; }
  .again-link { margin-left: auto; background: none; border: none; color: var(--muted); font-size: 13px; cursor: pointer; font-family: inherit; padding: 6px 4px; }
  .again-link:hover { color: var(--text); }
  .footer-links { margin-top: 8px; display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
  .footer-links a { color: #6e6e76; font-size: 12px; text-decoration: none; }
  .footer-links a:hover { color: var(--text); }
  /* 备案号：工信部要求挂在网站底部。direction:ltr + isolate 是为了
     维语（从右往左）模式下这串号不会被反过来排。 */
  .icp { margin-top: 10px; text-align: center; font-size: 12px; }
  .icp a { color: #6e6e76; text-decoration: none; direction: ltr; unicode-bidi: isolate; }
  .icp a:hover { color: var(--text); }
  .qr-block { margin-top: 6px; }
  .qr-or { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 12px; margin: 16px 0; }
  .qr-or::before, .qr-or::after { content: ""; flex: 1; height: 1px; background: var(--line); }
  .qr-box { margin-top: 14px; text-align: center; }
  .qr-box img { width: 210px; height: 210px; border-radius: 14px; background: #fff; padding: 8px; }
  .qr-tip { color: var(--muted); font-size: 12px; margin-top: 10px; line-height: 1.6; }
  /* 充值档位（网页版扫码充值） */
  /* 首充双倍横幅（只有新用户看得到） */
  .bonus-banner { display: flex; align-items: center; gap: 8px; margin-bottom: 14px;
    padding: 9px 13px; border-radius: 12px; background: #fdf3dc; border: 1px solid #e8c37b;
    text-align: left; }
  .bonus-banner .bb-tag { flex: none; padding: 2px 9px; border-radius: 999px;
    background: #c9962f; color: #fff; font-size: 11px; font-weight: 700; }
  .bonus-banner .bb-text { font-size: 12px; color: #8a6a1f; font-weight: 600; }

  .tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .tier { position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center;
    min-height: 132px; padding: 18px 12px 14px;
    border-radius: 16px; border: 1px solid var(--line); background: transparent;
    color: var(--text); cursor: pointer; font-family: inherit;
    transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
  .tier:hover { border-color: var(--text); transform: translateY(-2px); }
  .tier-hot { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }

  /* 左上角斜着的金色角标 */
  .tier-ribbon { position: absolute; top: 13px; left: -22px; width: 92px; padding: 2px 0;
    transform: rotate(-45deg); background: linear-gradient(135deg, #e0b04a, #c9962f);
    color: #fff; font-size: 10px; font-weight: 700; text-align: center;
    box-shadow: 0 1px 4px rgba(0,0,0,.22); }

  .tier-min { font-size: 21px; font-weight: 650; line-height: 1.2; }
  .tier-min i { font-size: 11px; font-weight: 400; font-style: normal; margin-left: 2px; }
  .tier-pts { font-size: 12px; opacity: .62; margin-top: 3px; }
  .tier-per { font-size: 11.5px; opacity: .62; margin-top: 5px; }

  /* 卡片里的金色小条：写清楚首充能拿到多少 */
  .tier-bonus { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px;
    padding: 3px 8px; border-radius: 8px; background: #fdf3dc; border: 1px solid #e8c37b;
    color: #8a6a1f; font-size: 11px; font-weight: 600; white-space: nowrap; }
  .tier-bonus b { background: #c9962f; color: #fff; border-radius: 4px; padding: 0 4px; font-size: 10px; }

  .tier-price { margin-top: auto; padding-top: 10px; font-size: 16px; font-weight: 650; }
  .tier-hot-tag { margin-top: 6px; padding: 2px 10px; border-radius: 999px;
    background: var(--accent-text); color: var(--accent); font-size: 11px; font-weight: 600; }

  /* 选中的档位：描边放在框外面，黑卡白卡都看得见 */
  .tier-sel { outline: 2px solid var(--text); outline-offset: 2px; }
  html[data-theme="dark"] .tier-hot { color: #0a0a0b; }
  .mini-code-row { display: flex; gap: 10px; }
  .mini-code-row input { flex: 1; letter-spacing: 2px; text-align: center; }
  .mini-code-row .btn { white-space: nowrap; }
  .actions { margin-top: 18px; display: flex; gap: 12px; flex-wrap: wrap; }
  .cost { margin-top: 20px; padding: 18px 20px; background: var(--panel);
    -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); border: 1px solid var(--line);
    border-radius: 16px; display: flex; justify-content: space-between; font-size: 15px; }
  .cost b { font-weight: 600; }
  .cost .muted { color: var(--muted); }

  /* ============ 生成字幕视频（结果页下面的金色卡片）============ */
  .vbox { border: 1px solid #e8c37b; background: #fdf3dc; border-radius: 18px;
    padding: 16px 18px; margin-top: 18px; text-align: left; }
  html[data-theme="dark"] .vbox { background: rgba(201,150,47,.10); border-color: rgba(216,171,77,.45); }
  .vbox-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .vbox-head b { font-size: 15px; }
  .vbox .free { font-size: 11.5px; font-weight: 700; color: #fff; background: #c9962f;
    border-radius: 999px; padding: 2px 10px; }
  .vbox-sub { font-size: 12.5px; color: #8a6a1f; margin-bottom: 14px; }
  html[data-theme="dark"] .vbox-sub { color: #dcb96a; }
  .opt-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
  .opt-row > label { font-size: 12.5px; color: var(--muted); min-width: 64px; }
  .opt { font-size: 12.5px; padding: 7px 15px; border-radius: 999px;
    border: 1px solid rgba(0,0,0,.12); background: var(--panel); color: var(--muted);
    cursor: pointer; font-family: inherit; }
  html[data-theme="dark"] .opt { border-color: rgba(255,255,255,.18); }
  .opt.on { background: #0a0a0b; color: #fff; border-color: #0a0a0b; font-weight: 600; }
  html[data-theme="dark"] .opt.on { background: #fff; color: #0a0a0b; border-color: #fff; }
  .opt[disabled] { opacity: .35; cursor: not-allowed; }
  .vbox .vgo { width: 100%; margin-top: 6px; padding: 13px; border: 0; border-radius: 15px;
    background: #0a0a0b; color: #fff; font-size: 15px; font-weight: 650; cursor: pointer;
    font-family: inherit; box-shadow: 0 8px 20px rgba(10,10,11,.18); }
  html[data-theme="dark"] .vbox .vgo { background: #fff; color: #0a0a0b; }
  .vbox .vgo.waiting { background: #b9b9c0; box-shadow: none; cursor: default; color: #fff; }
  .vbox .vgo.prog { position: relative; overflow: hidden; background: #3a3a42; box-shadow: none;
    cursor: default; display: block; color: #fff; }
  .vbox .vgo.prog i { position: absolute; left: 0; top: 0; bottom: 0; background: #0a0a0b;
    transition: width .3s linear; }
  .vbox .vgo.prog span { position: relative; z-index: 1; }
  .vbox .done-row { display: flex; align-items: center; gap: 10px; margin-top: 10px;
    flex-wrap: wrap; font-size: 13px; color: #1f7a3f; font-weight: 600; }
  .vbox .done-row .mini { background: #fdf3dc; border: 1px solid #e8c37b; color: #8a6a1f;
    border-radius: 999px; padding: 5px 13px; font-weight: 600; cursor: pointer; }
  .vbox .done-row .mini .x { opacity: .7; font-weight: 500; }
  .vbox .vnote { font-size: 11.5px; color: #8a6a1f; margin-top: 9px; line-height: 1.65; }
  html[data-theme="dark"] .vbox .vnote,
  html[data-theme="dark"] .vbox .done-row .mini { color: #dcb96a; }
  html[data-theme="dark"] .vbox .done-row .mini { background: rgba(201,150,47,.14); border-color: rgba(216,171,77,.45); }
  .vbox .done-row .vneed { color: #8a6a1f; font-weight: 500; }
  html[data-theme="dark"] .vbox .done-row .vneed { color: #dcb96a; }

  #loginView { display: none; }
  .login-card {
    max-width: 400px; margin: 9vh auto 0; text-align: center;
    padding: 36px 32px 30px;
    border: 1px solid var(--line); border-radius: 30px;
    background: rgba(255,255,255,.75); -webkit-backdrop-filter: blur(26px); backdrop-filter: blur(26px);
    box-shadow: 0 18px 50px rgba(0,0,0,.10), inset 0 1px 0 rgba(0,0,0,0.053);
  }
  .login-card .brand { font-size: 24px; margin-bottom: 4px; justify-content: center; }
  .login-card .sub { color: var(--muted); font-size: 14px; margin-bottom: 28px; }
  .field { text-align: left; margin-bottom: 16px; }
  .field label { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
  .field input {
    width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px 16px;
    font-size: 16px; outline: none; background: rgba(0,0,0,0.053);
    color: var(--text); transition: border-color .18s;
  }
  .field input::placeholder { color: rgba(0,0,0,0.262); }
  .field input:focus { border-color: rgba(0,0,0,0.188); }
  .field .row { display: flex; gap: 10px; }
  .field .row input { flex: 1; }
  .login-note { font-size: 13px; color: var(--muted); margin-top: 12px; min-height: 20px; }

  .mask { position: fixed; inset: 0; background: rgba(0,0,0,.35); display: none;
    align-items: center; justify-content: center; z-index: 50; }
  .modal { background: var(--panel, #ffffff);
    border: 1px solid var(--line); border-radius: 22px; padding: 32px 32px 26px; width: 520px; max-width: 92vw;
    max-height: 88vh; overflow-y: auto;
    text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.5);
    /* 不显示滚动条（还能滚，只是看不到那条杠） */
    scrollbar-width: none; -ms-overflow-style: none; }
  .modal::-webkit-scrollbar { display: none; width: 0; height: 0; }
  .modal h3 { margin: 0 0 6px; font-size: 19px; font-weight: 650; }
  .modal .tip { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
  /* 最近生成：一行一条，左边信息右边下载 */
  .hist-list { max-height: 52vh; overflow-y: auto; text-align: left; margin-bottom: 6px; }
  .hist-row { display: flex; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--line); }
  .hist-row:last-child { border-bottom: none; }
  .hist-main { flex: 1; min-width: 0; }
  .hist-name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .hist-meta { font-size: 12px; color: var(--muted); margin-top: 3px; }
  .hist-dl { flex: none; font-family: inherit; font-size: 13px; padding: 7px 15px; border-radius: 999px;
    border: 1px solid var(--line); background: var(--panel); color: var(--text); cursor: pointer; }
  .hist-dl:hover { border-color: var(--text); }
  .hist-dl[disabled] { opacity: .45; cursor: default; }
  /* 最近生成里「下载哪种字幕」那一组：维吾尔语 / 汉语 / 双语，窄屏自动换行 */
  .hist-dl-group { flex: none; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .hist-dl-group .hist-dl { padding: 6px 12px; font-size: 12.5px; }
  @media (max-width: 560px) {
    .hist-row { flex-wrap: wrap; }
    .hist-dl-group { width: 100%; justify-content: flex-start; }
  }
  .hist-empty { color: var(--muted); font-size: 13.5px; padding: 26px 0; text-align: center; }
  .modal input { width: 100%; border: 1px solid var(--line); border-radius: 14px; padding: 13px;
    font-size: 18px; text-align: center; outline: none; margin-bottom: 16px;
    background: rgba(0,0,0,0.053); color: var(--text); }
  .modal .actions { justify-content: center; margin-top: 0; }

  /* 生成动画与状态切换 */
  .drop { transition: opacity .45s ease, transform .45s ease; }
  .drop.drop-hidden { opacity: 0; transform: translateY(-12px); pointer-events: none; }
  .drop-loading { padding: 8px 0; }
  .wave { display: flex; align-items: flex-end; justify-content: center; gap: 6px; height: 44px; margin-bottom: 20px; }
  .wave span { width: 4px; height: 44px; border-radius: 2px; background: var(--accent); transform-origin: bottom; }
  .wave span:nth-child(1) { animation: wave 1.4s ease-in-out infinite; }
  .wave span:nth-child(2) { animation: wave 1.4s ease-in-out .12s infinite; }
  .wave span:nth-child(3) { animation: wave 1.4s ease-in-out .24s infinite; }
  .wave span:nth-child(4) { animation: wave 1.4s ease-in-out .36s infinite; }
  .wave span:nth-child(5) { animation: wave 1.4s ease-in-out .48s infinite; }
  .wave span:nth-child(6) { animation: wave 1.4s ease-in-out .6s infinite; }
  .wave span:nth-child(7) { animation: wave 1.4s ease-in-out .72s infinite; }
  @keyframes wave { 0%, 100% { transform: scaleY(0.18); } 50% { transform: scaleY(1); } }
  .rotating-text {
    min-height: 1.35em;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    font-weight: 650;
    letter-spacing: .01em;
    color: var(--text);
    margin-bottom: 18px;
    overflow: hidden;
  }
  .rt-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }
  .rt-line.gap { gap: .28em; }
  .rt-unit { display: inline-block; overflow: hidden; vertical-align: top; line-height: 1.15; }
  .rt-unit.ug { font-family: 'UKIJ Tor', 'Noto Naskh Arabic', serif; }
  .rt-char {
    display: inline-block;
    transform: translateY(115%);
    opacity: 0;
    transition: transform .55s cubic-bezier(.22, 1.2, .36, 1), opacity .4s ease;
    will-change: transform, opacity;
  }
  .rt-char.in { transform: translateY(0); opacity: 1; }
  .rt-char.out { transform: translateY(-115%); opacity: 0; }
  .drop-loading .bar { max-width: 360px; margin: 0 auto; }
  .drop-loading .stage { text-align: center; margin-top: 10px; }
  .result.result-enter { display: block; animation: fadeUp .5s ease; }
  @keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }

  /* 商业主页 */
  #homeView { min-height: 100vh; display: flex; flex-direction: column; position: relative; }
  .nav { padding: 20px 0; }
  .nav-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; display: flex; align-items: center; justify-content: center; }
  .nav-brand { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 600; color: var(--text); }
  .nav-right { display: flex; align-items: center; gap: 14px; }
  .lang-switch { display: flex; background: rgba(0,0,0,0.045); border: 1px solid var(--line); border-radius: 999px; padding: 3px; }
  .lang-btn { border: 0; background: transparent; color: var(--muted); font-size: 13px; padding: 6px 14px; border-radius: 999px; cursor: pointer; transition: .18s; }
  .lang-btn.active { background: rgba(0,0,0,0.105); color: var(--text); }
  .lang-select-box {
    background: rgba(0,0,0,0.06);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--text);
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    cursor: pointer;
  }
  .lang-select-box option { background: #161616; color: #fff; }
  /* 首页：正文整屏垂直+水平居中（页脚绝对定位在底部，不参与居中） */
  .hero { flex: 1; display: flex; align-items: center; justify-content: center; padding: 100px 0 150px; }
  .hero-inner { max-width: 1100px; width: 100%; margin: 0 auto; padding: 0 32px; text-align: center; }
  .hero-badge { display: inline-block; font-size: 13px; color: var(--muted); border: 1px solid var(--line); border-radius: 999px; padding: 5px 14px; margin-bottom: 22px; }
  .hero-title {
    position: relative;
    isolation: isolate;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    margin: 0 auto 26px;
    padding: 30px 0 24px;
  }
  .hero-title .t-ug {
    font-family: 'UKIJ Kesme', 'UKIJ Tor', 'PingFang SC', 'Microsoft YaHei', sans-serif;
    font-size: clamp(2.6rem, 7.6vw, 6.6rem);
    font-weight: 800;
    line-height: 1.18;
    color: #2b2b31;
    direction: rtl;
  }
  .hero-title .t-zh {
    font-family: 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
    font-size: clamp(2.6rem, 7.6vw, 6.6rem);
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: .02em;
    color: #2b2b31;
  }
  .hero-desc { font-size: 14.5px; color: #3a3a42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 24px auto 32px; }
  /* 维语/哈语/柯语这行更长，放不下就让它自然换行（中文仍然保持一行） */
  html:not([data-lang="zh"]) .hero-desc {
    white-space: normal; overflow: visible; text-overflow: clip;
    max-width: 900px; line-height: 1.8;
  }
  .hero-actions { display: flex; align-items: center; justify-content: center; gap: 18px; }
  .hero-cta { padding: 13px 32px; font-size: 16px; background: #0a0a0b; color: #ffffff; border-color: #0a0a0b; font-weight: 600; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18); }
  .hero-cta:hover { background: #26262a; }
  .hero-note { font-size: 13px; color: var(--muted); }
  .features, .pricing, .steps { padding: 42px 0; }
  .features-inner, .pricing-inner, .steps-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; }
  .section-title { font-size: 26px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 28px; }
  .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .feature-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 26px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .feature-icon { font-size: 26px; margin-bottom: 14px; }
  .feature-card h3 { font-size: 17px; margin: 0 0 8px; font-weight: 600; }
  .feature-card p { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.7; }
  .price-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
  .price-card { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 30px 24px; text-align: center; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .price-num { font-size: 42px; font-weight: 700; color: var(--text); }
  .price-label { font-size: 14px; color: var(--muted); margin-top: 8px; }
  .pricing-note { font-size: 13px; color: var(--muted); margin-top: 18px; }
  .step-list { display: flex; gap: 18px; }
  .step { flex: 1; display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 20px; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); font-size: 15px; }
  .step-num { width: 30px; height: 30px; border-radius: 50%; background: var(--accent); color: var(--accent-text); display: flex; align-items: center; justify-content: center; font-weight: 700; flex-shrink: 0; }
  .footer { padding: 30px 0 44px; }
  /* 首页：页脚固定在底部，正文在整屏正中间 */
  #homeView .footer { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0 34px; }
  .footer-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; font-size: 13px; color: #6e6e76; text-align: center; }
  @media (max-width: 720px) {
    .hero { padding: 80px 0 140px; }
    .hero-title { font-size: 36px; }
    .feature-grid, .price-cards { grid-template-columns: 1fr; }
    .step-list { flex-direction: column; }
    .tool-panel { padding: 22px 16px 20px; border-radius: 24px; }
    .lang-row { gap: 18px; }
    .lang-arrow { display: none; }
    .lang-options {
      left: 50%; transform: translateX(-50%);
      flex-wrap: wrap; height: auto; min-height: 40px; max-width: 86vw;
      border-radius: 22px;
    }
    .top { flex-direction: column; align-items: stretch; gap: 12px; }
    /* 手机上按钮多，靠左紧凑排、自然换行，别让某个按钮孤零零占一行 */
    .top-right { justify-content: flex-start; flex-wrap: wrap; gap: 6px; }
    .top-right .btn { padding: 7px 11px; font-size: 12.5px; }
  }
  #appView { display: flex; flex-direction: column; min-height: calc(100vh - 150px); }
  .tool-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 0 20px;
  }
  .tool-panel {
    max-width: 700px;
    width: 100%;
    margin: 0 auto;
    padding: 32px 32px 28px;
    border: 1px solid var(--line);
    border-radius: 30px;
    background: rgba(255,255,255,.75);
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    box-shadow: 0 18px 50px rgba(0,0,0,.10), inset 0 1px 0 rgba(0,0,0,0.053);
  }

  /* ================= 全局开关：黑白（深色模式） + 维吾尔语 / 中文 ================= */
  .ui-tools {
    position: fixed; top: 18px; right: 20px; z-index: 40;
    display: flex; align-items: center; gap: 9px;
  }
  /* 毛玻璃开关（滑块里带细长的太阳 / 月亮图标） */
  .ui-sw {
    position: relative; width: 58px; height: 33px; padding: 0; border: 0; cursor: pointer;
    border-radius: 999px; outline: none;
    background: rgba(120,120,128,.16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.5);
    transition: background .34s ease, box-shadow .34s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .ui-sw .ui-k {
    position: absolute; top: 3px; left: 3px; width: 27px; height: 27px; border-radius: 50%;
    display: grid; place-items: center; color: #6e6e73;
    background: linear-gradient(#ffffff, #ececf0);
    box-shadow: 0 2px 6px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .38s cubic-bezier(.22,1.2,.36,1), background .34s ease, box-shadow .34s ease, color .3s ease;
  }
  .ui-sw .ui-k svg { width: 13.5px; height: 13.5px; display: block; }
  .ui-sw .i-moon { position: absolute; opacity: 0; transform: rotate(-70deg) scale(.6); transition: opacity .28s ease, transform .38s ease; }
  .ui-sw .i-sun { opacity: 1; transform: rotate(0) scale(1); transition: opacity .28s ease, transform .38s ease; }
  .ui-sw[aria-pressed="true"] {
    background: rgba(255,255,255,.10);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.14);
  }
  .ui-sw[aria-pressed="true"] .ui-k {
    transform: translateX(25px); color: #e8e8ec;
    background: linear-gradient(#58585e, #2f2f33);
    box-shadow: 0 2px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
  }
  .ui-sw[aria-pressed="true"] .i-moon { opacity: 1; transform: rotate(0) scale(1); }
  .ui-sw[aria-pressed="true"] .i-sun { opacity: 0; transform: rotate(70deg) scale(.6); }

  /* 语言切换：同款毛玻璃，文案 ئۇ / 中 */
  .ui-seg {
    position: relative; display: inline-flex; padding: 3px; border-radius: 999px;
    width: 58px; height: 33px;   /* 和深色模式开关一样大 */
    background: rgba(120,120,128,.16);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    box-shadow: inset 0 1px 2px rgba(0,0,0,.10), inset 0 0 0 1px rgba(255,255,255,.5);
  }
  .ui-seg button {
    position: relative; z-index: 2; flex: 1 1 0; height: 27px; padding: 0;
    border: 0; background: transparent; border-radius: 999px; cursor: pointer; outline: none;
    font-family: inherit; font-size: 13px; font-weight: 600; color: rgba(0,0,0,.34);
    line-height: 27px;
    transition: color .3s ease;
  }
  .ui-seg button.ug { font-family: 'UKIJ Tor', 'Noto Naskh Arabic', sans-serif; font-size: 15px; line-height: 27px; }
  /* 选中态文字 = 深色开关里图标的同色逻辑（浅色：中灰 / 深色：亮白） */
  .ui-seg button.on { color: #6e6e73; }
  .ui-seg .ui-thumb {
    position: absolute; z-index: 1; top: 3px; left: 3px; width: 26px; height: 27px; border-radius: 999px;
    background: linear-gradient(#ffffff, #ececf0);
    box-shadow: 0 2px 6px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.9);
    transition: transform .42s cubic-bezier(.22,1.2,.36,1);
  }
  .ui-seg[data-i="1"] .ui-thumb { transform: translateX(26px); }
  html[data-theme="dark"] .ui-seg button { color: rgba(255,255,255,.40); }
  html[data-theme="dark"] .ui-seg button.on { color: #e8e8ec; }
  html[data-theme="dark"] .ui-seg .ui-thumb {
    background: linear-gradient(#58585e, #2f2f33);
    box-shadow: 0 2px 8px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.22);
  }
  /* 开关浮在页面右上角，给工具页让出位置 */
  #toolWrap { padding-top: 80px; }

  /* ================= 深色模式 ================= */
  html[data-theme="dark"] {
    --bg: #0b0b0c;
    --panel: #17171a;
    --text: #f2f2f4;
    --muted: #9d9da6;
    --line: rgba(255,255,255,.12);
    --accent: #f2f2f4;
    --accent-hover: #ffffff;
    --accent-text: #0a0a0b;
    --danger: #ff6f61;
    color-scheme: dark;
  }
  html[data-theme="dark"] body { background: var(--bg); }
  html[data-bg-theme="dark"] .grid-dots {
    background-image: radial-gradient(circle, rgba(255,255,255,0.10) 1.2px, transparent 1.8px);
  }
  html[data-bg-theme="dark"] #grainient::after {
    background:
      radial-gradient(ellipse 62% 54% at 50% 42%,
        rgba(255,255,255,.07) 0%, rgba(255,255,255,.03) 48%, rgba(255,255,255,0) 76%),
      radial-gradient(ellipse 100% 100% at 50% 46%,
        rgba(0,0,0,0) 55%, rgba(0,0,0,.55) 100%);
  }
  html[data-theme="dark"] .top,
  html[data-theme="dark"] .login-card,
  html[data-theme="dark"] .tool-panel {
    background: rgba(23,23,26,.72);
    box-shadow: 0 18px 50px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
  }
  html[data-theme="dark"] .mask { background: rgba(0,0,0,.62); }
  html[data-theme="dark"] .modal { background: #17171a; box-shadow: 0 20px 60px rgba(0,0,0,.7); }
  html[data-theme="dark"] .btn {
    background: rgba(255,255,255,.08); color: var(--text); border-color: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 2px 10px rgba(0,0,0,.35);
  }
  html[data-theme="dark"] .btn:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.28); }
  html[data-theme="dark"] .btn.ghost { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.15); }
  html[data-theme="dark"] .btn::before {
    background: conic-gradient(from var(--angle), transparent 0deg, rgba(255,255,255, calc(.5 * var(--prox))) 20deg, transparent 55deg, transparent 360deg);
  }
  html[data-theme="dark"] .balance-pill { background: rgba(255,255,255,.06); }
  html[data-theme="dark"] .brand::before {
    background: linear-gradient(135deg, #ffffff, #8f8f96);
    box-shadow: 0 0 10px rgba(255,255,255,.22);
  }
  html[data-theme="dark"] .drop { border-color: rgba(255,255,255,.14); }
  html[data-theme="dark"] .drop.drag { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.32); }
  html[data-theme="dark"] .icon-ring {
    background: linear-gradient(160deg, rgba(255,255,255,.16), rgba(255,255,255,.05));
    border-color: rgba(255,255,255,.16);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 10px 26px rgba(0,0,0,.55);
  }
  html[data-theme="dark"] .start-btn { background: #f2f2f4; color: #0a0a0b; box-shadow: 0 10px 30px rgba(0,0,0,.5); }
  html[data-theme="dark"] .start-btn:hover { background: #ffffff; }
  html[data-theme="dark"] .start-btn:disabled { background: rgba(255,255,255,.13); color: rgba(255,255,255,.4); }
  html[data-theme="dark"] .lang-trigger {
    background: rgba(255,255,255,.10); color: var(--text);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.14), 0 4px 14px rgba(0,0,0,.35);
  }
  html[data-theme="dark"] .lang-options {
    --base: #f2f2f4; --pill-bg: #141416; --pill-text: #f2f2f4; --hover-text: #0a0a0b;
  }
  html[data-theme="dark"] .pill-check { color: #0a0a0b; }
  html[data-theme="dark"] .lang-arrow { color: rgba(255,255,255,.3); }
  html[data-theme="dark"] .border-glow-card {
    --card-bg: #141416;
    border-color: rgba(255,255,255,.13);
    box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 8px 24px rgba(0,0,0,.45);
  }
  html[data-theme="dark"] .field input,
  html[data-theme="dark"] .modal input { background: rgba(255,255,255,.06); }
  html[data-theme="dark"] .field input::placeholder { color: rgba(255,255,255,.34); }
  html[data-theme="dark"] .field input:focus,
  html[data-theme="dark"] textarea:focus { border-color: rgba(255,255,255,.28); }
  html[data-theme="dark"] textarea { background: rgba(255,255,255,.055); }
  html[data-theme="dark"] .seg { background: rgba(255,255,255,.055); }
  html[data-theme="dark"] .seg.edited { background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.35); }
  html[data-theme="dark"] .exp-seg { background: rgba(255,255,255,.055); }
  html[data-theme="dark"] .exp-opt.active { background: #f2f2f4; color: #0a0a0b; }
  html[data-theme="dark"] .lang-select-box { background: rgba(255,255,255,.08); }
  html[data-theme="dark"] .bar { background: rgba(255,255,255,.13); }
  html[data-theme="dark"] .cost { background: rgba(255,255,255,.05); }
  html[data-theme="dark"] .hero-title .t-ug,
  html[data-theme="dark"] .hero-title .t-zh { color: #ececf0; }
  html[data-theme="dark"] .hero-desc { color: #b6b6bf; }
  html[data-theme="dark"] .hero-cta {
    background: #f2f2f4; color: #0a0a0b; border-color: #f2f2f4;
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
  }
  html[data-theme="dark"] .hero-cta:hover { background: #ffffff; }
  html[data-theme="dark"] .footer-inner,
  html[data-theme="dark"] .footer-links a { color: #8f8f97; }
  html[data-theme="dark"] .icp a { color: #8f8f97; }
  html[data-theme="dark"] .feature-card,
  html[data-theme="dark"] .price-card,
  html[data-theme="dark"] .step { background: rgba(255,255,255,.05); }
  @media (max-width: 720px) {
    .ui-tools { top: 12px; right: 12px; gap: 8px; }
    #toolWrap { padding-top: 74px; }
  }

  /* ================= 动效与交互细节 ================= */
  html { scroll-behavior: smooth; }

  /* 黑白切换：自己实现的「从开关那个点向外铺开」。
     不再用浏览器的快照扩散 —— 实测它在你这个页面上会残留旧贴片，闪一条。
     这里用一块纯色层做圆形扩散（GPU 合成 transform，不重绘、不拍快照），
     背景渐变等圆铺满后再换（那时被盖住，看不见），内容颜色同步做 0.26s 渐变。 */
  .theme-ripple {
    position: fixed; z-index: -1; left: 0; top: 0;
    width: 1000px; height: 1000px; margin: -500px 0 0 -500px;
    border-radius: 50%; background: #fdfdfe;
    transform: translate3d(var(--tx, 92vw), var(--ty, 6vh), 0) scale(0);
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden; backface-visibility: hidden;
    pointer-events: none;
  }
  .theme-ripple.on { animation: rippleGrow .62s cubic-bezier(.22,.75,.25,1) forwards; }
  @keyframes rippleGrow {
    from { transform: translate3d(var(--tx, 92vw), var(--ty, 6vh), 0) scale(0); }
    to   { transform: translate3d(var(--tx, 92vw), var(--ty, 6vh), 0) scale(var(--scale, 3)); }
  }
  .theme-ripple.fade {
    animation: none;
    transform: translate3d(var(--tx, 92vw), var(--ty, 6vh), 0) scale(var(--scale, 3));
    transition: opacity .22s linear; opacity: 0;
  }
  /* 切换瞬间：只让「内容」的颜色渐变（背景层不参与，等圆盖满再换） */
  html.theme-anim .hero-inner, html.theme-anim .hero-inner *,
  html.theme-anim .footer, html.theme-anim .footer *,
  html.theme-anim #toolWrap, html.theme-anim #toolWrap *,
  html.theme-anim .ui-tools, html.theme-anim .ui-tools * {
    transition: background-color .26s ease, color .26s ease, border-color .26s ease,
      box-shadow .26s ease, fill .26s ease, stroke .26s ease !important;
  }
  /* 过渡期间先关掉毛玻璃：否则每帧都要重算模糊，弱机上会掉帧 */
  html.theme-anim .tool-panel, html.theme-anim .top, html.theme-anim .drop,
  html.theme-anim .login-card, html.theme-anim .seg, html.theme-anim .lang-trigger {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  /* 语言切换：文字渐隐 → 换字 → 渐显（背景完全不动）
     注意：这里只做透明度，不做位移 —— 页脚是绝对定位在底部的，
     给它加 translateY 会让页面高出几像素、浏览器就弹出滚动条，居中内容会左右抖一下。 */
  .hero-inner, .footer, #toolWrap { transition: opacity .26s ease; }
  html.lang-fade .hero-inner,
  html.lang-fade .footer,
  html.lang-fade #toolWrap { opacity: 0; }

  /* 视图切换（首页 / 登录 / 工具）淡入 */
  @keyframes viewIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
  .view-in { animation: viewIn .44s cubic-bezier(.22,1,.36,1); }

  /* 结果逐条浮现 */
  @keyframes segIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  .seg-in { animation: segIn .38s cubic-bezier(.22,1,.36,1) both; }

  /* 弹窗 */
  .mask { animation: maskIn .2s ease; }
  .modal { animation: modalIn .34s cubic-bezier(.22,1,.36,1); }
  @keyframes maskIn { from { opacity: 0; } }
  @keyframes modalIn { from { opacity: 0; transform: translateY(12px) scale(.97); } }

  /* 轻提示（代替 alert） */
  .toast-wrap {
    position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 60;
    display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
  }
  .toast {
    max-width: 84vw; font-size: 13.5px; padding: 10px 18px; border-radius: 999px;
    background: rgba(18,18,20,.92); color: #ffffff;
    box-shadow: 0 12px 30px rgba(0,0,0,.28);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
    animation: toastIn .32s cubic-bezier(.22,1.2,.36,1);
  }
  html[data-theme="dark"] .toast { background: rgba(245,245,247,.94); color: #0a0a0b; box-shadow: 0 12px 30px rgba(0,0,0,.5); }
  .toast.out { animation: toastOut .3s ease forwards; }
  @keyframes toastIn { from { opacity: 0; transform: translateY(14px) scale(.96); } }
  @keyframes toastOut { to { opacity: 0; transform: translateY(10px) scale(.97); } }

  /* 整页拖拽上传 */
  .drop-overlay {
    position: fixed; inset: 0; z-index: 55; display: none;
    align-items: center; justify-content: center;
    background: rgba(255,255,255,.74);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  html[data-theme="dark"] .drop-overlay { background: rgba(8,8,10,.74); }
  .drop-overlay.on { display: flex; animation: maskIn .18s ease; }
  .drop-overlay .box {
    border: 2px dashed rgba(0,0,0,.26); border-radius: 28px; padding: 38px 54px;
    font-size: 17px; font-weight: 600; color: var(--text); background: var(--panel);
    box-shadow: 0 20px 60px rgba(0,0,0,.12);
    animation: modalIn .3s cubic-bezier(.22,1,.36,1);
  }
  html[data-theme="dark"] .drop-overlay .box { border-color: rgba(255,255,255,.28); box-shadow: 0 20px 60px rgba(0,0,0,.5); }

  /* 系统开了「减弱动态效果」时全部收掉 */
  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  }

/* 登录卡片里的「返回首页」小链接 */
.login-card .login-home { display: inline-block; margin-top: 20px; font-size: 12.5px; color: #8a8a90; text-decoration: none; }
.login-card .login-home:hover { color: #0a0a0b; }
html[data-theme="dark"] .login-card .login-home { color: #8a8a90; }

/* 顶栏品牌名是「回首页」的链接，但必须看起来还像原来的品牌文字：
   不然会变成浏览器默认的蓝字+下划线（很难看）。 */
a.brand, .top .brand, .login-card .brand {
  color: var(--text); text-decoration: none; cursor: pointer;
}
a.brand:hover { opacity: .78; }

/* ============ 公告横栏（网页版，跟小程序同一套规则）============
   规则：多条左右滑 + 自动轮播（用户碰过就停）、底下小圆点、
   普通公告能关（关掉记在本地，改过文案会重新出现）、紧急和维护中不能关。
   平时没有公告时整块不渲染，不会留一条空白。 */
.notice-wrap { margin: 0 0 16px; }
.notice-viewport { overflow: hidden; border-radius: 16px; }
.notice-track { display: flex; transition: transform .32s ease; will-change: transform; }
.notice-slide { flex: 0 0 100%; }
.notice-card {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 14px; border-radius: 16px; font-size: 13.5px; line-height: 1.62;
  box-shadow: 0 6px 18px rgba(0,0,0,.05);
}
.notice-tag {
  flex: none; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 999px;
  white-space: nowrap; margin-top: 1px;
}
.notice-text { flex: 1; min-width: 0; }
.notice-x {
  flex: none; cursor: pointer; font-size: 17px; line-height: 1; padding: 0 2px;
  opacity: .65; background: none; border: 0; color: inherit;
}
.notice-x:hover { opacity: 1; }
.notice-card--normal { background: var(--panel); color: var(--text); border: 1px solid var(--line); }
.notice-card--normal .notice-tag { background: rgba(201,150,47,.16); color: #8a6410; }
.notice-card--urgent { background: linear-gradient(100deg,#e03b2c 0%,#b42318 100%); color: #fff; }
.notice-card--urgent .notice-tag { background: rgba(255,255,255,.24); color: #fff; }
.notice-card--maintenance { background: linear-gradient(100deg,#a3701b 0%,#855a13 100%); color: #fff; }
.notice-card--maintenance .notice-tag { background: rgba(255,255,255,.24); color: #fff; }
.notice-dots { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 10px; }
.notice-dot {
  width: 6px; height: 6px; border-radius: 999px; background: rgba(0,0,0,.16);
  cursor: pointer; transition: width .2s, background .2s; border: 0; padding: 0;
}
.notice-dot.on { width: 18px; background: #6e6e76; }
html[data-theme="dark"] .notice-dot { background: rgba(255,255,255,.2); }
html[data-theme="dark"] .notice-dot.on { background: #9a9aa2; }
/* 维吾尔语 / 哈萨克语 / 柯尔克孜语（阿拉伯字母）那三种，公告文字要从右往左 */
html[data-lang="ug"] .notice-text,
html[data-lang="kk"] .notice-text,
html[data-lang="ky"] .notice-text { direction: rtl; text-align: right; }