.action-icons i margin: 0 5px; color: #94a3b8; cursor: pointer; transition: 0.2s;
<script> // ---------- MOCK DATA ---------- let tickets = [ id: "TKT-1001", subject: "Unable to reset password", status: "open", priority: "High", createdAt: "2025-03-10", description: "User cannot receive reset email" , id: "TKT-1002", subject: "Billing invoice not generated", status: "in-progress", priority: "Medium", createdAt: "2025-03-12", description: "Monthly subscription missing" , id: "TKT-1003", subject: "Dashboard loading slow", status: "open", priority: "Medium", createdAt: "2025-03-14", description: "Takes 15 seconds to load" , id: "TKT-1004", subject: "Feature request: dark mode", status: "resolved", priority: "Low", createdAt: "2025-03-05", description: "Implemented in v2.1" , id: "TKT-1005", subject: "API key rotation", status: "in-progress", priority: "High", createdAt: "2025-03-15", description: "Update authentication" ];
.ticket-subject i color: #6c86a3; font-size: 0.9rem; support ticket system html template free
.btn-primary background: #3b82f6; color: white; border: none; padding: 10px 20px; border-radius: 40px; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05);
.form-group margin-bottom: 1.2rem;
.ticket-subject font-weight: 500; display: flex; align-items: center; gap: 8px;
.logo-area h1 font-size: 1.8rem; font-weight: 700; background: linear-gradient(135deg, #1e293b, #3b82f6); background-clip: text; -webkit-background-clip: text; color: transparent; letter-spacing: -0.3px; .action-icons i margin: 0 5px
.btn-outline background: transparent; border: 1px solid #cbd5e1; color: #1e293b; padding: 10px 20px; border-radius: 40px; font-weight: 500; cursor: pointer; transition: 0.2s; display: inline-flex; align-items: center; gap: 8px;