/* ======================================================================
 * 59 · AI 扩图在线 —— 「工作台 · 石墨橙」
 * 视觉：石墨深灰工作台 + 主题橙工具条；左上传右参数、画布舞台；
 *       与本批其余 10 页不共用配色与构图。
 * ====================================================================== */

.nx.ao {
    --bg: #f1f2f4;
    --bg2: #e6e8eb;
    --card: #ffffff;
    --card2: #f4f5f7;
    --card3: #eaecf0;
    --ink: #1c2024;
    --ink2: #454c53;
    --muted: #7e868e;
    --line: #d8dbdf;
    --line2: #e6e8ec;
    --accent: #e56b12;          /* 工作台橙 */
    --accent-ink: #fff8f2;
    --accent-soft: #fbe4d0;
    --accent2: #46586b;         /* 石墨蓝灰 */
    --accent2-soft: #e0e6ec;
    --ok: #2c7a4b;
    --ok-bg: #e1f2e7;
    --warn: #8f6400;
    --warn-bg: #f8efd4;
    --bad: #a83a32;
    --bad-bg: #f9e5e1;
    --info: #1a6e84;
    --info-bg: #e0f0f4;
    --radius: 14px;
    --radius-sm: 10px;
    --head-weight: 790;
    --tracking: -.006em;

    background: var(--bg);
}
:root[data-theme="dark"] .nx.ao {
    --bg: #111417;
    --bg2: #171b1f;
    --card: #1c2126;
    --card2: #22282e;
    --card3: #2b323a;
    --ink: #edeff2;
    --ink2: #c4cad1;
    --muted: #8b939b;
    --line: #343c44;
    --line2: #293038;
    --accent: #f5883b;
    --accent-ink: #1e0e02;
    --accent-soft: #3d2410;
    --accent2: #8ba3b8;
    --accent2-soft: #1f2b36;
    --ok: #6cbb89;
    --ok-bg: #1c3526;
    --warn: #d5af5b;
    --warn-bg: #352b13;
    --bad: #e0827a;
    --bad-bg: #3c201c;
    --info: #5fb7d0;
    --info-bg: #143038;
}

/* ---------- 首屏 ---------- */
.ao-hero { margin: 22px 0 14px; }
.ao-kicker {
    font: 700 11px var(--font-mono);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--accent);
    margin: 0 0 8px;
}
.ao-hero h1 { font-size: clamp(30px, 3.8vw, 44px); margin-bottom: 12px; }
.ao-lede { font-size: 14.8px; line-height: 1.95; color: var(--ink2); margin: 0; max-width: 62em; }
.ao-lede b { color: var(--accent); border-bottom: 2px solid var(--accent-soft); }

/* ---------- 工作台 ---------- */
.ao-studio {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, .95fr);
    gap: 16px;
    align-items: start;
}
.ao-left { display: flex; flex-direction: column; gap: 12px; }

.ao-drop {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    background: var(--card);
    cursor: pointer;
    transition: border-color .15s, background .15s;
    min-height: 190px;
    display: flex;
}
.ao-drop:hover, .ao-drop:focus-visible { border-color: var(--accent); }
.ao-drop.is-over { border-color: var(--accent); background: var(--accent-soft); }
.ao-drop.is-loaded { min-height: 0; border-style: solid; }
.ao-drop-inner {
    margin: auto;
    text-align: center;
    padding: 30px 20px;
}
.ao-drop-ic { display: block; font-size: 40px; margin-bottom: 8px; }
.ao-drop-inner b { display: block; font-size: 16px; }
.ao-drop-inner small { display: block; font-size: 12px; color: var(--muted); margin-top: 5px; }

.ao-file-info { font: 600 12.5px var(--font-mono); color: var(--muted); min-height: 18px; }
.ao-thumb-wrap { display: none; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card2); padding: 8px; }
.ao-thumb-wrap.is-on { display: block; }
.ao-thumb-wrap img { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 6px; }

.ao-right { display: flex; flex-direction: column; gap: 12px; }
.ao-panel {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 15px 17px;
}
.ao-panel-hd { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.ao-panel-hd b { font-size: 14.5px; color: var(--ink); }
.ao-panel-hd span { font-size: 12px; color: var(--muted); }
.ao-seg button { padding: 8px 13px; }

.ao-custom { display: none; margin-top: 10px; align-items: center; gap: 8px; }
.ao-custom.is-on { display: flex; }
.ao-custom .nx-input { max-width: 110px; text-align: center; }

.ao-export-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ao-quality { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink2); flex: 1; min-width: 180px; }
.ao-quality b { color: var(--accent); font-family: var(--font-mono); }
.ao-quality input { flex: 1; accent-color: var(--accent); }

.ao-acts { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- 画布舞台 ---------- */
.ao-stage { display: none; margin-top: 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.ao-stage.is-on { display: block; }
.ao-stage-hd { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.ao-stage-hd b { font-size: 15.5px; color: var(--ink); }
.ao-stage-hd span { font: 600 12.5px var(--font-mono); color: var(--muted); }
.ao-canvas-wrap {
    background:
        repeating-conic-gradient(var(--card3) 0% 25%, var(--card2) 0% 50%) 0 0 / 24px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 10px;
    overflow: auto;
    text-align: center;
}
.ao-canvas-wrap canvas { max-width: 100%; height: auto; border-radius: 6px; box-shadow: var(--shadow-xs); }

/* ---------- AI 建议 ---------- */
.ao-ai-card {
    background: var(--card);
    border: 1px solid var(--line);
    border-left: 5px solid var(--accent);
    border-radius: var(--radius);
    padding: 18px 20px;
}
.ao-ai-hd { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.ao-ai-hd b { font-size: 16px; color: var(--ink); }
.ao-ai-hd span { font-size: 12.5px; color: var(--muted); }
.ao-ai-acts { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ao-ai-note { font-size: 12px; color: var(--muted); }
.ao-ai-out {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.9;
    color: var(--ink2);
    background: var(--card2);
    border: 1px solid var(--line2);
    border-radius: var(--radius-sm);
    padding: 14px 16px;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------- 响应式 ---------- */
@media (max-width: 880px) {
    .ao-studio { grid-template-columns: minmax(0, 1fr); }
    .ao-hero h1 { font-size: clamp(26px, 6vw, 34px); }
}