* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
        min-height: 100vh;
    }

    /* ── Login ── */
    .login-container {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 100vh;
        padding: 20px;
    }

    .login-box {
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0,0,0,0.15);
        padding: 40px;
        width: 100%;
        max-width: 450px;
    }

    .logo-container {
        text-align: center;
        margin-bottom: 30px;
    }

    .logo-container img { height: 60px; margin-bottom: 15px; }
    .logo-container h1  { color: #1565c0; font-size: 24px; margin-bottom: 8px; }
    .logo-container p   { color: #666; font-size: 14px; }

    .form-group { margin-bottom: 20px; }

    .form-group label {
        display: block;
        color: #333;
        font-weight: 600;
        margin-bottom: 8px;
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        transition: all 0.3s;
        background: white;
    }

    .form-group input:focus,
    .form-group select:focus,
    .form-group textarea:focus {
        outline: none;
        border-color: #1565c0;
        box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
    }

    .btn-primary {
        width: 100%;
        padding: 14px;
        background: #1565c0;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s;
    }

    .btn-primary:hover { background: #0d47a1; }

    .error-message {
        background: #ffebee;
        color: #c62828;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
        border-left: 4px solid #c62828;
    }

    .success-message {
        background: #e8f5e9;
        color: #2e7d32;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 20px;
        font-size: 14px;
        border-left: 4px solid #2e7d32;
    }

    .help-text {
        text-align: center;
        margin-top: 25px;
        color: #666;
        font-size: 13px;
    }

    .help-text a { color: #1565c0; text-decoration: none; }
    .help-text a:hover { text-decoration: underline; }

    /* ── Dashboard ── */
    .dashboard { display: none; }
    .dashboard.active { display: block; }

    .header {
        background: white;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        padding: 16px 0;
    }

    .header-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .header-left { display: flex; align-items: center; gap: 15px; }
    .header-left img { height: 45px; }
    .header-title h1 { color: #1565c0; font-size: 20px; margin-bottom: 2px; }
    .header-title p  { color: #666; font-size: 11px; }
    .header-right    { display: flex; align-items: center; gap: 20px; }

    .user-info { text-align: right; }
    .user-info p    { font-size: 13px; font-weight: 600; color: #333; }
    .user-info span { font-size: 11px; color: #666; }

    .btn-logout {
        padding: 10px 20px;
        background: white;
        color: #c62828;
        border: 1px solid #c62828;
        border-radius: 6px;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .btn-logout:hover { background: #c62828; color: white; }

    .nav-bar { background: #1565c0; padding: 0; }

    .nav-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 30px;
        display: flex;
        gap: 2px;
    }

    .nav-btn {
        padding: 16px 24px;
        background: transparent;
        color: white;
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: background 0.3s;
    }

    .nav-btn:hover,
    .nav-btn.active { background: #0d47a1; }

    .main-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 30px;
    }

    .page-section          { display: none; }
    .page-section.active   { display: block; }

    .page-header           { margin-bottom: 30px; }
    .page-header h2        { color: #333; font-size: 28px; margin-bottom: 8px; }
    .page-header p         { color: #666; font-size: 15px; }

    /* Stats */
    .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: 25px;
        margin-bottom: 30px;
    }

    .stat-card {
        background: white;
        padding: 25px;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        border-left: 4px solid #1565c0;
    }

    .stat-card-warning { border-left-color: #ef6c00; }
    .stat-card-success { border-left-color: #2e7d32; }

    .stat-card h3 {
        color: #666;
        font-size: 13px;
        font-weight: 500;
        margin-bottom: 10px;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .stat-card .stat-number { color: #333; font-size: 36px; font-weight: 700; }

    .content-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
        gap: 25px;
    }

    .card {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        padding: 25px;
    }

    .card h3 { color: #333; font-size: 18px; margin-bottom: 20px; font-weight: 600; }

    .quick-action {
        background: #e3f2fd;
        padding: 16px;
        border-radius: 8px;
        margin-bottom: 12px;
        cursor: pointer;
        transition: all 0.3s;
    }

    .quick-action:hover { background: #bbdefb; transform: translateX(5px); }
    .quick-action h4    { color: #1565c0; font-size: 15px; margin-bottom: 4px; }
    .quick-action p     { color: #666; font-size: 13px; }

    .recent-ticket { padding: 14px; background: #f5f5f5; border-radius: 8px; margin-bottom: 12px; }

    .recent-ticket-header {
        display: flex;
        justify-content: space-between;
        align-items: start;
        margin-bottom: 6px;
    }

    .recent-ticket h4 { color: #333; font-size: 14px; font-weight: 600; }
    .recent-ticket p  { color: #666; font-size: 12px; }

    /* Badges */
    .badge { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
    .badge-open     { background: #e3f2fd; color: #1565c0; }
    .badge-progress { background: #fff3e0; color: #ef6c00; }
    .badge-resolved { background: #e8f5e9; color: #2e7d32; }

    .badge-priority-low      { background: #e8f5e9; color: #2e7d32; }
    .badge-priority-medium   { background: #fff3e0; color: #ef6c00; }
    .badge-priority-high     { background: #ffe0b2; color: #e65100; }
    .badge-priority-critical { background: #ffebee; color: #c62828; }

    /* Forms */
    .form-container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        padding: 30px;
    }

    .form-row {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 20px;
        margin-bottom: 0;
    }

    textarea {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        resize: vertical;
        min-height: 120px;
        transition: all 0.3s;
    }

    textarea:focus {
        outline: none;
        border-color: #1565c0;
        box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
    }

    select {
        width: 100%;
        padding: 12px 16px;
        border: 1px solid #ddd;
        border-radius: 8px;
        font-size: 14px;
        background: white;
        cursor: pointer;
        transition: all 0.3s;
    }

    select:focus {
        outline: none;
        border-color: #1565c0;
        box-shadow: 0 0 0 3px rgba(21,101,192,0.1);
    }

    .upload-area {
        border: 2px dashed #ddd;
        border-radius: 8px;
        padding: 40px;
        text-align: center;
        cursor: pointer;
        transition: all 0.3s;
    }

    .upload-area:hover { border-color: #1565c0; background: #f5f5f5; }
    .upload-area input { display: none; }
    .upload-icon { font-size: 48px; color: #999; margin-bottom: 15px; }
    .upload-area p    { color: #666; margin-bottom: 5px; }
    .upload-area span { color: #999; font-size: 13px; }

    .attachments-list  { margin-top: 20px; }

    .attachment-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #f5f5f5;
        padding: 12px 16px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .attachment-info { display: flex; align-items: center; gap: 12px; }
    .attachment-info strong { color: #333; font-size: 14px; }
    .attachment-info span   { color: #666; font-size: 12px; }

    .btn-remove {
        background: none;
        border: none;
        color: #c62828;
        cursor: pointer;
        font-size: 20px;
        padding: 5px;
        line-height: 1;
    }

    .btn-remove:hover { color: #b71c1c; }

    .btn-submit {
        width: 100%;
        padding: 16px;
        background: #1565c0;
        color: white;
        border: none;
        border-radius: 8px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        transition: background 0.3s;
        margin-top: 20px;
    }

    .btn-submit:hover { background: #0d47a1; }

    /* Tickets Table */
    .table-container {
        background: white;
        border-radius: 12px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        overflow: hidden;
    }

    table  { width: 100%; border-collapse: collapse; }
    thead  { background: #f5f5f5; }

    th {
        padding: 16px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #666;
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    td { padding: 16px; border-top: 1px solid #eee; font-size: 14px; color: #333; }
    tr:hover { background: #fafafa; }

    .ticket-id          { color: #1565c0; font-weight: 600; }
    .empty-table-message { text-align: center; color: #999; padding: 30px; }

    /* Footer */
    .footer {
        background: white;
        border-top: 1px solid #eee;
        padding: 30px 0;
        margin-top: 50px;
        text-align: center;
    }

    .footer p   { color: #666; font-size: 13px; margin-bottom: 5px; }
    .footer a   { color: #1565c0; text-decoration: none; }
    .footer a:hover { text-decoration: underline; }

    .hidden { display: none !important; }

    /* Responsive */
    @media (max-width: 768px) {
        .header-content { flex-direction: column; gap: 15px; }
        .nav-content     { flex-wrap: wrap; }
        .form-row        { grid-template-columns: 1fr; }
        .content-grid    { grid-template-columns: 1fr; }
        .table-container { overflow-x: auto; }
    }