/* 6.5 「捞捞学习」「捞捞编程」两个板块页（learn/、code/）共用：页头、页脚、按钮沿用 studio-v2.css / home-v6.css */
.bd-main { max-width: 1180px; margin: 0 auto; padding: 0 var(--gut, 16px) 72px; }
.bd-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; padding: 56px 0 40px; }
.bd-hero h1 { margin: 10px 0 14px; font-size: clamp(34px, 5vw, 56px); line-height: 1.12; letter-spacing: -1.5px; }
.bd-hero h1 span { color: var(--bd-accent, #e0683a); }
.bd-hero p.lead { margin: 0 0 24px; font-size: 16px; line-height: 1.8; color: var(--muted, #5d6b70); max-width: 34em; }
.bd-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.bd-acts small { color: #8a9a9c; font-size: 12px; }
.bd-who { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-size: 13px; color: var(--muted, #5d6b70); }
.bd-who b { color: var(--ink, #14252b); }
.bd-who .dot { width: 8px; height: 8px; border-radius: 50%; background: #c4ccd0; }
.bd-who.on .dot { background: #3aa776; }
.bd-who a { color: var(--blue, #4b5ee8); font-weight: 700; text-decoration: none; }

.bd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.bd-grid.lr { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.bd-grid.lr .bd-card.big { grid-column: auto; grid-row: span 2; }
.bd-card { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 26px; border-radius: 22px; border: 1px solid var(--edge, #e6e2da); background: #fff; color: inherit; text-decoration: none; transition: transform .2s, box-shadow .2s, border-color .2s; }
a.bd-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -24px rgba(20, 37, 43, .35); border-color: #d6cfc3; }
.bd-card.big { grid-column: span 2; }
.bd-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; font-size: 22px; background: #ffe9d2; color: #e0683a; }
.bd-card h3 { margin: 0; font-size: 21px; letter-spacing: -.4px; }
.bd-card p { margin: 0; font-size: 14px; line-height: 1.75; color: var(--muted, #5d6b70); }
.bd-card .go { margin-top: auto; padding-top: 6px; font-size: 13px; font-weight: 700; color: var(--ink, #14252b); }
.bd-card .tag { position: absolute; top: 22px; right: 22px; font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 99px; background: #dff3e8; color: #1f8a5b; }
.bd-card .tag.soon { background: #eef0f2; color: #7b878b; }
.bd-card ul { margin: 0; padding: 0 0 0 18px; font-size: 13px; line-height: 1.9; color: var(--muted, #5d6b70); }

.bd-sec { padding: 56px 0 0; }
.bd-sec > h2 { margin: 6px 0 22px; font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -.8px; }
.bd-sec > h2 span { color: var(--bd-accent, #e0683a); }

/* 思维导图示意 */
.bd-mm { position: relative; aspect-ratio: 480 / 300; container-type: inline-size; border-radius: 24px; border: 1px solid var(--edge, #e6e2da); background: radial-gradient(circle at 1px 1px, #e9e2d6 1px, transparent 1.2px) 0 0 / 22px 22px, #fffaf3; overflow: hidden; }
.bd-mm svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.bd-mm .n { position: absolute; transform: translateY(-50%); padding: 1.6cqw 2.9cqw; border-radius: 12px; font-size: max(11px, 2.8cqw) !important; background: #fff; border: 2px solid #e8d6c3; font-size: 13px; font-weight: 700; color: #3a3530; box-shadow: 0 6px 16px -10px rgba(80, 50, 20, .35); white-space: nowrap; }
.bd-mm .n.r { background: #e0683a; border-color: #e0683a; color: #fff; }
.bd-mm .n small { display: block; font-weight: 500; color: #8a7d70; font-size: .82em; font-family: "Times New Roman", serif; font-style: italic; }

/* 编程：代码窗口示意 */
.bd-ide { border-radius: 18px; overflow: hidden; background: #13213b; color: #d8e2f5; box-shadow: 0 30px 60px -30px rgba(19, 33, 59, .6); font: 13px/1.7 ui-monospace, "SFMono-Regular", Consolas, "Microsoft YaHei", monospace; }
.bd-ide .bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: #0e1a30; font-size: 12px; color: #8fa3c8; }
.bd-ide .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2c3d60; }
.bd-ide .bar b { margin-left: auto; padding: 3px 12px; border-radius: 7px; background: #2f5fd0; color: #fff; font-weight: 600; }
.bd-ide pre { margin: 0; padding: 14px 18px; white-space: pre; overflow: hidden; }
.bd-ide .k { color: #ff9f6b; } .bd-ide .s { color: #9fe39f; } .bd-ide .c { color: #6c7fa3; }
.bd-ide .out { padding: 10px 18px 14px; border-top: 1px solid #22345a; color: #ffd36a; }
.bd-ide .ask { margin: 0 14px 14px; padding: 10px 12px; border-radius: 12px; background: #1c2d4f; color: #cfe0ff; font-family: var(--s, sans-serif); font-size: 12.5px; line-height: 1.65; }
.bd-ide .ask b { color: #fff; }

.bd-langs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.bd-lang { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--edge, #e6e2da); background: #fff; }
.bd-lang b { display: block; font-size: 15px; }
.bd-lang small { display: block; margin-top: 2px; color: #8a9a9c; font-size: 12px; }
.bd-lang.in { border-color: #c9d7fb; background: #f4f7ff; }
.bd-lang.in small { color: #2f5fd0; font-weight: 600; }

.bd-faq { display: grid; gap: 10px; max-width: 820px; }
.bd-faq details { border: 1px solid var(--edge, #e6e2da); border-radius: 14px; background: #fff; padding: 14px 18px; }
.bd-faq summary { cursor: pointer; font-weight: 700; }
.bd-faq p { margin: 10px 0 0; color: var(--muted, #5d6b70); font-size: 14px; line-height: 1.8; }

@media (max-width: 900px) {
  .bd-hero { grid-template-columns: 1fr; padding-top: 32px; gap: 28px; }
  .bd-grid, .bd-grid.lr { grid-template-columns: 1fr 1fr; }
  .bd-card.big, .bd-grid.lr .bd-card.big { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 600px) {
  .bd-grid, .bd-grid.lr { grid-template-columns: 1fr; }
  .bd-card { padding: 22px 20px; }
}
.bd-tab { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: auto; padding: 14px 16px; border-radius: 14px; background: #fff8ef; border: 1px dashed #ecd9c2; font-size: 13px; color: #6b5d50; }
.bd-tab code { padding: 2px 8px; border-radius: 7px; background: #fff; border: 1px solid #ecd9c2; font: 12.5px ui-monospace, Consolas, monospace; color: #b8541f; }
.bd-tab kbd { padding: 1px 7px; border-radius: 6px; background: #3a3530; color: #fff; font: 600 11px ui-monospace, Consolas, monospace; }
.bd-tab i { font: italic 17px "Times New Roman", "STIX Two Math", serif; color: #2a2522; }
.bd-tab i.mat { font-size: 13px; line-height: 1.2; font-style: normal; }
.bd-tab .sep { width: 1px; height: 22px; background: #ecd9c2; margin: 0 6px; }
.bd-tab + .go { margin-top: 0; }