.tool-card{background-color:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:2.5rem;margin-bottom:1rem;}.upload-area{border:2px dashed var(--dash-border);border-radius:var(--radius-lg);padding:3.5rem 2rem;text-align:center;background-color:#ffffff;cursor:pointer;transition:all 0.2s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;}.upload-area:hover,.upload-area.drag-active{background-color:var(--bg-color);border-color:var(--primary-color);}.upload-icon{width:64px;height:64px;background-color:#e8f0fe;border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem;color:var(--primary-color);}.upload-icon svg{width:28px;height:28px;fill:currentColor;}.upload-title{font-size:1.25rem;font-weight:600;margin-bottom:0.5rem;}.upload-subtitle{color:var(--text-muted);font-size:0.875rem;margin-bottom:1.5rem;}.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.5rem;background-color:var(--primary-color);color:white;font-weight:500;padding:0.75rem 1.5rem;border-radius:var(--radius-md);border:none;cursor:pointer;transition:background-color 0.2s;font-size:0.875rem;}.btn:hover{background-color:var(--primary-hover);}.btn svg{width:16px;height:16px;fill:currentColor;}.badges-container{display:flex;flex-wrap:wrap;gap:0.75rem;justify-content:center;margin-top:2rem;}.badge{display:inline-flex;align-items:center;gap:0.375rem;background-color:var(--badge-bg);border:1px solid var(--border-color);color:var(--badge-text);padding:0.375rem 0.875rem;border-radius:999px;font-size:0.75rem;font-weight:500;}.badge svg{width:14px;height:14px;fill:currentColor;}/* Workspace when image uploaded */ .workspace{display:none;/* hidden until image is uploaded */}.workspace.active{display:block;}.preview-container{max-width:100%;margin-bottom:1.5rem;border:1px solid var(--border-color);border-radius:var(--radius-md);padding:1rem;background:#f8fafc;text-align:center;overflow:hidden;position:relative;}.preview-container canvas{max-width:100%;height:auto;border-radius:var(--radius-md);display:block;margin:0 auto;}.preview-container img{max-width:100%;height:auto;border-radius:var(--radius-md);display:block;margin:0 auto;}.tool-controls{display:flex;flex-direction:column;gap:1.5rem;padding-top:1rem;border-top:1px solid var(--border-color);}.control-group{display:flex;flex-direction:column;gap:0.5rem;}.control-group label{font-weight:500;font-size:0.875rem;}.control-group input[type="range"],.control-group input[type="number"],.control-group select,.control-group input[type="text"]{width:100%;padding:0.5rem;border:1px solid var(--border-color);border-radius:calc(var(--radius-md) - 2px);font-family:inherit;}.action-buttons{display:flex;gap:1rem;justify-content:flex-end;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color);}.btn-secondary{background-color:white;color:var(--text-color);border:1px solid var(--border-color);}.btn-secondary:hover{background-color:var(--bg-color);}

@media (max-width: 480px) {
  .action-buttons {
    flex-direction: column;    /* Buttons ko vertical stack karega */
    align-items: center;       /* Yeh buttons ko horizontal middle mein layega */
    justify-content: center;   /* Vertical alignment ke liye */
    gap: 0.8rem;               /* Buttons ke beech thodi jagah */
  }

  .action-buttons .btn {
    width: 100%;               /* Button poori width lega */
    max-width: 250px;          /* Button ki width control karne ke liye */
  }
}

/* ... [Aapka puraana existing CSS yahan rahega] ... */

/* Button Click Feedback - Added at the bottom */
.btn {
  transition: all 0.2s ease !important;
}

.btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn:active {
  transform: translateY(0);
  filter: brightness(0.9);
}

.btn-secondary:active {
  background-color: var(--border-color) !important;
}

.rotate-text:active {
  transform: scale(0.95);
  opacity: 0.7;
}