/* ============================================================
   LabelCheck 控制台 — 产品 UI 组件层（浅色）
   令牌见 tokens.css（必须先于本文件加载）
   面向对象：标签审校 / QA 人员。密度偏高、动效克制、状态优先。
   布局一律用逻辑属性（inline-start/end），阿拉伯语 dir=rtl 时自动镜像。
   ============================================================ */

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 15px;
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

/* 数字、编号、文件尺寸一律等宽 —— QA 要扫一列数据，对齐比好看重要。
   RTL 下数字串仍按 LTR 排（阿拉伯语的数字方向本来就是 LTR）。 */
.mono, .num, .job-id, .fi-size, .pct {
    font-family: var(--font-mono);
    font-feature-settings: 'tnum' 1;
    direction: ltr;
    unicode-bidi: isolate;
}

::selection { background: var(--brand-dim); color: var(--text); }

/* ─── 焦点可见 ─── */
:focus { outline: none; }
:focus-visible {
    outline: 2px solid var(--brand-deep);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ─── 图标：Tabler outline，走 <use> 引用页面顶部的 sprite ─── */
.i {
    width: 1em; height: 1em; flex: none;
    stroke: currentColor; fill: none;
    stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.i-lg { width: 1.25em; height: 1.25em; }
/* 有方向性的图标在 RTL 下镜像 */
[dir="rtl"] .i-flip { transform: scaleX(-1); }

/* 品牌标记「流星逐梦」：实心图形，自带配色，不吃 currentColor */
.brand-mark { width: 30px; height: 30px; flex: none; display: block; }
.brand-mark-lg { width: 38px; height: 38px; }

/* ═══════════════════════════════════════════════════════
   按钮
═══════════════════════════════════════════════════════ */

button, .btn {
    cursor: pointer;
    border: none;
    font-family: inherit;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    transition: background 0.16s var(--ease), border-color 0.16s var(--ease),
                color 0.16s var(--ease), box-shadow 0.16s var(--ease),
                transform 0.08s var(--ease);
}
button:active:not(:disabled), .btn:active { transform: translateY(1px); }

/* 主按钮 = 品牌淡蓝底 + 深蓝字（7.2:1）。
   淡蓝配白字只有 2.2:1，绝对不能那样用。 */
.btn-primary {
    background: var(--brand);
    color: var(--on-brand);
    padding: 11px 22px;
    border-radius: var(--r-ctl);
    font-size: 0.9rem;
    letter-spacing: -0.005em;
    box-shadow: 0 1px 2px rgba(22, 34, 74, 0.08);
}
.btn-primary:hover:not(:disabled) { background: var(--brand-hi); }
.btn-primary:disabled {
    background: var(--surface-3);
    /* 三级文字压在 surface-3 上只有 4.2:1，而"禁用"恰恰是用户首屏
       看到的默认状态，标签必须读得清；禁用感由灰底 + not-allowed 传达 */
    color: var(--text-2);
    cursor: not-allowed;
    box-shadow: none;
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    padding: 9px 16px;
    border-radius: var(--r-ctl);
    font-size: 0.85rem;
    border: 1px solid var(--line);
}
.btn-secondary:hover { background: var(--surface-2); border-color: var(--brand-line); }

.btn-ghost {
    background: transparent;
    color: var(--text-2);
    padding: 8px 12px;
    border-radius: var(--r-ctl);
    font-size: 0.85rem;
    border: 1px solid transparent;
}
.btn-ghost:hover { background: var(--surface-2); color: var(--text); }

/* 完成态任务的主动作：唯一用绿色的按钮，与"已完成"语义一致 */
.btn-report {
    background: var(--ok-bg);
    color: var(--ok);
    border: 1px solid var(--ok-line);
    padding: 7px 14px;
    border-radius: var(--r-ctl);
    font-size: 0.82rem;
}
.btn-report:hover { background: #d3efe2; }

/* ═══════════════════════════════════════════════════════
   表单
═══════════════════════════════════════════════════════ */

input[type="text"], input[type="password"], input[type="search"], textarea, select {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    color: var(--text);
    font-family: inherit;
    font-size: 0.92rem;
    padding: 11px 14px;
    outline: none;
    width: 100%;
    transition: border-color 0.16s var(--ease), box-shadow 0.16s var(--ease);
}
input:focus, textarea:focus, select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-dim);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }
textarea { resize: vertical; line-height: 1.6; min-height: 84px; }

.field, .form-group { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field > label, .form-group > label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-2);
    letter-spacing: 0.01em;
}
.field .help, .form-group .help { font-size: 0.78rem; color: var(--text-3); }

/* ─── 语言切换器 ─── */
.lang-pick {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--text-2);
}
.lang-pick .i { width: 15px; height: 15px; }
.lang-pick select {
    width: auto;
    padding: 6px 26px 6px 10px;
    font-size: 0.82rem;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23626e8c' stroke-width='2' stroke-linecap='round'><path d='M6 9l6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 6px center;
    background-size: 14px;
}
[dir="rtl"] .lang-pick select {
    padding: 6px 10px 6px 26px;
    background-position: left 6px center;
}
.lang-pick select:hover { background-color: var(--surface-2); color: var(--text); }
.lang-pick select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-dim); }

/* ═══════════════════════════════════════════════════════
   骨架 / 顶栏
═══════════════════════════════════════════════════════ */

.app-container { display: flex; flex-direction: column; min-height: 100dvh; }

.top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-inline: 28px;
    height: 62px;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 50;
}
.top-bar .user-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--text-2);
}

.brand {
    display: flex; align-items: center; gap: 10px;
    font-size: 1rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--text); text-decoration: none;
}

.chip {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 0.72rem; font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    border: 1px solid var(--line);
    color: var(--text-2);
}
.chip-brand { background: var(--brand-dim); border-color: var(--brand-line); color: var(--brand-deep); }

/* 额度计：QA 关心"这个月还能跑几次" */
.quota {
    display: flex; align-items: center; gap: 9px;
    padding: 5px 12px; border-radius: var(--r-pill);
    background: var(--surface-2); border: 1px solid var(--line);
    font-size: 0.76rem; color: var(--text-2);
}
.quota b { font-family: var(--font-mono); font-weight: 600; color: var(--text); direction: ltr; unicode-bidi: isolate; }
.quota-bar { width: 46px; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; }
.quota-bar i { display: block; height: 100%; background: var(--text-3); border-radius: 2px; transition: width 0.4s var(--ease); }
.quota.is-pro { background: var(--brand-dim); border-color: var(--brand-line); color: var(--brand-deep); }
.quota.is-pro b { color: var(--brand-deep); }
.quota.is-pro .quota-bar i { background: var(--brand-deep); }
.quota.is-full .quota-bar i { background: var(--err); }

.main { flex: 1; max-width: 1080px; margin-inline: auto; padding: 32px 28px 72px; width: 100%; }

.panel {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    margin-bottom: 22px;
    box-shadow: var(--shadow);
}
.panel-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; flex-wrap: wrap;
    padding: 18px 24px;
    border-bottom: 1px solid var(--line-soft);
}
.panel-head h2 {
    font-size: 0.98rem; font-weight: 650; letter-spacing: -0.01em;
    display: flex; align-items: center; gap: 9px;
}
.panel-head h2 .i { color: var(--brand-deep); }
.panel-head .sub { font-size: 0.8rem; color: var(--text-3); font-weight: 400; }
.panel-body { padding: 24px; }

/* ═══════════════════════════════════════════════════════
   登录 / 注册
═══════════════════════════════════════════════════════ */

.auth-page {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    min-height: 100dvh;
    padding: 24px;
    gap: 20px;
    /* 品牌淡蓝在页顶化开一层，避免整页死白 */
    background:
        radial-gradient(90% 60% at 50% -10%, rgba(145, 176, 253, 0.28), transparent 70%),
        var(--bg);
}
.auth-top { width: 100%; max-width: 400px; display: flex; justify-content: flex-end; }
.auth-card {
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-panel);
    padding: 34px 32px 28px;
    width: 100%;
    max-width: 400px;
    box-shadow: var(--shadow-lg);
}
.auth-brand { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.auth-card .title { font-size: 1.15rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; }
.auth-card .subtitle { font-size: 0.8rem; color: var(--text-3); }
.auth-card .lede { font-size: 0.86rem; color: var(--text-2); margin-bottom: 22px; }
.auth-card .btn-primary { width: 100%; margin-top: 4px; }
.auth-card .switch-link { text-align: center; margin-top: 18px; font-size: 0.84rem; color: var(--text-3); }
.auth-card .switch-link a { color: var(--brand-deep); text-decoration: none; font-weight: 600; cursor: pointer; }
.auth-card .switch-link a:hover { text-decoration: underline; }
.auth-foot { font-size: 0.76rem; color: var(--text-3); text-align: center; max-width: 400px; line-height: 1.7; }
.auth-foot a { color: var(--text-2); text-decoration: none; }
.auth-foot a:hover { color: var(--text); text-decoration: underline; }

.auth-error {
    display: none;
    align-items: flex-start; gap: 8px;
    background: var(--err-bg);
    color: var(--err);
    padding: 10px 13px;
    border-radius: var(--r-ctl);
    font-size: 0.84rem;
    margin-bottom: 16px;
    border: 1px solid var(--err-line);
}
.auth-error.show { display: flex; }

/* ═══════════════════════════════════════════════════════
   上传区
═══════════════════════════════════════════════════════ */

.upload-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .upload-grid { grid-template-columns: 1fr; } }

.dropzone {
    border: 1.5px dashed var(--line);
    border-radius: var(--r-ctl);
    padding: 26px 18px;
    text-align: center;
    transition: border-color 0.18s var(--ease), background 0.18s var(--ease);
    cursor: pointer;
    position: relative;
    min-height: 158px;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    background: var(--surface-2);
}
.dropzone:hover { border-color: var(--brand); background: var(--surface-3); }
.dropzone.drag-over {
    border-color: var(--brand);
    border-style: solid;
    background: var(--brand-dim);
}
/* 已选中文件：安静的确认（实线边 + 绿勾），不要整框变绿抢视觉 */
.dropzone.is-filled { border-style: solid; border-color: var(--line); background: var(--surface); }
.dropzone.is-filled .dz-icon { color: var(--ok); }
.dropzone.is-filled .dz-formats { opacity: 0.45; }

.dropzone .dz-icon { color: var(--text-3); margin-bottom: 6px; transition: color 0.18s var(--ease); }
.dropzone .dz-icon .i { width: 26px; height: 26px; stroke-width: 1.5; }
.dropzone:hover .dz-icon, .dropzone.drag-over .dz-icon { color: var(--brand-deep); }
.dropzone .dz-label { font-weight: 650; font-size: 0.9rem; letter-spacing: -0.01em; }
.dropzone .dz-hint { font-size: 0.78rem; color: var(--text-3); }
.dz-formats { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 8px; }
.dz-formats span {
    font-family: var(--font-mono);
    font-size: 0.65rem;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--surface-3);
    color: var(--text-2);
}
.dropzone input[type="file"] {
    /* 不用透明 input 铺满接收点击/拖拽：file input 的原生 drop 行为在
       不同浏览器下不一致，会抢走 dropzone 的 drop 导致拖拽失灵。
       点击改由 .dropzone 的 onclick 程序化触发 input.click()。 */
    position: absolute; inset: 0; opacity: 0; pointer-events: none;
}

.file-list { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.file-item {
    display: flex; align-items: center; gap: 9px;
    background: var(--surface-2);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding-block: 7px;
    padding-inline: 11px 8px;
    font-size: 0.82rem;
}
.file-item > .i { color: var(--text-3); }
.file-item .fi-name { flex: 1; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: start; }
.file-item .fi-size { color: var(--text-3); font-size: 0.72rem; white-space: nowrap; }
.file-item .fi-remove {
    display: grid; place-items: center;
    width: 22px; height: 22px;
    color: var(--text-3);
    cursor: pointer;
    border-radius: 6px;
    flex: none;
    transition: background 0.14s, color 0.14s;
}
.file-item .fi-remove:hover { background: var(--err-bg); color: var(--err); }

.submit-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    margin-top: 20px; padding-top: 20px;
    border-top: 1px solid var(--line-soft);
}
.submit-bar .status-text {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.83rem; color: var(--text-3);
}
.submit-bar .status-text.is-ok { color: var(--ok); }
.submit-bar .status-text.is-err { color: var(--err); }

/* ═══════════════════════════════════════════════════════
   任务队列
═══════════════════════════════════════════════════════ */

.jobs-header-actions { display: flex; gap: 8px; align-items: center; }

/* 一个面板里用发丝线分隔，不再卡片套卡片 */
.job-list { display: flex; flex-direction: column; }
.job-row {
    display: grid;
    /* 必须是 minmax(0, 1fr) 而不是 1fr：1fr 的默认最小值是 auto(min-content)，
       .job-actions 里那几个 nowrap 元素（状态 + 查看报告）在长词语种下
       会把这一列撑得比可用宽度还宽，整行溢出视口。 */
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 16px;
    padding: 15px 24px;
    border-top: 1px solid var(--line-soft);
    transition: background 0.14s var(--ease);
}
.job-row:first-child { border-top: none; }
.job-row:hover { background: var(--surface-2); }

.job-state {
    display: grid; place-items: center;
    width: 30px; height: 30px;
    border-radius: 8px;
    flex: none;
}
.job-state .i { width: 16px; height: 16px; }
.job-state.s-pending    { background: var(--wait-bg); color: var(--wait); }
.job-state.s-processing { background: var(--run-bg);  color: var(--run); }
.job-state.s-done       { background: var(--ok-bg);   color: var(--ok); }
.job-state.s-error      { background: var(--err-bg);  color: var(--err); }

.job-main { min-width: 0; }
.job-title {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.9rem; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    text-align: start;
}
/* 用间距分隔，不用中点：一行三四个"·"是 AI 味，且调到能看清就会喧宾夺主 */
.job-meta {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin-top: 3px;
    font-size: 0.76rem; color: var(--text-3);
}
.job-err { color: var(--err); }
.job-actions { display: flex; align-items: center; gap: 10px; }

/* 状态标签：颜色 + 文字双重编码，不靠颜色单独传意 */
.badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    font-size: 0.7rem;
    font-weight: 650;
    letter-spacing: 0.01em;
    border: 1px solid transparent;
}
.badge-pending    { background: var(--wait-bg); color: var(--wait); border-color: var(--wait-line); }
.badge-processing { background: var(--run-bg);  color: var(--run);  border-color: var(--run-line); }
.badge-done       { background: var(--ok-bg);   color: var(--ok);   border-color: var(--ok-line); }
.badge-error      { background: var(--err-bg);  color: var(--err);  border-color: var(--err-line); }

.fb-mark { font-size: 0.76rem; color: var(--text-3); }

/* 进度：细条 + 等宽百分比 */
.job-progress { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.progress-bar { flex: 1; height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; }
.progress-bar .progress-fill {
    height: 100%; border-radius: 2px;
    background: var(--run);
    transition: width 0.6s var(--ease);
}
.job-progress .pct { font-size: 0.72rem; color: var(--text-3); min-width: 34px; text-align: end; }

/* 空状态：说清楚怎么才有内容 */
.jobs-empty {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    text-align: center; color: var(--text-3);
    padding: 52px 24px;
    font-size: 0.86rem;
}
.jobs-empty .i { width: 26px; height: 26px; color: var(--line); stroke-width: 1.5; }
.jobs-empty b { color: var(--text-2); font-weight: 600; font-size: 0.92rem; }

/* 骨架屏：形状贴合最终列表，不用转圈 */
.skeleton-row { display: flex; align-items: center; gap: 16px; padding: 15px 24px; border-top: 1px solid var(--line-soft); }
.skeleton-row:first-child { border-top: none; }
.sk {
    background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%;
    animation: skShimmer 1.4s ease infinite;
    border-radius: 6px;
}
@keyframes skShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* ═══════════════════════════════════════════════════════
   反馈：spinner / toast
═══════════════════════════════════════════════════════ */

.spinner {
    width: 15px; height: 15px;
    border: 2px solid var(--line);
    border-top-color: var(--brand-deep);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    flex: none;
}
@keyframes spin { to { transform: rotate(360deg); } }

.toast-container {
    position: fixed; bottom: 22px; inset-inline-end: 22px; z-index: 9999;
    display: flex; flex-direction: column; gap: 8px;
    max-width: min(380px, calc(100vw - 44px));
}
.toast {
    display: flex; align-items: flex-start; gap: 9px;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    padding: 12px 16px;
    font-size: 0.85rem;
    box-shadow: var(--shadow-lg);
    animation: toastIn 0.28s var(--ease);
    transition: opacity 0.3s;
    text-align: start;
}
.toast .i { margin-top: 2px; }
.toast-success { border-color: var(--ok-line); }
.toast-success .i { color: var(--ok); }
.toast-error { border-color: var(--err-line); }
.toast-error .i { color: var(--err); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 右键"粘贴文件"菜单 */
.paste-menu {
    position: fixed; z-index: 9999;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r-ctl);
    padding: 4px;
    box-shadow: var(--shadow-lg);
}
.paste-menu button {
    display: flex; width: 100%;
    background: none; border: none;
    color: var(--text);
    padding: 8px 14px;
    font-size: 0.84rem;
    border-radius: 7px;
    font-family: inherit;
}
.paste-menu button:hover { background: var(--surface-2); }

/* ═══════════════════════════════════════════════════════
   杂项
═══════════════════════════════════════════════════════ */

.hidden { display: none !important; }
.note {
    display: flex; align-items: flex-start; gap: 9px;
    padding: 13px 16px;
    background: var(--brand-dim);
    border: 1px solid var(--brand-line);
    border-radius: var(--r-ctl);
    font-size: 0.85rem;
    color: var(--text-2);
    margin-bottom: 20px;
    text-align: start;
}
.note .i { color: var(--brand-deep); margin-top: 2px; }

.disclaimer {
    font-size: 0.76rem;
    color: var(--text-3);
    text-align: center;
    line-height: 1.7;
    margin-top: 28px;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cfd9ee; border-radius: 5px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #b9c7e4; }

@media (max-width: 900px) {
    /* 右侧一排（额度 + 升级 + 订阅 + 管理 + 语言 + 用户 + 退出）在窄屏
       放不下。之前只让 .top-bar 换行，但 .user-info 自己是不换行的 flex 行，
       于是整条撑出视口。让它也能换行，语言再长也只是多占一行。 */
    .top-bar .user-info { flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
}

@media (max-width: 720px) {
    .top-bar { padding-inline: 16px; height: auto; min-height: 56px; flex-wrap: wrap; padding-block: 10px; }
    .main { padding: 22px 16px 56px; }
    .panel-head, .panel-body { padding-inline: 18px; }
    .job-row { grid-template-columns: auto minmax(0, 1fr); padding-inline: 18px; }
    .job-actions { grid-column: 2; justify-content: flex-start; flex-wrap: wrap; }
}

/* 尊重系统的"减少动态效果" */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}