.credit-widget{display:flex;align-items:center;background:transparent;border:none;padding:12px 16px;transition:background-color .2s ease;width:100%}.credit-widget:hover{background:var(--gray-50, #f9fafb)}.credit-widget-warning{background:#fef3c74d}.credit-widget-content{display:flex;align-items:center;gap:8px;width:100%}.credit-info{display:flex;align-items:center;gap:8px}.credit-count{display:flex;align-items:center;gap:6px}.credit-icon{font-size:1.1rem;line-height:1;filter:grayscale(100%) brightness(.8) sepia(100%) hue-rotate(10deg) saturate(300%)}.credit-number{font-size:1rem;font-weight:400;color:#333;line-height:1.5}.credit-label{font-size:1rem;color:#333;font-weight:400;line-height:1.5}.tier-info{display:flex;align-items:center}.tier-badge{display:inline-block;padding:4px 10px;border-radius:6px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;line-height:1}.tier-badge-free{background:linear-gradient(135deg,#e5e7eb,#d1d5db);color:#4b5563}.tier-badge-plus{background:linear-gradient(135deg,#c0a062,#d4b875);color:#fff}.tier-badge-pro{background:linear-gradient(135deg,#8b5cf6,#6366f1);color:#fff}.credit-warning{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#fbbf2433;border-radius:6px}.warning-icon{font-size:.875rem;line-height:1}.warning-text{font-size:.75rem;font-weight:600;color:#92400e}.credit-reset-info{display:flex;align-items:center;gap:4px;padding:4px 8px;background:#c0a0621a;border-radius:6px}.reset-icon{font-size:.875rem;line-height:1}.reset-text{font-size:.75rem;font-weight:500;color:#666}.upgrade-button{padding:6px 14px;background:var(--primary-500, #C0A062);border:none;border-radius:6px;color:#fff;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.upgrade-button:hover{background:var(--primary-600, #B08E4A);transform:scale(1.05)}.upgrade-button:active{transform:scale(.98)}.credit-widget-loading{display:flex;align-items:center;gap:8px;color:#666;font-size:.875rem}.spinner-small{width:16px;height:16px;border:2px solid rgba(192,160,98,.2);border-top-color:var(--primary-500, #C0A062);border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.credit-widget-error{background:#fef2f2f2;border:2px solid #fca5a5;padding:10px 16px;min-width:280px}.credit-widget-error:hover{box-shadow:0 6px 20px #dc262626}.credit-error-content{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.credit-error-icon{font-size:1.25rem;line-height:1;flex-shrink:0}.credit-error-text{font-size:.875rem;color:#991b1b;font-weight:600;flex:1;min-width:150px;line-height:1.4}.credit-widget-error-network{background:#fef9c3f2;border-color:#fbbf24}.credit-widget-error-network .credit-error-text{color:#92400e}.credit-widget-error-auth{background:#fef2f2f2;border-color:#f87171}.credit-widget-error-auth .credit-error-text{color:#991b1b}.credit-widget-error-api{background:#fef2f2f2;border-color:#fca5a5}.credit-widget-error-api .credit-error-text{color:#991b1b}.credit-widget-error-unknown{background:#f3f4f6f2;border-color:#d1d5db}.credit-widget-error-unknown .credit-error-text{color:#374151}.credit-retry-button{display:flex;align-items:center;gap:6px;padding:6px 12px;background:#fff;border:1px solid #d1d5db;border-radius:6px;color:#374151;font-size:.8rem;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0}.credit-retry-button:hover:not(:disabled){background:#f9fafb;border-color:#9ca3af;transform:scale(1.05)}.credit-retry-button:active:not(:disabled){transform:scale(.98)}.credit-retry-button:disabled{opacity:.6;cursor:not-allowed}.spinner-tiny{width:12px;height:12px;border:2px solid rgba(107,114,128,.2);border-top-color:#6b7280;border-radius:50%;animation:spin .6s linear infinite}@media(max-width:768px){.credit-widget{padding:6px 12px}.credit-widget-content,.credit-info{gap:8px}.credit-number{font-size:1.1rem}.credit-label{font-size:.8rem}.tier-badge{font-size:.7rem;padding:3px 8px}.upgrade-button{padding:5px 12px;font-size:.8rem}.credit-reset-info,.credit-warning{padding:3px 6px}.reset-text,.warning-text{font-size:.7rem}}.credit-widget-compact{padding:6px 12px}.credit-widget-compact .credit-widget-content{gap:8px}.credit-widget-compact .credit-number{font-size:1.1rem}.credit-widget-compact .credit-label{display:none}.credit-widget-compact .tier-badge{font-size:.7rem;padding:3px 8px}.no-subscription-modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .2s ease-in-out;overflow-y:auto}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.no-subscription-modal{background:#fff;border-radius:12px;padding:28px 32px;max-width:440px;width:90%;position:relative;box-shadow:0 10px 40px #0003;animation:slideUp .3s ease-out;margin:auto}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-close-button{position:absolute;top:16px;right:16px;background:none;border:none;font-size:28px;color:#666;cursor:pointer;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease}.modal-close-button:hover{background-color:#f0f0f0;color:#333}.modal-content{text-align:center;margin-bottom:28px;background:#fff;box-shadow:none}.no-subscription-modal h2{font-size:22px;font-weight:600;color:#1a1a1a;margin:0 0 12px}.modal-message{font-size:16px;color:#666;line-height:1.6;margin:0}.modal-actions{display:flex;gap:12px;justify-content:center}.modal-actions button{padding:12px 32px;font-size:16px;font-weight:500;border-radius:8px;border:none;cursor:pointer;transition:all .2s ease;min-width:120px}.btn-cancel{background-color:#f5f5f5;color:#666}.btn-cancel:hover{background-color:#e0e0e0;color:#333}.btn-view-plans{background-color:#c0a062;color:#fff}.btn-view-plans:hover{background-color:#b09052;transform:translateY(-1px);box-shadow:0 4px 12px #c0a0624d}.btn-view-plans:active{transform:translateY(0)}@media(max-width:640px){.no-subscription-modal{padding:24px;max-width:90%}.no-subscription-modal h2{font-size:19px}.modal-message{font-size:14px}.modal-actions{flex-direction:column}.modal-actions button{width:100%}}