/* Tire Shop Simulator Tycoon - small HTML panels used inside Precision Work Views (work-order card, car diagram). */
.wo-card { text-align: left; min-width: min(420px, 80vw); background: #f6f4ee; color: #1b2430; border-radius: 8px; padding: 12px 16px; font-size: 14.5px; box-shadow: inset 0 0 0 1px #d6d2c6; }
.wo-h { display: flex; align-items: baseline; gap: 10px; border-bottom: 2px solid #1b2430; padding-bottom: 4px; }
.wo-h b { font-family: var(--mono); font-size: 16px; } .wo-h span { font-family: var(--hd); font-weight: 700; font-size: 20px; flex: 1; } .wo-h em { font-style: normal; font-family: var(--mono); padding: 1px 8px; border: 2px solid #1b2430; border-radius: 4px; }
.wo-c { margin: 8px 0; font-style: italic; color: #46525f; }
.wo-card ul { margin: 0; padding-left: 18px; } .wo-card li { padding: 1px 0; } .wo-card li.now { font-weight: 700; color: var(--acc2); } .wo-card li small { font-family: var(--mono); color: #5b6b7b; }
.car-diagram { position: relative; width: 190px; height: 240px; margin: 4px auto; }
.cd-body { position: absolute; left: 26%; right: 26%; top: 6%; bottom: 6%; border-radius: 34px 34px 22px 22px; background: linear-gradient(#3a4654, #2a333e); border: 2px solid #5a6878; display: flex; flex-direction: column; align-items: center; }
.cd-body i { width: 72%; height: 24%; margin-top: 22%; border-radius: 10px 10px 4px 4px; background: #9cc4dd; opacity: .6; } .cd-body b { font-family: var(--hd); font-size: 11px; letter-spacing: .2em; color: var(--muted); position: absolute; top: 4%; }
.cd-w { position: absolute; width: 46px; height: 62px; margin: -31px 0 0 -23px; border-radius: 9px; border: 2px solid var(--line); background: #15191e; color: var(--text); font-family: var(--mono); font-size: 14px; }
.cd-w:hover, .cd-w.on { border-color: var(--acc); background: #3a2010; } .cd-w.no { border-color: var(--bad); opacity: .4; } .cd-w.done { border-color: var(--go); background: #14472c; }