/* ============================================================
 * 家具能不能进门 · furniture-fit (#55)
 * UI 风格：3D 空间测量 / 建筑施工平面图
 * 冷白纸 + 淡蓝网格 + 钢尺蓝，tabular-nums 数字
 * ============================================================ */

.ff-page {
    --ff-blue: #1769aa;
    --ff-blue-dk: #11507f;
    --ff-green: #2e8b57;
    --ff-orange: #d18800;
    --ff-red: #c0392b;
    --ff-ink: #243447;
    --ff-mut: #66788a;
    --ff-line: #d5e0e8;
    --ff-card: #ffffff;
    --ff-bg: #eef3f6;
    --ff-chip: #e3edf5;
    font-family: -apple-system, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--ff-ink);
    background: var(--ff-bg);
    background-image:
        linear-gradient(#dde7ee 1px, transparent 1px),
        linear-gradient(90deg, #dde7ee 1px, transparent 1px);
    background-size: 24px 24px;
    background-position: -1px -1px;
    min-height: 100%;
    padding-bottom: 48px;
    font-variant-numeric: tabular-nums;
}

.ff-container {
    max-width: 1120px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- 页头 ---------- */
.ff-masthead {
    background: linear-gradient(135deg, #145a8d 0%, #1769aa 55%, #2a82bd 100%);
    color: #fff;
    padding: 26px 0 30px;
    border-bottom: 4px solid #0e3f63;
}

.ff-crumb { font-size: 13px; opacity: .9; margin-bottom: 16px; }
.ff-crumb a { color: #cfe4f5; }
.ff-crumb .sep { margin: 0 7px; opacity: .6; }
.ff-crumb .current { color: #fff; }

.ff-docno {
    font-family: Consolas, "SF Mono", monospace;
    font-size: 11px;
    letter-spacing: 3px;
    opacity: .7;
    margin-bottom: 6px;
}

.ff-title {
    font-size: 30px;
    font-weight: 800;
    margin: 0 0 14px;
    letter-spacing: 1px;
}
.ff-title small {
    display: block;
    font-size: 14px;
    font-weight: 400;
    opacity: .85;
    margin-top: 6px;
    letter-spacing: 2px;
}

.ff-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ff-badge {
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 4px;
    padding: 4px 11px;
    font-size: 12.5px;
}

/* ---------- 提示条 ---------- */
.ff-tipbar {
    background: #fff8e8;
    border: 1px solid #ecd9a8;
    border-left: 4px solid var(--ff-orange);
    border-radius: 4px;
    padding: 12px 16px;
    font-size: 13.5px;
    line-height: 1.75;
    color: #5c4a1f;
    margin: 22px 0;
}

/* ---------- 通用卡片 ---------- */
.ff-card,
.ff-report {
    background: var(--ff-card);
    border: 1px solid var(--ff-line);
    border-radius: 6px;
    padding: 20px 22px;
    box-shadow: 0 1px 3px rgba(20, 60, 100, .06);
}

.ff-grid {
    display: grid;
    grid-template-columns: 1fr 1.15fr;
    gap: 18px;
    align-items: start;
}

.ff-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--ff-line);
}
.ff-card-tag {
    font-family: Consolas, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    background: var(--ff-blue);
    border-radius: 3px;
    padding: 3px 8px;
    letter-spacing: 1px;
}
.ff-card-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

/* ---------- 表单 ---------- */
.ff-field { margin-bottom: 14px; }
.ff-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #3d5166;
    margin-bottom: 6px;
}
.ff-label-sm { font-size: 12px !important; color: var(--ff-mut) !important; }
.ff-req { color: var(--ff-red); }

.ff-input {
    width: 100%;
    border: 1px solid #b9c9d6;
    border-radius: 4px;
    padding: 8px 10px;
    font-size: 14px;
    font-family: Consolas, "SF Mono", monospace;
    color: var(--ff-ink);
    background: #fbfdff;
    transition: border-color .15s, box-shadow .15s;
}
.ff-input:focus {
    outline: none;
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 3px rgba(23, 105, 170, .15);
}
.ff-input:disabled {
    background: #f0f3f6;
    color: #9fb0bf;
    cursor: not-allowed;
}

.ff-unit-input { position: relative; }
.ff-unit-input .ff-input { padding-right: 42px; }
.ff-unit {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: var(--ff-mut);
    font-family: Consolas, monospace;
    pointer-events: none;
}

.ff-hint {
    margin: 5px 0 0;
    font-size: 12px;
    color: var(--ff-mut);
    line-height: 1.6;
}

.ff-dim3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}
.ff-dim2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* 类型行 */
.ff-type-row { display: flex; gap: 8px; }
.ff-type-row select { flex: 1; }
.ff-btn-mini {
    white-space: nowrap;
    border: 1px solid var(--ff-blue);
    color: var(--ff-blue);
    background: #fff;
    border-radius: 4px;
    padding: 0 12px;
    font-size: 12.5px;
    cursor: pointer;
    transition: background .15s;
}
.ff-btn-mini:hover { background: var(--ff-chip); }

/* 勾选 */
.ff-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13.5px;
    margin: 12px 0;
    cursor: pointer;
    user-select: none;
}
.ff-check--strong { font-weight: 600; }
.ff-check input { width: 16px; height: 16px; accent-color: var(--ff-blue); }

.ff-subbox {
    background: #f5f9fc;
    border: 1px dashed #b4cddd;
    border-radius: 5px;
    padding: 12px 14px 2px;
    margin-top: 4px;
}
.ff-subbox-title {
    font-size: 12.5px;
    color: var(--ff-mut);
    margin: 0 0 10px;
}

.ff-group {
    border-left: 3px solid var(--ff-blue);
    background: #f7fafd;
    padding: 12px 12px 2px;
    border-radius: 0 4px 4px 0;
    margin: 4px 0 14px;
}
.ff-group--sm { padding: 10px 10px 0; }
.ff-group--off { opacity: .45; border-left-color: #a9b8c5; background: #f2f5f8; }
.ff-group-title {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 10px;
    color: #33506b;
}

/* ---------- 房间卡 ---------- */
.ff-place-card { margin-top: 18px; }
.ff-place-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
}

/* ---------- 判定报告 ---------- */
.ff-report { margin-top: 18px; }
.ff-report-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}
.ff-report-tag {
    font-family: Consolas, monospace;
    font-size: 11px;
    letter-spacing: 1px;
    background: #0e3f63;
    color: #fff;
    padding: 3px 8px;
    border-radius: 3px;
}
.ff-report-head h2 { margin: 0; font-size: 17px; }

.ff-verdict {
    display: flex;
    align-items: center;
    gap: 18px;
    border-radius: 6px;
    padding: 18px 20px;
    border: 1px solid var(--ff-line);
}
.ff-verdict-icon { font-size: 40px; line-height: 1; }
.ff-verdict-main h2 { margin: 0 0 6px; font-size: 21px; }
.ff-verdict-main p { margin: 0; font-size: 13.5px; color: var(--ff-mut); }

.ff-verdict--idle { background: #f6f9fb; color: var(--ff-mut); }
.ff-verdict--straight { background: #eef8f2; border-color: #bfe0cc; }
.ff-verdict--straight h2 { color: var(--ff-green); }
.ff-verdict--pose { background: #eaf3fb; border-color: #b8d6ee; }
.ff-verdict--pose h2 { color: var(--ff-blue); }
.ff-verdict--disassemble { background: #f0f2fb; border-color: #c6cdee; }
.ff-verdict--disassemble h2 { color: #3951a0; }
.ff-verdict--hoist { background: #fdf5e7; border-color: #ecd9ad; }
.ff-verdict--hoist h2 { color: #b5720a; }
.ff-verdict--return { background: #fcecea; border-color: #efc4bf; }
.ff-verdict--return h2 { color: var(--ff-red); }

.ff-warnings {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.ff-warnings li {
    font-size: 13px;
    color: #8a5a10;
    background: #fff7e6;
    border: 1px solid #efdfb4;
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 6px;
}

/* ---------- 关卡卡 ---------- */
.ff-section { margin-top: 30px; }
.ff-section-head { margin-bottom: 14px; }
.ff-section-head h2 {
    margin: 0 0 4px;
    font-size: 19px;
    font-weight: 700;
}
.ff-section-head p { margin: 0; font-size: 13px; color: var(--ff-mut); }

.ff-levels {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.ff-level {
    position: relative;
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ff-line);
    border-radius: 6px;
    padding: 14px 16px 14px 14px;
    overflow: hidden;
}
.ff-level::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    background: #b6c4d0;
}
.ff-level--pass::before { background: var(--ff-green); }
.ff-level--fail::before { background: var(--ff-red); }
.ff-level--warn::before { background: var(--ff-orange); }

.ff-level-no {
    position: absolute;
    top: 8px; right: 12px;
    font-family: Consolas, monospace;
    font-size: 10.5px;
    letter-spacing: 1px;
    color: #9fb0bf;
}
.ff-level-icon {
    flex: 0 0 34px;
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    font-weight: 700;
    font-size: 16px;
    margin-top: 2px;
}
.ff-level--pass .ff-level-icon { background: #e4f3ea; color: var(--ff-green); }
.ff-level--fail .ff-level-icon { background: #fbe9e7; color: var(--ff-red); }
.ff-level--warn .ff-level-icon { background: #fdf2dd; color: var(--ff-orange); }
.ff-level--skip .ff-level-icon { background: #eef2f6; color: #90a0b0; }

.ff-level-body { flex: 1; min-width: 0; }
.ff-level-body h3 {
    margin: 2px 0 6px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ff-level-status {
    font-size: 11px;
    font-weight: 600;
    border-radius: 3px;
    padding: 2px 7px;
}
.ff-level-status--pass { background: #e4f3ea; color: var(--ff-green); }
.ff-level-status--fail { background: #fbe9e7; color: var(--ff-red); }
.ff-level-status--warn { background: #fdf2dd; color: #a86b08; }
.ff-level-status--skip { background: #eef2f6; color: #90a0b0; }

.ff-level-body p {
    margin: 0 0 5px;
    font-size: 12.8px;
    line-height: 1.65;
    color: #45586b;
}
.ff-level-suggest { color: #8a5a10 !important; }

/* ---------- 方案 ---------- */
.ff-plans {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.ff-plan {
    display: flex;
    gap: 12px;
    background: #fff;
    border: 1px solid var(--ff-line);
    border-radius: 6px;
    padding: 14px 16px;
}
.ff-plan-rank {
    flex: 0 0 auto;
    background: var(--ff-blue);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
    padding: 5px 9px;
    height: fit-content;
}
.ff-plan-body h3 {
    margin: 2px 0 6px;
    font-size: 14.5px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ff-plan-cost {
    font-family: Consolas, monospace;
    font-size: 11.5px;
    background: var(--ff-chip);
    color: var(--ff-blue-dk);
    border-radius: 3px;
    padding: 2px 7px;
}
.ff-plan-body p {
    margin: 0;
    font-size: 12.8px;
    line-height: 1.7;
    color: #45586b;
}

/* ---------- SVG ---------- */
.ff-svg-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 14px;
}
.ff-svg-card {
    background: #fff;
    border: 1px solid var(--ff-line);
    border-radius: 6px;
    padding: 14px 16px 8px;
}
.ff-svg-card h3 {
    margin: 0 0 8px;
    font-family: Consolas, monospace;
    font-size: 12px;
    letter-spacing: 1.5px;
    color: var(--ff-mut);
}
.ff-svg-card svg { width: 100%; height: auto; display: block; }

.ff-svg-room {
    fill: #f4f8fb;
    stroke: #1769aa;
    stroke-width: 2;
}
.ff-svg-dim { stroke: #1769aa; stroke-width: 1; }
.ff-svg-txt {
    font-family: Consolas, monospace;
    font-size: 11px;
    fill: #1769aa;
}
.ff-svg-fdim { fill: #3d5166; }
.ff-svg-empty {
    font-family: Consolas, monospace;
    font-size: 12px;
    fill: #95a5b3;
}

/* ---------- FAQ ---------- */
.ff-faqs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ff-faq {
    background: #fff;
    border: 1px solid var(--ff-line);
    border-radius: 5px;
    padding: 0 14px;
}
.ff-faq summary {
    cursor: pointer;
    font-size: 13.8px;
    font-weight: 600;
    padding: 12px 0;
    list-style: none;
    color: #33506b;
}
.ff-faq summary::-webkit-details-marker { display: none; }
.ff-faq summary::before {
    content: '▸';
    color: var(--ff-blue);
    margin-right: 8px;
    font-size: 12px;
}
.ff-faq[open] summary::before { content: '▾'; }
.ff-faq p {
    margin: 0;
    padding: 0 0 13px 20px;
    font-size: 13px;
    line-height: 1.75;
    color: #4a5d70;
}

/* ---------- 按钮 ---------- */
.ff-actions {
    display: flex;
    gap: 10px;
    margin-top: 32px;
    flex-wrap: wrap;
}
.ff-btn {
    border-radius: 5px;
    padding: 10px 20px;
    font-size: 14px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all .15s;
}
.ff-btn-primary { background: var(--ff-blue); color: #fff; }
.ff-btn-primary:hover { background: var(--ff-blue-dk); }
.ff-btn-outline { background: #fff; border-color: var(--ff-blue); color: var(--ff-blue); }
.ff-btn-outline:hover { background: var(--ff-chip); }
.ff-btn-ghost { background: transparent; border-color: #b9c9d6; color: var(--ff-mut); }
.ff-btn-ghost:hover { background: #e9eff4; }

/* ---------- 相关工具 ---------- */
.ff-rel-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.ff-rel-item {
    background: #fff;
    border: 1px solid var(--ff-line);
    border-radius: 5px;
    padding: 9px 15px;
    font-size: 13.5px;
    color: #33506b;
    transition: border-color .15s, color .15s;
}
.ff-rel-item:hover { border-color: var(--ff-blue); color: var(--ff-blue); }

/* ============================================================
 * 深色模式
 * ============================================================ */
[data-theme="dark"] .ff-page {
    --ff-blue: #4d9de0;
    --ff-blue-dk: #6db4ef;
    --ff-green: #4cb07b;
    --ff-orange: #e0a53d;
    --ff-red: #e06a5c;
    --ff-ink: #d5e0ea;
    --ff-mut: #8ea2b5;
    --ff-line: #2b3a49;
    --ff-card: #1d2733;
    --ff-bg: #141c24;
    --ff-chip: #22354a;
    background-color: var(--ff-bg);
    background-image:
        linear-gradient(#1d2a37 1px, transparent 1px),
        linear-gradient(90deg, #1d2a37 1px, transparent 1px);
}

[data-theme="dark"] .ff-masthead {
    background: linear-gradient(135deg, #0f3c5f, #15507e);
    border-bottom-color: #0a2c47;
}

[data-theme="dark"] .ff-tipbar {
    background: #2e2818;
    border-color: #5c4d22;
    border-left-color: var(--ff-orange);
    color: #d9c79a;
}

[data-theme="dark"] .ff-input {
    background: #18222e;
    border-color: #38495a;
    color: var(--ff-ink);
}
[data-theme="dark"] .ff-input:focus {
    border-color: var(--ff-blue);
    box-shadow: 0 0 0 3px rgba(77, 157, 224, .2);
}
[data-theme="dark"] .ff-input:disabled { background: #161f29; color: #5b6c7d; }

[data-theme="dark"] .ff-btn-mini { background: transparent; }
[data-theme="dark"] .ff-btn-mini:hover { background: var(--ff-chip); }

[data-theme="dark"] .ff-subbox { background: #18242f; border-color: #33506b; }
[data-theme="dark"] .ff-group { background: #18242f; }
[data-theme="dark"] .ff-group--off { background: #161e28; }

[data-theme="dark"] .ff-verdict--idle { background: #1a242e; }
[data-theme="dark"] .ff-verdict--straight { background: #152820; border-color: #2c4f3b; }
[data-theme="dark"] .ff-verdict--pose { background: #142536; border-color: #2a4660; }
[data-theme="dark"] .ff-verdict--disassemble { background: #1a1f33; border-color: #35406b; }
[data-theme="dark"] .ff-verdict--hoist { background: #2b2313; border-color: #57471f; }
[data-theme="dark"] .ff-verdict--return { background: #2e1916; border-color: #5e2d27; }

[data-theme="dark"] .ff-warnings li {
    background: #292212;
    border-color: #4d3f1e;
    color: #d9b97a;
}

[data-theme="dark"] .ff-level,
[data-theme="dark"] .ff-plan,
[data-theme="dark"] .ff-svg-card,
[data-theme="dark"] .ff-faq,
[data-theme="dark"] .ff-rel-item {
    background: var(--ff-card);
    border-color: var(--ff-line);
}

[data-theme="dark"] .ff-level--pass .ff-level-icon { background: #1c3528; }
[data-theme="dark"] .ff-level--fail .ff-level-icon { background: #3a1f1b; }
[data-theme="dark"] .ff-level--warn .ff-level-icon { background: #382c14; }
[data-theme="dark"] .ff-level--skip .ff-level-icon { background: #222e3a; }

[data-theme="dark"] .ff-level-status--pass { background: #1c3528; }
[data-theme="dark"] .ff-level-status--fail { background: #3a1f1b; }
[data-theme="dark"] .ff-level-status--warn { background: #382c14; }
[data-theme="dark"] .ff-level-status--skip { background: #222e3a; }

[data-theme="dark"] .ff-plan-rank { background: var(--ff-blue); }
[data-theme="dark"] .ff-plan-cost { background: var(--ff-chip); color: #9dcef0; }

[data-theme="dark"] .ff-svg-room { fill: #18242f; stroke: var(--ff-blue); }
[data-theme="dark"] .ff-svg-dim { stroke: var(--ff-blue); }
[data-theme="dark"] .ff-svg-txt { fill: var(--ff-blue); }
[data-theme="dark"] .ff-svg-fdim { fill: var(--ff-ink); }

[data-theme="dark"] .ff-btn-outline:hover,
[data-theme="dark"] .ff-btn-ghost:hover { background: var(--ff-chip); }

/* ============================================================
 * 响应式
 * ============================================================ */
@media (max-width: 920px) {
    .ff-grid,
    .ff-levels,
    .ff-plans,
    .ff-svg-grid,
    .ff-faqs { grid-template-columns: 1fr; }

    .ff-place-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .ff-container { padding: 0 14px; }
    .ff-title { font-size: 24px; }
    .ff-card, .ff-report { padding: 16px; }
    .ff-dim3 { grid-template-columns: 1fr 1fr 1fr; gap: 7px; }
    .ff-place-grid { grid-template-columns: 1fr; }
    .ff-verdict { flex-direction: column; align-items: flex-start; gap: 10px; }
    .ff-verdict-icon { font-size: 32px; }
    .ff-verdict-main h2 { font-size: 18px; }
    .ff-level-no { display: none; }
    .ff-actions .ff-btn { flex: 1; }
}

/* ============================================================
 * 打印
 * ============================================================ */
@media print {
    .ff-page {
        background: #fff;
        background-image: none;
        color: #000;
        padding-bottom: 0;
    }
    .ff-masthead {
        background: #fff;
        color: #000;
        border-bottom: 2px solid #000;
        padding: 0 0 12px;
    }
    .ff-docno, .ff-badges, .ff-crumb { display: none; }
    .ff-title, .ff-title small { color: #000; }

    .ff-tipbar,
    .ff-card, .ff-report,
    .ff-level, .ff-plan,
    .ff-svg-card, .ff-faq, .ff-rel-item {
        background: #fff !important;
        border-color: #999 !important;
        box-shadow: none;
        color: #000;
    }
    .ff-level::before { background: #000 !important; }
    .ff-grid { grid-template-columns: 1fr 1fr; }
    .ff-levels, .ff-plans { grid-template-columns: 1fr 1fr; }
    .ff-svg-grid { grid-template-columns: 1fr 1fr; }
    .ff-faq:not([open]) p { display: block; }
    .ff-faq { page-break-inside: avoid; }

    .ff-svg-room { fill: #fff; stroke: #000; }
    .ff-svg-dim, .ff-svg-txt { stroke: #000; fill: #000; }

    .ff-actions,
    .ff-mini-tabs-holder,
    .ff-related,
    .back-to-top { display: none !important; }
}