/* claude-basics/04-claude-models */
.entry-content .model-cards{display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px;}
.entry-content .model-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 28px 20px; text-align: center; position: relative; transition: border-color 0.2s, transform 0.2s;}
.entry-content .model-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .model-badge{display: inline-block; padding: 4px 12px; border-radius: 20px; font-size: 0.72rem; font-weight: 700; background: #f1f5f9; color: #64748b; margin-bottom: 12px;}
.entry-content .model-badge.popular{background: linear-gradient(135deg, #3b82f6, #2563eb); color: #fff;}
.entry-content .model-icon{font-size: 2.2rem; margin-bottom: 10px;}
.entry-content .model-card h3{font-size: 1.25rem; font-weight: 800; color: #1e293b; margin-bottom: 6px;}
.entry-content .model-trait{font-size: 0.92rem; color: #64748b; margin-bottom: 0;}
.entry-content .model-divider{width: 40px; height: 2px; background: #e2e8f0; margin: 14px auto; border-radius: 2px;}
.entry-content .model-use{font-size: 0.85rem; color: #475569; margin-bottom: 0;}
.entry-content .model-card.sonnet{border-color: #93c5fd; background: #f0f7ff;}
.entry-content .guide-cards{display: flex; flex-direction: column; gap: 12px; margin-top: 16px; margin-bottom: 20px;}
.entry-content .guide-card{display: flex; align-items: center; gap: 14px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 12px; padding: 16px 20px; transition: border-color 0.2s, transform 0.2s;}
.entry-content .guide-card:hover{border-color: #93c5fd; transform: translateY(-1px);}
.entry-content .guide-icon{font-size: 1.5rem; flex-shrink: 0;}
.entry-content .guide-body{flex: 1;}
.entry-content .guide-body strong{color: #1e293b; font-size: 0.95rem;}
.entry-content .guide-body p{color: #64748b; font-size: 0.85rem; margin: 2px 0 0;}
.entry-content .guide-arrow{color: #94a3b8; font-size: 1.2rem; font-weight: 700; flex-shrink: 0;}
.entry-content .guide-recommend{padding: 6px 16px; border-radius: 8px; font-weight: 700; font-size: 0.88rem; flex-shrink: 0;}
.entry-content .opus-tag{background: #fef3c7; color: #b45309;}
.entry-content .sonnet-tag{background: #dbeafe; color: #1d4ed8;}
.entry-content .haiku-tag{background: #d1fae5; color: #047857;}
.entry-content .tip-box{display: flex; align-items: center; gap: 12px; background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 12px; padding: 16px 20px; margin-top: 8px;}
.entry-content .tip-icon{font-size: 1.3rem; flex-shrink: 0; line-height: 1.6;}
.entry-content .tip-box p{margin: 0; font-size: 0.95rem; color: #1e40af; line-height: 1.6;}
.entry-content .pricing-grid{display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 20px;}
.entry-content .pricing-card{background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 14px; padding: 24px 16px; text-align: center; transition: border-color 0.2s, transform 0.2s;}
.entry-content .pricing-card:hover{border-color: #93c5fd; transform: translateY(-2px);}
.entry-content .pricing-label{font-size: 0.78rem; font-weight: 700; text-transform: uppercase; color: #64748b; letter-spacing: 0.05em; margin-bottom: 8px;}
.entry-content .pricing-price{font-size: 1.5rem; font-weight: 800; color: #1e293b; margin-bottom: 8px;}
.entry-content .pricing-price span{font-size: 0.82rem; font-weight: 500; color: #64748b;}
.entry-content .pricing-card p{font-size: 0.82rem; color: #64748b; margin: 0; line-height: 1.5;}
.entry-content .pricing-card.pro{border-color: #93c5fd; background: #f0f7ff;}
@media (max-width: 768px){
.entry-content .model-cards{grid-template-columns: 1fr; gap: 14px;}
.entry-content .guide-card{flex-wrap: wrap; gap: 10px;}
.entry-content .guide-arrow{display: none;}
.entry-content .guide-recommend{margin-left: auto;}
.entry-content .pricing-grid{grid-template-columns: repeat(2, 1fr); gap: 12px;}
}