:root{
    --bg:#080d13; --bg2:#0c141c; --card:rgba(17,25,34,.86); --card2:rgba(13,20,28,.9);
    --line:rgba(120,170,190,.16); --line2:rgba(120,170,190,.28);
    --ink:#e8f2f6; --muted:#8ba3b0; --muted2:#64798a;
    --mint:#5ee9bf; --cyan:#3ec7f5; --amber:#fbbf24; --red:#fb7185;
    --shadow:0 20px 60px rgba(0,0,0,.5);
    --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,"Courier New",monospace;
  }
  *{box-sizing:border-box}
  [hidden]{display:none !important}
  html{-webkit-text-size-adjust:100%}
  body{
    margin:0;color:var(--ink);min-height:100vh;
    font:14px/1.62 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
    background:
      radial-gradient(1100px 620px at 88% -12%, rgba(94,233,191,.10), transparent 62%),
      radial-gradient(900px 520px at 6% -6%, rgba(62,199,245,.10), transparent 58%),
      var(--bg);
  }
  .wrap{max-width:1440px;margin:0 auto;padding:16px 22px 44px}
  a{color:var(--mint)}

  /* ---------- 椤舵爮 ---------- */
  .topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;height:58px;border-bottom:1px solid var(--line)}
  .topbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:18px;min-width:0}
  .ocr-coffee-trigger{appearance:none;padding:7px 11px;border:1px solid rgba(251,191,36,.55);border-radius:9px;background:var(--amber);color:#241600;font:800 11px/1.2 var(--mono);cursor:pointer;transition:filter .2s,transform .2s}
  .ocr-coffee-trigger:hover{filter:brightness(1.08);transform:translateY(-1px)}
  .ocr-coffee-trigger:focus-visible,.ocr-dialog-close:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
  .brand{display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em;font-size:17px}
  .mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;font-size:15px;
    background:linear-gradient(140deg,#0e1b22,#11262c);color:var(--mint);border:1px solid var(--line2);box-shadow:0 6px 18px rgba(0,0,0,.4)}
  .brand-sub{display:block;font-size:10px;font-weight:700;letter-spacing:.16em;color:var(--muted2);text-transform:uppercase}
  .privacy{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#7be3c0}
  .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 10px #5ee9bf}
  .language-switch{display:inline-flex;align-items:center;gap:2px;padding:3px;border:1px solid var(--line2);border-radius:10px;background:rgba(8,13,19,.72);box-shadow:0 6px 18px rgba(0,0,0,.22)}
  .language-switch button{appearance:none;min-width:42px;padding:6px 9px;border:0;border-radius:7px;background:transparent;color:var(--muted2);font:800 11px/1.2 var(--mono);letter-spacing:.03em;cursor:pointer;transition:color .2s,background .2s,box-shadow .2s}
  .language-switch button:hover{color:var(--ink);background:rgba(94,233,191,.08)}
  .language-switch button[aria-pressed="true"]{color:#061914;background:var(--mint);box-shadow:0 3px 10px rgba(94,233,191,.2)}
  .language-switch button:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}

  /* ---------- hero ---------- */
  .hero{padding:38px 0 26px;max-width:900px}
  .kicker{display:flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--mint);text-transform:uppercase}
  .kicker:before{content:"";width:24px;height:1px;background:var(--mint)}
  .hero h1{margin:14px 0 10px;font-size:clamp(30px,4.2vw,52px);line-height:1.06;letter-spacing:-.045em}
  .hero h1 span{background:linear-gradient(120deg,var(--mint),var(--cyan));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
  .hero p{margin:0;color:var(--muted);font-size:15px;max-width:760px}

  /* ---------- 甯冨眬 ---------- */
  .layout{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(330px,.9fr);gap:16px;align-items:start;margin-top:8px}
  .col-main,.col-side{display:flex;flex-direction:column;gap:16px;min-width:0}
  .card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:16px 16px 15px;box-shadow:var(--shadow);backdrop-filter:blur(10px)}
  .card-head{display:flex;align-items:center;gap:10px;margin-bottom:12px}
  .card-head h2{margin:0;font-size:14px;font-weight:800;letter-spacing:.01em;display:flex;align-items:center;gap:9px}
  .num{width:20px;height:20px;border-radius:7px;display:grid;place-items:center;font-size:11px;font-weight:800;
    background:rgba(94,233,191,.12);color:var(--mint);border:1px solid rgba(94,233,191,.28);font-family:var(--mono)}
  .meta{margin-left:auto;font-size:11.5px;color:var(--muted2);font-family:var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:60%}

  /* ---------- 鎸夐挳 / 鎺т欢 ---------- */
  .btn{appearance:none;border:1px solid rgba(94,233,191,.35);background:linear-gradient(180deg,rgba(94,233,191,.16),rgba(94,233,191,.07));
    color:#d9fff1;font:inherit;font-size:12.5px;font-weight:700;padding:8px 14px;border-radius:10px;cursor:pointer;transition:.16s;white-space:nowrap}
  .btn:hover{background:linear-gradient(180deg,rgba(94,233,191,.26),rgba(94,233,191,.12));transform:translateY(-1px)}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none}
  .btn.ghost{border-color:var(--line2);background:rgba(255,255,255,.03);color:var(--ink)}
  .btn.ghost:hover{background:rgba(255,255,255,.08)}
  .btn.sm{font-size:12px;padding:6px 11px;border-radius:9px}
  .btn.xs{font-size:11px;padding:4px 9px;border-radius:8px}
  .chk{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);cursor:pointer;user-select:none}
  .chk input{accent-color:#5ee9bf;width:14px;height:14px;cursor:pointer}
  .toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .toolbar .grow{flex:1}
  .sel{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
  select,input[type=number]{font:inherit;font-size:12.5px;color:var(--ink);background:var(--card2);border:1px solid var(--line2);border-radius:9px;padding:6px 8px}
  select{cursor:pointer}
  input[type=number]{width:100%}
  kbd{font-family:var(--mono);font-size:11px;background:rgba(255,255,255,.08);border:1px solid var(--line2);border-bottom-width:2px;border-radius:5px;padding:1px 5px}

  /* ---------- 涓婁紶鍖?---------- */
  .drop{border:1.5px dashed var(--line2);border-radius:14px;background:var(--card2);padding:34px 18px;text-align:center;cursor:pointer;transition:.18s}
  .drop:hover,.drop.over{border-color:var(--mint);background:rgba(94,233,191,.06)}
  .drop-icon{font-size:30px;line-height:1;margin-bottom:10px;opacity:.85}
  .drop-main{font-size:14.5px;font-weight:700}
  .drop-sub{font-size:12px;color:var(--muted2);margin-top:6px}
  .drop-actions{margin-top:14px}
  .viewer{display:flex;flex-direction:column;gap:10px}
  .canvas-box{position:relative;background:#05090d;border:1px solid var(--line);border-radius:12px;overflow:hidden;max-height:66vh;display:flex;justify-content:center}
  canvas{display:block;max-width:100%;max-height:66vh;width:auto;height:auto}
  .banner{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--amber);background:rgba(251,191,36,.08);border:1px solid rgba(251,191,36,.25);border-radius:10px;padding:8px 12px}
  .banner.err{color:var(--red);background:rgba(251,113,133,.08);border-color:rgba(251,113,133,.28)}
  .banner.ok{color:#8ff0cf;background:rgba(94,233,191,.08);border-color:rgba(94,233,191,.25)}

  /* ---------- 缁撴灉 ---------- */
  .merged{width:100%;min-height:150px;max-height:38vh;resize:vertical;background:var(--card2);color:var(--ink);
    border:1px solid var(--line);border-radius:12px;padding:11px 12px;font:13px/1.7 var(--mono);white-space:pre-wrap}
  .merged:focus{outline:none;border-color:rgba(94,233,191,.4)}
  .results{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;max-height:36vh;overflow:auto}
  .results li.item{display:flex;gap:10px;align-items:flex-start;padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.03);
    border:1px solid transparent;cursor:pointer;transition:.14s}
  .results li.item:hover{background:rgba(94,233,191,.07)}
  .results li.item.active{border-color:rgba(94,233,191,.5);background:rgba(94,233,191,.1)}
  .results li.empty{color:var(--muted2);font-size:12.5px;padding:8px 2px}
  .idx{flex:0 0 auto;min-width:24px;height:20px;padding:0 5px;border-radius:6px;display:grid;place-items:center;
    font:700 11px/1 var(--mono);background:rgba(62,199,245,.14);color:#9fe4ff;border:1px solid rgba(62,199,245,.28)}
  .txt{flex:1;min-width:0;word-break:break-word;font-size:13.5px}
  .score{flex:0 0 auto;font:11px/1 var(--mono);color:var(--muted2);padding-top:4px}
  .score.warn{color:var(--amber)}

  /* ---------- 璇嗗埆涓細鐢诲竷閬僵涓庡姩鐢?---------- */
  .canvas-mask{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;overflow:hidden;
    background:linear-gradient(180deg,rgba(5,9,13,.5),rgba(5,9,13,.74));backdrop-filter:blur(2px)}
  .canvas-mask[hidden]{display:none}
  .canvas-box.busy{border-color:rgba(94,233,191,.4);box-shadow:0 0 0 1px rgba(94,233,191,.18),0 18px 50px rgba(0,0,0,.5)}
  .mask-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:9px;padding:18px 26px 16px;
    border-radius:14px;text-align:center;max-width:84%;
    background:rgba(9,15,21,.84);border:1px solid rgba(94,233,191,.3);box-shadow:0 18px 50px rgba(0,0,0,.5)}
  .spinner{width:34px;height:34px;border-radius:50%;border:2.5px solid rgba(94,233,191,.18);
    border-top-color:var(--mint);border-right-color:var(--cyan);animation:spin .9s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}
  .mask-title{font-size:14.5px;font-weight:800;color:#d9fff1}
  .dots{display:inline-flex;gap:3px;margin-left:3px;vertical-align:middle}
  .dots i{width:4px;height:4px;border-radius:50%;background:var(--mint);opacity:.25;animation:dotPulse 1.2s ease-in-out infinite}
  .dots i:nth-child(2){animation-delay:.18s}
  .dots i:nth-child(3){animation-delay:.36s}
  @keyframes dotPulse{0%,100%{opacity:.22;transform:translateY(0)}50%{opacity:1;transform:translateY(-2px)}}
  .mask-sub{font:12px/1.5 var(--mono);color:var(--muted);min-height:18px}
  .mask-bar{position:relative;width:216px;max-width:58vw;height:5px;border-radius:99px;background:rgba(255,255,255,.1);overflow:hidden}
  .mask-bar i{display:block;height:100%;width:0;border-radius:99px;transition:width .25s;
    background:linear-gradient(90deg,var(--mint),var(--cyan))}
  .mask-bar.indet i,.mask-bar.phase i{width:42%;animation:indet 1.25s linear infinite}
  @keyframes indet{0%{transform:translateX(-105%)}100%{transform:translateX(280%)}}
  .mask-tip{font-size:11px;color:var(--muted2)}

  /* ---------- 鍙傛暟 ---------- */
  .params{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}

  /* 鐘舵€佹枃瀛楄剦鍐诧紙璇嗗埆涓級 */
  .meta.working{color:#9fe4ff;display:inline-flex;align-items:center}
  .meta.working.pulse{animation:statusPulse 1.2s ease-in-out infinite !important}
  .meta.working:before{content:"";flex:0 0 auto;width:6px;height:6px;margin-right:6px;border-radius:50%;
    background:var(--mint);animation:blink 1s ease-in-out infinite}
  @keyframes blink{0%,100%{opacity:.3;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}
  @keyframes statusPulse{0%,100%{opacity:.62}50%{opacity:1}}

  /* 缁撴灉楠ㄦ灦灞?*/
  .results li.sk-row{display:flex;gap:10px;align-items:center;padding:10px;border-radius:10px;
    background:rgba(255,255,255,.03);border:1px solid transparent}
  .results li.sk-row .idx{background:rgba(62,199,245,.07);border-color:transparent;color:transparent}
  .sk-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}
  .sk{display:block;height:10px;border-radius:6px;background-size:220% 100%;animation:shimmer 1.35s linear infinite;
    background-image:linear-gradient(90deg,rgba(255,255,255,.055),rgba(255,255,255,.17),rgba(255,255,255,.055))}
  @keyframes shimmer{0%{background-position:120% 0}100%{background-position:-120% 0}}

  /* 鎸夐挳 loading 鎬?*/
  .btn.loading:before{content:"";display:inline-block;width:11px;height:11px;margin-right:6px;vertical-align:-1px;
    border-radius:50%;border:2px solid rgba(255,255,255,.3);border-top-color:#d9fff1;animation:spin .7s linear infinite}

  @media (prefers-reduced-motion:reduce){
    .spinner,.dots i,.mask-bar.indet i,.sk,.meta.working,.meta.working:before,.btn.loading:before{animation:none}
  }
  .p{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--muted)}
  .p.wide{grid-column:1/-1}
  .p.chks{grid-column:1/-1;flex-direction:row;flex-wrap:wrap;gap:12px;padding-top:2px}

  /* ---------- 妯″瀷鐘舵€?---------- */
  .bar{height:7px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden;margin-bottom:9px}
  .bar i{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--mint),var(--cyan));transition:width .22s}
  .log{font:11.5px/1.6 var(--mono);color:var(--muted2);max-height:132px;overflow:auto;white-space:pre-wrap;word-break:break-all}
  .log b{color:#9fe4ff;font-weight:600}
  .log .ok{color:#8ff0cf}
  .log .err{color:var(--red)}
  details.local{margin-top:12px;border-top:1px solid var(--line);padding-top:11px}
  details.local summary{cursor:pointer;font-size:12.5px;color:var(--muted);font-weight:700;outline:none}
  details.local summary:hover{color:var(--ink)}
  .tip{font-size:11.5px;color:var(--muted2);margin:9px 0}
  .file{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin-top:7px}
  .file span{flex:0 0 132px}
  .file input{font-size:11px;color:var(--muted2);max-width:100%;flex:1;min-width:0}

  .foot{margin-top:22px;color:var(--muted2);font-size:11.5px;text-align:center;line-height:1.9}
  .foot code{font-family:var(--mono);color:var(--muted)}
  .ocr-coffee-dialog{width:min(420px,calc(100% - 32px));padding:24px;border:1px solid var(--line2);border-radius:16px;background:var(--card2);color:var(--ink);box-shadow:0 24px 100px rgba(0,0,0,.7)}
  .ocr-coffee-dialog::backdrop{background:rgba(2,7,11,.78);backdrop-filter:blur(3px)}
  .ocr-coffee-dialog-header{display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
  .ocr-coffee-dialog h2{margin:4px 0 0;font-size:28px;letter-spacing:-.04em}
  .ocr-dialog-close{width:34px;height:34px;padding:0;border:1px solid var(--line2);border-radius:9px;background:rgba(8,13,19,.72);color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
  .ocr-dialog-close:hover{color:var(--ink);border-color:var(--mint)}
  .ocr-coffee-description{margin:18px 0 22px;color:var(--muted)}
  .ocr-paypal-button{display:grid;place-items:center;padding:20px;border-radius:12px;background:#fff;color:#000}
  .ocr-paypal-submit{text-align:center;border:0;border-radius:.25rem;min-width:11.625rem;padding:0 2rem;height:2.625rem;font-weight:bold;background:#FFD140;color:#000;font-family:"Helvetica Neue",Arial,sans-serif;font-size:1rem;line-height:1.25rem;cursor:pointer}
  .ocr-paypal-button form>img{max-width:100%}

  @media (max-width:1080px){
    .layout{grid-template-columns:1fr}
    .canvas-box canvas{max-height:52vh}
  }
  @media (max-width:640px){
    .wrap{padding:12px 13px 34px}
    .hero{padding:26px 0 20px}
    .privacy{display:none}
    .topbar-actions{gap:8px}
    .ocr-coffee-trigger{padding:6px 8px}
    .params{grid-template-columns:1fr}
    .drop{padding:24px 14px}
    .meta{max-width:45%}
  }