*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg:#f8f9fb;--color-surface:#fff;--color-border:#e2e5ea;--color-text:#1a1d23;--color-text-secondary:#6b7280;--color-text-muted:#9ca3af;--color-primary:#4f46e5;--color-primary-hover:#4338ca;--color-primary-light:#eef2ff;--color-danger:#dc2626;--color-danger-hover:#b91c1c;--color-success:#16a34a;--color-warning:#d97706;--color-high:#dc2626;--color-medium:#d97706;--color-low:#16a34a;--color-open:#3b82f6;--color-in-progress:#d97706;--color-closed:#6b7280;--radius:8px;--radius-sm:6px;--shadow-sm:0 1px 2px #0000000d;--shadow:0 1px 3px #0000001a, 0 1px 2px #0000000f;--shadow-md:0 4px 6px -1px #0000001a, 0 2px 4px -1px #0000000f;--font:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif}body{font-family:var(--font);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:15px;line-height:1.6}#root{min-height:100vh}a{color:var(--color-primary);text-decoration:none}a:hover{text-decoration:underline}.btn{font-family:var(--font);border-radius:var(--radius-sm);cursor:pointer;white-space:nowrap;border:1px solid #0000;justify-content:center;align-items:center;gap:6px;padding:10px 20px;font-size:14px;font-weight:500;line-height:1;text-decoration:none;transition:all .15s;display:inline-flex}.btn:disabled{opacity:.6;cursor:not-allowed}.btn-primary{background:var(--color-primary);color:#fff;border-color:var(--color-primary)}.btn-primary:hover:not(:disabled){background:var(--color-primary-hover);border-color:var(--color-primary-hover);text-decoration:none}.btn-danger{background:var(--color-danger);color:#fff;border-color:var(--color-danger)}.btn-danger:hover:not(:disabled){background:var(--color-danger-hover);border-color:var(--color-danger-hover)}.btn-ghost{color:var(--color-text-secondary);border-color:var(--color-border);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--color-bg);color:var(--color-text)}.btn-sm{padding:6px 14px;font-size:13px}.btn-block{width:100%}.form-group{flex-direction:column;flex:1;gap:6px;display:flex}.form-group label{color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.5px;font-size:13px;font-weight:600}.form-group input,.form-group select,.form-group textarea{font-family:var(--font);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);width:100%;padding:10px 12px;font-size:15px;transition:border-color .15s,box-shadow .15s}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4f46e51a}.form-group textarea{resize:vertical;min-height:80px}.form-row{gap:16px;display:flex}.form-actions{border-top:1px solid var(--color-border);justify-content:flex-end;gap:12px;margin-top:24px;padding-top:24px;display:flex}.alert{border-radius:var(--radius-sm);margin-bottom:16px;padding:12px 16px;font-size:14px}.alert-error{color:var(--color-danger);background:#fef2f2;border:1px solid #fecaca}.navbar{background:var(--color-surface);border-bottom:1px solid var(--color-border);z-index:100;box-shadow:var(--shadow-sm);position:sticky;top:0}.navbar-inner{justify-content:space-between;align-items:center;max-width:1200px;height:56px;margin:0 auto;padding:0 24px;display:flex}.navbar-left{align-items:center;gap:24px;display:flex}.navbar-brand{color:var(--color-primary);letter-spacing:-.5px;font-size:18px;font-weight:700;text-decoration:none}.navbar-brand:hover{text-decoration:none}.navbar-link{color:var(--color-text-secondary);font-size:14px;font-weight:500;text-decoration:none}.navbar-link:hover{color:var(--color-text);text-decoration:none}.navbar-right{align-items:center;gap:16px;display:flex}.navbar-user{color:var(--color-text);align-items:center;gap:8px;font-size:14px;font-weight:500;display:flex}.badge{text-transform:uppercase;letter-spacing:.5px;border-radius:99px;align-items:center;padding:2px 8px;font-size:11px;font-weight:600;display:inline-flex}.badge-admin{background:var(--color-primary-light);color:var(--color-primary)}.priority-badge{border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.priority-low{color:var(--color-low);background:#f0fdf4}.priority-medium{color:var(--color-medium);background:#fffbeb}.priority-high{color:var(--color-high);background:#fef2f2}.status-badge{border-radius:99px;padding:3px 10px;font-size:12px;font-weight:600;display:inline-flex}.status-open{color:var(--color-open);background:#eff6ff}.status-in_progress{color:var(--color-in-progress);background:#fffbeb}.status-closed{color:var(--color-closed);background:#f3f4f6}.main-content{max-width:1200px;margin:0 auto;padding:32px 24px}.page-loading{min-height:200px;color:var(--color-text-muted);justify-content:center;align-items:center;font-size:15px;display:flex}.text-muted{color:var(--color-text-muted)}.auth-page{background:var(--color-bg);justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.auth-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);width:100%;max-width:420px;box-shadow:var(--shadow-md);padding:40px}.auth-title{letter-spacing:-.5px;margin-bottom:4px;font-size:28px;font-weight:700}.auth-subtitle{color:var(--color-text-secondary);margin-bottom:28px;font-size:15px}.auth-card .form-group{margin-bottom:16px}.auth-card .btn-block{margin-top:8px;padding:12px;font-size:15px}.auth-footer{text-align:center;color:var(--color-text-secondary);margin-top:24px;font-size:14px}.ticket-list-page .page-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.ticket-list-page .page-header h1{letter-spacing:-.5px;font-size:28px;font-weight:700}.filters{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);margin-bottom:20px;padding:16px}.filter-row{flex-wrap:wrap;gap:12px;display:flex}.filter-search{min-width:200px;font-family:var(--font);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);flex:2;padding:8px 12px;font-size:14px;transition:border-color .15s}.filter-search:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4f46e51a}.filter-row select{min-width:140px;font-family:var(--font);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);cursor:pointer;flex:1;padding:8px 12px;font-size:14px}.filter-row select:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4f46e51a}.table-wrapper{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden}.ticket-table{border-collapse:collapse;width:100%}.ticket-table th{text-align:left;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-secondary);background:var(--color-bg);border-bottom:1px solid var(--color-border);padding:12px 16px;font-size:12px;font-weight:600}.ticket-table td{border-bottom:1px solid var(--color-border);vertical-align:middle;padding:14px 16px;font-size:14px}.ticket-table tbody tr:last-child td{border-bottom:none}.ticket-table tbody tr:hover{background:#f9fafb}.ticket-title-link{color:var(--color-text);font-weight:500}.ticket-title-link:hover{color:var(--color-primary)}.empty-state{text-align:center;color:var(--color-text-muted);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:60px 24px;font-size:15px}.form-page{max-width:720px;margin:0 auto}.form-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);box-shadow:var(--shadow-sm);padding:32px}.form-card h1{letter-spacing:-.3px;margin-bottom:24px;font-size:24px;font-weight:700}.form-card .form-group{margin-bottom:20px}.ticket-detail-page{max-width:960px;margin:0 auto}.ticket-detail-header{justify-content:space-between;align-items:center;margin-bottom:24px;display:flex}.ticket-detail-header-right{gap:8px;display:flex}.ticket-detail-form{grid-template-columns:1fr 300px;gap:24px;margin-bottom:32px;display:grid}.ticket-detail-main{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:24px}.ticket-detail-main .form-group{margin-bottom:20px}.ticket-detail-main .form-group:last-child{margin-bottom:0}.ticket-detail-sidebar{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:16px;padding:24px;display:flex}.ticket-meta{border-top:1px solid var(--color-border);flex-direction:column;gap:6px;padding-top:16px;display:flex}.ticket-meta p{color:var(--color-text-secondary);font-size:13px}.ticket-meta strong{color:var(--color-text)}.comments-section{margin-top:8px}.comments-section h2{margin-bottom:16px;font-size:20px;font-weight:600}.comments-list{flex-direction:column;gap:12px;margin-bottom:24px;display:flex}.comment-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:16px}.comment-header{justify-content:space-between;align-items:center;margin-bottom:8px;display:flex}.comment-header strong{font-size:14px}.comment-date{color:var(--color-text-muted);font-size:12px}.comment-body{color:var(--color-text);white-space:pre-wrap;font-size:14px;line-height:1.6}.comment-form{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);flex-direction:column;gap:12px;padding:16px;display:flex}.comment-form textarea{font-family:var(--font);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);color:var(--color-text);resize:vertical;width:100%;min-height:80px;padding:10px 12px;font-size:14px}.comment-form textarea:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #4f46e51a}.comment-form .btn{align-self:flex-end}@media (width<=768px){.form-row,.filter-row{flex-direction:column}.ticket-detail-form{grid-template-columns:1fr}.navbar-inner{padding:0 16px}.main-content{padding:20px 16px}.ticket-table th:nth-child(n+5),.ticket-table td:nth-child(n+5){display:none}}