/* ============================================================
   来源：views/tools/west/draw.html 内联 <style> 第 1 块（原位抽离，34 行）
   说明：在原位置以 <link rel="stylesheet"> 引入，来源顺序不变，
        层叠结果与抽离前逐字一致，不会引起样式变化。
   ============================================================ */
.dk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.dk-card { border: 1px solid #e9ddc8; border-radius: 12px; padding: 12px 14px; cursor: pointer; background: #fffdf8; transition: all .16s; text-align: left; }
.dk-card:hover { border-color: #cda24f; }
.dk-card.on { border-color: #cda24f; background: linear-gradient(135deg, #fff7e6, #fdefd2); box-shadow: 0 4px 12px rgba(180, 138, 58, .16); }
.dk-card .di { font-size: 1.4rem; }
.dk-card b { font-size: .94rem; color: #6b4a1c; margin-left: 4px; }
.dk-card p { margin: 5px 0 0; font-size: .72rem; color: #a58b5c; }
.dk-card.on b { color: #96610f; }
.lt-tube { text-align: center; padding: 34px 0 10px; }
.lt-tube .tube { font-size: 3.6rem; display: inline-block; }
.lt-tube .tube.shake { animation: lt-shake .45s infinite; }
.lt-tube .txt { margin-top: 8px; color: #8a7450; font-size: .9rem; }
.lt-tube .steps { color: #b3a284; font-size: .76rem; margin-top: 4px; }
@keyframes lt-shake { 0%,100%{transform:rotate(0) translateY(0)} 20%{transform:rotate(-7deg) translateY(2px)} 60%{transform:rotate(7deg)} 80%{transform:rotate(-4deg)} }
.lt-head { text-align: center; margin-bottom: 4px; }
.lt-head .no { display: inline-block; font-size: .74rem; color: #9a8558; background: #fbf3e2; border: 1px solid #ead9b4; padding: 2px 14px; border-radius: 12px; }
.lt-title { font-size: 1.5rem; color: #5a3a1e; text-align: center; margin: 6px 0 2px; font-weight: 800; letter-spacing: 2px; }
.lt-level { text-align: center; }
.lt-level span { display: inline-block; border-radius: 16px; padding: 2px 18px; font-size: .8rem; color: #fff; letter-spacing: 2px; box-shadow: 0 3px 8px rgba(0,0,0,.12); }
.lt-verse { font-family: "KaiTi", "STKaiti", "楷体", serif; text-align: center; font-size: 1.06rem; line-height: 2.1; color: #3f2c10; margin: 12px auto; max-width: 520px; border-top: 1px dashed #e2d3ae; border-bottom: 1px dashed #e2d3ae; padding: 10px 6px; }
.lt-question { text-align: center; font-size: .78rem; color: #a07c3a; margin-bottom: 10px; }
.lt-overall { background: #fffaf0; border: 1px dashed #e6d2a0; border-left: 4px solid #d5a94f; border-radius: 10px; padding: 11px 15px; color: #7a6534; font-size: .88rem; line-height: 1.95; }
.lt-guide { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lt-guide .lt-g { background: #faf6ec; border: 1px dashed #e8d9b6; border-radius: 8px; padding: 7px 12px; font-size: .8rem; color: #7a6534; line-height: 1.75; }
.lt-guide .lt-g b { color: #b0842f; margin-right: 6px; }
.lt-guide { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.lt-guide .lt-g { background: #faf6ec; border: 1px dashed #e8d9b6; border-radius: 8px; padding: 7px 12px; font-size: .8rem; color: #7a6534; line-height: 1.75; }
.lt-guide .lt-g b { color: #b0842f; margin-right: 6px; }
.lt-fortune { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; }
.lt-f { border: 1px solid #efe6d2; background: #fffdf8; border-radius: 10px; padding: 9px 12px; }
.lt-f b { font-size: .8rem; color: #8a6d3a; display: block; margin-bottom: 3px; }
.lt-f span { font-size: .8rem; color: #6a5a3a; line-height: 1.75; }
.lt-empty { text-align: center; color: #b3a284; padding: 40px 10px; font-size: .9rem; line-height: 2.2; }
@media (max-width: 900px) { .dk-grid, .lt-fortune { grid-template-columns: 1fr; } }