/* 毛玻璃生成器 · 玻璃橱窗（bfg-）· 浅色默认 / 深色整套覆盖 */
.bfg-page, .bfg-modal, .bfg-toast {
    --bfg-bg: #eef4f8; --bfg-panel: #ffffff; --bfg-panel2: #f5f9fb;
    --bfg-ink: #173543; --bfg-sub: #5c7482; --bfg-line: #dce7ed; --bfg-line2: #c4d7df;
    --bfg-teal: #0b6b7d; --bfg-teal-soft: #dff1f5; --bfg-coral: #d9604b; --bfg-coral-soft: #fdeae5;
    --bfg-ok: #1e7054; --bfg-warn: #9a5c14;
    --bfg-shadow: 0 14px 38px rgba(14, 68, 88, .12); --bfg-shadow-sm: 0 3px 12px rgba(14, 68, 88, .08);
    --bfg-radius: 16px;
    --bfg-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
    --bfg-font: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
}
.bfg-page { background: var(--bfg-bg); color: var(--bfg-ink); padding: 0 0 60px; min-height: 60vh; font-family: var(--bfg-font); font-size: 14px; line-height: 1.78; }
.bfg-wrap { max-width: 1180px; margin: 0 auto; padding: 18px 18px 0; }
.bfg-page .detail-breadcrumb { font-size: 12.5px; color: var(--bfg-sub); margin: 8px 0 20px; }
.bfg-page .detail-breadcrumb a { color: var(--bfg-sub); text-decoration: none; }
.bfg-page .detail-breadcrumb a:hover { color: var(--bfg-teal); }
.bfg-page .detail-breadcrumb .current { color: var(--bfg-teal); font-weight: 700; }

.bfg-hero { display: grid; grid-template-columns: 1.12fr .88fr; gap: 26px; align-items: center; margin-bottom: 22px; }
.bfg-kicker { font: 700 11px/1 var(--bfg-mono); letter-spacing: 2px; color: var(--bfg-teal); margin-bottom: 14px; }
.bfg-kicker i { display: inline-block; width: 42px; height: 1px; background: var(--bfg-coral); vertical-align: middle; margin: 0 10px; }
.bfg-page h1 { font-size: 38px; line-height: 1.18; font-weight: 800; letter-spacing: -.4px; margin: 0 0 14px; }
.bfg-sub { font-size: 15.5px; line-height: 1.9; color: var(--bfg-sub); margin: 0 0 20px; max-width: 600px; }
.bfg-sub b { color: var(--bfg-ink); font-weight: 700; box-shadow: inset 0 -6px 0 var(--bfg-teal-soft); }
.bfg-facts { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.bfg-fact { background: rgba(255,255,255,.82); border: 1px solid var(--bfg-line); border-left: 3px solid var(--bfg-teal); border-radius: 9px; padding: 9px 17px; min-width: 112px; box-shadow: var(--bfg-shadow-sm); }
.bfg-fact b { display: block; font: 800 21px/1.2 var(--bfg-mono); }
.bfg-fact span { font-size: 11.5px; color: var(--bfg-sub); }
.bfg-fact.hot { border-left-color: var(--bfg-coral); }
.bfg-fact.hot b { color: var(--bfg-coral); }
.bfg-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.bfg-chip { border: 1px solid var(--bfg-line2); background: var(--bfg-panel); color: var(--bfg-ink); border-radius: 999px; padding: 7px 15px; font-size: 12.5px; cursor: pointer; transition: .15s; font-family: inherit; }
.bfg-chip:hover { border-color: var(--bfg-teal); color: var(--bfg-teal); }
.bfg-chip.is-on { background: var(--bfg-teal); border-color: var(--bfg-teal); color: #fff; font-weight: 700; }
.bfg-hero-samples { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px; border-radius: var(--bfg-radius); background: linear-gradient(135deg, #2c7da0, #a9d6e5 48%, #f6b26b); box-shadow: var(--bfg-shadow); min-height: 216px; }
.bfg-sample { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; border-radius: 12px; padding: 12px; cursor: pointer; color: #fff; font-size: 12.5px; font-weight: 700; font-family: inherit; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(10px) saturate(150%); -webkit-backdrop-filter: blur(10px) saturate(150%); background: rgba(255,255,255,.16); transition: .18s; }
.bfg-sample:hover { transform: translateY(-3px); }
.bfg-sample.is-on { outline: 2px solid #fff; background: rgba(255,255,255,.28); }
.bfg-sample small { display: block; font-weight: 400; font-size: 10.5px; opacity: .9; margin-top: 4px; }

.bfg-panel { background: var(--bfg-panel); border: 1px solid var(--bfg-line); border-radius: var(--bfg-radius); padding: 18px; box-shadow: var(--bfg-shadow-sm); }
.bfg-panel-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.bfg-panel-head h2 { font-size: 17px; font-weight: 800; margin: 0; }
.bfg-step { font: 800 11px var(--bfg-mono); color: #fff; background: var(--bfg-teal); padding: 5px 7px; border-radius: 5px; }
.bfg-btn { border: 1px solid var(--bfg-line2); background: var(--bfg-panel2); color: var(--bfg-ink); border-radius: 8px; padding: 8px 14px; font-size: 13px; cursor: pointer; font-family: inherit; transition: .15s; }
.bfg-btn:hover { border-color: var(--bfg-teal); color: var(--bfg-teal); }
.bfg-btn-main { background: var(--bfg-teal); border-color: var(--bfg-teal); color: #fff; font-weight: 700; }
.bfg-btn-main:hover { background: #085463; color: #fff; }
.bfg-code-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }

.bfg-work { display: grid; grid-template-columns: 1.35fr .65fr; gap: 18px; margin-bottom: 18px; }
.bfg-canvas-wrap { min-width: 0; }
.bfg-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.bfg-bar-title { font: 700 11px var(--bfg-mono); letter-spacing: 1.2px; color: var(--bfg-sub); }
.bfg-bg-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.bfg-chip-ghost { margin-left: auto; background: var(--bfg-coral-soft); border-color: var(--bfg-coral); color: var(--bfg-coral); }
.bfg-canvas { position: relative; min-height: 360px; border-radius: var(--bfg-radius); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 26px; border: 1px solid var(--bfg-line); }
.bfg-canvas[data-bg="1"] { background: radial-gradient(circle at 18% 22%, #ff9a76 0, transparent 38%), radial-gradient(circle at 78% 20%, #4c9ac9 0, transparent 44%), radial-gradient(circle at 60% 88%, #8ed0b6 0, transparent 42%), linear-gradient(135deg, #245b7a, #7fb6c9); }
.bfg-canvas[data-bg="2"] { background: linear-gradient(90deg, #ef6f6c 0 25%, #f7c873 25% 50%, #4aa3a2 50% 75%, #2c4d7c 75%); }
.bfg-canvas[data-bg="3"] { background-color: #dce8ee; background-image: repeating-linear-gradient(45deg, #2c6a86 0 3px, transparent 3px 26px), repeating-linear-gradient(-45deg, #ef9a6a 0 2px, transparent 2px 30px); }
.bfg-canvas-deco { position: absolute; inset: 0; pointer-events: none; }
.bfg-canvas-deco i { position: absolute; border-radius: 50%; background: rgba(255,255,255,.55); }
.bfg-canvas-deco i:nth-child(1) { width: 90px; height: 90px; left: 8%; top: 12%; }
.bfg-canvas-deco i:nth-child(2) { width: 46px; height: 46px; right: 14%; top: 20%; background: rgba(255,213,128,.8); }
.bfg-canvas-deco i:nth-child(3) { width: 130px; height: 130px; right: 6%; bottom: 6%; background: rgba(255,255,255,.28); }
.bfg-glass { position: relative; width: min(390px, 100%); padding: 24px 24px 18px; border-radius: 18px; color: #12303c; background: rgba(255,255,255,.18); box-shadow: 0 14px 40px rgba(0,0,0,.18); z-index: 1; }
.bfg-glass-tag { font: 700 10px var(--bfg-mono); letter-spacing: 2px; opacity: .75; }
.bfg-glass h2 { font-size: 22px; margin: 8px 0 10px; font-weight: 800; }
.bfg-glass p { font-size: 13.5px; line-height: 1.85; margin: 0 0 18px; }
.bfg-glass-foot { display: flex; gap: 14px; border-top: 1px solid rgba(255,255,255,.35); padding-top: 10px; font: 11px var(--bfg-mono); }
.bfg-glass-foot b { font-size: 12px; }
.bfg-canvas-note { font-size: 12px; color: var(--bfg-sub); margin: 10px 0 0; }
.bfg-canvas-note input { width: min(520px, 100%); box-sizing: border-box; border: 1px solid var(--bfg-line2); background: var(--bfg-panel); color: var(--bfg-ink); border-radius: 6px; padding: 6px 9px; font-size: 12.5px; font-family: inherit; }

.bfg-controls { min-width: 0; }
.bfg-range { display: block; margin-bottom: 14px; }
.bfg-range > span { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--bfg-sub); margin-bottom: 5px; }
.bfg-range b { color: var(--bfg-teal); font: 700 12px var(--bfg-mono); }
.bfg-range input[type=range] { width: 100%; accent-color: var(--bfg-teal); cursor: pointer; }
.bfg-switches { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 6px 0 14px; font-size: 12.5px; }
.bfg-switches label { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.bfg-switches input { accent-color: var(--bfg-teal); }
.bfg-field { display: flex; flex-direction: column; gap: 5px; font-size: 12px; color: var(--bfg-sub); }
.bfg-field input { border: 1px solid var(--bfg-line2); background: var(--bfg-panel2); color: var(--bfg-ink); border-radius: 7px; padding: 8px 10px; font: 13px var(--bfg-mono); }
.bfg-err { margin: 10px 0 0; background: var(--bfg-coral-soft); color: var(--bfg-coral); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; }
.bfg-err[hidden] { display: none; }
.bfg-validate { margin-top: 12px; padding: 10px 12px; background: var(--bfg-teal-soft); border-radius: 8px; font-size: 12px; line-height: 1.8; color: var(--bfg-ink); }
.bfg-validate b { color: var(--bfg-teal); }

.bfg-code { margin-bottom: 18px; }
.bfg-code-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bfg-code-label { font: 700 11px var(--bfg-mono); letter-spacing: 1px; color: var(--bfg-sub); margin-bottom: 6px; }
.bfg-pre { margin: 0; background: #102a33; color: #d7eef3; border-radius: 9px; padding: 14px; font: 12px/1.8 var(--bfg-mono); white-space: pre-wrap; word-break: break-word; min-height: 160px; max-height: 260px; overflow: auto; }

.bfg-table-scroll { overflow-x: auto; }
.bfg-table { width: 100%; border-collapse: collapse; font-size: 12.5px; min-width: 640px; }
.bfg-table th, .bfg-table td { border-bottom: 1px solid var(--bfg-line); padding: 9px 10px; text-align: left; }
.bfg-table th { background: var(--bfg-panel2); color: var(--bfg-sub); }
.bfg-table td input { width: 100%; min-width: 70px; box-sizing: border-box; border: 1px solid var(--bfg-line2); background: var(--bfg-panel2); color: var(--bfg-ink); border-radius: 5px; padding: 4px 6px; font: 12px var(--bfg-mono); }
.bfg-table .bfg-del { border: 0; background: none; color: var(--bfg-coral); cursor: pointer; font-size: 16px; }
.bfg-empty { color: var(--bfg-sub); text-align: center; padding: 18px !important; }

.bfg-modal[hidden] { display: none !important; }
.bfg-modal { position: fixed; inset: 0; z-index: 9999; background: rgba(10,40,52,.6); display: flex; align-items: center; justify-content: center; padding: 20px; }
.bfg-modal-card { position: relative; background: var(--bfg-panel); color: var(--bfg-ink); border-radius: var(--bfg-radius); padding: 26px; width: min(520px, 100%); box-shadow: var(--bfg-shadow); }
.bfg-modal-card h2 { font-size: 19px; margin: 0 0 8px; }
.bfg-modal-card p { font-size: 13px; color: var(--bfg-sub); margin: 0 0 14px; }
.bfg-modal-card input { width: 100%; box-sizing: border-box; border: 1px solid var(--bfg-line2); border-radius: 7px; padding: 9px 10px; font: 12px var(--bfg-mono); background: var(--bfg-panel2); color: var(--bfg-ink); margin-bottom: 12px; }
.bfg-modal-x { position: absolute; right: 12px; top: 8px; border: 0; background: none; font-size: 24px; color: var(--bfg-sub); cursor: pointer; line-height: 1; }
.bfg-toast { position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(20px); background: var(--bfg-ink); color: #fff; padding: 10px 20px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; z-index: 10000; }
.bfg-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }

:root[data-theme="dark"] .bfg-page, :root[data-theme="dark"] .bfg-modal, :root[data-theme="dark"] .bfg-toast {
    --bfg-bg: #0e1620; --bfg-panel: #17222c; --bfg-panel2: #1e2b37; --bfg-ink: #e5f0f5;
    --bfg-sub: #95aebb; --bfg-line: #2b3d49; --bfg-line2: #3d5462;
    --bfg-teal: #6fd0e6; --bfg-teal-soft: #173a45; --bfg-coral: #ff9d86; --bfg-coral-soft: #3a2420;
    --bfg-ok: #74d0a6; --bfg-warn: #e8b46a; --bfg-shadow: 0 14px 38px rgba(0,0,0,.5); --bfg-shadow-sm: 0 3px 12px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .bfg-chip.is-on, :root[data-theme="dark"] .bfg-btn-main, :root[data-theme="dark"] .bfg-step { color: #0b1a20; }
:root[data-theme="dark"] .bfg-fact { background: rgba(23,34,44,.88); }
:root[data-theme="dark"] .bfg-pre { background: #08161c; color: #c6e6ee; }
:root[data-theme="dark"] .bfg-glass { color: #f0f8fb; }
:root[data-theme="dark"] .bfg-canvas[data-bg="3"] { background-color: #1b303c; }
:root[data-theme="dark"] .bfg-toast { background: var(--bfg-teal); color: #0b1a20; }

@media (max-width: 920px) { .bfg-hero, .bfg-work, .bfg-code-grid { grid-template-columns: 1fr; } .bfg-page h1 { font-size: 30px; } }
@media (max-width: 560px) {
    .bfg-wrap { padding: 12px 12px 0; } .bfg-page h1 { font-size: 26px; }
    .bfg-sub { font-size: 14px; line-height: 1.8; } .bfg-panel { padding: 14px; }
    .bfg-canvas { min-height: 300px; padding: 16px; } .bfg-code-btns { margin-left: 0; }
    .bfg-hero-samples { min-height: 170px; }
}