/* 优鲜报价 — 设计稿样式 */

:root {
    --bg: #f7f7f8;
    --panel: #ffffff;
    --ink: #0f1115;
    --ink-2: #2a2f3a;
    --muted: #6b7280;
    --line: #e6e7eb;
    --line-2: #eef0f3;
    --accent: oklch(0.52 0.14 250);
    --accent-soft: oklch(0.95 0.03 250);
    --accent-ink: oklch(0.32 0.12 250);
    --warn: oklch(0.92 0.08 80);
    --warn-ink: oklch(0.42 0.12 60);
    --good: oklch(0.94 0.07 160);
    --good-ink: oklch(0.38 0.10 160);
    --tag-fan: oklch(0.94 0.06 80);
    --tag-fan-ink: oklch(0.38 0.10 60);
    --bad: oklch(0.92 0.08 30);
    --bad-ink: oklch(0.42 0.13 25);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: "Inter", "Noto Sans SC", -apple-system, system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}
.mono, code { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
code { background: var(--line-2); padding: 0.1em 0.4em; border-radius: 3px; font-size: 0.9em; }

/* ─── Top bar ───────────────────────────────────────── */
header {
    height: 56px;
    background: var(--panel);
    border-bottom: 1px solid var(--line);
    display: flex; align-items: center;
    padding: 0 28px;
    gap: 32px;
    position: sticky; top: 0; z-index: 10;
}
header .logo {
    font-weight: 700;
    color: var(--accent);
    font-size: 15px;
    letter-spacing: 0.2px;
    display: flex; align-items: center; gap: 8px;
    text-decoration: none;
}
header .logo::before {
    content: "优";
    width: 22px; height: 22px; border-radius: 6px;
    background: var(--accent);
    display: grid; place-items: center;
    color: #fff; font-size: 11px; font-weight: 700;
}
header nav { display: flex; gap: 6px; }
header nav a {
    color: var(--ink-2);
    text-decoration: none;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 14px; font-weight: 500;
    cursor: pointer;
    transition: background .15s;
}
header nav a:hover { background: var(--line-2); }
header nav a.active { color: var(--accent); background: var(--accent-soft); }

/* ─── Layout ────────────────────────────────────────── */
main {
    max-width: 1180px;
    margin: 0 auto;
    padding: 28px 28px 80px;
}
h1 { font-size: 24px; font-weight: 700; margin: 0 0 4px; letter-spacing: -0.2px; }
h2 { font-size: 16px; font-weight: 600; margin: 28px 0 10px; padding: 0; border: none; }
h3 { font-size: 14px; font-weight: 600; margin: 14px 0 8px; color: var(--ink-2); }
p  { margin: 6px 0; }
.dim, .sub { color: var(--muted); font-size: 13px; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.row-between {
    display: flex; align-items: center; justify-content: space-between;
    gap: 16px; flex-wrap: wrap;
    margin-bottom: 12px;
}

/* ─── Cards ─────────────────────────────────────────── */
.hero, section, .card {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 22px;
    margin-bottom: 18px;
}
.hero { background: linear-gradient(180deg, var(--accent-soft), var(--panel) 60%); }

/* ─── Buttons ───────────────────────────────────────── */
button, .btn-primary, .btn-text {
    appearance: none;
    border: 1px solid var(--line);
    background: var(--panel);
    color: var(--ink);
    height: 34px;
    padding: 0 14px;
    border-radius: 8px;
    font-size: 13px; font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
    transition: background .15s, border-color .15s;
}
button:hover { background: var(--line-2); }

.btn-primary {
    background: var(--accent); border-color: var(--accent); color: #fff;
}
.btn-primary:hover {
    background: oklch(0.46 0.14 250); border-color: oklch(0.46 0.14 250);
    color: #fff; text-decoration: none;
}
button.btn-primary { color: #fff; }

.btn-text {
    border-color: transparent; background: transparent; color: var(--accent);
    padding: 0 8px;
}
.btn-text:hover { background: var(--line-2); text-decoration: none; }

/* ─── Tags / chips ──────────────────────────────────── */
.tag {
    display: inline-flex; align-items: center;
    padding: 2px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 500;
    background: var(--line-2); color: var(--ink-2);
}
.tag-active { background: var(--accent-soft); color: var(--accent-ink); }
.tag-done   { background: var(--good); color: var(--good-ink); }
.tag-panyu  { background: var(--tag-fan); color: var(--tag-fan-ink); font-family: "JetBrains Mono", monospace; }
.tag-baiyun { background: oklch(0.94 0.04 220); color: oklch(0.38 0.08 230); font-family: "JetBrains Mono", monospace; }

/* ─── Tables ────────────────────────────────────────── */
table.data-table {
    width: 100%; border-collapse: collapse;
    background: var(--panel);
    font-size: 13px;
}
table.data-table thead th {
    text-align: left; padding: 10px 14px;
    color: var(--muted); font-weight: 500; font-size: 12px;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
}
table.data-table td {
    padding: 14px; border-bottom: 1px solid var(--line-2);
    vertical-align: middle;
}
table.data-table tr:last-child td { border-bottom: none; }
table.data-table tr:hover td { background: oklch(0.985 0 0); }

/* 让纯表格段落贴到容器里 */
section > table.data-table {
    margin: -22px;
    width: calc(100% + 44px);
    border-radius: 0;
}

/* ─── Form ──────────────────────────────────────────── */
fieldset {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 8px 18px 14px;
    margin: 0 0 16px;
}
legend {
    padding: 0 8px;
    font-size: 13px; font-weight: 600;
    color: var(--ink);
}

.upload-form label {
    display: grid;
    grid-template-columns: 140px minmax(260px, 420px) 1fr;
    gap: 14px;
    align-items: center;
    padding: 10px 0;
}
.upload-form label + label { border-top: 1px dashed var(--line-2); }
.upload-form label > span:first-child {
    font-size: 13px; color: var(--ink-2); font-weight: 500;
}
.upload-form input[type="text"],
.filter-input,
input.input {
    width: 100%; height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 0 12px;
    font-size: 13px;
    font-family: inherit;
    background: var(--panel);
    color: var(--ink);
}
.upload-form input[type="text"]:focus,
.filter-input:focus,
input.input:focus {
    outline: 2px solid var(--accent-soft);
    border-color: var(--accent);
}
/* 文件 input：虚线 picker 样式 */
.upload-form input[type="file"] {
    width: 100%;
    border: 1px dashed var(--line);
    border-radius: 8px;
    padding: 8px 12px;
    background: var(--bg);
    color: var(--muted);
    font-size: 12.5px;
    font-family: inherit;
    cursor: pointer;
    transition: border-color .15s, background .15s;
}
.upload-form input[type="file"]:hover {
    border-color: var(--accent);
    background: var(--panel);
}
.upload-form input[type="file"]::file-selector-button {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 4px 10px;
    margin-right: 12px;
    font-size: 12px; font-weight: 500;
    color: var(--ink-2);
    cursor: pointer;
    font-family: inherit;
}
.upload-form input[type="file"]::file-selector-button:hover {
    border-color: var(--accent); color: var(--accent);
}
.upload-form input[type="text"] {
    /* 文本框单独占第 2 列即可 */
    grid-column: 2 / 3;
}
.upload-form small {
    grid-column: 3;
    font-size: 11.5px; color: var(--muted);
    justify-self: start;
}
.upload-form .actions {
    display: flex; gap: 10px; align-items: center;
    margin-top: 18px;
}

.inline-form {
    display: inline-flex; gap: 8px; align-items: center;
}
.inline-form input[type="file"] {
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 5px 10px;
    background: var(--panel);
    font-size: 13px;
}

/* ─── Job banner（任务进度） ────────────────────────── */
.job-banner {
    background: var(--warn);
    color: var(--warn-ink);
    border: 1px solid oklch(0.85 0.10 80);
    padding: 12px 16px;
    border-radius: 10px;
    margin: 0 0 18px;
    display: flex; gap: 12px; align-items: center;
    font-size: 13px;
}
.job-banner.done {
    background: var(--good); color: var(--good-ink);
    border-color: oklch(0.85 0.08 160);
}
.job-banner.failed {
    background: var(--bad); color: var(--bad-ink);
    border-color: oklch(0.85 0.10 30);
}
.job-banner .job-elapsed { margin-left: auto; }

/* ─── Lists ─────────────────────────────────────────── */
.snapshots, .files {
    list-style: none; padding: 0; margin: 6px 0;
}
.snapshots li, .files li {
    display: flex; gap: 12px; align-items: center;
    padding: 10px 0;
    border-top: 1px dashed var(--line-2);
    font-size: 13px;
}
.snapshots li:first-child, .files li:first-child { border-top: none; }
.snapshots li code, .files li code { color: var(--muted); }

/* ─── Section title with number badge ───────────────── */
section > h2 {
    display: flex; align-items: baseline; gap: 10px;
    font-size: 15px; font-weight: 600;
    margin: 0 0 12px;
}

/* ─── Misc ──────────────────────────────────────────── */
.filter-input { margin-bottom: 12px; }

.empty { color: var(--muted); padding: 24px 0; text-align: center; }