.card.board {
    background: white; border-radius: 16px; padding: 24px;
    max-width: 550px; box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.mock-top { display: flex; justify-content: space-between; margin-bottom: 20px; }
.muted { color: #888; font-size: 0.85rem; }
.dots span { width: 4px; height: 4px; background: #ccc; display: inline-block; border-radius: 50%; margin-left: 3px; transition: background 0.3s; }

.product-tabs { display: flex; gap: 8px; margin-bottom: 20px; overflow-x: auto; padding-bottom: 5px; }
.pill { 
    padding: 8px 14px; border-radius: 20px; background: #f5f5f5; 
    font-size: 0.8rem; cursor: pointer; white-space: nowrap; transition: 0.3s;
}
.pill.active { background: #ff9800; color: white; box-shadow: 0 4px 10px rgba(255,152,0,0.2); }

.spark { display: flex; align-items: flex-end; gap: 6px; height: 60px; margin: 20px 0; }
.spark span { 
    flex: 1; background: linear-gradient(to top, #ff9800, #ffb74d);
    border-radius: 20px 20px 0 0; height: 0; 
    transition: height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.metric-row { display: flex; justify-content: space-between; gap: 5px; margin-bottom: 20px; }
.mini-stat { text-align: center; flex: 1; }
.mini-stat strong { font-size: 1.1rem; color: #222; display: block; }
.mini-stat span { font-size: 0.65rem; color: #999; text-transform: uppercase; white-space: nowrap; }

.note-section {
    background: #fff9f0; border-left: 4px solid #ff9800;
    padding: 12px; border-radius: 4px; font-size: 0.85rem; margin-bottom: 20px;
}

.queue-item { padding: 10px 0; border-bottom: 1px solid #f9f9f9; animation: fadeIn 0.4s ease forwards; }
.queue-item small { display: block; color: #999; }

@keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }