/* GENERATED by scripts/build-curriculum.mjs from toolkit-source/tech-tool-essentials.html (the 7 Tool Kit app). Do not edit by hand. */
.fo-toolkit *, .fo-toolkit *::before, .fo-toolkit *::after { box-sizing: border-box; margin: 0; padding: 0; }
.fo-toolkit { font-family: 'DM Sans', 'Segoe UI', sans-serif; background: #f7f7f5; min-height: 100vh; }
.fo-toolkit { max-width: 680px; margin: 0 auto; padding-bottom: 60px; }
.fo-toolkit .tabs { display: flex; background: #fff; border-bottom: 1px solid #e5e5e3; position: sticky; top: 0; z-index: 50; }
.fo-toolkit .tab-btn { flex: 1; padding: 12px 4px; border: none; background: transparent; font-family: inherit; font-size: 11px; font-weight: 700; cursor: pointer; color: #999; border-bottom: 2px solid transparent; transition: all 0.15s; letter-spacing: 0.3px; }
.fo-toolkit .tab-btn.active { color: #1a1a1a; border-bottom-color: #1a1a1a; }
.fo-toolkit .prog-bg { background: #3a3a3a; border-radius: 10px; height: 6px; overflow: hidden; }
.fo-toolkit .prog-fill { height: 6px; border-radius: 10px; background: #fff; transition: width 0.4s; }
.fo-toolkit .prog-bg-light { background: #e0e0de; border-radius: 10px; height: 5px; overflow: hidden; }
.fo-toolkit .prog-fill-dark { height: 5px; border-radius: 10px; background: #1a1a1a; transition: width 0.4s; }
.fo-toolkit .sec-head { display: flex; align-items: center; gap: 12px; padding: 15px 16px; cursor: pointer; border-bottom: 1px solid #e5e5e3; background: #fff; user-select: none; }
.fo-toolkit .sec-head:hover { background: #fafaf8; }
.fo-toolkit .sec-head:active { background: #f5f5f3; }
.fo-toolkit .tool-row { display: flex; align-items: flex-start; gap: 12px; padding: 11px 16px; border-bottom: 1px solid #e5e5e3; cursor: pointer; background: #fff; }
.fo-toolkit .tool-row:last-child { border-bottom: none; }
.fo-toolkit .tool-row:hover { background: #fafaf8; }
.fo-toolkit .check-box { width: 22px; height: 22px; border-radius: 5px; border: 2px solid #ccc; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; cursor: pointer; transition: all 0.15s; }
.fo-toolkit .check-box.done { background: #1a1a1a; border-color: #1a1a1a; }
.fo-toolkit .check-box.done-gold { background: #c9920a; border-color: #c9920a; }
.fo-toolkit .check-box.done-blue { background: #1565c0; border-color: #1565c0; }
.fo-toolkit .check-box.done-green { background: #2e7d32; border-color: #2e7d32; }
.fo-toolkit .check-tick { color: #fff; font-size: 11px; font-weight: 700; display: none; }
.fo-toolkit .check-box.done .check-tick, .fo-toolkit .check-box.done-gold .check-tick, .fo-toolkit .check-box.done-blue .check-tick, .fo-toolkit .check-box.done-green .check-tick { display: block; }
.fo-toolkit .tool-detail { margin: 0 16px 12px 50px; border-radius: 8px; padding: 14px 16px; border-left: 3px solid #1a1a1a; background: #fafafa; display: none; }
.fo-toolkit .tool-detail.open { display: block; }
.fo-toolkit .detail-label { font-size: 11px; font-weight: 700; letter-spacing: 1px; margin-bottom: 6px; }
.fo-toolkit .detail-body { font-size: 14px; color: #333; line-height: 1.7; white-space: pre-line; margin-bottom: 12px; }
.fo-toolkit .detail-buy { font-size: 13px; color: #555; line-height: 1.5; margin-bottom: 12px; }
.fo-toolkit .detail-btn { width: 100%; padding: 10px; border: none; border-radius: 7px; font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; letter-spacing: 0.3px; }
.fo-toolkit .tk-modal { display: none; position: fixed; inset: 0; background: #fff; z-index: 200; overflow-y: auto; max-width: 680px; margin: 0 auto; }
.fo-toolkit .tk-modal.open { display: block; }
.fo-toolkit .modal-header { position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e5e5e3; padding: 14px 18px; display: flex; align-items: center; gap: 12px; z-index: 201; }
.fo-toolkit .modal-back { background: #f0f0ee; border: none; border-radius: 8px; padding: 8px 14px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; color: #333; }
.fo-toolkit .modal-content { padding: 24px 22px 60px; }
.fo-toolkit .modal-section-head { font-weight: 700; font-size: 13px; letter-spacing: 1.2px; color: #c9920a; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #e5e5e3; }
.fo-toolkit .modal-para { font-size: 15px; color: #333; line-height: 1.85; margin-bottom: 14px; }
.fo-toolkit .modal-bullet { display: flex; gap: 10px; font-size: 15px; color: #333; line-height: 1.75; margin-bottom: 6px; }
.fo-toolkit .modal-bullet-dot { color: #c9920a; flex-shrink: 0; margin-top: 2px; }
.fo-toolkit .learn-card { background: #fff; border: 1px solid #e5e5e3; border-radius: 10px; margin: 0 12px 10px; overflow: hidden; cursor: pointer; }
.fo-toolkit .learn-card:hover { background: #fafaf8; }
.fo-toolkit .learn-card-icon { width: 46px; height: 46px; background: #f7f7f5; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.fo-toolkit .pack-card { background: #fff; border: 1px solid #e5e5e3; border-radius: 10px; margin: 0 12px 10px; overflow: hidden; }
.fo-toolkit .tag { background: #f7f7f5; border: 1px solid #e5e5e3; border-radius: 5px; padding: 4px 10px; font-size: 12px; color: #444; display: inline-block; margin: 3px; }
.fo-toolkit .sub-tab { padding: 7px 14px; border-radius: 20px; border: 1px solid #ccc; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; cursor: pointer; color: #555; transition: all 0.15s; }
.fo-toolkit .sub-tab.active { background: #1a1a1a; border-color: #1a1a1a; color: #fff; }
.fo-toolkit .storage-note { background: #f0f4ff; border-left: 3px solid #1565c0; padding: 10px 16px; font-size: 12px; color: #1a3a6b; line-height: 1.6; }